/* ==========================================================================
   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-heading: #074863; /* midpoint blend of --color-primary-dark and --color-dark — section title color: reads as blue, darker than --color-primary-dark, not as near-black as --color-dark */
  --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; color: var(--color-heading); }
h3 { font-size: 26px; font-weight: 600; line-height: 1.25; }
h4 { font-size: 20px; font-weight: 600; line-height: 1.3; }

/* Section h2s default to a dark blue (for light backgrounds) — not the near-black
   navy, an actual blue; kept white on dark/photo sections for contrast */
.bg-dark h2,
.bg-photo h2 {
  color: var(--color-white);
}

.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;
}

/* Wordmark image used in place of a plain-text "Aurevia Health" title/eyebrow */
.eyebrow-logo {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 auto 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-outline.is-danger {
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn-outline.is-danger:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-white);
}

.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;
}

/* Desktop/tablet: the banner is locked to the photos' native aspect ratio (both slides
   share the same 1584x793 size), so it's shown uncropped with no empty/letterboxed
   space. Slide 2 shares that same fixed height — object-fit: cover keeps it filling the
   frame cleanly instead of the banner changing height (and jumping) when the slides
   cross-fade. Mobile uses a taller ratio instead (see the 768px breakpoint) so cover
   crops the sides rather than the top/bottom — see the object-position rules there for
   how each slide keeps its subject in frame. */
.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1584 / 793;
  overflow: hidden;
  background: var(--color-dark);
  /* Contain child z-indexes (images, scrim, arrow) so .hero-body — a sibling — can
     reliably stack above the whole thing on desktop without fighting for z-index */
  isolation: isolate;
}

/* Slides sit edge-to-edge and swap via a translateX slide (see main.js), not a
   cross-fade — the inactive slide rests just off-screen (to the right by default) so it
   tiles seamlessly against the active one the moment a transition starts. main.js sets
   the actual transform inline per-transition (direction-aware), this is just the
   resting/default state and the transition itself. */
.hero-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateX(100%);
  transition: transform 0.6s ease;
}

.hero-media-img.is-active {
  transform: translateX(0);
  z-index: 1;
}

/* Desktop/tablet only — dark scrim so the centered overlay text (below) stays legible
   against the photo. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
}

/* Right-side control that advances the slideshow on demand, matching the circular
   line-icon language used elsewhere (promise pillars) */
.hero-arrow {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: var(--color-white);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-dark);
  transform: translateY(-50%) scale(1.06);
}

.hero-arrow svg {
  width: 22px;
  height: 22px;
}

/* Desktop/tablet: text + buttons overlay the image, centered. Mobile overrides this
   back to a normal-flow dark panel below the image — see the 768px breakpoint. */
.hero-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* This transparent layer spans the full image to center its text — without this,
     it would sit above the arrow (z-index 3, inside .hero-media) and silently
     swallow clicks meant for it, even over the empty space around the text */
  pointer-events: none;
}

.hero-slide-text {
  display: none;
  max-width: 700px;
  margin: 0 auto;
}

.hero-slide-text.is-active {
  display: block;
}

/* Only the actual buttons re-enable pointer-events (not the whole text block) — on
   mobile .hero-slide-text spans the full width (see the 768px breakpoint), which would
   otherwise sit on top of the arrow and swallow taps meant for it, exactly like the
   .hero-body comment above warns about. */
.hero-slide-text.is-active .btn {
  pointer-events: auto;
}

.hero-body .btn-group {
  justify-content: center;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: 24px;
  font-size: 44px;
  max-width: 100%;
}

/* Both slide headlines must always stay on one line, on every device. Slide 2's copy
   is longer, so it's sized down a notch at each breakpoint so it never overflows its
   column or wraps (see matching overrides at each media query below). */
#hero-text-1 h1,
#hero-text-2 h1 {
  white-space: nowrap;
}

#hero-text-2 h1 {
  font-size: 34px;
}

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

/* ==========================================================================
   Video Showcase (home page) — click-to-play, lives inside the About Us section
   ========================================================================== */

.video-showcase-wrap {
  margin-top: var(--space-10);
}

.video-showcase-frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-dark-alt);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.video-showcase-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-showcase-frame::after {
  /* Dark scrim so the play button stays legible over the video's first frame */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--color-dark-rgb), 0.25);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-showcase-frame.is-playing::after {
  opacity: 0;
}

.video-showcase-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 45%, var(--color-accent-dark) 100%);
  box-shadow: 0 8px 32px rgba(var(--color-accent-rgb), 0.45), 0 0 0 10px rgba(255, 255, 255, 0.08);
  color: var(--color-dark);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.video-showcase-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.video-showcase-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px; /* optical centering for the play triangle */
}

.video-showcase-frame.is-playing .video-showcase-play {
  display: none;
}

@media (max-width: 768px) {
  .video-showcase-play {
    width: 60px;
    height: 60px;
  }

  .video-showcase-play svg {
    width: 22px;
    height: 22px;
  }
}

/* ==========================================================================
   Products trust grid (products.html)
   ========================================================================== */

.products-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.products-trust-item {
  text-align: center;
}

.products-trust-photo {
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.products-trust-photo.quality { background-image: url('images/products-quality-ingredients.jpg'); }
.products-trust-photo.science { background-image: url('images/products-science-informed.jpg'); }
.products-trust-photo.regulatory { background-image: url('images/products-regulatory-safety.jpg'); }
.products-trust-photo.manufacturing { background-image: url('images/products-manufacturer-partners.jpg'); }

@media (max-width: 1024px) {
  .products-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .products-trust-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   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-photo.jpg'); }
.home-cta-photo { background-image: url('images/home-cta-photo.jpg'); }
.trust-statement-photo { background-image: url('images/trust-statement-photo 2.jpg'); }
/* Bigger than the standard section padding so more of the background photo shows
   around the text (overlay/scrim untouched — see .bg-photo::before above) */
.careers-cta-photo { background-image: url('images/careers-cta-photo.jpg'); padding: calc(var(--section-padding) * 1.5) 0; }

/* Our Direction (Vision & Mission) — lighter overlay than the standard .bg-photo scrim
   so the background photo reads through more clearly behind the vision/mission cards */
.vision-mission-photo::before {
  background: linear-gradient(135deg, rgba(var(--color-dark-rgb), 0.72) 0%, rgba(var(--color-dark-rgb), 0.56) 55%, rgba(var(--color-dark-rgb), 0.44) 100%);
}

/* Growth Strategy steps on a photo background (home page) — the icon badge is
   self-contained, but the number/heading/copy/connector need light-on-dark colors */
.bg-photo .growth-step-number {
  color: var(--color-white);
  opacity: 0.25;
}

.bg-photo .growth-step h4 {
  color: var(--color-white);
}

.bg-photo .growth-step p {
  color: rgba(255, 255, 255, 0.8);
}

.bg-photo .growth-steps::before {
  background: var(--color-white);
  opacity: 0.25;
}

.about-banner-photo { background: var(--color-dark) url('images/about us 2.jpeg') 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 strat 2.jpeg') 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; }
.quality-banner-photo { background: var(--color-dark) url('images/about-visual-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-photo.jpg'); }
.pillar1-visual-photo { background-image: url('images/pillar1-visual-photo.jpg'); }
.pillar2-visual-photo { background-image: url('images/pillar2-visual-photo.jpg'); }
.pillar3-visual-photo { background-image: url('images/pillar3-visual-photo.jpg'); }
.regional-expansion-photo { background-image: url('images/regional expansion 2.jpeg'); }

.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 {
  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;
}

/* Growth Strategy page only — tighter section rhythm now that "The Plan" intro
   section is gone, so the pillars don't feel like they have excess dead space
   between them (quality.html reuses .pillar-section but keeps the default rhythm) */
.page-growth-strategy .pillar-section {
  padding: calc(var(--section-padding) * 0.65) 0;
}

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

/* ---- Quality page — per-principle photos (swap the url() when the client provides
   final assets) ---- */
.quality-ingredients-photo { background-image: url('images/products-quality-ingredients.jpg'); }
.manufacturing-partners-photo { background-image: url('images/products-manufacturer-partners.jpg'); }
.science-informed-photo { background-image: url('images/products-science-informed.jpg'); }
.regulatory-safety-photo { background-image: url('images/products-regulatory-safety.jpg'); }

/* Principle 5 (Continuous Improvement) has no matching photo asset, so it's a
   centered text-only closing statement instead of the two-col pillar layout —
   on the same bg-white as Science-Informed Development */
.quality-principle-centered {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.quality-principle-centered .card-icon {
  margin: 8px auto 20px;
}

.quality-principle-centered h3 {
  margin-bottom: 12px;
}

.quality-principle-centered p {
  color: var(--color-text-secondary);
}

/* ---- 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);
}

/* Home page CEO section only — wider column than the standard 720px .section-header/
   .ceo-quote so the long-form quote wraps across fewer lines and the section reads
   shorter (About Us page's identical CEO markup keeps the default narrower width). */
.ceo-section .section-header,
.ceo-section .ceo-quote {
  max-width: 900px;
}

/* ---- 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;
}

/* Mobile-only photo strip — see the 768px breakpoint for how it's shown */
.join-cta-mobile-photo {
  display: none;
}

.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;
  }

  .hero h1 {
    font-size: 34px;
  }

  #hero-text-2 h1 {
    font-size: 26px;
  }
}

@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 {
    /* On mobile the navbar sits in normal document flow (not fixed over the hero) with
       a solid background, so it no longer hides part of the hero image behind it */
    position: static;
    height: 64px;
    background: var(--color-dark);
    backdrop-filter: none;
  }

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

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

  h1 {
    font-size: 38px;
  }

  .hero h1 {
    font-size: 24px;
  }

  #hero-text-2 h1 {
    font-size: 18px;
  }

  /* Mobile: text + buttons overlay the image just like desktop/tablet (inherits the base
     .hero-media / .hero-body rules above) — only the crop changes. Slide 1 swaps to a
     dedicated portrait crop (Linkedin Cover Photo phone.jpg, via the <picture> source in
     index.html) sized to the media box's own aspect ratio, so it always shows completely
     uncropped. The media box itself is locked to that photo's native ratio (540:788) —
     slide 2 shares the exact same box (no resize jump between slides) and its object-
     position keeps the mother and child in frame within that taller, narrower crop. The
     headline/subtext/buttons are tightened up (see below) so the overlay text reliably
     fits inside that box without overflowing past it. */
  .hero-media {
    aspect-ratio: 540 / 788;
  }

  #hero-media-img-1 {
    object-fit: contain;
  }

  #hero-media-img-2 {
    object-position: 61% center;
  }

  .hero-slide-text {
    max-width: 100%;
  }

  .hero h1 {
    margin-bottom: 14px;
  }

  .hero-subtext {
    margin-bottom: 20px;
  }

  .hero-body .btn-group {
    gap: 10px;
    /* The heart the hands form on slide 1 fills roughly the top two-thirds of the photo
       (see Linkedin Cover Photo phone.jpg), so the button group's natural (centered)
       position sat right across the bottom of the heart. transform (not margin/position)
       shifts just the buttons down clear of it, without affecting the headline/subtext
       above — they stay exactly where they were, since transform doesn't change layout. */
    transform: translateY(80px);
  }

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

  .hero-arrow {
    right: var(--space-2);
    width: 40px;
    height: 40px;
  }

  .hero-arrow svg {
    width: 18px;
    height: 18px;
  }

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

  /* The banner is a portrait photo shown in a short, wide box, so cover scales it up
     and crops top/bottom, centered by default. The arrow tip sits near the top of the
     source photo, so anchoring the crop to the top (instead of center) keeps it fully
     in view at every mobile width, rather than being trimmed off on wider phones. */
  .growth-banner-photo {
    background-position: top;
  }

  /* This section's height is driven by its (fairly long) text content, so on mobile it
     ends up much taller/narrower than the wide source photo — cover crops in tight
     horizontally. The scale itself sits right-of-center in the source photo (roughly
     54%–91% width), so the default centered crop clipped its right pan almost entirely.
     Shifting the crop to 72% keeps the whole scale in frame at typical phone widths. */
  .trust-statement-photo {
    background-position: 72% center;
  }

  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 {
    gap: 20px;
  }

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

  /* The stacked text + button fill most of the section height on mobile, so the full-
     bleed background photo behind them would get cropped down to a narrow sliver by
     background-size: cover — cutting out the team's faces (upper-middle of the source
     photo). Instead, the photo shows uncropped as its own strip above the text (see
     .join-cta-mobile-photo), and the section behind the text drops back to a plain dark
     background so nothing has to fight the overlay for legibility. */
  .careers-cta-photo {
    padding: calc(var(--section-padding) * 0.85) 0;
    background-image: none;
  }

  .careers-cta-photo::before {
    background: none;
  }

  .join-cta-mobile-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1280 / 837;
    background: url('images/careers-cta-photo.jpg') center / cover no-repeat;
    margin-bottom: var(--space-6);
  }

  .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 {
    font-size: 32px;
  }

  .hero h1 {
    font-size: 20px;
  }

  #hero-text-2 h1 {
    font-size: 15px;
  }

  :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);
}

.dash-form-actions .is-danger {
  margin-right: auto;
}

/* ---- Contact message viewer (dashboard) ---- */
.dash-message-meta {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.dash-message-view h3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.dash-message-body {
  white-space: pre-wrap;
  color: var(--color-text-primary);
  line-height: 1.7;
}

.dash-cell-message {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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