/* Grandix Auto Service — styles.css
   1. design-system tokens  2. page base + animations  3. interaction states
   Generated from the Grandix Auto Service Design System. */

/* ========== 1. DESIGN SYSTEM TOKENS ========== */
/* ---- tokens/fonts.css ---- */
/* Grandix web fonts. SUBSTITUTION: no original font binaries were supplied with the
   reference landing page. Montserrat (headings/wordmark voice) and Open Sans (body)
   are the closest Google Fonts matches to the reference artwork. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400..900;1,400..900&family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap");

@font-face{font-family:"Montserrat Fallback";src:local("Montserrat"),local("Arial Bold");font-weight:700 900;font-display:swap}

/* ---- tokens/colors.css ---- */
:root{
  /* Base — navy */
  --navy-900:#00122b;--navy-800:#011330;--navy-700:#04214d;--navy-600:#0a2f6b;--navy-500:#12447f;
  /* Base — red */
  --red-700:#8f0f16;--red-600:#b3121a;--red-500:#e01a22;--red-400:#e91621;--red-300:#ff4a52;--red-100:#fde8e9;
  /* Base — neutral */
  --white:#ffffff;--neutral-50:#f9fbfc;--neutral-100:#f1f5f8;--neutral-200:#e3e9ef;--neutral-300:#cbd5e0;
  --neutral-400:#94a3b4;--neutral-500:#64748b;--neutral-600:#475569;--neutral-700:#2f3b4d;--neutral-900:#111a29;
  /* Support */
  --green-500:#25d366;--amber-500:#f5a623;--google-blue:#4285f4;

  /* Semantic — surfaces */
  --surface-page:var(--white);
  --surface-muted:var(--neutral-100);
  --surface-card:var(--white);
  --surface-inverse:var(--navy-800);
  --surface-inverse-deep:var(--navy-900);
  --surface-accent:var(--red-500);
  --surface-accent-soft:var(--red-100);

  /* Semantic — text */
  --text-heading:var(--navy-800);
  --text-body:var(--neutral-600);
  --text-muted:var(--neutral-400);
  --text-accent:var(--red-500);
  --text-on-inverse:var(--white);
  --text-on-inverse-muted:#b9c6d8;
  --text-on-accent:var(--white);

  /* Semantic — lines */
  --border-subtle:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-inverse:rgba(255,255,255,.22);
  --rule-accent:var(--red-500);

  /* Semantic — interactive */
  --action-primary:var(--red-500);
  --action-primary-hover:var(--red-600);
  --action-primary-active:var(--red-700);
  --action-secondary:var(--white);
  --action-secondary-hover:var(--neutral-100);
  --action-inverse:var(--navy-800);
  --focus-ring:var(--red-500);
  --icon-badge:var(--navy-800);
  --star-filled:var(--red-500);
}

/* ---- tokens/typography.css ---- */
:root{
  --font-display:"Montserrat","Montserrat Fallback",Helvetica Neue,Arial,sans-serif;
  --font-body:"Open Sans",Segoe UI,Helvetica Neue,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --fw-regular:400; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:900; /* @kind font */

  --fs-hero:56px;--fs-h1:44px;--fs-h2:32px;--fs-h3:22px;--fs-h4:17px;
  --fs-lead:18px;--fs-body:15px;--fs-small:13.5px;--fs-caption:12px;--fs-eyebrow:11px;

  --lh-tight:1.05; /* @kind font */
  --lh-heading:1.15; /* @kind font */
  --lh-snug:1.35; /* @kind font */
  --lh-body:1.6; /* @kind font */

  --ls-display:-0.01em;--ls-eyebrow:0.10em;--ls-wordmark:0.34em;--ls-button:0.04em;

  /* Semantic type roles */
  --type-hero-family:var(--font-display); /* @kind font */
  --type-hero-weight:var(--fw-extrabold); /* @kind font */
  --type-section-title-size:var(--fs-h2);
  --type-eyebrow-transform:uppercase; /* @kind other */
  --type-button-size:var(--fs-small);
}

