/* HERO — same treatment as the Region page hero (packages.css .pkg-hero):
   background photo + navy gradient + left-to-right scrim, white Urbanist H1.
   Scoped locally with its own .c-hero-* names since contact.css is only
   loaded on this page. */
.c-hero {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--blue-90) 0%, #1d2846 55%, var(--blue-80) 135%);
}

.c-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
}

.c-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(15, 30, 70, 0.75) 0%, rgba(15, 30, 70, 0.4) 60%, rgba(15, 30, 70, 0.15) 100%);
}

.c-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 48px) 5% clamp(40px, 6vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.c-hero-inner {
  max-width: 860px;
}

.c-hero h1 {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.2em;
  letter-spacing: 0.02em;
  color: var(--light-00);
  margin: 0;
}

/* INFO PANELS */
.cm-content-mod {
  padding: 64px 32px;
  gap: 40px;
}

.c-left,
.c-right {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.c-panel {
  width: 100%;
  border: 1px solid var(--light-15);
  border-radius: 16px;
  padding: 36px;
}

.c-panel-eyebrow {
  display: block;
  margin-bottom: 20px;
}

/* The Call panel drops the card border/background entirely — with only
   two rows it never had enough content to justify the box, so it now
   reads as a plain top-aligned list instead of a card with dead space
   in it. */
.c-right .c-panel {
  border: none;
  border-radius: 0;
}

.c-right .c-list-container {
  gap: 32px;
}

.c-list-container {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.c-list-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--light-10);
}

.c-list-item:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.c-list-item:first-child {
  padding-top: 4px;
}

.c-right .c-list-item {
  border-bottom: none;
  padding: 0;
}

.c-icon-badge {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: var(--light-10);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* These icons ship as flat SVGs with their fill baked in (see
   logo-time.svg etc.), so recoloring them means masking a solid
   background-color with the icon's shape rather than an img tag. */
.c-icon {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--blue-90);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.c-list-item-right {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-left: 16px;
}

.c-label {
  color: var(--blue-90);
  font-family: 'Urbanist', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
}

.c-sublabel {
  line-height: 1.25;
  color: var(--dark-70);
  font-family: 'Work Sans';
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Same footprint as .c-icon-badge so a phone row (flag) reads with the
   same weight as every other row (line icon) in the info panels. */
.c-flag-circle {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(9, 9, 10, 0.08);
}

.c-flag-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Match the Home page's guarantee strip exactly (home.css): shared.css
   defaults .hg-item svg to var(--blue-90), nearly invisible on the
   .hg-container-mod blue-80 band, and leaves .hg-item p at the .b1
   default (16px/400/dark-70) instead of Home's tighter white caption. */
.hg-item svg {
  color: var(--light-00);
}

.hg-item p {
  color: var(--light-00);
  font-size: 13px;
  font-weight: 600;
}

.c-hornblower-container {
  padding: 24px 0px;
}

.c-hornblower-content {
  /* border: 1px solid var(--dark-70); */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-hornblower {
  width: 90%;
  padding: 12px 0px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background-color: var(--blue-80);
  display: flex;
  justify-content: center;
}

.c-hornblower-logos {
  padding: 12px 0px;
  gap: 16px;
  display:flex;
  flex-direction: row;
  justify-content: center;
}

.c-hornblower-logos img {
  display: flex;
  align-self: center;
}

@media screen and (max-width: 964px) {
  .cm-content-mod {
    flex-direction: column;
  }

  .c-left {
    width: 100%;
    padding-bottom: 16px;
  }

  .c-right {
    width: 100%;
    padding-left: 0px;
    display: flex;
    justify-content: center;
  }

  .c-list-container {
    width: 100%;
  }

  .c-hornblower-logos {
    flex-direction: column;
    justify-content: center;
  }
}

@media screen and (max-width: 640px) {
  .cm-content-mod {
    padding: 40px 20px;
    gap: 24px;
  }

  .c-panel {
    padding: 24px 20px;
  }

  .c-label {
    font-size: 20px;
  }

  .c-hero {
    min-height: 320px;
  }
}