/* ==========================================================================
   ISA Studios — site styles
   Brand tokens come straight from the brand kit (palette.json).
   ========================================================================== */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("../fonts/pinyon-script.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
/* Font licenses (SIL OFL 1.1) ship next to the font files in assets/fonts/. */

:root {
  /* Brand palette */
  --ink: #111111;
  --cream: #F3EEE6;
  --chrome: #C0C0C0;
  --orchid: #A54379;
  --blush: #F2C4DE;
  /* Supporting tones used in the brand kit */
  --paper: #FAF8F4;
  --line: #D8D1C7;
  --ink-soft: rgba(17, 17, 17, .72);
  --cream-soft: rgba(243, 238, 230, .74);

  --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1440px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --radius: 2px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--blush); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orchid); outline-offset: 3px; }
.on-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--blush); }
main:focus { outline: none; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 16px; transition: top .2s; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
.display, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: .98; font-variation-settings: "opsz" 96; }
.display { font-size: clamp(2.9rem, 1rem + 5.4vw, 6.6rem); }
.h1 { font-size: clamp(2.8rem, 1.4rem + 5.6vw, 6.6rem); }
.h2 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem); }
.h3 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.05; }
.italic, em.accent { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
em.accent { color: var(--orchid); }
.on-ink em.accent { color: var(--blush); }
.statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1rem + 2.4vw, 3.2rem); line-height: 1.16; letter-spacing: -.012em; font-variation-settings: "opsz" 48; }
.lede { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.55; max-width: 36em; }
.label, .eyebrow { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; margin: 0; }
.eyebrow { display: flex; flex-wrap: wrap; gap: .5em 1em; align-items: center; color: var(--ink-soft); margin-bottom: 1.4rem; }
.on-ink .eyebrow { color: var(--cream-soft); }
.eyebrow .spark { width: 12px; height: 12px; }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; line-height: 1; }
.muted { color: var(--ink-soft); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(80px, 11vw, 168px); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.on-ink { background: var(--ink); color: var(--cream); }
.on-paper { background: var(--paper); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.on-ink .rule { border-color: rgba(243, 238, 230, .18); }
.section-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.section-num { font-family: var(--font-display); font-style: italic; color: var(--orchid); font-size: 1.1rem; }
.on-ink .section-num { color: var(--blush); }

/* ---------- Buttons & links ---------- */
.btn {
  --bg: var(--ink); --fg: var(--cream);
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 52px; padding: 0 1.6em;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bg); border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { --bg: var(--orchid); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--cream); }
.btn--cream { --bg: var(--cream); --fg: var(--ink); }
.btn--cream:hover { --bg: var(--ink); --fg: var(--cream); }
.on-ink .btn--ghost { --fg: var(--cream); border-color: var(--cream); }
.on-ink .btn--ghost:hover { --bg: var(--cream); --fg: var(--ink); }
.on-ink .btn:not(.btn--ghost):not(.btn--cream):not(.btn--pink) { --bg: var(--cream); --fg: var(--ink); }
.on-ink .btn:not(.btn--ghost):not(.btn--cream):not(.btn--pink):hover { --bg: var(--blush); }
.btn--sm { min-height: 42px; padding: 0 1.2em; font-size: .875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-arrow { display: inline-flex; gap: .5em; align-items: center; font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .45s var(--ease); }
.link-arrow:hover { background-size: 0 1px; background-position: 100% 100%; }
.link-arrow span { transition: transform .35s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- Tags ---------- */
.tag { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .35em .8em; border: 1px solid currentColor; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.tag--personal-brand-work { color: var(--ink); }
.tag--concept-project, .tag--sample-design { color: var(--orchid); border-style: dashed; }
.tag--client-work { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--cream); transition: box-shadow .3s, transform .4s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header__inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.site-header__logo { flex: none; display: block; padding: 8px 0; }
.site-header__logo img { width: clamp(132px, 12vw, 168px); height: auto; }
.site-nav { margin-left: auto; }
.site-nav__list { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.site-nav__list a { position: relative; display: inline-block; padding: 8px 0; text-decoration: none; font-weight: 500; font-size: .95rem; }
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav__list a[aria-current="page"] { color: var(--orchid); }
.site-nav__toggle, .site-nav__meta { display: none; }
.site-header__cta { flex: none; }

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .site-header__cta { margin-left: auto; padding-inline: 1em; }
  .site-nav { margin-left: 0; order: 3; }
  .site-nav__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 8px; background: none; border: 0; cursor: pointer; font-weight: 600; font-size: .875rem; }
  .site-nav__toggle-icon { position: relative; width: 22px; height: 12px; }
  .site-nav__toggle-icon i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
  .site-nav__toggle-icon i:first-child { top: 2px; }
  .site-nav__toggle-icon i:last-child { top: 9px; }
  [aria-expanded="true"] .site-nav__toggle-icon i:first-child { top: 5.5px; transform: rotate(45deg); }
  [aria-expanded="true"] .site-nav__toggle-icon i:last-child { top: 5.5px; transform: rotate(-45deg); }
  .js .site-nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 28px;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .js .site-nav__panel.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list li { border-bottom: 1px solid var(--line); }
  .site-nav__list a { display: block; padding: 14px 0; font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; letter-spacing: -.01em; }
  .site-nav__list a::after { display: none; }
  .site-nav__meta { display: block; margin: 20px 0 0; font-size: .875rem; color: var(--ink-soft); }
  /* No-JS fallback: show links inline below the bar */
  html:not(.js) .site-header__inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
  html:not(.js) .site-nav__toggle { display: none; }
  html:not(.js) .site-nav__list { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
  html:not(.js) .site-nav__list a { font-size: 1rem; font-family: var(--font-body); padding: 6px 0; }
  html:not(.js) .site-nav__list li { border: 0; }
}
@media (max-width: 480px) {
  .site-header__inner { gap: 10px; }
  .site-header__logo img { width: 118px; }
  .site-header__cta { min-height: 40px; padding: 0 14px; font-size: .8125rem; }
  .site-header__cta .btn__arrow { display: none; }
  .site-nav__toggle { padding: 0; min-width: 44px; justify-content: center; }
  .site-nav__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 340px) {
  .site-header__logo img { width: 100px; }
  .site-header__cta { padding: 0 10px; }
}

/* ---------- Reveal on scroll (only when JS + motion allowed) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   HOME — hero with the dimensional studio set
   ========================================================================== */
.hero { position: relative; padding-block: clamp(24px, 3vw, 48px) clamp(64px, 8vw, 120px); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(calc(100svh - var(--header-h) - 60px), 820px); }
.hero__title { margin: 0 0 clamp(20px, 2.4vw, 32px); }
.hero__title .italic { display: block; color: var(--orchid); font-size: .92em; line-height: 1.02; }
.hero__copy .lede { margin-bottom: clamp(28px, 3vw, 40px); color: var(--ink-soft); max-width: 31em; }
.hero__foot { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(32px, 4vw, 56px); padding-top: 18px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-soft); }
.hero__foot .script { font-size: 1.6rem; color: var(--orchid); }

/* Stage: real CSS 3D, sized with container units so it scales cleanly */
.stage { position: relative; container-type: inline-size; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; justify-self: center; perspective: 1500px; perspective-origin: 50% 42%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage__shadow { position: absolute; left: 14%; right: 14%; bottom: 7%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(17,17,17,.28), rgba(17,17,17,0)); filter: blur(6px); transform: translate3d(calc(var(--rx, 0) * -.6px), 0, 0); }
.scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(8deg + var(--tx, 0deg))) rotateY(calc(-16deg + var(--ty, 0deg))); will-change: transform; }
.layer { position: absolute; transform-style: preserve-3d; }
.layer img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.float { transform-style: preserve-3d; width: 100%; height: 100%; animation: float 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes float { 50% { transform: translate3d(0, -2.2cqw, 0); } }

.layer--proposal { width: 58cqw; aspect-ratio: 4 / 3; left: 6cqw; top: 9cqw; transform: translateZ(-14cqw) rotateZ(-7deg); }
.layer--proposal img, .layer--sticker img { box-shadow: 0 2cqw 5cqw rgba(17,17,17,.14); }
.layer--proposal img { object-fit: cover; }

.layer--card { width: 64cqw; aspect-ratio: 1050 / 600; left: 22cqw; top: 38cqw; transform: translateZ(6cqw) rotateZ(4deg); }
.card3d { position: relative; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 1s var(--ease); display: block; }
.card3d.is-flipped { transform: rotateY(180deg); }
.card3d__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2.4cqw 5cqw rgba(17,17,17,.22); }
.card3d__face img { object-fit: cover; }
.card3d__face--back { transform: translateZ(-.7cqw) rotateY(180deg); }
.card3d__edge { position: absolute; inset: 0; background: #2a2a2a; transform: translateZ(-.35cqw); }
.card3d:focus-visible { outline: none; }
.card3d:focus-visible .card3d__face { outline: 2px solid var(--orchid); outline-offset: 6px; }
.card3d__hint { position: absolute; right: 0; bottom: -6.2cqw; font-size: max(11px, 2.1cqw); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); transform: translateZ(1px); white-space: nowrap; }

.layer--sticker { width: 27cqw; aspect-ratio: 1; left: 68cqw; top: 8cqw; transform: translateZ(14cqw) rotateZ(10deg); }
.layer--sticker img { border-radius: 50%; }
.layer--orbit { width: 104cqw; aspect-ratio: 2 / 1; left: -2cqw; top: 41cqw; transform: rotateX(68deg) rotateZ(-8deg); }
.orbit-spin { width: 100%; height: 100%; animation: spin 38s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.layer--spark { width: 9cqw; aspect-ratio: 1; left: 84cqw; top: 33cqw; transform: translateZ(26cqw); }
.layer--spark2 { width: 6cqw; aspect-ratio: 1; left: 12cqw; top: 79cqw; transform: translateZ(18cqw); }
.layer--spark img, .layer--spark2 img { animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(45deg) scale(.82); } }

@supports not (transform-style: preserve-3d) {
  .scene, .layer { transform: none !important; }
}

/* ==========================================================================
   HOME — sections
   ========================================================================== */
.intro__grid { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); }
.intro__grid .statement { margin-bottom: 1.2em; }
.intro__grid .statement em { color: var(--orchid); }
.intro__aside { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.intro__mark { width: 84px; opacity: .9; }

/* Services list on ink */
.svc-list { border-top: 1px solid rgba(243,238,230,.18); counter-reset: svc; }
.svc-row { border-bottom: 1px solid rgba(243,238,230,.18); }
.svc-row__link { display: grid; grid-template-columns: 64px minmax(0, 1.3fr) minmax(0, 1fr) 56px; gap: clamp(16px, 3vw, 48px); align-items: center; padding-block: clamp(28px, 3.6vw, 52px); text-decoration: none; position: relative; }
.svc-row__num { font-family: var(--font-display); font-style: italic; color: var(--blush); font-size: 1.1rem; }
.svc-row__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 1.1rem + 3.2vw, 4.4rem); line-height: 1; letter-spacing: -.02em; transition: transform .6s var(--ease), color .4s; }
.svc-row__desc { color: var(--cream-soft); margin: 0; max-width: 30em; }
.svc-row__arrow { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(243,238,230,.35); display: grid; place-items: center; transition: background .4s var(--ease), color .4s, transform .5s var(--ease), border-color .4s; }
.svc-row__link:hover .svc-row__title, .svc-row__link:focus-visible .svc-row__title { transform: translateX(14px); color: var(--blush); }
.svc-row__link:hover .svc-row__arrow, .svc-row__link:focus-visible .svc-row__arrow { background: var(--blush); color: var(--ink); border-color: var(--blush); transform: rotate(-45deg); }
@media (hover: hover) and (min-width: 1100px) {
  .svc-row__link:hover }

