/* ============================================================
   HOLT Crane - Momentum
   Design tokens + WordPress integration + block-targeted
   component styles. Content is native blocks (editable);
   this file is the locked "look".
   Build slice: header + video hero. More sections to follow.
   ============================================================ */

/* ---- Design tokens (mirrored into theme.json) ---- */
:root {
  --hce-black: #2d2926;
  --hce-brick: #c4161c;
  --hce-l-grey: #e2e3e5;
  --hce-d-grey: #4f4f4f;
  --hce-yellow: #f7ce46;
  --hce-maroon: #6a1d32;

  --grey-25: #fafafb;
  --grey-50: #f4f4f6;
  --grey-100: var(--hce-l-grey);
  --grey-400: #9a9a9c;
  --grey-600: #6e6e70;

  --color-bg: #ffffff;
  --color-bg-alt: var(--grey-50);
  --color-text: var(--hce-black);
  --color-text-muted: var(--hce-d-grey);
  --color-primary: var(--hce-brick);
  --color-primary-hover: #a91217;

  --font-heading: "Archivo", "Arial", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --text-base: 1.0625rem;
  --text-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --text-hero: clamp(2.5rem, 1.9rem + 4.4vw, 5.25rem);

  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;

  --header-height: 64px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 40px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-card: 0 2px 10px rgba(45, 41, 38, 0.07), 0 12px 30px rgba(45, 41, 38, 0.09);
  --shadow-card-hover: 0 4px 14px rgba(45, 41, 38, 0.11), 0 20px 44px rgba(45, 41, 38, 0.16);
}

/* ---- Twenty Twenty-Five integration ----
   Front-page template renders only our pattern (no header/footer parts),
   so clear the canvas padding and let the hero run full-bleed. ---- */
/* Neutralize Twenty Twenty-Five root padding + block gap so panels run
   edge-to-edge with no strips between them. */
body {
  margin: 0;
  overflow-x: hidden;
  --wp--style--root--padding-top: 0px;
  --wp--style--root--padding-right: 0px;
  --wp--style--root--padding-bottom: 0px;
  --wp--style--root--padding-left: 0px;
}
.wp-site-blocks { padding: 0 !important; margin: 0 !important; }
.wp-site-blocks > * { margin-block: 0 !important; }
.has-global-padding { padding-left: 0 !important; padding-right: 0 !important; }
/* Belt-and-suspenders: force section panels to full viewport width even if a
   parent layout still constrains them. body has overflow-x:hidden above. */
.holt-hero.wp-block-cover,
.holt-photo.wp-block-cover,
.holt-panel,
/* The contact section is a block in post_content, so on this page it sits
   inside the constrained .entry-content while every panel around it breaks
   out - it rendered 50px in from the left with the page showing through.
   Product pages need none of this: their .entry-content is already full width,
   and momentum.css is not loaded there. */
