/* ============================================================
   JTS LPG SERVICES
   CONTACT PAGE
============================================================ */


/* ============================================================
   INNER HERO
============================================================ */

.page-contact .inner-hero {
  position: relative;

  overflow: hidden;

  padding:
    155px
    0
    45px;

  background: #080808;

  color: #ffffff;
}


/* subtle orange light */

.page-contact .inner-hero::before {
  content: "";

  position: absolute;

  top: -180px;
  right: -180px;

  width: 520px;
  height: 520px;

  background:
    radial-gradient(
      circle,
      rgba(233, 116, 23, 0.18) 0%,
      rgba(233, 116, 23, 0.06) 38%,
      transparent 70%
    );

  pointer-events: none;
}


/* ============================================================
   HERO LAYOUT
============================================================ */

.contact-hero-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(280px, 0.55fr);

  gap: 70px;

  align-items: end;
}


/* ============================================================
   BREADCRUMB
============================================================ */

.breadcrumb {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 28px;

  color: #7f7f7b;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: 600;
}


.breadcrumb a {
  color: #aaa9a5;

  transition:
    color 0.2s ease;
}


.breadcrumb a:hover {
  color: var(--orange);
}


.breadcrumb i {
  color: #555551;

  font-size: 10px;
}


/* ============================================================
   HERO COPY
============================================================ */

.contact-hero-copy h1 {
  max-width: 900px;

  color: #ffffff;

  font-size:
    clamp(
      4.8rem,
      7.5vw,
      7.4rem
    );

  line-height: 0.86;
}


.contact-hero-copy h1 span {
  display: block;

  color: var(--orange);
}


.contact-hero-lead {
  max-width: 720px;

  margin:
    29px
    0
    0;

  color: #c4c4c0;

  font-size: 18px;

  line-height: 1.7;
}


/* ============================================================
   HERO BUTTONS
============================================================ */

.contact-hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 11px;

  margin-top: 30px;
}


.contact-hero-button {
  min-height: 54px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding:
    12px
    23px;

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 800;

  line-height: 1;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.contact-hero-button:hover {
  transform:
    translateY(-2px);
}


.contact-call {
  background: var(--orange);

  color: #111111;

  border:
    1px solid
    var(--orange);
}


.contact-call:hover {
  background: var(--amber);

  border-color: var(--amber);
}


.contact-whatsapp {
  background: #ffffff;

  color: #111111;

  border:
    1px solid
    #ffffff;
}


.contact-whatsapp i {
  color: var(--orange);
}


.contact-whatsapp:hover {
  background: #ededed;

  border-color: #ededed;
}


/* ============================================================
   HERO PROOF
============================================================ */

.contact-hero-proof {
  display: grid;

  gap: 18px;

  padding-bottom: 8px;
}


.contact-proof-item {
  display: grid;

  grid-template-columns:
    34px
    1fr;

  gap: 13px;

  align-items: center;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    #282828;
}


.contact-proof-item:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}


.contact-proof-item > i {
  color: var(--orange);

  font-size: 1.45rem;
}


.contact-proof-item span {
  display: block;

  margin-bottom: 2px;

  color: #777773;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.contact-proof-item strong {
  display: block;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 16px;

  font-weight: 800;
}


/* ============================================================
   ENQUIRY SECTION
============================================================ */

.page-contact .enquiry-section {
  padding-top: 55px;

  background: #101010;
}


.contact-enquiry-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(420px, 0.82fr);

  gap: 86px;

  align-items: start;
}


/* ============================================================
   ENQUIRY COPY
============================================================ */

.contact-enquiry-copy {
  max-width: 650px;
}


.contact-enquiry-copy h2 {
  color: #ffffff;
}


.contact-enquiry-intro {
  max-width: 600px;

  margin:
    26px
    0
    0;

  color: #b6b6b2;

  font-size: 18px;

  line-height: 1.7;
}


/* ============================================================
   CONTACT METHODS
============================================================ */

.contact-methods {
  display: grid;

  gap: 0;

  margin-top: 42px;

  border-top:
    1px solid
    #303030;
}


.contact-method {
  display: grid;

  grid-template-columns:
    42px
    1fr;

  gap: 15px;

  align-items: center;

  min-height: 82px;

  padding:
    16px
    0;

  border-bottom:
    1px solid
    #303030;

  transition:
    color 0.2s ease;
}


.contact-method > i {
  color: var(--orange);

  font-size: 1.45rem;

  line-height: 1;
}


.contact-method span {
  display: block;

  margin-bottom: 2px;

  color: #73736f;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.contact-method strong {
  display: block;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 17px;

  font-weight: 800;

  transition:
    color 0.2s ease;
}


