@charset "UTF-8";
/* ==========================================================================
   SHARED SITE CHROME — header, navigation, footer, toasts
   Extracted from css/styles.css (homepage design) so the inner pages can use
   the SAME header and footer while keeping their own content styling from
   css/style.css + css/pages.css.

   LOAD ORDER on inner pages:  style.css -> pages.css -> site-chrome.css
   (this file must come LAST so its .site-header / .nav-toggle / .footer__*
   rules win over the older definitions in style.css)
   ========================================================================== */

/* --- Design tokens used by the chrome (names don't clash with style.css,
       except --border, whose two values are near-identical light greys) --- */

/* ==========================================================================
   01. Design tokens
   ========================================================================== */

:root {
  /* Brand palette */
  --navy: #142947;
  --navy-deep: #05152e;
  --navy-foreground: #fafcfe;

  /* Surfaces & text */
  --background: #f5f7fd;
  --foreground: #151411;
  --surface: #ffffff;
  --secondary: #e9edf7;
  --muted-foreground: #626975;

  /* Lines */
  --border: #d9dee8;
  --input: #d3d8e1;

  /* Translucent fills */
  --secondary-60: rgba(233, 237, 247, 0.6);
  --secondary-40: rgba(233, 237, 247, 0.4);
  --navy-20: rgba(20, 41, 71, 0.2);
  --navy-40: rgba(20, 41, 71, 0.4);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-30: rgba(255, 255, 255, 0.3);

  /* Radii */
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Elevation */
  --shadow-soft: 0 0.625rem 1.875rem -0.75rem rgba(20, 41, 71, 0.18);
  --shadow-card: 0 1.125rem 2.8125rem -1.25rem rgba(20, 41, 71, 0.35);

  /* Hairlines & pill radius — kept as tokens so the rem values stay in one place. */
  --hairline: 0.0625rem;
  --radius-pill: 62.5rem;

  /* Type */
  --font-sans: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================================

/* --- Container: match the homepage exactly (75rem / 1.25rem gutters).
       This file is loaded ONLY by the inner pages, so overriding .container
       here aligns their header, footer AND content with the homepage without
       touching index.html (which gets the same values from styles.css). --- */
.container {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ==========================================================================
   Header & navigation
   ========================================================================== */

/* ==========================================================================
   05. Header & navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-bar {
  background-color: var(--navy-deep);
  color: var(--navy-foreground);
}

.header-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.75rem;
}

.header-logo img {
  height: 2.75rem;
  width: auto;
}

/* Phone / email blocks — desktop only. */
.header-contact {
  display: none;
  align-items: center;
  gap: 2rem;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contact-link__icon {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--white-10);
}

.contact-link__icon svg {
  width: 1rem;
  height: 1rem;
}

.contact-link__text {
  line-height: 1.25;
}

.contact-link__label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

.contact-link__value {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Hamburger button — assets/js/main.js toggles .is-open on .nav-mobile. */
.nav-toggle {
  display: flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0.25rem;
  color: inherit;
}

.nav-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

.nav-desktop {
  display: none;
  border-top: var(--hairline) solid var(--white-10);
  background-color: var(--navy);
  color: var(--navy-foreground);
}

.nav-desktop__inner {
  display: flex;
  justify-content: flex-end;
  gap: 2.5rem;
  padding-block: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.nav-desktop a {
  transition: opacity 0.2s ease;
}

.nav-desktop a:hover {
  opacity: 0.7;
}

.nav-mobile {
  display: none;
  background-color: var(--navy);
  color: var(--navy-foreground);
}

.nav-mobile.is-open {
  display: block;
}

.nav-mobile__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.nav-mobile__phone {
  font-weight: 600;
}

/* ==========================================================================

/* ==========================================================================
   Footer
   ========================================================================== */

/* ==========================================================================
   19. Footer
   ========================================================================== */

.site-footer {
  background-color: var(--navy-deep);
  color: var(--navy-foreground);
}

.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 4rem;
}

.footer__cta h2 {
  max-width: 28rem;
  font-size: 1.875rem;
  color: var(--navy-foreground);
}

.footer__bottom {
  border-top: var(--hairline) solid var(--white-10);
}

.footer__bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem;
  font-size: 0.875rem;
}

.footer__logo {
  height: 2.25rem;
  width: auto;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0.8;
}

.footer__copy {
  opacity: 0.6;
}

/* ==========================================================================

/* ==========================================================================
   Toasts
   ========================================================================== */
   20. Toasts (shown by the inquiry form)
   ========================================================================== */

.toast-region {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  max-width: min(90vw, 26rem);
  border: var(--hairline) solid;
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--success {
  background-color: #e6fcec;
  border-color: #9ee0b4;
  color: #005e31;
}

.toast--error {
  background-color: #fdecec;
  border-color: #f3b4b4;
  color: #9b1c1c;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* ==========================================================================

/* ==========================================================================
   Responsive (chrome only)
   ========================================================================== */
@media (min-width: 48em){
  .header-logo img {
    height: 3.5rem;
  }
  .footer__cta {
    flex-direction: row;
    align-items: center;
  }
  .footer__cta h2 {
    font-size: 2.25rem;
  }
  .footer__bottom-inner {
    flex-direction: row;
  }
}
@media (min-width: 64em){
  .header-contact {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
  .nav-desktop {
    display: block;
  }
  .nav-mobile,
  .nav-mobile.is-open {
    display: none;
  }
}

/* ==========================================================================
   Chrome buttons — scoped to the header/footer so the inner pages' own
   .btn rules (from style.css) are left completely untouched.
   ========================================================================== */
.site-header .btn,
.site-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-md);
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-header .btn--outline-light,
.site-footer .btn--outline-light {
  border-color: var(--white-30);
  background-color: transparent;
  color: inherit;
  padding: 0.75rem 1.25rem;
}
.site-header .btn--outline-light:hover,
.site-footer .btn--outline-light:hover { background-color: var(--white-10); }

.site-header .btn--glass,
.site-footer .btn--glass {
  background-color: var(--white-15);
  color: var(--navy-foreground);
  padding-inline: 2.5rem;
}
.site-header .btn--glass:hover,
.site-footer .btn--glass:hover { background-color: var(--white-25); }

.site-header .btn__icon,
.site-footer .btn__icon { width: 1rem; height: 1rem; flex-shrink: 0; }