/*
Theme Name:   Cedarwood Equipment Rental (Layerly)
Template:     layerly-base
Version:      1.0.0
Layerly Site: cedarwoodequipment-layerly-dev
Description:  Per-site theme for Cedarwood Equipment Rental. Holds ONLY this site's own CSS, bespoke sections and page templates. The framework lives in the parent and is updated fleet-wide — never copy a framework file in here without recording it as a fork.
*/

/* Per-site tokens and CSS below. Override the NUMBERED tokens; never edit the framework's own table. */
/* Cedarwood brand tokens. Provenance RESOLVED against the exact release this site was
   built on (1.0.0-r26-6615065): every one of these differs from that baseline, so all
   36 are per-site design choices and none is framework drift. */
:root {
  --color-1: #FFFFFF;
  --color-10: #64748B;
  --color-2: #E81E25;
  --color-2-deep: #D01A20;
  --color-3: #000000;
  --color-4: #F8FAFC;
  --color-5: #FCF2E5;
  --color-6: #404040;
  --color-7: #E2E8F0;
  --color-8: #1E293B;
  --color-9: #8B1E2D;
  --color-bg: var(--color-1);
  --color-border: var(--color-7);
  --color-cream: var(--color-5);
  --color-ink-soft: var(--color-8);
  --color-on-dark-soft: rgba(255, 255, 255, .7);
  --color-primary: var(--color-2);
  --color-rule: rgba(64, 64, 64, .5);
  --color-rule-soft: rgba(64, 64, 64, .2);
  --color-text: var(--color-3);
  --color-text-muted: var(--color-6);
  --container-max: 1248px;
  --font-1: 'Google Sans Flex', system-ui, -apple-system, sans-serif;
  --font-2: 'Zalando Sans Expanded', system-ui, -apple-system, sans-serif;
  --font-body: var(--font-1);
  --font-display: var(--font-2);
  --font-subheading: var(--font-2);
  --space-3xl: clamp(56px, 9.4vw, 120px);
  --text-2xl: 24px;
  --text-h1: clamp(34px, 5.4vw, 68px);
  --text-h2: clamp(28px, 4.2vw, 44px);
  --text-h3: clamp(22px, 2.6vw, 28px);
  --text-lg: 18px;
  --text-xl: 20px;
  --text-xxl: clamp(28px, 4.2vw, 44px);
  --weight-semi: 600;
  --chrome-nav-height: 84px;
}

/* ── Per-site CSS, carried verbatim from the pre-migration style.css (line 1438 onward). ── */

/* Layerly — Cedarwood — button variants + shared rule-underlined section head — 2026-08-17T20:22:11.046Z */
.btn--light {
  background: var(--color-1);
  border-color: var(--color-7);
  color: var(--color-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.btn--light:hover {
  background: var(--color-4);
}

.btn--outline-brand {
  background: transparent;
  border-color: var(--color-2);
  color: var(--color-1);
}

.btn--outline-brand:hover {
  background: var(--color-2);
}

.section-head--rule {
  margin-bottom: var(--space-xl);
}

.section-head--rule .section-head__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-3);
  max-width: 860px;
  margin: 0 0 var(--space-md);
}

.section-head--rule .section-head__sub {
  border-top: 1px solid var(--color-2);
  padding-top: var(--space-md);
  max-width: none;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-2-deep);
}


/* Layerly — Cedarwood home — hero, red intro split + equipment categories grid (exact Figma geometry) — 2026-08-17T20:27:34.957Z */
.hero--full-bg .btn--ghost {
  background: transparent;
  border-color: var(--color-2);
  color: var(--color-1);
}

.hero--full-bg .btn--ghost:hover {
  background: var(--color-2);
  border-color: var(--color-2);
}

.intro-split--image-right {
  color: var(--color-1);
  padding-block: var(--space-xxl);
  background: var(--section-bg-color, var(--color-2));
}

.intro-split--image-right .intro-split__inner {
  grid-template-columns: 549fr 571fr;
  gap: var(--space-xxl);
  align-items: stretch;
}

.intro-split--image-right .intro-split__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-lg);
}

.intro-split--image-right .intro-split__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-3);
}

.intro-split--image-right .intro-split__body {
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-3);
}

.intro-split--image-right .intro-split__media {
  align-self: stretch;
  height: 480px;
}



.intro-split--image-right .intro-split__cta {
  margin-top: 0;
}

.intro-split--image-right .btn--primary {
  background: var(--color-1);
  border-color: var(--color-7);
  color: var(--color-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

.intro-split--image-right .intro-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.equipment-categories {
  padding-block: var(--space-xxl);
  background: var(--section-bg-color, var(--color-1));
}

.equipment-categories__head {
  margin-bottom: var(--space-xl);
}

.equipment-categories__intro {
  border-top: 1px solid var(--color-2);
  padding-top: var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.equipment-categories__intro-col {
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-8);
}

.equipment-categories__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--categories-cols, 4), 1fr);
  gap: var(--space-lg);
}

.equipment-categories__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--color-4);
  border: 1px solid var(--color-7);
  overflow: hidden;
  transition: border-color .3s ease;
}

.equipment-categories__link:hover {
  border-color: var(--color-2);
}

.equipment-categories__media {
  flex: 0 0 auto;
  height: 240px;
  background: transparent;
  border: 0;
  overflow: hidden;
  padding: var(--space-md) var(--space-md) 0;
}

.equipment-categories__image {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  transition: transform .3s ease;
}

.equipment-categories__link:hover .equipment-categories__image {
  transform: scale(1.04);
}

.equipment-categories__body {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.equipment-categories__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 20px;
  color: var(--color-3);
  margin: 0;
}

.equipment-categories__link:hover .equipment-categories__title {
  color: var(--color-2);
}

.equipment-categories__desc {
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: 20px;
  color: var(--color-6);
  margin: 0;
}

.equipment-categories__cta {
  margin-top: var(--space-lg);
}


/* Layerly — Cedarwood home — split panels, process band, service-area intro, FAQ split, CTA band — 2026-08-17T20:28:08.310Z */
.split-panels {
  background: var(--section-bg-color, var(--color-5));
  padding-block: var(--space-3xl) var(--space-xxl);
}

.split-panels__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.split-panels__panel {
  display: flex;
  flex-direction: column;
}

.split-panels__media {
  height: 280px;
  overflow: hidden;
}

.split-panels__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-panels__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.split-panels__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 31px;
  color: var(--color-2);
  margin: 0;
}

.split-panels__text {
  font-size: var(--text-md);
  font-weight: var(--weight-reg);
  line-height: 22px;
}

.split-panels__panel--left {
  background: var(--color-3);
  color: var(--color-1);
}

