/**
 * E57 EGG OVERRIDES — e57-overrides.css
 * ═══════════════════════════════════════════════════════════════════
 *
 * Egg-specific styles for efiftyseven.com (TLE platform egg: e57).
 * Loaded AFTER compiled.ba547207.css so these rules win on specificity ties.
 *
 * RULE: All colors from tokens.css or the E57 brand palette.
 *       All spacing from the fluid token scale.
 *       All fonts: Poppins (display) / Public Sans (body) — self-hosted.
 *       No inline styles in templates — everything lives here.
 *
 * Palette reference (from tokens.css):
 *   --e57-blue:       #174b7f    (primary)
 *   --e57-blue-dark:  #0d2f54    (nav links, dark surfaces)
 *   --e57-green:      #31a85b    (accent / CTA hover)
 *   --e57-green-dark: #1b7a3d    (green-dark hover)
 *
 * Table of contents:
 *   1. Layout — container, main spacer
 *   2. Header
 *   3. Footer
 *   4. Section patterns — hero, section, alt, dark
 *   5. Buttons
 *   6. Typography — eyebrow, title, body
 *   7. Dual-identity toggle bar
 *   8. Industries flip cards
 *   9. Responsive breakpoints (480 / 768 / 1024)
 */


/* ═══════════════════════════════════════════
   0. BASE — body defaults (compiled.css is absent in dev)
   ═══════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin: 0;
}


/* ═══════════════════════════════════════════
   1. LAYOUT
   ═══════════════════════════════════════════ */

.e57-container {
  max-width: 75rem;           /* 1200px */
  margin-inline: auto;
  padding-inline: var(--space-md);
  width: 100%;
}

.e57-main {
  min-height: 60vh;
}

/* Compensate for fixed header height (4.5rem) */
.e57-header-spacer {
  height: 4.5rem;
}


/* ═══════════════════════════════════════════
   2. HEADER
   CREATURE LOCK (Oscar, 2026-08-05):
   - Full-width bar, edge to edge
   - Content constrained to 1200px (12 × 100px grid)
   - Logo LEFT, nav CENTER (middle 5 columns, spaced), CTA RIGHT (generous padding)
   - Fixed — content scrolls beneath
   ═══════════════════════════════════════════ */

.e57-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--layer-sticky);
  background: #ffffff;
  border-bottom: 1px solid var(--color-border-light, #e8edf2);
  transition: box-shadow var(--duration-fast) var(--ease-precision);
}

.e57-header--scrolled {
  box-shadow: var(--shadow-md);
}

.e57-header__container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--grid-margin);
  height: 4.5rem;
}

/* Logo — left, grid column 1 */
.e57-header__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  grid-column: 1;
}

.e57-header__logo img {
  height: 2.5rem;
  width: auto;
  display: block;
}

/* Desktop nav — center, occupying middle 5 columns worth of space */
.e57-header__nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.e57-header__nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--e57-blue-dark);
  text-decoration: none;
  padding: 0.5rem 0.25rem;
  white-space: nowrap;
  position: relative;
  transition: color var(--duration-fast) var(--ease-precision);
}

.e57-header__nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--e57-green);
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-precision);
}

.e57-header__nav-link:hover {
  color: var(--e57-green);
}

.e57-header__nav-link:hover::after {
  transform: scaleX(1);
}

.e57-header__nav-link--active {
  color: var(--e57-blue-dark);
  font-weight: var(--font-semibold);
}

.e57-header__nav-link--active::after {
  transform: scaleX(1);
  background: var(--e57-blue);
}

/* Right cluster — grid column 3 */
.e57-header__right {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* CTA button — generous padding, not hasty */
.e57-header__cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: #ffffff;
  background: var(--e57-green);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-precision);
}

.e57-header__cta:hover {
  background: var(--e57-green-dark);
  color: #ffffff;
}

/* Hamburger button — hidden on desktop */
.e57-header__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-precision);
  padding: 0;
}

.e57-header__burger:hover {
  background: var(--color-surface-2);
}

