/* CSS Custom Properties for Theme Management */
:root {
  /* Light Mode Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #5a6169;
  --text-muted: #495057;
  --border-color: #dee2e6;
  --accent-color: #000000;
  --accent-hover: #333333;
  /* Brand gold - single source of truth (added 2026-07-27).
     Light-mode value is the darkened gold: #ffd700 measures 1.4:1 on #ffffff,
     far below the 4.5:1 WCAG AA floor, so bright gold is dark-mode only.
     #8a6000 measures 5.59:1 on white. Never hardcode a yellow hex again -
     the site carried 6 competing values for what is meant to be one brand
     colour: #ffd700, #fbbf24, #a16207, #9a6c00, #8a6000 and rgba(180,120,0)
     which is #b47800.

     RGBA CHANNEL FORM (C-AUD-56, decided 2026-07-27): rgba() cannot consume
     var(--gold), so --gold-rgb is the raw-channel companion for every
     translucent gold accent (borders, glows, shadows, the canvas stardust
     effect in script_page.js). It is now theme-aware, mirroring --gold's own
     light-base / dark-override structure: this block sets the deep,
     WCAG-calibrated channel (180, 120, 0) as the default, and
     [data-theme="dark"] below overrides it to the bright channel
     (255, 215, 0). Every rgba(var(--gold-rgb), ...) accent - hero headshot
     border/glow, mini-agent-strip borders, the Maya title pulse (including
     its @keyframes, which can only pick up a theme change through the
     custom property itself, not a scoped selector rule), the CTA hover
     glow, the consent-accept border - now darkens in light mode
     automatically through this one token, no per-selector override needed.
     --gold-deep-rgb stays as an explicit "always deep" escape hatch for the
     one rule (.award-solas-badge) that forced it before this token existed;
     that rule's [data-theme="light"] override is now redundant (same value
     either way in light mode) but left alone, not touched by this change.

     CACHE COUPLING: this file DEFINES --gold/--gold-rgb and
     styles_addendum.css CONSUMES them. Both are served with
     max-age=31536000. Their ?v= keys in the HTML must move together -
     bumping only the consumer is worse than bumping neither, because it
     guarantees a fresh consumer resolving var(--gold) against a stale
     definer that has never heard of it. That shipped live on 2026-07-27
     and was caught in gate review. */
  --gold: #8a6000;
  --gold-rgb: 180, 120, 0;
  --gold-deep-rgb: 180, 120, 0;
  --shadow: rgba(0, 0, 0, 0.1);
  --shadow-hover: rgba(0, 0, 0, 0.2);

  /* Typography */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  /* C-AUD-16, 2026-07-28: the 9-step scale above never matched actual usage - 6 distinct
     values were hardcoded outside it (2 clusters of intentionally distinct sizes: the
     .metric-label component alone uses 2 different sizes at 2 different breakpoints, not
     drift). Formalized here as named tokens rather than left as repeated magic numbers,
     zero visual change - every occurrence still resolves to its exact original px value. */
  --font-size-9: 0.5625rem;
  --font-size-9-6: 0.6rem;
  --font-size-10: 0.625rem;
  --font-size-10-4: 0.65rem;
  --font-size-22: 1.375rem;
  --font-size-28-8: 1.8rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  /* C-AUD-16, 2026-07-28: same finding as the font-size scale above, at much larger scale -
     17 distinct off-scale values were repeated as magic numbers instead of tokens. 3 further
     off-scale values (145px, 90px, 120px) were checked and excluded on purpose: they are
     computed layout offsets (fixed-banner clearance, nav-bar clearance) tied to specific
     other elements' measured heights, not part of this visual rhythm scale - formalizing them
     here would misrepresent them as design choices rather than derived values. */
  --spacing-2: 0.125rem;
  --spacing-2-4: 0.15rem;
  --spacing-5-6: 0.35rem;
  --spacing-6: 0.375rem;
  --spacing-6-4: 0.4rem;
  --spacing-9-6: 0.6rem;
  --spacing-10: 0.625rem;
  --spacing-12: 0.75rem;
  --spacing-14: 0.875rem;
  --spacing-12-8: 0.8rem;
  --spacing-13-6: 0.85rem;
  --spacing-14-4: 0.9rem;
  --spacing-17-6: 1.1rem;
  --spacing-20: 1.25rem;
  --spacing-20-8: 1.3rem;
  --spacing-28: 1.75rem;
  --spacing-40: 2.5rem;
  --spacing-56: 3.5rem;
  --spacing-80: 5rem;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Hero Specifics - OPTIMIZED */
  --hero-title-size: 3.8rem;
  /* Scaled back from 4.5rem for better flow */
  --hero-sub-size: 1.25rem;
}

/* Dark Mode Colors */
[data-theme="dark"] {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --text-muted: #8890a8;
  --border-color: #30363d;
  --accent-color: #ffffff;
  --accent-hover: #e6e6e6;
  /* Bright gold: 13.49:1 on --bg-primary, 12.33:1 on --bg-secondary */
  --gold: #ffd700;
  --gold-rgb: 255, 215, 0;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-hover: rgba(0, 0, 0, 0.5);
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* jxs-typography-standard baseline (2026-07-27): prevents 1-2 word orphaned last
   lines in wrapped body copy. Applied once here rather than per-component, so
   every current and future block of text is covered automatically. */
p,
li {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color var(--transition-normal),
    color var(--transition-normal);
}

/* Reserves space for the fixed-position #jxs-consent-banner so the footer's own content is
   reachable at max scroll instead of sitting permanently underneath it while the banner is
   still shown (jxs-test-standard.md 2.4.11 "fixed elements must not obscure reachable
   content", C-AUD-30). Scoped to while the banner is actually visible - previously
   unconditional, which left a permanent dead band below the footer on every page load after
   the visitor had already accepted or declined.
   --consent-banner-h is set by JS to the banner's REAL measured height (2026-08-03,
   C-AUD-240): the banner wraps to 2+ lines on narrow viewports but is a single row on
   desktop, so a single hardcoded px value is either too small on mobile or leaves an
   oversized empty gap on desktop - exactly the bug this replaces. 145px is the fallback for
   the brief instant before JS measures (or if JS is unavailable), sized for the taller
   mobile case so nothing is ever obscured even before measurement lands.
   Renamed from #consent-banner/.consent-banner-visible (2026-08-13, Stage 5 rebuild,
   GA_REARCHITECTURE_PLAN.md, closes C-AUD-293) to match jxs-consent-v2.js's new element IDs -
   this is the same reserved-space mechanism, reused rather than reinvented, now wired to the
   Consent Mode v2 banner instead of the pre-Stage-1 GA consent banner it originally served. */
body.jxs-consent-banner-visible {
  padding-bottom: var(--consent-banner-h, 145px);
}

/* Basic Consent Mode v2 banner (GA_REARCHITECTURE_PLAN.md Stage 5). Fixed to the viewport
   bottom, shown until the visitor picks one of the 3 equal-prominence first-layer actions. */
.jxs-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 16px var(--shadow);
  /* B-19 (2026-08-13): vertical padding tightened from spacing-md to spacing-sm, and
     line-height tightened from the inherited body value (1.6) to 1.35 - part of the
     panel-footprint fix alongside the details/summary collapse below. Font sizes are left
     untouched (measured against the live site: banner text was already 14-16px, at or below
     the 16-18px body/hero baseline - the oversized read came from stacked content and
     spacing, not point size, so shrinking type further was not the right lever). */
  padding: var(--spacing-xs) var(--spacing-lg);
  line-height: 1.35;
}