.contact-method:hover strong {
  color: var(--orange);
}


/* ============================================================
   HOURS
============================================================ */

.contact-hours {
  margin-top: 40px;
}


.contact-small-label {
  display: block;

  margin-bottom: 15px;

  color: var(--orange);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.contact-hours-row {
  max-width: 440px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    8px
    0;

  color: #9a9a96;

  font-size: 14px;
}


.contact-hours-row strong {
  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-weight: 700;
}


.contact-hours > p {
  max-width: 510px;

  margin:
    18px
    0
    0;

  color: #777773;

  font-size: 13px;

  line-height: 1.6;
}


/* ============================================================
   CONTACT FORM
============================================================ */

.contact-form {
  position: sticky;

  top: 110px;

  width: 100%;

  padding:
    34px;

  background: #171717;

  border:
    1px solid
    #2c2c2c;

  border-radius: 28px;

  box-shadow:
    0
    30px
    70px
    rgba(
      0,
      0,
      0,
      0.24
    );
}


.contact-form-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 18px;
}


.contact-field {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 8px;
}


.contact-field-full {
  grid-column:
    1 / -1;
}


.contact-field label {
  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 15px;

  font-weight: 700;

  line-height: 1.3;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;

  background: #ffffff;

  color: #111111;

  border:
    1px solid
    #ffffff;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 16px;
}


.contact-field input,
.contact-field select {
  min-height: 55px;

  padding:
    12px
    18px;

  border-radius: var(--pill);
}


.contact-field textarea {
  min-height: 145px;

  resize: vertical;

  padding:
    16px
    18px;

  border-radius: 18px;

  line-height: 1.55;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--orange);

  outline:
    3px solid
    rgba(
      233,
      116,
      23,
      0.22
    );
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #777777;
}


/* ============================================================
   FORM SUBMIT
============================================================ */

.contact-submit {
  width: 100%;

  min-height: 58px;

  margin-top: 24px;

  padding:
    12px
    24px;

  background: var(--orange);

  color: #111111;

  border:
    1px solid
    var(--orange);

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 17px;

  font-weight: 800;

  line-height: 1;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}


.contact-submit:hover {
  background: var(--amber);

  border-color: var(--amber);

  transform:
    translateY(-2px);
}


.contact-form-note {
  margin:
    14px
    0
    0;

  color: #777773;

  font-size: 12px;

  line-height: 1.5;

  text-align: center;
}


/* ============================================================
   WHAT TO SEND
============================================================ */

.contact-help-section {
  background: #080808;
}


.contact-help-layout {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.75fr)
    minmax(0, 1.25fr);

  gap: 90px;

  align-items: start;
}


.contact-help-heading {
  max-width: 500px;
}


.contact-help-heading h2 {
  color: #ffffff;
}


.contact-help-heading > p {
  max-width: 460px;

  margin:
    25px
    0
    0;

  color: #a9a9a5;

  font-size: 17px;

  line-height: 1.65;
}


.contact-help-list {
  border-top:
    1px solid
    #303030;
}


.contact-help-item {
  display: grid;

  grid-template-columns:
    42px
    1fr;

  gap: 18px;

  padding:
    23px
    0;

  border-bottom:
    1px solid
    #303030;
}


.contact-help-item > span {
  color: var(--orange);

  font-family:
    "Barlow Condensed",
    Arial,
    sans-serif;

  font-size: 18px;

  font-weight: 800;
}


.contact-help-item strong {
  display: block;

  color: #ffffff;

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 18px;

  font-weight: 800;
}


.contact-help-item p {
  max-width: 700px;

  margin:
    5px
    0
    0;

  color: #989894;

  font-size: 15px;

  line-height: 1.6;
}


/* ============================================================
   CONTACT COVERAGE
============================================================ */

.contact-coverage {
  background: var(--orange);

  color: #111111;
}


.contact-coverage .eyebrow {
  color:
    rgba(
      0,
      0,
      0,
      0.68
    );
}


.contact-coverage .eyebrow::before {
  background: #111111;
}


.contact-coverage-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.85fr);

  gap: 72px;

  align-items: center;
}


.contact-coverage h2 {
  color: #ffffff;
}


.contact-coverage p {
  max-width: 660px;

  margin:
    25px
    0
    0;

  color:
    rgba(
      0,
      0,
      0,
      0.75
    );

  font-size: 18px;

  line-height: 1.65;
}


.contact-area-pills {
  display: flex;

  flex-wrap: wrap;

  gap: 11px;
}