.e57-header__burger span {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--e57-blue-dark);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background var(--duration-fast) var(--ease-precision),
              transform var(--duration-fast) var(--ease-precision);
}

.e57-header__burger span::before,
.e57-header__burger span::after {
  content: "";
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--e57-blue-dark);
  position: absolute;
  left: 0;
  transition: all var(--duration-fast) var(--ease-precision);
}

.e57-header__burger span::before { top: -6px; }
.e57-header__burger span::after  { top:  6px; }

/* Burger open (X) state */
.e57-header__burger--open span            { background: transparent; }
.e57-header__burger--open span::before   { top: 0; transform: rotate(45deg); }
.e57-header__burger--open span::after    { top: 0; transform: rotate(-45deg); }

/* Mobile menu overlay */
.e57-header__mobile-menu {
  display: none;
  position: fixed;
  inset-block-start: var(--header-height);
  inset-inline: 0;
  inset-block-end: 0;
  background: #ffffff;
  z-index: var(--layer-drawer);
  padding: var(--space-md);
  flex-direction: column;
  gap: var(--space-3xs);
  overflow-y: auto;
  border-top: var(--border-1) solid #e8edf2;
}

.e57-header__mobile-menu--open {
  display: flex;
}

.e57-header__mobile-menu .e57-header__nav-link {
  font-size: var(--text-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  width: 100%;
}

.e57-header__cta--mobile {
  margin-block-start: var(--space-sm);
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-md);
}


/* ═══════════════════════════════════════════
   3. FOOTER
   ═══════════════════════════════════════════ */

.e57-footer {
  background: var(--e57-blue-dark);    /* #0d2f54 */
  color: var(--gray-400);
  padding-block-start: var(--space-xl);
}

.e57-footer__container {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;  /* P1: Brand + Company + Resources */
  gap: var(--space-xl);
}

/* Brand column */
.e57-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.e57-footer__logo-link {
  display: inline-block;
  line-height: 0;
}

.e57-footer__logo {
  height: 1.75rem;
  width: auto;
  filter: brightness(10);
  opacity: 0.85;
  display: block;
}

.e57-footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gray-400);
  max-width: 18rem;
  margin: 0;
}

.e57-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: var(--space-2xs);
}

.e57-footer__contact-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-400);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-precision);
}

.e57-footer__contact-link:hover {
  color: var(--e57-green);
}

/* Link columns */
.e57-footer__col {
  display: flex;
  flex-direction: column;
}

.e57-footer__heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-bold);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-block-end: var(--space-sm);
  margin-block-start: 0;
}

.e57-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.e57-footer__links a {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-400);
  text-decoration: none;
  padding-block: 3px;
  transition: color var(--duration-fast) var(--ease-precision);
}

.e57-footer__links a:hover {
  color: var(--e57-green);
}

/* Bottom bar */
.e57-footer__bottom {
  max-width: 75rem;
  margin-inline: auto;
  margin-block-start: var(--space-lg);
  padding: var(--space-md) var(--space-md);
  border-top: var(--border-1) solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.e57-footer__bottom-address {
  text-align: center;
}

/* LinkedIn social icon */
.e57-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-precision);
}

.e57-footer__social-link:hover {
  background: rgba(255, 255, 255, 0.14);
}

.e57-footer__social-icon {
  width: 14px;
  height: 14px;
  fill: var(--gray-400);
  display: block;
}


/* ═══════════════════════════════════════════
   4. SECTION PATTERNS
   ═══════════════════════════════════════════ */

/* Hero — dark gradient, brand blue */
.e57-hero {
  background: linear-gradient(135deg, #0c1926 0%, var(--e57-blue-dark) 100%);
  color: #ffffff;
  padding-block: var(--space-3xl);
}

.e57-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--e57-green);
  margin-block-end: var(--space-sm);
}

.e57-hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: #ffffff;
  margin-block: 0 var(--space-sm);
}

.e57-hero__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.80);
  max-width: 42rem;
}

