:root {
  /* Brand: deep navy + warm gold/brass (was gray-blue #5B6B7D) */
  --primary: #12406E;
  --primary-dark: #081D33;
  --primary-light: #1E5C99;
  --primary-rgb: 18, 64, 110;

  --accent: #C9A961;
  --accent-light: #E4CE94;
  --accent-dark: #9C7C3C;
  --accent-rgb: 201, 169, 97;

  /* Typography — architectural/corporate system, not editorial serif */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Studio neutrals used by the editorial redesign layer at the end of this file */
  --ivory: #F6F2EA;
  --stone: #8A8578;
  --stone-line: rgba(138, 133, 120, 0.28);
  --hairline: rgba(201, 169, 97, 0.35);

  /* Spacing scale (previously missing) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius / shadow refinements */
  --radius-sm: 8px;
  --radius-full: 999px;
  --shadow-gold: 0 20px 50px rgba(var(--accent-rgb), 0.35);
  --shadow-glass: 0 8px 32px rgba(6, 15, 28, 0.28);
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.section-title, .page-hero-title {
  font-family: var(--font-heading);
}

/* Fix hardcoded rgba(27,79,140,...) badge tint to follow the new token */
.section-badge {
  background: rgba(var(--primary-rgb), 0.08);
}

/* .btn-gold-custom previously mixed hardcoded grays (#8A97A6/#3C4653) with
   var(--accent) — now a clean brass gradient with dark-navy text for contrast */
.btn-gold-custom {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  color: var(--primary-dark);
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.35);
}
.btn-gold-custom:hover {
  box-shadow: var(--shadow-gold);
  color: var(--primary-dark);
}

::selection {
  background: var(--accent);
  color: var(--primary-dark);
}

/* ---------- 2. Top bar ---------- */
.nv-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1032;
  background: var(--dark-deep, #060D1A);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.14);
}
.nv-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  gap: 12px;
}
.nv-topbar-links { display: flex; align-items: center; gap: 20px; }
.nv-tb-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
  transition: color .2s;
}
.nv-tb-link i { color: var(--accent); font-size: 11.5px; width: 12px; text-align: center; flex-shrink: 0; }
.nv-tb-link:hover { color: var(--accent-light); }
.nv-tb-chevron { font-size: 8.5px !important; width: auto !important; opacity: .55; }
.nv-tb-sep { width: 1px; height: 13px; background: rgba(255,255,255,0.12); flex-shrink: 0; }

.nv-tb-gallery-wrap { position: relative; display: flex; align-items: center; }
.nv-tb-gallery-drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(6,15,28,0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: var(--radius-sm);
  min-width: 190px;
  padding: 6px 0;
  z-index: 2000;
  box-shadow: var(--shadow-glass);
}
.nv-tb-gallery-wrap:hover .nv-tb-gallery-drop,
.nv-tb-gallery-wrap.nv-open .nv-tb-gallery-drop { display: block; }
.nv-tb-gallery-drop a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-body); font-size: 12.5px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color .15s, background .15s;
}
.nv-tb-gallery-drop a i { color: var(--accent); font-size: 10.5px; }
.nv-tb-gallery-drop a:hover { color: var(--accent-light); background: rgba(var(--accent-rgb), 0.08); }

.nv-topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nv-tb-phone {
  font-family: var(--font-accent); font-size: 13px; font-weight: 700;
  color: var(--accent-light);
  text-decoration: none;
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; letter-spacing: 0.3px;
  transition: color .2s;
}
.nv-tb-phone i { font-size: 11.5px; }
.nv-tb-phone:hover { color: var(--accent); }
.nv-tb-social { display: flex; align-items: center; gap: 4px; }
.nv-tb-social-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: rgba(255,255,255,0.45);
  font-size: 11.5px;
  text-decoration: none;
  transition: color .2s, background .2s, transform .2s;
}
.nv-tb-social-btn:hover { color: var(--accent-light); background: rgba(var(--accent-rgb), 0.12); transform: translateY(-1px); }

@media (max-width: 991px) {
  #topBar { display: none !important; }
  #mainNavbar { top: 0 !important; }
}
@media (min-width: 992px) {
  #mainNavbar { top: 40px !important; }

  /* Full-bleed header bars: let the topbar and navbar's own generous
     side padding be the edge margin, rather than Bootstrap's centered,
     narrow-gutter container — keeps both bars' content edges aligned
     with each other and gives the logo/nav/CTA proper breathing room
     from the viewport edge on real desktop widths. */
  #mainNavbar > .container,
  #topBar > .container {
    max-width: 100% !important;
    padding-left: clamp(32px, 5vw, 100px);
    padding-right: clamp(32px, 5vw, 100px);
  }
}

/* ---------- 3. Navbar — clean white premium ----------
   Note: style.css defines #mainNavbar (ID selector) with its own glass
   background + scoped --nav-text/--nav-underline tokens that would beat
   a plain .nv-navbar class override on specificity alone regardless of
   load order. We deliberately re-target #mainNavbar directly (and use
   !important on the handful of properties style.css also sets) so this
   white/navy/gold theme reliably wins without editing style.css itself. */