.split-panels__panel--right {
  background: var(--color-1);
  border: 1px solid var(--color-7);
  color: var(--color-3);
}

.split-panels__cta {
  margin-top: var(--space-xl);
}

.process-steps--hairline {
  background: var(--section-bg-color, var(--color-5));
  padding-block: var(--space-3xl) var(--space-xxl);
}

.process-steps__row {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: var(--space-lg) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  border-top: 1px solid var(--color-rule-soft);
  border-bottom: 1px solid var(--color-rule-soft);
}

.process-steps__step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 300px;
  padding-right: var(--space-lg);
  border-right: 1px solid var(--color-rule);
}

.process-steps__step:last-child {
  border-right: 0;
  padding-right: 0;
}

.process-steps__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.process-steps__label {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 31px;
  color: var(--color-2);
  margin: 0;
}

.process-steps__icon .icon {
  font-size: 44px;
}

.process-steps__cta {
  margin-top: var(--space-xl);
}

.intro-area {
  background: var(--section-bg-color, var(--color-1));
  padding-block: var(--space-xxl);
}

.intro-area__inner {
  display: grid;
  grid-template-columns: 571fr 549fr;
  gap: var(--space-xxl);
  align-items: stretch;
}

.intro-area__media {
  height: 480px;
}

.intro-area__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-area__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
}

.intro-area__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-3);
  margin: 0;
}

.intro-area__body {
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-8);
}

.intro-area__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.intro-area__chip {
  padding: var(--space-xs) 12px;
  border: 1px solid var(--color-2);
  border-radius: var(--radius-full);
  background: var(--color-1);
  color: var(--color-2-deep);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: .5px;
  line-height: 15px;
  text-transform: uppercase;
}

.faq {
  background: var(--section-bg-color, var(--color-1));
  padding-block: var(--space-3xl) var(--space-xxl);
}

.faq__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  align-items: start;
}

.faq__accordion {
  border-top: 0;
}

.faq__item {
  border: 1px solid var(--color-6);
  padding: var(--space-lg);
}

.faq__item + .faq__item {
  margin-top: -1px;
}

.faq__summary {
  padding: 0;
  gap: 10px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: 24px;
  color: var(--color-3);
}

.faq__icon {
  color: var(--color-2);
}

.faq__icon .icon {
  font-size: 30px;
}

.faq__item[open] > .faq__summary .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  padding: var(--space-lg) 0 0;
  color: var(--color-3);
  font-size: var(--text-md);
  line-height: 22px;
}

.faq__media {
  height: 530px;
}

.faq__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq__cta {
  margin-top: var(--space-xl);
}

.cta-split {
  background: var(--section-bg-color, var(--color-2));
  color: var(--color-1);
  padding-block: var(--space-3xl) var(--space-xxl);
}

.cta-split__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-1);
  max-width: 560px;
  margin: 0 0 var(--space-md);
}

.cta-split__sub {
  border-top: 1px solid var(--color-5);
  padding-top: var(--space-md);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-1);
}

.cta-split__message {
  display: grid;
  grid-template-columns: 579fr 541fr;
  gap: var(--space-xxl);
  margin-top: var(--space-xxl);
}

.cta-split__body {
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 28px;
  color: var(--color-1);
}

.cta-split__lead {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 31px;
  color: var(--color-1);
}

.cta-split__cta {
  margin-top: var(--space-xl);
}

/* ── Cedarwood — RESPONSIVE. Kept as literal @media blocks in this file on purpose:
   write_css flattens @media wrappers, which silently promoted every mobile
   override to a global rule and collapsed all the desktop grids. ── */
@media (max-width: 1024px) {
  .equipment-categories__list { grid-template-columns: repeat(2, 1fr); }
  .equipment-categories__intro { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .process-steps__row { grid-template-columns: repeat(2, 1fr); }
  .process-steps__step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .process-steps__icon .icon { font-size: 64px; }
}
@media (max-width: 880px) {
  .intro-split--image-right .intro-split__inner { grid-template-columns: 1fr; }
  .intro-split--image-right .intro-split__media { height: 280px; }
  .split-panels__grid { grid-template-columns: 1fr; }
  .split-panels__media { height: 220px; }
  .intro-area__inner { grid-template-columns: 1fr; }
  .intro-area__media { height: 280px; }
  .faq__inner { grid-template-columns: 1fr; }
  .faq__media { height: 320px; }
  .cta-split__message { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 560px) {
  .equipment-categories__list { grid-template-columns: 1fr; }
  .equipment-categories__media { height: 280px; }
  .process-steps__row { grid-template-columns: 1fr; }
  .process-steps__step { border-right: 0; padding-right: 0; min-height: 0; }
}

/* Chrome on small screens: Zalando Sans EXPANDED is very wide, so the wordmark
   has to be allowed to shrink + wrap or it pushes the header past the viewport. */
@media (max-width: 767.98px) {
  .nav__logo { min-width: 0; flex: 1 1 auto; }
  .nav__logo-text { font-size: var(--text-md); overflow-wrap: anywhere; }
}


/* Layerly — Hero: restore full 1200px content width (base .hero__inner max-width:800px was clamping + centering the full-bg hero, Figma has it left-aligned at 1200) — 2026-08-17T22:03:59.550Z */
.hero--full-bg .hero__inner.wrap {
  max-width: var(--container-max);
  margin-inline: auto;
}


/* Layerly — Hero CTAs left-aligned per Figma (base .hero__ctas centers them); :not() keeps the centered hero variant working — 2026-08-17T22:13:00.746Z */
.hero--full-bg:not([style*="--hero-align: center"]) .hero__ctas {
  justify-content: flex-start;
}


/* Layerly — Cedarwood header: real 60x60 logo + red nav links per Figma 8003:757 — 2026-08-17T22:37:09.343Z */
.nav .nav__logo-img {
  width: 60px;
  height: 60px;
  max-height: none;
  object-fit: contain;
}

.nav .nav__list a {
  color: var(--color-2);
}

.nav .nav__list a:hover, .nav .nav__list a:focus-visible {
  color: var(--color-1);
}


/* Layerly — Cedarwood footer: brand-red band, white logo tile, hairline, 3 columns per Figma 8032:1667 — 2026-08-17T22:37:33.449Z */
.footer--cedarwood {
  --footer-bg: var(--color-2);
  --footer-fg: var(--color-1);
  --footer-link: var(--color-1);
  --footer-link-hover: var(--color-5);
  padding-block: var(--space-xxl) var(--space-lg);
}

.footer--cedarwood .footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xxl);
  padding-block: 0;
}

/* Right half: all footer copy, stacked. */
.footer--cedarwood .footer__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-self: end;
}

