/* Tam supplier recruitment: original visual assets, shared mobile layout. */
:root{--muted:#625f59}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b78a45;outline-offset:3px}
.uiIcon{width:22px;height:22px;flex:none;vertical-align:middle}
.top{position:relative;padding-top:18px}.iconBtn,.close{min-width:44px;min-height:44px}
.location{margin-top:14px}.location b{font-size:15px}.location small{font-size:12px}
.hero{margin-top:8px;min-height:0;padding:24px;border-radius:24px}.hero:after{display:none}
.ey{font-size:12px;line-height:1.8;opacity:1;color:#dae6de}.hero h1{font-size:34px;line-height:1.5;margin:6px 0}
.hero p{font-size:14px;line-height:1.9;max-width:350px;opacity:1;color:#e0ece5}
.hero .specialistNote{font-size:12px;margin-top:14px;position:relative;line-height:1.9}
.supplierCTA{display:flex;justify-content:space-between;align-items:center;position:relative;min-height:50px;padding:12px 18px;border-radius:14px;background:#e4c18c;color:#172f27;text-decoration:none;font-weight:700;font-size:16px}
.head span{font-size:12px}.head h2{font-size:20px}.head{gap:12px;align-items:center}
.service{padding:13px;text-align:right;min-height:190px;border-radius:20px;display:flex;flex-direction:column;align-items:stretch;background:#fffefa}
.serviceTop{display:flex;justify-content:space-between;align-items:center;color:var(--green)}
.serviceCount{font-size:11px;background:#f1ede5;padding:5px 8px;border-radius:9px}.serviceTop .uiIcon{width:18px;height:18px}
.serviceArt{display:block;width:100%;height:76px;object-fit:contain;margin:7px 0}.service b{font-size:16px;margin:2px 0 4px;line-height:1.6}.service small{font-size:12px;line-height:1.8}
.service-soil{background:#fcf5ed}.service-equipment{background:#fffbf2}.service-haulage{background:#f4f9f5}
.prov{font-size:13px;min-height:44px}.nav button{font-size:12px;min-height:48px}
.panel{padding-top:20px;padding-bottom:max(26px,env(safe-area-inset-bottom));line-height:1.8}.panel p,.authbox p,.oauthNote{font-size:14px;line-height:1.9}
.panel label{font-size:14px}.panel h2{font-size:23px;line-height:1.6}.panel h3{font-size:18px}.panel .input{font-size:16px;min-height:48px}
.modebar,.connbar{margin:14px 0}.modebar button{font-size:13px;min-height:44px}.connbar b{font-size:13px}.connbar small{font-size:12px;overflow-wrap:anywhere}
.miniBtn{min-height:44px;font-size:13px}.btn{min-height:48px;font-size:15px}.empty,.mapStatus,.statusText{font-size:13px;line-height:1.9}
.grow b{font-size:14px}.grow small{font-size:12px;line-height:1.8;white-space:normal}.badge{font-size:11px}.toast{font-size:14px;z-index:1400;max-width:90%;width:max-content}
#accountSheet{z-index:1100}#requiredPhoneSheet{z-index:1200}
.transportChoices label{min-height:44px;display:flex;align-items:center;gap:8px}.transportChoices input{width:18px;height:18px;flex:none}
@media(max-width:360px){.hero{padding:20px}.hero h1{font-size:30px}.service{padding:11px}.service b{font-size:14px}.services{gap:10px}}

/* Photographic identity: people, material and work, with quiet interface controls. */
.app{background:#faf9f5}.top{background:#faf9f5}.location{box-shadow:none;border-radius:12px}
.photoHero{padding:0!important;border-radius:14px;overflow:hidden;background:#15382f;box-shadow:none;margin-top:6px}
.photoHero:before,.photoHero:after{display:none}
.homeStoryPhoto{display:block;width:100%;height:auto;aspect-ratio:2.05;object-fit:cover;object-position:34% 39%}
.homeStoryText{padding:19px 21px 17px}.photoHero .ey{font-size:11px;color:#c1d0c4;letter-spacing:0}
.photoHero h1{font-size:25px;line-height:1.55;margin:7px 0;max-width:none}.photoHero h1 span{color:#e1c18b;font-weight:500}
.photoHero p{font-size:13px;line-height:1.9;margin:7px 0 13px}.photoHero .specialistNote{font-size:11px;margin-top:10px}
.supplierCTA{border-radius:8px;min-height:45px;padding:10px 14px;font-size:14px}
.service{border-radius:12px;background:#fff!important;padding:0!important;min-height:0;overflow:hidden;box-shadow:none;border-color:#e0e4dd}
.serviceArt{margin:0;width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;object-position:center;display:block}
.serviceInfo{padding:12px 12px 14px;display:block}.serviceTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:5px}.serviceTitle .uiIcon{width:17px;height:17px;margin-top:5px}
.service b{font-size:15px;line-height:1.65;margin:0 0 4px}.service small{font-size:11px;color:#657065;line-height:1.85}
.serviceCount,.serviceTop{display:none}.nav{box-shadow:none}.nav button i{height:24px;display:grid;place-items:center}.nav .uiIcon{width:22px;height:22px}
.iconBtn{border-radius:12px;display:grid;place-items:center}.rIco{border-radius:12px;background:#eef1ea;color:#365247}.pin{background:#edf0e9;border-radius:10px}
.card,.supplierHero,.adminHero{box-shadow:none;border-radius:14px}.btn,.input{border-radius:10px}.panel{border-radius:18px 18px 0 0}
@media(max-width:360px){.homeStoryText{padding:17px}.photoHero h1{font-size:22px}.serviceInfo{padding:10px}.service b{font-size:13px}}

/* Shared Arabic typography, served locally with the native web bundle. */
.photoHero h1{font-size:27px;font-weight:700;line-height:1.5;letter-spacing:normal}
.photoHero h1 span{font-weight:600}.photoHero .ey{font-size:12px;font-weight:500}
.photoHero p{font-size:15px;line-height:1.85}.photoHero .specialistNote{font-size:12px}
.supplierCTA{font-size:15px;font-weight:600}.service b{font-size:16px;font-weight:700;line-height:1.6}
.service small{font-size:13px;line-height:1.8}.serviceTitle{gap:7px}.nav button{font-size:13px;font-weight:500}.nav button.active{font-weight:600}
.btn,.miniBtn,.googleBtn,.modebar button{font-weight:600}.prov{font-size:14px;font-weight:500}
@media(max-width:360px){.photoHero h1{font-size:24px}.photoHero p{font-size:14px}.service b{font-size:15px}.service small{font-size:12px}}

.geoBar{display:flex;align-items:center;gap:12px;padding-top:8px}.geoBar p{flex:1;margin:0;color:#58665d;font-size:12px;line-height:1.7}.geoBar button{flex:none;border:0;background:#e7eee7;color:#163c34;border-radius:8px;padding:8px 11px;min-height:40px;font-weight:600;font-size:13px}.geoBar button:disabled{opacity:.7}.location{cursor:pointer}.locationRow{min-width:0}.location small{line-height:1.6}.mapStatus a{color:#245c4e}button:disabled{cursor:wait}

#trSupplierFields{border:0;padding:0;margin:0;min-width:0}#trSupplierFields:disabled{opacity:.65}#trSupplierLoad{font-size:13px;color:#52684e}
/* The entry screen remains usable with keyboard and screen readers. */
body.permissionsLocked{background:#f5f1e9}
body.permissionsLocked>:not(#accessGate):not(script):not(style){display:none!important}
.accessGate{min-height:100dvh;padding:32px 20px;display:grid;place-items:center;background:#f5f1e9}
.accessGate[hidden]{display:none}
.accessCard{width:100%;max-width:440px;margin:auto;color:#172c2a}
.accessCard> a img{display:block;border-radius:18px}
.accessEyebrow{font-size:13px;font-weight:600;color:#6a6d61;margin:20px 0 8px}
.accessCard h1{font-size:30px;line-height:1.45;margin:0 0 12px;font-weight:700}
.accessIntro{font-size:15px;line-height:1.8;margin:0 0 24px;color:#515c56}
.accessPermission{background:#fff;border:1px solid #e1e3d8;border-radius:18px;padding:20px;margin-top:14px}
.accessPermission h2{font-size:18px;margin:0 0 7px}
.accessPermission p{font-size:14px;line-height:1.8;color:#576159;margin:0 0 16px}
.accessPermission .btn{width:100%;font-family:inherit;min-height:48px;font-weight:600}
.accessPermission .btn:disabled{opacity:.6;cursor:default}
.accessFoot{font-size:13px;line-height:1.8;color:#657063;margin:18px 0}
.accessLinks{display:flex;gap:24px;font-size:14px}
.accessLinks a{color:#214b3f;text-underline-offset:4px}
@media(max-width:380px){.accessGate{padding:24px 16px}.accessCard h1{font-size:26px}.accessPermission{padding:16px}}

/* Desktop uses the viewport and a horizontal navigation, while phones keep their layout. */
@media(min-width:900px){
 html,body{background:#faf9f5}
 .app{max-width:none;width:100%;padding-bottom:0;box-shadow:none;display:flex;flex-direction:column}
 .app>.top{order:0;width:100%;padding:22px max(32px,calc((100vw - 1380px)/2));display:grid;grid-template-columns:1fr minmax(280px,440px);gap:8px 48px;align-items:center;border-bottom:1px solid #e0e4dd}
 .top .brand{grid-column:1;grid-row:1}.top .location{grid-column:2;grid-row:1;margin:0}.top .geoBar{grid-column:2;padding:0}.top .mark{width:52px;height:52px}.top .logo{font-size:29px}
 .app>.nav{order:1;position:sticky;top:0;left:auto;bottom:auto;transform:none;width:100%;display:flex;justify-content:center;gap:24px;padding:8px 32px;border-top:0;border-bottom:1px solid #e0e4dd;background:#faf9f5f5}
 .nav button{display:flex;align-items:center;justify-content:center;gap:10px;min-width:140px;padding:10px 20px;border-radius:10px;font-size:15px}.nav button i{margin:0}.nav button.active{background:#e7eee7}
 .app>#customerView,.app>#supplierView,.app>#adminView{order:2;width:100%;max-width:1440px;margin:0 auto;padding:28px 32px 40px}
 .app>.legalLinks{order:3}.section{padding:0 0 30px}.head{margin-bottom:18px}.head h2{font-size:26px}
 .photoHero{display:grid;grid-template-columns:1fr 1fr;margin:0 0 36px;min-height:390px;border-radius:18px}.homeStoryPhoto{height:100%;aspect-ratio:auto;min-height:390px;object-position:center}.homeStoryText{padding:38px;align-self:center}.photoHero h1{font-size:clamp(32px,3.2vw,48px);line-height:1.45}.photoHero p{font-size:17px;max-width:520px}.photoHero .ey{font-size:14px}.photoHero .specialistNote{font-size:13px}.supplierCTA{font-size:17px;min-height:52px;max-width:460px}
 .services{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.serviceInfo{padding:18px}.service b{font-size:20px}.service small{font-size:14px}.provs{flex-wrap:wrap;overflow:visible}.prov{padding:10px 18px}
 .supplierHero,.adminHero{margin:0 0 24px;padding:32px}.supplierHero h1,.adminHero h1{font-size:34px}.supplierHero p,.adminHero p{font-size:15px}.metrics,.agentGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.agentCard strong{font-size:16px}.agentCard small,.metric span{font-size:13px}
 .sheet{align-items:center;padding:28px}.panel{width:min(760px,100%);border-radius:20px;max-height:90dvh;padding:28px}.transportPanel{max-width:900px;width:min(900px,100%)}#transportMapSheet .panel{max-width:900px}.mapBox,.transportMap{height:420px}.toast{bottom:28px}
}
@media(min-width:600px) and (max-width:899px){.app{max-width:none;width:100%;box-shadow:none}.top,.section{padding-left:28px;padding-right:28px}.hero{margin-left:28px;margin-right:28px}.nav{width:100%}}