/**
 * Consolidated component styles for the Garage POC page.
 * Each block below is a direct, value-for-value port of one React
 * .module.css file — only the class names changed (CSS Modules' generated
 * scoping replaced with plain "es-" prefixed names, since plain PHP/CSS has
 * no module-scoping step). Source file noted above each block.
 */

/* ============ Header.module.css ============ */
.es-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.es-header.es-scrolled {
  box-shadow: 0 4px 24px -12px rgba(15, 36, 71, 0.14);
  border-bottom-color: var(--line-strong);
}
.es-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}
.es-logo { display: flex; align-items: center; flex-shrink: 0; }
.es-logo-img { height: 40px; width: auto; }
.es-nav { display: flex; align-items: center; gap: 38px; font-size: 14.5px; font-weight: 600; color: var(--navy-900); letter-spacing: 0.01em; }
.es-nav > a:hover { color: var(--accent); }
.es-dropdown-wrap { position: relative; }
.es-dropdown-trigger {
  background: none; border: none; color: inherit; font: inherit; font-weight: 600;
  display: flex; align-items: center; gap: 5px; padding: 0;
}
.es-dropdown-trigger:hover { color: var(--accent); }
/* Hover bridge: flush against the trigger (top:100%, no gap), padding
   creates the visual gap so the pointer never leaves the hoverable box. */
.es-mega-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 18px; width: max-content;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s ease;
}
.es-dropdown-wrap:hover .es-mega-menu,
.es-dropdown-wrap:focus-within .es-mega-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.es-mega-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift); padding: 24px 28px 18px;
}
.es-mega-cols { display: flex; gap: 44px; }
.es-mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 175px; }
.es-mega-col-title {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 8px;
}
/* Second heading inside the combined Detailing + Maintenance column —
   enough top margin to read as a new group, not a continuation. */
.es-mega-col-title-sub { margin-top: 14px; }
.es-mega-col a {
  font-size: 14px; font-weight: 500; color: var(--body);
  padding: 7px 9px; margin: 0 -9px; border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease; display: block;
}
.es-mega-col a:hover { color: var(--accent); background: var(--accent-soft); }
.es-mega-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.es-mega-all { font-size: 12.5px; font-weight: 700; color: var(--navy-800); }
.es-mega-all:hover { color: var(--accent); }
.es-actions { display: flex; align-items: center; gap: 16px; }
.es-phone { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 13.5px; color: var(--navy-800); font-weight: 500; }
.es-phone:hover { color: var(--accent); }
.es-whatsapp-icon {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--whatsapp-green); color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.es-whatsapp-icon:hover { background: var(--whatsapp-green-dark); transform: translateY(-1px); }
.es-burger {
  display: none; align-items: center; justify-content: center; background: none; border: none;
  color: var(--navy-900); padding: 11px; flex-shrink: 0; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Inline <svg> doesn't reliably pick up the UA stylesheet's [hidden]
   -> display:none the way an HTML element does (it stays display:inline
   even with the hidden attribute set), which is why both the menu and
   close icons were rendering at once — header.js's iconMenu.hidden /
   iconClose.hidden toggling was already correct, it just needed an
   explicit rule here since SVG can't be relied on to honor [hidden] itself. */
.es-icon-menu[hidden], .es-icon-close[hidden] { display: none; }
.es-mobile-panel { display: none; }

@media (max-width: 980px) {
  .es-nav { display: none; }
  .es-phone { display: none; }
  .es-burger { display: flex; }
  .es-mobile-panel {
    display: flex; flex-direction: column; position: fixed;
    top: 77px; left: 0; right: 0; bottom: 0;
    background: var(--bg); z-index: 90; padding: 8px 20px 32px;
  }
  .es-mobile-panel[hidden] { display: none; }
  .es-mobile-nav { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; overflow-y: auto; flex: 1; }
  .es-mobile-nav a { padding: 12px 4px; font-size: 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
  .es-mobile-group-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); padding: 14px 4px 4px; }
  .es-mobile-ctas { display: flex; flex-direction: column; gap: 12px; }
  .es-mobile-ctas .btn { width: 100%; }
}
@media (max-width: 480px) {
  .es-logo-img { height: 32px; }
}

/* ============ Footer.module.css ============ */
.es-footer { background: var(--surface); border-top: 1px solid var(--line); padding-top: 68px; }
.es-footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr; gap: 32px; padding-bottom: 52px; }
.es-brand-col { display: flex; flex-direction: column; gap: 16px; padding-right: 24px; }
.es-footer-logo { height: 58px; width: auto; align-self: flex-start; margin-left: -10px; }
.es-tagline { font-size: 13.5px; line-height: 1.65; color: var(--ink-dim); }
.es-socials { display: flex; gap: 10px; margin-top: 4px; }
.es-socials a { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--navy-800); }
.es-socials a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.es-col-title { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy-800); font-weight: 700; margin-bottom: 16px; }
.es-col ul { display: flex; flex-direction: column; gap: 11px; }
.es-company-links { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.es-col ul a { font-size: 13.5px; color: var(--ink-dim); }
.es-col ul a:hover { color: var(--accent); }
.es-contact-item { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-dim); margin-bottom: 14px; }
.es-contact-item svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.es-contact-item a:hover { color: var(--accent); }
.es-footer-bottom-bar { background: var(--navy-900); }
.es-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 12.5px; color: var(--dim-on-navy); flex-wrap: wrap; }
.es-legal { display: flex; gap: 20px; }
.es-legal a:hover { color: #fff; }

@media (max-width: 980px) {
  .es-footer-top { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .es-brand-col { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 560px) {
  .es-footer-top { grid-template-columns: 1fr; }
  .es-footer-bottom { flex-direction: column; align-items: flex-start; padding-bottom: 108px; }
}

/* ============ MobileStickyBar.module.css ============ */
.es-sticky-bar { display: none; }
@media (max-width: 720px) {
  .es-sticky-bar {
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: rgba(250, 249, 246, 0.96); backdrop-filter: blur(14px); border-top: 1px solid var(--line-strong);
    box-shadow: 0 -8px 24px -16px rgba(15, 36, 71, 0.2); padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); gap: 8px;
  }
  .es-sticky-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px; border-radius: var(--radius-sm); color: var(--navy-800); font-size: 11px; font-weight: 700; }
  .es-sticky-primary { background: var(--accent); color: var(--accent-ink); }
  .es-sticky-whatsapp { color: var(--whatsapp-green-dark); }
}

/* ============ WhatsAppFloat.module.css ============
   Now a small 2-button stack (Call above WhatsApp) rather than a single
   WhatsApp circle — both buttons share the same size/shape/shadow so they
   read as one consistent widget; only their fill color differs (navy for
   Call, WhatsApp green for WhatsApp) to tell the two actions apart. */
.es-float-stack { position: fixed; right: 26px; bottom: 26px; z-index: 150; display: flex; flex-direction: column; gap: 14px; }
.es-float-btn {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform 0.2s ease, background 0.2s ease;
}
.es-float-btn:hover { transform: scale(1.06); }
.es-float-call { background: var(--navy-900); box-shadow: 0 10px 26px -8px rgba(15, 36, 71, 0.55); }
.es-float-call:hover { background: var(--navy-800); }
.es-float-whatsapp { background: var(--whatsapp-green); box-shadow: 0 10px 26px -8px rgba(37, 211, 102, 0.55); }
.es-float-whatsapp:hover { background: var(--whatsapp-green-dark); }
@media (max-width: 720px) { .es-float-stack { display: none; } }

/* ============ Breadcrumb.module.css ============ */
.es-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 500; padding: 18px 0; }
.es-crumb-item { display: flex; align-items: center; gap: 6px; }
.es-crumb-item a { color: var(--ink-dim); }
.es-crumb-item a:hover { color: var(--accent); }
.es-crumb-current { color: var(--ink); font-weight: 600; }
.es-crumb-sep { color: var(--ink-faint); }

