/* =========================================================
   CarbonAI — Landing page (built from Figma: MainLanding)
   ========================================================= */

:root {
  --teal: #397f86;
  --teal-dark: #2f696f;
  --teal-soft: #d2e5e6;
  --amber: #e7a33c;
  --cream: #fffbf4;
  --ink: #111827;
  --body: #374151;
  --muted: #6b7280;
  --line: #d1d5db;
  --line-soft: #e0ddd7;
  --bg: #f5f9f9;
  --bg-alt: #f4f3f6;
  --card: #ffffff;
  --footer: #3f7c82;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
  /* Motion — values extracted from the Figma prototype's Smart Animate transitions */
  --cta1-dur: 1.16s;  /* CTA_Type1 (hero filled) hover */
  --cta1-ease: linear(
    0, 0.24 8.6%, 0.61 17.2%, 0.86 25.9%, 0.98 34.5%,
    1.02 43.1%, 1.024 51.7%, 1.015 60.3%, 1.006 69%, 1.002 77.6%, 1
  ); /* spring: mass 1, stiffness 75.6, damping 13.2 */
  --cta2-dur: 1.25s;  /* CTA_Type2 / TertiaryCTA (outline) hover */
  --cta2-ease: cubic-bezier(0.22, 1, 0.36, 1); /* "Slow" — smooth, no overshoot */
  --container: 1440px;
  --gutter: 80px;
  /* Above-the-fold layout — FINAL RULE (zoom bands are for this display, where
     100% zoom == 585px viewport, so 90% == 650px and 50% == 1170px):
       • >= 90% zoom (viewport <= 690px cut-off): header + hero fill the screen;
         the brands strip sits just below the fold. The hero gets the whole
         remaining height so the copy isn't cramped at high zoom. (media query below)
       • 50%-<90% zoom (viewport 690-1170px): header + hero + brands fill the
         screen, brands anchored to the bottom of the fold. (--hero-h here)
       • < 50% zoom (viewport > 1170px): hero caps at --hero-h-max, normal flow.
     --brands-h = 34px logo + 44px padding top/bottom. */
  --header-h: 76px;
  --brands-h: 122px;
  /* Upper cap = the hero height at exactly 50% zoom, the point the fill is
     allowed to reach. Viewport at 50% is 2x the 100%-zoom height (585 -> 1170),
     minus header + brands. Past 50% zoom the hero holds here instead of
     ballooning. Formula: (2 * innerHeight_at_100%) - --header-h - --brands-h. */
  --hero-h-max: 972px;
  /* 50%-90% band: hero fills what's left after header + brands, floored so it
     never drops below its own copy, capped by --hero-h-max below 50% zoom. */
  --hero-h: clamp(380px, calc(100vh - var(--header-h) - var(--brands-h)), var(--hero-h-max));
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 18px 40px rgba(17, 24, 39, 0.08);
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* Utility: toggle visibility of elements not yet ready to ship.
   Remove `is-hidden` from an element's class list to reveal it. */
.is-hidden { display: none !important; }

/* The `hidden` attribute must win over element `display` rules (e.g. the
   cookie tabs/header use display:flex, which would otherwise override the
   UA [hidden] rule and leak the tabs into the compact view). */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Offset in-page jumps so the sticky 76px header clears the section, without
   over-scrolling — the sections already carry top padding, so a small margin
   is enough. (#about is this branch's id for the "Why us" section.) */
#capabilities, #about, #problem { scroll-margin-top: 20px; }
/* Footer's top padding is less than the 76px header, so it needs a larger
   offset for the "Request a demo" heading to sit fully in view. */
#footer { scroll-margin-top: 76px; }

body {
  margin: 0;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: var(--body);
  background: var(--card);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  /* guard against any stray horizontal overflow on small screens;
     `clip` (not `hidden`) so it never breaks the sticky header */
  overflow-x: clip;
}

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

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

.section-title {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  --arw: 28px;        /* arrow-circle diameter */
  --arw-edge: 13px;   /* gap from the circle to the button edge */
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  /* Reserve room on BOTH ends so the traveling arrow never overlaps the label */
  padding: 13px calc(var(--arw) + var(--arw-edge) + 14px);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease;
  white-space: nowrap;
}

/* Arrow circle is absolutely placed so it can glide from one end to the other */
.btn .arrow {
  position: absolute;
  top: 50%;
  left: var(--arw-edge);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--arw);
  height: var(--arw);
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  padding-bottom: 2px;
  transition: left 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* On hover the arrow slides across to the right end (matches the Figma variant) */
.btn:hover .arrow { left: calc(100% - var(--arw) - var(--arw-edge)); }

/* Filled CTA (hero): teal -> darker teal; the arrow circle fills solid white.
   Timing matches the Figma spring (CTA_Type1, on hover). */
.btn-primary,
.btn-primary .arrow {
  transition-duration: var(--cta1-dur);
  transition-timing-function: var(--cta1-ease);
}
.btn-primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.btn-primary .arrow { border-color: rgba(255, 255, 255, 0.75); }
.btn-primary:hover {
  background: #28585d;
  border-color: #28585d;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover .arrow {
  background: #fff;
  color: var(--teal);
  border-color: #fff;
}

/* Outline CTA: transparent -> teal fill; same arrow animation, reversed color.
   Timing matches the Figma "Slow" transition (CTA_Type2, on mouse enter). */
.btn-outline,
.btn-outline .arrow {
  transition-duration: var(--cta2-dur);
  transition-timing-function: var(--cta2-ease);
}
.btn-outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
  padding-block: 9px;
  font-size: 15px;
}
.btn-outline:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.18);
}
.btn-outline:hover .arrow {
  background: #fff;
  color: var(--teal);
  border-color: #fff;
}

/* Text-swap CTA — the label changes on hover ("Still thinking why us?" -> "Know More"),
   matching the Figma variant. Both labels are stacked in one grid cell so the button
   keeps the width of the longer label; on hover one slides out and the other slides in. */
