/* ===========================================================================
   PUSH DIGITAL — BRANDING SERVICES
   Pure HTML/CSS/JS build · exact parity with the Next.js source.

   SECTIONS
     1. Font variables (replaces next/font)
     2. Global reset (from globals.css)
     3. Site styles + responsive + interaction polish (from Branding.css)
     4. Preloader (from Preloader.css)
   =========================================================================== */

/* ===========================================================================
   1. FONT VARIABLES
   next/font injected these CSS vars on <html>; fonts are loaded via the
   Google Fonts <link> in index.html.
   =========================================================================== */
:root {
  --font-geist-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-geist-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-space-grotesk: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-roboto: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ===========================================================================
   2. GLOBAL RESET
   =========================================================================== */

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html {
  height: 100%;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}


/* ===========================================================================
   3. SITE STYLES — layout, responsive, animations, interaction polish
   =========================================================================== */

/*
  
   Desktop-only responsive (1024px -> 1700px+)
   =========================================================== */
  


/* New mobile-only navbar elements — hidden on desktop/laptop */
.brd-hamburger,
.brd-mobile-menu {
  display: none;
}

/* ---- Section scroll offset (accounts for fixed navbar) ---- */
#home, #about, #services, #why, #process, #cta {
  scroll-margin-top: calc(var(--nav-h, 72px) + 14px);
}

.brd-root {
  --brd-green: #15b86a;
  --brd-green-d: #109e5a;
  --brd-green-dk: #0e5f4b;
  --brd-green-soft: #e6f8ee;
  --brd-blue: #1f76c9;
  --brd-blue-l: #56a8e8;
  --brd-blue-soft: #e6f1fb;
  --brd-ink: #0e1216;
  --brd-text: #2b2f36;
  --brd-muted: #6a7280;
  --brd-bg: #ffffff;
  --brd-bg-2: #fafbfc;
  --brd-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
  --brd-shadow-md: 0 14px 38px rgba(15, 23, 42, 0.08);
  --brd-shadow-lg: 0 30px 70px rgba(15, 23, 42, 0.12);

  --brd-radius: 18px;
  --brd-radius-lg: 28px;
  --brd-radius-xl: 36px;

  width: 100%;
  background: var(--brd-bg);
  color: var(--brd-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(15px, 0.95vw, 16px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.brd-root *,
.brd-root *::before,
.brd-root *::after {
  box-sizing: border-box;
}

.brd-container {
  width: min(1240px, calc(100% - 96px));
  margin-inline: auto;
}

@media (min-width: 1366px) {
  .brd-container {
    width: min(1280px, calc(100% - 120px));
  }
}

@media (min-width: 1536px) {
  .brd-container {
    width: min(1300px, calc(100% - 140px));
  }
}

@media (min-width: 1700px) {
  .brd-container {
  width: min(1315px, 100% - 160px);
       
  }
}

/* =================== Typography =================== */
.brd-eyebrow {
  display: inline-block;
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brd-muted);
  text-transform: uppercase;
}

.brd-h2 {
  font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--brd-ink);
  letter-spacing: -0.01em;
}

.brd-accent-green {
    background: linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.brd-accent-blue {
  color: var(--brd-blue);
}

.brd-accent-dark {
  color: #0e2a36;
}

/* =================== Buttons =================== */
.brd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}

.brd-btn-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.brd-btn-primary {
  background: linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(26, 47, 196, 0.3);
}

.brd-btn-primary:hover {
 
  transform: translateY(-1px);
}

.brd-btn-ghost {
  background: #fff;
  color: var(--brd-ink);
  border: 1.5px solid #d0d5dd;
  box-shadow: none;
}

.brd-btn-ghost:hover {
  border-color: #9aa3b0;
  background: #fafafa;
}

/* =================== NAVBAR =================== */
.brd-nav-wrap {
  z-index: 50;
  background: #c7c7c71f;
  width: 100%;
  padding: clamp(35px, 1.2vw, 11px) 0 12px;
  display: flex;
  position: fixed;
  top: 0;
  box-shadow: 0 0 29px -17px;
  backdrop-filter: blur(7px);
}

.brd-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 80px));
  margin-inline: auto;
  padding: 0;
  gap: 24px;
}

@media (min-width: 1366px) {
  .brd-nav {
    width: min(1240px, calc(100% - 100px));
  }
}

@media (min-width: 1536px) {
  .brd-nav {
    width: min(1320px, calc(100% - 120px));
  }
}

@media (min-width: 1700px) {
  .brd-nav {
    width: min(1600px, 100% - 140px);
  }
}

/* Logo */
.brd-logo {
  flex: none;
  display: flex;
  align-items: center;
}

.brd-logo-img {
  height: clamp(36px, 2.8vw, 46px);
  width: auto;
  display: block;
}

/* Center pill nav */
.brd-nav-links {
  background: #fff;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
     gap: clamp(16px, 6.4vw, 45px);
  margin: 0;
  padding: 8px clamp(18px, 2vw, 30px);
  list-style: none;
  display: flex;
  box-shadow: 0 9px 30px #05c37717, 0 1px 6px #c8bcdc45;
}

.brd-nav-links a {
  display: inline-block;
  padding: 6px 2px;
  font-size: clamp(13.5px, 0.92vw, 15px);
  font-weight: 500;
  color: #999999;
  text-decoration: none;
  position: relative;
  transition: color 0.18s ease;
  white-space: nowrap;
}

.brd-nav-links a:hover {
  color: var(--brd-ink);
}

.brd-nav-links .is-active a {
  color: var(--brd-green);
  font-weight: 600;
}

/* Right group */
.brd-nav-right {
  display: flex;
  align-items: center;
      gap: clamp(10px, 9vw, 15px);
  flex: none;
}

.brd-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.18s;
  text-decoration: none;
}

.brd-nav-icon:hover {
  background: #f3f4f6;
}

.brd-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 20px;
  background: linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: clamp(13px, 0.9vw, 14.5px);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(26, 47, 196, 0.28);
  transition: transform 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}

.brd-nav-cta:hover {
 
  transform: translateY(-1px);
}

/* =================== HERO =================== */
.brd-hero {
  position: relative;
  padding: clamp(32px, 4vw, 60px) 0 clamp(48px, 6vw, 90px);
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  height: 100vh;
}

/* Large green circle cropped on left side */
.brd-hero-green-side {
  z-index: 0;
  pointer-events: none;
  /* background: #15b86a; */
  border-radius: 50%;
  width: clamp(380px, 32vw, 560px);
  height: clamp(380px, 32vw, 560px);
  position: absolute;
  top: 50%;
  left: clamp(-402px, -22vw, -203px);
  transform: translateY(-50%);
  border: 65px solid #15b86a;
}

.brd-hero-green-side {
  z-index: 0;
  pointer-events: none;

  border: 65px solid #15b86a;
  border-radius: 50%;

  width: clamp(380px, 32vw, 560px);
  height: clamp(380px, 32vw, 560px);

  position: absolute;

  top: 50%;
  left: clamp(-402px, -22vw, -203px);

  transform: translateY(-50%);

  animation: heroGreenFloat 6s ease-in-out infinite;
}

/* FLOATING RING EFFECT */

@keyframes heroGreenFloat {
  0% {
    transform: translateY(-50%) scale(1) rotate(0deg);
    filter: brightness(1);
  }

  25% {
    transform: translateY(-53%) scale(1.02) rotate(1deg);
  }

  50% {
    transform: translateY(-56%) scale(1.05) rotate(2deg);
    filter: brightness(1.08);
  }

  75% {
    transform: translateY(-53%) scale(1.02) rotate(1deg);
  }

  100% {
    transform: translateY(-50%) scale(1) rotate(0deg);
    filter: brightness(1);
  }
}

/* 2-column hero layout */
.brd-hero-inner {
 z-index: 1;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: clamp(32px, 4vw, 64px);
    display: grid;
    position: relative;
    justify-content: center;
    height: 90vh;
}

/* LEFT column */
.brd-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 560px;
}

/* BRANDING eyebrow */
.brd-hero-eyebrow {
  display: inline-block;
  font-size: clamp(11px, 0.76vw, 12.5px);
  font-weight: 700;

  letter-spacing: 0.2em;
  color: var(--brd-green);
  text-transform: uppercase;
  margin-bottom: clamp(10px, 1vw, 16px);
}

/* Heading */
.brd-hero-title {
  font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(38px, 4.2vw, 66px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--brd-ink);
  margin: 0 0 clamp(16px, 1.6vw, 24px);
}

/* Body paragraph (dark) */
.brd-hero-sub {
  font-size: clamp(14px, 0.98vw, 15.5px);
  line-height: 1.68;
  color: #525861;
  max-width: 545px;
  margin: 0 0 clamp(10px, 1vw, 16px);
}

/* Blue italic highlight paragraph */
.brd-hero-sub-blue {
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.65;
  color: var(--brd-blue);
 max-width: 500px;
  margin: 0 0 clamp(22px, 2.2vw, 34px);
}

/* Button row */
.brd-hero-ctas {
  display: flex;
  gap: clamp(10px, 1vw, 16px);
  flex-wrap: wrap;
  align-items: center;
}

/* Primary button: dark navy → matches reference dark blue */
.brd-btn-primary {
  background:linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(26, 47, 196, 0.3);
}

.brd-btn-primary:hover {
 
  transform: translateY(-1px);
}

/* Ghost button: white with border */
.brd-btn-ghost {
 
    color: var(--brd-ink);
    background: #fff;
    border: 1.5px solid transparent;
    background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: none;
}


.brd-btn-ghost:hover {
  border-color: #9aa3b0;
  background: #fafafa;
}

/* RIGHT column */
.brd-hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(20px, 2.5vw, 40px) 0;
}

/* Green circle behind image (bottom-right of image) */
.brd-hero-green-back {
  z-index: 0;
  /* background: #15b86a; */
  border-radius: 50%;
  width: clamp(200px, 26vw, 452px);
  height: clamp(200px, 23vw, 488px);
  position: absolute;
  bottom: clamp(-41px, -5vw, -20px);
    right: clamp(-4px, -20vw, -25px);
  border: 65px solid #15b86a;
}

.brd-hero-green-back {
  z-index: 0;

  border: 65px solid #15b86a;
  border-radius: 50%;

  width: clamp(200px, 26vw, 452px);
  height: clamp(200px, 23vw, 488px);

  position: absolute;

  bottom: clamp(-41px, -5vw, -20px);
  right: clamp(-4px, -20vw, -25px);

  animation: heroGreenBackFloat 7s ease-in-out infinite;
}

/* FLOATING ORGANIC RING */

@keyframes heroGreenBackFloat {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1);
  }

  25% {
    transform: translateY(-8px) scale(1.02) rotate(-1deg);
  }

  50% {
    transform: translateY(-16px) scale(1.05) rotate(-2deg);
    filter: brightness(1.08);
  }

  75% {
    transform: translateY(-8px) scale(1.02) rotate(-1deg);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    filter: brightness(1);
  }
}

/* Small blue dot */
.brd-hero-dot-sm {
  opacity: .85;
  z-index: 1;
  background: #a8c4e8;
  border-radius: 50%;
  width: clamp(20px, 2.6vw, 33px);
  height: clamp(20px, 2.6vw, 33px);
  position: absolute;
  bottom: clamp(-52px, 31vw, -70px);
  right: clamp(22px, -14vw, 93px);
}

/* Large blue dot */
.brd-hero-dot-lg {
  z-index: 1;
  background: #1a6fd4;
  border-radius: 50%;
  width: clamp(30px, 3.4vw, 50px);
  height: clamp(30px, 3.4vw, 50px);
  position: absolute;
  bottom: clamp(-53px, 43.8vw, -75px);
  right: clamp(-45px, -10.8vw, -37px);
}

/* Image frame with blue border/glow */
.brd-hero-img-frame {
  position: relative;
  z-index: 2;
  width: clamp(320px, 42vw, 580px);
  aspect-ratio: 4 / 3;
  border-radius: clamp(16px, 1.4vw, 22px);
  border: 2.5px solid #2254c8;
  overflow: hidden;
  background: #0a0a0a;
  flex: none;

  box-shadow:
    0 0 0 1px rgba(34, 84, 200, 0.15),
    0 20px 50px rgba(0, 0, 0, 0.18),
    0 6px 18px rgba(34, 84, 200, 0.2);

  transition:
    transform 0.90s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;

  will-change: transform;
}

/* HOVER EFFECT */
.brd-hero-img-frame:hover {
  transform: translateY(-8px) scale(1.02);

  border-color: #3f73f1;

  box-shadow:
    0 0 0 1px rgba(63, 115, 241, 0.3),
    0 28px 70px rgba(0, 0, 0, 0.28),
    0 10px 30px rgba(34, 84, 200, 0.35);
}


.brd-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =================== ABOUT =================== */
.brd-about {
  position: relative;
  padding: clamp(60px, 6.5vw, 100px) 0 clamp(70px, 7vw, 110px);
  background: #f0f4fb;
  overflow: visible;
  z-index: 2;
}

