/* ============================================================
   PARLA — shared stylesheet
   v3 / pass 1: structure + tokens
   Brand source: Parla Brand Kit (Aug 2026)
   ============================================================ */

/* ---------- fonts ---------- */
@font-face { font-family: 'Pangram'; src: url('../assets/fonts/Pangram-Light.woff2') format('woff2');
  font-display: swap; font-weight: 300; font-display: swap; }
@font-face { font-family: 'Pangram'; src: url('../assets/fonts/Pangram-Regular.woff2') format('woff2');
  font-display: swap; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pangram'; src: url('../assets/fonts/Pangram-Medium.woff2') format('woff2');
  font-display: swap; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pangram'; src: url('../assets/fonts/Pangram-Bold.woff2') format('woff2');
  font-display: swap; font-weight: 700; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* palette — brand kit p.7 */
  --ink:        #161513;  /* primary dark canvas */
  --ink-2:      #1D1D1A;  /* secondary dark */
  --bone:       #FAF9F5;  /* light canvas / light text */
  --taupe:      #D1CBBF;  /* warm accent surface */
  --grey:       #545049;  /* warm grey surface / muted text */
  --glass:      rgba(250, 249, 245, 0.07); /* #FAF9F512 glassmorphic accents */
  --glass-brd:  rgba(250, 249, 245, 0.28);

  /* type */
  --f-display:  'Pangram', 'Century Gothic', sans-serif;
  --f-accent:   'MuseoModerno', 'Pangram', sans-serif;   /* italic emphasis words */
  --f-body:     Arial, Helvetica, sans-serif;

  /* fluid type scale */
  --t-hero:     clamp(3rem, 8.5vw, 7.25rem);   /* oversized hero */
  --t-h1:       clamp(2.5rem, 6vw, 5rem);
  --t-h2:       clamp(1.75rem, 4vw, 3.25rem);
  --t-h3:       clamp(1.25rem, 2.2vw, 1.75rem);
  --t-body:     clamp(0.95rem, 1.1vw, 1.0625rem);
  --t-eyebrow:  0.75rem;

  /* layout */
  --gutter:     clamp(1.25rem, 5vw, 4.5rem);
  --section-y:  clamp(4rem, 10vw, 8.5rem);
  --radius:     22px;      /* rounded frames — brand kit imagery direction */
  --radius-lg:  34px;      /* interlocking shapes */
  --maxw:       1366px;    /* design canvas width */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

img { height: auto; }

body {
  overflow-x: clip;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  background: var(--ink);
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
}

/* ---------- type roles ---------- */
.h-hero, .h1, .h2 {
  font-family: var(--f-display);
  font-weight: 300;               /* Pangram Light — headline role */
  line-height: 1.04;
  letter-spacing: 0.005em;
}
.h-hero { font-size: var(--t-hero); }
.h1     { font-size: var(--t-h1); }
.h2     { font-size: var(--t-h2); }

/* MuseoModerno emphasis word — brand kit graphic language.
   Default is italic (free / custom / real / possible…);
   --up modifier for upright uses (home hero "digital"). */
.em-accent {
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: 600;
}
.em-accent--up { font-style: normal; }

.eyebrow {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1.7;
  opacity: 0.85;
}

.body-copy { max-width: 46ch; }
.body-copy--justify { text-align: justify; }

/* ---------- surfaces ---------- */
.surface-dark  { background: var(--ink);  color: var(--bone); }
.surface-dark2 { background: var(--ink-2); color: var(--bone); }
.surface-grey  { background: var(--grey); color: var(--bone); }
.surface-bone  { background: var(--bone); color: var(--ink-2); }
.surface-taupe { background: var(--taupe); color: var(--ink-2); }

/* atmospheric gradient placeholder (real textures in pass 2) */
.surface-atmo {
  background:
    radial-gradient(120% 90% at 70% 20%, #6b665e 0%, transparent 60%),
    radial-gradient(100% 80% at 20% 80%, #3a3733 0%, transparent 55%),
    linear-gradient(160deg, #4a463f 0%, #2b2926 100%);
  color: var(--bone);
}

/* ---------- layout primitives ---------- */
.section {
  position: relative;
  padding: var(--section-y) var(--gutter);
}
.section--flush { padding: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 820px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* section eyebrow pinned to the left rail, as in mockups */
.rail-label {
  position: absolute;
  top: var(--section-y);
  left: var(--gutter);
  max-width: 9rem;
}
.rail-mark {
  position: absolute;
  top: var(--section-y);
  right: var(--gutter);
  width: 44px; height: auto; opacity: 0.9;
}
@media (max-width: 820px) {
  .rail-label { position: static; margin-bottom: 1.5rem; max-width: none; }
  .rail-mark  { top: 1.25rem; right: 1.25rem; width: 34px; }
}

/* ---------- header / nav ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.1rem, 2.5vw, 1.9rem) var(--gutter);
}
.site-header .wordmark img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; }
.nav-links a, .nav-links .nav-drop > button {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: 15rem;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-drop.open .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display: flex; }
.nav-drop-menu a { padding: 0.4rem 0; letter-spacing: 0.16em; font-size: 0.75rem; }

/* page eyebrow under the wordmark (FOR TATTOO ARTISTS etc.) */
.page-tag {
  position: absolute;
  top: clamp(4rem, 7vw, 5.5rem);
  left: var(--gutter);
  z-index: 30;
}

@media (max-width: 640px) {
  .nav-links { gap: 1rem; }
  .nav-links a, .nav-links .nav-drop > button { font-size: 0.68rem; letter-spacing: 0.16em; }
}

/* ---------- circular CTA (signature element) ---------- */
/* text-on-circle + directional line — brand kit p.9.
   Structure pass: geometry + hover; refined art direction in pass 3. */
.cta-circle {
  --size: clamp(150px, 14.6vw, 200px);
  --line: 90px;
  position: relative;
  display: inline-block;
  width: var(--size);
  height: var(--size);
}
.cta-circle svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cta-circle .ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.cta-circle .lead { stroke: currentColor; stroke-width: 1; opacity: 0.9; }
.cta-circle text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.16em;
  fill: currentColor;
}
.cta-circle:hover .ring, .cta-circle:focus-visible .ring { opacity: 1; }
.cta-circle:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; border-radius: 50%; }

/* one circular CTA per section max; standard buttons elsewhere */
.btn {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.9rem 1.8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}
.surface-dark .btn:hover, .surface-grey .btn:hover, .surface-atmo .btn:hover { background: var(--bone); color: var(--ink); }
.surface-bone .btn:hover, .surface-taupe .btn:hover { background: var(--ink); color: var(--bone); }

/* outlined pill statement (workflow closers) */
.pill-note {
  max-width: 34rem;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  padding: 1.6rem 2.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.05rem;
  opacity: 0.95;
}
@media (max-width: 640px) { .pill-note { border-radius: var(--radius-lg); } }

/* ---------- cards / tiles / shapes ---------- */
/* stacked numbered card (workflow / built-around-your-studio) */
.step-card {
  background: var(--taupe);
  color: var(--ink-2);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.step-card--dark { background: var(--grey); color: var(--bone); }
.step-card h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* interlocking rounded shapes — brand kit p.12 */
.shape-cluster { position: relative; display: grid; gap: 1rem; max-width: 640px; }
.shape {
  border-radius: var(--radius-lg);
  padding: 1.9rem 2.1rem;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.45;
  max-width: 22rem;
}
.shape--bone  { background: var(--bone);  color: var(--ink-2); }
.shape--taupe { background: var(--taupe); color: var(--ink-2); }
/* offsets refined in pass 2; stacked on mobile per brand kit */
@media (min-width: 821px) {
  .shape:nth-child(2) { justify-self: end; }
  .shape:nth-child(3) { justify-self: center; }
}

/* modular tile grid — brand kit p.11 */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, 1fr);
}
.tile { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 1.75rem; }
.tile--copy { align-items: center; }
.tile--copy p {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  max-width: 24ch;
}
.tile--copy p.justify { text-align: justify; }
.tile--headline {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.9;
  justify-content: flex-start;
  text-align: left;
}
.tile--headline > span { max-width: 12ch; display: block; margin-left: clamp(0.5rem, 3.5vw, 3rem); }
@media (max-width: 820px) {
  .tile-grid { grid-template-columns: 1fr; }
}

/* ---------- about page ---------- */
.ab-canvas { position: relative; }
.ab-hero { min-height: 100vh; min-height: 100svh; }
.ab-hero .hl, .ab-hero .hr {
  position: absolute; top: 37.7%;
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.9rem, 4.4vw, 3.75rem); line-height: 1.15;
}
.ab-hero .hl { left: 10.7%; }
.ab-hero .hr { left: 62.7%; }
.ab-hero .mark { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); width: clamp(40px, 4.6vw, 63px); }