.jxs-consent-banner[hidden] {
  display: none;
}

.jxs-consent-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.jxs-consent-banner__title {
  font-weight: 700;
  margin: 0 0 var(--spacing-2) 0;
  color: var(--text-primary);
}

.jxs-consent-banner__desc {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.jxs-consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* All 3 first-layer actions share this one rule - equal DOM prominence via one class, per
   GA_REARCHITECTURE_PLAN.md Stage 5 item 3 (DPC hard requirement: Accept/Reject/Manage must
   not read as a primary button plus 2 demoted links).
   B-21 (2026-08-13, Janet's live screenshot): at font-size-base/weight-600/spacing-lg padding
   this read as the SAME visual weight as the site's primary "Send Message" CTA (.btn-primary),
   competing with it rather than sitting as a secondary/utility control. font-size-xs (12px) is
   not a new value - it's the same size already used a few rules below on
   .jxs-consent-persistent-trigger, a real interactive control on this exact page. min-height:
   44px is the WCAG 2.5.5/2.5.8 touch-target floor and does NOT move: it now does the work of
   keeping the real clickable area at 44px+ once the content itself (12px text, 4px vertical
   padding) would otherwise render shorter. */
.jxs-consent-btn {
  min-height: 44px;
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: 8px;
  border: 2px solid var(--accent-color);
  background-color: var(--accent-color);
  color: var(--bg-primary);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.jxs-consent-btn:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* B-19 (2026-08-13, Janet's live report): this panel measured 446.7px tall on a 1440x900
   viewport (49.6% of the screen) and 812px on a 375x812 mobile viewport (100% - it ran off
   the bottom entirely), because both long category descriptions always rendered fully
   expanded. Fixed measured height after the details/summary collapse + spacing tightening
   below: 313px (34.8%) on 1440x900, 478px (58.9%) on 375x812 - see
   tests/frontend/e2e/consent-v2-flow.spec.ts's "B-19" describe block for the live proof.
   margin-top removed and padding-top tightened to spacing-2 (from spacing-md each); max-height
   + overflow-y is additionally a hard structural cap: even if a visitor manually expands BOTH
   descriptions (see .jxs-consent-category__details below), the panel itself cannot grow past
   this bound - it scrolls internally instead. min(45vh, 360px) so the cap adapts to short
   viewports too without ever exceeding 360px on a tall one. */
.jxs-consent-panel {
  margin-top: 0;
  padding-top: var(--spacing-2);
  border-top: 1px solid var(--border-color);
  max-height: min(45vh, 360px);
  overflow-y: auto;
}

.jxs-consent-panel[hidden] {
  display: none;
}

.jxs-consent-category {
  margin-bottom: var(--spacing-2);
}

/* B-22 (2026-08-13, same live-screenshot batch as B-21): Analytics and Advertising render side
   by side to save further vertical space, on both desktop and mobile - the CLOSED state (label +
   "Details" toggle only) is short enough to fit 2-up even at 375px. --expanded (toggled by the 2
   <details> "toggle" listeners in jxs-consent-v2.js) drops back to a single column the instant
   either category opens, so the full 2-3 sentence description always gets the whole row width
   instead of wrapping cramped inside a half-width mobile column, which would make the panel
   TALLER, the opposite of the goal. Necessary is NOT part of this grid - it stays its own
   full-width row above the pair (different kind of item, no checkbox, always-on). Margin-bottom
   moves from the individual .jxs-consent-category rows (which would double up with the grid's
   own row-gap if the pair ever wraps to 2 rows) onto the pair wrapper itself. */
.jxs-consent-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xs) var(--spacing-md);
  margin-bottom: var(--spacing-2);
}

.jxs-consent-pair--expanded {
  grid-template-columns: 1fr;
}

.jxs-consent-pair > .jxs-consent-category {
  margin-bottom: 0;
}

.jxs-consent-category__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 600;
  color: var(--text-primary);
}

.jxs-consent-category__label input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* Necessary's row has no switch (Ricky's claim/state coupling note, STAGE3_NOTICE_COPY.md
   "BANNER COPY" section 3 - the banner intro promises "2 separate choices" and the category's
   own description says "which is why there is no switch"). margin:0 keeps it visually aligned
   with the checkbox-bearing rows above/below despite having no input to anchor the flex row. */
.jxs-consent-category__label--static {
  margin: 0;
}

