.hero {
  position: relative;
  min-height: min(390px, calc(100svh - 48px));
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #1b1b1b;
  color: #fff;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .58));
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: relative;
  padding-bottom: 1.35rem;
  max-width: min(100% - 32px, var(--container));
}

.hero .eyebrow,
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: .8rem;
  padding: .35rem .65rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, .94);
  color: var(--color-brand-dark);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
  text-shadow: none;
}

.hero h1 {
  max-width: 850px;
  margin-bottom: .8rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}

.hero__lead {
  max-width: 720px;
  color: #f2f3f4;
  font-size: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .42);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.05rem;
}

.hero__actions .phone-link {
  gap: .35rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}

.page-hero {
  --page-hero-image: url("../img/gallery/large/0001-bee-photo-3759.webp");
  --page-hero-position: center 42%;
  position: relative;
  display: grid;
  align-items: end;
  min-height: 300px;
  padding: 0 0 1.25rem;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .58)),
    var(--page-hero-image);
  background-position: center, var(--page-hero-position);
  background-size: auto, cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--color-line);
  color: #fff;
}

.page-hero--photos {
  --page-hero-image: url("../img/gallery/large/0003-bee-keeping-photo-004.webp");
  --page-hero-position: center 52%;
}

.page-hero--about {
  --page-hero-image: url("../img/gallery/large/0007-honey-photo-15.webp");
  --page-hero-position: center 48%;
}

.page-hero--contact {
  --page-hero-image: url("../img/gallery/large/0010-bee-keeping-photo-12.webp");
  --page-hero-position: center 50%;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  max-width: 850px;
  margin-bottom: .8rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}

.page-hero p:not(.eyebrow) {
  max-width: 780px;
  color: #f2f3f4;
  font-size: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .42);
}

.cta-band {
  padding: 2rem 0;
  background: var(--color-soft);
  color: var(--color-ink);
}

.cta-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: .95rem;
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.cta-band h2 {
  margin-bottom: .55rem;
  font-size: clamp(1.55rem, 7vw, 2rem);
}

.cta-band p {
  margin: 0;
  max-width: 760px;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.cta-band .phone-link {
  display: inline;
  margin-top: 0;
  color: var(--color-ink);
  text-decoration-thickness: .12em;
  text-underline-offset: .2em;
  white-space: nowrap;
}

.cta-band__call-line {
  display: block;
  margin-bottom: .05rem;
}

.cta-band__secondary-line {
  display: block;
  margin-top: .1rem;
}

.about-facts {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-color: rgba(21, 23, 26, .12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .98)),
    radial-gradient(circle at 100% 0, rgba(214, 159, 16, .18), transparent 34%);
  box-shadow: 0 24px 48px rgba(21, 23, 26, .14);
}

.about-facts::before {
  content: "";
  display: block;
  height: 5px;
  margin: -1.4rem -1.4rem 1.2rem;
  background: var(--color-brand);
}

.about-facts h2 {
  margin-bottom: .85rem;
  font-size: clamp(1.8rem, 8vw, 2.15rem);
}

.about-facts > p:first-of-type {
  margin-bottom: .95rem;
  color: var(--color-ink);
}

.about-facts__phone {
  display: grid;
  gap: .25rem;
  margin: .95rem 0 1rem;
  padding: .85rem .9rem;
  border-radius: var(--radius);
  background: #17191d;
  box-shadow: 0 12px 28px rgba(21, 23, 26, .16);
}

