/* ===== Stage 10: spacing, symmetry and mobile layout ===== */

/* --- one spacing rule: generous room between the header and the first content on every page --- */
.hx{min-height:min(92vh,840px)}
.hx-in{padding-top:clamp(96px,13vh,150px);padding-bottom:170px}
.hx-kicker{margin-bottom:6px}
main>section:first-child:not(.hx){padding-top:clamp(72px,9vw,120px)}

/* --- Reports: framework highlight on the right; method cards on white --- */
.glass-sec.gs-right::before{left:auto;right:-160px;top:-160px}
.glass-sec.gs-right::after{right:auto;left:-160px;bottom:-240px}
.sec.method-sec{background:#fff;padding-top:clamp(48px,6vw,80px)}
.method-sec .method{margin-top:0}
.method-sec .method div{background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:14px;padding:24px 26px}
.method-sec .method h3{font-size:18px;color:var(--navy)}

/* --- Thailand at a glance: panel fills cleanly, no inset box --- */
.gl-panel .gl-view.on{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:none}
.gl-panel{overflow:hidden}
.gl-view{width:100%;min-width:0}
.gl-item{transition:border-color .2s,background-color .2s}
.gl-item:hover{background:#FAFCFB}

/* --- header: one tidy row on tablets and phones --- */
.nav .nav-cta{display:none}
@media (max-width:980px){
  .bar{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .brand{flex:1 1 auto;min-width:0}
  .right{order:2;width:auto;margin-left:0;flex:0 0 auto;gap:10px}
  .bar .right .btn{display:none}
  .menu-btn{order:3;margin-left:0}
  .nav{order:5}
  .nav.open{padding:8px 0 4px;border-top:1px solid var(--line);margin-top:4px}
  .nav.open a{min-height:48px;border-bottom:1px solid var(--line)}
  .nav .nav-cta{display:flex;justify-content:center;margin-top:12px;border-bottom:0!important;background:var(--accent);color:#fff!important;border-radius:8px;font-weight:600}
  .lang-sw{white-space:nowrap;flex-wrap:nowrap}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .brand{font-size:19px;gap:8px}
  .brand img{width:32px;height:32px}
  .lang-sw>*{padding:5px 9px}
  .menu-btn{min-height:40px;padding:0 14px}
  .top.scrolled .bar{padding-top:8px;padding-bottom:8px}
}

/* --- glance on phones: a symmetric grid of figures, charts that fit --- */
@media (max-width:640px){
  .gl-list{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;overflow:visible!important;padding:0}
  .gl-item{flex:none!important;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 14px 16px;min-width:0}
  .gl-item:last-child:nth-child(odd){grid-column:1/-1}
  .gl-n{min-width:0;font-size:22px}
  .gl-l{font-size:13.5px;line-height:1.3}
  .gl-s{display:none}
  .gl-panel{padding:24px 18px 22px;border-radius:16px}
  .gl-vt{font-size:19px}
  .hb{grid-template-columns:1fr auto;column-gap:12px;row-gap:8px}
  .hb-l{grid-column:1/-1;font-size:14px}
  .gl-view[data-view="reach"] .hb{padding:8px 0}
  .hb-v{font-size:16px}
  .cols{gap:12px;height:190px;padding:10px 0 0}
  .col{flex:0 0 30%}
  .col-v{font-size:15px}
  .growth{flex:1 1 0;min-width:0;margin-left:0}
  .growth b{font-size:28px}
  .growth svg{width:76px;height:28px}
  .route{grid-template-columns:1fr}
  .route-n{font-size:40px}
  .donut-w{grid-template-columns:1fr;justify-items:center;gap:20px}
  .donut{width:180px;height:180px}
  .donut-c b{font-size:36px}
  .side-stat{width:100%}
}

/* --- general phone hygiene: nothing wider than the screen, even gutters, centred blocks --- */
@media (max-width:640px){
  html,body{overflow-x:hidden}
  img,svg,video,iframe,table{max-width:100%}
  .table-wrap,.tbl,table{display:block;overflow-x:auto}
  .actions{gap:10px}
  .actions .btn{flex:1 1 100%}
  .cta{gap:22px}
  .cta-actions,.cta-form{width:100%;max-width:none}
  .cta-form .btn{width:100%}
  h1{word-break:normal;overflow-wrap:anywhere}
  .usp{padding:24px 20px}
  .usp-stats{grid-template-columns:1fr 1fr;gap:16px}
  .cost-viz{padding:22px 18px}
  .cv-bar b{font-size:16px}
  .method-sec .method div{padding:20px}
}

/* glance: room for the year labels under the columns; views size to their content */
.cols{margin-bottom:34px}
@media (max-width:640px){.gl-view{height:auto}.gl-panel{display:flex;flex-direction:column}}

/* phone header: logo, language and a compact menu button on one row */
@media (max-width:640px){
  .bar{flex-wrap:wrap;column-gap:10px}
  .brand{font-size:17px;white-space:nowrap;overflow:hidden}
  .brand span{overflow:hidden;text-overflow:ellipsis}
  .lang-sw{font-size:12.5px}
  .lang-sw>*{padding:5px 8px}
  .menu-btn{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;font-size:0;position:relative}
  .menu-btn::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
  .menu-btn[aria-expanded="true"]::before{box-shadow:none;transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"]::after{content:"";position:absolute;width:18px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-45deg)}
}