/* --- from about.html --- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=fallback');

/* --- from about.html --- */
:root {
      --site-bg: #FFFAEC;
      --site-surface: #FAEFD4;
      --site-text: #13110F;
      --site-muted: #3D3A34;
      --site-border: #E7DDC4;
      --site-primary: #997B22;
      --site-on-primary: #000000;
      --site-secondary: #9772C8;
      --site-on-secondary: #000000;
      --site-accent: #5586AF;
      --site-on-accent: #000000;
      --site-success: #22C55E;
      --site-warning: #F59E0B;
      --site-error: #EF4444;
      --site-info: #3B82F6;
      --color-bg: var(--site-bg);
      --color-surface: var(--site-surface);
      --color-text: var(--site-text);
      --color-muted: var(--site-muted);
      --color-border: var(--site-border);
      --color-primary: var(--site-primary);
      --color-on-primary: var(--site-on-primary);
      --color-secondary: var(--site-secondary);
      --color-on-secondary: var(--site-on-secondary);
      --color-accent: var(--site-accent);
      --color-on-accent: var(--site-on-accent);
      --color-success: var(--site-success);
      --color-warning: var(--site-warning);
      --color-error: var(--site-error);
      --color-info: var(--site-info);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #0E0D0B;
        --site-surface: #1B1916;
        --site-text: #E8E4DC;
        --site-muted: #B7B1A0;
        --site-border: #2F2E2A;
        --site-primary: #EBC45D;
        --site-on-primary: #000000;
        --site-secondary: #C6B8DD;
        --site-on-secondary: #000000;
        --site-accent: #ACCAE5;
        --site-on-accent: #000000;
        --color-bg: var(--site-bg);
        --color-surface: var(--site-surface);
        --color-text: var(--site-text);
        --color-muted: var(--site-muted);
        --color-border: var(--site-border);
        --color-primary: var(--site-primary);
        --color-on-primary: var(--site-on-primary);
        --color-secondary: var(--site-secondary);
        --color-on-secondary: var(--site-on-secondary);
        --color-accent: var(--site-accent);
        --color-on-accent: var(--site-on-accent);
      }
    }
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      background: var(--site-bg);
      color: var(--site-text);
      line-height: 1.5;
    }
    h1, h2, h3 {
      font-weight: 700;
    }
    .bar {
      position: sticky;
      top: 0;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 clamp(16px, 4vw, 48px);
      z-index: 50;
      background: var(--site-surface);
      border-bottom: 1px solid var(--site-border);
    }
    .brand a {
      text-decoration: none;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--site-primary);
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: -0.02em;
    }
    .brand span.material-symbols-outlined {
      font-size: 1.6rem;
      color: var(--site-primary);
    }
    .nav-links {
      list-style: none;
      display: flex;
      gap: 28px;
    }
    .nav-links a {
      text-decoration: none;
      color: var(--site-text);
      font-weight: 400;
      position: relative;
      transition: color 0.2s;
    }
    .nav-links a:hover,
    .nav-links a.active {
      color: var(--site-primary);
    }
    .nav-links a.active::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--site-primary);
    }
    .cta-btn {
      background: var(--site-accent);
      color: var(--site-on-accent);
      border: none;
      padding: 10px 20px;
      border-radius: 12px;
      font-weight: 700;
      text-decoration: none;
      transition: opacity 0.2s, box-shadow 0.2s;
      white-space: nowrap;
    }
    .cta-btn:hover {
      opacity: 0.9;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    #menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--site-text);
    }
    #menu-toggle .material-symbols-outlined {
      font-size: 2rem;
    }
    @media (max-width: 860px) {
      .bar {
        height: 64px;
      }
      .nav-desktop {
        display: none;
      }
      #menu-toggle {
        display: block;
      }
      .mobile-menu {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--site-surface);
        border-bottom: 1px solid var(--site-border);
        padding: 20px clamp(16px, 4vw, 48px);
        flex-direction: column;
        gap: 16px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
      }
      .mobile-menu.visible {
        display: flex;
      }
      .mobile-menu a {
        font-size: 1.1rem;
        text-decoration: none;
        color: var(--site-text);
        padding: 8px 0;
      }
    }

/* --- from about.html --- */
/* About page styles are local so the shared header can keep its own layout rules. */
		main {
			background: var(--color-bg);
			color: var(--color-text);
		}

		.about-hero {
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: clamp(2rem, 5vw, 4.5rem);
			align-items: center;
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px clamp(3.5rem, 7vw, 5rem);
		}

		.about-hero__eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 1rem;
			color: var(--color-primary);
			font-size: 0.8rem;
			font-weight: 700;
			letter-spacing: 0.14em;
			text-transform: uppercase;
		}

		.about-hero h1 {
			max-width: 11ch;
			margin-bottom: 1.25rem;
			font-size: clamp(2.7rem, 6vw, 5.4rem);
			line-height: 0.98;
			letter-spacing: -0.055em;
		}

		.about-hero__copy {
			max-width: 49ch;
			margin-bottom: 1.8rem;
			color: var(--color-muted);
			font-size: clamp(1.05rem, 2vw, 1.25rem);
			line-height: 1.65;
		}

		.about-hero__action {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 12px 18px;
			border-radius: 12px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			font-weight: 700;
			text-decoration: none;
			transition: transform 180ms ease, box-shadow 180ms ease;
		}

		.about-hero__action:hover {
			transform: translateY(-3px);
			box-shadow: 0 10px 22px color-mix(in srgb, var(--color-accent) 30%, transparent);
		}

		.about-hero__visual {
			position: relative;
			margin: 0;
			transform: rotate(2deg);
		}

		.about-hero__visual img {
			display: block;
			width: 100%;
			height: auto;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			box-shadow: 18px 18px 0 var(--color-secondary);
		}

		.about-hero__note {
			position: absolute;
			right: -18px;
			bottom: -22px;
			max-width: 16ch;
			padding: 14px 16px;
			border-radius: 12px;
			background: var(--color-primary);
			color: var(--color-on-primary);
			font-weight: 700;
			line-height: 1.2;
			transform: rotate(-5deg);
		}

		.metrics-band {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 32px;
			justify-items: center;
			padding: clamp(3.5rem, 7vw, 5rem) 24px;
			background: var(--color-secondary);
			color: var(--color-on-secondary);
			text-align: center;
		}

		.metrics-band--second {
			grid-template-columns: repeat(3, 1fr);
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		.metric {
			display: flex;
			flex-direction: column;
			gap: 10px;
			max-width: 22ch;
		}

		.metric__number {
			font-size: clamp(2.8rem, 5.5vw, 4.5rem);
			font-weight: 800;
			line-height: 1;
			letter-spacing: -0.06em;
		}

		.metric__caption {
			font-size: 0.85rem;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			opacity: 0.82;
		}

		.values-section {
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px;
		}

		.section-heading {
			max-width: 650px;
			margin-bottom: 2rem;
		}

		.section-heading h2,
		.story h2,
		.location h2,
		.contact h2 {
			margin-bottom: 0.8rem;
			font-size: clamp(2rem, 4vw, 3.2rem);
			line-height: 1.05;
			letter-spacing: -0.04em;
		}

		.section-heading p,
		.location__intro,
		.contact p {
			color: var(--color-muted);
			font-size: 1.05rem;
		}

		.values-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
			grid-auto-rows: minmax(180px, auto);
		}

		.value-card {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 28px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(140deg, var(--color-surface), var(--color-bg));
			color: var(--color-text);
			transition: border-color 180ms ease, transform 180ms ease;
		}

		.value-card:hover {
			border-color: var(--color-accent);
			transform: translateY(-5px);
		}

		.value-card__icon {
			margin-bottom: 1.6rem;
			color: var(--color-accent);
			font-size: 2rem;
		}

		.value-card h3 {
			margin-bottom: 0.55rem;
			font-size: 1.25rem;
		}

		.value-card p {
			color: var(--color-muted);
			line-height: 1.6;
		}

		.story {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: clamp(2.5rem, 7vw, 5.5rem);
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px;
		}

		.story__text {
			max-width: 700px;
		}

		.story__text p {
			margin-top: 1.35rem;
			color: var(--color-muted);
			font-size: 1.15rem;
			line-height: 1.85;
		}

		.story__rail {
			display: flex;
			flex-direction: column;
			gap: 20px;
			align-self: start;
			padding-top: 0.4rem;
		}

		.story__rail-item {
			padding: 20px;
			border-left: 4px solid var(--color-primary);
			background: var(--color-surface);
			color: var(--color-text);
		}

		.story__rail-item strong {
			display: block;
			margin-bottom: 4px;
			color: var(--color-primary);
			font-size: 1.7rem;
			line-height: 1;
		}

		.story__rail-item span {
			color: var(--color-muted);
			font-size: 0.92rem;
		}

		.location {
			display: grid;
			grid-template-columns: 0.85fr 1.15fr;
			gap: 36px;
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px;
		}

		.location__address {
			display: flex;
			gap: 14px;
			align-items: flex-start;
			margin-top: 1.8rem;
			color: var(--color-text);
			font-size: 1.1rem;
			line-height: 1.7;
		}

		.location__address .material-symbols-outlined {
			color: var(--color-primary);
			font-size: 2rem;
		}

		.location__map {
			display: grid;
			min-height: 260px;
			place-items: center;
			padding: 2rem;
			border: 1px dashed var(--color-primary);
			border-radius: 12px;
			background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
			color: var(--color-muted);
			text-align: center;
		}

		.location__map span {
			display: block;
			margin-bottom: 10px;
			color: var(--color-secondary);
			font-size: 3rem;
		}

		.contact {
			padding: clamp(3.5rem, 7vw, 5rem) 24px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			text-align: center;
		}

		.contact__inner {
			max-width: 650px;
			margin: 0 auto;
		}

		.contact h2 {
			color: var(--color-on-accent);
		}

		.contact p {
			margin-bottom: 1.5rem;
			color: var(--color-on-accent);
		}

		.contact__link {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			padding: 12px 18px;
			border-radius: 12px;
			background: var(--color-surface);
			color: var(--color-text);
			font-weight: 700;
			text-decoration: none;
			transition: border-color 180ms ease, transform 180ms ease;
		}

		.contact__link:hover {
			border-color: var(--color-primary);
			transform: translateY(-3px);
		}

		@media (max-width: 860px) {
			.about-hero,
			.story,
			.location {
				grid-template-columns: 1fr;
			}

			.about-hero h1 {
				max-width: 12ch;
			}

			.about-hero__visual {
				max-width: 620px;
				margin: 0 auto;
			}

			.metrics-band {
				grid-template-columns: repeat(2, 1fr);
			}

			.metrics-band--second,
			.values-grid {
				grid-template-columns: 1fr;
			}

			.story__rail {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
			}
		}

		@media (max-width: 560px) {
			.about-hero {
				padding-top: 3rem;
			}

			.about-hero__note {
				right: -5px;
			}

			.metrics-band {
				gap: 28px 16px;
			}

			.metric__number {
				font-size: 2.6rem;
			}

			.story__rail {
				grid-template-columns: 1fr;
			}

			.location__map {
				min-height: 210px;
			}
		}

