/* Mobile-first shared rendering and interaction layer.
   This is for the public WEBSITE. It does not turn the site into the separate mobile app. */

img[src="assets/masinloc-logo.webp"]{object-fit:contain;image-rendering:auto;-webkit-user-drag:none}
.brand img,.overlay-nav img,.form-header img,.footer-brand img,.admin-logo,.brand-row img{aspect-ratio:320/78;height:auto}

.quick-intro{max-width:680px;margin:-8px auto 26px;padding:0 4px;color:#5E687D;font-size:12px;line-height:1.65;text-align:center}
.hp-field{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;left:-10000px!important;top:auto!important}

/* Phone is the baseline. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
main{min-width:0}
img,video,svg{max-width:100%}
p,li{overflow-wrap:anywhere}
h1,h2,h3{overflow-wrap:normal;text-wrap:balance}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
input,select,textarea,button{font-family:inherit}
input,select,textarea{font-size:16px}
textarea{resize:vertical}
:where(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"]){min-height:44px}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* Long-form pages rely on the viewport as the scroll container. */
:root:has(body.mabayani-page),:root:has(.leader-grid),body.mabayani-page,body:has(.leader-grid){overflow-x:visible}

/* Navigation is designed around a thumb-friendly phone menu first. */
.site-nav,.overlay-nav,.form-header{padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important}
.about-page .site-nav{height:68px!important;min-height:68px}
.site-nav .brand img,.overlay-nav img,.form-header img{width:116px!important;max-width:116px!important}
.menu-toggle,.nav-toggle,.connect-menu-toggle{min-width:48px;min-height:48px}
.primary-nav.open,.home-links.open,#connectPrimaryNav.open{max-height:calc(100dvh - 68px);overflow:auto;overscroll-behavior:contain;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.primary-nav a,.home-links a,#connectPrimaryNav a{min-height:48px;display:flex;align-items:center}

.button,.cta-primary,.cta-secondary,.form-submit,.submit-button,.jobs-primary,.jobs-secondary{min-height:48px}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{max-width:100%;min-height:48px}
table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
pre,code{max-width:100%;overflow-wrap:anywhere}

/* Editorial / information pages: reading rhythm is authored for a phone. */
.about-hero{width:auto!important;padding:44px 16px 38px!important}
.about-hero h1{font-size:clamp(28px,8.7vw,60px)!important;line-height:1.04!important}
.about-hero .lead{margin-top:18px!important;font-size:17px!important;line-height:1.62!important}
.about-photo{width:calc(100% - 32px)!important;margin-inline:auto!important}
.about-body{padding:48px 16px 72px!important}
.about-intro{margin-bottom:44px!important;font-size:21px!important;line-height:1.5!important}
.about-section,.closer-inner,.connect-inner,.start-here{grid-template-columns:1fr!important}
.about-section{gap:14px!important;padding:30px 0!important}
.about-section h2{font-size:20px!important}
.about-section div p{font-size:16px!important;line-height:1.75!important}

/* Contact is a first-class phone form, not a desktop two-column form collapsed late. */
.contact-hero{padding:24px 16px 0!important}
.contact-hero h1{font-size:clamp(26px,8.2vw,54px)!important;line-height:1.05!important}
.contact-hero .lead{font-size:16px!important;line-height:1.62!important}
.contact-body{padding:32px 16px 72px!important;grid-template-columns:1fr!important;gap:42px!important}
.contact-form{padding:22px 16px!important;border-radius:16px!important;box-shadow:none!important}
.field-grid{grid-template-columns:1fr!important;gap:17px!important}
.field.full{grid-column:auto!important}
.field input,.field select,.field textarea{min-height:50px!important;border-radius:11px!important}
.contact-submit{width:100%!important;min-height:50px!important}
.contact-side{padding-top:2px}
.contact-steps li{grid-template-columns:30px 1fr!important;gap:12px!important}
.step-no{width:30px!important;height:30px!important}

/* Breadcrumbs stay compact and readable. */
.crumbs,.jobs-crumbs{font-size:12px!important}
.crumbs{padding-left:16px!important;padding-right:16px!important}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 8px}

