/* ==========================================================================
   Awesome Fresh — navbar + footer — customisation layer on Bootstrap 5.3

   How this file is organised:
     1. DESIGN TOKENS   — change colours / sizes here first
     2. BASE            — page defaults
     3. BUTTONS         — the three button styles used everywhere
     4. NAVBAR          — sticky top bar + mobile drawer
     5. DEMO SECTION    — the single body section
     6. FOOTER          — decor, CTA card, links, wordmark, legal bar
     7. RESPONSIVE      — all breakpoint overrides, kept together at the end

   Almost nothing here is "clever". If you want a different look, edit the
   tokens in section 1 — the rest of the file reads from them.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Brand colours ----------------------------------------------------
     Names kept from the earlier palette so none of the 100+ usages below
     had to change — only the values moved. --af-cream is now a neutral
     off-white, --af-blue a corporate navy-blue rather than electric. */
  --af-cream:        #ffffff;   /* page background                          */
  --af-cream-deep:   #f2f4f7;   /* subtle fills, image placeholders         */
  --af-ink:          #101828;   /* headings + dark surfaces                 */
  --af-ink-soft:     #475467;   /* body copy on light backgrounds           */
  --af-blue:         #0f4c81;   /* primary actions                          */
  --af-blue-dark:    #0b3a63;   /* hover                                    */
  --af-blue-glow:    #1c6fb5;   /* the lighter end of the footer gradient   */
  --af-line:         #e4e7ec;   /* hairline borders on light backgrounds    */
  --af-whatsapp:      #25d366;  /* WhatsApp brand green — do not restyle    */
  --af-whatsapp-dark: #1da851;  /* WhatsApp hover                           */

  /* --- Dark surfaces (footer) ------------------------------------------- */
  --af-night:        #101828;   /* footer background                        */
  --af-night-card:   #1d2939;   /* cards sitting on the footer              */
  --af-night-line:   #344054;   /* hairline borders in the dark             */
  --af-night-text:   #98a2b3;   /* muted text in the dark                   */

  /* --- Typography -------------------------------------------------------- */
  --af-font:         "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --af-font-accent:  "Instrument Serif", Georgia, serif;  /* italic words   */

  /* --- Shape ------------------------------------------------------------- */
  --af-radius-sm:     6px;      /* buttons                                  */
  --af-radius-md:    10px;      /* small cards                              */
  --af-radius-lg:    14px;      /* big cards / image frames                 */

  /* --- Rhythm ------------------------------------------------------------ */
  --af-nav-height:   76px;      /* also used as scroll-padding offset       */
  --af-section-y:    clamp(3.5rem, 8vw, 7rem);   /* vertical section space  */

  /* --- Motion ------------------------------------------------------------ */
  --af-ease:         cubic-bezier(.4, 0, .2, 1);
  --af-speed:        .28s;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
  font-family: var(--af-font);
  background: var(--af-cream);
  color: var(--af-ink);
  -webkit-font-smoothing: antialiased;
}

/* Anchor jumps shouldn't hide under the sticky navbar. */
html { scroll-behavior: smooth; scroll-padding-top: var(--af-nav-height); }

/* Emphasised words in headings. The old treatment was a serif italic —
   distinctive, but it reads as "creative agency". Colour carries the
   emphasis now and the heading stays in one typeface. */
h1 em, h2 em, h3 em, .accent {
  font-style: normal;
  font-weight: 700;
  color: var(--af-blue);
}

/* Skip link — invisible until a keyboard user tabs to it, then it drops
   into the top-left corner above everything else. */
.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  padding: .6rem 1rem;
  border-radius: var(--af-radius-sm);
  background: var(--af-ink);
  color: var(--af-cream);
  font-weight: 600;
  text-decoration: none;
}

.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--af-blue);
  margin-bottom: 1rem;
}


/* ==========================================================================
   3. BUTTONS
   Three variants, all sharing the same pill-ish geometry.
   ========================================================================== */
