/* WE-WIN AIR 航空物流 — page stylesheet (loads after ../shared/site.css). Page accent gem: sapphire (the AIR logo colour), used sparingly. */

/* ============ SWAPPABLE IMAGES — change one line to replace a picture (sources in CREDITS.txt) ============
   Paths are written as ../air/assets/… so they resolve the same from this file or from ../shared/site.css (where they are used). */
:root{
  --img-hero:     url("../air/assets/hero.webp");       /* hero — cargo plane loading on a wet apron at dusk, 4:5 crop (WE-WIN, user-created) */
  --img-surround: url("../air/assets/surround.webp");   /* desktop side areas — the same render, full frame, heavily blurred + darkened */
  --img-contrail: url("../air/assets/contrail.webp");   /* 卡在一环 band — navy sky above clouds with a golden contrail (WE-WIN, user-created) */
  --img-routes:   url("../air/assets/routes.webp");     /* 两类服务 band — gold route arcs over a wet apron, plane and containers (WE-WIN, user-created) */
  --img-ore:      url("../air/assets/ore.webp");        /* 矿样 band — three labelled bags of ore samples and a black folder on dark slate (WE-WIN, user-created) */
  --img-hold:     url("../air/assets/hold.webp");       /* 五个环节 band — cargo hold with netted pallets, blue/gold lights (WE-WIN, user-created) */
  --img-apron:    url("../air/assets/apron.webp");      /* 询价 band — dark plane and ULD containers on a wet apron at night (WE-WIN, user-created) */
  --img-arrow:    url("../air/assets/arrow.webp");      /* closing band — golden light arrow rising over dark clouds (WE-WIN, user-created) */
  --gem:var(--sapphire);
}
.phero{--hero-ratio:4/5; --hero-pos:50% 0; --hero-card-at:.92;   /* card sits on the wet apron, under the nose gear */
  --hero-shade:linear-gradient(180deg,rgba(6,13,31,.45) 0,rgba(6,13,31,.05) 13%,rgba(6,13,31,0) 50%,rgba(6,13,31,.32) 72%,var(--bg) 100%)}
#pain   {--band:var(--img-contrail); --band-pos:85% 0; --band-h:700px; --band-pad:90px;
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,.2) 7%,rgba(6,13,31,.42) 12%,rgba(6,13,31,.4) 20%,rgba(6,13,31,.45) 44%,rgba(6,13,31,.68) 58%,rgba(6,13,31,.7) 80%,var(--bg) 100%)}
#lines  {--band:var(--img-routes); --band-size:auto 640px; --band-pos:40% 0; --band-h:780px; --band-pad:100px;   /* heading in the dark sky, arcs + plane in the gap, cards on the apron */
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,.05) 10%,rgba(6,13,31,.35) 14%,rgba(6,13,31,.35) 26%,rgba(6,13,31,0) 34%,rgba(6,13,31,0) 54%,rgba(6,13,31,.56) 60%,rgba(6,13,31,.64) 72%,rgba(6,13,31,.88) 82%,var(--bg) 100%)}
#lines .lines{margin-top:240px}
#mineral{--band:var(--img-ore); --band-size:auto 820px; --band-pos:40% 110px; --band-h:1000px; --band-pad:80px;   /* photo starts under the heading; bags in the gap, card on the dark slate */
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,.72) 7%,rgba(6,13,31,.78) 11%,rgba(6,13,31,.62) 16%,rgba(6,13,31,.12) 21%,rgba(6,13,31,0) 25%,rgba(6,13,31,0) 56%,rgba(6,13,31,.38) 61%,rgba(6,13,31,.52) 72%,rgba(6,13,31,.7) 86%,var(--bg) 100%)}
#mineral .check{margin-top:380px}
#flow   {--band:var(--img-hold); --band-pos:50% 0; --band-h:1000px; --band-pad:200px;
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,.05) 10%,rgba(6,13,31,.35) 19%,rgba(6,13,31,.5) 30%,rgba(6,13,31,.55) 60%,rgba(6,13,31,.62) 82%,var(--bg) 100%)}
#quote  {--band:var(--img-apron); --band-size:auto 600px; --band-pos:30% 0; --band-h:850px; --band-pad:90px;   /* heading in the dark sky, plane + ULDs in the gap, card on the apron */
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,.05) 10%,rgba(6,13,31,.3) 14%,rgba(6,13,31,.3) 26%,rgba(6,13,31,0) 32%,rgba(6,13,31,0) 46%,rgba(6,13,31,.45) 51%,rgba(6,13,31,.6) 64%,rgba(6,13,31,.85) 72%,var(--bg) 100%)}
#quote .check{margin-top:230px}
#closing{--band:var(--img-arrow); --band-size:auto 380px; --band-pos:100% 0; --band-h:560px; --band-pad:330px;   /* arrow tip in frame, text below over the dark clouds */
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,0) 14%,rgba(6,13,31,0) 44%,rgba(6,13,31,.5) 56%,rgba(6,13,31,.72) 66%,rgba(6,13,31,.85) 80%,var(--bg) 100%)}

/* light fields behind the glass (navy/sapphire/gold) */
#guide {--lf:radial-gradient(260px 180px at 10% 40%,rgba(74,127,240,.26),transparent 70%),radial-gradient(220px 170px at 92% 70%,rgba(226,196,106,.14),transparent 70%)}

/* sapphire mark next to the hero eyebrow text */
.eyebrow span{display:flex;align-items:center;gap:8px}
.eyebrow span::before{content:"";width:12px;height:2px;border-radius:1px;background:var(--gem)}

/* ---------- two service lines ---------- */
.lines{display:grid;gap:12px}
.line{padding:18px 18px 16px;--g-r:22px}
.line small{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.08em;color:#a9c3ff}
.line small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gem);box-shadow:0 0 8px rgba(74,127,240,.8)}
.line h3{font-family:var(--serif);font-size:18px;margin-top:4px}
.line p{color:var(--tx2);margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips li{font-size:12.5px;line-height:1;padding:7px 10px;border-radius:999px;color:var(--tx);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}

/* ---------- checklist cards (矿样核实 / 询价信息) ---------- */
.check{padding:16px 18px;--g-r:22px}
.check b{display:block;font-family:var(--serif);font-size:16.5px;font-weight:700}
.check ul{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:8px}
.check li{position:relative;padding:9px 0 9px 18px;border-bottom:1px solid var(--line);font-size:14px}
.check li::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;border:1.5px solid var(--gold-2)}
.check .wide{grid-column:1/-1}
.check .fine{font-size:13px;color:var(--tx2);margin-top:12px}

.guides{display:grid;gap:10px}