/* Contact page. Sections top to bottom: sky-blue hero, locations, contact form,
   FAQs, follow-us band. The form is visual only in phase 1 (see the page source). */

/* The eyebrow on this page is a step larger than the sitewide .eyebrow. */
.contact-eyebrow {
  margin: 0;
  font: 700 25px / 1 var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 4.2px;
  color: var(--red);
}
.contact-eyebrow-navy { color: var(--navy); }
.contact-eyebrow-loose { line-height: 31px; }
@media (max-width: 1366px) { .contact-eyebrow { font-size: 18px; } }
@media (max-width: 1200px) { .contact-eyebrow { font-size: 17px; } }
@media (max-width: 1024px) { .contact-eyebrow { font-size: 16px; } }
@media (max-width: 880px)  { .contact-eyebrow { font-size: 15px; } }
@media (max-width: 767px)  { .contact-eyebrow { font-size: 14px; } }

/* ---------- hero ---------- */
.contact-hero {
  display: flex;
  align-items: stretch;
  background: url(/assets/img/SkyBlueBackground1x390.png) top left repeat-x;
}
.contact-hero-text {
  flex: 0 0 51.3%;
  margin-top: -50px;
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-hero-title {
  margin: 5px 0 0;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  color: var(--white);
}
.contact-hero-photo { flex: 1 1 auto; display: flex; align-items: flex-start; }
.contact-hero-photo img { width: 595px; max-width: 100%; height: auto; }

/* Up to 1900 live sizes the two columns by flex-shrink, not by a set split: the
   text column asks for 100% of the row and the photo for 100% (550px from 1366,
   500px from 1200, 450px from 1024), and both shrink in proportion to their inner
   widths. So the photo is ~386px wide at 1366 but ~700 at 1440, and the band is
   as tall as the photo. Reproduced with the same flex values rather than one
   percentage per width. */
@media (max-width: 1900px) {
  .contact-hero-text { flex: 0 1 100%; }
  .contact-hero-photo { flex: 0 1 100%; }
}
@media (max-width: 1366px) { .contact-hero-photo { flex-basis: 550px; } }
@media (max-width: 1200px) { .contact-hero-photo { flex-basis: 500px; } }
@media (max-width: 1024px) { .contact-hero-photo { flex-basis: 450px; } }
@media (max-width: 880px)  { .contact-hero-text { flex: 0 0 65%; } .contact-hero-photo { flex: 1 1 auto; } }
@media (max-width: 767px) {
  .contact-hero { flex-direction: column; }
  .contact-hero-text { flex: none; margin-top: 50px; }
  .contact-hero-photo { flex: none; }
  .contact-hero-photo img { width: 240px; margin-left: 30px; }
}


/* Above 1900 live switches to its desktop hero: a fixed-height band, the heading indented 13%,
   and above 1920 the columns stay 1920 wide and centred. */
@media (min-width: 1901px) {
  .contact-hero { height: 440px; padding-inline: max(0px, calc((100% - 1920px) / 2)); }
  .contact-hero-text { flex-basis: 53.49%; padding-left: 13%; }
}

/* ---------- locations ---------- */
.contact-locations {
  min-height: 1300px;
  background: url(/assets/img/Background_yellowWhiteStatic1.jpg) top left repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.contact-locations .h2 { text-align: center; }
.contact-loc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
  width: 68%;
  padding: 10px;
}
.contact-loc { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.contact-loc-photo-above { display: block; width: 100%; height: auto; }
.contact-loc-photo-inside { display: none; }
.contact-loc-card {
  width: 500px;
  background: var(--white);
  margin-top: -58px;
  padding: 40px 55px 55px;
  display: flex;
  flex-direction: column;
}
.contact-loc-name {
  margin: 0;
  padding-bottom: 10px;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--red);
}
.contact-loc-address {
  margin: 0 0 14.4px;
  font: 400 18px / 31px var(--font-display);
  color: var(--navy);
}
.contact-loc-label {
  margin: 0;
  font: 700 22px / 31px var(--font-serif);
  color: var(--red);
}
.contact-loc-value {
  margin: 0 0 14.4px;
  font: 700 20px / 31px var(--font-serif);
  color: var(--navy);
}
.contact-loc-value-tight { margin-bottom: 0; }
.contact-loc-value-last { margin-bottom: 15px; }
.contact-loc-card .btn { align-self: center; }

@media (max-width: 1366px) {
  /* Below the desktop breakpoint the photo moves inside the white card. */
  .contact-loc { gap: 0; }
  .contact-loc-photo-above { display: none; }
  .contact-loc-photo-inside { display: block; width: 100%; height: auto; margin-bottom: 20px; }
  .contact-loc-card { margin-top: 0; }
  .contact-loc-address { font-size: 17px; }
}
@media (max-width: 1366px) {
  .contact-locations { min-height: 1119px; }
  .contact-loc-grid { width: 796.68px; max-width: 100%; }
}
@media (max-width: 1200px) {
  .contact-loc-grid { column-gap: 200px; row-gap: 200px; }
  .contact-loc { width: 250px; }
}
@media (max-width: 1024px) {
  .contact-loc-grid { grid-template-columns: repeat(2, 1fr); column-gap: 200px; row-gap: 227px; width: 797px; }
  .contact-loc { width: 200px; }
  .contact-loc-card { width: 400px; }
  .contact-loc-address { font-size: 16px; }
}
@media (max-width: 880px) {
  .contact-loc { width: 175px; }
  .contact-loc-photo-inside { max-width: 200px; align-self: center; }
  .contact-loc-address { font-size: 15px; }
}
@media (max-width: 767px) {
  .contact-locations { min-height: 1950px; }
  .contact-loc-grid { grid-template-columns: 1fr; width: 100%; row-gap: 227px; }
  /* A 30px right margin on live's card grid leaves the two headings above it
     centred 15px to the right of the section. Reproduced. */
  .contact-locations > .contact-eyebrow,
  .contact-locations > .h2 { margin-left: 30px; }
  .contact-loc { width: auto; }
  .contact-loc-card { width: 100%; }
  .contact-loc-address { font-size: 14px; }
}

/* ---------- contact form section ---------- */
.contact-form-section {
  position: relative;
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.contact-form-top { display: flex; align-items: center; }
/* Salsa bowls bleeding off the right edge, desktop only. */
.contact-form-top::after {
  content: "";
  position: absolute;
  left: 1160px;
  top: 64px;
  margin-top: 1%;
  width: 601px;
  height: 585px;
  background: url(/assets/img/salsa.png) top left no-repeat;
  pointer-events: none;
}
.contact-form-salsa { display: none; }
.contact-form-intro {
  flex: 1 1 auto;
  min-width: 0;
  padding: 125px 0 0 calc(5% + 110px);
  position: relative;
  z-index: 2;
}
.contact-form-intro .h2 { margin: 0; }
.contact-form-intro .divider { width: 642px; margin-top: 14px; padding: 35px 0; }
.contact-form-copy {
  margin-top: 7px;
  width: 795px;
  max-width: 100%;
  font: 300 var(--fs-body) / var(--lh-body) var(--font-serif);
  color: var(--text);
}
.contact-form-copy p { margin: 0 0 30px; }
.contact-form-h3 {
  margin: 0;
  padding-top: 44px;
  font: 400 var(--fs-h3) / 31px var(--font-display);
  color: var(--red);
}
.contact-form-h4 {
  margin: 0 0 17px;
  font: 400 var(--fs-h4) / 31px var(--font-display);
  color: var(--navy);
}

/* From 1366 live's text column is a fixed 580px, 40px in from the edge, so the copy
   and the h4 wrap sooner and the section grows to 717px; the divider becomes the
   35px-padded inline image it is below 1024; and the salsa bowls move in to sit
   at left 491px plus a 10% margin, with no top margin. */
@media (max-width: 1366px) {
  .contact-form-intro { flex: 0 0 620px; padding-left: 40px; }
  .contact-form-intro .divider { max-width: calc(100% - 35px); margin-top: 0; padding: 49px 0 43px; }
  .contact-form-top::after { left: calc(491px + 10%); margin-top: 0; }
  /* live's divider widget is 101px tall (the 8.5px image on its line box) */
  .contact-form-copy { margin-top: 1px; }
}
@media (max-width: 1200px) {
  .contact-form-top::after { display: none; }
  .contact-form-top { margin-left: 41px; }
  .contact-form-intro { flex: 0 0 61%; padding-left: 0; }
  .contact-form-salsa {
    display: block;
    flex: 0 0 39%;
    min-height: 72vh;
    background: url(/assets/img/salsa.png) center right / contain no-repeat;
  }
}
@media (max-width: 1024px) {
  /* Live lays this column out as flex below the desktop breakpoint, so the
     margins inside it no longer collapse into the section. */
  .contact-form-intro { display: flex; flex-direction: column; }
  /* The divider is an inline image in a container padded 35px on three sides:
     it is 35px narrower than the column and sits 49px below the box top. */
  .contact-form-intro .divider { max-width: calc(100% - 35px); margin-top: 0; padding: 49px 0 43px; }
  .contact-form-copy { margin-top: 0; }
}
@media (max-width: 767px) {
  .contact-form-top { flex-direction: column-reverse; }
  .contact-form-intro { flex: none; width: 100%; min-height: 775px; }
  .contact-form-intro .divider { padding: 51px 0 45px; }
  .contact-form-salsa { flex: none; width: 100%; }
}

/* ---------- the form itself (visual only in phase 1) ---------- */
.acf {
  position: relative;
  z-index: 2;
  width: min(733px, 100%);
  margin: 4px 0 0 199px;
  padding-bottom: 39px;
}
.acf-legend { margin: 0 0 14.4px; font: 300 var(--fs-body) / 34px var(--font-serif); }
.acf-star { color: #ff0000; }
.acf-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2%;
  row-gap: 16px;
}
.acf-field { grid-column: span 12; min-width: 0; margin: 0; padding: 0; border: 0; }
.acf-w-full { grid-column: span 12; }
.acf-w-half { grid-column: span 6; }
.acf-w-third { grid-column: span 4; }
.acf-w-quarter { grid-column: span 3; }
.acf-w-7-12 { grid-column: span 7; }
.acf-w-5-12 { grid-column: span 5; }
.acf-field[hidden] { display: none; }

.acf-section {
  height: 23px;
  padding: 0 16px 8px 0;
  border-bottom: 1px solid #d6d6d6;
}
.acf-label,
.acf legend.acf-label {
  display: block;
  float: none;
  margin: 0 0 8px;
  padding: 0 0 3px;
  font: 300 22px / 1.3 var(--font-display);
  letter-spacing: 1.3px;
  color: #0c2d4a;
}
.acf input[type="text"],
.acf input[type="email"],
.acf input[type="tel"],
.acf input[type="file"],
.acf textarea,
.acf-select {
  width: 100%;
  max-width: 100%;
  font: 300 22px / 1.5 var(--font-serif);
  color: #0c2d4a;
  background: var(--white);
  border: 3px solid #002d56;
  border-radius: 7px;
  padding: 15px;
}
.acf textarea { min-height: 200px; resize: vertical; }
.acf-select {
  font-family: var(--font-display);
  font-weight: 400;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'><polygon points='6,9 18,9 12,15' fill='%23E13F3F'/></svg>");
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) center;
  background-size: 40px 50px;
}
.acf-reason { min-width: 450px; }
.acf-hint { display: block; margin-top: 6px; font: 300 16px / 1.4 var(--font-serif); color: #555; }

.acf-subfields { display: flex; gap: 16px; }
.acf-sub { flex: 1 1 0; min-width: 0; }
.acf-sublabel {
  display: block;
  margin-top: 6px;
  font: 300 16px / 1.4 var(--font-serif);
  color: #555;
}

.acf-choices { display: flex; flex-direction: column; gap: 8px; }
.acf-choices-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.acf-choice { display: flex; align-items: center; gap: 10px; }
.acf-choice input { width: 20px; height: 20px; accent-color: var(--red); flex: 0 0 auto; }
.acf-choice label { font: 300 22px / 1.4 var(--font-serif); color: var(--text); }

.acf-html { font: 300 22px / 1.6 var(--font-serif); color: var(--text); }
.acf-html p { margin: 0 0 14px; }
.acf-html-title { margin: 0 0 12px; font-size: 28px; line-height: 1.3; }
.acf-html-list { margin: 0 0 16px 1.2em; padding: 0; list-style: disc; }
.acf-html-list li { margin: 0 0 8px; }
.acf-html-last { margin: 0; }
.acf-html-centered { font-size: 32px; text-align: center; }
.acf-inline-link { color: var(--red); text-decoration: underline; }

.acf-footer { margin-top: 24px; }
.acf-footer[hidden] { display: none; }
.acf-submit {
  width: 300px;
  max-width: 100%;
  padding: 15px 87px;
  background: var(--red);
  color: var(--white);
  border-radius: 11px;
  font: 400 18.67px / 1.4 var(--font-display);
  cursor: pointer;
}
.acf-submit:hover { background: var(--red-hover); }

@media (max-width: 1366px) {
  .acf { margin-left: 39px; width: min(733px, calc(100% - 78px)); }
}
@media (max-width: 1024px) { .acf { margin-top: 14px; } }
@media (max-width: 767px) {
  .acf { margin: 14px -1px 0 20px; width: auto; }
  /* On live the select keeps its 450px minimum here and runs off the right
     edge; kept inside the viewport instead. */
  .acf-reason { min-width: 0; }
  .acf-w-half, .acf-w-third, .acf-w-quarter, .acf-w-7-12, .acf-w-5-12 { grid-column: span 12; }
  .acf-choices-2col { grid-template-columns: 1fr; }
  .acf-html-centered { font-size: 22px; }
  .acf-submit { padding: 15px 20px; }
}

/* ---------- FAQs ---------- */
.contact-faqs {
  background: var(--white);
  min-height: 1500px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-faqs-inner {
  width: 80%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: url(/assets/img/pattern-300x100-1.png) top left repeat-x;
  background-size: 44px auto;
}
.contact-faqs .contact-eyebrow { padding: 100px 2px 2px; }
.contact-faqs .h2 { margin: 0; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px;
  padding: 10px;
  width: 100%;
}
.faq-col { min-width: 0; }
.faq {
  margin-bottom: 30px;
  background: #f3f3f3;
  border: 2px solid var(--navy);
  border-radius: 6px;
}
.faq[open] { border-color: var(--red); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px;
  cursor: pointer;
  list-style: none;
  font: 700 30px / 1 var(--font-serif);
  letter-spacing: 1px;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 30px; height: 30px; color: var(--red); flex: 0 0 auto; }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq-body {
  padding: 0 14px 45px 27px;
  font: 300 var(--fs-body) / var(--lh-body) var(--font-serif);
  color: #333;
}
.faq-body p { margin: 0 0 14px; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 24px;
  background: var(--red);
  color: var(--white);
  border-radius: 11px;
  font: 400 var(--fs-btn) / 1 var(--font-display);
  text-decoration: none;
}
.faq-btn:hover { background: var(--red-hover); }

@media (max-width: 1366px) { .faq summary { font-size: 18px; } }
@media (max-width: 1200px) { .faq summary { font-size: 17px; } }
@media (max-width: 1024px) { .faq summary { font-size: 16px; } .faq-grid { gap: 100px; } }
@media (max-width: 880px)  { .faq summary { font-size: 15px; } }
@media (max-width: 767px) {
  .contact-faqs { min-height: 0; }
  .contact-faqs-inner { width: 100%; }
  .faq-grid { grid-template-columns: 1fr; gap: 100px; }
  .faq summary { font-size: 14px; }
}

/* ---------- follow us ---------- */
.contact-follow {
  min-height: 540px;
  background: url(/assets/img/Layer-36.jpg) center center no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.contact-follow .h2 { margin: 0; }
.contact-follow-sub {
  margin: 0;
  font: 400 var(--fs-h4) / 1 var(--font-display);
  color: var(--white);
}
.contact-follow-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  padding: 10px;
  margin-top: 15px;
}
.contact-follow-icons a { line-height: 0; }
.contact-follow-icons img { display: block; }