.btn-textswap .swap {
  display: inline-grid;
  overflow: hidden;
}
.btn-textswap .swap > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition: transform var(--cta2-dur) var(--cta2-ease), opacity 0.4s ease;
}
.btn-textswap .swap-b {
  opacity: 0;
  transform: translateX(-16px);
}
.btn-textswap:hover .swap-a {
  opacity: 0;
  transform: translateX(16px);
}
.btn-textswap:hover .swap-b {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  /* Soft drop shadow under the header (from Figma: MainLanding header) */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.header-inner {
  position: relative;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand img { height: 50px; width: auto; }
.brand img { height: 50px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.main-nav a {
  font-size: 16px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.main-nav a.active { color: var(--teal); font-weight: 500; }
.main-nav a:hover { color: var(--teal); }
.caret { font-size: 14px; opacity: 0.75; }

.nav-toggle { display: none; background: none; border: 0; font-size: 26px; color: var(--ink); }

/* "Get in touch" button that lives at the bottom of the mobile burger menu.
   Hidden on desktop (the header already has its own Get in touch link).
   Selector must out-specify `.main-nav a` above, or it stays visible. */
.main-nav a.nav-getintouch { display: none; }

/* ---------- Header actions (Get in touch + Sign in) ---------- */
.header-actions { display: inline-flex; align-items: center; gap: 20px; }
.header-getintouch {
  font-size: 16px;
  font-weight: 500;
  color: var(--teal);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.header-getintouch:hover { color: var(--teal-dark); }
.header-signin {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--teal);
  background: transparent;
  border: 1px solid var(--teal);
  border-radius: var(--radius-pill);
  padding: 9px 24px;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.header-signin:hover {
  background: var(--teal);
  color: #fff;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ---------- Header actions (Get in touch + Sign in) ---------- */
.header-actions { display: inline-flex; align-items: center; gap: 20px; }
.header-getintouch {
  font-size: 16px;
  font-weight: 500;
  color: var(--teal);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.header-getintouch:hover { color: var(--teal-dark); }
.header-signin {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--teal);
  background: transparent;
  border: 1px solid var(--teal);
  border-radius: var(--radius-pill);
  padding: 9px 24px;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.header-signin:hover {
  background: var(--teal);
  color: #fff;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ---------- Solution mega-menu ---------- */
.nav-item { display: inline-flex; align-items: center; }
.has-mega > .nav-solution { cursor: pointer; }

.mega-menu {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(920px, calc(100vw - 32px));
  display: flex;
  gap: 32px;
  padding: 32px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 20px 24px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 60;
}
.has-mega:hover .mega-menu,
.has-mega.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.mega-list { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mega-eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
}
.mega-items { display: flex; flex-direction: column; gap: 2px; }
.mega-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.mega-item:hover { background: var(--bg); }
.mega-item.is-active { background: var(--bg); }
.mega-item.is-active .mega-item-label { color: var(--teal); font-weight: 700; }
.mega-item-label { white-space: nowrap; }

.mega-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.mega-badge.badge-basic { background: #fff; color: var(--teal); box-shadow: inset 0 0 0 1px #e6f0f0; }
.mega-badge.badge-blue { background: #f0f9ff; color: #0369a1; }
.mega-badge.badge-beta { background: #f5f3ff; color: #7c3aed; }

.mega-divider { width: 1px; align-self: stretch; background: #f3f4f6; }

.mega-preview { flex-shrink: 0; width: 480px; max-width: 48%; display: flex; flex-direction: column; gap: 20px; }
.mega-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 184px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 16px;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
}
.mega-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #f3f4f6;
  font-size: 20px;
}
.mega-preview-body { display: flex; flex-direction: column; gap: 8px; }
.mega-preview-body h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.mega-preview-body p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.mega-learn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--teal);
}
.mega-learn .mega-chevron { font-size: 14px; }

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

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  /* scales with the viewport so the brands strip below sits at the bottom of
     the fold (see --hero-h) instead of leaving a short, flat hero */
  min-height: var(--hero-h);
  background: #eef5f5;
  overflow: hidden;
}
.hero-inner {
  position: relative;
  z-index: 2;
  min-height: var(--hero-h);
  display: flex;
  align-items: center;
  /* Vertical breathing room so the centred copy always clears the sticky header
     above and the brands strip below, instead of butting against them when the
     hero is short. Physical longhands so .container's horizontal gutter stands. */
  padding-top: clamp(20px, 3vh, 48px);
  padding-bottom: clamp(20px, 3vh, 48px);
}
.hero-copy { max-width: 654px; }
.hero-copy h1 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 48px);   /* matches Figma tagline (48px) */
  line-height: 1.25;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.25px;               /* Figma tracking */
}
.hero-copy h1 .line { display: block; }
.hero-copy h1 .accent {
  display: block;
  color: var(--ink);
  font-weight: 700;
}

/* Rotating accent phrase (Figma "Tagline") — the teal line cycles through phrases */
.accent-roller {
  display: block;
  height: 2.5em;         /* two lines (matches h1 line-height) so long phrases wrap fully */
  overflow: hidden;
}
.accent-roll {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.accent-roll > span {
  display: block;
  height: 2.5em;
  line-height: 1.25;
  color: var(--teal);
  font-weight: 700;
}
/* Gap above the CTA scales with the viewport: tight enough that the copy fits
   the ~387px hero at 100% zoom (no cramming against the header), airy on taller
   / zoomed-out folds. Was a fixed 110px, which overflowed the short fold. */
.hero-actions { margin-top: clamp(40px, 7vh, 110px); }
.hero-signin {
  margin-top: 20px;
  padding-left: 40px;
  font-size: 16px;
  color: var(--muted);
}
.hero-signin a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero visual, rebuilt as layers so the chatbot bubble can animate on its own:
   grid background + greeting bubble + mascot */
.hero-visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(52%, 728px);
  z-index: 1;
  pointer-events: none;
  /* same colour as the hero, so the multiply-blended grid blends into it
     (no white panel / seam) */
  background: #eef5f5;
}
/* landing.html's hero has a SEPARATE grid (.hero-grid) + mascot. Make the grid a
   fixed cluster anchored to the content column (same mechanism as .faq-decor) so
   it sits behind the mascot at any width/zoom, instead of stretching wide-and-
   short and leaving the mascot over the grid's empty corner. index.html's baked
   hero image has no .hero-grid child, so it keeps the full-width treatment. */
.hero-visual:has(.hero-grid) {
  left: auto;
  right: calc((100% - min(100%, var(--container))) / 2 + var(--gutter) - 215px);
  width: 650px;
}
.hero-grid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  /* the exported grid sits on white — multiply drops the white against the
     panel's pale-teal background, leaving only the subtle grid */
  mix-blend-mode: multiply;
  /* fade the cropped edges so tiles dissolve instead of being sliced in half */
  -webkit-mask-image:
    linear-gradient(to left, #000 55%, transparent),
    linear-gradient(to bottom, #000 65%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 55%, transparent),
    linear-gradient(to bottom, #000 65%, transparent);
  mask-composite: intersect;
}
/* Mascot + chat bubble, anchored to the page content column (right edge lines up
   with the header "Get in touch" button, not the viewport edge) */
.hero-bot {
  position: absolute;
  z-index: 2;
  bottom: 44px;
  right: calc((100% - min(100%, var(--container))) / 2 + var(--gutter));
  width: 190px;
  pointer-events: none;
  /* nudge left so the robot's visual mass (antenna + right earphone lean right)
     centres under the header "Get in touch" button */
  transform: translateX(-24px);
}
/* Wrapper floats; the image inside tilts per chat message (separate transforms
   so the float and the wobble don't fight over the same transform property) */
.hero-mascot-wrap {
  width: 100%;
}
.hero-mascot {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.6, 1);
}
/* Soft ground shadow — stays put while the mascot floats above it */
.hero-bot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 62%;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(17, 24, 39, 0.22), rgba(17, 24, 39, 0) 72%);
  z-index: -1;
}

/* =========================================================
   Brands strip
   ========================================================= */
.brands {
  background: var(--teal);
  padding: 44px 0;
}
.brands-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brands-track img {
  height: 34px;
  width: auto;
  /* object-fit: contain; */
  /* recolour any logo to solid white to sit on the teal band */
  filter: brightness(0) invert(1);
  /* opacity: 0.95; */
}
/* Dual-colour logos already authored in the teal palette (white mark +
   #397F86/#60989D detail meant to blend into the band). The white filter would
   flatten them into a blob, so render them as-is instead. */
.brands-track img.brand-asis { filter: none; }

/* Marquee variant (landing only): logos scroll left -> right */
.brands--marquee { overflow: hidden; }
.brands--marquee .brands-track {
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  padding: 0;
  gap: 76px;
  /* Duration is recomputed by JS from the rendered track width so the marquee
     moves at a constant px/sec on every machine. 80s is a no-JS fallback. */
  animation: brand-scroll-ltr var(--brand-scroll-duration, 80s) linear infinite;
  /* Duration is recomputed by JS from the rendered track width so the marquee
     moves at a constant px/sec on every machine. 80s is a no-JS fallback. */
  animation: brand-scroll-ltr var(--brand-scroll-duration, 80s) linear infinite;
}
.brands--marquee:hover .brands-track { animation-play-state: paused; }
@keyframes brand-scroll-ltr {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* =========================================================
   Problem
   ========================================================= */
.problem { background: var(--bg-alt); padding: 100px 0; }
.problem .section-title { margin-bottom: 56px; }
.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 955fr) minmax(0, 305fr);
  gap: 25px;
  align-items: start;
}
.problem-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 399px;
}
.problem-hero .pmedia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.problem-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Darker overlay so the bright video doesn't wash out the white heading;
     weighted heavier on the left where the text sits. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 0%);
}
.problem-hero p {
  position: relative;
  z-index: 2;
  max-width: 260px;
  margin: 0;
  padding: 60px 0 0 24px;
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.25px;
  font-weight: 500;
}
.problem-side img {
  width: 100%;
  height: 263px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: #f8fbe4;
}
.problem-side p {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
}
.accent-amber { color: var(--amber); }

