/* =========================================================================
   TRELLIS 925 | Refinement layer
   Loads after trellis.css on every page. Nothing here changes the brand:
   same palette, same typefaces, same components. It corrects spacing,
   container width, symmetry and alignment, and adds the booking section.

   Contents
   01  Tokens and container
   02  Section rhythm
   03  Header and navigation
   04  Heroes
   05  Split rows and photographs
   06  Card rows and grids
   07  Event Options
   08  Booking and inquiry (Check Availability & Book, Tripleseat containers)
   09  Home page membership feature
   10  Footer
   11  Accessibility
   12  Phones and small tablets
   ========================================================================= */

/* ---------- 01 Tokens and container ---------- */
:root {
  --content: 1240px;                          /* width of the content column */
  --section-y: clamp(52px, 6vw, 88px);        /* one vertical rhythm for every section */
  --head-gap: clamp(28px, 3.4vw, 48px);       /* space between a section heading and its content */
}
html { scroll-padding-top: 88px; }            /* anchors land below the sticky header */

/* trellis.css ended with `.wrap, .wrap-narrow { max-width: 100% }`, which removed
   the container cap. Content stretched edge to edge on wide screens and every
   photograph and text block grew with it. The cap is restored here. */
.wrap { max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: calc(860px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap .wrap-narrow { padding-inline: 0; max-width: 860px; }

/* ---------- 02 Section rhythm ---------- */
.section-head { margin-bottom: var(--head-gap); }
.section-head > :last-child { margin-bottom: 0; }
.feature-row + .feature-row { margin-top: clamp(40px, 5vw, 72px); }
.cta-photo { padding-block: clamp(72px, 9vw, 128px); }
.corporate-enhance { padding: var(--section-y) 0 !important; }
.enhance-grid { margin-top: 0; }
.cta-band .lede { margin: var(--s3) auto var(--s4); }

/* Two neighbouring sections on the same background shared a doubled gap
   (bottom padding of one plus top padding of the next). One rhythm unit is kept. */
main:not(.cm) > section:not([class*="bg-"]):not(.hero):not(.page-hero):not(.cta-photo):not(.center-hero)
  + section:not([class*="bg-"]):not(.hero):not(.page-hero):not(.cta-photo):not(.center-hero) { padding-top: 0; }
main:not(.cm) > section.bg-alt + section.bg-alt { padding-top: 0; }

/* Headings break into even lines instead of leaving one word alone on the last line */
h1, h2, h3, .display, .h-xl, .h-lg, .story-quote { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* A centred paragraph centres its own box as well as its text */
p.center { margin-inline: auto; }

/* The last paragraph in a centred intro no longer adds its own bottom margin */
.wrap-narrow.center > p:last-child,
.stack > p:last-child { margin-bottom: 0; }

/* Legal pages: the text column had no side gutter, so on a phone the copy ran to the screen edge */
.prose { max-width: calc(820px + 2 * var(--gutter)); padding-inline: var(--gutter); }
.prose h2:first-of-type { margin-top: var(--s4); }

/* ---------- 03 Header and navigation ---------- */
/* Logo and tour button now sit on the same left and right edges as the page content */
.site-header { padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2)); }
.brandmark { flex-shrink: 0; }
.brandmark .bm-text { white-space: nowrap; }
.nav { gap: clamp(12px, 1.4vw, 22px); flex-shrink: 0; }
@media (max-width: 1380px) and (min-width: 1121px) {
  .nav { gap: 15px; }
  .nav a { font-size: .7rem; letter-spacing: .1em; }
  .nav .btn { padding: .75em 1.15em; }
}
@media (max-width: 1240px) and (min-width: 1121px) {
  .site-header { gap: 16px; }
  .nav { gap: 11px; }
  .nav a { font-size: .66rem; letter-spacing: .07em; }
  .nav .btn { padding: .75em 1em; }
  .brandmark img { height: 46px; }
  .brandmark .bm-text { font-size: 1.05rem; }
}
/* With nine destinations the full bar needs about 1,120px. Below that the menu button takes over,
   so links never crowd or wrap at tablet and small laptop widths. */
@media (max-width: 1120px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(251, 248, 242, .985); }
  .nav-home { display: block; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 6px; background: var(--linen); padding: 96px 32px 40px; transform: translateX(100%);
    transition: transform .4s var(--ease); overflow-y: auto; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .4); }
  .nav.open { transform: none; }
  .nav a { font-size: .9rem; padding: 10px 0; width: 100%; }
  .nav .btn { width: 100%; margin-top: var(--s2); padding: 1em 1.4em; }
  .nav-toggle { display: flex; }
}

