/* ══════════════════════════════════════════════════════════════════════
   MOBILE REFINE — premium / minimal layer  ·  phone only (≤767.98px)
   Loaded AFTER home.css so it wins the cascade on phones.
   Desktop & tablet (≥768px) are untouched.
   Direction: more air, hairline dividers instead of heavy boxes,
   quieter accents, refined type rhythm. Same navy + blue identity.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width:767.98px){

  /* ── Rhythm tokens ──────────────────────────────────────────────── */
  .hm-sec{padding:84px 24px;}
  .hm-wrap{max-width:560px;}

  /* ── Section header ─────────────────────────────────────────────── */
  .hm-shead{margin-bottom:30px;}
  .hm-eyebrow{font-size:10px;letter-spacing:0.46em;color:var(--blue-light);margin-bottom:16px;opacity:0.9;}
  .hm-stitle{font-size:clamp(30px,8vw,40px) !important;line-height:1.0 !important;letter-spacing:-0.025em;color:#fff;margin-bottom:16px;}
  .hm-ssub{font-size:15.5px;line-height:1.92;color:rgba(255,255,255,0.5);font-weight:300;}

  /* ── HERO ───────────────────────────────────────────────────────── */
  .hm-hero{padding:96px 24px 64px;
    background:radial-gradient(ellipse 140% 60% at 50% -8%,rgba(59,130,246,0.10),transparent 58%);}
  .hm-hero-inner{gap:32px;}
  .hm-h1{font-size:clamp(42px,12vw,60px) !important;line-height:0.92 !important;margin-top:24px;letter-spacing:-0.03em;}
  .hm-h1-em,h1 span.hm-h1-em{color:rgba(96,165,250,0.55) !important;}
  .hm-rule{width:48px;margin-top:24px;background:rgba(96,165,250,0.4);}

  /* Pill (Victory Moment Executive) — quieter */
  .hm-hero-head [class*="pill"],
  .hm-hero-head > :first-child{filter:saturate(0.92);}

  /* Portrait — cleaner frame, softer depth */
  .hm-portrait{margin-top:8px;}
  .hm-portrait-frame{border-radius:22px;border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 24px 60px -12px rgba(0,0,0,0.55);}
  .hm-portrait-shade{background:linear-gradient(to top,rgba(8,14,31,0.82) 0%,rgba(8,14,31,0.10) 44%,transparent 64%);}
  .hm-portrait-cap{bottom:22px;left:22px;right:22px;}
  p.hm-portrait-name{font-size:17px;font-weight:600;}
  .hm-portrait-role{font-size:9.5px;letter-spacing:0.42em;color:var(--blue-light);}

  /* Badge — minimal chip, no heavy glow */
  .hm-badge{top:14px;right:14px;
    background:rgba(8,14,31,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(96,165,250,0.4);box-shadow:none;
    color:#bcd6fb;font-size:9px;font-weight:700;letter-spacing:0.18em;padding:7px 13px;}

  /* Lead quote */
  .hm-lead{font-size:16px;line-height:1.9;color:rgba(255,255,255,0.5);}

  /* CTA — refined, lighter shadow */
  .hm-cta{padding:17px 32px;font-size:16px;border-radius:16px;
    background:#0a1226;border:1px solid rgba(96,165,250,0.28);
    box-shadow:0 12px 36px -12px rgba(0,0,0,0.5);}
  .hm-cta:active{background:var(--blue);box-shadow:0 12px 36px -8px rgba(59,130,246,0.4);}

  /* Stats — hairline split, calmer */
  .hm-stats{gap:0;padding-top:26px;border-top:1px solid rgba(255,255,255,0.09);
    grid-template-columns:1fr 1fr;}
  .hm-stat{padding-right:18px;}
  .hm-stat:last-child{padding-right:0;padding-left:20px;border-left:1px solid rgba(255,255,255,0.09);}
  .hm-stat-num{font-size:30px;color:#fff;}
  .hm-stat-label{font-size:8.5px;letter-spacing:0.16em;line-height:1.65;color:rgba(255,255,255,0.45);}

  /* ── THE AUTHORITY ──────────────────────────────────────────────── */
  .hm-auth-grid{gap:30px;}
  .hm-textlink{font-size:10.5px;letter-spacing:0.34em;}

  /* Elite card — subtle surface, no nested boxes */
  .hm-elite-card{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.07);
    border-radius:22px;padding:28px 24px;}
  .hm-elite-head{gap:14px;margin-bottom:6px;padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,0.07);}
  .hm-elite-trophy{width:30px;height:30px;color:var(--blue-light);}
  .hm-elite-title{font-size:22px;}
  .hm-elite-sub{font-size:9.5px;letter-spacing:0.3em;color:var(--blue-light);}
  .hm-facts{gap:0;}
  .hm-fact{background:none;border:none;border-radius:0;padding:20px 0 0;}
  .hm-fact + .hm-fact{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.07);}
  .hm-fact-title{font-size:17px;margin-bottom:7px;}
  .hm-fact-desc{font-size:14px;color:rgba(255,255,255,0.5);line-height:1.78;}

  /* Photo strip — refined */
  .hm-strip{gap:12px;margin:32px -24px 0;padding:4px 24px 12px;}
  .hm-strip-item{flex-basis:72%;border-radius:14px;border:1px solid rgba(255,255,255,0.07);}

  /* ── EXPERTISE — borderless minimal rows ────────────────────────── */
  .hm-expertise{background:transparent;border-top:1px solid rgba(255,255,255,0.07);
    border-bottom:1px solid rgba(255,255,255,0.07);}
  .hm-pillars{gap:0;margin-bottom:28px;}
  .hm-pillar{background:none !important;border:none;border-top:1px solid rgba(255,255,255,0.07);
    border-radius:0;padding:22px 2px;gap:18px;}
  .hm-pillars .hm-pillar:first-child{border-top:none;}
  .hm-pillar:active{transform:none;background:rgba(59,130,246,0.05) !important;}
  .hm-pillar-icon{width:42px;height:42px;border-radius:12px;
    background:rgba(59,130,246,0.10);border:1px solid rgba(59,130,246,0.16);}
  .hm-pillar-svg{width:21px;height:21px;color:var(--blue-light);}
  .hm-pillar-title{font-size:17px;letter-spacing:0;}
  .hm-pillar-desc{font-size:13.5px;color:rgba(255,255,255,0.5);line-height:1.6;}
  .hm-pillar-go{width:26px;height:26px;border:none;color:rgba(96,165,250,0.7);}
  .hm-pillar-arrow{width:18px;height:18px;}

  /* ── THE SYNERGY ────────────────────────────────────────────────── */
  .hm-syn-card{background:rgba(59,130,246,0.045);border:1px solid rgba(96,165,250,0.16);
    border-radius:26px;padding:48px 24px;}
  .hm-cta-syn{padding:16px 38px;border-radius:14px;}
  .hm-syn-grid{gap:8px;margin-top:34px;}
  .hm-syn-item{border-radius:12px;border:1px solid rgba(96,165,250,0.12);}

  /* ── UPCOMING EVENT ─────────────────────────────────────────────── */
  .hm-event-card{background:rgba(255,255,255,0.018);border:1px solid rgba(212,175,55,0.2);
    border-radius:24px;}
  .hm-event-body{padding:28px 24px 32px;}
  .hm-event-tag{font-size:15px;}
  .hm-event-desc{font-size:15px;color:rgba(255,255,255,0.58);line-height:1.88;}
  span.hm-chip{padding:7px 15px;font-size:12.5px;background:rgba(212,175,55,0.08);
    border:1px solid rgba(212,175,55,0.16);}
  .hm-event-more{font-size:10.5px;letter-spacing:0.28em;}
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL CHROME — Nav, mobile menu panel, bottom CTA bar (phone only)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){

  /* Top bar — a touch more air, refined logo lockup */
  nav > div{padding:0 20px !important;}
  nav .font-serif{letter-spacing:0.18em !important;}
  nav .font-serif + div{color:#5b6b85 !important;letter-spacing:0.24em !important;
    font-size:9px !important;margin-top:6px !important;}

  /* ── Mobile menu panel — quieter, more editorial ─────────────────── */
  .mobile-nav-panel{
    background:#0a1120 !important;
    padding:104px 26px calc(44px + env(safe-area-inset-bottom)) !important;
    gap:0 !important;
  }
  .mobile-nav-panel > div > button.font-serif,
  .mobile-nav-panel > button.font-serif{
    font-size:21px !important;font-weight:600 !important;
    padding:19px 2px !important;
    border-bottom:1px solid rgba(255,255,255,0.06) !important;
    color:#eef3fb !important;letter-spacing:0.01em !important;
  }
  .mobile-nav-panel > div > div{
    border-left:1px solid rgba(96,165,250,0.35) !important;
    margin:2px 0 12px 2px !important;
    padding:4px 0 12px 16px !important;
  }
  .mobile-nav-panel > div > div button,
  .mobile-nav-panel > div > div a{
    font-size:15px !important;padding:10px 2px !important;
    color:rgba(255,255,255,0.62) !important;
  }
  /* Talks → primary pill, refined */
  .mobile-nav-panel > button.font-serif{
    margin-top:30px !important;
    background:var(--blue) !important;color:#fff !important;
    border-radius:14px !important;border-bottom:none !important;
    font-size:14px !important;font-weight:700 !important;
    letter-spacing:0.14em !important;text-transform:uppercase !important;
    padding:18px 24px !important;justify-content:center !important;
    box-shadow:0 14px 36px -10px rgba(59,130,246,0.5) !important;
  }

  /* ── Bottom CTA bar — premium, minimal ───────────────────────────── */
  .mobile-cta-bar{
    gap:10px !important;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom)) !important;
    background:rgba(8,13,26,0.92) !important;
    backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;
    border-top:1px solid rgba(255,255,255,0.06) !important;
    box-shadow:0 -10px 30px -8px rgba(0,0,0,0.5) !important;
  }
  .mobile-cta-bar button{
    min-height:52px !important;border-radius:14px !important;
    font-family:var(--font-thai) !important;font-weight:600 !important;font-size:15.5px !important;
    letter-spacing:0.01em !important;
  }
  .mcta-ghost{
    background:transparent !important;color:#cdddf7 !important;
    border:1px solid rgba(255,255,255,0.16) !important;
  }
  .mcta-primary{
    flex:1.4 !important;background:var(--blue) !important;color:#fff !important;
    border:none !important;box-shadow:0 8px 22px -6px rgba(59,130,246,0.55) !important;
  }
}

/* ── SMALL PHONE · ≤400px ──────────────────────────────────────────── */
@media (max-width:400px){
  .hm-sec{padding:72px 20px;}
  .hm-hero{padding:92px 20px 56px;}
  .hm-stats{grid-template-columns:1fr;gap:0;}
  .hm-stat{padding:0;}
  .hm-stat + .hm-stat{padding:18px 0 0;margin-top:18px;
    border-left:none;border-top:1px solid rgba(255,255,255,0.08);}
  .hm-stat{flex-direction:row;align-items:baseline;gap:14px;}
  .hm-stat-num{font-size:28px;flex-shrink:0;}
  .hm-syn-grid{grid-template-columns:repeat(3,1fr);}
}