/* Featured work */
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
.feature-grid .feature-1 { grid-column: 1 / span 5; grid-row: span 2; }
.feature-grid .feature-2 { grid-column: 7 / span 6; }
.feature-grid .feature-3 { grid-column: 7 / span 4; margin-top: clamp(0px, 3vw, 40px); }
.feature-grid .feature-1 .work-card__media { aspect-ratio: 3 / 4; }
.feature-grid .feature-2 .work-card__media { aspect-ratio: 4 / 3; }
.feature-grid .feature-3 .work-card__media { aspect-ratio: 4 / 5; }

/* Work cards (shared by home + portfolio) */
.work-card__link { display: block; text-decoration: none; }
.work-card__media { position: relative; display: block; overflow: hidden; background: var(--line); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.work-card__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(17,17,17,.1); pointer-events: none; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.work-card__link:hover .work-card__media img { transform: scale(1.035); }
.work-card__open { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--cream); color: var(--ink); border-radius: 999px; font-size: .8125rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.work-card__open i { font-style: normal; font-size: 1.1em; line-height: 1; color: var(--orchid); }
.work-card__link:hover .work-card__open, .work-card__link:focus-visible .work-card__open { opacity: 1; transform: none; }
@media (hover: none) { .work-card__open { opacity: 1; transform: none; } }
.work-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 16px; }
.work-card__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem); letter-spacing: -.01em; line-height: 1.1; width: 100%; }
.work-card__cat { font-size: .8125rem; color: var(--ink-soft); }

/* Process */
.process__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: clamp(64px, 8vw, 110px) minmax(0, 1fr); gap: 20px; padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num { font-family: var(--font-display); font-style: italic; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem); line-height: .9; color: var(--chrome); transition: transform .6s var(--ease), color .4s; }
.step:hover .step__num { color: var(--orchid); }
.step:hover .step__num { transform: translateX(6px) rotate(-4deg); }
.step h3 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.3rem, 1.05rem + .9vw, 1.9rem); line-height: 1.1; margin-bottom: .4em; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--ink-soft); max-width: 34em; }
.process__note { color: var(--ink-soft); }

/* Closing CTA */
.cta { text-align: center; overflow: hidden; }
.cta__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 1.2rem + 6vw, 7.4rem); line-height: .98; letter-spacing: -.025em; margin: 0 auto .5em; max-width: 12ch; }
.cta__title .italic { display: block; }
.cta__title .italic { color: var(--orchid); }
.on-ink .cta__title .italic { color: var(--blush); }
.cta p { max-width: 32em; margin: 0 auto 2rem; color: var(--ink-soft); }
.on-ink.cta p { color: var(--cream-soft); }
.cta:not(.on-ink) { border-top: 1px solid var(--line); }
.pricing-band { border-block: 1px solid var(--line); }
.cta__spark { width: 28px; margin: 0 auto 28px; }

/* ==========================================================================
   Page heroes (About, Services, Portfolio, Contact)
   ========================================================================== */
.page-hero { padding-block: clamp(48px, 8vw, 128px) clamp(40px, 6vw, 88px); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.page-hero .lede { color: var(--ink-soft); margin: 0; }
.page-hero .script { color: var(--orchid); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); margin-top: .3em; }

