/*
 * Contact Us page (page-contact.php). Loaded only on that template, after
 * inner.css (page hero + CTA box).
 *
 * Built on main.css tokens and patterns: white cards with the soft shadow
 * of .testi__float, navy hover like .svc, numbered navy/cyan/coral circles
 * like the homepage process ticks, .eyebrow/.title/.btn. Same breakpoints
 * as main.css (1100 / 860 / 600).
 *
 * Section rhythm: navy hero → contact cards (overlapping the hero) → mist
 * form band → white offices & map → CTA box → navy footer.
 */

/* ---------- 1. Hero: keep the photo badge clear of the overlapping cards ---------- */
.inner-hero__badge{ bottom:120px; }

/* ---------- 2. Contact detail cards ---------- */
.ct-info{ position:relative; z-index:3; margin-top:-80px; }
.ct-info__grid{ display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0,1fr)); gap:20px; }
.ct-card{
  position:relative; display:flex; flex-direction:column;
  padding:36px 32px 34px;
  background:#fff; color:var(--ink-2);
  box-shadow:10px 4px 60px rgba(161,161,161,.25);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.ct-card__ico{ width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:var(--mist); color:var(--navy); transition:background .35s, color .35s; }
.ct-card__ico svg{ width:32px; height:32px; }
.ct-card__title{ margin-top:26px; font-size:1.3rem; font-weight:600; line-height:1.3; transition:color .35s; }
.ct-card p{ margin-top:10px; font-size:.98rem; line-height:1.65; overflow-wrap:anywhere; transition:color .35s; }
.ct-card__link{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; font-weight:600; color:var(--navy); transition:color .35s; }
.ct-card__link svg{ width:14px; height:14px; transition:transform .3s; }
a.ct-card:hover, a.ct-card:focus-visible{ background:var(--navy); transform:translateY(-4px); }
a.ct-card:hover .ct-card__ico, a.ct-card:focus-visible .ct-card__ico{ background:rgba(255,255,255,.1); color:#fff; }
a.ct-card:hover .ct-card__title, a.ct-card:focus-visible .ct-card__title{ color:#fff; }
a.ct-card:hover p, a.ct-card:focus-visible p{ color:rgba(255,255,255,.8); }
a.ct-card:hover .ct-card__link, a.ct-card:focus-visible .ct-card__link{ color:var(--sky); }
a.ct-card:hover .ct-card__link svg{ transform:rotate(45deg); }

/* ---------- 3. Contact form ---------- */
.ct-form{ margin-top:120px; background:var(--mist); }
.ct-form__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; align-items:start; }
.ct-form__intro{ position:sticky; top:120px; }
.ct-form__intro .title{ max-width:460px; }
.ct-form__lead{ max-width:460px; margin-top:22px; font-size:1.05rem; line-height:1.75; }
.ct-steps{ margin-top:40px; border-top:1px solid var(--line); }
.ct-steps li{ display:flex; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); }
.ct-steps__n{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--ff-head); font-size:.9rem; font-weight:600;
}
.ct-steps li:nth-child(2) .ct-steps__n{ background:var(--cyan-2); }
.ct-steps li:nth-child(3) .ct-steps__n{ background:var(--coral); }
.ct-steps h3{ font-size:1.15rem; font-weight:600; line-height:1.35; }
.ct-steps p{ margin-top:4px; font-size:.95rem; line-height:1.6; }