/* Decorative circles */
.brd-about-dec {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Large blue circle — bottom-left, partially cropped */
.brd-about-dec--left-blue {
  opacity: 1;
  /* background: #3a7fe8; */
  width: clamp(180px, 81vw, 581px);
  height: clamp(180px, 81vw, 585px);
  bottom: clamp(-303px, 530vw, -376px);
  left: clamp(-370px, 99vw, -382px);
  border: 65px solid #3a7fe8;

}

.brd-about-dec--left-blue {
  opacity: 1;

  border: 65px solid #3a7fe8;
  border-radius: 50%;

  width: clamp(180px, 81vw, 581px);
  height: clamp(180px, 81vw, 585px);

  bottom: clamp(-303px, 530vw, -376px);
  left: clamp(-370px, 99vw, -382px);

  animation: aboutLeftBlueFloat 8s ease-in-out infinite;
}

/* ORGANIC FLOATING RING */

@keyframes aboutLeftBlueFloat {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }

  25% {
    transform: translateY(-10px) scale(1.02) rotate(1deg);
  }

  50% {
    transform: translateY(-20px) scale(1.05) rotate(2deg);
    opacity: 0.92;
  }

  75% {
    transform: translateY(-10px) scale(1.02) rotate(1deg);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Small gray circle — right side, upper */
.brd-about-dec--right-gray {
  opacity: 0.7;
  background: #b0b8c8;

  width: clamp(24px, 3vw, 54px);
  height: clamp(22px, 3vw, 54px);

  bottom: clamp(80px, 9vw, 146px);
  right: clamp(60px, 6vw, 63px);

  animation: grayBubbleFloat 4.5s ease-in-out infinite;
}

/* SOFT FLOATING EFFECT */

@keyframes grayBubbleFloat {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }

  25% {
    transform: translateY(-4px) scale(1.03);
  }

  50% {
    transform: translateY(-9px) scale(1.08);
    opacity: 0.9;
  }

  75% {
    transform: translateY(-4px) scale(1.04);
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
}
/* Medium blue circle — right side */
.brd-about-dec--right-blue {
  background: #1a6fd4;

  width: clamp(38px, 5.6vw, 86px);
  height: clamp(38px, 5.6vw, 86px);

  bottom: clamp(28px, 3.5vw, 32px);
  right: clamp(20px, 5vw, 94px);

  animation: blueBubbleFloat 3.8s ease-in-out infinite;
}

/* FLOATING BUBBLE EFFECT */

@keyframes blueBubbleFloat {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  25% {
    transform: translateY(-6px) scale(1.05);
  }

  50% {
    transform: translateY(-12px) scale(1.12);
    filter: brightness(1.15);
  }

  75% {
    transform: translateY(-6px) scale(1.06);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* Small green circle — right edge, partially cropped */
.brd-about-dec--right-green {
  background: #15b86a;

  width: clamp(28px, 20.8vw, 141px);
  height: clamp(28px, 21.8vw, 141px);

  bottom: clamp(-98px, 86vw, -110px);
  right: clamp(-14px, 24vw, 41px);

  overflow: visible;

  transform: translateY(47px);

  animation: greenBubbleFloat 4s ease-in-out infinite;
}

/* FLOATING + SOFT EXPLODE EFFECT */

@keyframes greenBubbleFloat {
  0% {
    transform: translateY(47px) scale(1);
    filter: brightness(1);
  }

  25% {
    transform: translateY(40px) scale(1.04);
  }

  50% {
    transform: translateY(34px) scale(1.1);
    filter: brightness(1.12);
  }

  75% {
    transform: translateY(40px) scale(1.05);
  }

  100% {
    transform: translateY(47px) scale(1);
    filter: brightness(1);
  }
}

/* Inner container — centered single column */
.brd-about-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Eyebrow: small green uppercase */
.brd-about-eyebrow {
  display: inline-block;
  font-size: clamp(10.5px, 0.75vw, 12px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--brd-green);
  text-transform: uppercase;
  margin-bottom: clamp(10px, 1vw, 16px);
}



/* Heading */
.brd-about-h2 {
  font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--brd-ink);
  margin: 0 0 clamp(24px, 2.4vw, 36px);
}

/* Gradient span: blue → green */
.brd-about-gradient {
  background: linear-gradient(90deg, #1a6fd4 0%, #15b86a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Illustration */
.brd-about-illus {
  width: clamp(160px, 16vw, 240px);
  margin-bottom: clamp(24px, 2.5vw, 40px);

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;

  will-change: transform;
}

.brd-about-illus:hover {
  transform: translateY(-6px) scale(1.04);
  filter: drop-shadow(0 10px 24px rgba(34, 84, 200, 0.22));
}

.brd-about-illus-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Body paragraphs */
.brd-about-text {
  color: #4a5160;
  max-width: 932px;
  margin: 0 auto;
  font-size: clamp(14px, 1vw, 16.5px);
 line-height: 1.92;
}

.brd-about-text--gap {
  margin-top: clamp(12px, 1.2vw, 18px);
}



/* =================== SERVICES =================== */
.brd-services {
  position: relative;
  padding: clamp(60px, 6.5vw, 100px) 0 clamp(70px, 7vw, 110px);
  background: #fff;
  overflow: hidden;
}


.brd-section-head {
  text-align: center;
  margin-bottom: clamp(40px, 4vw, 60px);
  position: relative;
  z-index: 1;
}

.brd-section-head .brd-eyebrow {
  margin-bottom: 12px;
}

.brd-services-grid {
  z-index: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 3.4vw, 53px);
  display: grid;
  position: relative;
}

/* Card wrapper — transparent so page bg shows through chevron notch */
.brd-service-card {
  box-shadow: none;
  background: #F2F2F2;
  border: none;
  flex-direction: column;
  transition: transform .22s;
  display: flex;
  overflow: visible;

}

.brd-service-card:hover {
  transform: translateY(-5px);
}

/* Top gray area with downward-pointing chevron at bottom */
.brd-service-top {
  clip-path: polygon(0 0, 100% 0, 100% 47%, 51% 88%, 0 47%);
  background: #ffffff;
  justify-content: center;
  align-items: center;
  min-height: clamp(148px, 14vw, 210px);
  padding: clamp(28px, 3vw, 44px) 23px clamp(48px, 5vw, 68px);
  display: flex;
}

/* Icon sits inside top area */
.brd-service-icon {
  width: clamp(60px, 5.5vw, 78px);
  height: clamp(60px, 5.5vw, 78px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.brd-service-icon svg {
  width: 100%;
  height: 100%;
}

/* Green label bar — sits below the gray area, page bg shows in chevron gap */
.brd-service-bot {
  background: #15b86a;
     padding: clamp(12px, 3.2vw, 27px) 12px;
  text-align: center;
  /* pull up slightly to close any sub-pixel gap at the chevron tip */
  margin-top: -1px;
}

.brd-service-name {
 font-size: clamp(13px, 1vw, 20px);
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.25;
}


/* =================== WHY =================== */
/* =================== WHY CHOOSE US =================== */
.brd-why {
  position: relative;
  padding: clamp(60px, 6.5vw, 100px) 0 clamp(70px, 7vw, 110px);
  background: #fff;
  overflow: visible;
}

/* Decorative circles */
.brd-why-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Top-right large blue ring */
.brd-why-deco--tr {
  width: clamp(280px, 28vw, 420px);
  height: clamp(280px, 28vw, 420px);
  top: clamp(-140px, -10vw, -80px);
  right: clamp(-244px, -12vw, -100px);
  border: clamp(44px, 4.5vw, 66px) solid #1f76c9;
  opacity: 0.92;
}

.brd-why-deco--tr {
 opacity: 0.92;
    border: clamp(44px, 4.5vw, 66px) solid #1f76c9;
    border-radius: 50%;
    width: clamp(280px, 28vw, 420px);
    height: clamp(280px, 28vw, 420px);
    top: clamp(-140px, -10vw, -80px);
    right: clamp(-266px, -16vw, -100px);
    animation: whyTopRightFloat 8s ease-in-out infinite;
}


/* FLOATING RING EFFECT */

@keyframes whyTopRightFloat {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.92;
  }

  25% {
    transform: translateY(-8px) scale(1.02) rotate(-1deg);
  }

  50% {
    transform: translateY(-18px) scale(1.05) rotate(-2deg);
    opacity: 0.82;
  }

  75% {
    transform: translateY(-8px) scale(1.02) rotate(-1deg);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.92;
  }
}

/* Left cluster — green solid */

.brd-why-deco--left-green {
  background: #15b86a;

   width: clamp(26px, 11.6vw, 127px);
    height: clamp(26px, 11.6vw, 127px);
    top: 30%;
  left: clamp(20px, 3vw, 14px);

  border-radius: 50%;

  animation: whyGreenBubble 4s ease-in-out infinite;
}

/* FLOATING BUBBLE EFFECT */

@keyframes whyGreenBubble {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  25% {
    transform: translateY(-5px) scale(1.04);
  }

  50% {
    transform: translateY(-11px) scale(1.1);
    filter: brightness(1.12);
  }

  75% {
    transform: translateY(-5px) scale(1.05);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* Left cluster — light gray */
.brd-why-deco--left-gray {
  opacity: .7;
  background: #c8cfd8;
  width: clamp(18px, 1.8vw, 28px);
  height: clamp(18px, 1.8vw, 28px);
  top: 46%;
  left: clamp(59px, 9.6vw, 133px);
}

.brd-why-deco--left-gray {
  opacity: 0.7;
  background: #c8cfd8;

      width: clamp(18px, 1.8vw, 50px);
    height: clamp(18px, 1.8vw, 50px);
    top: 39%;
  left: clamp(59px, 9.6vw, 133px);

  border-radius: 50%;

  animation: whyGrayBubble 5s ease-in-out infinite;
}

/* SOFT FLOATING EFFECT */

@keyframes whyGrayBubble {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }

  25% {
    transform: translateY(-3px) scale(1.03);
  }

  50% {
    transform: translateY(-7px) scale(1.08);
    opacity: 0.92;
  }

  75% {
    transform: translateY(-3px) scale(1.04);
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
}

/* Left cluster — blue solid */
.brd-why-deco--left-blue {
  width: clamp(34px, 3.4vw, 52px);
  height: clamp(34px, 3.4vw, 52px);
  left: clamp(20px, 3vw, 50px);
  top: calc(42% + clamp(44px, 4.5vw, 68px));
  background: #1a6fd4;
}

.brd-why-deco--left-blue {
  background: #1a6fd4;

  width: clamp(34px, 3.4vw, 72px);
    height: clamp(34px, 3.4vw, 72px);
    top: calc(37% + clamp(44px, 4.5vw, 68px));
  left: clamp(20px, 3vw, 50px);

  border-radius: 50%;

  animation: whyBlueBubble 4.2s ease-in-out infinite;
}

/* FLOATING BLUE BUBBLE */

@keyframes whyBlueBubble {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  25% {
    transform: translateY(-4px) scale(1.04);
  }

  50% {
    transform: translateY(-10px) scale(1.1);
    filter: brightness(1.15);
  }

  75% {
    transform: translateY(-4px) scale(1.05);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* ── WHY LIST: SVG-based pills ── */
.brd-why-list {
  flex-direction: column;
  gap: clamp(10px, 4.2vw, 53px);
  max-width: 1200px;
  margin: clamp(28px, 3vw, 46px) auto 0;
  padding: 0;
  list-style: none;
  display: flex
}

/* Each item: 68% wide, alternates left/right */
.brd-why-item {
 width: 55%;
    min-width: 320px;
}

.brd-why-item.is-left {
  align-self: flex-start;
}

.brd-why-item.is-right {
  align-self: flex-end;
}

/* SVG pill wrapper */
.wpill {
  position: relative;
  width: 100%;
  display: block;
}

/* SVG fills 100% width, maintains aspect ratio (508:120) */
.wpill-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* Title overlay — vertically centered over SVG */
.wpill-txt {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 700;
 font-size: clamp(11.5px, 2vw, 24px);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.02em;
}

/*
  Left pills: green icon zone = 0–28% of SVG width (x=0..142/508).
  Text starts just after icon zone.
*/
.wpill-txt--l {
  left: 31%;
}

/*
  Right pills: green icon zone = 72–100% of SVG width (x=366..508/508).
  Text ends just before icon zone.
*/
.wpill-txt--r {
  right: 31%;
}


/* =================== PROCESS =================== */
.brd-process {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: clamp(64px, 6.5vw, 108px) 0;
}

/* Full-bleed left green blob */
.brd-proc-blob {
 background: var(--brd-green);
    z-index: 0;
    width: 28%;
    position: absolute;
    top: -80px;
    bottom: -80px;
    left: 0;
}




.brd-eyebrow{
  color: var(--brd-green);
}

/*
  Convex right edge — tight radius for dramatic curve:
  R=500px creates a 200px extension at center tapering to ~25px at blob top/bottom.
  Smaller radius = curvier. Larger radius = gentler.
*/
.brd-proc-blob::after {
     content: "";
    background: var(--brd-green);
    border-radius: 105%;
    width: 1381px;
    height: 1000px;
    position: absolute;
    top: 50%;
    right: -366px;
    transform: translateY(-50%);
}

/* Two-column flex: heading | steps */
.brd-proc-layout {
  display: flex;
  align-items: flex-start;
  min-height: clamp(420px, 38vw, 560px);
  position: relative;
  z-index: 1;
}

/* LEFT: heading over green blob — upper portion like reference */
.brd-proc-heading {
  width: 44%;
  flex-shrink: 0;
  /* top padding positions heading in the upper half of the green shape */
  padding: clamp(48px, 5.5vw, 88px) clamp(8px, 1vw, 20px) 0 0;
}

.brd-proc-h2 {
      font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(52px, 5.6vw, 96px);
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    margin: 0;
    letter-spacing: -0.03em;
    margin-top: 45px;
    margin-left: -142px;

}

/* "Process" — dark navy to match reference */
.brd-proc-word3 {
 
  background: linear-gradient(84deg, #04c 33%, #001041 100%, #fff 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display: inline-block;
}

/* STEP POSITIONS USING TOP + LEFT */

.step_1{
  position: relative;
  top: -126px;
  left: -192px;
}

.step_2{
  position: relative;
  top: -85px;
  left: -46px;
}

.step_3{
  position: relative;
  top: -13px;
  left: -38px;
}

.step_4{
  position: relative;
  top: 53px;
  left: -162px;
}

/* RIGHT: steps list */
.brd-proc-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: clamp(40px, 4vw, 64px) 0 0 0;
  display: flex;
  flex-direction: column;
      gap: clamp(28px, 3.2vw, 76px);
}

/* Each step */
.brd-proc-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.4vw, 22px);
  margin-left: clamp(-5px, -2vw, -12px);

  transition: transform 0.3s ease-in-out;
}

/* HOVER EFFECT */
.brd-proc-step:hover {
  transform: scale(1.05);
}

/* White circle with blue border — matches reference */
.brd-proc-bubble {
    z-index: 2;
    position: relative;

    width: clamp(72px, 5.8vw, 99px);
    height: clamp(72px, 5.8vw, 99px);

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    padding: 5.5px;

    background: linear-gradient(
        90deg,
        #347dff 0%,
        #1f4b99 100%
    );
}
.brd-proc-bubble::before {
    content: "";

    position: absolute;
    inset: 5.5px;

    background: #fff;
    border-radius: 50%;

    z-index: -1;
}

.brd-proc-bubble svg {
  width: clamp(28px, 2.4vw, 36px);
  height: clamp(28px, 2.4vw, 36px);
  color: #1e40af;
}

/* Title: bold blue */
.brd-proc-title {
  font-family: var(--font-roboto), "Roboto", sans-serif;
     font-size: clamp(16px, 3.3vw, 32px);
  font-weight: 700;
  color: #1e40af;
  margin: 0 0 6px;
  line-height: 1.3;
}

/* Description */
.brd-proc-desc {
  font-size: clamp(12.5px, 0.92vw, 16px);
  color: #5b626c;
  line-height: 1.65;
  margin: 0;
  max-width: 280px;
}


/* =================== CTA =================== */
.brd-cta {
  padding: clamp(60px, 6vw, 100px) 0 clamp(83px, -9vw, 45px);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.brd-cta-box {
  position: relative;
  border-radius: 24px;
  padding: clamp(56px, 5.5vw, 88px) clamp(48px, 5vw, 80px);
  /* Blue left → Green right diagonal — matches reference */
  background: linear-gradient(120deg,
      #1e3fbe 0%,
      #1b6fd4 42%,
      #15b86a 100%);
  text-align: center;
  color: #fff;
  overflow: visible;
  box-shadow: 0 24px 64px rgba(21, 60, 180, 0.22);
}

/* ── Decorative circles ── */
.brd-cta-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Top-right: open blue ring (border only) */
.brd-cta-deco--ring {
  border: clamp(18px, 5.8vw, 40px) solid #e9f1ff;
  border-radius: 50%;

  width: clamp(120px, 18vw, 250px);
  height: clamp(120px, 18vw, 250px);

     top: clamp(-70px, -36vw, -64px);
 right: clamp(-377px, -24vw, -40px);
  animation: ctaRingFloat 7s ease-in-out infinite;
}

/* FLOATING CTA RING */

@keyframes ctaRingFloat {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }

  25% {
    transform: translateY(-6px) scale(1.02) rotate(1deg);
  }

  50% {
    transform: translateY(-14px) scale(1.06) rotate(2deg);
    opacity: 0.9;
  }

  75% {
    transform: translateY(-6px) scale(1.02) rotate(1deg);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}
/* Bottom-left: solid green circle (partially cropped) */
.brd-cta-deco--blob {
  opacity: 1.85;
  background: #15b86a;
  width: clamp(130px, 20vw, 400px);
  height: clamp(130px, 20vw, 400px);
     bottom: clamp(-271px, -22vw, -56px);
  left: clamp(-510px, -46vw, -54px);
}

/* Content wrapper — sits above decorative elements */
.brd-cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Heading */
.brd-cta-title {
  font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(26px, 2.6vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  max-width: 680px;
}

/* Subtitle */
.brd-cta-sub {
     color: #ffffffe0;
    max-width: 650px;
    margin: 0 auto clamp(28px, 2.8vw, 40px);
    font-size: clamp(13.5px, .98vw, 17.5px);
    line-height: 1.85;
}

/* White pill button — matches reference exactly */
.brd-cta-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(13px, 1.2vw, 17px) clamp(24px, 2.4vw, 36px);
  background: #ffffff;
  color:#0044CC;
  font-size: clamp(13.5px, 0.96vw, 15px);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: po inter;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}

.brd-cta-btn-white svg {
  flex: none;
  color: #0025fa;
}

.brd-cta-btn-white:hover {
  background: #f4f6ff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}


/* =====================================================================
   DESKTOP-LAPTOP -- 1367px to 1700px proportional override
   Clamp bounds recalibrated for 1367-1700 range (no premature clamping).
   ===================================================================== */
@media (min-width: 1701px) {
  /* Hide desktop-specific elements, show mobile nav */
  .brd-hamburger{display: none;}
}

@media (min-width: 1367px) and (max-width: 1700px) {

  /* --- NAVBAR --- */
  .brd-nav-right { gap: clamp(19px, 1.4vw, 24px); }
  .brd-nav-links { gap: clamp(52px, 0.8vw, 65px); padding: 8px clamp(24px, 1.8vw, 31px);margin-top: -7px; }
  .brd-nav-cta { padding: 10px clamp(16px, 1.2vw, 21px) 10px clamp(19px, 1.4vw, 24px); font-size: clamp(12.3px, 0.9vw, 14.5px); }
  .brd-hamburger{display: none;}

  /* --- HERO --- */
  .brd-hero-inner { gap: clamp(43px, 3.2vw, 55px); margin-left: clamp(116px, 8.5vw, 145px); grid-template-columns: 1fr 1.05fr; }
  .brd-hero-left { padding-left: 40px; max-width: clamp(540px, 40vw, 578px); }
  .brd-hero-title { font-size: clamp(57px, 4.2vw, 66px); }
  .brd-hero-img-frame { width: clamp(519px, 38vw, 580px); }
  .brd-hero-green-side { width: clamp(410px, 30vw, 520px); height: clamp(410px, 30vw, 520px); left: clamp(-360px, -21vw, -287px); border-width: clamp(61px, 4.5vw, 70px); }
  .brd-hero-green-back { width: clamp(300px, 22vw, 420px); height: clamp(273px, 20vw, 420px); border-width: clamp(61px, 4.5vw, 65px); bottom: clamp(-44px, -3.2vw, -10px); right: clamp(-26px, 0.5vw, 10px); }
  .brd-hero-dot-sm { width: clamp(27px, 2vw, 34px); height: clamp(27px, 2vw, 34px); bottom: clamp(-70px, -4.2vw, -40px); right: clamp(20px, 22vw, 80px); }
  .brd-hero-dot-lg { width: clamp(38px, 2.8vw, 48px); height: clamp(38px, 2.8vw, 48px); bottom: clamp(-65px, -4.6vw, -45px); right: clamp(18px, -12.2vw, -20px); }

  /* --- ABOUT --- */
  .brd-about-dec--left-blue { width: clamp(437px, 32vw, 544px); height: clamp(437px, 32vw, 544px); border-width: clamp(57px, 5.2vw, 70px); bottom: clamp(-260px, -18vw, -310px); left: clamp(-360px, -21vw, -357px); }
  .brd-about-illus { width: clamp(191px, 14vw, 238px); }
  .brd-about-text { max-width: clamp(900px, 70vw, 932px); font-size: clamp(14.4px, 1vw, 16.5px); }
  .brd-about-dec--right-gray { width: clamp(32px, 2.4vw, 41px); height: clamp(32px, 2.4vw, 41px); bottom: clamp(70px, 8vw, 136px); right: clamp(46px, 4.8vw, 82px); }
  .brd-about-dec--right-blue { width: clamp(60px, 4.4vw, 75px); height: clamp(60px, 4.4vw, 75px); bottom: clamp(18px, 2.6vw, 44px); right: clamp(49px, 3.6vw, 61px); }
  .brd-about-dec--right-green { width: clamp(123px, 9vw, 141px); height: clamp(123px, 9vw, 141px); bottom: clamp(-102px, -6vw, -85px); right: clamp(-14px, -0.8vw, 10px); }
  .brd-h2 { font-size: clamp(35px, 2.6vw, 44px); }
  .brd-about-h2 { font-size: clamp(41px, 3vw, 46px); }

  /* --- SERVICES --- */
  .brd-services-grid { gap: clamp(32px, 2.4vw, 41px); }
  .brd-service-top { min-height: clamp(178px, 13vw, 210px); padding: clamp(35px, 2.6vw, 44px) 18px clamp(60px, 4.4vw, 68px); }
  .brd-service-icon { width: clamp(68px, 5vw, 78px); height: clamp(68px, 5vw, 78px); }
  .brd-service-name { font-size: clamp(12.8px, 2.94vw, 18px); }

  /* --- WHY CHOOSE US --- */
  .brd-why-list { gap: clamp(35px, 2.6vw, 44px); max-width: clamp(1064px, 86vw, 1200px); }
  .brd-why-item { width: clamp(540px, 48vw, 640px); }
  .wpill-txt { font-size: clamp(14px, 3.08vw, 23px); }
  .brd-why-deco--tr { width: clamp(300px, 22vw, 400px); height: clamp(300px, 22vw, 400px); border-width: clamp(52px, 5.8vw, 70px); top: clamp(-123px, -9vw, -80px); right: clamp(-164px, -12vw, -100px); }
  
  .brd-why-deco--left-green { width: clamp(41px, 9vw, 95px); height: clamp(41px, 9vw, 95px); }
  .brd-why-deco--left-gray { width: clamp(20px, 7.5vw, 40px); height: clamp(20px, 7.5vw, 40px); left: clamp(104px, 7.6vw, 129px); }
  .brd-why-deco--left-blue { width: clamp(38px, 8.8vw, 60px); height: clamp(38px, 8.8vw, 60px); left: clamp(30px, 2.2vw, 37px); }

  /* --- PROCESS --- */
  .brd-proc-blob::after { width: clamp(1298px, 95vw, 1400px); right: clamp(-374px, -22vw, -300px); }
  .brd-proc-layout { min-height: clamp(492px, 36vw, 560px); }
  .brd-proc-h2 { font-size: clamp(73px, 5.4vw, 86px); margin-top: clamp(41px, 3vw, 51px);margin-left: -5px; }
  .brd-proc-heading { width: clamp(36%, 42%, 46%); padding: clamp(65px, 4.8vw, 82px) clamp(10px, 0.8vw, 14px) 0 0; }
  .brd-proc-list {
  padding-top: clamp(53px, 8.6vw, 80px);
  margin-left: clamp(53px, 8.6vw, 86px);
  gap: clamp(35px, 2.6vw, 44px);
}

.brd-proc-step {
  position: relative;
  gap: clamp(16px, 1.2vw, 20px);
  margin-left: 0;
  transition: transform 0.3s ease-in-out;
}

/* STEP POSITIONS */

.step_1 {
  left: -08.76vw;
  top: -7.75vw;
}

.step_2 {
  left: -2.19vw;
  top: -5.29vw;
}

.step_3 {
  left: -1.64vw;
  top: -0.9vw;
}

.step_4 {
  left: -8.25vw;
  top: 3.68vw;
}

/* HOVER */

.brd-proc-step:hover {
  transform: scale(1.05);
}
 .brd-proc-bubble { width: clamp(73px, 5.4vw, 92px); height: clamp(73px, 5.4vw, 92px); }
  .brd-proc-bubble svg { width: clamp(28px, 2.1vw, 36px); height: clamp(28px, 2.1vw, 36px); }
  .brd-proc-title { font-size: clamp(16px, 1.2vw, 20px); }
  .brd-proc-desc { font-size: clamp(11.7px, 0.86vw, 14.6px); max-width: clamp(259px, 19vw, 280px); }
  /* --- CTA --- */
  .brd-cta-box { padding: clamp(68px, 5vw, 85px) clamp(62px, 4.6vw, 78px); }
  .footer-layout { width: min(930px, 88vw); }
  .brd-cta-title { font-size: clamp(35px, 2.6vw, 44px); max-width: clamp(600px, 50vw, 680px); }
  .brd-cta-sub { font-size: clamp(13.8px, 0.96vw, 16.3px); max-width: clamp(600px, 50vw, 650px); }
  .brd-cta-deco--ring { width: clamp(191px, 14vw, 238px); height: clamp(191px, 14vw, 238px); border-width: clamp(57px, 4.2vw, 65px); top: clamp(-90px, -7vw, -70px); right: clamp(-381px, -25vw, 0px); }
  .brd-cta-deco--blob {width: clamp(218px, 16vw, 272px);
        height: clamp(218px, 16vw, 272px);
        bottom: clamp(-279px, -34vw, -90px);
        left: clamp(-410px, -30vw, -360px); }
}
/* =====================================================================
   LAPTOP NARROW — 1024px to 1366px precision override
   MUST sit after the 1024–1700px block to win in cascade.
   ===================================================================== */
@media (min-width: 1024px) and (max-width: 1366px) {

  /* ─── NAVBAR */
  .brd-nav-links {gap: clamp(14px, 6.4vw, 32px); padding: 8px clamp(14px, 1.6vw, 22px); }
  .brd-nav-right { gap: clamp(8px, 1.2vw, 18px); }
  .brd-nav-cta { padding: 9px clamp(12px, 1.1vw, 16px) 9px clamp(14px, 1.2vw, 18px); font-size: clamp(12px, 0.88vw, 13.5px); gap: 6px; }
  .brd-nav-wrap { padding: clamp(23px, 1.2vw, 11px) 0 15px}
  .brd-hamburger{display: none;}
  .brd-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1111px, calc(100% - 80px));
    margin-inline: auto;
    padding: 0;
    gap: 24px;
}


  /* ─── HERO */
  .brd-hero-inner { gap: clamp(16px, 2.2vw, 40px); margin-left: clamp(0px, 5.5vw, 80px); grid-template-columns: minmax(310px, 1fr) minmax(280px, 1.05fr); }
  .brd-hero-left {        max-width: clamp(300px, 43vw, 537px);
        padding-left: 50px; }
  .brd-hero-title { font-size: clamp(26px, 3.8vw, 50px); }
  .brd-hero-img-frame { width: clamp(260px, 34vw, 480px); }
  .brd-hero-green-side { width: clamp(240px, 28vw, 400px); height: clamp(240px, 28vw, 400px); left: clamp(-320px, -20vw, -160px); border-width: clamp(42px, 4vw, 58px); }
  .brd-hero-green-back {        border-width: clamp(42px, 4vw, 58px);
        width: clamp(140px, 18vw, 260px);
        height: clamp(140px, 18vw, 260px);
        bottom: clamp(-86px, -3.4vw, -8px);
        right: clamp(106px, -3.2vw, 4px); 
      }

  .brd-hero-dot-sm { width: clamp(14px, 1.6vw, 24px);
        height: clamp(14px, 1.6vw, 24px);
        bottom: clamp(-69px, -7vw, -29px);
        right: clamp(44px, 12vw, 160px);}
  .brd-hero-dot-lg {        width: clamp(20px, 2.4vw, 38px);
        height: clamp(20px, 2.4vw, 38px);
        bottom: clamp(-60px, -6.4vw, -32px);
        right: clamp(-32px, 8vw, 80px); }

  /* ─── ABOUT */
  .brd-about-dec--left-blue { width: clamp(140px, 26vw, 380px); height: clamp(140px, 26vw, 380px); border-width: clamp(38px, 4.6vw, 52px);         bottom: clamp(-170px, -14vw, -240px); left: clamp(-270px, -17vw, -190px); }
  .brd-about-illus { width: clamp(110px, 12vw, 180px); }
  .brd-about-h2 { font-size: clamp(20px, 2.6vw, 36px); }
  .brd-h2 { font-size: clamp(20px, 2.4vw, 36px); }
  .brd-about-text { max-width: clamp(520px, 68vw, 820px); font-size: clamp(13px, 0.96vw, 15px); }
  .brd-about-dec--right-gray { width: clamp(14px, 1.8vw, 30px); height: clamp(14px, 1.8vw, 30px); bottom: clamp(60px, 6.5vw, 100px); right: clamp(36px, 4vw, 60px); }
  .brd-about-dec--right-blue { width: clamp(24px, 3.2vw, 52px);
        height: clamp(24px, 3.2vw, 52px);
        bottom: clamp(14px, 2vw, 8px);
        right: clamp(10px, 5.4vw, 65px);}
  .brd-about-dec--right-green { width: clamp(20px, 6.5vw, 90px); height: clamp(20px, 6.5vw, 90px);bottom: clamp(-68px, -2vw, -52px); right: clamp(-10px, -0.6vw, 6px); }

  /* ─── SERVICES */
  .brd-services-grid {gap: clamp(8px, 1.8vw, 22px);
        padding: 0 45px;}
  .brd-service-top { min-height: clamp(108px, 11vw, 165px); padding: clamp(18px, 2.2vw, 32px) 14px clamp(32px, 3.8vw, 52px); }
  .brd-service-icon { width: clamp(42px, 4.2vw, 62px); height: clamp(42px, 4.2vw, 62px); }
  .brd-service-name { font-size: clamp(10px, 0.86vw, 13px); }

  /* ─── WHY CHOOSE US */
  .brd-why-list { gap: clamp(6px, 2vw, 30px); max-width: clamp(720px, 82vw, 960px); }
  .brd-why-item { width: clamp(300px, 44vw, 560px); }
  .wpill-txt { font-size: clamp(9px, 2.4vw, 20px); }
  .brd-why-deco--tr {border-width: clamp(26px, 3vw, 46px);
        width: clamp(160px, 18vw, 280px);
        height: clamp(160px, 18vw, 280px);
        top: clamp(-90px, -3vw, -46px);
        right: clamp(-160px, -10vw, -60px); }
  .brd-why-deco--left-green { width: clamp(16px, 7.4vw, 70px);
        height: clamp(16px, 7.4vw, 70px); }
  .brd-why-deco--left-gray {width: clamp(10px, 3.2vw, 35px);
        height: clamp(10px, 3.2vw, 35px);
        left: clamp(38px, 7.6vw, 80px);
        /* top: clamp(38px, 40.6vw, 91px); */
        transform: translateY(24px); }
  .brd-why-deco--left-blue { width: clamp(20px, 5.2vw, 50px); height: clamp(20px, 5.2vw, 50px); left: clamp(10px, 1.6vw, 26px); transform: translateY(20px);}

  /* ─── PROCESS */
  .brd-proc-blob::after {         width: clamp(680px, 95vw, 1166px);
        right: clamp(-360px, -15vw, -220px); }
  .brd-proc-layout { min-height: clamp(340px, 34vw, 490px); }
  .brd-proc-h2 { margin-top: clamp(18px, 5.4vw, 70px);
        font-size: clamp(28px, 4.2vw, 62px);
        margin-left: clamp(19px, 5.4vw, 40px); }
  .brd-proc-heading { width: clamp(34%, 40%, 44%); padding: clamp(28px, 4vw, 70px) clamp(4px, 0.6vw, 14px) 0 0; }
  .brd-proc-list {        gap: clamp(14px, 2.2vw, 36px);
        padding-top: clamp(40px, 11vw, 86px);
        margin-left: clamp(37px, 5vw, 55px); }
  .brd-proc-step { gap: clamp(8px, 1vw, 16px); margin-left: 0; }
  .brd-proc-bubble { width: clamp(46px, 4.4vw, 72px); height: clamp(46px, 4.4vw, 72px); }
  .brd-proc-bubble svg { width: clamp(16px, 1.7vw, 28px); height: clamp(16px, 1.7vw, 28px); }
 .brd-proc-title {
  font-size: clamp(11px, 1.1vw, 18px);
}

.brd-proc-desc {
  font-size: clamp(10px, 0.8vw, 13px);
  max-width: clamp(160px, 20vw, 260px);
}

/* STEP POSITIONS */

.brd-proc-step{
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.step_1 {
  left: -6.76vw;
  top: -8.75vw;
}

.step_2 {
         left: -3vw;
        top: -6vw;
}

.step_3 {
  left: -2.5vw;
        top: -1vw;
}

.step_4 {
  left: -6.25vw;
  top: 3.68vw;
}

/* HOVER EFFECT */

.brd-proc-step:hover{
  transform: scale(1.05);
}

  /* ─── CTA */
  .brd-cta-box { padding: clamp(36px, 4.2vw, 64px) clamp(28px, 3.8vw, 60px); }
  .brd-cta-title { font-size: clamp(16px, 2.2vw, 34px); max-width: clamp(360px, 44vw, 560px); }
  .brd-cta-sub { font-size: clamp(12px, 0.92vw, 15px); max-width: clamp(340px, 44vw, 520px); }
  .brd-cta-deco--ring {border-width: clamp(10px, 3vw, 26px);
        width: clamp(70px, 10vw, 160px);
        height: clamp(70px, 10vw, 160px);
        top: clamp(-76px, -11.2vw, -39px);
        right: clamp(-278px, -26.6vw, -4px); }
  .brd-cta-deco--blob {width: clamp(70px, 18vw, 244px);
        height: clamp(70px, 18vw, 243px);
        bottom: clamp(-212px, -16vw, -43px);
        left: clamp(-363px, -25vw, -28px); }
  .footer-layout { width: min(820px, 86vw); }
}

/* =====================================================================
   MOBILE — up to 640px
   Stacks layout, neutralises desktop transforms, scales decoratives.
   ===================================================================== */
@media (max-width: 900px) {

  .brd-root {
    font-size: 14.5px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  .brd-container {
    width: min(100%, calc(100% - 32px));
  }

  /* ================================================================
     MOBILE NAVBAR — refined alignment, animation, z-index
     ================================================================ */
  .brd-nav-wrap {
    padding: 8px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid rgba(15,23,42,0.06);
  }
  .brd-nav {
    width: calc(100% - 32px);
    gap: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0 auto;
  }

  /* Logo - left-aligned in flex flow */
  .brd-logo {
    position: relative;
    z-index: 2;
    order: -1;
    flex-shrink: 0;
  }
  .brd-logo-img {
    height: clamp(26px, 7.5vw, 32px);
    display: block;
  }

  /* Hide desktop-only nav elements */
  .brd-nav-links { display: none; }
  .brd-nav-icon { display: none; }

  /* Hide CTA on mobile — it lives in the mobile menu */
  .brd-nav-right { display: none; }

  /* ================================================================
     HAMBURGER BUTTON — 3-line icon with X morph
     ================================================================ */
  .brd-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    position: relative;
    z-index: 102;
    order: 99;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
    flex-shrink: 0;
  }
  .brd-hamburger:active {
    background: rgba(15, 23, 42, 0.06);
  }

  /* Hamburger lines */
  .brd-hamburger span {
    display: block;
    height: 2px;
    background: #0e1216;
    border-radius: 2px;
    transform-origin: center center;
    transition:
      transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.3s ease,
      width 0.3s ease;
    will-change: transform, opacity;
  }
  .brd-hamburger span:nth-child(1) { width: 22px; }
  .brd-hamburger span:nth-child(2) { width: 16px; }
  .brd-hamburger span:nth-child(3) { width: 22px; }

  /* X morph — translateY must equal (line-height + gap) = 2px + 5px = 7px */
  .brd-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    width: 22px;
  }
  .brd-hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .brd-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    width: 22px;
  }

  /* ================================================================
     MOBILE MENU PANEL — full-screen overlay
     ================================================================ */
  .brd-mobile-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 65%;
    max-width: 300px;
    height: 60vh;
   
    padding: calc(var(--nav-h, 64px) + 20px) 24px 32px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition:
      opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.4s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
  }
  .brd-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition:
      opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  /* --- Menu list --- */
  .brd-mobile-list {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .brd-mobile-list li {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }
  .brd-mobile-list li:last-child {
    border-bottom: none;
  }
  .brd-mobile-menu.is-open .brd-mobile-list li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(0.1s + var(--i, 0) * 0.055s);
  }

  /* --- Menu links --- */
  .brd-mobile-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 4px;
    text-decoration: none;
    color: #0e1216;
    font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(17px, 3.2vw, 24px);
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: color 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .brd-mobile-list a:active {
    color: var(--brd-green);
    transform: translateX(3px);
  }

  /* Number prefix */
  .brd-mobile-link-num {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--brd-green);
    letter-spacing: 0.15em;
    min-width: 22px;
    flex-shrink: 0;
  }

  /* Label */
  .brd-mobile-link-label {
    flex: 1;
  }

  /* Arrow circle */
  .brd-mobile-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #0e1216;
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .brd-mobile-list a:active .brd-mobile-link-arrow {
    background: linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
    color: #fff;
    opacity: 1;
    transform: translateX(2px);
  }

  /* --- Menu footer --- */
  .brd-mobile-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 24px;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
  }
  .brd-mobile-menu.is-open .brd-mobile-foot {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.42s;
  }
  .brd-mobile-foot-link {
    font-size: 13px;
    font-weight: 600;
    color: #4a5159;
    text-decoration: none;
    letter-spacing: 0.04em;
  }
  .brd-mobile-foot-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brd-green);
  }
  /* ── HERO ── */
  .brd-hero {
    height: auto;
    min-height: auto;
    padding: 92px 0 56px;
    overflow: hidden;
  }
  .brd-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: auto;
    align-items: center;
    text-align: center;
  }
  .brd-hero-left {
    max-width: 100%;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .brd-hero-eyebrow {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .brd-hero-title {
    font-size: clamp(30px, 8.8vw, 40px);
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .brd-hero-sub,
  .brd-hero-sub-blue {
    font-size: 13.5px;
    line-height: 1.65;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .brd-hero-sub {
    margin-bottom: 12px;
  }
  .brd-hero-sub-blue {
    margin-bottom: 24px;
  }
  .brd-hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 12px;
    align-items: stretch;
  }
  .brd-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    font-size: 14px;
  }
  .brd-btn img {
    width: 14px;
    height: auto;
  }

  /* Hero right column */
  .brd-hero-right {
    width: 100%;
    padding: 18px 0 12px;
    justify-content: center;
  }
  .brd-hero-img-frame {
    width: min(85vw, 380px);
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    border-width: 2px;
    margin-inline: auto;
  }

  /* Hero decoratives */
  .brd-hero-green-side {
    width: 220px;
    height: 289px;
    left: -149px;
    top: 33%;
    border-width: 34px;
  }
  .brd-hero-green-back {
    width: 180px;
    height: 180px;
    bottom: -28px;
    right: -32px;
    border-width: 34px;
    transform: translate(-19px,3px);
  }
  .brd-hero-dot-sm {
    width: 14px;
    height: 14px;
    bottom: -22px;
    right: 54px;
    transform: translate(7px,24px);
  }
  .brd-hero-dot-lg {
    width: 22px;
    height: 22px;
    bottom: -30px;
    right: -8px;
    transform: translate(-12px,14px);
  }

  /* ── ABOUT ── */
  .brd-about {
    padding: 60px 0 70px;
    overflow: visible;
  }
  .brd-about-eyebrow {
    font-size: 10.5px;
    margin-bottom: 10px;
  }
  .brd-about-h2 {
    font-size: clamp(26px, 7.6vw, 32px);
    line-height: 1.15;
    margin: 0 0 22px;
  }
  .brd-about-illus {
    width: 130px;
    margin-bottom: 22px;
  }
  .brd-about-text {
    font-size: 13.5px;
    line-height: 1.8;
    max-width: 100%;
    padding: 0 4px;
  }
  .brd-about-text--gap {
    margin-top: 14px;
  }

  /* About decoratives */
  .brd-about-dec--left-blue {
    width: 220px;
    height: 220px;
    border-width: 34px;
    bottom: -150px;
    left: -150px;
    top: 490px;
  }
  .brd-about-dec--right-gray {
    width: 16px;
    height: 16px;
    bottom: 60px;
    right: 22px;
  }
  .brd-about-dec--right-blue {
    width: 30px;
    height: 30px;
    bottom: 18px;
    right: 16px;
  }
  .brd-about-dec--right-green {
    width: 70px;
    height: 70px;
    bottom: -54px;
    right: -30px;
    transform: translateY(20px);
  }

  /* ── SERVICES ── */
  .brd-services {
    padding: 56px 0 70px;
  }
  .brd-section-head {
    margin-bottom: 32px;
  }
  .brd-h2 {
    font-size: clamp(24px, 7.2vw, 30px);
    line-height: 1.18;
  }
  .brd-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .brd-service-top {
    min-height: 112px;
    padding: 22px 12px 38px;
  }
  .brd-service-icon {
    width: 50px;
    height: 50px;
  }
  .brd-service-bot {
    padding: 10px 8px;
  }
  .brd-service-name {
    font-size: 11.5px;
    line-height: 1.28;
    letter-spacing: 0;
  }

  /* ── WHY CHOOSE US ── */
  .brd-why {
    padding: 56px 0 70px;
    overflow: visible;
  }
  .brd-why-list {
    gap: 14px;
    max-width: 100%;
    margin: 28px auto 0;
  }
  .brd-why-item,
  .brd-why-item.is-left,
  .brd-why-item.is-right {
    width: 100%;
    min-width: 0;
    align-self: stretch;
  }
  .wpill-txt {
    font-size: clamp(10px, 4vw, 13px);
    top: 45%;
    letter-spacing: 0;
  }
  .wpill-txt--l {
    left: 30%;
  }
  .wpill-txt--r {
    right: 30%;
  }

  .brd-why-deco--tr {
    width: 150px;
    height: 150px;
    border-width: 24px;
    top: -56px;
    right: -86px;
  }
  .brd-why-deco--left-green {
    width: 22px;
    height: 22px;
    left: 10px;
    top: 44%;
  }
  .brd-why-deco--left-gray {
    width: 12px;
    height: 12px;
    left: 44px;
    top: 47%;
    transform: none;
  }
  .brd-why-deco--left-blue {
    width: 20px;
    height: 20px;
    left: 16px;
    top: calc(44% + 30px);
    transform: none;
  }

  /* ── PROCESS ── */
  .brd-process {
    padding: 60px 0 70px;
    overflow: visible;
  }
  .brd-proc-blob {
    width: 100%;
    height: 240px;
    top: 0;
    bottom: auto;
    left: 0;
  }
  .brd-proc-blob::after {
    width: 200%;
    height: 440px;
    top: auto;
    bottom: -410px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
  }
  .brd-proc-layout {
    flex-direction: column;
    min-height: auto;
    align-items: stretch;
  }
  .brd-proc-heading {
    width: 100%;
    padding: 18px 0 0;
    text-align: center;
  }
  .brd-proc-h2 {
    font-size: clamp(40px, 12vw, 56px);
    line-height: 1.04;
    margin: 0;
    text-align: center;
    letter-spacing: -0.02em;
  }
  .brd-proc-list {
    padding: 70px 4px 0;
    gap: 14px;
    margin: 0;
  }
  .brd-proc-step {
    gap: 14px;
    margin-left: 0;
    align-items: flex-start;
  }
 .step_1,
  .step_2,
  .step_3,
  .step_4 {
    transform: none;
    position: relative;
    top: 0;
     left: 0; 
  }
  .brd-proc-bubble {
    width: 58px;
    height: 58px;
    padding: 4px;
  }
  .brd-proc-bubble img {
    width: 32px !important;
    height: auto;
  }
  .brd-proc-title {
    font-size: 16px;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .brd-proc-desc {
    font-size: 12.5px;
    line-height: 1.6;
    max-width: 100%;
  }

  /* ── CTA ── */
  .brd-cta {
    padding: 56px 0 60px;
    overflow: visible;
  }
  .footer-layout {
    width: calc(100% - 32px);
  }
  .brd-cta-box {
    padding: 44px 22px 48px;
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(21, 60, 180, 0.2);
  }
  .brd-cta-title {
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.2;
    max-width: 100%;
    margin: 0 0 14px;
  }
  .brd-cta-sub {
    font-size: 13px;
    line-height: 1.7;
    max-width: 100%;
    margin: 0 auto 26px;
  }
  .brd-cta-btn-white {
    padding: 12px 20px;
    font-size: 12.5px;
    gap: 8px;
  }
  .brd-cta-deco--ring {
    width: 110px;
    height: 110px;
    border-width: 22px;
    top: -46px;
    right: -54px;
  }
  .brd-cta-deco--blob {
    width: 150px;
    height: 150px;
    bottom: -64px;
    left: -80px;
  }
}

/* =====================================================================
   TABLET — 641px to 1023px
   Mobile-inspired composition, premium spacing, touch-optimised.
   Desktop / laptop / mobile CSS is NOT touched here.
   ===================================================================== */
@media (min-width: 641px) and (max-width: 1023px) {

  /* ── Root ── */
  .brd-root {
    font-size: 15px;
    overflow-x: hidden;
  }

  .brd-container {
    width: min(100%, calc(100% - 56px));
  }

  /* ================================================================
     NAVBAR
     Same hamburger experience as mobile — pill nav stays hidden.
     ================================================================ */
  .brd-nav-wrap {
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }

  .brd-nav {
    width: calc(100% - 48px);
    gap: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    margin: 0 auto;
  }

  /* Logo */
  .brd-logo {
    position: relative;
    z-index: 2;
    order: -1;
    flex-shrink: 0;
  }
  .brd-logo-img {
    height: clamp(30px, 4.5vw, 38px);
    display: block;
  }

  /* Hide desktop pill nav & icons on tablet */
  .brd-nav-links { display: none; }
  .brd-nav-icon  { display: none; }
  .brd-nav-right { display: none; }

  /* Show hamburger */
  .brd-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 14px;
    position: relative;
    z-index: 102;
    order: 99;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
    flex-shrink: 0;
  }
  .brd-hamburger:active {
    background: rgba(15, 23, 42, 0.06);
  }
  .brd-hamburger span {
    display: block;
    height: 2px;
    background: #0e1216;
    border-radius: 2px;
    transform-origin: center center;
    transition:
      transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.3s ease,
      width 0.3s ease;
    will-change: transform, opacity;
  }
  .brd-hamburger span:nth-child(1) { width: 24px; }
  .brd-hamburger span:nth-child(2) { width: 18px; }
  .brd-hamburger span:nth-child(3) { width: 24px; }
  .brd-hamburger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    width: 24px;
  }
  .brd-hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .brd-hamburger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    width: 24px;
  }

  /* Mobile menu panel — slightly wider on tablet */
  .brd-mobile-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 55%;
    max-width: 340px;
    height: 65vh;
    padding: calc(var(--nav-h, 64px) + 24px) 32px 40px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition:
      opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.4s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08);
  }
  .brd-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition:
      opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }
  .brd-mobile-list {
    list-style: none;
    margin: 0;
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .brd-mobile-list li {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }
  .brd-mobile-list li:last-child { border-bottom: none; }
  .brd-mobile-menu.is-open .brd-mobile-list li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(0.1s + var(--i, 0) * 0.055s);
  }
  .brd-mobile-list a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 4px;
    text-decoration: none;
    color: #0e1216;
    font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 2.8vw, 24px);
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: color 0.25s ease, transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .brd-mobile-list a:active {
    color: var(--brd-green);
    transform: translateX(3px);
  }
  .brd-mobile-link-num {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--brd-green);
    letter-spacing: 0.15em;
    min-width: 22px;
    flex-shrink: 0;
  }
  .brd-mobile-link-label { flex: 1; }
  .brd-mobile-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #0e1216;
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .brd-mobile-list a:active .brd-mobile-link-arrow {
    background: linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
    color: #fff;
    opacity: 1;
    transform: translateX(2px);
  }
  .brd-mobile-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 28px;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
  }
  .brd-mobile-menu.is-open .brd-mobile-foot {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.42s;
  }
  .brd-mobile-foot-link {
    font-size: 13.5px;
    font-weight: 600;
    color: #4a5159;
    text-decoration: none;
    letter-spacing: 0.04em;
  }
  .brd-mobile-foot-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brd-green);
  }

  /* ================================================================
     HERO
     Stacked mobile composition — more spacious tablet scaling.
     ================================================================ */
  .brd-hero {
    height: auto;
        min-height: 100vh;
        padding: clamp(105px, 20vw, 167px) 0 clamp(64px, 9vw, 88px);
        overflow: hidden;
  }
  .brd-hero-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 5vw, 52px);
    height: auto;
    align-items: center;
    text-align: center;
  }
  .brd-hero-left {
    max-width: min(580px, 100%);
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .brd-hero-eyebrow {
    font-size: clamp(11px, 1.5vw, 13px);
    margin-bottom: 12px;
  }
  .brd-hero-title {
    font-size: clamp(34px, 6.5vw, 52px);
    line-height: 1.08;
    margin-bottom: 18px;
  }
  .brd-hero-sub,
  .brd-hero-sub-blue {
    font-size: clamp(13.5px, 1.8vw, 15.5px);
    line-height: 1.68;
    max-width: min(540px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .brd-hero-sub {
    margin-bottom: 14px;
  }
  .brd-hero-sub-blue {
    margin-bottom: 28px;
  }
  .brd-hero-ctas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 14px;
    align-items: center;
  }
  .brd-btn {
    width: auto;
    min-width: 180px;
    justify-content: center;
    padding: 14px 22px;
    font-size: clamp(13.5px, 1.8vw, 15px);
  }
  .brd-btn img {
    width: 15px;
    height: auto;
  }

  /* Hero right column */
  .brd-hero-right {
    width: 100%;
    padding: clamp(20px, 3vw, 36px) 0 clamp(14px, 2.5vw, 28px);
    justify-content: center;
  }
  .brd-hero-img-frame {
    width: min(78vw, 480px);
    aspect-ratio: 4 / 3;
    border-radius: clamp(16px, 2.2vw, 22px);
    border-width: 2.5px;
    margin-inline: auto;
  }

  /* Hero decoratives */
  .brd-hero-green-side {
   border-width: clamp(36px, 5vw, 46px);
        width: clamp(240px, 34vw, 310px);
        height: clamp(243px, 80vw, 344px);
        top: 45%;
        left: clamp(-185px, -22vw, -120px);
  }
  .brd-hero-green-back {
    width: clamp(190px, 28vw, 240px);
    height: clamp(190px, 28vw, 240px);
    bottom: clamp(-30px, -4vw, -18px);
    right: clamp(-36px, -4.5vw, -18px);
    border-width: clamp(36px, 5vw, 46px);
    transform: translate(-16px, 4px);
  }
  .brd-hero-dot-sm {
    width: clamp(14px, 2vw, 20px);
    height: clamp(14px, 2vw, 20px);
    bottom: clamp(-24px, -3.5vw, -14px);
    right: clamp(52px, 8vw, 80px);
    transform: translate(6px, 22px);
  }
  .brd-hero-dot-lg {
    width: clamp(22px, 3.2vw, 30px);
    height: clamp(22px, 3.2vw, 30px);
    bottom: clamp(-32px, -4.5vw, -20px);
    right: clamp(-10px, -1.5vw, -4px);
    transform: translate(-10px, 14px);
  }

  /* ================================================================
     ABOUT
     ================================================================ */
  .brd-about {
    padding: clamp(68px, 9vw, 96px) 0 clamp(80px, 10vw, 108px);
    overflow: visible;
  }
  .brd-about-eyebrow {
    font-size: clamp(10.5px, 1.4vw, 12.5px);
    margin-bottom: 12px;
  }
  .brd-about-h2 {
    font-size: clamp(28px, 5.2vw, 40px);
    line-height: 1.14;
    margin: 0 0 26px;
  }
  .brd-about-illus {
    width: clamp(130px, 20vw, 190px);
    margin-bottom: clamp(24px, 3.5vw, 36px);
  }
  .brd-about-text {
    font-size: clamp(13.5px, 1.85vw, 15.5px);
    line-height: 1.84;
    max-width: min(620px, 100%);
    padding: 0 6px;
  }
  .brd-about-text--gap {
    margin-top: clamp(14px, 2vw, 20px);
  }

  /* About decoratives */
  .brd-about-dec--left-blue {
    width: clamp(240px, 36vw, 320px);
    height: clamp(240px, 36vw, 320px);
    border-width: clamp(36px, 5vw, 48px);
    bottom: clamp(-190px, -26vw, -130px);
    left: clamp(-180px, -22vw, -110px);
  }
  .brd-about-dec--right-gray {
    width: clamp(16px, 2.4vw, 22px);
    height: clamp(16px, 2.4vw, 22px);
    bottom: clamp(64px, 9vw, 90px);
    right: clamp(22px, 4vw, 36px);
  }
  .brd-about-dec--right-blue {
    width: clamp(30px, 4.5vw, 44px);
    height: clamp(30px, 4.5vw, 44px);
    bottom: clamp(18px, 3vw, 30px);
    right: clamp(16px, 2.8vw, 26px);
  }
  .brd-about-dec--right-green {
    width: clamp(72px, 11vw, 100px);
    height: clamp(72px, 11vw, 100px);
    bottom: clamp(-58px, -8vw, -40px);
    right: clamp(-28px, -3.5vw, -14px);
    transform: translateY(20px);
  }

  /* ================================================================
     SERVICES GRID
     Mobile-inspired 2-column layout, slightly more spacious.
     ================================================================ */
  .brd-services {
    padding: clamp(64px, 8.5vw, 90px) 0 clamp(80px, 10vw, 108px);
  }
  .brd-section-head {
    margin-bottom: clamp(32px, 4.5vw, 48px);
  }
  .brd-h2 {
    font-size: clamp(26px, 4.8vw, 36px);
    line-height: 1.18;
  }
  .brd-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 2.4vw, 24px);
  }
  .brd-service-top {
    min-height: clamp(118px, 17vw, 160px);
    padding: clamp(24px, 3.5vw, 36px) 14px clamp(42px, 6vw, 58px);
  }
  .brd-service-icon {
    width: clamp(52px, 8vw, 72px);
    height: clamp(52px, 8vw, 72px);
  }
  .brd-service-bot {
    padding: clamp(10px, 1.5vw, 14px) 10px;
  }
  .brd-service-name {
    font-size: clamp(11.5px, 1.6vw, 14px);
    line-height: 1.28;
    letter-spacing: 0;
  }

  /* ================================================================
     WHY CHOOSE US
     Full-width pills — same mobile stacking, more premium spacing.
     ================================================================ */
  .brd-why {
    padding: clamp(64px, 8.5vw, 90px) 0 clamp(80px, 10vw, 108px);
    overflow: visible;
  }
  .brd-why-list {
    gap: clamp(14px, 2.4vw, 22px);
    max-width: 100%;
    margin: clamp(28px, 4vw, 40px) auto 0;
  }
  .brd-why-item,
  .brd-why-item.is-left,
  .brd-why-item.is-right {
    width: 100%;
    min-width: 0;
    align-self: stretch;
  }
  .wpill-txt {
   letter-spacing: 0;
        font-size: clamp(11px, 3.9vw, 27px);
        top: 45%;
  }
  .wpill-txt--l { left: 30%; }
  .wpill-txt--r { right: 30%; }

  /* Why decoratives */
  .brd-why-deco--tr {
    width: clamp(160px, 24vw, 220px);
    height: clamp(160px, 24vw, 220px);
    border-width: clamp(26px, 3.8vw, 36px);
    top: clamp(-64px, -9vw, -40px);
    right: clamp(-96px, -14vw, -50px);
  }
  .brd-why-deco--left-green {
    width: clamp(22px, 3.4vw, 32px);
    height: clamp(22px, 3.4vw, 32px);
    left: clamp(10px, 1.6vw, 18px);
    top: 44%;
  }
  .brd-why-deco--left-gray {
    width: clamp(12px, 1.8vw, 18px);
    height: clamp(12px, 1.8vw, 18px);
    left: clamp(44px, 7vw, 62px);
    top: 47%;
    transform: none;
  }
  .brd-why-deco--left-blue {
    width: clamp(20px, 3vw, 28px);
    height: clamp(20px, 3vw, 28px);
    left: clamp(16px, 2.4vw, 24px);
    top: calc(44% + clamp(30px, 4.5vw, 40px));
    transform: none;
  }

  /* ================================================================
     BRAND PROCESS
     Mobile-style vertical composition — full-bleed top green band.
     ================================================================ */
  .brd-process {
    padding: clamp(68px, 9vw, 96px) 0 clamp(80px, 10vw, 108px);
    overflow: visible;
  }
  .brd-proc-blob {
    width: 100%;
    height: clamp(260px, 36vw, 320px);
    top: 0;
    bottom: auto;
    left: 0;
  }
  .brd-proc-blob::after {
  border-radius: 50%;
        width: 200%;
        height: clamp(465px, 69vw, 566px);
        inset: auto auto clamp(-518px, -67vw, -325px) 50%;
        transform: translateX(-50%);
  }
  .brd-proc-layout {
    flex-direction: column;
    min-height: auto;
    align-items: stretch;
  }
  .brd-proc-heading {
    width: 100%;
    padding: clamp(22px, 3vw, 32px) 0 0;
    text-align: center;
  }
  .brd-proc-h2 {
    font-size: clamp(44px, 8.5vw, 64px);
    line-height: 1.04;
    margin: 0;
    text-align: center;
    letter-spacing: -0.02em;
  }
  .brd-proc-list {
                  gap: clamp(24px, 1.2vw, 34px);
        margin: -20px;
        padding: clamp(76px, 9vw, 100px) 131px 0;
  }
  .brd-proc-step {
    gap: clamp(14px, 2.2vw, 20px);
    margin-left: 0;
    align-items: flex-start;
  }
  .step_1,
  .step_2,
  .step_3,
  .step_4 {
    transform: none;
    position: relative;
    top: 0;
     left: 0; 
  }
  .brd-proc-bubble {
    width: clamp(62px, 9vw, 80px);
    height: clamp(62px, 9vw, 80px);
    padding: 4.5px;
    flex-shrink: 0;
  }
  .brd-proc-bubble img {
    width: clamp(32px, 5vw, 44px) !important;
    height: auto;
  }
  .brd-proc-bubble svg {
    width: clamp(28px, 4vw, 36px);
    height: clamp(28px, 4vw, 36px);
  }
  .brd-proc-title {
   font-size: clamp(16px, 3.4vw, 21px);
    margin-bottom: 5px;
    line-height: 1.3;
  }
  .brd-proc-desc {
   font-size: clamp(12.5px, 2.75vw, 15.5px);
    line-height: 1.62;
    max-width: 100%;
  }

  /* ================================================================
     CTA
     ================================================================ */
  .brd-cta {
    padding: clamp(64px, 8.5vw, 90px) 0 clamp(68px, 9vw, 90px);
    overflow: visible;
  }
  .footer-layout {
    width: calc(100% - 48px);
  }
  .brd-cta-box {
    padding: clamp(48px, 6.5vw, 72px) clamp(28px, 5vw, 52px) clamp(52px, 7vw, 76px);
    border-radius: clamp(20px, 3vw, 26px);
    box-shadow: 0 20px 50px rgba(21, 60, 180, 0.2);
  }
  .brd-cta-title {
    font-size: clamp(24px, 4.2vw, 34px);
    line-height: 1.18;
    max-width: min(560px, 100%);
    margin: 0 0 clamp(14px, 2vw, 20px);
  }
  .brd-cta-sub {
    font-size: clamp(13px, 1.8vw, 15.5px);
    line-height: 1.74;
    max-width: min(560px, 100%);
    margin: 0 auto clamp(26px, 3.5vw, 36px);
  }
  .brd-cta-btn-white {
    padding: clamp(13px, 1.8vw, 16px) clamp(22px, 3vw, 30px);
    font-size: clamp(13px, 1.7vw, 15px);
    gap: 9px;
  }
  .brd-cta-deco--ring {
    width: clamp(118px, 17vw, 170px);
    height: clamp(118px, 17vw, 170px);
    border-width: clamp(22px, 3.2vw, 32px);
    top: clamp(-50px, -7vw, -30px);
    right: clamp(-58px, -8vw, -30px);
  }
  .brd-cta-deco--blob {
    width: clamp(160px, 23vw, 220px);
    height: clamp(160px, 23vw, 220px);
    bottom: clamp(-72px, -10vw, -48px);
    left: clamp(-90px, -13vw, -56px);
  }
}