/* Jobs and Career remain WEBSITE features and are phone-native. */
.jobs-main,.career-wrap{padding-left:16px!important;padding-right:16px!important;padding-bottom:68px!important}
.jobs-hero{grid-template-columns:1fr!important;gap:18px!important;padding-top:16px!important}
.jobs-hero h1,.career-hero h1{font-size:clamp(26px,8.2vw,50px)!important;line-height:1.05!important}
.jobs-hero p,.career-hero p{font-size:16px!important;line-height:1.62!important}
.jobs-summary{grid-template-columns:1fr!important}
.jobs-summary>div{min-height:68px!important}
.jobs-quickmatch{grid-template-columns:1fr!important;gap:22px!important;padding:22px 16px!important;border-radius:18px!important}
.jobs-quickmatch-form,.career-grid{grid-template-columns:1fr!important}
.quick-field-wide,.career-field.full{grid-column:auto!important}
.jobs-toolbar{grid-template-columns:1fr!important}
.jobs-career-link{width:100%!important}
.jobs-workspace{grid-template-columns:1fr!important;gap:20px!important}
.jobs-detail{position:static!important;top:auto!important;padding:22px 16px!important;border-radius:16px!important}
.jobs-list-head{align-items:flex-end!important}
.jobs-actions,.career-actions,.jobs-quickmatch-actions{display:grid!important;grid-template-columns:1fr!important}
.jobs-actions>*,.career-actions>*,.jobs-quickmatch-actions>*{width:100%!important}
.career-card{padding:22px 16px!important;border-radius:16px!important}

/* Marketplace keeps its editorial directory concept while prioritizing phone scanning. */
.mk-hero,.mk-results,.mk-submit,.mk-detail{padding-left:16px!important;padding-right:16px!important}
.mk-hero{padding-top:24px!important;padding-bottom:28px!important}
.mk-hero h1{font-size:clamp(26px,8.2vw,52px)!important;line-height:1.06!important}
.mk-lead{font-size:16px!important;line-height:1.62!important}
.mk-search{max-width:none!important}
.mk-filters{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;padding-bottom:4px!important;overscroll-behavior-x:contain}
.mk-filters::-webkit-scrollbar{display:none}
.mk-chip{flex:0 0 auto;min-height:46px}
.mk-item>a{grid-template-columns:1fr!important;gap:14px!important;padding:28px 0!important}
.mk-logo{width:132px!important;height:132px!important}
.mk-name{font-size:27px!important}
.mk-desc{font-size:15.5px!important;line-height:1.68!important}
.mk-submit-cta,.mk-detail-cta{display:flex!important;align-items:center;justify-content:center;width:100%!important;min-height:50px}
.mk-facts{grid-template-columns:1fr!important}

/* Masinloc Connect website hub: keep every existing web feature, but give the hub a true phone composition. */
.connect-jobs-band,.connect-paths{padding-left:16px!important;padding-right:16px!important}
.connect-jobs-inner,.connect-paths-inner{grid-template-columns:1fr!important;gap:34px!important}
.connect-jobs-copy h2{font-size:clamp(38px,12vw,54px)!important}
.connect-jobs-actions{display:grid!important;grid-template-columns:1fr!important}
.connect-jobs-primary,.connect-jobs-secondary{width:100%!important;min-height:50px!important}
.connect-path{grid-template-columns:1fr!important;gap:8px!important;padding:23px 0!important}
.connect-path>span{padding-top:0!important}
.connect-path a{grid-column:1!important;margin-top:5px!important;min-height:44px;display:flex;align-items:center}
.quick-choices{padding-top:44px!important;padding-left:16px!important;padding-right:16px!important}
.quick-choices h2{margin-bottom:22px!important}
.quick-grid{grid-template-columns:1fr!important}
.quick-card{min-height:88px}