/* --- from about.html --- */
.site-footer {
      background: var(--site-surface);
      color: var(--site-text);
      padding: 60px 24px 32px;
      border-top: 1px solid var(--site-border);
      font-size: 0.95rem;
    }
    .footer-grid {
      max-width: 1200px;
      margin: 0 auto 40px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }
    .footer-col h4 {
      font-weight: 700;
      margin-bottom: 16px;
      color: var(--site-primary);
      letter-spacing: 0.02em;
    }
    .footer-col p, .footer-col a {
      display: block;
      color: var(--site-muted);
      text-decoration: none;
      margin-bottom: 10px;
      line-height: 1.6;
    }
    .footer-col a:hover {
      color: var(--site-primary);
    }
    .footer-bottom {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
      border-top: 1px solid var(--site-border);
      color: var(--site-muted);
      font-size: 0.85rem;
    }
    .footer-legal a {
      color: var(--site-muted);
      text-decoration: none;
      margin-left: 24px;
    }
    .footer-legal a:hover {
      color: var(--site-primary);
    }
    @media (max-width: 700px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
      .footer-legal a {
        margin-left: 0;
        margin-right: 16px;
      }
    }

/* --- from careers.html --- */
.careers-page {
			background: var(--color-bg);
			color: var(--color-text);
			font-family: "Lato", sans-serif;
		}

		.careers-page *,
		.careers-page *::before,
		.careers-page *::after {
			box-sizing: border-box;
		}

		.careers-page__hero {
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 8vw, 6rem) 24px;
			display: grid;
			grid-template-columns: 1.08fr 0.92fr;
			gap: clamp(2rem, 6vw, 5rem);
			align-items: center;
		}

		.careers-page__eyebrow {
			margin-bottom: 1rem;
			color: var(--color-primary);
			font-size: 0.78rem;
			font-weight: 700;
			letter-spacing: 0.14em;
			text-transform: uppercase;
		}

		.careers-page h1,
		.careers-page h2,
		.careers-page h3 {
			font-weight: 700;
			line-height: 1.08;
		}

		.careers-page h1 {
			max-width: 11ch;
			margin-bottom: 1.25rem;
			font-size: clamp(2.8rem, 7vw, 5.6rem);
			letter-spacing: -0.055em;
		}

		.careers-page h2 {
			margin-bottom: 0.8rem;
			font-size: clamp(2rem, 4vw, 3.25rem);
			letter-spacing: -0.035em;
		}

		.careers-page h3 {
			font-size: 1.25rem;
		}

		.careers-page p {
			color: var(--color-muted);
			font-size: 1.05rem;
		}

		.careers-page__hero-copy > p {
			max-width: 52ch;
			margin-bottom: 1.8rem;
		}

		.careers-page__hero-media {
			position: relative;
			margin: 0;
		}

		.careers-page__hero-media img {
			display: block;
			width: 100%;
			height: auto;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			box-shadow: 18px 18px 0 var(--color-secondary);
			transform: rotate(2deg);
		}

		.careers-page__button {
			display: inline-flex;
			align-items: center;
			gap: 0.55rem;
			padding: 0.85rem 1.2rem;
			border: 1px solid transparent;
			border-radius: 12px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			font-weight: 700;
			text-decoration: none;
			transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
		}

		.careers-page__button:hover,
		.careers-page__button:focus-visible {
			border-color: var(--color-text);
			box-shadow: 4px 4px 0 var(--color-primary);
			transform: translateY(-3px);
		}

		.careers-page__band {
			width: 100%;
			padding: clamp(3rem, 6vw, 5rem) 24px;
			display: grid;
			gap: 2rem;
			justify-items: center;
			text-align: center;
		}

		.careers-page__band--primary {
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		.careers-page__band--secondary {
			background: var(--color-secondary);
			color: var(--color-on-secondary);
		}

		.careers-page__band-grid--four {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		.careers-page__band-grid--three {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.careers-page__stat {
			display: flex;
			max-width: 20ch;
			flex-direction: column;
			gap: 0.6rem;
		}

		.careers-page__stat-number {
			font-size: clamp(2.8rem, 5.5vw, 4.5rem);
			font-weight: 800;
			letter-spacing: -0.06em;
			line-height: 1;
		}

		.careers-page__stat-caption {
			font-size: 0.82rem;
			letter-spacing: 0.08em;
			text-transform: uppercase;
		}

		.careers-page__section {
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3rem, 7vw, 5.5rem) 24px;
		}

		.careers-page__section-intro {
			max-width: 55ch;
			margin-bottom: 2rem;
		}

		.careers-page__roles {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1.25rem;
		}

		.careers-page__role,
		.careers-page__culture-card,
		.careers-page__quote {
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
			transition: border-color 180ms ease, transform 180ms ease;
		}

		.careers-page__role:hover,
		.careers-page__culture-card:hover,
		.careers-page__quote:hover {
			border-color: var(--color-accent);
			transform: translateY(-3px);
		}

		.careers-page__role {
			padding: 1.5rem;
			display: flex;
			flex-direction: column;
			gap: 0.85rem;
		}

		.careers-page__role-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 1rem;
		}

		.careers-page__role p {
			font-size: 0.95rem;
		}

		.careers-page__role-link {
			align-self: flex-start;
			color: var(--color-primary);
			font-weight: 700;
			text-decoration: none;
		}

		.careers-page__role-link:hover {
			color: var(--color-accent);
		}

		.careers-page__culture {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1.25rem;
		}

		.careers-page__culture-card {
			min-height: 180px;
			padding: 1.5rem;
		}

		.careers-page__icon {
			display: block;
			margin-bottom: 1rem;
			color: var(--color-primary);
			font-size: 2rem;
		}

		.careers-page__culture-card p {
			margin-top: 0.7rem;
			font-size: 0.95rem;
		}

		.careers-page__about {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: clamp(2rem, 7vw, 5rem);
			align-items: start;
		}

		.careers-page__about-copy p + p {
			margin-top: 1rem;
		}

		.careers-page__mini-stats {
			display: grid;
			gap: 1rem;
		}

		.careers-page__mini-stat {
			padding: 1.2rem 0;
			border-bottom: 1px solid var(--color-border);
		}

		.careers-page__mini-stat strong {
			display: block;
			margin-bottom: 0.25rem;
			color: var(--color-primary);
			font-size: 1.7rem;
		}

		.careers-page__mini-stat span {
			color: var(--color-muted);
			font-size: 0.9rem;
		}

		.careers-page__quotes {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1.25rem;
		}

		.careers-page__quote {
			padding: 1.5rem;
		}

		.careers-page__quote p {
			margin-bottom: 1rem;
			color: var(--color-text);
			font-size: 1.05rem;
		}

		.careers-page__quote cite {
			color: var(--color-muted);
			font-size: 0.9rem;
			font-style: normal;
		}

		.careers-page__contact {
			max-width: 760px;
			margin: 0 auto;
			padding: clamp(3rem, 7vw, 5.5rem) 24px;
			text-align: center;
		}

		.careers-page__contact > p {
			max-width: 54ch;
			margin: 0 auto 2rem;
		}

		.careers-page__form {
			display: grid;
			gap: 1rem;
			padding: clamp(1.4rem, 4vw, 2.5rem);
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: var(--color-surface);
			text-align: left;
		}

		.careers-page__form label {
			display: grid;
			gap: 0.4rem;
			color: var(--color-text);
			font-weight: 700;
		}

		.careers-page__form input,
		.careers-page__form textarea {
			width: 100%;
			padding: 0.85rem 0.9rem;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: var(--color-bg);
			color: var(--color-text);
			font: inherit;
		}

		.careers-page__form input:focus,
		.careers-page__form textarea:focus {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}

		.careers-page__form textarea {
			min-height: 130px;
			resize: vertical;
		}

		.careers-page__form small {
			color: var(--color-muted);
			font-weight: 400;
		}

		.careers-page__form .careers-page__button {
			justify-self: start;
		}

		@media (max-width: 860px) {
			.careers-page__hero,
			.careers-page__about {
				grid-template-columns: 1fr;
			}

			.careers-page__hero-media {
				max-width: 620px;
				margin: 1rem auto 0;
			}

			.careers-page__band-grid--four {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			.careers-page__band-grid--three,
			.careers-page__roles,
			.careers-page__culture,
			.careers-page__quotes {
				grid-template-columns: 1fr;
			}

			.careers-page__stat-number {
				font-size: 2.6rem;
			}
		}

		@media (max-width: 520px) {
			.careers-page__hero {
				padding-top: 3rem;
			}

			.careers-page h1 {
				font-size: clamp(2.7rem, 14vw, 4rem);
			}

			.careers-page__band-grid--four {
				gap: 1.5rem 0.75rem;
			}

			.careers-page__stat-caption {
				font-size: 0.72rem;
			}
		}

/* --- from games.html --- */
.games-page {
			background: var(--color-bg);
			color: var(--color-text);
			font-family: "Lato", sans-serif;
		}

		.games-page *,
		.games-page *::before,
		.games-page *::after {
			box-sizing: border-box;
		}

		.games-page a {
			color: inherit;
		}

		.games-shell {
			width: min(1200px, calc(100% - 48px));
			margin: 0 auto;
		}

		.games-hero {
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: clamp(2rem, 5vw, 4.5rem);
			align-items: center;
			min-height: 440px;
			padding: clamp(3rem, 7vw, 5rem) 0;
		}

		.games-hero__eyebrow,
		.games-section__eyebrow {
			margin-bottom: 1rem;
			color: var(--color-primary);
			font-size: 0.78rem;
			font-weight: 700;
			letter-spacing: 0.16em;
			text-transform: uppercase;
		}

		.games-hero h1 {
			max-width: 11ch;
			margin: 0 0 1.25rem;
			font-size: clamp(2.7rem, 6vw, 5.4rem);
			line-height: 0.98;
			letter-spacing: -0.055em;
		}

		.games-hero__copy {
			max-width: 56ch;
			color: var(--color-muted);
			font-size: clamp(1.05rem, 2vw, 1.3rem);
		}

		.games-hero__actions {
			display: flex;
			flex-wrap: wrap;
			gap: 0.9rem;
			margin-top: 2rem;
		}

		.games-button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 48px;
			padding: 0.8rem 1.35rem;
			border: 1px solid transparent;
			border-radius: 12px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			font-weight: 700;
			text-decoration: none;
			transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
		}

		.games-button:hover,
		.games-button:focus-visible {
			border-color: var(--color-primary);
			box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
			transform: translateY(-2px);
		}

		.games-button--quiet {
			background: transparent;
			border-color: var(--color-border);
			color: var(--color-text);
		}

		.games-hero__visual {
			position: relative;
			margin: 0;
			transform: rotate(2deg);
		}

		.games-hero__visual::before {
			position: absolute;
			z-index: 0;
			top: 1rem;
			right: -1rem;
			bottom: -1rem;
			left: 1rem;
			border-radius: 12px;
			background: var(--color-secondary);
			content: "";
		}

		.games-hero__visual img {
			position: relative;
			z-index: 1;
			display: block;
			width: 100%;
			height: auto;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			object-fit: cover;
		}

		.games-band {
			display: grid;
			width: 100%;
			gap: 2rem;
			justify-items: center;
			padding: clamp(3rem, 6vw, 5rem) 24px;
			text-align: center;
		}

		.games-band--primary {
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		.games-band--secondary {
			background: var(--color-secondary);
			color: var(--color-on-secondary);
		}

		.games-band--four {
			grid-template-columns: repeat(4, 1fr);
		}

		.games-band--three {
			grid-template-columns: repeat(3, 1fr);
		}

		.games-stat {
			display: flex;
			height: auto;
			max-width: 22ch;
			flex-direction: column;
			gap: 0.7rem;
		}

		.games-stat__number {
			font-size: clamp(2.8rem, 5.5vw, 4.8rem);
			font-weight: 800;
			line-height: 1;
			letter-spacing: -0.06em;
		}

		.games-stat__caption {
			font-size: 0.82rem;
			letter-spacing: 0.09em;
			text-transform: uppercase;
		}

		.games-projects {
			padding: clamp(3.5rem, 7vw, 6rem) 0;
		}

		.games-section-heading {
			display: flex;
			align-items: end;
			justify-content: space-between;
			gap: 2rem;
			margin-bottom: 2rem;
		}

		.games-section-heading h2,
		.games-about h2,
		.games-contact h2 {
			margin: 0;
			font-size: clamp(2rem, 4vw, 3.4rem);
			line-height: 1.05;
			letter-spacing: -0.04em;
		}

		.games-section-heading p {
			max-width: 38ch;
			margin: 0;
			color: var(--color-muted);
		}

		.games-project-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-rows: minmax(220px, auto);
			gap: 1.5rem;
		}

		.games-project-card {
			display: flex;
			min-height: 220px;
			height: auto;
			flex-direction: column;
			justify-content: space-between;
			padding: 1.7rem;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
			transition: border-color 180ms ease, transform 180ms ease;
		}

		.games-project-card:hover {
			border-color: var(--color-accent);
			transform: translateY(-4px);
		}

		.games-project-card--wide {
			grid-column: span 2;
		}

		.games-project-card__top {
			display: flex;
			align-items: start;
			justify-content: space-between;
			gap: 1rem;
		}

		.games-project-card h3 {
			margin: 0;
			font-size: 1.45rem;
		}

		.games-project-card__mark {
			color: var(--color-primary);
			font-size: 1.8rem;
			line-height: 1;
		}

		.games-project-card p {
			margin: 1rem 0 1.4rem;
			color: var(--color-muted);
		}

		.games-badges {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			margin-top: auto;
		}

		.games-badge {
			padding: 0.35rem 0.65rem;
			border: 1px solid var(--color-border);
			border-radius: 999px;
			color: var(--color-muted);
			font-size: 0.76rem;
			font-weight: 700;
		}

		.games-tech {
			padding: clamp(3.5rem, 7vw, 6rem) 0;
		}

		.games-tech__grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1.5rem;
			margin-top: 2rem;
		}

		.games-tech__tile {
			padding: 1.6rem;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
			transition: border-color 180ms ease;
		}

		.games-tech__tile:hover {
			border-color: var(--color-accent);
		}

		.games-tech__tile span {
			display: block;
			margin-bottom: 1rem;
			color: var(--color-primary);
			font-size: 2rem;
		}

		.games-tech__tile h3 {
			margin: 0 0 0.55rem;
			font-size: 1.2rem;
		}

		.games-tech__tile p {
			margin: 0;
			color: var(--color-muted);
		}

		.games-about {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: clamp(2.5rem, 7vw, 6rem);
			padding: clamp(3.5rem, 7vw, 6rem) 0;
		}

		.games-about__tall p {
			max-width: 65ch;
			margin: 1.35rem 0 0;
			color: var(--color-muted);
			font-size: 1.05rem;
		}

		.games-mini-stats {
			display: grid;
			align-content: start;
			gap: 1rem;
		}

		.games-mini-stat {
			padding: 1.2rem 0;
			border-bottom: 1px solid var(--color-border);
		}

		.games-mini-stat strong {
			display: block;
			color: var(--color-primary);
			font-size: 2rem;
			line-height: 1;
		}

		.games-mini-stat span {
			display: block;
			margin-top: 0.4rem;
			color: var(--color-muted);
		}

		.games-quotes {
			padding: 0 0 clamp(3.5rem, 7vw, 6rem);
		}

		.games-quotes__grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem;
			margin-top: 2rem;
		}

		.games-quote {
			margin: 0;
			padding: 1.6rem;
			border-left: 4px solid var(--color-accent);
			border-radius: 0 12px 12px 0;
			background: var(--color-surface);
			color: var(--color-text);
		}

		.games-quote p {
			margin: 0;
			font-size: 1.05rem;
		}

		.games-quote cite {
			display: block;
			margin-top: 1rem;
			color: var(--color-muted);
			font-size: 0.9rem;
			font-style: normal;
			font-weight: 700;
		}

		.games-contact {
			padding: clamp(3.5rem, 7vw, 6rem) 24px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			text-align: center;
		}

		.games-contact h2 {
			max-width: 16ch;
			margin: 0 auto 1rem;
		}

		.games-contact p {
			max-width: 42ch;
			margin: 0 auto;
		}

		.games-contact .games-button {
			margin-top: 1.7rem;
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		@media (max-width: 860px) {
			.games-shell {
				width: min(100% - 32px, 680px);
			}

			.games-hero {
				grid-template-columns: 1fr;
				min-height: auto;
				padding: 3rem 0 4rem;
			}

			.games-hero h1 {
				max-width: 12ch;
				font-size: clamp(2.7rem, 12vw, 4.5rem);
			}

			.games-hero__visual {
				display: none;
			}

			.games-band--four {
				grid-template-columns: repeat(2, 1fr);
			}

			.games-band--three,
			.games-project-grid,
			.games-tech__grid,
			.games-about,
			.games-quotes__grid {
				grid-template-columns: 1fr;
			}

			.games-project-card--wide {
				grid-column: auto;
			}

			.games-section-heading {
				display: block;
			}

			.games-section-heading p {
				margin-top: 1rem;
			}

			.games-stat__number {
				font-size: 2.6rem;
			}
		}

		@media (max-width: 480px) {
			.games-band {
				gap: 1.6rem;
				padding-right: 16px;
				padding-left: 16px;
			}

			.games-band--four {
				grid-template-columns: 1fr 1fr;
			}

			.games-stat__caption {
				font-size: 0.7rem;
			}

			.games-hero__actions {
				align-items: stretch;
				flex-direction: column;
			}

			.games-button {
				width: 100%;
			}
		}

/* --- from privacy-policy.html --- */
.privacy-page {
			background: var(--color-bg);
			color: var(--color-text);
		}

		.privacy-page *,
		.privacy-page *::before,
		.privacy-page *::after {
			box-sizing: border-box;
		}

		.privacy-page h1,
		.privacy-page h2,
		.privacy-page h3 {
			line-height: 1.12;
			font-weight: 700;
			letter-spacing: -0.025em;
		}

		.privacy-page p,
		.privacy-page li {
			color: var(--color-muted);
		}

		.privacy-page a {
			color: var(--color-primary);
		}

		.privacy-page__hero {
			max-width: 1200px;
			margin: 0 auto;
			padding: 64px 24px 72px;
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: 48px;
			align-items: center;
		}

		.privacy-page__eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 18px;
			color: var(--color-primary);
			font-size: 0.82rem;
			font-weight: 700;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}

		.privacy-page__hero h1 {
			max-width: 10ch;
			margin-bottom: 20px;
			font-size: clamp(3rem, 7vw, 5.8rem);
		}

		.privacy-page__hero-copy {
			max-width: 54ch;
			margin-bottom: 28px;
			font-size: 1.08rem;
		}

		.privacy-page__hero-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			align-items: center;
		}

		.privacy-page__button {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 12px 18px;
			border: 1px solid var(--color-accent);
			border-radius: 12px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			font-weight: 700;
			text-decoration: none;
			transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
		}

		.privacy-page__button:hover {
			border-color: var(--color-primary);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
			transform: translateY(-2px);
		}

		.privacy-page__hero-note {
			font-size: 0.9rem;
		}

		.privacy-page__hero-figure {
			position: relative;
			margin: 0;
			padding: 12px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
			transform: rotate(2deg);
		}

		.privacy-page__hero-figure::after {
			position: absolute;
			right: 22px;
			bottom: -16px;
			width: 72px;
			height: 72px;
			border-radius: 50%;
			background: var(--color-secondary);
			content: "";
			opacity: 0.45;
			z-index: 0;
		}

		.privacy-page__hero-figure img {
			position: relative;
			z-index: 1;
			display: block;
			width: 100%;
			height: auto;
			border-radius: 12px;
		}

		.privacy-page__band {
			width: 100%;
			padding: clamp(48px, 6vw, 80px) 24px;
			display: grid;
			gap: 32px;
			justify-items: center;
			text-align: center;
		}

		.privacy-page__band--primary {
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		.privacy-page__band--secondary {
			background: var(--color-secondary);
			color: var(--color-on-secondary);
		}

		.privacy-page__band--four {
			grid-template-columns: repeat(4, 1fr);
		}

		.privacy-page__band--three {
			grid-template-columns: repeat(3, 1fr);
		}

		.privacy-page__stat {
			display: flex;
			flex-direction: column;
			gap: 10px;
			max-width: 22ch;
		}

		.privacy-page__number {
			font-size: clamp(2.8rem, 5.5vw, 4rem);
			font-weight: 800;
			line-height: 1;
		}

		.privacy-page__caption {
			font-size: 0.9rem;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			opacity: 0.82;
		}

		.privacy-page__services {
			max-width: 1200px;
			margin: 0 auto;
			padding: 72px 24px;
		}

		.privacy-page__section-heading {
			max-width: 600px;
			margin-bottom: 28px;
		}

		.privacy-page__section-heading h2 {
			margin-bottom: 12px;
			font-size: clamp(2rem, 4vw, 3.25rem);
		}

		.privacy-page__section-heading p {
			font-size: 1.03rem;
		}

		.privacy-page__tile-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
			grid-auto-rows: minmax(180px, auto);
		}

		.privacy-page__tile {
			padding: 28px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
			color: var(--color-text);
			transition: border-color 180ms ease, transform 180ms ease;
		}

		.privacy-page__tile:hover {
			border-color: var(--color-accent);
			transform: translateY(-4px);
		}

		.privacy-page__tile .material-symbols-outlined {
			display: block;
			margin-bottom: 22px;
			color: var(--color-primary);
			font-size: 2rem;
		}

		.privacy-page__tile h3 {
			margin-bottom: 10px;
			font-size: 1.22rem;
		}

		.privacy-page__tile p {
			font-size: 0.95rem;
		}

		.privacy-page__about {
			max-width: 1200px;
			margin: 0 auto;
			padding: 80px 24px;
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 48px;
		}

		.privacy-page__tall h2 {
			margin-bottom: 20px;
			font-size: clamp(2rem, 4vw, 3.2rem);
		}

		.privacy-page__tall p + p {
			margin-top: 16px;
		}

		.privacy-page__rail {
			display: grid;
			align-content: start;
			gap: 14px;
		}

		.privacy-page__mini-stat {
			padding: 18px;
			border-left: 4px solid var(--color-accent);
			background: var(--color-surface);
			color: var(--color-text);
			border-radius: 0 12px 12px 0;
		}

		.privacy-page__mini-stat strong {
			display: block;
			margin-bottom: 4px;
			color: var(--color-primary);
			font-size: 1.4rem;
		}

		.privacy-page__mini-stat span {
			color: var(--color-muted);
			font-size: 0.9rem;
		}

		.privacy-page__quotes {
			max-width: 1200px;
			margin: 0 auto;
			padding: 56px 24px 72px;
		}

		.privacy-page__quote-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 18px;
		}

		.privacy-page__quote {
			margin: 0;
			padding: 24px;
			border-radius: 12px;
			background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
			color: var(--color-text);
		}

		.privacy-page__quote p {
			color: var(--color-text);
			font-size: 1.02rem;
		}

		.privacy-page__quote cite {
			display: block;
			margin-top: 18px;
			color: var(--color-primary);
			font-size: 0.82rem;
			font-style: normal;
			font-weight: 700;
			letter-spacing: 0.06em;
			text-transform: uppercase;
		}

		.privacy-page__document-wrap {
			padding: 72px 24px;
			background: var(--color-surface);
			color: var(--color-text);
		}

		.privacy-page__document {
			max-width: 820px;
			margin: 0 auto;
		}

		.privacy-page__document h2 {
			margin-bottom: 14px;
			font-size: clamp(2rem, 4vw, 3rem);
		}

		.privacy-page__document-intro {
			margin-bottom: 38px;
			font-size: 1.05rem;
		}

		.privacy-page__legal-section {
			padding: 26px 0;
			border-top: 1px solid var(--color-border);
		}

		.privacy-page__legal-section h3 {
			margin-bottom: 10px;
			font-size: 1.35rem;
		}

		.privacy-page__legal-section p + p {
			margin-top: 12px;
		}

		.privacy-page__legal-section ul {
			margin: 12px 0 0 20px;
		}

		.privacy-page__legal-section li + li {
			margin-top: 8px;
		}

		.privacy-page__contact {
			max-width: 760px;
			margin: 0 auto;
			padding: 72px 24px 84px;
			text-align: center;
		}

		.privacy-page__contact h2 {
			margin-bottom: 14px;
			font-size: clamp(2rem, 4vw, 3rem);
		}

		.privacy-page__contact p {
			margin: 0 auto 24px;
			max-width: 52ch;
		}

		.privacy-page__contact-details {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 12px 22px;
			margin-bottom: 26px;
		}

		.privacy-page__contact-details a {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			font-weight: 700;
		}

		@media (max-width: 860px) {
			.privacy-page__hero,
			.privacy-page__about {
				grid-template-columns: 1fr;
			}

			.privacy-page__band--four {
				grid-template-columns: repeat(2, 1fr);
			}

			.privacy-page__band--three,
			.privacy-page__tile-grid,
			.privacy-page__quote-grid {
				grid-template-columns: 1fr;
			}

			.privacy-page__hero {
				padding-top: 48px;
			}

			.privacy-page__hero-figure {
				max-width: 620px;
				width: 100%;
				justify-self: center;
			}

			.privacy-page__number {
				font-size: 2.6rem;
			}
		}

		@media (max-width: 520px) {
			.privacy-page__band--four {
				gap: 28px 12px;
			}

			.privacy-page__caption {
				font-size: 0.76rem;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			.privacy-page__button,
			.privacy-page__tile {
				transition: none;
			}
		}

/* --- from services.html --- */
.services-page {
			background: var(--color-bg);
			color: var(--color-text);
		}

		.services-page__hero {
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px clamp(3.75rem, 8vw, 6rem);
			display: grid;
			grid-template-columns: 1.08fr .92fr;
			gap: clamp(2rem, 6vw, 5rem);
			align-items: center;
		}

		.hero-copy__eyebrow {
			color: var(--color-primary);
			font-size: .78rem;
			font-weight: 700;
			letter-spacing: .14em;
			text-transform: uppercase;
			margin-bottom: 1rem;
		}

		.hero-copy h1 {
			max-width: 12ch;
			font-size: clamp(2.7rem, 6vw, 5.4rem);
			line-height: .98;
			letter-spacing: -.055em;
			margin-bottom: 1.35rem;
		}

		.hero-copy__lead {
			max-width: 48ch;
			color: var(--color-muted);
			font-size: clamp(1.05rem, 1.8vw, 1.25rem);
			margin-bottom: 1.75rem;
		}

		.hero-copy__button,
		.contact-form__button {
			display: inline-flex;
			align-items: center;
			gap: .55rem;
			padding: .85rem 1.2rem;
			border: 1px solid var(--color-accent);
			border-radius: 12px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			font-weight: 700;
			text-decoration: none;
			transition: transform .2s ease, box-shadow .2s ease;
		}

		.hero-copy__button:hover,
		.contact-form__button:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
		}

		.services-page__hero figure {
			position: relative;
			margin: 0;
		}

		.services-page__hero figure::after {
			content: "";
			position: absolute;
			inset: 14px -14px -14px 14px;
			border: 2px solid var(--color-secondary);
			border-radius: 12px;
			z-index: 0;
		}

		.services-page__hero img {
			position: relative;
			z-index: 1;
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 5 / 4;
			object-fit: cover;
			border-radius: 12px;
			box-shadow: 0 18px 38px rgba(19, 17, 15, .16);
		}

		.proof-band {
			width: 100%;
			padding: clamp(3.2rem, 6vw, 5rem) 24px;
			display: grid;
			gap: 32px;
			justify-items: center;
			text-align: center;
		}

		.proof-band--primary {
			background: var(--color-primary);
			color: var(--color-on-primary);
			grid-template-columns: repeat(4, 1fr);
		}

		.proof-band--secondary {
			background: var(--color-secondary);
			color: var(--color-on-secondary);
			grid-template-columns: repeat(3, 1fr);
		}

		.proof-band__stat {
			display: flex;
			flex-direction: column;
			gap: 10px;
			max-width: 22ch;
			height: auto;
		}

		.proof-band__number {
			font-size: clamp(2.8rem, 5.5vw, 4.4rem);
			font-weight: 800;
			line-height: 1;
			letter-spacing: -.05em;
		}

		.proof-band__caption {
			font-size: .82rem;
			font-weight: 700;
			letter-spacing: .08em;
			line-height: 1.35;
			text-transform: uppercase;
			opacity: .82;
		}

		.services-section {
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px;
		}

		.section-heading {
			max-width: 680px;
			margin-bottom: 2rem;
		}

		.section-heading h2,
		.collaboration h2,
		.contact-section h2 {
			font-size: clamp(2rem, 4vw, 3.25rem);
			line-height: 1.05;
			letter-spacing: -.04em;
			margin-bottom: .75rem;
		}

		.section-heading p {
			color: var(--color-muted);
			font-size: 1.05rem;
		}

		.services-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
			grid-auto-rows: minmax(180px, auto);
		}

		.service-tile {
			padding: 1.65rem;
			height: auto;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(140deg, var(--color-surface), var(--color-bg));
			color: var(--color-text);
			transition: border-color .2s ease, transform .2s ease;
		}

		.service-tile:hover {
			border-color: var(--color-accent);
			transform: translateY(-4px);
		}

		.service-tile__icon {
			display: block;
			color: var(--color-accent);
			font-size: 2.25rem;
			margin-bottom: 1.15rem;
		}

		.service-tile h3 {
			font-size: 1.25rem;
			line-height: 1.15;
			margin-bottom: .7rem;
		}

		.service-tile p {
			color: var(--color-muted);
			line-height: 1.6;
		}

		.collaboration {
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px;
			display: grid;
			grid-template-columns: .8fr 1.2fr;
			gap: clamp(2rem, 8vw, 7rem);
			align-items: start;
		}

		.collaboration__intro p {
			max-width: 32ch;
			color: var(--color-muted);
			font-size: 1.05rem;
		}

		.playbook {
			list-style: none;
			display: grid;
			gap: 1.25rem;
			counter-reset: playbook;
		}

		.playbook li {
			counter-increment: playbook;
			display: grid;
			grid-template-columns: 3.2rem 1fr;
			gap: 1rem;
			align-items: start;
			padding-bottom: 1.25rem;
			border-bottom: 1px solid var(--color-border);
		}

		.playbook li::before {
			content: counter(playbook, decimal-leading-zero);
			color: var(--color-primary);
			font-size: 1.5rem;
			font-weight: 800;
			line-height: 1;
		}

		.playbook h3 {
			font-size: 1.15rem;
			margin-bottom: .3rem;
		}

		.playbook p {
			color: var(--color-muted);
			line-height: 1.55;
		}

		.tools-section {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px clamp(3.5rem, 7vw, 5.5rem);
		}

		.tools-section__header {
			display: flex;
			align-items: end;
			justify-content: space-between;
			gap: 2rem;
			margin-bottom: 1.75rem;
		}

		.tools-section__header p {
			max-width: 38ch;
			color: var(--color-muted);
		}

		.tools-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 14px;
		}

		.tool-badge {
			display: flex;
			align-items: center;
			gap: .8rem;
			padding: 1rem 1.1rem;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(120deg, var(--color-surface), var(--color-bg));
			color: var(--color-text);
			font-weight: 700;
		}

		.tool-badge span {
			color: var(--color-secondary);
			font-size: 1.6rem;
		}

		.about-section {
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px;
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: clamp(2rem, 7vw, 6rem);
		}

		.about-section__tall h2 {
			max-width: 12ch;
			font-size: clamp(2rem, 4vw, 3.2rem);
			line-height: 1.05;
			letter-spacing: -.04em;
			margin-bottom: 1.4rem;
		}

		.about-section__tall p {
			max-width: 62ch;
			color: var(--color-muted);
			font-size: 1.05rem;
			margin-bottom: 1rem;
		}

		.mini-stats {
			display: grid;
			align-content: start;
			gap: 1rem;
		}

		.mini-stats__item {
			padding: 1.15rem 0;
			border-top: 3px solid var(--color-primary);
		}

		.mini-stats strong {
			display: block;
			font-size: 1.8rem;
			line-height: 1;
			margin-bottom: .35rem;
		}

		.mini-stats span {
			color: var(--color-muted);
			font-size: .9rem;
		}

		.quotes-section {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px clamp(3.5rem, 7vw, 5.5rem);
		}

		.quotes-section__heading {
			margin-bottom: 1.5rem;
		}

		.quotes-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24px;
		}

		.quote-card {
			padding: 1.6rem;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(140deg, var(--color-surface), var(--color-bg));
			transition: border-color .2s ease;
		}

		.quote-card:hover {
			border-color: var(--color-accent);
		}

		.quote-card blockquote {
			color: var(--color-text);
			font-size: 1.08rem;
			line-height: 1.6;
			margin-bottom: 1rem;
		}

		.quote-card figcaption {
			color: var(--color-muted);
			font-size: .9rem;
			font-weight: 700;
		}

		.contact-section {
			padding: clamp(3.5rem, 7vw, 5.5rem) 24px;
			background: var(--color-surface);
			color: var(--color-text);
		}

		.contact-section__inner {
			max-width: 720px;
			margin: 0 auto;
			text-align: center;
		}

		.contact-section h2 {
			margin-bottom: .8rem;
		}

		.contact-section__intro {
			color: var(--color-muted);
			margin-bottom: 2rem;
		}

		.contact-form {
			display: grid;
			gap: 1rem;
			text-align: left;
		}

		.contact-form label {
			font-weight: 700;
		}

		.contact-form input,
		.contact-form textarea {
			width: 100%;
			margin-top: .4rem;
			padding: .9rem 1rem;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: var(--color-bg);
			color: var(--color-text);
			font: inherit;
		}

		.contact-form textarea {
			min-height: 130px;
			resize: vertical;
		}

		.contact-form input:focus,
		.contact-form textarea:focus {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}

		.contact-form__button {
			justify-self: start;
			margin-top: .35rem;
		}

		.contact-section__details {
			color: var(--color-muted);
			font-size: .9rem;
			margin-top: 1.3rem;
		}

		@media (max-width: 860px) {
			.services-page__hero,
			.collaboration,
			.about-section {
				grid-template-columns: 1fr;
			}

			.services-page__hero {
				padding-top: 3.5rem;
			}

			.services-page__hero figure {
				max-width: 620px;
			}

			.proof-band--primary {
				grid-template-columns: repeat(2, 1fr);
			}

			.proof-band--secondary,
			.services-grid {
				grid-template-columns: 1fr;
			}

			.tools-section__header {
				display: block;
			}

			.tools-section__header p {
				margin-top: .8rem;
			}
		}

		@media (max-width: 560px) {
			.services-page__hero,
			.services-section,
			.collaboration,
			.tools-section,
			.about-section,
			.quotes-section {
				padding-left: 18px;
				padding-right: 18px;
			}

			.proof-band {
				padding-left: 18px;
				padding-right: 18px;
				gap: 25px 12px;
			}

			.proof-band--primary {
				grid-template-columns: repeat(2, 1fr);
			}

			.proof-band--secondary,
			.quotes-grid,
			.tools-grid {
				grid-template-columns: 1fr;
			}

			.proof-band__number {
				font-size: 2.4rem;
			}

			.hero-copy h1 {
				font-size: clamp(2.7rem, 13vw, 4rem);
			}
		}

