:root {
  color-scheme: light;
  --bg: #eff6ff;
  --panel: #ffffff;
  --line: #dbe6f5;
  --text: #0f172a;
  --muted: #334155;
  --accent: #146ef5;
  --ink: #2a2a2a;
  --surface: #f3f8fe;
  --purple: #7214f5;
  --amber: #c37730;

  --font-base: 'Outfit', sans-serif;
  --font-regular: 'Switzer-Regular', sans-serif;
  --font-medium: 'Switzer-Medium', sans-serif;
  --font-thin: 'Switzer-Thin', sans-serif;
}

@font-face {
  font-family: 'Switzer-Medium';
  src: url('../assets/fonts/Switzer-Medium.woff2') format('woff2'),
    url('../assets/fonts/Switzer-Medium.woff') format('woff'),
    url('../assets/fonts/Switzer-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer-Regular';
  src: url('../assets/fonts/Switzer-Regular.woff2') format('woff2'),
    url('../assets/fonts/Switzer-Regular.woff') format('woff'),
    url('../assets/fonts/Switzer-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer-Thin';
  src: url('../assets/fonts/Switzer-Thin.woff2') format('woff2'),
    url('../assets/fonts/Switzer-Thin.woff') format('woff'),
    url('../assets/fonts/Switzer-Thin.ttf') format('truetype');
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-base);
  background: linear-gradient(180deg, var(--bg) 0%, #f8fbff 100%);
  color: var(--text);
}

body {
  min-height: 100vh;
}

/* Global type scale. All font sizes use rem against this root, so lowering it
   shrinks every font proportionally without touching px-based spacing/layout.
   16px -> 15px (~6% smaller). Revert by removing this rule. */
html {
  font-size: 90%;
}

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

/* Shared blue section heading */
.leads-heading,
.principles-heading,
.about-section-heading,
.about-journey-heading,
.about-leadership-heading,
.prod-section-heading,
.contact-reach-heading,
.home-section-heading,
.home-assoc-heading,
.prod-platforms-heading {
  color: var(--accent);
  font-size: 2.25rem;
  /* = 36px at the default 16px root; rem so mobile can scale it */
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.page-shell {
  width: 100%;
  background-color: #fff;
  /* clip horizontal overflow from full-bleed (100vw) sections without
     creating a scroll container, so the sticky navbar keeps working */
  overflow: clip;
}

.content-stack {
  display: grid;
  gap: 18px;
}

/* The navbar partial is injected into #site-nav. Without this, that wrapper
   div is exactly the navbar's height and clips the sticky child's travel,
   so the navbar scrolls away. display:contents removes the wrapper from
   layout, making .topbar a direct child of the full-height .page-shell. */
#site-nav {
  display: contents;
}

.topbar {
  border: 2px solid var(--line);
  background: var(--panel);
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 14px max(18px, calc((100vw - 1300px) / 2 + 18px));
  border-radius: 0;
  box-shadow: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: rgba(255, 255, 255, 0.96);
}

/* === GLASSY NAVBAR ============================================
   The glass is painted on a ::before pseudo-element rather than on .topbar
   itself. If .topbar had backdrop-filter, it would isolate the backdrop for
   its descendants, so the mobile dropdown menu (a child of .topbar) could not
   blur the page behind it. With the filter on ::before, .topbar is a plain
   ancestor and the dropdown's own backdrop-filter works the same as here. */
.topbar {
  background: transparent;
  /* border-bottom: 2px solid rgba(255, 255, 255, 0.4); */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* behind the bar's content, above the page */
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

/* Browsers without backdrop-filter keep a near-opaque background for legibility */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar::before {
    background: rgba(255, 255, 255, 0.95);
  }
}

/* === END GLASSY NAVBAR ===================================================== */

.brand {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo {
  width: auto;
  height: 28px;
  max-height: 28px;
  display: block;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
}

.nav-links a {
  color: var(--muted);
  font-weight: 600;
}

.nav-links a.active {
  color: var(--accent);
}

/* Hamburger button — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 250ms ease, opacity 200ms ease;
  transform-origin: center;
}

/* Animate hamburger → ✕ when open */
.topbar.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.topbar.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.topbar.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.hero-grid {
  width: 100vw;
  border-radius: 0;
}

.principles-grid {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.leads-section {
  width: 100vw;
  margin-top: 60px;
  padding: 0px 12px;
}

.leads-shell {
  width: min(1176px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 0px 20px;
}

.leads-stack {
  display: flex;
  flex-direction: column;
  /* gap: 40px; */
  margin-top: 80px;
}

.lead-row,
.lead-row-reverse {
  display: grid;
  align-items: center;
  gap: 57px;
}

.lead-row {
  grid-template-columns: 283px 1fr;
}

.lead-row-reverse {
  grid-template-columns: 1fr 283px;
}

.lead-media {
  position: relative;
  width: 283px;
  height: 283px;
  flex-shrink: 0;
}

.lead-accent {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: var(--accent);
  border-radius: 10px;
}

.lead-image {
  position: absolute;
  width: 180px;
  height: 180px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  object-fit: cover;
  z-index: 1;
}

.lead-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* .lead-title {
  margin: 0;
  color: var(--ink);
  font-size: 36px;
  line-height: 1.2;
  font-weight: 600;
}

.lead-text {
  font-family: var(--font-regular);
  margin-top: 10px;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1.6;
  font-weight: 400;
  text-align: justify;
} */

.lead-title {
  margin: 0;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1.2;
}

.lead-text {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400;
  text-align: justify;
}

@media (max-width: 1080px) {

  .lead-row,
  .lead-row-reverse {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: start;
    text-align: left;
  }

  .leads-stack {
    display: flex;
    flex-direction: column;
    /* gap: 40px; */
    margin-top: 30px;
  }

  .lead-media {
    margin: 0;
    margin-top: 60px;
    width: 130px;
    height: 130px;
  }

  .lead-media .lead-accent {
    width: 113px;
    height: 113px;
    display: none;
  }

  .lead-media .lead-image {
    width: 127px;
    height: 127px;
  }

  .lead-text {
    text-align: left;
  }

  /* Media always appears before copy, even in reversed rows */
  .lead-row-reverse .lead-media {
    order: -1;
  }

}

.principles-shell {
  width: 80vw;
  position: relative;
  min-height: 556px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  overflow: hidden;
  padding: 40px 18px 40px;
}

.principles-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  width: min(1320px, calc(100% - 48px));
  margin: 40px auto 0;
}

.principle-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.principle-icon {
  width: 80px;
  height: 80px;
}

.principle-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1.2;
}

.principle-card p {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 400;
  text-align: justify;
}

@media (max-width: 1200px) {
  .principles-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {

  /* Mobile: no carousel. The shell drops its surface panel and each card
     becomes its own surface-colored panel, stacked in a single column. */
  .principles-shell {
    background: transparent;
    padding: 0;
  }

  .principles-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    margin-top: 24px;
  }

  .principle-card {
    background: var(--surface);
    border-radius: 24px;
    padding: 28px 24px;
  }

  .principle-card img {
    width: 60px;
    height: 60px;
  }

  ;
}

.hero-stage {
  min-height: 750px;
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  padding: 20px 18px;

  background: #070d18;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 24, 0.55);
  z-index: 1;
}

.hero-content {
  width: min(1100px, 100%);
  display: grid;
  justify-items: center;
  gap: 18px;
  color: white;
  margin-top: 22px;
  position: relative;
  z-index: 2;
}

.hero-main-title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 3.125rem);
  font-weight: 600;
  line-height: 1.06;
  color: #fff;
  justify-self: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-kicker,
.hero-summary {
  margin: 0;
  color: #dbe9ff;
}

.hero-kicker {
  font-family: var(--font-medium);
  letter-spacing: 0.05em;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--accent);
  font-weight: 700;
}

.hero-summary {
  font-family: var(--font-medium);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin-top: 25px;
  color: #fff;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 28px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  padding: 14px 22px;
  font-weight: 500;
  font-size: 1.25rem;
  text-decoration: none;
  transition: transform 160ms ease;
}

.hero-btn:hover {
  transform: translateY(-1px);
}

.hero-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 28px rgba(20, 110, 245, 0.35);
}

