/* ============================================
   CSS Custom Properties — sophisTex Design System
   ============================================ */

:root {
  /* Colors — Light Mode */
  --color-primary: #e32424;
  --color-primary-hover: #c91f1f;
  --color-primary-dark: #e84545; /* desaturated red for dark mode */
  --color-text: #282828;
  --color-text-secondary: #777777;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f7;
  --color-surface: #ffffff;
  --color-border: #e5e5e5;
  --color-heading: #282828;
  --color-nav-bg: #ffffff;
  --color-footer-bg: #f7f7f7;
  --color-card-bg: #ffffff;
  --color-card-border: #e5e5e5;
  --color-overlay: rgba(0, 0, 0, 0.55);

  /* Modern Effects */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);
  --gradient-primary: linear-gradient(135deg, #e32424 0%, #ff5e5e 100%);
  --gradient-text: linear-gradient(to right, #ffffff, #ffecec);

  /* Typography */
  --font-heading: 'Exo 2', system-ui, -apple-system, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-size-base: 16px;
  --line-height-body: 1.65;
  --letter-spacing-heading: -0.02em;

  /* Font Sizes */
  --fs-hero: clamp(2.5rem, 4.5vw, 3.25rem);
  --fs-h1: clamp(2rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 3vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: 5rem;
  --space-section-mobile: 3rem;

  /* Layout */
  --max-width: 1200px;
  --content-width: 100%;
  --border-radius: 8px;
  --border-radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-premium: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  --shadow-premium-hover: 0 20px 40px -10px rgba(227, 36, 36, 0.2);

  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-base: 300ms ease;
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --color-primary: #e84545;
  --color-primary-hover: #f05555;
  --color-text: #e8e8e8;
  --color-text-secondary: #a0a0a0;
  --color-bg: #1a1a1c;
  --color-bg-alt: #1e1e20;
  --color-surface: #242428;
  --color-border: #3a3a3e;
  --color-heading: #ffffff;
  --color-nav-bg: #242428;
  --color-footer-bg: #1e1e20;
  --color-card-bg: #242428;
  --color-card-border: #3a3a3e;
  --color-overlay: rgba(0, 0, 0, 0.7);
  --glass-bg: rgba(36, 36, 40, 0.85);
  --glass-border: rgba(255, 255, 255, 0.05);
  --gradient-primary: linear-gradient(135deg, #e84545 0%, #ff6b6b 100%);
  --gradient-text: linear-gradient(to right, #ffffff, #ffb3b3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5);
}
/* ============================================
   Main Stylesheet — sophisTex Corporate Website
   ============================================ */

/* --- Font Face Declarations --- */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/Exo2-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/Exo2-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('/fonts/OpenSans-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('/fonts/OpenSans-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--transition-base), color var(--transition-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-heading);
  scroll-margin-top: 120px;
}

h1 { font-size: var(--fs-h1); font-weight: 700; margin-bottom: var(--space-lg); }
h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: var(--space-md); }
h3 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: var(--space-md); }
h4 { font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--space-sm); }

p {
  margin-bottom: var(--space-md);
  max-width: var(--content-width);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

.section--alt {
  background-color: var(--color-bg-alt);
}

/* --- Skip to Content --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  z-index: 10000;
  font-size: var(--fs-small);
}

.skip-link:focus {
  top: var(--space-md);
  color: #fff;
}

/* --- Navigation --- */

/* Top-bar + main-nav sticky wrapper */
.site-header-stack {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ── Top Bar ── */
.top-bar {
  background-color: var(--color-top-bar-bg, #1c1c1e);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color var(--transition-base);
}

[data-theme="dark"] .top-bar {
  background-color: #111113;
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  gap: var(--space-md);
}

.top-bar-links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  margin-left: auto; /* Push to right if only child */
  padding: 0;
}

.top-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.top-bar-link svg {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Support Center — muted ghost style */
.top-bar-link--support {
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.top-bar-link--support:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.top-bar-link--support:hover svg {
  transform: rotate(-8deg) scale(1.1);
}

/* Media — muted ghost style (same family as Support) */
.top-bar-link--media {
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.top-bar-link--media:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.top-bar-link--media:hover svg {
  transform: scale(1.1);
}

/* Separator dot between links */
.top-bar-links li:not(:first-child):before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.15);
  margin-right: var(--space-xs);
  align-self: center;
}

/* Contact — primary accent pill */
.top-bar-link--contact {
  color: #ffffff;
  background: var(--gradient-primary);
  border: 1px solid transparent;
  box-shadow: 0 2px 10px rgba(227, 36, 36, 0.35);
}

.top-bar-link--contact:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(227, 36, 36, 0.5);
  filter: brightness(1.08);
}

.top-bar-link--contact:hover svg {
  transform: scale(1.15);
}

/* Announcement Link */
.top-bar-announcement {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.top-bar-announcement:hover {
  color: #ffffff;
}

.announcement-badge {
  background: var(--gradient-primary);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 6px rgba(227, 36, 36, 0.3);
}

.announcement-text {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: border-color var(--transition-fast);
}

.top-bar-announcement:hover .announcement-text {
  border-bottom-color: var(--color-primary);
}

.announcement-arrow {
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  color: var(--color-primary);
}

.top-bar-announcement:hover .announcement-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 900px) {
  .top-bar-announcement {
    display: none; /* Hide announcement on smaller screens to save space */
  }
}

/* Main site header (no longer sticky — parent wrapper handles it) */
.site-header {
  background-color: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.site-header.is-scrolled {
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}

.site-header .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  transition: padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
  gap: var(--space-md);
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: auto;
  max-width: 160px; /* Reduced to avoid overlap on small screens */
}

.site-logo svg,
.site-logo img {
  height: 36px;
  width: auto;
  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: height;
}

.site-logo .logo-dark {
  display: none;
}

[data-theme="dark"] .site-logo .logo-light {
  display: none;
}

[data-theme="dark"] .site-logo .logo-dark {
  display: block;
}

/* Mobile shrink effect */
.site-header.is-scrolled .nav-wrapper {
  padding: 0.5rem var(--space-md);
}

.site-header.is-scrolled .site-logo svg,
.site-header.is-scrolled .site-logo img {
  height: 28px;
}

/* Desktop dynamic shrink effect */
@media (min-width: 1025px) {
  .site-header .nav-wrapper {
    padding: 1.5rem var(--space-xl);
  }
  
  .site-logo {
    max-width: 200px;
    width: 200px; /* Fixed width to prevent layout shift of nav items during logo height animation */
  }

  .site-logo svg,
  .site-logo img {
    height: 48px;
  }
  
  .site-header.is-scrolled .nav-wrapper {
    padding: 0.75rem var(--space-xl);
  }
  
  .site-header.is-scrolled .site-logo svg,
  .site-header.is-scrolled .site-logo img {
    height: 32px;
  }

  /* Mobile utility section not needed on desktop — top bar handles it */
  .nav-utility-section {
    display: none;
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a,
.nav-menu .dropdown-toggle {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--color-text);
  padding: var(--space-sm) 0;
  transition: color var(--transition-fast);
  text-decoration: none;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav-menu a::after,
.nav-menu .dropdown-toggle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-fast);
}

/* Dropdown arrow check */
.dropdown-toggle::after {
  display: none !important; /* Hide the simple bar for dropdown-toggle and replace with arrow if desired, or keep both. Let's use an arrow. */
}

.has-megamenu .dropdown-toggle::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  order: 2;
  margin-top: -2px;
}

.has-megamenu:hover .dropdown-toggle {
  color: var(--color-primary);
}

.has-megamenu:hover .dropdown-toggle::before {
  transform: rotate(-135deg);
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--color-primary);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 100%;
}

/* Mega Menu */
.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-color: #1a1a1a;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 300ms ease, visibility 300ms ease, transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: var(--space-2xl) 0; /* More compact padding */
  z-index: 1001;
  overflow: hidden;
}

.megamenu-signet {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 152px;
  height: 158px;
  background-image: url('/images/logo/STX_Signet_white_transparent.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.12; /* Slightly more subtle background signet */
  pointer-events: none;
  z-index: 0;
}

.megamenu .container {
  position: relative;
  z-index: 1;
}

.has-megamenu:hover .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem var(--space-2xl); /* Reduced vertical gap */
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.megamenu-column {
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* Reduced from space-lg for better compactness */
}

/* Short categories stacked in one grid column (`stack:` in data/nav_mega*.yaml) */
.megamenu-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.column-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle separation */
}

.column-icon {
  width: 28px; /* Slightly more compact icon */
  height: 28px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.column-icon svg {
  width: 100%;
  height: 100%;
}

.column-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem; /* Increased font size for clarity */
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 !important;
  text-decoration: none;
}

.column-title:hover {
  color: var(--color-primary) !important;
}

.column-title::after {
  display: none !important;
}

.column-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.column-items li {
  margin-bottom: 2px;
}

.column-items a {
  font-size: 0.9375rem; /* Increased from 0.875rem */
  color: rgba(255, 255, 255, 0.7) !important;
  padding: 3px 0 !important;
  display: block !important;
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.column-items a::after {
  display: none !important;
}

.column-items a:hover {
  color: #ffffff !important;
  transform: translateX(4px);
}



/* Nav Controls */
.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Language Switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
}

.lang-switcher a {
  color: var(--color-text-secondary);
  padding: var(--space-xs) var(--space-sm);
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

.lang-switcher a.active {
  color: var(--color-primary);
}

.lang-switcher .separator {
  color: var(--color-text-secondary);
}

/* Header Social & Dark Mode Toggle */
.dark-mode-toggle,
.header-social-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--color-text);
  font-size: 1.25rem;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

.dark-mode-toggle:hover,
.header-social-link:hover {
  color: var(--color-primary);
  background-color: var(--color-bg-alt);
}


.dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .dark-mode-toggle .icon-sun {
  display: block;
}

[data-theme="light"] .dark-mode-toggle .icon-moon,
:root:not([data-theme="dark"]) .dark-mode-toggle .icon-moon {
  display: block;
}

[data-theme="dark"] .dark-mode-toggle .icon-moon {
  display: none;
}

