/* ============================================================
   AssetLens — Global Stylesheet
   Brand: Teal #35918A | Navy #192E38 | Light #F5F5F2
   Palette extracted from the AssetLens logo (images/logo-1.png).
   ============================================================ */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand colours, extracted directly from the AssetLens logo mark
     (images/logo-1.png) — kept as the single source of truth for
     every teal/navy value used across the site. */
  --teal:            #35918A;
  --teal-rgb:        53,145,138;
  --teal-dark:       #25645F;
  --teal-dark-rgb:   37,100,95;
  --teal-light:      #40AFA6;
  --navy:            #192E38;
  --navy-rgb:        25,46,56;
  --navy-mid:        #223F4D;

  /* Neutral system: off-white, white, and supporting greys. */
  --charcoal:   #2C2C2C;
  --mid-grey:   #6B7280;
  --light-grey: #E8E8E4;
  --bg-light:   #F5F5F2;
  --bg-white:   #FFFFFF;

  --radius:     6px;
  --shadow:     0 4px 24px rgba(var(--navy-rgb),0.10);
  --shadow-sm:  0 2px 10px rgba(var(--navy-rgb),0.07);
  --transition: 0.25s ease;
  --max-w:      1200px;
  --font-main:  'Manrope', 'Segoe UI', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal-dark); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1rem; color: var(--mid-grey); }
p.lead { font-size: 1.15rem; color: var(--charcoal); }

/* ---- Layout Utilities ---- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.containerafsal { max-width: var(--max-w); margin: 0 10px; padding: 0 24px; }
.section { padding: 90px 0; }
.section-sm { padding: 60px 0; }
.section-dark { background: var(--navy); }
.section-light { background: var(--bg-light); }
.section-teal { background: var(--teal); }
.text-center { text-align: center; }
.text-white { color: #fff !important; }
.text-white h1, .text-white h2, .text-white h3, .text-white h4 { color: #fff; }
.text-white p { color: rgba(255,255,255,0.82); }

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.section-label-white { color: rgba(255,255,255,0.7); }

/* Section labels inside a dark inner-page hero always read as translucent
   white — applied here once so every hero-inner page (including legal pages)
   stays in sync without per-page inline overrides. */
.hero-inner .section-label { color: rgba(255,255,255,0.55); }

.section-header { margin-bottom: 56px; }
.section-header p { max-width: 640px; }
.section-header.text-center p { margin: 0 auto; }

.divider {
  width: 48px;
  height: 3px;
  background: var(--teal);
  margin: 16px 0 24px;
  border-radius: 2px;
}
.text-center .divider { margin: 16px auto 24px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}
.btn-outline:hover { background: var(--teal); color: #fff; }

.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.15); border-color: #fff; color: #fff; }

.btn-white {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.btn-white:hover { background: var(--bg-light); color: var(--navy); }

.btn-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---- Navigation ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* .nav establishes its own stacking context (position:fixed + z-index), so every
     descendant — including the mobile drawer and its overlay — is capped at this
     value from the page's perspective, no matter what z-index they're given
     locally. Raised above cookie-consent.js's banner/modal (z-index up to 100000)
     so the open drawer's lower links are never hidden behind it. */
  z-index: 100020;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--light-grey);
  transition: all var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow-sm); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.nav-logo img { height: 38px; width: auto; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--charcoal);
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--teal); background: rgba(var(--teal-rgb),0.07); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(50% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition);
  padding: 8px 0;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; pointer-events: all; }
.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--charcoal);
  transition: all var(--transition);
}
.nav-dropdown-menu a:hover { color: var(--teal); background: var(--bg-light); }
.nav-dropdown-menu a.nav-dropdown-viewall { display: none; }

.nav-caret { display: inline-block; transition: transform 0.25s ease; }

/* Mobile drawer chrome — hidden on desktop, enabled in the 768px breakpoint below */
.nav-drawer-head { display: none; }
.nav-close { display: none; }
.nav-overlay { display: none; }

/* Locks background scroll while the mobile drawer is open */
body.nav-open { overflow: hidden; }

