/* ============================================================
   Main: component & section styles
   Depends on tokens.css + base.css
   ============================================================ */

/* ---------- Buttons ------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 14px 24px;                 /* Figma pill: py-14 px-24 */
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--fs-button);        /* Button token: 16px */
  line-height: var(--lh-button);
  letter-spacing: var(--tr-button);   /* +2% */
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--dark {
  background: var(--color-night);
  color: var(--text-inverse);
}
.btn--dark:hover { background: var(--color-midnight-80); }

.btn--light {
  background: var(--color-white);
  color: var(--color-night);
  border-color: var(--color-stone-80);
}
.btn--light:hover { border-color: var(--color-midnight-40); }

.btn--accent {
  background: var(--accent);
  color: var(--color-night);
}

/* White pill for dark backgrounds (no border) */
.btn--invert {
  background: var(--color-white);
  color: var(--color-night);
}
.btn--invert:hover { background: var(--color-stone-40); }

/* ---------- Nav ---------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque so the fixed (viewport-tall) footer never shows through the bar at
     the top of the page. Translucent + blur revealed the dark footer as a grey
     band, since the hero starts below the sticky nav (no content behind it). */
  background: var(--bg-page);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 86px;
  padding-inline: var(--nav-pad);
  padding-block: 20px;
}
.site-header__logo {
  display: block;
  flex-shrink: 0;
  color: var(--color-night);
}
.site-header__logo img { width: 110px; height: auto; }
.site-header__info {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}
.site-header__note {
  color: var(--color-midnight-60);
  font-size: var(--fs-body);          /* Body Regular 16 */
  line-height: var(--lh-body);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .site-header__note { display: none; }   /* keep the bar clean on mobile */
}

/* ---------- Hero --------------------------------------- */
.hero {
  min-height: calc(100vh - 86px);            /* fill the viewport below the sticky nav */
  display: flex;
  flex-direction: column;
  justify-content: center;                   /* centre the content in that space */
  padding-block: 40px;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 48px);               /* Figma gap-48 */
}
/* Hero: fade only (no rise) — the title carries its own print-in effect */
.js .hero [data-reveal] { transform: none; }
/* "Ground Truth": Cambon Light 180px on one line. The 12.5vw term is
   tuned so it fills the content width and scales down in step with the
   160px gutters, capping at the 180px desktop value. */
.hero__title {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(2.75rem, 12.5vw, 180px);
  line-height: 1;
  letter-spacing: -0.01em;                   /* -1.8px at 180 */
  color: var(--color-night);
  white-space: nowrap;
}
.hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-48);
  width: 100%;
}
.hero__lead {
  flex: 0 0 520px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.hero__lead .btn { align-self: flex-start; }
.hero__def {
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body-md);              /* Body Medium 18 */
  line-height: var(--lh-body-md);
  color: var(--color-midnight-60);
}
.hero__def p + p { margin-top: 1.125rem; }   /* 18px between paragraphs */
/* Sage highlight behind "ground truth, noun" */
.hero__hl {
  background: var(--color-sage);
  color: var(--color-night);
  padding: 0 0.15em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
  font-size: var(--fs-body);                 /* Body Regular 16 */
  line-height: 1.2;
  color: var(--color-midnight-60);
  white-space: nowrap;
}
.hero__meta p { margin: 0; }
.hero__meta-divider {
  align-self: stretch;                        /* span the meta column width */
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-stone-100);
}

@media (max-width: 768px) {
  .hero__row { flex-direction: column; gap: var(--space-32); }
  .hero__lead { flex-basis: auto; max-width: none; }
  .hero__meta { align-items: stretch; text-align: left; align-self: stretch; }
  .hero__title { white-space: normal; }      /* allow wrap on small screens */
}

