/* ============================================================
   ASONA ABUSUA GLOBAL — EDITORIAL LAYER
   ------------------------------------------------------------
   Applies the structural principles that make apple.com feel
   calm and premium — WITHOUT copying Apple's actual design.

   What's taken (generic, widely used, not owned by anyone):
     · one slim navigation row, small type, lots of air
     · a centred hero: one large statement, one supporting line
     · one idea per full-width section, big vertical rhythm
     · separation by whitespace and background change, never by
       borders, shadows, or boxes
     · text measure capped so lines stay readable
     · a near-monochrome palette with a single accent

   What's NOT taken: Apple's typeface, their exact spacing scale,
   their product-tile grid, their nav structure, their imagery
   treatment, or any of their copy. Those are their trade dress.

   Brand identity kept throughout: Asona navy, gold, Playfair.
   ============================================================ */

:root {
  --e-ink:     #0B1424;
  --e-paper:   #FFFFFF;
  --e-paper-2: #F5F5F7;
  --e-gold:    #B8912F;
  --e-gold-lt: #D9BC6A;
  --e-text:    #1D1D1F;
  --e-muted:   #6E6E73;

  --e-measure: 680px;   /* readable line length */
  --e-gutter:  clamp(20px, 5vw, 64px);
  --e-rhythm:  clamp(72px, 11vh, 132px);
}

/* ============================================================
   1. NAVIGATION — one slim row
   Was two stacked rows (logo + contact, then the menu). Apple's
   lesson here is that a nav should be a thin, quiet strip you
   stop noticing. Collapsed to a single row.
   ============================================================ */

.navbar .container {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1320px;
  padding-left: var(--e-gutter);
  padding-right: var(--e-gutter);
  min-height: 52px;
}

.navbar .container .upper-side {
  width: auto !important;
  flex: none;
  padding: 0 !important;
  border-bottom: 0 !important;
  display: flex;
  align-items: center;
  gap: 22px;
  order: 1;
}

.navbar .container .upper-side .logo img { height: 30px !important; }

/* Contact details move to the far right, quiet */
.navbar .container .upper-side .phone-email {
  margin: 0 !important;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  order: 3;
}
.navbar .container .upper-side .phone-email h4 {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.75) !important;
}
.navbar .container .upper-side .phone-email small { display: none; }

.navbar .menu {
  order: 2;
  flex: 1;
  display: flex;
  justify-content: center;
}
.navbar .menu > ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 30px);
  margin: 0;
}
.navbar .menu > ul > li > a {
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.82) !important;
  padding: 15px 0 !important;
  white-space: nowrap;
}
.navbar .menu > ul > li > a:hover { color: #fff !important; }
.navbar .menu > ul > li > a.active { color: #fff !important; }
.navbar .menu > ul > li > a.active::after { display: none; }

.navbar {
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(11,20,36,0.94) !important;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

/* ============================================================
   2. HERO — one statement, centred
   ============================================================ */

.hero {
  display: block !important;
  max-width: none !important;
  text-align: center;
  padding: clamp(64px, 10vh, 116px) var(--e-gutter) clamp(60px, 9vh, 104px) !important;
  background: var(--e-ink);
}

.hero-info { max-width: 940px; margin: 0 auto; }

.hero-info-title {
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--e-gold-lt);
  font-weight: 400;
  margin-bottom: 14px;
}
.hero-info-title::before { display: none; }

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 auto 18px !important;
  max-width: 16ch;
}
.hero h1 .hero-accent { display: block; }

.hero > .hero-info > p {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem) !important;
  line-height: 1.45;
  color: rgba(255,255,255,0.68);
  max-width: 34ch;
  margin: 0 auto 32px !important;
}

/* Text links with a chevron, not heavy buttons */
.hero-buttons { justify-content: center; gap: 30px; margin-bottom: 0 !important; }
.hero-buttons button {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--e-gold-lt) !important;
  font-size: 1.02rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-buttons button::after {
  content: "\203A";
  font-size: 1.25em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.hero-buttons button:hover { color: #fff !important; }
.hero-buttons button:hover::after { transform: translateX(3px); }
.hero-buttons button i { display: none; }

/* The emblem sits above the statement, small */
.skills-video-box { justify-content: center; margin-bottom: 26px; }
.hero-emblem { max-width: 96px !important; }

/* Figures become a quiet band below, not part of the statement */
.impact-metrics {
  border-top: 0 !important;
  padding-top: clamp(48px, 7vh, 76px) !important;
  max-width: 1000px;
  margin: 0 auto;
  gap: 0;
}
.impact-metrics .metric {
  border: 0 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  text-align: center;
}
.impact-metrics .metric h3 {
  font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
  font-weight: 600;
  color: #fff !important;
  letter-spacing: -0.02em;
}
.impact-metrics .metric p {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ============================================================
   3. SECTIONS — one idea each, air instead of boxes
   ============================================================ */

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

section {
  padding: var(--e-rhythm) var(--e-gutter) !important;
  background: var(--e-paper);
  text-align: center;
}
section:nth-of-type(even) { background: var(--e-paper-2); }
.hero, .navbar, footer, .footer-bar { text-align: left; }
.hero { text-align: center; }

section > .container { max-width: 1120px; }

.section-title,
section > .container > h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem) !important;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--e-text);
  margin: 0 auto 18px;
  max-width: 20ch;
}

