/* ==========================================================================
   EDGEauditor — main.css
   Bootstrap 5.3 + custom layer
   Author notes: everything below is grouped by page section in the same
   order it appears in index.html, so it maps 1:1 to the PHP includes later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ea-orange:        #f26649;
  --ea-orange-dark:   #dd4f31;
  --ea-blue:          #2f91c7;
  --ea-blue-dark:     #2679a6;
  --ea-dark:          #272b2f;
  --ea-dark-2:        #31363b;
  --ea-green:         #3fae72;

  /* Neutrals */
  --ea-bg:            #f1f5fa;
  --ea-bg-alt:        #f6f8fb;
  --ea-white:         #ffffff;
  --ea-border:        #e3e8ef;
  --ea-heading:       #1f2429;
  --ea-body:          #5a6672;
  --ea-muted:         #8b96a2;

  /* Layout */
  --ea-header-h:      90px;   /* desktop fixed header height */
  --ea-header-h-sm:   68px;   /* mobile fixed header height  */
  --ea-radius:        10px;
  --ea-radius-lg:     14px;

  /* Bootstrap overrides */
  --bs-body-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-body-color: var(--ea-body);
  --bs-link-color: var(--ea-blue);
  --bs-link-hover-color: var(--ea-blue-dark);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
/* The html/body background IS the footer colour. The light page background
   lives on <main class="ea-main">, so on a short page the main area ends and
   the dark colour simply continues to the bottom of the window. */
html { scroll-behavior: smooth; background: var(--ea-dark); }

body {
  font-family: var(--bs-body-font-family);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ea-body);
  background: var(--ea-dark);
  -webkit-font-smoothing: antialiased;
}

.ea-main {
  background: var(--ea-bg);
  /* Push content clear of the fixed header */
  padding-top: var(--ea-header-h-sm);
}

h1, h2, h3, h4, h5, h6 { color: var(--ea-heading); font-weight: 700; line-height: 1.25; }

/* Anchor offset so in-page links don't hide behind the fixed header */
section[id], div[id].anchor-offset { scroll-margin-top: calc(var(--ea-header-h) + 20px); }

a { text-decoration: none; color: var(--ea-blue);font-weight: 600 }

a:hover { text-decoration: none; }

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

.ea-section { padding: 70px 0; }
.ea-section-tight { padding: 40px 0; }

/* Type helpers ------------------------------------------------------------ */
.ea-eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ea-muted); }
.ea-h1 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); font-weight: 600; color: var(--ea-orange); letter-spacing: -.01em; }
.ea-h2 { font-size: clamp(1.45rem, 2.7vw, 1.9rem); }
.ea-h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.ea-lead { font-size: 1rem; color: var(--ea-body); }
.text-orange { color: var(--ea-orange) !important; }
.text-blue   { color: var(--ea-blue) !important; }
.text-dark-ea{ color: var(--ea-heading) !important; }

/* Buttons ---------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 6px; padding: .70rem 1.45rem; font-size: 1.1rem; }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(47, 145, 199, .35); }

.btn-ea-orange { background: var(--ea-orange); border: 1px solid var(--ea-orange); color: #fff; }
.btn-ea-orange:hover,
.btn-ea-orange:focus { background: var(--ea-orange-dark); border-color: var(--ea-orange-dark); color: #fff; }

.btn-ea-blue { background: var(--ea-blue); border: 1px solid var(--ea-blue); color: #fff; }
.btn-ea-blue:hover,
.btn-ea-blue:focus { background: var(--ea-blue-dark); border-color: var(--ea-blue-dark); color: #fff; }

.btn-ea-outline { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; }
.btn-ea-outline:hover { background: rgba(255,255,255,.12); color: #fff; }

/* --------------------------------------------------------------------------
   3. Header — fixed to top, content scrolls beneath
   -------------------------------------------------------------------------- */
.ea-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;                 /* below Bootstrap offcanvas (1045) */
  height: var(--ea-header-h-sm);
  background: var(--ea-white);
  border-bottom: 1px solid var(--ea-border);
  transition: box-shadow .25s ease;
}
.ea-header.is-scrolled { box-shadow: 0 2px 14px rgba(31, 36, 41, .08); }

.ea-header > .container { height: 100%; }

.ea-logo img { height: 30px; width: auto; display: block; }

/* Desktop nav */
.ea-nav { display: none; }
.ea-nav .nav-link {
  color: var(--ea-heading);
  font-size: 1rem;
  font-weight: 500;
  padding: .5rem 1.1rem;
  position: relative;
}
.ea-nav .nav-link:hover,
.ea-nav .nav-link:focus { color: var(--ea-orange); }
.ea-nav .nav-link.active { color: var(--ea-orange); }

.ea-nav .dropdown-toggle::after { margin-left: .4rem; vertical-align: .15em; border-width: .3em .3em 0; }
.ea-nav .dropdown-menu {
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  box-shadow: 0 10px 30px rgba(31, 36, 41, .1);
  padding: .5rem;
  margin-top: .4rem;
  min-width: 230px;
}
.ea-nav .dropdown-item {
  font-size: .875rem; font-weight: 500; color: var(--ea-heading);
  border-radius: 6px; padding: .55rem .75rem;
}
.ea-nav .dropdown-item:hover,
.ea-nav .dropdown-item:focus { background: var(--ea-bg); color: var(--ea-orange); }
.ea-nav .dropdown-item i { width: 1.15rem; color: var(--ea-blue); margin-right: .4rem; }

/* Current page — override Bootstrap's blue .active fill */
.ea-nav .dropdown-item.active,
.ea-nav .dropdown-item.active:hover,
.ea-nav .dropdown-item.active:focus { background: var(--ea-bg); color: var(--ea-orange); }
.ea-nav .dropdown-item.active i { color: var(--ea-orange); }

/* Hamburger */
.ea-burger {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ea-border);
  border-radius: 8px;
  background: var(--ea-white);
  color: var(--ea-heading);
  font-size: 1.15rem;
  padding: 0;
}
.ea-burger:hover { background: var(--ea-bg); color: var(--ea-orange); }

/* Header CTA sizing on small screens */
.ea-header .btn-header { padding: .5rem .9rem; font-size: 1rem; white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Mobile slide-out menu (Bootstrap offcanvas, end = from the right)
   -------------------------------------------------------------------------- */
.ea-offcanvas { width: 320px; max-width: 88vw; border-left: 0; }
.ea-offcanvas .offcanvas-header { border-bottom: 1px solid var(--ea-border); padding: 1rem 1.25rem; }
.ea-offcanvas .offcanvas-body { padding: .5rem 0 2rem; }

.ea-mobile-nav .nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem;
  font-size: 1rem; font-weight: 600;
  color: var(--ea-heading);
  border-bottom: 1px solid var(--ea-border);
}
.ea-mobile-nav .nav-link:hover { color: var(--ea-orange); background: var(--ea-bg-alt); }
.ea-mobile-nav .nav-link[aria-expanded="true"] { color: var(--ea-orange); }
.ea-mobile-nav .nav-link[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.ea-mobile-nav .fa-chevron-down { font-size: .7rem; transition: transform .2s ease; }

.ea-mobile-sub { background: var(--ea-bg-alt); }
.ea-mobile-sub a {
  display: block;
  padding: .7rem 1.25rem .7rem 2.25rem;
  font-size: .9375rem; font-weight: 500;
  color: var(--ea-body);
  border-bottom: 1px solid var(--ea-border);
}
.ea-mobile-sub a:hover { color: var(--ea-orange); }
.ea-mobile-sub a i { width: 1.2rem; color: var(--ea-blue); margin-right: .35rem; }
.ea-mobile-sub a.active { color: var(--ea-orange); font-weight: 600; }
.ea-mobile-sub a.active i { color: var(--ea-orange); }

.ea-offcanvas-footer { padding: 1.5rem 1.25rem 0; }
.ea-offcanvas-footer .ea-phone { font-size: 1.25rem; font-weight: 700; color: var(--ea-heading); }
.ea-offcanvas-footer a.ea-email { font-size: .9375rem; color: var(--ea-blue); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.ea-hero { background: var(--ea-bg); padding: 46px 0 30px; }
.ea-hero .ea-h1 { margin-bottom: 1.25rem; }
.ea-hero p { max-width: 34rem; margin-bottom: 1.1rem; font-size: 1.1rem; line-height: 1.5}
.ea-hero .btn { margin-top: .75rem; }

.ea-hero-media {
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, #cfe6f5 0%, #eef4fa 55%, #fbd9cd 100%);
  box-shadow: 0 18px 45px rgba(31, 36, 41, .10);
}
.ea-hero-media img { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   6. Partner logo strip
   -------------------------------------------------------------------------- */

.ea-logos img {
  max-height: 120px; width: auto;
  filter: grayscale(0);
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
.ea-logos a:hover img { opacity: 1; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   7. "Ties All Of Your Risk Management Together" card grid
   -------------------------------------------------------------------------- */
.ea-ties { background: var(--ea-bg); padding-bottom: 30px; }
.ea-ties .ea-section-head { margin-bottom: 2.25rem; }

.ea-card {
  height: 100%;
  border-radius: var(--ea-radius);
  padding: 1.75rem 1.6rem 1.9rem;
  color: #fff;
  border: 0;
  transition: transform .22s ease, box-shadow .22s ease;
}
.ea-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(31, 36, 41, .14); }
.ea-card h3 { color: #fff; font-size: 1.0625rem; font-weight: 700; margin: 0 0 .6rem; }
.ea-card p  { color: rgba(255,255,255,.9); font-size: 1rem; line-height: 1.65; margin: 0; }
.ea-card .ea-card-icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 7px;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}
.ea-card .ea-badge-new {
  display: inline-block;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  padding: .1rem .4rem; margin-left: .35rem;
  border: 1px solid rgba(255,255,255,.6); border-radius: 4px;
  vertical-align: middle;
}

.ea-card-orange { background: var(--ea-orange); }
.ea-card-blue   { background: var(--ea-blue); }
.ea-card-dark   { background: var(--ea-dark); }

/* --------------------------------------------------------------------------
   8. "Customization is standard" — icon tabs
   Desktop : icon row across the top, one shared panel underneath
   Mobile  : the same markup becomes an accordion (panel under its own icon)
   Implemented with CSS grid + display:contents so there is NO duplicate markup.
   -------------------------------------------------------------------------- */
.ea-custom,
.ea-testimonials{ background: var(--ea-bg); padding: 30px 0; }

.ea-custom-panel-wrap{
  background: var(--ea-white);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius-lg);
  padding: 2.5rem 1.25rem 2.75rem;
}
.ea-custom-head { max-width: 40rem; margin: 0 auto 2rem; }
.ea-custom-head p { font-size: 1rem; margin: 0; }

.ct-tabs { display: block; }

/* -- the trigger -- */
.ct-tab {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ea-border);
  padding: .9rem .25rem;
  text-align: left;
  color: var(--ea-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}
.ct-tab:hover { color: var(--ea-orange); }
.ct-tab .ct-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.ct-tab .ct-icon img { max-height: 44px; width: auto; }
.ct-tab .ct-label { flex: 1 1 auto; }
.ct-tab .ct-chevron { flex: 0 0 auto; font-size: .7rem; color: var(--ea-muted); transition: transform .2s ease; }

.ct-item.is-active > .ct-tab { color: var(--ea-orange); }
.ct-item.is-active > .ct-tab .ct-chevron { transform: rotate(180deg); color: var(--ea-orange); }

/* -- the panel -- */
.ct-panel {
  background: var(--ea-bg-alt);
  border-radius: var(--ea-radius);
  padding: 1.5rem 1.4rem;
  margin: .85rem 0 1.35rem;
}
.ct-panel h3 { color: var(--ea-orange); font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; }
.ct-panel ul { list-style: none; margin: 0; padding: 0; }
.ct-panel li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .7rem;
  font-size: 1rem;
  line-height: 1.3;
}
.ct-panel li:last-child { margin-bottom: 0; }
.ct-panel li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ea-body);
}
.ct-panel .ct-panel-cta { margin-top: 1.25rem; }

