/* ============================================================
   ASONA ABUSUA GLOBAL — CORPORATE LAYER
   Loads last. Overrides the earlier sci-fi styling with a
   restrained institutional treatment.

   Reference: a chartered professional body's letterhead —
   solid masthead, a single gold rule, generous whitespace,
   and no effect that draws attention to itself.
   ============================================================ */

:root {
  --ink:        #0B1424;   /* masthead + footer */
  --ink-2:      #142236;   /* raised panels on dark */
  --paper:      #FAF8F4;   /* page background */
  --paper-2:    #F1EDE4;   /* alternating band */
  --gold:       #B8912F;   /* primary accent — deeper than neon */
  --gold-soft:  #D9BC6A;   /* accent on dark backgrounds */
  --text:       #1B2434;
  --muted:      #626E80;
  --rule:       #E4DFD5;
  --rule-dark:  rgba(255,255,255,0.12);

  --header-h:      132px;  /* utility row + nav row */
  --header-h-sm:   68px;
}

/* ============================================================
   1. THE BUG — masthead was overlapping the page
   ------------------------------------------------------------
   The old header was position:fixed with a transparent
   background, and its top row was pushed up 72px until
   JavaScript added a "page-loaded" class. If that script was
   slow or failed, the row never came down and the menu sat on
   top of the headline. On long pages it also floated over the
   footer with nothing behind it.

   Fixed by making the masthead solid and unconditional: no
   transparency, no scroll state, no load-dependent transform,
   and real space reserved for it in the document.
   ============================================================ */

.navbar {
  position: sticky;
  top: 0;
  background: var(--ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 3px solid var(--gold);
}
.navbar.is-scrolled {
  background: var(--ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25) !important;
}

/* the transform that could strand the top row off-screen */
.navbar .container .upper-side,
.page-loaded .navbar .container .upper-side {
  transform: none !important;
  transition: none !important;
}

.navbar .container .upper-side {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-dark);
}

/* No glow on the mark */
.navbar .container .upper-side .logo img {
  height: 48px !important;
  filter: none !important;
  transform: none !important;
}
.navbar .container .upper-side .logo img:hover {
  filter: none !important;
  transform: none !important;
}

/* Contact block — was colliding with the menu button */
.navbar .container .upper-side .phone-email {
  margin-right: 64px;
  line-height: 1.35;
}
.navbar .container .upper-side .phone-email h4 {
  color: #fff !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}
.navbar .container .upper-side .phone-email small a {
  color: rgba(255,255,255,0.62) !important;
  font-size: 12px !important;
}
.navbar .container .upper-side .phone-email small a:hover { color: var(--gold-soft) !important; }

/* Menu row */
.navbar .menu > ul > li > a {
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  padding: 16px 0;
  position: relative;
  transition: color 0.18s ease;
}
.navbar .menu > ul > li > a:hover,
.navbar .menu > ul > li > a.active { color: #fff; }

/* Active page marked by a rule, not a glow */
.navbar .menu > ul > li > a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--gold);
}

/* Dropdown reads as a document, not a light panel */
.navbar .menu ul ul {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(11,20,36,0.14);
  padding: 6px 0;
}
.navbar .menu ul ul li a {
  color: var(--text) !important;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 20px;
}
.navbar .menu ul ul li a:hover {
  background: var(--paper-2);
  color: var(--ink) !important;
}

/* ============================================================
   2. HERO — an institutional statement, not a light show
   ============================================================ */

.hero {
  background: var(--ink);
  padding: 92px 0 84px;
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  z-index: -1;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.hero-info-title {
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-info-title i { display: none; }         /* the sketch icon meant nothing */
.hero-info-title::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--gold);
  flex: none;
}

.hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 20px;
  max-width: 15ch;
}
.hero h1 .hero-accent,
.hero h1 .gradient {
  color: var(--gold-soft) !important;
  background: none !important;
  -webkit-text-fill-color: var(--gold-soft) !important;
  display: inline;
}

.hero > .hero-info > p {
  color: rgba(255,255,255,0.72);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 34px;
}

/* Buttons — square, weighted, unambiguous */
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; }
.hero-buttons button {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 2px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  box-shadow: none !important;
}
.hero-buttons button:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.hero-buttons button.outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.32);
}
.hero-buttons button.outline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.hero-buttons button i { margin-right: 7px; }

/* Emblem replaces the looping globe video */
.skills-video-box { display: flex; justify-content: center; }
.hero-emblem {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: none;
}