section p { color: var(--e-muted); }
section > .container > p,
.section-subtitle {
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: var(--e-measure);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   4. CARDS — no borders, no shadows, no hover lift
   ============================================================ */

.card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center;
}
.card:hover { border: 0 !important; transform: none !important; }
.card img, .card video {
  border-radius: 14px;
  margin-bottom: 22px;
  aspect-ratio: 3 / 2;
}
.card h2 {
  padding: 0 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.01em;
  color: var(--e-text);
  margin-bottom: 10px !important;
}
.card p { padding: 0 !important; font-size: 1rem; }
.card button {
  margin: 16px 0 0 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--e-gold) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.card button::after { content: " \203A"; }
.card button i { display: none; }
.card button:hover { background: none !important; color: var(--e-ink) !important; }

/* ============================================================
   5. FOOTER — quiet, fine print
   ============================================================ */

footer.footer, .footer-bar { text-align: left; }
footer.footer {
  background: var(--e-paper-2) !important;
  color: var(--e-muted) !important;
  padding-top: 68px !important;
  border-top: 1px solid #D2D2D7;
}
footer.footer::before { display: none !important; }
footer.footer p { color: var(--e-muted) !important; font-size: 12.5px !important; }
footer.footer a { color: var(--e-muted) !important; font-size: 12.5px; }
footer.footer a:hover { color: var(--e-text) !important; text-decoration: underline; }
footer.footer .footer-col-title {
  color: var(--e-text) !important;
  border-bottom: 0 !important;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  padding-bottom: 4px;
}
footer.footer .logo { max-height: 44px !important; }
footer.footer .contact-box {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  padding: 0 !important;
}
footer.footer .contact-box h5 { color: var(--e-text) !important; letter-spacing: 0; text-transform: none; font-size: 12px; }
footer.footer .contact-box h3 { color: var(--e-text) !important; font-size: 1rem !important; }

.footer-bar .inner {
  background: var(--e-paper) !important;
  color: var(--e-text) !important;
  border: 1px solid #D2D2D7;
  border-radius: 16px;
  padding: 36px !important;
}
.footer-bar .inner h3 { color: var(--e-text) !important; }
.footer-bar .inner p { color: var(--e-muted) !important; }
.footer-bar .inner figure img { filter: none !important; opacity: 0.55; }

/* ============================================================
   6. RESPONSIVE — stays last
   ============================================================ */

@media (max-width: 1100px) {
  .navbar .menu > ul { gap: 13px; }
  .navbar .menu > ul > li > a { font-size: 11.5px !important; }
  .navbar .container .upper-side .phone-email { display: none; }
}

@media (max-width: 991px) {
  .navbar .container { min-height: 48px; }
  .navbar .menu { position: fixed; flex: none; }
  .hero { padding: 56px var(--e-gutter) 60px !important; }
  .hero h1 { max-width: none; }
  .hero-emblem { max-width: 74px !important; }
  .hero-buttons { flex-direction: column; gap: 16px; align-items: center; }
  .impact-metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 34px 0 !important; }
  .impact-metrics .metric { padding: 0 8px !important; }
}

@media (max-width: 575px) {
  .impact-metrics { grid-template-columns: repeat(2, 1fr) !important; }
  .impact-metrics .metric { display: block !important; border: 0 !important; }
  .impact-metrics .metric h3 { min-width: 0; }
  .card img, .card video { aspect-ratio: 4 / 3; }
}

/* ============================================================
   7. FIXES FROM THE FIRST RENDER
   ============================================================ */

/* (a) 13 menu items wrapped onto a second row and collided with
       the hero. Kept on one line, sized to fit. */
.navbar .menu > ul {
  flex-wrap: nowrap !important;
  gap: clamp(10px, 1.35vw, 22px) !important;
}
.navbar .menu > ul > li > a {
  font-size: clamp(10.5px, 0.85vw, 12.5px) !important;
}

/* (b) The hamburger and its close button were showing on desktop */
@media (min-width: 992px) {
  .navbar .hamburger,
  .navbar .mobile-menu-close { display: none !important; }
}

/* (c) The emblem rendered below the figures because the hero is a
       plain block. Made it a column so order can be set. */
.hero {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}
.hero .skills-video-box { order: -1; width: auto !important; }
.hero .hero-info { order: 0; width: 100%; }
.hero .impact-metrics { order: 1; width: 100%; }

/* (d) Headline was running to four lines */
.hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem) !important;
  max-width: 20ch;
}
.hero > .hero-info > p { max-width: 42ch; }

/* (e) The nav row was wrapping to two lines: 13 links plus the
       phone number needed more width than the bar had. The phone
       number leaves the bar (it's in the footer and on Contact),
       and the row is locked to one line. */
.navbar .container { flex-wrap: nowrap !important; }
@media (min-width: 992px) {
  .navbar .container .upper-side .phone-email { display: none !important; }
}
.navbar .menu > ul { gap: clamp(8px, 1.15vw, 20px) !important; }
.navbar .menu > ul > li > a { font-size: clamp(10.5px, 0.8vw, 12px) !important; }

