:root {
  /* Brand palette sampled from the Regal Automotive logo:
     navy #121D55 field, gold crest, white wordmark. */
  --bg: #f4f6fc;
  --bg-strong: #e7ebf7;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: #ffffff;
  --surface-dark: rgba(12, 20, 64, 0.82);
  --ink: #101736;
  --ink-soft: #55608c;
  --line: rgba(18, 29, 85, 0.14);
  --line-strong: rgba(18, 29, 85, 0.24);
  --primary: #121d55;
  --primary-strong: #0c1440;
  --primary-soft: #1c2a6e;
  --accent: #f7e12e;
  --accent-strong: #c9a227;
  --accent-soft: #fff3a0;
  --dark: #0c1440;
  --dark-soft: #121d55;
  --white: #ffffff;
  --success: #0f9d58;
  --danger: #b42318;
  --shadow-sm: 0 18px 50px rgba(18, 29, 85, 0.10);
  --shadow-md: 0 24px 60px rgba(18, 29, 85, 0.14);
  --shadow-lg: 0 40px 90px rgba(12, 20, 64, 0.22);
  --radius-sm: 0.8rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --max-width: 1180px;
  --font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(247, 225, 46, 0.16), transparent 18rem),
    radial-gradient(circle at top left, rgba(28, 42, 110, 0.14), transparent 22rem),
    linear-gradient(180deg, #fafbff 0%, var(--bg) 100%);
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
ul,
ol {
  margin-top: 0;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(2.6rem, 7vw, 5.25rem);
}

h2 {
  font-size: clamp(1.95rem, 4vw, 3.15rem);
}

h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
}

.container {
  width: min(calc(100% - 2rem), var(--max-width));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 1000;
  background: var(--dark);
  color: var(--white);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 220;
  border-bottom: 1px solid transparent;
  background: rgba(250, 251, 255, 0.72);
  backdrop-filter: blur(18px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.site-header.is-scrolled {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, 0.92);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 5.4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
}

.logo {
  height: 60px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  /* The logo tile carries its own navy field, so round it into a chip
     and edge it in gold rather than letting it sit as a hard square. */
  border-radius: 0.85rem;
  box-shadow: 0 0 0 1px rgba(247, 225, 46, 0.3);
}

.brand-text {
  display: grid;
  gap: 0.15rem;
  line-height: 1.1;
}

.brand-text strong {
  font-size: 1rem;
  color: var(--primary-strong);
}

.brand-text span {
  color: var(--ink-soft);
  font-size: 0.87rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-nav a {
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.35rem 0;
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--primary-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
  color: var(--primary-strong);
}

.menu-toggle {
  display: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.65rem;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 0.3rem 0;
  background: var(--primary-strong);
}

.hero-section,
.page-hero {
  position: relative;
  overflow: clip;
  padding: clamp(5rem, 10vw, 8rem) 0 var(--space-7);
}

.home-page .hero-section::before,
.home-page .hero-section::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.home-page .hero-section::before {
  top: -6rem;
  right: -10rem;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, rgba(247, 225, 46, 0.3), rgba(247, 225, 46, 0) 68%);
  animation: floatOrb 10s ease-in-out infinite;
}

.home-page .hero-section::after {
  left: -7rem;
  bottom: -8rem;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(28, 42, 110, 0.2), rgba(28, 42, 110, 0) 68%);
  animation: floatOrb 12s ease-in-out infinite reverse;
}

.hero-grid,
.two-column,
.about-preview,
.contact-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.hero-grid {
  grid-template-columns: 1.2fr 0.95fr;
}

.hero-copy {
  max-width: 42rem;
}

.eyebrow,
.panel-label,
.feature-label {
  display: inline-block;
  margin-bottom: var(--space-3);
  /* Brand gold is too light to carry text on a light surface, so on light
     backgrounds the label reads navy and the gold moves to the underline. */
  color: var(--primary);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.3rem;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-intro,
.section-heading p,
.page-hero p {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 46rem;
}

.hero-actions,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: var(--space-4) 0;
}

.hero-actions.stacked {
  flex-direction: column;
  align-items: stretch;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  padding: 0.8rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.button-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-soft));
  color: var(--white);
}

.button-secondary {
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,248,255,0.92));
  color: var(--primary-strong);
  border-color: rgba(18, 29, 85, 0.1);
}

.button-ghost {
  background: rgba(247, 225, 46, 0.12);
  color: var(--primary-strong);
  border-color: rgba(247, 225, 46, 0.55);
}

.button-light {
  background: var(--white);
  color: var(--primary-strong);
}

/* On navy surfaces a navy CTA disappears, so the primary button flips to
   the crest gold with navy text — the logo's own pairing. */
