/* =============================================================================
   Contact page - scoped design
   -----------------------------------------------------------------------------
   Loaded only by Views/Contact/Index.cshtml via its own @section Styles, so it
   never touches any other page. The rest of the site uses the original
   Bootstrap-based css/site.css; this page keeps its own editorial redesign
   (navy/gold, IBM Plex Mono labels, square inputs) on top of it.
   ========================================================================== */
:root {
  /* Dark theme, matching the sitewide network background in site.css. --cp-navy
     is kept as true navy - it's still correct for navy text on a solid gold
     button - while general page text moved to the new --cp-text. */
  --cp-navy: #171c2b;
  --cp-text: #fafaf8;
  --cp-paper: rgba(35, 42, 63, 0.55);
  --cp-surface: rgba(35, 42, 63, 0.78);
  --cp-slot-bg: #1c2233;
  --cp-ink-3: rgba(250, 250, 248, 0.82);
  --cp-ink-5: rgba(250, 250, 248, 0.7);
  --cp-ink-6: rgba(250, 250, 248, 0.6);
  --cp-ink-7: rgba(250, 250, 248, 0.5);
  --cp-line-strong: rgba(250, 250, 248, 0.18);
  --cp-gold: oklch(0.62 0.11 62);
  --cp-gold-hover: oklch(0.58 0.11 62);
  --cp-danger: oklch(0.55 0.15 25);
  --cp-ease-out: cubic-bezier(0.22, 0.8, 0.25, 1);
  --cp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 40px;
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
}

.ak-container { max-width: 1240px; margin-inline: auto; padding-inline: 40px; }

.ak-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 68px; align-items: start; }
.ak-split--contact { grid-template-columns: 0.95fr 1.05fr; gap: 76px; }

.ak-eyebrow {
  font-family: var(--cp-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cp-gold-hover);
  margin-bottom: 18px;
}
.ak-gold { color: var(--cp-gold-hover); }

.ak-h1--contact { font-size: 52px; font-weight: 600; line-height: 1.16; letter-spacing: -0.025em; margin: 0; color: var(--cp-text); }
.ak-lead--sm { font-size: 18px; line-height: 1.75; color: var(--cp-ink-3); margin: 0; }
.ak-measure-44 { max-width: 44ch; }
.ak-mb-26 { margin-bottom: 26px; }
.ak-mb-34 { margin-bottom: 34px; }

.ak-contact-list { display: grid; gap: 22px; border-top: 1px solid var(--cp-line-strong); padding-top: 30px; margin-bottom: 32px; }
.ak-contact-list__label { font-family: var(--cp-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--cp-ink-7); margin-bottom: 8px; }
.ak-contact-list__value { font-size: 17.5px; font-weight: 500; color: var(--cp-text); }
a.ak-contact-list__value:hover { color: var(--cp-gold-hover); }
.ak-contact-list__value--ltr { font-family: var(--cp-mono); letter-spacing: 0.02em; direction: ltr; unicode-bidi: isolate; }

.ak-slot { position: relative; background: var(--cp-slot-bg); overflow: hidden; }
.ak-slot--16x10 { aspect-ratio: 16 / 10; }
.ak-slot > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ak-form {
  border: 1px solid var(--cp-line-strong);
  border-top: 3px solid var(--cp-gold);
  background: var(--cp-surface);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 38px 34px;
  display: grid;
  gap: 22px;
}
.ak-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ak-field { display: grid; gap: 8px; }
.ak-field > label, .ak-field > span { font-size: 14px; color: var(--cp-ink-3); font-weight: 500; }

.ak-input {
  width: 100%;
  border: 1px solid var(--cp-line-strong);
  background: var(--cp-paper);
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--cp-text);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ak-input:focus { border-color: var(--cp-gold); background: var(--cp-surface); }
.ak-input--ltr { direction: ltr; text-align: end; }
textarea.ak-input { resize: vertical; line-height: 1.7; }
.ak-input::placeholder { color: var(--cp-ink-7); }
.ak-input.input-validation-error { border-color: var(--cp-danger); }

.ak-form__fine { font-size: 13.5px; color: var(--cp-ink-6); text-align: center; }
.ak-error { font-size: 13.5px; color: var(--cp-danger); }
.ak-validation-summary { font-size: 14px; color: var(--cp-danger); }
.ak-validation-summary ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }

.ak-form-success {
  border: 1px solid var(--cp-line-strong);
  border-top: 3px solid var(--cp-gold);
  background: var(--cp-surface);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 48px 40px;
}
.ak-form-success h2 { font-size: 28px; margin-bottom: 14px; color: var(--cp-text); }
.ak-form-success p { font-size: 16.5px; line-height: 1.75; color: var(--cp-ink-3); margin: 0; }

/* Buttons - the shiny metallic-gold treatment carried over from the redesign. */
.ak-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  padding: 15px 30px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background 0.25s ease, transform 0.25s var(--cp-ease-out), box-shadow 0.25s ease;
}
.ak-btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start 0.55s var(--cp-ease-out);
  pointer-events: none;
}
.ak-btn:hover::after { inset-inline-start: 130%; }
.ak-btn--block { width: 100%; font-size: 16px; font-weight: 600; padding: 16px; }
.ak-btn--gold {
  background: linear-gradient(155deg, oklch(0.72 0.12 62), var(--cp-gold) 55%, oklch(0.56 0.11 62));
  color: var(--cp-navy);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 8px 20px color-mix(in oklab, var(--cp-gold) 30%, transparent);
}
.ak-btn--gold:hover {
  /* A dedicated pale value, not --cp-paper: that token now means the dark input
     well, and this button's navy text needs a light hover fill regardless of
     the page's own theme. */
  background: #f6f5f2;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px color-mix(in oklab, var(--cp-gold) 40%, transparent);
}

/* -----------------------------------------------------------------------------
   Responsive - single column below 900px, matching the rest of the site's
   breakpoint.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .ak-container { padding-inline: 20px; }
  .ak-split, .ak-split--contact { grid-template-columns: 1fr; gap: 32px; }
  .ak-h1--contact { font-size: 36px; }
  .ak-form { padding: 28px 22px; }
  .ak-form__pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-btn::after { display: none; }
  .ak-btn:hover { transform: none; }
}