/* ============ ServiceHero.module.css ============
   Full-width background-image hero (same pattern as the Home / All Services
   heroes) — each service's own hero_image is the background, positioned
   behind a directional dark overlay so the copy stays readable while the
   photo is still visible. template-parts/brand/hero.php deliberately
   reuses every class below, so the 4 brand-specialist pages inherit the
   identical treatment with their own images.

   The breadcrumb is deliberately NOT inside this hero (see
   .es-service-crumb-bar below) — keeping it as the hero's own flex sibling
   previously made the hero a flex ROW with two items (breadcrumb + copy)
   side by side instead of the copy block sitting centered in its own
   container, which is what actually caused both the "breadcrumb floating
   left / content pushed right" layout bug and, as a side effect, the
   content landing in the lighter part of the overlay gradient (tuned for
   text sitting at the container's left edge, not off to the right).

   Falls back to a solid navy panel (.es-service-hero's own background)
   when a service has no hero_image yet — text colors below are tuned for
   "on photo or on navy" either way, so contrast never depends on whether
   the image markup was actually rendered. */
.es-service-crumb-bar { padding: 16px 0; background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.es-service-crumb-bar .es-breadcrumb { padding: 0; }

.es-service-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: 64px 0;
  overflow: hidden;
  background: var(--navy-900);
}
.es-service-hero-media { position: absolute; inset: 0; z-index: 0; }
.es-service-hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.es-service-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 14, 28, 0.95) 0%, rgba(7, 17, 33, 0.9) 30%, rgba(8, 19, 37, 0.68) 52%, rgba(9, 21, 41, 0.32) 74%, rgba(9, 21, 41, 0.1) 92%);
}
.es-service-hero-inner { position: relative; z-index: 1; width: 100%; }
.es-service-hero-copy { max-width: 620px; }
.es-service-tag { display: inline-flex; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: #fff; background: rgba(255, 255, 255, 0.14); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.es-service-headline { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.es-service-sub { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.94); max-width: 560px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); }
.es-service-fact-row { margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; }
.es-service-fact { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.es-service-fact svg { color: var(--orange-400); }
.es-service-cta-row { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
/* CTA buttons must not pick up the H1's typography or its unbroken width —
   the H1 uses a large clamp() size and, as flex items, buttons default to
   never shrinking below their content width (min-width:auto), which forced
   a long dynamic service name onto one very wide, oversized-looking line.
   Fixed, explicit button typography + allow wrapping + allow shrinking. */
.es-service-cta-row .btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: normal;
  white-space: normal;
  min-width: 0;
}
@media (max-width: 980px) {
  .es-service-hero { min-height: 420px; }
  .es-service-hero-bg { object-position: 62% center; }
  .es-service-hero-overlay { background: linear-gradient(100deg, rgba(6, 14, 28, 0.94) 0%, rgba(7, 17, 33, 0.9) 42%, rgba(8, 19, 37, 0.68) 64%, rgba(9, 21, 41, 0.36) 84%); }
}
@media (max-width: 640px) {
  .es-service-hero { min-height: 400px; padding: 56px 0; }
  .es-service-hero-copy { max-width: none; }
  .es-service-cta-row { flex-direction: column; }
  .es-service-cta-row .btn { width: 100%; }
  .es-service-hero-bg { object-position: 58% center; }
  .es-service-hero-overlay { background: linear-gradient(180deg, rgba(7, 17, 33, 0.72) 0%, rgba(7, 17, 33, 0.88) 50%, rgba(6, 14, 28, 0.95) 100%); }
}

/* ============ TrustBar.module.css ============ */
.es-trust-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.es-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 36px 0; }
.es-trust-stat { display: flex; flex-direction: column; gap: 5px; text-align: center; border-left: 1px solid var(--line-strong); padding: 0 12px; }
.es-trust-stat:first-child { border-left: none; }
.es-trust-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 2.6vw, 28px); color: var(--navy-900); }
.es-trust-label { font-size: 12.5px; color: var(--ink-dim); font-weight: 500; }
@media (max-width: 720px) {
  .es-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 0; padding: 28px 0; }
  .es-trust-stat:nth-child(even) { border-left: 1px solid var(--line-strong); }
  .es-trust-stat:nth-child(odd) { border-left: none; }
}

/* ============ BenefitsGrid.module.css ============ */
.es-benefits { padding: 88px 0; }
.es-benefits-head { max-width: 600px; margin-bottom: 44px; }
.es-benefits-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 36px); }
.es-benefits-dek { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); }
.es-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.es-benefit-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.es-benefit-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.es-benefit-title { font-size: 15.5px; color: var(--ink); font-family: var(--font-body); font-weight: 700; transition: color 0.25s ease; }
.es-benefit-copy { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); transition: color 0.25s ease; }

/* Same navy hover recipe as .es-services-all-card (All Services cards),
   minus the lift/transform — these boxes are informational, not links, so
   they must not move or change size on hover. Not made :focus-visible
   since a non-interactive box has nothing meaningful to focus. :active is
   included so a tap on mobile (which has no real :hover) still shows the
   same treatment briefly while pressed, instead of staying completely
   plain on touch devices. */
.es-benefit-card:hover,
.es-benefit-card:active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  box-shadow: 0 20px 40px -16px rgba(15, 36, 71, 0.45);
}
.es-benefit-card:hover .es-benefit-icon,
.es-benefit-card:active .es-benefit-icon { background: rgba(255, 255, 255, 0.12); color: var(--orange-400); }
.es-benefit-card:hover .es-benefit-title,
.es-benefit-card:active .es-benefit-title { color: #fff; }
.es-benefit-card:hover .es-benefit-copy,
.es-benefit-card:active .es-benefit-copy { color: var(--dim-on-navy); }
@media (max-width: 720px) {
  .es-benefits { padding: 64px 0; }
  .es-benefits-grid { grid-template-columns: 1fr; }
}

/* ============ StepsList.module.css ============ */
.es-steps { padding: 88px 0; background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.es-steps-head { max-width: 600px; margin-bottom: 44px; }
.es-steps-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 36px); }
.es-steps-dek { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); }
/* Balanced 2-column layout on desktop — column-count fills column 1 top
   to bottom before starting column 2, giving exactly "01/02 left, 03/04
   right" for a 4-step list with no markup change. break-inside keeps a
   single step from being split across the column gap. */
