/*
 * Tess Chauffeur Services — Standalone Page Template
 *
 * Preview entrypoint and standalone shell for the reusable Tess page template.
 * Deliberately isolates preview-only behavior from the production shell:
 *   - imports tokens.css, reset.css, and shared semantic-blocks.css
 *   - retains only preview shell, demo, and specialized preview art rules
 *   - does not load shell.css, status.css, or il-matrix.css
 *   - preview-only changes here cannot leak into production pages
 *
 * Authority: docs/tess/DESIGN_SYSTEM.md (no invented foundational values).
 * Naming and parts contract: docs/tess/TEMPLATE_PARTS.md
 *
 * LOCKED-IN DECISIONS (user-approved 2026-09-09, permanent - do not change):
 * - Shell header: 13px ink nav links (route hover), compact 36px
 *   "Book with Tess" CTA (44px on mobile), nav links hidden <=640
 * - Local sub-nav: graduated label flips (1220/1072/1026/930/870/754/659),
 *   horizontal scroll strip, hamburger disclosure <=640 with current section
 * - Breadcrumb bar: border-top AND border-bottom; CTA visible only while
 *   stuck; 44px mobile hit area via overlay
 * - Footer: brand block spans its grid column; NAP block with phone + email;
 *   links stack one per line
 * - Hero art: unified zone contract (CORRECTED 2026-09-09: zone centers art
 *   by default; stretch-with-padding is an explicit frontmatter opt-in
 *   (artStretch) used by the Corporate relay; persistence band + hidden
 *   <=640 unchanged); actions 48px below paragraph;
 *   cred 26px below promise; trust cue centered under buttons, hero-only
 * - Closing CTA: title case title, Book with Tess + Talk to us buttons
 * - FAQ heading: "A few things worth knowing before you book with Tess"
 *   at the shared-polish size (opening-lead token), matching production
 * - Section system: tp-section--{plain|soft|dark} x tp-layout--{split|
 *   stacked|mirror|bloc|statement|bridge}; coda + anchor bounded parts;
 *   catalog labels remain preview-only
 * - Accessibility: skip link, focus-visible rings, touch targets
 * - Footer legal row beside copyright; null URLs render as plain text
 * - Section divider On/Off exposed in CMS; statement sections require
 *   anchor (build check via requireStatementAnchor on the legacy
 *   sections[] path only)
 * - Hero background image: bounded strength/veil/position selects
 * - Polish principles: copy carries the page but not flat; new visual
 *   cues are bounded variants decided against real content (TEMPLATE_
 *   PARTS.md §9)
 * - Naming contract: docs/tess/TEMPLATE_PARTS.md (names frozen)
 *
 * FILE MAP (this file holds the preview shell and preview-only art; all
 * block styling lives in semantic-blocks.css, imported below):
 *   §1 Shell (template-local header/footer)   .tp-header / .tp-footer
 *   §2c Local sub-navigation                  .tp-local-nav*
 *   §4 Breadcrumb / booking action bar        .tp-breadcrumb*
 *   §6 On-page TOC band                       .tp-toc*
 *   §6b Legacy arrival-points table + boundary, hero art (flight track,
 *       FBO track, demo relay), catalog labels
 */

@import url('tokens.css');
@import url('reset.css');
@import url('semantic-blocks.css');

/* ===========================================================================
   §1 SHELL (template-local header/footer; minimal, Tess grammar)
=========================================================================== */

body.tp {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-family);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 640px) {
  body.tp { font-size: var(--body-size-mobile); }
}

/* Production shared-polish type scale: base.njk puts data-shared-polish on
   every page except Home, which raises body copy to 19px/17px and FAQ answers
   to 18px/16px. The template mirrors it so a preview matches the production
   page it replaces (owner instruction 2026-09-25: match the approved
   /airport-transportation/ page). Home keeps the base 17px/15px scale. */
body.tp[data-shared-polish] {
  --body-size: 19px;
  --body-size-mobile: 17px;
  --faq-answer-size: 18px;
  --faq-answer-size-mobile: 16px;
}

.tp-catalog-label {
  margin: 0;
  padding: 12px var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--route-dark);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
}


.tp-skip-link {
  position: absolute;
  left: var(--gutter);
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  text-decoration: none;
  transform: translateY(-200%);
}

.tp-skip-link:focus-visible {
  transform: translateY(0);
}

