/* ============================================================
   Sabre Marketplace landing page
   ============================================================ */

/* ============ FONTS — APK Galeria ============ */

/* weight: 400 — Regular */
@font-face {
  font-family: "APK Galeria";
  src: url("fonts/APK-Galeria-Regular.woff2") format("woff2"),
       url("fonts/APK-Galeria-Regular.otf")   format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* weight: 400 italic — Regular Italic (used by .info-note) */
@font-face {
  font-family: "APK Galeria";
  src: url("fonts/APK-Galeria-Regular-Italic.woff2") format("woff2"),
       url("fonts/APK-Galeria-Regular-Italic.otf")   format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* weight: 500 — Medium */
@font-face {
  font-family: "APK Galeria";
  src: url("fonts/APK-Galeria-Medium.woff2") format("woff2"),
       url("fonts/APK-Galeria-Medium.otf")   format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* weight: 600 — Semi-Bold */
@font-face {
  font-family: "APK Galeria";
  src: url("fonts/APK-Galeria-Semi-Bold.woff2") format("woff2"),
       url("fonts/APK-Galeria-Semi-Bold.otf")   format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #F3EFE4;   /* theme background */
  --cream-2: #F3EFE4;
  --black: #000000;
  --ink: #000000;
  --gray-card: #B3B3B3;
  --yellow: #EBC73A;
  --red: #E2553C;
  --footer-red: #E2553C;
  --text-muted: #000000;
  --max: 1480px; /* 1440px visible content + 20px container padding each side (border-box) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: clip; max-width: 100%; }

body {
  font-family: "APK Galeria", sans-serif;
  font-weight: 400; /* Explicitly 400 — prevents fallback to Thin (100) if Regular file is missing */
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  padding: 0 26px;
  border-radius: 0;
  cursor: pointer;
  border: none;
  transition: opacity .2s;
  white-space: nowrap;
}
.btn:hover { opacity: .85; }
.btn-dark {
  background: var(--black);
  color: var(--Color-6, #FFF);
  leading-trim: both;
  text-edge: cap;

  /* SB 7 */
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 600;
  line-height: 124%; /* 19.84px */
}
.btn-light { background: #fff; color: var(--black); font-weight: 600; }
.btn-gray { background: var(--black); color: #fff; font-weight: 600; }

/* ============ HEADER ============ */
.site-header {
  display: flex;
  width: 100%;
  height: 78px;
  justify-content: center;
  align-items: center;
  background: #FFF;
  border-bottom: 1px solid #B3B3B3;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  height: 56px;
  padding: 0 20px;
  box-sizing: border-box;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-home { display: flex; align-items: center; }
.brand-logo {
  display: block;
  width: 145px;
  height: 52px;
  aspect-ratio: 145 / 52;
  object-fit: cover;
}
.brand-tag {
  font-size: 7px;
  letter-spacing: 1.5px;
  font-weight: 400;
  align-self: flex-end;
  margin-bottom: 4px;
  margin-left: -6px;
}
.brand-divider {
  width: 1px;
  height: 50px;
  background: rgba(0,0,0,.35);
  margin: 0 6px;
}
.brand-loc {
  display: flex;
  width: 197px;
  height: 29px;
  flex-direction: column;
  justify-content: center;
  color: #000;

  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
}
.main-nav a {
  color: var(--Black, #000);

  /* T7 */
  font-family: "APK Galeria";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 19.84px */
}
.main-nav a:hover { opacity: .6; }
.caret {
  font-size: 18px;
  font-weight: 400;
  display: inline-block;
  transition: transform .2s ease;
}

/* ---- Products dropdown ---- */
.nav-item { position: relative; display: flex; align-items: center; }
.dropdown-toggle { cursor: pointer; }
.nav-item.open .caret { transform: rotate(45deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  display: none;
  flex-direction: column;
  padding: 10px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 100;
}
.nav-item.open .dropdown-menu { display: flex; }
.dropdown-menu a {
  padding: 9px 20px;
  white-space: nowrap;
}

/* ---- Products mega / accordion dropdown ---- */
.dropdown-mega {
  width: 360px;
  min-width: 360px;
  padding: 8px 0;
  overflow: hidden;
}
.dropdown-cat {
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.dropdown-cat:last-child { border-bottom: 0; }

.dropdown-cat-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  color: #000000;
  text-align: left;
  transition: background .15s ease;
}
.dropdown-cat-toggle:hover { background: rgba(0,0,0,.03); }
.dropdown-cat.open > .dropdown-cat-toggle { background: rgba(0,0,0,.035); }

/* chevron: points right when closed, rotates down when open */
.cat-chevron {
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.dropdown-cat.open > .dropdown-cat-toggle .cat-chevron {
  transform: rotate(45deg);
}

.dropdown-sub {
  display: none;
  flex-direction: column;
  padding: 4px 0 12px;
}
.dropdown-cat.open > .dropdown-sub { display: flex; }
.dropdown-sub a {
  padding: 11px 24px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}
.dropdown-sub a:hover { color: #000000; opacity: 1; background: rgba(0,0,0,.03); }
.search {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.search-form {
  width: 0;
  overflow: hidden;
  transition: width .3s ease;
}
.search.open .search-form { width: 220px; }
.search-input {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 0;
  padding: 0 16px;
  font-family: "APK Galeria";
  font-size: 14px;
  color: var(--black);
  outline: none;
  background: #fff;
}
.search-input:focus { border-color: rgba(0,0,0,.4); }
.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--black);
  flex-shrink: 0;
}

/* ============ PAGE CONTENT ============ */
.page-content { margin-top: 0; }

/* ============ SECTION DIVIDER ============ */
.section-divider {
  display: block;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  border-top: 1px solid #B3B3B3;
  margin: 0;
}

/* ============ HERO ============ */
.hero { background: var(--cream); padding: 190px 0 0; }
/* Hero pages that show a breadcrumb start 28px from the header (matches Contact) */
.hero--crumb { padding-top: 28px !important; }
.eyebrow {
  overflow: hidden;
  color: var(--Black, #000);
  text-overflow: ellipsis;

  /* T6 Caps */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
  letter-spacing: 0.06px;
  text-transform: uppercase;

  margin-bottom: 18px;
}
.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 109px;
}
.hero-title {
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;
  font-family: "APK Galeria";
  font-size: clamp(44px, 5.6vw, 81px);
  font-style: normal;
  font-weight: 400;
  line-height: 114%; /* 92.34px */
  flex-shrink: 1;
  min-width: 0;
}
.hero-aside {
  max-width: 347px;
  padding-top: 6px;
}
.hero-aside p {
  color: var(--Black, #000);

  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */

  margin-bottom: 16px;
}
.hero-image {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 502px;
  border-radius: 0;
  background: url("images/train.jpg") 50% / cover no-repeat;
}
/* 180px yellow band below the hero image */
.hero-band {
  height: 180px;
  background: var(--yellow); /* #EBC73A */
}
.hero-band-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  gap: 24px;
}
.hero-band-text {
  color: var(--black);
  font-style: normal;
  font-weight: 400;
  font-size: 31px;
  line-height: 1.24;
  margin: 0;
}
.hero-band-btn {
  height: 56px;
  padding: 0 32px;
  white-space: nowrap;
}
.hero-band-btn.btn-dark {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
}


/* ============ MARKETPLACE ============ */
.marketplace { background: var(--cream); padding: 121px 0 70px; }
/* Constrain the marketplace content (logo + lead + splits) to 1180px */
.marketplace .container { max-width: 1180px; }
.mosaic-logo { margin-bottom: 75px; }
.marketplace .section-title {
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;

  /* T1 */
  font-family: "APK Galeria";
  font-size: 61px;
  font-style: normal;
  font-weight: 400;
  line-height: 116%; /* 70.76px */

  margin-bottom: 75px;
}
.mosaic-img {
  display: block;
  width: 221px;
  height: 101px;
  aspect-ratio: 221 / 101;
}

.section-title {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.8px;
  margin-bottom: 18px;
}
.section-lead {
  max-width: 594px;
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;

  /* T5 */
  font-family: "APK Galeria";
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 30px */

  margin-bottom: 80px;
}

.section-lead--sboss {
  max-width: 800px;
  font-size: 56px;

}

/* ============================================================
   SBOSS — word-by-word scroll reveal (scroll-linked, not observer)
   The paragraph starts dimmed (--wr-dim) and each word brightens
   to full opacity as you scroll down. Progress is driven by JS
   updating --reveal-progress on the .word-reveal container
   (0 = no scroll yet, 1 = fully revealed).
   ============================================================ */
.word-reveal {
  /* neutral defaults: fully visible (no JS / reduced motion) */
  --reveal-progress: 1;
  --wr-dim: 0.25; /* base opacity while dimmed */
}

/* Dimmed is only applied while the animation is actively running.
   If the browser can't split the words or drive the reveal, the
   text stays fully visible instead of being stuck at --wr-dim.
   Progress maps onto words evenly: each word brightens from
   --wr-dim toward 1 once progress passes (index / total). */
.word-reveal.is-animating .wr-word {
  --wr-t: min(1, max(0, calc((var(--reveal-progress) - var(--i) / var(--total)) / (1 / var(--total)))));
  opacity: calc(var(--wr-dim) + (1 - var(--wr-dim)) * var(--wr-t));
  transition: opacity .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .word-reveal .wr-word { opacity: 1 !important; }
}

/* ============================================================
   SBOSS — mid-office / back-office accordions (replaces video)
   ============================================================ */
.sboss-acc-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #fff;
  padding: 60px 20px 134px;
}
.sboss-acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  width: 100%;
}
.sboss-acc-col-title {
  margin: 0 0 28px;
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
/* push the accordion list down a bit below the column titles */
.sboss-acc-col > .support-accordion:first-of-type {
  margin-top: 32px;
}
/* Statement below the white accordion band */
.sboss-acc-statement {
  max-width: 900px;
  margin: 80px auto 0;
  text-align: center;
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

@media (max-width: 1024px) {
  .sboss-acc-grid { grid-template-columns: 1fr; gap: 40px; }
  .sboss-acc-col-title { font-size: 26px; }

  /* How-it-works dark band: stack the two columns below 1024px.
     Image (right column) first, paragraph (left column) second.
     `!important` guards against later same-specificity rules in the file. */
  .how-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  .how-media {
    order: 1 !important;
    width: 100% !important;
    height: clamp(240px, 62vw, 420px) !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
  }
  .how-card {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
  .how-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* How-it-works carousel: show 2 cards below 1024px */
  .how-carousel-row { --per-view: 2; }
}

/* ============ ONE PLATFORM SPLIT ============ */
.platform-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* 5/7 split: text (5fr) + image (7fr) */
  align-items: center;
  gap: 60px;
  margin-top: 160px;
  margin-bottom: 80px;
  max-width: 1180px;         /* cap the split (image + text) width */
  margin-left: auto;
  margin-right: auto;
}
/* Reversed rows (image on the left): image stays the wider 7fr column */
.platform-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.platform-title {
  color: var(--Black, #000);

  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */

  margin: 0 0 24px;
}
.platform-lead {
  max-width: 520px;
  color: var(--Black, #000);

  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */

  margin: 0;
}
.platform-img img {
  display: block;
  width: 100%;
  height: auto;
  /* Lock story-split images to a consistent 4:3 frame so every image
     renders the same shape regardless of the uploaded file's
     original aspect ratio. Anything outside the frame is cropped. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ============ MODULAR BY DESIGN ============ */
.modular-split {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* title left, text right */
  align-items: start;
  gap: 60px;
  margin-top: 35px;
  margin-bottom: 80px;
  max-width: none;                 /* full width, no 1180px cap */
  margin-left: auto;
  margin-right: auto;
}
.modular-title {
  color: var(--Black, #000);

  /* T2 */
  font-family: "APK Galeria";
  font-size: 49px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 58.8px */

  margin: 0;
}
.modular-text {
  color: var(--Black, #000);

  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */

  margin: 0;
}
/* Architecture diagram — hand-authored inline SVG (replaces vector.png) */
.why-arch {
  position: relative;
  margin: 134px auto 80px;
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  background: #fff;
  border-radius: 3px;
  padding: 0;
  overflow: hidden;
}
.why-arch video { display: block; object-fit: cover; }
.vector-caption {
  margin: 127px auto 127px;
  max-width: 900px;
  color: #000;
  text-align: center;
  leading-trim: both;
  text-edge: cap;

  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.stat-card {
  position: relative;
  border-radius: 0;
  padding: 26px 24px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
}
.stat-gray { background: var(--gray-card); color: var(--black); }
.stat-yellow { background: var(--yellow); color: var(--black); }
.stat-red { background: var(--red); color: #fff; }
.stat-black { background: #000; color: #fff; }
.stat-card.stat-black h3 { color: #fff; }
.stat-card.stat-black p { color: #fff; }
.stat-black .stat-icon img { display: block; }
.stat-card h3 {
  align-self: stretch;
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;

  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */

  margin-bottom: 12px;
}
.stat-card p {
  height: 141px;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--Black, #000);

  /* T7 */
  font-family: "APK Galeria";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 19.84px */
}
.stat-icon {
  margin-top: auto;
  display: inline-block;
}

/* ============ PRODUCTS ============ */
.products { background: var(--cream); padding: 60px 0 70px; }
.products-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
}
.products .section-title {
  width: 340px;
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;

  /* T2 */
  font-family: "APK Galeria";
  font-size: 49px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 58.8px */
}
.products-intro {
  width: 592px;
  height: 171px;
  padding-top: 8px;
  color: #000;
  leading-trim: both;
  text-edge: cap;

  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */
}

.product-viewport {
  overflow-x: clip;
  overflow-y: visible;
  padding: 30px 0;
  margin: -30px 0;
}
.product-row {
  --gap: 16px;
  --per-view: 4;
  display: flex;
  gap: var(--gap);
  transition: transform .45s ease;
}
.product-card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s ease;
  position: relative;
}
.product-card {
  transform-origin: center bottom;
}
.product-card:hover {
  transform: translateY(-12px);
  z-index: 2;
}
.product-img {
  width: 100%;
  height: 350px;
  background-size: cover;
  background-position: center;
}
.product-card h4 {
  width: 309px;
  max-width: 100%;
  color: var(--Black, #000);

  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */

  margin: 16px 18px 4px;
}
.product-card > p {
  width: 309px;
  max-width: 100%;
  color: var(--Black, #000);

  /* T7 */
  font-family: "APK Galeria";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 19.84px */

  margin: 0 18px 18px;
}

.learn {
  margin: auto 18px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  overflow: hidden;
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;
  text-overflow: ellipsis;

  /* T8 Caps */
  font-family: "APK Galeria";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 14.88px */
  letter-spacing: 0.192px;
  text-transform: uppercase;
}

/* Stretch the LEARN MORE link to cover the whole card so the
   entire card is clickable, not just the text row. */
.learn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.carousel-bar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}
.carousel-track {
  width: 100%;
  height: 3px;
  background: rgba(0,0,0,.18);
  position: relative;
  cursor: pointer;
  touch-action: none;
}
.carousel-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 38%;
  background: var(--black);
  transition: width .45s ease, left .45s ease;
}
.carousel-track.dragging .carousel-progress {
  transition: none;
}
.carousel-controls {
  display: flex;
  gap: 80px;
  align-self: flex-end;
}
.arrow {
  width: 40px; height: 40px;
  border: none;
  background: var(--black);
  color: #fff;
  border-radius: 0;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow:hover { opacity: .85; }
.arrow-prev svg { transform: rotate(180deg); }

/* ============ TESTIMONIAL ============ */
.testimonial { background: #fff; min-height: 829px; padding: 30px 0 64px; }

/* Testimonial moved inline within the platform narrative (why_sabre) */
.marketplace .testimonial {
  margin: 60px 0 0;        /* 60px above (from caption); gap below set by .mod-caption */
  min-height: 0;
  padding: 30px 0 64px;
  background: #fff;
  /* full-bleed white band, like the original section */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Closing statement after the testimonial (why_sabre) */
.mod-caption {
  margin: 34px 0 155px;    /* 34px below testimonial, 155px above stat cards */
  color: #000;
  font-family: "APK Galeria";
  font-size: 49px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 58.8px */
}
/* 142px gap below the stat cards (why_sabre only) */
.mod-caption ~ .stat-cards {
  margin-bottom: 142px;
}
/* Full-bleed black band (why_sabre) */
.dark-band {
  margin-top: 137px;       /* 137px above the band */
  height: 1295px;          /* 1141px + 154px extra bottom space */
  background: #000;
  /* full-bleed, like the dividers */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
/* Two-column layout inside the black band (why_sabre) */
.dark-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-top: 30px;       /* 30px space above */
}
.dark-lead {
  margin: 0;
  color: var(--Color-6, #FFF);
  leading-trim: both;
  text-edge: cap;
  /* T1.1 */
  font-family: "APK Galeria";
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 116%; /* 64.96px */
}
.dark-sub {
  margin: 0;
  color: var(--Color-6, #FFF);
  leading-trim: both;
  text-edge: cap;
  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */
}
.dark-divider {
  display: block;
  margin: 149px 0 0;       /* 149px above the divider */
  border: none;
  border-top: 1px solid #B3B3B3;
}
/* Stats grid (2 cols x 3 rows) on the right of the black band */
.dark-stats {
  margin-top: 1px;         /* label sits 1px below the divider */
}
.dark-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.dark-divider--row {
  margin: 87px 0 1px;      /* 87px above, 1px below (label hugs the divider) */
}
.dark-stat-label {
  margin: 1px 0 26px;      /* 1px below the divider, 26px above the title */
  white-space: nowrap;
  color: var(--Color-6, #FFF);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* T7 */
  font-family: "APK Galeria";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 18.2px */
}
.dark-stat-title {
  margin: 0;
  color: var(--Color, #E2553C);
  leading-trim: both;
  text-edge: cap;
  /* T1.1 */
  font-family: "APK Galeria";
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 116%; /* 64.96px */
}
.dark-stat-text {
  margin: 8px 0 0;
  color: var(--Color-6, #FFF);
  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
}
/* Stat description text slides up + fades in whenever the dark band scrolls
   into view. Keyed off the .dark-col--right .reveal toggle (re-runs on scroll). */
.dark-stat-text {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.dark-col--right.is-visible .dark-stat-text {
  opacity: 1;
  transform: translateY(0);
}
.dark-col--right.is-visible .dark-stat-row:nth-of-type(1) .dark-stat-text { transition-delay: .10s; }
.dark-col--right.is-visible .dark-stat-row:nth-of-type(2) .dark-stat-text { transition-delay: .22s; }
.dark-col--right.is-visible .dark-stat-row:nth-of-type(3) .dark-stat-text { transition-delay: .34s; }

/* No gap between the customer quote section and the black band that follows */
.testimonial + .dark-band {
  margin-top: 0;
}

/* NDC page: testimonial and showcase band touch with no gap */
.testimonial--ndc {
  padding-bottom: 0;
}
.testimonial--ndc + .showcase-band {
  margin-top: 0;
}

/* Full-width dark band (sboss how-it-works). The band grows to fit its
   content: the two columns at the top and the card carousel below. */
.how-band {
  width: 100vw;
  background: #000;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 32px 0 64px;
}
/* Inner content constrained to 1180px, centered horizontally. */
.how-inner {
  max-width: 1180px;
  margin: 0 auto;           /* center horizontally */
  padding: 0;               /* remove default 20px container padding */
}
/* The two columns: white card (text) and image. Uses a real 2-column grid
   (not flex) so the image column keeps an explicit track width instead of
   resolving a percentage height against an auto-height parent. */
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: auto;
  min-height: 0;
  align-items: stretch;
}
/* Left: white card, 590px wide. Right: image fills the rest. */
.how-card {
  background: #FFF;
  flex: 0 0 590px;          /* fixed 590px, won't shrink */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px;
  box-sizing: border-box;
}
.how-eyebrow {
  margin: 0 0 16px;
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 130%;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06px;
}
.how-text {
  margin: 0;
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  text-align: left;
}
/* Image column: the 1/1 aspect-ratio square frame sizes itself from the
   track width, so it can never collapse to a zero-height box. The <img> is
   absolutely positioned to fill the frame. */
.how-media {
  display: block;
  visibility: visible;
  opacity: 1;
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
}
.how-media img {
  display: block;
  visibility: visible;
  opacity: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
}

/* ============ HOW-IT-WORKS CAROUSEL (sboss dark band) ============ */
/* 1180px container split into 4 cards of equal width */
.how-carousel {
  margin-top: 48px;
}
.how-carousel-viewport {
  overflow: hidden;
}
.how-carousel-row {
  display: flex;
  gap: 16px;
  --per-view: 4;
  transition: transform .45s ease;
}
.how-feature-card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * 16px) / var(--per-view));
  background: #F3EFE4;
  height: 200px;
  display: flex;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
}
.how-feature-text {
  margin: 0;
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-align: left;
}
.how-carousel-bar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 32px;
}
.how-carousel-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.25);
  position: relative;
  cursor: pointer;
  touch-action: none;
}
.how-carousel-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 25%;
  background: #fff;
  transition: width .45s ease, left .45s ease;
}
.how-carousel-track.dragging .how-carousel-progress {
  transition: none;
}
.how-carousel-controls {
  display: flex;
  justify-content: space-between;  /* prev far-left, next far-right */
  align-items: center;
  width: 100%;
}
.how-carousel-controls .arrow {
  background: #F3EFE4;   /* match the feature-card background */
  color: #000;
}
.how-carousel-controls .arrow svg path {
  fill: #000;            /* dark arrow visible on the light button */
}
.how-carousel-controls .arrow:hover { opacity: .85; }

/* Desktop only: group the carousel buttons on the right with a 100px gap,
   matching the About leadership slider (.leader-bar-controls). Below 1024px
   the section uses the stacked/mobile layout, so those are left untouched. */
@media (min-width: 1025px) {
  .how-carousel-controls {
    justify-content: flex-end;
    gap: 100px;
  }
}


/* Full-bleed black showcase band (automation-manager) */
.showcase-band {
  margin-top: 160px;         /* 160px space below the stat cards */
  height: 824px;             /* fixed band height */
  background: #000;
  /* full-bleed, like the dividers */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  height: 100%;
  position: relative;
}
.showcase-col--left {
  position: absolute;
  left: 1.72%;
  right: 67.7%;
  top: 0;
  bottom: auto;
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 49px;
  line-height: 120%;
  color: #fff;
}
.showcase-col--right {
  grid-column: 2;
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 31px;
  line-height: 120%;
  color: #fff;
}
.showcase-stat {
  margin: 0;
  color: #E2553C;
  leading-trim: both;
  text-edge: cap;
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 210px;
  line-height: 116%;
}
.showcase-stat-percent {
  color: #E2553C;
  leading-trim: both;
  text-edge: cap;
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 500;
  font-size: 147px;
  line-height: 116%;
}
.showcase-divider {
  display: block;
  margin: 60px 0;
  border: none;
  border-top: 1px solid #B3B3B3;
}
.showcase-stat-row {
  display: flex;
  flex-direction: column;
}
.showcase-stat-sub {
  margin: 0;
  color: #fff;
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 31px;
  line-height: 120%;
}
.showcase-stat-desc {
  margin: 0;
  color: #FFFFFF;
  /* T4 */
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 31px;
  line-height: 120%;
}
/* No gap between the showcase band and the testimonial that follows it */
.showcase-band + .testimonial {
  margin-top: 0;
}

/* Two-column intro section below the hero (support) */
.support-intro {
  margin-top: 0;
  background: #FFF;
}
.support-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-top: 20px;       /* 20px above the title + paragraph */
}
.support-intro-right {
  display: flex;
  justify-content: flex-end;
}
/* Media row inside the CONNECTING YOU section (support) */
.support-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;      /* image keeps its own height; won't stretch with accordion */
  margin-top: 160px;       /* 160px below the intro text + paragraph */
}
.support-media-divider {
  margin: 0;
  border: none;
  border-top: 1px solid #B3B3B3;
}
.support-media-img {
  width: 100%;
  height: 502px;           /* fixed height so it doesn't stretch with the accordion */
  background: 50% / cover no-repeat;
}
/* Accordion below the divider (support) */
.support-accordion {
  margin-top: 0;        /* 83px below the divider */
  border-bottom: 1px solid #B3B3B3;
}
.support-acc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #000;
  font-family: "APK Galeria";
  font-size: 20px;
  font-weight: 400;
  line-height: 120%;
}
.support-acc-toggle:hover { opacity: .6; }
.support-acc-sign {
  flex: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  transition: transform .2s ease;
}
.support-accordion.open .support-acc-sign { transform: rotate(45deg); }
.support-acc-panel {
  display: none;
  padding: 0 0 24px;
}
.support-accordion.open > .support-acc-panel { display: block; }
.support-acc-frame {
  width: 100%;
  height: 360px;
  border: 1px solid #E5E5E5;
}
.support-acc-text {
  margin: 0;
  color: #000;
  font-family: "APK Galeria";
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}

/* Nested level-2 accordions inside the sboss back-office column */
.sboss-acc-level2 {
  margin-left: 32px;
  border-bottom: 1px solid #E5E5E5;
}
.sboss-acc-level2 .support-acc-toggle {
  padding: 18px 0;
  font-size: 18px;
  line-height: 130%;
}
.sboss-acc-level2 .support-acc-sign { font-size: 18px; }
.sboss-acc-level2 .support-acc-panel { padding: 0 0 18px; }
.sboss-acc-level2 .support-acc-text {
  font-size: 16px;
  line-height: 150%;
}
.sboss-acc-level2:last-child { border-bottom: none; }

/* ============ WORK ANYTIME ANYWHERE (agency-workspace) ============ */
.work-anywhere {
  margin-top: 160px;
  padding-bottom: 70px;
}
.work-anywhere .section-title {
  margin-bottom: 60px;
  color: #000;
  font-family: "APK Galeria";
  font-size: 49px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.support-intro-title {
  margin: 0;
  color: #000;
  /* T2 */
  font-family: "APK Galeria";
  font-size: 49px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 58.8px */
}
.support-intro-text {
  margin: 0;
  max-width: 347px;
  padding-top: 6px;
  color: var(--Black, #000);
  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
}

/* ---------- Legal / policy pages (cookie-policy) ---------- */
.policy-page {
  background: var(--cream);
}
.policy {
  padding: 48px 0 80px;
}
.policy-title {
  margin: 32px 0 24px;
  color: #000;
  font-family: "APK Galeria";
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 116%;
}
.policy .btn {
  margin-bottom: 32px;
}
.policy-subtitle {
  margin: 40px 0 12px;
  color: #000;
  /* T2 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
.policy-text {
  margin: 0 0 16px;
  max-width: 820px;
  color: #000;
  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.support-media-left {
  padding-bottom: 160px;
}
.support-media-right {
  padding-bottom: 80px;
}
/* "Built for what's next" heading below the divider (why_sabre) */
.next-title {
  margin: 137px 0 0;       /* 137px below the divider */
  color: #000;
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: "APK Galeria";
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 116%; /* 64.96px */
}
.testimonial .section-title {
  width: 729px;
  max-width: 100%;
  margin-bottom: 150px;
  color: #000;
  font-size: 49px;
  font-weight: 400;
  line-height: 120%; /* 58.8px */
}
.testimonial-viewport {
  overflow: hidden;
}
.testimonial-track {
  display: flex;
  transition: transform .45s ease;
}
.testimonial-track.dragging {
  transition: none;
}
.testimonial-body {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 339px 1fr;
  align-items: center;
  gap: 80px;
}
.quote-logo {
  width: 339px;
  height: 109px;
  max-width: 100%;
  object-fit: contain;
  justify-self: start;
}
.quote-block blockquote {
  width: 697px;
  max-width: 100%;
  color: #000;
  font-size: 22px;
  font-weight: 400;
  line-height: 120%;
  margin-top: 0;
  margin-bottom: 28px;
}
.quote-name {
  color: #000;
  font-size: 20px;
  font-weight: 600;
  line-height: 124%; /* 24.8px */
  margin-top: 58px;
}
.quote-role {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 124%; /* 19.84px */
  margin-top: 4px;
}
.quote-company {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 124%; /* 19.84px */
  margin-top: 4px;
}

.testimonial-foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 123px;
}
.testimonial-foot .dots {
  align-self: flex-end;
}
.t-track {
  width: 100%;
  height: 3px;
  background: rgba(0,0,0,.18);
  position: relative;
  cursor: pointer;
  touch-action: none;
}
.t-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 33.333%;
  background: var(--black);
  transition: width .45s ease, left .45s ease;
}
.t-track.dragging .t-progress {
  transition: none;
}
.dots { display: flex; gap: 6px; }
.dot {
  width: 35px; height: 35px;
  border: none;
  padding: 0;
  background: url("images/rec-white.svg") center / contain no-repeat;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "APK Galeria", sans-serif;
  font-size: 14px;
  color: #000;
}
.dot.active {
  background-image: url("images/rec-black.svg");
  color: #fff;
}

/* ============ ABOUT ============ */
.about { background: var(--black); color: #fff; height: 833px; }
.about-grid {
  max-width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.about-text {
  display: flex;
  flex-direction: column;
  max-width: 660px;
  margin-left: auto;
  margin-right: 60px;
  padding: 32px 32px;
}
.about-text h2 {
  width: 599px;
  max-width: 100%;
  color: #FFF;
  font-size: 49px;
  font-weight: 400;
  line-height: 120%; /* 58.8px */
  margin-bottom: 0;
}
.about-text p {
  width: 548px;
  max-width: 100%;
  color: #FFF;
  font-size: 31px;
  font-weight: 400;
  line-height: 120%; /* 37.2px */
  margin-top: auto;
  margin-bottom: 40px;
}
.about-btns { display: flex; gap: 16px; margin-bottom: auto; }
.about-btn {
  width: 224px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: center / 100% 100% no-repeat;
  font-family: "APK Galeria", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #000;
}
.about-btn--about { background-image: url("images/about-btn.svg"); }
.about-btn--why { background-image: url("images/why-sabre-btn.svg"); }
.about-img {
  margin: 32px 32px 32px 0;
  border-radius: 0;
  background: url("images/doshi.jpg") center / cover no-repeat;
}

/* scroll reveal (used in About section) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .4s ease, transform .4s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* ============ CTA ============ */
.cta {
  background: var(--cream-2);
  text-align: center;
  padding: 0;
}
.cta-panel {
  width: 100%;
  height: 822px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 160px 0;
  background: var(--cream-2);
}
.cta-title {
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 167.217px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 200.661px */
  letter-spacing: -5.017px;
  margin-bottom: 28px;
}
.cta-sub {
  width: 612px;
  max-width: 100%;
  margin: 0 auto 30px;
  color: var(--Black, #000);
  text-align: center;
  leading-trim: both;
  text-edge: cap;

  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */
}
.cta-talk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 205px;
  height: 56px;
  background: url("images/lets-talk.svg") center / contain no-repeat;
  color: #fff;
  font-family: "APK Galeria";
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-decoration: none;
}


/* ============ FOOTER ============ */
.site-footer { background: var(--footer-red); color: #fff; padding: 22px 0; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.footer-brand { display: flex; align-items: flex-end; gap: 6px; }
.footer-logo { width: 129px; height: 46px; aspect-ratio: 129 / 46; display: block; }
.footer-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.footer-links { display: flex; gap: 22px; }
.footer-links a {
  overflow: hidden;
  color: var(--Black, #000);
  text-overflow: ellipsis;
  /* T8 M */
  font-family: "APK Galeria";
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 124%; /* 16.12px */
}
.footer-links a:hover { text-decoration: underline; }
.copyright {
  color: var(--Black, #000);
  /* T8 M */
  font-family: "APK Galeria";
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 124%; /* 16.12px */
  opacity: .9;
}
.footer-social { display: flex; gap: 6px; }
.footer-social a {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social a svg { display: block; width: 30px; height: 30px; }

/* ============ SEARCH RESULTS ============ */
.search-page { background: var(--cream); min-height: 70vh; padding: 56px 0 110px; }

/* header row: big title left, query info right */
.search-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.search-heading {
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 80px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -1px;
  margin: 0;
}
.search-meta { text-align: left; padding-top: 8px; }
.search-meta p {
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}
.search-divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,.18);
  margin: 28px 0 64px;
}
.search-empty {
  color: var(--text-muted);
  font-family: "APK Galeria";
  font-size: 18px;
  margin: 0 0 40px;
}

/* result grid */
.search-results {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 30px;
}
.search-result.is-hidden { display: none; }
.search-result a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.search-result-media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 18px;
}
.search-result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.search-result a:hover .search-result-media img { transform: scale(1.05); }
.search-result-cat {
  align-self: flex-start;
  background: rgba(0,0,0,.06);
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 0;
  margin-bottom: 14px;
}
.search-result-title {
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 21px;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 10px;
}
.search-result-brand { display: block; font-weight: 400; }
.search-result-desc {
  color: var(--text-muted);
  font-family: "APK Galeria";
  font-size: 15px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 18px;
}
.search-result-more {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.search-result-more svg {
  flex-shrink: 0;
  transition: transform .25s ease;
}
.search-result a:hover .search-result-more svg { transform: translateX(4px); }

.search-more-wrap { text-align: center; }
.search-more {
  display: inline-block;
  padding: 14px 32px;
  font-size: 16px;
}

/* ============ RESPONSIVE ============ */

/* hamburger toggle — hidden on desktop, shown on tablet/phone */
.nav-toggle {
  display: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 70;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
  border-radius: 0;
  transition: transform .3s ease, opacity .2s ease;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Large desktop: shrink the oversized CTA headline ---------- */
@media (max-width: 1300px) {
  .cta-title { font-size: 120px; letter-spacing: -4px; }
}

/* ---------- Tablet & below: drawer navigation (<= 1100px) ---------- */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .search { right: 62px; }
  .search.open .search-form { width: 180px; }

  .main-nav {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 48px;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .3s ease;
    visibility: hidden;
    z-index: 60;
  }
  .site-header.nav-open .main-nav { transform: translateX(0); visibility: visible; }

  .main-nav > a {
    display: block;
    padding: 16px 2px;
    font-size: 18px;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .nav-item { display: block; position: static; }
  .nav-item.has-dropdown { border-bottom: 1px solid rgba(0,0,0,.08); }
  .nav-item .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 2px;
    font-size: 18px;
  }

  /* dropdowns become inline accordions instead of floating panels */
  .main-nav .dropdown-menu {
    position: static;
    transform: none;
    display: none;
    width: 100%;
    min-width: 0;
    padding: 0 0 10px 14px;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-item.open .dropdown-menu { display: flex; }
  .dropdown-mega { width: 100%; min-width: 0; }
  .main-nav .dropdown-menu > a { padding: 10px 2px; white-space: normal; font-size: 16px; }
  .dropdown-cat-toggle { padding: 12px 4px; }
  .dropdown-sub a { padding: 9px 4px 9px 12px; white-space: normal; }

  /* carousel shows fewer cards */
  .product-row { --per-view: 3; }

  /* search results + oversized type */
  .search-results { grid-template-columns: repeat(3, 1fr); }
  .search-heading { font-size: 60px; }
  .cta-title { font-size: 92px; letter-spacing: -3px; }
  .products-intro { width: auto; height: auto; max-width: 100%; }
}

/* ---------- Tablet portrait (<= 900px) ---------- */
@media (max-width: 900px) {
  .page-content { margin-top: 60px; }

  .hero { padding: 24px 0 0; }
  .hero-top { flex-direction: column; gap: 24px; margin-bottom: 28px; }
  .hero-title { font-size: 48px; line-height: 1.08; white-space: normal; }
  .hero-aside { max-width: 100%; padding-top: 0; }
  .hero-image { height: 360px; }
  .hero-band { height: auto; padding: 36px 0; }
  .hero-band-inner { flex-direction: column; align-items: flex-start; gap: 20px; }

  /* Crumb pages: pull the breadcrumb up snug under the sticky header.
     The 60px .page-content margin above is meant for the homepage banner;
     on breadcrumb heroes it just creates a big gap, so cancel most of it. */
  .hero--crumb { padding-top: 0 !important; margin-top: -52px; }

  .banner { margin-top: -60px; height: 460px; }
  .banner-overlay { background: linear-gradient(90deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.6) 55%, rgba(10,10,10,.25) 100%); }
  .banner-title { font-size: 44px; }
  .banner-text { font-size: 17px; }

  .marketplace { padding: 70px 0 50px; }
  .mosaic-logo { margin-bottom: 40px; }
  .marketplace .section-title { font-size: 40px; margin-bottom: 40px; }
  .section-lead { font-size: 20px; margin-bottom: 48px; }
  .platform-split { grid-template-columns: 1fr; gap: 32px; margin-top: 90px; }
  /* Stacked order is image first, text below — regardless of the
     desktop left/right arrangement (normal vs --reverse). */
  .platform-split .platform-img { order: 0; }
  .platform-split .platform-text { order: 1; }
  .platform-lead { max-width: 100%; }
  /* Fluid images when the splits stack */
  .platform-img img { height: auto; }
  .sboss-story-media { height: auto; }
  .sboss-story-media--sheet { height: auto; }
  .modular-split { grid-template-columns: 1fr; gap: 24px; }
  .modular-title { font-size: 38px; }
  .modular-text { font-size: 24px; }
  .stat-cards { grid-template-columns: 1fr 1fr; }

  /* Showcase band — stack on tablet */
  .showcase-band { height: auto; }
  .showcase-grid { grid-template-columns: 1fr; gap: 48px; padding: 80px 0; }
  .showcase-col--left { position: static; font-size: 40px; }
  .showcase-col--right { grid-column: 1; }
  .showcase-stat { font-size: 150px; }
  .showcase-stat-percent { font-size: 105px; }
  .showcase-stat-sub, .showcase-stat-desc { font-size: 24px; }

  .products { padding: 40px 0 50px; }
  .products-head { flex-direction: column; gap: 16px; margin-bottom: 28px; }
  .products .section-title { width: auto; font-size: 38px; }
  .products-intro { font-size: 24px; }
  .product-row { --per-view: 2; }
  .product-img { height: 260px; }

  .testimonial { min-height: 0; padding: 48px 0; }
  .testimonial .section-title { width: auto; font-size: 34px; margin-bottom: 48px; }
  .testimonial-body { grid-template-columns: 1fr; gap: 28px; }
  .quote-logo { width: 240px; height: auto; }
  .quote-block blockquote { width: 100%; font-size: 17px; }
  .quote-name { margin-top: 8px; }

  .about { height: auto; }
  .about-grid { grid-template-columns: 1fr; }
  /* Stacked order: image first, text below */
  .about-grid .about-img { order: 0; }
  .about-grid .about-text { order: 1; }
  /* Clear the desktop fixed h2/p widths (599px/548px) so the text column
     shrinks with the viewport; otherwise the text overflows the section and
     gets clipped by overflow-x at mid-widths like 600px. */
  .about-text { padding: 48px 24px; margin: 0; max-width: 100%; width: 100%; }
  .about-text h2 { width: 100%; }
  .about-text p { width: 100%; }
  .about-text h2 { font-size: 34px; }
  .about-text p { font-size: 22px; margin-top: 24px; }
  /* Full-width stacked buttons on tablets too — otherwise they keep the
     desktop 224px width and sit centered in the wide text column. */
  .about-btns { flex-direction: column; align-items: stretch; }
  .about-btn { width: 100%; }
  .about-img { min-height: 300px; margin: 0; border-radius: 0; }

  .cta-panel { height: auto; padding: 64px 0 72px; }
  .cta-title { font-size: 64px; letter-spacing: -2px; }
  .cta-sub { font-size: 22px; }

  .search-head { gap: 16px; }
  .search-heading { font-size: 44px; }
  .search-results { grid-template-columns: repeat(2, 1fr); }

  /* Support / Training — stack the intro columns and put the image
     above the accordion text, matching the other split sections. */
  .support-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .support-intro-right { justify-content: flex-start; }   /* align text left when stacked */
  .support-media-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 90px; }
  .support-media-left { order: 1; padding-bottom: 60px; }
  .support-media-right { order: 0; padding-bottom: 0; }
  .support-media-img { height: 360px; }

  .footer-inner { flex-direction: column; gap: 18px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ---------- Phones (<= 560px) ---------- */
@media (max-width: 560px) {
  .brand-loc { width: auto; font-size: 16px; }
  .brand-logo { width: 120px; height: 43px; }

  .eyebrow { font-size: 16px; margin-bottom: 12px; }
  .hero-title { font-size: 33px; }
  .hero-image { height: 220px; }

  .banner { margin-top: -60px; height: 480px; }
  .banner-overlay { background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.8) 100%); }
  .banner-content { justify-content: flex-end; padding-bottom: 64px; }
  .banner-tag { font-size: 12px; margin-bottom: 12px; }
  .banner-title { font-size: 34px; }
  .banner-text { font-size: 16px; margin-bottom: 22px; }
  .banner-arrow { width: 38px; height: 38px; }
  .banner-prev { left: 10px; }
  .banner-next { right: 10px; }

  .marketplace { padding: 50px 0 40px; }
  .marketplace .section-title { font-size: 30px; }
  .section-lead { font-size: 18px; margin-bottom: 40px; }
  .stat-cards { grid-template-columns: 1fr; }

  /* Showcase band — compact on phones */
  .showcase-col--left { font-size: 30px; }
  .showcase-stat { font-size: 110px; }
  .showcase-stat-percent { font-size: 77px; }
  .showcase-divider { margin: 32px 0; }
  .showcase-stat-sub, .showcase-stat-desc { font-size: 20px; }

  .products .section-title { font-size: 30px; }
  .products-intro { font-size: 20px; }
  .product-row { --per-view: 1; }
  .product-img { height: 300px; }
  .carousel-controls { gap: 40px; }

  .testimonial .section-title { font-size: 28px; }
  .quote-block blockquote { font-size: 15px; }

  /* How-it-works dark band — compact on phones */
  .how-band { padding: 24px 0 40px; }
  .how-inner { padding: 0 16px; }
  .how-card { padding: 28px 24px; height: auto; }
  .how-eyebrow { font-size: 16px; margin-bottom: 12px; }
  .how-text { font-size: 16px; }
  /* `!important` so the fixed 240px beats the 1024px clamp above */
  .how-media { height: 240px !important; }

  /* How-it-works carousel — 1 card per view on phones */
  .how-carousel-row { --per-view: 1; }
  .how-feature-card { height: 240px; padding: 20px; }

  /* On phones the h2/p keep their desktop fixed widths (599px/548px),
     which would overflow the ~390px screen and get clipped by
     overflow-x. Constrain the whole text column to the viewport and let
     the text wrap. */
  .about-text { width: 100%; }
  .about-text h2 { width: 100%; font-size: 28px; }
  .about-text p { width: 100%; font-size: 19px; }
  .about-btns { flex-direction: column; align-items: stretch; }
  .about-btn { width: 100%; }

  /* The desktop buttons are 224px-wide SVGs (`background: center / 100% 100%
     no-repeat`), so a stretched width alone leaves the SVG image at its
     intrinsic 224px with empty space around it. Drop the SVG background and
     paint a solid block instead so the whole button shows on phones. */
  .about .about-btns > a.about-btn {
    height: 56px;
    padding: 0 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
  }
  .about .about-btns > a.about-btn--about { background-color: #fff; color: #000; }
  .about .about-btns > a.about-btn--why   { background-color: #B3B3B3; color: #000; }
  .about .about-btns > a.about-btn::before,
  .about .about-btns > a.about-btn::after { left: 0; right: 0; width: 100%; max-width: none; transform: none; }

  .cta-panel { height: auto; padding: 48px 0 56px; }
  .cta-title { font-size: 44px; letter-spacing: -1px; }
  .cta-sub { font-size: 18px; }

  .search-heading { font-size: 34px; }
  .search-results { grid-template-columns: 1fr; }

  /* Support / Training — shorter image on phones */
  .support-media-img { height: 240px; }
  .support-media-left { padding-bottom: 40px; }
}

/* ============ CONTACT PAGE ============ */
.contact-page { margin-top: 0; }

/* ---- Banner ---- */
.contact-banner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 640px;
  overflow: hidden;
  background: #0a0a0a;
}
.contact-banner-img {
  position: absolute; inset: 0;
  background-position: 50% 42%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.03);
}
.contact-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.55) 100%);
}
.contact-banner-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  color: #fff;
  padding-bottom: 40px;
}
.contact-eyebrow {
  font-family: "APK Galeria";
  font-size: 13px; font-weight: 400;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: #fff; margin-bottom: 14px;
}
.contact-title {
  font-family: "APK Galeria";
  font-size: 76px; font-weight: 400;
  line-height: 1.05; letter-spacing: -2px;
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.contact-sub {
  font-family: "APK Galeria";
  font-size: 26px; font-weight: 400;
  color: rgba(255,255,255,.92);
}
.contact-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  line-height: 0; pointer-events: none;
}
.contact-wave svg { display: block; width: 100%; height: 110px; }
.contact-wave .wave-back { fill: #0a0a0a; }
.contact-wave .wave-mid  { fill: #fff; }
.contact-wave .wave-fill { fill: var(--cream); }

/* ---- Main (intro + form + office details) ---- */
.contact-main { background: var(--cream); padding: 28px 0 40px; }

/* breadcrumb (Home > Current page) */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 100px;
  font-family: "APK Galeria";
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .3px;
}
.breadcrumb a {
  color: var(--text-muted);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.breadcrumb a:hover { color: var(--black); border-bottom-color: var(--black); }
.breadcrumb-sep { color: var(--text-muted); }
.breadcrumb-current { color: var(--black); }

.contact-intro { max-width: 720px; margin: 160px 0 44px; }
.contact-heading {
  font-family: "APK Galeria";
  font-size: 81px; font-weight: 400;
  line-height: 114%;
  letter-spacing: -1px; margin-bottom: 16px;
}
.contact-lead {
  font-size: 19px; line-height: 1.6;
  color: var(--text-muted);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 90px;               /* generous spacing between the form and the office details */
  align-items: start;
}

/* ---- Form section (full-width white band, like the black map) ---- */
.contact-form-section {
  background: #fff;
  padding: 90px 0 160px;   /* 160px breathing room below the content */
}
.contact-form-section .contact-form-card {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.contact-form-section .info-block {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.contact-form-section .contact-info { gap: 0; }
.contact-form-section .info-block + .info-block {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* ---- Form ---- */
.contact-form-card {
  background: #fff;
  border-radius: 0;
  padding: 38px 40px 40px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}
.contact-form-title {
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 600;
  font-size: 31px;
  line-height: 120%; /* 37.2px */
  margin-bottom: 24px;
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-form .form-field { margin-bottom: 20px; }
.contact-form label {
  display: block;
  font-size: 14px; font-weight: 400;
  color: var(--ink); margin-bottom: 8px;
}
.form-optional { font-weight: 400; color: var(--text-muted); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: "APK Galeria", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream-2);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
  padding: 13px 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.contact-form textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,0,0,.12);
}
.contact-form .is-invalid { border-color: var(--black); }
.contact-form .is-invalid:focus { box-shadow: 0 0 0 3px rgba(0,0,0,.18); }
.form-error {
  display: block;
  margin-top: 7px;
  font-size: 13px; color: var(--black);
}
.form-submit {
  margin-top: 6px;
  width: 100%;
  padding: 15px 26px;
  font-size: 16px;
}

/* form status banners */
.form-banner {
  border-radius: 0;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 15px; line-height: 1.5;
}
.form-banner--success {
  background: rgba(0,0,0,.05);
  border: 1px solid var(--black);
  color: var(--ink);
}
.form-banner--error {
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.35);
  color: var(--ink);
}

/* ---- Office details ---- */
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.info-block {
  background: #fff;
  border-radius: 0;
  padding: 26px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.info-tag {
  display: inline-block;
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 600;
  font-size: 31px;
  line-height: 120%; /* 37.2px */
  color: var(--black); margin-bottom: 12px;
}
.info-address {
  font-style: normal;
  font-family: "APK Galeria";
  font-weight: 400;
  font-size: 16px; line-height: 1.5;
  color: var(--text-muted); margin-bottom: 16px;
}
.info-list {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px 14px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 16px; line-height: 1.5;
}
.info-list dt { font-weight: 400; color: var(--text-muted); }
.info-list dd { margin: 0; color: var(--ink); }
.info-list a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.info-list a:hover { color: var(--black); border-bottom-color: var(--black); }
.info-note { display: inline-block; color: var(--text-muted); font-style: italic; font-size: 16px; }

/* ---- Map ---- */
.contact-map { background: #000; padding: 90px 0 90px; }
.contact-map-title {
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 600;
  font-size: 31px;
  line-height: 120%; /* 37.2px */
  color: #fff;
  margin-bottom: 50px;
}
.contact-map-frame {
  position: relative;
  width: 100%; height: 440px;
  border-radius: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.contact-map-frame iframe { position: absolute; inset: 0; }

/* ---- Contact hero (two-column intro, mirrors the About page) ---- */
.contact-hero { margin-bottom: 90px; }

/* ---- Contact section label + heading ---- */
.contact-form-label {
  font-family: "APK Galeria";
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 124%; /* 24.8px */
  margin-top: 80px;          /* hero + stories removed; keep a modest gap under the breadcrumb */
  margin-bottom: 16px;
}

.contact-form-heading {
  font-family: "APK Galeria";
  font-size: 81px;
  font-weight: 400;
  line-height: 114%;
  letter-spacing: -1px;
  margin-top: 0;
  margin-bottom: 140px;   /* 140px gap between the heading and the divider */
}

/* ---- Divider below the heading ---- */
.contact-form-divider {
  border: none;
  border-top: 1px solid #B3B3B3;
  margin-top: 0;
  margin-bottom: 140px;   /* 140px gap below the divider */
}

/* ---- Stories (solutions showcase) ---- */
.stories { padding: 8px 0 56px; }
.stories-title {
  /* homepage hero-title scale */
  font-size: 81px;
  line-height: 114%;
  letter-spacing: -1px;
  margin-bottom: 160px;
}
/* Stories — same design as the why_sabre.php platform splits */
.story-list {
  display: flex;
  flex-direction: column;
  gap: 160px;
}
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}
/* alternate sides: even rows put the image on the right */
.story:nth-child(even) .story-media { order: 2; }
.story-media {
  width: 100%;
  aspect-ratio: 4 / 3; /* same proportions as the platform-split images (1440x1080) */
  border-radius: 0;
  background: var(--cream) center / cover no-repeat;
}
.story-heading {
  /* T4 — matches .platform-title */
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 31px;
  font-weight: 400;
  line-height: 120%; /* 37.2px */
  margin-bottom: 24px;
}
.story-text {
  /* T6 — matches .platform-lead */
  max-width: 520px;
  color: var(--Black, #000);
  font-family: "APK Galeria";
  font-size: 20px;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
}

@media (max-width: 900px) {
  .contact-banner { height: 460px; }
  .contact-title { font-size: 54px; }
  .contact-sub { font-size: 21px; }
  .contact-wave svg { height: 64px; }

  .contact-main { padding: 40px 0 30px; }
  .contact-heading { font-size: 48px; }
  .contact-intro { margin-top: 80px; }
  .contact-lead { font-size: 17px; }
  .contact-layout { grid-template-columns: 1fr; gap: 28px; }
  .contact-form-card { padding: 30px 26px 32px; }

  .contact-map-title { font-size: 31px; margin-bottom: 40px; }
  .contact-map-frame { height: 380px; }

  .contact-form-label { font-size: 18px; margin-top: 80px; margin-bottom: 12px; }
  .contact-form-heading { font-size: 48px; margin-bottom: 80px; }
  .contact-form-divider { margin-bottom: 80px; }

  .stories { padding: 10px 0 50px; }
  .stories-title { font-size: 48px; margin-bottom: 80px; }
  .story-list { gap: 90px; }
  .story { grid-template-columns: 1fr; gap: 32px; }
  /* keep the image above the text on every row when stacked */
  .story:nth-child(even) .story-media { order: 0; }
  .story-heading { font-size: 26px; }
}

@media (max-width: 560px) {
  .contact-banner { height: 480px; }
  .contact-title { font-size: 40px; }
  .contact-sub { font-size: 18px; }
  .contact-wave svg { height: 44px; }

  .contact-heading { font-size: 34px; }
  .stories-title { font-size: 34px; }
  .contact-form-card { padding: 26px 20px 28px; }
  .contact-form-title { font-size: 22px; }
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
  .info-block { padding: 22px 20px; }
  .info-list { grid-template-columns: 72px 1fr; }

  .contact-map-title { font-size: 31px; }
  .contact-map-frame { height: 300px; }

  .contact-form-label { font-size: 16px; margin-bottom: 12px; }
  .contact-form-heading { font-size: 34px; margin-bottom: 60px; }
  .contact-form-divider { margin-bottom: 60px; }
}

/* ============ ABOUT PAGE ============ */
/* overflow-x: hidden guards against any child (e.g. a 720px image column on
   mid-size screens) pushing the page wider than the viewport. The sticky header
   lives outside <main>, so this does not affect it. */
.about-page { margin-top: 0; overflow-x: hidden; }

/* hero: reuses .hero / .hero-title / .hero-aside from the homepage */
.about-hero { padding: 30px 0 0; }   /* 0 bottom padding so the divider sits flush under the hero image */
.about-hero .hero-title {
  width: 859.702px;
  height: 242px;
  max-width: 100%;
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;
  font-family: "APK Galeria";
  font-size: 81px;
  font-style: normal;
  font-weight: 400;
  line-height: 114%; /* 92.34px */
  margin-bottom: 0; /* gap to image is owned solely by .hero-top's 109px margin-bottom */
}
.about-hero .hero-aside {
  width: 347px;
  max-width: 100%;
  color: var(--Black, #000);

  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
}
.about-hero-image {
  background-image: url("images/about.jpg");
  background-position: 50% 45%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- About Sabre split ---- */
/* 160px gap between the hero image (about.jpg) and this section */
.about-split { background: var(--cream); padding: 160px 0 0; }
/* Same geometry as .platform-split on why_sabre.php:
   two columns, vertically centered, 60px gap */
.about-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);   /* 5/7 split: image (7fr) + text (5fr) */
  align-items: center;
  gap: 60px;
  max-width: 1180px;         /* cap the split (image + text) width */
  margin-left: auto;
  margin-right: auto;
}
.about-split-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  background: var(--cream) url("images/about-sabre.jpg") center / cover no-repeat;
}
.about-kicker {
  display: block;
  align-self: stretch;
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;

  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */

  margin-bottom: 20px;
}
.about-split-copy { padding-top: 0; }
.about-split-copy p {
  color: var(--Black, #000);

  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
}

/* ---- Statement ---- */
/* 160px gap above (between the About Sabre section and this one) */
.about-statement { background: var(--cream); padding: 160px 0 80px; }
/* Same geometry as .platform-split on why_sabre.php */
.about-statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* 5/7 split: text (5fr) + image (7fr) */
  align-items: center;
  gap: 60px;
  max-width: 1180px;         /* cap the split (image + text) width */
  margin-left: auto;
  margin-right: auto;
}
.about-statement-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.about-statement-title {
  align-self: stretch;
  color: var(--Black, #000);
  leading-trim: both;
  text-edge: cap;

  /* T4 */
  font-family: "APK Galeria";
  font-size: 31px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 37.2px */
}
.about-statement-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  background: var(--cream) url("images/statement.jpg") center / cover no-repeat;
}
.about-statement-text {
  max-width: 480px;
  color: var(--Black, #000);

  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
}

/* ---- Leadership ---- */
.leadership { background: #000; padding: 80px 0; }
.leadership-title {
  /* T2 */
  font-family: "APK Galeria";
  font-size: 49px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 58.8px */
  color: #fff;
  margin-bottom: 16px;
}
.leadership-lead {
  max-width: 620px;
  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 48px;
}
.leader-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 26px;
}
.leader-card {
  position: relative;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: center bottom;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .30);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.leader-card:hover {
  transform: translateY(-14px);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .48);
}

.leader-photo {
  position: relative;
  width: 100%;
  height: 340px;
  background: var(--cream) center / cover no-repeat;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
/* subtle bottom scrim so the photo grounds into the card */
.leader-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .26) 100%);
}
.leader-card:hover .leader-photo { transform: scale(1.06); }

.leader-name {
  position: relative;
  z-index: 3; /* sit above the gradient wash so black text stays crisp */
  color: #111;
  /* SB 6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 124%; /* 24.8px */
  margin: 22px 20px 0;
  padding-bottom: 14px;
}
/* short accent divider under each name */
.leader-name::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--red));
}
.leader-role {
  position: relative;
  z-index: 3;
  color: #6c6357;
  /* T7 */
  font-family: "APK Galeria";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 19.84px */
  margin: 14px 20px 24px;
}
.leader-card .learn {
  margin: auto 18px 18px;
}

/* ---- Leadership slider ---- */
.leader-slider { position: relative; }
.leader-viewport { overflow: hidden; }
.leader-track {
  display: flex;
  gap: 26px;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.leader-slider .leader-card {
  flex: 0 0 calc((100% - 78px) / 4); /* 4 per view, 3 gaps * 26px */
}
/* keep name/role blocks aligned across cards of differing role lengths */
.leader-slider .leader-name { min-height: 0; }
.leader-slider .leader-role { min-height: 44px; }

/* Prev / Next arrows — square white buttons below the status bar, same
   pattern as the sboss how-it-works carousel controls. */
.leader-arrow {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #000;
  border: none; border-radius: 0;
  cursor: pointer;
  line-height: 1;
  transition: opacity .2s;
}
.leader-arrow:hover { opacity: .85; }

/* Bottom control bar (sboss how-carousel-bar pattern): status bar on top,
   buttons on a separate row below — prev far-left, next far-right. */
.leader-bar {
  margin-top: 40px;
}
.leader-bar-track {
  height: 3px;
  background: rgba(255, 255, 255, .25);
  position: relative;
  cursor: pointer;
  touch-action: none;
}
.leader-bar-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 100px;
  width: 100%;
  margin-top: 20px;
}
.leader-bar-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 38%;
  background: #fff;
  transition: width .45s ease, left .45s ease;
}
.leader-bar-track.dragging .leader-bar-progress {
  transition: none;
}

@media (max-width: 900px) {
  .about-hero { padding: 20px 0 0; }   /* 0 bottom padding so the divider sits flush under the hero image */
  /* drop the desktop fixed width/height so the title can wrap on phones */
  .about-hero .hero-title {
    width: auto;
    height: auto;
    font-size: 48px;
    line-height: 1.08;
    white-space: normal;
    margin-bottom: 28px;
  }
  .about-hero .hero-aside { width: 100%; }
  .about-split { padding: 10px 0 50px; }
  .about-split-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-split-media { width: 100%; height: 280px; order: -1; }
  .about-kicker { font-size: 26px; }

  .about-statement { padding: 20px 0 56px; }
  .about-statement-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Stacked order: image first, text below (same as the other splits) */
  .about-statement-grid .about-statement-media { order: -1; }
  .about-statement-title { font-size: 26px; }
  .about-statement-media { width: 100%; height: 240px; }

  /* fill the single column instead of staying locked to desktop fixed widths,
     which left empty space on the right at tablet/mid widths */
  .about-statement-text { width: 100%; max-width: 100%; }
  .about-split-media,
  .about-statement-media { width: 100%; }

  .leadership { padding: 20px 0 60px; }
  .leadership-title { font-size: 34px; }
  .leader-track { gap: 20px; }
  .leader-slider .leader-card { flex: 0 0 calc((100% - 40px) / 3); } /* 3 per view */
}

@media (max-width: 560px) {
  .about-hero .hero-title { font-size: 33px; margin-bottom: 20px; }
  .leadership-title { font-size: 28px; }
  .leader-track { gap: 16px; }
  .leader-slider .leader-card { flex: 0 0 calc(100%); } /* 1 per view */
  /* Anchor the headshot to the top so the forehead is never cropped by
     `cover` when the photo is wider than the 340px frame on phones. */
  .leader-photo { background-position: center top; }
}

/* ---- About page: image scroll-in (fade + lift + gentle zoom) ---- */
/* Hooks into the existing .reveal IntersectionObserver in script.js.
   Defined after .reveal/.reveal.is-visible so it overrides their transform. */
.reveal-media {
  transform: translateY(48px) scale(1.04);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
              transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.reveal-media.is-visible {
  transform: translateY(0) scale(1);
}

/* ============================================================
   SBOSS PAGE
   ============================================================ */

.sboss-page { background: var(--cream); }

/* ---- Banner ---- */
.sboss-banner {
  position: relative;
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.sboss-banner-img {
  position: absolute;
  inset: 0;
}
.sboss-banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.sboss-banner-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 60%, transparent 100%);
  padding: 80px 0 60px;
}
.sboss-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.sboss-eyebrow {
  font-family: "APK Galeria", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--red);
}
.sboss-banner-title {
  font-family: "APK Galeria", sans-serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
.sboss-banner-sub {
  max-width: 560px;
  font-family: "APK Galeria", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,.88);
}
.sboss-banner-cta { margin-top: 8px; }

/* ---- Intro ---- */
.sboss-intro { padding: 28px 0 80px; }
.sboss-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.sboss-intro-title {
  font-family: "APK Galeria", sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}
.sboss-intro-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 8px;
}
.sboss-intro-body p {
  font-family: "APK Galeria", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}

/* ---- Stats strip ---- */
.sboss-stats {
  background: var(--black);
  padding: 56px 0;
}
.sboss-stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sboss-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 0 40px;
}
.sboss-stat-num {
  font-family: "APK Galeria", sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: var(--red);
  line-height: 1;
}
.sboss-stat-label {
  font-family: "APK Galeria", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.sboss-stat-divider {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

/* ---- Stories ---- */
.sboss-stories { padding: 100px 0; }

.sboss-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* 5/7 split: text (5fr) + image (7fr) */
  gap: 48px;
  align-items: center;
  margin-bottom: 72px;
  max-width: 1180px;         /* cap the split (image + text) width */
  margin-left: auto;
  margin-right: auto;
}
.sboss-story:last-child { margin-bottom: 0; }

/* reverse rows: image on the left, still the wider 7fr column */
.sboss-story--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sboss-story--reverse .sboss-story-media { order: 2; }
.sboss-story--reverse .sboss-story-copy  { order: 1; }

.sboss-story-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
}
.sboss-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sboss-story-media--sheet {
  aspect-ratio: unset;
  height: auto;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sboss-story-media--sheet img {
  width: 100%;
  height: auto;
  object-fit: unset;
}

.sboss-story-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sboss-story-tag {
  font-family: "APK Galeria", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
}
.sboss-story-heading {
  font-family: "APK Galeria", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}
.sboss-story-text {
  font-family: "APK Galeria", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-muted);
}
.sboss-story-text + .sboss-story-text { margin-top: 14px; }
.sboss-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "APK Galeria", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
  width: fit-content;
  transition: color .2s, border-color .2s;
}
.sboss-story-link:hover { color: var(--red); border-color: var(--red); }

/* ---- Features grid ---- */
.sboss-features {
  background: var(--cream);
  padding: 100px 0;
}
.sboss-features-title {
  font-family: "APK Galeria", sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 64px;
}
.sboss-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 56px;
}
.sboss-feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sboss-feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,85,62,.3);
  border-radius: 0;
  background: rgba(226,85,62,.06);
}
.sboss-feature-name {
  font-family: "APK Galeria", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.sboss-feature-desc {
  font-family: "APK Galeria", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-muted);
}

/* CTA strip — uses shared .cta / .cta-panel styles from main stylesheet */

/* ---- SBOSS responsive ---- */
@media (max-width: 1100px) {
  .sboss-banner-title  { font-size: 72px; }
  .sboss-intro-title   { font-size: 40px; }
  .sboss-features-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 900px) {
  .sboss-banner         { min-height: 420px; }
  .sboss-banner-title   { font-size: 54px; }
  .sboss-banner-sub     { font-size: 17px; }

  .sboss-intro          { padding: 60px 0 48px; }
  .sboss-intro-inner    { grid-template-columns: 1fr; gap: 32px; }
  .sboss-intro-title    { font-size: 34px; }
  .sboss-intro-body p   { font-size: 17px; }

  .sboss-stats          { padding: 40px 0; }
  .sboss-stats-inner    { flex-direction: column; gap: 32px; }
  .sboss-stat-divider   { width: 60px; height: 1px; }
  .sboss-stat-num       { font-size: 36px; }

  .sboss-stories        { padding: 60px 0; }
  .sboss-story,
  .sboss-story--reverse { grid-template-columns: 1fr; gap: 32px; margin-bottom: 72px; }
  .sboss-story--reverse .sboss-story-media { order: 0; }
  .sboss-story--reverse .sboss-story-copy  { order: 1; }
  .sboss-story-heading  { font-size: 28px; }
  .sboss-story-text     { font-size: 16px; }

  .sboss-features       { padding: 60px 0; }
  .sboss-features-title { font-size: 34px; margin-bottom: 40px; }
  .sboss-features-grid  { grid-template-columns: 1fr; gap: 36px; }


}

@media (max-width: 560px) {
  .sboss-banner-title   { font-size: 40px; }
  .sboss-eyebrow        { font-size: 11px; }
  .sboss-intro-title    { font-size: 28px; }
  .sboss-stat-num       { font-size: 30px; }
  .sboss-story-heading  { font-size: 24px; }
  .sboss-features-title { font-size: 28px; }

}

/* ============================================================
   ABOUT PAGE — Why Choose Sabre section
   ============================================================ */

.about-why {
  background: #fff;
  padding: 120px 0;
}

.about-why-header {
  max-width: 680px;
  margin-bottom: 80px;
}

/* The media row borrows support.php's grid but should read like the
   why_sabre split: no staggered bottom paddings, and 80px here plus
   the header's 80px margin gives the standard 160px split gap. */
.about-why .support-media-grid { margin-top: 80px; }
.about-why .support-media-left { padding-bottom: 0; }
.about-why .support-media-right { padding-bottom: 0; }

.about-why-eyebrow {
  display: block;
  font-family: "APK Galeria", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 20px;
}

.about-why-title {
  font-family: "APK Galeria", sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 24px;
}

.about-why-lead {
  font-family: "APK Galeria", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .about-why-title { font-size: 44px; }
}

@media (max-width: 768px) {
  .about-why            { padding: 72px 0; }
  .about-why-header     { margin-bottom: 48px; }
  .about-why-title      { font-size: 34px; }
  .about-why-lead       { font-size: 17px; }
}

@media (max-width: 480px) {
  .about-why-title  { font-size: 28px; }
}

/* ============================================================
   NEWS & EVENTS PAGE
   ============================================================ */

.news {
  padding: 0 0 100px;
  margin-top: 160px;
}

/* section heading — same pattern as the products section head */
.news-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 60px;
}
.news-title {
  /* T3 — matches the other section titles */
  font-family: "APK Galeria";
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: -0.96px;
}
.news-intro {
  max-width: 420px;
  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
}

/* search + sort toolbar */
.news-tools {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 32px;
}
.news-search,
.news-sort {
  /* T7 — flat fields matching the site language */
  font-family: "APK Galeria";
  font-size: 16px;
  font-weight: 400;
  line-height: 124%;
  color: var(--black, #000);
  background: #fff;
  border: 1px solid var(--black, #000);
  border-radius: 0;
  padding: 12px 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.news-search {
  width: 320px;
  max-width: 100%;
}
.news-search::placeholder { color: rgba(0, 0, 0, .45); }
.news-sort {
  cursor: pointer;
  background-color: var(--black, #000);
  color: #fff;
  font-weight: 600;
  padding-right: 42px;
  /* white chevron (appearance:none removes the native arrow) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: opacity .2s;
}
.news-sort:hover { opacity: .85; }
.news-sort option { background: #fff; color: var(--black, #000); font-weight: 400; }

/* shown only when a search has no matches */
.news-empty {
  /* T6 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-weight: 400;
  line-height: 124%;
  padding: 40px 0;
}
.news-empty.is-hidden { display: none; }

/* cards — 4 columns of white cards, same language as the product cards */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.news-card {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transform-origin: center bottom;
  transition: transform .35s ease;
}
.news-card:hover {
  transform: translateY(-12px);
  z-index: 2;
}
.news-card.is-hidden { display: none; }
.news-img {
  width: 100%;
  height: 350px;
  background-size: cover;
  background-position: center;
}
.news-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.news-date {
  /* T8 Caps — same as the LEARN MORE row */
  font-family: "APK Galeria";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%;
  letter-spacing: 0.192px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
  margin-bottom: 12px;
}
.news-card-title {
  /* T6 — matches .product-card h4 */
  font-family: "APK Galeria";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 24.8px */
  margin-bottom: 6px;
}
.news-card-desc {
  /* T7 — matches .product-card > p */
  font-family: "APK Galeria";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 124%; /* 19.84px */
  margin-bottom: 24px;
}
/* .learn is reused from the product cards (T8 caps + full-card
   clickable overlay); inside the news card just pin it to the bottom */
.news-card .learn { margin: auto 0 0; }

/* load more */
.news-more-wrap {
  text-align: center;
  margin-top: 60px;
}

/* --- News article (inside news/ folder) helpers --- */
/* Hero → content spacing: the first .platform-split inside
   .news-story supplies the standard 160px gap below the intro. */
.news--article {
  padding: 0;
}
.news--article .news-head {
  margin-bottom: 0;
}


/* ---- Responsive (same column steps as the index product row:
        4 -> 3 at 1100px -> 2 at 900px -> 1 at 560px) ---- */
@media (max-width: 1100px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .news { padding: 0 0 70px; }
  .news--article { padding: 0; }
  .news-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
  .news-title { font-size: 38px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-img { height: 260px; }
  .news-more-wrap { margin-top: 40px; }
}

@media (max-width: 560px) {
  .news-title { font-size: 30px; }
  .news--article { padding: 0; }
  .news-intro { font-size: 18px; }
  .news-tools { flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .news-search { width: 100%; }
  .news-grid { grid-template-columns: 1fr; gap: 24px; }
  .news-img { height: 300px; }
  .news-body { padding: 18px 20px 20px; }
}

/* ============================================================
   NARROW SPLIT SECTIONS — 1180px, 5/7 ratio
   Must stay LAST in the file so it wins on load order.
   ============================================================ */

:root {
  --max-split: 1180px;   /* visible content width */
  --split-gap: 40px;     /* tighter than the old 60px */
}

/* ---- 1. Cap the rows at 1180 and center them ---- */
.platform-split,
.story-list,
.about-split-grid,
.about-statement-grid {
  width: 100%;
  max-width: var(--max-split);
  margin-left: auto;
  margin-right: auto;
}

/* Marketplace wraps its content in .container, so cap that instead.
   +40px because .container is border-box with 20px padding each side. */
.marketplace > .container {
  max-width: calc(var(--max-split) + 40px);
}

/* ---- 2. 5/7 columns: image narrow, copy wide ---- */
.platform-split,
.story,
.support-media-grid,
.about-split-grid,
.about-statement-grid {
  grid-template-columns: 5fr 7fr;
  gap: var(--split-gap);
}

/* Flipped rows: swap the TRACKS, not just the order, or the image
   lands in the 7fr column and inverts the ratio. */
.story:nth-child(even),
.platform-split--reverse {
  grid-template-columns: 7fr 5fr;
}

/* About pages: image-first grids. The generic 5fr 7fr above would put
   their images in the narrower 5fr column, so set the correct ratio. */
.about-split-grid,
.about-statement-grid {
  grid-template-columns: 7fr 5fr;
}
.about-statement-grid {
  grid-template-columns: 5fr 7fr; /* copy first, image second */
}

/* ---- 3. Let the copy fill its column (1140 - 40 gap = 665px) ---- */
.platform-lead,
.story-text,
.about-statement-text {
  max-width: 665px;
}

/* ---- 4. Mobile: single column, ratio no longer applies ---- */
@media (max-width: 900px) {
  .platform-split,
  .story,
  .story:nth-child(even),
  .platform-split--reverse,
  .support-media-grid,
  .about-split-grid,
  .about-statement-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .platform-lead,
  .story-text,
  .about-statement-text {
    max-width: 100%;
  }
}

/* ============================================================
   SBOSS — MOBILE LAYOUT FIXES
   ============================================================ */
@media (max-width: 1024px) {
  /* The platform splits on sboss.php live inside .marketplace. Give them
     the same single-column treatment other product pages get at <=900px.
     Setting grid-template-columns to 1fr here (instead of relying on the
     later override) ensures the text column keeps a real, full-width row
     on every phone/tablet. */
  .marketplace .platform-split {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 90px;
  }
  /* Stack the white text column BELOW the image on phones, so the
     paragraph is never squeezed out of view. */
  .marketplace .platform-split .platform-text { order: 1; }
  .marketplace .platform-split .platform-img  { order: 0; }
  .marketplace .platform-split .platform-img img { height: auto; }
}

/* Full-width sections on mosaic/why-sabre product pages: the quote band
   (testimonial) follows the black how-it-works band on sboss. Give the
   band a bottom spacer so the white quote never slides up underneath it
   on narrow screens. */
@media (max-width: 560px) {
  .how-band { padding-bottom: 64px; }
}

/* Give the white quote band room after the black band, so it never
   overlaps with the dark section above it on any screen. */
.marketplace .how-band + .testimonial { margin-top: 0; }

/* ============================================================
   FULL-WIDTH SECTIONS on mosaic/why-sabre product pages
   The testimonial, showcase band, and architecture video sit inside
   .marketplace, whose container is capped at 1180px. These sections
   should break out to the full viewport width (matching the top-level
   sections on index.php) instead of staying trapped at 1180px.
   ============================================================ */
.marketplace .testimonial > .container,
.marketplace .showcase-band .container {
  max-width: none;
}
/* Architecture video: full-bleed white panel breaking out of the
   1180px marketplace container. */
.marketplace .why-arch {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}