/* =====================================================================
   PREMIUM MINIMAL INTERACTION POLISH
   Motion layer only — transform / opacity / shadow.
   No layout, alignment, or structural changes.
   ===================================================================== */
.brd-root {
  --brd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --brd-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Scroll reveal (classes applied by JS only — no-JS stays visible) ---- */
.brd-rv,
.brd-rv-card { opacity: 0; }
.brd-rv {
  transition: opacity 0.8s var(--brd-ease), transform 0.8s var(--brd-ease);
}
.brd-rv-up { transform: translateY(22px); }
.brd-rv.brd-rv-in {
  opacity: 1;
  transform: none;
}
.brd-rv-card.brd-rv-in { opacity: 1; }
/* BASE REVEAL */
.brd-rv,
.brd-rv-card {
  opacity: 0;
}

.brd-rv {
  transition:
    opacity 0.8s var(--brd-ease),
    transform 0.8s var(--brd-ease);
}

/* LEFT CARD → LEFT TO RIGHT */
.brd-why-item.is-left {
  transform: translateX(-80px);
}

/* RIGHT CARD → RIGHT TO LEFT */
.brd-why-item.is-right {
  transform: translateX(80px);
}

/* ACTIVE STATE */
.brd-rv.brd-rv-in {
  opacity: 1;
  transform: translateX(0);
}

/* ---- NAV LINKS: minimal gradient underline reveal ---- */
.brd-nav-links a {
  transition: color 0.3s var(--brd-ease);
}
.brd-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.42s var(--brd-ease), opacity 0.3s ease;
}
@media (hover: hover) {
  .brd-nav-links a:hover::after {
    transform: scaleX(1);
    opacity: 0.5;
  }
}
.brd-nav-links .is-active a {
  color: var(--brd-green);
  font-weight: 600;
}
.brd-nav-links .is-active a::after {
  transform: scaleX(1);
  opacity: 1;
}

