/* =========================================================================
   ULTIMATE Contact Page — v1.5.1
   Every block is labelled. Search the name to find it.

   Colours and fonts are NOT hard coded here. They come from the variables
   below, which the plugin overwrites from the settings screen. Change a
   colour in WP admin and every place that uses it follows.

   NOTE: the brand tokens file assumes html{font-size:62.5%}. We do NOT set
   that here because it would resize the whole theme. Sizes below are px
   and clamp() instead.
   ========================================================================= */

/* // CSS NAME: ultimate-contact-tokens // */
.ult-contact,
.ult-news {
  /* --- overwritten from WP admin --- */
  --ult-teal-500:#00ADBC;
  --ult-teal-600:#008F9C;
  --ult-teal-700:#00747F;
  --ult-ink:#0E1417;
  --ult-amber:#00ADBC;          /* highlight tile edge */
  --ult-amber-100:#00ADBC;      /* highlight tile fill */
  --ult-accent-text:#FFFFFF;    /* text on the highlight tile */
  --ult-btn-bg:#00ADBC;
  --ult-btn-text:#FFFFFF;
  --ult-tile-bg:#F4F4F5;
  --ult-hero-bg:#0E1417;
  --ult-news-bg:#1B8A9F;
  --ult-news-text:#FFFFFF;
  --ult-news-btn-bg:#FFFFFF;
  --ult-news-btn-text:#0E1417;
  --ult-direct-bg:#F2FBFC;
  --ult-display:"Work Sans","Arial Black",system-ui,sans-serif;
  --ult-text:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;

  /* --- fixed supporting neutrals --- */
  --ult-teal-50:#F2FBFC;
  --ult-teal-100:#E0F5F7;
  --ult-teal-200:#BDEAEE;
  --ult-amber-800:#88520B;
  --ult-ink-80:#43484A;
  --ult-ink-60:#737778;
  --ult-ink-40:#A3A6A7;
  --ult-ink-20:#CFD0D1;
  --ult-ink-10:#E7E8E8;
  --ult-ink-05:#F4F4F5;
  --ult-paper:#FFFFFF;

  --ult-radius:4px;
  --ult-radius-lg:12px;
  --ult-ease:cubic-bezier(.2,.7,.3,1);
  --ult-dur:220ms;
  --ult-max:1180px;
}

/* // CSS NAME: ultimate-contact-base // */
.ult-contact,
.ult-news {
  font-family:var(--ult-text);
  font-size:17px;
  line-height:1.65;
  color:var(--ult-ink);
  background:var(--ult-paper);
  -webkit-font-smoothing:antialiased;
}
.ult-contact *,
.ult-news * { box-sizing:border-box; }

.ult-contact h1,
.ult-contact h2,
.ult-contact h3,
.ult-news h2 {
  font-family:var(--ult-display);
  font-weight:900;
  text-transform:uppercase;
  line-height:1.04;
  letter-spacing:-.005em;
  margin:0 0 12px;
  color:inherit;
}
.ult-contact p { margin:0 0 16px; max-width:68ch; }
.ult-contact a { color:var(--ult-teal-700); text-underline-offset:.2em; }
.ult-contact a:hover { color:var(--ult-ink); }

/* // CSS NAME: ultimate-contact-wrap // */
.ult-contact__wrap {
  width:100%;
  max-width:var(--ult-max);
  margin-inline:auto;
  padding-inline:24px;
}