/* ---- tokens/spacing.css ---- */
:root{
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

  --section-py:72px;--section-py-tight:48px;
  --container-max:1180px;--container-pad:24px;
  --grid-gap:16px;--card-pad:22px;--card-pad-lg:28px;

  --control-h-sm:36px;--control-h-md:44px;--control-h-lg:52px;
  --control-px:22px;
}

/* ---- tokens/effects.css ---- */
:root{
  --radius-none:0;--radius-xs:3px;--radius-sm:5px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
  --radius-card:6px;--radius-control:5px;--radius-badge:999px;

  --shadow-card:0 1px 3px rgba(0,18,43,.07);
  --shadow-card-hover:0 10px 26px rgba(0,18,43,.13);
  --shadow-raised:0 4px 14px rgba(0,18,43,.10);
  --shadow-control:0 2px 6px rgba(224,26,34,.28);
  --shadow-inset-line:inset 0 -1px 0 var(--border-subtle);

  --border-width:1px;--border-width-accent:3px;
  --rule-w:56px;--rule-h:3px;

  /* Motion */
  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --lift-hover:translateY(-3px); /* @kind other */
  --press-scale:.98; /* @kind other */

  /* Overlays */
  --overlay-navy:linear-gradient(90deg,var(--navy-800) 0%,var(--navy-800) 38%,rgba(1,19,48,.55) 62%,rgba(1,19,48,0) 100%); /* @kind color */
  --overlay-photo-scrim:linear-gradient(180deg,rgba(0,18,43,0) 40%,rgba(0,18,43,.72) 100%); /* @kind color */
  --focus-ring-shadow:0 0 0 3px rgba(224,26,34,.35); /* @kind shadow */
}