.es-steps-list { column-count: 2; column-gap: 48px; }
.es-step { display: flex; gap: 22px; padding: 22px 0; border-top: 1px solid var(--line-strong); break-inside: avoid; }
.es-steps-list .es-step:nth-child(1) { border-top: none; }
.es-steps-list .es-step:nth-child(2) { border-top: none; }
@media (max-width: 720px) {
  .es-steps-list { column-count: 1; }
  .es-steps-list .es-step:nth-child(2) { border-top: 1px solid var(--line-strong); }
}
.es-step:first-child { border-top: none; padding-top: 0; }
.es-step-num { flex-shrink: 0; width: 40px; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--accent); }
.es-step-title { font-size: 16.5px; color: var(--ink); }
.es-step-copy { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-dim); max-width: 620px; }
@media (max-width: 720px) { .es-steps { padding: 64px 0; } }

/* ============ PricingBlock.module.css ============ */
.es-pricing { padding: 0 0 88px; }
.es-pricing-card { background: var(--navy-50); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.es-pricing-info { max-width: 560px; }
.es-pricing-title { margin-top: 14px; font-size: clamp(22px, 3vw, 30px); color: var(--ink); }
.es-pricing-price { color: var(--accent-hover); }
.es-pricing-note { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); }
@media (max-width: 720px) {
  .es-pricing-card { flex-direction: column; align-items: flex-start; padding: 32px 26px; }
  .es-pricing-card .btn { width: 100%; justify-content: center; }
}

/* ============ WhyEverShine.module.css ============ */
.es-why { padding: 96px 0; background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.es-why-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 72px; align-items: center; }
.es-why-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 38px); max-width: 460px; }
.es-why-pillars { margin-top: 40px; display: flex; flex-direction: column; gap: 28px; }
.es-why-pillar { display: flex; gap: 18px; }
.es-why-pillar-icon { flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.es-why-pillar-title { font-size: 16.5px; color: var(--ink); }
.es-why-pillar-copy { margin-top: 7px; font-size: 14px; line-height: 1.6; color: var(--ink-dim); max-width: 400px; }
.es-why-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-card); }
.es-why-media img { width: 100%; height: 100%; object-fit: cover; }
.es-why-badge { position: absolute; left: 24px; bottom: 24px; background: var(--navy-900); border-radius: var(--radius-md); padding: 16px 20px; display: flex; flex-direction: column; }
.es-why-badge-value { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--orange-400); }
.es-why-badge-label { font-size: 12px; color: var(--dim-on-navy); margin-top: 2px; }
@media (max-width: 980px) {
  .es-why-grid { grid-template-columns: 1fr; gap: 44px; }
  .es-why-media { aspect-ratio: 16 / 10; order: -1; }
}

/* ============ FaqAccordion.module.css ============ */
.es-faq { padding: 88px 0; }
.es-faq-inner { max-width: 780px; }
.es-faq-head { margin-bottom: 40px; }
.es-faq-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 36px); }
.es-faq-list { display: flex; flex-direction: column; }
.es-faq-item { border-top: 1px solid var(--line); }
.es-faq-item:last-child { border-bottom: 1px solid var(--line); }
.es-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; text-align: left; padding: 20px 2px; font-family: var(--font-body); font-size: 15.5px; font-weight: 700; color: var(--ink); }
.es-faq-icon { flex-shrink: 0; color: var(--accent); transition: transform 0.2s ease; }
.es-faq-icon-open { transform: rotate(45deg); }
.es-faq-answer { padding: 0 2px 22px; font-size: 14.5px; line-height: 1.65; color: var(--ink-dim); max-width: 640px; }
@media (max-width: 720px) { .es-faq { padding: 64px 0; } }

/* ============ RelatedServices.module.css ============ */
.es-related { padding: 88px 0; background: var(--surface-alt); border-top: 1px solid var(--line); }
.es-related-title { margin-top: 16px; font-size: clamp(24px, 3.2vw, 32px); }
.es-related-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.es-related-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.es-related-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.es-related-card-top { display: flex; align-items: center; justify-content: space-between; }
.es-related-card-name { font-size: 16px; color: var(--ink); }
.es-related-arrow { color: var(--ink-faint); flex-shrink: 0; }
.es-related-card:hover .es-related-arrow { color: var(--accent); }
.es-related-tagline { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }
.es-related-price { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--navy-800); font-weight: 600; }
@media (max-width: 900px) { .es-related-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .es-related { padding: 64px 0; } }

/* ============ FinalCTA.module.css ============ */
.es-final-cta { padding: 104px 0; background: radial-gradient(ellipse 700px 400px at 20% 0%, rgba(243, 121, 26, 0.14), transparent 60%), var(--navy-900); }
.es-final-cta-inner { max-width: 620px; text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.es-final-cta-title { margin-top: 18px; font-size: clamp(30px, 4.6vw, 46px); color: #fff; }
.es-final-cta-sub { margin-top: 16px; font-size: 16px; color: var(--dim-on-navy); line-height: 1.6; }
.es-final-cta-row { margin-top: 34px; display: flex; gap: 14px; }
@media (max-width: 560px) {
  .es-final-cta { padding: 72px 0; }
  .es-final-cta-row { flex-direction: column; width: 100%; }
  .es-final-cta-row .btn { width: 100%; }
}

/* ============ index.php fallback ============ */
.es-fallback { padding: 88px 0; text-align: center; }
.es-fallback h1 { margin-top: 16px; font-size: clamp(26px, 3.6vw, 36px); }
.es-fallback p { margin-top: 16px; color: var(--ink-dim); }
.es-fallback-cta { margin-top: 28px; }

/* ============ 404.php ============
   No existing "plain centered message" section to reuse wholesale, so
   this handful of layout rules is new — but every visual primitive it
   uses (.container, the global h1 rule, --navy-900/--ink-dim/--accent,
   .btn/.btn-primary/.btn-ghost) already exists sitewide. */
.es-404 { padding: 140px 0; }
.es-404-inner { max-width: 560px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.es-404-accent { width: 48px; height: 4px; border-radius: 2px; background: var(--accent); margin-bottom: 24px; }
.es-404-code { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 14vw, 120px); line-height: 1; color: var(--navy-900); letter-spacing: -0.02em; }
.es-404-title { margin-top: 8px; font-size: clamp(26px, 3.6vw, 36px); }
.es-404-sub { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-dim); max-width: 440px; }
.es-404-cta-row { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) {
  .es-404 { padding: 88px 0; }
  .es-404-cta-row { flex-direction: column; width: 100%; }
  .es-404-cta-row .btn { width: 100%; }
}

/* ============================================================
   Homepage sections (front-page.php) — added for the homepage
   migration. Each block below is a direct port of one React
   .module.css file, same pattern as everything above.
   ============================================================ */

/* ---- Hero.module.css (template-parts/home/hero.php) ----
   Full-width background-image hero (redesigned from a two-column text/image
   layout). Text-on-image colors reuse the same on-navy tokens already
   established for FinalCTA (--ink-on-navy, --dim-on-navy, .eyebrow-on-navy,
   .btn-on-navy) rather than introducing new ones. */
.es-home-hero { position: relative; min-height: 720px; display: flex; align-items: center; padding: 96px 0 64px; overflow: hidden; }
.es-home-hero-media { position: absolute; inset: 0; z-index: 0; }
.es-home-hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.es-home-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 14, 28, 0.94) 0%, rgba(7, 17, 33, 0.86) 24%, rgba(8, 19, 37, 0.62) 46%, rgba(9, 21, 41, 0.3) 66%, rgba(9, 21, 41, 0.06) 86%);
}
.es-home-hero-inner { position: relative; z-index: 1; width: 100%; }
.es-home-hero-copy { max-width: 580px; }
/* Text sits on a photo, not the solid navy panels --ink-on-navy/--dim-on-navy
   were designed for (see FinalCTA) — over real image content (sky, chrome
   highlights) --dim-on-navy's blue-gray reads too close in luminance to
   those lighter regions even under the gradient, which is why the paragraph
   was getting lost. Bumped to near-white here, plus a soft text-shadow
   (cinematic photo-caption technique, not a background panel) as insurance
   against the brighter parts of the image — scoped to the hero only, the
   shared tokens/classes FinalCTA uses elsewhere are untouched. */
