/* airport.css: /airport-transfers/ (P2, 02/11/2026).
 * After the photo stage: where we meet you (night, the terminals as large words and the door diagram drawn large),
 * how a pickup works (day, the arrival-hall photograph drifting beside a drawn timeline), the prices (celadon tiles),
 * flying private (a night statement band), guides and questions (day). Tokens and roles from base.css only. */

/* ============================== where we meet you (graphite) ============================== */
.airport-terminals .terminals { display: grid; gap: clamp(36px, 1.5rem + 2.4vw, 72px); }

/* the tabs: the terminal names set large on one hairline; the chosen one in mist with its own line drawn under it */
.aj-site .airport-terminals .terminal-seg {
  display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line); background: none; overflow: visible;
}
.aj-site .airport-terminals .terminal-seg > a {
  position: relative; flex: none; display: inline-flex; align-items: flex-end; height: auto; min-height: 44px; padding: 0 0 clamp(14px, 0.6rem + 0.6vw, 22px);
  border: 0; background: none !important; color: var(--mist-2); text-decoration: none;
  font-size: clamp(1.5rem, 0.95rem + 2.3vw, 3.5rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1;
  transition: color var(--dur-hover) var(--ease-out);
}
.aj-site .airport-terminals .terminal-seg > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--mist);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-hover) var(--ease-out);
}
.aj-site .airport-terminals .terminal-seg > a:hover { color: var(--mist); }
.aj-site .airport-terminals .terminal-seg > a:focus-visible { outline-offset: 3px; }
.aj-site .airport-terminals .terminal-seg > a:hover::after { transform: scaleX(0.35); }
.aj-site .airport-terminals .terminal-seg > a[aria-selected="true"] { color: var(--mist); font-weight: 500; }
.aj-site .airport-terminals .terminal-seg > a[aria-selected="true"]::after { transform: scaleX(1); }
@media (min-width: 1024px) {
  .aj-site .airport-terminals .terminal-seg { justify-content: flex-start; gap: clamp(40px, 5vw, 96px); }
}

/* the panel and the diagram: words in columns 1 to 5, the drawing in 6 to 12 */
.terminals-body { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
@media (min-width: 1024px) {
  .terminals-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .terminal-panels { grid-column: 1 / span 5; }
  .terminal-map { grid-column: 6 / -1; }
}
.terminal-panels { display: grid; gap: 72px; align-content: start; }
/* with JavaScript the panels share one cell and cross-fade, so the section never changes height */
.terminals.is-tabbed .terminal-panels { gap: 0; }
.terminals.is-tabbed .terminal-panel { grid-area: 1 / 1; transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out), visibility 0s; }
.terminals.is-tabbed .terminal-panel[hidden] { display: grid !important; visibility: hidden; opacity: 0; translate: 0 12px; transition: opacity 250ms var(--ease-out), translate 250ms var(--ease-out), visibility 0s linear 250ms; }
.terminal-panel { display: grid; gap: 32px; align-content: start; scroll-margin-top: 120px; }
.aj-site .terminal-panel .t-h3 { font-size: var(--fs-statement); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; max-width: 14ch; color: var(--mist); }
.terminal-steps { list-style: none; margin: 0; padding: 0; counter-reset: tstep; border-top: 1px solid var(--line); }
.terminal-steps > li {
  counter-increment: tstep; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line); font-size: 1.0625rem; line-height: 1.5; color: var(--mist);
}
.terminal-steps > li::before { content: counter(tstep, decimal-leading-zero) / ""; font-size: var(--fs-small); font-weight: 500; color: var(--mist-2); font-variant-numeric: tabular-nums; }
.terminal-tip { display: flex; gap: 12px; align-items: flex-start; max-width: 44ch; font-size: var(--fs-small); line-height: 1.5; color: var(--mist-2); }
.terminal-tip .icon { flex: none; margin-top: 1px; color: var(--mist-2); }

