/* ==========================================================================
   Aurevia Health — Global Stylesheet
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

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

/* Slightly thinner than Lucide's default (2) for a more refined, premium line-icon feel */
.lucide {
  stroke-width: 1.75;
}

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

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

ul {
  list-style: none;
}

/* ---- CSS Custom Properties ---- */
:root {
  /* Brand colors — exact hex values approved by the client. Do not alter. */
  --color-primary: #00B4ED;
  --color-accent: #DBAE41;
  --color-dark: #0D1528;

  /* Derived shades — same hues as the 3 brand colors above, adjusted only for
     legibility/interaction states. Never used as a stand-alone "4th color". */
  --color-primary-dark: #007A9E; /* deepened primary — used as text/icon/border on light backgrounds and hover states, since the exact brand blue fails WCAG AA as text on white (~2.4:1) */
  --color-primary-light: #E3F7FD; /* ~90% lighter than primary, for tints/badges */
  --color-primary-rgb: 0, 180, 237;
  --color-accent-light: #E8CA84; /* highlight stop for the gold shine gradient */
  --color-accent-dark: #997A2E; /* shadow stop for the gold shine gradient */
  --color-accent-rgb: 219, 174, 65;
  --color-dark-rgb: 13, 21, 40;
  --color-dark-alt: #1B2740; /* lightened navy for alt dark panels */

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-off-white: #F8F9FA;
  --color-gray-light: #F2F4F6;
  --color-gray-mid: #9AA0A6;
  --color-text-primary: #1A1A2E;
  --color-text-secondary: #4A4E69;
  --color-divider: rgba(255, 255, 255, 0.1);
  --color-divider-light: rgba(0, 0, 0, 0.08);

  /* Status colors (form validation / feedback) */
  --color-success: #1E8449;
  --color-success-bg: rgba(46, 204, 113, 0.12);
  --color-error: #C0392B;
  --color-error-bg: rgba(192, 57, 43, 0.1);

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;

  --container-max: 1280px;
  --container-padding: 80px;
  --section-padding: 120px;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-primary);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  color: inherit;
}

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--section-padding) 0;
}

.section-header {
  max-width: 720px;
}

.section-header.centered {
  text-align: center;
  margin: 0 auto var(--space-8);
}

.section-label {
  display: block;
  color: var(--color-primary-dark);
  font: 500 12px/1.4 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
}

.section-header p {
  margin-top: var(--space-2);
  font-size: 18px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.bg-dark .section-header p,
.bg-photo .section-header p {
  color: rgba(255, 255, 255, 0.8);
}

/* Primary blue fails AA contrast against the dark navy background — use brand gold instead,
   with a brushed-metal gradient + faint emboss so the gold reads as shiny rather than flat */
.bg-dark .section-label,
.bg-dark .eyebrow,
.bg-photo .section-label,
.bg-photo .eyebrow,
.card-dark .eyebrow,
.hero .eyebrow,
.page-banner-subline {
  color: var(--color-accent);
  background: linear-gradient(115deg, var(--color-accent-light) 0%, var(--color-accent) 40%, var(--color-accent-dark) 70%, var(--color-accent) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1px rgba(var(--color-dark-rgb), 0.3);
}

/* ---- Typography helpers ---- */
h1 { font-size: 72px; font-weight: 700; line-height: 1.1; }
h2 { font-size: 48px; font-weight: 700; line-height: 1.15; }
h3 { font-size: 26px; font-weight: 600; line-height: 1.25; }
h4 { font-size: 20px; font-weight: 600; line-height: 1.3; }

.eyebrow {
  display: block;
  color: var(--color-primary-dark);
  font: 500 12px/1.4 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 14px/1 'Montserrat', sans-serif;
  letter-spacing: 0.04em;
  padding: 14px 32px;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  /* Exact brand blue as the fill; navy (not white) as the label — the brand
     blue is too light for white text to clear WCAG AA (~2.4:1) */
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.35);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

.btn-outline:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

.btn-ghost:hover {
  background: var(--color-white);
  color: var(--color-text-primary);
  border-color: var(--color-white);
}

.btn-full {
  width: 100%;
}

.btn-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- Cards ---- */
.card {
  background: var(--color-white);
  border-radius: 8px;
  padding: 36px 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
}

/* Shiny gold tile: gradient fill for a brushed-metal look + a soft diagonal
   sheen (::after) and inset top highlight, kept to a single accent color so
   it stays minimal rather than decorative-heavy */
.card-icon {
  position: relative;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 45%, var(--color-accent-dark) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.card-icon::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%);
}

.card-icon svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  color: var(--color-dark);
}

