/* ==========================================================================
   Contact landing page (Preston system)

   Loaded only by page-templates/contact.php. Depends on ir-tokens.css.

   KNOWN DEBT: the section/heading/button/field primitives here are near-copies
   of the ones in ir-booking.css, which are in turn near-copies of
   ir-pricing.css. Three landing pages now share a vocabulary that lives in
   three files. The right fix is one `ir-landing.css` holding the shared
   scope, with each page adding only what is unique to it. That refactor
   touches three live pages, so it is deliberately not bundled with this one.

   The form on this page is OURS — plain markup posting to the same HubSpot
   form id the [contact_form] shortcode used, so it can finally be styled.
   See page-templates/contact.php and assets/js/ir-contact.js.

   Everything is scoped under .ir-contact, so no rule leaks out and legacy
   selectors on bare elements do not reach in.
   ========================================================================== */

.ir-contact {
  font-family: var(--ir-font);
  color: var(--ir-text);
  background: var(--ir-white);
}

.ir-contact *,
.ir-contact *::before,
.ir-contact *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Scoped reset — REQUIRED, not defensive politeness. The theme styles input,
   textarea, select, button, ul and li globally and those rules reach inside
   any markup using them (main.css:10450 sets input height 52px and
   `outline: none !important` on focus; main.css:571 drops a mint dot into
   every li). A class selector outranks them only for properties it declares.

   `section` is deliberately absent — at (0,1,1) it would outrank every
   section skin below and flatten the hero and the FAQ band to white.
   -------------------------------------------------------------------------- */

.ir-contact input,
.ir-contact textarea,
.ir-contact select,
.ir-contact button {
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  transition: none;
  -webkit-appearance: none;
          appearance: none;
}

.ir-contact ul,
.ir-contact ol { margin: 0; padding: 0; list-style: none; }

.ir-contact ul li,
.ir-contact ol li {
  padding-left: 0;
  margin-top: 0;
  position: static;
  line-height: inherit;
}

/* `list-style: none` does not remove a generated pseudo-element; only
   `content: none` does. The position reset matters because main.css also
   sets position:absolute/left/top here, which any later rule declaring only
   `content` would inherit silently. */
.ir-contact ul li::before,
.ir-contact ol li::before { content: none; position: static; inset: auto; }

.ir-contact p { margin: 0; }

/* The theme underlines every <a>. The design underlines only prose links —
   a nav-style link list reads as a list, not as running text. Underlines are
   put back explicitly where copy is involved (the legal line, the error). */
.ir-contact a { transition: none; text-decoration: none; }
.ir-contact a:hover { text-decoration: none; }

/* Legacy sets font-family:"primary-bold" on h1–h6 (main.css:251); declaring
   a weight without the family renders the bold file at any weight. */
.ir-contact h1,
.ir-contact h2,
.ir-contact h3 {
  margin: 0;
  color: var(--ir-ink);
  font-family: var(--ir-font);
  font-weight: 600;          /* 600, never 700 — DESIGN-SYSTEM.md §2 */
  text-wrap: balance;
}

.ir-contact .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Clearance for a fixed header this page does not have. partials.css:522 and
   main.css:2023 set `.header-disabled main section:first-child
   { margin-top: 96px !important }`. The !important there is why this one is
   justified. Same override as ir-booking.css and ir-pricing.css. */
.header-disabled main .ir-contact .ir-contact__hero { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.ir-contact__wrap {
  max-width: var(--ir-wrap);
  margin: 0 auto;
  padding-inline: var(--ir-gutter);
}

.ir-contact__section { padding: 72px 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ir-contact__hero {
  padding: 80px 0 56px;
  background: linear-gradient(180deg, var(--ir-wash) 0%, var(--ir-white) 100%);
}

.ir-contact__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ir-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ir-contact__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--ir-radius-pill);
  background: var(--ir-brand);
}

.ir-contact__title {
  max-width: 17ch;
  margin-top: 18px;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -.035em;
}

.ir-contact__lede {
  max-width: 62ch;
  margin-top: 18px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ir-text);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Main: form left, sidebar right.

   The form leads because it is the capture mechanism. On narrow screens the
   grid collapses in source order — form, then sidebar — which is correct
   here: the visitor already read the headline above, so they know what the
   page is before meeting a field.
   -------------------------------------------------------------------------- */

.ir-contact__main { padding-bottom: 88px; }

.ir-contact__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */

.ir-contact__card {
  padding: 38px;
  border: 1px solid var(--ir-line);
  border-radius: 20px;
  background: var(--ir-white);
  box-shadow: 0 10px 40px rgba(23, 16, 63, .06);
}

.ir-contact__card-title {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.ir-contact__card-sub {
  margin-top: 8px;
  color: var(--ir-muted);
  font-size: 16px;
  line-height: 1.6;
}

.ir-contact__form { margin-top: 10px; }

.ir-contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   .ir-field — the form component. Copied from ir-booking.css; see the debt
   note at the top of this file.

   Persistent labels, not placeholders: a placeholder disappears the moment
   someone types, so nobody can check their own answers before submitting,
   and placeholder-only labelling fails WCAG 3.3.2.
   -------------------------------------------------------------------------- */

.ir-field {
  display: grid;
  gap: 5px;
  margin-top: 16px;
}

.ir-field__label {
  color: var(--ir-ink);
  font-size: 13px;
  font-weight: 500;
}

.ir-contact .ir-field__input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--ir-line-btn);
  border-radius: var(--ir-radius-md);
  background: var(--ir-white);
  color: var(--ir-ink);
  font-size: 16px;                      /* 16px stops iOS zooming on focus */
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ir-contact .ir-field__input::placeholder {
  color: var(--ir-faint);
  opacity: 1;
}

.ir-contact textarea.ir-field__input {
  min-height: 118px;
  resize: vertical;
}

/* appearance:none (in the reset above) removes the native arrow, so one is
   drawn back in. Inlined as a data: URI — an external image would be one
   more request for 300 bytes of chevron. */
.ir-contact .ir-field__select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236C6A85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* The theme sets `input:focus { outline: none !important }`. Restoring a
   visible focus state is not optional — DESIGN-SYSTEM.md §8. */
.ir-contact .ir-field__input:focus,
.ir-contact .ir-field__input:focus-visible {
  outline: none;
  border-color: var(--ir-brand);
  box-shadow: 0 0 0 3px rgba(74, 53, 240, .18);
}

.ir-contact .ir-field.is-error .ir-field__input { border-color: var(--ir-danger); }

.ir-contact .ir-field.is-error .ir-field__input:focus,
.ir-contact .ir-field.is-error .ir-field__input:focus-visible {
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .16);
}

.ir-field__error {
  display: none;
  gap: 6px;
  align-items: flex-start;
  color: var(--ir-danger);
  font-size: 12.5px;
  line-height: 1.5;
}

.ir-field.is-error .ir-field__error { display: flex; }

/* Shape as well as colour, so the state survives greyscale. */
.ir-field__error::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 14px; height: 14px;
  margin-top: 2px;
  border-radius: var(--ir-radius-pill);
  background: var(--ir-danger);
  color: var(--ir-white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.ir-contact__submit {
  margin-top: 22px;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
}

.ir-contact__legal {
  margin-top: 14px;
  color: var(--ir-faint);
  font-size: 13px;
  line-height: 1.6;
}

.ir-contact__legal a { color: var(--ir-brand); text-decoration: underline; }
.ir-contact__legal a:hover { color: var(--ir-brand-hover); }

/* Submit-level failure. Never a dead end — it names the alternative. */
.ir-contact__formerror {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ir-danger);
  border-radius: var(--ir-radius-sm);
  background: var(--ir-danger-tint);
  color: var(--ir-danger);
  font-size: 13.5px;
  line-height: 1.55;
}

.ir-contact__formerror.is-shown { display: block; }
.ir-contact__formerror a { color: inherit; font-weight: 500; text-decoration: underline; }

/* Replaces the form in place on success, so the card does not collapse and
   the page does not jump. */
.ir-contact__success {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--ir-line);
  border-radius: var(--ir-radius-lg);
  background: var(--ir-wash-2);
}

.ir-contact__success:focus { outline: none; }

.ir-contact__success-head {
  color: var(--ir-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ir-contact__success p + p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.6;
}

.ir-contact__success .ir-btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ir-contact .ir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--ir-radius-md);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}

.ir-contact .ir-btn:focus-visible {
  outline: 2px solid var(--ir-brand);
  outline-offset: 3px;
}

.ir-contact .ir-btn--primary {
  background: var(--ir-brand);
  color: var(--ir-white);
  box-shadow: var(--ir-shadow-cta);
}