.jxs-consent-category__desc {
  margin: var(--spacing-xs) 0 0 28px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* B-19: the analytics/advertising long descriptions collapse behind this native <details> so
   the panel does not always render both fully expanded (see .jxs-consent-panel's comment for
   the live measurements this fixes). Indent lives on the <details> itself, not the summary or
   the nested __desc, so the collapsed summary and the expanded paragraph line up under the
   same left edge as the checkbox label's text, not double-indented. */
.jxs-consent-category__details {
  margin: var(--spacing-2) 0 0 28px;
}

.jxs-consent-category__summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.jxs-consent-category__details .jxs-consent-category__desc {
  margin: var(--spacing-xs) 0 0 0;
}

/* B-20 (2026-08-13, Janet's screenshot): no rule anywhere styled this link, so it fell back to
   the browser's unstyled default link blue - low contrast against the panel's dark-theme
   background and not clearly link-shaped. Reuses --accent-color rather than a new token:
   confirmed via the WCAG relative-luminance formula (not eyeballed) that it clears AA 4.5:1
   against --bg-secondary (the panel's actual background, inherited from .jxs-consent-banner)
   in both themes - 19.9:1 light (#000 on #f8f9fa), 17.3:1 dark (#fff on #161b22), both far
   above the 4.5:1 floor. Explicit underline is the required non-color cue (WCAG 1.4.1): the
   surrounding paragraph renders in --text-secondary (a mid-grey in both themes), so the
   accent-color link is already a different colour from its own paragraph text, and the
   underline confirms "link" regardless of colour perception. */
#jxs-consent-privacy-link {
  color: var(--accent-color);
  text-decoration: underline;
}

#jxs-consent-privacy-link:hover,
#jxs-consent-privacy-link:focus-visible {
  color: var(--accent-hover);
}

.jxs-consent-btn--save {
  margin-top: var(--spacing-2);
}

/* Persistent withdrawal control (Stage 5 item 4): reachable on every page, at any time, not
   tied to clearing browser data. Small fixed tab, bottom-left so it never collides with
   Maya's own chat/agent UI elements, which favour the right side.
   Deliberately full opacity + --text-primary, not --text-secondary at reduced opacity: an
   earlier version used opacity:0.85 for a subtler look, but axe caught it live - opacity
   blends BOTH foreground and background toward whatever's behind the element, so the
   RENDERED contrast (what a real visitor sees) was 3.54:1 against --bg-secondary, below the
   4.5:1 WCAG AA floor, even though --text-secondary alone would have passed at full opacity.
   A withdrawal control failing contrast is the wrong place to economise on visual weight. */
.jxs-consent-persistent-trigger {
  position: fixed;
  left: var(--spacing-sm);
  bottom: var(--spacing-sm);
  z-index: 8000;
  min-height: 24px;
  padding: 6px 12px;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Navigation */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: all var(--transition-normal);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.nav-brand {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--accent-color);
}

.nav-links {
  display: flex;
  align-items: center;
  /* 2026-08-15: was --spacing-2xl (48px), 6 gaps across 7 links = 288px of pure empty
     space, on top of each link's own padding - the main cause of nav-link wrapping once
     "Agent Boutique" became the 7th link. Each link already carries --spacing-md (16px)
     horizontal padding on both sides, so this + that padding still gives ~48px of visual
     separation between adjacent link text, just without wasting it as unclaimed gap. */
  gap: var(--spacing-md);
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-normal);
  position: relative;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 6px;
}

.nav-link:hover {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

.nav-link.active {
  color: var(--accent-color);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-color);
  border-radius: 1px;
}

.theme-toggle {
  background: none;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-lg);
  transition: all var(--transition-normal);
  color: var(--text-primary);
}

.theme-toggle:hover {
  border-color: var(--accent-color);
  background-color: var(--bg-secondary);
  transform: scale(1.1);
}

.theme-icon {
  font-size: var(--font-size-lg);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

/* Hamburger menu toggle - desktop-hidden by default (2026-07-26, C-AUD-37 fix).
   .nav-links itself has no mobile-visible state until JS adds .open to it -
   see the max-width:768px block below and the toggle handler in
   script_contact.js's initializeNavigation(). */
.nav-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 2px solid var(--border-color);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-normal);
}
.nav-menu-toggle:hover {
  border-color: var(--accent-color);
  background-color: var(--bg-secondary);
}
.nav-menu-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Hamburger -> X when open */
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 2026-08-15: widened from max-width:768px to 1140px. First tried reusing this codebase's
   established 1024px breakpoint, measured it directly, and 1024px was still not enough - 7
   nav links (post "Agent Boutique" addition) wrap up to ~1100px even after tightening
   .nav-links gap above. Real clean threshold, measured by rendering at 20px increments and
   checking actual row count, sits between 1100-1120px; 1140px keeps a safety margin above
   that measured point rather than reusing 1024px just because it is the existing convention -
   nav genuinely needs more room than this site's other 1024px-keyed grids do, since it has
   more inline items than anything else on the page. */
@media (max-width: 1140px) {
  .nav-menu-toggle {
    display: flex;
  }
  .nav-links {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 8px 20px var(--shadow);
    padding: 0.5rem 0;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links .nav-link {
    padding: 0.9rem var(--spacing-lg);
    border-radius: 0;
    width: 100%;
  }
  .nav-links .nav-link.active::after {
    display: none;
  }
  .nav-links .nav-link.active {
    background-color: var(--bg-secondary);
  }
}

/* ─── Hero Section - single canonical ruleset (2026-07-26 consolidation) ───
   Previously scattered across 3 generations of redesigns, split between this
   file and an inline <style> block in index.html, with a byte-for-byte
   duplicate `.hero` a few hundred lines below and several rules (.hero-image-item,
   .hero-agent-image, .hero-agent-title, .hero-content, .hero-title, .hero-cta)
   left over from a markup structure that no longer exists (verified zero usage
   in the current index.html before removal). This is now the only hero LAYOUT
   definition - do not add a second one in index.html or elsewhere in this file.
   Desktop: photo+name top-left, Agent Boutique strip below it same column,
   text column on the right. Mobile (<=768px): stacked photo -> text -> agents,
   so the agent strip renders right after the CTA buttons at the end of the
   text column instead of up near the photo. */
.hero {
  padding-top: 90px;
  padding-bottom: 2rem;
  background: var(--bg-primary);
}

.hero-container {
  max-width: 100%;
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-areas: "photo text" "agents text";
  align-items: start;
  padding: 1.5rem var(--spacing-lg);
  gap: 2rem;
}

.hero-images-grid {
  grid-area: photo;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-20);
  min-width: 0;
}