.contact-band,
.site-footer {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.admin-bar .holt-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .holt-header { top: 46px; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Header (native Group of blocks, styled as a fixed nav)
   DEAD as of the global-nav rework: the rendered header is
   <header class="nav"> from holt_render_nav(), styled in chrome.css.
   Nothing on the site emits .holt-header any more. Left in place only
   because the block markup could be reintroduced; do not spend a polish
   round on it.
   ============================================================ */
.holt-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-height);
  margin: 0;
  padding: 8px clamp(16px, 4vw, 48px);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.holt-header.is-scrolled {
  background: rgba(45, 41, 38, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.holt-header .holt-logo { margin: 0; line-height: 0; }
.holt-header .holt-logo img {
  height: 38px !important;
  width: auto !important;
  display: block;
}
.holt-header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.holt-phone {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: nowrap;
}
.holt-phone a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.holt-phone a:hover { color: var(--hce-yellow); }

/* ============================================================
   Buttons (core Button block, brand-styled)
   ============================================================ */
.holt-btn .wp-block-button__link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.9em 2.6em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.holt-btn .wp-block-button__link:hover { transform: translateY(-1px); }
.holt-btn-primary .wp-block-button__link { background: var(--color-primary); color: #fff; }
.holt-btn-primary .wp-block-button__link:hover { background: var(--color-primary-hover); }
.holt-btn-glass .wp-block-button__link {
  /* Was rgba(255,255,255,0.14) with a white label. Over the cream Link-Belt
     boom and bright sky the composite landed near #b9c2cc and the label fell to
     roughly 2:1. A dark translucent fill keeps the "secondary, see-through"
     read while giving the white label a stable backdrop at any brightness. */
  background: rgba(28, 25, 23, 0.52);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.holt-btn-glass .wp-block-button__link:hover { background: rgba(28, 25, 23, 0.72); border-color: #fff; }
.holt-header .holt-btn .wp-block-button__link { padding: 0.6em 1.4em; }

/* ============================================================
   Hero (core Cover block with video background)
   ============================================================ */
.holt-hero.wp-block-cover {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  padding: calc(var(--header-height) + 4vh) 20px 7vh;
}
.holt-hero .wp-block-cover__video-background { object-fit: cover; }
/* Lock a top/bottom gradient scrim for legibility (overrides the flat dim). */
/* The scrim used to thin to 12% at 42% height - which is exactly the band the
   eyebrow, H1 and subhead occupy - so over the bright Link-Belt boom in the
   drone shot the subhead measured 2.14:1 and the yellow eyebrow 2.45:1. The
   floor is now 46% and the thinnest point is pushed to 78%, below the text. */
.holt-hero > .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(45, 41, 38, 0.72), rgba(45, 41, 38, 0.58) 30%, rgba(45, 41, 38, 0.46) 78%, rgba(45, 41, 38, 0.7)) !important;
  opacity: 1 !important;
}
.holt-hero .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 56rem;
  color: #fff;
}
.holt-eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hce-yellow);
  margin: 0 0 var(--space-sm);
}
/* Over video/photo the underlying brightness is unpredictable, so the yellow
   needs its own scrim to stay legible (SA review, 8/3/26). */
.holt-hero .holt-eyebrow,
.holt-photo .holt-eyebrow {
  text-shadow: 0 1px 3px rgba(20, 18, 17, 0.85), 0 2px 14px rgba(20, 18, 17, 0.6);
}
.holt-hero-title {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-size: var(--text-hero);
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.holt-subhead {
  font-size: var(--text-lg);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  max-width: 39rem;
  margin: var(--space-sm) auto 0;
  line-height: 1.5;
}
.holt-btns { margin-top: var(--space-md); gap: 14px; flex-wrap: wrap; justify-content: center; }
.holt-scrollcue {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin: var(--space-lg) 0 0;
}

/* ============================================================
   Content panels (native Group blocks, full-viewport)
   ============================================================ */
.holt-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  padding: clamp(5rem, 9vh, 7.5rem) 20px;
}
/* :where() keeps this low-specificity so specific elements below can widen */
.holt-panel > :where(*) { margin-block: 0; max-width: 64rem; }
.holt-panel .holt-subhead { max-width: 44rem; }
.holt-panel.on-light { color: var(--color-text); }
.holt-render {
  background: radial-gradient(120% 90% at 50% 16%, #ffffff 0%, var(--grey-50) 48%, var(--grey-100) 100%);
}
.on-light .holt-eyebrow { color: var(--color-primary); }
.holt-h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);
  margin: 0;
  max-width: 20ch;
}
.holt-panel .holt-subhead { margin-top: var(--space-sm); }
.on-light .holt-subhead { color: var(--color-text-muted); }