/* =========================================================
   Capabilities carousel
   ========================================================= */
.capabilities { background: #fff; padding: 100px 0 80px; }
.capabilities .section-title { margin-bottom: 24px; }

/* >>> FULL-BLEED-CAROUSEL (2026-07-13) — edge-to-edge carousel per Figma.
   To REVERT: delete the ACTIVE block below and uncomment the OLD block, do the
   same for .cap-card, and revert the matching JS (search FULL-BLEED-CAROUSEL
   in index.js). */
/* --- OLD (pre-full-bleed) — uncomment to revert -------------------------
.carousel {
  position: relative;
  overflow: visible;
  padding-top: 96px;
}
.carousel-track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
}
------------------------------------------------------------------------- */
/* --- ACTIVE (full-bleed) --- */
.carousel {
  position: relative;
  overflow: visible;
  padding-top: 96px;
  /* Break out of .container so the track runs edge-to-edge (full viewport
     width), matching Figma: the active card sits at the gutter and the next
     card bleeds off the right screen edge. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.carousel-track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  /* Pin overflow-y explicitly: with only overflow-x set, the spec forces
     overflow-y from `visible` to `auto`, turning the track into a VERTICAL
     scroll container too. Sub-pixel rounding then leaves ~1px of scrollable
     range, so a wheel over a card jitters the card content up/down (and eats
     the page scroll) on some devices/zoom levels. `hidden` keeps horizontal
     scrolling while making the track non-scrollable vertically (universally
     supported, unlike `clip` on older Safari). */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
  /* CENTRE-CAROUSEL: symmetric side inset = half the empty space beside a card,
     so the FIRST and LAST cards can also sit dead centre. This is only a close
     CSS fallback (100vw counts the scrollbar); the JS overrides it with the
     exact clientWidth-based value on load and on every resize. */
  padding-left: max(var(--gutter), calc((100vw - min(975px, 100vw - 130px)) / 2));
  padding-right: max(var(--gutter), calc((100vw - min(975px, 100vw - 130px)) / 2));
  scroll-padding-left: max(var(--gutter), calc((100vw - min(975px, 100vw - 130px)) / 2));
  scroll-padding-right: max(var(--gutter), calc((100vw - min(975px, 100vw - 130px)) / 2));
}
/* <<< FULL-BLEED-CAROUSEL */
.carousel-track::-webkit-scrollbar { display: none; }

.cap-card {
  position: relative;
  /* Width is derived from the VIEWPORT (not the track's content box) so it is
     independent of the track's side padding — that lets the JS compute a
     symmetric inset which keeps the active card DEAD CENTRE of the screen at
     any zoom / screen size (see CENTRE-CAROUSEL in index.js). */
  flex: 0 0 min(975px, calc(100vw - 130px));
  max-width: 975px;
  /* CENTRE-CAROUSEL: snap the card's centre to the scrollport centre. */
  scroll-snap-align: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-lg);
  padding: 31px 33px;
  display: grid;
  grid-template-columns: minmax(0, 474px) minmax(0, 373px);
  gap: 72px;
  align-items: center;
  min-height: 401px;
}
/* Big number that rolls vertically (odometer) as the carousel advances.
   Lives outside the scrolling track so it is never clipped; the active
   card paints over its lower half, so only the top peeks out. */
