/* ============================================================================
   home.css: styles for index.html ONLY, loaded after default.css.
   default.css holds only what every page shares, so everything for the
   homepage lives here, in two parts:

   PART 1  The homepage sections, in page order of the original stylesheet
           (section numbers are their old ones): hero slider + curtain, section
           headings, products / solutions cards, stats band, partners grid,
           client-logo marquee, industries, homepage media queries, story,
           FAQ, CTA band, mobile density.
   PART 2  The newer layer: text banner (first slide), story band, inline
           arrow icons, slider controls.

   Keep PART 2 after PART 1: some of its rules adjust rules in PART 1.
   ============================================================================ */


/* ############################################################################
   PART 1: homepage sections
   ############################################################################ */

/* ============ 2. HERO SLIDER ============ */
/* .slider_mainContainer + .slider-container fold in the v1 hero-curtain
   values (fixed backdrop, 80vh). The three curtain heights must stay equal. */
.slider_mainContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80vh;            /* curtain height #1 */
  z-index: 0;
}

.slider-container {
  position: relative;
  width: 100%;
  height: 80vh;            /* curtain height #2 — must match #1 */
  overflow: hidden;
  touch-action: pan-y;     /* up/down scrolls the page; left/right swipes change the slide */
}

.slider-wrapper {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: move;
}

.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  cursor: move;
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.slide-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  color: #fff;
  text-align: center;
  padding: 20px;
  border: solid 1px rgba(255, 255, 255, 0.568);
  background: rgba(0, 0, 0, 0.5);
  cursor: text;
}

.slide-content h3,
.slide-content h2,
.slide-content p,
.slide-content a {
  opacity: 0;
  transform: translateY(40px);
}

.slide.active .slide-content h3 {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 0.2s;
}

.slide.active .slide-content h2 {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 0.5s;
}

.slide.active .slide-content p {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 0.8s;
}

.slide.active .slide-content a {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 1.1s;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-content h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.slide-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.slide-content a {
  display: inline-block;
  background: #00000057;
  color: #fff;
  padding: 7.5px 15px;
  border: solid 1.5px #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}

.slide-content a:hover {
  background: #fff;
  color: #000;
  text-decoration: underline;
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  font-size: 16px;
  padding: 5px 7.5px;
  cursor: pointer;
  z-index: 3;
  border-radius: 50%;
  display: none;
}

.slider-container:hover .slider-nav {
  display: block;
}

#slide-prev {
  left: 20px;
}

#slide-next {
  right: 20px;
}

/* Page deck that slides up over the fixed banner (v1 curtain).
   SECTION SPACING lives here, in one place: every section below the banner is
   the same distance from the next (80px desktop, 64px tablet, 48px phone),
   and the sections themselves carry no top or bottom margins. */
.website_elements_container {
  --section-gap: 80px;
  --title-gap: 32px;                  /* section title -> its content */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding: var(--section-gap) 0;
  background: #ffffff;
  margin-top: 80vh;        /* curtain height #3 — must match #1 */
}
@media (max-width: 1024px) { .website_elements_container { --section-gap: 64px; } }
@media (max-width: 720px)  { .website_elements_container { --section-gap: 48px; --title-gap: 24px; } }

/* ============ 5. HEADING TITLE ============ */
.comcon_heading_title_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--title-gap);   /* the one title -> content gap */
}

.comcon_heading_title_div > h2 {
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: -0.01em;
}

/* Optional supporting line under a heading (used only where a <p> is present). */
.comcon_heading_title_div > p {
  margin-top: 0.6rem;
  color: #5b5b5b;
  font-size: 1rem;
  max-width: 600px;
}


/* ============ 6. PRODUCTS / SOLUTIONS  (v1 image-fill cards) ============ */
/* Container wrapper (base) + the v1 image-fill card set (folded in).
   The v1 cards replace the old bordered / navy-fill version entirely. */
.what_we_do_section_container {
  width: 100%;
  background-color: #fff;
}