.card h4 {
  margin-bottom: 8px;
}

.card p {
  color: var(--color-text-secondary);
  font-size: 15px;
}

.card-dark {
  background: var(--color-dark-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  padding: 48px 40px;
  color: var(--color-white);
}

.card-dark .card-icon {
  width: 48px;
  height: 48px;
}

.card-dark .eyebrow {
  margin-top: 24px;
  margin-bottom: 0;
}

.card-dark h3 {
  margin-top: 12px;
  color: var(--color-white);
}

.card-dark p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Navbar
   ========================================================================== */

/* Navbar — keep in sync across all pages */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 96px;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
  background: var(--color-dark);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.navbar-inner {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 1280px; /* independent of --container-max — the nav links need consistent room and shouldn't wrap when content sections narrow */
}

.navbar-logo {
  display: flex;
  align-items: center;
  max-height: 88px;
}

.navbar-logo img {
  /* Logo is a near-square stacked lockup (icon + wordmark + tagline), not the old
     wide horizontal mark — needs a taller render for the wordmark to stay legible. */
  height: 84px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  margin-right: var(--space-4);
}

.nav-link {
  font: 500 14px/1 'Inter', sans-serif;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--color-primary);
}

.nav-cta {
  padding: 10px 24px;
  border: 1.5px solid var(--color-white);
  color: var(--color-white);
  background: transparent;
  border-radius: 4px;
  font: 600 14px/1 'Montserrat', sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-cta:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
}

/* ---- Mobile menu overlay ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  opacity: 0.97;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateY(0);
}

.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 24px;
  color: var(--color-white);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.mobile-nav-link {
  font: 600 22px/1 'Montserrat', sans-serif;
  color: var(--color-white);
}

.mobile-nav-cta {
  width: 100%;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Mobile: cropped hands-only image, filling the frame (unchanged) */
  background: var(--color-dark) url('images/hero-bg.webp') center center / cover no-repeat;
  overflow: hidden;
  /* Own stacking context, so the z-index:-1 .hero-video paints above this element's
     navy background instead of escaping behind it (which hides the video entirely) */
  isolation: isolate;
}

/* Desktop/tablet: background video instead of a static photo (see .hero-video below
   for the actual <video> element / source file — that's the only place to touch to
   swap the video). Navy solid fill is the fallback while the video loads.
   To go back to the full-photo background instead of video, uncomment this block
   and set `.hero-video { display: none !important; }` below. */
@media (min-width: 769px) {
  .hero {
    background: var(--color-dark);
    /* background: var(--color-dark) url('images/hero-photo.webp') center center / contain no-repeat; */
  }
}

.hero-video {
  display: none;
}

/* Desktop/tablet only — mobile keeps the static cropped photo from .hero's base rule above */
@media (min-width: 769px) {
  .hero-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.38) 60%, rgba(0,0,0,0.15) 100%);
}

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

.hero h1 {
  color: var(--color-white);
  margin-bottom: 24px;
}

.hero-subtext {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 40px;
}

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.6);
  animation: bounce 2s infinite;
  transition: opacity 0.3s ease;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ==========================================================================
   Page Banner (inner pages)
   ========================================================================== */

.page-banner {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  margin-top: 0;
  /* Replace with final asset from client */
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-alt) 60%, var(--color-dark) 100%);
}

.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0.4));
}

.page-banner-content {
  position: relative;
}

.breadcrumb {
  font: 400 13px/1 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.6);
}

.page-banner h1 {
  font-size: 56px;
  color: var(--color-white);
  margin-top: 8px;
}

.page-banner-subline {
  font: 500 20px/1 'Montserrat', sans-serif;
  margin-top: 12px;
}

/* ==========================================================================
   Section variants
   ========================================================================== */