.ab-mission { aspect-ratio: 1366 / 780; max-height: 700px; }
.ab-mission-copy {
  position: absolute; left: 0; right: 0; top: 12%;
  text-align: center;
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.15rem, 2.55vw, 2.2rem); line-height: 1.45;
  letter-spacing: 0.02em;
}
.ab-mission-copy span { display: block; }
.ab-mission-cue { position: absolute; left: 50%; top: 78%; transform: translate(-50%, -50%); }

.ab-artists { aspect-ratio: 1366 / 1100; max-height: 1030px; }
.ab-artists .eyebrow { position: absolute; left: 7.9%; top: 13%; }
.ab-artists .copy { position: absolute; left: 7.9%; top: 24%; width: 23%; }
.ab-artists .media { position: absolute; left: 61.3%; top: 8.3%; width: 31%; }
.ab-artists .h { position: absolute; left: 43.3%; top: 39.3%; }
.ab-artists .cta { position: absolute; left: 79.7%; top: 72.6%; transform: translate(-50%, -50%); }
.ab-artists .mark { position: absolute; left: 7.5%; top: 76%; width: 62px; }

.ab-studios { aspect-ratio: 1366 / 1082; max-height: 1010px; }
.ab-studios .media { position: absolute; left: 7.5%; top: 9.8%; width: 30.8%; }
.ab-studios .eyebrow { position: absolute; right: 7.6%; top: 10.4%; text-align: right; }
.ab-studios .copy { position: absolute; left: 61.3%; top: 19%; width: 33.6%; }
.ab-studios .h { position: absolute; left: 15%; top: 47.9%; }
.ab-studios .cta { position: absolute; left: 16.3%; top: 79.5%; transform: translate(-50%, -50%); }
.ab-studios .mark { position: absolute; right: 6.9%; top: 82%; width: 62px; }

.ab-copy {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(0.9rem, 1.35vw, 1.15rem); line-height: 1.6;
  text-align: justify;
}
.ab-h {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.2;
}


.ab-process { aspect-ratio: 1366 / 908; max-height: 880px; }
.ab-process .h {
  position: absolute; left: 6.4%; bottom: 7%;
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.25;
}
.ab-process ol {
  position: absolute; right: 6%; top: 66%;
  list-style: none;
  display: grid; gap: clamp(0.9rem, 2.3vw, 2rem);
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(0.8rem, 1.45vw, 1.25rem);
  letter-spacing: 0.1em; text-transform: uppercase;
}

@media (max-width: 820px) {
  .ab-hero, .ab-mission, .ab-artists, .ab-studios, .ab-process { aspect-ratio: auto; padding: 3.5rem 0; }
  .ab-hero .hl, .ab-hero .hr, .ab-hero .mark,
  .ab-mission-copy, .ab-mission-cue,
  .ab-artists > *, .ab-studios > *, .ab-process > * { position: static; transform: none; width: auto; }
  .ab-hero .mark { margin: 1.5rem 0; }
  .ab-mission-cue { display: flex; justify-content: center; margin-top: 2.5rem; }
  .ab-artists .copy, .ab-studios .copy { max-width: 38ch; margin: 1.25rem 0; }
  .ab-artists .media, .ab-studios .media { max-width: 420px; margin: 1.5rem 0; }
  .ab-artists .h, .ab-studios .h { margin-top: 1.5rem; }
  .ab-artists .cta, .ab-studios .cta { display: flex; justify-content: center; margin-top: 2rem; }
  .ab-artists .mark, .ab-studios .mark { display: none; }
  .ab-studios .eyebrow { text-align: left; }
  .ab-process ol { margin-top: 2rem; }
}