.cap-numbers {
  position: absolute;
  top: -6px;
  left: 88px;
  width: 180px;
  height: 120px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.cap-numbers-roll {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cap-numbers-roll span {
  display: block;
  height: 120px;
  font-size: 120px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.25px;
  color: rgba(231, 163, 60, 0.14);
}
.cap-card h3 {
  margin: 0 0 16px;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.25px;
  line-height: 1.25;
  color: var(--teal);
}
.cap-card p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--body);
}
.cap-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #eef1f4;
  height: 337px;
}
.cap-media img { width: 100%; height: 100%; object-fit: cover; }

/* Figma "scrubber" pagination with a 5s progress fill on the active slide */
.carousel-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  background: #fffbf4;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  height: 56px;
  padding: 0 24px;
  border-radius: 28px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 0;
  background: var(--amber);
  padding: 0;
  cursor: pointer;
  transition: width 0.25s ease;
}
.dot.active {
  width: 48px;
  position: relative;
  overflow: hidden;
}
.dot.active::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 5px;
  background: #ab731e;
  animation: capScrub 6s linear forwards;
}
@keyframes capScrub {
  from { width: 0; }
  to { width: 100%; }
}
/* Freeze the progress-fill in lock-step with the auto-advance timer while a
   card is hovered; it resumes from the same point on mouse-out. */
.carousel-dots.paused .dot.active::after {
  animation-play-state: paused;
}
/* The carousel progress-fill is functional feedback (it signals auto-advance
   timing) and is business-critical, so it is intentionally kept even under
   reduced motion — matching the tagline/chatbot exception further below. */
/* The carousel progress-fill is functional feedback (it signals auto-advance
   timing) and is business-critical, so it is intentionally kept even under
   reduced motion — matching the tagline/chatbot exception further below. */

/* =========================================================
   Footprints band
   ========================================================= */