.hero-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}

.hero-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 18px;
  width: 100%;
  margin-top: 14px;
}

.hero-feature-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
}

.hero-feature-card p {
  margin: 0;
  color: var(--bg);
  font-family: var(--font-regular);
  font-size: 1.35rem;
  line-height: 1.35;
}

.hero-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
}

@media (max-width: 760px) {

  .hero-icon {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    margin-left: 10px;
    margin-bottom: 2px;
  }

  .page-shell {
    padding-top: 0;
  }

  .topbar {
    position: sticky;
    top: 0;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    /* dropdown panel */
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    /* same glassy background as the navbar */
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    border-radius: 0 0 20px 20px;
    padding: 6px 0 12px;
    z-index: 999;
    /* hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
  }

  /* Browsers without backdrop-filter keep a near-opaque panel for legibility */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-links {
      background: rgba(255, 255, 255, 0.95);
    }
  }

  .topbar.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-links a {
    padding: 14px 22px;
    font-size: 1.25rem;
    color: var(--muted);
    border-bottom: 1px solid #f0f4fa;
    width: 100%;
  }

  .nav-links a:last-child {
    border-bottom: none;
  }

  .nav-links a.active {
    color: var(--accent);
    font-weight: 700;
  }

  /* Hero mobile */
  .hero-stage {
    min-height: 0;
    padding: 72px 20px 52px;
  }

  .hero-main-title {
    font-size: clamp(1.9rem, 7vw, 2.5rem);
    font-weight: 600;
  }

  .hero-summary {
    font-size: 1.05rem;
    margin-top: 20px;
  }

  .hero-feature-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-feature-card {
    grid-template-columns: 40px 1fr;
    text-align: left;
    justify-items: start;
    gap: 12px;
    padding: 10px 0;
  }

  .hero-feature-card p {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    width: 100%;
  }

  .hero-btn {
    width: 100%;
    max-width: 320px;
    font-size: 1rem;
    padding: 13px 28px;
  }
}

