/* ============================================================
   BTM Travel — Shared brand layer for all landing pages
   Tokens mapped to the BTM Travel Design System + unified
   header / footer chrome. Link this ONE file on every page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root{
  /* ---- Brand palette (canonical DS values) ---- */
  --btm-orange:#FEA20F;      /* the single hero colour */
  --btm-orange-600:#E0890A;  /* hover / pressed */
  --btm-orange-700:#B86E08;
  --btm-orange-50:#FFF6E6;   /* subtle tint */
  --btm-yellow:#FFD166;      /* sparing accent only */
  --btm-black:#000000;
  --btm-charcoal:#1A1A1A;    /* the one dark surface */
  --btm-charcoal-2:#111111;  /* footer / deepest */
  --btm-warm-grey:#F5F5F5;   /* quiet surface */
  --btm-white:#FFFFFF;

  /* ---- Warm neutral ramp ---- */
  --n-50:#FAFAF9; --n-100:#F5F5F5; --n-200:#E7E7E6; --n-300:#D2D2D0;
  --n-400:#A8A8A5; --n-500:#78786F; --n-600:#54544D; --n-700:#353532;
  --n-800:#1A1A1A; --n-900:#000000;

  /* ---- Soft warm-tinted shadows (never pure black) ---- */
  --btm-shadow-xs:0 1px 2px rgba(26,26,26,.06);
  --btm-shadow-sm:0 2px 6px rgba(26,26,26,.08);
  --btm-shadow-md:0 6px 18px rgba(26,26,26,.10);
  --btm-shadow-lg:0 16px 40px rgba(26,26,26,.14);
  --btm-shadow-brand:0 10px 28px rgba(254,162,15,.35);

  /* ---- Radii (8px grid) ---- */
  --btm-r-sm:8px; --btm-r-md:12px; --btm-r-lg:16px; --btm-r-xl:24px; --btm-r-pill:999px;

  --btm-ease:cubic-bezier(.16,1,.3,1);
  --btm-font:'Poppins',Arial,Helvetica,sans-serif;
  --btm-display:'Barlow Condensed','Poppins',Arial,sans-serif;
}

/* ============================================================
   UNIFIED HEADER  —  <header class="btm-nav"> … </header>
   ============================================================ */
.btm-nav{position:fixed;top:0;left:0;right:0;z-index:300;
  background:rgba(26,26,26,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);height:auto;padding:0;box-shadow:none}
.btm-nav-inner{max-width:1200px;margin:0 auto;padding:0 28px;height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.btm-brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.btm-brand img{height:30px;width:auto;display:block}
.btm-brand-div{width:1px;height:22px;background:rgba(255,255,255,.18)}
.btm-brand-label{font-family:var(--btm-display);font-weight:700;font-size:.9375rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--btm-orange);line-height:1;white-space:nowrap}
.btm-nav-links{display:flex;align-items:center;gap:28px;background:transparent;height:auto;border:0;box-shadow:none;padding:0}
.btm-nav-links a{font-family:var(--btm-font);font-size:.875rem;font-weight:500;
  color:rgba(255,255,255,.62);text-decoration:none;transition:color .15s;white-space:nowrap}
.btm-nav-links a:hover{color:#fff}
.btm-nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--btm-orange);
  color:#000;font-family:var(--btm-font);font-size:.8125rem;font-weight:700;padding:0 20px;height:40px;
  border:none;border-radius:var(--btm-r-pill);cursor:pointer;text-decoration:none;
  transition:filter .15s,transform .12s var(--btm-ease)}
.btm-nav-cta:hover{filter:brightness(.92);transform:translateY(-1px)}
.btm-nav-cta{white-space:nowrap}
.btm-nav-cta svg,.btm-nav-cta i{width:15px;height:15px}
@media(max-width:860px){.btm-nav-links{display:none}}

/* ============================================================
   UNIFIED FOOTER  —  <footer class="btm-footer"> … </footer>
   ============================================================ */
.btm-footer{background:var(--btm-charcoal-2);color:rgba(255,255,255,.6);padding:64px 0 28px}
.btm-footer-inner{max-width:1200px;margin:0 auto;padding:0 28px}
.btm-footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:36px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08)}
.btm-footer-brand img{height:26px;width:auto;display:block;margin-bottom:18px}
.btm-footer-brand p{font-family:var(--btm-font);font-size:.8125rem;line-height:1.65;
  color:rgba(255,255,255,.5);max-width:260px}
.btm-footer-brand .btm-footer-product{display:inline-block;margin-top:16px;font-family:var(--btm-display);
  font-weight:700;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--btm-orange)}
.btm-footer-col h4{font-family:var(--btm-font);font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:14px}
.btm-footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.btm-footer-col a{font-family:var(--btm-font);font-size:.8125rem;color:rgba(255,255,255,.55);
  text-decoration:none;transition:color .15s}
.btm-footer-col a:hover{color:#fff}
.btm-footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.btm-footer-copy{font-family:var(--btm-font);font-size:.75rem;color:rgba(255,255,255,.35)}
.btm-footer-certs{display:flex;gap:8px;flex-wrap:wrap}
.btm-footer-cert{font-family:var(--btm-font);font-size:.5625rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.4);padding:4px 10px;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--btm-r-pill)}
@media(max-width:860px){
  .btm-footer-top{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  .btm-footer-top{grid-template-columns:1fr}
}