/* ============================================================
   QUALIA — the kinetic "cinema"
   One pinned stage. Each .q-beat flies in and out as you scroll
   (js/qualia.js). Set in Fraunces on the Qu palette, consistent
   with the rest of the site. Photos are numbered 1-8 to match the
   deck.

   TWO MODES:
   1. Static (default / no-JS / reduced motion): beats stack and
      read top to bottom. Everything visible, nothing hidden.
   2. Kinetic (.is-kinetic, added by JS when motion is welcome):
      the stage becomes a fixed 100svh viewport and the beats are
      absolutely stacked, swapped by the scrubbed timeline.
   ============================================================ */

.qualia { overflow-x: clip; }

/* Keep the top bar visible on the Qualia page so people can navigate
   out at any point (the pinned cinema would otherwise scroll it away).
   Solid background so it stays legible over the moving content. */
.page-masthead--sticky {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-modal);
  background: var(--color-bg);
  box-shadow: 0 1px 0 rgba(30, 58, 95, 0.08);
  padding-block: var(--space-sm);
}
.page-masthead--sticky img { width: clamp(64px, 8vw, 88px); }

.q-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  filter: saturate(1.1) brightness(0.9);
  margin-bottom: var(--space-sm);
}


/* ------------------------------------------------------------
   STATIC MODE (the accessible baseline)
   ------------------------------------------------------------ */
.q-cinema__track { width: 100%; }

.q-beat {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-2xl), 12vh, 8rem) var(--gutter);
}

.q-beat__inner {
  width: 100%;
  max-width: 42rem;
  text-align: center;
}
.q-beat__inner--wide { max-width: 64rem; }

/* The progress dots only exist in kinetic mode. */
.q-progress { display: none; }


/* ------------------------------------------------------------
   KINETIC MODE
   ------------------------------------------------------------ */
.q-cinema.is-kinetic {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.q-cinema.is-kinetic .q-cinema__track {
  position: absolute;
  inset: 0;
}
.q-cinema.is-kinetic .q-beat {
  position: absolute;
  inset: 0;
  /* Reserve the fixed top bar's height (measured into --q-bar by JS)
     so beats centre in the space BELOW it and never hide behind it. */
  padding: calc(var(--q-bar, 84px) + var(--space-sm)) var(--gutter) var(--space-md);
  will-change: transform, opacity;
  /* Off-beats are set to visibility:hidden by GSAP autoAlpha, so they
     never intercept clicks or focus. */
}
/* Trim the densest beats a touch in kinetic mode so they clear the bar
   comfortably on shorter screens. */
.q-cinema.is-kinetic .q-different__list li { padding: 0.5rem 0; }
.q-cinema.is-kinetic .q-use { padding: var(--space-sm) var(--space-md); }

/* In kinetic mode media must stay within the viewport height. */
.q-cinema.is-kinetic .q-card--split { max-height: 82svh; }
.q-cinema.is-kinetic .q-card__media img { max-height: 46svh; object-fit: cover; }
.q-cinema.is-kinetic .q-uses__grid { width: 100%; }

/* Designed (baked) cards — a single image, no chrome around it.
   Landscape (16:9) on tablet/desktop, portrait (3:4) on phones via the
   <picture> swap / the breakpoint-only use-case beats. */
.q-cardimg {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
}
.q-cardimg img { display: block; width: 100%; height: auto; }

/* Tablet / desktop: cap a 16:9 card by height so it (and any title above
   it) fit above the fold. Constrain the figure width to the width a 16:9
   card can be at that height, so it never overflows or distorts. */
@media (min-width: 46rem) {
  .q-cinema.is-kinetic .q-cardimg {
    max-width: min(62rem, calc((80svh - var(--q-bar, 84px)) * 16 / 9));
  }
}

/* Phones: the vertical 3:4 cards. Cap by height the same way. */
@media (max-width: 45.999rem) {
  .q-cardimg { max-width: 26rem; }
  .q-cinema.is-kinetic .q-cardimg {
    max-width: min(26rem, calc((82svh - var(--q-bar, 84px)) * 3 / 4));
  }
}

/* Breakpoint-only beats: one combined use-case card on wide screens,
   three vertical cards on phones. (JS builds its timeline from the
   beats that are actually displayed.) */
@media (min-width: 46rem)     { .q-only-narrow { display: none !important; } }
@media (max-width: 45.999rem) { .q-only-wide   { display: none !important; } }

/* Progress dots down the right edge. */
.q-cinema.is-kinetic .q-progress {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: absolute;
  top: 50%;
  right: clamp(0.6rem, 2vw, 1.5rem);
  transform: translateY(-50%);
  z-index: var(--z-overlay);
}
.q-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--color-navy);
  background: transparent;
  opacity: 0.35;
  transition: opacity var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.q-progress__dot.is-active {
  opacity: 1;
  background: var(--color-accent);
  border-color: var(--color-accent);
}


/* ------------------------------------------------------------
   BEAT CONTENT — shared type
   ------------------------------------------------------------ */

/* Intro */
.q-intro__word {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.q-intro__tag {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  opacity: 0.85;
}
/* Three portraits below the wordmark, like the deck cover. */
.q-intro__faces {
  list-style: none;
  display: flex;
  gap: clamp(0.5rem, 2vw, var(--space-md));
  justify-content: center;
  width: 100%;
  max-width: 34rem;
  margin: clamp(var(--space-lg), 5vh, var(--space-xl)) auto 0;
}
.q-intro__faces li { flex: 1 1 0; min-width: 0; }
.q-intro__faces img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 30px -14px rgba(30, 58, 95, 0.4);
}
/* Keep the portraits from crowding the wordmark on short screens. */
.q-cinema.is-kinetic .q-intro__faces { max-width: min(34rem, 62vh); }