.footer--cedarwood .footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer--cedarwood .footer__logo {
  display: block;
  width: 100%;
  /* The mark is square with generous internal margin — past ~320px it just
     makes the footer tall without reading bigger. */
  max-width: 320px;
  height: auto;
  flex: none;
  /* White-on-red logo: no white tile behind it any more. */
  background: transparent;
}

.footer--cedarwood .footer__logo-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.footer--cedarwood .footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer--cedarwood .footer__nav-list a {
  color: var(--color-1);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  line-height: 22px;
}

.footer--cedarwood .footer__nav-list a:hover, .footer--cedarwood .footer__nav-list a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer--cedarwood .footer__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-5);
}

.footer--cedarwood .footer__cols {
  display: grid;
  /* Contact is wider than Hours — the email needs the room or it breaks
     mid-word (overflow-wrap: anywhere on .footer__contact-link). */
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  justify-content: start;
  gap: var(--space-xl);
  align-items: start;
}

/* .footer__col--brand is retired — the tagline now leads .footer__body and the
   legal row sits at its foot, both outside .footer__cols. */

/* COLOUR DEVIATES FROM FIGMA ON PURPOSE — DO NOT "FIX" TO #FCF2E5.
   The design sets this 18px/500 tagline to cream #FCF2E5 on the #E81E25 band,
   which measures 4.086:1 — below the 4.5:1 floor for text this size (18px at
   weight 500 is not "large text": that needs 24px, or 18.66px bold). White
   measures 4.522:1 and clears it. Accessibility is a floor, not a design
   preference, so the floor wins over the exact swatch. */
.footer--cedarwood .footer__tagline {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  color: var(--color-1);
}

.footer--cedarwood .footer__legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-md);
}

/* COLOUR DEVIATES FROM FIGMA ON PURPOSE — DO NOT "FIX" TO #E2E8F0.
   The design sets this 12px legal row to #E2E8F0 on the #E81E25 band, which
   measures 3.668:1 — well below the 4.5:1 floor, and 12px is the smallest copy
   on the page. White measures 4.522:1 and clears it. Same floor-beats-swatch
   call as the tagline above. */
.footer--cedarwood .footer__legal-row .layerly-copyright__line, .footer--cedarwood .footer__legal-links {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-reg);
  line-height: 17px;
  color: var(--color-1);
}

.footer--cedarwood .footer__legal-row a {
  color: var(--color-1);
}

.footer--cedarwood .footer__col--hours, .footer--cedarwood .footer__col--contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer--cedarwood .footer__col-heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-1);
}

.footer--cedarwood .footer__col-body, .footer--cedarwood .footer__contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-med);
  line-height: 20px;
  color: var(--color-1);
}

.footer--cedarwood .footer__col-body.is-prose > p {
  margin: 0;
}

.footer--cedarwood .footer__contact-list {
  display: grid;
  gap: var(--space-sm);
}

.footer--cedarwood .footer__contact-link {
  color: var(--color-1);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer--cedarwood .footer__contact-link:hover, .footer--cedarwood .footer__contact-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Cedarwood footer — RESPONSIVE. Literal @media blocks on purpose: write_css
   flattens @media wrappers, which would promote these to global rules and
   collapse the desktop three-column row (same trap noted above). ── */
@media (max-width: 880px) {
  .footer--cedarwood .footer__cols {
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    gap: var(--space-xl);
  }
  /* Stack the 50/50 split below 880px: logo over copy. */
  .footer--cedarwood .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer--cedarwood .footer__logo {
    max-width: 300px;
  }
}
@media (max-width: 560px) {
  .footer--cedarwood .footer__cols { grid-template-columns: 1fr; }
  .footer--cedarwood .footer__top { gap: var(--space-md); }
}


/* Layerly — Chrome header: bespoke nav/cedarwood three-part transparent bar (menu left / logo centre / CTA right) per Figma 8003:757, plus hero pull-up so the bar overlays the hero — 2026-08-17T22:57:27.426Z */
.nav.nav--cedarwood {
  --nav-height: var(--chrome-nav-height);
  --nav-bg: transparent;
  --nav-fg: var(--color-2);
  /* Item-to-item spacing in the nav. --space-sm (8px) read too tight against
     the links' own 12px side padding; --space-md gives 40px between labels. */
  --nav-gap: var(--space-md);
  --nav-link-weight: var(--weight-reg);
  --nav-link-hover: var(--color-1);
  --mobile-menu-bg: var(--color-2);
  --mobile-menu-fg: var(--color-1);
  position: relative;
  z-index: 50;
  background: transparent;
}

.nav.nav--cedarwood .nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
  min-height: var(--nav-height);
  padding-block: 12px;
}

.nav.nav--cedarwood .nav__menu {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav.nav--cedarwood .nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav.nav--cedarwood .nav__list a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) 12px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: 20px;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--color-2);
}

.nav.nav--cedarwood .nav__list a:hover, .nav.nav--cedarwood .nav__list a:focus-visible {
  color: var(--color-1);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav.nav--cedarwood .nav__logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.nav.nav--cedarwood .nav__logo-img {
  width: 60px;
  height: 60px;
  max-height: none;
  object-fit: contain;
}

.nav.nav--cedarwood .nav__cta {
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 18px;
  white-space: nowrap;
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-1);
  box-shadow: 0 4px 16px rgba(232, 30, 37, .10);
}