/* Light section */
.e57-section {
  padding-block: var(--space-2xl);
  background: var(--color-bg);
}

/* Alternate light section */
.e57-section--alt {
  padding-block: var(--space-2xl);
  background: var(--color-bg-alt);
}

/* Dark section (e.g. the "Name" narrative) */
.e57-section--dark {
  padding-block: var(--space-2xl);
  background: var(--e57-blue-dark);
  color: rgba(255, 255, 255, 0.85);
}

.e57-section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--e57-green);
  margin-block-end: var(--space-xs);
}

.e57-section__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--e57-blue-dark);
  margin-block: 0 var(--space-sm);
}

.e57-section--dark .e57-section__title {
  color: #ffffff;
}

.e57-section__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.e57-section--dark .e57-section__body {
  color: rgba(255, 255, 255, 0.75);
}


/* ═══════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════ */

/* Base button — resets + shared shape */
.e57-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: var(--border-2) solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition:
    background var(--duration-fast) var(--ease-precision),
    border-color var(--duration-fast) var(--ease-precision),
    color var(--duration-fast) var(--ease-precision),
    box-shadow var(--duration-fast) var(--ease-precision);
  white-space: nowrap;
}

.e57-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Blue filled */
.e57-btn--blue {
  background: var(--e57-blue);
  border-color: var(--e57-blue);
  color: #ffffff;
}

.e57-btn--blue:hover {
  background: var(--e57-blue-dark);
  border-color: var(--e57-blue-dark);
  color: #ffffff;
}

/* Green filled */
.e57-btn--green {
  background: var(--e57-green);
  border-color: var(--e57-green);
  color: #ffffff;
}

.e57-btn--green:hover {
  background: var(--e57-green-dark);
  border-color: var(--e57-green-dark);
  color: #ffffff;
}

/* Ghost — transparent bg, white border (for dark bg sections) */
.e57-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.e57-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.70);
  color: #ffffff;
}

/* Outline — transparent bg, brand blue border (for light bg sections) */
.e57-btn--outline {
  background: transparent;
  border-color: var(--e57-blue);
  color: var(--e57-blue);
}

.e57-btn--outline:hover {
  background: var(--e57-blue);
  color: #ffffff;
}

/* Button group spacing helper */
.e57-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}


/* ═══════════════════════════════════════════
   6. TYPOGRAPHY
   ═══════════════════════════════════════════ */

/* Eyebrow — small mono label above headlines */
.e57-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--e57-green);
  display: block;
  margin-block-end: var(--space-xs);
}

/* Display title — Poppins, large */
.e57-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--e57-blue-dark);
  margin-block: 0 var(--space-sm);
}

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

.e57-title--hero {
  font-size: var(--text-4xl);
}

.e57-title--inverse {
  color: #ffffff;
}

/* Body copy */
.e57-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.e57-body--large {
  font-size: var(--text-md);
}

.e57-body--inverse {
  color: rgba(255, 255, 255, 0.80);
}

/* Mono label */
.e57-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* ═══════════════════════════════════════════
   7. DUAL-IDENTITY TOGGLE BAR
   ═══════════════════════════════════════════ */

/* Sticky bar sits directly below the fixed header */
.e57-identity-bar {
  position: sticky;
  top: var(--header-height);
  z-index: var(--layer-dropdown);
  background: #ffffff;
  border-bottom: var(--border-1) solid #e8edf2;
  padding-block: var(--space-2xs);
}

.e57-identity-bar__inner {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
}

/* Toggle button */
.e57-identity-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: var(--border-2) solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-2xs) var(--space-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--duration-fast) var(--ease-precision),
    background var(--duration-fast) var(--ease-precision),
    border-color var(--duration-fast) var(--ease-precision);
}

.e57-identity-btn:hover {
  color: var(--e57-blue-dark);
  background: var(--color-surface-2);
}

/* Active — Consulting (blue identity) */
.e57-identity-btn--active-blue {
  color: var(--e57-blue);
  border-color: var(--e57-blue);
  background: rgba(23, 75, 127, 0.06);
  font-weight: var(--font-semibold);
}

