/* ============================================================
   Computer Instruments — Design System
   ============================================================ */

/* ── VVDS Fifties Expanded @font-face ───────────────── */
@font-face {
  font-family: 'VVDS Fifties';
  src: url('fonts/VVDS-Fifties-Exp-Reg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VVDS Fifties';
  src: url('fonts/VVDS-Fifties-Exp-Med.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VVDS Fifties';
  src: url('fonts/VVDS-Fifties-Exp-SBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VVDS Fifties';
  src: url('fonts/VVDS-Fifties-Exp-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ──────────────────────────────────── */
:root {
  /* Colors */
  --color-cream:   #fdfdf9;
  --color-dark:    #04080b;
  --color-red:     #ec473f;
  --color-coral:   #fd6a52;
  --color-gray:    #4b5155;
  --color-pink:    #fc8f7b;
  --color-peach:   #ffeee3;
  --color-peach-2: #ffe5d5;

  --gradient-red:   linear-gradient(to bottom, #fd6a52, #ec473f);
  --gradient-stat:  linear-gradient(to bottom, #ec473f 61.475%, #c42031 245.9%);
  --gradient-peach: linear-gradient(to bottom, #ffeee3, #ffe5d5);

  --shadow-brand:  -2px 2px 4px 0px rgba(252, 143, 123, 0.2);
  --shadow-strong: -2px 2px 4px 0px rgba(252, 143, 123, 0.3);

  /* Fonts */
  --font-display: 'VVDS Fifties', Cabin, sans-serif;
  --font-sans:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'Courier New', monospace;

  /* ── Fluid spacing (clamp: min, preferred-vw, max) ── */
  --px-section: clamp(24px, 11.67vw, 168px);   /* 168px at 1440 */
  --px-wide:    clamp(16px, 4.44vw,  64px);    /* 64px at 1440  */
  --py-section: clamp(56px, 8.89vw,  128px);   /* 128px at 1440 */
  --py-large:   clamp(72px, 13.33vw, 192px);   /* 192px at 1440 */

  /* ── Fluid typography ─────────────────────────────── */
  --fs-display-xl:  clamp(30px, 4.44vw,  64px);   /* 64px headings   */
  --fs-display-lg:  clamp(24px, 3.33vw,  48px);   /* 48px headings   */
  --fs-display-md:  clamp(20px, 2.5vw,   36px);   /* 36px card label */
  --fs-subhead-lg:  clamp(17px, 2.22vw,  32px);   /* 32px subheading */
  --fs-subhead-md:  clamp(15px, 1.94vw,  28px);   /* 28px subheading */
  --fs-body:        clamp(15px, 1.67vw,  24px);   /* 24px body       */
  --fs-small:       clamp(14px, 1.39vw,  20px);   /* 20px small      */
  --fs-stat:        clamp(48px, 6.67vw,  96px);   /* 96px stat nums  */
  --fs-stat-huge:   clamp(60px, 16.67vw, 240px);  /* 240px "47"      */
  --fs-stat-label:  clamp(20px, 3.33vw,  48px);   /* 48px "Years of" */
  --fs-footer-giant:clamp(32px, 10.42vw, 150px);  /* 150px bottom    */
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--color-dark);
  color: var(--color-dark);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* avoids scroll container that breaks sticky */
}

#app {
  background-color: var(--color-cream);
}

img     { display: block; max-width: 100%; }
a       { color: inherit; text-decoration: none; }
button  { cursor: pointer; font-family: inherit; }
p       { margin: 0; }

/* ── Typography helpers ─────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

.text-gradient {
  background: var(--gradient-stat);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  border-radius: 25px;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s, filter 0.2s;
  border: none;
}

.btn-outline {
  background: var(--color-cream);
  border: 2px solid var(--color-red);
  color: var(--color-dark);
  font-weight: 500;
  box-shadow: var(--shadow-brand);
}
.btn-outline:hover { background: linear-gradient(to bottom, rgba(253, 106, 82, 0.13), rgba(236, 71, 63, 0.2)); }

.btn-outline-dark {
  background: var(--color-dark);
  border: 2px solid var(--color-red);
  color: var(--color-cream);
  font-weight: 500;
}
.btn-outline-dark:hover { background: linear-gradient(to bottom, rgba(253, 106, 82, 0.22), rgba(236, 71, 63, 0.32)); }

.btn-gradient {
  background: var(--gradient-red);
  color: var(--color-cream);
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}
.btn-gradient:hover { background: linear-gradient(to bottom, #ffb09a, #fd7060); }

.btn-gradient-no-shadow {
  background: var(--gradient-red);
  color: var(--color-cream);
  font-weight: 600;
}
.btn-gradient-no-shadow:hover { background: linear-gradient(to bottom, #ffb09a, #fd7060); }

.btn-solid-dark {
  background: var(--color-dark);
  color: var(--color-cream);
  font-weight: 600;
}
.btn-solid-dark:hover { background: var(--color-cream); color: var(--color-dark); }

.btn-solid-red {
  background: var(--color-red);
  color: var(--color-cream);
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}
.btn-solid-red:hover { background: var(--color-coral); }

.btn-peach {
  background: #ffe8da;
  border: 2px solid var(--color-red);
  color: var(--color-dark);
  font-weight: 500;
  box-shadow: var(--shadow-strong);
  transition: opacity 0.2s, background-color 0.2s, filter 0.2s;
}
.btn-peach:hover { background: linear-gradient(to bottom, #ffb09a, #fd7060); color: var(--color-cream); }

.btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding-top: 24px;
}

/* ── Header ─────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--px-wide);
  width: 100%;
}

.site-header .logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.site-header .logo-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.67vw, 24px);
  letter-spacing: 0.48px;
  color: var(--color-dark);
  line-height: 1.45;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.67vw, 24px);
  font-size: clamp(13px, 1.11vw, 16px);
  letter-spacing: -0.08px;
  flex-shrink: 0;
}

.site-header nav a {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-dark);
  transition: color 0.2s;
  white-space: nowrap;
}
.site-header nav a:hover { color: var(--color-red); }

.site-header .phone {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-red);
  white-space: nowrap;
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
}

/* ── Hero ────────────────────────────────────────────── */
.hero-section {
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px var(--px-wide);
  width: 100%;
}

/* Fluid container: uses aspect-ratio so all children can use % positioning */
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1312px;
  aspect-ratio: 1312 / 706;
}

.hero-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55.52%;         /* 392/706 */
  border-radius: clamp(8px, 1.04vw, 15px);
  overflow: hidden;
  box-shadow: var(--shadow-brand);
}

.hero-card img {
  position: absolute;
  width: 100%;
  height: 235.29%;
  top: -11.86%;
  left: 0.03%;
  object-fit: cover;
  max-width: none;
}

.hero-panel {
  position: absolute;
  width: 40.09%;          /* 526/1312 */
  height: 48.73%;         /* 344/706  */
  top: 24.22%;            /* 171/706  */
  border-radius: clamp(8px, 1.04vw, 15px);
  overflow: hidden;
}

.hero-panel-left  { left: 8.08%;  }  /* 106/1312 */
.hero-panel-right { left: 51.83%; }  /* 680/1312 */

.hero-panel img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.hero-panel-left img {
  width: 100.17%;
  height: 191.41%;
  top: -71.35%;
  left: -0.09%;
  transform: scaleX(-1);
}

.hero-panel-right img {
  width: 157.61%;
  height: 112.71%;
  left: -37.71%;
  top: -6.38%;
}

.hero-blend {
  position: absolute;
  inset: 0;
  border-radius: clamp(8px, 1.04vw, 15px);
  opacity: 0.92;
}
.hero-blend-red  { background: #fd6a52; mix-blend-mode: color; }
.hero-blend-dark { background: #04080b; mix-blend-mode: overlay; }

.hero-text {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  color: var(--color-dark);
  line-height: 1;
  font-family: var(--font-display);
}
.hero-text-sub   { top: 82.15%; font-size: var(--fs-display-lg); font-weight: 400; }
.hero-text-title { top: 90.93%; font-size: var(--fs-display-xl); font-weight: 700; }

/* ── Logo Bar ────────────────────────────────────────── */
/* ── Partner logo marquee ────────────────────────────── */
.logo-marquee-wrap {
  width: 100%;
  overflow: hidden;
  padding: clamp(32px, 4.44vw, 64px) 0;
  /* soft fade masks at the edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.56vw, 80px);
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
  animation-play-state: paused; /* held until SVGs load — see window.load script */
}
.logo-marquee-track.is-loaded {
  animation-play-state: running;
}


.logo-marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.logo-marquee-item img {
  object-fit: contain;
  height: clamp(32px, 4.65vw, 67px);
  width: auto;
  max-width: 280px;
  opacity: 0.85;
}

.logo-marquee-item--complex .complex-logo {
  position: relative;
  width: clamp(160px, 23.4vw, 337px);
  height: clamp(32px, 4.65vw, 67px);
}

.complex-logo .ss-letter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.85;
}

.complex-logo .ss-swoosh {
  position: absolute;
  opacity: 0.85;
}
.complex-logo .ss-swoosh-1 { left: 6.93%; top: 0;      width: 9.85%; height: 40.10%; }
.complex-logo .ss-swoosh-2 { left: 0.27%; top: 0;      width: 6.21%; height: 33.42%; }
.complex-logo .ss-swoosh-3 { left: 0;     top: 29.26%; width: 8.08%; height: 35.44%; }

/* ── Section: dark CTA card ─────────────────────────── */
.section-dark-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--py-section) var(--px-section);
  width: 100%;
}

.section-dark-cta .card {
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: clamp(48px, 6.94vw, 100px) clamp(16px, 2.01vw, 29px);
  border-radius: 15px;
  box-shadow: var(--shadow-brand);
  width: 100%;
}

/* ── Section: two-column ────────────────────────────── */
.section-two-col {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 4.44vw, 64px);
  padding: var(--py-section) var(--px-section);
  width: 100%;
}

.section-two-col .col-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.22vw, 32px);
}