/* the diagram: a pine plate, 1px outlines, the chosen terminal filled mist */
.terminal-map { margin: 0; padding: clamp(20px, 0.5rem + 2.4vw, 56px); background: var(--pine); }
.terminal-map figcaption { margin-top: 24px; font-size: var(--fs-meta); color: var(--mist-2); }
.term-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.term-block { cursor: pointer; }
.term-block .term-box { fill: transparent; stroke: var(--mist-2); stroke-width: 1; transition: fill var(--dur-hover) var(--ease-out), stroke var(--dur-hover) var(--ease-out); }
.term-block:hover .term-box { stroke: var(--mist); }
.term-block.is-on .term-box { fill: var(--mist); stroke: var(--mist); }
.term-code { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; fill: var(--mist); transition: fill var(--dur-hover) var(--ease-out); }
.term-block.is-on .term-code { fill: var(--ink); }
.term-doors { font-size: 16px; font-weight: 500; fill: var(--mist-2); transition: fill var(--dur-hover) var(--ease-out); }
.term-block.is-on .term-doors { fill: var(--mist); }
.term-ticks { fill: none; stroke: var(--mist-2); stroke-width: 1; }
.term-block.is-on .term-ticks { stroke: var(--mist); }
.term-link { fill: none; stroke: var(--mist-2); stroke-width: 1; }
.term-shuttle { fill: none; stroke: var(--mist-2); stroke-width: 1; stroke-dasharray: 4 5; }
.term-note { font-size: 15px; font-weight: 500; fill: var(--mist-2); }
/* drawn in: the outlines stroke in block by block, then the words and the shuttle fade up */
.term-block:nth-of-type(2) { --rd: 90ms; } .term-block:nth-of-type(3) { --rd: 180ms; }
.term-block:nth-of-type(4) { --rd: 270ms; } .term-block:nth-of-type(5) { --rd: 360ms; }
html.mo .term-svg:not(.is-done) :is(text, .term-shuttle) { transition: opacity 900ms var(--ease-out) 700ms, fill 700ms var(--ease-out) 1100ms; }
html.mo .term-svg:not(.is-in) :is(text, .term-shuttle) { opacity: 0; }
html.mo .term-svg:not(.is-in) .term-block.is-on .term-box { fill: transparent; }
html.mo .term-svg.is-in:not(.is-done) .term-block .term-box { transition: fill 700ms var(--ease-out) 1100ms, stroke var(--dur-hover) var(--ease-out), stroke-dashoffset 1100ms var(--ease-in-out) var(--rd, 0ms); }
/* phones: the drawing is about half size, so the type and strokes are set twice as large */
@media (max-width: 719px) {
  .term-code { font-size: 36px; } .term-doors { font-size: 22px; } .term-note { font-size: 20px; }
  .term-box, .term-ticks, .term-link, .term-shuttle { stroke-width: 2; }
  .term-shuttle { stroke-dasharray: 8 10; }
}
.airport-terminals .source-line { margin-top: clamp(40px, 2rem + 1vw, 64px); }