/* Agent Boutique block: own grid area so mobile can relocate it after the
   CTA buttons while desktop keeps it under the photo (see the media query
   below). */
.hero-agents-block {
  grid-area: agents;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-20);
  margin-top: 1.5rem;
}

.hero-text-content {
  grid-area: text;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.hero-text-content .headline-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-13-6);
}

@media (max-width: 768px) {
  .hero-container {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "text" "agents";
  }
  .hero-agents-block {
    margin-top: 0.5rem;
  }
}

/* Headshot circle */
.hero-headshot {
  width: 216px;
  height: 216px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid rgba(var(--gold-rgb), 0.4);
  box-shadow: 0 0 30px rgba(var(--gold-rgb), 0.15);
  transition: box-shadow 0.3s ease;
  display: block;
  flex-shrink: 0;
}
.hero-headshot:hover {
  box-shadow: 0 0 45px rgba(var(--gold-rgb), 0.35);
}

.hero-headshot-name {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.9;
  text-align: center;
  color: var(--text-secondary);
  margin: 0;
}

/* Mini agent strip */
.hero-agents-mini {
  display: flex;
  gap: var(--spacing-13-6);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-agent-mini-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
  cursor: pointer;
}
.hero-agent-mini-item:hover {
  opacity: 1;
  transform: translateY(-3px);
}
.hero-agent-mini-item img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(var(--gold-rgb), 0.3);
}

/* Ming's re-edited source composes the AI-disclosure badge low in frame; at this 74px crop
   the default center position clips her face while still showing the full badge. Shifting
   to the top of the source keeps her face fully in frame and reduces the badge to a small
   cropped text fragment (the badge cannot be fully excluded at this crop size - confirmed by
   testing every object-position value from 0-100%; top is the best available compromise). */
.ming-mini-photo {
  object-position: center top;
}
.hero-agent-mini-item span {
  font-size: var(--font-size-10);
  opacity: 0.9;
  text-align: center;
}
.hero-agent-mini-item span:last-child {
  font-size: var(--font-size-9);
  opacity: 0.85;
}

/* Quotable definitional sentence */
.hero-definition {
  font-size: var(--hero-sub-size);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: var(--spacing-12) 0 0.25rem;
  max-width: 60ch;
}

h1.headline-en-title {
  font-size: clamp(16px, 1.9vw + 6px, 28px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  h1.headline-en-title {
    white-space: normal;
  }
}

.zh-signature {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.9;
  letter-spacing: 0.08em;
  margin-top: 0.5rem;
}

/* NOT dead code, NOT janetxiushi.me hero markup - this file is loaded cross-domain by
   agents.janetxiushi.me/index.html, which uses these exact class names in its own
   "Agents Showcase" grid (.agents-images-grid > .hero-agent-image / .hero-agent-title).
   Verified live 2026-07-26 before restoring these after an incorrect first pass deleted
   them as apparently-unused. Do not remove without checking agents.janetxiushi.me too. */
.hero-agent-image {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hero-agent-image:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Agents Showcase profile photo (2026-07-28): borrows the circular, borderless "intro"
   treatment already used for the mini Maya/Ming/Maggie strip in this file's OWN hero
   (.hero-agent-mini-item img) rather than the tall rectangular editorial-photo look these 3
   cards used before - Janet's explicit choice between the two. Higher specificity than
   .hero-agent-image (1 class vs class+type) wins without !important. */
.agent-photo-circle {
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(var(--gold-rgb), 0.35);
}

.agent-photo-circle img.hero-agent-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: none;
}

@media (max-width: 768px) {
  .agent-photo-circle {
    width: 160px;
    height: 160px;
  }
}
.hero-agent-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin: 0;
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2xl);
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ========================================
   HERO SECTION - GRANULAR FONT CONTROLS 1st Dec 2025
   ======================================== */

/* Remove bullet points from all headline lists */
.headline-en-title,
.headline-zh-title,
.headline-en-sub,
.headline-zh-sub {
  list-style: none;
  padding-left: 0;
}

/* English Title - Main Heading */
.headline-en-title li {
  font-size: 25px;
  /* This property controls the font size */
  font-weight: 700;
  line-height: 1.1;
  margin-top: var(--spacing-40);
  /* Increased gap from the top */
  margin-bottom: 8px;
}

/* English Subheading - Body Text */
.headline-en-sub li {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: var(--spacing-10);
  /* 1rem = 16px */
}

/* Chinese Title - Main Heading */
.headline-zh-title li {
  font-size: var(--font-size-22);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 8px;
}

/* Chinese Subheading - Body Text */
.headline-zh-sub li {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 16px;
  /* 1rem = 16px */
}

/* Key tagline highlight - theme-aware */
.headline-en-sub li strong.highlight {
  color: var(--text-primary);
  font-weight: 600;
}



.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  border-color: var(--accent-color);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-hover);
}

.btn-secondary {
  background-color: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-secondary:hover {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  transform: translateY(-2px);
}

/* Slideshow */
.hero-slideshow {
  position: relative;
  animation: fadeInRight 1s ease-out 0.3s both;
}

.slideshow-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Standard widescreen, works better on laptops */
  height: auto;
  max-height: 500px;
  /* Reasonable height for laptop screens */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px #0000001a;
}

/* make hero images fill, centered */
.slide-image {
  width: 100%;
  height: 100%;
  display: block;
  /* removes baseline gap */
  object-fit: cover;
  /* fill and crop */
  object-position: center;
  /* center the crop */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.slide.active {
  opacity: 1;
}

.slide-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-lg);
  border: 2px dashed var(--border-color);
}

.slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-lg);
}

.slide-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.slide-btn:hover {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  transform: scale(1.1);
}

.theme-icon {
  font-size: var(--font-size-lg);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2xl);
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  border-color: var(--accent-color);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-hover);
}

.btn-secondary {
  background-color: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-secondary:hover {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  transform: translateY(-2px);
}

/* Slideshow */
.hero-slideshow {
  position: relative;
  animation: fadeInRight 1s ease-out 0.3s both;
}

.slideshow-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: 1000px;
  /* Increased from 800px for more vertical space */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px #0000001a;
  /* hex alpha (rgba(0,0,0,0.10)) */
}

