/* Glory's Bakery. The page is a run of painted boards, taken from the Aragona sign, alternating sign green and
   cream: green hero → case photo + green menu board → cream reviews → green party field → cream sign →
   green hours and footer. The sign's double wave is one drawing at two sizes: display (4px, as wide as the word
   above: GLORY'S, BAKERY, MENU, PARTY ORDERS) and small (3px, 200px, footer only). */
:root {
  --green: #0B6B5A; --green-d: #08503F; --wave: #6FB8DE;
  --cream: #F5EFE3; --paper: #FBF8F1; --ink: #1B1C18; --muted: #4A483F; --rule: #D3C9B4; --on-green: #D5E6DE;
  --display: 'Rokkitt', Georgia, serif; --text: 'Libre Franklin', system-ui, sans-serif;
  --gut: 20px; --sec: 80px;
  --m-dur: .85s; --m-rise: 24px; --m-ease: cubic-bezier(.2, .9, .25, 1);
}
@media (max-width: 719px) { :root { --m-dur: .7s; --m-rise: 16px; } }
@media (min-width: 960px) { :root { --gut: 40px; --sec: 128px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--text); color: var(--ink); background: var(--paper); }
@media (min-width: 960px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--wave); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--cream); color: var(--green-d); font-weight: 600; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(1240px, 100% - var(--gut) * 2); margin-inline: auto; }

/* The sign's double wave: two loose painted strokes in one long drawing, cropped to the word's width at a fixed
   scale, so every wave has the same weight, height and rhythm. site.js ends each stroke with a round cap just inside
   the edge (the second one shorter). Painted in left to right when its board arrives. */
.wave { display: block; width: 0; min-width: 100%; height: 34px; overflow: hidden; }
.wave path { fill: none; stroke: var(--wave); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wave.sm { width: 200px; min-width: 0; height: 26px; }
.painted { width: max-content; max-width: 100%; }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .wave { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.45, 0, .2, 1) calc(var(--d, 0ms) + 250ms); }
  .is-in .wave, .wave.is-in { clip-path: inset(0); }
  html:not(.m-on) .wave { animation: unclip 0s 1.8s forwards; }
}
@keyframes unclip { to { clip-path: inset(0); } }

/* Small label style, used the same way everywhere: Rokkitt caps with tracking. */
.label { font: 500 1.0625rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; }

/* Section headings: the sign face, heavy, in caps. */
.h2 { font: 800 clamp(2.75rem, 12vw, 5rem)/.9 var(--display); letter-spacing: -.005em; text-transform: uppercase; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 2px solid var(--cream); background: var(--cream); color: var(--green-d); font: 800 1.1875rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; --m-fill: rgba(11, 107, 90, .14); }
.btn.line { background: transparent; color: var(--cream); --m-fill: rgba(245, 239, 227, .16); }
.btn.green { background: var(--green); border-color: var(--green); color: var(--cream); --m-fill: rgba(255, 255, 255, .14); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--green); color: var(--cream); }
.top.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 48px; }
.brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px var(--cream); }
.brand span { font: 800 1.375rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; display: none; }
.nav { display: none; }
.topcall { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: 800 1.25rem/1 var(--display); letter-spacing: .03em; text-decoration: none; font-variant-numeric: lining-nums; }
.topcall svg { width: 16px; height: 16px; flex: none; }
@media (min-width: 960px) {
  .top .wrap { height: 80px; }
  .brand img { width: 52px; height: 52px; }
  .brand span { display: block; }
  .nav { display: flex; gap: 32px; margin-left: auto; }
  .nav a { font: 500 1.125rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 14px 0; white-space: nowrap; }
  .topcall { white-space: nowrap; }
  .topcall { padding-left: 32px; border-left: 1px solid rgba(245, 239, 227, .35); font-size: 1.375rem; }
}