/* ---------- studios page ---------- */
.surface-atmo--light {
  background:
    radial-gradient(110% 85% at 68% 30%, #a49e94 0%, transparent 62%),
    radial-gradient(90% 75% at 22% 78%, #6e6961 0%, transparent 58%),
    linear-gradient(155deg, #8d877d 0%, #575249 100%);
  color: var(--bone);
}
.studio-hero-canvas { position: relative; aspect-ratio: 1366 / 810; max-height: 810px; }
.studio-hero-h {
  position: absolute; left: 0; right: 0; top: 22.5%;
  font-size: clamp(2.2rem, 5.2vw, 4.5rem);
  line-height: 1.2; font-weight: 300; font-family: var(--f-display);
}
.studio-hero-h span { display: block; }
.studio-hero-h .l1 { margin-left: 13.3%; }
.studio-hero-h .l2 { margin-left: 16.2%; }
.studio-hero-h .l3 { margin-left: 12.5%; }
.studio-hero-h .l4 { margin-left: 22.6%; }
.studio-hero-sub { position: absolute; left: 39.4%; top: 47%; max-width: 28%; font-size: clamp(0.9rem, 1.35vw, 1.15rem); line-height: 1.6; }
.studio-hero-cta { position: absolute; left: 62.2%; top: 80%; transform: translate(-50%, -50%); }
.studio-hero-cta .cta-circle { --size: clamp(150px, 15.2vw, 208px); }
.studio-hero-mark { position: absolute; left: 8.6%; bottom: 11%; width: 62px; }
@media (max-width: 820px) {
  .studio-hero-canvas { aspect-ratio: auto; padding: 7rem 0 4rem; }
  .studio-hero-h, .studio-hero-sub, .studio-hero-cta, .studio-hero-mark { position: static; }
  .studio-hero-h span { margin-left: 0 !important; }
  .studio-hero-sub { max-width: 34ch; margin-top: 1.5rem; }
  .studio-hero-cta { transform: none; display: flex; justify-content: center; margin-top: 2.5rem; }
  .studio-hero-mark { display: none; }
}

/* S2 agony/promise grid */
.st2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12%;
  row-gap: clamp(2.5rem, 7vw, 6rem);
  max-width: 1085px;
  margin: 0 auto;
  align-items: start;
}
.st2-copy { font-family: var(--f-display); font-weight: 300; font-size: clamp(0.98rem, 1.5vw, 1.3rem); line-height: 1.55; text-align: justify; }
.st2-h { font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.25; font-weight: 300; font-family: var(--f-display); }
.st2-grid--tight {
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  max-width: 1180px;
  align-items: center;
  column-gap: clamp(2.5rem, 6vw, 5rem);
}
.st2-h--tight { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.2; margin: 0 0 clamp(1.1rem, 2vw, 1.6rem); }
.st2-text .st2-copy + .st2-copy { margin-top: 1rem; }
.st2-text img + .st2-copy { margin-top: 0; }
@media (max-width: 820px) { .st2-grid--tight { grid-template-columns: 1fr; row-gap: 1.8rem; } }
@media (max-width: 820px) { .st2-grid { grid-template-columns: 1fr; } }

/* S3 onboarding shapes canvas */
.onboard-canvas { position: relative; aspect-ratio: 1366 / 900; max-height: 900px; }
.onboard-h {
  position: absolute; left: 0; right: 0; top: 21%;
  text-align: center;
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  letter-spacing: 0.14em; line-height: 1.55;
}
.onboard-shape {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(22,21,19,0.3);
  padding: clamp(1.2rem, 2.2vw, 2.1rem);
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(0.95rem, 1.5vw, 1.3rem); line-height: 1.5;
  display: flex; align-items: center;
  background: #E7E4DF; color: var(--ink-2);
}
.onboard-shape--taupe { background: var(--taupe); }
.onboard-shape--right { text-align: right; justify-content: flex-end; }
.onboard-1 { left: 40.9%; top: 43%;   width: 18.6%; height: 28.5%; z-index: 2; }
.onboard-2 { left: 19.4%; top: 67%;   width: 25.3%; height: 25.5%; z-index: 3; }
.onboard-3 { left: 50.2%; top: 63.5%; width: 30.3%; height: 32.5%; z-index: 1; }
@media (max-width: 820px) {
  .onboard-canvas { aspect-ratio: auto; padding: 4rem 0; display: grid; gap: 1rem; }
  .onboard-h { position: static; margin-bottom: 1.5rem; }
  .onboard-shape { position: static; width: auto; height: auto; min-height: 6.5rem; }
  .onboard-shape--right { text-align: left; justify-content: flex-start; }
}

/* S4 photo band + rows */
.band-photo { position: relative; min-height: clamp(120px, 16.3vw, 224px); display: flex; align-items: center; justify-content: center; }
.tile-grid--studios { grid-auto-rows: clamp(220px, 24.7vw, 338px); }

/* S5 setup cards */
.setup-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.7vw, 2.4rem);
  max-width: 780px; margin: 0 auto;
}
.setup-grid .step-card { min-height: clamp(280px, 26vw, 380px); border-radius: 26px; box-shadow: 0 14px 36px rgba(22,21,19,0.08); }
@media (max-width: 640px) { .setup-grid { grid-template-columns: 1fr; } .setup-grid .step-card { min-height: 0; } }

/* S6 proof */
.proof-h { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.4rem, 6vw, 5.15rem); line-height: 1.15; text-align: center; }
.proof-h .l2 { display: inline-block; transform: translateX(-8%); }
.proof-grid {
  display: grid; grid-template-columns: 537fr 206fr;
  column-gap: 9.3%;
  max-width: 63.7%;
  margin-left: 29.3%;
  align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
@media (max-width: 820px) {
  .proof-grid { grid-template-columns: 1fr; max-width: none; margin-left: 0; row-gap: 2rem; }
}

/* ---------- home S3: "how parla works" canvas ---------- */
/* tiles positioned by % of the 1366×760 mockup canvas */
.how-canvas { position: relative; aspect-ratio: 1366 / 760; max-height: 760px; }
.how-tile {
  position: absolute;
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(22,21,19,0.28);
  padding: clamp(1rem, 1.8vw, 1.7rem) clamp(1.1rem, 2vw, 1.9rem);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.55vw, 1.35rem);
  line-height: 1.4;
  display: flex;
  align-items: center;
  background: var(--bone);
  color: var(--ink-2);
}
.how-tile--taupe { background: var(--taupe); }
.how-tile--right { text-align: right; justify-content: flex-end; }
/* measured off mockup (px of 1366×760) */
.how-tile--bring   { left: 8.5%;  top: 46.6%; width: 25.3%; height: 29.0%; }
.how-tile--give    { left: 30.1%; top: 17.4%; width: 18.2%; height: 32.6%; }
.how-tile--connect { left: 61.3%; top: 12.6%; width: 17.1%; height: 33.7%; }
.how-tile--run     { left: 64.8%; top: 42.9%; width: 26.7%; height: 48.9%; align-items: flex-end; padding-bottom: 7%; }
.how-cta {
  position: absolute;
  left: 48.5%; top: 78.7%;
  transform: translate(-50%, -50%);
}
.how-cta .cta-circle { --size: clamp(150px, 15vw, 205px); }
@media (max-width: 820px) {
  .how-canvas { aspect-ratio: auto; display: grid; gap: 1rem; padding: 1rem 0 0; }
  .how-tile { position: static; width: auto; height: auto; min-height: 7.5rem; }
  .how-tile--right { text-align: left; justify-content: flex-start; }
  .how-cta { position: static; transform: none; justify-self: center; margin-top: 1.5rem; }
}