/* ---------- Inverse (dark) sections -------------------- */
.section--dark {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
.section--dark h2,
.section--dark h3 { color: var(--color-white); }

/* ---------- Eyebrow (Device / Eyebrow) ----------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
/* The "device line" mark: a bold nib + hairline (same glyph as the
   open-state FAQ indicator). Two adjacent bars, 23px total. */
.device-line {
  display: inline-flex;
  align-items: center;
  height: 26px;
  flex-shrink: 0;
  color: var(--color-night);   /* bars inherit via currentColor */
}
.device-line span:first-child { width: 13px; height: 5px; background: currentColor; }
.device-line span:last-child  { width: 10px; height: 1px; background: currentColor; }
.eyebrow__label {
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: 0.875rem;               /* 14px */
  line-height: 1.2;
  color: var(--color-midnight-40);
}

/* ---------- Split section (Premise / Location) --------- */
.split {
  background: var(--color-stone-20);
  padding-block: clamp(3.5rem, 8vw, 6rem);   /* Figma py-96 */
}
.split__inner {
  display: flex;
  align-items: stretch;                      /* panel matches text height */
  gap: clamp(2.5rem, 5vw, 5rem);             /* Figma gap-80 */
}
.split__text {
  flex: 0 0 360px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.split__text--between { justify-content: space-between; }   /* Location: title top, body bottom */
.split__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
}
.split .btn { align-self: flex-start; }      /* keep pill at natural width */
.split__body {
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body-md);              /* Body Medium 18 */
  line-height: var(--lh-body-md);
  color: var(--color-midnight-40);
}
.split__body p + p { margin-top: 1.125rem; } /* 18px between paragraphs */
.split__panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 470px;
  background: var(--color-forest);
  border-radius: 6px;
}
.split--reverse .split__inner { flex-direction: row-reverse; }   /* panel on the left */

/* Premise: py-160 and even 520/520 columns */
.split--even { padding-block: clamp(4rem, 11vw, 160px); }
.split--even .split__text { flex-basis: 520px; max-width: 520px; }

@media (max-width: 768px) {
  .split__inner,
  .split--reverse .split__inner { flex-direction: column; }
  .split__text { flex-basis: auto; max-width: none; width: 100%; }
  .split__panel { min-height: 320px; }
}

/* Premise panel: Slate bg + decoding bars + floating Tax Card */
.premise-viz {
  background: var(--color-midnight-100);   /* dark panel (Figma 114:484) */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* Faint green "device" equalizer, gradient Night -> Volt (from Figma). */
.premise-viz__bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../Assets/img/premise-graph.svg") center / 100% 100% no-repeat;
}

.tax-card {
  position: relative;                 /* above the bars */
  z-index: 1;
  width: min(300px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  /* dark fill (padding-box) + Volt gradient border (border-box): bright at the
     corners, faded in the middle. No shadow. */
  background:
    linear-gradient(var(--color-midnight-80), var(--color-midnight-80)) padding-box,
    linear-gradient(135deg,
      var(--color-volt) 0%,
      rgba(153, 255, 75, 0) 36%,
      rgba(153, 255, 75, 0) 58%,
      var(--color-volt) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;   /* product-UI card */
}
.tax-card__info { display: flex; flex-direction: column; gap: 12px; }
.tax-card__code {
  font-family: inherit;
  font-size: 1.125rem;                /* 18px */
  line-height: 1.4;
  color: var(--color-stone-20);
}
.tax-card__divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 0.5px solid var(--color-midnight-60);
}
.tax-card__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: inherit;
  font-size: 1rem;                    /* 16px */
  line-height: 1.4;
  color: var(--color-white);
}
.tax-card__line span:first-child { color: var(--color-stone-60); }
.tax-card__badge {
  padding: 12px;
  text-align: center;
  background: color-mix(in srgb, var(--color-volt) 8%, transparent);
  border-radius: 6px;
  font-family: inherit;
  font-weight: var(--weight-medium);
  font-size: 0.875rem;                /* 14px */
  line-height: 1.3;
  color: var(--color-volt);
}

/* Location panel: photo background + frosted venue card */
.location-viz {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #0e5560 url("../Assets/img/location-map.jpg") center / cover no-repeat;
}
.venue-card {
  position: relative;
  width: 288px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 10px;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;   /* product-UI card */
  background: rgba(255, 255, 255, 0.1);        /* frosted fill; no shadow */
}
/* Gradient border ring (transparent top -> white at the bottom), drawn with a
   masked pseudo so it does NOT bleed through the semi-transparent fill. */
