/* HAG site — shared responsive layer.
   The pages below are built with inline styles, so these rules use
   attribute-substring selectors + !important to override specific
   inline declarations at narrower widths without touching every
   section by hand. */

/* ---------- Scroll reveal ----------
   Driven by classes, not inline styles. Setting any el.style.* property makes the
   browser reserialize the whole style attribute with spaces ("grid-template-columns:
   1fr 1fr"), which silently breaks every [style*="..."] selector in this file on that
   element. The reveal script used to touch every [data-reveal] element on load, so
   those sections lost their responsive rules entirely.
   The hidden state is gated on .js-reveal (added by the script) so the page still
   renders if JavaScript never runs. */
.js-reveal [data-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.js-reveal [data-reveal].is-revealed{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- Floating widgets ---------- */
#hag-back-to-top{position:fixed;right:20px;bottom:92px;width:46px;height:46px;border-radius:50%;color:#fff;border:none;box-shadow:0 8px 24px rgba(0,0,0,.2);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:300;transition:opacity .25s,transform .2s}
#hag-back-to-top:hover{transform:translateY(-3px)}
#hag-back-to-top.is-visible{display:flex}
#hag-whatsapp-bubble{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:300;text-decoration:none;transition:transform .2s}
#hag-whatsapp-bubble:hover{transform:scale(1.08)}
#hag-book-consult{position:fixed;left:20px;bottom:20px;background:#111827;color:#fff;padding:15px 24px;border-radius:30px;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:300;display:inline-flex;align-items:center;gap:9px;transition:transform .2s,background .2s,color .2s;white-space:nowrap}
#hag-book-consult:hover{transform:translateY(-3px);background:#B4CC00;color:#111827}
@media (max-width:640px){#hag-book-consult{padding:15px;border-radius:50%}#hag-book-consult span{display:none}}

/* ---------- Nav / hamburger ---------- */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;line-height:0}
.nav-toggle span{display:block;width:24px;height:2px;background:#111827;margin:5px 0;transition:transform .2s,opacity .2s}

@media (max-width:960px){
  .nav-toggle{display:block}
  .nav-links{
    display:none!important;
    position:absolute!important;
    top:100%;left:0;right:0;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:4px!important;
    background:#fff;
    padding:12px 20px 20px;
    box-shadow:0 16px 32px rgba(0,0,0,.12);
    border-bottom:1px solid #e5e7eb;
  }
  .nav-links.is-open{display:flex!important}
  .nav-links a{padding:10px 0;width:100%}
  .nav-links .aff-drop{width:100%}
  .nav-links .aff-menu{
    position:static!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    padding-top:4px!important;
    display:none;
  }
  .nav-links .aff-drop.is-open .aff-menu{display:block}
  .nav-links .aff-menu > div{box-shadow:none!important;border:none!important;padding:0 0 0 12px!important}
  .nav-cta{display:none!important}

  /* nav bar itself: allow it to sit above the dropdown, tighten height */
  nav[data-nav]{padding-left:20px!important;padding-right:20px!important;position:relative}
}

/* ---------- Gutters: any inline padding using a 64px side value ---------- */
@media (max-width:900px){
  [style*=" 64px"]{padding-left:20px!important;padding-right:20px!important}
}
@media (max-width:640px){
  [style*=" 64px"]{padding-left:16px!important;padding-right:16px!important}
}

/* ---------- Grids: stack to one column ---------- */
@media (max-width:900px){
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(2,minmax(0,1fr))"],
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1.5fr 1fr 1fr;"],
  [style*="grid-template-columns:1.35fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 280px 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:1fr 400px"],
  [style*="grid-template-columns:420px 420px 1fr"]{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  /* article/job detail layouts are revealed with el.style.display='grid', which makes
     the browser reserialize the inline style with spaces ("grid-template-columns: 1fr
     400px"), so the attribute-substring selectors above stop matching. Target a real
     class instead. */
  .js-detail-layout{grid-template-columns:1fr!important;gap:40px!important}
  /* sticky sidebars shouldn't stay sticky once stacked full-width */
  [style*="position:sticky;top:96px"],
  [style*="position:sticky;top:90px"]{position:static!important}
  /* contact section photo: cap width once stacked so it doesn't blow up full-bleed */
  [style*="aspect-ratio:1/1"]{max-width:340px!important;margin:0 auto!important}
  /* contact section hero image: cap height once the 3-col layout stacks */
  [style*="height:520px;"]{height:320px!important}
  /* feature card row: kill the staggered negative margin once stacked to 1 col */
  [style*="margin-top:-20px;border:1px solid #e5e7eb"]{margin-top:0!important}
  /* feature card row wrapper: the -72px pull-up over the hero was designed for desktop's
     tall hero; on a shrunk mobile/tablet hero it lands on top of the CTA buttons and
     hides them. Give it breathing room instead. */
  [style*="margin-top:-72px;position:relative;z-index:10"]{margin-top:24px!important}
}

/* ---------- Hero sections ---------- */
@media (max-width:900px){
  [style*="height:720px;overflow:hidden"]{height:560px!important}
  h1[style*="font-size:6"],h1[style*="font-size:5"],h1[style*="font-size:4"]{font-size:34px!important;line-height:1.15!important}
  h2[style*="font-size:5"]{font-size:32px!important;line-height:1.15!important}
}
@media (max-width:640px){
  [style*="height:720px;overflow:hidden"]{height:460px!important}
  [style*="height:540px;overflow:hidden"]{height:420px!important}
  h1[style*="font-size:6"],h1[style*="font-size:5"],h1[style*="font-size:4"]{font-size:28px!important}
  h2[style*="font-size:5"]{font-size:26px!important}
  h2[style*="font-size:4"]{font-size:26px!important}
}

/* ---------- Process row / connector arrows (Services "How We Work") ---------- */
@media (max-width:900px){
  [style*="justify-content:center;max-width:1240px"]{flex-wrap:wrap!important;row-gap:40px!important}
  [style*="width:36px;height:76px"]{display:none!important}
  [style*="width:32px;height:64px;display:flex;align-items:center;justify-content:center"]{display:none!important}
  /* TBS methodology connecting line */
  [style*="left:12.5%;right:12.5%;height:2px"]{display:none!important}
}

/* ---------- Sectors marquee: narrow the edge fades on small screens ---------- */
@media (max-width:640px){
  [style*="width:120px;background:linear-gradient(90deg,#fff"]{width:48px!important}
  [style*="width:120px;background:linear-gradient(270deg,#fff"]{width:48px!important}
}

/* ---------- Affiliates: swipeable card carousel on mobile/tablet ----------
   Four fixed columns don't fit a phone screen, and a plain 1-col stack makes
   for a long scroll. Swap to a horizontal snap-scroll carousel instead,
   with each card sized to peek the next one as a swipe hint. Uses a real
   class (not the attribute-substring trick) so it isn't at the mercy of
   selector specificity ties with the generic grid-stacking rule above. */
@media (max-width:900px){
  .affiliates-grid{
    grid-template-columns:none!important;
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    background:transparent!important;
    gap:16px!important;
    padding:4px 4px 14px!important;
  }
  .affiliates-grid::-webkit-scrollbar{height:6px}
  .affiliates-grid::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
  .affiliates-grid > a{
    flex:0 0 82%;
    scroll-snap-align:center;
    border-radius:14px!important;
    box-shadow:0 10px 28px rgba(0,0,0,.1);
  }
}
@media (max-width:480px){
  .affiliates-grid > a{flex:0 0 88%}
}

/* ---------- Misc safety ---------- */
img{max-width:100%}
/* "15+ Years Experience" badge hangs off its image by -24px; on phones that
   pushes past the viewport and creates a horizontal scroll on the whole page. */
@media (max-width:900px){
  [style*="bottom:-24px;right:-24px"]{bottom:-16px!important;right:0!important}
}
@media (max-width:640px){
  [style*="display:flex;justify-content:space-between;align-items:center"]{flex-wrap:wrap!important;gap:16px!important}
}

/* ============================================================
   Responsive refinements (added) — close gaps the rules above
   miss: non-64px gutters, oversized phone padding, tablet grids,
   overflow-prone rows and the nav/logo scale.
   ============================================================ */

/* ---------- Side gutters for 70px / 80px inline paddings ----------
   Services uses "padding:100px 70px" and Contact "padding:110px 80px",
   so the generic 64px gutter rule never touches them. Catch both. */
@media (max-width:900px){
  [style*=" 70px"],[style*=" 80px"]{padding-left:24px!important;padding-right:24px!important}
}
@media (max-width:640px){
  [style*=" 70px"],[style*=" 80px"]{padding-left:16px!important;padding-right:16px!important}
}

/* ---------- Trim tall vertical section padding on phones ---------- */
@media (max-width:640px){
  [style*="padding:100px 64px"],
  [style*="padding:96px 64px"],
  [style*="padding:100px 70px"],
  [style*="padding:110px 80px"],
  [style*="padding:88px 0"]{padding-top:60px!important;padding-bottom:60px!important}
}

/* ---------- Nav: shorter bar + smaller logo on phones ---------- */
@media (max-width:640px){
  nav[data-nav]{height:74px!important}
  nav[data-nav] > a img{height:52px!important}
}

/* ---------- Hero CTA buttons: wrap instead of overflowing ---------- */
@media (max-width:480px){
  [style*="display:flex;gap:16px;align-items:center"]{flex-wrap:wrap!important}
}

/* ---------- Contact form: tighten inner padding on small screens ---------- */
@media (max-width:640px){
  [style*="padding:46px"]{padding:28px!important}
}
@media (max-width:400px){
  [style*="padding:46px"]{padding:22px!important}
}

/* ---------- Stats: drop the divider borders once the row stacks ---------- */
@media (max-width:900px){
  [style*="border-right:1px solid rgba(255,255,255,.1)"]{
    border-right:none!important;padding-bottom:6px!important;
  }
}

/* ---------- Footer bottom bar: copyright | credit | legal links ----------
   The three columns still fit side by side on a tablet; only phones need
   the stack, so this is scoped tighter than the generic grid rule above. */
@media (max-width:640px){
  [style*="grid-template-columns:1fr auto 1fr"]{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:center!important;
    gap:10px!important;
  }
  [style*="grid-template-columns:1fr auto 1fr"] [style*="justify-self:end"]{
    justify-self:center!important;
  }
  [style*="grid-template-columns:1fr auto 1fr"] [style*="white-space:nowrap"]{
    white-space:normal!important;
  }
}

/* ---------- Blog header: let heading + "View all" link wrap ---------- */
@media (max-width:640px){
  [style*="align-items:flex-end"]{
    flex-wrap:wrap!important;gap:14px!important;align-items:flex-start!important;
  }
}

/* ---------- Tablet (641–900px): 2-up card grids instead of a full stack.
   Placed after the max-width:900px stacking rule so, at equal specificity,
   source order wins inside this range; below 641px the stack rule applies. */
@media (min-width:641px) and (max-width:900px){
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1.5fr 1fr 1fr;"],
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr!important;
    gap:24px!important;
  }
}

/* ============================================================
   African-pattern accents — a light touch, site-wide.
   Original geometric dot-and-diamond motif (in the spirit of
   Adinkra/mudcloth textile traditions, not a reproduction of any
   specific cultural design) tinted per company using each logo's
   own colors. Two uses only, kept deliberately subtle:
     .hag-pat-divider   — thin 8px full-strength strip between sections
     .hag-pat-watermark — faint 6% pattern behind a section's own background
   Pair either with a color class: .pat-hag .pat-tad .pat-eos .pat-hcap .pat-tbs
   ============================================================ */
.pat-hag{--pat-c1:#4A4A4A;--pat-c2:#C7D92C}
.pat-tad{--pat-c1:#6B7A2E;--pat-c2:#FFD400}
.pat-eos{--pat-c1:#1E9E4E;--pat-c2:#C77DB5}
.pat-hcap{--pat-c1:#8B1E2E;--pat-c2:#1E6B3C}
.pat-tbs{--pat-c1:#F0883E;--pat-c2:#8DC152}

.hag-pat-divider{
  /* chevron / zigzag weave — kept deliberately faint so it reads as
     texture, not a bold stripe. Tune with the opacity value below. */
  width:100%;height:4px;flex:none;background-repeat:repeat;opacity:.4;
  background-image:
    linear-gradient(135deg,var(--pat-c1) 25%,transparent 25.5%),
    linear-gradient(225deg,var(--pat-c1) 25%,transparent 25.5%),
    linear-gradient(315deg,var(--pat-c2) 25%,transparent 25.5%),
    linear-gradient(45deg,var(--pat-c2) 25%,transparent 25.5%);
  background-position:0 0,7px 0,7px 0,0 0;
  background-size:14px 12px;
}
.hag-pat-watermark{position:relative;isolation:isolate}
.hag-pat-watermark::before{
  /* diagonal pinstripe ticking */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.018;
  background-repeat:repeat;
  background-image:repeating-linear-gradient(45deg,var(--pat-c1) 0 2px,transparent 2px 10px,var(--pat-c2) 10px 12px,transparent 12px 20px);
}
.hag-pat-watermark > *{position:relative;z-index:1}

/* affiliate-card top accent bars inside the flush affiliates grid */
.pat-bar{
  height:5px;width:100%;background-repeat:repeat-x;
  background-image:
    linear-gradient(45deg,var(--pat-c2) 25%,transparent 25.5%,transparent 74.5%,var(--pat-c2) 75%),
    linear-gradient(-45deg,var(--pat-c2) 25%,transparent 25.5%,transparent 74.5%,var(--pat-c2) 75%),
    radial-gradient(circle,var(--pat-c1) 1.6px,transparent 1.9px);
  background-size:10px 10px,10px 10px,10px 10px;
  background-position:0 -2px,0 -2px,5px 3px;
}

@media (max-width:640px){
  .hag-pat-divider{height:6px;background-size:12px 10px;background-position:0 0,6px 0,6px 0,0 0}
}