/*
 * contact: cobalt field, the Volume Knob sign-off, ink call cards and the callback form.
 * The heading's resting CSS is the final, loudest state (wdth 125, wght 900), which is
 * what visitors see with reduced motion or no JS. contact.js scrubs it from quiet to loud.
 */

.contact {
  --err: #B3261E;
  position: relative;
  padding-block: var(--section-y) clamp(80px, 10vw, 160px);
  overflow-x: clip;
}

/* ---------- Volume Knob heading ---------- */

.contact__title {
  --wdth: 125;
  --wght: 900;
  --ls: -0.04;
  --fit: var(--fit-m, 1);
  margin: 0 0 clamp(40px, 6vw, 96px);
  font-family: var(--f-display);
  font-weight: 900;
  font-variation-settings: 'wdth' var(--wdth), 'wght' var(--wght);
  font-size: calc(var(--fs-close) * var(--fit));
  line-height: .9;
  letter-spacing: calc(var(--ls) * 1em);
  color: var(--paper);
}
/* Phones and tablets: one word per line, left-aligned. min-content wraps the line at
   every space, so each line stays one text run and a word's start never moves while
   the Volume Knob changes its width (no layout shift). */
.contact__line {
  display: block;
  width: min-content;
}

/* Computers: each admin line on one row, flush right. The line is laid out from the
   left edge and moved into place with translate (container width minus its own
   width), so as the axes scrub the text grows leftwards visually while its layout
   position stays put. That keeps the effect without counting as a layout shift. */
@media (min-width: 1024px) {
  .contact__title {
    --fit: var(--fit-d, 1);
    container-type: inline-size;
    line-height: .86;
    /* the last line sits flush right with the grid; the right-side bearing of the full stop is optically trimmed */
    margin-right: -.02em;
  }
  .contact__line {
    width: max-content;
    white-space: nowrap;
    translate: calc(100cqi - 100%) 0;
  }
}

/* ---------- layout ---------- */

.contact__grid {
  display: grid;
  gap: 56px;
}
/* The 7/5 split needs room for the chips to sit two to a row, so it starts at 1280.
   Below that the calls and the form stack, with the form at full width. */
@media (min-width: 1280px) {
  .contact__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .contact__calls { grid-column: 1 / span 7; padding-right: clamp(0px, 3vw, 48px); }
  .callback { grid-column: 8 / span 5; }
}
/* The form card is about twice as tall as the call column, so the call column rides
   along beside it (clear of the fixed header) instead of leaving a block of empty
   cobalt. Only where the whole column fits comfortably in the window. */
@media (min-width: 1280px) and (min-height: 640px) {
  .contact__calls {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .contact__grid { gap: 72px; }
}

.contact__lede {
  max-width: 34ch;
  font-size: var(--fs-body-l);
  line-height: 1.45;
  color: var(--paper);
}
.contact__hours {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-soft);
}

/* ---------- ink call cards ---------- */

.call-cards {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .call-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
}

.call-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 88px;
  padding: 16px 56px 16px 20px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  container-type: inline-size;
  box-shadow: 0 28px 48px -28px rgba(0, 10, 60, .75);
  transition: background-color .2s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.call-card:hover { background: var(--graphite); }
.call-card__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: 1.125rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.call-card__num {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 75%;
  /* the number never outgrows its card: 12 tabular characters are about 5.9em wide */
  font-size: min(var(--fs-phone-big), 16cqi);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.call-card__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  color: var(--lime);
  transition: transform .2s var(--ease-soft);
}
.call-card:hover .call-card__arrow { transform: translate(2px, -2px); }
.call-card:active { background: var(--graphite); }

@media (min-width: 768px) {
  .call-card { min-height: 120px; padding: 22px 56px 22px 24px; }
  .call-card__name { font-size: 1.25rem; }
  .call-card__arrow { top: 20px; right: 20px; }
}

/* ---------- text links and vCard ---------- */

.contact__links {
  display: grid;
  margin-top: 20px;
  border-bottom: 1px solid rgba(238, 237, 232, .2);
}
.contact__links li { border-top: 1px solid rgba(238, 237, 232, .2); }
.contact__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--paper);
  text-decoration: none;
}
.contact__link svg { flex: none; width: 20px; height: 20px; color: var(--lime); }
.contact__link span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: rgba(238, 237, 232, .45);
  transition: text-decoration-color .2s var(--ease-soft);
}
.contact__link:hover span { text-decoration-color: currentColor; }