.es-home-headline { margin-top: 22px; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); }
.es-home-sub { margin-top: 22px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.94); font-weight: 500; max-width: 480px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); }
.es-home-cta-row { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.es-home-hero-copy .btn-on-navy { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(3px); }
.es-home-hero-copy .btn-on-navy:hover { background: rgba(255, 255, 255, 0.14); }
.es-home-proof { margin-top: 36px; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: rgba(255, 255, 255, 0.88); font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.es-home-rating { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; }
.es-home-stars { display: flex; gap: 2px; color: var(--orange-500); }
.es-home-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.es-home-hero-copy .eyebrow.eyebrow-on-navy { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
@media (max-width: 980px) {
  .es-home-hero { min-height: 620px; padding: 88px 0 56px; }
  .es-home-hero-bg { object-position: 62% center; }
  .es-home-hero-overlay { background: linear-gradient(100deg, rgba(6, 14, 28, 0.94) 0%, rgba(7, 17, 33, 0.86) 38%, rgba(8, 19, 37, 0.55) 62%, rgba(9, 21, 41, 0.22) 82%, rgba(9, 21, 41, 0.08) 96%); }
}
@media (max-width: 640px) {
  .es-home-hero { min-height: 560px; padding: 80px 0 48px; }
  .es-home-hero-copy { max-width: none; }
  .es-home-hero-bg { object-position: 58% center; }
  .es-home-hero-overlay { background: linear-gradient(180deg, rgba(7, 17, 33, 0.62) 0%, rgba(7, 17, 33, 0.84) 55%, rgba(6, 14, 28, 0.92) 100%); }
  .es-home-cta-row { flex-direction: column; }
  .es-home-cta-row .btn { width: 100%; }
}

/* ---- ServicesOverview.module.css (template-parts/services-overview.php) ---- */
.es-services-section { padding: 100px 0 88px; }
.es-services-head { max-width: 620px; margin-bottom: 56px; }
.es-services-title { margin-top: 16px; font-size: clamp(28px, 4vw, 42px); }
.es-services-dek { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-dim); }
.es-services-group { margin-top: 44px; }
.es-services-group:first-of-type { margin-top: 0; }
.es-services-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--navy-800); font-weight: 700; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.es-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.es-services-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.es-services-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.es-services-card-top { display: flex; align-items: center; justify-content: space-between; }
.es-services-icon-wrap { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-hover); display: flex; align-items: center; justify-content: center; }
.es-services-card-arrow { color: var(--ink-faint); transition: color 0.2s ease, transform 0.2s ease; }
.es-services-card:hover .es-services-card-arrow { color: var(--accent); transform: translate(2px, -2px); }
.es-services-card-name { margin-top: 18px; font-size: 17px; color: var(--ink); }
.es-services-card-tagline { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); flex: 1; }
.es-services-card-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12.5px; }
.es-services-card-price { color: var(--navy-800); font-weight: 600; }
.es-services-card-duration { color: var(--ink-faint); }
@media (max-width: 1080px) { .es-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .es-services-section { padding: 72px 0 56px; }
  .es-services-grid { grid-template-columns: 1fr; }
}

/* ---- SignatureServices.module.css (template-parts/home/signature-services.php) ---- */
.es-signature-section { padding: 96px 0; background: var(--surface-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.es-signature-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 38px); max-width: 640px; }
.es-signature-stack { margin-top: 52px; display: flex; flex-direction: column; gap: 20px; }
/* Root cause of the "too much empty space beside a short amount of text"
   complaint: this row previously had a flat min-height:480px, forcing BOTH
   columns to stretch to at least that fixed pixel figure regardless of how
   tall the text column's actual content was — the image (object-fit:cover,
   height:100%) simply filled whatever oversized height resulted, while the
   shorter text block just centered inside it, leaving visible blank space
   above/below. Fixed by dropping the fixed min-height and giving the image
   its own intrinsic aspect-ratio instead of height:100% — the row's height
   is now WHICHEVER is naturally taller (the image's aspect-derived height,
   or the text's own content height), and align-items:center lets the
   shorter column simply center in that shared height rather than being
   force-stretched to an arbitrary number. Because it's a ratio rather than
   a px value, the image now scales fluidly with its own column width at
   any viewport size or browser zoom level, instead of behaving like a
   fixed-size object. */
.es-signature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--surface); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.es-signature-row[data-reverse="true"] .es-signature-media { order: 2; }
.es-signature-row[data-reverse="true"] .es-signature-copy-wrap { order: 1; }
.es-signature-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.es-signature-media img { width: 100%; height: 100%; object-fit: cover; }
.es-signature-copy-wrap { display: flex; flex-direction: column; justify-content: center; padding: 52px 56px; }
.es-signature-tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--accent-hover); background: var(--accent-soft); width: fit-content; padding: 5px 12px; border-radius: 999px; }
.es-signature-name { margin-top: 16px; font-size: clamp(21px, 2.4vw, 28px); color: var(--ink); }
.es-signature-copy { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--ink-dim); max-width: 460px; }
.es-signature-points { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.es-signature-points li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--body); font-weight: 500; }
.es-signature-points li svg { color: var(--accent); flex-shrink: 0; }
.es-signature-cta-row { margin-top: 28px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.es-signature-wa-link { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--whatsapp-green-dark); }
.es-signature-wa-link:hover { color: var(--whatsapp-green); }
.es-signature-wa-link:focus-visible { outline: 2px solid var(--whatsapp-green); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 980px) {
  .es-signature-row, .es-signature-row[data-reverse="true"] { grid-template-columns: 1fr; border-radius: var(--radius-lg); }
  .es-signature-row[data-reverse="true"] .es-signature-media { order: 1; }
  .es-signature-row[data-reverse="true"] .es-signature-copy-wrap { order: 2; }
  .es-signature-media { aspect-ratio: 16 / 10; }
  .es-signature-copy-wrap { padding: 36px 26px; }
}