.nav-cta { margin-left: 12px; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  padding-top: 72px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--navy) 55%, var(--teal-dark) 100%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: url('images/hero-bg.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* disabled on mobile — see responsive */
}
.hero-gridafsal {
  position: absolute;
  inset: 0;
  background-image: url('images/homepage-banner.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* disabled on mobile — see responsive */
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-top: 54px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 1px;
}
.hero h1 { color: #fff; margin-bottom: 24px; }
.hero h1 span { color: var(--teal-light); }
.hero-lead { font-size: 1.15rem; color: rgba(255,255,255,0.78); margin-bottom: 40px; max-width: 580px; }
.hero-tagline {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* Hero variants (inner pages)
   min-height (not a fixed height) is set generously so every inner-page
   banner renders at the same height regardless of how much breadcrumb/
   title/intro copy it holds -- content is vertically centered inside it,
   and it can still grow taller than this floor if future copy needs more
   room, so nothing is ever clipped. Reset to auto on mobile (below) since
   forcing this same height on narrow phones -- where the intro paragraph
   wraps into many more lines -- would waste a lot of vertical space. */
.hero-inner {
  min-height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 0 80px;
  background: linear-gradient(135deg, var(--navy) 60%, var(--teal-dark) 100%);
  position: relative;
  overflow: hidden;
}
.hero-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--teal-rgb),0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--teal-rgb),0.07) 1px, transparent 1px);
  background-size: 50px 50px;
}
.hero-inner .container { position: relative; z-index: 2; }
.hero-inner h1 { color: #fff; margin-bottom: 16px; }
.hero-inner p { color: rgba(255,255,255,0.75); max-width: 600px; font-size: 1.05rem; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255,255,255,0.5); }
.breadcrumb a:hover { color: var(--teal-light); }
.breadcrumb span { color: rgba(255,255,255,0.3); }

/* ---- Cards ---- */
.card-grid { display: grid; gap: 28px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg-white);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  padding: 36px 32px;
  transition: all var(--transition);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--teal-light); }
.card-icon {
  width: 52px;
  height: 52px;
  background: rgba(var(--teal-rgb),0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--teal);
  font-size: 1.5rem;
}
.card h3 { margin-bottom: 12px; font-size: 1.15rem; }
.card p { font-size: 0.93rem; margin-bottom: 0; }

.card-service {
  background: var(--bg-white);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  padding: 36px 32px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.card-service::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.card-service:hover::before { transform: scaleX(1); }
.card-service:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.card-service .service-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.card-service h3 { margin-bottom: 14px; }
.card-service p { font-size: 0.93rem; margin-bottom: 20px; }
.card-service .card-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-service .card-link::after { content: '→'; transition: transform var(--transition); }
.card-service:hover .card-link::after { transform: translateX(4px); }

/* ---- Stats / Trust Bar ---- */
.trust-bar {
  background: black;
  padding: 48px 0;
}
.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.trust-bar-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.trust-item { text-align: center; }
.trust-item .value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--teal-light);
  line-height: 1;
  margin-bottom: 8px;
}
.trust-item .label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

/* ---- Value Props ---- */
.value-prop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.value-prop-list { display: flex; flex-direction: column; gap: 24px; }
.value-prop-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.value-prop-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(var(--teal-rgb),0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 1.2rem;
}
.value-prop-text h4 { margin-bottom: 6px; color: var(--navy); font-size: 1rem; }
.value-prop-text p { font-size: 0.92rem; margin-bottom: 0; }

