.contact-page {
  background: radial-gradient(circle at top left, rgba(199, 154, 59, 0.12), transparent 55%), var(--color-bg);
}

.contact-hero {
  padding-top: clamp(var(--space-12), 9vw, var(--space-20));
}

.contact-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: var(--space-8);
  align-items: center;
}

.contact-hero-copy p {
  max-width: 52ch;
}

.contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.contact-hero-panel {
  align-self: stretch;
}

.contact-support-card {
  height: 100%;
  background: linear-gradient(145deg, var(--color-surface-elevated), var(--color-surface));
}

.contact-channel-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.contact-channel-list h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.contact-quick-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.contact-quick-meta dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}

.contact-quick-meta dd {
  margin: 0;
  font-weight: 500;
}

.contact-location .location-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(260px, 0.9fr);
  gap: var(--space-6);
  background: linear-gradient(140deg, var(--color-surface), var(--color-surface-elevated));
}

.location-content h2 {
  margin-bottom: var(--space-3);
}

.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.location-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.location-map-info ul {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.location-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.location-aside {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.location-aside h3 {
  margin-bottom: var(--space-3);
}

.location-aside dl {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.location-aside dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 0.1rem;
}

.location-aside dd {
  margin: 0;
}

.contact-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: var(--space-8);
  align-items: flex-start;
}

.contact-form-intro h2 {
  margin-bottom: var(--space-3);
}

.contact-form-hints {
  margin-top: var(--space-3);
}

.contact-form-hints li + li {
  margin-top: 0.35rem;
}

.contact-form-card {
  background-color: var(--color-surface);
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.form-field-inline {
  margin-top: var(--space-2);
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.checkbox-wrapper input[type="checkbox"] {
  margin-top: 0.25rem;
}

.checkbox-wrapper label {
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.contact-form-actions {
  margin-top: var(--space-3);
}

.form-status {
  min-height: 1.25rem;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.hours-card {
  background-color: var(--color-surface);
}

.hours-header h2 {
  margin-bottom: var(--space-2);
}

.hours-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.hours-block dl {
  display: grid;
  gap: var(--space-2);
}

.hours-block dt {
  font-weight: 600;
}

.hours-block dd {
  margin: 0.1rem 0 0;
}

.hours-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.orders-layout {
  max-width: var(--container-max);
  margin-inline: auto;
}

.orders-card {
  background: linear-gradient(150deg, var(--color-surface-elevated), var(--color-surface));
}

.orders-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.orders-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.help-layout {
  background-color: var(--color-surface);
}

.help-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.help-grid ul {
  margin-top: var(--space-2);
}

.returns-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
  gap: var(--space-6);
  background-color: var(--color-surface);
}

.returns-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.returns-aside {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.returns-aside h3 {
  margin-bottom: var(--space-3);
}

.returns-aside ul {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.returns-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.company-card {
  background-color: var(--color-surface);
}

.company-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
  gap: var(--space-6);
}

.company-dl {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.company-dl dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 0.1rem;
}

.company-dl dd {
  margin: 0;
}

.company-legal-links ul {
  margin-top: var(--space-3);
}

.company-legal-links li + li {
  margin-top: 0.35rem;
}

@media (max-width: 960px) {
  .contact-hero-layout,
  .contact-location .location-layout,
  .contact-form-layout,
  .hours-grid,
  .orders-grid,
  .help-grid,
  .returns-layout,
  .returns-grid,
  .company-layout,
  .location-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .location-aside,
  .returns-aside {
    order: -1;
  }
}

@media (max-width: 720px) {
  .contact-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .checkbox-wrapper {
    align-items: center;
  }
}