#mainNavbar {
  --nav-text: #0F2745;
  --nav-text-hover: #C8A24D;
  --nav-text-active: #C8A24D;
  --nav-underline: #C8A24D;
  background: #FFFFFF !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid #EAEAEA;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: box-shadow .35s ease, padding .35s ease;
}
#mainNavbar.scrolled {
  background: #FFFFFF !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  border-bottom-color: #EAEAEA;
}
@media (min-width: 992px) {
  #mainNavbar.scrolled .nav-link:not(.navbar-cta) { color: var(--nav-text) !important; }
  #mainNavbar.scrolled .nav-link:not(.navbar-cta):hover,
  #mainNavbar.scrolled .nav-link:not(.navbar-cta):focus-visible { color: var(--nav-text-hover) !important; }
}
#mainNavbar .nav-link {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--nav-text) !important;
  position: relative;
  padding: 10px 14px !important;
  transition: color .3s ease, transform .3s ease;
}

@media (min-width: 992px) {
  /* Fluid item spacing: comfortably wide on large desktops, tightens
     gracefully (never below 10px) on the 992-1199px laptop tier so 8 menu
     items + the CTA never wrap or overflow. Sized ~20-25% slimmer than
     before as part of the overall navbar height reduction. */
  #mainNavbar .navbar-nav { column-gap: clamp(10px, 1.8vw, 26px) !important; flex-wrap: nowrap !important; }
  #mainNavbar .nav-link {
    padding: 8px 6px !important;
    font-size: 14.5px !important;
    white-space: nowrap;
  }
  #mainNavbar .nav-link:hover { transform: translateY(-2px); }

  .navbar-cta { padding: 10px 22px !important; margin-left: var(--space-3); }
}

/* Narrowest desktop tier (992-1199px laptops): keep a touch more headroom
   here so single-line text and the CTA never wrap or overflow. */
@media (min-width: 992px) and (max-width: 1199px) {
  #mainNavbar .nav-link { font-size: 13px !important; padding: 8px 4px !important; }
  #mainNavbar .navbar-nav { column-gap: 8px !important; }
  /* The tight padding/font-size above is sized for the plain nav links —
     applied to the CTA (also a .nav-link) it left too little room for the
     icon + full "Get Quote" text, so restore adequate padding here. */
  #mainNavbar .navbar-cta { padding: 9px 20px !important; font-size: 13px !important; }
}

/* Brand block — clean logo mark, no medallion/glow behind it. The frame
   element is kept in the markup (structure is off-limits) but stripped
   down to a plain auto-sized flex wrapper so only the logo artwork shows,
   letting the transparent PNG sit directly on the white navbar. */
#mainNavbar .nv-logo-frame,
#mainNavbar.scrolled .nv-logo-frame {
  width: auto;
  height: auto;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* "Est. <founded_year>" mark under the logo image. */
#mainNavbar .nv-logo-est {
  margin-top: 2px;
  font-family: var(--font-accent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #C8A24D;
  white-space: nowrap;
}

#mainNavbar .navbar-brand:hover .nv-logo-frame {
  box-shadow: none;
}

#mainNavbar .navbar-brand {
  gap: 20px;
  padding: 4px 0;
}
@media (min-width: 992px) {
  #mainNavbar .navbar-brand { gap: 18px; }
}

/* Logo mark — sized ~23% larger than the original style.css values at
   every breakpoint, mirroring its base/scrolled/desktop/mobile structure
   so the responsive scaling behavior is unchanged, just bigger. Bumped a
   further ~10% on top of that per an explicit "make the header a bit
   bigger" request. */
#mainNavbar .navbar-logo-img { height: 89px; }
#mainNavbar.scrolled .navbar-logo-img { height: 70px; }
@media (min-width: 992px) {
  #mainNavbar .navbar-logo-img { height: 74px; }
  #mainNavbar.scrolled .navbar-logo-img { height: 61px; }
}
@media (max-width: 768px) {
  #mainNavbar .navbar-logo-img { height: 66px; }
  #mainNavbar.scrolled .navbar-logo-img { height: 58px; }
}

#mainNavbar .nv-brand-name {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  color: #0F2745;
}

#mainNavbar .nv-brand-tagline {
  color: #C8A24D;
}
#mainNavbar .nav-link::after {
  left: 20px; right: 20px; bottom: 4px; top: auto;
  width: auto; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
#mainNavbar .nav-link:not(.navbar-cta):hover,
#mainNavbar .nav-link:not(.navbar-cta).active { color: var(--nav-text-hover) !important; }
#mainNavbar .nav-link:hover::after,
#mainNavbar .nav-link.active::after { transform: scaleX(1); width: auto; }

.navbar-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-dark));
  color: var(--primary-dark) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  border-radius: var(--radius-full);
  padding: 13px 30px !important;
  font-weight: 700 !important;
  margin-left: var(--space-3);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.35), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
  /* .navbar-cta is a flex sibling of ul.navbar-nav inside #navbarNav
     (a flex row at >=992px). Its own `overflow: hidden` above — needed to
     mask the ::before shine sweep — removes flexbox's automatic min-width
     protection, so under a tight viewport the button was free to shrink
     below its content width and clip the icon + "Get Quote" text (showing
     as "Get Quot" with the icon gone). flex-shrink: 0 stops that; the
     inline-flex + gap replaces the old `me-1` icon margin and guarantees
     the icon stays vertically centered with the text at any size. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.navbar-cta i {
  /* Hardcoded (not `inherit`) so the icon's contrast against the gold
     gradient never depends on how the .navbar-cta text-color cascade
     fight across style.css/premium.css resolves. */
  color: #0A1F3D !important;
  font-size: 19.5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.navbar-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-gold), 0 0 0 1px rgba(255, 255, 255, 0.24) inset;
  color: var(--primary-dark) !important;
}
.navbar-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.navbar-cta:hover::before { transform: translateX(120%); }
.navbar-cta::after { display: none; }

