@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* ---- Brand source colors (fixed, from client) ---- */
  --brand-deep:   #235468;
  --brand-emerald:#15a177;
  --brand-paper:  #fcfefe;
  --brand-mist:   #94abb3;
  --brand-mint:   #96e0cf;

  /* ---- Type ---- */
  --font-display: 'Sora', 'IBM Plex Sans', sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 860px;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;
  --space-section: clamp(4.5rem, 9vw, 9rem);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.75,.28,1);
  --dur-s: .22s;
  --dur-m: .5s;
  --dur-l: .9s;
}

/* ================= LIGHT THEME (default) ================= */
:root,
[data-theme="light"]{
  --bg-primary: #fcfefe;
  --bg-secondary: #f2f7f7;
  --bg-inverse: #123241;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-sunken: #eef4f4;

  --text-primary: #0f2a34;
  --text-secondary: #395a65;
  --text-muted: #6d8891;
  --text-on-accent: #fbfffe;
  --text-on-dark: #eef7f6;

  --accent: #0f9270;
  --accent-strong: #0c7a5e;
  --accent-soft: #e4f7f1;
  --accent-mint: #159e83;

  --border: rgba(35,84,104,0.13);
  --border-strong: rgba(35,84,104,0.28);
  --shadow-color: 200 60% 20%;
  --shadow-s: 0 1px 2px hsl(var(--shadow-color) / .06), 0 1px 1px hsl(var(--shadow-color) / .04);
  --shadow-m: 0 8px 24px -8px hsl(var(--shadow-color) / .16);
  --shadow-l: 0 24px 64px -20px hsl(var(--shadow-color) / .28);

  --grad-hero: linear-gradient(160deg, #123241 0%, #1c4a5c 46%, #0f6650 100%);
  --line-color: rgba(35,84,104,0.22);
  --node-fill: #ffffff;
  --scrollbar-track: #eef4f4;

  color-scheme: light;
}

[data-theme="dark"]{
  --bg-primary: #0a1d24;
  --bg-secondary: #0e252d;
  --bg-inverse: #051217;
  --surface: #122c35;
  --surface-elevated: #16333d;
  --surface-sunken: #081821;

  --text-primary: #f2fbf9;
  --text-secondary: #b9d3d6;
  --text-muted: #7f9da5;
  --text-on-accent: #06201a;
  --text-on-dark: #eef7f6;

  --accent: #3fd6a8;
  --accent-strong: #6be3c1;
  --accent-soft: rgba(63,214,168,0.12);
  --accent-mint: #96e0cf;

  --border: rgba(150,224,207,0.14);
  --border-strong: rgba(150,224,207,0.26);
  --shadow-color: 200 70% 2%;
  --shadow-s: 0 1px 2px hsl(var(--shadow-color) / .5);
  --shadow-m: 0 8px 28px -8px hsl(var(--shadow-color) / .6);
  --shadow-l: 0 32px 80px -24px hsl(var(--shadow-color) / .8);

  --grad-hero: linear-gradient(160deg, #061318 0%, #0d2a30 46%, #0a3a30 100%);
  --line-color: rgba(150,224,207,0.22);
  --node-fill: #122c35;
  --scrollbar-track: #0e252d;

  color-scheme: dark;
}

/* ================= RESET ================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  font-family:var(--font-body);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
::selection{ background:var(--accent); color:var(--text-on-accent); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:10px; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.container{ position: relative;max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }
.container-narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }

/* ================= TYPOGRAPHY ================= */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text-primary); line-height:1.12; letter-spacing:-0.01em; font-weight:700; }
.display{ font-size:clamp(2.6rem, 5.4vw, 4.6rem); font-weight:700; letter-spacing:-0.02em; }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.75rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); font-weight:600; }
h4{ font-size:1.05rem; font-weight:600; }
p{ color:var(--text-secondary); }
.lede{ font-size:16px; color:var(--text-secondary);}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); font-weight:500;
  margin-bottom:1.1rem;
}
.eyebrow::before{ content:''; width:22px; height:1.5px; background:var(--accent); display:inline-block; }

.text-muted{ color:var(--text-muted); }
.mono-tag{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; color:var(--text-muted); }

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.7rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:var(--accent); color:var(--text-on-accent);
  box-shadow:var(--shadow-m);
}
.btn-primary:hover{ background:var(--accent-strong); box-shadow:var(--shadow-l); transform:translateY(-2px); }
.btn-ghost{
  background:transparent; color:var(--text-on-dark); border-color:rgba(255,255,255,.32);
}
.btn-ghost:hover{ border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.06); transform:translateY(-2px); }
.btn-outline{
  background:transparent; color:var(--text-primary); border-color:var(--border-strong);
}
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn-sm{ padding:.6rem 1.15rem; font-size:.82rem; }
.btn svg{ width:16px; height:16px; transition:transform var(--dur-s) var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

/* ================= HEADER / NAV ================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  /* Always keep header readable */
  background: var(--bg-primary);

  border-bottom: 1px solid var(--border);

  transition:
    background var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    padding var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease);
}
.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.88) !important;

    /* Slight transparency */
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);

    border-bottom-color: rgba(35, 84, 104, 0.10) !important;

    box-shadow:
        0 6px 24px rgba(15, 42, 52, 0.08);

    transition:
        background 0.35s ease,
        backdrop-filter 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}
/* =========================================================
   SCROLLED HEADER — DARK THEME
   Header keeps the same white design with transparency
   ========================================================= */

[data-theme="dark"] .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.88) !important;

    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);

    border-bottom-color: rgba(35, 84, 104, 0.10) !important;

    box-shadow:
        0 6px 24px rgba(15, 42, 52, 0.08);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: clamp(64px, 8vw, 76px);

  gap: clamp(.75rem, 3vw, 2rem);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-mark{ width:38px; height:38px; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.02em; color:var(--text-primary); }
.brand-desc{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }

.main-nav{ display:flex; align-items:center;  gap: 36px;
  flex: 1; }
.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;

  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;

  color: var(--text-primary);

  padding-block: .35rem;

  transition:
    color var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease);
}

.main-nav a::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--accent);
  border-radius: 999px;

  transition: width var(--dur-s) var(--ease);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--accent);
  transform: translateY(-1px);
}
/* =========================================================
   ACTIVE NAVIGATION PAGE
   ========================================================= */

.main-nav a.active {
  color: var(--accent);
  font-weight: 700;
}

/* Active page underline */
.main-nav a.active::after {
  width: 100%;
}

/* Hover */
.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--accent);
  transform: translateY(-1px);
}

/* Hover underline */
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  width: 100%;
}
.header-actions {
  display: flex;
  align-items: center;

  gap: clamp(.5rem, 1.5vw, 1rem);

  flex-shrink: 0;
}
.theme-toggle {
  position: relative;

  width: clamp(44px, 5vw, 52px);
  height: clamp(26px, 3vw, 29px);

  border-radius: 99px;
  border: 1px solid var(--border-strong);

  background: var(--surface-sunken);

  padding: 2px;

  display: flex;
  align-items: center;

  transition:
    background var(--dur-s) var(--ease);
}

.theme-toggle .knob {
  width: clamp(19px, 2.5vw, 21px);
  height: clamp(19px, 2.5vw, 21px);

  border-radius: 50%;

  background: var(--accent);

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

  transform: translateX(0);

  transition:
    transform var(--dur-m) var(--ease),
    background var(--dur-s) var(--ease);

  box-shadow: var(--shadow-s);
}

[data-theme="dark"] .theme-toggle .knob {
  transform: translateX(clamp(18px, 2.2vw, 23px));
}
.theme-toggle svg{ width:13px; height:13px; color:var(--text-on-accent); }
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

.menu-btn{
  display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.menu-btn span{ width:17px; height:1.5px; background:var(--text-primary); transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease); }
.menu-btn.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2){ opacity:0; }
.menu-btn.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
/* =========================================================
   MOBILE NAVIGATION — FIXED BELOW HEADER
   ========================================================= */

.mobile-nav {
  position: fixed;

  /* IMPORTANT:
     Never allow the mobile menu to cover the header */
  top: 76px;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 99;

  background: var(--bg-primary);

  display: flex;
  flex-direction: column;

  /*
   * The menu itself scrolls.
   * The header remains completely fixed above it.
   */
  overflow-y: auto;
  overflow-x: hidden;

  /*
   * Safe spacing for menu content
   */
  padding:
    clamp(1.5rem, 5vw, 2.5rem)
    clamp(1.25rem, 6vw, 2rem)
    max(2rem, env(safe-area-inset-bottom));

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;

  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    transform var(--dur-m) var(--ease),
    opacity var(--dur-m) var(--ease),
    visibility 0s var(--dur-m);
}

.mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    transform var(--dur-m) var(--ease),
    opacity var(--dur-m) var(--ease);
}
/* Mobile navigation links */
.mobile-nav > a {
  flex-shrink: 0;

  font-family: var(--font-display);

  /*
   * Flexible typography:
   * smaller on small phones,
   * larger on tablets,
   * never excessively large.
   */
  font-size: clamp(1.25rem, 5.5vw, 1.7rem);

  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;

  padding-block: clamp(.55rem, 2.2vw, .8rem);

  border-bottom: 1px solid var(--border);

  color: var(--text-primary);

  transition:
    color var(--dur-s) var(--ease),
    padding-left var(--dur-s) var(--ease);
}

/* Mobile active page */
.mobile-nav > a.active {
  color: var(--accent);
  font-weight: 700;
  padding-left: .5rem;
  border-left: 3px solid var(--accent);
}

/* Mobile hover/focus */
.mobile-nav > a:hover,
.mobile-nav > a:focus-visible {
  color: var(--accent);
  padding-left: .5rem;
}

/* Mobile contact section */

.mobile-nav .mobile-contact {
margin-top: 2rem;
  padding-top: 2rem;
  padding-bottom: 1rem;

  border-top: 1px solid var(--border);

  display: flex;
  flex-direction: column;
  gap: .45rem;

  flex-shrink: 0;

  color: var(--text-muted);
  font-size: .82rem;
}

.mobile-contact-location {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;

  color: var(--accent);

  margin-bottom: .35rem;
}

.mobile-contact a {
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 500;

  color: var(--text-secondary);

  border-bottom: none;
  padding: 0;
}

.mobile-contact a:hover {
  color: var(--accent);
}

.mobile-contact-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: var(--text-muted);

  margin-top: .25rem;
}


/* Lock the background page while menu is open */

body.nav-lock {
  overflow: hidden;
  height: 100%;
}
/* ================= HERO / TOP STRIP ================= */
.top-strip{
  background:var(--bg-inverse); color:var(--text-on-dark); font-size:.78rem; padding:.5rem 0;
}
.top-strip .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.top-strip-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
  margin-left: auto;
  text-align: right;
}
.top-strip a{ color:var(--text-on-dark); opacity:.85; }
.top-strip a:hover{ opacity:1; }
.top-strip-links{ display:flex; gap:1.4rem; align-items:center; }
.top-strip .divider{ opacity:.4; }
@media (max-width:900px) {
  .top-strip {
    display: none;
  }
}
/* =========================================================
   HERO — CLEAN FULL-BLEED PROFESSIONAL VERSION
   No white/faded side edges
   ========================================================= */