/* Header: normal flow, not sticky (Tess shell contract); Homepage exception below (owner 2026-10-02) */
/* Home alert bar (owner 2026-10-14): one charcoal line above the header, worded and switched in Pages CMS. */
.tp-alert { background: var(--night-surface-tbd); color: var(--night-ink); }
.tp-alert[hidden] { display: none; }
.tp-alert__inner { display: flex; align-items: center; justify-content: center; position: relative; min-height: 40px; }
.tp-alert__text { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: .02em; text-align: center; padding: 10px 36px; }
.tp-alert__close { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 32px; height: 32px; margin-right: -10px; display: grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; opacity: .75; }
.tp-alert__close:hover, .tp-alert__close:focus-visible { opacity: 1; }
.tp-alert__close:focus-visible { outline: 2px solid var(--night-ink); outline-offset: 2px; }

.tp-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

/* Homepage only (owner 2026-10-02): the approved header stays at the top while scrolling, keyed to the
   Home map hero part, not a route. Other pages keep the normal-flow header and their sticky breadcrumb bar.
   Phones hide it while scrolling down and bring it back on any scroll up (home.js). */
body:has(.tp-home-hero) .tp-header { position: sticky; top: 0; z-index: 40; transition: transform .3s ease, box-shadow .3s ease; }
body:has(.tp-home-hero) .tp-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(21,23,22,.06); }
@media (max-width: 640px) { body:has(.tp-home-hero) .tp-header.is-hidden { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { body:has(.tp-home-hero) .tp-header { transition: none; } }

.tp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

@media (max-width: 640px) {
  .tp-header__inner { height: var(--header-h-mobile); }
}

.tp-header__brand {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--footer-brand-size);
  font-weight: var(--footer-brand-weight);
  letter-spacing: var(--footer-brand-ls);
  color: var(--ink);
}

/* Phone: when the full name cannot fit beside the menu and Book controls,
   it wraps between words onto a second line instead of being cut off. */
@media (max-width: 640px) {
  .tp-header__brand {
    white-space: normal;
    overflow: visible;
  }
}

/* Header nav links use production shell sizing; see the block above. */
.tp-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.tp-header__link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--ink);
}

.tp-header__link:hover,
.tp-header__link:focus-visible { color: var(--route); }

.tp-button.tp-header__cta {
  min-height: 36px;
  padding: 0 16px;
  font-size: 11px;
  margin-left: 8px;
  white-space: nowrap;
}

/* Call Tess in the header (owner 2026-10-15): bold number with a small phone on wide screens; on phones the same
   link becomes an orange-outlined phone button beside Book. The phone is Google's Material "call" icon. */
.tp-header__phone { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; text-decoration: none; }
.tp-header__phone svg { width: 14px; height: 14px; flex: 0 0 auto; fill: currentColor; }
.tp-header__phone:hover { color: var(--route); }

.tp-header__cta-label-short { display: none; }

@media (max-width: 640px) {
  .tp-button.tp-header__cta {
    min-height: 44px;
    padding: 0 12px;
    font-size: 11px;
  }

  .tp-header__cta-label-full { display: none; }
  .tp-header__cta-label-short { display: inline; }
}

.tp-header__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--menu-control);
  height: var(--menu-control);
  flex: 0 0 auto;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0;
}

@media (max-width: 640px) {
  .tp-button.tp-header__cta {
    min-height: 44px;
    padding: 0 12px;
    font-size: 11px;
  }
}

@media (max-width: 760px) {
  .tp-header__phone { justify-content: center; width: var(--menu-control); height: var(--menu-control); margin-left: 0; border: 1px solid var(--action); background: var(--paper); color: var(--action); }
  .tp-header__phone:hover { color: var(--action-hover); border-color: var(--action-hover); }
  .tp-header__phone svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
  .tp-header__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tp-header__phone + .tp-header__cta { margin-left: 0; }
}
/* With the full menu still showing, Book is the desktop height; the call button matches it. */
@media (max-width: 760px) and (min-width: 641px) {
  .tp-header__phone { width: 36px; height: 36px; margin-left: 12px; }
  .tp-header__phone svg { width: 19px; height: 19px; }
}

/* Mobile: brand + CTA stay on the bar; links move into a hamburger dropdown
   (same disclosure pattern as the local sub-nav). The CTA never stacks. */