/* ---- Process Steps ---- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--light-grey);
}
.process-step { text-align: center; padding: 0 16px; position: relative; }
.step-number {
  width: 56px;
  height: 56px;
  background: var(--bg-white);
  border: 2px solid var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--teal);
  margin: 0 auto 20px;
  position: relative;
  z-index: 2;
}
.process-step h4 { font-size: 0.95rem; margin-bottom: 8px; color: var(--navy); }
.process-step p { font-size: 0.85rem; }

/* ---- CTA Banner ---- */
.cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  padding: 90px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.cta-banner .container { position: relative; z-index: 2; }
.cta-banner h2 { color: #fff; margin-bottom: 16px; }
.cta-banner p { color: rgba(255,255,255,0.78); max-width: 560px; margin: 0 auto 36px; }

/* ---- Why Choose Us ---- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.why-item {
  background: var(--bg-light);
  border-radius: 10px;
  padding: 28px;
  border-left: 4px solid var(--teal);
}
/* .why-item:hover { ; } */
.why-item h4 { color: var(--navy); margin-bottom: 8px; }
.why-item p { font-size: 0.92rem; margin-bottom: 0; }

/* ---- Leadership ---- */
.leader-card {
  background: var(--bg-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--light-grey);
}
.leader-photo {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: top center;
}
.leader-info { padding: 28px 32px; }
.leader-info h3 { color: var(--navy); margin-bottom: 4px; }
.leader-role {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.leader-bio-points { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.leader-bio-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--mid-grey);
}
.leader-bio-point::before {
  content: '—';
  color: var(--teal);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.7;
}

/* ---- Vision / Mission / Values ---- */

/* Vision & Mission: a dark, high-contrast band up top for the two
   aspirational statements — visually distinct from the Values grid below
   so the page reads as "who we're becoming" then "how we operate". */
.vm-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: start;
  background: linear-gradient(135deg, var(--navy) 60%, var(--teal-dark) 100%);
  border-radius: 16px;
  padding: 56px 48px;
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
}
.vm-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.vm-panel { position: relative; z-index: 2; }
.vm-icon { font-size: 2rem; margin-bottom: 14px; line-height: 1; }
.vm-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 12px;
}
.vm-panel p {
  color: rgba(255,255,255,0.85);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 0;
}
.vm-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.14);
  position: relative;
  z-index: 2;
}

/* Values: a five-item grid. Flexbox + centered wrap (rather than a fixed
   grid) means an uneven last row — e.g. 2 leftover cards on tablet — stays
   centered instead of trailing off to one side. */
.values-intro h3 { margin-bottom: 8px; }
.values-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.value-card {
  flex: 1 1 220px;
  max-width: 260px;
  background: var(--bg-white);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  padding: 32px 26px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.value-card:hover::before { transform: scaleX(1); }
.value-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--teal-light); }
.value-icon {
  width: 52px;
  height: 52px;
  background: rgba(var(--teal-rgb),0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.5rem;
}
.value-card h4 { margin-bottom: 10px; }
.value-card p { font-size: 0.89rem; line-height: 1.6; margin-bottom: 0; }

/* ---- Service Detail ---- */
.service-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.service-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 24px;
}
.service-table th {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.service-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--light-grey);
  color: var(--charcoal);
  vertical-align: top;
}
.service-table tr:hover td { background: var(--bg-light); }

/* ---- Engagement Models ---- */
.engagement-card {
  background: var(--bg-white);
  border-radius: 12px;
  border: 1px solid var(--light-grey);
  padding: 36px 32px;
  transition: all var(--transition);
  position: relative;
}
.engagement-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--teal); }
.engagement-card .engagement-icon {
  width: 60px;
  height: 60px;
  background: rgba(var(--teal-rgb),0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: 20px;
}
.engagement-card h3 { color: var(--navy); margin-bottom: 10px; }
.engagement-card .desc { font-size: 0.93rem; margin-bottom: 20px; }
.engagement-card .tag {
  display: inline-block;
  background: rgba(var(--teal-rgb),0.1);
  color: var(--teal-dark);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Contact Form ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  background: rgba(var(--teal-rgb),0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-info-text h4 { font-size: 0.88rem; color: var(--mid-grey); font-weight: 500; margin-bottom: 4px; }
.contact-info-text a, .contact-info-text p { font-size: 1rem; color: var(--navy); font-weight: 600; margin-bottom: 0; }
.contact-info-text a:hover { color: var(--teal); }

.contact-form { background: var(--bg-white); border-radius: 12px; padding: 48px; border: 1px solid var(--light-grey); box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--light-grey);
  border-radius: var(--radius);
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--bg-white);
  transition: border-color var(--transition);
  outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.12); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.82rem; color: var(--mid-grey); margin-top: 12px; }