.venue-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.5) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .venue-card {
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
  }
}
.venue-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 240 / 150;
  object-fit: cover;
  border-radius: 6px;
}
.venue-card__info { display: flex; flex-direction: column; gap: 12px; }
.venue-card__title {
  font-family: inherit;
  font-size: 1.125rem;                         /* 18px */
  line-height: 1.4;
  color: var(--color-white);
}
.venue-card__divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #8a8f8a;
}
.venue-card__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: inherit;
  font-size: 1rem;                             /* 16px */
  line-height: 1.4;
  color: var(--color-white);
}

/* ---------- Panels (scroll-driven quotes arc) --------- */
.quotes {
  position: relative;
  background: var(--color-white);
  height: 360vh;                      /* header (scrolls) + pinned scroll-scrub range; ring also auto-spins */
}
/* Header: normal flow (scrolls away); only the arc + info + switcher pin */
.quotes__intro {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 8rem) 24px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}
.quotes__intro h2 { color: var(--color-night); }
.quotes__intro-sub {
  font-family: var(--font-secondary);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--color-midnight-40);
}
.quotes__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 760px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vh, 48px);      /* space between arc / info / switcher */
  padding-top: 86px;                  /* balance for the sticky nav so top gap == bottom gap */
}
/* Arc stage: cards are absolutely positioned along a circle by JS */
.quotes__stage { position: relative; width: 100%; height: 400px; }
.quotes__ring { position: absolute; inset: 0; }
.qcard {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;                      /* square, uniform (no scale) */
  padding: 40px;
  border-radius: 6px;
  background: var(--color-slate);
  --qtext: var(--color-stone-60);     /* text + icon; overridden per colour below */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Card colours: 6 secondaries + black. Dark bg -> Stone 60 text/icon;
   light bg -> Midnight 60 text/icon. */
.qcard--slate  { background: var(--color-slate);  --qtext: var(--color-stone-60); }
.qcard--forest { background: var(--color-forest); --qtext: var(--color-stone-60); }
.qcard--plum   { background: var(--color-plum);   --qtext: var(--color-stone-60); }
.qcard--night  { background: var(--color-night);  --qtext: var(--color-stone-60); }
.qcard--ocean  { background: var(--color-ocean);  --qtext: var(--color-midnight-60); }
.qcard--sage   { background: var(--color-sage);   --qtext: var(--color-midnight-60); }
.qcard--blush  { background: var(--color-blush);  --qtext: var(--color-midnight-60); }
.qcard__quote {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: 1.25rem;                 /* 20px */
  line-height: 1.2;
  color: var(--qtext);
}
/* Multi-line quote: each line is a block, with a visible gap between them */
.qcard__quote .qcard__line { display: block; }
.qcard__quote .qcard__line + .qcard__line { margin-top: 0.6em; }
.qcard__icon { width: 32px; height: 32px; color: var(--qtext); fill: currentColor; flex-shrink: 0; }

.quotes__info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  max-width: 640px;                   /* wider so panel titles fit in 2 lines */
  margin-inline: auto;
  padding-inline: 24px;
}
.quotes__tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-mint);
  font-family: var(--font-secondary);
  font-size: var(--fs-body);          /* 16px */
  line-height: 1.375;
  color: var(--color-night);
}
.quotes__title { color: var(--color-night); }   /* on .t-h5 */
.quotes__sub {
  font-family: var(--font-secondary);
  font-size: var(--fs-body-md);       /* 18px */
  line-height: var(--lh-body-md);
  color: var(--color-midnight-40);
}
/* switcher: 3 VERTICAL device-line marks (rotated) */
.quotes__switch { display: flex; align-items: flex-end; }
.qswitch {
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 10px 18px 0;                 /* comfortable click target; nib stays at bottom */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-stone-60);         /* inactive line: faint #dfddcf */
  transition: color var(--dur-base) var(--ease-out);
}
.qswitch i {
  display: block;
  width: 1px;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out);
}
.qswitch i:first-child { height: 0; }    /* stem: hidden when inactive */
.qswitch i:last-child  { height: 20px; } /* line (inactive) / nib base (active) */
.qswitch.is-active { color: var(--color-night); }    /* active: black */
.qswitch.is-active i:first-child { height: 20px; }   /* stem extends up (taller) */
.qswitch.is-active i:last-child  { width: 5px; }     /* nib thickens */

