/* --- from about.html --- */
:root {
      --site-bg: #FFF8F6;
      --site-surface: #FFEBE5;
      --site-text: #15100F;
      --site-muted: #443733;
      --site-border: #F1D8D0;
      --site-primary: #C64922;
      --site-on-primary: #FFFFFF;
      --site-secondary: #729CAA;
      --site-on-secondary: #000000;
      --site-accent: #8AA7C6;
      --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);
      --header-bg: #1D0502;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --site-bg: #1D0502;
        --site-surface: #2C1008;
        --site-text: #E8E3E2;
        --site-muted: #BFACA7;
        --site-border: #3D2821;
        --site-primary: #EE9F88;
        --site-on-primary: #000000;
        --site-secondary: #8FB9C8;
        --site-on-secondary: #000000;
        --site-accent: #9CB6D3;
        --site-on-accent: #000000;
      }
    }
    :root {
      --bs-primary: var(--site-primary);
      --bs-secondary: var(--site-secondary);
      --bs-success: var(--site-success);
      --bs-info: var(--site-info);
      --bs-warning: var(--site-warning);
      --bs-danger: var(--site-error);
      --bs-body-bg: var(--site-bg);
      --bs-body-color: var(--site-text);
      --bs-border-color: var(--site-border);
      --bs-secondary-color: var(--site-muted);
      --bs-tertiary-bg: var(--site-surface);
    }
    body {
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      margin: 0;
      background-color: var(--site-bg);
      color: var(--site-text);
    }
    .navbar {
      background-color: var(--header-bg) !important;
    }
    .navbar-dark .navbar-nav .nav-link {
      color: rgba(255,255,255,0.85);
    }
    .navbar-dark .navbar-nav .nav-link:hover,
    .navbar-dark .navbar-nav .nav-link.active {
      color: #fff;
    }
    .navbar-brand {
      font-weight: 700;
      font-size: 1.5rem;
      color: #fff !important;
    }
    .navbar-toggler {
      border: none;
      color: #fff;
    }
    .navbar-toggler i {
      color: #fff;
    }
    .btn-pill {
      border-radius: 50px;
      padding: 0.5rem 1.75rem;
    }
    .gradient-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
      color: #fff;
      font-size: 1.5rem;
    }
    .band-a {
      background-color: var(--site-secondary);
      color: #fff;
    }
    .band-b {
      background-color: var(--site-bg);
      color: var(--site-text);
    }
    .band-c {
      background-color: var(--site-primary);
      color: #fff;
    }
    .band {
      width: 100%;
      padding: clamp(64px,7vw,112px) 0;
    }
    .band > .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .grid3 {
      display: grid;
      gap: 28px;
      grid-template-columns: repeat(3,1fr);
      grid-auto-rows: minmax(180px,auto);
    }
    .split {
      display: grid;
      gap: 40px;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: start;
    }
    .tile {
      padding: 32px;
      height: auto;
      border-radius: 14px;
      background: rgba(127,127,127,0.10);
      border-left: 4px solid var(--site-primary);
    }
    @media(max-width:820px) {
      .grid3, .split {
        grid-template-columns: 1fr;
      }
      .band {
        padding: 56px 0;
      }
    }

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

    .band {
      width: 100%;
      padding: clamp(6rem, 8vw, 7rem) 0;
    }

    .band > .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .bandA {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .bandB {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

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

    .heroSplit,
    .aboutSplit,
    .surveySplit,
    .contactSplit {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: clamp(2.5rem, 6vw, 5.5rem);
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      margin-bottom: 1.25rem;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .bandC .eyebrow {
      color: var(--color-on-primary);
      opacity: 0.82;
    }

    .heroTitle {
      max-width: 680px;
      margin: 0 0 1.5rem;
      font-size: clamp(2.7rem, 6vw, 5.5rem);
      font-weight: 700;
      line-height: 0.98;
      letter-spacing: -0.055em;
    }

    .sectionTitle {
      margin: 0 0 1rem;
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.04em;
    }

    .leadCopy {
      max-width: 610px;
      margin-bottom: 2rem;
      color: var(--color-muted);
      font-size: 1.12rem;
      font-weight: 300;
      line-height: 1.75;
    }

    .bandC .leadCopy,
    .bandC .sectionIntro,
    .bandC .cardCopy {
      color: var(--color-on-primary);
      opacity: 0.88;
    }

    .pillButton {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.85rem 1.5rem;
      border: 0;
      border-radius: 999px;
      background-color: var(--color-primary);
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: transform 180ms ease, filter 180ms ease;
    }

    .pillButton:hover {
      color: var(--color-on-primary);
      filter: brightness(1.08);
      transform: translateY(-2px);
    }

    .bandC .pillButton {
      background-color: var(--color-on-primary);
      color: var(--color-primary);
    }

    .heroImageFrame,
    .studioImageFrame {
      position: relative;
      border-radius: 24px;
      box-shadow: 0 22px 50px rgba(21, 16, 15, 0.16);
    }

    .heroImageFrame {
      transform: rotate(2deg);
    }

    .heroImageFrame img,
    .studioImageFrame img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 24px;
      object-fit: cover;
    }

    .heroImageFrame::after {
      position: absolute;
      right: -18px;
      bottom: -18px;
      z-index: -1;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      content: '';
    }

    .sectionHeader {
      max-width: 650px;
      margin-bottom: 2.75rem;
    }

    .sectionIntro {
      margin: 0;
      color: var(--color-muted);
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.7;
    }

    .cardGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

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

    .softCard {
      height: auto;
      padding: 2rem;
      border-left: 4px solid var(--color-accent);
      border-radius: 24px;
      background-color: color-mix(in srgb, var(--color-bg) 68%, transparent);
      color: var(--color-text);
      box-shadow: 0 12px 30px rgba(21, 16, 15, 0.08);
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .bandC .softCard {
      background-color: color-mix(in srgb, var(--color-on-primary) 13%, transparent);
      color: var(--color-on-primary);
      box-shadow: 0 12px 30px rgba(21, 16, 15, 0.12);
    }

    .softCard:hover {
      background-color: color-mix(in srgb, var(--color-surface) 86%, var(--color-primary));
      transform: translateY(-4px);
    }

    .bandC .softCard:hover {
      background-color: color-mix(in srgb, var(--color-on-primary) 22%, transparent);
    }

    .iconCircle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3.25rem;
      height: 3.25rem;
      margin-bottom: 1.35rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: var(--color-on-primary);
      font-size: 1.45rem;
    }

    .bandC .iconCircle {
      background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
      color: var(--color-on-secondary);
    }

    .cardTitle {
      margin-bottom: 0.7rem;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .cardCopy {
      margin: 0;
      color: var(--color-muted);
      font-size: 0.96rem;
      font-weight: 300;
      line-height: 1.65;
    }

    .timeline {
      display: grid;
      gap: 1rem;
      margin-top: 2.5rem;
    }

    .timelineItem {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 1.25rem;
      padding: 1.4rem 1.5rem;
      border-left: 4px solid var(--color-primary);
      border-radius: 0 24px 24px 0;
      background-color: color-mix(in srgb, var(--color-bg) 72%, transparent);
    }

    .timelineYear {
      color: var(--color-primary);
      font-weight: 700;
    }

    .timelineItem h3 {
      margin: 0 0 0.35rem;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .timelineItem p {
      margin: 0;
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.55;
    }

    .founderNote {
      margin: 2rem 0 0;
      padding: 1.5rem;
      border-radius: 24px;
      background-color: var(--color-primary);
      color: var(--color-on-primary);
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.55;
    }

    .teamGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .teamCard {
      overflow: hidden;
      height: auto;
      border-radius: 24px;
      background-color: color-mix(in srgb, var(--color-on-primary) 12%, transparent);
      color: var(--color-on-primary);
      box-shadow: 0 14px 32px rgba(21, 16, 15, 0.13);
    }

    .teamCard img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .teamBody {
      padding: 1.5rem;
      border-left: 4px solid var(--color-accent);
    }

    .teamBody h3 {
      margin: 0 0 0.25rem;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .teamRole {
      display: block;
      margin-bottom: 0.75rem;
      color: var(--color-on-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      opacity: 0.72;
      text-transform: uppercase;
    }

    .teamBody p {
      margin: 0;
      font-size: 0.94rem;
      font-weight: 300;
      line-height: 1.6;
      opacity: 0.88;
    }

    .surveySplit {
      align-items: start;
    }

    .surveyIntro {
      min-height: 390px;
    }

    .formCard {
      padding: clamp(1.5rem, 4vw, 2.5rem);
      border-radius: 24px;
      background-color: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 20px 45px rgba(21, 16, 15, 0.2);
    }

    .formCard label {
      display: block;
      margin-bottom: 0.4rem;
      color: var(--color-muted);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .formCard .form-control,
    .formCard .form-select {
      min-height: 48px;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .formCard textarea.form-control {
      min-height: 96px;
    }

    .formCard .form-control:focus,
    .formCard .form-select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 20%, transparent);
    }

    .valueList {
      display: grid;
      gap: 1rem;
    }

    .valueRow {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 1.25rem;
      align-items: center;
      padding: 1.25rem 1.5rem;
      border-radius: 24px;
      background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
    }

    .valueRow .iconCircle {
      margin: 0;
    }

    .valueRow h3 {
      margin: 0 0 0.3rem;
      font-size: 1.12rem;
      font-weight: 700;
    }

    .valueRow p {
      margin: 0;
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.5;
    }

    .studioCopy p {
      color: var(--color-muted);
      font-size: 1.06rem;
      font-weight: 300;
      line-height: 1.8;
    }

    .studioCopy p + p {
      margin-top: 1.25rem;
    }

    .statsRow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      text-align: center;
    }

    .statNumber {
      display: block;
      margin-bottom: 0.35rem;
      color: var(--color-primary);
      font-size: clamp(2.6rem, 5vw, 4.5rem);
      font-weight: 700;
      letter-spacing: -0.06em;
    }

    .statLabel {
      color: var(--color-muted);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .contactPanel {
      padding: 2rem;
      border-radius: 24px;
      background-color: color-mix(in srgb, var(--color-bg) 72%, transparent);
      color: var(--color-text);
    }

    .contactPanel h3 {
      margin-bottom: 1rem;
      font-size: 1.45rem;
      font-weight: 700;
    }

    .contactPanel p {
      margin-bottom: 1.25rem;
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.7;
    }

    .contactLink {
      display: flex;
      gap: 0.7rem;
      align-items: center;
      margin-bottom: 0.8rem;
      color: var(--color-text);
      font-weight: 700;
      text-decoration: none;
    }

    .contactLink:hover {
      color: var(--color-primary);
    }

    @media (max-width: 820px) {
      .heroSplit,
      .aboutSplit,
      .surveySplit,
      .contactSplit,
      .cardGrid,
      .teamGrid,
      .statsRow {
        grid-template-columns: 1fr;
      }

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

      .surveyIntro {
        min-height: auto;
      }

      .heroImageFrame {
        max-width: 620px;
        margin: 1rem auto 0;
      }

      .statsRow {
        gap: 2.25rem;
      }
    }

    @media (max-width: 520px) {
      .band {
        padding: 4.5rem 0;
      }

      .timelineItem {
        grid-template-columns: 1fr;
        gap: 0.4rem;
      }

      .valueRow {
        grid-template-columns: 56px 1fr;
        gap: 0.85rem;
        padding: 1rem;
      }
    }

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

    .careersPage .band {
      width: 100%;
      padding: clamp(72px, 8vw, 112px) 0;
    }

    .careersPage .bandWrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .careersPage .bandA {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .careersPage .bandB {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

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

    .careersPage .heroSplit,
    .careersPage .applicationSplit,
    .careersPage .studioSplit,
    .careersPage .contactSplit {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: clamp(32px, 6vw, 76px);
      align-items: center;
    }

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

    .careersPage .eyebrow i {
      font-size: 1.1rem;
    }

    .careersPage h1,
    .careersPage h2,
    .careersPage h3 {
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .careersPage h1 {
      max-width: 680px;
      margin: 0 0 24px;
      font-size: clamp(2.65rem, 6vw, 5.4rem);
      line-height: 0.98;
    }

    .careersPage h2 {
      margin: 0 0 18px;
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1.05;
    }

    .careersPage h3 {
      margin: 0 0 10px;
      font-size: 1.25rem;
    }

    .careersPage p {
      font-weight: 300;
      line-height: 1.7;
    }

    .careersPage .heroCopy {
      max-width: 620px;
      margin-bottom: 30px;
      color: var(--color-muted);
      font-size: 1.14rem;
    }

    .careersPage .heroActions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .careersPage .roundedButton {
      border-radius: 50px;
      padding: 13px 25px;
      font-weight: 700;
    }

    .careersPage .heroImageFrame,
    .careersPage .studioImageFrame {
      position: relative;
      border-radius: 24px;
      box-shadow: 0 20px 50px rgba(21, 16, 15, 0.16);
    }

    .careersPage .heroImageFrame {
      transform: rotate(2deg);
    }

    .careersPage .heroImageFrame img,
    .careersPage .studioImageFrame img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 24px;
      object-fit: cover;
    }

    .careersPage .heroImageFrame img {
      aspect-ratio: 4 / 3;
    }

    .careersPage .sectionIntro {
      max-width: 650px;
      margin-bottom: 42px;
    }

    .careersPage .sectionIntro p {
      max-width: 590px;
      color: var(--color-muted);
      margin-bottom: 0;
    }

    .careersPage .grid3,
    .careersPage .quoteGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .careersPage .perksGrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    .careersPage .softCard {
      height: auto;
      padding: 30px;
      border: 1px solid var(--color-border);
      border-left: 4px solid var(--color-accent);
      border-radius: 24px;
      background-color: color-mix(in srgb, var(--color-bg) 68%, var(--color-surface));
      color: var(--color-text);
      box-shadow: 0 12px 28px rgba(21, 16, 15, 0.07);
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .careersPage .bandC .softCard {
      background-color: color-mix(in srgb, var(--color-on-secondary) 12%, transparent);
      border-color: color-mix(in srgb, var(--color-on-secondary) 26%, transparent);
      color: var(--color-on-secondary);
      box-shadow: 0 12px 28px rgba(21, 16, 15, 0.1);
    }

    .careersPage .softCard:hover {
      background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
      transform: translateY(-4px);
    }

    .careersPage .bandC .softCard:hover {
      background-color: color-mix(in srgb, var(--color-on-secondary) 20%, transparent);
    }

    .careersPage .iconCircle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      margin-bottom: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: #fff;
      font-size: 1.55rem;
    }

    .careersPage .softCard p {
      margin: 0;
      color: var(--color-muted);
      font-size: 0.98rem;
    }

    .careersPage .bandC .softCard p,
    .careersPage .bandC .sectionIntro p {
      color: color-mix(in srgb, var(--color-on-secondary) 78%, transparent);
    }

    .careersPage .roleList {
      display: grid;
      gap: 16px;
      max-width: 900px;
    }

    .careersPage .roleItem {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 24px 28px;
      border: 1px solid var(--color-border);
      border-left: 4px solid var(--color-primary);
      border-radius: 24px;
      background-color: var(--color-bg);
      color: var(--color-text);
      box-shadow: 0 10px 24px rgba(21, 16, 15, 0.06);
    }

    .careersPage .roleMeta {
      display: flex;
      flex-wrap: wrap;
      gap: 9px 18px;
      margin-top: 7px;
      color: var(--color-muted);
      font-size: 0.92rem;
      font-weight: 300;
    }

    .careersPage .roleMeta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .careersPage .roleMeta i {
      color: var(--color-primary);
    }

    .careersPage .applicationBand {
      padding-top: clamp(88px, 10vw, 128px);
      padding-bottom: clamp(88px, 10vw, 128px);
    }

    .careersPage .applicationIntro {
      align-self: stretch;
      padding: 12px 0;
    }

    .careersPage .applicationIntro p {
      max-width: 520px;
      margin-bottom: 18px;
      color: var(--color-muted);
      font-size: 1.08rem;
    }

    .careersPage .applicationIntro .shortLine {
      color: var(--color-primary);
      font-weight: 700;
    }

    .careersPage .formCard {
      padding: clamp(26px, 4vw, 42px);
      border-radius: 24px;
      background-color: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 20px 45px rgba(21, 16, 15, 0.14);
    }

    .careersPage .formCard h2 {
      font-size: 1.8rem;
    }

    .careersPage .formLabel {
      display: block;
      margin-bottom: 7px;
      font-size: 0.88rem;
      font-weight: 700;
    }

    .careersPage .formControl {
      width: 100%;
      min-height: 48px;
      padding: 11px 14px;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      background-color: var(--color-bg);
      color: var(--color-text);
      font: inherit;
    }

    .careersPage textarea.formControl {
      min-height: 96px;
      resize: vertical;
    }

    .careersPage .formControl:focus {
      border-color: var(--color-primary);
      outline: 3px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    }

    .careersPage .studioSplit {
      align-items: start;
    }

    .careersPage .studioText p {
      max-width: 590px;
      color: var(--color-muted);
    }

    .careersPage .studioText p:last-child {
      margin-bottom: 0;
    }

    .careersPage .studioImageFrame {
      transform: rotate(-2deg);
    }

    .careersPage .studioImageFrame img {
      aspect-ratio: 4 / 3;
    }

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

    .careersPage blockquote {
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.65;
      font-weight: 300;
    }

    .careersPage .quoteMark {
      display: block;
      margin-bottom: 18px;
      font-size: 2.3rem;
      line-height: 1;
      color: var(--color-primary);
    }

    .careersPage .quoteCredit {
      display: block;
      margin-top: 22px;
      color: var(--color-primary);
      font-size: 0.88rem;
      font-weight: 700;
    }

    .careersPage .contactSplit {
      align-items: start;
    }

    .careersPage .contactDetails {
      display: grid;
      gap: 20px;
      margin-top: 28px;
    }

    .careersPage .contactLine {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .careersPage .contactLine i {
      margin-top: 3px;
      color: var(--color-primary);
      font-size: 1.35rem;
    }

    .careersPage .contactLine strong {
      display: block;
      margin-bottom: 3px;
    }

    .careersPage .contactLine span,
    .careersPage .contactLine a {
      color: var(--color-muted);
      font-weight: 300;
      text-decoration: none;
    }

    @media (max-width: 980px) {
      .careersPage .perksGrid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 820px) {
      .careersPage .band {
        padding: 56px 0;
      }

      .careersPage .heroSplit,
      .careersPage .applicationSplit,
      .careersPage .studioSplit,
      .careersPage .contactSplit,
      .careersPage .grid3,
      .careersPage .quoteGrid {
        grid-template-columns: 1fr;
      }

      .careersPage h1 {
        font-size: clamp(2.55rem, 12vw, 4.2rem);
      }

      .careersPage .heroImageFrame,
      .careersPage .studioImageFrame {
        transform: none;
      }

      .careersPage .roleItem {
        grid-template-columns: 1fr;
      }

      .careersPage .roleItem .roundedButton {
        justify-self: start;
      }
    }

    @media (max-width: 560px) {
      .careersPage .perksGrid {
        grid-template-columns: 1fr;
      }

      .careersPage .softCard,
      .careersPage .roleItem,
      .careersPage .formCard {
        padding: 24px;
      }
    }

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

    .pageShell .band {
      width: 100%;
      padding: clamp(72px, 8vw, 112px) 0;
    }

    .pageShell .bandA {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .pageShell .bandB {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

    .pageShell .bandC {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }

    .pageShell .wrap {
      width: min(1140px, calc(100% - 48px));
      margin: 0 auto;
    }

    .pageShell h1,
    .pageShell h2,
    .pageShell h3,
    .pageShell p {
      margin-top: 0;
    }

    .pageShell h1,
    .pageShell h2,
    .pageShell h3 {
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .pageShell p,
    .pageShell label,
    .pageShell address {
      font-weight: 300;
    }

    .pageShell .eyebrow {
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .pageShell .bandC .eyebrow {
      color: var(--color-on-primary);
      opacity: 0.78;
    }

    .pageShell .heroTitle {
      max-width: 700px;
      font-size: clamp(2.9rem, 7vw, 5.8rem);
      line-height: 0.98;
      margin-bottom: 28px;
    }

    .pageShell .heroCopy {
      max-width: 570px;
      color: var(--color-muted);
      font-size: 1.15rem;
      line-height: 1.7;
      margin-bottom: 32px;
    }

    .pageShell .heroImageFrame {
      position: relative;
      border-radius: 48px 48px 48px 12px;
      padding: 12px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 24px 60px color-mix(in srgb, var(--color-text) 18%, transparent);
      transform: rotate(2deg);
    }

    .pageShell .heroImageFrame img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 38px 38px 38px 8px;
      transform: rotate(-2deg);
    }

    .pageShell .roundButton {
      border: 0;
      border-radius: 999px;
      padding: 14px 26px;
      background-color: var(--color-primary);
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: transform 180ms ease, filter 180ms ease;
    }

    .pageShell .roundButton:hover {
      color: var(--color-on-primary);
      filter: brightness(1.1);
      transform: translateY(-2px);
    }

    .pageShell .grid3,
    .pageShell .quoteGrid {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(3, 1fr);
    }

    .pageShell .genreGrid {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(4, 1fr);
    }

    .pageShell .softCard {
      height: auto;
      padding: 30px;
      border-left: 4px solid var(--color-accent);
      border-radius: 24px;
      background-color: color-mix(in srgb, var(--color-surface) 78%, transparent);
      color: var(--color-text);
      box-shadow: 0 12px 30px color-mix(in srgb, var(--color-text) 9%, transparent);
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .pageShell .softCard:hover {
      background-color: var(--color-surface);
      transform: translateY(-4px);
    }

    .pageShell .bandC .softCard {
      background-color: color-mix(in srgb, var(--color-primary) 76%, black 10%);
      color: var(--color-on-primary);
      box-shadow: 0 12px 30px color-mix(in srgb, black 18%, transparent);
    }

    .pageShell .bandC .softCard:hover {
      background-color: color-mix(in srgb, var(--color-primary) 84%, white 8%);
    }

    .pageShell .iconCircle {
      display: inline-flex;
      width: 52px;
      height: 52px;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: #fff;
      font-size: 1.45rem;
    }

    .pageShell .softCard h3 {
      font-size: 1.3rem;
      margin-bottom: 12px;
    }

    .pageShell .softCard p {
      color: var(--color-muted);
      line-height: 1.65;
      margin-bottom: 0;
    }

    .pageShell .bandC .softCard p {
      color: var(--color-on-primary);
      opacity: 0.82;
    }

    .pageShell .sectionLead {
      max-width: 650px;
      margin-bottom: 40px;
    }

    .pageShell .sectionLead h2 {
      font-size: clamp(2.2rem, 4vw, 3.6rem);
      margin-bottom: 16px;
    }

    .pageShell .sectionLead p {
      color: var(--color-muted);
      font-size: 1.08rem;
      line-height: 1.7;
      margin-bottom: 0;
    }

    .pageShell .bandC .sectionLead p {
      color: var(--color-on-primary);
      opacity: 0.82;
    }

    .pageShell .surveyBand {
      padding: clamp(96px, 11vw, 144px) 0;
    }

    .pageShell .surveyText {
      padding-right: 8%;
    }

    .pageShell .surveyText h2 {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      line-height: 1;
      margin-bottom: 24px;
    }

    .pageShell .surveyText p {
      max-width: 520px;
      color: var(--color-muted);
      font-size: 1.12rem;
      line-height: 1.75;
    }

    .pageShell .formCard {
      padding: clamp(26px, 5vw, 44px);
      border-left: 4px solid var(--color-accent);
      border-radius: 24px;
      background-color: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 20px 50px color-mix(in srgb, var(--color-text) 13%, transparent);
    }

    .pageShell .formCard label {
      display: block;
      margin-bottom: 8px;
      color: var(--color-muted);
      font-size: 0.9rem;
      font-weight: 700;
    }

    .pageShell .formCard .form-control,
    .pageShell .formCard .form-select {
      min-height: 50px;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      background-color: var(--color-bg);
      color: var(--color-text);
      padding: 12px 15px;
    }

    .pageShell .formCard textarea.form-control {
      min-height: 132px;
      resize: vertical;
    }

    .pageShell .formCard .form-control:focus,
    .pageShell .formCard .form-select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
    }

    .pageShell .aboutImage {
      width: 100%;
      height: auto;
      border-radius: 24px;
      box-shadow: 18px 18px 0 color-mix(in srgb, var(--color-accent) 62%, transparent);
    }

    .pageShell .aboutText p {
      color: var(--color-muted);
      font-size: 1.08rem;
      line-height: 1.75;
    }

    .pageShell .quoteMark {
      color: var(--color-accent);
      font-size: 2.4rem;
      line-height: 1;
    }

    .pageShell .quoteText {
      min-height: 112px;
      color: var(--color-on-primary);
      font-size: 1.05rem;
      line-height: 1.65;
    }

    .pageShell .quoteName {
      margin-bottom: 0;
      color: var(--color-on-primary);
      font-weight: 700;
    }

    .pageShell .statsRow {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(4, 1fr);
      text-align: center;
    }

    .pageShell .statNumber {
      display: block;
      color: var(--color-primary);
      font-size: clamp(2.8rem, 6vw, 4.8rem);
      font-weight: 700;
      line-height: 1;
      margin-bottom: 12px;
    }

    .pageShell .statLabel {
      color: var(--color-muted);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .pageShell .contactPanel {
      padding: 34px;
      border-left: 4px solid var(--color-primary);
      border-radius: 24px;
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .pageShell .contactPanel h3 {
      margin-bottom: 20px;
      font-size: 1.45rem;
    }

    .pageShell .contactPanel address {
      color: var(--color-muted);
      line-height: 1.8;
      margin-bottom: 22px;
    }

    .pageShell .contactLink {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--color-primary);
      font-weight: 700;
      text-decoration: none;
      margin-bottom: 14px;
    }

    .pageShell .contactLink:hover {
      color: var(--color-text);
    }

    .pageShell .socialLinks {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 26px;
    }

    .pageShell .socialLinks a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      padding: 9px 15px;
      background-color: var(--color-surface);
      color: var(--color-text);
      font-size: 0.9rem;
      text-decoration: none;
    }

    .pageShell .socialLinks a:hover {
      background-color: var(--color-accent);
      color: var(--color-on-accent);
    }

    @media (max-width: 820px) {
      .pageShell .grid3,
      .pageShell .quoteGrid,
      .pageShell .genreGrid,
      .pageShell .statsRow {
        grid-template-columns: 1fr;
      }

      .pageShell .surveyText {
        padding-right: 0;
        margin-bottom: 34px;
      }

      .pageShell .heroImageFrame {
        margin: 24px 8px 0;
      }

      .pageShell .aboutImage {
        margin-top: 26px;
      }

      .pageShell .quoteText {
        min-height: auto;
      }
    }

    @media (min-width: 821px) {
      .pageShell .genreGrid .softCard:nth-child(1) {
        grid-column: span 2;
      }

      .pageShell .genreGrid .softCard:nth-child(4) {
        grid-column: span 2;
      }
    }

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

    .gamesPage .band {
      width: 100%;
      padding: clamp(6rem, 9vw, 9rem) 0;
    }

    .gamesPage .bandA {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .gamesPage .bandB {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

    .gamesPage .bandC {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }

    .gamesPage .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .gamesPage h1,
    .gamesPage h2,
    .gamesPage h3 {
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .gamesPage h1 {
      max-width: 680px;
      font-size: clamp(3rem, 7vw, 6.6rem);
      line-height: .93;
    }

    .gamesPage h2 {
      font-size: clamp(2.1rem, 4vw, 4rem);
      line-height: 1;
    }

    .gamesPage p {
      font-weight: 300;
      line-height: 1.7;
    }

    .gamesPage .eyebrow {
      color: var(--color-primary);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .gamesPage .bandC .eyebrow {
      color: var(--color-on-primary);
      opacity: .8;
    }

    .gamesPage .heroGrid,
    .gamesPage .splitGrid,
    .gamesPage .contactGrid {
      display: grid;
      align-items: center;
      gap: clamp(2.5rem, 6vw, 6rem);
      grid-template-columns: 1.02fr .98fr;
    }

    .gamesPage .heroImage,
    .gamesPage .studioImage {
      width: 100%;
      height: auto;
      border-radius: 36px;
      box-shadow: 0 24px 60px color-mix(in srgb, var(--color-text) 18%, transparent);
      object-fit: cover;
    }

    .gamesPage .heroImage {
      aspect-ratio: 4 / 3;
    }

    .gamesPage .studioImage {
      aspect-ratio: 4 / 5;
    }

    .gamesPage .buttonRow {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 2rem;
    }

    .gamesPage .primaryButton,
    .gamesPage .outlineButton,
    .gamesPage .filterButton {
      border-radius: 999px;
      font-weight: 700;
      padding: .75rem 1.35rem;
      transition: transform .2s ease, background-color .2s ease, color .2s ease;
    }

    .gamesPage .primaryButton {
      background-color: var(--color-primary);
      border: 1px solid var(--color-primary);
      color: var(--color-on-primary);
    }

    .gamesPage .outlineButton {
      border: 1px solid currentColor;
      color: inherit;
    }

    .gamesPage .primaryButton:hover,
    .gamesPage .outlineButton:hover,
    .gamesPage .filterButton:hover {
      transform: translateY(-2px);
    }

    .gamesPage .grid3,
    .gamesPage .genreGrid,
    .gamesPage .quoteGrid,
    .gamesPage .portfolioGrid,
    .gamesPage .statsGrid {
      display: grid;
      gap: 1.5rem;
    }

    .gamesPage .grid3,
    .gamesPage .quoteGrid {
      grid-template-columns: repeat(3, 1fr);
    }

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

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

    .gamesPage .statsGrid {
      grid-template-columns: repeat(4, 1fr);
      text-align: center;
    }

    .gamesPage .tile,
    .gamesPage .gameCard,
    .gamesPage .quoteTile,
    .gamesPage .formCard,
    .gamesPage .spotlightCard {
      border-left: 4px solid var(--color-accent);
      border-radius: 24px;
      box-shadow: 0 12px 28px color-mix(in srgb, var(--color-text) 9%, transparent);
      transition: background-color .25s ease, transform .25s ease;
    }

    .gamesPage .tile:hover,
    .gamesPage .gameCard:hover,
    .gamesPage .quoteTile:hover {
      background-color: color-mix(in srgb, var(--color-surface) 82%, var(--color-primary));
      transform: translateY(-4px);
    }

    .gamesPage .bandA .tile,
    .gamesPage .bandA .gameCard,
    .gamesPage .bandA .quoteTile {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

    .gamesPage .bandB .tile,
    .gamesPage .bandB .gameCard,
    .gamesPage .bandB .quoteTile {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .gamesPage .bandC .tile,
    .gamesPage .bandC .gameCard,
    .gamesPage .bandC .quoteTile {
      background-color: color-mix(in srgb, var(--color-primary) 82%, var(--color-accent));
      color: var(--color-on-primary);
    }

    .gamesPage .tile {
      padding: 2rem;
    }

    .gamesPage .tile h3,
    .gamesPage .gameCard h3,
    .gamesPage .quoteTile h3 {
      font-size: 1.25rem;
    }

    .gamesPage .iconCircle {
      align-items: center;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      border-radius: 50%;
      color: #fff;
      display: inline-flex;
      font-size: 1.4rem;
      height: 3.2rem;
      justify-content: center;
      margin-bottom: 1.3rem;
      width: 3.2rem;
    }

    .gamesPage .filterBar {
      display: flex;
      gap: .7rem;
      margin: 2.5rem 0;
      overflow-x: auto;
      padding-bottom: .5rem;
      scrollbar-width: thin;
    }

    .gamesPage .filterButton {
      background-color: transparent;
      border: 1px solid var(--color-border);
      color: inherit;
      flex: 0 0 auto;
    }

    .gamesPage .filterButton.active {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-on-primary);
    }

    .gamesPage .gameCard {
      padding: 1.25rem;
    }

    .gamesPage .gameCover {
      border-radius: 18px;
      height: 220px;
      margin-bottom: 1.4rem;
      object-fit: cover;
      width: 100%;
    }

    .gamesPage .badgeRow {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem;
      margin-top: 1rem;
    }

    .gamesPage .platformBadge {
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: .72rem;
      padding: .28rem .65rem;
    }

    .gamesPage .spotlightCard {
      align-items: center;
      background-color: var(--color-surface);
      color: var(--color-text);
      display: grid;
      gap: 2.5rem;
      grid-template-columns: .85fr 1.15fr;
      padding: clamp(1.5rem, 4vw, 3.5rem);
    }

    .gamesPage .spotlightCover {
      border-radius: 24px;
      height: 390px;
      object-fit: cover;
      width: 100%;
    }

    .gamesPage .featureList {
      list-style: none;
      margin: 1.5rem 0 0;
      padding: 0;
    }

    .gamesPage .featureList li {
      border-top: 1px solid var(--color-border);
      padding: .8rem 0;
    }

    .gamesPage .featureList i {
      color: var(--color-primary);
      margin-right: .5rem;
    }

    .gamesPage .surveyBand {
      padding-bottom: clamp(6rem, 11vw, 10rem);
      padding-top: clamp(6rem, 11vw, 10rem);
    }

    .gamesPage .formCard {
      background-color: var(--color-surface);
      color: var(--color-text);
      padding: clamp(1.5rem, 4vw, 3rem);
    }

    .gamesPage .formCard .form-control,
    .gamesPage .formCard .form-select {
      background-color: var(--color-bg);
      border-color: var(--color-border);
      border-radius: 14px;
      color: var(--color-text);
      padding: .8rem 1rem;
    }

    .gamesPage .formCard label {
      font-size: .82rem;
      font-weight: 700;
      margin-bottom: .35rem;
    }

    .gamesPage .quoteTile {
      padding: 2rem;
    }

    .gamesPage .quoteTile blockquote {
      font-size: 1.08rem;
      line-height: 1.6;
      margin: 0 0 1.4rem;
    }

    .gamesPage .quoteTile cite {
      font-size: .82rem;
      font-style: normal;
      font-weight: 700;
    }

    .gamesPage .statNumber {
      display: block;
      font-size: clamp(2.7rem, 5vw, 5rem);
      font-weight: 700;
      line-height: 1;
    }

    .gamesPage .statLabel {
      display: block;
      font-size: .78rem;
      letter-spacing: .1em;
      margin-top: .75rem;
      text-transform: uppercase;
    }

    .gamesPage .contactLinks {
      display: grid;
      gap: 1rem;
    }

    .gamesPage .contactLink {
      align-items: center;
      color: var(--color-text);
      display: flex;
      gap: .8rem;
      text-decoration: none;
    }

    .gamesPage .contactLink i {
      color: var(--color-primary);
      font-size: 1.5rem;
    }

    @media (max-width: 820px) {
      .gamesPage .heroGrid,
      .gamesPage .splitGrid,
      .gamesPage .contactGrid,
      .gamesPage .spotlightCard {
        grid-template-columns: 1fr;
      }

      .gamesPage .grid3,
      .gamesPage .genreGrid,
      .gamesPage .quoteGrid,
      .gamesPage .portfolioGrid,
      .gamesPage .statsGrid {
        grid-template-columns: 1fr;
      }

      .gamesPage .statsGrid {
        gap: 2.5rem;
      }

      .gamesPage .spotlightCover {
        height: auto;
        max-height: 420px;
      }

      .gamesPage .band {
        padding: 56px 0;
      }
    }

/* --- from privacy-policy.html --- */
.privacyPage {
      background-color: var(--color-bg);
      color: var(--color-text);
      font-family: 'Lato', sans-serif;
    }

    .privacyPage .band {
      width: 100%;
      padding: clamp(64px, 7vw, 112px) 0;
    }

    .privacyPage .band > .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .privacyPage .bandA {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .privacyPage .bandB {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

    .privacyPage .bandC {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }

    .privacyPage h1,
    .privacyPage h2,
    .privacyPage h3,
    .privacyPage h4 {
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    .privacyPage p,
    .privacyPage li,
    .privacyPage label {
      font-weight: 300;
      line-height: 1.75;
    }

    .privacyPage .eyebrow {
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .privacyPage .bandC .eyebrow {
      color: var(--color-on-primary);
      opacity: 0.78;
    }

    .privacyPage .heroGrid,
    .privacyPage .splitLayout,
    .privacyPage .contactGrid {
      display: grid;
      align-items: center;
      gap: 48px;
      grid-template-columns: 1.08fr 0.92fr;
    }

    .privacyPage .heroCopy h1 {
      max-width: 680px;
      margin: 14px 0 20px;
      font-size: clamp(2.7rem, 6vw, 5.4rem);
      line-height: 0.98;
    }

    .privacyPage .heroCopy p {
      max-width: 590px;
      margin-bottom: 28px;
      color: var(--color-muted);
      font-size: 1.08rem;
    }

    .privacyPage .pillButton {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 0;
      border-radius: 999px;
      background-color: var(--color-primary);
      color: var(--color-on-primary);
      padding: 13px 23px;
      text-decoration: none;
      font-weight: 700;
      box-shadow: 0 12px 28px color-mix(in oklch, var(--color-primary) 22%, transparent);
      transition: transform 180ms ease, background-color 180ms ease;
    }

    .privacyPage .pillButton:hover {
      background-color: color-mix(in oklch, var(--color-primary) 84%, white);
      color: var(--color-on-primary);
      transform: translateY(-2px);
    }

    .privacyPage .heroImage {
      position: relative;
      border-radius: 24px;
      box-shadow: 0 22px 50px color-mix(in oklch, var(--color-text) 16%, transparent);
    }

    .privacyPage .heroImage img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 24px;
    }

    .privacyPage .sectionIntro {
      max-width: 720px;
      margin-bottom: 38px;
    }

    .privacyPage .sectionIntro h2 {
      margin: 10px 0 14px;
      font-size: clamp(2rem, 4vw, 3.35rem);
    }

    .privacyPage .sectionIntro p {
      max-width: 650px;
      margin: 0;
      color: var(--color-muted);
    }

    .privacyPage .grid3,
    .privacyPage .genreGrid,
    .privacyPage .quoteGrid {
      display: grid;
      gap: 24px;
    }

    .privacyPage .grid3,
    .privacyPage .quoteGrid {
      grid-template-columns: repeat(3, 1fr);
    }

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

    .privacyPage .tile,
    .privacyPage .formCard,
    .privacyPage .quoteTile {
      height: auto;
      border-left: 4px solid var(--color-accent);
      border-radius: 24px;
      box-shadow: 0 14px 32px color-mix(in oklch, var(--color-text) 10%, transparent);
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .privacyPage .tile {
      background-color: color-mix(in oklch, var(--color-surface) 72%, transparent);
      color: var(--color-text);
      padding: 28px;
    }

    .privacyPage .tile:hover,
    .privacyPage .formCard:hover,
    .privacyPage .quoteTile:hover {
      background-color: color-mix(in oklch, var(--color-surface) 88%, white);
      transform: translateY(-3px);
    }

    .privacyPage .tile h3,
    .privacyPage .quoteTile h3 {
      margin: 18px 0 10px;
      font-size: 1.25rem;
    }

    .privacyPage .tile p,
    .privacyPage .quoteTile p {
      margin: 0;
      color: var(--color-muted);
      font-size: 0.96rem;
    }

    .privacyPage .iconCircle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: #fff;
      font-size: 1.35rem;
    }

    .privacyPage .surveyBand {
      padding: clamp(88px, 9vw, 136px) 0;
    }

    .privacyPage .splitLayout {
      align-items: start;
    }

    .privacyPage .splitCopy h2,
    .privacyPage .aboutCopy h2 {
      margin: 12px 0 18px;
      font-size: clamp(2.2rem, 4vw, 3.7rem);
    }

    .privacyPage .splitCopy p,
    .privacyPage .aboutCopy p {
      max-width: 600px;
      margin-bottom: 16px;
      color: var(--color-muted);
    }

    .privacyPage .formCard {
      background-color: var(--color-surface);
      color: var(--color-text);
      padding: 30px;
    }

    .privacyPage .formCard h3 {
      margin-bottom: 22px;
    }

    .privacyPage .formCard .form-control,
    .privacyPage .formCard .form-select {
      border: 1px solid var(--color-border);
      border-radius: 14px;
      background-color: var(--color-bg);
      color: var(--color-text);
      padding: 12px 14px;
    }

    .privacyPage .formCard .form-control:focus,
    .privacyPage .formCard .form-select:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent);
    }

    .privacyPage .formCard label {
      display: block;
      margin-bottom: 6px;
      color: var(--color-muted);
      font-size: 0.88rem;
    }

    .privacyPage .formCard .pillButton {
      width: 100%;
      justify-content: center;
      margin-top: 4px;
    }

    .privacyPage .aboutImage {
      border-radius: 24px;
      box-shadow: 0 18px 40px color-mix(in oklch, var(--color-text) 14%, transparent);
    }

    .privacyPage .aboutImage img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 24px;
    }

    .privacyPage .quoteTile {
      background-color: color-mix(in oklch, var(--color-primary) 82%, black);
      color: var(--color-on-primary);
      padding: 28px;
    }

    .privacyPage .quoteTile p {
      color: var(--color-on-primary);
      opacity: 0.88;
    }

    .privacyPage .quoteTile cite {
      display: block;
      margin-top: 20px;
      color: var(--color-on-primary);
      font-size: 0.88rem;
      font-style: normal;
      font-weight: 700;
    }

    .privacyPage .statsRow {
      display: grid;
      gap: 28px;
      grid-template-columns: repeat(4, 1fr);
      text-align: center;
    }

    .privacyPage .statNumber {
      display: block;
      font-size: clamp(2.4rem, 5vw, 4.8rem);
      font-weight: 700;
      line-height: 1;
    }

    .privacyPage .statLabel {
      display: block;
      margin-top: 12px;
      color: var(--color-muted);
      font-size: 0.9rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .privacyPage .contactGrid {
      align-items: start;
    }

    .privacyPage .contactDetails {
      border-left: 4px solid var(--color-primary);
      border-radius: 0 24px 24px 0;
      padding: 8px 0 8px 26px;
    }

    .privacyPage .contactDetails h2 {
      margin: 12px 0 16px;
      font-size: clamp(2rem, 4vw, 3.2rem);
    }

    .privacyPage .contactDetails p {
      max-width: 500px;
      color: var(--color-muted);
    }

    .privacyPage .contactLinks {
      display: grid;
      gap: 14px;
      margin-top: 24px;
    }

    .privacyPage .contactLinks a {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--color-text);
      text-decoration: none;
      font-weight: 700;
    }

    .privacyPage .contactLinks a:hover {
      color: var(--color-primary);
    }

    @media (max-width: 820px) {
      .privacyPage .heroGrid,
      .privacyPage .splitLayout,
      .privacyPage .contactGrid,
      .privacyPage .grid3,
      .privacyPage .genreGrid,
      .privacyPage .quoteGrid {
        grid-template-columns: 1fr;
      }

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

      .privacyPage .heroCopy h1 {
        font-size: clamp(2.7rem, 13vw, 4.4rem);
      }
    }

    @media (max-width: 480px) {
      .privacyPage .band {
        padding: 56px 0;
      }

      .privacyPage .statsRow {
        grid-template-columns: 1fr;
      }

      .privacyPage .formCard,
      .privacyPage .tile,
      .privacyPage .quoteTile {
        padding: 24px;
      }
    }

/* --- from publishing.html --- */
.publishingPage {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: 'Lato', sans-serif;
    }

    .publishingPage .band {
      width: 100%;
      padding: clamp(6rem, 8vw, 7rem) 0;
    }

    .publishingPage .bandWrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .publishingPage .bandA {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .publishingPage .bandB {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

    .publishingPage .bandC {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }

    .publishingPage h1,
    .publishingPage h2,
    .publishingPage h3 {
      font-weight: 700;
      letter-spacing: -0.035em;
    }

    .publishingPage p {
      font-weight: 300;
      line-height: 1.75;
    }

    .publishingPage .eyebrow {
      color: var(--color-primary);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .publishingPage .bandC .eyebrow {
      color: var(--color-on-primary);
      opacity: 0.78;
    }

    .publishingPage .heroSplit,
    .publishingPage .aboutSplit,
    .publishingPage .surveySplit,
    .publishingPage .contactSplit {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 4rem;
      align-items: center;
    }

    .publishingPage .heroTitle {
      max-width: 680px;
      margin: 0.8rem 0 1.25rem;
      font-size: clamp(2.8rem, 6vw, 5.4rem);
      line-height: 0.98;
    }

    .publishingPage .heroCopy {
      max-width: 590px;
      margin-bottom: 2rem;
      color: var(--color-muted);
      font-size: 1.12rem;
    }

    .publishingPage .bandC .heroCopy,
    .publishingPage .bandC p {
      color: var(--color-on-primary);
      opacity: 0.9;
    }

    .publishingPage .pillButton {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      border: 0;
      border-radius: 999px;
      padding: 0.9rem 1.5rem;
      background-color: var(--color-primary);
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: transform 180ms ease, filter 180ms ease;
    }

    .publishingPage .pillButton:hover {
      color: var(--color-on-primary);
      filter: brightness(1.08);
      transform: translateY(-2px);
    }

    .publishingPage .bandC .pillButton {
      background-color: var(--color-on-primary);
      color: var(--color-primary);
    }

    .publishingPage .photoFrame {
      position: relative;
      border-radius: 24px;
      padding: 12px;
      background: color-mix(in oklch, var(--color-primary) 22%, transparent);
      box-shadow: 0 22px 55px color-mix(in oklch, var(--color-text) 16%, transparent);
      transform: rotate(1.5deg);
    }

    .publishingPage .photoFrame img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 18px;
      object-fit: cover;
    }

    .publishingPage .introMark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      margin-bottom: 1.25rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: #fff;
      font-size: 1.45rem;
    }

    .publishingPage .sectionTitle {
      margin: 0.5rem 0 1rem;
      font-size: clamp(2rem, 4vw, 3.5rem);
      line-height: 1.05;
    }

    .publishingPage .sectionLead {
      max-width: 650px;
      color: var(--color-muted);
    }

    .publishingPage .bandC .sectionLead {
      color: var(--color-on-primary);
      opacity: 0.88;
    }

    .publishingPage .tileGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.75rem;
    }

    .publishingPage .genreGrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      margin-top: 2.75rem;
    }

    .publishingPage .softTile,
    .publishingPage .genreTile,
    .publishingPage .storyTile {
      height: auto;
      border-radius: 24px;
      border-left: 4px solid var(--color-accent);
      padding: 1.75rem;
      background-color: color-mix(in oklch, var(--color-bg) 68%, var(--color-surface));
      color: var(--color-text);
      box-shadow: 0 12px 28px color-mix(in oklch, var(--color-text) 8%, transparent);
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .publishingPage .softTile:hover,
    .publishingPage .genreTile:hover,
    .publishingPage .storyTile:hover {
      background-color: color-mix(in oklch, var(--color-surface) 78%, var(--color-primary));
      transform: translateY(-4px);
    }

    .publishingPage .bandC .softTile,
    .publishingPage .bandC .genreTile,
    .publishingPage .bandC .storyTile {
      background-color: color-mix(in oklch, var(--color-primary) 78%, var(--color-on-primary));
      color: var(--color-on-primary);
      box-shadow: 0 12px 28px color-mix(in oklch, #000 16%, transparent);
    }

    .publishingPage .bandC .softTile:hover,
    .publishingPage .bandC .genreTile:hover,
    .publishingPage .bandC .storyTile:hover {
      background-color: color-mix(in oklch, var(--color-primary) 65%, var(--color-on-primary));
    }

    .publishingPage .tileIcon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      margin-bottom: 1.3rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: #fff;
      font-size: 1.35rem;
    }

    .publishingPage .softTile h3,
    .publishingPage .genreTile h3,
    .publishingPage .storyTile h3 {
      margin-bottom: 0.55rem;
      font-size: 1.25rem;
    }

    .publishingPage .softTile p,
    .publishingPage .genreTile p,
    .publishingPage .storyTile p {
      margin: 0;
      color: var(--color-muted);
      font-size: 0.96rem;
    }

    .publishingPage .bandC .softTile p,
    .publishingPage .bandC .genreTile p,
    .publishingPage .bandC .storyTile p {
      color: var(--color-on-primary);
      opacity: 0.82;
    }

    .publishingPage .surveyBand {
      padding-top: clamp(6rem, 10vw, 8rem);
      padding-bottom: clamp(6rem, 10vw, 8rem);
    }

    .publishingPage .surveyText {
      align-self: start;
    }

    .publishingPage .surveyText p {
      max-width: 560px;
      color: var(--color-muted);
    }

    .publishingPage .processNote {
      display: flex;
      gap: 0.8rem;
      align-items: flex-start;
      margin-top: 2rem;
      color: var(--color-muted);
      font-size: 0.94rem;
    }

    .publishingPage .processNote i {
      color: var(--color-primary);
      font-size: 1.35rem;
      flex: 0 0 auto;
    }

    .publishingPage .formCard {
      border-radius: 24px;
      border-left: 4px solid var(--color-accent);
      padding: clamp(1.5rem, 4vw, 2.5rem);
      background-color: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 22px 50px color-mix(in oklch, var(--color-text) 13%, transparent);
    }

    .publishingPage .formCard h2 {
      margin-bottom: 1.5rem;
      font-size: 1.65rem;
    }

    .publishingPage .formLabel {
      display: block;
      margin-bottom: 0.4rem;
      color: var(--color-muted);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .publishingPage .formControl {
      width: 100%;
      min-height: 3.25rem;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 0.8rem 1rem;
      background-color: var(--color-bg);
      color: var(--color-text);
      font: inherit;
    }

    .publishingPage textarea.formControl {
      min-height: 8rem;
      resize: vertical;
    }

    .publishingPage .formControl:focus {
      border-color: var(--color-primary);
      outline: 3px solid color-mix(in oklch, var(--color-primary) 22%, transparent);
    }

    .publishingPage .formRow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .publishingPage .formGroup {
      margin-bottom: 1rem;
    }

    .publishingPage .aboutCopy {
      align-self: start;
    }

    .publishingPage .aboutCopy p {
      color: var(--color-muted);
    }

    .publishingPage .aboutCopy p + p {
      margin-top: 1rem;
    }

    .publishingPage .storyGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2.75rem;
    }

    .publishingPage .storyTile {
      min-height: 220px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .publishingPage .storyMeta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 1.5rem;
      color: var(--color-muted);
      font-size: 0.84rem;
      font-weight: 700;
    }

    .publishingPage .bandC .storyMeta {
      color: var(--color-on-primary);
      opacity: 0.8;
    }

    .publishingPage .statsGrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      text-align: center;
    }

    .publishingPage .statNumber {
      display: block;
      margin-bottom: 0.35rem;
      color: var(--color-primary);
      font-size: clamp(2.5rem, 5vw, 4.6rem);
      font-weight: 700;
      letter-spacing: -0.06em;
    }

    .publishingPage .statLabel {
      color: var(--color-muted);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .publishingPage .contactBlock {
      align-self: start;
    }

    .publishingPage .contactBlock p {
      max-width: 470px;
      color: var(--color-muted);
    }

    .publishingPage .contactList {
      margin: 1.75rem 0 0;
      padding: 0;
      list-style: none;
    }

    .publishingPage .contactList li {
      display: flex;
      gap: 0.85rem;
      align-items: center;
      margin-bottom: 1rem;
      color: var(--color-text);
    }

    .publishingPage .contactList i {
      color: var(--color-primary);
      font-size: 1.25rem;
    }

    .publishingPage .contactList a {
      color: inherit;
      text-decoration: none;
    }

    .publishingPage .contactList a:hover {
      color: var(--color-primary);
    }

    @media (max-width: 820px) {
      .publishingPage .heroSplit,
      .publishingPage .aboutSplit,
      .publishingPage .surveySplit,
      .publishingPage .contactSplit,
      .publishingPage .tileGrid,
      .publishingPage .genreGrid,
      .publishingPage .storyGrid,
      .publishingPage .statsGrid {
        grid-template-columns: 1fr;
      }

      .publishingPage .heroSplit,
      .publishingPage .aboutSplit,
      .publishingPage .surveySplit,
      .publishingPage .contactSplit {
        gap: 2.5rem;
      }

      .publishingPage .photoFrame {
        transform: none;
      }

      .publishingPage .statsGrid {
        gap: 2.25rem;
      }

      .publishingPage .formRow {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

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

    .termsPage .band {
      width: 100%;
      padding: clamp(64px, 7vw, 112px) 0;
    }

    .termsPage .bandA {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .termsPage .bandB {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

    .termsPage .bandC {
      background-color: var(--color-primary);
      color: var(--color-on-primary);
    }

    .termsPage .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .termsPage .split {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 40px;
      align-items: center;
    }

    .termsPage .gridThree {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .termsPage .gridFour {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .termsPage .sectionKicker {
      margin-bottom: 16px;
      color: var(--color-primary);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .termsPage .bandC .sectionKicker {
      color: var(--color-on-primary);
      opacity: 0.8;
    }

    .termsPage h1,
    .termsPage h2,
    .termsPage h3 {
      margin-top: 0;
      font-weight: 700;
      letter-spacing: -0.03em;
    }

    .termsPage h1 {
      max-width: 680px;
      margin-bottom: 24px;
      font-size: clamp(2.5rem, 6vw, 5.5rem);
      line-height: 0.98;
    }

    .termsPage h2 {
      margin-bottom: 18px;
      font-size: clamp(2rem, 4vw, 3.5rem);
      line-height: 1.05;
    }

    .termsPage h3 {
      margin-bottom: 12px;
      font-size: 1.25rem;
    }

    .termsPage p {
      max-width: 720px;
      margin-bottom: 16px;
      color: var(--color-muted);
      font-size: 1.05rem;
      font-weight: 300;
      line-height: 1.75;
    }

    .termsPage .bandC p,
    .termsPage .bandC .mutedText {
      color: var(--color-on-primary);
      opacity: 0.88;
    }

    .termsPage .heroCopy p {
      max-width: 610px;
      font-size: 1.2rem;
    }

    .termsPage .pillButton {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
      padding: 13px 24px;
      border: 0;
      border-radius: 999px;
      background-color: var(--color-primary);
      color: var(--color-on-primary);
      font-weight: 700;
      text-decoration: none;
      transition: transform 180ms ease, background-color 180ms ease;
    }

    .termsPage .bandC .pillButton {
      background-color: var(--color-on-primary);
      color: var(--color-primary);
    }

    .termsPage .pillButton:hover {
      background-color: var(--color-accent);
      color: var(--color-on-accent);
      transform: translateY(-2px);
    }

    .termsPage .heroImage,
    .termsPage .studioImage {
      width: 100%;
      height: auto;
      border-radius: 24px;
      box-shadow: 0 18px 45px rgba(21, 16, 15, 0.18);
    }

    .termsPage .heroImage {
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .termsPage .card {
      height: auto;
      padding: 28px;
      border-left: 4px solid var(--color-accent);
      border-radius: 24px;
      background-color: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 12px 30px rgba(21, 16, 15, 0.08);
      transition: background-color 180ms ease, transform 180ms ease;
    }

    .termsPage .bandB .card {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .termsPage .bandC .card {
      background-color: color-mix(in srgb, var(--color-primary) 78%, #000 22%);
      color: var(--color-on-primary);
      box-shadow: 0 12px 30px rgba(21, 16, 15, 0.16);
    }

    .termsPage .card:hover {
      background-color: var(--color-accent);
      color: var(--color-on-accent);
      transform: translateY(-4px);
    }

    .termsPage .card:hover p {
      color: var(--color-on-accent);
    }

    .termsPage .iconCircle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      margin-bottom: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: #fff;
      font-size: 1.4rem;
    }

    .termsPage .card p {
      margin-bottom: 0;
      font-size: 0.98rem;
    }

    .termsPage .legalList {
      display: grid;
      gap: 16px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .termsPage .legalList li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      color: var(--color-muted);
      font-weight: 300;
      line-height: 1.6;
    }

    .termsPage .legalList i {
      flex: 0 0 auto;
      margin-top: 4px;
      color: var(--color-primary);
    }

    .termsPage .bandC .legalList li {
      color: var(--color-on-primary);
      opacity: 0.9;
    }

    .termsPage .bandC .legalList i {
      color: var(--color-on-primary);
    }

    .termsPage .surveyBand {
      padding-top: 96px;
      padding-bottom: 96px;
    }

    .termsPage .tallCopy {
      min-height: 360px;
    }

    .termsPage .formCard {
      padding: 32px;
      border-radius: 24px;
      background-color: var(--color-surface);
      color: var(--color-text);
      box-shadow: 0 16px 36px rgba(21, 16, 15, 0.18);
    }

    .termsPage .formCard label {
      display: block;
      margin-bottom: 7px;
      color: var(--color-text);
      font-size: 0.88rem;
      font-weight: 700;
    }

    .termsPage .formCard input,
    .termsPage .formCard select,
    .termsPage .formCard textarea {
      width: 100%;
      margin-bottom: 16px;
      padding: 12px 14px;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      background-color: var(--color-bg);
      color: var(--color-text);
      font: inherit;
    }

    .termsPage .formCard textarea {
      min-height: 88px;
      resize: vertical;
    }

    .termsPage .formCard .pillButton {
      width: 100%;
      justify-content: center;
      margin-top: 0;
    }

    .termsPage .studioImage {
      height: 100%;
      min-height: 360px;
      object-fit: cover;
    }

    .termsPage .quote {
      font-size: 1.05rem;
      line-height: 1.65;
    }

    .termsPage .quote cite {
      display: block;
      margin-top: 18px;
      font-size: 0.85rem;
      font-style: normal;
      font-weight: 700;
    }

    .termsPage .statsRow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      text-align: center;
    }

    .termsPage .statNumber {
      display: block;
      margin-bottom: 8px;
      color: var(--color-primary);
      font-size: clamp(2.4rem, 5vw, 4.2rem);
      font-weight: 700;
      line-height: 1;
    }

    .termsPage .statLabel {
      color: var(--color-muted);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .termsPage .contactPanel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    .termsPage .contactDetails {
      padding: 30px;
      border-radius: 24px;
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .termsPage .contactDetails a {
      color: var(--color-primary);
      font-weight: 700;
      text-decoration: none;
    }

    .termsPage .contactLine {
      display: flex;
      gap: 14px;
      margin-bottom: 20px;
      align-items: flex-start;
    }

    .termsPage .contactLine i {
      color: var(--color-primary);
      font-size: 1.35rem;
    }

    @media (max-width: 820px) {
      .termsPage .split,
      .termsPage .contactPanel {
        grid-template-columns: 1fr;
      }

      .termsPage .gridThree,
      .termsPage .gridFour,
      .termsPage .statsRow {
        grid-template-columns: 1fr;
      }

      .termsPage .band {
        padding: 56px 0;
      }

      .termsPage .surveyBand {
        padding-top: 72px;
        padding-bottom: 72px;
      }

      .termsPage .tallCopy {
        min-height: auto;
      }

      .termsPage .statsRow {
        gap: 36px;
      }
    }

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

    .pageWrapper * {
      box-sizing: border-box;
    }

    .band {
      width: 100%;
      padding: clamp(72px, 8vw, 112px) 0;
    }

    .band > .wrap {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

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

    .bandB {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

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

    .heroGrid,
    .splitGrid,
    .contactGrid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 48px;
      align-items: center;
    }

    .sectionIntro {
      max-width: 680px;
      margin-bottom: 44px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 34px;
      height: 3px;
      content: '';
      border-radius: 4px;
      background: var(--color-accent);
    }

    .heroTitle {
      max-width: 680px;
      margin: 0 0 22px;
      font-size: clamp(3.4rem, 7vw, 6.4rem);
      font-weight: 700;
      line-height: .95;
      letter-spacing: -.055em;
    }

    .sectionTitle {
      margin: 0 0 16px;
      font-size: clamp(2.2rem, 4vw, 4rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.04em;
    }

    .bodyCopy {
      max-width: 650px;
      margin: 0;
      font-size: 1.08rem;
      font-weight: 300;
      line-height: 1.75;
    }

    .heroActions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .pillButton {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 52px;
      padding: 13px 25px;
      border: 2px solid transparent;
      border-radius: 999px;
      font-weight: 700;
      text-decoration: none;
      transition: transform .2s ease, background-color .2s ease;
    }

    .pillButton:hover {
      transform: translateY(-3px);
    }

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

    .lightButton {
      border-color: var(--color-on-secondary);
      background-color: transparent;
      color: var(--color-on-secondary);
    }

    .photoFrame {
      position: relative;
      overflow: hidden;
      border: 8px solid color-mix(in srgb, var(--color-on-secondary) 18%, transparent);
      border-radius: 32px;
      box-shadow: 0 24px 48px rgba(21, 16, 15, .18);
    }

    .photoFrame::after {
      position: absolute;
      inset: 0;
      content: '';
      background: linear-gradient(135deg, rgba(21, 16, 15, .16), rgba(21, 16, 15, .48));
      pointer-events: none;
    }

    .photoFrame img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .gridThree,
    .genreGrid,
    .quoteGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

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

    .softTile {
      height: auto;
      padding: 30px;
      border-left: 4px solid var(--color-accent);
      border-radius: 24px;
      box-shadow: 0 14px 30px rgba(21, 16, 15, .1);
      transition: background-color .2s ease, transform .2s ease;
    }

    .bandB .softTile {
      background-color: var(--color-surface);
      color: var(--color-text);
    }

    .bandA .softTile {
      background-color: var(--color-bg);
      color: var(--color-text);
    }

    .bandC .softTile {
      background-color: var(--color-accent);
      color: var(--color-on-accent);
    }

    .softTile:hover {
      background-color: color-mix(in srgb, var(--color-surface) 78%, var(--color-primary));
      transform: translateY(-4px);
    }

    .iconCircle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      margin-bottom: 22px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      color: #fff;
      font-size: 1.55rem;
    }

    .tileTitle {
      margin: 0 0 10px;
      font-size: 1.28rem;
      font-weight: 700;
    }

    .tileCopy {
      margin: 0;
      font-size: .98rem;
      font-weight: 300;
      line-height: 1.65;
    }

    .genreLabel {
      margin-bottom: 34px;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .genreTitle {
      margin: 0 0 12px;
      font-size: 1.38rem;
      font-weight: 700;
    }

    .platformBadge {
      display: inline-flex;
      margin-top: 20px;
      padding: 6px 12px;
      border: 1px solid currentColor;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 700;
    }

    .surveyBand {
      padding-top: clamp(88px, 10vw, 128px);
      padding-bottom: clamp(88px, 10vw, 128px);
    }

    .surveyCopy {
      align-self: stretch;
      padding: 12px 0;
    }

    .surveyCopy .bodyCopy {
      max-width: 560px;
    }

    .formCard {
      padding: 34px;
      border-radius: 24px;
      background-color: var(--color-bg);
      color: var(--color-text);
      box-shadow: 0 20px 42px rgba(21, 16, 15, .18);
    }

    .formTitle {
      margin: 0 0 22px;
      font-size: 1.45rem;
      font-weight: 700;
    }

    .fieldGroup {
      margin-bottom: 16px;
    }

    .fieldGroup label {
      display: block;
      margin-bottom: 7px;
      font-size: .86rem;
      font-weight: 700;
    }

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

    .fieldGroup textarea {
      min-height: 108px;
      resize: vertical;
    }

    .fieldGroup input:focus,
    .fieldGroup textarea:focus {
      border-color: var(--color-primary);
      outline: 3px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    }

    .checkRow {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin: 18px 0 24px;
      font-size: .86rem;
      line-height: 1.45;
    }

    .checkRow input {
      margin-top: 4px;
      accent-color: var(--color-primary);
    }

    .fullButton {
      width: 100%;
    }

    .aboutText {
      align-self: stretch;
    }

    .aboutText .bodyCopy + .bodyCopy {
      margin-top: 20px;
    }

    .aboutLink {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 28px;
      color: var(--color-primary);
      font-weight: 700;
      text-decoration: none;
    }

    .aboutLink:hover {
      color: var(--color-muted);
    }

    .teamPhoto {
      border-radius: 32px;
      box-shadow: 0 18px 38px rgba(21, 16, 15, .14);
    }

    .quoteTile {
      position: relative;
      padding: 30px;
      border-radius: 24px;
      background-color: var(--color-accent);
      color: var(--color-on-accent);
      box-shadow: 0 14px 30px rgba(21, 16, 15, .14);
    }

    .quoteMark {
      margin-bottom: 18px;
      font-size: 2.4rem;
      line-height: 1;
    }

    .quoteText {
      min-height: 92px;
      margin: 0 0 22px;
      font-size: 1.04rem;
      font-weight: 300;
      line-height: 1.65;
    }

    .rating {
      margin-bottom: 14px;
      color: var(--color-primary);
      letter-spacing: 3px;
    }

    .quoteName {
      margin: 0;
      font-weight: 700;
    }

    .quoteGame {
      margin: 4px 0 0;
      font-size: .85rem;
      opacity: .78;
    }

    .statsRow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      text-align: center;
    }

    .statNumber {
      display: block;
      margin-bottom: 8px;
      font-size: clamp(2.8rem, 5vw, 4.8rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.06em;
    }

    .statLabel {
      display: block;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .contactGrid {
      align-items: start;
    }

    .contactDetails {
      padding-right: 26px;
    }

    .contactLine {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      margin: 22px 0;
      font-weight: 300;
      line-height: 1.55;
    }

    .contactLine i {
      flex: 0 0 25px;
      margin-top: 3px;
      color: var(--color-primary);
      font-size: 1.35rem;
    }

    .contactLine a {
      color: var(--color-text);
      text-decoration: none;
    }

    .socialLinks {
      display: flex;
      gap: 10px;
      margin-top: 28px;
    }

    .socialLink {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background-color: var(--color-surface);
      color: var(--color-primary);
      font-size: 1.2rem;
      text-decoration: none;
    }

    @media (max-width: 820px) {
      .band {
        padding: 56px 0;
      }

      .heroGrid,
      .splitGrid,
      .contactGrid,
      .gridThree,
      .genreGrid,
      .quoteGrid {
        grid-template-columns: 1fr;
      }

      .heroTitle {
        font-size: clamp(3rem, 14vw, 5rem);
      }

      .photoFrame {
        margin-top: 10px;
      }

      .statsRow {
        grid-template-columns: repeat(2, 1fr);
        gap: 42px 18px;
      }

      .surveyCopy {
        padding: 0;
      }

      .contactDetails {
        padding-right: 0;
      }
    }

    @media (max-width: 480px) {
      .formCard {
        padding: 24px 20px;
      }

      .statsRow {
        gap: 34px 10px;
      }

      .statNumber {
        font-size: 2.8rem;
      }
    }