/*
 * MYRAK STUDIO — STYLESHEET MAP
 *
 * 01. Foundations: tokens, reset, typography and accessibility
 * 02. Shared shell: header, navigation, buttons and footers
 * 03. Contact and early page foundations
 * 04. Home experience
 * 05. Method and editorial case studies
 * 06. Projects index
 * 07. Studio
 * 08. Component refinements and responsive states
 *
 * Search for "[SECTION:" to jump between the main component families.
 * Later refinements intentionally remain after their base rules: their order is
 * part of the cascade and prevents page-specific fixes from leaking elsewhere.
 */

/* [SECTION: 01 — FOUNDATIONS] */
:root {
  --paper: #f8f7f3;
  --chalk: #ffffff;
  --ink: #241916;
  --muted: #6b625b;
  --primary: #0212EE;
  --interaction: #D7FF3F;
  --wine: #991348;
  --acid: #d0cf51;
  --cream: #f6f6d2;
  --signal: var(--primary);
  --sky: #f6b6b7;
  --baby-blue: #f6b6b7;
  --mist: var(--baby-blue);
  --slate: var(--primary);
  --sage: var(--acid);
  --terra: var(--primary);
  --wood: var(--wine);
  --line: #d5d0c7;
  --display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --accent: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --serif: var(--accent);
  --page: min(100% - 40px, 1520px);
  --section: clamp(5rem, 10vw, 10rem);
  --radius-sm: 10px;
  --radius-md: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

*{ box-sizing: border-box; }
html{ max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
}

a{ color: inherit; text-decoration: none; }
button,
input,
textarea,
select{ color: inherit; font: inherit; }
button{ cursor: pointer; }
img,
svg{ display: block; max-width: 100%; }
em{ font-style: normal; }
h1,
h2,
h3,
p{ margin-top: 0; }
h1,
h2,
h3{
  overflow-wrap: normal;
  text-wrap: balance;
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link{
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--chalk);
  transform: translateY(-150%);
}
.skip-link:focus{ transform: translateY(0); }

:focus-visible{ outline: 2px solid var(--slate); outline-offset: 4px; }

/* [SECTION: 02 — SHARED HEADER AND NAVIGATION] */
.site-header{
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  margin-inline: auto;
  display: grid;
  width: var(--page);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 0;
  transition: top 450ms var(--ease), padding 300ms ease, color 300ms ease;
}

.site-header::before{
  position: absolute;
  z-index: -1;
  inset: 0 -20px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px);
  content: "";
  opacity: 0;
  transition: opacity 300ms ease;
}

.site-header.is-scrolled{ padding-block: 12px; }
.site-header.is-scrolled::before{ opacity: 1; }
.site-header.is-hidden{ top: -96px; }
.site-header.is-dark{ color: var(--chalk); }
.site-header.is-dark::before{ background: color-mix(in srgb, var(--ink) 82%, transparent); }

.wordmark{
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 102px;
  min-height: 31px;
  width: max-content;
  align-items: flex-end;
  gap: 4px;
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.8;
}
@media (max-width: 760px) {
  .wordmark{ min-width: 86px; min-height: 27px; }
}
.brand-logo,
.footer-brand-logo,
.footer-v2-brand-logo,
.intro-brand-logo,
.transition-brand-logo,
.hero-brand-logo{
  display: block;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.brand-logo,
.footer-brand-logo,
.footer-v2-brand-logo,
.intro-brand-logo,
.transition-brand-logo{
  mask-image: url("./assets/brand/myrak-logo.svg");
  -webkit-mask-image: url("./assets/brand/myrak-logo.svg");
}
.brand-logo{ width: 102px; aspect-ratio: 286 / 87; }
.footer-v2-brand-logo{ width: 104px; aspect-ratio: 286 / 87; }


.desktop-nav{ display: flex; gap: clamp(20px, 3vw, 52px); }
.desktop-nav a,
.language-switch button{ font-size: 0.82rem; font-weight: 600; }
.desktop-nav a{ position: relative; }
.desktop-nav a::after{
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease);
}
.desktop-nav a:hover::after{ transform: scaleX(1); transform-origin: left; }

.header-actions{ position: relative; z-index: 1; display: flex; justify-self: end; align-items: center; gap: 20px; }
.language-switch{ display: flex; align-items: center; gap: 5px; }
.language-switch button{ padding: 0; border: 0; background: transparent; opacity: 0.42; }
.menu-toggle{ display: none; width: 38px; height: 38px; padding: 11px 7px; border: 0; background: transparent; }
.menu-toggle > span:not(.sr-only){ display: block; height: 1.5px; margin: 5px 0; background: currentColor; transition: transform 300ms ease; }
.menu-toggle[aria-expanded="true"] > span:nth-last-child(2){ transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] > span:last-child{ transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  z-index: 0;
  inset: 0;
  padding: 120px 20px 28px;
  background: var(--mist);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.99);
  transform-origin: top right;
  transition:
    opacity 160ms var(--ease-drawer),
    transform 160ms var(--ease-drawer);
}
.mobile-menu.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-duration: 220ms;
}
.mobile-menu nav{ display: grid; }
.mobile-menu nav a{ padding: 10px 0; font-size: clamp(2.6rem, 14vw, 4.5rem); font-weight: 700; letter-spacing: -0.07em; line-height: 0.95; }
.mobile-menu nav a[href*="contact"]{ width: max-content; margin-top: 18px; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.mobile-language{ display: flex; gap: 8px; margin-top: 40px; }
.mobile-language button{ padding: 9px 13px; border: 1px solid rgb(48 39 35 / 30%); border-radius: 99px; background: transparent; font-size: 0.76rem; }
.mobile-language button[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }
.mobile-menu > p{ position: absolute; bottom: 24px; margin: 0; font-size: 0.8rem; }

.hero{
  position: relative;
  display: grid;
  min-height: 100svh;
  width: var(--page);
  margin-inline: auto;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
  padding: 110px 0 60px;
}
.eyebrow{ margin-bottom: 18px; color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero h1{
  max-width: 12ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 8.5vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.84;
}
.hero h1 span,
.hero h1 em{ display: block; }
.hero h1 em{ color: var(--slate); font-family: var(--serif); font-weight: 400; letter-spacing: -0.055em; }
.hero-card{ position: absolute; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 20px 70px rgb(48 39 35 / 10%); }

.section-pad{ width: var(--page); margin-inline: auto; padding-block: var(--section); }
.intention{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; border-top: 1px solid var(--line); }
.intention h2,
.section-heading h2,
.services h2,
.studio h2,
.method h2,
.contact h2{
  margin-bottom: 36px;
  font-size: clamp(2.8rem, 5.8vw, 6.5rem);
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.projects{ border-top: 1px solid var(--line); }

.services{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; border-top: 1px solid var(--line); }

.studio{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }

.method{ position: relative; min-height: 850px; }

.contact{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; border-top: 1px solid var(--line); }
.contact-intro{ grid-column: 1 / 6; }
.contact-intro > p:last-child{ max-width: 44ch; color: var(--muted); }
.contact-form{ grid-column: 7 / 13; }
.contact-form label:not(.choice){ display: grid; gap: 9px; margin-bottom: 28px; }
.contact-form label > span,
.contact-form legend{ font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.contact-form input:not([type="radio"]),
.contact-form textarea,
.contact-form select{
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
}
.contact-form textarea{ resize: vertical; }
.contact-form fieldset{ display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; padding: 0; border: 0; }
.contact-form legend{ width: 100%; margin-bottom: 10px; }
.choice{ display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 99px; }
.button{ display: flex; width: 100%; justify-content: space-between; padding: 18px 22px; border: 1px solid var(--ink); border-radius: 99px; background: var(--ink); color: var(--paper); font-weight: 700; transition: background 250ms ease, color 250ms ease; }
.button:hover{ background: transparent; color: var(--ink); }
.form-status{ min-height: 24px; margin: 14px 0 0; color: var(--slate); font-size: 0.85rem; }

.site-footer{ padding: clamp(60px, 8vw, 110px) max(20px, calc((100% - 1520px) / 2)); background: var(--mist); }
.footer-legal{ display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a{ position: relative; }
.footer-legal a::after{ position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform 350ms var(--ease); }
.footer-legal a:hover::after{ transform: scaleX(1); transform-origin: left; }

.reveal{ opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }


@media (max-width: 900px) {
  :root{ --page: min(100% - 40px, 780px); --section: clamp(4.5rem, 12vw, 7rem); }
  .site-header{ grid-template-columns: 1fr auto; }
  .desktop-nav{ display: none; }
  .menu-toggle{ display: block; }
  .hero{ grid-template-columns: repeat(8, 1fr); }
  .intention,
.section-heading,
.services,
.studio,
.contact{ grid-template-columns: repeat(8, 1fr); }
  .contact-intro{ grid-column: 1 / 4; }
  .contact-form{ grid-column: 4 / 9; }
}

@media (max-width: 620px) {
  :root{ --page: calc(100% - 40px); --section: 5rem; }
  .site-header{ padding-top: 16px; }
  .language-switch{ display: none; }
  .hero{ display: block; min-height: 100svh; padding-top: 120px; }
  .hero h1{ max-width: 10ch; font-size: clamp(3.55rem, 16.5vw, 5.4rem); line-height: 0.87; }
  .intention,
.section-heading,
.services,
.studio,
.contact{ display: block; }
  .intention h2,
.section-heading h2,
.services h2,
.studio h2,
.method h2,
.contact h2{ margin-bottom: 26px; font-size: clamp(2.55rem, 13vw, 4rem); }
  .method{ min-height: 0; }
  .contact-intro{ margin-bottom: 60px; }
  .contact-form fieldset{ display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  html{ scroll-behavior: auto; }
  *,
*::before,
*::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .reveal{ opacity: 1; transform: none; }
  .mobile-menu,
  .mobile-menu.is-open{
    transform: none;
    transition: opacity 120ms var(--ease-out) !important;
  }
}

/* Multi-page experience */
.inner-page{ background: var(--paper); }
.desktop-nav a[aria-current="page"]::after{ transform: scaleX(1); }

.page-transition{
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--mist);
  color: var(--ink);
  pointer-events: none;
  transform: translateY(101%);
  transition: transform 560ms cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.page-transition::before{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--baby-blue);
  content: "";
}
.page-transition .transition-brand-logo{ position: relative; width: min(38vw, 360px); aspect-ratio: 286 / 87; opacity: 0; transform: translateY(14px); transition: opacity 240ms ease 100ms, transform 420ms var(--ease) 100ms; }
body.is-transitioning .page-transition{ pointer-events: auto; transform: translateY(0); }
body.is-transitioning .page-transition .transition-brand-logo{ opacity: 1; transform: translateY(0); }
body.page-enter main,
body.page-enter .compact-footer{ animation: page-enter 620ms var(--ease) both; }
.page-transition.is-arriving{ pointer-events: auto; transform: translateY(0); }
.page-transition.is-arriving .transition-brand-logo{ opacity: 1; transform: translateY(0); }
.page-transition.is-arriving.is-revealing{ transform: translateY(-101%); }
.page-transition.is-arriving.is-revealing .transition-brand-logo{ opacity: 0; transform: translateY(-14px); transition-delay: 0ms; }
.page-transition.is-resetting{ transition: none; transform: translateY(101%); }
.page-transition.is-resetting .transition-brand-logo{ opacity: 0; transform: translateY(14px); transition: none; }

@keyframes page-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.compact-footer{
  display: grid;
  width: var(--page);
  margin-inline: auto;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  text-transform: uppercase;
}
.compact-footer p{ margin: 0; }
.compact-footer p:nth-child(2){ text-align: center; }
.compact-footer a{ justify-self: end; }
.compact-footer .footer-legal{ grid-column: 1 / -1; justify-self: end; padding-top: 14px; border-top: 1px solid var(--line); }
.compact-footer .footer-legal a{ justify-self: auto; }

/* Legal pages */
.legal-shell{ width: var(--page); margin-inline: auto; padding: clamp(150px, 18vw, 230px) 0 var(--section); }
.legal-hero{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-bottom: clamp(70px, 10vw, 140px); border-bottom: 1px solid var(--line); }
.legal-hero .eyebrow{ grid-column: 1 / 4; }
.legal-hero h1{ grid-column: 4 / 13; margin: 0; font-size: clamp(4rem, 9vw, 9rem); letter-spacing: -0.08em; line-height: 0.84; }
.legal-hero p:last-child{ grid-column: 9 / 13; margin: 30px 0 0; color: var(--muted); }
.legal-content{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-top: clamp(70px, 10vw, 140px); }
.legal-content > p{ grid-column: 1 / 4; color: var(--terra); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.legal-sections{ grid-column: 4 / 11; }
.legal-sections article{ padding: 0 0 54px; border-bottom: 1px solid var(--line); }
.legal-sections article + article{ padding-top: 54px; }
.legal-sections h2{ margin-bottom: 18px; font-size: clamp(1.8rem, 3vw, 3.2rem); letter-spacing: -0.05em; }
.legal-sections p{ max-width: 66ch; color: var(--muted); }
.legal-sections p:last-child{ margin-bottom: 0; }

.page-cta{ border-top: 1px solid var(--line); }
.page-cta > a{ display: flex; align-items: end; justify-content: space-between; gap: 30px; font-family: var(--serif); font-size: clamp(2.8rem, 7vw, 8rem); letter-spacing: -0.06em; line-height: 0.92; }
.page-cta > a span{ max-width: 11ch; }
.page-cta > a b{ display: grid; width: clamp(64px, 9vw, 120px); aspect-ratio: 1; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--sans); font-size: clamp(1.3rem, 2vw, 2rem); transition: background 300ms ease, color 300ms ease, transform 500ms var(--ease); }
.page-cta > a:hover b{ background: var(--ink); color: var(--paper); transform: rotate(45deg); }
.stage-card{ position: sticky; top: 11vh; width: min(86%, 1220px); margin-bottom: 15vh; }
.stage-card:nth-child(even){ margin-left: auto; }
.stage-card:nth-child(1){ z-index: 1; }
.stage-card:nth-child(2){ z-index: 2; }
.stage-card:nth-child(3){ z-index: 3; }
.stage-card:nth-child(4){ z-index: 4; margin-bottom: 0; }
.stage-card svg{ width: min(70%, 700px); }
.stage-card svg path{ fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; }
.stage-caption{ display: flex; justify-content: space-between; gap: 20px; padding: 15px 2px 0; will-change: opacity, transform; }
.stage-caption h2{ margin: 0; font-size: clamp(1.4rem, 2.4vw, 2.6rem); letter-spacing: -0.04em; }
.stage-caption p{ margin: 0; color: var(--muted); text-align: right; }

/* Process */
.process-journey{ position: relative; width: var(--page); margin-inline: auto; padding: 80px 0 200px; }
.journey-line{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.journey-line path{ fill: none; stroke: var(--slate); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.55; }
.journey-step{ position: relative; z-index: 1; display: grid; min-height: 690px; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.journey-number{ grid-column: 1 / 3; align-self: start; color: var(--muted); font-size: clamp(5rem, 12vw, 13rem); font-weight: 700; letter-spacing: -0.09em; line-height: 0.75; opacity: 0.22; }
.journey-copy{ grid-column: 3 / 8; padding: 34px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 89%, transparent); backdrop-filter: blur(12px); }
.journey-step--right .journey-copy{ grid-column: 6 / 11; }
.journey-copy h2{ margin-bottom: 24px; font-size: clamp(2.7rem, 5vw, 5.4rem); letter-spacing: -0.065em; line-height: 0.92; }
.journey-copy > p:last-child{ max-width: 44ch; color: var(--muted); }
.journey-object{ grid-column: 9 / 13; justify-self: center; }
.journey-step--right .journey-object{ grid-column: 1 / 5; grid-row: 1; }
.object-system{ display: grid; width: 340px; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); background: var(--chalk); transform: rotate(-4deg); }
.object-system span{ display: grid; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); font-family: var(--serif); font-size: 3rem; }
.object-launch{ display: flex; width: 300px; aspect-ratio: 1.45; align-items: end; justify-content: space-between; padding: 24px; border-radius: 20px; background: var(--ink); color: var(--paper); transform: rotate(5deg); }
.object-launch span{ font-family: var(--serif); font-size: 3rem; }
.object-launch b{ font-size: 2rem; }
.principle-band{ overflow: hidden; padding: 34px 0; background: var(--ink); color: var(--paper); }
.principle-band p{ width: max-content; margin: 0; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4rem); animation: principle-slide 22s linear infinite; }
@keyframes principle-slide { from { transform: translateX(5vw); } to { transform: translateX(-35vw); } }

/* Contact */
/* [SECTION: 03 — CONTACT AND PAGE FOUNDATIONS] */
.contact-page{ background: var(--mist); }
.contact-page .site-header::before{ background: color-mix(in srgb, var(--mist) 88%, transparent); }
.contact-shell{ display: grid; min-height: 100svh; grid-template-columns: 1fr 1fr; }
.contact-aside{ position: relative; display: flex; min-height: 100svh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 150px max(20px, calc((100vw - 1520px) / 2)) 60px; }
.contact-aside-copy{ position: relative; z-index: 2; max-width: 660px; }
.contact-aside h1{ margin: 0 0 32px; font-size: clamp(4rem, 8vw, 9rem); letter-spacing: -0.08em; line-height: 0.8; }
.contact-aside h1 span,
.contact-aside h1 em{ display: block; }
.contact-aside h1 em{ font-family: var(--serif); font-weight: 400; color: var(--slate); }
.contact-aside-copy > p:last-child{ max-width: 38ch; }
.contact-facts{ position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 20px; border-top: 1px solid rgb(48 39 35 / 30%); }
.contact-facts p{ display: grid; gap: 6px; margin: 0; }
.contact-facts span{ font-size: 0.68rem; text-transform: uppercase; }
.contact-facts b{ font-size: 0.82rem; }
.contact-direct{ position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.contact-direct a{ padding: 10px 14px; border: 1px solid rgb(48 39 35 / 35%); border-radius: 99px; font-size: 0.75rem; font-weight: 700; }
.pending-link{ cursor: not-allowed; opacity: 0.46; }
.contact-panel{ display: grid; min-height: 100svh; place-items: center; padding: 140px clamp(28px, 7vw, 110px) 70px; background: var(--chalk); }
.contact-panel .contact-form{ width: min(100%, 720px); }
.contact-page .compact-footer{ width: 100%; padding-inline: max(20px, calc((100vw - 1520px) / 2)); background: var(--ink); color: var(--paper); }

/* Case study */
.case-hero{ display: grid; min-height: 100svh; grid-template-columns: 0.8fr 1.2fr; align-items: end; gap: 24px; padding: 140px max(20px, calc((100vw - 1520px) / 2)) 50px; background: var(--sage); }
.case-title{ padding-bottom: 6vw; }
.case-title h1{ margin: 0 0 28px; font-size: clamp(4rem, 8vw, 9rem); letter-spacing: -0.08em; line-height: 0.82; }
.case-title > p:last-child{ max-width: 38ch; font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 2rem); }
.case-cover{ position: relative; display: grid; min-height: 70svh; place-items: center; overflow: hidden; border-radius: var(--radius-md); background: var(--chalk); transform: translate3d(var(--px, 0), var(--py, 0), 0); }
.case-cover > span{ font-family: var(--serif); font-size: min(30vw, 28rem); line-height: 0.7; }
.case-cover svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.case-cover path{ fill: none; stroke: var(--ink); stroke-width: 7; opacity: 0.18; }
.case-overview{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.case-meta{ grid-column: 1 / 5; margin: 0; }
.case-meta > div{ display: grid; grid-template-columns: 1fr 2fr; gap: 20px; padding: 15px 0; border-top: 1px solid var(--line); }
.case-meta > div:last-child{ border-bottom: 1px solid var(--line); }
.case-meta dt{ color: var(--muted); font-size: 0.75rem; }
.case-meta dd{ margin: 0; }
.case-story{ grid-column: 7 / 13; }
.case-story h2{ font-size: clamp(2.7rem, 5vw, 5.6rem); letter-spacing: -0.06em; line-height: 0.95; }
.case-story > p:last-child{ max-width: 48ch; color: var(--muted); }
.case-gallery{ display: grid; width: var(--page); margin-inline: auto; grid-template-columns: repeat(12, 1fr); gap: 24px; padding-bottom: var(--section); }
.case-shot{ position: relative; grid-column: span 6; min-height: 650px; overflow: hidden; border-radius: var(--radius-md); }
.case-shot--wide{ grid-column: 1 / 13; min-height: 82svh; }
.case-shot > span{ position: absolute; right: 18px; bottom: 18px; padding: 7px 11px; border-radius: 99px; background: var(--paper); font-size: 0.72rem; font-weight: 700; }
.decision-note{ grid-column: 2 / 7; margin: 80px 0; padding: 24px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.decision-note span{ font-size: 0.75rem; }
.decision-note p{ margin: 50px 0 0; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.1; }
.case-result{ text-align: center; }
.case-result blockquote{ max-width: 22ch; margin: 0 auto 30px; font-family: var(--serif); font-size: clamp(2.8rem, 6vw, 7rem); letter-spacing: -0.055em; line-height: 0.98; }
.case-result > p:last-child{ color: var(--muted); }
.next-project{ background: var(--mist); }
.next-project a{ display: flex; min-height: 60svh; width: var(--page); margin-inline: auto; align-items: end; justify-content: space-between; padding: var(--section) 0 40px; }
.next-project span{ font-size: 0.75rem; text-transform: uppercase; }
.next-project strong{ max-width: 10ch; font-family: var(--serif); font-size: clamp(3.2rem, 8vw, 9rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.85; text-align: right; }

@media (max-width: 900px) {
  .stage-card{ width: 92%; }
  .journey-step{ grid-template-columns: repeat(8, 1fr); }
  .journey-number{ grid-column: 1 / 2; }
  .journey-copy,
.journey-step--right .journey-copy{ grid-column: 2 / 7; }
  .journey-object{ grid-column: 6 / 9; }
  .journey-step--right .journey-object{ grid-column: 1 / 4; }
  .contact-shell{ display: block; }
  .contact-aside,
.contact-panel{ min-height: auto; }
  .contact-aside{ min-height: 85svh; padding-inline: 20px; }
  .contact-panel{ padding: 90px 20px; }
  .case-hero{ grid-template-columns: 1fr; }
  .case-title{ padding-bottom: 20px; }
  .case-cover{ min-height: 58svh; }
}

@media (max-width: 620px) {
  .compact-footer{ grid-template-columns: 1fr 1fr; }
  .compact-footer p:nth-child(2){ display: none; }
  .compact-footer > p:first-child{
    grid-column: 1;
    flex-wrap: nowrap;
  }
  .compact-footer .footer-design-credit{
    flex: 0 0 auto;
    gap: 4px;
    font-size: .68em;
  }
  .compact-footer > a:not(.footer-legal a){
    grid-column: 2;
  }
  .page-cta > a{ align-items: center; }
  .page-cta > a b{ flex: 0 0 64px; }
  .stage-card,
.stage-card:nth-child(even){ position: relative; top: auto; width: 100%; margin: 0 0 80px; }
  .stage-caption{ display: block; }
  .stage-caption p{ margin-top: 8px; text-align: left; }
  .process-journey{ padding-top: 0; }
  .journey-line{ left: 10px; width: 80px; }
  .journey-step{ display: block; min-height: 650px; padding-left: 38px; }
  .journey-number{ margin-bottom: 20px; font-size: 5rem; }
  .journey-copy{ padding: 22px; }
  .journey-copy h2{ font-size: 2.6rem; }
  .journey-object{ width: 65%; margin: 42px 0 0 auto; }
  .object-system{ width: 240px; }
  .object-launch{ width: 220px; }
  .contact-aside{ min-height: 92svh; padding-top: 130px; }
  .contact-aside h1{ font-size: 4.5rem; }
  .contact-facts{ grid-template-columns: 1fr; }
  .contact-facts p{ grid-template-columns: 1fr 1fr; }
  .case-hero{ padding-top: 130px; }
  .case-title h1{ font-size: 4.3rem; }
  .case-cover{ min-height: 48svh; }
  .case-overview{ display: block; }
  .case-meta{ margin-bottom: 80px; }
  .case-gallery{ display: block; }
  .case-shot,
.case-shot--wide{ min-height: 0; aspect-ratio: 0.82; margin-bottom: 20px; }
  .decision-note{ margin: 70px 0; }
  .next-project a{ display: block; min-height: 55svh; }
  .next-project strong{ display: block; margin: 80px 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition{ display: none; }
  .hero-orbit,
.marquee > div,
.principle-band p{ animation: none; }
  .stage-card{ position: relative; top: auto; }
}

/* Immersive home project wall */
.home-showcase{ position: relative; height: 430svh; background: var(--ink); color: var(--paper); }
.showcase-heading{ position: absolute; z-index: 2; top: 12%; left: max(20px, calc((100% - 1520px) / 2)); transition: opacity 160ms linear, transform 200ms linear; }
.showcase-heading .eyebrow{ color: #aaa19b; }
.showcase-heading h2{ margin: 0; font-size: clamp(4rem, 8vw, 9rem); letter-spacing: -0.075em; line-height: 0.82; }
.showcase-heading h2 span,
.showcase-heading h2 em{ display: block; }
.showcase-heading h2 em{ color: var(--mist); font-family: var(--serif); font-weight: 400; letter-spacing: -0.055em; }
.studio-information{ border-top: 1px solid var(--line); }
.studio-info-heading{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-bottom: 90px; }
.studio-info-heading .eyebrow{ grid-column: 1 / 4; }
.studio-info-heading h2{ grid-column: 4 / 13; margin: 0; font-size: clamp(3.2rem, 7vw, 8rem); letter-spacing: -0.07em; line-height: 0.9; }
.studio-info-columns{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.studio-info-columns > article:nth-child(1){ grid-column: 4 / 7; }
.studio-info-columns > article:nth-child(2){ grid-column: 7 / 10; }
.studio-info-columns h3{ padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 1.4rem; }
.studio-info-columns ul{ margin: 0; padding: 0; list-style: none; }
.studio-info-columns li{ padding: 7px 0; color: var(--muted); }
.studio-info-columns li:last-child{ margin-top: 14px; color: var(--ink); font-family: var(--serif); font-size: 1.15rem; font-style: italic; }
.studio-info-visual{ grid-column: 10 / 13; overflow: hidden; border-radius: var(--radius-md); background: var(--chalk); box-shadow: 0 18px 60px rgb(48 39 35 / 10%); transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(2deg); }
.studio-material{ min-height: 390px; background: linear-gradient(145deg, transparent 0 22%, var(--terra) 22% 48%, transparent 48%), linear-gradient(35deg, var(--mist), var(--sage)); }
.studio-info-visual p{ margin: 0; padding: 14px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.studio-principles{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.studio-voices{ display: grid; min-height: 92svh; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.studio-voices-nav{ grid-column: 1 / 5; display: grid; align-content: start; }
.studio-voices-nav h2{ margin-bottom: 50px; font-size: clamp(2.8rem, 5vw, 5rem); letter-spacing: -0.06em; line-height: 0.92; }
.studio-voices-nav button{ width: 100%; padding: 13px 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; transition: color 250ms ease, padding 350ms var(--ease); }
.studio-voices-nav button:last-child{ border-bottom: 1px solid var(--line); }
.studio-voices-nav button[aria-pressed="true"]{ padding-left: 20px; color: var(--ink); font-weight: 700; }
.studio-voice-display{ position: relative; grid-column: 6 / 13; min-height: 560px; padding: clamp(30px, 5vw, 70px); border-radius: var(--radius-md); background: var(--mist); }
.studio-voice-display > span{ font-size: 0.72rem; }
.studio-voice-display blockquote{ max-width: 14ch; margin: 80px 0 50px; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.5rem); letter-spacing: -0.05em; line-height: 1.02; }
.studio-voice-display p{ position: absolute; right: clamp(30px, 5vw, 70px); bottom: clamp(30px, 5vw, 70px); margin: 0; font-size: 0.82rem; }
.studio-voice-display.is-changing blockquote,
.studio-voice-display.is-changing p{ animation: voice-change 420ms var(--ease); }
@keyframes voice-change { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .legal-hero .eyebrow{ grid-column: 1 / 3; }
  .legal-hero h1{ grid-column: 3 / 13; }
  .legal-hero p:last-child{ grid-column: 7 / 13; }
  .legal-content > p{ grid-column: 1 / 3; }
  .legal-sections{ grid-column: 3 / 13; }
  .home-showcase{ height: 340svh; }
  .studio-info-heading,
.studio-info-columns{ grid-template-columns: repeat(8, 1fr); }
  .studio-info-heading .eyebrow{ grid-column: 1 / 3; }
  .studio-info-heading h2{ grid-column: 3 / 9; }
  .studio-info-columns > article:nth-child(1){ grid-column: 3 / 6; }
  .studio-info-columns > article:nth-child(2){ grid-column: 6 / 9; }
  .studio-info-visual{ grid-column: 3 / 7; margin-top: 60px; }
  .studio-principles{ grid-template-columns: repeat(8, 1fr); }
  .studio-voices{ grid-template-columns: repeat(8, 1fr); }
  .studio-voices-nav{ grid-column: 1 / 4; }
  .studio-voice-display{ grid-column: 4 / 9; }
}

@media (max-width: 620px) {
  .legal-shell{ padding-top: 130px; }
  .legal-hero,
.legal-content{ display: block; }
  .legal-hero h1{ margin: 46px 0 34px; font-size: clamp(3.4rem, 17vw, 5.2rem); }
  .legal-hero p:last-child{ max-width: 34ch; }
  .legal-content > p{ margin-bottom: 60px; }
  .legal-sections article,
.legal-sections article + article{ padding-block: 38px; }
  .compact-footer .footer-legal{ justify-self: start; }
  .home-showcase{ height: auto; padding: 90px 20px; }
  .showcase-heading{ position: static; margin-bottom: 70px; }
  .showcase-heading h2{ font-size: clamp(3.4rem, 17vw, 5rem); }
  .studio-info-heading{ display: block; margin-bottom: 60px; }
  .studio-info-columns{ display: block; }
  .studio-info-columns > article{ margin-bottom: 60px; }
  .studio-info-visual{ width: 78%; margin: 70px 0 0 auto !important; }
  .studio-material{ min-height: 330px; }
  .studio-principles{ display: block; }
  .studio-voices{ display: block; min-height: 0; }
  .studio-voices-nav{ margin-bottom: 40px; }
  .studio-voice-display{ min-height: 500px; padding: 26px; }
  .studio-voice-display blockquote{ margin-top: 70px; font-size: 2.2rem; }
  .studio-voice-display p{ right: 26px; bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-showcase{ height: auto; padding-block: var(--section); }
}

/* 2026 creative direction: navigation,
project viewer,
method and studio room */
.desktop-nav .header-contact{
  margin: -10px -14px -10px 0;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 8px 24px rgb(48 39 35 / 12%);
  transition: transform 300ms var(--ease), background 300ms ease, color 300ms ease;
}
.desktop-nav .header-contact::after{ display: none; }
.desktop-nav .header-contact:hover{ background: var(--mist); color: var(--ink); transform: translateY(-2px) rotate(-1deg); }
.site-header.is-dark .desktop-nav .header-contact{ border-color: var(--paper); background: var(--paper); color: var(--ink); }
.wordmark{ isolation: isolate; transition: transform 420ms var(--ease); }
.wordmark:hover{ transform: rotate(-1.5deg) translateY(-1px); }
.social-dock{ position: fixed; z-index: 42; right: 20px; bottom: 20px; display: flex; gap: 7px; padding: 6px; border: 1px solid rgb(48 39 35 / 15%); border-radius: 999px; background: color-mix(in srgb, var(--paper) 86%, transparent); box-shadow: 0 10px 35px rgb(48 39 35 / 10%); backdrop-filter: blur(14px); }
.social-dock a,
.social-dock span{ display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; font-size: 1.12rem; transition: transform 250ms var(--ease), background 250ms ease; }
.social-dock a:hover{ background: var(--ink); color: var(--paper); transform: rotate(-8deg) scale(1.06); }
.social-dock .pending-link{ opacity: 0.38; cursor: not-allowed; }
.social-dock--linkedin{ right: auto; left: 20px; }
.social-dock .pending-link:hover,
.social-dock .pending-link:focus-visible{
  background: transparent;
  color: inherit;
  transform: none;
}
.method-index{ position: fixed; z-index: 35; top: 50%; left: 16px; display: grid; width: 32px; gap: 9px; align-items: center; opacity: 0; pointer-events: none; transform: translateY(-45%); transition: opacity 300ms ease, transform 450ms var(--ease); }
.method-index.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.method-index > span{ writing-mode: vertical-rl; font-size: 0.62rem; }
.method-index > i{ position: relative; width: 1px; height: 80px; margin: 2px auto; background: rgb(48 39 35 / 25%); }
.method-index > i b{ position: absolute; inset: 0; background: currentColor; transform: scaleY(0.2); transform-origin: top; transition: transform 300ms ease; }
.method-index > a{ display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; font-size: 0.62rem; opacity: 0.4; }
.method-index > a[aria-current="step"]{ background: currentColor; color: var(--paper); opacity: 1; }
.method-constants{ background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.method-constants h2{ max-width: 11ch; margin: 0 0 90px; font-size: clamp(3rem, 6vw, 7rem); letter-spacing: -0.07em; line-height: .9; }
.method-constants > div{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.method-constants:not(.method-constants--integrated) > div p{ display: grid; gap: 60px; padding: 18px 0; border-top: 1px solid var(--ink); }
.method-constants strong{ font-size: 1.25rem; }.method-constants span{ color: var(--muted); }
.expertise-menu li{ position: relative; cursor: crosshair; transition: color 220ms ease, padding 350ms var(--ease); }.expertise-menu li::after{ position: absolute; top: 50%; right: 0; width: 0; height: 1px; background: currentColor; content: ""; transition: width 350ms var(--ease); }.expertise-menu li:hover,
.expertise-menu li:focus,
.expertise-menu li.is-active{ padding-left: 14px; color: var(--ink); }.expertise-menu li:hover::after,
.expertise-menu li:focus::after,
.expertise-menu li.is-active::after{ width: 24px; }
.studio-info-columns .expertise-menu li:last-child{ margin-top: 0; color: var(--muted); font-family: inherit; font-size: inherit; font-style: normal; }
.studio-info-columns .expertise-menu li:last-child:hover,
.studio-info-columns .expertise-menu li:last-child:focus,
.studio-info-columns .expertise-menu li:last-child.is-active{ color: var(--ink); }
.expertise-preview .studio-material{ position: relative; overflow: hidden; transition: background-color 400ms ease; }.expertise-preview .studio-material span{ position: absolute; top: 13%; left: 12%; font-family: var(--serif); font-size: 5rem; transition: transform 500ms var(--ease); }.expertise-preview .studio-material i{ position: absolute; right: 14%; bottom: 18%; width: 44%; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; transition: border-radius 600ms var(--ease), transform 500ms var(--ease); }.expertise-preview .studio-material b{ position: absolute; right: 12%; top: 11%; }.expertise-preview[data-active="web"] .studio-material,
.expertise-preview[data-active="development"] .studio-material{ background: var(--mist); }.expertise-preview[data-active="identity"] .studio-material,
.expertise-preview[data-active="art"] .studio-material{ background: var(--terra); }.expertise-preview[data-active="strategy"] .studio-material,
.expertise-preview[data-active="naming"] .studio-material{ background: var(--sage); }.expertise-preview[data-active="editorial"] .studio-material{ background: #d7c6b4; }.expertise-preview[data-active] .studio-material span{ transform: translate(14px, 18px) rotate(-8deg); }.expertise-preview[data-active] .studio-material i{ border-radius: 68% 32% 45% 55%; transform: rotate(22deg) scale(.85); }
.voice-scroll-track{ grid-column: 6 / 13; min-height: 310svh; }.voice-scroll-track .studio-voice-display{ position: sticky; top: 14vh; }.studio-voices-nav{ position: sticky; top: 13vh; align-self: start; }.voices-hint{ display: flex; gap: 8px; align-items: center; margin-top: 28px; color: var(--muted); font-size: .68rem; }.voice-progress{ position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: rgb(48 39 35 / 10%); }.voice-progress i{ display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(.25); transform-origin: left; transition: transform 420ms var(--ease); }

.contact-aside::before{ position: absolute; top: 14%; right: 8%; width: 86px; height: 118px; border: 1px solid rgb(48 39 35 / 25%); border-radius: 10px; content: "01 / idée"; padding: 12px; font-size: .62rem; transform: rotate(7deg); animation: contact-card-float 8s ease-in-out infinite; }.contact-aside::after{ position: absolute; right: 12%; bottom: 34%; width: 105px; height: 105px; border-radius: 50%; background: var(--terra); content: "2 jours"; display: grid; place-items: center; font-family: var(--serif); font-size: 1.7rem; animation: contact-card-float 9s ease-in-out -2s infinite reverse; }
@keyframes contact-card-float { 50% { transform: translateY(-16px) rotate(-3deg); } }
.contact-direct a,
.contact-direct button{ display: inline-flex; gap: 7px; align-items: center; padding: 10px 14px; border: 1px solid rgb(48 39 35 / 35%); border-radius: 999px; background: transparent; font-size: .75rem; font-weight: 700; transition: background 250ms ease, color 250ms ease, transform 300ms var(--ease); }
.contact-direct a:hover,
.contact-direct button:hover{ background: var(--ink); color: var(--paper); transform: translateY(-2px); }.legal-sections ul{ max-width: 66ch; padding-left: 1.1em; color: var(--muted); }.legal-sections a{ text-decoration: underline; text-underline-offset: 3px; }.legal-note{ padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--chalk); }

@media (max-width: 900px) {.method-index{ display: none; }
  .voice-scroll-track{ grid-column: 4 / 9; }
}

@media (max-width: 620px) {
  .social-dock{ right: 14px; bottom: 14px; }.social-dock--linkedin{ right: auto; left: 14px; }.sound-toggle{ min-width: 42px; padding-inline: 8px; font-size: 0; }.sound-toggle::before{ content: "◌"; font-size: 1rem; }.sound-toggle[aria-pressed="true"]::before{ content: "●"; }.method-constants > div{ grid-template-columns: 1fr; }.method-constants > div p{ gap: 24px; }.method-constants h2{ margin-bottom: 60px; }
  .studio-information .studio-info-visual{ width: 100%; }.voice-scroll-track{ min-height: auto; }.voice-scroll-track .studio-voice-display{ position: relative; top: auto; }.studio-voices-nav{ position: relative; top: auto; }.voices-hint{ display: none; }
  .contact-aside::before,
.contact-aside::after{ opacity: .55; transform: scale(.8); }.contact-aside::before{ top: 10%; right: 2%; }.contact-aside::after{ right: 4%; bottom: 24%; }
}

@media (prefers-reduced-motion: reduce) {
  .method-opening-line path,
.room-loop path,
.contact-aside::before,
.contact-aside::after,
.radar-point{ animation: none; }
}
.desktop-nav .header-contact{
  margin-block: -8px;
  padding: 9px 15px;
  border-radius: 7px;
  box-shadow: none;
}
.desktop-nav .header-contact:hover{ transform: translateY(-1px); }
.mobile-menu nav a[href*="contact"]{ border-radius: 8px; }
.sound-toggle{
  display: grid;
  min-width: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border-color: transparent;
  border-radius: 50%;
  font-size: .92rem;
  opacity: .58;
}
.sound-toggle:hover,
.sound-toggle[aria-pressed="true"]{ background: transparent; color: inherit; opacity: 1; }
.site-header.is-dark .sound-toggle[aria-pressed="true"]{ background: transparent; color: inherit; }

/* [SECTION: 04 — HOME EXPERIENCE] */
.hero-v2{
  display: block;
  min-height: 118svh;
  width: 100%;
  padding: 115px 0 48px;
  overflow: hidden;
}
.hero-v2-heading{ width: var(--page); margin-inline: auto; }
.hero-v2-heading > p:first-child{ margin: 0; color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hero-v2 h1{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: clamp(50px, 8vh, 90px) 0 24px;
  font-family: var(--sans);
  font-size: clamp(8rem, 22vw, 23rem);
  font-weight: 700;
  letter-spacing: -.105em;
  line-height: .66;
  white-space: nowrap;
}
.hero-v2 h1 span{ display: block; }
.hero-v2 h1 span:last-child{ margin-right: .07em; }
.hero-v2-intro{ max-width: 39ch; margin: 42px 0 0 auto; font-size: clamp(1rem, 1.4vw, 1.35rem); line-height: 1.35; }
.project-ticker{ position: relative; margin-top: clamp(70px, 10vh, 120px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.project-ticker:active{ cursor: grabbing; }
.project-ticker-track{ display: flex; width: max-content; gap: 14px; padding-inline: 14px; will-change: transform; }
.ticker-card{ position: relative; display: grid; overflow: hidden; width: clamp(250px, 24vw, 420px); aspect-ratio: 1.45; align-content: end; padding: 14px; border-radius: 10px; color: var(--paper); isolation: isolate; }
.ticker-card::after{ position: absolute; z-index: -1; inset: 45% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 65%)); content: ""; }
.ticker-card img{ position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease), filter 500ms ease; }
.ticker-card:hover img{ filter: saturate(.85); transform: scale(1.025); }
.ticker-card span{ font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.ticker-card small{ color: rgb(250 248 243 / 76%); font-size: .65rem; }
.hero-v2-foot{ display: flex; width: var(--page); justify-content: space-between; margin: 22px auto 0; color: var(--muted); font-size: .72rem; }
.hero-v2-foot a{ display: flex; gap: 9px; align-items: center; color: var(--ink); font-weight: 600; }

.studio-editorial-hero{ position: relative; display: grid; min-height: 100svh; width: var(--page); margin-inline: auto; grid-template-columns: repeat(12, 1fr); gap: 24px; align-content: space-between; padding: 100px 0 32px; overflow: hidden; }
.studio-editorial-hero h1{ position: relative; z-index: 2; grid-column: 2 / 8; align-self: start; margin: 0; font-size: clamp(5rem, 9.3vw, 10rem); letter-spacing: -.09em; line-height: .72; }
.studio-editorial-hero h1 span{ display: block; }
.studio-editorial-hero > p{ position: relative; z-index: 2; grid-column: 7 / 13; align-self: end; max-width: 24ch; margin: 0 0 0 auto; font-size: clamp(1.7rem, 3vw, 3.25rem); font-weight: 600; letter-spacing: -.055em; line-height: .96; }
.studio-editorial-hero > a{ position: absolute; bottom: 30px; left: 0; display: flex; gap: 8px; align-items: center; font-size: .7rem; font-weight: 600; }
.studio-information{ margin-top: 0; }

.site-footer-v2{ width: var(--page); margin-inline: auto; padding: 62px 0 24px; border-top: 1px solid var(--line); background: transparent; color: var(--ink); }
.footer-v2-main{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; padding-bottom: 70px; }
.footer-v2-mark{ width: max-content; font-size: 1.6rem; font-weight: 700; letter-spacing: -.07em; }
.footer-v2-main nav{ display: flex; gap: 28px; font-size: .75rem; }
.footer-v2-contact{ display: flex; gap: 8px; justify-self: end; align-items: center; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: .75rem; font-weight: 600; }
.footer-v2-bottom{ display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }
.footer-v2-bottom p{
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}
.footer-design-credit{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: inherit;
  font-size: .9em;
  letter-spacing: .02em;
  opacity: .58;
  text-transform: none;
  white-space: nowrap;
}
.footer-design-credit::before{
  content: "·";
}
.footer-v2-bottom .footer-legal{ display: flex; gap: 18px; }

.contact-aside::after{ display: none; }
.contact-aside::before{ opacity: .45; }

@media (max-width: 900px) {
  .hero-v2{ min-height: auto; }.hero-v2 h1{ font-size: clamp(7rem, 21vw, 12rem); }.ticker-card{ width: 38vw; }
  .studio-editorial-hero{ grid-template-columns: repeat(8, 1fr); }.studio-editorial-hero h1{ grid-column: 1 / 6; }.studio-editorial-hero > p{ grid-column: 4 / 9; }
}

@media (max-width: 620px) {
  .sound-toggle{ width: 28px; height: 28px; font-size: .86rem; }.sound-toggle::before{ display: none; }
  .hero-v2{ min-height: 100svh; padding: 120px 0 28px; }.hero-v2 h1{ display: block; margin: 80px 0 34px; font-size: clamp(6rem, 31vw, 9rem); line-height: .62; }.hero-v2 h1 span:last-child{ margin: .18em 0 0 .28em; }.hero-v2-intro{ max-width: 28ch; margin: 50px 0 0 auto; font-size: .96rem; }.project-ticker{ margin-top: 74px; }.project-ticker-track{ gap: 10px; padding-inline: 10px; }.ticker-card{ width: 72vw; border-radius: 8px; }.hero-v2-foot{ margin-top: 20px; }
  .studio-editorial-hero{ display: block; min-height: 100svh; padding-top: 125px; }.studio-editorial-hero h1{ font-size: clamp(5rem, 23vw, 7rem); }.studio-editorial-hero > p{ position: absolute; right: 0; bottom: 72px; max-width: 13ch; font-size: clamp(1.55rem, 7.2vw, 2.2rem); }.studio-editorial-hero > a{ bottom: 30px; }
  .footer-v2-main{ grid-template-columns: 1fr auto; padding-bottom: 44px; }.footer-v2-main nav{ display: none; }.footer-v2-contact{ font-size: .72rem; }.footer-v2-bottom{ display: grid; }.footer-v2-bottom .footer-legal{ justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .project-ticker-track{ transform: none !important; }.project-ticker{ overflow-x: auto; }
}

/* Identity motion,
project imagery and guided contact */
.sound-toggle{ min-width: 58px; padding: 7px 10px; border: 1px solid currentColor; border-radius: 99px; background: transparent; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; opacity: 0.62; transition: opacity 250ms ease, background 250ms ease, color 250ms ease; }
.sound-toggle:hover,
.sound-toggle[aria-pressed="true"]{ opacity: 1; }
.sound-toggle[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }
.site-header.is-dark .sound-toggle[aria-pressed="true"]{ background: var(--chalk); color: var(--ink); }

body.intro-active{ overflow: hidden; }
.intro-loader{ position: fixed; z-index: 2000; inset: 0; display: grid; overflow: hidden; place-items: center; background: var(--mist); color: var(--ink); }
.intro-loader::after{ position: absolute; z-index: 1; right: -30vw; bottom: -125vw; left: -30vw; height: 145vw; border-radius: 50% 50% 0 0; background: var(--paper); content: ""; transform: translateY(0); }
.intro-loader-brand{ position: relative; z-index: 2; display: grid; width: min(72vw, 560px); justify-items: center; }
.intro-loader-brand .intro-brand-logo{ width: min(62vw, 430px); aspect-ratio: 286 / 87; animation: intro-word 700ms var(--ease) both; }
.intro-loader-brand svg{ width: min(66vw, 450px); margin-top: 20px; overflow: visible; }
.intro-loader-brand path{ fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 760; stroke-dashoffset: 760; animation: intro-draw 900ms var(--ease) 80ms forwards; }
.intro-loader.is-leaving::after{ animation: intro-wave 720ms var(--ease) forwards; }
.intro-loader.is-leaving .intro-loader-brand{ animation: intro-brand-leave 380ms ease forwards; }
@keyframes intro-word { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-wave { to { transform: translateY(-125vw); } }
@keyframes intro-brand-leave { to { opacity: 0; transform: translateY(-18px); } }

.showcase-card img,
.project-visual img,
.stage-visual img,
.case-cover img,
.case-shot img{ width: 100%; height: 100%; object-fit: cover; }
.case-cover{ margin: 0; }
.case-cover img{ position: absolute; inset: 0; }
body[data-project-key="dolce-vita"] .case-hero{ background: #c7f85f; }
body[data-project-key="book-house"] .case-hero{ background: #e9a9c2; }

[data-hover-gallery]{
  background: #d8d5cf;
}
[data-hover-gallery] > .hover-gallery-layer{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.001);
  transition: opacity 560ms cubic-bezier(.22, .61, .36, 1),
    filter 560ms ease,
    transform 900ms var(--ease);
  will-change: opacity, transform;
}
[data-hover-gallery] > .hover-gallery-layer.is-gallery-visible{
  opacity: 1;
}
body[data-project-key="amelie"] .case-hero{ background: #d8d0c3; }
body[data-project-key="habitat3"] .case-hero{ background: #dceff7; }
.case-shot{ margin: 0; }
.case-shot img{ transition: transform 1.2s var(--ease); }
.case-shot:hover img{ transform: scale(1.025); }

.contact-path{ grid-column: 7 / 13; align-self: center; padding: clamp(30px, 5vw, 70px); border-radius: var(--radius-md); background: var(--mist); }
.contact-path > p{ max-width: 42ch; margin-bottom: 42px; font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1.2; }
.contact-path .button{ display: flex; width: 100%; justify-content: space-between; }
.contact-path-options{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.contact-path-options button,
.contact-direct button{ padding: 9px 13px; border: 1px solid rgb(48 39 35 / 32%); border-radius: 99px; background: transparent; font-size: 0.72rem; font-weight: 700; }
.contact-direct a,
.contact-direct button{ min-height: 40px; }

.guided-form{
  --form-title-size: clamp(2.2rem, 3.35vw, 3.25rem);
  min-height: 690px;
}
.form-progress{ display: flex; align-items: center; gap: 18px; margin-bottom: 54px; color: var(--muted); font-size: 0.7rem; }
.form-progress > i{ position: relative; display: block; overflow: hidden; width: 100%; height: 1px; background: var(--line); }
.form-progress > i b{ position: absolute; inset: 0; background: var(--ink); transform: scaleX(0.2); transform-origin: left; transition: transform 650ms var(--ease); }
.form-step{ animation: form-step-in 500ms var(--ease) both; }
.form-step h2{ max-width: 13ch; margin-bottom: 40px; font-size: var(--form-title-size); letter-spacing: -0.055em; line-height: 0.95; }
.form-step[data-form-step="4"] h2{ max-width: 14ch; }
.form-step h2:focus{ outline: none; }
.form-step[hidden]{ display: none; }
@keyframes form-step-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.answer-grid{ display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; margin-bottom: 18px !important; }
.answer-grid legend:not(.sr-only){ grid-column: 1 / -1; margin-bottom: 8px; }
.answer-card{ position: relative; display: block !important; margin: 0 !important; cursor: pointer; }
.answer-card > input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.answer-card > input + span{ display: flex; min-height: 74px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--chalk); font-size: 0.86rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; transition: border 250ms ease, background 250ms ease, transform 350ms var(--ease); }
.answer-card:hover > input + span{ transform: translateY(-2px); }
.answer-card input:checked + span{ border-color: var(--ink); background: var(--mist); }
.answer-card input:focus-visible + span{ outline: 2px solid var(--slate); outline-offset: 3px; }
.answer-grid.has-error{ padding: 8px !important; border: 1px solid var(--terra) !important; border-radius: 18px; }
.field-hint{ color: var(--muted); font-size: 0.75rem; }
.form-navigation{ display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 38px; }
.form-navigation > button:not(.button){
  position: relative;
  display: inline-flex;
  gap: 7px;
  min-height: 44px;
  align-items: center;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
  transform-origin: left center;
  transition:
    color 160ms ease,
    transform 180ms var(--ease-out);
}
.form-navigation > button:not(.button) > i{
  flex: 0 0 auto;
  font-size: 1.05em;
  transition: transform 220ms var(--ease-out);
}
.form-navigation > button:not(.button)::after{
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .form-navigation > button:not(.button):hover{
    color: var(--primary);
    transform: translate3d(-4px, 0, 0);
  }

  .form-navigation > button:not(.button):hover > i{
    transform: translate3d(-4px, 0, 0);
  }

  .form-navigation > button:not(.button):hover::after{
    transform: scaleX(1);
  }
}
.form-navigation > button:not(.button):focus-visible{
  color: var(--primary);
  outline-color: var(--primary);
}
.form-navigation > button:not(.button):focus-visible::after{
  transform: scaleX(1);
}
.form-navigation > button:not(.button):active{
  transform: translate3d(-2px, 0, 0) scale(.97);
  transition-duration: 110ms;
}
.form-navigation > button:not(.button):active > i,
.form-navigation > button:not(.button).is-back-activating > i{
  transform: translate3d(-7px, 0, 0);
}
.form-navigation > button:not(.button).is-back-activating{
  color: var(--primary);
  transform: translate3d(-3px, 0, 0) scale(.98);
}
.form-navigation > button:not(.button).is-back-activating::after{
  transform: scaleX(1);
}
.form-navigation .button{ min-width: 180px; }
.call-window{ margin-top: 24px; }
.form-status{ min-height: 24px; margin: 22px 0 0; color: var(--slate); font-size: 0.78rem; }

@media (max-width: 900px) {
  .contact-path{ grid-column: 4 / 9; }
}

@media (max-width: 620px) {
  .sound-toggle{ min-width: 48px; padding-inline: 7px; font-size: 0.58rem; }
  .intro-loader-brand{ width: 82vw; }
  .intro-loader::after{ right: -80vw; bottom: -190vw; left: -80vw; height: 210vw; }
  .intro-loader.is-leaving::after{ animation-name: intro-wave-mobile; }
  @keyframes intro-wave-mobile { to { transform: translateY(-190vw); } }
  .contact-path{ margin-top: 50px; padding: 26px; }
  .contact-path > p{ font-size: 1.55rem; }
  .guided-form{
    --form-title-size: clamp(1.95rem, 8.2vw, 2.2rem);
    min-height: 650px;
  }
  .form-progress{ margin-bottom: 34px; }
  .form-step h2{ margin-bottom: 30px; }
  .answer-grid{ grid-template-columns: 1fr; }
  .answer-grid--compact{ grid-template-columns: 1fr 1fr; }
  .answer-card > input + span{ min-height: 62px; }
  .form-navigation{ margin-top: 28px; }
  .form-navigation .button{ min-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-loader{ display: none; }
  .form-navigation > button:not(.button),
  .form-navigation > button:not(.button)::after{
    transition: none;
  }
}

/* Final v2 control override — intentionally after legacy component rules */
.sound-toggle,
.site-header .sound-toggle{
  display: grid;
  min-width: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: .92rem;
  opacity: .56;
}
.sound-toggle:hover,
.sound-toggle[aria-pressed="true"],
.site-header.is-dark .sound-toggle[aria-pressed="true"]{ background: transparent; color: inherit; opacity: 1; }
@media (max-width: 620px) {
  .sound-toggle,
.site-header .sound-toggle{ min-width: 0; width: 28px; height: 28px; padding: 0; font-size: .86rem; }
  .sound-toggle::before{ display: none; }
}

/* [SECTION: 08 — COMPONENT REFINEMENTS AND RESPONSIVE STATES] */

/* V3 — clearer motion,
editorial case studies and a reliable method journey */
.desktop-nav a[aria-current="page"]::after{
  background: var(--mist);
  transform: scaleX(1);
  transform-origin: left;
}
.desktop-nav .header-contact[aria-current="page"]{ background: var(--mist); color: var(--ink); }
.mobile-menu nav a[aria-current="page"]::after{
  display: inline-block;
  width: .18em;
  height: .18em;
  margin-left: .18em;
  border-radius: 50%;
  background: var(--ink);
  content: "";
  vertical-align: .15em;
}
.home-page .wordmark{ opacity: var(--home-mark-opacity, 0); transform: translateY(calc((1 - var(--home-mark-opacity, 0)) * -8px)); }
.hero-logo-motion{ display: block; width: min(82vw, 1320px); margin: 0 !important; transform-origin: top left; will-change: transform, opacity; }
.hero-brand-logo{
  width: 100%;
  aspect-ratio: 269 / 87;
  mask-image: url("./assets/brand/myrak-wordmark.svg");
  -webkit-mask-image: url("./assets/brand/myrak-wordmark.svg");
}


/* Method — one vertical line,
no competing sticky scenes */
/* [SECTION: 05 — METHOD] */
.method-line-page{ background: var(--paper); }
.method-line-hero{
  position: relative;
  display: grid;
  min-height: 100svh;
  width: var(--page);
  margin-inline: auto;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-content: end;
  padding: 150px 0 70px;
}
.method-line-hero > .eyebrow{ position: absolute; top: 145px; left: 0; }
.method-line-hero h1{ grid-column: 1 / 12; margin: 0; font-size: clamp(4.8rem, 9.2vw, 10.5rem); letter-spacing: -.09em; line-height: .77; }
.method-line-hero h1 span,
.method-line-hero h1 em{ display: block; }
.method-line-hero h1 em{ max-width: 10ch; margin-left: auto; color: var(--slate); font-family: var(--serif); font-weight: 400; letter-spacing: -.07em; }
.method-line-intro{ grid-column: 8 / 12; max-width: 38ch; margin: 54px 0 0; color: var(--muted); }
.method-line-cue{ position: absolute; bottom: 70px; left: 0; display: flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.process-journey--v3{ padding-top: 40px; isolation: isolate; }
.process-journey--v3 .journey-line{ z-index: 1; }
.process-journey--v3 .journey-line path{ vector-effect: non-scaling-stroke; }
.process-journey--v3 .journey-line-ghost{ stroke: rgb(97 127 137 / 28%); stroke-width: 2; stroke-dasharray: 8 14; stroke-dashoffset: 0; opacity: 1; }
.process-journey--v3 [data-progress-path]{ stroke: var(--slate); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; }
.process-journey--v3 [data-progress-dot]{ fill: var(--mist); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.process-journey--v3 .journey-step{ z-index: auto; min-height: 760px; padding: 45px; }
.process-journey--v3 .journey-step::before{ position: absolute; z-index: 0; inset: 15px 50% 15px auto; width: 100vw; border-radius: 18px; content: ""; transform: translateX(50%); }
.journey-step--paper::before{ background: var(--chalk); }
.journey-step--blue::before{ background: color-mix(in srgb, var(--mist) 72%, var(--paper)); }
.journey-step--sage::before{ background: color-mix(in srgb, var(--sage) 66%, var(--paper)); }
.journey-step--warm::before{ background: color-mix(in srgb, var(--terra) 57%, var(--paper)); }
.journey-step--dark::before{ background: var(--ink); }
.process-journey--v3 .journey-number{ position: relative; z-index: 3; opacity: .17; }
.process-journey--v3 .journey-copy{ position: relative; z-index: 4; padding: 38px; border: 1px solid rgb(48 39 35 / 12%); border-radius: 10px; background: var(--paper); box-shadow: 0 24px 80px rgb(48 39 35 / 8%); backdrop-filter: none; }
.process-journey--v3 .journey-copy h2{ max-width: 9ch; }
.process-journey--v3 .journey-object{ position: relative; z-index: 4; transition: transform 700ms var(--ease); }
.process-journey--v3 .journey-step:hover .journey-object{ transform: translateY(-10px) rotate(1deg); }
.object-dialogue{ display: grid; width: 330px; gap: 15px; transform: rotate(-4deg); }
.object-dialogue span{ width: max-content; padding: 18px 24px; border: 1px solid var(--ink); border-radius: 999px; background: var(--chalk); font-family: var(--serif); font-size: 1.7rem; }
.object-dialogue span:last-child{ margin-left: auto; background: var(--mist); }
.object-dialogue i{ width: 70%; height: 1px; margin-inline: auto; background: var(--ink); transform: rotate(-18deg); }
.process-journey--v3 .journey-step--dark{ color: var(--paper); }
.process-journey--v3 .journey-step--dark .journey-number{ color: var(--paper); }
.process-journey--v3 .journey-step--dark .journey-copy{ border-color: rgb(250 248 243 / 18%); background: rgb(48 39 35 / 82%); color: var(--paper); }
.process-journey--v3 .journey-step--dark .journey-copy > p:last-child,
.process-journey--v3 .journey-step--dark .eyebrow{ color: #c9c0ba; }

/* Case study — oversized title,
full-bleed imagery and editorial rhythm */
/* [SECTION: 05B — EDITORIAL CASE STUDIES] */
.case-editorial{ background: var(--paper); }
.case-hero--v3{
  position: relative;
  display: grid;
  min-height: 100svh;
  width: var(--page);
  margin-inline: auto;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-items: stretch;
  padding: 105px 0 30px;
  background: transparent !important;
}
.case-hero-top{ z-index: 3; display: flex; grid-column: 1 / 13; justify-content: space-between; align-items: start; font-size: .72rem; text-transform: uppercase; }
.case-hero-top p{ margin: 0; }
.case-title{ position: relative; z-index: 3; grid-column: 1 / 9; grid-row: 2; align-self: end; padding: 0 0 45px; pointer-events: none; }
.case-title h1{ max-width: 9ch; margin: 0; font-size: clamp(5rem, 10.3vw, 11.5rem); letter-spacing: -.095em; line-height: .72; }
.case-title > p:last-child{ max-width: 25ch; margin: 32px 0 0; padding: 12px 14px; background: var(--paper); font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.65rem); line-height: 1.15; }
.case-hero--v3 .case-cover{ grid-column: 5 / 13; grid-row: 2; min-height: 75svh; border-radius: 8px; box-shadow: 0 28px 90px rgb(48 39 35 / 14%); }
.case-hero--v3 .case-cover img{ transition: transform 1.2s var(--ease); }
.case-hero--v3:hover .case-cover img{ transform: scale(1.018); }
.case-scroll-cue{ position: absolute; bottom: 38px; right: max(20px, calc((100vw - 1520px) / 2)); z-index: 4; display: flex; gap: 9px; align-items: center; padding: 8px 10px; background: var(--paper); font-size: .7rem; font-weight: 700; }
.case-overview--v3{ padding-top: clamp(8rem, 13vw, 14rem); }
.case-overview--v3 .case-story h2{ max-width: 10ch; }
.case-gallery--v3{ gap: clamp(18px, 2vw, 30px); }
.case-gallery--v3 .case-shot{ border-radius: 8px; background: var(--chalk); }
.case-gallery--v3 .case-shot--opening{ min-height: 92svh; }
.case-gallery--v3 .case-shot--portrait{ grid-column: 2 / 7; aspect-ratio: .76; min-height: 0; }
.case-gallery--v3 .case-shot--portrait img{ transform: scale(1.35); }
.case-gallery--v3 .case-shot--landscape{ grid-column: 7 / 13; align-self: end; aspect-ratio: 1.24; min-height: 0; }
.case-gallery--v3 .case-shot--landscape img{ transform: scale(1.22); object-position: 70% 50%; }
.case-gallery--v3 .decision-note{ grid-column: 7 / 12; align-self: center; margin: 120px 0; }
.case-gallery--v3 .case-shot--closing{ min-height: 88svh; margin-top: 80px; }
.case-gallery--v3 figcaption{ position: absolute; right: 16px; bottom: 16px; left: 16px; display: flex; justify-content: space-between; padding: 10px 12px; background: rgb(250 248 243 / 88%); backdrop-filter: blur(10px); font-size: .72rem; }
.case-result--v3{ min-height: 90svh; display: grid; align-content: center; }

/* Studio — lightweight CSS 3D room made from the projects */
.studio-editorial-hero{ isolation: isolate; }
.studio-editorial-hero h1,
.studio-editorial-hero > p,
.studio-editorial-hero > a{ z-index: 5; }
.studio-editorial-hero > p{ padding: 14px 16px; border-radius: 7px; background: rgb(248 247 243 / 84%); backdrop-filter: blur(10px); }

@media (max-width: 900px) {
  .method-line-hero{ grid-template-columns: repeat(8, 1fr); }
  .method-line-hero h1{ grid-column: 1 / 9; }
  .method-line-intro{ grid-column: 5 / 9; }
  .process-journey--v3 .journey-step{ padding-inline: 28px; }
  .case-title{ grid-column: 1 / 8; }
  .case-hero--v3 .case-cover{ grid-column: 4 / 13; }
}

@media (max-width: 620px) {
  :root{ --page: min(100% - 28px, 1520px); --section: clamp(4.5rem, 20vw, 7rem); }
  .site-header{ padding-top: 14px; }
  .mobile-menu{ padding: 105px 14px 22px; }
  .mobile-menu nav a{ padding: 8px 0; font-size: clamp(2.8rem, 15vw, 4.2rem); }
  .mobile-menu nav a[href*="contact"]{ border-radius: 7px; }
  .hero-v2{ padding-top: 105px; }
  .hero-v2-heading > p:first-child{ font-size: .62rem; }
  .hero-v2 h1{ margin-top: 55px; }
  .hero-logo-motion > span:last-child{ margin-left: .2em !important; }
  .ticker-card{ width: 78vw; }
  .ticker-card img{ aspect-ratio: 1.2; }
  .hero-v2-foot{ font-size: .66rem; }




  .method-line-hero{ display: block; min-height: 92svh; padding: 125px 0 65px; }
  .method-line-hero > .eyebrow{ position: static; margin-bottom: 90px; }
  .method-line-hero h1{ font-size: clamp(4.1rem, 18vw, 6rem); line-height: .8; }
  .method-line-hero h1 em{ margin: .18em 0 0 .1em; }
  .method-line-intro{ max-width: 29ch; margin: 70px 0 0 auto; font-size: .9rem; }
  .method-line-cue{ bottom: 24px; }
  .process-journey--v3{ padding: 0 0 100px; }
  .process-journey--v3 .journey-line{ left: 0; width: 66px; }
  .process-journey--v3 .journey-step{ min-height: 680px; padding: 70px 0 70px 36px; }
  .process-journey--v3 .journey-step::before{ inset-block: 8px; border-radius: 10px; }
  .process-journey--v3 .journey-number{ margin-bottom: 45px; font-size: 4.3rem; }
  .process-journey--v3 .journey-copy{ padding: 22px; }
  .process-journey--v3 .journey-copy h2{ font-size: clamp(2.45rem, 12vw, 3.5rem); }
  .process-journey--v3 .journey-object{ width: 62%; margin: 55px 4% 0 auto; }
  .object-dialogue span{ padding: 12px 16px; font-size: 1.2rem; }

  .case-hero--v3{ display: block; min-height: 100svh; padding: 105px 0 20px; }
  .case-hero-top{ font-size: .62rem; }
  .case-title{ position: absolute; top: 25%; left: 0; padding: 0; }
  .case-title h1{ max-width: 8ch; font-size: clamp(4.5rem, 21vw, 6.6rem); }
  .case-title > p:last-child{ max-width: 19ch; margin-top: 20px; font-size: 1rem; }
  .case-hero--v3 .case-cover{ position: absolute; right: 0; bottom: 20px; width: 82%; min-height: 53svh; }
  .case-scroll-cue{ right: 14px; bottom: 27px; }
  .case-overview--v3{ padding-top: 110px; }
  .case-gallery--v3 .case-shot,
.case-gallery--v3 .case-shot--wide{ aspect-ratio: .82; min-height: 0; margin-bottom: 14px; }
  .case-gallery--v3 .case-shot--portrait,
.case-gallery--v3 .case-shot--landscape{ width: 88%; margin-bottom: 45px; }
  .case-gallery--v3 .case-shot--landscape{ margin-left: auto; aspect-ratio: 1; }
  .case-gallery--v3 .decision-note{ margin: 90px 0; }
  .case-gallery--v3 .case-shot--closing{ margin-top: 50px; }
  .case-result--v3{ min-height: 70svh; }

  .studio-editorial-hero{ padding-top: 108px; }
  .studio-editorial-hero h1{ position: relative; font-size: clamp(4.6rem, 21vw, 6.6rem); }
  .studio-editorial-hero > p{ z-index: 5; bottom: 60px; max-width: 15ch; padding: 8px; background: rgb(248 247 243 / 82%); backdrop-filter: blur(8px); }
  .studio-information{ padding-top: 90px; }
  .studio-info-columns{ gap: 55px; }
  .studio-voices-nav button{ min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-motion{ transform: none !important; opacity: 1 !important; }
  .home-page .wordmark{ opacity: 1; transform: none; }
  .process-journey--v3 [data-progress-path]{ stroke-dashoffset: 0; }
  .process-journey--v3 [data-progress-dot]{ display: none; }
}

/* V4 — continuous process,
playful sans accent and a more lived-in studio */
.desktop-nav a[aria-current="page"]:not(.header-contact){
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mist) 48%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--slate) 18%, transparent);
}
.desktop-nav a[aria-current="page"]::after{ display: none; }

.hero-v2 h1{
  display: flex;
  justify-content: center;
  margin-inline: auto;
  font-family: var(--accent);
  font-size: clamp(7.2rem, 21vw, 22rem);
  letter-spacing: -.115em;
  text-align: center;
}
.hero-logo-motion{ margin-inline: auto !important; }

.process-journey--v3{
  padding: 0 0 0;
  isolation: isolate;
}
.process-journey--v3 .journey-step{
  min-height: 760px;
  margin: 0;
}
.process-journey--v3 .journey-step::before{
  inset: 0 50% 0 auto;
  border-radius: 0;
}
.journey-step--adjustments::before{ background: color-mix(in srgb, var(--chalk) 50%, var(--terra)); }
.journey-step--adjustments .journey-copy{ grid-column: 1 / 6; }
.method-constants--integrated{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: clamp(7rem, 12vw, 12rem) max(20px, calc((100vw - 1520px) / 2));
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
  clip-path: none;
}
.method-constants--integrated .method-constants-heading{
  display: block;
  position: relative;
  z-index: 2;
  margin-bottom: clamp(5rem, 9vw, 9rem);
}
.method-constants--integrated .eyebrow{ color: var(--mist); }
.method-constants--integrated h2{
  max-width: 8ch;
  margin: 0;
  font-family: var(--accent);
  font-size: clamp(5rem, 11vw, 12rem);
  letter-spacing: -.09em;
  line-height: .75;
}
.method-constants--integrated .method-constants-cards{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.method-constants--integrated .method-constants-cards article{
  display: grid;
  min-height: 340px;
  gap: 20px;
  align-content: space-between;
  padding: 24px;
  border: 1px solid rgb(250 248 243 / 18%);
  border-radius: 8px 42px 8px 8px;
  background: rgb(250 248 243 / 7%);
  backdrop-filter: blur(8px);
}
.method-constants--integrated .method-constants-cards article:nth-child(2){ transform: translateY(42px); border-radius: 42px 8px 8px; }
.method-constants--integrated .method-constants-cards article:nth-child(3){ border-radius: 8px 8px 42px; }
.method-constants--integrated .method-constants-cards span{ color: var(--mist); }
.method-constants--integrated .method-constants-cards strong{ max-width: 10ch; font-family: var(--accent); font-size: clamp(1.7rem, 2.8vw, 3.2rem); line-height: .98; }
.method-constants--integrated .method-constants-cards p{ max-width: 30ch; margin: 0; color: #c9c1bc; }

.studio-editorial-hero h1{
  grid-column: 1 / 11;
  align-self: start;
  font-family: var(--accent);
  font-size: clamp(6rem, 12vw, 13rem);
  text-transform: uppercase;
  word-spacing: .11em;
  white-space: nowrap;
}
.studio-specialty-copy{
  grid-column: 6 / 13 !important;
  max-width: 27ch !important;
  padding: 12px 14px !important;
  border-radius: 7px;
  background: rgb(248 247 243 / 86%) !important;
  backdrop-filter: blur(10px) !important;
}
.studio-specialty-copy span{
  color: color-mix(in srgb, var(--ink) calc(var(--word-progress, 0) * 100%), #a9a49d);
  transition: color 120ms linear;
}
.studio-info-heading h2{ font-family: var(--accent); font-size: clamp(5rem, 10vw, 11rem); line-height: .76; }

.studio-voices{
  position: relative;
  margin-block: clamp(4rem, 9vw, 9rem);
  padding: clamp(3rem, 6vw, 6rem);
  border-radius: 32px 8px 32px 8px;
  background: color-mix(in srgb, var(--mist) 58%, var(--paper));
  box-shadow: inset 0 0 0 1px rgb(48 39 35 / 8%);
}
.studio-voices-nav h2{ max-width: 9ch; font-family: var(--accent); }
.studio-voice-display{
  overflow: hidden;
  border: 1px solid rgb(48 39 35 / 12%);
  border-radius: 7px 55px 7px 55px;
  background: var(--chalk);
  box-shadow: 0 28px 75px rgb(48 39 35 / 11%);
  transform: rotate(1.5deg);
}
.studio-voice-display::before{ position: absolute; top: 22px; right: 24px; color: var(--terra); content: "✦"; font-size: 3rem; }
.studio-voice-display blockquote{ font-family: var(--accent); font-weight: 550; }
.studio-motion-note{ overflow: hidden; padding: clamp(5rem, 9vw, 9rem) 0; background: var(--terra); }
.studio-motion-track{ display: flex; width: max-content; font-family: var(--accent); font-size: clamp(4rem, 10vw, 11rem); font-weight: 700; letter-spacing: -.07em; line-height: .78; animation: studio-motion-loop 22s linear infinite; }
.studio-motion-track span{ white-space: nowrap; }
.studio-motion-note > p{ width: min(100% - 40px, 1520px); max-width: 28ch; margin: clamp(4rem, 7vw, 7rem) auto 0; font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 600; line-height: 1.08; }
@keyframes studio-motion-loop { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .journey-step--adjustments .journey-copy{ grid-column: 1 / 5; }
  .method-constants--integrated .method-constants-cards{ grid-template-columns: 1fr 1fr; }
  .method-constants--integrated .method-constants-cards article:last-child{ grid-column: 2; }
}

@media (max-width: 620px) {
  .hero-v2 h1{ justify-content: center; margin-top: 62px; font-size: clamp(5.8rem, 26vw, 8.2rem); }
  .hero-logo-motion{ margin-inline: auto !important; }
  .process-journey--v3 .journey-step{ min-height: 700px; padding-block: 70px; }
  .process-journey--v3 .journey-step::before{ inset-block: 0; border-radius: 0; }
  .method-constants--integrated{ padding-inline: 14px; }
  .method-constants--integrated h2{ font-size: clamp(4.5rem, 21vw, 6.4rem); }
  .method-constants--integrated .method-constants-cards{ display: grid; grid-template-columns: 1fr; }
  .method-constants--integrated .method-constants-cards article,
.method-constants--integrated .method-constants-cards article:nth-child(2),
.method-constants--integrated .method-constants-cards article:nth-child(3){ grid-column: auto; min-height: 255px; transform: none; }
  .studio-editorial-hero h1{ font-size: clamp(4.4rem, 20vw, 6.2rem); white-space: normal; }
  .studio-specialty-copy{ right: 0 !important; bottom: 66px !important; max-width: 17ch !important; font-size: clamp(1.25rem, 6vw, 1.8rem) !important; }
  .studio-info-heading h2{ font-size: clamp(4.8rem, 22vw, 7rem); }
  .studio-voices{ margin-inline: 14px; padding: 28px 18px 36px; border-radius: 22px 7px; }
  .studio-voices-nav h2{ margin-bottom: 28px; font-size: clamp(2.7rem, 13vw, 4rem); }
  .studio-voice-display{ min-height: 440px; padding: 28px; transform: none; }
  .studio-voice-display blockquote{ max-width: 13ch; margin-top: 66px; font-size: clamp(2rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .studio-motion-track{ animation-play-state: paused; }
}

/* V5 — quieter typography,
transparent navigation and project objects */
.site-header::before{ opacity: 0; backdrop-filter: none; }
.site-header.is-scrolled::before{
  background: color-mix(in srgb, var(--paper) 67%, transparent);
  opacity: 1;
  backdrop-filter: blur(12px) saturate(.9);
  -webkit-backdrop-filter: blur(12px) saturate(.9);
}
.site-header.is-scrolled.is-dark::before{ background: color-mix(in srgb, var(--ink) 66%, transparent); }
.site-header::before{
  right: auto;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}
.site-header{ text-shadow: 0 1px 18px rgb(248 247 243 / 55%); }
.site-header.is-dark{ text-shadow: 0 1px 18px rgb(48 39 35 / 55%); }
.desktop-nav a[aria-current="page"]:not(.header-contact){
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.desktop-nav a[aria-current="page"]::after{
  display: block;
  height: 2px;
  background: var(--slate);
  transform: scaleX(1);
}

.project-ticker{ touch-action: pan-y; }
.project-ticker-track,
.ticker-card{ pointer-events: auto; }
.ticker-card{ -webkit-user-drag: none; }
.ticker-card img,
.ticker-card span,
.ticker-card small{ pointer-events: none; -webkit-user-drag: none; }


/* Case study — editorial dossier with tactile metadata */
.case-hero--v3::before{
  position: absolute;
  inset: 0 50% 0;
  width: 100vw;
  background-image: linear-gradient(rgb(48 39 35 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(48 39 35 / 4%) 1px, transparent 1px);
  background-size: 80px 80px;
  content: "";
  transform: translateX(-50%);
}
.case-title h1{ font-family: var(--accent); font-weight: 700; }
.case-hero-notes{
  position: relative;
  z-index: 5;
  display: grid;
  grid-column: 9 / 13;
  grid-row: 2;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-self: start;
  margin-top: 24px;
}
.case-hero-notes p{ display: grid; min-height: 86px; align-content: space-between; margin: 0; padding: 12px; border: 1px solid rgb(48 39 35 / 12%); background: var(--chalk); box-shadow: 0 12px 30px rgb(48 39 35 / 7%); transform: rotate(-1deg); }
.case-hero-notes p:nth-child(2){ background: var(--mist); transform: rotate(1.2deg); }
.case-hero-notes p:nth-child(3){ grid-column: 2; background: color-mix(in srgb, var(--sage) 65%, var(--paper)); transform: rotate(-.6deg); }
.case-hero-notes span{ color: var(--muted); font-size: .6rem; text-transform: uppercase; }
.case-hero-notes b{ font-size: .76rem; line-height: 1.2; }
.case-hero--v3 .case-cover{ clip-path: polygon(0 8%, 30% 8%, 34% 0, 100% 0, 100% 100%, 0 100%); }
.case-overview--v3 .case-meta{ position: sticky; top: 115px; align-self: start; }
.case-gallery--v3 .case-shot{ box-shadow: 0 22px 65px rgb(48 39 35 / 9%); }
.case-gallery--v3 .case-shot--portrait{ border-radius: 45% 45% 8px 8px; }
.case-gallery--v3 .case-shot--landscape{ clip-path: polygon(0 0, 92% 0, 100% 13%, 100% 100%, 0 100%); }
.case-result--v3 blockquote{ font-family: var(--accent); font-weight: 600; }
.next-project--v4{ overflow: hidden; padding: 0 max(20px, calc((100vw - 1520px) / 2)); background: var(--paper); }
.next-project--v4 a{
  position: relative;
  display: grid;
  min-height: 260px;
  grid-template-columns: 150px 1fr 76px;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--ink);
}
.next-project-label{ color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.next-project--v4 strong{ position: relative; z-index: 3; font-family: var(--accent); font-size: clamp(3.5rem, 8vw, 9rem); letter-spacing: -.075em; line-height: .8; }
.next-project-arrow{ position: relative; z-index: 4; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; transition: background 350ms ease, color 350ms ease, transform 600ms var(--ease); }
.next-project--v4 figure{ position: absolute; z-index: 2; top: 50%; right: 10%; overflow: hidden; width: 230px; aspect-ratio: 1.25; margin: 0; border-radius: 8px; opacity: 0; pointer-events: none; transform: translate(25%, -42%) rotate(7deg) scale(.78); transition: opacity 300ms ease, transform 700ms var(--ease); }
.next-project--v4 figure img{ width: 100%; height: 100%; object-fit: cover; }
.next-project--v4 a:hover .next-project-arrow{ background: var(--ink); color: var(--paper); transform: rotate(45deg); }
.next-project--v4 a:hover figure{ opacity: 1; transform: translate(0, -50%) rotate(2deg) scale(1); }
.journey-step--adjustments .adjustment-evolution{ grid-column: 6 / 13; }
.adjustment-evolution{
  --adjustment-progress: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1.36;
  border: 2px solid var(--primary);
  border-radius: 12px;
  background: var(--chalk);
  box-shadow: 0 28px 75px rgb(48 39 35 / 14%);
  transform: rotate(1deg);
}
.adjustment-canvas{ position: absolute; inset: 0 0 58px; overflow: hidden; background: var(--chalk); }
.adjustment-frame{ display: block; width: 100%; height: 100%; object-fit: contain; }
.adjustment-sweep{
  position: absolute;
  z-index: 3;
  inset: -2px;
  display: grid;
  overflow: hidden;
  place-items: center;
  visibility: hidden;
  background: var(--primary);
  pointer-events: none;
  transform: translateX(-110%);
}
.adjustment-sweep::before{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgb(215 255 63 / 82%) 0 1.6px, transparent 1.9px);
  background-position: center;
  background-size: 11px 11px;
  content: "";
  opacity: .28;
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 48%, transparent 95%);
  mask-image: linear-gradient(90deg, transparent 5%, #000 48%, transparent 95%);
}
.adjustment-sweep img{
  position: relative;
  z-index: 1;
  width: clamp(54px, 8vw, 82px);
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.adjustment-evolution.is-switching .adjustment-sweep{ visibility: visible; }
.adjustment-toolbar{
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 13px 8px 10px;
  border-top: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(10px);
}
.adjustment-status{ display: flex; min-width: 0; align-items: center; gap: 10px; margin: 0; }
.adjustment-status strong{
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--chalk);
  font-family: var(--accent);
  font-size: .63rem;
}
.adjustment-status span{ overflow: hidden; color: var(--ink); font-family: var(--accent); font-size: .7rem; font-weight: 750; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.adjustment-progress{ position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 17px; }
.adjustment-progress::before,
.adjustment-progress::after{ position: absolute; top: 50%; left: 15px; width: calc(100% - 30px); height: 2px; content: ""; transform: translateY(-50%); transform-origin: left; }
.adjustment-progress::before{ background: color-mix(in srgb, var(--primary) 18%, var(--line)); }
.adjustment-progress::after{ background: var(--primary); transform: translateY(-50%) scaleX(var(--adjustment-progress)); transition: transform 520ms var(--ease); }
.adjustment-progress button{
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, var(--line));
  border-radius: 50%;
  background: var(--chalk);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--accent);
  font-size: .54rem;
  font-weight: 750;
  transition: border-color 260ms ease, background 260ms ease, color 260ms ease, transform 360ms var(--ease), box-shadow 360ms var(--ease);
}
.adjustment-progress button:hover{ border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.adjustment-progress button:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }
.adjustment-progress button[aria-current="step"]{ border-color: var(--primary); background: var(--interaction); color: var(--primary); box-shadow: 0 0 0 4px rgb(215 255 63 / 24%); transform: scale(1.08); }
.adjustment-evolution[data-stage="1"]{ --adjustment-progress: .5; }
.adjustment-evolution[data-stage="2"]{ --adjustment-progress: 1; }
.adjustment-evolution[data-stage="1"] .adjustment-progress button:nth-child(1),
.adjustment-evolution[data-stage="2"] .adjustment-progress button:nth-child(-n+2){ border-color: var(--primary); background: var(--primary); color: var(--chalk); }
.adjustment-evolution[data-stage="1"] .adjustment-progress button:nth-child(2),
.adjustment-evolution[data-stage="2"] .adjustment-progress button:nth-child(3){ background: var(--interaction); color: var(--primary); }
.process-journey--v3 > .method-constants--integrated{ width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.method-constants--integrated .method-constants-heading{ padding-left: clamp(70px, 18vw, 300px); }
.expertise-menu li{ position: relative; padding-right: 28px; cursor: default; transition: padding 360ms var(--ease), color 240ms ease; }
.expertise-menu li::after{ position: absolute; right: 0; content: "↗"; opacity: 0; transform: translate(-8px, 5px) rotate(-35deg); transition: opacity 240ms ease, transform 420ms var(--ease); }
.expertise-menu li:hover,
.expertise-menu li.is-active{ padding-left: 10px; color: var(--ink); }
.expertise-menu li:hover::after,
.expertise-menu li.is-active::after{ opacity: 1; transform: translate(0, 0) rotate(0); }
.expertise-preview .studio-material{ background: var(--chalk); }
.expertise-preview .studio-material::before{ position: absolute; inset: 18% 12%; border: 1px solid rgb(48 39 35 / 22%); border-radius: 50%; content: ""; transform: rotate(calc(-12deg + var(--expertise-index, 0) * 3deg)) scale(calc(.72 + var(--expertise-index, 0) * .018)); transition: transform 650ms var(--ease), border-radius 650ms var(--ease); }
.expertise-preview .studio-material::after{ position: absolute; right: 8%; bottom: 9%; width: 42%; aspect-ratio: 1; border-radius: 58% 42% 46% 54%; background: var(--mist); content: ""; mix-blend-mode: multiply; transform: translate(calc(var(--expertise-index, 0) * -2px), calc(var(--expertise-index, 0) * -1px)) rotate(calc(var(--expertise-index, 0) * 7deg)); transition: transform 650ms var(--ease), background 450ms ease; }
.expertise-preview[data-active="logo"] .studio-material::after,
.expertise-preview[data-active="packaging"] .studio-material::after,
.expertise-preview[data-active="motion"] .studio-material::after{ background: var(--terra); }
.expertise-preview[data-active="type"] .studio-material::after,
.expertise-preview[data-active="platform"] .studio-material::after,
.expertise-preview[data-active="illustration"] .studio-material::after{ background: var(--sage); }
.expertise-preview .studio-material span{ z-index: 3; font-family: var(--accent); font-weight: 700; }
.expertise-preview .studio-material i{ z-index: 2; }

/* Contact — the floating idea is now a real image */
.contact-aside::before{ display: none; }

@media (max-width: 900px) {
  .case-hero-notes{ grid-column: 8 / 13; }
  .journey-step--adjustments .adjustment-evolution{ grid-column: 5 / 9; }
  .method-constants--integrated .method-constants-heading{ padding-left: 100px; }
}

@media (max-width: 620px) {
  .site-header{ width: calc(100% - 28px); }


  .case-hero-notes{ position: absolute; top: 92px; right: 0; display: flex; width: 70%; gap: 5px; }
  .case-hero-notes p{ min-height: 66px; flex: 1; padding: 8px; }
  .case-hero-notes p:nth-child(3){ display: none; }
  .case-hero--v3 .case-cover{ clip-path: polygon(0 6%, 30% 6%, 36% 0, 100% 0, 100% 100%, 0 100%); }
  .next-project--v4 a{ min-height: 210px; grid-template-columns: 1fr 58px; gap: 12px; }
  .next-project-label{ position: absolute; top: 22px; left: 0; }
  .next-project--v4 strong{ font-size: clamp(3.2rem, 16vw, 5rem); }
  .next-project-arrow{ width: 54px; height: 54px; }
  .next-project--v4 figure{ display: none; }
  .journey-step--adjustments .adjustment-evolution{ width: calc(100% - 4px); margin-top: 50px; aspect-ratio: .86; }
  .method-constants--integrated .method-constants-heading{ padding-left: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .adjustment-sweep{ display: none; }
  .adjustment-progress::after,
  .adjustment-progress button{ transition: none; }
}

/* V6 — bespoke process objects and delivery polish */
.desktop-nav a[aria-current="page"]::after{ background: var(--mist); }
.desktop-nav .header-contact[aria-current="page"]::after{ display: none; }

/* Method: three tangible directions made from one generated triptych. */
.exploration-directions{
  position: relative;
  width: min(100%, 510px);
  aspect-ratio: 1.28;
  transform-style: preserve-3d;
}
.exploration-directions figure{
  position: absolute;
  top: 9%;
  left: 20%;
  overflow: hidden;
  width: 46%;
  aspect-ratio: .7;
  margin: 0;
  border: 6px solid var(--chalk);
  border-radius: 5px;
  background: var(--chalk);
  box-shadow: 0 24px 55px rgb(48 39 35 / 16%);
  transform-origin: 50% 112%;
  transition: transform 700ms var(--ease), filter 450ms ease;
}
.exploration-directions figure:nth-child(1){ transform: translate3d(-25%, 5%, -20px) rotate(-12deg); }
.exploration-directions figure:nth-child(2){ z-index: 2; transform: translate3d(29%, -5%, 35px) rotate(4deg); }
.exploration-directions figure:nth-child(3){ z-index: 3; transform: translate3d(75%, 9%, 80px) rotate(12deg); }
.exploration-directions img{ display: block; width: 100%; height: calc(100% - 34px); object-fit: cover; }
.exploration-directions figcaption{ display: flex; height: 34px; align-items: center; padding-inline: 9px; color: var(--ink); font-size: .58rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.exploration-directions:hover figure:nth-child(1){ transform: translate3d(-52%, 2%, 0) rotate(-6deg); }
.exploration-directions:hover figure:nth-child(2){ transform: translate3d(29%, -10%, 35px) rotate(0); }
.exploration-directions:hover figure:nth-child(3){ transform: translate3d(110%, 3%, 0) rotate(6deg); }

.object-system{ overflow: hidden; border-radius: 5px; box-shadow: 0 26px 60px rgb(48 39 35 / 14%); }
.object-system span{ position: relative; font-family: var(--sans); }
.object-system .system-type{ overflow: hidden; font-family: "Unbounded", var(--accent); font-size: clamp(2.35rem, 4.2vw, 4rem); font-weight: 500; letter-spacing: -.12em; }
.system-type::after{ position: absolute; right: 11px; bottom: 8px; content: "TYPE"; font-family: var(--sans); font-size: .48rem; letter-spacing: .12em; }
.object-system .system-mark svg{ width: 58%; fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.object-system .system-mark circle{ fill: var(--mist); stroke-width: 4; }
.object-system .system-icon{ font-size: clamp(2.2rem, 4vw, 4rem); }
.object-system .system-icon i{ transition: transform 600ms var(--ease); }
.object-system:hover .system-icon i{ transform: rotate(90deg) scale(.88); }
.object-system .system-index{ display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--accent); font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 700; letter-spacing: -.14em; line-height: .8; -webkit-text-stroke: 1px var(--ink); color: transparent; }
.object-system .system-index small{ margin: 0 0 10px; font-family: var(--sans); font-size: .48rem; font-weight: 600; letter-spacing: .16em; -webkit-text-stroke: 0; color: var(--ink); }

.object-launch{
  position: relative;
  display: grid;
  overflow: visible;
  width: min(100%, 370px);
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #554942 0 11%, var(--ink) 58%, #211b18 100%);
  box-shadow: 0 34px 80px rgb(15 11 10 / 32%), inset -24px -20px 40px rgb(0 0 0 / 24%), inset 14px 14px 30px rgb(255 255 255 / 7%);
  transform: rotate(0) perspective(800px) rotateX(12deg);
  transform-style: preserve-3d;
}
.object-launch > small{ position: absolute; z-index: 4; bottom: 9%; left: 9%; color: var(--paper); font-size: .7rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }

.method-constants--integrated h2{ max-width: 9ch; }
.method-constants--integrated .method-constants-heading h2 > span{ color: inherit; }
.method-final-dot{ display: inline-block; width: .13em; aspect-ratio: 1; margin-left: .025em; border-radius: 50%; background: var(--mist); box-shadow: 0 0 0 5px rgb(246 182 183 / 14%); vertical-align: .04em; }

/* Studio: an open white room with lateral cards and editorial testimonial sheets. */
.studio-editorial-hero{ min-height: 116svh; width: 100%; padding-inline: max(20px, calc((100vw - 1520px) / 2)); overflow: clip; }
.studio-editorial-hero h1{ grid-column: 1 / 10; }
.studio-voices{ background: transparent; box-shadow: none; }
.studio-voices::before{ position: absolute; inset: 10% 0 4% 27%; border-radius: 80px 12px 80px 12px; background: color-mix(in srgb, var(--mist) 50%, var(--paper)); content: ""; transform: rotate(-1deg); }
.studio-voices-nav,
.voice-scroll-track{ position: relative; z-index: 2; }
.studio-voice-display{ min-height: 540px; padding: clamp(28px, 4vw, 56px); border: 0; border-radius: 4px 72px 4px 4px; background: var(--chalk); box-shadow: 0 35px 90px rgb(48 39 35 / 14%); transform: rotate(1.1deg); }
.studio-voice-display::before{ content: none; }
.voice-card-top{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 15px; }
.voice-card-top > span{ position: static; display: block; color: var(--terra); font-size: clamp(3rem, 6vw, 6rem); font-weight: 700; letter-spacing: -.1em; }
.voice-card-top b{ font-size: .58rem; letter-spacing: .13em; }
.studio-voice-display blockquote{ max-width: 14ch; margin: clamp(55px, 8vw, 105px) 0 60px; font-size: clamp(2.1rem, 4vw, 4.5rem); line-height: .94; }
.studio-voice-display > p{ max-width: 32ch; }




/* Contact: a draggable note replaces the decorative stock image. */
.contact-aside-copy h1{ max-width: 7.5ch; }
.contact-aside-copy h1 span,
.contact-aside-copy h1 em{ display: block; }
.contact-aside-copy > p:last-child{ max-width: 33ch; }
.contact-postit{ position: absolute; z-index: 4; top: 38%; right: 8%; display: grid; width: min(31%, 225px); aspect-ratio: .92; gap: 12px; align-content: space-between; padding: 18px; border: 0; border-radius: 4px 34px 4px 4px; background: var(--mist); box-shadow: 0 24px 65px rgb(48 39 35 / 18%); text-align: left; touch-action: none; transform: translate(var(--note-x, 0), var(--note-y, 0)) rotate(4deg); transition: box-shadow 240ms ease, rotate 400ms var(--ease); user-select: none; }
.contact-postit::after{ position: absolute; right: 0; bottom: 0; width: 36px; aspect-ratio: 1; background: linear-gradient(135deg, rgb(48 39 35 / 13%) 0 49%, var(--paper) 51%); content: ""; }
.contact-postit > span{ font-size: .55rem; font-weight: 700; letter-spacing: .12em; }
.contact-postit strong{ max-width: 8ch; font-family: var(--accent); font-size: clamp(1.45rem, 2.5vw, 2.3rem); line-height: .96; }
.contact-postit small{ font-size: .58rem; font-weight: 650; }
.contact-postit > i{ position: absolute; top: 17px; right: 17px; font-size: 1.2rem; }
.contact-postit.is-dragging{ box-shadow: 0 38px 90px rgb(48 39 35 / 25%); rotate: -3deg; cursor: grabbing; }
@media (max-width: 900px) {
  .exploration-directions{ width: 360px; }
  .studio-editorial-hero{ min-height: 110svh; }
  .studio-voices::before{ inset-left: 8%; }
}
@media (max-width: 620px) {
  .exploration-directions{ width: calc(100vw - 58px); margin-top: 48px; }
  .exploration-directions figure{ width: 49%; }
  .exploration-directions figure:nth-child(1){ transform: translate(-12%, 5%) rotate(-8deg); }
  .exploration-directions figure:nth-child(2){ transform: translate(35%, -3%) rotate(2deg); }
  .exploration-directions figure:nth-child(3){ transform: translate(82%, 8%) rotate(8deg); }
  .exploration-directions:hover figure:nth-child(1),
.exploration-directions:hover figure:nth-child(2),
.exploration-directions:hover figure:nth-child(3){ transform: none; }
  .object-system{ width: calc(100vw - 62px); margin-top: 45px; }
  .object-launch{ width: min(82vw, 310px); margin-top: 48px; }
  .method-final-dot{ box-shadow: 0 0 0 3px rgb(246 182 183 / 14%); }
  .studio-editorial-hero{ min-height: 112svh; padding-inline: 14px; }
  .studio-motion-note{ contain: layout paint; }
  .studio-voices::before{ inset: 16% 0 2% 9%; border-radius: 40px 8px; }
  .studio-voice-display{ min-height: 430px; padding: 25px; border-radius: 3px 48px 3px 3px; }
  .studio-voice-display blockquote{ margin-top: 52px; font-size: clamp(1.8rem, 8.5vw, 2.7rem); }



  .contact-postit{ position: relative; top: auto; right: auto; width: min(62vw, 230px); margin: 52px 0 78px auto; }
}

/* V7 — final interaction and responsive polish */
:root{ --baby-blue: #f6b6b7; }

/* One blue full stop anchors both scales of the brand. */
.wordmark > span{ display: inline-flex; align-items: baseline; }
.hero-logo-motion::after{ display: inline-block; width: .16em; aspect-ratio: 1; margin-left: .045em; border-radius: 50%; background: var(--baby-blue); content: ""; vertical-align: .05em; }


/* Method: shorter entry,
a legible launch,
and a true terminal point. */
.method-line-hero{ min-height: 76svh; padding-top: 128px; padding-bottom: 48px; }
.method-line-hero > .eyebrow{ top: 128px; }
.process-journey--v3 .journey-step{ grid-template-rows: 1fr; }
.process-journey--v3 .journey-number{ position: absolute; top: 45px; left: 45px; }
.process-journey--v3 .journey-copy,
.process-journey--v3 .journey-object{ grid-row: 1; align-self: center; }
.process-journey--v3 [data-progress-dot]{ fill: var(--baby-blue); stroke: var(--paper); stroke-width: 4; filter: drop-shadow(0 0 8px rgb(246 182 183 / 55%)); }
.object-launch{ position: relative; display: grid; overflow: visible; width: min(100%, 440px); aspect-ratio: 1.25; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; perspective: 1000px; }
.launch-window{ position: relative; z-index: 4; overflow: hidden; width: 340px; max-width: 84%; aspect-ratio: 1.33; border: 1px solid rgb(250 248 243 / 30%); border-radius: 13px; background: var(--paper); color: var(--ink); box-shadow: 0 38px 85px rgb(0 0 0 / 34%); animation: launch-window 5s var(--ease) infinite; transform-origin: 50% 100%; }
.launch-window-bar{ display: flex; height: 34px; gap: 5px; align-items: center; padding-inline: 11px; border-bottom: 1px solid var(--line); }
.launch-window-bar i{ width: 6px; aspect-ratio: 1; border-radius: 50%; background: var(--terra); }
.launch-window-bar i:nth-child(2){ background: var(--sage); }.launch-window-bar i:nth-child(3){ background: var(--baby-blue); }
.launch-window-bar span{ margin-left: 8px; color: var(--muted); font-size: .52rem; }
.launch-window-body{ position: relative; display: grid; height: calc(100% - 34px); place-items: center; }
.launch-window-body b{ max-width: 5ch; font-family: var(--accent); font-size: clamp(2.4rem, 4vw, 4.2rem); letter-spacing: -.08em; line-height: .84; text-align: center; }
.launch-window-body > span{ position: absolute; right: 15px; bottom: 15px; width: 40%; height: 5px; border-radius: 99px; background: var(--line); }
.launch-window-body > span i{ display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--baby-blue); animation: launch-load 5s var(--ease) infinite; transform-origin: left; }
.launch-window-body small{ position: absolute; bottom: 25px; left: 15px; font-weight: 700; }
.launch-live{ position: absolute; z-index: 7; top: 8%; right: 1%; display: flex; gap: 7px; align-items: center; padding: 9px 12px; border-radius: 99px; background: var(--baby-blue); color: var(--ink); box-shadow: 0 12px 30px rgb(0 0 0 / 24%); font-size: .62rem; font-weight: 800; letter-spacing: .1em; animation: launch-live 5s var(--ease) infinite; }
.launch-live i{ width: 7px; aspect-ratio: 1; border-radius: 50%; background: #27875a; box-shadow: 0 0 0 5px rgb(39 135 90 / 13%); }
@keyframes launch-load { 0%, 12% { transform: scaleX(.08); } 68%, 100% { transform: scaleX(1); } }
@keyframes launch-window { 0%, 10% { opacity: .5; transform: translateY(18px) rotateX(7deg) scale(.96); } 45%, 100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); } }
@keyframes launch-live { 0%, 63% { opacity: 0; transform: translateY(9px) scale(.8); } 75%, 100% { opacity: 1; transform: translateY(0) scale(1); } }
.method-final-dot{ width: .18em; margin-left: .055em; border: 2px solid var(--baby-blue); background: var(--paper); box-shadow: 0 0 0 7px rgb(246 182 183 / 12%); vertical-align: .025em; transition: background 420ms ease, box-shadow 520ms ease, transform 520ms var(--ease); }
.method-final-dot.is-complete{ background: var(--baby-blue); box-shadow: 0 0 0 10px rgb(246 182 183 / 18%); transform: scale(1.08); }

/* Compact,
self-playing testimonials. */
.studio-voices{ position: relative; min-height: auto; grid-template-columns: repeat(12, 1fr); align-items: center; margin-block: clamp(70px, 9vw, 140px); padding-block: clamp(55px, 7vw, 100px); }
.studio-voices::before{ inset: 4% 0 4% 32%; border-radius: 48px 8px; }
.studio-voices-nav{ position: relative; top: auto; grid-column: 1 / 5; }
.studio-voices-nav h2{ margin-bottom: 35px; }
.voice-scroll-track{ position: relative; top: auto; grid-column: 6 / 13; min-height: 0; }
.voice-scroll-track .studio-voice-display{ position: relative; top: auto; min-height: clamp(390px, 42vw, 510px); }
.studio-voice-display blockquote{ margin: clamp(42px, 6vw, 72px) 0 42px; font-size: clamp(2rem, 3.4vw, 3.8rem); }
.voice-progress i{ transform: scaleX(0); transition: none; }
.voice-progress i.is-playing{ animation: voice-autoplay 5.6s linear forwards; }
@keyframes voice-autoplay { to { transform: scaleX(1); } }

/* Contact: generous copy,
a real yellow note and method-like form progress. */
.contact-aside{ overflow: visible; justify-content: center; }
.contact-aside-copy{ max-width: min(44vw, 720px); transform: translateY(-5vh); }
.contact-aside-copy h1{ max-width: 8.2ch; margin-bottom: 38px; font-size: clamp(4.5rem, 7.3vw, 8.5rem); }
.contact-aside-copy > p:last-child{ max-width: 38ch; font-size: clamp(.95rem, 1.1vw, 1.16rem); }
.contact-postit{ top: auto; right: 6%; bottom: 6%; display: grid; width: min(34%, 245px); padding: 20px; border-radius: 3px 32px 3px 3px; background: #f2df78; box-shadow: 0 28px 70px rgb(48 39 35 / 20%); transform: translate(var(--note-x, 0), var(--note-y, 0)) rotate(3deg); transition: box-shadow 240ms ease; }
.contact-postit::after{ z-index: 5; width: 34px; background: linear-gradient(135deg, rgb(96 76 35 / 18%) 0 49%, var(--paper) 51%); pointer-events: none; }
.contact-postit > span,
.contact-postit strong,
.contact-postit small{ position: relative; z-index: 1; pointer-events: none; }
.contact-postit strong{ max-width: 9ch; color: #4b3a31; }
.contact-postit canvas{ position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border-radius: inherit; cursor: crosshair; touch-action: none; }
.postit-drag-handle{ position: absolute; z-index: 7; right: -2px; bottom: -2px; display: grid; width: 42px; aspect-ratio: 1; place-items: center; border: 0; border-radius: 0 0 3px; background: transparent; color: #4b3a31; cursor: grab; touch-action: none; }
.postit-drag-handle:active{ cursor: grabbing; }
.contact-postit.is-dragging{ box-shadow: 0 42px 95px rgb(48 39 35 / 28%); }
.form-navigation .button{ transition: background 300ms ease, color 300ms ease, border-color 300ms ease, transform 420ms var(--ease); }
.form-navigation .button:hover,
.form-navigation .button:focus-visible{ border-color: var(--baby-blue); background: var(--baby-blue); color: var(--ink); transform: translateY(-2px); }
.form-progress > i{ --form-progress: .2; overflow: visible; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--baby-blue) 28%, var(--line)); }
.form-progress > i b{ border-radius: inherit; background: var(--baby-blue); box-shadow: 0 0 12px rgb(246 182 183 / 48%); }
.form-progress > i::after{ position: absolute; z-index: 2; top: 50%; left: calc(var(--form-progress) * 100%); width: 11px; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--baby-blue); content: ""; transform: translate(-50%, -50%); transition: left 650ms var(--ease), transform 350ms var(--ease); }

@media (max-width: 900px) {
  .studio-voices-nav{ grid-column: 1 / 5; }
  .voice-scroll-track{ grid-column: 5 / 13; }
  .contact-aside-copy{ max-width: 76%; }
}

@media (max-width: 620px) {
  .hero-logo-motion::after{ width: .14em; }









  .method-line-hero{ min-height: 78svh; padding: 118px 14px 46px; }
  .method-line-hero > .eyebrow{ position: static; }
  .process-journey--v3 .journey-number{ top: 24px; left: 18px; }
  .object-launch{ width: calc(100vw - 56px); }
  .launch-window{ width: 340px; max-width: 90%; }
  .method-final-dot{ width: .2em; box-shadow: 0 0 0 4px rgb(246 182 183 / 14%); }
  .studio-voices{ display: block; margin: 55px 14px 80px; padding: 28px 18px 36px; }
  .studio-voices::before{ inset: 24% 0 0 8%; }
  .voice-scroll-track{ margin-top: 28px; }
  .voice-scroll-track .studio-voice-display{ min-height: 400px; }
  .contact-aside{ min-height: 90svh; justify-content: flex-start; overflow: hidden; }
  .contact-aside-copy{ max-width: 100%; transform: none; }
  .contact-aside-copy h1{ font-size: clamp(4rem, 19vw, 5.7rem); }
  .contact-postit{ position: absolute; right: 20px; bottom: 34px; width: min(58vw, 220px); margin: 0; }
  .form-progress > i{ height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .launch-window,
.launch-live,
.launch-window-body > span i,
.voice-progress i{ animation: none; }
  .launch-window-body > span i{ transform: scaleX(1); }
  .launch-live{ opacity: 1; transform: none; }
}

/* V8 — each process object tells one small,
readable story. */
.process-journey--v3 [data-progress-dot]{ opacity: 1; transition: none; }
.process-journey--v3 [data-progress-dot].is-merged{ opacity: 0; }

.object-dialogue{ position: relative; gap: 28px; }
.object-dialogue span{
  position: relative;
  font-family: var(--accent);
  font-size: 1.35rem;
  font-weight: 650;
  box-shadow: 0 14px 32px rgb(48 39 35 / 9%);
  animation: dialogue-one 6s var(--ease) infinite;
}
.object-dialogue span::before{ display: inline-block; width: 8px; aspect-ratio: 1; margin-right: 10px; border-radius: 50%; background: var(--terra); content: ""; }
.object-dialogue span:last-child{ animation-name: dialogue-two; }
.object-dialogue span:last-child::before{ background: var(--baby-blue); }
.object-dialogue i{ position: relative; overflow: visible; width: 62%; background: var(--line); transform: rotate(-12deg); }
.object-dialogue i::after{ position: absolute; top: 50%; left: 0; width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--baby-blue); box-shadow: 0 0 0 5px rgb(246 182 183 / 20%); content: ""; animation: dialogue-signal 6s var(--ease) infinite; transform: translate(-50%, -50%); }
@keyframes dialogue-one { 0%, 10%, 42%, 100% { opacity: 1; transform: translateX(0); } 52%, 82% { opacity: .5; transform: translateX(-7px); } }
@keyframes dialogue-two { 0%, 34% { opacity: .45; transform: translateX(8px); } 48%, 86%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes dialogue-signal { 0%, 12% { left: 0; } 45%, 60% { left: 100%; } 88%, 100% { left: 0; } }

.object-direction{ display: grid; width: min(100%, 340px); aspect-ratio: .88; align-content: space-between; padding: 28px; border: 1px solid rgb(48 39 35 / 20%); border-radius: 8px; background: var(--chalk); box-shadow: 0 25px 65px rgb(48 39 35 / 12%); transform: rotate(3deg); }
.object-direction > small{ font-size: .58rem; font-weight: 700; letter-spacing: .13em; }
.object-direction > strong{ max-width: 8ch; font-family: var(--accent); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: .94; }
.direction-map{ position: relative; width: 100%; height: 130px; }
.direction-map::before{ position: absolute; inset: 10% 2% 8%; border: 1px dashed rgb(48 39 35 / 24%); border-radius: 50%; content: ""; transform: rotate(-9deg); }
.direction-map i{ position: absolute; top: 50%; left: 12%; width: 76%; height: 1px; background: var(--line); transform: rotate(-17deg); }
.direction-map i:nth-child(2){ left: 47%; width: 1px; height: 72%; transform: translateY(-50%) rotate(18deg); }
.direction-map span{ position: absolute; top: 18%; left: 16%; display: grid; width: 54px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--baby-blue); box-shadow: 0 12px 28px rgb(48 39 35 / 15%); font-size: 1.45rem; animation: find-direction 6s var(--ease) infinite; }
@keyframes find-direction { 0%, 15% { top: 56%; left: 13%; transform: rotate(-32deg) scale(.78); } 58%, 82% { top: 9%; left: 70%; transform: rotate(0) scale(1); } 100% { top: 56%; left: 13%; transform: rotate(-32deg) scale(.78); } }

.exploration-directions figure:nth-child(1){ animation: direction-card-one 8s var(--ease) infinite; }
.exploration-directions figure:nth-child(2){ animation: direction-card-two 8s var(--ease) infinite; }
.exploration-directions figure:nth-child(3){ animation: direction-card-three 8s var(--ease) infinite; }
.exploration-directions:hover figure{ animation: none; }
@keyframes direction-card-one { 0%, 100% { transform: translate3d(-25%, 5%, -20px) rotate(-12deg); } 50% { transform: translate3d(-34%, 2%, 0) rotate(-8deg); } }
@keyframes direction-card-two { 0%, 100% { transform: translate3d(29%, -5%, 35px) rotate(4deg); } 50% { transform: translate3d(29%, -9%, 50px) rotate(1deg); } }
@keyframes direction-card-three { 0%, 100% { transform: translate3d(75%, 9%, 80px) rotate(12deg); } 50% { transform: translate3d(86%, 4%, 90px) rotate(8deg); } }

.object-system > span{ animation: system-cell 8s var(--ease) infinite; }
.object-system > span:nth-child(2){ animation-delay: 1s; }
.object-system > span:nth-child(3){ animation-delay: 2s; }
.object-system > span:nth-child(4){ animation-delay: 3s; }
.object-system .system-mark path{ stroke-dasharray: 190; stroke-dashoffset: 190; animation: system-mark-draw 8s var(--ease) infinite; }
@keyframes system-cell { 0%, 12%, 100% { background: var(--chalk); } 25%, 45% { background: color-mix(in srgb, var(--baby-blue) 32%, var(--chalk)); } 58% { background: var(--chalk); } }
@keyframes system-mark-draw { 0%, 16% { stroke-dashoffset: 190; } 48%, 86%, 100% { stroke-dashoffset: 0; } }

/* The mountain sequence crossfades at the loop seam,
so the frame never goes blank. */
@keyframes mountain-v1{ 0%, 28% { opacity: 1; transform: scale(1); } 35%, 91% { opacity: 0; transform: scale(1.025); } 97%, 100% { opacity: 1; transform: scale(1); } }
@keyframes mountain-v2 { 0%, 27% { opacity: 0; } 34%, 61% { opacity: 1; transform: scale(1); } 68%, 100% { opacity: 0; transform: scale(1.025); } }
@keyframes mountain-v3 { 0%, 60% { opacity: 0; } 68%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.025); } }

.method-final-dot{ background: var(--paper); }
.method-final-dot.is-complete{ animation: method-dot-arrival 620ms var(--ease) both; }
@keyframes method-dot-arrival { 0% { background: var(--paper); transform: scale(.7); } 55% { background: var(--baby-blue); transform: scale(1.26); } 100% { background: var(--baby-blue); transform: scale(1.08); } }

/* The wordmark dot sits on the same visual baseline as the K. */
.hero-logo-motion::after{ vertical-align: -.015em; }

/* A folder has a back,
its contents{ background: transparent; box-shadow: none; }


/* The note starts beside the introduction and keeps the lower copy unobstructed. */
.contact-postit{ top: 102px; right: 5%; bottom: auto; width: min(29%, 210px); }
.contact-postit strong{ max-width: 10ch; font-family: var(--hand); font-size: clamp(1.8rem, 2.65vw, 2.55rem); font-weight: 600; letter-spacing: -.025em; line-height: .88; transform: rotate(-2deg); }

/* Case imagery follows a strict editorial grid; the project hero itself stays untouched. */
.case-hero--v3{ grid-template-rows: auto 1fr auto; padding-bottom: 0; }
.case-scroll-cue{ position: relative; right: auto; bottom: auto; grid-column: 5 / 13; grid-row: 3; justify-content: space-between; padding: 15px 0 17px; border-top: 1px solid var(--ink); background: transparent; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; transition: color 240ms ease; }
.case-scroll-cue i{ transition: transform 480ms var(--ease); }
.case-scroll-cue:hover{ color: var(--slate); }
.case-scroll-cue:hover i{ transform: translateY(5px); }
.case-gallery--v3{ grid-template-rows: auto auto auto auto; gap: clamp(26px, 3.4vw, 58px); }
.case-gallery--v3 .case-shot{ border-radius: 4px; clip-path: none; box-shadow: none; }
.case-gallery--v3 .case-shot img{ transform: scale(1); object-position: center; }
.case-gallery--v3 .case-shot:hover img{ transform: scale(1.015); }
.case-gallery--v3 .case-shot--opening{ grid-column: 1 / 13; grid-row: 1; min-height: 74svh; }
.case-gallery--v3 .case-shot--portrait{ grid-column: 1 / 6; grid-row: 2 / 4; align-self: stretch; aspect-ratio: auto; min-height: 920px; border-radius: 4px; }
.case-gallery--v3 .decision-note{ grid-column: 7 / 13; grid-row: 2; align-self: end; margin: 0; padding: 24px 0 34px; }
.case-gallery--v3 .decision-note p{ max-width: 18ch; margin-top: clamp(45px, 7vw, 95px); }
.case-gallery--v3 .case-shot--landscape{ grid-column: 7 / 13; grid-row: 3; align-self: stretch; aspect-ratio: 1.28; min-height: 0; clip-path: none; }
.case-gallery--v3 .case-shot--closing{ grid-column: 2 / 12; grid-row: 4; min-height: 72svh; margin-top: clamp(45px, 7vw, 100px); }

@media (max-width: 620px) {
  .object-dialogue{ width: 100%; }
  .object-direction{ width: 100%; min-height: 260px; }
  .exploration-directions figure{ animation: none !important; }
  .contact-postit{ position: relative; top: auto; right: auto; bottom: auto; width: min(52vw, 195px); margin: 28px 0 42px auto; }
  .contact-postit strong{ font-size: 1.75rem; }
  .case-hero--v3{ padding-bottom: 82px; }
  .case-hero--v3 .case-cover{ bottom: 82px; }
  .case-scroll-cue{ position: absolute; right: 0; bottom: 17px; left: 18%; display: flex; padding: 14px 0; }
  .case-gallery--v3{ display: grid; grid-template-columns: 1fr; gap: 18px; }
  .case-gallery--v3 .case-shot--opening,
.case-gallery--v3 .case-shot--portrait,
.case-gallery--v3 .case-shot--landscape,
.case-gallery--v3 .case-shot--closing{ grid-column: 1; grid-row: auto; width: 100%; min-height: 0; margin: 0 0 18px; aspect-ratio: .84; }
  .case-gallery--v3 .case-shot--opening,
.case-gallery--v3 .case-shot--closing{ aspect-ratio: .76; }
  .case-gallery--v3 .decision-note{ grid-column: 1; grid-row: auto; margin: 54px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .object-dialogue span,
.object-dialogue i::after,
.direction-map span,
.exploration-directions figure,
.object-system > span,
.object-system .system-mark path{ animation: none; }
  .object-system .system-mark path{ stroke-dashoffset: 0; }
}

/* V9 — final interaction and responsive refinements. */
.process-journey--v3 [data-progress-path]{ transition: none; }
.process-journey--v3 [data-progress-path]{ stroke-linecap: butt; }

/* A clear back-and-forth: one message is active while the other receives it. */
.object-dialogue{ gap: 24px; transform: rotate(-2deg); }
.object-dialogue span{ display: grid; gap: 4px; border-radius: 24px 24px 24px 6px; animation-duration: 5.2s; }
.object-dialogue span:last-child{ border-radius: 24px 24px 6px; }
.object-dialogue span small{ color: var(--muted); font-family: var(--sans); font-size: .5rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.object-dialogue span b{ font-family: var(--accent); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1; }
.object-dialogue span::after{ position: absolute; bottom: -7px; left: 13px; width: 15px; height: 15px; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--chalk); content: ""; transform: skewY(-35deg); }
.object-dialogue span:last-child::after{ right: 13px; left: auto; border-right: 1px solid var(--ink); border-left: 0; background: var(--mist); transform: skewY(35deg); }
.object-dialogue i{ width: 68%; background: color-mix(in srgb, var(--ink) 28%, transparent); transform: none; }
.object-dialogue i::before{ position: absolute; top: 50%; left: 50%; color: var(--ink); content: "→"; font-size: 1rem; font-style: normal; animation: dialogue-arrow 5.2s var(--ease) infinite; transform: translate(-50%, -52%); }
.object-dialogue i::after{ animation-duration: 5.2s; }
@keyframes dialogue-one { 0%, 12%, 38%, 100% { opacity: 1; transform: translateX(0) scale(1); } 52%, 84% { opacity: .42; transform: translateX(-7px) scale(.96); } }
@keyframes dialogue-two { 0%, 35% { opacity: .42; transform: translateX(8px) scale(.96); } 50%, 83% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: .42; transform: translateX(8px) scale(.96); } }
@keyframes dialogue-signal { 0%, 10% { left: 0; } 42%, 58% { left: 100%; } 90%, 100% { left: 0; } }
@keyframes dialogue-arrow { 0%, 42% { transform: translate(-50%, -52%) rotate(0); } 58%, 100% { transform: translate(-50%, -52%) rotate(180deg); } }

/* The direction object is now a compass,
not an abstract orbit. */
.direction-map{ position: relative; width: 172px; height: 172px; justify-self: center; border: 1px solid rgb(48 39 35 / 26%); border-radius: 50%; background: radial-gradient(circle, var(--chalk) 0 12%, transparent 13% 100%); box-shadow: inset 0 0 0 12px rgb(246 182 183 / 8%); }
.direction-map::before{ position: absolute; inset: 7px auto auto 50%; border: 0; color: var(--muted); content: "N"; font-size: .58rem; font-weight: 750; transform: translateX(-50%); }
.direction-map::after{ position: absolute; inset: 16%; border: 1px dashed rgb(48 39 35 / 18%); border-radius: 50%; content: ""; }
.direction-map i{ position: absolute; z-index: 1; top: 50%; left: 12%; width: 76%; height: 1px; background: rgb(48 39 35 / 16%); transform: none; }
.direction-map i:nth-child(2){ top: 12%; left: 50%; width: 1px; height: 76%; transform: none; }
.direction-map span{ z-index: 3; top: 50%; left: 50%; width: 72px; background: var(--baby-blue); color: transparent; animation: compass-calibrate 6s var(--ease) infinite; transform: translate(-50%, -50%) rotate(26deg); }
.direction-map span::before{ position: absolute; bottom: 50%; left: 50%; width: 2px; height: 56px; border-radius: 99px 99px 0 0; background: var(--ink); content: ""; transform: translateX(-50%); transform-origin: bottom; }
.direction-map span::after{ position: absolute; top: 11px; left: 50%; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--terra); content: ""; transform: translateX(-50%); }
@keyframes compass-calibrate { 0%, 10% { transform: translate(-50%, -50%) rotate(-48deg); } 35% { transform: translate(-50%, -50%) rotate(42deg); } 54% { transform: translate(-50%, -50%) rotate(18deg); } 68%, 86% { transform: translate(-50%, -50%) rotate(26deg); } 100% { transform: translate(-50%, -50%) rotate(-48deg); } }

/* Give the hero punctuation a visible breath after the K. */
.hero-logo-motion::after{ margin-left: .145em; letter-spacing: 0; }

/* The contact introduction and the draggable note now have distinct columns. */
@media (min-width: 901px){
  .contact-shell { grid-template-columns: minmax(0, 55%) minmax(0, 45%); }
  .contact-aside { padding-right: clamp(26px, 3vw, 48px); }
  .contact-aside-copy { width: 72%; max-width: 760px; transform: translateY(-3vh); }
  .contact-aside-copy h1 { max-width: 9.5ch; font-size: clamp(4.4rem, 6.3vw, 7.5rem); }
  .contact-aside-copy > p:last-child { width: min(100%, 46ch); max-width: none; }
  .contact-postit { top: 126px; right: 4%; width: min(33%, 230px); }
  .contact-panel { padding-inline: clamp(28px, 4vw, 70px); }
}
.contact-direct [data-copy-email]{ gap: 8px; padding-inline: 13px; }
.contact-direct [data-copy-email] i{ font-size: 1rem; }
.contact-path-options button{ display: inline-flex; gap: 7px; align-items: center; }

/* Mobile navigation uses one quiet white dot,
including on Contact. */
.mobile-menu nav a[href*="contact"]{ width: auto; margin-top: 0; padding: 10px 0; border-radius: 0; background: transparent; color: inherit; }
.mobile-menu nav a[aria-current="page"]::after{ background: var(--chalk); box-shadow: 0 0 0 4px rgb(255 255 255 / 12%); }

/* Indent the final invitation so it belongs to the editorial grid. */
.process-page .page-cta{ display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.process-page .page-cta > .eyebrow{ grid-column: 1 / 4; }
.process-page .page-cta > a{ grid-column: 3 / 13; margin-top: 34px; }
.process-page .page-cta > a span{ max-width: 9ch; }

@media (max-width: 900px) {
  .contact-shell{ display: block; }
  .contact-aside-copy{ max-width: 100%; }
}

@media (max-width: 620px) {
  .hero-logo-motion::after{ margin-left: .14em; }
  .mobile-menu nav a[href*="contact"]{ padding: 8px 0; }
  .process-page .page-cta{ display: block; }
  .process-page .page-cta > a{ margin-top: 26px; }
  .process-page .page-cta > a span{ max-width: 8.5ch; }
  .direction-map{ width: 150px; height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .direction-map span,
.object-dialogue i::before{ animation: none; }
  .direction-map span{ transform: translate(-50%, -50%) rotate(26deg); }
}

/* V10 — quieter method details,
useful project filters and a closer studio portrait. */

/* The travelling signal already explains the exchange; the arrow was redundant. */
.object-dialogue i::before{ display: none; }

/* A recognisable compass: black points north,
red points south. */
.direction-map::before{ display: none; }
.direction-map > small{ position: absolute; z-index: 4; left: 50%; color: var(--ink); font-family: var(--sans); font-size: .58rem; font-weight: 800; line-height: 1; transform: translateX(-50%); }
.direction-map > .compass-north{ top: 8px; }
.direction-map > .compass-south{ bottom: 8px; color: #d83f34; }
.direction-map span{ width: 58px; background: var(--baby-blue); animation-name: compass-calibrate-real; transform: translate(-50%, -50%) rotate(0); }
.direction-map span::before{ bottom: 50%; width: 6px; height: 62px; border-radius: 4px 4px 0 0; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.direction-map span::after{ top: 50%; left: 50%; width: 6px; height: 62px; border-radius: 0 0 4px 4px; background: #d83f34; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); }
@keyframes compass-calibrate-real { 0%, 10% { transform: translate(-50%, -50%) rotate(-34deg); } 36% { transform: translate(-50%, -50%) rotate(24deg); } 58% { transform: translate(-50%, -50%) rotate(-9deg); } 72%, 88% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(-34deg); } }

/* LIVE appears as a small status,
not as a second visual headline. */
.launch-live{ top: 10%; right: 3%; gap: 5px; padding: 6px 9px; font-size: .48rem; letter-spacing: .08em; animation-name: launch-live-small; }
.launch-live i{ width: 5px; box-shadow: 0 0 0 3px rgb(39 135 90 / 13%); animation: launch-live-blink 1.1s ease-in-out infinite; }
@keyframes launch-live-small { 0%, 68% { opacity: 0; filter: blur(4px); transform: translateY(7px) scale(.62); } 77% { opacity: 1; filter: blur(0); transform: translateY(-2px) scale(1.08); } 84%, 100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes launch-live-blink { 50% { opacity: .38; transform: scale(.75); } }


/* A text-led portrait with three lightweight,
tactile perspectives. */
.studio-about{ --about-index: 0; position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.studio-about::before{ position: absolute; top: 12%; right: -8%; width: 38vw; aspect-ratio: 1; border: 1px solid rgb(246 182 183 / 18%); border-radius: 50%; content: ""; transform: translate(calc(var(--about-index) * -5%), calc(var(--about-index) * 8%)); transition: transform 850ms var(--ease); }
.studio-about-heading{ position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-bottom: clamp(70px, 9vw, 135px); }
.studio-about-heading .eyebrow{ grid-column: 1 / 4; color: var(--baby-blue); }
.studio-about-heading h2{ grid-column: 4 / 13; max-width: 11ch; margin: 0; font-family: var(--accent); font-size: clamp(3.8rem, 7.4vw, 8.8rem); letter-spacing: -.075em; line-height: .88; }
.studio-about-interaction{ position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: stretch; }
.studio-about-tabs{ grid-column: 1 / 5; display: grid; align-content: end; }
.studio-about-tabs button{ display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 17px 0; border: 0; border-top: 1px solid rgb(250 248 243 / 24%); background: transparent; color: #c9c1bc; text-align: left; transition: color 240ms ease, padding 380ms var(--ease); }
.studio-about-tabs button:last-child{ border-bottom: 1px solid rgb(250 248 243 / 24%); }
.studio-about-tabs button span{ font-size: .65rem; }
.studio-about-tabs button b{ font-size: clamp(1rem, 1.6vw, 1.35rem); }
.studio-about-tabs button:hover,
.studio-about-tabs button[aria-selected="true"]{ padding-left: 14px; color: var(--paper); }
.studio-about-tabs button[aria-selected="true"] span{ color: var(--baby-blue); }
.studio-about-stories{ grid-column: 6 / 13; }
.studio-about-stories article{ display: grid; min-height: clamp(330px, 35vw, 520px); align-content: space-between; padding: clamp(28px, 4vw, 58px); border-radius: 54px 10px 54px 10px; background: var(--baby-blue); color: var(--ink); box-shadow: 0 34px 90px rgb(0 0 0 / 24%); }
.studio-about-stories article[hidden]{ display: none; }
.studio-about-stories article.is-active{ animation: studio-about-arrive 620ms var(--ease) both; }
.studio-about-stories article > span{ font-size: .66rem; font-weight: 750; letter-spacing: .1em; }
.studio-about-stories article p{ max-width: 28ch; margin: auto 0 0 auto; font-size: clamp(1.45rem, 2.7vw, 3.15rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.03; }
@keyframes studio-about-arrive { from { opacity: .25; transform: translateY(18px) rotate(.6deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

/* The floating Instagram control uses the studio accent on interaction. */
.social-dock a:hover{ background: var(--baby-blue); color: var(--ink); }

@media (max-width: 900px) {



  .studio-about-heading,
.studio-about-interaction{ grid-template-columns: repeat(8, 1fr); }
  .studio-about-heading .eyebrow{ grid-column: 1 / 3; }
  .studio-about-heading h2{ grid-column: 3 / 9; }
  .studio-about-tabs{ grid-column: 1 / 4; }
  .studio-about-stories{ grid-column: 4 / 9; }
}

@media (max-width: 620px) {





  .studio-about{ padding-inline: 20px; }
  .studio-about-heading,
.studio-about-interaction{ display: block; }
  .studio-about-heading h2{ font-size: clamp(3.3rem, 15vw, 5.2rem); }
  .studio-about-tabs{ margin-bottom: 32px; }
  .studio-about-stories article{ min-height: 390px; padding: 28px 24px; border-radius: 34px 8px; }
  .studio-about-stories article p{ font-size: clamp(1.55rem, 7vw, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .direction-map span{ animation: none; transform: translate(-50%, -50%) rotate(0); }
  .launch-live,
.launch-live i,
.studio-about-stories article.is-active{ animation: none; }
}

/* V11 — small consistency pass across the home,
process and studio pages. */
.home-page .contact-path-options button{
  color: var(--ink);
  cursor: pointer;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, transform 320ms var(--ease);
}
.home-page .contact-path-options button:hover,
.home-page .contact-path-options button:focus-visible{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

/* The launch status behaves like a precise product indicator,
not a decorative sticker. */
.launch-live{
  top: 8%;
  right: 2%;
  overflow: hidden;
  gap: 6px;
  padding: 7px 10px 7px 8px;
  border: 1px solid rgb(246 182 183 / 78%);
  background: rgb(250 248 243 / 94%);
  color: var(--ink);
  box-shadow: 0 10px 28px rgb(0 0 0 / 20%), inset 0 0 0 1px rgb(255 255 255 / 55%);
  font-size: .5rem;
  letter-spacing: .13em;
  backdrop-filter: blur(10px);
}
.launch-live::after{
  position: absolute;
  inset: -30% auto -30% -45%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgb(246 182 183 / 62%), transparent);
  content: "";
  animation: launch-live-sheen 5s var(--ease) infinite;
  transform: skewX(-18deg);
}
.launch-live i{
  position: relative;
  z-index: 1;
  width: 6px;
  background: #27875a;
  box-shadow: 0 0 0 3px rgb(39 135 90 / 12%);
}
.launch-live span{ position: relative; z-index: 1; }
@keyframes launch-live-sheen {
  0%, 76% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  80% { opacity: 1; }
  92%, 100% { opacity: 0; transform: translateX(520%) skewX(-18deg); }
}

/* These three promises should feel responsive while preserving their staggered composition. */
.method-constants--integrated .method-constants-cards article{
  transition: background 360ms ease, border-color 360ms ease, color 360ms ease, box-shadow 420ms ease, transform 480ms var(--ease);
}
.method-constants--integrated .method-constants-cards article:hover{
  border-color: var(--baby-blue);
  background: var(--baby-blue);
  color: var(--ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / 18%);
  transform: translateY(-8px);
}
.method-constants--integrated .method-constants-cards article:nth-child(2):hover{ transform: translateY(34px); }
.method-constants--integrated .method-constants-cards article:hover span,
.method-constants--integrated .method-constants-cards article:hover p{ color: var(--ink); }

/* The studio portrait now continues the Information section instead of interrupting it. */
.studio-information + .studio-about{
  border-top: 1px solid var(--line);
  background: var(--chalk);
  color: var(--ink);
}
.studio-information + .studio-about::before{
  top: 8%;
  right: -12%;
  border: 0;
  background: var(--baby-blue);
  opacity: .32;
  filter: blur(1px);
}
.studio-information + .studio-about .studio-about-heading{ margin-bottom: clamp(48px, 6vw, 86px); }
.studio-information + .studio-about .studio-about-heading .eyebrow{ color: var(--slate); }
.studio-information + .studio-about .studio-about-heading h2{
  max-width: 15ch;
  font-size: clamp(3.4rem, 6vw, 7rem);
}
.studio-information + .studio-about .studio-about-interaction{
  padding: clamp(22px, 3vw, 42px);
  border: 1px solid rgb(48 39 35 / 10%);
  border-radius: 36px 8px 36px 8px;
  background: color-mix(in srgb, var(--baby-blue) 45%, var(--paper));
  box-shadow: 0 28px 80px rgb(48 39 35 / 9%);
}
.studio-information + .studio-about .studio-about-tabs button{
  border-color: rgb(48 39 35 / 18%);
  color: rgb(48 39 35 / 58%);
}
.studio-information + .studio-about .studio-about-tabs button:hover,
.studio-information + .studio-about .studio-about-tabs button[aria-selected="true"]{ color: var(--ink); }
.studio-information + .studio-about .studio-about-tabs button[aria-selected="true"] span{ color: var(--slate); }
.studio-information + .studio-about .studio-about-stories article{
  min-height: clamp(300px, 30vw, 440px);
  border: 1px solid rgb(48 39 35 / 10%);
  background: var(--paper);
  box-shadow: 0 20px 52px rgb(48 39 35 / 10%);
}

@media (max-width: 620px) {
  .studio-information + .studio-about .studio-about-interaction{ padding: 18px; border-radius: 26px 6px; }
  .studio-information + .studio-about .studio-about-stories article{ min-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .launch-live::after{ animation: none; }
}

/* V12 — shared navigation feedback and generous end-of-page invitations. */
.language-switch button{
  padding: 5px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, opacity 220ms ease, transform 300ms var(--ease);
}
.language-switch button:hover,
.language-switch button:focus-visible{
  background: var(--baby-blue);
  color: var(--ink);
  opacity: 1;
  transform: translateY(-1px);
}
.language-switch button[aria-pressed="true"]{ opacity: 1; }

.sound-toggle,
.site-header .sound-toggle{
  border-radius: 50%;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, opacity 220ms ease, transform 380ms var(--ease);
}
.sound-toggle:hover,
.sound-toggle:focus-visible,
.site-header.is-dark .sound-toggle:hover,
.site-header.is-dark .sound-toggle:focus-visible{
  background: var(--baby-blue);
  color: var(--ink);
  opacity: 1;
  transform: rotate(-8deg) scale(1.07);
}

/* Every element in the editorial footer now acknowledges the pointer. */
.footer-v2-mark{
  transition: color 220ms ease, transform 380ms var(--ease);
}
.footer-v2-mark:hover,
.footer-v2-mark:focus-visible{
  color: var(--slate);
  transform: translateY(-2px) rotate(-1deg);
}
.footer-v2-main nav a{
  position: relative;
  padding-block: 6px;
  transition: color 220ms ease, transform 320ms var(--ease);
}
.footer-v2-main nav a::after{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 99px;
  background: var(--baby-blue);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 360ms var(--ease);
}
.footer-v2-main nav a:hover,
.footer-v2-main nav a:focus-visible{ transform: translateY(-2px); }
.footer-v2-main nav a:hover::after,
.footer-v2-main nav a:focus-visible::after{ transform: scaleX(1); transform-origin: left; }
.footer-v2-contact{
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  transition: background 240ms ease, color 240ms ease, transform 360ms var(--ease);
}
.footer-v2-contact:hover,
.footer-v2-contact:focus-visible{
  background: var(--baby-blue);
  color: var(--ink);
  transform: translateY(-2px);
}
.footer-v2-contact i{ transition: transform 380ms var(--ease); }
.footer-v2-contact:hover i,
.footer-v2-contact:focus-visible i{ transform: translate(2px, -2px) rotate(8deg); }

.compact-footer > a:not(.footer-legal a),
.compact-footer .footer-legal a{
  transition: color 220ms ease, transform 320ms var(--ease);
}
.compact-footer > a:not(.footer-legal a):hover,
.compact-footer > a:not(.footer-legal a):focus-visible,
.compact-footer .footer-legal a:hover,
.compact-footer .footer-legal a:focus-visible{
  color: var(--slate);
  transform: translateY(-2px);
}

/* The full closing panel is a single target; the circle carries the visual response. */
.page-cta{ position: relative; cursor: pointer; }
.page-cta > a::before{
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}
.page-cta > a span,
.page-cta > a b{ position: relative; z-index: 2; }
.page-cta > a b{
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 400ms ease, transform 500ms var(--ease);
}
.page-cta:hover > a b,
.page-cta:focus-within > a b,
.page-cta > a:hover b{
  border-color: var(--baby-blue);
  background: var(--baby-blue);
  color: var(--ink);
  box-shadow: 0 0 0 8px rgb(246 182 183 / 16%);
  transform: rotate(45deg) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .language-switch button,
.sound-toggle,
.footer-v2-mark,
.footer-v2-main nav a,
.footer-v2-contact,
.page-cta > a b{ transform: none !important; }
}

/* V13 — the studio sits on the page itself; only Myrak's soft geometry surrounds it. */
.studio-information + .studio-about{
  isolation: isolate;
  border-top: 0;
  background: transparent;
}
.studio-information + .studio-about::before{
  z-index: -1;
  background: var(--baby-blue);
  opacity: .28;
}
.studio-information + .studio-about::after{
  position: absolute;
  z-index: -1;
  bottom: 7%;
  left: -12%;
  width: 46vw;
  height: 18vw;
  border-bottom: 2px solid rgb(110 139 148 / 30%);
  border-radius: 0 0 52% 48%;
  content: "";
  pointer-events: none;
  transform: rotate(-7deg);
}

/* The hero dot is a real,
elastic control while keeping the original punctuation alignment. */
.hero-logo-motion{ position: relative; }
.hero-logo-motion::after{ display: none; }
.hero-logo-motion::before{
  position: absolute;
  z-index: 1;
  top: 57%;
  left: calc(100% - .08em);
  width: var(--dot-distance, 0px);
  height: 2px;
  border-radius: 99px;
  background: rgb(110 139 148 / 42%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--dot-angle, 0deg));
  transform-origin: left center;
  transition: opacity 180ms ease;
}
.hero-dot-balloon{
  position: absolute;
  z-index: 2;
  /* The dot shares the K's visual baseline, as it does in the supplied artwork. */
  top: 63%;
  left: calc(100% + .04em);
  display: inline-block;
  width: .16em;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--baby-blue);
  box-shadow: 0 0 0 0 rgb(246 182 183 / 20%);
  color: inherit;
  cursor: grab;
  font: inherit;
  touch-action: none;
  vertical-align: 0;
  will-change: transform;
  appearance: none;
  transition: box-shadow 240ms ease, filter 240ms ease;
}
.hero-dot-balloon:hover,
.hero-dot-balloon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .035em rgb(246 182 183 / 24%);
  filter: saturate(1.08);
}
.hero-dot-balloon.is-dragging{
  cursor: grabbing;
  box-shadow: 0 0 0 .05em rgb(246 182 183 / 20%), 0 .035em .08em rgb(48 39 35 / 18%);
}

/* LIVE remains discreet: the status dot carries more presence than the label. */
.launch-live{ gap: 7px; padding: 7px 10px 7px 8px; font-size: .4rem; letter-spacing: .12em; }
.launch-live i{ width: 9px; box-shadow: 0 0 0 4px rgb(39 135 90 / 14%); }

@media (max-width: 620px) {
  .brand-logo{ width: 86px; }
  .hero-logo-motion{ width: 80vw; }
  .hero-dot-balloon{ width: .14em; left: calc(100% + .035em); }
  .studio-information + .studio-about::after{ width: 82vw; height: 32vw; }
}

/* The HTML text remains a resilient fallback,
but the painted mark is always the supplied artwork. */
.wordmark > span:first-child{
  display: block;
  width: 102px;
  aspect-ratio: 286 / 87;
  background: currentColor;
  font-size: 0;
  mask-image: url("./assets/brand/myrak-logo.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("./assets/brand/myrak-logo.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.wordmark > small{ display: none; }
@media (max-width: 620px) { .wordmark > span:first-child{ width: 86px; } }

/* SVG images are deliberately used instead of external masks so local file previews stay reliable. */
img.brand-logo,
img.footer-brand-logo,
img.footer-v2-brand-logo,
img.intro-brand-logo,
img.transition-brand-logo,
img.hero-brand-logo{
  height: auto;
  background: transparent !important;
  object-fit: contain;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
img.hero-brand-logo{ width: 100%; }

.site-header.is-dark img.brand-logo,
.contact-page .compact-footer img.footer-brand-logo{ filter: brightness(0) invert(1); }

/* The footer keeps the copyright readable while using the same master artwork. */
.compact-footer > p:first-child{ display: flex; align-items: center; gap: 8px; }
.footer-brand-logo{ width: 78px; aspect-ratio: 286 / 87; opacity: .82; transition: opacity 240ms ease, transform 360ms var(--ease); }
.compact-footer > p:first-child:hover .footer-brand-logo{ opacity: 1; transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .hero-logo-motion::before{ display: none; }
}

/* V14 — quieter details: no tether,
no stacked panels,
and clearer numbered navigation. */
.hero-logo-motion::before{ display: none; }

.launch-live{
  gap: 8px;
  padding: 7px 10px 7px 8px;
  font-size: .31rem;
  letter-spacing: .16em;
}
.launch-live i{
  width: 11px;
  background: #238252;
  box-shadow: 0 0 0 4px rgb(35 130 82 / 16%);
}

.studio-information + .studio-about .studio-about-interaction{
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.studio-information + .studio-about .studio-about-tabs{
  position: relative;
  display: grid;
  width: min(100%, 760px);
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 clamp(34px, 5vw, 62px) auto;
}
.studio-information + .studio-about .studio-about-tabs::before{
  position: absolute;
  top: 20px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: rgb(48 39 35 / 18%);
  content: "";
  pointer-events: none;
}
.studio-information + .studio-about .studio-about-tabs button,
.studio-information + .studio-about .studio-about-tabs button:last-child{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(48 39 35 / 52%);
  text-align: center;
  cursor: pointer;
}
.studio-information + .studio-about .studio-about-tabs button span{
  position: relative;
  z-index: 1;
  display: grid;
  width: 40px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(48 39 35 / 24%);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: .62rem;
  transition: background 260ms ease, border-color 260ms ease, color 260ms ease, transform 420ms var(--ease), box-shadow 320ms ease;
}
.studio-information + .studio-about .studio-about-tabs button b{
  font-size: clamp(.72rem, 1.1vw, .9rem);
  font-weight: 650;
  transition: color 240ms ease;
}
.studio-information + .studio-about .studio-about-tabs button:hover,
.studio-information + .studio-about .studio-about-tabs button[aria-selected="true"]{ padding-left: 0; }
.studio-information + .studio-about .studio-about-tabs button:hover span,
.studio-information + .studio-about .studio-about-tabs button:focus-visible span{
  border-color: var(--slate);
  transform: translateY(-3px);
}
.studio-information + .studio-about .studio-about-tabs button[aria-selected="true"] span{
  border-color: var(--baby-blue);
  background: var(--baby-blue);
  color: var(--ink);
  box-shadow: 0 0 0 6px rgb(246 182 183 / 16%);
  transform: scale(1.08);
}
.studio-information + .studio-about .studio-about-tabs button[aria-selected="true"] b{ color: var(--ink); }
.studio-information + .studio-about .studio-about-stories{ width: min(100%, 980px); margin-left: auto; }
.studio-information + .studio-about .studio-about-stories article{
  min-height: clamp(280px, 27vw, 410px);
  border: 0;
  background: color-mix(in srgb, var(--baby-blue) 38%, var(--paper));
  box-shadow: none;
}

@media (max-width: 620px) {
  .studio-information + .studio-about .studio-about-tabs{ gap: 8px; margin-bottom: 30px; }
  .studio-information + .studio-about .studio-about-tabs button b{ font-size: .65rem; }
  .studio-information + .studio-about .studio-about-tabs button span{ width: 36px; }
  .studio-information + .studio-about .studio-about-stories article{ min-height: 310px; }
}

/* V15 — production details,
direct contact states and the Myrak mirage. */
.launch-live{
  gap: 8px;
  padding: 7px 10px 7px 8px;
  line-height: 1;
}
.launch-live span{
  position: relative;
  z-index: 1;
  font-size: 5px;
  font-weight: 850;
  letter-spacing: 1px;
  line-height: 1;
}
.launch-live i{
  width: 11px;
  flex: 0 0 11px;
}

.form-honeypot{
  position: fixed !important;
  top: -100vh !important;
  left: -100vw !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.form-privacy{ max-width: 58ch; margin: 30px 0 4px; color: var(--muted); font-size: .73rem; line-height: 1.5; }
.form-privacy a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-form[aria-busy="true"]{ cursor: wait; }
.contact-form button[disabled]{ cursor: wait; opacity: .7; }
.contact-form.is-sent .form-progress > i > b{ background: #238252; }

/* The form stays short,
but adapts when an existing website needs to be shared. */
.form-progress > span{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.form-progress > span b{ font-weight: 650; }
.website-question{ margin-top: 24px; }
.website-question legend{ margin-bottom: 10px; font-size: .78rem; font-weight: 700; }
.website-question .answer-card > input + span{ min-height: 58px; }
.website-url{ margin-top: 18px; }
.website-url[hidden]{ display: none !important; }
:is(.website-url, .call-window){
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 140ms var(--ease-out),
    transform 140ms var(--ease-out);
}
:is(.website-url, .call-window).is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-duration: 180ms;
}
@media (prefers-reduced-motion: reduce){
  :is(.website-url, .call-window),
  :is(.website-url, .call-window).is-visible{
    transform: none;
    transition: opacity 120ms var(--ease-out) !important;
  }
}

.error-page{ background: var(--paper); }
.error-page .site-header{ mix-blend-mode: normal; }
.error-page .site-header::before{
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  opacity: 1;
}
.error-404{
  --error-x: 0;
  --error-y: 0;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  isolation: isolate;
}
.error-404::before{
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(2 18 238 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(2 18 238 / 7%) 1px, transparent 1px);
  background-position: center;
  background-size: clamp(82px, 8vw, 142px) clamp(82px, 8vw, 142px);
  content: "";
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 82%, transparent 100%);
}
.error-hero{
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: clamp(112px, 10vw, 154px) clamp(20px, 4vw, 64px) 0;
  grid-template-rows: auto minmax(300px, 1fr) auto;
}
.error-topline{
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  font-size: clamp(.65rem, .85vw, .78rem);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.error-number{
  position: relative;
  display: grid;
  width: min(100%, 1720px);
  margin-inline: auto;
  grid-template-columns: .84fr 1fr .84fr;
  align-items: center;
  justify-items: center;
  padding-block: clamp(34px, 4vw, 70px);
}
.error-digit{
  font-family: var(--accent);
  font-size: clamp(11rem, 27vw, 31rem);
  font-weight: 800;
  letter-spacing: -.13em;
  line-height: .62;
  transform-origin: center;
  will-change: transform;
}
.error-digit--first{
  color: var(--primary);
  transform: translate(calc(var(--error-x) * -13px), calc(var(--error-y) * -8px)) rotate(-2deg);
}
.error-digit--last{
  color: transparent;
  -webkit-text-stroke: clamp(3px, .45vw, 8px) var(--primary);
  transform: translate(calc(var(--error-x) * 15px), calc(var(--error-y) * 9px)) rotate(2deg);
}
.error-zero{
  position: relative;
  display: grid;
  width: min(27vw, 445px);
  min-width: 210px;
  aspect-ratio: 1;
  border: clamp(24px, 3.25vw, 55px) solid var(--interaction);
  border-radius: 50%;
  place-items: center;
  box-shadow: 0 0 0 1px rgb(2 18 238 / 18%);
  transform: translate(calc(var(--error-x) * 7px), calc(var(--error-y) * 5px));
  transition: border-radius 600ms var(--ease), transform 650ms var(--ease);
}
.error-zero::before{
  position: absolute;
  inset: calc(0px - clamp(24px, 3.25vw, 55px));
  border: 1px solid rgb(2 18 238 / 34%);
  border-radius: inherit;
  content: "";
  opacity: 0;
  transform: scale(.94);
  animation: error-zero-pulse 4.8s var(--ease) infinite;
}
.error-zero-dot{
  width: clamp(24px, 3.2vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 8px rgb(2 18 238 / 9%);
  transform: translate(calc(var(--error-x) * 42px), calc(var(--error-y) * 42px));
  transition: transform 500ms var(--ease);
}
.error-content{
  display: grid;
  padding-block: clamp(28px, 4vw, 58px);
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: clamp(34px, 8vw, 130px);
  align-items: end;
}
.error-heading h1{
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.3rem, 7.5vw, 8.8rem);
  letter-spacing: -.075em;
  line-height: .84;
}
.error-heading h1 span,
.error-heading h1 em{ display: block; }
.error-heading h1 em{ color: var(--primary); }
.error-details{
  align-self: end;
  padding-bottom: .35rem;
}
.error-details > p{
  max-width: 43ch;
  margin-bottom: clamp(22px, 3vw, 34px);
  color: var(--muted);
  line-height: 1.55;
}
.error-actions{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.error-home{
  display: inline-flex;
  min-height: 58px;
  padding: 8px 9px 8px 22px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--paper);
  align-items: center;
  gap: 20px;
  font-weight: 750;
  transition: background 320ms ease, transform 420ms var(--ease);
}
.error-home i{
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--interaction);
  color: var(--ink);
  font-size: 1.1rem;
  place-items: center;
  transition: background 320ms ease, color 320ms ease, transform 420ms var(--ease);
}
.error-home:hover,
.error-home:focus-visible{
  background: var(--interaction);
  color: var(--ink);
  transform: translateY(-3px);
}
.error-home:hover i,
.error-home:focus-visible i{
  background: var(--paper);
  color: var(--primary);
  transform: rotate(45deg);
}
.error-work{
  position: relative;
  display: inline-flex;
  min-height: 58px;
  padding: 8px 9px 8px 22px;
  overflow: hidden;
  border: 1px solid rgb(2 18 238 / 26%);
  border-radius: 999px;
  align-items: center;
  gap: 20px;
  font-weight: 700;
  transition: border-color 320ms ease, color 320ms ease, transform 420ms var(--ease);
}
.error-work::before{
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 8px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--primary);
  content: "";
  transform: translateY(-50%);
  transition: width 520ms var(--ease);
}
.error-work span,
.error-work i{
  position: relative;
  z-index: 1;
}
.error-work i{
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  color: var(--paper);
  font-size: 1.05rem;
  place-items: center;
  transition: color 260ms ease, transform 420ms var(--ease);
}
.error-work:hover,
.error-work:focus-visible{
  border-color: var(--primary);
  color: var(--paper);
  transform: translateY(-3px);
}
.error-work:hover::before,
.error-work:focus-visible::before{
  width: calc(100% - 16px);
}
.error-work:hover i,
.error-work:focus-visible i{
  color: var(--interaction);
  transform: translateX(3px);
}
.error-motion-note{
  position: absolute;
  right: 0;
  bottom: clamp(14px, 2vw, 30px);
  display: flex;
  margin: 0;
  color: var(--primary);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .06em;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
@keyframes error-zero-pulse{
  0%, 70%, 100%{ opacity: 0; transform: scale(.94); }
  78%{ opacity: .72; }
  92%{ opacity: 0; transform: scale(1.18); }
}

@media (max-width: 760px){
  .error-hero{
    min-height: 100svh;
    padding-top: 105px;
    grid-template-rows: auto minmax(230px, auto) auto;
  }
  .error-number{
    grid-template-columns: .82fr 1fr .82fr;
    padding-block: clamp(48px, 15vw, 88px);
  }
  .error-digit{ font-size: clamp(8rem, 35vw, 15rem); }
  .error-zero{
    width: 28vw;
    min-width: 104px;
    border-width: clamp(15px, 4.4vw, 28px);
  }
  .error-zero::before{ inset: calc(0px - clamp(15px, 4.4vw, 28px)); }
  .error-zero-dot{
    width: clamp(18px, 5vw, 30px);
    box-shadow: 0 0 0 5px rgb(2 18 238 / 9%);
  }
  .error-content{
    padding-block: 30px 36px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .error-heading h1{
    max-width: 10ch;
    font-size: clamp(3.25rem, 15vw, 6rem);
  }
  .error-details{ padding-bottom: 0; }
  .error-details > p{ margin-bottom: 24px; }
  .error-motion-note{
    right: 50%;
    bottom: 18px;
    width: max-content;
    font-size: .62rem;
    transform: translateX(50%);
  }
}

/* V101 — the service art is rendered directly from the final PNG files. */
.studio-page .expertise-preview .studio-material{
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.2vw, 24px);
  background: var(--paper) !important;
}

.studio-page .expertise-preview [data-expertise-image]{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none !important;
  transform: none;
}

.studio-page .expertise-preview [data-expertise-image].is-entering{
  animation: none;
}

@media (max-width: 760px){
  .studio-page .studio-info-columns .expertise-preview{
    width: min(100%, 390px);
  }

  .studio-page .expertise-preview .studio-material{
    padding: 16px;
  }
}

@media (max-width: 430px){
  .error-topline{
    justify-content: flex-end;
    text-align: right;
  }
  .error-topline span:first-child{ display: none; }
  .error-number{ padding-block: 52px; }
  .error-actions{ align-items: stretch; flex-direction: column; }
  .error-home{ justify-content: space-between; }
  .error-work{ width: max-content; }
}

@media (prefers-reduced-motion: reduce){
  .error-digit,
  .error-zero,
  .error-zero-dot{ transform: none; transition: none; }
  .error-zero::before{ animation: none; }
  .error-work,
  .error-work::before,
  .error-work i{ transition: none; }
}

/* V16 — responsive method geometry and clearer closing details. */
.studio-information + .studio-about{
  overflow: visible;
}
.studio-information + .studio-about::before{
  top: 3%;
  right: 4%;
  width: clamp(320px, 48vw, 760px);
  opacity: .28;
}

.launch-window{ overflow: visible; }
.launch-window .launch-live{
  top: -15px;
  right: 14px;
  bottom: auto;
  gap: 8px;
  padding: 7px 11px 7px 8px;
}
.launch-window .launch-live span{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
}
.launch-window .launch-live i{ width: 11px; flex-basis: 11px; }

.process-journey--v3 [data-progress-dot]{
  display: block;
  transform: scale(var(--journey-dot-scale-x, 1), var(--journey-dot-scale-y, 1));
  transform-box: fill-box;
  transform-origin: center;
}
.journey-dot-trace{
  position: absolute;
  z-index: 5;
  display: block;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 29% 22%, rgb(255 255 255 / 28%), transparent 31%),
    linear-gradient(145deg, rgb(255 255 255 / 9%), rgb(246 182 183 / 4%) 52%, rgb(48 39 35 / 7%));
  box-shadow:
    inset -5px -7px 13px rgb(48 39 35 / 12%),
    0 8px 18px rgb(48 39 35 / 17%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity 90ms ease, transform 220ms var(--ease);
  -webkit-backdrop-filter: blur(5px) saturate(1.2) brightness(1.06);
  backdrop-filter: blur(5px) saturate(1.2) brightness(1.06);
}
.journey-dot-trace::after{
  position: absolute;
  inset: 3px 5px auto;
  height: 8px;
  border-top: 1px solid rgb(255 255 255 / 62%);
  border-radius: 50%;
  content: "";
  opacity: .72;
  transform: rotate(-12deg);
}
.journey-dot-trace.is-visible{
  opacity: .82;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 620px) {
  .studio-information + .studio-about{ overflow: visible; }
  .studio-information + .studio-about::before{
    top: 6%;
    right: 5%;
    width: min(88vw, 520px);
  }
  .studio-information + .studio-about .studio-about-tabs button{ min-height: 64px; touch-action: manipulation; }
  .launch-window .launch-live{ top: -13px; right: 10px; }
  .launch-window .launch-live span{ font-size: 11px; }
  .process-journey--v3 #etape-06 .journey-object{
    width: calc(100vw - 72px);
    margin: 55px 18px 0 36px;
  }
  .process-journey--v3 #etape-06 .object-launch{
    width: 100%;
    margin: 0;
  }
  .process-journey--v3 .journey-line{ overflow: visible; }
  .process-journey--v3 [data-progress-dot]{ display: block; }
}
.studio-person-code{
  border-color: rgb(200 255 46 / 92%);
  background: linear-gradient(145deg, rgb(31 37 38 / 91%), rgb(12 16 17 / 84%));
  box-shadow:
    0 20px 55px rgb(200 255 46 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 16%),
    inset 0 0 0 1px rgb(255 255 255 / 4%);
}
.studio-person-canvas{
  border-color: #ff4f9a;
  background: linear-gradient(145deg, rgb(255 255 255 / 68%), rgb(238 224 230 / 56%));
  box-shadow:
    0 20px 55px rgb(255 79 154 / 17%),
    inset 0 1px 0 rgb(255 255 255 / 88%),
    inset 0 0 0 1px rgb(255 255 255 / 28%);
}
.studio-person > p{
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 62%);
  box-shadow:
    0 12px 28px rgb(48 39 35 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 62%);
  backdrop-filter: blur(14px) saturate(138%);
  -webkit-backdrop-filter: blur(14px) saturate(138%);
}
.studio-voices-nav{
  position: relative;
  top: auto;
  display: flex;
  grid-column: 1;
  align-items: end;
  justify-content: space-between;
}
@keyframes voice-auto-pulse {
  0%, 100% { opacity: .36; }
  50% { opacity: 1; }
}

@media (max-width: 760px) {
  .studio-duo-copy .eyebrow{
    padding: 5px 7px;
    font-size: .48rem;
  }
  .studio-duo-intro{
    width: min(25ch, calc(100vw - 92px));
    font-size: .7rem;
  }
  .contact-postit strong{
    max-width: 11ch;
    font-size: .76rem;
    line-height: .9;
  }
  .studio-voices{
    display: grid;
    gap: 36px;
    margin: 58px 0 84px;
    padding: 58px 18px 72px;
  }
  .studio-voices-nav{
    display: flex;
    margin: 0;
    gap: 24px;
    align-items: end;
  }
  .studio-voices-nav h2{
    max-width: 7ch;
    font-size: clamp(2.6rem, 13vw, 3.4rem);
  }
  .studio-voices-tools{
    flex-direction: column-reverse;
    align-items: end;
  }
  .voices-hint span{
    display: none;
  }
  .voice-scroll-track{
    width: 100%;
    padding: 0 12px 18px 0;
  }
  .studio-voice-display{
    min-height: 390px;
    grid-template-columns: 1fr 58px;
    padding: 24px 20px 66px;
  }
  .voice-quote-mark{
    top: 58px;
    left: 20px;
  }
  .studio-voice-display blockquote{
    max-width: 17ch;
    margin-top: 68px;
    font-size: clamp(1.48rem, 7vw, 1.95rem);
  }
  .voice-card-action,
.studio-voice-display:hover .voice-card-action{
    right: 14px;
  }
}

/* V88 — white mobile navigation and one interaction language for contact actions. */
.action-morph-button{
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 40px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 9px 14px;
  border: 1px solid rgb(2 18 238 / 20%);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 22%)),
    rgb(2 18 238 / 5%);
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 76%),
    0 8px 22px rgb(2 18 238 / 7%);
  transition:
    border-color 260ms ease,
    color 260ms ease,
    box-shadow 480ms cubic-bezier(.22, 1, .36, 1),
    transform 520ms cubic-bezier(.22, 1, .36, 1);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
}

.action-morph-button::before{
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--primary);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1);
}

.action-morph-button:hover,
.action-morph-button:focus-visible{
  border-color: var(--primary);
  color: var(--paper) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 12px 28px rgb(2 18 238 / 15%);
  transform: translateY(-1px) scale(1.02);
}

.action-morph-button:hover::before,
.action-morph-button:focus-visible::before{
  transform: scaleX(1);
}

.action-morph-button:active{
  transform: scale(.96);
}

.action-morph-icon{
  position: relative;
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--interaction) 18%, transparent);
  transition:
    background-color 420ms cubic-bezier(.22, 1, .36, 1),
    transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.action-morph-icon > i{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  transform-origin: center;
  transition:
    opacity 240ms ease,
    transform 560ms cubic-bezier(.22, 1, .36, 1);
}

.action-morph-icon-default{
  opacity: 1;
  transform: scale(1);
}

.action-morph-icon-result{
  color: var(--interaction);
  opacity: 0;
  transform: translateY(5px) scale(.72) rotate(-8deg);
}

.action-morph-button:hover .action-morph-icon-default,
.action-morph-button:focus-visible .action-morph-icon-default{
  opacity: 0;
  transform: translateY(-4px) scale(.72) rotate(6deg);
}

.action-morph-button:hover .action-morph-icon-result,
.action-morph-button:focus-visible .action-morph-icon-result{
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

.action-morph-button:hover .action-morph-icon,
.action-morph-button:focus-visible .action-morph-icon{
  background: color-mix(in srgb, var(--interaction) 28%, transparent);
  transform: scale(1.06);
}

@media (max-width: 620px){
  .action-morph-button{
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce){
  .action-morph-button,
  .action-morph-button::before,
  .action-morph-icon > i,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-socials a,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-socials a::before{
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voices-hint i{
    animation: none;
  }
}

/* V28 - centered journey,
petrol Studio band,
and physical card shuffle. */
.footer-home-link{
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.footer-home-link:hover .footer-brand-logo,
.footer-home-link:focus-visible .footer-brand-logo{
  opacity: 1;
  transform: translateY(-1px);
}
.footer-v2-bottom .footer-brand-logo{
  width: 55px;
  height: auto;
}
.studio-motion-note{
  margin-top: 0;
  border-top: 1px solid rgb(246 182 183 / 18%);
  background: #2d4549;
  color: var(--paper);
}
.studio-motion-track{
  color: var(--baby-blue);
  opacity: .68;
}
.studio-motion-note > p{
  color: var(--paper);
}

.voice-scroll-track{
  position: relative;
}
.studio-voice-display{
  z-index: 3;
  transform: none;
}
.studio-voice-display.is-changing{
  animation: voice-card-stack-in 560ms var(--ease) both;
}
.studio-voice-display.is-changing blockquote,
.studio-voice-display.is-changing > p{
  animation: none;
}
.voice-card-ghost{
  position: absolute !important;
  z-index: 2;
  top: 0 !important;
  right: 30px;
  left: 0;
  width: auto !important;
  pointer-events: none;
  transform-origin: center;
}
.voice-card-ghost::before,
.voice-card-ghost::after{
  content: none;
}
.voice-card-ghost.is-shuffling-out{
  animation: voice-card-stack-away 640ms var(--ease) forwards;
}
@keyframes voice-card-stack-in {
  0% { transform: translate3d(-10px, -5px, 0) rotate(-.35deg) scale(.995); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes voice-card-stack-away {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  46% { opacity: 1; transform: translate3d(14px, 10px, 0) rotate(1deg) scale(.992); }
  100% { opacity: 0; transform: translate3d(30px, 25px, 0) rotate(2deg) scale(.978); }
}

@media (max-width: 760px) {
  .studio-duo-copy .eyebrow{
    padding: 0;
    font-size: .52rem;
  }
  .voice-card-ghost{
    right: 12px;
  }
  .studio-voice-display > p{
    max-width: calc(100% - 128px);
    font-size: .64rem;
    line-height: 1.25;
  }
}
@keyframes voice-card-stack-away-v2 {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  62% { opacity: 1; transform: translate3d(18px, 13px, 0) rotate(1.15deg) scale(.99); }
  100% { opacity: 0; transform: translate3d(31px, 26px, 0) rotate(2deg) scale(.978); }
}

/* V30 - four physical review cards rotating as one continuous stack. */
.voice-scroll-track{
  isolation: isolate;
  min-height: calc(clamp(360px, 34vw, 455px) + 34px);
}
.voice-scroll-track .voice-stack-card{
  position: absolute !important;
  top: 0 !important;
  right: 34px;
  left: 0;
  width: auto !important;
  margin: 0;
  opacity: 1;
  will-change: transform;
  transition: transform 520ms cubic-bezier(.22, .72, .2, 1), box-shadow 320ms ease;
}
.voice-scroll-track .voice-stack-card::before,
.voice-scroll-track .voice-stack-card::after{
  content: none !important;
}
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="2"]{ background: #ff4f9a; }
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="3"]{ background: #c8ff2e; }
.voice-stack-card[data-voice-slot="0"]{
  z-index: 4;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) rotate(0) scale(1);
}
.voice-stack-card[data-voice-slot="1"]{
  z-index: 3;
  pointer-events: none;
  transform: translate3d(10px, 11px, 0) rotate(.65deg) scale(.994);
}
.voice-stack-card[data-voice-slot="2"]{
  z-index: 2;
  pointer-events: none;
  transform: translate3d(20px, 22px, 0) rotate(1.25deg) scale(.987);
}
.voice-stack-card[data-voice-slot="3"]{
  z-index: 1;
  pointer-events: none;
  transform: translate3d(30px, 32px, 0) rotate(1.85deg) scale(.98);
}
.voice-stack-card[data-voice-slot="0"]:hover{
  transform: translate3d(0, -3px, 0) rotate(-.2deg) scale(1);
}
.voice-scroll-track .voice-stack-card.is-cycling-out{
  animation: voice-card-cycle-to-back 720ms cubic-bezier(.42, 0, .18, 1) forwards !important;
  pointer-events: none;
}
@keyframes voice-card-cycle-to-back {
  0% {
    z-index: 5;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
  48% {
    z-index: 5;
    transform: translate3d(-58px, -10px, 0) rotate(-2.4deg) scale(.995);
  }
  49% {
    z-index: 0;
    transform: translate3d(-58px, -10px, 0) rotate(-2.4deg) scale(.995);
  }
  100% {
    z-index: 0;
    transform: translate3d(30px, 32px, 0) rotate(1.85deg) scale(.98);
  }
}

@media (max-width: 760px) {
  .voice-scroll-track{
    min-height: 414px;
  }
  .voice-scroll-track .voice-stack-card{
    right: 18px;
  }
  .voice-stack-card[data-voice-slot="1"]{
    transform: translate3d(6px, 7px, 0) rotate(.5deg) scale(.995);
  }
  .voice-stack-card[data-voice-slot="2"]{
    transform: translate3d(12px, 14px, 0) rotate(.95deg) scale(.99);
  }
  .voice-stack-card[data-voice-slot="3"]{
    transform: translate3d(18px, 21px, 0) rotate(1.4deg) scale(.985);
  }
  @keyframes voice-card-cycle-to-back {
    0% { z-index: 5; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
    48% { z-index: 5; transform: translate3d(-34px, -7px, 0) rotate(-2deg) scale(.995); }
    49% { z-index: 0; transform: translate3d(-34px, -7px, 0) rotate(-2deg) scale(.995); }
    100% { z-index: 0; transform: translate3d(18px, 21px, 0) rotate(1.4deg) scale(.985); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-scroll-track .voice-stack-card{
    transition: none;
  }
  .voice-scroll-track .voice-stack-card.is-cycling-out{
    animation: none !important;
  }
}
.voice-card-ghost.is-shuffling-out{
  animation: voice-card-single-away 720ms cubic-bezier(.42, 0, .22, 1) forwards;
}
@keyframes voice-card-content-in {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes voice-card-single-away {
  0% { z-index: 4; opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  44% { z-index: 4; opacity: 1; transform: translate3d(-18px, -13px, 0) rotate(-1.1deg) scale(.995); }
  45% { z-index: 2; opacity: 1; transform: translate3d(-18px, -13px, 0) rotate(-1.1deg) scale(.995); }
  76% { z-index: 2; opacity: 1; transform: translate3d(17px, 13px, 0) rotate(1deg) scale(.988); }
  100% { z-index: 2; opacity: 0; transform: translate3d(29px, 24px, 0) rotate(1.8deg) scale(.976); }
}

@media (prefers-reduced-motion: reduce) {
  .studio-voice-display.is-changing,
.voice-card-ghost.is-shuffling-out{
    animation: none;
  }
}

@media (max-width: 760px) {
  .studio-voice-display > p{
    max-width: calc(100% - 128px);
    font-size: .64rem;
    line-height: 1.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-journey--v3 [data-progress-dot]{ display: none; }
}

/* V17 — comparative work grid,
studio duo,
and a more playful signature. */
.wordmark svg.brand-logo{ overflow: visible; background: transparent; color: inherit; mask: none; -webkit-mask: none; }

.projects-grid-page{ background: var(--paper); }
/* [SECTION: 06 — PROJECTS INDEX] */
.project-grid-experience{ padding: 0 14px; }
.project-grid-toolbar{
  display: grid;
  min-height: 116px;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding: 76px 2px 17px;
  border-bottom: 1px solid rgb(48 39 35 / 18%);
}
.project-grid-toolbar h1{ margin: 0; font-size: 1.15rem; letter-spacing: 0; }
.project-toolbar-label{ display: none; }
.project-view-controls{ display: flex; gap: 8px; align-items: center; justify-self: end; }
.project-service-filter{ position: relative; display: none; }
.project-service-filter-toggle{
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(48 39 35 / 26%);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: background-color 220ms ease, transform 320ms var(--ease);
}
.project-service-filter-toggle:hover,
.project-service-filter-toggle:focus-visible,
.project-service-filter-toggle.is-active{ background: var(--baby-blue, #f6b6b7); transform: rotate(-3deg); }
.project-service-filter-toggle i{ font-size: 1rem; }
.project-service-filter-menu{
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  width: min(330px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid rgb(48 39 35 / 18%);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 20px 55px rgb(48 39 35 / 16%);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(.97);
  transform-origin: top right;
  transition:
    opacity 140ms var(--ease-out),
    transform 140ms var(--ease-out);
}
.project-service-filter-menu.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-duration: 180ms;
}
.project-service-filter-menu > p{ margin: 0 0 12px; color: var(--muted); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.project-service-filter-menu > div{ display: flex; flex-wrap: wrap; gap: 6px; }
.project-service-filter-menu button{
  padding: 7px 10px;
  border: 1px solid rgb(48 39 35 / 20%);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: .68rem;
  transition: background-color 180ms ease, border-color 180ms ease, transform 280ms var(--ease);
}
.project-service-filter-menu button:hover{ transform: translateY(-1px); }
.project-service-filter-menu button[aria-pressed="true"]{ border-color: var(--baby-blue, #f6b6b7); background: var(--baby-blue, #f6b6b7); font-weight: 700; }
.project-service-filter-menu[hidden]{ display: none; }
@media (prefers-reduced-motion: reduce){
  .project-service-filter-menu,
  .project-service-filter-menu.is-open{
    transform: none;
    transition: opacity 120ms var(--ease-out) !important;
  }
}
[data-projects][data-mode="list"] .project-service-filter{ display: block; }

.project-year-sort{
  position: relative;
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(2 18 238 / 28%);
  border-radius: 50%;
  background: var(--paper);
  color: var(--primary);
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease,
    transform 320ms var(--ease);
}

.project-year-sort::after{
  position: absolute;
  inset: -1px;
  border: 1px solid var(--primary);
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
}

[data-projects][data-mode="list"] .project-year-sort{
  display: grid;
}

.project-year-sort-glyph{
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.project-year-sort-glyph i{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.18rem;
  line-height: 1;
  transition:
    opacity 190ms ease,
    transform 430ms var(--ease);
}

.project-year-sort-icon--desc{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.project-year-sort-icon--asc{
  opacity: 0;
  transform: translateY(9px) scale(.72);
}

.project-toolbar-label--year i{
  transition: transform 420ms var(--ease);
}

[data-projects][data-year-order="asc"] .project-toolbar-label--year i{
  transform: rotate(180deg);
}

[data-projects][data-year-order="asc"] .project-year-sort-icon--desc{
  opacity: 0;
  transform: translateY(-9px) scale(.72);
}

[data-projects][data-year-order="asc"] .project-year-sort-icon--asc{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.project-year-sort.is-switching{
  animation: project-year-sort-pop 480ms var(--ease);
}

.project-year-sort.is-switching::after{
  animation: project-year-sort-ring 520ms ease-out;
}

.project-year-sort:hover,
.project-year-sort:focus-visible{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--ink);
  transform: translateY(-1px);
}

@keyframes project-year-sort-pop{
  0%{ transform: scale(1); }
  42%{ transform: scale(.88); }
  72%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

@keyframes project-year-sort-ring{
  0%{ opacity: .55; transform: scale(.82); }
  100%{ opacity: 0; transform: scale(1.45); }
}

.project-mode-switch{ display: flex; padding: 3px; border: 1px solid rgb(48 39 35 / 26%); border-radius: 999px; }
.project-mode-switch button{ display: grid; width: 38px; height: 30px; padding: 0; place-items: center; border: 0; border-radius: 999px; background: transparent; }
.project-mode-switch button[aria-pressed="true"]{ background: var(--baby-blue, #f6b6b7); }
.project-mode-switch i{ font-size: 1rem; }

.project-mega-grid{ display: grid; gap: 14px; padding: 14px 0; }
.project-mega-grid[hidden],
.project-index-list[hidden]{ display: none !important; }
.project-index-list > a[hidden],
.project-index-list > a.is-filtered-out{ display: none !important; }
.mega-project{
  position: relative;
  isolation: isolate;
  display: block;
  height: min(78svh, 760px);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgb(48 39 35 / 13%);
  border-radius: 4px;
  background: #d8d5cf;
}
.mega-project::after{ position: absolute; z-index: 1; inset: 42% 0 0; background: linear-gradient(transparent, rgb(20 18 17 / 72%)); content: ""; opacity: .55; transition: opacity 420ms ease; }
.mega-project > img{ width: 100%; height: 100%; object-fit: cover; transition: filter 500ms ease, transform 900ms var(--ease); }
.mega-project:nth-child(2) > img{ object-position: center 43%; }
.mega-project:nth-child(3) > img{ object-position: center 38%; }
.mega-project-index{ position: absolute; z-index: 3; top: 18px; right: 18px; color: var(--chalk); font-size: .68rem; font-weight: 700; }
.mega-project-copy{ position: absolute; z-index: 3; right: 24px; bottom: 24px; left: 24px; color: var(--chalk); opacity: 0; transform: translateY(26px); transition: opacity 300ms ease, transform 650ms var(--ease); }
.mega-project-copy p{ margin: 0 0 8px; font-size: .75rem; text-transform: uppercase; }
.mega-project-copy h2{ max-width: 11ch; margin: 0; font-size: clamp(3.8rem, 10vh, 7.8rem); letter-spacing: -.07em; line-height: .78; }
.mega-project:hover::after,
.mega-project:focus-visible::after{ opacity: 1; }
.mega-project:hover > img,
.mega-project:focus-visible > img{ filter: saturate(1.08); transform: scale(1.025); }
.mega-project:hover .mega-project-copy,
.mega-project:focus-visible .mega-project-copy{ opacity: 1; transform: translateY(0); }

.project-index-list{ position: relative; min-height: 72svh; padding: 42px 0 110px; }
.project-index-head,
.project-index-list > a{ display: grid; grid-template-columns: minmax(230px, 1.15fr) 1fr 70px; gap: 24px; align-items: center; }
.project-index-list > a{ position: relative; z-index: 2; min-height: 112px; padding: 18px 15px; border-top: 1px solid rgb(48 39 35 / 24%); transition: background 220ms ease, color 220ms ease; }
.project-index-list > a:last-of-type{ border-bottom: 1px solid rgb(48 39 35 / 24%); }
.project-index-list > a:hover,
.project-index-list > a:focus-visible{ background: var(--baby-blue, #f6b6b7); }
.project-index-list h2,
.project-index-list p{ margin: 0; }
.project-index-list h2{ font-size: clamp(2rem, 5vh, 3.9rem); letter-spacing: -.055em; line-height: 1; }
.project-index-list p,
.project-index-list > a > span{ color: var(--muted); font-size: .78rem; }
.project-index-list > a > span{ justify-self: end; }

/* [SECTION: 07 — STUDIO] */
.studio-duo-hero{
  --duo-progress: 0;
  --duo-x: 0;
  --duo-y: 0;
  position: relative;
  min-height: 182svh;
  background: #11100f;
  color: var(--paper);
  isolation: isolate;
}
.studio-duo-stage{ position: sticky; top: 0; height: 100svh; overflow: hidden; }
.studio-duo-stage::before{ position: absolute; inset: 0; background: linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px); background-size: 7.5vw 7.5vw; content: ""; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 74%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 74%, transparent); }
.studio-duo-copy{ position: sticky; z-index: 4; top: 0; display: block; height: 100svh; margin-top: -100svh; padding: 110px max(20px, calc((100vw - 1520px) / 2)) 54px; pointer-events: none; }
.studio-duo-copy .eyebrow{ color: rgb(248 247 243 / 58%); }
.studio-duo-copy h1{ position: absolute; right: max(20px, calc((100vw - 1520px) / 2)); bottom: 10vh; left: max(20px, calc((100vw - 1520px) / 2)); margin: 0; font-size: clamp(4.5rem, 11vh, 8.75rem); letter-spacing: -.075em; line-height: .78; }
.studio-duo-copy h1 span,
.studio-duo-copy h1 em{ display: block; }
.studio-duo-copy > p:last-child{ position: absolute; top: 116px; right: max(20px, calc((100vw - 1520px) / 2)); max-width: 31ch; color: rgb(248 247 243 / 72%); }
.studio-duo-scroll{ position: absolute; z-index: 5; top: calc(100svh - 42px); right: 20px; color: rgb(248 247 243 / 54%); font-size: .66rem; text-transform: uppercase; }
.studio-person{ position: absolute; z-index: 3; width: clamp(150px, 17vw, 250px); transition: filter 240ms ease; will-change: transform; }
.studio-person--dev{ top: 34%; left: 14%; transform: translate3d(calc(var(--duo-progress) * 17vw + var(--duo-x) * 18px), calc(var(--duo-progress) * -12vh + var(--duo-y) * 12px), 0) rotate(calc(-7deg + var(--duo-progress) * 10deg)); }
.studio-person--design{ top: 22%; right: 15%; transform: translate3d(calc(var(--duo-progress) * -18vw + var(--duo-x) * -15px), calc(var(--duo-progress) * 16vh + var(--duo-y) * -10px), 0) rotate(calc(6deg - var(--duo-progress) * 9deg)); }
.studio-person-square{ position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 7px; box-shadow: 0 22px 60px rgb(0 0 0 / 36%); }
.studio-person > p{ display: flex; width: max-content; gap: 8px; align-items: center; margin: -18px 0 0 70%; padding: 8px 12px; border-radius: 999px; color: #11100f; font-size: .72rem; }
.studio-person > p strong{ font-weight: 750; }
.studio-person--dev{ color: var(--baby-blue, #f6b6b7); }
.studio-person--dev > p{ background: var(--baby-blue, #f6b6b7); }
.studio-person--design{ color: #e9a9c2; }
.studio-person--design > p{ margin-left: -14%; background: #e9a9c2; }
.studio-person-code{ padding: 18px; background: #171b1c; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.studio-person-code::before,
.studio-person-code::after{ position: absolute; left: 18px; height: 8px; border-radius: 2px; background: currentColor; content: ""; opacity: .68; }
.studio-person-code::before{ top: 62px; width: 61%; box-shadow: 0 24px #d7d0c8, 0 48px currentColor, 0 72px #d7d0c8; }
.studio-person-code::after{ top: 74px; left: 42px; width: 34%; box-shadow: 0 48px #d7d0c8; }
.studio-person-code > span{ font-size: .8rem; }
.studio-person-code > i{ position: absolute; right: 20%; bottom: 18%; width: 13px; height: 21px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: skew(22deg); animation: dev-cursor 1.1s steps(2, end) infinite; }
.studio-person-square b,
.studio-person-square small{ position: absolute; bottom: 12px; font-size: .6rem; }
.studio-person-square b{ left: 14px; }.studio-person-square small{ right: 14px; }
.studio-person-canvas{ background: #f3c9d9; color: #4c303b; }
.studio-person-canvas::before{ position: absolute; top: 19%; left: 14%; width: 68%; height: 48%; border: 3px solid currentColor; border-radius: 50%; content: ""; transform: rotate(-18deg) scaleX(calc(.2 + var(--duo-progress) * .8)); transform-origin: left; }
.studio-person-canvas::after{ position: absolute; top: 39%; left: 23%; width: 62%; height: 3px; background: currentColor; content: ""; transform: rotate(24deg) scaleX(calc(.12 + var(--duo-progress) * .88)); transform-origin: left; }
.studio-person-canvas > i{ position: absolute; z-index: 2; top: calc(17% + var(--duo-progress) * 42%); left: calc(17% + var(--duo-progress) * 60%); font-size: 2rem; transform: rotate(-18deg); }
.studio-person-canvas > span{ position: absolute; right: 13%; bottom: 13%; width: 25%; aspect-ratio: 1; border: 1px solid currentColor; background: var(--baby-blue, #f6b6b7); }
.studio-person-canvas > b{ top: 12px; bottom: auto; font-family: var(--accent); font-size: 1.35rem; }
@keyframes dev-cursor { 50% { opacity: .2; } }

.studio-specialty-intro{ display: grid; min-height: 118svh; place-items: center; border-bottom: 1px solid var(--line); }
.studio-specialty-intro .studio-specialty-copy{ width: min(100%, 1280px); max-width: 16ch !important; margin: 0 !important; padding: 0 !important; background: transparent !important; font-size: clamp(3.4rem, 9vh, 7.6rem) !important; font-weight: 650; letter-spacing: -.065em; line-height: .9; backdrop-filter: none !important; }
.studio-specialty-intro .studio-specialty-copy span{ color: color-mix(in srgb, var(--ink) calc(var(--word-progress, 0) * 100%), #c8c3bc); }

@media (max-width: 760px) {
  .project-grid-experience{ padding-inline: 8px; }
  .project-grid-toolbar{ min-height: 132px; padding-top: 72px; }
  .project-grid-toolbar h1{ font-size: 1rem; }


  .project-mode-switch button{ width: 32px; }
  .project-mega-grid{ gap: 8px; padding-top: 8px; }
  .mega-project{ height: 68svh; min-height: 430px; }
  .mega-project-copy{ right: 16px; bottom: 17px; left: 16px; opacity: 1; transform: none; }
  .mega-project-copy h2{ font-size: 3.5rem; }
  .mega-project-copy p{ max-width: 30ch; font-size: .65rem; }
  .project-index-list{ padding-top: 20px; }
  .project-index-list > a{ grid-template-columns: 1fr auto; min-height: 94px; }
  .project-index-list > a p{ grid-column: 1 / 3; grid-row: 2; }
  .project-index-list > a > span{ grid-column: 2; grid-row: 1; }
  .studio-duo-copy{ padding: 94px 18px 36px; }
  .studio-duo-copy > p:last-child{ top: 96px; right: 18px; max-width: 20ch; font-size: .76rem; }
  .studio-duo-copy h1{ right: 18px; bottom: 9vh; left: 18px; font-size: 3.55rem; }
  .studio-person{ width: 132px; }
  .studio-person--dev{ top: 34%; left: 8%; transform: translate3d(calc(var(--duo-progress) * 22vw), calc(var(--duo-progress) * -8vh), 0) rotate(calc(-7deg + var(--duo-progress) * 10deg)); }
  .studio-person--design{ top: 24%; right: 7%; transform: translate3d(calc(var(--duo-progress) * -24vw), calc(var(--duo-progress) * 17vh), 0) rotate(calc(6deg - var(--duo-progress) * 9deg)); }
  .studio-person > p{ margin-left: 48%; }
  .studio-person--design > p{ margin-left: -8%; }
  .studio-person-code{ padding: 12px; }
  .studio-person-code::before{ top: 48px; left: 12px; }
  .studio-person-code::after{ top: 60px; left: 28px; }
  .studio-specialty-intro{ min-height: 100svh; padding-inline: 18px; }
  .studio-specialty-intro .studio-specialty-copy{ font-size: 3.25rem !important; }
}

@media (min-width: 761px) {
  [data-projects][data-mode="list"] .project-grid-toolbar{
    min-height: 154px;
    grid-template-columns: minmax(230px, 1.15fr) 1fr minmax(170px, auto);
    grid-template-rows: auto auto;
    gap: 20px 24px;
    padding: 72px 15px 12px;
  }
  [data-projects][data-mode="list"] .project-grid-toolbar h1{
    grid-column: 1;
    grid-row: 2;
  }
  [data-projects][data-mode="list"] .project-toolbar-label{
    display: block;
    align-self: end;
    color: var(--muted);
    font-size: .65rem;
    text-transform: uppercase;
  }
  [data-projects][data-mode="list"] .project-toolbar-label--category{
    grid-column: 2;
    grid-row: 2;
  }
  [data-projects][data-mode="list"] .project-toolbar-label--year{
    display: flex;
    grid-column: 3;
    grid-row: 2;
    gap: 6px;
    align-items: center;
    justify-self: end;
    text-align: right;
  }
  [data-projects][data-mode="list"] .project-view-controls{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  [data-projects][data-mode="list"] .project-index-list{
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header:hover .wordmark,
.site-header:focus-within .wordmark,
.site-header:hover .logo-body,
.site-header:focus-within .logo-body,
.site-header:hover .logo-myrak-dot,
.site-header:focus-within .logo-myrak-dot,
.site-header:hover .logo-studio-o,
.site-header:focus-within .logo-studio-o,
.studio-person-code > i{ animation: none; }
  .mega-project > img,
.mega-project-copy,
.studio-person{ transition: none; }
}

/* V18 — layered index rows and a more immersive studio opening. */
.project-index-list{ isolation: isolate; }
.project-index-list > a{
  z-index: 3;
  overflow: visible;
  background: var(--paper);
  transition: min-height 420ms var(--ease), background-color 220ms ease, color 220ms ease;
}
.project-index-list > a:hover,
.project-index-list > a:focus-visible{ z-index: 2; min-height: 132px; background: var(--baby-blue); }
.project-index-list h2{ position: relative; z-index: 2; width: max-content; max-width: 100%; }
.project-index-list h2 > span:first-child{ position: relative; z-index: 4; }
.index-stickers{ position: absolute; z-index: 2; top: 50%; left: calc(100% + 18px); display: block; width: 180px; height: 100px; pointer-events: none; transform: translateY(-50%); }
.index-stickers img{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 76px;
  border: 4px solid var(--baby-blue);
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(48 39 35 / 24%), 0 12px 30px rgb(48 39 35 / 24%);
  filter: saturate(1.22) contrast(1.08);
  opacity: 0;
  transform: translate(-26px, -50%) rotate(0) scale(.3);
  transform-origin: 20% 50%;
  transition: opacity 160ms ease, transform 430ms var(--ease);
}
.index-stickers img:nth-child(1){ z-index: 1; object-position: 18% center; }
.index-stickers img:nth-child(2){ z-index: 3; border-color: #e9a9c2; object-position: center; transition-delay: 24ms; }
.index-stickers img:nth-child(3){ z-index: 2; border-color: var(--ink); object-position: 82% center; transition-delay: 48ms; }
.project-index-list > a:hover .index-stickers img:nth-child(1),
.project-index-list > a:focus-visible .index-stickers img:nth-child(1){ transform: translate(-18px, -105%) rotate(-9deg) scale(.92); }
.project-index-list > a:hover .index-stickers img:nth-child(2),
.project-index-list > a:focus-visible .index-stickers img:nth-child(2){ transform: translate(38px, -58%) rotate(5deg) scale(1); }
.project-index-list > a:hover .index-stickers img:nth-child(3),
.project-index-list > a:focus-visible .index-stickers img:nth-child(3){ transform: translate(4px, 4%) rotate(-3deg) scale(.88); }

.studio-duo-stage{ z-index: 4; pointer-events: none; }
.studio-duo-stage::before{ z-index: -1; }
.studio-duo-copy{ z-index: 3; }
.studio-duo-copy h1{
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(84vw, 1280px);
  font-size: clamp(5rem, 10.5vh, 8.5rem);
  line-height: .8;
  text-align: center;
  transform: translate(-50%, -50%);
}
.studio-duo-copy h1 span,
.studio-duo-copy h1 em{ position: relative; z-index: 3; }
.studio-duo-copy .eyebrow{ position: absolute; top: 112px; left: max(20px, calc((100vw - 1520px) / 2)); }
.studio-duo-copy > p:last-child{ top: 112px; }
.studio-person{ width: clamp(132px, 12vw, 188px); }
.studio-person--dev{
  z-index: 6;
  top: 18%;
  left: 12%;
  transform: translate3d(calc(var(--duo-progress) * 15vw + var(--duo-x) * 18px), calc(var(--duo-progress) * 20vh + var(--duo-y) * 12px), 0) rotate(calc(-8deg + var(--duo-progress) * 13deg));
}
.studio-person--design{
  z-index: 6;
  top: 61%;
  right: 9%;
  transform: translate3d(calc(var(--duo-progress) * -16vw + var(--duo-x) * -15px), calc(var(--duo-progress) * -22vh + var(--duo-y) * -10px), 0) rotate(calc(7deg - var(--duo-progress) * 12deg));
}
.studio-person > p{ position: absolute; top: calc(100% - 12px); margin: 0; }
.studio-person > p::before{ position: absolute; top: 50%; width: 28px; height: 1px; background: currentColor; content: ""; }
.studio-person--dev > p{ right: -43px; }
.studio-person--dev > p::before{ right: 100%; }
.studio-person--design > p{ left: -45px; }
.studio-person--design > p::before{ left: 100%; }

@media (max-width: 760px) {
  .project-index-list > a:hover,
.project-index-list > a:focus-visible{ min-height: 112px; }
  .index-stickers{ left: calc(100% + 8px); width: 110px; }
  .index-stickers img{ width: 72px; height: 56px; border-width: 3px; }
  .project-index-list > a:hover .index-stickers img:nth-child(1),
.project-index-list > a:focus-visible .index-stickers img:nth-child(1){ transform: translate(-12px, -92%) rotate(-8deg) scale(.9); }
  .project-index-list > a:hover .index-stickers img:nth-child(2),
.project-index-list > a:focus-visible .index-stickers img:nth-child(2){ transform: translate(24px, -55%) rotate(5deg) scale(.95); }
  .project-index-list > a:hover .index-stickers img:nth-child(3),
.project-index-list > a:focus-visible .index-stickers img:nth-child(3){ transform: translate(0, 0) rotate(-3deg) scale(.82); }
  .studio-duo-copy h1{ top: 53%; width: calc(100% - 32px); font-size: 3.65rem; text-align: left; }
  .studio-duo-copy .eyebrow{ top: 94px; left: 18px; }
  .studio-duo-copy > p:last-child{ top: 122px; right: 18px; max-width: 25ch; }
  .studio-person{ width: 104px; }
  .studio-person--dev{ top: 23%; left: 8%; transform: translate3d(calc(var(--duo-progress) * 18vw), calc(var(--duo-progress) * 18vh), 0) rotate(calc(-8deg + var(--duo-progress) * 13deg)); }
  .studio-person--design{ top: 67%; right: 8%; transform: translate3d(calc(var(--duo-progress) * -19vw), calc(var(--duo-progress) * -22vh), 0) rotate(calc(7deg - var(--duo-progress) * 12deg)); }
  .studio-person > p{ padding: 6px 9px; font-size: .62rem; }
  .studio-person--dev > p{ right: -32px; }.studio-person--design > p{ left: -30px; }
}

@media (prefers-reduced-motion: reduce) {
  .index-stickers img,
.project-index-list > a{ transition: none; }
}

/* V19 - two-card project reveal and the light Studio collaboration scene. */
.project-index-list > a{
  isolation: isolate;
}
.project-index-list > a:hover,
.project-index-list > a:focus-visible{
  z-index: 6;
}
.project-index-title{
  position: relative;
  display: flex;
  min-width: 0;
  align-self: stretch;
  align-items: center;
}
.project-index-title h2{
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  letter-spacing: 0;
}
.project-index-title .index-stickers{
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  display: block;
  flex: 0 0 164px;
  width: 164px;
  height: calc(100% + 106px);
  margin: -88px 0 -18px 12px;
  overflow: hidden;
  pointer-events: none;
  transform: none;
}
.project-index-title .index-stickers img{
  top: auto;
  bottom: -22px;
  left: 4px;
  width: 98px;
  height: 78px;
  border: 3px solid var(--paper);
  opacity: 0;
  transform: translate3d(-9px, 82%, 0) rotate(-2deg) scale(.72);
  transform-origin: 50% 100%;
  transition: opacity 120ms ease, transform 390ms var(--ease);
}
.project-index-title .index-stickers img:nth-child(1){
  z-index: 2;
  border-color: var(--paper);
  object-position: 24% center;
}
.project-index-title .index-stickers img:nth-child(2){
  z-index: 1;
  border-color: #e9a9c2;
  object-position: 76% center;
  transition-delay: 28ms;
}
.project-index-list > a:hover .index-stickers img,
.project-index-list > a:focus-visible .index-stickers img{
  opacity: 1;
}
.project-index-list > a:hover .index-stickers img:nth-child(1),
.project-index-list > a:focus-visible .index-stickers img:nth-child(1){
  transform: translate3d(-2px, -88px, 0) rotate(-8deg) scale(.96);
}
.project-index-list > a:hover .index-stickers img:nth-child(2),
.project-index-list > a:focus-visible .index-stickers img:nth-child(2){
  transform: translate3d(43px, -66px, 0) rotate(6deg) scale(.9);
}

.studio-duo-hero{
  --dev-scroll-x: 0vw;
  --dev-scroll-y: 0vh;
  --dev-pointer-x: 0px;
  --dev-pointer-y: 0px;
  --dev-rotate: -8deg;
  --design-scroll-x: 0vw;
  --design-scroll-y: 0vh;
  --design-pointer-x: 0px;
  --design-pointer-y: 0px;
  --design-rotate: 7deg;
  min-height: 188svh;
  background: #fff;
  color: var(--ink);
}
.studio-duo-stage{
  z-index: auto;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}
.studio-duo-stage::before{
  z-index: 0;
  background:
    linear-gradient(rgb(48 39 35 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(246 182 183 / 24%) 1px, transparent 1px);
  background-size: 8vw 8vw;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.studio-duo-copy{
  position: absolute;
  z-index: 3;
  inset: 0;
  height: auto;
  margin: 0;
  padding: 110px max(20px, calc((100vw - 1520px) / 2)) 54px;
  pointer-events: none;
}
.studio-duo-copy .eyebrow{
  position: absolute;
  top: 112px;
  left: max(20px, calc((100vw - 1520px) / 2));
  color: var(--muted);
}
.studio-duo-copy h1{
  position: absolute;
  top: 51%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(88vw, 1320px);
  margin: 0;
  color: var(--ink);
  font-size: clamp(4.7rem, 11vh, 9rem);
  letter-spacing: 0;
  line-height: .83;
  text-align: center;
  transform: translate(-50%, -50%);
}
.studio-duo-copy h1 span,
.studio-duo-copy h1 em{
  position: relative;
  z-index: auto;
  display: block;
}
.studio-duo-copy h1 em{
  color: var(--baby-blue, #f6b6b7);
}
.studio-duo-copy > p:last-child{
  position: absolute;
  top: 112px;
  right: max(20px, calc((100vw - 1520px) / 2));
  max-width: 33ch;
  color: var(--muted);
}
.studio-person{
  width: clamp(142px, 13vw, 196px);
  transition: transform 90ms linear, filter 240ms ease;
}
.studio-person--dev{
  z-index: 2;
  top: 19%;
  left: 20%;
  color: var(--baby-blue, #f6b6b7);
  transform: translate3d(
    calc(var(--dev-scroll-x) + var(--dev-pointer-x)),
    calc(var(--dev-scroll-y) + var(--dev-pointer-y)),
    0
  ) rotate(var(--dev-rotate));
}
.studio-person--design{
  z-index: 5;
  top: 59%;
  right: 17%;
  color: #e9a9c2;
  transform: translate3d(
    calc(var(--design-scroll-x) + var(--design-pointer-x)),
    calc(var(--design-scroll-y) + var(--design-pointer-y)),
    0
  ) rotate(var(--design-rotate));
}
.studio-person-square{
  border-radius: 8px;
  box-shadow: 0 20px 52px rgb(48 39 35 / 20%);
}
.studio-person-code{
  background: #191c1d;
}
.studio-person-canvas{
  background: #f2c7d7;
}
.studio-person > p{
  position: absolute;
  top: calc(100% - 12px);
  margin: 0;
  box-shadow: 0 8px 22px rgb(48 39 35 / 12%);
}
.studio-person--dev > p{
  right: -43px;
  background: var(--baby-blue, #f6b6b7);
}
.studio-person--design > p{
  left: -45px;
  background: #e9a9c2;
}
.studio-duo-scroll{
  z-index: 7;
  color: var(--muted);
}
.studio-cursor-bubble{
  --bubble-x: 0px;
  --bubble-y: 0px;
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  padding: 7px 11px;
  border: 1px solid rgb(48 39 35 / 18%);
  border-radius: 999px;
  background: var(--baby-blue, #f6b6b7);
  color: var(--ink);
  box-shadow: 0 8px 24px rgb(48 39 35 / 14%);
  font-size: .72rem;
  font-weight: 750;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(
    calc(var(--bubble-x) + 18px),
    calc(var(--bubble-y) + 20px),
    0
  ) rotate(-4deg) scale(.88);
  transform-origin: 0 0;
  transition: opacity 140ms ease;
}
.studio-cursor-bubble::before{
  position: absolute;
  top: -4px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgb(48 39 35 / 18%);
  border-left: 1px solid rgb(48 39 35 / 18%);
  background: inherit;
  content: "";
  transform: rotate(45deg);
}
.studio-cursor-bubble.is-visible{
  opacity: 1;
  transform: translate3d(
    calc(var(--bubble-x) + 18px),
    calc(var(--bubble-y) + 20px),
    0
  ) rotate(-4deg) scale(1);
}

@media (max-width: 760px) {
  .project-index-title .index-stickers{
    flex-basis: 104px;
    width: 104px;
    height: calc(100% + 88px);
    margin-top: -70px;
    margin-left: 6px;
  }
  .project-index-title .index-stickers img{
    bottom: -18px;
    width: 70px;
    height: 56px;
    border-width: 2px;
  }
  .project-index-list > a:hover .index-stickers img:nth-child(1),
.project-index-list > a:focus-visible .index-stickers img:nth-child(1){
    transform: translate3d(-2px, -64px, 0) rotate(-8deg) scale(.94);
  }
  .project-index-list > a:hover .index-stickers img:nth-child(2),
.project-index-list > a:focus-visible .index-stickers img:nth-child(2){
    transform: translate3d(29px, -48px, 0) rotate(6deg) scale(.88);
  }
  .studio-duo-copy{
    padding: 94px 18px 36px;
  }
  .studio-duo-copy .eyebrow{
    top: 94px;
    left: 18px;
  }
  .studio-duo-copy > p:last-child{
    top: 122px;
    right: 18px;
    max-width: 25ch;
  }
  .studio-duo-copy h1{
    top: 52%;
    width: calc(100% - 32px);
    font-size: clamp(3.1rem, 15vw, 4.1rem);
    line-height: .88;
    text-align: left;
  }
  .studio-person{
    width: 104px;
  }
  .studio-person--dev{
    top: 25%;
    left: 4%;
  }
  .studio-person--design{
    top: 60%;
    right: 2%;
  }
  .studio-person > p{
    padding: 6px 9px;
    font-size: .62rem;
  }
  .studio-person--dev > p{
    right: -31px;
  }
  .studio-person--design > p{
    left: -28px;
  }
  .studio-cursor-bubble{
    display: none;
  }
  .studio-duo-scroll{
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .studio-cursor-bubble{
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-index-title .index-stickers img,
.studio-person,
.studio-cursor-bubble{
    transition: none;
  }
  .studio-person--dev{
    transform: translate3d(10vw, 11vh, 0) rotate(-2deg);
  }
  .studio-person--design{
    transform: translate3d(-9vw, -9vh, 0) rotate(2deg);
  }
  .studio-cursor-bubble{
    display: none;
  }
}

/* V20 - open-top project masks,
richer role objects,
and a synchronous SVG logo. */
.project-index-title .index-stickers{
  overflow: visible;
  clip-path: inset(-54px -80px 0 -80px);
}
.project-index-title .index-stickers img{
  bottom: -12px;
  width: 104px;
  height: 142px;
  box-shadow: 0 7px 16px rgb(48 39 35 / 15%);
  filter: saturate(1.08) contrast(1.03);
}
.project-index-title .index-stickers img:nth-child(1){
  width: 102px;
  height: 132px;
}
.project-index-title .index-stickers img:nth-child(2){
  width: 116px;
  height: 176px;
}
.project-index-list > a:hover .index-stickers img:nth-child(1),
.project-index-list > a:focus-visible .index-stickers img:nth-child(1){
  transform: translate3d(-1px, -95px, 0) rotate(-6deg) scale(.98);
}
.project-index-list > a:hover .index-stickers img:nth-child(2),
.project-index-list > a:focus-visible .index-stickers img:nth-child(2){
  transform: translate3d(48px, -6px, 0) rotate(6deg) scale(.94);
}

.studio-duo-hero{
  --dev-ui-x: 0px;
  --dev-ui-y: 0px;
  --design-ui-x: 0px;
  --design-ui-y: 0px;
  min-height: 168svh;
}
.studio-person{
  width: clamp(154px, 14vw, 214px);
}
.studio-person-square{
  border: 1px solid currentColor;
  box-shadow: 0 18px 42px rgb(48 39 35 / 16%);
}
.studio-person-code{
  padding: 0;
  background: #171b1c;
  color: #dce8eb;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.studio-person-code::before,
.studio-person-code::after,
.studio-person-canvas::before,
.studio-person-canvas::after{
  content: none;
}
.studio-dev-bar{
  display: flex;
  height: 30px;
  gap: 5px;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid rgb(220 232 235 / 13%);
  background: #202526;
}
.studio-dev-bar > i{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e9a9c2;
}
.studio-dev-bar > i:nth-child(2){ background: #f2d67f; }
.studio-dev-bar > i:nth-child(3){ background: var(--baby-blue); }
.studio-dev-bar > span{
  margin-left: auto;
  color: rgb(220 232 235 / 58%);
  font-size: .48rem;
}
.studio-dev-code{
  display: grid;
  gap: 11px;
  padding: 23px 16px 16px;
  color: #d8d2cc;
  font-size: clamp(.5rem, .62vw, .63rem);
  line-height: 1.35;
}
.studio-dev-code > span{
  display: block;
  width: max-content;
  max-width: 100%;
}
.studio-dev-code > span:nth-child(2){ margin-left: 12px; }
.studio-dev-code em{ color: var(--baby-blue); font-style: normal; }
.studio-dev-code strong{ color: #f0b7cc; font-weight: 600; }
.studio-dev-status{
  position: absolute !important;
  right: 10px !important;
  bottom: 9px !important;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 4px 6px;
  border: 1px solid rgb(246 182 183 / 24%);
  border-radius: 999px;
  color: #dce8eb;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .43rem !important;
  text-transform: uppercase;
}
.studio-dev-status > i{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #79d69b;
  box-shadow: 0 0 0 3px rgb(121 214 155 / 14%);
  animation: studio-live-pulse 1.35s ease-in-out infinite;
}
@keyframes studio-live-pulse {
  50% { opacity: .45; transform: scale(.72); }
}

.studio-person-canvas{
  background: #f4c7d8;
  color: #4c303b;
}
.studio-person-canvas > small{
  right: auto;
  bottom: 10px;
  left: 10px;
  font-size: .45rem;
}

.studio-specialty-intro{
  position: relative;
  z-index: 6;
  min-height: 105svh;
  margin-top: -18svh;
  padding-top: 11svh;
  place-items: start center;
  background: #fff;
}
.studio-specialty-intro .studio-specialty-copy{
  width: min(100%, 1450px);
  max-width: 18ch !important;
  font-size: clamp(3.2rem, 7.2vh, 6.7rem) !important;
  letter-spacing: 0 !important;
  line-height: .92;
}

.wordmark svg.brand-logo use{
  fill: currentColor;
  color: currentColor;
  pointer-events: none;
}

@media (max-width: 760px) {
  .project-index-title .index-stickers{
    clip-path: inset(-44px -50px 0 -50px);
  }
  .project-index-title .index-stickers img:nth-child(1){ width: 70px; height: 90px; }
  .project-index-title .index-stickers img:nth-child(2){ width: 78px; height: 112px; }
  .project-index-list > a:hover .index-stickers img:nth-child(1),
.project-index-list > a:focus-visible .index-stickers img:nth-child(1){
    transform: translate3d(-1px, -64px, 0) rotate(-7deg) scale(.96);
  }
  .project-index-list > a:hover .index-stickers img:nth-child(2),
.project-index-list > a:focus-visible .index-stickers img:nth-child(2){
    transform: translate3d(31px, -4px, 0) rotate(6deg) scale(.92);
  }
  .studio-person{ width: 112px; }
  .studio-dev-bar{ height: 22px; padding-inline: 7px; }
  .studio-dev-bar > span{ display: none; }
  .studio-dev-code{ gap: 6px; padding: 13px 8px; font-size: .37rem; }
  .studio-dev-code > span:nth-child(2){ margin-left: 7px; }
  .studio-dev-status{ right: 6px !important; bottom: 5px !important; padding: 3px 5px; font-size: .34rem !important; }
  .studio-person-canvas > small{ bottom: 6px; left: 6px; font-size: .34rem; }
  .studio-specialty-intro{ min-height: 98svh; margin-top: -10svh; padding-top: 9svh; }
  .studio-specialty-intro .studio-specialty-copy{ max-width: 16ch !important; font-size: 3rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-dev-pointer,
.studio-design-pointer,
.studio-design-shape,
.studio-dev-status > i,
.site-header:hover .wordmark,
.site-header:focus-within .wordmark,
.site-header:hover .logo-body,
.site-header:focus-within .logo-body,
.site-header:hover .logo-myrak-dot,
.site-header:focus-within .logo-myrak-dot,
.site-header:hover .logo-studio-o,
.site-header:focus-within .logo-studio-o{
    animation: none;
    transition: none;
  }
}

/* V21 - a smaller powder-pink note on Contact. */
.contact-postit{
  width: min(22%, 155px);
  gap: 8px;
  padding: 13px;
  border-radius: 3px 22px 3px 3px;
  background: #f3abc1;
  box-shadow: 0 14px 32px rgb(48 39 35 / 14%);
}
.contact-postit.reveal.is-visible{
  transform: translate(var(--note-x, 0), var(--note-y, 0)) rotate(3deg);
}
.contact-postit::after{
  width: 24px;
  background: linear-gradient(135deg, rgb(119 54 76 / 15%) 0 49%, var(--paper) 51%);
}
.contact-postit > span{
  font-size: .42rem;
  letter-spacing: .08em;
}
.contact-postit strong{
  max-width: 10ch;
  color: #4b3039;
  font-size: clamp(1.08rem, 1.4vw, 1.45rem);
  letter-spacing: 0;
  line-height: .9;
}
.contact-postit small{
  font-size: .44rem;
}
.postit-drag-handle{
  width: 30px;
  color: #4b3039;
  font-size: .78rem;
}
.contact-postit.is-dragging{
  box-shadow: 0 22px 48px rgb(48 39 35 / 20%);
}

@media (min-width: 901px) {
  .contact-postit{
    width: min(22%, 155px);
  }
}

@media (max-width: 900px) {
  .contact-postit{
    width: min(43vw, 150px);
  }
}

@media (max-width: 620px) {
  .contact-postit{
    width: min(39vw, 138px);
    margin-top: 24px;
    margin-bottom: 36px;
    padding: 11px;
  }
  .contact-postit strong{
    font-size: 1.08rem;
  }
}

/* V22 - cleaned Studio roles,
tighter flow,
and magnetic title lines. */
.studio-duo-hero{
  --role-dev: #c8ff2e;
  --role-design: var(--terra);
  --title-a-x: 0px;
  --title-a-y: 0px;
  --title-a-r: 0deg;
  --title-b-x: 0px;
  --title-b-y: 0px;
  --title-b-r: 0deg;
}
.studio-person-square{
  border: 2px solid currentColor;
  box-shadow: 0 16px 38px rgb(48 39 35 / 14%);
}
.studio-person--dev{
  color: var(--role-dev);
}
.studio-person--design{
  color: var(--role-design);
}
.studio-person > p::before{
  content: none;
}
.studio-person--dev > p{
  right: -35px;
  background: var(--role-dev);
  color: #171b1c;
}
.studio-person--design > p{
  left: -34px;
  background: var(--role-design);
  color: var(--paper);
}
.studio-person > p{
  box-shadow: 0 7px 18px rgb(48 39 35 / 12%);
}

.studio-person-code{
  border-color: var(--role-dev);
}
.studio-dev-code em{
  color: var(--role-dev);
}
.studio-dev-code > span:last-child{
  display: flex;
  align-items: center;
}
.studio-dev-caret{
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 4px;
  background: var(--role-dev);
  box-shadow: 0 0 8px rgb(200 255 46 / 58%);
  animation: studio-code-caret 780ms steps(1, end) infinite;
}
.studio-dev-status{
  border-color: rgb(200 255 46 / 34%);
}
.studio-dev-status > i{
  background: var(--role-dev);
  box-shadow: 0 0 0 3px rgb(200 255 46 / 14%);
}
@keyframes studio-code-caret {
  50% { opacity: 0; }
}

.studio-person-canvas{
  overflow: hidden;
  border-color: var(--role-design);
  background: var(--chalk);
  color: var(--ink);
}
.studio-design-bar{
  display: flex;
  height: 30px;
  gap: 5px;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.studio-design-bar > i{
  width: 5px;
  height: 5px;
  background: var(--baby-blue);
}
.studio-design-bar > i:nth-child(2){ background: var(--sage); }
.studio-design-bar > i:nth-child(3){ background: var(--terra); }
.studio-design-bar > small{
  position: static;
  margin-left: auto;
  color: var(--muted);
  font-size: .42rem;
}
.studio-design-layout{
  position: absolute;
  top: 26%;
  right: 10%;
  bottom: 24%;
  left: 10%;
  display: grid;
  grid-template-columns: 1.1fr .75fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.studio-design-layout > span{
  display: block;
  min-width: 0;
}
.studio-design-layout > span:nth-child(1){
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  background: var(--baby-blue);
}
.studio-design-layout > span:nth-child(2){
  background: var(--sage);
}
.studio-design-layout > span:nth-child(3){
  background: var(--terra);
}
.studio-design-mark img{
  width: 62%;
  height: auto;
  filter: brightness(0) saturate(100%);
}
.studio-design-palette{
  position: absolute;
  right: 10%;
  bottom: 10%;
  left: 10%;
  display: grid;
  grid-template-columns: 1.4fr 1fr .8fr .55fr;
  gap: 4px;
}
.studio-design-palette > i{
  height: 7px;
  background: var(--baby-blue);
}
.studio-design-palette > i:nth-child(2){ background: var(--sage); }
.studio-design-palette > i:nth-child(3){ background: var(--terra); }

.studio-duo-copy h1 span,
.studio-duo-copy h1 em{
  will-change: transform;
  transition: transform 170ms var(--ease);
}
.studio-duo-copy h1 span{
  transform: translate3d(var(--title-a-x), var(--title-a-y), 0) rotate(var(--title-a-r));
}
.studio-duo-copy h1 em{
  transform: translate3d(var(--title-b-x), var(--title-b-y), 0) rotate(var(--title-b-r));
}

.studio-cursor-bubble.is-visible{
  opacity: 0;
}
.studio-cursor-bubble.is-visible.is-section-active{
  opacity: 1;
}
.studio-cursor-bubble{
  transition: opacity 190ms ease;
}

.studio-page,
.studio-page .studio-duo-hero,
.studio-page .studio-duo-stage,
.studio-page .studio-specialty-intro,
.studio-page .studio-information{
  background: var(--paper);
}

.studio-specialty-intro{
  min-height: auto;
  padding-top: 11svh;
  padding-bottom: clamp(58px, 8svh, 88px);
  border-bottom: 0;
  background: transparent;
}
.studio-specialty-intro + .studio-information{
  margin-top: 0;
  padding-top: clamp(48px, 5vw, 78px);
}

.wordmark svg.brand-logo{
  display: block;
  width: 102px;
  max-width: none;
  flex: 0 0 auto;
  height: auto;
}

@media (max-width: 760px) {
  .wordmark svg.brand-logo{ width: 86px; }
  .studio-person--dev > p{ right: -26px; }
  .studio-person--design > p{ left: -24px; }
  .studio-design-bar{ height: 22px; padding-inline: 7px; }
  .studio-design-bar > small{ display: none; }
  .studio-design-layout{ top: 27%; right: 8%; bottom: 25%; left: 8%; gap: 4px; padding: 4px; }
  .studio-design-palette{ right: 8%; bottom: 10%; left: 8%; gap: 3px; }
  .studio-specialty-intro{ padding-top: 9svh; padding-bottom: 48px; }
  .studio-specialty-intro + .studio-information{ padding-top: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-dev-caret{
    animation: none;
  }
  .studio-duo-copy h1 span,
.studio-duo-copy h1 em{
    transform: none;
    transition: none;
  }
}

/* V23 - balanced Studio transitions and quieter navigation cues. */
.studio-person--design{
  color: #ff4f9a;
}
.studio-person--design > p{
  background: var(--terra);
}

.studio-duo-copy > p:last-child{
  top: auto;
  right: max(94px, calc((100vw - 1520px) / 2));
  bottom: 30px;
  max-width: 36ch;
  margin: 0;
  text-align: right;
}

.studio-duo-scroll{
  top: calc(100svh - 42px);
  right: auto;
  bottom: auto;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .54rem;
  letter-spacing: .08em;
  opacity: .48;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.studio-duo-scroll::after{
  width: 1px;
  height: 20px;
  background: currentColor;
  content: "";
  transform-origin: top;
  animation: studio-scroll-cue 1.8s var(--ease) infinite;
}
@keyframes studio-scroll-cue {
  0%, 100% { opacity: .28; transform: scaleY(.45); }
  50% { opacity: .9; transform: scaleY(1); }
}

.studio-specialty-intro{
  min-height: clamp(540px, 70svh, 760px);
  margin-top: -12svh;
  padding-top: 0;
  padding-bottom: 0;
  place-items: center;
}
.studio-specialty-intro .studio-specialty-copy{
  width: min(92vw, 1460px);
  max-width: none !important;
  margin-inline: auto !important;
  text-align: center;
}
.studio-information{
  border-top: 0 !important;
}
.studio-specialty-intro + .studio-information{
  margin-top: -72px;
  padding-top: clamp(22px, 2.5vw, 38px);
}

@media (max-width: 760px) {
  .studio-duo-copy > p:last-child{
    top: auto;
    right: 78px;
    bottom: 24px;
    max-width: 24ch;
    font-size: .72rem;
  }
  .studio-duo-scroll{
    top: calc(100svh - 39px);
    bottom: auto;
    left: 18px;
    display: flex;
    transform: none;
  }
  .studio-duo-scroll::after{
    height: 16px;
  }
  .studio-specialty-intro{
    min-height: 66svh;
    margin-top: -8svh;
  }
  .studio-specialty-intro .studio-specialty-copy{
    width: 100%;
    max-width: none !important;
    font-size: clamp(2.45rem, 12vw, 3rem) !important;
  }
  .studio-specialty-intro + .studio-information{
    margin-top: -36px;
    padding-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-duo-scroll::after{
    animation: none;
  }
}

/* V24 - persistent Studio intro,
centered information,
and explicit design branding. */
.studio-duo-hero{
  position: relative;
  z-index: 7;
}
.studio-person--design .studio-person-square{
  box-shadow: 0 18px 42px rgb(255 79 154 / 22%);
}

.studio-design-logo,
.studio-design-mark{
  display: grid !important;
  place-items: center;
}
.studio-design-logo img{
  width: 82%;
  height: auto;
  filter: brightness(0) saturate(100%);
}
.studio-design-mark img{
  width: 48%;
}

.studio-duo-intro{
  position: sticky;
  z-index: 9;
  top: calc(100svh - 78px);
  width: min(36ch, calc(100vw - 188px));
  margin: -78px max(94px, calc((100vw - 1520px) / 2)) 0 auto;
  color: var(--muted);
  text-align: right;
}

.studio-info-heading{
  display: block;
  width: min(100%, 1120px);
  margin: 0 auto clamp(38px, 5vw, 68px);
  text-align: center;
}
.studio-info-heading .eyebrow{
  margin: 0;
}
.studio-info-columns{
  width: min(100%, 1120px);
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.studio-info-columns > article:nth-child(1),
.studio-info-columns > article:nth-child(2),
.studio-info-columns > .studio-info-visual{
  grid-column: auto;
}
.studio-info-visual{
  width: 100%;
  margin: 0;
}

@media (max-width: 760px) {
  .studio-duo-intro{
    top: calc(100svh - 108px);
    width: min(24ch, calc(100vw - 96px));
    margin: -108px 78px 0 auto;
    font-size: .72rem;
  }
  .studio-info-heading{
    margin-bottom: 34px;
  }
  .studio-info-columns{
    display: grid;
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .studio-info-columns > article{
    margin-bottom: 0;
  }
  .studio-info-visual{
    width: 100%;
    margin: 0 !important;
  }
}

.compact-footer > p:first-child{
  display: flex;
  align-items: center;
  gap: 7px;
}
.compact-footer > p:first-child .footer-brand-logo{
  width: 58px;
  height: auto;
  opacity: 1;
}

/* V25 - glass roles,
stacked voices,
and compact interaction cues. */
.studio-person-square{
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
}
.studio-person-square::after{
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(128deg, rgb(255 255 255 / 23%) 0%, rgb(255 255 255 / 4%) 31%, transparent 52%, rgb(255 255 255 / 8%) 100%);
  content: "";
  pointer-events: none;
}
.studio-person-code{
  background: linear-gradient(145deg, rgb(28 35 35 / 96%), rgb(11 15 15 / 86%));
  box-shadow: 0 20px 58px rgb(200 255 46 / 15%), inset 0 1px 0 rgb(255 255 255 / 13%);
}
.studio-dev-bar{
  background: rgb(25 31 31 / 78%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.studio-person-canvas{
  background: linear-gradient(145deg, rgb(255 255 255 / 76%), rgb(244 236 239 / 64%));
  box-shadow: 0 20px 58px rgb(255 79 154 / 19%), inset 0 1px 0 rgb(255 255 255 / 82%);
}
.studio-design-bar{
  background: rgb(255 255 255 / 58%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.studio-design-layout{
  border-color: rgb(48 39 35 / 15%);
  background: rgb(255 255 255 / 36%);
  box-shadow: 0 10px 28px rgb(48 39 35 / 9%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.studio-design-layout > span{
  position: relative;
  overflow: hidden;
}
.studio-design-layout small{
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 6px;
  color: rgb(48 39 35 / 58%);
  font-family: var(--sans);
  font-size: .31rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.studio-design-logo img{
  width: 72%;
}
.studio-design-mark img{
  width: 78%;
  filter: none;
}
.studio-design-palette > i{
  position: relative;
}
.studio-design-palette > i::before{
  position: absolute;
  bottom: calc(100% + 3px);
  left: 0;
  color: rgb(48 39 35 / 55%);
  content: attr(data-color);
  font-family: var(--sans);
  font-size: .27rem;
  font-style: normal;
}

.studio-duo-scroll{
  gap: 0;
  animation: studio-scroll-word 2.6s ease-in-out infinite;
}
.studio-duo-scroll::after{
  content: none;
}
@keyframes studio-scroll-word {
  0%, 100% { opacity: .34; }
  50% { opacity: .8; }
}

.studio-voices{
  position: relative;
  isolation: isolate;
  min-height: min(86svh, 780px);
  margin-block: clamp(70px, 9vw, 140px);
  padding-block: clamp(74px, 8vw, 118px);
  background: #151515;
  box-shadow: 0 0 0 100vmax #151515;
  clip-path: inset(0 -100vmax);
  color: var(--paper);
}
.studio-voices::before{
  content: none;
}
.studio-voices-nav{
  z-index: 4;
}
.studio-voices-nav h2{
  color: var(--paper);
}
.studio-voices-nav .eyebrow,
.voices-hint{
  color: rgb(248 247 243 / 58%);
}
.voice-scroll-track{
  z-index: 3;
  padding: 28px 34px 34px 0;
}
.studio-voice-display{
  isolation: isolate;
  min-height: 430px;
  overflow: visible;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid rgb(48 39 35 / 12%);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 28px 75px rgb(0 0 0 / 36%);
  color: var(--ink);
  transition: background 350ms ease, transform 450ms var(--ease);
}
.studio-voice-display::before,
.studio-voice-display::after{
  position: absolute;
  z-index: -2;
  inset: 0;
  border-radius: 8px;
  content: "";
  transition: transform 450ms var(--ease), background 350ms ease;
}
.studio-voice-display::before{
  background: var(--baby-blue);
  transform: translate(12px, 13px) rotate(1.1deg);
}
.studio-voice-display::after{
  z-index: -3;
  background: #ff4f9a;
  transform: translate(24px, 25px) rotate(2deg);
}
.studio-voice-display:hover{
  transform: translateY(-3px) rotate(-.25deg);
}
.studio-voice-display:hover::before{
  transform: translate(15px, 15px) rotate(1.7deg);
}
.studio-voice-display:hover::after{
  transform: translate(29px, 29px) rotate(2.8deg);
}
.studio-voice-display[data-voice-theme="1"]{
  background: color-mix(in srgb, var(--baby-blue) 45%, var(--paper));
}
.studio-voice-display[data-voice-theme="1"]::before{ background: var(--sage); }
.studio-voice-display[data-voice-theme="1"]::after{ background: var(--terra); }
.studio-voice-display[data-voice-theme="2"]{
  background: color-mix(in srgb, #ff4f9a 18%, var(--paper));
}
.studio-voice-display[data-voice-theme="2"]::before{ background: var(--terra); }
.studio-voice-display[data-voice-theme="2"]::after{ background: var(--baby-blue); }
.studio-voice-display[data-voice-theme="3"]{
  background: color-mix(in srgb, var(--sage) 47%, var(--paper));
}
.studio-voice-display[data-voice-theme="3"]::before{ background: #ff4f9a; }
.studio-voice-display[data-voice-theme="3"]::after{ background: var(--baby-blue); }
.voice-quote-mark{
  display: block;
  height: .65em;
  margin: clamp(24px, 4vw, 48px) 0 14px;
  color: color-mix(in srgb, var(--terra) 76%, var(--ink));
  font-family: Georgia, serif;
  font-size: clamp(4rem, 7vw, 6.4rem);
  line-height: .75;
}
.studio-voice-display blockquote{
  max-width: 23ch;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.02;
}
.studio-voice-display > p{
  margin-top: clamp(32px, 5vw, 58px);
}
.voice-card-action{
  position: absolute;
  z-index: 5;
  top: 50%;
  right: -27px;
  display: inline-flex;
  min-height: 46px;
  gap: 9px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 8px;
  background: #242424;
  box-shadow: 0 12px 28px rgb(0 0 0 / 30%);
  color: white;
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity 180ms ease, transform 260ms var(--ease), background 180ms ease;
}
.voice-card-action:hover,
.voice-card-action:focus-visible{
  background: #313131;
}
.studio-voice-display:hover .voice-card-action,
.voice-card-action:focus-visible{
  opacity: 1;
  transform: translate(0, -50%);
}
.voice-card-action i{
  font-size: 1.05rem;
}

.contact-postit strong{
  max-width: 12ch;
  font-size: clamp(1rem, 1.25vw, 1.24rem);
  font-weight: 600;
  line-height: .84;
  text-transform: uppercase;
  text-wrap: balance;
  transform: rotate(-1.5deg);
}

@media (max-width: 760px) {
  .studio-design-layout small,
.studio-design-palette > i::before{
    display: none;
  }
  .studio-design-logo img{ width: 78%; }
  .studio-design-mark img{ width: 84%; }
  .studio-duo-scroll{ animation-duration: 2.2s; }

  .studio-voices{
    display: block;
    min-height: auto;
    margin: 58px 0 84px;
    padding: 64px 18px 76px;
  }
  .studio-voices-nav{
    margin-bottom: 42px;
  }
  .studio-voices-nav h2{
    max-width: 10ch;
    font-size: clamp(2.55rem, 12vw, 3.8rem);
  }
  .voice-scroll-track{
    padding: 0 12px 20px 0;
  }
  .studio-voice-display{
    min-height: 390px;
    padding: 26px 22px 68px;
  }
  .studio-voice-display::before{ transform: translate(7px, 8px) rotate(.8deg); }
  .studio-voice-display::after{ transform: translate(13px, 16px) rotate(1.4deg); }
  .studio-voice-display blockquote{
    font-size: clamp(1.65rem, 7.6vw, 2.15rem);
  }
  .voice-quote-mark{
    margin-top: 26px;
  }
  .voice-card-action,
.studio-voice-display:hover .voice-card-action{
    top: auto;
    right: 18px;
    bottom: 16px;
    min-height: 42px;
    opacity: 1;
    transform: none;
  }
  .contact-postit strong{
    max-width: 12ch;
    font-size: .92rem;
  }
}

@media (hover: none) {
  .voice-card-action,
.studio-voice-display:hover .voice-card-action{
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-duo-scroll{
    animation: none;
  }
  .studio-person-square,
.studio-voice-display,
.studio-voice-display::before,
.studio-voice-display::after,
.voice-card-action{
    transition: none;
  }
}

/* V27 - final cascade lock for the refined Studio direction. */
.compact-footer > p:first-child .footer-brand-logo{
  width: 55px;
  aspect-ratio: 269 / 87;
}
.studio-person-square::after{
  content: none;
}
.studio-person-code{
  border-color: rgb(200 255 46 / 92%);
  background: linear-gradient(145deg, rgb(31 37 38 / 91%), rgb(12 16 17 / 84%));
  box-shadow: 0 20px 55px rgb(200 255 46 / 12%), inset 0 1px 0 rgb(255 255 255 / 16%);
}
.studio-dev-bar{
  border-bottom-color: rgb(220 232 235 / 9%);
  background: rgb(20 26 27 / 62%);
}
.studio-person-canvas{
  border-color: #ff4f9a;
  background: linear-gradient(145deg, rgb(255 255 255 / 68%), rgb(238 224 230 / 56%));
  box-shadow: 0 20px 55px rgb(255 79 154 / 17%), inset 0 1px 0 rgb(255 255 255 / 88%);
}
.studio-design-bar{
  border-bottom-color: rgb(48 39 35 / 10%);
  background: rgb(255 255 255 / 43%);
}
.studio-design-bar > i{
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 58%);
}
.studio-person > p{
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 62%);
  box-shadow: 0 12px 28px rgb(48 39 35 / 14%), inset 0 1px 0 rgb(255 255 255 / 62%);
  backdrop-filter: blur(14px) saturate(138%);
  -webkit-backdrop-filter: blur(14px) saturate(138%);
}
.studio-person > p::after{
  position: absolute;
  z-index: -1;
  inset: 1px 18% 54% 7%;
  border-radius: 999px;
  background: rgb(255 255 255 / 28%);
  content: "";
  filter: blur(3px);
}
.studio-person--dev > p{
  border-color: rgb(200 255 46 / 78%);
  background: linear-gradient(135deg, rgb(200 255 46 / 76%), rgb(143 190 17 / 42%));
  color: #17200a;
}
.studio-person--design > p{
  border-color: rgb(255 79 154 / 76%);
  background: linear-gradient(135deg, rgb(255 79 154 / 72%), rgb(185 45 107 / 38%));
  color: #351321;
}
.studio-duo-copy .eyebrow{
  padding: 6px 9px;
  border: 1px solid rgb(48 39 35 / 10%);
  border-radius: 999px;
  background: rgb(255 255 255 / 54%);
  color: var(--ink);
  font-size: .58rem;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.studio-duo-intro{
  max-width: 31ch;
  color: color-mix(in srgb, var(--ink) 74%, var(--paper));
  font-weight: 520;
  line-height: 1.38;
}
.studio-cursor-bubble{
  transition: opacity 220ms ease, transform 240ms var(--ease);
}
.contact-postit strong{
  max-width: 11ch;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: clamp(.82rem, 1vw, 1rem);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: .9;
  text-wrap: pretty;
  transform: rotate(-1deg);
}

.studio-voices{
  display: grid;
  min-height: auto;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 62px);
  margin-block: clamp(70px, 9vw, 140px);
  padding-block: clamp(70px, 8vw, 112px);
  background: #151515;
  box-shadow: 0 0 0 100vmax #151515;
  color: var(--paper);
  transition: background 420ms ease, box-shadow 420ms ease, color 420ms ease;
}
.studio-voices-nav{
  position: relative;
  top: auto;
  display: flex;
  grid-column: 1;
  align-items: end;
  justify-content: space-between;
  margin: 0;
}
.studio-voices-nav h2{
  max-width: 12ch;
  margin: 0;
  color: currentColor;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.5vw, 5.6rem);
  font-weight: 650;
  line-height: .9;
}
.studio-voices-tools{
  display: flex;
  gap: 12px;
  align-items: center;
}
.voices-hint{
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0;
  color: rgb(248 247 243 / 54%);
  font-size: .62rem;
  text-transform: uppercase;
}
.voices-hint i{
  font-size: .68rem;
  animation: voice-auto-pulse 2.4s ease-in-out infinite;
}
.voice-scroll-track{
  width: min(100%, 1220px);
  min-height: auto;
  margin-inline: auto;
  padding: 0 30px 30px 0;
  grid-column: 1;
}
.voice-scroll-track .studio-voice-display{
  position: relative;
  top: auto;
}
.studio-voice-display{
  display: grid;
  width: 100%;
  min-height: clamp(360px, 34vw, 455px);
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-rows: auto 1fr auto;
  padding: clamp(30px, 4vw, 56px);
  border-radius: 8px;
  background: var(--paper);
}
.voice-card-top{
  grid-column: 1 / -1;
  padding: 0;
  border: 0;
}
.voice-card-top b{
  font-size: .55rem;
}
.voice-quote-mark{
  position: absolute;
  top: clamp(58px, 6vw, 84px);
  left: clamp(30px, 4vw, 56px);
  height: auto;
  margin: 0;
  font-size: clamp(3.4rem, 5vw, 5rem);
}
.studio-voice-display blockquote{
  align-self: center;
  max-width: 28ch;
  grid-column: 1;
  margin: clamp(70px, 8vw, 104px) 0 28px;
  font-size: clamp(1.8rem, 3.2vw, 3.25rem);
  line-height: 1;
}
.studio-voice-display > p{
  grid-column: 1;
  margin: 0;
  font-size: .82rem;
}
.voice-progress{
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.voice-card-action{
  right: -28px;
}

@media (max-width: 760px) {
  .studio-duo-copy .eyebrow{
    padding: 5px 7px;
    font-size: .48rem;
  }
  .studio-duo-intro{
    width: min(25ch, calc(100vw - 92px));
    font-size: .7rem;
  }
  .contact-postit strong{
    max-width: 11ch;
    font-size: .76rem;
    line-height: .9;
  }
  .studio-voices{
    display: grid;
    gap: 36px;
    margin: 58px 0 84px;
    padding: 58px 18px 72px;
  }
  .studio-voices-nav{
    display: flex;
    margin: 0;
    gap: 24px;
    align-items: end;
  }
  .studio-voices-nav h2{
    max-width: 7ch;
    font-size: clamp(2.6rem, 13vw, 3.4rem);
  }
  .studio-voices-tools{
    flex-direction: column-reverse;
    align-items: end;
  }
  .voices-hint span{
    display: none;
  }
  .voice-scroll-track{
    width: 100%;
    padding: 0 12px 18px 0;
  }
  .studio-voice-display{
    min-height: 390px;
    grid-template-columns: 1fr 58px;
    padding: 24px 20px 66px;
  }
  .voice-quote-mark{
    top: 58px;
    left: 20px;
  }
  .studio-voice-display blockquote{
    max-width: 17ch;
    margin-top: 68px;
    font-size: clamp(1.48rem, 7vw, 1.95rem);
  }
  .voice-card-action,
.studio-voice-display:hover .voice-card-action{
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voices-hint i{
    animation: none;
  }
}

/* V29 - final placement after the historical Studio overrides. */
.case-hero-notes{
  display: none;
}
.case-cover [data-project-image],
.case-gallery [data-project-image]{
  cursor: zoom-in;
}
.case-gallery--v3 figcaption{
  top: 18px;
  right: auto;
  bottom: auto;
  left: 18px;
  display: grid;
  width: max-content;
  max-width: calc(100% - 36px);
  grid-template-columns: 32px minmax(0, auto);
  gap: 10px;
  align-items: center;
  padding: 6px 12px 6px 6px;
  border: 1px solid rgb(48 39 35 / 14%);
  border-radius: 7px;
  background: rgb(248 247 243 / 88%);
  box-shadow: 0 12px 34px rgb(48 39 35 / 14%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transition: opacity 180ms ease, transform 260ms var(--ease);
}
.case-gallery--v3 figcaption span:first-child{
  display: grid;
  width: 32px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 5px;
  background: var(--baby-blue, #f6b6b7);
  font-weight: 700;
}
.case-gallery--v3 .case-shot:hover figcaption,
.case-gallery--v3 .case-shot:focus-within figcaption{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.case-lightbox{
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(20 24 25 / 96%);
  color: var(--paper);
  overflow: hidden;
}
.case-lightbox[open]{
  opacity: 1;
  transition: opacity 240ms var(--ease-out);
}
.case-lightbox[open] .case-lightbox-stage{
  transform: scale(1);
  transition: transform 240ms var(--ease-out);
}
@starting-style{
  .case-lightbox[open]{ opacity: 0; }
  .case-lightbox[open] .case-lightbox-stage{ transform: scale(.985); }
}
.case-lightbox.is-closing{
  opacity: 0;
  transition-duration: 180ms;
}
.case-lightbox.is-closing .case-lightbox-stage{
  transform: scale(.985);
  transition-duration: 180ms;
}
.case-lightbox::backdrop{
  background: transparent;
}
.case-lightbox-stage{
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  padding: 30px;
}
.case-lightbox figure{
  display: grid;
  min-width: 0;
  height: calc(100svh - 60px);
  margin: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
}
.case-lightbox figure img{
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.case-lightbox figure img.is-switching{
  animation: case-lightbox-image-in 280ms var(--ease) both;
}
.case-lightbox figcaption{
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: rgb(248 247 243 / 70%);
  font-size: .72rem;
}
.case-lightbox button{
  z-index: 2;
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(248 247 243 / 28%);
  border-radius: 50%;
  background: rgb(248 247 243 / 8%);
  color: var(--paper);
  font-size: 1.15rem;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.case-lightbox button:hover,
.case-lightbox button:focus-visible{
  background: var(--paper);
  color: var(--ink);
  transform: scale(1.05);
}
.case-lightbox-close{
  position: absolute;
  top: 24px;
  right: 24px;
}
.case-lightbox-nav{
  justify-self: center;
}
.case-lightbox-nav--prev{
  grid-column: 1;
}
.case-lightbox figure{
  grid-column: 2;
}
.case-lightbox-nav--next{
  grid-column: 3;
}
@keyframes case-lightbox-image-in {
  0% { opacity: 0; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .case-lightbox[open]{
    transition: opacity 120ms var(--ease-out) !important;
  }
  .case-lightbox[open] .case-lightbox-stage{
    transform: none;
    transition: none !important;
  }
  .case-lightbox figure img.is-switching{
    animation: none;
  }
}
@media (max-width: 620px) {
  .case-gallery--v3 figcaption{
    display: none;
  }
  .case-lightbox-stage{
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    padding: 18px 8px;
  }
  .case-lightbox figure{
    height: calc(100svh - 36px);
    gap: 10px;
  }
  .case-lightbox button{
    width: 40px;
  }
  .case-lightbox-close{
    top: 14px;
    right: 14px;
  }
  .case-lightbox figcaption{
    padding-inline: 4px;
    font-size: .62rem;
  }
}

/* One editorial image rhythm shared by every project case study. */
@media (min-width: 621px) {
  .case-gallery--v3 .case-shot--opening{
    height: clamp(620px, 78svh, 860px);
    min-height: 0;
  }
  .case-gallery--v3 .case-shot--portrait{
    height: clamp(700px, 80svh, 880px);
    min-height: 0;
  }
  .case-gallery--v3 .case-shot--landscape{
    height: clamp(430px, 54svh, 600px);
  }
  .case-gallery--v3 .case-shot--closing{
    height: clamp(680px, 82svh, 920px);
    min-height: 0;
  }
  .case-gallery--v3 .case-shot img{
    object-fit: cover;
  }
}

.case-gallery--v3{
  padding-bottom: clamp(26px, 3vw, 44px);
}
.case-result--v3 blockquote span{
  color: color-mix(in srgb, var(--ink) calc(var(--word-progress, 0) * 100%), #b8b3ad);
  transition: color 100ms linear;
}

@media (min-width: 621px) {
  .case-result--v3{
    min-height: 76svh;
    padding-top: clamp(36px, 4vw, 58px);
    padding-bottom: clamp(62px, 7vw, 108px);
  }
}

@media (max-width: 620px) {
  .case-gallery--v3 .case-shot--closing{
    aspect-ratio: .72;
  }
  .case-result--v3{
    min-height: 62svh;
    padding-top: 38px;
    padding-bottom: 62px;
  }
}
.project-index-taxonomy{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.project-index-taxonomy strong{
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--baby-blue, #f6b6b7);
  color: var(--ink);
  font-size: .62rem;
  font-weight: 750;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 220ms ease, transform 320ms var(--ease);
}
.project-index-taxonomy span{
  color: var(--muted);
  line-height: 1.35;
}
.project-index-list > a:hover .project-index-taxonomy strong,
.project-index-list > a:focus-visible .project-index-taxonomy strong{
  background: var(--paper);
  transform: rotate(-2deg) translateY(-1px);
}

@media (max-width: 620px) {
  .project-service-filter-menu{
    position: fixed;
    top: 122px;
    right: 14px;
    left: 14px;
    width: auto;
  }
  .project-index-taxonomy{
    gap: 7px 9px;
  }
  .project-index-taxonomy strong{
    min-height: 23px;
    padding: 4px 7px;
    font-size: .56rem;
  }
}
.voice-scroll-track .studio-voice-display.voice-card-ghost{
  z-index: 4;
}
.voice-scroll-track .studio-voice-display.voice-card-ghost.is-shuffling-out{
  animation: voice-card-single-away 720ms cubic-bezier(.42, 0, .22, 1) forwards;
}
.studio-voice-display.is-changing{
  animation: none;
}
.studio-voice-display.is-changing .voice-card-top,
.studio-voice-display.is-changing .voice-quote-mark,
.studio-voice-display.is-changing blockquote,
.studio-voice-display.is-changing > p,
.studio-voice-display.is-changing .voice-seal{
  animation: voice-card-content-in 420ms var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .voice-scroll-track .studio-voice-display.voice-card-ghost.is-shuffling-out,
.studio-voice-display.is-changing .voice-card-top,
.studio-voice-display.is-changing .voice-quote-mark,
.studio-voice-display.is-changing blockquote,
.studio-voice-display.is-changing > p,
.studio-voice-display.is-changing .voice-seal{
    animation: none;
  }
}
.studio-duo-intro{
  transition: opacity 190ms ease;
}
.studio-duo-intro.is-faded{
  opacity: 0;
}
.studio-duo-scroll{
  transition: opacity 190ms ease;
}
.studio-duo-scroll.is-faded{
  animation: none;
  opacity: 0;
}
.studio-duo-copy .eyebrow{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .1em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.studio-voices{
  margin-bottom: 0;
  background: #2d4549;
  box-shadow: 0 0 0 100vmax #2d4549;
}

@media (max-width: 760px) {
  .studio-duo-copy .eyebrow{
    padding: 0;
    font-size: .52rem;
  }
  .studio-voice-display > p{
    max-width: calc(100% - 128px);
    font-size: .64rem;
    line-height: 1.25;
  }
}

.voice-card-ghost.is-shuffling-out{
  animation: voice-card-stack-away-v2 720ms cubic-bezier(.42, 0, .22, 1) forwards;
}
@keyframes voice-card-stack-away-v2 {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  62% { opacity: 1; transform: translate3d(18px, 13px, 0) rotate(1.15deg) scale(.99); }
  100% { opacity: 0; transform: translate3d(31px, 26px, 0) rotate(2deg) scale(.978); }
}

/* Keep the physical review stack in the document flow after legacy voice rules. */
.voice-scroll-track[data-voice-track]{
  min-height: calc(clamp(360px, 34vw, 455px) + 34px);
}

@media (max-width: 760px) {
  .voice-scroll-track[data-voice-track]{
    min-height: 414px;
  }
}

/* V31 - soft exit for the review stack and a denser mobile composition. */
.studio-voices{
  row-gap: clamp(42px, 5.5vw, 70px);
  padding-bottom: clamp(100px, 11vw, 170px);
  clip-path: inset(-120px -100vmax -170px);
}
.studio-voices::after{
  position: absolute;
  z-index: 5;
  right: -100vmax;
  bottom: -1px;
  left: -100vmax;
  height: clamp(80px, 9vw, 130px);
  background: linear-gradient(to bottom, rgb(45 69 73 / 0%), #2d4549 86%);
  content: "";
  pointer-events: none;
}
.studio-motion-note{
  border-top: 0;
}

@media (max-width: 620px) {
  .studio-voices{
    gap: 36px;
    margin-bottom: 0;
    padding: 52px 16px 104px;
  }
  .studio-voices-nav{
    align-items: end;
  }
  .studio-voices-nav h2{
    max-width: 7ch;
    font-size: clamp(2.45rem, 12vw, 3rem);
  }
  .voice-scroll-track[data-voice-track]{
    min-height: 354px;
    padding: 0 12px 16px 0;
  }
  .voice-scroll-track .studio-voice-display.voice-stack-card{
    min-height: 336px;
    grid-template-columns: minmax(0, 1fr) 44px;
    padding: 20px 18px 58px;
  }
  .voice-card-top b{
    font-size: .48rem;
  }
  .voice-quote-mark{
    top: 46px;
    left: 18px;
    font-size: 3rem;
  }
  .studio-voice-display blockquote{
    max-width: 19ch;
    margin: 54px 0 16px;
    font-size: clamp(1.14rem, 5.65vw, 1.42rem);
    line-height: 1;
  }
  .studio-voice-display > p{
    right: auto;
    bottom: 16px;
    left: 18px;
    max-width: calc(100% - 145px);
    font-size: .56rem;
    line-height: 1.2;
  }
  .voice-card-action,
.studio-voice-display:hover .voice-card-action{
    right: 12px;
    bottom: 12px;
    min-height: 38px;
    gap: 7px;
    padding-inline: 11px;
    font-size: .62rem;
  }
  .voice-card-action i{
    font-size: .9rem;
  }
  .voice-stack-card[data-voice-slot="1"]{
    transform: translate3d(5px, 6px, 0) rotate(.45deg) scale(.996);
  }
  .voice-stack-card[data-voice-slot="2"]{
    transform: translate3d(10px, 12px, 0) rotate(.85deg) scale(.992);
  }
  .voice-stack-card[data-voice-slot="3"]{
    transform: translate3d(15px, 18px, 0) rotate(1.2deg) scale(.988);
  }
}

/* V32 - Myrak's mascot turns the studio services into a living field guide. */
.studio-info-columns .expertise-menu h3{
  margin-bottom: 0;
}
.studio-info-columns .expertise-menu li{
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 42px;
  align-items: center;
  padding-right: 26px;
  border-bottom: 1px solid rgb(48 39 35 / 10%);
  outline: none;
  transform-origin: left center;
  transition: color 180ms ease, transform 360ms var(--ease);
}
.studio-info-columns .expertise-menu li:first-child{
  border-top: 1px solid rgb(48 39 35 / 10%);
}
.studio-info-columns .expertise-menu li::before{
  position: absolute;
  z-index: -1;
  right: 18px;
  left: -8px;
  height: 62%;
  border-radius: 5px 8px 5px 7px;
  background: color-mix(in srgb, var(--baby-blue) 68%, white);
  content: "";
  opacity: 0;
  transform: scaleX(.05) rotate(-1.2deg);
  transform-origin: left center;
  transition: opacity 160ms ease, transform 380ms var(--ease);
}
.studio-info-columns .expertise-menu li::after{
  display: none;
  content: none;
}
.studio-info-columns .expertise-menu li:hover,
.studio-info-columns .expertise-menu li:focus-visible,
.studio-info-columns .expertise-menu li.is-active{
  color: var(--ink);
  transform: translateX(7px) rotate(-.35deg);
}
.studio-info-columns .expertise-preview{
  position: sticky;
  top: 112px;
  overflow: visible;
  align-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.expertise-preview .studio-material{
  position: relative;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 1;
  border: 1px solid rgb(48 39 35 / 12%);
  border-radius: 6px;
  background: transparent !important;
  box-shadow: 0 24px 58px rgb(48 39 35 / 13%);
  transform: rotate(calc(-1deg + var(--expertise-index, 0) * .22deg));
  transition: transform 520ms var(--ease), box-shadow 320ms ease;
}
.expertise-preview:hover .studio-material{
  box-shadow: 0 30px 72px rgb(48 39 35 / 17%);
  transform: rotate(0) translateY(-4px);
}
.studio-info-columns .expertise-preview::before,
.studio-info-columns .expertise-preview::after,
.expertise-preview .studio-material::before,
.expertise-preview .studio-material::after{
  display: none !important;
  content: none !important;
}
.expertise-preview [data-expertise-image]{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
}
.expertise-preview [data-expertise-image].is-entering{
  animation: expertise-mascot-enter 480ms var(--ease) both;
}
.expertise-preview-meta{
  display: grid;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 13px 3px 0;
  border-top: 0;
}
.studio-info-columns .expertise-preview-meta p{
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.35;
  text-transform: none;
}
.expertise-preview-meta b{
  color: #7fa7b5;
  font-size: .65rem;
  line-height: 1.35;
}
@keyframes expertise-mascot-enter {
  0% { opacity: 0; transform: translate3d(18px, 8px, 0) rotate(1.5deg) scale(.96); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1.015); }
}

@media (max-width: 760px) {
  .studio-info-columns .expertise-menu{ order: 1; }
  .studio-info-columns .expertise-preview{
    position: relative;
    top: auto;
    order: 2;
    width: min(100%, 360px);
    margin: -20px auto 0 !important;
  }
  .studio-info-columns > article:nth-child(2){ order: 3; }
  .studio-info-columns .expertise-menu ul{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-info-columns .expertise-menu li,
.studio-info-columns .expertise-menu li:first-child{
    min-height: 48px;
    padding: 9px 24px 9px 0;
    border-top: 0;
    border-bottom: 1px solid rgb(48 39 35 / 12%);
    font-size: .8rem;
  }
  .studio-info-columns .expertise-menu li:nth-child(odd){
    border-right: 1px solid rgb(48 39 35 / 12%);
  }
  .studio-info-columns .expertise-menu li:nth-child(even){
    padding-left: 12px;
  }
  .studio-info-columns .expertise-menu li:hover,
.studio-info-columns .expertise-menu li:focus-visible,
.studio-info-columns .expertise-menu li.is-active{
    padding-left: 0;
    background: transparent;
    transform: translateX(5px) rotate(-.25deg);
  }
  .studio-info-columns .expertise-menu li:nth-child(even):hover,
.studio-info-columns .expertise-menu li:nth-child(even):focus-visible,
.studio-info-columns .expertise-menu li:nth-child(even).is-active{
    padding-left: 12px;
  }
  .expertise-preview .studio-material{
    border-radius: 5px;
    box-shadow: 0 20px 46px rgb(48 39 35 / 12%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .expertise-preview [data-expertise-image].is-entering{
    animation: none;
  }
  .studio-info-columns .expertise-menu li{
    transition: color 180ms ease;
  }
  .studio-info-columns .expertise-menu li:hover,
.studio-info-columns .expertise-menu li:focus-visible,
.studio-info-columns .expertise-menu li.is-active{
    transform: none;
  }
}

/* Keep navigation feedback tied to Myrak's baby blue across every page. */
.desktop-nav a:not(.header-contact)::after,
.footer-v2-main nav a::after,
.footer-legal a::after,
.compact-footer > a::after{
  background: var(--baby-blue, #f6b6b7);
}
.desktop-nav a:not(.header-contact)::after{
  height: 1px;
  border-radius: 99px;
  transition: transform 360ms var(--ease), height 220ms ease;
}
.footer-legal a::after{
  height: 1px;
  border-radius: 99px;
  transition: transform 360ms var(--ease), height 220ms ease;
}
.desktop-nav a:not(.header-contact):hover::after,
.desktop-nav a:not(.header-contact):focus-visible::after,
.desktop-nav a[aria-current="page"]:not(.header-contact)::after,
.footer-v2-main nav a:hover::after,
.footer-v2-main nav a:focus-visible::after,
.footer-legal a:hover::after,
.footer-legal a:focus-visible::after,
.footer-legal a[aria-current="page"]::after,
.compact-footer > a:hover::after,
.compact-footer > a:focus-visible::after{
  transform: scaleX(1);
  transform-origin: left;
}
.desktop-nav a:not(.header-contact):hover::after,
.desktop-nav a:not(.header-contact):focus-visible::after,
.desktop-nav a[aria-current="page"]:not(.header-contact)::after,
.footer-legal a:hover::after,
.footer-legal a:focus-visible::after,
.footer-legal a[aria-current="page"]::after{
  height: 2px;
}
.compact-footer > a{
  position: relative;
}
.compact-footer > a::after{
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 2px;
  border-radius: 99px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 340ms var(--ease);
}

/* Keep the method opener in the same typographic voice as the page. */
.method-line-hero h1 em{
  color: var(--baby-blue, #f6b6b7);
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* Leave more breathing room for doodles on the contact note. */
.contact-postit strong{
  max-width: 12ch;
  font-size: clamp(.7rem, .82vw, .84rem);
  line-height: .94;
}
@media (max-width: 760px) {
  .contact-postit strong{ font-size: .7rem; }
}

/* A single vertical rhythm and roomier copy for every project case study. */
.case-editorial{
  --case-gallery-gap: clamp(34px, 3.8vw, 58px);
}
.case-gallery--v3{
  gap: var(--case-gallery-gap);
  padding-bottom: 0;
}
.case-gallery--v3 .case-shot--closing{
  margin-top: 0;
}
.case-overview--v3{
  column-gap: clamp(32px, 5vw, 84px);
}
.case-overview--v3 .case-story{
  grid-column: 6 / 13;
}
.case-overview--v3 .case-story h2{
  max-width: 13ch;
}
.case-overview--v3 .case-story > p:not(.eyebrow){
  width: min(100%, 64ch);
  max-width: none;
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.5;
}
.case-overview--v3 .case-story > p:not(.eyebrow) + p{
  margin-top: 1.25em;
}
.case-summary{
  grid-column: 1 / 13;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(34px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 12px 34px 12px 12px;
  background: var(--line);
}
.case-summary article{
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px);
  background:
    linear-gradient(145deg, rgb(2 18 238 / 4%), transparent 48%),
    var(--paper);
}
.case-summary article > span{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.case-summary article > span::before{
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--interaction);
  box-shadow: 0 0 0 1px rgb(2 18 238 / 26%);
  content: "";
}
.case-summary article > p{
  max-width: 34ch;
  margin: 14px 0 0;
  font-size: clamp(.9rem, 1vw, 1.02rem);
  line-height: 1.45;
}
.case-gallery--v3 .decision-note{
  grid-column: 6 / 13;
}
.case-gallery--v3 .decision-note p{
  width: min(100%, 26ch);
  max-width: none;
  line-height: 1.08;
}
.case-result--v3{
  min-height: 68svh;
  align-content: start;
  padding-top: var(--case-gallery-gap);
  padding-bottom: clamp(90px, 10vw, 150px);
}

@media (min-width: 621px) {
  .case-gallery--v3 .case-shot--closing{
    grid-column: 1 / 13;
    height: clamp(700px, 84svh, 940px);
  }
}

@media (max-width: 900px) {
  .case-overview--v3{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(58px, 10vw, 86px);
  }
  .case-overview--v3 .case-meta,
  .case-overview--v3 .case-story{
    position: static;
    grid-column: 1;
    width: 100%;
    margin: 0;
  }
  .case-overview--v3 .case-story h2{
    max-width: 13ch;
    font-size: clamp(3rem, 9vw, 5.2rem);
  }
  .case-overview--v3 .case-story > p:not(.eyebrow){
    width: min(100%, 60ch);
  }
}

@media (max-width: 620px) {
  .case-editorial{
    --case-gallery-gap: 22px;
  }
  .case-gallery--v3{
    gap: var(--case-gallery-gap);
  }
  .case-gallery--v3 .case-shot--opening,
  .case-gallery--v3 .case-shot--portrait,
  .case-gallery--v3 .case-shot--landscape,
  .case-gallery--v3 .case-shot--closing{
    margin: 0;
  }
  .case-gallery--v3 .decision-note{
    grid-column: 1;
    width: 100%;
    margin: clamp(30px, 9vw, 46px) 0;
  }
  .case-gallery--v3 .decision-note p{
    width: min(100%, 23ch);
    margin-top: 40px;
    font-size: clamp(1.85rem, 8.5vw, 2.8rem);
  }
  .case-overview--v3{
    gap: 54px;
    padding-top: 92px;
  }
  .case-meta > div{
    grid-template-columns: minmax(72px, .7fr) minmax(0, 1.3fr);
    gap: 16px;
  }
  .case-overview--v3 .case-story h2{
    max-width: none;
    font-size: clamp(2.55rem, 12vw, 4rem);
  }
  .case-overview--v3 .case-story > p:not(.eyebrow){
    width: 100%;
    font-size: .98rem;
    line-height: 1.55;
  }
  .case-summary{
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
    border-radius: 10px 28px 10px 10px;
  }
  .case-summary article{
    padding: 18px;
  }
  .case-summary article > p{
    margin-top: 9px;
    font-size: .9rem;
  }
  .case-result--v3{
    min-height: 58svh;
    padding-top: var(--case-gallery-gap);
    padding-bottom: 76px;
  }
}

/* V34 - final mobile QA: calmer gutters, contained interactions and touch targets. */
.contact-aside{
  padding-left: max(clamp(36px, 4vw, 68px), calc((100vw - 1520px) / 2));
  padding-right: max(clamp(36px, 4vw, 68px), calc((100vw - 1520px) / 2));
}
.contact-aside-copy > p:last-child{
  line-height: 1.5;
}

@media (max-width: 760px) {
  .contact-aside{
    min-height: 96svh;
    padding: 124px 28px 48px;
  }
  .contact-aside-copy{
    width: min(100%, 34rem);
    max-width: none;
    margin-inline: auto;
  }
  .contact-aside-copy h1{
    margin-bottom: 32px;
    font-size: clamp(4rem, 18vw, 5.35rem);
  }
  .contact-aside-copy > p:last-child{
    width: min(100%, 31ch);
    max-width: none;
  }
  .contact-panel{
    place-items: start center;
    padding: 96px 28px 72px;
  }
  .contact-panel .contact-form,
  .contact-panel .guided-form{
    grid-column: 1;
    width: min(100%, 34rem);
    margin-inline: auto;
  }

  .project-service-filter-toggle{
    width: 40px;
    height: 40px;
  }
  .project-mode-switch button{
    width: 40px;
    height: 36px;
  }

  .process-journey--v3 .journey-object.object-dialogue{
    width: min(86%, 300px);
    margin-right: 0;
  }
  .process-journey--v3 .object-dialogue span{
    max-width: 100%;
  }
  .process-journey--v3 .object-dialogue span:last-child{
    width: min(100%, 250px);
  }
  .process-journey--v3 .object-dialogue span b{
    white-space: normal;
  }
  .process-journey--v3 .exploration-directions{
    width: calc(100vw - 82px);
    max-width: 310px;
    margin-right: 0;
  }
  .process-journey--v3 .exploration-directions figure:nth-child(1){
    transform: translate(-8%, 5%) rotate(-7deg);
  }
  .process-journey--v3 .exploration-directions figure:nth-child(2){
    transform: translate(28%, -3%) rotate(2deg);
  }
  .process-journey--v3 .exploration-directions figure:nth-child(3){
    transform: translate(49%, 8%) rotate(4deg);
  }
  .process-journey--v3 > .method-constants--integrated{
    width: calc(100% + 28px);
    margin-left: -14px;
    transform: none;
  }

  .case-lightbox-close{
    border-color: rgb(248 247 243 / 58%);
    background: rgb(248 247 243 / 18%);
  }
}

/* V34 - playful feedback shared by the footer, primary actions and project views. */
@keyframes myrak-footer-bounce {
  0% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(-4px) rotate(-1.8deg); }
  68% { transform: translateY(1px) rotate(.8deg); }
  100% { transform: translateY(-1px) rotate(-.35deg); }
}
@keyframes myrak-button-bounce {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-3px) scale(1.012); }
  72% { transform: translateY(0) scale(.997); }
  100% { transform: translateY(-1px) scale(1); }
}

.footer-home-link,
.footer-v2-mark{
  transform-origin: 45% 70%;
  will-change: transform;
}
.footer-home-link--year{
  color: inherit;
}

:is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action){
  transform-origin: center;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .footer-home-link:hover,
  .footer-home-link:focus-visible,
  .footer-v2-mark:hover,
  .footer-v2-mark:focus-visible{
    animation: myrak-footer-bounce 480ms var(--ease) both;
  }
  .footer-home-link:hover .footer-brand-logo,
  .footer-home-link:focus-visible .footer-brand-logo{
    opacity: 1;
    transform: rotate(1.5deg) scale(1.035);
  }
  :is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action):hover,
  :is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action):focus-visible{
    animation: myrak-button-bounce 420ms var(--ease) both;
  }
}

:is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action):active,
.footer-home-link:active,
.footer-v2-mark:active{
  animation: none;
  transform: translateY(1px) scale(.975);
  transition-duration: 80ms;
}

/* V35 - 2026 palette, quieter motion and touch-first responsive corrections. */
.intro-loader{
  background: var(--primary);
}
.intro-loader::after{
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: var(--paper);
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
  transform: translateY(101%);
}
.intro-loader-brand svg{ display: none; }
.intro-loader.is-leaving::after{ animation: intro-separator-wipe 740ms cubic-bezier(.76, 0, .2, 1) forwards; }
.intro-loader.is-leaving .intro-loader-brand{ animation: intro-brand-leave 330ms ease forwards; }
@keyframes intro-separator-wipe{
  to{ transform: translateY(-4%); }
}

.method-constants--integrated,
.studio-voices{
  background: var(--wine);
}
.method-constants--integrated .eyebrow,
.method-constants--integrated .method-constants-cards span{
  color: var(--acid);
}
.method-constants--integrated .method-constants-cards article{
  border-color: rgb(246 246 210 / 22%);
  background: rgb(246 246 210 / 8%);
}
.method-constants--integrated .method-constants-cards p{ color: rgb(246 246 210 / 76%); }
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="0"]{ background: var(--cream); }
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="1"]{ background: var(--sky); }
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="2"]{ background: var(--primary); }
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="3"]{ background: var(--acid); }
.voice-scroll-track .studio-voice-display.voice-stack-card{ color: var(--ink); }
.studio-voices{ box-shadow: 0 0 0 100vmax var(--wine); }
.studio-voices::after{ background: linear-gradient(to bottom, rgb(153 19 72 / 0%), var(--wine) 86%); }
.studio-duo-hero{ --role-dev: var(--acid); --role-design: var(--primary); }
.studio-person--design,
.studio-person--design .studio-person-square{
  color: var(--primary);
  border-color: var(--primary);
}
.studio-person--design .studio-person-square{ box-shadow: 0 18px 42px rgb(2 18 238 / 20%); }
.studio-person--design > p{ background: var(--primary); color: var(--ink); }
.studio-person--dev > p{ color: var(--ink); }
body[data-project-key="book-house"] .case-hero{ background: var(--cream); }
.project-service-filter-toggle.is-active,
.project-service-filter-menu button[aria-pressed="true"],
.project-mode-switch button[aria-pressed="true"]{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--ink);
}
.project-service-filter-toggle.is-active{ transform: none; }
.project-service-filter-toggle,
.project-mode-switch button{
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 320ms var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .project-service-filter-toggle:hover,
  .project-service-filter-toggle:focus-visible,
  .project-mode-switch button:hover,
  .project-mode-switch button:focus-visible{ transform: translateY(-1px); }
  .studio-info-columns .expertise-menu li:hover,
  .studio-info-columns .expertise-menu li:focus-visible,
  .studio-info-columns .expertise-menu li.is-active{
    color: var(--primary);
    transform: translateX(4px);
  }
}
.form-status{ color: var(--wine); }

/* Premium feedback: lift and directional movement instead of springy rebounds. */
.footer-home-link,
.footer-v2-mark,
:is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action){
  animation: none !important;
  transition: transform 360ms var(--ease), background-color 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 360ms ease;
}
@media (hover: hover) and (pointer: fine){
  .footer-home-link:hover,
  .footer-home-link:focus-visible,
  .footer-v2-mark:hover,
  .footer-v2-mark:focus-visible{
    animation: none;
    transform: translateY(-2px) rotate(-.45deg);
  }
  :is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action):hover,
  :is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action):focus-visible{
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgb(153 19 72 / 14%);
  }
  :is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action):hover :is(.ph-arrow-right, .ph-arrow-up-right),
  :is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action):focus-visible :is(.ph-arrow-right, .ph-arrow-up-right){
    transform: translate(2px, -1px);
  }
  .social-dock a:hover{
    background: var(--primary);
    color: var(--ink);
    transform: translateY(-2px);
  }
  .method-constants--integrated .method-constants-cards article:hover{
    border-color: var(--acid);
    background: var(--cream);
    color: var(--ink);
    transform: translateY(-5px);
  }
  .method-constants--integrated .method-constants-cards article:nth-child(2):hover{ transform: translateY(37px); }
}
:is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action):active,
.footer-home-link:active,
.footer-v2-mark:active{
  animation: none;
  transform: translateY(0) scale(.985);
}

.mobile-socials{ display: none; }

@media (max-width: 620px){
  .social-dock{ display: none; }
  .mobile-menu .mobile-socials{
    display: flex;
    position: static;
    margin-top: auto;
    gap: 8px;
  }
  .mobile-menu .mobile-socials a{
    display: inline-flex;
    width: auto;
    min-height: 42px;
    gap: 8px;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1;
  }
  .mobile-menu .mobile-socials i{ font-size: 1rem; }
  .mobile-menu > p{ bottom: 18px; right: 18px; max-width: 23ch; text-align: right; }

  .studio-duo-copy h1{
    top: 50%;
    width: calc(100% - 40px);
    font-size: clamp(2.85rem, 13vw, 3.55rem);
    line-height: .9;
    text-align: center;
  }
  .studio-duo-intro{
    top: calc(100svh - 104px);
    width: min(31ch, calc(100vw - 72px));
    margin: -104px 20px 0 auto;
    font-size: .7rem;
    line-height: 1.25;
    text-align: right;
  }
  .studio-specialty-intro .studio-specialty-copy{
    max-width: 17ch !important;
    font-size: clamp(2.25rem, 10.7vw, 2.85rem) !important;
    line-height: .94;
  }
  .studio-about-stories article p,
  .studio-information + .studio-about .studio-about-stories article p{
    font-size: clamp(1.3rem, 6vw, 1.75rem);
    line-height: 1.08;
  }
  .studio-info-columns article > p,
  .studio-info-columns li{ font-size: .9rem; }

  /* The full-width SVG keeps its real curves; JS now maps scroll distance to screen length. */
  .process-journey--v3 .journey-line{
    left: 0;
    width: 100%;
    opacity: .9;
  }
  .process-journey--v3 .journey-line-ghost{
    stroke: rgb(153 19 72 / 22%);
    stroke-dasharray: 9 16;
  }
  .process-journey--v3 .journey-step{
    padding-inline: 34px 18px;
  }
  .method-constants--integrated .method-constants-cards{
    gap: 18px;
  }
  .method-constants--integrated .method-constants-cards article,
  .method-constants--integrated .method-constants-cards article:nth-child(2),
  .method-constants--integrated .method-constants-cards article:nth-child(3){
    position: relative;
    z-index: 1;
    min-height: 230px;
    margin: 0;
    transform: none;
  }
  .method-constants--integrated .method-constants-cards article:focus-within,
  .method-constants--integrated .method-constants-cards article:active{ z-index: 3; }

  /* Case titles lead; the supporting line sits inside the lower-left of the image. */
  .case-hero--v3{
    display: grid;
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(500px, 68svh);
    gap: 12px;
    padding: 98px 0 18px;
  }
  .case-hero-top{ position: static; grid-column: 1; grid-row: 1; }
  .case-title{
    display: contents;
    position: static;
  }
  .case-title h1{
    z-index: 5;
    grid-column: 1;
    grid-row: 2;
    max-width: 100%;
    margin: 0 0 2px;
    font-size: clamp(3rem, 15vw, 4.65rem);
    line-height: .84;
    white-space: nowrap;
  }
  .case-title > p:last-child{
    position: absolute;
    z-index: 6;
    bottom: 48px;
    left: 14px;
    max-width: min(24ch, calc(100% - 52px));
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--primary);
    background: rgb(248 247 243 / 88%);
    font-size: .92rem;
    backdrop-filter: blur(10px);
  }
  .case-hero--v3 .case-cover{
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 0;
    grid-column: 1;
    grid-row: 3;
    clip-path: none;
  }
  .case-scroll-cue{ right: 14px; bottom: 24px; }
  .case-gallery--v3 figcaption{
    display: grid;
    top: 12px;
    right: auto;
    bottom: auto;
    left: 12px;
    max-width: calc(100% - 24px);
    opacity: 1;
    transform: none;
  }
}

/* V55 - Optical mobile alignment and a glow-free navigation panel. */
@media (max-width: 620px){
  .home-page .hero-logo-motion{
    translate: -.095em 0;
  }
  .home-page .hero-v2-heading > p:first-child{
    padding-left: 8px;
  }
  .site-header:has(.menu-toggle[aria-expanded="true"]),
  .site-header:has(.menu-toggle[aria-expanded="true"]) .wordmark,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu *{
    text-shadow: none !important;
    filter: none !important;
  }
  .mobile-menu nav a[aria-current="page"]::after{
    box-shadow: 0 0 7px rgb(255 255 255 / 42%);
    animation: mobile-active-dot 2.4s ease-in-out infinite;
  }
}

@keyframes mobile-active-dot{
  0%, 100%{ opacity: .78; transform: scale(.9); }
  50%{ opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce){
  .mobile-menu nav a[aria-current="page"]::after{
    animation: none;
  }
}

@media (max-width: 370px){
  .case-title h1{ font-size: clamp(2.7rem, 14vw, 3.8rem); }
}

@media (prefers-reduced-motion: reduce){
  .intro-loader.is-leaving::after{ animation-duration: 1ms; }
  .footer-home-link,
  .footer-v2-mark,
  :is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action){ transition-duration: 1ms; }
}

.case-editorial .case-cover [data-project-image],
.case-editorial .case-gallery .case-shot [data-project-image]{
  --case-image-scale: 1.04;
  --case-parallax-y: 0px;
  transform: translate3d(0, var(--case-parallax-y), 0) scale(var(--case-image-scale));
  transform-origin: center;
  transition: transform 180ms linear, filter 420ms ease;
  will-change: transform;
}
.case-editorial .case-cover:hover [data-project-image],
.case-editorial .case-cover:focus-within [data-project-image],
.case-editorial .case-gallery .case-shot:hover [data-project-image],
.case-editorial .case-gallery .case-shot:focus-within [data-project-image]{
  --case-image-scale: 1.055;
}

.project-index-list > a{
  backface-visibility: hidden;
  transform-origin: center top;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .footer-home-link,
  .footer-v2-mark,
  :is(.button, .header-contact, .contact-direct button, .contact-direct a, .voice-card-action){
    animation: none !important;
    transform: none !important;
  }
  .case-editorial .case-cover [data-project-image],
  .case-editorial .case-gallery .case-shot [data-project-image]{
    --case-image-scale: 1;
    --case-parallax-y: 0px;
    transition: none;
  }
}

/* V36 - powder pink accents, a quieter studio palette and calmer method chapters. */
.desktop-nav .header-contact:hover,
.desktop-nav .header-contact:focus-visible,
.desktop-nav .header-contact[aria-current="page"]{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--ink);
}

.studio-color-filters{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.studio-duo-hero{ --role-design: #ff4f9a; }
.studio-person--design,
.studio-person--design .studio-person-square{
  color: #ff4f9a;
  border-color: #ff4f9a;
}
.studio-person--design .studio-person-square{
  box-shadow: 0 18px 42px rgb(255 79 154 / 20%);
}
.studio-person--design > p{
  background: #ff4f9a;
  color: var(--ink);
}
.studio-person-canvas{
  background: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(246 182 183 / 18%));
}
.studio-design-layout{
  border-color: rgb(36 25 22 / 12%);
  background: rgb(255 255 255 / 48%);
}
.studio-design-layout > span:nth-child(1){ background: var(--baby-blue); }
.studio-design-layout > span:nth-child(2){ background: #f8f7f3; }
.studio-design-layout > span:nth-child(3){ background: color-mix(in srgb, var(--baby-blue) 58%, white); }
.studio-design-logo img{ filter: brightness(0) invert(1); }
.studio-design-mark img{
  filter: none;
  opacity: .72;
}
.studio-design-bar > i:first-child,
.studio-design-palette > i:first-child{ background: var(--baby-blue); }
.studio-design-bar > i:nth-child(2),
.studio-design-palette > i:nth-child(2){ background: var(--wine); }
.studio-design-bar > i:nth-child(3),
.studio-design-palette > i:nth-child(3){ background: var(--paper); }

.studio-info-columns .expertise-menu li::before{ background: var(--baby-blue); }
@media (hover: hover) and (pointer: fine){
  .studio-info-columns .expertise-menu li:hover,
  .studio-info-columns .expertise-menu li:focus-visible,
  .studio-info-columns .expertise-menu li.is-active{
    color: var(--ink);
  }
}
.expertise-preview-meta b{ color: var(--wine); }

.journey-step--paper::before{ background: var(--paper); }
.journey-step--blue::before{ background: var(--baby-blue); }
.journey-step--warm::before{ background: #eadde5; }
.journey-step--adjustments::before{ background: var(--sky); }
.journey-step--dark::before{ background: #621033; }
.method-constants--integrated{ background: #621033; }
.method-constants--integrated,
.studio-voices{ box-shadow: none; }

.contact-postit{
  background: #5390a5;
  color: var(--ink);
}
.contact-postit::after{
  background: linear-gradient(135deg, rgb(36 25 22 / 15%) 0 49%, #9fd6eb 51%);
}

.form-navigation .button:hover,
.form-navigation .button:focus-visible,
.contact-direct a:hover,
.contact-direct a:focus-visible,
.contact-direct button:hover,
.contact-direct button:focus-visible{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--ink);
}

/* V37 - the primary signal leads; powder pink replaces the former baby-blue surfaces. */
.process-journey--v3 [data-progress-path]{
  stroke: var(--primary);
}
.process-journey--v3 [data-progress-dot]{
  fill: var(--primary);
  filter: drop-shadow(0 0 8px rgb(2 18 238 / 42%));
}
.process-journey--v3 .journey-line-ghost{
  stroke: rgb(246 182 183 / 46%);
}
.method-final-dot{
  border-color: var(--primary);
  box-shadow: 0 0 0 7px rgb(2 18 238 / 12%);
}
.method-final-dot.is-complete{
  background: var(--primary);
  box-shadow: 0 0 0 10px rgb(2 18 238 / 16%);
}
@keyframes method-dot-arrival{
  0%{ background: var(--paper); transform: scale(.7); }
  55%{ background: var(--primary); transform: scale(1.26); }
  100%{ background: var(--primary); transform: scale(1.08); }
}
.form-progress > i{
  background: color-mix(in srgb, var(--primary) 24%, var(--line));
}
.form-progress > i b{
  background: var(--primary);
  box-shadow: 0 0 12px rgb(2 18 238 / 34%);
}
.form-progress > i::after{
  background: var(--primary);
}
.journey-step--adjustments::before{
  background: color-mix(in srgb, var(--wine) 10%, var(--paper));
}

/* V38 - the primary colour is the active signal; pink stays a supporting surface. */
.desktop-nav a:not(.header-contact)::after{
  background: var(--primary);
}

.method-line-hero h1 em{
  color: var(--primary);
}

.hero-dot-balloon{
  background: var(--primary);
  box-shadow: 0 0 0 0 rgb(2 18 238 / 20%);
}
.hero-dot-balloon:hover,
.hero-dot-balloon:focus-visible{
  box-shadow: 0 0 0 .035em rgb(2 18 238 / 24%);
}
.hero-dot-balloon.is-dragging{
  box-shadow: 0 0 0 .05em rgb(2 18 238 / 20%), 0 .035em .08em rgb(36 25 22 / 18%);
}
.hero-logo-motion::before{
  background: rgb(2 18 238 / 44%);
}

.page-transition{
  background: var(--primary);
  color: var(--ink);
}
.page-transition::before{
  background: var(--cream);
}

.launch-window-body > span i{
  background: var(--primary);
}
.launch-live{
  background: var(--primary);
  color: var(--paper);
}

/* A quieter dark family replaces the large wine-coloured surfaces. */
.journey-step--dark::before,
.method-constants--integrated{
  background: #352832;
}
.process-journey--v3 .journey-step--dark .journey-copy{
  border-color: rgb(248 247 243 / 18%);
  background: rgb(248 247 243 / 7%);
  box-shadow: 0 24px 70px rgb(15 9 13 / 16%);
}

.studio-voices{
  background: #352832;
  box-shadow: none;
}
.studio-voices::after{
  background: linear-gradient(to bottom, rgb(53 40 50 / 0%), #352832 86%);
}
.studio-voices-nav h2,
.studio-voices-nav .eyebrow,
.studio-voices .voices-hint{
  color: var(--paper);
}
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="0"]{
  background: var(--paper);
}
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="1"]{
  background: var(--baby-blue);
}
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="2"]{
  background: color-mix(in srgb, var(--baby-blue) 58%, var(--paper));
}
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="3"]{
  background: color-mix(in srgb, var(--wine) 18%, var(--paper));
}

/* V39 - the home contact panel becomes a decisive primary call to action. */
.home-page .contact-path{
  border: 1px solid rgb(36 25 22 / 16%);
  background: var(--primary);
  color: var(--ink);
  box-shadow: 0 24px 64px rgb(82 31 15 / 12%);
}
.home-page .contact-path > p{
  max-width: 36ch;
  color: var(--ink);
  font-weight: 600;
}
.home-page .contact-path .button{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  border-color: var(--cream);
  background: var(--cream);
  color: var(--ink);
}
.home-page .contact-path-options button{
  border-color: rgb(36 25 22 / 52%);
  color: var(--ink);
}
.home-page .contact-path-options button:hover,
.home-page .contact-path-options button:focus-visible{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* V40 - project-list selection and filtering share the primary active signal. */
.project-index-taxonomy strong{
  background: var(--primary);
  color: var(--ink);
}
.project-index-list > a{
  transition: min-height 420ms var(--ease), background-color 300ms ease, color 260ms ease;
}
.project-index-list > a:hover,
.project-index-list > a:focus-visible{
  background: var(--primary);
  color: var(--ink);
}
.project-index-list h2,
.project-index-list > a > span,
.project-index-taxonomy span{
  transition: color 240ms ease, transform 380ms var(--ease), opacity 240ms ease;
}
.project-index-list > a:hover h2,
.project-index-list > a:focus-visible h2{
  transform: translateX(6px);
}
.project-index-list > a:hover > span,
.project-index-list > a:focus-visible > span{
  color: var(--ink);
  transform: translateX(-4px);
}
.project-index-list > a:hover .project-index-taxonomy span,
.project-index-list > a:focus-visible .project-index-taxonomy span{
  color: var(--ink);
  opacity: .76;
}
.project-index-list > a:hover .project-index-taxonomy strong,
.project-index-list > a:focus-visible .project-index-taxonomy strong{
  background: var(--cream);
  color: var(--ink);
}
.project-index-title .index-stickers img:nth-child(2){
  border-color: var(--cream);
}

.project-service-filter-toggle:hover,
.project-service-filter-toggle:focus-visible,
.project-service-filter-toggle.is-active,
.project-service-filter-menu button[aria-pressed="true"],
.project-mode-switch button[aria-pressed="true"]{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--ink);
}
.project-service-filter-menu button:hover,
.project-service-filter-menu button:focus-visible{
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, var(--paper));
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce){
  .project-index-list h2,
  .project-index-list > a > span,
  .project-index-taxonomy span{
    transition: none;
  }
  .project-index-list > a:hover h2,
  .project-index-list > a:focus-visible h2,
  .project-index-list > a:hover > span,
  .project-index-list > a:focus-visible > span{
    transform: none;
  }
}

/* V41 - a lighter Studio hierarchy built from the approved Myrak palette. */
.studio-cursor-bubble{
  border-color: rgb(36 25 22 / 16%);
  background: #5390a5;
  color: var(--ink);
  box-shadow: 0 9px 26px rgb(47 104 123 / 20%);
}

.expertise-preview-meta b{
  color: var(--primary);
}

.studio-info-columns .expertise-menu li::before{
  right: 26%;
  left: -3px;
  height: 42%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 18%, var(--paper));
  transform: scaleX(.08);
}
.studio-info-columns .expertise-menu li:hover,
.studio-info-columns .expertise-menu li:focus-visible,
.studio-info-columns .expertise-menu li.is-active{
  color: var(--primary);
  transform: translateX(4px);
}
.studio-info-columns .expertise-menu li:hover::before,
.studio-info-columns .expertise-menu li:focus-visible::before,
.studio-info-columns .expertise-menu li.is-active::before{
  opacity: 1;
  transform: scaleX(1);
}

.studio-information + .studio-about::before{
  background: color-mix(in srgb, var(--primary) 11%, var(--paper));
  opacity: 1;
}
.studio-information + .studio-about::after{
  border-color: rgb(2 18 238 / 18%);
}
.studio-information + .studio-about .studio-about-heading .eyebrow{
  color: var(--primary);
}
.studio-information + .studio-about .studio-about-tabs button span{
  border-color: rgb(36 25 22 / 18%);
  background: var(--paper);
}
.studio-information + .studio-about .studio-about-tabs button:hover span,
.studio-information + .studio-about .studio-about-tabs button:focus-visible span{
  border-color: var(--primary);
}
.studio-information + .studio-about .studio-about-tabs button[aria-selected="true"] span{
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 20%, var(--paper));
  color: var(--ink);
  box-shadow: 0 0 0 5px rgb(2 18 238 / 10%);
}
.studio-information + .studio-about .studio-about-stories article{
  border: 1px solid rgb(2 18 238 / 12%);
  background: color-mix(in srgb, var(--primary) 12%, var(--paper));
  box-shadow: none;
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="0"]{
  background: #f6f6d2;
}
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="1"]{
  background: #f6b6b7;
}
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="2"]{
  background: #ff4c00;
}
.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="3"]{
  background: #d0cf51;
}

/* V42 - the primary stays bold; the interaction accent supports quieter states. */
.studio-duo-copy h1 em{
  color: var(--primary);
}

.studio-design-logo{
  position: relative;
  overflow: hidden;
  background: var(--baby-blue) !important;
}
.studio-design-logo img{
  opacity: 0;
}
.studio-design-logo::after{
  position: absolute;
  inset: 20%;
  background: var(--primary);
  content: "";
  -webkit-mask: url("./assets/brand/myrak-logo.svg") center / contain no-repeat;
  mask: url("./assets/brand/myrak-logo.svg") center / contain no-repeat;
}
.studio-design-logo small{
  z-index: 2;
}

.studio-info-columns .expertise-menu li::before{
  right: 20%;
  left: -5px;
  height: 38%;
  border-radius: 42% 18% 36% 16%;
  background: color-mix(in srgb, var(--interaction) 42%, var(--paper));
  clip-path: polygon(0 22%, 8% 8%, 23% 15%, 42% 4%, 61% 14%, 79% 5%, 100% 18%, 98% 80%, 83% 92%, 61% 84%, 42% 96%, 20% 86%, 2% 94%);
  transform: scaleX(.04) rotate(-1.4deg);
}
.studio-info-columns .expertise-menu li:hover,
.studio-info-columns .expertise-menu li:focus-visible,
.studio-info-columns .expertise-menu li.is-active{
  color: var(--ink);
  transform: translateX(5px) rotate(-.55deg);
}
.studio-info-columns .expertise-menu li:hover::before,
.studio-info-columns .expertise-menu li:focus-visible::before,
.studio-info-columns .expertise-menu li.is-active::before{
  opacity: 1;
  transform: scaleX(1) rotate(-.7deg);
}

.journey-step--blue::before{
  background: var(--interaction);
}
.journey-step--blue .direction-map span{
  background: var(--interaction);
}
.journey-step--blue .direction-map{
  box-shadow: inset 0 0 0 12px rgb(215 255 63 / 16%);
}

.studio-voices,
.studio-motion-note{
  background: var(--interaction);
}
.studio-voices{
  box-shadow: 0 0 0 100vmax var(--interaction);
}
.studio-voices::after{
  background: linear-gradient(to bottom, rgb(215 255 63 / 0%), var(--interaction) 86%);
}

.page-cta > a b{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--ink);
  box-shadow: 0 0 0 8px rgb(215 255 63 / 14%);
}
.page-cta:hover > a b,
.page-cta:focus-within > a b,
.page-cta > a:hover b{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
}

.contact-page,
.contact-page .contact-shell,
.contact-page .contact-aside{
  background: var(--interaction);
}
.contact-page .site-header::before{
  background: color-mix(in srgb, var(--interaction) 88%, transparent);
}

.home-page .contact-path{
  background: var(--interaction);
}

.method-constants--integrated .method-constants-cards article:hover,
.method-constants--integrated .method-constants-cards article:focus-within,
.method-constants--integrated .method-constants-cards article:active{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--ink);
}

.method-constants--integrated .method-constants-cards article:hover span,
.method-constants--integrated .method-constants-cards article:hover p,
.method-constants--integrated .method-constants-cards article:focus-within span,
.method-constants--integrated .method-constants-cards article:focus-within p,
.method-constants--integrated .method-constants-cards article:active span,
.method-constants--integrated .method-constants-cards article:active p{
  color: var(--ink);
}
.contact-aside h1 em{
  color: var(--primary);
}

.language-switch button:hover,
.language-switch button:focus-visible,
.language-switch button[aria-pressed="true"],
.mobile-language button:hover,
.mobile-language button:focus-visible,
.mobile-language button[aria-pressed="true"]{
  background: var(--primary);
  color: var(--paper);
  opacity: 1;
}

.desktop-nav a:not(.header-contact)::after,
.footer-v2-main nav a::after,
.footer-legal a::after,
.compact-footer > a::after{
  background: var(--primary);
}

@media (max-width: 760px){
  .contact-aside-copy{
    width: 100%;
    max-width: 34rem;
  }
  .contact-aside-copy > p:last-child{
    width: min(100%, 34ch);
    max-width: none;
  }
}

/* V43 - final role-based colour pass. The primary drives actions;
   the interaction accent supports surfaces and quieter motion. */
.next-project .next-project-arrow{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--ink);
  transform: none;
}
.next-project .next-project-arrow i{
  transition: transform 440ms var(--ease);
  transform: rotate(-45deg);
}
.next-project--v4 a:hover .next-project-arrow,
.next-project--v4 a:focus-visible .next-project-arrow{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--ink);
  transform: translateY(-2px);
}
.next-project--v4 a:hover .next-project-arrow i,
.next-project--v4 a:focus-visible .next-project-arrow i{
  transform: rotate(0);
}

.object-dialogue span:last-child,
.object-dialogue span:last-child::after{
  background: var(--interaction);
}
.object-dialogue span:last-child::before,
.object-dialogue i::after{
  background: var(--interaction);
}
.object-dialogue i::after{
  box-shadow: 0 0 0 5px rgb(215 255 63 / 20%);
}

.studio-design-logo{
  background: var(--interaction) !important;
}
.studio-design-logo::after{
  background: var(--paper);
}
.studio-design-layout > span:nth-child(2){
  background: var(--cream);
}
.studio-design-layout > span:nth-child(3){
  background: var(--baby-blue);
}

.case-gallery--v3 figcaption span:first-child{
  background: var(--interaction);
}

.footer-v2-contact:hover,
.footer-v2-contact:focus-visible{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--ink);
}
.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--ink);
}

.journey-step--sage::before{
  background: var(--cream);
}
.journey-step--warm::before{
  background: var(--baby-blue);
}
.journey-step--adjustments::before{
  background: color-mix(in srgb, var(--acid) 34%, var(--paper));
}

.footer-home-link:hover .footer-brand-logo,
.footer-home-link:focus-visible .footer-brand-logo{
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(35%) sepia(97%) saturate(3325%) hue-rotate(357deg) brightness(99%) contrast(86%);
}

.intro-loader,
.page-transition{
  background: var(--interaction);
  color: var(--paper);
}
.page-transition::before{
  background: var(--primary);
}

.contact-page,
.contact-page .contact-shell,
.contact-page .contact-aside{
  background: var(--cream);
}
.contact-page .site-header::before{
  background: color-mix(in srgb, var(--cream) 90%, transparent);
}
.contact-aside-copy h1{
  max-width: 12ch;
}
.contact-aside-copy h1 span{
  color: var(--ink);
}
.contact-aside-copy h1 em{
  color: var(--primary);
  white-space: nowrap;
}
.contact-postit{
  background: var(--baby-blue);
  color: var(--ink);
  box-shadow: 0 18px 42px rgb(153 19 72 / 14%);
}
.contact-postit strong,
.contact-postit .postit-drag-handle{
  color: var(--ink);
}
.contact-postit::after{
  background: linear-gradient(135deg, rgb(153 19 72 / 14%) 0 49%, color-mix(in srgb, var(--baby-blue) 62%, var(--paper)) 51%);
}

.sound-toggle:hover,
.sound-toggle:focus-visible,
.site-header.is-dark .sound-toggle:hover,
.site-header.is-dark .sound-toggle:focus-visible{
  background: var(--primary);
  color: var(--ink);
  opacity: 1;
}

@media (max-width: 760px){
  .contact-aside-copy h1{
    max-width: none;
    font-size: clamp(3.2rem, 14.5vw, 4.4rem);
  }
  .contact-aside-copy h1 em{
    white-space: nowrap;
  }
}

/* V44 - polished action arrows, stable transitions and warmer neutrals. */
.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

.next-project-arrow{
  width: 64px;
  height: 64px;
  border-color: var(--interaction);
  background: var(--interaction);
  box-shadow: 0 0 0 7px rgb(215 255 63 / 14%);
  font-size: 1.35rem;
}
.next-project-arrow i{
  transform: rotate(-8deg) scale(.94);
}
.next-project--v4 a:hover .next-project-arrow,
.next-project--v4 a:focus-visible .next-project-arrow{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--ink);
  box-shadow: 0 0 0 7px rgb(2 18 238 / 16%);
  transform: translateY(-2px) scale(1.03);
}
.next-project--v4 a:hover .next-project-arrow i,
.next-project--v4 a:focus-visible .next-project-arrow i{
  transform: rotate(0) scale(1);
}

.sound-toggle:hover,
.sound-toggle:focus-visible,
.site-header.is-dark .sound-toggle:hover,
.site-header.is-dark .sound-toggle:focus-visible{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
}

.contact-page,
.contact-page .contact-shell,
.contact-page .contact-aside{
  background: #f4eeea;
}
.contact-page .site-header::before{
  background: color-mix(in srgb, #f4eeea 92%, transparent);
}

.page-transition{
  contain: layout paint style;
  transform: translate3d(0, 102%, 0);
  transition: transform 620ms cubic-bezier(.72, 0, .2, 1);
  backface-visibility: hidden;
}
.page-transition .transition-brand-logo{
  visibility: hidden;
  width: clamp(190px, 28vw, 320px);
  opacity: 0 !important;
}
.page-transition::after{
  position: absolute;
  width: clamp(190px, 28vw, 320px);
  aspect-ratio: 286 / 87;
  background: var(--paper);
  content: "";
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.99);
  transition: opacity 180ms ease 90ms, transform 480ms var(--ease) 70ms;
  will-change: opacity, transform;
  -webkit-mask: url("./assets/brand/myrak-logo.svg") center / contain no-repeat;
  mask: url("./assets/brand/myrak-logo.svg") center / contain no-repeat;
}
body.is-transitioning .page-transition::after,
.page-transition.is-arriving::after{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.page-transition.is-arriving::after{
  transition: none;
}
.page-transition.is-arriving.is-revealing::after{
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(1);
  transition: opacity 220ms ease, transform 480ms var(--ease);
}
.page-transition.is-arriving.is-revealing{
  transform: translate3d(0, -102%, 0);
}
.page-transition.is-resetting{
  transform: translate3d(0, 102%, 0);
}

.studio-design-logo::after{
  inset: 19%;
  background: var(--paper);
  -webkit-mask-image: url("./assets/brand/myrak-wordmark.svg");
  mask-image: url("./assets/brand/myrak-wordmark.svg");
}
.studio-design-palette > i:nth-child(1){ background: var(--primary); }
.studio-design-palette > i:nth-child(2){ background: var(--interaction); }
.studio-design-palette > i:nth-child(3){ background: var(--paper); }
.studio-design-palette > i:nth-child(4){ background: var(--ink); }

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="2"]{
  background: color-mix(in srgb, var(--interaction) 38%, var(--paper));
}

@media (max-width: 620px){
  .next-project-arrow{
    width: 52px;
    height: 52px;
    box-shadow: 0 0 0 5px rgb(215 255 63 / 14%);
    font-size: 1.12rem;
  }
}

/* V45 - Studio voice and legible overlapping project titles. */
@media (min-width: 761px){
  .case-hero--v3 .case-title h1{
    -webkit-text-stroke: clamp(2px, .16vw, 4px) var(--paper);
    paint-order: stroke fill;
  }
}

/* V46 - Real SVG logos for reliable white rendering. */
.studio-design-logo::after{
  display: none;
}
.studio-design-logo img{
  position: relative;
  z-index: 1;
  display: block;
  width: 78%;
  height: auto;
  opacity: 1;
  filter: brightness(0) invert(1);
}

.page-transition::after{
  display: none;
}
.page-transition .transition-brand-logo{
  visibility: visible;
  width: clamp(190px, 28vw, 320px);
  height: auto;
  opacity: 0 !important;
  filter: brightness(0) invert(1);
  transform: translate3d(0, 10px, 0) scale(.99);
  transition: opacity 180ms ease 90ms, transform 480ms var(--ease) 70ms;
}
body.is-transitioning .page-transition .transition-brand-logo,
.page-transition.is-arriving .transition-brand-logo{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1);
}
.page-transition.is-arriving.is-revealing .transition-brand-logo{
  opacity: 0 !important;
  transform: translate3d(0, -8px, 0) scale(1);
  transition: opacity 220ms ease, transform 480ms var(--ease);
}
.page-transition.is-resetting .transition-brand-logo{
  opacity: 0 !important;
  transform: translate3d(0, 10px, 0) scale(.99);
  transition: none;
}

/* V47 - Project navigation uses the same arrow language as the contact CTA. */
.next-project .next-project-arrow{
  font-size: 1.6rem;
  line-height: 1;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 400ms ease, transform 500ms var(--ease);
}
.next-project .next-project-arrow i{
  display: grid;
  place-items: center;
  font-size: inherit;
  font-style: normal;
  line-height: 1;
  transform: none;
}
.next-project--v4 a:hover .next-project-arrow,
.next-project--v4 a:focus-visible .next-project-arrow{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
  box-shadow: 0 0 0 7px rgb(2 18 238 / 16%);
  transform: rotate(45deg) scale(1.04);
}
.next-project--v4 a:hover .next-project-arrow i,
.next-project--v4 a:focus-visible .next-project-arrow i{
  transform: none;
}

@media (max-width: 620px){
  .next-project .next-project-arrow{
    font-size: 1.35rem;
  }
}

/* V48 - Studio interaction accent surfaces. */
.studio-info-columns .expertise-menu li::before{
  background: var(--interaction);
}
.studio-information + .studio-about::before{
  background: rgb(215 255 63 / 70%);
}
.studio-information + .studio-about .studio-about-tabs button:hover span,
.studio-information + .studio-about .studio-about-tabs button:focus-visible span,
.studio-information + .studio-about .studio-about-tabs button[aria-selected="true"] span{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--ink);
  box-shadow: 0 0 0 5px rgb(215 255 63 / 18%);
}
.studio-information + .studio-about .studio-about-stories article{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--ink);
}

/* V49 - Stable, seamless page transitions. */
.page-transition{
  inset: 0;
  border: 0;
  outline: 0;
  background: var(--interaction);
  color: var(--paper);
  transform: translate3d(0, 100.5%, 0);
  transition: transform 680ms cubic-bezier(.65, 0, .35, 1);
}
.page-transition::before,
.page-transition::after{
  display: none !important;
  content: none !important;
}
.page-transition .transition-brand-logo{
  width: clamp(190px, 28vw, 320px);
  max-width: calc(100vw - 48px);
  aspect-ratio: 286 / 87;
  height: auto;
  opacity: 0 !important;
  filter: brightness(0) invert(1);
  transform: translate3d(0, 12px, 0);
  transition: opacity 220ms ease 100ms, transform 560ms cubic-bezier(.65, 0, .35, 1) 70ms;
  will-change: opacity, transform;
}
body.is-transitioning .page-transition,
.page-transition.is-arriving{
  transform: translate3d(0, 0, 0);
}
body.is-transitioning .page-transition .transition-brand-logo,
.page-transition.is-arriving .transition-brand-logo{
  opacity: 1 !important;
  transform: translate3d(0, 0, 0);
}
.page-transition.is-arriving.is-revealing{
  transform: translate3d(0, -100.5%, 0);
}
.page-transition.is-arriving.is-revealing .transition-brand-logo{
  opacity: 0 !important;
  transform: translate3d(0, -12px, 0);
  transition: opacity 200ms ease, transform 520ms cubic-bezier(.65, 0, .35, 1);
}
.page-transition.is-resetting{
  transform: translate3d(0, 100.5%, 0);
  transition: none;
}
.page-transition.is-resetting .transition-brand-logo{
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0);
  transition: none;
}

/* V50 - Pre-publication mobile audit. */
@media (max-width: 620px){
  .method-line-hero{
    min-height: 92svh;
  }
  .method-line-intro{
    width: min(100%, 32ch);
    max-width: none;
    margin: 52px 0 0;
  }
  .method-line-cue{
    position: static;
    width: max-content;
    margin: 28px 0 0;
  }

  .case-hero-top{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  .case-hero-top p:last-child{
    max-width: 25ch;
    justify-self: end;
    line-height: 1.3;
    text-align: right;
  }
  .case-title h1{
    font-size: clamp(2.9rem, 14.4vw, 4.45rem);
  }

  .legal-hero h1{
    max-width: 100%;
    font-size: clamp(3rem, 14.5vw, 4.35rem);
    letter-spacing: -.055em;
    overflow-wrap: anywhere;
  }
  body[data-page="privacy"] .legal-hero h1{
    font-size: clamp(2.65rem, 12vw, 3.45rem);
    letter-spacing: -.045em;
    overflow-wrap: normal;
    word-break: normal;
  }
  .legal-sections,
  .legal-sections article,
  .legal-sections article p{
    min-width: 0;
    max-width: 100%;
  }

  .studio-duo-copy h1,
  .studio-duo-copy h1 em,
  .studio-duo-intro{
    max-width: 100%;
  }
  .studio-duo-copy h1 em{
    overflow-wrap: normal;
    text-wrap: balance;
  }

  :is(.menu-toggle, .project-mode-switch button, .project-service-filter-toggle,
  .case-lightbox-close, .case-lightbox-nav, .voice-card-action,
  .contact-direct a, .contact-direct button){
    min-width: 44px;
    min-height: 44px;
  }
}

@media (hover: none), (pointer: coarse){
  .studio-cursor-bubble{
    display: none !important;
  }
}

@media (max-width: 620px){
  .mobile-menu .mobile-socials{
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 6px;
    margin: 0;
  }
  .mobile-menu .mobile-socials a{
    display: grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(48 39 35 / 32%);
    border-radius: 50%;
  }
  .mobile-menu .mobile-socials i{
    font-size: .92rem;
    line-height: 1;
  }
  .mobile-menu > p{
    right: auto;
    bottom: 25px;
    left: 16px;
    max-width: calc(100% - 106px);
    font-size: .7rem;
    text-align: left;
  }

  .case-hero--v3{
    grid-template-rows: auto auto minmax(500px, 68svh) auto;
  }
  .case-title > p:last-child{
    bottom: 78px;
  }
  .case-scroll-cue{
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    grid-column: 1;
    grid-row: 4;
    margin: 0;
    padding: 14px 0 10px;
  }
}

/* V52 - touch-safe method cards. */
@media (max-width: 620px), (hover: none), (pointer: coarse){
  .method-constants--integrated .method-constants-cards{
    grid-auto-flow: row;
    gap: 26px;
  }
  .method-constants--integrated .method-constants-cards article,
  .method-constants--integrated .method-constants-cards article:nth-child(2),
  .method-constants--integrated .method-constants-cards article:nth-child(3),
  .method-constants--integrated .method-constants-cards article:hover,
  .method-constants--integrated .method-constants-cards article:focus,
  .method-constants--integrated .method-constants-cards article:focus-within,
  .method-constants--integrated .method-constants-cards article:active,
  .method-constants--integrated .method-constants-cards article:nth-child(2):hover,
  .method-constants--integrated .method-constants-cards article:nth-child(2):focus-within,
  .method-constants--integrated .method-constants-cards article:nth-child(2):active{
    position: relative;
    z-index: 1;
    margin: 0 !important;
    transform: none !important;
  }
}

/* V54 - mobile brand presence and a clearer compact menu. */
@media (max-width: 620px){
  .home-page .hero-v2-heading{
    width: 100%;
  }
  .home-page .hero-logo-motion{
    width: min(88vw, calc(100vw - 34px));
    max-width: none;
  }
  .home-page img.hero-brand-logo{
    filter:
      drop-shadow(.45px 0 0 var(--ink))
      drop-shadow(-.45px 0 0 var(--ink))
      drop-shadow(0 .45px 0 var(--ink))
      drop-shadow(0 -.45px 0 var(--ink));
  }
  .home-page .hero-dot-balloon{
    left: calc(100% + .02em);
    width: .17em;
  }

  .mobile-menu{
    background: var(--interaction);
  }
  .site-header:has(.menu-toggle[aria-expanded="true"])::before{
    background: var(--interaction) !important;
    opacity: 1;
  }
  .home-page .site-header:has(.menu-toggle[aria-expanded="true"]) .wordmark{
    opacity: 1 !important;
    transform: none !important;
  }
  .mobile-menu .mobile-socials{
    right: 16px;
    bottom: 34px;
    gap: 7px;
  }
  .mobile-menu .mobile-socials a{
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    opacity: 1;
  }
  .mobile-menu .mobile-socials i{
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    opacity: 1;
    -webkit-text-stroke: .3px currentColor;
  }
  .mobile-menu > p{
    bottom: 43px;
    color: var(--ink);
    font-size: .72rem;
    font-weight: 600;
  }

  .contact-page .contact-postit{
    background: var(--interaction);
    color: var(--ink);
    box-shadow: 0 18px 42px rgb(153 19 72 / 12%);
  }
  .contact-page .contact-postit::after{
    background: linear-gradient(
      135deg,
      rgb(48 39 35 / 15%) 0 49%,
      color-mix(in srgb, var(--interaction) 72%, var(--paper)) 51%
    );
  }
}

/* V56 - Quieter Studio interactions and an unobstructed Method path. */
.desktop-nav .header-contact,
.desktop-nav .header-contact[aria-current="page"]{
  border: 1px solid rgb(248 247 243 / 42%);
  background: rgb(248 247 243 / 28%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 58%),
    0 8px 24px rgb(36 25 22 / 8%);
  color: inherit;
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
}
.desktop-nav .header-contact:hover,
.desktop-nav .header-contact:focus-visible,
.desktop-nav .header-contact[aria-current="page"]:hover,
.desktop-nav .header-contact[aria-current="page"]:focus-visible{
  border-color: rgb(2 18 238 / 34%);
  background: rgb(2 18 238 / 18%);
  color: var(--ink);
}

.studio-info-columns .expertise-menu li::before{
  display: none;
  content: none;
}
.studio-info-columns .expertise-menu li{
  color: var(--muted);
  transform: none;
  transition: color 220ms ease, transform 420ms var(--ease);
}
.studio-info-columns .expertise-menu li:hover,
.studio-info-columns .expertise-menu li:focus-visible,
.studio-info-columns .expertise-menu li.is-active{
  color: var(--primary);
  transform: translateX(7px);
}

.studio-information + .studio-about::before,
.studio-information + .studio-about::after{
  display: none;
  content: none;
}
.studio-information + .studio-about .studio-about-stories article{
  border: 1px solid rgb(2 18 238 / 24%);
  border-radius: 8px 36px 8px 8px;
  background:
    linear-gradient(90deg, var(--primary) 0 30%, transparent 30%) top / 100% 3px no-repeat,
    var(--paper);
  box-shadow: 0 24px 64px rgb(36 25 22 / 14%);
  color: var(--ink);
}

.studio-voices{
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  color: var(--ink);
}
.studio-voices::after{
  background: linear-gradient(to bottom, rgb(248 247 243 / 0%), var(--paper) 86%);
}
.studio-voices-nav h2{
  color: var(--ink);
}
.studio-voices .voices-hint{
  color: var(--muted);
}
.voice-card-action{
  border: 1px solid rgb(36 25 22 / 20%);
  background: rgb(248 247 243 / 48%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    0 10px 28px rgb(36 25 22 / 12%);
  color: var(--ink);
  -webkit-backdrop-filter: blur(13px) saturate(120%);
  backdrop-filter: blur(13px) saturate(120%);
}
.voice-card-action:hover,
.voice-card-action:focus-visible{
  border-color: rgb(2 18 238 / 34%);
  background: rgb(248 247 243 / 68%);
  color: var(--ink);
}

.journey-dot-trace{
  display: none !important;
}

@media (max-width: 620px){
  .mobile-menu .mobile-socials i{
    font-weight: 400;
    -webkit-text-stroke: 0;
  }
}

/* V57 - Deep contact footer, smoother Studio motion and continuous mobile cases. */
.contact-page .compact-footer{
  background: #080807;
  color: var(--paper);
}

.studio-duo-stage{
  transform: translateZ(0);
}
.studio-person{
  backface-visibility: hidden;
  will-change: transform;
  transition:
    transform 140ms cubic-bezier(.22, .72, .28, 1),
    filter 260ms ease;
}
.studio-person-square{
  backface-visibility: hidden;
  transform: translateZ(0);
}
.studio-duo-copy h1 span,
.studio-duo-copy h1 em{
  transition: transform 210ms cubic-bezier(.22, .72, .28, 1);
}

@media (max-width: 620px){
  .case-page .case-hero--v3::before{
    z-index: 0;
    top: 0;
    bottom: -175px;
    height: auto;
    background-size: 64px 64px;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0 calc(100% - 28px), transparent 100%);
  }
}

/* V58 - Clear Studio ticker, responsive story progress and visible contact action. */
.studio-motion-note{
  display: grid;
  gap: clamp(54px, 6vw, 92px);
  padding: clamp(72px, 8vw, 124px) 0;
}
.studio-motion-track{
  min-height: clamp(76px, 9vw, 138px);
  align-items: center;
  padding-block: .12em .18em;
  font-size: clamp(3.8rem, 8.6vw, 9.2rem);
  letter-spacing: -.055em;
  line-height: 1;
}
.studio-motion-note > p{
  margin-top: 0;
}

.studio-information + .studio-about .studio-about-stories{
  position: relative;
  isolation: isolate;
}
.studio-information + .studio-about .studio-about-stories::after,
.studio-information + .studio-about .studio-about-stories::before{
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  content: "";
  pointer-events: none;
}
.studio-information + .studio-about .studio-about-stories::after{
  width: 100%;
  background: rgb(36 25 22 / 12%);
}
.studio-information + .studio-about .studio-about-stories::before{
  width: calc((var(--about-index) + 1) * 33.333%);
  background: var(--primary);
  transition: width 560ms cubic-bezier(.22, .72, .28, 1);
}
.studio-information + .studio-about .studio-about-stories article{
  position: relative;
  z-index: 1;
  background: var(--paper);
}

.desktop-nav .header-contact,
.desktop-nav .header-contact[aria-current="page"],
.site-header.is-dark .desktop-nav .header-contact{
  border-color: rgb(2 18 238 / 64%);
  background:
    linear-gradient(90deg, rgb(2 18 238 / 90%), rgb(215 255 63 / 90%)) left / 0% 100% no-repeat,
    rgb(2 18 238 / 22%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 52%),
    inset 0 -1px 0 rgb(153 19 72 / 12%),
    0 9px 24px rgb(2 18 238 / 16%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition:
    background-size 520ms cubic-bezier(.22, .72, .28, 1),
    border-color 280ms ease,
    box-shadow 420ms ease,
    color 240ms ease,
    transform 420ms cubic-bezier(.22, .72, .28, 1);
}
.desktop-nav .header-contact:hover,
.desktop-nav .header-contact:focus-visible,
.desktop-nav .header-contact[aria-current="page"]:hover,
.desktop-nav .header-contact[aria-current="page"]:focus-visible,
.site-header.is-dark .desktop-nav .header-contact:hover,
.site-header.is-dark .desktop-nav .header-contact:focus-visible{
  border-color: rgb(2 18 238 / 82%);
  background-size: 100% 100%;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 42%),
    0 12px 30px rgb(2 18 238 / 24%);
  transform: translateY(-2px);
}
.desktop-nav .header-contact:active{
  background-size: 100% 100%;
  box-shadow:
    inset 0 2px 5px rgb(153 19 72 / 15%),
    0 5px 14px rgb(2 18 238 / 18%);
  transform: translateY(0) scale(.97);
}

@media (max-width: 620px){
  .studio-motion-note{
    gap: 44px;
    padding: 64px 0 72px;
  }
  .studio-motion-track{
    min-height: 62px;
    font-size: clamp(3.15rem, 16vw, 4.7rem);
  }
}

/* V61 - Contact fills on interaction and reverses on its active page. */
.contact-page .desktop-nav .header-contact[aria-current="page"]{
  border-color: rgb(2 18 238 / 82%);
  background-color: rgb(2 18 238 / 88%);
  background-image: none;
  background-size: auto;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 42%),
    0 10px 26px rgb(2 18 238 / 22%);
  transition:
    background-color 320ms ease,
    border-color 280ms ease,
    box-shadow 420ms ease,
    color 240ms ease,
    transform 420ms cubic-bezier(.22, .72, .28, 1);
}
.contact-page .desktop-nav .header-contact[aria-current="page"]:hover,
.contact-page .desktop-nav .header-contact[aria-current="page"]:focus-visible{
  border-color: rgb(2 18 238 / 64%);
  background-color: rgb(2 18 238 / 22%);
  background-size: auto;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 52%),
    inset 0 -1px 0 rgb(153 19 72 / 12%),
    0 9px 24px rgb(2 18 238 / 16%);
}

/* V59 - Chapter-like Studio stories and a unified primary ticker. */
.studio-information + .studio-about .studio-about-stories::before,
.studio-information + .studio-about .studio-about-stories::after{
  display: none;
  content: none;
}
.studio-information + .studio-about .studio-about-stories article{
  overflow: hidden;
  border: 1px solid rgb(2 18 238 / 20%);
  border-radius: 10px 42px 10px 10px;
  background:
    linear-gradient(145deg, rgb(2 18 238 / 8%), transparent 34%),
    var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 82%),
    0 24px 64px rgb(36 25 22 / 10%);
  transform-origin: 72% 0;
}
.studio-information + .studio-about .studio-about-stories article.is-active{
  animation: studio-story-chapter 680ms cubic-bezier(.22, .72, .28, 1) both;
}
.studio-information + .studio-about .studio-about-stories article > span{
  width: max-content;
  padding: 8px 11px;
  border: 1px solid rgb(2 18 238 / 28%);
  border-radius: 999px;
  background: rgb(2 18 238 / 11%);
  color: var(--primary);
}
.studio-information + .studio-about .studio-about-stories article.is-active p{
  animation: studio-story-copy 720ms 90ms cubic-bezier(.22, .72, .28, 1) both;
}
.studio-information + .studio-about .studio-about-tabs button:focus-visible{
  outline: 0;
}
@keyframes studio-story-chapter{
  0%{
    opacity: 0;
    filter: blur(8px);
    clip-path: inset(0 0 100% 0 round 10px 42px 10px 10px);
    transform: translate3d(22px, 14px, 0) rotate(.45deg) scale(.985);
  }
  62%{
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-4px, 0, 0) rotate(-.1deg) scale(1);
  }
  100%{
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 round 10px 42px 10px 10px);
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}
@keyframes studio-story-copy{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.studio-motion-note{
  position: relative;
  z-index: 6;
  isolation: isolate;
  contain: paint;
  grid-template-columns: minmax(0, 1fr);
  background: var(--primary);
  box-shadow: 0 0 0 100vmax var(--primary);
  color: var(--paper);
  clip-path: inset(0 -100vmax);
}
.studio-motion-track{
  color: var(--paper);
  opacity: 1;
}
.studio-motion-note > p,
.studio-motion-note > p.reveal{
  display: block;
  opacity: 1 !important;
  color: var(--paper);
  transform: none !important;
  visibility: visible;
}

@media (max-width: 620px){
  .studio-information + .studio-about .studio-about-stories article{
    border-radius: 8px 28px 8px 8px;
  }
}

@media (prefers-reduced-motion: reduce){
  .studio-information + .studio-about .studio-about-stories article.is-active,
  .studio-information + .studio-about .studio-about-stories article.is-active p{
    animation: none;
  }
}

/* V60 - Keep the first Contact step visible on short desktop screens. */
@media (min-width: 761px) and (max-height: 720px){
  .contact-page .contact-panel{
    min-height: 100svh;
    align-items: start;
    padding-top: clamp(84px, 16vh, 98px);
    padding-bottom: 24px;
  }
  .contact-page .contact-panel .guided-form{
    min-height: 0;
  }
  .contact-page .form-progress{
    margin-bottom: 24px;
  }
  .contact-page .form-step .eyebrow{
    margin-bottom: 10px;
  }
  .contact-page .form-step h2,
  .contact-page .form-step[data-form-step="4"] h2{
    margin-bottom: 24px;
    font-size: var(--form-title-size);
  }
  .contact-page .form-step > label:not(.answer-card){
    margin-bottom: 14px;
  }
  .contact-page .form-step > label:not(.answer-card) input,
  .contact-page .form-step > label:not(.answer-card) select{
    padding-block: 8px;
  }
  .contact-page .form-navigation{
    margin-top: 18px;
  }
  .contact-page .form-navigation .button{
    padding: 14px 18px;
  }
  .contact-page .form-status{
    min-height: 0;
    margin-top: 10px;
  }
}

/* V62 - A fixed Studio card with text-only chapter transitions. */
.studio-information + .studio-about .studio-about-stories{
  min-height: clamp(340px, 29vw, 460px);
  overflow: hidden;
  border: 1px solid rgb(2 18 238 / 20%);
  border-radius: 10px 42px 10px 10px;
  background:
    linear-gradient(145deg, rgb(2 18 238 / 8%), transparent 34%),
    var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 82%),
    0 24px 64px rgb(36 25 22 / 10%);
}
.studio-information + .studio-about .studio-about-stories article,
.studio-information + .studio-about .studio-about-stories article.is-active,
.studio-information + .studio-about .studio-about-stories article.is-leaving{
  position: absolute;
  inset: 0;
  display: grid;
  min-height: 100%;
  grid-template-rows: auto 1fr;
  padding: clamp(28px, 4vw, 58px);
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  filter: none;
  clip-path: none;
  transform: none;
  animation: none;
}
.studio-information + .studio-about .studio-about-stories article[hidden]{
  display: none;
}
.studio-information + .studio-about .studio-about-stories article.is-active{
  z-index: 2;
  pointer-events: auto;
}
.studio-information + .studio-about .studio-about-stories article.is-leaving{
  z-index: 1;
  pointer-events: none;
}
.studio-information + .studio-about .studio-about-stories article p{
  align-self: start;
  margin: clamp(28px, 3vw, 44px) 0 0 auto;
}
.studio-information + .studio-about .studio-about-stories article.is-active > span{
  animation: studio-story-label-in 480ms 140ms cubic-bezier(.22, .72, .28, 1) both;
}
.studio-information + .studio-about .studio-about-stories article.is-active p{
  animation: studio-story-text-in 620ms 165ms cubic-bezier(.22, .72, .28, 1) both;
}
.studio-information + .studio-about .studio-about-stories article.is-leaving > span,
.studio-information + .studio-about .studio-about-stories article.is-leaving p{
  animation: studio-story-text-out 300ms cubic-bezier(.4, 0, .6, 1) both;
}
@keyframes studio-story-label-in{
  from{
    opacity: 0;
    transform: translateX(-10px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes studio-story-text-in{
  from{
    opacity: 0;
    filter: blur(2px);
    transform: translateY(12px);
  }
  to{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes studio-story-text-out{
  to{
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-8px);
  }
}

@media (max-width: 620px){
  .studio-information + .studio-about .studio-about-stories{
    min-height: 360px;
    border-radius: 8px 28px 8px 8px;
  }
  .studio-information + .studio-about .studio-about-stories article,
  .studio-information + .studio-about .studio-about-stories article.is-active,
  .studio-information + .studio-about .studio-about-stories article.is-leaving{
    padding: 28px 24px;
  }
  .studio-information + .studio-about .studio-about-stories article p{
    margin-top: 34px;
  }
}

@media (prefers-reduced-motion: reduce){
  .studio-information + .studio-about .studio-about-stories article.is-active > span,
  .studio-information + .studio-about .studio-about-stories article.is-active p,
  .studio-information + .studio-about .studio-about-stories article.is-leaving > span,
  .studio-information + .studio-about .studio-about-stories article.is-leaving p{
    animation: none;
  }
}

/* Desktop social controls — a quiet, fluid accent instead of a hard color swap. */
.social-dock{
  transform: translateY(calc(var(--social-dock-lift, 0px) * -1));
  transition:
    transform 120ms ease-out,
    border-color 320ms ease,
    background-color 320ms ease,
    box-shadow 420ms var(--ease);
}
.social-dock a{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  transition:
    color 260ms ease,
    transform 480ms var(--ease),
    box-shadow 480ms var(--ease);
}
.social-dock a::before{
  position: absolute;
  z-index: 0;
  inset: 3px;
  border-radius: inherit;
  background: linear-gradient(145deg, var(--interaction), var(--primary));
  content: "";
  opacity: 0;
  transform: scale(.18) rotate(-14deg);
  transition:
    opacity 240ms ease,
    transform 520ms var(--ease);
}
.social-dock a i{
  position: relative;
  z-index: 1;
  transition: transform 480ms var(--ease);
}

@media (hover: hover) and (pointer: fine){
  .social-dock:has(a:hover),
  .social-dock:has(a:focus-visible){
    border-color: color-mix(in srgb, var(--primary) 28%, transparent);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow:
      0 14px 34px rgb(36 25 22 / 12%),
      0 0 0 5px rgb(2 18 238 / 5%);
  }
  .social-dock a:hover,
  .social-dock a:focus-visible{
    background: transparent;
    color: var(--chalk);
    box-shadow: 0 9px 20px rgb(2 18 238 / 23%);
    transform: translateY(-3px) scale(1.035);
  }
  .social-dock a:hover::before,
  .social-dock a:focus-visible::before{
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  .social-dock:not(.social-dock--linkedin) a:hover i,
  .social-dock:not(.social-dock--linkedin) a:focus-visible i{
    transform: rotate(7deg) scale(1.06);
  }
  .social-dock--linkedin a:hover i,
  .social-dock--linkedin a:focus-visible i{
    transform: rotate(-5deg) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce){
  .social-dock,
  .social-dock a,
  .social-dock a::before,
  .social-dock a i{
    transition-duration: 1ms;
  }
}

/* Method — a calmer natural progression through exploration, build and refinement. */
.method-line-page .journey-step--sage::before{
  background: linear-gradient(135deg, #e8ebe1 0%, #dbe5d8 100%);
}
.method-line-page .journey-step--warm::before{
  background: linear-gradient(135deg, #e7eff0 0%, #d6e5e9 100%);
}
.method-line-page .journey-step--adjustments::before{
  background: linear-gradient(135deg, #f0e4da 0%, #e7d4c8 100%);
}
.method-constants--integrated .method-constants-heading > .eyebrow{
  display: block;
  gap: 0;
  padding: 0;
  border-top: 0;
}

/* Method — one continuous surface, illuminated steps and a stronger endpoint. */
.process-page,
.method-line-page,
.method-line-hero,
.process-journey--v3,
.process-journey--v3 > .method-constants--integrated,
.process-page .page-cta{
  background: var(--paper);
}

.process-journey--v3 .journey-step::before{
  display: none;
  content: none;
}

.process-journey--v3 .journey-step--dark{
  color: var(--ink);
}

.process-journey--v3 .journey-step--dark .journey-number{
  color: var(--ink);
}

.process-journey--v3 .journey-step--dark .journey-copy{
  border-color: rgb(36 25 22 / 12%);
  background: var(--paper);
  box-shadow: 0 24px 80px rgb(36 25 22 / 8%);
  color: var(--ink);
}

.process-journey--v3 .journey-step--dark .journey-copy > p:last-child,
.process-journey--v3 .journey-step--dark .eyebrow{
  color: var(--muted);
}

.method-constants--integrated{
  background: var(--paper);
  color: var(--ink);
}

.method-constants--integrated .eyebrow,
.method-constants--integrated .method-constants-cards span{
  color: var(--primary);
}

.method-constants--integrated .method-constants-cards article{
  border-color: rgb(36 25 22 / 14%);
  background: rgb(255 255 255 / 48%);
  box-shadow: 0 18px 54px rgb(36 25 22 / 7%);
  color: var(--ink);
}

.method-constants--integrated .method-constants-cards p{
  color: var(--muted);
}

.process-journey--v3 .journey-number{
  color: var(--ink);
  opacity: .13;
  text-shadow: none;
  transform: scale(.92);
  transform-origin: left top;
  transition:
    color 380ms ease,
    opacity 380ms ease,
    text-shadow 520ms ease,
    transform 620ms var(--ease);
}

.process-journey--v3 .journey-step.is-in-view .journey-number{
  color: var(--primary);
  opacity: 1;
  text-shadow:
    0 0 12px rgb(2 18 238 / 28%),
    0 0 34px rgb(2 18 238 / 22%),
    0 0 72px rgb(2 18 238 / 12%);
  transform: scale(1);
}

.process-journey--v3 .journey-line{
  transition: opacity 420ms ease, filter 420ms ease;
}

.process-journey--v3.is-complete .journey-line{
  opacity: 0;
  filter: blur(2px);
}

.method-final-dot{
  position: relative;
  isolation: isolate;
  margin-left: .14em;
  background: var(--paper);
}

.method-final-dot::before,
.method-final-dot::after{
  position: absolute;
  inset: 50%;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--primary);
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  transition:
    opacity 420ms ease,
    transform 680ms var(--ease);
}

.method-final-dot::after{
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  transition-delay: 90ms;
}

.method-final-dot.is-complete{
  background: var(--primary);
  box-shadow:
    0 0 0 10px rgb(2 18 238 / 15%),
    0 0 34px rgb(2 18 238 / 38%);
}

.method-final-dot.is-complete::before{
  opacity: .65;
  transform: translate(-50%, -50%) scale(2.1);
}

.method-final-dot.is-complete::after{
  opacity: .28;
  transform: translate(-50%, -50%) scale(3.15);
}

@media (prefers-reduced-motion: reduce){
  .process-journey--v3 .journey-number,
  .process-journey--v3 .journey-line,
  .method-final-dot,
  .method-final-dot::before,
  .method-final-dot::after{
    transition-duration: 1ms;
  }
}

/* V63 — electric blue brand signal with a citrus interaction accent. */
.studio-person--design > p,
.project-service-filter-toggle.is-active,
.project-service-filter-menu button[aria-pressed="true"],
.project-mode-switch button[aria-pressed="true"],
.form-navigation .button:hover,
.form-navigation .button:focus-visible,
.contact-direct a:hover,
.contact-direct a:focus-visible,
.contact-direct button:hover,
.contact-direct button:focus-visible,
.footer-v2-contact:hover,
.footer-v2-contact:focus-visible{
  color: var(--paper);
}

.home-page .contact-path,
.home-page .contact-path > p{
  color: var(--paper);
}

.home-page .contact-path-options button{
  border-color: rgb(248 247 243 / 58%);
  color: var(--paper);
}

.home-page .contact-path-options button:hover,
.home-page .contact-path-options button:focus-visible{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--ink);
}

.project-index-taxonomy strong{
  color: var(--paper);
}

.project-index-list > a:hover,
.project-index-list > a:focus-visible,
.project-index-list > a:hover > span,
.project-index-list > a:focus-visible > span,
.project-index-list > a:hover .project-index-taxonomy span,
.project-index-list > a:focus-visible .project-index-taxonomy span{
  color: var(--paper);
}

.project-index-list > a:hover .project-index-taxonomy strong,
.project-index-list > a:focus-visible .project-index-taxonomy strong{
  background: var(--interaction);
  color: var(--ink);
}

.desktop-nav .header-contact,
.desktop-nav .header-contact[aria-current="page"],
.site-header.is-dark .desktop-nav .header-contact{
  border-color: rgb(2 18 238 / 62%);
  background:
    linear-gradient(90deg, rgb(2 18 238 / 96%), rgb(2 18 238 / 76%)) left / 0% 100% no-repeat,
    rgb(2 18 238 / 18%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 42%),
    0 9px 24px rgb(2 18 238 / 16%);
}

.desktop-nav .header-contact:hover,
.desktop-nav .header-contact:focus-visible,
.desktop-nav .header-contact[aria-current="page"]:hover,
.desktop-nav .header-contact[aria-current="page"]:focus-visible,
.site-header.is-dark .desktop-nav .header-contact:hover,
.site-header.is-dark .desktop-nav .header-contact:focus-visible{
  border-color: var(--primary);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 28%),
    0 12px 30px rgb(2 18 238 / 24%);
}

.contact-page .desktop-nav .header-contact[aria-current="page"]{
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 28%),
    0 10px 26px rgb(2 18 238 / 22%);
}

.contact-page .desktop-nav .header-contact[aria-current="page"]:hover,
.contact-page .desktop-nav .header-contact[aria-current="page"]:focus-visible{
  border-color: rgb(2 18 238 / 62%);
  background-color: rgb(2 18 238 / 18%);
  color: var(--ink);
}

.page-transition,
.intro-loader{
  color: var(--ink);
}

.page-transition .transition-brand-logo,
.intro-loader-brand .intro-brand-logo{
  filter: brightness(0) saturate(100%);
}

/* V64 — blue interaction polish across navigation, Studio, Method and Home. */
.social-dock a::before{
  background: var(--primary);
}

.footer-brand-logo-shell{
  position: relative;
  display: grid;
  width: 78px;
  aspect-ratio: 286 / 87;
  place-items: center;
}

.footer-brand-logo-shell .footer-brand-logo{
  width: 100%;
  height: auto;
}

.footer-brand-logo-shell::after{
  position: absolute;
  inset: 0;
  background: var(--primary);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  -webkit-mask: url("./assets/brand/myrak-wordmark.svg") center / contain no-repeat;
  mask: url("./assets/brand/myrak-wordmark.svg") center / contain no-repeat;
}

.footer-home-link:hover .footer-brand-logo,
.footer-home-link:focus-visible .footer-brand-logo{
  opacity: 0;
  filter: none;
}

.footer-home-link:hover .footer-brand-logo-shell::after,
.footer-home-link:focus-visible .footer-brand-logo-shell::after{
  opacity: 1;
}

.studio-information + .studio-about .studio-about-tabs button span{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
  box-shadow: 0 0 0 0 rgb(2 18 238 / 0%);
}

.studio-information + .studio-about .studio-about-tabs button:hover span,
.studio-information + .studio-about .studio-about-tabs button:focus-visible span{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
  box-shadow: 0 0 0 5px rgb(2 18 238 / 12%);
}

.studio-information + .studio-about .studio-about-tabs button[aria-selected="true"] span{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
  box-shadow:
    0 0 0 5px var(--paper),
    0 0 0 8px var(--interaction);
}

.process-page .site-header.is-scrolled::before,
.process-page .site-header.is-scrolled.is-dark::before{
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  opacity: 1;
}

.process-page .site-header.is-dark{
  color: var(--ink);
  text-shadow: 0 1px 18px rgb(248 247 243 / 55%);
}

.process-page .site-header.is-dark img.brand-logo{
  filter: none;
}

.home-page .contact-path{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgb(2 18 238 / 22%);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary) 8%, var(--paper)),
      color-mix(in srgb, var(--primary) 3%, var(--chalk))
    );
  box-shadow:
    0 26px 70px rgb(2 18 238 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 72%);
  color: var(--ink);
}

.home-page .contact-path::before{
  position: absolute;
  z-index: 0;
  top: -76px;
  right: -58px;
  width: clamp(150px, 20vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--interaction);
  content: "";
  opacity: .22;
}

.home-page .contact-path::after{
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 5px;
  background: var(--primary);
  content: "";
}

.home-page .contact-path > *{
  position: relative;
  z-index: 1;
}

.home-page .contact-path > p{
  color: var(--ink);
}

.home-page .contact-path .button,
.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
}

.home-page .contact-path .button > span:last-child{
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--interaction);
  color: var(--ink);
  transition: transform 420ms var(--ease);
}

.home-page .contact-path .button:hover > span:last-child,
.home-page .contact-path .button:focus-visible > span:last-child{
  transform: rotate(45deg) scale(1.05);
}

.home-page .contact-path-options button{
  border-color: rgb(2 18 238 / 28%);
  color: var(--primary);
}

.home-page .contact-path-options button:hover,
.home-page .contact-path-options button:focus-visible{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
}

/* V65 — secondary highlights, clearer service feedback and a compact endpoint. */
.contact-page .contact-postit{
  background: #f2df78;
  color: var(--ink);
  box-shadow: 0 24px 62px rgb(72 58 32 / 18%);
}

.contact-page .contact-postit strong,
.contact-page .contact-postit .postit-drag-handle{
  color: #4b3a31;
}

.contact-page .contact-postit::after{
  background: linear-gradient(135deg, rgb(96 76 35 / 18%) 0 49%, var(--paper) 51%);
}

.desktop-nav .header-contact,
.desktop-nav .header-contact[aria-current="page"],
.site-header.is-dark .desktop-nav .header-contact,
.contact-page .desktop-nav .header-contact[aria-current="page"]{
  border-color: rgb(215 255 63 / 68%);
  background:
    linear-gradient(135deg, rgb(215 255 63 / 62%), rgb(255 255 255 / 22%));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    0 9px 25px rgb(129 153 32 / 16%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
}

.desktop-nav .header-contact:hover,
.desktop-nav .header-contact:focus-visible,
.desktop-nav .header-contact[aria-current="page"]:hover,
.desktop-nav .header-contact[aria-current="page"]:focus-visible,
.site-header.is-dark .desktop-nav .header-contact:hover,
.site-header.is-dark .desktop-nav .header-contact:focus-visible,
.contact-page .desktop-nav .header-contact[aria-current="page"]:hover,
.contact-page .desktop-nav .header-contact[aria-current="page"]:focus-visible{
  border-color: var(--interaction);
  background: color-mix(in srgb, var(--interaction) 88%, var(--paper));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 74%),
    0 12px 30px rgb(129 153 32 / 22%);
}

/* V111 — expressive brand accents and clearer carousel/project gestures. */
.site-header .wordmark .logo-body{
  color: inherit;
  fill: currentColor;
}

.site-header .wordmark .logo-myrak-dot,
.site-header .wordmark .logo-studio-o{
  color: var(--primary);
  fill: currentColor;
  shape-rendering: geometricPrecision;
  transform-box: fill-box;
  transform-origin: center;
}

.site-header.is-dark .wordmark .logo-myrak-dot,
.site-header.is-dark .wordmark .logo-studio-o{
  color: var(--interaction);
}

.process-page .site-header.is-dark .wordmark .logo-myrak-dot,
.process-page .site-header.is-dark .wordmark .logo-studio-o{
  color: var(--primary);
}

@media (hover: hover) and (pointer: fine){
  .site-header .wordmark:hover .logo-myrak-dot,
  .site-header .wordmark:focus-visible .logo-myrak-dot{
    animation: header-logo-dot-collision 680ms var(--ease) both;
  }

  .site-header .wordmark:hover .logo-studio-o,
  .site-header .wordmark:focus-visible .logo-studio-o{
    animation: header-logo-o-collision 680ms var(--ease) both;
  }
}

@keyframes header-logo-dot-collision{
  0%,
  100%{ transform: translateY(0) scale(1); }
  38%{ transform: translateY(3px) scale(1.05, .92); }
  52%{ transform: translateY(4px) scale(.94, 1.08); }
  72%{ transform: translateY(-1px) scale(1.02, .98); }
}

@keyframes header-logo-o-collision{
  0%,
  100%{ transform: translateY(0) scale(1); }
  38%{ transform: translateY(-3px) scale(1.05, .92); }
  52%{ transform: translateY(-4px) scale(.94, 1.08); }
  72%{ transform: translateY(1px) scale(1.02, .98); }
}

.ticker-swipe-hint-desktop{
  display: none;
}

@media (min-width: 621px){
  .home-page .project-ticker{
    cursor: grab;
  }

  .home-page .project-ticker:active{
    cursor: grabbing;
  }

  .home-page .ticker-swipe-hint{
    position: absolute;
    z-index: 6;
    top: 12px;
    right: max(20px, calc((100vw - 1520px) / 2));
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid rgb(248 247 243 / 48%);
    border-radius: 999px;
    background: rgb(248 247 243 / 84%);
    color: var(--ink);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .015em;
    opacity: .82;
    pointer-events: none;
    transition: opacity 240ms ease, transform 320ms var(--ease);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .home-page .ticker-swipe-hint-mobile{
    display: none;
  }

  .home-page .ticker-swipe-hint-desktop{
    display: inline;
  }

  .home-page .ticker-swipe-hint i{
    font-size: 1.1em;
    animation: ticker-swipe-cue 1.8s var(--ease) 2;
  }
}

.home-page .project-ticker.is-user-dragged .ticker-swipe-hint{
  opacity: 0;
  transform: translateY(-4px);
}

@media (max-width: 620px){
  .site-header:has(.menu-toggle[aria-expanded="true"]) .wordmark .logo-myrak-dot,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .wordmark .logo-studio-o{
    color: var(--interaction);
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header .wordmark .logo-myrak-dot,
  .site-header .wordmark .logo-studio-o,
  .home-page .ticker-swipe-hint i{
    animation: none !important;
  }

  .next-project--v4 [data-next-project] .next-project-arrow{
    transition-duration: 1ms;
  }
}

/* V110 — mobile hierarchy, swipe affordance and single-tap project navigation. */
.ticker-swipe-hint{
  display: none;
}

@media (max-width: 620px){
  .home-page .project-ticker{
    -webkit-tap-highlight-color: transparent;
  }

  .home-page .ticker-swipe-hint{
    position: absolute;
    z-index: 6;
    top: 10px;
    right: 14px;
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid rgb(248 247 243 / 48%);
    border-radius: 999px;
    background: rgb(248 247 243 / 82%);
    color: var(--ink);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .015em;
    opacity: .82;
    pointer-events: none;
    transition: opacity 240ms ease, transform 320ms var(--ease);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .home-page .ticker-swipe-hint i{
    font-size: 1.15em;
    animation: ticker-swipe-cue 1.8s var(--ease) 2;
  }

  .home-page .project-ticker.is-user-dragged .ticker-swipe-hint{
    opacity: 0;
    transform: translateY(-4px);
  }

  .compact-footer{
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    align-items: center;
  }

  .compact-footer > p:first-child{
    min-width: 0;
    gap: 5px;
  }

  .compact-footer .footer-design-credit{
    font-size: .62em;
  }

  .compact-footer > a:not(.footer-legal a){
    align-self: center;
    font-size: .68rem;
    white-space: nowrap;
  }
}

@media (max-width: 620px) and (hover: none), (max-width: 620px) and (pointer: coarse){
  .next-project--v4 [data-next-project]{
    -webkit-tap-highlight-color: transparent;
  }

  .next-project--v4 figure,
  .next-project--v4 [data-next-project]:hover figure{
    display: none !important;
  }

  .next-project--v4 [data-next-project]:hover .next-project-arrow{
    border-color: var(--interaction);
    background: var(--interaction);
    color: var(--ink);
    box-shadow: 0 0 0 5px rgb(215 255 63 / 14%);
    transform: none;
  }

  .next-project--v4 [data-next-project]:hover .next-project-arrow i{
    transform: none;
  }
}

@keyframes ticker-swipe-cue{
  0%,
  100%{ transform: translateX(0); }
  45%{ transform: translateX(-4px); }
  70%{ transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce){
  .home-page .ticker-swipe-hint i{
    animation: none;
  }
}

.contact-page .desktop-nav .header-contact[aria-current="page"]{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 28%),
    0 10px 26px rgb(2 18 238 / 20%);
}

.contact-page .desktop-nav .header-contact[aria-current="page"]:hover,
.contact-page .desktop-nav .header-contact[aria-current="page"]:focus-visible{
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 88%, white);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    0 12px 30px rgb(2 18 238 / 24%);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]{
  overflow: hidden;
  padding-left: 0;
  color: var(--muted);
  letter-spacing: 0;
  transition:
    color 220ms ease,
    letter-spacing 360ms var(--ease),
    transform 440ms var(--ease);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]::before{
  display: block;
  right: 18%;
  left: -6px;
  height: 58%;
  border-radius: 999px 7px 999px 7px;
  background: color-mix(in srgb, var(--interaction) 48%, var(--paper));
  clip-path: none;
  content: "";
  opacity: 0;
  transform: translateX(-12px) scaleX(.08) rotate(-1deg);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 460ms var(--ease);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]::after{
  position: absolute;
  right: 4px;
  display: block;
  color: var(--primary);
  content: "↗";
  opacity: 0;
  transform: translate(-10px, 5px) rotate(-35deg);
  transition: opacity 220ms ease, transform 460ms var(--ease);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]:hover,
.studio-page .studio-info-columns .expertise-menu li[data-expertise]:focus-visible,
.studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"]:hover,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"]:focus-visible,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"].is-active{
  color: var(--primary);
  letter-spacing: .012em;
  transform: translateX(9px);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]:hover::before,
.studio-page .studio-info-columns .expertise-menu li[data-expertise]:focus-visible::before,
.studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active::before{
  opacity: 1;
  transform: translateX(0) scaleX(1) rotate(-.45deg);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]:hover::after,
.studio-page .studio-info-columns .expertise-menu li[data-expertise]:focus-visible::after,
.studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active::after{
  opacity: 1;
  transform: translate(0, 0) rotate(0);
}

.process-page #etape-04 .journey-copy{
  border-color: color-mix(in srgb, var(--interaction) 62%, var(--line));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--interaction) 10%, var(--paper)),
      var(--paper) 48%
    );
  box-shadow:
    inset 5px 0 0 var(--interaction),
    0 24px 80px rgb(36 25 22 / 8%);
}

.process-page #etape-06 .launch-live{
  border-color: rgb(2 18 238 / 24%);
  background: var(--chalk);
  color: var(--ink);
  box-shadow:
    0 10px 28px rgb(0 0 0 / 14%),
    inset 0 0 0 1px rgb(255 255 255 / 72%);
}

.process-page #etape-06 .launch-live span{
  color: var(--primary);
}

.process-page #etape-06 .launch-live::after{
  background: linear-gradient(90deg, transparent, rgb(215 255 63 / 44%), transparent);
}

.intro-loader,
.page-transition{
  background: var(--interaction);
  color: var(--ink);
}

.intro-loader-brand .intro-brand-logo,
.page-transition .transition-brand-logo{
  filter: brightness(0) saturate(100%);
}

.method-final-dot::before,
.method-final-dot::after{
  display: none;
  content: none;
}

.method-final-dot{
  box-shadow: 0 0 0 3px rgb(2 18 238 / 8%);
}

.method-final-dot.is-complete{
  animation: none;
  background: var(--primary);
  box-shadow:
    0 0 0 5px rgb(2 18 238 / 12%),
    0 0 18px rgb(2 18 238 / 24%);
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce){
  .studio-page .studio-info-columns .expertise-menu li[data-expertise],
  .studio-page .studio-info-columns .expertise-menu li[data-expertise]::before,
  .studio-page .studio-info-columns .expertise-menu li[data-expertise]::after{
    transition-duration: 1ms;
  }
}

/* V66 — final palette and interaction refinements. */
.home-page .contact-path .button,
.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  min-height: clamp(68px, 6.5vw, 84px);
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  padding: 10px 18px;
  border-color: var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: var(--paper);
}

.home-page .contact-path .button::before{
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: var(--interaction);
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 620ms var(--ease);
}

.home-page .contact-path .button > span:first-child{
  z-index: 1;
  grid-column: 2;
  text-align: center;
  transition: color 260ms ease;
}

.home-page .contact-path .button > span:last-child{
  z-index: 1;
  grid-column: 3;
  width: 44px;
  background: var(--interaction);
  transition:
    background-color 320ms ease,
    color 320ms ease,
    transform 520ms var(--ease);
}

.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  border-color: var(--interaction);
  color: var(--ink);
}

.home-page .contact-path .button:hover::before,
.home-page .contact-path .button:focus-visible::before{
  transform: scaleX(1);
}

.home-page .contact-path .button:hover > span:last-child,
.home-page .contact-path .button:focus-visible > span:last-child{
  background: var(--primary);
  color: var(--paper);
  transform: rotate(45deg) scale(1.03);
}

.studio-page .studio-design-logo img{
  opacity: 0;
}

.studio-page .studio-design-logo::after{
  position: absolute;
  display: block;
  inset: 19%;
  background: var(--interaction);
  content: "";
  -webkit-mask: url("./assets/brand/myrak-wordmark.svg") center / contain no-repeat;
  mask: url("./assets/brand/myrak-wordmark.svg") center / contain no-repeat;
}

.studio-page .studio-design-logo small{
  color: rgb(255 255 255 / 74%);
}

.studio-page .studio-design-layout > span:nth-child(3){
  background: #f6b6b7;
}

.studio-page .studio-design-layout > span:nth-child(3) small{
  color: var(--ink);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]{
  overflow: visible;
  letter-spacing: 0;
  transform-origin: left center;
  transition:
    color 220ms ease,
    transform 420ms var(--ease);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]::before,
.studio-page .studio-info-columns .expertise-menu li[data-expertise]::after{
  display: none;
  content: none;
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]:hover,
.studio-page .studio-info-columns .expertise-menu li[data-expertise]:focus-visible,
.studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"]:hover,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"]:focus-visible,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"].is-active{
  color: var(--primary);
  letter-spacing: 0;
  transform: translateX(5px) rotate(-.55deg);
}

.process-page .process-journey--v3 .journey-copy{
  border-color: color-mix(in srgb, var(--interaction) 62%, var(--line));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--interaction) 10%, var(--paper)),
      var(--paper) 48%
    );
}

.process-page .process-journey--v3 .journey-step:not(.journey-step--right) .journey-copy{
  box-shadow:
    inset -5px 0 0 var(--interaction),
    0 24px 80px rgb(36 25 22 / 8%);
}

.process-page .process-journey--v3 .journey-step--right .journey-copy{
  box-shadow:
    inset 5px 0 0 var(--interaction),
    0 24px 80px rgb(36 25 22 / 8%);
}

.process-page #etape-04 .object-system{
  border-color: color-mix(in srgb, var(--primary) 62%, var(--ink));
  background: var(--paper);
}

.process-page #etape-04 .object-system > span{
  border-color: rgb(2 18 238 / 18%);
  background: var(--paper);
}

.process-page #etape-04 .object-system .system-type{
  color: var(--primary);
}

.process-page #etape-04 .object-system > span:nth-child(2){
  background: color-mix(in srgb, var(--interaction) 24%, var(--paper));
}

.process-page #etape-04 .object-system > span:nth-child(3){
  background: color-mix(in srgb, var(--primary) 9%, var(--paper));
  color: var(--primary);
}

.process-page #etape-04 .object-system > span:nth-child(4){
  background: color-mix(in srgb, var(--interaction) 32%, var(--paper));
}

.process-page #etape-04 .object-system .system-mark svg{
  stroke: var(--primary);
}

.process-page #etape-04 .object-system .system-index{
  -webkit-text-stroke-color: var(--primary);
}

.process-page .process-journey--v3 .journey-line-ghost{
  stroke: rgb(215 255 63 / 72%);
}

@media (max-width: 620px){
  .home-page .contact-path .button,
  .home-page .contact-path .button:hover,
  .home-page .contact-path .button:focus-visible{
    min-height: 64px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    padding-inline: 12px;
  }

  .home-page .contact-path .button > span:last-child{
    width: 40px;
  }

  .process-page .process-journey--v3 .journey-step .journey-copy,
  .process-page .process-journey--v3 .journey-step:not(.journey-step--right) .journey-copy,
  .process-page .process-journey--v3 .journey-step--right .journey-copy{
    box-shadow:
      inset 0 -5px 0 var(--interaction),
      0 24px 80px rgb(36 25 22 / 8%);
  }
}

@media (prefers-reduced-motion: reduce){
  .home-page .contact-path .button::before,
  .home-page .contact-path .button > span,
  .studio-page .studio-info-columns .expertise-menu li[data-expertise]{
    transition-duration: 1ms;
  }
}

/* V67 — refined brand motion across transitions, Studio, Method and Contact. */
.intro-loader,
.page-transition{
  background: var(--primary);
  color: var(--paper);
}

.intro-loader-brand .intro-brand-logo,
.page-transition .transition-brand-logo{
  filter: brightness(0) invert(1);
}

.home-page .contact-path .button,
.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  width: min(100%, 760px);
  min-height: clamp(60px, 5.3vw, 72px);
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  margin-inline: auto;
  padding: 8px 14px;
  font-size: clamp(.88rem, 1.15vw, 1.02rem);
}

.home-page .contact-path .button > span:last-child{
  width: 38px;
}

.process-page #etape-04 .object-system{
  box-shadow:
    0 26px 60px rgb(48 39 35 / 12%),
    0 0 54px rgb(215 255 63 / 12%);
}

.process-page #etape-04 .object-system > span{
  animation-name: system-cell-brand;
}

@keyframes system-cell-brand{
  0%,
  12%,
  58%,
  100%{
    background: var(--paper);
  }
  25%,
  45%{
    background: color-mix(in srgb, var(--interaction) 42%, var(--paper));
  }
}

.process-page #etape-04 .object-system .system-type{
  color: var(--ink);
}

.process-page #etape-04 .object-system .system-type::after{
  color: var(--primary);
}

.process-page #etape-04 .object-system .system-mark svg{
  stroke: var(--ink);
}

.process-page #etape-04 .object-system .system-mark circle{
  fill: var(--interaction);
  stroke: var(--primary);
}

.process-page #etape-04 .object-system .system-icon{
  color: var(--ink);
}

.process-page #etape-04 .object-system .system-index{
  -webkit-text-stroke-color: var(--ink);
}

.process-page #etape-04 .object-system .system-index small{
  color: var(--primary);
}

.studio-page .studio-design-logo img{
  position: relative;
  z-index: 1;
  display: block;
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(91%)
    sepia(86%)
    saturate(1071%)
    hue-rotate(24deg)
    brightness(106%)
    contrast(102%);
}

.studio-page .studio-design-logo::after{
  display: none;
  content: none;
}

.studio-page .studio-design-layout > .studio-design-grid{
  position: relative;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--interaction) 18%, var(--paper));
  background-image:
    linear-gradient(rgb(2 18 238 / 16%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(2 18 238 / 16%) 1px, transparent 1px);
  background-size: 10px 10px;
}

.studio-page .studio-design-layout > .studio-design-grid::after{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--interaction);
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 4px var(--primary);
  content: "";
  transform: translate(-50%, -50%);
}

.studio-page .studio-design-layout > .studio-design-grid small{
  color: var(--primary);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]{
  overflow: visible;
  color: var(--muted);
  transform: none;
  transition: color 220ms ease;
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise] > span{
  display: inline-block;
  transform-origin: left center;
  transition:
    color 220ms ease,
    transform 520ms cubic-bezier(.18, 1.55, .38, 1);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]::before{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 1px;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--interaction);
  box-shadow: 0 0 0 3px rgb(215 255 63 / 18%);
  content: "";
  opacity: 0;
  transform: translate(-11px, -50%) scale(.2);
  transition:
    opacity 180ms ease,
    transform 460ms cubic-bezier(.18, 1.55, .38, 1);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]::after{
  display: none;
  content: none;
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]:hover,
.studio-page .studio-info-columns .expertise-menu li[data-expertise]:focus-visible,
.studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"]:hover,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"]:focus-visible,
.studio-page .studio-info-columns .expertise-menu li[data-expertise="illustration"].is-active{
  color: var(--primary);
  transform: none;
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]:hover > span,
.studio-page .studio-info-columns .expertise-menu li[data-expertise]:focus-visible > span,
.studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active > span{
  color: var(--primary);
  transform: translate3d(18px, -1px, 0) rotate(-1deg) scale(1.015);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise]:hover::before,
.studio-page .studio-info-columns .expertise-menu li[data-expertise]:focus-visible::before,
.studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active::before{
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.studio-page .studio-voices{
  margin-bottom: clamp(28px, 3vw, 44px);
}

.studio-page .studio-motion-track{
  gap: .26em;
}

.studio-page .studio-motion-track > span{
  display: inline-flex;
  gap: .16em;
  align-items: center;
}

.studio-page .studio-motion-track i{
  color: var(--interaction);
  font-style: normal;
  line-height: 1;
  transform: translateY(-.035em);
}

.studio-page .studio-motion-copy > span{
  --motion-progress: 0;
  background:
    linear-gradient(
      90deg,
      var(--paper) 0 calc(var(--motion-progress) * 100%),
      rgb(248 247 243 / 24%) calc(var(--motion-progress) * 100%) 100%
    );
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.studio-page .studio-motion-copy > .studio-motion-emphasis{
  background:
    linear-gradient(
      90deg,
      var(--interaction) 0 calc(var(--motion-progress) * 100%),
      rgb(215 255 63 / 24%) calc(var(--motion-progress) * 100%) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
}

.contact-page .contact-postit{
  border: 1px solid rgb(215 255 63 / 70%);
  border-radius: 12px 34px 12px 12px;
  background:
    linear-gradient(145deg, rgb(215 255 63 / 68%), rgb(255 255 255 / 27%));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    inset 0 0 0 1px rgb(255 255 255 / 16%),
    0 24px 64px rgb(79 93 23 / 17%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.contact-page .contact-postit::after{
  top: 1px;
  right: 14%;
  bottom: auto;
  left: 14%;
  width: auto;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 90%), transparent);
}

.contact-page .contact-postit strong,
.contact-page .contact-postit .postit-drag-handle{
  color: var(--ink);
}

.contact-page .contact-postit .postit-drag-handle{
  border: 1px solid rgb(255 255 255 / 50%);
  background: rgb(255 255 255 / 24%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 58%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.contact-page .form-navigation .button{
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  min-width: 196px;
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: center;
  padding: 9px 10px 9px 18px;
  border-color: var(--primary);
  border-radius: 999px;
  background: var(--primary);
  color: var(--paper);
}

.contact-page .form-navigation .button::before{
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: var(--interaction);
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 600ms var(--ease);
}

.contact-page .form-navigation .button > span{
  position: relative;
  z-index: 1;
}

.contact-page .form-navigation .button > span:first-child{
  text-align: center;
}

.contact-page .form-navigation .button > span:last-child{
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--interaction);
  color: var(--ink);
  transition:
    background-color 300ms ease,
    color 300ms ease,
    transform 480ms var(--ease);
}

.contact-page .form-navigation .button:hover,
.contact-page .form-navigation .button:focus-visible{
  border-color: var(--interaction);
  background: var(--primary);
  color: var(--ink);
}

.contact-page .form-navigation .button:hover::before,
.contact-page .form-navigation .button:focus-visible::before{
  transform: scaleX(1);
}

.contact-page .form-navigation .button:hover > span:last-child,
.contact-page .form-navigation .button:focus-visible > span:last-child{
  background: var(--primary);
  color: var(--paper);
  transform: translateX(2px);
}

.contact-page .form-navigation .button[type="submit"]:hover > span:last-child,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child{
  transform: rotate(45deg) scale(1.02);
}

.compact-footer{
  column-gap: 18px;
  row-gap: 14px;
}

.compact-footer .footer-home-link{
  gap: 3px;
}

.compact-footer .footer-brand-logo-shell{
  width: 68px;
}

.footer-brand-logo-shell::after{
  display: none;
  content: none;
}

.footer-home-link:hover .footer-brand-logo,
.footer-home-link:focus-visible .footer-brand-logo,
.footer-v2-mark:hover .footer-v2-brand-logo,
.footer-v2-mark:focus-visible .footer-v2-brand-logo{
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(12%)
    sepia(100%)
    saturate(7461%)
    hue-rotate(243deg)
    brightness(82%)
    contrast(145%);
}

.footer-v2-main{
  gap: clamp(18px, 2vw, 28px);
  padding-bottom: clamp(42px, 4vw, 56px);
}

.footer-v2-bottom{
  padding-top: 12px;
}

.hero-dot-balloon{
  overflow: visible;
  background: var(--primary);
}

.hero-dot-balloon::before{
  position: absolute;
  inset: -.055em;
  border: 1px solid var(--interaction);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: hero-dot-beacon 6.2s ease-out infinite;
}

.hero-dot-balloon::after{
  position: absolute;
  top: -.17em;
  right: -.17em;
  color: var(--interaction);
  content: "✦";
  font-size: .09em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  animation: hero-dot-spark 6.2s ease-out infinite;
}

@keyframes hero-dot-beacon{
  0%,
  72%,
  100%{
    opacity: 0;
    transform: scale(.72);
  }
  76%{
    opacity: .72;
  }
  84%{
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes hero-dot-spark{
  0%,
  74%,
  88%,
  100%{
    opacity: 0;
    transform: rotate(0) scale(.5);
  }
  78%{
    opacity: 1;
    transform: rotate(18deg) scale(1);
  }
  84%{
    opacity: 0;
    transform: rotate(42deg) scale(1.35);
  }
}

.hero-dot-balloon:hover::before,
.hero-dot-balloon:hover::after,
.hero-dot-balloon:focus-visible::before,
.hero-dot-balloon:focus-visible::after,
.hero-dot-balloon.is-dragging::before,
.hero-dot-balloon.is-dragging::after{
  animation-play-state: paused;
  opacity: 0;
}

@media (max-width: 620px){
  .home-page .contact-path .button,
  .home-page .contact-path .button:hover,
  .home-page .contact-path .button:focus-visible{
    width: 100%;
    min-height: 60px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }

  .home-page .contact-path .button > span:last-child{
    width: 36px;
  }

  .contact-page .form-navigation .button{
    min-width: 154px;
    min-height: 50px;
    grid-template-columns: minmax(0, 1fr) 32px;
    padding-left: 13px;
  }

  .contact-page .form-navigation .button > span:last-child{
    width: 32px;
  }
}

@media (prefers-reduced-motion: reduce){
  .studio-page .studio-motion-copy > span{
    --motion-progress: 1;
  }

  .hero-dot-balloon::before,
  .hero-dot-balloon::after{
    animation: none;
  }

  .contact-page .form-navigation .button::before,
  .contact-page .form-navigation .button > span,
  .studio-page .studio-info-columns .expertise-menu li[data-expertise] > span,
  .studio-page .studio-info-columns .expertise-menu li[data-expertise]::before{
    transition-duration: 1ms;
  }
}

/* V68 — clean-up from the visual review. */
.contact-page .contact-postit .postit-drag-handle{
  right: 8px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.contact-page .contact-postit .postit-drag-handle i{
  font-size: 1rem;
}

.studio-page .studio-design-logo{
  background: var(--interaction) !important;
}

.studio-page .studio-design-logo img{
  filter:
    brightness(0)
    saturate(100%)
    invert(12%)
    sepia(100%)
    saturate(7461%)
    hue-rotate(243deg)
    brightness(82%)
    contrast(145%);
}

.studio-page .studio-design-layout > span.studio-design-grid{
  background:
    linear-gradient(rgb(2 18 238 / 16%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(2 18 238 / 16%) 1px, transparent 1px),
    color-mix(in srgb, var(--interaction) 18%, var(--paper)) !important;
  background-size: 10px 10px !important;
}

.studio-page .studio-design-layout > span.studio-design-grid::before{
  position: absolute;
  top: 54%;
  left: 18%;
  width: 66%;
  height: 5px;
  border-radius: 999px;
  background: var(--primary);
  content: "";
  transform: rotate(-17deg);
}

.studio-page .studio-design-layout > span.studio-design-grid::after{
  width: 21%;
  background: var(--interaction);
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 4px var(--primary),
    9px -8px 0 -3px var(--primary);
}

.home-page .contact-path::after{
  display: none;
  content: none;
}

.studio-page .studio-motion-copy > span{
  display: block;
  background:
    linear-gradient(
      180deg,
      var(--paper) 0 calc(var(--motion-progress) * 100%),
      rgb(248 247 243 / 24%) calc(var(--motion-progress) * 100%) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
}

.studio-page .studio-motion-copy > .studio-motion-emphasis{
  background:
    linear-gradient(
      180deg,
      var(--interaction) 0 calc(var(--motion-progress) * 100%),
      rgb(215 255 63 / 24%) calc(var(--motion-progress) * 100%) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
}

.studio-page .studio-voices{
  margin-block: 0;
  padding-block: clamp(84px, 8vw, 124px);
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.studio-page .studio-voices::after{
  display: none;
  content: none;
}

@media (max-width: 620px){
  .studio-page .studio-voices{
    margin: 0;
    padding-block: 64px;
  }
}

/* V69 — a single occasional pulse around the draggable hero dot. */
.home-page .hero-dot-balloon,
.home-page .hero-dot-balloon:hover,
.home-page .hero-dot-balloon:focus-visible{
  box-shadow: none;
  filter: none;
}

.home-page .hero-dot-balloon::before{
  inset: 0;
  border: 0;
  background: transparent;
  box-shadow: 0 0 0 .052em rgb(2 18 238 / 22%);
  animation: hero-dot-pulse-ring 6.4s ease-out infinite;
}

.home-page .hero-dot-balloon::after{
  display: none;
  content: none;
  animation: none;
}

@keyframes hero-dot-pulse-ring{
  0%,
  72%,
  92%,
  100%{
    opacity: 0;
    transform: scale(.88);
  }
  76%{
    opacity: .92;
    transform: scale(1);
  }
  84%{
    opacity: .38;
    transform: scale(1.22);
  }
  90%{
    opacity: 0;
    transform: scale(1.36);
  }
}

/* V70 — one scale and one stacking rule for every Method step number. */
.process-page .process-journey--v3 .journey-number{
  z-index: 2;
}

.process-page .process-journey--v3 .journey-copy,
.process-page .process-journey--v3 .journey-object{
  position: relative;
  z-index: 4;
}

/* V71 — restrained Studio composition and stronger selected services. */
.studio-page .studio-design-logo{
  background: var(--primary) !important;
}

.studio-page .studio-design-logo img{
  filter:
    brightness(0)
    saturate(100%)
    invert(91%)
    sepia(86%)
    saturate(1071%)
    hue-rotate(24deg)
    brightness(106%)
    contrast(102%);
}

.studio-page .studio-design-bar > i:nth-child(3){
  background: var(--interaction);
  box-shadow: 0 0 0 1px rgb(2 18 238 / 12%);
}

.studio-page .studio-design-layout > span.studio-design-grid{
  background:
    linear-gradient(rgb(2 18 238 / 9%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(2 18 238 / 9%) 1px, transparent 1px),
    var(--paper) !important;
  background-size: 14px 14px !important;
}

.studio-page .studio-design-layout > span.studio-design-grid::before{
  top: 58%;
  left: 26%;
  width: 48%;
  height: 1px;
  border-radius: 999px;
  background: rgb(2 18 238 / 58%);
  transform: rotate(-10deg);
}

.studio-page .studio-design-layout > span.studio-design-grid::after{
  width: 9%;
  background: var(--interaction);
  box-shadow: 0 0 0 1px var(--primary);
}

.studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active > span{
  font-weight: 600;
}

/* V72 — balanced review spacing and a softer editorial text reveal. */
.studio-page .studio-voices{
  padding-top: clamp(84px, 7vw, 112px);
  padding-bottom: clamp(152px, 13vw, 210px);
}

.studio-page .studio-motion-copy{
  display: grid;
  width: min(100% - 40px, 1180px);
  max-width: none;
  gap: .04em;
  align-items: start;
}

.studio-page .studio-motion-copy > span{
  --motion-fill: var(--paper);
  --motion-rest: rgb(248 247 243 / 22%);
  width: fit-content;
  background:
    linear-gradient(
      180deg,
      var(--motion-fill) 0 calc(var(--motion-edge) - 28%),
      color-mix(in srgb, var(--motion-fill) 68%, var(--motion-rest)) calc(var(--motion-edge) - 10%),
      var(--motion-rest) calc(var(--motion-edge) + 10%) 100%
    );
  opacity: var(--motion-opacity, .72);
  transform: translateY(var(--motion-shift, 6px));
  -webkit-background-clip: text;
  background-clip: text;
  will-change: opacity, transform;
}

.studio-page .studio-motion-copy > span:nth-child(2){
  margin-left: 8%;
}

.studio-page .studio-motion-copy > .studio-motion-emphasis{
  --motion-fill: var(--interaction);
  --motion-rest: rgb(215 255 63 / 20%);
  margin: .08em 0 .02em 3%;
  font-weight: 700;
}

.studio-page .studio-motion-copy > span:nth-child(4){
  margin-left: 15%;
}

@media (max-width: 620px){
  .studio-page .studio-voices{
    padding-top: 64px;
    padding-bottom: 112px;
  }

  .studio-page .studio-motion-copy{
    width: calc(100% - 36px);
    gap: .08em;
  }

  .studio-page .studio-motion-copy > span:nth-child(2){
    margin-left: 4%;
  }

  .studio-page .studio-motion-copy > .studio-motion-emphasis{
    margin-left: 0;
  }

  .studio-page .studio-motion-copy > span:nth-child(4){
    margin-left: 8%;
  }
}

@media (prefers-reduced-motion: reduce){
  .studio-page .studio-motion-copy > span{
    background: var(--motion-fill);
    opacity: 1;
    transform: none;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* V73 — exact secondary colour, a new mini-poster and responsive dot pulse. */
.studio-page .studio-design-logo img{
  filter: url("#brand-secondary-filter");
}

.studio-page .studio-design-layout > span.studio-design-grid{
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper) !important;
}

.studio-page .studio-design-layout > span.studio-design-grid::before{
  position: absolute;
  top: 22%;
  bottom: auto;
  left: 24%;
  width: 1px;
  height: 58%;
  background: rgb(2 18 238 / 32%);
  content: "";
  transform: none;
}

.studio-page .studio-design-layout > span.studio-design-grid::after{
  position: absolute;
  top: 68%;
  left: 14%;
  width: 72%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: rgb(2 18 238 / 32%);
  box-shadow: none;
  content: "";
  transform: none;
}

.studio-page .studio-design-layout > span.studio-design-grid b{
  position: absolute;
  top: 50%;
  left: 50%;
  color: transparent;
  font-family: var(--accent);
  font-size: clamp(1.15rem, 2.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -.14em;
  line-height: 1;
  -webkit-text-stroke: 1px var(--primary);
  transform: translate(-50%, -50%);
}

.studio-page .studio-design-layout > span.studio-design-grid i{
  position: absolute;
  z-index: 2;
  right: 17%;
  bottom: 19%;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--interaction);
  box-shadow: 0 0 0 1px var(--primary);
}

.home-page .hero-dot-balloon:hover::before,
.home-page .hero-dot-balloon:focus-visible::before{
  opacity: 1;
  animation: hero-dot-hover-pulse 1.25s ease-out infinite;
  animation-play-state: running;
}

@keyframes hero-dot-hover-pulse{
  0%{
    opacity: .9;
    transform: scale(.94);
  }
  72%{
    opacity: 0;
    transform: scale(1.38);
  }
  100%{
    opacity: 0;
    transform: scale(1.38);
  }
}

@media (prefers-reduced-motion: reduce){
  .home-page .hero-dot-balloon:hover::before,
  .home-page .hero-dot-balloon:focus-visible::before{
    opacity: 0;
    animation: none;
  }
}

/* V74 — horizontal copy flow and a lighter modular Studio tile. */
.studio-page .studio-voices{
  padding-top: clamp(56px, 4.8vw, 80px);
}

.studio-page .studio-motion-copy > span{
  background-image:
    linear-gradient(
      90deg,
      var(--motion-fill) 0 calc(var(--motion-edge) - 26%),
      color-mix(in srgb, var(--motion-fill) 72%, var(--motion-rest)) calc(var(--motion-edge) - 7%),
      color-mix(in srgb, var(--motion-fill) 30%, var(--motion-rest)) calc(var(--motion-edge) + 10%),
      var(--motion-rest) calc(var(--motion-edge) + 24%) 100%
    );
  color: transparent;
  transform: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.studio-page .studio-motion-copy > .studio-motion-emphasis{
  background-image:
    linear-gradient(
      90deg,
      var(--motion-fill) 0 calc(var(--motion-edge) - 26%),
      color-mix(in srgb, var(--motion-fill) 72%, var(--motion-rest)) calc(var(--motion-edge) - 7%),
      color-mix(in srgb, var(--motion-fill) 30%, var(--motion-rest)) calc(var(--motion-edge) + 10%),
      var(--motion-rest) calc(var(--motion-edge) + 24%) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.studio-page .studio-design-logo img{
  filter: brightness(0) invert(1);
}

.studio-page .studio-design-layout > span.studio-design-grid{
  background:
    linear-gradient(145deg, rgb(2 18 238 / 3%), transparent 58%),
    var(--paper) !important;
}

.studio-page .studio-design-layout > span.studio-design-grid::before,
.studio-page .studio-design-layout > span.studio-design-grid::after{
  display: none;
  content: none;
}

@media (max-width: 620px){
  .studio-page .studio-voices{
    padding-top: 48px;
  }
}

/* V75 — restrained brand accents across the project index and case studies. */
.projects-grid-page .project-grid-toolbar{
  position: relative;
}

.projects-grid-page .project-grid-toolbar::after{
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 76px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
  content: "";
}

.projects-grid-page .project-grid-toolbar h1{
  display: flex;
  gap: 10px;
  align-items: center;
}

.projects-grid-page .project-grid-toolbar h1::after{
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--interaction);
  box-shadow: 0 0 0 3px rgb(2 18 238 / 12%);
  content: "";
}

.projects-grid-page .mega-project-index{
  display: inline-flex;
  min-height: 28px;
  gap: 7px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgb(248 247 243 / 34%);
  border-radius: 999px;
  background: rgb(2 18 238 / 88%);
  box-shadow: 0 8px 22px rgb(2 18 238 / 20%);
  backdrop-filter: blur(9px);
}

.projects-grid-page .mega-project-index::before{
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--interaction);
  content: "";
}

.projects-grid-page .mega-project-copy p{
  display: flex;
  gap: 8px;
  align-items: center;
}

.projects-grid-page .mega-project-copy p::before{
  width: 18px;
  height: 2px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--interaction);
  content: "";
  transition: width 480ms var(--ease);
}

.projects-grid-page .mega-project:hover .mega-project-copy p::before,
.projects-grid-page .mega-project:focus-visible .mega-project-copy p::before{
  width: 34px;
}

.projects-grid-page .project-index-list h2{
  display: flex;
  gap: 12px;
  align-items: center;
}

.projects-grid-page .project-index-list h2::before{
  width: 13px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--primary);
  content: "";
  transition: width 420ms var(--ease), background-color 220ms ease;
}

.projects-grid-page .project-index-list > a:nth-of-type(even) h2::before{
  background: var(--interaction);
}

.projects-grid-page .project-index-list > a:hover h2::before,
.projects-grid-page .project-index-list > a:focus-visible h2::before{
  width: 26px;
  background: var(--interaction);
}

.projects-grid-page .project-index-list > a > span:last-child{
  padding: 5px 8px;
  border: 1px solid rgb(2 18 238 / 26%);
  border-radius: 999px;
  color: var(--primary);
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease;
}

.projects-grid-page .project-index-list > a:hover > span:last-child,
.projects-grid-page .project-index-list > a:focus-visible > span:last-child{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--ink);
}

.case-page .case-kicker b{
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  margin-left: 4px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--paper);
  font-size: .66rem;
}

.case-page .case-hero-top > p:last-child{
  display: flex;
  gap: 8px;
  align-items: center;
}

.case-page .case-hero-top > p:last-child::before{
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--interaction);
  box-shadow: 0 0 0 1px rgb(2 18 238 / 20%);
  content: "";
}

.case-page .case-title > p:last-child{
  border-left: 3px solid var(--interaction);
}

.case-page .case-scroll-cue{
  position: relative;
}

.case-page .case-scroll-cue::before{
  position: absolute;
  top: -1px;
  right: 0;
  width: 54px;
  height: 2px;
  border-radius: 999px;
  background: var(--primary);
  content: "";
  transition: width 520ms var(--ease), background-color 220ms ease;
}

.case-page .case-scroll-cue:hover::before,
.case-page .case-scroll-cue:focus-visible::before{
  width: 100%;
  background: var(--interaction);
}

.case-page .case-story .eyebrow,
.case-page .case-result--v3 .eyebrow{
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--primary);
}

.case-page .case-result--v3 .eyebrow{
  justify-content: center;
}

.case-page .case-story .eyebrow::before,
.case-page .case-result--v3 .eyebrow::before{
  width: 8px;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--interaction);
  box-shadow: 2px 2px 0 rgb(2 18 238 / 18%);
  content: "";
}

.case-page .case-meta dt{
  color: var(--primary);
  font-weight: 700;
}

.case-page .case-gallery--v3 .decision-note{
  border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
}

.case-page .case-gallery--v3 .decision-note > span{
  display: inline-flex;
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--interaction);
  color: var(--primary);
  font-weight: 700;
}

.case-page .next-project-label{
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--primary);
  font-weight: 700;
}

.case-page .next-project-label::before{
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--interaction);
  content: "";
}

@media (max-width: 620px){
  .projects-grid-page .mega-project-index{
    top: 12px;
    right: 12px;
  }

  .projects-grid-page .project-index-list h2{
    gap: 8px;
  }

  .projects-grid-page .project-index-list h2::before{
    width: 9px;
  }

  .case-page .case-kicker b{
    min-width: 25px;
    min-height: 25px;
  }
}

/* V76 — a sharper cursor greeting and a quieter Studio composition. */
.studio-page .studio-cursor-bubble{
  padding: 9px 13px 10px;
  border: 1px solid var(--primary);
  border-radius: 4px 15px 15px 15px;
  background: var(--interaction);
  color: var(--ink);
  box-shadow:
    4px 4px 0 rgb(2 18 238 / 14%),
    0 10px 24px rgb(48 39 35 / 10%);
  font-size: .74rem;
  font-weight: 760;
}

.studio-page .studio-cursor-bubble::before{
  top: -5px;
  bottom: auto;
  left: 10px;
  width: 9px;
  height: 9px;
  border: 0;
  border-top: 1px solid var(--primary);
  border-left: 1px solid var(--primary);
  background: var(--interaction);
  transform: rotate(45deg);
}

/* V77 — Amélie case study: postcards, stage views and production credits. */
.amelie-case .case-cover{
  background: #2b1713;
}

.amelie-case .case-cover img{
  object-position: 58% center;
}

.amelie-sources{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.amelie-sources a{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgb(2 18 238 / 28%);
  border-radius: 999px;
  color: var(--primary);
  font-size: .7rem;
  font-weight: 700;
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease,
    transform 360ms var(--ease);
}

.amelie-sources a:hover,
.amelie-sources a:focus-visible{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--paper);
  transform: translateY(-2px);
}

.amelie-sources i{
  font-size: .82rem;
}

.amelie-case .case-gallery--amelie{
  --amelie-gallery-gap: clamp(24px, 2.6vw, 40px);
  grid-template-rows: none;
  gap: var(--amelie-gallery-gap);
  align-items: start;
}

.amelie-case .case-gallery--amelie .case-shot{
  min-height: 0;
  margin: 0;
  background: #171310;
}

.amelie-case .case-gallery--amelie .case-shot img{
  object-position: center;
}

.amelie-case .case-gallery--amelie .case-shot--opening{
  width: 100%;
  min-height: clamp(560px, 74svh, 820px);
  grid-column: 2 / 12;
  grid-row: 1;
  justify-self: center;
  aspect-ratio: 1.5;
}

.amelie-concept-pair{
  display: grid;
  grid-column: 1 / 13;
  grid-row: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amelie-gallery-gap);
}

.amelie-concept-pair .case-shot{
  aspect-ratio: 1.066;
  border: 1px solid rgb(48 39 35 / 10%);
  background: #fff !important;
}

.amelie-concept-pair .case-shot img{
  object-fit: contain;
}

.amelie-case .case-gallery--amelie .amelie-portrait{
  width: 100%;
  min-height: 0;
  height: 100%;
  grid-column: 1 / 6;
  grid-row: 3 / 5;
  aspect-ratio: .76;
  margin: 0;
}

.amelie-case .case-gallery--amelie .amelie-portrait img{
  object-position: 48% center;
}

.amelie-case .case-gallery--amelie .decision-note{
  grid-column: 7 / 13;
  grid-row: 3;
  align-self: center;
  margin: 0;
}

.amelie-case .case-gallery--amelie .amelie-landscape{
  width: 100%;
  grid-column: 7 / 13;
  grid-row: 4;
  aspect-ratio: 1.42;
  margin: 0;
}

.amelie-case .case-gallery--amelie .amelie-feature{
  grid-column: 1 / 13;
  grid-row: 5;
  min-height: clamp(560px, 72svh, 820px);
  aspect-ratio: 1.5;
}

.amelie-photo-pair{
  display: grid;
  grid-column: 1 / 13;
  grid-row: 6;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--amelie-gallery-gap);
}

.amelie-photo-pair .case-shot{
  aspect-ratio: 1.2;
}

.amelie-photo-pair .case-shot:first-child img{
  object-position: 42% center;
}

.amelie-case .case-gallery--amelie .case-shot--closing{
  width: 100%;
  height: auto;
  min-height: clamp(560px, 74svh, 840px);
  grid-column: 1 / 13;
  grid-row: 7;
  aspect-ratio: 1.5;
  margin: 0;
}

.amelie-photo-credit{
  grid-column: 1 / 13;
  grid-row: 8;
  justify-self: end;
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.amelie-press-note{
  display: grid;
  width: min(var(--page), 1320px);
  margin: clamp(72px, 9vw, 132px) auto 0;
  grid-template-columns: minmax(130px, .34fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  padding: clamp(28px, 3.5vw, 48px);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-left: 5px solid var(--primary);
  border-radius: 10px;
  background:
    radial-gradient(circle at 92% 16%, color-mix(in srgb, var(--interaction) 35%, transparent) 0 7%, transparent 7.2%),
    color-mix(in srgb, var(--interaction) 12%, var(--paper));
  box-shadow: 0 18px 50px rgb(36 29 26 / 7%);
}

.amelie-press-note .eyebrow{
  display: inline-flex;
  gap: 9px;
  align-self: start;
  align-items: center;
  margin: 0;
  color: var(--primary);
}

.amelie-press-note .eyebrow::before{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--interaction);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--interaction) 20%, transparent);
  content: "";
}

.amelie-press-note blockquote{
  grid-column: 2;
  justify-self: center;
  margin: 0;
  font-family: var(--accent);
  font-size: clamp(2.4rem, 4.1vw, 4.4rem);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: .94;
  white-space: nowrap;
}

.amelie-press-note blockquote::before{
  content: "« ";
}

.amelie-press-note blockquote::after{
  content: " »";
}

.amelie-press-note a{
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  grid-column: 2;
  justify-self: end;
  gap: 8px;
  align-items: center;
  color: var(--primary);
  font-size: .72rem;
  font-weight: 700;
}

.amelie-press-note a:hover,
.amelie-press-note a:focus-visible{
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 760px){
  .amelie-case .case-gallery--amelie{
    --amelie-gallery-gap: 18px;
    grid-template-columns: 1fr;
    gap: var(--amelie-gallery-gap);
  }

  .amelie-case .case-gallery--amelie > *,
  .amelie-case .case-gallery--amelie .case-shot--opening,
  .amelie-case .case-gallery--amelie .amelie-portrait,
  .amelie-case .case-gallery--amelie .decision-note,
  .amelie-case .case-gallery--amelie .amelie-landscape,
  .amelie-case .case-gallery--amelie .amelie-feature,
  .amelie-case .case-gallery--amelie .case-shot--closing,
  .amelie-photo-credit{
    width: 100%;
    height: auto;
    min-height: 0;
    grid-column: 1;
    grid-row: auto;
    margin: 0;
  }

  .amelie-concept-pair,
  .amelie-photo-pair{
    grid-template-columns: 1fr;
    gap: var(--amelie-gallery-gap);
  }

  .amelie-case .case-gallery--amelie .case-shot--opening,
  .amelie-case .case-gallery--amelie .amelie-landscape,
  .amelie-case .case-gallery--amelie .amelie-feature,
  .amelie-case .case-gallery--amelie .case-shot--closing,
  .amelie-photo-pair .case-shot{
    aspect-ratio: 1.36;
  }

  .amelie-case .case-gallery--amelie .amelie-portrait{
    aspect-ratio: .82;
  }

  .amelie-photo-credit{
    padding-top: 4px;
    text-align: right;
  }

  .amelie-press-note{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px 30px;
  }

  .amelie-press-note blockquote,
  .amelie-press-note a{
    grid-column: 1;
  }

  .amelie-press-note blockquote{
    font-size: clamp(2.7rem, 14vw, 4.2rem);
    white-space: normal;
  }
}

/* Amélie: keep the longer official title legible and center her list portrait. */
.amelie-case .case-title h1{
  max-width: 11.5ch;
  font-size: clamp(3.8rem, 7.4vw, 8.4rem);
  line-height: .78;
}

.project-index-list > a[data-project-primary-service="scenography"] .index-stickers img:nth-child(1){
  object-position: 64% center;
}

.project-index-list > a[data-project-primary-service="scenography"] .index-stickers img:nth-child(2){
  object-position: 52% center;
}

@media (max-width: 760px){
  .amelie-case .case-title h1{
    max-width: 100%;
    font-size: clamp(2.55rem, 11vw, 3.4rem);
    line-height: .9;
    white-space: normal;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce){
  .project-year-sort,
  .project-year-sort::after,
  .project-year-sort-glyph i{
    animation: none !important;
    transition: none !important;
  }
}

/* V78 — a clean library icon replaces the former mini construction. */
.studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-icon{
  position: absolute;
  z-index: 2;
  top: 54%;
  right: auto;
  bottom: auto;
  left: 50%;
  display: grid;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--primary);
  box-shadow: none;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1;
  transform: translate(-50%, -50%);
}

/* V79 — the cursor greeting now points precisely toward the pointer. */
.studio-page .studio-cursor-bubble{
  transform: translate3d(
    calc(var(--bubble-x) + 14px),
    calc(var(--bubble-y) + 15px),
    0
  ) rotate(-4deg) scale(.88);
}

.studio-page .studio-cursor-bubble.is-visible{
  transform: translate3d(
    calc(var(--bubble-x) + 14px),
    calc(var(--bubble-y) + 15px),
    0
  ) rotate(-4deg) scale(1);
}

.studio-page .studio-cursor-bubble::before{
  top: -7px;
  left: -5px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 0;
  border-top: 1px solid var(--primary);
  border-left: 1px solid var(--primary);
  border-radius: 1px 0 0;
  background: var(--interaction);
  clip-path: none;
  filter: none;
  transform: rotate(28deg) skew(-4deg);
  transform-origin: center;
}

/* V80 — a compact glass tile keeps the mini composition clear. */
.studio-page .studio-design-layout > span.studio-design-grid{
  background:
    radial-gradient(circle at 78% 78%, rgb(215 255 63 / 24%), transparent 46%),
    linear-gradient(145deg, rgb(2 18 238 / 4%), transparent 62%),
    var(--paper) !important;
}

.studio-page .studio-design-layout > span.studio-design-grid small{
  z-index: 4;
  top: 7px;
  left: 8px;
  font-size: clamp(.25rem, .38vw, .34rem);
  letter-spacing: .075em;
}

.studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-icon{
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: clamp(42px, 82%, 58px);
  max-width: calc(100% - 3px);
  max-height: calc(100% - 3px);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 10px;
  background: linear-gradient(145deg, rgb(255 255 255 / 76%), rgb(255 255 255 / 34%));
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 90%),
    0 7px 14px rgb(2 18 238 / 10%),
    0 0 0 1px rgb(2 18 238 / 10%);
  font-size: clamp(.95rem, 1.45vw, 1.3rem);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}

.studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-icon::before{
  position: relative;
  z-index: 2;
}

.studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-icon::after{
  position: absolute;
  inset: 3px 42% 55% 3px;
  border-radius: 7px 3px 8px 3px;
  background: rgb(255 255 255 / 54%);
  content: "";
  pointer-events: none;
}

/* V81 — a proper rounded speech bubble with one small outlined tail. */
.studio-page .studio-cursor-bubble{
  padding: 9px 14px 10px;
  border: 0;
  border-radius: 17px;
  overflow: visible;
  background: var(--interaction);
  box-shadow:
    4px 5px 0 rgb(2 18 238 / 13%),
    0 10px 22px rgb(48 39 35 / 9%);
  transform: translate3d(
    calc(var(--bubble-x) + 14px),
    calc(var(--bubble-y) + 15px),
    0
  ) rotate(-3deg) scale(.9);
}

.studio-page .studio-cursor-bubble.is-visible{
  transform: translate3d(
    calc(var(--bubble-x) + 14px),
    calc(var(--bubble-y) + 15px),
    0
  ) rotate(-3deg) scale(1);
}

.studio-page .studio-cursor-bubble::before,
.studio-page .studio-cursor-bubble::after{
  position: absolute;
  top: 8px;
  bottom: auto;
  left: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 9px solid var(--primary);
  border-bottom: 5px solid transparent;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  clip-path: none;
  content: "";
  filter: none;
  transform: rotate(32deg);
  transform-origin: 0 0;
}

.studio-page .studio-cursor-bubble::after{
  border-top-width: 4px;
  border-right: 7px solid var(--interaction);
  border-bottom-width: 4px;
}

/* V82 — the glass tile carries the Myrak monogram on brand blue. */
.studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-icon{
  overflow: hidden;
  border-color: rgb(255 255 255 / 58%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 30%), transparent 48%),
    color-mix(in srgb, var(--primary) 88%, transparent);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    inset 0 -8px 16px rgb(0 0 92 / 14%),
    0 7px 15px rgb(2 18 238 / 18%);
  backdrop-filter: blur(9px) saturate(135%);
  -webkit-backdrop-filter: blur(9px) saturate(135%);
}

.studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-mark{
  position: absolute;
  z-index: 2;
  inset: 9px 7px;
  width: calc(100% - 14px);
  height: calc(100% - 18px);
  overflow: visible;
  opacity: .96;
  color: #fff;
  fill: currentColor;
  transform: scale(1);
  transform-origin: center;
}

.studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-icon::after{
  z-index: 3;
  background: rgb(255 255 255 / 22%);
}

/* V83 — one integrated tail, angled toward the pointer. */
.studio-page .studio-cursor-bubble::before{
  position: absolute;
  z-index: 1;
  top: 2px;
  bottom: auto;
  left: -7px;
  display: block;
  width: 15px;
  height: 16px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: var(--interaction);
  clip-path: polygon(0 28%, 100% 0, 52% 100%);
  content: "";
  filter: none;
  transform: none;
}

.studio-page .studio-cursor-bubble::after{
  display: none;
  content: none;
}

/* V84 — a quieter desktop language selector without an active pill. */
.language-switch button,
.language-switch button:hover,
.language-switch button:focus-visible,
.language-switch button[aria-pressed="true"]{
  border-radius: 0;
  background: transparent;
  transform: none;
}

.language-switch button[aria-pressed="true"],
.language-switch button:hover,
.language-switch button:focus-visible{
  color: var(--primary);
  opacity: 1;
}

/* V85 — slightly more breathing room after the Studio voices section. */
.studio-page .studio-voices{
  position: relative;
  top: -14px;
}

@media (max-width: 620px){
  .studio-page .studio-voices{
    top: -8px;
  }
}

/* V86 — consolidated mobile refinement pass. */
.error-zero{
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

.error-motion-mobile{
  display: none;
}

.home-page .hero-v2-foot > a{
  position: relative;
  isolation: isolate;
  padding-top: 16px;
  color: var(--primary);
  transition: color 260ms ease;
}

.home-page .hero-v2-foot > a::before{
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 2px;
  border-radius: 999px;
  background: var(--interaction);
  content: "";
  transition: width 520ms var(--ease);
}

.home-page .hero-v2-foot > a i{
  transition: transform 420ms var(--ease);
}

.home-page .hero-v2-foot > a:hover::before,
.home-page .hero-v2-foot > a:focus-visible::before{
  width: 100%;
}

.home-page .hero-v2-foot > a:hover i,
.home-page .hero-v2-foot > a:focus-visible i{
  transform: translateY(4px);
}

@media (max-width: 620px){
  /* Mobile navigation: brand blue surface, white type, acid-yellow state. */
  .site-header:has(.menu-toggle[aria-expanded="true"]),
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu{
    background: var(--primary) !important;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu nav a,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu > p,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-socials a{
    color: var(--paper) !important;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .audio-toggle,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .menu-toggle{
    color: var(--paper) !important;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .menu-toggle > span:not(.sr-only){
    background: var(--paper) !important;
  }

  .mobile-menu nav a[aria-current="page"]::after{
    background: var(--interaction) !important;
    box-shadow: none !important;
  }

  .mobile-menu .mobile-language button{
    border-color: rgb(255 255 255 / 55%) !important;
    background: transparent !important;
    color: var(--paper) !important;
  }

  .mobile-menu .mobile-language button[aria-pressed="true"]{
    border-color: var(--interaction) !important;
    background: var(--interaction) !important;
    color: var(--ink) !important;
  }

  .mobile-menu .mobile-socials a{
    border-color: rgb(255 255 255 / 58%) !important;
  }

  /* Method hero and step numbers. */
  .process-page .method-line-hero h1{
    width: 100%;
    font-size: clamp(3.35rem, 14.2vw, 4.5rem) !important;
    line-height: .91 !important;
    letter-spacing: -.075em;
  }

  .process-page .method-line-hero h1 > span,
  .process-page .method-line-hero h1 > em{
    display: block;
    white-space: nowrap;
  }

  .process-page .process-journey--v3 .journey-step{
    overflow: visible !important;
    isolation: isolate;
  }

  .process-page .process-journey--v3 .journey-number,
  .process-page .process-journey--v3 .journey-step--05 .journey-number,
  .process-page .process-journey--v3 .journey-step:nth-child(5) .journey-number{
    z-index: 0 !important;
    top: -10px !important;
    left: 12px !important;
    font-size: clamp(7.2rem, 34vw, 9rem) !important;
    line-height: .78 !important;
    transform: none !important;
  }

  .process-page .process-journey--v3 .journey-copy,
  .process-page .process-journey--v3 .journey-object{
    position: relative;
    z-index: 2 !important;
  }

  /* Studio: stable two-line hero, calmer intro and borderless service selector. */
  .studio-page .studio-duo-copy h1{
    width: 100%;
    font-size: clamp(2.7rem, 11.8vw, 3.65rem) !important;
    line-height: .91 !important;
    letter-spacing: -.065em;
  }

  .studio-page .studio-duo-copy h1 > span,
  .studio-page .studio-duo-copy h1 > em{
    display: block;
    white-space: nowrap;
  }

  .studio-page .studio-specialty-intro .studio-specialty-copy{
    max-width: 20ch !important;
    font-size: clamp(1.95rem, 8.7vw, 2.35rem) !important;
    line-height: .94 !important;
  }

  .studio-page .studio-info-columns .expertise-menu h3,
  .studio-page .studio-info-columns .expertise-menu ul,
  .studio-page .studio-info-columns .expertise-menu li,
  .studio-page .studio-info-columns .expertise-menu li[data-expertise]{
    border: 0 !important;
    box-shadow: none !important;
  }

  .studio-page .studio-info-columns .expertise-menu li[data-expertise]::after{
    display: none !important;
    content: none !important;
  }

  .studio-page .studio-info-columns .expertise-menu ul{
    gap: 5px 10px;
  }

  .studio-page .studio-info-columns .expertise-menu li[data-expertise]{
    padding-block: 10px !important;
  }

  .studio-page .studio-voices{
    width: 100%;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .studio-page .voice-scroll-track{
    width: 100% !important;
    margin-inline: auto !important;
    padding: 0 14px 20px !important;
    box-sizing: border-box;
  }

  .studio-page .voice-scroll-track .studio-voice-display{
    width: 100% !important;
    margin-inline: auto !important;
  }

  /* The homepage cue borrows the thin expanding line from project pages. */
  .home-page .hero-v2-foot > a{
    min-width: 132px;
    justify-content: space-between;
  }

  .home-page .hero-v2-foot > a::before{
    width: 100%;
    transform: scaleX(.36);
    transform-origin: right center;
    transition:
      width 0s,
      transform 520ms var(--ease);
  }

  .home-page .hero-v2-foot > a:active::before,
  .home-page .hero-v2-foot > a:focus-visible::before{
    transform: scaleX(1);
  }

  /* Project list stickers now rise from the selected row baseline. */
  .projects-grid-page .project-index-list > a,
  .projects-grid-page .project-index-title{
    overflow: visible !important;
  }

  .projects-grid-page .project-index-title{
    position: relative !important;
  }

  .projects-grid-page .project-index-title .index-stickers{
    position: absolute !important;
    z-index: 5 !important;
    top: auto !important;
    right: 0 !important;
    bottom: -4px !important;
    left: auto !important;
    width: 122px !important;
    height: 1px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
    pointer-events: none;
  }

  .projects-grid-page .project-index-title .index-stickers img{
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 82px !important;
    opacity: 0 !important;
    transform: translate3d(8px, 70%, 0) rotate(8deg) scale(.78) !important;
    transform-origin: bottom center;
    transition:
      opacity 260ms ease,
      transform 520ms var(--ease) !important;
  }

  .projects-grid-page .project-index-title .index-stickers img:nth-child(2){
    width: 76px !important;
    transform: translate3d(42px, 76%, 0) rotate(-5deg) scale(.74) !important;
  }

  .projects-grid-page .project-index-list > a:hover .index-stickers img,
  .projects-grid-page .project-index-list > a:focus-visible .index-stickers img,
  .projects-grid-page .project-index-list > a.is-touch-active .index-stickers img{
    opacity: 1 !important;
    transform: translate3d(-10px, -14px, 0) rotate(-7deg) scale(1) !important;
  }

  .projects-grid-page .project-index-list > a:hover .index-stickers img:nth-child(2),
  .projects-grid-page .project-index-list > a:focus-visible .index-stickers img:nth-child(2),
  .projects-grid-page .project-index-list > a.is-touch-active .index-stickers img:nth-child(2){
    transform: translate3d(42px, -52px, 0) rotate(7deg) scale(.94) !important;
  }

  /* Project hero taxonomy dot: closer and optically aligned. */
  .case-page .case-hero-top > p:last-child{
    display: inline-flex !important;
    width: min(100%, 19ch);
    gap: 5px !important;
    align-items: flex-start !important;
    justify-self: end;
  }

  .case-page .case-hero-top > p:last-child::before{
    flex: 0 0 7px;
    margin-top: .34em;
  }

  /* Touch preview for the final project link; desktop hover rules remain unchanged. */
  .next-project--v4 [data-next-project]{
    touch-action: manipulation;
  }

  .next-project--v4 figure{
    top: var(--next-preview-y, 58%) !important;
    right: auto !important;
    bottom: auto !important;
    left: var(--next-preview-x, 70%) !important;
  }

  /* Contact: post-it first, content below, compact form-to-footer handoff. */
  .contact-page .contact-aside{
    min-height: 0 !important;
    padding: 108px 22px 28px !important;
  }

  .contact-page .contact-postit{
    position: absolute !important;
    z-index: 3;
    top: 104px !important;
    right: 18px !important;
    left: auto !important;
    width: clamp(132px, 38vw, 154px) !important;
    margin: 0 !important;
    transform: translate(var(--note-x, 0), var(--note-y, 0)) rotate(2.5deg) !important;
  }

  .contact-page .contact-postit.reveal.is-visible{
    transform: translate(var(--note-x, 0), var(--note-y, 0)) rotate(2.5deg) !important;
  }

  .contact-page .contact-aside-copy{
    width: 100%;
    padding-top: 190px;
    transform: none !important;
  }

  .contact-page .contact-aside-copy h1{
    font-size: clamp(3.15rem, 14vw, 4.35rem) !important;
  }

  .contact-page .contact-facts{
    margin-top: 40px !important;
  }

  .contact-page .contact-panel{
    min-height: 0 !important;
    padding: 70px 22px 18px !important;
  }

  .contact-page .contact-panel .guided-form,
  .contact-page .form-step{
    min-height: 0 !important;
  }

  .contact-page .form-navigation{
    width: 100%;
    margin-top: 24px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 12px;
  }

  .contact-page .form-navigation .button{
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch;
  }

  .contact-page .form-status{
    min-height: 0 !important;
    margin-top: 8px !important;
  }

  .contact-page + .compact-footer,
  .contact-shell + .compact-footer{
    margin-top: 0 !important;
  }

  /* 404: desktop follows the pointer; mobile exposes a direct drag target. */
  .error-zero{
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  .error-zero.is-touching{
    cursor: grabbing;
  }

  .error-motion-desktop{
    display: none !important;
  }

  .error-motion-mobile{
    display: inline-flex !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .home-page .hero-v2-foot > a::before,
  .home-page .hero-v2-foot > a i,
  .projects-grid-page .index-stickers img,
  .next-project--v4 figure{
    transition: none !important;
  }
}

/* V87 — morphing copy control, radar pulse and magnetic header punctuation. */
[data-copy-email].copy-morph-button{
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 40px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 9px 14px;
  border: 1px solid rgb(2 18 238 / 20%);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 22%)),
    rgb(2 18 238 / 5%);
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 76%),
    0 8px 22px rgb(2 18 238 / 7%);
  cursor: pointer;
  transition:
    border-color 260ms ease,
    background-color 260ms ease,
    color 260ms ease,
    box-shadow 480ms cubic-bezier(.22, 1, .36, 1),
    transform 520ms cubic-bezier(.22, 1, .36, 1);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
}

[data-copy-email].copy-morph-button::before{
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--primary);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1);
}

[data-copy-email].copy-morph-button:hover,
[data-copy-email].copy-morph-button:focus-visible,
[data-copy-email].copy-morph-button.is-copied{
  border-color: var(--primary);
  background-color: rgb(2 18 238 / 8%);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 12px 28px rgb(2 18 238 / 15%);
  transform: translateY(-1px) scale(1.02);
}

[data-copy-email].copy-morph-button:hover::before,
[data-copy-email].copy-morph-button:focus-visible::before,
[data-copy-email].copy-morph-button.is-copied::before{
  transform: scaleX(1);
}

[data-copy-email].copy-morph-button:active{
  transform: scale(.96);
}

.copy-morph-icon{
  position: relative;
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--interaction) 18%, transparent);
  transition:
    background-color 420ms cubic-bezier(.22, 1, .36, 1),
    transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.copy-morph-icon > i{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  transform-origin: center;
  transition:
    opacity 240ms ease,
    transform 560ms cubic-bezier(.22, 1, .36, 1);
}

.copy-morph-icon-copy{
  opacity: 1;
  transform: scale(1);
}

.copy-morph-icon-check{
  color: var(--interaction);
  opacity: 0;
  transform: translateY(5px) scale(.72) rotate(-8deg);
}

[data-copy-email].copy-morph-button:hover .copy-morph-icon-copy,
[data-copy-email].copy-morph-button:focus-visible .copy-morph-icon-copy,
[data-copy-email].copy-morph-button.is-copied .copy-morph-icon-copy{
  opacity: 0;
  transform: translateY(-4px) scale(.72) rotate(6deg);
}

[data-copy-email].copy-morph-button:hover .copy-morph-icon-check,
[data-copy-email].copy-morph-button:focus-visible .copy-morph-icon-check,
[data-copy-email].copy-morph-button.is-copied .copy-morph-icon-check{
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

[data-copy-email].copy-morph-button:hover .copy-morph-icon,
[data-copy-email].copy-morph-button:focus-visible .copy-morph-icon,
[data-copy-email].copy-morph-button.is-copied .copy-morph-icon{
  background: color-mix(in srgb, var(--interaction) 28%, transparent);
  transform: scale(1.06);
}

/* The main punctuation emits one soft radar wave, continuously on hover. */
.home-page .hero-dot-balloon::before{
  position: absolute;
  z-index: -1;
  inset: -.025em;
  border: 0;
  border-radius: 50%;
  background: rgb(2 18 238 / 26%);
  box-shadow: inset 0 0 0 1px rgb(215 255 63 / 54%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  animation: myrak-dot-auto-radar 4.4s ease-out infinite;
}

.home-page .hero-dot-balloon{
  isolation: isolate;
  overflow: visible;
}

.home-page .hero-dot-balloon:hover::before,
.home-page .hero-dot-balloon:focus-visible::before{
  opacity: .8;
  animation: myrak-dot-hover-radar 1.5s ease-out infinite;
}

.home-page .hero-dot-balloon.is-dragging::before,
.home-page .hero-dot-balloon.is-dragging:hover::before{
  opacity: 0;
  animation: none;
}

@keyframes myrak-dot-auto-radar{
  0%{
    opacity: .72;
    transform: scale(0);
  }
  32%{
    opacity: 0;
    transform: scale(2.15);
  }
  32.01%,
  100%{
    opacity: 0;
    transform: scale(2.15);
  }
}

@keyframes myrak-dot-hover-radar{
  0%{
    opacity: .8;
    transform: scale(0);
  }
  100%{
    opacity: 0;
    transform: scale(2.15);
  }
}

/* The wordmark follows its background; only the Myrak dot and Studio “o” carry the brand accent. */
.site-header .wordmark{
  color: var(--ink);
}

.site-header.is-dark .wordmark{
  color: var(--paper);
}

/* The Method header remains light even when the shared section detector marks it dark. */
.process-page .site-header.is-dark .wordmark{
  color: var(--ink);
}

.site-header .wordmark,
.site-header .wordmark:hover,
.site-header .wordmark:focus-visible,
.site-header .wordmark .logo-body,
.site-header .wordmark:hover .logo-body,
.site-header .wordmark:focus-visible .logo-body{
  animation: none !important;
  transform: none;
}

@media (max-width: 620px){
  [data-copy-email].copy-morph-button{
    min-height: 44px;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .wordmark{
    color: var(--paper);
  }
}

@media (prefers-reduced-motion: reduce){
  [data-copy-email].copy-morph-button,
  [data-copy-email].copy-morph-button::before,
  .copy-morph-icon > i,
  .home-page .hero-dot-balloon::before{
    animation: none !important;
    transition: none !important;
  }

  .home-page .hero-dot-balloon::before{
    display: none;
  }
}

/* V89 — final cascade lock for the mobile menu and contact morph controls. */
.contact-direct > .action-morph-button,
.home-page .contact-path-options > .action-morph-button{
  border-color: rgb(2 18 238 / 20%) !important;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 22%)),
    rgb(2 18 238 / 5%) !important;
  color: var(--primary) !important;
}

.contact-direct > .action-morph-button:hover,
.contact-direct > .action-morph-button:focus-visible,
.home-page .contact-path-options > .action-morph-button:hover,
.home-page .contact-path-options > .action-morph-button:focus-visible{
  border-color: var(--primary) !important;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 58%), rgb(255 255 255 / 22%)),
    rgb(2 18 238 / 5%) !important;
  color: var(--paper) !important;
}

.contact-direct > .action-morph-button:hover .action-morph-icon-default,
.contact-direct > .action-morph-button:focus-visible .action-morph-icon-default,
.home-page .contact-path-options > .action-morph-button:hover .action-morph-icon-default,
.home-page .contact-path-options > .action-morph-button:focus-visible .action-morph-icon-default{
  opacity: 0;
  transform: scale(.52);
}

.contact-direct > .action-morph-button:hover .action-morph-icon-result,
.contact-direct > .action-morph-button:focus-visible .action-morph-icon-result,
.home-page .contact-path-options > .action-morph-button:hover .action-morph-icon-result,
.home-page .contact-path-options > .action-morph-button:focus-visible .action-morph-icon-result{
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 620px){
  .site-header:has(.menu-toggle[aria-expanded="true"]) .wordmark{
    color: var(--paper) !important;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .wordmark img.brand-logo{
    filter: brightness(0) invert(1) !important;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .sound-toggle{
    border-color: transparent !important;
    background: transparent !important;
    color: var(--paper) !important;
    opacity: 1 !important;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .sound-toggle:hover,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .sound-toggle:focus-visible,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .sound-toggle[aria-pressed="true"]{
    color: var(--interaction) !important;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials a{
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: var(--paper) !important;
    background: transparent !important;
    color: var(--paper) !important;
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials a::before{
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--interaction);
    content: "";
    transform: scale(0);
    transition: transform 420ms cubic-bezier(.18, 1.45, .38, 1);
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials a:hover,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials a:focus-visible,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials a:active{
    border-color: var(--interaction) !important;
    color: var(--primary) !important;
    transform: translateY(-2px) scale(1.04);
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials a:hover::before,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials a:focus-visible::before,
  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials a:active::before{
    transform: scale(1);
  }

  .site-header:has(.menu-toggle[aria-expanded="true"]) .mobile-menu .mobile-socials i{
    color: currentColor !important;
  }

  .studio-page .studio-info-columns .expertise-menu li[data-expertise],
  .studio-page .studio-info-columns .expertise-menu li[data-expertise] > span,
  .studio-page .studio-info-columns .expertise-menu li[data-expertise].is-active > span{
    font-size: clamp(.9rem, 3.9vw, 1rem) !important;
    line-height: 1.2 !important;
  }
}

/* V90 — one number scale across the Method, with 05 clear of its card. */
.process-page .process-journey--v3 .journey-number{
  font-size: clamp(7.5rem, 12vw, 13rem) !important;
  line-height: .78 !important;
}

.process-page .process-journey--v3 #etape-05 .journey-number{
  top: -48px !important;
  left: clamp(12px, 3vw, 45px) !important;
}

@media (max-width: 620px){
  .process-page .process-journey--v3 .journey-number{
    font-size: clamp(7.2rem, 34vw, 9rem) !important;
  }

  .process-page .process-journey--v3 #etape-05 .journey-number{
    top: -52px !important;
  }
}

/* V91 — a clean outer pulse and a direct grab response for the hero dot. */
.home-page .hero-dot-balloon::before{
  z-index: -1;
  inset: 0;
  border: 1px solid rgb(2 18 238 / 42%);
  background: transparent;
  box-shadow: 0 0 0 1px rgb(215 255 63 / 12%);
  transform: scale(1.04);
  animation: myrak-dot-clean-pulse 4.4s cubic-bezier(.22, 1, .36, 1) infinite;
}

.home-page .hero-dot-balloon:hover:not(.is-dragging),
.home-page .hero-dot-balloon:focus-visible:not(.is-dragging){
  scale: 1.08;
}

.home-page .hero-dot-balloon{
  scale: 1;
  transition:
    box-shadow 240ms ease,
    filter 180ms ease,
    scale 280ms cubic-bezier(.22, 1, .36, 1);
}

.home-page .hero-dot-balloon:hover::before,
.home-page .hero-dot-balloon:focus-visible::before{
  animation: myrak-dot-clean-hover-pulse 1.45s cubic-bezier(.22, 1, .36, 1) infinite;
}

.home-page .hero-dot-balloon.is-dragging{
  animation: none;
  scale: .94;
  filter: saturate(1.12);
  transition-duration: 90ms;
}

@keyframes myrak-dot-clean-pulse{
  0%{
    opacity: .54;
    transform: scale(1.04);
  }
  30%{
    opacity: 0;
    transform: scale(1.9);
  }
  30.01%,
  100%{
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes myrak-dot-clean-hover-pulse{
  0%{
    opacity: .62;
    transform: scale(1.04);
  }
  100%{
    opacity: 0;
    transform: scale(1.9);
  }
}

@media (prefers-reduced-motion: reduce){
  .home-page .hero-dot-balloon,
  .home-page .hero-dot-balloon::before{
    animation: none !important;
    transition: none !important;
  }
}

/* V92 — restrained glass controls with an AnimatePresence-style icon morph. */
.action-morph-button,
[data-copy-email].copy-morph-button,
.contact-direct > .action-morph-button,
.home-page .contact-path-options > .action-morph-button{
  min-height: 38px;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid rgb(2 18 238 / 14%) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 72%), rgb(255 255 255 / 36%)),
    rgb(2 18 238 / 3%) !important;
  color: var(--primary) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 88%),
    0 5px 16px rgb(2 18 238 / 5%);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 280ms cubic-bezier(.22, 1, .36, 1),
    transform 280ms cubic-bezier(.22, 1, .36, 1);
}

.action-morph-button::before,
[data-copy-email].copy-morph-button::before{
  display: none;
  content: none;
}

.action-morph-button:hover,
.action-morph-button:focus-visible,
[data-copy-email].copy-morph-button:hover,
[data-copy-email].copy-morph-button:focus-visible,
[data-copy-email].copy-morph-button.is-copied,
.contact-direct > .action-morph-button:hover,
.contact-direct > .action-morph-button:focus-visible,
.home-page .contact-path-options > .action-morph-button:hover,
.home-page .contact-path-options > .action-morph-button:focus-visible{
  border-color: rgb(2 18 238 / 30%) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 78%), rgb(215 255 63 / 16%)),
    rgb(2 18 238 / 3%) !important;
  color: var(--primary) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 94%),
    0 9px 22px rgb(2 18 238 / 9%);
  transform: translateY(-1px) scale(1.015);
}

.action-morph-button:active,
[data-copy-email].copy-morph-button:active{
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 82%),
    0 3px 9px rgb(2 18 238 / 7%);
  transform: translateY(0) scale(.97);
  transition-duration: 90ms;
}

.action-morph-icon,
.copy-morph-icon{
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  transform: none !important;
}

.action-morph-icon > i,
.copy-morph-icon > i{
  color: currentColor;
  font-size: 1rem;
  filter: blur(0);
  transform-origin: center;
  will-change: opacity, transform, filter;
  transition: none;
}

.action-morph-icon-result,
.copy-morph-icon-check{
  color: var(--primary);
  opacity: 0;
  transform: scale(.52);
}

.action-morph-button[data-morph-state="active"] .action-morph-icon-default,
[data-copy-email].copy-morph-button[data-morph-state="active"] .copy-morph-icon-copy{
  opacity: 0;
  transform: scale(.52);
}

.action-morph-button[data-morph-state="active"] .action-morph-icon-result,
[data-copy-email].copy-morph-button[data-morph-state="active"] .copy-morph-icon-check{
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 620px){
  .action-morph-button,
  [data-copy-email].copy-morph-button{
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce){
  .action-morph-button,
  [data-copy-email].copy-morph-button,
  .action-morph-icon > i,
  .copy-morph-icon > i{
    transition: none !important;
  }
}

/* V93 — a deeper, quieter interaction for the guided-form primary action. */
.contact-page .form-navigation .button{
  border: 1px solid rgb(255 255 255 / 18%);
  background:
    linear-gradient(112deg, var(--primary) 0%, var(--primary) 68%, #1727ff 100%);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 8px 22px rgb(2 18 238 / 14%);
  transform: translateZ(0);
  transition:
    border-color 220ms ease,
    box-shadow 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.contact-page .form-navigation .button::before{
  display: block;
  background:
    radial-gradient(
      circle at calc(100% - 27px) 50%,
      rgb(215 255 63 / 20%) 0,
      rgb(215 255 63 / 8%) 18%,
      transparent 45%
    );
  opacity: 0;
  transform: scale(.82);
  transform-origin: right center;
  transition:
    opacity 360ms ease,
    transform 560ms cubic-bezier(.22, 1, .36, 1);
}

.contact-page .form-navigation .button:hover,
.contact-page .form-navigation .button:focus-visible{
  border-color: rgb(215 255 63 / 58%);
  background:
    linear-gradient(112deg, #0718f1 0%, var(--primary) 62%, #1727ff 100%);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 24%),
    0 14px 30px rgb(2 18 238 / 20%);
  transform: translateY(-2px) scale(1.006);
}

.contact-page .form-navigation .button:hover::before,
.contact-page .form-navigation .button:focus-visible::before{
  opacity: 1;
  transform: scale(1);
}

.contact-page .form-navigation .button > span:first-child{
  transition:
    letter-spacing 360ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.contact-page .form-navigation .button:hover > span:first-child,
.contact-page .form-navigation .button:focus-visible > span:first-child{
  letter-spacing: .005em;
  transform: translateX(2px);
}

.contact-page .form-navigation .button > span:last-child{
  position: relative;
  overflow: hidden;
  background: var(--interaction);
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 58%),
    0 0 0 0 rgb(215 255 63 / 0%);
  transform: scale(1);
  transition:
    background-color 220ms ease,
    box-shadow 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.contact-page .form-navigation .button:hover > span:last-child,
.contact-page .form-navigation .button:focus-visible > span:last-child,
.contact-page .form-navigation .button[type="submit"]:hover > span:last-child,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child{
  background: var(--interaction);
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 68%),
    0 0 0 6px rgb(215 255 63 / 13%);
  transform: scale(1.08);
}

.contact-page .form-navigation .button:hover > span:last-child i,
.contact-page .form-navigation .button:focus-visible > span:last-child i{
  animation: continue-arrow-cycle 520ms cubic-bezier(.22, 1, .36, 1) both;
}

.contact-page .form-navigation .button[type="submit"]:hover > span:last-child i,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child i{
  animation-name: submit-arrow-cycle;
}

.contact-page .form-navigation .button:active{
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 5px 12px rgb(2 18 238 / 14%);
  transform: translateY(0) scale(.985);
  transition-duration: 90ms;
}

.contact-page .form-navigation .button:active > span:last-child{
  transform: scale(.94);
  transition-duration: 90ms;
}

@keyframes continue-arrow-cycle{
  0%{
    opacity: 1;
    transform: translateX(0);
  }
  42%{
    opacity: 0;
    transform: translateX(10px);
  }
  43%{
    opacity: 0;
    transform: translateX(-8px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes submit-arrow-cycle{
  0%{
    opacity: 1;
    transform: translate(0, 0);
  }
  42%{
    opacity: 0;
    transform: translate(7px, -7px);
  }
  43%{
    opacity: 0;
    transform: translate(-6px, 6px);
  }
  100%{
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce){
  .contact-page .form-navigation .button,
  .contact-page .form-navigation .button::before,
  .contact-page .form-navigation .button > span,
  .contact-page .form-navigation .button > span:last-child i{
    animation: none !important;
    transition: none !important;
  }
}

/* V94 — restrained primary CTAs: one quiet signal, no theatrical fill. */
.contact-page .form-navigation .button,
.home-page .contact-path .button,
.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  border-color: rgb(2 18 238 / 18%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 88%), rgb(2 18 238 / 3%));
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 92%),
    0 3px 10px rgb(2 18 238 / 5%);
  transition:
    border-color 180ms ease,
    box-shadow 260ms cubic-bezier(.22, 1, .36, 1),
    transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.contact-page .form-navigation .button::before,
.home-page .contact-path .button::before{
  display: none;
  content: none;
}

.contact-page .form-navigation .button:hover,
.contact-page .form-navigation .button:focus-visible,
.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible{
  border-color: rgb(2 18 238 / 34%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(2 18 238 / 6%));
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 96%),
    0 6px 14px rgb(2 18 238 / 8%);
  transform: translateY(-1px);
}

.contact-page .form-navigation .button:focus-visible,
.home-page .contact-path .button:focus-visible{
  outline: 2px solid rgb(2 18 238 / 24%);
  outline-offset: 3px;
}

.contact-page .form-navigation .button > span:first-child,
.contact-page .form-navigation .button:hover > span:first-child,
.contact-page .form-navigation .button:focus-visible > span:first-child{
  letter-spacing: normal;
  transform: none;
}

.contact-page .form-navigation .button > span:last-child,
.home-page .contact-path .button > span:last-child{
  border: 1px solid rgb(2 18 238 / 88%);
  background: var(--primary);
  color: var(--interaction);
  box-shadow: none;
  transform: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.contact-page .form-navigation .button:hover > span:last-child,
.contact-page .form-navigation .button:focus-visible > span:last-child,
.contact-page .form-navigation .button[type="submit"]:hover > span:last-child,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child,
.home-page .contact-path .button:hover > span:last-child,
.home-page .contact-path .button:focus-visible > span:last-child{
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 92%, white 8%);
  color: var(--interaction);
  box-shadow: none;
  transform: scale(1.02);
}

.contact-page .form-navigation .button > span:last-child i,
.home-page .contact-path .button > span:last-child i{
  animation: none !important;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.contact-page .form-navigation .button:hover > span:last-child i,
.contact-page .form-navigation .button:focus-visible > span:last-child i{
  animation: none;
  transform: translateX(2px);
}

.contact-page .form-navigation .button[type="submit"]:hover > span:last-child i,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child i,
.home-page .contact-path .button:hover > span:last-child i,
.home-page .contact-path .button:focus-visible > span:last-child i{
  animation: none;
  transform: translate(2px, -2px);
}

.contact-page .form-navigation .button:active,
.home-page .contact-path .button:active{
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 88%),
    0 2px 6px rgb(2 18 238 / 5%);
  transform: translateY(0) scale(.992);
  transition-duration: 80ms;
}

.contact-page .form-navigation .button:active > span:last-child,
.home-page .contact-path .button:active > span:last-child{
  transform: scale(.96);
  transition-duration: 80ms;
}

/* V95 — the Auriane app tile draws one loading ring, once, after entering view. */
.studio-page .studio-design-form-icon .studio-design-icon-loader{
  position: absolute;
  z-index: 4;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-90deg);
  transform-origin: center;
}

.studio-page .studio-design-icon-loader circle{
  fill: none;
  stroke-width: 3.5;
}

.studio-page .studio-design-icon-loader-track{
  stroke: rgb(255 255 255 / 22%);
}

.studio-page .studio-design-icon-loader-progress{
  stroke: var(--interaction);
  stroke-dasharray: 125.664;
  stroke-dashoffset: 125.664;
  stroke-linecap: round;
}

.studio-page .studio-design-form-icon.is-app-icon-pending > .studio-design-form-mark{
  opacity: 0;
  transform: scale(.86);
}

.studio-page .studio-design-form-icon.is-app-icon-loading .studio-design-icon-loader{
  animation: studio-app-loader-shell 2.25s ease both;
}

.studio-page .studio-design-form-icon.is-app-icon-loading .studio-design-icon-loader-progress{
  animation: studio-app-loader-draw 1.65s cubic-bezier(.65, 0, .35, 1) .18s both;
}

.studio-page .studio-design-form-icon.is-app-icon-loading > .studio-design-form-mark{
  z-index: 5;
  animation: studio-app-icon-arrival 620ms cubic-bezier(.22, 1, .36, 1) .72s both;
}

@keyframes studio-app-loader-shell{
  0%{ opacity: 0; }
  8%{ opacity: 1; }
  78%{ opacity: 1; }
  100%{ opacity: 0; }
}

@keyframes studio-app-loader-draw{
  from{ stroke-dashoffset: 125.664; }
  to{ stroke-dashoffset: 0; }
}

@keyframes studio-app-icon-arrival{
  0%{
    opacity: 0;
    transform: scale(.86);
  }
  62%{
    opacity: 1;
    transform: scale(1.025);
  }
  100%{
    opacity: .96;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce){
  .studio-page .studio-design-icon-loader{
    display: none;
  }

  .studio-page .studio-design-form-icon > .studio-design-form-mark{
    opacity: .96;
    transform: none;
    animation: none !important;
  }
}

/* V96 — a quieter introduction above the Home contact action. */
.home-page .contact-path > p{
  max-width: 44ch;
  margin-bottom: clamp(28px, 3vw, 36px);
  font-size: clamp(1.15rem, 1.7vw, 1.65rem);
  font-weight: 500;
  line-height: 1.3;
}

@media (max-width: 620px){
  .home-page .contact-path > p{
    margin-bottom: 26px;
    font-size: 1.12rem;
    line-height: 1.34;
  }
}

/* V97 — primary actions carry more presence than the compact contact utilities. */
.home-page .contact-path .button,
.contact-page .form-navigation .button{
  border-color: rgb(2 18 238 / 32%);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(2 18 238 / 5%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 98%),
    0 6px 18px rgb(2 18 238 / 8%);
  transition:
    border-color 220ms ease,
    background 320ms ease,
    box-shadow 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.home-page .contact-path .button::before,
.contact-page .form-navigation .button::before{
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -36px;
  display: block;
  width: 142px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgb(215 255 63 / 32%) 0,
      rgb(215 255 63 / 13%) 38%,
      transparent 70%
    );
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.46);
  transform-origin: center;
  transition:
    opacity 260ms ease,
    transform 540ms cubic-bezier(.22, 1, .36, 1);
}

.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible,
.contact-page .form-navigation .button:hover,
.contact-page .form-navigation .button:focus-visible{
  border-color: rgb(2 18 238 / 58%);
  background:
    linear-gradient(145deg, #fff, rgb(2 18 238 / 9%));
  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 28px rgb(2 18 238 / 13%);
  transform: translateY(-2px);
}

.home-page .contact-path .button:hover::before,
.home-page .contact-path .button:focus-visible::before,
.contact-page .form-navigation .button:hover::before,
.contact-page .form-navigation .button:focus-visible::before{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.home-page .contact-path .button > span:first-child,
.contact-page .form-navigation .button > span:first-child{
  transition:
    letter-spacing 360ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.home-page .contact-path .button:hover > span:first-child,
.home-page .contact-path .button:focus-visible > span:first-child,
.contact-page .form-navigation .button:hover > span:first-child,
.contact-page .form-navigation .button:focus-visible > span:first-child{
  letter-spacing: .008em;
  transform: translateX(2px);
}

.home-page .contact-path .button > span:last-child,
.contact-page .form-navigation .button > span:last-child{
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 0 0 0 rgb(215 255 63 / 0%);
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    color 220ms ease,
    box-shadow 440ms cubic-bezier(.22, 1, .36, 1),
    transform 440ms cubic-bezier(.22, 1, .36, 1);
}

.home-page .contact-path .button:hover > span:last-child,
.home-page .contact-path .button:focus-visible > span:last-child,
.contact-page .form-navigation .button:hover > span:last-child,
.contact-page .form-navigation .button:focus-visible > span:last-child,
.contact-page .form-navigation .button[type="submit"]:hover > span:last-child,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 62%),
    0 0 0 5px rgb(215 255 63 / 13%);
  transform: scale(1.08);
}

.contact-page .form-navigation .button:hover > span:last-child i,
.contact-page .form-navigation .button:focus-visible > span:last-child i{
  transform: translateX(3px);
}

.home-page .contact-path .button:hover > span:last-child i,
.home-page .contact-path .button:focus-visible > span:last-child i,
.contact-page .form-navigation .button[type="submit"]:hover > span:last-child i,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child i{
  transform: translate(2px, -2px);
}

.home-page .contact-path .button:active,
.contact-page .form-navigation .button:active{
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 92%),
    0 3px 9px rgb(2 18 238 / 8%);
  transform: translateY(0) scale(.985);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce){
  .home-page .contact-path .button,
  .home-page .contact-path .button::before,
  .home-page .contact-path .button > span,
  .contact-page .form-navigation .button,
  .contact-page .form-navigation .button::before,
  .contact-page .form-navigation .button > span{
    transition: none !important;
  }
}

/* V105 — minimal, low-noise progress feedback for the guided form. */
.contact-page .form-progress{
  gap: clamp(11px, 1.4vw, 15px);
  margin-bottom: clamp(38px, 3.8vw, 46px);
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

.contact-page .form-progress > span{
  gap: 0;
}

.contact-page .form-progress > span > i{
  display: none;
}

.contact-page .form-progress > span > b{
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: 0;
}

.contact-page .form-progress > i{
  position: relative;
  overflow: visible;
  height: 2px;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 11%, var(--line));
  box-shadow: none;
}

.contact-page .form-progress > i > b{
  inset: 0;
  border-radius: inherit;
  background: var(--primary);
  box-shadow: none;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
}

.contact-page .form-progress > i::after{
  width: 8px;
  min-width: 8px;
  max-width: 8px;
  height: 8px;
  min-height: 8px;
  max-height: 8px;
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  background: var(--interaction);
  box-shadow:
    0 0 0 1px var(--primary),
    0 0 0 4px rgb(2 18 238 / 7%);
  transform: translate3d(-50%, -50%, 0);
  transition:
    left 280ms cubic-bezier(.22, 1, .36, 1),
    background-color 160ms ease,
    box-shadow 220ms ease;
}

.contact-page .form-progress > i.is-changing::after{
  background: color-mix(in srgb, var(--interaction) 82%, white);
  box-shadow:
    0 0 0 1px var(--primary),
    0 0 0 5px rgb(2 18 238 / 10%);
}

@media (prefers-reduced-motion: reduce){
  .contact-page .form-progress > i > b,
  .contact-page .form-progress > i::after{
    transition: none !important;
  }

  .contact-page .form-progress > i.is-changing::after{
    animation: none !important;
  }
}

/* V104 — mobile composition parity and responsive integration fixes. */
@media (max-width: 620px){
  /*
   * Keep the document's real end visually attached to the footer, including
   * the small elastic overscroll area exposed by iOS Safari.
   */
  html{
    background: var(--ink);
  }

  body{
    min-height: 100%;
    margin-bottom: 0;
    background: var(--paper);
  }

  body > .compact-footer:last-of-type{
    position: relative;
    margin-bottom: 0 !important;
  }

  /*
   * Project previews rise from the selected row while their lower edge is
   * clipped by the row baseline, as it is in the desktop composition.
   */
  .projects-grid-page .project-index-title{
    position: static !important;
    isolation: auto;
  }

  .projects-grid-page .project-index-title > h2{
    position: relative;
    z-index: 3;
  }

  .projects-grid-page .project-index-title .index-stickers{
    z-index: 2 !important;
    bottom: 0 !important;
    overflow: visible !important;
    clip-path: inset(-150px -34px 0 -34px) !important;
  }

  .projects-grid-page .project-index-title .index-stickers img{
    bottom: -10px !important;
    box-shadow: 0 12px 25px rgb(36 25 22 / 18%);
  }

  .projects-grid-page .project-index-list > a:hover .index-stickers img,
  .projects-grid-page .project-index-list > a:focus-visible .index-stickers img,
  .projects-grid-page .project-index-list > a.is-touch-active .index-stickers img{
    transform: translate3d(-9px, -8px, 0) rotate(-7deg) scale(1) !important;
  }

  .projects-grid-page .project-index-list > a:hover .index-stickers img:nth-child(2),
  .projects-grid-page .project-index-list > a:focus-visible .index-stickers img:nth-child(2),
  .projects-grid-page .project-index-list > a.is-touch-active .index-stickers img:nth-child(2){
    transform: translate3d(42px, -46px, 0) rotate(7deg) scale(.94) !important;
  }

  /*
   * Method hero: block alignment was resolving to the bottom in recent
   * browsers. Start alignment restores the intended mobile entrance.
   */
  .process-page .method-line-hero{
    min-height: clamp(650px, 84svh, 740px) !important;
    align-content: start !important;
    padding: 108px 14px 38px !important;
  }

  .process-page .method-line-hero > .eyebrow{
    margin-bottom: 56px !important;
  }

  .process-page .method-line-intro{
    margin-top: 42px !important;
  }

  .process-page .method-line-cue{
    margin-top: 24px !important;
  }

  /*
   * Let the SVG remain visible between the cards, but remove the isolated
   * step layers that caused it to paint above their content.
   */
  .process-page .process-journey--v3 .journey-step{
    z-index: auto !important;
    isolation: auto !important;
    scroll-margin-top: 96px;
  }

  .process-page .process-journey--v3 .journey-line{
    z-index: 1 !important;
    pointer-events: none;
  }

  .process-page .process-journey--v3 .journey-number,
  .process-page .process-journey--v3 #etape-05 .journey-number,
  .process-page .process-journey--v3 .journey-step--05 .journey-number,
  .process-page .process-journey--v3 .journey-step:nth-child(5) .journey-number{
    z-index: 2 !important;
    top: -20px !important;
    left: 12px !important;
    font-size: clamp(6.1rem, 29vw, 7.25rem) !important;
    line-height: .78 !important;
  }

  .process-page .process-journey--v3 .journey-copy,
  .process-page .process-journey--v3 .journey-object{
    position: relative;
    z-index: 3 !important;
  }

  /* Align the final Method statement with the shared mobile page margin. */
  .process-page .method-constants--integrated{
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  .process-page .method-constants--integrated .method-constants-heading{
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0 !important;
  }

  .process-page .method-constants--integrated .method-constants-heading h2{
    width: 100%;
    max-width: 100%;
  }

  /* Contact introduction: smaller note, shorter reserved space, calmer fold. */
  .contact-page .contact-aside{
    padding: 96px 20px 26px !important;
  }

  .contact-page .contact-postit{
    top: 92px !important;
    right: 18px !important;
    width: clamp(108px, 30vw, 126px) !important;
  }

  .contact-page .contact-aside-copy{
    padding-top: 136px !important;
  }

  .contact-page .contact-aside-copy h1{
    max-width: 7.4ch;
  }

  .contact-page .contact-facts{
    margin-top: 32px !important;
  }

  /* Keep the progress rail flexible without allowing WebKit to distort it. */
  .contact-page .form-progress > i{
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Keep Auriane's monogram optically contained in its reduced glass tile. */
  .studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-mark{
    inset: 10px 8px;
    width: calc(100% - 16px);
    height: calc(100% - 20px);
  }
}

/*
 * Form choices share the same Myrak glass selection state at every viewport.
 * The border, depth and blue/lime tint carry the feedback without an icon.
 */
.contact-page .answer-card > input + span{
  position: relative;
  overflow: hidden;
  background: rgb(255 255 255 / 72%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 90%),
    0 7px 20px rgb(36 25 22 / 3%);
  transition:
    border-color 240ms ease,
    background-color 240ms ease,
    box-shadow 360ms var(--ease),
    transform 360ms var(--ease);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}

.contact-page .answer-card:active > input + span{
  transform: translateY(0) scale(.985);
  transition-duration: 110ms;
}

@media (hover: hover) and (pointer: fine){
  .contact-page .answer-card:hover > input + span{
    border-color: rgb(2 18 238 / 34%);
    background:
      linear-gradient(135deg, rgb(2 18 238 / 5%), rgb(215 255 63 / 8%)),
      rgb(255 255 255 / 76%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 94%),
      0 12px 26px rgb(2 18 238 / 9%);
    transform: translateY(-3px) scale(1.006);
  }
}

.contact-page .answer-card input:checked + span{
  border-color: rgb(2 18 238 / 48%);
  background:
    linear-gradient(135deg, rgb(2 18 238 / 12%), rgb(215 255 63 / 16%)),
    rgb(255 255 255 / 68%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 92%),
    inset 0 -12px 30px rgb(2 18 238 / 4%),
    0 13px 30px rgb(2 18 238 / 11%);
  transform: translateY(-1px);
}

.project-note-field{
  display: grid !important;
  gap: 8px;
  margin: 18px 0 0 !important;
}

.project-note-field > span{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.project-note-field > span > b{
  font-size: .72rem;
  letter-spacing: .025em;
}

.project-note-field > span > small{
  color: var(--muted);
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contact-page .project-note-field > textarea{
  width: 100%;
  min-height: 66px;
  max-height: 66px;
  resize: none;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  background: rgb(255 255 255 / 72%);
  color: var(--ink);
  font: inherit;
  font-size: .86rem;
  line-height: 1.4;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 90%),
    0 7px 20px rgb(36 25 22 / 3%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms ease;
}

.contact-page .project-note-field > textarea:hover{
  border-color: rgb(2 18 238 / 32%);
}

.contact-page .project-note-field > textarea:focus-visible{
  border-color: var(--primary);
  background: rgb(255 255 255 / 84%);
  box-shadow:
    0 0 0 3px rgb(2 18 238 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 94%);
}

.contact-page .form-step[data-form-step="3"] .form-navigation{
  margin-top: 24px;
}

.website-answer-shell{
  position: relative;
  min-width: 0;
}

.website-answer-shell > .answer-card,
.website-answer-shell > .answer-card > input + span{
  height: 100%;
}

.website-answer-shell > .website-url{
  position: absolute;
  z-index: 2;
  inset: 1px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 13px;
  background: transparent;
  cursor: text;
}

.website-answer-shell > .website-url > span{
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.website-answer-shell > .website-url > input{
  min-width: 0;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgb(2 18 238 / 22%);
  border-radius: 9px;
  outline: none;
  background: rgb(255 255 255 / 58%);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 88%);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms ease;
}

.website-answer-shell > .website-url > input::placeholder{
  color: rgb(107 98 91 / 68%);
}

.website-answer-shell > .website-url > input:hover{
  border-color: rgb(2 18 238 / 40%);
}

.website-answer-shell > .website-url > input:focus-visible{
  border-color: var(--primary);
  background: rgb(255 255 255 / 78%);
  box-shadow:
    0 0 0 3px rgb(2 18 238 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 92%);
}

.website-answer-shell:has(.website-url.is-visible) > .answer-card > input + span{
  color: transparent;
}

@media (max-width: 620px){
  .website-answer-shell > .website-url{
    grid-template-columns: minmax(0, 1fr);
    padding: 8px;
  }

  .website-answer-shell > .website-url > span{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .website-answer-shell > .website-url > input{
    height: 40px;
    padding-inline: 9px;
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .contact-page .answer-card > input + span,
  .website-answer-shell > .website-url,
  .website-answer-shell > .website-url > input{
    transition: none !important;
  }
}

/*
 * Question 05 stays the same height in every state.
 * On wide screens, timing and contact sit side by side. The call slot then
 * replaces the selected call card instead of inserting a new row.
 */
.contact-page .form-step[data-form-step="4"] h2{
  max-width: 14ch;
  margin-bottom: 34px;
}

.final-choice-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(190px, .72fr);
  align-items: start;
  gap: 12px;
}

.final-choice-grid > .answer-grid{
  margin-bottom: 0 !important;
}

.final-choice-grid .answer-card > input + span{
  min-height: 60px;
  padding: 13px 15px;
}

.final-contact-question{
  grid-template-columns: minmax(0, 1fr) !important;
}

.call-answer-shell{
  position: relative;
  min-width: 0;
}

.call-answer-shell > .answer-card,
.call-answer-shell > .answer-card > input + span{
  height: 100%;
}

.call-window[hidden]{
  display: none !important;
}

.call-answer-shell > .call-window{
  position: absolute;
  z-index: 2;
  inset: 1px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
}

.call-answer-shell > .call-window > span{
  color: var(--muted);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.call-answer-shell > .call-window > select{
  min-width: 0;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 28px 0 9px;
  border: 1px solid rgb(2 18 238 / 22%);
  border-radius: 9px;
  outline: none;
  background-color: rgb(255 255 255 / 64%);
  color: var(--ink);
  font-size: .7rem;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.call-answer-shell > .call-window > select:hover{
  border-color: rgb(2 18 238 / 40%);
}

.call-answer-shell > .call-window > select:focus-visible{
  border-color: var(--primary);
  background-color: rgb(255 255 255 / 82%);
  box-shadow:
    0 0 0 3px rgb(2 18 238 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 92%);
}

.call-answer-shell:has(.call-window.is-visible) > .answer-card > input + span{
  color: transparent;
}

.contact-page .form-step[data-form-step="4"] .form-privacy{
  margin-top: 18px;
}

.contact-page .form-step[data-form-step="4"] .form-navigation{
  margin-top: 18px;
}

@media (max-width: 620px){
  .contact-page .form-step[data-form-step="4"] h2{
    max-width: 13ch;
    margin-bottom: 30px;
  }

  .final-choice-grid{
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .final-contact-question{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .final-choice-grid .answer-card > input + span{
    min-height: 58px;
    padding: 12px 14px;
  }

  .call-answer-shell > .call-window{
    grid-template-columns: minmax(0, 1fr);
    padding: 8px;
  }

  .call-answer-shell > .call-window > span{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .call-answer-shell > .call-window > select{
    height: 40px;
    padding-inline: 9px 26px;
    font-size: .66rem;
  }

  .contact-page .form-step[data-form-step="4"] .form-privacy{
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce){
  .call-answer-shell > .call-window,
  .call-answer-shell > .call-window > select{
    transition: none !important;
  }
}

/* V103 — legal-page readability and the last narrow-screen containment fixes. */
.legal-content > p{
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.legal-sections h2{
  text-wrap: balance;
}

.legal-sections p,
.legal-sections li{
  line-height: 1.72;
}

.legal-sections li + li{
  margin-top: .65em;
}

.legal-sections a{
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.legal-sections .legal-note{
  padding: clamp(24px, 4vw, 38px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  border-left: 4px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--paper));
}

@media (max-width: 620px){
  .legal-content > p{
    margin-bottom: 34px;
  }

  .legal-sections article,
  .legal-sections article + article{
    padding-block: 34px;
  }

  .legal-sections .legal-note{
    padding: 24px 20px;
  }

  .sound-toggle,
  .site-header .sound-toggle,
  .voice-attribution [data-voice-source]{
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 370px){
  .process-page #etape-06 .launch-window{
    width: calc(100vw - 104px);
    max-width: none;
  }
}

/* V98 — primary project actions lead the hierarchy with a bolder color reveal. */
.home-page .contact-path .button,
.contact-page .form-navigation .button{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--primary);
  background:
    linear-gradient(112deg, var(--primary) 0%, #0b1cf0 72%, #1b2aff 100%);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 10px 24px rgb(2 18 238 / 16%);
}

.home-page .contact-path .button::before,
.contact-page .form-navigation .button::before{
  z-index: 0;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border-radius: inherit;
  background: var(--interaction);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 680ms cubic-bezier(.22, 1, .36, 1);
}

.home-page .contact-path .button > span,
.contact-page .form-navigation .button > span{
  position: relative;
  z-index: 1;
}

.home-page .contact-path .button:hover,
.home-page .contact-path .button:focus-visible,
.contact-page .form-navigation .button:hover,
.contact-page .form-navigation .button:focus-visible{
  border-color: var(--interaction);
  background:
    linear-gradient(112deg, var(--primary) 0%, #0b1cf0 72%, #1b2aff 100%);
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 48%),
    0 16px 34px rgb(2 18 238 / 22%);
  transform: translateY(-3px) scale(1.008);
}

.home-page .contact-path .button:hover::before,
.home-page .contact-path .button:focus-visible::before,
.contact-page .form-navigation .button:hover::before,
.contact-page .form-navigation .button:focus-visible::before{
  transform: scaleX(1);
}

.home-page .contact-path .button > span:last-child,
.contact-page .form-navigation .button > span:last-child{
  overflow: visible;
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 64%),
    0 0 0 0 rgb(215 255 63 / 18%);
  animation: primary-cta-signal 3.6s cubic-bezier(.22, 1, .36, 1) infinite;
}

.home-page .contact-path .button > span:last-child::after,
.contact-page .form-navigation .button > span:last-child::after{
  position: absolute;
  inset: -1px;
  border: 1px solid var(--interaction);
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  animation: primary-cta-ring 3.6s cubic-bezier(.22, 1, .36, 1) infinite;
}

.home-page .contact-path .button:hover > span:last-child,
.home-page .contact-path .button:focus-visible > span:last-child,
.contact-page .form-navigation .button:hover > span:last-child,
.contact-page .form-navigation .button:focus-visible > span:last-child,
.contact-page .form-navigation .button[type="submit"]:hover > span:last-child,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child{
  border-color: var(--primary);
  background: var(--primary);
  color: var(--interaction);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 20%),
    0 0 0 6px rgb(2 18 238 / 9%);
  animation: none;
  transform: scale(1.1) rotate(-4deg);
}

.home-page .contact-path .button:hover > span:last-child::after,
.home-page .contact-path .button:focus-visible > span:last-child::after,
.contact-page .form-navigation .button:hover > span:last-child::after,
.contact-page .form-navigation .button:focus-visible > span:last-child::after{
  opacity: 0;
  animation: none;
}

.home-page .contact-path .button:hover > span:last-child i,
.home-page .contact-path .button:focus-visible > span:last-child i{
  animation: primary-cta-arrow-diagonal 620ms cubic-bezier(.22, 1, .36, 1) both;
}

.contact-page .form-navigation .button:hover > span:last-child i,
.contact-page .form-navigation .button:focus-visible > span:last-child i{
  animation: primary-cta-arrow-forward 620ms cubic-bezier(.22, 1, .36, 1) both !important;
}

.contact-page .form-navigation .button[type="submit"]:hover > span:last-child i,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child i{
  animation-name: primary-cta-arrow-diagonal !important;
}

.home-page .contact-path .button:active,
.contact-page .form-navigation .button:active{
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 5px 13px rgb(2 18 238 / 15%);
  transform: translateY(0) scale(.982);
}

@keyframes primary-cta-signal{
  0%,
  72%,
  100%{
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 64%),
      0 0 0 0 rgb(215 255 63 / 18%);
    transform: scale(1);
  }
  80%{
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 64%),
      0 0 0 5px rgb(215 255 63 / 12%);
    transform: scale(1.06);
  }
  88%{
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 64%),
      0 0 0 0 rgb(215 255 63 / 0%);
    transform: scale(1);
  }
}

@keyframes primary-cta-ring{
  0%,
  70%,
  100%{
    opacity: 0;
    transform: scale(1);
  }
  76%{
    opacity: .48;
  }
  90%{
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes primary-cta-arrow-forward{
  0%{
    opacity: 1;
    transform: translateX(0);
  }
  38%{
    opacity: 0;
    transform: translateX(12px);
  }
  39%{
    opacity: 0;
    transform: translateX(-10px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes primary-cta-arrow-diagonal{
  0%{
    opacity: 1;
    transform: translate(0, 0);
  }
  38%{
    opacity: 0;
    transform: translate(9px, -9px);
  }
  39%{
    opacity: 0;
    transform: translate(-8px, 8px);
  }
  100%{
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce){
  .home-page .contact-path .button > span:last-child,
  .home-page .contact-path .button > span:last-child::after,
  .contact-page .form-navigation .button > span:last-child,
  .contact-page .form-navigation .button > span:last-child::after{
    animation: none !important;
  }
}

/* V99 — the method endpoint echoes the brand pulse; project voices gain brighter cards. */
.method-final-dot::before{
  position: absolute;
  z-index: -1;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--primary);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.04);
  transition: none;
}

.method-final-dot::after{
  display: none;
  content: none;
}

.method-final-dot.is-complete{
  background: var(--primary);
  box-shadow:
    0 0 0 5px rgb(2 18 238 / 12%),
    0 0 24px rgb(2 18 238 / 28%);
}

.method-final-dot.is-complete::before{
  animation: method-final-dot-pulse 3.8s cubic-bezier(.22, 1, .36, 1) infinite;
}

@keyframes method-final-dot-pulse{
  0%{
    opacity: .62;
    transform: translate(-50%, -50%) scale(1.04);
  }
  30%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.15);
  }
  30.01%,
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.15);
  }
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="0"]{
  background: var(--primary);
  color: var(--paper);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="0"]::before{
  background: var(--interaction);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="0"]::after{
  background: var(--paper);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="1"]{
  background: var(--paper);
  color: var(--ink);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="1"]::before{
  background: var(--primary);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="1"]::after{
  background: var(--interaction);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="2"]{
  background: var(--interaction);
  color: var(--primary);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="2"]::before{
  background: var(--paper);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="2"]::after{
  background: var(--primary);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="3"]{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--primary) 15%, var(--paper)),
      var(--paper) 72%
    );
  color: var(--ink);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="3"]::before{
  background: var(--interaction);
}

.voice-scroll-track .studio-voice-display.voice-stack-card[data-voice-theme="3"]::after{
  background: var(--primary);
}

.voice-stack-card .voice-quote-mark{
  color: var(--primary);
}

.voice-stack-card[data-voice-theme="0"] .voice-quote-mark{
  color: var(--interaction);
}

.voice-stack-card .voice-card-top{
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.voice-card-top [data-voice-kicker]{
  color: currentColor;
  opacity: .72;
}

.voice-stack-card[data-voice-theme="0"] .voice-attribution [data-voice-source]{
  border-color: var(--interaction);
  background: var(--interaction);
  color: var(--primary);
}

.voice-stack-card[data-voice-theme="0"] .voice-progress i{
  background: var(--interaction);
}

.voice-stack-card[data-voice-theme="2"] .voice-progress i{
  background: var(--primary);
}

.studio-voice-display > .voice-attribution{
  display: flex;
  gap: 9px;
  align-items: center;
}

.voice-attribution [data-voice-author]{
  max-width: 32ch;
}

.voice-attribution [data-voice-source]{
  display: grid;
  width: 28px;
  flex: 0 0 28px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(36 25 22 / 24%);
  border-radius: 50%;
  background: rgb(255 255 255 / 30%);
  color: var(--ink);
  transition:
    background-color 220ms ease,
    color 220ms ease,
    transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.voice-attribution [data-voice-source]:hover,
.voice-attribution [data-voice-source]:focus-visible{
  background: var(--primary);
  color: var(--paper);
  transform: rotate(8deg) scale(1.06);
}

.voice-attribution [data-voice-source][hidden]{
  display: none;
}

@media (prefers-reduced-motion: reduce){
  .method-final-dot.is-complete::before{
    animation: none;
  }

  .voice-attribution [data-voice-source]{
    transition: none;
  }
}

/* V100 — on the project CTA, the hover arrow resolves into a clear forward direction. */
.home-page .contact-path .button:hover > span:last-child i,
.home-page .contact-path .button:focus-visible > span:last-child i{
  animation-name: primary-cta-arrow-forward;
}

@media (prefers-reduced-motion: reduce){
  .home-page .contact-path .button:hover > span:last-child i,
  .home-page .contact-path .button:focus-visible > span:last-child i{
    animation: none !important;
    transform: none;
  }
}

/* V101 — the redundant brand medallion is gone; the quote now owns the space. */
.voice-scroll-track .studio-voice-display.voice-stack-card{
  grid-template-columns: minmax(0, 1fr);
}

.voice-stack-card blockquote{
  max-width: 31ch;
}

.voice-attribution [data-voice-author]{
  max-width: 42ch;
}

/* V102 — continuous, slower motion for the two primary project actions. */
.home-page .contact-path .button,
.contact-page .form-navigation .button{
  transition:
    border-color 460ms ease,
    color 540ms ease,
    box-shadow 820ms cubic-bezier(.16, 1, .3, 1),
    transform 820ms cubic-bezier(.16, 1, .3, 1);
}

.home-page .contact-path .button::before,
.contact-page .form-navigation .button::before{
  transition: transform 980ms cubic-bezier(.16, 1, .3, 1);
}

.home-page .contact-path .button > span:last-child,
.contact-page .form-navigation .button > span:last-child{
  transition:
    border-color 520ms ease,
    background-color 620ms ease,
    color 520ms ease,
    box-shadow 820ms cubic-bezier(.16, 1, .3, 1),
    transform 820ms cubic-bezier(.16, 1, .3, 1);
}

.home-page .contact-path .button > span:last-child i,
.contact-page .form-navigation .button > span:last-child i{
  animation: none !important;
  transform: translate3d(0, 0, 0) rotate(0);
  transform-origin: 50% 50%;
  transition: transform 880ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.home-page .contact-path .button:hover > span:last-child i,
.home-page .contact-path .button:focus-visible > span:last-child i{
  animation: none !important;
  transform: translate3d(3px, 0, 0) rotate(45deg);
}

.contact-page .form-navigation .button:not([type="submit"]):hover > span:last-child i,
.contact-page .form-navigation .button:not([type="submit"]):focus-visible > span:last-child i{
  animation: none !important;
  transform: translate3d(4px, 0, 0);
}

.contact-page .form-navigation .button[type="submit"]:hover > span:last-child i,
.contact-page .form-navigation .button[type="submit"]:focus-visible > span:last-child i{
  animation: none !important;
  transform: translate3d(3px, -3px, 0);
}

@media (prefers-reduced-motion: reduce){
  .home-page .contact-path .button,
  .home-page .contact-path .button::before,
  .home-page .contact-path .button > span:last-child,
  .home-page .contact-path .button > span:last-child i,
  .contact-page .form-navigation .button,
  .contact-page .form-navigation .button::before,
  .contact-page .form-navigation .button > span:last-child,
  .contact-page .form-navigation .button > span:last-child i{
    transition: none !important;
  }
}

/* V106 — final narrow-screen placement overrides. */
@media (max-width: 620px){
  .projects-grid-page .project-index-title .index-stickers{
    right: clamp(34px, 10vw, 44px) !important;
  }

  .projects-grid-page .project-index-list > a:hover .index-stickers img:nth-child(2),
  .projects-grid-page .project-index-list > a:focus-visible .index-stickers img:nth-child(2),
  .projects-grid-page .project-index-list > a.is-touch-active .index-stickers img:nth-child(2){
    transform: translate3d(22px, -46px, 0) rotate(7deg) scale(.94) !important;
  }

  .studio-page .studio-design-layout > span.studio-design-grid .studio-design-form-mark{
    inset: auto;
    top: 50%;
    left: 50%;
    width: 58%;
    height: 58%;
    translate: -50% -50%;
  }

  .process-page .method-line-hero{
    min-height: clamp(530px, 64svh, 575px) !important;
  }

  .contact-page .contact-aside{
    padding-top: 92px !important;
  }

  .contact-page .contact-aside-copy{
    padding-top: 66px !important;
  }

  .contact-page .contact-aside-copy h1{
    width: calc(100% - clamp(82px, 24vw, 96px));
    max-width: none;
    font-size: clamp(2.7rem, 12.2vw, 3.35rem) !important;
    line-height: .88 !important;
  }

  .contact-page .contact-postit{
    top: 166px !important;
    right: 14px !important;
    width: clamp(82px, 24vw, 96px) !important;
    padding: 8px !important;
  }

  .contact-page .contact-postit > span{
    font-size: .42rem !important;
  }

  .contact-page .contact-postit strong{
    font-size: .58rem !important;
    line-height: .84 !important;
  }

  .contact-page .contact-postit small{
    font-size: .38rem !important;
  }

  .contact-page .contact-postit .postit-drag-handle{
    right: -5px;
    bottom: -5px;
    width: 34px;
  }

  .contact-page .contact-facts{
    margin-top: 26px !important;
  }

}

/* V107 — clearer home promise, two-line form titles and protected case summaries. */
.home-page .hero-v2-intro{
  display: flex;
  width: max-content;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  margin: clamp(30px, 4vh, 46px) 0 0 auto;
  text-align: left;
}

.home-page .hero-v2-intro > span{
  display: block;
  white-space: nowrap;
}

.contact-page .guided-form{
  --form-title-size: clamp(2.05rem, 3vw, 2.9rem);
}

.contact-page .form-step h2,
.contact-page .form-step[data-form-step="4"] h2{
  width: 100%;
  max-width: 19ch;
  line-height: .98;
  text-wrap: balance;
}

.case-page .case-summary--standalone{
  position: relative;
  z-index: 2;
  width: var(--page);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.1fr);
  margin: calc(var(--section) * -.35) auto clamp(30px, 3.5vw, 50px);
}

.case-page .case-summary--standalone article{
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}

@media (max-width: 900px){
  .case-page .case-summary--standalone{
    width: var(--page);
  }
}

@media (max-width: 620px){
  .home-page .hero-v2-intro{
    display: grid;
    width: max-content;
    max-width: calc(100% - 28px);
    margin: 52px 14px 0 auto;
    font-size: clamp(.8rem, 3.55vw, .9rem);
    line-height: 1.4;
    text-align: left;
  }

  .home-page .hero-v2-intro > span{
    display: block;
    white-space: nowrap;
  }

  .contact-page .guided-form{
    --form-title-size: clamp(1.78rem, 7.55vw, 2.02rem);
  }

  .contact-page .form-step h2,
  .contact-page .form-step[data-form-step="4"] h2{
    max-width: none;
    margin-bottom: 26px;
    letter-spacing: -.045em;
  }

  .case-page .case-summary--standalone{
    width: var(--page);
    grid-template-columns: minmax(0, 1fr);
    margin-top: calc(var(--section) * -.25);
    margin-bottom: 26px;
  }
}

/* V108 — Habitat3 case study. */
body[data-project-key="habitat3"] .case-cover{
  background: #0b91d5;
}

body[data-project-key="habitat3"] .case-cover img{
  object-position: center 42%;
}

.case-gallery--habitat3 .case-shot{
  background: var(--paper);
}

.case-gallery--habitat3 .case-shot img{
  object-fit: contain;
}

@media (max-width: 620px){
  body[data-project-key="habitat3"] .case-cover img{
    object-position: center top;
  }

  .case-gallery--habitat3 .case-shot--opening,
  .case-gallery--habitat3 .case-shot--closing{
    aspect-ratio: 1.08;
  }

.case-gallery--habitat3 .case-shot--portrait,
.case-gallery--habitat3 .case-shot--landscape{
    aspect-ratio: 1;
  }
}

/* V109 — Contact keeps its hover color while the page is active. */
.contact-page .desktop-nav .header-contact[aria-current="page"],
.contact-page .desktop-nav .header-contact[aria-current="page"]:hover,
.contact-page .desktop-nav .header-contact[aria-current="page"]:focus-visible{
  border-color: var(--interaction);
  background: color-mix(in srgb, var(--interaction) 88%, var(--paper));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 74%),
    0 12px 30px rgb(129 153 32 / 22%);
}

/* V111 — compact Amélie press card and final mobile project feedback. */
.amelie-case .amelie-press-note{
  width: min(var(--page), 1040px);
  margin-top: clamp(54px, 6.5vw, 90px);
  grid-template-columns: minmax(110px, .3fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  padding: clamp(22px, 2.5vw, 34px);
}

.amelie-case .amelie-press-note blockquote{
  font-size: clamp(2.05rem, 3.25vw, 3.35rem);
}

@media (max-width: 760px){
  .amelie-case .amelie-press-note{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 46px;
    padding: 22px 18px 24px;
  }

  .amelie-case .amelie-press-note blockquote{
    font-size: clamp(2.1rem, 10.5vw, 3rem);
  }
}

@media (max-width: 620px){
  .next-project--v4 [data-next-project] .next-project-arrow{
    transition:
      background-color 220ms ease,
      border-color 220ms ease,
      color 180ms ease,
      box-shadow 280ms ease,
      transform 260ms var(--ease);
  }

  .next-project--v4 [data-next-project]:hover .next-project-arrow,
  .next-project--v4 [data-next-project]:focus-visible .next-project-arrow{
    border-color: color-mix(in srgb, var(--interaction) 78%, var(--primary));
    background: color-mix(in srgb, var(--interaction) 82%, var(--paper));
    color: var(--ink);
    box-shadow: 0 0 0 7px rgb(215 255 63 / 18%);
    transform: scale(1.03);
  }
}

@media (max-width: 620px) and (hover: none), (max-width: 620px) and (pointer: coarse){
  .next-project--v4 [data-next-project].is-touch-pressed .next-project-arrow,
  .next-project--v4 [data-next-project]:active .next-project-arrow{
    border-color: var(--primary);
    background: var(--primary);
    color: var(--paper);
    box-shadow: 0 0 0 7px rgb(2 18 238 / 16%);
    transform: scale(.94) rotate(7deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .next-project--v4 [data-next-project] .next-project-arrow{
    transition-duration: 1ms;
  }
}

/* V5.5 — preserve each footer logo's native geometry and recolor the same image. */
.footer-v2-mark{
  position: relative;
  isolation: isolate;
  transition: transform 360ms var(--ease);
}

.footer-v2-mark::after{
  display: none;
  content: none;
}

.footer-v2-mark .footer-v2-brand-logo{
  width: 104px;
  height: auto;
  aspect-ratio: 286 / 87;
  background: none !important;
  filter: none;
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
  transition: filter 180ms ease, transform 300ms var(--ease);
}

.footer-v2-mark:focus-visible .footer-v2-brand-logo,
.footer-v2-mark.is-footer-engaged .footer-v2-brand-logo{
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(12%)
    sepia(100%)
    saturate(7461%)
    hue-rotate(243deg)
    brightness(82%)
    contrast(145%);
}

.footer-brand-logo-shell::after{
  display: none;
  content: none;
}

.compact-footer .footer-brand-logo-shell{
  width: 68px;
  aspect-ratio: 269 / 87;
}

.footer-brand-logo-shell .footer-brand-logo{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 269 / 87;
  background: none !important;
  filter: none;
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
  transition: filter 180ms ease, transform 300ms var(--ease);
}

.contact-page .compact-footer img.footer-brand-logo{
  filter: brightness(0) invert(1);
}

.compact-footer .footer-home-link:focus-visible .footer-brand-logo,
.compact-footer .footer-home-link.is-footer-engaged .footer-brand-logo{
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(12%)
    sepia(100%)
    saturate(7461%)
    hue-rotate(243deg)
    brightness(82%)
    contrast(145%);
}

@media (hover: hover) and (pointer: fine){
  .footer-v2-mark:hover .footer-v2-brand-logo{
    filter:
      brightness(0)
      saturate(100%)
      invert(12%)
      sepia(100%)
      saturate(7461%)
      hue-rotate(243deg)
      brightness(82%)
      contrast(145%);
    transform: scale(1.045);
  }

  .footer-home-link:hover .footer-brand-logo{
    filter:
      brightness(0)
      saturate(100%)
      invert(12%)
      sepia(100%)
      saturate(7461%)
      hue-rotate(243deg)
      brightness(82%)
      contrast(145%);
    transform: scale(1.045);
  }
}

@media (hover: none), (pointer: coarse){
  .footer-v2-mark:hover .footer-v2-brand-logo,
  .compact-footer .footer-home-link:hover .footer-brand-logo{
    filter: none;
  }

  .contact-page .compact-footer .footer-home-link:hover .footer-brand-logo{
    filter: brightness(0) invert(1);
  }
}

.contact-page .footer-home-link.is-footer-engaged{
  transform: translateY(-2px) rotate(-.45deg);
}

.contact-page .footer-home-link.is-footer-pressed{
  transform: translateY(1px) scale(.97);
  transition-duration: 80ms;
}

@media (prefers-reduced-motion: reduce){
  .footer-v2-mark .footer-v2-brand-logo,
  .footer-brand-logo-shell .footer-brand-logo{
    transition-duration: 1ms;
  }
}

/* V102 — interactive exploration deck. */
.process-page #etape-03 .exploration-directions{
  position: relative;
  width: min(48vw, 720px);
  height: clamp(420px, 36vw, 480px);
  margin-inline: auto;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.process-page #etape-03 .exploration-directions figure{
  position: absolute;
  top: 18px;
  left: 50%;
  overflow: hidden;
  width: clamp(210px, 38%, 272px);
  margin: 0;
  border: 5px solid var(--chalk);
  border-radius: 7px;
  background: var(--chalk);
  box-shadow: 0 18px 42px rgb(48 39 35 / 13%);
  opacity: .82;
  outline: none;
  cursor: pointer;
  animation: none !important;
  transform-origin: 50% 115%;
  transition: transform 260ms cubic-bezier(.23, 1, .32, 1), opacity 180ms ease, box-shadow 220ms ease;
  will-change: transform;
}

.process-page #etape-03 .exploration-directions figure:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 5px;
}

.process-page #etape-03 .exploration-directions figure:active{
  transition-duration: 110ms;
}

@media (hover: hover) and (pointer: fine){
  .process-page #etape-03 .exploration-directions figure:hover{
    opacity: 1;
    box-shadow: 0 26px 58px rgb(48 39 35 / 18%);
  }
}

.process-page #etape-03 .exploration-directions[data-active="0"] figure:nth-child(1),
.process-page #etape-03 .exploration-directions[data-active="1"] figure:nth-child(2),
.process-page #etape-03 .exploration-directions[data-active="2"] figure:nth-child(3){
  z-index: 3;
  opacity: 1;
  box-shadow: 0 30px 68px rgb(48 39 35 / 19%);
  transform: translateX(-50%) translateY(-8px) rotate(0) scale(1.035);
}

.process-page #etape-03 .exploration-directions[data-active="0"] figure:nth-child(2),
.process-page #etape-03 .exploration-directions[data-active="1"] figure:nth-child(3),
.process-page #etape-03 .exploration-directions[data-active="2"] figure:nth-child(1){
  z-index: 2;
  transform: translateX(28%) translateY(28px) rotate(7deg) scale(.9);
}

.process-page #etape-03 .exploration-directions[data-active="0"] figure:nth-child(3),
.process-page #etape-03 .exploration-directions[data-active="1"] figure:nth-child(1),
.process-page #etape-03 .exploration-directions[data-active="2"] figure:nth-child(2){
  z-index: 1;
  transform: translateX(-128%) translateY(28px) rotate(-7deg) scale(.9);
}

.process-page #etape-03 .exploration-directions.is-keyboard-nav figure{
  transition-duration: 0ms;
}

.process-page #etape-03 .exploration-directions img{
  height: calc(100% - 34px);
  object-fit: cover;
  transition: transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.process-page #etape-03 .exploration-directions figure:active img{
  transform: scale(.985);
}

.process-page #etape-03 .exploration-directions figcaption{
  position: relative;
  height: 34px;
  padding-inline: 10px 26px;
}

.process-page #etape-03 .exploration-directions figure[aria-pressed="true"] figcaption::after{
  position: absolute;
  top: 50%;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgb(2 18 238 / 10%);
  content: "";
  transform: translateY(-50%);
}

@media (min-width: 761px){
  .process-page #etape-03{
    grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr);
    column-gap: clamp(28px, 4vw, 64px);
  }

  .process-page #etape-03 .journey-number{
    top: 66px;
    font-size: clamp(5.8rem, 8vw, 9rem);
  }

  .process-page #etape-03 .journey-copy{
    grid-column: 1;
    margin-left: clamp(-40px, -2vw, -20px);
    top: 102px;
  }

  .process-page #etape-03 .exploration-directions{
    grid-column: 2;
    width: min(44vw, 650px);
    height: clamp(390px, 32vw, 440px);
    justify-self: start;
    transform: translateX(clamp(-36px, -2vw, -18px));
  }

  .process-page #etape-03 .exploration-directions figure{
    width: clamp(198px, 36%, 250px);
  }
}

@media (max-width: 760px){
  .process-page #etape-03 .exploration-directions{
    display: flex;
    overflow-x: auto;
    width: calc(100vw - 28px);
    height: auto;
    max-width: none;
    gap: 14px;
    margin: 42px -14px 0 !important;
    padding: 16px clamp(38px, 14vw, 62px) 30px;
    scroll-padding-inline: clamp(38px, 14vw, 62px);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .process-page #etape-03 .exploration-directions::-webkit-scrollbar{
    display: none;
  }

  .process-page #etape-03 .exploration-directions figure,
  .process-page #etape-03 .exploration-directions[data-active] figure:nth-child(n){
    position: relative;
    inset: auto;
    flex: 0 0 min(68vw, 220px);
    width: min(68vw, 220px);
    opacity: 1;
    scroll-snap-align: center;
    transform: none;
  }

  .process-page #etape-03 .exploration-directions figure[aria-pressed="true"]{
    box-shadow: 0 22px 52px rgb(48 39 35 / 17%);
  }
}

@media (max-width: 620px){
  .process-page #etape-03{
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 54px;
  }

  .process-page #etape-03 .journey-copy{
    width: 100%;
    padding: 18px;
  }

  .process-page #etape-03 .journey-copy h2{
    max-width: 11ch;
    margin-bottom: 18px;
    font-size: clamp(2.15rem, 10vw, 2.7rem);
    line-height: .94;
  }

  .process-page #etape-03 .journey-copy > p:last-child{
    font-size: clamp(.82rem, 3.55vw, .92rem);
    line-height: 1.5;
  }

  .process-page #etape-03 .exploration-directions{
    display: grid;
    overflow: visible;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
    margin: 28px 0 0 !important;
    padding: 8px 2px 12px;
    scroll-snap-type: none;
  }

  .process-page #etape-03 .exploration-directions figure,
  .process-page #etape-03 .exploration-directions[data-active] figure:nth-child(n){
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: .7;
    border-width: 3px;
    opacity: .7;
    transform: none;
  }

  .process-page #etape-03 .exploration-directions[data-active="0"] figure:nth-child(1),
  .process-page #etape-03 .exploration-directions[data-active="1"] figure:nth-child(2),
  .process-page #etape-03 .exploration-directions[data-active="2"] figure:nth-child(3){
    z-index: 3;
    opacity: 1;
    box-shadow: 0 17px 34px rgb(48 39 35 / 18%);
    transform: translateY(-6px) scale(1.035);
  }

  .process-page #etape-03 .exploration-directions img{
    height: calc(100% - 28px);
    object-fit: contain;
  }

  .process-page #etape-03 .exploration-directions figcaption{
    height: 28px;
    padding-inline: 5px 14px;
    font-size: .44rem;
    letter-spacing: .035em;
  }

  .process-page #etape-03 .exploration-directions figure[aria-pressed="true"] figcaption::after{
    right: 5px;
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 3px rgb(2 18 238 / 10%);
  }
}

@media (prefers-reduced-motion: reduce){
  .process-page #etape-03 .exploration-directions figure{
    transition: opacity 120ms ease, box-shadow 120ms ease;
  }
}