/* // CSS NAME: ultimate-contact-hero // */
/* Off by default. Switch it on in ULTIMATE Contact > Sections. */
.ult-contact__hero {
  background:var(--ult-hero-bg);
  color:#fff;
  padding:clamp(40px,7vw,88px) 0 clamp(48px,8vw,96px);
  border-bottom:6px solid var(--ult-teal-500);
}
.ult-eyebrow {
  font-family:var(--ult-text);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ult-teal-200);
  margin:0 0 12px;
}
.ult-contact__title { font-size:clamp(38px,7vw,68px); color:#fff; margin-bottom:20px; }
.ult-contact__lede {
  font-size:clamp(17px,2.2vw,21px);
  line-height:1.5;
  color:#E7E8E8;
  max-width:60ch;
}
.ult-contact__facts { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:8px; max-width:62ch; }
.ult-contact__facts li { font-size:16px; color:#CFD0D1; padding-left:20px; position:relative; }
.ult-contact__facts li::before {
  content:""; position:absolute; left:0; top:11px;
  width:8px; height:8px; background:var(--ult-teal-500); border-radius:50%;
}
.ult-contact__facts strong { color:#fff; }

/* // CSS NAME: ultimate-contact-grid // */
.ult-contact__grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(32px,6vw,72px);
  align-items:start;
}
/* With the header off the page starts here, so it needs a little air. */
.ult-contact--nohero .ult-contact__grid { padding-top:0; }

@media (max-width:900px) {
  .ult-contact__grid { grid-template-columns:1fr; gap:28px; }
}

/* // CSS NAME: ultimate-contact-formcard // */
.ult-card {
  background:var(--ult-paper);
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.ult-card h1, .ult-card h2 { font-size:clamp(25px,3.2vw,32px); }
.ult-card__sub { color:var(--ult-ink-80); font-size:17px; margin-bottom:28px; }
.ult-card__fine { font-size:14px; color:var(--ult-ink-60); margin:24px 0 0; }

/* // CSS NAME: ultimate-contact-hubspot-form // */
/* Restyles the HubSpot embed so it stops looking like a HubSpot embed. */
.ult-hsform .hs-form-field { margin-bottom:20px; }
.ult-hsform .hs-form-field > label {
  display:block;
  font-family:var(--ult-text);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ult-ink-80);
  margin-bottom:8px;
}
.ult-hsform .hs-form-field > label .hs-form-required { color:var(--ult-amber-800); margin-left:2px; }
.ult-hsform .hs-form-field .hs-field-desc { font-size:14px; color:var(--ult-ink-60); margin-bottom:8px; }

.ult-hsform input[type="text"],
.ult-hsform input[type="email"],
.ult-hsform input[type="tel"],
.ult-hsform select,
.ult-hsform textarea {
  width:100% !important;
  max-width:100% !important;
  font-family:var(--ult-text);
  font-size:17px;                    /* 16px minimum or iOS zooms on focus */
  line-height:1.5;
  color:var(--ult-ink);
  background:var(--ult-paper);
  border:1px solid var(--ult-ink-20);
  border-radius:var(--ult-radius);
  padding:13px 14px;
  transition:border-color var(--ult-dur) var(--ult-ease), box-shadow var(--ult-dur) var(--ult-ease);
}
.ult-hsform textarea { min-height:150px; resize:vertical; }
.ult-hsform ::placeholder { color:var(--ult-ink-40); }

.ult-hsform input:focus,
.ult-hsform select:focus,
.ult-hsform textarea:focus {
  outline:none;
  border-color:var(--ult-teal-600);
  box-shadow:0 0 0 3px rgba(0,173,188,.22);
}

.ult-hsform select {
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230E1417' stroke-width='2'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:20px;
  padding-right:44px;
}

/* // CSS NAME: ultimate-contact-hubspot-submit // */
/* Fill and text are both settings. Default is white text on teal. */
.ult-hsform .hs-button,
.ult-hsform input[type="submit"] {
  display:inline-block;
  background:var(--ult-btn-bg);
  color:var(--ult-btn-text) !important;
  font-family:var(--ult-display);
  font-weight:900;
  font-size:17px;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:16px 32px;
  border:0;
  border-radius:var(--ult-radius);
  cursor:pointer;
  width:auto;
  transition:background var(--ult-dur) var(--ult-ease);
}
.ult-hsform .hs-button:hover,
.ult-hsform input[type="submit"]:hover { background:var(--ult-teal-600); color:var(--ult-btn-text) !important; }
.ult-hsform .hs-button:focus-visible,
.ult-hsform input[type="submit"]:focus-visible { outline:3px solid var(--ult-teal-700); outline-offset:3px; }

@media (max-width:560px) {
  .ult-hsform .hs-button,
  .ult-hsform input[type="submit"] { width:100%; text-align:center; }
}

/* // CSS NAME: ultimate-contact-hubspot-errors // */
.ult-hsform .hs-error-msg,
.ult-hsform .hs-error-msgs label {
  color:#B3200F; font-size:14px; font-weight:600; margin-top:6px; display:block;
}
.ult-hsform .hs-error-msgs { list-style:none; margin:0; padding:0; }
.ult-hsform .hs-input.invalid { border-color:#B3200F; }
.ult-hsform .submitted-message {
  background:var(--ult-teal-50);
  border:1px solid var(--ult-teal-200);
  border-left:4px solid var(--ult-teal-500);
  border-radius:var(--ult-radius);
  padding:20px 24px;
  font-size:17px;
}
.ult-hsform .legal-consent-container { font-size:14px; color:var(--ult-ink-60); }
.ult-hsform .legal-consent-container p { margin:0 0 8px; }

/* // CSS NAME: ultimate-contact-rail // */
.ult-rail { display:grid; gap:10px; position:sticky; top:24px; }
@media (max-width:900px) { .ult-rail { position:static; } }

/* // CSS NAME: ultimate-contact-tile // */
.ult-tile {
  display:grid;
  gap:2px;
  text-decoration:none;
  background:var(--ult-tile-bg);
  border:1px solid transparent;
  border-left:4px solid var(--ult-teal-500);
  border-radius:var(--ult-radius);
  padding:16px 18px;
  min-height:44px;                   /* comfortable tap target */
  transition:background var(--ult-dur) var(--ult-ease), transform var(--ult-dur) var(--ult-ease);
}
.ult-tile:hover { background:var(--ult-teal-50); transform:translateX(2px); }
.ult-tile:focus-visible { outline:3px solid var(--ult-teal-700); outline-offset:2px; }
.ult-tile__k {
  font-family:var(--ult-text);
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ult-teal-700);
}
.ult-tile__v {
  font-family:var(--ult-display);
  font-weight:900; text-transform:uppercase; font-size:19px; line-height:1.12;
  color:var(--ult-ink);
}
.ult-tile__m { font-size:14px; color:var(--ult-ink-60); line-height:1.45; }

/* // CSS NAME: ultimate-contact-tile-accent // */
/* The one accent element on the page. Do not add a second. */
.ult-tile--accent { background:var(--ult-amber-100); border-left-color:var(--ult-amber); }
.ult-tile--accent:hover { background:var(--ult-amber-100); filter:brightness(.94); }
.ult-tile--accent .ult-tile__k,
.ult-tile--accent .ult-tile__v,
.ult-tile--accent .ult-tile__m { color:var(--ult-accent-text); }

/* // CSS NAME: ultimate-contact-direct // */
/* Off by default. Switch it on in ULTIMATE Contact > Sections. */
.ult-direct {
  background:var(--ult-direct-bg);
  border-block:1px solid var(--ult-teal-100);
  padding-block:clamp(36px,6vw,72px);
}
.ult-direct h2 { font-size:clamp(25px,3.4vw,34px); margin-bottom:28px; }
.ult-direct__cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(20px,3vw,40px); }
.ult-direct h3 {
  font-family:var(--ult-text); font-weight:700; text-transform:none;
  font-size:19px; line-height:1.3; margin-bottom:8px;
}
.ult-direct p { font-size:16px; color:var(--ult-ink-80); margin:0; }

/* // CSS NAME: ultimate-contact-newsletter // */
/* The theme and HubSpot both try to colour and space this band. Everything
   that they fight over is forced here. Values still come from the settings. */
.ult-news {
  background:var(--ult-news-bg);
  color:var(--ult-news-text);
  padding-block:16px;
}
.ult-news .ult-news__inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;
  align-items:center;
}
@media (max-width:820px) { .ult-news .ult-news__inner { grid-template-columns:1fr; gap:14px; } }

