.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 / var(--nb));
  /* 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);
}

/* ── Safari fix: a rounded `overflow:hidden` box fails to clip children that
   use `filter: blur()` (decorative glow circles), so they bleed past and the
   corners square off. Promoting the clip box to its own compositing layer makes
   Safari apply the rounded clip at composite time. No transform conflict here
   (unlike the hover cards), so promotion holds. Side-effect-free elsewhere. ── */
.glow-clip {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  isolation: isolate;
}