/* ---- Footer ---- */
.footer {
  background: var(--navy);
  background-size: cover;
  color: rgba(255,255,255,0.75);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 32px;
}
.footer-logo { margin-bottom: 16px; }
.footer-logo img { height: 36px; filter: brightness(0) invert(1); opacity: 0.9; }
.footer-tagline { font-size: 0.88rem; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.footer-desc { font-size: 0.88rem; line-height: 1.8; color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: all var(--transition);
}
.footer-social a:hover { background: var(--teal); color: #fff; }

.footer-col h5 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.9rem; color: rgba(255,255,255,0.65); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--teal-light); }
.footer-contact-item { font-size: 0.9rem; color: rgba(255,255,255,0.65); margin-bottom: 10px; display: flex; gap: 8px; align-items: flex-start; }
.footer-contact-item a { color: rgba(255,255,255,0.65); }
.footer-contact-item a:hover { color: var(--teal-light); }
.footer-contact-item .fa { width: 16px; flex-shrink: 0; text-align: center; padding-top: 2px; color: var(--teal-light); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.38);
}

/* ---- Lifecycle Bar ---- */
.lifecycle-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 48px;
}
.lifecycle-bar a { display: flex; height: 100%; }
.lifecycle-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px 24px;
  background: var(--bg-light);
  border-right: 1px solid var(--light-grey);
  text-align: center;
  transition: all var(--transition);
  cursor: default;
}
.lifecycle-bar a:last-child .lifecycle-item { border-right: none; }
.lifecycle-item:hover { background: var(--teal); }
.lifecycle-item:hover * { color: #fff !important; }
.lifecycle-num { font-size: 1.5rem; font-weight: 800; color: var(--teal); margin-bottom: 8px; line-height: 1; }
.lifecycle-title { font-size: 0.95rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.lifecycle-desc { font-size: 0.82rem; color: var(--mid-grey); margin-top: auto; }

/* ---- Tags / Badges ---- */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
  background: rgba(var(--teal-rgb),0.1);
  color: var(--teal-dark);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .process-steps::before { display: none; }
  .trust-bar-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .value-prop { gap: 48px; }
  .service-overview { gap: 48px; }
  .value-card { flex-basis: calc(33.333% - 24px); }
}

@media (max-width: 768px) {
  /* iOS Safari fix: background-attachment:fixed causes blank/white sections */
  .hero-grid { background-attachment: scroll; }
  .hero-gridafsal { background-attachment: scroll; }
  .feature-photo-bg { background-attachment: scroll; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .section { padding: 64px 0; }

  /* ---- Mobile nav: right-side drawer, clearly separated from page content ---- */
  .nav-menu {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 28px;
    box-shadow: -12px 0 44px rgba(var(--navy-rgb),0.22);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.32s ease;
    /* Above cookie-consent.js's banner/modal (z-index 99999/100000) so the drawer's
       lower links (Handover/Operate Advisory, Engagement Models, Contact) aren't
       hidden behind the cookie banner for first-time visitors. */
    z-index: 2;
  }
  .nav-menu.open { transform: translateX(0); }
  /* Force readable text even on pages (like 404) whose nav links are inline-styled white for a dark navbar */
  .nav-menu .nav-link { color: var(--charcoal) !important; }

  .nav-drawer-head { display: flex; justify-content: flex-end; padding: 10px 12px 2px; }
  .nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-light);
    border: none;
    color: var(--navy);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
  .nav-close:hover { background: var(--light-grey); }

  .nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    /* .nav uses backdrop-filter, which makes it the containing block for its
       fixed-position descendants — inset:0 alone would size this against
       .nav's ~72px navbar box instead of the viewport. Explicit viewport
       units sidestep that and guarantee full-page coverage. */
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(var(--navy-rgb),0.55);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .nav-overlay.open { opacity: 1; visibility: visible; }

  .nav-link { border-radius: 0; padding: 16px 24px; font-size: 0.98rem; }

  /* Services: collapsed by default, expands only on tap */
  .nav-dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    opacity: 1;
    pointer-events: none;
    background: var(--bg-light);
    padding: 0 0 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-dropdown.open .nav-dropdown-menu { max-height: 340px; pointer-events: all; }
  .nav-dropdown-menu a { padding: 13px 20px; font-size: 0.92rem; border-bottom: 1px solid rgba(var(--navy-rgb),0.06); }
  .nav-dropdown-menu a:last-child { border-bottom: none; }
  .nav-dropdown-menu a.nav-dropdown-viewall { display: block; color: var(--teal); font-weight: 700; }
  .nav-dropdown.open .nav-caret { transform: rotate(180deg); }

  .nav-toggle { display: flex; position: relative; z-index: 3; }
  .nav-toggle span { transition: transform 0.25s ease, opacity 0.2s ease; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* While the drawer is open, the hamburger sits in the same top-right corner as the
     drawer's own close button and was intercepting its taps — hide it so only one
     close control is active (and reachable) at a time. */
  .nav-toggle.open { opacity: 0; pointer-events: none; }

  .nav-cta { display: none; }
  .card-grid-2, .card-grid-3 { grid-template-columns: 1fr; }
  .card-grid-4 { grid-template-columns: 1fr; }
  .value-prop, .service-overview, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-grid { grid-template-columns: 1fr; }
  .vm-band { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
  .vm-divider { width: 100%; height: 1px; align-self: auto; }
  .value-card { flex-basis: calc(50% - 24px); }
  .process-steps { grid-template-columns: 1fr; }
  .trust-bar-grid { grid-template-columns: repeat(2, 1fr); }
  .lifecycle-bar { grid-template-columns: repeat(2, 1fr); }
  .trust-bar-grid-3 { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-inner { padding: 120px 0 60px; min-height: 0; }
  .contact-form { padding: 28px 20px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .trust-bar-grid { grid-template-columns: 1fr; }
  .lifecycle-bar { grid-template-columns: 1fr; }
  .btn-group { flex-direction: column; align-items: flex-start; }
  .vm-band { padding: 32px 22px; }
  .value-card { flex-basis: 100%; max-width: 100%; }
}

/* ============================================================
   IMAGE COMPONENTS — Modern visual integration
   ============================================================ */

/* --- Inner hero: photo background variant --- */
.hero-inner.has-photo {
  background-size: cover;
  background-position: center top;
  background-blend-mode: normal;
}
.hero-inner.has-photo::before { display: none; }
.hero-inner.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-inner.has-photo .container { position: relative; z-index: 2; }

/* --- Image Mosaic (stacked photo layout) --- */
.img-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 280px 160px;
  gap: 12px;
  margin-bottom: 32px;
}
.img-mosaic img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.img-mosaic .mosaic-main { grid-row: span 2; }
.img-mosaic .mosaic-badge {
  position: absolute;
  bottom: 20px; left: 20px;
  background: var(--teal);
  color: #fff;
  border-radius: 10px;
  padding: 18px 22px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(var(--teal-rgb),0.35);
  z-index: 3;
  line-height: 1;
}
.mosaic-badge-num { font-size: 2rem; font-weight: 800; margin-bottom: 4px; display: block; }
.mosaic-badge-label { font-size: 0.78rem; opacity: 0.9; }

/* --- Full-width Feature Photo Section --- */
.feature-photo {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  display: flex;
  align-items: center;
}
.feature-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease;
}
.feature-photo:hover .feature-photo-bg { transform: scale(1.04); }
.feature-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(var(--navy-rgb),0.92) 40%, rgba(var(--navy-rgb),0.58) 100%);
}
.feature-photo .container { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.feature-photo h2 { color: #fff; margin-bottom: 16px; }
.feature-photo p { color: rgba(255,255,255,0.80); max-width: 560px; }
.feature-stat-row {
  display: flex;
  gap: 48px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.feature-stat .num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--teal-light);
  line-height: 1;
}
.feature-stat .lbl {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
}

/* --- Service Feature Image (advisory pages) --- */
.service-img-block {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(var(--navy-rgb),0.14);
  position: relative;
}
.service-img-block img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  min-height: 360px;
}
.service-img-block .img-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(var(--navy-rgb),0.85) 0%, transparent 100%);
  padding: 40px 24px 24px;
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Client / Partner Logo Strip --- */
.logo-strip {
  padding: 44px 0;
  background: var(--bg-light);
  border-top: 1px solid var(--light-grey);
  border-bottom: 1px solid var(--light-grey);
}
.logo-strip-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mid-grey);
  margin-bottom: 28px;
}
.logo-strip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.logo-strip-row img {
  height: 32px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.40;
  transition: all 0.3s ease;
  cursor: default;
}
.logo-strip-row img:hover { filter: grayscale(30%); opacity: 0.75; }