/* make hero images fill, centered */
.slide-image {
  width: 100%;
  height: 100%;
  display: block;
  /* removes baseline gap */
  object-fit: cover;
  /* fill and crop */
  object-position: center;
  /* center the crop */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.slide.active {
  opacity: 1;
}

.slide-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--font-size-lg);
  border: 2px dashed var(--border-color);
}

.slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-lg);
}

.slide-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.slide-btn:hover {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  transform: scale(1.1);
}

.slide-indicators {
  display: flex;
  gap: var(--spacing-sm);
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--border-color);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.indicator.active {
  background-color: var(--accent-color);
}

/* Section Styles */
.section-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-3xl);
  color: var(--text-primary);
  position: relative;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: var(--accent-color);
}

/* Experience Timeline */
.experience {
  padding: var(--spacing-3xl) 0;
  background-color: var(--bg-secondary);
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--border-color);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--spacing-3xl);
  padding-left: var(--spacing-80);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--accent-color);
  border: 4px solid var(--bg-secondary);
}

.timeline-date {
  position: absolute;
  left: -120px;
  top: 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.timeline-content {
  background-color: var(--bg-primary);
  padding: var(--spacing-xl);
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--shadow);
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.timeline-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px var(--shadow-hover);
}

.timeline-company {
  margin-bottom: var(--spacing-sm);
}

.timeline-company a {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.timeline-company a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.timeline-role {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.timeline-description {
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

.timeline-impact {
  color: var(--text-secondary);
  font-style: italic;
  padding: var(--spacing-md);
  background-color: var(--bg-secondary);
  border-radius: 8px;
  border-left: 4px solid var(--accent-color);
}

/* Grid Sections */
.projects,
.community {
  padding: var(--spacing-3xl) 0;
}

.projects {
  background-color: var(--bg-primary);
}

.community {
  background-color: var(--bg-secondary);
}

.projects-grid,
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  max-width: 900px;
  margin: 0 auto;
}

.project-tile,
.community-tile {
  aspect-ratio: 1;
  background-color: var(--bg-tertiary);
  border-radius: 12px;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  opacity: 0.6;
  filter: grayscale(100%);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.project-tile::before,
.community-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, var(--accent-color) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.project-tile:hover,
.community-tile:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 40px var(--shadow-hover);
  border-color: var(--accent-color);
}

.project-tile:hover::before,
.community-tile:hover::before {
  opacity: 0.1;
}

.project-content,
.community-content {
  position: relative;
  z-index: 2;
}

.project-content h3,
.community-content h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.project-content p,
.community-content p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Responsive Design for Grids */
@media (max-width: 768px) {

  .projects-grid,
  .community-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .project-tile,
  .community-tile {
    aspect-ratio: auto;
    min-height: 150px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {

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

  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .hero-images-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .hero-image-item:last-child {
    grid-column: 1 / -1;
  }

  .hero-agent-image {
    min-height: 60vh;
  }

  .hero-text-content {
    padding: var(--spacing-lg);
  }
}

/* Gallery Overlay */
.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000e6;
  /* rgba(0, 0, 0, 0.9) */
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.gallery-overlay.active {
  display: flex;
}

.gallery-container {
  background-color: var(--bg-primary);
  border-radius: 12px;
  padding: var(--spacing-2xl);
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px #00000080;
  /* rgba(0, 0, 0, 0.5) */
}

.gallery-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: none;
  border: none;
  font-size: var(--font-size-3xl);
  color: var(--text-primary);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--transition-fast);
}

.gallery-close:hover {
  background-color: var(--bg-secondary);
}

.gallery-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xl);
  color: var(--text-primary);
  text-align: center;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.gallery-upload,
.gallery-youtube {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  align-items: center;
  justify-content: center;
}

.upload-btn,
.youtube-btn {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--accent-color);
  color: var(--bg-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.upload-btn:hover,
.youtube-btn:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
}

#imageUpload {
  display: none;
}

#youtubeUrl {
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  min-width: 300px;
}

/* Footer */
.footer {
  background-color: var(--bg-tertiary);
  padding: var(--spacing-xl) 0 var(--spacing-sm);
  text-align: center;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
}

/* Footer links (2026-08-01 Janet directive, uniform across janetxiushi.me,
   agents.janetxiushi.me and maya.janetxiushi.me): desktop shows all 5 links on 1 centered
   row, tablet (<=1024px) shows 2 per line, small phones (<=480px) stack 1 per line.
   Replaces the fixed 3-column/480px-max grid whose ~150px tracks wrapped every link
   mid-text on wide screens. white-space:nowrap keeps each link's text on 1 line at every
   breakpoint; the longest link (~170px at 12px) fits a 320px viewport with room to spare,
   so no WCAG 1.4.10 reflow risk. This stylesheet is shared cross-origin by
   agents.janetxiushi.me too. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm) var(--spacing-lg);
  margin: var(--spacing-sm) auto 0;
  font-size: 12px;
}

.footer-links a {
  color: inherit;
  display: block;
  padding: 6px 4px;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: var(--spacing-sm) var(--spacing-xl);
  }

  /* An odd link count leaves 1 item alone in column 1; grid's justify-content
     centers the 2-column block as a whole, not each row, so the orphan reads
     off-center against the paired rows above it. Span it across both columns
     and center it in place instead. */
  .footer-links a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer-links {
    grid-template-columns: max-content;
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  /* .nav-links visibility is now handled by the hamburger-menu rule near
     .theme-toggle (2026-07-26, C-AUD-37) - do not set display:none here,
     it would permanently override the JS-driven .open toggle. */

  .hero-container {
    grid-template-columns: 1fr;
    padding: var(--spacing-lg) var(--spacing-md);
    gap: var(--spacing-lg);
  }

  .hero-images-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .hero-agent-image {
    min-height: 50vh;
  }

  .hero-text-content {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .hero-title {
    font-size: var(--font-size-3xl);
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
  }

  .hero-cta {
    justify-content: center;
    flex-wrap: wrap;
  }

  .timeline-date {
    position: static;
    margin-bottom: var(--spacing-sm);
  }

  .timeline-item {
    padding-left: var(--spacing-40);
  }

  .timeline::before {
    left: 15px;
  }

  .timeline-item::before {
    left: 6px;
  }

  .grid-3x3 {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .gallery-container {
    margin: var(--spacing-lg);
    padding: var(--spacing-lg);
  }

  .gallery-upload,
  .gallery-youtube {
    flex-direction: column;
  }

  #youtubeUrl {
    min-width: auto;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-md);
  }

  .nav-container {
    padding: 0 var(--spacing-md);
  }

  .hero-title {
    font-size: var(--font-size-2xl);
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .timeline-content {
    padding: var(--spacing-lg);
  }

  .grid-item {
    padding: var(--spacing-lg);
  }
}

/* Social Media Icons - lives at the very bottom of .footer, below .footer-links */
.footer-social {
  margin-top: var(--spacing-lg);
}

.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-color);
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition-normal);
  opacity: 0.6;
  filter: grayscale(100%);
  position: relative;
  overflow: hidden;
}