@media (max-width: 480px) {
  .hero-main-title {
    font-size: 1.75rem;
  }

  .hero-kicker {
    font-size: 0.85rem;
  }
}

/* ─── About Page ─────────────────────────────────────────── */

.about-shell {
  width: 80vw;
  margin: 0 auto;
}

.about-section-heading {
  text-align: left;
}

.about-body-text {
  font-family: var(--font-regular);
  margin-top: 30px;
  font-size: 1.5rem;
  color: #000;
  line-height: 1.5;
  text-align: justify;
}

.about-body-text-mv {
  font-family: var(--font-regular);
  margin-top: 10px;
  font-size: 1.5rem;
  color: #000;
  line-height: 1.5;
  text-align: justify;
}

/* Journey */
.about-journey {
  width: 100vw;
  display: flex;
  justify-content: center;
}

.about-journey-shell {
  width: 80vw;
  position: relative;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 60px;
}

.about-journey-body {
  display: flex;
  flex-direction: column;
  padding: 0px 40px;
}

.about-journey-body p {
  font-family: var(--font-regular);
  font-size: 1.5rem;
  color: #000;
  line-height: 1.5;
  text-align: justify;
}

/* Championing */
.about-championing {
  width: 100vw;
  display: flex;
  justify-content: center;
  padding: 48px 0;
  margin-top: 10px;
}

.about-championing-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0px;
}