/* --- Service Cards with Image Top --- */
.card-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--light-grey);
  background: var(--bg-white);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}
.card-img-wrap:hover { box-shadow: 0 10px 36px rgba(var(--navy-rgb),0.13); transform: translateY(-5px); border-color: var(--teal-light); }
.card-img-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  z-index: 2;
}
.card-img-wrap:hover::before { transform: scaleX(1); }
.card-img-wrap .card-photo {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.card-img-wrap .card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card-img-wrap:hover .card-photo img { transform: scale(1.06); }
.card-img-wrap .card-content {
  padding: 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card-img-wrap .card-stage {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.card-img-wrap h3 { font-size: 1.1rem; margin-bottom: 10px; }
.card-img-wrap p { font-size: 0.92rem; margin-bottom: 20px; flex: 1; }
.card-img-wrap .card-cta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card-img-wrap .card-cta::after { content: ' →'; transition: transform 0.25s ease; display: inline-block; }
.card-img-wrap:hover .card-cta::after { transform: translateX(4px); }

/* --- Blog Preview Cards --- */
.blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-preview-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--light-grey);
  background: var(--bg-white);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}
.blog-preview-card:hover { box-shadow: 0 8px 28px rgba(var(--navy-rgb),0.12); transform: translateY(-4px); }
.blog-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-preview-card:hover .blog-thumb img { transform: scale(1.06); }
.blog-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
.blog-cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.blog-body h3 { font-size: 1rem; margin-bottom: 10px; color: var(--navy); line-height: 1.4; }
.blog-body p { font-size: 0.88rem; margin-bottom: 0; flex: 1; }
.blog-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--mid-grey);
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--light-grey);
}
.blog-author-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.blog-read-more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal);
  margin-left: auto;
  white-space: nowrap;
}