.social-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, var(--accent-color) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.social-icon svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
  transition: all var(--transition-normal);
}

.social-icon:hover {
  opacity: 1;
  filter: grayscale(0%);
  color: var(--accent-color);
  border-color: var(--accent-color);
  background-color: var(--bg-primary);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 25px var(--shadow-hover);
}

.social-icon:hover::before {
  opacity: 0.1;
}

.social-icon:hover svg {
  transform: scale(1.1);
}

/* Social icon specific colors on hover */
.social-icon[aria-label="LinkedIn"]:hover {
  color: #0077b5;
  border-color: #0077b5;
}

.social-icon[aria-label="Medium"]:hover {
  color: #00ab6c;
  border-color: #00ab6c;
}

.social-icon[aria-label="GitHub"]:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.social-icon[aria-label="Instagram"]:hover {
  color: #e4405f;
  border-color: #e4405f;
}

.social-icon[aria-label="YouTube"]:hover {
  color: #ff0000;
  border-color: #ff0000;
}

/* Contact Form Styles */
.contact {
  padding: var(--spacing-3xl) 0;
  background-color: var(--bg-secondary);
}

.contact-form {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--bg-primary);
  padding: var(--spacing-2xl);
  border-radius: 12px;
  box-shadow: 0 8px 30px var(--shadow);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-group label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.form-group input,
.form-group textarea {
  padding: var(--spacing-md);
  /* WCAG 1.4.11 non-text contrast (C-AUD-22): --border-color (#dee2e6/#30363d) measures only
     1.24:1 light / 1.42:1 dark against this element's own background, far below the 3:1 floor -
     the shared token is exempt for purely decorative dividers, but a form input's boundary is
     not decorative. --text-secondary already exists and clears 3:1 by a wide margin (5.4-6.3:1)
     in both themes, so reused here rather than inventing a new colour. */
  border: 2px solid var(--text-secondary);
  border-radius: 8px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  background-color: var(--bg-primary);
  box-shadow: 0 0 0 3px #0000001a;
  /* rgba(0,0,0,0.1) */
}

.form-group input.error,
.form-group textarea.error {
  border-color: #dc3545;
  background-color: #dc35450d;
  /* rgba(220,53,69,0.05) */
}

.form-group input.valid,
.form-group textarea.valid {
  border-color: #28a745;
  background-color: #28a7450d;
  /* rgba(40,167,69,0.05) */
}

.error-message {
  color: #dc3545;
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  min-height: 16px;
  display: block;
}

/* Visible confirmation tick next to the "I am a human not a bot." label text, distinct from
   the browser's own native checkbox glyph - shown/hidden purely via the :checked sibling
   selector so it always matches the real checkbox state with no JS dependency. */
.checkbox-label .human-tick {
  display: inline-block;
  margin-left: 0.35em;
  color: #28a745;
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.checkbox-label input[type="checkbox"]:checked ~ .human-tick {
  opacity: 1;
}

.form-status {
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: center;
  margin-top: var(--spacing-sm);
  min-height: 20px;
}

.form-status.success {
  color: #28a745;
}

.form-status.error {
  color: #dc3545;
}

.char-counter,
.character-count {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: right;
  margin-top: var(--spacing-xs);
}

.form-security {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background-color: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.security-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.security-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-color);
}

.security-check label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: not-allowed;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.submit-btn:enabled {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  border-color: var(--accent-color);
  cursor: pointer;
}

.submit-btn:enabled:hover {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--shadow-hover);
}

.submit-btn:disabled {
  opacity: 0.6;
  filter: grayscale(100%);
}

.btn-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Responsive adjustments for contact form */
@media (max-width: 768px) {
  .social-icons {
    gap: var(--spacing-lg);
  }

  .social-icon {
    width: 45px;
    height: 45px;
  }

  .social-icon svg {
    width: 20px;
    height: 20px;
  }

  .contact-form {
    padding: var(--spacing-lg);
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  /* 2026-08-15: Pinterest (7th icon) was wrapping to its own line on real phones - measured
     live: at 40px icons + 16px gap, the row needs 376px, but a 320px-390px viewport's actual
     content width (padding already subtracted) is only 288-358px. Tightened to fit the
     narrowest real case (320px, 288px available) with margin: 7 x 34px + 6 x 4px = 262px. */
  .social-icons {
    gap: var(--spacing-xs);
  }

  .social-icon {
    width: 34px;
    height: 34px;
  }

  .social-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Company Header Styles */
.company-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}

.company-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-secondary);
  padding: 3px;
  transition: all 0.3s ease;
}

.company-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px #0000001a;
  /* rgba(0,0,0,0.1) */
}

/* Honors & Awards Section */
.honors-awards {
  padding: var(--spacing-80) 0;
  background: var(--bg-primary);
}

.awards-showcase {
  margin-top: var(--spacing-40);
}

.awards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.award-item {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 2rem;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.award-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
}

.award-header {
  margin-bottom: 1.5rem;
}

.award-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-12);
  line-height: 1.4;
}

.award-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.award-issuer {
  color: var(--text-secondary);
  font-weight: 500;
}