.nav.nav--cedarwood .nav__cta--bar {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.nav.nav--cedarwood .nav__cta--drawer {
  display: none;
}

.nav.nav--cedarwood [data-mobile-menu-toggle] {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* ── Drawer-only chrome — OFF at desktop widths ───────────────────────────────
   .nav__backdrop and .nav__drawer-head are in the header markup at EVERY width
   (the markup is one template), so they must be display:none outside the mobile
   band or the backdrop would sit over the desktop page. These live BEFORE the
   @media block below on purpose: a media query adds no specificity, so a base
   rule written AFTER it would beat the drawer rules. Never append these with
   write_css — it puts new rules at the end of the file. ── */
.nav.nav--cedarwood .nav__backdrop {
  display: none;
}

.nav.nav--cedarwood .nav__drawer-head {
  display: none;
}

.site-main > .hero--full-bg:first-child {
  margin-top: calc(-1 * var(--chrome-nav-height));
  padding-top: calc(var(--hero-pad-y) + var(--chrome-nav-height));
}

/* ── Cedarwood header — RESPONSIVE. Written as a literal @media block via
   edit_file, NOT write_css: write_css silently strips the @media wrapper and
   promotes these to global rules, which un-centres the logo, hides the bar CTA
   and turns the nav links white at every width. Same trap as the footer above. ── */
@media (max-width: 767.98px) {
  /* Logo left, hamburger right; the menu becomes the slide-in drawer. */
  .nav.nav--cedarwood .nav__inner {
    grid-template-columns: 1fr auto;
  }
  .nav.nav--cedarwood .nav__logo {
    grid-column: 1;
    justify-self: start;
  }
  .nav.nav--cedarwood [data-mobile-menu-toggle] {
    grid-column: 2;
  }
  /* Exactly one CTA in the a11y tree: bar out, drawer copy in. */
  .nav.nav--cedarwood .nav__cta--bar {
    display: none;
  }
  .nav.nav--cedarwood .nav__cta--drawer {
    display: inline-flex;
  }
  /* On the solid red drawer the links are white, not brand red. */
  .nav.nav--cedarwood .nav__list a {
    color: var(--color-1);
  }

  /* ── THE DRAWER ITSELF ───────────────────────────────────────────────
     ROOT CAUSE of the drawer that was permanently 146px on screen at 375px:
     .nav.nav--cedarwood .nav__menu (above, desktop) sets `justify-self: start`
     to place the menu in column 1 of the three-part header grid. That is the
     SAME element as [data-mobile-menu]. On a position:fixed box, ANY
     self-alignment value other than normal/stretch switches the box from
     inset-driven STRETCH sizing to SHRINK-TO-FIT, and then aligns the shrunken
     box inside the inset rectangle. So `inset: 0` stopped sizing it: it took
     its max-content width (228.797px) and `start` pinned it at x=0. Being only
     229px wide, `transform: translateX(100%)` moved it 229px, not 375px — so it
     parked at x=229..458 and 146px of red drawer never left the screen.
     `align-self` was left at normal, which is why the HEIGHT was right (812px)
     while the width was not: the tell that this is an ALIGNMENT bug, not inset.
     These selectors carry the [data-mobile-menu] attribute so they outrank both
     the desktop .nav__menu rule above AND the base [data-mobile-menu] block. */
  /* PANEL GEOMETRY (modernised 2026-08-18): the drawer is NO LONGER the full
     viewport. It is min(85vw, 400px) wide, anchored RIGHT, and slides in from
     the right over a dimmed .nav__backdrop.
     The shrink-to-fit trap documented above cannot bite here: alignment only
     sizes/places a fixed box when its inline insets AND width are auto, and
     this box sets `right: 0` plus an explicit `width`. justify-self/align-self
     are still normalised to stretch so the desktop `justify-self: start` can
     never come back into play if the width is ever removed.
     `top` consumes --wp-adminbar-offset per the LOCKED fixed-chrome rule near
     the top of this file, so the panel does not slide under the WP admin bar
     for a logged-in visitor.
     CLOSED STATE IS STILL visibility:hidden, NOT transform alone — an
     off-canvas translateX leaves every link keyboard-focusable (WCAG 2.4.3:
     focus() landed on "Home" with the menu shut). Re-verified by SCRIPTING
     focus at 375px after this rewrite: activeElement stayed on <body>. Do not
     "simplify" this to transform-only. */
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] {
    position: fixed;
    justify-self: stretch;
    align-self: stretch;
    grid-column: 1 / -1;
    grid-row: 1;
    top: var(--wp-adminbar-offset, 0px);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(85vw, 400px);
    min-width: 0;
    max-width: 400px;
    height: auto;
    z-index: 1001;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--space-lg);
    /* Notch/home-indicator safe areas — the panel is flush to the right edge
       and to both the top and bottom of the screen. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: calc(var(--space-lg) + env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    padding-left: calc(var(--space-lg) + env(safe-area-inset-left, 0px));
    box-shadow: -12px 0 32px rgba(0, 0, 0, .28);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .nav.nav--cedarwood .nav__menu[data-mobile-menu].is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .3s ease, visibility 0s linear 0s;
  }

  /* ── THE BACKDROP ─────────────────────────────────────────────────────────
     Full-viewport dim UNDER the panel: backdrop 1000 < panel 1001 < hamburger→X
     1002, so the X stays tappable over the panel and the panel stays above the
     dim. State comes from body.mobile-menu-open, which the LOCKED main.js sets
     — this adds no second source of truth. pointer-events only when open, so a
     closed backdrop can never swallow taps on the page. Click-to-close is
     assets/js/nav-drawer-backdrop.js (re-dispatches the toggle's own click). */
  .nav.nav--cedarwood .nav__backdrop {
    display: block;
    position: fixed;
    top: var(--wp-adminbar-offset, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  body.mobile-menu-open .nav.nav--cedarwood .nav__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease, visibility 0s linear 0s;
  }

  /* Header row INSIDE the panel: logo left, level with the X (which is the
     bar's own toggle, painted over the panel). min-height matches the bar so
     the two line up; the right padding keeps the logo clear of the X. */
  .nav.nav--cedarwood .nav__drawer-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: var(--nav-height);
    padding-right: 56px;
  }
  .nav.nav--cedarwood .nav__drawer-logo {
    width: 52px;
    height: 52px;
    max-height: none;
    object-fit: contain;
  }

  /* Links: stacked at the TOP of the panel (not floating mid-screen),
     LEFT-aligned, 48px minimum tap target, hairline separators. */
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    flex: 0 0 auto;
  }
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__list a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 48px;
    padding: var(--space-sm) 0;
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: var(--weight-med);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    color: var(--color-1);
  }
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__list li + li a {
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__list a:hover,
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__list a:focus-visible {
    color: var(--color-1);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Phone CTA: SOLID button pinned to the BOTTOM of the panel (margin-top:auto).
     Inverted from the bar CTA — the bar's red fill would be invisible on the red
     drawer; white-on-red is 4.5:1. */
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__cta--drawer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    min-height: 52px;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-md);
    background: var(--color-1);
    border-color: var(--color-1);
    color: var(--color-2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  }
}

