/* ============================================================
   Project case-study page — Roomio (and reusable per project).
   Inherits tokens/components from styles.css; overrides the
   accent to the project's brand colour and adds cs-* components.
   ============================================================ */

body.cs {
  /* Roomio brand palette (accent overrides the home cobalt on this page) */
  --accent: #3d37cc;
  --roomio: #3d37cc;
  --roomio-deep: #201d6b;
  --roomio-deep2: #2f2aa0;
  --roomio-tint: #efedfb;
  /* ---- vertical rhythm tokens (single source for section spacing) ---- */
  --cs-pad: clamp(4.25rem, 10.5vw, 7rem);          /* standard plain-section top+bottom (breathing) */
  --cs-pad-entry: clamp(7.5rem, 13.5vw, 11rem);     /* confident first section after the hero (biggest breath) */
  --cs-pad-tight: clamp(2rem, 4vw, 3rem);           /* hug a pair into one unit (reflect + next) */
  --cs-band-pad: clamp(4rem, 7.5vw, 6.5rem);        /* full-bleed dark bands' internal breathing */
  background: var(--cream);
}

/* ---------- Nav: transparent over the dark hero, solid on scroll ---------- */
body.cs .nav { background: transparent; box-shadow: none; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); }
body.cs .nav__brand,
body.cs .nav__links a { color: #fff; }
body.cs .nav__brand span { color: rgba(255, 255, 255, 0.72); }
body.cs .nav__links a::after { background: #fff; }
body.cs .nav.is-solid {
  background: rgba(247, 244, 236, 0.82); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(15, 30, 51, 0.07);
}
body.cs .nav.is-solid .nav__brand,
body.cs .nav.is-solid .nav__links a { color: var(--ink); }
body.cs .nav.is-solid .nav__brand span { color: var(--ink-soft); }
body.cs .nav.is-solid .nav__links a::after { background: var(--accent); }
/* Brand hover, adaptive like the rest of the nav: surname brightens to WHITE over the dark hero,
   tints ACCENT once the nav goes solid over light content (overrides the state colors above). */
body.cs .nav__brand:hover span { color: #fff; }
body.cs .nav.is-solid .nav__brand:hover span { color: var(--accent); }

/* ---------- Shared section rhythm ---------- */
.cs-section { padding: var(--cs-pad) var(--gutter); max-width: 1120px; margin: 0 auto; }
/* Section heads: sized for the width they sit in. On a 1440 screen a 40ch cap (~450px) made
   3-word titles wrap and subtitles read as a thin column; the head now grows with the viewport
   (title to ~3.6rem, subtitle to ~50rem) so it composes at desktop scale, not mobile scale.
   Head is wide enough (58rem) that a 57.6px title only wraps when it genuinely must. */
.cs-head { max-width: min(100%, 58rem); margin-bottom: var(--sp-6); }   /* head → content: 40 → 64 */
.cs-head .cs-h2 { margin-bottom: 0; }
.cs-head--center { margin-left: auto; margin-right: auto; text-align: center; max-width: min(100%, 50rem); }
.cs-h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.9rem, 4.2vw, 3.6rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.cs-h2--light { color: #fff; }
.cs-head__sub { margin-top: var(--sp-4); font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; max-width: min(100%, 50rem); }
.cs-head--center .cs-head__sub { margin-inline: auto; }
.cs-band .cs-head__sub { color: rgba(255, 255, 255, 0.8); }
/* one unified eyebrow -> heading gap across the whole case-study page (sp-2: 12 → 14) */
body.cs .section__eyebrow { margin-bottom: var(--sp-2); }

.cs-prose__body { max-width: 62ch; }
.cs-prose__body p { font-size: 1.18rem; line-height: 1.75; color: var(--ink-soft); text-wrap: pretty; }
.cs-prose__body p + p { margin-top: 1.2rem; }

/* ============================================================
   HERO — brand immersion, floating orbs, device cluster
   ============================================================ */
.cs-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 12vw, 10rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  background: radial-gradient(125% 95% at 78% 0%, var(--roomio-deep2), var(--roomio-deep) 68%);
  color: #fff;
}
.cs-hero__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cs-hero__glow { position: absolute; width: 72vw; height: 72vw; top: -22vw; right: -12vw; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(122, 112, 255, 0.38), transparent 60%); filter: blur(34px); }

/* lava-lamp bubbles — big, heavily blurred, screen-blended so they glow and
   merge; JS drifts them slowly. filter (blur) is static so it stays GPU-cached
   while only transform animates. */
.cs-orb { position: absolute; border-radius: 50%; will-change: transform; mix-blend-mode: screen; }
.cs-orb--1 { width: clamp(270px, 40vw, 620px); aspect-ratio: 1; top: 0%;  left: -2%;  background: radial-gradient(circle at 42% 40%, #9a92ff, #3f38c6 72%); opacity: 0.5;  filter: blur(72px); }
.cs-orb--2 { width: clamp(170px, 24vw, 400px); aspect-ratio: 1; top: 54%; left: 6%;   background: radial-gradient(circle at 42% 40%, #b4adff, #524ae4 74%); opacity: 0.44; filter: blur(66px); }
.cs-orb--3 { width: clamp(290px, 44vw, 680px); aspect-ratio: 1; top: 34%; right: -8%; background: radial-gradient(circle at 40% 38%, #857bff, #302a9c 76%); opacity: 0.5;  filter: blur(80px); }
.cs-orb--4 { width: clamp(140px, 20vw, 320px); aspect-ratio: 1; top: 6%;  right: 14%; background: radial-gradient(circle at 42% 40%, #dbd7ff, #857dff 74%); opacity: 0.42; filter: blur(58px); }
.cs-orb--5 { width: clamp(130px, 18vw, 280px); aspect-ratio: 1; top: 74%; left: 42%;  background: radial-gradient(circle at 42% 40%, #ecebff, #8f88ff 74%); opacity: 0.4;  filter: blur(58px); }
.cs-orb--6 { width: clamp(200px, 28vw, 460px); aspect-ratio: 1; top: -8%; left: 32%;  background: radial-gradient(circle at 42% 40%, #786fff, #2f2a92 76%); opacity: 0.42; filter: blur(74px); }
.cs-orb--7 { width: clamp(110px, 15vw, 240px);  aspect-ratio: 1; top: 82%; right: 16%; background: radial-gradient(circle at 42% 40%, #cec9ff, #6f66ff 74%); opacity: 0.44; filter: blur(52px); }

.cs-back {
  position: absolute; top: calc(72px + 1.4rem); left: var(--gutter); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; font-weight: 500;
  padding: 0.75rem 0.5rem; margin: -0.75rem -0.5rem;   /* 44px-class hit area, same visual position */
  color: rgba(255,255,255,0.78); transition: color 0.3s, transform 0.3s var(--ease);
}
.cs-back:hover { color: #fff; transform: translateX(-3px); }

.cs-hero__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; perspective: 1200px; }
.cs-hero__kicker { font-size: 1rem; font-weight: 500; letter-spacing: 0.005em; color: rgba(255,255,255,0.58); }
.cs-hero__kicker b { color: #fff; font-weight: 600; }
.cs-hero__title { margin-top: clamp(1.4rem, 2.6vw, 1.9rem); font-family: var(--font-display); font-weight: var(--display-weight-max); font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -0.015em; }
.cs-hero__sub { margin-top: var(--sp-4); max-width: 46ch; font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.6; color: rgba(255,255,255,0.82); text-wrap: pretty; }
.cs-hero__meta { margin-top: 1.9rem; }
.cs-hero__meta li { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; box-shadow: none; font-weight: 500; padding-left: 1rem; }
.cs-hero__meta li::before { display: none; }

/* device cluster */
.cs-hero__stage {
  position: relative; justify-self: center; align-self: center;
  width: min(100%, 470px); aspect-ratio: 1 / 1.04;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d; will-change: transform;
}
.cs-hero__phone {
  position: absolute; border-radius: 40px; background: #141230; padding: 9px;
  box-shadow: 0 42px 84px -26px rgba(8,6,40,0.72), 0 6px 20px rgba(8,6,40,0.35);
  will-change: transform;
}
.cs-hero__phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
.cs-hero__phone--front { width: 65%; z-index: 2; transform: translateX(-16%) rotate(-3deg); }
.cs-hero__phone--back  { width: 59%; z-index: 1; transform: translateX(44%) translateY(-7%) rotate(6deg); }

.cs-hero__hint { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.7); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.cs-hero__hint-line { width: 1px; height: 38px; background: linear-gradient(#fff, transparent); animation: csHint 1.8s var(--ease) infinite; }
@keyframes csHint { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { transform: scaleY(1); transform-origin: top; opacity: 1; } 60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }

/* ============================================================
   OVERVIEW — a lead statement over a horizontal spec row
   ============================================================ */
.cs-overview { max-width: 1120px; margin: 0 auto; padding: var(--cs-pad-entry) var(--gutter) var(--cs-pad); }
.cs-overview__top { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; perspective: 1200px; }
.cs-overview__intro { align-self: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; max-width: 22ch; }
.cs-overview__intro b { color: var(--accent); font-weight: 600; }
/* on-brand logo panel — fills the right on big screens */
.cs-overview__panel { position: relative; overflow: hidden; border-radius: 22px; min-height: clamp(200px, 26vw, 300px); display: flex; align-items: center; justify-content: center; padding: clamp(1.8rem, 4vw, 3rem); background: radial-gradient(130% 130% at 25% 12%, var(--roomio-deep2), var(--roomio-deep) 78%); box-shadow: 0 26px 54px -20px rgba(20,15,60,0.45); will-change: transform; transform-style: preserve-3d; }
.cs-overview__lockup { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: clamp(0.55rem, 1.3vw, 0.95rem); }
.cs-overview__lockup img { width: clamp(46px, 6.6vw, 82px); height: auto; filter: brightness(0) invert(1); }
.cs-overview__lockup span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -0.02em; color: #fff; }
.cs-overview__wm { position: absolute; right: -10%; bottom: -24%; width: 62%; height: auto; opacity: 0.1; filter: brightness(0) invert(1); pointer-events: none; }
.cs-overview__facts { margin-top: clamp(3rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); border-top: 1px solid var(--cream-2); padding-top: clamp(1.8rem, 3vw, 2.4rem); }
.cs-ov-fact { display: flex; flex-direction: column; gap: 0.55rem; }
.cs-ov-fact__k { font-family: var(--font-display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.cs-ov-fact__v { font-size: 1.02rem; line-height: 1.45; color: var(--ink); }

.cs-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
.cs-metric { display: flex; flex-direction: column; gap: var(--sp-1); }
.cs-metric__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; }
.cs-metric__n .sym { color: var(--accent); font-size: 0.62em; font-weight: 600; }
.cs-metric__l { font-size: 0.98rem; line-height: 1.4; color: var(--ink-soft); max-width: 22ch; }
.cs-metrics--light .cs-metric__n { color: #fff; }
.cs-metrics--light .cs-metric__n .sym { color: #b9b2ff; }
.cs-metrics--light .cs-metric__l { color: rgba(255,255,255,0.72); }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.cs-pull { margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem); background: #fff; border: 1px solid var(--cream-2); border-left: 4px solid var(--accent); border-radius: 16px; box-shadow: 0 14px 36px rgba(15,30,51,0.07); max-width: 60ch; }
.cs-pull blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.cs-pull figcaption { margin-top: 0.9rem; font-size: 0.95rem; color: var(--ink-soft); }

/* ============================================================
   BANDS (indigo statement + soft product band)
   ============================================================ */
.cs-band { background: radial-gradient(120% 130% at 20% 0%, var(--roomio-deep2), var(--roomio-deep) 72%); color: #fff; padding: var(--cs-band-pad) var(--gutter); }
.cs-band__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.cs-band__eyebrow { color: #b9b2ff; }
.cs-band__big { margin-top: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }

/* ---- The results: ONE animated scoreboard, told in order. The four outcome metrics LEAD
   (count up in hairline columns); a thin stem then draws down from them into where it all
   landed: the App Store moment, where the rank counts DOWN into place (climbing the chart)
   and the five stars light up to 4.6 beside it. Two layers counter-parallax for depth. ---- */
.rm-results { overflow: hidden; }   /* parallax layers drift a touch past the padding */
.rm-results .cs-head { margin-bottom: var(--sp-7); }   /* the scoreboard is a major beat: 48 → 80 */
.rm-results__metrics {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px; margin: 0 auto;
  gap: 0; text-align: center;
}
/* editorial columns: centered numbers separated by thin hairlines (structure, not ornament) */
.rm-results__metrics .cs-metric { align-items: center; padding: 0.4rem clamp(1rem, 2.5vw, 2rem); border-left: 1px solid rgba(255, 255, 255, 0.16); }
.rm-results__metrics .cs-metric:first-child { border-left: 0; }
.rm-results__metrics .cs-metric__n { font-size: clamp(2.6rem, 5.4vw, 4.1rem); }   /* the lead numbers, a notch up */
.rm-results__metrics .cs-metric__l { font-size: 1.02rem; max-width: 19ch; margin-inline: auto; }
@media (max-width: 900px) {
  .rm-results__metrics { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
  .rm-results__metrics .cs-metric:nth-child(odd) { border-left: 0; }
}

/* where it landed: the App Store moment. A 1px stem draws down from the metrics (the
   "all of that led to this" line), then eyebrow → No.150 → "Business apps chart · ★★★★★ 4.6".
   Stars light up in sequence, the fifth fills to 60%. Keyed on the block's own .is-in. */
.rm-results__store { position: relative; margin-top: var(--sp-6); text-align: center; }
.rm-results__stem {
  display: block; width: 1px; height: clamp(2.6rem, 5vw, 4rem); margin: 0 auto clamp(1.3rem, 2.4vw, 1.9rem);
  background: linear-gradient(180deg, rgba(185, 178, 255, 0), #b9b2ff 40%, #b9b2ff);
  transform: scaleY(0); transform-origin: top; transition: transform 0.9s var(--ease) 0.05s;
}
.rm-results__store.is-in .rm-results__stem { transform: scaleY(1); }
.rm-results__store-eyebrow { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: #b9b2ff; }
.rm-chart__no {
  display: flex; align-items: baseline; justify-content: center; gap: 1rem;
  margin: 0.5rem 0 0; font-family: var(--font-display); font-weight: 800;
  line-height: 0.95; letter-spacing: -0.03em;
}
.rm-chart__no span { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 600; color: #b9b2ff; }
.rm-chart__no b { font-size: clamp(4.8rem, 13vw, 10rem); font-variant-numeric: tabular-nums; color: #fff; }
.rm-results__store-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem clamp(0.9rem, 2vw, 1.3rem); margin-top: 0.9rem; }
.rm-chart__sub { margin: 0; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, 0.78); }
.rm-chart__sub b { color: #fff; font-weight: 600; }
.rm-results__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.38); }
.rm-results__rating { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.rm-results__stars { display: inline-flex; gap: 0.2rem; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1; }
.rm-results__stars i {
  font-style: normal; color: #f7c948;
  opacity: 0; transform: translateY(6px) scale(0.6);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.rm-results__store.is-in .rm-results__stars i { opacity: 1; transform: none; }
.rm-results__store.is-in .rm-results__stars i:nth-child(1) { transition-delay: 0.55s; }
.rm-results__store.is-in .rm-results__stars i:nth-child(2) { transition-delay: 0.67s; }
.rm-results__store.is-in .rm-results__stars i:nth-child(3) { transition-delay: 0.79s; }
.rm-results__store.is-in .rm-results__stars i:nth-child(4) { transition-delay: 0.91s; }
.rm-results__store.is-in .rm-results__stars i:nth-child(5) { transition-delay: 1.03s; }
.rm-results__stars .is-part {
  background: linear-gradient(90deg, #f7c948 60%, rgba(255, 255, 255, 0.22) 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rm-results__rating b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: #fff; font-variant-numeric: tabular-nums; }
.rm-results__rating-l { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, 0.78); }
@media (max-width: 560px) {
  /* the chart line and the rating stack; no dangling separator dot */
  .rm-results__store-row { flex-direction: column; gap: 0.55rem; }
  .rm-results__sep { display: none; }
  .rm-results__store-eyebrow { font-size: 0.68rem; letter-spacing: 0.12em; }
}
/* third beat of the band's thread (numbers -> verdict -> voice): one real App Store
   review (Oct 2026), verbatim, hung on the SAME vertical stem axis as the rest of the
   scoreboard. Its stem continues down from the rating and fades lavender into gold
   (data voice -> star voice); its five stars are the SAME component as the rating's
   and light up right after the 4.6 stagger finishes, so the choreography reads:
   the rating lights up, then one of those voices steps forward. */
.rm-results__review { margin: clamp(1.9rem, 3.6vw, 2.8rem) auto 0; max-width: 54ch; }
.rm-results__stem--review {
  height: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
  background: linear-gradient(180deg, rgba(185, 178, 255, 0), #b9b2ff 50%, #f7c948);
  transition-delay: 0.95s;
}
.rm-results__stars--review { font-size: clamp(1rem, 1.5vw, 1.2rem); }
.rm-results__store.is-in .rm-results__stars--review i:nth-child(1) { transition-delay: 1.45s; }
.rm-results__store.is-in .rm-results__stars--review i:nth-child(2) { transition-delay: 1.55s; }
.rm-results__store.is-in .rm-results__stars--review i:nth-child(3) { transition-delay: 1.65s; }
.rm-results__store.is-in .rm-results__stars--review i:nth-child(4) { transition-delay: 1.75s; }
.rm-results__store.is-in .rm-results__stars--review i:nth-child(5) { transition-delay: 1.85s; }
.rm-results__review-q { margin: 0; }
.rm-results__review-t { margin: 0.55rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.01em; color: #fff; }
.rm-results__review-b { margin: 0.75em auto 0; font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.65; color: rgba(255, 255, 255, 0.78); }
.rm-results__review-src {
  display: block; margin: 1.1rem 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.74rem; letter-spacing: 0.08em; color: #b9b2ff;
}

@media (prefers-reduced-motion: reduce) {
  .rm-results__stars i { opacity: 1; transform: none; transition: none; }
  .rm-results__stem { transform: none; transition: none; }
}

/* hero badge: the chart milestone in the first screen (gold star, glass pill family) */
.cs-hero__meta .chip--hot { border-color: rgba(247, 201, 72, 0.5); background: rgba(247, 201, 72, 0.12); font-weight: 600; }
.cs-hero__meta .chip--hot span { color: #f7c948; margin-right: 0.4rem; }

.cs-band-soft { background: linear-gradient(180deg, var(--roomio-tint), #fbfaff); padding: var(--cs-band-pad) var(--gutter); }

/* ============================================================
   PROCESS
   ============================================================ */
/* =========================================================================================
   FROM THE FIELD · bento mosaic (Studio Freight calm mosaic + Humaan rounded cards).
   Standard .cs-head (page type system). Four photos in an asymmetric 3-col grid: one large
   (2x2), two small, one wide. All colour, all visible. Hover: caption slides up from the
   bottom edge; image eases 3%. Entrance via the shared [data-stagger]. CSS only.
   ========================================================================================= */
.rm-mosaic {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(150px, 17vw, 250px);
  gap: clamp(0.8rem, 1.4vw, 1.25rem);
}
.rm-mosaic__tile { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--cream-2); box-shadow: 0 18px 44px -26px rgba(15, 30, 51, 0.35); }
.rm-mosaic__tile--lg { grid-column: 1 / 3; grid-row: 1 / 3; }
.rm-mosaic__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.rm-mosaic__tile figcaption {
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.9rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.8rem 1rem; border-radius: 12px;
  background: rgba(32, 29, 107, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);   /* Roomio deep indigo, not a generic navy */
  color: #fff; font-size: 0.9rem; line-height: 1.4;
  transform: translateY(calc(100% + 1.2rem)); opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s var(--ease);
}
.rm-mosaic__tile figcaption b { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--roomio-tint); }   /* brand tint on brand indigo */
@media (hover: hover) and (pointer: fine) {
  .rm-mosaic__tile:hover img { transform: scale(1.035); }
  .rm-mosaic__tile:hover figcaption { transform: none; opacity: 1; }
}
/* touch: captions always shown (there is no hover to reveal them) */
@media (hover: none) { .rm-mosaic__tile figcaption { transform: none; opacity: 1; } }
.rm-mosaic__tile:focus-within figcaption { transform: none; opacity: 1; }
/* ≤720 (touch): no hover exists, so captions must live BELOW the photo, not over it. Tiles
   stack full-width, photo at 3:2 (always fully visible), caption as a text block underneath. */
@media (max-width: 720px) {
  .rm-mosaic { display: flex; flex-direction: column; gap: var(--sp-5); }
  .rm-mosaic__tile { border-radius: 16px; box-shadow: none; background: transparent; overflow: visible; }
  .rm-mosaic__tile--lg { grid-column: auto; grid-row: auto; }
  .rm-mosaic__tile img { aspect-ratio: 3 / 2; height: auto; border-radius: 16px; box-shadow: 0 18px 44px -26px rgba(15, 30, 51, 0.35); transform: none; }
  .rm-mosaic__tile figcaption {
    position: static; margin: var(--sp-3) 0.15rem 0; padding: 0; border-radius: 0;
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--ink); font-size: 0.98rem; line-height: 1.5; transform: none; opacity: 1;
    text-align: center; max-width: 38ch; margin-inline: auto;   /* mobile caption system: short captions centre under their media */
  }
  .rm-mosaic__tile figcaption b { color: var(--accent); font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-mosaic__tile img, .rm-mosaic__tile figcaption { transition: none; }
  .rm-mosaic__tile figcaption { transform: none; opacity: 1; }
}

/* =========================================================================================
   BRAND AND DESIGN SYSTEM · "the system, as tiles" (Dropbox Brand bento + Humaan blocks).
   Standard .cs-head. 4-col bento of five brand tiles; each tile alive in one small on-brand
   way. Brand tokens only. Mobile = compact 2-col, touch states designed explicitly.
   ========================================================================================= */
.rm-sys { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 17vw, 250px); gap: clamp(0.8rem, 1.4vw, 1.25rem); }
.rm-sys__tile {
  position: relative; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.6rem;
  padding: clamp(1rem, 2vw, 1.6rem); background: #fff; border: 1px solid var(--cream-2); color: var(--ink);
  box-shadow: 0 14px 34px -22px rgba(15, 30, 51, 0.25);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s var(--ease);
}
.rm-sys__tile:hover, .rm-sys__tile:focus-visible { transform: translateY(-4px); box-shadow: 0 28px 56px -24px rgba(15, 30, 51, 0.35); }
.rm-sys__lbl { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.95rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; display: flex; justify-content: space-between; gap: 0.6rem; }
.rm-sys__lbl b { font-weight: 700; letter-spacing: 0.12em; } .rm-sys__lbl i { font-style: normal; }

/* 01 logo: the real reversed lockup on brand indigo, 2 cols */
.rm-sys__tile--logo { grid-column: 1 / 3; background: #2a2794; border: 0; color: #fff; padding: 0; }
.rm-sys__logo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.rm-sys__tile--logo:hover .rm-sys__logo { transform: scale(1.04); }
.rm-sys__tile--logo .rm-sys__lbl { color: #fff; }

/* 02 palette: four horizontal bands; hover swells + reveals, click copies */
.rm-sys__tile--pal { padding: 0; flex-direction: column; gap: 0; align-items: stretch; justify-content: stretch; }
.rm-sys__band {
  position: relative; flex: 1 1 0; border: 0; cursor: pointer; background: var(--c); color: var(--on);
  display: flex; align-items: center; justify-content: space-between; padding: 0 1.1rem; text-align: left;
  font-family: var(--font-body); transition: flex 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.rm-sys__band b, .rm-sys__band span { opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.rm-sys__band b { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.rm-sys__band span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.06em; }
.rm-sys__band:hover, .rm-sys__band:focus-visible { flex: 2.6 1 0; }
.rm-sys__band:focus-visible { outline: 2px solid var(--on); outline-offset: -5px; }   /* ring in the band own on-color, visible on every swatch */
.rm-sys__band:hover b, .rm-sys__band:hover span, .rm-sys__band:focus-visible b, .rm-sys__band:focus-visible span { opacity: 1; transform: none; }
.rm-sys__toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.92); pointer-events: none; padding: 0.5rem 0.85rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.78rem; font-weight: 600; opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.rm-sys__toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 03 type: tint tile, huge Aa; weight cycles slowly on hover (JS) */
.rm-sys__tile--type { background: var(--roomio-tint); border: 0; color: var(--roomio-deep); }
.rm-sys__aa { font-family: "Fira Sans", sans-serif; font-size: clamp(4.2rem, 8vw, 7.5rem); line-height: 0.9; letter-spacing: -0.04em; transition: font-weight 0.6s ease-in-out, transform 0.5s var(--ease); }
.rm-sys__tile--type:hover .rm-sys__aa { transform: scale(1.04); }

/* 04 mark: the real glyph as vector; hover = it settles into its blueprint (grid + plan +
   dimension ticks draw in around it, the two readings label themselves). 2 cols. */
.rm-sys__tile--mark { grid-column: 1 / 3; flex-direction: row; gap: clamp(1rem, 2.5vw, 2rem); justify-content: center; color: var(--roomio-deep); padding-bottom: 2.4rem; }
.rm-sys__markstage { position: relative; flex: none; width: clamp(124px, 11vw, 160px); aspect-ratio: 1; }
.rm-sys__bp { width: 100%; height: 100%; display: block; color: var(--roomio-deep); }
.rm-sys__bp-mark { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s var(--ease); transform-origin: 80px 84px; }
.rm-sys__bp-grid { opacity: 0; transition: opacity 0.6s var(--ease) 0.1s; }
.rm-sys__bp-plan path, .rm-sys__bp-dim path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.rm-sys__bp-plan path:nth-child(1) { transition-delay: 0.10s; } .rm-sys__bp-plan path:nth-child(2) { transition-delay: 0.22s; }
.rm-sys__bp-plan path:nth-child(3) { transition-delay: 0.40s; } .rm-sys__bp-plan path:nth-child(4) { transition-delay: 0.50s; } .rm-sys__bp-plan path:nth-child(5) { transition-delay: 0.46s; }
.rm-sys__bp-dim path { transition-delay: 0.62s; }
.rm-sys__bp-tag { position: absolute; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--roomio); opacity: 0; transform: translateY(4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.rm-sys__bp-tag--a { left: 50%; top: 2%; transform: translate(-50%, 4px); transition-delay: 0.3s; }
.rm-sys__bp-tag--b { left: 50%; bottom: -2%; transform: translate(-50%, 4px); transition-delay: 0.75s; }
.rm-sys__tile--mark:hover .rm-sys__bp-mark, .rm-sys__tile--mark:focus-visible .rm-sys__bp-mark,
.rm-sys__tile--mark.is-on .rm-sys__bp-mark { transform: scale(0.92); opacity: 0.92; }
.rm-sys__tile--mark:hover .rm-sys__bp-grid, .rm-sys__tile--mark:focus-visible .rm-sys__bp-grid, .rm-sys__tile--mark.is-on .rm-sys__bp-grid { opacity: 0.35; }
.rm-sys__tile--mark:hover .rm-sys__bp-plan path, .rm-sys__tile--mark:hover .rm-sys__bp-dim path,
.rm-sys__tile--mark:focus-visible .rm-sys__bp-plan path, .rm-sys__tile--mark:focus-visible .rm-sys__bp-dim path,
.rm-sys__tile--mark.is-on .rm-sys__bp-plan path, .rm-sys__tile--mark.is-on .rm-sys__bp-dim path { stroke-dashoffset: 0; }
.rm-sys__tile--mark:hover .rm-sys__bp-tag, .rm-sys__tile--mark:focus-visible .rm-sys__bp-tag, .rm-sys__tile--mark.is-on .rm-sys__bp-tag { opacity: 1; }
.rm-sys__tile--mark:hover .rm-sys__bp-tag--a, .rm-sys__tile--mark.is-on .rm-sys__bp-tag--a { transform: translate(-50%, 0); }
.rm-sys__tile--mark:hover .rm-sys__bp-tag--b, .rm-sys__tile--mark.is-on .rm-sys__bp-tag--b { transform: translate(-50%, 0); }
.rm-sys__note { max-width: 26ch; font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft); }

/* 05 components: a compact live set. Hover = button lifts, toggle flips, chip pulses,
   progress fills, stepper advances. 2 cols. */
.rm-sys__tile--ui { grid-column: 3 / 5; }
.rm-sys__ui { display: flex; align-items: center; gap: clamp(0.7rem, 1.4vw, 1.2rem); flex-wrap: wrap; justify-content: center; }
.rm-sys__btn { padding: 0.62rem 1.05rem; border-radius: 999px; background: var(--roomio); color: #fff; font-weight: 600; font-size: 0.88rem; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(61, 55, 204, 0.6); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.rm-sys__chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.48rem 0.8rem; border-radius: 999px; background: var(--roomio-tint); color: var(--roomio-deep); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.rm-sys__chip i { width: 8px; height: 8px; border-radius: 50%; background: #1fb36b; box-shadow: 0 0 0 0 rgba(31, 179, 107, 0.5); }
.rm-sys__toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #d9d5e8; transition: background 0.35s var(--ease); justify-self: start; }
.rm-sys__toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15, 30, 51, 0.25); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.rm-sys__tile--ui:hover .rm-sys__btn, .rm-sys__tile--ui:focus-visible .rm-sys__btn { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(61, 55, 204, 0.7); }
.rm-sys__tile--ui:hover .rm-sys__toggle, .rm-sys__tile--ui:focus-visible .rm-sys__toggle { background: var(--roomio); }
.rm-sys__tile--ui:hover .rm-sys__toggle i, .rm-sys__tile--ui:focus-visible .rm-sys__toggle i { transform: translateX(20px); }
.rm-sys__tile--ui:hover .rm-sys__chip i { animation: rmPulse 1.2s ease-out infinite; }
@keyframes rmPulse { 0% { box-shadow: 0 0 0 0 rgba(31, 179, 107, 0.5); } 100% { box-shadow: 0 0 0 8px rgba(31, 179, 107, 0); } }

/* touch: hover states become resting states (there is no hover). Mark shows its blueprint. */
@media (hover: none) {
  .rm-sys__hint { display: none; }
  .rm-sys__band b, .rm-sys__band span { opacity: 1; transform: none; }
  .rm-sys__toggle { background: var(--roomio); } .rm-sys__toggle i { transform: translateX(20px); }
    .rm-sys__tile--mark .rm-sys__bp-grid { opacity: 0.35; }
  .rm-sys__tile--mark .rm-sys__bp-plan path, .rm-sys__tile--mark .rm-sys__bp-dim path { stroke-dashoffset: 0; }
  .rm-sys__tile--mark .rm-sys__bp-mark { transform: scale(0.92); }
  .rm-sys__tile--mark .rm-sys__bp-tag { opacity: 1; } .rm-sys__tile--mark .rm-sys__bp-tag--a, .rm-sys__tile--mark .rm-sys__bp-tag--b { transform: translate(-50%, 0); }
}
/* mobile: COMPACT. 2 cols; logo + mark + components span both; fixed modest heights so the
   section reads as one tidy board, not a long stack of boxes. */
@media (max-width: 900px) {
  .rm-sys { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 0.7rem; }
  .rm-sys__tile { border-radius: 16px; padding: 0.9rem; }
  .rm-sys__tile--logo { grid-column: 1 / 3; height: 150px; }
  .rm-sys__tile--pal { min-height: 0; padding: 0; border: 0; }
  .rm-sys__band { min-height: 44px; flex: 1 1 0; padding: 0 0.8rem; }
  .rm-sys__band b { font-size: 0.9rem; } .rm-sys__band span { font-size: 0.75rem; }
  .rm-sys__tile--type { justify-content: center; gap: 0.3rem; min-height: 176px; }
  .rm-sys__tile--type .rm-sys__lbl { position: static; justify-content: center; }
  .rm-sys__aa { font-size: 3.8rem; }
  /* mobile plaque system: each tile centres its specimen + label (matches the site-wide
     centred-caption rule); the palette stays a name/hex table — that one is data, not a caption */
  .rm-sys__tile--mark { grid-column: 1 / 3; flex-direction: column; align-items: center; gap: 0.9rem; padding: 1.2rem 1rem; min-height: 0; }
  .rm-sys__markstage { width: 96px; }
  .rm-sys__tile--mark .rm-sys__lbl, .rm-sys__tile--mark .rm-sys__bp-tag, .rm-sys__tile--mark .rm-sys__bp-grid, .rm-sys__tile--mark .rm-sys__bp-plan, .rm-sys__tile--mark .rm-sys__bp-dim { display: none; }
  .rm-sys__tile--mark .rm-sys__bp-mark { transform: none; opacity: 1; }
  .rm-sys__note { font-size: 0.92rem; max-width: 34ch; text-align: center; }
  .rm-sys__tile--ui { grid-column: 1 / 3; padding: 1.2rem 0.9rem 3.2rem; min-height: 0; }
  .rm-sys__ui { flex-wrap: wrap; gap: 0.8rem 0.7rem; justify-content: center; }
      .rm-sys__lbl { font-size: 0.75rem; letter-spacing: 0.08em; left: 0.9rem; right: 0.9rem; bottom: 0.7rem; justify-content: center; text-align: center; }
}
.rm-sys__lbl-x { font-style: normal; }
@media (max-width: 520px) { .rm-sys__tile--type .rm-sys__lbl i, .rm-sys__lbl-x { display: none; } }   /* label tails drop before they can wrap to an orphan */
@media (prefers-reduced-motion: reduce) {
  .rm-sys__tile, .rm-sys__band, .rm-sys__aa, .rm-sys__btn, .rm-sys__toggle, .rm-sys__toggle i, .rm-sys__logo,
  .rm-sys__bp-mark, .rm-sys__bp-grid, .rm-sys__bp-plan path, .rm-sys__bp-dim path, .rm-sys__bp-tag { transition: none; animation: none; }
}

/* =========================================================================================
   IN THE WILD · the originals are the section (Noguier proof-in-a-coloured-card + Humaan
   colour-blocks). Each artefact sits in its own frame (phone / paper / feed) on a brand
   colour-block card; asymmetric two-column composition. Hover/focus a card: a highlighter
   stroke draws across the key sentence and the card lifts; the caption rises beneath.
   ========================================================================================= */
.rm-ev { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: stretch; }
.rm-ev__col { display: grid; grid-template-rows: auto 1fr; gap: var(--sp-4); }
.rm-ev__card {
  position: relative; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); border-radius: 24px; overflow: hidden;
  box-shadow: 0 20px 50px -28px rgba(15, 30, 51, 0.35);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s var(--ease);
}
.rm-ev__card:hover, .rm-ev__card:focus-visible { transform: translateY(-5px); box-shadow: 0 36px 70px -30px rgba(15, 30, 51, 0.45); }
.rm-ev__card--phone { background: radial-gradient(120% 130% at 20% 0%, var(--roomio-deep2), var(--roomio-deep) 72%); color: #fff; align-items: center; justify-content: center; }
.rm-ev__card--mail { background: var(--roomio-tint); color: var(--ink); }
.rm-ev__card--post { background: #fff; border: 1px solid var(--cream-2); color: var(--ink); }
/* frames */
.rm-ev__device { width: min(100%, 380px); padding: 10px; border-radius: 34px; background: #0f1222; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rm-ev__screen { position: relative; border-radius: 26px; overflow: hidden; background: #fff; }
.rm-ev__screen img { width: 100%; height: auto; display: block; }
.rm-ev__paper { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 14px 34px -20px rgba(15, 30, 51, 0.3); border: 1px solid rgba(38, 36, 33, 0.08); }
.rm-ev__paper img { width: 100%; height: auto; display: block; }
/* the highlighter: a marker stroke positioned in image-percent coords; draws left-to-right */
.rm-ev__hl {
  position: absolute; top: var(--t); left: var(--l); width: var(--w); height: var(--h);
  background: rgba(255, 214, 74, 0.55); border-radius: 3px; mix-blend-mode: multiply;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.rm-ev__card:hover .rm-ev__hl, .rm-ev__card:focus-visible .rm-ev__hl { transform: scaleX(1); }
/* caption */
.rm-ev__card figcaption { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; }
.rm-ev__card--phone figcaption { width: min(100%, 380px); }   /* aligns to the phone's left edge */
.rm-ev__src { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; }
.rm-ev__q { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.rm-ev__card--phone .rm-ev__q { color: var(--roomio-tint); }
.rm-ev__card--mail .rm-ev__q, .rm-ev__card--post .rm-ev__q { color: var(--accent); }
/* touch: highlighter shown at rest (nothing to reveal on hover) */
@media (hover: none) { .rm-ev__hl { transform: scaleX(1); } }
@media (max-width: 900px) {
  .rm-ev { grid-template-columns: 1fr; }
  .rm-ev__col { grid-template-rows: auto auto; }
  .rm-ev__card { border-radius: 20px; }
  .rm-ev__device { width: 100%; }
  .rm-ev__card figcaption { text-align: center; align-items: center; }   /* mobile caption system: label + quote centre under the media */
  .rm-ev__src { letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) { .rm-ev__card, .rm-ev__hl { transition: none; } .rm-ev__hl { transform: scaleX(1); } }

/* ============================================================
   PRODUCT WALKTHROUGH
   ============================================================ */
.cs-product { max-width: 1180px; margin: 0 auto; }
.cs-flow { position: relative; max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(3.5rem, 7vw, 6rem); }
/* narrative thread — a slim accent line down the left margin that DRAWS with scroll
   (MindMarket-style spine, kept in the margin so it never crosses the caption). */
.cs-flow__thread { position: absolute; left: -3.5rem; top: 4%; bottom: 10%; width: 2px; border-radius: 2px; background: var(--cream-2); overflow: hidden; }
.cs-flow__thread span { display: block; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(var(--accent), var(--roomio-deep2)); transform: scaleY(0); transform-origin: top; }
.cs-flow__item { width: 100%; max-width: 840px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: center; perspective: 1100px; }
.cs-flow__item--rev { grid-template-columns: 1fr 300px; }
.cs-flow__item--rev .cs-phone { order: 2; }
.cs-phone { position: relative; justify-self: center; width: min(100%, 300px); background: #141230; padding: 10px; border-radius: 46px; box-shadow: 0 30px 60px -20px rgba(20,15,60,0.4), 0 4px 14px rgba(20,15,60,0.14); will-change: transform; transform-style: preserve-3d; }
.cs-phone img { display: block; width: 100%; height: auto; border-radius: 36px; }
.cs-flow__cap { max-width: 40ch; }
.cs-flow__step { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
/* leading line (the site's eyebrow motif) that DRAWS in as each step reveals — a per-step "narrative thread" */
.cs-flow__step::before { content: ""; flex: none; width: 1.9rem; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.75s var(--ease) 0.15s; }
.cs .reveal.is-in .cs-flow__step::before { transform: scaleX(1); }
.cs-flow__cap h3 { margin: 0.5rem 0 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.015em; color: var(--ink); }
.cs-flow__cap p { font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); }

.cs-gallery__head { margin-top: clamp(4rem, 8vw, 7rem); text-align: center; }
.cs-gallery__head .cs-flow__step { display: inline-flex; }
.cs-gallery__head h3 { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.015em; color: var(--ink); }
.cs-gallery { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; justify-content: center; align-items: center; gap: clamp(1.6rem, 4vw, 3.2rem); flex-wrap: wrap; perspective: 1100px; }
.cs-gallery__item { text-align: center; }
.cs-gallery__media { will-change: transform; transform-style: preserve-3d; margin: 0 auto; }
.cs-gallery__phone { width: clamp(200px, 24vw, 240px); background: #141230; padding: 9px; border-radius: 40px; box-shadow: 0 32px 64px -20px rgba(20,15,60,0.5), 0 6px 18px rgba(20,15,60,0.2); }
.cs-gallery__phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
.cs-gallery__wide img { display: block; width: clamp(300px, 40vw, 440px); border-radius: 22px; box-shadow: 0 32px 64px -20px rgba(20,15,60,0.42); border: 1px solid rgba(20,15,60,0.06); }
.cs-gallery figcaption { margin-top: var(--sp-3); font-size: 0.92rem; color: var(--ink-soft); }

/* ============================================================
   BRAND & DESIGN SYSTEM
   ============================================================ */

/* House-mark callout (left column) — reinforces the mark/floor-plan story */
.cs-brand__mark { margin-top: clamp(1.9rem, 3.5vw, 2.6rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--cream-2); display: flex; align-items: center; gap: 1.1rem; max-width: 44ch; }
.cs-brand__mark-icon { flex: none; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 15px; background: var(--roomio-tint); border: 1px solid var(--cream-2); }
.cs-brand__mark-icon img { width: 30px; height: 30px; }
.cs-brand__mark p { font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }

/* Right column — identity stack */

/* Reversed logo plate on the brand indigo (the standout moment) */


/* Type specimen — set in Fira Sans, the product typeface */

/* ============================================================
   IN THE WILD / REVIEWS
   ============================================================ */

/* ============================================================
   RESULTS band metrics
   ============================================================ */
.cs-results .cs-metrics { grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin-inline: auto; }

/* ============================================================
   NEXT / CTA
   ============================================================ */
.cs-next { position: relative; padding: var(--cs-pad-tight) var(--gutter) clamp(4rem, 7.5vw, 6.5rem); text-align: center; }
/* connector — the site's line motif, drawn on scroll, leading the eye from the
   reflection down into the closing card so the two beats read as one deliberate coda */
.cs-next__thread { display: block; width: 2px; height: clamp(48px, 7vw, 76px); margin: 0 auto clamp(1.9rem, 3.4vw, 2.7rem); border-radius: 2px; background: linear-gradient(var(--cream-2), var(--accent)); transform: scaleY(0); transform-origin: top; transition: transform 0.85s var(--ease); }
.cs-next:has(.cs-next__card.is-in) .cs-next__thread { transform: scaleY(1); }
/* closing card — a contained indigo panel: contrasts the light reflection above it
   and the flat outcomes band, so the page ends on a confident, distinct invitation */
.cs-next__card { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(2.9rem, 6vw, 4.75rem) clamp(1.7rem, 5vw, 4rem); border-radius: clamp(24px, 3vw, 34px); background: radial-gradient(120% 140% at 22% 0%, var(--roomio-deep2), var(--roomio-deep) 72%); box-shadow: 0 40px 84px -34px rgba(20, 15, 60, 0.6); color: #fff; }
.cs-next__card .section__eyebrow { color: #b9b2ff; }
.cs-next__h { margin-top: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.1rem, 5vw, 3.35rem); line-height: 1.06; letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.cs-next__actions { margin-top: clamp(1.9rem, 3.4vw, 2.6rem); display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
.cs-next__card .contact__btn { background: #fff; color: var(--roomio-deep); box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.45); }
.cs-next__card .contact__btn:hover { box-shadow: 0 20px 42px -8px rgba(0, 0, 0, 0.55); }
.cs-next__card .contact__btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.5); box-shadow: none; }
.cs-next__card .contact__btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; box-shadow: none; }

/* ============================================================
   SPLIT (text + visual, alternating) — Problem, Role
   ============================================================ */
/* text column gets the larger share so the 57.6px title wraps at phrase boundaries, not word by word */
.cs-split { max-width: 1120px; margin: 0 auto; padding: var(--cs-pad) var(--gutter); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.cs-split--rev { grid-template-columns: 0.8fr 1.2fr; }
.cs-split--rev .cs-split__text { order: 2; }
.cs-split__text { max-width: 56ch; }
/* role titles break at the comma ("I led product design, / end to end."), not force-balanced mid-phrase */
.cs-split__text .cs-h2 { margin-bottom: var(--sp-4); text-wrap: pretty; }
.cs-split__visual { justify-self: center; width: 100%; display: flex; justify-content: center; perspective: 1100px; }
.cs-split__visual .cs-phone { margin: 0; }

/* ---- My-role character scene: claymation cutout + Roomio accents orbiting it
   (same idea as the home hello-scene, retuned to the Roomio palette + product motifs) ---- */
.cs-role-scene { position: relative; width: 100%; max-width: 380px; margin-inline: auto; }
.rs-figure { position: relative; z-index: 2; width: min(56%, 210px); margin: 0 auto; will-change: transform; }
.rs-figure img { width: 100%; height: auto; display: block; filter: drop-shadow(0 34px 40px rgba(20, 15, 60, 0.30)); will-change: transform; }
.rs-glow { position: absolute; z-index: 0; inset: -8% -6% -4%; background: radial-gradient(46% 50% at 50% 46%, rgba(61, 55, 204, 0.22) 0%, rgba(61, 55, 204, 0.08) 46%, transparent 74%); pointer-events: none; }
/* each accent: outer span = scroll-parallax target, inner = idle bob (shared iaFloat) */
.rs-item { position: absolute; z-index: 3; will-change: transform; pointer-events: none; }
.rs-item > * { display: block; animation: iaFloat 6s ease-in-out infinite; }
.rs-item--ring  { z-index: 1; top: 5%;   left: -3%; }   .rs-item--ring  > * { animation-duration: 8s; }
.rs-item--orb1  { z-index: 1; top: 30%;  right: -1%; }  .rs-item--orb1  > * { animation-duration: 6.5s; }
.rs-item--mark  { z-index: 4; top: 1%;   right: 2%; }   .rs-item--mark  > * { animation-duration: 6.2s; animation-delay: 0.3s; }
.rs-item--spark { z-index: 4; top: 24%;  left: 1%; }    .rs-item--spark > * { animation-duration: 7s;   animation-delay: 0.2s; }
.rs-item--dot   { z-index: 4; top: 55%;  left: 3%; }    .rs-item--dot   > * { animation-duration: 5s;   animation-delay: 0.7s; }
.rs-item--tint  { z-index: 4; bottom: 12%; right: 3%; } .rs-item--tint  > * { animation-duration: 5.6s; animation-delay: 0.5s; }
.rs-item--plan  { z-index: 4; bottom: 16%; left: -4%; } .rs-item--plan  > * { animation-duration: 6.8s; animation-delay: 0.15s; }

/* tokens — Roomio indigo palette */
.rs-orb { border-radius: 50%; box-shadow: 0 16px 28px rgba(20, 15, 60, 0.22); }
.rs-orb--indigo { width: clamp(40px, 9vw, 62px); aspect-ratio: 1; background: radial-gradient(circle at 32% 28%, #7f79ec, #3d37cc 64%, #2f2aa0); }
.rs-orb--tint   { width: clamp(24px, 5vw, 36px); aspect-ratio: 1; background: radial-gradient(circle at 34% 30%, #ffffff, #d7d3fb 74%); }
.rs-dot  { width: clamp(14px, 3vw, 20px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #938df0, #3d37cc 72%); box-shadow: 0 8px 14px rgba(20, 15, 60, 0.20); }
.rs-ring { width: clamp(48px, 10vw, 76px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(61, 55, 204, 0.30); }
.rs-spark { width: clamp(16px, 3.4vw, 24px); aspect-ratio: 1; background: var(--accent); opacity: 0.9;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
/* Roomio house-mark chip */
.rs-mark { width: clamp(46px, 11vw, 64px); aspect-ratio: 1; display: grid; place-items: center; padding: 20%; background: #fff; border-radius: 30%; box-shadow: 0 18px 34px rgba(20, 15, 60, 0.20); }
.rs-mark img { width: 100%; height: auto; display: block; }
/* mini floor-plan card (the product, in one glyph) */
.rs-plan { width: clamp(72px, 16vw, 100px); padding: 13px 14px; background: #fff; border-radius: 15px; box-shadow: 0 18px 34px rgba(20, 15, 60, 0.20); transform: rotate(-6deg); color: var(--accent); }
.rs-plan svg { display: block; width: 100%; height: auto; }

/* ============================================================
   STATEMENT — editorial problem/insight block (bold + muted)
   ============================================================ */
/* PROBLEM — readable editorial (title left, body right) */
.cs-problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 5vw, 4rem); align-items: start; }
.cs-problem__body { max-width: 60ch; }
.cs-problem__body p { font-size: clamp(1.12rem, 1.4vw, 1.25rem); line-height: 1.75; color: var(--ink-soft); text-wrap: pretty; }
.cs-problem__body p + p { margin-top: 1.4rem; }
.cs-problem__body b { color: var(--accent); font-weight: 600; white-space: nowrap; }


/* ============================================================
   REFLECTION — centered close
   ============================================================ */
/* container is wide enough for a one-line 57.6px title; the paragraph keeps its own reading measure */
.cs-reflect { max-width: 1000px; margin: 0 auto; padding: var(--cs-pad) var(--gutter) var(--cs-pad-tight); text-align: center; }
.cs-reflect .section__eyebrow { display: inline-flex; }
.cs-reflect__h { margin-top: 0; }
.cs-reflect__p { margin-top: var(--sp-4); max-width: 50ch; margin-inline: auto; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }

/* ============================================================
   REVEAL (mirrors home)
   ============================================================ */
.cs .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.cs .reveal.is-in { opacity: 1; transform: none; }
/* Tilt cards are transform-driven by GSAP every frame — a persistent CSS transition
   on transform makes the tilt lag ~0.9s and only settle when the cursor stops.
   Reveal these by opacity only so GSAP owns the transform. */
.cs .reveal[data-tilt-card] { transition: opacity 0.9s var(--ease); }

/* ============================================================
   PAGE TRANSITION — enter curtain (covers at paint, wipes up)
   ============================================================ */
body.cs .pt { transform: translateY(0); }
body.cs .pt--enter { animation: ptReveal 0.82s cubic-bezier(0.76, 0, 0.24, 1) 0.05s forwards; }
/* word intro now lives in the pages' inline critical CSS (ptWordIn) so it plays at
   first paint on slow connections and never restarts when this stylesheet arrives */
@keyframes ptReveal { to { transform: translateY(-100%); } }
@keyframes ptWord { 0% { opacity: 0; transform: translateY(10px); } 45% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* the margin thread lives in the gutter — hide it once the layout narrows enough that
   its left offset would reach the viewport edge (before the items even stack) */
@media (max-width: 1024px) {
  .cs-flow__thread { display: none; }
}
@media (max-width: 900px) {
  /* Alignment is breakpoint-independent: content stays LEFT on mobile (matches desktop),
     only the short statement blocks (bands, reflect, CTA) stay centered. No section flips. */
  .cs-hero__inner { grid-template-columns: 1fr; }
  .cs-hero__stage { width: min(76%, 320px); aspect-ratio: 1 / 1.16; margin: 2.6rem auto 0; }
  .cs-hero__phone--back { display: none; }
  .cs-hero__phone--front { position: relative; width: 100%; transform: none; }
  .cs-overview__top { grid-template-columns: 1fr; gap: 2rem; }
  .cs-overview__intro { max-width: none; }
  .cs-overview__panel { min-height: 170px; }
  .cs-problem__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .cs-flow__thread { display: none; }
  .cs-flow__item, .cs-flow__item--rev { grid-template-columns: 1fr; gap: var(--sp-3); }
  .cs-flow__item--rev .cs-phone { order: 0; }
  /* center each step + its copy to sit under the centered phone (matches the images) */
  .cs-flow__cap, .cs-flow__item--rev .cs-flow__cap { justify-self: center; text-align: center; max-width: 46ch; margin: 0 auto; }
  .cs-phone { width: min(66%, 240px); }                 /* smaller mockups on mobile */
  .cs-flow { gap: var(--sp-7); }                          /* step → step: a beat (48 → 80), always under the section padding */
  .cs-split, .cs-split--rev { grid-template-columns: 1fr; gap: 2.4rem; }
  .cs-split--rev .cs-split__text { order: 0; }
}
@media (max-width: 820px) {
  /* four spec facts crowd once the overview top has stacked — reflow to 2 columns */
  .cs-overview__facts { grid-template-columns: repeat(2, 1fr); row-gap: 1.8rem; }
}
@media (max-width: 720px) {
  .cs-metrics { grid-template-columns: 1fr 1fr; }
  .cs-results .cs-metrics { grid-template-columns: 1fr 1fr; }
  .cs-back { top: calc(60px + 0.8rem); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cs .reveal { opacity: 1; transform: none; transition: none; }
  .cs-hero__hint-line { animation: none; }
  body.cs .pt--enter, body.cs .pt--enter .pt__word { animation: none; }
  .cs-flow__step::before { transform: scaleX(1); transition: none; }
  .cs-flow__thread { display: none; }
  .cs-next__thread { transition: none; }
}

/* ============================================================
   JOBTEASER SKIN (body.cs.jt) — bold black surfaces + a vivid
   signal green, with magenta / violet sparks. Reuses every .cs-*
   component; recolours the tokens + the few hardcoded brand bits,
   and adds a handful of JobTeaser-only parts (search-bar panel,
   research grid, web showcase, design-system grid).
   ============================================================ */
body.jt {
  --accent: #12c368;          /* JobTeaser signal green */
  /* NOTE: text on light surfaces deliberately uses the full-flash brand green below —
     his explicit call (brand consistency + pop over WCAG contrast on those labels) */
  --roomio: #12c368;
  --roomio-deep: #0b0c0e;     /* near-black deep surface (hero, bands, panel) */
  --roomio-deep2: #191b1f;    /* lifted black */
  --roomio-tint: #e8f8ef;     /* faint green wash (soft band) */
}
/* the single accent focus ring is invisible on brand surfaces — swap it per surface */
body.cs .cs-hero :focus-visible, .cs-band :focus-visible, .cs-next__card :focus-visible,
body.cs .nav:not(.is-solid):not(.is-scrolled) :focus-visible, body.cs .mmenu :focus-visible { outline-color: #fff; }
body.jt .nav.is-solid :focus-visible, body.jt .nav.is-scrolled :focus-visible { outline-color: var(--ink); }
/* Roomio indigo mobile menu: accent-on-indigo index numerals were near-invisible */
body.cs:not(.jt) .mmenu__links a i { color: #b9b2ff; }
/* eyebrows: black label + green tick on light; green label on dark surfaces */
body.jt .section__eyebrow { color: var(--ink); }
body.jt .section__eyebrow::before { background: var(--accent); }
body.jt .cs-band .section__eyebrow,
body.jt .cs-next__card .section__eyebrow { color: var(--accent); }
body.jt .cs-hero__kicker b { color: var(--accent); }

/* hero decor — greens, plus a magenta + a violet spark */
body.jt .cs-hero__glow { background: radial-gradient(circle, rgba(18,195,104,0.42), transparent 66%); }
body.jt .cs-orb--1 { background: radial-gradient(circle at 42% 40%, #48f094, #12b365 72%); }
body.jt .cs-orb--2 { background: radial-gradient(circle at 42% 40%, #86f2b8, #16c76a 74%); }
body.jt .cs-orb--3 { background: radial-gradient(circle at 40% 38%, #2fe08a, #0d7d4c 76%); }
body.jt .cs-orb--4 { background: radial-gradient(circle at 42% 40%, #d9ffe9, #4be79a 74%); }
body.jt .cs-orb--5 { background: radial-gradient(circle at 42% 40%, #ff9ac8, #ff2e7e 74%); opacity: 0.32; }
body.jt .cs-orb--6 { background: radial-gradient(circle at 42% 40%, #43e893, #0e6f46 76%); }
body.jt .cs-orb--7 { background: radial-gradient(circle at 42% 40%, #c3b3ff, #7b61ff 74%); opacity: 0.34; }
body.jt .cs-hero__phone { background: #0c0d10; box-shadow: 0 42px 84px -26px rgba(0,0,0,0.72), 0 6px 20px rgba(0,0,0,0.4); }

/* dark phone frames, green metric symbols, JobTeaser buttons (green + black label) */
body.jt .cs-phone { background: #0c0d10; }
body.jt .cs-metrics--light .cs-metric__n .sym { color: var(--accent); }
body.jt .contact__btn { color: #06210f; box-shadow: 0 10px 24px rgba(18,195,104,0.34); }
body.jt .contact__btn:hover { box-shadow: 0 16px 34px rgba(18,195,104,0.46); }
body.jt .contact__btn--ghost { color: var(--ink); border-color: rgba(11,12,14,0.24); box-shadow: none; }
body.jt .contact__btn--ghost:hover { background: rgba(18,195,104,0.10); border-color: var(--accent); }
body.jt .chips li:hover { border-color: rgba(18,195,104,0.45); }   /* chips hover tints JT green, not home blue */
body.jt .nav__cta, body.jt .nav.is-solid .nav__cta { background: var(--accent); color: #06210f; }
body.jt .cs-next__card .contact__btn { background: var(--accent); color: #06210f; box-shadow: 0 14px 30px -8px rgba(0,0,0,0.5); }
body.jt .cs-next__card .contact__btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
/* Hover rules MUST follow the two card rules above: those tie/beat the generic :hover rules in the
   cascade, which left both closing-card buttons hover-dead on this page. Mirrors the Roomio card. */
body.jt .cs-next__card .contact__btn:hover { box-shadow: 0 20px 42px -8px rgba(0,0,0,0.6), 0 10px 32px rgba(18,195,104,0.3); }
body.jt .cs-next__card .contact__btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* role-scene accents recoloured for JobTeaser + JobTeaser motif tokens */
body.jt .rs-glow { background: radial-gradient(46% 50% at 50% 46%, rgba(18,195,104,0.22) 0%, rgba(18,195,104,0.08) 46%, transparent 74%); }
body.jt .rs-orb--indigo { background: radial-gradient(circle at 32% 28%, #46ec92, #12b365 64%, #0d7d4c); }
body.jt .rs-orb--tint { background: radial-gradient(circle at 34% 30%, #ffffff, #d3f6e2 74%); }
body.jt .rs-dot { background: radial-gradient(circle at 32% 28%, #57e79a, #12b365 72%); }
body.jt .rs-ring { border-color: rgba(18,195,104,0.34); }
body.jt .rs-spark { background: #ff2e7e; }
body.jt .rs-mark { color: var(--accent); }
body.jt .rs-mark svg { width: 100%; height: auto; }

/* clay-dot chips recoloured to the JobTeaser palette (green / magenta / violet) */
body.jt .chips li::before { background: radial-gradient(circle at 32% 28%, #4be79a, #12b365 78%); }
body.jt .chips li:nth-child(2)::before { background: radial-gradient(circle at 32% 28%, #ff8fc4, #ff2e7e 78%); }
body.jt .chips li:nth-child(3)::before { background: radial-gradient(circle at 32% 28%, #c3b3ff, #7b61ff 78%); }
body.jt .chips li:nth-child(4)::before { background: radial-gradient(circle at 32% 28%, #4be79a, #12b365 78%); }
body.jt .chips li:nth-child(5)::before { background: radial-gradient(circle at 32% 28%, #6a6a72, #26262c 78%); }

/* brand type specimen in Poppins (JobTeaser / Spark body font) */

/* ---- Overview panel styled as JobTeaser's signature black search bar ---- */
.jt-panel { flex-direction: column; align-items: stretch; gap: clamp(1rem, 2.4vw, 1.5rem); text-align: left; }
.jt-panel__bar { display: flex; align-items: center; gap: 0.7rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 0.65rem 0.7rem 0.65rem 1rem; }
.jt-panel__q { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--accent); position: relative; }
.jt-panel__q::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 7px; height: 2px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.jt-panel__ph { flex: 1; color: rgba(255,255,255,0.6); font-size: 0.95rem; }
.jt-panel__go { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); }
.jt-panel__stat { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.55rem); line-height: 1.32; letter-spacing: -0.01em; color: #fff; }
.jt-panel__stat b { color: var(--accent); font-weight: 700; }

/* ---- Reusable media frame (research photos + design-system docs) ---- */
.cs-shot { position: relative; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 26px 54px -24px rgba(11,12,14,0.4); will-change: transform; transform-style: preserve-3d; }
.cs-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-shot--tall, .cs-shot--wide { aspect-ratio: 3 / 4; }
.cs-shot--doc { aspect-ratio: 3 / 4.2; background: #0b0c0e; }

/* ---- Research & workshops ---- */
.cs-research__stats { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: clamp(2rem, 6vw, 4.5rem); }
.cs-rstat__n { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-rstat__n .sym { color: var(--accent); font-size: 0.6em; font-weight: 600; margin-left: 0.04em; }
.cs-rstat__l { display: block; margin-top: 0.5rem; font-size: 0.96rem; color: var(--ink-soft); }
.cs-research__grid { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); perspective: 1200px; }
.cs-research__item figcaption { margin-top: var(--sp-3); font-size: 0.95rem; color: var(--ink-soft); }
.cs-research__note { max-width: 62ch; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; text-align: center; font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }

/* ---- Web showcase ---- */
.cs-web { margin: clamp(3.5rem, 7vw, 6rem) auto 0; max-width: 780px; text-align: center; perspective: 1400px; }
.cs-web__frame { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 11; background: #0b0c0e; box-shadow: 0 40px 84px -30px rgba(11,12,14,0.5); will-change: transform; transform-style: preserve-3d; }
.cs-web__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cs-web figcaption { margin-top: 1.2rem; font-size: 1rem; color: var(--ink-soft); }

/* ---- Design-system grid (right column of the system section) ---- */
.cs-ds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.2rem); align-items: start; perspective: 1200px; }
.cs-ds__item figcaption { margin-top: 0.8rem; font-size: 0.84rem; color: var(--ink-soft); text-align: center; }

/* ---- Brand swatches (JobTeaser palette) ---- */
/* 2x2 square cluster so it sits level with the 2-3 line caption (a lone 1x4 row
   floated oddly against the taller text on wide screens) */
.jt-swatches { flex: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.jt-swatches span { width: 27px; height: 27px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(11,12,14,0.10); }
body.jt .cs-brand__mark { align-items: center; }

@media (max-width: 760px) {
  .cs-research__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .cs-research__item figcaption { text-align: center; max-width: 38ch; margin-inline: auto; }   /* mobile caption system */
  .cs-shot--tall, .cs-shot--wide { aspect-ratio: 4 / 3; }
  .cs-web__frame { aspect-ratio: 4 / 5; }
}

/* ============================================================
   "PRODUCT IN MOTION" — Jobteaser flagship header. The real app, alive:
   a modern browser frame and a phone, both live-scrolling their real
   screens, beside a confident lockup. Near-black, signal-green glow,
   subtle pointer-tilt depth. Reduced motion freezes each screen at the
   top (still a legible product), no tilt.
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.jt-live__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* green ambient light behind the mockups — a big soft glow + two orbs. GSAP (initLiveHero)
   wanders them at a lively pace with randomised targets and non-uniform scale (morphing
   shape), ranging from behind the mockups out to the RIGHT of them. Static, still a nice
   glow, under no-JS / reduced motion. */
.jt-live__glow, .jt-live__orb { position: absolute; border-radius: 50%; will-change: transform; }
.jt-live__glow { top: 44%; right: 4%; width: 62vw; height: 62vw; max-width: 800px; max-height: 800px;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(18,195,104,0.30), rgba(18,195,104,0.06) 45%, transparent 68%); filter: blur(18px); }
.jt-live__orb { filter: blur(34px); }
.jt-live__orb--1 { top: 24%; right: 5%; width: 30vw; height: 30vw; max-width: 360px; max-height: 360px;
  background: radial-gradient(circle at 50% 50%, rgba(74,231,154,0.32), transparent 68%); }
.jt-live__orb--2 { top: 56%; right: -3%; width: 23vw; height: 23vw; max-width: 280px; max-height: 280px;
  background: radial-gradient(circle at 50% 50%, rgba(18,195,104,0.28), transparent 70%); }

.jt-live__inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* lockup */
.jt-live__kicker { font-size: clamp(0.92rem, 1.4vw, 1.02rem); font-weight: 500; letter-spacing: 0.01em; color: rgba(255,255,255,0.6); }
.jt-live__kicker b { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; color: var(--accent); }
.jt-live__title { margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0; font-family: var(--font-display); font-weight: var(--display-weight-max);
  font-size: clamp(2.3rem, 4.4vw, 3.7rem); line-height: 1.03; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.jt-live__accent { color: var(--accent); }
.jt-live__sub { margin-top: clamp(1.1rem, 2vw, 1.5rem); max-width: 44ch; font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.6; color: rgba(255,255,255,0.74); text-wrap: pretty; }
.jt-live__meta { margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.jt-live__meta li { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: #fff; box-shadow: none; font-weight: 500; padding-left: 1rem; }
.jt-live__meta li::before { display: none; }

/* stage */
.jt-live__stage { position: relative; justify-self: center; width: 100%; max-width: 620px; perspective: 1500px; transform-style: preserve-3d; }

/* browser frame */
.jt-live__browser { position: relative; z-index: 1; margin: 0; border-radius: 16px; overflow: hidden; background: #0c0d10;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 54px 116px -36px rgba(0,0,0,0.82), 0 10px 30px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); }
.jt-live__bar { display: flex; align-items: center; gap: 0.7rem; height: 40px; padding: 0 0.95rem; background: #17181c; border-bottom: 1px solid rgba(255,255,255,0.06); }
.jt-live__dots { display: inline-flex; gap: 7px; flex: none; }
.jt-live__dots i { width: 11px; height: 11px; border-radius: 50%; }
.jt-live__dots i:nth-child(1) { background: #ff5f57; }
.jt-live__dots i:nth-child(2) { background: #febc2e; }
.jt-live__dots i:nth-child(3) { background: #28c840; }
.jt-live__url { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 auto; padding: 0.32rem 0.95rem; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.62); font-size: 0.76rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.jt-live__url svg { color: var(--accent); opacity: 0.95; }
.jt-live__viewport { position: relative; overflow: hidden; aspect-ratio: 16 / 10.6; background: #0c0d10; }
.jt-live__screen { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; will-change: transform; }

/* phone frame, overlapping the browser's lower-left (cross-surface, alive) */
.jt-live__phone { position: absolute; z-index: 2; margin: 0; width: 27%; left: -8%; bottom: -7%;
  border-radius: 30px; padding: 6px; background: #0c0d10; border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 42px 84px -26px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06); }
/* phone mockup: static, its real screenshot fitted exactly to the frame (aspect matches
   m-jobs-home.jpg 693x1591, so object-fit:cover fills with no crop and no auto-scroll) */
.jt-live__phone .jt-live__viewport { aspect-ratio: 693 / 1591; border-radius: 24px; background: #0c0d10; }
.jt-live__phone .jt-live__screen { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; will-change: auto; }
.jt-live__notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 32%; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.2); z-index: 3; }

@media (max-width: 900px) {
  .jt-live__inner { grid-template-columns: 1fr; gap: clamp(2.4rem, 7vw, 3.4rem); }
  .jt-live__stage { max-width: 480px; }
  .jt-live__glow { top: 62%; right: 0; }
}
@media (max-width: 480px) {
  .jt-live__phone { width: 30%; left: -4%; bottom: -5%; }
}

/* ---- Overview panel = JobTeaser's signature job search, alive (typewriter query + live
   count + the three audiences as a segmented control tying it to the intro sentence) ---- */
.jt-search { padding: clamp(1.5rem, 3.4vw, 2.4rem); }
.jt-search__inner { width: 100%; display: flex; flex-direction: column; gap: clamp(0.95rem, 2.2vw, 1.4rem); }
.jt-search__tabs { align-self: flex-start; display: inline-flex; gap: 0.25rem; padding: 0.26rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; }
.jt-search__tabs i { font-style: normal; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.58); padding: 0.3rem 0.68rem; border-radius: 999px; }
.jt-search__tabs i.is-on { background: var(--accent); color: #06210f; }
.jt-search__bar { display: flex; align-items: center; gap: 0.7rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 0.62rem 0.62rem 0.62rem 1.05rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.jt-search__mag { flex: none; position: relative; width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: 50%; }
.jt-search__mag::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 8px; height: 2px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.jt-search__q { flex: 1; min-width: 0; display: flex; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(0.95rem, 1.5vw, 1.1rem); color: #fff; white-space: nowrap; overflow: hidden; }
.jt-search__typed { overflow: hidden; text-overflow: clip; }
.jt-search__caret { flex: none; width: 2px; height: 1.15em; margin-left: 3px; background: var(--accent); border-radius: 2px; animation: jtCaret 1.05s steps(1) infinite; }
.jt-search__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #06210f; box-shadow: 0 6px 16px rgba(18,195,104,0.4); }
.jt-search__count { margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.jt-search__count b { color: var(--accent); font-weight: 700; font-family: var(--font-display); }
@keyframes jtCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jt-search__caret { display: none; } }

/* ---- Aligning the ecosystem: alternating journey rows (phone or web surface) ---- */
.cs-journeys { max-width: 1080px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; display: flex; flex-direction: column; gap: clamp(3.25rem, 6.5vw, 5.5rem); }
.cs-journey { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cs-journey--rev .cs-journey__media { order: 2; }
.cs-journey__media { display: flex; justify-content: center; perspective: 1100px; }
.cs-journey__media .cs-phone { margin: 0; }
.cs-journey__media .cs-web__frame { width: 100%; aspect-ratio: 4 / 3; }
.cs-journey__text { max-width: 42ch; }
.cs-journey__text h3 { margin: 0.55rem 0 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -0.015em; color: var(--ink); }
.cs-journey__text p { font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); }
.cs-journeys__note { max-width: 58ch; margin: clamp(2.8rem, 5vw, 3.8rem) auto 0; text-align: center; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.55; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }

/* wider character cutout (JobTeaser figure carries a horizontal stack of surfaces) */
.rs-figure--wide { width: min(68%, 258px); }

/* ---- Product operating system (Notion) — light band-soft beat ---- */
.jt-ops { text-align: center; }
.jt-ops .cs-band__inner { max-width: 760px; margin: 0 auto; }
.jt-ops__big { color: var(--ink); }
.jt-ops__sub { margin-top: 1.2rem; font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }

@media (max-width: 900px) {
  .jt-hero__stage { width: min(86%, 420px); margin: 2.4rem auto 0; }
  .cs-journey, .cs-journey--rev { grid-template-columns: 1fr; gap: 1.6rem; }
  .cs-journey--rev .cs-journey__media { order: 0; }
  .cs-journey__media .cs-web__frame { aspect-ratio: 16 / 11; }
  .cs-journey__text { max-width: none; }
}

/* ============================================================
   THE WORK — each redesigned journey shown as a responsive web + mobile
   "butterfly" pair, on a dark stage. Vertical, alternating rows; the
   devices fly in from the side AFTER the text lands (initWork). Consistent
   device-stage height + text baseline across all rows.
   ============================================================ */
/* Shared black block: The work + The foundation. The wrapper owns the black + the outer clip;
   the sections go transparent so the single ambient field behind them shows through continuously
   (no per-section overflow edge to cut the glow at their seam). Must stay free of
   transform/filter/will-change so it never breaks the payoff's position:fixed pin below. */
.jt-dark { position: relative; background: #0b0c0e; overflow: hidden; }
.jt-work { position: relative; background: transparent; color: #fff; padding: clamp(4.5rem, 9vw, 8rem) var(--gutter); overflow: hidden; }
.jt-work__head, .jt-work__variant, .jt-work__end { position: relative; z-index: 1; }
.jt-work__head { max-width: 720px; margin: 0 auto var(--sp-7); text-align: center; }
body.jt .jt-work__head .section__eyebrow { color: var(--accent); justify-content: center; }
.jt-work__head .cs-h2 { color: #fff; }
.jt-work__lead { margin-top: 1.2rem; font-size: clamp(1.05rem, 1.6vw, 1.24rem); line-height: 1.6; color: rgba(255,255,255,0.62); text-wrap: pretty; }

.jt-work__variant { display: block; }

/* ---- shared device pair (web browser frame + phone in front) ---- */
.jt-dev { position: relative; aspect-ratio: 4 / 3.05; }
.jt-dev__screen { position: relative; overflow: hidden; background: #0c0d10; }
.jt-dev__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.jt-dev__web { position: absolute; top: 0; right: 0; z-index: 1; width: 84%; border-radius: 14px; overflow: hidden; background: #17181c; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 46px 96px -34px rgba(0,0,0,0.88); }
.jt-dev__dots { display: flex; gap: 6px; padding: 10px 13px; background: #17181c; border-bottom: 1px solid rgba(255,255,255,0.06); }
.jt-dev__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.jt-dev__web .jt-dev__screen { aspect-ratio: 16 / 10; }
/* the WEB mockup scrolls its own tall page; the PHONE stays static (object-fit cover) */
.jt-dev__screen--scroll { overflow: hidden; }
.jt-dev__screen--scroll img { position: static; inset: auto; width: 100%; height: auto; object-fit: initial; }
/* Promote only the ACTIVE panel's auto-scrolling screenshot: the hidden panels' huge
   (1300-1600px wide, up to 3900px tall) layers were pinned in GPU memory permanently. */
.jt-va1__panel.is-active .jt-dev__screen--scroll img { will-change: transform; }
.jt-dev__phone { position: absolute; bottom: 0; left: 0; z-index: 2; width: 25%; border-radius: 24px; padding: 5px; background: #0c0d10; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 34px 64px -22px rgba(0,0,0,0.9); }
.jt-dev__phone .jt-dev__screen { aspect-ratio: 693 / 1591; border-radius: 19px; }  /* matches m-jobs-home.jpg so the full screen (incl. bottom nav) fits with no crop */
.jt-dev__notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 30%; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.22); z-index: 2; }

/* ==== VARIANT 1 — Showcase (accordion nav + crossfading stage) ==== */
.jt-va1 { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.jt-va1__nav { display: flex; flex-direction: column; gap: 0.4rem; }
.jt-va1__tab { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.1rem 1.2rem 1.25rem; border-radius: 14px; color: #fff; transition: background 0.35s var(--ease), transform 0.35s var(--ease); }
/* Hover you can actually feel (the old 4.5% tint read as none): stronger tint, title wakes up,
   and the tab nudges right (same slide language as .cs-back). The ACTIVE tab stays planted —
   it has already "arrived" and its progress bar is running. */
.jt-va1__tab:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(5px); }
.jt-va1__tab:hover .jt-va1__num { color: rgba(255, 255, 255, 0.62); }
.jt-va1__tab:hover .jt-va1__title { color: rgba(255, 255, 255, 0.94); }
.jt-va1__tab.is-active:hover { background: rgba(255, 255, 255, 0.055); transform: none; }
.jt-va1__tab.is-active { background: rgba(255,255,255,0.055); }
.jt-va1__num { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; transition: color 0.35s; }
.jt-va1__tab.is-active .jt-va1__num { color: var(--accent); }
.jt-va1__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: -0.01em; color: rgba(255,255,255,0.62); transition: color 0.35s; }
.jt-va1__tab.is-active .jt-va1__title { color: #fff; }
.jt-va1__desc { display: block; overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; font-size: 0.98rem; line-height: 1.55; color: rgba(255,255,255,0.6); transition: max-height 0.5s var(--ease), opacity 0.4s, margin-top 0.4s; }
.jt-va1__tab.is-active .jt-va1__desc { max-height: 6.5rem; opacity: 1; margin-top: 0.55rem; }
.jt-va1__bar { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 0.6rem; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.3s; }
.jt-va1__tab.is-active .jt-va1__bar { opacity: 1; }
.jt-va1__bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.jt-va1__stage { position: relative; aspect-ratio: 4 / 3.1; }
.jt-va1__glow { position: absolute; inset: 8% 4%; z-index: 0; border-radius: 50%; background: radial-gradient(circle at 60% 45%, rgba(18,195,104,0.22), transparent 66%); filter: blur(24px); pointer-events: none; }
.jt-va1__panel { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; visibility: hidden; }
.jt-va1__panel.is-active { opacity: 1; visibility: visible; }

.jt-work__end { max-width: 18ch; margin: clamp(4rem, 8vw, 6.5rem) auto 0; text-align: center; font-family: var(--font-display);
  font-weight: var(--display-weight-max); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--accent); text-wrap: balance; }

@media (max-width: 860px) {
  .jt-va1 { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); }
  .jt-va1__stage { order: -1; width: min(100%, 440px); margin: 0 auto; }
  .jt-va1__tab { padding: 0.9rem 1rem 1.05rem; }
}

/* ============================================================
   THE FOUNDATION — "Spark, the living system" specimen wall.
   Dark canvas + green glow, a sticky editorial aside, and a
   parallax masonry of cropped DS specimens that skew with scroll
   velocity and lift (elevation) on hover. Flows into .jt-align.
   ============================================================ */
.jt-found { position: relative; overflow: hidden; background: transparent; color: #fff; padding: clamp(4.5rem, 9vw, 8rem) var(--gutter) clamp(3.5rem, 7vw, 6rem); }
/* Ambient bubbles for the black sections (work -> foundation -> payoff): randomised soft
   orbs positioned + wandered by initJtBubbles() (like the hero header, kept subtler). A radial
   edge-fade mask on the layer means the field always fades before a section seam, so a bubble
   can never "cut" no matter where it drifts. Colours + sizes + positions are all set in JS. */
.jt-bubbles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* BASE: fade only LEFT/RIGHT (straight lines, no arc). Vertical fades are added per-section
     below ONLY where a section touches a LIGHT section — so the ambient stays CONTINUOUS across
     the black-to-black seams and never leaves a plain-black delimitation band between sections. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }
/* ONE continuous field behind the WHOLE black block (work + foundation + payoff). It's a single
   element, so there are NO internal section edges to clip an orb — the glow stays fully live across
   both internal seams. It fades only at the OUTER edges: TOP into the light Research section (~4%),
   BOTTOM into the light "ways of working" band (~4%). NOTE: the payoff is pinned, so across that pin
   this field scrolls slowly behind the held drop animation = a subtle intended ambient parallax. */
.jt-dark .jt-bubbles {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-composite: intersect; }
/* Fine grain over the field: dithers the dark-green gradients so they never band into
   visible concentric rings (8-bit colour can't render a smooth dark falloff otherwise). */
.jt-bubbles::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px; opacity: 0.07; }
.jt-bubble { position: absolute; border-radius: 50%; filter: blur(44px); will-change: transform; }
.jt-found__grid { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.jt-found__head { position: sticky; top: clamp(5rem, 16vh, 9rem); }
body.jt .jt-found .section__eyebrow { color: var(--accent); justify-content: flex-start; }
.jt-found__h { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.025em; color: #fff; margin-top: 0; text-wrap: balance; }
.jt-found__lead { margin-top: 1.25rem; font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.62; color: rgba(255,255,255,0.6); max-width: 42ch; text-wrap: pretty; }
.jt-found__lead b { color: var(--accent); font-weight: 600; }
.jt-found__brand { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); padding-top: clamp(1.4rem, 2.6vw, 1.9rem); border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 1.1rem; }
.jt-found__aa { flex: none; font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: clamp(2.4rem, 4.2vw, 3rem); line-height: 0.86; color: #fff; }
.jt-found__brand figcaption { display: flex; flex-direction: column; gap: 0.42rem; }
.jt-found__brand b { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: #fff; }
.jt-found__weights { display: flex; flex-wrap: wrap; gap: 0.25rem 0.65rem; font-family: 'Poppins', system-ui, sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.jt-found__weights span:nth-child(1) { font-weight: 400; }
.jt-found__weights span:nth-child(2) { font-weight: 500; }
.jt-found__weights span:nth-child(3) { font-weight: 600; }
.jt-found__weights span:nth-child(4) { font-weight: 700; }

.jt-found__wall { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.9rem, 1.6vw, 1.3rem); }
.jt-found__col { display: flex; flex-direction: column; gap: clamp(0.9rem, 1.6vw, 1.3rem); will-change: transform; }
.jt-found__col--offset { margin-top: clamp(2rem, 6vw, 4.5rem); }

.jt-found__tile { position: relative; overflow: hidden; border-radius: 16px; background: #121317; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 16px 38px -22px rgba(0,0,0,0.85); transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.5s var(--ease); }
.jt-found__media { position: absolute; inset: 0; will-change: transform; }
.jt-found__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--pos, 50%); transform: scale(1.06); display: block; }
.jt-found__tile:hover { transform: translateY(-8px); box-shadow: 0 44px 74px -30px rgba(0,0,0,0.92), 0 0 0 1px rgba(18,195,104,0.4); border-color: rgba(18,195,104,0.45); }
.jt-found__tag { position: absolute; left: 11px; bottom: 11px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(8,9,11,0.66); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); border: 1px solid rgba(255,255,255,0.08); font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.01em; color: #fff; opacity: 0; transform: translateY(7px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.jt-found__tile:hover .jt-found__tag { opacity: 1; transform: none; }
.jt-found__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--accent)); flex: none; }

.jt-found__tile--palette { display: grid; grid-template-columns: repeat(4, 1fr); }
.jt-pal { position: relative; background: var(--c); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 13px; }
.jt-pal:nth-child(2) { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.jt-pal em { font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: 0.58rem; letter-spacing: 0.02em; color: #fff; background: rgba(8,9,11,0.5); padding: 3px 6px; border-radius: 6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

@media (max-width: 900px) {
  .jt-found__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 6vw, 2.6rem); }
  .jt-found__head { position: static; }
  .jt-found__col--offset { margin-top: 0; }
}

/* ============================================================
   FRAGMENTED -> ALIGNED — scattered UI pieces snap into one grid
   ============================================================ */
.jt-align { position: relative; overflow: hidden; background: transparent; color: #fff; padding: clamp(5rem, 10vw, 9rem) var(--gutter); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.jt-align__head { max-width: 720px; margin: 0 auto var(--sp-7); text-align: center; }
body.jt .jt-align .section__eyebrow { color: var(--accent); justify-content: center; }
.jt-align__h { font-family: var(--font-display); font-weight: var(--display-weight-max); font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.jt-align__sub { margin-top: 1.3rem; font-size: 1.12rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); text-wrap: pretty; }
.jt-align__grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 1.9rem); place-items: center; }

/* the fragments = JobTeaser UI pieces */
.jt-frag { will-change: transform; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; }
.jt-frag--pill { padding: 0.7rem 1.1rem; border-radius: 999px; background: var(--accent); color: #06210f; box-shadow: 0 12px 26px rgba(18, 195, 104, 0.32); }
.jt-frag--bar { width: 100%; max-width: 176px; height: 44px; border-radius: 999px; background: #191b1f; padding: 0 0.9rem; justify-content: flex-start; }
.jt-frag--bar i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); }
.jt-frag--card { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; max-width: 150px; padding: 0.9rem; border-radius: 14px; background: #fff; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4); }
.jt-frag--card i { width: 26px; height: 26px; border-radius: 7px; background: #0b0c0e; }
.jt-frag--card b { display: block; height: 6px; border-radius: 3px; background: #d7d7dc; width: 82%; }
.jt-frag--card b:last-child { width: 55%; background: var(--accent); }
.jt-frag--card2 i { background: var(--accent); }
.jt-frag--chip { padding: 0.5rem 0.95rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.28); color: #fff; }
.jt-frag--toggle { width: 56px; height: 30px; border-radius: 999px; background: var(--accent); padding: 3px; justify-content: flex-end; }
.jt-frag--toggle i { width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.jt-frag--stat { font-weight: 800; font-size: 2rem; color: var(--accent); letter-spacing: -0.02em; }
.jt-frag--badge { padding: 0.4rem 0.8rem; border-radius: 999px; background: #ff2e7e; color: #fff; font-size: 0.8rem; }
.jt-frag--avatars i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0b0c0e; margin-left: -8px; }
.jt-frag--avatars i:nth-child(1) { background: #7b61ff; margin-left: 0; }
.jt-frag--avatars i:nth-child(2) { background: var(--accent); }
.jt-frag--avatars i:nth-child(3) { background: #ff2e7e; }
.jt-frag--filter { gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.24); color: #fff; }
.jt-frag--filter i { width: 8px; height: 8px; border-radius: 50%; background: #ff2e7e; }
.jt-frag--tag { gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; }
.jt-frag--check { padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(18, 195, 104, 0.16); color: var(--accent); border: 1px solid rgba(18, 195, 104, 0.4); }

/* ---- The payoff: a gravity drop where every piece of the system falls and piles up (initDrop + Matter.js) ---- */
/* padding-top clears the 87px fixed nav with breathing room when the section pins at top:0
   (the +2.5rem constant keeps the eyebrow off the nav even on short viewports where 9vh is small). */
.jt-drop-sec { justify-content: flex-start; padding: clamp(7rem, 9vh + 2.5rem, 9rem) 0 0; }
.jt-drop-sec .jt-align__head { position: relative; z-index: 2; margin-bottom: 0; padding: 0 var(--gutter); }
.jt-drop { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.jt-drop__el { position: absolute; top: 0; left: 0; will-change: transform; backface-visibility: hidden; }
/* Classic UI kit, JobTeaser style (near-black surfaces, signal green, violet/magenta accents) */
.jt-ui { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; line-height: 1; color: #fff; white-space: nowrap; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85); }
.jt-ui__i { width: 16px; height: 16px; flex: none; }
.jt-ui--btn { gap: 0.42rem; padding: 0.72rem 1.15rem; border-radius: 12px; background: var(--accent); color: #06210f; font-weight: 700; box-shadow: 0 16px 34px -12px rgba(18, 195, 104, 0.6); }
.jt-ui--ghost { gap: 0.42rem; padding: 0.72rem 1.1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.2); }
.jt-ui--search { gap: 0.55rem; padding: 0.4rem 0.4rem 0.4rem 0.9rem; border-radius: 999px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui--search .jt-ui__i { stroke: rgba(255, 255, 255, 0.45); }
.jt-ui--search em { font-style: normal; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.jt-ui__go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #06210f; }
.jt-ui__go svg { width: 15px; height: 15px; }
.jt-ui--toggle { width: 52px; height: 30px; border-radius: 999px; background: var(--accent); padding: 3px; justify-content: flex-end; }
.jt-ui--toggle i { width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.jt-ui--check { gap: 0.5rem; padding: 0.5rem 0.95rem 0.5rem 0.55rem; border-radius: 10px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui--check b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; background: var(--accent); color: #06210f; }
.jt-ui--check b svg { width: 13px; height: 13px; }
.jt-ui--radio { gap: 0.5rem; padding: 0.5rem 0.95rem 0.5rem 0.6rem; border-radius: 10px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui--radio b { position: relative; width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--accent); }
.jt-ui--radio b::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.jt-ui--select { gap: 0.8rem; padding: 0.62rem 0.85rem; border-radius: 10px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui__chev { width: 15px; height: 15px; stroke: rgba(255, 255, 255, 0.5); }
.jt-ui--slider { position: relative; width: 132px; height: 30px; }
.jt-ui--slider i { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.jt-ui--slider i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: 3px; background: var(--accent); }
.jt-ui--slider b { position: absolute; left: 62%; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.jt-ui--stepper { gap: 0; padding: 0.3rem; border-radius: 11px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui--stepper u { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; text-decoration: none; font-size: 1.15rem; color: #fff; }
.jt-ui--stepper u.is-plus { background: rgba(18, 195, 104, 0.16); color: var(--accent); }
.jt-ui--stepper em { min-width: 34px; text-align: center; font-style: normal; font-weight: 700; }
.jt-ui--progress { width: 140px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.jt-ui--progress i { display: block; width: 68%; height: 100%; border-radius: 999px; background: var(--accent); }
.jt-ui--tabs { gap: 2px; padding: 4px; border-radius: 999px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui--tabs i { padding: 0.42rem 0.8rem; border-radius: 999px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.jt-ui--tabs i.is-on { background: var(--accent); color: #06210f; }
.jt-ui--chip { padding: 0.5rem 0.95rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.22); }
.jt-ui--tag { gap: 0.4rem; padding: 0.48rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.jt-ui--tag i { width: 7px; height: 7px; border-radius: 50%; background: #ff2e7e; }
.jt-ui--badge { padding: 0.42rem 0.78rem; border-radius: 999px; background: var(--accent); color: #06210f; font-size: 0.78rem; }
.jt-ui--verified { gap: 0.35rem; padding: 0.46rem 0.82rem; border-radius: 999px; background: rgba(18, 195, 104, 0.16); color: var(--accent); border: 1px solid rgba(18, 195, 104, 0.4); font-size: 0.8rem; }
.jt-ui--verified svg { width: 14px; height: 14px; }
.jt-ui--avatars { gap: 0; }
.jt-ui--avatars i, .jt-ui--avatars b { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #0b0c0e; margin-left: -10px; }
.jt-ui--avatars i:first-child { margin-left: 0; }
.jt-ui--avatars i:nth-child(1) { background: #7b61ff; }
.jt-ui--avatars i:nth-child(2) { background: var(--accent); }
.jt-ui--avatars i:nth-child(3) { background: #ff2e7e; }
.jt-ui--avatars b { display: grid; place-items: center; background: #23252b; color: #fff; font-size: 0.7rem; }
.jt-ui--card { align-items: flex-start; gap: 0.7rem; width: 190px; padding: 0.85rem; border-radius: 14px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui__logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #06210f; font-weight: 800; font-size: 0.9rem; }
.jt-ui__cardbody { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; }
.jt-ui__cardbody u { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
.jt-ui__cardbody u:nth-child(1) { width: 100px; }
.jt-ui__cardbody u:nth-child(2) { width: 66px; background: rgba(255, 255, 255, 0.12); }
.jt-ui__cardbody em { margin-top: 3px; align-self: flex-start; font-style: normal; font-size: 0.68rem; color: var(--accent); background: rgba(18, 195, 104, 0.14); padding: 2px 7px; border-radius: 6px; }
.jt-ui--toast { gap: 0.5rem; padding: 0.6rem 0.95rem 0.6rem 0.6rem; border-radius: 12px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui--toast b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #06210f; }
.jt-ui--toast b svg { width: 14px; height: 14px; }
.jt-ui--tooltip { position: relative; padding: 0.5rem 0.8rem; border-radius: 9px; background: #fff; color: #0b0c0e; font-size: 0.8rem; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.6); }
.jt-ui--tooltip i { position: absolute; bottom: -4px; left: 22px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); }
.jt-ui--stat { flex-direction: column; align-items: flex-start; gap: 3px; }
.jt-ui--stat b { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.jt-ui--stat em { font-style: normal; font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.jt-ui--rating { gap: 0.35rem; padding: 0.46rem 0.82rem; border-radius: 999px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); font-weight: 700; }
.jt-ui--rating svg { width: 15px; height: 15px; color: #ffb020; }
.jt-ui--icon { justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #17181c; border: 1px solid rgba(255, 255, 255, 0.1); }
.jt-ui--icon svg { width: 18px; height: 18px; stroke: #fff; }
.jt-ui--status { gap: 0.45rem; padding: 0.46rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.jt-ui--status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(18, 195, 104, 0.22); }

@media (max-width: 900px) {
  .jt-align { min-height: auto; display: block; }
  .jt-drop-sec { min-height: 92vh; }
}
@media (max-width: 700px) {
  .jt-align__grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
}