/* ========== 2. PAGE BASE + ANIMATIONS ========== */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; background: var(--surface-page); font-family: var(--font-body); color: var(--text-body); -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  img, iframe { max-width: 100%; }
  a { color: var(--text-accent); text-decoration: none; }
  a:hover { color: var(--red-600); }
  ::selection { background: var(--surface-accent-soft); color: var(--navy-800); }
  @keyframes gxPulse { 0%,100% { box-shadow: 0 6px 20px rgba(0,18,43,.28), 0 0 0 0 rgba(37,211,102,.45); } 55% { box-shadow: 0 6px 20px rgba(0,18,43,.28), 0 0 0 14px rgba(37,211,102,0); } }
  @keyframes gxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  @keyframes gxSheen { 0% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
  @keyframes gxRuleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes gxSpinSlow { to { transform: rotate(360deg); } }
  @keyframes gxDriftIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
  .gx-card { position: relative; overflow: hidden; }
  .gx-card::after { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0)); transform: translateX(-160%) skewX(-18deg); pointer-events: none; }
  .gx-card:hover::after { animation: gxSheen 760ms cubic-bezier(.2,.7,.3,1) forwards; }
  .gx-card img { transition: transform 520ms cubic-bezier(.2,.7,.3,1); }
  .gx-card:hover img { transform: scale(1.06); }
  .gx-rule { transform-origin: left center; }
  .gx-rule.gx-in { animation: gxRuleGrow 620ms cubic-bezier(.2,.7,.3,1) both; }
  .gx-eyebrow { transition: letter-spacing 600ms cubic-bezier(.2,.7,.3,1); }
  .gx-photo { transition: transform 700ms cubic-bezier(.2,.7,.3,1), box-shadow 400ms ease; }
  .gx-photo:hover { transform: scale(1.015); }
  .gx-float { animation: gxFloat 5.5s ease-in-out infinite; }
  @keyframes gxStarPop { 0% { opacity: 0; transform: scale(.4) rotate(-25deg); } 60% { opacity: 1; transform: scale(1.18) rotate(4deg); } 100% { opacity: 1; transform: none; } }
  @keyframes gxBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  @keyframes gxShine { 0% { background-position: -220% 0; } 100% { background-position: 220% 0; } }
  @keyframes gxRipple { 0% { box-shadow: 0 0 0 0 rgba(224,26,34,.35); } 70% { box-shadow: 0 0 0 12px rgba(224,26,34,0); } 100% { box-shadow: 0 0 0 0 rgba(224,26,34,0); } }
  .gx-nav { position: relative; }
  .gx-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #e01a22; transform: scaleX(0); transform-origin: right center; transition: transform 240ms cubic-bezier(.2,.7,.3,1); }
  .gx-nav:hover::after { transform: scaleX(1); transform-origin: left center; }
  .gx-card svg { transition: transform 360ms cubic-bezier(.2,.7,.3,1); }
  .gx-card:hover svg { transform: translateY(-3px) rotate(-8deg) scale(1.12); }
  .gx-card:hover { border-color: #cbd5e0 !important; }
  .gx-stars > span { animation: gxStarPop 460ms cubic-bezier(.2,.7,.3,1) both; }
  .gx-stars > span:nth-child(2) { animation-delay: 70ms; }
  .gx-stars > span:nth-child(3) { animation-delay: 140ms; }
  .gx-stars > span:nth-child(4) { animation-delay: 210ms; }
  .gx-stars > span:nth-child(5) { animation-delay: 280ms; }
  .gx-social { transition: transform 260ms cubic-bezier(.2,.7,.3,1), border-color 200ms ease, color 200ms ease; }
  .gx-social:hover { transform: translateY(-3px) rotate(-8deg); }
  .gx-map { transition: box-shadow 400ms ease, transform 500ms cubic-bezier(.2,.7,.3,1); }
  .gx-map:hover { box-shadow: 0 14px 34px rgba(0,18,43,.18); transform: translateY(-2px); }
  .gx-shine { background-image: linear-gradient(100deg,#e01a22 42%,#ffd9db 50%,#e01a22 58%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gxShine 3.8s linear infinite; } 6% { opacity: .85; transform: scale(1.12); } 10% { opacity: .18; } 16% { opacity: .7; } 22% { opacity: .14; } 60% { opacity: .3; } }
  @keyframes gxGlow { 0%,100% { opacity: .22; transform: scale(1); } 50% { opacity: .48; transform: scale(1.14); } }
  @keyframes gxCharge { 0% { clip-path: inset(100% 0 0 0); } 55% { clip-path: inset(0 0 0 0); } 85% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } }
  @keyframes gxArc { 0% { stroke-dashoffset: 260; opacity: 0; } 12% { opacity: .9; } 45% { stroke-dashoffset: 0; opacity: .5; } 60% { opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  .gx-glow { animation: gxGlow 6s ease-in-out infinite; }
  .gx-arc path { stroke-dasharray: 260; animation: gxArc 7s ease-in-out infinite; }
  .gx-ripple:hover { animation: gxRipple 900ms ease-out; }
  .gx-faq div { border-bottom: 0 !important; }
  @keyframes gxLoadBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
  @keyframes gxLoadPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
  a[href^="tel:"] { position: relative; overflow: hidden; }
  a[href^="tel:"]::after { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0)); transform: translateX(-160%) skewX(-18deg); pointer-events: none; }
  a[href^="tel:"]:hover::after { animation: gxSheen 760ms cubic-bezier(.2,.7,.3,1) forwards; }
  .gx-reason { position: relative; border-radius: 6px; padding-left: 14px !important; padding-right: 14px !important; transition: background 240ms ease, transform 200ms cubic-bezier(.2,.7,.3,1); }
  .gx-reason::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: #e01a22; border-radius: 2px; transform: scaleY(0); transform-origin: top center; transition: transform 300ms cubic-bezier(.2,.7,.3,1); }
  .gx-reason:hover { background: #f7fafc; transform: translateX(4px); }
  .gx-reason:hover::before { transform: scaleY(1); }
  .gx-reason > span:first-child { transition: background 240ms ease, transform 300ms cubic-bezier(.2,.7,.3,1); }
  .gx-reason:hover > span:first-child { background: #e01a22 !important; transform: rotate(-6deg) scale(1.06); }
  .gx-reason:hover h3 { color: #e01a22; }
  .gx-reason h3 { transition: color 240ms ease; }
  .gx-info { position: relative; overflow: hidden; }
  .gx-info::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #e01a22; transform: scaleX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(.2,.7,.3,1); }
  .gx-info:hover::before { transform: scaleX(1); }
  .gx-info:hover { border-color: #e01a22 !important; }
  .gx-bg { position: relative; overflow: hidden; }
  .gx-bg > * { position: relative; z-index: 1; }
  .gx-dots::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(1,19,48,.28) 1px, transparent 1px); background-size: 24px 24px; opacity: .16; pointer-events: none; }
  .gx-lines::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(112deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.85) 46%, rgba(255,255,255,.5) 58%, rgba(255,255,255,0) 76%), radial-gradient(120% 90% at 100% 100%, rgba(1,19,48,.075) 0%, rgba(1,19,48,0) 62%), radial-gradient(90% 70% at 0% 0%, rgba(1,19,48,.05) 0%, rgba(1,19,48,0) 60%); }
  .gx-ring::after { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border-radius: 999px; border: 1px solid rgba(1,19,48,.09); z-index: 0; pointer-events: none; }
  .gx-ring-l::after { content: ""; position: absolute; left: -160px; bottom: -160px; width: 460px; height: 460px; border-radius: 999px; border: 1px solid rgba(224,26,34,.14); z-index: 0; pointer-events: none; }
  .gx-fade-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 0; background: linear-gradient(180deg, rgba(1,19,48,.05), rgba(1,19,48,0)); pointer-events: none; }
  .gx-svc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #e01a22; transform-origin: left center; z-index: 2; }
  .gx-svc { border-color: #e3e9ef !important; transition: transform 140ms cubic-bezier(.2,.7,.3,1), box-shadow 240ms ease, border-color 240ms ease !important; }
  .gx-svc:hover { transform: translateY(-5px); border-color: #e01a22 !important; box-shadow: 0 14px 32px rgba(224,26,34,.18) !important; }
  .gx-svc .gx-num { transition: background 240ms ease, color 240ms ease, letter-spacing 240ms ease; }
  .gx-svc:hover .gx-num { background: #e01a22; color: #ffffff; letter-spacing: .14em; }
  .gx-svc .gx-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(1,19,48,0) 45%,rgba(1,19,48,.42) 100%); opacity: 0; transition: opacity 320ms ease; }
  .gx-svc:hover .gx-media::after { opacity: 1; }
  .gx-tile { transition: transform 200ms cubic-bezier(.2,.7,.3,1), background 200ms ease, color 200ms ease; }
  .gx-tile:hover { transform: translateY(-2px); background: #011330 !important; color: #ffffff !important; border-color: #011330 !important; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 1ms !important; } }

/* ========== 3. INTERACTION STATES + STATIC-BUILD RULES ========== */
/* Width/height attributes on every image reserve layout space before load, so
   lazy images below the fold can't collapse to 0 height. Images that set their
   own height inline (hero, covers, cutouts) override this automatically. */
img { max-width: 100%; }
img[width][height] { height: auto; }

/* ---------- hover states recreated as real CSS ----------
   In the source these were inline `style-hover` rules compiled to runtime
   classes; a static build needs them declared here instead. */

/* Text links: nav, footer, contact rows, "view more on Google" — all go red. */
footer a:hover,
#visit a:hover,
#contact a:hover,
a.gx-nav:hover,
#reviews a:hover { color: #e01a22 !important; }

/* Footer social circles: red ring + red glyph (icon inherits currentColor). */
.gx-social:hover {
  border-color: #e01a22 !important;
  color: #e01a22 !important;
  transform: translateY(-3px) rotate(-8deg);
}
/* Buttons inside those regions keep their own treatment. */
footer .gxbtn:hover,
#visit .gxbtn:hover,
#contact .gxbtn:hover { color: var(--text-on-accent) !important; }
#contact .gxbtn-secondary:hover,
#visit .gxbtn-secondary:hover { color: var(--text-body) !important; }

/* Sticky WhatsApp button lifts without changing colour. */
.gx-sticky-wa:hover,
a[aria-label="WhatsApp Grandix Auto Service"]:hover {
  transform: translateY(-3px);
  color: #ffffff !important;
}

/* Generic card lift (review cards, info cards, FAQ cards). */
.gx-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 18, 43, .13); }

/* ---------- 3. hover / focus / press states (CSS-owned) ---------- */
.gxbtn { text-decoration: none; }
.gxbtn-primary:hover { background: var(--action-primary-hover) !important; box-shadow: var(--shadow-control) !important; }
.gxbtn-primary:active { background: var(--red-700) !important; transform: scale(.98) !important; }
.gxbtn-secondary:hover { background: var(--action-secondary-hover) !important; }
.gxbtn-secondary:active { transform: scale(.98) !important; }
.gxbtn-light:hover { background: rgba(255, 255, 255, .12) !important; }
.gxbtn-light:active { transform: scale(.98) !important; }
.gxbtn:focus-visible,
a:focus-visible,
button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(224, 26, 34, .35) !important; }

