/* ============================================================
   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); }

/* ---------- Shared section rhythm ---------- */
.cs-section { padding: var(--cs-pad) var(--gutter); max-width: 1120px; margin: 0 auto; }
.cs-head { max-width: 40ch; margin-bottom: clamp(2rem, 3.4vw, 2.8rem); }
.cs-head .cs-h2 { margin-bottom: 0; }
.cs-head--center { margin-left: auto; margin-right: auto; text-align: center; max-width: 46ch; }
.cs-h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.cs-h2--light { color: #fff; }
.cs-head__sub { margin-top: 1.3rem; font-size: 1.12rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.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 */
body.cs .section__eyebrow { margin-bottom: 0.9rem; }

.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;
  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: 1.5rem; 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: 0.5rem; }
.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; }

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

/* ============================================================
   PROCESS
   ============================================================ */
.cs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.cs-step { background: #fff; border: 1px solid var(--cream-2); border-radius: 18px; padding: clamp(1.5rem, 2.6vw, 2rem); box-shadow: 0 10px 28px rgba(15,30,51,0.05); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.cs-step:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(15,30,51,0.1); }
.cs-step__n { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--accent); letter-spacing: 0.04em; }
.cs-step__t { margin: 0.5rem 0 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.01em; color: var(--ink); }
.cs-step p { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

/* ============================================================
   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: 1.1rem; font-size: 0.92rem; color: var(--ink-soft); }

/* ============================================================
   BRAND & DESIGN SYSTEM
   ============================================================ */
.cs-brand__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.cs-brand__intro .cs-h2 { margin-bottom: 1.4rem; }
.cs-brand__intro .cs-prose__body { max-width: 44ch; }

/* 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 */
.cs-brand__show { display: flex; flex-direction: column; gap: clamp(1rem, 1.6vw, 1.25rem); perspective: 1200px; }

/* Reversed logo plate on the brand indigo (the standout moment) */
.cs-brand__plate { position: relative; border-radius: 20px; overflow: hidden; background: var(--roomio-deep); box-shadow: 0 22px 46px -18px rgba(20,15,60,0.5); transform-style: preserve-3d; will-change: transform; }
.cs-brand__plate img { display: block; width: 100%; height: auto; }
.cs-brand__plate::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 90% at 24% -10%, rgba(255,255,255,0.14), transparent 52%); pointer-events: none; }
.cs-brand__plate figcaption { position: absolute; left: clamp(16px, 3vw, 22px); bottom: clamp(13px, 2.6vw, 18px); font-family: var(--font-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.68); }

.cs-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }

/* Type specimen — set in Fira Sans, the product typeface */
.cs-brand__type { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 1.5rem); padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.3rem, 2.4vw, 1.7rem); background: #fff; border: 1px solid var(--cream-2); border-radius: 18px; box-shadow: 0 12px 30px rgba(15,30,51,0.06); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.cs-brand__type:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(15,30,51,0.1); }
.cs-brand__aa { flex: none; font-family: 'Fira Sans', system-ui, sans-serif; font-weight: 600; font-size: clamp(2.7rem, 5vw, 3.3rem); line-height: 0.86; letter-spacing: -0.01em; color: var(--ink); }
.cs-brand__type-meta { display: flex; flex-direction: column; gap: 0.5rem; padding-left: clamp(1.1rem, 2vw, 1.5rem); border-left: 1px solid var(--cream-2); }
.cs-brand__type-meta b { font-family: 'Fira Sans', system-ui, sans-serif; font-weight: 600; font-size: 1.06rem; letter-spacing: -0.004em; color: var(--ink); }
.cs-brand__weights { display: flex; flex-wrap: wrap; gap: 0.28rem 0.7rem; font-family: 'Fira Sans', system-ui, sans-serif; font-size: 0.82rem; color: var(--ink-soft); }
.cs-brand__weights span:nth-child(1) { font-weight: 400; }
.cs-brand__weights span:nth-child(2) { font-weight: 500; }
.cs-brand__weights span:nth-child(3) { font-weight: 600; }
.cs-brand__weights span:nth-child(4) { font-weight: 700; }
.cs-swatch { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 3.6rem; border-radius: 12px; font-size: 0.72rem; color: rgba(255,255,255,0.85); position: relative; overflow: hidden; background: var(--c); padding-left: 0.7rem; padding-bottom: 0.6rem; min-height: 5.4rem; justify-content: flex-end; box-shadow: 0 6px 16px rgba(15,30,51,0.1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.cs-swatch:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(15,30,51,0.16); }
.cs-swatch b { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: #fff; }
.cs-swatch--l { color: var(--ink-soft); border: 1px solid var(--cream-2); }
.cs-swatch--l b { color: var(--ink); }

/* ============================================================
   IN THE WILD / REVIEWS
   ============================================================ */
.cs-wild .cs-head { max-width: 52ch; }
.cs-reviews { margin-top: 0; columns: 2; column-gap: 1.4rem; }
.cs-review { break-inside: avoid; margin: 0 0 1.4rem; border-radius: 18px; overflow: hidden; border: 1px solid var(--cream-2); box-shadow: 0 12px 30px rgba(15,30,51,0.07); background: #fff; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.cs-review:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 32px 60px rgba(15,30,51,0.17); }
.cs-review img { display: block; width: 100%; height: auto; }

/* ============================================================
   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.6rem; 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
   ============================================================ */
.cs-split { max-width: 1120px; margin: 0 auto; padding: var(--cs-pad) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.cs-split--rev .cs-split__text { order: 2; }
.cs-split__text { max-width: 46ch; }
.cs-split__text .cs-h2 { margin-bottom: 1.4rem; }
.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: 0.82fr 1.18fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: start; }
.cs-problem__head .cs-h2 { max-width: 12ch; }
.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
   ============================================================ */
.cs-reflect { max-width: 780px; 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: 1.4rem; 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; }
body.cs .pt--enter .pt__word { animation: ptWord 0.7s var(--ease) 0.04s forwards; }
@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: 1.4rem; }
  .cs-problem__head .cs-h2 { max-width: none; }
  .cs-brand__grid { grid-template-columns: 1fr; }
  .cs-flow__thread { display: none; }
  .cs-flow__item, .cs-flow__item--rev { grid-template-columns: 1fr; gap: 1.6rem; }
  .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: clamp(5rem, 14vw, 7rem); }            /* more air between each step's copy and the next phone */
  .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-steps { grid-template-columns: 1fr; }
  .cs-metrics { grid-template-columns: 1fr 1fr; }
  .cs-results .cs-metrics { grid-template-columns: 1fr 1fr; }
  .cs-reviews { columns: 1; }
  .cs-swatches { grid-template-columns: repeat(2, 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 */
  --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) */
}
/* 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 .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); }

/* 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) */
body.jt .cs-brand__aa,
body.jt .cs-brand__type-meta b,
body.jt .cs-brand__weights { font-family: 'Poppins', system-ui, sans-serif; }

/* ---- 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: clamp(2.6rem, 5vw, 3.8rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.7rem); perspective: 1200px; }
.cs-research__item figcaption { margin-top: 1rem; 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; }
  .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 clamp(3.5rem, 7vw, 6rem); 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; 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); }
.jt-va1__tab:hover { background: rgba(255,255,255,0.045); }
.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.38); 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%); }
/* Shared field (work + foundation): TOP fades into the light Research section (8% ≈ ~190px over the
   two-section block). BOTTOM gets a GENTLE fade too (last 6%) so an orb near the foundation/payoff
   seam softens out instead of being hard-cut at the container edge — the payoff is a separate pinned
   layer below, so its field can't be one continuous element with this one; the two soft fades meet
   at the seam and read as continuous, not as a clipped line. */
.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 8%, #000 94%, 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 8%, #000 94%, transparent 100%);
          mask-composite: intersect; }
/* "The payoff": BOTTOM fades into the light "ways of working" band; TOP now also fades in (first 12%)
   so its orbs rise IN from the foundation seam rather than being clipped flat at the section's top
   edge (the hard green line he caught). Pairs with the shared field's bottom fade above. */
.jt-align .jt-bubbles {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, 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 12%, #000 84%, transparent 100%);
          mask-composite: intersect; }
/* Foundation (black on both sides) inherits the base = horizontal-only, so it's continuous top+bottom. */
/* 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.82fr 1.18fr; 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: 1rem; 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: #0b0c0e; 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 clamp(3rem, 6vw, 5rem); 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) ---- */
.jt-drop-sec { justify-content: flex-start; padding: clamp(4rem, 9vh, 7rem) 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; }
}