/*
 * Global styles for MapleKind Home Care
 *
 * This file consolidates all CSS used throughout the website into a single
 * stylesheet. It includes shared variables, reset rules, navbar styles,
 * component styles, and page‑specific overrides. To add page specific
 * styling, prefix selectors with `.page-xxx` where `xxx` is the page name
 * (e.g., `.page-home` for the home page).
 */

/* HEADER + NAV */

/*
 * .nav-logo
 *
 * Defines the styling for the site logo when it is embedded directly
 * inside the navigation bar.  This ensures the logo aligns with
 * the toggle button and scales responsively based on device width.
 */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
@media (max-width: 1000px) {
  .nav-logo img {
    width: 40px;
    height: 40px;
  }
}

.site-logo {
  position: fixed;
  /* Respect safe-area insets and add margin from the top/left edges */
  top: calc(1.5rem + env(safe-area-inset-left));;
  left: calc(1.5rem + env(safe-area-inset-left));
  z-index: 1203;
  display: block;
}
.site-logo img {
  /* Set the logo height to be approximately twice the nav bar height.  Use
     a flexible unit so the logo scales on very small screens. */
  height: 96px;
  width: auto;
}
.site-logo{
  transition: opacity .3s ease, transform .3s ease;
}
.site-logo.hide{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-30px) scale(.98);
}
@media (max-width: 700px) {
  .site-logo img {
    height: 80px;
  }
}

/* NavBar - modern rectangular, not rounded, fades out on scroll */
/*
 * Primary navigation bar styles
 *
 * To achieve the same translucent look used on the job application page across
 * all informational pages, the navbar itself no longer provides a solid
 * background or pronounced drop shadow. Instead, its backdrop and subtle
 * separation are provided by the underlying `.navbar-bg` element and a very
 * slight border. By keeping the navbar transparent the abstract page
 * background shines through, preventing the “white bar” effect seen on
 * earlier pages.
 */
.navbar {
  position: fixed;
  left: 0;
  top: 30px; /* Move navbar further down */
  width: 80vw;
  min-height: 50px;
  z-index: 1100;
  /* Remove any opaque white fill; rely on the blurred backdrop */
  background: transparent;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  /* Light border to delineate the nav bar without adding a heavy shadow */
  border-bottom: 1px solid rgba(7, 6, 6, 0.12);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, transform 0.3s;
}

/* Ensure the header container establishes a positioning context for the optional navbar background */
.header-container {
  position: relative;
  width: 100%;
  /* Apply safe area padding so that content inside the header
     container, such as the navbar, respects notches and corner
     cutouts.  The max() ensures at least 0px of padding on
     devices without safe‑areas. */
  padding-top: max(0px, env(safe-area-inset-top));
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
.navbar.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-30px) scale(.98);
}

/*
 * Optional background layer for the navigation bar. When present in the
 * markup, this layer provides an abstract backdrop behind the translucent
 * navbar. It is positioned beneath the navbar and fills the viewport.
 */
.navbar-bg {
  background: url('assets/abstract_background.png') center/cover no-repeat fixed;
  background-blend-mode: lighten;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 700px) {
  .navbar {
    left: 0;
    max-width: 1080px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
  }
}
.nav-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.6rem 1.2rem;
  display: flex;
  align-items: center;
  /* Space items (logo, nav links, toggle) evenly across the
     horizontal row.  This ensures the logo stays at the left,
     the toggle sits on the right and the nav links fill the
     available space in between on larger screens. */
  justify-content: center;
  gap: 1.2rem;
}
/* Provide extra top margin to prevent overlap between the fixed header and page content */
.main-content-spacer {
  margin-top: 132px; /* Match header/nav height and allow breathing room */
}
@media (max-width: 700px) {
  .main-content-spacer {
    /* Increase mobile spacer slightly as well */
    margin-top: 102px;
  }
}
/* Mission & Vision Flex Layout */
.mv-flex {
  display: flex;
  gap: 2.2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}

/*
 * Mission & Vision cards
 *
 * These definitions provide a consistent carded look for the Mission and Vision
 * panels on the About page. By specifying background, border radius and shadow
 * here, the cards retain their original glass‑like feel even if the page‑level
 * class is missing.
 */