/* ---------------------------------------------------------------------------
   768px DRAWER GUARD — do not remove.

   The PARENT theme (layerly-base/style.css, enqueued alongside this child)
   carries a generic drawer block at the OLD boundary:

       @media (max-width: 768px) { [data-mobile-menu] { position: fixed;
         inset: 0; z-index: 1001; background: var(--color-2); ... } }

   Every drawer band in THIS file was converted to 767.98px on 2026-08-18, but
   the parent's 768px band was never touched and is not reachable from here —
   grep_theme/get_css_rule only read the ACTIVE theme, which is why this hid.

   At exactly 768px the parent rule matches and this file's 767.98px band does
   not, so the drawer painted itself over the page as a full-height red column
   while the desktop bar ALSO rendered. 768px is a DESKTOP width on this site.

   This block re-asserts the desktop bar from 768px up, outranking the parent
   by specificity (.nav.nav--cedarwood .nav__menu[data-mobile-menu] = 0,3,1
   vs the parent's [data-mobile-menu] = 0,1,0). Written with edit_file, never
   write_css, which strips @media wrappers in this stylesheet.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .nav.nav--cedarwood .nav__menu[data-mobile-menu] {
    position: static;
    inset: auto;
    z-index: auto;
    grid-area: 1 / 1;
    place-self: center start;
    justify-self: start;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--nav-gap);
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
  }

  /* The drawer-only furniture stays hidden on the desktop bar. The burger and
     backdrop are hidden by the PARENT's own max-width:768px band, which does
     not fire at exactly 768px — so hide them here too or the bar and the
     hamburger render together. */
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__drawer-head,
  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__cta--drawer,
  .nav.nav--cedarwood [data-mobile-menu-toggle],
  .nav.nav--cedarwood .nav__backdrop {
    display: none;
  }

  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--nav-gap);
    width: auto;
  }

  .nav.nav--cedarwood .nav__menu[data-mobile-menu] .nav__list a {
    display: inline-flex;
    min-height: 0;
    padding: 0;
    border-top: 0;
    font-size: var(--text-md);
}


/* Layerly — Equipment page: hero, fleet grid variant, job-match grid, delivery CTA (desktop/base rules only) — 2026-08-18T15:11:19.765Z */
.hero--fleet-cream {
  --hero-pad-y: var(--space-3xl);
  display: flex;
  align-items: flex-end;
  min-height: 600px;
  padding-block: var(--hero-pad-y) var(--space-xxl);
  background: var(--section-bg-color, var(--color-5));
  color: var(--color-3);
  text-align: left;
}

.hero--fleet-cream .hero__inner {
  text-align: left;
  margin-inline: auto;
  max-width: var(--container-max);
  width: 100%;
}

.hero--fleet-cream .hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semi);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-3);
  max-width: 1200px;
  margin: 0 0 var(--space-lg);
}

.hero--fleet-cream .hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-2-deep);
  max-width: 520px;
  margin: 0 0 var(--space-lg);
}

.hero--fleet-cream .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: flex-start;
}

.hero--fleet-cream .btn--ghost {
  background: transparent;
  border-color: var(--color-2);
  color: var(--color-3);
}

.hero--fleet-cream .btn--ghost:hover {
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-1);
}

.site-main > .hero--fleet-cream:first-child {
  margin-top: calc(-1 * var(--chrome-nav-height));
  padding-top: var(--hero-pad-y);
}

.equipment-categories--fleet .equipment-categories__intro {
  display: block;
  border-top: 0;
  padding-top: var(--space-lg);
}

.equipment-categories--fleet .equipment-categories__lead {
  font-family: var(--font-body);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: 34px;
  color: var(--color-3);
  max-width: 920px;
  margin: 0;
}

.equipment-categories--fleet .equipment-categories__note {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-2-deep);
  max-width: 680px;
  margin: var(--space-lg) 0 0;
}

.equipment-categories--fleet .equipment-categories__list {
  margin-top: var(--space-xl);
}

.equipment-categories--fleet .equipment-categories__body {
  justify-content: flex-start;
}

.equipment-categories--fleet .equipment-categories__card-cta {
  width: 100%;
  margin-top: auto;
}

.job-match {
  padding-block: var(--space-xxl);
  background: var(--section-bg-color, var(--color-1));
}

.job-match__head {
  margin-bottom: var(--space-xl);
}

.job-match__list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: grid;
  grid-template-columns: repeat(var(--job-match-cols, 3), 1fr);
  border-top: 1px solid var(--color-7);
  border-left: 1px solid var(--color-7);
}

.job-match__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 340px;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  border-right: 1px solid var(--color-7);
  border-bottom: 1px solid var(--color-7);
}

.job-match__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100px;
  height: 100px;
}

.job-match__icon-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.job-match__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.job-match__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: 24px;
  color: var(--color-3);
  max-width: 300px;
  margin: 0;
}

.job-match__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: 20px;
  color: var(--color-6);
  max-width: 300px;
  margin: 0;
}

.job-match__note {
  margin-top: var(--space-xl);
  padding-block: var(--space-md);
}

.job-match__note p {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 28px;
  color: var(--color-2-deep);
  max-width: 944px;
  margin: 0 0 var(--space-md);
}

.job-match__note p:last-child {
  margin-bottom: 0;
}

.job-match__cta {
  margin-top: var(--space-lg);
}

.cta-delivery {
  background: var(--section-bg-color, var(--color-2));
  color: var(--color-1);
  padding-block: var(--space-3xl) var(--space-xxl);
}

.cta-delivery__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-1);
  max-width: 760px;
  margin: 0 0 var(--space-md);
}

.cta-delivery__sub {
  border-top: 1px solid var(--color-5);
  padding-top: var(--space-md);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-1);
}

.cta-delivery__message {
  display: grid;
  grid-template-columns: 541fr 579fr;
  gap: var(--space-xxl);
  align-items: start;
  margin-top: var(--space-xxl);
}

.cta-delivery__lead {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 31px;
  color: var(--color-1);
  margin: 0;
}

.cta-delivery__body {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 28px;
  color: var(--color-1);
  margin: 0;
}

.cta-delivery__cta {
  margin-top: var(--space-xl);
}

/* RESPONSIVE (equipment page) — literal @media blocks on purpose: write_css strips
   @media wrappers, which would promote every override below to a global rule. */
@media (max-width: 1024px) {
  .job-match__list { grid-template-columns: repeat(2, 1fr); }
  .cta-delivery__message { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 767.98px) {
  .hero--fleet-cream { min-height: 480px; }
  .hero--fleet-cream .hero__title { font-size: var(--text-h2); }
  .job-match__item { min-height: 0; padding: var(--space-lg); }
  .job-match__icon, .job-match__icon-img { width: 72px; height: 72px; }
}
@media (max-width: 560px) {
  .job-match__list { grid-template-columns: 1fr; }
}


/* Layerly — Contact page — all four section styles (hero split, underline-field request form, delivery area, red closing band) to exact Figma geometry — 2026-08-18T15:41:42.619Z */
.hero--contact-split {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-lg);
  display: block;
  min-height: 720px;
  padding: 0;
  background: var(--section-bg-color, var(--color-5));
  color: var(--color-3);
  text-align: left;
}

.site-main > .hero--contact-split:first-child {
  margin-top: calc(-1 * var(--chrome-nav-height));
}

.hero--contact-split .hero__panel {
  display: flex;
  align-items: center;
  padding: var(--space-3xl) var(--space-xl) var(--space-xxl) var(--space-3xl);
}

