/* PANIN Market Outlook 2027 - mobile design matched to assets/preview/mobile/microsite mobile HQ.pdf.
   All section backgrounds and photography are the supplied genuine local assets. */
@media (max-width:767px){
  :root{--page-padding:clamp(23px,7.2vw,36px);--body-font:'Panin Helvetica',Arial,sans-serif;--display-font:'Panin Canela',Georgia,serif}
  html{scroll-padding-top:88px}
  body{font-family:'Panin Helvetica',Arial,sans-serif;overflow-x:clip}
  .site-header{top:24px}
  .nav-shell{width:min(83%,430px);min-height:52px;align-items:center;border:1px solid rgba(255,255,255,.95);border-radius:40px;background:linear-gradient(180deg,#f4f8f8ed,#dfe9eaf0);box-shadow:0 4px 10px rgba(0,69,79,.35),inset 0 2px 4px white}
  .brand{flex:1 1 auto;width:0;max-width:calc(100% - 55px);padding:0 0 0 17px;min-width:0}
  .brand-logo{width:min(100%,206px);max-height:39px;object-fit:contain;object-position:left center}
  .menu-toggle{margin:0 6px 0 0;width:45px;height:49px;flex:0 0 45px;gap:4px}
  .menu-toggle span{width:20px;height:2px;background:#008f9f}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .navigation{top:calc(100% + 13px);width:min(47vw,226px);border-radius:8px;background:#1c5c70;box-shadow:0 7px 17px #00374766}
  .nav-link{font:400 14px/1.2 'Panin Helvetica',Arial,sans-serif;min-height:43px;padding:12px 10px}
  .nav-link.is-active{background:#099eaf}
  .page-section{min-height:100svh;height:auto;padding:clamp(118px,15vh,148px) 0 80px;background-position:center center;background-repeat:no-repeat;background-size:100% 100%;overflow:visible}
  .section-container{width:100%;padding-inline:var(--page-padding);max-width:590px;margin-inline:auto}
  .section-heading{font:700 clamp(31px,8.6vw,40px)/1.08 'Panin Canela',Georgia,serif;letter-spacing:-.3px;margin:0 0 26px}
  .section-home{padding:0;min-height:100svh;display:block;background-image:url('../assets/images/bg-mobile-welcome-to.png');color:#235c6b}
  .section-about{background-image:url('../assets/images/bg-mobile-about.png');background-position:center top}
  .section-speakers{background-image:url('../assets/images/bg-mobile-ask-speakers.png')}
  .section-profile{background-image:url('../assets/images/bg-mobile-ask-speakers.png')}
  .section-schedule{background-image:url('../assets/images/bg-mobile-event-schedule.png')}
  .section-venue{background-image:url('../assets/images/bg-mobile-venue.png');color:#215969}
  .section-gallery{background-image:url('../assets/images/bg-mobile-gallery.png')}
  .section-qa{background-image:url('../assets/images/bg-mobile-ask-speakers.png')}
  .section-contact{background-image:url('../assets/images/bg-mobile-contact-us.png')}
  /* Welcome */
  .hero-content{position:absolute;top:35%;left:50%;transform:translateX(-50%);padding:0 6px;text-align:center;width:100%;max-width:500px}
  .hero-eyebrow{font:700 clamp(23px,6.8vw,33px)/1.1 'Panin Canela',Georgia,serif;color:#505051}
  .hero-title{display:flex;flex-direction:column;align-items:center;margin:4px 0 0;white-space:nowrap;letter-spacing:0}
  .hero-market{font:900 clamp(46px,16.3vw,78px)/.99 'Panin Helvetica',Arial,sans-serif;letter-spacing:-2.2px;color:#cc1e31;transform:none}
  .hero-outlook{font:900 clamp(30px,9.4vw,46px)/1.0 'Panin Helvetica',Arial,sans-serif;display:flex;align-items:center;justify-content:center;letter-spacing:-1.4px;color:#0799a8}
  .outlook-infinity{flex:0 0 clamp(47px,13.9vw,70px);width:clamp(47px,13.9vw,70px);height:clamp(26px,7vw,34px);margin:0 2px 9px 3px;line-height:1;display:inline-flex;align-items:center;transform:none}
  .outlook-infinity img{width:100%;height:100%;object-fit:contain}
  .hero-year{margin-left:6px;letter-spacing:-1.2px}
  .hero-rule{width:min(54%,215px);height:2px;margin:9px auto 14px;background:#c62941 url('../assets/images/line.png') center/100% 100% no-repeat}
  .hero-date{font:400 clamp(12px,3.25vw,16px)/1.5 'Panin Helvetica',Arial,sans-serif;color:#1b5a6a}
  .hero-date strong{font-weight:700}
  /* About */
  .section-about{padding-top:clamp(115px,14vh,140px);padding-bottom:48px}
  .section-about .section-heading{margin-bottom:23px}
  .about-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .about-copy h3{font:800 clamp(21px,5.9vw,28px)/1.12 'Panin Helvetica',Arial,sans-serif;margin:0 0 22px}
  .about-copy p{font:400 clamp(13px,3.55vw,16px)/1.3 'Panin Helvetica',Arial,sans-serif;text-align:justify;margin:0 0 14px;max-width:none}
  .about-copy p:last-child{margin-bottom:0}
  .about-photos{margin-top:30px;padding:0}
  .about-photos h3{font:700 clamp(16px,4.1vw,19px)/1.2 'Panin Helvetica',Arial,sans-serif}
  .about-photos p{font-size:12px;margin:2px 0 11px}
  .about-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .about-photo-grid img{width:100%;height:auto;aspect-ratio:1.65;object-fit:cover;border-radius:6px;filter:drop-shadow(1px 2px 2px #00374755)}
  /* Speakers */
  .section-speakers .section-heading{margin-bottom:23px}
  .speaker-grid{display:flex;flex-direction:column;align-items:center;gap:22px;margin:0;padding:0 0 30px}
  .speaker-card{width:min(73%,300px);aspect-ratio:1.06;height:auto;min-height:0;border:0;border-radius:24px;box-shadow:none;background:transparent url('../assets/images/card.png') center/100% 100% no-repeat;padding:25% 8% 12%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .speaker-card::before,.speaker-glimmer{display:none}
  .speaker-card h3{font:700 clamp(17px,5vw,23px)/1.1 'Panin Helvetica',Arial,sans-serif;white-space:nowrap;margin:0 0 9px}
  .speaker-card p{font:400 clamp(11px,3.1vw,14px)/1.3 'Panin Helvetica',Arial,sans-serif;margin:0 0 13px}
  .speaker-card .small-button{padding:8px 13px;font-size:11px;margin:auto auto 0}
  /* Profile */
  .section-profile{padding:clamp(140px,18vh,180px) 0 75px}
  .profile-title{display:none}
  .profile-card{width:100%;max-width:470px;margin:0 auto;border:1.5px solid rgba(255,255,255,.9);border-radius:32px;padding:20px 19px 22px;background:linear-gradient(165deg,#1596a6c4,#078c9dc9);box-shadow:inset 0 1px 3px #ffffff33;font:400 clamp(12px,3.3vw,15px)/1.36 'Panin Helvetica',Arial,sans-serif}
  .profile-card::before{content:'Winston S.A. Sual';display:block;text-align:center;font:700 clamp(20px,5.4vw,26px)/1.2 'Panin Helvetica',Arial,sans-serif;margin-bottom:20px}
  .profile-photo{float:left;width:37%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:0 13px 6px 0}
  .profile-card p{font:inherit;margin:0 0 19px;text-align:justify}
  .profile-card p:nth-of-type(2){clear:both;margin:14px 0 19px}
  .profile-card .back-link{font-size:11px;padding:8px 10px;margin:4px auto 0}
  /* Event schedule */
  .section-schedule .section-heading{margin-bottom:25px}
  .schedule-intro{margin:0 0 26px;gap:3px}
  .schedule-intro strong{font:700 clamp(20px,5.5vw,25px)/1.04 'Panin Helvetica',Arial,sans-serif}
  .schedule-intro span{font-size:13px}
  .timeline{display:flex;flex-direction:column;gap:0;margin:0 0 0 11px;padding:0}
  .timeline::before{left:0;right:auto;top:7px;bottom:7px;width:3px;height:auto}
  .timeline-item{padding:0 0 26px 27px;min-width:0}
  .timeline-dot{left:-5px;top:2px;width:13px;height:13px}
  .timeline-content{font:400 clamp(13px,3.5vw,16px)/1.23 'Panin Helvetica',Arial,sans-serif}
  .timeline-content strong{font-weight:700}
  .timeline-content>span{display:block;margin-top:2px}
  .schedule-speakers{display:flex;align-items:flex-start;justify-content:flex-start;gap:18px;margin:21px 0 0;padding:0;border:0;min-height:0}
  .schedule-person{font-size:12px;line-height:1.15;text-align:center}
  .schedule-person img{display:block;width:clamp(68px,19vw,93px);height:auto;aspect-ratio:1;object-fit:contain;margin:0 auto 8px}
  .schedule-person strong{font-size:12px}
  .desktop-only{display:none}
  .timeline-item:last-child{padding-bottom:0}
  /* Venue */
  .section-venue .section-heading{margin-bottom:22px}
  .venue-grid{display:flex;flex-direction:column;gap:25px}
  .venue-details h3{font:700 clamp(19px,5vw,24px)/1.16 'Panin Helvetica',Arial,sans-serif;margin:0}
  .venue-details .caps{font-size:12px;margin:3px 0 22px}
  .venue-detail-row{gap:17px;margin-bottom:14px;font:700 clamp(15px,4vw,19px)/1.16 'Panin Helvetica',Arial,sans-serif}
  .detail-icon{flex:0 0 35px;width:35px;height:auto}
  .detail-icon img{width:35px;height:37px;object-fit:contain}
  .map-embed{aspect-ratio:2.15;border-radius:6px}
  .map-panel .map-button{font-size:11px;padding:9px 11px;margin-top:13px}
  /* Gallery */
  .section-gallery .section-heading{margin-bottom:28px}
  .gallery-layout{display:flex;flex-direction:column-reverse;gap:23px}
  .gallery-preview-wrap{width:100%}
  .gallery-preview{display:block;width:100%}
  .gallery-preview img{display:block;width:100%;height:auto;aspect-ratio:1.4;object-fit:cover;object-position:center;border-radius:10px;box-shadow:3px 5px 7px #004c5890}
  .gallery-thumbnails{display:flex;gap:16px;width:calc(100% + (var(--page-padding) * 2));margin-left:calc(-1 * var(--page-padding));padding:2px var(--page-padding) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border:0}
  .gallery-thumbnails::-webkit-scrollbar{display:none}
  .gallery-thumb{flex:0 0 42%;width:auto;height:auto;aspect-ratio:1.12;border:0;border-radius:7px;overflow:hidden;scroll-snap-align:center}
  .gallery-thumb img{height:100%;width:100%;object-fit:cover}
  .gallery-mobile-controls{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:5px}
  .gallery-dots{gap:8px}
  .gallery-dots button{width:8px;height:8px}
  .gallery-arrow{font-size:23px;padding:3px 8px}
  /* Ask questions */
  .section-qa .section-heading{margin-bottom:26px}
  .qa-subtitle{font:700 clamp(20px,5.4vw,25px)/1.12 'Panin Helvetica',Arial,sans-serif;max-width:340px;margin:0 0 26px}
  .question-form{display:flex;flex-direction:column;gap:0}
  .question-form label{font-size:14px;margin:0 0 6px}
  .question-form input,.question-form select,.question-form textarea{font-size:14px;padding:11px 12px;border-radius:3px}
  .question-form input{height:41px;margin-bottom:25px}
  .question-form select{height:42px;margin-bottom:26px}
  .question-form textarea{height:130px;min-height:100px}
  .form-submit{height:44px;min-height:44px;font-size:13px;margin-top:18px;padding:10px}
  .form-note{font-size:11px;line-height:1.25;margin-top:12px}
  /* Contact */
  .section-contact .section-heading{margin-bottom:24px}
  .contact-grid{display:flex;flex-direction:column;gap:33px}
  .contact-details h3{font:700 clamp(20px,5.4vw,25px)/1.2 'Panin Helvetica',Arial,sans-serif;margin:0 0 5px}
  .contact-details address{font:400 clamp(12px,3.2vw,16px)/1.43 'Panin Helvetica',Arial,sans-serif}
  .contact-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px;row-gap:13px;margin-top:24px}
  .contact-links a{display:flex;align-items:center;white-space:normal;overflow-wrap:anywhere;min-width:0;gap:6px;font:700 clamp(9px,2.45vw,12px)/1.12 'Panin Helvetica',Arial,sans-serif}
  .contact-icon{display:block;flex:0 0 27px;width:27px;height:27px;border:0;border-radius:0;background:transparent}
  .contact-icon img{width:100%;height:100%;object-fit:contain}
  .contact-map{padding-top:0}
  .contact-map .map-embed{aspect-ratio:2.1}
  .contact-map .map-button{margin-top:15px}
}
/* Smaller phones */
@media (max-width:360px){
 .brand{padding-left:12px}
 .brand-logo{max-height:31px}
 .section-container{--page-padding:20px}
 .speaker-card{width:80%}
 .about-copy p{font-size:12px}
 .contact-links a{font-size:9px}
 .contact-icon{flex-basis:24px;width:24px;height:24px}
 .hero-market{font-size:clamp(44px,15.5vw,56px)}
 .hero-outlook{font-size:clamp(28px,9vw,33px)}
}
/* Intermediate screen sizes retain desktop grid where available. */
@media (min-width:768px) and (max-width:1050px){.brand-logo{width:min(100%,150px);height:auto}}