.ir-contact .ir-btn--primary:hover { background: var(--ir-brand-hover); }

.ir-contact .ir-btn--secondary {
  border: 1px solid var(--ir-line-btn);
  background: var(--ir-white);
  color: var(--ir-ink);
}

.ir-contact .ir-btn--secondary:hover { background: var(--ir-wash); }

.ir-contact .ir-btn--block { width: 100%; }

.ir-contact .ir-btn[disabled] {
  opacity: .6;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.ir-contact__aside {
  display: grid;
  gap: 14px;
}

.ir-contact__panel {
  padding: 26px 24px;
  border: 1px solid var(--ir-line);
  border-radius: 16px;
  background: var(--ir-white);
}

/* The one panel that carries the brand border. Exactly one primary action
   per view — DESIGN-SYSTEM.md §3 — and this is it in the sidebar. */
.ir-contact__panel--primary {
  border-color: var(--ir-brand);
  background: var(--ir-wash-2);
}

.ir-contact__kicker {
  color: var(--ir-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ir-contact__panel-title {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.ir-contact__panel-body {
  margin: 6px 0 18px;
  font-size: 15px;
  line-height: 1.6;
}

.ir-contact__panel-head {
  margin-bottom: 14px;
  font-size: 17px;
}

.ir-contact__channels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Label above value, not beside it: two columns would wrap the email address
   at any sidebar width worth having. */
.ir-contact__channel {
  display: grid;
  gap: 2px;
}

.ir-contact__channel-label {
  color: var(--ir-faint);
  font-size: 13px;
  line-height: 1.4;
}

/* Targeted by class, never as `.ir-contact__channel span` — a bare-element
   selector inside a component is the exact trap DESIGN-SYSTEM.md §6 names,
   and it is how the previous version of this page broke. */
.ir-contact__channel a { color: var(--ir-brand); }
.ir-contact__channel a:hover { color: var(--ir-brand-hover); }

.ir-contact .ir-contact__channel-ink { color: var(--ir-ink); }
.ir-contact .ir-contact__channel-ink:hover { color: var(--ir-brand); }

.ir-contact__channel-value {
  color: var(--ir-text);
  font-size: 15px;
  line-height: 1.5;
}

.ir-contact__channel a,
.ir-contact__channel-value { font-size: 15px; }

.ir-contact__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.ir-contact__links a { color: var(--ir-brand); }
.ir-contact__links a:hover { color: var(--ir-brand-hover); }

.ir-contact__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ir-contact__stat {
  padding: 20px;
  border: 1px solid var(--ir-line);
  border-radius: var(--ir-radius-lg);
  background: var(--ir-wash-2);
}

.ir-contact__stat-figure {
  color: var(--ir-brand);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.ir-contact__stat-label {
  margin-top: 4px;
  color: var(--ir-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   FAQ band — the three questions that would otherwise arrive as messages.
   -------------------------------------------------------------------------- */

.ir-contact__faq {
  background: var(--ir-wash);
  border-top: 1px solid var(--ir-line);
  border-bottom: 1px solid var(--ir-line);
}

.ir-contact__h2 {
  font-size: clamp(28px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.ir-contact__sub {
  margin-top: 8px;
  color: var(--ir-muted);
  font-size: 17px;
  line-height: 1.6;
}

.ir-contact__faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}

.ir-contact__faq-card {
  padding: 24px;
  border: 1px solid var(--ir-line);
  border-radius: var(--ir-radius-lg);
  background: var(--ir-white);
}

.ir-contact__faq-card h3 {
  margin-bottom: 6px;
  font-size: 17px;
}

.ir-contact__faq-card p {
  color: var(--ir-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .ir-contact__grid { grid-template-columns: 1fr; }
  .ir-contact__aside { grid-template-columns: 1fr; }
  .ir-contact__faq-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .ir-contact__hero { padding: 56px 0 40px; }
  .ir-contact__main { padding-bottom: 56px; }
  .ir-contact__section { padding: 56px 0; }
  .ir-contact__card { padding: 26px 20px; }
  .ir-contact__faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Two fields side by side at 320px leaves each about 130px wide, which is
     narrower than the values they hold. */
  .ir-contact__row { grid-template-columns: 1fr; gap: 0; }
  .ir-contact__lede { font-size: 17px; }
  .ir-contact__card-title { font-size: 25px; }
  .ir-contact__stats { grid-template-columns: 1fr; }
}