.award-date {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.award-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.award-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.award-image-container {
  margin-top: auto;
}

.award-image-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.award-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* LandyCoo image size constraint - 800x550px max */
.award-image-landycoo {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.award-image-landycoo .award-image {
  max-width: 800px;
  max-height: 550px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.award-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.award-link:hover .award-image {
  transform: scale(1.02);
}

.award-link-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.award-link:hover .award-link-icon {
  opacity: 1;
}

.award-image-placeholder {
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.award-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.award-images-grid .award-image-wrapper {
  height: 100%;
  min-height: 250px;
  display: flex;
  align-items: stretch;
}

.award-images-grid .award-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark mode adjustments for awards */
[data-theme="dark"] .award-item {
  background: var(--bg-secondary);
  border-color: #333333;
}

[data-theme="dark"] .award-item:hover {
  border-color: var(--accent-color);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .award-link-icon {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
}

/* Responsive Design for Awards Section */
@media (max-width: 768px) {
  .awards-grid {
    gap: 1.5rem;
  }

  .award-item {
    padding: 1.5rem;
  }

  .award-header h3 {
    font-size: 1.1rem;
  }

  .award-description {
    font-size: 0.9rem;
  }

  .award-images-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .honors-awards {
    padding: 3rem 0;
  }

  .award-item {
    padding: var(--spacing-20);
  }

  .award-header h3 {
    font-size: 1rem;
  }

  .award-description {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
}

/* Supply Chain Experience Showcase Styles */
.supply-chain-experience {
  padding: var(--spacing-80) 0;
  background: var(--bg-primary);
}

.experience-showcase {
  margin-top: var(--spacing-40);
}

.showcase-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: var(--spacing-40);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.showcase-item {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.showcase-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px #0000001a;
  /* rgba(0,0,0,0.1) */
  border-color: var(--accent-color);
}

.showcase-item .company-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-bottom: 1rem;
}

.showcase-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--bg-primary);
  padding: 4px;
}

.showcase-item h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.showcase-item h4 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent-color);
  margin-bottom: var(--spacing-12);
  line-height: 1.3;
}

.achievement-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.achievement-summary {
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  flex: 1;
}

.key-metrics {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: auto;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 60px;
}

.metric-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-color);
  display: block;
  line-height: 1.2;
}

.metric-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
  line-height: 1.2;
}

/* Dark mode adjustments for metric labels */
[data-theme="dark"] .metric-label {
  color: var(--text-muted);
}

[data-theme="light"] .metric-label {
  color: var(--text-muted);
}

.transformation-summary {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 2rem;
  border: 1px solid var(--border-color);
  max-width: 1000px;
  margin: 0 auto;
}

.transformation-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  text-align: center;
}

.transformation-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 1rem;
}

.core-competencies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-9-6);
  justify-content: center;
}

.competency {
  background: var(--accent-color);
  color: var(--bg-primary);
  padding: var(--spacing-6-4) var(--spacing-12-8);
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.competency:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-hover);
}

/* Dark mode specific adjustments for competencies */
[data-theme="dark"] .competency {
  background: var(--accent-color);
  color: var(--bg-primary);
}

[data-theme="light"] .competency {
  background: var(--accent-color);
  color: var(--bg-primary);
}

/* Responsive Design for Supply Chain Section */
@media (max-width: 1024px) {
  .showcase-grid-2x2 {
    max-width: 900px;
    gap: var(--spacing-20);
  }

  .showcase-item {
    padding: var(--spacing-20);
    min-height: 260px;
  }

  .showcase-item h3 {
    font-size: 1.1rem;
  }

  .showcase-item h4 {
    font-size: 0.95rem;
  }

  .achievement-summary {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .showcase-grid-2x2 {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 100%;
  }

  .showcase-item {
    padding: 1rem;
    min-height: auto;
  }

  .showcase-item h3 {
    font-size: 1rem;
  }

  .showcase-item h4 {
    font-size: 0.9rem;
  }

  .achievement-summary {
    font-size: 0.8rem;
    margin-bottom: var(--spacing-12);
  }

  .key-metrics {
    gap: var(--spacing-12);
    justify-content: center;
  }

  .metric-value {
    font-size: 1.1rem;
  }

  .metric-label {
    font-size: var(--font-size-10-4);
  }

  .transformation-summary {
    padding: 1.5rem;
  }

  .transformation-content h3 {
    font-size: 1.3rem;
  }

  .transformation-content p {
    font-size: 0.9rem;
  }

  .core-competencies {
    gap: var(--spacing-6-4);
  }

  .competency {
    font-size: 0.75rem;
    padding: 0.3rem var(--spacing-9-6);
  }
}

@media (max-width: 480px) {
  .supply-chain-experience {
    padding: 3rem 0;
  }

  .showcase-item {
    padding: var(--spacing-12);
  }

  .showcase-logo {
    width: 28px;
    height: 28px;
  }

  .company-header {
    gap: 0.5rem;
    margin-bottom: var(--spacing-12);
  }

  .showcase-item h3 {
    font-size: 0.9rem;
  }

  .showcase-item h4 {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }

  .achievement-summary {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .key-metrics {
    gap: 0.5rem;
  }

  .metric-value {
    font-size: 1rem;
  }

  .metric-label {
    font-size: var(--font-size-9-6);
  }

  .transformation-summary {
    padding: 1rem;
  }

  .transformation-content h3 {
    font-size: 1.1rem;
  }

  .transformation-content p {
    font-size: 0.8rem;
    line-height: 1.5;
  }
}

/* Dark mode adjustments for new sections */
[data-theme="dark"] .showcase-item {
  background: var(--bg-secondary);
  border-color: #333333;
}

[data-theme="dark"] .showcase-item:hover {
  border-color: var(--accent-color);
  box-shadow: 0 8px 25px #ffffff0d;
  /* rgba(255,255,255,0.05) */
}

[data-theme="dark"] .transformation-summary {
  background: var(--bg-secondary);
  border-color: #333333;
}

[data-theme="dark"] .company-logo,
[data-theme="dark"] .showcase-logo {
  background: var(--bg-primary);
  border: 1px solid #333333;
}

/* Timeline Period Styles */
.timeline-period {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background-color: var(--bg-tertiary);
  padding: 4px 8px;
  border-radius: 12px;
  margin-left: auto;
  white-space: nowrap;
}

/* Business Impact Styles */
.business-impact {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm);
  background-color: var(--bg-secondary);
  border-radius: 8px;
  border-left: 3px solid var(--accent-color);
}

/* Updated Company Header for Supply Chain Section */
.showcase-item .company-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

/* Responsive adjustments for timeline periods */
@media (max-width: 768px) {
  .showcase-item .company-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .timeline-period {
    margin-left: 0;
    align-self: flex-start;
  }
}

/* Gallery Carousel Styles */
.gallery {
  padding: var(--spacing-3xl) 0;
  background-color: var(--bg-primary);
}

.carousel-container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.carousel-wrapper {
  flex: 1;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 30px var(--shadow);
  position: relative;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.carousel-slide {
  min-width: 100%;
  flex-shrink: 0;
  position: relative;
  background-color: var(--bg-secondary);
}

.carousel-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, #000000cc);
  /* rgba(0,0,0,0.8) */
  color: #ffffff;
  padding: var(--spacing-xl);
  text-align: center;
}

.image-caption h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: #ffffff;
}