/* Photo-background sections — same overlay technique as the hero, reusable on any dark section */
.bg-photo {
  position: relative;
  background-color: var(--color-dark);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  isolation: isolate;
}

.bg-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(var(--color-dark-rgb), 0.88) 0%, rgba(var(--color-dark-rgb), 0.72) 55%, rgba(var(--color-dark-rgb), 0.6) 100%);
}

.bg-photo > * {
  position: relative;
  z-index: 1;
}

.bg-photo .card-dark {
  background: rgba(var(--color-dark-rgb), 0.55);
  backdrop-filter: blur(2px);
}

.bg-photo .two-col-visual {
  background: rgba(var(--color-dark-rgb), 0.4);
  backdrop-filter: blur(2px);
  box-shadow: none;
}

/* Per-section background photos — swap the url() when the client provides final assets */
.vision-mission-photo { background-image: url('images/vision-mission-bg.jpg'); }
.home-cta-photo { background-image: url('images/home-cta-bg.jpg'); }
.trust-statement-photo { background-image: url('images/trust-statement-bg.jpg'); }
.pillar4-photo { background-image: url('images/pillar4-bg.jpg'); }
.careers-cta-photo { background-image: url('images/careers-cta-bg.jpg'); }

.about-banner-photo { background: var(--color-dark) url('images/about-banner-bg.jpg') center / cover no-repeat; }
.promise-banner-photo { background: var(--color-dark) url('images/promise-banner-bg.jpg') center / cover no-repeat; }
.growth-banner-photo { background: var(--color-dark) url('images/growth-banner-bg.jpg') center / cover no-repeat; }
.careers-banner-photo { background: var(--color-dark) url('images/careers-banner-bg.jpg') center / cover no-repeat; }
.contact-banner-photo { background: var(--color-dark) url('images/contact-banner-bg.jpg') center / cover no-repeat; }
.products-banner-photo { background: var(--color-dark) url('images/products-banner-bg.jpg') center / cover no-repeat; }

.bg-white { background: var(--color-white); }
.bg-dark { background: var(--color-dark); color: var(--color-white); }
.bg-off-white { background: var(--color-off-white); }
.bg-gray-light { background: var(--color-gray-light); }
.bg-primary { background: var(--color-primary); color: var(--color-dark); }

/* ---- Two-column layout (About / Company Story / alternating pillars) ---- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.two-col.reverse .two-col-visual {
  order: -1;
}

.two-col-visual {
  border-radius: 8px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.1);
  min-height: 360px;
  background-color: var(--color-dark);
  background-size: cover;
  background-position: center;
}

/* Per-section photos — swap the url() when the client provides final assets */
.about-visual-photo { background-image: url('images/about-visual-bg.jpg'); }
.pillar1-visual-photo { background-image: url('images/pillar1-visual-bg.jpg'); }
.pillar2-visual-photo { background-image: url('images/pillar2-visual-bg.jpg'); }
.pillar3-visual-photo { background-image: url('images/pillar3-visual-bg.jpg'); }

.two-col-body p {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
}

.bg-dark .two-col-body p,
.bg-photo .two-col-body p {
  color: rgba(255, 255, 255, 0.8);
}

.two-col-body p:first-of-type {
  margin-top: var(--space-2);
}

.two-col-body .btn {
  margin-top: var(--space-4);
}

/* ---- Vision & Mission ---- */
.vision-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* ---- Core Values grid ---- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ---- Growth strategy infographic ---- */
.growth-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
}

.growth-steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.2;
}

.growth-step {
  position: relative;
  text-align: center;
}

.growth-step-number {
  font: 700 48px/1 'Montserrat', sans-serif;
  color: var(--color-primary);
  opacity: 0.15;
}

.growth-step .card-icon {
  width: 44px;
  height: 44px;
  margin: -20px auto 16px;
}

.growth-step h4 {
  margin-bottom: 8px;
}

