/*
Theme Name: Sky9capital
Theme URI: https:/www.sky9capital.com
Author: Sky9capital
Author URI: https:/www.sky9capital.com
Version: 3.0
*/


/* ✅永远稳定滚动条槽位：logo & 右上角按钮不再横跳 */
html{
  overflow-y: scroll;       /* 旧浏览器：强制预留滚动条槽位 */
  scrollbar-gutter: stable; /* 新浏览器：稳定 gutter */
}

/* 防止 100vw/背景等造成横向溢出引发抖动 */
body{
  overflow-x: clip; /* 比 hidden 更稳 */
}


/* ✅B 模式已播过：渲染前直接不显示 splash，杜绝“闪一下云” */
html.intro-skip #intro-splash{
  display: none !important;
}
html.intro-skip #intro-splash.intro{
  opacity: 0 !important;
  visibility: hidden !important;
}



:root{
  --black:#000000; --dark-grey:#29272F; --white:#ffffff; --grey:rgba(41,39,47,0.7);
  --side-pad:20px;      /* 移动端左右留白；桌面端脚本设为 100px */
  --bottom-gap:0px;     /* 标题贴底 */
  --sy:1.10;            /* 文案竖向拉高比例 */
    
 /* 1920px 时的目标字号 */
  --h1-1920: 6rem;
  --h2-1920: 3.6rem;
  --h3-1920: 2.0rem;
  --h4-1920: 1.8rem;
   --p-1920:  1.3rem;

  /* 移动端最小值 */
  --h1-min: 2.2rem;   
  --h2-min: 1.6rem;
  --h3-min: 1.3rem;
  --h4-min: 1.1rem;
   --p-min:  1rem;

  /* 线性插值的区间端点（移动端/桌面基线） */
  --vw-min: 360px;   /* 最小设计宽， */
  --vw-max: 1920px;  /* 桌面基线 */
    
    
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, ul, li, ol, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0 none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  text-decoration:none;
}
* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
}