.section-dark .button-primary,
.cta-banner .button-primary {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  color: var(--primary-strong);
}

.hero-proof,
.check-list,
.detail-list,
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-proof {
  display: grid;
  gap: 0.8rem;
  color: var(--ink);
  font-weight: 700;
}

.hero-proof li,
.check-list li {
  position: relative;
  padding-left: 1.55rem;
}

.hero-proof li::before,
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 0 0 5px rgba(247, 225, 46, 0.16);
}

.feature-card,
.content-panel,
.contact-callout,
.contact-form,
.service-card,
.image-card,
.cta-banner,
.testimonial-card {
  background: var(--surface);
  border: 1px solid rgba(18, 29, 85, 0.09);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}

.feature-card,
.content-panel,
.contact-callout,
.contact-form,
.service-card,
.cta-banner,
.testimonial-card {
  padding: clamp(1.5rem, 4vw, 2rem);
}

.feature-card {
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.24) 45%, transparent 70%);
  transform: translateX(-120%);
  animation: sheen 6.8s ease-in-out infinite;
}

.feature-grid,
.card-grid,
.footer-grid {
  display: grid;
  gap: var(--space-4);
}

.feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-4);
}

.feature-grid strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--primary-strong);
}

.image-card {
  overflow: hidden;
  padding: 0;
}

.image-card img {
  display: block;
  width: 100%;
  height: auto;
  /* Photos are a mix of landscape and portrait; pin every card to the same
     3:2 frame and crop to fill so neither orientation stretches or overflows. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.image-card:hover img {
  transform: scale(1.03);
}

.service-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover,
.content-panel:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(247, 225, 46, 0.5);
}

.service-card p,
.content-panel p,
.feature-card p,
.contact-callout p,
.detail-list,
.footer-list,
.form-heading p,
.testimonial-card p {
  color: var(--ink-soft);
}

.section {
  position: relative;
  padding: var(--space-7) 0;
}

.services-overview {
  padding-top: var(--space-6);
}

.section-dark {
  background:
    radial-gradient(circle at top right, rgba(247, 225, 46, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(12, 20, 64, 1), rgba(28, 42, 110, 0.96));
  color: var(--white);
}

.section-dark .eyebrow,
.section-dark .panel-label,
/* .panel-label is a <p>, so it needs to outrank `.section-dark .content-panel p`
   below or the label loses its gold and renders as plain body white. */
.section-dark .content-panel .panel-label {
  /* Full-strength gold is legible here because the surface is navy. */
  color: var(--accent);
  border-bottom-color: rgba(247, 225, 46, 0.55);
}

.section-dark .service-card,
.section-dark .content-panel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.section-dark .service-card p,
.section-dark .content-panel p,
.section-dark .check-list,
.section-dark .feature-list p {
  color: rgba(255, 255, 255, 0.82);
}

.section-dark .service-card h2,
.section-dark .service-card h3,
.section-dark .content-panel h3,
.section-dark .feature-list h3 {
  color: var(--white);
}

.section-accent {
  background:
    linear-gradient(135deg, rgba(247, 225, 46, 0.14), rgba(28, 42, 110, 0.08)),
    linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.45));
}

.section-heading {
  margin-bottom: var(--space-5);
}

.card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* With an odd number of cards the last one would sit alone in column 1 and
   leave a hole in column 2. Let it span the row instead. `.three-up` is
   excluded because three cards there fill the row exactly. */
.card-grid:not(.three-up) > .service-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.service-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.service-card-header h2,
.service-card-header h3 {
  margin-bottom: 0;
}

.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(18, 29, 85, 0.12), rgba(247, 225, 46, 0.22));
  color: var(--primary-strong);
  box-shadow: inset 0 0 0 1px rgba(18, 29, 85, 0.08);
  flex: 0 0 auto;
}

.service-card-icon svg {
  width: 1.45rem;
  height: 1.45rem;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.service-card-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--primary-soft);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.service-card-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
}

.service-card-list li {
  color: var(--ink);
  font-weight: 600;
}

.service-card a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  color: var(--primary-strong);
}

.service-card a:hover,
.service-card a:focus-visible {
  color: var(--primary);
}

.section-dark .service-card-icon {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(247, 225, 46, 0.16));
  color: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.section-dark .service-card-label {
  color: var(--accent);
}

.section-dark .service-card-list li {
  color: var(--white);
}

.feature-list,
.detail-list,
.footer-list {
  display: grid;
  gap: 0.7rem;
}

.about-preview,
.two-column,
.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-stack {
  display: grid;
  gap: var(--space-4);
}

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background: linear-gradient(135deg, rgba(18, 29, 85, 0.97), rgba(28, 42, 110, 0.9));
  color: var(--white);
}

