/* Dweek Studios - Home / shared page styles.
   The frosted-glass system: a white page with full-bleed sections that alternate
   heavy ↔ light frost over a fixed trio of drifting brand-colour circles.
   One accent per section (set via .acc-* modifier). Built entirely on tokens. */

/* ===================================================================
   0 · Reset & base
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote, figure { margin: 0; }

::selection { background: var(--dweek-yellow-soft); color: var(--studio-charcoal); }
:focus-visible { outline: 3px solid var(--dweek-blue-soft); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ===================================================================
   1 · Accent themes - one accent per section
   =================================================================== */
.acc-yellow   { --acc: var(--dweek-yellow); --acc-ink: var(--accent-yellow-ink); --acc-display: var(--accent-yellow-display); --acc-wash: rgba(245,194,0,.16);  --acc-line: rgba(245,194,0,.30); }
.acc-blue     { --acc: var(--dweek-blue);   --acc-ink: var(--accent-blue-ink);   --acc-display: var(--accent-blue-ink);    --acc-wash: rgba(107,163,214,.16); --acc-line: rgba(107,163,214,.32); }
.acc-red      { --acc: var(--dweek-red);    --acc-ink: var(--accent-red-ink);    --acc-display: var(--accent-red-ink);     --acc-wash: rgba(217,48,37,.14);   --acc-line: rgba(217,48,37,.28); }
.acc-charcoal { --acc: var(--studio-charcoal); --acc-ink: var(--charcoal-soft);  --acc-display: var(--studio-charcoal);    --acc-wash: rgba(45,45,45,.07);    --acc-line: rgba(45,45,45,.14); }

/* ===================================================================
   2 · Drifting circle trio (fixed background layer)
   =================================================================== */
.bg-blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(3px); will-change: transform; }
.blob.b-yellow { top: -130px; right: -70px;  width: 520px; height: 520px; background: var(--dweek-yellow); opacity: .92; }
.blob.b-red    { top: 34%;    right: 12%;     width: 300px; height: 300px; background: var(--dweek-red);    opacity: .90; }
.blob.b-blue   { bottom: -150px; left: -60px; width: 420px; height: 420px; background: var(--dweek-blue);   opacity: .90; }
@media (prefers-reduced-motion: reduce) { .blob { transform: none !important; } }

.page { position: relative; z-index: 1; }

/* ===================================================================
   3 · Layout primitives
   =================================================================== */
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-7); }
.wrap--narrow { max-width: 920px; }

.section { position: relative; padding: var(--space-9) 0; }
.section--heavy {
  background: var(--glass-heavy-bg);
  -webkit-backdrop-filter: var(--glass-heavy-filter);
  backdrop-filter: var(--glass-heavy-filter);
  border-top: var(--glass-border);
  border-bottom: var(--glass-border);
}
.section--light {
  background: var(--glass-light-bg);
  -webkit-backdrop-filter: var(--glass-light-filter);
  backdrop-filter: var(--glass-light-filter);
}
.section--tight { padding: var(--space-7) 0; }

/* ===================================================================
   4 · Eyebrow - sentence case beside a short accent rule (NOT tracked caps)
   =================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  color: var(--acc-ink, var(--charcoal-soft));
  margin: 0 0 var(--space-4);
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px;
  background: var(--acc, var(--studio-charcoal)); flex: none;
}
.eyebrow--center { justify-content: center; }

/* ===================================================================
   5 · Typography roles
   =================================================================== */
.display {
  font-family: var(--display);
  font-weight: 400;
  color: var(--text-heading);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.h-hero  { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 8vw, var(--fs-display-xl)); line-height: .98; letter-spacing: -.015em; color: var(--text-heading); }
.h-1     { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5vw, var(--fs-display-l)); line-height: 1.04; letter-spacing: -.015em; color: var(--text-heading); }
.h-2     { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, var(--fs-display-m)); line-height: 1.1; letter-spacing: -.01em; color: var(--text-heading); }
.h-accent { color: var(--acc-display); font-style: italic; }