/* Fallback: mobile / reduced motion — plain swipeable carousel (no arc/pin) */
/* Mobile: a static stacked layout (built by JS from the arc cards) — each
   panel's heading followed by a horizontal-scroll row of its cards. */
.quotes__mobile { display: none; }

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .quotes { height: auto; }
  .quotes__pin { display: none; }            /* hide the desktop arc / info / switcher */
  .quotes__mobile { display: block; padding-block: clamp(1.5rem, 6vw, 3rem) clamp(3.5rem, 13vw, 5.5rem); }
  .qpanel { margin-bottom: clamp(2.5rem, 10vw, 4.5rem); }
  .qpanel:last-child { margin-bottom: 0; }
  .qpanel__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-12);
    max-width: 620px;
    margin: 0 auto clamp(1.25rem, 5vw, 2rem);
    padding-inline: 24px;
  }
  .qpanel__cards {
    display: flex;
    gap: var(--space-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 12px;
    scrollbar-width: none;
  }
  .qpanel__cards::-webkit-scrollbar { display: none; }
  .qpanel__cards .qcard {
    position: static;
    transform: none;
    opacity: 1;
    flex: 0 0 auto;
    width: 300px;               /* uniform size across all three panels */
    height: 216px;              /* a touch landscape; fits the longest quote */
    padding: 24px;
    gap: 16px;
    overflow: hidden;
    scroll-snap-align: center;
  }
  .qpanel__cards .qcard__quote {
    font-size: 1rem;            /* 16px — the longest quote fits the fixed height */
    line-height: 1.25;
  }
  .qpanel__cards .qcard__icon { width: 26px; height: 26px; }
}

/* ---------- FAQs --------------------------------------- */
.faqs {
  background: var(--color-white);
  padding-block: clamp(4rem, 11vw, 160px);   /* Figma py-160 */
}
.faqs__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(2.5rem, 5vw, 5rem);             /* Figma gap-80 */
}
.faqs__intro { flex: 0 0 360px; max-width: 360px; }
.faqs__title {
  /* Figma H3 = Cambon Light 40 / 108% / -1.8% */
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: clamp(1.875rem, 1.4rem + 2.2vw, var(--fs-h3));
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  color: var(--color-night);
}
.faqs__list { flex: 1 1 0; min-width: 0; }

/* Item */
.faq { border-bottom: 1px solid var(--color-stone-60); }

.faq__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: 24px 0;
  background: none;
  border: 0;
  text-align: left;
  color: var(--color-night);
  transition: padding-bottom var(--dur-base) var(--ease-out);
}
.faq.is-open .faq__trigger { padding-bottom: var(--space-16); }
.faq__trigger:focus-visible {
  outline: 2px solid var(--color-forest);
  outline-offset: 4px;
}

.faq__question {
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body-lg);   /* Body Large = 20px */
  line-height: var(--lh-body-lg);
}

/* Indicator: thin dash (closed) -> dark nib (open) */
.faq__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 23px;
  height: 26px;
}
.faq__icon-a,
.faq__icon-b {
  height: 1px;
  background: var(--color-stone-60);
  transition: height var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.faq__icon-a { width: 13px; }
.faq__icon-b { width: 10px; }
/* hover: paint the Device/Line black */
.faq__trigger:hover .faq__icon-a,
.faq__trigger:hover .faq__icon-b { background: var(--color-night); }
.faq.is-open .faq__icon-a { height: 5px; background: var(--color-night); }
.faq.is-open .faq__icon-b { background: var(--color-night); }

/* Panel: animated auto-height via grid-rows */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel-inner {
  overflow: hidden;
  padding-left: calc(23px + var(--space-16));   /* align under the question */
}
.faq__answer {
  padding-bottom: 24px;
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body-md);   /* Body Medium = 18px */
  line-height: var(--lh-body-md);
  color: var(--color-midnight-40);
}

@media (prefers-reduced-motion: reduce) {
  .faq__panel,
  .faq__trigger,
  .faq__icon-a,
  .faq__icon-b { transition: none; }
}