/* ---------- 4. Mega menu ----------
   .nv-mega-panel is the hover-detection shell only (no visible chrome) —
   its old 14px margin-top opened a dead zone between the "Services" link
   and the panel where the cursor was over neither element, so :hover on
   .nv-mega-holder dropped and the panel vanished mid-move. That gap is now
   padding-top (still part of the panel's hoverable box) instead of margin
   (outside it), so the hover chain stays unbroken across the same visual
   gap. All the actual visible card styling (border/bg/blur/shadow/padding)
   moved onto .nv-mega-grid so nothing looks different. */
.nv-mega-panel {
  margin-top: 0;
  padding-top: 14px;
  /* Neutralize Bootstrap's default .dropdown-menu chrome (white #fff
     background, light border, black box-shadow) — this shell is only a
     hover-detection wrapper, but without this reset Bootstrap's white
     background/border shows through around and behind .nv-mega-grid,
     which is the actual visible card. */
  background: #0f1b2d;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.nv-mega-panel:focus,
.nv-mega-panel:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.nv-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: var(--radius-lg, 20px);
  background: rgba(8, 20, 38, 0.98);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  padding: var(--space-5);
}
@media (min-width: 992px) {
  .nv-mega-panel {
    width: 700px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  /* Open the mega menu on hover, not just on click — matches the topbar
     Gallery dropdown's hover-to-open pattern (see .nv-tb-gallery-wrap).
     .nv-open is added/removed by JS with a short close delay (main.js)
     so a brief, fast mouse pass doesn't flicker the menu shut; the plain
     :hover rule stays as an instant-response fallback. */
  .nv-mega-holder:hover > .nv-mega-panel,
  .nv-mega-holder.nv-open > .nv-mega-panel {
    display: block;
  }
}
.nv-mega-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.nv-mega-item:hover, .nv-mega-item.active { background: rgba(var(--accent-rgb), 0.1); transform: translateX(3px); }
.nv-mega-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: var(--accent-light);
  font-size: 16.5px;
}
.nv-mega-item.nv-mega-highlight .nv-mega-icon {
  background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-dark));
  color: var(--primary-dark);
}
.nv-mega-text { display: flex; flex-direction: column; gap: 3px; }
.nv-mega-title { font-family: var(--font-accent); font-size: 14.5px; font-weight: 700; color: #fff; }
.nv-mega-desc { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.55); }

/* Simple dropdown (Projects) */
.nv-dropdown {
  background: rgba(8, 20, 38, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 12px;
  min-width: 240px;
  padding: 8px;
  margin-top: 14px;
  /* Bootstrap's default .dropdown-menu box-shadow (black, but reads as a
     stray outline against the dark navy theme) is never overridden
     elsewhere — replace it with a theme-matching shadow. */
  outline: none !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35) !important;
}

/* Kill Bootstrap's default focus/active outline + box-shadow on every
   nav dropdown toggle and panel so no white ring/border can appear on
   hover, click, or keyboard focus. */
#mainNavbar .dropdown-toggle,
#mainNavbar .dropdown-toggle:focus,
#mainNavbar .dropdown-toggle:active,
#mainNavbar .dropdown-menu,
#mainNavbar .dropdown-menu:focus,
#mainNavbar .nav-item.dropdown .nav-link:focus,
#mainNavbar .nv-mega-holder:focus-within > .nav-link {
  outline: none !important;
  box-shadow: none !important;
}
.nv-dropdown-item {
  font-family: var(--font-accent);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  border-radius: 8px;
  padding: 10px 14px !important;
  display: flex; align-items: center; gap: 10px;
}
.nv-dropdown-item i { color: var(--accent); width: 16px; text-align: center; }
.nv-dropdown-item:hover, .nv-dropdown-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-light);
}

@media (max-width: 991px) {
  /* No hover on touch devices, and the Services link now navigates on tap
     (no Bootstrap dropdown-toggle) — so show the sub-links inline under
     "Services" within the mobile menu instead of behind a hover/tap gate. */
  .nv-mega-panel { display: block; position: static; width: 100%; margin-top: 8px; padding-top: 0; transform: none; left: 0; }
  .nv-mega-grid { grid-template-columns: 1fr; }
  /* The collapsed nav panel (.navbar-collapse, styled in responsive.css)
     keeps its own dark premium panel background for the dropdown/mega
     content — only that inner panel stays dark, the white header bar
     itself (logo + toggler) now matches desktop. */
  #mainNavbar .nv-mega-title { color: #fff; }
}

/* Hamburger toggler — dark navy on the white bar at every scroll state
   (previously white-only lines that vanished once the navbar was made
   solid white instead of dark glass). */
#mainNavbar .hamburger-icon span {
  background: #0F2745 !important;
}

/* ---------- 5. Premium card / glass primitives ---------- */
.nv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.nv-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--accent); display: inline-block; }
section[style*="--dark"] .nv-eyebrow,
.nv-section-dark .nv-eyebrow { color: var(--accent-light); }

.nv-card {
  background: var(--white);
  border: 1px solid rgba(var(--primary-rgb), 0.08);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-sm);
  transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, border-color .35s ease;
}
.nv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(var(--accent-rgb), 0.3); }

.nv-glass {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg, 20px);
}

