@font-face {
  font-family: 'Gilroy Heavy';
  src: url('/static-v/Gilroy-Heavy.c04ebb67615baa64.woff') format('woff');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
/* Restaurant finder: balanced cards with every building framed the same way. */
.finder-page .restaurant-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 18px; }
.finder-page .restaurant-card { border-radius: 18px; }
.finder-page .restaurant-photo { --frame: 1; aspect-ratio: 1 / var(--frame); }
.finder-page .restaurant-photo > img { height: 100%; object-fit: cover; object-position: center; }
/* Framed photos (see src/lib/restaurant-photo-framing.ts) are 4:5. The facade (centre --c, height --s,
   both fractions of the photo) is scaled to about 84% of the frame height, zooming in up to 1.5x on
   small buildings, then centred without ever uncovering the edge of the frame. */
.finder-page .restaurant-photo.is-framed > img {
  --z: clamp(1, 0.84 * var(--frame) / (1.25 * var(--s)), 1.5);
  position: absolute;
  max-width: none;
  width: calc(var(--z) * 100%);
  height: auto;
  left: clamp(calc((1 - var(--z)) * 100%), calc((0.5 - var(--x) * var(--z)) * 100%), 0%);
  top: clamp(calc((1 - 1.25 * var(--z) / var(--frame)) * 100%), calc((0.5 - var(--c) * 1.25 * var(--z) / var(--frame)) * 100%), 0%);
}
.finder-page .restaurant-drive-badge { z-index: 1; left: 10px; top: 10px; padding: 5px 8px; }
.finder-page .restaurant-card-body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
  grid-template-areas: 'identity hours' 'address address' 'order order';
  padding: 12px 16px; background: #eef4fa;
}
.finder-page .restaurant-identity { grid-area: identity; min-width: 0; align-self: center; }
.finder-page .restaurant-city { margin: 0 0 2px; color: #1c4e9d; font-size: 11px; line-height: 1.3; }
.finder-page .restaurant-card h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; font-size: 20px; line-height: 1.2; }
.finder-page .restaurant-card-body address { grid-area: address; margin: 0; font-size: 14px; line-height: 1.4; }
.finder-page .restaurant-actions { display: contents; }
.finder-page .restaurant-info-link { grid-area: hours; align-self: center; justify-self: end; min-width: 0; padding: 8px 0 8px 6px; color: #1c4e9d; font-size: 12px; }
.finder-page .restaurant-info-link > svg { display: none; }
.finder-page .restaurant-info-mobile-label { display: inline-flex; align-items: center; gap: 5px; }
.finder-page .restaurant-info-mobile-label svg { width: 15px; height: 15px; }
.finder-page .restaurant-order-trigger { grid-area: order; width: 100%; min-width: 0; margin-top: 14px; min-height: 44px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; }

@media (max-width: 1200px) {
  .finder-page .restaurant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .finder-page .restaurant-grid { gap: 18px 16px; }
}
@media (max-width: 860px) {
  .finder-page .restaurant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .finder-page .restaurant-grid { grid-template-columns: 1fr; gap: 14px; }
  .finder-page .restaurant-card { border-radius: 16px; }
  .finder-page .restaurant-card h2 { font-size: 22px; }
  .finder-page .restaurant-order-trigger { font-size: 14px; }
}

.finder-page .restaurant-order-full-label,
.finder-page .restaurant-info-full-label { display: none; }
.finder-page .restaurant-order-mobile-label { display: inline; min-width: 0; font: inherit; }
.finder-page .finder-title-brand { display: block; margin-top: 3px; color: #1c4e9d; font-family: 'Gilroy Heavy', Gilroy, Arial, sans-serif; font-weight: 900; font-synthesis: none; line-height: 1.06; letter-spacing: -.025em; }
.finder-page .finder-location-hint {
  display: flex; gap: 10px; align-items: flex-start; margin: -2px 0 16px; padding: 12px 14px;
  border-radius: 12px; background: #fff0ed; color: #733942;
}
.finder-page .finder-location-hint > svg { width: 20px; height: 20px; margin-top: 2px; color: #a92b3c; }
.finder-page .finder-location-hint p { margin: 0; font-size: 14px; line-height: 1.4; }
.finder-page .finder-location-hint strong,
.finder-page .finder-location-hint span { display: block; }

/* Search is primary; the area selector keeps optional browsing out of the way. */
.finder-page .finder-results-head { align-items: center; gap: 24px; }
.finder-page .finder-results-summary { min-width: 0; display: grid; gap: 5px; }
.finder-page .finder-results-summary h2 { overflow-wrap: anywhere; }
.finder-page .finder-area { flex: 0 0 auto; }
.finder-page .finder-area-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 154px; min-height: 44px; padding: 9px 10px; border: 1px solid #c5d1df;
  border-radius: 10px; background: #eaf1fa; color: #1c4e9d; font: inherit; font-size: 16px; cursor: pointer;
}
.finder-page .finder-area-trigger > svg { width: 16px; height: 16px; }
.finder-page .finder-area-trigger:focus-visible { outline: 2px solid #2458a5; outline-offset: 3px; }
.finder-page .finder-active-filters { margin-top: 16px; }
.finder-page .finder-active-filters button {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px;
  border: 1px solid #c5d1df; border-radius: 22px; background: #e5edf5; color: inherit; font: inherit; cursor: pointer;
}

/* Compact mobile introduction, with the original photo cards below it. */
@media (max-width: 600px) {
  .finder-page { padding-top: 14px; padding-bottom: 40px; }
  .finder-page .finder-hero {
    min-height: 0; margin-bottom: -70px; overflow: hidden; background: #e4edf9; border-radius: 20px;
  }
  .finder-page .finder-hero-copy { padding: 28px 24px 90px; }
  .finder-page .finder-hero-copy h1 { color: #183d5e; font-size: 32px; line-height: 1.12; letter-spacing: -.04em; }
  .finder-page .finder-title-brand { display: block; margin-top: 3px; color: #1c4e9d; font-family: 'Gilroy Heavy', Gilroy, Arial, sans-serif; font-weight: 900; font-synthesis: none; font-size: 42px; line-height: 1.06; letter-spacing: -.025em; }
  .finder-page .finder-hero-copy > p { margin: 16px 0 0; color: #45627e; font-size: 14px; line-height: 1.65; }
  .finder-page .finder-hero-copy > p > span { display: block; }
  .finder-page .finder-hero-copy > p br { display: none; }
  .finder-page .finder-hero-copy > p > span:last-child { color: #274b70; }
  .finder-page .finder-tools { display: contents; }
  .finder-page .finder-search {
    position: sticky; top: 86px; z-index: 12; margin: 0 20px; padding: 4px 5px 4px 12px;
    background: #fff; border-color: #b6cbe4; border-radius: 12px; box-shadow: 0 2px 8px #173d5e0a;
  }
  .finder-page .finder-search:focus-within { border-color: #1c4e9d; box-shadow: 0 0 0 3px #1c4e9d15; }
  .finder-page .finder-search input { min-height: 44px; font-size: 16px; }
  .finder-page .finder-search-submit { min-height: 44px; background: #1c4e9d; color: #fff; }
  .finder-page .finder-results-head { gap: 12px; margin: 28px 0 14px; scroll-margin-top: 68px; }
  .finder-page .finder-results-head h2 { font-size: 22px; line-height: 1.2; }
  .finder-page .finder-area-trigger { width: 144px; background: #eaf1fa; border-color: #bed0e6; color: #1c4e9d; }
  .finder-page .finder-results-head .result-label { font-size: 12px; }
  .finder-page .restaurant-photo { --frame: .84; aspect-ratio: 1 / var(--frame); }
  .finder-page .restaurant-card-body {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px;
    grid-template-areas: 'identity hours' 'address address' 'order order';
    padding: 10px 14px; background: #eef4fa;
  }
  .finder-page .restaurant-identity { grid-area: identity; min-width: 0; align-self: center; }
  .finder-page .restaurant-card h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; font-size: 20px; line-height: 1.2; }
    .finder-page .restaurant-city { color: #1c4e9d; font-size: 11px; }
  .finder-page .restaurant-card-body address { grid-area: address; font-size: 14px; line-height: 1.4; margin-bottom: 0; }
  .finder-page .restaurant-card-body address br { display: none; }
  .finder-page .restaurant-card-body address > span + span::before { content: ' · '; color: #c22c3d; }
  .finder-page .restaurant-drive-badge { background: #fff0ed; color: #93343b; }
  .finder-page .restaurant-grid { gap: 12px; }
  .finder-page .restaurant-actions { display: contents; }
  .finder-page .restaurant-info-link { grid-area: hours; align-self: center; justify-self: end; min-width: 0; padding: 8px 0 8px 6px; color: #1c4e9d; font-size: 12px; }
  .finder-page .restaurant-info-link svg { display: none; }
  .finder-page .restaurant-order-full-label,
  .finder-page .restaurant-info-full-label { display: none; }
  .finder-page .restaurant-info-mobile-label { display: inline-flex; align-items: center; gap: 5px; }
  .finder-page .restaurant-info-mobile-label svg { display: block; width: 15px; height: 15px; }
  .finder-page .restaurant-order-mobile-label { display: inline; min-width: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
  .finder-page .restaurant-order-trigger { grid-area: order; margin-top: 14px; width: 100%; min-width: 0; min-height: 44px; gap: 12px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; }
}

/* A branded area picker instead of the phone's native select overlay. */
.finder-area-dialog {
  inset: 0; margin: auto; padding: 0; width: min(420px, calc(100% - 32px)); max-width: none;
  max-height: calc(100dvh - 32px); border: 1px solid #d5e0ed; border-radius: 22px;
  background: #f7f9fc; color: #173d5e; color-scheme: light; box-shadow: 0 20px 70px #102c4138;
  overflow: hidden; text-align: left;
}
.finder-area-dialog[open] { display: flex; flex-direction: column; }
.finder-area-dialog::backdrop { background: #102c4166; }
.finder-area-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 20px 18px; flex-shrink: 0; }
.finder-area-dialog-header h2 { margin: 0 0 7px; font-size: 25px; line-height: 1.15; letter-spacing: -.025em; color: #173d5e; }
.finder-area-dialog-header p { margin: 0; font-size: 13px; line-height: 1.5; color: #526b84; }
.finder-area-close { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #d5e0ed; border-radius: 50%; background: #fff; color: #1c4e9d; font-size: 27px; line-height: 1; }
.finder-area-options { display: grid; gap: 7px; padding: 0 16px 18px; overflow-y: auto; overscroll-behavior: contain; }
.finder-area-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 58px; padding: 10px 14px; border: 1px solid #dbe4ee; border-radius: 12px; background: #fff; color: #173d5e; font: inherit; text-align: left; }
.finder-area-option-copy { display: grid; gap: 2px; }
.finder-area-option-copy strong { font-size: 16px; font-weight: 600; line-height: 1.25; }
.finder-area-option-copy > span { color: #526b84; font-size: 12px; line-height: 1.3; }
.finder-area-option[aria-pressed="true"] { border-color: #b7cde8; background: #e4edf9; color: #1c4e9d; }
.finder-area-indicator { flex: 0 0 23px; width: 23px; height: 23px; border: 1px solid #c4d1e1; border-radius: 50%; }
.finder-area-option[aria-pressed="true"] .finder-area-indicator { border: 0; }
.finder-area-indicator svg { display: block; width: 23px; height: 23px; }
.finder-area-option:active { background: #dce8f7; }
.finder-area-close:active { background: #e4edf9; }
.finder-area-dialog button, .finder-area-trigger { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.finder-area-dialog :focus-visible { outline: 2px solid #1c4e9d; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .finder-area-option:hover { background: #edf3fa; border-color: #b7cde8; }
  .finder-area-close:hover { background: #e4edf9; }
}
@media (max-width: 600px) {
  .finder-area-dialog { inset: auto 0 0; width: 100%; margin: 0; max-height: calc(100dvh - 24px); border: 0; border-radius: 24px 24px 0 0; }
  .finder-area-dialog-header { padding: 24px 20px 18px; }
  .finder-area-options { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* Keep the split desktop header; scale it down on tablets and align card controls. */
@media (min-width: 601px) {
  .finder-page { padding-top: 28px; }
  .finder-page .finder-hero { min-height: 280px; background: #e4edf9; }
  .finder-page .finder-hero-photo { min-height: 280px; }
  .finder-page .finder-hero-copy { padding: 28px 40px 58px; }
  .finder-page .finder-hero-copy h1 { color: #183d5e; font-size: 40px; line-height: 1.12; letter-spacing: -.04em; }
  .finder-page .finder-title-brand { font-size: 52px; }
  .finder-page .finder-hero-copy > p { margin: 16px 0 0; color: #45627e; font-size: 15px; line-height: 1.55; }
  .finder-page .finder-tools { padding: 10px; }
  .finder-page .finder-search { background: #fff; }
  .finder-page .finder-search input { min-height: 44px; font-size: 16px; }
  .finder-page .finder-search-submit { min-height: 44px; background: #1c4e9d; color: #fff; }
  .finder-page .finder-results-head { margin: 28px 0 18px; scroll-margin-top: 88px; }
  .finder-page .restaurant-drive-badge { background: #fff0ed; color: #93343b; }
}
@media (min-width: 601px) and (max-width: 1200px) {
  .finder-page .finder-hero, .finder-page .finder-hero-photo { min-height: 250px; }
  .finder-page .finder-hero-copy { padding: 24px 28px 50px; }
  .finder-page .finder-hero-copy h1 { font-size: 32px; }
  .finder-page .finder-title-brand { font-size: 44px; }
  .finder-page .finder-hero-copy > p { margin-top: 14px; font-size: 14px; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .finder-page .restaurant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablets use a touch sheet; desktop pointers get a dropdown beside the trigger. */
.finder-area-dialog[data-presentation="sheet"] {
  position: fixed; inset: auto 0 16px; margin: 0 auto; width: min(520px, calc(100% - 40px));
  max-height: calc(100dvh - 32px); border: 1px solid #d5e0ed; border-radius: 24px;
}
.finder-area-dialog[data-presentation="popover"] {
  position: fixed; inset: auto; margin: 0; z-index: 100; width: 320px; max-height: 400px; border-radius: 16px;
}
.finder-area-dialog[data-presentation="popover"] .finder-area-dialog-header { align-items: center; padding: 12px 14px 10px; }
.finder-area-dialog[data-presentation="popover"] .finder-area-dialog-header h2 { margin: 0; font-size: 19px; }
.finder-area-dialog[data-presentation="popover"] .finder-area-dialog-header p { display: none; }
.finder-area-dialog[data-presentation="popover"] .finder-area-options { gap: 4px; padding: 0 10px 12px; }
.finder-area-dialog[data-presentation="popover"] .finder-area-option { min-height: 44px; padding: 8px 10px; gap: 12px; border-radius: 9px; }
.finder-area-dialog[data-presentation="popover"] .finder-area-option-copy { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 8px; }
.finder-area-dialog[data-presentation="popover"] .finder-area-option-copy strong { font-size: 14px; }
.finder-area-dialog[data-presentation="popover"] .finder-area-option-copy > span { font-size: 11px; }
@media (max-width: 600px) {
  .finder-area-dialog[data-presentation="sheet"] { inset: auto 0 0; width: 100%; margin: 0; max-height: calc(100dvh - 24px); border: 0; border-radius: 24px 24px 0 0; }
}