/* ---------- About ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.founder__frame { position: sticky; top: calc(var(--header-h) + 24px); }
.founder__img, .founder__placeholder { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.founder__placeholder { position: relative; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.founder__orbit { position: absolute; width: 120%; max-width: none; opacity: .9; transform: rotate(-6deg); }
.founder__mono { width: 46%; }
.founder__placeholder .review-note { position: absolute; left: 16px; right: 16px; bottom: 16px; }
.founder__caption { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: .8125rem; color: var(--ink-soft); }
.story > * + * { margin-top: clamp(40px, 5vw, 72px); }
.story__lead { font-family: var(--font-display); font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem); line-height: 1.3; font-weight: 400; letter-spacing: -.01em; }
.story__lead::first-letter { font-weight: 900; float: left; font-size: 3.4em; line-height: .82; padding: .06em .08em 0 0; color: var(--orchid); }
.chapter { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
.chapter__label { font-family: var(--font-display); font-style: italic; color: var(--orchid); font-size: 1.05rem; padding-top: .2em; }
.chapter h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); letter-spacing: -.01em; margin-bottom: .6em; line-height: 1.1; }
.chapter p { color: var(--ink-soft); max-width: 36em; }
.ventures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 1.6em 0 1.2em; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ventures li { padding: 16px 14px 16px 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; }
.ventures li + li { border-left: 1px solid var(--line); padding-left: 14px; }
.ventures small { display: block; font-family: var(--font-body); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.signoff { display: flex; align-items: center; gap: 16px; }
.signoff .script { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); color: var(--ink); }
.signoff span:last-child { font-size: .8125rem; color: var(--ink-soft); }

.pullquote { text-align: center; position: relative; }
.pullquote blockquote { margin: 0 auto; max-width: 18ch; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 1rem + 4.6vw, 5.4rem); line-height: 1.04; letter-spacing: -.02em; }
.pullquote figcaption { margin-top: 32px; }
.pullquote img { width: 22px; margin: 0 auto 16px; }

.approach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 96px); }
.approach__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-block: 22px; border-top: 1px solid rgba(243,238,230,.18); }
.approach__list li:last-child { border-bottom: 1px solid rgba(243,238,230,.18); }
.approach__list img { width: 18px; margin-top: 6px; transition: transform .6s var(--ease); }
.approach__list li:hover img { transform: rotate(90deg) scale(1.15); }
.approach__list h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; margin-bottom: .3em; letter-spacing: -.01em; }
.approach__list p { margin: 0; color: var(--cream-soft); }

/* ---------- Services ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9375rem; transition: background .3s, color .3s; }
.jump a span { font-family: var(--font-display); font-style: italic; color: var(--orchid); }
.jump a:hover { background: var(--ink); color: var(--cream); }
.jump a:hover span { color: var(--blush); }

.service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.service__head { position: sticky; top: calc(var(--header-h) + 32px); }
.service__num { font-family: var(--font-display); font-style: italic; font-size: clamp(4rem, 2.4rem + 6vw, 8rem); line-height: .8; color: var(--chrome); display: block; margin-bottom: 18px; }
.on-ink .service__num { color: #6b6b6b; }
.service__head .h2 { margin-bottom: .45em; }
.service__body > * + * { margin-top: clamp(32px, 4vw, 48px); }
.service__intro { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.55; }
.deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.deliverables li { position: relative; padding: 14px 0 14px 26px; border-top: 1px solid var(--line); }
.on-ink .deliverables li { border-color: rgba(243,238,230,.18); }
.deliverables li::before { content: ""; position: absolute; left: 0; top: 21px; width: 11px; height: 11px; background: url("../brand/sparkle-chrome.svg") center / contain no-repeat; transition: transform .5s var(--ease); }
.on-ink .deliverables li::before { background-image: url("../brand/sparkle-chrome.svg"); }
.deliverables li:hover::before { transform: rotate(45deg) scale(1.25); }
.fit { padding: clamp(22px, 2.6vw, 32px); border: 1px solid var(--line); background: var(--paper); }
.on-ink .fit { background: transparent; border-color: rgba(243,238,230,.25); }
.fit p:last-child { margin: 0; }
.fineprint { font-size: .9375rem; color: var(--ink-soft); }
.on-ink .fineprint, .on-ink .muted { color: var(--cream-soft); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(243,238,230,.25); }
.ways li { padding: 22px 20px 4px 0; }
.ways li + li { padding-left: 20px; border-left: 1px solid rgba(243,238,230,.25); }
.ways strong { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 2rem; color: var(--blush); line-height: 1; margin-bottom: 10px; }
.ways p { margin: 0; color: var(--cream-soft); font-size: .9375rem; }
.onset { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.onset img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.onset figcaption { font-size: .8125rem; color: var(--cream-soft); }
.design-strip { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; align-items: end; }
.design-strip img { width: 100%; height: auto; box-shadow: 0 14px 34px rgba(17,17,17,.12); }
.design-strip figcaption { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink-soft); }

.pricing { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; align-items: center; }
.pricing .h2 { max-width: 16ch; }

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.01em; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; font-family: var(--font-body); font-weight: 400; font-size: 1.25rem; transition: transform .4s var(--ease), background .3s, color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--cream); }
.faq details p { color: var(--ink-soft); max-width: 40em; padding-bottom: 22px; margin: 0; }

/* ---------- Portfolio ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 56px); }
.filter { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; cursor: pointer; font-weight: 500; transition: background .3s, color .3s; }
.filter:hover { background: rgba(17,17,17,.06); }
.filter.is-active { background: var(--ink); color: var(--cream); }
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 44px); align-items: start; }
.work-grid .work-card { grid-column: span 6; }
.work-grid .work-card--tall { grid-column: span 5; }
.work-grid .work-card--wide { grid-column: span 7; }
.work-grid .work-card--regular .work-card__media { aspect-ratio: 4 / 5; }
.work-grid .work-card--tall .work-card__media { aspect-ratio: 3 / 4; }
.work-grid .work-card--wide .work-card__media { aspect-ratio: 4 / 3; }
.work-grid .work-card:nth-child(4n+3) { margin-top: clamp(0px, 6vw, 96px); }
.work-card.is-hidden { display: none; }
.work-card.is-entering { animation: cardIn .6s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } }
.labels-key { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: .875rem; color: var(--ink-soft); margin-top: 28px; }
.labels-key span { display: inline-flex; gap: 10px; align-items: center; }

/* Project detail: hidden in the page, shown in a <dialog> (or via :target without JS) */
.projects-store .project { display: none; }
.projects-store .project:target { display: grid; position: fixed; inset: 0; z-index: 80; background: var(--cream); overflow-y: auto; padding: var(--gutter); }
.project-dialog { width: min(1320px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: var(--cream); color: var(--ink); overflow: hidden; }
.project-dialog::backdrop { background: rgba(17,17,17,.72); }
.project-dialog[open] { animation: dialogIn .5s var(--ease); }
.project-dialog[open]::backdrop { animation: fadeIn .4s ease; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes fadeIn { from { opacity: 0; } }
.project-dialog__scroll { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.project-dialog__close { position: absolute; top: 14px; right: 14px; z-index: 3; }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink); background: var(--cream); display: inline-grid; place-items: center; cursor: pointer; font-size: 1.1rem; transition: background .3s, color .3s, transform .4s var(--ease); }
.icon-btn:hover { background: var(--ink); color: var(--cream); }
.project-dialog__close:hover { transform: rotate(90deg); }
.project { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.project__gallery { background: var(--paper); padding: clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.slides { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; padding-bottom: 6px; }
.slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; height: min(68dvh, 720px); }
.slide img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 16px 40px rgba(17,17,17,.12); }
.slides__controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.slides__count { font-size: .875rem; font-variant-numeric: tabular-nums; min-width: 4em; text-align: center; }
.project__info { padding: clamp(28px, 3.6vw, 56px); padding-top: clamp(64px, 6vw, 80px); }
.project__info .eyebrow { margin-bottom: 1rem; }
.project__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -.02em; margin-bottom: .3em; }
.project__subtitle { font-family: var(--font-display); font-style: italic; color: var(--orchid); font-size: 1.2rem; }
.project__facts { margin: 28px 0; }
.project__facts > div { padding-block: 14px; border-top: 1px solid var(--line); }
.project__facts dt { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; color: var(--ink-soft); }
.project__facts dd { margin: 0; }
.project__facts ul li { padding-left: 18px; position: relative; }
.project__facts ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: url("../brand/sparkle-chrome.svg") center / contain no-repeat; }
.project__nav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; font-size: .9375rem; }
.project__nav a { font-weight: 600; text-decoration: none; }
.project__nav a:hover { color: var(--orchid); }
.project__back { display: inline-block; margin-top: 18px; font-size: .875rem; }
.project-dialog .project__back { display: none; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.contact__details { margin: 36px 0; }
.contact__details > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding-block: 16px; border-top: 1px solid var(--line); }
.contact__details > div:last-child { border-bottom: 1px solid var(--line); }
.contact__details dt { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding-top: .3em; }
.contact__details dd { margin: 0; overflow-wrap: anywhere; }
.contact__details a { font-weight: 600; }
.contact-hero { padding-bottom: clamp(28px, 4vw, 56px); }
.contact-main { padding-top: 0; }
.contact__heading { margin: 0 0 4px; color: var(--ink-soft); }
.contact__details { margin: 12px 0 40px; }
.next-steps { counter-reset: none; }
.next-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-block: 16px; border-top: 1px solid var(--line); }
.next-steps li:last-child { border-bottom: 1px solid var(--line); }
.next-steps__num { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.next-steps li:first-child .next-steps__num { color: var(--orchid); }
.next-steps h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; letter-spacing: -.01em; margin-bottom: .25em; }
.next-steps p { margin: 0; color: var(--ink-soft); font-size: .9375rem; }
.ext { display: inline-block; margin-left: .3em; font-size: .85em; line-height: 1; opacity: .7; transform: translateY(-.05em); }
.btn .ext { opacity: 1; margin-left: 0; }

/* Follow-up questionnaire: secondary, with a quiet orchid accent */
.followup-band { padding-top: 0; }
.followup { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: center; padding: clamp(24px, 3.4vw, 44px); border: 1px solid var(--line); border-left: 3px solid var(--orchid); background: var(--paper); }
.followup__spark { width: 22px; align-self: start; margin-top: 6px; }
.followup__eyebrow { color: var(--orchid); margin-bottom: 8px; }
.followup .h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); margin-bottom: .5em; }
.followup p:last-child { margin: 0; color: var(--ink-soft); max-width: 46em; }
.followup .btn { white-space: normal; text-align: center; justify-content: center; line-height: 1.3; padding-block: 12px; }