/* Stack the two columns on narrow screens */
@media (max-width: 768px) {
  .faqs__inner { flex-direction: column; }
  .faqs__intro { flex-basis: auto; max-width: none; }
}

/* ---------- Schedule (agenda table) -------------------- */
.schedule { padding-block: clamp(4rem, 11vw, 160px); }          /* Figma py-160 (overrides .section) */
.schedule__title { margin-bottom: clamp(2.5rem, 8vw, 6rem); }   /* Figma: 96px title→table */

.srow {
  position: relative;
  border-top: 1px solid var(--color-midnight-100);              /* divider */
  transition: border-color var(--dur-base) var(--ease-out);
}
.srow:hover { border-color: var(--color-white); }               /* hover: line -> white */

.srow__inner {
  display: grid;
  grid-template-columns: minmax(90px, 164px) minmax(0, 328px) minmax(0, 348px);
  gap: clamp(1.25rem, 3vw, 44px);
  align-items: start;
  padding-block: 24px;
}
.srow__time,
.srow__title,
.srow__desc {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: var(--weight-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.srow__time { color: rgba(255, 255, 255, 0.55); }
.srow__title { color: var(--color-white); }
.srow__desc { color: rgba(255, 255, 255, 0.66); }
.srow__panel-label { display: block; color: var(--color-white); }
.srow__time,
.srow__desc { transition: color var(--dur-base) var(--ease-out); }
/* hover: all row text -> white (Panel label stays Volt) */
.srow:hover .srow__time,
.srow:hover .srow__desc { color: var(--color-white); }

/* Panel nib sitting on the divider, top-left */
.srow__nib {
  position: absolute;
  top: -3px;
  left: 0;
  display: flex;
  align-items: center;
  height: 5px;
  color: var(--color-midnight-100);
  transition: color var(--dur-base) var(--ease-out);
}
.srow:hover .srow__nib { color: var(--color-white); }
.srow__nib i { display: block; background: currentColor; }
.srow__nib i:first-child { width: 13px; height: 5px; }
.srow__nib i:last-child  { width: 10px; height: 1px; }

@media (max-width: 640px) {
  .srow__inner { grid-template-columns: 1fr; row-gap: 4px; }
}

/* ---------- Footer (CTA + bottom bar) ------------------ */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--color-night);
  color: var(--color-white);
}

/* Background: gradient logomark, masked to the spiral shape.
   Fades transparent (top) -> Midnight 100 (bottom), bleeds off-bottom. */
.footer__bg {
  position: absolute;
  left: 50%;
  top: 49%;                    /* Figma: vector top ~346px below footer top */
  transform: translateX(-50%);
  width: min(961px, 68vw);     /* Figma: 961px wide, centered (240px insets at 1440) */
  aspect-ratio: 961 / 960;
  pointer-events: none;
  z-index: 0;
}
.footer__bg svg { display: block; width: 100%; height: 100%; }
/* On mobile the footer is taller, so the logomark stops being clipped and
   shows as a full circle. Anchor it to the footer bottom and push it down so
   only the top ~half shows, matching desktop. */
@media (max-width: 768px) {
  .footer__bg {
    top: auto;
    bottom: 0;
    transform: translate(-50%, 48%);
    width: min(520px, 116vw);
  }
}

/* --- CTA --- */
.cta {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 8vw, 96px);
}
.cta__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-48);
}
.cta__txt {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 768px;
}
.cta__title { color: var(--color-white); }   /* on .t-display */
.cta__sub   { color: var(--color-white); }   /* on .t-h6 */