/* Mobile Menu Button */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--color-text);
  width: 36px;
  height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: #282828;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  padding: var(--space-3xl) var(--space-xl);
  max-width: 900px;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-hero);
  color: transparent;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: var(--space-md);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.2;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero keyword pills */
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
  max-width: 680px; /* Reduced further to ensure 3-on-3 or 4-on-2 split */
  margin-left: auto;
  margin-right: auto;
}


.hero-tag {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  padding: 0.35rem 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, background 0.2s ease;
}


.hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  padding: 0.9rem 2.25rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
}

.btn-primary {
  background: var(--gradient-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(227, 36, 36, 0.3);
  border: none;
}

.btn-primary:hover {
  background: var(--gradient-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(227, 36, 36, 0.4);
  color: #ffffff;
}

.btn-outline-white {
  background-color: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-outline-white:hover {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
  .hero-actions {
    gap: var(--space-sm);
    flex-wrap: wrap; /* Allow wrapping if needed but keep them as compact as possible */
  }
  
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem; /* Smaller font on mobile */
    min-width: 160px; /* Ensure they have a consistent enough size to be clickable */
    justify-content: center;
  }
}


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

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: translateY(-2px);
}

/* --- Service Cards --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
}

.service-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-premium);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.service-card:hover {
  box-shadow: var(--shadow-premium-hover);
  border-color: var(--color-primary);
  transform: translateY(-8px);
}

.service-card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
  color: var(--color-primary);
}

.service-card-icon svg {
  width: 100%;
  height: 100%;
}

.service-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-sm);
}

.service-card p {
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  margin: 0 auto;
}

.service-card a {
  color: inherit;
  text-decoration: none;
}

.service-card a:hover {
  color: inherit;
}

/* --- Expertise Section --- */
.expertise-header-wrapper {
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--space-3xl);
}

.expertise-header-wrapper .section-header {
  margin-bottom: var(--space-md);
}

.expertise-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.expertise-main {
  max-width: 100%;
}

.expertise-intro.lead {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-heading);
  margin-bottom: 0;
  max-width: 100%;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

.expertise-description {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.expertise-description p {
  margin-bottom: 1.5rem;
  max-width: 100%;
}

.capabilities-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-premium);
  position: relative;
  overflow: hidden;
}

.capabilities-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
}

.capabilities-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  color: var(--color-heading);
}

.expertise-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 6rem;
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-card-border);
  text-align: center;
}

@media (max-width: 768px) {
  .expertise-stats {
    gap: 2rem var(--space-xl);
  }
}

.expertise-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.expertise-stat__number {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.expertise-stat__label {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.capabilities-tags {
  display: flex;
  flex-direction: column;
  counter-reset: capability-counter;
}

.capability-tag {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-card-border);
  counter-increment: capability-counter;
}

.capability-tag:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.capability-tag::before {
  content: counter(capability-counter, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-primary);
  min-width: 1.5rem;
  flex-shrink: 0;
  letter-spacing: 0.03em;
  padding-top: 0.2em;
}

.capability-tag__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.capability-tag__name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.capability-tag__sub {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .expertise-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* --- Section Headers --- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--space-sm);
}

.section-header h2 {
  margin-bottom: 0;
}

/* --- Work Ethic --- */
.work-ethic {
  width: 100%;
}

.section--work-ethic {
  position: relative;
  overflow: hidden;
}

.work-ethic-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  width: 100%;
}

@media (min-width: 1160px) {
  .work-ethic-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-3xl);
  }
}

.work-ethic-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
}

.values-diagram {
  width: 100%;
  max-width: 580px;
  height: 480px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin: 0 auto;
}

.values-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid var(--color-primary);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 40px rgba(227, 36, 36, 0.1);
  animation: breathe 8s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(227, 36, 36, 0.1); }
  50% { transform: scale(1.05); box-shadow: 0 0 50px rgba(227, 36, 36, 0.25); }
}

.value-label {
  position: absolute;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--color-heading);
  white-space: nowrap;
  background-color: var(--color-bg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  z-index: 5;
}

.value-label:hover {
  border-color: var(--color-primary);
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* Precise alignment relative to the circle - increased offset to avoid overlapping circle stroke while saving horizontal space */
.value-label:nth-child(1) { top: -20px; left: 50%; transform: translateX(-50%); }
.value-label:nth-child(2) { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.value-label:nth-child(3) { bottom: -20px; left: 50%; transform: translateX(-50%); }
.value-label:nth-child(4) { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }

/* Adjusting hover state as translate must be preserved */
.value-label:hover:nth-child(1) { transform: translateX(-50%) scale(1.1); }
.value-label:hover:nth-child(2) { transform: translateY(-50%) scale(1.1); }
.value-label:hover:nth-child(3) { transform: translateX(-50%) scale(1.1); }
.value-label:hover:nth-child(4) { transform: translateY(-50%) scale(1.1); }

.values-diagram .center-logo {
  position: absolute;
  z-index: 2;
  transition: transform var(--transition-base);
}

.values-diagram:hover .center-logo {
  transform: scale(1.1);
}

.values-diagram .center-logo img {
  height: 28px;
  width: auto;
}

.center-logo .logo-dark {
  display: none;
}

[data-theme="dark"] .center-logo .logo-light {
  display: none;
}

[data-theme="dark"] .center-logo .logo-dark {
  display: block;
}

/* --- Breadcrumbs --- */
.breadcrumbs {
  padding-top: var(--space-md);
  padding-bottom: var(--space-xs);
  font-size: var(--fs-small);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
}

.breadcrumbs li::after {
  content: '›';
  margin-left: var(--space-sm);
  color: var(--color-text-secondary);
}

.breadcrumbs li:last-child::after {
  display: none;
}

.breadcrumbs a {
  color: var(--color-text-secondary);
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs li:last-child {
  color: var(--color-text);
}

/* --- FAQ --- */
.faq-section {
  margin-top: var(--space-3xl);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body);
  padding: var(--space-lg) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--transition-fast);
}

.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item summary:hover {
  color: var(--color-primary);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-answer {
  padding: 0 0 var(--space-lg) 0;
  color: var(--color-text-secondary);
  max-width: var(--content-width);
}

/* --- Footer --- */
.site-footer {
  background-color: var(--color-footer-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3xl) 0 var(--space-xl);
  transition: background-color var(--transition-base);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-links-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.footer-grid > .footer-column:nth-child(2) {
  text-align: center;
}

.footer-grid > .footer-column:nth-child(2) .partner-logos {
  align-items: center;
}

.footer-column h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: var(--space-lg);
  color: var(--color-heading);
}

.footer-column ul {
  list-style: none;
}

.footer-column li {
  margin-bottom: var(--space-sm);
}

.footer-column a {
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  transition: color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--color-primary);
}

/* Office locations in footer */
.offices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.office h4 {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-xs);
}

.office p {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  margin-bottom: 0;
  line-height: 1.5;
}

.office-content {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.office-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 0.25rem;
}

.office-details {
  flex: 1;
}

.office-country {
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
  display: block;
}

/* Partner logos */
.partner-logos {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: flex-start;
}

.partner-logo-img {
  max-width: 150px;
  height: auto;
  display: block;
  opacity: 0.9;
  filter: drop-shadow(var(--shadow-sm));
  transition: opacity var(--transition-fast), transform var(--transition-base), filter var(--transition-base);
}

.partner-logo-img[src*="sap_silver"] {
  max-width: 120px;
}

.partner-logo-img[src*="sap_certified"] {
  max-width: 240px;
}

.partner-logo-img[src*="clean_core"] {
  max-width: 240px;
}

.partner-logo-img:hover {
  opacity: 1;
  transform: translateY(-4px);
  filter: drop-shadow(var(--shadow-md));
}

/* Fix visibility for the white SAP Certified logo in light mode */
:root:not([data-theme="dark"]) .partner-logo-img[src*="sap_certified"],
:root:not([data-theme="dark"]) .partner-logo-img[src*="clean_core"][src*="_wht"] {
  filter: brightness(0) opacity(0.85);
}
:root:not([data-theme="dark"]) .partner-logo-img[src*="sap_certified"]:hover,
:root:not([data-theme="dark"]) .partner-logo-img[src*="clean_core"][src*="_wht"]:hover {
  filter: brightness(0) opacity(1);
}

/* Social icons */
.social-links {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.social-links a:hover {
  color: var(--color-primary);
}

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

/* Footer bottom */
.footer-bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.footer-bottom-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
}

.footer-bottom-inner p {
  margin-bottom: 0;
}

.footer-ext-link-info {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.footer-ext-link-info svg {
  flex-shrink: 0;
}

.footer-trademark {
  margin: 0 auto var(--space-md);
  max-width: 60ch;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.footer-trademark a {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.footer-trademark a:hover {
  color: var(--color-primary);
}

/* --- Page Content --- */
.page-content {
  padding: var(--space-section) 0;
}

.page-content:has(.page-header-image) {
  padding-top: var(--space-md);
}

.page-content .content-body {
  max-width: var(--content-width);
}

.page-content .content-body h2 {
  margin-top: var(--space-2xl);
}

.page-content .content-body ul,
.page-content .content-body ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-xl);
}

.page-content .content-body li {
  margin-bottom: var(--space-sm);
}

.page-content .content-body blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-style: italic;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.6;
}

.page-content .content-body blockquote p {
  margin: 0;
}

.page-content .content-body blockquote p + p {
  margin-top: var(--space-md);
}

/* --- Statement (centered, highlighted key sentence) --- */
.stx-statement {
  position: relative;
  margin: var(--space-2xl) auto;
  max-width: 820px;
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
}

.stx-statement::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 64px;
  height: 4px;
  transform: translateX(-50%);
  background: var(--color-primary);
  border-radius: 2px;
}

.stx-statement p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}

.stx-statement p + p {
  margin-top: var(--space-md);
}

@media (max-width: 600px) {
  .stx-statement {
    margin: var(--space-xl) 0;
    padding: var(--space-lg) var(--space-md);
  }

  .stx-statement p {
    font-size: 1.125rem;
  }
}

/* --- 404 page --- */
.page-404 .page-header {
  text-align: center;
}

.page-404-code {
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 var(--space-sm);
  color: var(--color-primary);
  letter-spacing: -0.04em;
}

.page-404 .content-body {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xl);
}

/* --- Related Services --- */
.related-services {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.related-services h2 {
  margin-bottom: var(--space-xl);
}

.related-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* --- Services List --- */
.services-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.services-list-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius);
  padding: var(--space-xl);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.services-list-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-primary);
}

.services-list-card h3 {
  margin-bottom: var(--space-sm);
}

.services-list-card p {
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  margin-bottom: var(--space-md);
}

/* --- News Section --- */
.news-index-header {
  margin-bottom: var(--space-2xl);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.news-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
  overflow: hidden;
}

.news-card-content {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-card-border);
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.news-card:hover .news-card-image img {
  transform: scale(1.05);
}

.news-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-primary);
}

.news-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.news-card-meta time,
.news-card-author {
  white-space: nowrap;
}

.news-card-author {
  display: flex;
  align-items: center;
}

.news-card-author::before {
  content: "·";
  margin-right: var(--space-sm);
  font-weight: bold;
}

.news-card-title {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: var(--space-md);
}

.news-card-title a {
  color: var(--color-text);
  text-decoration: none;
}

.news-card-title a:hover {
  color: var(--color-primary);
}

.news-card-excerpt {
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-lg);
}

.news-card-readmore {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: auto;
}

.news-card-readmore:hover {
  text-decoration: underline;
}

/* Default Page Header */
.page-header {
  margin-bottom: var(--space-2xl);
  max-width: var(--content-width);
}

.page-header-image {
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: var(--space-2xl);
  aspect-ratio: 4 / 1;
  max-height: 280px;
}

.page-header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* News single article */
.news-article-header {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  max-width: var(--content-width);
}

.news-article-image {
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: var(--space-xl);
  aspect-ratio: 21 / 9;
}

.news-article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.news-article-meta time,
.news-article-author {
  white-space: nowrap;
}

.news-article-author {
  display: flex;
  align-items: center;
}

.news-article-author::before {
  content: "·";
  margin-right: var(--space-sm);
  font-weight: bold;
}

.news-back-link {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  max-width: var(--content-width);
}

.news-back-link a {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.news-back-link a:hover {
  text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

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

  .footer-links-group {
    gap: var(--space-md);
  }

  .footer-grid > .footer-column:nth-child(1) {
    order: 1;
  }
  .footer-grid > .footer-links-group {
    order: 2;
  }
  .footer-grid > .footer-column:nth-child(2) {
    order: 3;
    grid-column: 1 / -1;
  }

  .work-ethic-diagram {
    margin-bottom: var(--space-2xl);
    width: 100%;
    overflow: visible; /* Ensure labels aren't clipped if they slightly peek into padding */
  }

  .values-diagram {
    max-width: 500px;
    height: 400px;
  }

  .values-circle {
    width: 180px;
    height: 180px;
  }

  .value-label {
    font-size: 0.875rem;
    padding: var(--space-xs) var(--space-md);
  }

  .value-label:nth-child(2) { left: calc(100% + 10px); }
  .value-label:nth-child(4) { right: calc(100% + 10px); }

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

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

/* Top Bar: hide on mobile */
  .top-bar {
    display: none;
  }

/* Mobile Nav */
  .site-logo {
    margin-right: auto;
  }

  .nav-controls {
    order: 2;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 65px);
    background: var(--color-nav-bg);
    flex-direction: column;
    padding: var(--space-xl) var(--space-md);
    background: var(--color-nav-bg);
    flex-direction: column;
    padding: var(--space-xl) var(--space-md) 4rem; /* More bottom padding for scroll room */
    gap: 0;
    z-index: 999;
    overflow-y: auto;
    border-top: 1px solid var(--glass-border);
  }

  .nav-menu.is-open {
    display: flex;
  }

  /* Prevent background scroll when menu is open */
  html.is-menu-open,
  body.is-menu-open {
    overflow: hidden !important;
    height: 100% !important;
  }

  .nav-menu li {
    width: 100%;
  }

  /* Target main menu items' borders specifically to avoid utility section leaks */
  .nav-menu > li:not(.nav-utility-section) a,
  .nav-menu > li:not(.nav-utility-section) .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--color-text);
    text-align: left;
  }

  .nav-menu a::after,
  .nav-menu .dropdown-toggle::after {
    display: none;
  }

  /* Mobile utility section — quiet footer row at the bottom of the nav panel */
  .nav-utility-section {
    margin-top: auto;
    padding-top: var(--space-lg);
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: var(--space-lg);
    border-top: 1px solid var(--color-border) !important;
  }

  /* Utility links — plain inline links, no button chrome */
  .nav-menu .nav-utility-section a {
    border-bottom: none !important;
    padding: var(--space-sm) 0 !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    justify-content: flex-start !important;
    width: auto;
    border-radius: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .nav-utility-link--support {
    color: var(--color-text-secondary) !important;
  }

  .nav-utility-link--support:hover {
    color: var(--color-text) !important;
  }

  .nav-utility-link--media {
    color: var(--color-text-secondary) !important;
  }

  .nav-utility-link--media:hover {
    color: var(--color-text) !important;
  }

  .nav-utility-link--contact {
    color: var(--color-primary) !important;
  }

  .nav-utility-link--contact:hover {
    color: var(--color-primary-dark, var(--color-primary)) !important;
  }

  .nav-utility-link svg {
    flex-shrink: 0;
    margin-right: 0.375rem;
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 0 var(--space-lg);
    background: transparent;
  }

  .dropdown-toggle::after {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
    order: 3;
    margin-left: var(--space-md);
  }

  .has-megamenu .dropdown-toggle::before {
    order: 2; /* Move arrow to right */
    margin-right: var(--space-sm);
  }

  .has-megamenu.is-open .dropdown-toggle::before {
    transform: rotate(-135deg);
  }

  /* Mobile Megamenu */
  .megamenu {
    position: static;
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-top: none;
  }

  .megamenu-signet {
    display: none;
  }

  .has-megamenu.is-open .megamenu {
    display: block;
  }

  .megamenu-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .megamenu-column {
    gap: 0;
    padding: var(--space-md) 0;
  }

  .megamenu-stack {
    gap: 0; /* Stacked categories flow like every other category in the mobile list */
  }

  .column-header {
    padding-left: var(--space-md);
    margin-bottom: var(--space-sm);
  }

  .column-icon {
    display: none; /* Hide icons in mobile to keep it compact */
  }

  .column-title {
    font-size: 1rem;
    color: var(--color-text) !important;
    text-transform: none;
    font-weight: 600;
  }

  .column-items a {
    padding-left: 2rem !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--fs-body) !important;
    border-bottom: none !important;
  }

  .column-items a:hover {
    color: var(--color-primary) !important;
    transform: none;
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-section-mobile) 0;
  }

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

  /* Mobile grids */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .work-ethic-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .values-diagram {
    width: 100%;
    max-width: 400px;
    height: 380px;
    padding: 1rem;
  }

  .values-circle {
    width: 180px;
    height: 180px;
  }

  .value-label {
    font-size: 0.8125rem;
    padding: var(--space-xs) var(--space-sm);
  }

  /* Allow side labels to wrap to two lines so long copy
     (e.g. "Sustainable Growth", "Quality & Excellence") fits on phones */
  .value-label:nth-child(2),
  .value-label:nth-child(4) {
    white-space: normal;
    max-width: 6.5rem;
    text-align: center;
    line-height: 1.2;
  }

  .value-label:nth-child(2) { left: calc(100% + 10px); }
  .value-label:nth-child(4) { right: calc(100% + 10px); }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer-grid > .footer-column:nth-child(1),
  .footer-grid > .footer-links-group {
    order: initial;
  }

  /* Centering partner section on mobile */
  .footer-grid > .footer-column:nth-child(2) {
    order: initial;
    grid-column: auto;
    text-align: center;
  }
  .footer-grid > .footer-column:nth-child(2) .partner-logos {
    align-items: center;
  }

  .footer-links-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

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

  .related-services-grid {
    grid-template-columns: 1fr;
  }

  .services-list-grid {
    grid-template-columns: 1fr;
  }

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

  .hero {
    min-height: 360px;
  }

  .hero-title {
    font-size: 2rem;
  }
}

@media (max-width: 400px) {
  .site-header .nav-wrapper {
    gap: var(--space-sm);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .nav-controls {
    gap: var(--space-xs);
  }

  /* Drop LinkedIn from the header row at very small widths to keep the
     hamburger from being pushed off-screen. Still reachable via the footer. */
  .nav-controls .header-social-link {
    display: none;
  }
}

@media (max-width: 480px) {
  .values-diagram {
    height: 340px;
    padding: 0.5rem;
  }

  .values-circle {
    width: 150px;
    height: 150px;
  }

  .value-label {
    font-size: 0.75rem;
  }

  .value-label:nth-child(2),
  .value-label:nth-child(4) {
    max-width: 5.5rem;
  }

  .value-label:nth-child(2) { left: calc(100% + 6px); }
  .value-label:nth-child(4) { right: calc(100% + 6px); }
}

/* --- Focus Styles --- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Utility Classes --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--color-text-secondary);
  font-weight: 300;
}

/* Floating Images for Markdown */
.img-float-right {
  float: right;
  max-width: 280px;
  margin: 0 0 var(--space-md) var(--space-xl);
  height: auto;
}

.img-float-left {
  float: left;
  max-width: 280px;
  margin: 0 var(--space-xl) var(--space-md) 0;
  height: auto;
}

/* Clearfix for floating images */
.content-body::after,
.page-content::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 768px) {
  .img-float-right,
  .img-float-left {
    float: none;
    display: block;
    margin: var(--space-lg) auto;
    max-width: 100%;
    width: auto;
  }
}

/* --- Careers Page --- */
.careers-positions {
  margin-top: var(--space-3xl);
}

.job-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.job-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
  position: relative;
  overflow: hidden;
}

.job-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.job-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(227, 36, 36, 0.2);
}

[data-theme="dark"] .job-card:hover {
  border-color: rgba(232, 69, 69, 0.25);
}

.job-card__top {
  margin-bottom: var(--space-lg);
}

