/* Shared header / top navigation / footer — used on EVERY page. */
/* Site-wide text size: 132% (= previous 110% +20%, 2026-10-10). All font sizes are rem/em, so this scales everything. */
html{font-size:132%}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#aa1109;color:#fff;padding:8px 12px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.topbar{background:linear-gradient(90deg,#470406,#aa1109 50%,#470406);border-bottom:1px solid #6a100a;font-size:.82rem;color:#f3dcda}
.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:#fff;font-weight:600} .topbar a:hover{color:#fff;text-decoration:underline}
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:3px solid #aa1109;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;display:block;height:44px;width:auto}
.site-logo img{height:44px;width:auto;display:block}
.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:linear-gradient(180deg,#c4170e,#aa1109);color:#fff!important;text-decoration:none!important;white-space:nowrap;box-shadow:0 6px 18px rgba(170,17,9,.4)}
.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:#f2352b;background:rgba(242,53,43,.1)}
.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:linear-gradient(180deg,#c4170e,#aa1109);color:#fff!important}
.mainnav-list>li.li-cta>a.nav-cta:hover,.mainnav-list>li.li-cta>a.nav-cta[aria-current="page"]{background:#d01b12;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(242,53,43,.16)}
.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 #f2352b}
  .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:3px solid #aa1109;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:#f2352b}
.work-photo:hover{border-color:#f2352b}

/* ---- 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:2px solid #aa1109;padding-left:12px}
@media (max-width:600px){.site-brand-text{display:none}.site-logo,.site-logo img{height:36px}}
/* Brand: Gabak USA YouTube channel colours (red #aa1109, maroon #6a100a/#470406, black, white; navy #2b508b) */
.hdr-phone:hover{color:#f2352b!important}
.footer-grid a:hover,.site-footer a:hover{color:#f2352b}
/* TEST banner (staging only, injected by tools/build_staging.py) */
.staging-banner{background:#ffd400;color:#000;text-align:center;font-weight:800;font-size:.85rem;letter-spacing:.06em;padding:6px 10px}

/* ==== Gabak USA: light blush theme (2026-10-10, test.gabakusa.com) ====
   Replaces the black page background with soft blush #FFF5F4, dark text for contrast.
   Crimson YouTube-brand accents/buttons (#aa1109 / #c4170e / maroon #470406) are kept.
   Loaded last on every page, so it overrides the black-theme rules above and in site.css. */
:root{
  --bg:#FFF5F4; --card:#ffffff; --ink:#1d1416; --muted:#4f4245; --line:#f1d3d0;
  --accent:#b3140c; --accent2:#c4170e; --shadow:0 10px 28px rgba(106,16,10,.08);
}
html,body{background:#FFF5F4;color:var(--ink)}
a{color:var(--accent)}
h1,h2,h3,h4{color:var(--ink)}
/* header: white bar, crimson logo + border; nav row light */
header.site-header{background:rgba(255,255,255,.97);border-bottom:3px solid #aa1109;box-shadow:0 4px 14px rgba(106,16,10,.08)}
.site-brand,.hdr-phone{color:var(--ink)!important}
.site-brand-text small{color:var(--muted)}
.hdr-phone:hover{color:#aa1109!important}
.mainnav{background:#fff;border-top:1px solid var(--line)}
.mainnav-list>li>a,.dd-toggle,.dd-menu a{color:var(--ink)!important}
.mainnav-list>li>a:hover,.dd-toggle:hover,.mainnav-list>li>a[aria-current="page"],.dd-toggle.is-active{border-bottom-color:#aa1109;background:rgba(170,17,9,.07)}
.dd-menu{background:#fff;border:1px solid var(--line);box-shadow:0 18px 36px rgba(106,16,10,.14)}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:rgba(170,17,9,.08)}
.nav-toggle{border-color:var(--line);color:var(--ink)}
@media (max-width:980px){.dd-menu{background:#FFF5F4}.mainnav-list>li>a[aria-current="page"],.dd-toggle.is-active{border-left-color:#aa1109}}
/* surfaces */
.card,.prod,.yt-card,.buy-box,.faq details,.tile{background:#fff;border-color:var(--line)}
.hero-card{background:#fff;border:1px solid var(--line);border-top:3px solid #aa1109}
.pill,.chip,.cat-pills a{background:#fff;border-color:var(--line);color:var(--ink)}
.pill{color:var(--muted)}
.cat-pills a:hover,.cat-pills a[aria-current="page"]{border-color:#aa1109;background:rgba(170,17,9,.08)}
.prod a.pimg,.product-top .pimage{background:#fbe9e7}
.social a{background:#fff;border-color:var(--line);color:var(--ink)}
.work-photo{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
.work-photo figcaption{color:var(--muted)}
.work-photo figcaption b{color:var(--ink)}
.work-photo figcaption .more{color:#b3140c}
.work-photo:hover{border-color:#aa1109}
input,select,textarea{background:#fff;border-color:#e6c2be;color:var(--ink)}
input::placeholder,textarea::placeholder{color:#8a7a7c}
.btn.secondary{background:#fff;border:1px solid #aa1109;color:#aa1109}
.btn.secondary:hover{background:rgba(170,17,9,.06)}
.ok{background:#e8f8ee;border-color:#9fd9b3;color:#14532d}
.err{background:#fdecec;border-color:#f3a6a1;color:#7f1d1d}
.price.free{color:#2b508b}
/* crimson CTA band keeps white text */
.cta-band,.cta-band h2,.cta-band h3{color:#fff}
.cta-band p{color:#f8e1df}
.cta-band .btn.secondary{background:transparent;color:#fff!important;border-color:#fff}
/* footer */
.site-footer{background:#fbe6e4;border-top:3px solid #aa1109;color:var(--muted)}
.footer-grid strong{color:var(--ink)}
.site-footer a{color:#8f0f08}
.footer-grid a:hover,.site-footer a:hover{color:#aa1109}
/* ==== Darker text (2026-10-10): near-black text/headings, deeper crimson #7A0B06 for links/labels. Blush bg kept. ==== */
:root{--ink:#111; --muted:#2b2224; --accent:#7A0B06; --accent2:#7A0B06}
html,body{color:#111}
h1,h2,h3,h4,h5,h6,.card h3,.prod h3 a,.rich h3,.faq summary,.tile b,.chip b{color:#111}
a,.kicker,.prod .pcat,.hl,h1 .hl,.crumb a,.work-photo figcaption .more,.site-footer a{color:#7A0B06}
.lead,.sub,.card p,.card li,.prose p,.prose ul,.rich,label,.note,.crumb,.pill,.chip span,.tile span,.yt-card .cap,.site-brand-text small,.site-footer,.work-photo figcaption{color:#2b2224}
.hdr-phone:hover,.footer-grid a:hover,.site-footer a:hover{color:#5c0804!important}
.btn.secondary{color:#7A0B06;border-color:#7A0B06}
.site-brand,.hdr-phone,.mainnav-list>li>a,.dd-toggle,.dd-menu a{color:#111!important}
.cta-band,.cta-band h2,.cta-band h3{color:#fff}
.cta-band .btn{color:#7A0B06!important}
.cta-band .btn.secondary,.cta-band .btn-wa{color:#fff!important}