.mv-card {
  background: rgba(245, 249, 255, 0.91);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(32, 100, 220, 0.04);
  flex: 1 1 320px;
  min-width: 260px;
  max-width: 480px;
  padding: 32px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
}
.mv-card h4 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 0.4rem 0;
  color: var(--cerulean-blue);
}
.mv-card p {
  font-size: 1.13rem;
  color: #444d60;
}
:root {
  /*
   * Colour palette
   *
   * The primary blue has been darkened slightly to increase contrast against
   * light backgrounds, improving readability of headings and buttons. The
   * accent gold has been deepened to a richer bronze tone for greater
   * distinction from surrounding elements. See Section 508 guidance on
   * contrast ratios for reference【783989275821345†L250-L270】.
   */
  /* Updated colours with improved contrast.  The primary blue has been
     darkened significantly to meet WCAG AA contrast thresholds on light
     backgrounds.  The gold accent has been shifted to a deeper bronze
     tone. */
  --cerulean-blue: #002864; /* Dark navy for headlines and highlights */
  --gold: #755c28;          /* Rich bronze accent */
  --offwhite: #f5f5f5;      /* Off‑white/Silver background */
  --offwhite-dark: #e0e0e0; /* Slightly darker off‑white for shadows */
  --bg: #f9fafb;            /* Very light neutral background */
  --card-bg: rgba(245, 245, 245, 0.95); /* Slightly translucent off‑white for cards */
  --glass-bg: rgba(255, 255, 255, 0.65); /* Frosted glass effect background */
  --shadow: 0 6px 24px rgba(163, 140, 86, 0.25); /* soft warm gold shadow */
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--bg);
  color: #222; /* Dark text on light background */
  scroll-behavior: smooth;
}

/* HEADER + NAV (Unified) */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}
.nav-link {
  background: none;
  color: rgba(0, 0, 0, 0.685);
  font-weight: 700;
  font-size: 1.13rem;
  border-radius: 0;
  padding: 0.88rem 1.7rem;
  border: none;
  letter-spacing: 0.01em;
  transition: color .18s, background .12s;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  display: inline-block;
  position: relative;
}
.nav-link.active,
.nav-link:focus,
.nav-link:hover {
  background: #e3edfa;
  color: var(--cerulean-blue);
}
@media (max-width: 700px) {
  .nav-link {
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
  }
}

/* Responsive navigation adjustments */
@media (max-width: 700px) {
  /* Allow the navigation list to wrap onto multiple lines on very small
     screens to prevent overlap with the logo.  Without this the nav
     overflows horizontally on widths around 360 px. */
  /* Hide the nav links by default on small screens; they will be shown
     as a slide‑in menu when the toggle button is activated. */
  .nav-links {
    display: none;
  }
  /* Reduce padding and font size for nav items to save horizontal space. */
  .nav-link {
    padding: 0.5rem 0.8rem;
    font-size: 0.95rem;
  }
  /* Scale down the header logo responsively.  Using viewport units
     ensures the logo shrinks on very small devices but does not exceed
     its original size on larger screens. */
  /* Adjust the navigation logo size responsively */
  .nav-logo img {
    width: 9vw;
    max-width: 64px;
    height: auto;
  }
}
/* ================================================================
   Mobile navigation toggle (updated)
   - Toggle sits at the extreme right
   - Drawer uses abstract background, not white
   - Drawer starts below the header stack (logo + navbar)
================================================================ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  height: 40px;
  width: 40px;
  position: relative;
  z-index: 1202;
}
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 3px;
  background-color: var(--cerulean-blue);
  margin: 4px auto;
  transition: transform .3s ease, opacity .3s ease;
}

/* Animate into an 'X' when open */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 700px){
  /* Show the toggle and pin it at the extreme right */
   .nav-toggle{
    display: block;
    position: fixed; /* was absolute */
    top: 18px;       /* visually aligns with navbar at top: 30px */
    right: 18px;     /* always at the top right of viewport */
    height: 40px; width: 40px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    z-index: 1202;
  }

  /* Slide-in menu uses abstract background and starts below header */
  .nav-links{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;

    position: fixed;
    right: 0;
    /* below header stack: 80px logo + 1.4rem gap (+ safe area) */
    --nav-top: calc(80px + 1.4rem + env(safe-area-inset-top));
    top: var(--nav-top);
    height: calc(100dvh - var(--nav-top));
    width: min(84vw, 420px);

    padding-top: 1rem; /* content padding (we already offset with --nav-top) */
    padding-left: calc(1rem + env(safe-area-inset-left));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));

    /* ✨ abstract background instead of white */
    background:
      url('assets/abstract_background.png') center/cover no-repeat fixed;
    background-color: rgba(255,255,255,.85); /* readability over image */
    background-blend-mode: lighten;

    box-shadow: -16px 0 30px rgba(0,0,0,.12);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1201;
  }
  .nav-links.open{ transform: translateX(0); }

  .nav-links li{ width: 100%; }
  .nav-links li a{
    display: block;
    padding: .8rem 1rem;
    width: 100%;
  }

  /* Backdrop behind menu */
  .nav-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
    z-index: 1200;
  }
  .nav-backdrop[hidden]{ display: none; }

  /* On small screens, hide the persistent navbar backdrop/border */
  .navbar-bg{ display: none; }
  .navbar{
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

  /* Adjust hero backgrounds and heights for mobile.  Center the
     background image and reduce the overall hero height to prevent
     excessive vertical space on small devices. */
  .hero {
    min-height: 75vh;
  }
  .hero-bg {
    background-position: center top;
    background-size: cover;
  }
  /* The about page uses an inline style for its hero background.  Add
     responsive adjustments here as well. */
  .about-hero .hero-bg,
  .page-about .hero-bg {
    background-position: center top;
    background-size: cover;
  }


/* Skip link styling.  Hidden off‑screen by default and shown when
   focused to aid keyboard users in jumping to the main content. */
/* Accessible skip link: hidden until keyboard focus */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus,
.skip-link:focus-visible{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto;
  padding:.5rem .75rem; background:#fff; color:#000;
  border-radius:.5rem; box-shadow:0 6px 16px rgba(0,0,0,.2);
  z-index:1400;
}

/* Focus styles for interactive elements.  Use outline to make focused
   links and buttons visible when navigating with the keyboard. */
.nav-link:focus-visible,
.md-btn:focus-visible,
.apply-btn:focus-visible,
.fab-next:focus-visible,
.fab-prev:focus-visible {
  outline: 2px solid var(--cerulean-blue);
  outline-offset: 2px;
}

/* Improve responsiveness of the services grid by using auto‑fit.  This
   allows cards to wrap based on available space rather than fixed
   breakpoints. */
.md-grid.service-grid-8 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.3rem;
  margin-top: 2.2rem;
}

