/* ==========================================================================
   Executive Jets Services FZE theme (Phase 1)
   Aesthetic: cinematic, dark, private-aviation luxury. Deep navy + champagne.
   ========================================================================== */
:root{
  --bg:#0a0f1c; --surface:#0f1729; --surface-2:#152238; --text:#eef2fb;
  --muted:#94a6c4; --border:rgba(255,255,255,.09);
  --accent:#c9a86b; --accent-2:#4a6cf7; --accent-ink:#0a0f1c;
  --header-bg:rgba(9,14,26,.82); --nav-link:#eef2fb;
  --hero-overlay:linear-gradient(102deg,rgba(6,11,22,0.73) 8%,rgba(6,11,22,0.51) 52%,rgba(6,11,22,0.23) 100%);
  --hero-lead:rgba(234,240,251,.86);
  --input-bg:rgba(255,255,255,.035); --input-bg-focus:rgba(255,255,255,.06);
  --cta-bg:linear-gradient(120deg,#0f1729,#182a49);
  --footer-bg:#080d18;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Fraunces","Playfair Display",Georgia,serif;
  --header-h:86px;
}
/* Fraunces optical richness for the big type */
.display,h1,.h1,h2,.h2{font-optical-sizing:auto;font-weight:600;letter-spacing:-.015em}
.display{font-weight:600}
h3,.h3{font-family:var(--font-display);font-weight:600}
.eyebrow{color:var(--accent)}

/* champagne gradient text accent for hero keyword */
.gold-underline{position:relative;white-space:nowrap}
.gold-underline::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.10em;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.text-gradient{background:linear-gradient(100deg,#e7cf9c,#c9a86b 55%,#a07d3e);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ambient background flourish */
body{background:
  radial-gradient(1200px 600px at 82% -8%,rgba(74,108,247,.10),transparent 60%),
  radial-gradient(900px 500px at -8% 22%,rgba(201,168,107,.08),transparent 60%),
  var(--bg)}

/* section surfaces */
.section--panel{background:linear-gradient(180deg,var(--surface),transparent)}
.bg-surface{background:var(--surface)}
.hairline-top{border-top:1px solid var(--border)}

/* aircraft spec table */
.spec{display:grid;grid-template-columns:1fr auto;gap:0;border-top:1px solid var(--border)}
.spec div{display:contents}
.spec dt,.spec dd{padding:14px 2px;border-bottom:1px solid var(--border);margin:0}
.spec dt{color:var(--muted);font-size:.94rem}
.spec dd{text-align:right;font-weight:600;font-family:var(--font-display)}

/* gold rule */
.rule-gold{width:60px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);border:0;margin:20px 0}

/* fleet card price row */
.fleet-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:.88rem;margin-top:6px}
.fleet-meta b{color:var(--text);font-family:var(--font-display)}

/* quote / testimonial */
.quote{font-family:var(--font-display);font-weight:500;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.35;letter-spacing:-.01em}
.quote--em{font-style:italic}

/* number-led steps */
.steps{counter-reset:s}
.step{position:relative;padding-left:66px}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;left:0;top:-4px;
  font-family:var(--font-display);font-weight:600;font-size:1.5rem;color:var(--accent)}
.step h4{margin-bottom:6px}
.step p{color:var(--muted);font-size:.95rem}

/* pill on dark */
.pill{background:rgba(255,255,255,.04)}

/* selection */
::selection{background:var(--accent);color:var(--accent-ink)}

/* ==========================================================================
   Light theme ("Daylight lounge"): warm ivory, deep gold, navy ink.
   Activated via <html data-theme="light">. Dark remains the brand default.
   ========================================================================== */
html[data-theme="light"]{
  --bg:#f7f4ee; --surface:#fffdf8; --surface-2:#f0ebe0; --text:#161e31;
  --muted:#5d6a83; --border:rgba(22,30,49,.13);
  --accent:#9c7a37; --accent-2:#2b4cf0; --accent-ink:#ffffff;
  --header-bg:rgba(250,247,240,.9); --nav-link:#161e31;
  --input-bg:#f3efe6; --input-bg-focus:#fffdf8;
  --cta-bg:linear-gradient(120deg,#101729,#1d2d50); /* CTA stays a dark brand moment */
  --shadow-sm:0 2px 12px rgba(22,30,49,.08);
  --shadow:0 22px 55px -22px rgba(22,30,49,.24);
  --shadow-lg:0 45px 90px -32px rgba(22,30,49,.3);
}
html[data-theme="light"] body{background:
  radial-gradient(1200px 600px at 82% -8%,rgba(43,76,240,.05),transparent 60%),
  radial-gradient(900px 500px at -8% 22%,rgba(156,122,55,.07),transparent 60%),
  var(--bg)}
/* the footer stays dark in both modes: re-scope its palette locally */
html[data-theme="light"] .site-footer{--text:#eef2fb;--muted:#94a6c4;--border:rgba(255,255,255,.09);
  background:#0f1729;border-top-color:rgba(255,255,255,.09)}
html[data-theme="light"] .text-gradient{background:linear-gradient(100deg,#8a6a2e,#9c7a37 55%,#6f5322);
  -webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .ticks li::before{background-color:rgba(156,122,55,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c7a37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
html[data-theme="light"] .acc__q::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c7a37' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}
html[data-theme="light"] .pill{background:#fffdf8}
html[data-theme="light"] .hero__overlay{background:linear-gradient(102deg,rgba(6,11,22,0.7) 8%,rgba(6,11,22,0.47) 52%,rgba(6,11,22,0.2) 100%)}

/* theme toggle icons: dark default shows the sun (switch to light) */
.theme-toggle .i-moon{display:none}
html[data-theme="light"] .theme-toggle .i-sun{display:none}
html[data-theme="light"] .theme-toggle .i-moon{display:block}

/* ======================================================================
   Header navigation
   This site carries seven menu items plus an enquiry button, more than
   the other Group sites, so the row ran out of room and crowded the
   brand and CTA between roughly 960px and 1200px. Tighten the links on
   wide screens, and hand over to the mobile drawer earlier (1200px
   rather than the shared 960px) so the row is never squeezed.
   ====================================================================== */
@media (min-width:1201px){
  .nav-links{gap:0}
  .nav-links a{padding:.6em .72em;font-size:.9rem;white-space:nowrap}
  .nav-links a.is-active::after{left:.72em;right:.72em}
  .nav-cta{margin-left:14px}
}
@media (min-width:961px) and (max-width:1200px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:var(--header-h,86px) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--header-bg,var(--surface));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);padding:14px var(--gutter) 28px;transform:translateY(-12px);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
    box-shadow:var(--shadow)}
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links a{padding:.95em .2em;border-bottom:1px solid var(--border);font-size:1.05rem;opacity:.95;
    color:var(--text)!important}
  .nav-links a.is-active::after{display:none}
  .nav-cta{margin:16px 0 0}
  .nav-cta .btn{width:100%;justify-content:center}
}

/* Header brand logo: official gold metallic mark from footer */
.site-header .brand img{
  height:52px;
  width:auto;
  object-fit:contain;
  transition:transform var(--t);
}
.site-header .brand:hover img{
  transform:scale(1.02);
}
@media (max-width:640px){
  .site-header .brand img{
    height:42px;
  }
}

/* ======================================================================
   Quality & Safety: certificate downloads and the approach sequence
   ====================================================================== */
.doc-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);text-decoration:none;color:var(--text);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.doc-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--border));
  transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.doc-card__icon{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.doc-card__icon svg{width:23px;height:23px}
.doc-card__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.doc-card__body b{font-size:1rem;line-height:1.3}
.doc-card__body span{color:var(--muted);font-size:.85rem;line-height:1.4}
.doc-card__go{flex:none;margin-left:auto;color:var(--accent);opacity:.75;transition:opacity var(--t),transform var(--t)}
.doc-card__go svg{width:20px;height:20px}
.doc-card:hover .doc-card__go{opacity:1;transform:translateY(2px)}

/* Comply. Monitor. Identify. Prevent. Improve. */
.qs-approach{display:flex;flex-wrap:wrap;gap:8px}
.qs-approach span{display:inline-flex;align-items:center;padding:.5em 1em;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));
  color:var(--accent);font-weight:700;font-size:.86rem;letter-spacing:.01em}
.qs-approach span::after{content:"→";margin-left:.6em;opacity:.5;font-weight:400}
.qs-approach span:last-child::after{content:none}