/* ---------- 04 Heroes ---------- */
/* Interior heroes carried 130 to 180px above the title and 56 to 88px below it,
   which pushed the copy off centre. Padding is now equal top and bottom. */
.page-hero { min-height: clamp(340px, 46vh, 460px); padding: clamp(56px, 6.5vw, 88px) 0; }
.page-hero.plain { min-height: clamp(260px, 34vh, 340px); }
.page-hero .wrap { width: 100%; }
.page-hero .hero-logo { height: clamp(60px, 7vw, 84px); margin-top: var(--s2); margin-bottom: var(--s2); }
.page-hero .crumb, .page-hero p { margin-inline: auto; }
.page-hero .btn-row { justify-content: center; }
.page-hero .lede { margin-bottom: 0; }
.hero .lede { margin-bottom: 0; }
.hero .btn-row { margin-top: var(--s4); }

/* ---------- 05 Split rows and photographs ---------- */
/* A 2:3 portrait at half the page width stood 900px tall beside 170px of text.
   The portrait keeps its full, uncropped frame but takes a narrower column,
   so the row is roughly a third shorter and the text column no longer floats in space. */
@media (min-width: 861px) {
  .split:has(> .figure .media.tall) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .split:has(> .figure:first-child .media.tall) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  /* Alternating rows: .split-rev was written in the pages but never defined, so every
     photograph sat on the right. Reversed rows now place the photograph on the left. */
  .split.split-rev > .figure { order: -1; }
  .split.split-rev:has(> .figure .media.tall) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  /* Stacked feature rows alternate sides so the pair reads as one composition */
  .feature-row + .feature-row > .figure { order: 2; }
  .feature-row + .feature-row:has(> .figure .media.tall) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
/* A lone photograph in a three column grid is centred instead of leaving two empty columns */
.grid.g-3:has(> :only-child) { grid-template-columns: minmax(0, 400px); justify-content: center; }

/* ---------- 06 Card rows and grids ---------- */
/* Amenity tiles: an incomplete last row left an empty grey cell. Tiles in the last row now share the full width. */
.amenities { display: flex; flex-wrap: wrap; gap: 1px; }
.amenity { flex: 1 1 calc(33.333% - 1px); min-width: 0; }
@media (max-width: 1080px) { .amenity { flex-basis: calc(50% - 1px); } }
@media (max-width: 560px)  { .amenity { flex-basis: 100%; } }

/* Package cards: rows stay balanced at every width (no single card stranded on a row) */
.packages { gap: 20px; }
.pkg { padding: 28px 22px; }
.pkg .btn { padding-inline: 1em; letter-spacing: .16em; }
.packages:has(> .pkg:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.packages:has(> .pkg:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1359px) {
  .packages:has(> .pkg:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .packages:has(> .pkg:nth-child(5):last-child) > .pkg { grid-column: span 2; }
  .packages:has(> .pkg:nth-child(5):last-child) > .pkg:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 1080px) {
  .packages:has(> .pkg:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .packages:has(> .pkg:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packages:has(> .pkg:nth-child(5):last-child) > .pkg,
  .packages:has(> .pkg:nth-child(5):last-child) > .pkg:nth-child(4) { grid-column: auto; }
  .packages:has(> .pkg:nth-child(5):last-child) > .pkg:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .packages:has(> .pkg:nth-child(5):last-child),
  .packages:has(> .pkg:nth-child(4):last-child) { grid-template-columns: 1fr; }
  .packages:has(> .pkg:nth-child(5):last-child) > .pkg:nth-child(5) { grid-column: auto; }
}

/* Corporate enhancements: seven cards. Four across with the holiday card closing the second row,
   then three across with the holiday card as a full width closing row. No empty slots at any width. */
.enhance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 22px); }
.enhance-holiday { grid-column: span 2; }
@media (max-width: 1199px) { .enhance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .enhance-holiday { grid-column: 1 / -1; } }
@media (max-width: 760px)  { .enhance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .enhance-grid { grid-template-columns: 1fr; } }

/* Card links stay on one line so they share a baseline across the row */
@media (max-width: 1180px) { .card-body .link-arrow { font-size: .68rem; letter-spacing: .1em; white-space: nowrap; } }

/* Reviews: quote text and attribution align across each row */
.rev p { max-width: none; }

/* ---------- 07 Event Options ---------- */
/* Add-on selector: 15 options as 3 rows of 5, then 5 rows of 3, then pairs. Never a ragged last row. */
#addons .addon-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 999px) { #addons .addon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 620px) {
  #addons .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .7rem !important; }
  #addons .addon:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #addons .addon { padding: 1rem .9rem; }
  #addons .addon .an { font-size: 1.02rem; padding-right: 1.1rem; }
}
/* Selection bar: count, note and button stay on one line until there is no room, then stack cleanly */
.proposal-bar { margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px clamp(16px, 3vw, 40px); }
.proposal-bar .note { max-width: 46ch; margin: 0; }
@media (max-width: 760px) { .proposal-bar { grid-template-columns: auto minmax(0, 1fr); } .proposal-bar .btn { grid-column: 1 / -1; width: 100%; } }

/* Décor and Floral: the two lists sat in one narrow column beside an empty half.
   They now stand side by side as two equal cards. */
.decor-head { max-width: 60ch; margin-bottom: var(--head-gap); }
.decor-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
.decor-col { border-top: 2px solid var(--brass); padding-top: var(--s3); }
.decor-col h3 { font-size: 1.3rem; letter-spacing: .01em; margin-bottom: var(--s2); }
.decor-col .tick-list { margin: 0; }
.decor-note { margin: var(--s3) 0 0; font-size: .9rem; max-width: none; }
@media (max-width: 760px) { .decor-cols { grid-template-columns: 1fr; } }

/* Intro photograph on Event Options and the details table */
.intro-figure { margin-top: var(--s4); }
#details .spec th { width: 30%; }

/* ---------- 08 Booking and inquiry ---------- */
/* One reusable "Check Availability & Book" card. Dark, brass rule on top. */
.book-card { background: var(--ink); color: var(--linen); padding: clamp(24px, 3vw, 36px); border-top: 2px solid var(--brass-light);
  display: flex; flex-direction: column; align-items: flex-start; }
.book-card .eyebrow { color: var(--brass-light); margin-bottom: var(--s2); }
.book-card .eyebrow::before { background: var(--brass-light); }
.book-card h2, .book-card h3 { color: var(--linen); font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.book-card p { color: rgba(244, 238, 227, .86); margin: var(--s2) 0 var(--s3); max-width: 46ch; font-size: .98rem; }
.book-card .btn { margin-top: auto; }
.book-card .book-note { font-size: .8rem; color: rgba(244, 238, 227, .6); margin: 12px 0 0; }

/* Supporting line under a Check Availability & Book button on dark bands */
.book-support { font-size: .86rem; color: rgba(244, 238, 227, .72); max-width: 62ch; margin: var(--s3) auto 0; }
.cta-band .link-arrow, .cta-photo .link-arrow { color: var(--brass-light); margin-top: var(--s3); }

/* Plan your event section (inquiry form beside the booking card) */
.plan-shell { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.plan-aside { display: grid; gap: clamp(20px, 2.4vw, 28px); position: sticky; top: 104px; }
.contact-shell { gap: clamp(28px, 4vw, 56px); }
.contact-shell > aside, .contact-shell > .plan-aside { position: sticky; top: 104px; }
.contact-details-card + .book-card, .book-card + .contact-details-card { margin-top: 0; }
@media (max-width: 900px) {
  .plan-shell, .contact-shell { gap: 20px; }
  .plan-shell { grid-template-columns: 1fr; }
  .plan-aside, .contact-shell > aside, .contact-shell > .plan-aside { position: static; }
}

/* Reserve Your Date: booking card beside the contact card, equal height */
.reserve-shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
.reserve-shell > .contact-details-card { display: flex; flex-direction: column; align-items: flex-start; }
.reserve-shell > .contact-details-card p { margin: var(--s2) 0 var(--s3); }
@media (max-width: 760px) { .reserve-shell { grid-template-columns: 1fr; } }

/* Selections carried from the add-on selector to the inquiry form */
.selection-note { display: none; margin-top: var(--s3); padding: 14px 16px; background: rgba(166, 124, 61, .08); border-left: 3px solid var(--brass); font-size: .92rem; color: var(--espresso); }
.selection-note.show { display: block; }
.selection-note strong { font-weight: 500; }
.selection-note .selection-copy { margin-top: 10px; background: none; border: 1px solid var(--brass); color: var(--bronze); font-family: var(--sans);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; padding: .6em 1.1em; cursor: pointer; }
.selection-note .selection-copy:hover { background: var(--brass); color: var(--linen); }

/* Tripleseat containers. Only the surrounding card is styled here. */
.contact-form-card { min-width: 0; }
.ts-form-mount { min-width: 0; }
.ts-loading-note { font-size: .86rem; color: var(--text-soft); margin: var(--s3) 0 0; }

/* ---------- 09 Home page membership feature ---------- */
.feature-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); margin-top: clamp(24px, 3vw, 44px);
  background: var(--ink); color: var(--linen); border: 1px solid var(--rule); }
.feature-card .media { aspect-ratio: auto !important; min-height: 280px; height: 100% !important; }
.feature-card .media img { object-fit: cover !important; object-position: center 30% !important; }
.feature-card-body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.feature-card-body .eyebrow { color: var(--brass-light); margin-bottom: var(--s2); }
.feature-card-body .eyebrow::before { background: var(--brass-light); }
.feature-card-body h3 { color: var(--linen); font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.08; }
.feature-card-body p { color: rgba(244, 238, 227, .84); margin: var(--s2) 0 var(--s3); max-width: 52ch; }
@media (max-width: 760px) {
  .feature-card { grid-template-columns: 1fr; }
  .feature-card .media { min-height: 0; aspect-ratio: 3 / 2 !important; height: auto !important; }
}

/* ---------- 09b Home page 925 Catering feature ---------- */
.cf-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.cf-figure { position: relative; margin: 0 0 18px; }
.cf-figure::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--brass-light); pointer-events: none; }
.cf-figure picture { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--greige); }
.cf-figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
/* The photograph is a link to 925 Catering, the same destination as the button.
   Hover, on devices that hover: the photograph eases in very slightly and the frame warms. Nothing is overlaid. */
