:root{
    /* ---------------------------------------------------------------------
       TripsNFares brand, sampled directly from the logo artwork.
       Navy #071426 → #2A4A70 is the logo's own background gradient.
       Orange #F0B429 is the "N" and the swoosh. Nothing else competes
       with it — orange on this site always means "act here".
       --------------------------------------------------------------------- */
    --navy-950:#071426;
    --navy-900:#0B1E33;
    --navy-800:#0D2038;
    --navy-700:#16304F;
    --navy-600:#1E3F66;
    --navy-500:#2A4A70;
    --navy-ink:#071426;
    --obsidian:#04101F;
    --cream:#F7F9FC;
    --champagne:#FFE08A;
    --champagne-dim:rgba(255,224,138,.62);

    --orange:#F0B429;
    --orange-lift:#FFC43D;
    --orange-deep:#C98A0B;
    --orange-wash:#FDF3D9;
    --orange-glow:rgba(240,180,41,.42);

    --sidebar:#071426;
    --sidebar-hover:#0D2038;
    --accent:#F0B429;
    --accent-2:#FFC43D;
    --accent-dark:#C98A0B;

    --bg:#F2F5F9;
    --paper:#FFFFFF;
    --sand:#E6ECF3;
    --card:#ffffff;
    --border:#DDE5EE;
    --border-soft:#EDF2F7;
    --text:#17212E;
    --text-soft:#5B6B7F;
    --text-faint:#8A99AB;
    --success:#1F9D63;
    --success-bg:#E6F6EE;
    --warn:#C98A0B;
    --info:#1B6FB0;
    --info-bg:#E8F2FA;
    --violet:#5A44A0;
    --violet-bg:#F0ECFA;
    --radius:14px;
    --radius-sm:8px;
    --shadow:0 1px 2px rgba(7,20,38,.05), 0 12px 32px -18px rgba(7,20,38,.24);
    --shadow-lg:0 30px 80px -28px rgba(7,20,38,.5);
    --ease:cubic-bezier(.22,.61,.36,1);

    /* Fallbacks for the first paint, before body[data-mkt] is set. AU values. */
    --on-accent:#241A00;
    --accent-rgb:240,180,41;

    /* legacy aliases kept so shared components stay themed */
    --ink:#071426; --ink-2:#0D2038; --ink-3:#16304F;
    --jade:#F0B429; --jade-lift:#FFC43D; --jade-deep:#C98A0B; --jade-wash:#FDF3D9;
    --brass:#FFC43D; --brass-lift:#FFD98A; --brass-wash:#FDF3D9;
  }

*{box-sizing:border-box; margin:0; padding:0;}

body{
    font-family:'Instrument Sans',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    font-size:14px;
  }

/* Fraunces carries the brand voice; used with restraint on headings only.
     Optical sizing keeps the big hero type high-contrast and the small
     section headings sturdy enough to read at 15px. */
  /* Two voices, deliberately split.
     Instrument Serif carries the editorial headlines — it is what makes the
     page read expensive rather than transactional, and its italic does the
     work the reference design used gold for.
     Barlow stays on anything structural (nav, buttons, labels) because it
     matches the logo wordmark. Never mix them within one line. */
  h1,h2,h3,.display{font-family:'Archivo',system-ui,sans-serif; font-weight:400; letter-spacing:-.012em;}

.sans,.nav-link,.btn,.tab,label,th,.rm-l,.sec-eyebrow,.hero-eyebrow,.ht-lbl,.dest-tag,.cabin-chip{
    font-family:'Archivo',system-ui,sans-serif;
  }

em.q{font-style:italic; color:var(--champagne);}

/* Reference numbers, fare bases and e-ticket numbers are monospace in every
     real GDS — keeping them monospace here makes them scannable and honest. */
  .mono,.pnr-code,.eticket,.ref{font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:-.02em;}

button{font-family:inherit; cursor:pointer;}

input,select,textarea{font-family:inherit;}

a{color:inherit;}

/* ================= SHELL ================= */
  .shell{display:flex; min-height:100vh;}

.main{
    flex:1; min-width:0; display:flex; flex-direction:column;
    background:
      radial-gradient(1000px 560px at 100% -10%, rgba(240,180,41,.09), transparent 60%),
      radial-gradient(900px 700px at -8% 20%, rgba(13,32,56,.08), transparent 58%),
      linear-gradient(180deg, #F5F8FB 0%, #E9EFF5 100%);
    position:relative;
  }

.main::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0; min-height:100%;
    background-image:radial-gradient(rgba(13,32,56,.07) 1.2px, transparent 1.2px);
    background-size:24px 24px;
  }

.content{padding:28px 32px 60px; flex:1; position:relative; z-index:1;}

.content-inner{max-width:1320px; margin:0 auto;}

.side-mark{
    width:100%; padding:16px 8px 18px; margin-bottom:6px; display:flex;
    align-items:center; justify-content:center; border-bottom:1px solid rgba(255,255,255,.09);
  }

.side-mark img{max-width:62px; height:auto; display:block;}

/* ================= PUBLIC SITE HEADER (B2C) ================= */
  /* ================= CRM SIDEBAR ================= */
  .sidebar{
    width:96px; background:var(--sidebar); flex-shrink:0;
    display:flex; flex-direction:column; align-items:center;
    padding:20px 0 28px; gap:6px;
  }

.sidebar .logo{margin-bottom:22px;}

.nav-item{
    width:76px; padding:11px 4px; border-radius:10px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:#8a8f9c; font-size:11.5px; font-weight:600; letter-spacing:.1px;
    transition:background .15s, color .15s; text-align:center; line-height:1.25;
  }

.nav-item svg{width:19px; height:19px;}

.nav-item:hover{background:var(--sidebar-hover); color:#c7cad3;}

.nav-item.active{background:rgba(240,180,41,.14); color:var(--accent-2);}

.nav-spacer{flex:1;}

.topbar{
    height:64px; background:#fff; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; flex-shrink:0; position:sticky; top:0; z-index:30;
  }

.topbar-left{display:flex; align-items:center; gap:14px;}

.crm-tag{font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--violet); background:var(--violet-bg); padding:5px 11px; border-radius:999px;}

.topbar-right{display:flex; align-items:center; gap:10px;}

.user-meta{line-height:1.2;}