/* Figures: a reference table, not scoreboard tiles */
.impact-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-dark);
  padding-top: 26px;
}
.impact-metrics .metric {
  background: none !important;
  border: 0 !important;
  border-right: 1px solid var(--rule-dark) !important;
  border-radius: 0 !important;
  padding: 0 22px 0 0;
  margin-right: 22px;
  box-shadow: none !important;
}
.impact-metrics .metric:last-child { border-right: 0 !important; margin-right: 0; padding-right: 0; }
.impact-metrics .metric h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 700;
  color: var(--gold-soft);
  margin: 0 0 4px;
  line-height: 1;
}
.impact-metrics .metric p {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0;
  line-height: 1.45;
}

/* ============================================================
   3. REMOVE THE GLOW LAYER SITE-WIDE
   ============================================================ */

.blackhole-box,
.back-vid,
.scroll-down { display: none !important; }

[class*="glow"],
.hero-info,
.card,
.metric {
  text-shadow: none !important;
}

.gradient {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--gold) !important;
}

/* ============================================================
   4. PAGE BODY — paper, not void
   ============================================================ */

body { background: var(--paper); color: var(--text); }

section { background: var(--paper); }
section:nth-of-type(even) { background: var(--paper-2); }
.hero, footer, .footer-bar, .navbar { background: var(--ink); }

.section-title,
h2, h3 { color: var(--ink); }

p, li { color: var(--muted); }

/* Cards — bordered documents */
.card {
  background: #fff !important;
  border: 1px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.card:hover { border-color: var(--gold) !important; transform: none !important; }
.card img, .card video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ink);
  padding: 22px 24px 0;
  margin: 0 0 10px;
}
.card p { padding: 0 24px; line-height: 1.7; }
.card button {
  margin: 18px 24px 24px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--ink);
  border-radius: 2px;
  padding: 11px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.card button:hover { background: var(--gold); color: #fff; }

/* ============================================================
   5. FOOTER — the emblem was rendering enormous
   ============================================================ */

footer, .footer-bar { color: rgba(255,255,255,0.7); }
footer img, .footer-bar img { max-height: 96px !important; width: auto !important; }
footer h4, footer h5, footer h6,
.footer-bar h4, .footer-bar h5, .footer-bar h6 { color: #fff; }
footer a, .footer-bar a { color: rgba(255,255,255,0.7); }
footer a:hover, .footer-bar a:hover { color: var(--gold-soft); }
footer ul, .footer-bar ul { list-style: none; padding-left: 0; }
footer li, .footer-bar li { margin-bottom: 9px; }

/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 24px 64px;
    text-align: left;
  }
  .skills-video-box { order: -1; }
  .hero-emblem { max-width: 190px; }
  .hero h1 { max-width: none; }
  .impact-metrics { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .impact-metrics .metric:nth-child(2n) { border-right: 0 !important; margin-right: 0; }
  .navbar .container .upper-side .phone-email { margin-right: 56px; }
}

@media (max-width: 575px) {
  .impact-metrics { grid-template-columns: 1fr; }
  .impact-metrics .metric {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-dark) !important;
    padding: 0 0 16px;
    margin: 0 0 16px;
  }
  .impact-metrics .metric:last-child { border-bottom: 0 !important; }
  .hero-buttons button { width: 100%; justify-content: center; }
  .navbar .container .upper-side .phone-email h4 { font-size: 13px !important; }
  .navbar .container .upper-side .phone-email small { display: none; }
}

/* ============================================================
   7. MOTION — present, never performing
   ============================================================ */

[data-aos] { transition-duration: 0.5s !important; }

*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================================
   8. TWO FIXES FOUND BY RENDERING THE PAGE
   ============================================================ */

/* (a) The footer was translucent black (rgba(0,0,0,0.7)) sitting
       over the cream page, which read as muddy grey. Made solid. */
footer.footer,
footer.footer::before {
  background: var(--ink) !important;
}
footer.footer::before {
  height: 3px !important;
  background: var(--gold) !important;
}
footer.footer { padding-top: 150px; }

/* (b) "Transformational" was breaking mid-word into
       "Transformat / ional". The global break-word rule that stops
       long URLs bursting the layout was also breaking headlines.
       Headings opt out; body text keeps the protection. */