.hero{
  position:relative;

  width:100%;
  max-width:none;
  min-width:0;

  padding:
    clamp(7rem, 12vw, 9.5rem)
    0
    clamp(4rem, 7vw, 6rem);

  overflow:hidden;
  isolation:isolate;

  color:#ffffff;

  background-color:#061318;

  /* IMPORTANT — image only, no white side gradient */
  background-image:url("../assests/hero.png");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* =========================================================
   HERO — FINAL FULL-BLEED / ZOOM-SAFE VERSION
   ========================================================= */

.hero{
  position:relative;

  width:100%;
  max-width:100%;
  min-width:0;

  padding:
    clamp(7rem, 11vw, 9rem)
    0
    clamp(4rem, 7vw, 6rem);

  overflow:hidden;
  isolation:isolate;

  color:#fff;

  background-color:#061318;

  /*
     IMPORTANT:
     Do NOT use the old horizontal gradient here.
     The image itself contains bright/white edges.
  */
  background-image:url("../assests/hero.png");

  /*
     Slightly enlarge the image so its white edge
     never reaches the viewport.
  */
  background-size:115% auto;
  background-position:center center;
  background-repeat:no-repeat;
}



/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero > .container{
  position:relative;
  z-index:2;

  width:100%;
  max-width:var(--container);
  margin-inline:auto;
}


/* Prevent text from becoming excessively wide */
.hero-copy{
  min-width:0;
  max-width:760px;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.hero h1{
  color:#ffffff;

  max-width:680px;

  margin-bottom:1.4rem;

  text-shadow:
    0 2px 10px rgba(0,0,0,.45);
}


.hero p.lede{
  max-width:72ch;

  color:#f4fbfa;

  opacity:1;

  line-height:1.65;

  text-shadow:
    0 1px 7px rgba(0,0,0,.42);
}


.hero-copy > p.lede + p.lede{
  margin-top:1.2rem;
}


.hero-micro{
  color:white;

  text-shadow:
    0 1px 6px rgba(0,0,0,.45);
}


/* =========================================================
   GRID SAFETY
   ========================================================= */

.hero-grid{
  width:100%;
  max-width:100%;

  min-width:0;

  gap:clamp(2rem, 5vw, 3.5rem);

  align-items:center;
}

.hero-grid > *{
  min-width:0;
  max-width:100%;
}
/* =========================================================
   MOBILE HERO — CLEAN EDGES + READABLE TEXT
   ========================================================= */
/* =========================================================
   MOBILE — ZOOM SAFE
   ========================================================= */

@media (max-width:900px){

  .hero{
    width:100%;
    max-width:100%;
    min-width:0;

    padding:
      clamp(6.5rem, 16vw, 8rem)
      0
      clamp(4rem, 10vw, 5rem);

    /*
       More crop on smaller screens.
       This hides the white image edges.
    */
    background-size:125% auto;
    background-position:center center;
    background-repeat:no-repeat;
  }



  .hero > .container{
    width:100%;
    max-width:100%;

    padding-inline:
      clamp(1rem, 5vw, 2rem);
  }


  .hero-copy{
    width:100%;
    max-width:760px;
  }


  .hero h1{
    max-width:100%;

    font-size:
      clamp(2.15rem, 7.5vw, 3.5rem);

    line-height:1.08;
  }


  .hero p.lede{
    max-width:68ch;

    font-size:
      clamp(.95rem, 2.3vw, 1.08rem);

    line-height:1.65;
  }


  .hero-ctas{
    width:100%;
    max-width:100%;

    display:flex;
    flex-wrap:wrap;

    gap:.8rem;
  }
}
/* =========================================================
   FINAL — BROWSER ZOOM + NARROW VIEWPORT PROTECTION
   ========================================================= */

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

.hero{
  width:100%;
  max-width:100%;
  min-width:0;
}

.hero > .container,
.hero-grid,
.hero-copy{
  min-width:0;
  max-width:100%;
}


/* -----------------------------------------
   TABLET / REDUCED CSS VIEWPORT
   ----------------------------------------- */

@media (max-width:1100px){

  .hero{
    background-size:120% auto;
  }

  .hero-copy{
    max-width:700px;
  }

  .hero h1{
    max-width:650px;
  }

  .hero p.lede{
    max-width:65ch;
  }
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width:900px){

  .hero{
    background-size:125% auto;
  }

  .hero-copy{
    max-width:100%;
  }

  .hero h1,
  .hero p.lede,
  .hero-micro{
    max-width:100%;
  }
}


/* -----------------------------------------
   SMALL PHONE
   ----------------------------------------- */

@media (max-width:480px){

  .hero{
    background-size:145% auto;
  }

  .hero > .container{
    padding-inline:1rem;
  }

  .hero h1{
    font-size:clamp(2rem, 10vw, 2.6rem);
    line-height:1.08;
  }

  .hero p.lede{
    font-size:.92rem;
    line-height:1.62;
  }

  .hero-ctas{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-ctas .btn{
    width:100%;
    max-width:100%;
  }
}


/* -----------------------------------------
   VERY SMALL PHONE / EXTREME ZOOM
   ----------------------------------------- */

@media (max-width:360px){

  .hero{
    background-size:160% auto;
  }

  .hero h1{
    font-size:2rem;
  }

  .hero p.lede{
    font-size:.88rem;
  }
}

.hero-grid{  gap:3.5rem; align-items:center; }
.hero-copy .eyebrow{ color:var(--accent-mint); }
.hero-copy .eyebrow::before{ background:var(--accent-mint); }
.hero h1{ color:#fdfffe; margin-bottom:1.4rem; }
.hero p.lede{ color:rgba(238,247,246,.82); margin-bottom:2.2rem; }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.hero-micro{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; color:white; }

.hero-visual{ position:relative; aspect-ratio:1/1; }
.hero-visual svg{ width:100%; height:100%; }

/* ================= NETWORK / CONVERGENCE DIAGRAM ================= */
.node-hub{ fill:var(--accent-mint); }
.node-spoke{ fill:rgba(255,255,255,.92); }
.link-line{ stroke:rgba(255,255,255,.34); stroke-width:1.1; fill:none; }
.link-line.animated{ stroke-dasharray:6 500; stroke-dashoffset:0; animation:dash-flow 7s linear infinite; }
@keyframes dash-flow{ from{ stroke-dashoffset:506; } to{ stroke-dashoffset:0; } }
.diagram-label{ font-family:var(--font-mono); font-size:10px; fill:rgba(255,255,255,.75); letter-spacing:.03em; }
.pulse{ animation:pulse-ring 3.4s var(--ease) infinite; transform-origin:center; }
@keyframes pulse-ring{ 0%{ opacity:.55; transform:scale(1);} 70%{ opacity:0; transform:scale(2.4);} 100%{opacity:0;} }

/* ================= SECTIONS ================= */
section{
  width:100%;
  max-width:100%;
  min-width:0;
  padding:30px 0;
}
.section-alt{ background:var(--bg-secondary); }
.section-sunken{ background:var(--surface-sunken); }
.section-dark{ background:var(--grad-hero); color:var(--text-on-dark); }
.section-dark h2, .section-dark h3{ color:#fdfffe; }
.section-dark p{ color:rgba(238,247,246,.78); }
.section-dark .eyebrow{ color:var(--accent-mint); }
.section-dark .eyebrow::before{ background:var(--accent-mint); }

.section-head{ max-width:44rem; margin-bottom:3.2rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.split{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; max-width:none; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > * { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.03s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.11s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.27s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.35s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.43s; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:.51s; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay:.59s; }
.reveal-stagger.is-visible > *:nth-child(9){ transition-delay:.67s; }
.reveal-stagger.is-visible > *:nth-child(10){ transition-delay:.75s; }

/* ================= CARDS ================= */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:2rem; transition:transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-l); border-color:var(--border-strong); }
/* =========================================================
   HOW WE CREATE — TRUE CONTINUOUS INFINITE MARQUEE
   Flow: 1 → 2 → 3 → 4 → 5 → 6 → 1 → 2 → 3 → ...
   ========================================================= */

.principles-marquee{
  width:100%;
  isolation:isolate;
}

/* Soft edge fade for a premium marquee look */
.principles-marquee::before,
.principles-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  z-index:5;
  pointer-events:none;
}

.principles-marquee::before{
  left:0;
  background:linear-gradient(
    90deg,
    var(--bg-primary),
    transparent
  );
}

.principles-marquee::after{
  right:0;
  background:linear-gradient(
    270deg,
    var(--bg-primary),
    transparent
  );
}

/* Moving track */
.principles-grid{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:1rem;

  width:max-content;
  max-width:none;
  margin-top:0;

  /* IMPORTANT:
     The HTML must contain TWO identical sets:
     1 2 3 4 5 6 | 1 2 3 4 5 6
  */

  animation:principles-scroll 18s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}

/* Move exactly one complete set */
@keyframes principles-scroll{
  from{
    transform:translate3d(0,0,0);
  }

  to{
    transform:translate3d(calc(-50% - .5rem),0,0);
  }
}
/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width:380px){

  .hero{
    padding-top:6rem;
    padding-bottom:3.5rem;
  }

  .hero > .container{
    padding-inline:1rem;
  }

  .hero h1{
    font-size:clamp(2rem, 10vw, 2.55rem);
    line-height:1.08;
  }

  .hero p.lede{
    font-size:.92rem;
    line-height:1.6;
  }

  .hero-ctas{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-ctas .btn{
    width:100%;
  }
}
/* =========================================================
   HOVER EFFECT
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  /* IMPORTANT:
     Do NOT pause the whole marquee when hovering.
     This keeps the cards continuously moving.
  */

  .principle-card:hover{
    transform:translateY(-6px);
    border-color:var(--border-strong);
    box-shadow:var(--shadow-l);
  }

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

  .principle-card:hover::after{
    color:var(--accent);
    opacity:1;
    transform:translateY(-2px);
  }

  .principle-card:hover > h3{
    color:var(--accent);
    transform:translateX(3px);
  }

  .principle-card:hover > p{
    color:var(--text-primary);
  }
}

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

@media (max-width:1080px){

  .principles-grid{
    gap:.85rem;
    animation-duration:18s;
  }

  .principle-card{
    flex-basis:260px;
    min-height:210px;
  }
}

@media (max-width:640px){

  .principles-marquee::before,
  .principles-marquee::after{
    width:45px;
  }

  .principles-grid{
    gap:.75rem;
    animation-duration:18s;
  }

  .principle-card{
    flex-basis:235px;
    min-height:200px;
    padding:1.2rem 1.1rem;
  }

  .principle-card > h3{
    font-size:1.05rem;
  }

  .principle-card > p{
    font-size:.78rem;
  }
}
/* =========================================================
   HOW WE OPERATE — DARK HIGHLIGHT CARDS
   ========================================================= */

.principle-card{
  position:relative;

  /* Compact responsive size */
  flex:0 0 clamp(215px, 23vw, 285px);
  min-height:205px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  padding:clamp(1.15rem, 2vw, 1.45rem);

  /* Deep premium background */
  background:
    linear-gradient(
      145deg,
      #123b48 0%,
      #0d303b 48%,
      #09272f 100%
    );

  /* Emerald highlighted border */
  border:1px solid rgba(63,214,168,.28);

  border-radius:16px;

  overflow:hidden;
  isolation:isolate;

  /* Premium depth */
  box-shadow:
    0 10px 28px rgba(5,24,30,.28),
    inset 0 1px 0 rgba(150,224,207,.12);

  transition:
    transform var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    background var(--dur-m) var(--ease);
}


/* Soft emerald glow inside the card */
.principle-card::after{
  content:'';
  position:absolute;

  width:150px;
  height:150px;

  right:-70px;
  bottom:-80px;

  background:radial-gradient(
    circle,
    rgba(63,214,168,.18) 0%,
    rgba(63,214,168,.06) 38%,
    transparent 72%
  );

  pointer-events:none;
  z-index:0;
}


/* Keep content above glow */
.principle-card > h3,
.principle-card > p{
  position:relative;
  z-index:2;
}


/* Card heading */
.principle-card > h3{
  margin-top:1.55rem;
  margin-bottom:.55rem;

  padding-right:1.5rem;

  font-size:clamp(1rem, 1.35vw, 1.15rem);
  line-height:1.25;

  color:#f2fbf9;

  transition:
    color var(--dur-s) var(--ease),
    transform var(--dur-m) var(--ease);
}


/* Card paragraph */
.principle-card > p{
  font-size:clamp(.76rem, .9vw, .84rem);
  line-height:1.5;

  color:rgba(220,240,238,.72);

  transition:
    color var(--dur-s) var(--ease);
}


/* Top emerald highlight */
.principle-card::before{
  content:'';

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-mint)
    );

  transform:scaleX(.35);
  transform-origin:left;

  transition:
    transform var(--dur-l) var(--ease);

  z-index:3;
}



/* =========================================================
   HOVER — PREMIUM HIGHLIGHT
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  .principle-card:hover{

    transform:translateY(-5px);

    background:
      linear-gradient(
        145deg,
        #164b59 0%,
        #0f3945 48%,
        #0a2d35 100%
      );

    border-color:rgba(63,214,168,.62);

    box-shadow:
      0 16px 38px rgba(5,24,30,.38),
      0 0 22px rgba(63,214,168,.10),
      inset 0 1px 0 rgba(150,224,207,.18);
  }

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

  .principle-card:hover > h3{
    color:#6be3c1;
    transform:translateX(2px);
  }

  .principle-card:hover > p{
    color:#dcefed;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1080px){

  .principle-card{
    flex-basis:clamp(210px, 27vw, 255px);
    min-height:195px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){

  .principle-card{
    flex-basis:220px;
    min-height:185px;
    padding:1.05rem;

    border-radius:14px;
  }

  .principle-card > h3{
    font-size:.98rem;
  }

  .principle-card > p{
    font-size:.75rem;
    line-height:1.48;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width:380px){

  .principle-card{
    flex-basis:205px;
    min-height:180px;
    padding:1rem;
  }

  .principle-card > h3{
    font-size:.94rem;
  }

  .principle-card > p{
    font-size:.72rem;
  }
}
/* Operating model table */
.model-table{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; }
.model-table thead th{
  text-align:left; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); background:var(--surface-sunken); padding:1rem 1.4rem; font-weight:500;
}
.model-table tbody td{ padding:1.1rem 1.4rem; border-top:1px solid var(--border); color:var(--text-secondary); font-size:.94rem; vertical-align:top; }
.model-table tbody tr:hover{ background:var(--surface-sunken); }

/* split diagram (About) */
.split-diagram{ grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius-l); overflow:hidden; }
.split-diagram .panel{ padding:2.6rem; position:relative; }
.split-diagram .panel.group{ background:var(--grad-hero); color:var(--text-on-dark); }
.split-diagram .panel.group h4{ color:#fff; }
.split-diagram .panel.group p{ color:rgba(238,247,246,.75); }
.split-diagram .panel.companies{ background:var(--surface); }
.split-diagram ul{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.75rem; }
.split-diagram li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; }
.split-diagram .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-mint); margin-top:.55rem; flex-shrink:0; }
.split-diagram .panel.companies .dot{ background:var(--accent); }
.split-connector{ position:relative; }

/* =========================================================
   GOVERNANCE PAGE — PREMIUM UI
   Uses existing colors, typography and design variables
   ========================================================= */

.governance-overview{
  
  padding-bottom:clamp(4rem,8vw,7rem);
}

.governance-intro{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
}

.governance-intro-copy{
  max-width:760px;
}

.governance-intro-copy h2{
  margin-bottom:1.2rem;
}

.governance-statement{
  position:relative;
  display:grid;
  grid-template-columns:4px 1fr;
  gap:1.5rem;
  padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-m);
  overflow:hidden;
}

.governance-statement-line{
  width:4px;
  height:100%;
  min-height:110px;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    var(--accent),
    var(--accent-mint)
  );
}

.governance-statement .mono-tag{
  display:block;
  margin-bottom:.8rem;
}

.governance-statement p{
  max-width:520px;
  font-size:.95rem;
  line-height:1.7;
}

/* =========================================================
   GOVERNANCE COMMITMENTS
   Alternating right → left → right → left card reveal
   ========================================================= */

.governance-commitments{
  padding-top:clamp(4rem,8vw,7rem);
  padding-bottom:clamp(4rem,8vw,7rem);
}

.governance-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;

  /*
     Prevent horizontal overflow caused by the
     entrance animation.
  */
  width:100%;
  max-width:100%;
  overflow:visible;
}
/* =========================================================
   GOVERNANCE CARD — COMPACT PREMIUM STYLE
   ========================================================= */

.governance-card{
  position:relative;

  /* Reduced card size */
  min-height:195px;
  padding:1.35rem 1.45rem;

  background:
    linear-gradient(
      145deg,
      var(--surface) 0%,
      color-mix(
        in srgb,
        var(--surface) 94%,
        var(--accent-soft)
      ) 100%
    );

  border:1px solid var(--border);
  border-radius:18px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  overflow:hidden;
  isolation:isolate;

  box-shadow:
    0 6px 22px rgba(15,42,52,.045),
    inset 0 1px 0 rgba(255,255,255,.6);

  transition:
    transform var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease);

  will-change:transform;
}


/* =========================================================
   REMOVE NUMBERS
   ========================================================= */

.governance-card .g-num{
  display:none;
}


/* =========================================================
   TOP ACCENT
   ========================================================= */

.governance-card::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-mint)
    );

  transform:scaleX(.08);
  transform-origin:left;

  transition:
    transform .6s var(--ease);

  z-index:3;
}


/* =========================================================
   SOFT CORNER GLOW
   ========================================================= */

.governance-card::after{
  content:"";

  position:absolute;

  width:170px;
  height:170px;

  right:-85px;
  bottom:-90px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      var(--accent-soft) 0%,
      transparent 70%
    );

  opacity:.35;

  pointer-events:none;

  transition:
    transform .6s var(--ease),
    opacity .5s var(--ease);

  z-index:0;
}


/* =========================================================
   CONTENT
   ========================================================= */

.governance-card-content{
  position:relative;
  z-index:2;

  margin-top:auto;
  padding-top:.5rem;
}


.governance-card h4{
  margin-bottom:.5rem;

  font-size:1rem;
  line-height:1.3;

  transition:
    color var(--dur-s) var(--ease),
    transform var(--dur-m) var(--ease);
}


.governance-card p{
  max-width:420px;

  font-size:.82rem;
  line-height:1.55;

  color:var(--text-secondary);
}
/* =========================================================
   GOVERNANCE CARDS — PREMIUM HIGHLIGHT
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  .governance-card{

    cursor:pointer;

    transition:
      transform .45s var(--ease),
      background .45s var(--ease),
      border-color .45s var(--ease),
      box-shadow .45s var(--ease);
  }


  /* -----------------------------------------
     HIGHLIGHTED CARD
     ----------------------------------------- */

  .governance-card:hover{

    transform:translate3d(0,-8px,0);

    background:
      linear-gradient(
        145deg,
        var(--surface) 0%,
        var(--accent-soft) 100%
      );

    border-color:
      color-mix(
        in srgb,
        var(--accent) 65%,
        var(--border)
      );

    box-shadow:
      0 20px 45px rgba(15,42,52,.12),
      0 0 0 1px rgba(21,161,119,.08),
      0 0 30px rgba(21,161,119,.07);
  }


  /* -----------------------------------------
     TOP HIGHLIGHT LINE
     ----------------------------------------- */

  .governance-card:hover::before{

    transform:scaleX(1);

    height:4px;
  }


  /* -----------------------------------------
     CORNER LIGHT
     ----------------------------------------- */

  .governance-card:hover::after{

    transform:scale(1.35);

    opacity:1;
  }


  /* -----------------------------------------
     TITLE HIGHLIGHT
     ----------------------------------------- */

  .governance-card:hover h4{

    color:var(--accent);

    transform:translateX(5px);
  }


  /* -----------------------------------------
     DESCRIPTION
     ----------------------------------------- */

  .governance-card:hover p{

    color:var(--text-primary);
  }
}
/* =========================================================
   GOVERNANCE CARD — INNER HIGHLIGHT EDGE
   ========================================================= */

.governance-card{
  --card-highlight:rgba(21,161,119,.0);
}

.governance-card:hover{

  --card-highlight:rgba(21,161,119,.12);

  box-shadow:
    0 20px 45px rgba(15,42,52,.12),
    inset 0 0 0 1px var(--card-highlight),
    0 0 35px rgba(21,161,119,.08);
}

/* =========================================================
   MOBILE — EVEN MORE COMPACT
   ========================================================= */

@media (max-width:640px){

  .governance-card{
    min-height:175px;
    padding:1.2rem 1.25rem;

    border-radius:15px;
  }

  .governance-card-content{
    padding-top:.35rem;
  }

  .governance-card h4{
    font-size:.96rem;
    margin-bottom:.45rem;
  }

  .governance-card p{
    font-size:.78rem;
    line-height:1.52;
  }
}

/* =========================================================
   CARD TOP ACCENT LINE
   ========================================================= */

.governance-card::before{
  content:"";

  position:absolute;
  left:0;
  top:0;

  width:100%;
  height:3px;

  background:linear-gradient(
    90deg,
    var(--accent),
    var(--accent-mint)
  );

  transform:scaleX(.18);
  transform-origin:left;

  transition:transform var(--dur-m) var(--ease);

  z-index:3;
}


/* =========================================================
   CARD AMBIENT GLOW
   ========================================================= */