/* FAQ accordion */
.gx-faq-btn { transition: color var(--dur-base) var(--ease-out); }
.gx-faq-btn:hover { color: var(--text-accent) !important; }
.gx-faq-btn svg { transition: transform var(--dur-base) var(--ease-out); }
.gx-faq-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.gx-faq-panel[hidden] { display: none; }

/* ---------- preloader ---------- */
#gx-preloader {
  position: fixed; inset: 0; z-index: 200; background: #011330;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; opacity: 1; transition: opacity 520ms cubic-bezier(.2, .7, .3, 1);
}
#gx-preloader.gx-hide { opacity: 0; pointer-events: none; }
/* Fallback: if script.js never loads, CSS alone still clears the overlay. */
#gx-preloader { animation: gxPreloadFallback 1ms linear 16s forwards; }
@keyframes gxPreloadFallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }
#gx-preloader .gx-pl-logo {
  background: #ffffff; padding: 14px 26px; animation: gxLoadPulse 1.8s ease-in-out infinite;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
#gx-preloader .gx-pl-logo img { height: 64px; width: auto; display: block; }
#gx-preloader .gx-pl-track {
  position: relative; width: 200px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .16); overflow: hidden;
}
/* Determinate: width is driven by real image-load progress in script.js. */
#gx-preloader .gx-pl-track span {
  position: absolute; inset: 0 auto 0 0; width: 0; background: #e01a22;
  transition: width 220ms cubic-bezier(.2, .7, .3, 1);
}
#gx-preloader .gx-pl-label {
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 10.5px;
  letter-spacing: .28em; color: #b9c6d8; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