/* ---------- 6. Construction Process ---------- */
.nv-process { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-4); counter-reset: nv-step; }
.nv-process-step { position: relative; text-align: center; padding: var(--space-5) var(--space-3); }
.nv-process-step::before {
  counter-increment: nv-step;
  content: counter(nv-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: rgba(var(--accent-rgb), 0.85);
  margin-bottom: var(--space-2);
}
.nv-process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 34px; right: -18px;
  width: 36px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.5) 0 6px, transparent 6px 12px);
  display: none;
}
@media (min-width: 992px) { .nv-process-step:not(:last-child)::after { display: block; } }
.nv-process-icon {
  width: 56px; height: 56px; margin: 0 auto var(--space-3);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: var(--accent-light);
  font-size: 20.5px;
}
.nv-process-title { font-family: var(--font-accent); font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.nv-process-desc { font-size: 13px; color: var(--gray); line-height: 1.6; }
@media (max-width: 991px) { .nv-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .nv-process { grid-template-columns: 1fr; } }

/* ---------- 7. Video gallery ---------- */
.nv-video-card {
  position: relative;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--primary-dark), var(--dark, #0A1628));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
}
.nv-video-play {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26.5px;
  transition: transform .3s ease, background .3s ease;
}
.nv-video-card:hover .nv-video-play { transform: scale(1.1); background: var(--accent); color: var(--primary-dark); }
.nv-video-card.nv-video-trigger { border: 0; padding: 0; width: 100%; cursor: pointer; }
.nv-video-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-5);
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color: #fff;
}

/* Client testimonial video — dark "frame" container around the native
   <video>; the video keeps its own 20px radius/shadow (rounded-4 shadow-lg
   utilities), this just wraps it in a premium bordered card. */
.nv-testimonial-frame {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 28px;
  padding: 14px;
  box-shadow: var(--shadow-glass), 0 30px 80px rgba(0, 0, 0, 0.45);
}

.nv-testimonial-frame video {
  border-radius: 20px;
  display: block;
  background: #000;
}

@media (max-width: 575px) {
  .nv-testimonial-frame {
    padding: 8px;
    border-radius: 20px;
  }

  .nv-testimonial-frame video {
    border-radius: 14px;
  }
}

/* Testimonial video — custom centered Play/Pause overlay button.
   The native <video controls> bottom bar is left completely alone; this
   just layers a big centered toggle on top, YouTube/Vimeo-style. */
.nv-video-wrap {
  position: relative;
}

/* Click-to-toggle region — covers the video content only, stopping short
   of the bottom control-bar strip (native controls are ~40-44px tall) so a
   click there is handled purely by the browser, never by us. Keeping this
   as a separate element (rather than listening on <video> itself) avoids
   double-toggling when a click lands on the native play/pause button. */
.nv-video-click-catcher {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 1;
  cursor: pointer;
}

/* Flexbox centering layer — the button is the only clickable thing in it
   (pointer-events re-enabled on the button itself), everything else passes
   clicks straight through to the video/native controls beneath. */
.nv-video-center-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.nv-video-toggle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 3px solid #D4AF37;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32.5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.nv-video-toggle.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.nv-video-toggle:hover {
  transform: scale(1.08);
  background: rgba(0, 0, 0, 0.72);
}

/* Nudge the Play icon a hair right of center — an equilateral triangle's
   visual centroid sits left of its bounding-box center, which reads as
   off-center inside a perfectly round button otherwise. */
.nv-video-toggle .fa-play {
  margin-left: 4px;
}

@media (max-width: 767px) {
  .nv-video-toggle {
    width: 70px;
    height: 70px;
    font-size: 24.5px;
  }
}

/* ---------- 8. Certifications strip ---------- */
.nv-cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5); }
.nv-cert-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  transition: transform .3s ease, border-color .3s ease;
}
.nv-cert-item:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.4); }
.nv-cert-item i { font-size: 36px; color: var(--accent); margin-bottom: 14px; display: block; }
.nv-cert-item p { font-family: var(--font-accent); font-size: 15px; font-weight: 700; color: #fff; margin: 0; letter-spacing: 0.4px; }

/* ---------- 9. About Nivaas Foundations — premium trust section ---------- */

/* -- Section shell: depth via texture + soft ambient glows -- */
.nva-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FBFBFD 0%, #F2F4F8 100%);
}

.nva-texture {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--primary-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary-rgb), 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.nva-section-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.nva-section-glow-1 {
  width: 420px; height: 420px;
  top: -120px; right: -100px;
  background: rgba(var(--accent-rgb), 0.14);
}
.nva-section-glow-2 {
  width: 380px; height: 380px;
  bottom: -140px; left: -90px;
  background: rgba(var(--primary-rgb), 0.10);
}

.nva-heading { letter-spacing: -0.01em; }

/* ---------- 9b. About — premium split layout (image + copy) ---------- */
.nva-split-section { padding: 60px 0; position: relative; }

.nva-split-grid {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 80px;
  align-items: stretch;
}

/* Grid items default to min-width:auto, which refuses to shrink below the
   image's intrinsic content size and pushes the column past its 55% track —
   this is what was overflowing the floating cards past the section edge. */
.nva-split-left,
.nva-split-right { min-width: 0; }

.nva-split-left { text-align: left; }
.nva-split-badge { font-size: 14px; }

.nva-split-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  max-width: 650px;
  font-size: 64px;
  line-height: 1.1;
  margin: 20px 0 0;
}

.nva-split-left .divider-line { margin: 24px 0; }

.nva-split-desc {
  max-width: 520px;
  font-size: 19px;
  line-height: 1.8;
  color: #6B7280;
  text-align: left;
  margin: 0 0 28px;
}

.nva-feature-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nva-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-accent);
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
}
.nva-feature-item i { color: var(--accent); font-size: 18px; flex-shrink: 0; }