.user-meta .name{font-size:13.5px; font-weight:700; color:#0D2038;}

.user-meta .role{font-size:11.5px; color:var(--text-faint);}

/* mode switch — demo affordance to move between the public site and the staff CRM */
  .mode-switch{display:inline-flex; gap:3px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:3px;}

.mode-btn{border:none; background:none; padding:7px 13px; border-radius:7px; font-size:12.5px; font-weight:700; color:var(--text-soft);}

.mode-btn.active{background:#0D2038; color:#fff;}

/* ================= BUTTONS ================= */
  .btn{
    border:none; border-radius:9px; padding:11px 20px; font-weight:700; font-size:14px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
  }

.btn:active{transform:translateY(1px);}

.btn-primary{background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; box-shadow:0 8px 18px -8px rgba(240,180,41,.65);}

.btn-primary:hover{box-shadow:0 10px 22px -6px rgba(240,180,41,.75);}

.btn-dark{background:#0D2038; color:#fff;}

.btn-dark:hover{background:#2a2d35;}

.btn-ghost{background:#fff; border:1.5px solid var(--border); color:var(--text);}

.btn-ghost:hover{border-color:#c9ccd2;}

.btn-success{background:var(--success); color:#fff;}

.btn-success:hover{background:#157f43;}

.btn-link{background:none; color:var(--accent); font-weight:700; padding:6px 2px; border:none;}

.btn-block{width:100%;}

.btn-sm{padding:8px 14px; font-size:13px; border-radius:8px;}

.btn-lg{padding:14px 26px; font-size:15px;}

.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ================= HERO / SEARCH ================= */
  .hero{
    border-radius:20px; overflow:hidden; position:relative; min-height:430px;
    background:
      linear-gradient(180deg, rgba(10,12,16,.32), rgba(10,12,16,.84)),
      url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=1600&auto=format&fit=crop') center/cover;
    padding:44px 44px 36px; display:flex; flex-direction:column; justify-content:center;
  }

.hero-badge{
    display:inline-flex; align-self:flex-start; align-items:center; gap:8px;
    background:linear-gradient(135deg,var(--accent-2),var(--accent-dark));
    color:#fff; font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:999px;
    margin-bottom:20px; box-shadow:0 8px 20px -8px rgba(240,180,41,.7);
  }

.hero h1{color:#fff; font-size:34px; font-weight:800; max-width:660px; line-height:1.25; margin-bottom:10px;}

.hero h1 .accent{color:var(--accent-2);}

.hero .hero-sub{color:rgba(255,255,255,.78); font-size:14.5px; max-width:560px; margin-bottom:24px; line-height:1.6;}

.search-card{background:#fff; border-radius:16px; padding:20px 22px 22px; box-shadow:var(--shadow-lg);}

.tabs{display:flex; gap:4px; margin-bottom:16px;}

.tab{padding:10px 20px; border-radius:10px 10px 0 0; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; color:var(--text-soft); background:var(--bg); cursor:pointer;}

.tab.active{background:#0D2038; color:#fff;}

.trip-toggle{display:flex; gap:22px; margin-bottom:16px; flex-wrap:wrap;}

.trip-toggle label{display:flex; align-items:center; gap:7px; font-weight:600; font-size:13.5px; color:var(--text-soft); cursor:pointer;}

.trip-toggle input{accent-color:var(--accent);}

.trip-toggle label.selected{color:var(--text);}

.search-grid{display:grid; grid-template-columns:1.3fr 1.3fr 1fr 1fr 1.15fr auto; gap:12px; align-items:end;}

.field{display:flex; flex-direction:column; gap:6px;}

.field label{font-size:11.5px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px;}

.field .input-wrap{
    border:1.5px solid var(--border); border-radius:10px; padding:11px 12px;
    display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--text);
    background:#fff; position:relative;
  }

.field .input-wrap:focus-within{border-color:var(--accent);}

.input-wrap svg{width:16px; height:16px; color:var(--text-faint); flex-shrink:0;}

.field input, .field select{border:none; outline:none; width:100%; font-size:14px; font-weight:600; color:var(--text); background:transparent;}

.field select{cursor:pointer;}

.search-extra{display:flex; align-items:center; justify-content:space-between; margin-top:16px; gap:14px; flex-wrap:wrap;}

.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-soft); cursor:pointer;}

.checkbox-row input{accent-color:var(--accent); width:15px; height:15px;}

.quote-nudge{font-size:13px; color:var(--text-soft); font-weight:600;}

.quote-nudge b{color:var(--accent); cursor:pointer;}

/* passenger stepper popover — consumer pattern, replaces the B2B single "pax" select */
  .pax-trigger{cursor:pointer; justify-content:space-between;}

.pax-trigger .pax-label{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.pax-pop{
    position:absolute; top:calc(100% + 6px); left:0; min-width:280px; background:#fff; border:1px solid var(--border);
    border-radius:14px; box-shadow:var(--shadow-lg); z-index:60; padding:14px;
  }

.pax-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0;}

.pax-row:not(:last-child){border-bottom:1px solid var(--border-soft);}

.pax-row .t{font-size:13.5px; font-weight:700;}

.pax-row .d{font-size:11.5px; color:var(--text-faint); font-weight:600;}

.stepper{display:flex; align-items:center; gap:10px;}

.step-btn{width:28px; height:28px; border-radius:8px; border:1.5px solid var(--border); background:#fff; font-size:15px; font-weight:800; color:var(--text-soft); display:flex; align-items:center; justify-content:center;}

.step-btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent);}

.step-btn:disabled{opacity:.35; cursor:not-allowed;}

.step-val{width:20px; text-align:center; font-size:14px; font-weight:800;}

/* Default is the LIGHT page — this row appears under the search form on
     Live Flights where there is no hero behind it. The white-on-dark version
     is opt-in via .on-dark, used only where it overlays the hero. */
  .badge-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px;}

.badge-card{
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:15px 17px; display:flex; align-items:center; gap:13px;
    transition:border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  }

.badge-card:hover{ border-color:var(--orange); transform:translateY(-2px); box-shadow:var(--shadow); }

.badge-icon{
    width:38px; height:38px; border-radius:10px; background:var(--orange-wash);
    border:1px solid #F7DFA4; color:var(--orange-deep);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;
  }

.badge-card .t1{ color:var(--navy-950); font-weight:700; font-size:13.2px; line-height:1.3; }

.badge-card .t2{ color:var(--text-soft); font-size:11.8px; line-height:1.45; margin-top:2px; }

.badge-row.on-dark .badge-card{
    background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.15); backdrop-filter:blur(6px);
  }

.badge-row.on-dark .badge-card:hover{ background:rgba(255,255,255,.11); border-color:var(--orange); }

.badge-row.on-dark .badge-icon{ background:rgba(240,180,41,.9); border-color:transparent; color:#fff; }

.badge-row.on-dark .badge-card .t1{ color:#fff; }

.badge-row.on-dark .badge-card .t2{ color:rgba(242,245,249,.68); }

/* ================= HOMEPAGE SECTIONS ================= */
  .section{margin-top:34px;}

.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap;}

.section-head h2{font-size:20px; font-weight:800;}

.section-head p{font-size:13.5px; color:var(--text-soft); margin-top:4px;}

.deal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}

.deal-card{background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;}

.deal-img{height:130px; background-size:cover; background-position:center; position:relative;}

.deal-tag{position:absolute; top:12px; left:12px; background:#fff; color:var(--accent-dark); font-size:11px; font-weight:800; padding:5px 11px; border-radius:999px;}

.deal-body{padding:16px 18px 18px; flex:1; display:flex; flex-direction:column;}

.deal-route{font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px;}

.deal-meta{font-size:12px; color:var(--text-faint); font-weight:600; margin-top:4px;}

.deal-foot{display:flex; align-items:flex-end; justify-content:space-between; margin-top:14px; gap:10px;}

.deal-price .k{font-size:11px; color:var(--text-faint); font-weight:700;}

.deal-price .v{font-size:20px; font-weight:800; color:var(--text);}

.howto{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}

.howto-card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px 22px 24px; box-shadow:var(--shadow);}

.howto-num{font-family:'Archivo',sans-serif; font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.6px;}

.howto-card h3{font-size:15.5px; font-weight:800; margin:10px 0 7px;}

.howto-card p{font-size:13px; color:var(--text-soft); line-height:1.6;}

.split-cta{
    background:linear-gradient(120deg,#0D2038 0%, #24272f 60%, #2d2118 100%);
    border-radius:20px; padding:34px 38px; display:flex; align-items:center; justify-content:space-between;
    gap:28px; flex-wrap:wrap; box-shadow:var(--shadow-lg);
  }

.split-cta h2{color:#fff; font-size:22px; font-weight:800; margin-bottom:8px;}

.split-cta p{color:rgba(255,255,255,.7); font-size:14px; max-width:520px; line-height:1.6;}

/* ================= PAGE HEADER / STEPS ================= */
  .page-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:14px;}

.page-head h1{font-size:27px; font-weight:400; line-height:1.1; color:var(--navy-950);}

.page-head h2{font-size:20px; font-weight:800;}

.page-sub{font-size:13px; color:var(--text-faint); font-weight:600; margin-top:3px;}

.steps{display:flex; align-items:center; gap:0; flex-wrap:wrap;}

.step{display:flex; align-items:center; gap:8px; padding:7px 14px 7px 7px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:12.5px; font-weight:700; color:var(--text-faint);}

.step .dot{width:22px; height:22px; border-radius:50%; background:var(--border-soft); color:var(--text-faint); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;}

.step.done{color:var(--success);}

.step.done .dot{background:var(--success); color:#fff;}

.step.current{color:var(--accent);}

.step.current .dot{background:var(--accent); color:#fff;}

.step-sep{width:18px; height:1.5px; background:var(--border);}

.recap-bar{background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:22px; margin-bottom:20px; flex-wrap:wrap; box-shadow:var(--shadow);}

.recap-item{display:flex; flex-direction:column; gap:2px;}

.recap-item .k{font-size:10.5px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px;}

.recap-item .v{font-size:14px; font-weight:700; color:var(--text);}

.recap-sep{width:1px; height:30px; background:var(--border);}

/* ================= RESULTS ================= */
  .layout-2col{display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start;}

.filter-row{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}

.filter-chip{background:#fff; border:1.5px solid var(--border); border-radius:9px; padding:9px 14px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; color:var(--text); cursor:pointer;}

.filter-chip svg{width:13px; height:13px; color:var(--text-faint);}

.filter-chip.on{border-color:var(--accent); color:var(--accent); background:#FDF7E6;}

.results-count{font-size:14px; font-weight:700; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

.results-count .tag{color:var(--accent);}

.flight-card{
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:14px;
    display:grid; grid-template-columns:1fr 1fr 170px; gap:20px; align-items:center; transition:box-shadow .15s, border-color .15s;
  }

.flight-card.one-way{grid-template-columns:1fr 170px;}

.flight-card:hover{box-shadow:var(--shadow); border-color:#d9dce1;}

.fare-chips{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; padding-top:14px; margin-top:2px; border-top:1px dashed var(--border-soft);}

.chip{background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:700; color:var(--text-soft); display:inline-flex; align-items:center; gap:5px;}

.chip-good{background:var(--success-bg); border-color:#bfe8cf; color:var(--success);}

.chip-warn{background:#FDF3D9; border-color:#ffd9c7; color:var(--accent-dark);}

.chip-info{background:var(--info-bg); border-color:#cfe0f7; color:var(--info);}

.leg{display:flex; gap:12px;}

.airline-logo{width:38px; height:38px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:12px;}

.leg-info .airline-name{font-size:13px; font-weight:700; color:var(--text);}

.leg-info .flight-no{font-size:11.5px; color:var(--text-faint); margin-bottom:8px;}

.leg-route{display:flex; align-items:center; gap:10px;}

.leg-time{font-size:17px; font-weight:800; color:var(--text);}

.leg-airport{font-size:11px; color:var(--text-faint); font-weight:600;}

.leg-path{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:70px;}

.leg-dur{font-size:10.5px; color:var(--text-faint); font-weight:700;}

.leg-line{width:100%; height:1.5px; background:var(--border); position:relative;}

.leg-line::after{content:''; position:absolute; right:-3px; top:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--accent);}

.leg-stops{font-size:10.5px; color:var(--success); font-weight:700;}

.leg-date{font-size:11px; color:var(--text-faint); font-weight:600; margin-top:2px;}

.price-col{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}

.price{font-size:21px; font-weight:800; color:var(--text);}

.price-sub{font-size:11px; color:var(--text-faint); font-weight:600;}

.price-strike{font-size:12.5px; color:var(--text-faint); text-decoration:line-through;}

.details-link{font-size:12.5px; font-weight:700; color:var(--accent); background:none; border:none; display:flex; align-items:center; gap:4px;}

.seat-scarcity{font-size:11px; font-weight:700; color:var(--accent-dark); background:#FDF3D9; border-radius:6px; padding:3px 8px;}

/* inline "can't find it? ask us to quote" strip inside results */
  .inline-quote-strip{
    background:linear-gradient(120deg,#FDF7E6,#fff); border:1.5px dashed #ffd0bd; border-radius:14px;
    padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:16px;
  }

.inline-quote-strip .t{font-size:14.5px; font-weight:800;}

.inline-quote-strip .d{font-size:13px; color:var(--text-soft); margin-top:3px; max-width:560px; line-height:1.55;}

/* ================= SUMMARY SIDEBAR ================= */
  .summary-card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; position:sticky; top:90px; box-shadow:var(--shadow);}

.summary-card h3{font-size:15px; font-weight:800; color:var(--accent); margin-bottom:14px;}

.sum-route{background:var(--bg); border-radius:10px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}

.sum-route .r{font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px;}

.sum-route .meta{font-size:11px; color:var(--text-faint); font-weight:600; margin-top:3px;}

.sum-line{display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:13.5px; color:var(--text-soft); border-bottom:1px dashed var(--border-soft); gap:12px;}

.sum-line.total{border:none; margin-top:6px; padding-top:14px; border-top:1.5px solid var(--border); font-size:16px; font-weight:800; color:var(--text);}

.sum-line b{color:var(--text); font-weight:700; text-align:right;}

.sum-sub{font-size:10.5px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 4px; padding-top:10px; border-top:1px solid var(--border-soft);}

/* ================= DRAWER ================= */
  .overlay{position:fixed; inset:0; background:rgba(15,17,22,.4); z-index:90; display:none;}

.overlay.open{display:block;}

.drawer{
    position:fixed; top:0; right:0; height:100%; width:480px; max-width:92vw; background:#fff; z-index:95;
    box-shadow:-16px 0 50px -12px rgba(0,0,0,.35); transform:translateX(100%); transition:transform .25s ease;
    overflow-y:auto; padding:26px 26px 100px;
  }

.drawer.wide{width:660px;}

.drawer.open{transform:translateX(0);}

.drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}

.drawer-head h2{font-size:19px; font-weight:800;}

.drawer-close{width:32px; height:32px; border-radius:50%; background:var(--bg); border:none; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-soft);}

.seg-card{border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px;}

.seg-tag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;}

.seg-air{display:flex; align-items:center; gap:10px; margin-bottom:14px;}

.seg-air .n{font-weight:700; font-size:13.5px;}

.seg-air .c{font-size:11.5px; color:var(--text-faint); background:var(--bg); padding:2px 8px; border-radius:6px; margin-left:auto;}

.seg-route{display:flex; align-items:center; gap:12px;}

.seg-time{font-size:19px; font-weight:800;}

.seg-loc{font-size:11.5px; color:var(--text-soft); font-weight:600; max-width:130px; line-height:1.3;}

.seg-mid{flex:1; text-align:center;}

.seg-mid .dur{font-size:11px; color:var(--text-faint); font-weight:700;}

.seg-mid .ln{height:1.5px; background:var(--border); margin:4px 0; position:relative;}

.seg-mid .ln::before, .seg-mid .ln::after{content:''; position:absolute; top:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--text-faint);}

.seg-mid .ln::before{left:-2px;}

.seg-mid .ln::after{right:-2px; background:var(--accent);}

.seg-mid .stop{font-size:10.5px; color:var(--success); font-weight:700;}

.fare-rules{background:var(--bg); border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--text-soft); line-height:1.6; margin-top:6px;}

.fare-rules div{padding:3px 0;}

.fare-rules b{color:var(--text);}

.baggage-table{border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:6px;}

.bag-row{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; font-size:12.5px; color:var(--text-soft);}

.bag-row:not(:last-child){border-bottom:1px solid var(--border-soft);}

.bag-row b{color:var(--text); font-weight:700;}

/* ================= SEATMAP ================= */
  .seatmap-wrap{background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px;}

.seat-tabs{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}

.seat-tab{padding:9px 18px; border-radius:9px; font-weight:700; font-size:13px; background:var(--bg); color:var(--text-soft); border:1.5px solid transparent; cursor:pointer;}

.seat-tab.active{background:#fff; border-color:var(--accent); color:var(--accent);}

.seat-pax-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}

.seat-pax-btn{border:1.5px solid var(--border); background:#fff; border-radius:9px; padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--text-soft); display:flex; align-items:center; gap:8px;}

.seat-pax-btn.active{border-color:var(--accent); color:var(--accent); background:#FDF7E6;}

.seat-pax-btn .sc{font-size:11px; font-weight:800; background:var(--bg); padding:2px 7px; border-radius:6px; color:var(--text);}

.plane{max-width:400px; margin:0 auto;}

.cabin-label{text-align:center; font-size:11.5px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.6px; margin:18px 0 8px;}

.seat-row{display:grid; gap:5px; align-items:center; margin-bottom:5px; justify-content:center;}

.row-num{font-size:10.5px; color:var(--text-faint); font-weight:700; text-align:center;}

.seat{width:32px; height:32px; border-radius:7px; border:none; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; color:#fff;}

.seat.free{background:#dfe3e8; color:#8a90a0; cursor:pointer;}

.seat.free:hover{background:#c9ced7;}

.seat.premium{background:#FDF0C9; color:var(--accent-dark); cursor:pointer;}

.seat.premium:hover{background:#ffcbb6;}

.seat.exit{background:#d9f2e3; color:#0f7a3f; cursor:pointer;}

.seat.exit:hover{background:#bfead0;}

.seat.business{background:#e8ddfb; color:#5b3fa0; cursor:pointer;}

.seat.business:hover{background:#d9c7f7;}

.seat.taken{background:#eceef1; color:#c3c7cf; cursor:not-allowed;}

.seat.selected{background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; box-shadow:0 4px 12px -3px rgba(240,180,41,.6);}

.seat-blank{width:32px; height:32px;}

.aisle-gap{width:16px;}

.seat-legend{display:flex; gap:18px; justify-content:center; margin-top:20px; flex-wrap:wrap;}

.legend-item{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--text-soft);}

.legend-sw{width:16px; height:16px; border-radius:4px;}

/* ================= EXTRAS ================= */
  .anc-group{background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:16px;}

.anc-group h3{font-size:14.5px; font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:8px;}

.anc-group .sub{font-size:12.5px; color:var(--text-faint); margin-bottom:14px;}

.anc-option{display:flex; align-items:center; gap:14px; padding:13px 14px; border:1.5px solid var(--border); border-radius:10px; margin-bottom:10px; cursor:pointer; transition:border-color .15s, background .15s;}

.anc-option:last-child{margin-bottom:0;}

.anc-option.selected{border-color:var(--accent); background:#FDF7E6;}

.anc-option input{accent-color:var(--accent); width:17px; height:17px; flex-shrink:0;}

.anc-option .info{flex:1;}

.anc-option .info .t{font-weight:700; font-size:13.5px;}

.anc-option .info .d{font-size:12px; color:var(--text-faint); margin-top:1px;}

.anc-option .price{font-weight:800; font-size:14px; color:var(--text); white-space:nowrap;}

.anc-option .price.free{color:var(--success);}

/* ================= FORMS ================= */
  .form-card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px 24px; margin-bottom:18px;}

.form-card h3{font-size:15px; font-weight:800; margin-bottom:16px;}

.form-card h3.with-sub{margin-bottom:5px;}

.form-card .card-sub{font-size:12.5px; color:var(--text-faint); margin-bottom:16px; line-height:1.55;}

.info-note{background:#FDF7E6; border:1px solid #f5e3b8; color:#8a6a10; font-size:12.5px; padding:11px 14px; border-radius:9px; margin-bottom:18px; line-height:1.55;}

.info-note.blue{background:var(--info-bg); border-color:#cfe0f7; color:#17457f;}

.info-note.green{background:var(--success-bg); border-color:#bfe8cf; color:#12703c;}

.form-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}

.form-grid.two{grid-template-columns:1fr 1fr;}

.fgroup{display:flex; flex-direction:column; gap:6px;}

.fgroup label{font-size:12px; font-weight:700; color:var(--text-soft);}

.fgroup label .req{color:var(--accent);}

.fgroup input, .fgroup select, .fgroup textarea{
    border:1.5px solid var(--border); border-radius:9px; padding:10px 12px; font-size:13.5px; font-weight:600; color:var(--text); outline:none; background:#fff;
  }

.fgroup textarea{resize:vertical; min-height:96px; font-weight:500; line-height:1.6;}

.fgroup input:focus, .fgroup select:focus, .fgroup textarea:focus{border-color:var(--accent);}

.fgroup .hint{font-size:11.5px; color:var(--text-faint); font-weight:600;}

.pax-card-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}

.pax-index{width:26px; height:26px; border-radius:8px; background:#0D2038; color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center;}

.pax-type-tag{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:3px 9px; border-radius:999px; background:var(--bg); color:var(--text-soft);}

.pay-methods{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}

.pay-method{flex:1; min-width:130px; border:1.5px solid var(--border); border-radius:10px; padding:12px; text-align:center; font-weight:700; font-size:12.5px; color:var(--text-soft); cursor:pointer;}

.pay-method.active{border-color:var(--accent); color:var(--accent); background:#FDF7E6;}

.radio-list{display:flex; flex-direction:column; gap:10px;}

.radio-tile{display:flex; align-items:flex-start; gap:12px; border:1.5px solid var(--border); border-radius:10px; padding:13px 14px; cursor:pointer;}

.radio-tile.selected{border-color:var(--accent); background:#FDF7E6;}

.radio-tile input{accent-color:var(--accent); width:16px; height:16px; margin-top:2px; flex-shrink:0;}

.radio-tile .t{font-size:13.5px; font-weight:700;}

.radio-tile .d{font-size:12px; color:var(--text-faint); margin-top:2px; line-height:1.5;}

/* ================= VALIDATION ================= */
  .err-msg{color:#c0392b; font-size:11.5px; font-weight:700; margin-top:5px; display:flex; align-items:center; gap:5px;}

.err-msg::before{content:'⚠'; font-size:11px;}

.input-wrap.invalid, .date-trigger.invalid, .date-trigger-form.invalid{border-color:#e0554a !important; background:#FDF7E6;}

.fgroup input.invalid, .fgroup select.invalid, .fgroup textarea.invalid{border-color:#e0554a; background:#FDF7E6;}

/* ================= AUTOCOMPLETE ================= */
  .ac-dropdown{position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); z-index:60; max-height:280px; overflow-y:auto; padding:6px; min-width:260px;}

.ac-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer;}

.ac-item:hover{background:var(--bg);}

.ac-code{width:36px; height:28px; flex-shrink:0; border-radius:7px; background:#0D2038; color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; letter-spacing:.3px;}

.ac-info .ac-city{font-size:13px; font-weight:700; color:var(--text);}

.ac-info .ac-name{font-size:11.5px; color:var(--text-faint); font-weight:600;}

.ac-empty{padding:14px 10px; font-size:12.5px; color:var(--text-faint); text-align:center;}

/* ================= CALENDAR ================= */
  .date-trigger{cursor:pointer;}

.date-trigger-form{border:1.5px solid var(--border); border-radius:9px; padding:10px 12px; display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; background:#fff;}

.date-trigger-form svg{width:15px; height:15px; color:var(--text-faint); flex-shrink:0;}

.date-trigger.disabled, .date-trigger-form.disabled{opacity:.5; cursor:not-allowed; background:var(--bg);}

.date-display.placeholder{color:var(--text-faint); font-weight:500;}

.cal-popup{
    position:absolute; top:calc(100% + 7px); left:0; z-index:200;
    background:#fff; border:1px solid var(--border); border-radius:16px;
    box-shadow:0 28px 70px -18px rgba(7,20,38,.45), 0 0 0 1px rgba(7,20,38,.04);
    padding:15px; width:320px; max-width:calc(100vw - 24px);
    animation:tnf-pop .16s var(--ease) both;
  }

/* Flipped when the field sits too close to an edge — set by positionPopup(). */
  .cal-popup.flip-x{ left:auto; right:0; }

.cal-popup.flip-y{ top:auto; bottom:calc(100% + 7px); }

@keyframes tnf-pop{ from{ opacity:0; transform:translateY(-4px) scale(.985); } to{ opacity:1; transform:none; } }

/* On small screens it stops trying to hang off a field and centres instead. */
  @media (max-width:560px){
    .cal-popup{
      position:fixed; top:50%; left:50%; right:auto; bottom:auto;
      transform:translate(-50%,-50%); width:min(340px, calc(100vw - 28px));
      box-shadow:0 40px 90px -20px rgba(7,20,38,.6);
    }
    .cal-popup.flip-x, .cal-popup.flip-y{ left:50%; right:auto; top:50%; bottom:auto; }
    .cal-backdrop{
      position:fixed; inset:0; background:rgba(7,20,38,.42); z-index:199;
      animation:tnf-fade .18s ease both;
    }
  }

.cal-head{display:flex; align-items:center; gap:5px; margin-bottom:10px;}

.cal-select{border:1.5px solid var(--border); border-radius:7px; padding:5px; font-size:12px; font-weight:700; color:var(--text); background:#fff; cursor:pointer; flex:1; min-width:0;}

.cal-select-year{flex:0 0 68px;}

.cal-select:focus{border-color:var(--accent);}

.cal-nav{width:26px; height:26px; flex-shrink:0; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text-soft); font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center;}

.cal-nav:hover{background:var(--bg);}

.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px;}

.cal-dow div{text-align:center; font-size:10px; font-weight:800; color:var(--text-faint); padding:4px 0;}

.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}

.cal-cell{aspect-ratio:1; border:none; background:none; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--text); display:flex; align-items:center; justify-content:center;}

.cal-cell.empty{cursor:default;}

.cal-cell:not(.empty):not(:disabled):hover{background:var(--bg);}

.cal-cell.today{color:var(--accent); font-weight:800;}

.cal-cell.sel{background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff;}

.cal-cell:disabled{color:#d4d7dd; cursor:not-allowed;}

/* ================= CONFIRMATION ================= */
  .confirm-wrap{max-width:780px; margin:10px auto 0;}

.confirm-hero{text-align:center; padding:36px 20px 30px;}

.confirm-check{width:74px; height:74px; border-radius:50%; background:var(--success-bg); color:var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}

.confirm-check svg{width:36px; height:36px;}

.confirm-check.quote{background:var(--violet-bg); color:var(--violet); font-size:32px;}

.confirm-hero h1{font-size:25px; font-weight:800; margin-bottom:8px;}

.confirm-hero p{color:var(--text-soft); font-size:14.5px; line-height:1.6; max-width:520px; margin:0 auto;}

.pnr-row{display:flex; justify-content:center; gap:14px; margin-top:22px; flex-wrap:wrap;}

.pnr-box{background:#fff; border:1.5px dashed var(--border); border-radius:12px; padding:14px 22px; text-align:center;}

.pnr-box .k{font-size:10.5px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.5px;}

.pnr-box .v{font-size:19px; font-weight:800; color:var(--accent); letter-spacing:1px; margin-top:3px;}

.whatnext{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:6px;}

.whatnext div{background:var(--bg); border-radius:12px; padding:14px 16px;}

.whatnext .n{font-size:11px; font-weight:800; color:var(--accent); letter-spacing:.4px;}

.whatnext .t{font-size:13px; font-weight:700; margin-top:6px;}

.whatnext .d{font-size:12px; color:var(--text-soft); margin-top:4px; line-height:1.5;}

.footer-actions{display:flex; justify-content:flex-end; gap:12px; margin-top:26px; flex-wrap:wrap;}

/* ================= AUTH ================= */
  body.auth-mode .site-header, body.auth-mode .site-footer, body.auth-mode .sidebar, body.auth-mode .topbar{display:none;}

body.auth-mode .content{padding:0;}

body.auth-mode .content-inner{max-width:none;}

body.auth-mode .main{background:#fff;}

/* the supplied logo asset is white, so the auth lockup sits on an ink chip */
  .auth-brand{
    background:var(--ink); padding:9px 15px; border-radius:9px;
    box-shadow:0 8px 22px -10px rgba(13,32,56,.5);
  }

.auth-brand .tnf-logo{height:24px;}

body.auth-mode .main::before{display:none;}

.auth-page{min-height:100vh; display:grid; grid-template-columns:1fr 1fr; align-items:stretch;}

.auth-illustration{background:linear-gradient(160deg,#fff5f1 0%,#ffe9e0 55%,#fff 100%); display:flex; align-items:center; justify-content:center; padding:60px; position:relative; overflow:hidden;}

.auth-illustration svg{width:100%; max-width:460px; height:auto;}

.auth-brand{position:absolute; top:36px; left:40px; display:flex; align-items:center; gap:9px;}

.auth-panel{display:flex; align-items:center; justify-content:center; padding:40px;}

.auth-card{width:100%; max-width:420px;}

.auth-card h1{font-size:26px; font-weight:800; margin-bottom:6px;}

.auth-sub{color:var(--text-soft); font-size:13.5px; margin-bottom:28px; line-height:1.5;}

.auth-card .fgroup{margin-bottom:18px;}

.auth-card .fgroup label{font-size:13px; font-weight:700; color:var(--text); margin-bottom:1px; display:block;}

.auth-card .input-wrap{padding:12px 14px; border:1.5px solid var(--border); border-radius:10px; display:flex; align-items:center; gap:9px; background:#fff;}

.auth-card .input-wrap:focus-within{border-color:var(--accent);}

.auth-card .input-wrap input{border:none; outline:none; width:100%; font-size:14px; font-weight:600; background:transparent;}

.auth-card .input-wrap svg{width:16px; height:16px; color:var(--text-faint); flex-shrink:0;}

.auth-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap;}

.auth-link{font-size:13px; font-weight:700; color:var(--text-faint); text-decoration:none; background:none; border:none;}

.auth-link:hover{color:var(--accent);}

.auth-footer{text-align:center; margin-top:20px; font-size:13.5px; color:var(--text-soft);}

.auth-footer a{color:var(--accent); font-weight:700; text-decoration:none; cursor:pointer;}

.auth-guest{margin-top:26px; padding-top:22px; border-top:1px solid var(--border-soft); text-align:center;}

.auth-guest .t{font-size:13px; color:var(--text-soft); margin-bottom:12px;}

/* ================= TABLES / CRM ================= */
  .table-card{background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);}

.data-table{width:100%; border-collapse:collapse;}

.data-table th{background:var(--bg); text-align:left; font-size:10.5px; font-weight:800; color:var(--text-soft); text-transform:uppercase; letter-spacing:.5px; padding:13px 14px; border-bottom:1.5px solid var(--border); white-space:nowrap;}

.data-table td{padding:14px; border-bottom:1px solid var(--border-soft); font-size:13.5px; color:var(--text); vertical-align:middle;}

.data-table tbody tr:hover{background:#fbfbfc;}

.data-table tr:last-child td{border-bottom:none;}

.cust-cell{display:flex; align-items:center; gap:11px;}

.cust-avatar{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#3a3f4b,#20232b); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex-shrink:0;}

.u-name{font-weight:700; font-size:13.5px;}

.u-email{font-size:11.5px; color:var(--text-faint);}

.type-badge{font-size:12.5px; font-weight:700; color:var(--text-soft); white-space:nowrap;}

.muted{color:var(--text-faint); font-weight:600;}

.tiny{font-size:11.5px;}

.stat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:20px;}

.stat-grid.cols-6{grid-template-columns:repeat(6,1fr);}

.stat-grid.cols-4{grid-template-columns:repeat(4,1fr);}

.stat-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow);}

.stat-icon{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:12px;}

.stat-card .stat-label{font-size:10.5px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; margin-bottom:7px;}

.stat-card .stat-value{font-size:23px; font-weight:800; color:var(--text); font-family:'Archivo',sans-serif;}

.stat-card .stat-sub{font-size:11px; color:var(--text-soft); margin-top:4px; font-weight:600;}

.bm-type-toggle{display:inline-flex; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:11px; padding:4px; margin-bottom:18px; flex-wrap:wrap;}

.bm-type-btn{border:none; background:none; padding:9px 18px; border-radius:8px; font-size:13px; font-weight:700; color:var(--text-soft); cursor:pointer; transition:background .15s, color .15s;}

.bm-type-btn:hover{color:var(--text);}

.bm-type-btn.active{background:#0D2038; color:#fff;}

.bm-filter-bar{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 16px; margin-bottom:18px; box-shadow:var(--shadow); flex-wrap:wrap;}

.bm-search-wrap{flex:1; min-width:230px; max-width:380px; display:flex; align-items:center; gap:9px; border:1.5px solid var(--border); border-radius:10px; padding:10px 14px; background:var(--bg);}

.bm-search-wrap:focus-within{border-color:var(--accent); background:#fff;}

.bm-search-wrap svg{width:16px; height:16px; color:var(--text-faint); flex-shrink:0;}

.bm-search-wrap input{border:none; outline:none; background:none; font-size:13.5px; font-weight:600; color:var(--text); width:100%;}

.bm-select{border:1.5px solid var(--border); border-radius:10px; padding:10px 14px; font-size:13px; font-weight:700; color:var(--text-soft); background:#fff; height:41px;}

.bm-date-trigger{display:flex; align-items:center; gap:8px; border:1.5px solid var(--border); border-radius:10px; padding:10px 14px; height:41px; box-sizing:border-box; background:#fff; cursor:pointer; white-space:nowrap;}

.bm-date-trigger svg{width:15px; height:15px; color:var(--text-faint); flex-shrink:0;}

.bm-date-trigger span{font-size:13px; font-weight:700; color:var(--text);}

.bm-period-note{font-size:12.5px; font-weight:600; color:var(--text-soft); margin-bottom:12px;}

.bm-period-note b{color:var(--text);}

/* ================= STATUS BADGES ================= */
  .status-badge{padding:4px 11px; border-radius:999px; font-size:11px; font-weight:800; display:inline-block; white-space:nowrap;}

.status-badge.ticketed, .status-badge.confirmed, .status-badge.converted{background:var(--success-bg); color:var(--success);}

.status-badge.pending, .status-badge.follow-up, .status-badge.awaiting-payment{background:#FDF7E6; color:#8a6a10;}

.status-badge.in-progress, .status-badge.assigned{background:var(--info-bg); color:var(--info);}

.status-badge.airline-rl-pending, .status-badge.quoted{background:var(--violet-bg); color:var(--violet);}

.status-badge.new{background:#fdeee8; color:var(--accent-dark);}

.status-badge.cancelled, .status-badge.refunded, .status-badge.lost, .status-badge.expired{background:#fdeaea; color:#c0392b;}

.priority-badge{font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--bg); color:var(--text-soft);}

.priority-badge.high{background:#fdeaea; color:#c0392b;}

.sla-badge{font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px;}

.sla-badge.ok{background:var(--success-bg); color:var(--success);}

.sla-badge.due{background:#FDF7E6; color:#8a6a10;}

.sla-badge.breach{background:#fdeaea; color:#c0392b;}

/* ================= QUOTE PIPELINE (signature element) ================= */
  .pipeline{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:20px;}

.pipe-stage{
    background:#fff; border:1px solid var(--border); border-radius:13px; padding:14px 15px; cursor:pointer;
    position:relative; transition:border-color .15s, box-shadow .15s; box-shadow:var(--shadow);
  }

.pipe-stage:hover{border-color:#c9ccd2;}

.pipe-stage.active{border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,180,41,.10);}

.pipe-stage .pk{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.45px; color:var(--text-faint);}

.pipe-stage .pv{font-family:'Archivo',sans-serif; font-size:25px; font-weight:800; margin-top:8px;}

.pipe-stage .pb{height:4px; border-radius:999px; background:var(--border-soft); margin-top:10px; overflow:hidden;}

.pipe-stage .pb i{display:block; height:100%; border-radius:999px;}

.pipe-stage .pd{font-size:11px; color:var(--text-soft); font-weight:600; margin-top:8px;}

.quote-list{display:flex; flex-direction:column; gap:14px;}

.quote-row{
    background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px 18px;
    display:grid; grid-template-columns:150px 1fr 190px 130px; gap:18px; align-items:center; box-shadow:var(--shadow);
  }

.quote-row:hover{border-color:#d9dce1;}

.qr-ref{font-size:14px; font-weight:800;}

.qr-when{font-size:11.5px; color:var(--text-faint); font-weight:600; margin-top:3px;}

.qr-route{font-size:15px; font-weight:800; display:flex; align-items:center; gap:9px; flex-wrap:wrap;}

.qr-meta{font-size:12.5px; color:var(--text-soft); font-weight:600; margin-top:5px;}

.qr-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}

.qr-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}

.qr-amount{font-size:18px; font-weight:800;}

.qr-amount .k{font-size:10.5px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; display:block;}

/* offers (agent's quoted fares) */
  .offer-card{border:1.5px solid var(--border); border-radius:13px; padding:16px 18px; margin-bottom:12px; background:#fff;}

.offer-card.recommended{border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,180,41,.08);}

.offer-card.accepted{border-color:var(--success); background:#fbfffc;}

.offer-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; flex-wrap:wrap;}

.offer-title{display:flex; align-items:center; gap:10px;}

.offer-title .n{font-size:14px; font-weight:800;}

.offer-title .c{font-size:11.5px; color:var(--text-faint); font-weight:600;}

.offer-flag{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:3px 9px; border-radius:999px; background:#FDF7E6; color:var(--accent-dark);}

.offer-body{display:grid; grid-template-columns:1fr 170px; gap:18px; align-items:center;}

.offer-price{text-align:right;}

.offer-price .v{font-size:22px; font-weight:800;}

.offer-price .k{font-size:11px; color:var(--text-faint); font-weight:700;}

.offer-note{font-size:12.5px; color:var(--text-soft); background:var(--bg); border-radius:9px; padding:10px 12px; margin-top:12px; line-height:1.55;}

.offer-expiry{font-size:11.5px; font-weight:700; color:var(--accent-dark); margin-top:10px;}

.empty-state{background:#fff; border:1px solid var(--border); border-radius:16px; padding:56px 24px; text-align:center; box-shadow:var(--shadow);}

.empty-state .ico{font-size:34px; margin-bottom:14px;}

.empty-state h3{font-size:16px; font-weight:800; margin-bottom:7px;}

.empty-state p{font-size:13.5px; color:var(--text-soft); max-width:400px; margin:0 auto 18px; line-height:1.6;}

/* ================= DETAIL PAGES ================= */
  .bd-header{display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; margin:6px 0 20px;}

.bd-ref-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}

.bd-ref{font-size:24px; font-weight:800; font-family:'Archivo',sans-serif;}

.bd-sub{font-size:13px; color:var(--text-faint); font-weight:600; margin-top:4px;}

.bd-header-actions{display:flex; gap:10px; flex-wrap:wrap;}

.bd-tabs{display:flex; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:4px; margin-bottom:18px; width:fit-content; flex-wrap:wrap;}

.bd-tab-btn{border:none; background:none; padding:10px 20px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--text-soft); cursor:pointer; display:flex; align-items:center; gap:7px;}

.bd-tab-btn:hover{color:var(--text);}

.bd-tab-btn.active{background:#fff; color:var(--accent); box-shadow:var(--shadow);}

.bd-tab-count{background:var(--border); color:var(--text-soft); font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:999px;}

.bd-tab-btn.active .bd-tab-count{background:#FDF7E6; color:var(--accent);}

.bd-edit-row{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap;}

.bd-edit-row select{border:1.5px solid var(--border); border-radius:8px; padding:8px 10px; font-size:13px; font-weight:700; color:var(--text); background:#fff;}

.bd-inline-input{border:1.5px solid var(--border); border-radius:8px; padding:7px 10px; font-size:12.5px; font-weight:600; color:var(--text); width:160px;}

.bd-inline-input:focus{border-color:var(--accent); outline:none;}

.bd-ref-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}

.bd-readonly-value{flex:1; font-size:13px; font-weight:700; color:var(--text); padding:7px 0;}

.bd-empty{color:var(--text-faint); font-weight:600; font-style:italic;}

.bd-pax-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border-soft); flex-wrap:wrap;}

.bd-pax-row:last-child{border-bottom:none;}

.bd-seat-row{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap;}

.bd-seat-label{font-size:12px; color:var(--text-faint); font-weight:600;}

.bd-seat-price{font-size:12px; color:var(--text-faint);}

/* ================= ACTIVITY LOG ================= */
  .log-panel{background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:var(--shadow);}

.log-panel h3{font-size:15px; font-weight:800; margin-bottom:14px;}

.log-add{margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border-soft);}

.log-add textarea{width:100%; border:1.5px solid var(--border); border-radius:9px; padding:10px 12px; font-size:13px; font-family:inherit; color:var(--text); resize:vertical; margin-bottom:8px;}

.log-add textarea:focus{border-color:var(--accent); outline:none;}

.log-list{display:flex; flex-direction:column; max-height:660px; overflow-y:auto;}

.log-item{display:flex; gap:12px; padding-bottom:18px; position:relative;}

.log-item:not(:last-child)::before{content:''; position:absolute; left:13px; top:30px; bottom:0; width:2px; background:var(--border-soft);}

.log-icon{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; background:var(--bg); color:var(--text-soft);}

.log-icon.log-status{background:var(--info-bg); color:var(--info);}

.log-icon.log-comment{background:#FDF7E6; color:#8a6a10;}

.log-icon.log-email{background:var(--success-bg); color:var(--success);}

.log-icon.log-invoice{background:var(--violet-bg); color:var(--violet);}

.log-icon.log-api{background:#eef2ff; color:#4f46e5;}

.log-icon.log-quote{background:#FDF7E6; color:var(--accent-dark);}

.log-icon.log-call{background:#e6f7f6; color:#0f8a82;}

.log-result{display:inline-block; margin-left:6px; padding:1.5px 8px; border-radius:999px; font-size:9.5px; font-weight:800; letter-spacing:.3px; vertical-align:middle;}

.log-result.success{background:var(--success-bg); color:var(--success);}

.log-result.pending{background:#FDF7E6; color:#8a6a10;}

.log-body{flex:1; padding-top:2px;}

.log-action{font-size:13px; font-weight:700; color:var(--text);}

.log-detail{font-size:12.5px; color:var(--text-soft); margin-top:2px; line-height:1.5;}

.log-meta{font-size:11px; color:var(--text-faint); margin-top:4px; font-weight:600;}

/* ================= DASHBOARD CHARTS ================= */
  .cp-row{display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--border-soft);}

.cp-row:last-child{border-bottom:none;}

.cp-route{width:180px; flex-shrink:0; font-size:13px; font-weight:700; color:var(--text); line-height:1.3;}

.cp-bar-wrap{flex:1; height:8px; background:var(--bg); border-radius:999px; overflow:hidden;}

.cp-bar{height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:999px;}

.cp-count{width:120px; flex-shrink:0; text-align:right; font-size:12.5px; font-weight:800; color:var(--text);}

.cp-converted{font-weight:600; color:var(--success); font-size:11px;}

.ltb-hero{text-align:center; padding:8px 0 18px;}

.ltb-ratio{font-family:'Archivo',sans-serif; font-size:36px; font-weight:800; color:var(--accent);}

.ltb-sub{font-size:12px; color:var(--text-faint); font-weight:600; margin-top:4px;}

.outcome-bar{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--bg); margin-bottom:14px;}

.outcome-seg{height:100%;}

.outcome-legend{display:flex; flex-direction:column; gap:8px;}

.outcome-legend div{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-soft);}

.dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}

/* ================= EMAIL PREVIEW ================= */
  .email-meta{border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:16px;}

.email-field{display:flex; gap:10px; padding:11px 14px; font-size:12.5px;}

.email-field:not(:last-child){border-bottom:1px solid var(--border-soft);}

.email-field span{color:var(--text-faint); font-weight:600; width:56px; flex-shrink:0;}

.email-field b{color:var(--text); font-weight:700;}

.email-preview-frame{background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:20px;}

.email-doc{background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08);}

.email-banner{background:#0D2038; padding:18px 24px; display:flex; align-items:center; gap:10px;}

.email-banner-logo{width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--accent-2),var(--accent-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Archivo',sans-serif; font-weight:800; font-size:14px;}

.email-banner-brand{font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; color:#fff;}

.email-banner-brand span{color:#aeb2bb; font-weight:600;}

.email-hero{text-align:center; padding:32px 24px 26px; border-bottom:1px solid var(--border-soft);}

.email-hero-icon{width:48px; height:48px; border-radius:50%; background:var(--success-bg); color:var(--success); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; margin:0 auto 14px;}

.email-hero.negative .email-hero-icon{background:#fdeaea; color:#c0392b;}

.email-hero.quote .email-hero-icon{background:var(--violet-bg); color:var(--violet);}

.email-hero h1{font-size:19px; font-weight:800; margin-bottom:8px; font-family:'Archivo',sans-serif;}

.email-hero p{font-size:13px; color:var(--text-soft); line-height:1.6; max-width:400px; margin:0 auto;}

.email-pnr-box{display:flex; justify-content:center; gap:28px; margin-top:20px; flex-wrap:wrap;}

.email-pnr-box div{text-align:center;}

.email-pnr-box span{display:block; font-size:10px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px;}

.email-pnr-box b{font-size:17px; font-weight:800; color:var(--accent); letter-spacing:.5px;}

.email-section{padding:22px 24px; border-bottom:1px solid var(--border-soft);}

.email-section h2{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); margin-bottom:14px;}

.email-table{width:100%; border-collapse:collapse;}

.email-table th{text-align:left; font-size:10.5px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.4px; padding-bottom:8px; border-bottom:1.5px solid var(--border);}

.email-table td{padding:9px 0; font-size:12.5px; color:var(--text); border-bottom:1px solid var(--border-soft);}

.email-table td:last-child{text-align:right; font-weight:700;}

.email-table tr:last-child td{border-bottom:none;}

.email-table .email-total-row td{font-weight:800; font-size:13.5px; padding-top:12px; border-top:1.5px solid var(--border); border-bottom:none;}

.email-cta{text-align:center; padding:24px;}

.email-cta p{font-size:12.5px; color:var(--text-soft); margin-bottom:12px;}

.email-btn{display:inline-block; background:linear-gradient(135deg,var(--accent-2),var(--accent)); color:#fff; font-weight:700; font-size:13px; padding:11px 26px; border-radius:9px; text-decoration:none;}

.email-footer{text-align:center; padding:20px 24px; background:var(--bg);}

.email-footer-brand{font-weight:800; font-size:12px; color:var(--text); margin-bottom:6px;}

.email-footer div{font-size:10.5px; color:var(--text-faint); line-height:1.6;}

/* ================= RESPONSIVE ================= */
  @media (max-width:1180px){
    .pipeline{grid-template-columns:repeat(3,1fr);}
    .quote-row{grid-template-columns:1fr 1fr; }
  }

@media (max-width:1080px){
    .layout-2col{grid-template-columns:1fr;}
    .search-grid{grid-template-columns:1fr 1fr;}
    .badge-row{grid-template-columns:1fr 1fr;}
    .form-grid{grid-template-columns:1fr 1fr;}
    .stat-grid, .stat-grid.cols-6, .stat-grid.cols-4{grid-template-columns:1fr 1fr;}
    .deal-grid, .howto, .whatnext{grid-template-columns:1fr;}
    .footer-inner{grid-template-columns:1fr 1fr;}
    .summary-card{position:static;}
  }

@media (max-width:900px){
    .auth-page{grid-template-columns:1fr;}
    .auth-illustration{display:none;}
    .bd-ref-grid{grid-template-columns:1fr;}
    .site-nav{display:none;}
	.mkt-switch {
        display: none !important;
    }
	#hdr-phone-text {
        display: none !important;
    }
  }

@media (max-width:640px){
    .sidebar{display:none;}
    .content{padding:18px;}
    .site-header-inner{padding:0 18px; height:62px;}
    .hero{padding:26px 20px 24px; min-height:0;}
    .hero h1{font-size:24px;}
    .flight-card, .flight-card.one-way{grid-template-columns:1fr; gap:14px;}
    .search-grid{grid-template-columns:1fr;}
    .form-grid, .form-grid.two{grid-template-columns:1fr;}
    .pipeline{grid-template-columns:1fr 1fr;}
    .quote-row{grid-template-columns:1fr;}
    .offer-body{grid-template-columns:1fr;}
    .offer-price{text-align:left;}
    .support-pill{color:rgba(255,255,255,.80) !important; border-color:rgba(255,255,255,.18) !important; background:rgba(255,255,255,.07) !important;
    display:none;}
    .site-footer{padding:32px 18px 20px;}
    .footer-inner{grid-template-columns:1fr;}
    .table-scroll{overflow-x:auto;}
	    .footer-inner {
        grid-template-columns: 1fr !important;
    }
  }

.table-scroll{overflow-x:auto;}

code.dev{font-family:ui-monospace,monospace; background:#0D2038; color:#7ee787; padding:2px 6px; border-radius:5px; font-size:11px;}

/* =====================================================================
     TRIPSNFARES — PREMIUM COMPONENTS
     ===================================================================== */

  /* ---- brand lockup (logo is served from tripsnfares.com) ---- */
  .tnf-logo{height:30px; width:auto; display:block;}

.site-header .brand,.site-footer .brand{display:flex; align-items:center; gap:10px; cursor:pointer;}

.brand-fallback{
    font-family:'Archivo',sans-serif; font-weight:600; font-size:19px; letter-spacing:-.02em;
    color:#fff; white-space:nowrap;
  }

.brand-fallback .nf{color:var(--orange);}

/* ---- market switch (AU / NZ) ---- */
  .mkt-switch{display:flex; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:7px; padding:2px; gap:2px;}

.mkt-btn{
    background:none; border:none; color:rgba(255,255,255,.66); font-size:11.5px; font-weight:700;
    padding:5px 9px; border-radius:5px; letter-spacing:.03em; display:flex; align-items:center; gap:5px;
  }

.mkt-btn.active{background:#fff; color:var(--ink);}

.mkt-flag{font-size:12px; line-height:1;}

/* =====================================================================
     SIGNATURE — THE LIE-FLAT BAR
     From Australia and New Zealand almost every worthwhile destination is a
     15–30 hour journey. The only question a premium buyer actually has is
     "how much of that am I horizontal?" So every fare renders its journey as
     a proportional bar: orange = lie-flat, navy = seated/cradle, hatched =
     on the ground connecting. Nothing else on the page uses brass.
     ===================================================================== */
  .flatbar-wrap{margin:12px 0 2px;}

.flatbar-head{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    margin-bottom:6px; font-size:11px; letter-spacing:.055em; text-transform:uppercase;
    color:var(--text-faint); font-weight:700;
  }

.flatbar-head b{
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:-.02em;
    text-transform:none; color:var(--ink); font-weight:600;
  }

.flatbar{
    display:flex; height:12px; border-radius:6px; overflow:hidden;
    background:var(--sand); border:1px solid var(--border);
  }

.fb-seg{position:relative; min-width:3px;}

.fb-flat{background:linear-gradient(180deg,var(--orange-lift),var(--orange));}

.fb-seat{background:linear-gradient(180deg,var(--navy-600),var(--navy-700));}

.fb-ground{
    background-image:repeating-linear-gradient(-45deg,#C7D2DE 0 3px,#E2E9F1 3px 6px);
  }

.flatbar-key{display:flex; flex-wrap:wrap; gap:12px; margin-top:7px; font-size:11.5px; color:var(--text-soft);}

.fb-key{display:flex; align-items:center; gap:5px;}

.fb-dot{width:9px; height:9px; border-radius:2px; flex-shrink:0;}

.fb-dot.flat{background:var(--orange);}

.fb-dot.seat{background:var(--navy-700);}

.fb-dot.ground{background-image:repeating-linear-gradient(-45deg,#C7D2DE 0 2px,#E2E9F1 2px 4px);}

.fb-pct{font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--orange); font-size:12px;}

/* ---- cabin badge: the only other brass surface ---- */
  .cabin-chip{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
    font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  }

.cabin-chip.first{background:linear-gradient(135deg,#FDF3D9,#FFEFE0); color:#8A4A10; border:1px solid #F2D6B4;}

.cabin-chip.business{background:var(--orange-wash); color:var(--orange-deep); border:1px solid #F7DFA4;}

.cabin-chip.premium{background:#EDF1F6; color:var(--info); border:1px solid #D3DFEA;}

.cabin-chip.economy{background:#EEF2F7; color:var(--text-soft); border:1px solid var(--border);}

/* ---- section furniture ---- */
  .sec{margin:44px 0;}

.sec-head{margin-bottom:20px; max-width:70ch;}

.sec-eyebrow{
    font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--jade); margin-bottom:9px; display:flex; align-items:center; gap:9px;
  }

.sec-eyebrow::after{content:''; flex:1; height:1px; background:var(--border);}

.sec-head h2{font-size:29px; font-weight:600; line-height:1.16; margin-bottom:9px; color:var(--ink);}

.sec-head p{font-size:14.5px; line-height:1.65; color:var(--text-soft);}

/* ---- cabin comparison ---- */
  .cabin-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}

.cabin-card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column;
  }

.cabin-card.flagship{border-color:var(--orange); box-shadow:0 0 0 1px var(--orange), 0 18px 44px -22px var(--orange-glow);}

.cabin-card-top{padding:18px 20px 15px; border-bottom:1px solid var(--border-soft);}

.cabin-card.flagship .cabin-card-top{background:linear-gradient(180deg,var(--orange-wash),#fff);}

.cabin-card h3{font-size:19px; font-weight:600; margin:9px 0 5px; color:var(--ink);}

.cabin-card-price{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text-soft); font-weight:500;}

.cabin-card-price b{color:var(--ink); font-size:15px; font-weight:600;}

.cabin-card-body{padding:16px 20px 20px; flex:1; display:flex; flex-direction:column; gap:11px;}

.cabin-feat{display:flex; gap:9px; font-size:13.2px; line-height:1.55; color:var(--text-soft);}

.cabin-feat svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; stroke:var(--jade);}

.cabin-card.flagship .cabin-feat svg{stroke:var(--orange);}

/* ---- route intelligence cards ---- */
  .route-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}

.route-card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px 22px; cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s;
  }

.route-card:hover{border-color:var(--jade); transform:translateY(-2px); box-shadow:var(--shadow);}

.route-pair{display:flex; align-items:center; gap:11px; margin-bottom:5px;}

.route-code{font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:600; color:var(--ink);}

.route-arrow{flex:1; height:1px; background:var(--border); position:relative;}

.route-arrow::after{
    content:''; position:absolute; right:0; top:-3px; border-left:6px solid var(--jade);
    border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
  }

.route-cities{font-size:12.5px; color:var(--text-faint); margin-bottom:13px;}

.route-note{font-size:13.2px; line-height:1.62; color:var(--text-soft); margin-bottom:13px;}

.route-meta{display:flex; flex-wrap:wrap; gap:16px; padding-top:12px; border-top:1px solid var(--border-soft);}

.rm{display:flex; flex-direction:column; gap:2px;}

.rm-l{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:700;}

.rm-v{font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--ink);}

.rm-v.brass{color:var(--orange);}

/* ---- editorial / long-form content pages ---- */
  .doc{max-width:880px;}

.doc-hero{
    background:linear-gradient(150deg,#071426,#16304F); color:#fff;
    border-radius:14px; padding:38px 40px 32px; margin-bottom:28px;
  }

.doc-hero h1{font-size:34px; font-weight:600; line-height:1.14; margin-bottom:11px;}

.doc-hero p{font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.76); max-width:62ch;}

.doc-updated{
    display:inline-flex; align-items:center; gap:7px; margin-top:18px; padding:5px 11px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:999px;
    font-size:11.5px; color:rgba(255,255,255,.80); font-family:'JetBrains Mono',monospace;
  }

.doc-toc{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 22px; margin-bottom:26px;
  }

.doc-toc h4{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:11px; font-weight:700;}

.doc-toc ol{list-style:none; counter-reset:toc; display:grid; grid-template-columns:1fr 1fr; gap:6px 22px;}

.doc-toc li{counter-increment:toc; font-size:13.2px;}

.doc-toc li::before{
    content:counter(toc,decimal-leading-zero); font-family:'JetBrains Mono',monospace;
    color:var(--jade); margin-right:9px; font-size:11.5px; font-weight:600;
  }

.doc-toc a{color:var(--text-soft); text-decoration:none; cursor:pointer;}

.doc-toc a:hover{color:var(--jade); text-decoration:underline;}

.doc-sec{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 30px; margin-bottom:14px;
  }

.doc-sec h2{
    font-size:19px; font-weight:600; color:var(--ink); margin-bottom:13px;
    display:flex; gap:12px; align-items:baseline;
  }

.doc-sec h2 .n{
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--jade);
    font-weight:600; flex-shrink:0;
  }

.doc-sec h3{font-size:14.5px; font-weight:700; color:var(--ink); margin:18px 0 8px; font-family:'Instrument Sans',sans-serif;}

.doc-sec p{font-size:13.8px; line-height:1.72; color:var(--text-soft); margin-bottom:11px;}

.doc-sec ul,.doc-sec ol{margin:0 0 13px 19px;}

.doc-sec li{font-size:13.8px; line-height:1.72; color:var(--text-soft); margin-bottom:6px;}

.doc-sec strong{color:var(--ink); font-weight:700;}

.doc-sec a{color:var(--jade); text-decoration:underline; text-underline-offset:2px;}

.doc-sec table{width:100%; border-collapse:collapse; margin:6px 0 14px; font-size:13px;}

.doc-sec th{
    text-align:left; padding:9px 12px; background:var(--sand); color:var(--ink);
    font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    border:1px solid var(--border);
  }

.doc-sec td{padding:10px 12px; border:1px solid var(--border); color:var(--text-soft); line-height:1.6; vertical-align:top;}

/* callouts — legal emphasis without shouting */
  .callout{
    border-left:3px solid var(--jade); background:var(--jade-wash);
    padding:15px 18px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:6px 0 15px;
  }

.callout.warn{border-left-color:var(--orange); background:var(--orange-wash);}

.callout.legal{border-left-color:var(--info); background:var(--info-bg);}

.callout h4{font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:6px; letter-spacing:.02em; font-family:'Instrument Sans',sans-serif;}

.callout p{font-size:13.2px; line-height:1.68; color:var(--text-soft); margin:0;}

.callout p + p{margin-top:8px;}

/* jurisdiction tabs on legal pages */
  .juris-tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}

.juris-tab{
    padding:8px 15px; border-radius:999px; border:1px solid var(--border); background:var(--card);
    font-size:12.5px; font-weight:700; color:var(--text-soft); display:flex; align-items:center; gap:7px;
  }

.juris-tab.active{background:var(--ink); border-color:var(--ink); color:#fff;}

/* ---- trust / accreditation strip ---- */
  .accred{
    display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
  }

.accred-item{
    flex:1; min-width:170px; background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:15px 17px;
  }

.accred-item .ai-t{
    font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600;
    color:var(--ink); margin-bottom:5px; letter-spacing:-.01em;
  }

.accred-item .ai-d{font-size:12.2px; line-height:1.58; color:var(--text-soft);}

/* ---- FAQ ---- */
  .faq-item{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    margin-bottom:9px; overflow:hidden;
  }

.faq-q{
    width:100%; text-align:left; background:none; border:none; padding:16px 20px;
    font-size:14.2px; font-weight:700; color:var(--ink); display:flex;
    justify-content:space-between; align-items:center; gap:14px; font-family:'Instrument Sans',sans-serif;
  }

.faq-q .chev{color:var(--jade); font-size:17px; flex-shrink:0; transition:transform .18s;}

.faq-item.open .faq-q .chev{transform:rotate(45deg);}

.faq-a{padding:0 20px 17px; font-size:13.6px; line-height:1.72; color:var(--text-soft);}

.faq-a p + p{margin-top:9px;}

/* ---- consultant / concierge block ---- */
  .concierge{
    background:linear-gradient(150deg,#071426,#16304F); color:#fff;
    border-radius:14px; padding:32px 36px; display:flex; gap:32px; align-items:center; flex-wrap:wrap;
  }

.concierge-txt{flex:1; min-width:280px;}

.concierge h3{font-size:25px; font-weight:600; margin-bottom:10px; color:#fff;}

.concierge p{font-size:14.2px; line-height:1.66; color:rgba(255,255,255,.78); max-width:56ch;}

.concierge-act{display:flex; flex-direction:column; gap:9px; min-width:220px;}

/* ---- seasonal fare calendar ---- */
  .season-strip{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin:6px 0 10px;}

.season-cell{
    padding:9px 3px 8px; text-align:center; border-radius:5px;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
  }

.season-cell.low{background:#E6F0F8; color:var(--navy-700);}

.season-cell.shoulder{background:#EEF2F7; color:var(--text-soft);}

.season-cell.peak{background:var(--orange-wash); color:var(--orange-deep);}

.season-cell .m{display:block; font-size:9.5px; opacity:.72; font-weight:500;}

/* ---- responsive ---- */
  @media (max-width:1080px){
    .cabin-grid{grid-template-columns:1fr;}
    .route-grid{grid-template-columns:1fr;}
    .doc-toc ol{grid-template-columns:1fr;}
  }

@media (max-width:640px){
    .sec-head h2{font-size:23px;}
    .doc-hero{padding:26px 20px 24px;}
    .doc-hero h1{font-size:25px;}
    .doc-sec{padding:20px 18px;}
    .concierge{padding:24px 20px;}
    .season-strip{grid-template-columns:repeat(6,1fr);}
    .accred-item{min-width:100%;}
  }

/* =====================================================================
     MOTION LAYER
     One orchestrated page-load sequence, scroll reveals, and a single
     ambient element (the swoosh from the logo, flying). Everything below
     is switched off wholesale by prefers-reduced-motion at the bottom.
     ===================================================================== */

  @keyframes tnf-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@keyframes tnf-fade{ from{ opacity:0; } to{ opacity:1; } }

@keyframes tnf-sweep{ from{ transform:translateX(-120%) skewX(-18deg); } to{ transform:translateX(320%) skewX(-18deg); } }

@keyframes tnf-kenburns{ from{ transform:scale(1.06) translate3d(0,0,0); } to{ transform:scale(1.16) translate3d(-1.4%,-1.8%,0); } }

@keyframes tnf-drift{ 0%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(2.5%,-3%,0); } 100%{ transform:translate3d(0,0,0); } }

@keyframes tnf-fly{
    0%{ offset-distance:0%; opacity:0; }
    8%{ opacity:.85; }
    88%{ opacity:.85; }
    100%{ offset-distance:100%; opacity:0; }
  }

@keyframes tnf-pulse{ 0%,100%{ box-shadow:0 0 0 0 var(--orange-glow); } 55%{ box-shadow:0 0 0 12px rgba(240,180,41,0); } }

@keyframes tnf-spin{ to{ transform:rotate(360deg); } }

@keyframes tnf-bar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* page-load sequence: children stagger in rather than all at once */
  .stagger > *{ animation:tnf-rise .62s var(--ease) both; }

.stagger > *:nth-child(1){ animation-delay:.04s; }

.stagger > *:nth-child(2){ animation-delay:.12s; }

.stagger > *:nth-child(3){ animation-delay:.20s; }

.stagger > *:nth-child(4){ animation-delay:.28s; }

.stagger > *:nth-child(5){ animation-delay:.36s; }

.stagger > *:nth-child(6){ animation-delay:.44s; }

/* scroll reveal, driven by IntersectionObserver */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:opacity,transform; }

.reveal.in{ opacity:1; transform:none; }

.reveal.d1{ transition-delay:.08s; }

.reveal.d2{ transition-delay:.16s; }

.reveal.d3{ transition-delay:.24s; }

.reveal.d4{ transition-delay:.32s; }

/* the lie-flat bar draws itself when it scrolls into view */
  .flatbar .fb-seg{ transform-origin:left center; animation:tnf-bar .85s var(--ease) both; }

.flatbar .fb-seg:nth-child(2){ animation-delay:.1s; }

.flatbar .fb-seg:nth-child(3){ animation-delay:.2s; }

/* headline words rise one after another */
  .hero-line:nth-of-type(1) > span{ animation-delay:.10s; }

.hero-line:nth-of-type(2) > span{ animation-delay:.22s; }

/* stat counters */

  /* ---- destination tiles with parallax-ish depth ---- */
  .dest-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

.dest-card{
    position:relative; height:250px; border-radius:var(--radius); overflow:hidden;
    cursor:pointer; background:var(--navy-800); isolation:isolate;
    box-shadow:var(--shadow);
  }

.dest-card img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform 1.1s var(--ease), filter .5s var(--ease);
    transform:scale(1.04);
  }

.dest-card::after{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(7,20,38,.05) 28%, rgba(7,20,38,.82) 78%, rgba(7,20,38,.94) 100%);
    transition:background .45s var(--ease);
  }

.dest-card:hover img{ transform:scale(1.14); filter:saturate(1.1); }

.dest-card:hover::after{ background:linear-gradient(180deg, rgba(7,20,38,.02) 18%, rgba(7,20,38,.72) 70%, rgba(240,180,41,.34) 100%); }

.dest-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 18px 17px; color:#fff; }

.dest-city{ font-family:'Archivo',sans-serif; font-weight:800; font-size:21px; letter-spacing:-.02em; line-height:1.1; }

.dest-sub{ font-size:11.5px; color:rgba(255,255,255,.68); margin-top:2px; letter-spacing:.03em; }

.dest-price{
    margin-top:10px; display:flex; align-items:baseline; gap:6px;
    font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:600;
    transform:translateY(6px); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);
  }

.dest-card:hover .dest-price{ transform:none; opacity:1; }

.dest-price small{ font-family:'Instrument Sans',sans-serif; font-size:10.5px; color:rgba(255,255,255,.6); font-weight:500; }

.dest-tag{
    position:absolute; top:14px; left:14px; z-index:2; padding:4px 10px; border-radius:999px;
    background:rgba(240,180,41,.94); color:#fff; font-size:10.5px; font-weight:800;
    letter-spacing:.07em; text-transform:uppercase;
  }

/* ---- ambient band with a fixed backdrop ---- */
  .band{
    position:relative; border-radius:16px; overflow:hidden; padding:52px 46px; color:#fff; margin:44px 0;
  }

.band-media{ position:absolute; inset:0; z-index:0; }

.band-media img{ width:100%; height:100%; object-fit:cover; animation:tnf-drift 30s ease-in-out infinite; }

.band-media::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(95deg, rgba(7,20,38,.95) 8%, rgba(7,20,38,.80) 52%, rgba(240,180,41,.28) 100%);
  }

.band > *:not(.band-media){ position:relative; z-index:1; }

/* ---- buttons get a light sweep on hover ---- */
  .btn{ position:relative; overflow:hidden; transition:transform .18s var(--ease), box-shadow .22s var(--ease), background .18s; }

.btn:hover{ transform:translateY(-1px); }

.btn:active{ transform:translateY(0); }

.btn-primary{ box-shadow:0 10px 26px -12px var(--orange-glow); }

.btn-primary:hover{ box-shadow:0 16px 34px -12px var(--orange-glow); }

.btn-primary::after{
    content:''; position:absolute; top:0; bottom:0; width:38%; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
    transform:translateX(-120%) skewX(-18deg); opacity:0;
  }

.btn-primary:hover::after{ animation:tnf-sweep .72s var(--ease); opacity:1; }

.btn-lg.pulse{ animation:tnf-pulse 2.6s ease-out infinite; }

/* ---- card + row micro-interactions ---- */
  .card, .result-card, .deal-card, .route-card, .cabin-card, .accred-item, .faq-item{
    transition:transform .2s var(--ease), box-shadow .24s var(--ease), border-color .2s;
  }

.result-card:hover, .cabin-card:hover, .accred-item:hover{
    transform:translateY(-3px); box-shadow:var(--shadow);
  }

.result-card{ position:relative; overflow:hidden; }

.result-card::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg,var(--orange),var(--orange-lift));
    transform:scaleY(0); transform-origin:top; transition:transform .28s var(--ease);
  }

.result-card:hover::before{ transform:scaleY(1); }

.nav-link, .nav-item, .quote-row, .tbl tbody tr{ transition:background .18s, color .18s, transform .18s var(--ease); }

.quote-row:hover{ transform:translateX(3px); }

/* animated underline on the site nav */
  .nav-link{ position:relative; }

.nav-link::after{
    content:''; position:absolute; left:13px; right:13px; bottom:5px; height:2px; border-radius:2px;
    background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .26s var(--ease);
  }

.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }

/* pipeline stages fill on load */
  .pipe-stage{ transition:transform .2s var(--ease), border-color .2s, box-shadow .2s; }

.pipe-stage:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }

/* skeleton shimmer for the search state */
  .skel{
    background:linear-gradient(90deg,#EDF2F7 25%,#F5F8FB 37%,#EDF2F7 63%);
    background-size:400% 100%; animation:tnf-shimmer 1.3s ease infinite; border-radius:6px;
  }

@keyframes tnf-shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

.searching{ display:flex; flex-direction:column; gap:12px; }

.searching-head{
    display:flex; align-items:center; gap:12px; font-size:14px; font-weight:700; color:var(--navy-800);
    padding:4px 0 8px;
  }

.spinner{
    width:17px; height:17px; border-radius:50%; flex-shrink:0;
    border:2.4px solid rgba(240,180,41,.22); border-top-color:var(--orange);
    animation:tnf-spin .72s linear infinite;
  }

/* toast used when the two apps talk to each other */
  .toast-wrap{ position:fixed; right:22px; bottom:22px; z-index:200; display:flex; flex-direction:column; gap:9px; }

.toast{
    background:var(--navy-950); color:#fff; border-radius:11px; padding:13px 17px;
    box-shadow:var(--shadow-lg); font-size:13.2px; max-width:340px;
    border-left:3px solid var(--orange); animation:tnf-rise .4s var(--ease) both;
    display:flex; gap:11px; align-items:flex-start;
  }

.toast b{ display:block; font-size:13px; margin-bottom:2px; }

.toast .tx{ color:rgba(255,255,255,.72); line-height:1.5; font-size:12.4px; }

.toast .dot{ width:8px; height:8px; border-radius:50%; background:var(--orange); margin-top:4px; flex-shrink:0; animation:tnf-pulse 1.8s ease-out infinite; }

/* live-link chip showing the two apps are connected */
  .link-chip{
    display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
    background:rgba(240,180,41,.12); border:1px solid rgba(240,180,41,.32); color:var(--orange-lift);
    font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  }

.link-chip .live{ width:6px; height:6px; border-radius:50%; background:var(--orange); animation:tnf-pulse 2s ease-out infinite; }

.link-chip.on-light{ background:var(--orange-wash); border-color:#F7DFA4; color:var(--orange-deep); }

@media (max-width:1080px){ .dest-grid{ grid-template-columns:repeat(2,1fr); } .band{ padding:36px 26px; } }

@media (max-width:640px){
    .dest-grid{ grid-template-columns:1fr; } .dest-card{ height:210px; }
    .band{ padding:28px 20px; } .toast-wrap{ right:12px; left:12px; bottom:12px; }
  }

/* honour the OS setting — everything above is decoration */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important;
    }
    .reveal{ opacity:1; transform:none; }
  }

.tnf-mark .tw{ color:currentColor; }

.tnf-mark .tn-swoosh .jetlet{ fill:var(--orange); }

/* dark-on-light variant for invoices, the sign-in card and print */
  .tnf-mark.on-light{ color:var(--navy-950); }

.tnf-mark.sm{ font-size:20px; }

.tnf-mark.lg{ font-size:34px; }

@media (prefers-reduced-motion:no-preference){
    .tnf-mark .jetlet{ transform-box:fill-box; transform-origin:center; }
    .tnf-mark:hover .jetlet{ animation:tnf-jetlift .6s var(--ease); }
  }

@keyframes tnf-jetlift{ 0%{transform:translate(0,0);} 45%{transform:translate(3px,-3px);} 100%{transform:translate(0,0);} }

/* small country badge — flag emoji don't render on Windows, and a
     two-letter badge reads the same everywhere */
  .cc{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:15px; padding:0 4px; border-radius:3px;
    background:rgba(255,255,255,.16); color:#fff;
    font-size:9.5px; font-weight:800; letter-spacing:.06em;
    font-family:'Instrument Sans',sans-serif;
  }

.cc.on-light{ background:var(--navy-800); color:#fff; }

.cc.solid{ background:var(--orange); color:#fff; }

/* =====================================================================
     LEAD FORM — the primary conversion surface in phase 1, and the second
     tab in phase 2. Kept on a cream card so it lifts off the near-black
     hero without shouting; orange is spent only on the submit button.
     ===================================================================== */
  .lead-card{
    background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);
    border-radius:16px; overflow:hidden;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.68), 0 0 0 1px rgba(255,255,255,.10);
    animation:tnf-rise .72s var(--ease) both; animation-delay:.18s;
  }

.lead-top{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:0 16px; background:var(--obsidian); flex-wrap:wrap;
  }

.lead-tabs{ display:flex; gap:2px; }

.lead-tab{
    padding:14px 18px 12px; background:none; border:none; color:rgba(255,255,255,.60);
    font-size:13.5px; font-weight:700; position:relative; white-space:nowrap;
    font-family:'Archivo',sans-serif;
  }

.lead-tab::after{
    content:''; position:absolute; left:18px; right:18px; bottom:0; height:2px;
    background:var(--orange); transform:scaleX(0); transition:transform .26s var(--ease);
  }

.lead-tab.active{ color:#fff; }

.lead-tab.active::after{ transform:scaleX(1); }

.cabin-pills{ display:flex; gap:5px; padding:8px 0; }

.cabin-pill{
    display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.70); font-size:12px; font-weight:700; white-space:nowrap;
    font-family:'Archivo',sans-serif; transition:all .18s var(--ease);
  }

.cabin-pill:hover{ background:rgba(255,255,255,.13); color:#fff; }

.cabin-pill.on{ background:var(--orange); border-color:var(--orange); color:#fff; }

.cabin-pill svg{ width:13px; height:13px; }

.lead-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px; }

.lead-head h2{ font-size:25px; line-height:1.08; color:var(--navy-950); }

.lead-head p{ font-size:12.8px; color:var(--text-soft); margin-top:3px; }

.secure-chip{
    display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
    background:var(--success-bg); color:var(--success); border:1px solid #C6E7D4;
    font-size:11px; font-weight:800; white-space:nowrap; font-family:'Archivo',sans-serif;
  }

.desk-strip{
    display:flex; align-items:center; gap:11px; margin:12px 0 13px; padding:9px 12px;
    border-radius:10px; background:#fff; border:1px solid var(--border);
  }

.desk-faces{ display:flex; }

.desk-face{
    width:27px; height:27px; border-radius:50%; border:2px solid #fff; margin-left:-8px;
    display:flex; align-items:center; justify-content:center;
    font-size:9.5px; font-weight:800; color:#fff; font-family:'Archivo',sans-serif;
  }

.desk-face:first-child{ margin-left:0; }

.desk-txt{ flex:1; min-width:0; }

.desk-txt b{ font-size:12.6px; color:var(--navy-950); display:block; }

.desk-txt span{ font-size:11.6px; color:var(--text-soft); }

.desk-live{
    width:7px; height:7px; border-radius:50%; background:var(--success); flex-shrink:0;
    box-shadow:0 0 0 3px rgba(31,157,99,.16);
  }

.desk-live.off{ background:var(--text-faint); box-shadow:0 0 0 3px rgba(138,153,171,.16); }

.lead-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 11px; }

.lead-grid .field label{ font-size:10.5px; letter-spacing:.06em; }

.lead-grid .full{ grid-column:1 / -1; }

.lead-grid .input-wrap{ background:#fff; }

.phone-row{ display:grid; grid-template-columns:96px 1fr; gap:7px; }

.phone-row select{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:0 8px; height:44px; font-size:13px; font-weight:600; color:var(--text);
  }

.consent{
    display:flex; gap:9px; align-items:flex-start; margin:12px 0 0;
    padding:10px 12px; border-radius:9px; background:#fff; border:1px solid var(--border);
  }

.consent input{ margin-top:2px; accent-color:var(--orange); width:15px; height:15px; flex-shrink:0; }

.consent-txt{ font-size:11.2px; line-height:1.56; color:var(--text-soft); }

.consent-txt a{ color:var(--orange-deep); text-decoration:underline; text-underline-offset:2px; }

.consent.invalid{ border-color:var(--accent); background:var(--orange-wash); }

.lead-cta{
    width:100%; margin-top:12px; padding:15px; border-radius:11px; border:none;
    background:linear-gradient(180deg,var(--orange-lift),var(--orange));
    color:#fff; font-size:16px; font-weight:800; font-family:'Archivo',sans-serif;
    letter-spacing:.01em; display:flex; align-items:center; justify-content:center; gap:9px;
    box-shadow:0 14px 32px -12px var(--orange-glow);
    position:relative; overflow:hidden; transition:transform .18s var(--ease), box-shadow .22s var(--ease);
  }

.lead-cta:hover{ transform:translateY(-1px); box-shadow:0 20px 42px -12px var(--orange-glow); }

.lead-cta::after{
    content:''; position:absolute; top:0; bottom:0; width:38%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
    transform:translateX(-140%) skewX(-18deg);
  }

.lead-cta:hover::after{ animation:tnf-sweep .8s var(--ease); }

.lead-foot{
    display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
    margin-top:11px; font-size:11px; font-weight:600; color:var(--text-faint);
  }

.lead-foot span{ display:flex; align-items:center; gap:5px; }

/* phase-1 notice on pages that would otherwise offer a price */
  .phase-note{
    display:flex; gap:12px; align-items:flex-start; padding:15px 17px; border-radius:11px;
    background:var(--navy-950); color:rgba(242,245,249,.78); font-size:13px; line-height:1.6;
    border-left:3px solid var(--orange); margin-bottom:18px;
  }

.phase-note b{ color:#fff; display:block; margin-bottom:3px; font-size:13.4px; }

@media (max-width:760px){
    .lead-grid{ grid-template-columns:1fr; }
    .lead-top{ padding:0 10px; }
    .lead-tab{ padding:12px 12px 10px; font-size:12.5px; }
    .cabin-pill{ padding:6px 9px; font-size:11px; }
    .lead-head h2{ font-size:23px; }
  }

/* =====================================================================
     HERO + WORDMARK — one authoritative definition each.
     Both were previously spread across five rule blocks written over as
     many revisions, each partly overriding the last. That is why the stage
     ended up taller than the viewport with its content pinned to the
     bottom, and the photograph buried under a 95% scrim: dark, but not
     elegant. Everything for the hero now lives here and nowhere else.

     Composition: a 600px stage with the content vertically centred, and a
     *diagonal* scrim — opaque under the headline, thinning to 38% across
     the right third — so the city reads as photography instead of texture.
     One hairline rule, one row of figures. The restraint is the point.
     ===================================================================== */
  .hero-media{ position:absolute; inset:0; z-index:0; }

/* If the photograph fails to load the hero keeps its gradient and reads
     the same on every page, rather than one page looking different. */
  .hero-media.no-img img{ display:none; }

.hero-media.no-img::after{ background:radial-gradient(700px 420px at 88% 6%, rgba(240,180,41,.20), transparent 68%); }

.hero-media img{
    width:100%; height:100%; object-fit:cover; object-position:50% 64%;
    animation:tnf-kenburns 30s ease-in-out infinite alternate;
  }

.hero-media::after{
    content:''; position:absolute; inset:0;
    background:
      linear-gradient(104deg,
        rgba(4,16,31,.94) 0%, rgba(4,16,31,.88) 30%,
        rgba(4,16,31,.70) 52%, rgba(4,16,31,.46) 74%, rgba(4,16,31,.38) 100%),
      linear-gradient(0deg, rgba(4,16,31,.70) 0%, transparent 40%),
      radial-gradient(600px 340px at 92% 4%, rgba(240,180,41,.15), transparent 70%);
  }

.hero-plane{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.hero-plane .arc{ fill:none; stroke:rgba(240,180,41,.26); stroke-width:1.4; stroke-dasharray:4 9; }

.hero-plane .jet{ offset-path:path('M -40 300 Q 400 60 1240 190'); offset-rotate:auto; animation:tnf-fly 15s linear infinite; }

.hero-copy{ min-width:0; }

.hero-form{ min-width:0; }

.hero-eyebrow{
    display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
    padding:6px 14px 6px 8px; border-radius:999px;
    border:1px solid rgba(255,224,138,.26); background:rgba(255,224,138,.06);
    color:var(--champagne); font-family:'Archivo',sans-serif;
    font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  }

.tnf-hero h1{
    font-family:'Archivo',system-ui,sans-serif; font-weight:400;
    font-size:clamp(38px,4.05vw,60px); line-height:.97; letter-spacing:-.015em;
    color:#fff; margin-bottom:20px; max-width:13ch;
  }

.tnf-hero h1 em{ font-style:italic; color:var(--champagne); }

.hero-line{ display:block; overflow:hidden; padding-bottom:.07em; }

.hero-line > span{ display:inline-block; animation:tnf-rise .8s var(--ease) both; }

.hero-line:nth-of-type(1) > span{ animation-delay:.08s; }

.hero-line:nth-of-type(2) > span{ animation-delay:.20s; }

.hero-sub{ font-size:15px; line-height:1.66; color:rgba(242,245,249,.74); max-width:42ch; }

.hero-sub b{ color:var(--cream); font-weight:600; }

.hero-stats{
    display:flex; gap:36px; flex-wrap:wrap;
    margin:26px 0 0; padding-top:22px;
    border-top:1px solid rgba(255,224,138,.20);
  }

.hero-stat .n{
    display:block; font-family:'Archivo',system-ui,sans-serif; font-size:31px; line-height:1;
    color:var(--champagne); font-variant-numeric:tabular-nums;
  }

.hero-stat .l{
    display:block; margin-top:7px; font-family:'Archivo',sans-serif;
    font-size:10px; letter-spacing:.13em; text-transform:uppercase;
    font-weight:700; color:rgba(242,245,249,.42);
  }

/* Wordmark, tightened so it reads as one word rather than three.
     The swoosh now sweeps through the N instead of floating above it. */
  .tnf-mark{
    display:inline-flex; align-items:center; gap:0; line-height:1;
    font-family:'Archivo',system-ui,sans-serif; font-weight:800;
    font-size:25px; letter-spacing:-.032em; white-space:nowrap;
    color:#fff; text-decoration:none; cursor:pointer;
  }

.tnf-mark .tn{
    position:relative; color:var(--orange);
    padding:0 .13em 0 .10em; display:inline-flex; align-items:center; justify-content:center;
  }

.tnf-mark .tn-swoosh{
    position:absolute; left:-24%; top:-48%; width:150%; height:192%;
    overflow:visible; pointer-events:none;
  }

.tnf-mark .tn-swoosh .sw{ fill:none; stroke:var(--orange); stroke-width:4.4; stroke-linecap:round; }

.tnf-mark.on-light{ color:var(--navy-950); }

@media (max-width:1240px){
    .tnf-hero{ min-height:0; padding:34px 30px 36px; }
    .tnf-hero h1{ max-width:16ch; }
    .hero-sub{ max-width:58ch; }
  }

@media (max-width:760px){
    .tnf-hero{ padding:26px 18px 28px; border-radius:14px; }
    .tnf-hero h1{ font-size:34px; max-width:100%; }
    .hero-stats{ gap:24px; margin-top:20px; padding-top:18px; }
    .hero-stat .n{ font-size:26px; }
    .hero-media img{ object-position:60% 60%; }
  }

/* =====================================================================
     LANDING PAGES — one shell, two campaigns.
     Built for paid traffic: a single conversion goal per page, the form
     visible without scrolling, and every section below it answering the
     one objection that stops that audience booking.
     ===================================================================== */
  .lp{ margin:0; }

/* ---- alternating content bands ---- */
  .lp-sec{ padding:64px 32px; }

.lp-sec.dark{ background:var(--navy-950); }

.lp-sec.navy{ background:linear-gradient(160deg,#071C33,#0E2338); }

.lp-sec.paper{ background:var(--paper); }

.lp-sec.sand{ background:var(--sand); }

.lp-inner{ max-width:1240px; margin:0 auto; }

.lp-sec-head{ max-width:64ch; margin-bottom:34px; }

.lp-kicker{
    font-family:'Archivo',sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:.15em; text-transform:uppercase; margin-bottom:11px;
  }

.lp-sec.dark .lp-kicker, .lp-sec.navy .lp-kicker{ color:var(--champagne); }

.lp-sec.paper .lp-kicker, .lp-sec.sand .lp-kicker{ color:var(--orange); }

.lp-h2{
    font-family:'Archivo',system-ui,sans-serif; font-weight:400;
    font-size:clamp(27px,2.6vw,38px); line-height:1.1; letter-spacing:-.012em; margin-bottom:13px;
  }

.lp-sec.dark .lp-h2, .lp-sec.navy .lp-h2{ color:#fff; }

.lp-sec.paper .lp-h2, .lp-sec.sand .lp-h2{ color:var(--navy-950); }

.lp-lead{ font-size:15px; line-height:1.72; }

.lp-sec.dark .lp-lead, .lp-sec.navy .lp-lead{ color:rgba(242,245,249,.70); }

.lp-sec.paper .lp-lead, .lp-sec.sand .lp-lead{ color:var(--text-soft); }

.lp-g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

.lp-g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.lp-g2{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }

.lp-card{
    padding:24px 22px; border-radius:13px;
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
    transition:transform .22s var(--ease), border-color .22s, background .22s;
  }

.lp-card:hover{ transform:translateY(-3px); border-color:rgba(240,180,41,.42); background:rgba(255,255,255,.07); }

.lp-card .ic{
    width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:rgba(240,180,41,.14); border:1px solid rgba(240,180,41,.28); margin-bottom:15px;
  }

.lp-card .ic svg{ width:17px; height:17px; stroke:var(--orange-lift); }

.lp-card h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:15px; color:#fff; margin-bottom:8px; letter-spacing:-.01em; }

.lp-card p{ font-size:13.2px; line-height:1.68; color:rgba(242,245,249,.62); }

.lp-sec.paper .lp-card, .lp-sec.sand .lp-card{ background:#fff; border-color:var(--border); }

.lp-sec.paper .lp-card h3, .lp-sec.sand .lp-card h3{ color:var(--navy-950); }

.lp-sec.paper .lp-card p, .lp-sec.sand .lp-card p{ color:var(--text-soft); }

/* numbered process rail */
  .lp-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }

.lp-steps::before{
    content:''; position:absolute; left:8%; right:8%; top:19px; height:1px;
    background:linear-gradient(90deg,transparent,rgba(240,180,41,.42) 12%,rgba(240,180,41,.42) 88%,transparent);
  }

.lp-step{ position:relative; padding-right:22px; }

.lp-step .n{
    width:39px; height:39px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--navy-950); border:1px solid var(--orange); color:var(--orange-lift);
    font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; margin-bottom:16px; position:relative; z-index:1;
  }

.lp-sec.paper .lp-step .n, .lp-sec.sand .lp-step .n{ background:#fff; }

.lp-step h4{ font-family:'Archivo',sans-serif; font-weight:700; font-size:14.5px; margin-bottom:7px; }

.lp-sec.dark .lp-step h4, .lp-sec.navy .lp-step h4{ color:#fff; }

.lp-sec.paper .lp-step h4, .lp-sec.sand .lp-step h4{ color:var(--navy-950); }

.lp-step p{ font-size:12.8px; line-height:1.7; max-width:230px; }

.lp-sec.dark .lp-step p, .lp-sec.navy .lp-step p{ color:rgba(242,245,249,.58); }

.lp-sec.paper .lp-step p, .lp-sec.sand .lp-step p{ color:var(--text-soft); }

/* comparison table */
  .lp-table{ width:100%; border-collapse:collapse; font-size:13.4px; }

.lp-table th{
    text-align:left; padding:13px 16px; font-family:'Archivo',sans-serif; font-weight:700;
    font-size:11px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--champagne); border-bottom:1px solid rgba(255,224,138,.22);
  }

.lp-table td{
    padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.07);
    color:rgba(242,245,249,.72); line-height:1.6; vertical-align:top;
  }

.lp-table tr:last-child td{ border-bottom:none; }

.lp-table td:first-child{ color:#fff; font-weight:600; }

.lp-table .yes{ color:#5FD79A; font-weight:700; }

.lp-table .no{ color:#FF8A6B; font-weight:700; }

.lp-sec.paper .lp-table th{ color:var(--orange); border-bottom-color:var(--border); }

.lp-sec.paper .lp-table td{ color:var(--text-soft); border-bottom-color:var(--border-soft); }

.lp-sec.paper .lp-table td:first-child{ color:var(--navy-950); }

/* route price rail */
  .lp-routes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:12px; }

.lp-route{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 18px; border-radius:11px; cursor:pointer;
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
    transition:all .2s var(--ease);
  }

.lp-route:hover{ border-color:var(--orange); background:rgba(240,180,41,.09); transform:translateX(3px); }

.lp-route .pair{ font-family:'JetBrains Mono',monospace; font-size:14.5px; font-weight:600; color:#fff; }

.lp-route .city{ font-size:11.4px; color:rgba(242,245,249,.50); margin-top:3px; }

.lp-route .p{ font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:var(--champagne); white-space:nowrap; }

.lp-route .p small{ display:block; font-family:'Archivo',sans-serif; font-size:9.5px; letter-spacing:.07em;
    text-transform:uppercase; color:rgba(242,245,249,.36); margin-top:3px; font-weight:700; }

/* closing call to action */
  .lp-close{
    text-align:center; max-width:640px; margin:0 auto;
  }

.lp-close h2{ font-family:'Archivo',system-ui,sans-serif; font-weight:400; font-size:clamp(28px,3vw,42px); line-height:1.08; color:#fff; margin-bottom:14px; }

.lp-close p{ font-size:15px; line-height:1.7; color:rgba(242,245,249,.70); margin-bottom:26px; }

.lp-close-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width:1180px){
    .lp-g4{ grid-template-columns:repeat(2,1fr); }
    .lp-steps{ grid-template-columns:repeat(2,1fr); gap:28px 0; }
    .lp-steps::before{ display:none; }
  }

@media (max-width:760px){
    .lp{ margin:-28px -18px 0; }
    .lp-sec{ padding:44px 18px; }
    .lp-g4,.lp-g3,.lp-g2{ grid-template-columns:1fr; gap:14px; }
    .lp-steps{ grid-template-columns:1fr; }
    .lp-step{ padding-right:0; }
    .lp-step p{ max-width:none; }
    .lp-table{ font-size:12.5px; }
    .lp-table th,.lp-table td{ padding:10px 11px; }
  }

/* =====================================================================
     FULL-WIDTH LAYOUT
     The site was rendering inside a 1320px card with a dotted backdrop and
     side gutters — which reads as an app, not a website. Marketing pages
     now run edge to edge, with each band holding its own inner container.
     `body.bleed` is toggled by the router for the home page and the two
     campaign landing pages; everything else keeps the contained layout.
     ===================================================================== */
  :root{ --wrap:1480px; --gut:44px; }

body.bleed .content{ padding:0 0 0; }

body.bleed .content-inner{ max-width:none; }

body.bleed .main::before{ display:none; }

/* no dotted texture behind full-bleed bands */

  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

/* the home page's own sections re-acquire the container when full-bleed */
  body.bleed .sec,
  body.bleed .badge-row,
  body.bleed .band{
    max-width:var(--wrap); margin-left:auto; margin-right:auto;
    padding-left:var(--gut); padding-right:var(--gut);
  }

body.bleed .band{ padding-top:52px; padding-bottom:52px; }

body.bleed .sec:first-of-type{ margin-top:52px; }

body.bleed .site-footer{ padding-left:var(--gut); padding-right:var(--gut); }

.site-header-inner{ max-width:var(--wrap); padding:0 var(--gut); }

.footer-inner, .footer-bottom{ max-width:var(--wrap); }

/* ---- hero: edge to edge, inner grid holds the container ---- */
  .lp{ margin:0; }

.lp-sec{ padding:72px var(--gut); }

.lp-inner{ max-width:var(--wrap); }

/* =====================================================================
     FORM SIZING — matched to a real booking form, not a sidebar widget.
     684px card, 56px inputs, 28px padding. At this size the two-column
     field grid stops feeling cramped and the whole thing reads as the
     primary object on the page rather than an afterthought beside it.
     ===================================================================== */
  .lead-card{ border-radius:18px; }

.lead-top{ padding:0 20px; }

.lead-tab{ padding:17px 20px 15px; font-size:14.5px; }

.lead-tab::after{ left:20px; right:20px; }

.cabin-pills{ padding:10px 0; gap:6px; }

.cabin-pill{ padding:9px 14px; font-size:12.5px; }

.cabin-pill svg{ width:14px; height:14px; }

.lead-body{ padding:26px 28px 28px; }

.lead-head h2{ font-size:30px; }

.lead-head p{ font-size:13.5px; margin-top:4px; }

.secure-chip{ padding:5px 12px; font-size:11.5px; }

.desk-strip{ margin:18px 0 18px; padding:12px 15px; border-radius:11px; }

.desk-face{ width:31px; height:31px; font-size:10.5px; }

.desk-txt b{ font-size:13.4px; }

.desk-txt span{ font-size:12.2px; }

.lead-grid{ grid-template-columns:1fr 1fr; gap:14px; }

.lead-grid .field label{
    font-size:11px; letter-spacing:.08em; font-weight:700;
    color:var(--text-faint); margin-bottom:7px;
  }

.lead-card .input-wrap,
  .lead-card .pax-trigger{
    height:56px; border-radius:9px; padding:0 15px; font-size:14.5px; background:#fff;
  }

.lead-card .input-wrap input{ font-size:14.5px; }

.lead-card .input-wrap svg{ width:17px; height:17px; }

.phone-row{ grid-template-columns:112px 1fr; gap:9px; }

.phone-row select{ height:56px; font-size:13.5px; border-radius:9px; padding:0 10px; }

.trip-toggle{ gap:22px; margin-bottom:17px; }

.trip-toggle label{ font-size:14px; }

.consent{ margin:17px 0 0; padding:13px 15px; border-radius:10px; }

.consent-txt{ font-size:12px; line-height:1.6; }

.consent input{ width:17px; height:17px; }

.lead-cta{ margin-top:16px; padding:18px; font-size:17px; border-radius:12px; }

.lead-foot{ margin-top:14px; font-size:11.8px; gap:16px; }

@media (max-width:1320px){
  }

@media (max-width:1120px){
    :root{ --gut:28px; }
  }

@media (max-width:760px){
    :root{ --gut:18px; }
    .lead-body{ padding:18px 17px 20px; }
    .lead-head h2{ font-size:24px; }
    .lead-card .input-wrap, .lead-card .pax-trigger, .phone-row select{ height:50px; font-size:14px; }
    .lead-cta{ padding:16px; font-size:15.5px; }
    .lead-grid{ grid-template-columns:1fr; gap:12px; }
    .lp-sec{ padding:46px var(--gut); }
  }

/* =====================================================================
     LEAD FORM GEOMETRY — matched to the supplied reference build.
     Every number here is taken from that file rather than estimated:
       hero grid   1180px max, 1.05fr / 1fr, 56px gap  → form column ≈548px
       field       46px tall, 12px radius, 14px text
       label       10px, 1.5px tracking, 4px above the field
       row         10px gap, 10px below
       consent     10.5px / 1.5
       footnote    10px
     These sit last in the stylesheet so they win the cascade outright.
     ===================================================================== */
  .lead-card{ border-radius:20px; box-shadow:0 0 0 1px rgba(240,180,41,.16), 0 40px 100px rgba(0,0,0,.55); }

.lead-top{ padding:6px 10px 0 6px; border-radius:20px 20px 0 0; }

.lead-tab{ padding:11px 14px 10px; font-size:12.5px; }

.lead-tab::after{ left:14px; right:14px; }

.cabin-pills{ padding:6px 0; gap:5px; }

.cabin-pill{ padding:6px 11px; font-size:11.5px; border-radius:7px; }

.lead-body{ padding:18px 22px 20px; border-radius:0 0 20px 20px; }

.lead-head{ margin-bottom:12px; }

.lead-head h2{ font-size:25px; line-height:1; letter-spacing:-.4px; }

.lead-head p{ font-size:11.5px; margin-top:4px; }

.secure-chip{ font-size:10px; padding:4px 9px; }

.desk-strip{ margin:0 0 12px; padding:9px 11px; gap:10px; border-radius:10px; }

.desk-face{ width:25px; height:25px; font-size:9px; }

.desk-txt b{ font-size:12px; }

.desk-txt span{ font-size:10.5px; }

.trip-toggle{ gap:18px; margin-bottom:11px; }

.trip-toggle label{ font-size:12.5px; }

.lead-grid{ gap:10px; }

.lead-grid .field{ gap:4px; }

.lead-grid .field label{
    font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--text-faint); padding-left:2px;
  }

.lead-grid .input-wrap{
    height:46px; border-radius:12px; padding:0 13px; gap:9px;
    background:#F7F9FC; border:1.5px solid #E6ECF3;
  }

.lead-grid .input-wrap:focus-within{
    border-color:var(--orange); background:#fff;
    box-shadow:0 0 0 3px rgba(240,180,41,.10);
  }

.lead-grid .input-wrap input{ font-size:14px; font-weight:500; }

.lead-grid .input-wrap svg{ width:15px; height:15px; color:var(--orange); flex-shrink:0; }

.lead-grid .input-wrap.invalid{ border-color:#D93025; background:#FEF6F5; }

.phone-row{ grid-template-columns:104px 1fr; gap:7px; }

.phone-row select{
    height:46px; border-radius:12px; font-size:13px;
    background:#F7F9FC; border:1.5px solid #E6ECF3; padding:0 8px;
  }

.lead-grid .err-msg{
    font-size:10px; color:#D93025; font-weight:600; margin-top:1px; padding-left:2px;
  }

.consent{ margin:10px 0 2px; padding:0; background:none; border:none; gap:9px; }

.consent-txt{ font-size:10.5px; line-height:1.5; color:var(--text-faint); }

.consent input{ width:17px; height:17px; min-width:17px; margin-top:1px; }

.consent.invalid{ background:none; border:none; }

.consent.invalid .consent-txt{ color:var(--text-soft); }

.lead-cta{ margin-top:12px; padding:14px; font-size:15px; border-radius:12px; }

.lead-foot{ margin-top:10px; gap:12px; font-size:10px; }

@media (max-width:1180px){
  }

@media (max-width:560px){
    .lead-grid{ grid-template-columns:1fr; }
    .lead-body{ padding:16px 14px 18px; }
    .lead-head h2{ font-size:23px; }
  }

/* A repaint of the same view is not an arrival — entrance animations are
     for arriving, so they are switched off when nothing has navigated. */
  #app.no-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

#app.no-anim .stagger > *,
  #app.no-anim .lead-card,
  #app.no-anim .hero-line > span,
  #app.no-anim .flatbar .fb-seg,
  #app.no-anim .lp-card,
  #app.no-anim .lp-step{ animation:none !important; opacity:1 !important; transform:none !important; }

/* ---- call / WhatsApp channels ---- */
  .contact-rail{
    position:fixed; right:20px; bottom:20px; z-index:120;
    display:flex; flex-direction:column; gap:10px;
  }

.crail-btn{
    width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 30px -8px rgba(0,0,0,.45); position:relative;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  }

.crail-btn:hover{ transform:translateY(-3px) scale(1.04); }

.crail-btn svg{ width:24px; height:24px; }

.crail-wa{ background:#25D366; }

.crail-call{ background:var(--orange); }

.crail-btn::after{
    content:attr(data-tip); position:absolute; right:62px; top:50%; transform:translateY(-50%);
    background:var(--navy-950); color:#fff; font-size:11.5px; font-weight:700; white-space:nowrap;
    padding:7px 12px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s;
    font-family:'Archivo',sans-serif;
  }

.crail-btn:hover::after{ opacity:1; }

.crail-pulse{
    position:absolute; inset:0; border-radius:50%; background:inherit;
    animation:tnf-ring 2.4s ease-out infinite; z-index:-1;
  }

@keyframes tnf-ring{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.7); opacity:0; } }

.chan-row{ display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }

.chan-btn{
    display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px;
    font-family:'Archivo',sans-serif; font-size:13px; font-weight:700; text-decoration:none;
    border:1px solid transparent; transition:all .18s var(--ease);
  }

.chan-btn svg{ width:15px; height:15px; }

.chan-call{ background:var(--orange); color:#fff; }

.chan-call:hover{ background:var(--orange-deep); }

.chan-wa{ background:#25D366; color:#fff; }

.chan-wa:hover{ background:#1FB055; }

.chan-ghost{ background:transparent; color:var(--champagne); border-color:rgba(255,224,138,.32); }

.chan-ghost:hover{ background:rgba(255,224,138,.10); }

@media (max-width:640px){ .contact-rail{ right:14px; bottom:14px; } .crail-btn{ width:48px; height:48px; } }

/* =====================================================================
     HERO GEOMETRY — the last word on the subject.
     One rule set, shared by the homepage and both campaign pages, so the
     three cannot drift apart again. The page runs to --wrap (1480px) while
     the form column stays at the 548px the reference build specifies —
     full-width page, reference-width form.
     Responsive overrides MUST stay below this block: they have the same
     specificity, so if they sit above it they simply never apply. That was
     the bug that made the layout change at mid widths.
     ===================================================================== */
  .tnf-hero{
    position:relative; isolation:isolate; overflow:hidden;
    border-radius:0; margin:0; padding:0;
    min-height:640px; display:flex; align-items:center;
    background:linear-gradient(150deg,#04101F 0%,#0E2338 58%,#04101F 100%);
  }

.hero-grid{
    position:relative; z-index:2; width:100%;
    /* A wider right gutter than left: the form sits inboard of the page edge so
       its date pickers have somewhere to open, and the block reads as centred
       rather than shoved against the frame. */
    max-width:calc(var(--wrap) - 60px); margin:0 auto;
    padding:56px calc(var(--gut) + 34px) 56px var(--gut);
    display:grid; grid-template-columns:minmax(0,1fr) 528px;
    gap:64px; align-items:center;
  }

/* a hero without a form gives the copy the full measure */
  .hero-grid:not(:has(.hero-form)){ grid-template-columns:minmax(0,1fr); max-width:min(var(--wrap), 980px); }

@media (max-width:1320px){
    .hero-grid{ grid-template-columns:minmax(0,1fr) 486px; gap:40px; padding:48px var(--gut); }
  }

@media (max-width:1120px){
    .tnf-hero{ min-height:0; }
    .hero-grid{ grid-template-columns:1fr; gap:34px; padding:44px var(--gut); }
    .hero-form{ max-width:600px; }
  }

@media (max-width:760px){
    .hero-grid{ padding:30px var(--gut) 34px; gap:26px; }
    .hero-form{ max-width:none; }
  }

/* ---- deals ---- */
  .deal-grid-full{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.deal-tile{
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    display:flex; flex-direction:column; overflow:hidden;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  }

.deal-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--orange); }

.deal-tile.sig{ border-color:#FFD76B; box-shadow:0 0 0 1px #FFD76B; }

.deal-tile.sig:hover{ box-shadow:0 0 0 1px var(--orange), 0 20px 46px -22px var(--orange-glow); }

.deal-tile-top{
    display:flex; justify-content:space-between; gap:14px; padding:20px 22px 16px;
    border-bottom:1px solid var(--border-soft);
  }

.deal-route{
    font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:600;
    color:var(--navy-950); margin-top:9px; letter-spacing:-.02em;
  }

.deal-route span{ color:var(--orange); margin:0 3px; }

.deal-cities{ font-size:11.8px; color:var(--text-faint); margin-top:3px; }

.deal-price{ text-align:right; flex-shrink:0; }

.deal-price .was{
    display:block; font-family:'JetBrains Mono',monospace; font-size:12px;
    color:var(--text-faint); text-decoration:line-through;
  }

.deal-price b{
    display:block; font-family:'JetBrains Mono',monospace; font-size:22px;
    font-weight:600; color:var(--orange-deep); letter-spacing:-.02em;
  }

.deal-price small{ display:block; font-size:10px; color:var(--text-faint); letter-spacing:.05em; text-transform:uppercase; font-weight:700; }

.deal-save{
    display:inline-block; margin-top:6px; padding:3px 8px; border-radius:5px;
    background:var(--orange-wash); color:var(--orange-deep);
    font-size:10.5px; font-weight:800; letter-spacing:.03em;
  }

.deal-tile-body{ padding:16px 22px 18px; flex:1; display:flex; flex-direction:column; }

.deal-air{ display:flex; align-items:center; gap:7px; font-size:12.2px; font-weight:700; color:var(--navy-800); margin-bottom:10px; }

.deal-air-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.deal-note{ font-size:13px; line-height:1.66; color:var(--text-soft); margin-bottom:13px; }

.deal-rules{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:6px; }

.deal-rules li{
    font-size:12.2px; color:var(--text-soft); padding-left:16px; position:relative; line-height:1.5;
  }

.deal-rules li::before{
    content:''; position:absolute; left:0; top:6px; width:6px; height:6px;
    border-radius:50%; background:var(--orange); opacity:.55;
  }

.deal-meta{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:auto;
    padding-top:14px; border-top:1px solid var(--border-soft);
  }

.deal-meta > div{ display:flex; flex-direction:column; gap:2px; }

.deal-meta > div:first-child{ grid-column:1 / -1; }

.dm-l{ font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }

.dm-v{ font-size:12.2px; font-weight:600; color:var(--navy-950); line-height:1.4; }

.dm-v.urgent{ color:var(--orange-deep); }

.deal-cta{ margin:0 22px 20px; justify-content:center; }

@media (max-width:1120px){ .deal-grid-full{ grid-template-columns:repeat(2,1fr); } }

@media (max-width:760px){ .deal-grid-full{ grid-template-columns:1fr; } }

/* ---- calendar, refined ---- */
  .cal-head{ display:flex; align-items:center; gap:6px; margin-bottom:12px; }

.cal-nav{
    width:30px; height:30px; border-radius:9px; border:1px solid var(--border);
    background:#fff; color:var(--navy-800); font-size:15px; font-weight:700;
    display:flex; align-items:center; justify-content:center; transition:all .15s var(--ease);
  }

.cal-nav:hover:not(:disabled){ background:var(--navy-950); border-color:var(--navy-950); color:#fff; }

.cal-nav:disabled{ opacity:.3; cursor:not-allowed; }

.cal-select{
    border:1px solid var(--border); border-radius:9px; padding:7px 8px;
    font-family:'Archivo',sans-serif; font-size:13px; font-weight:700; color:var(--navy-950);
    background:#fff; cursor:pointer; flex:1; min-width:0;
  }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }

.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:2px 0 6px; }

.cal-dow > div{
    text-align:center; font-family:'Archivo',sans-serif; font-size:9.5px; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
  }

.cal-cell.empty{ background:none; pointer-events:none; }

.cal-cell{
    aspect-ratio:1; border:none; background:none; border-radius:9px;
    font-family:'Archivo',sans-serif; font-size:13px; font-weight:600; color:var(--navy-950);
    display:flex; align-items:center; justify-content:center; position:relative;
    transition:background .12s, color .12s, transform .12s var(--ease);
  }

.cal-cell:hover:not(:disabled){ background:var(--orange-wash); color:var(--orange-deep); transform:scale(1.06); }

.cal-cell:disabled{ color:#CBD2D9; cursor:not-allowed; }

.cal-cell.today{ box-shadow:inset 0 0 0 1.5px var(--border); }

.cal-cell.today::after{
    content:''; position:absolute; bottom:5px; width:4px; height:4px;
    border-radius:50%; background:var(--orange);
  }

.cal-cell.sel{
    background:var(--orange); color:#fff; font-weight:700;
    box-shadow:0 4px 12px -3px var(--orange-glow);
  }

.cal-cell.sel::after{ background:#fff; }

.cal-foot{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:12px; padding-top:11px; border-top:1px solid var(--border-soft);
    font-size:11px; color:var(--text-faint);
  }

.cal-quick{ display:flex; gap:5px; flex-wrap:wrap; }

.cal-chip{
    padding:5px 10px; border-radius:999px; border:1px solid var(--border);
    background:#fff; font-family:'Archivo',sans-serif; font-size:11px; font-weight:700;
    color:var(--navy-800); transition:all .14s var(--ease);
  }

.cal-chip:hover{ background:var(--navy-950); border-color:var(--navy-950); color:#fff; }

/* =====================================================================
     PREMIUM HERO VARIANT
     Same component, richer frame. Deeper ink, a champagne bloom rather than
     the orange one, and a hairline gold edge — so the Book Premium page reads
     as the expensive end of the site even if the photograph behind it is
     swapped out later.
     ===================================================================== */
  .tnf-hero.premium{
    background:linear-gradient(150deg,#02101F 0%,#0A2135 55%,#02101F 100%);
    box-shadow:inset 0 -1px 0 rgba(255,224,138,.22);
  }

.tnf-hero.premium .hero-media img{ object-position:50% 52%; filter:saturate(.82) contrast(1.06); }

.tnf-hero.premium .hero-media::after{
    background:
      linear-gradient(104deg,
        rgba(4,16,31,.96) 0%, rgba(4,16,31,.91) 32%,
        rgba(4,16,31,.74) 54%, rgba(4,16,31,.50) 76%, rgba(4,16,31,.42) 100%),
      linear-gradient(0deg, rgba(4,16,31,.76) 0%, transparent 42%),
      radial-gradient(680px 380px at 88% 4%, rgba(255,224,138,.20), transparent 70%);
  }

.tnf-hero.premium .hero-eyebrow{
    border-color:rgba(255,224,138,.42); background:rgba(255,224,138,.10);
  }

.tnf-hero.premium .hero-plane .arc{ stroke:rgba(255,224,138,.30); }

.tnf-hero.premium .hero-plane .jet path{ fill:var(--champagne); }

.tnf-hero.premium .hero-stats{ border-top-color:rgba(255,224,138,.30); }

/* =====================================================================
     ASAPTRIPS THEME LAYER
     Applied over the original TripsNFares stylesheet. Nothing above this
     block was deleted — the palette tokens were re-pointed at midnight ink
     and gold, and everything below re-cuts the type, the buttons and the
     four signature motifs (eyebrow pill, gold gradient accent, boarding-pass
     perforation, departure-board rows) to match the index page theme.
     Source order gives these rules the last word at equal specificity.
     ===================================================================== */

  /* ---- 1. TYPE ------------------------------------------------------ */
  /* Archivo replaces Instrument Serif as the display face, so every heading
     that relied on serif weight 400 has to be re-cut heavier and tighter. */
  h1,h2,h3,.display{ font-weight:800; letter-spacing:-.025em; font-stretch:105%; }

.tnf-hero h1{ font-weight:800; letter-spacing:-.04em; font-stretch:100%; }

.page-head h1,.doc-hero h1{ font-weight:800; letter-spacing:-.03em; }

.sec-head h2,.cabin-card h3,.concierge h3,.lp-close h2,.lp-h2{ font-weight:800; letter-spacing:-.028em; }

.hero-stat .n{ font-weight:900; font-stretch:88%; letter-spacing:-.045em; }

.mono,.pnr-code,.eticket,.ref,.cc{ letter-spacing:.04em; }

/* ---- 2. ACCENT EMPHASIS ------------------------------------------- */
  /* The italic accent is the one place gold is allowed to be a gradient. */
  .tnf-hero h1 em,em.q{
    font-style:italic; font-stretch:88%;
    background:linear-gradient(100deg,#F0B429 20%,#FFE08A 55%,#C98A0B);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

/* ---- 3. BUTTONS --------------------------------------------------- */
  /* Gold is a light surface: it takes ink text, never white. */
  .btn{ border-radius:999px; font-family:'Archivo',sans-serif; font-weight:700; letter-spacing:-.01em; }

.btn-primary{
    background:var(--accent); color:#241A00;
    box-shadow:0 12px 34px -10px rgba(240,180,41,.55);
  }

.btn-primary:hover{ background:var(--accent-2); color:#241A00; box-shadow:0 16px 40px -10px rgba(240,180,41,.7); }

.btn-dark{ background:var(--ink); color:#fff; }

.btn-dark:hover{ background:var(--ink-3); }

.btn-ghost{ background:#fff; border:1.5px solid var(--border); color:var(--text); }

.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }

.hdr-cta{
    background:var(--accent); color:#241A00; border-radius:999px; font-weight:700;
    box-shadow:0 8px 22px -8px rgba(240,180,41,.6);
  }

.hdr-cta:hover{ background:var(--accent-2); color:#241A00; }

.lead-cta,.btn-lg{ border-radius:999px; }

/* ---- 4. EYEBROW PILL ---------------------------------------------- */
  /* Was a coloured caption trailing a hairline rule; now the same pill the
     index page uses, so section openings read identically on both sites. */
  .sec-eyebrow{
    display:inline-flex; width:fit-content; align-items:center; gap:8px;
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
    color:var(--accent-dark); background:var(--orange-wash);
    border:1px solid rgba(201,138,11,.22); border-radius:999px;
    padding:7px 14px; margin-bottom:18px;
  }

.sec-eyebrow::after{ display:none; }

.lp-sec.dark .sec-eyebrow,.lp-sec.navy .sec-eyebrow,.band--dark .sec-eyebrow{
    background:rgba(240,180,41,.10); border-color:rgba(240,180,41,.28); color:var(--accent);
  }

.hero-eyebrow{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em; }

/* ---- 5. BOARDING-PASS MOTIF --------------------------------------- */
  /* Deal cards become tickets: the price block is torn off along a dashed
     perforation with a notch punched either side. */
  .deal-card,.deal-tile{ border-radius:22px; }

.deal-foot{
    position:relative; margin-top:18px; padding-top:20px;
    border-top:1px dashed var(--border);
  }

.deal-foot::before,.deal-foot::after{
    content:''; position:absolute; top:0; transform:translate(0,-50%);
    width:22px; height:22px; border-radius:50%;
    background:var(--bg); border:1px solid var(--border);
  }

.deal-foot::before{ left:-29px; }

.deal-foot::after{ right:-29px; }

.deal-price .v,.deal-price b{
    font-family:'Archivo',sans-serif; font-weight:900; font-stretch:90%; letter-spacing:-.045em;
  }

.deal-tag{
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:10.2px; letter-spacing:.14em; text-transform:uppercase;
    background:var(--ink); color:var(--accent);
  }

/* ---- 6. DEPARTURE-BOARD ROWS -------------------------------------- */
  /* Airport codes are data, so they get the mono face and a gold plate. */
  .cc,.leg-airport,.deal-air,.lp-route .code{
    font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700;
  }

.cc.solid,.link-chip.on-light .cc{
    background:rgba(240,180,41,.12); border:1px solid rgba(240,180,41,.26);
    color:var(--accent-dark); border-radius:7px;
  }

.lp-route{ transition:background .2s var(--ease), border-color .2s var(--ease); }

.lp-route:hover{ background:rgba(240,180,41,.07); border-color:rgba(240,180,41,.3); }

/* ---- 7. SURFACES -------------------------------------------------- */
  .card,.form-card,.cabin-card,.howto-card,.dest-card,.offer-card{ border-radius:var(--radius); }

.lead-card{ border-radius:22px; }

.cabin-card.flagship{
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent), 0 18px 44px -22px rgba(240,180,41,.5);
  }

.flatbar{ border-radius:999px; }

.flatbar,.fb-seg{ overflow:hidden; }

.chip-good{ background:rgba(31,157,99,.12); color:var(--success); }

.chip-warn{ background:var(--orange-wash); color:var(--accent-dark); }

/* ---- 8. FOCUS ----------------------------------------------------- */
  :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* =====================================================================
     BOOKING ENGINE PAGE
     The home page and Live Flights are the same view: a hero that states
     the offer, the live search engine docked across the boundary beneath
     it, then the supporting content. Everything here is scoped to that
     page's own classes so no other view inherits it.
     ===================================================================== */

  /* ---- hero variant: copy only, engine sits below --------------------- */
  .tnf-hero.engine .hero-grid{ grid-template-columns:1fr; }

.tnf-hero.engine .hero-copy{ max-width:62ch; }

.tnf-hero.engine h1{ max-width:18ch; }

.tnf-hero.engine .hero-sub{ max-width:60ch; }

.tnf-hero.engine{ padding-bottom:96px; }

/* ---- the engine itself, docked over the hero edge ------------------- */
  .engine-dock{
    max-width:1240px; margin:-72px auto 0; padding:0 32px;
    position:relative; z-index:6;
  }

.engine-card{
    background:#fff; border-radius:22px; padding:20px 22px 18px;
    box-shadow:0 40px 90px -34px rgba(7,20,38,.6), 0 0 0 1px rgba(255,255,255,.1);
  }

.engine-foot{
    display:flex; flex-wrap:wrap; gap:10px 26px;
    margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft);
    font-size:12.4px; font-weight:600; color:var(--text-soft);
  }

.engine-foot span{ white-space:nowrap; }

/* ---- stat band ------------------------------------------------------ */
  .stat-band{
    display:grid; grid-template-columns:repeat(5,1fr); gap:26px; text-align:center;
  }

.stat-cell .n{
    display:block; font-family:'Archivo',sans-serif; font-weight:900; font-stretch:88%;
    font-size:clamp(30px,3.6vw,50px); line-height:1; letter-spacing:-.045em;
    color:var(--accent); font-variant-numeric:tabular-nums;
  }

.stat-cell .l{
    display:block; margin-top:10px; font-size:12.4px; letter-spacing:.02em;
    color:rgba(242,245,249,.62);
  }

/* ---- boarding-pass fare cards --------------------------------------- */
  .bp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.bp{
    position:relative; background:#fff; border:1px solid var(--border);
    border-radius:20px; overflow:hidden; cursor:pointer;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }

.bp:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.bp-tag{
    position:absolute; top:14px; right:14px; z-index:3;
    font-family:'JetBrains Mono',monospace; font-size:9.6px; font-weight:700;
    letter-spacing:.13em; text-transform:uppercase;
    padding:5px 11px; border-radius:999px; background:var(--ink); color:var(--accent);
  }

.bp-top{ padding:28px 24px 22px; background:linear-gradient(160deg,#fff,var(--sand)); }

.bp-route{ display:flex; align-items:center; gap:14px; }

.bp-city{ flex:1; min-width:0; }

.bp-city b{
    display:block; font-family:'Archivo',sans-serif; font-weight:800;
    font-size:19px; letter-spacing:-.03em; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

.bp-city small{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; color:var(--text-faint); }

.bp-city.to{ text-align:right; }

.bp-mid{ color:var(--accent); font-size:16px; flex-shrink:0; }

.bp-carrier{
    margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);
    display:flex; justify-content:space-between; align-items:center; gap:10px;
  }

.bp-carrier b{ font-family:'JetBrains Mono',monospace; font-size:11.4px; letter-spacing:.03em; color:var(--text-soft); font-weight:500; }

.bp-perf{ position:relative; height:22px; background:var(--sand); }

.bp-perf::before,.bp-perf::after{
    content:''; position:absolute; top:50%; transform:translateY(-50%);
    width:22px; height:22px; border-radius:50%;
    background:var(--paper); border:1px solid var(--border);
  }

.bp-perf::before{ left:-11px; }

.bp-perf::after{ right:-11px; }

.bp-perf i{
    position:absolute; left:18px; right:18px; top:50%; height:1px;
    background:repeating-linear-gradient(90deg,var(--border) 0 6px,transparent 6px 12px);
  }

.bp-bot{
    padding:20px 24px 24px; background:var(--sand);
    display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  }

.bp-price s{ color:var(--text-faint); font-size:13px; }

.bp-price b{
    display:block; font-family:'Archivo',sans-serif; font-weight:900; font-stretch:90%;
    font-size:29px; letter-spacing:-.045em; color:var(--ink); line-height:1.08;
  }

.bp-price small{ display:block; color:var(--text-soft); font-size:11.2px; }

.bp-cta{
    padding:10px 17px; border-radius:999px; background:var(--ink); color:#fff;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:12.6px;
    white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease);
  }

.bp:hover .bp-cta{ background:var(--accent); color:#241A00; }

/* ---- airline marquee ------------------------------------------------ */
  .air-label{
    text-align:center; font-family:'JetBrains Mono',monospace; font-size:10.4px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); margin-bottom:22px;
  }

.air-marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }

.air-track{ display:flex; gap:48px; width:max-content; animation:air-slide 38s linear infinite; }

.air-marquee:hover .air-track{ animation-play-state:paused; }

@keyframes air-slide{ to{ transform:translateX(-50%); } }

.air-track span{
    font-family:'Archivo',sans-serif; font-weight:700; font-size:16px;
    color:var(--text-faint); white-space:nowrap; letter-spacing:-.01em;
    transition:color .2s var(--ease);
  }

.air-track span:hover{ color:var(--ink); }

/* ---- reviews -------------------------------------------------------- */
  .rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.rev{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    padding:26px 24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }

.rev:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

.rev-stars{ color:var(--accent); letter-spacing:2px; font-size:13.5px; margin-bottom:14px; }

.rev p{ font-size:14px; line-height:1.7; color:var(--text); }

.rev-by{
    display:flex; align-items:center; gap:12px;
    margin-top:20px; padding-top:16px; border-top:1px solid var(--border-soft);
  }

.rev-av{
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    display:grid; place-items:center; background:linear-gradient(135deg,var(--ink-3),var(--ink));
    color:var(--accent); font-family:'Archivo',sans-serif; font-weight:800; font-size:15px;
  }

.rev-by b{ display:block; font-family:'Archivo',sans-serif; font-size:14px; color:var(--ink); }

.rev-by small{ font-family:'JetBrains Mono',monospace; font-size:10.6px; color:var(--text-faint); }

.rev-by .cabin-chip{ margin-left:auto; }

/* ---- fare alerts ---------------------------------------------------- */
  .alerts{ text-align:center; max-width:660px; margin:0 auto; }

.alerts .lp-h2{ margin-inline:auto; max-width:20ch; }

.alert-form{ display:flex; gap:10px; max-width:480px; margin:26px auto 0; }

.alert-form input{
    flex:1; padding:15px 20px; border-radius:999px; font-size:14.5px; outline:none;
    border:1.5px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:#fff;
  }

.alert-form input::placeholder{ color:rgba(242,245,249,.42); }

.alert-form input:focus{ border-color:var(--accent); background:rgba(255,255,255,.12); }

.alert-form input.invalid{ border-color:#D93025; }

.alert-form .btn{ white-space:nowrap; }

.alert-note{ margin-top:14px; font-size:12.2px; color:rgba(242,245,249,.46); }

.alert-ok{
    display:none; margin-top:22px; padding:20px; border-radius:var(--radius);
    background:rgba(31,157,99,.15); border:1px solid rgba(31,157,99,.38);
  }

.alert-ok.show{ display:block; }

.alert-ok b{ display:block; font-family:'Archivo',sans-serif; font-size:16px; color:#fff; margin-bottom:4px; }

.alert-ok span{ font-size:13.2px; color:rgba(242,245,249,.66); }

/* ---- responsive ----------------------------------------------------- */
  @media (max-width:1000px){
    .stat-band{ grid-template-columns:repeat(3,1fr); gap:22px; }
    .bp-grid,.rev-grid{ grid-template-columns:1fr; }
  }

@media (max-width:760px){
    .tnf-hero.engine{ padding-bottom:70px; }
    .engine-dock{ margin-top:-48px; padding:0 18px; }
    .engine-card{ padding:16px 15px 14px; border-radius:18px; }
    .stat-band{ grid-template-columns:repeat(2,1fr); }
    .alert-form{ flex-direction:column; }
    .engine-foot{ gap:8px 18px; font-size:11.8px; }
  }

/* =====================================================================
     MARKET PALETTE — one base, two accents
     The ink stays constant: it is the southern night sky both markets fly
     out of. The accent is the thing that changes, because the two markets
     do not share a colour.

       AU — wattle gold. Green and gold are Australia's national colours
            and gold is the half that survives on a dark ground.
       NZ — pounamu. Greenstone is the material that reads as New Zealand
            anywhere in the world, and it sits beside the silver-fern
            greys far better than gold does.

     Everything funnels through these tokens, so switching AU/NZ in the
     header repaints the whole site. --on-accent is the companion token:
     gold takes dark text, pounamu takes white, and any rule that puts
     text on an accent background must use it rather than hardcoding.
     ===================================================================== */
  body[data-mkt="AU"]{
    --accent:#F0B429;      --accent-2:#FFC43D;   --accent-dark:#B8850A;
    --orange:#F0B429;      --orange-lift:#FFC43D; --orange-deep:#B8850A;
    --orange-wash:#FDF3D9; --orange-glow:rgba(240,180,41,.42);
    --jade:#F0B429;        --jade-lift:#FFC43D;  --jade-deep:#B8850A;  --jade-wash:#FDF3D9;
    --brass:#FFC43D;       --brass-lift:#FFD98A; --brass-wash:#FDF3D9;
    --champagne:#FFE08A;   --champagne-dim:rgba(255,224,138,.62);
    --on-accent:#241A00;
    --accent-rgb:240,180,41;
  }

body[data-mkt="NZ"]{
    --accent:#12A47C;      --accent-2:#1BC094;   --accent-dark:#0B7256;
    --orange:#12A47C;      --orange-lift:#1BC094; --orange-deep:#0B7256;
    --orange-wash:#E4F7F0; --orange-glow:rgba(18,164,124,.42);
    --jade:#12A47C;        --jade-lift:#1BC094;  --jade-deep:#0B7256;  --jade-wash:#E4F7F0;
    --brass:#1BC094;       --brass-lift:#8FE5C8; --brass-wash:#E4F7F0;
    --champagne:#8FE5C8;   --champagne-dim:rgba(143,229,200,.62);
    --on-accent:#FFFFFF;
    --accent-rgb:18,164,124;
  }

/* ---- anything that puts text on the accent uses --on-accent --------- */
  .btn-primary,
  .btn-primary:hover,
  .hdr-cta,
  .hdr-cta:hover,
  .bp:hover .bp-cta,
  .seat.selected,
  .cal-cell.sel,
  .step.current .dot,
  .mkt-btn.active{ color:var(--on-accent); }

.btn-primary{ background:var(--accent); box-shadow:0 12px 34px -10px rgba(var(--accent-rgb),.55); }

.btn-primary:hover{ background:var(--accent-2); box-shadow:0 16px 40px -10px rgba(var(--accent-rgb),.7); }

.hdr-cta{ background:var(--accent); box-shadow:0 8px 22px -8px rgba(var(--accent-rgb),.6); }

.hdr-cta:hover{ background:var(--accent-2); }

.mkt-btn.active{ background:var(--accent); }

.seat.selected,.cal-cell.sel{ background:linear-gradient(135deg,var(--accent-2),var(--accent)); }

.filter-chip.on,.seat-pax-btn.active,.anc-option.selected,.pay-method.active,
  .radio-tile.selected,.bd-tab-btn.active .bd-tab-count{ background:var(--orange-wash); }

.sec-eyebrow{ background:var(--orange-wash); border-color:rgba(var(--accent-rgb),.28); color:var(--accent-dark); }

.cabin-card.flagship{ box-shadow:0 0 0 1px var(--accent), 0 18px 44px -22px rgba(var(--accent-rgb),.5); }

.tnf-hero h1 em,em.q{
    background:linear-gradient(100deg,var(--accent) 20%,var(--champagne) 55%,var(--accent-dark));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

.cc.solid,.link-chip.on-light .cc{
    background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.26); color:var(--accent-dark);
  }

.lp-route:hover{ border-color:rgba(var(--accent-rgb),.5); background:rgba(var(--accent-rgb),.09); }

.lp-card:hover{ border-color:rgba(var(--accent-rgb),.42); }

/* =====================================================================
     CENTRED HERO
     The copy column was capped at 980px by the no-form rule while the
     search card ran to 1240px, so the two could never line up and the
     whole hero read as shoved left. Both now share one measure, and the
     copy is centred over the form it introduces.
     ===================================================================== */
  .tnf-hero.engine .hero-grid{
    grid-template-columns:minmax(0,1fr);
    max-width:calc(var(--wrap) - 60px);
    padding:64px var(--gut) 40px;
    justify-items:center; text-align:center;
  }

.tnf-hero.engine .hero-copy{ max-width:none; width:100%; }

.tnf-hero.engine h1{ max-width:19ch; margin-inline:auto; }

.tnf-hero.engine .hero-sub{ max-width:64ch; margin-inline:auto; }

.tnf-hero.engine .hero-eyebrow{ margin-inline:auto; }

.tnf-hero.engine .hero-stats{
    justify-content:center; gap:48px;
    max-width:920px; margin-inline:auto;
  }

.tnf-hero.engine .hero-stat{ text-align:center; }

/* the dock now shares the hero's measure exactly */
  .engine-dock{
    max-width:calc(var(--wrap) - 60px);
    margin:-70px auto 0;
    padding:0 var(--gut);
  }

.engine-foot{ justify-content:center; }

@media (max-width:1120px){
    .tnf-hero.engine .hero-grid{ padding:48px var(--gut) 34px; }
    .tnf-hero.engine .hero-stats{ gap:32px; }
  }

@media (max-width:760px){
    .tnf-hero.engine .hero-grid{ padding:34px var(--gut) 28px; }
    .tnf-hero.engine .hero-stats{ gap:22px 28px; }
    .engine-dock{ margin-top:-40px; padding:0 var(--gut); }
  }

/* =====================================================================
     HERO FRAME — night wing over city lights
     Darker and quieter than the daylight wing shot, which was bright
     enough that white headline type had to fight it. The scrim is tinted
     with the market accent so AU reads warm and NZ reads cool even before
     you notice the colour of a button.
     ===================================================================== */
  .tnf-hero.engine .hero-media::after{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(1100px 560px at 50% 12%, rgba(var(--accent-rgb),.20), transparent 66%),
      linear-gradient(180deg, rgba(7,20,38,.72) 0%, rgba(7,20,38,.84) 55%, var(--navy-950) 100%);
  }

.tnf-hero.engine .hero-media.no-img{
    background:
      radial-gradient(900px 480px at 50% 8%, rgba(var(--accent-rgb),.22), transparent 64%),
      linear-gradient(165deg, #0B2038 0%, var(--navy-950) 70%);
  }

/* =====================================================================
     ENGINE STAGE — the form lives in the hero
     Previously the search card hung below the hero on a negative margin,
     which left it straddling two backgrounds and reading as an afterthought.
     It is the subject of this page, so it now sits inside the frame with
     the copy stacked above it and the figures beneath: one centred column,
     one measure, nothing to align by eye.
     ===================================================================== */
  .tnf-hero.engine{ min-height:0; padding:0; }

.tnf-hero.engine .engine-stage{
    position:relative; z-index:2;
    max-width:1180px; margin:0 auto;
    padding:74px var(--gut) 66px;
    text-align:center;
  }

.tnf-hero.engine .engine-stage .hero-eyebrow{ margin:0 auto 20px; }

.tnf-hero.engine .engine-stage h1{
    font-size:clamp(34px,4.4vw,60px); line-height:1.02; letter-spacing:-.04em;
    color:#fff; max-width:20ch; margin:0 auto 20px;
  }

.tnf-hero.engine .engine-stage .hero-sub{
    font-size:15.5px; line-height:1.7; max-width:62ch; margin:0 auto;
    color:rgba(242,245,249,.78);
  }

.tnf-hero.engine .engine-stage .engine-card{ margin:36px auto 0; text-align:left; max-width:1180px; }

.tnf-hero.engine .engine-stage .hero-stats{
    justify-content:center; gap:20px 56px; max-width:900px;
    margin:38px auto 0; padding-top:26px;
    border-top:1px solid rgba(var(--accent-rgb),.22);
  }

.tnf-hero.engine .engine-stage .hero-stat{ text-align:center; }

.engine-card{
    background:#fff; border-radius:22px; padding:20px 22px 18px;
    box-shadow:0 44px 96px -30px rgba(4,16,31,.72), 0 0 0 1px rgba(255,255,255,.12);
  }

/* the old dock is gone — neutralise it in case any page still emits one */
  .engine-dock{ max-width:1180px; margin:0 auto; padding:0 var(--gut); }

@media (max-width:1120px){
    .tnf-hero.engine .engine-stage{ padding:56px var(--gut) 52px; }
    .tnf-hero.engine .engine-stage .hero-stats{ gap:18px 34px; }
  }

@media (max-width:760px){
    .tnf-hero.engine .engine-stage{ padding:38px var(--gut) 40px; }
    .tnf-hero.engine .engine-stage .engine-card{ margin-top:26px; padding:16px 15px 14px; border-radius:18px; }
    .tnf-hero.engine .engine-stage .hero-stats{ gap:16px 26px; margin-top:28px; padding-top:20px; }
  }

/* =====================================================================
     TWO-ACCENT PALETTE — wattle gold + pounamu, together
     Switching the whole site between two colours made the brand change
     identity every time someone flipped AU/NZ. Running both at once is
     truer to the business: one trans-Tasman desk, both markets present on
     every page. It only works if each colour owns a job, so:

        GOLD asks you to act.        Buttons, links, prices, the things
                                     you are meant to press or read first.
        POUNAMU says it is settled.  Included, confirmed, live, non-stop,
                                     no fee — anything already true.

     Nothing takes both. If a component is asking for a decision it is
     gold; if it is reporting a fact it is pounamu. The market toggle then
     only needs to tint two things — its own pill and the hero bloom — and
     the rest of the site holds still.
     ===================================================================== */
  :root,
  body[data-mkt="AU"],
  body[data-mkt="NZ"]{
    /* Australia — wattle */
    --gold:#F0B429;      --gold-lift:#FFC43D;  --gold-deep:#B8850A;
    --gold-wash:#FDF3D9; --gold-pale:#FFE08A;  --gold-rgb:240,180,41;

    /* New Zealand — greenstone */
    --pounamu:#12A47C;      --pounamu-lift:#1BC094;  --pounamu-deep:#0B7256;
    --pounamu-wash:#E4F7F0; --pounamu-pale:#8FE5C8;  --pounamu-rgb:18,164,124;

    /* action layer — gold, on every page, in both markets */
    --accent:var(--gold);       --accent-2:var(--gold-lift);  --accent-dark:var(--gold-deep);
    --orange:var(--gold);       --orange-lift:var(--gold-lift); --orange-deep:var(--gold-deep);
    --orange-wash:var(--gold-wash); --orange-glow:rgba(240,180,41,.42);
    --jade:var(--gold);         --jade-lift:var(--gold-lift); --jade-deep:var(--gold-deep);
    --jade-wash:var(--gold-wash);
    --brass:var(--gold-lift);   --brass-lift:var(--gold-pale); --brass-wash:var(--gold-wash);
    --champagne:var(--gold-pale); --champagne-dim:rgba(255,224,138,.62);
    --on-accent:#241A00;        --accent-rgb:240,180,41;

    /* affirmation layer — pounamu */
    --success:var(--pounamu);   --success-bg:var(--pounamu-wash);
    --on-pounamu:#FFFFFF;

    /* hero bloom, retinted per market below */
    --bloom-rgb:240,180,41;
  }

/* ---- the two things the market toggle still changes ----------------- */
  body[data-mkt="NZ"]{ --bloom-rgb:18,164,124; }

body[data-mkt="AU"] .mkt-btn.active{ background:var(--gold);    color:#241A00; }

body[data-mkt="NZ"] .mkt-btn.active{ background:var(--pounamu); color:#fff; }

body[data-mkt="AU"] .hero-eyebrow .cc{ background:rgba(var(--gold-rgb),.18);    color:var(--gold-pale); }

body[data-mkt="NZ"] .hero-eyebrow .cc{ background:rgba(var(--pounamu-rgb),.22); color:var(--pounamu-pale); }

.tnf-hero.engine .hero-media::after{
    background:
      radial-gradient(1100px 560px at 50% 12%, rgba(var(--bloom-rgb),.22), transparent 66%),
      linear-gradient(180deg, rgba(7,20,38,.72) 0%, rgba(7,20,38,.84) 55%, var(--navy-950) 100%);
  }

.tnf-hero.engine .hero-media.no-img{
    background:
      radial-gradient(900px 480px at 50% 8%, rgba(var(--bloom-rgb),.24), transparent 64%),
      linear-gradient(165deg, #0B2038 0%, var(--navy-950) 70%);
  }

/* ---- the combination, stated once ----------------------------------- */
  /* The headline is the one place both colours meet in a single object:
     the promise starts in wattle gold and resolves into greenstone. */
  .tnf-hero h1 em,em.q{
    background:linear-gradient(100deg,var(--gold) 8%,var(--gold-pale) 42%,var(--pounamu-lift) 88%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

/* ---- affirmation layer: things that are already true ---------------- */
  .cabin-feat svg,
  .cabin-card.flagship .cabin-feat svg{ stroke:var(--pounamu); }

.badge-icon{
    background:var(--pounamu-wash); border-color:rgba(var(--pounamu-rgb),.28);
    color:var(--pounamu-deep);
  }

.badge-row.on-dark .badge-icon{
    background:var(--pounamu); border-color:transparent; color:var(--on-pounamu);
  }

.chip-good{ background:var(--pounamu-wash); border-color:rgba(var(--pounamu-rgb),.30); color:var(--pounamu-deep); }

.chip-warn{ background:var(--gold-wash); border-color:rgba(var(--gold-rgb),.32); color:var(--gold-deep); }

.desk-live{ background:var(--pounamu); box-shadow:0 0 0 3px rgba(var(--pounamu-rgb),.18); }

.engine-foot{ color:var(--pounamu-deep); font-weight:600; }

.alert-ok{ background:rgba(var(--pounamu-rgb),.15); border-color:rgba(var(--pounamu-rgb),.38); }

.btn-success{ background:var(--pounamu); color:var(--on-pounamu); }

.btn-success:hover{ background:var(--pounamu-deep); }

.info-note.green{ background:var(--pounamu-wash); border-color:rgba(var(--pounamu-rgb),.26); }

.log-result.success{ color:var(--pounamu-deep); }

/* Non-stop is a fact about the itinerary, not an upsell — pounamu. */
  .lp-route .city,.route-card .stops{ color:rgba(242,245,249,.52); }

.bp-carrier .cabin-chip.premium{ background:var(--pounamu-wash); color:var(--pounamu-deep); }

/* The lie-flat bar keeps gold for bed time: that is what you are buying,
     so it belongs to the action layer, not the affirmation one. */
  .fb-flat{ background:linear-gradient(180deg,var(--gold-lift),var(--gold)); }

.fb-ground{ opacity:.9; }

/* ---- second-tier actions borrow pounamu, so the page has one gold CTA
          per view rather than four competing ones -------------------------- */
  .lp-close-actions .btn-ghost:hover,
  .concierge-act .btn-ghost:hover{
    background:var(--pounamu); border-color:var(--pounamu); color:var(--on-pounamu);
  }

.tab:not(.active):hover{ color:var(--pounamu-deep); background:var(--pounamu-wash); }

.quote-nudge b{ color:var(--pounamu-deep); }

/* =====================================================================
     THE SEARCH FORM — the one object on this page that has to feel
     expensive. Everything here is about weight and response: fields that
     lift under the cursor, a dropdown that arrives rather than appears,
     and a submit button with somewhere to go.
     ===================================================================== */

  /* ---- fields ---------------------------------------------------------- */
  .engine-card .field label{
    font-family:'JetBrains Mono',monospace; font-size:9.6px; letter-spacing:.17em;
    color:var(--text-faint); margin-bottom:5px;
  }

.engine-card .input-wrap,
  .engine-card .date-trigger-form,
  .engine-card .pax-trigger{
    border:1.5px solid var(--border-soft); border-radius:12px; padding:12px 13px;
    background:var(--paper); min-height:48px;
    transition:border-color .22s var(--ease), box-shadow .22s var(--ease),
               background .22s var(--ease), transform .22s var(--ease);
  }

.engine-card .input-wrap:hover,
  .engine-card .date-trigger-form:hover,
  .engine-card .pax-trigger:hover{
    border-color:var(--border); background:#fff;
    box-shadow:0 6px 18px -12px rgba(4,16,31,.5);
  }

.engine-card .input-wrap:focus-within,
  .engine-card .date-trigger-form:focus,
  .engine-card .pax-trigger:focus{
    border-color:var(--accent); background:#fff;
    box-shadow:0 0 0 4px rgba(var(--gold-rgb),.16);
  }

.engine-card .input-wrap svg,
  .engine-card .date-trigger-form svg{
    color:var(--text-faint); transition:color .22s var(--ease), transform .3s var(--ease);
  }

.engine-card .input-wrap:focus-within svg{ color:var(--accent-dark); transform:scale(1.08); }

.engine-card .input-wrap input{ font-size:14.5px; font-weight:600; }

.engine-card .input-wrap input::placeholder{ font-weight:500; color:var(--text-faint); }

/* ---- swap ------------------------------------------------------------ */
  .field.has-swap{ position:relative; }

.swap-od{
    position:absolute; left:-19px; top:33px; z-index:12;
    width:34px; height:34px; border-radius:50%;
    background:#fff; border:1.5px solid var(--border);
    display:grid; place-items:center; color:var(--ink);
    box-shadow:0 4px 14px -6px rgba(4,16,31,.45);
    transition:border-color .2s var(--ease), color .2s var(--ease),
               transform .45s var(--ease), box-shadow .2s var(--ease);
  }

.swap-od svg{ width:15px; height:15px; }

.swap-od:hover{
    border-color:var(--accent); color:var(--accent-dark);
    box-shadow:0 6px 18px -6px rgba(var(--gold-rgb),.55);
    transform:rotate(180deg);
  }

.swap-od.spun{ animation:od-spin .5s var(--ease); }

@keyframes od-spin{ from{ transform:rotate(0); } to{ transform:rotate(180deg); } }

/* ---- autocomplete ---------------------------------------------------- */
  .ac-dropdown{
    top:calc(100% + 8px); border-radius:16px; padding:6px;
    border-color:var(--border-soft); max-height:352px; min-width:320px;
    box-shadow:0 30px 70px -26px rgba(4,16,31,.55), 0 0 0 1px rgba(4,16,31,.04);
    transform-origin:top left;
    animation:ac-in .22s var(--ease) both;
  }

@keyframes ac-in{ from{ opacity:0; transform:translateY(-8px) scale(.985); } }

.ac-head,.ac-foot{
    font-family:'JetBrains Mono',monospace; font-size:9.4px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--text-faint); padding:9px 11px 7px;
  }

.ac-foot{ padding:8px 11px 4px; border-top:1px solid var(--border-soft); margin-top:4px; }

.ac-item{
    padding:10px 11px; border-radius:11px; gap:12px;
    animation:ac-row .26s var(--ease) both;
    animation-delay:calc(var(--i,0) * 22ms);
  }

@keyframes ac-row{ from{ opacity:0; transform:translateY(5px); } }

.ac-item:hover{ background:var(--gold-wash); }

.ac-code{
    width:42px; height:30px; border-radius:8px; font-size:11.5px; letter-spacing:.06em;
    background:var(--ink); color:#fff;
    font-family:'JetBrains Mono',monospace; font-weight:700;
    transition:background .2s var(--ease), color .2s var(--ease);
  }

.ac-item:hover .ac-code{ background:var(--accent); color:var(--on-accent); }

.ac-info{ min-width:0; flex:1; }

.ac-info .ac-city{ display:flex; align-items:baseline; gap:7px; font-size:13.4px; }

.ac-ctry{ font-size:11px; font-weight:500; color:var(--text-faint); }

.ac-info .ac-name{ font-size:11.4px; font-weight:500; }

.ac-hit{ color:var(--accent-dark); font-weight:800; background:rgba(var(--gold-rgb),.16); border-radius:3px; }

.ac-code .ac-hit{ color:var(--gold-pale); background:transparent; }

.ac-tag{
    flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--text-faint);
    border:1px solid var(--border-soft); border-radius:999px; padding:4px 8px;
  }

.ac-empty{ padding:20px 12px; line-height:1.6; }

/* ---- submit ---------------------------------------------------------- */
  .engine-card #btn-search{
    height:48px !important; border-radius:12px; padding-inline:26px;
    font-size:14.5px; letter-spacing:-.01em; position:relative; overflow:hidden;
  }

.engine-card #btn-search::after{
    content:''; position:absolute; top:0; bottom:0; left:-140%; width:60%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-18deg);
  }

.engine-card #btn-search:hover::after{ animation:sheen .75s var(--ease); }

@keyframes sheen{ to{ left:140%; } }

/* ---- card entrance --------------------------------------------------- */
  .tnf-hero.engine .engine-stage .engine-card{
    animation:card-in .8s var(--ease) both; animation-delay:.22s;
  }

@keyframes card-in{ from{ opacity:0; transform:translateY(26px) scale(.985); } }

/* =====================================================================
     SOUTHERN CROSS — the signature
     Crux is the one thing both flags carry, and the only constellation
     you cannot see from the markets these travellers fly to. Four stars
     are shared; the fifth, Epsilon Crucis, appears on the Australian flag
     and not the New Zealand one, so it fades in only in AU. A detail
     almost nobody will consciously notice and every Australian and New
     Zealander will feel.
     ===================================================================== */
  .crux{
    position:absolute; top:9%; right:5%; width:min(168px,15vw); height:auto;
    z-index:1; pointer-events:none; opacity:.5;
  }

.crux .star{ fill:#fff; animation:twinkle 5s ease-in-out infinite; transform-origin:center; }

.crux .star:nth-child(2){ animation-delay:.9s; }

.crux .star:nth-child(3){ animation-delay:1.9s; }

.crux .star:nth-child(4){ animation-delay:2.7s; }

.crux .glow{ fill:rgba(var(--bloom-rgb),.10); }

.crux .eps{ opacity:0; transition:opacity .6s var(--ease); }

body[data-mkt="AU"] .crux .eps{ opacity:.85; }

@keyframes twinkle{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

@media (max-width:900px){ .crux{ opacity:.3; width:112px; top:4%; right:3%; } }

/* =====================================================================
     HERO POLISH
     A hairline of light along the top edge, a grain layer so the
     photograph does not band on large screens, and a slow drift on the
     bloom. Small, expensive-feeling things.
     ===================================================================== */
  .tnf-hero.engine{ position:relative; isolation:isolate; }

.tnf-hero.engine::before{
    content:''; position:absolute; inset:0 0 auto; height:1px; z-index:3;
    background:linear-gradient(90deg,transparent,rgba(var(--bloom-rgb),.55),transparent);
  }

.tnf-hero.engine::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    opacity:.4; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  }

.tnf-hero.engine .hero-media img{ object-position:50% 58%; }

.tnf-hero.engine .engine-stage .hero-eyebrow{
    backdrop-filter:blur(6px);
    animation:rise-soft .7s var(--ease) both;
  }

.tnf-hero.engine .engine-stage h1{ animation:none; }

.tnf-hero.engine .engine-stage .hero-sub{ animation:rise-soft .7s var(--ease) both; animation-delay:.14s; }

.tnf-hero.engine .engine-stage .hero-stats{ animation:rise-soft .7s var(--ease) both; animation-delay:.34s; }

@keyframes rise-soft{ from{ opacity:0; transform:translateY(14px); } }

/* the figures read as engraved rather than printed */
  .tnf-hero.engine .engine-stage .hero-stat .n{
    font-weight:900; font-stretch:88%; letter-spacing:-.045em;
    background:linear-gradient(180deg,#fff 30%,var(--gold-pale));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

.tnf-hero.engine .engine-stage .hero-stat .l{
    font-family:'JetBrains Mono',monospace; font-size:9.6px; letter-spacing:.16em;
    text-transform:uppercase; color:rgba(242,245,249,.52);
  }

@media (prefers-reduced-motion:reduce){
    .crux .star{ animation:none; }
    .ac-dropdown,.ac-item,.engine-card,.tnf-hero.engine .engine-stage .hero-eyebrow,
    .tnf-hero.engine .engine-stage .hero-sub,.tnf-hero.engine .engine-stage .hero-stats{ animation:none !important; }
  }

@media (max-width:760px){
    .swap-od{ left:auto; right:14px; top:-22px; }
    .ac-dropdown{ min-width:0; }
  }

/* =====================================================================
     REPAINT DISCIPLINE
     render() rebuilds the whole page on every keystroke in the search box,
     which is fine until an entrance animation replays on each one — then
     typing an airport code looks like the page reloading. The app already
     marks a repaint with #app.no-anim; everything added since needs to
     honour it too, including the photograph's slow zoom.
     ===================================================================== */
  #app.no-anim .engine-card,
  #app.no-anim .engine-stage .hero-eyebrow,
  #app.no-anim .engine-stage .hero-sub,
  #app.no-anim .engine-stage .hero-stats,
  #app.no-anim .ac-dropdown,
  #app.no-anim .ac-item,
  #app.no-anim .crux .star{
    animation:none !important; opacity:1 !important; transform:none !important;
  }

#app.no-anim .crux .star{ opacity:.85 !important; }

#app.no-anim .hero-media img{ animation:none !important; }

/* the dropdown must never inherit the "everything is visible" reset as a
     reason to sit at full opacity before it is opened — it is only in the
     DOM when open, so this is purely about killing the replay */

  /* =====================================================================
     AUTOCOMPLETE ROW — three columns that never collide
     City and country share a baseline, the airport name sits under them,
     and the region tag is pinned right. Everything clips rather than wraps.
     ===================================================================== */
  .ac-item{ align-items:center; }

.ac-info{ min-width:0; flex:1 1 auto; overflow:hidden; }

.ac-info .ac-city{
    display:flex; align-items:baseline; gap:7px; min-width:0;
    white-space:nowrap; overflow:hidden;
  }

.ac-town{
    font-weight:700; color:var(--text); font-size:13.4px;
    overflow:hidden; text-overflow:ellipsis; flex:0 1 auto;
  }

.ac-ctry{
    font-size:10.8px; font-weight:500; color:var(--text-faint);
    white-space:nowrap; flex:0 0 auto;
  }

.ac-info .ac-name{
    font-size:11.4px; font-weight:500; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; margin-top:1px;
  }

.ac-tag{
    flex:0 0 auto; align-self:center; white-space:nowrap;
    font-size:8.6px; padding:4px 7px;
  }

.ac-dropdown{ min-width:352px; max-width:400px; }

@media (max-width:900px){
    .ac-dropdown{ min-width:0; max-width:none; left:0; right:0; }
    .ac-tag{ display:none; }
  }

/* =====================================================================
     AUTOCOMPLETE FITTING
     positionPopup() has always tagged this panel with flip-x / flip-y when
     it would run off an edge — but only .cal-popup had rules for those
     classes, so the measurement was thrown away and the list overflowed
     whichever side it felt like. Both directions are honoured now, and the
     width is expressed against the viewport rather than as a fixed 352px
     that a narrow From field could never contain.
     ===================================================================== */
  .ac-dropdown{
    min-width:0;
    width:max(100%, 300px);
    max-width:min(390px, calc(100vw - 28px));
    max-height:min(330px, 46vh);
    overscroll-behavior:contain;
  }

.ac-dropdown.flip-x{ left:auto; right:0; transform-origin:top right; }

.ac-dropdown.flip-y{ top:auto; bottom:calc(100% + 8px); transform-origin:bottom left; }

.ac-dropdown.flip-x.flip-y{ transform-origin:bottom right; }

/* a scrollbar that belongs to the design rather than the operating system */
  .ac-dropdown{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

.ac-dropdown::-webkit-scrollbar{ width:8px; }

.ac-dropdown::-webkit-scrollbar-track{ background:transparent; }

.ac-dropdown::-webkit-scrollbar-thumb{
    background:var(--border); border-radius:999px;
    border:2px solid #fff; background-clip:padding-box;
  }

.ac-dropdown::-webkit-scrollbar-thumb:hover{ background:var(--text-faint); background-clip:padding-box; }

/* the head and foot stay put while the list moves under them */
  .ac-head{ position:sticky; top:0; z-index:2; background:#fff; }

.ac-foot{ position:sticky; bottom:0; z-index:2; background:#fff; }

@media (max-width:1120px){
    .ac-dropdown{ width:max(100%, 280px); max-width:min(340px, calc(100vw - 24px)); }
  }

@media (max-width:760px){
    /* below the two-column breakpoint the fields are full width, so the
       panel simply matches the field and stops trying to be clever */
    .ac-dropdown{ width:100%; max-width:none; left:0; right:0; max-height:min(300px, 52vh); }
    .ac-dropdown.flip-x{ left:0; right:0; }
  }

/* =====================================================================
     SEARCH FORM — AUDIT FIXES
     Findings, in the order they mattered:

     1. The swap control overlapped the To field's icon. The grid gutter is
        12px and the button is 34px, so at left:-19px it sat 15px inside
        the field — directly over an icon that starts at 13px of padding.
        No amount of nudging fixes that: the button is wider than the gap.
        The To field now carries its own left inset, so the control has a
        lane of its own.
     2. From and To were the same paper plane, one rotated 90°, which reads
        as an arrowhead rather than a direction. Replaced with a matched
        pair built on a shared ground line.
     3. Icons had no sizing inside the engine card and inherited a 16px box
        from a rule written for a 44px field, so they sat small and low
        against 48px inputs.
     4. Labels were not tied to their inputs, so clicking one did nothing.
     ===================================================================== */

  /* ---- 1. the swap control gets its own lane -------------------------- */
  .engine-card .field.has-swap .input-wrap{ padding-left:30px; }

.swap-od{
    left:-17px; top:31px;
    width:34px; height:34px;
    background:#fff; border:1.5px solid var(--border-soft);
    box-shadow:0 6px 16px -8px rgba(4,16,31,.5);
  }

.swap-od svg{ width:16px; height:16px; }

.swap-od:hover{
    border-color:var(--accent); color:var(--accent-dark);
    box-shadow:0 8px 20px -8px rgba(var(--gold-rgb),.6);
  }

.swap-od:active{ transform:scale(.94); }

/* ---- 2 + 3. icons: sized to the field, coloured by state ------------ */
  .engine-card .fld-ico{
    width:18px; height:18px; flex-shrink:0;
    color:var(--text-faint);
    transition:color .24s var(--ease), transform .36s var(--ease);
  }

.engine-card .input-wrap{ gap:10px; }

/* Departure lifts, arrival settles. The icons already point that way —
     on focus they move the way the aircraft does. */
  .engine-card .fld-from:focus-within .fld-ico{ color:var(--accent-dark); transform:translateY(-3px); }

.engine-card .fld-to:focus-within   .fld-ico{ color:var(--accent-dark); transform:translateY(3px); }

.engine-card .fld-date .input-wrap:focus .fld-ico,
  .engine-card .fld-date:focus-within .fld-ico{ color:var(--accent-dark); transform:scale(1.08); }

.engine-card .fld-pax:focus-within .fld-ico,
  .engine-card .pax-trigger.is-open .fld-ico{ color:var(--accent-dark); }

/* a field holding a real value earns a darker icon than an empty one */
  .engine-card .input-wrap:hover .fld-ico{ color:var(--text-soft); }

.pax-chev{
    width:14px; height:14px; flex-shrink:0; color:var(--text-faint);
    transition:transform .28s var(--ease), color .24s var(--ease);
  }

.pax-trigger.is-open .pax-chev{ transform:rotate(180deg); color:var(--accent-dark); }

/* ---- 4. labels behave like labels ----------------------------------- */
  .engine-card .field label{ cursor:pointer; transition:color .22s var(--ease); }

.engine-card .field:focus-within label{ color:var(--accent-dark); }

/* ---- selection and caret in the brand, not the browser's ------------ */
  .engine-card input::selection{ background:rgba(var(--gold-rgb),.28); color:var(--ink); }

.engine-card input{ caret-color:var(--accent-dark); }

/* ---- trip toggle: a real segmented control -------------------------- */
  .engine-card .trip-toggle{ gap:8px; margin-bottom:18px; }

.engine-card .trip-toggle label{
    padding:8px 15px; border-radius:999px; font-size:13px;
    border:1.5px solid transparent; background:var(--bg);
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }

.engine-card .trip-toggle label:hover{ background:var(--gold-wash); color:var(--text); }

.engine-card .trip-toggle label.selected{
    background:var(--ink); color:#fff; border-color:var(--ink);
  }

.engine-card .trip-toggle input{ accent-color:var(--accent); width:13px; height:13px; }

/* ---- the row of fields lines up on the input, not the label --------- */
  .engine-card .search-grid{ align-items:end; gap:12px; row-gap:14px; }

.engine-card .search-extra{ margin-top:18px; }

/* =====================================================================
     HERO KICKER — the third sentence of the headline, carried as its own
     line so the h1 can stay two words wide and still say where we fly.
     ===================================================================== */
  .hero-kicker{
    font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold-pale); margin:2px auto 20px; max-width:44ch;
    display:flex; align-items:center; justify-content:center; gap:14px;
  }

.hero-kicker::before,.hero-kicker::after{
    content:''; height:1px; width:clamp(18px,6vw,58px);
    background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.55));
  }

.hero-kicker::after{ background:linear-gradient(90deg,rgba(var(--gold-rgb),.55),transparent); }

.tnf-hero.engine .engine-stage .hero-kicker{
    animation:rise-soft .7s var(--ease) both; animation-delay:.1s;
  }

#app.no-anim .hero-kicker{ animation:none !important; opacity:1 !important; transform:none !important; }

@media (max-width:760px){
    .engine-card .field.has-swap .input-wrap{ padding-left:13px; }
    .swap-od{ left:auto; right:12px; top:-18px; }
    .hero-kicker{ font-size:9.6px; letter-spacing:.18em; gap:10px; }
  }

/* =====================================================================
     TWO-LINE HEADLINE
     Line one is the promise and carries the accent; line two is where we
     fly from and to. Two sentences of very different length, so the second
     is set smaller and lighter — same voice, quieter register — rather
     than forcing both to the same size and wrapping into four lines.
     ===================================================================== */
  .tnf-hero.engine .engine-stage h1{ max-width:22ch; }

.hero-line--two{
    display:block; margin-top:.34em;
    font-size:.46em; font-weight:600; font-stretch:100%;
    letter-spacing:-.012em; line-height:1.25;
    color:rgba(242,245,249,.80);
  }

.hero-line--two > span{ display:inline-block; }

@media (max-width:760px){
    .tnf-hero.engine .engine-stage h1{ max-width:18ch; }
    .hero-line--two{ font-size:.52em; margin-top:.42em; }
  }

/* =====================================================================
     SEARCH FORM — FILLED BLOCKS
     Each field is now a single tinted block holding its own label, value
     and hint, rather than a floating label above a bordered input. Three
     things follow from that: the row reads as five objects instead of ten,
     the hint has somewhere to live, and the swap control finally has a
     gutter wide enough to sit in without covering an icon.
     ===================================================================== */

  /* ---- control bar: the two decisions taken before the fields --------- */
  .eng-bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px 18px; flex-wrap:wrap; margin-bottom:14px;
  }

.trip-pills{ display:flex; gap:6px; }

.trip-pill{
    padding:11px 20px; border-radius:999px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:14px; letter-spacing:-.01em;
    color:var(--text-soft); background:transparent; border:1.5px solid transparent;
    transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  }

.trip-pill:hover{ background:var(--bg); color:var(--text); }

.trip-pill.on{ background:var(--ink); color:#fff; box-shadow:0 8px 20px -10px rgba(4,16,31,.7); }

.trip-pill.on:hover{ background:var(--ink-2); color:#fff; }

.cab-pills{ display:flex; gap:8px; flex-wrap:wrap; }

.cab-pill{
    padding:10px 20px; border-radius:999px;
    font-family:'Archivo',sans-serif; font-weight:600; font-size:13.6px;
    color:var(--text-soft); background:#fff; border:1.5px solid var(--border);
    transition:border-color .2s var(--ease), color .2s var(--ease),
               background .2s var(--ease), transform .2s var(--ease);
  }

.cab-pill:hover{ border-color:var(--ink-3); color:var(--text); transform:translateY(-1px); }

.cab-pill.on{
    border-color:var(--accent); background:var(--gold-wash); color:var(--accent-dark);
    font-weight:700; box-shadow:0 8px 20px -12px rgba(var(--gold-rgb),.9);
  }

/* ---- the field block ------------------------------------------------ */
  .engine-card .search-grid{ align-items:stretch; gap:12px; }

.engine-card .search-grid > .field{
    background:var(--bg); border:1.5px solid transparent; border-radius:15px;
    padding:13px 15px 12px; gap:3px; justify-content:center; min-height:84px;
    transition:background .22s var(--ease), border-color .22s var(--ease),
               box-shadow .22s var(--ease);
  }

.engine-card .search-grid > .field:hover{ background:#EAF0F6; }

.engine-card .search-grid > .field:focus-within{
    background:#fff; border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(var(--gold-rgb),.15);
  }

/* the input itself is now just text inside the block */
  .engine-card .search-grid > .field .input-wrap{
    background:transparent; border:0; padding:0; min-height:0; box-shadow:none; gap:9px;
  }

.engine-card .search-grid > .field .input-wrap:hover,
  .engine-card .search-grid > .field .input-wrap:focus-within{
    background:transparent; box-shadow:none; border:0;
  }

.engine-card .search-grid > .field label{ margin-bottom:1px; }

.engine-card .search-grid > .field input,
  .engine-card .search-grid > .field .date-display,
  .engine-card .search-grid > .field .pax-label{
    font-family:'Archivo',sans-serif; font-weight:700; font-size:16px;
    letter-spacing:-.02em; color:var(--ink);
  }

.engine-card .search-grid > .field input::placeholder{
    font-weight:600; color:#9FB0C2; letter-spacing:-.01em;
  }

.engine-card .search-grid > .field .date-display.placeholder{ color:#9FB0C2; font-weight:600; }

/* ---- hint line and the resolved-airport chip ------------------------ */
  .fld-hint{
    font-size:11.4px; color:var(--text-faint); line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

.fld-chip{
    display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
    max-width:100%; padding:3px 5px 3px 9px; border-radius:999px;
    background:rgba(var(--pounamu-rgb),.10); border:1px solid rgba(var(--pounamu-rgb),.24);
    font-size:10.8px; font-weight:600; color:var(--pounamu-deep);
    white-space:nowrap; overflow:hidden;
  }

.fld-x{
    width:15px; height:15px; border-radius:50%; flex-shrink:0; line-height:1;
    display:grid; place-items:center; font-size:13px;
    color:var(--pounamu-deep); background:rgba(var(--pounamu-rgb),.14);
    transition:background .18s var(--ease), color .18s var(--ease);
  }

.fld-x:hover{ background:var(--pounamu); color:#fff; }

/* ---- swap: a real gutter, vertically centred ------------------------ */
  .engine-card .search-grid > .field.has-swap{ padding-left:32px; }

.engine-card .field.has-swap .input-wrap{ padding-left:0; }

.swap-od{
    left:-18px; top:50%; transform:translateY(-50%);
    width:36px; height:36px;
    border:1.5px solid var(--border); background:#fff;
    box-shadow:0 8px 20px -10px rgba(4,16,31,.55);
  }

.swap-od:hover{ transform:translateY(-50%) rotate(180deg); }

.swap-od.spun{ animation:od-spin-c .5s var(--ease); }

@keyframes od-spin-c{
    from{ transform:translateY(-50%) rotate(0); }
    to{ transform:translateY(-50%) rotate(180deg); }
  }

.swap-od:active{ transform:translateY(-50%) scale(.94); }

/* ---- search: a block, not a button --------------------------------- */
  .engine-card .go-block{
    height:auto !important; min-height:84px; align-self:stretch;
    border-radius:15px; padding:0 30px; gap:10px;
    font-size:15.5px; font-weight:800; letter-spacing:-.015em;
    background:linear-gradient(150deg,var(--gold-lift),var(--gold) 55%,var(--gold-deep));
    color:var(--on-accent); box-shadow:0 16px 34px -16px rgba(var(--gold-rgb),.95);
  }

.engine-card .go-block svg{ width:18px; height:18px; }

.engine-card .go-block:hover{
    background:linear-gradient(150deg,#FFD059,var(--gold-lift) 55%,var(--gold));
    transform:translateY(-2px);
    box-shadow:0 22px 42px -16px rgba(var(--gold-rgb),1);
  }

.engine-card .go-block:active{ transform:translateY(0); }

/* ---- footer rows ---------------------------------------------------- */
  .engine-card .search-extra{
    margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft);
  }

.engine-card .quote-nudge{ font-size:13px; color:var(--text-soft); }

.engine-card .quote-nudge b{ cursor:pointer; }

.engine-card .quote-nudge b:hover{ text-decoration:underline; }

.engine-foot{ margin-top:12px; padding-top:12px; border-top:0; }

/* ---- responsive ----------------------------------------------------- */
  @media (max-width:1120px){
    .engine-card .search-grid{ grid-template-columns:1fr 1fr; }
    .engine-card .go-block{ grid-column:span 2; min-height:64px; }
    .eng-bar{ justify-content:flex-start; }
  }

@media (max-width:760px){
    .engine-card .search-grid{ grid-template-columns:1fr; }
    .engine-card .go-block{ grid-column:span 1; min-height:58px; }
    .engine-card .search-grid > .field{ min-height:0; }
    .engine-card .search-grid > .field.has-swap{ padding-left:15px; }
    .swap-od{ left:auto; right:14px; top:-19px; transform:none; }
    .swap-od:hover{ transform:rotate(180deg); }
    .swap-od.spun{ animation:od-spin .5s var(--ease); }
    .swap-od:active{ transform:scale(.94); }
    .trip-pill{ padding:9px 15px; font-size:13px; }
    .cab-pill{ padding:8px 14px; font-size:12.6px; }
    .cab-pills{ width:100%; }
  }

/* =====================================================================
     ALIGNMENT PASS
     Every control in the form now sits on one of two heights: 42px for the
     pills in the control bar, 84px for the blocks in the field row. The
     search block is the same 84px as the fields beside it, not a button
     floating inside the row, and it is wide enough that its label never
     wraps to two lines.
     ===================================================================== */

  /* ---- control bar: one shape, two states ----------------------------- */
  .eng-bar{ align-items:center; }

.trip-pills,.cab-pills{ align-items:center; }

.trip-pill,.cab-pill{
    height:42px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 20px; border-radius:999px; line-height:1;
    border:1.5px solid var(--border); background:#fff;
  }

.trip-pill{ font-size:13.8px; font-weight:600; color:var(--text-soft); gap:7px; }

.trip-pill:hover{ background:var(--bg); color:var(--text); border-color:var(--ink-3); }

.trip-pill.on{
    background:var(--ink); color:#fff; border-color:var(--ink);
    font-weight:700; box-shadow:0 8px 20px -12px rgba(4,16,31,.85);
  }

.trip-pill.on:hover{ background:var(--ink-2); border-color:var(--ink-2); color:#fff; }

/* ---- field row: one height, no exceptions --------------------------- */
  .engine-card .search-grid{ align-items:stretch; }

.engine-card .search-grid > .field{
    min-height:84px; height:84px; padding:12px 15px;
    justify-content:center; gap:4px; overflow:visible;
  }

.engine-card .search-grid > .field .input-wrap{ align-items:center; }

/* the clear control lives inside the field, so nothing is repeated below */
  .fld-clear{
    width:22px; height:22px; border-radius:50%; flex-shrink:0; margin-left:auto;
    display:grid; place-items:center; color:var(--text-faint);
    background:transparent; opacity:0;
    transition:opacity .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  }

.fld-clear svg{ width:12px; height:12px; }

.engine-card .field:hover .fld-clear,
  .engine-card .field:focus-within .fld-clear{ opacity:1; }

.fld-clear:hover{ background:var(--bg); color:var(--ink); }

.engine-card .search-grid > .field input{ min-width:0; }

/* ---- the search block matches the fields exactly -------------------- */
  .engine-card .go-block{
    height:84px !important; min-height:84px; align-self:stretch;
    border-radius:15px; padding:0 28px; gap:10px;
    min-width:196px; white-space:nowrap; flex-shrink:0;
    font-size:15.5px; font-weight:800; letter-spacing:-.015em; line-height:1;
  }

.engine-card .go-block svg{ width:19px; height:19px; flex-shrink:0; }

@media (max-width:1120px){
    .engine-card .go-block{ height:64px !important; min-height:64px; }
  }

@media (max-width:760px){
    .engine-card .search-grid > .field{ height:auto; min-height:78px; }
    .engine-card .go-block{ height:58px !important; min-height:58px; width:100%; }
    .trip-pill,.cab-pill{ height:38px; padding:0 15px; font-size:12.8px; }
    .fld-clear{ opacity:1; }
  }

/* =====================================================================
     GRID CONTAINMENT
     The search row overflowed the card on the right. The cause is the
     default `min-width:auto` on grid items: a column declared 1.3fr will
     still refuse to shrink below the intrinsic width of what is inside it,
     so five text fields plus a 196px button added up to more than the card
     and the button was pushed out of the frame rather than the columns
     giving way. Every column is now minmax(0, …) so it can actually
     shrink, and the search block has a floor rather than a fixed width.
     ===================================================================== */
  .engine-card .search-grid{
    width:100%; max-width:100%;
    grid-template-columns:
      minmax(0,1.25fr)   /* leaving from */
      minmax(0,1.25fr)   /* going to     */
      minmax(0,0.95fr)   /* departure    */
      minmax(0,0.95fr)   /* return       */
      minmax(0,1.05fr)   /* travellers   */
      minmax(150px,auto);/* search       */
  }

.engine-card .search-grid > *{ min-width:0; }

.engine-card .search-grid > .field{ overflow:hidden; }

/* the popovers still need to escape their block */
  .engine-card .search-grid > .field:focus-within,
  .engine-card .search-grid > .field.has-swap,
  .engine-card .search-grid > .field.fld-pax,
  .engine-card .search-grid > .field.fld-date{ overflow:visible; }

.engine-card .go-block{
    min-width:0; width:100%; padding:0 20px;
    font-size:15px;
  }

/* the glow is decorative — it must not be what makes the row look wide */
  .engine-card .go-block{ box-shadow:0 14px 30px -18px rgba(var(--gold-rgb),.9); }

.engine-card .go-block:hover{ box-shadow:0 18px 36px -18px rgba(var(--gold-rgb),1); }

@media (max-width:1240px){
    .engine-card .search-grid{
      grid-template-columns:
        minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,0.9fr)
        minmax(0,0.9fr) minmax(0,1fr) minmax(132px,auto);
    }
    .engine-card .go-block{ font-size:14px; padding:0 14px; gap:8px; }
    .engine-card .go-block svg{ width:16px; height:16px; }
  }

@media (max-width:1120px){
    .engine-card .search-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .engine-card .go-block{ grid-column:span 2; width:100%; font-size:15px; padding:0 24px; }
  }

@media (max-width:760px){
    .engine-card .search-grid{ grid-template-columns:minmax(0,1fr); }
    .engine-card .go-block{ grid-column:span 1; }
  }

/* =====================================================================
     A BRIGHTER FRAME
     The scrim was tuned for a daylight wing shot and carried straight over
     to a night photograph, which left the hero nearly black. The gradient
     is lighter at every stop and the image itself is lifted, so the place
     is legible instead of merely dark.
     ===================================================================== */
  .tnf-hero.engine .hero-media img{
    filter:brightness(1.28) saturate(1.06) contrast(.97);
  }

.tnf-hero.engine .hero-media::after{
    background:
      radial-gradient(1100px 560px at 50% 10%, rgba(var(--bloom-rgb),.18), transparent 64%),
      linear-gradient(180deg,
        rgba(7,20,38,.42) 0%,
        rgba(7,20,38,.56) 48%,
        rgba(7,20,38,.80) 84%,
        var(--navy-950) 100%);
  }

.tnf-hero.engine .hero-media.no-img{
    background:
      radial-gradient(900px 480px at 50% 6%, rgba(var(--bloom-rgb),.26), transparent 62%),
      linear-gradient(165deg, #16385C 0%, #0B2038 55%, var(--navy-950) 100%);
  }

/* the copy needs a touch more weight against a lighter ground */
  .tnf-hero.engine .engine-stage h1{ text-shadow:0 2px 24px rgba(4,16,31,.45); }

.tnf-hero.engine .engine-stage .hero-sub{ color:rgba(255,255,255,.86); }

.hero-line--two{ color:rgba(255,255,255,.90); }

/* =====================================================================
     DATES WERE WRAPPING
     "25 Sept 2026" broke over two lines once the columns tightened, which
     pushed the two date blocks out of step with the rest of the row. The
     value is now a single line that clips, and the date columns carry a
     little more of the available width than the passenger column.
     ===================================================================== */
  .engine-card .search-grid{
    grid-template-columns:
      minmax(0,1.2fr)    /* leaving from */
      minmax(0,1.2fr)    /* going to     */
      minmax(0,1fr)      /* departure    */
      minmax(0,1fr)      /* return       */
      minmax(0,1fr)      /* travellers   */
      minmax(150px,auto);/* search       */
  }

.engine-card .search-grid > .field .date-display,
  .engine-card .search-grid > .field .pax-label,
  .engine-card .search-grid > .field input{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size:15.4px; display:block; min-width:0;
  }

.engine-card .search-grid > .field label{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

.engine-card .search-grid > .field .input-wrap{ min-width:0; }

@media (max-width:1240px){
    .engine-card .search-grid > .field .date-display,
    .engine-card .search-grid > .field .pax-label,
    .engine-card .search-grid > .field input{ font-size:14.4px; }
  }

/* =====================================================================
     SUGGESTION PANEL — a shorter, tidier list
     Nine rows plus a head and a foot made a panel tall enough to flip up
     over the headline. Seven rows is still more than anyone reads, and the
     footer no longer wraps onto a second line.
     ===================================================================== */
  .ac-dropdown{ max-height:min(304px, 42vh); }

.ac-foot{
    font-size:8.8px; letter-spacing:.13em; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; padding:7px 11px 3px;
  }

.ac-head{ padding:8px 11px 6px; }

.ac-item{ padding:9px 11px; }

/* =====================================================================
     PROOF BAND — one row, four claims
     Replaces the hero figures and the assurance strip that sat below them
     on a different background repeating the same points. Each cell carries
     the number, what it counts, and the qualifier that used to be its own
     card. Nothing is stated twice.
     ===================================================================== */
  .tnf-hero.engine .engine-stage .hero-proof{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:22px 34px; max-width:980px; margin:36px auto 0;
    padding-top:26px; border-top:1px solid rgba(var(--gold-rgb),.20);
    animation:rise-soft .7s var(--ease) both; animation-delay:.34s;
  }

.proof{ text-align:center; min-width:0; }

.proof .n{
    display:block; font-family:'Archivo',sans-serif; font-weight:900; font-stretch:88%;
    font-size:clamp(26px,2.9vw,38px); line-height:1; letter-spacing:-.045em;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(180deg,#fff 28%,var(--gold-pale));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

.proof .l{
    display:block; margin-top:9px;
    font-family:'JetBrains Mono',monospace; font-size:9.6px;
    letter-spacing:.16em; text-transform:uppercase; color:rgba(242,245,249,.60);
  }

.proof .s{
    display:block; margin-top:6px; font-size:12.2px; line-height:1.4;
    color:rgba(242,245,249,.44);
  }

#app.no-anim .hero-proof{ animation:none !important; opacity:1 !important; transform:none !important; }

@media (max-width:900px){
    .tnf-hero.engine .engine-stage .hero-proof{
      grid-template-columns:repeat(2,1fr); gap:20px 24px; margin-top:28px; padding-top:20px;
    }
  }

@media (max-width:420px){
    .proof .s{ display:none; }
  }

/* =====================================================================
     HEADER — one baseline, even rhythm
     Findings: nav items sat on a 1px gap with 10px padding, so the spacing
     between two links depended entirely on how long the words were; and
     the four controls on the right stood at four different heights (36,
     35, 31, and the brand at 40). Everything now shares a 40px baseline
     and a single spacing scale, with a hairline separating navigation
     from actions so the two groups read as two groups.
     ===================================================================== */
  .site-header-inner{ gap:0; height:74px; }

.site-header .brand{ flex-shrink:0; margin-right:38px; }

.site-nav{ gap:2px; flex:1; overflow:visible; }

.nav-link{
    height:40px; display:inline-flex; align-items:center; padding:0 15px;
    border-radius:999px; font-size:13.4px; font-weight:600;
    color:rgba(255,255,255,.74); position:relative; white-space:nowrap;
    transition:color .18s var(--ease), background .18s var(--ease);
    text-decoration: none; /*New line added*/
  }

.nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }

.nav-link.active{
    color:#fff; background:rgba(255,255,255,.10); font-weight:700;
     text-decoration: none;
  }

/* the current page also carries a gold rule, so it is legible without
     relying on a background tint alone */
  .nav-link.active::after{
    content:''; position:absolute; left:15px; right:15px; bottom:-1px;
    height:2px; border-radius:2px; background:var(--accent);
  }

/* actions, set apart from the links */
  .site-header-right{
    gap:10px; flex-shrink:0; margin-left:26px; padding-left:26px;
    border-left:1px solid rgba(255,255,255,.10);
  }

.hdr-cta{
    height:40px; padding:0 18px; border-radius:999px; gap:8px;
    font-size:13.4px; font-weight:700;
  }

.hdr-cta svg{ width:15px; height:15px; }

.support-pill{
    height:40px; padding:0 15px; border-radius:999px; gap:8px;
    font-size:13.2px; font-weight:600; text-decoration:none;
    transition:background .18s var(--ease), border-color .18s var(--ease);
  }

.support-pill:hover{
    background:rgba(255,255,255,.13) !important;
    border-color:rgba(var(--gold-rgb),.42) !important;
  }

.mkt-switch{ height:40px; padding:3px; border-radius:999px; align-items:center; }

.mkt-btn{ height:34px; padding:0 13px; border-radius:999px; font-size:12px; }

/* =====================================================================
     MOBILE NAVIGATION
     Below 900px the bar hid .site-nav and put nothing in its place, so the
     site had no navigation at all on a phone. The same links now stack
     into a drawer, with the market's own number and the quote CTA under
     them — the two things the bar drops first.
     ===================================================================== */
  .nav-burger{
    display:none; width:40px; height:40px; border-radius:12px; flex-shrink:0;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
    padding:0; align-items:center; justify-content:center; flex-direction:column; gap:4px;
    transition:background .18s var(--ease);
  }

.nav-burger:hover{ background:rgba(255,255,255,.12); }

.nav-burger span{
    display:block; width:16px; height:1.8px; border-radius:2px; background:#fff;
    transition:transform .26s var(--ease), opacity .18s var(--ease);
  }

.nav-burger.on span:nth-child(1){ transform:translateY(5.8px) rotate(45deg); }

.nav-burger.on span:nth-child(2){ opacity:0; }

.nav-burger.on span:nth-child(3){ transform:translateY(-5.8px) rotate(-45deg); }

.nav-drawer{
    border-top:1px solid rgba(255,255,255,.09);
    background:rgba(7,20,38,.985); backdrop-filter:blur(12px);
    animation:drawer-in .22s var(--ease) both;
  }

@keyframes drawer-in{ from{ opacity:0; transform:translateY(-6px); } }

.nav-drawer[hidden]{ display:none; }

.nav-drawer-inner{
    max-width:var(--wrap); margin:0 auto; padding:12px var(--gut) 20px;
    display:flex; flex-direction:column; gap:2px;
  }

.drawer-link{
    text-align:left; padding:14px 14px; border-radius:12px;
    font-family:'Archivo',sans-serif; font-size:15px; font-weight:600;
    color:rgba(255,255,255,.82); background:none; border:none;
  }

.drawer-link:hover{ background:rgba(255,255,255,.08); color:#fff; }

.drawer-link[aria-current="page"]{
    background:rgba(var(--gold-rgb),.12); color:var(--gold-pale); font-weight:700;
  }

.drawer-call{
    margin-top:10px; padding:13px 14px; border-radius:12px;
    border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
    text-decoration:none; display:block;
  }

.drawer-call b{ display:block; font-family:'Archivo',sans-serif; font-size:16px; color:#fff; }

.drawer-call span{ font-size:12.4px; color:rgba(242,245,249,.55); }

.drawer-cta{ margin-top:10px; height:46px; border-radius:999px; }

@media (max-width:1180px){
    .site-header .brand{ margin-right:22px; }
    .nav-link{ padding:0 11px; font-size:12.8px; }
    .site-header-right{ margin-left:16px; padding-left:16px; gap:8px; }
  }

@media (max-width:900px){
    .site-nav{ display:none!important; }
    .nav-burger{ display:flex; }
    .site-header-right{ border-left:0; padding-left:0; margin-left:auto; }
    .support-pill{ display:none; }
  }

@media (max-width:640px){
    .site-header-inner{ height:64px; }
    .nav-drawer-inner{ padding:10px var(--gut) 16px; }
  }

/* service figures, inherited from the stats band that was removed for
     repeating the hero — these belong beside the consultant, not on their
     own screen */
  .svc-facts{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
    margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.10);
  }

.svc-facts div{ text-align:center; }

.svc-facts b{
    display:block; font-family:'Archivo',sans-serif; font-weight:800; font-stretch:92%;
    font-size:22px; letter-spacing:-.03em; color:var(--gold-pale);
  }

.svc-facts span{ display:block; margin-top:5px; font-size:12.2px; color:rgba(242,245,249,.52); }

@media (max-width:640px){ .svc-facts{ grid-template-columns:1fr; gap:12px; } }

/* =====================================================================
     FARE CARDS — the overlap, and why it happened
     The tag was absolutely positioned in the top-right corner while the
     destination city was right-aligned into the same corner. Nothing kept
     them apart: "Singapore" and "BEST VALUE" simply drew on top of each
     other, and the longer the city name the worse it got. The tag now
     sits in a header row of its own, above the route, with the saving
     beside it — so the two can never collide whatever the city is called.
     ===================================================================== */
  .bp{ position:relative; display:flex; flex-direction:column; }

.bp-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 22px 0;
  }

.bp-tag{
    position:static; font-family:'JetBrains Mono',monospace;
    font-size:9.4px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    padding:5px 11px; border-radius:999px; background:var(--ink); color:var(--gold-pale);
    white-space:nowrap;
  }

.bp-save{
    font-family:'Archivo',sans-serif; font-size:11.6px; font-weight:700;
    color:var(--pounamu-deep); background:rgba(var(--pounamu-rgb),.11);
    border:1px solid rgba(var(--pounamu-rgb),.24);
    padding:4px 10px; border-radius:999px; white-space:nowrap;
  }

.bp-top{ padding:16px 22px 20px; }

.bp-city b{ font-size:18px; color:var(--ink); }

.bp-city small{ color:var(--text-soft); font-size:10.6px; }

/* was too faint to read */
  .bp-mid{ flex:0 0 auto; width:22px; color:var(--accent-dark); }

.bp-mid svg{ width:22px; height:22px; }

.bp-city.to .bp-mid{ transform:scaleX(-1); }

.bp-leg{
    margin-top:12px; font-family:'JetBrains Mono',monospace;
    font-size:10.4px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);
  }

.bp-carrier{ margin-top:12px; padding-top:12px; }

.bp-carrier b{ color:var(--text); font-weight:600; font-size:11.8px; }

.bp-price s{ color:var(--text-soft); }

.bp-price small{ color:var(--text-soft); }

.bp-bot{ margin-top:auto; }

/* =====================================================================
     THE RAIL
     Six fares will not sit in a row at any width worth designing for, so
     they scroll. Snap points keep a card square with the edge, the arrows
     move exactly one card, and they grey out at each end instead of
     sitting there doing nothing.
     ===================================================================== */
  .rail-wrap{ position:relative; }

.bp-rail{
    display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 2px 14px; margin:0 -2px;
    scrollbar-width:none; -ms-overflow-style:none;
    scroll-behavior:smooth;
  }

.bp-rail::-webkit-scrollbar{ display:none; }

.bp-rail > .bp{
    flex:0 0 clamp(272px, 31%, 352px);
    scroll-snap-align:start;
  }

.rail-nav{
    position:absolute; top:44%; transform:translateY(-50%); z-index:5;
    width:46px; height:46px; border-radius:50%;
    background:#fff; border:1px solid var(--border);
    display:grid; place-items:center; color:var(--ink);
    box-shadow:0 12px 30px -12px rgba(4,16,31,.5);
    transition:background .2s var(--ease), color .2s var(--ease),
               border-color .2s var(--ease), opacity .2s var(--ease);
  }

.rail-nav svg{ width:19px; height:19px; }

.rail-nav.prev{ left:-23px; }

.rail-nav.next{ right:-23px; }

.rail-nav:hover:not(:disabled){ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.rail-nav:disabled{ opacity:0; pointer-events:none; }

@media (max-width:1340px){
    .rail-nav.prev{ left:-8px; }
    .rail-nav.next{ right:-8px; }
  }

@media (max-width:760px){
    .rail-nav{ display:none; }
    .bp-rail{ gap:14px; padding-inline:0; }
    .bp-rail > .bp{ flex:0 0 84%; }
    .bp-head{ padding:12px 18px 0; }
    .bp-top{ padding:14px 18px 18px; }
  }

/* =====================================================================
     CONTRAST PASS
     Several greys on the light bands were set for a white page and were
     too pale once the bands went sand. Everything below is a legibility
     fix rather than a style change.
     ===================================================================== */
  .lp-sec.paper .lp-lead, .lp-sec.sand .lp-lead{ color:#4A5B6E; }

.lp-sec.dark .lp-lead, .lp-sec.navy .lp-lead{ color:rgba(242,245,249,.78); }

.lp-sec.paper .lp-card p, .lp-sec.sand .lp-card p{ color:#4A5B6E; }

.lp-card p{ color:rgba(242,245,249,.74); }

.lp-step p{ color:#4A5B6E; }

.rev p{ color:#26313F; }

.rev-by small{ color:var(--text-soft); }

.tiny.muted, .muted{ color:#5B6B7F; }

.cabin-feat{ color:#3E4E60; }

.ac-info .ac-name{ color:var(--text-soft); }

.fld-hint{ color:#5F7085; }

/* the sand band was almost the same value as paper — one step deeper so
     alternating sections actually read as alternating */
  .lp-sec.sand{ background:#E9EEF4; }

.lp-sec.sand .card,
  .lp-sec.sand .rev{ background:#fff; border-color:#D6DFE9; }

/* section rhythm: a hairline where two light bands meet */
  .lp-sec.paper + .lp-sec.paper{ border-top:1px solid var(--border-soft); }

/* =====================================================================
     RAIL CONTAINMENT
     The cards were pushing the page itself sideways: six items at a 272px
     minimum come to roughly 1,750px, and with nothing capping the rail's
     own width the overflow escaped upward into the document instead of
     scrolling inside the rail. Hence a whole section sitting off-centre
     and a card bleeding past the right edge of the screen. Each ancestor
     is now explicitly held to the width it was always meant to have.
     ===================================================================== */
  .lp-sec{ overflow-x:clip; }

.lp-inner{ width:100%; min-width:0; }

.rail-wrap{ width:100%; max-width:100%; min-width:0; }

.bp-rail{
    width:100%; max-width:100%; min-width:0;
    scroll-padding-left:2px;
    overscroll-behavior-x:contain;
  }

/* =====================================================================
     CARD INTERNALS
     The carrier name and the cabin chip were both wrapping onto second
     lines — "Air New Zealand · NZ99" over two rows, "PREMIUM ECONOMY"
     over two — which made every card a different height and pushed the
     perforation out of line. Both are single lines now, the carrier
     clipping if it must and the chip never shrinking.
     ===================================================================== */
  .bp-carrier{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; min-width:0;
  }

.bp-carrier b{
    min-width:0; flex:1 1 auto;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.02em;
  }

.bp-carrier .cabin-chip{
    flex:0 0 auto; white-space:nowrap;
    font-size:9.2px; letter-spacing:.1em; padding:5px 9px;
  }

.bp-city{ min-width:0; }

.bp-city b{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
  }

.bp-head{ flex-wrap:nowrap; }

.bp-tag, .bp-save{ flex:0 0 auto; }

/* the tear line, tidied — the notches sit on the card edge, the dashes
     between them, and the whole strip keeps out of the content's way */
  .bp-perf{ height:20px; margin-top:2px; }

.bp-perf::before, .bp-perf::after{ width:20px; height:20px; }

.bp-perf::before{ left:-10px; }

.bp-perf::after{ right:-10px; }

/* =====================================================================
     DOTS
     ===================================================================== */
  .rail-dots{
    display:flex; justify-content:center; gap:8px; margin-top:6px;
  }

.rail-dot{
    width:7px; height:7px; border-radius:999px; padding:0; border:0;
    background:var(--border); transition:background .25s var(--ease), width .25s var(--ease);
  }

.rail-dot:hover{ background:var(--text-faint); }

.rail-dot.on{ width:22px; background:var(--accent); }

@media (max-width:760px){
    .rail-dots{ margin-top:2px; }
  }

/* =====================================================================
     CABIN GUIDE — dark and gold
     This is the one section on the page where the reader is being asked to
     spend more, so it gets the expensive frame: near-black ground, gold
     rules, and the recommended cabin lit rather than merely outlined.
     Scoped to .cabins-dark so no other card picks it up.
     ===================================================================== */
  .cabins-dark{
    background:
      radial-gradient(900px 460px at 50% -10%, rgba(var(--gold-rgb),.14), transparent 62%),
      linear-gradient(180deg, #07172B 0%, var(--navy-950) 62%, #061525 100%);
    border-top:1px solid rgba(var(--gold-rgb),.20);
    border-bottom:1px solid rgba(var(--gold-rgb),.20);
  }

.cabins-dark .lp-kicker{ color:var(--gold); }

.cabins-dark .lp-h2{ color:#fff; }

.cabins-dark .lp-lead{ color:rgba(242,245,249,.72); }

.cabins-dark .cabin-card{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.11);
    backdrop-filter:blur(4px);
    transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
  }

.cabins-dark .cabin-card:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--gold-rgb),.42);
    background:rgba(255,255,255,.07);
  }

.cabins-dark .cabin-card-top{
    background:linear-gradient(180deg, rgba(255,255,255,.05), transparent);
    border-bottom:1px solid rgba(255,255,255,.10);
  }

.cabins-dark .cabin-card h3{ color:#fff; }

.cabins-dark .cabin-card-price{ color:rgba(242,245,249,.62); }

.cabins-dark .cabin-card-price b{ color:var(--gold-pale); }

.cabins-dark .cabin-feat{ color:rgba(242,245,249,.80); }

.cabins-dark .cabin-feat svg{ stroke:var(--pounamu-lift); }

.cabins-dark .cabin-card-body > div:last-child{
    border-top-color:rgba(255,255,255,.12) !important;
    color:rgba(242,245,249,.60) !important;
  }

.cabins-dark .cabin-card-body > div:last-child b{ color:var(--gold-pale) !important; }

.cabins-dark .tiny.muted{ color:rgba(242,245,249,.46); }

/* cabin chips, restated for a dark ground */
  .cabins-dark .cabin-chip{ border:1px solid transparent; }

.cabins-dark .cabin-chip.premium{
    background:rgba(var(--pounamu-rgb),.16); color:var(--pounamu-pale);
    border-color:rgba(var(--pounamu-rgb),.34);
  }

.cabins-dark .cabin-chip.business{
    background:rgba(var(--gold-rgb),.18); color:var(--gold-pale);
    border-color:rgba(var(--gold-rgb),.40);
  }

.cabins-dark .cabin-chip.first{
    background:rgba(255,255,255,.10); color:#fff;
    border-color:rgba(255,255,255,.24);
  }

/* the one we sell most of, lit rather than outlined */
  .cabins-dark .cabin-card.flagship{
    background:
      radial-gradient(420px 220px at 50% 0%, rgba(var(--gold-rgb),.16), transparent 70%),
      rgba(255,255,255,.06);
    border-color:var(--gold);
    box-shadow:0 0 0 1px rgba(var(--gold-rgb),.5), 0 26px 60px -26px rgba(var(--gold-rgb),.55);
  }

.cabins-dark .cabin-card.flagship .cabin-card-top{
    background:linear-gradient(180deg, rgba(var(--gold-rgb),.14), transparent);
    border-bottom-color:rgba(var(--gold-rgb),.30);
  }

.cabins-dark .cabin-card.flagship:hover{ border-color:var(--gold-lift); }

/* =====================================================================
     CLOSING BAND — one section, two speeds
     Talk to someone now on the left, have us watch the fare for later on
     the right. A single dark ground with one slow drifting bloom behind
     it, so the page ends on one idea rather than two.
     ===================================================================== */
  .talk-band{
    position:relative; overflow:hidden;
    background:linear-gradient(180deg, #071A2E 0%, var(--navy-950) 55%, #050F1D 100%);
    border-top:1px solid rgba(var(--gold-rgb),.18);
  }

.talk-glow{
    position:absolute; inset:-30% -10% auto -10%; height:120%;
    background:
      radial-gradient(620px 320px at 22% 18%, rgba(var(--gold-rgb),.16), transparent 66%),
      radial-gradient(560px 300px at 82% 72%, rgba(var(--pounamu-rgb),.14), transparent 66%);
    animation:talk-drift 22s ease-in-out infinite alternate;
    pointer-events:none;
  }

@keyframes talk-drift{
    from{ transform:translate3d(-2%, -1%, 0) scale(1); }
    to  { transform:translate3d(3%, 2%, 0) scale(1.08); }
  }

.talk-band .lp-inner{ position:relative; z-index:2; }

.talk-grid{
    display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center;
  }

.talk-col{ min-width:0; }

.talk-now .lp-h2{ max-width:18ch; }

.talk-now .lp-lead{ max-width:46ch; }

/* the three service figures, on a rule rather than in a box */
  .talk-facts{
    display:flex; flex-wrap:wrap; gap:14px 40px;
    margin:24px 0 26px; padding-top:22px;
    border-top:1px solid rgba(255,255,255,.12);
  }

.talk-facts b{
    display:block; font-family:'Archivo',sans-serif; font-weight:800; font-stretch:92%;
    font-size:21px; letter-spacing:-.03em; color:var(--gold-pale); line-height:1;
  }

.talk-facts span{ display:block; margin-top:6px; font-size:12px; color:rgba(242,245,249,.52); }

.talk-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }

/* The secondary button was .btn-ghost with an inline colour override —
     but .btn-ghost sets background:#fff, so it rendered as white text on
     a white pill and the label vanished. Its own class now, built for a
     dark ground from the start. */
  .talk-ghost{
    background:transparent; color:#fff;
    border:1.5px solid rgba(255,255,255,.30);
    padding:15px 26px; border-radius:999px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:14.5px;
    transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  }

.talk-ghost:hover{
    background:rgba(255,255,255,.10); border-color:#fff; transform:translateY(-2px);
  }

/* ---- the alert card ------------------------------------------------- */
  .alerts-card{
    position:relative; overflow:hidden;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.13);
    border-radius:22px; padding:32px 30px 28px;
    backdrop-filter:blur(6px);
    box-shadow:0 34px 80px -40px rgba(0,0,0,.85);
    transition:border-color .3s var(--ease), transform .3s var(--ease);
  }

.alerts-card:hover{ border-color:rgba(var(--gold-rgb),.36); transform:translateY(-3px); }

.alerts-card h3{
    font-family:'Archivo',sans-serif; font-weight:800; letter-spacing:-.03em;
    font-size:clamp(21px,2.1vw,27px); color:#fff; margin-bottom:10px;
  }

.alerts-card p{ font-size:14.2px; line-height:1.68; color:rgba(242,245,249,.70); }

.alerts-card .alert-form{ margin:22px 0 0; max-width:none; }

.alerts-card .alert-note{ text-align:left; }

/* a quiet sweep of the sky — three rings, one blip */
  .radar{
    position:absolute; top:-46px; right:-46px; width:190px; height:190px;
    pointer-events:none; opacity:.55;
  }

.radar i{
    position:absolute; inset:0; margin:auto; border-radius:50%;
    border:1px solid rgba(var(--gold-rgb),.42);
    animation:radar-ping 3.6s cubic-bezier(.22,.61,.36,1) infinite;
  }

.radar i:nth-child(2){ animation-delay:1.2s; }

.radar i:nth-child(3){ animation-delay:2.4s; }

.radar-dot{
    position:absolute; inset:0; margin:auto; width:7px; height:7px;
    border-radius:50%; background:var(--gold);
    box-shadow:0 0 14px 3px rgba(var(--gold-rgb),.6);
  }

@keyframes radar-ping{
    0%   { width:8px; height:8px; opacity:.9; }
    100% { width:190px; height:190px; opacity:0; }
  }

@media (prefers-reduced-motion:reduce){
    .talk-glow, .radar i{ animation:none; }
    .radar i{ width:120px; height:120px; opacity:.2; }
  }

@media (max-width:980px){
    .talk-grid{ grid-template-columns:1fr; gap:36px; }
    .talk-now .lp-h2, .talk-now .lp-lead{ max-width:none; }
  }

@media (max-width:640px){
    .alerts-card{ padding:26px 22px 24px; }
    .radar{ width:140px; height:140px; top:-34px; right:-34px; }
    .talk-facts{ gap:14px 26px; }
  }

/* =====================================================================
     HERO — a step back down
     The brightness lift went too far: the photograph started competing
     with the search card sitting on top of it. Back toward the darker end,
     though still well clear of the near-black it began at.
     ===================================================================== */
  .tnf-hero.engine .hero-media img{
    filter:brightness(1.08) saturate(1.04) contrast(1.0);
  }

.tnf-hero.engine .hero-media::after{
    background:
      radial-gradient(1100px 560px at 50% 10%, rgba(var(--bloom-rgb),.16), transparent 64%),
      linear-gradient(180deg,
        rgba(7,20,38,.58) 0%,
        rgba(7,20,38,.70) 46%,
        rgba(7,20,38,.86) 82%,
        var(--navy-950) 100%);
  }

/* =====================================================================
     REVIEWS — postcards from the route
     Three identical white boxes said nothing about travel. Each is now a
     postcard: the route franked across the top like a stamp, the quote in
     the middle, the traveller signed underneath. The arc between the two
     airport codes draws itself as the card arrives.
     ===================================================================== */
  .rev-grid{ gap:24px; }

.rev{
    position:relative; overflow:hidden;
    background:linear-gradient(168deg,#fff 0%,#FBFCFE 62%,#F4F7FA 100%);
    border:1px solid #DCE4ED; border-radius:18px;
    padding:0 28px 26px; margin:0;
    box-shadow:0 2px 3px rgba(4,16,31,.03);
    transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
  }

.rev:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--gold-rgb),.42);
    box-shadow:0 30px 60px -30px rgba(4,16,31,.42);
  }

/* the perforated top edge of a postcard */
  .rev::before{
    content:''; position:absolute; inset:0 0 auto; height:5px;
    background:repeating-linear-gradient(90deg,
      var(--ink) 0 14px, transparent 14px 22px);
    opacity:.14;
  }

/* franking mark: origin, arc, destination */
  .rev-stamp{
    display:flex; align-items:center; gap:12px;
    padding:24px 0 18px; margin-bottom:18px;
    border-bottom:1px dashed #D6DFE9;
    font-family:'JetBrains Mono',monospace; font-weight:700;
    font-size:15px; letter-spacing:.1em; color:var(--ink);
  }

.rev-arc{
    flex:1; height:16px; position:relative; min-width:36px;
  }

.rev-arc::before{
    content:''; position:absolute; left:0; right:0; top:50%;
    border-top:1.5px dotted rgba(var(--gold-rgb),.75);
    border-radius:50%;
    transform:scaleX(0); transform-origin:left center;
    animation:arc-draw .9s var(--ease) both;
    animation-delay:calc(.2s + var(--i,0) * .12s);
  }

.rev-arc::after{
    content:'✈'; position:absolute; right:-2px; top:50%;
    transform:translateY(-58%); font-size:12px; color:var(--accent-dark);
  }

@keyframes arc-draw{ to{ transform:scaleX(1); } }

#app.no-anim .rev-arc::before{ animation:none; transform:scaleX(1); }

.rev-stars{ color:var(--accent); letter-spacing:3px; font-size:13px; margin-bottom:12px; }

.rev blockquote{
    margin:0; font-size:14.6px; line-height:1.72; color:#26313F;
    position:relative;
  }

.rev blockquote::before{
    content:'“'; position:absolute; left:-4px; top:-26px;
    font-family:'Archivo',sans-serif; font-size:64px; line-height:1;
    color:rgba(4,16,31,.07); pointer-events:none;
  }

.rev-by{ margin-top:22px; padding-top:18px; border-top:1px solid #E4EAF1; }

.rev-by small{ font-family:'JetBrains Mono',monospace; font-size:10.6px; letter-spacing:.04em; }

/* =====================================================================
     CLOSING BAND — tightened
     The left column ran the full width of its cell while the card sat
     against the far edge, leaving a corridor of dead space between them.
     Both columns now sit against a centre line, with a hairline down it.
     ===================================================================== */
  .talk-grid{
    grid-template-columns:1fr 1px 1fr; gap:0 54px; align-items:center;
  }

.talk-rule{
    align-self:stretch; width:1px;
    background:linear-gradient(180deg,transparent,rgba(var(--gold-rgb),.30) 22%,rgba(var(--gold-rgb),.30) 78%,transparent);
  }

.talk-now{ max-width:520px; justify-self:end; }

.talk-later{ max-width:520px; justify-self:start; width:100%; }

.talk-now .lp-h2{ max-width:none; }

.talk-now .lp-lead{ max-width:none; font-size:14.6px; }

/* the contact row, restrained: one gold action, the rest quiet outlines.
     Scoped to this band so channelRow keeps its own look elsewhere. */
  .talk-band .chan-row{ gap:10px; margin-top:4px; }

.talk-band .chan-btn{
    height:44px; padding:0 18px; border-radius:999px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:13.4px;
    display:inline-flex; align-items:center; gap:9px;
    border:1.5px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05);
    color:#fff; transition:all .2s var(--ease);
  }

.talk-band .chan-btn svg{ width:16px; height:16px; }

.talk-band .chan-btn:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }

.talk-band .chan-call{
    background:rgba(var(--gold-rgb),.14); border-color:rgba(var(--gold-rgb),.45); color:var(--gold-pale);
  }

.talk-band .chan-call:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.talk-band .chan-wa{
    background:rgba(var(--pounamu-rgb),.14); border-color:rgba(var(--pounamu-rgb),.42); color:var(--pounamu-pale);
  }

.talk-band .chan-wa:hover{ background:var(--pounamu); border-color:var(--pounamu); color:#fff; }

.talk-actions{ margin-bottom:20px; }

.talk-facts b{ font-size:19px; }

/* radar: a sweep behind the card's shoulder rather than a lone dot */
  .radar{ top:-70px; right:-70px; width:240px; height:240px; opacity:.4; }

@keyframes radar-ping{
    0%   { width:10px; height:10px; opacity:.85; }
    100% { width:240px; height:240px; opacity:0; }
  }

@media (max-width:980px){
    .talk-grid{ grid-template-columns:1fr; gap:34px; }
    .talk-rule{ display:none; }
    .talk-now, .talk-later{ max-width:none; justify-self:stretch; }
  }

/* =====================================================================
     FOOTER
     The links were rendering in the info blue, which belongs to system
     notices and read as unvisited hyperlinks from another era. Quiet grey,
     gold on hover, with the columns set on the same mono label as the rest
     of the site and a gold hairline closing the page.
     ===================================================================== */
  .site-footer{
    background:linear-gradient(180deg,#050F1D 0%,#040B16 100%);
    border-top:1px solid rgba(var(--gold-rgb),.20);
  }

.footer-inner{ padding-block:62px 44px; }

.footer-col h4{
    font-family:'JetBrains Mono',monospace; font-size:9.6px; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase;
    color:rgba(var(--gold-rgb),.85); margin-bottom:18px;
  }

.footer-col a{
    display:block; padding:6px 0; font-size:13.6px;
    color:rgba(242,245,249,.62); text-decoration:none;
    transition:color .18s var(--ease), transform .18s var(--ease);
  }

.footer-col a:hover{ color:var(--gold-pale); transform:translateX(3px); }

.footer-about{ font-size:13.4px; line-height:1.75; color:rgba(242,245,249,.58); max-width:38ch; }

.site-footer .tiny{ color:rgba(242,245,249,.42); }

.site-footer .tiny b{ color:rgba(242,245,249,.72); }

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding-block:22px 30px; font-size:12.2px; color:rgba(242,245,249,.40);
  }

.footer-bottom a{ color:rgba(242,245,249,.55); }

.footer-bottom a:hover{ color:var(--gold-pale); }

#footer-accred{
    font-family:'JetBrains Mono',monospace; font-size:9.6px;
    letter-spacing:.14em; text-transform:uppercase; color:rgba(242,245,249,.46);
  }

.site-footer .tnf-mark{ margin-bottom:16px; }

/* =====================================================================
     WHY BOOK — cards that light as they arrive
     Each card carries a hairline that draws across its top edge on hover,
     and the icon lifts out of its plate. The comparison strip below repeats
     the same claims as plain rows, because some people want the argument
     and some just want the numbers side by side.
     ===================================================================== */
  .why-grid{ gap:20px; }

.why-band .lp-card{
    position:relative; overflow:hidden;
    padding:28px 26px 26px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    transition:transform .34s var(--ease), border-color .34s var(--ease), background .34s var(--ease);
  }

.why-band .lp-card::before{
    content:''; position:absolute; inset:0 0 auto; height:1.5px;
    background:linear-gradient(90deg, transparent, var(--gold), var(--pounamu-lift), transparent);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .55s var(--ease);
  }

.why-band .lp-card:hover{
    transform:translateY(-5px);
    border-color:rgba(var(--gold-rgb),.34);
    background:rgba(255,255,255,.065);
  }

.why-band .lp-card:hover::before{ transform:scaleX(1); }

.why-band .lp-card .ic{
    transition:transform .34s var(--ease), background .34s var(--ease), color .34s var(--ease);
  }

.why-band .lp-card:hover .ic{
    transform:translateY(-2px) scale(1.06);
    background:rgba(var(--gold-rgb),.20);
    color:var(--gold-pale);
  }

.why-band .lp-card h3{ font-size:16.5px; letter-spacing:-.02em; margin-bottom:9px; }

.why-band .lp-card p{ font-size:13.8px; line-height:1.72; color:rgba(242,245,249,.72); }

.why-band .lp-card p b{ color:var(--gold-pale); font-weight:700; }

/* ---- the side-by-side ------------------------------------------------ */
  .compare{
    margin-top:36px; border:1px solid rgba(255,255,255,.11); border-radius:18px;
    overflow:hidden; background:rgba(255,255,255,.03);
  }

.compare-head, .compare-row{
    display:grid; grid-template-columns:1.25fr 1fr 1fr; align-items:center;
    gap:18px; padding:15px 24px;
  }

.compare-head{
    background:rgba(255,255,255,.05);
    font-family:'JetBrains Mono',monospace; font-size:9.6px;
    letter-spacing:.17em; text-transform:uppercase; color:rgba(242,245,249,.52);
  }

.compare-head .compare-us{ color:var(--gold); }

.compare-row{
    border-top:1px solid rgba(255,255,255,.07);
    font-size:13.8px; color:rgba(242,245,249,.66);
    animation:cmp-in .5s var(--ease) both;
    animation-delay:calc(var(--i,0) * .07s);
  }

@keyframes cmp-in{ from{ opacity:0; transform:translateY(8px); } }

#app.no-anim .compare-row{ animation:none; opacity:1; transform:none; }

.compare-row:hover{ background:rgba(255,255,255,.035); }

.compare-what{ color:#fff; font-weight:600; }

.compare-them{ color:rgba(242,245,249,.50); }

.compare-us{
    display:flex; align-items:center; gap:9px;
    color:var(--gold-pale); font-weight:700;
  }

.compare-us i{
    flex:0 0 auto; width:20px; height:20px; border-radius:50%;
    display:grid; place-items:center; font-style:normal; font-size:11px;
    background:rgba(var(--pounamu-rgb),.20); color:var(--pounamu-lift);
  }

/* the column that matters is lit down its whole height */
  .compare{ position:relative; }

.compare::after{
    content:''; position:absolute; top:0; bottom:0; right:0; width:33.333%;
    background:linear-gradient(180deg, rgba(var(--gold-rgb),.07), transparent 70%);
    pointer-events:none;
  }

.compare-note{
    margin-top:14px; font-size:11.6px; line-height:1.6;
    color:rgba(242,245,249,.38); max-width:78ch;
  }

@media (max-width:900px){
    .compare-head{ display:none; }
    .compare-row{
      grid-template-columns:1fr; gap:5px; padding:16px 20px;
    }
    .compare-them::before{ content:'Typical agency: '; color:rgba(242,245,249,.34); }
    .compare-us::before{ content:''; }
    .compare::after{ display:none; }
  }

/* =====================================================================
     PAGE HEADER — shared by every page that is not the booking engine
     Cabins, Routes, Groups, About, Help and the FAQ each opened with a
     bare <h1> sitting on the page background, while the booking page
     opened on a dark band with a mono kicker and a gold accent. The site
     read as two sites. This is the booking page's own vocabulary at about
     half the height, because these pages are read rather than searched.
     ===================================================================== */
  .page-hero{
    position:relative; overflow:hidden;
    margin:0 calc(var(--gut) -1) 34px;
    padding:64px var(--gut) 56px;
    background:
      radial-gradient(760px 340px at 26% -20%, rgba(var(--gold-rgb),.16), transparent 64%),
      radial-gradient(620px 320px at 88% 120%, rgba(var(--pounamu-rgb),.12), transparent 66%),
      linear-gradient(170deg, #07182C 0%, var(--navy-950) 70%, #061424 100%);
    border-bottom:1px solid rgba(var(--gold-rgb),.20);
  }

body.bleed .page-hero{ margin-inline:0; }

.page-hero-glow{
    position:absolute; inset:auto -10% -60% -10%; height:120%;
    background:radial-gradient(520px 240px at 50% 50%, rgba(var(--gold-rgb),.10), transparent 70%);
    animation:talk-drift 26s ease-in-out infinite alternate;
    pointer-events:none;
  }

.page-hero-inner{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; }

.page-hero h1{
    font-family:'Archivo',sans-serif; font-weight:800;
    font-size:clamp(30px,4vw,50px); line-height:1.04; letter-spacing:-.035em;
    color:#fff; max-width:19ch; margin:0;
  }

.page-hero h1 em{
    font-style:italic; font-stretch:88%;
    background:linear-gradient(100deg,var(--gold) 10%,var(--gold-pale) 46%,var(--pounamu-lift) 92%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

.page-hero-sub{
    margin-top:18px; max-width:60ch;
    font-size:15.4px; line-height:1.72; color:rgba(242,245,249,.76);
  }

.page-hero-facts{
    display:flex; flex-wrap:wrap; gap:16px 44px;
    margin-top:28px; padding-top:24px;
    border-top:1px solid rgba(var(--gold-rgb),.20);
  }

.page-hero-facts b{
    display:block; font-family:'Archivo',sans-serif; font-weight:800; font-stretch:90%;
    font-size:22px; letter-spacing:-.035em; color:var(--gold-pale); line-height:1;
  }

.page-hero-facts span{ display:block; margin-top:6px; font-size:12.2px; color:rgba(242,245,249,.52); }

.page-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* the reveal runs once per arrival, like the booking page */
  .page-hero h1, .page-hero-sub, .page-hero-facts, .page-hero-actions, .page-hero .lp-kicker{
    animation:rise-soft .68s var(--ease) both;
  }

.page-hero .lp-kicker{ animation-delay:.02s; color:var(--gold); }

.page-hero h1{ animation-delay:.08s; }

.page-hero-sub{ animation-delay:.16s; }

.page-hero-facts{ animation-delay:.24s; }

.page-hero-actions{ animation-delay:.30s; }

#app.no-anim .page-hero *{ animation:none !important; opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion:reduce){ .page-hero-glow{ animation:none; } }

@media (max-width:760px){
    .page-hero{ padding:42px var(--gut) 38px; margin-bottom:24px; }
    .page-hero h1{ max-width:none; }
    .page-hero-facts{ gap:14px 26px; margin-top:22px; padding-top:18px; }
  }

/* =====================================================================
     CONTENT PAGES — same components as the landing pages
     These views were built on .sec / .card / .doc-sec while the booking
     page moved on to the lp- band system. Rather than rebuild them, the
     shared pieces are brought up to the same finish.
     ===================================================================== */
  .sec-head h2{ font-size:clamp(22px,2.6vw,31px); letter-spacing:-.03em; }

.sec-head p{ color:#4A5B6E; font-size:14.6px; line-height:1.7; max-width:66ch; }

.card{ border-radius:var(--radius); border-color:#DFE6EE; }

.doc-sec h3{ letter-spacing:-.02em; }

.accred-item{
    border-radius:14px; border:1px solid var(--border-soft); background:#fff;
    padding:20px 22px; transition:border-color .25s var(--ease), transform .25s var(--ease);
  }

.accred-item:hover{ border-color:rgba(var(--gold-rgb),.4); transform:translateY(-3px); }

.accred-item .ai-t{
    font-family:'Archivo',sans-serif; font-weight:800; font-size:15.4px;
    color:var(--ink); letter-spacing:-.02em; margin-bottom:6px;
  }

.accred-item .ai-d{ font-size:13px; line-height:1.65; color:#4A5B6E; }

/* accordions, matched to the cards on the booking page */
  .faq-item{
    border:1px solid var(--border-soft); border-radius:14px; background:#fff;
    margin-bottom:10px; overflow:hidden;
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
  }

.faq-item:hover{ border-color:rgba(var(--gold-rgb),.38); }

.faq-item.open{ border-color:rgba(var(--gold-rgb),.5); box-shadow:0 16px 36px -24px rgba(4,16,31,.4); }

.faq-q{
    font-family:'Archivo',sans-serif; font-weight:700; font-size:15px;
    letter-spacing:-.015em; color:var(--ink); padding:18px 20px;
  }

.faq-a{ color:#4A5B6E; font-size:14px; line-height:1.72; }

/* route cards on the guides page pick up the fare-card hover */
  .route-card{
    border-radius:16px;
    transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }

.route-card:hover{
    transform:translateY(-4px); border-color:rgba(var(--gold-rgb),.42);
    box-shadow:0 24px 50px -28px rgba(4,16,31,.45);
  }

/* the calendar and passenger popovers scroll when positionPopup() has to
     cap them, rather than running off the top or bottom of the window */
  .cal-popup, .pax-pop{ overflow-y:auto; overscroll-behavior:contain; }

.cal-popup{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }

.cal-popup::-webkit-scrollbar{ width:8px; }

.cal-popup::-webkit-scrollbar-thumb{
    background:var(--border); border-radius:999px;
    border:2px solid #fff; background-clip:padding-box;
  }

/* a shorter calendar needs to flip less often in the first place */
  .cal-popup{ padding:12px; width:302px; }

.cal-cell{ aspect-ratio:auto; height:32px; font-size:12.8px; }

.cal-head{ margin-bottom:8px; }

.cal-dow{ padding:0 0 4px; }

.cal-foot{ margin-top:9px; padding-top:9px; }

.cal-chip{ padding:5px 9px; font-size:11px; }

/* When the window is short there is no good side to open on — flipping
     just trades covering the fields below for covering the fields above.
     Below 780px tall the calendar behaves like it does on a phone: centred,
     fixed, clear of everything. */
  @media (max-height:780px){
    .cal-popup{
      position:fixed; top:50%; left:50%; right:auto; bottom:auto;
      transform:translate(-50%,-50%); width:min(320px, calc(100vw - 28px));
      max-height:min(440px, calc(100vh - 40px));
      box-shadow:0 40px 90px -20px rgba(7,20,38,.65);
    }
    .cal-popup.flip-x, .cal-popup.flip-y{ left:50%; right:auto; top:50%; bottom:auto; }
  }

/* the quote form's fields are stacked tightly, so its popovers keep clear
     of the card edge rather than sitting flush against it */
  .lead-card .cal-popup{ left:-2px; }

.lead-card .cal-popup.flip-x{ left:auto; right:-2px; }

/* =====================================================================
     THE CLOSING BAND IS NOW SITE FURNITURE
     Appended by render() to every public page. On the marketing pages the
     layout is already full-bleed; on the contained pages it has to break
     out of .content's 32px padding so it meets the footer edge to edge
     instead of floating in a box above it.
     ===================================================================== */
  .talk-band{
    margin:56px calc(var(--gut) -1) calc(-60px) ;
    padding-inline:var(--gut);
  }

body.bleed .talk-band{ margin-inline:0; }

@media (max-width:760px){
    .talk-band{ margin-top:36px; }
  }

/* the band sits directly on the footer, so the seam between them is a
     single gold hairline rather than two competing borders */
  .talk-band + *, .site-footer{ border-top-width:0; }

.site-footer{ border-top:1px solid rgba(255,255,255,.07); }

/* When the calendar is capped it scrolls, and the browser will happily
     scroll the selected day into view — which is how the month and year
     controls ended up above the visible area. Pin them. */
  .cal-popup .cal-head{
    position:sticky; top:0; z-index:3; background:#fff;
    padding-bottom:6px; margin-bottom:4px;
  }

.cal-popup .cal-dow{
    position:sticky; top:38px; z-index:2; background:#fff;
  }

.cal-popup .cal-foot{
    position:sticky; bottom:-1px; z-index:2; background:#fff;
    box-shadow:0 -6px 10px -8px rgba(4,16,31,.28);
  }

/* a little shorter again, so it fits below the field far more often */
  .cal-cell{ height:30px; font-size:12.4px; }

.cal-popup{ width:296px; }

/* =====================================================================
     RESPONSIVE — FINAL PASS  (keep this block last in the file)
     Why the search form stayed in six columns on a phone: a later,
     unconditional `.engine-card .search-grid { grid-template-columns: … }`
     rule was added below the responsive ones. Media queries add nothing to
     specificity, so the last unconditional declaration won at every width
     and the breakpoints never applied. Everything responsive for the
     booking form now lives here, at the end, where nothing can outrank it.
     If you add layout rules later, add them ABOVE this block.
     ===================================================================== */

  @media (max-width:1240px){
    .engine-card .search-grid{
      grid-template-columns:
        minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,0.9fr)
        minmax(0,0.9fr) minmax(0,1fr) minmax(132px,auto);
    }
  }

@media (max-width:1120px){
    .engine-card .search-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .engine-card .go-block{ grid-column:span 2; width:100%; height:64px !important; min-height:64px; }
  }

@media (max-width:820px){
    /* one field per row — five 60px columns are unusable, and the labels
       were clipping to "LEA…", "GOI…", "D…" */
    .engine-card .search-grid{ grid-template-columns:minmax(0,1fr); gap:10px; }
    .engine-card .search-grid > .field{
      height:auto; min-height:0; padding:12px 14px; overflow:visible;
    }
    .engine-card .search-grid > .field label{ font-size:9.2px; }
    .engine-card .search-grid > .field input,
    .engine-card .search-grid > .field .date-display,
    .engine-card .search-grid > .field .pax-label{ font-size:15.5px; }
    .engine-card .go-block{
      grid-column:span 1; width:100%; height:56px !important; min-height:56px;
      margin-top:2px;
    }

    /* the swap control moves to the seam between the two stacked fields */
    .engine-card .search-grid > .field.has-swap{ padding-left:14px; }
    .swap-od{ left:auto; right:14px; top:-16px; transform:none; width:32px; height:32px; }
    .swap-od:hover{ transform:rotate(180deg); }
    .swap-od.spun{ animation:od-spin .5s var(--ease); }

    .engine-card{ padding:14px 13px 12px; border-radius:18px; }
    .eng-bar{ gap:10px; margin-bottom:12px; }
    .trip-pills, .cab-pills{ width:100%; }
    .cab-pills{ overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
    .cab-pills::-webkit-scrollbar{ display:none; }
    .trip-pill, .cab-pill{ height:38px; padding:0 15px; font-size:12.8px; flex:0 0 auto; }
    .engine-foot{ gap:6px 16px; font-size:11.6px; justify-content:flex-start; }
    .engine-card .search-extra{ flex-direction:column; align-items:flex-start; gap:10px; }
    .engine-card .quote-nudge{ font-size:12.4px; }
  }

@media (max-width:560px){
    .tnf-hero.engine .engine-stage{ padding:30px 18px 34px; }
    .tnf-hero.engine .engine-stage h1{ font-size:clamp(27px,8vw,36px); }
    .hero-line--two{ font-size:.58em; }
    .tnf-hero.engine .engine-stage .hero-sub{ font-size:14px; }
    .tnf-hero.engine .engine-stage .engine-card{ margin-top:22px; }

    /* the floating contact buttons were sitting on top of the form */
    .contact-rail{ bottom:14px; right:12px; gap:8px; }
    .crail-btn{ width:48px; height:48px; }
    .crail-btn svg{ width:21px; height:21px; }

    .lp-sec{ padding-block:44px; }
    .lp-inner{ padding-inline:18px; }
    .page-hero{ padding:34px 18px 30px; }
  }

/* a phone in landscape is short, not narrow — the calendar still needs to
     stop trying to open above or below a field that has room for neither */
  @media (max-height:640px) and (orientation:landscape){
    .cal-popup{
      position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
      max-height:calc(100vh - 24px); width:min(320px, calc(100vw - 24px));
    }
  }

/* =====================================================================
     OVERFLOW CONTAINMENT  (keep at the end, with the responsive block)
     The form broke out of the right edge on a phone because .cab-pills is
     a flex item holding four pills: its min-content width is around 420px
     and, with no min-width:0, flexbox will not shrink it below that. It
     pushed .eng-bar wider than the card, the card wider than the stage,
     and the document wider than the screen. Anything that can hold wide
     content and sits in a flex or grid parent needs min-width:0 — that is
     the rule, not the exception.
     ===================================================================== */
  .eng-bar, .eng-bar > *,
  .trip-pills, .cab-pills,
  .engine-card, .engine-foot, .search-extra,
  .tnf-hero.engine .engine-stage,
  .talk-grid > *, .lp-inner, .lp-inner > *,
  .hero-proof, .hero-proof > *,
  .compare, .compare-row, .compare-row > *{
    min-width:0;
  }

.cab-pills{ overflow-x:auto; flex-wrap:nowrap; }

.trip-pills{ flex-wrap:nowrap; }

/* Safety net, not a substitute for the above: clip rather than hidden, so
     the sticky header keeps working. If the page ever scrolls sideways
     again, find the element that will not shrink — do not lean on this. */
  body{ overflow-x:clip; max-width:100vw; }

@media (max-width:820px){
    .eng-bar{ flex-direction:column; align-items:stretch; }
    .trip-pills, .cab-pills{ width:100%; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
    .trip-pills::-webkit-scrollbar, .cab-pills::-webkit-scrollbar{ display:none; }
    .trip-pill{ flex:1 1 0; min-width:0; }
  }

/* =====================================================================
     HERO WIDTH  (final; keep with the responsive block)
     .tnf-hero is display:flex, and .engine-stage is a flex item carrying a
     max-width but no width. A flex item with `flex: 0 1 auto` sizes to its
     content, so the stage was as wide as the widest thing inside it rather
     than as wide as the screen — and the card, sized from the stage, hung
     off the right edge. max-width alone cannot fix that; the item needs an
     explicit width to size from the container instead of from its content.
     ===================================================================== */
  .tnf-hero, .tnf-hero.engine{ width:100%; max-width:100%; }

.tnf-hero.engine .engine-stage{
    width:100%; max-width:min(1180px, 100%); flex:1 1 auto; min-width:0;
  }

.tnf-hero.engine .engine-stage > *{ max-width:100%; }

.tnf-hero.engine .engine-stage .engine-card{ width:100%; max-width:100%; }

.engine-card .search-grid,
  .engine-card .eng-bar,
  .engine-card .engine-foot,
  .engine-card .search-extra{ width:100%; max-width:100%; }

.engine-card .search-grid > *{ max-width:100%; }

/* the same guarantee for every other full-bleed band on the page */
  .lp-sec, .talk-band, .page-hero{ width:100%; max-width:100%; }

.lp-inner{ width:100%; max-width:min(1240px, 100%); }

@media (max-width:820px){
    :root{ --gut:16px; }
    .tnf-hero.engine .engine-stage{ padding-inline:var(--gut); }
    .engine-card{ padding:14px 12px 12px; }
  }

/* =====================================================================
     RESULTS — OUTBOUND vs RETURN
     The two legs were identical blocks side by side, so nothing told you
     which half you were reading. Each now names itself, carries the
     matching takeoff or landing mark, and is tinted: gold going out,
     pounamu coming back — the same rule as the rest of the site, where
     gold is the journey you are buying and pounamu is the settled fact.
     ===================================================================== */
  .leg{ position:relative; padding-left:14px; }

.leg::before{
    content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px;
    border-radius:3px; background:var(--border);
  }

.leg--out::before{ background:linear-gradient(180deg,var(--gold),var(--gold-deep)); }

.leg--ret::before{ background:linear-gradient(180deg,var(--pounamu-lift),var(--pounamu-deep)); }

.leg-dir{
    display:flex; align-items:center; gap:7px; margin-bottom:9px;
    font-family:'JetBrains Mono',monospace; font-size:9.4px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
  }

.leg-dir svg{ width:14px; height:14px; flex:0 0 auto; }

.leg--out .leg-dir svg{ color:var(--accent-dark); }

.leg--ret .leg-dir svg{ color:var(--pounamu-deep); }

.leg-dir b{
    margin-left:auto; font-family:'Instrument Sans',sans-serif; font-weight:600;
    font-size:11.4px; letter-spacing:0; text-transform:none; color:var(--text-soft);
  }

.leg--out .leg-line{ background:linear-gradient(90deg,var(--gold),rgba(var(--gold-rgb),.28)); }

.leg--ret .leg-line{ background:linear-gradient(90deg,rgba(var(--pounamu-rgb),.28),var(--pounamu)); }

/* a hairline between the two halves so they read as two journeys */
  .flight-card:not(.one-way) .leg--ret{ border-left:1px solid var(--border-soft); padding-left:24px; margin-left:6px; }

/* =====================================================================
     RESULT FILTERS
     ===================================================================== */
  .filters{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 20px; margin-bottom:16px;
  }

.filters-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border-soft);
  }

.filters-head b{ font-family:'Archivo',sans-serif; font-size:14.6px; color:var(--ink); }

.filters-clear{
    font-size:12.6px; font-weight:700; color:var(--accent-dark);
    background:var(--gold-wash); border:1px solid rgba(var(--gold-rgb),.3);
    padding:6px 13px; border-radius:999px; transition:.2s var(--ease);
  }

.filters-clear:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

.filters-grid{
    display:grid; grid-template-columns:auto 1.4fr 1fr 1fr; gap:22px 28px; align-items:start;
  }

.filter-group{ min-width:0; }

.filter-group > label{
    display:flex; align-items:baseline; gap:7px; margin-bottom:10px;
    font-family:'JetBrains Mono',monospace; font-size:9.4px;
    letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint);
  }

.filter-group > label b{
    font-family:'Archivo',sans-serif; font-size:13px; letter-spacing:-.01em;
    text-transform:none; color:var(--ink);
  }

/* segmented control */
  .seg{ display:inline-flex; background:var(--bg); border-radius:999px; padding:3px; gap:2px; }

.seg button{
    padding:8px 14px; border-radius:999px; font-size:12.6px; font-weight:600;
    color:var(--text-soft); white-space:nowrap; transition:.18s var(--ease);
  }

.seg button:hover{ color:var(--text); }

.seg button.on{ background:var(--ink); color:#fff; font-weight:700; }

/* airline picker */
  .air-filter{ display:flex; flex-wrap:wrap; gap:7px; }

.air-pick{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px 6px 6px; border-radius:999px;
    border:1.5px solid var(--border); background:#fff;
    font-size:12.6px; color:var(--text-soft); transition:.18s var(--ease);
  }

.air-pick i{
    width:26px; height:22px; border-radius:6px; flex:0 0 auto;
    display:grid; place-items:center; font-style:normal;
    font-family:'JetBrains Mono',monospace; font-weight:700; font-size:10px; color:#fff;
  }

.air-pick em{ font-style:normal; font-size:11px; color:var(--text-faint); }

.air-pick:hover{ border-color:var(--ink-3); color:var(--text); }

.air-pick.on{
    border-color:var(--accent); background:var(--gold-wash);
    color:var(--accent-dark); font-weight:700;
  }

.air-pick.on em{ color:var(--accent-dark); }

/* sliders */
  .rng{
    -webkit-appearance:none; appearance:none; width:100%; height:4px;
    border-radius:999px; background:var(--mist-2, #E2E9F1); outline:none; margin:6px 0 4px;
  }

.rng::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:20px; height:20px; border-radius:50%;
    background:var(--accent); border:3px solid #fff;
    box-shadow:0 2px 8px rgba(4,16,31,.35); cursor:pointer;
    transition:transform .15s var(--ease);
  }

.rng::-webkit-slider-thumb:hover{ transform:scale(1.14); }

.rng::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%;
    background:var(--accent); border:3px solid #fff;
    box-shadow:0 2px 8px rgba(4,16,31,.35); cursor:pointer;
  }

.rng-ends{
    display:flex; justify-content:space-between;
    font-size:10.6px; color:var(--text-faint);
    font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
  }

@media (max-width:1100px){
    .filters-grid{ grid-template-columns:1fr 1fr; }
  }

@media (max-width:820px){
    .filters{ padding:14px 15px; }
    .filters-grid{ grid-template-columns:1fr; gap:18px; }
    .seg{ width:100%; }
    .seg button{ flex:1 1 0; padding:9px 8px; }
    .air-filter{ max-height:132px; overflow-y:auto; }
    .flight-card:not(.one-way) .leg--ret{
      border-left:0; border-top:1px solid var(--border-soft);
      padding-left:14px; margin-left:0; padding-top:16px; margin-top:4px;
    }
  }

/* =====================================================================
     RESULTS TOOLBAR
     One row: what each sort gets you on the left, the count in the middle,
     filters as dropdowns on the right. The always-open panel it replaces
     took a third of the first screen before a single fare was visible.
     ===================================================================== */
  .fbar{
    display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    padding:8px 12px; margin-bottom:14px;
    position:sticky; top:78px; z-index:30;
  }

/* --- sort tabs: each says what choosing it buys --- */
  .sort-tabs{ display:flex; gap:2px; }

.sort-tab{
    padding:8px 14px 7px; border-radius:10px; text-align:left;
    border-bottom:2.5px solid transparent; transition:.18s var(--ease);
  }

.sort-tab b{
    display:block; font-family:'Archivo',sans-serif; font-weight:700;
    font-size:13.6px; color:var(--text-soft); letter-spacing:-.01em;
  }

.sort-tab span{
    display:block; margin-top:2px; font-size:11.6px; color:var(--text-faint);
    font-family:'JetBrains Mono',monospace; letter-spacing:.02em;
  }

.sort-tab:hover{ background:var(--bg); }

.sort-tab.on{ border-bottom-color:var(--accent); background:var(--gold-wash); }

.sort-tab.on b{ color:var(--accent-dark); }

.sort-tab.on span{ color:var(--text-soft); }

.fbar-count{ font-size:13px; color:var(--text-soft); white-space:nowrap; }

.fbar-count b{ font-family:'Archivo',sans-serif; font-weight:800; color:var(--ink); }

/* --- filter dropdowns --- */
  .fbar-tools{ display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }

.fdrop{ position:relative; }

.fdrop-btn{
    display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px;
    border-radius:10px; border:1.5px solid var(--border); background:#fff;
    font-size:13.2px; font-weight:600; color:var(--text); white-space:nowrap;
    transition:.18s var(--ease);
  }

.fdrop-btn svg{ width:13px; height:13px; color:var(--text-faint); transition:transform .22s var(--ease); }

.fdrop-btn:hover{ border-color:var(--ink-3); }

.fdrop.open .fdrop-btn{ border-color:var(--ink); background:var(--ink); color:#fff; }

.fdrop.open .fdrop-btn svg{ transform:rotate(180deg); color:#fff; }

.fdrop-btn.has{ border-color:var(--accent); background:var(--gold-wash); color:var(--accent-dark); }

.fdrop-btn i{
    font-style:normal; min-width:17px; height:17px; padding:0 4px;
    border-radius:999px; background:var(--accent); color:var(--on-accent);
    font-size:10.4px; font-weight:800; display:grid; place-items:center;
  }

.fdrop.open .fdrop-btn i{ background:#fff; color:var(--ink); }

.fdrop-panel{
    position:absolute; top:calc(100% + 7px); right:0; z-index:60;
    min-width:264px; max-width:min(340px, calc(100vw - 28px));
    background:#fff; border:1px solid var(--border-soft); border-radius:14px;
    padding:14px; box-shadow:0 26px 60px -22px rgba(4,16,31,.5);
    animation:ac-in .18s var(--ease) both;
  }

.fdrop-label{
    display:flex; align-items:baseline; gap:7px; margin-bottom:8px;
    font-family:'JetBrains Mono',monospace; font-size:9.4px;
    letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint);
  }

.fdrop-label b{
    font-family:'Archivo',sans-serif; font-size:13.4px; letter-spacing:-.01em;
    text-transform:none; color:var(--ink);
  }

.fdrop-note{ margin-top:10px; font-size:11.6px; line-height:1.55; color:var(--text-faint); }

.fdrop-reset{
    width:100%; margin-top:10px; padding:9px; border-radius:9px;
    background:var(--bg); font-size:12.4px; font-weight:600; color:var(--text-soft);
  }

.fdrop-reset:hover{ background:var(--mist-2,#E2E9F1); color:var(--text); }

.fdrop-check{
    display:flex; align-items:center; gap:10px; padding:9px 6px;
    font-size:13.4px; color:var(--text); cursor:pointer; border-radius:8px;
  }

.fdrop-check:hover{ background:var(--bg); }

.fdrop-check input{ width:16px; height:16px; accent-color:var(--accent); }

.seg--stack{ display:flex; flex-direction:column; gap:2px; background:transparent; padding:0; }

.seg--stack button{ text-align:left; padding:10px 12px; border-radius:9px; }

.seg--stack button:hover{ background:var(--bg); }

.fdrop-panel .air-filter{ flex-direction:column; gap:4px; max-height:230px; overflow-y:auto; }

.fdrop-panel .air-pick{ width:100%; justify-content:flex-start; border:0; padding:8px; border-radius:9px; }

.fdrop-panel .air-pick span{ flex:1; text-align:left; }

.fdrop-panel .air-pick:hover{ background:var(--bg); }

.fdrop-panel .air-pick.on{ background:var(--gold-wash); }

.fbar-clear{
    height:38px; padding:0 13px; border-radius:10px;
    font-size:12.8px; font-weight:700; color:var(--accent-dark);
    background:var(--gold-wash); border:1.5px solid rgba(var(--gold-rgb),.32);
  }

.fbar-clear:hover{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

.results-count{ font-size:12.6px; color:var(--text-faint); margin-bottom:12px; }

@media (max-width:1100px){
    .fbar-count{ order:3; width:100%; margin-top:-4px; }
    .fbar-tools{ margin-left:0; }
  }

@media (max-width:820px){
    .fbar{ position:static; padding:8px; gap:10px; }
    .sort-tabs{ width:100%; }
    .sort-tab{ flex:1 1 0; text-align:center; padding:8px 6px; }
    .sort-tab span{ font-size:10.4px; }
    .fbar-tools{ width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:none; }
    .fbar-tools::-webkit-scrollbar{ display:none; }
    .fdrop-btn, .fbar-clear{ flex:0 0 auto; }
    .fdrop-panel{ right:auto; left:0; }
    .fdrop:last-of-type .fdrop-panel{ right:0; left:auto; }
  }

/* =====================================================================
     EDIT SEARCH, IN PLACE
     The button used to navigate home, which threw away the results and any
     filters that had been set — a long way to go to change one date. The
     same form now opens under the summary it edits.
     ===================================================================== */
  .recap-wrap{ margin-bottom:14px; }

.recap-wrap .recap-bar{ margin-bottom:0; }

#btn-edit-search{ display:inline-flex; align-items:center; }

#btn-edit-search.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.edit-search{
    border:1px solid var(--border); border-top:0;
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:0 18px 40px -30px rgba(4,16,31,.5);
    padding:18px 20px 16px;
    animation:edit-open .26s var(--ease) both;
  }

@keyframes edit-open{ from{ opacity:0; transform:translateY(-8px); } }

#app.no-anim .edit-search{ animation:none; }

.edit-search-head{
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border-soft);
  }

.edit-search-head b{ font-family:'Archivo',sans-serif; font-size:15px; color:var(--ink); }

.edit-search-head span{ font-size:12.6px; color:var(--text-faint); }

/* the form inside is the same component as the home page, one size down */
  .edit-search .search-grid > .field{ min-height:76px; height:auto; }

.edit-search .go-block{ height:76px !important; min-height:76px; }

.edit-search .search-extra{ margin-top:12px; padding-top:12px; }

.edit-search .engine-foot{ display:none; }

/* the trust row belongs on the landing page */

  @media (max-width:1120px){
    .edit-search .go-block{ height:60px !important; min-height:60px; }
  }

@media (max-width:820px){
    .edit-search{ padding:14px 13px 12px; }
    .edit-search .go-block{ height:54px !important; min-height:54px; }
  }

/* =====================================================================
     IN-LIST CALL STRIP
     One strip, after the third fare. The angled cut is borrowed from the
     format that works on other travel sites, but the ink-and-gold keeps it
     inside our own system rather than looking like a bought advert — and
     the claim is one we can stand behind.
     ===================================================================== */
  .promo-strip{
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
    background:linear-gradient(110deg, var(--navy-950) 0%, #0C2338 62%, var(--navy-950) 100%);
    border:1px solid rgba(var(--gold-rgb),.24);
    border-radius:var(--radius);
    padding:20px 26px; margin:14px 0;
  }

/* the diagonal, drawn rather than imaged */
  .promo-cut{
    position:absolute; inset:0 auto 0 0; width:46%;
    background:linear-gradient(90deg, rgba(var(--gold-rgb),.16), transparent 78%);
    clip-path:polygon(0 0, 100% 0, calc(100% - 46px) 100%, 0 100%);
    pointer-events:none;
  }

.promo-strip::after{
    content:''; position:absolute; top:0; bottom:0; left:46%;
    width:2px; background:linear-gradient(180deg,transparent,var(--gold),transparent);
    transform:skewX(-14deg); opacity:.55; pointer-events:none;
  }

.promo-txt{ position:relative; flex:1 1 340px; min-width:0; }

.promo-txt b{
    display:block; font-family:'Archivo',sans-serif; font-weight:800;
    font-size:clamp(17px,1.9vw,21px); letter-spacing:-.025em; color:#fff;
  }

.promo-txt span{
    display:block; margin-top:6px; font-size:13.2px; line-height:1.6;
    color:rgba(242,245,249,.66); max-width:56ch;
  }

.promo-act{
    position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-left:auto;
  }

.promo-call{
    display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 18px;
    border-radius:999px; background:rgba(var(--gold-rgb),.13);
    border:1.5px solid rgba(var(--gold-rgb),.45); color:var(--gold-pale);
    font-family:'Archivo',sans-serif; font-weight:800; font-size:15px;
    letter-spacing:-.01em; white-space:nowrap; text-decoration:none;
    transition:.2s var(--ease);
  }

.promo-call svg{ width:16px; height:16px; }

.promo-call:hover{
    background:var(--accent); border-color:var(--accent); color:var(--on-accent);
    transform:translateY(-2px);
  }

.promo-act .btn{ height:42px; }

.promo-act small{
    flex-basis:100%; text-align:right;
    font-size:11.2px; color:rgba(242,245,249,.42);
  }

@media (max-width:820px){
    .promo-strip{ padding:18px; gap:16px; }
    .promo-cut, .promo-strip::after{ display:none; }
    .promo-act{ margin-left:0; width:100%; }
    .promo-call, .promo-act .btn{ flex:1 1 auto; justify-content:center; }
    .promo-act small{ text-align:left; }
  }

/* =====================================================================
     EQUAL-HEIGHT FLIGHT CARDS
     Cards were different heights because two things in the price column
     are conditional: the struck-through was-price and the "only 4 left"
     note. A card with both stood two rows taller than one with neither,
     so prices and Select buttons never lined up down the list.

     Both slots are now always in the markup and simply made invisible when
     they do not apply — the row keeps its height, the reader keeps their
     alignment, and screen readers skip the empty ones.
     ===================================================================== */
  .price-col > [data-empty]{ visibility:hidden; pointer-events:none; }

.flight-card{ align-items:stretch; }

.price-col{
    display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
    gap:4px; min-height:168px;
  }

.price-strike{ min-height:19px; line-height:19px; }

.seat-scarcity{ min-height:22px; line-height:22px; }

/* the chip row is the other thing that can differ — one line, scrollable
     rather than wrapping onto a second and pushing the card taller */
  .fare-chips{
    min-height:34px; align-items:center;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  }

.fare-chips::-webkit-scrollbar{ display:none; }

.fare-chips .chip{ flex:0 0 auto; }

@media (max-width:1000px){
    .price-col{ min-height:0; align-items:flex-start; }
    .price-col > [data-empty]{ display:none; }   /* stacked: nothing to align to */
  }

/* =====================================================================
     EDITABLE SUMMARY BAR
     Each value in the bar is the control that edits it. Clicking Depart
     opens the calendar; clicking Route opens the airport fields; clicking
     Travellers opens the passenger picker — the same components the search
     form uses, not lookalikes, so behaviour cannot drift between the two.
     ===================================================================== */
  .recap-bar{ flex-wrap:wrap; gap:2px; padding:6px 8px; align-items:stretch; }

.recap-item{ position:relative; }

.recap-item + .recap-item::before{
    content:''; position:absolute; left:-1px; top:12px; bottom:12px;
    width:1px; background:var(--border-soft);
  }

.recap-btn{
    display:block; text-align:left; padding:9px 14px; border-radius:10px;
    transition:background .18s var(--ease);
  }

.recap-btn:hover{ background:var(--bg); }

.recap-item.open .recap-btn{ background:var(--ink); }

.recap-btn .k{
    display:block; font-family:'JetBrains Mono',monospace; font-size:9px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
    margin-bottom:3px;
  }

.recap-item.open .recap-btn .k{ color:rgba(255,255,255,.6); }

.recap-btn .v{
    display:flex; align-items:center; gap:6px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:14.4px;
    letter-spacing:-.02em; color:var(--ink); white-space:nowrap;
  }

.recap-item.open .recap-btn .v{ color:#fff; }

.recap-btn .v svg{
    width:11px; height:11px; color:var(--text-faint); flex:0 0 auto;
    transition:transform .22s var(--ease);
  }

.recap-item.open .recap-btn .v svg{ transform:rotate(180deg); color:var(--gold); }

.recap-pop{
    position:absolute; top:calc(100% + 8px); left:0; z-index:70;
    min-width:250px; background:#fff;
    border:1px solid var(--border-soft); border-radius:14px; padding:8px;
    box-shadow:0 28px 64px -24px rgba(4,16,31,.52);
    animation:ac-in .18s var(--ease) both;
  }

.recap-item--wide .recap-pop{ min-width:520px; padding:14px; }

/* the calendar and passenger picker bring their own shell */
  .recap-pop > .cal-popup,
  .recap-pop > .pax-pop{
    position:static; box-shadow:none; border:0; padding:0; min-width:0;
    transform:none; animation:none; max-height:none; width:auto;
  }

.recap-list{ display:flex; flex-direction:column; gap:2px; }

.recap-list button{
    text-align:left; padding:10px 12px; border-radius:10px;
    transition:background .16s var(--ease);
  }

.recap-list button:hover{ background:var(--bg); }

.recap-list button.on{ background:var(--gold-wash); }

.recap-list b{
    display:block; font-family:'Archivo',sans-serif; font-weight:700;
    font-size:13.8px; color:var(--ink);
  }

.recap-list button.on b{ color:var(--accent-dark); }

.recap-list span{ display:block; margin-top:2px; font-size:11.6px; color:var(--text-faint); }

.recap-route{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.recap-route .field{
    background:var(--bg); border:1.5px solid transparent; border-radius:12px;
    padding:11px 13px; min-width:0;
  }

.recap-route .field:focus-within{ background:#fff; border-color:var(--accent); }

.recap-route .input-wrap{ background:transparent; border:0; padding:0; min-height:0; }

.recap-route .field input{
    font-family:'Archivo',sans-serif; font-weight:700; font-size:15px; color:var(--ink);
  }

.recap-route .swap-od{ left:-16px; top:50%; width:30px; height:30px; }

/* re-run: dead until something actually changed */
  .recap-go{
    align-self:center; height:40px; padding:0 18px; border-radius:999px;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:13.4px;
    border:1.5px solid var(--border); background:#fff; color:var(--text-faint);
    white-space:nowrap; transition:.2s var(--ease);
  }

.recap-go:disabled{ cursor:default; }

.recap-go.live{
    background:var(--accent); border-color:var(--accent); color:var(--on-accent);
    box-shadow:0 10px 24px -12px rgba(var(--gold-rgb),.9);
    animation:recap-nudge .5s var(--ease);
  }

.recap-go.live:hover{ background:var(--accent-2); transform:translateY(-1px); }

@keyframes recap-nudge{ 0%{transform:scale(.94);} 60%{transform:scale(1.03);} 100%{transform:scale(1);} }

#app.no-anim .recap-go.live{ animation:none; }

@media (max-width:1000px){
    .recap-item--wide .recap-pop{ min-width:0; width:min(420px, calc(100vw - 32px)); left: -100%;}
    .recap-route{ grid-template-columns:1fr;flex-direction: column; }
    .recap-route .swap-od{ left:auto; right:12px; top:-14px; }
  }

@media (max-width:820px){
    .recap-bar{ padding:6px; }
    .recap-btn{ padding:8px 10px; }
    .recap-btn .v{ font-size:13.4px; }
    .recap-item + .recap-item::before{ display:none; }
    .recap-go{ width:100%; margin-top:6px; }
    .recap-pop{ left:0; right:auto; width:min(320px, calc(100vw - 26px)); }
  }

/* =====================================================================
     SLEEKER FLIGHT CARDS  (final; keep with the responsive block)
     The card had grown to about 270px: 18px padding, a 38px logo, a
     direction row of its own, a 168px minimum on the price column and a
     34px chip strip. Four fares filled a screen. Everything below is
     tightening — no information is removed, it just stops sprawling.
     Target is roughly 150px, so five fares fit where three did.
     ===================================================================== */
  .flight-card{ padding:12px 16px; margin-bottom:10px; border-radius:12px; }

/* direction label: half the height, and it no longer needs its own band */
  .leg{ padding-left:11px; gap:10px; }

.leg::before{ top:2px; bottom:2px; width:2.5px; }

.leg-dir{ margin-bottom:5px; font-size:8.6px; letter-spacing:.14em; gap:6px; }

.leg-dir svg{ width:12px; height:12px; }

.leg-dir b{ font-size:10.6px; }

.airline-logo{ width:32px; height:32px; border-radius:8px; font-size:10.5px; }

.airline-name{ font-size:12.2px; }

.flight-no{ font-size:10.6px; }

.leg-route{ gap:8px; margin-top:5px; }

.leg-time{ font-size:16px; letter-spacing:-.02em; }

.leg-airport{ font-size:10.4px; }

.leg-path{ min-width:58px; gap:2px; }

.leg-dur, .leg-stops{ font-size:9.8px; }

/* the price column no longer props the card open */
  .price-col{ min-height:0; gap:1px; justify-content:center; }

.price{ font-size:20px; letter-spacing:-.03em; }

.price-strike{ min-height:15px; line-height:15px; font-size:11.4px; }

.price-sub{ font-size:10.6px; }

.seat-scarcity{ min-height:17px; line-height:17px; font-size:10.4px; padding:1px 8px; }

.price-col .btn{ height:34px; padding:0 20px; font-size:13px; margin-top:3px; }

.details-link{ font-size:11.6px; }

/* chips: one tight line */
  .fare-chips{ min-height:0; padding-top:10px; margin-top:8px; gap:6px; }

.chip{ padding:3px 10px; font-size:10.6px; }

/* the toolbar, on the same diet */
  .fbar{ padding:6px 10px; gap:10px 14px; }

.sort-tabs{ background:var(--bg); border-radius:12px; padding:3px; gap:2px; }

.sort-tab{ padding:6px 13px 5px; border-radius:9px; border-bottom:0; }

.sort-tab b{ font-size:12.4px; }

.sort-tab span{ font-size:10.2px; margin-top:1px; }

.sort-tab.on{ background:#fff; box-shadow:0 2px 8px -3px rgba(4,16,31,.35); }

.sort-tab.on b{ color:var(--ink); }

.sort-tab.on::after{
    content:''; display:block; height:2px; border-radius:2px;
    background:var(--accent); margin-top:4px;
  }

.fdrop-btn{ height:34px; padding:0 11px; font-size:12.4px; border-radius:9px; }

.fbar-clear{ height:34px; font-size:12px; border-radius:9px; }

.fbar-count{ font-size:12.4px; }

.fbar-tools{ gap:6px; }

/* the summary bar too — it is a wayfinder, not a headline */
  .recap-bar{ padding:4px 8px; }

.recap-btn{ padding:7px 12px; }

.recap-btn .k{ font-size:8.4px; margin-bottom:2px; }

.recap-btn .v{ font-size:13.4px; }

.recap-go{ height:34px; font-size:12.4px; padding:0 15px; }

.results-count{ margin-bottom:8px; font-size:11.8px; }

.promo-strip{ padding:16px 20px; margin:10px 0; }

@media (max-width:1000px){
    .flight-card{ padding:12px 14px; }
    .price-col .btn{ width:auto; }
  }

/* =====================================================================
     CONTROLS: WHITE, BORDERED, GOLD FOR STATE  (final block)
     The grey fills were carrying two jobs at once — separating controls
     from the page, and showing which one was chosen — so nothing read as
     clearly selected and the whole bar looked muddy. Now every control is
     white on a hairline border, and gold means exactly one thing: this is
     the one you picked. Grey is gone from the control surfaces.
     ===================================================================== */

  /* ---- sort ----------------------------------------------------------- */
  .sort-tabs{
    background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:3px; gap:3px;
  }

.sort-tab{
    background:#fff; border:1.5px solid transparent; border-radius:9px;
    padding:6px 14px 5px;
  }

.sort-tab:hover{ background:#fff; border-color:var(--border); }

.sort-tab.on{
    background:var(--gold-wash); border-color:var(--accent); box-shadow:none;
  }

.sort-tab.on span{ color:var(--gold-deep); }

.sort-tab.on::after{ display:none; }

/* the fill already says it */

  /* ---- filter buttons -------------------------------------------------- */
  .fdrop-btn{
    background:#fff; border:1.5px solid var(--border); color:var(--text);
  }

.fdrop-btn:hover{ border-color:var(--accent); color:var(--accent-dark); }

.fdrop-btn:hover svg{ color:var(--accent-dark); }

.fdrop.open .fdrop-btn,
  .fdrop-btn.has{
    background:var(--gold-wash); border-color:var(--accent); color:var(--accent-dark);
  }

.fdrop.open .fdrop-btn svg{ color:var(--accent-dark); }

.fdrop.open .fdrop-btn i,
  .fdrop-btn.has i{ background:var(--accent); color:var(--on-accent); }

/* ---- inside the dropdowns ------------------------------------------- */
  .seg, .seg--stack{ background:#fff; }

.seg button{
    background:#fff; border:1.5px solid transparent; border-radius:9px;
  }

.seg button:hover{ border-color:var(--border); color:var(--text); }

.seg button.on{
    background:var(--gold-wash); border-color:var(--accent);
    color:var(--accent-dark); font-weight:700;
  }

.fdrop-panel .air-pick{ border:1.5px solid transparent; background:#fff; }

.fdrop-panel .air-pick:hover{ border-color:var(--border); background:#fff; }

.fdrop-panel .air-pick.on{ background:var(--gold-wash); border-color:var(--accent); }

.fdrop-reset{ background:#fff; border:1.5px solid var(--border); color:var(--text-soft); }

.fdrop-reset:hover{ border-color:var(--accent); color:var(--accent-dark); background:#fff; }

.fdrop-check:hover{ background:var(--gold-wash); }

/* ---- the summary bar ------------------------------------------------- */
  .recap-btn{ border:1.5px solid transparent; background:#fff; }

.recap-btn:hover{ background:#fff; border-color:var(--border); }

.recap-item.open .recap-btn{
    background:var(--gold-wash); border-color:var(--accent);
  }

.recap-item.open .recap-btn .k{ color:var(--gold-deep); }

.recap-item.open .recap-btn .v{ color:var(--accent-dark); }

.recap-item.open .recap-btn .v svg{ color:var(--accent-dark); }

.recap-list button{ background:#fff; border:1.5px solid transparent; }

.recap-list button:hover{ border-color:var(--border); background:#fff; }

.recap-list button.on{ background:var(--gold-wash); border-color:var(--accent); }

.recap-route .field{ background:#fff; border:1.5px solid var(--border); }

.recap-route .field:focus-within{ border-color:var(--accent); }

/* the idle re-run button: outlined, not filled, so it does not read as
     disabled-grey next to everything else */
  .recap-go{ background:#fff; border-color:var(--border); color:var(--text-faint); }

/* ---- fare chips ------------------------------------------------------ */
  .chip{ background:#fff; border:1px solid var(--border); }

.chip-good{ background:#fff; border-color:rgba(var(--pounamu-rgb),.40); color:var(--pounamu-deep); }

.chip-warn{ background:#fff; border-color:rgba(var(--gold-rgb),.45); color:var(--gold-deep); }

.chip-info{ background:#fff; border-color:rgba(53,160,232,.4); color:var(--info); }

/* ---- the search form's field blocks, same treatment ------------------ */
  .engine-card .search-grid > .field{
    background:#fff; border:1.5px solid var(--border);
  }

.engine-card .search-grid > .field:hover{ background:#fff; border-color:var(--ink-4); }

.cab-pill, .trip-pill{ background:#fff; }

.trip-pill:hover{ background:#fff; border-color:var(--accent); color:var(--accent-dark); }

.trip-pill.on{
    background:var(--gold-wash); border-color:var(--accent); color:var(--accent-dark);
    box-shadow:none;
  }

.trip-pill.on:hover{ background:var(--gold-wash); border-color:var(--accent); color:var(--accent-dark); }

/* the results page itself keeps a very light ground so white cards read
     as cards rather than merging into the page */
  .fbar, .recap-bar, .flight-card, .filters{ background:#fff; }

/* =====================================================================
     FLIGHT CARD LAYOUT  (final block)
     Two problems. The direction label was inserted as the first child of a
     flex row, so "Outbound" sat beside the flight rather than above it,
     eating a column and leaving the dead space under it. And the airport
     codes — the one thing a traveller checks first — were 10px grey while
     the flight number beside them was the same size.
     ===================================================================== */

  /* the leg is a small grid: label across the top, logo and detail beneath */
  .leg{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "dir  dir"
      "logo info";
    gap:7px 10px;
    align-content:center;
    padding-left:12px;
  }

.leg-dir{ grid-area:dir; margin:0; }

.leg .airline-logo{ grid-area:logo; align-self:start; }

.leg-info{ grid-area:info; min-width:0; }

/* codes read like the boarding pass they will become */
  .leg-airport{
    font-family:'JetBrains Mono',monospace; font-weight:700;
    font-size:12.6px; letter-spacing:.08em; color:var(--text);
    margin-top:2px;
  }

.leg-time{ font-size:17.5px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }

.leg-route{ gap:12px; margin-top:6px; align-items:flex-start; }

.leg-path{ padding-top:4px; min-width:66px; }

.leg-dur{ font-size:10.2px; color:var(--text-faint); }

.leg-stops{ font-size:10.2px; font-weight:700; }

.airline-name{ font-size:12.6px; }

.flight-no{ font-size:10.8px; color:var(--text-faint); }

/* =====================================================================
     PRICE COLUMN — four things, not seven
     was-price · price · one qualifier · Select. The details link moves to
     a quiet text link and the scarcity note only reserves the space it
     needs, so the column reads top to bottom without stacking up.
     ===================================================================== */
  .price-col{
    gap:0; justify-content:center; text-align:right;
    padding-left:18px; border-left:1px solid var(--border-soft);
  }

.price-strike{
    font-size:11.6px; color:var(--text-faint); text-decoration:line-through;
    min-height:16px; line-height:16px;
  }

.price{
    font-family:'Archivo',sans-serif; font-weight:900; font-stretch:92%;
    font-size:23px; letter-spacing:-.035em; color:var(--ink); line-height:1.12;
  }

.price-sub{
    font-size:11px; color:var(--text-soft); font-weight:500; margin-top:1px;
  }

.price-sub b{ color:var(--ink); font-weight:700; }

.price-col .btn{ margin-top:9px; height:36px; padding:0 24px; font-size:13.2px; }

.details-link{
    margin-top:6px; font-size:11.4px; font-weight:600; color:var(--text-soft);
    text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border);
  }

.details-link:hover{ color:var(--accent-dark); text-decoration-color:var(--accent); }

.seat-scarcity{
    margin-top:5px; min-height:18px; line-height:18px; font-size:10.4px;
    background:#fff; border:1px solid rgba(var(--gold-rgb),.45); color:var(--gold-deep);
    padding:0 9px; border-radius:999px;
  }

@media (max-width:1000px){
    .leg{ padding-left:11px; }
    .price-col{ border-left:0; padding-left:0; text-align:left; align-items:flex-start; }
    .price-col .btn{ align-self:stretch; }
  }

/* =========================================================
   CUSTOM RANGE DATE PICKER + TRAVELLER POPOVER
   ========================================================= */
.engine-card .date-trigger,.engine-card .pax-trigger{user-select:none}

.engine-card .cal-popup{position:absolute;top:calc(100% + 8px);left:0;z-index:250;width:320px;max-width:min(320px,calc(100vw - 24px));background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 28px 70px -18px rgba(7,20,38,.45);animation:tnf-pop .16s var(--ease) both}

.engine-card .cal-popup[hidden],.engine-card .pax-pop[hidden]{display:none!important}

.cal-range-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 10px;border-bottom:1px solid var(--border-soft);margin-bottom:10px}

.cal-range-title{font-size:13px;font-weight:800;color:var(--text)}

.cal-range-title span{color:var(--accent-dark)}

.cal-range-hint{font-size:11px;color:var(--text-faint);font-weight:600}

.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.cal-month{min-width:0}

.cal-month-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}

.cal-month-name{font-size:13px;font-weight:800;color:var(--text)}

.cal-nav{width:28px;height:28px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text-soft);font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center}

.cal-nav:hover{background:var(--bg);border-color:var(--accent);color:var(--accent-dark)}

.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}

.cal-dow div{text-align:center;font-size:9.5px;font-weight:800;color:var(--text-faint);padding:3px 0}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}

.cal-cell{height:34px;border:0;background:none;border-radius:8px;font-size:12px;font-weight:650;color:var(--text);display:flex;align-items:center;justify-content:center;position:relative}

.cal-cell.empty{cursor:default}

.cal-cell:not(.empty):not(:disabled):hover{background:var(--bg)}

.cal-cell:disabled{color:#d4d7dd;cursor:not-allowed}

.cal-cell.today{color:var(--accent-dark);font-weight:850}

.cal-cell.sel{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-weight:800}

.cal-cell.range{background:var(--orange-wash);color:var(--text)}

.cal-cell.range-start{border-radius:8px 3px 3px 8px}

.cal-cell.range-end{border-radius:3px 8px 8px 3px}

.cal-cell.in-range{border-radius:3px}

.cal-cell.sel.range-start,.cal-cell.sel.range-end{color:#fff}

.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}

.cal-summary{font-size:11px;color:var(--text-soft);font-weight:650}

.cal-summary b{color:var(--text)}

.cal-clear{border:0;background:transparent;color:var(--accent-dark);font-size:11px;font-weight:800;padding:5px 7px;border-radius:7px;cursor:pointer}

.cal-clear:hover{background:var(--orange-wash)}

.engine-card .pax-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:260;width:310px;min-width:310px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 28px 70px -18px rgba(7,20,38,.45)}

.engine-card .pax-pop[hidden]{display:none!important}

.pax-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}

.pax-pop-title{font-size:13px;font-weight:800;color:var(--text)}

.pax-pop-sub{font-size:10.5px;color:var(--text-faint);font-weight:600;margin-bottom:8px}

.pax-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}

.pax-row:not(:last-child){border-bottom:1px solid var(--border-soft)}

.pax-row .t{font-size:13px;font-weight:750;color:var(--text)}

.pax-row .d{font-size:10.5px;color:var(--text-faint);font-weight:600;margin-top:2px}

.stepper{display:flex;align-items:center;gap:9px}

.step-btn{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--border);background:#fff;font-size:16px;font-weight:800;color:var(--text-soft);display:flex;align-items:center;justify-content:center}

.step-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-dark);background:var(--orange-wash)}

.step-btn:disabled{opacity:.35;cursor:not-allowed}

.step-val{width:22px;text-align:center;font-size:14px;font-weight:800;color:var(--text)}

.pax-done{width:100%;margin-top:10px;border:0;border-radius:9px;padding:9px 12px;background:var(--ink);color:#fff;font-size:12px;font-weight:800}

.pax-done:hover{background:var(--ink-2)}

.pax-cabin-note{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft);font-size:10.5px;color:var(--text-faint);font-weight:600}

.fld-date.is-disabled{opacity:.48;pointer-events:none}

@media(max-width:760px){
 .engine-card .cal-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(350px,calc(100vw - 24px));max-height:calc(100vh - 28px);overflow:auto}
 .cal-months{grid-template-columns:1fr;gap:14px}.cal-month:nth-child(2){display:none}
 .engine-card .pax-pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,calc(100vw - 24px));max-height:calc(100vh - 28px);overflow:auto}
}

/* Flight search form state */
.flight-search-form{width:100%;}

.flight-search-form .trip-pill,
.flight-search-form .cab-pill{cursor:pointer;}

.flight-search-form .fld-date.is-disabled{opacity:.55;}

.flight-search-form .fld-date.is-disabled .date-trigger{cursor:not-allowed;}

.flight-search-form .fld-date.is-disabled .date-trigger:hover{border-color:var(--border);}

/* =====================================================================
   PREMIUM AIRPORT PICKER — From / To
   Matches the supplied airport dropdown reference.
   ===================================================================== */
.tnf-airport-drop{
  position:absolute; top:calc(100% + 8px); left:0; right:auto;
  width:min(420px,calc(100vw - 28px)); min-width:340px; max-width:420px;
  max-height:min(390px,52vh); overflow-y:auto; z-index:2500;
  padding:7px; background:rgba(255,255,255,.99);
  border:1px solid #dfe6ee; border-radius:16px;
  box-shadow:0 28px 70px -24px rgba(4,16,31,.55),0 8px 24px rgba(4,16,31,.12);
  scrollbar-width:thin; scrollbar-color:#cfd8e2 transparent;
}

.fld-to .tnf-airport-drop{left:auto;right:0;}

.tnf-airport-drop[hidden]{display:none;}

.tnf-airport-head{
  position:sticky;top:0;z-index:2;padding:9px 11px 8px;
  background:rgba(255,255,255,.98); color:#718196;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid #edf1f5;
}

.tnf-airport-item{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;
  border:0;background:transparent;border-radius:11px;padding:9px 10px;
  cursor:pointer;color:#0d2038;transition:background .16s ease,transform .16s ease;
}

.tnf-airport-item:hover,.tnf-airport-item.is-active{background:#f5f8fb;}

.tnf-airport-item:active{transform:scale(.995);}

.tnf-airport-code{
  width:42px;height:30px;flex:0 0 42px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:#071426;color:#fff;font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:800;letter-spacing:.05em;
}

.tnf-airport-item:hover .tnf-airport-code,.tnf-airport-item.is-active .tnf-airport-code{
  background:var(--accent,#c9a84c);color:#101b2a;
}

.tnf-airport-main{min-width:0;flex:1;display:block;}

.tnf-airport-city{display:flex;align-items:baseline;gap:7px;min-width:0;line-height:1.15;}

.tnf-airport-city b{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.tnf-airport-city span{font-size:11px;color:#7d8da0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.tnf-airport-name{display:block;margin-top:3px;font-size:11.4px;line-height:1.2;color:#506176;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.tnf-airport-tag{
  flex:0 0 auto;padding:5px 8px;border:1px solid #e1e8ef;border-radius:999px;
  color:#8190a2;font-family:'JetBrains Mono',monospace;font-size:8.5px;
  font-weight:700;letter-spacing:.12em;white-space:nowrap;
}

.tnf-airport-empty{padding:20px 12px;text-align:center;color:#7d8da0;font-size:12.5px;}

.fld-from:focus-within .tnf-airport-drop,.fld-to:focus-within .tnf-airport-drop{display:block;}

@media(max-width:760px){
  .tnf-airport-drop{left:0!important;right:0!important;width:100%;min-width:0;max-width:none;max-height:min(330px,52vh);}
  .tnf-airport-tag{display:none;}
}

/* =========================================================
   TripsNFares — Real Fares slider
   Keeps the supplied card design; adds responsive sliding,
   touch support, and selected-card feedback.
   ========================================================= */

.rail-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

.bp-rail{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:18px;
  overflow:visible !important;
  width:100%;
  min-width:0;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  touch-action:pan-y;
}

.bp-rail .bp{
  flex:0 0 calc((100% - 36px) / 3);
  min-width:0;
  cursor:pointer;
  position:relative;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.bp-rail .bp:hover{
  transform:translateY(-4px);
}

.bp-rail .bp:focus-visible{
  outline:3px solid rgba(201,168,76,.55);
  outline-offset:3px;
}

.bp-rail .bp.is-loaded{
  border-color:#c9a84c !important;
  box-shadow:0 0 0 2px rgba(201,168,76,.18), 0 18px 42px rgba(12,17,40,.16);
}

.bp-rail .bp.is-loaded::after{
  content:"Route loaded";
  position:absolute;
  right:14px;
  bottom:14px;
  padding:5px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  background:#c9a84c;
  color:#fff;
}

.rail-nav{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #ddd8ca;
  border-radius:50%;
  background:#fff;
  color:#17233d;
  cursor:pointer;
  z-index:3;
  box-shadow:0 8px 24px rgba(12,17,40,.12);
  transition:.2s ease;
}

.rail-nav:hover:not(:disabled){
  transform:scale(1.05);
  border-color:#c9a84c;
  color:#9b7a1e;
}

.rail-nav:disabled{
  opacity:.35;
  cursor:not-allowed;
  box-shadow:none;
}

.rail-nav svg{
  width:19px;
  height:19px;
}

.rail-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-top:18px;
}

.rail-dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#d7d2c5;
  cursor:pointer;
  transition:.2s ease;
}

.rail-dot.on{
  width:24px;
  border-radius:999px;
  background:#c9a84c;
}
.alert-field {
    position: relative;
    flex: 1;
}

.alert-email-error {
    display: none;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.4;
    color: #c62828;
}

.alert-form.is-invalid .alert-email-error {
    display: block;
}

.alert-form input.is-invalid {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.08);
}

.alert-form input.is-valid {
    border-color: #2e8b70 !important;
}

.alert-success {
    margin-top: 10px;
    font-size: 13px;
    color: #2e8b70;
}
@media (max-width:1050px){
  .bp-rail .bp{
    flex-basis:calc((100% - 18px) / 2);
  }
}

@media (max-width:700px){
  .rail-wrap{
    gap:7px;
  }

  .rail-nav{
    flex-basis:36px;
    width:36px;
    height:36px;
  }

  .bp-rail{
    gap:12px;
  }

  .bp-rail .bp{
    flex-basis:100%;
  }

  .bp-rail .bp:hover{
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .bp-rail,
  .bp-rail .bp,
  .rail-nav{
    transition:none !important;
  }
}

/* One-card-at-a-time slider viewport */
.rail-wrap{
  overflow:hidden;
}

.rail-wrap .bp-rail{
  flex-shrink:0;
}

.rail-wrap .bp{
  scroll-snap-align:start;
}

/* ================= RESULTS: NO MATCHES STATE ================= */
.no-results{ padding:60px 20px; text-align:center; }
.no-results-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; max-width:360px; margin:0 auto; }
.no-results-inner b{ font-size:16px; font-weight:800; color:var(--text); }
.no-results-inner span{ font-size:13.5px; color:var(--text-faint); line-height:1.5; }
.no-results-inner .btn{ margin-top:6px; }

/* ================= FILTER PANEL EXTRAS (price / layover chips reuse fdrop-check) ================= */
.fdrop-panel .fdrop-range{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-soft); margin-top:8px; }
.fdrop-panel .fdrop-range input[type="range"]{ flex:1; accent-color:var(--accent); }

/* ================= FBAR: PERSISTENT CLEAR-FILTERS AFFORDANCE ================= */
.fbar-clear{
  border:none; background:none; color:var(--accent); font-weight:700; font-size:12.5px;
  padding:4px 8px; border-radius:8px; cursor:pointer; white-space:nowrap;
}
.fbar-clear:hover{ background:rgba(0,0,0,.05); }

.recap-field-error{ font-size:11.5px; font-weight:700; color:#c0392b; margin-top:6px; }
.recap-pop .recap-apply{
  display:block; width:100%; margin-top:12px; padding:10px 14px; border-radius:10px;
  background:var(--ink); color:#fff; font-weight:700; font-size:13px; border:none; text-align:center;
}
.recap-pop .recap-apply:hover{ background:var(--ink-2,#1c2431); }
.recap-pop .recap-apply:disabled{ background:var(--border); color:var(--text-faint); cursor:not-allowed; }

.fdrop-panel{ display:none; }
.fdrop-panel.is-open { display: block; }
.hero-proof{
   position: relative;
    z-index: -1;
}