/* ---------- hero scaffolding ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--section-y) + 3rem) var(--gutter) var(--section-y);
  position: relative;
}
.hero--short { min-height: 72vh; }

/* ---------- artists page ---------- */
.hero--artists { justify-content: flex-end; padding-bottom: clamp(3rem, 9vh, 5.5rem); }
.h-hero--artists { font-size: clamp(2.2rem, 5.4vw, 4.8rem); line-height: 1.1; }
.hero-artists-sub { margin-top: clamp(1.2rem, 3.5vh, 2.4rem); font-size: clamp(0.9rem, 1.25vw, 1.06rem); }

.benefits-stack {
  margin-left: 20%;                          /* measured: text block starts at x≈273 */
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.55rem, 3.35vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  display: grid;
  row-gap: clamp(0.5rem, 1.3vw, 1rem);
}
.benefits-stack .all-in-one { margin-top: clamp(1.2rem, 2.6vw, 2.2rem); }
.benefits-stack .all-in-one strong { font-weight: 700; }
@media (max-width: 640px) { .benefits-stack { margin-left: 0; } }

/* pricing layout: media 420px / copy 464px, inset from both gutters */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.3rem);
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}
.pricing-copy { font-family: var(--f-display); font-weight: 300; font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.5; }
.pricing-copy p + p { margin-top: 1.1em; text-align: justify; }
@media (max-width: 820px) { .pricing-grid { grid-template-columns: 1fr; } }

/* artists tile grid rows match mockup 455×405 cells */
.tile-grid--artists { grid-auto-rows: clamp(230px, 29.6vw, 405px); }

/* workflow cards: fixed height with staggered body starts (as mocked) */
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3.1vw, 2.7rem); max-width: 820px; margin: 0 auto; }
.workflow-grid .step-card { min-height: clamp(300px, 32.8vw, 448px); border-radius: 26px; }
.step-card .push-sm { margin-top: clamp(1rem, 4.5vw, 3.5rem); }
.step-card .push-md { margin-top: clamp(1.5rem, 8vw, 6.5rem); }
@media (max-width: 820px) {
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-grid .step-card { min-height: 0; }
  .step-card .push-sm, .step-card .push-md { margin-top: 0; }
}

/* consult banner: measured trio over full-bleed photo */
.consult-canvas { position: relative; aspect-ratio: 1366 / 770; max-height: 770px; }
.consult-h { position: absolute; left: 8.7%; top: 33%; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.5; font-weight: 300; font-family: var(--f-display); }
.consult-sub { position: absolute; left: 36.6%; top: 40%; font-family: var(--f-display); font-weight: 300; font-size: clamp(1rem, 1.95vw, 1.7rem); letter-spacing: 0.13em; line-height: 1.55; }
.consult-cta { position: absolute; left: 78%; top: 40%; transform: translate(-50%, -50%); }
.consult-cta .cta-circle { --size: clamp(130px, 14.5vw, 198px); }
.consult-mark { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: 56px; }
@media (max-width: 820px) {
  .consult-canvas { aspect-ratio: auto; padding: 3.5rem 0 5rem; }
  .consult-h, .consult-sub { position: static; }
  .consult-sub { margin-top: 1.5rem; }
  .consult-cta { position: static; transform: none; display: flex; justify-content: center; margin-top: 2.5rem; }
}

/* five-portrait strip variant (artists testimonials, 4th active) */
.strip--five { grid-template-columns: repeat(5, 1fr); }

/* ---------- home S2: path cards ---------- */
.paths-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4.5vw, 4.5rem);
  max-width: 940px;
  margin: 0 auto;
}
.path-copy { margin-top: clamp(1.3rem, 2.4vw, 2rem); }
.path-copy h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem); line-height: 1.3;
  margin: 0 0 0.8rem;
}
.path-copy p { font-size: 0.92rem; line-height: 1.75; margin: 0 0 1.2rem; opacity: 0.88; }
.path-card {
  display: block;
  position: relative;
  aspect-ratio: 382 / 634;
  border-radius: 10px;
  overflow: hidden;
}
.path-card.ph::after { position: absolute; left: 0; right: 0; bottom: 6%; opacity: 0.35; }
.path-card .path-label {
  position: absolute;
  top: 48%;
  left: 0; right: 0;
  text-align: center;
  font-size: clamp(0.85rem, 1.15vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  z-index: 2;
  color: #FFFEFA;
  text-shadow: 0 2px 20px rgba(0,0,0,0.7), 0 1px 6px rgba(0,0,0,0.5);
}
.path-card::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(22,21,19,0.18);
  transition: background 0.5s ease;
}
.path-card:hover::after, .path-card:focus-visible::after { background: rgba(22,21,19,0.48); }
@media (max-width: 640px) {
  .paths-pair { grid-template-columns: 1fr; max-width: 420px; }
}

/* ---------- real media ---------- */
.bg-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bg-media--top { object-position: top center; }
.scrim { position: absolute; inset: 0; z-index: 0; }
.scrim--dark  { background: linear-gradient(rgba(22,21,19,0.55), rgba(22,21,19,0.7)); }
.scrim--soft  { background: rgba(22,21,19,0.35); }
.media-frame { display: block; width: 100%; height: 100%; object-fit: cover; }
video.media-frame, img.media-frame { border-radius: inherit; }
.tile > img.media-frame { position: absolute; inset: 0; border-radius: 0; }
.card-media { width: 100%; height: auto; display: block; }


/* ---------- media placeholders (pass 1 only) ---------- */
.ph {
  position: relative;
  border: 1px dashed var(--glass-brd);
  border-radius: var(--radius);
  background: var(--glass);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph::after {
  content: attr(data-asset);
  font-family: var(--f-body);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
  text-align: center;
  padding: 0 1rem;
}
.ph--bg { align-items: flex-start; justify-content: center; }
.ph--bg::after { padding-top: 0.6rem; opacity: 0.3; }
.ph--tall { min-height: 420px; }
.ph--wide { aspect-ratio: 16 / 9; min-height: 0; }
.ph--square { aspect-ratio: 1 / 1; min-height: 0; }
.surface-bone .ph, .surface-taupe .ph { border-color: rgba(22,21,19,0.3); background: rgba(22,21,19,0.05); }


/* testimonial block */
.testimonial { max-width: 13rem; }
.testimonial .index { font-family: var(--f-body); font-size: 0.85rem; }
.testimonial .who { font-family: var(--f-body); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.1rem; line-height: 1.45; }
.testimonial blockquote { font-family: var(--f-body); font-size: 0.85rem; text-align: justify; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: none; }
.faq-item { border-top: 1px solid var(--glass-brd); }
.faq-item:last-child { border-bottom: 1px solid var(--glass-brd); }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.4rem, 3.1vw, 2.65rem) 0;
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-weight: 200;
  font-size: 1.8rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 0 1.6rem; max-width: 46rem; opacity: 0.92; box-sizing: border-box; }