/* ============================== how a Changi pickup works (porcelain) ============================== */
.land-body { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
.land-frame { position: relative; overflow: clip; aspect-ratio: 1 / 1; background: var(--sunken); }
.land-frame > .land-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .land-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .land-photo { grid-column: 1 / span 6; }
  .land-frame { aspect-ratio: 4 / 5; max-height: 780px; width: 100%; }
  .land-track { grid-column: 8 / -1; }
}
/* the track runs down beside the photograph at every width: the line draws from the top */
.aj-site .airport-land .land-track { --tr-m: 64px; --draw-x: 1; --draw-y: 0; grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 1.8rem + 1.6vw, 64px); }
.aj-site .airport-land .land-track::before { left: calc(var(--tr-m) / 2); right: auto; top: calc(var(--tr-m) / 2); bottom: calc(var(--tr-m) / 2); width: 1px; height: auto; }
.aj-site .airport-land .land-track > li { grid-template-columns: var(--tr-m) minmax(0, 1fr); grid-template-areas: "ic n" "ic when" "ic v"; column-gap: clamp(20px, 1rem + 1vw, 36px); row-gap: 8px; }
.aj-site .airport-land .land-track > li::before { margin-top: 2px; }
html.mo .aj-site .airport-land .land-track[data-reveal="draw"]:not(.is-in)::before { transform: scale(1, 0); }
.airport-land .tr-when { font-size: var(--fs-index); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.airport-land .tr-v { max-width: 38ch; }
@media (max-width: 719px) { .aj-site .airport-land .land-track { --tr-m: 52px; } }

/* ============================== prices (celadon) ============================== */
.aj-site .airport-more .pt-v { font-size: clamp(2.5rem, 1.1rem + 4.2vw, 5.25rem); letter-spacing: -0.045em; }
.airport-more .pt-k { font-size: var(--fs-small); }
.airport-more .rates-foot { margin-top: clamp(40px, 2rem + 1.5vw, 72px); }
.airport-more .rates-foot p { font-size: var(--fs-lede); line-height: 1.5; max-width: 40ch; }

/* ============================== flying private (graphite statement band) ============================== */
.private-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 2rem + 4vw, 112px); }
.aj-site .private-statement {
  margin: 0; max-width: 19ch; font-size: clamp(2.5rem, 0.9rem + 6.6vw, 7rem); font-weight: 400; line-height: 1; letter-spacing: -0.045em;
  color: var(--mist); text-wrap: balance;
}
.private-go {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px;
  border-top: 1px solid var(--line); color: var(--mist); text-decoration: none;
}
.private-go-t { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; transition: transform var(--dur-hover) var(--ease-out); }
.private-go:is(:hover, :focus-visible) .private-go-t { transform: translateX(12px); }
@media (min-width: 1024px) {
  .private-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .private-statement { grid-column: 1 / span 10; }
  .private-go { grid-column: 7 / -1; }
}
@media (prefers-reduced-motion: reduce) { .private-go-t, .terminal-panel { transition: none; } }

/* ============================== guides and questions (porcelain) ============================== */
/* opened like every other section: a hairline across the top, the two headings at H2 size with their links under them,
   the feature guide at statement size, the other guides as titled rows (the same treatment as /chauffeur-by-the-hour/) */
.airport-guides .guides-grid { row-gap: clamp(64px, 3rem + 3vw, 112px); }
.airport-guides .guides-grid > * { padding-top: clamp(24px, 1rem + 1vw, 40px); border-top: 1px solid var(--line); }
.aj-site .airport-guides :is(.guides-head, .faq-col-head) { display: grid; justify-items: start; gap: 14px; margin-bottom: clamp(32px, 1.5rem + 2vw, 64px); }
.aj-site .airport-guides :is(.guides-head, .faq-col-head) > .t-h3 { margin: 0; font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.aj-site .airport-guides .guide-row.is-feature { padding: clamp(32px, 1.5rem + 1vw, 48px) 0; }
.aj-site .airport-guides .guide-row.is-feature .guide-title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.08; max-width: 18ch; }
.aj-site .airport-guides .guide-row:not(.is-feature) .guide-title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; }
@media (min-width: 1024px) {
  .airport-guides .guides-grid > :first-child { grid-column: 1 / span 6; }
  .airport-guides .guides-grid > :nth-child(2) { grid-column: 8 / -1; }
}

/* ============================== the stage on phones and tablets ============================== */
/* under 1024 the H1 and the lede sit in the middle of the photograph, where the stage's own scrim is clear; over this
   page's bright photograph they lost contrast. A one-colour pine wash that deepens towards the sheet keeps them on pine. */
@media (max-width: 1023px) {
  .aj-site.page-airport .mh.has-booking .mh-scrim {
    background: linear-gradient(to bottom, var(--scrim-t) 0, color-mix(in srgb, var(--pine) 50%, transparent) 28%, color-mix(in srgb, var(--pine) 70%, transparent) 60%, var(--scrim-b) 82%, var(--pine) 100%);
  }
}