/* Responsive illustration columns */
.illus-col {
  flex-shrink: 0;
}
.illus-archway {
  width: clamp(260px, 35.83vw, 516px);
  aspect-ratio: 516 / 593;
}
.illus-ai {
  width: clamp(260px, 35.83vw, 516px);
  aspect-ratio: 516 / 627;
}
.illus-archway img,
.illus-ai img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Stats Photo Section ─────────────────────────────── */
.stats-photo-section {
  position: relative;
  width: 100%;
}

.stats-photo-section .photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;    /* 1440/960 = 3/2 */
  min-height: 300px;
  overflow: hidden;
}

.stats-photo-section .photo-wrap > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.stats-photo-section .photo-overlay {
  position: absolute;
  inset: 0;
  background: #d9d9d9;
  mix-blend-mode: color;
}

.stats-photo-section .stat-block {
  position: absolute;
  left: clamp(16px, 4.24vw, 61px);
  top: 63.75%;            /* 612/960 — scales with photo-wrap height */
  width: 50%;
  color: var(--color-cream);
  display: flex;
  flex-direction: column;
}

.stat-big-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-stat-huge);
  line-height: 1;
  text-shadow: -2px 2px 2px rgba(0,0,0,0.1);
}

.stat-big-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-stat-label);
  line-height: 1.4;
  text-shadow: -2px 2px 2px rgba(0,0,0,0.15);
  white-space: nowrap;
}

.photo-credit {
  padding: 8px var(--px-wide);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-gray);
  line-height: 1.4;
}
.photo-credit a { text-decoration: underline; }

/* ── Numbers Section ─────────────────────────────────── */
.numbers-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(40px, 7.22vw, 104px);
  padding: var(--py-large) var(--px-wide);
  width: 100%;
}

.numbers-section .stat-item {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 1.4;
  white-space: nowrap;
}

.stat-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--color-gray);
  text-align: center;
  line-height: 1.4;
}

/* ── Success Section ────────────────────────────────── */
.success-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: var(--py-large) var(--px-section);
  background: var(--gradient-peach);
  width: 100%;
}

/* ── Case Study image ────────────────────────────────── */
.cs-image-wrap {
  position: relative;
  flex-shrink: 0;
  width: clamp(240px, 35.83vw, 516px);
  aspect-ratio: 516 / 483;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-brand);
}

.cs-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-image-wrap .img-overlay {
  position: absolute;
  inset: 0;
  background: #04080b;
  mix-blend-mode: color;
}

/* ── Light CTA Section ──────────────────────────────── */
.light-cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--py-section) var(--px-section);
  width: 100%;
}

.light-cta-section .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: clamp(48px, 6.94vw, 100px) clamp(16px, 2.01vw, 29px);
  border-radius: 15px;
  width: 100%;
}

/* ── Feature Cards ───────────────────────────────────── */
.feature-cards-section {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: clamp(20px, 3.82vw, 55px);
  padding: clamp(32px, 4.44vw, 64px) var(--px-wide) var(--py-large);
  width: 100%;
}