.cta-banner .eyebrow,
.cta-banner p {
  color: rgba(255, 255, 255, 0.84);
}

.cta-banner .eyebrow {
  border-bottom-color: rgba(247, 225, 46, 0.55);
}

.cta-banner .button-secondary {
  border-color: rgba(255, 255, 255, 0.22);
}

.map-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 24rem;
}

.map-wrapper iframe {
  display: block;
  width: 100%;
  min-height: 24rem;
  border: 0;
}

.contact-grid {
  align-items: start;
}

.contact-details {
  margin-top: var(--space-4);
}

.contact-form {
  background: rgba(255, 255, 255, 0.95);
}

.form-row {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

label {
  font-weight: 700;
  color: var(--primary-strong);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(18, 29, 85, 0.15);
  border-radius: 1rem;
  background: #fbfcff;
  padding: 0.9rem 1rem;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(201, 162, 39, 0.9);
  box-shadow: 0 0 0 4px rgba(247, 225, 46, 0.22);
}

textarea {
  resize: vertical;
}

.checkbox-row {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.checkbox-row input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
}

.form-row-hidden {
  display: none;
}

.form-status {
  min-height: 1.5rem;
  margin-bottom: 0;
  font-weight: 600;
}

.form-status.is-success {
  color: var(--success);
}

.form-status.is-error {
  color: var(--danger);
}

.field-error {
  border-color: rgba(180, 35, 24, 0.5);
}

.site-footer {
  background:
    radial-gradient(circle at top right, rgba(247, 225, 46, 0.16), transparent 16rem),
    linear-gradient(180deg, var(--dark-soft), var(--dark));
  color: var(--white);
  padding: var(--space-7) 0 var(--space-4);
}

.footer-grid {
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  align-items: start;
}

.brand-footer {
  margin-bottom: var(--space-3);
}

.site-footer .brand-text strong {
  color: var(--white);
}

.site-footer .brand-text span,
.site-footer p,
.site-footer li,
.site-footer a,
.footer-list {
  color: rgba(255, 255, 255, 0.78);
}

.site-footer h2 {
  font-size: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0;
}

.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Reveal animations are opt-in, not opt-out.
   Content is visible by default so that a JavaScript failure, a blocked
   script or a stale cached bundle can never leave the page blank. The
   .js-ready class is added to <html> by a small inline script in the
   head, and removed again by a failsafe timer if main.js never starts. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Final safety net. Making content visible via a transition means that if
   the transition never runs - throttled background tab, bfcache restore,
   battery saver, all far more aggressive on phones - the element stays
   frozen at its start value and is invisible for good. main.js adds
   .reveal-done once the fade has had time to finish, which lands the
   element on its final state with no transition involved. */
.js-ready .reveal.reveal-done {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.js-ready .home-page .hero-copy.reveal.is-visible {
  animation: heroRise 0.9s ease both;
}

.js-ready .home-page .hero-panel.reveal.is-visible {
  animation: heroPanelIn 1s ease both;
}

:focus-visible {
  outline: 3px solid rgba(247, 225, 46, 0.7);
  outline-offset: 3px;
}

@keyframes floatOrb {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 16px, 0); }
}

@keyframes sheen {
  0%,
  100% { transform: translateX(-120%); }
  45%,
  55% { transform: translateX(120%); }
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroPanelIn {
  from { opacity: 0; transform: translate3d(18px, 22px, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 980px) {
  .menu-toggle {
    display: inline-block;
  }

  /* The dropdown nav can only be opened by main.js, so it is hidden only
     once JS has confirmed it is running. Without that confirmation the
     toggle button is removed and the nav renders as a plain inline row,
     otherwise a script failure leaves the phone with no navigation. */
  html:not(.js-ready) .menu-toggle {
    display: none;
  }

  html:not(.js-ready) .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  html:not(.js-ready) .site-nav > a {
    width: auto;
    padding: 0.35rem 0;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 1rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-lg);
  }

  .site-nav > a {
    width: 100%;
    padding: 0.7rem 0;
  }

  .site-nav.is-open {
    display: flex;
  }

  .hero-grid,
  .two-column,
  .about-preview,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid,
  .card-grid,
  .card-grid.three-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .logo {
    height: 45px;
  }

  .hero-section,
  .page-hero,
  .section,
  .site-footer {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .hero-actions,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .footer-grid,
  .card-grid,
  .card-grid.three-up {
    grid-template-columns: 1fr;
  }

  .service-card-header {
    gap: 0.8rem;
  }

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-ready .reveal,
  .reveal {
    opacity: 1;
    transform: none;
  }
}