/* ============================================================================
   RADIANT ANODISERS - MAIN CSS
   Tokens: #C4255C (crimson pink), #4B10B4 (purple), #0f0520 (dark bg)
   Fonts:  Playfair Display . DM Sans . DM Mono
   ============================================================================ */

/* ============================================================================
   COLOUR USAGE RULES -- READ BEFORE EDITING
   --------------------------------------------------------------------------
   --pk (#C4255C)  : small-scale accent ONLY.
                     Use for: italic heading words, eyebrow text, accent lines,
                     "learn more" links, small UI indicators, hover states.
                     Never use as: background fill, large icon fill, button bg.

   --gold (#c9922a): icons.
                     Use for: IS 1868, EN 12206, Zero Liquid Discharge icon
                     glyphs and their labels. Three places on the entire site.
                     Never use for: any other element, heading, stat, or UI.

   --bl (#4B10B4)  : general UI purple.
                     Use for: buttons (via --grad), card tag backgrounds
                     (via --bl-dim), feature icon fills, active nav underlines.

   --grad          : linear-gradient(135deg, --pk, --bl).
                     Use for: CTA buttons, the GET A QUOTE button.
                     Mirrors the logo colour direction.

   --off (#E7E7ED) : primary text on dark backgrounds.
                     Use for: headings, stat numbers, card titles, nav links.

   --mu / --mu2    : secondary and tertiary text on dark backgrounds.
                     Use for: body text (--mu), labels and captions (--mu2).

   --cta-bg (#f0ecff): light lavender, CTA band background only.
                     Use for: the "Ready to Transform" section background.
                     All text on this bg uses hardcoded dark values, not --off.
   ============================================================================ */

/* ========================================================================== */
/* COLOUR SYSTEM                                                              */
/* Derived from the Radiant Anodisers logo gradient (#4E00B8 to #B60252).    */
/* Two accent colours, strictly scoped:                                       */
/*   --pk   : crimson-pink  -- italic heading words, eyebrows, links,         */
/*            small UI accent lines, buttons                                  */
/*   --gold : antique gold  -- ONLY the three certification icons              */
/*            (IS 1868, EN 12206, Zero Liquid Discharge). Do not use          */
/*            anywhere else. Strict scope enforcement required.               */
/* Purple carries all general UI weight (buttons, fills, gradients).          */
/* ========================================================================== */
:root {
  /* Primary accent: gold for all icons and accents */
  --pk:      #C4255C;
  --pk-h:    #D83070;
  --pk-dim:  rgba(196,37,92,.13);
  --pk-b:    rgba(196,37,92,.48);

  /* Gold: highlights buttons and icons */
  --gold:     #c9922a;
  --gold-h:   #e0a830;
  --gold-dim: rgba(201, 146, 42, .12);
  --gold-b:   rgba(201, 146, 42, .30);

  /* Purple: primary UI colour, buttons, gradient base */
  --bl:       #4B10B4;
  --bl-m:     #6020cc;
  --bl-dim:   rgba(75, 16, 180, .13);
  --bl-b:     rgba(75, 16, 180, .35);

  /* Warm White: harmonious white for header, cta background etc*/
  --wh:     #F5EDE0;  /* warm ivory-white — base */
  --wh-h:   #FDF8F2;  /* lighter, hover/highlight state */
  --wh-dim: rgba(245,237,224,.10);  /* subtle warm tint on dark surfaces */
  --wh-b:   rgba(245,237,224,.22);  /* warm white border */
  
  /* Gradient: mirrors logo direction, crimson to purple */
  /*--grad:     linear-gradient(135deg, var(--pk), var(--bl));*/
  --grad: linear-gradient(135deg, var(--gold) 0%, var(--pk) 45%, var(--bl) 100%);

  /* Dark background text tokens (for use on --bg, --s1, --s2, --s3) */
  --off:  #E7E7ED;                    /* headings, stat numbers, primary text */
  --mu:   rgba(231, 231, 237, .72);   /* body text, descriptions */
  --mu2:  rgba(231, 231, 237, .38);   /* labels, captions, metadata */
  --br:   rgba(231, 231, 237, .16);   /* borders, dividers */

  /* Background scale */
  --bg: #0f0520;
  --s1: #160a26;
  --s2: #1e1232;
  --s3: #26183e;

  /* Header tokens: for use on the light (rgba 255,255,255,.92) header */
  --hd-bg:   rgba(255, 255, 255, .92);
  --hd-text: #1a0832;
  --hd-mu:   rgba(26, 8, 50, .55);
  --hd-br:   rgba(26, 8, 50, .10);

  /* Overlay and shadow tokens */
  --shadow:        rgba(0, 0, 0, .5);     /* Box shadows */
  --overlay-light: rgba(10, 4, 20, .3);   /* Light overlay on images */

  /* CTA section tokens */
  --cta-bg: var(--wh);
  --cta-text: var(--bg);                    /* Dark heading on light CTA background */

  /* Typography and animation (non-colour) */
  --fd: 'Playfair Display',serif;
  --fb: 'DM Sans',sans-serif;
  --fm: 'DM Mono',monospace;
  --ease: cubic-bezier(.25,.46,.45,.94);
}

/* === RESET =============================================================== */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--bg); color: var(--off);
  font-family: var(--fb); font-weight: 300;
  line-height: 1.6; overflow-x: hidden;
  padding-top: 74px;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--fb); cursor: pointer; }

/* === TYPOGRAPHY ========================================================== */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--fd); font-weight: 700; color: var(--off);
  line-height: 1.08; letter-spacing: -.01em;
}
h1 { font-size: clamp(42px,5.2vw,80px); margin-bottom: 1.25rem; }
h2 { font-size: clamp(22px,2.5vw,38px); margin-bottom: 1rem; }
h3 { font-size: clamp(18px,1.8vw,28px); margin-bottom: .75rem; }
h4 { font-size: clamp(16px,1.3vw,22px); }
h5 { font-size: 1.05rem; }
/* h6 doubles as the mono-caps label element */
h6 { font-family: var(--fm); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-h); font-weight: 500; }
p { margin-bottom: 1rem; }
.lead { font-size: 15px; font-weight: 300; line-height: 1.9; color: var(--mu); }
.small { font-size: 13px; }

