/* KuarkTek — contact page */
.contact-page .nav .knob { opacity: 0; }

.contact-intro {
  min-height: 40svh;
  padding-top: var(--space-60);
  padding-bottom: var(--space-60);
  margin-top: var(--space-90);
}

.contact-intro__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.contact-intro__layout .section-label { grid-column: 1 / 4; }
.contact-intro__layout h1 {
  grid-column: 5 / 13;
  max-width: 20ch;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-display);
  text-indent: 15%;
  text-wrap: balance;
}
.contact-intro__layout h1 span { color: var(--muted); }

.contact-main { padding-bottom: var(--space-150); }
.contact-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, auto));
  gap: var(--gap-grid);
  align-items: stretch;
}

.contact-bento__form-card,
.contact-bento__card {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-md);
}

.contact-bento__form-card {
  display: flex;
  grid-column: 1 / 8;
  grid-row: 1 / 5;
  flex-direction: column;
  gap: var(--gap-6);
  padding: 40px;
  background: var(--white);
  color: var(--ink);
}

.contact-bento__form-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gap-6); }
.contact-bento__eyebrow { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-normal); line-height: var(--lh-text); }
.contact-bento__form-card .contact-bento__eyebrow { color: var(--muted); }
.contact-bento__form-header h2 { max-width: none; margin: var(--gap-3) 0 0; font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); line-height: var(--lh-heading); white-space: nowrap; }
.contact-bento__form-header h2 span { color: var(--muted); }
.contact-bento__form-mark { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid var(--ink); border-radius: var(--r-round); background: var(--ink); color: var(--white); font-size: calc(var(--fs-body) + 2px); transition: transform var(--dur-slow) var(--ease); }

.contact-project-form { display: flex; flex: 0 0 auto; flex-direction: column; gap: var(--gap-4); }
.contact-project-form__row { display: grid; gap: var(--gap-4); }
.contact-project-form__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-project-form__field { display: flex; min-width: 0; flex-direction: column; gap: var(--gap-2); color: var(--ink); font-size: var(--fs-tag); font-weight: var(--fw-bold); letter-spacing: var(--ls-normal); line-height: var(--lh-text); }
.contact-project-form input,
.contact-project-form select,
.contact-project-form textarea {
  width: 100%;
  border: 0;
  border-radius: var(--r-sm);
  outline: 0;
  background: var(--surface);
  color: var(--ink);
  font: 600 16px/1.125 var(--sans);
  letter-spacing: var(--ls-snug);
  box-shadow: none;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-project-form input,
.contact-project-form select { min-height: 0; padding: 12px 16px; }
.contact-project-form textarea { height: 90px; min-height: 90px; max-height: 90px; padding: 12px 16px; resize: none; }
.contact-project-form input::placeholder,
.contact-project-form textarea::placeholder { color: var(--muted); }
.contact-project-form input:focus,
.contact-project-form select:focus,
.contact-project-form textarea:focus { background: var(--white); box-shadow: 0 0 0 1px var(--surface); }
.contact-project-form select option { color: var(--ink); background: var(--white); }

.contact-project-form__services { margin: 0; padding: 0; border: 0; }
.contact-project-form__services legend { margin-bottom: var(--gap-2); color: var(--muted); font-size: var(--fs-tag); font-weight: var(--fw-bold); }
.contact-project-form__services > div { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.contact-project-form__services label { position: relative; cursor: pointer; }
.contact-project-form__services input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.contact-project-form__services span { display: inline-flex; min-height: 34px; align-items: center; padding: 0 var(--gap-4); border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: var(--fs-tag); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.contact-project-form__services input:checked + span,
.contact-project-form__services input:focus-visible + span { background: var(--brand); color: var(--white); }
.contact-project-form__select { position: relative; display: block; }
.contact-project-form__select select { appearance: none; cursor: pointer; }
.contact-project-form__select::after { position: absolute; top: 50%; right: var(--gap-4); width: 8px; height: 8px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); content: ""; pointer-events: none; transform: translateY(-70%) rotate(45deg); }

.contact-project-form__footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-4); margin-top: 0; }
.contact-project-form__upload { position: relative; display: flex; width: 100%; min-width: 0; flex-direction: column; gap: var(--gap-2); color: var(--ink); font-size: var(--fs-tag); font-weight: var(--fw-bold); }
.contact-project-form__upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.contact-project-form__upload > span {
  display: grid;
  width: 100%;
  min-height: 50px;
  place-items: center;
  padding: var(--gap-3);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--muted);
  font-weight: var(--fw-body);
  cursor: pointer;
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
  justify-content: center;
  gap: var(--gap-2);
}
.contact-project-form__upload strong { color: var(--brand); }
.contact-project-form__actions { display: flex; width: 100%; align-items: flex-end; justify-content: space-between; gap: var(--gap-6); }
.contact-project-form__actions .site-footer__disclaimer { max-width: 70ch; }
.contact-project-form__submit { width: auto; min-height: 50px; height: 50px; }
.contact-project-form__status { min-height: 0; margin: 0; color: var(--brand); font-size: var(--fs-tag); }
.contact-project-form__status:empty { display: none; }

