/* Shared, final layout rules: one gutter and continuous type scaling. */
:root {
  --page-gutter: clamp(20px, 4vw, 50px);
  --section-space: clamp(56px, 6vw, 88px);
}
.wrap, .hero-content, .hero-bottom {
  width: min(1220px, calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}
h1, h2 { line-height: 1.16; }
h2 { font-size: clamp(38px, calc(28px + 2.8vw), 72px); }
.intro-grid > *, .story > *, .contact-grid > *, .section-head > *,
.form-row > *, .dishes > *, .gallery-grid > *, .blog-card > * { min-width: 0; }
.intro-grid, .story, .contact-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}
.intro, .story, .menu-section, .gallery, .ordering, .contact, .blog-section {
  padding-block: var(--section-space);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.section-head > p, .menu-aside { width: auto; max-width: 470px; }
.gallery .section-head { grid-template-columns: minmax(0, 1fr); }
.dishes, .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dish h5, .variant > span:first-child, .contact-email { overflow-wrap: anywhere; }
form input, form textarea, form select { min-width: 0; max-width: 100%; font-size: 16px; }
.contact form { padding: clamp(22px, 3vw, 38px); }
.contact .contact-email { font-size: clamp(20px, calc(14px + 1vw), 27px); }
.contact-link { font-size: clamp(30px, calc(20px + 1.6vw), 43px); }
.fbo-service-head, .family-brand-links, .menu-foot { flex-wrap: wrap; }
.family-brand-links { gap: 32px; }
.family-brand-links > a { min-width: min(240px, 100%); max-width: 100%; }

/* Let the hero grow with its content; its bottom row cannot cover the copy. */
.hero { display: block; min-height: 0; }
.hero-content { padding: clamp(44px, 5vw, 72px) 0 40px; }
.hero h1 {
  font-size: clamp(44px, calc(28px + 4.5vw), 96px);
  line-height: 1.16;
  letter-spacing: -.03em;
  margin: 0 0 24px;
  max-width: 100%;
}
.hero-title-line { display: block; }
.hero h1 em { display: inline-block; padding-right: .08em; }
.hero .eyebrow {
  font-size: clamp(10px, calc(7px + .45vw), 13px);
  letter-spacing: .14em;
  margin-bottom: 24px;
  max-width: 580px;
}
.hero-content > p:not(.eyebrow) {
  max-width: 620px;
  font-size: clamp(17px, calc(14px + .4vw), 20px);
  line-height: 1.65;
}
.hero-actions { flex-direction: row; flex-wrap: wrap; gap: 16px 28px; margin-top: 28px; }
.hero-bottom {
  position: relative;
  inset: auto;
  padding-bottom: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.hero-bottom > span { font-size: clamp(12px, 1.2vw, 17px); max-width: none; }

/* Keep navigation, contact information, and catering access in the header. */
header:not(.complete-menu-header) {
  height: auto;
  min-height: 150px;
  padding: 12px var(--page-gutter);
  grid-template-columns: 240px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 8px clamp(18px, 2vw, 28px);
}
header .brand {
  width: 240px;
  height: auto;
  aspect-ratio: 1942 / 809;
  grid-column: 1;
  grid-row: 1 / 3;
}
header .brand .logo-frame { width: 100%; height: 100%; }
header .brand .logo-frame img { width: 132.143%; height: auto; left: -16.43%; top: -24.65%; }
.header-contact { min-width: 0; flex-wrap: wrap; gap: 6px 18px; line-height: 1.5; }
header nav { gap: 20px; }
header nav a { font-size: 12px; letter-spacing: 1px; }
header nav a + a::before { left: -10px; }
.header-cta { padding: 14px 18px; gap: 14px; font-size: 11px; }
.navigation-label { display: none; }
.nav-toggle {
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid #d6b979;
  border-radius: 3px;
  background: #174b75;
  color: #f1ddb3;
  font: 500 12px/1.2 'Jost', sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 4px #d6b9790d;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: #123c5e; color: #fff5dd; }
.explore-icon { position: relative; display: block; width: 18px; height: 14px; flex: 0 0 18px; }
.explore-icon span { position: absolute; left: 0; width: 18px; height: 1px; background: currentColor; }
.explore-icon span:first-child { top: 3px; }
.explore-icon span:last-child { bottom: 3px; }
.nav-toggle[aria-expanded="true"] .explore-icon span:first-child { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .explore-icon span:last-child { bottom: 7px; transform: rotate(-45deg); }
html { scroll-padding-top: calc(var(--site-header-height, 180px) + 16px); }

@media (max-width: 1100px) {
  header:not(.complete-menu-header) {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    gap: 12px 16px;
  }
  header .brand { width: min(200px, 100%); grid-row: 1; }
  .header-contact {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    justify-content: center;
    gap: 6px 24px;
    padding-top: 10px;
    border-top: 1px solid #d6b97955;
    font-size: 14px;
    letter-spacing: 0;
  }
  .header-contact a { white-space: nowrap; }
  .header-contact small { font-size: 11px; }
  .header-contact .service-note { display: block; font-size: 10px; letter-spacing: 1.3px; }
  .contact-divider { display: none; }
  .header-cta {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-content: center;
    min-height: 46px;
    padding: 10px 16px;
    gap: 12px;
    letter-spacing: 1px;
    background: linear-gradient(120deg, #f0dca7, #d6b979);
    border-color: #f0dca7;
    color: #143d5b;
  }
  .header-cta::before { border-color: #173d5e26; }
  .header-cta span { width: 24px; height: 24px; border-color: #173d5e40; font-size: 16px; }
  .nav-toggle { display: inline-flex; grid-column: 2; grid-row: 1; }
  header nav {
    position: absolute;
    grid-column: auto;
    grid-row: auto;
    inset: calc(100% + 8px) var(--page-gutter) auto auto;
    width: min(360px, calc(100vw - 2 * var(--page-gutter)));
    max-height: calc(100vh - var(--site-header-height, 240px) - 24px);
    max-height: calc(100dvh - var(--site-header-height, 240px) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: none;
    padding: 18px 22px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    background: linear-gradient(135deg, #205a83, #123b5e);
    border: 1px solid #d6b979;
    border-radius: 4px;
    box-shadow: inset 0 0 0 5px #d6b9790a, 0 16px 32px #0b284747;
  }
  header nav.open { display: flex; }
  .navigation-label { display: block; padding: 0 0 12px; color: #e5cd94; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
  header nav a { width: 100%; min-height: 50px; padding: 14px 30px 14px 0; border-top: 1px solid #d6b97940; font-size: 14px; letter-spacing: 1px; }
  header nav a + a::before { display: none; }
  header nav a::after, header nav a:hover::after, header nav a:focus-visible::after {
    content: '↗';
    width: auto;
    height: auto;
    top: 50%;
    bottom: auto;
    left: auto;
    right: 0;
    transform: translateY(-50%);
    color: #e5cd94;
    background: none;
    font-size: 18px;
    transition: none;
  }
}
@media (max-width: 600px) {
  header:not(.complete-menu-header) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: 10px 12px;
  }
  header:not(.complete-menu-header) .brand { width: min(174px, 100%); }
  .nav-toggle { padding-inline: 12px; gap: 10px; }
  .header-cta { grid-column: 1 / -1; grid-row: 2; width: 100%; font-size: 12px; }
  .header-contact { grid-row: 3; gap: 4px 16px; font-size: 13px; }
  .header-contact .service-note { flex-basis: 100%; text-align: center; }
}
@media (max-width: 960px) {
  .intro-grid, .story, .contact-grid, .section-head { grid-template-columns: minmax(0, 1fr); }
  .intro-grid > div, .story-copy > p:not(.eyebrow), .section-head > p, .menu-aside { max-width: 680px; }
  .section-head > p, .menu-aside { margin-top: 0; }
  .story-image > img { height: auto; max-height: 550px; aspect-ratio: 4 / 3; }
  .contact-grid { gap: 36px; }
  .fbo-service-head { gap: 12px 24px; }
  .fbo-locations { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
  .fbo-locations li { border: 0; border-top: 1px solid #b69a6244; }
  .fbo-locations li:last-child { grid-column: auto; }
  footer .footer-inner { display: flex; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 700px) {
  .hero-actions { align-items: flex-start; }
  .hero .button { max-width: 100%; }
  .form-row, .form-row:has(input[name=pax]) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dishes { grid-template-columns: minmax(0, 1fr); }
  .complete-menu-header { gap: 14px; height: auto; min-height: 130px; padding-inline: var(--page-gutter); }
  .complete-menu-header .brand { width: min(190px, 45vw); flex-shrink: 0; }
  .complete-menu h1, .blog-index h1 { font-size: clamp(42px, 8vw, 60px); }
  .article-heading h1 { font-size: clamp(36px, 7vw, 48px); line-height: 1.16; }
  .article-body { width: calc(100% - 2 * var(--page-gutter)); }
  .blog-card-copy { padding: 24px; }
  .blog-card h3 { font-size: clamp(28px, 6vw, 34px); line-height: 1.2; }
  .contact form h3 { font-size: 30px; }
  .fbo-locations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbo-locations li { font-size: 23px; }
}

/* The new transparent logo uses its full canvas without cropping or stretching. */
header .brand .logo-frame,
footer .footer-brand .logo-frame {
  width: 100%;
  height: 100%;
  clip-path: none;
  overflow: visible;
}
header .brand .logo-frame img,
footer .footer-brand .logo-frame img {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
}
footer .footer-brand {
  display: block;
  height: auto;
  aspect-ratio: 1942 / 809;
  max-width: 100%;
}

/* Explicit time choices avoid native time-input validation issues. */
#order-form .flight-time { min-width: 0; margin: 0 0 17px; padding: 0; border: 0; }
#order-form .flight-time legend { padding: 0; margin-bottom: 7px; color: #e8f2fa; font-size: 15px; letter-spacing: .6px; }
#order-form .time-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#order-form .time-controls label { min-width: 0; margin-bottom: 0; font-size: 12px; letter-spacing: .3px; }
#order-form .time-controls select { margin-top: 5px; padding: 12px 8px; font-size: 16px; }