/* Inquiry embed + fallback when it can't load */
.form-unavailable { display: none; padding: clamp(28px, 4vw, 48px) clamp(18px, 2.4vw, 32px); text-align: center; }
.form-unavailable p { color: var(--ink-soft); margin-bottom: 18px; }
html:not(.js) .form-embed, .form-card.is-unavailable .form-embed { display: none; }
html:not(.js) .form-unavailable, .form-card.is-unavailable .form-unavailable { display: block; }
.form-card { background: var(--paper); border: 1px solid var(--line); }
.form-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; padding: 20px clamp(18px, 2.4vw, 32px); border-bottom: 1px solid var(--line); }
.form-card__head .h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.form-card__head a { font-size: .875rem; }
.form-chip { display: inline-flex; align-items: center; gap: 8px; margin: 16px clamp(18px, 2.4vw, 32px) 0; padding: 8px 14px; background: var(--blush); color: var(--ink); border-radius: 999px; font-size: .875rem; font-weight: 500; }
.form-chip[hidden] { display: none; }
.form-frame { display: block; width: 100%; height: 2380px; border: 0; background: var(--paper); transition: height .4s var(--ease); }
.form-frame.is-done { height: 640px; }
.form-done { margin: 16px clamp(18px, 2.4vw, 32px) 0; padding: 18px 20px; background: var(--ink); color: var(--cream); display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; }
.form-done[hidden] { display: none; }
.form-done img { width: 18px; margin-top: 4px; }
.form-done p { margin: 0; }
.form-done strong { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; display: block; margin-bottom: 2px; }
.form-fallback { padding: 18px clamp(18px, 2.4vw, 32px); font-size: .875rem; color: var(--ink-soft); border-top: 1px solid var(--line); margin: 0; }
.form-card__head .btn { flex: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding: clamp(64px, 8vw, 112px) var(--gutter) 28px; }
.site-footer__top { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 80px); padding-inline: 0; }
.site-footer__logo { width: clamp(200px, 22vw, 300px); margin-bottom: 28px; }
.site-footer__brand p { color: var(--cream-soft); max-width: 26em; }
.site-footer__script { font-family: var(--font-script); color: var(--blush) !important; font-size: 2rem; margin-top: 8px; }
.site-footer .label { color: var(--cream-soft); margin-bottom: 18px; font-size: .6875rem; }
.site-footer__col li + li { margin-top: 10px; }
.site-footer__col a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .3s; padding-bottom: 2px; }
.site-footer__col a:hover { background-size: 100% 1px; color: var(--blush); }
.site-footer__col a[aria-current="page"] { color: var(--blush); }
.site-footer__where { margin-top: 22px; color: var(--cream-soft); font-size: .9375rem; }
.site-footer__bottom { max-width: var(--max); margin: clamp(48px, 6vw, 80px) auto 0; padding-top: 22px; border-top: 1px solid rgba(243,238,230,.18); display: flex; justify-content: space-between; gap: 16px; font-size: .8125rem; color: var(--cream-soft); }
.site-footer__bottom p { margin: 0; }
.site-footer__top-link { text-decoration: none; }
.site-footer__top-link:hover { color: var(--blush); }


/* ==========================================================================
   Interactive portfolio pieces
   ========================================================================== */
/* Marquee band under the home hero (decorative; pauses on hover, off for reduced motion) */
.marquee { overflow: hidden; border-block: 1px solid var(--ink); background: var(--cream); padding-block: clamp(14px, 1.6vw, 22px); }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); padding-right: clamp(20px, 2.4vw, 40px); }
.marquee span { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 2vw, 3rem); line-height: 1.1; white-space: nowrap; letter-spacing: -.01em; }
.marquee span:nth-child(4n+3) { font-style: normal; font-weight: 900; }
.marquee img { width: clamp(14px, 1.4vw, 20px); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Cursor-following preview (mouse only, created by site.js) */
.hover-preview { position: fixed; left: 0; top: 0; z-index: 1; width: clamp(220px, 22vw, 340px); aspect-ratio: 4 / 5; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.86); transition: opacity .35s var(--ease), scale .45s var(--ease); overflow: hidden; box-shadow: 0 30px 70px rgba(17,17,17,.28); will-change: transform, opacity; }
.hover-preview.is-on { opacity: 1; scale: 1; }
.hover-preview img { width: 100%; height: 100%; object-fit: cover; }
/* Lists sit above the floating preview so their type stays readable */
.work-index, .svc-list { position: relative; z-index: 2; }
.index-row__link:hover .index-row__title, .svc-row__link:hover .svc-row__title { text-shadow: 0 0 18px var(--cream), 0 0 2px var(--cream); }
.svc-row__link:hover .svc-row__title { text-shadow: 0 0 18px var(--ink), 0 0 2px var(--ink); }

/* Portfolio toolbar + view toggle */
.work-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.work-toolbar .filters { margin: 0; }
.view-toggle { display: none; border: 1px solid var(--ink); border-radius: 999px; padding: 3px; }
.js .view-toggle { display: inline-flex; }
.view-toggle button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 500; font-size: .875rem; transition: background .3s, color .3s; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.count { font-family: var(--font-body); font-weight: 500; font-size: .22em; letter-spacing: .04em; vertical-align: super; margin-left: .3em; color: var(--ink-soft); }