/* Visually hidden text used for screen‑reader only hints (e.g. links that
   open in new tabs). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* HERO */
.hero {
  /* Constrain the hero’s height on mobile to keep the CTA above
     the fold and allow the rest of the content to breathe.  Using
     88vh instead of 100vh prevents the hero from fully taking up
     the screen on devices with tall browser chrome. */
  min-height: 88vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--cerulean-blue);
  color: var(--offwhite);
  /* Fallback height when vh unit isn’t supported */
  min-height: 100vh;
  /* Add top padding equal to the height of the fixed header plus
     any safe‑area inset so hero content never hides behind the nav. */
  padding-top: calc(180px + env(safe-area-inset-top));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* Use WebP format for smaller hero image; fallback defined via image-set if supported */
  background: url('assets/psw-elder.webp') center/cover no-repeat;
  filter: brightness(0.85);
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  /*
   * Increase overlay opacity and use the darkened cerulean hue so that
   * foreground text remains legible against the background image. The
   * gradient transitions from a more saturated top to a lighter bottom.
   */
  background: linear-gradient(180deg, rgba(23, 105, 170, 0.28) 35%, rgba(23, 105, 170, 0.12) 96%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 5rem 2rem 2.6rem 2rem;
}
.hero-title {
  /* Scale the hero heading smoothly between small and large devices.
     The clamp() function chooses a font size between 2rem and
     3.5rem based on viewport width; 4.5vw + 0.5rem gives a
     responsive midpoint. */
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.3rem);
  font-weight: 800;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  color: var(--offwhite);
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s, transform 0.7s;
}
.hero-sub {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 2.6rem;
  letter-spacing: 0.01em;
  color: var(--offwhite);
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s, transform 0.7s;
}
.hero-cta {
  background: var(--gold);
  color: #222;
  font-weight: 700;
  padding: 1.15rem 2.8rem;
  border-radius: 2rem;
  font-size: 1.12rem;
  /* Adjust shadow colour to align with the lightened gold accent */
  box-shadow: 0 2px 12px rgba(163, 140, 86, 0.7);
  border: none;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  opacity: 0;
  transform: translateY(32px);
  position: relative;
  overflow: hidden;
  transition: background 0.19s, box-shadow 0.21s, color 0.16s, opacity 0.7s, transform 0.7s;
}
.hero-cta:hover,
.hero-cta:focus {
  /* Lighten the gold accent on hover for subtle emphasis */
  background: #bfa678;
  color: #222;
  box-shadow: 0 4px 30px rgba(163, 140, 86, 0.7);
}
.animate-fade.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* SECTIONS, CARDS, GRID */
.md-card,
.glass-card {
  background: rgba(255,255,255,0.58);       /* Frosted-glass: semi-transparent */
  backdrop-filter: blur(10px) saturate(170%);
  -webkit-backdrop-filter: blur(10px) saturate(170%);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);  /* Subtle shadow */
  padding: 3.1rem 3rem 2.4rem 3rem;
  margin: 0 auto 3.3rem auto;
  max-width: 1120px;
  position: relative;
  color: #222;
  z-index: 3; 
  transition: box-shadow .24s, background .25s;
}
.md-headline {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
  color: var(--cerulean-blue);
}
.large-text {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .md-card,
  .glass-card {
    padding: 1.2rem 0.7rem 1.6rem 0.7rem;
  }
  .large-text {
    font-size: 1.13rem;
  }
}

/* 8 SERVICES GRID */
.md-grid.service-grid-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.3rem;
  margin-top: 2.2rem;
}
@media (max-width: 1050px) {
  .md-grid.service-grid-8 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .md-grid.service-grid-8 {
    grid-template-columns: 1fr;
  }
}