.lead { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; color: var(--text-body); }
.sub  { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-body); }
.muted { color: var(--text-muted); }

.section-head { max-width: 64ch; margin-bottom: var(--space-7); }
.section-head .h-2 { margin-top: var(--space-4); }
.section-head p { margin-top: var(--space-4); }
.section-head--center { max-width: 60ch; margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* Split header - heading left, intro paragraph right (breaks the stacked-header monotony) */
.section-head--split {
  max-width: none; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: var(--space-6) var(--space-8); align-items: end;
}
.section-head--split .head-lead { margin: 0; align-self: end; }
.section-head--split .eyebrow + .h-2 { margin-top: var(--space-4); }

/* ===================================================================
   6 · Buttons - pill, soft colour-matched shadow, lift on hover
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 15px 28px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-body);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 18px; font-size: var(--fs-body-sm); }

.btn-yellow   { background: var(--dweek-yellow); color: var(--text-on-yellow); box-shadow: var(--shadow-btn-yellow); }
.btn-yellow:hover   { background: var(--dweek-yellow-dark); box-shadow: 0 12px 30px rgba(245,194,0,.46); }
.btn-red      { background: var(--dweek-red); color: #fff; box-shadow: var(--shadow-btn-red); }
.btn-red:hover      { background: var(--dweek-red-dark); box-shadow: 0 12px 28px rgba(217,48,37,.40); }
.btn-blue     { background: var(--dweek-blue); color: var(--text-on-blue); box-shadow: var(--shadow-btn-blue); }
.btn-blue:hover     { background: var(--dweek-blue-dark); box-shadow: 0 12px 28px rgba(107,163,214,.44); }
.btn-charcoal { background: var(--studio-charcoal); color: #fff; box-shadow: var(--shadow-btn-charcoal); }
.btn-charcoal:hover { background: var(--charcoal-900); box-shadow: 0 12px 30px rgba(45,45,45,.30); }

.btn-glass {
  background: var(--glass-chip-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: var(--glass-hairline); color: var(--studio-charcoal);
  box-shadow: var(--shadow-sm);
}
.btn-glass:hover { background: rgba(255,255,255,.7); }

/* Quiet text link - the page's understated contact / "see more" affordance */
.quiet-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: var(--fw-semibold); font-size: var(--fs-body);
  color: var(--acc-ink, var(--charcoal-soft));
  transition: gap var(--dur-base) var(--ease-out);
}
.quiet-link .arr { transition: transform var(--dur-base) var(--ease-out); }
.quiet-link:hover { gap: 10px; }
.quiet-link:hover .arr { transform: translateX(3px); }

/* ===================================================================
   7 · Navigation (frosted, sticky) - shared across pages
   =================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-nav-bg);
  -webkit-backdrop-filter: var(--glass-nav-filter); backdrop-filter: var(--glass-nav-filter);
  border-bottom: var(--glass-border);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
/* Bar stays full-bleed; its contents align to the same container as page content (.wrap). */
.nav-inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px var(--space-7);
}
.nav-brand { display: inline-flex; align-items: center; }
.nav-brand img { height: 32px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-links a { font-size: 15px; font-weight: var(--fw-medium); color: var(--charcoal-soft); cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.nav-links a:hover { color: var(--studio-charcoal); }
.nav-links .quiet-link { color: var(--accent-red-ink); }
.nav-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--studio-charcoal); }

/* ===================================================================
   8 · Hero
   =================================================================== */
.hero { padding: clamp(72px, 11vw, 116px) 0 clamp(80px, 12vw, 120px); }
.hero .h-hero { margin: var(--space-5) 0 0; max-width: 15ch; }
.hero .lead { margin: var(--space-5) 0 0; max-width: 52ch; }
.hero-cta { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; align-items: center; }
.hero-aside { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-5); }

