/* =========================================================
   PAN PAN MEDIA — Design System
   Golden-age aviation meets modern aerospace.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- Color tokens --- */
  --navy-deep:   #0A1930;   /* night-flight / altitude sky */
  --navy-mid:    #123061;   /* aviation blue */
  --blue-signal: #1D5AA8;   /* accent blue, wing stripe */
  --gold:        #C9A227;   /* instrument gold */
  --gold-bright: #E8C158;   /* propeller highlight */
  --cream:       #F4EFE2;   /* aged sectional chart paper */
  --cream-dim:   #E9E1CC;
  --ink:         #10151F;
  --off-white:   #F7F5EF;
  --line:        rgba(201,162,39,0.35);

  /* --- Type --- */
  --font-display: 'Bebas Neue', 'Futura Condensed', Impact, sans-serif;
  --font-body: 'Jost', 'Futura', -apple-system, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius: 2px;
  --max-w: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  letter-spacing:0.02em;
  line-height:1.02;
  margin:0 0 0.4em 0;
  text-transform:uppercase;
}
p{ margin:0 0 1em 0; }
.container{ max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background:var(--gold);
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:0.06em;
  padding:12px 28px;
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
  cursor:pointer;
  transition:all .25s ease;
  text-transform:uppercase;
}
.btn:hover{ background:var(--gold); color:var(--navy-deep); }
.btn.solid{ background:var(--gold); color:var(--navy-deep); }
.btn.solid:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.btn.on-light{ border-color:var(--navy-mid); color:var(--navy-mid); }
.btn.on-light:hover{ background:var(--navy-mid); color:var(--off-white); }

