/* =====================================================
   e-SUITE PAGE – specific styles
   Typography tokens follow styles.css exactly:
     section-heading  → 54px / 600 / 64px
     section-subtitle → 22px / 300 / 28px
     body p / li      → 18px / 400 / 1.55
     card h3          → 21px / 700 / 1.3
     label            → 16px / 600 / uppercase
===================================================== */

.bg-wave-bottom {
  top: 2318px;
}

/* =====================================================
   HERO IMAGE CAROUSEL — image-only crossfade
   ---------------------------------------------------
   3 .au-hero-img slides stack in the same grid cell and
   crossfade. The wrapper's height is defined by whichever
   slide is currently rendered (they share the same
   .au-hero-img sizing rules, so they all match). The JS
   in script.js just toggles the .es-hero-slide--active
   class every ~5s — pure CSS handles the fade.
   ===================================================== */

.au-hero-img {
  border: 3px solid var(--teal);
}
.es-hero-img-carousel {
  position: relative;
  display: grid;
  grid-template-areas: 'stack';
  width: 100%;
}

.es-hero-img-carousel .es-hero-slide {
  grid-area: stack;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
  will-change: opacity;
}

.es-hero-img-carousel .es-hero-slide--active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .es-hero-img-carousel .es-hero-slide {
    transition: none;
  }
}

/* ── Clickable navigation dots for the hero image carousel ── */
.es-hero-dots {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
}
.es-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.35s, width 0.35s;
}
.es-hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
.es-hero-dot.active { background: var(--white); width: 32px; }

/* ── Hero eyebrow ── */
.es-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

/* ── Hero headline — italic variant of section-heading ── */
.es-hero-headline {
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 20px;
}

/* Hero intro — readable measure (replaces inline width) */
.es-hero-intro {
  max-width: 34rem;
  width: 100%;
}

/* =====================================================
   ONE PLATFORM, 3 LAYERS
===================================================== */
.es-layers-section {
  padding-bottom: 80px;
}

.es-row-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* "the delivery / tracking / environment" labels
   → italic section-heading style */
.es-layer-label {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.2vw, 36px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 16px;
  margin-top: 40px;
  text-align: center;
}

.es-layer-title {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  color: var(--white);
  padding-bottom: 20px;
}

/* Card container */
.es-layer-card {
  border: 3px solid var(--teal);
  border-radius: 16px;
  padding: 28px 32px;
  width: 500px;
}
.es-layer-card--full {
  width: 100%;
}

/* Two-column row (e-Toolkit + e-Radio) */
.es-layers-row {
  display: flex;
  justify-content: space-evenly;
}
.es-layer-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.es-layer-col .es-layer-card {
  flex: 1;
}

/* Pill tag (e-Portal / e-Toolkit / e-Radio) */
.es-layer-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  border-radius: 20px;
  padding: 4px 16px;
  margin-bottom: 12px;
  width: fit-content;
}

/* Layer card subtitle */
.es-layer-subtitle {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  margin: 0 0 14px;
}
.au-bullet-list li {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  padding-left: 26px;
  position: relative;
}

/* Layer card list items */
.es-layer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.es-layer-list li {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  padding-left: 20px;
  position: relative;
}
.es-layer-list li::before {
  content: '•';
  color: var(--teal);
  position: absolute;
  left: 0;
  font-size: 18px;
  line-height: 1.4;
}

/* =====================================================
   "EXPLORE EACH LAYER" — title above image card
===================================================== */
.es-explore-grid {
  align-items: stretch;
}

/* Wrapper holds the title + the card together.
   stretch-to-tallest: wrapper fills the grid cell height,
   and the card inside grows to fill the remaining space. */
.es-explore-wrap {
  height: 100%;
}

/* Card: image + bottom label bar */
.es-explore-card {
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding-bottom: 18px; /* space for inset white label */
}
.es-explore-card .au-diff-card-img {
  aspect-ratio: 16 / 9;
  flex: 1;
}
.au-diff-card-img:hover {
  box-shadow: 0 14px 36px rgba(0, 200, 200, 0.18);
}