/* Gradient italic word (used inside headings) */
.gr {
  font-style: italic; font-weight: 400;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Gradient divider */
.gdiv { height: 1px; background: linear-gradient(to right,transparent,var(--pk-dim),transparent); }

/* --- Section label + large title ---------------------------------------- */
.sl { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sl::before { content: ''; display: block; width: 22px; height: 2px; background: var(--grad); flex-shrink: 0; }
.sl span { font-family: var(--fm); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--pk-h); }
.st { font-family: var(--fd); font-size: clamp(30px,3.8vw,54px); font-weight: 700; line-height: 1.08; }

/* --- SHARED: all monospaced uppercase labels -----------------------------
   Covers: service labels, counter labels, hero stat labels, gallery types,
   architect roles, client categories, capability labels, spec labels,
   contact labels, testimonial roles, marquee items, mosaic tags         */
.sv-n, .ctr-d, .hs-l, .gg-type, .ar-rl, .cb-cat,
.cap-l, .spec-label, .co-l, .testi-role, .mq-i, .hm-tag {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mu);
}
/* Pink variant labels */
.sv-n, .cb-cat, .spec-label, .testi-role, .cap-l { color: var(--pk-h); }
.sv-n { opacity: .6; margin-bottom: 14px; }

/* --- SHARED: gradient large numbers ------------------------------------ */
.ctr-n, .hs-n, .cap-to, .spec-value {
  font-family: var(--fd); font-weight: 600; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ctr-n { font-size: 52px; }
.hs-n  { font-size: 32px; }
.cap-to { font-size: 36px; }
.spec-value { font-size: 28px; }

/* --- SHARED: bottom gradient hover bar -------------------------------- */
.sv-bar, .gg-bar, .testi-bar {
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--grad);
  transition: width .5s var(--ease);
}
.sv:hover .sv-bar,
.gg:hover .gg-bar,
.testi:hover .testi-bar { width: 100%; }

/* --- SHARED: image tile hover (zoom + brighten) ------------------------ */
.hm img, .gg img, .sv-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.70) saturate(.90);
  transition: filter .5s, transform .7s var(--ease);
}
.hm:hover img, .gg:hover img, .sv:hover .sv-img img {
  filter: brightness(.90) saturate(1.05);
  transform: scale(1.06);
}

/* --- SHARED: dark surface cards --------------------------------------- */
/* s1 base -> s2 on hover */
.testi, .pr, .cap, .sv { background: var(--s1); transition: background .35s; }
.testi:hover, .pr:hover, .cap:hover, .sv:hover { background: var(--s2); }
/* s2 base -> s3 on hover */
.ctr, .ar, .cb, .spec-item, .co-i { background: var(--s2); transition: background .35s, border-color .35s; }
.ctr:hover   { background: var(--s3); border-color: var(--pk); }
.ar:hover    { background: var(--s3); border-color: var(--pk); }
.cb:hover    { border-color: var(--pk); }
.spec-item:hover { background: var(--s3); border-color: var(--pk); }
.co-i:hover  { background: var(--s3); }

/* === BUTTONS ============================================================= */
.btn-fill, .btn-out, .btn-primary, .btn-outline-primary, .nav-cta {
  font-family: var(--fb); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 2px; display: inline-block; cursor: pointer;
  text-decoration: none; border: none; white-space: nowrap;
  transition: opacity .3s, transform .25s var(--ease), background .3s, color .3s;
}
.btn-fill, .btn-primary, .nav-cta {
  background: var(--gold); color: var(--cta-bg) !important; padding: 13px 30px;
}
.btn-fill:hover, .btn-primary:hover, .nav-cta:hover { opacity: .82; transform: translateY(-2px); }
.btn-out, .btn-outline-primary {
  color: var(--gold); border: 1px solid var(--gold-b); background: transparent; padding: 11px 24px;
}
.btn-out:hover, .btn-outline-primary:hover { background: var(--gold); border-color: var(--gold-b); color: var(--cta-bg) !important; transform: translateY(-2px); }
.btn-lg { padding: 15px 34px; font-size: 13px; }
.btn-sm { padding: 6px 14px; font-size: 11px; }

/* === LAYOUT ============================================================== */
.container-xxl { max-width: 1400px; margin: 0 auto; padding: 0 40px; width: 100%; }
.sec {padding: 100px 40px;/* max-width: 1400px; */margin: 0 auto;}

/* Two-column content layout - large gap (About, Clients sections) */
.col-2-lg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
/* Two-column tight grid - 2px gap (service cards, cb-grid) */
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
/* Three-column grid */
.col-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
/* Flex row space-between */
.row-jb { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }

/* === NAVBAR ============================================================== */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s;
}
header.scrolled {
  background: var(--wh);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom-color: var(--hd-br);
}
header.scrolled .navbar-nav .nav-link {
  color: var(--bl) !important;
}
header.scrolled .navbar-nav .nav-link:hover,
header.scrolled .navbar-nav .nav-link.active {
  color: var(--hd-text) !important;
}
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px; max-width: 1400px; margin: 0 auto; width: 100%;
  position: relative;
}
.navbar-brand { display: flex; flex-direction: column; text-decoration: none; flex-shrink: 0; line-height: 1; }
.navbar-brand .n1 { font-family: var(--fd); font-size: 20px; font-weight: 700; color: var(--off); }
.navbar-brand .n2 { font-family: var(--fm); font-size: 8px; letter-spacing: .38em; text-transform: uppercase; color: var(--pk-h); margin-top: 3px; }
.logo-main { height: 44px; width: auto; display: block; }
.logo-fallback { display: none; flex-direction: column; }

/* Desktop nav */
.navbar-nav {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0;
}
.navbar-nav > li { position: relative; }
.navbar-nav .nav-link {
  font-family: var(--fb); font-size: 13px; font-weight: 500;
  color: var(--mu) !important; white-space: nowrap;
  padding: 8px 12px; display: block; position: relative;
  transition: color .3s; cursor: pointer;
}
.navbar-nav .nav-link > .link-line {
  position: absolute; bottom: 2px; left: 12px;
  width: 0; height: 1px; background: var(--pk); background: var(--gold);
  transition: width .35s var(--ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--off) !important; }
.navbar-nav .nav-link:hover > .link-line,
.navbar-nav .nav-link.active > .link-line { width: calc(100% - 24px); }
/* Remove Bootstrap caret */
.navbar-nav .nav-link::after,
.navbar-nav .dropdown-toggle::after { display: none !important; }

/* Hover dropdown - pure CSS, no Bootstrap JS */
.navbar-nav .dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0;
  background: rgba(20,8,40,.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--br); border-radius: 2px;
  padding: 6px 0; min-width: 210px;
  box-shadow: 0 16px 48px var(--shadow);
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.navbar-nav .dropdown:hover > .dropdown-menu {
  display: block; opacity: 1; transform: translateY(0); pointer-events: auto;
}
.dropdown-item {
  font-family: var(--fb); font-size: 13px; color: var(--mu) !important;
  padding: 10px 20px; display: block;
  transition: background .2s, color .2s; white-space: nowrap;
}
.dropdown-item:hover { background: rgba(221,47,139,.12); color: var(--off) !important; }
.dropdown-divider { border: 0; border-top: 1px solid var(--br); margin: 4px 0; }