.about-facts__phone > span {
  color: rgba(255, 255, 255, .76);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.about-facts__phone .phone-link {
  color: #fff;
  font-size: clamp(1.08rem, 5.4vw, 1.25rem);
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

.about-facts__details {
  display: grid;
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(21, 23, 26, .1);
}

.about-facts__details p {
  margin: 0;
  color: var(--color-muted);
  font-size: .98rem;
}

.about-facts__details span {
  display: block;
  margin-bottom: .1rem;
  color: var(--color-brand-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.find-honey {
  display: grid;
  gap: 1.15rem;
}

.find-honey .section-heading {
  margin-bottom: 0;
}

.social-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}

.social-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  min-height: 88px;
  padding: .95rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.social-card:hover,
.social-card:focus-visible {
  color: var(--color-ink);
  border-color: var(--color-header-yellow);
  box-shadow: 0 18px 34px rgba(33, 24, 15, .14);
  transform: translateY(-2px);
}

.social-card__icon,
.social-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.social-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--color-header-yellow);
  color: var(--color-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
}

.social-card__icon svg,
.social-card__arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-card__icon svg {
  stroke-width: 1.9;
}

.social-card__arrow svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.social-card__body {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

.social-card__body strong {
  color: var(--color-ink);
  font-size: 1.05rem;
  line-height: 1.2;
}

.social-card__body span {
  color: var(--color-muted);
  font-size: clamp(.82rem, 3.4vw, .95rem);
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-card__arrow {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--color-soft);
  color: var(--color-brand-dark);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.contact-panel {
  position: static;
  top: auto;
  overflow: hidden;
  border-color: rgba(21, 23, 26, .12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .98)),
    radial-gradient(circle at 100% 0, rgba(214, 159, 16, .16), transparent 34%);
  box-shadow: 0 22px 42px rgba(21, 23, 26, .13);
}

.contact-panel::before {
  content: "";
  display: block;
  height: 5px;
  margin: -1.2rem -1.2rem 1.05rem;
  background: var(--color-brand);
}

.contact-page .section {
  padding: clamp(2.4rem, 4.5vw, 4.5rem) 0;
}

.contact-page .form {
  gap: .85rem;
  max-width: none;
}

.contact-page .form > h2,
.contact-panel h2 {
  margin-bottom: .45rem;
  font-size: clamp(1.75rem, 2.2vw, 2.35rem);
}

.contact-panel p {
  margin-bottom: .75rem;
}

.contact-panel p:first-of-type {
  color: var(--color-ink);
}

.contact-panel strong {
  font-weight: 750;
}

.contact-page .required-note {
  margin: -.2rem 0 0;
  font-size: .95rem;
}

.contact-page .field-label,
.contact-page .phone-field legend,
.contact-page .radio-group legend {
  font-size: .98rem;
}

.contact-page .form-field {
  gap: .28rem;
}

.contact-page .form input:not([type="radio"]):not([type="hidden"]),
.contact-page .form textarea,
.contact-page .form select {
  min-height: 44px;
  padding: .62rem .75rem;
}

.contact-page .form-field.has-error .field-control:not(.field-control--phone) input,
.contact-page .form-field.has-error .field-control:not(.field-control--phone) textarea {
  padding-right: 3rem;
}

.contact-page .form textarea {
  height: 156px;
}

.contact-page .phone-segments {
  max-width: none;
}

.contact-page .radio-list {
  gap: .45rem;
}

.contact-page .contact-panel {
  padding: 1.2rem;
}

.contact-page .contact-phone {
  margin: .75rem 0 1rem;
}

.contact-hours {
  margin: 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(21, 23, 26, .1);
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .hero {
    min-height: 460px;
  }

  .hero__media::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .54), rgba(0, 0, 0, .28) 58%, rgba(0, 0, 0, .08));
  }

  .hero__content {
    padding-bottom: 3rem;
  }

  .page-hero {
    min-height: 460px;
    padding-bottom: 3rem;
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, .54), rgba(0, 0, 0, .28) 58%, rgba(0, 0, 0, .08)),
      var(--page-hero-image);
  }

  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 1.75rem;
  }

  .cta-band .phone-link {
    margin-top: 0;
  }

  .contact-grid {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .social-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-page .form {
    max-width: 830px;
  }

  .contact-page .phone-segments {
    max-width: 380px;
  }
}

@media (min-width: 1100px) {
  .hero,
  .page-hero {
    min-height: clamp(460px, 54vh, 560px);
  }

  .hero__media::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .26) 54%, rgba(0, 0, 0, .08));
  }

  .hero__content,
  .page-hero {
    padding-bottom: clamp(2.4rem, 6vh, 4.5rem);
  }

  .page-hero {
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .28) 58%, rgba(0, 0, 0, .1)),
      var(--page-hero-image);
  }

  .cta-band__inner {
    padding: clamp(1.5rem, 4vw, 2.4rem);
  }

  .contact-grid {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .contact-panel {
    position: sticky;
    top: 120px;
  }
}