/* ---- ProcessSection.module.css (template-parts/home/process-section.php) ---- */
.es-process-section { padding: 96px 0; }
.es-process-head { max-width: 560px; }
.es-process-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 38px); }
.es-process-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.es-process-step { padding: 0 28px; border-left: 1px solid var(--line); }
.es-process-step:first-child { padding-left: 0; border-left: none; }
.es-process-step-top { display: flex; align-items: center; justify-content: space-between; }
.es-process-num { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.es-process-icon { color: var(--accent); }
.es-process-step-title { margin-top: 20px; font-size: 18px; color: var(--ink); }
.es-process-step-copy { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--ink-dim); }
@media (max-width: 900px) {
  .es-process-grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .es-process-step { border-left: none; padding-left: 0; padding-right: 20px; }
}
@media (max-width: 560px) {
  .es-process-section { padding: 72px 0; }
  .es-process-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- GallerySection.module.css (template-parts/home/gallery-section.php) ---- */
.es-home-gallery-section { padding: 96px 0; }
.es-home-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.es-home-gallery-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 38px); }
.es-home-gallery-ig-link { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--navy-800); padding-bottom: 4px; flex-shrink: 0; }
.es-home-gallery-ig-link:hover { color: var(--accent); }
.es-home-gallery-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.es-home-gallery-item { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.es-home-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.es-home-gallery-item:hover img { transform: scale(1.05); }
.es-home-gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; font-size: 12.5px; font-weight: 500; color: #fff; background: linear-gradient(0deg, rgba(10, 27, 51, 0.82), transparent); }
@media (max-width: 900px) { .es-home-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .es-home-gallery-section { padding: 72px 0; }
  .es-home-gallery-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .es-home-gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ---- BrandsStrip.module.css (template-parts/brands-strip.php) ----
   "Trusted Brands We Use" — products/certifications, 9-card grid. Not to be
   confused with .es-brands-service-* below (car brands we SERVICE). */
.es-trusted-brands-section { padding: 64px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.es-trusted-brands-head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.es-trusted-brands-title { margin-top: 14px; font-size: clamp(26px, 3.6vw, 36px); }
.es-trusted-brands-dek { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-dim); }

.es-trusted-brands-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.es-trusted-brand-card {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.es-trusted-brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--line-strong); }
.es-trusted-brand-media { width: 100%; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.es-trusted-brand-img { width: 100%; height: 100%; object-fit: contain; }
.es-trusted-brand-caption { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); text-align: center; }

.es-trusted-brand-word { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; color: var(--ink); }
.es-trusted-brand-rule { width: 70%; height: 1px; background: var(--ink); }
.es-trusted-brand-subword { font-size: 10.5px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); }
.es-trusted-brand-badge {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--navy-900);
}
.es-trusted-brand-subword--badge { margin-top: 2px; font-weight: 700; letter-spacing: 0.14em; }

.es-trusted-brands-note { margin-top: 32px; font-size: 12px; color: var(--ink-faint); text-align: center; }

@media (max-width: 980px) {
  .es-trusted-brands-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .es-trusted-brands-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .es-trusted-brand-card { padding: 12px; }
}
@media (max-width: 480px) {
  .es-trusted-brands-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Testimonials.module.css (template-parts/testimonials.php) ---- */
.es-testimonials-section { padding: 96px 0; }
.es-testimonials-head { max-width: 560px; }
.es-testimonials-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 38px); }
.es-testimonials-overall { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-dim); font-weight: 600; }
.es-testimonials-stars { display: flex; gap: 2px; color: var(--orange-500); }
.es-testimonials-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.es-testimonials-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px 22px; display: flex; flex-direction: column; }
.es-testimonials-quote-icon { color: var(--accent); opacity: 0.55; }
.es-testimonials-quote { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--body); flex: 1; }
.es-testimonials-who { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.es-testimonials-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-900); color: var(--orange-400); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.es-testimonials-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.es-testimonials-service { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
@media (max-width: 1080px) { .es-testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .es-testimonials-section { padding: 72px 0; }
  .es-testimonials-grid { grid-template-columns: 1fr; }
}

/* ---- LocationHours.module.css (template-parts/location-hours.php) ---- */
.es-location-section { padding: 96px 0; }
.es-location-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.es-location-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 38px); }
.es-location-dek { margin-top: 14px; font-size: 15px; color: var(--ink-dim); }
.es-location-info-row { margin-top: 20px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink); font-weight: 500; }
.es-location-info-icon { color: var(--accent); flex-shrink: 0; }
.es-location-hours-block { margin-top: 28px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.es-location-hours-label { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy-800); font-weight: 700; margin-bottom: 14px; }
.es-location-hours-row { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--body); }
.es-location-hours-row:first-of-type { border-top: none; padding-top: 0; }
.es-location-hours-time { font-family: var(--font-mono); color: var(--ink-dim); }
.es-location-directions { margin-top: 26px; }
.es-location-map-panel { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-alt); overflow: hidden; }
.es-location-map-panel iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 980px) {
  .es-location-grid { grid-template-columns: 1fr; gap: 40px; }
  .es-location-map-panel { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) { .es-location-section { padding: 72px 0; } }

/* ============================================================
   About / Contact pages (page-about.php, page-contact.php) —
   added when About Us and Contact Us were connected to real
   WordPress Pages. Same porting pattern as everything above.
   ============================================================ */

/* ---- AboutStory.module.css (template-parts/about-story.php) ---- */
.es-about-story { padding: 88px 0; }
.es-about-story-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 72px; align-items: center; }
.es-about-story-title { margin-top: 16px; font-size: clamp(26px, 3.6vw, 38px); max-width: 480px; }
.es-about-story-p { margin-top: 18px; font-size: 15px; line-height: 1.7; color: var(--body); max-width: 480px; }
.es-about-story-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-card); }
.es-about-story-media img { width: 100%; height: 100%; object-fit: cover; }
.es-about-story-badge { position: absolute; left: 24px; bottom: 24px; background: var(--navy-900); border-radius: var(--radius-md); padding: 16px 20px; display: flex; flex-direction: column; }
.es-about-story-badge-value { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--orange-400); }
.es-about-story-badge-label { font-size: 12px; color: var(--dim-on-navy); margin-top: 2px; }
@media (max-width: 980px) {
  .es-about-story-grid { grid-template-columns: 1fr; gap: 44px; }
  .es-about-story-media { aspect-ratio: 16 / 10; order: -1; }
}
@media (max-width: 560px) { .es-about-story { padding: 64px 0; } }