.growth-step p {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ---- Our Promise band ---- */
.promise-band {
  text-align: center;
}

/* Foreground on this band is navy, not white — the exact brand blue behind it
   is too light for white text/icons to clear WCAG AA (~2.4:1); navy on it
   clears ~7.6:1, and it keeps the whole band within the 3 exact brand colors */
.promise-band .eyebrow {
  color: rgba(var(--color-dark-rgb), 0.6);
  letter-spacing: 0.15em;
}

.promise-band h2 {
  color: var(--color-dark);
  margin-top: 16px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.promise-band-body {
  color: rgba(var(--color-dark-rgb), 0.75);
  font-size: 18px;
  max-width: 640px;
  margin: 24px auto 0;
}

.promise-pillars {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: 56px;
  flex-wrap: wrap;
}

.promise-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promise-pillar-icon {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.promise-pillar-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-dark);
}

.promise-pillar-label {
  margin-top: 12px;
  font: 500 14px/1 'Inter', sans-serif;
  color: var(--color-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- CTA band ---- */
.cta-band {
  text-align: center;
  padding: 80px 0;
}

.cta-band h2 {
  font-size: 40px;
  color: var(--color-white);
}

.cta-band p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.cta-band .btn-group {
  justify-content: center;
  margin-top: 32px;
}

/* ---- Pillars grid (Our Promise page) ---- */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* ---- Alternating pillar sections (Growth Strategy page) ---- */
.pillar-section .two-col-visual {
  min-height: 320px;
}

.pillar-step-number {
  font: 700 80px/1 'Montserrat', sans-serif;
  color: var(--color-primary);
  opacity: 0.12;
}

.pillar-step-number.on-dark {
  color: var(--color-white);
  opacity: 0.15;
}

/* ---- Pull quote / promise statement ---- */
.pull-quote {
  border-left: 4px solid var(--color-accent);
  padding-left: 32px;
  text-align: left;
  font: 500 26px/1.5 'Montserrat', sans-serif;
}

.promise-statement {
  margin-top: var(--space-4);
}

.promise-supporting {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
}

.trust-cta {
  margin-top: 36px;
}

.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.not-found-cta {
  margin-top: 32px;
}

.ceo-quote {
  margin: var(--space-4) auto 0;
  max-width: 720px;
}

.ceo-quote p + p {
  margin-top: 16px;
}

.ceo-name {
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--color-text-primary);
}

.ceo-title {
  color: var(--color-text-secondary);
}

/* ---- Large centered purpose statement ---- */
.purpose-text {
  font-size: 20px;
  line-height: 1.75;
  margin-top: var(--space-3);
}

/* ---- Culture cards (Careers) ---- */
.culture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* ---- Join CTA (Careers) ---- */
.join-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.join-cta > div {
  min-width: 0;
}

.join-cta-right {
  text-align: right;
}

.join-cta-sublabel {
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  font-size: 12px;
}

.join-cta-email {
  display: block;
  font: 600 18px/1 'Montserrat', sans-serif;
  color: var(--color-white);
  margin: 8px 0 16px;
  overflow-wrap: break-word;
}

/* ---- Contact layout ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.contact-layout > div {
  min-width: 0;
}

.contact-layout h3 {
  margin-bottom: var(--space-2);
}

.contact-card {
  background: var(--color-gray-light);
  border-radius: 8px;
  padding: 24px;
  border-left: 3px solid var(--color-accent);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-card svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary-dark);
  flex-shrink: 0;
  margin-top: 4px;
}

.contact-card > div {
  min-width: 0;
}

.contact-card-label {
  font: 500 13px/1.4 'Inter', sans-serif;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  margin-bottom: 4px;
}

.contact-card-value {
  font: 600 16px/1.3 'Montserrat', sans-serif;
  color: var(--color-primary-dark);
  overflow-wrap: break-word;
}

.contact-intro {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-text-secondary);
}

/* ---- Form ---- */
.form-group {
  margin-bottom: var(--space-3);
}

.form-label {
  display: block;
  font: 500 13px/1 'Inter', sans-serif;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-divider-light);
  border-radius: 6px;
  font: 400 15px/1.5 'Inter', sans-serif;
  color: var(--color-text-primary);
  background: var(--color-off-white);
  transition: border-color 0.2s ease;
  outline: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary-dark);
  background: var(--color-white);
}

.form-error {
  display: none;
  color: var(--color-error);
  font-size: 13px;
  margin-top: 6px;
}

.form-input.invalid,
.form-textarea.invalid {
  border-color: var(--color-error);
}