/* Hamburger - hidden on desktop, flex on mobile */
.navbar-toggler {
  display: none; background: none; border: 1px solid var(--br); border-radius: 2px;
  padding: 7px 9px; cursor: pointer; flex-direction: column; gap: 5px; flex-shrink: 0;
}
.navbar-toggler-icon { display: block; width: 20px; height: 1.5px; background: var(--off); }

/* Mobile collapse panel */
#navbarCollapse { display: none; }
#navbarCollapse.show {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--s2); backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--br); padding: 12px 0 20px;
}
#navbarCollapse .navbar-nav {
  flex-direction: column; align-items: flex-start; gap: 0; padding: 0 20px; display: flex;
}
#navbarCollapse .navbar-nav > li { width: 100%; }
#navbarCollapse .nav-link { padding: 12px 4px; font-size: 15px; border-bottom: 1px solid var(--br); }
#navbarCollapse .dropdown-menu {
  display: none; position: static; background: transparent; border: none;
  border-radius: 0; padding: 0 0 8px 16px; box-shadow: none;
  backdrop-filter: none; opacity: 1; transform: none; pointer-events: auto; min-width: 0;
}
#navbarCollapse .dropdown-menu.show { display: block; }
#navbarCollapse .dropdown-item { padding: 8px 4px; font-size: 14px; border-bottom: 1px solid var(--br); }
#navbarCollapse .dropdown > .nav-link::before {
  content: '+'; float: right; font-size: 18px; font-weight: 300;
  color: var(--pk); line-height: 1; margin-top: 2px; transition: transform .3s;
}
#navbarCollapse .dropdown.open > .nav-link::before { transform: rotate(45deg); }

/* === BREADCRUMBS ========================================================= */
nav.breadcrumb-nav {/* background: rgba(22,10,38,.8); */border-bottom: 1px solid var(--br);}
.breadcrumb { background: transparent; margin-bottom: 0; padding: .875rem 0; display: flex; flex-wrap: wrap; list-style: none; gap: .5rem; }
.breadcrumb-item { color: var(--mu); font-size: 13px; }
.breadcrumb-item a { color: var(--pk); transition: color .3s; }
.breadcrumb-item a:hover { color: var(--pk-h); }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--br); margin-right: .5rem; }
.breadcrumb-item.active { color: var(--mu); }

/* === HERO ================================================================ */
.hero {
  min-height: 100svh; display: grid;
  grid-template-columns: 1fr 1fr; position: relative; overflow: hidden;
}
.h-amb {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 80% 40%, rgba(75,16,180,.28) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 75%, rgba(221,47,139,.16) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 60% 10%, rgba(70,18,92,.5) 0%, transparent 60%);
}
.h-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(221,47,139,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(221,47,139,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridMove 30s linear infinite;
}
.h-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px 60px 100px; position: relative; z-index: 2;
}
.h-badge {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px; animation: fadeUp .8s .15s forwards; opacity: 0;
}
.h-badge::before { content: ''; display: block; width: 28px; height: 1px; background: var(--pk); }
.h-badge span { font-family: var(--fm); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--pk-h); }
.h-left h1 { font-size: clamp(42px,5vw,78px); line-height: 1.0; margin-bottom: 20px; animation: fadeUp .9s .3s forwards; opacity: 0; }
.h-desc { font-size: 14px; line-height: 1.9; color: var(--mu); max-width: 440px; margin-bottom: 40px; animation: fadeUp .9s .45s forwards; opacity: 0; }
.h-desc strong { color: var(--off); font-weight: 500; }
.h-acts { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; animation: fadeUp .9s .6s forwards; opacity: 0; }
.h-stats {
  position: absolute; bottom: 40px; left: 60px;
  display: flex; gap: 32px; flex-wrap: wrap;
  animation: fadeUp .9s .85s forwards; opacity: 0;
}
.hs-l { font-size: 9px; letter-spacing: .22em; margin-top: 4px; }

/* Hero image mosaic (right col) */
.h-right { position: relative; overflow: hidden; }
.h-right::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right,var(--bg) 0%,var(--overlay-light) 35%,transparent 60%);
}
.h-mosaic {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
  gap: 3px; animation: fadeIn 1.4s .5s forwards; opacity: 0;
}
.hm { overflow: hidden; position: relative; background: var(--s1); }
.hm.tall { grid-row: span 2; }
.hm-tag {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  padding: 22px 12px 12px;
  background: linear-gradient(to top,rgba(10,4,20,.88),transparent);
}

/* === MARQUEE ============================================================= */
.mq {
  overflow: hidden; padding: 16px 0;
  background: linear-gradient(135deg,var(--bl-dim),var(--bl-b));
  border-top: 1px solid var(--br); border-bottom: 1px solid var(--br);
}
.mq-t { display: flex; animation: mq 40s linear infinite; white-space: nowrap; }
.mq-i { display: inline-flex; align-items: center; gap: 14px; padding: 0 26px; flex-shrink: 0; }
.mq-d { width: 5px; height: 5px; background: var(--pk); border-radius: 50%; flex-shrink: 0; }

/* === COUNTERS ============================================================ */
.ctrs { background: var(--s1); display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.ctr { padding: 36px 28px; border-bottom: 2px solid transparent; }
.ctr-d { margin-top: 8px; line-height: 1.5; }

/* === GENERIC CARD ======================================================== */
.card {background: var(--s1);border: 1px solid var(--br);border-radius: 2px;transition: all .3s;overflow: hidden;}
.card:hover { border-color: var(--pk-b); background: var(--s2); box-shadow: 0 10px 40px rgba(221,47,139,.15); transform: translateY(-4px); }
.card-body { padding: 2rem; }
.card-title { font-family: var(--fd); font-size: 20px; font-weight: 600; color: var(--off); margin-bottom: .5rem; }
.card-text { color: var(--mu); font-size: 14px; }

/* === SERVICES ============================================================ */
/* Header: 2-col intro + text block */
.sv-hdr { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 48px; }
/* Main 2x2 service cards grid */
.sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
/* Extra services row (05/06 - horizontal layout) */
.sv-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 2px; }
/* Card itself */
.sv { overflow: hidden; position: relative; display: flex; flex-direction: column; border: none; }
/* Horizontal card variant (used by sv-extra items) */
.sv-h { flex-direction: row; align-items: stretch; }
.sv-h .sv-img { width: 200px; min-width: 200px; height: auto; flex-shrink: 0; }
.sv-h .sv-bd { padding: 24px; }
.sv-img { height: 200px; overflow: hidden; flex-shrink: 0; }
.sv-bd { padding: 32px 32px 36px; flex: 1; display: flex; flex-direction: column; }
.sv-name { font-family: var(--fd); font-size: 23px; font-weight: 600; margin-bottom: 10px; }
.sv-desc { font-size: 14px; line-height: 1.85; color: var(--mu); flex: 1; margin-bottom: 18px; }
.sv-intro { font-size: 14px; line-height: 1.85; color: var(--mu); }
.sv-specs {display: flex;flex-wrap: wrap;gap: 6px;margin-bottom: 14px;justify-content: center;}
.sv-sp { font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--mu); border: 1px solid var(--br); padding: 3px 8px; border-radius: 2px; }
.sv-sw { font-family: var(--fm); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--pk-h);  border: 1px solid var(--br); padding: 3px 8px; border-radius: 2px; }
.sv-w:hover { color: var(--pk-h); }