.governance-card::after{
  content:"";

  position:absolute;

  right:-70px;
  bottom:-80px;

  width:180px;
  height:180px;

  border-radius:50%;

  background:radial-gradient(
    circle,
    var(--accent-soft) 0%,
    transparent 70%
  );

  pointer-events:none;
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.governance-card .g-num{
  position:relative;
  z-index:2;

  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;

  color:var(--accent);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.governance-card-content{
  position:relative;
  z-index:2;

  margin-top:2rem;
}

.governance-card h4{
  margin-bottom:.65rem;

  transition:
    color var(--dur-s) var(--ease),
    transform var(--dur-m) var(--ease);
}

.governance-card p{
  font-size:.88rem;
  line-height:1.65;
  max-width:420px;
}


/* =========================================================
   ALTERNATING ENTRANCE DIRECTION
   01 → RIGHT
   02 → LEFT
   03 → RIGHT
   04 → LEFT
   05 → RIGHT
   06 → LEFT
   ========================================================= */

/*
   Initial hidden state.
   Cards remain in the document flow so the grid
   remains fully responsive.
*/

.governance-grid.reveal-stagger > .governance-card{
  opacity:0;

  transition:
    opacity .75s var(--ease),
    transform .85s var(--ease),
    box-shadow var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease);

  will-change:opacity, transform;
}


/* RIGHT SIDE CARDS */

.governance-grid.reveal-stagger > .governance-card:nth-child(odd){
  transform:translate3d(90px,0,0);
}


/* LEFT SIDE CARDS */

.governance-grid.reveal-stagger > .governance-card:nth-child(even){
  transform:translate3d(-90px,0,0);
}


/* =========================================================
   VISIBLE STATE
   ========================================================= */

.governance-grid.reveal-stagger.is-visible > .governance-card{
  opacity:1;
  transform:translate3d(0,0,0);
}


/* =========================================================
   STAGGER TIMING
   ========================================================= */

.governance-grid.reveal-stagger.is-visible
> .governance-card:nth-child(1){
  transition-delay:.05s;
}

.governance-grid.reveal-stagger.is-visible
> .governance-card:nth-child(2){
  transition-delay:.17s;
}

.governance-grid.reveal-stagger.is-visible
> .governance-card:nth-child(3){
  transition-delay:.29s;
}

.governance-grid.reveal-stagger.is-visible
> .governance-card:nth-child(4){
  transition-delay:.41s;
}

.governance-grid.reveal-stagger.is-visible
> .governance-card:nth-child(5){
  transition-delay:.53s;
}

.governance-grid.reveal-stagger.is-visible
> .governance-card:nth-child(6){
  transition-delay:.65s;
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  .governance-card:hover{
    transform:translate3d(0,-6px,0);

    border-color:var(--border-strong);

    box-shadow:var(--shadow-l);
  }

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

  .governance-card:hover h4{
    color:var(--accent);
    transform:translateX(3px);
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

  .governance-intro{
    grid-template-columns:1fr;
  }

  .governance-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
  }

  .governance-doc-layout{
    grid-template-columns:1fr;
    gap:2.5rem;
  }

  /*
     Slightly smaller entrance distance for tablets.
  */

  .governance-grid.reveal-stagger
  > .governance-card:nth-child(odd){
    transform:translate3d(65px,0,0);
  }

  .governance-grid.reveal-stagger
  > .governance-card:nth-child(even){
    transform:translate3d(-65px,0,0);
  }

  .governance-grid.reveal-stagger.is-visible
  > .governance-card{
    transform:translate3d(0,0,0);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){

  .governance-overview,
  .governance-commitments,
  .governance-documentation{
    padding-top:3.5rem;
    padding-bottom:3.5rem;
  }

  .governance-intro{
    gap:2rem;
  }

  .governance-statement{
    padding:1.35rem;
    gap:1rem;
  }

  .governance-grid{
    grid-template-columns:1fr;
    gap:1rem;

    /*
       Keep every card completely inside
       the mobile viewport.
    */
    width:100%;
  }

 .governance-card{
  min-height:175px;
  padding:1.2rem 1.25rem;

  width:100%;
  min-width:0;
}

 .governance-card-content{
  margin-top:.5rem;
}

  /*
     Mobile entrance:
     use a smaller alternating movement so
     the animation feels premium without
     causing horizontal overflow.
  */

  .governance-grid.reveal-stagger
  > .governance-card:nth-child(odd){
    transform:translate3d(35px,20px,0);
  }

  .governance-grid.reveal-stagger
  > .governance-card:nth-child(even){
    transform:translate3d(-35px,20px,0);
  }

  .governance-grid.reveal-stagger.is-visible
  > .governance-card{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  /*
     Reduce the stagger slightly on phones.
  */

  .governance-grid.reveal-stagger.is-visible
  > .governance-card:nth-child(1){
    transition-delay:.03s;
  }

  .governance-grid.reveal-stagger.is-visible
  > .governance-card:nth-child(2){
    transition-delay:.10s;
  }

  .governance-grid.reveal-stagger.is-visible
  > .governance-card:nth-child(3){
    transition-delay:.17s;
  }

  .governance-grid.reveal-stagger.is-visible
  > .governance-card:nth-child(4){
    transition-delay:.24s;
  }

  .governance-grid.reveal-stagger.is-visible
  > .governance-card:nth-child(5){
    transition-delay:.31s;
  }

  .governance-grid.reveal-stagger.is-visible
  > .governance-card:nth-child(6){
    transition-delay:.38s;
  }

  .governance-document{
    grid-template-columns:38px 1fr;
    padding:.9rem 1rem;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width:380px){

  .governance-grid{
    gap:.85rem;
  }

  .governance-card{
    min-height:195px;
    padding:1.2rem;
    border-radius:18px;
  }

  .governance-grid.reveal-stagger
  > .governance-card:nth-child(odd){
    transform:translate3d(24px,16px,0);
  }

  .governance-grid.reveal-stagger
  > .governance-card:nth-child(even){
    transform:translate3d(-24px,16px,0);
  }

  .governance-grid.reveal-stagger.is-visible
  > .governance-card{
    transform:translate3d(0,0,0);
  }

}
/* =========================================================
   VERIFIED CONTENT / DOCUMENTATION
   ========================================================= */

.governance-documentation{
  padding-top:clamp(4rem,8vw,7rem);
  padding-bottom:clamp(4rem,8vw,7rem);
}

.governance-doc-layout{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}

.governance-doc-intro{
  max-width:560px;
}

.governance-doc-intro h2{
  margin-bottom:1rem;
}

.governance-documents{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}

.governance-document{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr;
  align-items:center;
  gap:1rem;
  min-height:72px;
  padding:1rem 1.2rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  color:var(--text-secondary);
  transition:
    transform var(--dur-s) var(--ease),
    border-color var(--dur-s) var(--ease),
    box-shadow var(--dur-s) var(--ease);
}

.governance-document:hover{
  transform:translateX(5px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-s);
}

.document-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.05em;
}

@media (max-width:900px){

  .governance-intro{
    grid-template-columns:1fr;
  }

  .governance-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .governance-doc-layout{
    grid-template-columns:1fr;
    gap:2.5rem;
  }

}

@media (max-width:640px){

  .governance-overview,
  .governance-commitments,
  .governance-documentation{
    padding-top:3.5rem;
    padding-bottom:3.5rem;
  }

  .governance-intro{
    gap:2rem;
  }

  .governance-statement{
    padding:1.35rem;
    gap:1rem;
  }

  .governance-grid{
    grid-template-columns:1fr;
  }

  .governance-card{
    min-height:205px;
    padding:1.4rem;
  }

  .governance-card-content{
    margin-top:1.5rem;
  }

  .governance-document{
    grid-template-columns:38px 1fr;
    padding:.9rem 1rem;
  }

}

.placeholder-list{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.5rem; }
.placeholder-item{
  display:flex; align-items:center; gap:.9rem; padding:1.05rem 1.3rem; border:1px dashed var(--border-strong);
  border-radius:var(--radius-m); background:var(--surface-sunken); font-size:.9rem; color:var(--text-muted);
}
.placeholder-item svg{ width:17px; height:17px; flex-shrink:0; color:var(--accent); }
/* =========================================================
   LEADERSHIP — PREMIUM EXECUTIVE CARDS
   Uses existing colors, typography and sizing
   No stacked-card effect
   ========================================================= */

.leader-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(1rem, 2vw, 1.5rem);
  margin-top:clamp(2rem, 4vw, 3rem);
  align-items:stretch;
}


/* ---------------------------------------------------------
   LEADER CARD
   --------------------------------------------------------- */

.leader-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;

  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);

  box-shadow:
    0 8px 25px rgba(15,42,52,.055),
    inset 0 1px 0 rgba(255,255,255,.72);

  transition:
    transform var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease);
}


/* Thin premium top accent */

.leader-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-mint)
    );

  transform:scaleX(.18);
  transform-origin:left;

  transition:
    transform var(--dur-m) var(--ease);

  z-index:4;
}


/* Card number */

.leader-card::after{
  content:counter(leadership-card, decimal-leading-zero);

  position:absolute;
  top:1rem;
  right:1rem;

  width:34px;
  height:34px;

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

  border:1px solid var(--border-strong);
  border-radius:50%;

  background:var(--surface);
  color:var(--accent);

  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.04em;

  z-index:5;

  transition:
    background var(--dur-s) var(--ease),
    color var(--dur-s) var(--ease),
    border-color var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease);
}

.leader-grid{
  counter-reset:leadership-card;
}

.leader-card{
  counter-increment:leadership-card;
}


/* ---------------------------------------------------------
   PORTRAIT AREA
   --------------------------------------------------------- */

.leader-portrait{
  position:relative;

  aspect-ratio:4/5;

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

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      var(--surface-sunken),
      var(--bg-secondary)
    );

  border-bottom:1px solid var(--border);

  isolation:isolate;
}


/* Subtle portrait texture */

.leader-portrait::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      transparent 0%,
      rgba(255,255,255,.16) 48%,
      transparent 100%
    );

  transform:translateX(-100%);

  transition:
    transform .8s var(--ease);

  pointer-events:none;
}


/* Portrait corner detail */

.leader-portrait::after{
  content:"";

  position:absolute;

  width:130px;
  height:130px;

  right:-70px;
  bottom:-70px;

  border-radius:50%;

  border:1px solid var(--border-strong);

  box-shadow:
    0 0 0 18px color-mix(in srgb, var(--accent) 3%, transparent),
    0 0 0 36px color-mix(in srgb, var(--accent) 2%, transparent);

  pointer-events:none;
}


/* Existing SVG */

.leader-portrait svg{
  position:relative;
  z-index:2;

  width:38px;
  height:38px;

  color:var(--text-muted);
  opacity:.58;

  transition:
    transform var(--dur-m) var(--ease),
    color var(--dur-m) var(--ease),
    opacity var(--dur-m) var(--ease);
}


/* Existing placeholder text */

.leader-portrait span{
  position:absolute !important;

  bottom:1rem !important;
  left:1rem;
  right:1rem;

  z-index:3;

  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.06em;

  color:var(--text-muted);

  text-transform:uppercase;
  text-align:center;

  padding:0 1rem;
}


/* ---------------------------------------------------------
   LEADER INFORMATION
   --------------------------------------------------------- */

.leader-info{
  position:relative;

  display:flex;
  flex-direction:column;

  flex:1;

  padding:1.5rem 1.6rem 1.8rem;

  background:var(--surface);
}


/* Small separator */

.leader-info::before{
  content:"";

  width:32px;
  height:2px;

  margin-bottom:1rem;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-mint)
    );

  border-radius:999px;
}


/* Name */

.leader-info .l-name{
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.03em;

  color:var(--text-muted);

  margin-bottom:.25rem;

  transition:
    color var(--dur-s) var(--ease);
}


/* Title */

.leader-info .l-title{
  font-size:.82rem;
  color:var(--text-muted);

  margin-bottom:.7rem;

  transition:
    color var(--dur-s) var(--ease);
}


/* Biography */

.leader-info p{
  font-size:.85rem;
  color:var(--text-secondary);

  margin-top:auto;
}


/* ---------------------------------------------------------
   DESKTOP HOVER
   --------------------------------------------------------- */

@media (hover:hover) and (pointer:fine){

  .leader-card:hover{
    transform:translateY(-7px);

    border-color:var(--border-strong);

    box-shadow:
      0 20px 45px rgba(15,42,52,.12),
      0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent),
      inset 0 1px 0 rgba(255,255,255,.78);
  }

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

  .leader-card:hover::after{
    background:var(--accent);
    color:var(--text-on-accent);
    border-color:var(--accent);

    transform:translateY(-2px);
  }

  .leader-card:hover .leader-portrait::before{
    transform:translateX(100%);
  }

  .leader-card:hover .leader-portrait svg{
    color:var(--accent);
    opacity:.85;
    transform:translateY(-3px) scale(1.05);
  }

  .leader-card:hover .leader-info .l-name{
    color:var(--accent);
  }

  .leader-card:hover .leader-info::before{
    width:52px;
  }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width:1000px){

  .leader-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:640px){

  .leader-grid{
    grid-template-columns:1fr;
    gap:1rem;
    margin-top:2rem;
  }

  .leader-card{
    border-radius:var(--radius-l);
  }

  .leader-portrait{
    aspect-ratio:4/5;
  }

  .leader-info{
    padding:1.5rem 1.4rem 1.7rem;
  }

}


/* ---------------------------------------------------------
   SMALL PHONES
   --------------------------------------------------------- */

@media (max-width:380px){

  .leader-grid{
    gap:.85rem;
  }

  .leader-info{
    padding:1.4rem 1.2rem 1.6rem;
  }

  .leader-card::after{
    top:.8rem;
    right:.8rem;

    width:32px;
    height:32px;
  }

}

/* CTA band */
.cta-band{ border-radius:var(--radius-l); background:var(--grad-hero); color:var(--text-on-dark); padding:clamp(2.6rem,5vw,4.5rem); position:relative; overflow:hidden; }
.cta-band-grid{ display:flex; justify-content:space-between; align-items:center; gap:2.5rem; flex-wrap:wrap; }
.cta-band h2{ color:#fff; margin-bottom:.8rem; max-width:28rem; }
.cta-band p{ color:rgba(238,247,246,.78); max-width:34rem; }
.cta-band .cta-actions{ display:grid; gap:1rem; flex-wrap:wrap; }
/* =========================================================
   WORK WITH VEERAJ - PREMIUM CTA
   ========================================================= */

.cta-band {
  position: relative;
  overflow: hidden;
}

.cta-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.cta-band-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.cta-band-content h2 {
  max-width: 700px;
}

.cta-band-content > p {
  max-width: 720px;
}

/* -----------------------------------------
   IMAGE
   ----------------------------------------- */

.cta-band-visual {
  position: relative;
  width: 100%;
  min-width: 0;
}

.cta-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;

  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.025)
    );

  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 28px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08);

  transform: translateZ(0);
}

.cta-image-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 19px;
  z-index: 2;
  pointer-events: none;
}

.cta-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.01);

  transition:
    transform .8s cubic-bezier(.2,.7,.2,1),
    filter .8s ease;
}

.cta-image-frame:hover img {
  transform: scale(1.06);
}

/* -----------------------------------------
   IMAGE OVERLAY
   ----------------------------------------- */

.cta-image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(7, 49, 63, .12) 0%,
      rgba(7, 49, 63, .02) 45%,
      rgba(4, 91, 76, .28) 100%
    );
}

/* -----------------------------------------
   DECORATIVE CORPORATE ACCENT
   ----------------------------------------- */

.cta-band-visual::before {
  content: "";
  position: absolute;

  width: 95px;
  height: 95px;

  top: -24px;
  right: -24px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.16);

  pointer-events: none;
  z-index: 0;
}

.cta-band-visual::after {
  content: "";

  position: absolute;

  width: 45px;
  height: 45px;

  bottom: -18px;
  left: -18px;

  border-radius: 50%;

  background: rgba(12, 164, 132, .18);

  filter: blur(1px);

  pointer-events: none;
  z-index: 0;
}
.cta-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 2vw, 1rem);

  width: 100%;
  min-width: 0;
  max-width: 100%;

  margin-top: 2rem;
}

.cta-actions .btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 54px;

  justify-content: center;
  text-align: center;

  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

/* -----------------------------------------
   TABLET
   ----------------------------------------- */

@media (max-width: 900px) {

  .cta-band-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cta-band-content {
    max-width: 760px;
  }

  .cta-band-visual {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .cta-image-frame {
    aspect-ratio: 16 / 10;
  }
}

/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 600px) {

  .cta-band-grid {
    gap: 2rem;
  }

  .cta-band-visual {
    width: 100%;
  }

  .cta-image-frame {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }

  .cta-image-frame::before {
    inset: 7px;
    border-radius: 14px;
  }

  .cta-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.cta-actions .btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

  .cta-band-visual::before {
    width: 65px;
    height: 65px;
    top: -16px;
    right: -16px;
  }

  .cta-band-visual::after {
    width: 32px;
    height: 32px;
    bottom: -12px;
    left: -12px;
  }
}
/* =========================================================
   CONTACT PAGE — PREMIUM UI
   Content / colours / typography / component sizing preserved
   ========================================================= */

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:clamp(2rem,4vw,3rem);
  align-items:start;
}

/* ---------------------------------------------------------
   MAIN FORM CARD
   --------------------------------------------------------- */

.form-card{
  position:relative;
  isolation:isolate;

  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);

  padding:clamp(1.8rem,3vw,2.8rem);

  box-shadow:
    var(--shadow-m),
    inset 0 1px 0 rgba(255,255,255,.38);

  overflow:hidden;

  transition:
    border-color var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    transform var(--dur-m) var(--ease);
}

/* subtle brand accent */
.form-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-mint),
      transparent
    );

  opacity:.9;
  pointer-events:none;
}

/* very subtle decorative glow */
.form-card::after{
  content:"";
  position:absolute;

  width:220px;
  height:220px;

  right:-120px;
  top:-120px;

  background:
    radial-gradient(
      circle,
      rgba(63,214,168,.08),
      transparent 68%
    );

  pointer-events:none;
  z-index:-1;
}

.form-card:hover{
  border-color:var(--border-strong);

  box-shadow:
    var(--shadow-l),
    inset 0 1px 0 rgba(255,255,255,.38);
}


/* ---------------------------------------------------------
   FORM LAYOUT
   --------------------------------------------------------- */

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-bottom:1.2rem;

  min-width:0;
}

.form-field.full{
  grid-column:1/-1;
}

.form-field label{
  font-size:.83rem;
  font-weight:600;
  color:var(--text-primary);

  transition:
    color var(--dur-s) var(--ease);
}

.form-field label .opt{
  font-weight:400;
  color:var(--text-muted);
}


/* ---------------------------------------------------------
   INPUTS
   --------------------------------------------------------- */

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  min-width:0;

  background:var(--surface-sunken);

  border:1px solid var(--border);
  border-radius:var(--radius-s);

  padding:10px;

  color:var(--text-primary);

  transition:
    border-color var(--dur-s) var(--ease),
    background var(--dur-s) var(--ease),
    box-shadow var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder{
  color:var(--text-muted);
  opacity:.8;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover{
  border-color:var(--border-strong);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--accent);
  background:var(--surface);

  outline:none;

  box-shadow:
    0 0 0 3px color-mix(
      in srgb,
      var(--accent) 12%,
      transparent
    );
}


/* Highlight the label when the field receives focus */
.form-field:focus-within label{
  color:var(--accent);
}

.form-field textarea{
  resize:vertical;
  min-height:120px;
}


/* ---------------------------------------------------------
   VALIDATION
   --------------------------------------------------------- */

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
  border-color:#d64545;

  box-shadow:
    0 0 0 3px rgba(214,69,69,.08);
}

.form-field.has-error label{
  color:#d64545;
}

.field-error{
  font-size:.76rem;
  color:#d64545;

  display:none;

  animation:
    contact-error-in .22s var(--ease) both;
}

.form-field.has-error .field-error{
  display:block;
}