.faq-body p + p, .faq-body ol { margin-top: 0.9em; }
.faq-body ol { padding-left: 1.3em; display: grid; gap: 0.55em; }
.faq-body a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.site-footer { padding: clamp(2.5rem, 5.5vw, 4.5rem) var(--gutter) 1.8rem; }
.site-footer .giant-wordmark {
  display: block;
  width: clamp(280px, 42vw, 578px);   /* measured off mockup footer */
  height: auto;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.footer-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap: wrap; }
.footer-links a {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.footer-social { display: flex; gap: 1.4rem; align-items: center; }
.footer-social svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ---------- intro gate (index) ---------- */
.intro-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.intro-gate.is-done { opacity: 0; visibility: hidden; }
.intro-gate .wordmark-sm { position: absolute; top: 2rem; font-family: var(--f-display); font-size: 1.2rem; }
.intro-gate .h1 { max-width: 18ch; }
.intro-gate .mark { position: absolute; bottom: 3.5rem; width: 46px; }

/* home hero — matched to mockup above-the-fold */
.hero--home { padding-top: calc(var(--section-y) + 1rem); padding-bottom: calc(var(--section-y) + 2rem); }
.h-hero--home {
  font-size: clamp(2.1rem, 4.8vw, 4.25rem);
  line-height: 1.22;
  text-align: center;
}
.hero-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 620px;
  margin: 0.9rem auto 0;
  align-items: start;
}
.hero-sub-cta { display: flex; justify-content: center; }
.hero-sub-cta .cta-circle {
  --size: clamp(150px, 15.4vw, 210px);
  margin-top: clamp(5rem, 10.2vw, 8.7rem); /* long lead line reaches up toward the headline */
}
.hero-sub-copy {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  text-align: center;
  padding-top: 0.6rem;
}
.hero-rail { position: absolute; }
.hero-rail--left  { left: var(--gutter); top: 53%; }
.hero-rail--right { right: var(--gutter); top: 50%; width: 44px; height: auto; opacity: 0.95; }
@media (max-width: 640px) {
  .hero-sub { grid-template-columns: 1fr; gap: 0.5rem; max-width: none; }
  .hero-sub-cta { order: 2; }
  .hero-sub-cta .cta-circle { margin-top: 2.5rem; }
  .hero-rail--left { display: none; }
  .hero-rail--right { top: auto; bottom: 1.5rem; width: 34px; }
}

/* utility */
.stack-lines { display: grid; gap: 0.15em; }
.dim { opacity: 0.55; }
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }


/* ============================================================
   MOTION SYSTEM — pass 2b
   Principles: slow, warm, few. Everything eases like fabric,
   nothing bounces. All motion disabled under reduced-motion,
   and reveal-hiding only applies when JS is present (html.js).
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rv-dur: 0.9s;
}

/* ---------- scroll reveals ---------- */
html.js .rv {
  opacity: 0;
  translate: 0 20px;               /* `translate` never fights existing transforms */
  transition:
    opacity var(--rv-dur) var(--ease-out) var(--rv-d, 0ms),
    translate var(--rv-dur) var(--ease-out) var(--rv-d, 0ms);
  will-change: opacity, translate;
}
html.js .rv--fade { translate: none; }           /* opacity-only (parallaxed items) */
html.js .how-tile.rv { transform: scale(0.965); transition: opacity 1s var(--ease-out) var(--rv-d, 0ms), transform 1s var(--ease-out) var(--rv-d, 0ms); }
html.js .how-tile.rv.in { transform: scale(1); }
html.js .rv.in { opacity: 1; translate: 0 0; }
html.js .rv.in.rv--fade { translate: none; }

/* ---------- header entrance ---------- */
html.js .site-header { animation: navSettle 0.9s var(--ease-out) 0.15s both; }
@keyframes navSettle {
  from { opacity: 0; translate: 0 -10px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- hero background settle (images only) ---------- */
html.js .hero img.bg-media,
html.js .studio-hero-canvas ~ * { }
html.js .hero img.bg-media { animation: bgSettle 2.4s var(--ease-out) both; }
@keyframes bgSettle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ---------- circular CTA: draw-in + hover ---------- */
html.js .cta-circle .ring {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s var(--ease-out) 0.35s, opacity 0.3s ease;
}
html.js .cta-circle .lead {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}
html.js .cta-circle text {
  opacity: 0;
  transition: opacity 0.7s ease 1.1s, transform 0.7s var(--ease-out);
}
html.js .cta-circle.in .ring,
html.js .cta-circle.in .lead { stroke-dashoffset: 0; }
html.js .cta-circle.in text { opacity: 1; }

.cta-circle svg text { transform-box: view-box; transform-origin: 50% 50%; }
.cta-circle svg .ring { transform-box: view-box; transform-origin: 50% 50%; transition-property: stroke-dashoffset, opacity, transform; }
.cta-circle:hover svg text,
.cta-circle:focus-visible svg text { transform: rotate(7deg); }
.cta-circle:hover svg .ring,
.cta-circle:focus-visible svg .ring { transform: scale(1.045); }

/* ---------- link & card hovers ---------- */
.path-card { overflow: hidden; border-radius: 10px; }
.path-card .media-frame { transition: transform 1.1s var(--ease-out), filter 0.6s ease; }
.path-card:hover .media-frame,
.path-card:focus-visible .media-frame { transform: scale(1.045); }

.card-media { transition: transform 1.1s var(--ease-out); }
a:hover > .card-media, a:focus-visible > .card-media { transform: scale(1.03); }

.nav-links a, .nav-drop > button, .footer-links a { transition: opacity 0.3s ease; }
.nav-links a:hover, .nav-drop > button:hover, .footer-links a:hover { opacity: 0.6; }

.nav-drop-menu { transition: opacity 0.35s ease, translate 0.35s var(--ease-out); }
html.js .nav-drop-menu { display: flex; opacity: 0; translate: 0 -6px; pointer-events: none; }
html.js .nav-drop.open .nav-drop-menu,
html.js .nav-drop:focus-within .nav-drop-menu { opacity: 1; translate: 0 0; pointer-events: auto; }

/* ---------- FAQ open/close ---------- */
.faq-item .faq-body { overflow: hidden; }
html.js .faq-item .faq-body { transition: height 0.42s var(--ease-out), opacity 0.42s ease; }
.faq-item.closing summary::after { transform: rotate(0deg); }
.faq-item summary::after { transition: transform 0.45s var(--ease-out); }

/* ---------- reduced motion: everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1 !important; translate: none !important; transition: none !important; }
  html.js .site-header, html.js .hero img.bg-media { animation: none !important; }
  html.js .cta-circle .ring, html.js .cta-circle .lead { stroke-dashoffset: 0 !important; transition: none !important; }
  html.js .cta-circle text { opacity: 1 !important; transition: none !important; }
  .cta-circle svg text, .cta-circle svg .ring,
  .path-card .media-frame, .card-media { transition: none !important; transform: none !important; }
  html.js .faq-item .faq-body { transition: none !important; }
}


/* ---------- home: what-we-do band + mini-FAQ ---------- */
.wwd { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); max-width: 980px; margin: 0 auto; }
.wwd h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.3;
  margin: 0 0 0.9rem;
}
.wwd p { font-size: 0.95rem; line-height: 1.75; margin: 0 0 1.1rem; }
a.text-link { font-family: var(--f-display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity 0.3s ease; }
a.text-link:hover { opacity: 0.55; }
@media (max-width: 820px) { .wwd { grid-template-columns: 1fr; } }

.faq-list--dark .faq-item { border-color: rgba(22,21,19,0.28); }
.faq-list--dark .faq-item:last-child { border-color: rgba(22,21,19,0.28); }
.mini-faq { max-width: 980px; margin: 0 auto; }
.mini-faq .faq-item summary { font-size: clamp(1.05rem, 1.6vw, 1.3rem); padding: clamp(1.1rem, 2vw, 1.6rem) 0; }


/* ============================================================
   ARTIST SHOWCASE — editorial testimonial carousel.
   One large portrait + the indexed quote as a single unit;
   small thumbnails select; the only motion is a slow crossfade.
   ============================================================ */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 22rem);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  justify-content: center;
  margin-top: clamp(2rem, 4.5vw, 4rem);
}
.showcase-media {
  position: relative;
  aspect-ratio: 9 / 10;
  border-radius: 14px;
  overflow: hidden;
}
.showcase-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 0.9s ease, transform 1.6s var(--ease-out);
}
.showcase-media img.on { opacity: 1; transform: scale(1); }