.nva-split-image-wrap { position: relative; height: 100%; }

.nva-split-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.25) 0%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.nva-split-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(6, 15, 28, 0.25);
}

.nva-float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 22px;
  box-shadow: 0 20px 50px rgba(6, 15, 28, 0.18);
}
.nva-float-card-years { top: 32px; left: -28px; }
.nva-float-card-projects { bottom: 32px; right: -28px; }

.nva-float-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: var(--accent-light);
  font-size: 17px;
}
.nva-float-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--dark);
  line-height: 1.2;
}
.nva-float-label {
  display: block;
  font-family: var(--font-accent);
  font-size: 12.5px;
  color: var(--gray);
  white-space: nowrap;
}

@media (max-width: 991px) {
  .nva-split-section { padding: 60px 0; }
  .nva-split-grid { grid-template-columns: 1fr; gap: 60px; }
  .nva-split-heading { font-size: 42px; }
  .nva-float-card-years { left: 0; }
  .nva-float-card-projects { right: 0; }
}

@media (max-width: 575px) {
  .nva-split-section { padding: 48px 0; }
  .nva-split-grid { padding: 0 20px; gap: 48px; }
  .nva-split-heading { font-size: 32px; }
  .nva-split-img { height: 340px; }
  .nva-float-card { padding: 12px 16px; gap: 10px; }
  .nva-float-card-years { top: 16px; }
  .nva-float-card-projects { bottom: 16px; }
}

/* ---------- 9c. About — clean 2-column layout (photo+pillars left,
   heading/copy/stats/quote/CTA right) --------- */
.nva-about2-section { padding: 90px 0; background: var(--white); }

.nva-about2-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  font-size: 40px;
  line-height: 1.15;
  margin: 0;
}

.nva-about2-lead {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray);
  margin: 0 0 18px;
}

.nva-about2-img-wrap {
  position: relative;
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(6, 15, 28, 0.2);
  margin-bottom: 24px;
}
.nva-about2-img-wrap img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.nva-about2-img-badge {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 14px 20px;
}
.nva-about2-img-badge i {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--dark);
  font-size: 16.5px;
}
.nva-about2-img-badge strong { display: block; font-family: var(--font-heading); font-size: 22px; color: #fff; line-height: 1.2; }
.nva-about2-img-badge span { display: block; font-family: var(--font-accent); font-size: 12px; color: rgba(255,255,255,0.75); white-space: nowrap; }

/* Pillars — 2x2 checklist under the image */
.nva-about2-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nva-about2-pillar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg, 16px);
  background: var(--light);
  border: 1px solid rgba(27, 79, 140, 0.08);
  transition: var(--transition);
}
.nva-about2-pillar:hover { background: var(--white); box-shadow: var(--shadow-sm); border-color: rgba(var(--accent-rgb), 0.3); }
.nva-about2-pillar-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--dark);
  font-size: 16px;
}
.nva-about2-pillar h5 { font-family: var(--font-heading); font-size: 14px; color: var(--dark); margin: 0 0 2px; }
.nva-about2-pillar p { font-size: 12px; color: var(--gray); margin: 0; line-height: 1.5; }

/* Stats row — horizontal pair */
.nva-about2-stats {
  display: flex;
  align-items: center;
  background: var(--light);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid rgba(27, 79, 140, 0.08);
  padding: 20px 24px;
  margin: 20px 0;
}
.nva-about2-stat { flex: 1; text-align: center; }
.nva-about2-stat strong { display: block; font-family: var(--font-heading); font-size: 28px; color: var(--primary); line-height: 1; }
.nva-about2-stat span { display: block; font-family: var(--font-accent); font-size: 12.5px; color: var(--gray); margin-top: 4px; }
.nva-about2-stats-sep { width: 1px; align-self: stretch; background: rgba(27, 79, 140, 0.12); }

/* Quote callout */
.nva-about2-quote {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 26px 28px;
  margin-bottom: 24px;
}
.nva-about2-quote i.fa-quote-left { color: rgba(var(--accent-rgb), 0.5); font-size: 22px; margin-bottom: 10px; display: block; }
.nva-about2-quote p {
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.6;
  color: #fff;
  margin: 0 0 10px;
}
.nva-about2-quote span { font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-light); font-weight: 700; }

@media (max-width: 991px) {
  .nva-about2-section { padding: 70px 0; }
  .nva-about2-heading { font-size: 34px; }
  .nva-about2-img-wrap img { height: 360px; }
}

@media (max-width: 575px) {
  .nva-about2-section { padding: 56px 0; }
  .nva-about2-heading { font-size: 28px; }
  .nva-about2-img-wrap img { height: 280px; }
  .nva-about2-pillars { grid-template-columns: 1fr; }
  .nva-about2-stats { flex-direction: column; gap: 14px; }
  .nva-about2-stats-sep { display: none; }
}

/* Balances the ragged last line that plain center-align leaves on a
   4-line paragraph; degrades harmlessly to normal wrap on old browsers. */
.nva-header .section-subtitle {
  max-width: 680px;
  text-wrap: balance;
}

/* Gold-tinted badge — flagship header, distinct from default navy badge */
.nva-header .section-badge.nva-badge {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent-dark);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* Gold accent line draws in under the heading once revealed */
.nva-header .divider-line {
  width: 0;
  transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.15s;
}
.nva-header.aos-animate .divider-line { width: 60px; }

.nva-body { margin-top: var(--space-4, 16px); }

/* -- Left: stat cards -- */
.nva-stat-wrap { position: relative; height: 100%; }