/* ---- NAV ICONS ---- */
.brd-nav-icon {
  transition: background 0.25s var(--brd-ease), transform 0.25s var(--brd-ease);
}
@media (hover: hover) {
  .brd-nav-icon:hover { transform: translateY(-1px); }
}
.brd-nav-icon:active {
  transform: scale(0.92);
  transition-duration: 0.1s;
}

/* ---- NAV CTA ---- */
.brd-nav-cta {
  transition: transform 0.4s var(--brd-ease), box-shadow 0.4s var(--brd-ease),
    background 0.3s ease;
}
.brd-nav-cta img { transition: transform 0.4s var(--brd-ease); }
@media (hover: hover) {
  .brd-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(26, 47, 196, 0.34);
  }
  .brd-nav-cta:hover img { transform: translateX(3px); }
}
.brd-nav-cta:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.12s;
}

/* ---- BUTTONS: smooth lift, soft shadow, gradient drift, elegant press ---- */
.brd-btn {
  transition: transform 0.4s var(--brd-ease), box-shadow 0.4s var(--brd-ease),
    background-position 0.7s var(--brd-ease), border-color 0.3s ease;
}
.brd-btn img { transition: transform 0.4s var(--brd-ease); }
@media (hover: hover) {
  .brd-btn:hover img { transform: translateX(3px); }
}