/* Hidden panels */
.ct-item:not(.is-active) > .ct-panel { display: none; }

/* -- Desktop layout: tabs in a row, single shared panel row -- */
@media (min-width: 992px) {
  .ea-custom-panel-wrap { padding: 3rem 3rem 3.25rem; }

  .ct-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: .5rem;
  }
  .ct-item { display: contents; }         /* lets tab + panel become grid items */

  .ct-tab {
    grid-row: 1;
    flex-direction: column;
    justify-content: flex-start;
    gap: .85rem;
    text-align: center;
    padding: .5rem .35rem 1rem;
    border-bottom: 3px solid transparent;
    font-size: .9125rem;
    font-weight: 500;
    color: var(--ea-heading);
    height: 100%;
  }
  .ct-tab .ct-icon { width: 100%; height: 64px; }
  .ct-tab .ct-icon img { max-height: 64px; }
  .ct-tab .ct-chevron { display: none; }
  .ct-tab:hover { border-bottom-color: rgba(242, 102, 73, .35); }

  .ct-item.is-active > .ct-tab {
    color: var(--ea-orange);
    font-weight: 600;
    border-bottom-color: var(--ea-orange);
  }

  .ct-panel {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 2rem 0 0;
    padding: 2rem 2.25rem 2.25rem;
    min-height: 190px;
  }
  .ct-panel li { padding-left: 1.25rem; }
}

/* --------------------------------------------------------------------------
   9. Why Choose EDGEauditor
   -------------------------------------------------------------------------- */
.ea-why { background: var(--ea-bg); padding: 20px 0 120px; }
.ea-why h2 { color: var(--ea-orange); font-size: clamp(1.4rem, 2.6vw, 1.75rem); margin-bottom: 2rem; }

.ea-why-grid {
  background: var(--ea-white);
  border: 1px solid var(--ea-border);
  border-radius: var(--ea-radius);
  overflow: hidden;
}
.ea-why-item {
  padding: 2.25rem 2rem;
  text-align: center;
  border-right: 1px solid var(--ea-border);
  border-bottom: 1px solid var(--ea-border);
}
.ea-why-item i { color: var(--ea-green); font-size: 1.5rem; margin-bottom: 1rem; }
.ea-why-item p { font-size: 1rem; line-height: 1.6; margin: 0; }