.ct-form__card{ padding:52px 48px; background:#fff; box-shadow:10px 4px 60px rgba(161,161,161,.2); }
.ct-form__title{ margin-bottom:28px; font-size:1.6rem; font-weight:600; line-height:1.3; }
.ct-fields{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 20px; }
.ct-field--full{ grid-column:1 / -1; }
.ct-field label{ display:block; margin-bottom:8px; font-size:.92rem; font-weight:500; color:var(--ink); }
.ct-req{ color:var(--coral); }
.ct-opt{ font-weight:400; color:var(--ink-2); }
.ct-field input, .ct-field select, .ct-field textarea{
  width:100%; min-height:54px; padding:14px 16px;
  border:1px solid var(--line); border-radius:6px; background:#fff;
  font:inherit; font-size:1rem; color:var(--ink);
  -webkit-appearance:none; appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
.ct-field select{
  padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1.5 7 6.5l6-5' fill='none' stroke='%2307283A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center; background-size:14px 8px;
}
.ct-field textarea{ min-height:160px; resize:vertical; line-height:1.6; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,163,199,.15); }
.ct-field.is-invalid input, .ct-field.is-invalid select, .ct-field.is-invalid textarea{ border-color:var(--coral); }
.ct-field.is-invalid input:focus, .ct-field.is-invalid select:focus, .ct-field.is-invalid textarea:focus{ box-shadow:0 0 0 3px rgba(214,93,87,.15); }
.ct-field__err{ margin-top:6px; font-size:.85rem; line-height:1.45; color:#A6392F; }

.ct-form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:30px; }
.ct-form__submit{ min-width:190px; }
.ct-form__submit:disabled{ cursor:progress; opacity:.65; }
.ct-form__note{ max-width:320px; font-size:.86rem; line-height:1.55; }

.ct-status{ margin-bottom:24px; padding:14px 18px; border-left:3px solid var(--line); font-size:.95rem; line-height:1.55; color:var(--ink); }
.ct-status:focus{ outline:none; }
.ct-status--success{ background:rgba(0,163,199,.08); border-color:var(--cyan); }
.ct-status--error{ background:rgba(214,93,87,.08); border-color:var(--coral); }

/* Honeypot: off-screen for people, still in the form for bots. */
.ct-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- 4. Offices & map ---------- */
.ct-offices__grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:30px; align-items:stretch; }
.ct-offices__grid--no-map{ grid-template-columns:1fr; }
.ct-offices__grid--no-map .ct-offices__list{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.ct-offices__list{ display:grid; gap:14px; align-content:start; }
.ct-office{
  position:relative; display:flex; gap:18px;
  padding:26px 28px;
  background:var(--mist); border-left:3px solid transparent;
  transition:background .3s, border-color .3s;
}
.ct-office__pick{ position:absolute; inset:0; z-index:1; width:100%; cursor:pointer; }
.ct-office__pick:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }
.ct-office__ico{ flex:none; width:34px; height:34px; color:var(--navy); transition:color .3s; }
.ct-office h3{ font-size:1.25rem; font-weight:600; line-height:1.3; transition:color .3s; }
.ct-office p{ margin-top:8px; font-size:.95rem; line-height:1.6; transition:color .3s; }
.ct-office__links{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:4px 18px; }
.ct-office__links a{ font-weight:500; color:var(--navy); overflow-wrap:anywhere; transition:color .2s; }
.ct-office__links a:hover{ color:var(--coral); }
.ct-office:hover{ background:#DDEDF3; }
.ct-office.is-active{ background:var(--navy); border-color:var(--coral); }
.ct-office.is-active .ct-office__ico, .ct-office.is-active h3{ color:#fff; }
.ct-office.is-active p{ color:rgba(255,255,255,.8); }
.ct-office.is-active .ct-office__links a{ color:var(--sky); }
.ct-office.is-active .ct-office__links a:hover{ color:var(--coral-2); }
.ct-map{ position:relative; min-height:460px; background:var(--mist); }
.ct-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .inner-hero__badge{ bottom:104px; }
  .ct-info__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ct-form{ margin-top:88px; }
  .ct-form__grid{ grid-template-columns:1fr; gap:48px; }
  .ct-form__intro{ position:static; max-width:640px; }
  .ct-offices__grid{ grid-template-columns:1fr; }
  .ct-offices__list{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
  .ct-map{ min-height:380px; }
}

@media (max-width:860px){
  .inner-hero__badge{ bottom:64px; }
  .ct-info{ margin-top:-40px; }
  .ct-form{ margin-top:72px; }
}

@media (max-width:600px){
  .ct-info__grid{ grid-template-columns:1fr; gap:14px; }
  .ct-card{ padding:28px 24px; }
  .ct-form__card{ padding:34px 22px; }
  .ct-fields{ grid-template-columns:1fr; }
  .ct-form__submit{ width:100%; }
  .ct-office{ padding:22px 20px; }
  .ct-map{ min-height:320px; }
}

/* Contact Form 7 output inside the form card */
.ct-form__form .wpcf7-form-control-wrap{ display:block; }
.ct-form__form .wpcf7-form p{ margin:0; }
.ct-form__form .wpcf7-not-valid{ border-color:var(--coral); }
.ct-form__form .wpcf7-not-valid-tip{ margin-top:6px; font-size:.85rem; line-height:1.45; color:#A6392F; }
.ct-form__form .wpcf7-response-output{ margin:24px 0 0 !important; padding:14px 18px !important; border:0 !important; border-left:3px solid var(--line) !important; font-size:.95rem; line-height:1.55; color:var(--ink); }
.ct-form__form .wpcf7 form.sent .wpcf7-response-output{ background:rgba(0,163,199,.08); border-color:var(--cyan) !important; }
.ct-form__form .wpcf7 form.invalid .wpcf7-response-output, .ct-form__form .wpcf7 form.failed .wpcf7-response-output, .ct-form__form .wpcf7 form.unaccepted .wpcf7-response-output{ background:rgba(214,93,87,.08); border-color:var(--coral) !important; }
.ct-form__form .wpcf7-spinner{ margin:0 0 0 12px; }
.ct-form__form input.ct-form__submit{ -webkit-appearance:none; appearance:none; cursor:pointer; }
.ct-form__form .ct-field br{ display:none; }