.hero--contact-split .hero__copy {
  width: 100%;
  max-width: 548px;
}

.hero--contact-split .hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semi);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-3);
  margin: 0 0 var(--space-lg);
}

.hero--contact-split .hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-2-deep);
  max-width: 420px;
  margin: 0 0 var(--space-lg);
}

.hero--contact-split .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: flex-start;
}

.hero--contact-split .hero__media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  margin-top: 0;
}

.hero--contact-split .hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.request-form {
  background: var(--section-bg-color, var(--color-1));
  padding-block: var(--space-3xl) var(--space-xxl);
  color: var(--color-3);
}

.request-form__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.request-form__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.request-form__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-3);
  margin: 0;
}

.request-form__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-2);
}

.request-form__sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-2);
  margin: 0;
}

.request-form__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xxl);
  padding-top: var(--space-lg);
  align-items: stretch;
}

.request-form__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.request-form__lead {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: 24px;
  color: var(--color-3);
  margin: 0;
}

.request-form__media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.request-form__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.request-form .form {
  --form-cols: 2;
  --form-gap: var(--space-md);
  --field-bg: transparent;
  --field-fg: var(--color-3);
  --field-border: var(--color-9);
  --field-radius: 0;
  --field-pad: 12px;
  --field-focus: var(--color-2);
}

.request-form .field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.request-form .field__input {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 22px;
  color: var(--color-3);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-9);
  border-radius: 0;
  padding: 12px;
  min-height: 46px;
}

.request-form .field__input::placeholder {
  color: var(--color-10);
  opacity: 1;
}

.request-form .field__select {
  color: var(--color-10);
  appearance: none;
  background-image: none;
}

.request-form .field__textarea {
  min-height: 46px;
  line-height: 22px;
}

.request-form .form__submit {
  margin-top: var(--space-xl);
  align-self: flex-start;
}

.delivery-area {
  background: var(--section-bg-color, var(--color-1));
  padding-block: var(--space-xxl);
  color: var(--color-3);
}

.delivery-area__inner {
  display: grid;
  grid-template-columns: 571fr 549fr;
  gap: var(--space-xxl);
  align-items: start;
}

.delivery-area__media {
  position: relative;
  overflow: hidden;
  height: 480px;
}

.delivery-area__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.delivery-area__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.delivery-area__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-3);
  margin: 0;
}

.delivery-area__sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-med);
  line-height: 23px;
  color: var(--color-2);
  margin: 0;
}

.delivery-area__body {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 28px;
  color: var(--color-3);
  margin: 0;
}

.delivery-area__body p {
  margin: 0 0 var(--space-md);
}

.delivery-area__body p:last-child {
  margin-bottom: 0;
}

.delivery-area__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.delivery-area__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) 12px;
  border: 1px solid var(--color-2);
  border-radius: var(--radius-full);
  background: var(--color-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.5px;
  line-height: 15px;
  color: var(--color-2-deep);
}

.delivery-area__cta {
  display: flex;
}

.contact-band {
  background: var(--section-bg-color, var(--color-2));
  padding-block: var(--space-3xl) var(--space-xl);
  color: var(--color-1);
}

.contact-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-band__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-1);
  max-width: 752px;
  margin: 0;
}

.contact-band__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-5);
}

.contact-band__row {
  display: flex;
  gap: var(--space-xxl);
  align-items: flex-start;
  justify-content: space-between;
}

.contact-band__body {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 31px;
  color: var(--color-1);
  margin: 0;
  max-width: 993px;
}

.contact-band__body p {
  margin: 0;
}

.contact-band__cta {
  flex: 0 0 auto;
}

/* Contact page — responsive. MUST stay inside @media: write_css strips at-rules,
   which would flatten these to global and collapse the desktop grids. */
@media (max-width: 900px) {
  .hero--contact-split,
  .hero--contact-split .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero--contact-split .hero__panel {
    padding: calc(var(--space-3xl) + var(--chrome-nav-height)) var(--space-md) var(--space-xxl);
  }
  .hero--contact-split .hero__media {
    height: 360px;
  }
  .request-form__split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .request-form__media {
    height: 360px;
  }
  .delivery-area__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .delivery-area__media {
    height: 320px;
  }
  .contact-band__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }
}


/* Layerly — Hero split moves to .hero__inner grid (real 2-column container); hide the locked form honeypot input so it is not a visible tabindex=-1 control — 2026-08-18T15:42:51.816Z */
.hero--contact-split .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-lg);
  min-height: 720px;
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

.request-form .form__hp {
  display: none;
}


/* Layerly — Equipment page: the design's "intro" band (Figma node 8025:1223), sitting
   between the fleet hero and the fleet grid. Brand-red band, typographic only.
   RESPONSIVE WITHOUT A MEDIA QUERY on purpose: both grids collapse intrinsically via
   repeat(auto-fit, minmax(min(100%, …), 1fr)) / minmax(0, …), so this block adds no new
   @media wrapper to a stylesheet where write_css is known to strip them. */
.intro-band--fleet-brief {
  background: var(--section-bg-color, var(--color-5));
  color: var(--color-3);
  padding-block: var(--space-3xl) var(--space-xxl);
}

.intro-band__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-xxl);
  align-items: start;
}

.intro-band__col--head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.intro-band__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-3);
  margin: 0;
}

.intro-band__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-rule);
}

.intro-band__lead {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: 31px;
  color: var(--color-2-deep);
  margin: 0;
}

.intro-band__body {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 28px;
  color: var(--color-3);
  margin: 0;
}

.intro-band__body p {
  margin: 0 0 var(--space-md);
}

.intro-band__body p:last-child {
  margin-bottom: 0;
}

.intro-band__facts {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-rule-soft);
}

.intro-band__fact {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-rule-soft);
}

.intro-band__fact-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-6);
}

.intro-band__fact-value {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  line-height: 22px;
  color: var(--color-3);
}


/* Layerly — Equipment category single page: hero image-left variant, breadcrumbs, inventory/availability block, sizing-grid + delivery + related modifiers — 2026-08-18T19:05:15.617Z */
.hero--category-split {
  display: block;
  padding: 0;
  min-height: 560px;
  background: var(--section-bg-color, var(--color-5));
  color: var(--color-3);
  text-align: left;
}

.hero--category-split .hero__inner {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a bare 1fr floors at min-content, and the copy
     panel's min-content (548px measure + 160px padding) was taking 708px,
     leaving the image column only 548px instead of an even split. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-lg);
  min-height: 560px;
  max-width: none;
  margin-inline: 0;
  /* Full bleed: .wrap's 24px inline padding held the image off the left edge.
     The copy side keeps its own generous padding on .hero__panel. */
  padding-inline: 0;
  text-align: left;
}