/* ---------- hero: the sign, then the counter ---------- */
.hero { background: var(--green); color: var(--cream); }
.hero .wrap { padding: 14px 0 24px; }
.hero h1 { font: 800 clamp(3.5rem, 21vw, 10rem)/.84 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.hero h1 .w { display: block; width: max-content; }
.hero h1 .wave { margin: 4px 0 6px; }
.hero h1 .w + .w .wave { margin-bottom: 0; }
.hero-sub { margin-top: 14px; }
.slogan { font: 500 clamp(1.375rem, 6vw, 2.125rem)/1.15 var(--display); max-width: 22ch; }
.where { margin-top: 8px; color: var(--on-green); font-size: 1rem; max-width: 40ch; }
.hero-acts { display: flex; gap: 10px; margin-top: 18px; }
.hero-acts .btn { flex: 1 1 auto; padding: 0 14px; font-size: 1.0625rem; white-space: nowrap; }
.hero-acts .btn.line { flex: 0 1 auto; }
.ha-name { display: inline-flex; align-items: center; gap: 10px; }
.ha-x { display: none; }

/* The photo strip: edge to edge, thin sign-green gaps, the cut pizza bread leading. */
.strip { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--green); padding-bottom: 4px; }
.strip .m-frame { margin: 0; }
.strip .s1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.strip .s2, .strip .s3 { aspect-ratio: 5 / 4; }
.strip .s3 img { object-position: 50% 0%; }
.strip .s1 img { object-position: 45% 60%; }
.strip .s2 img { object-position: 50% 50%; }
.strip picture { display: contents; }
/* Each tile is uncovered upward after the name and actions, one after another, on a timer (site.js adds .go), so a
   tile only partly in view still opens. The photo itself is painted (and counted for LCP) from the start; only a
   green cover over it moves. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .strip .m-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--green); transform-origin: 50% 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1) 600ms; }
  .strip .s2::after { transition-delay: 700ms; }
  .strip .s3::after { transition-delay: 800ms; }
  .strip.go .m-frame::after { transform: scaleY(0); }
  html:not(.m-on) .strip .m-frame::after { animation: uncover 0s 1.8s forwards; }
}
@keyframes uncover { to { transform: scaleY(0); } }

@media (min-width: 960px) {
  .hero .wrap { padding: 40px 0 56px; }
  .hero h1 { display: flex; flex-wrap: nowrap; justify-content: space-between; column-gap: .18em; font-size: clamp(6rem, 10.2vw, 9.25rem); }
  .hero h1 .wave { margin: 8px 0 0; }
  /* The lower row on the 12-column grid: slogan and line in 1–7, the two actions stacked full width in 9–12,
     set like the party call buttons (name left, number right). */
  .hero-sub { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-top: 16px; }
  .hero-sub > div { grid-column: 1 / 8; }
  .slogan { font-size: 3.125rem; line-height: 1.06; max-width: none; text-wrap: balance; }
  .where { margin-top: 16px; font-size: 1.3125rem; line-height: 1.5; max-width: 44ch; color: var(--cream); }
  /* The stack's bottom sits on the last body line (its descender space is ~8px). */
  .hero-acts { grid-column: 8 / 13; display: grid; gap: 12px; margin: 0 0 8px; }
  .hero-acts .btn, .hero-acts .btn.line { justify-content: space-between; min-height: 72px; padding: 0 24px; font-size: 1.25rem; letter-spacing: .08em; }
  .hero-acts .btn svg { width: 20px; height: 20px; }
  .ha-x { display: inline; font-weight: 500; font-size: 1.25rem; letter-spacing: .02em; }
}
@media (min-width: 1200px) {
  .hero-sub > div { grid-column: 1 / 7; }
  .where { font-size: 1.5rem; line-height: 1.45; max-width: 40ch; }
  .hero-acts { grid-column: 7 / 13; }
  .hero-sub { column-gap: 32px; }
  .hero-acts .btn, .hero-acts .btn.line { min-height: 76px; padding: 0 32px; font-size: 1.625rem; white-space: nowrap; }
  .hero-acts .btn svg { width: 24px; height: 24px; }
  .ha-x { font-size: 1.625rem; font-weight: 800; white-space: nowrap; }
  /* Desktop strip: the cut loaf leads, the torn bread and the lumpia stacked as two wide tiles beside it. */
  .strip { grid-template-columns: 1.65fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding-bottom: 6px; height: clamp(440px, 58svh, 580px); }
  .strip .s1 { grid-column: auto; grid-row: 1 / 3; }
  .strip .s1, .strip .s2, .strip .s3 { aspect-ratio: auto; height: 100%; }
  .strip .s2 img { object-position: 50% 52%; }
}

