/* The agency page, part "finale": the departures board above the airfield. The section, its head, its two calls, the
   board's panel and the motto are the landing kit's (theme/assets/css/kit.css: section.k-finale, .k-eyebrow,
   .k-finale-h, .k-finale-sub, .k-btns, .k-finale-art, .k-navy-card, .k-motto); this file holds the board's rows and
   the airfield. The section is night in both themes, like the homepage's apron, so its colours are fixed rather than
   theme tokens. Every rule is scoped to .pg-agencies and every class of its own starts with lc-fin-. */

.pg-agencies .lc-fin{--lc-fin-li:#5BA3E8; --lc-fin-em:#F09A4E; --lc-fin-amber:#F2C46B; --lc-fin-ok:#8FE0B5}
.pg-agencies .lc-fin input:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- the board ---------------------------------------------------------------------------------- */
.pg-agencies .lc-fin-board{
  --cols:128px minmax(0,1fr) 148px 176px;
  position:relative;z-index:2;max-width:920px;margin:0 auto;padding:16px 20px 0;
}
.pg-agencies .lc-fin-board figcaption{display:flex;align-items:center;gap:14px;padding:2px 0 14px}
.pg-agencies .lc-fin-ttl{display:inline-flex;align-items:center;gap:9px;font:600 14px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--lc-fin-amber)}
.pg-agencies .lc-fin-ttl svg{width:18px;height:18px;transform:rotate(-30deg)}
.pg-agencies .lc-fin-ag{display:inline-flex;align-items:center;gap:7px;font:400 12px/1 var(--mono);letter-spacing:.08em;color:#8d93c4}
.pg-agencies .lc-fin-ag svg{display:block;flex:none;width:16px;height:16px}
.pg-agencies .lc-fin-board .k-sample{margin-left:auto}
.pg-agencies .lc-fin-cols,.pg-agencies .lc-fin-row{display:grid;grid-template-columns:var(--cols);gap:14px;align-items:center}
.pg-agencies .lc-fin-cols{padding:0 8px 8px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7d84b8}
.pg-agencies .lc-fin-row{padding:7px 8px;border-top:1px solid #1d2147;transition:background .4s,box-shadow .4s}
.pg-agencies .lc-fin-row.lc-fin-now{border-radius:10px;border-top-color:transparent;background:rgba(242,196,107,.075);box-shadow:inset 0 0 0 1px rgba(242,196,107,.24)}
.pg-agencies .lc-fin-row.lc-fin-now+.lc-fin-row{border-top-color:transparent}
/* a flap field: plain text without the script, split-flap cells with it */
.pg-agencies .lc-fin-f{display:flex;min-width:0;font:600 15px/28px var(--mono);letter-spacing:.3em;color:#f4f1e6;white-space:pre}
.pg-agencies .lc-fin-cs{display:flex;gap:2px}
.pg-agencies .lc-fin-c{
  position:relative;display:grid;place-items:center;width:19px;height:28px;border-radius:3px;
  background:linear-gradient(180deg,#252a55 0 49.5%,#1b1e40 50.5% 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 rgba(0,0,0,.35);
  font:600 15px/1 var(--mono);letter-spacing:0;color:inherit;
}
.pg-agencies .lc-fin-c:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#090b1a}
.pg-agencies .lc-fin-c.lc-fin-flip{color:#b9b5aa}
.pg-agencies .lc-fin-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pg-agencies .lc-fin-via{display:flex;flex-wrap:wrap;gap:4px}
.pg-agencies .lc-fin-via i{padding:4px 7px;border-radius:6px;font:500 11px/1 var(--mono);font-style:normal}
.pg-agencies .lc-fin-li{color:#7DB6EE;background:color-mix(in srgb,var(--lc-fin-li) 15%,transparent)}
.pg-agencies .lc-fin-em{color:#F3AE6E;background:color-mix(in srgb,var(--lc-fin-em) 15%,transparent)}
.pg-agencies .lc-fin-dep .lc-fin-st{color:var(--lc-fin-ok)}
.pg-agencies .lc-fin-now .lc-fin-st{color:var(--lc-fin-amber)}
.pg-agencies .lc-fin-brd .lc-fin-st{color:#c9d2ff}
@media (prefers-reduced-motion:no-preference){
  .pg-agencies .lc-fin-now .lc-fin-st .lc-fin-cs{animation:lc-fin-blink 1.6s steps(1,end) infinite}
}
@keyframes lc-fin-blink{0%,70%{opacity:1}71%,100%{opacity:.4}}
/* the visitor's own row */
.pg-agencies .lc-fin-in{display:grid;grid-template-columns:auto minmax(0,300px) auto;align-items:center;justify-content:start;gap:8px 16px;margin:10px -20px 0;padding:14px 28px 16px;border-top:1px solid #1d2147;border-radius:0 0 18px 18px;background:rgba(9,11,28,.55)}
.pg-agencies .lc-fin-in label{font:500 14px/1.3 var(--sans);color:#c9ccf0}
.pg-agencies .lc-fin-in input{width:100%;height:42px;padding:0 14px;border:1px solid #343a70;border-radius:10px;background:#0b0e22;color:#fff;font:600 15px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;caret-color:var(--lc-fin-amber)}
.pg-agencies .lc-fin-in input::placeholder{color:#6d74aa;letter-spacing:.06em}
.pg-agencies .lc-fin-in input:hover{border-color:#4a518f}
.pg-agencies .lc-fin-in small{font:400 12.5px/1.3 var(--sans);color:#8d93c4}

/* ---- the airfield --------------------------------------------------------------------------------- */
.pg-agencies .lc-fin-air{position:relative;z-index:1;max-width:1680px;margin:-34px auto 0;overflow:hidden;pointer-events:none}
.pg-agencies .lc-fin-stage{position:relative;aspect-ratio:1440/510}
.pg-agencies .lc-fin-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}
.pg-agencies .lc-fin-grid{fill:none;stroke:#9aa8ff;stroke-opacity:.075;stroke-width:1}
.pg-agencies .lc-fin-twy{fill:#1d2152;stroke:#9aa8ff;stroke-opacity:.16}
.pg-agencies .lc-fin-rwy{fill:#12163a;stroke:#a9b7ff;stroke-opacity:.2}
.pg-agencies .lc-fin-pad{fill:#20255a;stroke:#9aa8ff;stroke-opacity:.12}
.pg-agencies .lc-fin-mk polygon{fill:#e9ecff;fill-opacity:.36}
.pg-agencies .lc-fin-tcl{fill:none;stroke:var(--lc-fin-amber);stroke-opacity:.65;stroke-width:1.5}
.pg-agencies .lc-fin-hold{fill:none;stroke:var(--lc-fin-amber);stroke-opacity:.55;stroke-width:1.3;stroke-dasharray:5 4}
.pg-agencies .lc-fin-hl{fill:#b9c5ff;fill-opacity:.18}
.pg-agencies .lc-fin-lights .lc-fin-pt{fill:#eef1ff}
.pg-agencies .lc-fin-lg .lc-fin-hl{fill:#5be3a0;fill-opacity:.28}
.pg-agencies .lc-fin-lg .lc-fin-pt{fill:#c3ffe0}
.pg-agencies .lc-fin-lb .lc-fin-hl{fill:#6f86ff;fill-opacity:.34}
.pg-agencies .lc-fin-lb .lc-fin-pt{fill:#b4c0ff}
.pg-agencies .lc-fin-lc .lc-fin-hl{fill:#fff;fill-opacity:0}
.pg-agencies .lc-fin-lc .lc-fin-pt{fill:#fff;fill-opacity:.4;r:1.3px}
.pg-agencies .lc-fin-nav-r{fill:#ff6a54}
.pg-agencies .lc-fin-nav-g{fill:#6af0a6}
.pg-agencies .lc-fin-bcn,.pg-agencies .lc-fin-lamp{fill:#ff5a41}
.pg-agencies .lc-fin-ll{opacity:.3}
@media (prefers-reduced-motion:no-preference){
  .pg-agencies .lc-fin-bcn{animation:lc-fin-beat 1.3s steps(1,end) infinite}
  .pg-agencies .lc-fin-lamp{animation:lc-fin-beat 2.2s steps(1,end) infinite}
  .pg-agencies .lc-fin-le .lc-fin-hl{animation:lc-fin-glow 4s ease-in-out infinite}
  .pg-agencies .lc-fin-le:nth-child(4n+2) .lc-fin-hl{animation-delay:-2s}
  /* cleared for takeoff: the centreline lights run toward the departure end */
  .pg-agencies .lc-fin-clear .lc-fin-lc .lc-fin-hl{animation:lc-fin-chase 1.4s linear infinite;animation-delay:calc(var(--i) * .07s)}
  .pg-agencies .lc-fin-clear .lc-fin-lc .lc-fin-pt{fill-opacity:.85}
  /* off screen or in a hidden tab the lights hold still too (finale.js sets lc-fin-idle) */
  .pg-agencies .lc-fin-idle *{animation-play-state:paused !important}
}
@keyframes lc-fin-beat{0%,55%{opacity:1}56%,100%{opacity:.15}}
@keyframes lc-fin-glow{0%,100%{fill-opacity:.14}50%{fill-opacity:.34}}
@keyframes lc-fin-chase{0%{fill-opacity:.55}30%,100%{fill-opacity:0}}

/* ---- the radio: two lines tied to the board's rows ------------------------------------------------ */
.pg-agencies .lc-fin-say{
  --x:0;--y:0;
  position:absolute;left:calc(var(--x) * 100% / 1440);top:calc(var(--y) * 100% / 510);z-index:3;
  display:grid;gap:4px;margin:0;padding:8px 13px 9px;border-radius:12px;background:#fff;color:#16161A;text-align:left;white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 28px -14px rgba(3,4,18,.85),0 0 0 1px rgba(17,20,52,.08);
  opacity:0;transition:opacity .28s ease,translate .28s ease;translate:0 4px;
}
.pg-agencies .lc-fin-say.lc-fin-on{opacity:1;translate:0 0}
.pg-agencies .lc-fin-say:after{content:"";position:absolute;width:11px;height:11px;background:#fff;transform:rotate(45deg);border-radius:2px}
.pg-agencies .lc-fin-say-l{display:flex;align-items:center;gap:6px;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6C6B74}
.pg-agencies .lc-fin-say-l svg{width:13px;height:13px;color:var(--brand-red)}
.pg-agencies .lc-fin-say-l b{font-weight:600}
.pg-agencies .lc-fin-say-x{font:600 14px/1.25 var(--sans);letter-spacing:-.005em}
/* the aircraft's line sits above its nose, the tower's beside the cab */
.pg-agencies .lc-fin-say-pl{--x:796;--y:236;transform:translate(-18px,-100%)}
.pg-agencies .lc-fin-say-pl:after{left:12px;bottom:-4px}
.pg-agencies .lc-fin-say-tw{--x:292;--y:224;transform:translate(10px,-50%)}
.pg-agencies .lc-fin-say-tw:after{left:-4px;top:calc(50% - 5.5px)}
@media (prefers-reduced-motion:reduce){
  .pg-agencies .lc-fin-say{transition:none;translate:none}
}


/* ---- narrower screens --------------------------------------------------------------------------- */
@media (max-width:1100px){
  .pg-agencies .lc-fin-board{--cols:112px minmax(0,1fr) 128px 160px}
  .pg-agencies .lc-fin-c{width:16px;height:26px;font-size:13.5px}
}
@media (max-width:900px){
  .pg-agencies .lc-fin-board{--cols:100px minmax(0,1fr) 140px}
  .pg-agencies .lc-fin-cols span:nth-child(3),.pg-agencies .lc-fin-via{display:none}
}
@media (max-width:1000px) and (min-width:761px){
  .pg-agencies .lc-fin-stage{width:136%;margin-left:-15%}
  .pg-agencies .lc-fin-say{padding:7px 11px 8px}
  .pg-agencies .lc-fin-say-x{font-size:12.5px}
}
@media (max-width:760px){
  .pg-agencies .lc-fin-board{padding:14px 12px 0;border-radius:16px}
  .pg-agencies .lc-fin-board figcaption{gap:10px;padding-bottom:10px}
  .pg-agencies .lc-fin-ttl{font-size:12.5px;letter-spacing:.18em}
  .pg-agencies .lc-fin-cols{display:none}
  .pg-agencies .lc-fin-row{grid-template-columns:auto auto;grid-template-areas:"fl st" "cl cl";justify-content:space-between;gap:6px 8px;padding:8px 4px}
  .pg-agencies .lc-fin-row.lc-fin-now{padding-inline:6px}
  .pg-agencies .lc-fin-fl{grid-area:fl}
  .pg-agencies .lc-fin-cl{grid-area:cl}
  .pg-agencies .lc-fin-st{grid-area:st}
  .pg-agencies .lc-fin-f{font-size:12px;line-height:22px;letter-spacing:.2em}
  .pg-agencies .lc-fin-c{width:15px;height:22px;font-size:12px;border-radius:2px}
  .pg-agencies .lc-fin-cs{gap:1.5px}
  .pg-agencies .lc-fin-in{grid-template-columns:minmax(0,1fr);margin:8px -12px 0;padding:12px 14px 14px;border-radius:0 0 16px 16px}
  /* the field: crop to the tower, the runway's end and the radio */
  .pg-agencies .lc-fin-air{margin-top:-18px}
  .pg-agencies .lc-fin-stage{width:216%;margin-left:-24.6%}
  .pg-agencies .lc-fin-say{padding:5px 8px 6px;gap:3px;border-radius:9px}
  .pg-agencies .lc-fin-say-x{font-size:11px}
  .pg-agencies .lc-fin-say-l{font-size:8.5px;gap:4px}
  .pg-agencies .lc-fin-say-l svg{width:10px;height:10px}
  .pg-agencies .lc-fin-say:after{width:8px;height:8px}
  .pg-agencies .lc-fin-say-pl{--x:704;--y:150;transform:translate(-74%,-100%)}
  .pg-agencies .lc-fin-say-pl:after{left:calc(74% - 4px);bottom:-3px}
  .pg-agencies .lc-fin-say-tw{transform:translate(6px,-50%)}
  .pg-agencies .lc-fin-say-tw:after{left:-3px;top:calc(50% - 4px)}
}
@media (max-width:420px){
  .pg-agencies .lc-fin-c{width:13.5px;height:21px;font-size:11px}
  .pg-agencies .lc-fin-cs{gap:1px}
}