.job-card__meta-label {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.job-card__title {
  font-size: var(--fs-h3);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0;
}

.job-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.job-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-family: var(--font-heading);
  font-weight: 500;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  white-space: nowrap;
  line-height: 1;
}

.job-badge svg {
  flex-shrink: 0;
}

.job-badge--location,
.job-badge--type {
  background-color: var(--color-bg-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.job-badge--salary {
  background-color: rgba(227, 36, 36, 0.07);
  color: var(--color-primary);
  border: 1px solid rgba(227, 36, 36, 0.18);
}

[data-theme="dark"] .job-badge--salary {
  background-color: rgba(232, 69, 69, 0.1);
  border-color: rgba(232, 69, 69, 0.22);
}

.job-card__summary {
  font-size: var(--fs-body);
  color: var(--color-text);
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

.job-card__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.job-card__section-title {
  font-size: var(--fs-xs);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.job-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.job-card__list li {
  padding-left: 1.3rem;
  position: relative;
  font-size: var(--fs-small);
  color: var(--color-text);
  line-height: 1.55;
  margin-bottom: 0;
}

.job-card__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 0.7rem;
  top: 0.2em;
}

.job-card__footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.job-card__posted {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}

.job-card__apply {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--gradient-primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 100px;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
  box-shadow: 0 2px 12px rgba(227, 36, 36, 0.28);
}

.job-card__apply:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(227, 36, 36, 0.42);
  filter: brightness(1.06);
}

.job-card__apply svg {
  transition: transform var(--transition-fast);
}

.job-card__apply:hover svg {
  transform: translateX(3px);
}

/* Speculative application CTA */
.careers-cta {
  margin-top: var(--space-3xl);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl) var(--space-2xl);
  text-align: center;
}

.careers-cta h2 {
  margin-bottom: var(--space-md);
}

.careers-cta p {
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin: 0 auto var(--space-xl);
}

.careers-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gradient-primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(227, 36, 36, 0.28);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.careers-cta .btn-primary:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(227, 36, 36, 0.42);
  filter: brightness(1.06);
}

.careers-cta .btn-primary svg {
  transition: transform var(--transition-fast);
}

.careers-cta .btn-primary:hover svg {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .job-card {
    padding: var(--space-xl) var(--space-lg);
  }

  .job-card__details {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .job-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .careers-cta {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* ============================================
   Contact Page
   ============================================ */

/* Hero intro */
.contact-hero {
  margin-bottom: var(--space-3xl);
}

.contact-hero__kicker {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.contact-hero__title {
  margin-bottom: var(--space-lg);
}

.contact-hero__body p {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
}

/* Contact channel cards */
.contact-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

.contact-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.contact-card:hover {
  box-shadow: var(--shadow-premium-hover);
  transform: translateY(-2px);
}

.contact-card--email {
  border-top: 3px solid var(--color-primary);
}

.contact-card__icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(227, 36, 36, 0.1) 0%, rgba(255, 94, 94, 0.08) 100%);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

[data-theme="dark"] .contact-card__icon {
  background: rgba(232, 69, 69, 0.12);
}

.contact-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-heading);
}

.contact-card__sub {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.5;
}

.contact-card__value {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.contact-card__value--link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-card__value--link:hover {
  color: var(--color-primary-hover);
}

.contact-card__btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Location story */
.contact-location {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3xl);
  align-items: start;
  background-color: var(--color-bg-alt);
  border-radius: var(--border-radius-lg);
  padding: var(--space-3xl);
  margin-bottom: var(--space-3xl);
  border: 1px solid var(--color-border);
}

.contact-location h2 {
  margin-bottom: var(--space-md);
}

.contact-location__body {
  color: var(--color-text-secondary);
  max-width: 55ch;
  margin-bottom: var(--space-xl);
}

.contact-address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  gap: 2px;
}

.contact-address__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--color-heading);
  margin-bottom: var(--space-xs);
}

.contact-address__line {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.contact-location__badges {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 220px;
}

.location-badge {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
}

.location-badge__icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(227, 36, 36, 0.1) 0%, rgba(255, 94, 94, 0.06) 100%);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

[data-theme="dark"] .location-badge__icon {
  background: rgba(232, 69, 69, 0.12);
}

/* Global offices */
.contact-offices h2 {
  margin-bottom: var(--space-xl);
}

.contact-offices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.office-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.office-card__country {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.office-card__city {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-xs);
}

.office-card__name {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.office-card__address {
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.office-card__phone {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: var(--space-sm);
  transition: color var(--transition-fast);
}

.office-card__phone:hover {
  color: var(--color-primary-hover);
}

/* Responsive */
@media (max-width: 1024px) {
  .contact-offices-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .contact-location {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .contact-location__badges {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: unset;
  }
}

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

  .contact-location {
    padding: var(--space-2xl) var(--space-xl);
  }
}

@media (max-width: 640px) {
  .contact-offices-grid {
    grid-template-columns: 1fr;
  }

  .contact-location__badges {
    flex-direction: column;
  }
}

/* --- Content Media (Images & Videos) --- */
.content-body::after {
  content: "";
  clear: both;
  display: table;
}

.content-image, .content-video {
  margin: var(--space-xl) auto;
  max-width: 100%;
}

.content-image img, .content-video video, .content-video iframe {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
}

.content-video iframe {
  aspect-ratio: 16 / 9;
}

.video-consent-overlay {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  background: var(--surface-bg, var(--color-bg-alt));
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-xl);
}

.video-consent-text {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  max-width: 500px;
  margin-bottom: var(--space-md);
}

.position-left {
  float: left;
  margin-top: 0;
  margin-right: var(--space-xl);
  margin-bottom: var(--space-md);
  margin-left: 0;
  max-width: 45%;
}

.position-right {
  float: right;
  margin-top: 0;
  margin-left: var(--space-xl);
  margin-bottom: var(--space-md);
  margin-right: 0;
  max-width: 45%;
}

/* --- Table of Contents Shortcode --- */
.content-toc {
  margin: var(--space-xl) 0;
  background: var(--surface-bg, var(--color-bg-alt));
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  max-width: fit-content;
  min-width: 300px;
}

@media (max-width: 768px) {
  .content-toc {
    min-width: 100%;
  }
}

.toc-details summary.toc-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  user-select: none;
  list-style: none; /* Hide default triangle */
}

.toc-details summary.toc-summary::-webkit-details-marker {
  display: none;
}

.toc-static .toc-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.toc-details[open] summary.toc-summary {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
}

.toc-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: 600;
}

.toc-icon {
  color: var(--color-primary);
}

.toc-toggle-icon {
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast);
  display: flex;
}

.toc-details[open] .toc-toggle-icon {
  transform: rotate(180deg);
}

.toc-body {
  padding: 0 var(--space-lg) var(--space-md) var(--space-lg);
  font-size: var(--fs-small);
}

.toc-body nav#TableOfContents {
  margin: 0;
}

.toc-body nav#TableOfContents ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-body nav#TableOfContents li {
  margin-bottom: var(--space-xs);
}
.toc-body nav#TableOfContents li:last-child {
  margin-bottom: 0;
}

.toc-body nav#TableOfContents a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-block;
  padding: 2px 0;
}
.toc-body nav#TableOfContents a:hover {
  color: var(--color-primary);
}

/* General Recursive Ul Indentation */
.toc-body nav#TableOfContents ul ul {
  padding-left: var(--space-md);
  margin-top: var(--space-2xs);
  border-left: 1px solid var(--color-border);
  margin-left: 6px;
  font-weight: 400;
}

/* --- start="2" (Default Hugo H2) --- */
.content-toc[data-start="2"] nav#TableOfContents > ul { padding-left: 0; margin-left: 0; border: none; }
.content-toc[data-start="2"] nav#TableOfContents > ul > li { font-weight: 600; margin-top: var(--space-sm); }
.content-toc[data-start="2"] nav#TableOfContents > ul > li:first-child { margin-top: 0; }

/* Control Depth for start="2" */
.content-toc[data-start="2"][data-depth="1"] nav#TableOfContents > ul > li > ul { display: none !important; }
.content-toc[data-start="2"][data-depth="2"] nav#TableOfContents > ul > li > ul > li > ul { display: none !important; }
.content-toc[data-start="2"][data-depth="3"] nav#TableOfContents > ul > li > ul > li > ul > li > ul { display: none !important; }
.content-toc[data-start="2"][data-depth="4"] nav#TableOfContents > ul > li > ul > li > ul > li > ul > li > ul { display: none !important; }

/* --- start="3" (H3 is the top level) --- */
/* Hugo scaffolds this as: ul > li > ul > li(H3) */
.content-toc[data-start="3"] nav#TableOfContents > ul { padding-left: 0; margin-left: 0; border: none; }
.content-toc[data-start="3"] nav#TableOfContents > ul > li { margin: 0; padding: 0; font-weight: normal; }
.content-toc[data-start="3"] nav#TableOfContents > ul > li > ul { padding-left: 0; margin-left: 0; border: none; margin-top: 0; }
.content-toc[data-start="3"] nav#TableOfContents > ul > li > ul > li { font-weight: 600; margin-top: var(--space-sm); }
.content-toc[data-start="3"] nav#TableOfContents > ul > li > ul > li:first-child { margin-top: 0; }

/* Control Depth for start="3" */
.content-toc[data-start="3"][data-depth="1"] nav#TableOfContents > ul > li > ul > li > ul { display: none !important; }
.content-toc[data-start="3"][data-depth="2"] nav#TableOfContents > ul > li > ul > li > ul > li > ul { display: none !important; }
.content-toc[data-start="3"][data-depth="3"] nav#TableOfContents > ul > li > ul > li > ul > li > ul > li > ul { display: none !important; }
.content-toc[data-start="3"][data-depth="4"] nav#TableOfContents > ul > li > ul > li > ul > li > ul > li > ul > li > ul { display: none !important; }


.position-center {
  margin-left: auto;
  margin-right: auto;
}

.position-full {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0;
  margin-right: 0;
}

.content-image figcaption {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  text-align: center;
  font-style: italic;
}

@media (max-width: 768px) {
  .position-left, .position-right, .position-center {
    float: none;
    margin-right: 0;
    margin-left: 0;
    width: 100% !important;
    max-width: 100%;
  }
}