/* Active — Products (green identity) */
.e57-identity-btn--active-green {
  color: var(--e57-green);
  border-color: var(--e57-green);
  background: rgba(49, 168, 91, 0.06);
  font-weight: var(--font-semibold);
}

/* Divider pip between toggle labels */
.e57-identity-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--color-border-light);
  flex-shrink: 0;
}

/* Identity panel visibility */
.e57-identity-panel {
  transition: opacity var(--duration-normal) var(--ease-precision);
}

.e57-identity-panel--hidden {
  display: none;
}

/* Ghosted peek on inactive side */
.e57-identity-panel--ghost {
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}


/* ═══════════════════════════════════════════
   8. INDUSTRIES FLIP CARDS
   ═══════════════════════════════════════════ */

.e57-industries {
  padding-block: var(--space-2xl);
  background: var(--color-bg-alt);
}

.e57-industries__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}

/* Card shell — 3D perspective container */
.e57-flip-card {
  perspective: 800px;
  height: 14rem;
}

.e57-flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-precision);
  border-radius: var(--radius-lg);
}

.e57-flip-card:hover .e57-flip-card__inner,
.e57-flip-card:focus-within .e57-flip-card__inner {
  transform: rotateY(180deg);
}

/* Front face */
.e57-flip-card__front,
.e57-flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.e57-flip-card__front {
  background: linear-gradient(160deg, var(--e57-blue) 0%, var(--e57-blue-dark) 100%);
  color: #ffffff;
}

.e57-flip-card__back {
  background: var(--e57-green-dark);
  color: #ffffff;
  transform: rotateY(180deg);
}

.e57-flip-card__industry {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: #ffffff;
  margin-block: 0 var(--space-2xs);
}

.e57-flip-card__tagline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.80);
  margin: 0;
}

/* Back face content */
.e57-flip-card__applications {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  flex: 1;
  justify-content: center;
}

.e57-flip-card__applications li {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}

.e57-flip-card__applications li::before {
  content: "•";
  color: var(--e57-amber);
  flex-shrink: 0;
}

.e57-flip-card__cta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.90;
  transition: opacity var(--duration-fast) var(--ease-precision);
}

.e57-flip-card__cta:hover {
  opacity: 1;
}


/* ═══════════════════════════════════════════
   9. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════ */

/* ── 1024px — wide tablet / small desktop ── */
@media (max-width: 1024px) {
  .e57-header__nav {
    gap: 0;
  }

  .e57-header__nav-link {
    font-size: var(--text-xs);
    padding-inline: var(--space-2xs);
  }

  .e57-industries__grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* ── 768px — tablet / mobile landscape ── */
@media (max-width: 768px) {
  /* Header: show hamburger, hide desktop nav + right cluster */
  .e57-header__nav {
    display: none;
  }

  .e57-header__cta {
    display: none;
  }

  .e57-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hero adjustments */
  .e57-hero {
    padding-block: var(--space-2xl);
  }

  .e57-hero__headline {
    font-size: var(--text-2xl);
  }

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

  /* Industries — 2 columns on tablet */
  .e57-industries__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer — single column */
  .e57-footer__container {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .e57-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
  }

  /* Toggle bar stacks vertically */
  .e57-identity-bar__inner {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ── 480px — mobile portrait ── */
@media (max-width: 480px) {
  .e57-container {
    padding-inline: var(--space-sm);
  }

  .e57-hero {
    padding-block: var(--space-xl);
  }

  .e57-hero__headline {
    font-size: var(--text-xl);
  }

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

  /* Industries — single column on small mobile */
  .e57-industries__grid {
    grid-template-columns: 1fr;
  }

  .e57-flip-card {
    height: 12rem;
  }

  /* Buttons stack */
  .e57-btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .e57-btn-group .e57-btn {
    text-align: center;
    justify-content: center;
  }
}


/* ═══════════════════════════════════════════
   10. FLOATING CHROME — Header, Widget, Canvas
   CREATURE LOCK (Oscar, 2026-08-18):
   - Frosted glass header, floating canvas on gray
   - All content within canvas margins (6rem LOCKED)
   - Widget panel: slide-in from right, 2/12 columns
   ═══════════════════════════════════════════ */

/* ── Header — floating segment within canvas margins ── */
/* The header spans the full viewport for z-index stacking, but is
   transparent. The visible frosted-glass card is .hdr__grid, which
   uses the same margin as .ft and the same padding ref as .canvas,
   so all three elements share identical left/right edges. */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--layer-sticky);
  height: 88px;                  /* 11 baselines (8px × 11) */
  background: transparent;       /* no background on wrapper — glass lives on __grid */
}

.hdr__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  height: 100%;
  padding: 0 1.25rem;
  /* Frosted glass card — contained by canvas margin, same as .ft and .canvas */
  margin: 0 var(--canvas-margin);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border-radius: 0 0 8px 8px;
}