@keyframes gxLoadPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- mobile navigation ---------- */
.gx-mobile-actions { display: none; margin-left: auto; align-items: center; gap: 10px; padding: 12px 0; }
.gx-mobile-actions a,
.gx-mobile-actions button {
  width: 44px; height: 44px; border-radius: 5px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; border: 0;
  transition: background var(--dur-base) var(--ease-out);
}
.gx-mobile-actions .gx-m-call { background: #e01a22; color: #ffffff; }
.gx-mobile-actions .gx-m-call:hover { background: #b3121a; }
.gx-mobile-actions .gx-m-menu { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #ffffff; }
.gx-mobile-actions .gx-m-menu:hover { background: rgba(255, 255, 255, .16); }
#gx-drawer {
  display: none; border-top: 1px solid rgba(255, 255, 255, .22);
  background: #011330; padding: 8px 18px 18px; flex-direction: column;
}
#gx-drawer.gx-open { display: flex; }
#gx-drawer a.gx-d-link {
  padding: 15px 2px; border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: "Montserrat", Arial, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .10em; color: #ffffff; text-transform: uppercase; text-decoration: none;
}
#gx-drawer a.gx-d-link:hover { color: #e01a22; }
#gx-drawer .gx-d-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
#gx-drawer .gx-d-cta a {
  height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 5px; font-family: "Montserrat", Arial, sans-serif; font-weight: 800;
  font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
}
#gx-drawer .gx-d-wa { background: #e01a22; color: #ffffff; }
#gx-drawer .gx-d-wa:hover { background: #b3121a; }
#gx-drawer .gx-d-call { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #ffffff; }
#gx-drawer .gx-d-call:hover { background: rgba(255, 255, 255, .16); }