/* --- Download Card --- */
.download-card {
  display: flex;
  align-items: center;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg, 12px);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: all 300ms ease;
  gap: var(--space-md);
  text-decoration: none;
}

[data-theme='dark'] .download-card {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.download-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-bg-alt);
  border-radius: var(--border-radius);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.download-icon.is-pdf {
  background: rgba(227, 36, 36, 0.1);
  color: #e32424;
}

.download-icon.is-zip {
  background: rgba(255, 160, 0, 0.1);
  color: #ffa000;
}

.download-icon svg {
  width: 24px;
  height: 24px;
}

/* --- Spacer & Divider --- */
.stx-spacer {
  width: 100%;
  clear: both;
  display: block;
}

.spacer-xs { height: calc(var(--space-xs) * 1.5); }
.spacer-sm { height: calc(var(--space-sm) * 1.5); }
.spacer-md { height: calc(var(--space-md) * 1.5); }
.spacer-lg { height: calc(var(--space-lg) * 1.5); }
.spacer-xl { height: calc(var(--space-xl) * 1.5); }
.spacer-2xl { height: calc(var(--space-2xl) * 1.5); }
.spacer-3xl { height: calc(var(--space-3xl) * 1.5); }
.spacer-section { height: var(--space-section); }

.stx-spacer.has-line {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) 0 var(--space-2xl) 0; /* More breathing room at the bottom */
  height: auto;
  min-height: var(--space-xl);
}


.spacer-line {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border) 15%, var(--color-border) 85%, transparent);
}

.spacer-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(227, 36, 36, 0.3);
}

/* --- Compact CTA Shortcode --- */
.stx-cta-compact {
  background: var(--color-bg-alt);
  border-radius: var(--border-radius);
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: var(--space-2xl) 0;
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.cta-compact-content {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.cta-compact-icon {
  background: rgba(227, 36, 36, 0.08);
  color: var(--color-primary);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-compact-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
}

.cta-compact-text {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0.25rem 0 0 0;
}

.cta-compact-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cta-compact-btn {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .stx-cta-compact {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
    gap: 1.25rem;
  }
  
  .cta-compact-actions {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .cta-compact-actions {
    flex-direction: column;
  }
  
  .cta-compact-btn {
    width: 100%;
    justify-content: center;
  }
}





.download-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.download-title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.3;
}

.download-meta {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.file-type {
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.file-separator {
  color: var(--color-border);
}

.download-action {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

@media (max-width: 576px) {
  .download-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: start;
    gap: var(--space-md);
  }
  .download-action {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}

/* --- Image Shortcode Enhancements --- */
.zoomable-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.zoomable-image-wrapper img {
  transition: opacity 0.3s ease;
  display: block;
}

.zoomable-image-wrapper:hover img {
  opacity: 0.92;
}

.zoom-hint-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.zoomable-image-wrapper:hover .zoom-hint-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Connect image and caption seamlessly */
.content-image:has(.image-caption) .zoomable-image-wrapper,
.content-image:has(.image-caption) img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


.image-caption {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: var(--color-bg-alt);
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  margin-top: 0 !important;
  border-left: 3px solid var(--color-primary);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}


.image-caption .caption-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  margin-top: 2px;
}

.image-caption .caption-icon svg {
  width: 18px;
  height: 18px;
}

/* --- Vanilla Lightbox Overlay --- */
.stx-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(5px);
  cursor: zoom-out;
}

.stx-lightbox-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.stx-lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stx-lightbox-overlay.is-active img {
  transform: scale(1);
}

.stx-lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.stx-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.stx-lightbox-close svg {
  width: 24px;
  height: 24px;
}

/* --- Carousel Shortcode --- */
.stx-carousel {
  position: relative;
  width: 100%;
  margin: var(--space-lg) 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: #000; /* Dark background for letterboxing */
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.stx-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.stx-carousel-track::-webkit-scrollbar {
  display: none;
}

.stx-carousel-track > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 100%;
  margin: 0 !important;
  border-radius: 0;
}

.stx-carousel-track .content-image {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
}

.stx-carousel-track .zoomable-image-wrapper {
  height: 450px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stx-carousel-track .content-image img {
  border-radius: 0;
  height: 100%;
  width: 100%;
  object-fit: contain; /* Prevent cropping, use letterboxing instead */
}

.stx-carousel-track .image-caption {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: 1.25rem 3.5rem; /* Clean padding for text and arrows */
  text-align: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

/* Nav Buttons */
.stx-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.stx-carousel-nav:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.stx-carousel-nav.stx-prev { left: 1rem; }
.stx-carousel-nav.stx-next { right: 1rem; }

@media (max-width: 768px) {
  .stx-carousel-nav {
    width: 36px;
    height: 36px;
  }
}

/* Indicators */
.stx-carousel-indicators {
  position: absolute;
  bottom: 5.5rem; /* Moves them up onto the black image area */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 15;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.stx-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}
.stx-indicator.active {
  background: #fff;
  transform: scale(1.2);
}

/* --- Team Grid --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-2xl) 0;
}

.team-member-card {
  background: var(--color-surface);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius-lg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.team-member-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-primary);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.member-image-wrapper {
  aspect-ratio: 1/1;
  width: 150px;
  margin: 0 auto var(--space-xl);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 4px solid var(--color-surface);
  transition: all 0.3s ease;
}

.team-member-card:hover .member-image-wrapper {
  transform: scale(1.08);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.member-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-image-placeholder {
  color: var(--color-text-secondary);
}

.member-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.member-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  color: var(--color-text-primary);
}

.member-position {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.member-desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  flex-grow: 1;
}

.member-linkedin {
  margin-top: auto;
  color: #0077b5;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-flex;
  align-self: center;
}

.member-linkedin:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

/* --- Box Shortcode --- */
.stx-box {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-premium);
  overflow: hidden;
  /* Margin is handled per position variant below */
}

/* Gradient top accent bar */
.stx-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

[data-theme="dark"] .stx-box {
  background: var(--color-surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ── Position variants ─────────────────────────────────────────── */
/* Two-class selectors beat the single-class .position-* rules
   defined earlier in the file, giving us full margin/size control. */

.stx-box.position-full {
  margin: var(--space-xl) 0;
  max-width: none;
}

.stx-box.position-center {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  /* .position-center supplies margin-left/right: auto */
}

.stx-box.position-left {
  float: left;
  margin-top: 0;
  margin-right: var(--space-xl);
  margin-bottom: var(--space-lg);
  margin-left: 0;
  max-width: none; /* user controls size via width attribute */
}

.stx-box.position-right {
  float: right;
  margin-top: 0;
  margin-left: var(--space-xl);
  margin-bottom: var(--space-lg);
  margin-right: 0;
  max-width: none;
}

/* ── Header (icon + title row) ─────────────────────────────────── */
.stx-box-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.stx-box-icon {
  background: rgba(227, 36, 36, 0.08);
  color: var(--color-primary);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-theme="dark"] .stx-box-icon {
  background: rgba(232, 69, 69, 0.12);
}

.stx-box-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-heading);
}

/* ── Body content ──────────────────────────────────────────────── */
.stx-box-body {
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.stx-box-body > *:first-child { margin-top: 0; }
.stx-box-body > *:last-child  { margin-bottom: 0; }

.stx-box-body ul,
.stx-box-body ol {
  padding-left: var(--space-xl);
  margin: var(--space-sm) 0;
}

.stx-box-body li { margin-bottom: var(--space-xs); }

.stx-box-body p {
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

/* ── Collapsible variant ───────────────────────────────────────── */
.box-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin: 0;
  padding: 0;
}

.box-summary::-webkit-details-marker { display: none; }

/* Remove bottom margin from header when it's inside the summary
   (body is hidden; spacing is only needed once opened) */
.box-summary .stx-box-header {
  margin-bottom: 0;
}

/* Restore spacing between header and body once the details is open */
.box-details[open] .stx-box-body {
  margin-top: var(--space-lg);
}

.box-toggle-icon {
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast);
  display: flex;
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.box-details[open] .box-toggle-icon {
  transform: rotate(180deg);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stx-box.position-left,
  .stx-box.position-right {
    float: none;
    margin: var(--space-xl) 0;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .stx-box {
    padding: var(--space-lg);
  }
}

/* ── Box grid (box-grid shortcode) ─────────────────────────────── */
/* Lays out nested boxes as equal-height cards. Scoped to the grid
   wrapper, so a box outside a grid renders exactly as before. */
.stx-box-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.stx-box-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stx-box-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stx-box-grid > .stx-box {
  margin: 0;
  width: auto;
  padding: var(--space-lg);
}

.stx-box-grid .stx-box-header {
  margin-bottom: var(--space-md);
}

.stx-box-grid .stx-box-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.stx-box-grid .stx-box-title {
  font-size: var(--fs-h4);
}

.stx-box-grid .stx-box-body {
  font-size: var(--fs-small);
}

@media (max-width: 1024px) {
  .stx-box-grid.cols-3,
  .stx-box-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Card type (card-type shortcode) ───────────────────────────── */
/* A grid box whose top band shows an illustration from the 1Access
   deck. The band keeps the deck's card background in both themes,
   because the illustration's colours are drawn for it. */
.stx-box-grid > .stx-card-type {
  padding-top: 0;
}

.stx-card-type-visual {
  background: #1d1c1c;
  margin: 0 calc(-1 * var(--space-lg)) var(--space-md);
}

.stx-card-type-svg {
  display: block;
  width: 100%;
  height: auto;
}

.stx-card-type .stx-box-title {
  margin-bottom: var(--space-sm);
}

@media (max-width: 640px) {
  .stx-box-grid.cols-2,
  .stx-box-grid.cols-3,
  .stx-box-grid.cols-4 { grid-template-columns: 1fr; }
}

/* ============================================
   Resource Link Rows
   --------------------------------------------
   Compact document / video / presentation rows.
   Designed for narrow containers — typically a
   `box` with position="right" — where the wide
   .download-card would not fit.
   ============================================ */
.resource-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
  transition: opacity var(--transition-fast);
}

/* First row sits flush under the box header — no double rule. */
.stx-box-body > .resource-link:first-child {
  border-top: none;
  padding-top: 0;
}

.stx-box-body > .resource-link:last-child {
  padding-bottom: 0;
}

.resource-link-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

[data-theme="dark"] .resource-link-icon {
  background: rgba(255, 255, 255, 0.06);
}

.resource-link-body {
  min-width: 0; /* lets long titles wrap instead of overflowing the box */
  flex: 1 1 auto;
}

.resource-link-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--color-heading);
  text-decoration: none;
}

/* Stretched hit area: the whole row is clickable, but there is still only
   one anchor in the accessibility tree, named by the title text. */
.resource-link-title::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
}

.resource-link:hover .resource-link-title {
  color: var(--color-primary);
}

.resource-link:hover .resource-link-icon {
  background: var(--color-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

.resource-link:hover .resource-link-arrow {
  color: var(--color-primary);
  transform: translateX(2px);
}

.resource-link-title:focus-visible::after {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Two classes to outrank `.stx-box-body p`, which would otherwise strip the
   top margin and add a bottom one. */
.resource-link .resource-link-desc {
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.resource-link-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
}

.resource-link-type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.resource-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

[data-theme="dark"] .resource-link-badge {
  background: rgba(255, 255, 255, 0.06);
}

.resource-link-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* Very narrow boxes on small screens: drop the trailing arrow rather than
   squeezing the title into two-character lines. */
@media (max-width: 480px) {
  .resource-link-arrow {
    display: none;
  }
}

/* ============================================
   SAP Store Badge
   --------------------------------------------
   Rendered by _default/single.html into the page
   header for any page with `sap_store_url`, so
   placement is identical on every product page
   rather than depending on where it is pasted
   into the content.
   ============================================ */
.sap-store-badge {
  margin: 0;
}

.sap-store-badge img {
  width: 100%;
  height: auto;
  display: block;
}

.sap-store-badge a {
  display: block;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.sap-store-badge a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ── Beside the page title ──────────────────────────────────────
   The h1's own margin is moved to the row so header spacing stays
   identical to pages without a badge. */
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.page-header-row h1 {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.sap-store-badge.in-page-header {
  flex: 0 0 auto;
  width: 200px;
}

/* Stack under the title on small screens — one short row of vertical
   space, rather than squeezing the title to half width. */
@media (max-width: 768px) {
  .page-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .sap-store-badge.in-page-header {
    width: 180px;
  }
}

/* ============================================
   Customer Reference Cards
   ============================================ */
.ref-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
}

.ref-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.ref-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  z-index: 1;
}

.ref-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(227, 36, 36, 0.2);
}

.ref-card:has(.ref-card-details[open]) {
  border-color: rgba(227, 36, 36, 0.3);
}

[data-theme="dark"] .ref-card {
  background: var(--color-surface);
}

[data-theme="dark"] .ref-card:hover {
  border-color: rgba(232, 69, 69, 0.35);
}

/* ── Summary (always visible) ─────────────── */
.ref-card-summary {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-2xl);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--transition-fast);
}

.ref-card-summary::-webkit-details-marker { display: none; }

.ref-card-summary:hover {
  background: rgba(227, 36, 36, 0.025);
}

[data-theme="dark"] .ref-card-summary:hover {
  background: rgba(232, 69, 69, 0.05);
}

.ref-card-logo {
  flex-shrink: 0;
  width: 96px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.5rem;
  overflow: hidden;
}

[data-theme="dark"] .ref-card-logo {
  background: #ffffff;
}

.ref-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ref-card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ref-card-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-heading);
}

.ref-card-tag {
  order: -1;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.ref-card-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  background: var(--color-bg-alt);
  border-radius: 50%;
  transition: transform var(--transition-base), color var(--transition-fast), background-color var(--transition-fast);
}

.ref-card-summary:hover .ref-card-toggle {
  color: var(--color-primary);
  background: rgba(227, 36, 36, 0.08);
}

.ref-card-details[open] .ref-card-toggle {
  transform: rotate(180deg);
  color: var(--color-primary);
  background: rgba(227, 36, 36, 0.08);
}

[data-theme="dark"] .ref-card-details[open] .ref-card-toggle,
[data-theme="dark"] .ref-card-summary:hover .ref-card-toggle {
  background: rgba(232, 69, 69, 0.12);
}

/* ── Body (expanded content) ─────────────── */
.ref-card-body {
  padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Meta row (HQ, founded, employees, website) */
.ref-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px dashed var(--color-border);
}

.ref-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.ref-meta-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.ref-meta-label {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
}

.ref-meta-value {
  font-weight: 600;
  color: var(--color-text);
}

.ref-meta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(227, 36, 36, 0.25);
  border-radius: 100px;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.ref-meta-link:hover {
  color: #ffffff;
  background: var(--gradient-primary);
  border-color: transparent;
  transform: translateY(-1px);
}

.ref-meta-link + .ref-meta-link {
  margin-left: 0;
}

/* Project container (may hold one or multiple projects) */
.ref-projects {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.ref-projects--multi > .ref-project + .ref-project {
  padding-top: var(--space-xl);
  border-top: 1px dashed var(--color-border);
}

/* Generic section inside body */
.ref-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ref-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.ref-section-text {
  margin: 0;
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.ref-section-text > * {
  margin: 0;
}

.ref-section-text > * + * {
  margin-top: 0.5rem;
}

/* Project heading — stacked kicker + name */
.ref-project .ref-section-title {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
}

.ref-project-kicker {
  color: var(--color-primary);
}

.ref-project-name {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-heading);
  text-transform: none;
  color: var(--color-heading);
}

@media (max-width: 768px) {
  .ref-project-name {
    font-size: 1.2rem;
  }
}

/* Chip row */
.ref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ref-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  white-space: nowrap;
  line-height: 1;
}

.ref-chip--product {
  color: var(--color-primary);
  background: rgba(227, 36, 36, 0.08);
  border: 1px solid rgba(227, 36, 36, 0.2);
}

.ref-chip--module {
  color: var(--color-text-secondary);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .ref-chip--product {
  background: rgba(232, 69, 69, 0.12);
  border-color: rgba(232, 69, 69, 0.28);
}

/* Challenge / Solution grid */
.ref-project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.ref-project-block {
  position: relative;
  padding: var(--space-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ref-project-block-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--color-primary);
  background: rgba(227, 36, 36, 0.08);
}

.ref-project-block--challenge .ref-project-block-icon {
  color: #c28100;
  background: rgba(194, 129, 0, 0.1);
}

[data-theme="dark"] .ref-project-block--challenge .ref-project-block-icon {
  color: #e6a83d;
  background: rgba(230, 168, 61, 0.12);
}

.ref-project-block-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ref-project-block-text {
  color: var(--color-text);
  line-height: var(--line-height-body);
  font-size: var(--fs-small);
}

.ref-project-block-text > * {
  margin: 0;
}

.ref-project-block-text > * + * {
  margin-top: 0.5rem;
}

.ref-project-block-text ul,
.ref-project-block-text ol {
  padding-left: 1.25rem;
}

.ref-project-block-text li {
  margin: 0.15rem 0;
}

/* Highlights */
.ref-highlights {
  margin-top: var(--space-md);
}

.ref-highlights-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.ref-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem var(--space-lg);
}

.ref-highlights-list li {
  padding-left: 1.3rem;
  position: relative;
  font-size: var(--fs-small);
  color: var(--color-text);
  line-height: 1.55;
}

.ref-highlights-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 0.7rem;
  top: 0.2em;
}