/* ---- Spec plate (editable numbers; JS animates .holt-count) ---- */
.holt-spec {
  /* inline-flex sized the plate to its own content, so the Rough Terrain and
     All Terrain plates came out 597px vs 639px with different left edges one
     screen apart. A fixed measure makes the same component the same width
     everywhere it appears. */
  display: flex;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-md);
  border-top: 1px solid rgba(45, 41, 38, 0.16);
  border-bottom: 1px solid rgba(45, 41, 38, 0.16);
  background: rgba(255, 255, 255, 0.5);
}
.holt-spec-cell {
  /* Cells used to size to their own content, so the Rough Terrain and All
     Terrain plates (visually parallel sections) came out 552px vs 583px wide
     with different left edges, dragged apart purely by one longer label.
     A shared min-width makes every cell and both plates consistent. */
  flex: 1 1 0;
  min-width: 9rem;
  padding: 14px clamp(12px, 2vw, 24px);
  border-right: 1px solid rgba(45, 41, 38, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start, not center: with `center`, a label that wraps to two lines
     ("Max Tip Height") made its cell taller and pushed its FIGURE up, so the
     three headline numbers fell off a shared baseline by 8-10px. Aligning to
     the top pins the numbers to one line and lets the labels grow downward. */
  justify-content: flex-start;
  gap: 4px;
}
.holt-spec-cell:last-child { border-right: 0; }
.holt-spec-value { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.holt-spec-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1;
  margin: 0;
  color: var(--hce-black);
}
.holt-spec-unit {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-primary);
  margin: 0;
}
.holt-spec-label {
  font-family: var(--font-mono);
  /* Reserve two lines so a label that wraps ("Max Tip Height", "175/225/300
     AT") does not make its cell taller than its neighbours. Unequal cells left
     the plate's dividers ending short of its bottom rule. */
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  /* 0.66rem rendered at 10.56px - under a 12px readability floor, and these
     labels are the only thing explaining what each headline number means. */
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-600);
  margin: 0;
}

/* ---- Floated product render ---- */
.holt-render-img { margin: var(--space-md) 0 0; width: 100%; }
.holt-render-img img {
  max-height: 400px;
  width: auto;
  /* min() rather than a bare 640px: at 375 the fixed cap let the render lay
     out wider than its 335px column, so the crane was clipped by the page's
     overflow-x and sat flush to the column's left edge instead of centred. */
  max-width: min(640px, 100%);
  margin: 0 auto;
  filter: drop-shadow(0 32px 44px rgba(45, 41, 38, 0.28));
}

/* ---- Dark button variant ---- */
.holt-btn-dark .wp-block-button__link { background: rgba(45, 41, 38, 0.9); color: #fff; }
.holt-btn-dark .wp-block-button__link:hover { background: var(--hce-black); }

.holt-panel .holt-btns { margin-top: var(--space-md); }

/* ============================================================
   Photo panels (Cover block, image background) - reuse the hero
   treatment, add a dark spec variant.
   ============================================================ */
.holt-photo.wp-block-cover {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  padding: calc(var(--header-height) + 4vh) 20px 7vh;
}
.holt-photo .wp-block-cover__image-background { object-fit: cover; }
/* The scrim used to thin to 12% at 42% height - exactly where the heading and
   subhead sit - and on the Used Cranes photo that lands white text on a
   near-white Link-Belt boom at about 1.7:1. Floor raised to 42% and the
   thinnest point moved off the text band. */
.holt-photo > .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(45, 41, 38, 0.7), rgba(45, 41, 38, 0.56) 30%, rgba(45, 41, 38, 0.62) 60%, rgba(45, 41, 38, 0.82)) !important;
  opacity: 1 !important;
}
/* Belt and braces: the hero H1 already carried a shadow, the photo band did
   not, which was an inconsistency as much as a contrast failure. */
.holt-photo h2,
.holt-photo .holt-subhead { text-shadow: 0 2px 18px rgba(20, 18, 17, 0.55); }
/* The heading was breaking as "Used Cranes." / "Raised to a higher" /
   "standard.", orphaning one short word under two long lines. */
.holt-photo h2 { text-wrap: balance; }
.holt-photo .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 56rem;
  color: #fff;
}
.holt-photo .holt-spec { background: rgba(45, 41, 38, 0.3); border-color: rgba(255, 255, 255, 0.3); }
.holt-photo .holt-spec-cell { border-color: rgba(255, 255, 255, 0.22); }
.holt-photo .holt-spec-num { color: #fff; }
.holt-photo .holt-spec-unit { color: var(--hce-yellow); }
.holt-photo .holt-spec-label { color: rgba(255, 255, 255, 0.7); }

/* ============================================================
   Lineup grid (Group of card Groups)
   ============================================================ */
.holt-lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  /* 72rem left the two cards marooned mid-column with ~250px of dead space
     each side. A measure sized to the pair keeps them a deliberate group. */
  max-width: 46rem;
  margin-top: var(--space-lg);
}
.holt-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(45, 41, 38, 0.07);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.holt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(196, 22, 28, 0.35); }
/* Cards with a real destination: the heading becomes the link (same look, no
   color/underline change), stretched via ::after so the whole card is
   clickable. Cards with no destination yet are unaffected. */