.about-championing-text {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.about-tagline {
  margin: 0;
  font-size: 1.875rem;
  /* = 30px at the default 16px root; rem so mobile can scale it */
  font-weight: 500;
  color: var(--ink);
  text-align: left;
}

.about-championing-image img {
  width: 600px;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Mission & Vision */
.about-mv-section {
  padding: 24px 0;
  margin-top: 60px;
}

.about-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.about-mv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 40px 32px;
  border-radius: 24px;
}

.about-mv-icon {
  width: 94px;
  height: 94px;
  object-fit: contain;
}

/* CTA */
.about-cta-section {
  margin-top: 20px;
  margin-bottom: 60px;
  padding: 40px 0;
}

.about-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.about-cta-inner h2 {
  text-align: center;
}

/* 
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  padding: 18px 32px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 10px 28px rgba(20, 110, 245, 0.3);
}

.about-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 110, 245, 0.4);
} */


.about-cta-btn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 110, 245, 0.4);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.about-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(20, 110, 245, 0.5);
}

/* Leadership */
.about-leadership-section {
  margin-top: 0px;
}

.about-leadership-heading {
  margin-bottom: 40px;
}

.about-leadership-group {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.about-person-row {
  width: 100%;
  display: grid;
  gap: 20px;
}

.about-person-row--3 {
  grid-template-columns: repeat(3, 1fr);
  width: 70%;
}

.about-person-row--4 {
  grid-template-columns: repeat(4, 1fr);
  width: 90%;
}

.about-person-card {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.about-person-photo-wrap {
  width: 100%;
  padding: 24px 24px 20px;
  display: flex;
  justify-content: center;
}

.about-person-photo-wrap--purple {
  background: rgba(114, 20, 245, 0.1)
}

.about-person-photo-wrap--blue {
  background: rgba(20, 110, 245, 0.1);
}

.about-person-photo-wrap--amber {
  background: rgba(195, 119, 48, 0.1);
}

.about-person-photo-wrap img {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: block;
}

.about-person-info {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  flex: 1;
}

.about-person-info--purple {
  background: rgba(114, 20, 245, 0.1);
}

.about-person-info--blue {
  background: rgba(20, 110, 245, 0.1);
}

.about-person-info--amber {
  background: rgba(195, 119, 48, 0.1);
}

.about-person-name {
  font-family: var(--font-medium);
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
}

.about-person-role {
  font-family: var(--font-medium);
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
}

.about-person-role--purple {
  color: var(--purple);
}

.about-person-role--blue {
  color: var(--accent);
}

.about-person-role--amber {
  color: var(--amber);
}

@media (max-width: 1100px) {
  .about-person-row--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-championing-inner {
    flex-direction: column;
  }

  .about-championing-text {
    padding: 0 20px;
  }

  .about-championing-image img {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .about-mv-grid {
    grid-template-columns: 1fr;
  }

  .about-person-row--3 {
    grid-template-columns: 1fr 1fr;
  }

  .about-person-row--4 {
    grid-template-columns: 1fr 1fr;
  }

  .about-body-text {
    font-size: 1.2rem;
  }

  .about-journey-body p {
    font-size: 1.2rem;
  }

  .about-section-heading {
    font-size: 1.8rem;
  }
}

@media (max-width: 560px) {

  .about-person-row--3,
  .about-person-row--4 {
    grid-template-columns: 1fr;
    width: 100%;
    justify-items: center;
  }

  .about-person-card {
    max-width: 320px;
  }

  .about-person-photo-wrap img {
    width: 100%;
    max-width: 180px;
    height: auto;
    aspect-ratio: 1;
  }

  .about-leadership-heading {
    font-size: 1.8rem;
  }

  .about-cta-section {
    padding: 32px 20px;
  }

  .about-cta-btn {
    font-size: 1.2rem;
    padding: 14px 24px;
    text-align: center;
  }
}

/* ─── Products Page ───────────────────────────────────────── */

.prod-shell {
  width: 80vw;
  padding: 48px 36px;
}

.prod-tot-shell {
  width: 80vw;
  background: var(--surface);
  border-radius: 40px;
  padding: 48px 24px;
}

.prod-section-heading {
  margin: 0 0 30px;
}

/* Hero */
.prod-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 414px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("/assets/products-hero-bg.webp") center/cover no-repeat;
}

.prod-hero-inner {
  text-align: center;
  padding: 60px 24px;
  width: 100vw;
}

.prod-hero-title {
  margin: 0 0 30px;
  font-size: clamp(2rem, 4vw, 3.125rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
}

.prod-hero-sub {
  font-family: var(--font-medium);
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.625rem);
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  max-width: 780px;
  margin: 0 auto;
}

/* TOT Products */
.prod-tot-section {
  margin-top: 0px;
  width: 100vw;
  display: flex;
  justify-content: center;

}

.prod-tot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.prod-tot-card {
  border-radius: 16px;
  padding: 28px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;

}

.prod-tot-card h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  text-transform: uppercase;
}

.prod-tot-card img {
  width: 50%;
  max-height: 160px;
  object-fit: contain;
  margin-top: 12px;
}

/* Our Products */
.prod-main-section {
  margin-top: 20px;
  width: 100vw;
  display: flex;
  justify-content: center;
}

.prod-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 56px 20px;
  /* border-bottom: 1px solid #dbe6f5; */
}