.form-input.invalid + .form-error,
.form-textarea.invalid + .form-error {
  display: block;
}

.form-status {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: 6px;
  font-size: 15px;
}

.form-status.visible {
  display: flex;
}

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

.form-status.error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

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

/* Footer — keep in sync across all pages */
.footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding-top: var(--space-10);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-4);
}

.footer-grid > div {
  min-width: 0;
}

.footer-logo {
  max-height: 68px;
}

.footer-logo img {
  height: 60px;
  width: auto;
}

.footer-tagline {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-social {
  display: inline-flex;
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.2s ease;
}

.footer-social:hover {
  color: var(--color-accent);
}

.footer-social svg {
  width: 24px;
  height: 24px;
}

.footer-heading {
  font: 500 12px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  transition: opacity 0.2s ease, color 0.2s ease;
}

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

.footer-contact-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-2);
}

.footer-contact-label:first-child {
  margin-top: 0;
}

.footer-contact a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  overflow-wrap: break-word;
}

.footer-bottom {
  border-top: 1px solid var(--color-divider);
  margin-top: 56px;
  padding: 24px 0;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   Motion
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1280px) {
  :root {
    --container-padding: 40px;
  }
}

/* Desktop: let sections breathe across ~70–80% of the viewport instead of capping at a fixed 1280px
   (a floor/ceiling guards against cramped mid-size laptops and absurd line-lengths on ultrawide monitors) */
@media (min-width: 1280px) {
  :root {
    --container-max: clamp(1100px, 76vw, 1760px);
  }
}

@media (max-width: 1024px) {
  :root {
    --section-padding: 72px;
  }

  .section-header h2,
  h2 {
    font-size: 36px;
  }

  .values-grid,
  .culture-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-contact {
    grid-column: span 2;
  }

  .growth-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .growth-steps::before {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --section-padding: 56px;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .navbar-inner {
    height: 64px;
  }

  .navbar {
    height: 64px;
  }

  .navbar-logo {
    max-height: 56px;
  }

  .navbar-logo img {
    height: 52px;
  }

  h1, .hero h1 {
    font-size: 38px;
  }

  /* Center the hero copy + buttons on mobile (desktop stays left-aligned) */
  .hero-content {
    text-align: center;
  }

  .hero-subtext {
    margin-left: auto;
    margin-right: auto;
  }

  .hero .btn-group {
    align-items: center;
  }

  .page-banner h1 {
    font-size: 38px;
  }

  h2, .section-header h2 {
    font-size: 28px;
  }

  .two-col,
  .two-col.reverse,
  .vision-mission-grid,
  .values-grid,
  .culture-grid,
  .pillars-grid,
  .contact-layout,
  .join-cta {
    grid-template-columns: 1fr;
  }

  .two-col.reverse .two-col-visual {
    order: 0;
  }

  .join-cta-right {
    text-align: center;
  }

  .btn-group {
    flex-direction: column;
  }

  .promise-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

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

  .footer-contact {
    grid-column: span 1;
  }

  .growth-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  h1, .hero h1 {
    font-size: 32px;
  }

  :root {
    --container-padding: 16px;
  }
}

/* ==========================================================================
   Product Catalog (products.html)
   ========================================================================== */

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.catalog-filter {
  font: 500 14px/1 'Inter', sans-serif;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--color-divider-light);
  background: var(--color-white);
  color: var(--color-text-secondary);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.catalog-filter:hover {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

.catalog-filter.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark);
}

.catalog-grid {
  min-height: 80px;
}

/* Product card = design-system card, but a <button> so it's keyboard-accessible */
.product-card {
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.product-card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--color-gray-light);
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card-media.is-placeholder {
  /* Replace with final asset from client — gradient stand-in for missing product image */
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.product-card-category {
  display: block;
  font: 500 12px/1.4 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}

.catalog-state {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--space-6) 0;
}

/* ---- Product detail modal ---- */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* [hidden] must win over the display:flex above, or the modal covers the page */
.product-modal[hidden] {
  display: none;
}

.product-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.6);
}

.product-modal-dialog {
  position: relative;
  background: var(--color-white);
  border-radius: 10px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}

.product-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  line-height: 1;
  color: var(--color-gray-mid);
}