h1, h2, h3, .hero h1, .section-title {
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.hero h1 {
  max-width: none;
  font-size: clamp(2rem, 3.4vw, 3.05rem);
}
.hero { grid-template-columns: 1.3fr 0.7fr; }
.hero > .hero-info > p { max-width: 52ch; }

/* ============================================================
   9. FOOTER STRUCTURE
   The link columns had no headings, so they read as a loose pile
   of words. Labelled, and the contact panel squared off.
   ============================================================ */

.footer .footer-col-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-dark);
}
.footer .footer-menu li a {
  font-size: 13.5px;
  color: rgba(255,255,255,0.68);
  transition: color 0.18s ease;
}
.footer .footer-menu li a:hover { color: var(--gold-soft); }
.footer .logo { max-height: 84px !important; margin-bottom: 20px; }
.footer p { color: rgba(255,255,255,0.6) !important; font-size: 13.5px !important; }

.footer .contact-box {
  background: var(--ink-2);
  border: 1px solid var(--rule-dark);
  border-left: 3px solid var(--gold);
  border-radius: 0;
  padding: 24px 26px;
}
.footer .contact-box h5 {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
  margin-bottom: 12px;
}
.footer .contact-box h3 {
  font-family: var(--font-body), sans-serif;
  font-size: 1.15rem !important;
  color: #fff !important;
  margin-bottom: 4px;
}

/* Contact band above the footer — was a heavy gold gradient slab */
.footer-bar .inner {
  background: var(--gold) !important;
  padding: 40px 36px !important;
}
.footer-bar .inner::after { display: none !important; }
.footer-bar .inner figure img { height: 34px !important; }
.footer-bar .inner h3 {
  font-size: 1.05rem !important;
  letter-spacing: 0.02em;
}
.footer-bar .inner p { font-size: 13.5px !important; }

/* (c) .hero-info carried width:50% from the old flex hero. Inside
       the new grid that halved the text column again, which is what
       kept breaking "Transformational" across two lines. */
.hero-info { width: 100% !important; }
.skills-video-box { width: 100% !important; }

/* (d) Emblem was overpowering the headline; figures column too tight */
.hero { grid-template-columns: 1.42fr 0.58fr; gap: 48px; }
.hero-emblem { max-width: 268px; }
.impact-metrics .metric p { font-size: 11px; letter-spacing: 0.04em; }
.impact-metrics .metric { padding-right: 16px; margin-right: 16px; }

/* ============================================================
   10. RESPONSIVE — MUST STAY LAST
   The single-column rules above were being overridden by the
   later desktop grid declaration, which collapsed the hero on
   phones. These come last so they win at small widths.
   ============================================================ */

@media (max-width: 991px) {
  .hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 52px 22px 60px !important;
    max-width: none;
  }
  .hero-info, .skills-video-box { width: 100% !important; }
  .skills-video-box { order: -1; justify-content: flex-start; }
  .hero-emblem { max-width: 132px !important; }
  .hero h1 { font-size: clamp(1.85rem, 7vw, 2.5rem); }
  .hero-buttons { margin-bottom: 38px; }
  .impact-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px 0;
  }
  .impact-metrics .metric { padding-right: 18px; margin-right: 18px; }
  .impact-metrics .metric:nth-child(2n) {
    border-right: 0 !important; margin-right: 0; padding-right: 0;
  }
}

@media (max-width: 575px) {
  .hero { padding: 44px 20px 52px !important; }
  .hero-emblem { max-width: 108px !important; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons button { width: 100%; }
  .impact-metrics { grid-template-columns: 1fr !important; }
  .impact-metrics .metric {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-dark) !important;
    padding: 0 0 14px !important;
    margin: 0 0 14px !important;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .impact-metrics .metric h3 { margin: 0; min-width: 76px; }
  .impact-metrics .metric:last-child { border-bottom: 0 !important; margin-bottom: 0 !important; }
  .footer .contact-box { margin-top: 22px; }
}

/* ============================================================
   11. CONTACT BAND — the float was wrapping text under the icon
   ============================================================ */
.footer-bar .inner .row > [class*="col-"] {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.footer-bar .inner figure {
  float: none !important;
  margin: 0 !important;
  flex: none;
}
.footer-bar .inner figure + h3 { margin-top: 0; }
.footer-bar .inner .row > [class*="col-"] > figure ~ * { margin-left: 0; }
.footer-bar .inner h3 { margin: 0 0 6px !important; }

/* Give the band's text its own column beside the icon */
.footer-bar .inner .row > [class*="col-"] {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
}
.footer-bar .inner figure { grid-row: 1 / span 2; }

/* Dead space between the band and the footer body */
footer.footer { padding-top: 120px; }

@media (max-width: 767px) {
  .footer-bar .inner { padding: 30px 24px !important; }
  .footer-bar .inner .row > [class*="col-"] { margin-bottom: 22px; }
  footer.footer { padding-top: 100px; }
  .hero .skills-video-box { margin-bottom: 4px; }
}