/* ---------- menu: the case, then the counter board ---------- */
.menu { background: var(--green); }
.case { position: relative; margin: 0 auto; max-width: 1600px; }
.case img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
.counter { background: var(--green); color: var(--cream); padding: 12px 0 12px; }
/* The board's painted frame on phones too: 12px in from the screen edges, 20px inside. */
.counter > .wrap { position: relative; width: calc(100% - 24px); padding: 36px 20px 40px; }
.counter .intro { margin-top: 20px; font-size: 1.125rem; max-width: 34ch; color: var(--on-green); }
.board-head .wave { margin-top: 10px; }
.lead-item { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; margin-top: 40px; padding-bottom: 18px; }
.li-name { font: 800 2.5rem/.95 var(--display); letter-spacing: -.005em; text-transform: uppercase; }
.li-with { font: 500 1.375rem/1.1 var(--display); color: var(--on-green); }
.groups { display: grid; gap: 48px; }
.groups { margin-top: 44px; }
.group h3 { position: relative; display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; font: 800 1.625rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
/* The board's rules: painted on from the left when their line arrives. */
.lead-item::after, .group > h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cream); transform-origin: 0 50%; }
.frame { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.frame rect { width: calc(100% - 3px); height: calc(100% - 3px); fill: none; stroke: var(--cream); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .lead-item::after, .group > h3::after { transform: scaleX(0); transition: transform .4s var(--m-ease) calc(var(--d, 0ms) + 120ms); }
  .lead-item.is-in::after, .group > h3.is-in::after { transform: none; }
  html:not(.m-on) .lead-item::after, html:not(.m-on) .group > h3::after { animation: painted 0s 1.8s forwards; }
}
@keyframes painted { to { transform: none; stroke-dashoffset: 0; } }
.group h3 .n { font: 500 .875rem/1 var(--display); letter-spacing: .12em; color: var(--on-green); }
/* Phones: each group's items run on as one painted line, names never broken, a cream dot between them.
   Turnovers keeps its own line with the flavors under it. */
.group ul { margin-top: 14px; }
.group li { display: inline-block; white-space: nowrap; font: 500 1.375rem/1.5 var(--display); }
.group li:not(:last-child)::after { content: "\00B7"; margin: 0 10px; }
.group li.wide { display: block; white-space: normal; margin-bottom: 6px; }
.group li.wide::after { content: none; }
.group li.eol::after { visibility: hidden; }
.group li small { display: block; margin-top: 2px; font: 400 1.0625rem/1.45 var(--text); color: var(--on-green); }
@media (max-width: 1199px) and (min-width: 960px) { .nav { gap: 22px; } .topcall { padding-left: 22px; } }

@media (min-width: 960px) {
  /* The whole shelf crop, so both rows of name cards show uncut (the green turnover cards end ~24px above the edge). */
  .case img { aspect-ratio: 1600 / 720; object-position: 50% 50%; }
  .counter { padding: 40px 0; }
  .counter > .wrap { position: relative; width: min(1360px, 100% - 80px); padding: 72px 48px 64px; }
  /* The sign frame, painted on clockwise from the top-left corner when the board arrives. */
  .frame rect { stroke-width: 3; }
  /* The board head is one block on the left: MENU, its wave, the intro 20px under it. */
  .counter .intro { margin-top: 24px; font-size: 1.5rem; max-width: 28ch; line-height: 1.4; color: var(--cream); }
  .board-head .h2 { font-size: 6rem; }
  .lead-item { margin-top: 48px; column-gap: 24px; padding-bottom: 24px; }
  .lead-item { flex-wrap: nowrap; }
  .li-name { font-size: 5.25rem; white-space: nowrap; }
  .li-with { font-size: 2.125rem; white-space: nowrap; }
  /* Three groups in one row, headings on one baseline, one item per line. */
  .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(40px, 5vw, 80px); align-items: start; margin-top: 56px; padding-bottom: 40px; border-bottom: 2px solid var(--cream); }
  .group h3 { font-size: 2.875rem; }
  .group h3 .n { font-size: 1rem; }
  .group ul { display: grid; gap: 16px; margin-top: 24px; }
  .group li { display: block; white-space: normal; font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.15; }
  .group li:not(:last-child)::after { content: none; }
  .group li.wide { margin: 0; }
  .group li small { max-width: 24ch; margin-top: 6px; font-size: 1.25rem; line-height: 1.4; text-wrap: balance; }
}