@keyframes contact-error-in{
  from{
    opacity:0;
    transform:translateY(-3px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ---------------------------------------------------------
   CONSENT + SUBMIT
   --------------------------------------------------------- */

.consent-copy{
  font-size:.8rem;
  color:var(--text-muted);

  margin:1.2rem 0 1.4rem;

  max-width:75ch;
}


/* ---------------------------------------------------------
   SUCCESS STATE
   --------------------------------------------------------- */

.form-success{
  display:none;

  text-align:center;

  padding:3rem 1rem;
}

.form-success.is-visible{
  display:block;

  animation:
    contact-success-in .5s var(--ease) both;
}

.form-success svg{
  width:52px;
  height:52px;

  color:var(--accent);

  margin-bottom:1.2rem;
}

.form-success h3{
  margin-bottom:.6rem;
}

@keyframes contact-success-in{
  from{
    opacity:0;
    transform:translateY(12px) scale(.98);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

form.is-submitted .form-fields-wrap{
  display:none;
}


/* ---------------------------------------------------------
   CONTACT INFORMATION COLUMN
   --------------------------------------------------------- */

.contact-side{
  display:flex;
  flex-direction:column;

  gap:1.4rem;

  position:relative;
}


/* vertical visual connection */
.contact-side::before{
  content:"";

  position:absolute;

  left:-1.45rem;
  top:1.5rem;
  bottom:1.5rem;

  width:1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--border-strong) 12%,
      var(--border-strong) 88%,
      transparent
    );

  opacity:.8;
}


/* ---------------------------------------------------------
   INFORMATION CARDS
   --------------------------------------------------------- */

.contact-info-card{
  position:relative;
  isolation:isolate;

  background:var(--surface);

  border:1px solid var(--border);
  border-radius:var(--radius-l);

  padding:1.8rem;

  overflow:hidden;

  box-shadow:var(--shadow-s);

  transition:
    transform var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    background var(--dur-m) var(--ease);
}


/* left accent line */
.contact-info-card::before{
  content:"";

  position:absolute;

  left:0;
  top:18px;
  bottom:18px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      var(--accent),
      var(--accent-mint)
    );

  border-radius:999px;

  transform:scaleY(.5);
  transform-origin:center;

  transition:
    transform var(--dur-m) var(--ease);
}


/* subtle internal glow */
.contact-info-card::after{
  content:"";

  position:absolute;

  width:130px;
  height:130px;

  right:-80px;
  bottom:-80px;

  background:
    radial-gradient(
      circle,
      color-mix(
        in srgb,
        var(--accent) 10%,
        transparent
      ),
      transparent 70%
    );

  pointer-events:none;
  z-index:-1;
}

.contact-info-card:hover{
  transform:translateY(-3px);

  border-color:var(--border-strong);

  box-shadow:var(--shadow-m);
}

.contact-info-card:hover::before{
  transform:scaleY(1);
}


/* ---------------------------------------------------------
   CARD HEADING
   --------------------------------------------------------- */

.contact-info-card h4{
  margin-bottom:1rem;

  display:flex;
  align-items:center;

  gap:.6rem;

  transition:
    color var(--dur-s) var(--ease);
}

.contact-info-card h4 svg{
  width:18px;
  height:18px;

  color:var(--accent);

  flex-shrink:0;

  transition:
    transform var(--dur-s) var(--ease);
}

.contact-info-card:hover h4{
  color:var(--accent);
}

.contact-info-card:hover h4 svg{
  transform:translateY(-1px);
}


/* ---------------------------------------------------------
   CARD CONTENT
   --------------------------------------------------------- */

.contact-info-card .line{
  font-size:.9rem;

  color:var(--text-secondary);

  padding:.4rem 0;

  line-height:1.6;

  transition:
    color var(--dur-s) var(--ease),
    border-color var(--dur-s) var(--ease);
}

.contact-info-card .line:first-of-type{
  border-top:none;
}

.contact-info-card a.line:hover{
  color:var(--accent);
}

.contact-info-card .pending{
  color:var(--text-muted);
  font-style:normal;
}


/* ---------------------------------------------------------
   RESPONSIVE CONTACT UI
   --------------------------------------------------------- */

@media (max-width:1100px){

  .contact-grid{
    gap:2rem;
  }

  .contact-side::before{
    left:-1rem;
  }
}


@media (max-width:900px){

  .contact-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .contact-side{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
  }

  .contact-side::before{
    display:none;
  }

  .contact-info-card{
    height:100%;
  }

  .contact-info-card:last-child{
    grid-column:1/-1;
  }
}


@media (max-width:640px){

  .form-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .form-field.full{
    grid-column:auto;
  }

  .contact-side{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .contact-info-card:last-child{
    grid-column:auto;
  }

  .contact-info-card{
    padding:1.8rem;
  }

  .form-card{
    padding:clamp(1.5rem,5vw,1.8rem);
  }
}


@media (max-width:420px){

  .contact-grid{
    gap:1.5rem;
  }

  .form-card{
    border-radius:var(--radius-l);
  }

  .contact-info-card{
    border-radius:var(--radius-l);
  }

  .form-field input,
  .form-field select,
  .form-field textarea{
    font-size:16px;
  }
}


/* ---------------------------------------------------------
   TOUCH DEVICES
   --------------------------------------------------------- */

@media (hover:none){

  .form-card:hover,
  .contact-info-card:hover{
    transform:none;
  }

  .contact-info-card:active{
    transform:translateY(-2px);
  }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  .form-card,
  .contact-info-card,
  .contact-info-card::before,
  .contact-info-card h4 svg{
    transition:none;
  }

  .field-error,
  .form-success{
    animation:none;
  }
}

/* ================= CHATBOT ================= */
.chat-launcher{
  position:fixed; bottom:1.6rem; right:1.6rem; z-index:90; width:60px; height:60px; border-radius:50%;
  background:var(--accent); color:var(--text-on-accent); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-l); border:none; transition:transform var(--dur-s) var(--ease);
}
.chat-launcher:hover{ transform:scale(1.07); }
.chat-launcher svg{ width:24px; height:24px; }
.chat-launcher .icon-close{ display:none; }
.chat-launcher.is-open .icon-chat{ display:none; }
.chat-launcher.is-open .icon-close{ display:block; }

.chat-panel{
  position:fixed; bottom:5.4rem; right:1.6rem; z-index:91; width:min(370px, calc(100vw - 2.4rem)); max-height:min(560px, 70vh);
  background:var(--surface-elevated); border:1px solid var(--border); border-radius:var(--radius-l); box-shadow:var(--shadow-l);
  display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(16px) scale(.98); visibility:hidden;
  transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), visibility 0s var(--dur-s);
}
.chat-panel.is-open{ opacity:1; transform:translateY(0) scale(1); visibility:visible; transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease); }
.chat-head{ background:var(--grad-hero); color:#fff; padding:1.2rem 1.4rem; }
.chat-head strong{ display:block; font-family:var(--font-display); font-size:.98rem; }
.chat-head span{ font-size:.78rem; color:rgba(238,247,246,.7); }
.chat-body{ padding:1.2rem 1.3rem; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:.7rem; }
.chat-msg{ background:var(--surface-sunken); border-radius:var(--radius-m); padding:.8rem 1rem; font-size:.86rem; max-width:92%; }
.chat-options{ display:flex; flex-direction:column; gap:.5rem; margin-top:.3rem; }
.chat-opt-btn{
  text-align:left; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-s);
  padding:.7rem .9rem; font-size:.83rem; color:var(--text-primary); transition:all var(--dur-s) var(--ease);
}
.chat-opt-btn:hover{ border-color:var(--accent); color:var(--accent); }
/* =========================================================
   DIGITAL AID CHATBOT — HANDOFF FORM
   ========================================================= */

.chat-msg-user{
  align-self:flex-end;
  background:var(--accent);
  color:var(--text-on-accent);
  border-radius:var(--radius-m);
}

.chat-msg-bot{
  align-self:flex-start;
}


.chat-handoff-form{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  margin-top:.2rem;
  padding:.9rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
}


.chat-form-field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}


.chat-form-field label{
  font-size:.72rem;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:.02em;
}


.chat-form-field input,
.chat-form-field textarea{
  width:100%;
  min-width:0;
  padding:.7rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  background:var(--surface-sunken);
  color:var(--text-primary);
  font-family:inherit;
  font-size:.82rem;
  outline:none;
  transition:
    border-color var(--dur-s) var(--ease),
    box-shadow var(--dur-s) var(--ease),
    background var(--dur-s) var(--ease);
}


.chat-form-field input::placeholder,
.chat-form-field textarea::placeholder{
  color:var(--text-muted);
}


.chat-form-field input:hover,
.chat-form-field textarea:hover{
  border-color:var(--border-strong);
}


.chat-form-field input:focus,
.chat-form-field textarea:focus{
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:
    0 0 0 3px color-mix(
      in srgb,
      var(--accent) 12%,
      transparent
    );
}


.chat-form-field textarea{
  resize:vertical;
  min-height:92px;
}


.chat-submit-btn{
  width:100%;
  border:0;
  border-radius:999px;
  padding:.75rem 1rem;
  background:var(--accent);
  color:var(--text-on-accent);
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  transition:
    transform var(--dur-s) var(--ease),
    background var(--dur-s) var(--ease),
    box-shadow var(--dur-s) var(--ease);
}


.chat-submit-btn:hover{
  background:var(--accent-strong);
  transform:translateY(-2px);
  box-shadow:var(--shadow-m);
}


.chat-submit-btn:active{
  transform:scale(.98);
}


/* =========================================================
   CHATBOT MOBILE
   ========================================================= */

@media (max-width:640px){

  .chat-panel{
    right:.75rem;
    bottom:4.8rem;
    width:calc(100vw - 1.5rem);
    max-height:78vh;
    border-radius:20px;
  }

  .chat-body{
    padding:1rem;
  }

  .chat-opt-btn{
    padding:.72rem .8rem;
    font-size:.8rem;
    line-height:1.4;
  }

  .chat-handoff-form{
    padding:.8rem;
  }

}


/* =========================================================
   CHATBOT REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .chat-launcher,
  .chat-panel,
  .chat-opt-btn,
  .chat-submit-btn,
  .chat-form-field input,
  .chat-form-field textarea{
    transition:none !important;
  }

}
/* =========================================================
   VEERAJ GLOBAL CORPORATION
   PREMIUM CORPORATE FOOTER
   Brand palette:
   Deep Blue  #235468
   Emerald    #15a177
   Mint       #96e0cf
   Dark       #123241
   ========================================================= */

.site-footer{
  position:relative;
  background:
    linear-gradient(
      145deg,
      #123241 0%,
      #102f3d 52%,
      #0c2733 100%
    );
  color:var(--text-on-dark);
  padding:clamp(4rem,7vw,6rem) 0 1.5rem;
  overflow:hidden;
  isolation:isolate;
}


/* -----------------------------------------
   SUBTLE BACKGROUND GLOW
   ----------------------------------------- */

.site-footer::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-180px;
  top:-220px;

  background:
    radial-gradient(
      circle,
      rgba(21,161,119,.16) 0%,
      rgba(21,161,119,.06) 38%,
      transparent 72%
    );

  pointer-events:none;
  z-index:-1;
}

.site-footer::after{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  left:-180px;
  bottom:-190px;

  background:
    radial-gradient(
      circle,
      rgba(150,224,207,.08) 0%,
      transparent 70%
    );

  pointer-events:none;
  z-index:-1;
}


/* -----------------------------------------
   TOP ACCENT LINE
   ----------------------------------------- */



/* -----------------------------------------
   MAIN GRID
   ----------------------------------------- */

.footer-grid{
  display:grid;

  grid-template-columns:
    minmax(240px,1.4fr)
    minmax(150px,.8fr)
    minmax(190px,1fr)
    minmax(240px,1fr);

  gap:clamp(2rem,4vw,4rem);

  padding-bottom:3.5rem;

  border-bottom:
    1px solid rgba(150,224,207,.14);
}


/* -----------------------------------------
   BRAND
   ----------------------------------------- */

.footer-brand{
  min-width:0;
}

.footer-brand-logo{
  display:inline-flex;
  align-items:center;
  margin-bottom:1.35rem;
}

.footer-brand .brand-logo{
  width:auto;
  max-width:190px;
  height:auto;
  max-height:62px;
  object-fit:contain;
}


.footer-brand p{
  color:rgba(238,247,246,.68);
  margin:0;
  max-width:25rem;
  font-size:.9rem;
  line-height:1.75;
}


/* -----------------------------------------
   BRAND STATUS
   ----------------------------------------- */

.footer-brand-tag{
  display:inline-flex;
  align-items:center;
  gap:.55rem;

  margin-top:1.5rem;

  padding:.48rem .72rem;

  border:
    1px solid
    rgba(150,224,207,.18);

  border-radius:999px;

  background:
    rgba(150,224,207,.045);

  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(238,247,246,.62);
}

.footer-status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex:0 0 auto;

  background:var(--accent-mint);

  box-shadow:
    0 0 0 4px rgba(150,224,207,.08);
}


/* -----------------------------------------
   COLUMN HEADINGS
   ----------------------------------------- */

.footer-col h5{
  display:flex;
  align-items:center;
  gap:.7rem;

  font-family:var(--font-mono);
  font-size:.68rem;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;

  color:rgba(238,247,246,.56);

  margin:0 0 1.35rem;
}

.footer-heading-line{
  width:22px;
  height:2px;
  flex:0 0 auto;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-mint)
    );

  border-radius:999px;
}


/* -----------------------------------------
   EXPLORE LINKS
   ----------------------------------------- */

.footer-links{
  display:flex;
  flex-direction:column;
  gap:.18rem;
}

.footer-links li{
  min-width:0;
}

.footer-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;

  width:100%;

  padding:.38rem 0;

  color:rgba(238,247,246,.74);

  font-size:.86rem;

  transition:
    color var(--dur-s) var(--ease),
    padding-left var(--dur-s) var(--ease);
}

.footer-links a svg{
  width:14px;
  height:14px;

  flex:0 0 auto;

  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:0;

  transform:translateX(-5px);

  transition:
    opacity var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease);
}

.footer-links a:hover{
  color:var(--accent-mint);
  padding-left:4px;
}

.footer-links a:hover svg{
  opacity:1;
  transform:translateX(0);
}


/* -----------------------------------------
   BUSINESS AREAS
   ----------------------------------------- */

.footer-business-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.footer-business-list li{
  position:relative;

  padding-left:1rem;

  color:rgba(238,247,246,.64);

  font-size:.78rem;
  line-height:1.45;

  transition:
    color var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease);
}

.footer-business-list li::before{
  content:"";

  position:absolute;
  left:0;
  top:.62em;

  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--accent);

  opacity:.75;
}

.footer-business-list li:hover{
  color:rgba(238,247,246,.94);
  transform:translateX(3px);
}


/* -----------------------------------------
   CONTACT
   ----------------------------------------- */

.footer-contact-list{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.footer-contact-list li{
  min-width:0;
}


.footer-contact-list a,
.footer-contact-item{
  display:flex;
  align-items:center;
  gap:.8rem;

  min-width:0;

  color:rgba(238,247,246,.78);

  font-size:.84rem;
  line-height:1.4;
}


.footer-contact-list a:hover{
  color:var(--accent-mint);
}


/* -----------------------------------------
   CONTACT ICONS
   ----------------------------------------- */

.footer-contact-icon{
  width:38px;
  height:38px;

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

  flex:0 0 38px;

  border:
    1px solid
    rgba(150,224,207,.17);

  border-radius:10px;

  background:
    rgba(150,224,207,.045);

  color:var(--accent-mint);

  transition:
    background var(--dur-s) var(--ease),
    border-color var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease);
}

.footer-contact-list a:hover .footer-contact-icon{
  background:rgba(21,161,119,.14);

  border-color:
    rgba(150,224,207,.35);

  transform:translateY(-2px);
}

.footer-contact-icon svg{
  width:17px;
  height:17px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* -----------------------------------------
   CONTACT TEXT
   ----------------------------------------- */

.footer-contact-list a > span:last-child,
.footer-contact-item > span:last-child{
  min-width:0;
  overflow-wrap:anywhere;
}

.footer-contact-list small,
.footer-contact-item small{
  display:block;

  margin-bottom:.12rem;

  font-family:var(--font-mono);
  font-size:.58rem;
  line-height:1.2;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(238,247,246,.4);
}


/* -----------------------------------------
   CONTACT CTA
   ----------------------------------------- */

.footer-contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;

  width:100%;

  margin-top:1.35rem;

  padding:.78rem .9rem .78rem 1rem;

  border:
    1px solid
    rgba(150,224,207,.18);

  border-radius:10px;

  background:
    rgba(150,224,207,.045);

  color:#f2fbf9;

  font-size:.78rem;
  font-weight:600;

  transition:
    background var(--dur-s) var(--ease),
    border-color var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease);
}

.footer-contact-btn svg{
  width:15px;
  height:15px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;

  transition:
    transform var(--dur-s) var(--ease);
}

.footer-contact-btn:hover{
  background:
    rgba(21,161,119,.14);

  border-color:
    rgba(150,224,207,.38);

  transform:translateY(-2px);
}

.footer-contact-btn:hover svg{
  transform:translateX(4px);
}


/* -----------------------------------------
   FOOTER BOTTOM
   ----------------------------------------- */

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:1.5rem;

  padding-top:1.5rem;
}


.footer-bottom small{
  color:rgba(238,247,246,.42);

  font-size:.72rem;
  line-height:1.5;
}


/* -----------------------------------------
   LEGAL LINKS
   ----------------------------------------- */

.footer-legal{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.4rem 1.3rem;
}

.footer-legal a{
  position:relative;

  color:rgba(238,247,246,.48);

  font-size:.72rem;

  transition:
    color var(--dur-s) var(--ease);
}

.footer-legal a:hover{
  color:var(--accent-mint);
}


/* -----------------------------------------
   TABLET
   ----------------------------------------- */

@media (max-width:1080px){

  .footer-grid{
    grid-template-columns:
      minmax(220px,1.3fr)
      minmax(150px,1fr)
      minmax(180px,1fr);

    gap:2.5rem;
  }

  .footer-brand{
    grid-column:1/-1;
  }

}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width:700px){

  .site-footer{
    padding:
      3.5rem 0
      max(1.2rem, env(safe-area-inset-bottom));
  }

  .footer-top-line{
    margin-bottom:2.8rem;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:2.5rem 1.5rem;
    padding-bottom:2.5rem;
  }

  .footer-brand{
    grid-column:1/-1;
  }

  .footer-brand .brand-logo{
    max-width:175px;
  }

  .footer-brand p{
    max-width:32rem;
    font-size:.86rem;
  }

  .footer-col h5{
    margin-bottom:1rem;
  }

  .footer-business-list{
    gap:.45rem;
  }

  .footer-business-list li{
    font-size:.72rem;
  }

  .footer-contact-list a,
  .footer-contact-item{
    align-items:flex-start;
  }

  .footer-contact-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }

  .footer-contact-icon svg{
    width:15px;
    height:15px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }

  .footer-legal{
    gap:.55rem 1rem;
  }

}


/* -----------------------------------------
   SMALL PHONES
   ----------------------------------------- */

@media (max-width:480px){

  .footer-grid{
    grid-template-columns:1fr;
    gap:2.2rem;
  }

  .footer-brand{
    grid-column:auto;
  }

  .footer-brand-tag{
    font-size:.56rem;
  }

  .footer-contact-btn{
    max-width:100%;
  }

  .footer-bottom{
    padding-top:1.25rem;
  }

  .footer-bottom small,
  .footer-legal a{
    font-size:.68rem;
  }

}


/* -----------------------------------------
   REDUCED MOTION
   ----------------------------------------- */

@media (prefers-reduced-motion:reduce){

  .footer-links a,
  .footer-links a svg,
  .footer-contact-icon,
  .footer-contact-btn,
  .footer-contact-btn svg,
  .footer-business-list li{
    transition:none !important;
  }

}
/* ================= PAGE HERO — ABOUT PAGE ================= */

.page-hero {
  padding: 8.5rem 0 4rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /*
   * About page hero image
   * CSS file is inside /css/
   * Image is inside /images/
   */
  background:
    linear-gradient(
      90deg,
      rgba(6, 19, 24, 0.88) 0%,
      rgba(6, 19, 24, 0.72) 28%,
      rgba(6, 19, 24, 0.38) 52%,
      rgba(6, 19, 24, 0.12) 76%,
      rgba(6, 19, 24, 0.08) 100%
    ),
    url("../assests/hero1.png") center center / cover no-repeat;

  color: var(--text-on-dark);
}