@media (max-width: 640px) {
  .tp-header__nav {
    display: none;
    position: absolute;
    top: var(--header-h-mobile);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .tp-header__nav.is-open { display: flex; }

  .tp-header__link {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }

  .tp-header__menu { display: flex; }

  .tp-header__cta {
    order: 3;
    min-height: 44px;
    padding: 0 12px;
    font-size: 11px;
  }
}

/* ---------------------------------------------------------------------------
   §2c Local sub-navigation: production shell behavior, template namespace.
   Horizontal scroll strip; graduated label flips per stepClass; hamburger
   disclosure with current-section toggle below 640px.
--------------------------------------------------------------------------- */

.tp-local-nav {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.tp-local-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 18px 0;
  scrollbar-width: none;
}

.tp-local-nav__list::-webkit-scrollbar { display: none; }

.tp-local-nav__link {
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}

.tp-local-nav__label-short { display: none; }

@media (max-width: 1220px) {
  .tp-flip--1220 .tp-local-nav__label-full { display: none; }
  .tp-flip--1220 .tp-local-nav__label-short { display: inline; }
}
@media (max-width: 1072px) {
  .tp-flip--1072 .tp-local-nav__label-full { display: none; }
  .tp-flip--1072 .tp-local-nav__label-short { display: inline; }
}
@media (max-width: 1026px) {
  .tp-flip--1026 .tp-local-nav__label-full { display: none; }
  .tp-flip--1026 .tp-local-nav__label-short { display: inline; }
}
@media (max-width: 930px) {
  .tp-flip--930 .tp-local-nav__label-full { display: none; }
  .tp-flip--930 .tp-local-nav__label-short { display: inline; }
}
@media (max-width: 870px) {
  .tp-flip--870 .tp-local-nav__label-full { display: none; }
  .tp-flip--870 .tp-local-nav__label-short { display: inline; }
}
@media (max-width: 754px) {
  .tp-flip--754 .tp-local-nav__label-full { display: none; }
  .tp-flip--754 .tp-local-nav__label-short { display: inline; }
}
@media (max-width: 659px) {
  .tp-flip--659 .tp-local-nav__label-full { display: none; }
  .tp-flip--659 .tp-local-nav__label-short { display: inline; }
}

@media (max-width: 1200px) {
  .tp-local-nav__list { gap: 22px; }
}

.tp-local-nav__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
}

.tp-local-nav__toggle-icon { flex: 0 0 auto; }

.tp-local-nav__toggle-label { font-weight: 700; }

@media (max-width: 640px) {
  .tp-local-nav__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 14px;
    white-space: normal;
  }

  .tp-local-nav__list.is-open { display: flex; }

  .tp-local-nav__list li { padding: 0; }

  .tp-local-nav__link {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
  }

  .tp-local-nav__toggle { display: flex; }
}

.tp-local-nav__link:hover,
.tp-local-nav__link:focus-visible { color: var(--route); }

.tp-local-nav__link[aria-current="page"] {
  color: var(--route);
  border-bottom-color: var(--route);
}

/* Footer: Airport canonical metrics */
.tp-footer {
  padding: var(--footer-padding);
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

.tp-footer__grid {
  display: grid;
  grid-template-columns: var(--columns);
  gap: var(--footer-grid-gap);
}

.tp-footer__brand-block {
  grid-column: var(--footer-brand-col);
}

.tp-footer__brand {
  font-size: var(--footer-brand-size);
  font-weight: var(--footer-brand-weight);
  letter-spacing: var(--footer-brand-ls);
  margin: var(--footer-col-heading-margin);
}

.tp-footer__address {
  font-size: var(--footer-address-size);
  line-height: var(--footer-address-lh);
  font-style: normal;
  color: var(--muted);
}

.tp-footer__contact-link {
  color: var(--muted);
}

.tp-footer__contact-link:hover,
.tp-footer__contact-link:focus-visible { color: var(--ink); }

.tp-footer__col--explore { grid-column: var(--footer-explore-col); }
.tp-footer__col--plan { grid-column: var(--footer-plan-col); }

.tp-footer__heading {
  font-size: var(--footer-col-heading-size);
  letter-spacing: var(--footer-col-heading-ls);
  text-transform: uppercase;
  font-weight: 400;
  margin: var(--footer-col-heading-margin);
  color: var(--muted);
}

.tp-footer__link {
  display: block;
  align-self: start;
  padding: 0;
  font-size: var(--footer-link-size);
  line-height: var(--footer-link-lh);
  color: var(--ink);
}

.tp-footer__link + .tp-footer__link { margin-top: 2px; }

.tp-footer__link:hover,
.tp-footer__link:focus-visible { color: var(--route); }

.tp-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--footer-bottom-gap);
  margin: var(--footer-bottom-margin);
  padding: var(--footer-bottom-pad);
  border-top: 1px solid rgba(21, 23, 22, .08);
  font-size: var(--footer-link-size);
  color: var(--muted);
}