/* From tablets up the text links sit in the same two columns as the call cards, each
   one under its person's card, with the vCard row spanning both, so every rule lines
   up with the cards above it. */
@media (min-width: 768px) {
  .contact__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    margin-top: 28px;
  }
  .contact__links li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .contact__link { font-size: 1rem; }
}

/* ---------- callback form card ---------- */

.callback {
  --focus: var(--cobalt);
  --fg-soft: var(--ink-soft);
  --link: var(--cobalt);
  position: relative;
  min-width: 0;
  padding: 24px 20px 24px;
  border-radius: 6px;
  background: var(--paper-hi);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 10, 60, .2), 0 44px 80px -36px rgba(0, 10, 60, .7);
  container-type: inline-size;
}
@media (min-width: 768px) {
  .callback { padding: 28px; }
}
.callback__title {
  max-width: 22ch;
  margin-bottom: 24px;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 96%;
  font-size: clamp(1.375rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.callback__title[hidden] { display: none; }

.cb {
  display: grid;
  gap: 22px;
}
.cb[hidden] { display: none; }
.cb-row {
  display: grid;
  gap: 22px;
}
@container (min-width: 460px) {
  .cb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.cb-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.cb-label {
  padding: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 75%;
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.cb-opt {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink-soft);
}
.cb-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
  -webkit-appearance: none;
  appearance: none;
}
.cb-input:hover { border-color: var(--ink); }
.cb-input:focus { border-color: var(--ink); }
.cb-input:focus-visible { outline-offset: 2px; }
.cb-input--tel { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cb-textarea { min-height: calc(3 * 1.4em + 26px); resize: vertical; }
.cb-input[aria-invalid='true'] {
  border-color: var(--err);
  box-shadow: inset 0 0 0 1px var(--err);
}
.cb-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--err);
}
.cb-error::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: .45em;
  border-radius: 50%;
  background: currentColor;
}
.cb-error[hidden], .cb-status[hidden] { display: none; }
.cb-status {
  padding: 12px 14px;
  border-left: 3px solid var(--err);
  border-radius: 2px;
  background: rgba(179, 38, 30, .07);
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.4;
}

/* Service chips: the shared .chip, made selectable. The whole 48px row is the tap target. */
.cb-services legend { margin-bottom: 4px; }
.cb-chips {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
}
.cb-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
}
.cb-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cb-chip .chip {
  gap: 7px;
  padding-left: 8px;
  border-color: var(--ink-soft);
  color: var(--ink);
  transition: background-color .15s var(--ease-soft), color .15s var(--ease-soft), border-color .15s var(--ease-soft);
}
.cb-chip:hover .chip { border-color: var(--ink); background: rgba(17, 17, 16, .05); }
.cb-chip__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.cb-chip__box svg { width: 11px; height: 11px; opacity: 0; }
.cb-chip input:checked + .chip {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.cb-chip input:checked + .chip .cb-chip__box {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
}
.cb-chip input:checked + .chip .cb-chip__box svg { opacity: 1; }
.cb-chip input:focus-visible + .chip {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Honeypot: off screen and not focusable for people, still in the form for bots.
   visibility: hidden also keeps browser autofill and password managers out of it,
   since they only fill fields a person could reach. It still posts with the form. */
.cb-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

.cb-submit {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}
.cb-button { width: 100%; justify-content: center; }
.cb-button[aria-busy='true'] { cursor: progress; background: var(--cobalt-deep); }
.cb-small {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--ink-soft);
}
.cb-small a { color: var(--cobalt); }
@container (min-width: 460px) {
  .cb-submit { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px; }
  .cb-button { width: auto; padding-inline: 22px 26px; }
  .cb-small { max-width: 30ch; }
}

/* ---------- success ---------- */

.callback__done {
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 8px 0 4px;
  border-radius: 4px;
}
.callback__done[hidden] { display: none; }
.callback__done:focus { outline: none; }
.callback__done:focus-visible { outline: 3px solid var(--focus); outline-offset: 8px; }
.callback__tick {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
}
.callback__tick svg { width: 28px; height: 28px; }
.callback__done-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  line-height: .92;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}
.callback__done-msg {
  max-width: 30ch;
  font-size: var(--fs-body-l);
  line-height: 1.45;
}