/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — CONTACT (contact-us.html)
   Loaded after blog.css on body.v2.tx.blog, so it uses the same tokens
   (--tx-*) and primitives (.tx-label, .txbtn, .txlink, .ba-cta).
   Everything new is scoped to .ct. The booking page (contact.html) is a
   different page and keeps its own styles.
   ══════════════════════════════════════════════════════════════════════════ */

/* The closing panel sits inside this article, where blog.css's gap under it (main > .ba-cta) does not reach, so it touched the footer. */
.blog .ct { padding-bottom: clamp(60px, 8vw, 110px); }
/* The small labels ("CONTACT · MINEERS SMILE CENTER"): as a flex row, the gap fell between the first word and the dot, so the dot hung next to
   the second word. As running text the dot has a space on each side. */
.blog .ct .tx-label { display: block; }
.blog .ct .tx-label::before { display: inline-block; vertical-align: middle; margin: -3px 14px 0 0; }

.blog .ct .ba-head { max-width: 900px; margin-left: 0; margin-right: 0; }
.blog .ct .ba-lede { text-wrap: pretty; }
.blog .ct .ba-lede a { border-bottom: 1px solid var(--tx-champ); transition: color .3s; }
.blog .ct .ba-lede a:hover { color: var(--tx-champ); }

.blog .ct-h { font: 500 clamp(34px, 3.6vw, 54px)/1 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.blog .ct-h em { font-style: italic; color: var(--tx-champ); }

/* ── four ways to reach us ──────────────────────────────────────────────── */
.blog .ct-ways { margin-top: clamp(44px, 6vw, 84px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.blog .ct-way {
  position: relative; display: grid; align-content: start; gap: 10px;
  padding: 26px 0 32px; border-top: 1px solid var(--tx-line);
}
.blog .ct-way:nth-last-child(-n + 2) { border-bottom: 1px solid var(--tx-line); }     /* the last row is closed, like the rest */
/* the arrow sits beside the label, so only the label keeps clear of it: the value and the note get the whole card */
.blog .ct-way__k { padding-right: 44px; font: 500 11px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-champ); }
/* one size for all four, so the cards in a row line up (the email used to be set smaller than the address beside it) */
.blog .ct-way__v { font: 500 clamp(26px, 2.7vw, 38px)/1.1 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; transition: color .4s var(--tx-ease); }
.blog .ct-way__v--long { overflow-wrap: normal; white-space: nowrap; }
.blog .ct-way__n { font: 400 15px/1.55 Inter, Arial, sans-serif; color: var(--tx-soft); }
.blog .ct-way::after {
  content: "→"; position: absolute; right: 0; top: 24px;
  font: 400 22px/1 Inter, sans-serif; color: var(--tx-soft);
  transition: transform .6s var(--tx-ease), color .4s var(--tx-ease);
}
.blog .ct-way:hover .ct-way__v { color: var(--tx-champ); }
.blog .ct-way:hover::after { transform: translateX(6px); color: var(--tx-champ); }
.blog .ct-way:focus-visible { outline: 2px solid var(--tx-champ); outline-offset: -2px; }

/* ── opening hours + the message box ────────────────────────────────────── */
.blog .ct-split {
  margin-top: clamp(56px, 8vw, 110px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start;
}
.blog .ct-hours__list { margin-top: 30px; border-top: 1px solid var(--tx-line); }
.blog .ct-hours__list > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--tx-line);
}
.blog .ct-hours__list dt { font: 500 11px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-soft); }
.blog .ct-hours__list dd { margin: 0; font: 500 clamp(22px, 2vw, 28px)/1.1 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.blog .ct-hours__list .is-urgent dt { color: var(--tx-champ); }
.blog .ct-hours__note { margin-top: 24px; max-width: 420px; font: 400 15px/1.65 Inter, Arial, sans-serif; color: var(--tx-soft); }
.blog .ct-hours__note a { color: var(--tx-ink); border-bottom: 1px solid var(--tx-champ); }
.blog .ct-hours__note a:hover { color: var(--tx-champ); }

.blog .ct-form { margin-top: 30px; display: grid; gap: 26px; }
.blog .ct-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.blog .ct-form label {
  display: grid; gap: 6px;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-soft);
}
.blog .ct-form label i { margin-left: .5em; font-style: normal; letter-spacing: .06em; text-transform: none; opacity: .85; }   /* "(optional)" sits on the label's line */
.blog .ct-form :is(input, textarea) {
  width: 100%; margin: 0; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(37, 32, 28, .35); border-radius: 0;
  background: transparent; color: var(--tx-ink);
  font: 400 17px/1.5 Inter, Arial, sans-serif; letter-spacing: 0; text-transform: none;
  transition: border-color .3s;
}
.blog .ct-form :is(input, textarea):hover { border-bottom-color: rgba(37, 32, 28, .6); }
/* no browser resize grip in the corner: the box grows with what is written (where the browser can), up to a limit */
.blog .ct-form textarea { min-height: 160px; max-height: 340px; resize: none; field-sizing: content; }
.blog .ct-form :is(input, textarea)::placeholder { color: #7a6f64; }
.blog .ct-form :is(input, textarea):focus { outline: none; border-bottom-color: var(--tx-champ); box-shadow: 0 1px 0 0 var(--tx-champ); }
.blog .ct-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.blog .ct-form__note { max-width: 520px; font: 400 13.5px/1.65 Inter, Arial, sans-serif; color: var(--tx-soft); }

/* ── find us ────────────────────────────────────────────────────────────── */
.blog .ct-find { margin-top: clamp(64px, 9vw, 130px); }
.blog .ct-find__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; }
.blog .ct-find address { margin-top: 18px; font: 400 clamp(19px, 1.6vw, 22px)/1.5 var(--serif); font-style: normal; color: var(--tx-ink); }
.blog .ct-map { margin-top: clamp(26px, 3vw, 40px); background: var(--tx-cream); }
.blog .ct-map .map-frame { display: block; width: 100%; }

@media (max-width: 1000px) {
  .blog .ct-split { grid-template-columns: minmax(0, 1fr); }
  .blog .ct-hours__note { max-width: 560px; }
}
@media (max-width: 700px) {
  .blog .ct-ways { grid-template-columns: minmax(0, 1fr); }
  .blog .ct-way { padding-bottom: 26px; }
  .blog .ct-way:nth-last-child(2) { border-bottom: 0; }
  .blog .ct-form__row { grid-template-columns: minmax(0, 1fr); }
  .blog .ct-form__actions .txbtn { width: 100%; }
  .blog .ct-hours__list dd { white-space: normal; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .blog .ct-way::after, .blog .ct-way__v, .blog .ct-form :is(input, textarea) { transition: none; }
}