.contact-bento__card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-6); padding: var(--gap-6); background: var(--white); color: var(--ink); }
.contact-bento__card h3 { max-width: var(--measure-sm); margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); line-height: var(--lh-heading); }
.contact-bento__card--business { position: relative; grid-column: 8 / 13; grid-row: 1; min-height: 210px; isolation: isolate; }
.contact-bento__card--business::before { position: absolute; z-index: -1; top: -255px; right: -175px; width: 520px; height: 520px; border-radius: var(--r-round); background: repeating-radial-gradient(circle, transparent 0 38px, var(--line) 39px 40px); content: ""; opacity: .2; pointer-events: none; }
.contact-bento__card--business > div { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-5); }
.contact-bento__card--business h3 { max-width: 22ch; }
.contact-bento__email { position: relative; z-index: 1; flex: 0 0 auto; padding-bottom: var(--gap-1); border-bottom: 1px solid currentColor; color: var(--ink); font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-heading); transition: color var(--dur-fast) var(--ease); }
.contact-bento__email:hover { color: var(--brand); }
.contact-bento__card--address { grid-column: 8 / 11; grid-row: 2 / 4; min-height: 330px; }
.contact-bento__card--address address { margin: auto 0; font-size: var(--fs-h3); font-style: normal; font-weight: var(--fw-medium); letter-spacing: var(--ls-snug); line-height: var(--lh-body); }
.contact-bento__card--address address strong { color: var(--brand); }
.contact-bento__card--address p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.contact-bento__card--phone { grid-column: 11 / 13; grid-row: 2; min-height: 163px; }
.contact-bento__metric { font-size: clamp(var(--fs-sm), 1.05vw, var(--fs-h4)); line-height: var(--lh-heading); white-space: nowrap; }
.contact-bento__metric strong { font-size: inherit; }
.contact-bento__metric:hover { color: var(--brand); }
.contact-bento__card--socials { grid-column: 11 / 13; grid-row: 3; min-height: 163px; }
.contact-bento__social-list { display: flex; align-items: center; gap: var(--gap-4); }
.contact-bento__social-list a { display: grid; width: 24px; height: 24px; place-items: center; color: var(--muted); transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.contact-bento__social-list svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.contact-bento__social-list a:hover { color: var(--brand); }
.contact-bento__card--process { grid-column: 8 / 13; grid-row: 4; min-height: 190px; }
.contact-bento__card--process ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-4); }
.contact-bento__card--process li { display: flex; max-width: 200px; align-items: flex-start; gap: var(--gap-3); color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.contact-bento__card--process li .section-label__icon { margin-top: 2px; }
.contact-bento__card--process strong { color: var(--ink); font-weight: var(--fw-bold); }
.contact-clients { padding-bottom: var(--space-150); }
.contact-clients__header,
.contact-explore__header { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-6); }
.projects_clients { position: static; flex: 0 0 auto; }
.contact-clients__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-grid); margin-top: var(--space-60); }
.contact-client-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: clamp(118px, 9.3vw, 178px);
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--white);
  transition: opacity var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.contact-client-card > span { display: grid; width: min(100%, 180px); aspect-ratio: 1; place-items: center; overflow: hidden; }