.prod-row:last-child {
  border-bottom: none;
}

.prod-row-reverse {
  direction: rtl;
}

.prod-row-reverse>* {
  direction: ltr;
}

.prod-text {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.prod-category {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0667c8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prod-name {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
}

/* Checklist features */
.prod-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prod-features li {
  font-family: var(--font-regular);
  position: relative;
  padding-left: 32px;
  font-size: 1.125rem;
  font-weight: 400;
  color: #000;
  line-height: 1.5;
}

.prod-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  background: url("/assets/light-blue-check.webp") center/contain no-repeat;
}

.prod-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  width: fit-content;
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 6px 18px rgba(20, 110, 245, 0.28);
}

.prod-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(20, 110, 245, 0.38);
}

.prod-visual {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-visual img {
  width: 80%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: contain;
}

.prod-visual-dark {
  background: var(--text);
  min-height: 280px;
  padding: 32px;
}

/* Platform Compatibility */
.prod-platforms-section {
  margin-bottom: 60px;
  margin-top: 60px;
  width: 100vw;
  display: flex;
  justify-content: center;

}

.prod-platform-shell {
  background: var(--surface);
  border-radius: 40px;
  padding: 48px 24px;
  width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .prod-platforms-heading {
  color: var(--accent);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
} */

.prod-platforms-heading span {
  color: #000;
  font-weight: 200;
  font-size: 1.5rem;
}

.prod-platforms-body {
  display: flex;
  flex-direction: column;
  padding: 0px 40px;
}

.prod-platforms-body p {
  font-family: var(--font-regular);
  font-size: 1.5rem;
  color: #000;
  line-height: 1.5;
  text-align: justify;
}

.prod-platform-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 40px;
}

.prod-platform-grid img {
  height: 40px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 160ms ease;
}

.prod-platform-grid img:hover {
  opacity: 1;
}

@media (max-width: 1024px) {
  .prod-tot-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .prod-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .prod-row-reverse {
    direction: ltr;
  }

  /* Visual always sits above the text on mobile */
  .prod-visual {
    order: -1;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {

  /* 2 x 2 grid on mobile */
  .prod-tot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
  }

  /* Shrink the cards so two fit comfortably per row */
  .prod-tot-card {
    padding: 18px 12px 14px;
    gap: 6px;
  }

  .prod-tot-card h3 {
    font-size: 1.15rem;
  }

  .prod-tot-card img {
    max-height: 100px;
    margin-top: 8px;
  }

  /* Tighter padding on mobile (desktop is 56px 20px) */
  .prod-row {
    padding: 28px 0px;
  }

  .prod-hero-title {
    font-size: 1.8rem;
  }

  /* .prod-platform-grid {
    display: none;
  } */
}

/* ─── Contact Page ────────────────────────────────────────── */

.contact-shell {
  width: 80vw;
}

/* Contact form section */
.contact-section {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

.contact-reach-heading {
  margin-top: 50px;
}

.contact-layout {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 60px;
  align-items: start;
}

/* Left info column */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 60px;
}

.contact-main-heading {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 700;
  color: #000;
  line-height: 1.15;
}

.contact-sub {
  margin: 0;
  font-size: 1.3rem;
  color: var(--muted);
}

.contact-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 48px;
  margin-top: 8px;
}

/* Opening hours and Registered Address stack in the left column */
.contact-detail-item:nth-child(n + 3) {
  grid-column: 1;
}

.contact-detail-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.contact-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.contact-detail-icon svg {
  width: 28px;
  height: 28px;
}

.contact-detail-label {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.contact-detail-value {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
}

.contact-detail-value a {
  color: var(--text);
  text-decoration: none;
}

.contact-detail-value a:hover {
  color: var(--accent);
}

/* Right form card */
.contact-form-card {
  background: #eef4fe;
  border: 1px solid #dfe9fa;
  border-radius: 24px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

.contact-form-sub {
  margin: 0 0 24px;
  font-size: 1rem;
  color: #475569;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-field label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.req {
  color: #ef4444;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e6edf9;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #94a3b8;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 110, 245, 0.12);
}

.contact-field textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  padding: 18px 36px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  align-self: flex-start;
  width: auto;
  margin-top: 16px;
  transition: transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 14px 34px rgba(20, 110, 245, 0.5);
}

.contact-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(20, 110, 245, 0.6);
}

/* Scytale Advantage */
.contact-advantage-section {
  border-radius: 40px;
  overflow: hidden;
  position: relative;
}

.contact-advantage-inner {
  position: relative;
  background:
    linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
    url("/assets/contact-advantage-bg.png") center/cover no-repeat;
  padding: 56px max(24px, calc((100% - 1280px) / 2 + 24px));
  border-radius: 40px;
}

.contact-advantage-heading {
  margin: 0 0 40px;
  font-size: 2.25rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.contact-advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.contact-adv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.contact-adv-icon {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  margin-bottom: 4px;
}

.contact-adv-card h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
}

.contact-adv-card p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

/* Trending in Media */
.contact-media-section {
  padding: 16px 0 8px;
}

.contact-media-heading {
  margin: 0 0 28px;
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
}

.contact-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.contact-media-card {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.contact-media-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.contact-media-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.contact-media-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-media-title {
  margin: 0;
  padding: 16px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

/* CTA */
.contact-cta-section {
  padding: 16px 0 32px;
}

.contact-cta-inner {
  display: flex;
  justify-content: center;
}

.contact-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 16px 36px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 110, 245, 0.3);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.contact-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 110, 245, 0.4);
}

@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-advantage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .contact-media-grid {
    grid-template-columns: 1fr;
  }

  .contact-advantage-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contact-info {
    padding: 0 20px;
    margin-top: 16px;
  }

  .contact-reach-heading {
    display: none;
  }

  .contact-main-heading {
    margin-top: 0;
  }

  .contact-details {
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 36px;
  }

  /* Let all items flow two-per-row on mobile */
  .contact-detail-item:nth-child(n + 3) {
    grid-column: auto;
  }

  .contact-main-heading {
    font-size: 2rem;
  }

  .contact-submit-btn {
    align-self: center;
  }
}

/* ─── Site Footer ─────────────────────────────────────────── */

.site-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--surface);
  padding: 52px max(24px, calc((100vw - 1280px) / 2 + 24px)) 20px;
  margin-top: 32px;
}

.site-footer-body {
  display: grid;
  grid-template-columns: 2fr 1fr 1.6fr 2fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 36px;
}

/* Brand column */
.sfooter-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sfooter-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.sfooter-logo {
  width: 44px;
  height: auto;
}

.sfooter-brand-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.04em;
}

.brand-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.04em;
}

.sfooter-tagline {
  font-family: var(--font-regular);
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
}

.sfooter-desc {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
}

/* Nav and products columns */
.sfooter-col {
  font-family: var(--font-regular);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sfooter-col a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  line-height: 1.2;
  transition: color 140ms ease;
}