/* === ABOUT SECTION ======================================================= */
.ab-p { font-size: 14px; line-height: 1.85; color: var(--mu); margin-bottom: 1rem; }
.ab-cta { font-family: var(--fm); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--pk-h); transition: color .3s; }
.ab-cta:hover { color: var(--pk-h); }
.ab-imgs { position: relative; height: 440px; }
.ab-pa { position: absolute; overflow: hidden; }
.ab-pa:first-child { width: 72%; height: 80%; top: 0; right: 0; }
.ab-pa:nth-child(2) { width: 52%; height: 58%; bottom: 0; left: 0; border: 4px solid var(--bg); }
.ab-pa img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.ab-bdg { position: absolute; bottom: 28px; right: 28px; background: var(--grad); padding: 16px 20px; text-align: center; }
.ab-bdg .bn { font-family: var(--fd); font-size: 28px; font-weight: 700; color: var(--off); line-height: 1; }
.ab-bdg .bt { font-family: var(--fm); font-size: 8px; letter-spacing: .28em; text-transform: uppercase; color: var(--wh); margin-top: 4px; }

/* === GALLERY / PROJECT MOSAIC ============================================ */
.gg { position: relative; overflow: hidden; background: var(--s2); border-radius: 2px; }
.gg-ov { position: absolute; inset: 0; background: linear-gradient(to top,rgba(10,4,20,.9) 0%,transparent 60%); }
.gg-lbl { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 16px 14px; z-index: 1; }
.gg-name { font-family: var(--fd); font-size: 15px; font-weight: 600; color: var(--off); margin-bottom: 4px; }
.gg.wide { grid-column: span 2; }
.gg.tall { grid-row: span 2; }
/* 4-col mosaic grid with fixed row heights */
.pr-mosaic { display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: 220px 220px; gap: 3px; }

/* Featured project carousel */
.feat-carousel { background: var(--s1); border-bottom: 1px solid var(--br); }
.feat-slide { padding: 60px 0 80px; }
.feat-slide-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; filter: brightness(.85); display: block; }
.feat-carousel .carousel-indicators { bottom: 20px; margin-bottom: 0; }
.feat-carousel .carousel-indicators button { width: 8px; height: 8px; border-radius: 50%; border-top: 0; border-bottom: 0; background: var(--mu2); opacity: 1; transition: background .3s; }
.feat-carousel .carousel-indicators .active { background: var(--pk); }
.feat-carousel .carousel-control-prev,
.feat-carousel .carousel-control-next { width: auto; padding: 0 20px; opacity: .6; }
.feat-carousel .carousel-control-prev:hover,
.feat-carousel .carousel-control-next:hover { opacity: 1; }

/* === CLIENT LOGOS ======================================================== */
.logos { display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; }
.logos-4 { grid-template-columns: repeat(4,1fr); }
.logos-3 { grid-template-columns: repeat(3,1fr); }
.logos-2 { grid-template-columns: repeat(2,1fr); }
.lg { background: var(--s2); padding: 20px 16px; display: flex; align-items: center; justify-content: center; filter: grayscale(1) brightness(2.0); opacity: .58; transition: filter .4s, opacity .4s; }
.lg:hover { filter: none; opacity: 1; }
.lg img { max-height: 32px; max-width: 100%; object-fit: contain; }
/* Higher-contrast logo grid variant -- for dedicated showcase sections */
.logos-hi .lg { opacity: .72; filter: grayscale(1) brightness(2.4); background: transparent; }
.logos-hi .lg:hover { filter: none; opacity: 1; }
.logos-hi .lg img { max-height: 48px; }

/* Logo scroller - background changed back to dark from gold */
/* OLD gold: background: #c9922a; */
.logo-scroller {overflow: hidden;/* background: var(--s1); */background: var(--wh);border-top: 1px solid var(--br);border-bottom: 1px solid var(--br);padding: 20px 0;}
.logo-scroller-track { display: flex; animation: logoScroll 30s linear infinite; white-space: nowrap; align-items: center; }
.logo-scroller-track:hover { animation-play-state: paused; }
.logo-scroller-item {display: inline-flex;align-items: center;justify-content: center;padding: 10px 32px;flex-shrink: 0;/* filter: grayscale(1) brightness(2.0); *//* filter: brightness(2.0); *//* opacity: .62; *//* transition: filter .4s, opacity .4s; */}
.logo-scroller-item:hover { filter: none; opacity: 1; }
.logo-scroller-item img { max-height: 32px; width: auto; }
/* Separator dots between logos */
.logo-scroller-sep { display: inline-block; width: 4px; height: 4px; background: var(--pk-b); border-radius: 50%; flex-shrink: 0; margin: 0 16px; }

/* Architect list */
.arch-stack { display: flex; flex-direction: column; gap: 2px; }
.ar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-left: 2px solid transparent; }
.ar-nm { font-family: var(--fd); font-size: 18px; font-weight: 600; }

/* Client category boxes */
.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 2px; }
.cb { padding: 22px 20px; border-top: 1px solid transparent; }
.cb-cat { margin-bottom: 10px; }
.cb-nm { font-size: 13px; line-height: 2.1; color: var(--mu); }
.cb-nm strong { color: var(--off); font-weight: 500; }

/* === TESTIMONIALS ======================================================== */
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 48px; }
.testi { padding: 32px 28px; position: relative; }
.testi-text { font-size: 14px; line-height: 1.85; color: var(--mu); font-style: italic; margin-bottom: 22px; }
.testi-name { font-family: var(--fd); font-size: 16px; font-weight: 600; color: var(--off); margin-bottom: 4px; }