.feature-card {
  flex: 1;
  min-width: min(280px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: clamp(32px, 3.47vw, 50px) 25px clamp(24px, 2.08vw, 30px);
  border-radius: 15px;
  background: var(--gradient-red);
  box-shadow: var(--shadow-brand);
}

.feature-card img {
  width: clamp(160px, 20.83vw, 300px);
  height: clamp(160px, 20.83vw, 300px);
  object-fit: contain;
}

.feature-card-label {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  color: var(--color-cream);
  text-align: center;
  line-height: 1;
  font-weight: 400;
}

/* ── Join Section ────────────────────────────────────── */
.join-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: clamp(56px, 8.82vw, 127px) var(--px-section);
  background: var(--gradient-red);
  width: 100%;
}

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 4.44vw, 64px);
  width: 100%;
}

.footer-logo-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.footer-logo-row .logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo-row .logo-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.67vw, 24px);
  letter-spacing: 0.48px;
  color: var(--color-cream);
  line-height: 1.45;
}

.footer-content-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: clamp(24px, 2.22vw, 32px);
  padding-left: clamp(0px, 3.61vw, 52px);
  margin-top: 16px;
}

.footer-tagline {
  flex: 2;
  min-width: min(280px, 100%);
}

.footer-tagline p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--color-cream);
  line-height: 1.4;
}

.footer-nav-wrap {
  flex: 1;
  display: flex;
  gap: clamp(24px, 4.44vw, 64px);
  align-items: flex-start;
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
}

.footer-nav-col a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--color-cream);
  line-height: 1.5;
  transition: color 0.2s;
}
.footer-nav-col a:hover { color: var(--color-pink); }

.footer-copyright-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(32px, 4.44vw, 64px);
}

.footer-copyright-row p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(12px, 1.11vw, 16px);
  color: var(--color-pink);
  text-align: center;
  line-height: 1.4;
  width: 100%;
}

.footer-copyright-row a {
  text-decoration: underline;
  color: var(--color-pink);
}
.footer-copyright-row a:hover { opacity: 0.7; }

/* ── Bottom Footer ───────────────────────────────────── */
.bottom-footer {
  background: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 8.89vw, 128px) var(--px-wide) clamp(32px, 4.44vw, 64px);
  width: 100%;
}

.bottom-footer-text {
  font-family: var(--font-display);
  font-size: var(--fs-footer-giant);
  font-weight: 400;
  color: var(--color-cream);
  text-align: center;
  line-height: 0.7;
  letter-spacing: -0.02em;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════ */

/* ── Tablet landscape and below (≤ 1024px): stack two-col */
@media (max-width: 1024px) {
  .section-two-col {
    flex-direction: column;
    align-items: center;
  }

  .illus-archway,
  .illus-ai {
    display: none;
  }

  .cs-image-wrap {
    width: min(480px, 100%);
    flex-shrink: unset;
  }
}

/* ── Two-card zone: 3rd card wraps but 2 still fit (641px–1006px) */
@media (max-width: 1006px) and (min-width: 641px) {
  .feature-cards-section {
    justify-content: center;
  }

  .feature-card {
    flex: 1 1 280px;
    max-width: 400px;
  }

  .feature-card:nth-child(3) {
    display: none;
  }
}

/* ── Tablet portrait and below (≤ 768px) */
@media (max-width: 768px) {
  .site-header nav .phone {
    display: none; /* phone number hidden on mobile */
  }

  .logo-marquee-track {
    gap: 40px;
  }

  .numbers-section {
    gap: 32px;
  }

  .numbers-section .stat-item {
    min-width: 140px;
  }

  .footer-content-row {
    flex-direction: column;
  }

  .footer-nav-wrap {
    gap: 32px;
  }

  /* Center button rows on narrow CTAs */
  .section-dark-cta .btn-row,
  .light-cta-section .btn-row,
  .join-section .btn-row {
    justify-content: center;
  }
}

/* ── Mobile (≤ 640px) */
@media (max-width: 640px) {
  .site-header nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .site-header {
    padding: 16px 20px;
  }

  .hero-text-sub,
  .hero-text-title {
    /* ensure text doesn't overflow on very small screens */
    font-size: clamp(14px, 4.5vw, 30px);
  }

  .feature-cards-section {
    flex-direction: column;
    padding-left:  clamp(72px, 18vw, 120px);
    padding-right: clamp(72px, 18vw, 120px);
  }

  .feature-card:nth-child(3) {
    display: flex; /* restore 3rd card in single-column layout */
  }

  .logo-marquee-item img {
    max-height: 36px;
  }

  .logo-marquee-item--complex .complex-logo {
    width: 160px;
    height: 36px;
  }
}