.holt-card-name a { color: inherit; text-decoration: none; }
.holt-card-name a::after { content: ""; position: absolute; inset: 0; }
.holt-card-img { margin: 0 0 14px; }
.holt-card-img img { height: 118px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(45, 41, 38, 0.18)); }
.holt-card-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.01em; margin: 0; }
.holt-card-cap { font-family: var(--font-mono); font-size: 0.84rem; letter-spacing: 0.06em; color: var(--color-primary); margin: 6px 0 0; }
.holt-card-desc { font-size: 0.86rem; color: var(--grey-600); line-height: 1.45; margin: 8px 0 0; max-width: 240px; }

/* The 9rem cell floor forced the 3-up plate to wrap 2+1 on a phone, orphaning
   the third cell on its own full-width row. Below 560px the cells share the
   row evenly instead. */
@media (max-width: 560px) {
  .holt-spec-cell { min-width: 0; padding-inline: 6px; }
  .holt-spec-num { font-size: clamp(18px, 5.6vw, 24px); }
}
@media (max-width: 900px) { .holt-lineup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .holt-lineup-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Service & Parts split
   ============================================================ */
.holt-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 72rem;
  margin-top: var(--space-lg);
  text-align: left;
}
.holt-split-col {
  background: #fff;
  border: 1px solid rgba(45, 41, 38, 0.07);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 30px;
  /* Column layout so the card's CTA can be pinned to the bottom, which is what
     actually makes the two cards read as aligned (SA review, 8/3/26). */
  display: flex;
  flex-direction: column;
}
.holt-split-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-primary);
}
/* "Field Service" / "Shop Service" subheads inside the Service card. */
.holt-svc-sub {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--hce-black);
  margin: 18px 0 6px;
}
.holt-split-text { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.55; margin: 0 0 10px; }
.holt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* Flat tags, deliberately NOT button-like: no white fill, no pill, no border
   box. SA flagged that the old pill treatment read as clickable (8/3/26). */
.holt-chip {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  margin: 0;
  border: 0;
  border-left: 2px solid rgba(196, 22, 28, 0.5);
  /* was 0 - the only square surface on a page of rounded ones */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--grey-50, #f4f4f6);
  color: var(--color-text-muted);
}
/* Pin each card's CTA to the bottom so both cards' buttons line up. Needs the
   parent in the selector to outrank `.holt-panel .holt-btns` above. */
.holt-split-col .holt-card-btn { margin-top: auto; padding-top: 22px; }

/* ============================================================
   Contact + locations
   ============================================================ */
/* "Let's get to work." was white-on-white against "Keep it lifting." directly
   above it, so the two panels read as one long block with no seam. Grey also
   steps the page down into the black footer, and the .holt-loc cards stay #fff
   so they now read as cards instead of dissolving into the panel. */
/* The lineup sits directly under the slider, which is white, so without this
   the two read as one continuous block. Alternates light grey -> dark photo ->
   white service -> light grey contact down the rest of the page. */
.holt-lineup { background: var(--grey-50); }
.holt-contact { background: var(--grey-50); }
.on-light .holt-subhead a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); text-decoration: none; font-family: var(--font-mono); }
.holt-locs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  /* Default `center` left the two cards vertically centred against each other,
     so with a two-line description on one and one line on the other, neither
     the tops, the bottoms, the headings, nor the "View location" links lined
     up. Stretch makes them equal height and the rows align. */
  align-items: stretch;
  width: 100%;
  max-width: 72rem;
  margin-top: var(--space-lg);
}
.holt-loc {
  flex: 1 1 0;
  max-width: none;
  /* Column + order so the action can sit last. The block markup runs name,
     link, description, which put the CTA between a label and the text that
     qualifies it; every other card on the site is title, support, action. */
  display: flex;
  flex-direction: column;
  /* Matches the .holt-card hover language; these were the only card surfaces
     on the page that were visually identical but inert under the pointer. */
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  background: #fff;
  border: 1px solid rgba(45, 41, 38, 0.07);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px;
  text-align: left;
}
/* The card declared a hover transition but had no :hover rule, so it never
   fired - it looked identical to the crane cards, which do lift. */