.contact-client-card img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-slow) var(--ease); }
.contact-client-card .contact-client-card__logo--portrait { transform: scale(.82); }
.contact-client-card .contact-client-card__logo--wide { transform: scale(.9); }
.contact-client-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.contact-explore { padding-bottom: var(--space-150); }
.contact-explore__header { margin-bottom: var(--space-60); }
.contact-explore__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
.contact-explore-card { display: flex; min-width: 0; flex-direction: column; gap: var(--gap-4); color: var(--ink); }
.contact-explore-card__media { position: relative; display: block; aspect-ratio: 1.42; overflow: hidden; border-radius: var(--r-md); background: var(--white); }
.contact-explore-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.025); transition: transform var(--dur-slower) var(--ease); will-change: transform; }
.contact-explore-card__meta { margin: 0; padding: 0 var(--gap-1); font-size: var(--fs-h3); font-weight: var(--fw-bold); cursor: default; }
.contact-explore-card__media:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.contact-explore-card__media .project__distortion-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-slower) var(--ease);
  will-change: transform;
}
.contact-explore-card__media .project__distortion-canvas.is-ready { opacity: 1; }

@media (hover: hover) {
  .contact-bento__form-card:hover .contact-bento__form-mark { transform: rotate(90deg); }
  .contact-clients__grid:has(.contact-client-card:hover) .contact-client-card:not(:hover) { filter: blur(5px); opacity: .65; }
  .contact-client-card:hover { transform: scale(1.01); }
  .contact-client-card:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.06); }
  .contact-client-card:hover .contact-client-card__logo--portrait { transform: scale(.88); }
  .contact-client-card:hover .contact-client-card__logo--wide { transform: scale(.96); }
  .contact-bento__social-list a:hover { transform: translateY(-2px); }
}
.contact-bento__form-card:focus-within .contact-bento__form-mark { transform: rotate(90deg); }

@media (max-width: 980px) {
  .contact-intro__layout h1 { grid-column: 5 / 13; }
  .contact-bento__form-card { grid-column: 1 / 13; grid-row: auto; }
  .contact-bento__card--business { grid-column: 1 / 13; grid-row: auto; }
  .contact-bento__card--address { grid-column: 1 / 7; grid-row: auto; }
  .contact-bento__card--phone { grid-column: 7 / 13; grid-row: auto; }
  .contact-bento__card--socials { grid-column: 7 / 13; grid-row: auto; }
  .contact-bento__card--process { grid-column: 1 / 13; grid-row: auto; }
  .contact-clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .contact-intro { min-height: auto; }
  .contact-intro__layout { display: block; }
  .contact-intro__layout .section-label { margin-bottom: var(--space-30); }
  .contact-intro__layout h1 { max-width: 12ch; font-size: var(--fs-display-lg); }
  .contact-main { padding-bottom: var(--space-90); }
  .contact-bento { display: flex; flex-direction: column; }
  .contact-bento__form-card,
  .contact-bento__card { width: 100%; min-height: auto; }
  .contact-bento__form-card { padding: var(--gap-6); }
  .contact-bento__form-header h2 { font-size: var(--fs-h3); }
  .contact-project-form__row--two { grid-template-columns: 1fr; }
  .contact-project-form__actions { align-items: flex-start; flex-direction: column; }
  .contact-bento__card--business > div { align-items: flex-start; flex-direction: column; }
  .contact-bento__card--process ul { grid-template-columns: 1fr; }
  .contact-clients,
  .contact-explore { padding-bottom: var(--space-90); }
  .contact-clients__header { align-items: flex-start; }
  .projects_clients { min-height: 40px; padding-inline: var(--gap-4); font-size: var(--fs-micro); }
  .contact-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-30); }
  .contact-client-card { min-height: 116px; }
  .contact-client-card > span { width: 130px; }
  .contact-explore__header { margin-bottom: var(--space-30); }
  .contact-explore__grid { grid-template-columns: 1fr; gap: var(--space-30); }
  .contact-explore-card__media { aspect-ratio: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-client-card,
  .contact-client-card img,
  .contact-explore-card__media img,
  .contact-explore-card__media .project__distortion-canvas { transition-duration: .01ms; }
}