.nva-stat-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.nva-stat-glow-1 {
  width: 220px; height: 220px;
  top: -36px; left: -30px;
  background: rgba(var(--accent-rgb), 0.16);
}
.nva-stat-glow-2 {
  width: 190px; height: 190px;
  bottom: -30px; right: -24px;
  background: rgba(18, 64, 110, 0.14);
}

.nva-stat-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 100%;
}

.nva-stat-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg, 20px);
  padding: 32px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.nva-stat-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-light), var(--accent), var(--accent-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nva-stat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: var(--shadow-lg);
}

.nva-stat-card:hover::after { transform: scaleX(1); }

.nva-stat-icon {
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.07);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
  font-size: 21.5px;
  transition: all 0.4s ease;
}

.nva-stat-card:hover .nva-stat-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--dark, #0A1628);
  transform: scale(1.08);
}

.nva-stat-num {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
}

.nva-stat-label {
  font-family: var(--font-accent);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gray, #6C7A8D);
  letter-spacing: 0.3px;
}

/* -- Right: value cards -- */
.nva-value-list { display: flex; flex-direction: column; gap: 16px; height: 100%; }

.nva-value-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(18, 64, 110, 0.08);
  border-radius: var(--radius-lg, 20px);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.nva-value-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-light), var(--accent), var(--accent-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nva-value-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: var(--shadow-md);
}

.nva-value-card:hover::before { transform: scaleX(1); }

.nva-value-icon {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19.5px;
  transition: transform 0.4s ease, border-radius 0.4s ease, background 0.4s ease, color 0.4s ease;
}

.nva-value-card:hover .nva-value-icon {
  transform: scale(1.08) rotate(-4deg);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--dark, #0A1628);
}

.nva-value-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark, #0A1628);
  margin-bottom: 4px;
}

.nva-value-desc {
  font-size: 14px;
  color: var(--gray, #6C7A8D);
  line-height: 1.7;
  margin: 0;
}

/* -- Bottom: premium promise highlight — bold navy card, the visual climax -- */
.nva-promise {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-6, 32px);
  border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: var(--shadow-lg);
  padding: 48px 44px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.nva-promise:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(8, 29, 51, 0.35);
}

.nva-promise-glow {
  position: absolute;
  top: -60%; left: 50%;
  width: 480px; height: 480px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.nva-promise-icon {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1.5px solid rgba(var(--accent-rgb), 0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 22.5px;
}

.nva-promise-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 14px;
}

.nva-promise-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: #fff;
  line-height: 1.65;
  max-width: 780px;
  margin: 0 auto;
}

@media (min-width: 768px) and (max-width: 991px) {
  .nva-stat-grid { gap: 24px; }
  .nva-stat-card { padding: 34px 22px; }
}

@media (max-width: 991px) {
  .nva-promise { padding: 36px 28px; }
}

@media (max-width: 575px) {
  .nva-stat-grid { gap: 14px; }
  .nva-stat-card { border-radius: 16px; padding: 20px 12px; }
  .nva-stat-icon { width: 46px; height: 46px; font-size: 18.5px; margin-bottom: 10px; }
  .nva-value-card { padding: 18px; gap: 14px; border-radius: 16px; }
  .nva-promise { padding: 30px 20px; border-radius: 16px; }
  .nva-promise-icon { width: 48px; height: 48px; font-size: 19.5px; }
}

/* ---------- 10. Process steps — card grid (Our Process > Our Approach) ---------- */
.nv-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.nv-step-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(27, 79, 140, 0.1);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nv-step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.nv-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.nv-step-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: var(--accent-light);
  font-size: 22px;
}
.nv-step-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}
.nv-step-title { font-family: var(--font-accent); font-weight: 700; font-size: 16.5px; color: var(--dark); margin-bottom: 8px; }
.nv-step-desc { font-size: 14.5px; color: var(--gray); line-height: 1.7; margin: 0; }

@media (max-width: 991px) {
  .nv-step-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .nv-step-grid { grid-template-columns: 1fr; }
}

/* ---------- 11. Team cards ---------- */
.nv-team-card { text-align: center; padding: var(--space-6) var(--space-4); }
.nv-team-photo-wrap { width: 140px; height: 140px; margin: 0 auto var(--space-4); position: relative; }
.nv-team-photo {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(var(--accent-rgb), 0.35);
}
.nv-team-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.nv-team-role { font-family: var(--font-accent); font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-dark); }

/* ---------- 12. Office / project gallery grid ---------- */
.nv-office-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.nv-office-gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); }
.nv-office-gallery > *:first-child { grid-column: span 2; grid-row: span 2; }
.nv-office-gallery img:first-child { height: 100%; min-height: 460px; }
@media (max-width: 991px) {
  .nv-office-gallery { grid-template-columns: repeat(2, 1fr); }
  .nv-office-gallery > *:first-child { grid-column: span 2; grid-row: span 1; }
  .nv-office-gallery img:first-child { height: 260px; min-height: 0; }
}
@media (max-width: 575px) { .nv-office-gallery { grid-template-columns: 1fr; } .nv-office-gallery > *:first-child { grid-column: span 1; } }

/* ---------- 13. Contact: quick enquiry + consolidated CTAs ---------- */
.nv-quick-enquiry {
  background: linear-gradient(160deg, var(--accent), var(--accent-dark));
  border-radius: var(--radius-lg, 20px);
  padding: var(--space-6);
  color: var(--dark);
  position: sticky;
  top: 110px;
}
.nv-quick-enquiry h4 { font-family: var(--font-heading); font-size: 1.3rem; margin-bottom: var(--space-2); }

