/*
  GCCAP Website Theme — V10 “Frost + Tarmac”
  Goal: aviation + cold-chain feel, high readability, consistent rhythm, mobile-first.
*/

:root{
  /* Brand palette */
  --navy:#071226;       /* Jet Navy */
  --slate:#0b1f3b;      /* Tarmac Slate */
  --frost:#f6faff;      /* Cold White */
  --ice:#82b9ff;        /* Ice Blue */
  --aqua:#40c4b7;       /* Aqua Teal */
  --amber:#ffb020;      /* Safety Amber */
  --danger:#ff5a6b;
  --ok:#2ddf86;

  /* Semantic tokens */
  --bg:var(--frost);
  --card:#ffffff;
  --card2:rgba(255,255,255,.72);
  --text:var(--navy);
  --muted:rgba(11,31,59,.72);
  --muted2:rgba(11,31,59,.58);
  --line:rgba(7,18,38,.12);
  --line2:rgba(7,18,38,.08);
  --shadow:0 16px 44px rgba(7,18,38,.10);
  --shadow2:0 10px 26px rgba(7,18,38,.08);
  --radius:18px;
  --max:1120px;

  /* Buttons */
  --btnText:#071226;
  --btnBg:rgba(7,18,38,.05);
  --btnBorder:rgba(7,18,38,.14);
  --primaryBg:linear-gradient(135deg, rgba(64,196,183,.92), rgba(130,185,255,.88));
  --primaryText:#061324;
  --secondaryBg:rgba(130,185,255,.16);

  /* Charts (Watchdog JS reads these) */
  --chartGrid:rgba(7,18,38,.10);
  --chartLine:rgba(11,31,59,.86);
  --chartAccent:rgba(64,196,183,.95);
  --chartAccent2:rgba(130,185,255,.95);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(64,196,183,.16), transparent 60%),
    radial-gradient(900px 600px at 92% 6%, rgba(130,185,255,.18), transparent 58%),
    radial-gradient(900px 650px at 55% 110%, rgba(255,176,32,.10), transparent 60%),
    linear-gradient(180deg, #fbfdff, var(--bg));
  line-height:1.55;
  overflow-x:hidden;
}

/* Subtle runway / grid texture */
body:before{
  content:"";
  position:fixed;
  inset:-20vh -10vw;
  pointer-events:none;
  z-index:-3;
  background:
    repeating-linear-gradient(90deg, rgba(7,18,38,.028) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(180deg, rgba(7,18,38,.020) 0 1px, transparent 1px 96px);
  opacity:.55;
}

a{color:rgba(7,18,38,.90); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}

/* ===== Header / Nav ===== */
header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:saturate(135%) blur(10px);
  background:rgba(246,250,255,.76);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{display:flex; flex-direction:column; gap:2px}
.brand .logo{font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif; font-weight:800; letter-spacing:.35px}
.brand .tag{font-size:12px; color:var(--muted2)}

nav.links{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; align-items:center}
nav.links a{font-size:14px; color:rgba(7,18,38,.86); padding:8px 10px; border-radius:999px}
nav.links a[aria-current="page"]{background:rgba(64,196,183,.14); border:1px solid rgba(64,196,183,.25)}
nav.links a.cta{
  border:1px solid rgba(7,18,38,.14);
  background:rgba(255,255,255,.70);
  box-shadow:var(--shadow2);
}
@media (max-width: 820px){
  .nav{align-items:flex-start}
  nav.links{justify-content:flex-start}
}

/* ===== Background aura (kept, softened for light theme) ===== */
.bg-aura{
  position:fixed;
  inset:-30vh -20vw -30vh -20vw;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1000px 700px at calc(var(--mx, 28)*1%) calc(var(--my, 18)*1%), rgba(64,196,183,.18), transparent 60%),
    radial-gradient(900px 650px at calc(100% - var(--mx, 28)*1%) calc(30% + var(--my, 18)*.6%), rgba(255,176,32,.12), transparent 60%),
    radial-gradient(900px 650px at 50% 110%, rgba(130,185,255,.14), transparent 60%);
  filter:saturate(1.05);
  animation:auraFloat 10s ease-in-out infinite;
}
@keyframes auraFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}

