/* Meridian — Master Agency
   Motion language: transform + opacity only; native scroll;
   CSS scroll-driven film beats; View Transitions for case morph.
*/

:root {
  --bg: #0c0b0a;
  --bg-elev: #161412;
  --ink: #f4efe6;
  --muted: #a39a8c;
  --line: rgba(244, 239, 230, 0.12);
  --accent: #e8c27a;
  --accent-deep: #c4954a;
  --glow: rgba(232, 194, 122, 0.28);
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 4vw, 3rem);
  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #111;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.wrap {
  width: min(var(--max), 100% - 2 * var(--pad));
  margin-inline: auto;
}

/* —— Header —— */
.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--pad);
  background: linear-gradient(to bottom, rgba(12,11,10,0.92), transparent);
  pointer-events: none;
}
.site-head a, .site-head .nav { pointer-events: auto; }
.mark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.nav {
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  background: var(--accent);
  color: #1a1408;
}
.btn.primary:hover { background: #f0d09a; }
.btn.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn.ghost:hover { border-color: var(--accent); }

/* —— Hero —— */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  padding: 6rem var(--pad) 4rem;
  isolation: isolate;
}

#hero-canvas,
.hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-fallback {
  background:
    radial-gradient(ellipse 80% 55% at 70% 35%, rgba(232,194,122,0.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(120,90,50,0.18), transparent 55%),
    linear-gradient(180deg, #12100e 0%, #0c0b0a 100%);
  display: none;
}

body.reduced-motion .hero-fallback,
body.no-webgl .hero-fallback { display: block; }
body.reduced-motion #hero-canvas,
body.no-webgl #hero-canvas { display: none !important; }

.hero.is-interactive #hero-canvas { pointer-events: auto; cursor: crosshair; }

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 36rem;
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h1 em {
  font-style: italic;
  color: var(--accent);
}

.lede {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  max-width: 34ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.tech-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.75;
}

.scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 1.25rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  opacity: 0.6;
}
.scroll-cue span {
  display: block;
  width: 3px;
  height: 6px;
  margin: 6px auto 0;
  border-radius: 2px;
  background: var(--accent);
  animation: cue 1.6s var(--ease) infinite;
}
@keyframes cue {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

/* —— Film beats (CSS scroll-driven; no wheel trap) —— */
@supports (animation-timeline: view()) {
  .film-beat {
    animation: beat-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes beat-rise {
    from { opacity: 0.35; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero.film-beat {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* —— Work —— */
.work {
  padding: 5rem 0 4rem;
  border-top: 1px solid var(--line);
}

.section-head {
  margin-bottom: 2.5rem;
}
.section-head h2,
.services h2,
.cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  text-align: left;
  padding: 0;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(232, 194, 122, 0.35);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
  outline: none;
}

.work-card .thumb {
  aspect-ratio: 16 / 10;
  background: var(--tone, #2a241c);
  position: relative;
  overflow: hidden;
}
.work-card .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--gx, 70%) var(--gy, 30%), var(--glow-a, rgba(232,194,122,0.45)), transparent 55%),
    linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.35));
  transition: transform 0.6s var(--ease);
}
.work-card:hover .thumb::after { transform: scale(1.06); }

.work-card .meta {
  padding: 1.15rem 1.25rem 1.35rem;
}
.work-card .client {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.work-card h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
}
.work-card .blurb {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* —— Services —— */
.services {
  padding: 4.5rem 0;
  border-top: 1px solid var(--line);
}
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 800px) {
  .service-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.service-list li {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(22, 20, 18, 0.6);
}
.service-list h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
}
.service-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* —— CTA —— */
.cta {
  padding: 5rem 0 6rem;
  border-top: 1px solid var(--line);
}
.cta-inner {
  text-align: center;
  max-width: 36rem;
}
.cta .lede { margin-inline: auto; }
.cta .btn { margin-top: 0.5rem; }
.fine {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.8;
}

.site-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
}
.site-foot .host { opacity: 0.7; }

/* —— Case dialog / View Transition —— */
.case-dialog {
  border: none;
  padding: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  background: rgba(8, 7, 6, 0.72);
  color: var(--ink);
}
.case-dialog::backdrop {
  background: rgba(8, 7, 6, 0.72);
}
.case-dialog[open] {
  display: grid;
  place-items: center;
  padding: var(--pad);
}
.case-panel {
  width: min(720px, 100%);
  max-height: min(90dvh, 900px);
  overflow: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.case-close {
  display: inline-flex;
  margin: 1rem 1rem 0;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
}
.case-close:hover { border-color: var(--accent); }
.case-media {
  aspect-ratio: 16 / 9;
  margin: 0.75rem 1rem 0;
  border-radius: 0.75rem;
  background: #2a241c;
  position: relative;
  overflow: hidden;
}
.case-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 65% 35%, var(--glow-a, rgba(232,194,122,0.5)), transparent 55%),
    linear-gradient(160deg, transparent, rgba(0,0,0,0.4));
}
.case-body { padding: 1.25rem 1.35rem 1.75rem; }
.case-body h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 400;
}
.case-body p { color: var(--muted); margin: 0 0 1rem; }
.case-body ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink);
}
.case-body li { margin-bottom: 0.4rem; color: var(--muted); }