/* Keep hero content above the background */
.page-hero .container {
  position: relative;
  z-index: 2;
}

/* Eyebrow */
.page-hero .eyebrow {
  color: var(--accent-mint);
}

.page-hero .eyebrow::before {
  background: var(--accent-mint);
}

/* Main heading */
.page-hero h1 {
  color: #fdfffe;
  max-width: 38rem;
}

/* Description */
.page-hero p.lede {
  color: rgba(238, 247, 246, 0.86);
  margin-top: 1.1rem;
  max-width: 42rem;
}

/* Breadcrumb */
.crumb-trail {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(238, 247, 246, .65);
  margin-bottom: 1.4rem;
  letter-spacing: .04em;
}

.crumb-trail a {
  color: rgba(238, 247, 246, .82);
}

.crumb-trail a:hover {
  color: #fff;
}

/* ================= PAGE HERO — MOBILE ================= */

@media (max-width: 640px) {

  .page-hero {
    padding: 7.5rem 0 3.5rem;

    background:
      linear-gradient(
        180deg,
        rgba(6, 19, 24, 0.90) 0%,
        rgba(6, 19, 24, 0.76) 45%,
        rgba(6, 19, 24, 0.62) 100%
      ),
      url("../assests/hero.png") center center / cover no-repeat;
  }

  .page-hero h1 {
    max-width: 100%;
  }

  .page-hero p.lede {
    max-width: 100%;
  }
}
/* misc */
.divider-line{ height:1px; background:var(--border); border:none; margin:0; }
.stat-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(.85rem, 2vw, 1.25rem);
  margin-top:2.5rem;
  width:100%;
}

.stat-row .stat{
  position:relative;
  min-width:0;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:center;

  min-height:150px;
  padding:clamp(1.25rem, 2.5vw, 1.7rem);

  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);

  box-shadow:var(--shadow-s);

  isolation:isolate;

  transition:
    transform var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    background var(--dur-m) var(--ease);
}

/* Premium accent glow */
.stat-row .stat::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;

  background:linear-gradient(
    90deg,
    var(--accent),
    var(--accent-mint)
  );

  transform:scaleX(.35);
  transform-origin:left;

  transition:
    transform var(--dur-l) var(--ease);
}

/* Hover */
.stat-row .stat:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-l);
}

.stat-row .stat:hover::before{
  transform:scaleX(1);
}

.stat-row .stat:hover::after{
  transform:scale(1.6);
  opacity:.09;
}

/* Number */
.stat-row .stat b{
  position:relative;
  z-index:1;

  display:block;

  font-family:var(--font-display);
  font-size:clamp(2rem, 3vw, 2.5rem);
  font-weight:700;
  line-height:1;

  letter-spacing:-.04em;
  color:var(--text-primary);

  margin-bottom:.7rem;

  transition:
    color var(--dur-s) var(--ease),
    transform var(--dur-m) var(--ease);
}

.stat-row .stat:hover b{
  color:var(--accent);
  transform:translateX(3px);
}

/* Description */
.stat-row .stat span{
  position:relative;
  z-index:1;

  display:block;

  max-width:22ch;

  font-family:var(--font-body);
  font-size:clamp(.76rem, 1vw, .84rem);
  line-height:1.5;

  color:var(--text-muted);

  transition:
    color var(--dur-s) var(--ease);
}

.stat-row .stat:hover span{
  color:var(--text-secondary);
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }

@media (max-width:900px){
  .main-nav{ display:none; }
  .header-actions .header-cta{ display:none; }
  .menu-btn{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:400px; margin-inline:auto; order:-1; }
  .split-diagram{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; gap:2rem; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2.2rem; }
  .footer-brand{ grid-column:1/-1; }
    .stat-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .stat-row .stat:last-child{
    grid-column:1 / -1;
  }
}

/* =========================================================
   HEADER LOGO
   ========================================================= */
.brand {
  display: flex;
  align-items: center;

  flex: 0 1 auto;
  flex-shrink: 1;

  width: clamp(145px, 22vw, 250px);
  height: clamp(44px, 6vw, 58px);

  text-decoration: none;
  min-width: 0;
}
.brand-logo {
  display: block;

  width: clamp(120px, 16vw, 180px);
  height: auto;

  max-width: 100%;
  max-height: clamp(40px, 5.5vw, 52px);

  object-fit: contain;
  object-position: left center;

  flex-shrink: 1;
}
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* =========================================================
   RESPONSIVE HEADER + MOBILE MENU
   ========================================================= */

@media (max-width: 900px) {

  .site-header {
    z-index: 100;
  }

  .header-bar {
    min-height: clamp(64px, 8vw, 76px);
    gap: clamp(.6rem, 3vw, 1.5rem);
  }

  .brand {
    width: clamp(145px, 38vw, 220px);
    height: clamp(44px, 7vw, 58px);
  }

  .brand-logo {
    width: clamp(120px, 30vw, 170px);
    max-height: clamp(40px, 6vw, 52px);
  }

  .header-actions {
    gap: clamp(.5rem, 2vw, 1rem);
  }

  .mobile-nav {
    top: clamp(64px, 8vw, 76px);
  }

  .mobile-nav > a {
    font-size: clamp(1.25rem, 5.5vw, 1.7rem);
  }
}


/* Smaller phones */

@media (max-width: 480px) {

  .header-bar {
    min-height: 62px;
    gap: .5rem;
  }

  .brand {
    width: clamp(125px, 42vw, 170px);
    height: 48px;
  }

  .brand-logo {
    width: clamp(110px, 34vw, 145px);
    max-height: 42px;
  }

  .header-actions {
    gap: .4rem;
  }

  .theme-toggle {
    width: 44px;
    height: 26px;
  }

  .theme-toggle .knob {
    width: 19px;
    height: 19px;
  }

  [data-theme="dark"] .theme-toggle .knob {
    transform: translateX(18px);
  }

  .menu-btn {
    width: 40px;
    height: 40px;
  }

  .mobile-nav {
    top: 62px;

    padding:
      1.25rem
      1.15rem
      max(1.5rem, env(safe-area-inset-bottom));
  }

  .mobile-nav > a {
    font-size: clamp(1.2rem, 6vw, 1.45rem);
    padding-block: .6rem;
  }
}


/* Very small phones */

@media (max-width: 360px) {

  .brand {
    width: 115px;
  }

  .brand-logo {
    width: 105px;
  }

  .mobile-nav > a {
    font-size: 1.15rem;
  }

  .mobile-nav {
    padding-inline: 1rem;
  }
}
/* =========================================================
   FINAL HEADER VISIBILITY FIX — LIGHT + DARK THEME
   ========================================================= */

/* LIGHT THEME */

[data-theme="light"] .site-header {
  background: rgba(252, 254, 254, 0.88);

  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);

  border-bottom: 1px solid rgba(35, 84, 104, 0.14);

  box-shadow:
    0 4px 24px rgba(15, 42, 52, 0.06);
}

[data-theme="light"] .site-header .brand-name {
  color: var(--text-primary);
}

[data-theme="light"] .site-header .brand-desc {
  color: var(--text-muted);
}

[data-theme="light"] .site-header .main-nav a {
  color: var(--text-primary);
}

[data-theme="light"] .site-header .main-nav a:hover,
[data-theme="light"] .site-header .main-nav a:focus-visible,
[data-theme="light"] .site-header .main-nav a[aria-current="page"] {
  color: var(--accent);
}

/* DARK THEME */
[data-theme="dark"] .site-header {
  background: rgba(10, 29, 36, 0.88);

  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);

  border-bottom: 1px solid rgba(150, 224, 207, 0.12);

  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .site-header .brand-name {
  color: var(--text-primary);
}

[data-theme="dark"] .site-header .brand-desc {
  color: var(--text-muted);
}

[data-theme="dark"] .site-header .main-nav a {
  color: var(--text-primary);
}

[data-theme="dark"] .site-header .main-nav a:hover,
[data-theme="dark"] .site-header .main-nav a:focus-visible,
[data-theme="dark"] .site-header .main-nav a[aria-current="page"] {
  color: var(--accent);
}

/* SAME UNDERLINE IN BOTH THEMES */
.site-header .main-nav a::after {
  background: var(--accent);
}

/* HEADER LOGO */
.site-header .brand {
  color: var(--text-primary);
}

/* THEME TOGGLE */
.site-header .theme-toggle {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
}

.site-header .theme-toggle:hover,
.site-header .theme-toggle:focus-visible {
  border-color: var(--accent);
}
/* =========================================================
   ABOUT PAGE — PREMIUM UI UPGRADE
   IMPORTANT:
   - Does NOT affect hero
   - Does NOT affect How We Operate
   - Does NOT affect footer
   - Keeps existing colors
   - Keeps existing typography
   - Keeps existing content
   ========================================================= */


/* =========================================================
   01 — WHY WE EXIST
   ========================================================= */

.about-existence-section{
  position:relative;
  overflow:hidden;
}

.about-section-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:3rem;
}

.about-section-intro-copy{
  max-width:44rem;
}
.about-existence-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}

.about-text-card{
  position:relative;
  min-height:240px;
  padding:2.25rem;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--surface) 97%,var(--accent) 3%),
      var(--surface)
    );
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;
  isolation:isolate;
  transition:
    transform var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease);
}

.about-text-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:
    linear-gradient(
      180deg,
      var(--accent),
      var(--accent-mint)
    );
  transform:scaleY(.35);
  transform-origin:top;
  transition:transform var(--dur-l) var(--ease);
}

.about-text-card::after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-110px;
  bottom:-110px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(21,161,119,.12),
      transparent 70%
    );
  pointer-events:none;
}

.about-text-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-l);
}

.about-text-card:hover::before{
  transform:scaleY(1);
}

.about-text-card-accent{
  background:var(--bg-secondary);
}

.about-card-number{
  display:block;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--accent);
  margin-bottom:1rem;
}

.about-card-line{
  width:42px;
  height:1px;
  background:var(--border-strong);
  margin-bottom:1.5rem;
}

.about-text-card p{
  max-width:60ch;
}


/* =========================================================
   02 — ABOUT STRUCTURE
   ========================================================= */

.about-structure-section{
  position:relative;
  overflow:hidden;
}

.about-structure-head{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:end;
  margin-bottom:3.5rem;
}

.about-structure-head > div:first-child{
  max-width:40rem;
}

.about-structure-head .lede{
  margin:0;
}

.about-operating-diagram{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);
  align-items:stretch;
  gap:0;
}

.about-model-card{
  position:relative;
  padding:2.5rem;
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;
  min-height:390px;
  transition:
    transform var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease);
}

.about-model-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-l);
  border-color:var(--border-strong);
}

.about-model-group{
  background:var(--grad-hero);
  color:var(--text-on-dark);
  border-color:rgba(150,224,207,.18);
}

.about-model-business{
  background:var(--surface);
}

.about-model-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:1.2rem;
}

.about-model-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--accent);
}

.about-model-group .about-model-number{
  color:var(--accent-mint);
  border-color:rgba(150,224,207,.28);
}

.about-model-card h4{
  margin-bottom:1.5rem;
}

.about-model-group h4{
  color:#fff;
}

.about-model-card ul{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.about-model-card li{
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  font-size:.92rem;
  line-height:1.55;
}

.about-model-card .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-top:.5rem;
  flex:0 0 6px;
}

.about-model-group .dot{
  background:var(--accent-mint);
}

.about-model-connector{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  font-family:var(--font-mono);
  font-size:.58rem;
  letter-spacing:.09em;
  color:var(--text-muted);
}

.about-model-connector i{
  width:1px;
  flex:1;
  max-height:120px;
  background:
    linear-gradient(
      180deg,
      transparent,
      var(--accent),
      transparent
    );
}


/* =========================================================
   03 — OPERATING MODEL
   ========================================================= */

.about-operating-section{
  position:relative;
}

.about-operating-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:3rem;
}

.about-operating-label{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.1em;
  color:var(--text-muted);
}

.about-operating-label i{
  width:44px;
  height:1px;
  background:var(--border-strong);
}

.about-role-matrix{
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-s);
}

.about-role-column{
  padding:2rem;
}

.about-role-group{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--surface) 94%,var(--accent) 6%),
      var(--surface)
    );
}

.about-role-business{
  background:var(--surface);
}

.about-role-header{
  display:flex;
  align-items:center;
  gap:1rem;
  padding-bottom:1.4rem;
  margin-bottom:.3rem;
  border-bottom:1px solid var(--border);
}

.about-role-header > span{
  font-family:var(--font-mono);
  font-size:.65rem;
  color:var(--accent);
}

.about-role-header h3{
  font-size:1.1rem;
}

.about-role-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:1rem;
  align-items:start;
  padding:1.2rem 0;
  border-bottom:1px solid var(--border);
}

.about-role-item:last-child{
  border-bottom:none;
}

.about-role-item > span{
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--text-muted);
  padding-top:.2rem;
}

.about-role-item p{
  font-size:.94rem;
  line-height:1.55;
  color:var(--text-secondary);
}

.about-role-divider{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-sunken);
}

.about-role-divider::before{
  content:"";
  width:1px;
  height:100%;
  background:var(--border);
}

.about-role-divider span{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:
    0 0 0 6px var(--surface-sunken),
    0 0 0 7px var(--border);
}


/* =========================================================
   04 — RESPONSIVE
   ========================================================= */

@media (max-width:900px){

  .about-section-intro{
    align-items:flex-start;
  }

  .about-structure-head{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .about-operating-diagram{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .about-model-card{
    min-height:auto;
  }

  .about-model-connector{
    flex-direction:row;
    height:42px;
  }

  .about-model-connector i{
    width:90px;
    height:1px;
    max-height:none;
    background:
      linear-gradient(
        90deg,
        transparent,
        var(--accent),
        transparent
      );
  }

  .about-role-matrix{
    grid-template-columns:1fr;
  }

  .about-role-divider{
    height:44px;
  }

  .about-role-divider::before{
    width:100%;
    height:1px;
  }
}


@media (max-width:700px){

  .about-section-intro{
    display:block;
    margin-bottom:2.2rem;
  }

  .about-section-index{
    margin-top:1.5rem;
  }

  .about-existence-grid{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .about-text-card{
    min-height:auto;
    padding:1.7rem;
  }

  .about-structure-head{
    margin-bottom:2.2rem;
  }

  .about-model-card{
    padding:1.7rem;
    border-radius:var(--radius-m);
  }

  .about-operating-head{
    display:block;
    margin-bottom:2.2rem;
  }

  .about-operating-label{
    margin-top:1.3rem;
  }

  .about-role-column{
    padding:1.35rem;
  }

  .about-role-item{
    grid-template-columns:28px 1fr;
    gap:.75rem;
    padding:1rem 0;
  }

  .about-role-item p{
    font-size:.94rem;
  }
}


@media (max-width:380px){

  .about-text-card{
    padding:1.45rem;
  }

  .about-model-card{
    padding:1.45rem;
  }

  .about-role-column{
    padding:1.15rem;
  }
}

.page-hero + section{
  
  padding-bottom:clamp(4rem, 8vw, 7rem);
}


/* =========================================================
   02 — FILTER NAVIGATION
   ========================================================= */

.filter-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;

  gap:.65rem;

  width:100%;
  max-width:1240px;

  margin-inline:auto;
  margin-bottom:clamp(2rem, 4vw, 3.5rem);

  padding-bottom:1.25rem;

  border-bottom:1px solid var(--border);

  overflow:visible;
}

/* =========================================================
   BUSINESS FILTERS
   Heading-style category navigation
   ========================================================= */

.filter-chip{
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 1.1rem;
}


/* Hover */

.filter-chip:hover{

  color:var(--accent);

  background:transparent;

  border-color:transparent;

  transform:none;

  box-shadow:none;

}


/* Active — heading style */

.filter-chip.is-active{

  background:transparent;

  color:var(--text-primary);

  border:0;

  box-shadow:none;

}


/* Active underline */

.filter-chip.is-active::before{

 
    background: var(--accent-mint);

}


/* Active hover */

.filter-chip.is-active:hover{

  background:transparent;

  color:var(--text-primary);

  border-color:transparent;

}


/* =========================================================
   12 — MOBILE
   ========================================================= */

@media (max-width:700px){

  .page-hero + section{
    padding-top:2.75rem;
    padding-bottom:4rem;
  }

  /*
     Horizontal filter scrolling prevents ugly wrapping
     on small screens.
  */

  .filter-row{
    flex-wrap:nowrap;

    margin-bottom:2rem;

    padding-bottom:1rem;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    scroll-snap-type:x proximity;
  }

  .filter-row::-webkit-scrollbar{
    display:none;
  }

  .filter-chip{
    flex:0 0 auto;

    min-height:40px;

    scroll-snap-align:start;
  }
}

/* ---------------------------------------------------------
   01 — GLOBAL WIDTH SAFETY
   --------------------------------------------------------- */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 0;
}

main,
section,
.container,
.container-narrow {
  min-width: 0;
}

.container,
.container-narrow {
  width: 100%;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}


/* ---------------------------------------------------------
   02 — FLEX / GRID CHILD SAFETY
   --------------------------------------------------------- */

.grid,
.two-col,
.hero-grid,
.footer-grid,
.contact-grid,
.leader-grid,
.split-diagram,
.cta-band-grid,
.stat-row {
  min-width: 0;
}

.two-col > *,
.hero-grid > *,
.cta-band-grid > *,
.footer-grid > *,
.contact-grid > *,
.leader-grid > *,
.split-diagram > *,
.stat-row > * {
  min-width: 0;
}


/* ---------------------------------------------------------
   03 — HERO
   --------------------------------------------------------- */

.hero-grid {
  width: 100%;
  min-width: 0;
}

.hero-copy {
  min-width: 0;
  max-width: 100%;
}

.hero-copy p,
.hero-micro {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero-ctas {
  width: 100%;
  min-width: 0;
}


/* ---------------------------------------------------------
   04 — BUTTON SAFETY
   --------------------------------------------------------- */

.btn {
  max-width: 100%;
  min-width: 0;
}

.btn svg {
  flex: 0 0 auto;
}
.hero-ctas .btn {
  width:auto;
  flex:1 1 0;
  min-width:0;
  max-width:none;
}

.cta-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cta-actions .btn {
  width:100%;
  min-width:0;
  white-space:normal;
  padding-inline:.65rem;
  font-size:clamp(.72rem, 3vw, .95rem);
  line-height:1.25;
}

/* ---------------------------------------------------------
   05 — HEADER
   --------------------------------------------------------- */

.site-header {
  width: 100%;
  max-width: 100%;
}

.header-bar {
  width: 100%;
  min-width: 0;
}

.brand {
  min-width: 0;
  max-width: 100%;
}

.brand-logo {
  max-width: 100%;
  min-width: 0;
}

.main-nav {
  min-width: 0;
}

.header-actions {
  min-width: 0;
  flex-shrink: 0;
}


/* ---------------------------------------------------------
   06 — MOBILE NAV
   One reliable header offset
   --------------------------------------------------------- */

.mobile-nav {
  top: clamp(62px, 8vw, 76px);
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  padding-bottom:
    max(2rem, env(safe-area-inset-bottom));
}

.mobile-nav > a,
.mobile-nav .mobile-contact,
.mobile-nav .mobile-cta {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobile-nav .mobile-cta {
  width: 100%;
  white-space:normal;
  text-align:center;
}


/* ---------------------------------------------------------
   07 — SECTIONS
   --------------------------------------------------------- */

section {
  width:100%;
  min-width:0;
}

section:not(:has(.biz-grid)){
  overflow-x:clip;
}

section:has(.biz-grid){
  overflow:visible;
}
/* ---------------------------------------------------------
   08 — TWO COLUMN CONTENT
   --------------------------------------------------------- */

.two-col {
  width: 100%;
}

.two-col > * {
  width: 100%;
  max-width: 100%;
}


/* ---------------------------------------------------------
   09 — STAT CARDS
   --------------------------------------------------------- */

.stat-row {
  width: 100%;
  min-width: 0;
}

.stat-row .stat {
  min-width: 0;
  width: 100%;
}

.stat-row .stat span {
  overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   10 — OPERATING PRINCIPLES MARQUEE
   Keep horizontal animation contained
   --------------------------------------------------------- */

.principles-marquee {

  width: 100%;
  max-width: 100%;
}

.principles-grid {
  max-width: none;
  width: max-content;
}



/* ---------------------------------------------------------
   13 — CTA
   Remove the 320px hard minimum at smaller widths
   --------------------------------------------------------- */

.cta-band {
  width:100%;
  max-width:100%;
  min-width:0;
}

.cta-band-grid {
  width:100%;
  min-width:0;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, .92fr);
}

.cta-band-content,
.cta-band-visual {
  min-width:0;
  max-width:100%;
}

.cta-band-content > *,
.cta-band-visual > * {
  max-width:100%;
}

.cta-actions {
  min-width:0;
  max-width:100%;
}

.cta-image-frame {
  width:100%;
  max-width:100%;
}

.cta-image-frame img {
  max-width:100%;
}


/* ---------------------------------------------------------
   14 — CHATBOT
   --------------------------------------------------------- */

.chat-launcher {
  right:
    max(1rem, env(safe-area-inset-right));
  bottom:
    max(1rem, env(safe-area-inset-bottom));
}

.chat-panel {
  right:
    max(1rem, env(safe-area-inset-right));

  bottom:
    calc(
      4.8rem +
      max(0px, env(safe-area-inset-bottom))
    );

  width:
    min(
      370px,
      calc(
        100vw -
        2rem -
        env(safe-area-inset-left) -
        env(safe-area-inset-right)
      )
    );

  max-width:calc(100vw - 2rem);
}
/* =========================================================
   DIGITAL AID — CHAT HEADER / NEW CHAT
   ========================================================= */

.chat-head-with-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}


.chat-head-content{
  min-width:0;
  flex:1;
}


.chat-new-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;

  flex:0 0 auto;

  padding:.42rem .65rem;

  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;

  background:rgba(255,255,255,.07);

  color:rgba(255,255,255,.9);

  font-family:inherit;
  font-size:.68rem;
  font-weight:600;

  cursor:pointer;

  transition:
    background var(--dur-s) var(--ease),
    border-color var(--dur-s) var(--ease),
    color var(--dur-s) var(--ease),
    transform var(--dur-s) var(--ease);
}


.chat-new-btn svg{
  width:14px;
  height:14px;

  flex:0 0 auto;

  transition:
    transform .45s var(--ease);
}


.chat-new-btn:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.4);
  color:#fff;

  transform:translateY(-1px);
}