.sfooter-col a.active {
  color: var(--accent);
  font-family: var(--font-medium);
  font-weight: 800;
}

.sfooter-col a:hover {
  color: var(--accent);
}

/* Contact column */
.sfooter-contact {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-style: normal;
}

.sfooter-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sfooter-contact-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}

.sfooter-contact-row span,
.sfooter-contact-row a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  line-height: 1.5;
}

.sfooter-contact-row a:hover {
  color: var(--accent);
}

/* Separator */
.site-footer-rule {
  width: 150%;
  border: none;
  border-top: 1px solid #dbe6f5;
  margin: 0 0 22px -25%;
}

/* Bottom bar */
.site-footer-bottom {
  font-family: var(--font-thin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sfooter-social {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sfooter-social-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 8px;
  transition: color 140ms ease, background 140ms ease;
}

.sfooter-social-link:hover {
  color: var(--accent);
  background: rgba(20, 110, 245, 0.08);
}

.sfooter-copy {
  font-family: var(--font-regular);
  margin: 0;
  font-size: 0.95rem;
  /* font-weight: 200; */
  color: var(--text);
}

.sfooter-copy-link:hover {
  color: var(--accent);
  /* text-decoration: underline; */
}

/* .sfooter-copy-link:hover {
  text-decoration: none;
} */

/* Privacy Policy page */
.privacy-section {
  width: 100%;
  margin: 60px 0 80px;
}

.privacy-shell {
  width: min(900px, 92vw);
}

.privacy-heading {
  text-align: left;
  margin-bottom: 24px;
}

.privacy-intro,
.privacy-text {
  font-family: var(--font-regular);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 8px;
  text-align: justify;
}

.privacy-subheading {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 28px 0 8px;
}

.privacy-text a {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .privacy-section {
    margin: 32px 0 56px;
  }

  .privacy-heading {
    font-size: 1.75rem;
    /* = 28px at the default 16px root; rem so it scales with the mobile root */
  }

  .privacy-subheading {
    font-size: 1.2rem;
  }

  .privacy-intro,
  .privacy-text {
    font-size: 1.05rem;
  }
}

@media (max-width: 1024px) {
  .site-footer-body {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .site-footer-body {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  /* Brand spans the full width above the two columns */
  .sfooter-brand {
    grid-column: 1 / -1;
  }

  /* Hide the products column on mobile */
  #products-footer {
    display: none;
  }

  /* Nav and contact details sit side by side */
  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Hide social links on mobile */
  .sfooter-social {
    display: none;
  }
}

/* ─── Home Page ───────────────────────────────────────────── */

.home-shell {
  width: 80vw;
  min-height: 556px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  border-radius: 40px;
  overflow: hidden;
  padding: 40px 0px 0px 0px;
}

/* Our Technology */
.home-tech-section {
  width: 100vw;
  margin-top: 60px;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.home-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0px 10px;
  gap: 20px;
  margin-top: 30px;
  width: 100%;
  margin-inline: auto;
}

.home-tech-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
}

.home-tech-card-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.home-tech-card-title {
  font-family: var(--font-regular);
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.4;
  word-wrap: break-word;
}

.home-tech-card-desc {
  font-family: var(--font-regular);
  margin: 0;
  text-align: center;
  color: #6a6a6a;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
  word-wrap: break-word;
}

/* Full-width blue CTA bar */
.home-tech-cta-bar {
  background: var(--accent);
  margin-top: 60px;
  padding: 28px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 28px;
  border-bottom-left-radius: 28px;
}

.home-tech-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  text-decoration: none;
  transition: gap 150ms ease;
}

.home-tech-btn:hover {
  gap: 16px;
}

.text-arrow {
  margin-left: 6px;
}

/* Stats */
.home-stats-section {
  padding: 16px 30px;
  margin-top: 60px;
  width: 100vw;
  display: flex;
  justify-content: center;
}

.home-stats-grid {
  display: grid;
  width: 70vw;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.home-stat {
  border-radius: 16px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.home-stat-value {
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.home-stat-label {
  font-family: var(--font-regular);
  margin-top: 10px;
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.3;
}

/* CTA Banner */
.home-cta-banner {
  margin-top: 60px;
  width: 100vw;
  display: flex;
  justify-content: center;
}

.home-cta-inner {
  display: flex;
  width: 80vw;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  background: linear-gradient(135deg, #070d18 0%, #0d1f3c 50%, #070d18 100%);
  padding: 80px 24px;
  border-radius: 40px;
}

.home-cta-heading {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

.home-cta-desc {
  font-family: var(--font-regular);
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 1.375rem);
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

.home-cta-btn {
  margin: 0;
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 110, 245, 0.4);
  transition: transform 150ms ease, box-shadow 150ms ease;

/* 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  padding: 14px 22px;
  font-weight: 300;
  font-size: 1.25rem;
  text-decoration: none;
  transition: transform 160ms ease; */
}

.home-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(20, 110, 245, 0.5);
}

/* Associations marquee */
.home-assoc-section {
  width: 100vw;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 80px;
}

.home-assoc-carousel {
  /* border: 2px solid red; */
  overflow: hidden;
  margin-top: 60px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.home-assoc-track {
  width: 80vw;
  display: flex;
  gap: 40px;
  width: max-content;
  animation: assoc-scroll 28s linear infinite;
}

.home-assoc-track:hover {
  animation-play-state: paused;
}

@keyframes assoc-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.home-assoc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 130px;
  flex-shrink: 0;
}

.home-assoc-tile img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 12px;
}

.home-assoc-tile span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}

@media (max-width: 860px) {
  .home-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {

  /* Mobile: no carousel — stack the cards in a single column */
  .home-tech-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Mobile: shrink the association tiles */
  .home-assoc-tile,
  .home-assoc-tile img {
    width: 90px;
  }

  .home-assoc-tile img {
    height: 90px;
  }

  .home-assoc-tile span {
    font-size: 0.85rem;
  }

  /* Mobile: 2 x 2 grid sitting on a surface panel like the principles shell */
  .home-stats-grid {
    grid-template-columns: 1fr 1fr;
    width: 80vw;
    gap: 24px;
    background: var(--surface);
    border-radius: 40px;
    padding: 32px 18px;
  }

  /* Shrink the stat type so each cell fits within the panel */
  .home-stat {
    padding: 12px 8px;
  }

  .home-stat-value {
    font-size: 2.5rem;
  }

  .home-stat-label {
    font-size: 1rem;
    margin-top: 6px;
  }

  .home-tech-card-title {
    font-family: var(--font-medium);
    margin: 0;
    text-align: center;
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    word-wrap: break-word;
  }
}

/* === MOBILE TYPE SCALE (reversible) =======================================
   In this stylesheet rem is used exclusively for font-size, so lowering the
   root font-size shrinks all rem-based type proportionally on mobile without
   touching layout, spacing, or the desktop (web) view. Desktop is unchanged
   because this only applies at <=760px. Revert by deleting this block.
   (The previously px-based headings were converted to their exact rem
   equivalents so they ride this same lever.) */
@media (max-width: 760px) {
  html {
    font-size: 85%;
    /* 16px -> 14.4px: ~10% smaller type on mobile */
  }
}

/* === END MOBILE TYPE SCALE ================================================ */

/* === MOBILE HORIZONTAL PADDING ============================================
   On mobile the content shells widen from the desktop 80vw to 90vw, i.e. less
   side padding so content has more room on small screens. Placed last so it
   overrides earlier mobile width rules (e.g. the 2x2 stats grid). */
@media (max-width: 760px) {

  .principles-shell,
  .about-shell,
  .about-journey-shell,
  .prod-shell,
  .prod-tot-shell,
  .prod-platform-shell,
  .contact-shell,
  .home-shell,
  .home-cta-inner,
  .home-assoc-carousel,
  .home-stats-grid {
    width: 90vw;
  }
}

/* === END MOBILE HORIZONTAL PADDING ======================================== */