/* Index (list) view */
.work-index { display: none; border-top: 1px solid var(--ink); }
.js [data-view="index"] .work-index { display: block; }
.js [data-view="index"] .work-grid { display: none; }
.index-row { border-bottom: 1px solid var(--line); transition: opacity .4s var(--ease); }
.index-row.is-hidden { display: none; }
.index-row__link { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 48px; gap: clamp(16px, 2.4vw, 40px); align-items: center; padding-block: clamp(20px, 2.6vw, 36px); text-decoration: none; }
.index-row__num { font-family: var(--font-display); font-style: italic; color: var(--ink-soft); }
.index-row__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 1rem + 4.4vw, 5.6rem); line-height: .95; letter-spacing: -.025em; transition: transform .6s var(--ease), color .4s; }
.index-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: .875rem; color: var(--ink-soft); text-align: right; }
.index-row__thumb { display: none; }
.index-row__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center; transition: background .4s var(--ease), color .4s, transform .5s var(--ease); }
.index-row__link:hover .index-row__title, .index-row__link:focus-visible .index-row__title { transform: translateX(18px); }
.index-row__link:hover .index-row__arrow, .index-row__link:focus-visible .index-row__arrow { background: var(--ink); color: var(--cream); transform: rotate(-45deg); }
@media (hover: hover) {
  .work-index:hover .index-row { opacity: .3; }
  .work-index:hover .index-row:hover { opacity: 1; }
}
.index-row.is-entering { animation: cardIn .6s var(--ease) both; }
@media (max-width: 760px) {
  .index-row__link { grid-template-columns: minmax(0, 1fr) 76px; gap: 6px 16px; }
  .index-row__num, .index-row__arrow { display: none; }
  .index-row__title { grid-column: 1; }
  .index-row__meta { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; }
  .index-row__thumb { display: block; grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 5; overflow: hidden; }
  .index-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Review notes (preview build only) ---------- */
.review-note { display: block; margin: 12px 0; padding: 10px 14px; background: #FFF6FB; color: var(--ink); border: 1.5px dashed var(--orchid); font-family: var(--font-body); font-size: .8125rem; font-style: normal; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; }
.review-note strong { display: inline-block; margin-right: 6px; padding: 1px 7px; background: var(--orchid); color: #fff; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; vertical-align: 1px; }
.review-inline { background: #FBE3F0; color: inherit; outline: 1.5px dashed var(--orchid); outline-offset: 2px; padding: 0 2px; }
.review-toggle { position: fixed; left: 12px; bottom: 12px; z-index: 90; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--orchid); background: #FFF6FB; color: var(--ink); font-size: .75rem; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(17,17,17,.12); }
html.hide-review .review-note { display: none; }
html.hide-review .review-inline { background: none; outline: 0; padding: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .svc-row__link { grid-template-columns: 48px minmax(0, 1fr) 48px; }
  .svc-row__desc { grid-column: 2 / 3; grid-row: 2; }
  .svc-row__arrow { grid-column: 3; grid-row: 1; width: 48px; height: 48px; }
  }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .stage { max-width: 520px; order: 2; margin-top: 8px; }
  .hero__copy { order: 1; }
  .intro__grid, .process__grid, .approach, .faq, .page-hero__grid, .founder, .service, .contact, .pricing { grid-template-columns: minmax(0, 1fr); }
  .intro__aside { flex-direction: row; align-items: center; }
  .founder__frame, .service__head, .contact__aside { position: static; }
  .founder__frame { max-width: 520px; }
  .feature-grid .feature-1, .feature-grid .feature-2, .feature-grid .feature-3 { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
  .work-grid .work-card, .work-grid .work-card--tall, .work-grid .work-card--wide { grid-column: 1 / -1; }
  .work-grid .work-card:nth-child(4n+3) { margin-top: 0; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .project { grid-template-columns: minmax(0, 1fr); }
  .slide { height: min(58dvh, 560px); }
  .form-frame { height: 2650px; }
  .followup { grid-template-columns: auto minmax(0, 1fr); }
  .followup .btn { grid-column: 2; justify-self: start; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .feature-grid .feature-2, .feature-grid .feature-3 { grid-column: span 6; }
  .work-grid .work-card { grid-column: span 6; }
}
@media (max-width: 640px) {
  .deliverables, .ways, .ventures { grid-template-columns: minmax(0, 1fr); }
  .ways li + li, .ventures li + li { border-left: 0; padding-left: 0; border-top: 1px solid rgba(243,238,230,.25); }
  .ventures li + li { border-top-color: var(--line); }
  .ways li { padding-right: 0; padding-bottom: 18px; }
  .section-head { grid-template-columns: 1fr; }
  .onset, .design-strip { grid-template-columns: 1fr 1fr; }
  .onset figcaption { grid-column: 1 / -1; }
  .hero__foot { flex-direction: column; gap: 6px; }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .followup { grid-template-columns: minmax(0, 1fr); }
  .followup .btn { grid-column: 1; width: 100%; }
  .contact__details > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .site-footer__bottom { flex-direction: column; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .project-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; }
  .project-dialog__scroll { max-height: 100dvh; }
  .icon-btn { width: 44px; height: 44px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .float, .orbit-spin, .layer--spark img, .layer--spark2 img, .marquee__track { animation: none; }
  .hover-preview { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .stage, .review-note, .review-toggle { display: none !important; }
  .on-ink, .on-orchid { background: none; color: var(--ink); }
}

/* ==========================================================================
   v3 — Premium-template direction: brand-graphic 3D cutouts, editorial details
   Palette: brand kit (ink, cream, chrome, orchid, blush) plus pink, burgundy and
   lilac sampled from the "ISA Studios / A New Direction" board. No green.
   ========================================================================== */
:root {
  --pink: #DA739D;
  --burgundy: #4E1821;
  --lilac: #A28A97;
  --chrome-grad: linear-gradient(180deg, #F9F9FA 0%, #B9B9BF 35%, #45454B 52%, #E6E6EA 70%, #8E8E94 100%);
  --cut-shadow: drop-shadow(0 1.4cqw 1.6cqw rgba(17, 17, 17, .28));
}

/* ---------- Section grounds ---------- */
.on-burgundy { background: var(--burgundy); color: var(--cream); }
.on-burgundy em.accent, .on-burgundy .section-num, .on-burgundy .svc-row__num { color: var(--pink); }
.on-burgundy .svc-row__link:hover .svc-row__title, .on-burgundy .svc-row__link:focus-visible .svc-row__title { color: var(--blush); }
.on-burgundy .svc-row__link:hover .svc-row__arrow, .on-burgundy .svc-row__link:focus-visible .svc-row__arrow { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.on-blush { background: var(--blush); color: var(--ink); }
.on-lilac { background: var(--lilac); color: var(--ink); }
.on-lilac .eyebrow, .on-blush .eyebrow { color: var(--ink); }
.on-orchid { background: var(--orchid); color: var(--cream); }
.on-orchid .cta__title .italic, .on-orchid em.accent { color: var(--blush); }
.on-orchid.cta p { color: var(--cream); }
.on-orchid.cta { border-top: 0; }
.on-blush .step, .on-blush .step:last-child { border-color: rgba(17,17,17,.18); }
.on-blush .step p, .on-blush .process__note { color: rgba(17,17,17,.78); }
.on-blush .step__num { color: var(--orchid); }
.on-blush.pullquote blockquote { color: var(--ink); }
.on-lilac.pricing-band { border: 0; }
.on-lilac p { color: var(--ink); }
.on-lilac em.accent { color: var(--burgundy); }
.btn--pink, .on-ink .btn--pink { --bg: var(--pink); --fg: var(--ink); }
.btn--pink:hover, .on-ink .btn--pink:hover { --bg: var(--cream); --fg: var(--ink); }
.on-orchid .btn--cream:hover { --bg: var(--ink); --fg: var(--cream); }
.on-ink .btn--ghost:hover { --fg: var(--ink); }

/* ---------- Editorial template details ---------- */
.kicker { display: flex; align-items: center; gap: 14px; font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 22px; color: var(--ink-soft); }
.kicker::before, .kicker::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
.kicker--left::before { display: none; }
.on-ink .kicker, .on-burgundy .kicker { color: var(--cream-soft); }
.kicker b { font-weight: 600; color: var(--orchid); }
.on-ink .kicker b, .on-burgundy .kicker b { color: var(--pink); }
.script-over { position: relative; display: inline-block; }
.script-over::after { content: attr(data-script); position: absolute; right: -.15em; bottom: -.48em; font-family: var(--font-script); font-weight: 400; font-style: normal; font-size: .62em; letter-spacing: 0; line-height: 1; color: var(--pink); transform: rotate(-7deg); white-space: nowrap; pointer-events: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pill img { width: 10px; }

/* ---------- 3D stage + shared motion ---------- */
.stage3d { position: relative; container-type: inline-size; perspective: 1600px; perspective-origin: 50% 45%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage3d .scene, .founder3d .scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--bx, 4deg) + var(--tx, 0deg))) rotateY(calc(var(--by, 0deg) + var(--ty, 0deg))); }
.stage3d.is-paused *, .founder3d.is-paused * { animation-play-state: paused !important; }
.obj { position: absolute; transform-style: preserve-3d; }
.obj > .float { width: 100%; height: 100%; transform-style: preserve-3d; }
@keyframes spinY { to { transform: rotateY(360deg); } }
@keyframes spinZ { to { transform: rotate(360deg); } }
@keyframes rockY { from { transform: rotateY(-28deg) rotateX(6deg); } to { transform: rotateY(28deg) rotateX(-6deg); } }
.rock { width: 100%; height: 100%; transform-style: preserve-3d; animation: rockY 7s ease-in-out infinite alternate; }
/* Soft contact shadow under a floating cutout */
.obj--shadow::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -16%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(17,17,17,.28), rgba(17,17,17,0)); filter: blur(4px); transform: translateZ(-1cqw); animation: shadowPulse 7s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes shadowPulse { 50% { transform: translateZ(-1cqw) scale(.84); opacity: .7; } }
.on-ink .obj--shadow::after, .on-burgundy .obj--shadow::after { background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0)); }

/* Sparkles built from four crossed planes, so they read as solid when they turn */
.star3d { position: relative; width: 100%; aspect-ratio: 1; transform-style: preserve-3d; animation: spinY 9s linear infinite; }
.star3d i { position: absolute; inset: 0; background: url("../brand/sparkle-chrome-3d.svg") center / contain no-repeat; }
.star3d i:nth-child(2) { transform: rotateY(45deg); }
.star3d i:nth-child(3) { transform: rotateY(90deg); }
.star3d i:nth-child(4) { transform: rotateY(135deg); }
.star3d--pink i { background-image: url("../brand/sparkle-chrome.svg"); }
.star3d--slow { animation-duration: 14s; }

/* Extruded cutouts (layers added by site.js): the brand graphic gets real thickness */
.extrude { position: relative; width: 100%; transform-style: preserve-3d; }
.extrude > img { display: block; width: 100%; height: auto; }
.extrude__front { position: relative; filter: var(--cut-shadow); }
.extrude__layer { position: absolute; inset: 0; }

/* Chrome orbit ring lying in 3D space */
.orbit3d { width: 100%; aspect-ratio: 1; animation: spinZ 30s linear infinite; }
.orbit3d img { width: 100%; height: 100%; }
.disc-spin { width: 100%; height: 100%; animation: spinZ 24s linear infinite; }
.sticker { width: 100%; filter: var(--cut-shadow); }

/* Dimensional lettering: depth layers added by site.js behind a chrome face */
.word3d { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; font-family: var(--font-display); font-weight: 900; font-variation-settings: "opsz" 96; font-size: 11.4cqw; line-height: .84; letter-spacing: -.03em; white-space: nowrap; text-align: center; }
.word3d__front { position: relative; display: block; }
.word3d__front > span { background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.9) 48%, transparent 58%) 160% 0 / 300% 100% no-repeat, var(--chrome-grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s ease-in-out infinite; }
.word3d__layer { position: absolute; inset: 0; display: block; pointer-events: none; }
.word3d span { display: inline; }
@keyframes shine { 0%, 35% { background-position: 160% 0, 0 0; } 75%, 100% { background-position: -60% 0, 0 0; } }
.word3d__script { position: absolute; right: -2%; bottom: -46%; font-family: var(--font-script); font-weight: 400; font-size: .3em; letter-spacing: 0; color: var(--pink); transform: translateZ(3cqw) rotate(-7deg); white-space: nowrap; }

/* ---------- Home hero ---------- */
.hero2 { position: relative; overflow: clip; padding: clamp(18px, 2.4vw, 32px) 0 clamp(48px, 6vw, 88px); }
.hero2__meta { display: flex; justify-content: space-between; gap: 16px; font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cream-soft); padding-bottom: 14px; border-bottom: 1px solid rgba(243,238,230,.16); }
.hero2__meta span:nth-child(2) { color: var(--pink); }
.hero2__stage { width: 100%; aspect-ratio: 16 / 5.6; }
.hero2__stage .scene { --bx: 8deg; }
.o-ring { left: 8cqw; top: -26cqw; width: 84cqw; transform: rotateX(76deg) rotateZ(-6deg); }
.o-star { left: 83cqw; top: 6cqw; width: 7.5cqw; transform: translateZ(9cqw); }
.o-orchid { left: 3cqw; top: 1cqw; width: 11cqw; transform: translateZ(-4cqw) rotateZ(-14deg); }
.o-pink { left: 15cqw; top: 24cqw; width: 4.6cqw; transform: translateZ(12cqw); }
.o-sticker { left: 74cqw; top: 22cqw; width: 8cqw; transform: translateZ(14cqw); }
.o-mono { left: 47cqw; top: -1cqw; width: 6cqw; transform: translateZ(-12cqw) rotateZ(8deg); }
.hero2__copy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-top: clamp(4px, 1vw, 16px); position: relative; z-index: 2; }
.hero2__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 1.2rem + 3vw, 4.4rem); line-height: .98; letter-spacing: -.022em; margin: 0; }
.hero2__title .italic { color: var(--pink); }
.hero2 .eyebrow { color: var(--blush); }
.hero2 .lede { color: var(--cream-soft); margin-bottom: 26px; }
.hero2__foot { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(28px, 4vw, 48px); padding-top: 16px; border-top: 1px solid rgba(243,238,230,.18); font-size: .8125rem; color: var(--cream-soft); }
.hero2__foot .script { font-size: 1.6rem; color: var(--pink); }
@container (max-width: 700px) {
  .word3d { font-size: 19cqw; white-space: normal; line-height: .82; }
  .word3d .w1 { display: block; font-size: 2.05em; }
  .word3d .w2 { display: block; }
  .word3d__script { font-size: .42em; bottom: -38%; right: 4%; }
}
@media (max-width: 700px) {
  .hero2__meta span:nth-child(3) { display: none; }
  .hero2__stage { aspect-ratio: 1 / 1.02; }
  .o-ring { left: -6cqw; top: -12cqw; width: 112cqw; }
  .o-orchid { left: 2cqw; top: 2cqw; width: 22cqw; }
  .o-star { left: 76cqw; top: 2cqw; width: 18cqw; }
  .o-pink { left: 8cqw; top: 80cqw; width: 10cqw; }
  .o-sticker { left: 72cqw; top: 78cqw; width: 18cqw; }
  .o-mono { display: none; }
  .hero2__copy { grid-template-columns: minmax(0, 1fr); }
  .hero2__foot { flex-direction: column; gap: 4px; }
}

