/* Amazigh Espresso — shared tweaks (loaded after each page's own styles)
   1. Top pills ~6% larger, same proportions
   2. Narrower side margins so content uses more of the screen
   3. Header clearance under the fixed pill bar */

/* ── 1. pills ── */
nav{overflow:visible!important}
nav a{font-size:16.5px;padding:13px 21px}
nav .mark{width:47px;height:47px;font-size:20px}
@media (max-width:900px){
  nav a{font-size:14.5px;padding:11px 16px}
  nav .mark{width:41px;height:41px;font-size:18px}
}
@media (max-width:380px){
  nav a{font-size:13.5px;padding:10px 13px}
  nav .mark{width:37px;height:37px;font-size:17px}
}

/* ── 2. narrower side margins ── */
@media (min-width:821px){
  .page-head,.hero,section,.story,.trust,.brands,.install-wrap,.cross,.cross-s,.homeline,.cats,.how-pricing,.hv,
  .tos,.tos-note-wrap,.one,.how,.faq,.paths,.why,.included,.priority,.maint,.custom,.bench,.area,.buynew,
  .hero-photo-wrap,.cta-band{padding-left:28px!important;padding-right:28px!important}
}
@media (max-width:820px){
  .page-head,.hero,section,.story,.trust,.brands,.install-wrap,.cross,.cross-s,.homeline,.cats,.how-pricing,.hv,
  .tos,.tos-note-wrap,.one,.how,.faq,.paths,.why,.included,.priority,.maint,.custom,.bench,.area,.buynew,
  .hero-photo-wrap,.cta-band{padding-left:14px!important;padding-right:14px!important}
  .trust-card,.brand-body,.how-card,.cat-card,.story-card,.tos-apply,.one-card,.path,.why-card,.hv-box,
  .homeline-copy,.install-copy,.svc-card,.about-panel,.maint-card,.buynew-in,.price-note,.tos-note,.inc,
  .priority-copy{padding-left:20px!important;padding-right:20px!important}
  #contact .panel{padding-left:20px!important;padding-right:20px!important}
}

/* ── 3. header clearance under the fixed pill bar (bar height measured per width) ── */
@media (max-width:1204px) and (min-width:901px){.page-head,.hero{padding-top:150px!important}}
@media (max-width:820px){.page-head,.hero{padding-top:140px!important}}
@media (max-width:566px){.page-head,.hero{padding-top:180px!important}}
@media (max-width:456px){.page-head,.hero{padding-top:222px!important}}
@media (max-width:379px){.page-head,.hero{padding-top:206px!important}}