/* === PROJECTS LIST ======================================================= */
.pr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.pr { padding: 36px 28px; position: relative; overflow: hidden; }
.pr::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); opacity: 0; transition: opacity .35s; }
.pr:hover::before { opacity: 1; }
.pr-nm { font-family: var(--fd); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.pr-dt { font-size: 13px; line-height: 1.75; color: var(--mu); margin-bottom: 16px; }
.pr-tag { display: inline-block; font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--pk-h); border: 1px solid var(--pk-b); padding: 4px 10px; border-radius: 2px; }

/* === CONTACT ============================================================= */
.co-i { display: flex; align-items: center; gap: 16px; padding: 15px 18px; margin-bottom: 2px; }
.co-ic { font-size: 16px; opacity: .6; flex-shrink: 0; }
.co-l { margin-bottom: 3px; }
.co-v { font-size: 14px; color: var(--off); }
.co-v a { color: var(--off); transition: color .3s; }
.co-v a:hover { color: var(--pk); }

/* === FORMS =============================================================== */
.form-control, .form-select {
  background: var(--s2); border: none; border-bottom: 1px solid var(--br);
  color: var(--off); font-family: var(--fb); font-size: 15px; font-weight: 300;
  padding: 20px 20px 14px; border-radius: 0; outline: none;
  transition: border-color .3s, background .3s; width: 100%;
}
.form-control:focus, .form-select:focus { border-color: var(--pk); background: var(--s3); color: var(--off); box-shadow: none; }
.form-control::placeholder { color: var(--mu2); }
.form-label { font-family: var(--fm); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mu); margin-bottom: 6px; }

/* === BADGES / TAGS ======================================================= */
.badge { font-family: var(--fm); font-size: .6rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; padding: .4em .8em; border-radius: 2px; background: var(--grad); color: var(--off); }
.badge.bg-primary  { background: var(--grad) !important; }
.badge.bg-secondary{ background: rgba(75,16,180,.6) !important; border: 1px solid var(--bl-b); }
.badge.bg-success  { background: linear-gradient(135deg,#10b981,#059669) !important; }
.badge.bg-warning  { background: linear-gradient(135deg,#f59e0b,#d97706) !important; }
.badge.bg-danger   { background: linear-gradient(135deg,#ef4444,#dc2626) !important; }

/* === TABLES ============================================================== */
/* Bootstrap 5.3 sets --bs-table-bg: var(--bs-body-bg) = white by default.
   Override to transparent so table inherits the section's dark background. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { --bs-table-bg: transparent; width: 100%; border-collapse: collapse; color: var(--off); background: transparent; }
.table th { padding: 14px 20px; text-align: left; font-family: var(--fm); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; background: var(--s2); border-bottom: 1px solid var(--br); color: var(--pk-h); white-space: nowrap; }
.table th:first-child { color: var(--mu); }
.table td { padding: 14px 20px; font-size: 13px; color: var(--mu); border-bottom: 1px solid var(--br); transition: background .25s; background: transparent; }
.table tr:hover td { background: rgba(221,47,139,.08) !important; }
.table td:first-child { font-weight: 500; color: var(--off); }

/* === FOOTER ============================================================== */
footer { background: var(--s1); border-top: 1px solid var(--br); padding: 56px 40px 28px; }
.ft-top {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px;
  margin-bottom: 40px; max-width: 1400px; margin-left: auto; margin-right: auto;
}
.ft-br .b1 { font-family: var(--fd); font-size: 21px; font-weight: 700; color: var(--off); }
.ft-br .b2 { font-family: var(--fm); font-size: 8px; letter-spacing: .36em; text-transform: uppercase; color: var(--pk-h); margin-top: 4px; }
.ft-br .b3 { font-size: 13px; line-height: 1.8; color: var(--mu); margin-top: 14px; }
.ft-col h4, .ft-col h5, .ft-col h6 { font-family: var(--fm); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--pk-h); margin-bottom: 16px; font-weight: 500; font-family: var(--fm); }
.ft-col a { display: block; font-size: 13px; color: var(--mu); margin-bottom: 9px; transition: color .3s; }
.ft-col a:hover { color: var(--pk); }
.ft-col p { font-size: 13px; color: var(--mu); line-height: 1.8; }
.ft-bot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--br); padding-top: 20px; flex-wrap: wrap; gap: 10px; max-width: 1400px; margin: 0 auto; }
.ft-cp { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; color: var(--mu); }
.ft-cp a { color: var(--mu) !important; }
.ft-soc { display: flex; gap: 18px; }
.ft-soc a { font-family: var(--fm); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mu); transition: color .3s; }
.ft-soc a:hover { color: var(--pk); }

/* === CAPABILITY BARS ===================================================== */
.cap { padding: 26px 22px; margin-bottom: 2px; }
.cap-l { margin-bottom: 10px; }
.cap-bar { height: 2px; background: var(--br); margin: 12px 0 0; }
.cap-fill { height: 100%; background: var(--grad); width: 0; transition: width 1.6s var(--ease); }

/* === SPEC GRID =========================================================== */
.spec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.spec-item { padding: 28px 24px; border-bottom: 2px solid transparent; }
.spec-label { margin-bottom: 10px; }
.spec-value { line-height: 1.1; }
.spec-desc { font-size: 13px; color: var(--mu); margin-top: 6px; }

/* === ACCORDION =========================================================== */
.accordion { display: flex; flex-direction: column; gap: 2px; }
.accordion-item { background: var(--s1); border: none; }
.accordion-header { margin: 0; }
.accordion-button { background: var(--s2); color: var(--off); font-family: var(--fb); font-size: 15px; font-weight: 500; padding: 20px 24px; width: 100%; text-align: left; border: none; cursor: pointer; transition: background .3s, color .3s; display: flex; justify-content: space-between; align-items: center; }
.accordion-button:not(.collapsed) { background: var(--s3); color: var(--pk-h); }
.accordion-button::after { content: '+'; font-size: 20px; font-weight: 300; color: var(--pk-h); transition: transform .3s; }
.accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.accordion-body { padding: 20px 24px; background: var(--s1); color: var(--mu); font-size: 14px; line-height: 1.85; }

/* === PAGE HERO (inner pages) ============================================ */
.page-hero {
  padding: 100px 40px 60px;
  position: relative;
  overflow: hidden;
  /*background: linear-gradient(135deg,var(--bl-dim),rgba(75,16,180,.2) 60%,transparent);*/
  background: linear-gradient(135deg,var(--pk-dim),var(--bl-dim) 60%,transparent);
  border-bottom: 1px solid var(--br);
}
.page-hero::after {content: '';position: absolute;inset: 0;pointer-events: none;background-image: linear-gradient(rgba(221,47,139,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(221,47,139,.03) 1px,transparent 1px);background-size: 56px 56px;}

/* === PROGRESS ============================================================ */
.progress { height: 4px; background: var(--br); border-radius: 2px; overflow: hidden; }
.progress-bar { background: var(--grad); height: 100%; transition: width 1.5s var(--ease); }

/* === SCROLL REVEAL + ANIMATIONS ========================================= */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; }
.rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; }
.rv.d4 { transition-delay: .4s; }

@keyframes fadeUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes gridMove { from { transform: translateY(0); }                to { transform: translateY(56px); } }
@keyframes mq       { from { transform: translateX(0); }                to { transform: translateX(-50%); } }
@keyframes logoScroll { from { transform: translateX(0); }              to { transform: translateX(-50%); } }

/* === PROJECTS PAGE HERO =================================================== */
.pj-hero {
  padding: 100px 40px 60px; position: relative; overflow: hidden;
  background: linear-gradient(135deg,rgba(70,18,92,.5) 0%,var(--bl-dim) 55%,transparent 100%);
  background: linear-gradient(135deg,var(--pk-dim),var(--bl-dim) 60%,transparent);
  
}
.pj-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at 85% 40%,rgba(221,47,139,.07) 0%,transparent 65%);
}
.pj-layout {
  display: grid; grid-template-columns: 55fr 45fr;
  gap: 56px; align-items: center; max-width: 1400px; margin: 0 auto;
}
.pj-title {
  font-family: var(--fd); font-size: clamp(52px,8vw,96px); font-weight: 700;
  line-height: .92; letter-spacing: -.02em; color: var(--off); margin: 14px 0 22px;
}
.pj-desc {
  font-size: 15px; line-height: 1.85; color: var(--mu);
  max-width: 480px; margin-bottom: 36px;
}
.pj-stats { display: flex; gap: 32px; flex-wrap: wrap; }
/* Reusable stat label -- used under .hs-n in hero stat blocks */
.stat-lb {
  font-family: var(--fm); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mu); margin-top: 5px;
}
.pj-img-col { position: relative; }
.pj-img-main {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: 3px; filter: brightness(.62) saturate(.82);
}
.pj-img-inset {
  position: absolute; width: 48%; aspect-ratio: 3/2; object-fit: cover;
  bottom: 20px; left: -24px; border-radius: 3px;
  border: 3px solid var(--bg); filter: brightness(.68) saturate(.88); z-index: 2;
}

/* === PROJECT GALLERY ===================================================== */
/* Sticky filter / control bar */
.proj-ctrl {
  position: sticky; top: 74px; z-index: 500;
  background: rgba(10,4,20,.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--br);
}
.proj-ctrl-in {
  display: flex; align-items: center; gap: 6px; padding: 13px 40px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  max-width: 1400px; margin: 0 auto;
}
.proj-ctrl-in::-webkit-scrollbar { display: none; }
/* "Filter:" label and "Showing N" count -- same mono-caps muted style */
.fl-lb, .proj-cnt {
  font-family: var(--fm); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mu2); white-space: nowrap; flex-shrink: 0;
}
.fl-lb { margin-right: 4px; }
.proj-cnt b { color: var(--pk-h); }
/* Filter button */
.proj-fb {
  font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 16px; border: 1px solid var(--br); background: transparent;
  color: var(--mu); border-radius: 2px; cursor: pointer; white-space: nowrap;
  transition: border-color .3s, color .3s;
}
.proj-fb.on, .proj-fb:hover { border-color: var(--gold); color: var(--gold-h); }
/* Grid / List view toggle */
.proj-vc {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid var(--br); background: transparent; color: var(--mu);
  border-radius: 2px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 12px; transition: border-color .3s, color .3s;
}
.proj-vc.on, .proj-vc:hover { border-color: var(--pk); color: var(--pk-h); }
/* Right-side count + toggles */
.proj-ctrl-r {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; padding-left: 16px; flex-shrink: 0;
}
/* Gallery wrapper */
.proj-gal { padding: 36px 40px 40px; max-width: 1400px; margin: 0 auto; }
/* 3-col image grid -- align-items:start so short text-only cards don't stretch to match image cards */
.proj-g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; align-items: start; }
/* Photo card */
.pc { background: var(--s1); border-radius: 2px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.pc:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(221,47,139,.12); }
.pc-wr { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.pc-wr img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.82); transition: filter .5s, transform .8s; }
.pc:hover .pc-wr img { filter: brightness(.82) saturate(1.05); transform: scale(1.07); }
.pc-ov { position: absolute; inset: 0; background: linear-gradient(to top,rgba(10,4,20,.88) 0%,rgba(70,18,92,.15) 55%,transparent 100%); }
/* Coating type badge -- shared between grid cards and list rows */
.pc-bdg {
  font-family: var(--fm); font-size: 8px; letter-spacing: .16em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 2px;
}
/* Positioned variant used on the card image */
.pc-wr .pc-bdg { position: absolute; top: 12px; right: 12px; }
/* Project category badges - all use gold color scheme */
.pc-bpvdf { background: var(--gold-dim); color: var(--gold-h); border: 1px solid var(--gold-b); }
.pc-bpow  { background: var(--gold-dim); color: var(--gold-h); border: 1px solid var(--gold-b); }
.pc-bano  { background: var(--gold-dim); color: var(--gold-h); border: 1px solid var(--gold-b); }
.pc-bsub  { background: var(--gold-dim); color: var(--gold-h); border: 1px solid var(--gold-b); }
/* Card info block */
.pc-inf { padding: 16px 15px; }
.pc-cat { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--pk-h); margin-bottom: 4px; }
.pc-nm  { font-family: var(--fd); font-size: 16px; font-weight: 600; line-height: 1.25; margin-bottom: 4px; color: var(--off); }
.pc-co  { font-size: 12px; color: var(--mu); margin-bottom: 7px; }
.pc-ft  { display: flex; justify-content: space-between; font-size: 11px; color: var(--mu2); }
/* No-image card variant */
.pc.ni { background: var(--s2); }
.ni-ic { font-size: 22px; padding: 20px 0 8px; text-align: center; color: var(--pk); opacity: .35; }
/* Divider between image-cards and no-image cards */
.proj-sdiv { display: flex; align-items: center; gap: 16px; padding: 24px 0 16px; }
.proj-sdiv span { font-family: var(--fm); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--mu2); white-space: nowrap; }
.proj-sdiv hr { flex: 1; border: 0; border-top: 1px solid var(--br); margin: 0; }
/* List view header + row */
.proj-lhd, .proj-lr {
  display: grid; grid-template-columns: 2fr 2fr 100px 72px 56px;
  gap: 0 16px; align-items: center; padding: 11px 16px;
}
.proj-lhd { background: var(--s2); border-radius: 2px 2px 0 0; }
.proj-lhd span { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--pk-h); }
.proj-lr { border-bottom: 1px solid var(--br); transition: background .2s; }
.proj-lr:hover { background: rgba(221,47,139,.06); }
.proj-lr-nm { font-size: 13px; font-weight: 500; color: var(--off); }
.proj-lr-co { font-size: 12px; color: var(--mu); }
.proj-lr-w, .proj-lr-yr { font-size: 11px; color: var(--mu2); text-align: right; }
/* Load more */
.proj-lm { display: flex; justify-content: center; padding: 36px 0 60px; }
.proj-lm-b {
  font-family: var(--fm); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  padding: 14px 44px; border: 1px solid var(--br); background: transparent;
  color: var(--mu); border-radius: 2px; cursor: pointer; transition: border-color .3s, color .3s;
}
.proj-lm-b:hover { border-color: var(--pk); color: var(--pk-h); }

/* === GRADIENT SECTION CTA - CONTRAST ===================================== */
/* var(--grad) as a SECTION background fails WCAG AA at the bright pink corner
   (#DD2F8B L=0.191 vs var(--off) L=0.803 = 3.54:1 for 15px text).
   Fix: 32% black overlay drops the effective L to 0.130, giving 4.64:1.
   .lead and .text-muted must also be full var(--off), not the 72%-opacity mu. */
section.bg-primary { position: relative; isolation: isolate; }
/* OLD overlay: rgba(0,0,0,.32); */
section.bg-primary::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: transparent;
}
section.bg-primary > .container-xxl { position: relative; z-index: 1; }
/* CTA band section text colors - dark on light lavender background */
section.bg-primary { color: var(--cta-text) !important; }
section.bg-primary h2 {color: var(--cta-text) !important;font-weight: 700;}
section.bg-primary h5 { color: var(--cta-text) !important; }
section.bg-primary .lead,
section.bg-primary .text-muted { color: var(--hd-mu) !important; }
/* ========================================================================== */
/* BOOTSTRAP ICONS UTILITIES                                                  */
/* Sizing and styling classes for Bootstrap Icons                             */
/* ========================================================================== */
/* Icon sizing classes (Bootstrap Icons replacements for Font Awesome sizing) */
.bi { display: inline-block; vertical-align: -0.125em; }
.bi-1x { font-size: 1em; }
.bi-2x { font-size: 2em; }
.bi-3x { font-size: 3em; }
.bi-4x { font-size: 4em; }
.bi-5x { font-size: 5em; }
.bi-fw { width: 1.25em; text-align: center; }

/* Bootstrap Icons in cards */
.card.bg-primary .bi-check-circle { color: var(--off); }
/* Certification icons - ALL gold in the Certifications & Standards section */
i.bi.text-primary { color: var(--gold) !important; }

/* === BOOTSTRAP THEME OVERRIDES =========================================== */
/* Only custom values that differ from Bootstrap 5.3 defaults.               */
/* All standard utilities (d-flex, mb-*, py-*, fw-*, etc.) come from         */
/* Bootstrap CDN loaded before this file -- no need to reduplicate.          */
/* Text - !important needed: Bootstrap 5.3 utility API generates !important */
.text-muted    { color: var(--mu) !important; }
.text-secondary { color: var(--mu) !important; }
.text-white    { color: var(--off) !important; }
.text-primary  {color: var(--pk) !important;}
.text-warning  { color: #f59e0b !important; }
.text-success  { color: #10b981 !important; }
/* Bootstrap display classes inherit --bs-body-color (#212529) which is
   near-black — invisible on dark backgrounds. Force to theme foreground. */
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 { color: var(--off); }
/* Backgrounds */
.bg-dark    { background: var(--bg) !important; }
.bg-light   { background: var(--s1) !important; }
/* CTA band background - soft lavender */
/* OLD: background: var(--grad) !important; then linear-gradient(135deg, #f5f2ff 0%, #e8e0ff 100%) */
.bg-primary {background: var(--wh) !important;}
.bg-white   { background: var(--s1) !important; }
/* Borders */
.border        { border: 1px solid var(--br); }
.border-top    { border-top: 1px solid var(--br); }
.border-bottom { border-bottom: 1px solid var(--br); }
.border-0      { border: none !important; }
/* Misc */
.rounded   { border-radius: 2px; }         /* Bootstrap default is ~6px */
.shadow-sm { box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.shadow    { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.img-fluid { max-width: 100%; height: auto; display: block; }
/* Icon colours (Bootstrap Icons overrides)
.bi-star        { color: #f59e0b; }
.bi-check2      { color: #10b981; }
.bi-check-circle { color: var(--pk); }*/

/* === QUALITY / CERTIFICATIONS ============================================ */
.qual-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: start; margin-top: 52px;
}
.cert-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.cert {
  padding: 28px 24px; background: var(--s2); position: relative;
  border-top: 2px solid transparent; transition: border-color .3s, background .3s;
}
.cert:hover { border-color: var(--pk); background: var(--s3); }
/* Quality/Certifications card icons - crimson pink accent */
.cert-ic { font-size: 24px; color: var(--pk); margin-bottom: 12px; }
.cert-name { font-family: var(--fd); font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--off); }
.cert-desc { font-size: 13px; line-height: 1.75; color: var(--mu); }
/* Quality card badges - crimson pink accent */
.cert-badge {
  display: inline-block; margin-top: 12px; font-family: var(--fm);
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pk-h); border: 1px solid var(--pk-b); padding: 4px 11px; border-radius: 2px;
}
.qual-process { display: flex; flex-direction: column; gap: 2px; }
.qp-title { font-family: var(--fd); font-size: 22px; font-weight: 600; margin-bottom: 4px; color: var(--off); }
.qp-sub { font-size: 14px; line-height: 1.8; color: var(--mu); margin-bottom: 28px; }
.qp-step {
  display: flex; gap: 18px; padding: 18px 0;
  border-bottom: 1px solid var(--br);
}
.qp-step:last-child { border-bottom: none; }
.qp-dot {
  width: 32px; height: 32px; border-radius: 50%; background: var(--grad);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--fd); font-size: 13px; font-weight: 600; color: var(--off);
}
.qp-t { font-size: 14px; font-weight: 600; margin-bottom: 3px; color: var(--off); }
.qp-d { font-size: 13px; line-height: 1.7; color: var(--mu); }

/* === SUSTAINABILITY ======================================================= */
.sus-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; margin-top: 52px; }
.sus-pts, .sus-caps { display: flex; flex-direction: column; gap: 2px; }
.su { display: flex; gap: 18px; padding: 24px 20px; background: var(--s1); border-left: 2px solid transparent; transition: border-color .3s, background .3s; }
.su:hover { border-color: var(--pk); background: var(--s2); }
.su-ic { font-size: 18px; color: var(--pk); flex-shrink: 0; margin-top: 3px; }
.su-t { font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--off); }
.su-d { font-size: 13px; line-height: 1.8; color: var(--mu); }
.cap-row { display: flex; justify-content: space-between; align-items: baseline; }
.bis { background: linear-gradient(135deg,rgba(221,47,139,.08),rgba(75,16,180,.08)); border: 1px solid var(--pk-b); padding: 24px 20px; margin-top: 2px; }
.bis-t { font-family: var(--fm); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--pk-h); margin-bottom: 8px; }
.bis-d { font-size: 13px; line-height: 1.8; color: var(--mu); }
.bis-d strong { color: var(--off); font-weight: 500; }

/* === RESPONSIVE ========================================================== */

/* Large desktop */
@media (max-width: 1199px) {
  .navbar { padding: 14px 28px; }
  .navbar-nav { gap: 2px; }
  .ft-top { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: repeat(2,1fr); }
}

/* Tablet - show hamburger, switch layouts */
@media (max-width: 991px) {
  body { padding-top: 66px; }
  .navbar { padding: 12px 20px; }
  .navbar-nav { display: none; }
  .nav-cta { display: none !important; }
  .navbar-toggler { display: flex; }
  /* Hero */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .h-right { display: none; }
  .h-left { padding: 90px 28px 80px; }
  /* h-stats: pull out of absolute flow */
  .h-stats { position: static; margin-top: 36px; left: auto; bottom: auto; }
  /* Layout classes */
  .col-2-lg { grid-template-columns: 1fr; gap: 36px; }
  .sv-hdr { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .sv-grid { grid-template-columns: 1fr; }
  .sv-extra { grid-template-columns: 1fr; }
  /* Other grids */
  .sec { padding: 64px 24px; }
  .ctrs { grid-template-columns: repeat(2,1fr); }
  .testi-grid { grid-template-columns: repeat(2,1fr); }
  .pr-grid { grid-template-columns: repeat(2,1fr); }
  .logos { grid-template-columns: repeat(3,1fr); }
  .spec-grid { grid-template-columns: repeat(2,1fr); }
  .ft-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* Project mosaic -> 2 columns, implicit rows via grid-auto-rows */
  .pr-mosaic { grid-template-columns: repeat(2,1fr); grid-template-rows: none; grid-auto-rows: 180px; }
  .feat-slide { padding: 36px 0 60px; }
  /* Project gallery */
  .pj-hero { padding: 96px 20px 48px; }
  .pj-layout { grid-template-columns: 1fr; }
  .pj-img-col { display: none; }
  .qual-grid { grid-template-columns: 1fr; gap: 44px; }
  .sus-grid { grid-template-columns: 1fr; gap: 40px; }
  .proj-ctrl { top: 66px; }
  .proj-ctrl-in { padding: 11px 20px; }
  .proj-gal { padding: 24px 20px 32px; }
  .proj-g3 { grid-template-columns: repeat(2,1fr); }
  .proj-lhd, .proj-lr { grid-template-columns: 2fr 2fr 90px 68px; }
  .proj-lhd span:last-child, .proj-lr .proj-lr-yr { display: none; }
}

/* Mobile */
@media (max-width: 767px) {
  body { padding-top: 58px; }
  .navbar { padding: 10px 16px; }
  .sec { padding: 48px 16px; }
  .container-xxl { padding: 0 16px; }
  footer { padding: 40px 16px 20px; }
  /* Hero */
  .h-left { padding: 68px 16px 52px; }
  .h-acts { flex-direction: column; align-items: flex-start; }
  .h-stats { gap: 16px; margin-top: 28px; }
  .hs-n { font-size: 24px; }
  /* Counters */
  .ctrs { grid-template-columns: 1fr 1fr; }
  .ctr { padding: 24px 16px; }
  .ctr-n { font-size: 36px; }
  /* About images */
  .ab-imgs { height: 260px; }
  /* Horizontal service cards -> stack vertically */
  .sv-h { flex-direction: column; }
  .sv-h .sv-img { width: 100%; min-width: 0; height: 180px; }
  /* Grids */
  .testi-grid { grid-template-columns: 1fr; }
  .pr-grid { grid-template-columns: 1fr; }
  .cb-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(3,1fr); }
  .ft-top { grid-template-columns: 1fr; }
  /* Project mosaic -> 2-col equal tiles, remove all spans */
  .pr-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 160px; }
  .pr-mosaic > .gg[style*="span 2"] { grid-column: span 1 !important; grid-row: span 1 !important; }
  .pr-mosaic > .gg[style*="span 1"] { grid-column: span 1 !important; grid-row: span 1 !important; }
  .feat-slide { padding: 24px 0 56px; }
  .page-hero { padding: 72px 16px 36px; }
  .pj-hero { padding: 80px 16px 40px; }
  .pj-stats { gap: 20px; }
  .cert-cards { grid-template-columns: 1fr; }
  /* Project gallery */
  .proj-ctrl { top: 58px; }
  .proj-ctrl-in { padding: 10px 16px; }
  .proj-gal { padding: 16px 16px 28px; }
  .proj-g3 { grid-template-columns: 1fr; }
  .proj-lhd, .proj-lr { grid-template-columns: 1fr 90px; gap: 0 12px; }
  .proj-lhd span:nth-child(2), .proj-lhd span:nth-child(4),
  .proj-lr .proj-lr-co, .proj-lr .proj-lr-w { display: none; }
}

/* Small mobile */
@media (max-width: 480px) {
  .pr-mosaic { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 200px; }
  .ctrs { grid-template-columns: 1fr 1fr; }
  .ctr-n { font-size: 28px; }
  .logos { grid-template-columns: repeat(2,1fr); }
  .btn-lg { padding: 13px 24px; font-size: 12px; }
}

/* === PRINT / REDUCED MOTION ============================================== */
@media print {
  header, footer, .mq, .logo-scroller, .no-print { display: none !important; }
  body { background: white; color: black; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}