/*
 * Core Values card styling
 *
 * Provide individual cards for each core value with a frosted glass effect and
 * consistent margins. These definitions are global so they apply even if
 * page‑specific classes are missing.
 */
.core-value-card {
  background: rgba(245, 249, 255, 0.91);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(32, 100, 220, 0.04);
  display: flex;
  align-items: flex-start;
  flex: 1 1 330px;
  min-width: 280px;
  max-width: 460px;
  padding: 28px 22px 22px 22px;
  margin-bottom: 18px;
  gap: 18px;
}
/* Icon within each core value card */
.core-value-icon {
  color: var(--cerulean-blue);
  font-size: 2.7em;
  background: #fff;
  border-radius: 100%;
  box-shadow: 0 0 0 4px #e6f2ff;
  padding: 8px;
  margin-top: 4px;
  min-width: 54px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Headings and paragraphs within core value cards */
.core-value-content h4 {
  color: var(--cerulean-blue);
  margin: 0 0 7px 0;
  font-size: 1.2em;
  font-weight: 800;
}
.core-value-content p {
  margin: 0;
  font-size: 1.09em;
  color: #444d60;
}

/* Service & job cards, bigger */
.service-mcard,
.job-mcard {
  background: rgba(255,255,255,0.96);
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(195,168,103,0.14);
  padding: 2.3rem 1.3rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #222;
  transition: box-shadow .21s, transform .18s;
  position: relative;
  overflow: hidden;
  min-height: 230px;
}
.service-mcard h4,
.job-mcard h4 {
  color: #222;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.4rem 0;
  letter-spacing: 0.01em;
}
.service-mcard p,
.job-mcard p {
  font-size: 1.07rem;
  color: #222;
  margin: 0;
  font-weight: 500;
}
.service-mcard .md-icon,
.job-mcard .md-icon {
  font-size: 2.7rem !important;
  color: var(--gold);
  margin-bottom: 1rem;
}
.service-mcard:hover,
.job-mcard:hover {
  box-shadow: 0 8px 24px rgba(195, 168, 103, 0.23), 0 2px 10px rgba(195, 168, 103, 0.11);
  transform: translateY(-5px) scale(1.03);
}
@media (max-width: 900px) {
  .service-mcard,
  .job-mcard {
    min-height: 180px;
  }
}

/* VISION/MISSION CARDS */
.vision-mission-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  margin-top: 2rem;
}
.service-mcard.vision-card,
.service-mcard.mission-card {
  align-items: flex-start;
  min-width: 220px;
  max-width: 100%;
  text-align: left;
  box-shadow: 0 2px 14px rgba(195, 168, 103, 0.09);
  background: #fff;
}
@media (max-width: 900px) {
  .vision-mission-cards {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
}

/* CONTACT MULTISTEP FORM */
.glass-card.contact-multistep {
  max-width: 680px;
  margin: 0 auto 4rem auto;
  background: var(--glass-bg);
  border-radius: 1.3rem;
  box-shadow: 0 0 44px 6px rgba(195, 168, 103, 0.2), 0 8px 80px rgba(0, 0, 0, 0.15);
  padding: 2.5rem 1.7rem 2.7rem 1.7rem;
  color: #222;
  position: relative;
  z-index: 10;
  border: 1.5px solid rgba(195, 168, 103, 0.13);
  overflow: hidden;
}
.contact-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.2rem;
  gap: 2rem;
  user-select:none;
  z-index: 2;
  position: relative;
}
.contact-stepper .step {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: rgba(34,34,34,0.52);
  font-size: 1.11rem;
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 2px;
}
.contact-stepper .step span {
  background: var(--offwhite);
  color: var(--cerulean-blue);
  border-radius: 50%;
  width: 2.1em;
  height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-right: 0.67em;
  font-size: 1.09em;
  box-shadow: 0 2px 10px rgba(195,168,103,0.14);
  border: 2px solid rgba(195, 168, 103, 0.22);
  transition: background .17s, color .17s, border .18s;
}
.contact-stepper .step.active span,
.contact-stepper .step.done span {
  background: var(--cerulean-blue);
  color: var(--offwhite);
  border: 2.5px solid var(--gold);
}
.contact-stepper .step.active,
.contact-stepper .step.done {
  color: #222;
}
.contact-stepper .step:not(:last-child)::after {
  content: "";
  display: block;
  height: 3px;
  width: 2.3em;
  background: rgba(195, 168, 103, 0.19);
  border-radius: 1em;
  margin-left: 0.1em;
  margin-right: 0.1em;
}
.contact-stepper .step.done:not(:last-child)::after {
  background: var(--cerulean-blue);
}
.step-pane {
  display: none;
}
.step-pane.active {
  display: block;
  animation: fadeIn .35s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.md-field {
  position: relative;
  margin-bottom: 1.3rem;
}
.md-field input,
.md-field textarea,
.md-field select {
  width: 100%;
  font-size: 1.08rem;
  font-family: inherit;
  background: var(--offwhite);
  color: #222;
  border: 2px solid var(--gold);
  border-radius: 8px;
  outline: none;
  box-shadow: 0 2px 10px rgba(195, 168, 103, 0.13);
  padding: 1.01rem 1.1rem;
  margin-bottom: 0;
  resize: none;
  transition: border 0.18s, background 0.15s, color 0.17s;
  font-weight: 500;
  box-sizing: border-box;
}
.md-field input:focus,
.md-field textarea:focus,
.md-field select:focus {
  border-color: var(--cerulean-blue);
  background: #f0f8ff;
  color: #222;
}
.md-field label {
  position: absolute;
  left: 1.02rem;
  top: 1.11rem;
  color: var(--gold);
  font-size: 1.03rem;
  pointer-events: none;
  transition: 0.20s;
  background: transparent;
  font-weight: 700;
}
.md-field input:focus + label,
.md-field input:not(:placeholder-shown) + label,
.md-field textarea:focus + label,
.md-field textarea:not(:placeholder-shown) + label,
.md-field select:focus + label,
.md-field select:not([value=""]) + label {
  top: -15px;
  left: 10px;
  font-size: 0.87rem;
  color: var(--cerulean-blue);
  background: #f0f8ff;
  padding: 0 9px;
  border-radius: 8px;
  box-shadow: 0 1px 8px rgba(195, 168, 103, 0.3);
  font-weight: 800;
}
.md-field select {
  color: #222;
  background: var(--offwhite);
}
.md-field select:invalid {
  color: rgba(195, 168, 103, 0.6);
}
.md-field select option[disabled][hidden] {
  display: none;
}
.md-field.error input,
.md-field.error textarea,
.md-field.error select {
  border-color: #ff3f3f !important;
  color: #222;
  background: #fddede !important;
}
.md-field.error label {
  color: #ff3f3f !important;
}
.md-field .error-msg {
  color: #ff3f3f;
  font-size: 0.98em;
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.contact-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.2rem;
  margin-top: 0.7rem;
}
.md-btn.fab-next,
.md-btn.fab-prev {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 1.12rem;
  font-weight: 800;
  background: var(--cerulean-blue);
  color: var(--offwhite);
  border-radius: 2rem;
  box-shadow: 0 2px 10px rgba(33, 150, 243, 0.18);
  transition: background 0.15s, box-shadow 0.16s, color 0.16s, transform 0.12s;
  min-width: 122px;
  border: none;
  cursor: pointer;
  padding: 1.01rem 2.2rem;
  outline: none;
  margin-top: 0.2rem;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
.md-btn.fab-next:active,
.md-btn.fab-prev:active {
  transform: scale(0.98);
}
.md-btn.fab-next:hover,
.md-btn.fab-prev:hover {
  background: var(--gold);
  color: #222;
}
.review-card {
  background: rgba(255,255,255,0.9);
  border-radius: 1rem;
  box-shadow: 0 2px 14px rgba(195,168,103,0.17);
  padding: 2rem 1.1rem 1.3rem 1.1rem;
  margin-bottom: 1.3rem;
  color: #222;
}
.review-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.review-card li {
  margin-bottom: 0.8rem;
  font-size: 1.05rem;
}
.review-card h4 {
  color: var(--cerulean-blue);
  margin-bottom: 1.2rem;
}
.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.7rem 1.1rem;
}
.confirmation h3 {
  color: var(--cerulean-blue);
  margin-bottom: 0.7rem;
}
.confirmation p {
  color: #222;
}
.contact-details {
  margin-top: 2.1rem;
  font-size: 1.08rem;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 1.6rem;
  justify-content: center;
}
.contact-details .material-icons {
  font-size: 1.17rem;
  color: var(--gold);
  margin-right: 0.18rem;
  vertical-align: middle;
}
.contact-details a {
  color: var(--gold);
  text-decoration: underline;
}
@media (max-width: 700px) {
  .glass-card.contact-multistep,
  .md-card,
  .glass-card {
    padding: 1.2rem 0.7rem 1.5rem 0.7rem;
  }
  .contact-details {
    flex-direction: column;
    gap: 0.7rem;
    font-size: 0.99rem;
  }
  .md-btn {
    width: 100%;
  }
}

/* ABOUT PAGE / CORE VALUES */
.glass-story-card {
  background: var(--glass-bg);
  box-shadow: 0 8px 40px 0 rgba(33,150,243,0.09), 0 2px 14px rgba(195,168,103,0.11);
  border-radius: 1.7rem;
  border: 1.5px solid rgba(33,150,243,0.06);
  max-width: 800px;
  margin: 0 auto 3.8rem auto;
  padding: 3rem 2rem 2.3rem 2rem;
  position: relative;
  overflow: visible;
}
.about-lead {
  font-size: 1.19rem;
  color: #4c566a;
  text-align: center;
  font-weight: 500;
  margin-bottom: 2.2rem;
  margin-top: 0.2rem;
}
.values-timeline {
  position: relative;
  margin-left: 0.6rem;
  margin-right: 0.6rem;
  padding-left: 0.7rem;
}
.values-timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 10px;
  width: 3px;
  height: calc(100% - 20px);
  background: linear-gradient(to bottom, var(--cerulean-blue) 10%, var(--gold) 95%);
  opacity: 0.13;
  border-radius: 8px;
}
.value-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 2rem; 
  position: relative;
  z-index: 1;
  background: none;
}
.value-item:last-child {
  margin-bottom: 0;
}
.value-icon {
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cerulean-blue) 70%, var(--gold) 130%);
  box-shadow: 0 2px 16px rgba(33,150,243,0.08);
  color: #fff;
  font-size: 2rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  border: 3px solid rgba(255,255,255,0.9);
  margin-right: 0.12rem;
}
.value-content h4 {
  font-size: 1.19rem;
  font-weight: 800;
  margin: 0 0 0.3rem 0;
  color: var(--cerulean-blue);
  letter-spacing: 0.01em;
}
.value-content p {
  margin: 0 0 0.1rem 0;
  font-size: 1.05rem;
  color: #2c2c2c;
  font-weight: 500;
}
@media (max-width: 700px) {
  .glass-story-card {
    padding: 1.1rem 0.5rem 1.3rem 0.5rem;
  }
  .values-timeline {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    padding-left: 0.1rem;
  }
  .value-icon {
    width: 33px;
    height: 33px;
    font-size: 1.13rem !important;
    min-width: 33px;
    min-height: 33px;
  }
  .value-item {
    gap: 0.7rem;
  }
}