.holt-loc:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(196, 22, 28, 0.35); }
/* Matches .holt-card: the heading link stretches over the whole card so the
   hover lift is backed by a real hit area instead of a 113x17 text link. */
.holt-loc { position: relative; }
.holt-loc-link a::after { content: ""; position: absolute; inset: 0; }
.holt-loc-name { order: 1; font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; margin: 0 0 8px; }
.holt-loc-link { margin: 0 0 4px; }
.holt-loc-link a { color: var(--color-primary); text-decoration: none; font-family: var(--font-mono); font-size: 0.8rem; }
.holt-loc-desc { order: 2; color: var(--grey-600); font-size: 0.85rem; margin: 0 0 12px; }
.holt-loc-link { order: 3; margin-top: auto; }

/* ============================================================
   Footer
   ============================================================ */
.holt-footer {
  background: #fff;
  padding: var(--space-xl, 4rem) clamp(20px, 4vw, 48px) var(--space-lg);
  border-top: 1px solid rgba(45, 41, 38, 0.12);
}
.holt-footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  max-width: 74rem;
  margin: 0 auto;
}
.holt-footer-brand { max-width: 26rem; }
.holt-footer-logo { margin: 0 0 10px; }
.holt-footer-logo img { height: 40px !important; width: auto !important; }
.holt-footer-tag { color: var(--grey-600); font-size: 0.78rem; line-height: 1.5; margin: 0; }
.holt-footer-links { display: flex; flex-wrap: wrap; gap: 26px; }
.holt-footer-col { display: flex; flex-direction: column; gap: 8px; }
.holt-footer-h {
  font-family: var(--font-heading);
  font-size: 0.69rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 700;
  margin: 0 0 2px;
}
.holt-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.holt-footer-list a { color: var(--hce-d-grey); text-decoration: none; font-size: 0.815rem; }
.holt-footer-list a:hover { color: var(--hce-black); }
.holt-footer-legal {
  max-width: 74rem;
  margin: 30px auto 0;
  color: var(--grey-400);
  font-size: 0.69rem;
  line-height: 1.6;
}

@media (max-width: 700px) { .holt-split { grid-template-columns: 1fr; } }

/* ---- Reveal (progressive enhancement; JS adds .is-in) ---- */
.holt-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.holt-reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Block-editor adapters (MIGRATION.md, Phase 3+)
   Since the home page moved into post_content, WordPress's flow layout
   injects a block-gap margin via :where(.is-layout-flow) > * + * on every
   child after the first. The design lays these components out with its own
   grid + gap, so that injected margin shifts the 2nd+ item out of alignment.
   This is what made the Parts card sit 19.2px below Service, and knocked the
   first lineup card out of line with its row (SA review, 8/3/26).
   product.css has the equivalent block for the product-page components.
   ============================================================ */
.entry-content > * { margin-block: 0; }
.entry-content .holt-split > *,
.entry-content .holt-lineup-grid > *,
.entry-content .holt-spec > *,
.entry-content .holt-locs > *,
.entry-content .holt-chips > *,
.entry-content .holt-btns > * { margin-block-start: 0; }