/* --- from terms-and-conditions.html --- */
.terms-page {
			background: var(--color-bg);
			color: var(--color-text);
			font-family: "Lato", sans-serif;
		}

		.terms-page__hero {
			max-width: 1200px;
			margin: 0 auto;
			padding: 64px 24px 72px;
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: 48px;
			align-items: center;
		}

		.terms-page__eyebrow {
			margin-bottom: 14px;
			color: var(--color-primary);
			font-size: 0.82rem;
			font-weight: 700;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}

		.terms-page h1,
		.terms-page h2,
		.terms-page h3 {
			font-weight: 700;
			line-height: 1.12;
		}

		.terms-page h1 {
			max-width: 12ch;
			margin-bottom: 22px;
			font-size: clamp(2.7rem, 6vw, 5rem);
			letter-spacing: -0.055em;
		}

		.terms-page h2 {
			margin-bottom: 16px;
			font-size: clamp(2rem, 4vw, 3.1rem);
			letter-spacing: -0.035em;
		}

		.terms-page h3 {
			margin-bottom: 10px;
			font-size: 1.25rem;
		}

		.terms-page p {
			color: var(--color-muted);
			line-height: 1.75;
		}

		.terms-page__intro {
			max-width: 58ch;
			margin-bottom: 28px;
			font-size: 1.12rem;
		}

		.terms-page__hero-link,
		.terms-page__contact-button {
			display: inline-flex;
			align-items: center;
			gap: 9px;
			padding: 12px 20px;
			border-radius: 12px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			font-weight: 700;
			text-decoration: none;
			transition: transform 0.2s ease, opacity 0.2s ease;
		}

		.terms-page__hero-link:hover,
		.terms-page__contact-button:hover {
			opacity: 0.9;
			transform: translateY(-2px);
		}

		.terms-page__hero-figure {
			position: relative;
			margin: 0;
			padding: 12px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
			transform: rotate(2deg);
		}

		.terms-page__hero-figure img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 12px;
			aspect-ratio: 4 / 3;
			object-fit: cover;
		}

		.terms-page__hero-figure figcaption {
			padding: 12px 6px 2px;
			color: var(--color-muted);
			font-size: 0.86rem;
			text-align: center;
		}

		.terms-page__band {
			width: 100%;
			padding: clamp(48px, 6vw, 80px) 24px;
			display: grid;
			gap: 32px;
			justify-items: center;
			text-align: center;
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		.terms-page__band--four {
			grid-template-columns: repeat(4, 1fr);
		}

		.terms-page__band--three {
			grid-template-columns: repeat(3, 1fr);
			background: var(--color-secondary);
			color: var(--color-on-secondary);
		}

		.terms-page__stat {
			display: flex;
			height: auto;
			max-width: 22ch;
			flex-direction: column;
			gap: 10px;
		}

		.terms-page__number {
			font-size: clamp(2.8rem, 5.5vw, 4rem);
			font-weight: 800;
			line-height: 1;
		}

		.terms-page__caption {
			font-size: 0.9rem;
			letter-spacing: 0.06em;
			text-transform: uppercase;
		}

		.terms-page__services {
			max-width: 1200px;
			margin: 0 auto;
			padding: 72px 24px;
		}

		.terms-page__section-lead {
			max-width: 62ch;
			margin-bottom: 32px;
		}

		.terms-page__tile-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-rows: minmax(180px, auto);
			gap: 24px;
		}

		.terms-page__tile {
			height: auto;
			padding: 28px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
			transition: border-color 0.2s ease, transform 0.2s ease;
		}

		.terms-page__tile:hover {
			border-color: var(--color-accent);
			transform: translateY(-4px);
		}

		.terms-page__tile .material-symbols-outlined {
			display: block;
			margin-bottom: 22px;
			color: var(--color-primary);
			font-size: 2rem;
		}

		.terms-page__about {
			max-width: 1200px;
			margin: 0 auto;
			padding: 80px 24px;
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 48px;
		}

		.terms-page__legal-copy {
			max-width: 70ch;
		}

		.terms-page__legal-copy section {
			margin-top: 34px;
		}

		.terms-page__legal-copy h3 {
			margin-bottom: 8px;
		}

		.terms-page__legal-copy p + p {
			margin-top: 12px;
		}

		.terms-page__rail {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.terms-page__rail-item {
			padding: 20px;
			border-left: 4px solid var(--color-accent);
			border-radius: 12px;
			background: var(--color-surface);
			color: var(--color-text);
		}

		.terms-page__rail-item strong {
			display: block;
			margin-bottom: 4px;
			color: var(--color-primary);
			font-size: 1.6rem;
		}

		.terms-page__notes {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 24px 72px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24px;
		}

		.terms-page__note {
			padding: 28px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(135deg, var(--color-bg), var(--color-surface));
		}

		.terms-page__note p {
			font-size: 1.04rem;
		}

		.terms-page__contact {
			padding: 64px 24px;
			background: var(--color-accent);
			color: var(--color-on-accent);
		}

		.terms-page__contact-inner {
			max-width: 700px;
			margin: 0 auto;
			text-align: center;
		}

		.terms-page__contact h2,
		.terms-page__contact p {
			color: var(--color-on-accent);
		}

		.terms-page__contact p {
			margin: 0 auto 24px;
			max-width: 58ch;
		}

		.terms-page__contact-details {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 16px 28px;
			margin-bottom: 26px;
			font-size: 0.95rem;
		}

		.terms-page__contact-details a {
			color: var(--color-on-accent);
			font-weight: 700;
		}

		.terms-page__contact-button {
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		@media (max-width: 860px) {
			.terms-page__hero,
			.terms-page__about {
				grid-template-columns: 1fr;
			}

			.terms-page__hero {
				padding-top: 48px;
			}

			.terms-page__hero-figure {
				max-width: 600px;
				margin: 0 auto;
			}

			.terms-page__band--four {
				grid-template-columns: repeat(2, 1fr);
			}

			.terms-page__band--three,
			.terms-page__tile-grid,
			.terms-page__notes {
				grid-template-columns: 1fr;
			}

			.terms-page__number {
				font-size: 2.6rem;
			}
		}

		@media (max-width: 520px) {
			.terms-page__band--four {
				grid-template-columns: 1fr 1fr;
				gap: 28px 12px;
			}

			.terms-page__stat {
				max-width: 16ch;
			}

			.terms-page__caption {
				font-size: 0.76rem;
			}
		}

/* --- from index.php --- */
.home {
			background: var(--color-bg);
			color: var(--color-text);
		}

		.home__container {
			width: min(1200px, calc(100% - 48px));
			margin: 0 auto;
		}

		.home__hero {
			display: grid;
			grid-template-columns: 1.1fr 0.9fr;
			gap: 48px;
			align-items: center;
			max-width: 1200px;
			margin: 0 auto;
			padding: clamp(56px, 8vw, 88px) 24px clamp(52px, 7vw, 76px);
		}

		.home__eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 18px;
			color: var(--color-primary);
			font-size: 0.78rem;
			font-weight: 700;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}

		.home__eyebrow .material-symbols-outlined {
			font-size: 1.2rem;
		}

		.home__hero h1 {
			max-width: 11ch;
			margin-bottom: 22px;
			font-size: clamp(2.8rem, 6vw, 5.8rem);
			line-height: 0.98;
			letter-spacing: -0.055em;
		}

		.home__hero-copy {
			max-width: 54ch;
			margin-bottom: 30px;
			color: var(--color-muted);
			font-size: clamp(1rem, 1.5vw, 1.2rem);
		}

		.home__hero-actions {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 16px;
		}

		.home__button {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
			padding: 13px 20px;
			border: 1px solid var(--color-accent);
			border-radius: 12px;
			background: var(--color-accent);
			color: var(--color-on-accent);
			font-weight: 700;
			text-decoration: none;
			transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
		}

		.home__button:hover {
			border-color: var(--color-primary);
			box-shadow: 0 8px 20px rgba(85, 134, 175, 0.22);
			transform: translateY(-2px);
		}

		.home__button--quiet {
			border-color: transparent;
			background: transparent;
			color: var(--color-primary);
		}

		.home__hero-figure {
			position: relative;
			margin: 0;
			padding: 14px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
			transform: rotate(2deg);
		}

		.home__hero-figure::after {
			position: absolute;
			right: -16px;
			bottom: 20px;
			width: 72px;
			height: 72px;
			border-radius: 50%;
			background: var(--color-secondary);
			content: "";
			opacity: 0.55;
			z-index: 0;
		}

		.home__hero-figure img {
			position: relative;
			z-index: 1;
			display: block;
			width: 100%;
			height: auto;
			border-radius: 12px;
		}

		.home__band {
			width: 100%;
			padding: clamp(48px, 6vw, 80px) 24px;
			background: var(--color-primary);
			color: var(--color-on-primary);
		}

		.home__band--secondary {
			background: var(--color-secondary);
			color: var(--color-on-secondary);
		}

		.home__band-grid {
			display: grid;
			gap: 32px;
			justify-items: center;
			max-width: 1200px;
			margin: 0 auto;
			text-align: center;
		}

		.home__band-grid--four {
			grid-template-columns: repeat(4, 1fr);
		}

		.home__band-grid--three {
			grid-template-columns: repeat(3, 1fr);
		}

		.home__stat {
			display: flex;
			flex-direction: column;
			gap: 10px;
			max-width: 22ch;
		}

		.home__stat-number {
			font-size: clamp(2.8rem, 5.5vw, 4.8rem);
			font-weight: 800;
			line-height: 1;
			letter-spacing: -0.06em;
		}

		.home__stat-caption {
			font-size: 0.84rem;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			opacity: 0.82;
		}

		.home__services {
			padding: clamp(64px, 8vw, 96px) 0;
		}

		.home__section-heading {
			max-width: 680px;
			margin-bottom: 36px;
		}

		.home__section-heading h2,
		.home__about h2,
		.home__quotes h2,
		.home__contact h2 {
			margin-bottom: 14px;
			font-size: clamp(2rem, 4vw, 3.4rem);
			line-height: 1.05;
			letter-spacing: -0.04em;
		}

		.home__section-heading p,
		.home__contact-intro {
			color: var(--color-muted);
		}

		.home__service-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-rows: minmax(180px, auto);
			gap: 24px;
		}

		.home__service-tile {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 180px;
			padding: 28px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(145deg, var(--color-surface), var(--color-bg));
			color: var(--color-text);
			transition: border-color 0.2s ease, transform 0.2s ease;
		}

		.home__service-tile:hover {
			border-color: var(--color-accent);
			transform: translateY(-4px);
		}

		.home__service-icon {
			display: block;
			margin-bottom: 26px;
			color: var(--color-primary);
			font-size: 2rem;
		}

		.home__service-tile h3 {
			margin-bottom: 9px;
			font-size: 1.25rem;
		}

		.home__service-tile p {
			color: var(--color-muted);
			font-size: 0.96rem;
		}

		.home__about {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 48px;
			padding: clamp(64px, 8vw, 96px) 0;
		}

		.home__about-tall {
			padding-right: 8%;
		}

		.home__about-tall p {
			max-width: 64ch;
			margin-top: 20px;
			color: var(--color-muted);
			font-size: 1.08rem;
		}

		.home__mini-stats {
			display: flex;
			flex-direction: column;
			gap: 18px;
			align-self: center;
		}

		.home__mini-stat {
			padding: 20px;
			border-left: 4px solid var(--color-primary);
			border-radius: 0 12px 12px 0;
			background: var(--color-surface);
			color: var(--color-text);
		}

		.home__mini-stat strong {
			display: block;
			margin-bottom: 4px;
			color: var(--color-primary);
			font-size: 1.5rem;
		}

		.home__mini-stat span {
			color: var(--color-muted);
			font-size: 0.92rem;
		}

		.home__quotes {
			padding: clamp(64px, 8vw, 96px) 0;
			background: var(--color-surface);
			color: var(--color-text);
		}

		.home__quote-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
		}

		.home__quote {
			margin: 0;
			padding: 26px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: linear-gradient(145deg, var(--color-bg), var(--color-surface));
			color: var(--color-text);
		}

		.home__quote-mark {
			display: block;
			margin-bottom: 15px;
			color: var(--color-secondary);
			font-size: 2rem;
			line-height: 1;
		}

		.home__quote p {
			margin-bottom: 20px;
			color: var(--color-muted);
			font-size: 1rem;
		}

		.home__quote cite {
			color: var(--color-text);
			font-size: 0.86rem;
			font-style: normal;
			font-weight: 700;
		}

		.home__contact {
			padding: clamp(64px, 8vw, 96px) 0;
			text-align: center;
		}

		.home__contact-inner {
			max-width: 720px;
			margin: 0 auto;
		}

		.home__contact-intro {
			margin: 0 auto 30px;
			max-width: 52ch;
		}

		.home__form {
			display: grid;
			gap: 16px;
			text-align: left;
		}

		.home__field {
			display: grid;
			gap: 7px;
		}

		.home__field label {
			font-size: 0.9rem;
			font-weight: 700;
		}

		.home__field input,
		.home__field textarea {
			width: 100%;
			padding: 13px 15px;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			background: var(--color-surface);
			color: var(--color-text);
			font: inherit;
		}

		.home__field input:focus,
		.home__field textarea:focus {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}

		.home__field textarea {
			min-height: 150px;
			resize: vertical;
		}

		.home__form .home__button {
			justify-self: center;
			margin-top: 8px;
			padding-inline: 28px;
		}

		.home__honeypot {
			position: absolute;
			left: -9999px;
			width: 1px;
			height: 1px;
		}

		@media (max-width: 860px) {
			.home__hero,
			.home__about {
				grid-template-columns: 1fr;
			}

			.home__hero h1 {
				max-width: 13ch;
				font-size: clamp(2.7rem, 12vw, 4.3rem);
			}

			.home__hero-actions {
				justify-content: center;
			}

			.home__hero-figure {
				max-width: 620px;
				margin: 0 auto;
			}

			.home__band-grid--four {
				grid-template-columns: repeat(2, 1fr);
			}

			.home__band-grid--three,
			.home__service-grid,
			.home__quote-list {
				grid-template-columns: 1fr;
			}

			.home__stat-number {
				font-size: 2.6rem;
			}

			.home__about-tall {
				padding-right: 0;
			}
		}

		@media (max-width: 520px) {
			.home__container,
			.home__hero {
				width: min(100% - 32px, 1200px);
			}

			.home__hero {
				padding-right: 0;
				padding-left: 0;
			}

			.home__band {
				padding-right: 16px;
				padding-left: 16px;
			}

			.home__service-tile,
			.home__quote {
				padding: 24px;
			}
		}