/* ===================================================================
   9 · Stat rows (count-up)
   =================================================================== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-6) var(--space-5); justify-items: center; }
.stat { min-width: 0; text-align: center; }
.stat-num { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 5vw, 52px); line-height: 1; color: var(--acc-display, var(--studio-charcoal)); letter-spacing: -.01em; }
.stat-label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-muted); margin-top: 6px; }

/* ===================================================================
   10 · Editorial rows (ecosystem · capabilities)
   =================================================================== */
.vrows { display: flex; flex-direction: column; gap: 4px; }
.vrow {
  display: grid; grid-template-columns: 60px 132px 1fr auto 52px;
  align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  transition: background var(--dur-base) var(--ease-out);
}
.vrow:hover { background: var(--acc-wash); }
.vrow-num { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--acc-display); }
.vrow-thumb { aspect-ratio: 7/5; border-radius: var(--radius-md); overflow: hidden; background: var(--off-white); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); }
.vrow-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vrow-name { font-family: var(--display); font-size: clamp(22px, 3vw, 28px); line-height: 1.05; color: var(--text-heading); }
.vrow-desc { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-muted); margin-top: 4px; }
.vrow-meta { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); text-align: right; }
.vrow-arrow { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--acc-line); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--acc-ink); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.vrow:hover .vrow-arrow { transform: rotate(-45deg); background: var(--acc); color: #fff; border-color: var(--acc); }

/* Compact editorial rows (capabilities - no thumbnail) */
.crows { display: flex; flex-direction: column; }
.crow {
  display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  transition: background var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.crows .crow:last-child { border-bottom: 1px solid var(--border-subtle); }
.crow:hover { background: var(--acc-wash); padding-left: var(--space-6); }
.crow-num { font-family: var(--display); font-size: 22px; color: var(--acc-display); }
.crow-name { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-heading); }
/* "Includes" line inside a capability row - quieter than the what-it-is line above it */
.cap-incl { margin-top: var(--space-3); font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-muted); }

/* Compact multi-column index (what we make) - a quiet overview, distinct from the wide rows */
.make-index { columns: 2; column-gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.make-index li {
  break-inside: avoid; display: grid; grid-template-columns: 38px 1fr;
  gap: var(--space-3); align-items: baseline;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle);
}
.make-index .n { font-family: var(--display); font-size: 17px; color: var(--acc-display); }
.make-index .nm { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-heading); }
@media (max-width: 760px) { .make-index { columns: 1; } }

/* ===================================================================
   11 · Work - image-led grid with frosted caption chips
   =================================================================== */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.work-tile {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--off-white); border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.work-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.work-tile .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-tile .media--contain { object-fit: contain; padding: var(--space-7); background: #fff; }
.work-cap {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  max-width: calc(100% - var(--space-4) * 2);
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--glass-chip-bg);
  -webkit-backdrop-filter: var(--glass-chip-filter); backdrop-filter: var(--glass-chip-filter);
  border: var(--glass-hairline);
}
.work-cap .t { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--studio-charcoal); }
.work-cap .s { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }
/* Category tag pinned to the top-left of each work image */
.work-cat {
  position: absolute; top: var(--space-4); left: var(--space-4); z-index: 1;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--glass-chip-bg);
  -webkit-backdrop-filter: var(--glass-chip-filter); backdrop-filter: var(--glass-chip-filter);
  border: var(--glass-hairline);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--acc-ink);
}
.span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-3 { grid-column: span 3; }
.ar-16-10 { aspect-ratio: 16/10; } .ar-4-3 { aspect-ratio: 4/3; } .ar-1-1 { aspect-ratio: 1/1; }

.work-group-label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--acc-ink); margin: var(--space-7) 0 var(--space-4); }
.work-group-label:first-of-type { margin-top: 0; }

/* ===================================================================
   12 · Cards (values · AI · how-we-build · process)
   =================================================================== */
.card-grid { display: grid; gap: var(--space-4); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--glass-chip-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--acc-line); border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-num { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--acc-display); }
.card-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--acc-wash); border: 1px solid var(--acc-line); color: var(--acc-ink); }
.card-ic svg { width: 22px; height: 22px; }
.card-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-heading); margin-top: var(--space-3); }
.card-text { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-muted); margin-top: var(--space-2); }