.showcase-body { max-width: 22rem; }
.showcase-body .index { font-size: 0.85rem; }
.showcase-body .who {
  font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase;
  margin: 0 0 1.1rem; line-height: 1.45;
}
.showcase-body blockquote {
  margin: 0;
  font-size: 0.9rem; line-height: 1.75; text-align: justify;
}
.showcase-quote { transition: opacity 0.45s ease, translate 0.45s var(--ease-out); }
.showcase-quote.is-fading { opacity: 0; translate: 0 8px; }

.showcase-thumbs {
  display: flex; gap: 0.6rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.2rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(22,21,19,0.18);
  flex-wrap: wrap;
}
.showcase-thumbs button {
  position: relative;
  width: clamp(40px, 3vw, 48px);
  aspect-ratio: 1;
  padding: 0; border: 0;
  border-radius: 8px; overflow: hidden;
  cursor: pointer;
}
.showcase-thumbs button img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.45; filter: saturate(0.85);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.showcase-thumbs button:hover img,
.showcase-thumbs button:focus-visible img { opacity: 0.85; }
.showcase-thumbs button.on img { opacity: 1; filter: none; }
.showcase-thumbs button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
/* quiet auto-advance cue: hairline that fills beneath the active thumb */
.showcase-thumbs button.on::after {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: rgba(250,249,245,0.95);
  box-shadow: 0 -1px 0 rgba(22,21,19,0.35);
  transform-origin: left;
  transform: scaleX(0);
}
.showcase.is-playing .showcase-thumbs button.on::after {
  animation: thumbProgress var(--showcase-dur, 5.5s) linear forwards;
}
@keyframes thumbProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 820px) {
  .showcase { grid-template-columns: 1fr; gap: 1.8rem; }
  .showcase-media { max-width: 420px; }
  .showcase-body { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-media img { transition: none; transform: none; }
  .showcase-quote { transition: none; translate: none; }
  .showcase.is-playing .showcase-thumbs button.on::after { animation: none; }
}


/* outline button (shared: card hover CTAs + closing) */
.btn-outline {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 0.9em 1.7em;
  font-family: var(--f-display); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.35s ease, color 0.35s ease, opacity 0.35s ease;
}
a.btn-outline:hover, a.btn-outline:focus-visible { background: var(--ink-2); color: var(--bone); border-color: var(--ink-2); }

.path-cta {
  position: absolute;
  top: 58%;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  color: #FFFEFA;
  --size: clamp(130px, 12vw, 165px);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.path-card:hover .path-cta,
.path-card:focus-visible .path-cta { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .path-cta { transition: none; opacity: 1; } }

/* home closing */
.closing { max-width: 980px; margin: 0 auto; }
.closing h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
}
.closing-links { display: flex; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); }
.closing .mark { width: 44px; height: auto; margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }


/* studios: how a build works + pricing */
.build-h {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  margin: 0 0 clamp(2rem, 4.5vw, 3.8rem);
}
.build-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.6rem);
}
.build-steps li { border-top: 1px solid rgba(250,249,245,0.28); padding-top: clamp(1.1rem, 2vw, 1.6rem); }
.build-steps .num { font-family: var(--f-display); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.2em; display: block; margin-bottom: 0.9rem; opacity: 0.7; }
.build-steps h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.35rem); margin: 0 0 0.7rem; }
.build-steps p { font-size: 0.9rem; line-height: 1.7; margin: 0; opacity: 0.88; }
@media (max-width: 1100px) { .build-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .build-steps { grid-template-columns: 1fr; } }

.pricing-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* two equal panels */
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.pricing-grid2 > .cta-circle { justify-self: center; --size: clamp(190px, 18vw, 250px); }
@media (max-width: 820px) { .pricing-grid2 { grid-template-columns: 1fr; } }
.pricing-block { max-width: 620px; }
.pricing-block h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.5rem); margin: 0 0 1.2rem;
}
.pricing-block p { font-family: var(--f-display); font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.6; margin: 0; }


/* studios proof: what we built with Prana */
.built-list { margin-top: clamp(1.4rem, 2.4vw, 2rem); max-width: none; }
.built-list h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.15rem, 1.8vw, 1.5rem); margin: 0 0 1rem; }
.built-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.built-list li { position: relative; padding-left: 1.3rem; font-size: 0.9rem; line-height: 1.65; opacity: 0.9; }
.built-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }


/* ============================================================
   ARTISTS · product beats + everything included
   ============================================================ */
.why-free { margin-top: 1.4em; font-size: clamp(0.92rem, 1.25vw, 1.05rem); line-height: 1.6; opacity: 0.85; text-align: left; }