/* ===== Layout rhythm ===== */
.pageTop{padding-top:12px}
.section{padding:28px 0}
.section h2{margin:0 0 10px 0; font-family:"Plus Jakarta Sans",Inter,sans-serif; font-size:22px; letter-spacing:-.2px}
.section p.lead{margin:0 0 12px 0; color:var(--muted); max-width:900px}

.grid{display:grid; gap:14px; grid-template-columns:repeat(12,1fr)}

/* Simple 3-up cards (used on Services) */
.cards3{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.cards3{grid-template-columns:1fr}}


.card{
  grid-column:span 12;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow2);
}
.card h3{margin:0 0 8px 0; font-size:16px; font-family:"Plus Jakarta Sans",Inter,sans-serif}
.card p{margin:0; color:var(--muted)}

@media(min-width:900px){
  .card.third{grid-column:span 4}
  .card.half{grid-column:span 6}
  .card.twothird{grid-column:span 8}
  .card.onethird{grid-column:span 4}
}

ul{margin:8px 0 0 18px; color:var(--muted)}
li{margin:6px 0}

.tablewrap{overflow:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow2)}
table{width:100%; border-collapse:collapse; background:var(--card); min-width:760px}
th,td{padding:12px 12px; border-bottom:1px solid var(--line2); vertical-align:top; color:var(--muted); font-size:14px}
th{color:rgba(7,18,38,.90); text-align:left; background:rgba(246,250,255,.75); font-weight:800}

small.note{color:var(--muted2); display:block; margin-top:10px}
hr.sep{border:0; border-top:1px solid var(--line); margin:20px 0}

footer{padding:26px 0 30px 0; border-top:1px solid var(--line); color:var(--muted2); font-size:13px}
.footergrid{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}

kbd{background:rgba(7,18,38,.06); border:1px solid var(--line); padding:2px 6px; border-radius:8px; color:var(--text); font-size:12px}

/* ===== Hero ===== */
.hero{padding:28px 0 22px 0; position:relative}
.hero:before{
  content:"";
  position:absolute;
  inset:-34px -40px -18px -40px;
  background:
    linear-gradient(135deg, rgba(64,196,183,.10), rgba(130,185,255,.10)),
    url("aviation_bg_light.svg");
  background-size: cover;
  background-position:center;
  border-radius:22px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  z-index:-1;
}

.hero h1{margin:0 0 12px 0; font-family:"Plus Jakarta Sans",Inter,sans-serif; font-size:36px; letter-spacing:-.6px}

/* Split hero layout */
.heroV7{display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items:stretch}
@media (max-width: 980px){ .heroV7{grid-template-columns:1fr} }

.pills{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0 0}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.65);
  color:var(--muted);
  padding:7px 10px;
  border-radius:999px;
  font-size:13px;
  box-shadow:var(--shadow2);
}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--btnBorder);
  background:var(--btnBg);
  color:rgba(7,18,38,.92);
  font-weight:800;
  box-shadow:var(--shadow2);
}
.button:hover{transform:translateY(-1px); transition:transform .12s ease}
.button.primary{border:0; background:var(--primaryBg); color:var(--primaryText)}
.button.secondary{border:1px solid rgba(130,185,255,.35); background:rgba(130,185,255,.16)}

/* Hero right visual card */
.visualCard{
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.60));
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.visualCard:before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:280px; height:280px;
  background:radial-gradient(circle at 30% 30%, rgba(64,196,183,.20), transparent 62%);
  transform: rotate(20deg);
}
.visualCard h3{margin:0 0 10px 0; font-size:13px; color:rgba(11,31,59,.78); letter-spacing:.35px; text-transform:uppercase}
.visualCard .metricGrid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.metric{border:1px solid var(--line); background:rgba(7,18,38,.03); border-radius:14px; padding:10px}
.metric .k{font-size:12px; color:var(--muted2)}
.metric .v{font-size:18px; font-weight:900; margin-top:4px}
.metric .hint{font-size:11px; color:var(--muted2); margin-top:4px; line-height:1.25}

/* “Story” blocks */
.storyGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
@media (max-width: 980px){ .storyGrid{grid-template-columns:1fr} }
.storyCard{border:1px solid var(--line); background:rgba(255,255,255,.75); border-radius:16px; padding:14px; box-shadow:var(--shadow2)}
.storyCard .t{font-weight:900}
.storyCard .d{margin-top:6px; color:var(--muted); line-height:1.45; font-size:13px}