.hero--category-split .hero__media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  margin-top: 0;   /* base .hero__media sets --space-xl; inside this grid it must be 0 */
  background: var(--color-1);
}

.hero--category-split .hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--space-xl);
  object-fit: contain;
  display: block;
  border-radius: 0;
}

.hero--category-split .hero__panel {
  display: flex;
  align-items: center;
  padding: var(--space-xxl) var(--space-3xl) var(--space-xxl) var(--space-xl);
}

.hero--category-split .hero__copy {
  width: 100%;
  max-width: 548px;
}

.hero--category-split .hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semi);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-3);
  margin: 0 0 var(--space-lg);
}

.hero--category-split .hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 28px;
  color: var(--color-3);
  max-width: 520px;
  margin: 0 0 var(--space-lg);
}

.hero--category-split .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: flex-start;
}

.hero--category-split .btn--ghost {
  background: transparent;
  border-color: var(--color-2);
  color: var(--color-3);
}

.hero--category-split .btn--ghost:hover {
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-1);
}

.breadcrumbs {
  margin: 0 0 var(--space-lg);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 20px;
  color: var(--color-6);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-right: var(--space-sm);
  color: var(--color-rule-soft);
}

.breadcrumbs__link {
  color: var(--color-2-deep);
  text-decoration: none;
}

.breadcrumbs__link:hover, .breadcrumbs__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.job-match--sizing .job-match__item {
  min-height: 240px;
  justify-content: flex-start;
  gap: var(--space-md);
}

.job-match--sizing .job-match__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 20px;
  color: var(--color-2-deep);
  margin: 0;
}

.delivery-area--category {
  background: var(--section-bg-color, var(--color-1));
}

.delivery-area--category .delivery-area__inner {
  grid-template-columns: minmax(0, 1fr);
}

.delivery-area--category .delivery-area__content {
  max-width: 880px;
}

.equipment-categories--related {
  background: var(--section-bg-color, var(--color-5));
}

.equipment-categories--related .equipment-categories__list {
  margin-top: var(--space-xl);
}

.equipment-categories--related .equipment-categories__media {
  height: 240px;
}

/* Equipment category page — RESPONSIVE. Literal @media block written via
   edit_file, NOT write_css: write_css strips the at-rule wrapper (same trap
   documented for the home/equipment/contact blocks above), which promoted every
   override below to a global rule and collapsed the desktop 2-column hero. */
@media (max-width: 900px) {
  .hero--category-split,
  .hero--category-split .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero--category-split .hero__media {
    height: 320px;
    order: -1;
  }

  .hero--category-split .hero__panel {
    padding: var(--space-xxl) var(--space-md);
  }

}


/* Layerly — a11y: category delivery band standfirst to deepened brand red (4.93:1 on cream, was 4.09:1) — 2026-08-18T19:08:18.643Z */
.delivery-area--category .delivery-area__sub {
  color: var(--color-2-deep);
}


/* Layerly — Equipment item single: TWO-COLUMN hero (copy + phone CTA left,
   Booqable booking card right), specs rows — reworked 2026-08-18
   ─────────────────────────────────────────────────────────────────────────────
   The hero is a CONTAINED two-column band, not the old full-bleed image split:
   the Booqable embed inside the card draws the product photo, so the theme
   renders no image column at all (one photo of the machine, not two).

   RESPONSIVE WITH NO NEW @MEDIA BAND on purpose — repeat(auto-fit, minmax(min(100%,
   420px), 1fr)) collapses to a single column intrinsically (below roughly a
   968px viewport), so nothing is introduced anywhere near this site's
   767.98px mobile boundary, and DOM order (copy, then card) makes the stacked
   order name/description first, booking card second. */
.hero--item-split {
  display: block;
  padding-block: var(--space-xxl);
  min-height: 0;
  background: var(--section-bg-color, var(--color-5));
  color: var(--color-3);
  text-align: left;
}

.hero--item-split .hero__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  column-gap: var(--space-xxl);
  row-gap: var(--space-xl);
  align-items: start;
  max-width: var(--container-max);
  margin-inline: auto;
  min-height: 0;
  text-align: left;
}

.hero--item-split .hero__panel {
  display: block;
  padding: 0;
}

.hero--item-split .hero__copy {
  width: 100%;
  max-width: 620px;
}

.hero--item-split .hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-semi);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-3);
  margin: 0 0 var(--space-lg);
}

.hero--item-split .hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 28px;
  color: var(--color-3);
  max-width: 520px;
  margin: 0 0 var(--space-lg);
}

.hero--item-split .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: flex-start;
}

.hero--item-split .btn--ghost {
  background: transparent;
  border-color: var(--color-2);
  color: var(--color-3);
}

.hero--item-split .btn--ghost:hover {
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-1);
}

/* ── The booking card — the hero's RIGHT column (was the standalone .booking
   section, which is gone: the booking block appears once per page, in the hero).
   Card treatment is this site's existing card anatomy — white fill, 1px hairline
   border, square corners, --space-xl padding — the same as the /equipment/ media
   panels and the category page's panel, so the third-party embed reads as part
   of the page rather than a bolted-on widget. ── */
.hero__booking {
  align-self: start;
}

.booking-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-1);
  border: 1px solid var(--color-7);
  color: var(--color-3);
}

/* Only rendered in the NO-embed branch (see booking-card.php) — the machine's
   own photo, contained on the light panel exactly like the category cards. */
.booking-card__media {
  background: var(--color-4);
  border: 1px solid var(--color-7);
}

.booking-card__image {
  width: 100%;
  height: 260px;
  padding: var(--space-md);
  object-fit: contain;
  display: block;
  border-radius: 0;
}

.booking-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.booking-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  line-height: 24px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-3);
  margin: 0;
}

.booking-card__sub {
  border-top: 1px solid var(--color-7);
  padding-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-med);
  line-height: 20px;
  color: var(--color-2-deep);
  margin: 0;
}

/* :not(:empty) — the mount point must leave NO trace (not even its margin)
   until the SDK has actually filled it. An unfilled embed is invisible, never a
   mystery gap inside the card. */
.booking-card .booqable-product-detail:not(:empty) {
  margin-block: var(--space-sm);
}

.booking-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-top: 1px solid var(--color-7);
  padding-top: var(--space-lg);
}

.booking-card__note p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: 20px;
  color: var(--color-6);
  margin: 0 0 var(--space-sm);
}

.booking-card__note p:last-child {
  margin-bottom: 0;
}

.booking-card__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.booking-card__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 18px;
  color: var(--color-2-deep);
  text-underline-offset: 4px;
}