/* ---- Responsive ---- */
@media (max-width: 560px) {
  /* stretch, not center: each button was centring independently, so the two
     stacked hero CTAs came out 181px and 190px wide with neither their left
     nor their right edges aligned. */
  .holt-btns { flex-direction: column; align-items: stretch; }
  .holt-btns .wp-block-button__link { display: block; }
  .holt-header .holt-phone { display: none; }
}
@media (max-width: 640px) {
  /* Body-level copy kept its desktop values on phones. The six card
     descriptions are the main comparison copy on this page at 375. */
  .holt-card-desc { font-size: 0.9rem; max-width: none; }
  .holt-card-cap { font-size: 0.82rem; }
  .holt-spec-label { font-size: 0.8rem; }
  .holt-scrollcue { font-size: 0.78rem; }
  /* 113x17 tap target on the only action in each location card. */
  .holt-loc-link a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Every other stacked card on a phone is full-width; these kept an 18rem cap
     and sat inset 24px further than the rest of the stack. */
  .holt-loc { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .holt-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Crane family slider (home)
   Replaces the two standalone Rough Terrain / All Terrain panels with one
   panel that cycles all six families. A slide is deliberately identical to the
   old panel, so these rules mostly just re-target the existing component
   classes at the raw markup the pattern emits instead of block markup.
   ============================================================ */
.holt-slider { position: relative; }
/* The track holds every slide side by side and translates; the viewport clips.
   That gives a real horizontal movement between families rather than one slide
   disappearing and another appearing in its place. */
.holt-slider-viewport { box-sizing: border-box; position: relative; overflow: hidden; }
.holt-slider-track {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}
/* Every slide is a full-width track cell, so the viewport height settles on the
   tallest one and the panel never jumps as you cycle. */
.holt-slide {
  /* box-sizing is NOT global in this stylesheet (product.css has the reset,
     momentum.css never did), so without this the side padding is ADDED to the
     100% basis: each slide measured 1216px inside a 1024px track and every
     -100% step fell 192px short, compounding with each click. */
  box-sizing: border-box;
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: clamp(56px, 8vw, 96px);
  /* Content fades in just behind the movement so the slide reads as arriving
     rather than sliding fully formed. */
  opacity: 0.35;
  transition: opacity 0.4s var(--ease);
}
.holt-slide.is-active { opacity: 1; }
.holt-slide > * { max-width: 64rem; }
.holt-slide .holt-render-img { margin: var(--space-md) 0 0; width: 100%; }
.holt-slide .holt-render-img img {
  max-height: 400px;
  width: auto;
  max-width: min(640px, 100%);
  margin: 0 auto;
  filter: drop-shadow(0 32px 44px rgba(45, 41, 38, 0.28));
}
.holt-slide .holt-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: var(--space-md); }

/* The pattern emits plain anchors, so the button look is restated here rather
   than borrowing .holt-btn, which is scoped to the core Button block. */
.holt-slide-btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.9em 2.6em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.holt-slide-btn:hover { transform: translateY(-1px); }
.holt-slide-btn-primary { background: var(--color-primary); color: #fff; }
.holt-slide-btn-primary:hover { background: var(--color-primary-hover); }
.holt-slide-btn-dark { background: rgba(45, 41, 38, 0.9); color: #fff; }
.holt-slide-btn-dark:hover { background: var(--hce-black); }

/* Arrows sit outside the content measure on desktop and tuck in on smaller
   screens rather than overlapping the render. */
.holt-slider-arrow {
  position: absolute;
  top: 46%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(45, 41, 38, 0.14);
  background: #fff;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 2;
}
.holt-slider-arrow:hover { border-color: rgba(196, 22, 28, 0.4); transform: translateY(-2px); }
.holt-slider-arrow span {
  width: 11px; height: 11px;
  border-right: 2px solid var(--hce-black);
  border-bottom: 2px solid var(--hce-black);
}
.holt-slider-prev { left: clamp(12px, 4vw, 60px); }
.holt-slider-prev span { transform: rotate(135deg); margin-left: 3px; }
.holt-slider-next { right: clamp(12px, 4vw, 60px); }
.holt-slider-next span { transform: rotate(-45deg); margin-right: 3px; }

.holt-slider-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: var(--space-lg);
}
.holt-slider-dot {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(45, 41, 38, 0.14);
  background: transparent;
  color: var(--grey-600);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.holt-slider-dot:hover { border-color: rgba(45, 41, 38, 0.3); color: var(--hce-black); }
.holt-slider-dot.is-active { background: var(--hce-black); border-color: var(--hce-black); color: #fff; }

/* Screen-reader-only status line announcing the slide change. */
.holt-slider-live {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 880px) {
  .holt-slider-arrow { top: auto; bottom: -6px; width: 44px; height: 44px; }
  .holt-slider-prev { left: 12px; }
  .holt-slider-next { right: 12px; }
  .holt-slider-dots { margin-bottom: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .holt-slider-track { transition: none; }
  .holt-slide { opacity: 1; transition: none; }
}