.tp-footer__legal-missing {
  display: block;
  padding: 6px 0;
  font-size: var(--footer-link-size);
  line-height: var(--footer-link-lh);
  color: var(--muted);
}

.tp-footer__tagline {
  margin: var(--footer-brand-margin);
  font-size: var(--footer-address-size);
  line-height: var(--footer-address-lh);
  color: var(--ink);
}

.tp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.tp-footer__legal a:hover,
.tp-footer__legal a:focus-visible { color: var(--ink); }

@media (max-width: 640px) {
  .tp-footer { padding: var(--footer-padding-mobile); }
  .tp-footer__brand-block { grid-column: 1 / -1; }
  /* The two link groups fit side by side down to 320px (owner 2026-10-08). */
  .tp-footer__col--explore { grid-column: 1 / 7; }
  .tp-footer__col--plan { grid-column: 7 / 13; }
  .tp-footer__col--explore,
  .tp-footer__col--plan { margin-top: var(--footer-group-top-mobile); }
  .tp-footer__bottom { flex-direction: column; }
}


.tp-hero__art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  overflow: hidden;
}

/* Fill mode: art stretches across the padded range (Corporate relay). */
.tp-hero__visual--stretch .tp-hero__art {
  align-items: stretch;
  padding-top: calc(var(--hero-label-size) * var(--hero-label-lh) + var(--hero-label-margin));
  padding-bottom: var(--hero-support-band, 193px);
}

/* FBO hero art: right rail, 4 numbered ground-transport stages.
   Centers vertically in the template's art zone (which carries the
   promise-following padding); the track keeps its own 430px height and
   scales down on narrow viewports instead of holding a fixed stage. */
.tp-fbo-track {
  position: relative;
  width: min(100%, 300px);
  height: 430px;
  margin: auto 0 auto auto;
  align-self: center;
  border-left: 1px solid var(--line);
}

.tp-fbo-track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 13%;
  bottom: 13%;
  width: 1px;
  background: var(--route);
  opacity: .55;
}

@media (max-width: 760px) and (min-width: 641px) {
  .tp-fbo-track { height: 360px; }
}

@media (max-width: 640px) {
  .tp-fbo-track { height: 300px; }
}

.tp-fbo-track__node {
  position: absolute;
  left: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(61, 103, 98, .65);
  background: var(--paper);
  z-index: 2;
}

.tp-fbo-track__node--one { top: 9%; }
.tp-fbo-track__node--two { top: 42%; }
.tp-fbo-track__node--three { top: 75%; }
.tp-fbo-track__node--four { bottom: 8%; }

.tp-fbo-track__stage {
  position: absolute;
  left: 22px;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.tp-fbo-track__stage--a { top: 7%; }
.tp-fbo-track__stage--b { top: 40%; }
.tp-fbo-track__stage--c { top: 73%; }
.tp-fbo-track__stage--d { bottom: 6%; }

.tp-fbo-track__stage strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}

.tp-fbo-track__micro {
  position: absolute;
  left: 22px;
  top: 23%;
  max-width: 210px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
}

/* Airport hero art: vertical flight track — line, nodes, codes, plane, list. */
.tp-flight-track {
  position: relative;
  width: 100%;
  height: 78%;
  min-height: 400px;
}

.tp-flight-track::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 1px;
  background: var(--line);
}

.tp-flight-track__line {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 2px;
  height: 84%;
  transform: translateX(-50%);
  background: linear-gradient(
    var(--route) 0 31%,
    var(--line) 31% 42%,
    var(--route) 42% 72%,
    var(--line) 72% 83%,
    var(--route) 83%
  );
}

.tp-flight-track__node {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid var(--route);
  background: var(--paper);
}

.tp-flight-track__node--one { top: 7%; }
.tp-flight-track__node--two { top: 48%; }
.tp-flight-track__node--three { bottom: 7%; }