.beats { display: grid; gap: clamp(3.5rem, 8vw, 7rem); max-width: 1060px; margin: 0 auto; }
.beat {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.beat--flip .beat-media { order: 2; }
.beat-media { border-radius: 14px; min-height: 0; justify-self: center; width: 100%; }
img.beat-media { object-fit: cover; display: block; }
.beat-media--phone { aspect-ratio: 9 / 16; max-width: 300px; border-radius: 22px; }
.beat-media--tall  { aspect-ratio: 4 / 5;  max-width: 340px; }
.beat-media--box   { aspect-ratio: 4 / 3;  max-width: 480px; }
.beat-cycle { position: relative; overflow: hidden; box-shadow: 0 16px 40px rgba(22,21,19,0.25); }
.beat-cycle img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.85s ease;
}
.beat-cycle img.on { opacity: 1; }
img.beat-media--box, img.beat-media--wide { box-shadow: 0 16px 40px rgba(22,21,19,0.25); }
@media (prefers-reduced-motion: reduce) { .beat-cycle img { transition: none; } }
.beat-media--wide  { aspect-ratio: 16 / 10; max-width: 560px; }
.beat-media--small { aspect-ratio: 4 / 3;   max-width: 420px; }
.beat-copy .num { font-family: var(--f-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; display: block; margin-bottom: 1rem; }
.beat-copy h3 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.4rem, 2.5vw, 2.1rem); line-height: 1.25; margin: 0 0 1rem; max-width: 18ch; }
.beat-copy p { font-size: 0.95rem; line-height: 1.75; margin: 0; max-width: 44ch; opacity: 0.9; }
.beat-copy .runs-on { margin-top: 1rem; font-family: var(--f-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; }
@media (max-width: 640px) {
  .beat { grid-template-columns: 1fr; gap: 1.6rem; }
  .beat--flip .beat-media { order: 0; }
  .beat-media--phone { max-width: 240px; }
  .beat-media--tall { max-width: 280px; }
}

.included { max-width: 980px; margin: 0 auto; }
.included h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.5rem); margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.included-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 3rem; }
.included-list li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; line-height: 1.6; }
.included-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
@media (max-width: 640px) { .included-list { grid-template-columns: 1fr; } }


/* ============================================================
   MOBILE PASS — responsive fixes site-wide
   ============================================================ */

/* accessibility: text floor + hit areas + focus + skip link */
.eyebrow { font-size: max(var(--t-eyebrow, 0.72rem), 0.75rem); }
.beat-copy .num, .build-steps .num, .beat-copy .runs-on { font-size: 0.75rem; }
.nav-links a { padding: 0.85rem 0.55rem; margin: -0.85rem -0.15rem; display: inline-block; }
.footer-links a { padding: 0.7rem 0.4rem; margin: -0.7rem -0.1rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.footer-social a.footer-contact { width: auto; white-space: nowrap; padding: 0 0.2rem; }
.showcase-thumbs button { min-width: 44px; min-height: 44px; }
.nav-links a:focus-visible, .footer-links a:focus-visible, a.text-link:focus-visible, .footer-social a:focus-visible,
a.btn-outline:focus-visible, .wordmark:focus-visible, .faq-item summary:focus-visible {
  outline: 1px solid currentColor; outline-offset: 3px; opacity: 1;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ink-2); color: var(--bone);
  padding: 0.8rem 1.2rem; border-radius: 6px;
  font-family: var(--f-display); font-size: 0.8rem; letter-spacing: 0.08em;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 1rem; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 820px) {
  /* rails become in-flow section intros; decorative floaters go */
  .rail-label { position: static !important; display: block; margin: 0 0 1.4rem; }
  .rail-mark { display: none !important; }
  section > img[style*="position:absolute"][src*="Conceptual"],
  section img.mark-float { display: none !important; }

  /* artists: benefits + hero rails */
  .hero-rail { display: none; }

  /* photo tile grids: two-up, hide pure-atmo filler tiles */
  .tile-grid { grid-template-columns: 1fr 1fr !important; grid-auto-rows: minmax(140px, 44vw) !important; }
  .tile:empty { display: none; }
  .tile--copy, .tile--headline, .tile--cta { grid-column: span 2; }

  /* showcase: media then quote then thumbs, all full width */
  .showcase { grid-template-columns: 1fr; }
  .showcase-media { max-width: none; }

  /* closing circles scale down so leads stay in-frame */
  .closing-links .cta-circle, .pricing-grid2 > .cta-circle { --size: clamp(150px, 40vw, 190px); }
}

@media (max-width: 640px) {
  /* studios hero: pull the stagger in from the edges, drop the mark */
  .studio-hero-h .l1 { margin-left: 7%; }
  .studio-hero-h .l2 { margin-left: 11%; }
  .studio-hero-h .l3 { margin-left: 6%; }
  .studio-hero-h .l4 { margin-left: 16%; }
  .studio-hero-sub { left: 7%; right: 7%; top: 56%; }
  .studio-hero-cta { left: 52%; top: 68%; }
  .studio-hero-mark { display: none; }

  /* home hero: give the stack room */
  .hero-sub-cta { left: 50%; }
}


/* current-page nav state */
.nav-links a[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
}


/* work cards: description bullet lists */
.built-list-sm { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.built-list-sm li { position: relative; padding-left: 1.2rem; font-size: 0.85rem; line-height: 1.6; opacity: 0.9; }
.built-list-sm li::before { content: ''; position: absolute; left: 0; top: 0.58em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.8; }

.pill-note--wide { max-width: 620px; margin-left: auto; margin-right: auto; font-size: 0.88rem; line-height: 1.65; }

/* ============================================================
   MOBILE PASS 2 — systematic fixes from the 320/390/768 review
   ============================================================ */


@media (max-width: 640px) {
  .studio-hero-canvas { display: flex; flex-direction: column; justify-content: flex-end;
    padding: 30% var(--gutter) 16%; min-height: 88svh; }
  .studio-hero-canvas .studio-hero-h,
  .studio-hero-canvas .studio-hero-sub,
  .studio-hero-canvas .studio-hero-cta { position: static !important; }
  .studio-hero-h span { margin-left: 0 !important; }
  .studio-hero-h .l2 { margin-left: 8% !important; }
  .studio-hero-h .l4 { margin-left: 16% !important; }
  .studio-hero-sub { margin-top: 1.4rem; max-width: 30ch; }
  .studio-hero-cta { margin: 2.2rem 0 0 32%; }
}

@media (max-width: 820px) {
  .tile-grid { grid-auto-flow: dense; grid-auto-rows: auto !important; }
  .tile:has(> img) { aspect-ratio: 1 / 1; }
  .tile--copy, .tile--headline { grid-column: span 2; min-height: 0; aspect-ratio: auto; padding: 1.5rem var(--gutter); }
  .tile--cta { grid-column: span 2; min-height: 300px; aspect-ratio: auto; }
  .tile--cta .cta-circle { --size: 140px; }
  .hero-rail, .page-tag { display: none; }
}

@media (max-width: 640px) {
  .section.center .cta-circle { display: inline-block; margin-top: 6.5rem; --size: clamp(140px, 42vw, 180px); }
  .closing-links .cta-circle, .pricing-grid2 > .cta-circle { --size: clamp(130px, 38vw, 180px); }
  .pricing-grid2 > .cta-circle { justify-self: start; margin-left: 4%; --size: clamp(120px, 34vw, 170px); }
  [data-section="artists-pricing"] .cta-circle { --size: clamp(120px, 34vw, 170px); margin-left: 0; display: inline-block; }
}

@media (max-width: 700px) {
  section[data-section="work-selected"] div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important; row-gap: 3.5rem;
  }
}