.brd-btn-primary {
 
 
  background-position: 0% 50%;
}
@media (hover: hover) {
  .brd-btn-primary:hover {
    
    background-size: 200% 200%;
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(26, 47, 196, 0.36);
  }
}
.brd-btn-primary:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.12s;
}

@media (hover: hover) {
  .brd-btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
  }
}
.brd-btn-ghost:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.12s;
}

/* ---- SERVICE CARDS: soft depth + refined lift + icon nudge ---- */
.brd-service-card {
  transition: transform 0.4s var(--brd-ease), box-shadow 0.4s var(--brd-ease),
    opacity 0.7s var(--brd-ease);
}
.brd-service-bot { transition: background 0.35s var(--brd-ease); }
.brd-service-icon img,
.brd-service-icon svg { transition: transform 0.45s var(--brd-ease);    width: 66px; }
@media (hover: hover) {
  .brd-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
  }
  .brd-service-card:hover .brd-service-icon img,
  .brd-service-card:hover .brd-service-icon svg {
    transform: scale(1.06);
  }
}
.brd-service-card:active {
  transform: translateY(-2px) scale(0.995);
  transition-duration: 0.14s;
}

/* ---- SVG PILLS: subtle lift + soft shaped glow ---- */
.wpill { transition: transform 0.45s var(--brd-ease); }
.wpill-bg { transition: filter 0.45s var(--brd-ease); }
@media (hover: hover) {
  .wpill:hover { transform: translateY(-4px); }
  .wpill:hover .wpill-bg {
    filter: drop-shadow(0 14px 26px rgba(31, 118, 201, 0.22));
  }
}
.wpill:active { transform: translateY(-1px); }