/* ---- ContactForm.module.css (template-parts/contact-form.php) ---- */
.es-contact-form-section { padding: 20px 0 96px; }
.es-contact-form-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 56px; align-items: start; }
.es-contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px 44px; box-shadow: var(--shadow-card); }
.es-contact-form-title { font-size: clamp(22px, 2.8vw, 28px); }
.es-contact-form-note { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-dim); max-width: 480px; }
.es-contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.es-contact-field { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.es-contact-form-row .es-contact-field { margin-top: 0; }
.es-contact-field span { font-size: 12.5px; font-weight: 700; color: var(--navy-800); text-transform: uppercase; letter-spacing: 0.04em; }
.es-contact-field input, .es-contact-field select, .es-contact-field textarea {
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease; width: 100%;
}
.es-contact-field textarea { resize: vertical; min-height: 100px; font-family: inherit; }
.es-contact-field input::placeholder, .es-contact-field textarea::placeholder { color: var(--ink-faint); }
.es-contact-field input:focus, .es-contact-field select:focus, .es-contact-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.es-contact-submit { margin-top: 28px; width: 100%; }
.es-contact-quick { background: var(--navy-50); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 32px 30px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 100px; }
.es-contact-quick-title { font-size: 18px; color: var(--ink); }
.es-contact-quick-note { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); margin-bottom: 20px; }
.es-contact-quick-btn { width: 100%; margin-top: 10px; }
.es-contact-quick-btn:first-of-type { margin-top: 0; }
@media (max-width: 900px) {
  .es-contact-form-grid { grid-template-columns: 1fr; gap: 32px; }
  .es-contact-quick { position: static; }
  .es-contact-form { padding: 32px 26px; }
}
@media (max-width: 560px) {
  .es-contact-form-section { padding: 12px 0 64px; }
  .es-contact-form-row { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   Blog (page-blog.php archive + single.php post) — added when
   Gallery was replaced with Blog. Uses the same design tokens,
   card/button patterns as the rest of the site.
   ============================================================ */

/* ---- Blog archive (page-blog.php) ---- */
.es-blog-archive { padding: 20px 0 96px; }
.es-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.es-blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.es-blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.es-blog-card-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.es-blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.es-blog-card:hover .es-blog-card-image img { transform: scale(1.05); }
.es-blog-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.es-blog-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.es-blog-card-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.es-blog-card-title { margin-top: 12px; font-size: 19px; }
.es-blog-card-title a { color: var(--ink); }
.es-blog-card-title a:hover { color: var(--accent); }
.es-blog-card-excerpt { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-dim); flex: 1; }
.es-blog-card-readmore { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--navy-800); }
.es-blog-card-readmore:hover { color: var(--accent); }
.es-blog-empty { padding: 40px 0; text-align: center; color: var(--ink-dim); font-size: 15px; }
.es-blog-pagination { margin-top: 52px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-blog-pagination .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--navy-800); }
.es-blog-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.es-blog-pagination .page-numbers:hover:not(.current) { border-color: var(--line-strong); background: var(--navy-50); }
.es-blog-pagination .page-numbers.dots { border-color: transparent; }
@media (max-width: 1080px) { .es-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .es-blog-grid { grid-template-columns: 1fr; }
  .es-blog-archive { padding: 12px 0 64px; }
}

/* ---- Single blog post (single.php) ---- */
.es-blog-post { padding-bottom: 20px; }
.es-blog-post-inner { max-width: 760px; padding-top: 12px; padding-bottom: 72px; }
.es-blog-post-title { margin-top: 18px; font-size: clamp(28px, 4vw, 44px); }
.es-blog-post-meta { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-dim); font-weight: 600; }
.es-blog-post-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.es-blog-post-featured-image { margin-top: 32px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-card); }
.es-blog-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.es-blog-post-content { margin-top: 40px; font-size: 16px; line-height: 1.75; color: var(--body); }
.es-blog-post-content p { margin-top: 20px; }
.es-blog-post-content p:first-child { margin-top: 0; }
.es-blog-post-content h2 { margin-top: 40px; font-size: 26px; }
.es-blog-post-content h3 { margin-top: 32px; font-size: 21px; }
.es-blog-post-content ul, .es-blog-post-content ol { margin-top: 20px; padding-left: 22px; }
.es-blog-post-content ul { list-style: disc; }
.es-blog-post-content ol { list-style: decimal; }
.es-blog-post-content li { margin-top: 8px; }
.es-blog-post-content a { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.es-blog-post-content a:hover { color: var(--accent); }
.es-blog-post-content img { max-width: 100%; border-radius: var(--radius-md); margin-top: 24px; }
.es-blog-post-content blockquote { margin-top: 24px; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--ink-dim); font-style: italic; }
.es-blog-post-content strong { color: var(--ink); }
@media (max-width: 560px) { .es-blog-post-inner { padding-top: 0; padding-bottom: 56px; } }

/* ---- "Brands We Service" (template-parts/home/brands-we-service.php) ----
   New homepage section, added directly after Services. Reuses the same
   section padding, container, card border/radius/shadow and grid breakpoint
   pattern as the rest of the site (see .es-services-section / .es-process-
   section for the source of that pattern) — kept visually simpler/more
   elegant than a service card on purpose (centered monogram + name only,
   no tagline/meta row), per spec. Not to be confused with .es-brands-*
   (BrandsStrip, a different "product brands used" section). */