/* Quote */
.ref-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ref-quote {
  position: relative;
  margin: 0;
  padding: var(--space-lg) var(--space-xl) var(--space-lg) var(--space-2xl);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--border-radius);
}

.ref-quote-mark {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  color: var(--color-primary);
  opacity: 0.18;
  width: 36px;
  height: 36px;
}

.ref-quote-text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--color-heading);
}

.ref-quote-footer {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  align-items: baseline;
}

.ref-quote-person {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-heading);
}

.ref-quote-role {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.ref-quote-person + .ref-quote-role::before {
  content: '— ';
  margin-right: 0.15rem;
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 768px) {
  .ref-card-summary {
    padding: var(--space-lg) var(--space-xl);
    gap: var(--space-md);
  }

  .ref-card-logo {
    width: 76px;
    height: 56px;
  }

  .ref-card-name {
    font-size: 1.15rem;
  }

  .ref-card-body {
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
    gap: var(--space-lg);
  }

  .ref-meta-link {
    margin-left: 0;
  }

  .ref-project-grid,
  .ref-highlights-list {
    grid-template-columns: 1fr;
  }

  .ref-quote {
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl);
  }

  .ref-quote-text {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .ref-card-toggle {
    width: 32px;
    height: 32px;
  }

  .ref-card-toggle svg {
    width: 18px;
    height: 18px;
  }
}

/* --- Gated Download Shortcode --- */
.gd-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-premium);
  margin: var(--space-2xl) 0;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.gd-card:hover {
  box-shadow: var(--shadow-premium-hover);
}

/* ── Collapsible header (summary element) ── */
.gd-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.gd-card-header::-webkit-details-marker { display: none; }

/* Static (non-collapsible) header has no pointer cursor */
.gd-card-header--static {
  cursor: default;
}

/* When collapsed, the body is hidden so the header border-bottom
   would look like a bottom card edge — remove it. */
details.gd-card:not([open]) > .gd-card-header {
  border-bottom: none;
}

.gd-toggle-icon {
  margin-left: auto;
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast);
  display: flex;
  flex-shrink: 0;
}

details.gd-card[open] .gd-toggle-icon {
  transform: rotate(180deg);
}

.gd-card-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(227, 36, 36, 0.1);
  color: var(--color-primary);
  border-radius: var(--border-radius);
  flex-shrink: 0;
}

.gd-lock-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  border: 2px solid var(--color-card-bg);
}

.gd-card-heading {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.3;
  flex: 1;
}

.gd-card-body {
  padding: var(--space-xl);
}

.gd-intro {
  margin-bottom: var(--space-lg);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--line-height-body);
}