.what_we_do_section_div {
  width: max-content;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* card: image fills it, label floats on top, no heavy border */
.what_we_do_section_content {
  position: relative;
  width: 20rem;
  height: 11rem;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

.what_we_do_section_imgDiv {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.what_we_do_section_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

.what_we_do_section_content:hover .what_we_do_section_img {
  transform: scale(1.07);
}

/* the whole card is the link; the title rides on a soft dark gradient at the bottom */
.what_we_do_section_content_title,
.what_we_do_section_content:hover .what_we_do_section_content_title {
  position: absolute;
  inset: 0;                      /* covers the whole card, so the photo is clickable too */
  z-index: 2;
  display: flex;
  align-items: flex-end;         /* title sits at the bottom of the card */
  padding: 0 16px 14px;
  background: linear-gradient(to top, rgba(8,20,45,0.92) 0, rgba(8,20,45,0.5) 36px, rgba(8,20,45,0) 80px);
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.what_we_do_section_content_title:hover {
  text-decoration: none;
}

/* keyboard users: a clear ring around the whole card */
.what_we_do_section_content_title:focus-visible {
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #16469c;
}

.what_we_do_section_heading {
  margin: 0;
  font-size: 1.15rem;
  color: #ffffff;
}


/* ============ 8. STATS BAND  (v1 navy) ============ */
/* base supplies the grid/width/spacing; v1 supplies the navy fill + text. */
.stats-section {
  width: 73%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  color: #fff;
  text-align: center;
  background: #16469c;
  border-radius: 12px;
  overflow: hidden;
}

.stat-box,
.stat-box:nth-child(odd) {
  background: transparent;
  padding: 20px;
}

.stat-box:nth-child(1) {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.stat-box:nth-child(4) {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.stat-box:not(:last-child) {
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);
}

.stat-box:hover {
  background: rgba(255, 255, 255, 0.07);
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

.stat-label {
  margin-top: 10px;
  font-size: 16px;
  color: #cdd9ef;
  text-align: center;
}


/* ============ 9. PARTNERS  (v1 borderless grid) + hover panel ============ */
.partners__container {
  width: 75%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* the logo strip takes the column's width instead of choosing its own: centred,
   it sized itself to 386px and stuck out past small phone screens, letting the
   page pan sideways (which showed the fixed banner at the screen edge) */
.partners__container .comcon_heading_title { align-self: stretch; min-width: 0; }

/* even 6 / 4 / 3 / 2 grid (v1, replaces old flex-wrap) */
.partners__container .partners__imgGroup {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 1024px; margin-left: auto; margin-right: auto; 
  align-items: stretch;
}

/* DESKTOP: 6-wide static grid = 4 rows for 24 logos (unchanged, no scroll).
   TABLET + MOBILE share ONE behaviour: horizontal swipe rows, 3 rows deep,
   overflowing sideways so users swipe left/right instead of scrolling past
   all 24 logos. Only the tile size changes between tablet and phone — the
   layout state is identical. */
@media (max-width: 1024px) {
  .partners__container .partners__imgGroup {
    display: grid;
    grid-auto-flow: column;                 /* fill down a column, then move right */
    grid-template-rows: repeat(3, auto);     /* 3 rows on tablet AND mobile */
    grid-template-columns: none;
    grid-auto-columns: 28%;                  /* tablet tile size (peek of next) */
    gap: 16px;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;       /* momentum scroll on iOS */
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
  }
  .partners__container .partners__imgDiv {
    scroll-snap-align: start;
  }
}

/* phones: same 3-row scroll state, just larger tiles so logos stay legible */
@media (max-width: 600px) {
  .partners__container .partners__imgGroup {
    grid-auto-columns: 42%;
    gap: 14px;
  }
}

.partners_row {
  --partners-fade: #fff;           /* the white behind the strip, so the fades blend in */
    position: relative; width: 100%; max-width: 1024px; min-width: 0; margin-left: auto; margin-right: auto;
}
.partners_row::before, .partners_row::after {
  content: ""; position: absolute; top: 0; bottom: 0.75rem; width: 44px;
  pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 1;
}
.partners_row::before { left: 0; background: linear-gradient(90deg, var(--partners-fade), transparent); }
.partners_row::after { right: 0; background: linear-gradient(270deg, var(--partners-fade), transparent); }
.partners_row.can-prev::before, .partners_row.can-next::after { opacity: 1; }
.partners_arrow {
  display: none; position: absolute; top: calc(50% - 0.375rem); transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid #d6e0f0; background: #fff; color: #16469c; cursor: pointer;
  box-shadow: 0 4px 12px rgba(10, 40, 90, 0.12);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.partners_arrow--prev { left: 4px; }
.partners_arrow--next { right: 4px; }
.partners_row.can-prev .partners_arrow--prev,
.partners_row.can-next .partners_arrow--next { display: grid; }
.partners_arrow:hover { border-color: #16469c; }
.partners_arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22, 70, 156, 0.3); }
.partners_arrow svg { display: block; }
@media (prefers-reduced-motion: reduce) {
  .partners_row::before, .partners_row::after, .partners_arrow { transition: none; }
}

/* borderless tiles with a soft lift (v1, replaces old 7px blue border) */
.partners__container .partners__imgDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;              /* hover panel is absolute to this */
  overflow: hidden;                /* clip the hover panel to the rounded card */
  border: none;
  background: #ffffff;
  padding: 22px 18px;
  border-radius: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.partners__container .partners__imgDiv:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(10, 40, 90, 0.12);
}

.partners__container .partners__img {
  width: 100%;
  max-width: 136px;
  height: auto;
}

/* hover panel (base — deliberately kept; shows on hover) */
.partners__container .partners__imgDiv:hover .partners_logo_details {
  transform: translateY(0);
}

.partners_logo_details {
  position: absolute;
  /* pin to the card's own edges (not offset by its padding) and let top:50%
     define the half — this is exactly the bottom 50% of the visible card,
     horizontally flush, regardless of the card's 22px/18px padding. */
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;                           /* edges define width, not 100%-of-padding-box */
  height: auto;                          /* top/bottom define height = clean 50% */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.1rem;
  /* very transparent frosted glass — logo reads clearly through it */
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(3px) saturate(1.15);
  backdrop-filter: blur(3px) saturate(1.15);
  color: #16469c;
  margin: 0;
  padding: 0.4rem;
  line-height: 1.2;
  font-size: 0.9rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
  transform: translateY(100%);           /* hidden below, slides up on hover */
  transition: transform 0.28s ease;
}

.partners_logo_details a {
  display: block;
  width: 100%;
  text-align: center;                    /* stop the name tilting left */
  color: #16469c;
  text-decoration: none;
}

.partners_logo_details a:hover {
  color: #16469c;
  text-decoration: underline;
}

.partners_logo_details p {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: #5b5b5b;
}


/* ============ 10. CLIENT-LOGO MARQUEE ============ */
.client_logo_group_container {
  width: 75%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.client_logo_div_container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.client_logo_track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
}

.client_logo_imgDiv {
  flex: 0 0 auto;
  padding: 0 0.75rem;
  cursor: pointer;
}

.client_logo_img {
  width: 100px;
  height: auto;
  aspect-ratio: 5/4;
  object-fit: contain;
  mix-blend-mode: color-burn;
  transition: filter 0.3s ease-in-out;
}

.client_logo_img:hover {
  transform: scale(1.1);
}

.animationdiv1 .client_logo_track {
  animation: scroll-left 40s linear infinite;
}

.animationdiv2 .client_logo_track {
  animation: scroll-right 40s linear infinite;
}

.client_logo_track:hover {
  animation-play-state: paused;
}

/* marquee row 1 (.animationdiv1) */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* marquee row 2 (.animationdiv2) */
@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}


/* ============ 11. INDUSTRIES WE SERVE  (v2 — text left / image right, auto-advancing) ============ */
/* A deliberate "attract" section: bigger image, more presence, while the rest of
   the page stays restrained. Selector left (8 items set the height), image right
   matched to that height. Auto-advances; pauses on hover; reduced-motion safe. */
.industries_v2 {
  --ind-row: 60px;                 /* one selector row; 8 rows drive the image height */
  width: 75%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr; /* text : image */
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 38px rgba(0, 40, 90, 0.14);
  align-items: stretch;
}

/* LEFT — selector */
.industries_v2_nav {
  background: #16469c;
  display: flex;
  flex-direction: column;
}

.ind_item {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 4px solid transparent;
  color: rgba(255, 255, 255, 0.74);
  text-align: left;
  padding: 0 1.3rem;
  height: var(--ind-row);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ind_item:last-child {
  border-bottom: 0;
}

.ind_item .ind_num {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ind_item .ind_name {
  display: block;
}

.ind_item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.ind_item.on {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-left-color: #008dd5;
}

.ind_item:focus-visible {
  outline: 2px solid #008dd5;
  outline-offset: -2px;
}

/* RIGHT — image stage, height matches the 8 rows on desktop */
.industries_v2_stage {
  position: relative;
  background: #0f3272;
  min-height: calc(var(--ind-row) * 8);
  overflow: hidden;
}

.industries_v2_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.industries_v2_stage::after {
  content: "";
  position: absolute;
  inset: 0;
  /* darkest under the caption at the bottom, clear at the top, so the text reads on any photo */
  background: linear-gradient(to top, rgba(9, 20, 44, 0.9) 0%, rgba(9, 20, 44, 0.7) 40%, rgba(9, 20, 44, 0) 80%);
}

.industries_v2_cap {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 2.2rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);   /* safety net on bright spots */
}

.industries_v2_cap h3 {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.12;
  margin: 0.5rem 0 0.7rem;
  color: #fff;
}

.industries_v2_cap p {
  font-size: 1rem;
  line-height: 1.55;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.93);
}

/* auto-advance progress bar (top edge of the image) */
.industries_v2_progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 3;
}

.industries_v2_progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: #008dd5;
}

/* mobile dot indicators — hidden on desktop, shown in the mobile media query */
.industries_v2_dots {
  display: none;
  position: absolute;
  z-index: 3;
  right: 1rem;
  top: 1rem;
  gap: 7px;
}
.industries_v2_dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(9, 20, 44, 0.3), 0 1px 3px rgba(0, 0, 0, 0.3);   /* visible on bright photos too */
}
.industries_v2_dots button.on {
  background: #fff;
}

/* TABLET */
@media (max-width: 1000px) {
  .industries_v2 {
    grid-template-columns: 1fr 1.2fr;
    --ind-row: 56px;
  }
  .industries_v2_cap h3 { font-size: 1.4rem; }
}

/* MOBILE — just the auto-advancing image card (no selector strip); tap image / dots to advance */
@media (max-width: 720px) {
  .industries_v2 {
    width: 88%;
    grid-template-columns: 1fr;
  }
  .industries_v2_stage {
    min-height: 340px;
    cursor: pointer;                 /* the whole card is tappable to advance */
  }
  .industries_v2_nav {
    display: none;                    /* strip removed on mobile */
  }
  .industries_v2_dots {
    display: flex;                    /* dot indicators shown only on mobile */
  }
}

/* ============ 12. RESPONSIVE / MEDIA QUERIES ============ */

/* stats: 4-up on mid widths */
@media only screen and (min-width: 820px) and (max-width: 1100px) {
  .stats-section {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .stat-number {
    font-size: 2rem;
  }
}

/* partners logo sizing */
@media only screen and (max-width: 868px) {
  .partners__img {
    width: 100%;
    max-width: 120px;
    height: auto;
    mix-blend-mode: multiply;
  }
}

/* products grid reflow */
@media only screen and (max-width: 1220px) {
  .what_we_do_section_div {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* v1 hero-curtain: keep the white deck full-width so the banner
   doesn't leak in the side gaps on large screens */
@media (min-width: 1366px) {
  .website_elements_container {
    max-width: none;
    margin: 80vh 0 0 0;    /* must match the curtain heights above */
  }
}

@media (max-width: 900px) {
  .slider-nav {
    display: none;
  }
}

/* small tablets / phones */
@media only screen and (max-width: 720px) {
  /* keep all three curtain heights in sync — was only slider-container,
     leaving the fixed backdrop + content margin at 80vh = big empty gap */
  .slider_mainContainer { height: 50vh; }
  .slider-container {
    height: 50vh;
  }
  .website_elements_container { margin-top: 50vh; }
  .slide-content {
    max-width: 70%;
    padding: 0.75rem;
  }
  .slide-content h2 {
    font-size: 1.5rem;
  }
  .slide-content p {
    font-size: 0.9rem;
  }
  .slider-nav {
    padding: 7px 10px;
  }
  .what_we_do_section_div {
    grid-template-columns: 1fr;
  }
  .partners__img {
    width: 100%;
    max-width: 100px;
    height: auto;
    mix-blend-mode: multiply;
  }
  .client_logo_img {
    width: 80px;
  }
}

@media only screen and (max-width: 420px) {
  .client_logo_img {
    width: 60px;
  }
}

/* ============ 13. STORY TEASER  (v1 — condensed from v3 Heritage) ============ */
/* A short trust primer high on the page. NOT the full story — a hook that
   leads to aboutus.html. Restraint: navy accent, whitespace, one CTA link. */
.story-teaser {
  width: 75%;
  max-width: 1024px;
  margin: 0 auto;
}

/* "Our Story" label — gold, with a short leading rule (heritage accent) */
.story-teaser__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b08d57;
  margin-bottom: var(--title-gap);
}
.story-teaser__eyebrow::before {
  content: "";
  width: 42px;
  height: 1.5px;
  background: #b08d57;
}

.story-teaser__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 4.5rem;
  align-items: start;
}

/* 1984 — serif hero moment #1 */
.story-teaser__aside .story-teaser__est {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(4.5rem, 8vw, 7rem);
  font-weight: 600;
  color: #16469c;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.story-teaser__aside .story-teaser__est-sub {
  margin-top: 1.6rem;
  font-size: 1rem;
  color: #6b6b6b;
  max-width: 26ch;
  line-height: 1.55;
}
.story-teaser__gold { color: #b08d57; font-weight: 600; }

/* heading — serif hero moment #2 */
.story-teaser__body h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: #16469c;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

.story-teaser__body p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2a2a2a;
  margin-bottom: 1.1rem;
  max-width: 56ch;
}
.story-teaser__body p:last-of-type { margin-bottom: 1.5rem; }
.story-teaser__emph { color: #16469c; font-weight: 600; }

.story-teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: #16469c;
  border-bottom: 2px solid #b08d57;
  padding-bottom: 3px;
  transition: gap 0.25s ease;
}

.story-teaser__link:hover {
  gap: 0.9rem;
  text-decoration: none;
}


@media (max-width: 900px) {
  .story-teaser {
    width: 85%;
    margin: 0 auto;
  }
  .story-teaser__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* ============ 14. FAQ  (v1 — re-themed from v2 Industrial, navy) ============ */
/* Answer-first Q&A. Sits right before the footer: last doubt cleared before
   the contact form that lives in the footer. Answer-first = GEO/AI friendly. */
.faq-section {
  width: 75%;
  max-width: 1024px;
  margin: 0 auto;
}

.faq-list {
  display: grid;
  gap: 1px;
  background: #e4e4e4;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  overflow: hidden;
}

.faq-item {
  background: #fff;
  transition: background 0.25s ease;
}

.faq-item:hover {
  background: #f4f7fb;
}

.faq-item.is-open {
  background: #f4f7fb;
}

/* Question row is now a full-width button (compact, whole row clickable) */
.faq-item h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 2rem;
  background: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: #16469c;
  text-align: left;
  cursor: pointer;
}

.faq-q-text {
  font-size: 1.15rem;
  font-weight: 600;
}

/* Chevron: a "﹀" (down) that flips 180° to point up (︿) when the item is open */
.faq-chevron {
  flex-shrink: 0;
  color: #16469c;
  font-size: 1.35rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.faq-chevron svg {          
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

/* Answer collapses by default; smooth open via max-height */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-item.is-open .faq-answer {
  max-height: 500px;
}

.faq-item p {
  font-size: 1rem;
  line-height: 1.65;
  color: #5b5b5b;
  margin: 0;
  padding: 0 2rem 1.4rem;
}

@media (max-width: 900px) {
  .faq-section {
    width: 85%;
    margin: 0 auto;
  }
  .faq-trigger {
    padding: 1rem 1.35rem;
  }
  .faq-q-text {
    font-size: 1.05rem;
  }
  .faq-item p {
    padding: 0 1.35rem 1.2rem;
  }
}

/* ============================================================
   CTA BAND — pre-content-break contact prompt
   Full-width navy interruption placed on the Industries→Clients
   seam. Deliberately NOT a .comcon_heading_title section — it's a
   navy pause between the "proof" run and the "reassurance" run.
   Content sits in the same 75% column as every other section.
   Energy comes from type + one accent hairline (no image, no icons).
   New component: the site had no button styles before this.
   ============================================================ */
.cta_band {
  width: 100%;
  /* subtle depth: navy with a slightly deeper edge — more alive than flat fill */
  background: linear-gradient(100deg, #16469c 0%, #123a83 100%);
  padding: 3.25rem 0;
}
.cta_band_inner {
  width: 75%;                          /* aligns with all other sections */
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.cta_band_copy {
  flex: 1 1 340px;
}
.cta_band_copy h2 {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
  line-height: 1.15;
}
.cta_band_copy p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin: 0;
}
.cta_band_actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* Buttons (new — navy-band context). Text-only, no icons. */
.cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.cta_btn:hover { text-decoration: none; }
.cta_btn:active { transform: translateY(1px); }
/* Primary: white fill, navy text — clearly the main action */
.cta_btn_primary { background: #fff; color: #16469c; border: 1.5px solid #fff; }
.cta_btn_primary:hover { background: #eaf0fb; border-color: #eaf0fb; }
/* Secondary: outline on navy — present but quieter (soft-lean to contact).
   Hover fills solid white with navy text so it stays clearly readable
   (the old 10%-white fill was nearly invisible). */
.cta_btn_secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); }
.cta_btn_secondary:hover { background: #fff; color: #16469c; border-color: #fff; }

/* Highlight for "build on" in the CTA headline — brand cyan with a soft
   underline glow so it pops against the navy without looking like a link. */
.cta_highlight {
  color: #46b4ec;
  box-shadow: inset 0 -0.12em 0 rgba(70, 180, 236, 0.22);
  padding: 0 0.02em;
}

/* MOBILE — compact + energetic: tighter padding, smaller headline,
   buttons stacked but auto-width (not stretched full-width) so the band
   feels active rather than a tall column. */
@media (max-width: 768px) {
  .cta_band { padding: 2rem 0; }
  .cta_band_inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1.15rem;
    width: 85%;
  }
  /* stop the copy from grabbing vertical space (was pushing buttons far down) */
  .cta_band_copy { flex: 0 0 auto; }
  .cta_band_copy h2 { font-size: 1.45rem; }
  .cta_band_copy p { font-size: 0.98rem; }
  .cta_band_actions { gap: 0.6rem; }
  .cta_btn { padding: 0.7rem 1.25rem; font-size: 0.95rem; }
}

/* phones: section headings scale down (spacing is set once, on .website_elements_container) */
@media (max-width: 768px) {
  .comcon_heading_title_div > h2 { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .comcon_heading_title_div > h2 { font-size: 1.4rem; }
}


/* ############################################################################
   PART 2: newer homepage layer
   ############################################################################ */

/* ---------------------------------------------------------------- TEXT BANNER
   A slide like the others: same slider, same timing, same arrows. It has its
   own navy background instead of a photo, and its text sits below the 80px
   navbar so nothing is ever hidden under it. */
.slide--intro {
  background:
    radial-gradient(70% 90% at 78% 10%, rgba(64, 120, 214, 0.32), transparent 62%),
    linear-gradient(180deg, #0f2550 0%, #0a1a3a 100%);
  color: #fff;
}
.slide--intro::after { display: none; }          /* no dark photo overlay on this slide */

/* faint square grid on the navy, fading out towards the edges */
.slide--intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(120% 95% at 35% 40%, #000 35%, transparent 100%);
          mask-image: radial-gradient(120% 95% at 35% 40%, #000 35%, transparent 100%);
}

.intro_inner {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 82%;
  max-width: 1120px;
  padding-top: 80px;                             /* room for the fixed navbar */
  cursor: auto;
}
.slide--intro.active .intro_inner { animation: intro_in 0.6s ease both; }

.intro_kicker {
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fbbea;
}

.intro_title {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fff;
}

.intro_sub {
  margin: 1.3rem 0 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.intro_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.intro_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 2px;                            /* square buttons */
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.intro_btn:hover { text-decoration: none; }      /* default.css underlines every a:hover */
.intro_btn--primary { background: #fff; color: #16469c; }
.intro_btn--primary:hover { background: #eef2fb; transform: translateY(-1px); }
.intro_btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.intro_btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.intro_btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(159, 187, 234, 0.6); }

.intro_btn_ic {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.intro_btn--primary:hover .intro_btn_ic { transform: translateX(3px); }

@keyframes intro_in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* phones: the slider is 50vh tall here (unchanged), so the slide keeps
   only the label, the heading and the buttons */
@media only screen and (max-width: 720px) {
  .slide--intro::before { background-size: 44px 44px; }
  .intro_inner { width: 88%; padding-top: 72px; }
  .intro_kicker { font-size: 0.7rem; letter-spacing: 0.12em; margin-bottom: 0.7rem; }
  .intro_title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .intro_sub { margin-top: 0.7rem; font-size: 0.95rem; }
  .intro_actions { margin-top: 1.1rem; gap: 0.6rem; }
  .intro_btn { padding: 0.75rem 1.1rem; font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slide--intro.active .intro_inner { animation: none; }
  .intro_btn, .intro_btn_ic { transition: none; }
  .intro_btn--primary:hover { transform: none; }
}


/* ---------------------------------------------------------------- SPLIT SLIDES
   Slides 2 to 4 reuse the first slide's type, heading size and buttons
   (.slide--intro). Each has its own background colour, text on the left and a
   visual on the right: the on-air drawing on slide 2, a product photo slot on
   slide 3, the Seetronic cables on slide 4. Phones show text and buttons only. */
.slide--split .intro_inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);    /* 50% text, 50% image */
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.slide--split .intro_copy:has(+ .intro_visual:empty) { grid-column: 1 / -1; }   /* no image yet: the text keeps the full width */
.slide--split .intro_title,
.slide--split .intro_sub { text-wrap: balance; }       /* no single word left alone on a line */
.intro_visual:empty { display: none; }        /* an empty image slot takes no space */
.intro_visual picture { display: block; }
.intro_visual svg { display: block; width: 100%; height: 100%; overflow: visible; }
.intro_visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
  object-fit: contain;
  object-position: right center;              /* hugs the right edge of its half */
  user-select: none;                          /* the banner is dragged to change slides */
  pointer-events: none;
  -webkit-user-drag: none;
}

/* same darkness as slide 1, a different colour each, no grid */
.slide--broadcast {
  background:
    radial-gradient(60% 80% at 22% 85%, rgba(120, 128, 240, 0.26), transparent 62%),
    linear-gradient(180deg, #1c1f5a 0%, #0e1036 100%);
}
.slide--measure {
  background:
    radial-gradient(55% 75% at 78% 55%, rgba(70, 180, 236, 0.20), transparent 65%),
    linear-gradient(180deg, #0a3346 0%, #06202d 100%);
}
.slide--graphite {
  background:
    radial-gradient(55% 70% at 72% 55%, rgba(159, 187, 234, 0.12), transparent 65%),
    linear-gradient(180deg, #232a37 0%, #141922 100%);
}
.slide--broadcast::before,
.slide--measure::before,
.slide--graphite::before { display: none; }

/* slide 2, on air: the sign flickers on and the meters jump to their levels,
   once, when the slide arrives */
.oa_box   { fill: #e5484d; }
.oa_glow  { fill: rgba(229, 72, 77, 0.28); }
.oa_text  { fill: #fff; font-size: 30px; font-weight: 800; letter-spacing: 0.14em; }
.mt_panel { fill: rgba(255, 255, 255, 0.04); stroke: rgba(159, 187, 234, 0.25); }
.mt_seg   { fill: rgba(159, 187, 234, 0.14); }
.mt_seg.is-peak { fill: rgba(229, 72, 77, 0.22); }
.mt_seg.is-on { fill: #9fbbea; }
.mt_seg.is-peak.is-on { fill: #e5484d; }
.mt_label { fill: rgba(159, 187, 234, 0.6); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.slide.active .oa_box,
.slide.active .oa_glow,
.slide.active .oa_text { animation: oa_on 0.7s linear 0.35s both; }
@keyframes oa_on { 0% { opacity: 0.15; } 25% { opacity: 1; } 38% { opacity: 0.35; } 52% { opacity: 1; } 100% { opacity: 1; } }
.mt_meters > g:nth-child(1) { --m: 0; }
.mt_meters > g:nth-child(2) { --m: 1; }
.mt_meters > g:nth-child(3) { --m: 2; }
.mt_meters > g:nth-child(4) { --m: 3; }
.mt_meters > g:nth-child(5) { --m: 4; }
.mt_meters > g:nth-child(6) { --m: 5; }
.mt_meters > g:nth-child(7) { --m: 6; }
.mt_meters > g:nth-child(8) { --m: 7; }
.mt_meters > g > rect:nth-child(1) { --s: 0; }
.mt_meters > g > rect:nth-child(2) { --s: 1; }
.mt_meters > g > rect:nth-child(3) { --s: 2; }
.mt_meters > g > rect:nth-child(4) { --s: 3; }
.mt_meters > g > rect:nth-child(5) { --s: 4; }
.mt_meters > g > rect:nth-child(6) { --s: 5; }
.mt_meters > g > rect:nth-child(7) { --s: 6; }
.mt_meters > g > rect:nth-child(8) { --s: 7; }
.mt_meters > g > rect:nth-child(9) { --s: 8; }
.mt_meters > g > rect:nth-child(10) { --s: 9; }
.mt_meters > g > rect:nth-child(11) { --s: 10; }
.mt_meters > g > rect:nth-child(12) { --s: 11; }
.slide.active .mt_seg.is-on { animation: mt_on 0.16s ease both; animation-delay: calc(0.5s + var(--m) * 55ms + var(--s) * 32ms); }
@keyframes mt_on { from { opacity: 0.15; } to { opacity: 1; } }

/* tablets: the image sits directly under the text, the two centred as one
   group, the same on every slide. Short screens drop the image (next rule). */
@media (max-width: 1000px) {
  .slide--split .intro_inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 1.75rem;
    padding: 96px 0 2rem;                     /* clear the 80px navbar */
  }
  .intro_visual { flex: 0 1 auto; min-height: 0; width: min(100%, 560px); }
  .intro_visual img,
  .intro_visual svg { width: 100%; height: auto; max-height: 30vh; object-position: left center; }
}

/* phones and short screens: text and buttons only. The photos are not even
   downloaded here: each <picture> in index.html asks for its file only on
   screens where it shows (its media attribute is the opposite of this rule). */
@media only screen and (max-width: 720px), (max-width: 1000px) and (max-height: 700px) {
  .intro_visual { display: none; }
}
@media only screen and (max-width: 720px) {
  .slide--split .intro_inner { gap: 0; padding: 88px 0 1rem; }
}
/* phones held upright: the banner is half the screen but never under 370px,
   so every slide shows all its text. The same value in all three curtain places. */
@media only screen and (max-width: 720px) and (min-height: 501px) {
  .slider_mainContainer { height: max(50vh, 370px); }
  .slider-container { height: max(50vh, 370px); }
  .website_elements_container { margin-top: max(50vh, 370px); }
}
@media (max-width: 1000px) and (max-height: 500px) {           /* phones held sideways: every banner the same */
  .slide--split .intro_inner { padding: 86px 0 0.75rem; }
  .slide--intro .intro_title { font-size: 2rem; }
  .slide--intro .intro_sub { display: none; }
  .slide--intro .intro_actions { margin-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slide.active .oa_box,
  .slide.active .oa_glow,
  .slide.active .oa_text,
  .slide.active .mt_seg.is-on { animation: none; }
}


/* ---------------------------------------------------------------- STORY BAND
   Full-width tinted band, with the same space inside it as between sections,
   so it reads as its own chapter instead of touching its neighbours. */
.story_band {
  padding: var(--section-gap) 0;
  background: #f6f4ef;
}


/* ---------------------------------------------------------------- ARROW ICONS
   Inline SVG, the same Font Awesome shape, sized like the old icon font. */
.ic_arrow {
  display: inline-block;
  width: 0.875em;
  height: 1em;
  vertical-align: -0.125em;
  overflow: visible;
  fill: currentColor;
}
.story-teaser__link .ic_arrow { color: #b08d57; transition: transform 0.25s ease; }
.story-teaser__link:hover .ic_arrow { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .story-teaser__link .ic_arrow { transition: none; }
}


/* ---------------------------------------------------------------- SLIDER CONTROLS
   Thin chevrons at the left and right edges (no circle or box), centred
   in the visible part of the banner (below the 80px navbar). Same buttons and
   script as before, only restyled. Hidden on tablets and phones, where the
   slider keeps moving on its own. */
.slider-container .slider-nav,
.slider-container:hover .slider-nav {
  display: grid;
  place-items: center;
  top: calc(50% + 40px);
  bottom: auto;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));   /* stays visible over light photos */
  transition: color 0.2s ease, transform 0.2s ease;
}
.slider-container .slider-nav:hover { color: #fff; }
#slide-prev:hover { transform: translate(-3px, -50%); }
#slide-next:hover { transform: translate(3px, -50%); }
.slider-container .slider-nav:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }
.slider-nav svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#slide-prev { left: 24px; }
#slide-next { right: 24px; left: auto; }

/* photo slides: centre the text box in the visible area below the 80px navbar,
   the same centre the banner text and the side arrows use */
.slide:not(.slide--intro) {
  box-sizing: border-box;
  padding-top: 80px;
}

/* keep the photo slides' text box clear of the side buttons */
@media (min-width: 901px) {
  .slide-content { max-width: min(800px, calc(100% - 192px)); }
}

@media only screen and (max-width: 900px) {
  .slider-container .slider-nav,
  .slider-container:hover .slider-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slider-container .slider-nav { transition: none; }
}