.ult-news .ult-news__copy h2,
.ult-news h2#ult-news-h {
  font-family:var(--ult-display) !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  font-size:clamp(30px,4.2vw,46px) !important;
  line-height:1 !important;
  color:var(--ult-news-text) !important;
  margin:0 0 6px !important;
  padding:0 !important;
}
.ult-news .ult-news__copy p {
  color:var(--ult-news-text) !important;
  font-size:15px !important;
  line-height:1.4 !important;
  margin:0 !important;
  max-width:46ch;
}

/* // CSS NAME: ultimate-contact-newsletter-form // */
/* Kill HubSpot's own vertical rhythm, it is built for a full page form. */
.ult-hsform--news form,
.ult-hsform--news .hs-form { margin:0 !important; }
.ult-hsform--news fieldset { margin:0 !important; max-width:none !important; }
.ult-hsform--news .hs-form-field { margin:0 0 8px !important; padding:0 !important; }
.ult-hsform--news .hs-richtext,
.ult-hsform--news .hs-richtext p { margin:0 !important; }

.ult-hsform--news .hs-form-field > label {
  color:var(--ult-news-text) !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.06em;
  margin:0 0 4px !important;
}

.ult-hsform--news input[type="text"],
.ult-hsform--news input[type="email"] {
  background:var(--ult-paper) !important;
  border:1px solid transparent !important;
  color:var(--ult-ink) !important;
  padding:9px 12px !important;
  font-size:16px !important;
  border-radius:var(--ult-radius) !important;
}
.ult-hsform--news ::placeholder { color:var(--ult-ink-40) !important; }
.ult-hsform--news input:focus {
  border-color:var(--ult-paper) !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.45) !important;
}