/* Process steps with accent rule */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.step-num { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--acc-display); }
.step-rule { height: 2px; background: var(--acc-line); margin: var(--space-4) 0; }
.step-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-heading); }
.step-text { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-muted); margin-top: var(--space-2); }

/* Two-column AI clusters */
.ai-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.ai-col-h { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-heading); margin-bottom: var(--space-4); }
.ai-list { display: flex; flex-direction: column; gap: var(--space-3); }
.ai-item { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.ai-item .t { font-weight: var(--fw-semibold); color: var(--text-heading); font-size: var(--fs-body); }
.ai-item .s { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: 4px; }

/* AI product cards — frosted .card tiles, capability + product tag */
.ai-prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.ai-prod { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-height: 116px; }
.ai-prod .ai-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--acc-wash); border: 1px solid var(--acc-line); color: var(--acc-ink); margin-bottom: 2px; }
.ai-prod .ai-ic svg { width: 20px; height: 20px; }
.ai-prod .nm { font-family: var(--display); font-size: clamp(18px, 2vw, 21px); font-weight: 400; color: var(--text-heading); line-height: 1.12; }
.ai-prod .for { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--acc-ink); margin-top: auto; }
@media (max-width: 560px) { .ai-prod-grid { grid-template-columns: 1fr; } }

/* Tech-stack chip rows */
.tech-block { margin-top: var(--space-5); }
.tech-block .lbl { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--acc-ink); margin-bottom: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips--center { justify-content: center; }
.chip { padding: 8px 16px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--charcoal-soft); }

/* ===================================================================
   13 · Products / apps wall - real logos + text tiles
   =================================================================== */
.prod-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.prod-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  aspect-ratio: 1/1; padding: var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.prod-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--acc-line); }
.prod-tile img { width: 64%; height: 54%; object-fit: contain; }
.prod-tile .prod-icon { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; box-shadow: var(--shadow-xs); }
.prod-tile .name { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-heading); }
.prod-tile .tag  { font-size: var(--fs-caption); color: var(--text-muted); }

/* ===================================================================
   14 · IP spotlight (split) · case-study split · testimonial
   =================================================================== */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-7); align-items: center; }
