/* ===== V11 SHARED NAV/FOOTER LOCK =====
   Structure adapted from learnandupskillwithai.com's nav (per direct
   request): plain flexbox (logo / links / right-group), NOT sticky (it
   scrolls away with the page instead of pinning to the top), logo sized
   by height (not width, more robust for a horizontal icon+wordmark
   lockup), CTA button and hamburger grouped together on the right so the
   CTA stays visible on mobile instead of being replaced by the
   hamburger, a CSS-spans hamburger that animates into an X when open,
   and a full-screen overlay mobile menu with large centered links
   instead of a small dropdown box. Colours/spacing adapted to Sukidha's
   own brand rather than copied verbatim. */
header.nav{
  display:flex!important;align-items:center!important;
  position:relative!important;z-index:1200!important;
  background:#F5F1EB!important;border-bottom:1px solid rgba(32,41,93,.08)!important;
  height:100px!important;min-height:100px!important;
}
header.nav .nav-inner{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;
}
header.nav .brand-logo{display:flex!important;align-items:center!important;flex-shrink:0!important;width:auto!important;min-width:0!important}
header.nav .brand-logo img{height:58px!important;width:auto!important;max-width:none!important;display:block!important}
header.nav .nav-links{display:flex!important;align-items:center!important;gap:34px!important;white-space:nowrap!important}
header.nav .nav-links>a.active,header.nav .nav-drop-trigger.active{color:var(--orange)!important}
header.nav .nav-right{display:flex!important;align-items:center!important;gap:16px!important;flex-shrink:0!important}
header.nav .nav-cta{position:static!important;transform:none!important;margin:0!important;width:auto!important;min-width:0!important;height:48px!important;padding:0 22px!important}
header.nav .mobile-menu-btn{
  display:none!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
  gap:5px!important;width:32px!important;height:32px!important;padding:0!important;background:none!important;border:0!important;cursor:pointer!important;
}
header.nav .mobile-menu-btn span{display:block!important;width:24px!important;height:2px!important;background:var(--navy)!important;border-radius:2px!important;transition:all .25s!important}
header.nav .mobile-menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
header.nav .mobile-menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0!important}
header.nav .mobile-menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

.mobile-nav{
  display:none!important;position:fixed!important;inset:0!important;z-index:1199!important;
  background:#fff!important;flex-direction:column!important;justify-content:center!important;
  padding:40px 32px!important;overflow:auto!important;
}
.mobile-nav.open{display:flex!important}
.mobile-nav a,.mobile-nav .mobile-label{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  padding:18px 0!important;color:var(--navy)!important;font-size:28px!important;font-weight:700!important;
  border-bottom:1px solid rgba(32,41,93,.08)!important;
}
.mobile-nav a.active,.mobile-nav .mobile-label.active{color:var(--orange)!important}
.mobile-calc-links{padding-left:16px!important;border-left:2px solid var(--teal)!important}
.mobile-calc-links a{font-size:18px!important;padding:12px 0!important}

@media(max-width:1100px){
  header.nav{height:84px!important;min-height:84px!important}
  header.nav .brand-logo img{height:46px!important}
  header.nav .nav-links{gap:20px!important;font-size:14px!important}
}
@media(max-width:900px){
  header.nav{height:78px!important;min-height:78px!important}
  header.nav .brand-logo img{height:50px!important}
  header.nav .nav-links{display:none!important}
  header.nav .mobile-menu-btn{display:flex!important}
  header.nav .nav-cta{height:42px!important;padding:0 16px!important;font-size:14px!important}
}
@media(max-width:480px){
  header.nav .brand-logo img{height:42px!important}
  header.nav .nav-cta{font-size:14px!important;padding:0 12px!important}
  header.nav .nav-cta .arrow{display:none!important}
  .mobile-nav{padding:32px 24px!important}
  .mobile-nav a,.mobile-nav .mobile-label{font-size:22px!important}
}
.footer .container{position:relative!important;z-index:2!important}
.footer:before{z-index:0!important;pointer-events:none!important}

/* ===== SINGLE SOURCE OF TRUTH: nav-to-content gap on every page =====
   Every page's hero/top section carries the .page-hero class (added here,
   not left to each page's own hero-variant class) and this is the ONLY
   place its top/bottom spacing is set, with !important so it can't drift
   again the way the per-page hero classes previously did (base.css,
   scale-refinement.css, page-hero-system.css, calculators.css,
   faq-page.css, blog.css and goal-calculator-tool.css each used to carry
   their own different padding for conceptually the same thing). Any hero
   "card" that sits inside .page-hero (.services-hero-copy,
   .contact-hero-copy, .calc-hero-box) gets its own small, EQUAL top
   padding purely for its own interior breathing room -- not to compensate
   for this value, which stays fixed either way. */
.page-hero{padding:68px 0 60px!important}
.services-hero-copy,.contact-hero-copy,.calc-hero-box{padding-top:28px!important}

/* ===== SINGLE SOURCE OF TRUTH: page width / horizontal gutter =====
   .container used to be declared with DIFFERENT max-widths on different
   pages -- base.css capped it at 1180px (56px side gutter), but
   scale-refinement.css (loaded only on Home/Blog/FAQ/blog-single/archive
   pages) silently overrode it to 1360px (96px gutter) since that file
   loads after base.css. scale-refinement.css also had two conflicting
   values for its own breakpoints (e.g. two different 620px rules, 28px
   and 32px gutters). That's what made the nav and every section look a
   different width depending which page you were on. This is now the only
   place .container's width is set, for every page, at every breakpoint. */
.container{width:min(1200px,calc(100% - 60px))!important}
@media(max-width:900px){.container{width:min(1200px,calc(100% - 48px))!important}}
@media(max-width:620px){.container{width:min(1200px,calc(100% - 32px))!important}}
@media(max-width:900px){.page-hero{padding:50px 0 54px!important}}
@media(max-width:620px){.page-hero{padding:40px 0 44px!important}}