/* Remove the outer edges of the grid lines */
@media (min-width: 768px) {
  .ea-why-item:nth-child(3n) { border-right: 0; }
  .ea-why-item:nth-last-child(-n+3) { border-bottom: 1; }
}
@media (max-width: 767.98px) {
  .ea-why-item { border-right: 0; }
  .ea-why-item:last-child { border-bottom: 1; }
}

/* --------------------------------------------------------------------------
   10. Testimonial slider (mirrors the current site's Bootstrap carousel)
   -------------------------------------------------------------------------- */
.ea-testimonials { background: var(--ea-bg); padding: 20px 0 80px; }

#TestimonialCarousel { padding-top: 1.5rem; }
#TestimonialCarousel .carousel-item { padding-top: 60px; text-align: center; }

.testimonial-image-container { height: 50px; width: 100%; margin: 0 0 30px}
.testimonial-image-container img {
  position: relative;
  top: -60px;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
  object-fit: contain;
  padding: 6px;
}

#TestimonialCarousel .testimonial-body { padding: 0 5% 1rem; }
#TestimonialCarousel .testimonial {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ea-body);
  margin: 0 0 1.25rem;
}
#TestimonialCarousel .testimonial-author {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ea-heading);
  margin: 0;
}

/* Dash indicators — same geometry/colours as the live site */
#TestimonialCarousel .carousel-indicators {
  position: static;
  margin: 1.75rem auto 0;
  padding: 0;
}
#TestimonialCarousel .carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  width: 30px; height: 3px;
  margin: 0 3px;
  padding: 0;
  border: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #eaeaea;
  background-clip: padding-box;
  opacity: 1;
  text-indent: -999px;
  transition: background-color .3s ease, border-color .3s ease;
}
#TestimonialCarousel .carousel-indicators .active {
  background: #3e9dd2;
  border-color: #2c89bd;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.ea-footer { background: var(--ea-dark); color: rgba(255,255,255,.8); }

.ea-footer-cta { padding: 60px 0 50px; text-align: center; }
.ea-footer-cta h2 { color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin-bottom: 1.75rem; }
.ea-footer-cta .ea-phone { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; color: #fff; margin: 1.75rem 0 .35rem; }
.ea-footer-cta .ea-email { color: #6bb7de; font-size: .9375rem; }
.ea-footer-cta .ea-email:hover { color: #8cc9e8; }

.ea-footer-social { margin-top: 1.5rem; }
.ea-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0 .2rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  color: rgba(255,255,255,.8);
  font-size: .875rem;
}
.ea-footer-social a:hover { background: rgba(255,255,255,.12); color: #fff; }

.ea-footer-bottom {
  padding: 0 0 40px;
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.6);
}
.ea-footer-bottom a { color: #6bb7de; }
.ea-footer-bottom a:hover { color: #8cc9e8; }
.ea-footer-bottom a.is-support { color: var(--ea-orange); }
.ea-footer-bottom a.is-support:hover { color: #f7856d; }
.ea-footer-bottom .sep { color: rgba(255,255,255,.35); margin: 0 .4rem; }

/* ==========================================================================
   12. KEY SOLUTIONS SUBPAGES
   Shared layout for: Digital Waivers, Ski Patrol, Terrain Parks & Trails,
   Reports & Inspections, Insights, Additional Modules.
   Only content and images change between them.
   ========================================================================== */

/* 12a. Page hero — split card: copy on the left, photo bleeding to the right
   -------------------------------------------------------------------------- */
.ea-page-hero { background: var(--ea-bg); padding: 40px 0 10px; }

.ea-page-hero-card {
  background: var(--ea-white);
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(31, 36, 41, .08);
}

.ea-page-hero-text { padding: 2.25rem 1.75rem 2.5rem; }
.ea-page-hero-text h1 {
  color: var(--ea-orange);
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  font-weight: 600;
  margin: 0 0 1rem;
}
.ea-page-hero-sub {
  color: var(--ea-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.ea-page-hero-intro { font-size: 1rem; line-height: 1.75; margin: 0; }

.ea-page-hero-media { min-height: 230px; padding: 0; }
.ea-page-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 12b. Feature rows
   -------------------------------------------------------------------------- */
.ea-feature { background: var(--ea-bg); padding: 42px 0; }

.ea-feature-text h2 {
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 700;
  margin: 0 0 .5rem;
}
.ea-feature-tagline {
  color: var(--ea-heading);
  font-size: .9375rem;
  font-weight: 400;
  margin: 0 0 1.25rem;
}
.ea-feature-text ul { list-style: none; margin: 0; padding: 0; }
.ea-feature-text li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .7rem;
  font-size: .875rem;
  line-height: 1.65;
}
.ea-feature-text li:last-child { margin-bottom: 0; }
.ea-feature-text li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ea-body);
}
.ea-feature-text .ea-feature-cta { margin-top: 1.5rem; }

/* Inline [NEW] flag for use on light backgrounds */
.ea-flag-new {
  display: inline-block;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  padding: .1rem .4rem; margin-left: .4rem;
  color: var(--ea-orange);
  border: 1px solid var(--ea-orange);
  border-radius: 4px;
  vertical-align: middle;
}

/* 12c. Screenshot card with the offset orange accent behind it
   -------------------------------------------------------------------------- */
.ea-shot { position: relative; }

/* the orange block: same size as the card, nudged up and to the left */
.ea-shot::before {
  content: "";
  position: absolute;
  top: -12px; left: -16px; right: 16px; bottom: 12px;
  background: var(--ea-orange);
  border-radius: var(--ea-radius-lg);
}

.ea-shot-card {
  position: relative;              /* sits above ::before */
  background: var(--ea-white);
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(31, 36, 41, .10);
}
.ea-shot-card img { display: block; width: 100%; }

/* Optional: crop a tall screenshot instead of letting it set the row height */
.ea-shot-card.is-cropped img { max-height: 420px; object-fit: cover; object-position: top center; }

/* 12d. Three-up band — photo | copy | photo
   -------------------------------------------------------------------------- */
.ea-band {
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(31, 36, 41, .08);
}
.ea-band-photo { min-height: 220px; }
.ea-band-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ea-band-text { background: var(--ea-white); padding: 2rem 1.75rem 2.25rem; }
.ea-band-text h2 { color: var(--ea-orange); font-size: clamp(1.05rem, 1.9vw, 1.25rem); font-weight: 600; margin: 0 0 .5rem; }

/* 12e. Subpage breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .ea-page-hero { padding: 55px 0 15px; }
  .ea-page-hero-card { min-height: 360px; }
  .ea-page-hero-text { padding: 3rem 3rem 3rem 3.25rem; display: flex; flex-direction: column; justify-content: center; }
  .ea-page-hero-media { min-height: 100%; }

  .ea-feature { padding: 48px 0; }
  .ea-band-photo { min-height: 300px; }
  .ea-band-text { padding: 2.5rem 2.25rem; display: flex; flex-direction: column; justify-content: center; }
}

@media (max-width: 991.98px) {
  /* Tighter offset so the accent doesn't crowd the gutter on small screens */
  .ea-shot::before { top: -8px; left: -10px; right: 10px; bottom: 8px; }
  .ea-shot { margin-left: 10px; }

  /* Fixed crop heights so a tall photo can't take over the stacked layout —
     the images are object-fit: cover, so any aspect ratio drops in cleanly. */
  .ea-page-hero-media { height: 260px; min-height: 0; }
  .ea-band-photo { height: 240px; min-height: 0; }
}

@media (max-width: 575.98px) {
  .ea-page-hero-text { padding: 1.75rem 1.35rem 2rem; }
  .ea-band-text { padding: 1.75rem 1.35rem 2rem; }
}

/* 12f. Card-grid solution page (Digital Waivers)
   Hero with a video on the right, a centred statement, a grid of white info
   cards around a large screenshot, a divider, then a device image + card.
   -------------------------------------------------------------------------- */

/* Hero CTA sits under the intro copy */
.ea-page-hero-text .btn { align-self: flex-start; margin-top: 1.5rem; }

/* Video in the hero: a 16:9 player "object-fit: cover"-ed into whatever box
   the hero gives it. cqw/cqh are the media box's own width/height, so the
   iframe is always at least as big as the box in both directions. */
.ea-page-hero-media.is-video {
  position: relative;
  container-type: size;
  overflow: hidden;
  background: #000;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.ea-page-hero-media.is-video .ea-video-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.ea-page-hero-media.is-video iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: min(100cqw, 177.78cqh);
  height: min(100cqh, 56.25cqw);
  transform: translate(-50%, -50%);
  border: 0;
}
@media (min-width: 992px) {
  .ea-page-hero-media.is-video { aspect-ratio: auto; min-height: 100%; }
}
/* Centred statement between the hero and the grid */
.ea-statement { background: var(--ea-bg); padding: 44px 0 34px; }
.ea-statement h2 {
  color: var(--ea-heading);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  text-align: center;
}

/* White info card */
.ea-info-card {
  background: var(--ea-white);
  border-radius: var(--ea-radius);
  box-shadow: 0 4px 18px rgba(31, 36, 41, .05);
  padding: 1.75rem 1.7rem 1.85rem;
  height: 100%;
}
.ea-info-card h3 {
  color: var(--ea-orange);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 .45rem;
}
.ea-info-card p { font-size: 1rem; line-height: 1.6; margin: 0; }
.ea-info-card p + p { margin-top: 1.1rem; }
.ea-info-card.is-dark-title h3 { color: var(--ea-heading); font-weight: 700; }

/* Stack of cards that stretches to match the screenshot beside it */
.ea-card-stack { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.ea-card-stack > .ea-info-card { flex: 1 1 auto; height: auto; }

/* Large screenshot card */
.ea-screen-card {
  background: var(--ea-white);
  border-radius: var(--ea-radius);
  box-shadow: 0 4px 18px rgba(31, 36, 41, .05);
  padding: 1rem;
  height: 100%;
}
.ea-screen-card img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Screenshot carousel inside .ea-screen-card.
   Flex column so the card fills the row height and the dashes sit at the foot. */
.ea-screen-card.is-carousel { display: flex; flex-direction: column; }
.ea-screen-card .carousel { flex: 1 1 auto; display: flex; flex-direction: column; }
.ea-screen-card .carousel-inner { flex: 1 1 auto; border-radius: 6px; }

/* Round prev/next buttons that sit over the slide edges */
.ea-carousel-btn {
  position: absolute; top: 50%; z-index: 2;
  width: 40px; height: 40px;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ea-heading);
  box-shadow: 0 2px 10px rgba(31, 36, 41, .22);
  font-size: .8125rem;
  opacity: 0;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}
.ea-carousel-btn.is-prev { left: .75rem; }
.ea-carousel-btn.is-next { right: .75rem; }
.ea-screen-card:hover .ea-carousel-btn,
.ea-carousel-btn:focus-visible { opacity: 1; }
.ea-carousel-btn:hover { background: var(--ea-orange); color: #fff; }
@media (hover: none) { .ea-carousel-btn { opacity: 1; } }   /* touch: always visible */

/* Dash indicators — same geometry and colours as the home testimonials */
.ea-carousel-dashes {
  position: static; margin: 1rem 0 .25rem; padding: 0;
  justify-content: center;
}
.ea-carousel-dashes [data-bs-target] {
  box-sizing: content-box;
  width: 30px; height: 3px;
  margin: 0 3px; padding: 0;
  border: 1px solid #ccc;
  background: #eaeaea;
  background-clip: padding-box;
  opacity: 1;
  text-indent: -999px;
  transition: background-color .3s ease, border-color .3s ease;
}
.ea-carousel-dashes .active { background: #3e9dd2; border-color: #2c89bd; }

/* Icon before a card title (Additional Modules) */
.ea-info-card h3 i { color: var(--ea-dark); margin-right: .55rem; font-size: 1rem; }

/* 12h. About page — hero, two photo-topped cards, then a copy + tall photo card
   -------------------------------------------------------------------------- */
.ea-page-hero-intro + .ea-page-hero-intro { margin-top: 1.1rem; }

.ea-about-card {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--ea-white);
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(31, 36, 41, .05);
}
.ea-about-card-media { aspect-ratio: 27 / 10; overflow: hidden; background: var(--ea-border); }
.ea-about-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ea-about-card-body { padding: 1.6rem 1.6rem 2rem; }

/* shared heading + paragraph style for the About copy blocks */
.ea-about-copy h2 {
  color: var(--ea-heading);
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 1.1rem;
}
.ea-about-copy h2:not(:first-child) { margin-top: 1.9rem; }
.ea-about-copy p { font-size: 1rem; line-height: 1.8; margin: 0 0 1.1rem; }
.ea-about-copy p:last-child { margin-bottom: 0; }
.ea-about-copy .btn { margin-top: 1.4rem; }

.ea-about-split {
  background: var(--ea-white);
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(31, 36, 41, .05);
}
.ea-about-split-text { padding: 1.75rem 1.5rem 2rem; }
.ea-about-split-media { min-height: 300px; }
.ea-about-split-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 992px) {
  .ea-about-card-body { padding: 1.9rem 1.9rem 2.4rem; }
  .ea-about-split-text { padding: 2.1rem 2.1rem 2.4rem; }
  .ea-about-split-media { min-height: 100%; }
}

/* 12g. Schedule a demo — copy left, form right, inside one white card
   -------------------------------------------------------------------------- */
.ea-demo { background: var(--ea-bg); padding: 40px 0 90px; }
.ea-demo-card {
  background: var(--ea-white);
  border-radius: var(--ea-radius-lg);
  box-shadow: 0 4px 18px rgba(31, 36, 41, .05);
  padding: 2rem 1.5rem 2.25rem;
}
.ea-demo-copy h1 {
  color: var(--ea-orange);
  font-size: clamp(1.5rem, 2.6vw, 1.85rem);
  font-weight: 600;
  margin: 0 0 .75rem;
}
.ea-demo-copy h2 {
  color: var(--ea-heading);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 1.1rem;
}
.ea-demo-copy p { font-size: .9375rem; line-height: 2; margin: 0 0 1.5rem; }
.ea-demo-copy ul { margin: -.75rem 0 1.5rem; padding-left: 1.4rem; font-size: .9375rem; line-height: 2; }
.ea-demo-copy .ea-demo-lead { margin-bottom: 0; }
.ea-demo-copy h2.is-start { margin: 1.5rem 0 .3rem; }
.ea-demo-copy > :last-child { margin-bottom: 0; }

/* Form: light-grey, borderless fields with small bold labels */
.ea-form label {
  display: block;
  color: var(--ea-heading);
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: .45rem;
}
.ea-form .form-control {
  background-color: #d9d9d9;
  border: 2px solid transparent;
  border-radius: 0;
  color: var(--ea-heading);
  font-size: .9375rem;
  padding: .85rem .9rem;
  box-shadow: none;
}
.ea-form .form-control:focus {
  background-color: #fff;
  border-color: var(--ea-blue);
  box-shadow: none;
}
.ea-form textarea.form-control { min-height: 118px; resize: vertical; }
/* validation: keep the grey fields, just flag the invalid ones */
.ea-form.was-validated .form-control:valid { border-color: transparent; background-image: none; padding-right: .9rem; }
.ea-form.was-validated .form-control:valid:focus { border-color: var(--ea-blue); }
.ea-form.was-validated .form-control:invalid { border-color: #c0392b; background-image: none; padding-right: .9rem; }
.ea-form .invalid-feedback { font-size: .75rem; margin-top: .35rem; }
.ea-form .btn { margin-top: .5rem; }

@media (min-width: 992px) {
  .ea-demo { padding: 52px 0 110px; }
  .ea-demo-card { padding: 3.25rem 2.5rem 3.5rem; }
}

.ea-grid-section { background: var(--ea-bg); padding: 0 0 20px; }
.ea-divider { border: 0; border-top: 1px solid #d8dee6; opacity: 1; margin: 2.5rem 0; }
.ea-grid-section-last { background: var(--ea-bg); padding: 0 0 80px; }
.ea-device-img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   13. BLOG — listing page and single post
   ========================================================================== */

/* 13a. Shared page head: small grey label + large orange headline
   -------------------------------------------------------------------------- */
.ea-page-head { background: var(--ea-bg); padding: 36px 0 26px; }
.ea-page-label {
  color: var(--ea-muted);
  font-size: .9375rem;
  font-weight: 400;
  margin: 0 0 .3rem;
}
.ea-page-head h1 {
  color: var(--ea-orange);
  font-size: clamp(1.3rem, 2.7vw, 1.8rem);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

/* 13b. Dark arrow button (blog cards, back link)
   -------------------------------------------------------------------------- */
.ea-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px; height: 28px;
  background: var(--ea-dark);
  color: var(--ea-orange);
  border: 0;
  border-radius: 6px;
  font-size: .8125rem;
  transition: background-color .2s ease;
}

/* 13c. Blog listing grid
   -------------------------------------------------------------------------- */
.ea-blog-grid { background: var(--ea-bg); padding: 0 0 70px; }

.ea-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ea-white);
  border-radius: var(--ea-radius);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(31, 36, 41, .06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.ea-blog-card:hover,
.ea-blog-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(31, 36, 41, .13);
}
.ea-blog-card:focus-visible { outline: 2px solid var(--ea-blue); outline-offset: 3px; }

.ea-blog-card-media { aspect-ratio: 5 / 3; overflow: hidden; background: var(--ea-border); }
.ea-blog-card-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.ea-blog-card:hover .ea-blog-card-media img { transform: scale(1.045); }

/* flex column so the arrow pins to the bottom and cards in a row match height */
.ea-blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.15rem 1.2rem 1.35rem;
}
.ea-blog-card-title {
  color: var(--ea-heading);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 1.2rem;
}
.ea-blog-card .ea-arrow-btn { margin-top: auto; align-self: flex-start; }
.ea-blog-card:hover .ea-arrow-btn { background: #000; }

/* 13d. Single post — narrower than the main content container
   -------------------------------------------------------------------------- */
.ea-post { background: var(--ea-bg); padding: 36px 0 70px; }

/* .ea-post-col is the measure for everything on the post page */
.ea-post-col { max-width: 840px; margin-left: auto; margin-right: auto; }

.ea-post-media {
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(31, 36, 41, .10);
}
.ea-post-media img { display: block; width: 100%; }

.ea-post-back {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 1.4rem 0 1.85rem;
  font-size: .9375rem;
  color: var(--ea-blue);
}
.ea-post-back:hover { color: var(--ea-blue-dark); }
.ea-post-back:hover .ea-arrow-btn { background: #000; }

.ea-post-body h1 {
  color: var(--ea-orange);
  font-size: clamp(1.3rem, 2.7vw, 1.8rem);
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 1.5rem;
}
.ea-post-body h2 {
  color: var(--ea-heading);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.4;
  margin: 2.25rem 0 1rem;
}
.ea-post-body h3 {
  color: var(--ea-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.85rem 0 .85rem;
}
.ea-post-body p { font-size: .875rem; line-height: 1.9; margin: 0 0 1.4rem; }
.ea-post-body p:last-child { margin-bottom: 0; }
.ea-post-body a { color: var(--ea-blue); text-decoration: underline; }
.ea-post-body a:hover { color: var(--ea-blue-dark); }

.ea-post-body ul,
.ea-post-body ol { font-size: .875rem; line-height: 1.9; margin: 0 0 1.4rem; padding-left: 1.25rem; }
.ea-post-body li { margin-bottom: .45rem; }

.ea-post-body img { border-radius: var(--ea-radius); margin: 1.75rem 0; }
.ea-post-body figure { margin: 1.75rem 0; }
.ea-post-body figcaption { font-size: .8125rem; color: var(--ea-muted); margin-top: .6rem; }

.ea-post-body blockquote {
  margin: 1.75rem 0;
  padding: .35rem 0 .35rem 1.35rem;
  border-left: 3px solid var(--ea-orange);
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--ea-heading);
}
.ea-post-body blockquote p:last-child { margin-bottom: 0; }

/* small muted line under a post/legal title (effective date, byline…) */
.ea-post-meta { color: var(--ea-muted); font-size: .8125rem; margin: -.75rem 0 1.5rem; }

.ea-post-body hr { margin: 2.25rem 0; border: 0; border-top: 1px solid var(--ea-border); }

/* 13e. Blog breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .ea-page-head { padding: 50px 0 30px; }
  .ea-post { padding: 50px 0 80px; }
}

/* ==========================================================================
   14. SUCCESS STORIES
   ========================================================================== */

/* 14a. Section tab bar — Bootstrap tab JS, EDGEauditor styling.
   Same orange-underline language as the home page's icon tabs.
   -------------------------------------------------------------------------- */
.ea-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: .25rem;
  border-bottom: 1px solid var(--ea-border);
  margin-bottom: 2.5rem;
}
.ea-tabs .nav-item { display: flex; }
.ea-tabs .nav-link {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: .8rem .65rem;
  color: var(--ea-heading);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}
.ea-tabs .nav-link:hover { color: var(--ea-orange); border-bottom-color: rgba(242, 102, 73, .35); }
.ea-tabs .nav-link.active {
  color: var(--ea-orange);
  font-weight: 600;
  border-bottom-color: var(--ea-orange);
  background: none;
}
.ea-tabs .nav-link:focus-visible { outline: 2px solid var(--ea-blue); outline-offset: -2px; }

/* 14b. Testimonials
   CSS columns rather than a grid row: the quotes vary a lot in length, and
   columns let each card be its natural height instead of padding every card
   in a row out to match the tallest one.
   -------------------------------------------------------------------------- */
.ea-testimonial-list { margin-bottom: 0; }

.ea-testimonial-card {
  break-inside: avoid;
  page-break-inside: avoid;          /* older Safari/Firefox */
  background: var(--ea-white);
  border-radius: var(--ea-radius);
  box-shadow: 0 4px 18px rgba(31, 36, 41, .06);
  padding: 1.75rem 1.6rem 1.6rem;
  margin-bottom: 1.5rem;
}
.ea-testimonial-name {
  color: var(--ea-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 .2rem;
}
.ea-testimonial-role {
  color: var(--ea-muted);
  font-size: .8125rem;
  font-weight: 500;
  margin: 0 0 1.35rem;
}
.ea-quote {
  border-left: 3px solid var(--ea-orange);
  padding-left: 1.1rem;
  margin: 0 0 1.15rem;
  font-size: .875rem;
  line-height: 1.85;
  color: var(--ea-body);
}
.ea-quote:last-child { margin-bottom: 0; }

/* 14c. Success Stories breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* two long labels have to share a phone width — let them share it evenly */
  .ea-tabs .nav-item { flex: 1 1 0; min-width: 0; }
  .ea-tabs .nav-link { width: 100%; padding: .75rem .35rem; font-size: .75rem; }
}

@media (min-width: 576px) {
  .ea-tabs { gap: 1rem; }
  .ea-tabs .nav-link { padding: .85rem 1.35rem; font-size: .9375rem; }
}

@media (min-width: 992px) {
  .ea-testimonial-list { column-count: 2; column-gap: 1.5rem; }
}

/* --------------------------------------------------------------------------
   15. Breakpoints — header / nav switch
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .ea-main { padding-top: var(--ea-header-h); }
  .ea-header { height: var(--ea-header-h); }
  .ea-logo img { height: 38px; }
  .ea-nav { display: flex; }
  .ea-burger { display: none; }
  .ea-header .btn-header { padding: .65rem 1.35rem; font-size: 1.1rem; }
  .ea-section { padding: 80px 0; }
  .ea-hero { padding: 70px 0 40px; }
}

@media (max-width: 575.98px) {
  .ea-header .btn-header { padding: .45rem .7rem; font-size: .75rem; }
  .ea-logo img { height: 26px; }
  .ea-custom-panel-wrap { padding: 2rem 1rem 2.25rem; }
  #TestimonialCarousel .testimonial-body { padding: 0 0 1rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ea-card, .ea-logos img, .ct-chevron { transition: none; }
}