@media (max-width: 939px) {
  .gx-desktop-nav { display: none !important; }
  .gx-mobile-actions { display: flex; }
}

/* ---------- responsive fixes the static build owns ----------
   The markup carries DESKTOP values inline; these queries restore the
   narrow-viewport behaviour that used to come from the JS `narrow` state. */
/* The stacked contact photo carries `display: block` inline (it came from the
   mobile branch of the original), so this needs !important to win on desktop. */
.gx-contact-photo-m { display: none !important; }

@media (max-width: 939px) {
  /* hero: re-crop to keep the mechanic visible, and deepen the wash */
  .gx-hero-img { object-position: 62% 22% !important; }
  .gx-hero-wash-x {
    background: linear-gradient(90deg, rgba(1, 19, 48, .86) 0%, rgba(1, 19, 48, .62) 45%, rgba(1, 19, 48, .34) 100%) !important;
  }
  .gx-hero-wash-y {
    background: linear-gradient(180deg, rgba(1, 19, 48, .28) 0%, rgba(1, 19, 48, .10) 22%, rgba(1, 19, 48, .62) 62%, #011330 100%) !important;
  }

  /* contact: 4-column band -> single centred column */
  .gx-contact-grid { grid-template-columns: 1fr !important; }
  .gx-contact-copy { grid-column: auto !important; }
  #contact { min-height: 0 !important; display: block !important; }
  .gx-contact-photo { display: none !important; }
  .gx-contact-photo-m { display: block !important; margin-left: auto !important; margin-right: auto !important; }

  /* payment: 40/60 split -> photo full-bleed behind stacked content */
  .gx-pay-photo { inset: 0 !important; }
  .gx-pay-overlay { background: linear-gradient(180deg, rgba(1, 19, 48, .86) 0%, rgba(1, 19, 48, .90) 100%) !important; }
  .gx-pay-inner { padding: clamp(44px, 8vw, 64px) 20px clamp(24px, 4vw, 32px) !important; }
  .gx-pay-col { padding-right: 0 !important; }
  .gx-pay-card {
    position: relative !important; right: auto !important; bottom: auto !important;
    width: 100% !important; margin: 0 auto !important;
    padding: 0 20px clamp(40px, 7vw, 64px) !important;
  }
  .gx-pay-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 12px !important; max-width: 340px !important;
  }
  .gx-pay-badges > div { border-left: none !important; }
}

@media (max-width: 700px) {
  /* No scroll-snap here — it fights the programmatic autoscroll and snaps back. */
  .gx-reviews-track { -webkit-overflow-scrolling: touch; }
}


/* ---------- print ---------- */
@media print {
  #gx-preloader, #gx-drawer, .gx-mobile-actions, [data-progress], .gx-sticky-wa { display: none !important; }
  header { position: static !important; }
}