body {
    font-family: "Poppins", "Roboto", "Helvetica Neue","Helvetica","Arial",sans-serif;
    color: var(--grey);;
    overflow-x: hidden;
    position: relative;
    background-color: #f7f7f7;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    
}
::selection {
    color: var(--white);
    background-color: var(--dark-grey);;
}
::-webkit-selection {
    color: var(--white);
    background-color: var(--dark-grey);;
}
a, input, textarea, button {
    outline: none !important;
}
a {
    color: var(--dark-grey);
}
a:focus, a:hover {
    text-decoration: none;
    outline: none;
    cursor: pointer;
}
a, a:visited, a:focus {
    -webkit-transition: all 0.2s ease-out 0s;
       -moz-transition: all 0.2s ease-out 0s;
            transition: all 0.2s ease-out 0s;
}
p {
   font-size: clamp(
    var(--p-min),
    calc(
      var(--p-min) + (var(--p-1920) - var(--p-min))
      * ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    calc(var(--p-1920) * (100vw / var(--vw-max)))
  );
    white-space: normal;      
    overflow-wrap: anywhere;     
    word-break: break-word; 
}

h1{
  font-size: clamp(
    var(--h1-min),
    calc(
      var(--h1-min) + (var(--h1-1920) - var(--h1-min))
      * ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    calc(var(--h1-1920) * (100vw / var(--vw-max)))
  );
}
h2{
  font-size: clamp(
    var(--h2-min),
    calc(
      var(--h2-min) + (var(--h2-1920) - var(--h2-min))
      * ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    calc(var(--h2-1920) * (100vw / var(--vw-max)))
  );
}

h3{
  font-size: clamp(
    var(--h3-min),
    calc(
      var(--h3-min) + (var(--h3-1920) - var(--h3-min))
      * ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    calc(var(--h3-1920) * (100vw / var(--vw-max)))
  );
}
h4{
  font-size: clamp(1.3rem, 1.5vw, 2.4rem);
}
h1,h2,h3,h4 {
  color: var(--dark-grey);
  font-weight: 400;
  line-height: 1.2;
}
ul {
    list-style: none;
}
li {
  font-size: clamp(
    var(--p-min),
    calc(
      var(--p-min) + (var(--p-1920) - var(--p-min))
      * ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    calc(var(--p-1920) * (100vw / var(--vw-max)))
  );
}
.btn {
  display: flex;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 15px 30px;
  border-radius: 6px;
  cursor: pointer;
}
.btn-grey {
    color: var(--white);;
    background-color: var(--dark-grey);
}
.btn-white {
    color: var(--dark-grey);
    background-color: var(--white);
}
.links {
  display: flex;
  justify-content: center;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}


@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
    opacity: 0;
    -webkit-animation: fadeInleft 1.4s forwards;
            animation: fadeInleft 1.4s forwards;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  -webkit-animation: fadeInUp 1.4s forwards;
          animation: fadeInUp 1.4s forwards;
}

.wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

/* ===== 2) 页面左右内边距：移动端32px；桌面端100~250px，流式过渡 ===== */
.container {
  /* 先在小屏下从 32px 以 5vw 流式到最多 100px */
  padding-inline: 32px;
}

/* >=1024px 进入桌面：从 100px 线性涨到 250px（在 1920px 达到 250px）*/
@media (min-width: 1024px) {
  .container {
    padding-inline: clamp(
      100px,
      calc(100px + ((100vw - 1024px) * 50 / 896)),
      250px
    );
  }
}
.main {
  min-height: 500px;
  padding-top: 86px;
}



/* Header ######################################################## */

:root{
  --dur: 260ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --icon: #111;
  --icon-open: #fff;

  /* header 出入更慢一点 */
  --header-dur: 320ms;
  --header-ease: cubic-bezier(.2,.8,.2,1);

  /* 方案B：scrollbar width compensation */
  --sbw: 0px !important;
}

/* =========================
   Global
   ========================= */

/* 打开菜单时禁止滚动 */
body.menu-open{
  overflow: hidden;
}

/* ✅ FIX: 菜单打开时补偿滚动条宽度，避免 header/logo/四宫格横跳 */
body.menu-open{
  padding-right: var(--sbw, 0px);
}

/* 可选：如果你在 JS 里加了 html.menu-lock，这里也兼容（不影响现有逻辑） */
html.menu-lock{
  overflow: hidden;
}



/* =========================
   Header: fixed + scroll (simple)
   ========================= */
.site-header{
  position: fixed;
  left: 0;
  right: 0;      /* ✅ FIX: 恢复 right:0，避免绝对定位计算误差 */
  width: 100%;   /* ✅ FIX: 用 100% 替代 100vw，避免 scrollbar gutter 导致横跳 */
  top: 0;
  z-index: 1000;

  background: transparent;

  transform: translateY(0);
  opacity: 1;

  transition:
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    -webkit-backdrop-filter var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease),
    transform var(--header-dur) var(--header-ease),
    opacity var(--header-dur) var(--header-ease);

  will-change: transform, opacity;
}

/* 向下滚动后：0.8 白底 + 磨砂模糊 */
.site-header.is-scrolled{
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  /*box-shadow: 0 6px 18px rgba(0,0,0,.06);*/
}

/* 向下滚动隐藏 */
.site-header.is-hidden{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

/* 向上滚动出现 */
.site-header.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 菜单打开时：header 强制显示；背景保持透明（更协调视频背景） */
body.menu-open .site-header{
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto;
  box-shadow: none;

  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* =========================
   Header inner layout
   Logo centered, toggle right
   ========================= */
.site-header__inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* logo 真居中 */
  padding: 26px 0;
}

/* Toggle 固定在右侧，不影响 logo 居中 */
.menu-toggle{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px; /* 点击热区 */
  cursor: pointer;
  line-height: 0;
}

/* =========================
   Logo (no resize jump): two layers, opacity switch
   Header.php 需包含：
   <span class="site-logo__mark site-logo__mark--black"></span>
   <span class="site-logo__mark site-logo__mark--white"></span>
   ========================= */
.site-logo{
  position: relative;
  display: block;
  height: clamp(35px, 4vw, 50px);
  width: 140px; /* 视你的logo比例调整 */
}

/* 两层叠放，同一渲染盒子，避免切换时重新计算尺寸 */
.site-logo__mark{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  will-change: opacity;

  /* 移动端更稳，避免子像素抖动 */
  transform: translateZ(0);
}

.site-logo__mark--black{
  background-image: url("https://cdn.sky9capital.com/images/logo-black.svg");
  opacity: 1;
}

.site-logo__mark--white{
  background-image: url("https://cdn.sky9capital.com/images/logo-white.svg");
  opacity: 0;
}

/* 菜单打开：黑->白，仅切 opacity */
body.menu-open .site-logo__mark--black{
  opacity: 0;
}
body.menu-open .site-logo__mark--white{
  opacity: 1;
}

/* 无障碍隐藏文案 */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   4-squares icon
   ========================= */
/* 更接近设计稿：容器 20，方块 8，步进 12 */
.crumb-icon{
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.crumb-icon .sq{
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--icon);
  border-radius: 1.5px;
  transition:
    transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
  will-change: transform;
}

/* 2x2 grid */
.crumb-icon .sq-1{ left: 0;    top: 0; }
.crumb-icon .sq-2{ left: 12px; top: 0; }
.crumb-icon .sq-3{ left: 0;    top: 12px; }
.crumb-icon .sq-4{ left: 12px; top: 12px; }

/* open: 变菱形 + 微弱内收，形成“X/叉”观感 */
body.menu-open .crumb-icon .sq{
  background: var(--icon-open);
}

body.menu-open .crumb-icon .sq-1{ transform: translate(0.5px, 0.5px) rotate(45deg); }
body.menu-open .crumb-icon .sq-2{ transform: translate(-0.5px, 0.5px) rotate(45deg); }
body.menu-open .crumb-icon .sq-3{ transform: translate(0.5px, -0.5px) rotate(45deg); }
body.menu-open .crumb-icon .sq-4{ transform: translate(-0.5px, -0.5px) rotate(45deg); }

/* =========================
   Fullscreen menu overlay
   ========================= */

html.menu-open {
  overflow: hidden;
}
.menu-overlay{
  width: 100vw;
  position: fixed;
  inset: 0;
  z-index: 999; /* header 在上 */
  display: grid;
  place-items: center;
  background-color: var(--dark-grey);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.01);

  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

body.menu-open .menu-overlay{
  opacity: 1;
  visibility: visible;
  transform: scale(1);

  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear 0s;
}

/* video background */
.menu-overlay__media{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.menu-overlay__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.08);
}

.menu-overlay__scrim{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
}

/* nav */
.menu-overlay__nav{
  position: relative;
  z-index: 1;
  text-align: center;
}

.menu-overlay__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

.menu-overlay__list a{
  color: #fff;
  text-decoration: none;
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 300;
  letter-spacing: 0.2px;
  transition: opacity 160ms var(--ease);
}

.menu-overlay__list a:hover{
  opacity: .78;
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  .crumb-icon .sq,
  .menu-overlay,
  .site-header,
  .site-logo__mark{
    transition: none !important;
  }
  .menu-overlay__video{
    filter: none;
    transform: none;
  }
}

/* =========================
   ✅ PART 1 END
   下一段从：Page / Home / About / News ... 开始
   ========================= */

/* Page ######################################################## */

.hero-section {
  padding: clamp(60px, 15vw, 200px) 0 clamp(30px, 3vw, 60px);
}
.hero-section .info {
  padding-top: clamp(20px, 5vw, 50px);
}
@media (min-width: 768px) {
  .hero-section h1 span {
    display: block;
  }
  
}

/* Home ######################################################## */

.home .main {
  padding-top: 0;
}


.hero{
  display: grid;
  place-items: center;
  background: url('https://cdn.sky9capital.com/images/hero-bg.svg') center center / cover no-repeat,
        /* 底层：渐变背景 */
        linear-gradient(to bottom, #f7f7f7, #e4e8ed, #f7f7f7);

  /* Mobile default */
  min-height: clamp(520px, 95vw, 680px);
  padding: clamp(150px, 30vw, 350px) 0 clamp(50px, 25vw, 300px);
}

.hero__inner{
  text-align: center;
}

.hero__sub{
  color: var(--grey);
  padding-top: clamp(20px, 6vw, 40px);
}

.hero__cta{
  display: none;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: clamp(20px, 6vw, 40px);
  padding-bottom: clamp(30px, 6vw, 60px);
}

.hero__offices{
  padding-top: clamp(20px, 6vw, 40px);
}
.hero__offices-label{ 
  color: var(--grey);
  margin-bottom: 10px; 
}
.hero__offices-pills{
  color: var(--dark-grey);
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.pill{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  backdrop-filter: blur(6px);
}

.home-coreband{
  padding: clamp(60px, 6vw, 120px) 0;
}


.split{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 150px);
  align-items: start;
}

.split--spaced{
  margin-top: clamp(80px, 8vw, 150px);
}

/* list */
.card-list{
  display: grid;
  gap: 18px;
}

/* card: no white background behind text */
.card{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  align-items: start;
}

/* subtle separators between items */
.card + .card{
  padding-top: 18px;
}

/* only icon block is white */
.card__icon{
  display: grid;
  width: clamp(44px, 8vw, 64px);
  height: clamp(44px, 8vw, 64px);
  place-items: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Where We Invest */
.icon-early{ background-image: url("images/icons/icon-num-01.svg"); }
.icon-expansion{ background-image: url("images/icons/icon-num-02.svg"); }
.icon-digital{ background-image: url("images/icons/icon-num-03.svg"); }

/* How We Think（如果也要 01/02/03） */
.icon-depth{ background-image: url("images/icons/icon-num-01.svg"); }
.icon-partnership{ background-image: url("images/icon-icons/icon-num-02.svg"); }
.icon-global{ background-image: url("images/icons/icon-num-03.svg"); }


.num{
  display:flex;
  color: var(--dark-grey);
  align-items:flex-start;
  padding-top: 2px;                     /* 左侧占位宽度（跟你的 grid 第一列一致） */
  line-height: 1;
  font-size: clamp(28px, 3.2vw, 44px);
}

/* 左边 0 固定在最左 */
.num__left{
  flex: 0 0 auto;
}

/* 中间数字固定宽度槽：关键！ */
.num__mid{
  flex: 0 0 1ch;                    /* 固定中间槽宽度 */
  text-align: center;               /* 想中间对齐就 center；想整齐“同一竖线”用 right */
}




.card__text h3{
  margin-bottom: clamp(12px, 3vw, 24px);
}
.card__text p span {
  font-weight: bolder;
}






/* =========================
   Companies We've Backed (Global Module)
   - mobile: 2 columns
   - >=1200: 4 columns
========================= */

.backed-companies{
  position: relative;
  padding: clamp(60px, 6vw, 120px) 0;
  overflow: hidden;
  z-index: 1;
}

/* Header */
.backed-companies__header{
  text-align: center;
}

.backed-companies__title{
  margin-bottom: clamp(12px, 3vw, 24px);
}

.backed-companies__sub{
  margin: 0 auto;
  max-width: 1020px;
}

/* Grid: 2列 -> 4列（不再有 5列） */
.backed-companies__grid{
  width: 100%;
  margin: clamp(30px, 5vw, 60px) 0;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  /* ✅ 画线方式：容器左/上 + cell 右/下 */
  border-left: 1px solid var(--backed-line);
  border-top: 1px solid var(--backed-line);
}

@media (min-width: 1200px){
  .backed-companies__grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Cell */
.backed-companies__cell{
  min-height: 120px;
  display: grid;
  place-items: center;
  text-decoration: none;

  border-right: 1px solid var(--backed-line);
  border-bottom: 1px solid var(--backed-line);
}

/* Logo */
.backed-companies__logo{
  object-fit: contain;
  opacity: 0.9;
  scale: 1.2;
  transition: opacity .15s ease, transform .15s ease;
}

.backed-companies__cell:hover .backed-companies__logo{
  opacity: 1;
}

/* CTA */
.backed-companies__cta{
  display: flex;
  justify-content: center;
  margin-top: 26px;
}


/* =========================
   Skin: Dark (Home)
========================= */
.backed-companies--dark{
  background-color: var(--dark-grey);
  --backed-line: rgba(255,255,255,0.10);
  color: var(--white);
}
.backed-companies--dark::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('https://cdn.sky9capital.com/wp-content/uploads/2026/01/sky9capital-989547.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  z-index: -1;
}

.backed-companies--dark .backed-companies__title{
  color: var(--white);
}

.backed-companies--dark .backed-companies__sub{
  color: rgba(255,255,255,.8);
}


/* =========================
   Skin: Light (Portfolio)
========================= */
.backed-companies--light{
  background-color: var(--light);
  --backed-line: rgba(0,0,0,0.10);
  color: var(--dark-grey);
}

.backed-companies--light::before{
  content: none;
}

.backed-companies--light .backed-companies__title{
  color: var(--dark-grey);
}

.backed-companies--light .backed-companies__sub{
  color: rgba(0,0,0,.65);
}
.backed-companies--light .backed-companies__grid {
  margin-bottom: 0;
}





/* =========================
   Testimonials (Swiper)
========================= */
.home-testimonials{
  padding: clamp(60px, 6vw, 120px) 0;
}

.home-testimonials .swiper{
  width: 100%;
}

/* 追加到你的 CSS：fade 模式下避免内容叠在一起 */
.js-testimonials.swiper-fade .swiper-slide{
  pointer-events: none;    /* 非激活 slide 不响应点击（避免叠层影响） */
}
.js-testimonials.swiper-fade .swiper-slide-active{
  pointer-events: auto;
}

/* 可选：让非激活 slide 完全不可见（双保险） */
.js-testimonials.swiper-fade .swiper-slide{
  opacity: 0 !important;
}
.js-testimonials.swiper-fade .swiper-slide-active{
  opacity: 1 !important;
}



/* 卡片布局：手机默认上下；>=768 左右 */
.tcard{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.tcard__media{
  border-radius: 12px;
  overflow: hidden;
  background: #e5e7eb;
}

.tcard__img{
  width: 100%;
  height: auto;
  display: block;
}

/* 文字区 */
.tcard__content{
  padding: 6px 0;
}

.tcard__quote{
  font-size: clamp(
    var(--h3-min),
    calc(
      var(--h3-min) + (var(--h3-1920) - var(--h3-min))
      * ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    calc(var(--h3-1920) * (100vw / var(--vw-max)))
  );
  margin: 0 0 18px;
  color: #111827;
}

.tcard__meta{
  margin-bottom: 18px;
}

.tcard__name{
  color: #111827;
}

.tcard__title{
  margin-top: 4px;
  color: #6b7280;
}

/* 导航按钮区 */
.tcard__nav{
  display: flex;
  gap: 12px;
}

/* 圆形按钮 */
.tswiper-btn{
  width: clamp(44px, 6vw, 64px);
  height: clamp(44px, 6vw, 64px);
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,1);
  position: relative;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}

.tswiper-btn:hover{
  transform: translateY(-1px);
}

/* 用 CSS 画箭头：两个边框组成的 “<” “>” */
.tswiper-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(17,24,39,0.7);
  border-bottom: 2px solid rgba(17,24,39,0.7);
  transform: rotate(135deg); /* 默认画“<” */
}

/* next 改成 “>” */
.tswiper-btn--next::before{
  transform: rotate(-45deg);
}

/* >=768：左右布局更像你的桌面图 */
@media (min-width: 768px){

  .tcard{
    grid-template-columns: clamp(360px, 40vw, 860px) 1fr;
    gap: clamp(48px, 5vw, 100px);
    align-items: center;
  }

  .tcard__media{
    border-radius: 14px;
  }
}


@media (min-width: 1024px){
  
  .split{
    grid-template-columns: clamp(260px, 20vw, 600px) 1fr;
  }

  .card-list{
    gap: 22px;
  }

  .card{
    grid-template-columns: 72px 1fr;
    gap: 18px;
  }

  .card + .card{
    padding-top: 22px;
  }

}
/* 4列：每行第4个去右边线 */
@media (min-width: 1200px){
  .home-backed__grid .home-backed__cell:nth-child(2n){
    border-right: 1px solid rgba(255,255,255,0.10);
  }
  .home-backed__grid .home-backed__cell:nth-child(4n){
    border-right: none;
  }
}


/* =========================
   Recent News
   - mobile: 1 column
   - >=1024: 3 columns
   - no vertical lines
   - "Read more" aligned by sticking to bottom
========================= */
.home-news{
  padding: clamp(60px, 6vw, 120px) 0;
}

.home-news__title{
  padding-bottom: clamp(24px, 3vw, 48px);
}

.home-news__grid{
  display: grid;
  grid-template-columns: 1fr; /* mobile */
  gap: clamp(40px, 6vw, 80px);
}

.home-news__grid .news-card {
  border:none;
}

.news-card{
  /* 你也可以加一点卡片边界感（可删） */
  /* border: 1px solid rgba(17,24,39,0.08); */
  /* border-radius: 8px; */
}

.news-card__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.news-card__media{
  background: #f3f4f6;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.news-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card__img--placeholder{
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}

/* 关键：让 body 成为纵向 flex，footer 被推到底部 */
.news-card__body{
  padding-top: 18px;
  display: flex;
  flex-direction: column;
}

.news-card__kicker{
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home .news-card__link {
  padding: 0;
}

@media (min-width: 1024px){
  .home-news__grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .home .news-card__link {
    padding: 0;
  }
  
  
}



/* About ######################################################## */



.about-story {
  padding: clamp(60px, 6vw, 120px) 0;
}

.about-story__inner {
  display: grid;
  grid-template-columns:1fr;
  gap: clamp(10px, 5vw, 150px);
}


.about-story__right {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-story__h3 {
  margin: 0 0 12px 0;
}



.about-story__reasons {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.reason {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: start;
}

.reason__text {
  margin: 0;
}


.reason__icon {
  width: clamp(44px, 8vw, 64px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(44px, 8vw, 64px);
  flex: 0 0 auto;
}

.icon--chip {
  background-image: url("images/icons/icon-chip.svg");
}
.icon--ops {
  background-image: url("images/icons/icon-ops.svg");
}
.icon--capital {
  background-image: url("images/icons/icon-capital.svg");
}
.icon--network {
  background-image: url("images/icons/icon-network.svg");
}



/* ========== 深色区块 How We Think ========== */
.think {
  padding: clamp(60px, 6vw, 120px) 0;
  background-color: var(--dark-grey);
}
.think__title {
  color: var(--white);
  padding-bottom: clamp(24px, 3vw, 48px);
  text-align: center;
}

.think__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.think-card {
  border-radius: 0; /* 设计图接近直角 */
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border: 1px solid #4e4a59;
  padding: 20px;
  margin: 0 0 -1px 0; /* 只需要向下叠 */
  
}
/* 第一列不需要向左叠 */
.think-card:nth-child(3n + 1) {
  margin-left: 0;
}

/* 顶部第一行不需要向上叠（grid里用 margin-top 也可，这里用更简单的方式） */
.think-card:nth-child(-n + 3) {
  margin-top: 0;
}

.think-card__image {
  height: clamp(220px, 18vw, 360px);
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
  opacity: 0.92;
}

.think-card__content {
  padding-top: 18px;
}

.think-card__h3 {
  color: var(--white);
  margin: 0 0 8px 0;
}

.think-card__p {
  margin: 0;
  color: rgba(255,255,255,0.72);
}



.about-partner {
  display: none;
  padding: clamp(60px, 6vw, 120px) 0;
}
.about-partner__title {
    padding-bottom: clamp(30px, 4vw, 50px);
}
/* ===== Partners Grid - 自适应列宽 + 自适应间距 ===== */

.about-partner .partner {

  display: grid;

  /* 关键：列最小宽度随视口变化（不固定） */
  --col-min: clamp(200px, 22vw, 280px);

  /* 关键：间距随视口变化（不固定） */
  --gap-row: clamp(24px, 3.2vw, 48px);
  --gap-col: clamp(28px, 4.8vw, 64px);

  grid-template-columns: 1fr;
  gap: var(--gap-row) var(--gap-col);

}



/* ===== 最后按钮：永远跟在最后一个成员后面 ===== */
.partner .member.view-team{
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner .member.view-team .view-team-btn:hover{
  filter: brightness(1.05);
}

@media (min-width: 768px) and (max-width: 1023.98px){
  
  .about-partner .partner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-partner .partner  > .member.view-team:nth-child(2n + 1){
    grid-column: 1 / -1;     /* 跨整行 */
    justify-self: center;     /* 让这一项在整行内居中 */
  }
  
}

/* 1024 - 1920：3 列 */
@media (min-width: 1024px) and (max-width: 1919.98px){
  .about-partner .partner{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .about-partner .partner  > .member.view-team:nth-child(3n + 1){
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* > 1920：4 列 */
@media (min-width: 1920px){
  .about-partner .partner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .about-partner .partner  > .member.view-team:nth-child(4n + 1){
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (min-width: 1024px) {
  
  .about-story__inner {
      grid-template-columns: clamp(260px, 20vw, 600px) 1fr;
  }
  .about-story__reasons {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 28px 56px;
  }
  .reason {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .think__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .think-card__content {
    padding: clamp(18px, 2vw, 40px);
  }
  .think-card {
    padding: 0;
    margin: 0 0 -1px -1px;
  }
  
  
  
}



 :root{
    --about-teal:#1f8a93;
    --about-teal-soft:rgba(31,138,147,0.28);

    /* 你只需要改这一行：城市文字大小 */
    --about-label-font-size: 14px;
  }

.about-presence {
    padding: clamp(60px, 6vw, 120px) 0;
}
.about-presence__title {
  text-align: center;
    padding-bottom: clamp(30px, 4vw, 50px);
}
  .about-presence__scroll{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }
  .about-presence__svg{
    display:block;
    width:100%;
    height:auto;
    min-width:946px;
  }
  @media (min-width:1200px){
    .about-presence__scroll{ overflow:visible; }
    .about-presence__svg{ min-width:0; width:100%; }
  }

  /* marker: outer big + inner small */
  .about-marker__outer,
  .about-marker__inner{
    vector-effect:non-scaling-stroke;
  }
  .about-marker--outline .about-marker__outer{
    fill:#fff;
    stroke:var(--about-teal);
    stroke-width:2.5;
  }
  .about-marker--outline .about-marker__inner{ fill:var(--about-teal); }

  .about-marker--filled .about-marker__outer{
    fill:var(--about-teal);
    stroke:var(--about-teal);
    stroke-width:2.5;
  }
  .about-marker--filled .about-marker__inner{ fill:#fff; }

  /* label: no border */
  .about-label__box{ stroke:none !important; }
  .about-label--filled .about-label__box{ fill:var(--about-teal); }
  .about-label--filled .about-label__text{ fill:#fff; }

  .about-label--plain .about-label__box{ fill:#fff; }
  .about-label--plain .about-label__text{ fill:var(--about-teal); }

  /* only control text size, do NOT set font-family */
  .about-label__text{
    /* 不超过 2rem */
    font-size: clamp(0.75rem, var(--about-label-font-size), 2rem);
    dominant-baseline: middle;
  }

  /* legend */
  .about-presence__legend{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    padding-top:48px;
    flex-wrap:wrap;
  }
  .about-legend__item{ display:flex; align-items:center; gap:14px; }
  .about-legend__dot{
    width:26px;height:26px;border-radius:999px;position:relative;flex:0 0 26px;
  }
  .about-legend__dot::after{
    content:"";position:absolute;left:50%;top:50%;
    width:8px;height:8px;border-radius:999px;transform:translate(-50%,-50%);
  }
  .about-legend__dot--outline{ background:var(--about-teal); }
  .about-legend__dot--outline::after{ background:var(--white); }
  .about-legend__dot--filled{ background:var(--white);border:4px solid var(--about-teal); }
  .about-legend__dot--filled::after{ background:var(--about-teal); }


@media (max-width: 768px) {
  .about-presence .container {
    padding-inline: 0;
  }
}


/* News ######################################################## */


/* ===========================
   HERO (top 3 posts)
   - Use lines (borders) to separate blocks
   - No gaps
=========================== */

.news-hero__frame {
  border-top: 1px solid #dadada;
  border-left: 1px solid #dadada;
}

.news-page {
  padding: clamp(60px, 6vw, 120px) 0;
}
.news-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.news-hero__grid a:hover, .news-list .news-card__link:hover {
  background-color: rgba(0,0,0,.03);
}
.hero-card {
  border-right: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
}

.hero-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
  padding: clamp(20px, 5vw, 40px);
}

.hero-card__image {
  width: 100%;
  height: clamp(200px, 35vw, 500px);
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero-card__image--placeholder {
  background: #f1f1f1;
}

.hero-card--featured .hero-card__body {
  padding-top: clamp(20px, 5vw, 40px);
}

.hero-card__date {
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hero-card__title {
  margin: 0 0 10px;
}

.hero-card__meta {
  font-size: 13px;
}

.hero-side {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.hero-side a {
  display: flex;
  align-items: center;
}
/* ===========================
   Tabs
=========================== */

.news-tabs {
  display: none;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin: clamp(50px, 5vw, 100px) 0 clamp(30px, 5vw, 60px);
}

.news-tab {
  color: var(--grey);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px 6px;
  border-bottom: 2px solid transparent;
}

.news-tab.is-active {
  color: var(--dark-grey);
  border-bottom-color: var(--dark-grey);
}

/* ===========================
   List Grid (12 posts + load more)
   - Mobile: 1 column
   - Uses lines (borders)
=========================== */
.news-list {
  padding-top: clamp(50px, 6vw, 100px);
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  /*border-top: 1px solid #dadada;
  border-left: 1px solid #dadada;*/
}

.news-card {
  /*border-right: 1px solid #dadada;*/
  border-bottom: 1px solid #dadada;
  min-height: 150px;
}

.news-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: clamp(40px, 5vw, 80px) clamp(20px, 5vw, 40px);
}

.news-card__date {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}




/* ===========================
   Load More (button includes Loading state)
=========================== */

.news-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: clamp(40px, 5vw, 80px);
}

.news-load-more {
  cursor: pointer;
  min-width: 140px; /* prevents width jump when showing Loading... */
}

.news-load-more:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.news-load-more.is-hidden {
  display: none;
}

/* ===========================
   >= 1024px layout
   - Hero: 2fr / 1fr
   - List: 3 columns
=========================== */

@media (min-width: 1024px) {


  .news-hero__grid {
    grid-template-columns: 2fr 1fr;
  }

  .hero-side {
    grid-template-rows: 1fr 1fr;
  }


  /*.news-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }*/
}


/* ===========================
   Single Post
=========================== */

.post .post-header {
  padding: clamp(50px, 12vw, 200px) 0;
}
.post .post-header .breadcrumbs {
  margin-bottom: clamp(30px, 5vw, 60px);
}

.post .content {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: clamp(120px, 20vw, 200px);
}
.post h2, .post h3, .post h4 {
    margin: 0 auto 20px;
}
.post p, .post ul,.post ol {
    margin: 0 auto 30px;
}
.post ul,.post ol {
    padding-left: 30px;
}
.post ul li,.post ol li {
    padding-bottom: 10px;
}
.post .wp-block-image {
    margin: 30px auto;
    text-align: center;
}
.post .wp-block-image figcaption, .post .wp-block-audio figcaption {
    font-size: 14px;
    color: #aaaaaa;
    text-align: center;
}
.post .wp-block-image img {
    height: auto;
}
.post .wp-block-media-text__media img {
    height: auto;
}
.post .wp-block-media-text {
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: #F3F5F8;
}
.post .wp-block-media-text .wp-block-media-text__content {
    padding-top: 8%;
}
.post .wp-block-media-text .wp-block-media-text__content .has-medium-font-size {
    font-weight: 700;
    margin-bottom: 10px;
}
.post .wp-block-group.company-profile {
    padding: 20px;
    background-color: #f3f5f8;
}
.post .wp-block-group.company-profile h4 {
    font-weight: bolder;
}
.post .wp-block-group.company-profile p:last-child {
    margin-bottom: 0;
}




/* Public Good ######################################################## */


.program {
  padding-bottom: clamp(60px, 6vw, 120px);
}
.program .banner{
  height: clamp(100px, 12vw, 300px);
  background-color: var(--white);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% auto;
    }
.program-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1px, 5vw, 150px);
    padding-top: clamp(40px, 6vw, 80px);
      align-items: start;
    }
.publicgood .program:nth-of-type(2) .left-title {
    width: 100%;
    height: clamp(46px, 6vw, 100px);
    text-indent: -9999px;
    background: rgba(0, 0, 0, 0) url(images/sky9fellows-logo.svg) no-repeat left center / auto 100%;
}
.kicker{
      text-transform: uppercase;
      color: var(--dark-grey);
      margin: 0 0 6px 0;
}


.right h3{
      margin: 0 0 8px 0;
    }

.right h4 {
    
    margin-bottom: clamp(15px, 3vw, 25px);
}
.right h4.subhead {
  margin-top: clamp(30px, 3vw, 60px);
}
ul.bullets{
  margin-bottom: clamp(30px, 3vw, 60px);
}
ul.bullets li {
  display: flex;
  margin: 8px 0;
  gap: 10px;
}
ul.bullets li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink:0;
  margin-top: 0.6em;
  background-color: var(--dark-grey);        
}
.why {
  padding: clamp(60px, 6vw, 120px) 0;
  background-color: var(--dark-grey);
}
.why .why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1px, 5vw, 150px);
  }
.why .why-grid h2 {
  margin-bottom: clamp(30px, 3vw, 50px);
}
.why .why-grid h2, .why .why-grid p span {
  color: var(--white); 
}
.why .why-grid p {
  color: rgba(255,255,255,.8); 
  font-size: clamp(1rem, 3vw, 1.6rem);
}
.program .links {
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  
  .program-grid, .why .why-grid {
      grid-template-columns: clamp(260px, 30vw, 600px) 1fr;
    }
  
  
  
}


/* Team ######################################################## */

.team-section {
  padding-bottom: clamp(50px, 5vw,100px);
}
.team-section__title {
  padding-bottom: clamp(30px, 4vw, 50px);
}

.partner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 50px);
}
.member .ajax {
  display: block;
  text-decoration: none;
}
.member .photo {
  border-radius: clamp(10px, 2vw, 20px);
  overflow: hidden;              
  background: var(--white);  
  aspect-ratio: 1 / 1;  
}
.member .photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;             
}
.partner .member .info {
  padding: clamp(10px, 1.5vw, 30px);
}
.partner .member .info  span{
  color: var(--grey);
}


/* member-single */

.member-single {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
}
.member-single .gallery {
    background-color: #e3e5e6;
}
.member-single .info {
    padding: 32px;
}
.member-single .info .title {
  color: var(--dark-grey);
    font-size: 26px;
    font-weight: 700;
    line-height: 140%;
}
.member-single .info span {
    display: block;
    color: #3c6380;
    margin-top: 5px;
}
.member-single .info .summary {
    color: #595959;
    font-weight: 300;
    margin-top: 30px;
}
.cn .member-single .info .summary {
    text-align: justify;
}
.member-single .info .summary p {
    margin-bottom: 15px;
}

.member-single .info .slogan {
    margin-top: 40px;
}
.member-single .info .listing {
    margin-top: 40px;
}
.member-single .figure {
    display: flex;
    flex-wrap: wrap;
    padding: 32px 0;
}
.figure .subtitle {
    display: flex;
    position: relative;
    width: 100%;
    color: #aaaaaa;
}
.figure .cent {
    width: 100%;
    border-left: solid 4px #e6e6e6;
    padding-left: 20px;
}
.figure .saying {
    display: flex;
    font-size: 18px;
    padding: 10px 0;
}
.figure .name {
    display: flex;
    color: #aaaaaa;
    align-items: center;
}
.figure .name::before {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    margin-right: 6px;
    background-color: #aaaaaa;
}

@media (min-width: 768px) {
    .member-single .info {
        padding: 48px;
    }
    .member-single .info .title {
        font-size: 32px;
    }
}

@media (min-width: 1200px) {

    .member-single .gallery img {
        display: none;
    }
    .member-single .gallery .swiper-slide  {
        height: 620px;
        background-size: auto 100%;
        background-position: center top;
        background-repeat: no-repeat;
    }
    .member-single .info {
        padding: 100px;
    }
    .member-single .info .title {
        font-size: 42px;
    }
    
    .member-single .figure {
        padding: 80px 80px 0 0;
    }
    .member-single .figure .saying {
        padding: 20px 0 10px;
    }
    
}
@media (min-width: 1440px) {
    .member-single .info {
        display: flex;
        justify-content: space-between;
    }
    .member-single .info .l {
        width: 25%;
        flex-shrink: 0;
    }
    .member-single .info .summary {
        width: 70%;
        margin-top: 0;
    }
}

@media (min-width: 1440px) {
  .partner {
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;
  }
}
@media (min-width: 1920px) {
  .partner {
    grid-template-columns: repeat(4, 1fr);
  }
}




/* Portfolio  ######################################################## */

.portfolio .footer-cta {
  display: none;
}

.portfolio .hero-section .info p:first-child {
  margin-bottom: clamp(15px, 3vw, 25px);
}


/* =========================
   Portfolio Tabs
   ========================= */
.portfolio-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-bottom: clamp(24px, 5vw, 48px);
}

.portfolio-tab{
  color: var(--grey);
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 10px;
  cursor: pointer;
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.portfolio-tab:hover{
  color: var(--dark-grey);
}

.portfolio-tab.is-active{
  color: var(--dark-grey);
  font-weight: bolder;
  border-color: var(--dark-grey);
}

/* =========================
   Portfolio Grid
   - 手机：2列
   - >=1200：4列
   - >=1920：6列
   - 线条：item 的 border（稳定）
   - 高度：aspect-ratio 自适应（不固定 px）
   ========================= */
.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #dadada;
  border-left: 1px solid #dadada;
  background: transparent;
}

@media (min-width: 1200px){
  .portfolio-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1920px){
  .portfolio-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =========================
   Portfolio Item (cell)
   - 动画：只做 opacity
   ========================= */
.portfolio-item{
  display: block;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-right: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  position: relative;

  opacity: 1;
  transition: opacity 200ms ease; /* ✅ 只淡入淡出 */
}

/* 不固定高度：由比例决定格子高度（按设计可调：16/9、4/3、2/1） */
.portfolio-item__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.portfolio-item:hover .portfolio-item__inner{
  background: rgba(0,0,0,.03);
}

.portfolio-item__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  scale: 1.2;
  object-fit: contain;
}

.portfolio-item__placeholder{
  opacity: .6;
  text-align: center;
  padding: 10px;
}

.portfolio-empty{
  padding: 40px 0;
  opacity: .7;
  font-size: 14px;
}

/* JS 会给要隐藏的项加这个 class：只淡出 */
.portfolio-item.is-leaving{
  opacity: 0;
}


@media (min-width: 1024px) {
  .portfolio-item__inner{
    aspect-ratio: 16 / 9; 
  }

}




/* By the Numbers */
.by-the-numbers{
  background:var(--dark-grey);
  color:var(--white);
  padding:clamp(60px, 6vw, 120px) 0;
}

.section-title{
  color: var(--white);
  margin:0 0 22px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.stat{
  padding:18px 0;
}

.stat__num{
  font-size:54px;
  line-height:1;
  font-weight:300;
  letter-spacing:1px;
  margin-bottom:10px;
}
.stat__num span {
  font-size: clamp(26px, 6vw, 40px);
}
.stat__label{
  font-size:13px;
  color:rgba(255,255,255,.72);
}

/* Portfolio Areas */
.portfolio-area{
  background:var(--light);
  padding:clamp(60px, 6vw, 120px) 0;
}


.area__banner{
    height: clamp(100px, 12vw, 300px);
    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}


.area__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1px, 5vw, 150px);
    padding-top: clamp(30px, 3vw, 60px);
    padding-bottom: clamp(60px, 6vw, 120px);
    align-items: start;
}
.focus-block:last-child .area__grid{
  padding-bottom: 0;
}
.area__title h3{
  margin:0;
}

.area__content{
  max-width:100%;
}



.area__subhead{
  margin: clamp(30px, 3vw, 60px) 0 clamp(15px, 3vw, 25px);
}
.area__grid ul.bullets {
  margin-bottom: 0;
}
.area__subhead--top{
  margin-top:0;
}


/* ===== Desktop (>=1024px) ===== */
@media (min-width:1024px){

  /* By the Numbers: title left, stats right */

  .btn-row{
    display:grid;
    grid-template-columns:1fr 2fr;
    align-items:start;
  }

  .section-title{
    margin:0;
    opacity:.95;
  }

  .stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:clamp(48px, 5vw, 80px);
    justify-items:center;
  }

  .stat{
    border:none;
    border-radius:0;
    padding:0;
    text-align:center;
    min-width:220px;
  }

  .stat__num{
    font-size:72px;
    letter-spacing:2px;
    margin-bottom:10px;
  }

  .stat__label{
    color:rgba(255,255,255,.75);
  }

  /* Areas: match screenshot spacing/layout */



  .area__grid{
    grid-template-columns:clamp(260px, 30vw, 600px) 1fr;

  }

}



/* =========================
   Web3 Investments Section
   ========================= */

.portfolio-investments{
  padding: clamp(60px, 6vw, 120px) 0;
}

.portfolio-investments__head{
  padding-bottom: clamp(30px, 3vw, 60px);
}

.portfolio-investments__title{
  margin: 0 0 10px;
}


/* 给网格一点“卡片感”背景（截图是浅灰大块） */
.portfolio-investments__gridWrap{
  overflow: hidden; /* 让网格边线贴合 */
}

/* =========================
   ✅ FIX：你原文件这里“重复定义了 .portfolio-grid / .portfolio-item”
   这会导致你自己都不确定到底哪套生效。
   我保留你这一段，但改成“只补充 Web3 区块的边线色/布局”，
   不再重置前面 portfolio-grid 的列数/边框结构。
   ========================= */

/* 只在 Web3 investments 区域内，调整线条颜色（不影响 Portfolio 主网格） */
.portfolio-investments .portfolio-grid{
  border-top: 1px solid rgba(0,0,0,.10);
  border-left: 1px solid rgba(0,0,0,.10);
}

/* Web3 区域内 item 边线统一一点 */
.portfolio-investments .portfolio-item{
  border-right: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
}

/* Web3 区域内固定比例更扁一点（只在该区生效） */
.portfolio-investments .portfolio-item__inner{
  aspect-ratio: 16 / 9; /* 截图格子更扁一点 */
  transition: all 0.2s ease-out 0s;
}

.portfolio-investments .portfolio-item__logo{
  transform: scale(1.05);
}

/* 默认隐藏展开内容 */
.portfolio-hub,
.portfolio-investments{
  display: none;
}

/* 展开后显示内容 */
.portfolio.is-portfolio-revealed .portfolio-hub,
.portfolio.is-portfolio-revealed .portfolio-investments{
  display: block;
}

/* 下按钮默认隐藏；展开后显示 */
#jsPortfolioToggleBottom{ display: none; }
.portfolio.is-portfolio-revealed #jsPortfolioToggleBottom{ display: inline-block; }

/* 上按钮展开后隐藏 */
.portfolio.is-portfolio-revealed #jsPortfolioToggleTop{ display: none; }

/* div 当按钮的交互 */
.js-portfolio-toggle{ cursor: pointer; }
.js-portfolio-toggle:focus{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.portfolio-view-hide-top {
  padding-top: clamp(60px, 6vw, 120px);
}



/* Companies-single */

.companies-single {
    width: 100%;
}
.shot {
    position: relative;
}
.shot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    bottom: 0;
    background-color: #ffffff;
}
.companies-single .company {
    width: 100%;
    background-color: #ffffff;
}
.companies-single .company .block {
    display: flex;
    width: 100%;
    padding: 40px 32px;
    background-color: #96a7b3;
}
.companies-single .company .brandlogo {
    display: flex;
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
  border-radius: 40px;
    padding: 0;
    overflow: hidden;
}
.companies-single .company .brandlogo img {
    transform: scale(1.5);
}
.companies-single .company .block .content .title {
  color: var(--dark-grey);
    display: none;
}
.companies-single .company .block .category {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.companies-single .company .block .category span {
    color: #ffffff;
    padding: 5px 14px;
    border-radius: 50px;
    margin: 5px 0;
    border: solid 1px #ffffff;
}
.companies-single .company .block .category span:last-child {
    color: #000000;
    background-color: #ffffff;
}
.companies-single .company .info {
    padding: 32px;
}
.companies-single .company .info .listing {
    color: #3c6380;
    padding-top: 10px;
}
.companies-single .company .info .listing .image {
    max-width: 120px;
}
.companies-single .company .info .text {
    color: #595959;
    padding-top: 30px;
}
.companies-single .company .info .category {
    padding-top: 20px;
}
.companies-single .company .info .category span {
    display: flex;
    color: #595959;
    margin-right: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.companies-single .company .info .category span::before {
    content: '';
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background-color: #595959;
}
.companies-single .company .info .links {
    margin-top: 40px;
}
.companies-single .company .info .podcaster {
    display: flex;
    margin: 40px 0;
}
.companies-single .company .info .podcaster .frontcover {
    position: relative;
    width: 140px;
    flex-shrink: 0;
}

.companies-single .company .info .podcaster .content {
    padding-left: 20px;
}
.companies-single .company .info .podcaster .voice {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 15px;
    background-color: #3c6380;
    z-index: 1;
    cursor: pointer;
}

.companies-single .company .info .podcaster .voice i {
    width: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #ffffff;
    cursor: pointer;
    will-change: border-width;
    transition: all 0.2s ease;
}
.companies-single .company .info .podcaster .voice.fa-pause i {
    border-style: double;
    height: 20px;
    border-width: 0px 0 0px 20px
}


.companies-single .company .info .companies-ceo-video {
    margin-top: 40px;
}



.companies-single .founder {
    position: relative;
    width: 100%;
    background-color: #ffffff;
}
.companies-single .founder .content {
    display: flex;
    flex-direction: column;
}
.companies-single .founder .content .photo {
    width: 100%;
    height: 240px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}
.companies-single .founder .content .info {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
}
.companies-single .founder .content .info .title {
    padding: 5px 0 20px;
}
.companies-single .founder .content .info p {
    color: #595959;
}



.companies-single .figure {
    width: 100%;
    padding: 0px 32px 32px;
    background-color: #ffffff;
}




.barrager{
    display: none;
    width:100%;
    height:500px;
    overflow:hidden;
    position:relative;
    border-top: solid 1px #aaaaaa;
}
.barrager div{
    position:absolute;
}

.profile .photo {
    width: 100%;
    min-height: 300px;
    background-color: #eeeeee;
}
.profile .info {
    position: relative;
}
.profile .info .text {
    color: #595959;
    padding-top: 30px;
}
.profile .info  .slogan {
    font-size: 28px;
}




.social-hub {
    display: flex;
    padding-top: 30px;
    gap: 10px;
}
.social-hub .icon a {
  display: block;
    width: 50px;
    height: 32px;
    border: none;
    border-radius: 0;
  text-indent: -9999px;
    background-color: transparent;
  background-repeat: no-repeat;
    background-size: auto 32px;
    background-position: left center;
}
.social-hub .website a {
    background-image: url(images/social/website.svg);
}
.social-hub .github a {
    background-image: url(images/social/github.svg);
}
.social-hub .discord a {
    background-image: url(images/social/discord.svg);
}
.social-hub .steam a {
    background-image: url(images/social/steam.svg);
}
.social-hub .xbox a {
    background-image: url(images/social/xbox.svg);
}
.social-hub .twitter a {
    background-image: url(images/social/twitter.svg);
}


.home .overlay .popup .bd {
    padding-top: 70px;
}



@media (max-width: 767px) {
    .companies-single .company .block {
        flex-direction: column;
    }
    
}
@media (min-width: 768px) {
  
    .home .overlay .popup .bd {
      padding-top: 0;
  }
     .social-hub .icon a {
        width: 62px;
        height: 42px;
    }
    .companies-single .company .block .content .title {
        display: block;
        font-size: 30px;
        font-weight: bolder;
        padding-bottom: 20px;
    }
    .companies-single .company .block .content {
        padding-left: 50px;
    }
  
    .companies-single .company .brandlogo {
        width: 200px;
        height: 200px;
    }

    .companies-single .founder .content .photo {
        height: 400px;
    }
    .companies-single .company .block, .companies-single .company .info, .companies-single .founder .content .info {
        padding: 48px;
        align-items: center;
    }
    .companies-single .figure {
        padding: 0 48px 48px;
    }
    .single .companies-single {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        padding: 100px 0;
        justify-content: center;
        background: #F3F5F8;
    }
    .single .companies-single .company, .single .companies-single .founder, .single .companies-single .figure {
        max-width: 700px;
    }
}
@media (min-width: 992px) {
    .single .companies-single .company, .single .companies-single .founder, .single .companies-single .figure {
        width: 700px;
    }
 
}
@media (min-width: 1200px) {

    .companies-single {
       display: flex;
       flex-wrap: nowrap;
        align-items: flex-end
    }
    .companies-single .company {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 45%;
        max-width: 700px;
        flex-shrink: 0;
        flex-wrap: wrap;
        background-color: #ffffff;
    }
    .companies-single .company .block {
        padding: 50px;
    }
    .companies-single .company .brandlogo {
        display: flex;
        width: 200px;
        height: 200px;
    }
    .companies-single .company .info {
        position: relative;
        padding: 50px;
        overflow-y: auto;
    }
    .companies-single .company .info .podcaster {
        margin-bottom: 0;
    }
    .companies-single .founder {
        display: flex;
        flex-wrap: wrap;
        width: 30%;
        max-width: 400px;
        margin-left: 10px;
        margin-bottom: 10px;
        flex-shrink: 0;
        justify-content: center;
        background-color: #ffffff;
    }
    .single .companies-single .founder {
        margin-left: 0;
        margin-bottom: 0;
    }
    .companies-single .founder .content {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .companies-single .founder .content .photo {
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
    }

    .companies-single .figure {
        width: 20%;
        max-width: 400px;
        padding-top: 48px;
        margin-right: 20px;
        margin-left: 10px;
        margin-bottom: 10px;
    }
    .single .companies-single .figure {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 0;
    }
    
    
    .profile {
        
    }
    .profile .container {
        display: flex;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .profile .shot {
        width: 30%;
        flex-shrink: 0;
    }

    .profile .info {
        display: flex;
        width: 70%;
        flex-wrap: nowrap;
        padding-left: 60px;
    }
    .profile .info .l {
        width: 75%;
        flex-shrink: 0;
        border-right: solid 1px #aaaaaa;
    }
    .profile .info .text {
        color: #595959;
        padding-top: 30px;
        padding-right: 50px;
    }
    .profile .info  .slogan {
        font-size: 28px;
    }
    .profile .info .r {
        width: 25%;
        flex-shrink: 0;
        
    }
    .profile .info .listing {
        padding-top: 30px;
        
    }
    .profile .info .links {
        padding-top: 50px;
        
    }
    .profile .info .figure {
        padding-right: 0;
        padding-left: 50px;
    }
    .profile .figure .saying {
        padding-top: 30px;
    }
}

/* =========================
   ✅ PART 2 END
   下一段从：overlay ########################################################
   一直到 footer + intro 动画结尾
   ========================= */

/* overlay ######################################################## */

.overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1100;
    background: rgba(0,0,0,0.9);
    -webkit-animation: fadeIn 0.6s forwards;
            animation: fadeIn 0.6s forwards;
}

body.hidden {
	overflow: hidden;
}
.overlay .popup {
    width: 100%;
    position: relative;
    left: 0;
    min-height: 100vh;
    opacity: 1;
}
.overlay .popup .hd {
    display: flex;
    position: fixed;
    right: 0;
    font-size: 18px;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    padding: 0 32px;
    z-index: 10;
}
.single .popup .hd {
    display: none;
}
.overlay .popup .hd .title {
    font-size: 20px;
    text-transform: uppercase;
}

.overlay .close {
    cursor: pointer;
    display: flex;
    min-height: 70px;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.overlay .close i {
    position: relative;
    display: flex;
    height: 40px;
    width: 40px;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 0.2s ease-out 0s;
       -moz-transition: all 0.2s ease-out 0s;
            transition: all 0.2s ease-out 0s;
}

.overlay .close i:before, .overlay .close i:after {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 2px;
    top: 20px;
    border-radius: 6px;
    background-color: #000000;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transition: all 0.2s ease-out 0s;
       -moz-transition: all 0.2s ease-out 0s;
            transition: all 0.2s ease-out 0s;
}
.overlay .close i:before {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
}
.close i:after {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
}

.overlay .popup .bd {
    min-height: 100vh;
}
.overlay .popup .bd .img {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.overlay .popup .bd .img.member {
    min-height: 260px;
    background-color: #ebebeb;
}
.overlay .popup .bd .img.portfolio {
    padding: 80px 32px;
    align-items: center;
    justify-content: center;
    background-color: #eaca32;
}

.overlay .popup .bd .image {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
}
.overlay .member-single {
    -webkit-animation: fadeInLeft 1s forwards;
           animation: fadeInLeft 1s forwards;
}
.overlay .popup .companies-single {
    width: 100%;
}


@media (max-width: 767px) {
    .overlay .popup .hd {
        justify-content: space-between;
        background-color: #ffffff;
        -webkit-animation: fadeInLeft 1s forwards;
                animation: fadeInLeft 1s forwards;
    }
}

@media (min-width: 768px) {
    .overlay .popup .companies-single {
        width: 80%;
    }
    .overlay .popup .hd {
        padding-left: 48px;
        padding-right: 48px;
    }
    .overlay .popup .hd .title {
        display: none;
    }
    .overlay .close {
        color: #ffffff;
        -webkit-animation: fadeIn 1s forwards;
        animation: fadeIn 1s forwards;
    }
    .overlay .close i:before, .overlay .close i:after{
        background-color: #ffffff;
    }
    .overlay .member-single {
        width: 80%;
        max-width: 1400px;
    }
}
@media (min-width: 992px) {
    .overlay .popup .companies-single {
        width: 70%;
    }
}
@media (min-width: 1200px) {
    .overlay .popup .companies-single {
        width: 100%;
    }
    .overlay .popup .bd {
        padding-top: 0;
    }
    
    .companies .overlay {
        overflow-y: hidden;
    }
    
    
    .overlay .popup .bd .img {
        background-size: auto 100%;
    }
    
    
    .overlay .companies-single .company {
        height: 100vh;
        -webkit-animation: fadeInLeft 1s forwards;
                animation: fadeInLeft 1s forwards;
    }
    .overlay .companies-single .founder {
        -webkit-animation: fadeInUp 1s forwards;
                animation: fadeInUp 1s forwards;
    }
    .overlay .companies-single .founder .content .photo {
        height: 240px;
    }
    .overlay .companies-single .figure {
        -webkit-animation: fadeInUp 1s forwards;
                animation: fadeInUp 1s forwards;
    }
    .overlay .close:hover i::before {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
                transform: rotate3d(0, 0, 1, 0deg);
    }
    .overlay .close:hover i::after {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
                transform: rotate3d(0, 0, 1, 0deg);
    }
}
@media (max-width: 1199px) {
    .overlay .popup {
        display: flex;
    }
    .overlay .popup .bd {
        display: flex;
    }
    .overlay .popup .companies-single {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        -webkit-animation: fadeInLeft 1s forwards;
                animation: fadeInLeft 1s forwards;
    }
}




/* Contact ######################################################## */


.contact-page{
  padding:clamp(60px, 15vw, 200px) 0;
}


.contact-eyebrow{
  margin: 0 0 16px;
}

.contact-card{
  background:#fff;
  border:1px solid #dadada;
  padding: clamp(24px, 6vw, 56px);
}

.contact-card__title{
  padding-bottom: clamp(24px, 6vw, 48px);
}

.contact-card__subtitle{
  padding-bottom: clamp(10px, 2vw, 20px);
}

.contact-card__desc{
  padding-bottom: clamp(20px, 4vw, 40px);
}

.contact-bullets{
  margin: 0 0 6px 18px;
  padding: 0;
}
.contact-bullets li{
  margin: 6px 0;
}

/* Sections */
.contact-sections{
  display: none;
  padding-top: 40px;
}

.contact-section{
  padding: 26px 0;
}

.contact-section__title{
  margin: 0 0 10px;
}

.contact-section__text{
  margin: 0;
}

.contact-link{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-kv{
  margin-top: 10px;
  display: inline-block;
  text-align: left;
}
.contact-kv__row{
  display:flex;
  gap: 12px;
  align-items: baseline;
  justify-content: flex-start;
  margin: 8px 0;
}
.contact-kv__k{
  width: 90px;
}

/* Offices */
.contact-offices{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  text-align: left;
}
.contact-office{
  background: transparent;
}
.contact-office__title{
  margin: 0 0 8px;
}
.contact-office__line{
  margin: 4px 0;
}

/* ===== WPForms styling (minimal underline fields like the mock) ===== */
.contact-form .wpforms-container{
  margin-top: 14px;
}

.contact-form .wpforms-container-full .wpforms-form .wpforms-field{
  padding: 10px 0 !important;
}

.contact-form .wpforms-container-full .wpforms-form label.wpforms-field-label{
  margin: 0 0 8px !important;
}

.contact-form .wpforms-container-full .wpforms-form input[type="text"],
.contact-form .wpforms-container-full .wpforms-form input[type="email"],
.contact-form .wpforms-container-full .wpforms-form input[type="tel"],
.contact-form .wpforms-container-full .wpforms-form input[type="url"],
.contact-form .wpforms-container-full .wpforms-form input[type="number"],
.contact-form .wpforms-container-full .wpforms-form select,
.contact-form .wpforms-container-full .wpforms-form textarea{
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #d9d9d9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  color:#111 !important;
}

.contact-form .wpforms-container-full .wpforms-form input:focus,
.contact-form .wpforms-container-full .wpforms-form select:focus,
.contact-form .wpforms-container-full .wpforms-form textarea:focus{
  outline: none !important;
  border-bottom-color: #111 !important;
}

.contact-form .wpforms-container-full .wpforms-submit-container{
  margin-top: 18px !important;
  padding-top: 6px !important;
}

.contact-form .wpforms-container-full .wpforms-form button[type="submit"].wpforms-submit{
  background:var(--dark-grey) !important;
  border: none !important;
  color:#fff !important;
  padding: 15px 30px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.contact-form .wpforms-container-full .wpforms-form button[type="submit"].wpforms-submit::after{
  content:"→";
  font-size: 14px;
  line-height: 1;
}



/* hide WPForms required hint if you want cleaner look */
/* .contact-form .wpforms-container-full .wpforms-required-label { display:none !important; } */

/* ===== Desktop layout (>=1024px) ===== */
@media (min-width: 1024px){


  .contact-hero{
    display: grid;
    grid-template-columns: clamp(260px, 20vw, 600px) 1fr;
    gap: clamp(40px, 10vw, 200px);
    align-items: start;
  }

  .contact-eyebrow{
    margin-top: 6px;
  }



  .contact-offices{
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
  }


  /* offices 也限制在右侧列宽内 */
  .contact-offices{
    grid-template-columns: repeat(2, 1fr); /* 可选：截图更像两列/三列你可调 */
  }

  /* 如果你想 offices 更像截图那种疏朗的三列（但宽度只有560会比较挤），可改成：
     .contact-offices{ grid-template-columns: repeat(3, 1fr); }
  */
  
  
}




/* Fellowship ######################################################## */

.fellowship .hero-section {
  max-width: 100%;
}
.fellowship .content {
  padding-bottom: clamp(60px, 6vw, 120px);
}
.fellowship .fellowship-logo {
    display: flex;
    justify-content: center;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}
.fellowship .fellowship-logo a {
    display: block;
    width: 100%;
    height: clamp(60px, 10vw, 110px);
    text-indent: -9999px;
    background: rgba(0, 0, 0, 0) url(images/sky9fellows-logo.svg) no-repeat center center / auto 100%;
}

.fellowship .wpforms-container-full {
  max-width: 1000px;
}

/* Footer ######################################################## */

.site-footer {
  padding: clamp(60px, 6vw, 100px) 0 clamp(30px, 6vw, 50px);
}
.site-footer--dark {
  color: var(--white);
  background: url(https://cdn.sky9capital.com/images/bg-footer_dark.png) no-repeat center center / cover;
}
.site-footer--light {
  color: var(--dark-grey);
  background: url(https://cdn.sky9capital.com/images/bg-footer_light.png) no-repeat center top / cover;
}
.site-footer .footer-cta {
  text-align: center;
  padding-top: clamp(1px, 6vw, 100px);
  padding-bottom: clamp(60px, 6vw, 120px);
}
.site-footer .footer-cta .title {
  font-size: clamp(32px, 4vw, 40px);
  padding-bottom: 25px;
  line-height: 1.2;
}
.site-footer .footer-office {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: clamp(60px, 4vw, 120px);
}
.site-footer .footer-office .city::before {
  content: "";
  display: flex;
  width: 100%;
  height: 30px;
  background: url(images/icons/icon-location.svg) no-repeat left center / auto 24px;
}
.site-footer .footer-office .city .name {
  font-size: clamp(20px, 4vw, 28px);
  padding-bottom: 10px;
}
.site-footer--dark.site-footer .footer-office .city .address {
  color: rgba(255,255,255,.8);
}
.site-footer--light.site-footer .footer-office .city .address {
  color: var(--grey);
}


/* ===== Footer social (div + a) ===== */

.brand-social {
  display: flex;
  align-items: center;
}
.footer-social {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  justify-content: center;
  padding-top: clamp(32px, 4vw, 40px);
}

/* 每个社交按钮 */
.footer-social__link{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  
  border-radius:6px;
  background-color:#000;               /* 黑色圆底 */

  background-repeat:no-repeat;
  background-position:center;
  background-size:36px;           /* 图标大小（可调） */

  text-decoration:none;
}

.site-footer .social a {
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-repeat:no-repeat;
  background-position:center;
  background-size:30px;   
  text-decoration:none;
}

/* LinkedIn / X 图标（白色 SVG 文件） */
.site-footer--dark .social-linkedin, .footer-cta .footer-social__link--linkedin{
  background-image:url("images/social/icon-linkedin.svg");
}

.site-footer--dark .social-x, .footer-cta .footer-social__link--x {
  background-image:url("images/social/icon-x.svg");
}



/* Hover（可选） */
.footer-social__link:hover{
  background-color:#111;
  transform:translateY(-1px);
}

/* Focus 可访问性（可选） */
.footer-social__link:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* sr-only（如果你主题里没有，就加上） */
.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.footer-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}
.footer-cards .footer-cards__desc {
  padding-bottom: 20px;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.site-footer__bottom .brand {
  text-transform: uppercase;
}
.site-footer__bottom .social {
  display: flex;
  margin-left: 20px;
}
.news .site-footer__bottom .social {
  display: none;
}
.social-linkedin {
  background-image:url("images/social/icon-linkedin-black.svg");
}
.social-x {
  background-image:url("images/social/icon-x-black.svg");
}
.site-footer--dark .social-linkedin {
  background-image:url("images/social/icon-linkedin.svg");
}
.site-footer--dark .social-x {
  background-image:url("images/social/icon-x.svg");
}

@media (min-width: 768px) {
  .site-footer .footer-office {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .site-footer .footer-cta .title span {
    display: block;
  }
  .footer-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 100px;
  }
  .footer-cards__item {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  .site-footer__bottom {
    flex-direction: row;
  }
}










/* ============================================================
   INTRO 期间隐藏滚动条，但保持布局宽度不变（保证 logo 对齐）
   - JS 会设置 --sbw = scrollbar width
   - intro-no-scrollbar: html overflow hidden => 不显示滚动条/槽位
   - body.intro-running padding-right: 补偿 sbw => header/logo 不横跳
   ============================================================ */
/* 非首页不显示 */
body:not(.home) #intro-splash{
  display: none !important;
}

/* ✅全站：始终保留滚动条占位（避免 intro 结束时 header/logo 闪动偏移） */
html{
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable){
  html{
    overflow-y: scroll;
  }
}

/* ✅intro 期间：保持滚动条“占位宽度”不变，只隐藏外观 */
html.intro-no-scrollbar{
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
  scrollbar-color: transparent transparent; /* Firefox */
}
html.intro-no-scrollbar::-webkit-scrollbar{
  width: auto;
  height: auto;
}
html.intro-no-scrollbar::-webkit-scrollbar-thumb{
  background: transparent;
}
html.intro-no-scrollbar::-webkit-scrollbar-track{
  background: transparent;
}

/* === body fixed 锁滚动 + 补偿滚动条宽度 === */
body.intro-running{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--lock-top, 0px);
  width: 100%;
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}

/* 动画期间隐藏首页内容 */
body.intro-running.has-intro .main{
  opacity: 0;
}

/* 动画结束后淡入首页内容 */
body.intro-done .main{
  opacity: 1;
  transition: opacity 600ms ease;
}

/* ✅intro 期间隐藏 header 真实 logo（你的 .site-logo 是 <a>） */
body.has-intro:not(.intro-done) .site-header .site-logo{
  opacity: 0;
}

/* ✅intro 真结束后再淡入 */
body.intro-done .site-header .site-logo{
  opacity: 1;
  transition: opacity 300ms ease;
}

/* =========================
   Splash container（✅铁满屏）
   WebGL 云背景由 canvas 提供
   ========================= */
#intro-splash.intro{
  --intro-base: #ccd4df;

  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;

  z-index: 3000;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;

  /* 遮挡云时长（移动端默认） */
  --mask1-dur: 7.2s;
  --mask2-dur: 7.6s;

  /* ✅背景简化：WebGL 负责云海 */
  background: var(--intro-base);

  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 轻噪点（可保留：叠在 WebGL 上有质感） */
#intro-splash.intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

#intro-splash .intro__clouds{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ✅WebGL 云背景：铺满、置底 */
#intro-splash .intro__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* 轻雾 */
#intro-splash .intro__mist{
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 55% 45%, rgba(255,255,255,.12), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 35% 65%, rgba(255,255,255,.07), rgba(255,255,255,0) 62%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%);
  filter: blur(10px);
  opacity: .32;
  will-change: opacity, transform;
  animation: introMistFade 10.5s linear forwards;

  z-index: 1;
}

@keyframes introMistFade{
  0%{
    opacity: .32;
    transform: scale(1.00);
  }
  80%{
    opacity: .24;
    transform: scale(1.02);
  }
  100%{
    opacity: 0;
    transform: scale(1.04);
  }
}

/* 云基础（遮挡云 1/2 用） */
#intro-splash .intro__cloud{
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  will-change: transform, opacity;
  pointer-events: none;
}

/* ✅关键：默认暂停所有动画，等资源加载完再统一开闸 */
#intro-splash .intro__cloud,
#intro-splash .intro__mist{
  animation-play-state: paused;
}
#intro-splash.intro.is-anim-on .intro__cloud,
#intro-splash.intro.is-anim-on .intro__mist{
  animation-play-state: running;
}

/* =========================
   MASK CLOUDS（默认：桌面/通用）
   ========================= */
#intro-splash .intro__cloud--1{
  top: 50%;
  left: 50%;
  width: clamp(980px, 92vw, 1500px);
  height: clamp(440px, 42vw, 720px);
  transform: translate(-50%, -50%) translateX(-6vw) scale(1.10);
  opacity: .96;
  filter: blur(0.22px);
  z-index: 4;
  background-image: url("https://cdn.sky9capital.com/wp-content/uploads/2026/01/sky9capital-432932.png");
  animation: introMaskLeft var(--mask1-dur) linear forwards;
}

#intro-splash .intro__cloud--2{
  top: 50%;
  left: 50%;
  width: clamp(860px, 80vw, 1320px);
  height: clamp(380px, 36vw, 620px);
  transform: translate(-50%, -50%) translateX(6vw) scale(1.08);
  opacity: .82;
  filter: blur(0.30px);
  z-index: 3;
  background-image: url("https://cdn.sky9capital.com/wp-content/uploads/2026/01/sky9capital-161530.png");
  animation: introMaskRight var(--mask2-dur) linear forwards;
}

@keyframes introMaskLeft{
  0%{
    transform: translate(-50%, -50%) translateX(-6vw) scale(1.10);
    opacity: .96;
  }
  100%{
    transform: translate(-50%, -50%) translateX(-98vw) scale(1.10);
    opacity: .40;
  }
}

@keyframes introMaskRight{
  0%{
    transform: translate(-50%, -50%) translateX(6vw) scale(1.08);
    opacity: .82;
  }
  100%{
    transform: translate(-50%, -50%) translateX(98vw) scale(1.08);
    opacity: .38;
  }
}

/* 桌面端遮挡云时长 */
@media (min-width: 769px){
  #intro-splash.intro{
    --mask1-dur: 11.5s;
    --mask2-dur: 11.9s;
  }

  #intro-splash .intro__cloud--1{
    transform: translate(-50%, -50%) translateX(-5vw) scale(1.10);
  }
  #intro-splash .intro__cloud--2{
    transform: translate(-50%, -50%) translateX(5vw) scale(1.08);
  }

  @keyframes introMaskLeft{
    0%{
      transform: translate(-50%, -50%) translateX(-5vw) scale(1.10);
      opacity: .96;
    }
    100%{
      transform: translate(-50%, -50%) translateX(-92vw) scale(1.10);
      opacity: .42;
    }
  }

  @keyframes introMaskRight{
    0%{
      transform: translate(-50%, -50%) translateX(5vw) scale(1.08);
      opacity: .82;
    }
    100%{
      transform: translate(-50%, -50%) translateX(92vw) scale(1.08);
      opacity: .40;
    }
  }
}

/* =========================
   ✅手机端：两片云贴边 + 起始向外推
   ========================= */
@media (max-width: 768px){

  /* 左边那片（最终向左飞走）：起始贴右边 */
  #intro-splash .intro__cloud--1{
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(18vw) scale(1.10);
  }

  /* 右边那片（最终向右飞走）：起始贴左边 */
  #intro-splash .intro__cloud--2{
    right: auto;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-18vw) scale(1.08);
  }

  @keyframes introMaskLeft{
    0%{
      transform: translateY(-50%) translateX(18vw) scale(1.10);
      opacity: .96;
    }
    100%{
      transform: translateY(-50%) translateX(-120vw) scale(1.10);
      opacity: .40;
    }
  }

  @keyframes introMaskRight{
    0%{
      transform: translateY(-50%) translateX(-18vw) scale(1.08);
      opacity: .82;
    }
    100%{
      transform: translateY(-50%) translateX(120vw) scale(1.08);
      opacity: .38;
    }
  }
}

/* =========================
   LOGO：保持你原始代码（不改）
   ========================= */
#intro-splash .intro__logo{
  position: fixed;
  left: 50%;
  top: 50%;
  width: 140px;
  height: clamp(35px, 4vw, 50px);
  z-index: 2;

  background: url("https://cdn.sky9capital.com/images/logo-black.svg") center / contain no-repeat;

  opacity: 0;
  filter: blur(10px);
  transform: translate(-50%, -50%) scale(2);
  will-change: transform, opacity, filter;
}

#intro-splash.intro.is-logo-in .intro__logo{
  opacity: 1;
  filter: blur(0);
  transition: opacity 650ms ease, filter 650ms ease;
}

#intro-splash.intro.is-logo-to-header .intro__logo{
  transform: translate(-50%, -50%)
             translate(var(--logo-to-x, 0px), var(--logo-to-y, -200px))
             scale(1);
  transition: transform 900ms ease;
}

#intro-splash.intro.is-fade-out{
  opacity: 0;
  transition: opacity 650ms ease;
}

/* =========================
   ✅禁用旧的 3~12 背景云（即使 DOM 里还存在也不显示）
   ========================= */
#intro-splash .intro__cloud--3,
#intro-splash .intro__cloud--4,
#intro-splash .intro__cloud--5,
#intro-splash .intro__cloud--6,
#intro-splash .intro__cloud--7,
#intro-splash .intro__cloud--8,
#intro-splash .intro__cloud--9,
#intro-splash .intro__cloud--10,
#intro-splash .intro__cloud--11,
#intro-splash .intro__cloud--12{
  display: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #intro-splash .intro__cloud,
  #intro-splash .intro__mist{
    animation: none !important;
  }

  #intro-splash .intro__logo{
    opacity: 1;
    filter: none;
    transition: none !important;
  }

  #intro-splash.intro.is-logo-to-header .intro__logo{
    transition: none !important;
  }
}