::selection{ background:var(--gold); color:var(--navy-deep); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* =========================================================
   NAVIGATION
   ========================================================= */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  background:transparent;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-nav.scrolled{
  background:rgba(10,25,48,0.94);
  backdrop-filter: blur(6px);
  padding:10px 0;
  box-shadow:0 2px 18px rgba(0,0,0,0.25);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:1.3rem;
  letter-spacing:0.05em;
  color:var(--off-white);
}
.nav-logo img{ height:56px; width:auto; transition:height .3s ease; }
.site-nav.scrolled .nav-logo img{ height:44px; }
.nav-logo .fallback-mark{
  height:38px; width:38px;
  border:1.5px solid var(--gold);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  color:var(--gold);
  font-size:1rem;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.nav-links{
  display:flex; align-items:center; gap:30px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--off-white);
  opacity:0.82;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:opacity .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.active{
  opacity:1; border-color:var(--gold); color:var(--gold-bright);
}
.nav-toggle{ display:none; background:none; border:none; color:var(--off-white); font-size:1.6rem; cursor:pointer; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:320px;
    background:var(--navy-deep); flex-direction:column; align-items:flex-start;
    padding:100px 30px 30px; gap:24px;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}

/* =========================================================
   HERO — rotating photographic backdrop
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:var(--navy-deep);
  isolation:isolate;
}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 2.2s ease;
  z-index:-2;
}
.hero-slide.active{ opacity:1; }
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,25,48,0.55) 0%, rgba(10,25,48,0.35) 45%, rgba(10,25,48,0.92) 100%);
  z-index:-1;
}
.hero-inner{
  text-align:center; color:var(--off-white); padding:0 20px;
  max-width:900px;
}
.hero-inner .eyebrow{ justify-content:center; margin-bottom:22px; }
.hero-inner .eyebrow::before, .hero-inner .eyebrow::after{
  content:''; width:26px; height:1px; background:var(--gold);
}
.hero-inner .eyebrow{ gap:12px; }
.hero h1{
  font-size:clamp(3rem, 9vw, 7rem);
  color:var(--off-white);
  text-shadow:0 4px 30px rgba(0,0,0,0.4);
}
.hero h1 span{ color:var(--gold); }
.hero .tagline{
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem,2.2vw,1.35rem);
  color:var(--cream-dim);
  max-width:640px; margin:18px auto 34px;
}
.hero-cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.hero-dots{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; gap:9px; z-index:2;
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--gold); background:transparent;
  padding:0; cursor:pointer; opacity:0.6;
}
.hero-dots button.active{ background:var(--gold); opacity:1; }

/* Placeholder sky gradient used until real photos are added */
.hero-slide.placeholder-sky{
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(232,193,88,0.18), transparent 55%),
    linear-gradient(180deg,#0A1930 0%,#123061 55%,#1D5AA8 100%);
}

/* =========================================================
   FLIGHT STRIP — signature divider (ATC progress-strip motif)
   ========================================================= */
.flight-strip{
  background:var(--navy-deep);
  color:var(--cream-dim);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  padding:11px 0;
}
.flight-strip .track{
  display:inline-flex;
  gap:48px;
  animation: strip-scroll 32s linear infinite;
  font-family:var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.flight-strip .track span{ color:var(--gold); margin:0 10px; }
@keyframes strip-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================================================
   SECTIONS
   ========================================================= */
section{ padding:110px 0; position:relative; }
section.dark{ background:var(--navy-deep); color:var(--off-white); }
section.dark h2{ color:var(--off-white); }
section.dark p{ color:var(--cream-dim); }
section.navy-mid{ background:var(--navy-mid); color:var(--off-white); }
section.cream{ background:var(--cream); }
section.line-top{ border-top:1px solid var(--line); }

.section-head{ max-width:720px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(2.2rem,5vw,3.6rem); margin-top:10px; }
.section-head p{ font-size:1.08rem; color:#4a4536; }
section.dark .section-head p{ color:var(--cream-dim); }

/* Grid utilities */
.grid{ display:grid; gap:32px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

/* Cards */
.card{
  background:var(--off-white);
  border:1px solid var(--line);
  padding:34px 28px;
  position:relative;
}
section.dark .card, section.navy-mid .card{
  background:rgba(255,255,255,0.03);
  border-color:rgba(201,162,39,0.28);
}
.card .tag{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.18em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:14px;
}
.card h3{ font-size:1.6rem; }

/* Photo panel */
.photo-panel{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  background:linear-gradient(160deg,var(--navy-mid),var(--navy-deep));
}
.photo-panel img{ width:100%; height:100%; object-fit:cover; }
.photo-panel .corner-label{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(10,25,48,0.85), transparent);
  padding:22px 20px 16px;
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em;
  color:var(--gold-bright); text-transform:uppercase;
}

/* =========================================================
   QUOTE ROTATOR (gauge-styled)
   ========================================================= */
.quote-rotator{
  background:var(--navy-deep);
  color:var(--off-white);
  padding:100px 0 90px;
  text-align:center;
  position:relative;
  border-top:3px solid var(--gold);
}
.quote-rotator .gauge-ring{
  width:64px;height:64px;border-radius:50%;
  border:2px solid var(--gold);
  margin:0 auto 30px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); color:var(--gold); font-size:0.7rem;
}
.quote-track{ position:relative; max-width:820px; margin:0 auto; min-height:180px; }
.quote-item{
  position:absolute; inset:0;
  opacity:0; transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
  pointer-events:none;
}
.quote-item.active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.quote-item blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,3.4vw,2.1rem);
  letter-spacing:0.01em;
  margin:0 0 18px;
  text-transform:none;
  line-height:1.25;
  color:var(--off-white);
}
.quote-item cite{
  font-family:var(--font-mono); font-style:normal;
  font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold);
}
.quote-dots{ display:flex; gap:10px; justify-content:center; margin-top:36px; }
.quote-dots button{
  width:7px;height:7px;border-radius:50%;
  background:transparent; border:1px solid var(--gold); cursor:pointer; padding:0;
}
.quote-dots button.active{ background:var(--gold); }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter{
  background: var(--gold);
  color: var(--navy-deep);
  padding:70px 0;
}
.newsletter .container{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.newsletter h3{ font-size:2.2rem; margin-bottom:6px; }
.newsletter p{ color:rgba(10,25,48,0.75); margin:0; }
.newsletter-form{
  display:flex; gap:0; flex:1; min-width:280px; max-width:440px;
  border:1.5px solid var(--navy-deep);
}
.newsletter-form input{
  flex:1; border:none; background:transparent; padding:14px 16px;
  font-family:var(--font-body); font-size:0.95rem; color:var(--navy-deep);
}
.newsletter-form input::placeholder{ color:rgba(10,25,48,0.5); }
.newsletter-form button{
  border:none; border-left:1.5px solid var(--navy-deep);
  background:var(--navy-deep); color:var(--gold-bright);
  padding:0 24px; font-family:var(--font-display); letter-spacing:0.06em;
  cursor:pointer; text-transform:uppercase;
}
.newsletter-note{
  width:100%; font-family:var(--font-mono); font-size:0.68rem;
  letter-spacing:0.08em; color:rgba(10,25,48,0.6); margin-top:10px;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  background:var(--navy-deep); color:var(--cream-dim);
  padding:70px 0 30px;
  border-top:1px solid var(--line);
}
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:50px; border-bottom:1px solid var(--line);
}
@media (max-width:800px){ .footer-top{ grid-template-columns:1fr 1fr; } }
.footer-brand .nav-logo{ margin-bottom:14px; }
.footer-brand p{ font-size:0.9rem; max-width:280px; color:var(--cream-dim); }
.footer-col h4{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em;
  color:var(--gold); text-transform:uppercase; margin-bottom:16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:0.92rem; color:var(--cream-dim); transition:color .2s; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em;
  color:rgba(244,239,226,0.45);
}
.social-row{ display:flex; gap:16px; }
.social-row a{
  width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  transition:background .2s, color .2s;
}
.social-row a:hover{ background:var(--gold); color:var(--navy-deep); }

/* =========================================================
   PAGE HEADER (interior pages)
   ========================================================= */
.page-header{
  position:relative; padding:200px 0 90px; overflow:hidden;
  background:linear-gradient(160deg,var(--navy-deep),var(--navy-mid));
  color:var(--off-white);
}
.page-header .container{ position:relative; z-index:1; }
.page-header h1{ font-size:clamp(2.6rem,7vw,5rem); color:var(--off-white); }
.page-header p{ color:var(--cream-dim); max-width:620px; font-size:1.1rem; }
.page-header::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(201,162,39,0.16), transparent 55%);
}

/* =========================================================
   MISC COMPONENTS
   ========================================================= */
.stat-row{ display:flex; gap:60px; flex-wrap:wrap; margin-top:20px; }
.stat{ }
.stat .num{ font-family:var(--font-display); font-size:2.6rem; color:var(--gold); }
.stat .label{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); }
section.dark .stat .label{ color:var(--cream-dim); }

.divider-gold{ height:1px; background:var(--line); margin:60px 0; }

.channel-card{
  display:flex; flex-direction:column; gap:18px;
  padding:36px 30px; border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  transition:transform .25s ease, border-color .25s ease;
}
.channel-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.channel-card .icon{
  width:50px;height:50px;border-radius:50%;
  border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center;
  color:var(--gold);
}
.channel-card h3{ font-size:1.5rem; margin-bottom:0; }
.channel-card p{ color:var(--cream-dim); font-size:0.95rem; margin-bottom:6px; }
.channel-card .go{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--gold-bright);
}

.video-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.video-frame video{ width:100%; height:100%; object-fit:cover; }
.video-frame .placeholder-note{
  color:var(--cream-dim); font-family:var(--font-mono); font-size:0.8rem;
  text-align:center; padding:30px; letter-spacing:0.06em;
}

.show-card{ border:1px solid var(--line); background:var(--off-white); }
.show-card .thumb{ aspect-ratio:16/9; background:linear-gradient(150deg,var(--navy-mid),var(--navy-deep)); position:relative; overflow:hidden; }
.show-card .thumb img{ width:100%;height:100%;object-fit:cover; }
.show-card .body{ padding:26px 24px; }
.show-card h3{ font-size:1.4rem; }
.show-card .meta{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; color:var(--gold); text-transform:uppercase; margin-bottom:10px; display:block; }

.contact-block{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
@media (max-width:860px){ .contact-block{ grid-template-columns:1fr; } }
.contact-detail{ display:flex; gap:16px; margin-bottom:26px; }
.contact-detail .ico{ width:42px;height:42px;border:1px solid var(--gold); border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--gold); }
.contact-detail h4{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.contact-detail a, .contact-detail p{ color:var(--off-white); margin:0; }

form.contact-form{ display:flex; flex-direction:column; gap:18px; }
form.contact-form label{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy-mid); margin-bottom:6px; display:block; }
form.contact-form input, form.contact-form textarea, form.contact-form select{
  width:100%; padding:13px 14px; border:1px solid var(--line);
  background:var(--off-white); font-family:var(--font-body); font-size:0.95rem;
  color:var(--ink);
}
form.contact-form textarea{ resize:vertical; min-height:130px; }

.logos-row{ display:flex; flex-wrap:wrap; gap:40px; align-items:center; opacity:0.85; }
.logos-row .lg{
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.14em;
  border:1px dashed var(--line); padding:16px 22px; color:var(--cream-dim);
  text-transform:uppercase;
}

.tier-card{ border:1px solid var(--line); padding:40px 30px; background:var(--off-white); position:relative; }
.tier-card.featured{ border-color:var(--gold); background:linear-gradient(160deg,#fff,var(--cream)); }
.tier-card .badge{ position:absolute; top:-1px; right:-1px; background:var(--gold); color:var(--navy-deep); font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; padding:6px 12px; text-transform:uppercase; }
.tier-card h3{ font-size:1.7rem; }
.tier-card ul{ list-style:none; padding:0; margin:20px 0 26px; display:flex; flex-direction:column; gap:10px; }
.tier-card li{ font-size:0.94rem; padding-left:22px; position:relative; }
.tier-card li::before{ content:'✈'; position:absolute; left:0; color:var(--gold); font-size:0.8rem; }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }