/* Restore the user's v3 band boundaries. Only header/footer content expands. */
.homepage {
  --panel-bleed: 48px;
  --panel-left: max(0px, calc(max(var(--gutter), (100% - 1728px) / 2) - var(--panel-bleed)));
  --panel-right: max(0px, calc((100% - 1920px) / 2));
  --panel-content-gap: min(var(--gutter), var(--panel-bleed));
}
.homepage main > section,
.homepage > .footer {
  clip-path: inset(0 var(--panel-right) 0 var(--panel-left));
}
/* Keep the header menu free to open below the header: clip only its background. */
.homepage .header {
  isolation: isolate;
  background: transparent;
  border-bottom-color: transparent;
}
.homepage .header::before {
  content: "";
  position: absolute;
  inset: 0 var(--panel-right) -1px var(--panel-left);
  z-index: -1;
  background: linear-gradient(rgba(5,9,12,.72), rgba(5,9,12,.145));
  border-bottom: 1px solid #ffffff12;
  pointer-events: none;
}
@media (min-width: 901px) {
  .homepage .header > .shell,
  .homepage > .footer > .shell {
    width: calc(100% - var(--panel-left) - var(--panel-right));
    max-width: none;
    margin-left: var(--panel-left);
    margin-right: var(--panel-right);
  }
}
@media (max-width: 760px) {
  .homepage { --panel-bleed: 24px; }
}
/* The service photo extends to the painted band's right edge from the shared
   content grid: original 57%-3% overscan = 54% (mobile: 60%-5% = 55%). */
.homepage .commercial-panel + .commercial-panel { overflow: visible; }
.homepage .commercial-panel + .commercial-panel .panel-image {
  right: calc(-1 * var(--panel-content-gap));
  width: calc(54% + var(--panel-content-gap));
}
@media (max-width: 760px) {
  .homepage .commercial-panel + .commercial-panel .panel-image {
    width: calc(55% + var(--panel-content-gap));
  }
}
/* Shared commercial/grey grid aligns the central dividers; painted boundaries
   and the existing left content edge stay fixed, with equal inner gutters. */
.homepage :is(.commercial, .services, .solutions, .tools-preview) > .shell {
  width: calc(100% - var(--panel-left) - var(--panel-right) - 2 * var(--panel-content-gap));
  max-width: none;
  margin-left: calc(var(--panel-left) + var(--panel-content-gap));
  margin-right: calc(var(--panel-right) + var(--panel-content-gap));
}
/* All eight existing tools: compact icon/name cards on the homepage only. */
.homepage .tools-preview .tool-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.homepage .tools-preview .tool-card {
  min-height: 0;
  padding: 12px 10px;
  gap: 6px;
}
.homepage .tools-preview .tool-card .icon { width: 32px; height: 32px; }
.homepage .tools-preview .tool-card h3 {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.homepage .tools-preview .tool-card p { display: none; }
@media (max-width: 1199px) {
  .homepage .tools-preview .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .homepage .tools-preview .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* v11: tighter hero and services, preserving the approved horizontal frame. */
@media (min-width: 901px) {
  .homepage .hero { height: auto; }
  .homepage .hero-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 3.6vw, 58px);
    padding-top: clamp(110px, 8.2vw, 142px);
    padding-bottom: 24px;
  }
  .homepage .hero-points { position: static; }
  .homepage .hero-art {
    right: var(--panel-right);
    width: auto;
    aspect-ratio: 558 / 404;
    height: calc(100% - 44px);
    overflow: visible;
  }
  .homepage .hero-art img { object-fit: contain; object-position: right bottom; }
  /* Move the wheel and its companion text together towards the right edge. */
  .homepage .drive-inner { margin-left: auto; margin-right: var(--panel-right); }
  .homepage .band-brand { margin-right: var(--panel-content-gap); }
  .homepage .wheel-art { left: calc(var(--panel-right) + var(--gutter)); }
  .homepage .wheel-fade {
    left: calc(var(--panel-right) + var(--gutter));
    right: var(--panel-right);
  }
}
.homepage .hero-art::after { content: none; }
.homepage :is(.services, .tools-preview) { padding-block: 16px; }
.homepage :is(.services, .tools-preview) .section-heading { margin-bottom: 12px; gap: 10px; }
.homepage .service-card { min-height: 0; padding: 12px; }
.homepage .service-card > .icon { width: 29px; height: 29px; margin-bottom: 10px; }
.homepage .service-name { min-height: 0; margin-bottom: 5px; }
.homepage .service-description { line-height: 1.4; }
@media (min-width: 601px) {
  .homepage .service-card {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    gap: 8px 9px;
  }
  .homepage .service-card > .icon { margin: 0; }
  .homepage .service-name { margin: 0; align-self: center; }
  .homepage .service-description { grid-column: 1 / -1; }
}
.homepage .why-quote { position: relative; top: -10px; }
/* v20: requested deep brand red, matching primary buttons. This small text does not meet AA contrast. */
.homepage .eyebrow { color: #de1823; }
.homepage .eyebrow .icon { width: 24px; height: 24px; flex: 0 0 24px; }
/* Equal action-row rhythm for the paired service/parts panels. */
.homepage #parts .solution { display: flex; flex-direction: column; }
.homepage #parts .solution > p { flex-grow: 1; }
.homepage #parts :is(.packages, .text-link) { margin-top: 15px; min-height: 32px; }
.homepage #parts .packages { align-items: center; }
.homepage #parts .packages span { min-height: 32px; display: inline-flex; align-items: center; }
.homepage #parts .text-link { align-self: flex-start; }
/* v17: align paired business actions without changing the shared frame. */
.homepage .business .solution { display: flex; flex-direction: column; }
.homepage .business .solution > p { flex-grow: 1; }
.homepage .business .text-link { align-self: flex-start; }
/* v16: compact contact rhythm; natural photo ratio retained. */
@media (min-width: 901px) {
  .homepage .cta { height: auto; min-height: clamp(260px, 20vw, 310px); }
  .homepage .cta-inner { height: auto; min-height: inherit; padding-block: 18px; }
  .homepage .cta h2 { margin-bottom: 10px; }
  .homepage .cta p { margin-bottom: 16px; }
  .homepage .cta-caption { margin-top: 10px; }
  .homepage .cta .contact-actions .button { min-height: 50px; }
}
@media (max-width: 900px) {
  .homepage .cta { padding-top: 20px; }
  .homepage .cta-art { margin-top: 12px; }
  .homepage .cta p { margin-bottom: 18px; }
  .homepage .cta-caption { margin-top: 12px; }
  .homepage .hero-copy { padding-top: 96px; padding-bottom: 4px; }
  .homepage .hero-art { height: clamp(260px, 45vw, 390px); }
  .homepage .hero-points { padding-block: 12px 20px; }
}
@media (max-width: 600px) {
  .homepage .hero-copy { padding-top: 88px; }
  .homepage .hero-art { height: clamp(220px, 60vw, 300px); }
  .homepage .service-card { padding: 12px 14px; }
  .homepage .service-card > .icon { margin: 1px 0 0; }
  .homepage .why-quote { top: -6px; }
}