/* ============================================================================
   CONTACT — the conversion moment, staged as the "CONFIRM BUILD" panel.
   Full-bleed studio photo, hard scrim, one glass panel over it. Nothing else.
   ========================================================================= */

.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* the band's top edge — a hairline of the brand film, not a glow */
.contact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  z-index: 1;
  background: var(--holo);
  opacity: 0.35;
  pointer-events: none;
}

/* ---------------------------------------------------------------- backdrop */
.contact__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.contact__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 55%;
  transform: scale(1.04);
}
/* same idiom as .hero__scrim: solid at the seams, open where the shop shows */
.contact__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      100deg,
      color-mix(in oklab, var(--ink-950) 96%, transparent) 0%,
      color-mix(in oklab, var(--ink-950) 90%, transparent) 40%,
      color-mix(in oklab, var(--ink-950) 66%, transparent) 64%,
      color-mix(in oklab, var(--ink-950) 88%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      var(--ink-950) 0%,
      color-mix(in oklab, var(--ink-950) 62%, transparent) 26%,
      color-mix(in oklab, var(--ink-950) 78%, transparent) 72%,
      var(--ink-950) 100%
    );
}
.contact__hlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in oklab, var(--text) 4%, transparent) 0 1px,
    transparent 1px 5px
  );
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
}

/* ---------------------------------------------------------------- head */
.contact__intro {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  max-width: 620px;
}
.contact__head .section__index {
  padding-bottom: 6px;
}

/* ---------------------------------------------------------------- layout */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px);
  align-items: start;
  gap: clamp(24px, 3vw, 48px);
}

/* ---------------------------------------------------------------- form */
.contact__panel {
  --cut: 18px;
}
.contact__panel-body {
  display: grid;
  gap: var(--sp-6);
  padding: clamp(20px, 2.4vw, 34px);
}
.contact__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.contact__panel-title {
  margin-top: 6px;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

.contact__form {
  display: grid;
  gap: var(--sp-5);
}
/* JS swaps the form for the success panel — beat the .field grid to display:none */
.contact__form[hidden] {
  display: none;
}
.contact__fields {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-4);
}
.contact__field--wide {
  grid-column: 1 / -1;
}
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact__submit {
  --cut: 12px;
}

/* -------------------------------------------------------------- confirmed
   The only lime glow in the section: it marks an EARNED state.              */
.contact__success {
  --cut: 14px;
  --panel-line: linear-gradient(150deg, color-mix(in oklab, var(--li) 55%, transparent), var(--line) 60%, color-mix(in oklab, var(--li) 30%, transparent));
  filter: drop-shadow(0 0 22px color-mix(in oklab, var(--li) 16%, transparent));
  animation: contact-confirm var(--t-slow) var(--ease-snap) both;
}
.contact__success[hidden] {
  display: none;
}
.contact__success-body {
  display: grid;
  justify-items: start;
  gap: var(--sp-4);
  padding: clamp(20px, 2.4vw, 34px);
}
.contact__success-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  --cut: 8px;
  clip-path: var(--clip-bevel);
  background: color-mix(in oklab, var(--li) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--li) 50%, transparent),
    0 0 22px -6px var(--li);
  color: var(--li);
}
.contact__success-mark svg {
  width: 22px;
  height: 22px;
}
.contact__success-title {
  font-size: var(--fs-h3);
}
.contact__success-lead {
  max-width: 44ch;
}
/* .btn--ghost's inner span is inline — force it to fill when the button is --block */
.contact__mailto > span {
  width: 100%;
  justify-content: center;
}
.contact__success-note {
  font-size: var(--fs-sm);
}
@keyframes contact-confirm {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------- studio */
.contact__studio-body {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(20px, 2.4vw, 30px);
}
.contact__studio-title {
  font-size: var(--fs-h3);
}

.contact__lines {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
}
.contact__line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.contact__line-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  --cut: 7px;
  clip-path: var(--clip-bevel);
  background: var(--glass-hi);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--cy);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
.contact__line-icon svg {
  width: 17px;
  height: 17px;
}
.contact__line:hover .contact__line-icon {
  background: color-mix(in oklab, var(--cy) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-hot);
}
.contact__line-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.contact__line-txt {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.4;
}
.contact__link {
  /* phone + email are the two links most likely to be tapped on a phone —
     they get a real 26px target, not a 19px line of text (WCAG 2.5.8). */
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-block: 3px;
  font-size: var(--fs-sm);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast);
}
.contact__link:hover,
.contact__link:focus-visible {
  color: var(--cy);
}

/* the hours read as an instrument panel, so: a real table, tabular numerals */
.contact__hours {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.contact__hours-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-dim);
}
.contact__hours-head .icon {
  width: 14px;
  height: 14px;
  color: var(--cy);
}
.contact__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-hud);
  font-size: var(--fs-xs);
}
.contact__table th,
.contact__table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.contact__table th {
  text-align: left;
  font-weight: 600;
  letter-spacing: var(--track-hud);
  color: var(--text-dim);
}
.contact__table td {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.contact__table tr:last-child th,
.contact__table tr:last-child td {
  border-bottom: 0;
}

.contact__socials {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.contact__orbs {
  display: flex;
  gap: var(--sp-3);
}

.contact__note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.45;
}
.contact__note .icon {
  width: 16px;
  height: 16px;
  color: var(--go);
}

/* ============================================================== responsive */
@media (max-width: 1080px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .contact__studio {
    max-width: 560px;
  }
}

@media (max-width: 900px) {
  .contact__photo {
    object-position: 62% 50%;
  }
  .contact__scrim {
    background: linear-gradient(
      180deg,
      var(--ink-950) 0%,
      color-mix(in oklab, var(--ink-950) 82%, transparent) 34%,
      color-mix(in oklab, var(--ink-950) 90%, transparent) 70%,
      var(--ink-950) 100%
    );
  }
}

@media (max-width: 620px) {
  .contact__fields {
    grid-template-columns: 1fr;
  }
  .contact__panel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .contact__line-txt,
  .contact__link {
    font-size: var(--fs-xs);
  }
}

/* Reduced motion: the confirm panel appears, it just does not travel. */
@media (prefers-reduced-motion: reduce) {
  .contact__success {
    animation: none;
  }
}