/* Rama v2 responsive handoff, with fluid sizing for compact phones. */
.lang-pill{display:none}
.nav-toggle{flex-shrink:0}
.nav-toggle span{transition:transform .2s ease,opacity .2s ease}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.slide{margin-block:0}
.st-status{flex-wrap:wrap;white-space:normal}
.sec-card-logo .sic{flex:0 0 auto;width:104px;height:104px;border-radius:20px;margin-bottom:0}
.sec-card-logo .sic svg{width:44px;height:44px}
.car-btn{width:44px;height:44px;flex-shrink:0}
.sec-dots button,.dots button{position:relative}
.sec-dots button::after,.dots button::after{content:"";position:absolute;inset:-8px -3px}
.ft-col a,.ft-legal a,.ft-li{padding-block:4px;margin-block:-4px}
.more{padding-block:8px;margin-block:-4px}
.mod-meta .more,.cause-card .sub .more{padding-block:6px;margin-block:-6px}

/* Switch the whole navigation together, before the desktop items get crowded. */
@media(max-width:860px){
  .nav .wrap{height:64px;gap:16px}
  .nav .wrap>a{min-width:0}
  .brand-logo{height:30px;max-width:100%;object-fit:contain}
  .nav-right{gap:0;flex-shrink:0}
  .nav-right .lang,.nav-right>.btn,.nav-links{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:64px;gap:8px;padding:12px 24px 20px;background:#fff;border-bottom:1px solid var(--line-soft);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;box-shadow:0 16px 32px -16px rgba(16,24,40,.18)}
  .nav.open .nav-links>a{display:flex;align-items:center;min-height:44px;padding:10px 12px}
  .nav.open .nav-cta-m{justify-content:center;color:#fff}
  .nav.open .lang-pill{display:flex;align-self:stretch;gap:4px;padding:4px;margin-top:4px;border:1px solid var(--line);border-radius:999px;background:#fff}
  .nav-links .lang-pill a{display:flex;align-items:center;justify-content:center;flex:1;min-height:44px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink-2)}
  .nav-links .lang-pill a[aria-current="true"]{background:var(--brand);color:#fff}
  .subnav{top:64px}
  .subnav a{display:inline-flex;align-items:center;min-height:44px}
}

@media(max-width:720px){
  .wrap{padding-inline:clamp(16px,4.5vw,24px)}
  .hero .wrap,.cu-grid,.fc>div,.slide-cap>div{min-width:0}
  .h1,.h2,.tile-h{overflow-wrap:anywhere}
  body .h1,body :is(.phero,.subhero) .h1{font-size:clamp(32px,8.8vw,38px);line-height:1.12}
  html[lang="id"] body .h1{font-size:clamp(32px,8.5vw,36px)}
  body :is(.h2,.tile-h){font-size:clamp(26px,7.5vw,32px);line-height:1.16}
  body :is(.lead,.phero .lead,.subhero .lead){font-size:clamp(16px,4.4vw,18px);line-height:1.55}
  .hero .lead{margin-top:18px}
  .hero-cta{margin-top:24px}
  .hero .wrap{gap:28px}

  /* Consistent section rhythm; short viewports do not need desktop-size gaps. */
  body main>section{padding:48px 0 0}
  body main>section:last-child,
  body main>section:has(+ :is(.challenge-band,.startpoint,.closing,.contact)),
  body main>section.mod{padding-bottom:48px}
  body main>section:first-child{padding-top:32px}
  body main>section:is(.challenge-band,.startpoint,.closing,.contact,.cta-band),
  body>section:is(.challenge-band,.startpoint,.closing,.contact,.cta-band){padding:48px 0}
  body footer.ft{padding-top:40px}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-col a,.ft-col span,.ft-col b,.ft-li{overflow-wrap:anywhere}
  .ft-li{min-width:0}
  .ft-li svg{flex-shrink:0}

  .btn{white-space:normal;text-align:center;justify-content:center;height:auto;min-height:48px;padding:10px 18px}
  .btn svg{flex-shrink:0}
  .form .btn{height:auto;min-height:48px}
  :is(.hero-cta,.ctrl-cta,.closing-cta,.cta-band .btns){display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;align-self:stretch}
  :is(.hero-cta,.ctrl-cta,.closing-cta,.cta-band .btns)>.btn{width:100%;justify-content:center}
  .fld input,.fld textarea,.fld select{font-size:16px}

  /* Keep the document legible without letting it dominate the phone screen. */
  .st{grid-template-columns:minmax(0,1fr);gap:16px;padding:0}
  .st-file{position:static;justify-self:center;width:fit-content;max-width:100%;min-width:0;font-size:12px;white-space:nowrap}
  .st-file .dot{flex-shrink:0}
  .st-file b{flex-shrink:0}
  .st-file span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .st-doc{width:min(100%,clamp(240px,68vw,320px));justify-self:center;transform:none}
  .st-fields{gap:10px}
  .fc{padding:10px 12px;gap:10px}
  .fc .v{overflow-wrap:anywhere}
  .fc .conf{flex-shrink:0}
  .st-status{flex-wrap:wrap;white-space:normal;padding-top:2px;gap:6px}
  .kb-tags{justify-content:center;gap:6px}
  .kb-tag{font-size:12px;padding:6px 11px;white-space:nowrap}
  .tv-ex .field{width:172px;transform:scale(.88);transform-origin:right center}
  .tv-ex .field>div{min-width:0}
  .tv-ex .field .conf{flex:none}
  .tv-ex .f1,.tv-ex .f2{right:-4px}
  .slide{width:100%;margin-left:-50%}
  .prin,.ctrl{padding:24px 20px}
  body :is(.fc .k,.fc .conf,.st-status .pill,.tv-ex .field .k,.field .conf,.t .pill,.tv-as .crow .k,.tv-as .crow .v,.route-bar .pill,.cause-card .tag,.impact .lbl,.bv-cap,.bviz-note,.bv-r code,.slide-cap .n,.prin .sub){font-size:12.5px}
  .subnav .wrap{padding:0 8px;gap:2px}
  .subnav a{padding:6px}
  .cu-viz{padding-top:88px}
  .cu-plane{top:24px;left:24px;z-index:2}
  .consent-banner{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto}
  .consent-actions{flex-wrap:wrap}
}

@media(max-width:520px){
  /* The tallest card sets the row height, including when text is enlarged. */
  .sec-stack{display:grid;height:auto;padding-block:12px}
  .sec-slide{position:relative;grid-area:1/1;top:auto;left:auto;height:auto;min-height:300px;margin:0 auto}
  .sec-card-logo{flex-direction:column;align-items:flex-start}
  .sec-card-logo .sic{width:80px;height:80px;border-radius:16px}
  .sec-card-logo .sic svg{width:34px;height:34px}
  .sec-ctl,.car-ctrl{flex-direction:column;gap:16px}
  .car-ctrl{margin-top:24px}
  .tile-copy,.tile-wide .tile-copy{padding:28px 20px 16px}
  .tiles-kb .tile-copy{padding:28px 20px 24px}
  .tile-p{font-size:16px}
  .cu-viz{padding:80px 24px 32px;min-height:0}
  .cu-mail{padding:16px}
  .cu-row{flex-direction:column;gap:4px}
  .cu-row .k{flex-basis:auto}
  .cu-row .v{min-width:0;max-width:100%}
  .cu-sent{max-width:calc(100% + 28px)}
  .cu-sent i{flex-shrink:0}
}