/* WE-WIN 关于我们 — page stylesheet (loads after ../shared/site.css). The SCM umbrella page: gold accent; the three business
   cards carry their own official icons; gems only as faint light. */

/* ============ SWAPPABLE IMAGES — change one line to replace a picture (sources in CREDITS.txt) ============
   Paths are written as ../about/assets/… so they resolve the same from this file or from ../shared/site.css (where some are used). */
:root{
  --img-hero:     url("../about/assets/hero.webp");         /* hero — Abuja skyline + National Mosque at sunset, 4:5 crop (WE-WIN, user-created) */
  --img-surround: url("../about/assets/surround.webp");     /* desktop side areas — the same render, full frame, heavily blurred + darkened */
  --img-owner:    url("../about/assets/owner.webp");        /* 起点 band — the owner, Abuja night skyline with the National Mosque behind (WE-WIN) */
  --img-flatlay:  url("../about/assets/flatlay.webp");      /* 理念 band — kraft boxes, WE-WIN AIR invoice template, pencil, ore-sample bag (WE-WIN design work) */
  --img-marks:    url("../about/assets/marks.webp");        /* 业务 band — the four gem marks on a dark reflective floor (WE-WIN design work) */
  --img-closing:  url("../about/assets/owner-marks.webp");  /* closing band — the owner beside the four gem-mark sculptures, Abuja night (WE-WIN) */
  --cw:min(100vw,var(--col));                                /* column width, for photo bands sized to the column */
}
.phero{--hero-ratio:4/5; --hero-pos:50% 0; --hero-card-at:.86;   /* mosque + minarets above the card; card over the trees */
  --hero-shade:linear-gradient(180deg,rgba(6,13,31,.55) 0,rgba(6,13,31,.2) 14%,rgba(6,13,31,.05) 30%,rgba(6,13,31,.1) 55%,rgba(6,13,31,.45) 76%,var(--bg) 100%)}
/* 起点: owner photo full width (9:16 → 1.777 × column), face clear above; heading, tiles and text over the dark suit */
#story{--ih:calc(var(--cw) * 1.777);
  --band:var(--img-owner); --band-size:100% auto; --band-pos:50% -40px; --band-h:calc(var(--ih) - 40px); --band-pad:calc(var(--cw) * 1.02);
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,0) 10%,rgba(6,13,31,0) 38%,rgba(6,13,31,.62) 52%,rgba(6,13,31,.8) 62%,rgba(6,13,31,.7) 82%,var(--bg) 100%)}
/* 理念: flat-lay at 160%, right-aligned — heading + glass cards over the empty dark slate, invoice + sample bag visible below them */
#values{--ih:calc(var(--cw) * 1.6 * 1.777);
  --band:var(--img-flatlay); --band-size:160% auto; --band-pos:100% 0; --band-h:var(--ih); --band-pad:40px; min-height:calc(var(--ih) * .95);
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.25) 0%,rgba(6,13,31,.1) 8%,rgba(6,13,31,.1) 42%,rgba(6,13,31,0) 47%,rgba(6,13,31,0) 90%,rgba(6,13,31,.6) 95%,var(--bg) 100%)}
/* 业务: the four marks show between heading and cards; cards over the reflective floor */
#lines{--ih:calc(var(--cw) * 1.565);
  --band:var(--img-marks); --band-size:100% auto; --band-pos:50% 0; --band-h:calc(var(--ih) + 120px); --band-pad:40px;
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.62) 0%,rgba(6,13,31,.6) 20%,rgba(6,13,31,0) 30%,rgba(6,13,31,0) 64%,rgba(6,13,31,.55) 76%,rgba(6,13,31,.72) calc(var(--ih)),var(--bg) 100%)}
#lines .lines{margin-top:calc(var(--cw) * 1.36 - 140px)}
/* 联系 (closing): owner + sculptures above, heading over the dark floor, contact card below */
#contact{--ih:calc(var(--cw) * 1.777);
  --band:var(--img-closing); --band-size:100% auto; --band-pos:50% 0; --band-h:calc(var(--ih) + 60px); --band-pad:calc(var(--ih) * .8);
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,0) 10%,rgba(6,13,31,0) calc(var(--ih) * .62),rgba(6,13,31,.55) calc(var(--ih) * .74),rgba(6,13,31,.82) calc(var(--ih) * .88),var(--bg) var(--ih))}

/* hero eyebrow: gold dash (umbrella page, no business icon) */
.eyebrow span{display:flex;align-items:center;gap:8px}
.eyebrow span::before{content:"";width:12px;height:2px;border-radius:1px;background:var(--gold-2)}
.phero h1{margin-top:12px}

/* stats: four glass tiles (same as the homepage) */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats div{display:flex;flex-direction:column;padding:14px 14px 13px;--g-r:18px}
.stats b{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.1}
.stats small{font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--gold-2);margin-left:3px}
.stats div>span{font-size:13.5px;font-weight:600;margin-top:6px}
.stats em{font-style:normal;font-size:12.5px;color:var(--tx2)}
#story .pull{margin-top:26px}
#story .after{margin-top:16px;color:var(--tx2)}

/* business cards: text-only glass (the marks band behind carries the imagery); the whole card links to the business page */
.lines>li{padding:0}
.line{display:block;padding:14px 16px 14px;--g-r:20px}
.line .txt{display:block}
.line small{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;letter-spacing:.12em;color:var(--gold-2)}
.line small img{height:20px;width:auto}
.line strong{display:block;font-family:var(--serif);font-size:17px;font-weight:700;margin-top:2px}
.line .txt>span:not(.more){display:block;font-size:13.5px;color:var(--tx2);margin-top:2px;line-height:1.65}
.line .more{display:inline-block;font-size:13px;color:var(--gold-2);margin-top:6px}

#contact{--lf:radial-gradient(260px 220px at 8% 82%,rgba(226,196,106,.14),transparent 70%),radial-gradient(280px 240px at 96% 94%,rgba(74,127,240,.24),transparent 70%)}

/* contact card: plain info rows (icon + label + value); links are text, never buttons — the bottom bar holds the buttons */
.contact{margin-top:22px;padding:18px 18px 16px;--g-r:22px}
.contact h3{font-family:var(--serif);font-size:17px;font-weight:700}
.info{margin-top:10px}
.info>div{display:grid;grid-template-columns:126px 1fr;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.09)}
.info>div:first-child{border-top:0}
.info dt{display:flex;white-space:nowrap;align-items:center;gap:8px;font-size:13px;color:var(--tx2)}
.info dt svg{flex:none;width:17px;height:17px;color:var(--gold-2)}
.info dd{font-size:14px;line-height:1.6;color:var(--tx);overflow-wrap:anywhere}
.info dd a{color:var(--tx);border-bottom:1px solid rgba(226,196,106,.45)}
.contact .note{margin-top:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;color:var(--tx2)}
@media (hover:hover){ .info dd a:hover{color:var(--gold-3)} }

/* plain text link inside the closing copy */
.tl{color:var(--gold-2);border-bottom:1px solid rgba(226,196,106,.45)}