.es-brands-service-section { padding: 96px 0; }
.es-brands-service-head { max-width: 620px; margin: 0 auto; text-align: center; }
.es-brands-service-title { font-size: clamp(26px, 3.6vw, 38px); }
.es-brands-service-dek { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); }
.es-brands-service-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.es-brands-service-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 32px 20px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.es-brands-service-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.es-brands-service-badge {
  width: 100%; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.es-brands-service-badge .es-brand-logo-img { height: 100%; }
.es-brands-service-name { margin-top: 16px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
@media (max-width: 900px) {
  .es-brands-service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .es-brands-service-section { padding: 72px 0; }
  .es-brands-service-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .es-brands-service-card { padding: 24px 14px; }
}


/* ---- Brand-specialist pages (page-bmw/mercedes/range-rover/gmc-repair-dubai.php) ---- */
.es-brand-disclaimer { padding: 28px 0; }
.es-brand-disclaimer p { max-width: 640px; margin: 0 auto; text-align: center; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }

/* ---- Real brand-logo treatment (all 4 brands: BMW/Mercedes-Benz/Range
   Rover/GMC) — es_brand_logo_html() in functions.php wraps every mark
   (whether an inlined SVG or an <img>) in a shared .es-brand-logo-img span,
   so ONE sizing rule applies uniformly regardless of format or the source
   file's own aspect ratio. Explicit width/height:100% + object-fit:contain
   (not max-width/max-height + auto — that combination doesn't reliably
   resolve for an SVG with only a viewBox and no width/height attributes,
   which collapses to 0×0 in some engines) means no logo is ever stretched
   or distorted — a wide wordmark (e.g. GMC) simply renders shorter than a
   square/circular mark (e.g. BMW, Mercedes) at the same bounding box, the
   correct, honest result of preserving each mark's real proportions rather
   than forcing them to match. Requires .es-brand-logo-img to have an actual
   height in every place it's used (see the two contexts below) since
   percentage width/height on the img/svg resolve against it. */
.es-brand-logo-img { display: flex; align-items: center; justify-content: center; width: 100%; }
.es-brand-logo-img img,
.es-brand-logo-img svg { width: 100%; height: 100%; object-fit: contain; }

/* Homepage badge: fixed 56px-tall box, full card width — see
   .es-brands-service-badge above. BMW's SVG has no baked-in color, so it's
   tinted its own real brand blue here (it has no fixed background to sit
   against now, unlike the old navy-circle treatment); the 3 raster marks
   keep their own native colors/backgrounds untouched. */
.es-brands-service-badge .es-brand-logo-img svg path { fill: #0066B1; }

/* Brand-page hero: a small mark placed inline with the existing tag pill,
   ahead of the H1 — subtle, not overpowering. Reuses .es-service-tag
   unchanged; only adds the row wrapper + logo beside it. */
.es-brand-hero-tag-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.es-brand-hero-tag-row .es-service-tag { margin-bottom: 0; }
.es-brand-hero-logo { display: flex; align-items: center; height: 34px; }
.es-brand-hero-logo .es-brand-logo-img { height: 100%; }
.es-brand-hero-logo .es-brand-logo-img svg path { fill: #0066B1; }
@media (max-width: 560px) {
  .es-brand-hero-logo { height: 28px; }
}

/* ---- All Services page (page-services.php) ----
   Just a wrapper around the reused Brand Specialists section (template-parts/
   home/brands-we-service.php, unchanged) giving it a subtly different
   surface + a top divider — the same background/border treatment already
   used elsewhere for section separation (e.g. BrandsStrip, Signature
   Services) — so it reads as a distinct "specialization area" sitting below
   the main services grid, not more of the same card grid. The brand cards
   themselves are byte-for-byte the same markup/CSS as the homepage. */
.es-services-page-brands { background: var(--surface-alt); border-top: 1px solid var(--line); }

/* ---- Services page hero (template-parts/services-hero.php) ----
   Same full-bleed-image + directional-gradient + light-text technique as
   the homepage hero (template-parts/home/hero.php), but with its own image
   and its own classes — completely independent, so nothing here can affect
   the homepage hero and vice versa. Shorter than the homepage hero (this is
   a secondary/interior page, not the main landing hero) but still a real
   banner, not a thin strip. Breadcrumb and eyebrow reuse the same on-navy
   pattern already established for the homepage hero / FinalCTA. */
.es-services-hero { position: relative; min-height: 460px; display: flex; align-items: center; padding: 88px 0 56px; overflow: hidden; }
.es-services-hero-media { position: absolute; inset: 0; z-index: 0; }
.es-services-hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.es-services-hero-overlay {
  position: absolute; inset: 0;
  /* Held stronger and further right than a typical hero overlay, since the
     text column below is now much wider (820px vs the previous 640px) —
     the gradient's dark zone has to cover that whole column or the widened
     text would run into the lighter part of the image on its right edge. */
  background: linear-gradient(100deg, rgba(6, 14, 28, 0.95) 0%, rgba(7, 17, 33, 0.9) 30%, rgba(8, 19, 37, 0.72) 52%, rgba(9, 21, 41, 0.4) 70%, rgba(9, 21, 41, 0.12) 88%);
}
.es-services-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 820px; }
.es-services-hero-inner .es-breadcrumb { padding-top: 0; }
.es-services-hero-inner .es-crumb-item a { color: rgba(255, 255, 255, 0.7); }
.es-services-hero-inner .es-crumb-item a:hover { color: #fff; }
.es-services-hero-inner .es-crumb-current { color: #fff; }
.es-services-hero-inner .es-crumb-sep { color: rgba(255, 255, 255, 0.35); }
.es-services-hero-inner .eyebrow.eyebrow-on-navy { margin-top: 18px; color: rgba(255, 255, 255, 0.9); }
/* Text-shadow kept only as a light secondary safety net now — the
   strengthened overlay above is doing the primary contrast work, not the
   shadow. */
.es-services-hero-title { margin-top: 18px; font-size: clamp(34px, 4.8vw, 54px); line-height: 1.08; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25); }
.es-services-hero-sub { margin-top: 20px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.94); font-weight: 500; max-width: 620px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); }
@media (max-width: 980px) {
  .es-services-hero { min-height: 420px; }
  .es-services-hero-inner { max-width: 640px; }
  .es-services-hero-bg { object-position: 62% center; }
  .es-services-hero-overlay { background: linear-gradient(100deg, rgba(6, 14, 28, 0.94) 0%, rgba(7, 17, 33, 0.9) 42%, rgba(8, 19, 37, 0.62) 66%, rgba(9, 21, 41, 0.28) 86%); }
}
@media (max-width: 640px) {
  .es-services-hero { min-height: 400px; padding: 80px 0 44px; }
  .es-services-hero-inner { max-width: none; }
  .es-services-hero-sub { max-width: none; }
  .es-services-hero-bg { object-position: 58% center; }
  .es-services-hero-overlay { background: linear-gradient(180deg, rgba(7, 17, 33, 0.68) 0%, rgba(7, 17, 33, 0.86) 55%, rgba(6, 14, 28, 0.93) 100%); }
}

/* ---- Reusable page banner hero (template-parts/page-banner-hero.php) ----
   Same full-width image-hero technique as .es-services-hero, own classes —
   shared by Contact, Blog and About (previously Contact had its own
   one-off .es-contact-hero* copy; generalized here so all three reuse one
   component/stylesheet block instead of duplicating it per page). Each
   page's own object-position/overlay tuning lives under its
   .es-banner-hero--{variant} modifier below, since each uses a different
   photo with a different focal point. */
.es-banner-hero { position: relative; min-height: 440px; display: flex; align-items: center; padding: 84px 0 52px; overflow: hidden; }
.es-banner-hero-media { position: absolute; inset: 0; z-index: 0; }
.es-banner-hero-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.es-banner-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 14, 28, 0.94) 0%, rgba(7, 17, 33, 0.88) 30%, rgba(8, 19, 37, 0.66) 54%, rgba(9, 21, 41, 0.3) 74%, rgba(9, 21, 41, 0.1) 90%);
}
.es-banner-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 640px; }
.es-banner-hero-inner .eyebrow.eyebrow-on-navy { color: rgba(255, 255, 255, 0.9); }
.es-banner-hero-title { margin-top: 18px; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); }
.es-banner-hero-sub { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.92); max-width: 560px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25); }