/* ---------- reviews: cream, the long quote in sign green ---------- */
.reviews { background: var(--cream); color: var(--ink); padding-block: var(--sec); }
.rating { margin-top: 10px; font: 500 1.1875rem/1.3 var(--display); letter-spacing: .04em; color: rgba(27, 28, 24, .85); }
.lead-quote { margin: 0; }
.lead-quote .q { position: relative; color: var(--green); font: 500 2.125rem/1.1 var(--display); letter-spacing: -.005em; text-wrap: pretty; }
.lead-quote .q::before { content: "\201C"; position: absolute; left: -.42em; top: 0; color: var(--green); }
.lead-quote .q::after { content: "\201D"; }
.lead-quote .cite { margin-top: 20px; font: 800 1rem/1.2 var(--display); letter-spacing: .12em; color: var(--green); }
.quotes { display: grid; margin-top: 56px; border-top: 2px solid var(--green); }
.quotes blockquote { padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
.quotes blockquote:last-child { border-bottom: 0; }
.quotes p:not(.cite) { font-size: 1.0625rem; color: var(--ink); }
.quotes .cite { margin-top: 12px; font-size: 1rem; font-weight: 800; letter-spacing: .12em; color: var(--green); }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 44px; color: var(--green-d); font: 500 1.125rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 960px) {
  .lead-quote .q { max-width: 83.3%; font-size: 3.75rem; line-height: 1.12; }
  .lead-quote .cite { font-size: 1.25rem; }
  .rating { font-size: 1.375rem; }
  .quotes { grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 88px; border-top: 0; }
  .quotes blockquote { border-bottom: 0; border-top: 1px solid var(--green); padding: 28px 0 0; }
  .quotes p:not(.cite) { font-size: 1.25rem; line-height: 1.5; }
  .quotes .cite { margin-top: 16px; }
  .more { margin-top: 40px; }
}

/* ---------- party orders: a board like the hero, the painted heading over a row of the tray and the calls ---------- */
.party { background: var(--green); color: var(--cream); padding-block: var(--sec); }
.party-head { width: max-content; max-width: 100%; margin-bottom: 32px; }
.party-head .wave { margin-top: 10px; }
.party-fig { position: relative; margin: 0; }
.party-fig img { width: 100%; aspect-ratio: 640 / 560; object-fit: cover; }
.party-panel { margin-top: 28px; }
.party-panel p { margin-top: 18px; color: var(--on-green); }
.party-panel p:first-child { margin-top: 0; }
.party-panel .label { margin-top: 26px; color: var(--cream); }
.party-calls { display: grid; gap: 10px; margin-top: 12px; }
.party-calls .btn { justify-content: space-between; min-height: 60px; padding: 0 18px; white-space: nowrap; }
.party-calls .btn span { font-weight: 500; letter-spacing: .02em; }
@media (min-width: 960px) {
  .party { padding-block: 96px; }
  .party .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: stretch; }
  .party-head { grid-column: 1 / -1; margin-bottom: 56px; }
  .party-head .h2 { font-size: 7rem; line-height: .86; }
  /* Paragraph top on the tray top, the bottom of the call stack on the tray bottom. */
  .party-fig { grid-column: 1 / 6; align-self: start; width: 100%; max-width: 480px; margin: 0; }
  .party-panel { grid-column: 7 / 13; display: flex; flex-direction: column; max-width: 520px; margin: 0; }
  .party-panel p:first-of-type { font-size: 1.5625rem; line-height: 1.45; }
  .party-panel .label { margin-top: auto; padding-top: 28px; font-size: 1.1875rem; letter-spacing: .12em; }
  .party-calls { margin-top: 20px; }
  .party-calls { gap: 12px; }
  .party-calls .btn { min-height: 76px; padding: 0 28px; font-size: 1.375rem; }
  .party-calls .btn span { font-size: 1.375rem; }
}

/* ---------- since 1986: the real sign ---------- */
.about { background: var(--cream); overflow: clip; }
.about-fig { position: relative; margin: 0; overflow: clip; clip-path: inset(0); }
.about-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; }
.about-text { padding: 48px var(--gut) 72px; }
.about-text h2 { color: var(--green); font: 800 2.75rem/.92 var(--display); text-transform: uppercase; text-wrap: balance; }
.about-text p { margin-top: 22px; max-width: 30ch; }
.about-text h2 + p { margin-top: 28px; }
@media (min-width: 960px) {
  .about { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .about-fig { min-height: 820px; }
  .about-fig img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 50% 40%; }
  .about-text { display: flex; flex-direction: column; justify-content: center; padding: var(--sec) var(--gut) var(--sec) 72px; max-width: 680px; }
  .about-text h2 { font-size: clamp(4.5rem, 6.4vw, 6.5rem); }
  .about-text h2 + p { margin-top: 40px; font-size: 1.4375rem; line-height: 1.5; max-width: 30ch; }
}

