/* Moon Ways: the chrome every page shares — tokens, the counter, the search
   control, the closing band and the about panel. Page-specific styling stays
   in the page. Load after scrollcraft.css, which supplies the token scale. */
  @font-face { font-family: "Sora"; src: url("fonts/sora-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 800; font-display: swap; }
  @font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; }

  :root {
    --sc-canvas:      #0a1730;
    --sc-surface:     #112746;
    --sc-ink:         #f3f1ea;
    --sc-ink-soft:    #a9b4c9;
    --sc-accent:      #d4aa4f;
    --sc-accent-ink:  #0a1730;
    --sc-font-display: "Sora", "Manrope", system-ui, sans-serif;
    --sc-font-text:    "Manrope", system-ui, sans-serif;
    --sc-font-mono:    "Manrope", system-ui, sans-serif;
    --sc-shadow-color: 218 60% 3%;
    --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;
    --mw-navy: #112746;
    --mw-deep: #060d1b;
    --mw-gold: #d4aa4f;
    --mw-gold-soft: #b8933f;
    --mw-line: color-mix(in oklab, var(--sc-ink) 14%, transparent);
    --mw-glass: color-mix(in oklab, var(--mw-navy) 88%, transparent);
    --counter-h: 3.5rem;
  }
  .sc-display { font-weight: 500; }
  .sc-label { font-family: var(--sc-font-text); font-weight: 600; letter-spacing: 0.14em; }
  .sc-body { color: var(--sc-ink-soft); }
  ::selection { background: var(--mw-gold); color: var(--mw-deep); }
  img.mark { display: inline-block; }

  /* --------------------------------------------------- the counter (chrome) */
  .counter {
    position: fixed; inset: 0 0 auto 0; height: var(--counter-h); z-index: var(--sc-z-chrome);
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    padding-inline: var(--sc-gutter);
    color: var(--sc-ink);
    transition: background-color 320ms var(--sc-ease-out);
  }
  .counter::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
    background: var(--mw-line); opacity: 0; transition: opacity 320ms var(--sc-ease-out);
  }
  .is-docked .counter { background: var(--mw-glass); backdrop-filter: blur(14px); }
  .is-docked .counter::after { opacity: 1; }
  .counter__mark { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; min-width: 0; }
  .counter__mark .disc { height: 1.75rem; width: 1.75rem; border-radius: 999px; }
  .counter__mark .mono { height: 0.82rem; width: auto; opacity: 0.95; }

  /* the page nav: the other pages of the site */
  .counter__nav { justify-self: center; display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); min-width: 0; }
  .counter__nav a {
    font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0.01em;
    color: color-mix(in oklab, var(--sc-ink) 82%, transparent); text-decoration: none; white-space: nowrap;
    padding: 0.35rem 0; border-bottom: 1px solid transparent; transition: color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
  }
  .counter__nav a:hover { color: var(--sc-ink); border-bottom-color: var(--mw-gold); }
  .counter__nav a:focus-visible { outline: 2px solid var(--mw-gold); outline-offset: 3px; border-radius: 2px; }
  @media (max-width: 1080px) { .counter__nav { display: none; } }

  .counter__contact { justify-self: end; display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
  .counter__contact a:not(.counter__book) {
    display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px;
    color: var(--sc-ink); text-decoration: none; transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
  }
  .counter__contact a:not(.counter__book):hover { background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
  .counter__contact a:active { transform: scale(0.96); }
  .counter__contact svg { width: 1.15rem; height: 1.15rem; }
  .counter__book {
    margin-left: 0.35rem; padding: 0.5rem 1.05rem; border-radius: 999px;
    background: linear-gradient(180deg, #e2bb5e, #c99a3e); color: var(--mw-deep);
    font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm);
    text-decoration: none; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.5);
    transition: filter 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
  }
  .counter__book:hover { filter: brightness(1.07); }
  .counter__book:active { transform: scale(0.97); }
  @media (max-width: 860px) {
    :root { --counter-h: 3.25rem; }
    .counter__mark .disc { height: 1.5rem; width: 1.5rem; }
    .counter__mark .mono { height: 0.7rem; }
    .counter__contact a:not(.counter__book) { width: 2.2rem; height: 2.2rem; }
    .counter__book { padding: 0.45rem 0.85rem; }
  }
  @media (max-width: 420px) { .counter__mark .mono { display: none; } }

  /* the search control */
  .search {
    display: grid; grid-template-columns: 1.1fr 1.1fr minmax(11.5rem, 0.9fr) minmax(9rem, 0.7fr) auto; align-items: stretch;
    width: 100%; border: 1px solid var(--mw-line); border-radius: var(--sc-r-lg);
  }
  .search .field { display: grid; gap: 0.15rem; padding: 0.85rem 1.1rem; border-right: 1px solid var(--mw-line); min-width: 0; }
  .search .field label { font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
  .search select, .search input {
    appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0;
    font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); color: var(--sc-ink); min-width: 0; width: 100%;
    cursor: pointer; letter-spacing: -0.01em;
  }
  .search select:focus-visible, .search input:focus-visible { outline: none; }
  .search .field:focus-within { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
  .search .field:first-child:focus-within { border-radius: var(--sc-r-lg) 0 0 var(--sc-r-lg); }
  .search select { padding-right: 1.4rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%23d4aa4f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 0 center; background-size: 0.9rem; }
  .search select option { color: #0a1730; background: #f3f1ea; }
  .search input[type="date"] { color-scheme: dark; }
  .search input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; filter: invert(1); cursor: pointer; }
  .search .pax { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.4rem; }
  .search .pax button {
    width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 1px solid var(--mw-line); background: transparent; color: var(--sc-ink);
    cursor: pointer; font-family: var(--sc-font-display); font-size: 1rem; line-height: 1; display: grid; place-items: center;
    transition: background-color 120ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
  }
  .search .pax button:hover { background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
  .search .pax button:active { transform: scale(0.94); }
  .search .pax output { text-align: center; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500; font-variant-numeric: tabular-nums; }
  .search .go {
    display: grid; place-items: center; padding: 0 1.6rem; margin: 0.45rem; border: 0; border-radius: calc(var(--sc-r-lg) - 4px);
    background: linear-gradient(180deg, #e2bb5e, #c99a3e); color: var(--mw-deep); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.55), 0 8px 22px -8px rgba(212, 170, 79, 0.55);
    letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
    transition: filter 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
  }
  .search .go:hover { filter: brightness(1.07); }
  .search .go:active { transform: scale(0.97); }
  @media (max-width: 860px) {
    .search { grid-template-columns: 1fr 1fr; border-radius: var(--sc-r-md); }
    .search .field { padding: 0.55rem 0.8rem; border-right: 0; border-bottom: 1px solid var(--mw-line); }
    .search .field:nth-child(odd) { border-right: 1px solid var(--mw-line); }
    .search .field label { font-size: 0.66rem; }
    .search select, .search input, .search .pax output { font-size: var(--sc-t-base); }
    .search .go { grid-column: 1 / -1; margin: 0.4rem; padding: 0.8rem; }
  }

  /* ----------------------------------------------------------------- close */
  .close { position: relative; background: linear-gradient(180deg, #05090f 0%, var(--mw-navy) 60%, #0d1e3a 100%); padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 5vw, 3rem); }
  .close .sc-wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
  .close__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .close h2 { font-size: var(--sc-t-2xl); max-width: 16ch; letter-spacing: -0.02em; }
  .close__top > div > p { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 44ch; }
  .cta { display: flex; gap: var(--sc-4); flex-wrap: wrap; margin-top: var(--sc-5); }
  .cta a {
    display: inline-grid; place-items: center; padding: 0.8rem 1.5rem; border-radius: 999px;
    font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); text-decoration: none; white-space: nowrap;
    transition: filter 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
  }
  .cta .primary { background: linear-gradient(180deg, #e2bb5e, #c99a3e); color: var(--mw-deep); box-shadow: inset 0 1px 0 rgba(255,240,200,0.5); }
  .cta .primary:hover { filter: brightness(1.07); }
  .cta .ghost { border: 1px solid var(--mw-gold); color: var(--sc-ink); }
  .cta .ghost:hover { background: var(--mw-gold); color: var(--mw-deep); }
  .cta a:active { transform: scale(0.97); }

  .sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sc-5) var(--sc-6); }
  .sitemap h3 { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mw-gold); margin: 0 0 var(--sc-3); }
  .sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
  .sitemap a { color: color-mix(in oklab, var(--sc-ink) 86%, transparent); text-decoration: none; font-size: var(--sc-t-sm); }
  .sitemap a:hover { color: var(--mw-gold); }
  .colophon { border-top: 1px solid var(--mw-line); padding-top: var(--sc-5); display: grid; grid-template-columns: auto 1fr; gap: var(--sc-5); align-items: center; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
  .colophon img { height: 0.82rem; width: auto; opacity: 0.85; }
  .colophon .r { justify-self: end; text-align: right; }
  @media (max-width: 860px) {
    .close__top { grid-template-columns: 1fr; }
    .colophon { grid-template-columns: 1fr; }
    .colophon .r { justify-self: start; text-align: left; }
  }

  /* --------------------------------------------------------------- about */
  .about {
    border: 0; padding: 0; max-width: min(46rem, calc(100vw - 2rem)); width: 100%;
    background: var(--mw-navy); color: var(--sc-ink); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3);
  }
  .about::backdrop { background: color-mix(in oklab, #04091a 76%, transparent); backdrop-filter: blur(3px); }
  .about__in { padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: var(--sc-5); }
  .about__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sc-4); align-items: center; }
  .about__head img { height: 2.6rem; width: 2.6rem; border-radius: 999px; object-fit: cover; }
  .about h2 { font-size: var(--sc-t-xl); margin: 0; }
  .about p { margin: 0; color: var(--sc-ink-soft); }
  .about .x { background: transparent; border: 1px solid var(--mw-line); color: var(--sc-ink); width: 2.2rem; height: 2.2rem; border-radius: 999px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
  .about dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem var(--sc-5); margin: 0; }
  .about dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
  .about dd { margin: 0; }
  .about a { color: var(--mw-gold); }

  /* ------------------------------------------------------- reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .dep { opacity: 1; transform: none; }
  }

  /* ------------------------------------------------------- the mobile menu */
  .counter__menu {
    display: none; width: 2.4rem; height: 2.4rem; border-radius: 999px;
    border: 1px solid var(--mw-line); background: transparent; color: var(--sc-ink);
    cursor: pointer; place-items: center;
  }
  .counter__menu svg { width: 1.1rem; height: 1.1rem; }
  @media (max-width: 1080px) { .counter__menu { display: grid; } }
  #menuPanel {
    position: fixed; inset: var(--counter-h) 0 auto 0; z-index: calc(var(--sc-z-chrome) - 1);
    background: var(--mw-navy); border-bottom: 1px solid var(--mw-line);
    padding: var(--sc-5) var(--sc-gutter) var(--sc-6);
    display: grid; gap: var(--sc-4); box-shadow: var(--sc-e3);
  }
  /* an id beats the user-agent [hidden] rule, so the closed panel has to be
     told to stay shut — without this it covers the top of every page */
  #menuPanel[hidden] { display: none; }
  #menuPanel a {
    font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 500;
    color: var(--sc-ink); text-decoration: none; padding: 0.35rem 0;
    border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 8%, transparent);
  }
  #menuPanel a:hover { color: var(--mw-gold); }

  /* --------------------------------------------------------- inner pages */
  .page { padding-top: calc(var(--counter-h) + clamp(2.5rem, 7vw, 5rem)); }
  .page__head { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
  .page__head .sc-label { color: var(--mw-gold); display: block; }
  .page__head h1 { font-size: var(--sc-t-3xl); margin: var(--sc-3) 0 0; max-width: 18ch; letter-spacing: -0.02em; }
  .page__head p.lede { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); max-width: 56ch; font-size: var(--sc-t-lg); }
  .page__body { max-width: var(--sc-maxw); margin-inline: auto; padding: clamp(2rem, 6vw, 3.5rem) var(--sc-gutter) 0; }
  .prose { max-width: 68ch; }
  .prose h2 { font-size: var(--sc-t-xl); margin: clamp(2rem, 5vw, 3rem) 0 var(--sc-3); letter-spacing: -0.015em; }
  .prose h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; margin: var(--sc-5) 0 var(--sc-2); }
  .prose p, .prose li { color: var(--sc-ink-soft); }
  .prose p { margin: var(--sc-3) 0 0; }
  .prose ul { margin: var(--sc-3) 0 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
  .prose li::marker { color: var(--mw-gold-soft); }
  .prose a { color: var(--mw-gold); }
  .prose strong { color: var(--sc-ink); font-weight: 600; }
  .note {
    margin-top: var(--sc-5); padding: var(--sc-4) var(--sc-5);
    border: 1px solid var(--mw-gold-soft); border-radius: var(--sc-r-md);
    background: color-mix(in oklab, var(--mw-gold) 7%, transparent); color: var(--sc-ink-soft);
  }
  .note strong { color: var(--sc-ink); }

  /* ------------------------------------------------- the booking dock
     Always within reach, bottom centre, the way Flow keeps its primary
     action there. Rises once the page has moved past the hero. */
  .dock {
    position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
    translate: -50% 0; z-index: var(--sc-z-chrome);
    display: grid; grid-auto-flow: column; align-items: center; gap: var(--sc-4);
    padding: 0.5rem 0.65rem 0.5rem 1.25rem;
    border: 1px solid var(--mw-line); border-radius: 999px;
    background: color-mix(in oklab, var(--mw-navy) 92%, transparent);
    backdrop-filter: blur(16px); box-shadow: var(--sc-e3);
    opacity: 0; visibility: hidden; transform: translate3d(0, 1rem, 0); pointer-events: none;
    transition: opacity 280ms var(--sc-ease-out), transform 280ms var(--sc-ease-out), visibility 0s 280ms;
    max-width: calc(100vw - 2 * var(--sc-gutter));
  }
  .is-docked .dock {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s;
  }
  .dock__meta {
    font-family: var(--sc-font-text); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; order: -1;
  }
  .dock__meta #dockRoute { color: var(--sc-ink); font-weight: 600; }
  .dock__go {
    display: inline-grid; place-items: center; padding: 0.6rem 1.3rem; border-radius: 999px;
    background: linear-gradient(180deg, #e2bb5e, #c99a3e); color: var(--mw-deep);
    font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base);
    text-decoration: none; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.5);
    transition: filter 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
  }
  .dock__go:hover { filter: brightness(1.07); }
  .dock__go:active { transform: scale(0.97); }
  .dock__go:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
  /* on the booking page itself the dock would point at the page you are on */
  body.on-book .dock { display: none; }
  @media (max-width: 560px) {
    .dock { padding-left: 1rem; gap: var(--sc-3); }
    .dock__meta { font-size: var(--sc-t-xs); max-width: 9rem; }
  }
  @media (prefers-reduced-motion: reduce) { .dock { transition: none; } }

  /* ------------------------------------------------- the country, faintly
     Pakistan sits behind every page as a watermark: the outline and the
     network drawn from the same timetable the departures board reads, so it
     is the real shape of the company rather than decoration. Fixed, so the
     content travels over it; z-index -1 keeps it above the canvas colour and
     below everything else. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: url("assets/pk-map.svg") no-repeat 76% 52% / auto min(120vh, 70rem);
    opacity: 0.42;
    -webkit-mask-image: radial-gradient(130% 100% at 72% 50%, #000 32%, transparent 78%);
    mask-image: radial-gradient(130% 100% at 72% 50%, #000 32%, transparent 78%);
  }
  @media (max-width: 760px) {
    body::before { background-position: 62% 46%; background-size: auto 70vh; opacity: 0.45; }
  }
  /* the booking page is a form: the map behind the seat plan is noise */
  body.on-book::before { opacity: 0.22; }
  /* and the routes page has the real map on it — two would be one too many */
  body.on-routes::before { display: none; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }