:root {
  color-scheme: light;
  --bg: #f8f3ea;
  --panel: #ffffff;
  --text: #1f2933;
  --muted: #667085;
  --accent: #d14343;
  --accent-dark: #a72e2e;
  --border: #e3ddcf;
}


* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  position: relative;
  overflow-x: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255, 72, 72, 0.24) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 16%, rgba(70, 155, 255, 0.2) 0 6px, transparent 7px),
    radial-gradient(circle at 24% 78%, rgba(255, 174, 52, 0.2) 0 7px, transparent 8px),
    radial-gradient(circle at 74% 70%, rgba(64, 210, 156, 0.16) 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
  background-size: 170px 170px, 145px 145px, 160px 160px, 130px 130px, auto;
  background-position: 0 0;
  animation: drift-right 18s linear infinite;
  line-height: 1.6;
}

@keyframes drift-right {
  from { background-position: 0 0; }
  to { background-position: 220px 0; }
}

.pattern-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.pattern-orb {
  position: absolute;
  display: block;
  opacity: 0.95;
  --pattern-rotation: 0deg;
  --pattern-scale: 0.5;
  --pattern-color-1: rgba(209, 67, 67, 0.95);
  --pattern-color-2: rgba(231, 99, 99, 0.85);
  --pattern-color-3: rgba(167, 46, 46, 0.8);
  --pattern-color-4: rgba(209, 67, 67, 0.75);
  transform-origin: center center;
  animation: drift-pulse 10s ease-in-out infinite;
  will-change: transform, border-radius;
  transition: opacity .55s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset -12px -10px 20px rgba(255, 255, 255, 0.28), inset 8px 8px 20px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(209, 67, 67, 0.14);
  backdrop-filter: blur(2px);
}

.pattern-orb::before,
.pattern-orb::after {
  content: '';
  position: absolute;
  display: block;
  background: inherit;
  border-radius: inherit;
  opacity: 0.8;
}

.pattern-orb::before {
  inset: 12% auto auto 18%;
  width: 30%;
  height: 30%;
  filter: blur(2px);
}

.pattern-orb::after {
  inset: auto 14% 12% auto;
  width: 24%;
  height: 24%;
  filter: blur(3px);
  opacity: 0.6;
}

.orb-1 {
  width: 180px;
  height: 180px;
  left: 8%;
  top: 12%;
  border-radius: 42% 58% 56% 44% / 54% 46% 54% 46%;
  background: radial-gradient(circle, var(--pattern-color-1) 0%, rgba(209, 67, 67, 0.2) 60%, rgba(209, 67, 67, 0) 72%);
}

.orb-2 {
  width: 140px;
  height: 140px;
  right: 10%;
  top: 20%;
  animation-delay: 0.7s;
  border-radius: 44% 56% 50% 50% / 58% 40% 60% 42%;
  clip-path: polygon(20% 0%, 100% 18%, 82% 100%, 0% 82%);
  --pattern-rotation: 20deg;
  --pattern-color-1: rgba(68, 106, 140, 0.7);
  --pattern-color-2: rgba(232, 171, 90, 0.42);
  --pattern-color-3: rgba(209, 67, 67, 0.5);
  background: linear-gradient(135deg, var(--pattern-color-1), var(--pattern-color-2));
}

.orb-3 {
  width: 150px;
  height: 110px;
  left: 24%;
  bottom: 14%;
  animation-delay: 1.1s;
  border-radius: 0;
  clip-path: polygon(18% 0%, 74% 8%, 100% 38%, 82% 92%, 37% 100%, 0% 62%);
  --pattern-color-1: rgba(236, 72, 153, 0.5);
  --pattern-color-2: rgba(209, 67, 67, 0.42);
  --pattern-color-3: rgba(59, 130, 246, 0.45);
  background: linear-gradient(135deg, var(--pattern-color-1), var(--pattern-color-2));
}

.orb-4 {
  width: 120px;
  height: 120px;
  right: 20%;
  bottom: 18%;
  animation-delay: 1.5s;
  border-radius: 46% 54% 62% 38% / 55% 42% 58% 45%;
  --pattern-color-1: rgba(249, 115, 22, 0.45);
  --pattern-color-2: rgba(209, 67, 67, 0.42);
  --pattern-color-3: rgba(236, 72, 153, 0.4);
  background: var(--pattern-color-1);
  clip-path: ellipse(50% 45% at 50% 50%);
}

.orb-5 {
  width: 110px;
  height: 110px;
  left: 46%;
  top: 8%;
  animation-delay: 1.9s;
  border-radius: 50%;
  clip-path: ellipse(48% 44% at 50% 50%);
  --pattern-color-1: rgba(255, 255, 255, 0.95);
  --pattern-color-2: rgba(59, 130, 246, 0.45);
  --pattern-color-3: rgba(209, 67, 67, 0.4);
  background: radial-gradient(circle, var(--pattern-color-1) 0%, var(--pattern-color-2) 55%, rgba(59, 130, 246, 0) 72%);
}

.orb-6 {
  width: 90px;
  height: 90px;
  left: 38%;
  bottom: 22%;
  animation-delay: 2.2s;
  border-radius: 44% 56% 62% 38% / 56% 40% 60% 44%;
  --pattern-rotation: 45deg;
  --pattern-color-1: rgba(16, 185, 129, 0.42);
  --pattern-color-2: rgba(209, 67, 67, 0.42);
  --pattern-color-3: rgba(232, 171, 90, 0.35);
  background: var(--pattern-color-1);
}

.orb-7 {
  width: 70px;
  height: 70px;
  left: 64%;
  top: 36%;
  animation-delay: 2.6s;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 30%, 82% 100%, 18% 100%, 0% 30%);
  --pattern-rotation: 12deg;
  --pattern-color-1: rgba(192, 132, 252, 0.48);
  --pattern-color-2: rgba(236, 72, 153, 0.4);
  --pattern-color-3: rgba(209, 67, 67, 0.4);
  background: var(--pattern-color-1);
}

.orb-8 {
  width: 100px;
  height: 100px;
  left: 16%;
  top: 42%;
  animation-delay: 3s;
  border-radius: 40% 60% 50% 50% / 50% 44% 56% 50%;
  --pattern-color-1: rgba(251, 191, 36, 0.48);
  --pattern-color-2: rgba(209, 67, 67, 0.38);
  --pattern-color-3: rgba(59, 130, 246, 0.35);
  background: var(--pattern-color-1);
}

.orb-9 {
  width: 140px;
  height: 90px;
  right: 32%;
  top: 40%;
  animation-delay: 3.4s;
  border-radius: 50% 50% 44% 56% / 56% 56% 44% 44%;
  --pattern-color-1: rgba(14, 165, 233, 0.5);
  --pattern-color-2: rgba(209, 67, 67, 0.4);
  --pattern-color-3: rgba(236, 72, 153, 0.38);
  background: linear-gradient(135deg, var(--pattern-color-1), var(--pattern-color-2));
}

.orb-10 {
  width: 130px;
  height: 130px;
  left: 72%;
  bottom: 10%;
  animation-delay: 3.8s;
  border-radius: 48% 52% 56% 44% / 58% 45% 55% 42%;
  --pattern-color-1: rgba(244, 63, 94, 0.5);
  --pattern-color-2: rgba(209, 67, 67, 0.38);
  --pattern-color-3: rgba(59, 130, 246, 0.32);
  background: linear-gradient(135deg, var(--pattern-color-1), var(--pattern-color-2));
}

@keyframes drift-pulse {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--pattern-rotation)) scale(var(--pattern-scale));
    opacity: 0.9;
    filter: hue-rotate(0deg) saturate(2.2) brightness(1.55);
  }
  25% {
    transform: translate3d(28px, -24px, 0) rotate(calc(var(--pattern-rotation) + 8deg)) scale(calc(var(--pattern-scale) + 0.3));
    opacity: 1;
    filter: hue-rotate(35deg) saturate(2.5) brightness(1.7);
  }
  50% {
    transform: translate3d(90px, 24px, 0) rotate(calc(var(--pattern-rotation) - 8deg)) scale(calc(var(--pattern-scale) + 0.85));
    opacity: 1;
    filter: hue-rotate(160deg) saturate(2.8) brightness(1.85);
  }
  75% {
    transform: translate3d(140px, -16px, 0) rotate(calc(var(--pattern-rotation) + 4deg)) scale(calc(var(--pattern-scale) + 0.4));
    opacity: 0.95;
    filter: hue-rotate(280deg) saturate(2.3) brightness(1.6);
  }
}

a { color: var(--accent-dark); text-decoration: none; }
img { max-width: 100%; display: block; }
.hero,
main {
  position: relative;
  z-index: 1;
}

.cards article,
.card-form,
.gallery figure {
  position: relative;
  z-index: 2;
}
.hero {
  padding: 1.25rem 1.5rem 3rem;
  background: linear-gradient(135deg, #fef9f2 0%, #f1e7d6 100%);
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.brand {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit;
}
.nav-links { display: flex; gap: 1rem; align-items: center; }
.lang-select {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font: inherit;
  min-width: 8rem;
}
.hero-content {
  max-width: 1100px;
  margin: 2rem auto 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 700;
}
.hero h1 {
  font-size: clamp(2rem, 3.2vw, 3rem);
  margin: 0 0 1rem;
  font-family: inherit;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 620px;
  font-family: inherit;
}
.button {
  display: inline-block;
  border-radius: 999px;
  padding: 0.8rem 1.2rem;
  font-weight: 700;
  margin-top: 1rem;
  border: none;
  cursor: pointer;
}
.button.primary { background: var(--accent); color: white; }
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.section.alt { background: #fdf8f0; border-radius: 20px; margin-top: 1rem; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.cards article, .card-form, .gallery figure {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.hero-content img,
.gallery img {
  filter: hue-rotate(0deg) saturate(1.25) contrast(1.08) brightness(1.05);
}

.gallery img {
  border-radius: 12px;
  margin-bottom: 0.8rem;
}

.card-form {
  display: grid;
  gap: 1rem;
  max-width: 640px;
}
label { display: grid; gap: 0.4rem; font-weight: 700; }
input, textarea {
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  font: inherit;
  font-family: inherit;
}
.form-message { min-height: 1.2rem; font-weight: 700; color: var(--accent); }
@media (max-width: 800px) {
  .hero-content, .cards, .gallery { grid-template-columns: 1fr; }
}

/* 2026 visual refresh */
:root {
  --bg: #f5f1e8;
  --panel: rgba(255, 255, 255, 0.92);
  --text: #17211d;
  --muted: #59665f;
  --accent: #e53935;
  --accent-dark: #b71c1c;
  --border: #ded8ca;
  --green: #244f40;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111916;
  --panel: rgba(28, 39, 34, .94);
  --text: #f3f5f1;
  --muted: #aebbb4;
  --accent: #ff5a55;
  --accent-dark: #ff8a86;
  --border: #3b4a43;
  --green: #8ed6b7;
}

html { scroll-behavior: smooth; }

.theme-toggle {
  padding: .4rem .68rem;
  color: var(--text) !important;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  font: 750 .75rem/1 inherit;
  white-space: nowrap;
  cursor: pointer;
}

.theme-toggle:hover { border-color: var(--accent); }

.feature-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto auto;
  gap: .55rem;
  width: min(36rem, 62vw);
}

.feature-search-input {
  width: 100%;
  padding: .7rem 2.4rem .7rem .9rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  font: 650 .88rem/1.2 inherit;
  box-shadow: 0 4px 18px rgba(23,33,29,.06);
}

.feature-search-input:focus { border-color: var(--accent); outline: 3px solid rgba(229,57,53,.12); }

.feature-search-results {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: auto;
  z-index: 1000;
  display: none;
  width: calc(100% - 9.05rem);
  min-width: 18rem;
  max-height: min(52vh, 21rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: .4rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 18px 45px rgba(23,33,29,.18);
  pointer-events: auto;
  isolation: isolate;
}

.language-menu-button,
.language-menu-select {
  padding: .7rem .9rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  font: 750 .86rem/1.2 inherit;
  cursor: pointer;
}

.language-menu-button:hover,
.language-menu-button:focus,
.language-menu-select:hover,
.language-menu-select:focus { border-color: var(--accent); outline: none; }

.language-menu-select {
  width: 8.5rem;
  appearance: auto;
}

.language-menu-list {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 55;
  display: none;
  grid-template-columns: 1fr;
  width: min(17rem, 88vw);
  max-height: min(48vh, 20rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  align-content: start;
  padding: .45rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 18px 45px rgba(23,33,29,.18);
}

.language-menu-list.is-open { display: grid; }

[data-theme="dark"] .language-menu-list { background: #1c2722; }

.language-menu-option {
  padding: .65rem .7rem;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.language-menu-option:hover,
.language-menu-option:focus { background: rgba(229,57,53,.1); outline: none; }

.feature-search-results.is-open { display: grid; }

.feature-search-empty {
  margin: 0;
  padding: .8rem;
  color: var(--muted);
  font-size: .86rem;
}

.feature-result {
  display: grid;
  gap: .12rem;
  padding: .7rem .75rem;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.feature-result:hover, .feature-result:focus { background: rgba(229,57,53,.1); outline: none; }
.feature-result small { color: var(--muted); }

@media (max-width: 700px) {
  .feature-search { width: min(100%, 25rem); }
  .nav { align-items: center; }
}

[data-theme="dark"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,90,85,.1) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 16%, rgba(142,214,183,.08) 0 6px, transparent 7px),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent);
}

[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 78% 32%, rgba(255,90,85,.11), transparent 25rem),
    linear-gradient(135deg, rgba(20,29,25,.98), rgba(31,42,36,.95));
  border-color: rgba(142,214,183,.15);
}

[data-theme="dark"] .section.alt,
[data-theme="dark"] .game-header,
[data-theme="dark"] .colour-game { background: rgba(22,32,27,.94); }

[data-theme="dark"] .cards article,
[data-theme="dark"] .card-form,
[data-theme="dark"] .gallery figure,
[data-theme="dark"] .game-card,
[data-theme="dark"] .game-choice { background: var(--panel); }

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] .quick-object,
[data-theme="dark"] .memory-card.is-open,
[data-theme="dark"] .memory-card.is-matched { color: var(--text); background: #26352e; }

[data-theme="dark"] .hero-content > img { background: rgba(255,255,255,.06); }
[data-theme="dark"] .game-board { background: radial-gradient(circle at 20% 25%, rgba(255,90,85,.12), transparent 16rem), #18251f; }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
}

.hero {
  min-height: 66vh;
  padding: 1.1rem 1.5rem 4.5rem;
  background:
    radial-gradient(circle at 78% 32%, rgba(224, 82, 62, 0.15), transparent 25rem),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,230,213,.92));
  border-bottom: 1px solid rgba(36, 79, 64, 0.12);
}

.nav {
  min-height: 4.25rem;
  border-bottom: 1px solid rgba(36, 79, 64, 0.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--green);
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.12em;
}

.brand::before {
  content: "H";
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  margin-right: .9rem;
  color: white;
  background: var(--accent);
  border-radius: .55rem;
  box-shadow: .2rem .2rem 0 var(--green);
}

.nav-links a {
  position: relative;
  color: var(--text);
  font-size: .92rem;
  font-weight: 650;
}

.nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.55rem;
  left: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.language-label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}

