:root {
  --ink: #161513;
  --ink-2: #4a4843;
  --mute: #7d7a72;
  --rule: #d9d6cd;
  --paper: #f6f4ef;
  --card: #ffffff;
  --accent: #8a6d2f; /* brass, from the loft's fixtures */
  --display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.1; margin: 0 0 .4em; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.5vw, 62px); }
h2 { font-size: clamp(26px, 3.2vw, 36px); }
h3 { font-size: 22px; margin-top: 1.4em; }
p { margin: 0 0 1em; }
em { font-style: italic; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: 8px 12px; z-index: 100; }
.fine { font-size: 14px; color: var(--mute); }
.center { text-align: center; }
.narrow { max-width: 620px; }

/* ---------- header: desktop = logo left, menu centred on the page, sizes as on the old site; mobile = logo centered, menu behind the toggle */
.site-header { position: sticky; top: 0; z-index: 50; background: #0f0e0c; color: #f3efe6; padding: 11px clamp(20px, 4vw, 50px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
/* the full menu shows down to 761px wide (about half a laptop screen); Book Now sits at
   the right edge, as far from it as the logo is from the left, and the other three links
   sit as one group in the middle of the space between the logo and Book Now */
@media (min-width: 761px) {
  .site-header { position: relative; grid-template-columns: auto 1fr; column-gap: clamp(10px, 3vw, 54px); }
  .site-nav > a:first-child, .site-nav > a[href="/contact"] { margin-left: auto; }
}
.header-top { display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; }
/* the "5" is drawn in the lower two thirds of the image; the shift puts the drawn part level with the menu */
.brand-logo { height: 100px; width: auto; max-width: none; display: block; transform: translateY(-16.5%); }
.site-nav { display: flex; align-items: center; gap: clamp(10px, 3vw, 54px); font-size: clamp(12px, 1.65vw, 21px); letter-spacing: .06em; text-transform: uppercase; }
.site-nav a { text-decoration: none; color: #f3efe6; opacity: .8; padding: 10px 6px; display: block; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current], .site-nav .is-active > .nav-folder-title, .site-nav .nav-link.is-active { opacity: 1; }
/* Book Now, the one framed item in the menu */
.site-nav > a[href="/contact"] { border: 1px solid #fff; opacity: 1; padding: 10px 20px; }
.site-nav > a[href="/contact"]:hover, .site-nav > a[href="/contact"][aria-current] { background: #fff; color: #0f0e0c; }
/* the page you are on: a thin underline under its link (Book Now fills in instead) */
.site-nav > a[aria-current]:not([href="/contact"]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; }
.nav-folder { position: relative; }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: #161513; padding: 8px 0; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.nav-menu a { padding: 10px 18px; }
.nav-folder:hover .nav-menu, .nav-folder:focus-within .nav-menu { display: block; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #f3efe6; margin: 5px 0; }
@media (max-width: 760px) {
  .site-header { padding: 10px 16px; display: block; }
  .header-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .brand { grid-column: 2; justify-content: center; }
  .brand-logo { height: 48px; }
  .nav-toggle { display: block; grid-column: 3; justify-self: end; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #0f0e0c; padding: 8px 12px 18px; gap: 0; font-size: 13px; letter-spacing: .16em; max-height: calc(100vh - 68px); overflow-y: auto; text-align: center; }
  .site-nav.is-open { display: flex; }
  .nav-menu { display: block; position: static; box-shadow: none; padding: 0 0 6px; background: transparent; }
  .nav-menu a { opacity: .7; font-size: 12px; }
  .site-nav a { padding: 12px; }
  .site-nav > a[href="/contact"] { align-self: center; padding: 12px 28px; margin: 8px 0; }
}

/* ---------- hero (home) */
.hero { min-height: min(78vh, 720px); background-size: cover; background-position: center; position: relative; display: grid; place-items: center; color: #fff; text-align: center; padding: 60px 20px; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.hero-inner { position: relative; max-width: 760px; }
.hero h1 { font-size: clamp(44px, 7vw, 84px); font-weight: 400; margin-bottom: .2em; text-shadow: 0 2px 20px rgba(0,0,0,.4); font-variant-numeric: lining-nums; }
.hero h1 em { font-weight: 400; }
.hero-sub { font-size: clamp(16px, 2vw, 20px); letter-spacing: .04em; opacity: .95; }
.hero-cta { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ---------- page banners (src/banners.js). As on the old site, the menu sits on the photo. */
body:has(> .hero, > .banner-strip) .site-header { position: absolute; left: 0; right: 0; background: transparent; }
.hero-short { min-height: 0; padding: 172px 20px 60px; }
.hero-short::before { background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.45)); }
.hero-short h1 { font-size: clamp(38px, 5.5vw, 62px); margin-bottom: .45em; }
.hero-short p { font-size: 15.5px; max-width: 640px; margin: 0 auto .8em; }
.hero-short p:empty { display: none; }
/* photo banner with a small label and a serif introduction (gallery, loft, rooftop, events, videos) */
.hero-intro h1 { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1.1em; text-shadow: none; }
.hero-intro p { font-family: var(--display); font-size: clamp(18px, 2vw, 22px); line-height: 1.35; max-width: 660px; }
/* plain strip behind the menu on every other page; the title follows, centred */
/* as on the old site: the darker copy of the photo, cropped to its upper part */
.banner-strip { height: 122px; background: #0f0e0c url('/img/full/e7e6f34e_Screen_Shot_2024-01-07_at_9.47.34_PM.jpg') center 24% / cover; position: relative; }
.banner-strip::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
body:has(> .banner-strip) .page-head:not(.narrow) { text-align: center; }
body:has(> .banner-strip) .page-head:not(.narrow) + .form { margin-inline: auto; }
/* the strip is exactly as tall as the header, so the logo and menu sit in its middle at
   the same size and place as on the photo-banner pages (122px, 68px and 72px tall) */
@media (max-width: 760px) { .hero-short { padding-top: 112px; } .banner-strip { height: 68px; } }
@media (max-width: 640px) { .banner-strip { height: 72px; } }

/* ---------- main */
.site-main { max-width: var(--max); margin: 0 auto; padding: 56px 28px 80px; }
.page-head { margin-bottom: 30px; }
.page-head h1 { margin-bottom: .2em; }
.contact-line { font-size: 18px; }
.notice { border-left: 3px solid var(--accent); background: #efe7d3; padding: 12px 18px; margin: 0 0 28px; max-width: 760px; }
.notice p { margin: 0; }

/* ---------- buttons */
.btn { display: inline-block; font-family: var(--sans); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 14px 26px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; }
.btn:hover { background: #2b2925; }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.btn-accent { background: var(--accent); border-color: var(--accent); }
.btn-accent:hover { background: #75592a; }

/* ---------- home grid */
.home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(6px, 1.4vw, 16px); margin-bottom: 64px; }
.home-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; text-decoration: none; background: #000; }
.home-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.home-card:hover img { transform: scale(1.04); }
.home-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(6px, 1.5vw, 18px); color: #fff; font-family: var(--display); font-size: clamp(12px, 2.5vw, 28px); line-height: 1.15; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); }

/* ---------- galleries */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.gallery-item { display: block; overflow: hidden; background: #e9e6df; aspect-ratio: 3 / 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.03); }
.stack a { display: block; margin-bottom: 24px; }
.building-section { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; margin: 0 0 56px; }
.building-section h1 a, .building-section h2 a { text-decoration: none; }
.building-section h1 { font-size: clamp(26px, 3.2vw, 36px); }
/* one column: the heading goes above its photo, the text below it */
@media (max-width: 760px) {
  .building-section { grid-template-columns: 1fr; gap: 14px; }
  .building-section > div { display: contents; }
  .building-section h1, .building-section h2 { order: -1; margin: 0; }
  .building-section p { margin: 0; }
}

/* ---------- lightbox */
.lightbox { border: 0; padding: 0; background: rgba(8,8,8,.96); color: #fff; width: 100vw; height: 100vh; max-width: none; max-height: none; }
.lightbox::backdrop { background: rgba(0,0,0,.9); }
.lightbox figure { margin: 0; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 48px 64px 24px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; }
.lightbox figcaption { font-size: 14px; opacity: .8; padding-top: 10px; min-height: 24px; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; padding: 10px 16px; opacity: .8; }
.lb-close { top: 8px; right: 14px; }
.lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox-video .video-frame { width: 100%; height: 100%; display: grid; place-items: center; padding: 40px; }
.lightbox-video iframe { width: min(100%, 1100px); aspect-ratio: 16 / 9; height: auto; border: 0; }

/* ---------- videos */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.video-card { position: relative; border: 0; padding: 0; background: #000; cursor: pointer; text-align: left; display: block; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; font: inherit; }
.video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.video-card .play { position: absolute; left: 50%; top: 45%; width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.7); }
.video-card .play::after { content: ""; position: absolute; left: 22px; top: 17px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.video-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; font-size: 13px; letter-spacing: .04em; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
.video-card.is-still { cursor: default; }

/* ---------- reviews / logos */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 40px; }
.review { margin: 0; padding: 26px 28px; background: var(--card); border: 1px solid var(--rule); font-family: var(--display); font-size: 19px; line-height: 1.5; }
/* the client's name heads the card, as on the old site */
.review { display: flex; flex-direction: column; }
.review p { margin: 0; }
.review footer { order: -1; font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.logo { background: var(--card); border: 1px solid var(--rule); aspect-ratio: 1; display: grid; place-items: center; padding: 18px; }
.logo img { max-height: 100%; width: auto; object-fit: contain; }

/* ---------- pricing */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.price-col { background: var(--card); border: 1px solid var(--rule); padding: 30px 32px; }
.price-col h2 { letter-spacing: .12em; text-transform: uppercase; font-family: var(--sans); font-weight: 400; font-size: 15px; color: var(--mute); border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.price-col h3:first-of-type { margin-top: .6em; }
.pricing-notes { max-width: 720px; container-type: inline-size; }
.pricing-notes > :first-child { margin-top: 0; }
/* optional extras: each price stays on the line with its item, the type shrinking to fit a narrow column */
/* every list and paragraph in the notes is the size of the Optional lines; only those lines refuse to wrap */
.pricing-notes ul, .pricing-notes p { font-size: min(17px, 4.6cqw); }
.price-lines { white-space: nowrap; }
.pricing-notes p:has(> em:only-child) { line-height: 1.25; }
.pricing-notes ul { padding-left: 20px; }
@media (max-width: 760px) { .pricing { grid-template-columns: 1fr; } }
/* pricing page: the two price boxes stacked on the left, the notes beside them on the
   right, then the Book Now button centred above the brochures. */
.pricing-cta { text-align: center; margin: 40px 0 16px; }
@media (min-width: 761px) {
  .site-main:has(> .pricing) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: start; }
  .site-main:has(> .pricing) > * { grid-column: 1 / -1; }
  .site-main:has(> .pricing) > .pricing { grid-column: 1; grid-template-columns: 1fr; gap: 24px; }
  .site-main:has(> .pricing) > .pricing-notes { grid-column: 2; max-width: none; }
  .pricing-notes ul, .pricing-notes p { font-size: min(17px, 4.3cqw); }
}

/* ---------- decks */
/* always three across; the label and button shrink with the cards */
.deck-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vw, 18px); }
/* the name sits in the middle of the photo, the download button under it */
.deck-card { position: relative; display: block; text-decoration: none; padding-bottom: 78px; }
.deck-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.deck-card span { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 3 / 2; display: grid; place-items: center; color: #fff; font-family: var(--sans); font-weight: 400; font-size: clamp(13px, 2.6vw, 22px); background: rgba(0,0,0,.28); }
.deck-card small { position: absolute; left: 50%; top: calc(100% + 22px); transform: translateX(-50%); font-family: var(--sans); font-size: clamp(8px, 2.2vw, 11px); letter-spacing: .2em; white-space: nowrap; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: clamp(7px, 1.6vw, 11px) clamp(8px, 2.6vw, 24px); background: transparent; }
.deck-card small:hover { background: var(--accent); color: #fff; }
/* the photo opens the brochure in a preview window (site.js) */
.pdf-preview .pdf-frame { width: 100%; height: 100%; padding: 60px 24px 24px; }
.pdf-preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* foot of the pricing page: a rule, then the brochure cards */
.brochures { border-top: 1px solid var(--rule); margin-top: 24px; padding-top: 44px; text-align: center; }
.brochures h2 { font-family: var(--sans); font-weight: 400; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 28px; }
.btn-outline-accent { background: transparent; color: var(--accent); border-color: var(--accent); padding: 16px 30px; font-size: 13px; letter-spacing: .2em; }
.btn-outline-accent:hover { background: var(--accent); color: #fff; }

/* ---------- forms */
.form { max-width: 640px; display: grid; gap: 18px; }
/* field name and its "(required)" note share a line, the field sits under them */
.form label { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.form .req { text-transform: none; letter-spacing: 0; color: var(--mute); }
.form input, .form textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--rule); background: #fff; color: var(--ink); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form label > input, .form label > textarea, .form label > select { display: block; width: 100%; margin-top: 6px; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }

/* ---------- admin */
.tbl { overflow-x: auto; margin-bottom: 40px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--rule); }

/* ---------- footer */
.site-footer { background: #0f0e0c; color: #cfc9bd; padding: 48px 28px 28px; font-size: 14px; }
.footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-brand { font-family: var(--display); font-size: 26px; color: #f3efe6; margin-bottom: 6px; }
.site-footer a { color: #f3efe6; }
.footer-fine { max-width: var(--max); margin: 30px auto 0; border-top: 1px solid #2a2823; padding-top: 16px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8d887c; }
@media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr; } .site-main { padding: 36px 18px 60px; } .site-header { padding: 12px 16px; } }

/* ---------- portal + admin */
.btn-outline { background: transparent; color: var(--ink); }
.gallery-cta { margin: 28px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 36px; }
.stat { background: var(--card); border: 1px solid var(--rule); padding: 18px 20px; }
.stat-k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.stat-v { font-family: var(--display); font-size: 40px; line-height: 1.1; margin: 4px 0; }
.stat-n { font-size: 14px; color: var(--ink-2); }
.stat.cta { display: grid; align-content: center; gap: 10px; }
.program { margin-top: 40px; }
.terms { padding-left: 20px; }
.terms li { margin-bottom: 8px; }
.form.wide { max-width: 980px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.form select { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--rule); background: #fff; color: var(--ink); }
.form .check > input { display: inline-block; width: auto; margin: 0; }
.form .check { display: flex; gap: 10px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); }
.admin-nav { display: flex; gap: 4px; margin: -20px 0 24px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.admin-nav a { text-decoration: none; padding: 8px 12px; border: 1px solid var(--rule); color: var(--ink-2); }
.admin-nav a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.inline { display: inline; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* ---------- new-client voucher offer (built by site.js) */
.offer { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: min(360px, calc(100vw - 32px)); background: var(--ink); color: #f3efe6; border: 1px solid #3a372f; border-top: 3px solid var(--accent); padding: 30px 30px 28px; box-shadow: 0 18px 50px rgba(0,0,0,.4); opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; }
.offer.is-open { opacity: 1; transform: none; }
.offer-eyebrow { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #c9a55a; margin: 0 0 10px; }
.offer-title { font-family: var(--display); font-size: 34px; font-weight: 500; line-height: 1.05; font-variant-numeric: lining-nums; margin: 0 0 10px; }
.offer-text { font-size: 15px; line-height: 1.5; color: #cfcabd; margin: 0 0 20px; }
.offer .btn { display: block; text-align: center; }
.offer-close { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #a8a396; font-size: 24px; line-height: 1; padding: 6px 8px; cursor: pointer; }
.offer-close:hover { color: #fff; }
/* phones: a slim bar along the bottom so it never covers the photos */
@media (max-width: 560px) {
  .offer { left: 0; right: 0; bottom: 0; width: auto; display: flex; align-items: center; gap: 12px; padding: 10px 42px 10px 14px; border-width: 3px 0 0; }
  .offer-eyebrow, .offer-text { display: none; }
  .offer-title { flex: 1; font-size: 17px; line-height: 1.15; margin: 0; }
  .offer .btn { padding: 10px 12px; font-size: 10.5px; letter-spacing: .12em; white-space: nowrap; }
  .offer-close { top: 50%; right: 6px; transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { .offer { transition: none; } }

/* ---------- review form (opened by "Leave us a Review", built by site.js) */
.review-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 0; padding: 34px 36px 36px; background: var(--paper); color: var(--ink); }
.review-dialog::backdrop { background: rgba(0,0,0,.6); }
.review-dialog h2 { margin-bottom: .7em; }
.review-dialog .form { max-width: none; }
.review-dialog .lb-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink-2); cursor: pointer; padding: 6px 8px; }

/* ---------- Clients & Reviews: four bands on one page (src/work.js) */
[hidden] { display: none !important; }
.band { margin-top: 64px; }
.band:first-of-type { margin-top: 0; }
.band-title { text-align: center; font-family: var(--sans); font-weight: 400; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 26px; }
.band .logo-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.band .logo { padding: 12px; }
.see-all { display: block; margin: 22px auto 0; }
.review-cta { text-align: center; margin-bottom: 26px; }

/* Inquiry form pages: heading kept for search engines and screen readers, not shown. */
.page-head:has(.contact-line) h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a[href="#voucher-terms"] { text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Past Events & Reviews: fixed column counts so a row never ends on one lone thumbnail.
   Six photos and four videos show at first; a last odd one out spans its whole row. */
.band .gallery, .band .video-grid.is-open { grid-template-columns: repeat(3, 1fr); }
.band .video-grid { grid-template-columns: repeat(4, 1fr); }
.band .gallery > :last-child:nth-child(3n+1), .band .video-grid.is-open > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .band .gallery, .band .video-grid, .band .video-grid.is-open { grid-template-columns: repeat(2, 1fr); }
  .band .gallery > :last-child:nth-child(3n+1), .band .video-grid.is-open > :last-child:nth-child(3n+1) { grid-column: auto; }
  .band .gallery > :last-child:nth-child(odd), .band .video-grid.is-open > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* home page sign-up: the voucher line stays on one line at every width, its footnote in fine print */
.home-grid ~ .page-head { max-width: none; }
.home-grid ~ .page-head h2 { white-space: nowrap; font-size: clamp(10px, 2.9vw, 36px); }
.home-grid ~ .page-head p { font-size: 14px; color: var(--mute); }