.es-explore-label:hover {
  box-shadow: 0 14px 36px rgba(0, 200, 200, 0.18);
}

.es-explore-label {
  background: #ffffff;
  color: rgba(0,0,0,0.62);
  text-align: center;
  width: 50%;
  padding: 18px 18px;
  margin: -40px auto 0; /* inset like screenshot, slightly overlaps image */
  border-radius: 16px;
  border: 3px solid var(--teal);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

/* =====================================================
   CHECKLIST (es-check-list)
   Mirrors au-bullet-list exactly
===================================================== */
.es-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.es-check-list li {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  padding-left: 26px;
  position: relative;
}
.es-check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--teal);
  font-weight: 700;
  font-size: 15px;
}

/* =====================================================
   e-PORTAL  "From planning to delivery" section
===================================================== */

/* Teal-bordered description box */
.ep-desc-box {
  border: 3px solid var(--teal);
  border-radius: 14px;
  padding: 28px 36px;
  margin: 36px auto 48px;
  max-width: 820px;
}
.ep-desc-box p {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--white);
  margin: 0;
}

/* 4-column image card row */
.ep-four-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ep-four-grid .au-diff-card-img {
  aspect-ratio: 4 / 3;
}

@media (max-width: 768px) {
  .ep-four-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ep-desc-box {
    padding: 20px 20px;
  }
  .ep-desc-box p {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .ep-four-grid {
    grid-template-columns: 1fr;
  }
}

/* ── e-Suite product cards (used inside es-cards-wrapper) ── */
.es-cards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 52px;
}
.es-card-center {
  width: min(520px, 100%);
}
.es-cards-bottom-row {
  display: flex;
  gap: 24px;
  width: min(1040px, 100%);
  justify-content: center;
}
.es-cards-bottom-row .au-diff-card {
  flex: 1;
  min-width: 0;
}

/* Product tag / feature list / footer inside au-diff-card on esuite pages */
.es-product-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 12px;
  padding: 3px 12px;
  width: fit-content;
  margin-bottom: 4px;
}
.es-product-lead {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  margin: 0 0 8px;
}
.es-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.es-feature-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 10px;
  align-items: start;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}
/* Force any inline children (e.g. <strong>, <em>, <a>) to share the
   1fr text column with their sibling text nodes. Without this, grid
   auto-placement treats each child element as a separate grid item
   and shoves the rest of the content into the 28px icon column —
   which then collapses text to a single character per line. */
.es-feature-list li > * {
  grid-column: 2;
  grid-row: 1;
}

/* White circle + azure chevron (fa-solid fa-chevron-right) */
.es-feature-list li::before,
.es-feature-list li::after {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  margin-top: 3px;
  line-height: 1;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.es-feature-list li::before {
  content: "\f111";
  color: var(--white);
  font-size: 22px;
}

.es-feature-list li::after {
  content: "\f00c";
  color: var(--azure);
  font-size: 12px;
  margin-top: 9px;
  z-index: 1;
}
.es-product-footer {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  color: var(--white);
  margin: 8px 0 0;
}
.es-tag-inline {
  font-size: 0.75em;
  font-weight: 400;
  opacity: 0.75;
  vertical-align: middle;
}

/* =====================================================
   e-TOOLKIT  "What is inside" 2×2 grid
===================================================== */
.etk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 52px;
  align-items: stretch;
}

/* “One platform, 3 layers” — three-up on desktop; own breakpoint curve */
.etk-grid.etk-grid--layers {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
}

.etk-item {
  display: flex;
  flex-direction: column;
}

/* New card layout (matches screenshot) */
.etk-card {
  flex: 1;
  min-width: 0;
  border-radius: 16px;
  border: 2px solid rgba(0, 200, 200, 0.55);
  background: rgba(255,255,255,0.06);
  padding: 22px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow:hidden;
}
.etk-grid--layers.pp .etk-card{
    overflow:visible;
}