/* Contact — vehicle getting checked in the Dubai desert at dusk, SUV
   sitting center-right of frame; bias right, more so as the viewport
   narrows, to keep it in view while the dunes/sky stay clear for text. */
.es-banner-hero--contact .es-banner-hero-bg { object-position: 62% center; }
@media (max-width: 980px) {
  .es-banner-hero--contact .es-banner-hero-bg { object-position: 68% center; }
}
@media (max-width: 640px) {
  .es-banner-hero--contact .es-banner-hero-bg { object-position: 65% center; }
}

/* Blog — Dubai skyline car meet, the sharpest car (white Porsche) sits
   center-right; same right-bias logic as Contact. */
.es-banner-hero--blog .es-banner-hero-bg { object-position: 68% center; }
@media (max-width: 980px) {
  .es-banner-hero--blog .es-banner-hero-bg { object-position: 74% center; }
}
@media (max-width: 640px) {
  .es-banner-hero--blog .es-banner-hero-bg { object-position: 72% center; }
}

/* About — portrait source (technician detailing a hood); the subject
   (head, shoulders, working hands) sits in the upper third of the frame,
   so this needs a vertical bias instead of horizontal. Kept at the SAME
   vertical anchor across breakpoints — unlike a landscape photo's
   horizontal focal point, which genuinely needs to shift as the text
   column narrows, a portrait subject's position in the source doesn't
   move; only how much of the image height is visible changes with the
   container's aspect ratio, and one consistent anchor keeps the subject
   centered in that visible window at any hero height. */
.es-banner-hero--about .es-banner-hero-bg { object-position: center 27%; }

@media (max-width: 980px) {
  .es-banner-hero { min-height: 400px; }
  .es-banner-hero-overlay { background: linear-gradient(100deg, rgba(6, 14, 28, 0.93) 0%, rgba(7, 17, 33, 0.9) 42%, rgba(8, 19, 37, 0.64) 66%, rgba(9, 21, 41, 0.3) 86%); }
}
@media (max-width: 640px) {
  .es-banner-hero { min-height: 380px; padding: 76px 0 40px; }
  .es-banner-hero-inner { max-width: none; }
  .es-banner-hero-sub { max-width: none; }
  .es-banner-hero-overlay { background: linear-gradient(180deg, rgba(7, 17, 33, 0.6) 0%, rgba(7, 17, 33, 0.84) 55%, rgba(6, 14, 28, 0.93) 100%); }
}

/* ---- Unified service grid (template-parts/services-all-grid.php) ----
   page-services.php ONLY — a deliberate parallel to .es-services-grid/
   .es-services-card (still used unchanged by the homepage/About via
   services-overview.php), not a modification of them, so nothing here can
   affect those pages. Flexbox with wrap + centered lines (not CSS Grid)
   for the same reason as before: each wrapped row centers whatever cards
   land on it, so a non-multiple-of-4 total (there are 10 services) never
   leaves a stranded, uneven trailing row — it just centers as a smaller,
   intentionally wider group. */
.es-services-all-section { padding: 88px 0 96px; }
.es-services-all-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.es-services-all-card {
  flex: 1 1 260px; max-width: 340px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.es-services-all-card-top { display: flex; align-items: center; justify-content: space-between; }
.es-services-all-icon-wrap {
  width: 42px; height: 42px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.es-services-all-card-arrow { color: var(--ink-faint); transition: color 0.25s ease, transform 0.25s ease; }
.es-services-all-card-name { margin-top: 18px; font-size: 17px; color: var(--ink); transition: color 0.25s ease; }
.es-services-all-card-tagline { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); flex: 1; transition: color 0.25s ease; }
.es-services-all-card-meta {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12.5px;
  transition: border-color 0.25s ease;
}
.es-services-all-card-price { color: var(--navy-800); font-weight: 600; transition: color 0.25s ease; }
.es-services-all-card-duration { color: var(--ink-faint); transition: color 0.25s ease; }

/* Premium navy hover/focus state — the whole card, not just a border. Orange
   stays as the one accent (icon + arrow) rather than introducing a new
   color. :focus-visible mirrors :hover so keyboard users get the same
   treatment, not just mouse users; :active mirrors it too so a tap on
   mobile (no real :hover there) still shows the same premium treatment
   instead of the card staying completely plain until navigation. */
.es-services-all-card:hover,
.es-services-all-card:focus-visible,
.es-services-all-card:active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  box-shadow: 0 20px 40px -16px rgba(15, 36, 71, 0.45);
  transform: translateY(-3px);
  outline: none;
}
.es-services-all-card:hover .es-services-all-icon-wrap,
.es-services-all-card:focus-visible .es-services-all-icon-wrap,
.es-services-all-card:active .es-services-all-icon-wrap { background: rgba(255, 255, 255, 0.12); color: var(--orange-400); }
.es-services-all-card:hover .es-services-all-card-arrow,
.es-services-all-card:focus-visible .es-services-all-card-arrow,
.es-services-all-card:active .es-services-all-card-arrow { color: var(--orange-400); transform: translate(2px, -2px); }
.es-services-all-card:hover .es-services-all-card-name,
.es-services-all-card:focus-visible .es-services-all-card-name,
.es-services-all-card:active .es-services-all-card-name { color: #fff; }
.es-services-all-card:hover .es-services-all-card-tagline,
.es-services-all-card:focus-visible .es-services-all-card-tagline,
.es-services-all-card:active .es-services-all-card-tagline { color: var(--dim-on-navy); }
.es-services-all-card:hover .es-services-all-card-meta,
.es-services-all-card:focus-visible .es-services-all-card-meta,
.es-services-all-card:active .es-services-all-card-meta { border-top-color: rgba(255, 255, 255, 0.18); }
.es-services-all-card:hover .es-services-all-card-price,
.es-services-all-card:focus-visible .es-services-all-card-price,
.es-services-all-card:active .es-services-all-card-price { color: #fff; }
.es-services-all-card:hover .es-services-all-card-duration,
.es-services-all-card:focus-visible .es-services-all-card-duration,
.es-services-all-card:active .es-services-all-card-duration { color: var(--dim-on-navy); }

@media (max-width: 560px) {
  .es-services-all-section { padding: 64px 0 72px; }
  .es-services-all-card { flex-basis: 100%; max-width: none; }
}

/* ============ Scroll-reveal (assets/js/scroll-reveal.js) ============
   Content is fully visible by default — this rule only takes effect once
   the script has added html.es-js-anim, which it only does after checking
   IntersectionObserver support and prefers-reduced-motion itself, so a
   missing/blocked script or a reduced-motion preference always leaves
   content exactly as it already renders. The reduced-motion block below is
   a second, CSS-level safety net in case that preference changes after
   load. Opacity/transform only — never affects layout or box size, so
   nothing shifts as items reveal. */
html.es-js-anim .es-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.es-js-anim .es-reveal.es-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .es-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}