/* Shenzhen SEO Foundation
   Hero, strip, CTA band and footer keep the approved mockup's geometry at a 1440
   design frame with a 1210 container. The mid-page sections were rebuilt on a
   proper vertical rhythm: the mockup packed them so tightly that headings ran
   into the band below and the copy rails crowded the cards. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lato:wght@400;700;900&family=Caveat:wght@500;600&display=swap');

:root{
  --brand:#0b3f74;
  --brand-deep:#08315a;
  --ink:#0f1c31;
  --body:#454b5c;
  --muted:#6b7285;
  --gold:#e6b96f;
  --gold-2:#d9a855;
  --navy:#052648;
  --navy-deep:#041d35;
  --tint:#f2f7fb;
  --tint-2:#f4f8fb;
  --line:#e4eaf1;
  --line-2:#dbe4ee;
  --cw:1210px;
  --gut:64px;              /* column gutter */
  --pad:72px;              /* section padding, top and bottom */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:Lato,'Helvetica Neue',Arial,sans-serif;
  --script:Caveat,'Segoe Script',cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;print-color-adjust:exact;-webkit-print-color-adjust:exact;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--body);background:#fff;
     font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
figure,blockquote,dl,dd,form{margin:0}
h1,h2,h3{margin:0;font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-.006em}
.nb{white-space:nowrap}
.wrap{width:min(100% - 64px,var(--cw));margin-inline:auto}

/* ---------- atoms ---------- */
.eyebrow{font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:9px;font:700 13px/1 var(--sans);
     border-radius:4px;padding:0 20px;height:40px;white-space:nowrap;transition:.18s}
