@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

/* Contact pages — Survate Experience System */
body.contact-page {
  --contact-navy: #0a182e;
  --contact-navy-soft: #153247;
  --contact-ivory: #f4f2ec;
  --contact-ivory-deep: #eae7df;
  --contact-sage: #6d8a7a;
  --contact-gold: #c7a45a;
  --contact-gold-text: #806223;
  --contact-ink: #243548;
  --contact-muted: #536473;
  --contact-line: rgba(10, 24, 46, .14);
  color: var(--contact-ink);
  background: var(--contact-ivory) !important;
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.85;
  letter-spacing: .012em;
}

body.contact-page::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: url("../img/home-connection-pattern.svg") center top / min(920px, 92vw) auto repeat-y;
  opacity: .075;
}

body.contact-page > :where(.site-header, main, .site-footer) {
  position: relative;
  z-index: 1;
}

body.contact-page :where(h1, h2, h3, .button, .site-nav, .footer-nav) {
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

body.contact-page :where(h1, h2, h3) {
  color: var(--contact-navy);
  font-weight: 700;
  text-wrap: balance;
}

body.contact-page :where(p, li, dd, small) { color: var(--contact-muted); }
body.contact-page .container { width: min(1180px, calc(100% - 48px)); }
body.contact-page .skip-link { color: #fff; background: var(--contact-navy); }
body.contact-page .brand-fallback { color: var(--contact-navy); border-color: var(--contact-navy); }

/* Header */
body.contact-page .site-header,
body.contact-page .site-header.is-scrolled {
  color: var(--contact-navy);
  background: rgba(244, 242, 236, .94) !important;
  border-bottom: 1px solid var(--contact-line);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

body.contact-page .header-inner { min-height: 82px; }
body.contact-page .brand {
  padding: 0;
  color: var(--contact-navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.contact-page .brand img {
  width: min(270px, 34vw);
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}
body.contact-page .site-nav { gap: 4px; }
body.contact-page .site-nav a {
  color: var(--contact-navy);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .04em;
}
body.contact-page .site-nav a:hover {
  color: var(--contact-navy);
  background: rgba(109, 138, 122, .12);
}
body.contact-page .site-nav .nav-cta {
  color: #fff;
  background: var(--contact-navy);
  border-color: var(--contact-navy);
  box-shadow: none;
}
body.contact-page .site-nav .nav-cta:hover {
  color: #fff;
  background: var(--contact-navy-soft);
  border-color: var(--contact-navy-soft);
}
body.contact-page .nav-toggle {
  color: var(--contact-navy);
  background: #fff;
  border-color: var(--contact-line);
  box-shadow: none !important;
}
body.contact-page .nav-toggle span { background: var(--contact-navy); }

/* Hero */
body.contact-page main { color: var(--contact-ink); background: transparent !important; }
body.contact-page .contact-hero,
body.contact-page .dx-contact-hero,
body.contact-page .philocra-contact-hero,
body.contact-page .oracle-contact-hero,
body.contact-page .recruit-entry-hero {
  position: relative;
  overflow: hidden;
  color: var(--contact-ink);
  background:
    radial-gradient(circle at 87% 14%, rgba(109, 138, 122, .19) 0 230px, transparent 231px),
    radial-gradient(circle at 14% 86%, rgba(199, 164, 90, .14) 0 170px, transparent 171px),
    linear-gradient(115deg, #f8f6f0 0%, var(--contact-ivory) 58%, #e6ebe5 100%) !important;
  isolation: isolate;
}
body.contact-page .contact-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: url("../img/home-connection-pattern.svg") 88% center / min(760px, 61vw) auto no-repeat;
  opacity: .2;
}
body.contact-page .contact-hero-grid { min-height: 570px; padding: 92px 0 84px; }
body.contact-page .contact-hero-copy h1 {
  color: var(--contact-navy) !important;
  font-size: clamp(2.35rem, 4.8vw, 4.45rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1.18;
  text-shadow: none;
}
body.contact-page .contact-hero .page-lead {
  color: var(--contact-muted) !important;
  font-weight: 400;
  line-height: 2;
  text-shadow: none;
}
body.contact-page .contact-hero :where(.eyebrow, .breadcrumb, .breadcrumb a) {
  color: var(--contact-gold-text) !important;
}
body.contact-page .contact-hero .eyebrow {
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: .18em;
}
body.contact-page .contact-hero .button-secondary {
  color: var(--contact-navy) !important;
  background: rgba(255, 255, 255, .64) !important;
  border-color: rgba(10, 24, 46, .28) !important;
}
body.contact-page .contact-hero .button-secondary:hover {
  color: var(--contact-navy) !important;
  background: #fff !important;
  border-color: var(--contact-sage) !important;
}

body.contact-page .contact-hero-card,
body.contact-page .oracle-contact-summary,
body.contact-page .dx-contact-hero .contact-hero-card {
  color: #fff !important;
  background: rgba(10, 24, 46, .94) !important;
  border: 1px solid rgba(199, 164, 90, .46) !important;
  border-radius: 2px 42px 2px 2px !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}
body.contact-page .contact-hero-card :where(h2, strong),
body.contact-page .oracle-contact-summary :where(h2, strong),
body.contact-page .dx-contact-hero .contact-hero-card :where(h2, strong) {
  color: #fff !important;
  text-shadow: none !important;
}
body.contact-page .contact-hero-card :where(p, li, span),
body.contact-page .oracle-contact-summary :where(p, li, span),
body.contact-page .dx-contact-hero .contact-hero-card :where(p, li, span) {
  color: rgba(255, 255, 255, .82) !important;
  text-shadow: none !important;
}
body.contact-page .contact-route-list a,
body.contact-page .contact-mini-list li {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
  border-radius: 2px 20px 2px 2px;
}
body.contact-page .contact-route-list a:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(199, 164, 90, .68);
}
body.contact-page .contact-check-list li::before,
body.contact-page .dx-contact-hero .contact-hero-card .contact-check-list li::before,
body.contact-page .oracle-contact-summary .contact-check-list li::before {
  background: var(--contact-gold) !important;
  box-shadow: none !important;
}
body.contact-page .oracle-contact-card-label { color: #f0dca9 !important; }

/* Keep the Philocra logo on the same ivory surface without a white box. */
body.contact-page.philocra-page .contact-hero-card {
  color: var(--contact-ink) !important;
  background: rgba(244, 242, 236, .9) !important;
  border-color: var(--contact-line) !important;
}
body.contact-page.philocra-page .contact-hero-card :where(h2, strong) { color: var(--contact-navy) !important; }
body.contact-page.philocra-page .contact-hero-card :where(p, li, span) { color: var(--contact-muted) !important; }
body.contact-page .contact-product-logo {
  width: min(430px, 100%);
  max-height: 112px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* Form section */
body.contact-page .section-muted {
  background: rgba(234, 231, 223, .56) !important;
  border-block: 1px solid rgba(10, 24, 46, .06);
}
body.contact-page .contact-side .eyebrow {
  color: var(--contact-gold-text);
  font-family: Inter, "Noto Sans JP", sans-serif;
  font-weight: 700;
  letter-spacing: .18em;
}
body.contact-page .contact-side h2 { color: var(--contact-navy); font-weight: 700; }
body.contact-page .contact-side p { color: var(--contact-muted); }
body.contact-page .contact-side .contact-check-list li { color: var(--contact-ink); font-weight: 600; }

body.contact-page .form-panel {
  color: var(--contact-ink);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--contact-line);
  border-top: 3px solid var(--contact-sage);
  border-radius: 2px 34px 2px 2px;
  box-shadow: none;
}
body.contact-page .form-field,
body.contact-page .checkbox-group legend { color: var(--contact-navy); font-weight: 700; }
body.contact-page .form-field input,
body.contact-page .form-field select,
body.contact-page .form-field textarea {
  color: var(--contact-ink);
  background: rgba(248, 246, 240, .76);
  border-color: rgba(10, 24, 46, .2);
  border-radius: 2px 12px 2px 2px;
  font-weight: 500;
  box-shadow: none;
}
body.contact-page .form-field input:hover,
body.contact-page .form-field select:hover,
body.contact-page .form-field textarea:hover { border-color: rgba(109, 138, 122, .72); }
body.contact-page .form-field input:focus,
body.contact-page .form-field select:focus,
body.contact-page .form-field textarea:focus {
  border-color: var(--contact-sage);
  outline: 3px solid rgba(109, 138, 122, .18);
}
body.contact-page .required-mark {
  color: var(--contact-navy);
  background: var(--contact-gold);
  font-weight: 700;
}
body.contact-page .checkbox-group,
body.contact-page .form-panel .checkbox-group {
  background: rgba(234, 231, 223, .46);
  border-color: var(--contact-line);
  border-radius: 2px 20px 2px 2px;
}
body.contact-page .checkbox-group label,
body.contact-page .form-panel .checkbox-group label {
  color: var(--contact-ink);
  background: rgba(255, 255, 255, .78);
  border-color: var(--contact-line);
  border-radius: 2px 14px 2px 2px;
  font-weight: 600;
}
body.contact-page :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--contact-navy); }
body.contact-page .form-consent { color: var(--contact-muted); font-weight: 600; }
body.contact-page .form-consent a { color: var(--contact-gold-text); }
body.contact-page .form-actions .button-primary {
  color: #fff !important;
  background: var(--contact-navy) !important;
  border-color: var(--contact-navy) !important;
  box-shadow: none !important;
}
body.contact-page .form-actions .button-primary:hover,
body.contact-page .form-actions .button-primary:focus-visible {
  color: #fff !important;
  background: var(--contact-navy-soft) !important;
  border-color: var(--contact-navy-soft) !important;
}
body.contact-page .form-actions .button-secondary {
  color: var(--contact-navy) !important;
  background: transparent !important;
  border-color: rgba(10, 24, 46, .34) !important;
  box-shadow: none !important;
}
body.contact-page .form-actions .button-secondary:hover {
  background: rgba(109, 138, 122, .1) !important;
  border-color: var(--contact-sage) !important;
}
body.contact-page .form-status {
  color: var(--contact-navy);
  background: rgba(199, 164, 90, .12);
  border: 1px solid rgba(199, 164, 90, .36);
  border-radius: 2px 14px 2px 2px;
}

/* Confirmation and completion pages */
body.contact-page .contact-layout-single {
  grid-template-columns: 1fr;
  width: min(900px, 100%);
  margin-inline: auto;
}
body.contact-page .confirm-list { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--contact-line); }
body.contact-page .confirm-item {
  display: grid;
  grid-template-columns: minmax(150px, .36fr) minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--contact-line);
}
body.contact-page .confirm-item dt { color: var(--contact-navy); font-weight: 700; }
body.contact-page .confirm-item dd { margin: 0; color: var(--contact-muted); overflow-wrap: anywhere; }
body.contact-page .thanks-hero .button-primary {
  color: #fff !important;
  background: var(--contact-navy) !important;
  border-color: var(--contact-navy) !important;
}

body.contact-page.redirect-page {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
}
body.contact-page.redirect-page main {
  width: min(680px, 100%);
  padding: clamp(34px, 6vw, 64px);
  text-align: center;
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid var(--contact-line);
  border-top: 3px solid var(--contact-sage);
  border-radius: 2px 34px 2px 2px;
}
body.contact-page.redirect-page a {
  display: inline-flex;
  justify-content: center;
  padding: 14px 24px;
  color: #fff;
  background: var(--contact-navy);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

/* Footer */
body.contact-page .site-footer {
  color: rgba(255, 255, 255, .86);
  background: #071322 !important;
  border-top: 3px solid var(--contact-gold);
}
body.contact-page .site-footer :where(.footer-brand, p, a, li, small) { color: rgba(255, 255, 255, .86) !important; }
body.contact-page .site-footer .footer-brand { color: #fff !important; }
body.contact-page .site-footer a:hover,
body.contact-page .site-footer a:focus-visible { color: #eed9a4 !important; }

@media (max-width: 980px) {
  body.contact-page .site-nav {
    background: rgba(244, 242, 236, .98);
    border-color: var(--contact-line);
  }
  body.contact-page .site-nav a { color: var(--contact-navy); }
  body.contact-page .contact-hero-grid { min-height: auto; }
}

@media (max-width: 700px) {
  body.contact-page .container { width: min(100% - 32px, 1180px); }
  body.contact-page .brand img { width: min(230px, 62vw); }
  body.contact-page .contact-hero-grid { padding: 68px 0 60px; }
  body.contact-page .contact-hero-copy h1 { font-size: clamp(2rem, 10.5vw, 3.1rem); }
  body.contact-page .contact-hero-card { padding: 26px; border-radius: 2px 30px 2px 2px !important; }
  body.contact-page .form-panel { padding: 24px 20px; border-radius: 2px 24px 2px 2px; }
  body.contact-page .checkbox-group,
  body.contact-page .form-panel .checkbox-group { grid-template-columns: 1fr; padding: 16px; }
  body.contact-page .confirm-item { grid-template-columns: 1fr; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  body.contact-page *,
  body.contact-page *::before,
  body.contact-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}