.hdr__logo {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
}

.hdr__logo img {
  height: 56px;               /* 7 baselines — 57% larger than 36px */
  width: auto;
  display: block;
}

.hdr__nav {
  grid-column: 4 / 11;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.hdr__link {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: #555;
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: 0.25rem 0;
  position: relative;
  transition: color var(--duration-fast);
}

.hdr__link:hover {
  color: #1a1a1a;
}

.hdr__link--active {
  color: #1a1a1a;
  font-weight: var(--font-semibold);
}

.hdr__link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--e57-blue);
}

/* ── Header actions (Login + Request Quote, columns 11-12) ── */
.hdr__actions {
  grid-column: 11 / 13;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.hdr__login {
  background: transparent;
  color: #555;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.hdr__login:hover {
  background: rgba(0,0,0,0.03);
  border-color: #bbb;
  color: #1a1a1a;
}

.hdr__login--active {
  background: rgba(0,0,0,0.04);
  border-color: #bbb;
  color: #1a1a1a;
}

.hdr__quote {
  display: inline-flex;
  align-items: center;
  background: var(--e57-blue);
  color: #fff;
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.hdr__quote:hover {
  background: var(--e57-blue-dark);
  color: #fff;
}

/* ── Login panel (overlaid, 3/12 columns within margin) ── */
.login-panel {
  position: fixed;
  top: calc(88px + 10px);
  right: var(--canvas-margin);
  width: calc((100% - 2 * var(--canvas-margin)) * 3 / 12);
  min-width: 280px;
  max-width: 360px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.04);
  z-index: var(--layer-drawer);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.login-panel--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.login-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid #f0f0f0;
}

.login-panel__title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.01em;
}

.login-panel__close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  transition: all 0.12s;
}
.login-panel__close:hover {
  background: #f0f0f0;
  color: #555;
}

.login-panel__section {
  padding: 0.75rem 1.25rem;
}

.login-panel__portal {
  display: block;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.25rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.12s;
}
.login-panel__portal:hover {
  background: #f5f5f5;
}

.login-panel__portal-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.15rem;
}

.login-panel__portal-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: #999;
  line-height: 1.4;
}

.login-panel__footer {
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid #f0f0f0;
}

.login-panel__cta {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  background: var(--e57-green);
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.login-panel__cta:hover { background: var(--e57-green-dark); }

/* ── Login panel backdrop ── */
.login-panel__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--layer-drawer) - 1);
  background: transparent;
  display: none;
}
.login-panel__backdrop--visible {
  display: block;
}

/* ── Canvas (body area within margins, LOCKED 6rem) ── */
.canvas {
  margin-top: calc(88px + 10px);  /* header(88) + spacing below */
  padding: 0 var(--canvas-margin);
}

/* canvas--shifted is intentionally a no-op: panel overlays, body stays */
.canvas--shifted {}

.canvas__inner { max-width: 100%; }

.canvas__bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background: #f0f0f0;
}

/* ── Floating card sections ── */
.fl { margin-bottom: clamp(0.5rem, 1vw, 0.75rem); }