/* (f) Headline still ran to four lines; tightened so the first
       clause holds one line. Emblem pulled closer to the text. */
.hero h1 {
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  max-width: 26ch;
}
.hero .skills-video-box { margin-bottom: 18px; }
.hero { padding-top: clamp(44px, 6vh, 72px) !important; }
.hero-info-title { margin-bottom: 10px; }

/* (g) On phones the hero inherited justify-content:space-between,
       which pushed 200px of dead air between the emblem and the
       headline. The emblem's box was also holding 300px of height
       for a 74px image. */
.hero { justify-content: flex-start !important; }
.hero .skills-video-box {
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}

/* (h) A 1px-off full-bleed backdrop left a faint seam down the
       left edge. The hero paints its own background now. */
.hero::before { display: none !important; }

/* ============================================================
   8. "WHO WE ARE" — the section my centring broke
   ------------------------------------------------------------
   It's a 1fr/1fr grid: prose left, image right. Centred text
   inside a half-width column reads badly, and the four value
   cards were squeezed into that same half. Restructured so the
   prose leads full width and the values sit below as a row.
   ============================================================ */

.about-section { text-align: left; }
.about-section .section-title { text-align: center; }

.about-content {
  grid-template-columns: 1fr 0.85fr !important;
  gap: clamp(36px, 5vw, 72px) !important;
  align-items: start !important;
  max-width: 1120px;
  margin: 0 auto;
}

.about-text h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
  letter-spacing: -0.01em;
  color: var(--e-text) !important;
  margin: 32px 0 10px !important;
  max-width: none;
  text-align: left;
}
.about-text > h2:first-child { margin-top: 0 !important; }
.about-text p {
  font-size: 1rem !important;
  line-height: 1.65;
  color: var(--e-muted) !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: left;
}

/* Image column: rounded, sticky, no crop surprises */
.about-content > img,
.about-content .about-image img,
.about-content figure img {
  border-radius: 16px;
  width: 100%;
  height: auto;
}

/* Values move out of the text column into a full-width row */
.core-principles {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: 1120px;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
  margin-top: clamp(44px, 6vw, 72px) !important;
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid #D2D2D7;
}
.principle {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.principle h4 {
  color: var(--e-text) !important;
  font-size: 1.02rem !important;
  margin-bottom: 8px !important;
  line-height: 1.3;
}
.principle p {
  color: var(--e-muted) !important;
  font-size: 0.94rem !important;
  line-height: 1.55;
  text-align: left;
}

@media (max-width: 991px) {
  .about-content { grid-template-columns: 1fr !important; }
  .about-content > img,
  .about-content .about-image,
  .about-content figure { order: -1; }
  .core-principles { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .core-principles { grid-template-columns: 1fr !important; gap: 26px !important; }
}

/* (i) Dead column under the image once the values moved out */
.about-content { align-items: center !important; }
.about-content > div:last-child,
.about-content figure,
.about-content .about-image { align-self: center; }

/* ============================================================
   9. MOBILE MENU PANEL
   The panel opens now, but it was inheriting the desktop
   centring rules — links centred, no left rhythm, and the close
   button sat under the overlay so it couldn't be tapped.
   ============================================================ */

@media (max-width: 991px) {
  /* Close button must sit above the dimmer */
  .navbar .hamburger { z-index: 10001 !important; position: relative; }
  #mobile-nav-overlay { z-index: 9998 !important; }
  .navbar .container .menu { z-index: 9999 !important; }

  /* Links read left-aligned, like a list, with room to breathe */
  .navbar .container .menu ul > li > a {
    text-align: left !important;
    font-size: 15px !important;
    padding: 15px 26px !important;
    letter-spacing: 0 !important;
    color: rgba(255,255,255,0.9) !important;
  }
  .navbar .container .menu ul > li > a:hover,
  .navbar .container .menu ul > li > a.active {
    color: var(--e-gold-lt) !important;
    background: rgba(255,255,255,0.04);
  }
  .navbar .container .menu ul > li > a.active {
    box-shadow: inset 3px 0 0 var(--e-gold);
  }

  /* Panel width and inner padding */
  .navbar .container .menu {
    width: min(320px, 84vw) !important;
    padding-top: 76px !important;
    background: #0B1424 !important;
  }

  /* Contact details at the foot of the panel, where they're useful */
  .navbar .container .menu .phone-email {
    display: block !important;
    margin: 24px 26px 0 !important;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
}

/* The hamburger sits inside .navbar, which is position:sticky with
   z-index 100 — that creates a stacking context, so the button's
   own z-index was trapped below the overlay and the X couldn't be
   tapped. Taking it out of that context fixes it. */
@media (max-width: 991px) {
  /* A fixed child still cannot escape an ancestor's stacking
     context, so the navbar itself has to sit above the dimmer. */
  .navbar { z-index: 10000 !important; }
  .navbar .hamburger {
    position: fixed !important;
    top: 9px;
    right: 16px;
    z-index: 10001 !important;
  }
}