/* A separate optical surface: never a layout, scrolling, or interaction layer. */
.liquid-surface {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 12;
  pointer-events: none;
  user-select: none;
  contain: strict;
  opacity: 0;
  transition: opacity 650ms ease;
}
.liquid-surface.is-ready { opacity: 1; }
.liquid-surface:not(.is-ready) { display: none; }
.liquid-surface.is-quiet { opacity: 0; }
html.nav-open .liquid-surface { visibility: hidden; }
.liquid-optics { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.liquid-touch-lens {
  position: fixed;
  z-index: 13;
  width: 96px;
  height: 114px;
  margin: -57px 0 0 -48px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.3);
  border: 1px solid #ffffff70;
  box-shadow: inset 3px 5px 14px #153e321a, inset -2px -4px 12px #ffffff80, 0 2px 7px #153e3214;
  transition: opacity 1800ms ease-out, transform 1800ms ease-out, left 100ms linear, top 100ms linear;
}
.liquid-touch-lens.is-pressed { opacity: .7; transform: scale(1); transition-duration: 350ms, 350ms, 100ms, 100ms; }
.liquid-touch-lens.is-scrolling { visibility: hidden; }
html.nav-open .liquid-touch-lens { visibility: hidden; }

/* Dark translucent tones keep the slogan legible against the white page. */
.liquid-active .hero h1.liquid-headline-ready { filter: url("#liquid-headline-wave"); }
@supports (background-clip: text) {
  .liquid-active .hero h1 > span {
    color: transparent;
    background: linear-gradient(115deg,#143b30 4%,#315d4d 29%,#477361 36%,#163f32 42%,#102f26 65%,#426d5b 72%,#173e32 80%);
    background-size: 230% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: .25px #153e32;
    text-shadow: 0 0 0 #153e32;
    animation: liquid-letter-light 18s ease-in-out infinite alternate;
  }
  .liquid-active .hero h1 > .signature-type {
    background-image: linear-gradient(112deg,#9c291f 8%,#c44636 30%,#a73427 39%,#87251f 61%,#bc4535 70%,#a72f24 80%);
    -webkit-text-stroke-color: #a33025;
    text-shadow: 0 0 0 #a33025;
  }
}
@keyframes liquid-letter-light {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Real text reserves the layout and accessible name before the artwork loads. */
.studio-page .hero h1 { position: relative; padding-block: 8px 20px; font-size: 61px; line-height: 1.22; }
.studio-page .hero h1 .signature-type { font-size: 80px; }
.glass-headline-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.studio-page .hero h1.glass-ready { filter: none !important; }
.studio-page .hero h1.glass-ready > span {
  color: transparent; background: none; -webkit-text-stroke: 0 transparent;
  text-shadow: none; animation: none;
}
@media (max-width: 1120px) {
  .studio-page .hero h1 { font-size: 53px; }
  .studio-page .hero h1 .signature-type { font-size: 70px; }
}
@media (max-width: 800px) {
  .studio-page .hero h1 { font-size: 46px; }
  .studio-page .hero h1 .signature-type { font-size: 63px; }
}
@media (max-width: 640px) {
  .studio-page .hero h1 { font-size: 40px; line-height: 1.22; padding-block: 7px 20px; }
  .studio-page .hero h1 .signature-type { font-size: 67px; line-height: 1.14; }
}
@media (max-width: 370px) {
  .studio-page .hero h1 { font-size: 36px; }
  .studio-page .hero h1 .signature-type { font-size: 58px; }
}
@media (min-width: 1121px) and (max-height: 1050px) {
  .studio-page .hero h1 { font-size: 50px; }
  .studio-page .hero h1 .signature-type { font-size: 66px; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .liquid-surface, .liquid-touch-lens { display: none; }
  .hero h1.liquid-headline-ready { filter: none !important; }
}
@media print {
  .liquid-surface, .liquid-touch-lens, .glass-headline-canvas { display: none; }
  .hero h1.liquid-headline-ready { filter: none !important; }
  .liquid-active .hero h1 > span { color: #153e32; background: none; animation: none; }
  .liquid-active .hero h1 > .signature-type { color: #a33025; }
  .studio-page .hero h1.glass-ready > span { color: #153e32; }
  .studio-page .hero h1.glass-ready > .signature-type { color: #a33025; }
}