/* =====================================================================
   About Us — page-specific styles only — theme tokens come from
   design-system.css (mobile boundary: 900px — see --eralux-mobile-breakpoint)
   ===================================================================== */

.eralux-about {
  --ink: var(--ews-ink);
  --paper: var(--ews-paper);
  --paper-2: var(--ews-paper-2);
  --muted: var(--ews-muted);
  --line: var(--ews-line-strong);
  --accent: var(--ews-accent);
  --card: var(--ews-card);
  --shadow: var(--ews-shadow);
  --gut: var(--ews-gutter);
  --max: none; /* module-specific: full-bleed layout */
  box-sizing: border-box;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.eralux-about * {
  box-sizing: border-box;
}

/* Full-bleed breakout: the page (and its heading background image) spans
   the full viewport width like the Career page, regardless of any content
   width the active theme applies to its wrappers. The padding override
   also guards against the design-system ".main" utility padding. */
.eralux-about {
  position: relative;
  left: 50%;
  width: calc(100vw - var(--ews-scrollbar, 0px));
  max-width: calc(100vw - var(--ews-scrollbar, 0px));
  margin-left: calc(-50vw + var(--ews-scrollbar, 0px) / 2);
  margin-right: calc(-50vw + var(--ews-scrollbar, 0px) / 2);
  padding: 0 !important;
}

.eralux-about a {
  color: inherit;
  text-decoration: none;
}

.eralux-about img {
  display: block;
  max-width: 100%;
}

.eralux-about-heading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: auto;
  max-width: var(--max);
}

/* Split heading: text/buttons left, image right (not stretched). */
.eralux-about-heading-grid.has-side-image {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.eralux-about-heading-media {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.eralux-about-heading-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
}

.eralux-about-heading-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eralux-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* Second heading button: page-color (paper) background with ink text, so
   it stays readable over the full-opacity heading background image. */
.eralux-about-actions .eralux-button-ghost {
  background: var(--ews-paper);
  color: var(--ews-ink);
}

.eralux-about-actions .eralux-button-ghost:hover,
.eralux-about-actions .eralux-button-ghost:focus-visible {
  background: var(--ews-paper-2);
  color: var(--ews-ink);
}

.eralux-about-section {
  margin: auto;
  max-width: var(--max);
  padding: clamp(78px, 9vw, 138px) var(--gut);
}

.eralux-about-story-grid {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.eralux-about-story-statement {
  border-right: 1px solid var(--line);
  padding: clamp(45px, 7vw, 96px) clamp(0px, 4vw, 70px) clamp(45px, 7vw, 96px) 0;
}

.eralux-about-story-statement #eralux-about-story-title {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  margin: 0 !important;
  max-width: 12ch;
  padding: 0 !important;
  quotes: none !important;
}

.eralux-about-story-statement #eralux-about-story-title:before,
.eralux-about-story-statement #eralux-about-story-title:after {
  content: none !important;
}

.eralux-about-story-copy {
  align-content: center;
  display: grid;
  gap: 24px;
  padding: clamp(45px, 7vw, 96px) 0 clamp(45px, 7vw, 96px) clamp(30px, 6vw, 92px);
}

.eralux-about-facts {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 50px;
}

.eralux-about-fact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: 34px;
}

.eralux-about-fact + .eralux-about-fact {
  border-left: 1px solid var(--line);
}

.eralux-about-fact strong {
  color: var(--ink) !important;
}

.eralux-about-fact span {
  color: var(--muted) !important;
  max-width: 24ch;
}