.split--rev { grid-template-columns: .95fr 1.05fr; }
.media-panel { position: relative; aspect-ratio: 5/4; border-radius: var(--radius-xl); overflow: hidden; background: var(--off-white); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.media-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-panel img.contain { object-fit: contain; }

.quote { text-align: center; }
.quote-mark { font-family: var(--display); font-size: 64px; line-height: .5; color: var(--acc); }
.quote blockquote { font-family: var(--display); font-size: clamp(26px, 4vw, 38px); line-height: 1.28; color: var(--text-heading); margin: var(--space-2) 0 0; }
.quote-by { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.quote-by .who { font-weight: var(--fw-semibold); color: var(--text-heading); }
.quote-by .role { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* ===================================================================
   15 · Logo strip (clients)
   =================================================================== */
.logo-strip { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.logo-strip .lbl { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.logo-strip .logos { display: flex; flex-wrap: wrap; gap: var(--space-3); flex: 1; }
.client-chip { padding: 10px 18px; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--charcoal-soft); }

/* ===================================================================
   16 · Reach + timeline
   =================================================================== */
.reach { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.reach .region { padding: 12px 22px; border-radius: var(--radius-pill); background: var(--acc-wash); border: 1px solid var(--acc-line); font-weight: var(--fw-semibold); color: var(--acc-ink); }

.timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.tl-item { position: relative; padding-top: var(--space-5); border-top: 2px solid var(--acc-line); }
.tl-item::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); }
.tl-year { font-family: var(--display); font-size: 24px; color: var(--acc-display); }
.tl-text { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-2); }

/* "The family grew" - accumulating studio count + milestone steps (Studios page) */
.grew { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--space-8); align-items: start; margin-top: var(--space-7); }
.grew-tally { position: sticky; top: 104px; text-align: center; }
.grew-count { font-family: var(--display); font-weight: 400; font-size: clamp(108px, 17vw, 196px); line-height: .82; color: var(--acc-display); letter-spacing: -.03em; }
.grew-count-label { font-family: var(--display); font-size: clamp(20px, 2.4vw, 26px); color: var(--text-heading); margin-top: var(--space-3); }
.grew-tally-note { font-size: var(--fs-body-sm); color: var(--text-muted); margin: var(--space-3) auto 0; max-width: 24ch; }
.grew-steps { display: flex; flex-direction: column; }
.grew-step {
  display: grid; grid-template-columns: 56px 64px 1fr; gap: var(--space-5); align-items: center;
  padding: var(--space-5) var(--space-4); border-top: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: background var(--dur-base) var(--ease-out);
}
.grew-steps .grew-step:last-child { border-bottom: 1px solid var(--border-subtle); }
.grew-step:hover { background: var(--acc-wash); }
.grew-step-meta { display: flex; flex-direction: column; gap: 3px; }
.grew-step-num { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--acc-display); }
.grew-step-year { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.grew-step-logo { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.grew-step-logo img { width: 100%; height: 100%; object-fit: cover; }
.grew-step-name { font-family: var(--display); font-size: clamp(21px, 2.6vw, 27px); line-height: 1.05; color: var(--text-heading); }
.grew-step-text { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 820px) {
  .grew { grid-template-columns: 1fr; gap: var(--space-6); }
  .grew-tally { position: static; display: flex; flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .grew-step { grid-template-columns: 44px 1fr; gap: var(--space-4); }
  .grew-step-logo { display: none; }
}

/* ===================================================================
   17 · Quiet close
   =================================================================== */
.close { text-align: center; }
.close .h-1 { margin: var(--space-4) auto 0; max-width: 20ch; }
.close p { margin: var(--space-4) auto var(--space-6); max-width: 52ch; }

/* ===================================================================
   18 · Footer (dark) - shared across pages
   =================================================================== */
.footer { position: relative; z-index: 1; background: var(--charcoal-900); color: var(--warm-stone); padding: var(--space-8) var(--space-7) var(--space-6); }
.footer-top { display: flex; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; max-width: var(--container-max); margin: 0 auto; }
.footer-brand { max-width: 32ch; }
.footer-brand img { height: 34px; width: auto; margin-bottom: var(--space-3); opacity: .92; }
.footer-brand p { font-size: var(--fs-body-sm); color: #9A9A9A; margin-top: var(--space-2); }
.footer-cols { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col .h { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--mid-grey); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.footer-col a { font-size: var(--fs-body-sm); color: var(--warm-stone); cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }
.footer-col a:hover { color: #fff; }
.footer-legal { max-width: var(--container-max); margin: var(--space-6) auto 0; padding-top: var(--space-5); border-top: 1px solid #333; font-size: var(--fs-caption); color: var(--mid-grey); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.footer-legal a { color: inherit; transition: color var(--dur-fast) var(--ease-out); }
.footer-legal a:hover { color: #fff; }

/* ===================================================================
   19 · Motion - reveal initial states (GSAP toggles .is-in)
   =================================================================== */
/* Hide pre-reveal ONLY when JS is present to reveal it (html.js set inline in <head>).
   Without JS - or if main.js fails to load - .reveal keeps its default visible state,
   so content is never blank for users or crawlers. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-word { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ===================================================================
   20 · Responsive
   =================================================================== */
@media (max-width: 900px) {
  .nav-inner { padding: 12px var(--space-5); }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: var(--glass-border); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .wrap { padding: 0 var(--space-5); }
  .split, .split--rev, .ai-cols { grid-template-columns: 1fr; }
  .cols-4, .cols-3, .steps { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .work-grid > [class*="span-"] { grid-column: 1 / -1 !important; }
  .vrow { grid-template-columns: 44px 1fr auto; }
  .vrow-thumb, .vrow-meta { display: none; }
}
@media (max-width: 560px) {
  .cols-4, .cols-3, .cols-2, .steps, .timeline { grid-template-columns: 1fr; }
  .stat-row { gap: var(--space-5) var(--space-6); }
  .hero { padding-top: 72px; }
}

/* ===================================================================
   21 · Contact - intent-routed form + reach methods
   =================================================================== */
/* Form sits in a frosted panel over the drifting circles; reassurance beside it. */
.contact-split { align-items: start; }
.contact-aside { align-self: start; }
.contact-aside .h-2 { margin-top: var(--space-4); }
.contact-aside p { margin-top: var(--space-4); }
.contact-aside .reach-list { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.contact-aside .reach-list .ai-item .t a { color: var(--acc-ink); }

.form-panel {
  background: var(--glass-chip-bg); -webkit-backdrop-filter: var(--glass-chip-filter); backdrop-filter: var(--glass-chip-filter);
  border: var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-7);
}

.cform { display: flex; flex-direction: column; gap: var(--space-5); }

/* Intent router - glass pills backed by hidden radios */
.intent-label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-heading); margin-bottom: var(--space-3); }
.intent-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.intent-chip { position: relative; }
.intent-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.intent-chip span {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--charcoal-soft);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.intent-chip:hover span { border-color: var(--acc-line); }
.intent-chip input:checked + span { background: var(--acc); border-color: var(--acc); color: #fff; }
.intent-chip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field label, .field-label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-heading); }
.field .req { color: var(--accent-red-ink); }
.f-input {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--text-body);
  padding: 11px 14px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.f-input::placeholder { color: var(--mid-grey); opacity: .8; }
.f-input:hover { border-color: var(--acc-line); }
.f-input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(107,163,214,.28); }
textarea.f-input { min-height: 128px; resize: vertical; }

/* Native select with custom chevron (CSS vars can't go inside a data: URI, so the stroke is hard-coded charcoal) */
select.f-input {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232D2D2D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Intent-specific field groups - revealed by JS for the chosen intent */
.intent-fields { display: flex; flex-direction: column; gap: var(--space-5); }
.intent-fields[hidden] { display: none; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.form-note { font-size: var(--fs-caption); color: var(--text-muted); }
.form-note a { color: var(--acc-ink); text-decoration: underline; }

/* Submit status */
.form-status { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.form-status[hidden] { display: none; }
.form-status.is-ok  { background: var(--dweek-blue-soft); color: var(--accent-blue-ink); border: 1px solid var(--acc-line); }
.form-status.is-err { background: var(--dweek-red-soft);  color: var(--accent-red-ink);  border: 1px solid rgba(217,48,37,.28); }

/* Honeypot - visually and semantically hidden from people, bait for bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* What happens next - centred reassurance band */
.next-band { max-width: 60ch; margin: 0 auto; text-align: center; }
.next-band .h-2 { margin-top: var(--space-4); }
.next-band p { margin-top: var(--space-4); }

@media (max-width: 760px) {
  .form-panel { padding: var(--space-6); }
  .field-2 { grid-template-columns: 1fr; }
}

/* Legal / policy prose (privacy page) - long-form readable text over light frost */
.legal { max-width: 760px; }
.legal > h2:first-child { margin-top: 0; }
.legal h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: -.01em;
  color: var(--text-heading); margin: var(--space-7) 0 var(--space-3);
}
.legal h3 {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--text-heading); margin: var(--space-5) 0 var(--space-2);
}
.legal p { color: var(--text-body); line-height: 1.7; margin: 0 0 var(--space-4); }
.legal ul { margin: 0 0 var(--space-4); padding-left: 1.25em; }
.legal li { color: var(--text-body); line-height: 1.7; margin: 0 0 var(--space-2); }
.legal strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
.legal a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { text-decoration: none; }
.legal .legal-meta { font-size: var(--fs-body-sm); color: var(--mid-grey); }