.gd-intro p { margin: 0 0 var(--space-sm); }
.gd-intro p:last-child { margin-bottom: 0; }
.gd-intro ul, .gd-intro ol {
  margin: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  padding: 0;
}
.gd-intro li { margin-bottom: var(--space-xs); }

/* Disclaimer: shown only in the success panel, above the download button */
.gd-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  background: var(--color-bg-alt);
  border-radius: var(--border-radius);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  border-left: 3px solid var(--color-border);
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.gd-disclaimer svg {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.6;
}

.gd-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
}

.gd-field:last-child {
  grid-column: 1 / -1;
}

.gd-field-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.gd-field-input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  box-sizing: border-box;
}

.gd-field-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(227, 36, 36, 0.12);
}

.gd-field-input::placeholder {
  color: var(--color-text-secondary);
  opacity: 0.6;
}

[data-theme='dark'] .gd-field-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme='dark'] .gd-field-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(232, 69, 69, 0.2);
}

.gd-consent {
  margin-bottom: var(--space-lg);
}

.gd-consent-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.gd-consent-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.gd-consent-text {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.gd-privacy-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gd-privacy-link:hover {
  color: var(--color-primary-hover);
}

.gd-error {
  font-size: var(--fs-small);
  color: #c91f1f;
  background: rgba(227, 36, 36, 0.08);
  border: 1px solid rgba(227, 36, 36, 0.25);
  border-radius: var(--border-radius);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

[data-theme='dark'] .gd-error {
  color: #ff7b7b;
  background: rgba(232, 69, 69, 0.12);
  border-color: rgba(232, 69, 69, 0.3);
}

/* Cloudflare Turnstile widget */
.gd-turnstile {
  margin-bottom: var(--space-lg);
  min-height: 65px;
}

.gd-turnstile:empty {
  margin-bottom: 0;
}

.gd-submit-btn {
  width: 100%;
  justify-content: center;
}

.gd-submit-btn:disabled,
.gd-submit-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Success panel — flex layout, but hidden attribute must win */
.gd-success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-xl) 0 var(--space-sm);
}

.gd-success-panel[hidden] {
  display: none;
}

.gd-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border-radius: 50%;
}

[data-theme='dark'] .gd-success-icon {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}

.gd-success-message {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-heading);
}

/* Responsive */
@media (max-width: 600px) {
  .gd-card-header {
    padding: var(--space-md) var(--space-lg);
  }

  .gd-card-body {
    padding: var(--space-lg);
  }

  .gd-fields {
    grid-template-columns: 1fr;
  }

  .gd-field:last-child {
    grid-column: auto;
  }
}

/* ============================================
   Event Promo Card

   Rendered by layouts/partials/event-promo.html,
   directly after the hero on the homepage. On wide
   screens the card is pulled up so it overlaps the
   hero's bottom edge and visually bridges the hero
   and the page content.
   ============================================ */

.event-promo {
  position: relative;
  /* .hero-content carries z-index: 3 inside a .hero that creates no stacking
     context, so the card needs to sit above that to overlap the hero. */
  z-index: 4;
  /* A small overlap even on phones, so the card reads as deliberately docked
     into the hero rather than accidentally touching its bottom edge. */
  --event-promo-overlap: 1rem;
  margin-top: calc(-1 * var(--event-promo-overlap));
}

@media (min-width: 1024px) {
  .event-promo {
    /* Deliberately well under the hero's 4rem bottom padding, so the card can
       never creep over the hero CTAs — not even on a short viewport. */
    --event-promo-overlap: 2.5rem;
  }
}

.event-promo-card {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .event-promo-card {
    padding: var(--space-2xl);
  }
}

/* --- Eyebrow: badge + date/location --- */

.event-promo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-md);
}

.event-promo-badge {
  background: var(--gradient-primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(227, 36, 36, 0.3);
}

.event-promo-when {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.event-promo-sep {
  /* The markup already carries a real space on each side. */
  margin: 0 0.15em;
  opacity: 0.55;
}

/* Break between the date and the location, never inside either of them. */
.event-promo-when-part {
  white-space: nowrap;
}

/* --- Headline + subline --- */

.event-promo-headline {
  /* Tuned to keep "sophisTex & SAP PLM Roadshow" on a single line from the
     tablet breakpoint upwards; it wraps to two lines on phones. */
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

.event-promo-subline {
  max-width: 52ch;
  margin: 0 auto var(--space-xl);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* --- CTA --- */

.event-promo-cta svg {
  transition: transform var(--transition-fast);
}

.event-promo-cta:hover svg {
  transform: translate(2px, -2px);
}

/* --- Logo row --- */

.event-promo-logos {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.event-promo-logos-label {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.event-promo-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg) clamp(var(--space-xl), 5vw, var(--space-3xl));
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-promo-logo img {
  display: block;
  /* --logo-h is set per brand from data/events.yaml, because the three
     lockups have very different proportions and equal heights look wrong. */
  height: var(--logo-h, 32px);
  width: auto;
}

@media (max-width: 640px) {
  .event-promo-logo img {
    height: calc(var(--logo-h, 32px) * 0.8);
  }
}

/* Full-colour logos in light mode, white knockout versions in dark mode —
   same pattern as .site-logo. */
.event-promo-logo .logo-dark {
  display: none;
}

[data-theme="dark"] .event-promo-logo .logo-light {
  display: none;
}

[data-theme="dark"] .event-promo-logo .logo-dark {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .event-promo-cta svg {
    transition: none;
  }

  .event-promo-cta:hover svg {
    transform: none;
  }
}
/* ============================================================
   Showcase — autoplaying product tour
   Rendered by layouts/shortcodes/showcase.html
   Behaviour in assets/js/showcase.js
   ============================================================ */

:root {
  --sc-stage-base: #f6f4f3;
  --sc-frame: #ffffff;
  --sc-frame-edge: rgba(24, 18, 18, .10);
  --sc-frame-shadow: 0 18px 50px -18px rgba(40, 20, 20, .30), 0 2px 6px rgba(40, 20, 20, .06);
  --sc-grain-opacity: .07;
  --sc-grain-blend: multiply;
  --sc-track: #e2dedc;
  --sc-duration: 6000ms;
}

[data-theme="dark"] {
  --sc-stage-base: #1c1c20;
  --sc-frame: #f7f6f6;
  --sc-frame-edge: rgba(255, 255, 255, .12);
  --sc-frame-shadow: 0 22px 60px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .05);
  --sc-grain-opacity: .13;
  --sc-grain-blend: overlay;
  --sc-track: #35353b;
}

/* Accent variants. `accent="<css colour>"` sets --sc-accent inline instead. */
.sc[data-accent="primary"] { --sc-accent: var(--color-primary); }
.sc[data-accent="neutral"] { --sc-accent: #8a7370; }
[data-theme="dark"] .sc[data-accent="neutral"] { --sc-accent: #9c8481; }
.sc { --sc-bloom-1: 55%; --sc-bloom-2: 26%; --sc-bloom-3: 10%; }

/* ------------------------------------------------------------
   Shell
   ------------------------------------------------------------ */

.sc {
  --sc-gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: var(--space-2xl) 0;
}

.sc__intro { max-width: 46ch; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }

.sc__kicker {
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 .6rem;
}

.sc__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.22;
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
  margin: 0;
  color: var(--color-heading);
}

.sc__lead {
  margin: .7rem 0 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
}

.sc__layout {
  display: grid;
  gap: var(--sc-gap);
  grid-template-areas: "stage" "rail" "steps";
}

/* The rail track sizes to its longest label — German phase names ("KONFIGURIEREN")
   overflow a fixed width, and the labels are uppercase and letter-spaced so they
   must not wrap. */
@media (min-width: 760px) {
  .sc__layout {
    grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
    grid-template-areas: "stage stage" "rail steps";
  }
}

@media (min-width: 1080px) {
  .sc__layout {
    grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-areas: "rail steps stage";
    align-items: start;
  }
}

/* Flat sequences have no phase rail, so nothing reserves its column. */
.sc[data-levels="flat"] .sc__layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "steps";
}

@media (min-width: 1080px) {
  .sc[data-levels="flat"] .sc__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-areas: "steps stage";
    align-items: start;
  }
}

/* ------------------------------------------------------------
   Stacked layout — the stage takes the full content width (~1064px in a
   1200px container, against ~420px in the split layout) and the steps move
   to a horizontal strip beneath it. Declared after the split rules and at
   equal-or-higher specificity so it wins at every breakpoint.
   ------------------------------------------------------------ */

.sc[data-layout="stacked"] .sc__layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "rail" "steps";
}
.sc[data-layout="stacked"][data-levels="flat"] .sc__layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "steps";
}

/* Keep the whole component in view. A near-square screenshot at the full
   content width would stand ~1000px tall and push the step strip below the
   fold, so the frame's height is capped and its width follows from the aspect
   ratio — the image still fills the frame exactly, so nothing is cropped and
   no letterboxing appears. Tall images simply narrow and centre, with the
   gradient filling the space either side. Tune --sc-stage-max-h to trade
   image size against how much sits above the fold. */
.sc[data-layout="stacked"] { --sc-stage-max-h: 52vh; }
@supports (height: 1dvh) {
  /* dvh so a mobile browser's collapsing toolbar does not overshoot. */
  .sc[data-layout="stacked"] { --sc-stage-max-h: 52dvh; }
}
.sc[data-layout="stacked"] .sc-stage__frame {
  max-width: calc(var(--sc-stage-max-h) * var(--sc-ratio, 1.6));
  margin-inline: auto;
}

/* Phase rail runs horizontally under the stage. */
.sc[data-layout="stacked"] .sc-rail {
  flex-direction: row;
  border-left: 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.sc[data-layout="stacked"] .sc-rail__legend { display: none; }
.sc[data-layout="stacked"] .sc-rail button { padding: .55rem .8rem; }
.sc[data-layout="stacked"] .sc-rail button::after {
  left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px;
}

/* Step strip: equal columns that wrap once they get too narrow to read.
   The min track is capped with min(...,100%) so a narrow viewport collapses
   the strip to fewer columns instead of forcing the page to scroll sideways. */
.sc-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  border-top: 1px solid var(--color-border);
  min-width: 0;
}
.sc[data-layout="stacked"] .sc__steps { min-width: 0; }

.sc[data-layout="stacked"] .sc-step {
  display: flex;
  flex-direction: column;
  border-bottom: 0;
}
.sc[data-layout="stacked"] .sc-step:first-child { border-top: 0; }
.sc[data-layout="stacked"] .sc-step__head {
  padding: .9rem 0 .75rem;
  align-items: flex-start;
}
.sc[data-layout="stacked"] .sc-step__bar { margin-top: auto; }

/* Shared description region. All panels occupy the same grid cell, so the
   region is as tall as the longest one and switching steps never shifts the
   page — at the cost of some slack under the shorter descriptions. */
.sc-panels {
  display: grid;
  padding-top: 1.35rem;
}
.sc-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease;
}
.sc-panel.is-active { opacity: 1; visibility: visible; }