.ult-hsform--news .legal-consent-container,
.ult-hsform--news .legal-consent-container p,
.ult-hsform--news .hs-error-msg,
.ult-hsform--news .hs-error-msgs label {
  color:var(--ult-news-text) !important;
  font-size:11.5px !important;
  line-height:1.3 !important;
  margin:0 0 6px !important;
}
.ult-hsform--news .legal-consent-container a {
  color:var(--ult-news-text) !important;
  text-decoration:underline !important;
}

/* Its own two colours, or it disappears into the band. */
.ult-hsform--news .hs_submit,
.ult-hsform--news .actions { margin:6px 0 0 !important; padding:0 !important; }

.ult-hsform--news .hs-button,
.ult-hsform--news input[type="submit"],
.ult-news .ult-hsform--news input[type="submit"] {
  background:var(--ult-news-btn-bg) !important;
  color:var(--ult-news-btn-text) !important;
  font-family:var(--ult-display) !important;
  font-weight:900 !important;
  font-size:17px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:13px 28px !important;
  width:100% !important;
  max-width:none !important;
  display:block !important;
  text-align:center !important;
  border:0 !important;
  border-radius:var(--ult-radius) !important;
  float:none !important;
}
.ult-hsform--news .hs-button:hover,
.ult-hsform--news input[type="submit"]:hover { filter:brightness(.92); }
.ult-hsform--news .hs-button:focus-visible,
.ult-hsform--news input[type="submit"]:focus-visible { outline:3px solid var(--ult-paper); outline-offset:3px; }

.ult-hsform--news .submitted-message {
  background:rgba(255,255,255,.16) !important;
  border:0 !important;
  border-left:4px solid var(--ult-paper) !important;
  color:var(--ult-news-text) !important;
  padding:12px 16px !important;
  font-size:15px !important;
}

/* // CSS NAME: ultimate-contact-newsletter-compact // */
/* Compact mode: email and button only, exactly like the mock. The name fields
   are optional on the HubSpot form so hiding them costs nothing. HubSpot's
   consent paragraph is hidden here and replaced by one short line under the
   copy on the left, so the privacy notice still appears on the page once. */
.ult-hsform--news.is-compact form,
.ult-hsform--news.is-compact .hs-form {
  display:flex !important;
  flex-direction:column !important;
}
.ult-hsform--news.is-compact fieldset { order:1; }
.ult-hsform--news.is-compact .hs_submit,
.ult-hsform--news.is-compact .actions { order:2; margin:8px 0 0 !important; }
.ult-hsform--news.is-compact .legal-consent-container { display:none !important; }

.ult-hsform--news.is-compact .hs_firstname,
.ult-hsform--news.is-compact .hs_lastname,
.ult-hsform--news.is-compact .hs-fieldtype-text:not(.hs_email) {
  display:none !important;
}

/* // CSS NAME: ultimate-contact-newsletter-note // */
/* The privacy line that replaces HubSpot's consent block. */
.ult-news .ult-news__note {
  color:var(--ult-news-text) !important;
  font-size:12px !important;
  line-height:1.35 !important;
  margin:8px 0 0 !important;
  opacity:.85;
  max-width:46ch;
}
.ult-news .ult-news__note a {
  color:var(--ult-news-text) !important;
  text-decoration:underline;
}

/* // CSS NAME: ultimate-contact-mobile // */
@media (max-width:600px) {
  .ult-contact, .ult-news { font-size:16px; }
  .ult-contact__wrap { padding-inline:18px; }

  /* Everything centred on a phone. */
  .ult-contact__grid,
  .ult-card,
  .ult-rail,
  .ult-news { text-align:center; }

  .ult-contact p { margin-inline:auto; }

  /* The heading stays in the markup for search and screen readers,
     it is only taken off the screen. Never display:none on the H1. */
  .ult-card h1,
  .ult-card h2 {
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  /* The intro paragraph is off on mobile. The phone number is one tap
     away in the Call us tile, so nothing is lost. */
  .ult-card__sub { display:none; }

  .ult-card__fine { text-align:center; margin-top:18px; }

  .ult-rail { margin-top:0; }
  .ult-tile { padding:14px 16px; justify-items:center; }
  .ult-tile__v { font-size:18px; }
  .ult-tile__m { max-width:34ch; margin-inline:auto; }

  .ult-news .ult-news__copy p,
  .ult-news .ult-news__note { margin-inline:auto; }

  .ult-hsform--news .hs-button,
  .ult-hsform--news input[type="submit"] { font-size:16px !important; padding:13px 22px !important; }

  .ult-contact__facts li { font-size:15px; text-align:left; }
}

/* // CSS NAME: ultimate-contact-motion // */
@media (prefers-reduced-motion:reduce) {
  .ult-contact *, .ult-news * { transition:none !important; }
  .ult-tile:hover { transform:none; }
}