.contact-area-pills a {
  min-height: 49px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0
    19px;

  background: #111111;

  color: #ffffff;

  border:
    1px solid
    #111111;

  border-radius: var(--pill);

  font-family:
    Barlow,
    Arial,
    sans-serif;

  font-size: 15px;

  font-weight: 700;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


.contact-area-pills a:hover {
  background: #ffffff;

  color: var(--orange);

  border-color: #ffffff;

  transform:
    translateY(-2px);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1000px) {

  .contact-hero-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(230px, 0.45fr);

    gap: 45px;
  }


  .contact-enquiry-layout {
    grid-template-columns:
      minmax(0, 0.85fr)
      minmax(370px, 0.9fr);

    gap: 50px;
  }


  .contact-form {
    padding: 28px;
  }


  .contact-help-layout {
    gap: 50px;
  }


  .contact-coverage-layout {
    gap: 45px;
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 800px) {

  .page-contact .inner-hero {
    padding:
      120px
      0
      48px;

    text-align: center;
  }


  .contact-hero-layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .breadcrumb {
    justify-content: center;

    margin-bottom: 23px;
  }


  .contact-hero-copy .eyebrow {
    justify-content: center;
  }


  .contact-hero-copy h1 {
    max-width: 10ch;

    margin-inline: auto;

    font-size:
      clamp(
        3.4rem,
        14vw,
        4.8rem
      );

    text-align: center;
  }


  .contact-hero-lead {
    max-width: 560px;

    margin:
      22px
      auto
      0;

    font-size: 17px;

    text-align: center;
  }


  .contact-hero-actions {
    justify-content: center;
  }


  .contact-hero-proof {
    width:
      min(
        100%,
        430px
      );

    margin-inline: auto;

    text-align: left;
  }


  /* ENQUIRY */

  .page-contact .enquiry-section {
    padding-top: 65px;
  }


  .contact-enquiry-layout {
    grid-template-columns: 1fr;

    gap: 44px;
  }


  .contact-enquiry-copy {
    max-width: none;
  }


  .contact-form {
    position: static;

    max-width: 620px;

    margin-inline: auto;
  }


  /* HELP */

  .contact-help-layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .contact-help-heading {
    max-width: 650px;
  }


  /* COVERAGE */

  .contact-coverage-layout {
    grid-template-columns: 1fr;

    gap: 34px;
  }


  .contact-coverage p {
    font-size: 17px;
  }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 600px) {

  .contact-hero-actions {
    flex-direction: column;
  }


  .contact-hero-button {
    width: 100%;
  }


  .contact-form {
    padding:
      25px
      20px;

    border-radius: 23px;
  }


  .contact-form-grid {
    grid-template-columns: 1fr;

    gap: 17px;
  }


  .contact-field-full {
    grid-column: auto;
  }


  .contact-method strong {
    font-size: 16px;

    overflow-wrap: anywhere;
  }


  .contact-hours-row {
    font-size: 13px;
  }


  .contact-help-item {
    grid-template-columns:
      32px
      1fr;

    gap: 12px;
  }


  .contact-area-pills {
    gap: 9px;
  }


  .contact-area-pills a {
    min-height: 46px;

    padding:
      0
      15px;

    font-size: 14px;
  }

}

/* ============================================================
   CONTACT HERO
============================================================ */

.page-contact .inner-hero {
  position: relative;

  overflow: hidden;

  padding:
    155px
    0
    45px;

  background: #080808;

  color: #ffffff;

  text-align: center;
}


.page-contact .inner-hero::before {
  content: "";

  position: absolute;

  top: -200px;
  left: 50%;

  width: 520px;
  height: 520px;

  background:
    radial-gradient(
      circle,
      rgba(233, 116, 23, 0.15),
      transparent 68%
    );

  transform:
    translateX(-50%);

  pointer-events: none;
}


.contact-hero-copy {
  position: relative;

  z-index: 1;

  max-width: 940px;

  margin-inline: auto;

  text-align: center;
}


.contact-hero-copy .eyebrow {
  justify-content: center;
}


.contact-hero-copy h1 {
  max-width: 900px;

  margin-inline: auto;

  color: #ffffff;

  font-size:
    clamp(
      4.8rem,
      7.5vw,
      7.2rem
    );

  line-height: 0.86;

  text-align: center;
}


.contact-hero-copy h1 span {
  display: block;

  color: var(--orange);
}


.contact-hero-lead {
  max-width: 700px;

  margin:
    28px
    auto
    0;

  color: #bdbdb9;

  font-size: 18px;

  line-height: 1.7;

  text-align: center;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

  .page-contact .inner-hero {
    padding:
      115px
      0
      44px;
  }


  .contact-hero-copy h1 {
    max-width: 10ch;

    font-size:
      clamp(
        3rem,
        13vw,
        4rem
      );

    line-height: 0.9;
  }


  .contact-hero-lead {
    max-width: 34rem;

    margin-top: 21px;

    font-size: 16px;

    line-height: 1.65;
  }

}

/* ============================================================
   CONTACT PAGE MOBILE
============================================================ */

@media (max-width: 800px) {

  /* ========================================================
     HERO
  ========================================================= */

  .page-contact .inner-hero {
    padding:
      115px
      0
      46px;

    text-align: center;
  }


  .contact-hero-copy {
    width: 100%;

    max-width: 700px;

    margin-inline: auto;

    text-align: center;
  }


  .contact-hero-copy .eyebrow {
    justify-content: center;
  }


  .contact-hero-copy h1 {
    max-width: 10ch;

    margin-inline: auto;

    font-size:
      clamp(
        3rem,
        13vw,
        4.1rem
      );

    line-height: 0.9;

    text-align: center;
  }


  .contact-hero-lead {
    max-width: 34rem;

    margin:
      22px
      auto
      0;

    font-size: 16px;

    line-height: 1.65;

    text-align: center;
  }



  /* ========================================================
     ENQUIRY SECTION
  ========================================================= */

  .page-contact .enquiry-section {
    padding-top: 62px;

    text-align: center;
  }


  .contact-enquiry-layout {
    display: grid;

    grid-template-columns: 1fr;

    gap: 26px;

    text-align: center;
  }


  /*
    Allows the form to sit between the description
    and contact methods on mobile.
  */

  .contact-enquiry-copy {
    display: contents;
  }



  /* 01 EYEBROW */

  .contact-enquiry-copy > .eyebrow {
    order: 1;

    justify-content: center;

    margin:
      0
      auto;
  }



  /* 02 HEADING */

  .contact-enquiry-copy > h2 {
    order: 2;

    margin-inline: auto;

    text-align: center;
  }



  /* 03 DESCRIPTION */

  .contact-enquiry-intro {
    order: 3;

    max-width: 540px;

    margin:
      -5px
      auto
      4px;

    font-size: 17px;

    line-height: 1.65;

    text-align: center;
  }



  /* 04 FORM */

  .contact-form {
    order: 4;

    position: static;

    width: 100%;

    max-width: 560px;

    justify-self: center;

    margin:
      12px
      auto
      4px;

    text-align: left;
  }



  /* 05 PHONE / WHATSAPP / EMAIL */

  .contact-methods {
    order: 5;

    width: 100%;

    max-width: 520px;

    margin:
      12px
      auto
      0;

    text-align: center;
  }


  .contact-method {
    grid-template-columns:
      32px
      auto;

    justify-content: center;

    gap: 12px;

    min-height: 78px;

    text-align: left;
  }


  .contact-method > i {
    width: 32px;

    text-align: center;
  }



  /* 06 HOURS */

  .contact-hours {
    order: 6;

    width: 100%;

    max-width: 480px;

    margin:
      18px
      auto
      0;

    text-align: center;
  }


  .contact-small-label {
    text-align: center;
  }


  .contact-hours-row {
    max-width: 400px;

    margin-inline: auto;
  }


  .contact-hours > p {
    max-width: 440px;

    margin:
      18px
      auto
      0;

    text-align: center;
  }



  /* ========================================================
     WHAT TO INCLUDE
  ========================================================= */

  .contact-help-section {
    text-align: center;
  }


  .contact-help-layout {
    grid-template-columns: 1fr;

    gap: 36px;
  }


  .contact-help-heading {
    max-width: 620px;

    margin-inline: auto;

    text-align: center;
  }


  .contact-help-heading .eyebrow {
    justify-content: center;
  }


  .contact-help-heading h2 {
    margin-inline: auto;

    text-align: center;
  }


  .contact-help-heading > p {
    max-width: 520px;

    margin:
      22px
      auto
      0;

    text-align: center;
  }


  .contact-help-list {
    width: 100%;

    max-width: 620px;

    margin-inline: auto;

    text-align: center;
  }


  .contact-help-item {
    grid-template-columns: 1fr;

    gap: 7px;

    padding:
      24px
      8px;

    text-align: center;
  }


  .contact-help-item > span {
    margin-bottom: 2px;

    text-align: center;
  }


  .contact-help-item strong {
    text-align: center;
  }


  .contact-help-item p {
    max-width: 500px;

    margin:
      6px
      auto
      0;

    text-align: center;
  }



  /* ========================================================
     FAQ
  ========================================================= */

  .page-contact .site-faq-intro {
    max-width: 620px;

    margin-inline: auto;

    text-align: center;
  }


  .page-contact .site-faq-intro .eyebrow {
    justify-content: center;
  }


  .page-contact .site-faq-intro h2,
  .page-contact .site-faq-intro > p {
    margin-inline: auto;

    text-align: center;
  }

}

/* ============================================================
   MOBILE CONTACT DETAILS
============================================================ */

@media (max-width: 800px) {

  .contact-methods {
    order: 5;

    width: 100%;
    max-width: 520px;

    margin:
      18px
      auto
      0;

    border-top: 0;

    text-align: left;
  }


  .contact-method {
    width: 100%;

    min-height: auto;

    display: grid;

    grid-template-columns:
      42px
      minmax(0, 1fr);

    align-items: center;

    justify-content: initial;

    gap: 15px;

    padding:
      18px
      0;

    border-bottom:
      1px solid
      #303030;

    text-align: left;
  }


  .contact-method:first-child {
    border-top:
      1px solid
      #303030;
  }


  .contact-method > i {
    width: 42px;

    color: var(--orange);

    font-size: 1.45rem;

    line-height: 1;

    text-align: center;
  }


  .contact-method div {
    min-width: 0;
  }


  .contact-method span {
    display: block;

    margin-bottom: 3px;

    color: #777773;

    font-size: 10px;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.09em;

    text-align: left;
  }


  .contact-method strong {
    display: block;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    line-height: 1.3;

    text-align: left;

    overflow-wrap: anywhere;
  }


  .contact-method:hover strong {
    color: var(--orange);
  }



  /* ========================================================
     BUSINESS HOURS
  ========================================================= */

  .contact-hours {
    order: 6;

    width: 100%;
    max-width: 520px;

    margin:
      34px
      auto
      0;

    text-align: left;
  }


  .contact-small-label {
    margin-bottom: 13px;

    color: var(--orange);

    text-align: left;
  }


  .contact-hours-row {
    width: 100%;
    max-width: none;

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items: center;

    gap: 20px;

    margin: 0;

    padding:
      10px
      0;

    color: #a4a4a0;

    border-bottom:
      1px solid
      #262626;

    font-size: 14px;

    text-align: left;
  }


  .contact-hours-row strong {
    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    text-align: right;
  }


  .contact-hours > p {
    max-width: 500px;

    margin:
      18px
      0
      0;

    color: #777773;

    font-size: 13px;

    line-height: 1.6;

    text-align: left;
  }

}

/* ============================================================
   MOBILE BUSINESS HOURS
============================================================ */

@media (max-width: 800px) {

  .contact-hours {
    order: 6;

    width: 100%;
    max-width: 520px;

    margin:
      28px
      auto
      0;

    text-align: left;
  }


  .contact-small-label {
    display: block;

    margin-bottom: 12px;

    color: var(--orange);

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.09em;

    text-align: left;
  }


  .contact-hours-row {
    width: 100%;
    max-width: none;

    min-height: 0;

    display: grid;

    grid-template-columns:
      1fr
      auto;

    align-items: center;

    gap: 16px;

    margin: 0;

    padding:
      6px
      0;

    color: #aaa9a5;

    border-bottom:
      1px solid
      #292929;

    font-size: 14px;

    line-height: 1.3;
  }


  .contact-hours-row span {
    line-height: 1.3;
  }


  .contact-hours-row strong {
    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

    text-align: right;
  }


  .contact-hours > p {
    max-width: 500px;

    margin:
      14px
      0
      0;

    color: #777773;

    font-size: 13px;

    line-height: 1.55;

    text-align: left;
  }

}
.contact-hours-row {
  width: 100%;

  display: grid;

  grid-template-columns:
    125px
    auto;

  justify-content: start;

  align-items: center;

  gap: 16px;

  margin: 0;

  padding:
    7px
    0;

  color: #aaa9a5;

  border-bottom:
    1px solid #292929;

  font-size: 14px;

  line-height: 1.3;
}


.contact-hours-row strong {
  color: #ffffff;

  font-size: 14px;

  font-weight: 700;

  line-height: 1.3;

  text-align: left;
}

/* ============================================================
   CONTACT HERO - MOBILE WIDTH FIX
============================================================ */

@media (max-width: 700px) {

  .contact-hero-copy {
    width: 100%;
    max-width: none;
  }

  .contact-hero-copy h1 {
    width: 100%;
    max-width: none;

    margin-inline: auto;

    font-size:
      clamp(
        2.7rem,
        11vw,
        3.8rem
      );

    line-height: 0.92;

    text-align: center;
  }

}