.cf-link { display: block; position: relative; z-index: 1; }
.cf-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.cf-figure img { transition: transform 1.1s var(--ease); }
.cf-figure::before { transition: border-color .6s var(--ease); }
@media (hover: hover) {
  .cf-figure:hover img { transform: scale(1.025); }
  .cf-figure:hover::before { border-color: var(--brass); }
}
@media (prefers-reduced-motion: reduce) { .cf-figure img, .cf-figure::before { transition: none; } .cf-figure:hover img { transform: none; } }
.cf-copy .h-xl { max-width: 15ch; }
.cf-copy p { max-width: 44ch; }
.cf-copy .btn { margin-top: var(--s2); }
.cf-copy .cf-note { font-size: .8rem; letter-spacing: .03em; color: var(--text-soft); margin: var(--s3) 0 0; }
@media (max-width: 860px) {
  .cf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); }
  .cf-figure { margin-bottom: 12px; }
  .cf-figure::before { inset: 12px -10px -12px 12px; }
}
@media (max-width: 640px) {
  .cf-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .cf-copy .h-xl { max-width: none; }
}

/* ---------- 10 Footer ---------- */
.site-footer { padding-block: clamp(44px, 5vw, 64px) 28px; }
.footer-top { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: clamp(28px, 4vw, 56px); padding-bottom: var(--s4); }
.footer-brand p { margin-bottom: 0; }
.site-footer h4 { margin-bottom: var(--s2); }
.footer-col h4 + a { padding-top: 0; }
.footer-col h4:not(:first-child) { margin-top: var(--s3); }
.footer-bottom { padding-top: var(--s3); align-items: center; }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-brand, .footer-col:last-child { grid-column: 1 / -1; } }

