/* ==========================================================================
   Bramcott LLC — landing page composition
   Responsive editorial composition

   Sequence: masthead · image and statement · market context. The service
   register and the sample-quote panel that used to close this page moved to
   /products/ and /gpu-pricing/, so their rules are gone with them.

   No JavaScript. The mobile navigation remains a native <details> disclosure,
   styled in site.css.
   ========================================================================== */

.landing main.wrap, .landing main.frame { max-width: none; padding-inline: 0; padding-block: 0; min-height: 0; }

/* The hero shares a baseline and a bounded image crop at desktop widths. */
.statement { padding-block: clamp(32px, 5vw, 72px); }
.statement__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.statement__copy { min-width: 0; }
.statement__title {
  font-size: clamp(2.8rem, 4.5vw, 4.75rem); line-height: 1.04;
  letter-spacing: -.035em; margin: 0 0 24px; max-width: 13ch;
}
.hero__line { display: block; }
.hero__line + .hero__line {
  font-size: .51em; line-height: 1.2; letter-spacing: -.015em;
  margin-top: 20px; max-width: 20ch;
}
/* The statement's supporting copy is prose, so it reads at the document's
   reading size in the serif; only the meta line stays a chrome label. */
.hero__tag { font-size: 1.0625rem; line-height: 1.65; max-width: 52ch; margin: 0 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.statement .textlink { font-size: .875rem; }
.statement__art { margin: 0; min-width: 0; overflow: hidden; }
.statement__art img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.market-context { border-block: 1px solid var(--rule-soft); padding-block: 32px; }
.market-context__grid { display: grid; gap: 20px; }
.hero__punch { font: italic 400 clamp(1.75rem, 2.7vw, 2.5rem)/1.2 var(--font-heading); color: var(--evergreen); margin: 0; }
.hero__body { max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; margin: 0 0 20px; }
.hero__meta { font-size: .6875rem; line-height: 1.7; letter-spacing: .045em; text-transform: uppercase; margin: 0; }
@media (min-width: 960px) {
  .statement__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); }
  .statement__art img { aspect-ratio: 4 / 5; max-height: 620px; }
  .market-context__grid { grid-template-columns: 1fr 2fr; gap: 64px; }
}
@media (max-width: 479px) {
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .statement__title { font-size: 2.8rem; }
}

/* Long place names and enlarged headings remain inside narrow columns. */
.landing h1, .landing h2 { overflow-wrap: anywhere; }