/* Contact section's Quick Enquiry panel: white card with gold heading,
   instead of the solid gold-gradient background used elsewhere (e.g.
   the cost calculator's result panel, which still needs the gold bg). */
#contact .nv-quick-enquiry {
  background: var(--white);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(27, 79, 140, 0.08);
}
#contact .nv-quick-enquiry h4 { color: var(--accent); }
.nv-quick-enquiry p { font-size: 13.5px; color: rgba(10,22,40,0.65); margin-bottom: var(--space-5); }
.nv-quick-cta {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(10,22,40,0.08);
  border: 1px solid rgba(10,22,40,0.14);
  color: var(--dark); text-decoration: none;
  margin-bottom: 12px;
  transition: background .25s ease, transform .25s ease;
}
.nv-quick-cta:hover { background: rgba(10,22,40,0.16); transform: translateX(4px); color: var(--dark); }
.nv-quick-cta i { width: 20px; text-align: center; color: var(--primary); font-size: 16.5px; }
.nv-quick-cta strong { display: block; font-size: 14px; }
.nv-quick-cta span { display: block; font-size: 11.5px; color: rgba(10,22,40,0.6); }
.nv-office-hours-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; border-bottom: 1px dashed rgba(10,22,40,0.15); }
.nv-office-hours-row:last-child { border-bottom: none; }

/* ---------- 14. Responsive polish for hero hand-off ---------- */
@media (max-width: 767px) {
  .nv-quick-enquiry { position: static; }
}

/* ---------- 15. Meet Our Team (homepage) ---------- */
.team-section { background: var(--white); }

.team-card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform .4s cubic-bezier(.19,1,.22,1), box-shadow .4s ease, border-color .4s ease;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-gold);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.team-card-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--light);
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}

.team-card:hover .team-card-photo img { transform: scale(1.08); }

.team-card-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(10,22,40,0) 0%, rgba(10,22,40,0.55) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}

.team-card:hover .team-card-photo::after { opacity: 1; }

.team-card-social {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.team-card:hover .team-card-social { opacity: 1; transform: translateY(0); }

.team-card-social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--primary);
  font-size: 14.5px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.team-card-social a:hover { background: var(--accent); color: var(--primary-dark); transform: translateY(-3px); }

.team-card-body {
  background: #fff;
  padding: 28px 20px;
  border-radius: 0 0 var(--radius-lg, 20px) var(--radius-lg, 20px);
  text-align: center;
  position: relative;
}

.team-card-body::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.team-card-name {
  font-family: 'Inter', 'Poppins', 'Manrope', var(--font-body);
  font-size: 38.5px;
  font-weight: 700;
  color: #0F172A;
  text-align: center;
  margin: 12px 0 10px;
  line-height: 1.15;
}

.team-card-role {
  display: block;
  font-family: 'Inter', 'Poppins', 'Manrope', var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #64748B;
  text-align: center;
}

.team-card-bio {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray);
  margin-top: var(--space-3);
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .team-card-name { font-size: 30.5px; }
}

@media (max-width: 767px) {
  .team-card-photo { aspect-ratio: 3 / 4; }
  .team-card-name { font-size: 24.5px; }
}

/* ============================================================
   EDITORIAL / STUDIO REDESIGN LAYER
   Loads last — shifts the shape language site-wide from "rounded
   pill lead-gen kit" to a flatter, hairline-driven architectural
   system, without touching markup or JS on pages this pass didn't
   rewrite. Homepage-specific classes (.nv-*) are additive and only
   used where index.php/hero.php/includes/projects.php opt in.
   ============================================================ */

h1, h2, h3, h4, h5, h6, .section-title, .page-hero-title {
  letter-spacing: -0.01em;
}

/* ---- Numbered section-label system (01 / ABOUT, 02 / SERVICES...) ---- */
.nv-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
}
.nv-eyebrow .nv-eyebrow-num { color: var(--accent-dark); }
.nv-eyebrow .nv-eyebrow-sep { color: var(--stone); opacity: .55; font-weight: 500; }
.nv-eyebrow--light { color: rgba(255,255,255,0.72); }
.nv-eyebrow--light .nv-eyebrow-num { color: var(--accent-light); }
.nv-eyebrow--light .nv-eyebrow-sep { color: rgba(255,255,255,0.35); }
.nv-eyebrow--center { justify-content: center; }

/* Flatten the generic pill badge used across inner pages */
.section-badge,
.services-header .section-badge,
.why-us-header .section-badge {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  gap: 10px;
  letter-spacing: 3px;
}
.section-badge::before {
  width: 20px;
  height: 1px;
  border-radius: 0;
  background: var(--accent);
}

/* Thin architectural hairline instead of a thick gradient bar */
.divider-line {
  width: 44px;
  height: 1px;
  background: var(--hairline);
  border-radius: 0;
}
.divider-line.center { margin: 20px auto; }

/* ---- Buttons: squared, restrained, no pill/bounce/glow ---- */
.btn-primary-custom,
.btn-gold-custom,
.btn-outline-custom,
.btn-hero-primary,
.btn-hero-outline {
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: none;
  background-image: none;
}
/* These three still carry HTML markup with the icon written first —
   flip them visually so the arrow/icon reads after the label, "LABEL →".
   .btn-hero-primary/.btn-hero-outline already have the icon written
   last in hero.php, so they're excluded here to avoid a double-flip. */