/* ---------- visit: the two numbers lead, hours set like a timetable ---------- */
.visit { position: relative; z-index: 1; background: var(--green); color: var(--cream); padding-block: var(--sec); box-shadow: 0 -2px 0 var(--green); }
.visit h2.label { color: var(--on-green); }
.shops { display: grid; gap: 56px; margin-top: 24px; }
.shop .num { display: inline-block; font: 800 clamp(2.75rem, 13.2vw, 5.25rem)/.95 var(--display); letter-spacing: -.01em; text-decoration: none; font-variant-numeric: lining-nums; padding-block: 4px; }
.shop h3.label { margin-top: 12px; color: var(--cream); font-weight: 800; }
.shop address { margin-top: 8px; font-style: normal; color: var(--on-green); }
.nw { white-space: nowrap; }
.shop .dir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font: 500 1.125rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.hours { margin-top: 20px; border-top: 2px solid var(--cream); font-variant-numeric: tabular-nums; }
.hours li { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; padding: 0 10px; border-bottom: 1px solid rgba(245, 239, 227, .24); font: 500 1.1875rem/1.2 var(--display); }
.hours li span:last-child { text-align: right; }
.hours li.closed span:last-child { color: var(--on-green); }
.hours li.today { background: var(--cream); color: var(--green-d); border-bottom-color: var(--cream); font-weight: 800; }
.today-mark { font-weight: 500; }
.hours li.today span:last-child { color: var(--green-d); }
.visit-note { margin-top: 48px; color: var(--on-green); max-width: 56ch; }
@media (min-width: 960px) {
  .shops { grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 32px; }
  .hours li { font-size: 1.3125rem; min-height: 52px; padding: 0 14px; }
}

/* ---------- footer: compact; the numbers, the socials, the wave once more ---------- */
.foot { background: var(--green-d); color: var(--cream); padding: 64px 0 calc(96px + env(safe-area-inset-bottom)); }
.foot-grid { display: grid; gap: 28px; justify-items: start; }
.foot-seal { width: 96px; height: 96px; }
.foot a { color: var(--cream); }
.foot-nums { display: grid; gap: 14px; }
.foot-nums .label { display: block; color: var(--on-green); font-size: 1rem; }
.foot-num { display: inline-block; font: 800 1.75rem/1 var(--display); text-decoration: none; padding: 8px 0; }
.foot-social { display: flex; align-items: center; gap: 12px; font: 500 1.125rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.foot-social a { display: inline-flex; min-height: 44px; align-items: center; }
.foot-social span { color: var(--on-green); }
.foot-base { margin-top: 48px; display: grid; gap: 6px; color: var(--on-green); }
.foot-base .wave { margin-bottom: 20px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 32px; font-size: 1.0625rem; }
.legal-links a { display: inline-flex; min-height: 44px; align-items: center; }
.credits { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: rgba(245, 239, 227, .75); }
@media (min-width: 960px) {
  .foot { padding-bottom: 56px; }
  .foot-grid { grid-template-columns: auto 1fr auto; align-items: center; gap: 56px; }
  .foot-nums { grid-template-columns: auto auto; gap: 56px; }
  .foot-base { gap: 8px; }


}

/* ---------- phone action bar ---------- */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.45fr 1.15fr .85fr; gap: 1px; background: rgba(245, 239, 227, .3); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -1px 0 rgba(0, 0, 0, .12); }
.actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 6px; background: var(--green-d); color: var(--cream); font: 800 1rem/1 var(--display); letter-spacing: .03em; white-space: nowrap; text-transform: uppercase; text-decoration: none; --m-fill: rgba(255, 255, 255, .14); }
.actionbar a.primary { background: var(--cream); color: var(--green-d); --m-fill: rgba(11, 107, 90, .14); }
.actionbar svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 419px) { .actionbar .ab-x { display: none; } }
@media (min-width: 960px) { .actionbar { display: none; } }

/* ---------- 404 ---------- */
.lost { background: var(--green); color: var(--cream); min-height: calc(100svh - 68px); display: grid; align-items: center; padding-block: 64px 120px; }
.lost h1 { font: 800 clamp(3.25rem, 15vw, 8rem)/.88 var(--display); text-transform: uppercase; }
.lost .wave { width: 200px; min-width: 0; margin: 18px 0 22px; }
.lost p { max-width: 40ch; color: var(--on-green); }
.lost .hero-acts { margin-top: 28px; }
.case picture { display: block; }
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .frame rect { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1); }
  .frame.is-in rect { stroke-dashoffset: 0; }
  html:not(.m-on) .frame rect { animation: painted 0s 1.8s forwards; }
}

/* Phones: no long empty tails under the last line of reviews and hours. */
@media (max-width: 959px) { .reviews { padding-bottom: 56px; } .visit { padding-bottom: 64px; } }