.chat-new-btn:hover svg{
  transform:rotate(-35deg);
}


.chat-new-btn:active{
  transform:scale(.96);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:480px){

  .chat-head-with-action{
    gap:.65rem;
  }

  .chat-new-btn{
    padding:.42rem;

    width:32px;
    height:32px;
  }

  .chat-new-btn span{
    display:none;
  }

}

/* ---------------------------------------------------------
   15 — TABLETS
   --------------------------------------------------------- */

@media (max-width:1080px) {

  .hero-grid {
    gap:2.5rem;
  }

  .cta-band-grid {
    gap:2.5rem;
  }

  .split-diagram .panel {
    min-width:0;
  }

}


/* ---------------------------------------------------------
   16 — MOBILE
   --------------------------------------------------------- */

@media (max-width:900px) {

  .hero-grid {
    grid-template-columns:1fr;
  }

  .hero-copy {
    width:100%;
  }

  .hero-ctas {
    align-items:flex-start;
  }

  .cta-band-grid {
    grid-template-columns:1fr;
  }

  .cta-band-visual {
    width:100%;
  }

  .cta-image-frame {
    width:100%;
  }

}


/* ---------------------------------------------------------
   17 — SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width:640px) {

  section {
    padding-inline:0;
  }

  .container,
  .container-narrow {
    padding-inline:clamp(1rem, 5vw, 1.5rem);
  }

  .hero-ctas,
  .cta-actions {
    width:100%;
  }

  .hero-ctas .btn,
  .cta-actions .btn {
    max-width:100%;
  }

  .cta-band {
    border-radius:var(--radius-m);
  }

  .cta-band-grid {
    gap:2rem;
  }

  .cta-image-frame {
    border-radius:20px;
  }

  .chat-panel {
    bottom:
      calc(
        4.5rem +
        max(0px, env(safe-area-inset-bottom))
      );
  }

}


/* ---------------------------------------------------------
   18 — VERY SMALL PHONES
   --------------------------------------------------------- */

@media (max-width:380px) {

  .container,
  .container-narrow {
    padding-inline:1rem;
  }

  .hero-ctas {
    gap:.7rem;
  }

  .hero-ctas .btn,
  .cta-actions .btn {
    width:100%;
  }

  .chat-launcher {
    width:56px;
    height:56px;
  }

  .chat-panel {
    right:.75rem;
    max-width:calc(100vw - 1.5rem);
    width:calc(100vw - 1.5rem);
  }

}


/* ---------------------------------------------------------
   19 — LANDSCAPE PHONES
   --------------------------------------------------------- */

@media (max-height:600px) and (orientation:landscape) {

  .mobile-nav {
    padding-top:1rem;
    padding-bottom:
      max(1rem, env(safe-area-inset-bottom));
  }

  .mobile-nav > a {
    padding-block:.45rem;
  }

 
}


/* =========================================================
   ABOUT PAGE — CLEAN GROUP STRUCTURE
   Uses existing colors, fonts and typography
   ========================================================= */

.about-group-section{
  position:relative;
  overflow:hidden;
}

.about-group-intro{
  max-width:900px;
  margin-bottom:clamp(3.5rem,7vw,6rem);
}

.about-group-copy h2{
  margin-bottom:1.35rem;
}

.about-group-copy .lede{
  max-width:780px;
  margin-bottom:1.4rem;
}

.about-group-copy p:not(.lede){
  max-width:820px;
  margin-top:1rem;
}


/* =========================================================
   OPERATING MODEL
   ========================================================= */

.about-operating-model{
  border-top:1px solid var(--border);
  padding-top:clamp(2.5rem,5vw,4rem);
}

.about-operating-model-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2rem;
}

.about-operating-model-head h3{
  margin-top:.15rem;
}

.about-operating-label{
  display:flex;
  align-items:center;
  gap:.65rem;
  flex-shrink:0;

  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--text-muted);
}

.about-operating-label i{
  width:38px;
  height:1px;
  background:var(--border-strong);
  display:block;
}


/* =========================================================
   SPLIT STRUCTURE
   ========================================================= */

.about-operating-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);
  align-items:stretch;
  gap:0;

  border:1px solid var(--border);
  border-radius:var(--radius-l);
  overflow:hidden;

  background:var(--surface);
}


/* =========================================================
   OPERATING CARDS
   ========================================================= */

.about-operating-card{
  position:relative;
  padding:clamp(1.6rem,3vw,2.6rem);

  min-width:0;

  transition:
    transform var(--dur-m) var(--ease),
    box-shadow var(--dur-m) var(--ease),
    border-color var(--dur-m) var(--ease);
}

.about-operating-card-group{
  background:var(--grad-hero);
  color:var(--text-on-dark);
}

.about-operating-card-business{
  background:var(--surface);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.about-operating-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;

  margin-bottom:2rem;
}

.about-operating-card-group .mono-tag{
  color:var(--accent-mint);
}

.about-operating-number{
  width:36px;
  height:36px;

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

  border:1px solid var(--border-strong);
  border-radius:50%;

  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--text-muted);
}

.about-operating-card-group .about-operating-number{
  color:var(--accent-mint);
  border-color:rgba(150,224,207,.28);
}

.about-operating-card h4{
  margin-bottom:1.5rem;
}

.about-operating-card-group h4{
  color:#fff;
}


/* =========================================================
   LIST
   ========================================================= */

.about-operating-card ul{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.about-operating-card li{
  display:flex;
  align-items:flex-start;
  gap:.8rem;

  font-size:.92rem;
  line-height:1.55;
}

.about-operating-card-group li{
  color:rgba(238,247,246,.78);
}

.about-operating-card-business li{
  color:var(--text-secondary);
}

.about-operating-card .dot{
  width:6px;
  height:6px;

  margin-top:.55rem;

  border-radius:50%;
  background:var(--accent);

  flex:0 0 6px;
}

.about-operating-card-group .dot{
  background:var(--accent-mint);
}


/* =========================================================
   CENTER CONNECTOR
   ========================================================= */

.about-operating-connector{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.75rem;

  position:relative;

  background:var(--surface-sunken);

  border-left:1px solid var(--border);
  border-right:1px solid var(--border);

  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.08em;
  color:var(--text-muted);
}

.about-operating-connector i{
  width:1px;
  height:55px;
  background:linear-gradient(
    to bottom,
    transparent,
    var(--accent),
    transparent
  );
}


/* =========================================================
   HOVER — SUBTLE ONLY
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  .about-operating-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-l);
    z-index:2;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

  .about-operating-model-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .about-operating-grid{
    grid-template-columns:1fr;
  }

  .about-operating-connector{
    min-height:60px;

    flex-direction:row;

    border-left:0;
    border-right:0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }

  .about-operating-connector i{
    width:55px;
    height:1px;

    background:linear-gradient(
      to right,
      transparent,
      var(--accent),
      transparent
    );
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){

  .about-group-intro{
    margin-bottom:3rem;
  }

  .about-operating-card{
    padding:1.4rem;
  }

  .about-operating-card-top{
    margin-bottom:1.5rem;
  }

  .about-operating-card li{
    font-size:.86rem;
  }

  .about-operating-label{
    display:none;
  }

}
/* =========================================================
   HOME HERO — USE ABOUT PAGE HERO STYLE
   ========================================================= */

.home-page-hero {
    position: relative;
    overflow: hidden;
}

/* Keep About hero styling intact */
.home-page-hero .container {
    position: relative;
    z-index: 2;
}

/* Home hero text spacing */
.home-page-hero h1 {
    max-width: 900px;
    margin-bottom: 1.25rem;
}

/* Home hero paragraphs */
.home-page-hero .lede {
    max-width: 760px;
    margin-bottom: 1rem;
}

/* CTA row */
.home-page-hero .hero-ctas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.6rem;
}

/* Small supporting line */
.home-page-hero .hero-micro {
    margin-top: 1.15rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    opacity: 0.72;
}

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

@media (max-width: 768px) {

    .home-page-hero {
        min-height: auto;
    }

    .home-page-hero h1 {
        max-width: 100%;
        font-size: clamp(2.25rem, 8vw, 3.5rem);
        line-height: 1.05;
    }

    .home-page-hero .lede {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.65;
    }

    .home-page-hero .hero-ctas {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .home-page-hero .hero-ctas .btn {
        width: 100%;
        justify-content: center;
    }

    .home-page-hero .hero-micro {
        line-height: 1.5;
    }
}

@media (max-width: 480px) {

    .home-page-hero h1 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .home-page-hero .lede {
        font-size: 0.95rem;
    }
}
/* =========================================================
   HOME HERO — EXACTLY MATCH ABOUT HERO
   REMOVE SIDE FADE / WHITE SHADOW
   ========================================================= */

.home-page-hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;

    /* Do not create another background on Home */
    background-color: transparent !important;

    /* Same full-width behavior as About */
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   REMOVE ALL HOME HERO SIDE EFFECTS
   --------------------------------------------------------- */

.home-page-hero::before,
.home-page-hero::after {
    content: none !important;
    display: none !important;

    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
}

/* Remove possible effects from inner container */
.home-page-hero > .container::before,
.home-page-hero > .container::after {
    content: none !important;
    display: none !important;

    background: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
}

/* ---------------------------------------------------------
   HERO CONTENT
   --------------------------------------------------------- */

.home-page-hero > .container {
    position: relative !important;
    z-index: 3 !important;

    width: 100% !important;
    max-width: 1200px;

    margin-left: auto !important;
    margin-right: auto !important;

    background: transparent !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   HEADLINE
   --------------------------------------------------------- */

.home-page-hero h1 {
    position: relative;
    z-index: 4;

    max-width: 900px;
    margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------
   PARAGRAPHS
   --------------------------------------------------------- */

.home-page-hero .lede {
    position: relative;
    z-index: 4;

    max-width: 760px;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.home-page-hero .hero-ctas {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.85rem;
    margin-top: 1.6rem;
}

/* ---------------------------------------------------------
   MICRO TEXT
   --------------------------------------------------------- */

.home-page-hero .hero-micro {
    position: relative;
    z-index: 4;

    margin-top: 1.15rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    opacity: 0.72;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .home-page-hero {
        width: 100% !important;
        min-height: auto !important;

        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .home-page-hero > .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .home-page-hero h1 {
        max-width: 100%;

        font-size: clamp(2.25rem, 8vw, 3.5rem);
        line-height: 1.05;
    }

    .home-page-hero .lede {
        max-width: 100%;

        font-size: 1rem;
        line-height: 1.65;
    }

    .home-page-hero .hero-ctas {
        width: 100%;

        flex-direction: column;
        align-items: stretch;
    }

    .home-page-hero .hero-ctas .btn {
        width: 100%;
        justify-content: center;
    }

    .home-page-hero .hero-micro {
        line-height: 1.5;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .home-page-hero h1 {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }

    .home-page-hero .lede {
        font-size: 0.95rem;
    }
}
/* =========================================================
   FINAL FIX — OPERATING PRINCIPLES MARQUEE
   Remove white/faded side overlays
   Keep cards fully visible
   ========================================================= */

.principles-marquee {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    isolation: isolate;
}

/* REMOVE THE WHITE FADE COMPLETELY */
.principles-marquee::before,
.principles-marquee::after {
    display: none !important;
    content: none !important;
}
/* =========================================================
   FINAL FIX — TRUE CONTINUOUS OPERATING PRINCIPLES MARQUEE
   No blank space at loop point
   Smooth on desktop + mobile
   ========================================================= */

.principles-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;

    width: max-content;
    max-width: none;

    /* IMPORTANT:
       Keep the same gap between every card */
    gap: 1rem;
    margin: 0;

    animation: principles-scroll 18s linear infinite;

    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Every card keeps its fixed width */
.principles-grid .principle-card {
    flex: 0 0 clamp(215px, 23vw, 285px);
    min-width: 0;
    overflow: hidden;
}

/* =========================================================
   TRUE SEAMLESS LOOP
   HTML MUST contain:

   SET 1:
   1 2 3 4 5 6

   SET 2:
   1 2 3 4 5 6

   The second set immediately follows the first.
   ========================================================= */

@keyframes principles-scroll {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(
            calc(-50% - 0.5rem),
            0,
            0
        );
    }
}
/* Keep every card inside its own size */
.principles-grid .principle-card {
    flex: 0 0 clamp(215px, 23vw, 285px);
    min-width: 0;
    overflow: hidden;
}
/* =========================================================
   RESPONSIVE MARQUEE SPEED
   ========================================================= */

/* Desktop */
@media (min-width: 1081px) {
    .principles-grid {
        animation-duration: 18s;
    }
}

/* Tablet */
@media (max-width: 1080px) and (min-width: 641px) {
    .principles-grid {
        animation-duration: 24s;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .principles-grid {
        animation-duration: 32s;
    }
}

/* Small phones */
@media (max-width: 380px) {
    .principles-grid {
        animation-duration: 36s;
    }
}

/* Very small phones */
@media (max-width: 320px) {
    .principles-grid {
        animation-duration: 40s;
    }
}
/* Small phones */
@media (max-width: 380px) {
    .principles-grid .principle-card {
        flex-basis: 205px;
    }
}
 /* =========================================================
    FINAL FIX — HOME OUR BUSINESSES SECTION
    Full-width + proper heading/button alignment
    ========================================================= */

.home-businesses {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Make the section's main container use the full width */
.home-businesses > .container {
    width: 100% !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1.25rem, 4vw, 3rem) !important;
    padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}

/* Keep heading area wide */
.home-businesses .section-head,
.home-businesses .section-head.split {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 2rem !important;
}

/* Heading must get enough room */
.home-businesses .section-head > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 760px !important;
}

/* Portfolio button stays on the right */
.home-businesses .section-head > a,
.home-businesses .section-head .btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

/* Business cards remain full width */
.home-businesses .home-business-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Prevent anything inside from creating horizontal overflow */
.home-businesses *,
.home-businesses *::before,
.home-businesses *::after {
    min-width: 0;
}

/* Tablet */
@media (max-width: 900px) {

    .home-businesses .section-head,
    .home-businesses .section-head.split {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .home-businesses .section-head > a,
    .home-businesses .section-head .btn {
        margin-left: 0 !important;
    }

    .home-businesses .home-business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 640px) {

    .home-businesses > .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .home-businesses .section-head,
    .home-businesses .section-head.split {
        gap: 1.5rem !important;
    }

    .home-businesses .section-head > div:first-child {
        max-width: 100% !important;
    }

    .home-businesses .home-business-grid {
        grid-template-columns: 1fr !important;
    }

    .home-businesses .section-head > a,
    .home-businesses .section-head .btn {
        width: auto !important;
        max-width: 100% !important;
    }
}
/* =========================================================
   HOME PAGE HERO — INDEPENDENT BACKGROUND
   This affects ONLY index.php
   ========================================================= */

.page-hero.home-page-hero {
    position: relative;
    isolation: isolate;

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.34) 48%,
            rgba(0, 0, 0, 0.18) 100%
        ),
        url("../assests/hero.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    min-height: clamp(560px, 78vh, 820px);

    display: flex;
    align-items: center;

    overflow: hidden;
}


/* Home hero content */
.page-hero.home-page-hero .container {
    position: relative;
    z-index: 2;
}


/* Make Home hero text readable */
.page-hero.home-page-hero h1,
.page-hero.home-page-hero .lede,
.page-hero.home-page-hero .hero-micro,
.page-hero.home-page-hero .eyebrow {
    position: relative;
    z-index: 2;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .page-hero.home-page-hero {
        min-height: 680px;

        background-position: center center;
    }
}


@media (max-width: 767px) {

    .page-hero.home-page-hero {
        min-height: 700px;

        background-image:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.38) 55%,
                rgba(0, 0, 0, 0.58) 100%
            ),
            url("../assests/hero.png");

        background-size: cover;
        background-position: center center;
    }
}



@media (max-width: 480px) {

    .page-hero.home-page-hero {
        min-height: 720px;

        background-position: 55% center;
    }
}
/* =========================================================
   OUR BUSINESS — PREMIUM RESPONSIVE STACK
   FINAL SINGLE SYSTEM
   ========================================================= */

.biz-grid.biz-stack{
  --biz-top:clamp(70px,8vh,88px);
  --biz-gap:clamp(72px,11vh,150px);

  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;

  width:100% !important;
  max-width:1240px !important;
  margin-inline:auto !important;

  overflow:visible !important;
  position:relative;
}


/* =========================================================
   BASE CARD
   ========================================================= */

.biz-grid.biz-stack > .biz-card{
  position:sticky !important;
  top:var(--biz-top) !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 0 var(--biz-gap) !important;
  padding:0 !important;

  overflow:hidden !important;
  isolation:isolate !important;

  opacity:1 !important;
  transform:none !important;

  border:1px solid var(--border-strong) !important;
  border-radius:clamp(18px,2vw,28px) !important;

  background:
    linear-gradient(
      135deg,
      var(--surface) 0%,
      color-mix(
        in srgb,
        var(--surface) 96%,
        var(--accent-soft)
      ) 52%,
      var(--surface) 100%
    ) !important;

  box-shadow:none !important;

  scroll-margin-top:var(--biz-top);

  transition:
    border-color .35s var(--ease),
    background .35s var(--ease);
}


/* =========================================================
   DARK THEME
   ========================================================= */

[data-theme="dark"] .biz-grid.biz-stack > .biz-card{
  background:
    linear-gradient(
      135deg,
      #122c35 0%,
      #15343e 50%,
      #102a33 100%
    ) !important;

  border-color:
    rgba(150,224,207,.22) !important;
}

[data-theme="dark"]
.biz-grid.biz-stack
.biz-card-copy h3{
  color:var(--text-primary) !important;
}

[data-theme="dark"]
.biz-grid.biz-stack
.biz-card-copy > p{
  color:var(--text-secondary) !important;
}

[data-theme="dark"]
.biz-grid.biz-stack
.biz-card-body{
  background:
    linear-gradient(
      90deg,
      #102a33 0%,
      #122c35 100%
    ) !important;

  border-top-color:
    rgba(150,224,207,.14) !important;
}

[data-theme="dark"]
.biz-grid.biz-stack
.biz-card-foot{
  background:#102a33 !important;

  border-top-color:
    rgba(150,224,207,.14) !important;
}


/* =========================================================
   STACK ORDER
   LATER CARDS COVER EARLIER CARDS
   Supports all 10 business cards
   ========================================================= */

.biz-grid.biz-stack > .biz-card:nth-child(1){
  z-index:1 !important;
}

.biz-grid.biz-stack > .biz-card:nth-child(2){
  z-index:2 !important;
}

.biz-grid.biz-stack > .biz-card:nth-child(3){
  z-index:3 !important;
}

.biz-grid.biz-stack > .biz-card:nth-child(4){
  z-index:4 !important;
}

.biz-grid.biz-stack > .biz-card:nth-child(5){
  z-index:5 !important;
}

.biz-grid.biz-stack > .biz-card:nth-child(6){
  z-index:6 !important;
}

.biz-grid.biz-stack > .biz-card:nth-child(7){
  z-index:7 !important;
}

.biz-grid.biz-stack > .biz-card:nth-child(8){
  z-index:8 !important;
}

.biz-grid.biz-stack > .biz-card:nth-child(9){
  z-index:9 !important;
}

/* Veeraj Associates — new 10th card */
.biz-grid.biz-stack > .biz-card:nth-child(10){
  z-index:10 !important;
}


/* =========================================================
   PREMIUM TOP LINE
   ========================================================= */

.biz-grid.biz-stack > .biz-card::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--accent),
      var(--accent-mint)
    );

  z-index:20;

  pointer-events:none;
}


