/* Shared header / top navigation / footer — used on EVERY page. */
/* Site-wide text size: +10% (2026-10-10). All font sizes are rem/em, so this scales everything. */
html{font-size:110%}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#3b82f6;color:#fff;padding:8px 12px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.topbar{background:#050505;border-bottom:1px solid var(--line,#262a33);font-size:.82rem;color:var(--muted,#a6adbb)}
.topbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px;padding:7px 0}
.topbar-links{display:flex;flex-wrap:wrap;gap:4px 16px}
.topbar a{color:var(--muted,#a6adbb)} .topbar a:hover{color:#fff}
header.site-header{position:sticky;top:0;z-index:30;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.96);border-bottom:1px solid var(--line,#262a33);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0}
.site-brand{display:flex;align-items:center;gap:12px;color:var(--ink,#f2f4f8)!important;text-decoration:none!important;min-width:0}
.site-logo{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#d97706,#f59e0b);display:grid;place-items:center;font-weight:900;letter-spacing:.02em;color:#111}
.site-brand-text strong{display:block;font-size:.95rem;line-height:1.2}
.site-brand-text small{display:block;font-size:.7rem;color:var(--muted,#a6adbb);letter-spacing:.08em;text-transform:uppercase}
.brandbar-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hdr-phone{color:var(--ink,#f2f4f8)!important;font-weight:800;font-size:1.05rem;white-space:nowrap}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:9px 16px;font-weight:800;background:#22c55e;color:#06210f!important;text-decoration:none!important;white-space:nowrap;box-shadow:0 6px 18px rgba(34,197,94,.3)}
.nav-cta:hover{filter:brightness(1.08)}
.nav-toggle{display:none;align-items:center;gap:8px;background:transparent;border:1px solid var(--line,#262a33);color:var(--ink,#f2f4f8);border-radius:12px;padding:9px 12px;font:inherit;font-weight:700;cursor:pointer}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-6px} .nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
.mainnav{background:#0a0a0a;border-top:1px solid var(--line,#262a33)}
.mainnav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.mainnav-list>li{position:relative}
.mainnav-list>li>a,.dd-toggle{display:block;padding:12px 14px;color:var(--ink,#f2f4f8)!important;font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none!important;background:transparent;border:0;font-family:inherit;cursor:pointer;border-bottom:3px solid transparent}
.mainnav-list>li>a:hover,.dd-toggle:hover,.mainnav-list>li>a[aria-current="page"],.dd-toggle.is-active{border-bottom-color:#3b82f6;background:rgba(59,130,246,.08)}
.mainnav-list>li.li-cta{margin-left:auto}
.mainnav-list>li.li-cta>a.nav-cta{padding:8px 18px;margin:4px 0;border-bottom:0;font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;background:#22c55e;color:#06210f!important}
.mainnav-list>li.li-cta>a.nav-cta:hover,.mainnav-list>li.li-cta>a.nav-cta[aria-current="page"]{background:#2fd56b;border-bottom:0}
@media (min-width:981px){.brandbar .nav-cta-quote{display:none}}
.dd-caret{font-size:.75em;margin-left:2px}
.dd-menu{list-style:none;margin:0;padding:6px;position:absolute;left:0;top:100%;min-width:250px;background:#111;border:1px solid var(--line,#262a33);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.45);display:none;z-index:40}
.dd-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink,#f2f4f8)!important;text-decoration:none!important;font-size:.93rem}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:rgba(59,130,246,.15)}
.has-dd.open>.dd-menu{display:block}
@media (hover:hover) and (min-width:981px){.has-dd:hover>.dd-menu,.has-dd:focus-within>.dd-menu{display:block}}
main [id]{scroll-margin-top:130px}
/* ---- Mobile: hamburger ---- */
@media (max-width:980px){
  .topbar-loc{display:none}
  .topbar-in{justify-content:center}
  .hdr-phone{display:none}
  .nav-toggle{display:inline-flex}
  .mainnav{border-top:0}
  .js .mainnav{display:none}
  .js .site-header.menu-open .mainnav{display:block;max-height:calc(100vh - 64px);overflow-y:auto;border-top:1px solid var(--line,#262a33)}
  .mainnav-list{flex-direction:column;align-items:stretch;padding:6px 0 12px}
  .mainnav-list>li>a,.dd-toggle{width:100%;text-align:left;padding:14px 8px;font-size:.95rem;border-bottom:1px solid var(--line,#262a33)}
  .mainnav-list>li>a[aria-current="page"],.dd-toggle.is-active{border-bottom-color:var(--line,#262a33);border-left:3px solid #3b82f6}
  .dd-menu{position:static;display:none;box-shadow:none;border:0;background:#000;min-width:0;padding:4px 0 4px 14px;border-radius:0}
  .no-js .dd-menu,html:not(.js) .dd-menu{display:block}
  .mainnav-list>li.li-cta{margin:12px 0 0}
  .mainnav-list>li.li-cta>a.nav-cta{display:flex;padding:14px;border-left:0}
  main [id]{scroll-margin-top:80px}
}
@media (max-width:420px){
  .site-brand-text strong{font-size:.82rem}
  .site-brand-text small{display:none}
  .nav-cta-quote{padding:8px 12px;font-size:.85rem}
  .nav-toggle-label{display:none}
}
/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--line,#262a33);padding:32px 0 56px;margin-top:20px;color:var(--muted,#a6adbb);font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px}
.footer-grid strong{color:var(--ink,#f2f4f8)}
.footer-grid p{margin:8px 0 0;line-height:1.8}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff!important;text-decoration:none!important;font-weight:800;padding:14px 18px;border-radius:999px;box-shadow:0 12px 30px rgba(37,211,102,.45)}
.wa-float:hover{filter:brightness(1.06);text-decoration:none}
.wa-float svg{width:22px;height:22px;flex-shrink:0}
@media (max-width:520px){.wa-float span{display:none}.wa-float{padding:16px;border-radius:50%}}
@media (max-width:640px){.topbar-links a[href^="mailto:"]{display:none}.topbar{font-size:.8rem}}

/* ---- Work photos (homepage "Our work" grid + photos on service pages) ---- */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.work-grid.cols3{grid-template-columns:repeat(3,1fr)}@media(max-width:860px){.work-grid.cols3{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.work-grid.cols3{grid-template-columns:1fr}}
.work-photo{margin:0;background:#111;border:1px solid #262a33;border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.work-photo a{display:block;color:inherit;text-decoration:none}
.work-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.work-photo figcaption{padding:12px 14px;color:#a6adbb;font-size:.9rem;line-height:1.45}
.work-photo figcaption b{display:block;color:#f2f4f8;font-size:.95rem;margin-bottom:2px}
.work-photo figcaption .more{color:#3b82f6}
.work-photo:hover{border-color:#3b82f6}

/* ---- Wide-screen layout (shared by ALL pages: nav.css loads last, after site.css / inline hub styles) ----
   Dell-style: header, hero, card rows and photo grids use nearly the full viewport on big monitors
   (container = min(1760px, 100% minus side gutters); gutters 16px on phones up to 48px on wide screens).
   Prose paragraphs keep a readable ~70ch line length. */
:root{--wrap-max:1760px;--gutter:clamp(16px,3vw,48px);--measure:75ch}
.wrap{width:min(var(--wrap-max),calc(100% - 2*var(--gutter)));margin-left:auto;margin-right:auto}
.prose p,.prose li,.lead,.sub,.faq details p,.page-hero p{max-width:var(--measure)}
html,body{overflow-x:clip}
img,iframe,video{max-width:100%}
@media (min-width:1280px){
  .work-grid:not(.cols3){grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
  .hero{gap:56px}
  /* card rows: 2-up card grids become 3-up so cards fill the wide row */
  .grid2:has(>.card:nth-child(3n):last-child){grid-template-columns:repeat(3,1fr)}
  /* long prose blocks flow into 2 readable columns instead of one narrow left column */
  .wrap.prose{columns:2;column-gap:56px}
  .wrap.prose>h2,.wrap.prose>.sub{column-span:all}
  .wrap.prose h3{break-after:avoid;margin-top:0}
  .wrap.prose p,.wrap.prose ul,.wrap.prose ol,.wrap.prose li{break-inside:avoid}
  .wrap.prose p,.wrap.prose li{max-width:none}
}
@media (min-width:1600px){
  .grid3,.menu,.yt-grid,.tiles{gap:24px}
  .work-grid{gap:24px}
  .work-grid.cols3:has(>.work-photo:nth-child(4n):last-child){grid-template-columns:repeat(4,1fr)}
}




/* ---- Gabak USA: black theme (2026-10-10) ---- */
html,body{background:#000}
.site-brand-text{border-left:1px solid #2a2a2a;padding-left:12px}
.site-brand-text{border-left:0;padding-left:0}
/* TEST banner (staging only, injected by tools/build_staging.py) */
.staging-banner{background:#b91c1c;color:#fff;text-align:center;font-weight:800;font-size:.85rem;letter-spacing:.06em;padding:6px 10px}