.iconBubble,.aviIcon{
  width:38px; height:38px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(7,18,38,.04);
  border:1px solid var(--line);
  margin-bottom:10px;
}

.sepLine{margin:18px 0; height:1px; background:linear-gradient(90deg, transparent, rgba(7,18,38,.14), transparent)}

.auditBadge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(64,196,183,.28);
  background:rgba(64,196,183,.10);
  color:rgba(7,18,38,.86);
  font-size:12px;
  font-weight:900;
}
.auditBadge .dot{
  width:10px; height:10px; border-radius:999px;
  background:rgba(64,196,183,.92);
  box-shadow:0 0 0 6px rgba(64,196,183,.14);
}

/* Tooltip */
.tip{position:relative; border-bottom:1px dotted rgba(7,18,38,.35); cursor:help}
.tip:hover:after{
  content:attr(data-tip);
  position:absolute;
  left:0; top:100%;
  margin-top:8px;
  width:min(320px, 70vw);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  color:rgba(7,18,38,.92);
  font-size:12px;
  line-height:1.35;
  box-shadow:var(--shadow);
  z-index:50;
}

/* Sticky CTA bar (optional, left in codebase) */
.stickyCta{
  position:fixed;
  left:18px; right:18px; bottom:18px;
  z-index:999;
  border:1px solid var(--line);
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-radius:18px;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  box-shadow:var(--shadow);
}
.stickyCta .msg{color:rgba(7,18,38,.82); font-size:13px; line-height:1.25}
.stickyCta .msg b{color:var(--text)}
@media (max-width: 980px){
  .stickyCta{flex-direction:column; align-items:stretch}
}

/* Watchdog helper */
.emptyState{border:1px dashed rgba(7,18,38,.18); background:rgba(255,255,255,.70); border-radius:18px; padding:16px; box-shadow:var(--shadow2)}

/* ===== Mobile polish ===== */
@media (max-width: 980px){
  h1{font-size: clamp(28px, 6.2vw, 40px)}
  .stickyCta{left:12px; right:12px; bottom:12px}
  .stickyCta .msg{font-size:12px}
}
@media (max-width: 520px){
  .button{width:100%; justify-content:center}
  .actions{flex-direction:column; align-items:stretch}
}



/* V11 additions — client-excited content blocks */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  color:rgba(11,31,59,.78);
  font-size:13px; font-weight:800;
  box-shadow:var(--shadow2);
}
.kicker .dot{width:10px;height:10px;border-radius:99px;background:linear-gradient(135deg, rgba(64,196,183,.95), rgba(130,185,255,.95))}
.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:10px}
.sectionHead .h2{margin:0; font-size:22px}
.sectionHead .sub{margin:0; color:var(--muted); max-width:58ch}
@media (max-width:980px){ .sectionHead{flex-direction:column; align-items:flex-start} }

.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line);
  background:rgba(7,18,38,.03);
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}
.badge b{color:var(--text)}

.steps{display:grid; gap:10px; margin:10px 0 0 0; padding:0; list-style:none}
.step{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--shadow2);
}
.step .n{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  background:linear-gradient(135deg, rgba(64,196,183,.24), rgba(130,185,255,.22));
  border:1px solid rgba(7,18,38,.10);
  color:rgba(11,31,59,.86);
  flex:0 0 auto;
}
.step .t{font-weight:900}
.step .d{margin-top:3px;color:var(--muted); line-height:1.45}

.ctaBand{
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(64,196,183,.10), rgba(130,185,255,.10));
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow2);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
@media (max-width:980px){ .ctaBand{flex-direction:column; align-items:stretch} }
.ctaBand .left{max-width:70ch}
.ctaBand .left .t{font-size:18px; font-weight:1000; margin:0}
.ctaBand .left .d{margin:6px 0 0 0; color:var(--muted)}
.ctaBand .right{display:flex; flex-wrap:wrap; gap:10px}

.figure{
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  border-radius:18px;
  padding:12px;
  box-shadow:var(--shadow2);
}
.figure .cap{font-size:12px;color:var(--muted2); margin-top:8px; line-height:1.35}