.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Skip link: hidden until keyboard-focused ── */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: #1c1b1b;
  color: #fde400;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  border-radius: 0.5rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #fde400;
  outline-offset: 2px;
}

/* ── Honeypot field: visually + behaviourally hidden, reachable to bots ── */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Nav link focus-visible — works on both light + dark sections ── */
.nav-link {
  border-radius: 0.25rem;
}
.nav-link:focus-visible {
  outline: 2px solid #1c1b1b;
  outline-offset: 4px;
}
/* ── Navbar: starts transparent, frosts in on scroll ── */
.nav {
  --nb:    0;   /* 0→1 driven by JS */
  --nblur: 0px;
  overflow: clip;
  background: rgb(252 249 248 / 74%);
  /* depth shadows only — no top inset to avoid white line at viewport top */
  box-shadow:
    inset 0 0 5px rgba(255, 255, 255, calc(var(--nb) * 0.35)),
    inset 0 -1px 0 rgba(0, 0, 0, calc(var(--nb) * 0.08)),
    0 1px 0 rgba(0, 0, 0, calc(var(--nb) * 0.08)),
    0 8px 32px rgba(0, 0, 0, calc(var(--nb) * 0.14)),
    0 2px 8px rgba(0, 0, 0, calc(var(--nb) * 0.07));
  transition:
    background 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

/* Only apply backdrop-filter once it actually has a non-zero blur,
   otherwise Safari renders a black compositing artifact. */
.nav.is-frosted {
  backdrop-filter: blur(var(--nblur)) saturate(160%) brightness(1.02);
  -webkit-backdrop-filter: blur(var(--nblur)) saturate(160%) brightness(1.02);
}

.tonal-shift-via-blur {
  backdrop-filter: blur(20px);
}
.no-border { border: none !important; }
.flat { box-shadow: none !important; }

/* ── Service card hover: CTA card shake ── */
@keyframes cta-shake {
  0%   { transform: translateX(0) rotate(0deg); }
  15%  { transform: translateX(-6px) rotate(-0.4deg); }
  30%  { transform: translateX(5px) rotate(0.3deg); }
  45%  { transform: translateX(-4px) rotate(-0.2deg); }
  60%  { transform: translateX(3px) rotate(0.15deg); }
  75%  { transform: translateX(-2px) rotate(-0.1deg); }
  90%  { transform: translateX(1px); }
  100% { transform: translateX(0) rotate(0deg); }
}
.cta-shake {
  animation: cta-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes scroll-horizontal {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-scroll-horizontal {
  animation: scroll-horizontal 20s linear infinite;
}

@keyframes float-liquid {
  0%   { transform: translate(0, 0) scale(1);      border-radius: 58% 42% 45% 55% / 52% 48% 58% 42%; }
  33%  { transform: translate(10%, -8%) scale(1.1); border-radius: 42% 58% 55% 45% / 38% 62% 42% 58%; }
  66%  { transform: translate(-8%, 12%) scale(0.95); border-radius: 62% 38% 42% 58% / 58% 42% 38% 62%; }
  100% { transform: translate(0, 0) scale(1);      border-radius: 58% 42% 45% 55% / 52% 48% 58% 42%; }
}

@keyframes float-liquid-alt {
  0%   { transform: translate(0, 0) scale(1);       border-radius: 42% 58% 55% 45% / 58% 42% 48% 52%; }
  33%  { transform: translate(-12%, 10%) scale(1.1); border-radius: 58% 42% 38% 62% / 42% 58% 62% 38%; }
  66%  { transform: translate(10%, -15%) scale(1.2); border-radius: 38% 62% 58% 42% / 62% 38% 42% 58%; }
  100% { transform: translate(0, 0) scale(1);       border-radius: 42% 58% 55% 45% / 58% 42% 48% 52%; }
}

.animate-mesh-liquid {
  animation: float-liquid 13.14s ease-in-out infinite;
}
.animate-mesh-liquid-delayed {
  animation: float-liquid-alt 16.02s ease-in-out infinite;
}
.animate-mesh-liquid-slow {
  animation: float-liquid 18.99s ease-in-out infinite reverse;
}

.artwork-mask {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* ── Shared yellow button style ── */
.btn-yellow {
  color: #1a1a18;
  box-shadow: 0 12px 30px -10px rgba(255,184,77,0.55), inset 0 -2px 0 rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.35s ease;
}
.btn-yellow:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(255,184,77,0.75), inset 0 -2px 0 rgba(0,0,0,0.06);
}
.btn-yellow:focus-visible {
  outline: 3px solid #1a1a18;
  outline-offset: 3px;
}
.btn-yellow:active {
  transform: scale(0.97);
}