/* --- Responsive: image components --- */
@media (max-width: 1024px) {
  .blog-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-stat-row { gap: 32px; }
}
@media (max-width: 768px) {
  .img-mosaic { grid-template-columns: 1fr; grid-template-rows: 260px; }
  .img-mosaic .mosaic-sub { display: none; }
  .img-mosaic .mosaic-badge { bottom: 12px; left: 12px; }
  .blog-preview-grid { grid-template-columns: 1fr; }
  .logo-strip-row { gap: 28px; }
  .logo-strip-row img { height: 26px; }
  .feature-photo { min-height: 360px; }
  .feature-stat-row { gap: 24px; }
  .service-img-block img { min-height: 260px; }
}

/* ====================================================
   ACCORDION — Service Scope Sections
   ==================================================== */
.service-accordion {
  border: 1px solid var(--light-grey);
  border-radius: 12px;
  overflow: hidden;
}

.accordion-group-title {
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.accordion-item {
  border-top: 1px solid var(--light-grey);
}

.accordion-item:first-child { border-top: none; }

.accordion-group .accordion-item:first-child {
  border-top: 1px solid var(--light-grey);
}

.accordion-trigger {
  width: 100%;
  background: #fff;
  border: none;
  text-align: left;
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background 0.2s;
}

.accordion-trigger:hover { background: var(--bg-light); }

.accordion-trigger h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}

.acc-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--teal);
  line-height: 1;
  transition: transform 0.3s ease, background 0.2s;
}

.accordion-item.open .acc-icon {
  transform: rotate(45deg);
  background: var(--teal);
  color: #fff;
}

.accordion-content {
  display: none;
  padding: 4px 24px 24px;
  background: #fff;
}

.accordion-item.open .accordion-content { display: block; }

.acc-field { margin-top: 16px; }

.acc-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 5px;
}

.acc-value {
  font-size: 0.92rem;
  color: var(--mid-grey);
  line-height: 1.65;
  margin: 0;
}

.acc-tag {
  display: inline-block;
  margin-top: 6px;
  background: var(--bg-light);
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
}

/* Footer Legal Links */
.footer-legal {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-legal a {
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal a:hover { color: #fff; }

.footer-legal .sep {
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .accordion-trigger { padding: 16px 18px; }
  .accordion-content { padding: 4px 18px 20px; }
  .accordion-group-title { padding: 12px 18px; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 8px; }
}