/* ---- CTA: soft container depth + button polish ---- */
.brd-cta-box { transition: box-shadow 0.5s var(--brd-ease); }
@media (hover: hover) {
  .brd-cta-box:hover { box-shadow: 0 32px 80px rgba(21, 60, 180, 0.3); }
}
.brd-cta-btn-white {
  transition: transform 0.4s var(--brd-ease), box-shadow 0.4s var(--brd-ease),
    background 0.3s ease;
}
.brd-cta-btn-white svg { transition: transform 0.4s var(--brd-ease); }
@media (hover: hover) {
  .brd-cta-btn-white:hover svg { transform: translate(2px, -2px); }
}
.brd-cta-btn-white:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.12s;
}

/* ---- MOBILE: hamburger press + active menu link ---- */
.brd-hamburger:active { transform: scale(0.94); }
.brd-mobile-list li.is-active .brd-mobile-link-label {
  color: var(--brd-green);
}
.brd-mobile-list li.is-active .brd-mobile-link-arrow {
  opacity: 1;
  background: linear-gradient(135deg, #1a2fc4 0%, #15b86a 100%);
  color: #fff;
}

/* ---- Focus-visible: premium accessible outline ---- */
.brd-nav-links a:focus-visible,
.brd-btn:focus-visible,
.brd-nav-cta:focus-visible,
.brd-cta-btn-white:focus-visible,
.brd-mobile-list a:focus-visible {
  outline: 2px solid rgba(26, 47, 196, 0.5);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---- Respect reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .brd-root *,
  .brd-root *::before,
  .brd-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .brd-rv,
  .brd-rv-card { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================================
   4. PRELOADER
   =========================================================================== */

/* ===========================================================================
   PREMIUM MINIMAL PRELOADER
   Full-screen overlay · centered composition · cinematic fade/blur exit.
   Matches site theme: white canvas, blue→green brand gradient.
   =========================================================================== */

.pl-root {
  --pl-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Light canvas with a whisper-soft brand tint — matches site aesthetic */
  background:
    radial-gradient(120% 90% at 50% 38%, #ffffff 0%, #f6f8fb 100%);

  opacity: 1;
  transition:
    opacity 0.85s var(--pl-ease),
    filter 0.85s var(--pl-ease),
    transform 0.85s var(--pl-ease),
    visibility 0s linear 0s;
  will-change: opacity, filter, transform;
}

/* ── Cinematic exit: fade + blur + gentle rise ── */
.pl-root.pl-exit {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(-12px) scale(1.015);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.85s var(--pl-ease),
    filter 0.85s var(--pl-ease),
    transform 0.85s var(--pl-ease),
    visibility 0s linear 0.85s;
}

/* ── Centered content stack ── */
.pl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3.4vw, 34px);
  padding: 24px;
  width: 100%;
  max-width: 420px;
}

/* ── Logo: subtle fade + scale + de-blur reveal ── */
.pl-logo {
  animation: pl-logo-in 1s var(--pl-ease) both;
}
.pl-logo img {
  display: block;
  height: clamp(40px, 7vw, 56px);
  width: auto;
}

@keyframes pl-logo-in {
  from {
    opacity: 0;
    transform: scale(0.94);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ── Loading line: thin track + gradient fill with soft glow ── */
.pl-bar {
  position: relative;
  width: clamp(190px, 42vw, 264px);
  height: 3px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.09);
  overflow: hidden;

  opacity: 0;
  animation: pl-fade-up 0.8s var(--pl-ease) 0.22s forwards;
}

.pl-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #1a2fc4 0%, #1b6fd4 52%, #15b86a 100%);
  /* translated by JS via inline transform: translateX(progress - 100 %) */
  transform: translateX(-100%);
  transition: transform 0.12s linear;
  box-shadow: 0 0 12px rgba(21, 184, 106, 0.55);
}

/* ── Percentage counter: minimal editorial typography ── */
.pl-meta {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;

  opacity: 0;
  animation: pl-fade-up 0.8s var(--pl-ease) 0.36s forwards;
}
.pl-percent {
  font-size: clamp(12px, 1.6vw, 12px);
  font-weight: 700;
  color: #0e1216;
  min-width: 2.4ch;
  text-align: right;
}
.pl-percent-sign {
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  color: #8b93a1;
}

@keyframes pl-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Reduced-motion: instant, calm exit ── */
@media (prefers-reduced-motion: reduce) {
  .pl-root,
  .pl-root.pl-exit {
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    filter: none;
    transform: none;
  }
  .pl-logo,
  .pl-bar,
  .pl-meta {
    animation: none;
    opacity: 1;
  }
  .pl-bar-fill {
    transition: none;
  }
}


/* ===========================================================================
   5. CONTACT SECTION — brd-contact-*
   =========================================================================== */

/* =================== CONTACT SECTION =================== */
.brd-contact {
  position: relative;
  padding: clamp(2px, -1vw, 32px) 0 clamp(72px, 8vw, 120px);
  background: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* --- Decorative circles --- */
.brd-contact-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* LEFT: large open ring */
.brd-contact-deco--ring-lg {
  border: clamp(38px, 4vw, 60px) solid #e6f1fb;
  width: clamp(260px, 26vw, 400px);
  height: clamp(260px, 26vw, 400px);
  top: clamp(-100px, -8vw, -60px);
  left: clamp(-200px, -14vw, -80px);
  animation: contactRingLgFloat 8s ease-in-out infinite;
}

@keyframes contactRingLgFloat {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  25%  { transform: translateY(-10px) scale(1.02) rotate(1deg); }
  50%  { transform: translateY(-20px) scale(1.05) rotate(2deg); opacity: 0.85; }
  75%  { transform: translateY(-10px) scale(1.02) rotate(1deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

/* LEFT: blue solid dot */
.brd-contact-deco--dot-blue {
  background: #1a6fd4;
 width: clamp(28px, 4.2vw, 73px);
    height: clamp(28px, 4.2vw, 73px);
    top: 23%;
  left: clamp(20px, 4vw, 60px);
  animation: contactDotBlueFloat 4.5s ease-in-out infinite;
}

@keyframes contactDotBlueFloat {
  0%   { transform: translateY(0) scale(1); filter: brightness(1); }
  50%  { transform: translateY(-14px) scale(1.1); filter: brightness(1.15); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

/* LEFT: small gray dot */
.brd-contact-deco--dot-gray {
  background: #c8cfd8;
    opacity: 0.7;
    width: clamp(14px, 2.6vw, 44px);
    height: clamp(14px, 2.6vw, 44px);
    top: 16%;
    left: clamp(66px, 8vw, 146px);
    animation: contactDotGrayFloat 5.2s ease-in-out infinite;
}

@keyframes contactDotGrayFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0.7; }
  50%  { transform: translateY(-8px) scale(1.08); opacity: 0.9; }
  100% { transform: translateY(0) scale(1); opacity: 0.7; }
}

/* RIGHT: large open ring (partially cropped) */
.brd-contact-deco--ring-right {
 border: clamp(32px, 3.4vw, 52px) solid #dceaf8;
  width: clamp(220px, 22vw, 340px);
  height: clamp(220px, 22vw, 340px);
 bottom: clamp(75px, -6vw, -30px);
  right: clamp(-160px, -12vw, -60px);
  animation: contactRingRightFloat 9s ease-in-out infinite;
}

@keyframes contactRingRightFloat {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.9; }
  50%  { transform: translateY(-15px) scale(1.04) rotate(-2deg); opacity: 0.75; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.9; }
}

/* RIGHT: smaller partial ring */
.brd-contact-deco--ring-right-sm {
 border: clamp(22px, 2.4vw, 38px) solid #dceaf8;
    width: clamp(140px, 14vw, 190px);
    height: clamp(140px, 14vw, 190px);
    top: clamp(22px, 12vw, 319px);
    right: clamp(56px, -6vw, -20px);
    animation: contactRingRightSmFloat 7s ease-in-out infinite;
}

@keyframes contactRingRightSmFloat {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  50%  { transform: translateY(-10px) rotate(3deg); opacity: 0.65; }
  100% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
}

/* --- Wrap: centers the card horizontally --- */
.brd-contact-wrap {
      position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 clamp(16px, 4vw, 64px);
    /* display: flex; */
    flex-direction: column;
}

/* --- Gradient card --- */
.brd-contact-card {
  width: min(520px, 100%);
 background: linear-gradient(90deg, #0044CC -44%, #15B86A 92%);
  border-radius: 32px;
  padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 48px) clamp(32px, 3.5vw, 48px);
  box-shadow:
    0 24px 64px rgba(0, 68, 204, 0.22),
    0 6px 18px rgba(21, 184, 106, 0.16);
  display: flex;
  flex-direction: column;
}

/* --- Heading --- */
.brd-contact-heading {
  font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* --- Form --- */
.brd-contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
}

/* --- Field wrapper --- */
.brd-contact-field {
  width: 100%;
}

/* --- Glassmorphism input / textarea --- */
.brd-contact-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: clamp(13px, 1.3vw, 16px) clamp(16px, 1.6vw, 20px);
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(13.5px, 0.95vw, 15px);
  color: #fff;
  outline: none;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.brd-contact-input::placeholder {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(13px, 0.9vw, 14.5px);
}

.brd-contact-input:focus {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* --- Textarea --- */
.brd-contact-textarea {
  resize: vertical;
  min-height: clamp(120px, 14vw, 180px);
  line-height: 1.6;
}

/* --- Submit pill button --- */
.brd-contact-submit {
  width: 100%;
  margin-top: clamp(6px, 0.8vw, 12px);
  padding: clamp(14px, 1.4vw, 18px) 32px;
  background: #ffffff;
  color: #15B86A;
  font-family: var(--font-space-grotesk), "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(14.5px, 1vw, 23px);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.brd-contact-submit:hover {
  background: #f0faf5;
  color: #0e914f;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.brd-contact-submit:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.12s;
}

/* --- Note text below card --- */
.brd-contact-note {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: clamp(12px, 0.86vw, 17.67px);
  color: #6a7280;
  text-align: center;
  line-height: 1.7;
  max-width: 450px;
}


/* ===========================================================================
   6. FOOTER SECTION — brd-footer-*
   =========================================================================== */

.brd-footer {
  background: #fafbfc;
  border-top: 1px solid #e8edf3;
}

/* --- TOP area: brand + newsletter --- */
.brd-footer-top {
  display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(41px, 8vw, 86px);
    padding: clamp(40px, 5vw, 70px) clamp(24px, 6vw, 100px) clamp(32px, 4vw, 56px);
    max-width: 1800px;
    margin-inline: auto;
    flex-wrap: wrap;
}

/* LEFT: logo + description */
.brd-footer-brand {
  flex: 1;
  min-width: 240px;
  max-width: 500px;
}

.brd-footer-logo {
  height: clamp(34px, 3vw, 48px);
  width: auto;
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.brd-footer-desc {
  font-size: clamp(13px, 0.92vw, 14.5px);
  color: #4a5160;
  line-height: 1.78;
  max-width: 460px;
}

/* RIGHT: newsletter */
.brd-footer-newsletter {
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 380px;
}

.brd-footer-nl-text {
  font-size: clamp(12.5px, 0.88vw, 14px);
  color: #4a5160;
  line-height: 1.7;
  margin-bottom: 6px;
}

.brd-footer-nl-cta {
  display: inline-block;
  font-size: clamp(13px, 0.9vw, 14.5px);
  font-weight: 700;
  color: #15B86A;
  text-decoration: none;
  margin-bottom: clamp(12px, 1.4vw, 18px);
  transition: color 0.2s ease;
}

.brd-footer-nl-cta:hover {
  color: #0e914f;
}

.brd-footer-nl-form {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.brd-footer-nl-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.brd-footer-nl-icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
  flex-shrink: 0;
}

.brd-footer-nl-input {
  width: 100%;
  padding: clamp(10px, 1.1vw, 13px) clamp(12px, 1.2vw, 16px) clamp(10px, 1.1vw, 13px) clamp(36px, 3.4vw, 44px);
  background: #ffffff;
  border: 1.5px solid #e2e7ef;
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: clamp(12.5px, 0.88vw, 14px);
  color: #2b2f36;
  outline: none;
  transition: border-color 0.25s ease;
}

.brd-footer-nl-input::placeholder {
  color: #9aa3b0;
}

.brd-footer-nl-input:focus {
  border-color: #1a6fd4;
}

.brd-footer-nl-btn {
  flex-shrink: 0;
  padding: clamp(10px, 1.1vw, 13px) clamp(14px, 1.4vw, 20px);
  background: #e02020;
  color: #fff;
  font-size: clamp(11px, 0.8vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.2s ease;
}

.brd-footer-nl-btn:hover {
  background: #c51a1a;
  transform: translateX(1px);
}

.brd-footer-nl-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* --- Dashed divider --- */
.brd-footer-divider {
  border: none;
  border-top: 1.5px dashed #c8d0da;
  margin: 0 clamp(24px, 6vw, 100px);
}

/* --- Info row: 4 columns --- */
.brd-footer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(22px, 2.6vw, 36px) clamp(24px, 6vw, 100px);
  max-width: 1800px;
  margin-inline: auto;
}

.brd-footer-info-col {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  flex: 1;
  min-width: 140px;
}

/* Icon circle */
.brd-footer-info-icon {
  width: clamp(34px, 3.2vw, 46px);
  height: clamp(34px, 3.2vw, 46px);
  border-radius: 50%;
  background: #eef4fb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.brd-footer-info-col:hover .brd-footer-info-icon {
  background: #d9ecf8;
  transform: scale(1.07);
}

.brd-footer-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brd-footer-info-label {
  font-size: clamp(10px, 0.74vw, 12px);
  font-weight: 700;
  color: #15B86A;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.brd-footer-info-value {
  font-size: clamp(11.5px, 0.84vw, 13.5px);
  color: #3a3f4a;
  font-weight: 500;
  line-height: 1.4;
}

/* Vertical separator line */
.brd-footer-info-sep {
  width: 1px;
  height: clamp(32px, 3.2vw, 48px);
  background: #d0d8e4;
  flex-shrink: 0;
  align-self: center;
}

/* Social icons column */
.brd-footer-social-col {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.brd-footer-socials {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 10px);
}

.brd-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(26px, 2.4vw, 32px);
  height: clamp(26px, 2.4vw, 32px);
  border-radius: 5px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.brd-footer-social:hover {
  transform: translateY(-3px) scale(1.1);
}

.brd-footer-social:active {
  transform: scale(0.94);
  transition-duration: 0.1s;
}

/* --- Bottom gradient bar --- */
.brd-footer-bar {
  background: linear-gradient(90deg, #0044CC 0%, #15B86A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 5vw, 58px);
  padding: clamp(10px, 1.2vw, 16px) 24px;
}

.brd-footer-bar-text {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  font-size: clamp(12px, 0.86vw, 13.5px);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.brd-footer-bar-sep {
  opacity: 0.55;
}

.brd-footer-bar-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

.brd-footer-bar-link:hover {
  color: #fff;
  text-decoration: underline;
}


/* ===========================================================================
   CONTACT + FOOTER — Desktop-Laptop Wide (1367px–1700px)
   Same methodology as existing 1367–1700 block above.
   =========================================================================== */
@media (min-width: 1367px) and (max-width: 1700px) {

  /* ─── CONTACT */
  .brd-contact { padding: clamp(2px, 1vw, 100px) 0 clamp(70px, 6.4vw, 110px); }
  .brd-contact-wrap { padding: 0 clamp(28px, 3.4vw, 56px); }
  .brd-contact-card {
    width: min(510px, 78vw);
    padding: clamp(38px, 3.8vw, 56px) clamp(30px, 3.2vw, 48px) clamp(34px, 3.4vw, 48px);
  }
  .brd-contact-heading { font-size: clamp(24px, 2.2vw, 32px); margin-bottom: clamp(22px, 2.2vw, 30px); }
  .brd-contact-form { gap: clamp(13px, 1.4vw, 18px); }
  .brd-contact-input { padding: clamp(13px, 1.2vw, 16px) clamp(16px, 1.4vw, 20px); font-size: clamp(13.5px, 0.94vw, 15px); }
  .brd-contact-textarea { min-height: clamp(128px, 12vw, 170px); }
  .brd-contact-submit { font-size: clamp(14px, 0.98vw, 16px); padding: clamp(14px, 1.3vw, 17px) 30px; }
  .brd-contact-note { font-size: clamp(12px, 0.84vw, 13.5px); margin-top: clamp(16px, 1.6vw, 22px); }

  /* Decoratives */
  .brd-contact-deco--ring-lg { width: clamp(280px, 22vw, 380px); height: clamp(280px, 22vw, 380px); border-width: clamp(42px, 3.8vw, 58px); top: clamp(-90px, -7vw, -56px); left: clamp(-160px, -12vw, -64px); }
  .brd-contact-deco--dot-blue { width: clamp(32px, 7vw, 55px); height: clamp(32px, 7vw, 55px); left: clamp(28px, 3.8vw, 58px); }
  .brd-contact-deco--dot-gray { width: clamp(16px, 2.6vw, 35px); height: clamp(16px, 2.6vw, 35px); left: clamp(72px, 9vw, 125px);top: clamp(17px, 12vw, 166px) ; }
  .brd-contact-deco--ring-right { width: clamp(200px, 18vw, 310px); height: clamp(200px, 18vw, 310px); border-width: clamp(30px, 3vw, 48px); right: clamp(-130px, -10vw, -50px); }
  .brd-contact-deco--ring-right-sm { width: clamp(130px, 12vw, 190px); height: clamp(130px, 12vw, 190px); border-width: clamp(20px, 2vw, 34px);        right: clamp(50px, -5vw, -16px); }

  /* ─── FOOTER */
  .brd-footer-top { padding: clamp(38px, 4.4vw, 64px) clamp(28px, 7.4vw, 105px) clamp(30px, 3.4vw, 50px); gap: clamp(28px, 4.4vw, 72px); }
  .brd-footer-brand { max-width: clamp(400px, 38vw, 500px); }
  .brd-footer-logo { height: clamp(36px, 2.8vw, 46px); margin-bottom: clamp(14px, 1.4vw, 20px); }
  .brd-footer-desc { font-size: clamp(13px, 0.9vw, 14.5px); }
  .brd-footer-newsletter { max-width: clamp(300px, 26vw, 380px); min-width: 260px; }
  .brd-footer-nl-text { font-size: clamp(12.5px, 0.88vw, 14px); }
  .brd-footer-nl-cta { font-size: clamp(13px, 0.9vw, 14.5px); margin-bottom: clamp(12px, 1.2vw, 16px); }
  .brd-footer-divider { margin: 0 clamp(28px, 5.4vw, 90px); }
  .brd-footer-info { padding: clamp(20px, 2.4vw, 32px) clamp(28px, 8.4vw, 105px); gap: clamp(12px, 1.6vw, 22px); }
  .brd-footer-info-icon { width: clamp(36px, 3vw, 44px); height: clamp(36px, 3vw, 44px); }
  .brd-footer-info-label { font-size: clamp(10px, 0.76vw, 12px); }
  .brd-footer-info-value { font-size: clamp(11.5px, 0.86vw, 13.5px); }
  .brd-footer-info-sep { height: clamp(34px, 3vw, 46px); }
  .brd-footer-socials { gap: clamp(6px, 0.6vw, 10px); }
  .brd-footer-social { width: clamp(26px, 2.2vw, 32px); height: clamp(26px, 2.2vw, 32px); }
  .brd-footer-bar-text { font-size: clamp(12px, 0.84vw, 13.5px); }
}


/* ===========================================================================
   CONTACT + FOOTER — Laptop Narrow (1024px–1366px)
   Same methodology as existing 1024–1366 block above.
   =========================================================================== */
@media (min-width: 1024px) and (max-width: 1366px) {

  /* ─── CONTACT */
  .brd-contact { padding: clamp(56px, 6.5vw, 96px) 0 clamp(62px, 7vw, 105px); }
  .brd-contact-wrap { padding: 0 clamp(16px, 2.4vw, 36px); }
  .brd-contact-card {
    width: min(480px, 82vw);
    padding: clamp(30px, 3.4vw, 48px) clamp(22px, 2.8vw, 40px) clamp(28px, 3vw, 42px);
    border-radius: clamp(24px, 2.4vw, 32px);
  }
  .brd-contact-heading { font-size: clamp(20px, 2vw, 28px); margin-bottom: clamp(18px, 2vw, 26px); }
  .brd-contact-form { gap: clamp(10px, 1.2vw, 16px); }
  .brd-contact-input { padding: clamp(11px, 1.1vw, 15px) clamp(13px, 1.3vw, 18px); font-size: clamp(13px, 0.92vw, 14.5px); border-radius: 10px; }
  .brd-contact-textarea { min-height: clamp(110px, 11vw, 158px); }
  .brd-contact-submit { padding: clamp(13px, 1.2vw, 16px) 26px; font-size: clamp(13.5px, 0.96vw, 15px); margin-top: clamp(5px, 0.7vw, 10px); }
  .brd-contact-note { font-size: clamp(11.5px, 0.84vw, 13px); margin-top: clamp(14px, 1.6vw, 20px); }

  /* Decoratives */
  .brd-contact-deco--ring-lg { width: clamp(200px, 20vw, 300px); height: clamp(200px, 20vw, 300px); border-width: clamp(30px, 3.2vw, 46px); top: clamp(-70px, -6.5vw, -36px); left: clamp(-130px, -12vw, -50px); }
  .brd-contact-deco--dot-blue { width: clamp(24px, 2.6vw, 40px); height: clamp(24px, 2.6vw, 40px); left: clamp(18px, 3vw, 46px); }
  .brd-contact-deco--dot-gray { width: clamp(12px, 1.4vw, 20px); height: clamp(12px, 1.4vw, 20px); left: clamp(52px, 6.5vw, 98px); }
  .brd-contact-deco--ring-right { width: clamp(160px, 17vw, 240px);
        height: clamp(160px, 17vw, 240px);
        border-width: clamp(22px, 2.6vw, 36px);
        right: clamp(-110px, -10vw, -40px);
        bottom: clamp(216px, -5vw, -20px); }
  .brd-contact-deco--ring-right-sm {width: clamp(100px, 10vw, 160px);
        height: clamp(100px, 10vw, 160px);
        border-width: clamp(14px, 1.8vw, 26px);
        right: clamp(-50px, 16vw, 91px);
        top: clamp(16px, 19vw, 234px); }

  /* ─── FOOTER */
  .brd-footer-top { padding: clamp(32px, 4vw, 56px) clamp(18px, 5.8vw, 80px) clamp(26px, 3.2vw, 44px); gap: clamp(22px, 3.6vw, 52px); }
  .brd-footer-brand { max-width: clamp(320px, 42vw, 476px); }
  .brd-footer-logo { height: clamp(30px, 2.8vw, 42px); margin-bottom: clamp(12px, 1.2vw, 18px); }
  .brd-footer-desc { font-size: clamp(12.5px, 0.9vw, 14px); }
  .brd-footer-newsletter { min-width: 240px; max-width: clamp(260px, 28vw, 360px); }
  .brd-footer-nl-text { font-size: clamp(12px, 0.86vw, 13.5px); }
  .brd-footer-nl-cta { font-size: clamp(12.5px, 0.88vw, 14px); margin-bottom: clamp(10px, 1.1vw, 15px); }
  .brd-footer-nl-input { font-size: clamp(12px, 0.86vw, 13.5px); padding-left: clamp(32px, 2.8vw, 40px); }
  .brd-footer-nl-btn { font-size: clamp(10.5px, 0.78vw, 12px); padding: clamp(9px, 1vw, 12px) clamp(10px, 1.1vw, 16px); }
  .brd-footer-divider { margin: 0 clamp(18px, 3.8vw, 58px); }
  .brd-footer-info { padding: clamp(18px, 2.2vw, 30px) clamp(18px, 7.8vw, 75px); gap: clamp(8px, 1.2vw, 18px); }
  .brd-footer-info-col { gap: clamp(7px, 0.8vw, 12px); min-width: 110px; }
  .brd-footer-info-icon { width: clamp(30px, 2.8vw, 40px); height: clamp(30px, 2.8vw, 40px); }
  .brd-footer-info-label { font-size: clamp(9.5px, 0.72vw, 11.5px); }
  .brd-footer-info-value { font-size: clamp(10.5px, 0.8vw, 13px); }
  .brd-footer-info-sep { height: clamp(28px, 2.8vw, 42px); }
  .brd-footer-socials { gap: clamp(5px, 0.55vw, 8px); }
}
  @media (min-width: 641px) and (max-width: 1023px) {

  /* ─── CONTACT */
  .brd-contact { padding: clamp(60px, 8.5vw, 96px) 0 clamp(68px, 9.5vw, 108px); }
  .brd-contact-wrap { padding: 0 clamp(24px, 4vw, 56px); }
  .brd-contact-card {
    width: min(500px, 100%);
    padding: clamp(32px, 5vw, 52px) clamp(26px, 4.5vw, 44px) clamp(30px, 4.5vw, 48px);
    border-radius: clamp(24px, 3.4vw, 30px);
  }
  .brd-contact-heading { font-size: clamp(20px, 3.2vw, 28px); margin-bottom: clamp(18px, 2.6vw, 26px); }
  .brd-contact-form { gap: clamp(11px, 1.6vw, 16px); }
  .brd-contact-input { padding: clamp(12px, 1.6vw, 15px) clamp(14px, 2vw, 18px); font-size: clamp(13px, 1.7vw, 15px); border-radius: 10px; }
  .brd-contact-textarea { min-height: clamp(110px, 15vw, 160px); }
  .brd-contact-submit { padding: clamp(13px, 1.8vw, 16px) 28px; font-size: clamp(13.5px, 1.8vw, 15.5px); margin-top: clamp(4px, 0.8vw, 10px); }
  .brd-contact-note { font-size: clamp(11.5px, 1.5vw, 13px); margin-top: clamp(14px, 2vw, 20px); }

  /* Contact decoratives */
  .brd-contact-deco--ring-lg {
    width: clamp(180px, 28vw, 280px);
    height: clamp(180px, 28vw, 280px);
    border-width: clamp(26px, 3.5vw, 42px);
    top: clamp(-70px, -9vw, -30px);
    left: clamp(-120px, -14vw, -40px);
  }
  .brd-contact-deco--dot-blue { width: clamp(22px, 6vw, 46px);
        height: clamp(22px, 6vw, 47px); left: clamp(14px, 3vw, 40px); top: 6%; }
  .brd-contact-deco--dot-gray { width: clamp(10px, 4.6vw, 28px);
        height: clamp(10px, 4.6vw, 28px);
        left: clamp(46px, 9vw, 94px);
        top: 1%;}
  .brd-contact-deco--ring-right {
   width: clamp(160px, 22vw, 240px);
        height: clamp(160px, 22vw, 240px);
        border-width: clamp(22px, 3vw, 34px);
        right: clamp(-113px, -12vw, -40px);
        bottom: clamp(-78px, 38vw, 275px);
  }
  .brd-contact-deco--ring-right-sm {
           width: clamp(100px, 14vw, 160px);
        height: clamp(100px, 14vw, 160px);
        border-width: clamp(16px, 2.2vw, 26px);
        right: clamp(-54px, 1vw, 17px);
        top: clamp(22px, 17.5vw, 158px);
  }

  /* ─── FOOTER top — stacks to single column */
  .brd-footer-top {
    flex-direction: column;
    gap: clamp(22px, 3.5vw, 38px);
    padding: clamp(36px, 5.5vw, 60px) clamp(28px, 4.4vw, 60px) clamp(26px, 4vw, 44px);
  }
  .brd-footer-brand { max-width: 100%; }
  .brd-footer-logo { height: clamp(34px, 5vw, 44px); margin-bottom: clamp(12px, 1.8vw, 18px); }
  .brd-footer-desc { font-size: clamp(13px, 1.8vw, 15px); max-width: 100%; }
  .brd-footer-newsletter { max-width: 100%; width: 100%; min-width: 0; }
  .brd-footer-nl-text { font-size: clamp(12.5px, 1.7vw, 14.5px); }
  .brd-footer-nl-cta { font-size: clamp(13px, 1.8vw, 15px); margin-bottom: clamp(10px, 1.6vw, 16px); }
  .brd-footer-nl-input { font-size: clamp(12.5px, 1.7vw, 14px); padding-left: clamp(34px, 4.5vw, 42px); }
  .brd-footer-nl-btn { font-size: clamp(11px, 1.4vw, 13px); padding: clamp(10px, 1.4vw, 13px) clamp(12px, 1.8vw, 18px); }

  /* Divider */
  .brd-footer-divider { margin: 0 clamp(28px, 4.4vw, 60px); }

  /* Info row — 2×2 grid on tablet */
  .brd-footer-info {
    flex-wrap: wrap;
    gap: clamp(14px, 2.4vw, 26px) clamp(12px, 2vw, 22px);
    padding: clamp(20px, 3.2vw, 34px) clamp(28px, 4.4vw, 60px);
    justify-content: flex-start;
  }
  .brd-footer-info-col { min-width: clamp(140px, 38%, 260px); flex: 1 1 38%; align-items: center; }
  .brd-footer-info-sep { display: none; }
  .brd-footer-info-icon { width: clamp(34px, 4.8vw, 46px); height: clamp(34px, 4.8vw, 46px); }
  .brd-footer-info-label { font-size: clamp(10px, 1.3vw, 12px); }
  .brd-footer-info-value { font-size: clamp(11.5px, 1.5vw, 13.5px); }
  .brd-footer-social-col {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(10px, 1.8vw, 18px);
  }
  .brd-footer-socials { gap: clamp(6px, 1vw, 10px); }
  .brd-footer-social { width: clamp(26px, 3.6vw, 32px); height: clamp(26px, 3.6vw, 32px); }
  .brd-footer-bar-text { font-size: clamp(12px, 1.6vw, 13.5px); }
}


/* ===========================================================================
   CONTACT + FOOTER: Responsive — Mobile (max-width: 640px)
   Same breakpoint method as existing mobile block above.
   =========================================================================== */
@media (max-width: 640px) {

  /* ─── CONTACT */
  .brd-contact {
    padding: clamp(52px, 14vw, 68px) 0 clamp(60px, 16vw, 76px);
    overflow: hidden;
  }
  .brd-contact-wrap { padding: 0 clamp(14px, 4vw, 20px); }
  .brd-contact-card {
    width: 100%;
    border-radius: clamp(18px, 5.5vw, 24px);
    padding: clamp(26px, 8vw, 34px) clamp(18px, 5.5vw, 24px) clamp(24px, 7.5vw, 30px);
  }
  .brd-contact-heading { font-size: clamp(18px, 5.8vw, 24px); margin-bottom: clamp(18px, 5.5vw, 22px); }
  .brd-contact-form { gap: clamp(10px, 3vw, 14px); }
  .brd-contact-input {
    padding: clamp(11px, 3.2vw, 14px) clamp(13px, 4vw, 16px);
    font-size: clamp(13px, 3.8vw, 14.5px);
    border-radius: 10px;
  }
  .brd-contact-textarea { min-height: clamp(100px, 28vw, 130px); }
  .brd-contact-submit { padding: clamp(13px, 4vw, 15px) 24px; font-size: clamp(13.5px, 4vw, 15px); margin-top: clamp(4px, 1.5vw, 8px); }
  .brd-contact-note { font-size: clamp(11px, 3.2vw, 12.5px); margin-top: clamp(12px, 3.5vw, 16px); }

  /* Contact decoratives — scaled for mobile */
  .brd-contact-deco--ring-lg {
    width: clamp(140px, 42vw, 190px);
    height: clamp(140px, 42vw, 190px);
    border-width: clamp(22px, 6.5vw, 30px);
    top: clamp(-60px, -15vw, -36px);
    left: clamp(-80px, -20vw, -44px);
  }
  .brd-contact-deco--dot-blue { width: clamp(20px, 6vw, 28px); height: clamp(20px, 6vw, 28px); top: 58%; left: clamp(8px, 2.5vw, 14px); }
  .brd-contact-deco--dot-gray { width: clamp(10px, 3vw, 14px); height: clamp(10px, 3vw, 14px); top: 52%; left: clamp(36px, 10vw, 50px); }
  .brd-contact-deco--ring-right {
    width: clamp(120px, 38vw, 160px);
    height: clamp(120px, 38vw, 160px);
    border-width: clamp(18px, 5.5vw, 26px);
    bottom: clamp(-40px, -10vw, -20px);
    right: clamp(-60px, -16vw, -30px);
  }
  .brd-contact-deco--ring-right-sm { display: none; }

  /* ─── FOOTER top */
  .brd-footer-top {
    flex-direction: column;
    gap: clamp(20px, 6vw, 28px);
    padding: clamp(28px, 8.5vw, 38px) clamp(18px, 5.5vw, 24px) clamp(22px, 6.5vw, 28px);
  }
  .brd-footer-brand { max-width: 100%; }
  .brd-footer-logo { height: clamp(30px, 9vw, 38px); margin-bottom: clamp(10px, 3vw, 14px); }
  .brd-footer-desc { font-size: clamp(12.5px, 3.6vw, 13.5px); line-height: 1.72; }
  .brd-footer-newsletter { max-width: 100%; width: 100%; min-width: 0; }
  .brd-footer-nl-text { font-size: clamp(12px, 3.5vw, 13.5px); }
  .brd-footer-nl-cta { font-size: clamp(12.5px, 3.8vw, 14px); margin-bottom: clamp(9px, 2.8vw, 13px); }
  .brd-footer-nl-form { flex-wrap: nowrap; }
  .brd-footer-nl-input { font-size: clamp(12px, 3.5vw, 13.5px); padding: clamp(10px, 3vw, 13px) clamp(8px, 2.5vw, 12px) clamp(10px, 3vw, 13px) clamp(32px, 9vw, 40px); }
  .brd-footer-nl-btn { font-size: clamp(10px, 3vw, 12px); padding: clamp(10px, 3vw, 13px) clamp(10px, 3vw, 14px); letter-spacing: 0.06em; white-space: nowrap; }

  /* Divider */
  .brd-footer-divider { margin: 0 clamp(18px, 5.5vw, 24px); }

  /* Info row — 2-column grid on mobile */
  .brd-footer-info {
    flex-wrap: wrap;
    gap: clamp(16px, 5vw, 22px) clamp(12px, 4vw, 18px);
    padding: clamp(18px, 5.5vw, 24px) clamp(18px, 5.5vw, 24px) clamp(22px, 6.5vw, 28px);
    justify-content: flex-start;
  }
  .brd-footer-info-col { flex: 1 1 calc(50% - 10px); min-width: clamp(120px, 38vw, 155px); gap: 8px; align-items: center; }
  .brd-footer-info-sep { display: none; }
  .brd-footer-info-icon { width: clamp(30px, 9vw, 38px); height: clamp(30px, 9vw, 38px); }
  .brd-footer-info-label { font-size: clamp(9px, 2.6vw, 11px); }
  .brd-footer-info-value { font-size: clamp(10.5px, 3vw, 12.5px); word-break: break-word; }
  .brd-footer-social-col { flex: 1 1 100%; flex-direction: row; align-items: center; gap: clamp(8px, 2.5vw, 14px); }
  .brd-footer-socials { gap: clamp(6px, 2vw, 10px); }
  .brd-footer-social { width: clamp(24px, 7vw, 30px); height: clamp(24px, 7vw, 30px); }

  /* Bottom bar */
  .brd-footer-bar { min-height: clamp(40px, 11vw, 50px); padding: clamp(9px, 2.8vw, 14px) 16px; }
  .brd-footer-bar-text { font-size: clamp(11px, 3.2vw, 13px); gap: clamp(6px, 2vw, 10px); text-align: center; flex-wrap: wrap; justify-content: center; }
}