.section { padding-block: clamp(var(--s-6), 9vw, var(--s-8)); }
.section--paper-2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink h2, .section--ink h3 { color: var(--on-ink); }
.section--ink p { color: var(--on-ink-soft); }

h2 + p { margin-top: var(--s-4); }
h3 + p { margin-top: var(--s-3); }

.lede {
  font-size: var(--t-lg);
  color: var(--on-paper-soft);
  max-width: 54ch;
  margin-top: var(--s-3);
}
.section--ink .lede { color: var(--on-ink-soft); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--ink); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(43, 32, 54, 0.70) 0%, rgba(43, 32, 54, 0.06) 30%, rgba(43, 32, 54, 0.10) 52%, rgba(28, 20, 36, 0.58) 100%),
    linear-gradient(100deg, rgba(28, 20, 36, 0.74) 0%, rgba(28, 20, 36, 0.34) 38%, rgba(28, 20, 36, 0) 68%);
}

.hero__inner {
  display: grid;
  align-content: end;
  min-height: min(88svh, 44rem);
  padding-block: var(--s-7) var(--s-6);
  gap: var(--s-4);
}

.hero h1 { color: #FFF7EE; max-width: 17ch; text-shadow: 0 2px 24px rgba(20, 12, 26, 0.55); }

.hero__sub {
  font-size: var(--t-lg);
  color: #F0DFD2;
  max-width: 48ch;
  text-shadow: 0 1px 12px rgba(20, 12, 26, 0.6);
}

.hero__rule { max-width: 22rem; }

/* On a narrow screen the type lands over the letters in the photo, so the
   frame moves up to the sky and the lower scrim carries more weight. */
@media (max-width: 48rem) {
  .hero__media img { object-position: 50% 34%; }
  .hero__media::after {
    background: linear-gradient(180deg,
      rgba(43, 32, 54, 0.60) 0%,
      rgba(43, 32, 54, 0.08) 24%,
      rgba(28, 20, 36, 0.58) 56%,
      rgba(28, 20, 36, 0.88) 100%);
  }
  .hero__inner { min-height: min(84svh, 40rem); padding-block: var(--s-6) var(--s-5); }
  .hero__rule { max-width: 15rem; }
}

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.hero__cta .tel { color: #FFF7EE; }
.hero__cta .tel:hover { color: var(--apricot); }

.hero__credit {
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  color: rgba(244, 229, 217, 0.86);
}

/* ---------- offer bands ---------- */
.offers__head { max-width: 46rem; }
.offers__head h2 { max-width: 16ch; }

.band {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  margin-top: var(--s-7);
}
.band__body { max-width: 40ch; }
.band__body h3 { font-size: var(--t-2xl); margin-bottom: var(--s-2); }
.band__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
}
.band__note {
  font-size: var(--t-sm);
  color: var(--on-paper-soft);
  border-top: 1px solid var(--paper-3);
  padding-top: var(--s-2);
  margin-top: var(--s-3);
}

.band--illuminate {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-4), 4vw, var(--s-6));
  box-shadow: var(--lift-3);
}
.band--illuminate h3 { color: var(--on-ink); }
.band--illuminate p { color: var(--on-ink-soft); }
.band--illuminate .band__note { border-top-color: var(--ink-3); color: var(--on-ink-soft); }
.band--illuminate .band__media img { box-shadow: none; }
.illuminate-mark {
  width: min(17rem, 68%);
  margin-bottom: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--ink-3), 0 0 34px -6px rgba(255, 63, 160, 0.45);
}

.band--booth .band__media img { aspect-ratio: 1 / 1; object-position: 50% 34%; }

.band__media--mark {
  display: grid;
  place-items: center;
  min-height: 13rem;
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse 62% 78% at 50% 50%, rgba(255, 63, 160, 0.16), rgba(56, 220, 230, 0.08) 55%, transparent 74%);
}
.band__media--mark img {
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow: 0 0 0 1px var(--ink-3);
}
.band--illuminate .illuminate-mark {
  width: min(27rem, 94%);
  margin: 0;
  filter: drop-shadow(0 0 26px rgba(255, 63, 160, 0.42)) drop-shadow(0 0 46px rgba(56, 220, 230, 0.24));
}

@media (min-width: 54rem) {
  .band { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .band--flip .band__media { order: -1; }
  .band--illuminate { grid-template-columns: 1fr 1fr; }
}

/* ---------- proof of work ---------- */
.jobs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s-4) var(--s-3);
  margin-top: var(--s-5);
  list-style: none;
  padding: 0;
}
.jobs li { margin: 0; }

/* ---------- areas ---------- */
.areas__grid { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
.areas__prose p { max-width: 56ch; }
.areas__list {
  columns: 2;
  column-gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-sm);
}
.areas__list li { break-inside: avoid; padding-block: 0.55rem; border-bottom: 1px solid var(--paper-3); }
.areas__list a { color: var(--ink); text-decoration: none; }
.areas__list a:hover { color: var(--coral-ink); text-decoration: underline; }

@media (min-width: 54rem) {
  .areas__grid { grid-template-columns: 1.25fr 1fr; gap: var(--s-6); align-items: start; }
}

/* ---------- owners ---------- */
.owners { display: grid; gap: var(--s-5); align-items: center; }
.owners__media img {
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 24%;
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
}
.owners__body h2 { max-width: 14ch; }
.owners__sig {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 24;
  font-size: var(--t-xl);
  color: var(--apricot);
  margin-top: var(--s-3);
}

@media (min-width: 54rem) {
  .owners { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-6); }
}

/* ---------- close ---------- */
.close { background: var(--coral); color: #FFF7F0; }
.close h2 { color: #FFF9F5; max-width: 13ch; }
.close p { color: #FFF7F0; }
.close__grid { display: grid; gap: var(--s-5); align-items: start; }
.close .lede { color: #FFF7F0; }
.close__rule { max-width: 18rem; margin-top: var(--s-5); --lit: #FFF3E0; --dim: #EF9D74; filter: drop-shadow(0 0 8px rgba(255, 231, 205, 0.6)); }
.close a, .close__tel { color: #FFF7F0; text-decoration-color: rgba(255, 247, 240, 0.55); }
.close a:hover { text-decoration-color: #FFF7F0; }

.close__form {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-4), 4vw, var(--s-5));
  box-shadow: var(--lift-3);
  display: grid;
  gap: var(--s-3);
}
.close__form .row { display: grid; gap: var(--s-3); }
.close__form .btn { justify-content: center; width: 100%; }
.close__form .fineprint { font-size: var(--t-xs); color: var(--on-ink-soft); margin: 0; }

@media (min-width: 54rem) {
  .close__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .close__form .row { grid-template-columns: 1fr 1fr; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-soft); padding-block: var(--s-6) var(--s-5); }
.site-footer h2 { font-size: var(--t-lg); color: var(--on-ink); margin-bottom: var(--s-2); }
.site-footer a { color: var(--on-ink); text-decoration: none; }
.site-footer a:hover { color: var(--apricot); text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--s-5); }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.site-footer li { padding-block: 0.22rem; }
.site-footer__brand img { width: 11rem; border-radius: 3px; margin-bottom: var(--s-3); }
.site-footer__rule { margin-top: var(--s-5); }
.site-footer__legal {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-3);
  font-size: var(--t-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
}
.socials { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1.5px solid var(--ink-3);
  border-radius: var(--radius);
}
.socials a:hover { border-color: var(--apricot); background: rgba(238, 159, 102, 0.12); }
.socials svg { width: 18px; height: 18px; }

@media (min-width: 54rem) {
  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-6); }
}