.tp-flight-track__code {
  position: absolute;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.tp-flight-track__code--a { top: 4%; right: 56%; }
.tp-flight-track__code--b { top: 45%; left: 56%; }
.tp-flight-track__code--c { bottom: 4%; right: 56%; }

.tp-flight-track__plane {
  position: absolute;
  left: calc(50% - 11px);
  top: 30%;
  width: 22px;
  height: 22px;
  color: var(--route-dark);
  transform: rotate(90deg);
}

.tp-flight-track__plane svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.tp-flight-track__micro {
  position: absolute;
  right: 0;
  bottom: 15%;
  width: 120px;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tp-demo-relay {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 18px 0 18px 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.tp-demo-relay::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50px;
  width: 1px;
  background: var(--line);
}

.tp-demo-relay span {
  position: relative;
  padding-left: 70px;
  color: var(--muted);
  font-size: 12px;
  line-height: var(--eyebrow-lh);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}

.tp-demo-relay span::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 21px;
  height: 21px;
  border: 2px solid var(--route);
  border-radius: 50%;
  background: var(--paper);
  transform: translateY(-50%);
}

.tp-demo-relay--tess {
  color: var(--ink);
}

.tp-demo-relay--tess::before {
  background: var(--route);
  border-color: var(--route-dark);
}

.tp-demo-relay i {
  width: 1px;
  min-height: 40px;
  margin-left: 50px;
  background: var(--route);
}

@media (max-width: 760px) {
  .tp-demo-relay::before { left: 20px; }
  .tp-demo-relay span { padding-left: 40px; }
  .tp-demo-relay i { margin-left: 20px; min-height: 48px; }
}

/* Hero drawings scale with the art column's width, not the hero's height, so every page shows them at one size (owner 2026-10-13: Airport's labels read smaller than FBO's). Centered on the copy; where a short hero cannot hold it, it shrinks only enough to stay within the hero padding. */
.tp-hero__visual > img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: calc(100% + 96px);
  object-fit: contain;
  transform: translateY(-50%);
}

/* Optional image atmosphere state */
.tp-hero--image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
}

.tp-hero--image::before,
.tp-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tp-hero--image::before {
  z-index: -2;
  background-image: var(--tp-hero-image);
  background-size: cover;
  background-position: var(--tp-hero-image-position, center);
  opacity: var(--tp-hero-image-opacity, .5);
  filter: grayscale(1) contrast(1.05);
}

.tp-hero--image::after {
  z-index: -1;
  background: color-mix(in srgb, var(--paper) var(--tp-hero-image-veil, 58%), transparent);
}


/* ===========================================================================
   §4 BREADCRUMB / BOOKING ACTION BAR (sticky at viewport top once reached)
=========================================================================== */

.tp-breadcrumb {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--breadcrumb-h);
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .tp-breadcrumb { height: var(--breadcrumb-h-mobile); }
}

.tp-breadcrumb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

/* Every separator is its own list item, so the path gap spaces all arrows
   evenly; items never break inside a label. */