/* =========================================================
   DESKTOP CARD STRUCTURE
   CONTENT | IMAGE
   ========================================================= */

@media (min-width:901px){

  .biz-grid.biz-stack > .biz-card{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    grid-template-rows:
      auto auto auto !important;

    align-items:stretch !important;
  }

  .biz-grid.biz-stack .biz-card-top{
    display:contents !important;
  }


  /* -------------------------
     CONTENT
     ------------------------- */

  .biz-grid.biz-stack .biz-card-copy{
    grid-column:1 !important;
    grid-row:1 !important;

    width:100% !important;
    min-width:0 !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    padding:
      clamp(2rem,4vw,4rem)
      clamp(2rem,4.5vw,4.5rem) !important;
  }


  /* -------------------------
     IMAGE
     ------------------------- */

  .biz-grid.biz-stack .biz-card-image{
    grid-column:2 !important;
    grid-row:1 / span 3 !important;

    width:100% !important;
    min-width:0 !important;

    height:100% !important;
    min-height:520px !important;

    overflow:hidden !important;

    background:
      var(--surface-sunken);
  }

  .biz-grid.biz-stack .biz-card-image img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    min-height:520px !important;

    object-fit:cover !important;
    object-position:center !important;

    transform:scale(1.01);

    transition:
      transform .8s var(--ease);
  }


  /* -------------------------
     CORE FOCUS
     ------------------------- */

  .biz-grid.biz-stack .biz-card-body{
    grid-column:1 !important;
    grid-row:2 !important;

    width:100% !important;
    min-width:0 !important;

    padding:
      1.25rem
      clamp(2rem,4.5vw,4.5rem) !important;

    border-top:
      1px solid var(--border);

    background:
      linear-gradient(
        90deg,
        color-mix(
          in srgb,
          var(--surface) 96%,
          var(--accent-soft)
        ),
        var(--surface)
      );
  }


  /* -------------------------
     EXPLORE
     ------------------------- */

  .biz-grid.biz-stack .biz-card-foot{
    grid-column:1 !important;
    grid-row:3 !important;

    width:100% !important;
    min-width:0 !important;

    min-height:64px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    padding:
      .7rem
      clamp(2rem,4.5vw,4.5rem) !important;

    border-top:
      1px solid var(--border);

    background:
      var(--surface);
  }


  /* =======================================================
     EVEN CARD
     IMAGE | CONTENT
     ======================================================= */

  .biz-grid.biz-stack
  > .biz-card:nth-child(even)
  .biz-card-copy{
    grid-column:2 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(even)
  .biz-card-image{
    grid-column:1 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(even)
  .biz-card-body{
    grid-column:2 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(even)
  .biz-card-foot{
    grid-column:2 !important;
  }
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.biz-grid.biz-stack .biz-sector-tag{
  display:inline-flex !important;
  align-items:center;

  width:max-content;
  max-width:100%;

  margin-bottom:1rem;

  font-family:var(--font-mono);

  font-size:.68rem;
  line-height:1.35;

  letter-spacing:.08em;
  text-transform:uppercase;

  overflow-wrap:anywhere;
}


.biz-grid.biz-stack .biz-card-copy h3{
  width:100%;
  max-width:650px;

  margin:0 0 1rem;

  font-family:var(--font-display);

  font-size:
    clamp(1.6rem,3vw,2.8rem);

  line-height:1.08;
  letter-spacing:-.03em;

  overflow-wrap:anywhere;
}


.biz-grid.biz-stack .biz-card-copy > p{
  width:100%;
  max-width:600px;

  margin:0;

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

  font-size:
    clamp(.92rem,1vw,1rem);

  line-height:1.7;

  overflow-wrap:anywhere;
}


/* =========================================================
   CORE FOCUS
   ========================================================= */

.biz-grid.biz-stack .biz-card-body{
  display:flex !important;
  flex-direction:column !important;

  width:100% !important;
  min-width:0 !important;

  margin:0 !important;
}


.biz-grid.biz-stack .focus-label{
  display:block !important;

  margin:0 0 .35rem;

  font-family:var(--font-mono);

  font-size:.65rem;
  line-height:1.3;

  letter-spacing:.11em;
  text-transform:uppercase;

  color:var(--accent);
}


.biz-grid.biz-stack .focus-text{
  display:block !important;

  width:100% !important;
  max-width:900px !important;

  margin:0 !important;

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

  font-size:.86rem;
  line-height:1.6;

  overflow-wrap:anywhere;
}


/* =========================================================
   EXPLORE
   ========================================================= */

.biz-grid.biz-stack .biz-card-foot a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  gap:.5rem;

  max-width:100%;

  color:var(--accent);

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

  font-size:.88rem;
  font-weight:700;

  white-space:nowrap;

  transition:
    color .3s var(--ease),
    gap .3s var(--ease);
}


.biz-grid.biz-stack .biz-card-foot svg{
  width:17px;
  height:17px;

  flex-shrink:0;

  transition:
    transform .3s var(--ease);
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  .biz-grid.biz-stack > .biz-card:hover{
    border-color:
      var(--accent) !important;

    box-shadow:none !important;
  }

  .biz-grid.biz-stack
  > .biz-card:hover
  .biz-card-image img{
    transform:scale(1.035);
  }

  .biz-grid.biz-stack
  .biz-card-foot a:hover{
    gap:.75rem;
    color:var(--accent-strong);
  }

  .biz-grid.biz-stack
  .biz-card-foot a:hover svg{
    transform:translateX(3px);
  }
}


/* =========================================================
   TABLET
   641px — 900px
   ========================================================= */

@media (max-width:900px) and (min-width:641px){

  .biz-grid.biz-stack{
    --biz-top:70px;
    --biz-gap:12vh;
  }

  .biz-grid.biz-stack > .biz-card{
    border-radius:22px !important;
  }

  .biz-grid.biz-stack .biz-card-top{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;
  }

  .biz-grid.biz-stack .biz-card-copy{
    min-width:0 !important;

    padding:2rem !important;
  }

  .biz-grid.biz-stack .biz-card-copy h3{
    font-size:
      clamp(1.45rem,3.5vw,2.2rem);
  }

  .biz-grid.biz-stack .biz-card-image{
    min-height:360px !important;
  }

  .biz-grid.biz-stack
  .biz-card-image img{
    width:100% !important;
    height:100% !important;

    min-height:360px !important;

    object-fit:cover !important;
  }

  .biz-grid.biz-stack .biz-card-body{
    padding:
      1.1rem 2rem !important;
  }

  .biz-grid.biz-stack .biz-card-foot{
    padding:
      .7rem 2rem !important;
  }
}


/* =========================================================
   MOBILE
   0 — 640px
   ========================================================= */

@media (max-width:640px){

  .biz-grid.biz-stack{
    --biz-top:58px;
    --biz-gap:10vh;
  }

  .biz-grid.biz-stack > .biz-card{
    border-radius:18px !important;

    overflow:hidden !important;
  }


.biz-grid.biz-stack .biz-card-top{
  display:grid !important;

  grid-template-columns:minmax(0,1fr) !important;

  width:100% !important;
  min-width:0 !important;

  position:relative !important;
}

  /* -------------------------
     ODD CARDS
     CONTENT → FOCUS → EXPLORE → IMAGE
     ------------------------- */

  .biz-grid.biz-stack
  > .biz-card:nth-child(odd)
  .biz-card-copy{
    order:1 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(odd)
  .biz-card-body{
    order:2 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(odd)
  .biz-card-foot{
    order:3 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(odd)
  .biz-card-image{
    order:4 !important;
  }


  /* -------------------------
     EVEN CARDS
     IMAGE → CONTENT → FOCUS → EXPLORE
     ------------------------- */

  .biz-grid.biz-stack
  > .biz-card:nth-child(even)
  .biz-card-image{
    order:1 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(even)
  .biz-card-copy{
    order:2 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(even)
  .biz-card-body{
    order:3 !important;
  }

  .biz-grid.biz-stack
  > .biz-card:nth-child(even)
  .biz-card-foot{
    order:4 !important;
  }


.biz-grid.biz-stack .biz-card-copy{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  padding:
    1.5rem 1.25rem !important;

  grid-column:1 !important;
  grid-row:1 !important;

  position:relative !important;
}

  .biz-grid.biz-stack .biz-card-copy h3{
  width:100% !important;
  max-width:100% !important;

  margin:0 !important;

  /*
   * Keep space on the right for Explore
   */
  padding-right:
    clamp(5.5rem,24vw,7rem) !important;

  font-size:
    clamp(1.3rem,6.5vw,1.8rem) !important;

  line-height:1.08 !important;
  letter-spacing:-.02em !important;

  text-align:left !important;

  overflow-wrap:anywhere !important;
}

  .biz-grid.biz-stack .biz-card-copy > p{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:.84rem !important;
    line-height:1.62 !important;

    text-align:left !important;

    overflow-wrap:anywhere !important;
  }


  /* -------------------------
     SECTOR
     ------------------------- */

  .biz-grid.biz-stack .biz-sector-tag{
    max-width:100% !important;

    margin-bottom:.85rem;

    font-size:.61rem;

    line-height:1.4;

    padding:.4rem .65rem;

    white-space:normal;
  }


  /* -------------------------
     IMAGE
     ------------------------- */

  .biz-grid.biz-stack .biz-card-image{
    width:100% !important;
    max-width:100% !important;

    height:
      clamp(210px,58vw,270px) !important;

    min-height:0 !important;

    overflow:hidden !important;
  }

  .biz-grid.biz-stack
  .biz-card-image img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    min-height:0 !important;

    object-fit:cover !important;
    object-position:center !important;
  }


  /* -------------------------
     CORE FOCUS
     ------------------------- */

  .biz-grid.biz-stack .biz-card-body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    padding:
      1rem 1.25rem !important;

    border-top:
      1px solid var(--border) !important;
  }

  .biz-grid.biz-stack .focus-label{
    display:block !important;

    margin:0 0 .35rem !important;

    text-align:left !important;
  }

  .biz-grid.biz-stack .focus-text{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:.79rem !important;
    line-height:1.58 !important;

    text-align:left !important;

    overflow-wrap:anywhere !important;
  }


  .biz-grid.biz-stack .biz-card-foot{
  width:auto !important;
  max-width:max-content !important;
  min-width:0 !important;

  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;

  /*
   * Same row as company name
   */
  grid-column:1 !important;
  grid-row:1 !important;

  align-self:start !important;
  justify-self:end !important;

  border:0 !important;

  background:transparent !important;

  z-index:5 !important;
}
  .biz-grid.biz-stack .biz-card-foot a{
    display:inline-flex !important;

    align-items:center !important;
    justify-content:flex-start !important;

    gap:.4rem !important;

    padding:0 !important;

    font-size:.82rem !important;
    line-height:1.2 !important;

    white-space:nowrap !important;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width:380px){

  .biz-grid.biz-stack{
    --biz-top:52px;
    --biz-gap:70px;
  }

  .biz-grid.biz-stack > .biz-card{
    border-radius:16px !important;
  }

  .biz-grid.biz-stack .biz-card-copy{
    padding:
      1.25rem 1rem !important;
  }

  .biz-grid.biz-stack .biz-card-copy h3{
    font-size:
      clamp(1.2rem,7vw,1.55rem) !important;
  }

  .biz-grid.biz-stack .biz-card-copy > p{
    font-size:.78rem !important;
    line-height:1.58 !important;
  }

  .biz-grid.biz-stack .biz-card-image{
    height:200px !important;
  }

  .biz-grid.biz-stack .biz-card-body{
    padding:
      .9rem 1rem !important;
  }

  .biz-grid.biz-stack .biz-card-foot{
    min-height:54px !important;

    padding:
      .6rem 1rem !important;
  }

  .biz-grid.biz-stack .focus-text{
    font-size:.76rem !important;
  }
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width:320px){

  .biz-grid.biz-stack > .biz-card{
    width:100% !important;
    max-width:100% !important;
  }

  .biz-grid.biz-stack .biz-card-copy,
  .biz-grid.biz-stack .biz-card-body,
  .biz-grid.biz-stack .biz-card-foot{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .biz-grid.biz-stack .biz-card-copy h3{
    font-size:1.16rem !important;
  }

  .biz-grid.biz-stack .biz-card-copy > p,
  .biz-grid.biz-stack .focus-text{
    font-size:.73rem !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .biz-grid.biz-stack > .biz-card{
    position:relative !important;
    top:auto !important;

    margin-bottom:2rem !important;
  }

  .biz-grid.biz-stack .biz-card-image img,
  .biz-grid.biz-stack .biz-card-foot a,
  .biz-grid.biz-stack .biz-card-foot svg{
    transition:none !important;
  }
}
/* =========================================================
   GOVERNANCE — GROUP COMMITMENT
   LIGHT + DARK THEME CARD HIGHLIGHT
   ========================================================= */

.governance-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5faf8 55%,
      #eaf6f1 100%
    ) !important;

  border:1px solid var(--border) !important;

  box-shadow:
    0 6px 20px rgba(15,42,52,.06),
    inset 0 1px 0 rgba(255,255,255,.75) !important;

  transition:
    transform .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease),
    box-shadow .4s var(--ease);
}


/* =========================================================
   DARK THEME
   ========================================================= */

[data-theme="dark"] .governance-card{
  background:
    linear-gradient(
      135deg,
      #163640 0%,
      #122c35 52%,
      #0b222b 100%
    ) !important;

  border-color:
    rgba(150,224,207,.20) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(150,224,207,.10) !important;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.governance-card-content{
  position:relative;
  z-index:2;
}

.governance-card h4{
  position:relative;
  z-index:2;
  color:var(--text-primary) !important;
}

.governance-card p{
  position:relative;
  z-index:2;
  color:var(--text-secondary) !important;
}


/* =========================================================
   DARK THEME TEXT
   ========================================================= */

[data-theme="dark"] .governance-card h4{
  color:#f2fbf9 !important;
}

[data-theme="dark"] .governance-card p{
  color:#b9d3d6 !important;
}


/* =========================================================
   SOFT CARD LIGHT
   ========================================================= */

.governance-card::after{
  content:"";

  position:absolute;
  width:190px;
  height:190px;

  right:-90px;
  bottom:-100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(21,161,119,.14) 0%,
      rgba(21,161,119,.05) 40%,
      transparent 72%
    );

  pointer-events:none;
  z-index:0;
}


/* DARK THEME LIGHT */

[data-theme="dark"] .governance-card::after{
  background:
    radial-gradient(
      circle,
      rgba(63,214,168,.16) 0%,
      rgba(63,214,168,.06) 40%,
      transparent 72%
    );
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  .governance-card:hover{
    transform:translateY(-7px);

    border-color:
      var(--accent) !important;

    box-shadow:
      0 18px 38px rgba(15,42,52,.12),
      0 0 0 1px rgba(21,161,119,.10),
      inset 0 1px 0 rgba(255,255,255,.8) !important;
  }


  [data-theme="dark"] .governance-card:hover{
    background:
      linear-gradient(
        135deg,
        #1a414b 0%,
        #14343e 50%,
        #0d2932 100%
      ) !important;

    border-color:
      rgba(63,214,168,.60) !important;

    box-shadow:
      0 18px 40px rgba(0,0,0,.38),
      0 0 24px rgba(63,214,168,.08),
      inset 0 1px 0 rgba(150,224,207,.14) !important;
  }


  .governance-card:hover::after{
    transform:scale(1.2);
  }


  .governance-card:hover h4{
    color:var(--accent) !important;
    transform:translateX(3px);
  }


  [data-theme="dark"] .governance-card:hover h4{
    color:#6be3c1 !important;
  }


  .governance-card:hover p{
    color:var(--text-primary) !important;
  }


  [data-theme="dark"] .governance-card:hover p{
    color:#dcefed !important;
  }


  .governance-card:hover::before{
    transform:scaleX(1) !important;
  }
}
/* =========================================================
   LEADERSHIP & GOVERNANCE NAVIGATION
   ========================================================= */

html {
    scroll-behavior: smooth;
}

#leadership,
#governance {
    scroll-margin-top: 90px;
}
/* =========================================================
   GOVERNANCE + LEADERSHIP — HOMEPAGE SECTIONS
   ========================================================= */

html {
  scroll-behavior: smooth;
}

#governance,
#leadership {
  scroll-margin-top: 100px;
}

/* Keep these sections free from page-hero styling */
.governance-section,
.leadership-section {
  position: relative;
  width: 100%;
}

.governance-section {
  padding-top: clamp(5rem, 9vw, 8rem);
}

.leadership-section {
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
}


/* Governance intro */
.governance-intro {
  margin-top: 3rem;
}

.governance-intro-copy {
  max-width: 900px;
}

.governance-approach-eyebrow {
  display: inline-block;
  margin-bottom: .85rem;
}

.governance-approach-title {
  max-width: 820px;
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.governance-approach-description {
  max-width: 800px;
  margin-bottom: 0;
}

.governance-statement {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin-top: 3rem;
}

.governance-statement-line {
  width: 4px;
  min-height: 100%;
  border-radius: 99px;
  background: linear-gradient(
    to bottom,
    #15a177,
    #96e0cf
  );
}

.governance-statement p {
  margin: .8rem 0 0;
  max-width: 760px;
  line-height: 1.75;
}


/* Governance cards */
.governance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 3rem;
}

.governance-card {
  min-width: 0;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid rgba(63,214,168,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.governance-card-content h4 {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.governance-card-content p {
  margin: 0;
  line-height: 1.65;
}


/* Governance documentation */
.governance-documentation {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.governance-doc-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.governance-doc-intro h2 {
  margin-top: .75rem;
}

.governance-documents {
  display: grid;
  gap: .75rem;
}

.governance-document {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(127,127,127,.18);
}

.document-number {
  font-family: var(--font-mono);
  font-size: .75rem;
  opacity: .6;
}


/* Leadership */
.leadership-intro {
  max-width: 900px;
  margin: 0 auto 4rem;
  text-align: center;
}

.leadership-eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
}

.leadership-heading {
  margin: 0 auto 1.25rem;
  max-width: 820px;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.leadership-description {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.8;
}


/* Responsive */
@media (max-width: 991px) {

  .governance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .governance-doc-layout {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 700px) {

  #governance,
  #leadership {
    scroll-margin-top: 80px;
  }

  .governance-grid {
    grid-template-columns: 1fr;
  }

  .governance-intro {
    margin-top: 2.25rem;
  }

  .governance-approach-title {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }

  .governance-statement {
    gap: 1rem;
    margin-top: 2rem;
  }

  .leadership-intro {
    margin-bottom: 2.5rem;
    padding-inline: .25rem;
  }

  .leadership-heading {
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1.12;
  }

  .leadership-description {
    font-size: .98rem;
    line-height: 1.7;
  }
}


@media (max-width: 380px) {

  .governance-card {
    padding: 1.2rem;
  }

  .governance-document {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}


@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .governance-card {
    transition: none !important;
  }
}
/* =========================================================
   OUR BUSINESS — FINAL RESPONSIVE + NAVIGATION SAFETY
   Desktop layout remains unchanged
   ========================================================= */

/* Smooth navigation with fixed-header protection */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

/* Business stack */
.biz-grid.biz-stack {
  --biz-header-offset: 76px;
  --biz-gap: clamp(70px, 10vh, 140px);

  width: 100%;
  max-width: 1240px;
  min-width: 0;

  margin-inline: auto;

  overflow: visible;
}

/* Every business card */
.biz-grid.biz-stack > .biz-card {
  scroll-margin-top: var(--biz-header-offset);

  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow: hidden;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) and (min-width: 641px) {

  html {
    scroll-padding-top: 70px;
  }

  .biz-grid.biz-stack {
    --biz-header-offset: 70px;
    --biz-gap: clamp(70px, 10vh, 110px);
  }

  .biz-grid.biz-stack > .biz-card {
    scroll-margin-top: var(--biz-header-offset);
  }

  .biz-grid.biz-stack .biz-card-copy,
  .biz-grid.biz-stack .biz-card-body,
  .biz-grid.biz-stack .biz-card-foot,
  .biz-grid.biz-stack .biz-card-image {
    min-width: 0;
    max-width: 100%;
  }

  .biz-grid.biz-stack .biz-card-copy h3,
  .biz-grid.biz-stack .biz-card-copy > p,
  .biz-grid.biz-stack .focus-text {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  html {
    scroll-padding-top: 64px;
  }

  .biz-grid.biz-stack {
    --biz-header-offset: 64px;
    --biz-gap: clamp(60px, 9vh, 90px);
  }

  .biz-grid.biz-stack > .biz-card {
    scroll-margin-top: var(--biz-header-offset);

    width: 100%;
    max-width: 100%;
    min-width: 0;

    border-radius: 18px;
    overflow: hidden;
  }

  /* Keep the company heading + Explore in one clean row */
  .biz-grid.biz-stack .biz-card-copy {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding:
      1.35rem 1.1rem
      1.25rem !important;
  }

  .biz-grid.biz-stack .biz-card-copy h3 {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    /*
      Reserve only the space actually required
      for the Explore link.
    */
    padding-right: clamp(5.25rem, 23vw, 6.5rem) !important;

    font-size: clamp(1.25rem, 6vw, 1.65rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.02em !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Explore stays beside company name */
  .biz-grid.biz-stack .biz-card-foot {
    position: absolute !important;

    top: 1.35rem !important;
    right: 1.1rem !important;

    width: auto !important;
    max-width: calc(100% - 1.1rem) !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    border: 0 !important;
    background: transparent !important;

    z-index: 10 !important;
  }

  .biz-grid.biz-stack .biz-card-foot a {
    display: inline-flex !important;
    align-items: center !important;

    gap: .35rem !important;

    padding: .15rem 0 !important;

    font-size: .78rem !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
  }

  .biz-grid.biz-stack .biz-card-foot svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  /* Prevent image/content from ever exceeding viewport */
  .biz-grid.biz-stack .biz-card-image,
  .biz-grid.biz-stack .biz-card-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .biz-grid.biz-stack .biz-card-image {
    height: clamp(210px, 58vw, 270px) !important;
  }

  .biz-grid.biz-stack .biz-card-image img {
    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    object-fit: cover !important;
    object-position: center !important;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  html {
    scroll-padding-top: 60px;
  }

  .biz-grid.biz-stack {
    --biz-header-offset: 60px;
    --biz-gap: 65px;
  }

  .biz-grid.biz-stack > .biz-card {
    scroll-margin-top: 60px;
    border-radius: 16px;
  }

  .biz-grid.biz-stack .biz-card-copy {
    padding:
      1.2rem 1rem
      1.15rem !important;
  }

  .biz-grid.biz-stack .biz-card-copy h3 {
    padding-right: 5rem !important;

    font-size: clamp(1.15rem, 7vw, 1.45rem) !important;
    line-height: 1.12 !important;
  }

  .biz-grid.biz-stack .biz-card-foot {
    top: 1.2rem !important;
    right: 1rem !important;

    /*
      IMPORTANT:
      Do NOT restore width:100%.
      Keep Explore compact beside the title.
    */
    width: auto !important;
    max-width: max-content !important;
  }

  .biz-grid.biz-stack .biz-card-foot a {
    font-size: .75rem !important;
  }

  .biz-grid.biz-stack .biz-card-image {
    height: 200px !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 320px) {

  html {
    scroll-padding-top: 58px;
  }

  .biz-grid.biz-stack {
    --biz-header-offset: 58px;
  }

  .biz-grid.biz-stack > .biz-card {
    scroll-margin-top: 58px;
  }

  .biz-grid.biz-stack .biz-card-copy h3 {
    padding-right: 4.6rem !important;
    font-size: 1.12rem !important;
  }

  .biz-grid.biz-stack .biz-card-foot {
    top: 1.15rem !important;
    right: .9rem !important;

    width: auto !important;
    max-width: max-content !important;
  }

  .biz-grid.biz-stack .biz-card-foot a {
    font-size: .7rem !important;
    gap: .25rem !important;
  }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .biz-grid.biz-stack > .biz-card {
    position: relative !important;
    top: auto !important;
    scroll-margin-top: 0 !important;
    margin-bottom: 2rem !important;
  }
}
/* =========================================================
   HEADER + FOOTER — SAME DESIGN IN BOTH THEMES
   ========================================================= */

/* HEADER */

.site-header {
  background: #ffffff !important;
  color: #235468 !important;
  border-bottom-color: rgba(35, 84, 104, 0.12) !important;
}

.top-strip {
  background: #ffffff !important;
  color: #235468 !important;
  border-bottom-color: rgba(35, 84, 104, 0.08) !important;
}

.top-strip a {
  color: #235468 !important;
}

.top-strip .divider {
  color: #94abb3 !important;
}

.site-header .main-nav a {
  color: #235468 !important;
}

.site-header .main-nav a:hover,
.site-header .main-nav a.active {
  color: #15a177 !important;
}


/* HEADER LOGO — SAME IN BOTH THEMES */

.site-header .brand-logo {
  filter: none !important;
  opacity: 1 !important;
}


/* HEADER BUTTON */

.site-header .header-cta {
  color: #ffffff !important;
}


/* THEME TOGGLE ITSELF */

.site-header .theme-toggle {
  color: #235468;
}


/* =========================================================
   FOOTER — SAME DESIGN IN BOTH THEMES
   ========================================================= */

.site-footer {
  background: #ffffff !important;
  color: #0f2a34 !important;
  border-top-color: rgba(35, 84, 104, 0.10) !important;
}


/* FOOTER LOGO */

.site-footer .brand-logo {
  filter: none !important;
  opacity: 1 !important;
}


/* FOOTER BRAND TEXT */

.site-footer .footer-brand p {
  color: #526c75 !important;
}


/* FOOTER HEADINGS */

.site-footer .footer-col h5 {
  color: #395a65 !important;
}


/* EXPLORE LINKS */

.site-footer .footer-links a {
  color: #395a65 !important;
}

.site-footer .footer-links a:hover {
  color: #15a177 !important;
}


/* BUSINESS AREAS */

.site-footer .footer-business-list li {
  color: #526c75 !important;
}

.site-footer .footer-business-list li:hover {
  color: #0f2a34 !important;
}


/* CONTACT */

.site-footer .footer-contact-list a,
.site-footer .footer-contact-item {
  color: #395a65 !important;
}

.site-footer .footer-contact-list small,
.site-footer .footer-contact-item small {
  color: #6d8891 !important;
}


/* CONTACT ICON */

.site-footer .footer-contact-icon {
  background: #f2f7f7 !important;
  border-color: rgba(35, 84, 104, 0.12) !important;
  color: #15a177 !important;
}


/* CONTACT BUTTON */

.site-footer .footer-contact-btn {
  background: #f2f7f7 !important;
  border-color: rgba(35, 84, 104, 0.14) !important;
  color: #0f2a34 !important;
}

.site-footer .footer-contact-btn:hover {
  background: #e4f7f1 !important;
  border-color: rgba(21, 161, 119, 0.35) !important;
  color: #15a177 !important;
}


/* FOOTER BOTTOM */

.site-footer .footer-bottom {
  border-top-color: rgba(35, 84, 104, 0.10) !important;
}

.site-footer .footer-bottom small {
  color: #6d8891 !important;
}

.site-footer .footer-legal a {
  color: #6d8891 !important;
}

.site-footer .footer-legal a:hover {
  color: #15a177 !important;
}


/* =========================================================
   FORCE SAME FOOTER IN DARK MODE
   ========================================================= */

[data-theme="dark"] .site-footer,
[data-theme="dark"] .site-header {
  background: #ffffff !important;
  color: #235468 !important;
}

[data-theme="dark"] .top-strip {
  background: #0b252f !important;
  color: #eef7f6 !important;
  border-bottom-color: rgba(150, 224, 207, 0.12) !important;
}

[data-theme="dark"] .top-strip a {
  color: #eef7f6 !important;
}

[data-theme="dark"] .top-strip .divider {
  color: #78939b !important;
}

/* DARK MODE MUST NOT INVERT LOGO */

[data-theme="dark"] .site-header .brand-logo,
[data-theme="dark"] .site-footer .brand-logo {
  filter: none !important;
}


/* DARK MODE HEADER TEXT */

[data-theme="dark"] .site-header .main-nav a,
[data-theme="dark"] .top-strip a {
  color: #235468 !important;
}

[data-theme="dark"] .site-header .main-nav a:hover,
[data-theme="dark"] .site-header .main-nav a.active {
  color: #15a177 !important;
}


/* DARK MODE FOOTER TEXT */

[data-theme="dark"] .site-footer .footer-brand p {
  color: #526c75 !important;
}

[data-theme="dark"] .site-footer .footer-col h5 {
  color: #395a65 !important;
}

[data-theme="dark"] .site-footer .footer-links a {
  color: #395a65 !important;
}

[data-theme="dark"] .site-footer .footer-business-list li {
  color: #526c75 !important;
}

[data-theme="dark"] .site-footer .footer-contact-list a,
[data-theme="dark"] .site-footer .footer-contact-item {
  color: #395a65 !important;
}

[data-theme="dark"] .site-footer .footer-contact-list small,
[data-theme="dark"] .site-footer .footer-contact-item small {
  color: #6d8891 !important;
}

[data-theme="dark"] .site-footer .footer-bottom small,
[data-theme="dark"] .site-footer .footer-legal a {
  color: #6d8891 !important;
}
/* =========================================================
   CORPORATE TOP STRIP
   SAME DARK STYLE IN LIGHT + DARK THEME
   ========================================================= */

.top-strip {
  background: #0b252f !important;
  color: #eef7f6 !important;

  border-bottom: 1px solid rgba(150, 224, 207, 0.14) !important;

  font-family: "Inter", sans-serif !important;
}


/* TOP STRIP TEXT */

.top-strip span {
  color: #c8dadd !important;

  font-size: 0.72rem !important;
  font-weight: 500 !important;

  letter-spacing: 0.04em;
}


/* TOP STRIP LINKS */

.top-strip a {
  color: #eef7f6 !important;

  font-size: 0.72rem !important;
  font-weight: 600 !important;

  letter-spacing: 0.025em;

  text-decoration: none;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}


/* HOVER */

.top-strip a:hover {
  color: #96e0cf !important;
}


/* DIVIDER */

.top-strip .divider {
  color: rgba(150, 224, 207, 0.35) !important;

  font-weight: 400 !important;
}


/* =========================================================
   FORCE SAME STRIP IN DARK MODE
   ========================================================= */

[data-theme="dark"] .top-strip {
  background: #0b252f !important;
  color: #eef7f6 !important;

  border-bottom-color: rgba(150, 224, 207, 0.14) !important;
}

[data-theme="dark"] .top-strip span {
  color: #c8dadd !important;
}

[data-theme="dark"] .top-strip a {
  color: #eef7f6 !important;
}

[data-theme="dark"] .top-strip a:hover {
  color: #96e0cf !important;
}

[data-theme="dark"] .top-strip .divider {
  color: rgba(150, 224, 207, 0.35) !important;
}


/* =========================================================
   MOBILE TOP STRIP
   ========================================================= */

@media (max-width: 700px) {

  .top-strip span,
  .top-strip a {
    font-size: 0.66rem !important;
  }

}