/* Big statement / single lines */
.q-statement {
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.q-statement strong { font-weight: var(--weight-bold); }

.q-line {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.q-line--muted {
  font-weight: var(--weight-regular);
  opacity: 0.75;
}
.q-line .u {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.1em;
}


/* ------------------------------------------------------------
   CARDS (photo + text)
   ------------------------------------------------------------ */
.q-card {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid rgba(30, 58, 95, 0.1);
  border-radius: 20px;
  box-shadow: 0 24px 60px -24px rgba(30, 58, 95, 0.45);
  overflow: hidden;
}
.q-card--split {
  display: grid;
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 46rem) {
  .q-card--split { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
}
.q-card__media { margin: 0; }
.q-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-card__body {
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.q-card__body p { font-size: var(--text-base); line-height: var(--leading-body); margin-bottom: var(--space-sm); }
.q-card__body .q-line { font-size: var(--text-xl); margin-bottom: 0; }

.q-step__num {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  filter: saturate(1.1) brightness(0.9);
  margin-bottom: var(--space-xs) !important;
}
.q-step__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
}
.q-step__kicker { font-weight: var(--weight-bold); }


/* ------------------------------------------------------------
   DIFFERENT
   ------------------------------------------------------------ */
.q-different__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.q-accentword { color: var(--color-text); }
.q-different__sub {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}
/* Watercolour globe motif, sits between the line and the list. */
.q-different__globe {
  display: block;
  width: clamp(150px, 24vh, 260px);
  height: auto;
  margin: 0 auto var(--space-md);
}
.q-different__list {
  list-style: none;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.q-different__list li {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  padding: var(--space-sm) 0;
  border-top: 1px solid rgba(30, 58, 95, 0.15);
}
.q-different__list li:last-child { border-bottom: 1px solid rgba(30, 58, 95, 0.15); }
.q-different__list strong { font-weight: var(--weight-bold); }

/* The Different beat is dense (title + line + globe + six-item list).
   Compact it on phones so it clears the fixed bar on short screens. */
@media (max-width: 45.999rem) {
  .q-different__title { font-size: var(--text-2xl); }
  .q-different__sub { font-size: var(--text-base); margin-bottom: var(--space-sm); }
  .q-different__globe { width: clamp(118px, 20vh, 168px); margin-bottom: var(--space-sm); }
  .q-cinema.is-kinetic .q-different__list li { padding: 0.4rem 0; font-size: var(--text-base); }
}


/* ------------------------------------------------------------
   USE CASES
   ------------------------------------------------------------ */
.q-uses__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-sm);
}

/* Desktop / tablet use-cases: the three vertical cards side by side. */
.q-uses-row {
  display: flex;
  gap: clamp(0.75rem, 2vw, var(--space-md));
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.q-uses-row img {
  flex: 1 1 0;
  min-width: 0;
  max-width: 21rem;
  height: auto;
  display: block;
}
.q-uses__grid {
  display: grid;
  gap: clamp(var(--space-sm), 2.5vw, var(--space-md));
  grid-template-columns: 1fr;
}
@media (min-width: 42rem) {
  .q-uses__grid { grid-template-columns: repeat(3, 1fr); }
}
.q-use {
  background: #fff;
  border: 1px solid rgba(30, 58, 95, 0.12);
  border-radius: 16px;
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  text-align: left;
}
.q-use h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); margin-bottom: var(--space-xs); }
.q-use ul { list-style: none; }
.q-use li { font-size: var(--text-base); line-height: var(--leading-snug); padding: 0.3rem 0; }
.q-use li + li { border-top: 1px solid rgba(30, 58, 95, 0.1); }


/* ------------------------------------------------------------
   CURIOSITY + CTA
   ------------------------------------------------------------ */
/* Big "Qualia: Curiosity" lockup — the headline of this beat. */
.q-cur__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-xs);
}
.q-cur__name { color: var(--color-text); }
.q-cur__word { color: var(--color-accent); }
.q-cur__sub {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  margin-bottom: clamp(var(--space-md), 3vw, var(--space-lg));
}

/* Testimonial cloud — a few clear sizes, most quotes light, a couple
   of big statement quotes for punch. Not everything shouts. */
.q-quotes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25em clamp(0.75rem, 2.5vw, 1.75rem);
  max-width: 52rem;
  margin: 0 auto clamp(var(--space-md), 3vw, var(--space-lg));
}
.q-quote { color: var(--color-text); line-height: 1.15; }
.q-quote::before { content: "\201C"; }
.q-quote::after  { content: "\201D"; }
/* small — quiet, italic asides */
.q-quote--sm { font-size: var(--text-base); font-style: italic; opacity: 0.6; }
/* medium — regular weight */
.q-quote--md { font-size: var(--text-lg); opacity: 0.8; }
/* large — medium weight, confident */
.q-quote--lg { font-size: var(--text-xl); font-weight: var(--weight-medium); opacity: 0.95; }
/* extra-large — the headline testimonials */
.q-quote--xl { font-size: var(--text-2xl); font-weight: var(--weight-bold); }

.q-cta__lead { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.q-cta__button {
  display: inline-block;
  padding: 0.85rem 2rem;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-off-white);
  background: var(--color-text);
  border: 1.5px solid var(--color-text);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.q-cta__button:hover,
.q-cta__button:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text);
}
.q-cta__button:active { transform: translateY(1px); }


/* ------------------------------------------------------------
   REDUCED MOTION
   JS won't build the kinetic stage, so the static baseline above
   already applies. Nothing more needed, but make it explicit that
   beats are visible.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .q-beat { opacity: 1 !important; transform: none !important; }
}