/* Svitch CSR 762 — About page (about.html) styles. Loaded after style1.css so these rules win where they overlap. */

* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --accent: var(--clr-red); /* same #e30613 red as style1.css / index.html */ --muted: #6b6b6b; }
html, body { max-width: 100%; overflow-x: clip; }
body { background: #0f0f0f; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* style1.css sets body line-height 1.6 site-wide — this page's sections set their own.
   Type follows index.html: headings / titles / big numbers in Microgramma (--font-display,
   uppercase via style1's h1–h6 rule), labels + body copy in Inter. Microgramma only ships a
   700 weight, so display text uses 700 with normal letter-spacing. */
.sv-innov, .ab-hero, .sv-tl, .sv-reveal, .ab-stats, .ab-fam, .ab-cta { line-height: normal; }

/* ====== ABOUT TITLE — uses index.html's .big-heading block as-is (style1.css): corner lines,
   Microgramma eyebrow + title, desc on the right. Only the section padding lives here. ====== */
.ab-hero { background: #0f0f0f; padding: var(--section-gap) 0; }
.ab-hero .big-heading { margin-bottom: 0; }
/* same inset as index.html sections once the screen is narrower than the container */
@media (max-width: 1320px) {
  .ab-hero .cf-mark--tl { left: 0; }
  .ab-hero .cf-mark--br { right: 0; }
}
/* phones: the forced 2-line break lands mid-phrase on narrow screens — let the text flow */
@media (max-width: 600px) {
  .ab-hero .big-heading-desc br { display: none; }
}

/* ====== JOURNEY TIMELINE — horizontal scrub, year lights up when active ====== */
.sv-tl { position: relative; height: 350vh; background: #0f0f0f; color: #fff; }
.sv-tl__sticky {
  position: sticky; top: 130px; height: 60vh; height: 60svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 46px;
}
.sv-tl__head { text-align: center; padding: 0 24px; }
.sv-tl__label {
  display: block; font-size: 13px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.sv-tl__title { margin: 0; font-family: var(--font-display); font-size: clamp(0.95rem, 4.2vw, 2.6rem); font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.sv-tl__mask { overflow: hidden; }
.sv-tl__track { display: flex; width: max-content; padding: 0 80px 0 max(24px, 50vw - 646px); will-change: transform; }
.sv-tl__item {
  flex: 0 0 clamp(240px, 26vw, 380px);
  padding: 0 clamp(24px, 2.5vw, 48px);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0.45; transition: opacity 0.3s ease;
}
.sv-tl__item:first-child { border-left: none; padding-left: 0; }
.sv-tl__item.active { opacity: 1; }
.sv-tl__year {
  display: block; font-family: var(--font-display); font-size: clamp(36px, 4vw, 60px); font-weight: 700; line-height: 1;
  color: rgba(255, 255, 255, 0.28); margin-bottom: 18px; transition: color 0.3s ease;
}
.sv-tl__item.active .sv-tl__year { color: var(--accent); }
.sv-tl__item.past .sv-tl__year { color: rgba(255, 255, 255, 0.55); }
/* like index.html card titles (.hl-card-title) */
.sv-tl__name { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; line-height: 1.3; color: #fff; }
.sv-tl__desc { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.sv-tl__points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sv-tl__points li { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); padding-left: 16px; position: relative; }
.sv-tl__points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
@media (max-width: 767px) {
  .sv-tl__sticky { top: 96px; height: 70vh; height: 70svh; gap: 20px; }
  .sv-tl__head { padding: 0 24px; }
  .sv-tl__track { padding: 0 24px; }
  .sv-tl__item { flex: 0 0 calc(100vw - 48px); padding: 0 24px; }
  .sv-tl__item:first-child { padding-left: 24px; }
  /* phones: JS steps one year at a time, so each card lands fully in view */
  .sv-tl__track { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
}
/* tablet + phone: pin just under the fixed navbar and centre the content in the
   rest of the screen — otherwise tall portrait screens leave a big empty band below */
@media (max-width: 1024px) {
  .sv-tl__sticky { top: 66px; height: calc(100vh - 66px); height: calc(100svh - 66px); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-tl { height: auto; padding: 60px 0; }
  .sv-tl__sticky { position: static; height: auto; }
  .sv-tl__mask { overflow-x: auto; }
  .sv-tl__item { opacity: 1; }
  .sv-tl__item.active .sv-tl__year { color: var(--accent); }
}

/* ====== FOUNDERS REVEAL — banner opens out of a centre rounded portrait card on scroll ====== */
.sv-reveal { position: relative; height: 300vh; background: #0f0f0f; color: #fff; }
.sv-reveal__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* soft rounded portrait card. --x/--y are the side/top insets and --rad the corner
   radius — JS shrinks all three to 0 so a small centred card grows to fill the screen. */
.sv-reveal__media {
  --x: 40%; --y: 30%; --rad: 28px; --zoom: 1.25;
  position: absolute; inset: 0;
  -webkit-clip-path: inset(var(--y) var(--x) round var(--rad));
  clip-path: inset(var(--y) var(--x) round var(--rad));
  will-change: clip-path;
}
.sv-reveal__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--zoom)); will-change: transform;
}
/* banner photo only: the headlight sits at 49.5% / 50.7% of center-light, so it landed a touch
   left of the card centre — zoom around the headlight and nudge the photo right so it's dead centre */
.sv-reveal__media > img {
  object-position: 49.5% 50.7%; transform-origin: 49.5% 50.7%;
  translate: 0.5% -0.7%;
}
.sv-reveal__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.15); }
.sv-reveal__top {
  position: absolute; top: 120px; left: 0; right: 0; z-index: 1;
  margin: 0; padding: 0 20px; text-align: center;
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: #fff;
}
/* two empty cards under the heading — left one slides in from the left, right one from the right */
.sv-reveal__cards {
  position: absolute; top: 190px; left: 0; right: 0; z-index: 1;
  display: flex; justify-content: space-between; padding: 0 clamp(20px, 8vw, 140px);
}
.sv-reveal__card {
  height: min(560px, calc(100vh - 230px)); aspect-ratio: 3 / 4;
  perspective: 1200px; cursor: pointer;
  opacity: 0; transform: translateX(-120px);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-reveal__card:nth-child(2) { transform: translateX(120px); }
.sv-reveal__cards.is-in .sv-reveal__card { opacity: 1; transform: translateX(0); }
.sv-reveal__cards.is-in .sv-reveal__card:nth-child(2) { transition-delay: 0.12s; }
/* hover flips the card to show the details side */
.sv-reveal__flip {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
/* hover on mouse devices; tap or Enter/Space (.is-flipped, toggled in JS) otherwise */
@media (hover: hover) {
  .sv-reveal__card:hover .sv-reveal__flip { transform: rotateY(180deg); }
}
.sv-reveal__card.is-flipped .sv-reveal__flip { transform: rotateY(180deg); }
.sv-reveal__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* both faces take the scroll-gallery's cut-corner shape (top-left + bottom-right
   sliced off), with a smaller cut than the full-screen gallery cards */
.sv-reveal__face {
  --cut: clamp(18px, 2.4vw, 34px); --bd: 3px;
  position: absolute; inset: 0; padding: clamp(18px, 2vw, 28px);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
/* photo side: thin white frame around the photo (cut-corner gallery-card look) */
.sv-reveal__face--front { background: rgba(255, 255, 255, 0.9); border: none; padding: 0; overflow: hidden; }
.sv-reveal__face--front img {
  --cut-in: calc(var(--cut) - var(--bd));
  position: absolute; inset: var(--bd);
  width: calc(100% - var(--bd) * 2); height: calc(100% - var(--bd) * 2); object-fit: cover; transform: none;
  -webkit-clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
  clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
}
.sv-reveal__face--back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 36px);
  background: linear-gradient(160deg, rgba(26, 26, 26, 0.94), rgba(8, 8, 8, 0.96));
  border-color: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
/* thin red bar along the top edge — same red as the rest of the site */
.sv-reveal__face--back::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent);
}
.sv-founder__mark { font-size: clamp(34px, 3.4vw, 48px); line-height: 1; color: var(--accent); }
.sv-founder__quote {
  margin: 10px 0 0;
  font-family: var(--font-body); font-size: clamp(16px, 1.35vw, 20px); font-weight: 500; line-height: 1.5;
  color: #fff;
}
.sv-founder__bio {
  margin: 16px 0 0;
  font-family: var(--font-body); font-size: 14px; line-height: 1.7;
  color: var(--gray-300);
}
/* name + role sit at the top, a thin line separates them from the quote */
.sv-founder__meta { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.sv-founder__name {
  margin: 0;
  font-family: var(--font-display); font-size: clamp(16px, 1.4vw, 21px); font-weight: 700; line-height: 1.2;
  color: #fff;
}
.sv-founder__role {
  display: block; margin-top: 8px;
  font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
}
/* tablet + phone: heading and cards flow as one group, centred in the screen under
   the navbar (fixed top offsets left a big empty band below the cards) */
@media (max-width: 768px) {
  .sv-reveal__media {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 24px; padding: 66px 16px 24px;
  }
  .sv-reveal__media > img { position: absolute; inset: 0; }
  .sv-reveal__top, .sv-reveal__cards { position: relative; top: auto; }
  .sv-reveal__top { padding: 0; }
  .sv-reveal__cards { width: 100%; padding: 0; gap: 12px; }
  /* tablet: two cards side by side (~360px wide) keep the full desktop card design */
  .sv-reveal__card { height: auto; width: calc(50% - 6px); }
}
/* small tablets — cards get narrower, so drop the bio to keep the quote clear */
@media (max-width: 700px) {
  .sv-founder__bio { display: none; }
}
/* phones: two side-by-side cards are only ~170px wide, so stack them and size each
   to half the screen height instead */
@media (max-width: 600px) {
  .sv-reveal__media { gap: 16px; }
  .sv-reveal__cards { flex-direction: column; align-items: center; }
  .sv-reveal__card {
    width: auto;
    height: min(380px, calc((100vh - 180px) / 2)); height: min(380px, calc((100svh - 180px) / 2));
  }
  .sv-reveal__face--back { padding: 16px 16px 14px; }
  .sv-founder__mark { font-size: 24px; }
  .sv-founder__quote {
    margin-top: 4px; font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden;
  }
  .sv-founder__meta { padding-bottom: 10px; margin-bottom: 10px; }
  .sv-founder__name { font-size: 13px; }
  .sv-founder__role { margin-top: 5px; font-size: 10px; letter-spacing: 1.5px; }
}
/* short phones (e.g. 360×640) — cards get very small, trim the quote mark */
@media (max-width: 600px) and (max-height: 700px) {
  .sv-founder__mark { display: none; }
  .sv-founder__quote { font-size: 12px; -webkit-line-clamp: 7; }
}
/* short laptop screens — the card gets short, so trim the bio */
@media (min-width: 769px) and (max-height: 760px) {
  .sv-founder__bio { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-reveal { height: auto; }
  .sv-reveal__sticky { position: static; }
  .sv-reveal__media { -webkit-clip-path: none; clip-path: none; }
  .sv-reveal__media img { transform: none; }
  .sv-reveal__card { opacity: 1; transform: none; transition: none; }
}
/* ====== STATS — one open row of big numbers, thin fading dividers, no boxes ====== */
.ab-stats { background: #0f0f0f; color: #fff; padding: clamp(70px, 12vh, 130px) clamp(20px, 4vw, 60px) clamp(30px, 5vh, 50px); text-align: center; }
.ab-stats__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; margin: 0 auto; }
.ab-stat {
  position: relative; padding: 10px clamp(10px, 2vw, 32px);
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-stat + .ab-stat::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
}
.ab-stats__row.is-in .ab-stat { opacity: 1; transform: translateY(0); }
.ab-stats__row.is-in .ab-stat:nth-child(2) { transition-delay: 0.1s; }
.ab-stats__row.is-in .ab-stat:nth-child(3) { transition-delay: 0.2s; }
.ab-stats__row.is-in .ab-stat:nth-child(4) { transition-delay: 0.3s; }
/* number starts as an outline and fills red once the count lands */
.ab-stat__num {
  display: block; font-family: var(--font-display); font-size: clamp(44px, 6vw, 96px); font-weight: 600; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px #fff;
  transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}
.ab-stat.is-done .ab-stat__num { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
/* labels use index.html .big-heading-eyebrow type (Microgramma 12px 600, 2px tracking) */
.ab-stat__text { display: block; margin-top: 18px; font-family: var(--font-display); font-size: 12px; font-weight: 600; line-height: 1.7; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
@media (max-width: 600px) {
  .ab-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .ab-stat:nth-child(3)::before { display: none; }
  .ab-stat__text { font-size: 10px; letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-stat { opacity: 1; transform: none; transition: none; }
}

/* ====== THE SVITCH FAMILY — split panels. One panel is always open (wide, full colour,
   details shown); hovering/focusing the other opens it instead (JS toggles .is-active).
   Panels rise in when the section scrolls into view (.is-in). Stacked on phones/touch. ====== */
.ab-fam { background: #0f0f0f; color: #fff; padding: var(--section-gap) 0; }
/* heading uses index.html's .big-heading block (style1.css) — only the inset of the corner lines lives here */
@media (max-width: 1320px) {
  .ab-fam__head .cf-mark--tl { left: 0; }
  .ab-fam__head .cf-mark--br { right: 0; }
}
@media (max-width: 600px) {
  .ab-fam__head .big-heading-desc br { display: none; }
}

.ab-fam__panels {
  display: flex; gap: 14px;
  max-width: 1320px; height: clamp(460px, 68vh, 660px); margin: 0 auto; padding: 0 24px;
}
.ab-fam__panel {
  --cut: clamp(20px, 2.6vw, 40px);
  position: relative; flex: 1; min-width: 0; overflow: hidden; color: #fff; text-decoration: none;
  /* cut-corner shape, same family as the founder cards */
  -webkit-clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  opacity: 0; transform: translateY(40px);
  transition: flex 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-fam__panels.is-in .ab-fam__panel { opacity: 1; transform: none; }
.ab-fam__panels.is-in .ab-fam__panel:nth-child(2) { transition-delay: 0s, 0.14s, 0.14s; }
.ab-fam__panel.is-active { flex: 1.8; }
/* names are sized against the panel width */
.ab-fam__panel { container-type: inline-size; }
.ab-fam__panel:focus-visible { outline: none; }
.ab-fam__panel:focus-visible .ab-fam__icon { outline: 2px solid #fff; outline-offset: 3px; }

/* closed panel recedes: dimmer, less colour, slightly zoomed — the open one settles to full colour */
.ab-fam__panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1); filter: brightness(0.5) saturate(0.6);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
}
.ab-fam__panel.is-active img { transform: scale(1); filter: none; }
/* WayGO photo: the charger sits right of centre on white — keep it in frame in the narrow panel */
.ab-fam__panel--waygo img { object-position: 68% 50%; }
.ab-fam__panel::after {
  content: ""; position: absolute; inset: 0;
  /* only the brand name sits at the bottom now — a short, lighter fade keeps more photo visible */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.75) 100%);
}
/* red line along the bottom of the open panel */
.ab-fam__panel::before {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 2; height: 3px; width: 0; background: var(--accent);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-fam__panel.is-active::before { width: 100%; }

.ab-fam__icon {
  position: absolute; z-index: 1; top: clamp(16px, 2vw, 26px); right: clamp(16px, 2vw, 26px);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.25); color: #fff; font-size: 16px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.3s, border-color 0.3s;
}
.ab-fam__icon i { transition: transform 0.3s ease; }
.ab-fam__panel.is-active .ab-fam__icon { background: var(--accent); border-color: var(--accent); }
.ab-fam__panel:hover .ab-fam__icon i { transform: translate(2px, -2px); }

/* card shows only the brand name at the bottom — the top-right arrow is the link cue */
.ab-fam__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; --pad: clamp(20px, 2.4vw, 36px); padding: var(--pad); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75); }
/* sized to the panel's own width (container units) so the longest name, NUTRACEUTICALS (~15em wide
   in Microgramma), always fits — smaller on the narrow closed panels, full size on the open one */
.ab-fam__name { margin: 0; font-family: var(--font-display); font-size: clamp(0.8rem, calc((100cqi - 2 * var(--pad)) / 15.5), 1.6rem); font-weight: 600; line-height: 1.15; color: #fff; }

/* tablet / phone / any touch screen: stack the brands, everything open, no hover needed */
@media (max-width: 900px), (hover: none) {
  .ab-fam__panels { flex-direction: column; height: auto; gap: 16px; }
  .ab-fam__panel, .ab-fam__panel.is-active { flex: none; height: clamp(420px, 64vh, 560px); }
  .ab-fam__panel img, .ab-fam__panel.is-active img { transform: none; filter: none; }
  .ab-fam__panel::before { width: 100%; }
  .ab-fam__panel .ab-fam__icon { background: var(--accent); border-color: var(--accent); }
}
@media (max-width: 767px) {
  .ab-fam__panels { padding: 0 16px; }
  .ab-fam__panel, .ab-fam__panel.is-active { height: clamp(320px, 52vh, 440px); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-fam__panel { opacity: 1; transform: none; transition: none; }
  .ab-fam__panel img, .ab-fam__panel::before { transition: none; }
}

/* ====== BE THE PART OF SVITCH — pinned banner in 3 steps: (1) banner zooms out, (2) the line fills
   word by word from outline to solid, (3) sub-line + 3 actions rise in. Progress set in JS. ====== */
.ab-cta { position: relative; height: 260vh; background: #0f0f0f; color: #fff; }
.ab-cta__view { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ab-cta__bg { --zoom: 1.15; position: absolute; inset: 0; }
.ab-cta__bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--zoom)); will-change: transform;
}
/* dark wash so the white/red type always reads over the photo */
/* darker at the top where the text now sits, clear through the middle so the bike reads */
.ab-cta__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0.65) 100%);
}
/* text block pinned near the top (under the navbar) so the bike in the centre stays clear */
.ab-cta__inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(96px, 13vh, 130px) 24px 24px; text-align: center;
}
.ab-cta__block { position: relative; padding: 26px 0 6px; }
/* tablet + desktop: drop the photo a little so the bike sits below the buttons, not behind them
   (the photo's top edge is near-black, so the shift blends into the dark top of the section) */
@media (min-width: 768px) {
  .ab-cta__bg { inset: 14vh 0 -14vh; }
  .ab-cta__view { background: #000; }
}
/* index.html .big-heading corner lines — fade/slide in once every word + the buttons are in */
.ab-cta__block .cf-mark { opacity: 0; transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.ab-cta__block .cf-mark--tl { transform: translate(12px, 8px); }
.ab-cta__block .cf-mark--br { transform: translate(-12px, -8px); }
.ab-cta__block.is-done .cf-mark { opacity: 1; transform: none; transition-delay: 0.35s; }
/* the big title's line box adds empty space above its letters — pull it up so the eyebrow sits close */
.ab-cta__label { margin: 0 0 calc(4px - 0.14 * clamp(1.1rem, 5.6vw, 4.5rem)); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9); }
.ab-cta__title {
  margin: 0;
  font-family: var(--font-display); font-size: clamp(1.1rem, 5.6vw, 4.5rem); font-weight: 600; line-height: 1.05;
}
/* each word starts as an outline and fills solid when JS adds .is-on */
.ab-cta__word {
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
  transition: color 0.45s ease, -webkit-text-stroke-color 0.45s ease;
}
.ab-cta__word.is-on { color: #fff; -webkit-text-stroke-color: #fff; }
.ab-cta__word.accent.is-on { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.ab-cta__step {
  margin-top: 12px;
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-cta__step.is-in { opacity: 1; transform: none; pointer-events: auto; }
/* same look as index.html .big-heading-desc */
.ab-cta__sub {
  /* wide enough to stay on one line on desktop */
  margin: 0 auto; max-width: 62ch;
  font-family: var(--font-body); font-size: 16px; line-height: 1.6; letter-spacing: 1px; color: var(--gray-300);
}
/* buttons pinned to the bottom of the screen (below the bike); revealed together with the sub-line */
.ab-cta__actions {
  margin-top: auto; padding-bottom: clamp(28px, 7vh, 64px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-cta__actions.is-in { opacity: 1; transform: none; pointer-events: auto; }
/* smaller than the default .btn-csr so they sit quietly under the bike */
.ab-cta__actions .btn-csr { padding: 11px 18px; font-size: 12px; letter-spacing: 1.5px; }
/* ghost buttons sit on a photo here — give them a light glass fill so they stay readable */
.ab-cta__actions .btn-csr.ghost {
  /* a little darker instead of a backdrop blur — blurring the zooming photo every frame was costly */
  color: #fff; background: rgba(0, 0, 0, 0.5);
}
@media (max-width: 767px) {
  .ab-cta { height: 220vh; }
  .ab-cta__word { -webkit-text-stroke-width: 1px; }
  .ab-cta__sub { font-size: 14px; letter-spacing: 0.5px; }
  /* phones: stack the actions full width so each is an easy tap */
  .ab-cta__actions { flex-direction: column; align-items: stretch; width: min(100%, 320px); margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-cta { height: auto; }
  .ab-cta__view { position: relative; height: 100vh; height: 100svh; }
  .ab-cta__bg img { transform: none; }
  .ab-cta__word { color: #fff; -webkit-text-stroke-color: #fff; transition: none; }
  .ab-cta__word.accent { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
  .ab-cta__step, .ab-cta__actions { opacity: 1; transform: none; transition: none; pointer-events: auto; }
}

/* ====== 6a · ready — pinned text + 3 counter-moving columns (taken from ourstory.html) ====== */
.sv-innov { position: relative; height: 500vh; background: #0f0f0f; color: #fff; }
.sv-innov__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sv-innov__images {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
  gap: clamp(14px, 3vw, 72px); opacity: 0.5;
  will-change: transform, opacity;
}
.sv-innov__line {
  display: flex; flex-direction: column; gap: clamp(14px, 2.4vw, 56px);
  /* columns are centred; JS writes each one's translate (how far it can move before its end would show) */
  will-change: transform;
}
.sv-innov__card {
  flex: none; width: clamp(190px, 21vw, 340px); aspect-ratio: 3 / 4;
  border-radius: 10px; overflow: hidden; background: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.sv-innov__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-innov__text {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  height: 100%; display: grid; align-content: center; justify-items: center;
  gap: 18px; text-align: center; padding: 0 20px; width: max-content; max-width: 94vw;
}
/* hero text matches index.html: title = .hero-headline (Microgramma 600, line-height 1),
   eyebrow = .big-heading-eyebrow (Microgramma 12px 600, 2px tracking), sub in Microgramma too.
   All three reveal on scroll: eyebrow fades up, title rows slide up, sub fades up last. */
.sv-innov__title { margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 4.5rem); font-weight: 600; line-height: 1; text-transform: uppercase; color: #fff; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55); }
/* small bottom padding so the row mask never clips the glyphs at line-height 1 */
.sv-innov__row { display: block; overflow: hidden; padding-bottom: 0.06em; }
.sv-innov__row > span { display: block; transform: translateY(112%); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.sv-innov__text.is-in .sv-innov__row > span { transform: translateY(0); }
.sv-innov__text.is-in .sv-innov__row:nth-child(1) > span { transition-delay: 0.1s; }
.sv-innov__text.is-in .sv-innov__row:nth-child(2) > span { transition-delay: 0.18s; }
.sv-innov__label {
  display: block; margin: 0;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; line-height: 1.7; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.sv-innov__sub {
  margin: 6px 0 0; max-width: 46ch;
  font-family: var(--font-display); font-size: clamp(12px, 1.05vw, 15px); font-weight: 600; line-height: 1.7; letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.sv-innov__label, .sv-innov__sub {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-innov__text.is-in .sv-innov__label { opacity: 1; transform: none; }
.sv-innov__text.is-in .sv-innov__sub { opacity: 1; transform: none; transition-delay: 0.32s; }
/* portrait tablets are tall — bigger cards so the 3-card column still fills the height */@media (min-width: 761px) and (max-width: 1024px) {  .sv-innov__card { width: clamp(190px, 34vw, 340px); }}
@media (max-width: 760px) {
  .sv-innov { height: 350vh; }
  .sv-innov__images { gap: 12px; }
  .sv-innov__line { gap: 12px; }
  /* bigger cards on phones so a 3–4 card column still fills the screen height */
  .sv-innov__card { width: clamp(150px, 46vw, 240px); border-radius: 8px; }
  .sv-innov__title { font-size: clamp(1.7rem, 8vw, 2.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-innov { height: auto; }
  .sv-innov__sticky { position: static; height: auto; display: grid; gap: 24px; padding: 60px 20px; }
  .sv-innov__images { position: static; opacity: 1; }
  .sv-innov__line { transform: none; }
  .sv-innov__text { position: static; transform: none; width: auto; max-width: none; }
  .sv-innov__row > span, .sv-innov__label, .sv-innov__sub { transform: none; opacity: 1; }
}