.btn-primary-custom,
.btn-gold-custom,
.btn-outline-custom {
  flex-direction: row-reverse;
}
.btn-primary-custom i,
.btn-gold-custom i,
.btn-outline-custom i,
.btn-hero-primary i,
.btn-hero-outline i {
  margin: 0 !important;
}
.btn-primary-custom {
  background: var(--primary);
}
.btn-primary-custom:hover {
  background: var(--primary-dark);
  transform: none;
  box-shadow: none;
}
.btn-gold-custom {
  background: var(--accent);
  color: var(--primary-dark);
}
.btn-gold-custom:hover {
  background: var(--accent-dark);
  color: var(--white);
  transform: none;
  box-shadow: none;
}
.btn-outline-custom {
  background: transparent;
  backdrop-filter: none;
  border: 1px solid var(--stone-line);
  color: var(--primary);
}
.btn-outline-custom:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: none;
  box-shadow: none;
}
.btn-hero-primary {
  background: var(--accent);
  color: var(--primary-dark);
}
.btn-hero-primary:hover {
  background: var(--accent-light);
  color: var(--primary-dark);
  transform: none;
  box-shadow: none;
}
.btn-hero-primary .btn-glow { display: none; }
.btn-hero-outline {
  background: transparent;
  backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.45);
}
.btn-hero-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
  transform: none;
  box-shadow: none;
}

/* ---- Flatten card system sitewide: hairline borders, no heavy shadow/lift ---- */
.service-card {
  border-radius: 2px;
  box-shadow: none;
}
.service-card::before { display: none; }
.service-card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(var(--accent-rgb), 0.35);
}
.service-icon { border-radius: 2px; }

.svc-why-card { border-radius: 2px; }
.svc-why-card:hover { transform: none; box-shadow: none; }
.svc-why-icon { border-radius: 2px; }

.project-card {
  border-radius: 2px;
  box-shadow: none;
  border: 1px solid rgba(var(--primary-rgb), 0.08);
}
.project-card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(var(--accent-rgb), 0.35);
}
.project-action-btn { border-radius: 2px; }
.project-category-tag { border-radius: 2px; letter-spacing: 1.5px; }

.testimonial-card {
  border-radius: 2px;
  box-shadow: none;
  border: 1px solid rgba(var(--primary-rgb), 0.08);
  text-align: left;
  align-items: flex-start;
}
.testimonial-card:hover { transform: none; box-shadow: none; border-color: rgba(var(--accent-rgb), 0.3); }
.client-segment-icon { border-radius: 2px; }

/* ---- About stats: remove card chrome, let hairline dividers carry it ---- */
.abt-stats {
  background: transparent;
  border: none;
  padding: 6px 0 30px;
}
.abt-years-badge {
  background: var(--ivory);
  color: var(--primary-dark);
  box-shadow: none;
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.abt-badge-num { color: var(--accent-dark); }
.abt-badge-lbl { color: var(--primary-dark); opacity: .72; }
.abt-services li { border-radius: 2px; }
.abt-check { border-radius: 2px; }

/* ---- Editorial services list (homepage) ---- */
.nv-svc-list { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 8px; }
.nv-svc-row {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 28px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  transition: background .25s ease;
  text-decoration: none;
}
.nv-svc-row:hover { background: rgba(var(--accent-rgb), 0.05); }
.nv-svc-num {
  flex: 0 0 46px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  padding-top: 3px;
}
.nv-svc-body { flex: 1; min-width: 0; }
.nv-svc-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.nv-svc-desc {
  font-size: 14.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin: 0;
}
.nv-svc-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: rgba(255,255,255,0.32);
  font-size: 13px;
  transition: color .25s ease, transform .25s ease;
}
.nv-svc-row:hover .nv-svc-arrow { color: var(--accent); transform: translateX(4px); }
@media (max-width: 575px) {
  .nv-svc-row { gap: 16px; }
  .nv-svc-num { flex-basis: 32px; font-size: .95rem; }
  .nv-svc-arrow { display: none; }
}

/* ---- Editorial process strip (homepage): "From Idea to Handover" ---- */
.nv-process-v2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--stone-line);
  border-bottom: 1px solid var(--stone-line);
}
.nv-process-v2-step {
  padding: 34px 22px;
  border-right: 1px solid var(--stone-line);
}
.nv-process-v2-step:last-child { border-right: none; }
.nv-process-v2-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(var(--accent-rgb), 0.4);
  line-height: 1;
  margin-bottom: 16px;
}
.nv-process-v2-title {
  font-family: var(--font-accent);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-dark);
  margin-bottom: 10px;
}
.nv-process-v2-desc {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 991px) {
  .nv-process-v2 { grid-template-columns: repeat(2, 1fr); border-bottom: none; }
  .nv-process-v2-step { border-right: 1px solid var(--stone-line); border-bottom: 1px solid var(--stone-line); }
  .nv-process-v2-step:nth-child(2n) { border-right: none; }
}
@media (max-width: 575px) {
  .nv-process-v2 { grid-template-columns: 1fr; }
  .nv-process-v2-step { border-right: none; }
}

/* ---- Editorial project meta (homepage cards): TYPE / LOCATION / AREA / STATUS ---- */
.nv-proj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--primary-rgb), 0.1);
}
.nv-proj-meta-item { display: flex; flex-direction: column; gap: 3px; }
.nv-proj-meta-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--stone);
}
.nv-proj-meta-value {
  font-family: var(--font-accent);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
}

/* ---- Hero: sentence-case architectural statement, not oversized editorial caps ---- */
.chero-title {
  text-transform: none;
  font-weight: 700;
  letter-spacing: -0.01em;
}