/* CAREERS */

/* OVERRIDE: Remove grid for jobs-list in careers */
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin: 2.4rem auto 0 auto;
  max-width: 900px;
}
.job-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.2rem;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 20px rgba(195,168,103,0.13);
  padding: .6rem 3rem 2.6rem 2.3rem;
  min-height: 150px;
  justify-content: flex-start;
}
.job-icon {
  font-size: 3rem;
  /* Use the updated bronze accent for job icons */
  color: var(--gold);
  flex-shrink: 0;
}
.job-info h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 0.6rem 0;
}
.job-meta {
  font-size: 1.04rem;
  color: #666;
  margin-bottom: 1.3rem;
}
.apply-btn {
  background: var(--cerulean-blue);
  color: #fff;
  font-weight: 700;
  font-size: 1.06rem;
  padding: 0.88rem 2.3rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .16s;
  text-decoration: none;
  display: inline-block;
}
.apply-btn:hover {
  /* Darken slightly on hover for a subtle feedback */
  background: #125a8c;
}

/* FOOTER - MODERN, CARE COMPANY STYLE */
.mk-footer {
  background: #fcfcfd;
  /* Adjust shadow to use the darkened cerulean hue for a cohesive palette */
  box-shadow: 0 -2px 22px 0 rgba(23,105,170,0.06), 0 0px 16px 0 rgba(0,0,0,0.06);
  padding-top: 2.5rem;
  padding-bottom: 0.5rem;
  margin-top: 2.2rem;
  border-top: 2px solid #e5e5ee;
  font-size: 1.07rem;
}
.footer-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto 1.3rem auto;
  flex-wrap: wrap;
  gap: 2.8rem;
  padding: 0 1.2rem;
}
.footer-col {
  min-width: 190px;
  flex: 1;
}
.footer-logo-address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-logo {
  width: 74px;
  height: 74px;
  margin-bottom: 0.9rem;
  object-fit: contain;
}
.footer-address {
  color: #444;
  font-size: 1.08rem;
  line-height: 1.5;
}
.footer-nav {
  /* intentionally left blank to allow nested elements to style themselves */
}
.footer-nav-title {
  font-weight: 800;
  color: var(--cerulean-blue);
  letter-spacing: 0.02em;
  margin-bottom: 0.9rem;
  display: inline-block;
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav li {
  margin-bottom: 0.35rem;
}
.footer-nav a {
  color: #222;
  text-decoration: none;
  transition: color 0.13s;
}
.footer-nav a:hover {
  color: var(--cerulean-blue);
}
.footer-contact span {
  display: block;
  color: #333;
  margin-bottom: 0.3rem;
}
.footer-contact .material-icons {
  font-size: 1.1rem;
  color: var(--gold);
  margin-right: 0.18rem;
  vertical-align: middle;
}
.footer-contact a {
  color: #333;
  text-decoration: underline;
}
.footer-social {
  margin-top: 0.9rem;
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.footer-social img {
  width: 28px;
  height: 28px;
  filter: grayscale(0.7);
}
.footer-social img:hover {
  filter: grayscale(0);
}
@media (max-width: 900px) {
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.7rem;
  }
}

/* Footer bar */
.footer-bar {
  text-align: center;
  color: #999;
  font-size: 0.99rem;
  padding: 1rem 0 0.2rem 0;
  margin-top: 0.4rem;
  border-top: 1.5px solid #e0e0e7;
}
.footer-bar a {
  color: var(--cerulean-blue);
  text-decoration: underline;
  margin: 0 4px;
}
.footer-sep {
  margin: 0 9px;
  color: #ccc;
}
@media (max-width: 700px) {
  .footer-bar {
    font-size: 0.94rem;
  }
}

/* Utility */
::-webkit-input-placeholder {
  color: #aaa;
}
::-moz-placeholder {
  color: #aaa;
}
:-ms-input-placeholder {
  color: #aaa;
}
::placeholder {
  color: #aaa;
}

/* Optional: blue accent for the job application stepper */
.contact-stepper .step.job-active span {
  background: var(--cerulean-blue) !important;
  color: #fff !important;
  border: 2.5px solid var(--gold) !important;
}

.md-checkbox-row {
  display: flex;
  align-items: center;
  margin-top: 1.1rem;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
}
.checkbox-label {
  display: flex;
  align-items: center;
  font-weight: 700;
  /* Use the primary blue for checkbox labels */
  color: var(--cerulean-blue);
  cursor: pointer;
  user-select: none;
  gap: 0.7em;
}
.checkbox-label input[type="checkbox"] {
  appearance: none;
  width: 21px;
  height: 21px;
  border: 2px solid var(--cerulean-blue);
  border-radius: 6px;
  background: #fff;
  transition: border-color .15s, box-shadow .18s;
  cursor: pointer;
  margin-right: 8px;
  position: relative;
}
.checkbox-label input[type="checkbox"]:checked {
  background: var(--cerulean-blue);
  border-color: var(--cerulean-blue);
}
.checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ===================================================================== */
/* Page-specific styles (scoped with .page-xxx) */

/* Home page (index.html) */
.page-home {
  /* Home page uses an abstract background with lightening blend mode */
  background: url('assets/abstract_background.png') center/cover no-repeat fixed;
  background-blend-mode: lighten;
}
.page-home .hero {
  /* Ensure the hero section retains its cerulean-blue background */
  background: var(--cerulean-blue);
}
.page-home .section {
  background: transparent;
  position: relative;
}
.page-home .contact-multistep {
  background: rgba(248, 250, 252, 0.98);
  box-shadow: 0 2px 18px rgba(33,150,243,0.09), 0 2px 14px rgba(195,168,103,0.11);
  border-radius: 1.3rem;
  position: relative;
  z-index: 2;
}

/* Careers page (careers.html) */
.page-careers {
  /* Careers page uses the abstract background like other informational pages */
  background: url('assets/abstract_background.png') center/cover no-repeat fixed;
  background-blend-mode: lighten;
}
/* The .navbar-bg element is now styled globally. */
.page-careers .main-content-spacer {
  /* Offset content below the fixed navbar */
  margin-top: 120px;
}
.page-careers .section {
  background: transparent;
  position: relative;
}

/* Apply page (apply.html) */
.page-apply,
.page-apply body {
  /* Ensure the apply page stretches to full viewport height */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-apply {
  /* Apply page uses the abstract background for consistency */
  background: url('assets/abstract_background.png') center/cover no-repeat fixed;
  background-blend-mode: lighten;
  position: relative;
}
/* The .navbar-bg element is now styled globally. */
.page-apply .main-content-spacer {
  margin-top: 120px;
}
.page-apply .section {
  background: transparent;
  position: relative;
}
.page-apply main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.page-apply footer.mk-footer {
  flex-shrink: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
  margin-top: 32px;
}
@media (max-width: 700px) {
  .page-apply .main-content-spacer {
    /* Match global mobile spacer */
    margin-top: 90px;
  }
  .page-apply .glass-card.contact-multistep {
    padding-bottom: 1.2rem;
  }
}

/* About page (about.html) */
.page-about {
  /* About page background repeats the abstract pattern with vertical repeat and fixed positioning */
  background: url('assets/abstract_background.png') center center repeat-y fixed;
  background-size: cover;
  min-height: 100vh;
}
.page-about .glass-card {
  background: rgba(255,255,255,0.92);
  border-radius: 28px;
  box-shadow: 0 6px 32px rgba(40,60,120,0.07);
  padding: 32px 32px 28px 32px;
  margin: 0 auto 32px auto;
  max-width: 1100px;
  width: 96%;
  position: relative;
  z-index: 2;
  border: none;
}
.page-about .mv-flex {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}
.page-about .mv-card {
  background: rgba(245,249,255,0.91);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(32,100,220,0.04);
  flex: 1 1 320px;
  min-width: 260px;
  padding: 32px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin-bottom: 18px;
}
.page-about .md-icon {
  color: #139cff;
  font-size: 2.6em;
  margin-bottom: 10px;
}
.page-about .core-values-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  margin-top: 12px;
}
.page-about .core-value-card {
  background: rgba(245,249,255,0.91);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(32,100,220,0.04);
  display: flex;
  align-items: flex-start;
  max-width: 460px;
  min-width: 280px;
  flex: 1 1 330px;
  padding: 28px 22px 22px 22px;
  margin-bottom: 18px;
  gap: 18px;
}
.page-about .core-value-icon {
  color: #139cff;
  font-size: 2.7em;
  background: #fff;
  border-radius: 100%;
  box-shadow: 0 0 0 4px #e6f2ff;
  padding: 8px;
  margin-top: 4px;
  min-width: 54px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-about .core-value-content h4 {
  color: #139cff;
  margin: 0 0 7px 0;
  font-size: 1.2em;
  font-weight: 800;
}
.page-about .core-value-content p {
  margin: 0;
  font-size: 1.09em;
  color: #444d60;
}
.page-about .footer-bar {
  text-align: center;
  color: #909eb7;
  font-size: 1.03em;
  padding: 14px 6vw 10px 6vw;
  background: none;
  border-top: 1px solid #e9eaf0;
}
.page-about .footer-sep {
  margin: 0 10px;
  color: #c3cfe2;
}
@media (max-width: 900px) {
  .page-about .glass-card {
    padding: 18px 4vw 16px 4vw;
  }
  .page-about .footer-main {
    flex-direction: column;
    gap: 8px;
  }
  .page-about .mv-flex,
  .page-about .core-values-cards {
    flex-direction: column;
    gap: 18px;
  }
  .page-about .nav-logo img {
    height: 54px;
  }
  .page-about .nav-content {
    height: 54px;
  }
}
@media (max-width: 600px) {
  .page-about .nav-logo {
    position: static;
    padding-left: 12px;
    padding-top: 10px;
  }
  .page-about .nav-links {
    gap: 10px;
  }
  .page-about .nav-link {
    font-size: 1.03em;
    padding: 0.55em 0.9em;
  }
  .page-about .md-headline,
  .page-about h2 {
    font-size: 1.18em;
  }
  .page-about .glass-card {
    padding: 10px 1vw 9px 1vw;
  }
}

/* Bill of Rights page (bill-of-rights.html) */
.page-bill-of-rights {
  background: url('assets/abstract_background.png') center/cover no-repeat fixed;
  background-blend-mode: lighten;
}
.page-bill-of-rights .section {
  background: transparent;
  position: relative;
}

/* Privacy Policy page (privacy.html) */
.page-privacy {
  background: url('assets/abstract_background.png') center/cover no-repeat fixed;
  background-blend-mode: lighten;
}
.page-privacy .section {
  background: transparent;
  position: relative;
}
/* Checkbox field (prevents floating-label rules from interfering) */
.md-field.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.2rem;
  position: relative; /* for the checkmark pseudo-element */
}

/* Stop the generic .md-field label from floating here */
.md-field.checkbox-field label {
  position: static;
  top: auto;
  left: auto;
  background: transparent;
  padding: 0;
  box-shadow: none;
  transform: none;
  color: #223;           /* readable on light cards */
  font-weight: 700;
  cursor: pointer;
}

/* Accessible, crisp custom checkbox */
.md-field.checkbox-field input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--cerulean-blue);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;     /* anchor for the checkmark */
  outline: none;
}

/* Focus ring for keyboard users */
.md-field.checkbox-field input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(33,150,243,0.25);
}

/* Checked state + tick */
.md-field.checkbox-field input[type="checkbox"]:checked {
  background: var(--cerulean-blue);
  border-color: var(--cerulean-blue);
}
.md-field.checkbox-field input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Error presentation aligned with the label text */
.md-field.checkbox-field.error .error-msg {
  margin-left: 2.2rem;     /* aligns under label text, not under box */
  color: #ff3f3f;
  font-size: 0.98em;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Optional: tighten button row so it doesn't crowd the checkbox on mobile */
@media (max-width: 600px) {
  .contact-actions { gap: 0.6rem; }

  /* Compress the multi‑step progress indicator on mobile.  Reduce
     font sizes and spacing so the steps fit comfortably on narrow
     screens without wrapping awkwardly. */
  .contact-stepper {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
  }
  .contact-stepper .step {
    font-size: 0.95rem;
  }
  .contact-stepper .step span {
    width: 1.8em;
    height: 1.8em;
    margin-right: 0.4em;
    font-size: 1rem;
  }
  .contact-stepper .step:not(:last-child)::after {
    height: 2px;
    width: 1.4em;
  }
}