.specs {
  padding-block: var(--space-xxl);
  background: var(--section-bg-color, var(--color-5));
  color: var(--color-3);
}

.specs__head {
  margin-bottom: var(--space-xl);
}

.specs__list {
  margin: 0;
  padding: 0;
  max-width: 880px;
  border-top: 1px solid var(--color-rule-soft);
}

.specs__row {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-rule-soft);
}

.specs__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-6);
  margin: 0;
}

.specs__value {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-med);
  line-height: 22px;
  color: var(--color-3);
  margin: 0;
}

/* Equipment item — small screens. NOTE: written with edit_file, never
   write_css: write_css strips @media wrappers in this stylesheet and promotes
   these rules to global.
   The two-column hero needs NO band here any more — it collapses intrinsically
   via repeat(auto-fit, minmax(min(100%, 420px), 1fr)), which is also why no new
   max-width:768px band exists on this page (767.98px is this site's mobile
   boundary; 900px below matches the sibling .hero--category-split band). The
   hero--item-nomedia modifier is gone too: the right column always carries the
   booking card, so there is no half-empty-hero case left to collapse. */
@media (max-width: 900px) {
  .booking-card {
    padding: var(--space-lg);
  }

  .specs__row {
    grid-template-columns: 1fr;
  }
}


/* Layerly — Equipment category: machine-grid cards + honest empty state, no-image text hero, and the background rhythm for the new section order — 2026-08-18T21:06:41.114Z */
.equipment-categories--machines {
  background: var(--section-bg-color, var(--color-1));
}

.equipment-categories--machines .equipment-categories__list {
  margin-top: var(--space-xl);
}

.equipment-categories--machines .equipment-categories__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-4);
  border: 1px solid var(--color-7);
  overflow: hidden;
}

.equipment-categories--machines .equipment-categories__media {
  display: block;
}

.equipment-categories--machines .equipment-categories__body {
  justify-content: flex-start;
}

.equipment-categories__title-link {
  color: inherit;
  text-decoration: none;
}

.equipment-categories__title-link:hover, .equipment-categories__title-link:focus-visible {
  color: var(--color-2-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.equipment-categories--machines .booqable-product-button {
  margin-top: auto;
}

.equipment-categories--machines .booqable-product-button:not(:empty) {
  padding-top: var(--space-md);
}

.equipment-categories__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 880px;
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-4);
  border: 1px solid var(--color-7);
}

.equipment-categories__empty-body p {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 28px;
  color: var(--color-3);
  margin: 0 0 var(--space-md);
}

.equipment-categories__empty-body p:last-child {
  margin-bottom: 0;
}

.equipment-categories__empty-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.equipment-categories__empty-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 18px;
  color: var(--color-2-deep);
  text-underline-offset: 4px;
}

.hero--category-split.hero--category-nomedia {
  min-height: 0;
}

.hero--category-split.hero--category-nomedia .hero__inner {
  display: block;
  min-height: 0;
}

.hero--category-split.hero--category-nomedia .hero__panel {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-xxl) var(--space-xl);
}

.hero--category-split.hero--category-nomedia .hero__copy {
  max-width: 760px;
}

.job-match--sizing {
  background: var(--section-bg-color, var(--color-5));
}


/* Layerly — Visible keyboard focus for the Booqable embed's controls inside the booking card — 2026-08-18T21:38:20.955Z */
.booking-card :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-2);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(232, 30, 37, .25);
}

/* ── Contact hero — align the left column with the rest of the site ──────────
   The hero__inner carried .wrap but its max-width computed to `none` (a later
   same-specificity rule wins over .wrap), so the two-column grid spanned the
   full viewport instead of the 1248px container. On top of that the panel took
   --space-3xl (clamped to 120px) as its LEFT padding, so the headline sat at
   viewport+144 while every other section on the page starts at the container
   edge. Invisible at 1440 — (1440-1248)/2 + 24 = 120 makes them nearly coincide
   — and obviously wrong on a larger monitor, where body copy moves to 360 and
   the hero stays at 144. Measured on /contact/ at 1920 on 2026-08-18.
   Two-class selectors so they beat whatever set max-width:none. ── */
.hero--contact-split .hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero--contact-split .hero__panel {
  padding-left: 0;
}


/* Layerly — Bottom-align the full-bg hero copy (was centred) — matches the fleet-cream hero's flex-end pattern — 2026-09-14T19:09:52.507Z */
.hero--full-bg {
  align-items: flex-end;
}


/* Layerly — Grid variant: move card text inside the bordered/filled box and pin it to the bottom; shrink media to 240px so the contained image never overlaps the copy — 2026-09-14T19:14:54.495Z */
/* Card box treatment now lives on the base .equipment-categories__link,
   shared by all four grids (grid / fleet / machines / related). */

/* --grid media/body follow the base card rules. */




/* Layerly — Intro-split moved from red to cream ground: recolour cream/white copy to ink (was 1.1:1) and flip the inverted CTA back to the filled red primary — 2026-09-14T19:46:11.776Z */
.intro-split--image-right .intro-split__cta .btn {
  background: var(--color-2);
  border-color: var(--color-2);
  color: var(--color-1);
}

.intro-split--image-right .intro-split__cta .btn:hover {
  background: var(--color-2-deep);
  border-color: var(--color-2-deep);
  color: var(--color-1);
}


/* Layerly — Primary button label to pure white on brand red: the inherited --color-4 (#F8FAFC) measures 4.32:1 and fails the 4.5:1 floor; #FFFFFF is 4.52:1 (per this site's recorded red-contrast rule) — 2026-09-14T19:46:55.491Z */
.btn--primary {
  color: var(--color-1);
}


/* Layerly — Category hero pulls up under the transparent header so the cream ground runs to the top; both columns re-add the nav height as padding so nothing sits beneath the nav — 2026-09-14T20:02:19.667Z */
.site-main > .hero--category-split:first-child {
  margin-top: calc(-1 * var(--chrome-nav-height));
}

.site-main > .hero--category-split:first-child .hero__media {
  padding-top: var(--chrome-nav-height);
}

.site-main > .hero--category-split:first-child .hero__panel {
  padding-top: calc(var(--space-xxl) + var(--chrome-nav-height));
}


/* Layerly — Machine hero pulls up under the transparent header so its cream ground runs to the top; padding-top re-adds the nav height so breadcrumb and booking card still clear the nav — 2026-09-14T20:48:56.754Z */
.site-main > .hero--item-split:first-child {
  margin-top: calc(-1 * var(--chrome-nav-height));
  padding-top: calc(var(--space-xxl) + var(--chrome-nav-height));
}