/* Shared footer is authored as a phone footer. */
.home-footer,.site-footer{padding-left:16px!important;padding-right:16px!important;padding-bottom:max(28px,env(safe-area-inset-bottom))!important}
.home-footer .footer-brand img,.site-footer .footer-brand img{width:128px!important;max-width:128px!important}
.site-footer .footer-main{grid-template-columns:1fr!important;gap:24px!important}
.site-footer .footer-links,.home-footer .footer-nav{display:grid!important;grid-template-columns:1fr!important;gap:0!important}
.site-footer .footer-links a,.home-footer .footer-nav a{display:flex;align-items:center;min-height:44px}
.site-footer .footer-bottom,.home-footer .footer-bottom{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
.site-footer .footer-bottom span:last-child{text-align:left!important}

/* Homepage specificity repair. */
.home .hero-cta .cta-primary{background:var(--yellow);color:var(--navy-deep)}

/* Progressive enhancement: tablet. */
@media(min-width:600px){
  .site-nav,.overlay-nav,.form-header{padding-left:max(22px,env(safe-area-inset-left))!important;padding-right:max(22px,env(safe-area-inset-right))!important}
  .site-nav .brand img,.overlay-nav img,.form-header img{width:120px!important;max-width:120px!important}
  .about-hero{padding-left:24px!important;padding-right:24px!important}
  .about-photo{width:calc(100% - 48px)!important}
  .about-body,.contact-hero,.contact-body,.crumbs,.jobs-main,.career-wrap,.mk-hero,.mk-results,.mk-submit,.mk-detail{padding-left:24px!important;padding-right:24px!important}
  .contact-form{padding:28px 24px!important}
  .jobs-summary{grid-template-columns:1fr 1fr!important}
  .site-footer .footer-links,.home-footer .footer-nav{grid-template-columns:1fr 1fr!important;gap:0 20px!important}
  .connect-jobs-band,.connect-paths,.quick-choices{padding-left:24px!important;padding-right:24px!important}
}

/* Progressive enhancement: desktop restores the richer multi-column compositions. */
@media(min-width:801px){
  .site-nav,.overlay-nav,.form-header{padding-left:clamp(24px,4vw,52px)!important;padding-right:clamp(24px,4vw,52px)!important}
  .site-nav .brand img,.overlay-nav img,.form-header img{width:auto!important;max-width:none!important}
  .about-page .site-nav{height:auto!important;min-height:0}
  .about-hero,.about-body,.about-photo,.contact-hero,.contact-body,.crumbs,.jobs-main,.career-wrap,.mk-hero,.mk-results,.mk-submit,.mk-detail{padding-left:clamp(20px,5vw,48px)!important;padding-right:clamp(20px,5vw,48px)!important}
  .about-photo{width:auto!important}
  .about-section{grid-template-columns:minmax(150px,.38fr) minmax(0,1fr)!important}
  .contact-body{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important}
  .contact-form{padding:clamp(22px,3vw,38px)!important;box-shadow:0 20px 48px -34px rgba(6,26,70,.4)!important}
  .field-grid{grid-template-columns:1fr 1fr!important}
  .field.full{grid-column:1/-1!important}
  .jobs-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .jobs-quickmatch-form,.career-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .quick-field-wide,.career-field.full{grid-column:1/-1!important}
  .jobs-workspace{grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr)!important}
  .jobs-detail{position:sticky!important}
  .mk-item>a{grid-template-columns:168px minmax(190px,.9fr) minmax(0,1.35fr)!important}
  .mk-logo{width:168px!important;height:168px!important}
  .mk-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mk-submit-cta,.mk-detail-cta{display:inline-flex!important;width:auto!important}
  .connect-jobs-inner{grid-template-columns:minmax(0,1.25fr) minmax(300px,.65fr)!important}
  .connect-paths-inner{grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr)!important}
  .connect-path{grid-template-columns:130px minmax(0,1fr) auto!important;gap:26px!important}
  .connect-path a{grid-column:auto!important;margin-top:0!important}
  .connect-jobs-actions{display:flex!important;grid-template-columns:none!important}
  .connect-jobs-primary,.connect-jobs-secondary{width:auto!important}
  .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .site-footer .footer-links,.home-footer .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(hover:none){a:hover,button:hover{transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}


/* --- mobile display type ------------------------------------------------

   Every display clamp on this site was written clamp(MIN, vw, MAX) with a MIN
   taken from the desktop scale. On a phone the floor wins every time, so
   clamp() never got to do its job and the viewport term never governed: the
   homepage hero resolved to 59px and the page headings to 43-51px against a
   390px screen. That is a desktop scale shrunk to fit, which is what makes a
   responsive site still feel like a desktop site.

   The floors above are now phone-sized and each clamp keeps its original MAX,
   so every width from roughly 640px up resolves exactly as it did before.
   Desktop composition is untouched by design, not by luck. */
@media(max-width:760px){
  .hero h1{font-size:clamp(32px,10.4vw,56px)!important;line-height:.96!important}
  .hero-tagline{font-size:clamp(18px,4.6vw,25px)!important}
  .start-here h2,.closer-preview h2,.connect-preview h2{
    font-size:clamp(25px,7.4vw,40px)!important;line-height:1.1!important;
  }
  /* Editorial statement copy set at display size reads as shouting on a
     phone. It keeps its emphasis at a size that still fits the measure. */
  .community-statement p,.about-closing p{
    font-size:clamp(19px,5vw,30px)!important;line-height:1.36!important;
  }
}