.eralux-about-why {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.eralux-about-why-grid {
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.eralux-about-why-card {
  background: rgba(var(--ews-card-rgb), 0.72);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 30px;
  transition: 0.3s ease;
}

.eralux-about-why-card:hover {
  background: var(--card);
  box-shadow: var(--shadow);
  position: relative;
  transform: translateY(-5px);
  z-index: 2;
}

.eralux-about-card-number {
  color: var(--accent);
  margin-bottom: 34px;
}

.eralux-about-card-rule {
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
}

.eralux-about-card-rule i {
  display: none !important;
}

/* Advantage cards: number / heading / description / rule line up across
   every card, so the descriptions all start below the tallest heading
   instead of each one hugging its own. The card lends its four rows to
   the grid (subgrid), which is what makes the rows shared -- the flex
   column above only ever aligned the cards' outer edges.
   `1fr` on the description row keeps the rule pinned to the bottom, the
   job `margin-top: auto` did in the flex layout. */
@supports (grid-template-rows: subgrid) {
  .eralux-about-why-grid {
    grid-auto-rows: auto auto 1fr auto;
  }

  .eralux-about-why-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }

  /* The rule stretches into its shared row instead of hugging the
       bottom, so the hairlines line up across the row too -- even when
       one subtitle wraps to two lines and another does not. */
  .eralux-about-card-rule {
    margin-top: 0;
    align-self: stretch;
  }
}

.eralux-about-pillars-layout {
  align-items: start;
  display: grid;
  gap: clamp(40px, 7vw, 110px);
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
}

.eralux-about-pillars-introduction {
  position: sticky;
  top: 120px;
}

.eralux-about-pillar-list {
  border-top: 1px solid var(--line);
}

.eralux-about-pillar {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 24px;
  grid-template-columns: 72px 1fr auto;
  padding: 28px 0;
}

.eralux-about-pillar-icon {
  align-items: center;
  border: 1px solid var(--line);
  display: grid;
  height: 58px;
  justify-items: center;
  transition: var(--ews-transition);
  width: 58px;
}

.eralux-about-pillar:hover .eralux-about-pillar-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ews-contrast-ink);
}

.eralux-about-pillar svg {
  fill: none;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.5;
  width: 28px;
}

.eralux-about-pillar > span {
  color: var(--muted) !important;
}

body.eralux-about-page #main,
body.eralux-about-page #main .site-content,
body.eralux-about-page #main .fusion-row,
body.eralux-about-page #main .post-content {
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}

body.eralux-about-page #main {
  background: var(--ews-paper) !important;
}

body.eralux-about-page .fusion-footer .fusion-row,
body.eralux-about-page footer .fusion-row {
  box-sizing: border-box !important;
  max-width: none !important;
  padding-left: var(--ews-gutter) !important;
  padding-right: var(--ews-gutter) !important;
  width: 100% !important;
}

@media (max-width: 1100px) {
  .eralux-about-heading-grid,
  .eralux-about-heading-grid.has-side-image {
    grid-template-columns: 1fr;
  }

  .eralux-about-heading-media {
    justify-content: flex-start;
    order: -1;
  }

  .eralux-about-heading-copy {
    min-height: 560px;
  }

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

  .eralux-about-why-card:last-child {
    grid-column: span 2;
  }

  .eralux-about-pillars-layout {
    grid-template-columns: 1fr;
  }

  .eralux-about-pillars-introduction {
    position: static;
  }
}

/* =====================================================================
   Mobile — single boundary: 900px (gutter narrows via master :root)
   ===================================================================== */

@media (max-width: 900px) {
  .eralux-about-actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 28px;
  }

  .eralux-about-actions .eralux-button {
    width: 100%;
  }

  .eralux-about-section {
    padding: 64px var(--gut);
  }

  .eralux-about-story-grid {
    grid-template-columns: 1fr;
  }

  .eralux-about-story-statement {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    padding: 40px 0;
  }

  .eralux-about-story-statement #eralux-about-story-title {
    max-width: 13ch;
  }

  .eralux-about-story-copy {
    gap: 20px;
    padding: 40px 0;
  }

  .eralux-about-facts {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .eralux-about-fact {
    min-height: 145px;
    padding: 26px;
  }

  .eralux-about-fact + .eralux-about-fact {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .eralux-about-why-grid {
    grid-template-columns: 1fr;
  }

  .eralux-about-why-card,
  .eralux-about-why-card:last-child {
    grid-column: auto;
    min-height: 245px;
    padding: 26px;
  }

  .eralux-about-card-number {
    margin-bottom: 26px;
  }

  .eralux-about-card-rule {
    padding-top: 20px;
  }

  .eralux-about-pillars-layout {
    gap: 42px;
  }

  .eralux-about-pillar {
    gap: 16px;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 22px 0;
  }

  .eralux-about-pillar-icon {
    height: 48px;
    width: 48px;
  }

  .eralux-about-pillar > span {
    grid-column: 2;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eralux-about-why-card,
  .eralux-about-pillar-icon {
    transition: none;
  }
}