.image-caption p {
  font-size: var(--font-size-base);
  color: #ffffffe6;
  /* rgba(255,255,255,0.9) */
  line-height: 1.5;
}

.carousel-btn {
  background-color: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  color: var(--text-secondary);
  box-shadow: 0 4px 15px var(--shadow);
  z-index: 10;
  flex-shrink: 0;
}

.carousel-btn:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 6px 20px var(--shadow-hover);
}

.carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.carousel-btn:disabled:hover {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-secondary);
  transform: none;
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-normal);
  opacity: 0.5;
}

.indicator.active {
  background-color: var(--accent-color);
  opacity: 1;
  transform: scale(1.2);
}

.indicator:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.upload-instructions {
  text-align: center;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background-color: var(--bg-secondary);
  border-radius: 8px;
  border-left: 4px solid var(--accent-color);
}

.upload-instructions p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.upload-instructions code {
  background-color: var(--bg-tertiary);
  padding: var(--spacing-2) var(--spacing-6);
  border-radius: 4px;
  font-family: "Courier New", monospace;
  color: var(--accent-color);
}

/* Responsive Design for Gallery */
@media (max-width: 1024px) {
  .carousel-container {
    gap: var(--spacing-md);
  }

  .carousel-image {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .carousel-container {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
  }

  .carousel-btn-prev {
    left: 10px;
  }

  .carousel-btn-next {
    right: 10px;
  }

  .carousel-btn svg {
    width: 20px;
    height: 20px;
  }

  .carousel-image {
    height: 300px;
  }

  .image-caption {
    padding: var(--spacing-lg);
  }

  .image-caption h3 {
    font-size: var(--font-size-lg);
  }

  .image-caption p {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .carousel-image {
    height: 250px;
  }

  .image-caption {
    padding: var(--spacing-md);
  }

  .carousel-btn {
    width: 35px;
    height: 35px;
  }

  .carousel-btn svg {
    width: 18px;
    height: 18px;
  }

  .image-caption h3 {
    font-size: var(--font-size-base);
  }

  .image-caption p {
    font-size: 0.8rem;
  }
}

:root {
  --hero-title-size: clamp(10px, 2.4vw + 13px, 38px);
  --hero-sub-size: clamp(16px, 0.7vw + 9px, 18px);
}

.headline-stack {
  display: grid;
  gap: var(--spacing-md);
}

/* English / Chinese title lines */
.headline-en-title,
.headline-zh-title {
  font-weight: 600;
  line-height: 1.25;
  font-size: var(--hero-title-size);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

/* Shared list base */
.headline-en-sub,
.headline-zh-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-12);
  /* Increased from 4px to let text breathe */
  max-width: 65ch;
}

/* EN sub-points */
/* EN sub-points */
.headline-en-sub li {
  font-size: var(--hero-sub-size);
  line-height: 1.4;
  /* Increased line height for paragraph text */
  color: var(--text-secondary);
  font-weight: 350;
  letter-spacing: 0.005em;
  margin-bottom: 4px;
  /* Add subtle spacing between items */
}

/* Removed alternating indentation to fix layout alignment */


/* Chinese headline is a touch smaller than EN via content, not a calc() */
.headline-zh-title {
  margin-top: var(--spacing-xl);
  /* Increased from md for better separation */
  margin-bottom: var(--spacing-sm);
}

/* 中文子项 */
.headline-zh-sub li {
  font-size: var(--hero-sub-size);
  line-height: 1.25;
  color: var(--text-secondary);
  font-weight: 350;
  letter-spacing: 0.01em;
}

/* Mobile refinements keep px/hex-compatible clamps */
@media (max-width: 768px) {
  :root {
    --hero-title-size: clamp(22px, 5vw + 8px, 30px);
    --hero-sub-size: clamp(14px, 3.8vw + 6px, 16px);
  }

  .headline-stack {
    gap: var(--spacing-sm);
  }
}

.hero .button,
.hero .btn,
.hero .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 7px !important;
  /* px height control */
  padding-inline: 16px;
  line-height: 1.2;
  min-height: auto;
}

/* Agents Page Styles */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.agent-card {
  background-color: var(--bg-secondary);
  border-radius: 16px;
  padding: var(--spacing-2xl);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  border: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.agent-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px var(--shadow-hover);
  border-color: var(--accent-color);
}

.agent-image-container {
  margin-bottom: var(--spacing-xl);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-normal);
}

.agent-card:hover .agent-image-container {
  transform: scale(1.02);
}

.agent-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.agent-description {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.agent-features ul {
  list-style: none;
  padding: 0;
  color: var(--text-secondary);
}

.agent-features li {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-lg);
  position: relative;
}

.agent-features li span {
  position: absolute;
  left: 0;
}

/* Responsive Design for Agents Page */
@media (max-width: 1024px) {
  .agents-grid,
  .agents-images-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-xl) !important;
  }

  .agents-images-grid .agent-image-item:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .agents-grid,
  .agents-images-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-lg) !important;
  }

  .agent-card {
    padding: var(--spacing-xl);
  }

  .agent-image-container img {
    min-height: 50vh !important;
  }
}

/* Agent CTA Button Styles */
.agent-cta-btn {
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-family: var(--font-family);
}

.agent-cta-btn:hover {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-hover);
}

.agent-cta-btn:active {
  transform: translateY(0);
}