.product-modal-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--color-gray-light);
}

.product-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-modal-image.is-placeholder {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.product-modal-dialog h3 {
  margin: 8px 0 16px;
}

.product-modal-dialog p {
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   Dashboard (dashboard.html) — internal admin tool
   ========================================================================== */

.dashboard-body {
  background: var(--color-off-white);
}

.dash-header {
  background: var(--color-dark);
  color: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.dash-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 64px;
}

.dash-logo {
  color: var(--color-white);
}

.dash-logo img {
  /* Dashboard header is a compact 64px bar — keep the logo smaller here than
     the public navbar's larger render, or it would overflow the bar. */
  height: 48px;
  width: auto;
}

.dash-title {
  font: 500 13px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.dash-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dash-user {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.dash-viewsite {
  font-size: 13px;
  color: var(--color-white);
  border-bottom: 1px solid transparent;
}

.dash-viewsite:hover {
  border-bottom-color: var(--color-white);
}

.dash-logout-btn {
  font: inherit;
  font-size: 13px;
  color: var(--color-white);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.dash-logout-btn:hover {
  border-color: var(--color-white);
}

/* Dashboard login screen */
.dash-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark);
  padding: var(--space-4);
}

.dash-login[hidden] {
  display: none;
}

.dash-login-form {
  width: 100%;
  max-width: 360px;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  padding: var(--space-6);
  text-align: center;
}

.dash-login-logo {
  height: 40px;
  margin-bottom: var(--space-3);
}

.dash-login-title {
  font-size: 20px;
  margin-bottom: var(--space-4);
}

.dash-login-form .form-group {
  text-align: left;
}

.dash-login-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: var(--space-3);
}

.dash-main {
  padding: var(--space-8) var(--container-padding);
}

.dash-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dash-h1 {
  font-size: 32px;
}

.dash-sub {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

.dash-status {
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: var(--space-3);
}

.dash-status.is-info { background: var(--color-gray-light); color: var(--color-text-secondary); }
.dash-status.is-success { background: var(--color-success-bg); color: var(--color-success); }
.dash-status.is-error { background: var(--color-error-bg); color: var(--color-error); }

.dash-table-wrap {
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.dash-table th,
.dash-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-divider-light);
  vertical-align: middle;
}

.dash-table th {
  font: 500 12px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-mid);
}

.dash-table tr:last-child td {
  border-bottom: none;
}

.dash-cell-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.dash-empty-row {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--space-6) 0;
}

.dash-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-gray-light);
}

.dash-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-thumb.is-placeholder {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.dash-badge {
  display: inline-block;
  font: 500 12px/1 'Inter', sans-serif;
  padding: 5px 10px;
  border-radius: 999px;
}

.dash-badge.is-published { background: var(--color-success-bg); color: var(--color-success); }
.dash-badge.is-draft { background: var(--color-gray-light); color: var(--color-gray-mid); }

.dash-actions-col { text-align: right; }

.dash-actions {
  text-align: right;
  white-space: nowrap;
}

.dash-link-btn {
  font: 500 14px/1 'Inter', sans-serif;
  color: var(--color-primary-dark);
  padding: 6px 8px;
}

.dash-link-btn:hover { text-decoration: underline; }
.dash-link-btn.is-danger { color: var(--color-error); }

/* ---- Add/Edit drawer ---- */
.dash-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.dash-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 17, 23, 0.5);
}

.dash-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 480px;
  max-width: 100%;
  background: var(--color-white);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  padding: var(--space-4);
}

.dash-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.dash-drawer-close {
  font-size: 22px;
  line-height: 1;
  color: var(--color-gray-mid);
}

.dash-form .req { color: var(--color-error); }

.dash-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.dash-image-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.dash-image-preview {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-gray-light);
}

.dash-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-image-preview.is-placeholder {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.dash-image-controls { min-width: 0; }

.dash-hint {
  font-size: 12px;
  color: var(--color-gray-mid);
  margin-top: 6px;
}

.dash-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: var(--space-4);
}

@media (max-width: 768px) {
  .dash-form-row { grid-template-columns: 1fr; }
  .dash-toolbar { flex-direction: column; align-items: stretch; }
}