/* Marquee on blush */
.marquee.on-blush { background: var(--blush); border-color: var(--ink); }

/* CTA star */
.cta__star { width: clamp(64px, 8vw, 110px); margin: 0 auto 24px; perspective: 600px; }

/* ---------- About: monogram in orbit (no panel) ---------- */
.founder3d { position: relative; aspect-ratio: 4 / 5; container-type: inline-size; perspective: 1100px; }
.f-ring { left: 2cqw; top: 22cqw; width: 96cqw; transform: rotateX(72deg) rotateZ(10deg); }
.f-mono { left: 18cqw; top: 26cqw; width: 64cqw; transform: translateZ(4cqw); }
.f-star { left: 72cqw; top: 6cqw; width: 18cqw; transform: translateZ(16cqw); }
.f-pink { left: 8cqw; top: 76cqw; width: 11cqw; transform: translateZ(10cqw); }
.founder3d .review-note { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; }
.why3d { width: 100%; max-width: 420px; aspect-ratio: 1; justify-self: center; }
.w-orchid { left: 16cqw; top: 8cqw; width: 68cqw; }
.w-star { left: 74cqw; top: 6cqw; width: 18cqw; transform: translateZ(12cqw); }

/* ---------- Services hero: orbit system around the orchid mark ---------- */
.services-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.services-hero__grid > div:first-child { grid-column: 1; }
.sys { width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: end; grid-column: 2; grid-row: 1 / span 2; }
.sys .scene { --bx: 6deg; }
.sys__tilt { position: absolute; left: 8cqw; top: 8cqw; width: 84cqw; aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(70deg) rotateZ(-8deg); }
.sys__spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: spinZ 26s linear infinite; }
.sys__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.sys__item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(var(--a)) translateX(42cqw) rotateZ(calc(-1 * var(--a))); }
.sys__face { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -1); width: var(--s); transform-style: preserve-3d; animation: counterSpin 26s linear infinite; transform-origin: 50% 100%; }
@keyframes counterSpin { from { transform: rotateZ(0deg) rotateX(-70deg); } to { transform: rotateZ(-360deg) rotateX(-70deg); } }
.sys__center { position: absolute; left: 28cqw; top: 14cqw; width: 44cqw; transform: translateZ(2cqw); }

/* Content creation: a single turning sticker instead of a photo */
.cc3d { width: min(260px, 70%); aspect-ratio: 1; margin-top: 36px; }
.cc3d .obj { inset: 10cqw; }