/* View Transition names */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
}
body:not(.case-open) .work-card.is-source .thumb { view-transition-name: case-media; }
body:not(.case-open) .work-card.is-source h3 { view-transition-name: case-title; }
.case-dialog[open] #case-media { view-transition-name: case-media; }
.case-dialog[open] #case-title { view-transition-name: case-title; }

/* Reduced motion: kill non-essential motion */
@media (prefers-reduced-motion: reduce) {
  .film-beat { animation: none !important; opacity: 1 !important; transform: none !important; }
  .scroll-cue span { animation: none; }
  .btn:hover, .work-card:hover, .work-card:hover .thumb::after { transform: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Mobile downgrade: softer hero, denser type already clamped */
@media (max-width: 640px) {
  .hero { padding-top: 5.5rem; align-items: center; }
  .nav a:nth-child(2) { display: none; }
  .tech-note { max-width: 28ch; }
}

/* Content expansion uses the existing Meridian palette, type and spacing. */
section[id] { scroll-margin-top: 5rem; }
.about { padding: 4.5rem 0; border-top: 1px solid var(--line); }
.about-copy { display: grid; gap: 1.5rem; color: var(--muted); }
.about-copy p { margin: 0; max-width: 62ch; }
.approach-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.5rem; }
.approach-list li { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.approach-list h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; margin: 0 0 .5rem; }
.approach-list p { margin: 0; color: var(--muted); }
.service-list .deliverables { margin-top: 1.2rem; font-size: .85rem; }
.deliverables span { display: block; margin-bottom: .35rem; color: var(--accent); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.case-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.case-tags span { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .65rem; font-size: .7rem; color: var(--accent); }
.case-subhead { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 1.5rem 0 .75rem; }
.case-body .case-note { margin-top: 1.5rem; }
.case-close { position: sticky; top: .75rem; z-index: 2; background: var(--bg-elev); }
body.case-open { overflow: hidden; }
@media (min-width: 800px) {
  .about-copy { grid-template-columns: repeat(2, 1fr); }
  .approach-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) { .nav { gap: .8rem; } }

/* Deeper studio stories, using the existing type and colour system. */
.approach-list .process-output { margin-top: 1.25rem; font-size: .9rem; }
.process-output span { display: block; margin-bottom: .4rem; color: var(--accent); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.principles { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.principles h3 { margin: 0 0 1.25rem; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; }
.principle-list { display: grid; gap: 1.5rem; margin: 0; }
.principle-list dt { color: var(--ink); margin-bottom: .5rem; }
.principle-list dd { margin: 0; color: var(--muted); font-size: .95rem; }
.clients { padding: 3rem 0; border-top: 1px solid var(--line); }
.clients h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 400; margin: 0 0 1.75rem; }
.client-strip { display: flex; flex-wrap: wrap; gap: 1rem 2rem; list-style: none; padding: 0; margin: 0; color: var(--muted); font-family: var(--font-display); font-size: 1.35rem; }
.clients .fine { max-width: 80ch; }
.cta .lede { max-width: 44ch; margin-top: 1.25rem; }
.cta-next { max-width: 48ch; margin: 1.5rem auto 0; color: var(--muted); }
.case-outcome { margin-top: 1.75rem; padding-top: .25rem; border-top: 1px solid var(--line); }
.case-outcome .case-subhead { color: var(--accent); }
.case-body p { line-height: 1.7; }
@media (min-width: 800px) { .principle-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .about, .services { padding-block: 3.25rem; }
  .section-head { margin-bottom: 1.75rem; }
  .about-copy, .approach-list { gap: 1.75rem; }
  .about-copy p, .approach-list p { line-height: 1.7; }
  .client-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; font-size: 1.15rem; }
  .cta { padding-block: 3.5rem 4rem; }
  .cta-next { font-size: .95rem; line-height: 1.7; }
  .case-body { padding-inline: 1.1rem; }
  .nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Meridian polish: reading rhythm, explicit card affordances and native FAQ. */
html { scrollbar-gutter: stable; }
h1, h2, h3 { text-wrap: balance; }
.section-head h2 { line-height: 1.08; }
.section-intro { max-width: 34ch; color: var(--muted); margin: 1.1rem 0 0; }
.work-card .meta { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.work-card h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.15; margin-bottom: .75rem; }
.work-card .blurb { line-height: 1.65; }
.card-action { margin-top: auto; padding-top: .9rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: var(--accent); font-size: .8rem; }
.card-action > span { font-size: 1.2rem; transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .work-card:hover { transform: translateY(-3px); }
  .work-card:hover .card-action > span { transform: translate(2px, -2px); }
}
.work-card:focus-visible, .faq summary:focus-visible, .case-close:focus-visible, .btn:focus-visible, .nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.work-card:active { border-color: var(--accent); }
.case-panel { overscroll-behavior: contain; scrollbar-gutter: stable; }
.case-toolbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
.case-toolbar .case-close { position: static; margin: 0; min-height: 44px; }
.case-hint { color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.case-body { padding: clamp(1.25rem, 4vw, 2.25rem); }
.case-body h2 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; }
#case-summary { color: var(--ink); font-size: 1.06rem; line-height: 1.75; }
#case-detail p { margin-bottom: 1.4rem; }
.case-subhead { margin-top: 2rem; }
.service-list li { padding: clamp(1.25rem, 3vw, 1.75rem); }
.service-list p, .principle-list dd { line-height: 1.65; }
.faq { padding: 4.5rem 0; border-top: 1px solid var(--line); }
.faq-items { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 1.35rem 0; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq-answer { padding: 0 2rem 1.5rem 0; color: var(--muted); line-height: 1.75; max-width: 65ch; }
.faq-answer p { margin: 0; }
@media (min-width: 900px) { .faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
@media (max-width: 640px) {
  .faq { padding-block: 3.25rem; }
  .work-card .meta { padding: 1.25rem; }
  .case-dialog[open] { padding: .65rem; }
  .case-panel { max-height: calc(100dvh - 1.3rem); }
  .case-hint { display: none; }
  .faq summary { font-size: 1rem; line-height: 1.5; }
  .faq-answer { padding-right: .5rem; }
}
@media (hover: none) {
  .work-card:hover, .work-card:focus-visible { transform: none; box-shadow: none; }
  .work-card:hover .thumb::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .work-card, .card-action > span, .work-card .thumb::after, .btn { transition: none; }
  .work-card:hover, .work-card:focus-visible, .work-card:hover .card-action > span { transform: none; }
}

/* Six self-expressing studio scenes. DOM motion uses transform and opacity only. */
.work-card { cursor: default; }
.work-card:hover { transform: none; box-shadow: none; }
.work-card .thumb::after { display: none; }
.work-card .micro-scene { aspect-ratio: 16 / 11; min-height: 310px; padding: 1.5rem; isolation: isolate; }
.scene-kicker { position: relative; z-index: 2; margin: 0; font: 500 .65rem var(--font-body); letter-spacing: .14em; }
.scene-control { position: absolute; z-index: 5; bottom: 1.25rem; left: 1.5rem; right: 1.5rem; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: .5rem .8rem; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: .75rem; }
.scene-control:focus-visible, .scrub-label input:focus-visible, .case-open-button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.scene-display { position: relative; z-index: 2; font: 2.3rem/1.05 Georgia,serif; max-width: 7ch; margin: 2.6rem 0 0; }
.artifact-snippet { padding: .8rem 0 1rem; border-top: 1px solid var(--line); }
.artifact-snippet > span { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.artifact-snippet p { font-size: .8rem; line-height: 1.6; color: var(--muted); margin: .4rem 0 0; }
.case-open-button { min-height: 48px; }
.case-artifact { padding: 1.25rem; border: 1px solid var(--line); background: rgba(232,194,122,.04); margin: 1.5rem 0 2rem; }
.case-artifact h3 { font: 1.6rem/1.2 var(--font-display); margin: .5rem 0 1rem; }
#artifact-snippet { color: var(--accent); }
#artifact-caption { font-size: .85rem; margin-bottom: 0; }
/* Harbor: an unfolding path around a home. */
.work-card--harbor-line .micro-scene { background: #dcd9ce; color: #213e4b; }
.care-orbit { position: absolute; right: 1.1rem; top: 25%; width: 44%; height: 45%; }
.care-house { position: absolute; right: 12%; top: 8%; font: 6rem/1 Georgia,serif; color: #335465; }
.care-route { position: absolute; padding: .5rem .6rem; border: 1px solid #607c86; border-radius: 6px; background: #ede9df; font-size: .65rem; transition: transform .6s var(--ease); }
.route-one { top: 0; right: 0; transform: translateY(20px) rotate(-8deg); }
.route-two { top: 37%; right: 5%; transform: translateY(8px) rotate(5deg); }
.route-three { top: 75%; right: 0; transform: translateY(-8px) rotate(-3deg); }
.care-expanded .route-one, .micro-scene[data-scene="harbor-line"][data-active="true"]:hover .route-one { transform: translate(-40px,-12px) rotate(0); }
.care-expanded .route-two, .micro-scene[data-scene="harbor-line"][data-active="true"]:hover .route-two { transform: translate(10px,0) rotate(0); }
.care-expanded .route-three, .micro-scene[data-scene="harbor-line"][data-active="true"]:hover .route-three { transform: translate(-30px,16px) rotate(0); }
/* Ledger: a tactile, stepped workflow. */
.work-card--ledgerline .micro-scene { background: #12292c; color: #a1f1d6; font-family: ui-monospace,monospace; }
.ledger-readout { display: flex; align-items: baseline; gap: 1rem; margin-top: 1.1rem; }
.ledger-count { font: 5rem/1 ui-monospace,monospace; letter-spacing: -.1em; }
.ledger-stage { font-size: .8rem; }
.ledger-bars { display: flex; gap: .55rem; height: 70px; margin: 1.1rem 0; }
.ledger-bars i { flex: 1; background: #65bd9b; transform: scaleY(.25); transform-origin: bottom; transition: transform .35s var(--ease); }
.ledger-bars i:first-child { transform: scaleY(1); }
.scrub-label { position: absolute; left: 1.5rem; right: 1.5rem; bottom: .8rem; z-index: 5; display: grid; gap: .3rem; font-size: .7rem; }
.scrub-label input { width: 100%; min-height: 36px; margin: 0; accent-color: currentColor; cursor: ew-resize; }
/* Northbound: a hinged issue cover with an actual opening spread. */
.work-card--northbound .micro-scene { background: #aaa091; color: #332d23; perspective: 900px; }
.folio { position: absolute; inset: 3.3rem 22% 5rem; perspective: 800px; }
.folio-cover, .folio-back { position: absolute; inset: 0; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #655849; }
.folio-back { background: #f1e9da; }
.folio-cover { background: #743d32; color: #f4e6cf; transform-origin: left; transition: transform .75s var(--ease), opacity .75s var(--ease); backface-visibility: hidden; }
.folio small, .folio span { font: .5rem/1.5 ui-monospace,monospace; letter-spacing: .06em; }
.folio strong { font: 2.15rem/.95 Georgia,serif; font-weight: normal; }
.folio-back strong { font-size: 1.4rem; }
.page-open .folio-cover { transform: rotateY(-135deg); opacity: .2; }
/* Fjord: lit, on-demand 3D furniture with a permanent CSS fallback. */
.work-card--fjord-form .micro-scene { background: #cad0be; color: #354232; }
.chair-canvas { position: absolute; inset: 2.1rem 0 4rem; width: 100%; height: calc(100% - 6.1rem); pointer-events: none; }
.material-label { position: absolute; right: 1.1rem; top: 4rem; font: .55rem/1.8 ui-monospace,monospace; letter-spacing: .06em; }
.chair-fallback { position: absolute; width: 120px; height: 170px; left: calc(50% - 60px); top: 22%; transform: perspective(600px) rotateY(20deg); }
.chair-fallback i { position: absolute; background: #9e7c50; border: 1px solid #6d573a; }
.chair-back { width: 100%; height: 65px; top: 0; border-radius: 9px 9px 0 0; }
.chair-seat { width: 100%; height: 25px; top: 70px; transform: skewX(-12deg); }
.chair-leg { top: 90px; height: 70px; width: 10px; }
.chair-leg.left { left: 8px; }.chair-leg.right { right: 8px; }
[data-webgl="ready"] .chair-fallback { opacity: 0; }
[data-webgl="fallback"] .chair-canvas { display: none; }
/* Stillwater: a window, a reflected sun and light that follows the visitor. */
.work-card--stillwater-house .micro-scene { background: #203f48; color: #e1d5b9; }
.coast-window { position: absolute; inset: 3rem 18% 6rem; overflow: hidden; background: #b4bdb0; border-radius: 90px 90px 0 0; }
.coast-sun { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #f8d79d; top: 20%; left: calc(50% - 22px); transform: translateX(var(--light-x,0px)); transition: transform .5s var(--ease),opacity .5s var(--ease); }
.coast-sea { position: absolute; inset: 55% 0 0; background: repeating-linear-gradient(0deg,#557f83 0px,#557f83 10px,#6a9292 11px,#6a9292 12px); }
.coast-reflection { position: absolute; top: 55%; bottom: 0; width: 25%; left: 38%; background: linear-gradient(#e4cb97,transparent); opacity: .55; transform: translateX(var(--light-x,0px)) skewX(-12deg); transition: transform .5s var(--ease); }
.window-frame { position: absolute; inset: 0; border: 6px solid #c0aa83; border-bottom-width: 10px; border-radius: inherit; }
.window-frame::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: #c0aa83; }
.evening .coast-sun { transform: translate(var(--light-x,0px),50px); opacity: .65; }
.evening .coast-reflection { transform: translateX(var(--light-x,0px)) scaleX(.5); }
.coast-caption { position: absolute; left: 1.5rem; bottom: 4.2rem; margin: 0; font: italic 1.05rem Georgia,serif; }
/* Common Ground: a changing cultural broadsheet, rather than another product tile. */
.work-card--common-ground .micro-scene { background: #dcccaf; color: #512f29; }
.poster-stack { position: absolute; inset: 3.5rem 21% 5.5rem; }
.poster { position: absolute; inset: 0; padding: .8rem; display: flex; flex-direction: column; justify-content: space-between; }
.poster-back { background: #394e43; color: #e6cd72; transform: rotate(-9deg); font: 700 2.6rem/.9 system-ui,sans-serif; }
.poster-front { background: #a23f2c; color: #ffe4a7; transform: rotate(5deg); transition: transform .45s var(--ease); }
.poster-title { white-space: pre-line; font: 900 clamp(1.5rem,3vw,2.5rem)/.9 system-ui,sans-serif; letter-spacing: -.05em; }
.poster-date, .poster-footer { font: .55rem ui-monospace,monospace; }
[data-programme="1"] .poster-front { transform: translate(12px,-4px) rotate(-5deg); }
[data-programme="2"] .poster-front { transform: translate(-8px,4px) rotate(9deg); }
.hero-fallback::after { content: ''; position: absolute; width: 35vw; height: 35vw; max-width: 450px; max-height: 450px; right: 12%; top: 15%; border: 1px solid #a58957; border-radius: 50%; transform: rotate(-25deg) scaleY(.55); box-shadow: 0 0 0 22px rgba(168,141,86,.09),0 0 0 55px rgba(168,141,86,.05); }
@media (max-width:640px) {
 .work-card .micro-scene { min-height: 330px; }
 .folio { inset-inline: 23%; }
 .scene-display { font-size: 2rem; }
 .care-orbit { right: 1rem; width: 40%; }
 .poster-title { font-size: 2rem; }
}
@media (prefers-reduced-motion:reduce) {
 .micro-scene *, .micro-scene *::before, .micro-scene *::after { transition: none !important; animation: none !important; }
 .page-open .folio-cover { transform: none; opacity: 0; }
 .care-route { transform: none !important; }
 .chair-canvas { display: none; }
}

/* Shared studio material: warm edge light, deeper surfaces, one active beat. */
:root { --scene-duration: .55s; }
.micro-scene { box-shadow: inset 0 1px 0 rgba(255,235,192,.5), inset 0 -24px 45px rgba(12,11,10,.16); }
.micro-scene::before { content: ''; pointer-events: none; position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse at 25% 0%,rgba(255,231,177,.25),transparent 65%); }
.work-card .micro-scene { aspect-ratio: 16 / 12; min-height: 360px; }
.scene-control { background: rgba(255,250,231,.07); backdrop-filter: none; }
.folio { inset: 3.4rem 18% 5.5rem; }
.folio-cover, .folio-back { box-shadow: 8px 10px 0 rgba(25,20,13,.12); }
.folio strong { font-size: clamp(2.2rem,4vw,3rem); }
.folio-back strong { font-size: 1.7rem; }
.poster-stack { inset: 3.5rem 17% 5.5rem; }
.poster-front { box-shadow: 10px 12px 0 rgba(42,23,11,.17); }
.poster-title { font-size: clamp(2.1rem,4vw,3.5rem); }
.coast-window { inset: 3rem 13% 6rem; box-shadow: 12px 12px 0 rgba(10,28,32,.25); }
.coast-sun { width: 58px; height: 58px; left: calc(50% - 29px); }
.ledger-count { font-size: 6rem; }
.ledger-bars { height: 95px; gap: .7rem; }
.ledger-bars i { background: linear-gradient(100deg,#408773,#9cddba); }
.care-orbit { top: 28%; width: 48%; height: 44%; }
.care-route { padding: .6rem .7rem; font-size: .75rem; box-shadow: 4px 6px 0 rgba(33,62,75,.12); }
.care-house { font-size: 7rem; opacity: .65; }
.scene-display { font-size: 2.5rem; }
.about-copy { display: block; max-width: 65ch; }
.about-copy p { max-width: none; }
.clients { padding-block: 1.75rem; }
.client-strip { font-family: var(--font-body); font-size: .8rem; gap: .5rem 1.5rem; }
.clients .fine { font-size: .65rem; }
.case-media { display: none; }
.case-body { padding-top: 1.5rem; }
.case-body #case-summary { font-size: 1rem; line-height: 1.65; }
.case-artifact { margin: 1.25rem 0; padding: 1rem; }
.case-artifact h3 { font-size: 1.35rem; }
.case-outcome { margin-top: 1.25rem; }
.case-outcome .case-subhead { margin-top: 1rem; }
#case-detail p { margin-bottom: 1rem; }
.micro-scene *, .micro-scene *::before, .micro-scene *::after { transition-duration: var(--scene-duration); transition-timing-function: var(--ease); }
.micro-scene:not([data-active="true"]) *, .micro-scene:not([data-active="true"]) *::after { transition: none !important; animation: none !important; }
.work-card, .btn { transition-property: transform, opacity; }
@media (max-width:640px) {
 .work-card .micro-scene { min-height: 350px; }
 .scene-display { font-size: 2.1rem; }
 .care-route { font-size: .6rem; padding: .5rem; }
 .folio { inset-inline: 20%; }
 .folio strong { font-size: 2.25rem; }
 .folio-back strong { font-size: 1.4rem; }
 .poster-title { font-size: 2.5rem; }
 .client-strip { display: flex; }
}
@media (prefers-reduced-motion:reduce) { .micro-scene *, .micro-scene *::after { transition: none !important; animation: none !important; } }
.micro-scene *, .micro-scene *::before, .micro-scene *::after { transition-property: transform, opacity; }
[data-webgl="ready"] .chair-fallback { display: none; }