/* PrimeJet draft v3: a cool daylight cabin around the original night map.
   Loaded after the original styles; the published host never receives this class. */
@font-face {
  font-family: "PJ Commissioner";
  src: url("../fonts/Commissioner-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "PJ Commissioner";
  src: url("../fonts/Commissioner-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: "PJ Commissioner Flare";
  src: url("../fonts/CommissionerFlare-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}

html.draft-v3 {
  --canvas: #e8edf0;
  --canvas-2: #dfe6e9;
  --panel: #f7f9fa;
  --panel-hi: #ffffff;
  --brand-navy: #15232d;
  --brand-blue: #426b7c;
  --accent: #6a91a0;
  --accent-hover: #557c8b;
  --accent-muted: rgba(82, 124, 140, .12);
  --text-primary: #17232a;
  --text-secondary: #52616b;
  --hairline: rgba(35, 53, 62, .16);
  --hairline-strong: rgba(35, 53, 62, .28);
  --edge: inset 0 1px 0 rgba(255,255,255,.95);
  --lift: 0 15px 38px rgba(28,49,61,.11), 0 2px 7px rgba(28,49,61,.06);
  --lift-hi: 0 21px 48px rgba(28,49,61,.16), 0 4px 12px rgba(28,49,61,.08);
  --ff-display: "PJ Commissioner Flare", "PJ Commissioner", sans-serif;
  --ff-body: "PJ Commissioner", system-ui, sans-serif;
  --ff-mono: "PJ Commissioner", ui-monospace, monospace;
  --r: 16px;
  --r-sm: 10px;
  background: #e8edf0;
}
html.draft-v3[lang="kk"] {
  --ff-display: "PJ Commissioner Flare", "PJ Commissioner", sans-serif;
  --ff-body: "PJ Commissioner", sans-serif;
}
html.draft-v3[lang="zh"] {
  --ff-display: "Noto Serif SC", "Source Han Serif SC", serif;
  --ff-body: "Noto Sans SC", "Source Han Sans SC", sans-serif;
}
html.draft-v3 body { background: #e8edf0; color: var(--text-primary); }
html.draft-v3 .env { opacity: .16; }
html.draft-v3 .env-glow,
html.draft-v3 .env-streaks { display: none; }
html.draft-v3 h1,
html.draft-v3 h2,
html.draft-v3 h3,
html.draft-v3 h4 { font-synthesis: none; text-wrap: balance; }
html.draft-v3 h1 { letter-spacing: -.027em; }
html.draft-v3 h2 { letter-spacing: -.03em; }
html.draft-v3 h3 { letter-spacing: -.018em; }
html.draft-v3 .kicker,
html.draft-v3 .hero-facts dt,
html.draft-v3 .lang button,
html.draft-v3 .tag,
html.draft-v3 .hint,
html.draft-v3 .num,
html.draft-v3 .pp-dateline,
html.draft-v3 .ftr-col h5 { letter-spacing: .14em; font-variant-numeric: tabular-nums; }
html.draft-v3 .mono,
html.draft-v3 .hero-facts dd,
html.draft-v3 .geo-code,
html.draft-v3 .step-n,
html.draft-v3 .how-demo-ref,
html.draft-v3 .code { font-variant-numeric: tabular-nums; }
html.draft-v3 :focus-visible { outline: 2px solid #3d8195; outline-offset: 4px; border-radius: 8px; }

/* The brand, refuelling image and operational data remain the first impression. */
html.draft-v3 .hdr.solid {
  background: rgba(12,22,29,.88);
  border-bottom-color: rgba(245,250,252,.16);
  box-shadow: 0 12px 32px rgba(8,17,24,.16);
}
html.draft-v3 .nav a { color: #e0e9ed; }
html.draft-v3 .lang {
  background: rgba(18,30,40,.58);
  border-color: rgba(241,248,250,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 6px 18px rgba(0,0,0,.14);
}
html.draft-v3 .lang button { color: #e1e9ec; }
html.draft-v3 .lang button[aria-current="true"] { background: rgba(243,249,250,.19); color: #fff; }
html.draft-v3 .burger {
  background: linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.045));
  border-color: rgba(243,249,251,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 5px 14px rgba(0,0,0,.18);
}
html.draft-v3 .burger span { background: #f2f8f9; }
html.draft-v3 .hero {
  --text-primary: #f4f7f6;
  --text-secondary: #d6e1e5;
  --hairline: rgba(236,247,251,.19);
  --hairline-strong: rgba(236,247,251,.37);
  background: #122029;
  color: #f4f7f6;
}
html.draft-v3 .hero-media { filter: saturate(.83) contrast(1.02); }
html.draft-v3 .hero .poster { background-position: 68% 48%; transform: scale(1.025); animation: pjHeroBreathe 18s ease-in-out infinite alternate; }
@keyframes pjHeroBreathe { to { transform: scale(1.075); } }
html.draft-v3 .hero .scrim {
  background: linear-gradient(90deg, rgba(9,20,28,.91) 0%, rgba(10,21,29,.78) 32%, rgba(11,22,31,.36) 61%, rgba(11,22,31,.12) 100%),
              linear-gradient(180deg, rgba(8,18,25,.25) 0%, rgba(8,18,25,.05) 50%, rgba(8,18,25,.80) 100%);
}
html.draft-v3 .hero-in h1 {
  font-size: clamp(2.45rem, 4.5vw, 4.3rem);
  font-weight: 600;
  max-width: 17ch;
  line-height: 1.075;
  text-shadow: 0 2px 15px rgba(3,12,18,.32);
}
html.draft-v3 .hero-in .lede { max-width: 47ch; color: #e1e8e9; font-size: clamp(1rem,1.32vw,1.16rem); line-height: 1.55; }
html.draft-v3 .hero-facts { border-top-color: rgba(239,247,248,.24); }
html.draft-v3 .hero-facts dd { color: #fff; font-weight: 600; letter-spacing: .01em; }

/* Buttons are raised machined surfaces, with a real top edge and soft shadow. */
html.draft-v3 .btn {
  min-height: 48px;
  border-radius: 11px;
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 7px 19px rgba(20,38,48,.16), 0 2px 3px rgba(20,38,48,.09);
  transition: transform .28s var(--e-out), background .28s var(--e-soft), border-color .28s var(--e-soft), box-shadow .28s var(--e-soft);
}
html.draft-v3 .btn-accent {
  color: #15232b;
  background: linear-gradient(180deg,#fff 0%,#e9eef0 100%);
  border-color: rgba(255,255,255,.94);
}
html.draft-v3 .btn-accent:hover {
  color: #13212a;
  background: linear-gradient(180deg,#fff 0%,#f3f6f7 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, 0 12px 25px rgba(20,38,48,.20), 0 3px 5px rgba(20,38,48,.09);
}
html.draft-v3 .btn-accent:active,
html.draft-v3 .btn-ghost:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(20,38,48,.15), 0 2px 5px rgba(20,38,48,.08); }
html.draft-v3 .btn-ghost {
  color: #ecf3f4;
  background: linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.045));
  border-color: rgba(245,251,252,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px rgba(4,14,21,.19);
}
html.draft-v3 .btn-ghost:hover { background: linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.09)); border-color: rgba(245,251,252,.58); }
html.draft-v3 .hero-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-top: 14px;
  padding: 6px 11px;
  border: 1px solid rgba(241,249,251,.32);
  border-radius: 9px;
  background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  color: #e2edf0;
  font: 500 11.5px/1.25 var(--ff-body);
  letter-spacing: .025em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.21), 0 5px 15px rgba(0,0,0,.15);
  cursor: pointer;
}
html.draft-v3 .hero-motion-toggle[hidden] { display: none!important; }
html.draft-v3 .hero-motion-toggle::before {
  content: "";
  width: 8px;
  height: 10px;
  box-sizing: border-box;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
html.draft-v3 .hero-motion-toggle[aria-pressed="false"]::before {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0,100% 50%,0 100%);
}
html.draft-v3 .hero-motion-toggle:hover { background: linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.07)); border-color: rgba(241,249,251,.55); }

/* Preserve the full animated map. Only its controls gain tactile material. */
html.draft-v3 .geo {
  --ff-display: "PJ Commissioner Flare", "PJ Commissioner", sans-serif;
  --text-primary: #f2f7f7;
  --text-secondary: #ccdce2;
  --brand-blue: #a4d2dc;
  --hairline: rgba(233,247,252,.16);
  --hairline-strong: rgba(233,247,252,.34);
  color: #f2f7f7;
}
html.draft-v3 .geo-stage .map { background: radial-gradient(ellipse at 50% 57%,rgba(31,74,101,.34),transparent 54%), #07121b; }
html.draft-v3 .geo-code,
html.draft-v3 .geo-nav {
  background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.025));
  border-color: rgba(232,248,251,.36);
  color: #e0eef1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 8px 20px rgba(0,0,0,.20);
}
html.draft-v3 .geo-code[aria-selected="true"] { background: linear-gradient(180deg,#fff,#dce8eb); color: #13252e; border-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(0,0,0,.27); }
html.draft-v3 .geo-code:hover,
html.draft-v3 .geo-nav:hover { transform: translateY(-2px); border-color: #e7f7fa; }
html.draft-v3 .geo-plate { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 42px rgba(0,0,0,.28); }
html.draft-v3 .geo-plate.is-on { border-color: rgba(188,232,240,.66); }
html.draft-v3 .geo-plate-media { filter: saturate(.9) brightness(1.13); }
html.draft-v3 .geo-plate h3 { font-family: var(--ff-display); font-size: clamp(1.3rem,1.65vw,1.5rem); font-weight: 600; line-height: 1.2; }

/* A light sequence of surfaces gives the photograph sections breathing room. */
html.draft-v3 .sec:not(.geo) {
  color: #192830;
  --text-primary: #192830;
  --text-secondary: #536570;
  --hairline: rgba(36,57,69,.16);
  --hairline-strong: rgba(36,57,69,.27);
  --panel: rgba(252,254,255,.84);
  --panel-hi: #ffffff;
  background: radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.90),transparent 58%), linear-gradient(180deg,var(--from),var(--to));
}
html.draft-v3 .why { --from:#e9eef0; --to:#f4f7f8; }
html.draft-v3 .how { --from:#f4f7f8; --to:#e2e9ec; }
html.draft-v3 .services { --from:#f7f9f9; --to:#e9eff1; }
html.draft-v3 .partners { --from:#e9eff1; --to:#eef3f5; }
html.draft-v3 .news { --from:#eef3f5; --to:#e4eaec; }
html.draft-v3 .faq { --from:#e4eaec; --to:#f0f4f5; }
html.draft-v3 .request { --from:#f0f4f5; --to:#d9e2e6; }
html.draft-v3 .sec-head h2 { font-weight: 600; line-height: 1.115; max-width: 22ch; }
html.draft-v3 .sec-head .lede { color: var(--text-secondary); line-height: 1.58; max-width: 55ch; }
html.draft-v3 .sec:not(.geo) .kicker { color: #5c7c8b; }
html.draft-v3 .why-i.flip .flip-f h3 { font-size: clamp(1.18rem,1.58vw,1.4rem); font-weight: 600; line-height: 1.21; max-width: 28ch; }
html.draft-v3 .why-i.flip .flip-b p { font-size: 1rem; line-height: 1.52; }
html.draft-v3 .step-b h3,
html.draft-v3 .q-item h3 { font-size: clamp(1.2rem,1.52vw,1.35rem); font-weight: 600; line-height: 1.24; }
html.draft-v3 .step-b p,
html.draft-v3 .q-item p { line-height: 1.56; }

/* Photographic Why cards retain their dark front; the reverse is a lit panel. */
html.draft-v3 .why-i.flip .flip-f { border-color: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 38px rgba(24,42,55,.20); }
html.draft-v3 .why-i.flip .flip-f::before { opacity: .94; filter: saturate(.82) contrast(1.06); }
html.draft-v3 .why-i.flip .flip-f::after { background: linear-gradient(180deg,rgba(8,20,28,.13),rgba(9,22,30,.36) 46%,rgba(9,22,30,.84)); }
html.draft-v3 .why-i.flip .flip-f h3 { color: #f7fbfb; text-shadow: 0 2px 8px rgba(0,0,0,.28); }
html.draft-v3 .why-i.flip .flip-f .num { color: #e8f1f2; opacity: 1; }
html.draft-v3 .why-i.flip .flip-b,
html.draft-v3 .card.flip .flip-b {
  color: #172a34;
  background: linear-gradient(155deg,rgba(255,255,255,.99),rgba(227,237,240,.96));
  border-color: rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 #fff, 0 18px 42px rgba(28,49,61,.15);
}
html.draft-v3 .why-i.flip .flip-b p,
html.draft-v3 .card.flip .flip-b p { color: #435965; }
html.draft-v3 .why-i.flip .flip-b::before { color: #648797; }

html.draft-v3 #how .how-demo,
html.draft-v3 .q-hold,
html.draft-v3 .req-side,
html.draft-v3 .req-ok,
html.draft-v3 .acc details {
  background: linear-gradient(155deg,rgba(255,255,255,.93),rgba(230,239,242,.86));
  border: 1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 #fff, var(--lift);
}
html.draft-v3 .step-n,
html.draft-v3 .sec.alt .step-n { background: linear-gradient(155deg,#fff,#e2eaed); color: #476e7d; border-color: #fff; box-shadow: inset 0 1px #fff, 0 5px 12px rgba(23,45,56,.10); }
html.draft-v3 #how .how-demo { color:#172a34; }
html.draft-v3 #how .how-demo-k,
html.draft-v3 #how .how-demo-meta { color: #5a717d; }
html.draft-v3 #how .how-demo-ref { color: #2e596a; }

/* One deliberate dark break for fuel assurance and the tactile hold action. */
html.draft-v3 .sec.quality {
  --text-primary: #f0f5f5;
  --text-secondary: #c1d0d6;
  --hairline: rgba(232,246,249,.18);
  --hairline-strong: rgba(232,246,249,.32);
  --panel: rgba(29,47,59,.86);
  --panel-hi: rgba(54,76,88,.94);
  --from: #162630;
  --to: #0c1923;
  color: #f0f5f5;
  background: radial-gradient(ellipse at 84% 20%,rgba(91,126,140,.27),transparent 48%), linear-gradient(180deg,#162630,#0c1923);
}
html.draft-v3 .quality .kicker { color:#b8d1db; }
html.draft-v3 .quality .sec-head .lede,
html.draft-v3 .quality .q-item p { color:#c1d0d6; }
html.draft-v3 .quality .q-hold { color:#edf6f7; background: linear-gradient(155deg,rgba(79,101,111,.38),rgba(19,36,47,.78)); border-color:rgba(231,247,251,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 48px rgba(0,0,0,.20); }
html.draft-v3 .quality .hold-btn { color:#11232d; background:linear-gradient(180deg,#fff,#dfe9ec); border-color:#fff; box-shadow:inset 0 1px #fff,0 8px 20px rgba(0,0,0,.20); }
html.draft-v3 .quality .hold-btn:hover { background:linear-gradient(180deg,#fff,#edf4f5); transform:translateY(-2px); }
html.draft-v3 .quality .hold-steps li.lit { color:#f2f9fa; }
html.draft-v3 .quality .hold-done { color:#bce2e7; }

html.draft-v3 .card.flip .flip-f { background: linear-gradient(155deg,rgba(255,255,255,.98),rgba(228,237,241,.94)); border-color:#fff; box-shadow:inset 0 1px #fff,var(--lift); }
html.draft-v3 .card.flip .card-media::after { background:linear-gradient(180deg,rgba(4,18,28,.02),rgba(7,23,34,.25)); }
html.draft-v3 .card.flip .card-body h3,
html.draft-v3 .card.flip .flip-b h3 { color:#1a2b34; font-size: clamp(1.38rem,1.74vw,1.55rem); font-weight: 600; line-height: 1.2; }
html.draft-v3 .card.flip .card-body p { color:#546772; }
html.draft-v3 .card.flip .tag { color:#f6fbfc; background:rgba(13,31,43,.72); border:1px solid rgba(255,255,255,.35); border-radius:9px; }
html.draft-v3 .card.flip .hint,
html.draft-v3 .card.flip .lnk { color:#396b7c; }
html.draft-v3 .plogos img { filter:brightness(.1) sepia(.12) saturate(.3); opacity:.68; }
html.draft-v3 .plogos img:hover { opacity:.93; }

html.draft-v3 .acc details:hover { border-color:rgba(255,255,255,.98); box-shadow:inset 0 1px #fff,var(--lift-hi); }
html.draft-v3 .acc summary { font-size: 1.1rem; font-weight: 600; line-height: 1.38; }
html.draft-v3 .acc summary::after { color:#4f7989; }
html.draft-v3 input,
html.draft-v3 select,
html.draft-v3 textarea { background:rgba(255,255,255,.88); color:#1a2b34; border-color:rgba(50,75,86,.20); box-shadow:inset 0 1px 3px rgba(24,45,56,.035); }
html.draft-v3 input:focus,
html.draft-v3 select:focus,
html.draft-v3 textarea:focus { border-color:#608b9a; background:#fff; box-shadow:0 0 0 3px rgba(94,137,152,.15); }
html.draft-v3 option { background:#f7fafb; color:#172a34; }
html.draft-v3 .request .btn-ghost { color:#244350; background:linear-gradient(180deg,#fff,#e6eef1); border-color:#fff; }

html.draft-v3 .ftr { background:linear-gradient(180deg,#15232d,#0d1820); --text-primary:#edf4f5; --text-secondary:#bacbd1; --hairline:rgba(237,247,250,.18); color:#edf4f5; }
html.draft-v3 .ftr-col a,
html.draft-v3 .ftr-col p { color:#e6eff1; }
html.draft-v3 .ftr-col h5 { color:#bfd0d7; }
html.draft-v3 .ftr-bot p { color:#b6c8d0; }

/* Keep the tanker identity clear between the headline and the action row. */
@media (min-width: 1000px) and (min-height: 700px) {
  html.draft-v3 .hero-in > .kicker,
  html.draft-v3 .hero-in > h1,
  html.draft-v3 .hero-in > .lede { position:relative; top:-56px; }
}

@media (max-width: 860px) {
  html.draft-v3 .nav { background:rgba(12,24,32,.97); }
  html.draft-v3 .hero-in h1 { font-size:clamp(2.35rem,7vw,3.65rem); }
}
@media (max-width: 560px) {
  html.draft-v3 .hero { padding-top:122px; }
  html.draft-v3 .hero .scrim { background:linear-gradient(180deg,rgba(9,21,29,.65),rgba(9,21,29,.76) 47%,rgba(9,21,29,.89)); }
  html.draft-v3 .hero .poster { background-position:65% center; }
  html.draft-v3 .hero-in h1 { font-size:clamp(2.2rem,9vw,3.2rem); max-width:15ch; }
  html.draft-v3 .hero-facts { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:0; margin-top:30px; }
  html.draft-v3 .hero-facts > div { min-width:0; padding:13px 8px 0 0; margin:0; border:0; }
  html.draft-v3 .hero-facts > div:nth-child(even) { padding-left:12px!important; border-left:1px solid var(--hairline)!important; }
  html.draft-v3 .hero-facts > div:nth-child(n+3) { padding-top:12px; margin-top:12px; border-top:1px solid var(--hairline); }
  html.draft-v3 .hero-facts dt { font-size:9.5px; letter-spacing:.11em; margin-bottom:5px; }
  html.draft-v3 .hero-facts dd { font-size:12px; line-height:1.3; }
  html.draft-v3 .geo-fore { padding-top:68px; }
}
@media (prefers-reduced-motion: reduce) {
  html.draft-v3 .hero .poster { animation:none; transform:none; }
  html.draft-v3 .btn:hover,
  html.draft-v3 .geo-code:hover,
  html.draft-v3 .geo-nav:hover,
  html.draft-v3 .quality .hold-btn:hover { transform:none; }
}