/* Approved full-width navy menu strip and numbered contact buttons. */
:root { --site-header-height: 74px; --contact-orange: #e6ad78; --contact-orange-hover: #db9b61; --contact-orange-ink: #2c2119; }
html { scroll-padding-top: calc(var(--site-header-height) + 20px); }
.topbar { display: none; }
.header, .home .header { position: sticky; inset: auto; top: 0; z-index: 50; border: 0; border-bottom: 1px solid #ffffff16; background: #0b1323; color: #fff; box-shadow: 0 2px 12px #0b132312; }
.header::before, .home .header::before { display: none; }
.header .nav-wrap, .home .header .nav-wrap { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 20px; width: min(1500px,calc(100% - 80px)); min-height: calc(var(--site-header-height) - 1px); }
.header .mobile-header-label, .home .header .mobile-header-label { display: block; margin: 0; color: #c8d3e1; }
.header .mobile-header-label strong, .home .header .mobile-header-label strong { color: #fff; }
.header .nav-wrap nav, .home .header .nav-wrap nav { grid-column: 2; justify-self: center; margin: 0; padding: 0; gap: 6px; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.header .nav-wrap nav > a { padding: 12px 16px; border: 0; border-radius: 5px; background: transparent; color: #e4ebf4; font-size: 14px; font-weight: 600; }
.header .nav-wrap nav > a.active { background: #ffffff12; color: #fff; box-shadow: inset 0 -2px 0 #f3d74f; }
.header .nav-wrap nav > a:hover { background: #ffffff16; color: #fff; }
.header .nav-location, .home .header .nav-location { grid-column: 3; justify-self: end; padding: 0 0 0 20px; border: 0; border-left: 1px solid #ffffff30; border-radius: 0; background: transparent; color: #c8d3e1; }
.header .nav-location span:first-child, .home .header .nav-location span:first-child { color: #fff; }
.header .header-call { display: none; }
.home .showcase { height: min(calc(100svh - var(--site-header-height)),calc(100vw * 9/16)); }
.contact-with-number > span.contact-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; font-size: inherit; line-height: 1.35; }
.contact-with-number .contact-label { display: block; font-size: inherit; line-height: 1.35; }
.contact-with-number .contact-number { display: block; font-size: 11px; line-height: 1.35; font-weight: 500; letter-spacing: .2px; white-space: nowrap; }
.showcase-quote.contact-with-number { min-height: 60px; }
.project-invite .project-invite-wa.contact-whatsapp, .showcase-quote.contact-whatsapp, .btn.contact-whatsapp, .service-aside .btn.contact-whatsapp { background: var(--contact-orange); color: var(--contact-orange-ink); border-color: transparent; }
.project-invite .project-invite-wa.contact-whatsapp:hover, .showcase-quote.contact-whatsapp:hover, .btn.contact-whatsapp:hover, .service-aside .btn.contact-whatsapp:hover { background: var(--contact-orange-hover); }
.studio-footer .studio-footer__whatsapp.contact-whatsapp { background: #f2dfcd; color: #684224; }
.studio-footer .studio-footer__whatsapp.contact-whatsapp:hover { background: #ebd0b6; }
.studio-footer .studio-footer__whatsapp.contact-whatsapp small { color: #735b46; }
.contact-row.contact-whatsapp { border-left: 3px solid #d79b62; }
.nav-contact a.contact-whatsapp { background: #f5e4d3; border-color: #e5c3a0; }
.nav-contact a.contact-whatsapp strong { color: #674326; }
@media (min-width: 721px) {
  .desktop-contact a.contact-whatsapp { background: var(--contact-orange); color: var(--contact-orange-ink); border-color: #d69c65; }
  .desktop-contact a.contact-whatsapp svg { color: var(--contact-orange-ink); }
  .desktop-contact a.contact-phone { background: #fff; color: #2c3e48; border-color: #d7e0e4; }
  .desktop-contact a.contact-phone svg { color: #315c70; }
}
@media (min-width: 721px) and (max-width: 1050px) {
  .header .mobile-header-label, .home .header .mobile-header-label, .header .nav-location, .home .header .nav-location { display: none; }
  .header .nav-wrap, .home .header .nav-wrap { width: calc(100% - 40px); gap: 0; }
  .header .nav-wrap nav > a { padding-inline: 13px; font-size: 13px; }
}
@media (max-width: 720px) {
  :root { --site-header-height: 76px; }
  .header { background: #fffaf1; color: var(--ink); border-bottom: 1px solid #1519251a; box-shadow: none; }
  .home .header { position: absolute; inset: 0 0 auto; background: transparent; border: 0; box-shadow: none; }
  .header .nav-wrap, .home .header .nav-wrap { display: flex; min-height: calc(var(--site-header-height) - 1px); width: calc(100% - 32px); gap: 12px; }
  .home .header .nav-wrap { min-height: 82px; }
  .header .mobile-header-label { margin-right: auto; }
  .header .mobile-header-label, .home.menu-open .header .mobile-header-label { color: #505766; }
  .header .mobile-header-label strong, .home.menu-open .header .mobile-header-label strong { color: var(--ink); }
  .home .header .mobile-header-label { display: none; }
  .home.menu-open .header .mobile-header-label { display: block; visibility: visible; margin-right: auto; }
  .home .header .nav-location { position: relative; display: flex; order: -1; margin-right: auto; padding: 8px 13px 8px 35px; border: 1px solid #ffffff45; border-radius: 30px; background: #0b1323cc; box-shadow: 0 6px 24px #0002; line-height: 1.5; }
  .home .header .nav-location span:nth-child(2) { color: #c8d3e1; }
  .home .header .nav-location-pin { left: 12px; color: #71cce6; }
  .home.menu-open .header .nav-location { display: none; }
  .header .header-call { display: none; }
  .header .menu-toggle, .home .header .menu-toggle { min-height: 45px; padding: 10px 16px; border: 0; border-radius: 30px; background: var(--yellow); color: var(--ink); box-shadow: 0 6px 24px #0002; }
  .menu-open .header .menu-toggle { background: var(--ink); color: #fff; }
  .menu-open .header, .home.menu-open .header { position: fixed; inset: 0 0 auto; z-index: 100; background: #fffaf1; border: 0; }
  .menu-open .header .nav-wrap, .home.menu-open .header .nav-wrap { min-height: var(--site-header-height); }
  .header .nav-wrap nav, .home .header .nav-wrap nav { display: none; }
  .header .nav-wrap nav.is-open, .home .header .nav-wrap nav.is-open { position: fixed; inset: var(--site-header-height) 0 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; height: calc(100dvh - var(--site-header-height) - var(--mobile-contact-height) - env(safe-area-inset-bottom)); margin: 0; padding: 22px 20px 18px; gap: 7px; background: #fffaf1; overflow-y: auto; }
  .header .nav-wrap nav > a[class] { display: flex; align-items: center; min-height: 56px; gap: 18px; padding: 13px 17px; border-radius: 0; border-bottom: 1px solid #dce2e5; background: #fffaf1; color: #263640; font-size: 20px; font-weight: 600; box-shadow: none; }
  .header .nav-wrap nav > a.active { border-radius: 5px; background: #e7f1f3; color: #214e5c; }
  .header .nav-wrap nav > a:hover { background: #edf3f4; color: #214e5c; }
  .header .nav-wrap nav .nav-contact { margin-top: 15px; }
  .header .nav-wrap nav .nav-contact a { min-height: 75px; }
  .header .nav-wrap nav .nav-contact a > span { font-size: 8px; }
  .header .nav-wrap nav .nav-contact a > strong { font-size: 14px; white-space: nowrap; }
  .home .showcase { height: calc(100svh - var(--mobile-contact-height) - env(safe-area-inset-bottom)); min-height: 480px; }
  .mobile-contact a.contact-whatsapp { background: var(--contact-orange); color: var(--contact-orange-ink); border-color: #d69c65; }
  .mobile-contact a.contact-phone { background: #edf2f3; color: #26434e; border-color: #d4e0e3; }
  .mobile-contact a.contact-whatsapp svg { background: #ffffff35; }
}