.btn-af-blue,
.btn-af-ghost,
.btn-af-outline,
.btn-af-whatsapp {
  --_pad-y: .6rem;
  --_pad-x: 1.05rem;

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--af-radius-sm);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--af-speed) var(--af-ease),
              color var(--af-speed) var(--af-ease),
              border-color var(--af-speed) var(--af-ease),
              transform .25s var(--af-ease);
}
.btn-af-blue:active,
.btn-af-ghost:active,
.btn-af-outline:active,
.btn-af-whatsapp:active { transform: translateY(1px); }

/* --- WhatsApp badge -------------------------------------------------------
   Keeps WhatsApp's own green rather than the brand blue. That is deliberate:
   people recognise the colour + glyph pair instantly and it reads as "this
   opens WhatsApp", not "this is another button". Restyling it to match the
   site would cost more in clicks than it gains in tidiness. */
.btn-af-whatsapp {
  position: relative;
  background: var(--af-whatsapp);
  color: #fff;
}
.btn-af-whatsapp:hover,
.btn-af-whatsapp:focus-visible {
  background: var(--af-whatsapp-dark);
  color: #fff;
}
.btn-af-whatsapp .bi { font-size: 1.05em; }

/* Small "live" dot. Sits after the label rather than on the corner so it
   never overlaps the text at narrow widths. */
.btn-af-whatsapp__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .8);
  animation: af-pulse 2s var(--af-ease) infinite;
}
@keyframes af-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, .75); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0);   }
}

/* Primary — the blue "+ Talk to us" pill */
.btn-af-blue {
  background: var(--af-blue);
  color: #fff;
}
.btn-af-blue:hover,
.btn-af-blue:focus-visible {
  background: var(--af-blue-dark);
  color: #fff;
}
.btn-af-blue .bi { font-size: .8em; }

/* Secondary on light backgrounds */
.btn-af-ghost {
  background: transparent;
  color: var(--af-ink);
  border-color: rgba(15, 15, 15, .22);
}
.btn-af-ghost:hover,
.btn-af-ghost:focus-visible {
  background: var(--af-ink);
  color: var(--af-cream);
  border-color: var(--af-ink);
}

/* Outline on dark backgrounds (footer "Follow us") */
.btn-af-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}
.btn-af-outline:hover,
.btn-af-outline:focus-visible {
  background: #fff;
  color: var(--af-ink);
  border-color: #fff;
}

/* Bootstrap's .btn-lg sizing, restated in our own scale */
.btn-lg.btn-af-blue,
.btn-lg.btn-af-whatsapp,
.btn-lg.btn-af-ghost,
.btn-lg.btn-af-outline {
  --_pad-y: .85rem;
  --_pad-x: 1.5rem;
  font-size: 1rem;
}


/* ==========================================================================
   4. NAVBAR
   ========================================================================== */
.site-nav{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1055;
    background:#fff;
}

body{
    padding-top:76px;
}
.site-nav > .container-xl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* --- Logo ----------------------------------------------------------------
   The mark is drawn in CSS (a sheared parallelogram) so there is no image
   to ship. Swap the whole .nav-logo__mark rule for an <img> if you have one. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
}
.nav-logo__mark {
  width: 26px;
  height: 20px;
  background: var(--af-ink);
  clip-path: polygon(0 100%, 28% 0, 60% 100%, 100% 0, 100% 34%, 62% 100%, 26% 34%);
}
.nav-logo__text {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--af-ink);
  line-height: 1;
}
/* The <em> half of the wordmark picks up the serif italic, same trick the
   headings use. Section 2 only targets h1–h3, so it is repeated here. */
.nav-logo__text em {
  font-family: var(--af-font-accent);
  font-style: italic;
  font-weight: 400;
}

/* --- Desktop links -------------------------------------------------------- */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
  align-items: center;
}
.nav-links__item {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  color: var(--af-ink);
  text-decoration: none;
}
/* Underline that grows from the left on hover. */
.nav-links__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1.5px;
  background: var(--af-blue);
  transition: width var(--af-speed) var(--af-ease);
}
.nav-links__item:hover::after,
.nav-links__item:focus-visible::after { width: 100%; }

/* --- Right-hand actions --------------------------------------------------- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Burger: two bars inside a dark square, morphing to an X when the
   offcanvas is open (Bootstrap flips aria-expanded for us). */
.nav-burger {
  --_bar-w: 18px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border-radius: var(--af-radius-sm);
  background: var(--af-ink);
  border: 0;
}
.nav-burger__bar {
  display: block;
  width: var(--_bar-w);
  height: 2px;
  background: var(--af-cream);
  transition: transform var(--af-speed) var(--af-ease),
              opacity .2s linear;
}
.nav-burger[aria-expanded="true"] .nav-burger__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bar:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* --- Mobile drawer -------------------------------------------------------- */
.nav-drawer {
  background: var(--af-cream);
  width: min(85vw, 360px);
  border-left: 1px solid var(--af-line);
}
.nav-drawer .offcanvas-header { padding: 1.25rem 1.5rem; }
.nav-drawer .offcanvas-body   { padding: 0 1.5rem 2rem; }

.nav-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-drawer__list li + li { border-top: 1px solid rgba(15, 15, 15, .1); }
.nav-drawer__list a {
  display: block;
  padding: .95rem 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--af-ink);
  text-decoration: none;
  transition: color var(--af-speed) var(--af-ease),
              padding-left var(--af-speed) var(--af-ease);
}
.nav-drawer__list a:hover {
  color: var(--af-blue);
  padding-left: .5rem;
}


/* ==========================================================================
   5. DEMO SECTION
   ========================================================================== */
.demo-hero {
  padding: var(--af-section-y) 0;
  overflow: hidden;   /* keeps the tilted image from widening the page */
}

.display-hero {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-bottom: 1.5rem;
}

.demo-hero__text {
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--af-ink-soft);
  margin-bottom: 2rem;
}

.demo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 3rem;
}

/* Small stat row under the CTAs */
.demo-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--af-line);
}
.demo-hero__stats li { display: flex; flex-direction: column; }
.demo-hero__stats strong {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.demo-hero__stats span {
  margin-top: .35rem;
  font-size: .85rem;
  color: var(--af-ink-soft);
}

/* --- Hero visual ---------------------------------------------------------- */
.demo-hero__visual {
  position: relative;
  border-radius: var(--af-radius-lg);
}
.demo-hero__img {
  display: block;
  width: 100%;
  height: clamp(320px, 52vw, 560px);
  object-fit: cover;
  border-radius: var(--af-radius-lg);
  background: var(--af-cream-deep);   /* fallback while the photo loads */
}

/* Floating badge pinned to the bottom-left of the image. */
.demo-hero__badge {
  position: absolute;
  left: clamp(.75rem, 3%, 1.5rem);
  bottom: clamp(.75rem, 3%, 1.5rem);
  right: clamp(.75rem, 3%, 1.5rem);
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.1rem;
  border-radius: var(--af-radius-md);
  background: rgba(12, 12, 12, .78);
  backdrop-filter: blur(10px);
  color: #fff;
}
.demo-hero__badge .bi {
  flex: none;
  font-size: 1.1rem;
  color: var(--af-blue-glow);
}
.demo-hero__badge strong { display: block; font-size: .95rem; }
.demo-hero__badge span   { display: block; font-size: .82rem; color: var(--af-night-text); }


/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  isolation: isolate;         /* keeps the decor behind content, not behind page */
  overflow: hidden;
  background: var(--af-night);
  color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) 0 2rem;
}

/* --- 6a. Decorative shape -------------------------------------------------
   One absolutely-positioned gradient. Delete this block (and the
   .footer-decor markup) if you want a plain dark footer. */
.footer-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* A restrained gradient wash instead of the old electric diagonal.
   Sits low and wide so it reads as depth, not decoration. */
.footer-decor__sweep {
  position: absolute;
  left: -10%;
  bottom: -40%;
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at 30% 100%,
                rgba(28, 111, 181, .35) 0%,
                rgba(15, 76, 129, .12) 45%,
                rgba(15, 76, 129, 0) 70%);
}

.footer-inner { position: relative; }

/* --- 6b. Brand column ----------------------------------------------------- */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  text-decoration: none;
}
.footer-brand .nav-logo__mark { background: #fff; }
.footer-brand__text {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
}
.footer-brand__text em { font-style: normal; color: var(--af-night-text); }

.footer-about {
  max-width: 38ch;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--af-night-text);
  margin-bottom: 1.5rem;
}

/* --- 6c. Link columns ----------------------------------------------------- */
.footer-col__title {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

.footer-col__list,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col__list li { margin-bottom: .6rem; }
.footer-col__list a {
  font-size: .9rem;
  color: var(--af-night-text);
  text-decoration: none;
  transition: color var(--af-speed) var(--af-ease);
}
.footer-col__list a:hover { color: #fff; }

/* --- Contact list — icon + value ------------------------------------------ */
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .75rem;
  font-size: .9rem;
  color: var(--af-night-text);
}
.footer-contact .bi {
  flex: none;
  line-height: 1.5;
  color: var(--af-blue-glow);
}
.footer-contact a {
  color: var(--af-night-text);
  text-decoration: none;
  word-break: break-word;      /* the email is long on narrow screens */
  transition: color var(--af-speed) var(--af-ease);
}
.footer-contact a:hover { color: #fff; }

/* --- 6d. Legal bar -------------------------------------------------------- */
.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--af-night-line);
  font-size: .82rem;
  color: var(--af-night-text);
}
.footer-legal p { margin: 0; }
.footer-legal__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal__list a {
  color: var(--af-night-text);
  text-decoration: none;
  transition: color var(--af-speed) var(--af-ease);
}
.footer-legal__list a:hover { color: #fff; }

.footer-legal__credits {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-badge {
  padding: .1rem .45rem;
  border: 1px solid var(--af-night-line);
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
}


/* ==========================================================================
   7. RESPONSIVE
   Mobile-first everything above; these are the deliberate exceptions.
   ========================================================================== */

/* --- Tablet and down (< 992px) --------------------------------------------
   The two footer columns collapse into one stack. `order-*` in the markup
   already puts the CTA card first and the wordmark last. */
@media (max-width: 991.98px) {

  /* Wordmark needs breathing room now that it follows the links. */

  /* Keep the CTA card from stretching to a full-width slab on tablets. */
}

/* --- Phone (< 768px) ------------------------------------------------------ */
@media (max-width: 767.98px) {
  :root { --af-nav-height: 68px; }

  /* Tighter CTA padding so the nav bar never wraps to two lines. */
  .site-nav .btn-af-blue { --_pad-x: .9rem; }

  .demo-hero__stats { gap: 1.75rem; }
  .demo-hero__stats strong { font-size: 1.5rem; }

  /* Legal bar stacks and left-aligns. */
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-legal__list { gap: 1.25rem; }
}

/* --- Small phone (< 480px) ------------------------------------------------ */
@media (max-width: 479.98px) {
  .demo-hero__badge { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* --- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ==========================================================================
   8. HERO + TRUST BAR
   ========================================================================== */
.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.hero__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 1.25rem;
}

.hero__lede {
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--af-ink-soft);
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero__img {
  display: block;
  width: 100%;
  height: auto;                /* releases the height attribute            */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--af-radius-lg);
  background: var(--af-cream-deep);
}

/* --- Trust bar -------------------------------------------------------------
   Four claims in one strip. Auto-fit grid rather than fixed columns, so it
   goes 4 → 2 → 1 on its own without breakpoint rules. */
.trustbar {
  padding: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.trustbar__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;                    /* the gap IS the divider, see background */
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--af-line);
  border: 1px solid var(--af-line);
  border-radius: var(--af-radius-md);
  overflow: hidden;
}
.trustbar__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.25rem;
  background: var(--af-cream);
}
.trustbar__list .bi {
  flex: none;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--af-blue);
}
.trustbar__list strong {
  display: block;
  font-size: .95rem;
  margin-bottom: .15rem;
}
.trustbar__list span {
  display: block;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--af-ink-soft);
}