/* Device rails at the outer edges (outside the content width) */
.cta__rail {
  position: absolute;
  top: clamp(4rem, 8vw, 96px);
  bottom: clamp(4rem, 8vw, 96px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 12px;
}
.cta__rail--left  { left:  clamp(1.5rem, 5.5vw, 80px); align-items: flex-end; }
.cta__rail--right { right: clamp(1.5rem, 5.5vw, 80px); align-items: flex-start; }
.rail__mark { height: 26px; display: flex; align-items: center; flex-shrink: 0; }
.rail__off  { width: 23px; height: 1px; background: var(--color-midnight-40); }   /* inactive */
.rail__on   { display: flex; align-items: center; color: var(--color-white); }    /* active nib */
.rail__on i { display: block; background: currentColor; }
.rail__on i:first-child { width: 13px; height: 5px; }
.rail__on i:last-child  { width: 10px; height: 1px; }

/* --- Bottom bar --- */
.foot {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 8vw, 96px);
}
.foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}
.foot__social { display: flex; gap: var(--space-12); }
.foot__social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  /* fill #151615 + gradient border: Midnight 80 opaque top & bottom,
     transparent at the vertical middle (double-background trick keeps radius) */
  border: 1px solid transparent;
  background:
    linear-gradient(#151615, #151615) padding-box,
    linear-gradient(180deg, #2e312e 0%, rgba(46, 49, 46, 0) 50.5%, #2e312e 100%) border-box;
  color: var(--color-white);
  transition: background var(--dur-fast) var(--ease-out);
}
.foot__social a:hover {
  background:
    linear-gradient(var(--color-midnight-100), var(--color-midnight-100)) padding-box,
    linear-gradient(180deg, #2e312e 0%, rgba(46, 49, 46, 0) 50.5%, #2e312e 100%) border-box;
}
.foot__social svg { width: 18px; height: 18px; }
.foot__copy {
  font-family: var(--font-secondary);
  font-size: var(--fs-body);                     /* 16px */
  line-height: var(--lh-body);
  color: var(--color-midnight-20);
}

@media (max-width: 768px) {
  .cta__rail { display: none; }                  /* rails are decorative */
  .foot__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Scroll reveal — fade + rise
   JS (initScrollReveal) adds .is-visible as elements enter view.
   Gated behind .js so content is never hidden without JavaScript.
   Optional per-element --d (integer) staggers grouped items.
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.3s var(--ease-out, ease-out),
    transform 1.3s var(--ease-out, ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Hero title "print-in" — serif letters revealed left->right by
   a sweeping band of vertical green (Volt) equalizer bars.
   JS animates --x (%) from off-left to off-right. Behind the band:
   solid ink. Ahead: nothing. Desktop + motion only (JS gates it);
   otherwise the plain title shows.
   ============================================================ */
.titlefx { position: relative; }

/* Ink layer: the black serif text, revealed up to just behind the band. */
.js .titlefx__ink { opacity: 0; }                 /* armed until JS resolves */
.titlefx.is-playing .titlefx__ink,
.titlefx.is-done .titlefx__ink { opacity: 1; }
.titlefx.is-playing .titlefx__ink {
  -webkit-mask-image: linear-gradient(90deg,
      #000 var(--x), transparent calc(var(--x) + 12%));
  mask-image: linear-gradient(90deg,
      #000 var(--x), transparent calc(var(--x) + 12%));
}

/* Bars layer: a rectangle of vertical Volt bars (transparent gaps let the
   emerging ink show through), shown only inside the moving print head. */
.titlefx__bars {
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;                             /* text only sizes the box */
  pointer-events: none;
  opacity: 0;
  /* Sphere "device" motif: alternating (180deg-rotated) stepped needles, each
     with a vertical gradient, over a horizontal fill that runs transparent ->
     Volt so the gaps read as solid green toward the leading edge. */
  background:
    url("../Assets/img/title-bars.svg") 0 0 / 22px 100% repeat-x,
    linear-gradient(90deg, transparent, var(--color-volt));
}
/* The green head fills everything ahead of the frontier (--x) and recedes to
   the right as the frontier advances, printing solid ink behind it. */
.titlefx.is-playing .titlefx__bars {
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg,
      transparent calc(var(--x) - 2%), #000 calc(var(--x) + 16%));
  mask-image: linear-gradient(90deg,
      transparent calc(var(--x) - 2%), #000 calc(var(--x) + 16%));
}

/* ============================================================
   Footer reveal: the dark footer is pinned to the bottom of the
   viewport, behind the page. The (opaque) content scrolls up and
   uncovers it. JS reserves the reveal space (main's margin-bottom
   = footer height). Gated on .js so no-JS keeps the footer in flow.
   ============================================================ */
.js main {
  position: relative;
  z-index: 1;
  background: var(--bg-page);
}
.js .footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}