.footprints {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: #2e2e2e;
  display: flex;
  align-items: center;
  min-height: 361px;
}
.footprints .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
}
.footprints-inner {
  position: relative;
  z-index: 2;
  padding: 40px var(--gutter);
  text-align: left;
  width: 100%;
}
.footprints-stat,
.footprints p { max-width: 495px; }
.footprints .leaf { width: 34px; margin-bottom: 36px; }
.footprints-stat {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 36px;
}
.footprints-stat b {
  font-size: 48px;
  font-weight: 700;
  line-height: 0.9;
  color: var(--amber);
}
.footprints-stat span { font-size: 16px; font-weight: 300; color: #fff; padding-bottom: 4px; }
/* Highlight inline emphasis (e.g. "95%") in the amber accent, matching the stat. */
.footprints p b { color: var(--amber); font-weight: 700; }
/* Highlight inline emphasis (e.g. "95%") in the amber accent, matching the stat. */
.footprints p b { color: var(--amber); font-weight: 700; }
.footprints p {
  margin: 0;
  max-width: 620px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.35;
  color: #fff;
}

/* =========================================================
   Why us
   ========================================================= */
.whyus { background: #fff; padding: 100px 0 90px; }
.whyus .section-title { margin-bottom: 56px; }

.whyus-top {
  display: grid;
  grid-template-columns: 431px 1fr;
  gap: 48px;
  align-items: start;
}

.whyus-left { display: flex; flex-direction: column; gap: 20px; }
.stats-image {
  position: relative;
  height: 230px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.stats-image img { width: 100%; height: 100%; object-fit: cover; }
.expertise {
  background: var(--teal);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 24px;
}
.expertise h3 { margin: 0 0 20px; font-size: 22px; font-weight: 600; }
.expertise-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.expertise-tags span {
  background: #4d8c92;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 14px;
}

.whyus-stats {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  padding-top: 4px;
}
.stat-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: center;
}
.stat-row b {
  font-size: 48px;
  font-weight: 600;
  color: var(--amber);
  line-height: 1;
}
.stat-row p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.stat-row p strong { color: var(--teal); font-weight: 700; }
.whyus-stats .btn-outline { align-self: flex-start; padding-block: 11px; font-size: 16px; }

.whyus-lede {
  margin: 64px 0 56px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.25px;
  color: var(--ink);
  font-weight: 400;
}
.whyus-lede strong { font-weight: 400; }

.feature-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-height: 380px;
}
.feature-icon {
  display: block;
  width: 48px;
  height: 54px;
  margin-bottom: 44px;
  background-color: var(--amber);
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.fi-sustainable { -webkit-mask-image: url("../assets/impact/feature-sustainable.svg"); mask-image: url("../assets/impact/feature-sustainable.svg"); }
.fi-output { -webkit-mask-image: url("../assets/impact/feature-output.svg"); mask-image: url("../assets/impact/feature-output.svg"); }
.fi-transparent { -webkit-mask-image: url("../assets/impact/feature-transparent.svg"); mask-image: url("../assets/impact/feature-transparent.svg"); }
.fi-privacy { -webkit-mask-image: url("../assets/impact/feature-privacy.svg"); mask-image: url("../assets/impact/feature-privacy.svg"); }
.feature-card h4 {
  margin: 0 0 16px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
}
.feature-card p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }

/* First card: solid amber with white content */
.feature-card:first-child {
  background: var(--amber);
}
.feature-card:first-child .feature-icon { background-color: #fff; }
.feature-card:first-child h4 { color: #fff; }
.feature-card:first-child p { color: #fff1ec; }

/* ========================================================
   FAQ
   ========================================================= */
.faq {
  position: relative;
  background: var(--bg-alt);
  padding: 80px 0 90px;
  overflow: hidden;
}
/* Faint tile grid — a fixed cluster that sits BEHIND the mascot, anchored to
   the same content column as .faq-bot (Figma: the grid "Group 2" wraps around
   "image 6"). It therefore travels with the mascot at any width/zoom instead of
   sliding off toward the viewport edge. Offsets mirror the Figma geometry:
   grid is 650px wide and its right edge bleeds 215px past the content edge. */
.faq-decor {
  position: absolute;
  top: 50%;
  right: calc((100% - min(100%, var(--container))) / 2 + var(--gutter) - 215px);
  width: 650px;
  height: 760px;
  transform: translateY(-50%);
  background-image: url("../assets/hero/hero-grid.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  opacity: 0.85;
  pointer-events: none;
  /* hero-grid.png sits on white; multiply drops the white against the section's
     pale background so only the faint tiles remain (same trick as .hero-grid) */
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to left, #000 60%, transparent),
    linear-gradient(to top, #000 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 60%, transparent),
    linear-gradient(to top, #000 70%, transparent);
  mask-composite: intersect;
}
/* Robot is a SEPARATE layer pinned to the content column (same anchor as
   .hero-bot) so it always sits under the header "Get in touch" button —
   at any width or zoom — instead of drifting toward the viewport edge. */
.faq-bot {
  position: absolute;
  z-index: 1;
  bottom: 56px;
  right: calc((100% - min(100%, var(--container))) / 2 + var(--gutter));
  width: 156px;
  pointer-events: none;
  /* same visual-centre nudge as the hero mascot (antenna/ear lean right) */
  transform: translateX(-20px);
}
.faq-mascot { width: 100%; height: auto; display: block; }
/* Soft ground shadow beneath the mascot */
.faq-bot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 62%;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(17, 24, 39, 0.18), rgba(17, 24, 39, 0) 72%);
  z-index: -1;
}
.faq-inner { position: relative; z-index: 2; }
.faq h2 {
  margin: 0 0 34px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.25px;
  color: var(--ink);
}
.faq-list { max-width: 846px; }
.faq-item { border-bottom: 1px solid #e0ddd7; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.faq-item[open] summary { font-weight: 700; padding-bottom: 8px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 18px;
  height: 11px;
  flex: none;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='11' viewBox='0 0 18 11' fill='none'%3E%3Cpath d='M1 1.5L9 9L17 1.5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item .faq-answer {
  padding: 0 96px 20px 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.faq .btn-outline { margin-top: 32px; padding-block: 9px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--footer); color: #fff; padding: 56px 0 28px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.footer-brand-wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
}
/* Footer mascot sits on a soft white ellipse platform (matches Figma) */
.footer-mascot {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  margin-left: 2px;
  transform: translateY(-8px); /* lift the mascot up a bit */
}
.footer-mascot img {
  position: relative;
  z-index: 1;
  height: 60px;
  width: auto;
}
/* subtle white ellipse at the text baseline that the mascot sits on */
.footer-mascot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 86%;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.38) 45%,
    rgba(255, 255, 255, 0) 76%
  );
  z-index: 2;
  pointer-events: none;
}
.footer-tagline { margin: 18px 0 22px; font-size: 15px; color: #e6efef; }
.footer-social { display: flex; gap: 12px; margin-bottom: 34px; }
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.22); }
.footer-social svg { width: 18px; height: 18px; fill: #fff; }

.footer-heading { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.footer-awards a {
  display: block;
  font-size: 15px;
  color: #eaf2f2;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 10px;
}

.footer-right { display: flex; flex-direction: column; gap: 34px; }
.footer-callback {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-callback h3 { margin: 0; font-size: 24px; font-weight: 600; }
.email-field {
  flex: 1;
  min-width: 320px;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 24px;
}
.email-field input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
}
.email-field button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: #fff;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.footer-nav ul { list-style: none; margin: 12px 0 0; padding: 0; }
.footer-nav li { margin-bottom: 12px; }
.footer-nav a { font-size: 15px; color: #eaf2f2; }
.footer-nav a:hover { text-decoration: underline; }
/* Placeholder footer items with no destination yet: plain labels, not links
   (no pointer cursor, no underline, no navigation). */
.site-footer a:not([href]),
.site-footer a:not([href]):hover { cursor: default; text-decoration: none; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 14px;
  color: #e6efef;
}
/* Keep the copyright pinned right even when .footer-legal is hidden */
.footer-bottom > div:last-child { margin-left: auto; }
.footer-legal { display: flex; gap: 12px; align-items: center; }
.footer-legal a:hover { text-decoration: underline; }

/* =========================================================
   Motion / animation (approximates the Figma prototype)
   ========================================================= */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
/* Figma "Landing Parallax" — a slow ~2.9s settle as the hero grid eases in */
@keyframes parallax-settle {
  from { opacity: 0; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

/* Hero entrance — headline lines rise in sequence */
.hero-copy h1 .line,
.hero-copy h1 .accent { animation: fade-up 0.8s ease both; }
.hero-copy h1 .line:nth-child(1) { animation-delay: 0.05s; }
.hero-copy h1 .line:nth-child(2) { animation-delay: 0.18s; }
.hero-copy h1 .accent { animation-delay: 0.31s; }
.hero-actions { animation: fade-up 0.8s ease 0.5s both; }
.hero-signin { animation: fade-up 0.8s ease 0.62s both; }

/* Hero visual: slow parallax settle on load, then a gentle continuous float */
.hero-visual { animation: parallax-settle 2.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
.hero-mascot-wrap { animation: float-y 6s ease-in-out 3.4s infinite; }

/* Chatbot bubble — JS cycles the message text and toggles .is-in.
   The bubble sits above-left of the mascot; the sharp corner (bottom-right)
   points toward it, matching the Figma bubble. */
.hero-chat {
  position: absolute;
  bottom: 75%;
  right: 73%;
  bottom: 75%;
  right: 73%;
  z-index: 3;
  width: max-content;
  max-width: 320px;
  padding: 14px 20px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
  border: 1px solid var(--teal);
  border-radius: 32px 32px 6px 32px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(57, 127, 134, 0.2);
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.6, 1);
}
.hero-chat.is-in { opacity: 1; transform: none; }
/* Two-line message: a muted grey lead-in above the dark main line. */
.hero-chat .chat-lead {
  display: block;
  color: #9aa3ab;
  margin-bottom: 4px;
}
.hero-chat .chat-body {
  display: block;
  color: var(--ink);
}
/* Two-line message: a muted grey lead-in above the dark main line. */
.hero-chat .chat-lead {
  display: block;
  color: #9aa3ab;
  margin-bottom: 4px;
}
.hero-chat .chat-body {
  display: block;
  color: var(--ink);
}

/* Living "video" backgrounds */
.problem-hero .pmedia,
.footprints .bg {
  animation: ken-burns 20s ease-in-out infinite alternate;
  transform-origin: center;
  will-change: transform;
}

/* Scroll reveal (JS toggles .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Heavier motion still respects the preference; the tagline roll and the
     chatbot bubble are intentionally kept (brand-critical, and requested). */
  .hero-copy h1, .hero-copy h1 .line, .hero-copy h1 .accent,
  .hero-actions, .hero-signin, .hero-visual, .hero-mascot-wrap,
  .problem-hero .pmedia, .footprints .bg { animation: none; }
  .btn, .btn .arrow, .btn-textswap .swap > span { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* At and above 90% zoom the viewport is short. Drop the brands strip out of the
   fold so the hero takes the full remaining height (viewport - header) and the
   copy has room to breathe instead of cramming against the header; the brands
   strip then sits just below the fold. The 690px cut-off sits in the gap between
   Chrome's 90% zoom (650px viewport on this display) and 80% zoom (731px), so
   90% is reliably caught (it rounds to ~650-652px) while 80%-and-below keep
   header + hero + brands covering the screen via the base --hero-h. Desktop-only
   so mobile is untouched. */
@media (min-width: 821px) and (max-height: 690px) {
  :root { --hero-h: calc(100vh - var(--header-h)); }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  :root { --gutter: 48px; }
  .cap-card { grid-template-columns: 1fr; }
  .whyus-top { grid-template-columns: 1fr; }
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  :root { --gutter: 24px; }
  .main-nav, .header-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Show "Get in touch" as a full-width button at the bottom of the open
     burger menu. The menu (.main-nav) is toggled to a column by the JS. */
  .main-nav a.nav-getintouch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--teal);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .main-nav a.nav-getintouch:hover { background: var(--teal-dark); }
  /* hero fits its content instead of a fixed 638px (avoids a tall empty band) */
  .hero, .hero-inner { min-height: 0; }
  /* keep the horizontal gutter — a bare `0` here would let the copy hug the edge;
     extra left padding so the hero copy clears the screen edge */
  .hero-inner { padding: 52px var(--gutter) 64px 40px; }
  .hero-visual, .hero-visual:has(.hero-grid) { left: auto; right: 0; width: 46%; opacity: 0.55; }
  .hero-bot { display: none; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-hero p { max-width: 80%; }
  .section-title { font-size: clamp(22px, 5.5vw, 32px); }
  .faq h2 { font-size: 34px; }
  .faq-decor, .faq-bot { display: none; }
  /* CENTRE-CAROUSEL: viewport-based width so the JS inset can centre it. */
  .cap-card { flex-basis: calc(100vw - 48px); padding: 32px 24px; }
  .cap-numbers { display: none; }
  .stat-row { grid-template-columns: 110px 1fr; gap: 16px; }
  .stat-row b { font-size: 38px; }
  .whyus-lede { font-size: 18px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  /* A little extra breathing room on the left so hero copy and content
     don't sit tight against the screen edge on phones. */
  .container { padding-left: 28px; padding-right: 20px; }
  .feature-cards { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: 1fr; }
  /* small enough that each rotating tagline phrase stays on ONE line
     (the roller has a fixed one-line height and would clip a wrap) */
  .hero-copy h1 { font-size: clamp(24px, 7vw, 40px); }
  /* extra room on the left so the hero copy clears the screen edge */
  .hero-inner { padding: 40px 20px 52px 40px; }
  .faq h2 { font-size: 28px; }
  .problem-hero p { max-width: 100%; }
  .stat-row b { font-size: 32px; }

  /* Capabilities: on phones the horizontal carousel becomes a vertical stack
     of cards — image on top, text below, faded index number in the corner.
     Matches Figma mobile (node 7130-5779). Tablets keep the desktop carousel.
     The carousel JS drives scrollLeft, which is inert once the track is a
     non-scrolling column, so this is a CSS-only override. */
  .capabilities { padding: 48px 0; }
  .carousel {
    width: auto;
    margin-left: 0;
    padding-top: 0;
    overflow: visible;
  }
  .carousel-track {
    flex-direction: column;
    gap: 24px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
    counter-reset: capnum;
  }
  .cap-card {
    flex: 0 0 auto;
    max-width: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    overflow: hidden;
    counter-increment: capnum;
  }
  .cap-media {
    order: -1;            /* image sits above the text */
    height: 220px;
    width: 100%;
    border-radius: 0;
  }
  .cap-body { position: relative; padding: 20px; }
  .cap-card h3 { margin: 0 0 12px; font-size: 24px; line-height: 1.3; }
  .cap-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #374151;
  }
  /* Large translucent index number anchored bottom-right of each card. */
  .cap-body::after {
    content: counter(capnum, decimal-leading-zero);
    position: absolute;
    right: 20px;
    bottom: 8px;
    font-size: 64px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.25px;
    color: rgba(231, 163, 60, 0.08);
    pointer-events: none;
  }
  .cap-numbers { display: none; }
  .carousel-dots { display: none; }
}


/* =========================================================
   index.html capabilities section (scroll-stacking solutions)
   Ported from home.css so index can run on landing.css.
   Only .solutions-* / .solution-* selectors — no collisions
   with landing.css.
   ========================================================= */

.solutions-figma-section {
  padding: 100px 0 80px;
  background: #fff;
}

.solutions-head {
  max-width: 882px;
  margin: 0 auto 48px;
  text-align: center;
}

.solutions-head h2 {
  margin: 0;
  color: #111827;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.25px;
}

.solutions-layout {
  display: grid;
  grid-template-columns: 522px 738px;
  gap: 20px;
  align-items: start;
  min-height: calc(100vh + 360px);
}

.solution-stack {
  position: relative;
  display: grid;
  gap: 0;
  padding: 8px 0 180px;
}

.solution-card {
  position: sticky;
  top: calc(104px + (var(--solution-card-index, 0) * 18px));
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 24px;
  padding: 20px 24px 22px;
  box-shadow: 0 20px 55px rgba(9, 25, 27, 0.08);
  overflow: hidden;
  margin-top: -58px;
  transform-origin: top center;
  --card-shift: 0px;
  --card-scale: 1;
  --card-opacity: 0.72;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease,
    opacity 0.35s ease;
  transform: translate3d(0, var(--card-shift), 0) scale(var(--card-scale));
  opacity: var(--card-opacity);
  cursor: pointer;
  will-change: transform, opacity;
}

.solution-card.highlighted,
.solution-card.shadowed {
  box-shadow: 2px 4px 7.5px rgba(0, 0, 0, 0.2);
}

.solution-card.highlighted {
  background: #f5f9f9;
  border: 0.5px solid #397f86;
}

.solution-card.s1 { --solution-card-index: 0; margin-top: 0; z-index: 6; }
.solution-card.s2 { --solution-card-index: 1; z-index: 5; }
.solution-card.s3 { --solution-card-index: 2; z-index: 4; }
.solution-card.s4 { --solution-card-index: 3; z-index: 3; }
.solution-card.s5 { --solution-card-index: 4; z-index: 2; }
.solution-card.s6 { --solution-card-index: 5; z-index: 1; }

.solution-card h3 {
  margin: 0;
  color: #6b7280;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.25px;
  transition: color 0.3s ease;
}

.solution-card.highlighted h3 { color: #397f86; }

.solution-card-body {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.35s ease;
}

.solution-card p {
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.45;
}

.solution-card.s1 p { color: #374151; }

.solution-button {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  height: 36px;
  margin-top: 16px;
  padding: 9px 12px;
  border: 1px solid #397f86;
  border-radius: 999px;
  color: #397f86;
  font-size: 14px;
  background: transparent;
}

.solution-card-body p,
.solution-card-body .solution-button {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.28s ease,
    transform 0.35s ease;
}

.solution-card.active,
.solution-card:hover {
  z-index: 20;
  box-shadow: 0 24px 70px rgba(9, 25, 27, 0.16);
}

.solution-card.active {
  background: #f5f9f9;
  border-color: #397f86;
}

.solution-card.active h3,
.solution-card:hover h3 { color: #397f86; }

.solution-card.active .solution-card-body {
  max-height: 320px;
  margin-top: 16px;
}

.solution-card.active .solution-card-body p,
.solution-card.active .solution-card-body .solution-button {
  opacity: 1;
  transform: translateY(0);
}

.solution-button img { width: 16px; height: 16px; display: block; }

.solution-visual {
  position: sticky;
  top: 104px;
  height: 659px;
  border-radius: 24px;
  overflow: hidden;
  background: #eef2f8;
}

.solution-visual > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 24px;
}

.solution-badge {
  position: absolute;
  top: 23px;
  left: 24px;
  display: none;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 8px 24px;
  border-radius: 999px;
  background: #397f86;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}

.solution-report {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  color: #000;
  font-size: 14px;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.solution-report img { width: 14px; height: 14px; display: block; flex: 0 0 auto; }

@media (max-width: 768px) {
  .solutions-figma-section { padding: 56px 0; }
  .solutions-head { margin-bottom: 36px; }
  .solutions-head h2 { font-size: 30px; }
  .solutions-layout { grid-template-columns: 1fr; min-height: 0; }
  .solution-stack { display: grid; gap: 16px; padding: 0; }
  .solution-card {
    position: static;
    padding: 22px 20px;
    margin-top: 0;
    opacity: 1;
    transform: none;
  }
  .solution-card.s1,
  .solution-card.s2,
  .solution-card.s3,
  .solution-card.s4,
  .solution-card.s5,
  .solution-card.s6 { top: auto; }
  .solution-card-body { max-height: none; margin-top: 16px; }
  .solution-card-body p,
  .solution-card-body .solution-button { opacity: 1; transform: none; }
  .solution-card h3 { font-size: 20px; }
  .solution-visual { position: relative; top: auto; height: auto; min-height: 320px; }
  .solution-report { bottom: 16px; }
}

/* ---------- Get in touch modal (Zoho form) ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  overflow-y: auto;
  padding: 20px;
}
.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  overflow: visible;
  position: relative;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}
.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #f0f0f0;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 10;
}
.modal-close:hover { background: #e0e0e0; }
.modal-body { padding: 20px; overflow: visible; }
.modal-body iframe { width: 100%; border: 0; display: block; }
/* Zoho form is scaled down so it fits the modal on desktop; step the zoom back
   up on smaller screens so the form stays legible instead of shrinking further. */
@media (max-width: 2000px) {
  .modal-body { zoom: 60%; }
  
}
@media (max-width: 1500px) {

  .cookie-banner {
    zoom: 70%;
  }

}
/* @media (max-width: 520px) {
  .modal-body { zoom: 90%; }
} */

/* ---------- Cookie consent banner (Figma: cookie-consent-banner) ---------- */
.cookie-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  width: min(600px, calc(100vw - 48px));
  /* hidden until activated; slide-up + fade entrance */
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.45s var(--cta2-ease), transform 0.45s var(--cta2-ease),
    visibility 0s linear 0.45s;
}
.cookie-banner.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.45s var(--cta2-ease), transform 0.45s var(--cta2-ease);
}

.cookie-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  border-radius: 32px;
  padding: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s var(--cta2-ease), padding 0.3s var(--cta2-ease);
}
.cookie-banner.is-expanded .cookie-card {
  gap: 32px;
  padding: 40px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}

/* Tabs (expanded only) */
.cookie-tabs { display: flex; gap: 24px; align-items: center; }
.cookie-tab {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  font: 400 18px/1 "Roboto", sans-serif;
  color: #a1a1a1;
  transition: color 0.2s;
}
.cookie-tab:hover { color: var(--ink); }
.cookie-tab.is-active { font-weight: 600; color: var(--ink); }

/* Compact header */
.cookie-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cookie-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
.cookie-speaker {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cookie-speaker:hover { background: var(--teal-soft); }
.cookie-speaker svg { width: 20px; height: 20px; }
.cookie-speaker.is-speaking { color: var(--teal); background: var(--teal-soft); }

/* Body text */
.cookie-text { margin: 0; font-size: 16px; line-height: 1.5; color: #666; }
.cookie-about-long { font-size: 16px; line-height: 1.6; color: #666; }
.cookie-about-long p { margin: 0; }
.cookie-about-long a { color: #666; text-decoration: underline; }

/* Cookie settings list */
.cookie-scroll {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}
.cookie-row { display: flex; flex-direction: column; gap: 12px; }
.cookie-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-row-title { font-size: 18px; font-weight: 600; color: var(--ink); }
.cookie-row-title .muted { font-weight: 400; color: var(--muted); }
.cookie-row-desc { margin: 0; font-size: 15px; line-height: 1.5; color: #666; }

/* Toggle switch */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: #d1d5db;
  cursor: pointer;
  transition: background 0.25s var(--cta2-ease);
}
.switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s var(--cta2-ease);
}
.switch.is-on { background: var(--teal); }
.switch.is-on .knob { transform: translateX(20px); }
.switch.is-locked { cursor: not-allowed; opacity: 0.9; }

/* Footer */
.cookie-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 12px; */
  /* Let the buttons drop to a second row rather than overflow the card
     (and get clipped) when the banner is narrow or zoomed in. */
  flex-wrap: wrap;
}
.cookie-banner.is-expanded .cookie-foot { padding-top: 20px; }
.cookie-foot-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cookie-btn {
  font: 600 16px/1 "Roboto", sans-serif;
  height: 42px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cookie-btn-ghost {
  padding: 0 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--ink);
}
.cookie-btn-ghost:hover { border-color: var(--muted); }
.cookie-btn:disabled,
.cookie-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.cookie-btn-primary {
  padding: 0 32px;
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
}
.cookie-btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

.cookie-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--teal);
  background: #fff;
  color: var(--teal);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.cookie-icon-btn svg { width: 20px; height: 20px; }
.cookie-icon-btn .ico-chevron { width: 16px; height: 16px; }
.cookie-banner.is-expanded .cookie-icon-btn { border-color: #e5e7eb; }
/* swap sliders (compact) <-> chevron (expanded) */
.cookie-icon-btn .ico-chevron { display: none; }
.cookie-banner.is-expanded .cookie-icon-btn .ico-sliders { display: none; }
.cookie-banner.is-expanded .cookie-icon-btn .ico-chevron { display: block; }

@media (max-width: 640px) {
  .cookie-banner { right: 16px; left: 16px; bottom: 16px; width: auto; }
  .cookie-card { padding: 24px; border-radius: 24px; }
  .cookie-banner.is-expanded .cookie-card { padding: 24px; }
  .cookie-foot { flex-wrap: wrap; }
  .cookie-btn-primary { flex: 1 1 auto; }
}

/* Respect reduced-motion: no slide, just fade */
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transform: none; transition: opacity 0.2s, visibility 0s; }
  .cookie-banner.active { transform: none; }
}