.tp-breadcrumb__path {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.tp-breadcrumb__path a,
.tp-breadcrumb__path li {
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  white-space: nowrap;
}

.tp-breadcrumb__action { flex: 0 0 auto; }

/* Phone: a trail too long for one row (e.g. three levels beside the stuck
   Book action) wraps whole items onto a second left-aligned row; the bar
   grows from its 44px minimum instead of stacking labels inside it. Links
   keep their 8px hit area without adding row height. */
@media (max-width: 640px) {
  .tp-breadcrumb {
    display: flex;
    align-items: center;
    height: auto;
    min-height: var(--breadcrumb-h-mobile);
  }

  .tp-breadcrumb__path {
    flex-wrap: wrap;
    padding: 8px 0;
  }

  .tp-breadcrumb__path li { padding: 0; }
  .tp-breadcrumb__path a { margin: -8px 0; }
}

.tp-breadcrumb__link:hover,
.tp-breadcrumb__link:focus-visible { color: var(--ink); }

.tp-breadcrumb__current { color: var(--ink); }

.tp-breadcrumb__action {
  display: none;
  min-height: var(--breadcrumb-action-h);
  padding: 0 14px;
  font-size: 11px;
  gap: 0;
}

.tp-breadcrumb.is-stuck .tp-breadcrumb__action {
  display: inline-flex;
}

.tp-breadcrumb__label-full { display: inline; }
.tp-breadcrumb__label-short { display: none; }

@media (max-width: 640px) {
  .tp-breadcrumb__action {
    min-height: var(--breadcrumb-action-h-mobile);
    font-size: 11px;
    position: relative;
  }

  .tp-breadcrumb__action::after {
    content: "";
    position: absolute;
    top: -9px;
    bottom: -9px;
    left: -12px;
    right: -12px;
  }

  .tp-breadcrumb__label-full { display: none; }
  .tp-breadcrumb__label-short { display: inline; }
}


/* ===========================================================================
   §6 ON-PAGE TOC BAND (optional): Airport's editorial bridge on a paper-2 band
=========================================================================== */

.tp-toc {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  padding: 36px 0;
}

.tp-toc__title {
  grid-column: 1 / 3;
  margin: 0;
  font-size: var(--marker-size);
  line-height: var(--marker-lh);
  letter-spacing: var(--marker-ls);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}

.tp-toc__list {
  grid-column: 4 / 13;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 34px;
}

.tp-toc__list a {
  display: grid;
  padding: 13px 0;
  font-size: 12px;
  line-height: 1.35;
  border-top: 1px solid var(--line);
}

.tp-toc__list li:nth-last-child(-n+2) a { border-bottom: 1px solid var(--line); }

.tp-toc__label:hover,
.tp-toc__label:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* TOC band: two columns persist through the tablet band, collapse at 640. */
@media (max-width: 760px) and (min-width: 641px) {
  .tp-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tp-toc { padding: 28px 0; }
  .tp-toc__title,
  .tp-toc__list { grid-column: 1 / -1; }
  .tp-toc__title { margin-bottom: 20px; }
  .tp-toc__list { grid-template-columns: 1fr; }
  .tp-toc__list a { font-size: 11px; }
  .tp-toc__list li:nth-last-child(-n+2) a { border-bottom: 0; }
  .tp-toc__list li:last-child a { border-bottom: 1px solid var(--line); }
}


/* ---------------------------------------------------------------------------
   §6b ARRIVAL-POINTS TABLE (optional): airport's three-row FBO table on a
   soft field — head left, rows right.
--------------------------------------------------------------------------- */

.tp-arrival-points {
  background: var(--paper-2);
}

.tp-arrival-points__head { grid-column: 1 / 6; }

.tp-arrival-points__title {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 700;
}

.tp-arrival-points__lead {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.tp-arrival-points__table { grid-column: 6 / 13; }

.tp-arrival-points__row {
  display: grid;
  grid-template-columns: 72px 1.2fr 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.tp-arrival-points__row:last-child { border-bottom: 1px solid var(--line); }

.tp-arrival-points__code {
  font-size: 13px;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--route-dark);
}

.tp-arrival-points__name { font-size: 15px; line-height: 1.5; }

.tp-arrival-points__fbo { font-size: 13px; color: var(--muted); }

.tp-arrival-points__note {
  grid-column: 1 / -1;
  margin: 34px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Closing note sits beneath the table block as a section-closing line
   (canonical placement), not inside the row grid. */
.tp-arrival-points__note--inlist { display: none; }

.tp-arrival-points__note--closing {
  margin: 18px 0 0;
  grid-column: auto;
}

@media (max-width: 760px) {
  .tp-arrival-points__head,
  .tp-arrival-points__table,
  .tp-arrival-points__note { grid-column: 1 / -1; }
  .tp-arrival-points__head { margin-bottom: 24px; }
}

@media (max-width: 640px) {
  .tp-arrival-points__row { grid-template-columns: 56px 1fr; gap: 12px; }
  .tp-arrival-points__fbo { grid-column: 2; }
}

/* Boundary layout (tp-layout--boundary) lives in semantic-blocks.css so the
   shared renderer owns it; the preview shell no longer carries a copy. */


/* Coda strip variant: route rule with two labels */
.tp-coda {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--grid-gap);
  margin-top: var(--hero-label-margin);
  padding: var(--marker-top) 0;
  border-top: 1px solid var(--route);
  border-bottom: 1px solid var(--route);
}

.tp-coda span {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
}

.tp-coda i {
  height: 1px;
  background: var(--route);
}

@media (max-width: 760px) {
  .tp-coda { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .tp-coda { grid-template-columns: 1fr; }
}

/* Owner logo (2026-10-02): height-led, width follows the artwork. */
.tp-logo { display: block; width: auto; height: var(--logo-h-header); }
.tp-footer__brand .tp-logo { height: var(--logo-h-footer); }
@media (max-width: 640px) {
  .tp-header__brand .tp-logo { height: var(--logo-h-header-mobile); }
}