.btn--gold{background:var(--gold);color:#12233b}
.btn--gold:hover{background:var(--gold-2)}
.btn--ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8)}
.btn--line{border:1px solid var(--line-2);color:var(--brand-deep);background:#fff}
.btn--line:hover{border-color:var(--brand);background:var(--tint)}
.tlink{display:inline-flex;align-items:center;gap:9px;font:700 13px/1 var(--sans);color:var(--brand)}
.tlink svg{transition:transform .18s}
.tlink:hover{color:var(--brand-deep)}
.tlink:hover svg{transform:translateX(3px)}

/* section header: eyebrow, heading, lede. One pattern everywhere. */
.shead{max-width:640px}
.shead h2{margin-top:16px;font:600 32px/1.22 var(--serif)}
.shead p{margin-top:16px;font-size:15.5px;line-height:1.66;color:#4f5768}
.shead .tlink{margin-top:22px}
.sect{padding:var(--pad) 0}
.sect--tint{background:var(--tint-2)}
.sect--tint2{background:var(--tint)}

/* ---------- masthead ---------- */
.mast{position:absolute;inset:0 0 auto;z-index:5;height:74px;
      background:linear-gradient(180deg,rgba(6,32,62,.45),rgba(6,32,62,0))}
.mast .wrap{display:flex;align-items:center;height:74px}
.brand{display:flex;align-items:center;color:#fff}
.brand img{height:38px;width:auto}
.mast nav{display:flex;gap:30px;margin-left:74px}
.mast nav a{font:400 13.5px/1 var(--sans);color:rgba(255,255,255,.92);padding:6px 0;
            border-bottom:1.5px solid transparent;transition:.16s}
.mast nav a:hover{color:#fff;border-bottom-color:var(--gold)}
.mast .tools{margin-left:auto;display:flex;align-items:center;gap:22px}
.mast .search{color:#fff;opacity:.95;display:grid;place-items:center}
.mast .search:hover{opacity:1}
.mast .btn{height:38px;padding:0 18px;font-size:12.5px}

/* ---------- hero ---------- */
.hero{position:relative;height:490px;overflow:hidden;background:#0d3159}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,30,58,.92) 0%,rgba(7,35,68,.76) 32%,rgba(9,42,78,.34) 55%,rgba(9,42,78,.10) 74%,rgba(9,42,78,.18) 100%)}
.hero .wrap{position:relative;z-index:2;height:100%}
.hero__copy{position:absolute;top:142px;left:0;width:672px}
.hero .eyebrow{color:#e0c48f;letter-spacing:.2em;font-size:11px}
.hero h1{margin-top:20px;font:500 50px/1.16 var(--serif);color:#fff;letter-spacing:-.014em;
         text-shadow:0 1px 24px rgba(4,20,40,.3)}
.hero__lede{margin-top:20px;width:540px;font:400 16px/1.58 var(--sans);color:rgba(255,255,255,.93)}
.hero__cta{margin-top:30px;display:flex;gap:18px}
.hero__script{position:absolute;z-index:2;right:190px;top:118px;width:230px;text-align:center;
  font:600 25px/1.12 var(--script);color:#fff;transform:rotate(-8deg);opacity:.97}
.hero__script span{display:block;border-bottom:1.4px solid rgba(255,255,255,.62);padding-bottom:4px;
  width:150px;margin:5px 0 0 auto}
.hero__rail{position:absolute;z-index:2;right:-46px;top:104px;padding-left:22px;
  border-left:1px solid rgba(255,255,255,.42);
  font:400 11px/2.15 var(--sans);letter-spacing:.18em;color:rgba(255,255,255,.86);text-transform:uppercase}
.hero__place{position:absolute;z-index:2;right:-62px;bottom:34px;text-align:right;
  font:400 10.5px/1.78 var(--sans);letter-spacing:.19em;color:rgba(255,255,255,.9);text-transform:uppercase;
  text-shadow:0 1px 10px rgba(4,20,40,.65)}
.hero__place b{font-weight:700;color:#fff}

/* ---------- principles strip ---------- */
.strip{background:var(--tint);border-bottom:1px solid #e2ebf3}
.strip .wrap{display:flex;align-items:center;gap:44px;padding:26px 0}
.strip__row{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.prin{display:flex;align-items:flex-start;gap:15px}
.prin svg{color:var(--brand-deep);flex:none;margin-top:2px}
.prin b{display:block;font:700 14px/1.25 var(--sans);color:#12233f}
.prin span{display:block;margin-top:6px;font:400 12.5px/1.45 var(--sans);color:#5b6376}
.strip__tag{flex:none;width:196px;padding-left:36px;border-left:1px solid #ccd8e4;
  font:400 11px/1.95 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:#5d6a7c}

/* ---------- purpose ---------- */
.purpose .wrap{display:grid;grid-template-columns:1fr 1.32fr;gap:var(--gut);align-items:center}
.purpose__figs{display:grid;gap:22px}
.mfig{position:relative;border-radius:8px;overflow:hidden;height:312px;background:#111}
.mfig img{width:100%;height:100%;object-fit:cover}
.mfig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,16,30,.86) 0%,rgba(6,16,30,.5) 42%,rgba(6,16,30,.04) 72%)}
.mfig__cap{position:absolute;z-index:2;left:34px;bottom:32px;color:#fff}
.mfig__cap p{font:400 23px/1.34 var(--serif);color:#fff}
.mfig__cap i{display:block;width:48px;height:2.5px;background:var(--gold);margin-top:18px}
.quote{border-left:2px solid var(--gold);padding:4px 0 4px 26px}
.quote p{font:italic 400 18px/1.52 var(--serif);color:#1d2c45}
.quote small{display:block;margin-top:18px;font:700 10.5px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:#66707f}

/* ---------- cards, shared ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mt{margin-top:48px}

/* what we do */
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,42,74,.04),0 10px 26px rgba(16,42,74,.05);
  display:flex;flex-direction:column;transition:.2s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,42,74,.06),0 18px 38px rgba(16,42,74,.09)}
.pcard img{width:100%;height:158px;object-fit:cover}
.pcard__in{padding:0 28px 28px;display:flex;flex-direction:column;flex:1}
.pcard__ico{position:relative;width:54px;height:54px;border-radius:9px;background:var(--brand-deep);
  display:grid;place-items:center;color:#fff;margin:-27px 0 18px;
  box-shadow:0 6px 18px rgba(6,32,62,.28)}
.pcard__ico svg{width:26px;height:26px}
.pcard h3{font:600 18px/1.3 var(--serif);color:#12233f}
.pcard p{margin-top:12px;font-size:13.6px;line-height:1.62;color:#5b6376;flex:1}
.pcard .tlink{margin-top:20px;font-size:12.5px}

/* events */
.ecard{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;transition:.2s}
.ecard:hover{border-color:#cfdbe8;box-shadow:0 12px 30px rgba(16,42,74,.07)}
.ecard img{width:100%;height:150px;object-fit:cover}
.ecard__in{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.ekick{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--tint);border-radius:3px;padding:6px 10px;
  font:700 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#4e6a8c}
.ekick svg{color:var(--gold-2)}
.ecard h3{margin-top:16px;font:600 18px/1.28 var(--serif);color:#12233f}
.ecard__meta{margin-top:11px;display:flex;align-items:center;gap:7px;font-size:12.5px;color:#5b6376}
.ecard__meta svg{color:var(--gold-2);flex:none}
.ecard p{margin-top:11px;font-size:13.4px;line-height:1.6;color:#5b6376;flex:1}
.ecard .tlink{margin-top:18px;font-size:12.5px}

/* story */
.story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:center}
.story__panel{background:#fff;border:1px solid var(--line);border-radius:8px;padding:34px 38px 36px}
.story__panel+.story__panel{margin-top:24px}
.lab{font:700 10.5px/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:#5d6a7c}
.partners{margin-top:26px;display:flex;gap:44px;flex-wrap:wrap}
.partner{display:flex;align-items:center;gap:15px}
.partner b{font:700 13.5px/1.35 var(--sans);color:#12233f;display:block}
.audience{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.audience span{display:inline-block;border:1px solid var(--line-2);border-radius:99px;
  padding:7px 15px;font-size:12.5px;color:#4c5566;background:var(--tint-2)}

/* approach */
.acard{border:1px solid var(--line);border-radius:8px;padding:26px 24px 28px;background:#fff;transition:.2s}
.acard:hover{border-color:#cfdbe8;box-shadow:0 12px 28px rgba(16,42,74,.06)}
.acard svg{color:var(--brand-deep)}
.acard h3{margin-top:20px;font:600 16.5px/1.3 var(--serif);color:#12233f}
.acard p{margin-top:11px;font-size:13.2px;line-height:1.6;color:#5b6376}

/* awards */
.wcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 28px 30px;transition:.2s}
.wcard:hover{border-color:#cfdbe8;box-shadow:0 12px 30px rgba(16,42,74,.07)}
.wcard__ico{width:48px;height:48px;border-radius:50%;background:var(--tint);
  display:grid;place-items:center;color:var(--brand-deep)}
.wcard h3{margin-top:20px;font:600 16.5px/1.3 var(--serif);color:#12233f}
.wcard p{margin-top:11px;font-size:13.4px;line-height:1.62;color:#5b6376}
.awards__note{margin-top:44px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding-top:32px;border-top:1px solid var(--line-2)}
.awards__note p{font:italic 400 16px/1.5 var(--serif);color:#1d2c45;flex:1;min-width:320px}

/* ---------- 2025 award ribbon, straight under the hero ---------- */
.ribbon{background:var(--navy);color:#fff}
.ribbon .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:15px 0}
.ribbon__tag{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:#12233b;background:var(--gold);border-radius:3px;padding:7px 11px;white-space:nowrap}
.ribbon p{flex:1;min-width:260px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.92)}
.ribbon a{display:inline-flex;align-items:center;gap:9px;font:700 12.5px/1 var(--sans);
  color:var(--gold);white-space:nowrap;border-bottom:1px solid rgba(230,185,111,.5);padding-bottom:6px}
.ribbon a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- founder panel ---------- */
.founder__row{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:start;margin-top:16px}
.founder__row img{width:150px;height:186px;object-fit:cover;object-position:58% 26%;border-radius:6px}
.founder__who b{font:600 19px/1.2 var(--serif);color:#12233f;display:block}
.founder__who span{display:block;margin-top:7px;font:700 11.5px/1.55 var(--sans);
  letter-spacing:.11em;text-transform:uppercase;color:var(--brand)}
.founder__who p{margin-top:12px;font-size:13.4px;line-height:1.62;color:#5b6376}
.founder__who .tlink{margin-top:14px}

/* ---------- 2025 recognition ---------- */
.rec{background:#fff;border-top:1px solid var(--line)}
.rec__wrap{display:grid;grid-template-columns:390px 1fr;gap:var(--gut);align-items:start}
.rec__fig{position:relative}
.rec__fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;
  border-radius:8px;box-shadow:0 18px 44px rgba(10,34,62,.16)}
.rec__fig figcaption{margin-top:12px;font:700 11px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.rec__body h2{margin-top:16px;font:600 32px/1.22 var(--serif)}
.rec__lede{margin-top:16px;max-width:620px;font-size:15.5px;line-height:1.66;color:#4f5768}
.rec__stats{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:24px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.rec__stats dt{font:600 34px/1 var(--serif);color:var(--brand-deep)}
.rec__stats dt small{font-size:16px;color:var(--muted)}
.rec__stats dd{margin:9px 0 0;font-size:12.6px;line-height:1.5;color:#5b6376}
.rec__reco{margin-top:26px;max-width:620px;font:600 19.5px/1.44 var(--serif);color:#12233f}
.rec .claim{margin-top:14px;max-width:620px;font-size:14.6px;line-height:1.66;color:#3c4457}
.rec .claim b{color:#12233f}
.rec .claim .src{display:block;margin-top:12px;font-size:12px;line-height:1.58;color:var(--muted)}
.rec .claim .src a{color:var(--brand);border-bottom:1px solid var(--line-2)}
.rec__links{margin-top:26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* ---------- cta ---------- */
.cta{position:relative;overflow:hidden;background:var(--navy);padding:56px 0}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#04223f 0%,#052648 40%,rgba(5,38,72,.76) 62%,rgba(5,38,72,.4) 100%)}
.cta .wrap{position:relative;z-index:2;display:flex;align-items:center;gap:56px}
.cta__copy{width:470px}
.cta .eyebrow{color:#dcc59a;letter-spacing:.18em}
.cta h2{margin-top:16px;font:500 32px/1.24 var(--serif);color:#fff}
.cta p{margin-top:14px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.88)}
.cta__acts{display:flex;align-items:center;gap:30px}
.cta__acts .btn--gold{height:44px;padding:0 24px;font-size:13.5px}
.cta__link{font:700 13.5px/1 var(--sans);color:#fff;display:inline-flex;align-items:center;gap:10px;
  border-bottom:1.5px solid rgba(255,255,255,.85);padding-bottom:8px}
.cta__link:hover{border-bottom-color:var(--gold);color:var(--gold)}
.cta p.cta__script{position:absolute;z-index:2;right:0;top:-6px;text-align:center;
  font:600 25px/1.16 var(--script);color:#fff;transform:rotate(-6deg);margin:0}
.cta p.cta__script span{display:block;border-bottom:1.4px solid rgba(255,255,255,.62);padding-bottom:3px}

/* ---------- footer ---------- */
.foot{background:var(--navy-deep);color:#c6d2df}
.foot__top{display:grid;grid-template-columns:320px 1fr 150px 306px;gap:36px;align-items:start;padding:44px 0 38px}
.foot .brand img{height:34px}
.foot__tag{margin-top:14px;font-size:12.5px;line-height:1.6;color:#93a3b5;max-width:290px}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:6px}
.foot nav a{font-size:12.5px;color:#c6d2df;white-space:nowrap}
.foot nav a:hover{color:#fff}
.foot__social{display:flex;gap:16px;color:#c6d2df;padding-top:4px}
.foot__social a:hover{color:#fff}
.foot__news p{font-size:12.5px;color:#c6d2df}
.foot__form{margin-top:12px;display:flex;gap:9px}
.foot__form input{flex:1;min-width:0;height:36px;border:1px solid #24405f;background:#04223d;border-radius:4px;
  padding:0 12px;color:#dbe6f2;font:400 12.5px var(--sans)}
.foot__form input::placeholder{color:#7e91a6}
.foot__form button{height:36px;padding:0 16px;border:0;border-radius:4px;background:var(--gold);
  color:#12233b;font:700 12.5px var(--sans);cursor:pointer}
.foot__form button:hover{background:var(--gold-2)}
.foot__note{margin-top:10px;font-size:11.5px;color:#7e91a6}
.foot__bot{border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;flex-wrap:wrap;
  gap:10px 28px;padding:18px 0 22px;font-size:11.8px;color:#93a3b5}
.foot__bot nav{padding-top:0;margin-left:auto;gap:24px}
.foot__bot .tail{letter-spacing:.02em}

/* ---------- responsive ---------- */
@media (max-width:1330px){
  :root{--pad:64px;--gut:48px}
  .wrap{width:calc(100% - 48px)}
  .hero__rail,.hero__place{display:none}
  .hero__script{right:40px}
  .strip .wrap{flex-wrap:wrap;gap:24px}
  .strip__row{flex:1 1 100%;gap:26px}
  .strip__tag{width:auto;border-left:0;padding-left:0;margin-left:auto}
  .foot__top{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:1140px){
  .mast nav{display:none}
  .strip__row{grid-template-columns:repeat(2,1fr);gap:24px 30px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .purpose .wrap{grid-template-columns:1fr;gap:38px}
  .rec__wrap{grid-template-columns:300px 1fr;gap:40px}
  .story .wrap{grid-template-columns:1fr;gap:26px}
  .mfig{height:280px}
}
@media (max-width:860px){
  :root{--pad:52px}
  .wrap{width:calc(100% - 40px)}
  .hero{height:auto;padding:120px 0 52px}
  .hero__copy{position:static;width:auto;max-width:100%}
  .hero__lede{width:auto;max-width:560px}
  .hero__script{display:none}
  .hero h1{font-size:clamp(30px,7.6vw,50px)}
  .mast .search{display:none}
  .shead h2{font-size:27px}
  .grid-3{grid-template-columns:1fr;gap:22px}
  .rec__wrap{grid-template-columns:1fr;gap:30px}
  .rec__fig img{max-width:360px}
  .rec__body h2{font-size:27px}
  .rec__stats{grid-template-columns:1fr;gap:18px}
  .founder__row{grid-template-columns:120px 1fr;gap:18px}
  .founder__row img{width:120px;height:150px}
  .cta{padding:44px 0}
  .cta .wrap{flex-direction:column;align-items:flex-start;gap:28px}
  .cta__copy{width:auto;max-width:520px}
  .cta h2{font-size:27px}
  .cta p.cta__script{display:none}
  .foot__top{grid-template-columns:1fr;gap:26px;padding:36px 0 30px}
  .foot__bot nav{margin-left:0}
}
@media (max-width:560px){
  .strip__row{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .hero__cta{flex-wrap:wrap;gap:14px}
  .mfig{height:230px}
  .mfig__cap{left:22px;bottom:22px}
  .mfig__cap p{font-size:19px}
  .story__panel{padding:26px 24px 28px}
  .partners{gap:22px}
}