.lang-select {
  display: block;
  min-width: 7.5rem;
  padding: .4rem 1.8rem .4rem .65rem;
  font-size: .78rem;
  border-radius: 3px;
}

.smile-button {
  padding: .42rem .72rem;
  color: #17120a;
  background: #ffd43b;
  border: 1px solid #e3a13b;
  border-radius: 999px;
  box-shadow: 0 2px 0 #b97816;
  font: 800 .78rem/1 inherit;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.smile-button:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 4px 0 #b97816; }
.smile-button:active { transform: translateY(1px); box-shadow: 0 1px 0 #b97816; }

body.is-smiling { overflow: hidden; }

.smile-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: transparent;
  animation: smile-in .25s ease-out both;
}

.smile-screen.is-leaving { animation: smile-out .25s ease-in both; }

.smile-pipe {
  position: absolute;
  left: -2vh;
  top: 7vh;
  bottom: auto;
  z-index: 4;
  width: min(22vw, 230px);
  height: min(25vh, 220px);
  filter: drop-shadow(10px 10px 0 rgba(23, 61, 48, .28));
  transform: rotate(90deg);
  transform-origin: center;
  animation: pipe-side-arrive .35s cubic-bezier(.2,.9,.3,1.3) both;
  transition: opacity .3s ease, transform .3s ease;
}

.smile-screen.is-clearing .smile-pipe { opacity: 0; transform: translateX(-120%) rotate(90deg); }

.pipe-mouth {
  position: absolute;
  left: 50%;
  top: 0;
  width: 78%;
  height: 28%;
  background: linear-gradient(90deg, #167c2d 0 15%, #43d455 15% 35%, #24aa3e 35% 72%, #0b5e23 72% 100%);
  border: min(1.1vmin, 9px) solid #102d18;
  border-radius: 5px;
  transform: translateX(-50%);
  box-shadow: inset 0 min(1vmin, 8px) 0 rgba(129,255,132,.32), inset -10px 0 0 rgba(5,74,25,.38);
}

.pipe-mouth::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -18%;
  height: 22%;
  background: #102d18;
}

.pipe-stem {
  position: absolute;
  left: 50%;
  top: 14%;
  width: 54%;
  height: 66%;
  background: linear-gradient(90deg, #167c2d 0 18%, #43d455 18% 38%, #24aa3e 38% 72%, #0b5e23 72% 100%);
  border: min(1.1vmin, 9px) solid #102d18;
  transform: translateX(-50%);
  box-shadow: inset -10px 0 0 rgba(5,74,25,.34);
}

.pipe-base {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72%;
  height: 28%;
  background: linear-gradient(90deg, #167c2d 0 16%, #43d455 16% 36%, #24aa3e 36% 72%, #0b5e23 72% 100%);
  border: min(1.1vmin, 9px) solid #102d18;
  border-radius: 4px;
  transform: translateX(-50%);
  box-shadow: inset -10px 0 0 rgba(5,74,25,.34);
}

.smile-cloud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.flying-smile {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--face-size);
  height: var(--face-size);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: calc(var(--face-size) * .82);
  line-height: 1;
  opacity: 1;
  will-change: transform;
  transition: opacity .28s ease, filter .28s ease;
}

.flying-smile.is-gone { opacity: 0; filter: blur(8px); }

.liquid-drop {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--face-size) * .58);
  height: calc(var(--face-size) * .58);
  background: radial-gradient(circle at 30% 25%, #bff6ff 0 10%, #36bfea 28%, #087ead 72%, #04577d 100%);
  border: 3px solid rgba(3, 67, 98, .68);
  border-radius: 52% 48% 58% 42% / 45% 55% 45% 55%;
  box-shadow: inset 5px 5px 8px rgba(255,255,255,.28), 0 5px 8px rgba(4,87,125,.2);
  will-change: transform;
  transition: opacity .35s ease, filter .35s ease, scale .35s ease;
}

.liquid-drop.is-absorbed { opacity: 0; filter: blur(10px); scale: .15; }

.liquid-face {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(72vmin, 690px);
  aspect-ratio: 1;
  opacity: 0;
  background: radial-gradient(circle at 32% 24%, #bff6ff 0 6%, #43c6eb 25%, #0b8abc 68%, #075b82 100%);
  border: min(1.6vmin, 14px) solid #064c70;
  border-radius: 46% 54% 51% 49% / 50% 45% 55% 50%;
  box-shadow: inset -3vmin -3vmin 0 rgba(2,75,110,.25), inset 2vmin 2vmin 0 rgba(255,255,255,.18), 0 3vmin 5vmin rgba(4,87,125,.25);
  transform: translate(-50%, 35%) scale(.12);
  transition: opacity .65s ease, transform .8s cubic-bezier(.18,.9,.25,1.2), border-radius 1.2s ease;
}

.liquid-face.is-formed { opacity: 1; transform: translate(-50%, -50%) scale(1); border-radius: 50%; }
.liquid-eye { position: absolute; top: 28%; width: 11%; height: 17%; background: #063b55; border-radius: 50%; }
.liquid-eye-left { left: 27%; }
.liquid-eye-right { right: 27%; }
.liquid-mouth { position: absolute; left: 21%; bottom: 20%; width: 58%; height: 32%; border-bottom: min(3vmin, 28px) solid #063b55; border-radius: 0 0 50% 50%; }

.smile-face {
  position: relative;
  width: min(78vmin, 760px);
  aspect-ratio: 1;
  background: #ffdf55;
  border: min(2vmin, 18px) solid #17120a;
  border-radius: 50%;
  box-shadow: inset -3vmin -3vmin 0 rgba(227,161,59,.35), 0 3vmin 0 rgba(23,18,10,.16);
  animation: smile-bounce 1s ease-in-out infinite;
}

.smile-eye {
  position: absolute;
  top: 28%;
  width: 11%;
  height: 17%;
  background: #17120a;
  border-radius: 50%;
}

.smile-eye-left {
  left: 27%;
  transform-origin: center;
  animation: smile-wink 1s ease-in-out 1;
}
.smile-eye-right { right: 27%; }

.smile-mouth {
  position: absolute;
  left: 21%;
  bottom: 20%;
  width: 58%;
  height: 32%;
  border-bottom: min(3.2vmin, 30px) solid #17120a;
  border-radius: 0 0 50% 50%;
}

@keyframes smile-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes smile-out { to { opacity: 0; transform: scale(1.08); } }
@keyframes pipe-arrive { from { transform: translate(-50%, 120%) scale(.75); } to { transform: translateX(-50%) scale(1); } }
@keyframes pipe-side-arrive { from { transform: translateX(-120%) rotate(90deg) scale(.75); } to { transform: rotate(90deg) scale(1); } }
@keyframes smile-launch {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.15) rotate(0deg); }
  18% { opacity: 1; }
  65% { transform: translate(calc(-50% + var(--smile-x)), var(--smile-y)) scale(1.18) rotate(var(--smile-rotate)); }
  100% { opacity: 1; transform: translate(calc(-50% + var(--smile-x)), var(--smile-y)) scale(1) rotate(var(--smile-rotate)); }
}
@keyframes smile-bounce { 0%, 100% { transform: rotate(-2deg) scale(.98); } 50% { transform: rotate(2deg) scale(1.02); } }
@keyframes smile-wink {
  0%, 35%, 65%, 100% { transform: scaleY(1); border-radius: 50%; }
  46%, 54% { transform: scaleY(.12); border-radius: 999px; }
}

.pgdn-smile-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.smiley-landing-slot {
  position: absolute;
  left: var(--slot-left);
  top: var(--slot-top);
  display: grid;
  place-items: center;
  width: min(10vw, 14vh);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: reveal-slot .18s ease var(--slot-delay) forwards;
}

.smiley-landing-slot::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 4px solid rgba(70, 190, 235, .85);
  border-radius: 50%;
  box-shadow: inset 5px 5px 0 rgba(255,255,255,.65), 0 0 12px rgba(70,190,235,.4);
  opacity: 0;
  pointer-events: none;
}

.slot-smiley {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: clamp(2rem, 7vmin, 5rem);
  line-height: 1;
  opacity: 0;
  transform: translateY(-65vh) rotate(-35deg) scale(.25);
  animation: deploy-to-slot .58s cubic-bezier(.18,.82,.3,1.16) var(--slot-delay) forwards;
}

.pgdn-smile-screen.is-clearing .smiley-landing-slot {
  animation: none;
  opacity: 1;
}

.pgdn-smile-screen.is-clearing .slot-smiley {
  animation: bubble-face-pop .65s ease forwards;
}

.pgdn-smile-screen.is-clearing .smiley-landing-slot::after {
  animation: bubble-ring-pop .65s ease forwards;
}

@keyframes reveal-slot { to { opacity: 1; } }
@keyframes deploy-to-slot {
  0% { opacity: 0; transform: translateY(-65vh) rotate(-35deg) scale(.25); }
  18% { opacity: 1; }
  78% { transform: translateY(5%) rotate(5deg) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes bubble-face-pop {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  48% { opacity: 1; transform: scale(.16); filter: brightness(1.5); }
  58%, 100% { opacity: 0; transform: scale(0); filter: brightness(2); }
}

@keyframes bubble-ring-pop {
  0%, 42% { opacity: 0; transform: scale(.12); }
  55% { opacity: 1; transform: scale(.25); }
  100% { opacity: 0; transform: scale(1.55); border-width: 1px; }
}

.hero-content { margin-top: 4.25rem; }

.hero h1 {
  max-width: 720px;
  font-family: inherit;
  font-size: clamp(2.7rem, 5.6vw, 5rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.eyebrow {
  color: var(--accent-dark);
  font-size: .72rem;
  letter-spacing: .18em;
}

.lead {
  font-family: inherit;
  font-size: 1.08rem;
  line-height: 1.75;
}

.button {
  border-radius: .7rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button.primary { box-shadow: .28rem .28rem 0 var(--green); }
.button:hover { transform: translate(-2px, -2px); }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.15rem;
  margin: 2rem 0 0;
  padding: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
  list-style: none;
}

.hero-points li::before { content: "✓"; margin-right: .4rem; color: var(--accent); }

.hero-content > img {
  padding: 1.5rem;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(36, 79, 64, .12);
  border-radius: 2rem;
  box-shadow: 1rem 1rem 0 rgba(36, 79, 64, .09);
  transform: rotate(2deg);
}

.section { padding-top: 5rem; padding-bottom: 5rem; }
.section > h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.04em; }

.cards article, .card-form, .gallery figure {
  border-radius: 1rem;
  box-shadow: 0 18px 45px rgba(23, 33, 29, .07);
}

.cards article { border-top: 4px solid var(--accent); }
.cards article:nth-child(2) { border-top-color: #e3a13b; }
.cards article:nth-child(3) { border-top-color: var(--green); }
.cards h3 { margin-top: .25rem; }

.gallery-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #0b4da2;
}

.gallery .gallery-image img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(2.05);
  transform-origin: 50% 31%;
}

.gallery figure:nth-child(2) .gallery-image img { transform: scale(3.1); }
.gallery figure:nth-child(3) .gallery-image img { transform: scale(3.25); }
.gallery figure:nth-child(4) .gallery-image img { transform: scale(4); }

.gallery figcaption { display: grid; gap: .2rem; }
.gallery figcaption strong { color: var(--text); font-size: 1rem; }

input, textarea {
  font-family: inherit;
  background: #fffefb;
  transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 82, 62, .14);
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media (max-width: 800px) {
  .hero { padding-inline: 1rem; }
  .nav { align-items: flex-start; gap: 1rem; }
  .nav-links { justify-content: flex-end; flex-wrap: wrap; gap: .65rem .8rem; }
  .nav-links a { font-size: .8rem; }
  .hero-content { margin-top: 2.75rem; }
  .hero h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
  .hero-content > img { max-width: 80%; margin: 1rem auto 0; }
}

/* Background blobs gently morph into playful toy shapes. */
.pattern-orb {
  display: grid;
  place-items: center;
  clip-path: none;
  border-radius: 42% 58% 56% 44% / 54% 46% 54% 46%;
  animation-name: toy-morph;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  --drag-x: 0px;
  --drag-y: 0px;
}

.pattern-orb.is-dragging,
.pattern-orb.is-dragging::after {
  cursor: grabbing;
  animation-play-state: running;
}

.pattern-orb::before { display: none; }

.pattern-orb::after {
  content: var(--toy, "★");
  position: static;
  width: auto;
  height: auto;
  color: white;
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 4px 4px rgba(31, 41, 51, .2));
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1;
  opacity: 0;
  transform: scale(.25) rotate(-18deg);
  animation: toy-appear 12s ease-in-out infinite;
  animation-delay: inherit;
}

.orb-1 { --toy: "🧸"; }
.orb-2 { --toy: "🚗"; }
.orb-3 { --toy: "🧩"; }
.orb-4 { --toy: "🪀"; }
.orb-5 { --toy: "🚀"; }
.orb-6 { --toy: "🤖"; }
.orb-7 { --toy: "⭐"; }
.orb-8 { --toy: "🦖"; }
.orb-9 { --toy: "🚂"; }
.orb-10 { --toy: "🎈"; }

@keyframes toy-morph {
  0%, 100% {
    transform: translate3d(var(--drag-x), var(--drag-y), 0) rotate(var(--pattern-rotation)) scale(.5);
    border-radius: 42% 58% 56% 44% / 54% 46% 54% 46%;
  }
  28% {
    transform: translate3d(calc(var(--drag-x) + 30px), calc(var(--drag-y) - 18px), 0) rotate(calc(var(--pattern-rotation) + 10deg)) scale(.85);
    border-radius: 58% 42% 38% 62% / 44% 58% 42% 56%;
  }
  48%, 64% {
    transform: translate3d(calc(var(--drag-x) + 72px), calc(var(--drag-y) + 10px), 0) rotate(var(--pattern-rotation)) scale(1);
    border-radius: 32%;
  }
  82% {
    transform: translate3d(calc(var(--drag-x) + 108px), calc(var(--drag-y) - 12px), 0) rotate(calc(var(--pattern-rotation) - 8deg)) scale(.78);
    border-radius: 48% 52% 60% 40% / 58% 42% 54% 46%;
  }
}

@keyframes toy-appear {
  0%, 16%, 90%, 100% { opacity: 0; transform: scale(.25) rotate(-18deg); }
  30%, 76% { opacity: .95; transform: scale(1) rotate(0deg); }
}

.game-header {
  position: relative;
  z-index: 1;
  padding: 1.1rem 1.5rem 0;
  background: rgba(255, 250, 242, .92);
}

.game-section { position: relative; z-index: 1; }
.game-section > h1 { margin: .25rem 0; font-size: clamp(2.8rem, 7vw, 5.5rem); letter-spacing: -.06em; }

.game-card {
  max-width: 820px;
  margin-top: 2rem;
  padding: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 18px 45px rgba(23, 33, 29, .08);
}

.game-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  max-width: 820px;
  margin-top: 2rem;
}

.game-choice {
  display: grid;
  gap: .25rem;
  padding: .9rem;
  text-align: left;
  color: var(--text);
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 8px 25px rgba(23,33,29,.05);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.game-choice:hover { transform: translateY(-3px); }
.game-choice.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224,82,62,.13); }
.game-choice span { font-size: 2rem; }
.game-choice strong { font-size: 1rem; }
.game-choice small { color: var(--muted); }
.game-panel[hidden] { display: none; }
.game-panel > h2 { margin: 0; font-size: 1.7rem; }
.game-panel > p { margin-top: .25rem; color: var(--muted); }

.memory-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  max-width: 560px;
  margin: 1rem auto;
}

.memory-card {
  aspect-ratio: 1;
  color: white;
  background: var(--green);
  border: 0;
  border-radius: .9rem;
  box-shadow: .2rem .2rem 0 var(--accent);
  font: 800 1.8rem/1 inherit;
  cursor: pointer;
}

.memory-card.is-open, .memory-card.is-matched { background: #fff7eb; }
.memory-card.is-matched { box-shadow: .2rem .2rem 0 #e3a13b; }
.mini-game-message { min-height: 1.5rem; text-align: center; color: var(--green); font-weight: 800; }

.colour-game { min-height: 300px; display: grid; place-content: center; gap: 1.5rem; text-align: center; background: #f6f3eb; border-radius: 1rem; }
.colour-target { font-size: 2rem; letter-spacing: .1em; }
.colour-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
.colour-option { width: 82px; height: 82px; border: 5px solid white; border-radius: 1rem; box-shadow: 0 5px 18px rgba(23,33,29,.15); cursor: pointer; }
.colour-option:hover { transform: scale(1.06); }
.quick-board { min-height: 360px; }
.quick-target { transition: left .08s linear, top .08s linear, transform .08s ease; }
.quick-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; gap: 1rem; padding: 2rem; }
.quick-object { min-width: 78px; min-height: 78px; padding: .7rem; background: white; border: 2px solid var(--border); border-radius: 1rem; box-shadow: .18rem .18rem 0 var(--green); font: 800 2rem/1 inherit; cursor: pointer; }
.quick-object:hover { transform: translateY(-2px); border-color: var(--accent); }
.quick-object:disabled { opacity: .4; box-shadow: none; }
.quick-object.is-wrong { background: #ffd8d8; border-color: #e53935; }
.quick-object.text-object { min-width: 135px; font-size: .9rem; }
.quick-prompt { flex-basis: 100%; text-align: center; color: var(--green); font-size: 1.35rem; }
.sequence-prompt { padding: 1rem; background: white; border-radius: .75rem; font-size: 2rem; transition: background .2s; }
.sequence-prompt.is-wrong { background: #ffd8d8; }
.count-pile { flex-basis: 100%; text-align: center; font-size: 2.4rem; line-height: 1.6; }
.quick-answers { display: flex; gap: 1rem; }
.timing-gauge { position: relative; flex-basis: 85%; height: 42px; background: linear-gradient(90deg, #e53935 0 40%, #348364 40% 60%, #e53935 60%); border: 5px solid white; border-radius: 999px; box-shadow: 0 4px 18px rgba(23,33,29,.15); }
.timing-gauge span { position: absolute; top: -12px; width: 8px; height: 58px; background: #1f2933; border-radius: 4px; transform: translateX(-50%); }
.timing-stop { padding: 1rem 1.5rem; color: white; background: var(--green); border: 0; border-radius: .75rem; font: 800 1rem/1 inherit; cursor: pointer; }

.game-stats { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; color: var(--muted); font-weight: 700; }
.game-stats strong { margin-left: .3rem; color: var(--text); font-size: 1.25rem; }

.game-board {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
    radial-gradient(circle at 20% 25%, rgba(224,82,62,.18), transparent 16rem),
    #e9f1ed;
  border: 2px dashed rgba(36, 79, 64, .28);
  border-radius: 1rem;
}

.game-toy {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: white;
  box-shadow: .25rem .25rem 0 var(--green);
  font-size: 2.7rem;
  cursor: pointer;
  transition: left .12s ease, top .12s ease, transform .1s ease;
}

.game-toy:active { transform: scale(.88); }
.game-toy[hidden] { display: none; }
.game-message { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; color: var(--green); font-size: 1.25rem; font-weight: 800; }
.game-message[hidden] { display: none; }
.game-start { display: block; margin: 1rem auto 0; font: inherit; }

@media (max-width: 600px) {
  .game-header { padding-inline: 1rem; }
  .game-board { min-height: 330px; }
  .game-picker { grid-template-columns: 1fr; }
  .game-choice { grid-template-columns: auto 1fr; align-items: center; }
  .game-choice span { grid-row: span 2; }
  .memory-board { grid-template-columns: repeat(4, 1fr); gap: .45rem; }
}

/* One consistent typography system across every page and control. */
html,
body,
button,
input,
textarea,
select {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nav,
.brand,
.hero h1,
.game-section h1,
.section h2,
.section h3,
.lead,
.eyebrow,
label,
.button,
.feature-search-input,
.language-menu-select,
.game-choice,
.game-card {
  font-family: inherit;
}

input,
textarea,
select,
button {
  font-style: normal;
  letter-spacing: normal;
}

input::placeholder,
textarea::placeholder {
  font-family: inherit;
  font-style: normal;
}

h1,
h2,
h3,
h4,
p,
a,
button,
label,
input,
textarea,
select {
  font-kerning: none;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

p,
label,
input,
textarea,
select,
button,
.feature-result,
.game-choice {
  line-height: 1.5;
  letter-spacing: .018em;
}

h1,
h2,
h3,
h4,
strong {
  letter-spacing: .012em;
}

/* Keep borders and box edges visibly clear of every letter. */
.feature-search-input,
.language-menu-select,
.card-form input,
.card-form textarea,
.card-form select {
  padding: .9rem 1.05rem;
}

.button {
  padding: 1rem 1.4rem;
}

.feature-result {
  padding: .9rem 1rem;
}

.game-choice {
  gap: .4rem;
  padding: 1.25rem 1.15rem;
}

.game-card,
.card-form,
.cards article,
.service-grid article {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.game-card > :first-child,
.cards article > :first-child,
.service-grid article > :first-child {
  margin-top: 0;
}

.game-card > :last-child,
.cards article > :last-child,
.service-grid article > :last-child {
  margin-bottom: 0;
}

/* Studio renovation: a more grounded, real-world small-business experience. */
:root {
  --bg: #f3f1eb;
  --panel: #fff;
  --text: #17201c;
  --muted: #617069;
  --accent: #d83a32;
  --accent-dark: #a92722;
  --border: #d9ddd8;
  --green: #173c31;
  --ink-soft: #34443d;
}

body {
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.hero { min-height: auto; background: linear-gradient(180deg, #fbfaf7 0%, rgba(243,241,235,.92) 100%); }
.nav {
  position: relative;
  z-index: 80;
  max-width: 82rem;
  min-height: 5.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(23,60,49,.12);
}
.brand { font-size: .96rem; letter-spacing: .16em; }
.brand::before { border-radius: 9px; box-shadow: 3px 3px 0 var(--green); }
.feature-search { width: min(40rem, 64vw); }
.feature-search-input, .language-menu-select {
  min-height: 2.9rem;
  background: rgba(255,255,255,.94);
  border-radius: 8px;
  box-shadow: none;
}

.hero-content {
  max-width: 82rem;
  min-height: 39rem;
  grid-template-columns: minmax(0, 1.12fr) minmax(20rem, .88fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  padding-block: clamp(5rem, 9vw, 8rem);
}
.hero-content > div { max-width: 47rem; }
.hero h1 {
  max-width: 12ch;
  margin: .55rem 0 1.4rem;
  color: var(--text);
  font-size: clamp(4rem, 8vw, 7.4rem);
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: .012em;
}
.eyebrow, .section-kicker {
  margin: 0 0 .8rem;
  color: var(--accent-dark);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lead { max-width: 42rem; color: var(--ink-soft); font-size: clamp(1.08rem, 1.6vw, 1.32rem); line-height: 1.7; }
.hero-content > img { width: 100%; max-width: 31rem; filter: drop-shadow(0 28px 35px rgba(23,32,28,.14)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { border-radius: 7px; padding: .9rem 1.2rem; font-size: .92rem; font-weight: 780; box-shadow: none; }
.button.primary { background: var(--accent); }
.button.secondary { color: var(--green); background: transparent; border: 1px solid rgba(23,60,49,.3); }
.hero-points { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: 2rem; padding: 0; color: var(--muted); font-size: .82rem; }
.hero-points li { list-style: none; }
.hero-points li::before { content: "✓"; margin-right: .45rem; color: var(--accent); font-weight: 900; }

main { position: relative; z-index: 2; }
.section { max-width: 82rem; padding-block: clamp(5rem, 9vw, 8rem); }
.section h2 { max-width: 16ch; margin: 0; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.1; letter-spacing: .012em; }
.section-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem 6rem; }
.section-intro > p { max-width: 42rem; margin: 2rem 0 0; color: var(--muted); font-size: 1.1rem; line-height: 1.75; }
.proof-strip { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3,1fr); max-width: 82rem; margin: 0 auto; padding: 1.4rem 2rem; color: #fff; background: var(--green); }
.proof-strip span { padding: .55rem 1.25rem; border-right: 1px solid rgba(255,255,255,.2); font-size: .9rem; }
.proof-strip span:last-child { border: 0; }
.proof-strip strong { margin-right: .75rem; color: #f39791; font-size: .72rem; letter-spacing: .12em; }
.service-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.5rem; }
.service-grid article { min-height: 19rem; padding: 2rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 38px rgba(23,32,28,.05); }
.service-number { display: block; margin-bottom: 3rem; color: var(--accent); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.service-grid h3 { margin-bottom: .8rem; font-size: 1.45rem; }
.service-grid p { min-height: 5.5rem; color: var(--muted); line-height: 1.65; }
.service-grid a, .text-link { color: var(--green); font-weight: 800; text-decoration: none; }
.process-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem 8rem; border-top: 1px solid var(--border); }
.process-copy p:not(.section-kicker) { max-width: 38rem; color: var(--muted); line-height: 1.75; }
.process-list { margin: 0; padding: 0; counter-reset: steps; }
.process-list li { display: grid; grid-template-columns: 2rem 1fr; gap: .2rem 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); list-style: none; counter-increment: steps; }
.process-list li::before { content: "0" counter(steps); grid-row: span 2; color: var(--accent); font-size: .75rem; font-weight: 850; }
.process-list strong { font-size: 1.14rem; }
.process-list span { color: var(--muted); line-height: 1.55; }
.quote-banner { display: flex; justify-content: space-between; align-items: end; gap: 3rem; margin-bottom: 5rem; padding: clamp(2rem,5vw,4rem); color: #fff; background: var(--green); border-radius: 14px; }
.quote-banner h2 { color: #fff; }
.quote-banner p:not(.section-kicker) { color: #c8d6d0; }

.pattern-layer { opacity: .72; }
.pattern-orb {
  width: clamp(52px, 6vw, 105px);
  height: clamp(52px, 6vw, 105px);
  filter: saturate(1.85) brightness(1.12);
  box-shadow: inset -10px -8px 18px rgba(255,255,255,.42), 0 10px 30px rgba(229,57,53,.24), 0 0 22px rgba(255,120,90,.18);
}
.pattern-orb::after { font-size: clamp(1.8rem, 3.5vw, 3.3rem); }
.supplemental-orb { width: clamp(38px, 4.5vw, 76px); height: clamp(38px, 4.5vw, 76px); }
.pattern-orb.is-over-content { opacity: 0; pointer-events: none; }

/* Clean moving dots replace the former morphing toy blobs. */
.pattern-orb,
.supplemental-orb {
  width: clamp(7px, 1vw, 14px);
  height: clamp(7px, 1vw, 14px);
  border-radius: 50%;
  clip-path: none;
  animation: plain-dot-float var(--dot-speed, 14s) linear infinite;
  background: var(--pattern-color-1);
  filter: saturate(1.55) brightness(1.12);
  box-shadow: inset -2px -2px 4px rgba(255,255,255,.55), 0 2px 9px rgba(25,65,52,.2);
  backdrop-filter: none;
}

.pattern-orb::before,
.pattern-orb::after { display: none; }

@keyframes plain-dot-float {
  0%, 100% { transform: translate3d(var(--drag-x), var(--drag-y), 0); }
  25% { transform: translate3d(calc(var(--drag-x) + 48px), calc(var(--drag-y) - 30px), 0); }
  50% { transform: translate3d(calc(var(--drag-x) + 86px), calc(var(--drag-y) + 8px), 0); }
  75% { transform: translate3d(calc(var(--drag-x) + 38px), calc(var(--drag-y) + 42px), 0); }
}

.toy-constellation {
  position: fixed;
  z-index: 0;
  width: 180px;
  height: 140px;
  pointer-events: none;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.toy-constellation.is-visible { opacity: 0; transform: scale(1); }
.pattern-orb.is-constellation {
  z-index: 1;
  width: 9px;
  height: 9px;
  opacity: .95;
  animation: none;
  pointer-events: none;
  transition: left 1.15s cubic-bezier(.2,.8,.2,1), top 1.15s cubic-bezier(.2,.8,.2,1), opacity .65s ease;
  box-shadow: 0 0 8px 2px rgba(255,198,78,.8);
}

/* Luxury finish: precise surfaces, restrained brass details and tactile depth. */
:root {
  --luxury-ivory: #f7f3e9;
  --luxury-paper: #fffdf8;
  --luxury-ink: #10241d;
  --luxury-green: #123e31;
  --luxury-gold: #b58a43;
  --luxury-gold-soft: rgba(181, 138, 67, .28);
  --luxury-shadow: 0 24px 60px rgba(18, 48, 38, .1);
}

html { background: var(--luxury-ivory); }
body { color: var(--luxury-ink); background-color: var(--luxury-ivory); }
::selection { color: #fff; background: var(--luxury-green); }

.hero,
.game-header {
  background: linear-gradient(150deg, rgba(255,253,248,.98), rgba(247,243,233,.92));
}

.nav {
  padding-inline: clamp(1rem, 3vw, 2rem);
  background: rgba(255,253,248,.84);
  border: 1px solid rgba(18,62,49,.12);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 12px 35px rgba(18,48,38,.06);
  backdrop-filter: blur(16px) saturate(1.25);
}

.brand { color: var(--luxury-green); font-weight: 850; }
.brand::before {
  background: linear-gradient(145deg, #e44840, #b92525);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 3px 3px 0 var(--luxury-green), 0 10px 24px rgba(185,37,37,.18);
}

.feature-search-input,
.language-menu-select {
  background: rgba(255,255,255,.9);
  border-color: rgba(18,62,49,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 7px 22px rgba(18,48,38,.045);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.feature-search-input:focus,
.language-menu-select:focus {
  border-color: var(--luxury-gold);
  box-shadow: 0 0 0 4px rgba(181,138,67,.14), 0 10px 28px rgba(18,48,38,.07);
}

.eyebrow,
.section-kicker {
  color: #9a6527;
  letter-spacing: .22em;
}

.eyebrow::after,
.section-kicker::after {
  content: "";
  display: inline-block;
  width: 2.8rem;
  height: 1px;
  margin: 0 0 .22rem .85rem;
  background: linear-gradient(90deg, var(--luxury-gold), transparent);
}

.hero h1,
.game-section > h1,
.section h2 {
  color: var(--luxury-ink);
  text-wrap: balance;
}

.lead { color: #42584f; }

.button {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.button.primary {
  background: linear-gradient(145deg, #e43e37, #c22626);
  border: 1px solid rgba(121,24,22,.25);
  box-shadow: 4px 5px 0 var(--luxury-green), 0 14px 28px rgba(194,38,38,.16);
}
.button.secondary { background: rgba(255,253,248,.72); border-color: var(--luxury-gold-soft); }
.button:hover { transform: translateY(-2px); }
.button.primary:hover { box-shadow: 4px 7px 0 var(--luxury-green), 0 18px 34px rgba(194,38,38,.2); }
.button:active { transform: translateY(1px); }

.proof-strip {
  background: linear-gradient(135deg, #123e31, #0d2d24);
  border-top: 1px solid rgba(181,138,67,.55);
  border-bottom: 1px solid rgba(181,138,67,.55);
  box-shadow: var(--luxury-shadow);
}
.proof-strip strong { color: #e8c786; }

.service-grid article,
.cards article,
.game-choice,
.game-panel,
.card-form,
.gallery figure {
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(255,253,248,.94));
  border: 1px solid rgba(18,62,49,.13);
  box-shadow: 0 16px 42px rgba(18,48,38,.065), inset 0 1px 0 rgba(255,255,255,.9);
}

.service-grid article,
.cards article,
.game-choice,
.gallery figure {
  transition: transform .25s cubic-bezier(.2,.75,.25,1), box-shadow .25s ease, border-color .25s ease;
}
.service-grid article:hover,
.cards article:hover,
.game-choice:hover,
.gallery figure:hover {
  transform: translateY(-5px);
  border-color: var(--luxury-gold-soft);
  box-shadow: 0 24px 54px rgba(18,48,38,.11);
}

.service-number { color: var(--luxury-gold); }
.service-grid a, .text-link { text-decoration-color: var(--luxury-gold); text-underline-offset: .24em; }
.process-list li { border-color: rgba(18,62,49,.14); }
.process-list li::before { color: var(--luxury-gold); }

.quote-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #123e31, #0a2b22);
  border: 1px solid rgba(181,138,67,.55);
  box-shadow: var(--luxury-shadow);
}
.quote-banner::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 18rem;
  height: 18rem;
  border: 1px solid rgba(232,199,134,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 2rem rgba(232,199,134,.04), 0 0 0 4rem rgba(232,199,134,.025);
}
.quote-banner > * { position: relative; z-index: 1; }

.card-form input,
.card-form textarea,
.card-form select {
  background: #fffefa;
  border-color: rgba(18,62,49,.18);
  box-shadow: inset 0 1px 2px rgba(18,48,38,.035);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card-form input:focus,
.card-form textarea:focus,
.card-form select:focus {
  border-color: var(--luxury-gold);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(181,138,67,.13);
}
.photo-upload { background: linear-gradient(145deg, #faf7ef, #fffdf8); border-color: rgba(181,138,67,.55); }

.gallery-image { overflow: hidden; }
.gallery-image img { transition: transform .6s cubic-bezier(.2,.75,.25,1), filter .4s ease; }
.gallery figure:hover .gallery-image img { transform: scale(1.13); filter: saturate(1.06) contrast(1.03); }

.game-choice.is-selected {
  border-color: var(--luxury-gold);
  box-shadow: inset 0 0 0 1px var(--luxury-gold), 0 18px 42px rgba(18,48,38,.09);
}

:focus-visible { outline: 3px solid rgba(181,138,67,.65); outline-offset: 3px; }

* { scrollbar-color: var(--luxury-gold) rgba(18,62,49,.08); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(18,62,49,.07); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--luxury-gold), #8e682f); border: 2px solid var(--luxury-ivory); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .button,
  .service-grid article,
  .cards article,
  .game-choice,
  .gallery figure,
  .gallery-image img { transition: none; }
}

.cards article, .card-form, .game-shell, .game-choice, .gallery figure { border-radius: 12px; box-shadow: 0 12px 30px rgba(23,32,28,.055); }
.gallery { gap: 1.1rem; }
.gallery-image { aspect-ratio: 4 / 3; border-radius: 10px; background: #e8e6df; }
.gallery-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.gallery figure { position: relative; overflow: hidden; padding: .7rem; background: #fff; border: 1px solid var(--border); }
.gallery figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem .3rem .2rem; }
.gallery figcaption span { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.gallery figcaption strong { font-size: .9rem; }
.material-list { display: grid; }
.material-list article { display: grid; grid-template-columns: 5rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.material-list article > span { color: var(--accent); font-size: .72rem; font-weight: 850; letter-spacing: .1em; }
.material-list h3 { margin: 0 0 .35rem; }
.material-list p { margin: 0; color: var(--muted); line-height: 1.6; }
.contact-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem 8rem; align-items: start; }
.contact-intro { position: sticky; top: 2rem; }
.contact-intro > p:not(.section-kicker) { color: var(--muted); line-height: 1.75; }
.contact-intro ul { padding: 1rem 0 0; }
.contact-intro li { margin: .7rem 0; list-style: none; color: var(--ink-soft); }
.contact-intro li::before { content: "✓"; margin-right: .6rem; color: var(--accent); font-weight: 900; }
.card-form { padding: clamp(1.5rem, 4vw, 3rem); background: #fff; border: 1px solid var(--border); }
.card-form input, .card-form textarea, .card-form select { width: 100%; color: var(--text); background: #faf9f6; border: 1px solid var(--border); border-radius: 7px; font: inherit; }
.card-form label { color: var(--ink-soft); font-size: .86rem; }
.photo-upload { padding: 1.1rem; background: #f4f2ec; border: 1px dashed #aeb8b2; border-radius: 8px; }
.photo-upload > span { display: flex; justify-content: space-between; gap: 1rem; }
.photo-upload > span small, .field-help { color: var(--muted); font-size: .74rem; font-weight: 600; }
.photo-upload input[type="file"] { padding: .75rem; background: #fff; cursor: pointer; }
.photo-upload input[type="file"]::file-selector-button { margin-right: .8rem; padding: .6rem .8rem; color: #fff; background: var(--green); border: 0; border-radius: 5px; font: inherit; font-weight: 750; cursor: pointer; }
.game-header { background: #fbfaf7; border-bottom: 1px solid var(--border); }
.game-header { position: relative; z-index: 120; }
.game-header + main { position: relative; z-index: 2; }
.game-section { max-width: 82rem; padding-top: clamp(4rem,7vw,7rem); }
.game-section > h1 { max-width: none; margin: .4rem 0 1rem; font-size: clamp(3.4rem,8vw,6.6rem); line-height: 1.05; letter-spacing: .012em; }
.game-section > .lead { margin-bottom: 2.5rem; }
.game-picker { gap: .75rem; }
.game-choice { min-height: 8.5rem; padding: 1rem; border: 1px solid var(--border); background: #fff; box-shadow: none; }
.game-choice.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.game-panel { margin-top: 2rem; border: 1px solid var(--border); background: #fff; }
@media (max-width: 850px) {
  .hero-content, .section-intro, .process-section, .contact-layout { grid-template-columns: 1fr; }
  .hero-content { min-height: auto; gap: 2rem; }
  .hero-content > img { max-width: 22rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article { min-height: auto; }
  .service-grid p { min-height: 0; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .quote-banner { align-items: flex-start; flex-direction: column; }
  .contact-intro { position: static; }
}

@media (max-width: 600px) {
  .nav { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .brand { width: fit-content; }
  .hero-content { width: auto; max-width: none; margin-inline: 0; }
  .hero-content > * { min-width: 0; width: 100%; max-width: 100%; }
  .hero h1 { max-width: 100%; font-size: clamp(2.7rem, 11.5vw, 3.75rem); letter-spacing: .004em; overflow-wrap: anywhere; }
  .lead { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); padding-right: 0; font-size: .96rem; letter-spacing: .004em; overflow-wrap: anywhere; word-break: break-word; }
  .hero-content { padding-top: 4rem; }
  .feature-search { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100%; }
  .feature-search-input { min-width: 0; }
  .feature-search-results { width: 100%; min-width: 0; max-height: min(46vh, 18rem); }
  .language-menu-select { width: 100%; }
}

/* Bespoke studio finish: quiet depth, precision and tactile interaction. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 8%, rgba(181,138,67,.1), transparent 25rem),
    radial-gradient(circle at 88% 42%, rgba(18,62,49,.08), transparent 32rem),
    linear-gradient(115deg, rgba(255,255,255,.42), transparent 35%, rgba(255,255,255,.2));
}

.nav {
  border-color: rgba(181,138,67,.24);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 50px rgba(18,48,38,.075);
}

.brand { text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.eyebrow, .section-kicker { color: #8c642d; }

.hero h1,
.game-section > h1,
.section h2 {
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 12px 38px rgba(18,48,38,.07);
}

.button {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(181,138,67,.28);
  box-shadow: 0 12px 28px rgba(18,48,38,.11), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.button::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% -45%;
  z-index: -1;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}

.button:hover::after { left: 115%; }
.button:hover { transform: translateY(-2px); box-shadow: 0 17px 34px rgba(18,48,38,.16), inset 0 1px 0 rgba(255,255,255,.32); }
.button:active { transform: translateY(0); box-shadow: 0 8px 18px rgba(18,48,38,.13); }

.service-grid article,
.cards article,
.gallery figure,
.game-choice,
.game-panel,
.card-form {
  border-color: rgba(181,138,67,.2);
  background-image: linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,247,239,.9));
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 18px 45px rgba(18,48,38,.075);
}

.service-grid article:hover,
.cards article:hover,
.gallery figure:hover,
.game-choice:hover {
  border-color: rgba(181,138,67,.52);
  transform: translateY(-5px);
  box-shadow: 0 1px 0 #fff inset, 0 25px 55px rgba(18,48,38,.13);
}

.gallery-image { overflow: hidden; }
.gallery-image img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.gallery figure:hover img { transform: scale(1.13); filter: saturate(1.12) contrast(1.04); }

/* Each workshop photo needs its own crop because the objects vary greatly in size. */
.gallery figure { padding: .55rem; }
.gallery figure:nth-child(n) img { transform: scale(1) !important; transform-origin: center; }
.gallery figure:nth-child(n):is(:hover, :active) img { transform: scale(.94) !important; }

.feature-search-input,
.language-menu-select,
.card-form input,
.card-form textarea,
.card-form select {
  border-color: rgba(18,62,49,.18);
  box-shadow: inset 0 1px 2px rgba(18,48,38,.035), 0 8px 24px rgba(18,48,38,.045);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.card-form input:focus,
.card-form textarea:focus,
.card-form select:focus {
  outline: none;
  border-color: var(--luxury-gold);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(181,138,67,.13), 0 12px 30px rgba(18,48,38,.07);
}

.proof-strip,
.quote-banner {
  border: 1px solid rgba(181,138,67,.36);
  background-image: radial-gradient(circle at 82% 0, rgba(181,138,67,.19), transparent 24rem), linear-gradient(135deg, #123e31, #0d2d24);
  box-shadow: 0 28px 65px rgba(18,48,38,.18), inset 0 1px 0 rgba(255,255,255,.12);
}

@media (prefers-reduced-motion: reduce) {
  .button::after { display: none; }
}

.info-grid article { min-height: 18rem; }
.eco-section { display: grid; grid-template-columns: minmax(8rem, .32fr) minmax(0, 1.68fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.eco-badge { display: grid; place-items: center; aspect-ratio: 1; color: #fff; background: radial-gradient(circle at 35% 25%, #3c8169, var(--luxury-green)); border: 1px solid rgba(181,138,67,.48); border-radius: 50%; font-size: clamp(3.5rem, 8vw, 7rem); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 24px 55px rgba(18,48,38,.18); }
.eco-list { display: grid; gap: .85rem; margin: 2rem 0; padding: 0; }
.eco-list li { position: relative; padding-left: 1.8rem; list-style: none; color: var(--ink-soft); }
.eco-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 900; }
.eco-note { padding: 1.2rem 1.35rem; color: var(--muted); background: rgba(18,62,49,.055); border-left: 3px solid var(--luxury-gold); border-radius: 0 8px 8px 0; }
@media (max-width: 700px) { .eco-section { grid-template-columns: 1fr; } .eco-badge { width: 7rem; } }
.info-story { max-width: 68rem; }
.info-story > h2 { max-width: 16ch; margin-bottom: 2.5rem; }
.info-paragraphs { display: grid; gap: 0; margin-bottom: 2.5rem; padding: clamp(1.4rem, 4vw, 3rem); counter-reset: info; background-color: #eee2c7; background-image: repeating-linear-gradient(0deg, rgba(76,57,33,.025) 0 1px, transparent 1px 4px), radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 20rem), linear-gradient(115deg, rgba(135,103,59,.09), transparent 30%, rgba(255,255,255,.2)); border: 1px solid #b9a27b; border-radius: 3px; box-shadow: 0 24px 60px rgba(59,43,25,.18), inset 0 0 35px rgba(104,74,37,.08); }
.info-paragraphs::before { content: "HENRY'S PRINTS  •  WORKSHOP EDITION"; display: block; padding: 0 0 1rem; color: #30271d; border-bottom: 4px double rgba(48,39,29,.72); font: 850 clamp(.82rem, 2vw, 1rem)/1.2 Georgia, "Times New Roman", serif; letter-spacing: .16em; text-align: center; }
.info-paragraphs p { position: relative; margin: 0; padding: 1.6rem 1rem 1.6rem 4.5rem; color: #332c23; border-top: 1px solid rgba(64,49,31,.24); font: 1.02rem/1.78 Georgia, "Times New Roman", serif; letter-spacing: .012em; text-align: justify; counter-increment: info; }
.info-paragraphs p::before { content: "0" counter(info); position: absolute; left: .5rem; top: 1.6rem; color: var(--luxury-gold); font-size: .75rem; font-weight: 850; letter-spacing: .12em; }
.info-paragraphs strong { color: #191510; font-weight: 800; }
@media (max-width: 600px) { .info-paragraphs p { padding-left: 3.2rem; font-size: .96rem; } }

/* Site-wide workshop identity. */
:root {
  --workshop-steel: #68736e;
  --workshop-dark: #16251f;
  --workshop-bench: #b97a46;
  --workshop-tape: #e8b949;
  --workshop-paper: #f2ead9;
}

body {
  background-color: #ece8df;
  background-image:
    radial-gradient(circle, rgba(23,60,49,.12) 0 1.6px, transparent 1.8px),
    linear-gradient(90deg, rgba(255,255,255,.42), transparent 45%, rgba(70,54,35,.035));
  background-size: 24px 24px, auto;
}

.hero,
.game-header {
  border-bottom: 5px solid var(--workshop-bench);
  background:
    linear-gradient(rgba(250,247,239,.94), rgba(244,239,227,.96)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(23,60,49,.07) 39px 40px);
  box-shadow: 0 5px 0 rgba(22,37,31,.14);
}

.nav {
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(224,228,225,.9)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 2px, transparent 2px 5px);
  border-color: rgba(61,76,70,.36);
  border-bottom-width: 3px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(26,45,37,.1), 0 12px 30px rgba(22,37,31,.1);
}

.brand::before {
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 3px 3px 0 var(--workshop-dark), 0 8px 18px rgba(22,37,31,.15);
}

.eyebrow,
.section-kicker {
  width: fit-content;
  padding: .35rem .55rem;
  color: #2d2618;
  background: linear-gradient(100deg, #f2c85a, var(--workshop-tape));
  border: 1px solid rgba(82,60,20,.25);
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(67,52,25,.14);
  transform: rotate(-.35deg);
  letter-spacing: .14em;
}

.section-kicker::after { display: none; }
.hero h1, .section h2, .game-section > h1 { color: var(--workshop-dark); }

.service-grid article,
.cards article,
.gallery figure,
.game-choice,
.game-panel,
.card-form {
  background-color: rgba(250,248,241,.97);
  background-image:
    radial-gradient(circle at 12px 12px, rgba(77,89,84,.38) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, rgba(77,89,84,.38) 0 2px, transparent 2.5px),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(237,234,224,.94));
  border-color: rgba(77,89,84,.34);
  border-bottom: 4px solid rgba(126,85,48,.48);
  border-radius: 6px;
}

.button {
  border-radius: 4px;
  border-color: rgba(25,42,35,.5);
  text-transform: uppercase;
  letter-spacing: .055em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 3px 4px 0 rgba(22,37,31,.24), 0 12px 22px rgba(22,37,31,.12);
}

.button:hover { transform: translate(-1px, -2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 5px 6px 0 rgba(22,37,31,.22), 0 16px 26px rgba(22,37,31,.14); }
.button:active { transform: translate(2px, 3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 1px 1px 0 rgba(22,37,31,.28); }

.feature-search-input,
.language-menu-select,
.card-form input,
.card-form textarea,
.card-form select {
  background-color: #fbfaf5;
  border: 2px solid rgba(67,82,75,.4);
  border-radius: 4px;
}

.proof-strip,
.quote-banner {
  border: 2px solid #263b32;
  border-bottom: 7px solid var(--workshop-bench);
  border-radius: 6px;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, #173f32, #102b23);
}

.gallery-image { border: 2px solid rgba(55,68,62,.42); border-radius: 3px; }
.process-list li { border-bottom: 1px dashed rgba(45,65,56,.3); }
.material-list article > span { color: #9c592e; font-family: ui-monospace, "Cascadia Mono", monospace; }

@media (max-width: 600px) {
  body { background-size: 18px 18px, auto; }
  .eyebrow, .section-kicker { letter-spacing: .1em; }
}

/* Wooden workshop backdrop and moving hand tools. */
body {
  animation: none;
  background-color: #b97d4e;
  background-image:
    repeating-linear-gradient(2deg, transparent 0 22px, rgba(73,40,19,.11) 23px, rgba(255,224,181,.11) 25px, transparent 27px 48px),
    repeating-linear-gradient(91deg, rgba(73,41,20,.06) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 18% 22%, rgba(255,225,181,.25), transparent 30%),
    linear-gradient(105deg, #c99463, #a9663d 48%, #c58a58);
  background-size: auto, auto, auto, auto;
  background-attachment: fixed;
}

.pattern-layer { opacity: .9; }
.pattern-orb,
.supplemental-orb {
  display: grid;
  place-items: center;
  width: clamp(18px, 2vw, 28px);
  height: clamp(18px, 2vw, 28px);
  overflow: visible;
  color: var(--workshop-dark);
  background: transparent;
  border: 0;
  filter: drop-shadow(0 2px 1px rgba(47,25,12,.3));
  box-shadow: none;
}

.pattern-orb::after {
  content: var(--tool, "🔧");
  position: static;
  display: block;
  color: inherit;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: clamp(1rem, 1.75vw, 1.55rem);
  line-height: 1;
  opacity: 1;
  transform: none;
  animation: none;
  background: transparent;
}

.orb-1 { --tool: "🔨"; }
.orb-2 { --tool: "🔧"; }
.orb-3 { --tool: "🪛"; }
.orb-4 { --tool: "🪚"; }
.orb-5 { --tool: "⚙️"; }
.orb-6 { --tool: "📐"; }
.orb-7 { --tool: "🔩"; }
.orb-8 { --tool: "🧰"; }
.orb-9 { --tool: "🗜️"; }
.orb-10 { --tool: "🖌️"; }

.pattern-orb.is-constellation { width: 15px; height: 15px; background: transparent; box-shadow: none; }
.pattern-orb.is-constellation::after { font-size: 14px; filter: drop-shadow(0 0 4px rgba(255,211,104,.75)); }

@media (max-width: 600px) {
  body { background-size: auto, auto, auto, auto; }
  .pattern-orb::after { font-size: 1rem; }
}

/* Smooth maple replaces open white surfaces; contained boxes stay white. */
html,
body {
  background-color: #d9b784;
  background-image:
    repeating-linear-gradient(1deg, transparent 0 34px, rgba(105,69,33,.055) 35px, transparent 37px 72px),
    repeating-linear-gradient(89deg, rgba(255,246,224,.07) 0 2px, transparent 2px 16px),
    radial-gradient(ellipse at 20% 10%, rgba(255,241,210,.36), transparent 35%),
    linear-gradient(110deg, #e3c493 0%, #d2aa73 48%, #e5c895 100%);
  background-attachment: fixed;
}

.hero,
.game-header,
.section.alt {
  background-color: rgba(222,185,132,.94);
  background-image:
    repeating-linear-gradient(1deg, transparent 0 38px, rgba(104,68,32,.05) 39px, transparent 41px 78px),
    linear-gradient(112deg, rgba(238,210,164,.96), rgba(211,169,112,.94) 52%, rgba(232,199,148,.96));
}

.section.alt {
  border: 1px solid rgba(102,68,34,.2);
  box-shadow: inset 0 1px 0 rgba(255,242,216,.42), 0 18px 42px rgba(67,40,18,.1);
}

main,
.section { background-color: transparent; }

[data-theme="dark"] body,
[data-theme="dark"] .hero,
[data-theme="dark"] .game-header,
[data-theme="dark"] .section.alt {
  background-color: #765037;
  background-image:
    repeating-linear-gradient(1deg, transparent 0 38px, rgba(30,17,9,.15) 39px, transparent 41px 78px),
    linear-gradient(112deg, #805a3e, #65432f 52%, #795137);
}

/* Photographic maple material with consistent workshop lighting. */
html,
body {
  background-color: #dcb276;
  background-image:
    linear-gradient(112deg, rgba(255,248,229,.16), transparent 38%, rgba(79,43,18,.08)),
    url('/media/maple-workbench-web.jpg?v=20260907');
  background-repeat: repeat;
  background-size: auto, 1180px auto;
  background-position: 0 0, center top;
  background-attachment: fixed;
}

.hero,
.game-header,
.section.alt {
  position: relative;
  background-color: rgba(222,181,122,.62);
  background-image:
    linear-gradient(180deg, rgba(255,250,235,.2), rgba(96,53,22,.08)),
    url('/media/maple-workbench-web.jpg?v=20260907');
  background-repeat: repeat;
  background-size: auto, 1180px auto;
  background-position: 0 0, center top;
  box-shadow: inset 0 1px 0 rgba(255,249,231,.7), inset 0 -10px 18px rgba(93,51,23,.08), 0 7px 14px rgba(65,36,17,.16);
}

.service-grid article,
.cards article,
.gallery figure,
.game-choice,
.game-panel,
.card-form,
.nav,
.feature-search-results {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 2px 3px rgba(61,35,17,.1), 0 18px 38px rgba(61,35,17,.16);
}

[data-theme="dark"] body,
[data-theme="dark"] .hero,
[data-theme="dark"] .game-header,
[data-theme="dark"] .section.alt {
  background-image:
    linear-gradient(rgba(35,22,14,.5), rgba(35,22,14,.5)),
    url('/media/maple-workbench-web.jpg?v=20260907');
}

@media (max-width: 700px) {
  html, body, .hero, .game-header, .section.alt { background-size: auto, 820px auto; }
}

/* Photographic moving tools replace emoji symbols. */
.pattern-orb,
.supplemental-orb {
  width: clamp(76px, 8vw, 132px);
  height: clamp(50px, 5.4vw, 88px);
  background-color: transparent;
  background-image: var(--tool-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 3px 2px rgba(47,25,12,.38));
}

.pattern-orb::after { display: none; }
.orb-1, .orb-5, .orb-9 { --tool-image: url('/media/tools/hammer-real.png?v=20260907'); }
.orb-2, .orb-6, .orb-10 { --tool-image: url('/media/tools/spanner-real.png?v=20260907'); }
.orb-3, .orb-7 { --tool-image: url('/media/tools/screwdriver-real.png?v=20260907'); }
.orb-4, .orb-8 { --tool-image: url('/media/tools/saw-real.png?v=20260907'); }

.pattern-orb.is-constellation {
  width: 42px;
  height: 28px;
  background-image: var(--tool-image);
  filter: drop-shadow(0 0 4px rgba(255,211,104,.78)) drop-shadow(0 2px 1px rgba(47,25,12,.3));
}

@media (max-width: 600px) {
  .pattern-orb, .supplemental-orb { width: 68px; height: 46px; }
}

/* Brushed-metal construction for every clickable button. */
button,
.button,
.button.primary,
.button.secondary {
  color: #17211d;
  background-color: #c8cecb;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.16) 42%, rgba(43,56,50,.16) 52%, rgba(255,255,255,.28) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(39,51,46,.035) 1px 3px);
  border: 1px solid #66736e;
  border-bottom: 3px solid #46524d;
  border-radius: 5px;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255,255,255,.45), inset -1px 0 0 rgba(41,53,48,.12), 3px 4px 0 rgba(41,48,45,.25), 0 9px 18px rgba(44,32,21,.17);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}

.button.primary,
.game-start {
  color: #f9fbfa;
  background-color: #596762;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 43%, rgba(8,16,13,.24) 52%, rgba(255,255,255,.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.025) 1px 3px);
  border-color: #35433d;
  border-bottom-color: #202c27;
  text-shadow: 0 -1px 0 rgba(0,0,0,.72);
}

button:hover,
.button:hover {
  filter: brightness(1.07);
  transform: translate(-1px, -2px);
  border-color: #4e5c56;
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255,255,255,.45), 5px 6px 0 rgba(41,48,45,.22), 0 13px 22px rgba(44,32,21,.2);
}

button:active,
.button:active {
  filter: brightness(.98);
  transform: translate(2px, 3px);
  border-bottom-width: 1px;
  box-shadow: inset 0 2px 5px rgba(20,29,25,.24), 1px 1px 0 rgba(41,48,45,.28);
}

button:disabled,
.button:disabled { filter: grayscale(.55); opacity: .55; box-shadow: inset 0 1px 2px rgba(20,29,25,.16); cursor: not-allowed; }

/* Tools remain solid; only fully hide when crossing protected content. */
.pattern-layer { opacity: 1; }
.pattern-orb,
.supplemental-orb { opacity: 1; transition-property: none; }
.pattern-orb.is-over-content { opacity: 0; transition: none; }
.pattern-orb.is-constellation {
  opacity: 1;
  transition: left 1.15s cubic-bezier(.2,.8,.2,1), top 1.15s cubic-bezier(.2,.8,.2,1);
}

/* Meshed gear assemblies turn beneath the maple workbench content. */
.gear-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.gear-chain {
  position: absolute;
  left: -70px;
  top: 58%;
  transform: translateY(-50%) rotate(-1.5deg);
  filter: drop-shadow(0 12px 6px rgba(51,29,15,.42));
}

.gear-mount {
  position: absolute;
  width: var(--gear-size);
  height: var(--gear-size);
  transform-origin: center;
  animation-name: gear-turn !important;
  animation-duration: var(--gear-speed, 12s) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}

.gear-mount:nth-child(odd) { z-index: 2; }
.gear-mount:nth-child(even) { z-index: 1; animation-name: gear-turn-reverse !important; }

.gear-chain .workshop-gear {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #c4c9cc;
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: none !important;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.72)) drop-shadow(0 5px 4px rgba(66,72,75,.28));
}

.gear-chain .workshop-gear path { stroke: #747c80 !important; stroke-width: .85 !important; vector-effect: non-scaling-stroke; }

.gear-cluster {
  position: absolute;
  width: 220px;
  height: 190px;
  transform: scale(var(--cluster-scale, 1));
  transform-origin: top left;
  opacity: .34;
  filter: drop-shadow(0 7px 4px rgba(51,29,15,.32));
}

.workshop-gear {
  position: absolute;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: #697570;
  font-family: "Segoe UI Symbol", sans-serif;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 3px 2px rgba(31,39,35,.4);
  animation: gear-turn 12s linear infinite;
}

.workshop-gear::before { content: none; }
.gear-large { width: 118px; font-size: 118px; }
.gear-medium { width: 88px; font-size: 88px; animation-duration: 8.95s; }
.gear-small { width: 64px; font-size: 64px; animation-duration: 6.5s; }
.gear-reverse { animation-direction: reverse; color: #56635e; }

@keyframes gear-turn {
  from { transform: rotate(var(--gear-phase, 0deg)); }
  to { transform: rotate(calc(var(--gear-phase, 0deg) + 360deg)); }
}

@keyframes gear-turn-reverse {
  from { transform: rotate(var(--gear-phase, 0deg)); }
  to { transform: rotate(calc(var(--gear-phase, 0deg) - 360deg)); }
}

.gear-chain .gear-reverse { animation: none !important; }

[data-theme="dark"] .gear-cluster { opacity: .48; filter: drop-shadow(0 7px 4px rgba(0,0,0,.5)); }
[data-theme="dark"] .workshop-gear { color: #d1d5d7; }
[data-theme="dark"] .gear-chain .workshop-gear path { stroke: #8e969a !important; }

[data-theme="dark"] .gear-chain { filter: none; }

@media (max-width: 600px) {
  .gear-cluster { --cluster-scale: .62 !important; opacity: .27; }
  .gear-chain { left: -130px; transform: translateY(-50%) scale(.72) rotate(-1.5deg); transform-origin: left center; }
}

/* The former floating photographic tool layer is intentionally removed. */
.pattern-layer { display: none !important; }

/* Every exposed piece of writing sits on a solid workshop panel. */
.copy-panel {
  position: relative;
  padding: clamp(1.15rem, 2.8vw, 2rem);
  color: var(--workshop-dark);
  background-color: #f7f5ee;
  background-image:
    radial-gradient(circle at 12px 12px, #77817d 0 2px, #dce0de 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #77817d 0 2px, #dce0de 2.5px 4px, transparent 4.5px),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(230,232,228,.96));
  border: 1px solid #7c8983;
  border-bottom: 4px solid #59645f;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 #fff, 4px 5px 0 rgba(44,52,48,.2), 0 18px 38px rgba(55,34,19,.17);
}

.hero-content > .copy-panel { max-width: 48rem; }
.section-intro.copy-panel { max-width: 82rem; }
.section > h2.copy-panel,
.game-section > h1.copy-panel,
.game-section > .eyebrow.copy-panel,
.game-section > .lead.copy-panel { width: fit-content; max-width: min(100%, 62rem); }
.game-section > .lead.copy-panel { margin-top: .75rem; }
.info-story.copy-panel { max-width: 72rem; }

[data-theme="dark"] .copy-panel {
  color: #eef4f1;
  background-color: #26332e;
  background-image:
    radial-gradient(circle at 12px 12px, #9ca8a3 0 2px, #47554f 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #9ca8a3 0 2px, #47554f 2.5px 4px, transparent 4.5px),
    linear-gradient(145deg, #2c3a34, #1d2924);
  border-color: #64736c;
}

[data-theme="dark"] .copy-panel h1,
[data-theme="dark"] .copy-panel h2,
[data-theme="dark"] .copy-panel h3 { color: #f2f6f4; }
[data-theme="dark"] .copy-panel p:not(.info-paragraphs p),
[data-theme="dark"] .copy-panel li { color: #cbd5d1; }

/* Content sits above the visible gear mechanism; maple remains beneath it. */
.hero,
main,
.game-header,
.game-header + main,
.game-section {
  z-index: auto !important;
}

.nav,
.hero-content,
.section > *,
.game-section > *,
.copy-panel,
.cards article,
.service-grid article,
.gallery figure,
.card-form,
.game-choice,
.game-panel,
.quote-banner,
.proof-strip,
.feature-search-results,
.language-menu-list {
  position: relative;
  z-index: 5;
}

/* Keep gallery frames flush with the workbench instead of visually raised. */
.gallery-page .gallery figure,
.gallery-page .gallery figure:hover,
.gallery-page .gallery figure:active {
  transform: none !important;
  box-shadow: none !important;
}

.gallery-page .gallery-image {
  position: relative;
  isolation: isolate;
}

.gallery-page .gallery-image img,
.gallery-page .gallery figure:hover .gallery-image img,
.gallery-page .gallery figure:active .gallery-image img {
  filter: sepia(.22) saturate(.92) contrast(1.05) brightness(1.02) !important;
}

.gallery-page .gallery-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(174, 91, 48, .16);
  mix-blend-mode: color;
}

/* The gallery's maple section is part of one continuous workbench surface. */
.gallery-page .hero,
.gallery-page .section.alt {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* A continuous workshop chalkboard replaces the former maple backdrop. */
html,
body,
.hero,
.game-header,
.section.alt {
  background-color: #17352f;
  background-image:
    radial-gradient(ellipse at 18% 24%, rgba(235,242,231,.055), transparent 24%),
    radial-gradient(ellipse at 76% 68%, rgba(230,238,228,.04), transparent 28%),
    repeating-linear-gradient(3deg, transparent 0 17px, rgba(239,244,235,.018) 18px, transparent 20px 39px),
    repeating-linear-gradient(92deg, rgba(0,0,0,.018) 0 1px, transparent 1px 11px),
    linear-gradient(112deg, #1c4038, #112c27 52%, #193a33);
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
}

.hero,
.game-header,
.section.alt {
  border-color: rgba(220,228,217,.18);
  box-shadow: inset 0 -1px 0 rgba(238,243,235,.08);
}

[data-theme="dark"] body,
[data-theme="dark"] .hero,
[data-theme="dark"] .game-header,
[data-theme="dark"] .section.alt {
  background-color: #0d211d;
  background-image:
    radial-gradient(ellipse at 18% 24%, rgba(225,235,223,.035), transparent 24%),
    repeating-linear-gradient(4deg, transparent 0 21px, rgba(235,241,231,.012) 22px, transparent 24px 43px),
    linear-gradient(112deg, #122c27, #091a17 55%, #102722);
}

/* Repeating laptop workstations replace the chalkboard surface. */
html,
body,
.hero,
.game-header,
.section.alt {
  background-color: #d9e0e2;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.5), rgba(88,105,112,.09)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='130' viewBox='0 0 180 130'%3E%3Cg fill='none' stroke='%2367757b' stroke-width='5' stroke-linejoin='round' opacity='.42'%3E%3Crect x='35' y='18' width='110' height='72' rx='7'/%3E%3Cpath d='M20 101h140l-11 12H31z'/%3E%3Cpath d='M78 102h24' stroke-width='3'/%3E%3C/g%3E%3Ccircle cx='90' cy='84' r='2.5' fill='%2397a3a8' opacity='.7'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: auto, 180px 130px;
  background-position: 0 0, 0 0;
  background-attachment: fixed;
}

[data-theme="dark"] body,
[data-theme="dark"] .hero,
[data-theme="dark"] .game-header,
[data-theme="dark"] .section.alt {
  background-color: #20292d;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.025), rgba(0,0,0,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='130' viewBox='0 0 180 130'%3E%3Cg fill='none' stroke='%238d9ba1' stroke-width='5' stroke-linejoin='round' opacity='.34'%3E%3Crect x='35' y='18' width='110' height='72' rx='7'/%3E%3Cpath d='M20 101h140l-11 12H31z'/%3E%3Cpath d='M78 102h24' stroke-width='3'/%3E%3C/g%3E%3Ccircle cx='90' cy='84' r='2.5' fill='%23aeb8bc' opacity='.55'/%3E%3C/svg%3E");
}

/* Photorealistic laptop workbench texture. */
html,
body {
  background-color: #41474c;
  background-image: url('/media/realistic-laptop-background-web.jpg?v=20260907');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.hero,
.game-header,
.section.alt {
  background-color: transparent;
  background-image: none;
}

[data-theme="dark"] body {
  background-color: #41474c;
  background-image: url('/media/realistic-laptop-background-web.jpg?v=20260907');
}

[data-theme="dark"] .hero,
[data-theme="dark"] .game-header,
[data-theme="dark"] .section.alt {
  background-color: transparent;
  background-image: none;
}

/* Responsive layout: scale the whole experience to the available screen. */
html { overflow-x: hidden; }
body { min-width: 0; }
img, svg, video, canvas { max-width: 100%; height: auto; }
.nav, .hero-content, .section, .game-section, .proof-strip { width: min(100% - 3rem, 82rem); }
.nav-links { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.copy-panel, .card-form, .game-panel, .quote-banner { min-width: 0; }

@media (min-width: 1440px) {
  .nav, .hero-content, .section, .game-section, .proof-strip { width: min(100% - 6rem, 94rem); max-width: 94rem; }
  .hero-content { grid-template-columns: minmax(0, 1.15fr) minmax(24rem, .85fr); }
  .service-grid { gap: 1.5rem; }
}

@media (max-width: 1100px) {
  .nav { align-items: flex-start; gap: 1rem 2rem; }
  .nav-links { row-gap: .65rem; }
  .hero-content { gap: clamp(2rem, 5vw, 4rem); }
  .contact-layout { gap: 3rem; }
}

@media (max-width: 850px) {
  html, body { background-size: auto 100vh; background-position: center top; }
  .nav, .hero-content, .section, .game-section, .proof-strip { width: min(100% - 2rem, 46rem); }
  .nav { display: flex; flex-direction: column; align-items: stretch; padding: 1rem; }
  .brand { align-self: flex-start; }
  .nav-links { justify-content: flex-start; width: 100%; }
  .hero-content { padding-block: clamp(3rem, 9vw, 5rem); }
  .hero-content > img { justify-self: center; width: min(72vw, 22rem); }
  .section { padding-block: clamp(3.5rem, 10vw, 5rem); }
  .cards, .gallery, .game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-banner { margin-bottom: 3rem; }
}

@media (max-width: 600px) {
  .nav, .hero-content, .section, .game-section, .proof-strip { width: calc(100% - 1.25rem); }
  .nav { gap: .8rem; padding: .85rem; }
  .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .nav-links a, .nav-links button, .nav-links select { width: 100%; min-width: 0; }
  .nav-links a { display: grid; place-items: center; min-height: 2.6rem; padding: .55rem .45rem; text-align: center; }
  .language-label { grid-column: 1 / -1; margin-top: .25rem; }
  .lang-select, .language-menu { grid-column: 1 / -1; }
  .hero-content { padding-top: 2.5rem; }
  .hero-content > img { width: min(78vw, 18rem); }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button, .quote-banner .button { width: 100%; text-align: center; }
  .copy-panel { padding: 1rem; }
  .hero h1, .game-section > h1 { font-size: clamp(2.45rem, 13vw, 4rem); overflow-wrap: anywhere; }
  .section h2 { font-size: clamp(2rem, 10vw, 3rem); overflow-wrap: anywhere; }
  .cards, .gallery, .game-picker, .material-list, .info-grid { grid-template-columns: 1fr; }
  .proof-strip { padding: .75rem; }
  .proof-strip span { padding: .75rem; }
  .service-grid article, .cards article, .game-choice, .game-panel, .card-form { padding: 1.15rem; }
  .quote-banner { gap: 1.5rem; padding: 1.25rem; }
  .info-paragraphs { padding: 1rem; }
  .info-paragraphs p { padding: 1.25rem .25rem 1.25rem 2.5rem; text-align: left; }
  .info-paragraphs p::before { left: .2rem; top: 1.35rem; }
  .contact-layout { gap: 2rem; }
  .card-form input, .card-form textarea, .card-form select { font-size: 16px; }
  .game-panel { overflow-x: auto; }
}

@media (max-width: 380px) {
  .nav, .hero-content, .section, .game-section, .proof-strip { width: calc(100% - .75rem); }
  .nav-links { grid-template-columns: 1fr; }
  .language-label, .lang-select, .language-menu { grid-column: 1; }
  .copy-panel { padding: .85rem; }
  .button { padding-inline: .8rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .hero-content { min-height: auto; padding-block: 2rem; }
  .hero-content > img { max-height: 55vh; width: auto; }
}

/* Literal backplates for every piece of readable copy. */
:where(h1, h2, h3, h4, p, li, figcaption, label, legend, .brand, .nav-links a, .text-link, .game-stats span, .game-message) {
  width: fit-content;
  max-width: 100%;
  padding: .28em .48em;
  color: var(--text);
  background: rgba(255,255,255,.97) !important;
  border: 1px solid rgba(69,82,76,.34);
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

:where(p, li, figcaption, label, legend, .game-message) { line-height: 1.6; }
:where(.nav-links a, .brand, .text-link) { display: inline-flex; align-items: center; }
.proof-strip span { background: rgba(255,255,255,.97); color: var(--text); border-radius: 5px; }
.proof-strip strong { color: var(--accent-dark); }
.quote-banner :where(h2, p) { color: var(--text); }
.section-kicker, .eyebrow { color: #2d2618; }

[data-theme="dark"] :where(h1, h2, h3, h4, p, li, figcaption, label, legend, .brand, .nav-links a, .text-link, .game-stats span, .game-message),
[data-theme="dark"] .proof-strip span {
  color: #f2f6f4 !important;
  background: rgba(30,42,37,.97) !important;
  border-color: rgba(174,190,182,.42);
}

@media (max-width: 600px) {
  :where(h1, h2, h3, h4, p, li, figcaption, label, legend) { width: 100%; }
}

/* Strong device breakpoints and fluid scaling. */
html { font-size: clamp(14px, calc(12px + .32vw), 18px); }

@media (max-width: 1024px) {
  .hero-content,
  .section-intro,
  .process-section,
  .contact-layout { grid-template-columns: 1fr; }
  .hero-content > img { justify-self: center; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-intro { position: static; }
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  body { background-size: auto 100svh; }
  .nav { display: flex; flex-direction: column; align-items: stretch; }
  .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .service-grid,
  .cards,
  .gallery,
  .game-picker,
  .material-list,
  .info-grid { grid-template-columns: 1fr; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip span { border-right: 0; }
  .quote-banner { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
  .nav-links { grid-template-columns: 1fr; }
  .language-label, .lang-select, .language-menu { grid-column: 1; }
  .hero-content > img { display: none; }
  .hero-content,
  .section,
  .game-section { padding-block: 2rem; }
  .button,
  button,
  input,
  select,
  textarea { max-width: 100%; }
}

.sound-toggle {
  min-width: 6.6rem;
  white-space: nowrap;
}

/* Keep feature search independent from global card and button styling. */
.feature-search {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 8.5rem 6.5rem 6.6rem;
  gap: .5rem;
  width: min(48rem, 72vw);
  align-items: stretch;
}
.feature-search-input,
.feature-search .language-menu-select,
.feature-search .search-theme-toggle,
.feature-search .sound-toggle { min-height: 2.75rem; margin: 0; }
.feature-search-results {
  position: absolute !important;
  top: calc(100% + .55rem);
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  max-height: min(60vh, 28rem);
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-gutter: stable;
  pointer-events: auto;
  gap: 0;
  padding: .45rem;
  background: #fff;
  border: 1px solid #aeb8b2;
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(17,28,23,.24);
}
.feature-search-results::-webkit-scrollbar { width: 12px; }
.feature-search-results::-webkit-scrollbar-track { background: #edf0ee; border-radius: 999px; }
.feature-search-results::-webkit-scrollbar-thumb { background: #68766f; border: 3px solid #edf0ee; border-radius: 999px; }
.feature-search-results::-webkit-scrollbar-thumb:hover { background: #3f5048; }
.feature-search-results .feature-result {
  display: grid;
  gap: .1rem;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: .72rem .8rem;
  color: #17211d !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #e3e7e4 !important;
  border-radius: 4px;
  box-shadow: none !important;
  text-align: left;
  text-shadow: none !important;
  text-transform: none;
  letter-spacing: normal;
  transform: none !important;
  filter: none !important;
}
.feature-search-results .feature-result:last-child { border-bottom: 0 !important; }
.feature-search-results .feature-result:is(:hover, :focus) { background: #edf4f1 !important; outline: 2px solid #348364; outline-offset: -2px; }
.feature-search-results .feature-result strong { font-size: .94rem; }
.feature-search-results .feature-result small { color: #617069; font-size: .78rem; }
.feature-search-empty { width: 100%; margin: 0; color: #617069 !important; background: #fff !important; border: 0; }
[data-theme="dark"] .feature-search-results { background: #1c2722; border-color: #58665f; }
[data-theme="dark"] .feature-search-results .feature-result { color: #f2f6f4 !important; background: #1c2722 !important; border-bottom-color: #34433c !important; }
[data-theme="dark"] .feature-search-results .feature-result:is(:hover, :focus) { background: #293a32 !important; }
[data-theme="dark"] .feature-search-results .feature-result small { color: #b7c2bd; }
@media (max-width: 850px) {
  .feature-search { grid-template-columns: minmax(0, 1fr) minmax(7.5rem, auto); width: 100%; }
  .feature-search-input { grid-column: 1 / -1; }
  .feature-search .language-menu-select,
  .feature-search .search-theme-toggle,
  .feature-search .sound-toggle { width: 100%; }
}
@media (max-width: 480px) {
  .feature-search { grid-template-columns: 1fr; }
  .feature-search-input,
  .feature-search .language-menu-select,
  .feature-search .search-theme-toggle,
  .feature-search .sound-toggle { grid-column: 1; }
}

/* Viewport-safe search overlay with native scrolling. */
.feature-search-results {
  position: fixed !important;
  top: var(--search-results-top, 5rem) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(42rem, calc(100vw - 1rem)) !important;
  max-height: calc(100dvh - var(--search-results-top, 5rem) - .5rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: translateX(-50%) !important;
  scrollbar-width: thin;
  scrollbar-gutter: auto;
  touch-action: pan-y;
}

/* Professional studio finish. */
:root {
  --pro-ink: #17221e;
  --pro-muted: #5d6a64;
  --pro-green: #173f32;
  --pro-green-hover: #205743;
  --pro-accent: #c83b35;
  --pro-line: #d7ded9;
  --pro-surface: rgba(255,255,255,.96);
  --pro-soft: #f4f6f4;
  --pro-shadow: 0 18px 45px rgba(15,32,25,.13);
}

body {
  color: var(--pro-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

/* Text is grouped into purposeful panels rather than dozens of small labels. */
:where(h1, h2, h3, h4, p, li, figcaption, label, legend, .brand, .nav-links a, .text-link, .game-stats span, .game-message) {
  color: inherit !important;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

h1, h2, h3, h4 { font-family: inherit; text-wrap: balance; }
h1 { letter-spacing: -.04em; }
h2 { letter-spacing: -.032em; }
p { text-wrap: pretty; }

.nav {
  padding: .9rem 1.1rem;
  background: rgba(255,255,255,.97);
  background-image: none;
  border: 1px solid var(--pro-line);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(15,32,25,.12);
  backdrop-filter: blur(14px);
}

.brand {
  padding: .45rem .6rem;
  color: var(--pro-green) !important;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand::before { border-radius: 7px; box-shadow: none; }

.feature-search-input,
.feature-search .language-menu-select,
.feature-search .search-theme-toggle,
.feature-search .sound-toggle,
.card-form input,
.card-form textarea,
.card-form select {
  color: var(--pro-ink);
  background: #fff;
  background-image: none;
  border: 1px solid #bfc9c3;
  border-radius: 8px;
  box-shadow: none;
  text-shadow: none;
}
.feature-search-input:focus,
.card-form input:focus,
.card-form textarea:focus,
.card-form select:focus {
  border-color: var(--pro-green);
  outline: 3px solid rgba(23,63,50,.14);
}

button,
.button,
.button.primary,
.button.secondary {
  min-height: 2.7rem;
  padding: .72rem 1.05rem;
  color: #fff;
  background: var(--pro-green);
  background-image: none;
  border: 1px solid var(--pro-green);
  border-radius: 8px;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 750;
}
button:hover,
.button:hover { color: #fff; background: var(--pro-green-hover); border-color: var(--pro-green-hover); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,48,36,.16); filter: none; }
button:active,
.button:active { transform: translateY(0); box-shadow: none; }
.button.secondary { color: var(--pro-green); background: #fff; border-color: #9fb1a8; }
.button.secondary:hover { color: var(--pro-green); background: var(--pro-soft); }
.theme-toggle, .sound-toggle { color: var(--pro-green); background: #fff; border-color: #bfc9c3; }
.theme-toggle:hover, .sound-toggle:hover { color: var(--pro-green); background: var(--pro-soft); border-color: var(--pro-green); }

.copy-panel,
.service-grid article,
.cards article,
.gallery figure,
.card-form,
.game-choice,
.game-panel,
.proof-strip,
.quote-banner {
  background: var(--pro-surface);
  background-image: none;
  border: 1px solid var(--pro-line);
  border-bottom-width: 1px;
  border-radius: 12px;
  box-shadow: var(--pro-shadow);
}
.copy-panel { padding: clamp(1.3rem, 3vw, 2.3rem); }
.service-grid article, .cards article { padding: 1.6rem; }
.service-grid article:hover, .cards article:hover { transform: translateY(-3px); border-color: #b5c3bc; box-shadow: 0 22px 48px rgba(15,32,25,.16); }

.eyebrow,
.section-kicker {
  padding: 0;
  color: var(--pro-accent) !important;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  transform: none;
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lead, .section-intro > p, .service-grid p, .process-copy p:not(.section-kicker), .contact-intro > p:not(.section-kicker) { color: var(--pro-muted) !important; }
.hero-points { gap: .65rem; }
.hero-points li { color: var(--pro-muted) !important; }

.proof-strip { color: var(--pro-ink); background: var(--pro-surface); overflow: hidden; }
.proof-strip span { color: var(--pro-ink); background: transparent; border-radius: 0; }
.proof-strip strong { color: var(--pro-accent); }
.quote-banner { color: var(--pro-ink); background: var(--pro-surface); }
.quote-banner :where(h2, p) { color: inherit !important; }

.feature-search-results {
  background: #fff;
  border: 1px solid var(--pro-line);
  border-radius: 10px;
  box-shadow: 0 20px 48px rgba(15,32,25,.2);
}
.feature-search-results .feature-result { border-radius: 6px; }

.gallery-page .gallery figure,
.gallery-page .gallery figure:hover { background: #fff; border: 1px solid var(--pro-line) !important; border-radius: 12px; box-shadow: var(--pro-shadow) !important; }
.gallery-page .gallery-image { border: 0; border-radius: 8px; }
.gallery-page .gallery-image::after { display: none; }
.gallery-page .gallery-image img { filter: none !important; }

[data-theme="dark"] {
  --pro-ink: #eef4f1;
  --pro-muted: #bdc9c3;
  --pro-surface: rgba(27,39,34,.97);
  --pro-soft: #263a31;
  --pro-line: #465a50;
}
[data-theme="dark"] .nav,
[data-theme="dark"] .copy-panel,
[data-theme="dark"] .service-grid article,
[data-theme="dark"] .cards article,
[data-theme="dark"] .gallery figure,
[data-theme="dark"] .card-form,
[data-theme="dark"] .game-choice,
[data-theme="dark"] .game-panel,
[data-theme="dark"] .proof-strip,
[data-theme="dark"] .quote-banner { background: var(--pro-surface); background-image: none; border-color: var(--pro-line); }

@media (max-width: 768px) {
  .nav { border-radius: 10px; }
  .copy-panel { padding: 1.25rem; }
  .service-grid article, .cards article { padding: 1.25rem; }
}

/* Fabulous art direction: confident, crafted, and unmistakably Henry's. */
:root {
  --fab-emerald: #073f34;
  --fab-emerald-2: #0c5d4b;
  --fab-coral: #f04f47;
  --fab-coral-deep: #c92f31;
  --fab-gold: #d5a84b;
  --fab-cream: #fffaf0;
  --fab-ink: #10251e;
  --fab-glow: 0 24px 70px rgba(7,63,52,.22);
}

::selection { color: #fff; background: var(--fab-coral); }

.nav {
  border-color: rgba(213,168,75,.62);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 55px rgba(7,42,34,.2);
}
.nav::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: -1px;
  left: 1rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--fab-gold), var(--fab-coral), var(--fab-gold), transparent);
}
.brand { color: var(--fab-emerald) !important; letter-spacing: .11em; }

.hero { padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero-content { gap: clamp(2rem, 7vw, 7rem); }
.hero-content > .copy-panel {
  overflow: hidden;
  border-color: rgba(213,168,75,.55);
  box-shadow: var(--fab-glow), inset 0 1px 0 #fff;
}
.hero-content > .copy-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(var(--fab-coral), var(--fab-gold));
}
.hero h1 {
  max-width: 11ch;
  margin: .35rem 0 1.15rem;
  color: var(--fab-emerald) !important;
  font-size: clamp(3.2rem, 7vw, 6.8rem);
  line-height: .94;
  letter-spacing: -.065em;
}
.hero .lead { max-width: 55ch; font-size: clamp(1.05rem, 1.6vw, 1.28rem); }
.hero-content > img {
  padding: clamp(1rem, 3vw, 2rem);
  background: radial-gradient(circle at 35% 20%, #fff 0%, rgba(255,250,240,.94) 58%, rgba(213,168,75,.18) 100%);
  border: 1px solid rgba(213,168,75,.58);
  border-radius: 28px 8px 28px 8px;
  box-shadow: 0 30px 70px rgba(7,42,34,.24), 0 0 0 8px rgba(255,255,255,.2);
  transform: rotate(1.4deg);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.hero-content > img:hover { transform: rotate(0) translateY(-6px) scale(1.015); box-shadow: 0 38px 85px rgba(7,42,34,.29), 0 0 0 8px rgba(255,255,255,.3); }

.eyebrow, .section-kicker { color: var(--fab-coral-deep) !important; }
.eyebrow::before, .section-kicker::before { content: "✦"; margin-right: .55rem; color: var(--fab-gold); }
.section h2 { color: var(--fab-emerald) !important; }

button,
.button,
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--fab-coral), var(--fab-coral-deep));
  border-color: rgba(151,29,34,.45);
  box-shadow: 0 10px 24px rgba(201,47,49,.24), inset 0 1px 0 rgba(255,255,255,.3);
}
button:hover,
.button:hover { background: linear-gradient(135deg, #ff6259, #d23638); border-color: #a9272b; box-shadow: 0 14px 30px rgba(201,47,49,.32); }
.theme-toggle, .sound-toggle, .feature-result { color: var(--fab-emerald) !important; background: #fff !important; box-shadow: none; }
.button.secondary { color: var(--fab-emerald); background: rgba(255,255,255,.92); border-color: rgba(7,63,52,.38); box-shadow: 0 9px 22px rgba(7,63,52,.1); }

.proof-strip {
  margin-top: -1.8rem;
  color: #fff;
  background: linear-gradient(120deg, var(--fab-emerald), #0a5645);
  border-color: rgba(213,168,75,.75);
  box-shadow: var(--fab-glow);
}
.proof-strip span { color: #fff; border-color: rgba(255,255,255,.16); }
.proof-strip strong { color: #ffd984; }

.service-grid article,
.cards article,
.gallery figure,
.game-choice {
  position: relative;
  overflow: hidden;
  border-color: rgba(7,63,52,.18);
}
.service-grid article::before,
.cards article::before,
.game-choice::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--fab-coral), var(--fab-gold));
}
.service-grid article:nth-child(2)::before,
.cards article:nth-child(2)::before { background: linear-gradient(90deg, var(--fab-gold), var(--fab-emerald-2)); }
.service-grid article:nth-child(3)::before,
.cards article:nth-child(3)::before { background: linear-gradient(90deg, var(--fab-emerald-2), var(--fab-coral)); }
.service-number { color: var(--fab-coral); font-size: .78rem; letter-spacing: .15em; }
.service-grid h3, .cards h3 { color: var(--fab-emerald) !important; }

.quote-banner {
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--fab-emerald) 0%, #0a5746 60%, #0d6b55 100%);
  border-color: rgba(213,168,75,.7);
  box-shadow: var(--fab-glow);
}
.quote-banner::before {
  content: "✦";
  position: absolute;
  right: clamp(1rem, 5vw, 4rem);
  top: 50%;
  color: rgba(255,220,145,.16);
  font-size: clamp(8rem, 24vw, 20rem);
  line-height: 1;
  transform: translateY(-50%);
}
.quote-banner :where(h2, p) { position: relative; color: #fff !important; }
.quote-banner .section-kicker { color: #ffd984 !important; }

.card-form { border-color: rgba(213,168,75,.48); box-shadow: var(--fab-glow); }
.card-form label { color: var(--fab-emerald) !important; font-weight: 750; }
.gallery figure { padding: .8rem; }
.gallery-image { border-radius: 10px; }

.feature-search-input:focus { border-color: var(--fab-coral); outline-color: rgba(240,79,71,.16); }
.feature-search-results .feature-result:is(:hover, :focus) { color: var(--fab-emerald) !important; background: #fff5ec !important; outline-color: var(--fab-coral); }

@keyframes fab-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-content > *, .proof-strip, .service-grid article, .cards article, .gallery figure { animation: fab-rise .7s cubic-bezier(.2,.75,.25,1) both; }
.service-grid article:nth-child(2), .cards article:nth-child(2), .gallery figure:nth-child(2) { animation-delay: .08s; }
.service-grid article:nth-child(3), .cards article:nth-child(3), .gallery figure:nth-child(3) { animation-delay: .16s; }
.gallery figure:nth-child(4) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .hero-content > *, .proof-strip, .service-grid article, .cards article, .gallery figure { animation: none; }
  .hero-content > img { transform: none; transition: none; }
}

@media (max-width: 768px) {
  .hero h1 { font-size: clamp(2.8rem, 14vw, 4.6rem); }
  .hero-content > img { border-radius: 20px 6px 20px 6px; transform: none; }
  .proof-strip { margin-top: -.8rem; }
}

/* Snazzy interaction and finish pass. */
.hero h1 {
  color: transparent !important;
  background: linear-gradient(105deg, var(--fab-emerald) 0 48%, var(--fab-coral-deep) 70%, var(--fab-emerald-2) 100%);
  background-size: 220% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: fab-title-flow 7s ease-in-out infinite alternate;
}
@keyframes fab-title-flow { to { background-position: 100% center; } }

.copy-panel,
.service-grid article,
.cards article,
.gallery figure,
.game-choice,
.game-panel,
.card-form { isolation: isolate; }

.snazzy-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 20%;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, border-color .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.snazzy-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255,230,170,.42), transparent 34%);
  transition: opacity .25s ease;
}
.snazzy-card:hover {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px);
  border-color: rgba(213,168,75,.8);
  box-shadow: 0 30px 62px rgba(7,42,34,.22);
}
.snazzy-card:hover::after { opacity: 1; }

button,
.button { position: relative; overflow: hidden; }
button::after,
.button::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -45%;
  width: 32%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.2,.7,.2,1);
}
button:hover::after,
.button:hover::after { left: 120%; }
.feature-result::after, .theme-toggle::after, .sound-toggle::after { display: none; }

.copy-panel::after,
.card-form::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 30px;
  height: 30px;
  pointer-events: none;
  border-right: 2px solid rgba(213,168,75,.72);
  border-bottom: 2px solid rgba(213,168,75,.72);
  border-radius: 0 0 8px 0;
}

.service-number {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1.2rem;
  color: #fff;
  background: linear-gradient(135deg, var(--fab-coral), var(--fab-coral-deep));
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(201,47,49,.25);
}

.proof-strip strong { display: inline-block; transition: transform .25s ease, color .25s ease; }
.proof-strip span:hover strong { color: #fff; transform: rotate(-8deg) scale(1.15); }

@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none; background-position: 0 0; }
  .snazzy-card, .snazzy-card:hover { transform: none; transition: none; }
  button::after, .button::after { display: none; }
}

/* Coordinated colour-changing typography across the whole site. */
@keyframes text-colour-cycle {
  0%, 100% { color: #073f34; }
  25% { color: #b92f35; }
  50% { color: #2357a5; }
  75% { color: #70409b; }
}
@keyframes text-colour-cycle-bright {
  0%, 100% { color: #fff4c9; }
  25% { color: #ffb7ae; }
  50% { color: #aee8ff; }
  75% { color: #e2c4ff; }
}

body :is(h1, h2, h3, h4, p, a, li, span, strong, small, label, legend, figcaption, button, option) {
  animation: text-colour-cycle 8s ease-in-out infinite !important;
}

.proof-strip :is(span, strong),
.quote-banner :is(h1, h2, h3, h4, p, a, span, strong),
.button.primary,
[class*="game-start"],
[data-theme="dark"] body :is(h1, h2, h3, h4, p, a, li, span, strong, small, label, legend, figcaption, button, option) {
  animation-name: text-colour-cycle-bright !important;
}

input, textarea, select { color: #173f32; }
input::placeholder, textarea::placeholder { color: #68766f; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body :is(h1, h2, h3, h4, p, a, li, span, strong, small, label, legend, figcaption, button, option) {
    animation: none !important;
  }
}
.feature-search-results::-webkit-scrollbar { width: 8px; }
.feature-search-results::-webkit-scrollbar-track { background: transparent; }
.feature-search-results::-webkit-scrollbar-thumb { background: #75817b; border: 2px solid transparent; background-clip: padding-box; }

/* Final reliable search layout: anchored dropdown with native scrolling. */
.feature-search-results {
  position: absolute !important;
  top: calc(100% + .5rem) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  max-height: min(55vh, 24rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  touch-action: pan-y;
}