:root {
    --midnight: #0d1620;
    --night: #1d2a35;
    --steel: #4f6072;
    --sky: #d8ecff;
    --signal: #ff6a00;
    --signal-dark: #d65300;
    --signal-light: rgba(255, 106, 0, 0.12);
    --paper: #f8fbff;
    --white: #ffffff;
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: rgba(79, 96, 114, 0.14);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --shadow-sm: 0 4px 16px rgba(13, 22, 32, 0.07);
    --shadow-md: 0 10px 36px rgba(13, 22, 32, 0.1);
    --transition: 0.22s ease;
    --max-w: 1120px;
    --header-h: 64px;
  }

  /* ─── Reset & base ──────────────────────────────── */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: "Outfit", sans-serif;
    color: var(--midnight);
    background:
      radial-gradient(
        ellipse 70% 40% at 90% -5%,
        rgba(255, 106, 0, 0.1) 0%,
        transparent 60%
      ),
      radial-gradient(
        ellipse 60% 50% at -10% 35%,
        rgba(12, 113, 255, 0.1) 0%,
        transparent 60%
      ),
      linear-gradient(180deg, #f4f9ff 0%, #e8f2ff 100%);
    line-height: 1.65;
    min-height: 100dvh;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
  }

  /* ─── Sticky header ─────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(13, 22, 32, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.25rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--white);
    flex-shrink: 0;
  }

  .brand-icon {
    font-size: 1.35rem;
    line-height: 1;
  }

  .brand-name {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .header-nav {
    display: flex;
    gap: 1.4rem;
    margin-left: auto;
  }

  .header-nav a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color var(--transition);
    white-space: nowrap;
  }

  .header-nav a:hover {
    color: var(--white);
  }

  .header-cta {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
  }

  /* ─── Layout wrapper ────────────────────────────── */
  #main-content {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 1.25rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* ─── Sections ──────────────────────────────────── */
  section {
    padding: 2rem 2rem;
    background: var(--card-bg);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: rise-in 0.55s ease both;
  }

  /* ─── Typography ────────────────────────────────── */
  h1,
  h2,
  h3 {
    font-family: "Barlow Condensed", sans-serif;
    line-height: 1.05;
    letter-spacing: 0.02em;
  }

  h1 {
    font-size: clamp(2.4rem, 7vw, 4.8rem);
  }

  h2 {
    font-size: clamp(1.85rem, 4vw, 2.8rem);
    margin-bottom: 0.75rem;
  }

  h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    margin-bottom: 0.45rem;
  }

  p {
    max-width: 72ch;
  }

  .section-intro {
    font-size: 1.05rem;
    color: var(--steel);
    margin-bottom: 1.25rem;
    max-width: 72ch;
  }

  /* ─── Buttons ───────────────────────────────────── */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.75rem 1.4rem;
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
      transform var(--transition),
      box-shadow var(--transition),
      background-color var(--transition);
    white-space: nowrap;
  }

  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 106, 0, 0.3);
  }
  .button:active {
    transform: translateY(0);
  }

  .button.primary {
    background: var(--signal);
    color: var(--white);
  }
  .button.primary:hover {
    background: var(--signal-dark);
  }

  .button.ghost {
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--white);
  }
  .button.ghost:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .button.outline {
    border-color: var(--signal);
    color: var(--signal-dark);
    background: transparent;
  }
  .button.outline:hover {
    background: var(--signal-light);
  }

  .button.sm {
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
  }

  .cta-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .cta-row.center {
    justify-content: center;
  }

  /* ─── Hero ──────────────────────────────────────── */
  .hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d1620 0%, #1d2a35 52%, #7a2e00 100%);
    color: var(--white);
    min-height: 480px;
    display: flex;
    align-items: center;
    padding: 3rem 2.5rem;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
  }

  /* Decorative orange glow */
  .hero::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -20%;
    width: 55%;
    height: 130%;
    background: radial-gradient(
      ellipse,
      rgba(255, 106, 0, 0.22) 0%,
      transparent 65%
    );
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
  }

  .eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--signal);
    background: rgba(255, 106, 0, 0.15);
    border: 1px solid rgba(255, 106, 0, 0.3);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    margin-bottom: 0.9rem;
  }

  .hero h1 {
    margin-bottom: 0.6rem;
  }

  .lead {
    font-size: 1.1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    margin: 0.8rem 0 0.7rem;
    max-width: 58ch;
  }

  .supporting-copy {
    font-size: 0.97rem;
    color: rgba(255, 255, 255, 0.72);
    max-width: 62ch;
    margin-bottom: 1.4rem;
  }

  .quick-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin: 1rem 0 1rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.8);
  }

  .quick-points li::before {
    content: "✓ ";
    color: var(--signal);
    font-weight: 700;
  }

  .trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
  }

  .trust-badges span {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
  }

  /* ─── Services cards ────────────────────────────── */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 0.25rem;
  }

  .cards article {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, #ffffff 0%, #edf4ff 100%);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--transition),
      box-shadow var(--transition);
  }

  .cards article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }

  .service-icon {
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
    line-height: 1;
  }

  /* ─── Why us ────────────────────────────────────── */
  .reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 0.25rem;
  }

  .reasons > div {
    padding: 1.25rem 1.25rem 1.25rem 1.4rem;
    border-left: 4px solid var(--signal);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: linear-gradient(
      135deg,
      rgba(216, 236, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.9) 100%
    );
    box-shadow: var(--shadow-sm);
  }

  /* ─── How it works ──────────────────────────────── */
  .how-it-works {
    background: linear-gradient(135deg, #0d1620 0%, #1d2a35 100%);
    color: var(--white);
  }
  .how-it-works h2,
  .how-it-works .section-intro {
    color: var(--white);
  }
  .how-it-works .section-intro {
    color: rgba(255, 255, 255, 0.72);
  }

  .steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
    counter-reset: steps;
  }

  .steps li {
    padding: 1.4rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    counter-increment: steps;
    position: relative;
    padding-top: 2.8rem;
  }

  .steps li::before {
    content: counter(steps);
    position: absolute;
    top: 1rem;
    left: 1.4rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--signal);
    color: var(--white);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .steps h3 {
    color: var(--white);
    margin-bottom: 0.4rem;
  }
  .steps p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    max-width: none;
  }

  /* ─── Service area ──────────────────────────────── */
  .area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .area-tags span {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(13, 22, 32, 0.07);
    border: 1px solid rgba(13, 22, 32, 0.09);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--night);
    transition: background var(--transition);
  }

  .area-tags span:hover {
    background: rgba(13, 22, 32, 0.14);
  }

  /* ─── Local pages ───────────────────────────────── */
  .region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
  }

  .region-card {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
  }

  .region-card h3 {
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
  }

  .location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
  }

  .location-card {
    display: block;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    background: rgba(13, 22, 32, 0.05);
    border: 1px solid var(--card-border);
    color: var(--midnight);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    transition:
      transform var(--transition),
      background var(--transition),
      box-shadow var(--transition);
  }

  .location-card:hover {
    transform: translateY(-2px);
    background: rgba(216, 236, 255, 0.8);
    box-shadow: 0 6px 18px rgba(13, 22, 32, 0.08);
  }

  .section-actions {
    margin-top: 1.25rem;
  }

  /* ─── FAQ ───────────────────────────────────────── */
  .faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 0.25rem;
  }

  .faq article {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, #ffffff 0%, #edf4ff 100%);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
  }

  .faq article h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--night);
  }
  .faq article p {
    font-size: 0.95rem;
    color: var(--steel);
    max-width: none;
  }

  /* ─── Contact CTA ───────────────────────────────── */
  .contact {
    text-align: center;
    background: linear-gradient(145deg, #0d1620 0%, #22364a 60%, #2d4d68 100%);
    color: var(--white);
    padding: 3rem 2rem;
  }

  .contact h2 {
    color: var(--white);
    margin-bottom: 0.75rem;
  }
  .contact p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0 auto 0.6rem;
  }
  .contact .button.ghost {
    border-color: rgba(255, 255, 255, 0.6);
  }

  /* ─── Site footer ───────────────────────────────── */
  .site-footer {
    background: var(--midnight);
    color: rgba(255, 255, 255, 0.65);
    padding: 2rem 1.25rem 1.25rem;
    margin-top: 0.5rem;
  }

  .footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .footer-brand .brand-icon {
    font-size: 1.6rem;
  }
  .footer-brand strong {
    color: var(--white);
    font-size: 1.1rem;
  }
  .footer-brand p {
    font-size: 0.88rem;
    margin: 0;
  }

  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .footer-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition);
  }

  .footer-nav a:hover {
    color: var(--white);
  }

  .footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }

  .footer-phone {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    text-decoration: none;
  }

  .footer-legal {
    max-width: var(--max-w);
    margin: 1rem auto 0;
    font-size: 0.82rem;
    text-align: center;
  }

  .footer-legal a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: underline;
  }

  /* ─── Animations ────────────────────────────────── */
  @keyframes rise-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ─── Hamburger / mobile nav ────────────────────── */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
    margin-left: 0.25rem;
  }

  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    transition:
      transform 0.22s ease,
      opacity 0.22s ease;
  }

  .site-header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .site-header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-nav {
    display: none;
    flex-direction: column;
    background: rgba(13, 22, 32, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem 1.25rem 1.25rem;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .mobile-nav a:not(.button) {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: block;
    transition: color var(--transition);
  }

  .mobile-nav a:not(.button):hover {
    color: var(--white);
  }

  .mobile-cta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .mobile-cta .button.ghost {
    border-color: rgba(255, 255, 255, 0.55);
  }

  .site-header.nav-open .mobile-nav {
    display: flex;
  }

  /* ─── Responsive breakpoints ────────────────────── */

  /* Tablet: hide full nav, show hamburger */
  @media (max-width: 860px) {
    .header-nav {
      display: none;
    }
    .header-cta .header-call {
      display: none;
    }
    .nav-toggle {
      display: flex;
    }
  }

  /* Mobile */
  @media (max-width: 600px) {
    :root {
      --header-h: 56px;
    }

    #main-content {
      padding: 0.75rem 0.75rem 1.5rem;
      gap: 0.85rem;
    }

    section {
      padding: 1.4rem 1.2rem;
    }

    .hero {
      padding: 2rem 1.4rem;
      min-height: 420px;
    }

    .cta-row {
      flex-direction: column;
    }
    .cta-row .button {
      width: 100%;
      text-align: center;
    }

    .cards,
    .reasons,
    .faq-grid,
    .steps {
      grid-template-columns: 1fr;
    }

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

    .trust-badges {
      gap: 0.4rem;
    }
    .trust-badges span {
      font-size: 0.78rem;
    }

    .footer-inner {
      flex-direction: column;
      gap: 1.25rem;
    }
    .footer-contact {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }
  }

  /* Small phones */
  @media (max-width: 380px) {
    .brand-name {
      font-size: 1.05rem;
    }
    .button.sm {
      padding: 0.45rem 0.85rem;
      font-size: 0.82rem;
    }
    .header-cta .button.primary {
      padding: 0.4rem 0.75rem;
      font-size: 0.8rem;
    }
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
	html { scroll-behavior: smooth; }

	body {
		font-family: "Outfit", sans-serif;
		color: var(--midnight);
		background:
			radial-gradient(ellipse 70% 40% at 90% -5%, rgba(255,106,0,0.10) 0%, transparent 60%),
			radial-gradient(ellipse 60% 50% at -10% 35%, rgba(12,113,255,0.10) 0%, transparent 60%),
			linear-gradient(180deg, #f4f9ff 0%, #e8f2ff 100%);
		line-height: 1.65;
		min-height: 100dvh;
	}

	a { color: inherit; }

	/* ─── Sticky header ─────────────────────────────── */
	
	.header-inner {
		max-width: var(--max-w);
		margin: 0 auto;
		padding: 0 1.25rem;
		height: 100%;
		display: flex;
		align-items: center;
		gap: 1.5rem;
	}

	.brand {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		text-decoration: none;
		color: var(--white);
		flex-shrink: 0;
	}

	.brand-icon { font-size: 1.35rem; line-height: 1; }

	.brand-name {
		font-family: "Barlow Condensed", sans-serif;
		font-size: 1.3rem;
		font-weight: 700;
		letter-spacing: 0.03em;
		white-space: nowrap;
	}

	.header-nav {
		display: flex;
		gap: 1.4rem;
		margin-left: auto;
	}

	.header-nav a {
		color: rgba(255,255,255,0.80);
		text-decoration: none;
		font-size: 0.92rem;
		font-weight: 500;
		transition: color var(--transition);
		white-space: nowrap;
	}

	.header-nav a:hover { color: var(--white); }

	.header-cta { display: flex; gap: 0.6rem; flex-shrink: 0; }

	/* ─── Layout ────────────────────────────────────── */
	#main-content {
		max-width: var(--max-w);
		margin: 0 auto;
		padding: 0.75rem 1.25rem 2rem;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	section {
		padding: 2rem;
		background: var(--card-bg);
		backdrop-filter: blur(4px);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-md);
		animation: rise-in 0.55s ease both;
	}

	/* ─── Breadcrumbs ───────────────────────────────── */
	.breadcrumbs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		align-items: center;
		padding: 0.6rem 0 0.2rem;
		font-size: 0.9rem;
		color: var(--steel);
	}

	.breadcrumbs a { color: var(--night); text-decoration: none; }
	.breadcrumbs a:hover { text-decoration: underline; }

	/* ─── Typography ────────────────────────────────── */
	h1, h2, h3 {
		font-family: "Barlow Condensed", sans-serif;
		line-height: 1.05;
		letter-spacing: 0.02em;
	}

	h1 { font-size: clamp(2.2rem, 6.5vw, 4rem); }
	h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 0.75rem; }
	h3 { font-size: clamp(1.15rem, 2.5vw, 1.45rem); margin-bottom: 0.45rem; }
	p { max-width: 72ch; }

	.section-intro {
		font-size: 1.05rem;
		color: var(--steel);
		margin-bottom: 1.25rem;
	}

	/* ─── Buttons ───────────────────────────────────── */
	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.75rem 1.4rem;
		font-family: "Outfit", sans-serif;
		font-weight: 700;
		font-size: 1rem;
		text-decoration: none;
		border-radius: 999px;
		border: 2px solid transparent;
		cursor: pointer;
		transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
		white-space: nowrap;
	}

	.button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,106,0,0.28); }
	.button.primary { background: var(--signal); color: var(--white); }
	.button.primary:hover { background: var(--signal-dark); }
	.button.ghost { border-color: rgba(255,255,255,0.55); color: var(--white); }
	.button.ghost:hover { background: rgba(255,255,255,0.10); }
	.button.sm { padding: 0.5rem 1rem; font-size: 0.88rem; }

	.cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
	.cta-row.center { justify-content: center; }


	.hero::after {
		content: "";
		position: absolute;
		right: -10%;
		top: -20%;
		width: 55%;
		height: 130%;
		background: radial-gradient(ellipse, rgba(255,106,0,0.20) 0%, transparent 65%);
		pointer-events: none;
	}

	.hero-overlay {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
			linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
		background-size: 28px 28px;
		pointer-events: none;
	}

	.hero-content {
		position: relative;
		z-index: 1;
		max-width: 680px;
	}

	.eyebrow {
		display: inline-block;
		font-size: 0.75rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		font-weight: 600;
		color: var(--signal);
		background: rgba(255,106,0,0.15);
		border: 1px solid rgba(255,106,0,0.3);
		border-radius: 999px;
		padding: 0.25rem 0.85rem;
		margin-bottom: 0.9rem;
	}

	.hero h1 { margin-bottom: 0.6rem; }

	.lead {
		font-size: 1.05rem;
		color: rgba(255,255,255,0.88);
		margin: 0.8rem 0 0.7rem;
		max-width: 56ch;
		line-height: 1.7;
	}

	.supporting-copy {
		font-size: 0.96rem;
		color: rgba(255,255,255,0.70);
		max-width: 60ch;
		margin-bottom: 1.4rem;
	}

	/* ─── Cards / Reasons ───────────────────────────── */
	.cards, .reasons, .faq-grid {
		display: grid;
		gap: 1rem;
		margin-top: 0.25rem;
	}

	.cards, .faq-grid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}

	.reasons {
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	}

	.cards article, .faq article {
		padding: 1.25rem;
		border-radius: var(--radius-md);
		background: linear-gradient(160deg, #ffffff 0%, #edf4ff 100%);
		border: 1px solid var(--card-border);
		box-shadow: var(--shadow-sm);
		transition: transform var(--transition), box-shadow var(--transition);
	}

	.cards article:hover, .faq article:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-md);
	}

	.reasons > div {
		padding: 1.25rem 1.25rem 1.25rem 1.4rem;
		border-left: 4px solid var(--signal);
		border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
		background: linear-gradient(135deg, rgba(216,236,255,0.5) 0%, rgba(255,255,255,0.9) 100%);
		box-shadow: var(--shadow-sm);
	}

	/* ─── Nearby links ──────────────────────────────── */
	.nearby-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-top: 0.75rem;
	}

	.nearby-links a {
		padding: 0.45rem 1rem;
		border-radius: 999px;
		background: rgba(13,22,32,0.07);
		border: 1px solid rgba(13,22,32,0.09);
		font-size: 0.88rem;
		font-weight: 600;
		text-decoration: none;
		color: var(--night);
		transition: background var(--transition);
	}

	.nearby-links a:hover { background: rgba(216,236,255,0.9); }

	/* ─── FAQ ───────────────────────────────────────── */
	.faq article h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--night); }
	.faq article p { font-size: 0.95rem; color: var(--steel); max-width: none; }

	/* ─── Contact CTA ───────────────────────────────── */
	.contact {
		text-align: center;
		background: linear-gradient(145deg, #0d1620 0%, #22364a 60%, #2d4d68 100%);
		color: var(--white);
		padding: 3rem 2rem;
	}

	.contact h2 { color: var(--white); margin-bottom: 0.75rem; }
	.contact p { color: rgba(255,255,255,0.78); margin: 0 auto 0.6rem; }
	.contact .button.ghost { border-color: rgba(255,255,255,0.6); }

	/* ─── Footer ────────────────────────────────────── */
	.site-footer {
		background: var(--midnight);
		color: rgba(255,255,255,0.65);
		padding: 2rem 1.25rem 1.25rem;
	}

	.footer-inner {
		max-width: var(--max-w);
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem 2.5rem;
		align-items: flex-start;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}

	.footer-brand { display: flex; flex-direction: column; gap: 0.3rem; }
	.footer-brand .brand-icon { font-size: 1.6rem; }
	.footer-brand strong { color: var(--white); font-size: 1.1rem; }
	.footer-brand p { font-size: 0.88rem; margin: 0; }

	.footer-nav { display: flex; flex-direction: column; gap: 0.45rem; }
	.footer-nav a { color: rgba(255,255,255,0.70); text-decoration: none; font-size: 0.9rem; transition: color var(--transition); }
	.footer-nav a:hover { color: var(--white); }

	.footer-contact { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
	.footer-phone { color: rgba(255,255,255,0.70); font-size: 0.95rem; text-decoration: none; }

	.footer-legal {
		max-width: var(--max-w);
		margin: 1rem auto 0;
		font-size: 0.82rem;
		text-align: center;
	}

	.footer-legal a { color: rgba(255,255,255,0.55); text-decoration: underline; }

	/* ─── Animation ─────────────────────────────────── */
	@keyframes rise-in {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* ─── Hamburger / mobile nav ────────────────────── */
	.nav-toggle {
		display: none;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 6px;
		flex-shrink: 0;
		margin-left: 0.25rem;
	}

	.nav-toggle span {
		display: block;
		width: 22px;
		height: 2px;
		background: rgba(255,255,255,0.85);
		border-radius: 2px;
		transition: transform 0.22s ease, opacity 0.22s ease;
	}

	
	.mobile-nav {
		display: none;
		flex-direction: column;
		background: rgba(13,22,32,0.98);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid rgba(255,255,255,0.08);
		padding: 0.75rem 1.25rem 1.25rem;
		position: absolute;
		top: var(--header-h);
		left: 0;
		right: 0;
		box-shadow: 0 8px 32px rgba(0,0,0,0.30);
	}

	.mobile-nav a:not(.button) {
		color: rgba(255,255,255,0.82);
		text-decoration: none;
		font-size: 1rem;
		font-weight: 500;
		padding: 0.75rem 0;
		border-bottom: 1px solid rgba(255,255,255,0.07);
		display: block;
		transition: color var(--transition);
	}

	.mobile-nav a:not(.button):hover { color: var(--white); }

	.mobile-cta {
		display: flex;
		gap: 0.75rem;
		flex-wrap: wrap;
		margin-top: 1rem;
	}

	.mobile-cta .button.ghost { border-color: rgba(255,255,255,0.55); }

	/* ─── Responsive ───────────────────────────────── */
	@media (max-width: 860px) {
		.header-nav { display: none; }
		.header-cta .header-call { display: none; }
		.nav-toggle { display: flex; }
	}

	@media (max-width: 600px) {
		:root { --header-h: 56px; }
		#main-content { padding: 0.5rem 0.75rem 1.5rem; gap: 0.85rem; }
		section { padding: 1.4rem 1.2rem; }
		.hero { padding: 2rem 1.4rem; min-height: 340px; }
		.cta-row { flex-direction: column; }
		.cta-row .button { width: 100%; }
		.cards, .reasons, .faq-grid { grid-template-columns: 1fr; }
		.footer-inner { flex-direction: column; gap: 1.25rem; }
		.footer-contact { flex-direction: row; flex-wrap: wrap; align-items: center; }
	}

	@media (max-width: 380px) {
		.brand-name { font-size: 1.05rem; }
		.button.sm { padding: 0.45rem 0.85rem; font-size: 0.82rem; }
		.header-cta .button.primary { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
	}