.etk-card ul, .etk-card p, .etk-title {
  padding: 0 20px;
}

/* One platform, 3 layers — icon centered on top border */
.etk-grid--layers .etk-item {
  padding-top: 40px;
}

.etk-grid--layers .etk-card {
  position: relative;
  padding-top: 52px;
}

.etk-grid--layers .etk-card-badge {
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.etk-grid--layers .etk-card-head {
  text-align: center;
}

.etk-grid--layers .etk-layer-title {
  font-size: 30px;
}

.etk-grid--layers .etk-product-title {
  margin: 20px 0px;
}

.etk-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:#FFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  color: var(--teal);
}

.etk-icon img {
  height: auto;
  border-radius: 50%;
}

.etk-icon i { font-size: 22px; }

.etk-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
  text-align: center;
}

.etk-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
}

/* Make bullets smaller inside these cards */
.etk-card .es-feature-list li {
  font-size: 18px;
  word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

@media (max-width: 768px) {
  .etk-grid:not(.etk-grid--layers) {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 480px) {
  .etk-grid:not(.etk-grid--layers) {
    grid-template-columns: 1fr;
  }
  .etk-grid:not(.etk-grid--layers) .etk-item {
    padding-top: 0;
  }
  .etk-grid:not(.etk-grid--layers) .etk-card {
    padding: 18px 16px;
    padding-top: 18px;
  }

  .es-layer-card { padding: 16px 14px; }
  .es-hero-headline {
    font-size: clamp(24px, 6.5vw, 32px);
  }
  .about-main .about-hero-section .au-actions .btn {
    /*width: 100%;*/
    justify-content: center;
  }
  .es-feature-list li {
    font-size: 16px;
    grid-template-columns: 24px 1fr;
    column-gap: 8px;
  }
  .es-feature-list li::before {
    font-size: 18px;
  }
  .es-feature-list li::after {
    font-size: 11px;
    margin-top: 6px;
  }
}
@media (max-width: 1180px) {
  .etk-grid.etk-grid--layers {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .etk-grid.etk-grid--layers {
    grid-template-columns: 1fr;
  }
  .etk-grid--layers .etk-item {
    padding-top: 32px;
  }
  .etk-grid--layers .etk-card {
    padding-top: 46px;
  }
  .etk-grid--layers .etk-layer-title {
    font-size: clamp(22px, 5vw, 28px);
  }
  .etk-grid--layers .etk-product-title {
    font-size: clamp(18px, 4.2vw, 22px);
  }
}


@media (max-width: 1024px) {
  /*.about-hero-section .au-page-title {*/
  /*  margin-bottom: clamp(36px, 6vw, 72px);*/
  /*}*/
  .etk-card .es-feature-list li{
      font-size:16px;
  }
  .es-hero-intro {
    max-width: 100%;
  }
  /* Long “Why this matters” heading — balanced wraps on tablets */
  .about-main .audience-section .section-heading {
    text-wrap: balance;
  }
  .es-product-footer{
      font-size:16px;
  }
  .es-explore-card .au-diff-card-img{
          max-width: 600px;
    margin: 0 auto;

  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .es-layers-row {
    flex-direction: column;
    gap: 0;
  }
  .es-layer-label { margin-top: 28px; }
  .es-layer-card  { padding: 20px 18px; }
  .es-layer-subtitle { font-size: 18px; }
  .es-layer-list li  { font-size: 16px; }
  .es-check-list li  { font-size: 18px; }

  .es-cards-bottom-row { flex-direction: column; }
  .es-card-center { width: 100%; }

  .es-explore-label {
    width: min(100%, 240px);
    font-size: clamp(17px, 4.2vw, 22px);
    padding: 14px 16px;
    margin-top: -32px;
  }
}