/* ---------- Contact accent ---------- */
.contact-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.contact-accent { width: clamp(140px, 18vw, 240px); aspect-ratio: 1; }
.c-ring { left: 4cqw; top: 6cqw; width: 92cqw; transform: rotateX(70deg) rotateZ(-10deg); }
.c-star { left: 26cqw; top: 14cqw; width: 48cqw; transform: translateZ(8cqw); }
.c-pink { left: 70cqw; top: 6cqw; width: 18cqw; transform: translateZ(16cqw); }
@media (max-width: 900px) {
  .services-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .services-hero__grid .sys { grid-column: 1; grid-row: auto; justify-self: center; max-width: 380px; }
}
@media (max-width: 600px) {
  .contact-hero__grid { grid-template-columns: minmax(0, 1fr) 96px; }
  .contact-accent { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .star3d, .rock, .orbit3d, .disc-spin, .sys__spin, .sys__face, .word3d__front > span, .obj--shadow::after { animation: none !important; }
  .star3d { transform: rotateY(-25deg); }
  .sys__face { transform: rotateX(-70deg); }
  .tilt { transform: none !important; }
}

/* Gentle sway for line-art cutouts (rocking too far blurs thin strokes) */
@keyframes sway { from { transform: rotateY(-14deg) rotateZ(-3deg); } to { transform: rotateY(14deg) rotateZ(3deg); } }
.sway { width: 100%; height: 100%; transform-style: preserve-3d; animation: sway 6s ease-in-out infinite alternate; }
.ln { display: block; }
@media (prefers-reduced-motion: reduce) { .sway { animation: none !important; } }

/* No awkward single-word lines: balance headings, avoid orphans in paragraphs */
h1, h2, h3, .statement, blockquote, .cta__title, .svc-row__title, .story__lead { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* ==========================================================================
   Refinement pass (audited at 375 / 390 / 430 / 1440)
   ========================================================================== */
/* 3D pieces may project past their box; never let that create sideways scroll */
main { overflow-x: clip; }

/* Page headlines sized so two-word lines never strand a single word */
.h1 { font-size: clamp(2.5rem, 1.3rem + 3.9vw, 5.1rem); }

/* Larger tap areas without changing the look */
.link-arrow, .site-footer__top-link, .site-header__logo, .site-footer__col a, .contact__details a, .form-fallback a { position: relative; }
.link-arrow::before, .site-footer__top-link::before, .site-footer__col a::before, .contact__details a::before { content: ""; position: absolute; inset: -12px -6px; }
.site-header__logo { display: flex; align-items: center; min-height: 44px; }

@media (max-width: 699px) {
  /* Phones: let headlines flow and balance instead of forced desktop line breaks */
  .ln { display: inline; }
  .hero2__title .ln.italic { display: block; }
  .page-hero { padding-block: 36px 32px; }
  .page-hero__grid { gap: 20px; }
  .h1 { font-size: clamp(2.3rem, 1.4rem + 4.4vw, 2.9rem); line-height: 1; }
  .h2 { font-size: clamp(2rem, 1.3rem + 3.4vw, 2.5rem); }
  .section { padding-block: 72px; }
  .section--tight { padding-block: 52px; }
  .lede { font-size: 1.0625rem; }
  /* Contact: the dimensional accent floats beside the eyebrow instead of squeezing the headline */
  .contact-hero__grid { grid-template-columns: minmax(0, 1fr); position: relative; }
  .contact-accent { position: absolute; right: 0; top: -14px; width: 92px; }
  .contact-hero .eyebrow { min-height: 64px; align-items: flex-end; }
  /* Services hero: orbit system sits below the intro, centered */
  .services-hero__grid .sys { max-width: 300px; margin-top: 8px; }
  .faq summary { font-size: 1.15rem; padding-block: 18px; min-height: 56px; }
  .site-footer__bottom { gap: 10px; }
}
@media (max-width: 699px) {
  .founder__frame { max-width: 300px; margin-inline: auto; }
  .founder3d { aspect-ratio: 1 / 1; }
  .founder__caption { justify-content: center; gap: 18px; }
  .why3d { max-width: 240px; }
}

/* ==========================================================================
   Orchid cutouts (transparent, floating in 3D)
   ========================================================================== */
.orchid { display: block; width: 100%; height: auto; filter: drop-shadow(0 1.6cqw 2cqw rgba(17,17,17,.3)); -webkit-user-drag: none; }
.on-ink .orchid, .hero2 .orchid { filter: drop-shadow(0 1.6cqw 2.4cqw rgba(0,0,0,.6)); }
.sway--b { animation-duration: 7.5s; animation-direction: alternate-reverse; }

/* Home hero */
.o-violet { left: 1cqw; top: 4cqw; width: 15.5cqw; transform: translateZ(-8cqw) rotateZ(-10deg); }
.o-spotted { left: 83cqw; top: 5cqw; width: 11.5cqw; transform: translateZ(5cqw) rotateZ(8deg); }
.o-star { left: 61cqw; top: 4cqw; width: 6cqw; transform: translateZ(10cqw); }
.o-pink { left: 21cqw; top: 26cqw; width: 4.2cqw; transform: translateZ(12cqw); }
.o-sticker { left: 72cqw; top: 23cqw; width: 7.5cqw; transform: translateZ(14cqw); }
.o-mono { left: 44cqw; top: -1cqw; }
@media (max-width: 700px) {
  .o-violet { left: -6cqw; top: -2cqw; width: 36cqw; }
  .o-spotted { left: 74cqw; top: 0; width: 27cqw; }
  .o-star { left: 44cqw; top: 2cqw; width: 13cqw; }
  .o-pink { left: 10cqw; top: 84cqw; width: 9cqw; }
  .o-sticker { left: 74cqw; top: 80cqw; width: 18cqw; }
}

/* Home intro */
.intro__orchid { width: clamp(110px, 12vw, 170px); aspect-ratio: 564 / 877; }
@media (max-width: 900px) { .intro__orchid { width: 96px; } }

/* About: jeweled cymbidium beside "Why ISA Studios" */
.why3d { aspect-ratio: 1047 / 1347; max-width: 360px; }
.w-orchid { left: 6cqw; top: 4cqw; width: 88cqw; transform: none; }
.w-star { left: 76cqw; top: 2cqw; width: 18cqw; }

/* Services: the orbit circles the jeweled orchid */
.sys__center { left: 33cqw; top: -4cqw; width: 34cqw; transform: translateZ(2cqw); }

/* Contact: small orchid accent */
.c-orchid { left: 2cqw; top: -10cqw; width: 52cqw; transform: translateZ(2cqw) rotateZ(-8deg); }
.c-star { left: 54cqw; top: 14cqw; width: 36cqw; }
.c-pink { left: 72cqw; top: 64cqw; width: 14cqw; }
@media (max-width: 699px) { .why3d { max-width: 240px; } }

/* Home closing section: jeweled cymbidium floating beside the headline */
.cta--orchid { overflow: clip; }
.cta__orchid { position: absolute; left: clamp(12px, 2.4vw, 56px); top: 50%; width: clamp(140px, 11.5vw, 230px); aspect-ratio: 1095 / 1715; transform: translateY(-50%) rotate(-6deg); }
.cta--orchid .orchid { filter: drop-shadow(0 1.6cqw 2.6cqw rgba(40, 0, 20, .45)); }
@media (max-width: 1200px) {
  .cta__orchid { position: relative; left: auto; top: auto; transform: rotate(-6deg); width: 150px; margin: -24px auto 8px; }
  .cta--orchid .cta__star { display: none; }
}

/* ==========================================================================
   v4 — Light editorial system (reference: the cream "The studio" section)
   No dark backgrounds anywhere. Dark tones live only in type and hairlines.
   ========================================================================== */
:root {
  --ivory: #FAF7F1;
  --cream: #F5F0E8;
  --paper: #FAF7F1;
  --blush: #F8E5EC;
  --powder: #F4D5E2;
  --rose: #DCA7BC;
  --lilac: #EEE5F5;
  --pink: #D96A9E;
  --burgundy: #692A42;
  --ink: #30252A;
  --ink-soft: rgba(48, 37, 42, .78);
  --line: #E4D9D0;
  --space-section: clamp(80px, 10vw, 152px);
}
body { background: var(--ivory); }
.section { padding-block: var(--space-section); }
.on-ivory { background: var(--ivory); color: var(--ink); }
.on-blush { background: var(--blush); color: var(--ink); }
.on-lilac { background: var(--lilac); color: var(--ink); }
.on-paper { background: var(--cream); }
.on-lilac p, .on-blush p { color: var(--ink-soft); }
.on-lilac em.accent, .on-blush em.accent { color: var(--orchid); }
.on-lilac .eyebrow, .on-blush .eyebrow { color: var(--ink-soft); }

/* Buttons: burgundy ink with an orchid hover; outline variant for secondary */
.btn { --bg: var(--burgundy); --fg: var(--ivory); }
.btn:hover { --bg: var(--orchid); }
.btn--ghost { --bg: transparent; --fg: var(--burgundy); border-color: var(--burgundy); }
.btn--ghost:hover { --bg: var(--burgundy); --fg: var(--ivory); }

/* Header: light, delicate, outlined inquiry button */
.site-header { background: var(--ivory); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header__cta { --bg: transparent; --fg: var(--burgundy); border-color: var(--burgundy); }
.site-header__cta:hover { --bg: var(--burgundy); --fg: var(--ivory); }
.site-nav__list a[aria-current="page"] { color: var(--orchid); }
@media (max-width: 900px) { .js .site-nav__panel { background: var(--ivory); } }

/* ---------- Hero: airy editorial cover ---------- */
.hero2 { background: var(--cream); color: var(--ink); padding-bottom: clamp(56px, 7vw, 104px); }
.hero2__meta { color: var(--ink-soft); border-bottom-color: var(--line); }
.hero2__meta span:nth-child(2) { color: var(--orchid); }
.hero2 .eyebrow { color: var(--orchid); }
.hero2 .lede { color: var(--ink-soft); }
.hero2__title { color: var(--ink); }
.hero2__title .italic { color: var(--orchid); }
.hero2__foot { border-top-color: var(--line); color: var(--ink-soft); }
.hero2__foot .script { color: var(--orchid); }
.hero2__stage { aspect-ratio: 16 / 5.2; }
.hero2 .orchid { filter: drop-shadow(0 1.4cqw 1.8cqw rgba(105, 42, 66, .22)); }
/* Burgundy face with a soft light sweep; silver-to-rose depth layers come from site.js */
.word3d__front > span { background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.55) 48%, transparent 58%) 160% 0 / 300% 100% no-repeat, linear-gradient(180deg, #7C3654 0%, #692A42 55%, #4E1F31 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.word3d { font-size: 10.4cqw; }
/* One statement (the orbit), one orchid, one sparkle */
.o-ring { left: 10cqw; top: -24cqw; width: 80cqw; transform: rotateX(76deg) rotateZ(-6deg); }
.o-violet { left: 4cqw; top: 5cqw; width: 12cqw; transform: translateZ(-6cqw) rotateZ(-10deg); }
.o-star { left: 82cqw; top: 7cqw; width: 5.5cqw; transform: translateZ(10cqw); }
@container (max-width: 700px) { .word3d { font-size: 18.5cqw; } }
@media (max-width: 700px) {
  .hero2__stage { aspect-ratio: 1 / .9; }
  .o-ring { left: 4cqw; top: -14cqw; width: 92cqw; }
  .o-violet { left: 3cqw; top: 2cqw; width: 26cqw; }
  .o-star { left: 78cqw; top: 6cqw; width: 12cqw; }
}

/* ---------- Home services: magazine contents page ---------- */
.svc-contents { position: relative; }
.svc-contents .section-head { position: relative; }
.svc-orchid { position: absolute; right: clamp(0px, 4vw, 64px); top: -40px; width: clamp(96px, 11vw, 170px); aspect-ratio: 718 / 1297; }
.svc-contents .section-head .link-arrow { margin-right: clamp(110px, 15vw, 240px); }
.svc-list { border-top: 1px solid var(--ink); }
.svc-row { border-bottom: 1px solid var(--line); }
.svc-row__link { grid-template-columns: minmax(80px, 140px) minmax(0, 1.25fr) minmax(0, 1fr) 52px; padding-block: clamp(26px, 3.2vw, 46px); }
.svc-row:nth-child(2) .svc-row__link { padding-left: clamp(0px, 6vw, 96px); }
.svc-row:nth-child(3) .svc-row__link { padding-left: clamp(0px, 12vw, 192px); }
.svc-row__num { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4.4rem); line-height: .9; color: var(--rose); transition: color .4s; }
.svc-row__title { color: var(--ink); }
.svc-row__desc { color: var(--ink-soft); }
.svc-row__arrow { border-color: var(--line); color: var(--burgundy); }
.svc-row__link:hover .svc-row__num, .svc-row__link:focus-visible .svc-row__num { color: var(--orchid); }
.svc-row__link:hover .svc-row__title, .svc-row__link:focus-visible .svc-row__title { color: var(--burgundy); text-shadow: none; }
.svc-row__link:hover .svc-row__arrow, .svc-row__link:focus-visible .svc-row__arrow { background: var(--burgundy); border-color: var(--burgundy); color: var(--ivory); }
@media (max-width: 1100px) {
  .svc-row:nth-child(n) .svc-row__link { padding-left: 0; grid-template-columns: 64px minmax(0, 1fr) 44px; }
  .svc-row__num { font-size: 2.2rem; }
}
@media (max-width: 699px) {
  .svc-orchid { top: -20px; right: 0; width: 84px; }
  .svc-contents .section-head .link-arrow { margin-right: 0; }
  .svc-contents .section-head > div { padding-right: 92px; }
}

/* ---------- Process: open editorial steps on pale blush ---------- */
.process__grid > div:first-child { position: relative; }
.process-sticker { width: clamp(64px, 7vw, 96px); aspect-ratio: 1; margin-bottom: 20px; }
.step__num { color: var(--rose); font-size: clamp(3rem, 2rem + 3vw, 5.4rem); }
.on-blush .step__num { color: var(--rose); }
.step:hover .step__num { color: var(--orchid); }
.on-blush .step, .on-blush .step:last-child { border-color: rgba(105, 42, 66, .18); }

/* ---------- Closing invitation on pale lilac ---------- */
.on-lilac.cta p { color: var(--ink-soft); }
.on-lilac .cta__title { color: var(--ink); }
.on-lilac .cta__title .italic, .on-blush .cta__title .italic { color: var(--orchid); }
.cta--orchid .cta__star { display: none; }
.cta--orchid .orchid { filter: drop-shadow(0 1.6cqw 2cqw rgba(105, 42, 66, .22)); }
.on-blush.cta { border-top: 0; }

/* About approach on pale lilac */
.on-lilac .approach__list li { border-color: rgba(105, 42, 66, .16); }
.on-lilac .approach__list p { color: var(--ink-soft); }

/* Contact confirmation banner, light */
.form-done { background: var(--blush); color: var(--ink); border: 1px solid var(--rose); }

/* ---------- Footer: a quiet closing page ---------- */
.site-footer { background: var(--cream); color: var(--ink); border-top: 1px solid var(--line); }
.site-footer__brand p { color: var(--ink-soft); }
.site-footer__script { color: var(--orchid) !important; }
.site-footer .label { color: var(--ink-soft); }
.site-footer__col a:hover, .site-footer__col a[aria-current="page"] { color: var(--orchid); }
.site-footer__where { color: var(--ink-soft); }
.site-footer__bottom { border-top-color: var(--line); color: var(--ink-soft); }
.site-footer__top-link:hover { color: var(--orchid); }
.site-footer :focus-visible { outline-color: var(--orchid); }
.site-footer__logo { width: clamp(150px, 16vw, 220px); }
@media (max-width: 699px) {
  .site-footer { padding-top: 56px; }
  .site-footer__top { gap: 28px; }
  .site-footer__bottom { margin-top: 36px; }
}
/* Audit fixes: phone orchid inside the margin; tablet heading sizes */
@media (max-width: 699px) {
  .svc-orchid { right: 6px; width: 72px; top: -12px; }
  .svc-contents .section-head > div { padding-right: 84px; }
}
@media (min-width: 700px) and (max-width: 1180px) {
  .ln { display: inline; }
  .h1 { font-size: clamp(2.6rem, 1.4rem + 3vw, 3.6rem); }
  .h2 { font-size: clamp(2.1rem, 1.2rem + 2.2vw, 3rem); }
}

/* ==========================================================================
   v5 — Real logo in the hero; everything on straight rows and columns
   ========================================================================== */
.hero2__stage { aspect-ratio: 16 / 4.4; }
.o-logo { left: 50%; transform: translateX(-50%); }
.o-logo--wide { width: 74cqw; top: 9.3cqw; }
.o-logo--stacked { display: none; }
.o-logo .extrude__front { filter: drop-shadow(0 .8cqw 1cqw rgba(48, 37, 42, .18)); }
.o-ring { left: 8cqw; top: -26cqw; width: 84cqw; transform: rotateX(78deg); }
.o-star { left: 89cqw; top: 3cqw; width: 4.5cqw; transform: translateZ(8cqw); }
.hero2__copy { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) clamp(140px, 13vw, 200px); align-items: center; }
.hero2__orchid { width: 100%; aspect-ratio: 1077 / 1759; }
@media (max-width: 700px) {
  .hero2__stage { aspect-ratio: 1 / .62; }
  .o-logo--wide { display: none; }
  .o-logo--stacked { display: block; width: 74cqw; top: 12cqw; }
  .o-ring { left: 2cqw; top: -18cqw; width: 96cqw; }
  .o-star { left: 86cqw; top: 2cqw; width: 9cqw; }
  .hero2__copy { grid-template-columns: minmax(0, 1fr); }
  .hero2__orchid { display: none; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .hero2__copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero2__orchid { display: none; }
}
/* Services contents: one straight column, no staggered indents */
.svc-row:nth-child(n) .svc-row__link { padding-left: 0; }
/* Spotted orchid by "Three ways we help": keep a full 16px margin on phones */
@media (max-width: 699px) {
  .svc-orchid { right: 16px; width: 66px; top: -8px; }
  .svc-contents .section-head > div { padding-right: 92px; }
}

/* New complete flowers: frames match each image's own proportions, nothing is cropped */
.hero2__orchid { aspect-ratio: 873 / 869; }
.why3d { aspect-ratio: 863 / 759; max-width: 380px; }
.w-orchid { left: 8cqw; top: 8cqw; width: 84cqw; }
.w-star { left: 82cqw; top: 0; width: 14cqw; }
@media (max-width: 699px) { .why3d { max-width: 260px; } }

/* Complete flowers (no photo-edge crops): frames follow each flower's proportions */
.intro__orchid { aspect-ratio: 407 / 1239; width: clamp(96px, 9vw, 130px); }
.cta__orchid { aspect-ratio: 864 / 934; }
.sys__center { left: 29cqw; top: 14cqw; width: 42cqw; aspect-ratio: 452 / 412; }
@media (max-width: 900px) { .intro__orchid { width: 84px; } }