/* Editorial hero: one restaurant moment spans the page below the message. */
.hero {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  background: var(--paper);
}
.hero-content {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  order: 1;
  width: 100%;
  max-width: none;
  padding: clamp(7.7rem, 10.5vw, 10rem) clamp(1.25rem, 6.5vw, 8rem) clamp(2.5rem, 4vw, 4rem);
  transform: none;
}
.hero h1 {
  max-width: 1000px;
  font-size: clamp(4.2rem, 6.1vw, 7.4rem);
}
@media (min-width: 901px) {
  .hero h1 em { display: block; }
}
.hero-description { max-width: 610px; margin: 1.5rem 0 1.6rem; }
.hero-picture {
  position: relative;
  inset: auto;
  order: 2;
  width: 100%;
  height: clamp(360px, 40vw, 560px);
  background-image: url('assets/hero-table-service.jpg');
  background-position: center 59%;
  box-shadow: none;
}
.hero-picture::after {
  display: block;
  background: linear-gradient(0deg, rgba(12,22,16,.4), transparent 29%);
}
.corner-tl, .corner-bl { left: 3%; }
.corner-tr, .corner-br { right: 3%; }
.corner-tl, .corner-tr { top: 7%; }
.corner-bl, .corner-br { bottom: 7%; }
.hero-photo-note { bottom: 9%; right: 4%; }
.hero-index {
  bottom: 2rem;
  left: clamp(1.25rem, 6.5vw, 8rem);
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* Each invitation names the benefit it follows. */
.hero-actions .button-dark {
  min-width: min(100%, 460px);
  min-height: 82px;
  padding: 1rem 1.2rem 1rem 1.55rem;
  border-radius: 999px;
  font-size: 1.17rem;
  letter-spacing: -.02em;
}
.section-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: min(100%, 370px);
  min-height: 82px;
  padding: 1rem 1.2rem 1rem 1.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  text-decoration: none;
  transition: transform .2s, background .2s, color .2s;
}
.section-cta:hover { transform: translateY(-3px); }
.hero-actions .button span,
.section-cta span,
.button-contact span {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
}
.section-cta-dark { background: var(--ink); border-color: var(--ink); color: #fffaf2; }
.section-cta-dark:hover { background: #142018; }
.screen-break-cta { width: min(100%, 450px); margin-top: 1.8rem; background: #f9f4e8; border-color: #f9f4e8; color: #0d1711; }
.screen-break-cta:hover { background: #fff; }
.ar-heading-side { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.ar-heading-side p {
  max-width: 400px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}
.ar-heading-side .section-cta { width: 100%; }
.how-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 2rem;
}
.how-cta-row p {
  max-width: 340px;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.04em;
}
.button-contact {
  position: relative;
  z-index: 2;
  min-width: min(100%, 550px);
  min-height: 92px;
  padding: 1rem 1.35rem 1rem 1.7rem;
  border: 0;
  border-radius: 999px;
  background: #fff8ed;
  color: #292f24;
  cursor: pointer;
  font-size: 1.28rem;
  letter-spacing: -.02em;
}
.button-contact:hover { background: white; }
.contact-section { min-height: 740px; }
.contact-section > p:not(.eyebrow):not(.contact-status) { margin-bottom: 2rem; }
.contact-status {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 440px;
  margin: .8rem 0 4.5rem !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
}
.contact-status[hidden] { display: none; }
.contact-section h2 { max-width: 1200px; }
.contact-end { margin-top: 4rem; }

@media (max-width: 900px) {
  .hero-content {
    padding: 3rem 1.4rem 2.5rem;
  }
  .hero h1 { max-width: 12ch; font-size: clamp(3.65rem, 10vw, 6rem); }
  .hero-picture {
    min-height: 340px;
    height: min(58vw, 520px);
    background-position: 56% 60%;
  }
  .hero-index { display: none; }
  .screen-break-inner { min-height: 950px; }
  .screen-break-stage { top: 35%; }
  .ar-heading-side { gap: 1.25rem; }
  .how-cta-row { align-items: flex-start; }
}
@media (max-width: 560px) {
  .hero-content { padding: 2.1rem 1.4rem 2.3rem; }
  .hero h1 { font-size: clamp(3.45rem, 15vw, 4.8rem); }
  .hero-description { margin: 1.35rem 0 1.45rem; }
  .hero-picture {
    min-height: 0;
    height: clamp(280px, 78vw, 370px);
    background-position: 57% 55%;
  }
  .hero-photo-note { right: 7%; bottom: 9%; font-size: .65rem; }
  .screen-break-inner { min-height: 980px; }
  .screen-break-stage { top: 45%; bottom: 7%; }
  .screen-break-pasta { width: min(99vw, 480px); }
  .screen-break-copy > p:not(.eyebrow) { max-width: 310px; }
  .screen-break-cta { max-width: 100%; margin-top: 1.2rem; }
  .ar-heading { gap: 1.4rem; }
  .hero-actions .button-dark,
  .section-cta {
    width: 100%;
    min-width: 0;
    min-height: 78px;
    padding: .9rem 1rem .9rem 1.25rem;
    font-size: 1.07rem;
  }
  .how-cta-row { flex-direction: column; gap: 1.3rem; }
  .contact-section { min-height: 690px; }
  .contact-section h2 { font-size: clamp(3.2rem, 12vw, 5.4rem); }
  .button-contact { width: 100%; min-height: 86px; font-size: 1.15rem; }
}