/* PT Events
   Apple-style design: big centred headlines, soft grey bands, white cards, pill buttons, PT orange as the accent and PT yellow behind the guests.
   Sections: tokens, base, header, buttons, type, layout bands, lunch cards, shelves, page heads, packages, forms, events page, FAQs and legal,
   gallery, about, booking confirmation, mailing list, footer, lunch pages (header, the afternoon, on stage, buy section), motion. */

/* ---------- Tokens ---------- */
:root {
  --ink: #1d1d1f; --t1: #424245; --t2: #6e6e73; --t3: #86868b;
  --tile: #f6f6f8; --line: #d2d2d7; --hair: #e8e8ed;
  --orange: #FF6C00; --orange-hover: #EB6300; --orange-text: #EE5F00; --sun: #FFC72C;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --max: 1680px;                      /* content width */
  --side: clamp(24px, 4.5vw, 60px);   /* side margins */
  --sp: clamp(48px, 7vw, 100px);      /* space above and below every main section */
  --r: 28px; --r-s: 18px;             /* corners: cards, small boxes */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -.022em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; text-wrap: wrap; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.nw { white-space: nowrap; }
/* Laptops: the page scales with the screen's height, so a MacBook or Windows laptop keeps the proportions of a desktop; tablets and phones are unaffected */
@media (min-width: 1100px) and (max-height: 930px) { html { zoom: .965; } }
@media (min-width: 1100px) and (max-height: 860px) { html { zoom: .95; } }
@media (min-width: 1100px) and (max-height: 790px) { html { zoom: .93; } }
@media (min-width: 1100px) and (max-height: 720px) { html { zoom: .88; } }
@media (min-width: 1100px) and (max-height: 640px) { html { zoom: .86; } }

/* ---------- Header: a frosted bar with the logo, the menu and a black Get in touch pill; a full-screen sheet on phones ---------- */
.gnav { position: sticky; top: 0; z-index: 60; background: rgba(251,251,253,.82); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid rgba(0,0,0,.07); }
.gnav-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.gnav .logo img { width: auto; height: 42px; transition: transform .3s cubic-bezier(.32,.94,.6,1); }
@media (hover: hover) { .gnav .logo:hover img { transform: scale(1.05); } }  /* the logo grows a touch under the pointer, as Apple's buttons do */
.gnav nav { display: flex; gap: 6px; }
.gnav nav a { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: rgba(0,0,0,.82); padding: 8px 12px; border-radius: 980px; }
.gnav nav a:hover { color: #000; background: rgba(0,0,0,.05); }
.gnav nav a[aria-current="page"] { color: #000; font-weight: 600; }
.gnav .right { display: flex; align-items: center; gap: 8px; }
.gnav .book { font-size: 15px; font-weight: 600; color: #fff; border-radius: 980px; padding: 0 20px; height: 40px; display: inline-flex; align-items: center; background: var(--ink); white-space: nowrap; }
.gnav .book:hover { background: #000; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; padding: 0; color: var(--ink); }
.menu-btn svg { width: 22px; height: 22px; display: block; margin: auto; }
.menu-btn .x { display: none; }
.menu-open .menu-btn .x { display: block; }
.menu-open .menu-btn .bars { display: none; }
.sheet { position: fixed; inset: 72px 0 0; z-index: 55; background: rgba(255,255,255,.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 20px var(--side) 40px; display: flex; flex-direction: column; gap: 4px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; overflow-y: auto; }
.menu-open .sheet { visibility: visible; opacity: 1; transform: none; }
.menu-open { overflow: hidden; }
.sheet a { font-weight: 700; line-height: 1.3; padding: 6px 0; letter-spacing: -.03em; font-size: 28px; }
.sheet .small { margin-top: 28px; display: grid; gap: 6px; }
.sheet .small a { font-size: 17px; font-weight: 500; color: var(--t2); }
@media (max-width: 900px) { .gnav nav { display: none; } .menu-btn { display: block; } .gnav-in { height: 62px; } .gnav .logo img { height: 36px; } .gnav .book { height: 38px; padding: 0 16px; } .sheet { top: 62px; } }
@media (max-width: 359px) { .gnav-in { gap: 12px; } .gnav .book { padding: 0 14px; font-size: 14px; } .gnav .logo img { height: 24px; } }

/* ---------- Buttons: pills in two sizes (large 50px / 17px, small 40px / 15px), medium weight; orange fill, orange outline or black ---------- */
.btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btns.left { justify-content: flex-start; }
.b { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; border-radius: 980px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; border: 0; cursor: pointer; }
.b.fill { background: var(--orange); color: #fff; }
.b.fill:hover { background: var(--orange-hover); }
.b.out { color: var(--orange-text); background: transparent; box-shadow: inset 0 0 0 1.5px var(--orange-text); }
.b.out:hover { background: var(--orange); color: #fff; box-shadow: inset 0 0 0 1.5px var(--orange); }
.b.ink { background: var(--ink); color: #fff; }
.b.ink:hover { background: #000; }
.b.sm { min-height: 42px; padding: 0 20px; font-size: 15px; }
.tlink { color: var(--orange-text); font-weight: 600; }
.tlink:hover { text-decoration: underline; }

/* ---------- Type: Apple's heading steps (fixed sizes at its 1068px and 734px breakpoints) and one grey sub-line style ---------- */
.h-xl { font-weight: 700; font-size: 80px; line-height: 1.02; letter-spacing: -.045em; }
.h-l { font-weight: 700; font-size: 48px; line-height: 1.04; letter-spacing: -.04em; }
.h-m { font-weight: 700; font-size: 32px; line-height: 1.08; letter-spacing: -.035em; }
@media (max-width: 1068px) { .h-xl { font-size: 64px; } .h-l { font-size: 40px; } .h-m { font-size: 28px; } }
@media (max-width: 734px) { .h-xl { font-size: 40px; } .h-l { font-size: 32px; } .h-m { font-size: 26px; } }
.sub { line-height: 1.2; font-weight: 500; margin-top: 10px; color: var(--ink); font-size: clamp(19px, 1.8vw, 27px); letter-spacing: -.015em; }
.body { font-size: 17px; line-height: 1.55; color: var(--t1); }
.eyebrow { font-size: 19px; color: var(--orange-text); letter-spacing: -.01em; margin-bottom: 8px; font-weight: 600; }
.dark .eyebrow { color: var(--orange); }
h1 .o { color: inherit; }
.tile.hero h1 .o { color: var(--orange); }  /* headings are black; the home page keeps its orange word */
.tile.hero h1 .ln, .fx2 h2 .ln, .social .sec-head h2 .ln { display: block; }  /* each phrase of these headings on its own line */
h1 .o.wrap { white-space: normal; }  /* a longer orange phrase (prize draw) may wrap */
.phead:has(.o.wrap) { max-width: 1440px; }
@media (min-width: 375px) { h1 .o { white-space: nowrap; } }
/* Headings and sub-lines balance their lines; body text wraps as it falls */
h1, h2, h3, .sub, .eyebrow, .join p, .tile .when { text-wrap: balance; }
p, li, .card p, .acc .ans { text-wrap: wrap; }
@media (max-width: 600px) { .sub { line-height: 1.3; } }
a[href^="tel:"] { white-space: nowrap; }

/* ---------- Bands and section heads: every main section has the same space above and below (--sp) ---------- */
.sec { padding: var(--sp) 0; }
.grey { background: var(--tile); }
.dark { background: #000; color: #f5f5f7; }
.sec-head { text-align: center; margin: 0 auto clamp(36px, 4vw, 56px); padding: 0 var(--side); max-width: 1240px; }
.sec-head .sub { color: var(--t2); max-width: 960px; margin-left: auto; margin-right: auto; margin-top: clamp(10px, 1.1vw, 18px); }
.phead { text-align: center; padding: clamp(64px, 5vw, 72px) var(--side) clamp(40px, 5vw, 64px); max-width: 1200px; margin: 0 auto; }
.phead .sub { color: var(--t2); }
.phead .body { margin: 18px auto 0; font-size: clamp(17px, 1.4vw, 20px); max-width: 36em; }
.phead .sub, .tile.hero:not(.split) > .sub { margin-top: clamp(10px, 1.3vw, 24px); }
/* Every page's headline starts the same distance below the menu bar */
.phead, .tile.hero:not(.split) { padding-top: clamp(64px, 5vw, 72px); }
@media (max-width: 860px) { .phead, .tile.hero:not(.split) { padding-top: clamp(36px, 7vw, 56px); } }

/* ---------- Full-width tiles (the home page header) ---------- */
.tile { position: relative; text-align: center; padding: clamp(56px, 6vw, 72px) var(--side) 0; overflow: hidden; margin-bottom: 12px; }
.tile.light { background: var(--tile); }
.tile .art { position: relative; margin: 32px auto 0; width: min(100%, 760px); height: clamp(300px, 46vw, 540px); }
.tile .art::before { content: ""; position: absolute; left: 50%; bottom: -18%; width: min(82%, 500px); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--sun); }
.tile.dark .art::before { background: var(--orange); }
.tile .art img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
.tile.hero .art { height: clamp(340px, 52vw, 620px); }
.tile.hero > :not(.carousel) { position: relative; z-index: 31; }
.tile.hero .sub { color: var(--t2); }
.tile .meta { margin-top: 10px; font-size: 17px; color: var(--t2); font-weight: 500; }
.dark .meta { color: #a1a1a6; }
.home-head { margin-top: clamp(64px, 7vw, 104px); }

/* ---------- Lunch cards: white, rounded cards on a grey band; three a row on laptops, two on tablets, one on phones ---------- */
.cardband { background: var(--tile); padding: var(--sp) 0; }
.cardband .home-head { margin-top: 0; }
.grid2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: var(--max); margin: 0 auto; padding: 6px var(--side) clamp(40px, 5vw, 64px); }
@media (max-width: 1099px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .grid2 { grid-template-columns: 1fr; padding: 6px var(--side) 40px; gap: 16px; } }
.grid2 .tile, .grid2 .tile.light, .grid2 .tile.dark { margin: 0; display: flex; flex-direction: column; align-items: center; padding: clamp(28px, 2.6vw, 40px) clamp(20px, 2vw, 32px) 0; background: #fff; border-radius: var(--r); box-shadow: 2px 4px 12px rgba(0,0,0,.08); overflow: hidden; }
.grid2 .tile.dark { color: var(--ink); }
.grid2 .tile .eyebrow, main .grid2 .tile .eyebrow { font-size: 15px; margin-bottom: 4px; }
.grid2 .tile.dark .eyebrow { color: var(--orange-text); }
.grid2 .h-l { letter-spacing: -.035em; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.1; }
.grid2 .tile .when { margin-top: 12px; }
.grid2 .tile .when b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.grid2 .tile .when span { display: block; margin-top: 2px; font-size: 15px; color: var(--t2); }
.grid2 .tile .when span span { display: inline; margin-top: 0; }
.grid2 .tile .meta { margin-top: 8px; font-size: 15px; }
.grid2 .tile.dark .meta, .grid2 .tile.dark .when span { color: var(--t2); }
.grid2 .tile .when span.nw { display: inline; margin: 0; font-size: inherit; color: inherit; }  /* names, dates and venues never split across lines */
.sep.cut, .grid2 .tile .when .sep.cut { display: block; height: 0; overflow: hidden; font-size: 0; }  /* city · venue: the dot is hidden when the venue wraps */
.grid2 .tile .btns { margin-top: 18px; margin-bottom: 24px; }
.grid2 .tile .b { padding: 0 24px; }
/* The guest sits in a box under the button; the yellow circle is sized to that box so it never rises into the words */
.grid2 .tile .art { margin: auto 0 0; padding: 0; width: 100%; container-type: size; height: clamp(220px, 19vw, 320px); }
.grid2 .tile .art::before { --d: min(86cqw, 100cqh); width: var(--d); bottom: calc(var(--d) * -.16); }
.grid2 .tile .art img { max-width: 100%; }
.nextpill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 5px 5px 13px; border-radius: 980px; background: var(--orange); color: #fff; font-size: 14px; line-height: 1.2; }
.nextpill b { font-weight: 700; }
.nextpill i { font-style: normal; font-weight: 700; padding: 4px 10px; border-radius: 980px; background: var(--sun); color: var(--ink); }
/* Smaller cards for lunches still to be announced */
.tile.tba { padding-bottom: 56px; justify-content: center; min-height: 340px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: var(--max); margin: 0 auto; padding: 6px var(--side) clamp(48px, 6vw, 80px); }
@media (max-width: 1099px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; gap: 16px; } }
.grid4 .tile { margin: 0; padding: 28px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; background: #fff; border-radius: var(--r); box-shadow: 2px 4px 12px rgba(0,0,0,.08); overflow: hidden; }
.grid4 .tile .eyebrow { font-size: 14px; margin-bottom: 4px; color: var(--orange-text); }
.grid4 .tile .h-l { line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.tile.tba .h-l, .grid4 .tile .h-l { font-size: 22px; }
.grid4 .tile .when { margin-top: 10px; }
.grid4 .tile .when b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.grid4 .tile .when > span { display: block; margin-top: 2px; font-size: 14px; color: var(--t2); }
.grid4 .tile .btns { margin-top: 16px; }
/* The whole card is clickable (the button's hit area stretches over the card) and it grows a touch on hover */
.grid2 .tile, .grid4 .tile { transition: transform .25s ease, box-shadow .25s ease; }
.grid2 .tile .btns, .grid2 .tile .btns .b, .grid4 .tile .btns, .grid4 .tile .btns .b { position: static; }
.grid2 .tile .btns .b::after, .grid4 .tile .btns .b::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); z-index: 2; }
@media (hover: hover) { .grid2 .tile:hover, .grid4 .tile:hover { transform: translateY(-4px); box-shadow: 4px 12px 28px rgba(0,0,0,.12); } }
@media (prefers-reduced-motion: reduce) { .grid2 .tile, .grid4 .tile { transition: none; } .grid2 .tile:hover, .grid4 .tile:hover { transform: none; } }
.cardband .grid2 .tile, .cardband .grid4 .tile { background: #fff; box-shadow: none; }
@media (hover: hover) { .cardband .grid2 .tile:hover, .cardband .grid4 .tile:hover { transform: scale(1.02); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .cardband .grid2 .tile:hover, .cardband .grid4 .tile:hover { transform: none; } }
.cardband .grid2 .tile:not(.or), .cardband .grid4 .tile:not(.or), .abox { box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 30px rgba(0,0,0,.04); }
@media (hover: hover) { .cardband .grid2 .tile:not(.or):hover, .cardband .grid4 .tile:not(.or):hover { box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 14px 36px rgba(0,0,0,.06); } }
/* Home: the next few lunches (three on laptops, four on tablets, three on phones), then one button for the rest */
@media (min-width: 1100px), (max-width: 699px) { .grid2[data-show] > .tile:nth-of-type(n+4) { display: none; } }
.home-more { text-align: center; max-width: var(--max); margin: clamp(40px, 4vw, 56px) auto 0; padding: 0 var(--side); }
.home-more h3 { font-size: 28px; line-height: 1.1; letter-spacing: -.025em; }
.home-more p { color: var(--t2); font-size: clamp(17px, 1.4vw, 21px); margin-top: 8px; }
.home-more .btns { justify-content: center; margin-top: 24px; }
@media (max-width: 734px) { .home-more h3 { font-size: 24px; } }
/* The card sections end with one standard section space (the grid adds none of its own) */
.grid2[data-show], .cardband > :last-child .grid2, .cardband > :last-child .grid4 { padding-bottom: 0; }

/* ---------- Card shelves (swipe), with arrows on pointer screens and dots on touch screens ---------- */
.shelf { padding: var(--sp) 0; }
.shelf > h2 { max-width: var(--max); margin: 0 auto 30px; padding: 0 var(--side); }
.cards { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--side), calc((100vw - var(--max)) / 2 + var(--side))); padding: 6px max(var(--side), calc((100vw - var(--max)) / 2 + var(--side))) 30px; scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.card { flex: none; width: min(82vw, 380px); min-height: 500px; border-radius: var(--r); background: var(--tile); scroll-snap-align: start; padding: 32px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 2px 4px 12px rgba(0,0,0,.08); }
.card .k { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--t2); }
.card h3 { font-size: 28px; line-height: 1.14; font-weight: 700; margin-top: 8px; letter-spacing: -.025em; }
.card p { margin-top: 12px; color: var(--t1); font-size: 17px; }
.card > img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 52%; object-fit: cover; }
.card .big { font-size: 72px; font-weight: 700; line-height: 1; margin-top: auto; letter-spacing: -.045em; }
.card.dark { color: #f5f5f7; background: #1d1d1f; }
.card.dark p, .card.dark .k { color: #a1a1a6; }
.card.or { background: var(--orange); color: #fff; }
.card.or p, .card.or .k { color: rgba(255,255,255,.88); }
.card.sun { background: var(--sun); }
.card.sun .k, .card.sun p { color: rgba(0,0,0,.7); }
.shelf-ctl { max-width: var(--max); margin: 4px auto 0; padding: 0 var(--side); display: flex; justify-content: flex-end; gap: 12px; }
.shelf-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #e8e8ed; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.shelf-ctl button:hover { background: #dcdce1; }
.shelf-ctl svg { width: 18px; height: 18px; }
.shelf-dots { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.shelf-dots span { width: 8px; height: 8px; border-radius: 4px; background: #d2d2d7; transition: width .25s, background .25s; }
.shelf-dots span.on { width: 22px; background: var(--ink); }
@media (hover: none) { .shelf-ctl { display: flex; justify-content: center; margin-top: 8px; } .shelf-ctl button { display: none; } .shelf-dots { margin-right: 0; } }

/* ---------- Packages: white columns on the grey band that line up row by row ---------- */
.cols { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; grid-template-rows: auto auto auto 1fr; }
@media (max-width: 1000px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }
@media (min-width: 641px) and (max-width: 1100px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.col { background: var(--tile); border-radius: var(--r); padding: 36px 26px 30px; flex-direction: column; text-align: center; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; justify-items: center; align-items: start; }
.col h3 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.col .price { font-weight: 700; margin-top: 14px; line-height: 1.1; align-self: start; letter-spacing: -.035em; font-size: 32px; }
.col .price.opts { font-size: 19px; line-height: 1.3; display: grid; gap: 6px; font-weight: 500; letter-spacing: -.01em; }
.col .price.opts b { font-weight: 700; font-size: 26px; letter-spacing: -.03em; }
.col .price.opts .o { display: block; }
.col .price.opts .x { color: var(--t3); font-size: 16px; }
.col .price small { display: block; color: var(--t2); font-size: 15px; font-weight: 500; letter-spacing: -.01em; margin-top: 6px; }
.col .b, .col .so { width: 100%; justify-content: center; align-self: end; margin-top: 24px; }
.col .so { min-height: 50px; align-items: center; padding: 0 22px; border-radius: 980px; background: #e8e8ed; color: var(--t2); font-weight: 600; font-size: 17px; display: flex; }
.col ul { margin-top: 28px; width: 100%; text-align: left; align-self: start; }
.col li { position: relative; padding: 12px 0 12px 30px; font-size: 16px; color: var(--t1); border-top: 1px solid var(--line); }
.col li::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* Sold out: the card keeps its normal look and a quiet label replaces the button */
.col.sold h3, .col.sold .price { color: var(--ink); }
.col.sold li { color: var(--t1); }
.col.sold li::before { background-color: var(--orange); }
.col .so { background: transparent; color: var(--t2); border: 1px solid var(--line); }
.cols-note { text-align: center; margin-top: 30px; font-size: 17px; padding-left: var(--side); padding-right: var(--side); color: var(--t1); font-weight: 500; }
.col h3, .form > h2, .steps h3, .form-done h3 { line-height: 1.15; }
.sec.grey .col { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 30px rgba(0,0,0,.04); }
/* Where all the packages don't fit in a row (phones and iPads), they become a swipe shelf with dots and arrows */
.pk-ctl { margin-top: 20px; }
@media (min-width: 1200px) { .pk-ctl { display: none; } }
@media (max-width: 1199px) {
  .cols.pk-shelf { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82vw, 340px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none; scroll-padding-inline: var(--side); padding: 6px var(--side) 24px; }
  .cols.pk-shelf::-webkit-scrollbar { display: none; }
  .cols.pk-shelf > .col { scroll-snap-align: start; }
  .pk-ctl + .cols-note { margin-top: 24px; }
}
@media (max-width: 640px) { .cols.pk-shelf { grid-auto-columns: calc(78vw + 4px); } }  /* the next card peeks in by the same amount as on the On stage shelf */

/* ---------- Forms ---------- */
.formwrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--side); }
.form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; }
.form > * { grid-column: 1 / -1; }
.form > .fld { grid-column: span 3; }
.form > .fld.full, .form > .fld:has(#bk-pk) { grid-column: 1 / -1; }
/* Booking: email, company and the first address lines run full width so what's typed is always fully visible */
#booking .form > .fld:has(#bk-em), #booking .form > .fld:has(#bk-co), #booking .form > .fld:has(#bk-a1), #booking .form > .fld:has(#bk-a2) { grid-column: 1 / -1; }
#booking .form > .fld:has(#bk-a3), #booking .form > .fld:has(#bk-a4), #booking .form > .fld:has(#bk-pc) { grid-column: span 2; }
@media (max-width: 640px) { .form > .fld, #booking .form > .fld { grid-column: 1 / -1 !important; } }
.form > h2 { font-size: 28px; font-weight: 700; letter-spacing: -.015em; }
.form .form-sub { font-size: 24px; font-weight: 700; letter-spacing: -.015em; margin-top: 18px; }
.form .form-sub:first-of-type { margin-top: 6px; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld > label { font-size: 15px; font-weight: 600; color: var(--ink); }
.fld label { font-size: clamp(15px, 1.2vw, 17px); }
.fld > label span { color: var(--t2); font-weight: 500; white-space: nowrap; }  /* a label's grey aside moves to the next line as a whole */
.fld-note { color: var(--t2); font-size: 15px; }
.fld input, .fld select, .fld textarea { width: 100%; min-width: 0; height: 56px; padding: 0 18px; border-radius: 14px; border: 1px solid #c7c7cc; background: #fff; font-size: 17px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.fld textarea { height: auto; min-height: 160px; padding: 16px 18px; resize: vertical; }
.fld select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 16px; padding-right: 46px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,43,.18); }
.fld.bad input, .fld.bad select, .fld.bad textarea { border-color: #D93B0B; }
.bd-hidden { display: none !important; }
/* The package choice: tappable tiles in place of the dropdown (which stays, hidden, and is what the form sends) */
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pick label { position: relative; display: flex; flex-direction: column; padding: 20px 22px; border-radius: 18px; border: 1px solid #c7c7cc; background: #fff; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.pick .n { font-size: 19px; font-weight: 700; }
.pick .p { font-size: 28px; font-weight: 700; margin-top: 4px; letter-spacing: -.03em; }
.pick .v { font-size: 14px; color: var(--t2); }
.pick label:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.pick label:has(input:checked)::after { content: ""; position: absolute; right: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.fld.bad .pick label { border-color: #D93B0B; }
.form .check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--t1); cursor: pointer; }
.form .check input { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0; flex: none; border: 1.5px solid #aeaeb2; border-radius: 7px; background: #fff center / 16px no-repeat; cursor: pointer; }
.form .check input:checked { border-color: var(--orange); background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.form .check.bad input { border-color: #D93B0B; }
.form .check a { color: var(--orange-text); font-weight: 600; }
.form button[type="submit"] { justify-self: start; min-height: 54px; padding: 0 34px; border-radius: 980px; border: 0; background: var(--orange); color: #fff; font-weight: 600; font-size: 17px; cursor: pointer; }
.form button[type="submit"]:hover { background: var(--orange-hover); }
.form button[disabled] { opacity: .6; cursor: progress; }
.form-msg { color: #D93B0B; font-weight: 600; }
.form-msg:empty { display: none; }
.form-done { background: var(--tile); border-radius: var(--r-s); padding: 24px; }
.form-done h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.bk-points { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin: -12px auto clamp(36px, 4vw, 56px); padding: 0 var(--side); color: var(--t1); font-weight: 600; }
.bk-points span { display: inline-flex; align-items: center; gap: 8px; }
.bk-points span::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sec-head + .bk-points { margin-top: 0; }
.form .fld-note { max-width: none; }

/* ---------- Events page: city filter pills, and lunches still to be announced in their own section ---------- */
.filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 36px; padding: 0 var(--side); }
.filters button { height: 44px; padding: 0 20px; border-radius: 980px; border: 0; background: var(--tile); font-size: 15px; font-weight: 600; cursor: pointer; color: var(--ink); }
.filters button span { margin-left: 4px; color: var(--orange-text); font-weight: 600; }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.filters button[aria-pressed="true"] span { color: var(--orange); }
.evsec[hidden], .evgrid .tile[hidden] { display: none; }
.evsec.soon { padding-top: clamp(16px, 2vw, 28px); }
@media (max-width: 600px) { .evsec.soon { padding-top: 12px; } }
/* A part-filled last row sits in the middle rather than hanging left */
.evsec .grid2, .evsec .grid4 { display: flex; flex-wrap: wrap; justify-content: center; }
.evsec .grid2 > .tile { flex: 0 1 calc((100% - 40px) / 3); }
.evsec .grid4 > .tile { flex: 0 1 calc((100% - 60px) / 4); }
@media (max-width: 1099px) { .evsec .grid2 > .tile { flex-basis: calc((100% - 20px) / 2); } .evsec .grid4 > .tile { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 699px) { .evsec .grid2 > .tile { flex-basis: 100%; } }
@media (max-width: 560px) { .evsec .grid4 > .tile { flex-basis: 100%; } }

/* ---------- FAQs and legal: an accordion, with Expand all / Collapse all on the legal pages ---------- */
.acc { max-width: 1100px; margin: 0 auto; padding: 0 var(--side); }
.acc .legal-tools { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.acc .legal-tools button { height: 40px; padding: 0 18px; border-radius: 980px; border: 0; background: var(--tile); font-weight: 600; font-size: 15px; cursor: pointer; }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-of-type { border-top: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: clamp(19px, 1.8vw, 22px); font-weight: 700; letter-spacing: -.02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 3.5v9M3.5 8h9'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s, background-color .2s; }
.acc details[open] summary::after { transform: rotate(45deg); background-color: var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 3.5v9M3.5 8h9'/%3E%3C/svg%3E"); }
.acc .ans { padding: 0 0 26px; color: var(--t1); font-size: 17px; line-height: 1.55; }
.acc .ans p + p, .acc .ans p + ul, .acc .ans ul + p { margin-top: .8em; }
.acc .ans ul { display: grid; gap: 8px; margin-top: .6em; }
.acc .ans li { position: relative; padding-left: 22px; }
.acc .ans li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.acc .ans a { color: var(--orange-text); font-weight: 600; }
.acc .ans strong { color: var(--ink); }
/* "Still have a question?" and Get in touch: three contact cards, white on the grey band */
.help { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.help a, .help div { background: var(--tile); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 6px; }
.help .k { font-size: 15px; font-weight: 700; color: var(--t2); }
.help .v { font-size: 24px; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.help a:hover .v { color: var(--orange-text); }
.help address { font-style: normal; font-size: 17px; color: var(--t1); font-weight: 500; }
.sec.grey .help a, .sec.grey .help div { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 30px rgba(0,0,0,.04); }
@media (max-width: 1000px) { .help { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .help a, .help div { padding: 24px; } .help .v { font-size: 20px; } }  /* the email address fits on one line on small phones */

/* ---------- Past lunches gallery and lightbox ---------- */
.gal { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); columns: 5 260px; column-gap: 14px; }
.gal button { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: var(--tile); overflow: hidden; cursor: zoom-in; position: relative; break-inside: avoid; text-align: left; border-radius: 20px; }
.gal button[hidden] { display: none; }
.gal img { width: 100%; height: auto; }
.gal .cap { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 14px; padding: 10px 14px; display: grid; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.gal button:hover .cap, .gal button:focus-visible .cap { opacity: 1; transform: none; }
.gal .cap b { font-weight: 700; font-size: 15px; line-height: 1.25; }
.gal .cap small { color: var(--t2); font-size: 13px; }
@media (hover: none) { .gal .cap { opacity: 1; transform: none; } }
@media (max-width: 640px) { .gal { columns: 2; column-gap: 10px; } .gal button { margin-bottom: 10px; } .gal .cap { left: 6px; right: 6px; bottom: 6px; padding: 7px 9px; } .gal .cap b { font-size: 13px; } }
.lb { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; }
.lb::backdrop { background: rgba(0,0,0,.92); }
.lb-inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 72px 16px 32px; }
.lb-inner img { max-width: min(1200px, 100%); max-height: calc(100dvh - 170px); width: auto; height: auto; border-radius: 18px; }
.lb-cap { color: #fff; text-align: center; display: grid; }
.lb-cap small { color: #a1a1a6; }
.lb button { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 0; }
.lb button svg { width: 20px; height: 20px; }
.lb .x { right: 16px; top: 16px; }
.lb .pv { left: 16px; top: 50%; translate: 0 -50%; }
.lb .nx { right: 16px; top: 50%; translate: 0 -50%; }
.lb .ct { position: fixed; left: 50%; top: 30px; translate: -50% 0; color: #a1a1a6; font-weight: 600; font-size: 15px; }
@media (max-width: 640px) { .lb .pv, .lb .nx { top: auto; bottom: 16px; translate: none; } .lb-inner { padding-bottom: 90px; } }

/* ---------- About ---------- */
.feature { max-width: var(--max); margin: 0 auto 16px; padding: 0 var(--side); }
.feature .in { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r); overflow: hidden; background: var(--tile); }
.feature .ph { position: relative; min-height: 420px; }
.feature .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature .tx { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.feature .tx .body { margin-top: 14px; }
@media (max-width: 760px) { .feature .in { grid-template-columns: 1fr; } .feature .ph { min-height: 0; aspect-ratio: 4 / 3; } }
/* Why it works: four boxes (two across on tablets) */
.why-grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.why-grid > div { background: var(--tile); border-radius: var(--r); padding: clamp(28px, 2.6vw, 40px); }
.why-grid .k { font-size: 14px; font-weight: 600; color: var(--orange-text); margin-bottom: 10px; }
.why-grid h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 12px; text-wrap: balance; }
.why-grid p:not(.k) { color: var(--t1); font-size: 17px; line-height: 1.47; }
@media (max-width: 1279px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }
.why .why-btns { justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 480px) { .why .why-btns { flex-direction: column; align-items: center; } }
/* Exclusive guests and first-class hospitality: two cards side by side, photo above the words */
.fx2 { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fx2 .c { background: var(--tile); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.fx2 img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.fx2 .t { padding: clamp(28px, 3vw, 48px); }
.fx2 .body { margin-top: 12px; }
.fx2 + .sec.grey { margin-top: var(--sp); }
@media (max-width: 760px) { .fx2 { grid-template-columns: 1fr; } }
@media (min-width: 1069px) { .fx2 h2 { text-wrap: pretty; } }
/* The people you choose: one large photo with five smaller ones around it */
.social-grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(180px, 16vw, 290px)); gap: 16px; }
.social-grid figure { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; background: #e8e8ed; }
.social-grid figure.big { grid-column: span 2; grid-row: span 2; }
.social-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.social .btns { justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 761px) { .social-grid { grid-template-rows: none; } .social-grid figure:not(.big) { aspect-ratio: 3 / 2; } }
@media (max-width: 760px) { .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 12px; } .social-grid figure { aspect-ratio: 4 / 3; } .social-grid figure.big { grid-row: auto; } .social-grid figure:last-child { grid-column: span 2; aspect-ratio: 16 / 9; } }

/* ---------- Booking confirmation: three steps, then the photo panel ---------- */
.steps { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps div { background: var(--tile); border-radius: var(--r); padding: 30px; }
.steps b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 18px; }
.steps h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.steps p { margin-top: 8px; color: var(--t1); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.feature.thanks { margin-top: 16px; margin-bottom: clamp(72px, 9vw, 120px); }
.feature.thanks .tx .btns { justify-content: flex-start; margin-top: 26px; }
.feature.thanks .ph { min-height: clamp(420px, 32vw, 520px); }
.feature.thanks .ph img { object-position: 50% 15%; }
@media (max-width: 760px) { .feature.thanks .tx .btns { justify-content: center; } .feature.thanks .tx { text-align: center; } .feature.thanks .ph { min-height: 0; aspect-ratio: 3 / 2; } }

/* ---------- Mailing list band: a lighter sign-off before the footer ---------- */
.join { background: var(--sun); text-align: center; padding: clamp(48px, 5vw, 72px) var(--side); }
.join .sub { color: rgba(0,0,0,.72); font-size: 19px; }

/* ---------- Footer ---------- */
.foot { background: var(--tile); color: var(--t2); font-size: 13px; line-height: 1.4; letter-spacing: -.01em; }
.foot-in { max-width: var(--max); margin: 0 auto; padding: 24px var(--side) 28px; }
.foot .brand { padding-bottom: 20px; border-bottom: 1px solid var(--line); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--ink); font-size: clamp(22px, 2vw, 28px); }
.foot .brand span { color: var(--orange); }
.foot .cols4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.foot h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink); }
.foot .cols4 a { display: block; padding: 4px 0; }
.foot .cols4 a:hover { color: var(--ink); text-decoration: underline; }
.foot .base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 16px; }
.foot .base nav { display: flex; gap: 16px; }
.foot .base a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 760px) { .foot .cols4 { grid-template-columns: 1fr 1fr; } }

/* ---------- Lunch pages: header with the guests on the left and the details on the right (words first on phones and upright iPads) ---------- */
.tile.hero.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; text-align: left; max-width: var(--max); margin: 0 auto; padding: clamp(40px, 5vw, 80px) var(--side) 0; overflow: visible; }
.tile.hero .back { margin: 0 0 clamp(12px, 1.4vw, 18px); font-size: 15px; font-weight: 500; }  /* a quiet "All events" link above the title */
.tile.hero .back a { color: var(--t2); text-decoration: none; }
.tile.hero .back a:hover { color: var(--ink); text-decoration: underline; }
.split .tx { padding-bottom: clamp(40px, 5vw, 80px); }
.split .h-xl { font-size: clamp(40px, 4.9vw, 80px); }
/* Smallest phones: the big headlines on every page ease down just enough for names and the orange words to stay on one line */
@media (max-width: 374px) { .h-xl, .split .h-xl { font-size: clamp(34px, calc((100vw - 48px) / 7.9), 40px); } h1 .o { white-space: nowrap; } }
.split .sub { margin-top: 14px; }
.split .sub.host { color: var(--t2); font-weight: 500; margin-top: 16px; font-size: clamp(18px, 1.4vw, 20px); }
.split .hdate { font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hero.split .sub + .hdate { margin-top: 6px; }
.split .sub.host + .hdate { margin-top: 14px; }
.split .hdate + .meta { margin-top: 8px; }
.split .meta { margin-top: 8px; }
.split .soldline { margin-top: 16px; }
.split .soldline + .btns { margin-top: 16px; }
.sopill { display: inline-block; font-size: 14px; letter-spacing: 0; line-height: 1; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; }
.split .btns { margin-top: clamp(24px, 2.4vw, 34px); }
.split .art { align-self: end; margin: 0; width: 100%; container-type: size; overflow: hidden; height: clamp(400px, 40vw, 700px); }
.split .art::before { --d: min(88cqw, 92cqh); width: var(--d); bottom: calc(var(--d) * -.14); }
.split .art img { max-width: 100%; }
@media (min-width: 861px) { .split .art { order: -1; } .tile.hero.split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .split .tx { padding-bottom: clamp(56px, 6vw, 96px); } }
@media (max-width: 860px) {
  .tile.hero.split { grid-template-columns: 1fr; gap: 0; padding-top: clamp(36px, 7vw, 56px); text-align: center; }
  .tile.hero.split .btns.left, .tile.hero.split .hdate { justify-content: center; }
  .split .tx { padding-bottom: 32px; }
  .split .art { height: clamp(320px, 88vw, 520px); }
}

/* The afternoon: the description on the left (staying in view), the running order and venue boxes on the right */
.sec.aft { padding-top: var(--sp); }
.aft-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.aft-tx { position: sticky; top: 112px; }
.aft-lede { margin-top: 28px; }
.aft-lede p { line-height: 1.45; color: var(--t2); font-weight: 500; letter-spacing: -.01em; font-size: clamp(18px, 1.4vw, 20px); }
.aft-lede p + p { margin-top: 20px; }
.aft-lede p strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
.aft-more { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.aft-more p { font-size: 17px; color: var(--t1); font-weight: 500; }
.aft-side { display: grid; gap: 16px; }
.abox { background: #fff; border-radius: var(--r); overflow: hidden; }
.abox .k { font-size: 15px; font-weight: 700; color: var(--t2); letter-spacing: -.01em; }
.abox .v { font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-top: 6px; }
.abox.times { padding: clamp(26px, 3vw, 40px); }
.tl2 { margin-top: 22px; }
.tl2 li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid #e8e8ed; }
.tl2 b { font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--orange-text); }
.tl2 span { font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; }
/* On phones the time column fits the widest time (12.45pm), so every line lines up */
@media (max-width: 600px) { .tl2 li { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; } }
@media (max-width: 359px) { .tl2 b { font-size: 20px; } .tl2 span { font-size: 15px; } .tl2 li { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; } }
.abox .dress { display: block; align-items: center; gap: 14px; margin-top: 0; padding-top: 14px; border-top: 1px solid #e8e8ed; font-size: 17px; color: var(--t1); font-weight: 500; }
.abox .dress b { display: block; font-size: 15px; color: var(--t2); }
.abox.where .map { background: #e8e8ed; margin: 12px 12px 0; height: clamp(208px, 19vw, 288px); border-radius: calc(var(--r) - 12px); overflow: hidden; }
.abox.where iframe { width: 100%; height: 100%; border: 0; display: block; }
.abox.where .txt { padding: clamp(26px, 3vw, 40px); }
.abox.where address { font-style: normal; font-size: 17px; color: var(--t1); margin-top: 8px; font-weight: 500; line-height: 1.45; }
.abox.where .btns { justify-content: flex-start; margin-top: 20px; }
@media (max-width: 900px) { .aft-in { grid-template-columns: 1fr; } .aft-tx { position: static; } }

/* On stage: wide cards, half photo, half words; stacked on phones with the next card peeking in */
.people .card { padding: 0; box-shadow: none; background: var(--tile); color: var(--ink); display: grid; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(88vw, 720px); min-height: clamp(400px, 31vw, 480px); }
.people .card .ph { position: relative; overflow: hidden; height: auto; min-height: 100%; background: #e8e8ed; }
.people .card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.people .card .tx { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; justify-content: flex-start; }
.people .card .tx > .k { margin-top: 0; }
.people .card .k { color: var(--orange-text); white-space: nowrap; }
.people .card h3 { font-weight: 700; letter-spacing: -.03em; line-height: 1.15; font-size: clamp(26px, 2.3vw, 36px); }
.people .card p { color: var(--t1); line-height: 1.55; font-size: 16px; }
@media (max-width: 640px) {
  .people .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; width: 78vw; }
  .people .card .ph { min-height: 0; height: 200px; }
  .people .card h3 { font-size: 26px; }
  .people .card p { font-size: 16px; line-height: 1.5; }
  .people .card .tx { padding: 24px 24px 22px; }
}
@media (min-width: 431px) and (max-width: 640px) { .people .card .ph { height: calc(78vw / 1.68); } }  /* between phone and iPad widths the photo keeps the phone shape */

/* Type: one set of sizes across the lunch pages */
.split .hdate, .abox .v, .people .card h3 { font-size: clamp(26px, 2.2vw, 32px); }
.help .v, .form .form-sub { font-size: 22px; }
.form > h2, .form .form-sub, .steps h3, .help .v { letter-spacing: -.025em; }
.fld-note, .acc .ans, .aft-lede p, .feature .body { max-width: 36em; }  /* a comfortable line length for running text */
.acc .ans { max-width: none; }  /* except FAQ and legal answers, which line up with their questions */
/* Labels: the small orange text above headings, semi-bold, 15px on cards */
main .people .card .k, main .why-grid .k, main .bk3-card .k, main .help .k { font-size: 15px; font-weight: 600; color: var(--orange-text); letter-spacing: -.01em; }
/* Card headings: 28px on large cards, 24px on tablets; phones keep their own sizes */
@media (min-width: 1069px) { main .grid2 .tile .h-l, main .card h3, main .why-grid h3, main .bk3-card h3, main .col h3 { font-size: 28px; } }
@media (min-width: 735px) and (max-width: 1068px) { main .grid2 .tile .h-l, main .card h3, main .why-grid h3, main .bk3-card h3, main .col h3 { font-size: 24px; } }
@media (min-width: 1069px) and (max-width: 1439px) { main .why-grid h3 { font-size: 24px; } }
/* Body copy 17px regular, small print 14px, prices 32px */
.col li, .bk3-card li { font-size: 17px; color: var(--t1); }
.col .price small, .bk3-card .pr small { font-size: 14px; font-weight: 400; }
/* Buttons: large pills slim a little on phones (still 44px to tap); small pills are 40px */
.b, .gnav .book, .form button[type="submit"], .filters button, .acc .legal-tools button, .col .so { font-weight: 500; }
.b, .col .so, .form button[type="submit"], .form .pill { min-height: 50px; height: auto; font-size: 17px; }
.b.sm, .gnav .book, .filters button, .legal-tools button { min-height: 40px; height: 40px; font-size: 15px; }
.b:not(.sm), .col .so, .form button[type="submit"], .form .pill { min-height: clamp(44px, calc(40px + .8vw), 50px); font-size: clamp(16px, calc(15px + .2vw), 17px); padding-left: clamp(20px, 4vw, 28px); padding-right: clamp(20px, 4vw, 28px); }
/* Corners: 28px cards, 20px photos, 14px fields and small boxes */
.pick label, .gal .cap { border-radius: 14px; }

/* ---------- Lunch pages on laptops and above: packages and booking as one buy section (apple.js builds it). Left: what's in the chosen package, staying in view. Right: the form, every package as a tile ---------- */
.bk3-side, .q2, .pick label.sold, .pick label.poa { display: none; }
.bk-sum { display: flex; flex-direction: column; gap: 12px; }
.bk-sum .form-sub { margin: 18px 0 0; }
.sum-box { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 20px 22px; border-radius: 14px; background: #f5f5f7; }
.sum-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sum-n { font-size: 19px; font-weight: 700; }
.sum-q { font-size: 15px; color: var(--t2); }
.sum-r { display: flex; flex-direction: column; align-items: flex-end; }
.sum-t { font-size: 24px; letter-spacing: -.02em; }
.sum-r small { font-size: 13px; color: var(--t2); }
.sum-c { grid-column: 1 / -1; font-size: 15px; font-weight: 600; color: var(--orange-text); justify-self: start; }
.bk-sum.empty .sum-r { display: none; }
@media (min-width: 1200px) {
  .has-bk3 #packages { display: none; }
  .has-bk3 #booking { padding-top: 0; }  /* On stage and booking are both white here, so one section space separates them */
  .bk3 { max-width: 1440px; margin: 0 auto; padding: 0 var(--side); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 4.5vw, 80px); align-items: start; }
  .bk3 .formwrap { padding: 0; max-width: none; margin: 0; container-type: inline-size; }
  .bk3-side { display: block; position: sticky; top: 84px; }
  .bk3-card { background: #f5f5f7; border-radius: 28px; padding: clamp(32px, 3vw, 48px); }
  .bk3-card .k { font-size: 14px; font-weight: 600; color: var(--orange); margin: 0 0 10px; }
  .bk3-card h3 { font-size: clamp(28px, 2.4vw, 36px); letter-spacing: -.02em; margin: 0; }
  .bk3-card .pr { margin: 10px 0 0; display: flex; flex-direction: column; }
  .bk3-card .pr b { font-size: 32px; letter-spacing: -.02em; }
  .bk3-card .pr small { font-size: 14px; color: var(--t2); margin-top: 2px; }
  .bk3-card.so .pr small { color: var(--ink); font-weight: 600; }
  .bk3-card ul { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid #d2d2d7; }
  .bk3-card li { padding: 14px 0 14px 32px; border-bottom: 1px solid #d2d2d7; position: relative; font-size: 17px; }
  .bk3-card li::before { content: ""; position: absolute; left: 0; top: 16px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.8'/%3E%3C/svg%3E") center/14px no-repeat; }
  .bk3-side .cols-note { text-align: left; padding: 0 8px; margin: 20px 0 0; }
  .bk3 .q1 { display: none; }
  .bk3 .q2 { display: inline; }
  .bk3 label[for=bk-pk] { font-size: clamp(24px, 2vw, 28px); font-weight: 600; color: var(--t2); letter-spacing: -.015em; margin-bottom: 16px; display: block; }
  .bk3 label[for=bk-pk] b { color: var(--ink); font-weight: 700; }
  .bk3 .form-sub { font-size: clamp(24px, 2vw, 28px); letter-spacing: -.015em; margin-top: 28px; }
  .bk3 .form-sub::after { content: "."; }
  .bk3 .bk-sum .form-sub { margin-top: 28px; }
  .bk3 .pick { grid-template-columns: 1fr; gap: 12px; }
  .bk3 .pick label { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; padding: 18px 60px 18px 24px; border-radius: 14px; min-height: 64px; }
  .bk3 .pick .n { font-size: 19px; }
  .bk3 .pick .p { grid-column: 2; grid-row: 1; font-size: 19px; margin: 0; text-align: right; }
  .bk3 .pick .v { display: none; }
  .bk3 .pick label:has(input:checked)::after { top: 50%; right: 18px; transform: translateY(-50%); }
  .bk3 .pick label.sold { display: grid; cursor: default; background: #fbfbfd; border-color: #e3e3e8; }
  .bk3 .pick label.sold .n, .bk3 .pick label.sold .p { color: #86868b; font-weight: 600; }
  .bk3 .pick label.poa { display: grid; }  /* a price-on-application package (event sponsor) is an Enquire tile */
  .bk3 .pick label.poa .p { color: var(--orange-text); font-weight: 600; }
  /* With the extra width, the package tiles sit two to a row */
  @container (min-width: 640px) { .bk3 .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk3 .pick label:only-child, .bk3 .pick label:last-child:nth-child(odd) { grid-column: 1 / -1; } }
}

/* ---------- Motion: a fade and rise as each block scrolls into view; every button eases to a darker colour; cards and tiles lift; all of it steps aside for reduced motion ---------- */
.rv-on .rv { opacity: 0; transform: translate3d(0, 32px, 0); transition: opacity .9s cubic-bezier(.32,.94,.6,1) var(--d, 0ms), transform .9s cubic-bezier(.32,.94,.6,1) var(--d, 0ms); }
.rv-on .rv.in { opacity: 1; transform: none; }
.b, .gnav .book, .form button[type="submit"], .filters button, .acc .legal-tools button, .shelf-ctl button, .menu-btn, .pick label, .help a, .acc summary::after { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .3s cubic-bezier(.32,.94,.6,1); }
@media (hover: hover) {
  .filters button:not([aria-pressed="true"]):hover, .acc .legal-tools button:hover { background: #e3e3e8; }
  .menu-btn:hover { background: rgba(0,0,0,.05); }
  .pick label:not(.sold):hover { border-color: #86868b; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
  .help a:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
  .acc details:not([open]) summary:hover::after { transform: scale(1.12); }
  .acc details[open] summary:hover::after { transform: rotate(45deg) scale(1.12); }
}
/* Booking: when the package changes, the old details fade out and the new ones fade in, and the selection box glows briefly */
.bk3-card > * { transition: opacity .2s ease; }
.bk3-card.fade > * { opacity: 0; }
.sum-box.flash { animation: sum-flash 1s ease; }
@keyframes sum-flash { 0%, 30% { box-shadow: 0 0 0 2px var(--orange); background: #fff5ee; } 100% { box-shadow: 0 0 0 2px transparent; background: #f5f5f7; } }
@media (prefers-reduced-motion: reduce) {
  .rv-on .rv { opacity: 1; transform: none; transition: none; }
  .b, .gnav .book, .form button[type="submit"], .filters button, .acc .legal-tools button, .shelf-ctl button, .pick label, .help a, .acc summary::after { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
  .b:hover, .gnav .book:hover, .form button[type="submit"]:hover, .filters button:hover, .acc .legal-tools button:hover, .shelf-ctl button:hover, .pick label:hover, .help a:hover, .b:active, .gnav .book:active, .form button[type="submit"]:active, .filters button:active, .acc .legal-tools button:active, .shelf-ctl button:active, .acc details:not([open]) summary:hover::after { transform: none; }
  .acc details[open] summary:hover::after { transform: rotate(45deg); }
  .bk3-card > * { transition: none; }
  .sum-box.flash { animation-duration: .01s; }
  .gnav .logo img { transition: none; }
  .gnav .logo:hover img { transform: none; }
}