.fl__card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ── Shared buttons ── */
.fl__btn {
  display: inline-flex;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  padding: 0.65rem 1.4rem;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast);
}
.fl__btn--fill { background: var(--e57-blue); color: #fff; }
.fl__btn--fill:hover { background: var(--e57-blue-dark); }
.fl__btn--ghost { background: transparent; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.2); }
.fl__btn--ghost:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.fl__btn--light { background: #fff; color: #0a0a0a; }
.fl__btn--light:hover { background: #e0e0e0; }
.fl__btn--subtle { background: transparent; color: #555; border: 1px solid #ddd; }
.fl__btn--subtle:hover { border-color: #1a1a1a; color: #1a1a1a; }

/* ── Shared typography ── */
.fl__ey {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #a0a0a0;
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.fl__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.6rem;
  line-height: 1.25;
}

.fl__h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.fl__body {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #6b6b6b;
  max-width: 620px;
}

/* ── Dark section variant ── */
.fl__dark {
  background: rgba(26, 26, 26, 0.96);
  border-radius: var(--radius-md);
  padding: clamp(3rem, 5.5vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  color: var(--color-text-inverse);
}
.fl__dark .fl__ey  { color: rgba(255, 255, 255, 0.3); }
.fl__dark .fl__h2  { color: #fff; }
.fl__dark .fl__body { color: rgba(255, 255, 255, 0.5); }

/* ── Responsive — chrome ── */
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
  .hdr__nav { display: none; }
  .hdr__grid { grid-template-columns: 1fr auto; }
  .hdr__actions { grid-column: auto; }
  .hdr__login { padding: 0.35rem 0.6rem; font-size: 0.65rem; }
  .hdr__quote { padding: 0.35rem 0.6rem; font-size: 0.65rem; }
  .login-panel { width: 280px; min-width: unset; right: 1rem; }
}


/* ═══════════════════════════════════════════
   11. FOOTER (ft) — floating segment within canvas margins
   ═══════════════════════════════════════════ */

.ft {
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  margin: 0 var(--canvas-margin) 1.5rem;
  padding-top: 3rem;
  font-size: 0.85rem;
  color: #6b6b6b;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.ft__main {
  max-width: 100%;
  margin: 0;
  padding: 0 clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.ft__logo {
  display: block;
  height: 40px;
  width: auto;
  margin-bottom: 1rem;
  opacity: 0.8;
}

.ft__tagline {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #a0a0a0;
}

.ft__heading {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.ft__links { list-style: none; padding: 0; margin: 0; }
.ft__links li { margin-bottom: 0.4rem; }
.ft__links a {
  color: #6b6b6b;
  text-decoration: none;
  transition: color 0.15s;
}
.ft__links a:hover { color: #1a1a1a; }

.ft__links--contact li {
  line-height: 1.5;
  font-size: 0.82rem;
  color: #808080;
}
.ft__links--contact a { color: #808080; }
.ft__links--contact a:hover { color: var(--e57-blue); }

.ft__bottom {
  max-width: 100%;
  margin: 0;
  padding: 1.25rem clamp(2rem, 4vw, 3rem);
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: #a0a0a0;
}

.ft__legal { display: flex; gap: 1rem; }
.ft__legal a { color: #a0a0a0; text-decoration: none; }
.ft__legal a:hover { color: #1a1a1a; }
.ft__social { margin-left: auto; color: #a0a0a0; transition: color 0.15s; }
.ft__social:hover { color: var(--e57-blue); }

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

@media (max-width: 480px) {
  .ft__main { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════
   12. FRONTEND DESIGN — Token-Driven Interactions
   Uses tokens.css §9-16: easings, animations, glass,
   noise, gradients, shadows, scroll-reveal.
   ═══════════════════════════════════════════ */

/* ── Scroll progress bar ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: var(--scroll-progress-height);
  background: var(--gradient-energy-blue);
  z-index: calc(var(--layer-sticky) + 1);
  transition: none;
  will-change: width;
}

/* ── Scroll-reveal — fade-in-up on intersection ── */
.fl[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
}

.fl[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — tracks, grid items, info cards */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: calc(var(--reveal-stagger) * 0); opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 1); opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: calc(var(--reveal-stagger) * 2); opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 3); opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: calc(var(--reveal-stagger) * 4); opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: calc(var(--reveal-stagger) * 5); opacity: 1; transform: translateY(0); }

/* ── Card hover elevation ── */
.fl__card {
  transition:
    box-shadow var(--duration-normal) var(--ease-precision),
    transform var(--duration-normal) var(--ease-precision);
}

.fl__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ── Header — scroll-enhanced glass ── */
.hdr__grid {
  transition:
    background var(--duration-normal) var(--ease-precision),
    box-shadow var(--duration-normal) var(--ease-precision),
    backdrop-filter var(--duration-normal) var(--ease-precision);
}

.hdr.header--scrolled .hdr__grid {
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

/* ── Nav link hover — animated underline ── */
.hdr__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; right: 50%;
  height: 2px;
  background: var(--e57-blue);
  transition: left var(--duration-fast) var(--ease-out-3),
              right var(--duration-fast) var(--ease-out-3);
}

.hdr__link:hover::after,
.hdr__link--active::after {
  left: 0;
  right: 0;
}

/* ── Button micro-interactions ── */
.fl__btn {
  transition:
    all var(--duration-fast) var(--ease-spring-soft);
}

.fl__btn:active {
  transform: scale(0.96);
}

/* ── CTA glow — primary fill button ── */
.fl__btn--fill {
  position: relative;
  box-shadow: 0 2px 8px rgba(23, 75, 127, 0.15);
}

.fl__btn--fill:hover {
  box-shadow: var(--shadow-glow-blue);
  transform: translateY(-1px);
}

.fl__btn--fill:active {
  transform: scale(0.96) translateY(0);
  box-shadow: 0 1px 4px rgba(23, 75, 127, 0.1);
}

/* ── Noise texture overlay on heroes ── */
.fl__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--noise-fine);
  background-size: 256px 256px;
  mix-blend-mode: var(--noise-blend);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.6;
}

.fl__hero {
  position: relative;
  overflow: hidden;
}

/* ── Dark card glass effect (trust strip) ── */
.fl__card[style*="background:rgba(26"] {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: var(--glass-border-subtle);
}

/* ── Info card hover accent (contact page) ── */
.fl__info-card {
  transition:
    background var(--duration-fast) var(--ease-precision),
    border-left-color var(--duration-fast) var(--ease-precision);
  border-left: 3px solid transparent;
}

.fl__info-card:hover {
  border-left-color: var(--e57-blue);
}

/* ── Response strip number count-up placeholder ── */
.fl__response-val {
  transition: color var(--duration-normal) var(--ease-precision);
}

/* ── Comparison table row hover ── */
.fl__compare tbody tr {
  transition: background var(--duration-fast) var(--ease-precision);
}

.fl__compare tbody tr:hover {
  background: var(--gray-50);
}

/* ── Service subsection hover accent ── */
.fl__svc {
  transition: border-left-color var(--duration-fast) var(--ease-precision);
  border-left: 3px solid transparent;
  padding-left: calc(1.1rem - 3px);
}

.fl__svc:hover {
  border-left-color: var(--e57-blue);
}

/* ── Gopher badge pulse ── */
.fl__gopher-badge {
  animation: var(--animation-pulse);
}

/* ── Reduced motion — respect user preference ── */
@media (prefers-reduced-motion: reduce) {
  .fl[data-reveal],
  [data-reveal-stagger] > *,
  .fl__card,
  .fl__btn,
  .hdr__grid,
  .hdr__link::after,
  .fl__svc,
  .fl__info-card,
  .fl__compare tbody tr {
    transition: none !important;
    animation: none !important;
  }
  .fl[data-reveal] {
    opacity: 1;
    transform: none;
  }
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
  }
  .scroll-progress { display: none; }
}