/* Contact page composition; the accepted shell remains shared. */
body:has(.contact-page) { margin: 0; min-width: 320px; background: #fff; }
.contact-page {
  --contact-ink: #241c64;
  --contact-muted: #5f6074;
  --contact-lilac: #eee9ff;
  --contact-blue: #4d41d8;
  color: var(--contact-ink);
  background: #fff;
  font-family: "Nata Sans", Arial, sans-serif;
  line-height: 1.55;
}

body > .gaming-hero__header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 12px clamp(20px, 5vw, 84px);
  background-color: #fff;
  box-shadow: 0 8px 26px rgb(36 28 100 / 8%);
}
body > .gaming-hero__header .gaming-hero__brand { display: block; width: 116px; height: 88px; }
body > .gaming-hero__header .gaming-hero__brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
body > .gaming-hero__header .gaming-hero__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
body > .gaming-hero__header .gaming-hero__nav a,
body > .gaming-hero__header .gaming-hero__phone { color: #26196b; font-size: clamp(.9rem, 1.3vw, 1.15rem); text-decoration: none; }
body > .gaming-hero__header .gaming-hero__nav a:hover,
body > .gaming-hero__header .gaming-hero__phone:hover { color: #4d41d8; }
body > .gaming-hero__header .gaming-hero__nav .is-current { font-weight: 800; }

.contact-page * { box-sizing: border-box; }
.contact-page { padding-top: 112px; }
.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-page p { margin-top: 0; }
.contact-page h1,
.contact-page h2,
.contact-page h3 { letter-spacing: -.035em; line-height: 1.12; }
.contact-page h1 { max-width: 11ch; margin-bottom: 1.25rem; font-size: clamp(2.8rem, 6vw, 5.8rem); }
.contact-page h2 { margin-bottom: .8rem; font-size: clamp(1.8rem, 3vw, 3.15rem); }
.contact-page h3 { margin-bottom: .6rem; font-size: 1.35rem; }
.contact-page p { color: var(--contact-muted); }
.contact-page a { color: inherit; }

.contact-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  min-height: 570px;
  padding: clamp(3rem, 8vw, 7.5rem) max(6vw, calc((100% - 1420px) / 2));
  overflow: hidden;
  background: #f5f3ff;
  background-image: radial-gradient(ellipse at 95% 10%, #e1dbff 0, transparent 46%);
}
.contact-hero__copy { position: relative; z-index: 1; max-width: 690px; }
.contact-hero__copy > p:not(.contact-eyebrow) { max-width: 38rem; margin-bottom: 2rem; font-size: clamp(1.05rem, 1.35vw, 1.28rem); }
.contact-eyebrow,
.contact-kicker { margin-bottom: .9rem; color: #6657de !important; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.contact-hero__media { position: relative; z-index: 0; width: min(100%, 590px); justify-self: end; }
.contact-hero__media img { display: block; width: 100%; aspect-ratio: 1.08; border-radius: 34px 34px 120px 34px; object-fit: cover; box-shadow: 0 28px 80px rgb(36 28 100 / 16%); }
.contact-button,
.contact-submit {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .9rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: #4d41d8;
  color: #fff !important;
  font: inherit;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.contact-button:hover,
.contact-submit:hover { transform: translateY(-2px); background-color: #362ab9; box-shadow: 0 12px 28px rgb(77 65 216 / 24%); }
.contact-button:focus-visible,
.contact-submit:focus-visible,
.contact-page a:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 3px solid #edae48; outline-offset: 4px; }
.contact-button--dark { background-color: #282061; }
.contact-button--light { background-color: #eee9ff; border-color: #dedaf4; color: #30266f !important; }
.contact-button--light:hover { background-color: #ded6ff; box-shadow: none; }

/* Keep the shared consent shell legible on this page without changing its markup. */
body:has(.contact-page) footer .consent-reopen {
  background-color: #26196b;
  color: #fff;
}
body:has(.contact-page) footer .consent-secondary {
  background-color: #eee9ff;
  color: #26196b;
}

.contact-section {
  position: relative;
  padding: clamp(3.2rem, 7vw, 7rem) max(6vw, calc((100% - 1280px) / 2));
  border-bottom: 1px solid #eeedf4;
}
.contact-section > p { max-width: 54rem; }
.contact-section--methods { padding-top: clamp(4rem, 7vw, 7.5rem); }
.contact-section__heading { max-width: 720px; }
.contact-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; margin-top: 2.4rem; }
.contact-card { min-height: 240px; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid #e4e1f1; border-radius: 24px; background: #fbfaff; }
.contact-card__index,
.contact-route-number { display: inline-grid; width: 2.6rem; height: 2.6rem; place-items: center; margin-bottom: 1.4rem; border-radius: 50%; background: #e8e4ff; color: #4d41d8; font-size: .82rem; font-weight: 800; }
.contact-card a { display: inline-block; margin-top: .55rem; color: #493bd1; font-size: 1.1rem; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact-section--phone,
.contact-section--email { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.contact-detail { display: flex; align-items: flex-start; gap: 1.2rem; max-width: 690px; }
.contact-detail__icon { display: grid; width: 3.2rem; height: 3.2rem; flex: 0 0 auto; place-items: center; border-radius: 1.1rem; background: #eeeaff; color: #4d41d8; font-weight: 800; }
.contact-detail p:last-child { margin-bottom: 0; }
.contact-inline-link { flex: 0 0 auto; color: #493bd1 !important; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 750; text-decoration: none; }
.contact-inline-link span { padding-left: .35rem; }
.contact-section--company { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .3rem 2rem; background: #f6f4ff; }
.contact-section--company .contact-kicker,
.contact-section--company h2,
.contact-section--company > p { grid-column: 1; }
.contact-section--company .contact-button { grid-column: 2; grid-row: 2 / span 2; }
.contact-section--company > p { margin-bottom: 0; }
.contact-section--address { display: flex; align-items: center; justify-content: space-between; }
.contact-section--address address { color: #3c3b54; font-size: 1.1rem; font-style: normal; line-height: 1.8; }
.contact-address-mark { display: grid; width: clamp(100px, 18vw, 210px); aspect-ratio: 1; place-items: center; border: 1px solid #e5e1f3; border-radius: 50%; color: #d8d3ec; font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: .08em; }

.contact-section--form { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 8rem); background: #f7f6fc; }
.contact-form-intro { max-width: 420px; }
.contact-form-route { margin-top: 2rem; padding-left: 1rem; border-left: 3px solid #9c91f2; font-size: .9rem; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.contact-field { display: grid; align-content: start; gap: .45rem; }
.contact-field--message,
.contact-form-note,
.contact-submit { grid-column: 1 / -1; }
.contact-field label { color: #2b2754; font-size: .9rem; font-weight: 700; }
.contact-field input,
.contact-field textarea { width: 100%; min-height: 58px; padding: 1rem 1.1rem; border: 1px solid #d8d5e5; border-radius: 12px; background: #fff; color: #24213e; font: inherit; }
.contact-field textarea { min-height: 170px; resize: vertical; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #77768a; }
.contact-field.has-error input,
.contact-field.has-error textarea { border-color: #b42336; }
.contact-error { min-height: 1.25rem; color: #9f1d2d; font-size: .82rem; }
.contact-form-note { margin: 0; font-size: .85rem; }
.contact-submit { justify-self: start; min-width: 205px; }

.contact-section--faq,
.contact-section--platforms,
.contact-section--games,
.contact-section--categories,
.contact-section--ranking,
.contact-section--editorial { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; }
.contact-section--faq > .contact-route-number,
.contact-section--platforms > .contact-route-number,
.contact-section--games > .contact-route-number,
.contact-section--categories > .contact-route-number,
.contact-section--ranking > .contact-route-number,
.contact-section--editorial > .contact-route-number { margin: 0; }
.contact-section--faq h2,
.contact-section--platforms h2,
.contact-section--games h2,
.contact-section--categories h2,
.contact-section--ranking h2,
.contact-section--editorial h2 { font-size: clamp(1.55rem, 2.4vw, 2.35rem); }
.contact-section--faq p:not(.contact-kicker),
.contact-section--platforms p:not(.contact-kicker),
.contact-section--games p:not(.contact-kicker),
.contact-section--categories p:not(.contact-kicker),
.contact-section--ranking p:not(.contact-kicker),
.contact-section--editorial p:not(.contact-kicker) { margin-bottom: 0; }
.contact-route-number { margin: 0; }
.contact-section--policies { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: #292168; color: #fff; }
.contact-section--policies .contact-kicker { color: #c9c0ff !important; }
.contact-section--policies p:not(.contact-kicker) { color: #dedbf4; }
.contact-policy-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.contact-policy-links a { padding: .85rem 1.1rem; border: 1px solid rgb(255 255 255 / 35%); border-radius: 999px; color: #fff; text-decoration: none; }
.contact-policy-links a:hover { background: rgb(255 255 255 / 12%); }
.contact-pixel-fallback { position: absolute; width: 1px; height: 1px; }

@media (max-width: 900px) {
  body > .gaming-hero__header { min-height: 94px; padding-inline: 22px; }
  body > .gaming-hero__header .gaming-hero__brand { width: 88px; height: 68px; }
  .contact-page { padding-top: 94px; }
  .contact-hero { min-height: 470px; grid-template-columns: 1.05fr .8fr; gap: 1.5rem; padding-inline: 6vw; }
  .contact-section { padding-inline: 6vw; }
  .contact-section--form { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-form-intro { max-width: 650px; }
}

@media (max-width: 620px) {
  body > .gaming-hero__header { display: flex; min-height: 122px; flex-wrap: wrap; gap: .5rem 1rem; padding: 10px 18px; }
  body > .gaming-hero__header .gaming-hero__nav { flex: 1 1 100%; order: 3; justify-content: space-between; gap: .6rem; }
  body > .gaming-hero__header .gaming-hero__nav a { font-size: .83rem; }
  .contact-page { padding-top: 122px; }
  .contact-hero { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 22px; }
  .contact-hero__media { width: min(100%, 460px); justify-self: start; }
  .contact-hero__media img { aspect-ratio: 1.35; border-radius: 22px 22px 72px 22px; }
  .contact-section { padding: 3.5rem 22px; }
  .contact-methods { grid-template-columns: 1fr; }
  .contact-section--phone,
  .contact-section--email,
  .contact-section--address,
  .contact-section--policies { align-items: flex-start; flex-direction: column; }
  .contact-section--company { grid-template-columns: 1fr; }
  .contact-section--company .contact-kicker,
  .contact-section--company h2,
  .contact-section--company > p,
  .contact-section--company .contact-button { grid-column: 1; grid-row: auto; }
  .contact-section--company .contact-button { justify-self: start; margin-top: .7rem; }
  .contact-address-mark { width: 88px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-field--message,
  .contact-form-note,
  .contact-submit { grid-column: 1; }
  .contact-section--faq,
  .contact-section--platforms,
  .contact-section--games,
  .contact-section--categories,
  .contact-section--ranking,
  .contact-section--editorial { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
  .contact-section--faq .contact-button,
  .contact-section--platforms .contact-button,
  .contact-section--games .contact-button,
  .contact-section--categories .contact-button,
  .contact-section--ranking .contact-button,
  .contact-section--editorial .contact-button { grid-column: 2; justify-self: start; }
  .contact-policy-links { flex-direction: column; width: 100%; }
  .contact-policy-links a { width: 100%; }
}