/* The copy is no longer nested under an icon, so drop the indent, and let it
   run the full width of the panel region rather than a narrower measure. */
.sc[data-layout="stacked"] .sc-step__copy {
  padding: 0;
  max-width: none;
  opacity: 1;
}
.sc[data-layout="stacked"] .sc-step__cta {
  margin: .85rem 0 0;
  opacity: 1;
}

/* ------------------------------------------------------------
   Phase rail
   ------------------------------------------------------------ */

.sc__rail { grid-area: rail; }

.sc-rail {
  display: flex;
  gap: .1rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border);
}
.sc-rail::-webkit-scrollbar { display: none; }

.sc-rail__legend {
  display: none;
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 .85rem;
}

.sc-rail button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: left;
  padding: .55rem .8rem;
  white-space: nowrap;
  position: relative;
  transition: color var(--transition-fast);
}
.sc-rail button:hover { color: var(--color-text); }
.sc-rail button[aria-selected="true"] { color: var(--color-primary); }

.sc-rail button::after {
  content: "";
  position: absolute;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--transition-fast);
  left: 0; right: 0; bottom: -1px; height: 2px;
}
.sc-rail button[aria-selected="true"]::after { opacity: 1; }

@media (min-width: 1080px) {
  /* Vertical rail: the track is sized to the labels, so nothing needs to
     scroll and overflow must not clip the widest one. */
  .sc-rail { flex-direction: column; border-bottom: 0; border-left: 2px solid var(--color-border); overflow: visible; }
  .sc-rail__legend { display: block; }
  .sc-rail button { padding: .5rem 0 .5rem .85rem; }
  .sc-rail button::after { left: -2px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
}

/* ------------------------------------------------------------
   Step accordion
   ------------------------------------------------------------ */

.sc__steps { grid-area: steps; }

.sc-steps { list-style: none; margin: 0; padding: 0; }
/* Applies to both group containers: the <ul> in split, the wrapper in stacked. */
.sc-group[hidden] { display: none; }

.sc-step { border-bottom: 1px solid var(--color-border); }
.sc-step:first-child { border-top: 1px solid var(--color-border); }

.sc-step__head {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 0;
  text-align: left;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.sc-step__head:hover { color: var(--color-text); }
.sc-step.is-active .sc-step__head { color: var(--color-text); }

.sc-step__icon {
  flex: none;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  opacity: .5;
  transition: opacity var(--transition-fast);
}
.sc-step.is-active .sc-step__icon { opacity: 1; }
.sc-step__icon svg { width: .875rem; height: .875rem; }

.sc-step__title {
  font-size: var(--fs-small);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
}

.sc-step__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 340ms ease;
}
.sc-step.is-active .sc-step__body { grid-template-rows: 1fr; }
.sc-step__body > div { overflow: hidden; }

.sc-step__copy {
  margin: 0;
  padding: 0 0 1.1rem 2.25rem;
  max-width: 56ch;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  opacity: 0;
  transition: opacity 260ms ease 80ms;
}
.sc-step.is-active .sc-step__copy { opacity: 1; }

.sc-step__cta {
  /* Block-level so it keeps its own line however wide the copy runs. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .35rem;
  margin: -.5rem 0 1.1rem 2.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  opacity: 0;
  transition: opacity 260ms ease 80ms;
}
.sc-step.is-active .sc-step__cta { opacity: 1; }
.sc-step__cta:hover { text-decoration: underline; }
.sc-step__cta svg { width: .8rem; height: .8rem; }

/* Progress bar — the clock the whole component runs on. */
.sc-step__bar { height: 2px; background: var(--sc-track); overflow: hidden; }
.sc-step__fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
}
.sc-step.is-active .sc-step__fill {
  animation: sc-fill var(--sc-step-duration, var(--sc-duration)) linear forwards;
}
@keyframes sc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Pause only for the explicit control, an open lightbox, or being off-screen.
   Deliberately NOT hover or focus — clicking a step must not halt the tour. */
.sc.is-paused .sc-step.is-active .sc-step__fill,
.sc.is-lightbox .sc-step.is-active .sc-step__fill,
.sc.is-offscreen .sc-step.is-active .sc-step__fill { animation-play-state: paused; }

/* ------------------------------------------------------------
   Transport
   ------------------------------------------------------------ */

.sc__transport { display: flex; align-items: center; gap: .75rem; padding-top: 1.1rem; }

.sc-play {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .35rem .8rem .35rem .6rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.sc-play:hover { color: var(--color-text); border-color: var(--color-text-secondary); }
.sc-play svg { width: .7rem; height: .7rem; }

.sc-play__play { display: none; }
.sc.is-paused .sc-play__play { display: inline; }
.sc.is-paused .sc-play__pause { display: none; }

.sc__hint { font-size: var(--fs-xs); letter-spacing: .06em; color: var(--color-text-secondary); }

.sc__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.sc__cta:hover { text-decoration: underline; }
.sc__cta svg { width: .85rem; height: .85rem; }

/* ------------------------------------------------------------
   Stage
   ------------------------------------------------------------ */

.sc__stage { grid-area: stage; }

.sc-stage {
  position: relative;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  padding: clamp(1rem, 3.5vw, 2.25rem);
  background:
    radial-gradient(95% 80% at 2% 98%, color-mix(in oklab, var(--sc-accent) var(--sc-bloom-1), transparent) 0%, transparent 55%),
    radial-gradient(80% 70% at 92% 4%, color-mix(in oklab, var(--sc-accent) var(--sc-bloom-2), transparent) 0%, transparent 58%),
    radial-gradient(130% 110% at 55% 45%, color-mix(in oklab, var(--sc-accent) var(--sc-bloom-3), transparent) 0%, transparent 72%),
    var(--sc-stage-base);
}

/* Film grain */
.sc-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--sc-grain-opacity);
  mix-blend-mode: var(--sc-grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sc[data-grain="off"] .sc-stage::after { display: none; }

.sc-zoom {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 3.5vw, 2.25rem);
  right: clamp(1rem, 3.5vw, 2.25rem);
  transform: translate(-.55rem, .55rem);
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .7rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  color: #3a2f2f;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(40, 20, 20, .16);
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.sc-zoom svg { width: .8rem; height: .8rem; }
.sc-stage:hover .sc-zoom,
.sc-zoom:focus-visible { opacity: 1; }
.sc-zoom:hover { background: #fff; }
/* Touch users get no hover — keep the affordance visible there. */
@media (hover: none) { .sc-zoom { opacity: 1; } }

/* The frame takes the active image's own aspect ratio (set per step by
   showcase.js from each figure's data-ratio) so screenshots of any dimension
   fill it edge to edge. A sequence that pins `aspect:` in its data file keeps
   a fixed ratio instead. */
.sc-stage__frame {
  position: relative;
  cursor: zoom-in;
  aspect-ratio: var(--sc-ratio, 1.6);
  transition: aspect-ratio 420ms ease, max-width 420ms ease;
  border-radius: var(--border-radius);
  background: var(--sc-frame);
  box-shadow: var(--sc-frame-shadow);
  outline: 1px solid var(--sc-frame-edge);
  outline-offset: -1px;
  overflow: hidden;
}

.sc-shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(6px) scale(.995);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}
.sc-shot.is-active { opacity: 1; transform: none; }

.sc-shot img {
  width: 100%;
  height: 100%;
  /* The frame already matches this image's ratio, so cover fills it exactly.
     It is here as a guard: sub-pixel rounding trims a hair rather than
     revealing a white sliver, and a pinned `aspect:` crops instead of
     letterboxing. */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ------------------------------------------------------------
   Lightbox — the tour holds while this is open
   ------------------------------------------------------------ */

.sc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(18, 12, 12, .78);
  backdrop-filter: blur(8px);
  animation: sc-lb-in 180ms ease;
}
.sc-lightbox[hidden] { display: none; }
@keyframes sc-lb-in { from { opacity: 0; } to { opacity: 1; } }

/* Shrink-wrap the image rather than filling a fixed box, so a tall screenshot
   constrained by max-height never leaves bars down its sides. */
.sc-lightbox__inner {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  width: fit-content;
  max-width: min(1180px, 100%);
}

.sc-lightbox__frame {
  position: relative;
  border-radius: var(--border-radius);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .7);
  overflow: hidden;
  line-height: 0;
}
.sc-lightbox__frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
}

.sc-lightbox__cap {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.sc-lightbox__cap b { color: #fff; font-weight: 600; }
.sc-lightbox__cap span { color: rgba(255, 255, 255, .45); text-transform: none; letter-spacing: .03em; }

.sc-lightbox__close {
  position: absolute;
  top: clamp(.75rem, 2.5vw, 1.5rem);
  right: clamp(.75rem, 2.5vw, 1.5rem);
  appearance: none;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background var(--transition-fast);
}
.sc-lightbox__close:hover { background: rgba(255, 255, 255, .2); }
.sc-lightbox__close svg { width: 1.05rem; height: 1.05rem; }

/* ------------------------------------------------------------
   Reduced motion — no autoplay, no crossfade; everything stays clickable.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .sc-step.is-active .sc-step__fill { animation: none; transform: scaleX(1); }
  .sc-shot,
  .sc-stage__frame,
  .sc-step__body,
  .sc-step__copy,
  .sc-step__cta,
  .sc-panel { transition: none; }
  .sc-lightbox { animation: none; }
}