/* ---------- 11 Accessibility ---------- */
/* Brass buttons: cream text on the original brass measured 3.56:1, below the 4.5:1
   standard for small text. A slightly deeper brass brings it to 4.71:1. Hover deepens further. */
:root { --brass-btn: #8D6934; --brass-btn-hover: #75572B; }
.btn-brass { background: var(--brass-btn); border-color: var(--brass-btn); color: var(--linen); }
.btn-brass:hover { background: var(--brass-btn-hover); border-color: var(--brass-btn-hover); }
.ts-form-mount input[type="submit"], .ts-form-mount button[type="submit"] { background: var(--brass-btn); border-color: var(--brass-btn); }
.ts-form-mount input[type="submit"]:hover, .ts-form-mount button[type="submit"]:hover { background: var(--brass-btn-hover); border-color: var(--brass-btn-hover); }

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 300; background: var(--linen); color: var(--ink);
  padding: .7rem 1.1rem; font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; border: 1px solid var(--brass); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn { min-height: 44px; }
.nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.faq summary { min-height: 44px; }

/* ---------- 12 Phones and small tablets ---------- */
@media (max-width: 860px) {
  .split, .feature-row { gap: var(--s4); }
}
@media (max-width: 760px) {
  .page-hero { min-height: 0; padding: 56px 0; }
  .page-hero.plain { min-height: 0; }
  .hero { min-height: clamp(520px, 78vh, 680px); padding-bottom: 0; }
  .hero .wrap { padding-top: 72px; }
  .cta-photo { padding-block: 64px; }
  .spec th, .spec td { padding: 12px 10px; }
  .proposal-bar { position: static; padding: 16px 18px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 520px) {
  .btn-row { gap: 12px; }
  .hero-stats .st { padding: 6px 10px; }
  .spec th { width: 38%; }
  #details .spec th { width: 38%; }
}