/* faq categories */
.faq-cat-block + .faq-cat-block { margin-top: clamp(3rem, 7vw, 5.5rem); }
.faq-cat {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  margin: 0 0 clamp(1.2rem, 2.4vw, 2rem);
}


/* lead FAQ item (get in touch, open by default) */
.faq-item--lead { border-bottom: 1px solid var(--glass-brd); margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.footer-contact { font-size: 0.78rem; letter-spacing: 0.06em; opacity: 0.85; }
.footer-contact + .footer-contact { margin-left: 1.2rem; }
@media (max-width: 480px) { .footer-social { flex-wrap: wrap; justify-content: flex-start; row-gap: 0; } }
.footer-contact:hover { opacity: 1; }


/* ============================================================
   FAQ accordion v2 — button + grid-rows animation.
   0fr -> 1fr interpolates the row itself, so open and close are
   equally smooth with zero JS measurement.
   ============================================================ */
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  width: 100%; background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  letter-spacing: 0.02em;
}
.faq-q::after {
  content: '+'; font-size: 1.3em; font-weight: 200; line-height: 1;
  transition: transform 0.45s var(--ease-out); flex: none;
}
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-q:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > .faq-body {
  overflow: hidden; min-height: 0; padding: 0;   /* padding can't collapse in a 0fr row */
  opacity: 0; transition: opacity 0.4s ease 0.05s;
}
.faq-a > .faq-body::after { content: ''; display: block; height: 1.5rem; }
.faq-item.is-open .faq-a > .faq-body { opacity: 0.92; }
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-a > .faq-body, .faq-q::after { transition: none; }
}

/* tighten the tail of the artists product section */
[data-section="artists-product"] { padding-bottom: clamp(3rem, 6vw, 5.5rem); }


/* trust grid: tighter rows on desktop (momentum) */
[data-section="artists-tiles"] .tile-grid { grid-auto-rows: clamp(190px, 20vw, 285px); }

@media (max-width: 820px) {
  /* mobile: copy + CTA only in the trust grid — photos made it feel long */
  [data-section="artists-tiles"] .tile:has(> img) { display: none; }
}
@media (max-width: 640px) {
  /* consult: text off the raw edge */
  .consult-canvas { padding-left: var(--gutter); padding-right: var(--gutter); }
}



/* header: wordmark left, nav + account button clustered right */
.site-header { justify-content: flex-start; }
.site-header .nav-links { margin-left: auto; }

/* header account button + footer faq link */
.nav-btn {
  font-family: var(--f-display); font-weight: 500;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 0.75em 1.5em; margin-left: clamp(1rem, 2.5vw, 2.4rem);
  white-space: nowrap; transition: opacity 0.25s ease;
  display: inline-flex; align-items: center; min-height: 40px;
}
.nav-btn:hover { opacity: 0.75; }
.nav-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.footer-links a { font-size: 0.78rem; letter-spacing: 0.08em; opacity: 0.85; padding: 0.7rem 0.4rem; margin: -0.7rem -0.1rem; }
.footer-links a:hover, .footer-links a:focus-visible { opacity: 1; }



/* ============================================================
   MOBILE MENU — burger + full-screen overlay
   ============================================================ */
.menu-toggle {
  display: none; position: relative; z-index: 120;
  width: 44px; height: 44px; margin-left: 0.4rem;
  background: none; border: 0; cursor: pointer; color: inherit;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.menu-toggle span {
  display: block; width: 22px; height: 1px; background: currentColor;
  transition: transform 0.35s var(--ease-out), opacity 0.3s ease;
}
html.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
html.menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 110;
  background: var(--ink-2); color: var(--bone);
  display: none; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem; gap: 0.4rem;
  opacity: 0; transition: opacity 0.35s ease;
}
.mobile-menu a {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.5;
  letter-spacing: 0.02em;
}
.mobile-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.mobile-menu .mobile-menu-login {
  margin-top: 2.2rem; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 0.9em 1.6em; align-self: flex-start;
}
.mobile-menu-contact {
  margin-top: auto; font-size: 0.8rem; line-height: 1.7; opacity: 0.7;
}
html.menu-open .mobile-menu { display: flex; opacity: 1; }
html.menu-open .site-header { position: fixed; z-index: 130; }
html.menu-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mobile-menu, .menu-toggle span { transition: none; } }

@media (max-width: 700px) {
  .site-header .nav-links { display: none; }
  .menu-toggle { display: flex; }
  .nav-btn { margin-left: auto; font-size: 0.64rem; padding: 0.7em 1.2em; }
}


/* ============================================================
   MOBILE FOOTER — stacked, left-aligned, tap-friendly
   ============================================================ */
@media (max-width: 600px) {
  .site-footer { padding-bottom: 2.2rem; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 1.6rem; }
  .footer-social { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .footer-social a.footer-contact { padding: 0.4rem 0; margin: 0; }
  .footer-links a { padding: 0.4rem 0; margin: 0; }
}

/* small circles: keep the curved label on the arc */
@media (max-width: 640px) {
  .closing-links .cta-circle, .section.center .cta-circle { --size: clamp(155px, 44vw, 190px); }
  .cta-circle svg text { letter-spacing: 0.06em; }
}


/* ============================================================
   MOBILE POLISH ROUND 3 (Aron's 7 fixes, Sep 14)
   ============================================================ */
@media (max-width: 640px) {
  /* 1. home hero circle: clear the sub copy above it */
  .hero-sub-cta .cta-circle { margin-top: 7.5rem; }

  /* 4. studios hero owns the full first screen */
  .studio-hero-canvas { min-height: 100svh; }

  /* 5. beats read text first, image after */
  .beat .beat-media, .beat--flip .beat-media { order: 2; }

  /* 6. mission circle optically centred: clear air between the pill and
     the lead tip, matched by the air below the label */
  [data-section="artists-product"] { padding-bottom: 8.5rem; }
  [data-section="artists-product"] .center { margin-top: 10rem !important; }
}

@media (max-width: 820px) {
  /* 2. home story tiles: text vertically centred in every tile */
  .how-tile, .how-tile--run { display: flex; align-items: center; padding: 1.4rem var(--gutter); }

  /* 7. signup tile drops below the trust points */
  .tile--cta { order: 99; }
}

/* 3. footer links run horizontally on mobile */
@media (max-width: 600px) {
  .footer-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.6rem; }
  .footer-social { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.6rem; }
}