/* ============================================================
   CARGO CHAIN TECHNOLOGIES — Production Stylesheet
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Colors */
  --navy: #0b1d33;
  --navy-soft: #132a43;
  --navy-deep: #071224;
  --gold: #ad8a3e;
  --gold-light: #d6bd84;
  --gold-muted: rgba(173, 138, 62, 0.15);
  --paper: #f7f5ef;
  --paper-warm: #f0ede6;
  --white: #ffffff;
  --slate: #4b5a6b;
  --slate-light: #6b7a8b;
  --muted: #828c97;
  --muted-light: #a0aab3;
  --line: rgba(11, 29, 51, 0.11);
  --line-dark: rgba(247, 245, 239, 0.14);
  --line-hover: rgba(11, 29, 51, 0.18);

  /* Typography */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 6rem;

  /* Layout */
  --maxw: 1200px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(11, 29, 51, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 29, 51, 0.06);
  --shadow-lg: 0 8px 24px rgba(11, 29, 51, 0.08);
  --shadow-xl: 0 16px 40px rgba(11, 29, 51, 0.12);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--navy);
  background: var(--paper);
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography Utilities ---------- */
.mono {
  font-family: var(--font-mono);
}

.muted {
  color: var(--muted);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 var(--space-md);
  }
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--space-md);
}

.eyebrow::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}

.eyebrow.on-dark {
  color: var(--gold-light);
}

.eyebrow.on-dark::before {
  background: var(--gold-light);
}

/* ---------- Headings ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--navy);
}

h1 {
  font-size: clamp(2rem, 4.2vw, 3.125rem);
}

h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
}

h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
}

h4 {
  font-size: 1rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: var(--navy);
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  border-color: rgba(247, 245, 239, 0.3);
  color: var(--white);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.btn-navy {
  background: var(--navy);
  color: var(--white);
}

.btn-navy:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 239, 0.92);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition-base);
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.brand:hover {
  opacity: 0.8;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--navy);
}

.brand-name span {
  color: var(--muted);
  font-weight: 400;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* Navigation Links */
nav.links {
  display: flex;
  gap: 2rem;
}

nav.links a {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--navy);
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--transition-fast);
}

nav.links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--gold);
  transition: right var(--transition-base);
}

nav.links a:hover::after,
nav.links a:focus-visible::after {
  right: 0;
}

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

/* Nav CTA */
.navcta {
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--navy);
  color: var(--white);
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  transition: all var(--transition-base);
}

.navcta:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 60;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  transition: all var(--transition-base);
  border-radius: 1px;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: absolute;
  top: 76px;
  left: 0;
  right: 0;
  background: rgba(247, 245, 239, 0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem;
  z-index: 55;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu a {
  font-size: 1rem;
  padding: 0.75rem 0;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  transition: color var(--transition-fast);
}

.mobile-menu a:hover {
  color: var(--gold);
}

.mobile-menu .navcta {
  margin-top: 0.5rem;
  text-align: center;
  display: block;
}

@media (max-width: 980px) {
  nav.links {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-menu.active {
    display: block;
  }
}

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

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78vh;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}

/* Background Image */

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Dark Overlay */

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(5, 17, 34, 0.90) 0%,
    rgba(5, 17, 34, 0.75) 45%,
    rgba(5, 17, 34, 0.40) 100%
  );
}

/* Wrapper */

.hero .wrap {
  position: relative;
  z-index: 2;
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* Hero Content */

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

/* ---------------------------------------
   Eyebrow
--------------------------------------- */

.hero .eyebrow {
  color: rgba(255,255,255,.75);
}

/* ---------------------------------------
   Badge
--------------------------------------- */

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  margin: 18px 0 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---------------------------------------
   Heading
--------------------------------------- */

.hero-title {
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1.08;
  font-weight: 500;
  margin: 0 0 24px;
  color: white;
}

.hero-title span {
  display: block;
  margin-top: 8px;
  color: var(--gold-light);
  font-style: italic;
  font-weight: 400;
}

/* ---------------------------------------
   Paragraph
--------------------------------------- */

.hero .lead {
  max-width: 58ch;
  color: rgba(255,255,255,.82);
  font-size: 1.08rem;
  line-height: 1.85;
}

/* ---------------------------------------
   CTA Buttons
--------------------------------------- */

.cta-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.cta-row .btn {
  min-width: 220px;
  justify-content: center;
  transition: all .35s ease;
}

/* Primary */

.btn-primary {
  background: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(173,138,62,.25);
}

.btn-primary span {
  margin-left: 8px;
  transition: transform .3s ease;
}

.btn-primary:hover span {
  transform: translateX(4px);
}

/* Secondary */

.btn-secondary {
  background: rgba(255,255,255,.05);
  color: #fff;
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  font-weight: 500;
}

.btn-secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

/* ---------------------------------------
   Responsive
--------------------------------------- */

@media (max-width: 768px) {

  .hero {
    min-height: 85vh;
  }

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

  .hero-title {
    font-size: clamp(2.2rem, 8vw, 3.3rem);
  }

  .hero .lead {
    font-size: 1rem;
  }

  .cta-row {
    flex-direction: column;
  }

  .cta-row .btn {
    width: 100%;
  }

  .hero-bg {
    object-position: center;
  }

}
/* ---------- Section Scaffolding ---------- */
section {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.section-paper {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.section-white {
  background: var(--white);
  border-top: 1px solid var(--line);
}

.section-navy {
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.section-head {
  max-width: 680px;
  margin-bottom: 3.25rem;
}

.section-head h2 {
  margin-top: var(--space-md);
  color: var(--navy);
}

.section-head p {
  margin-top: var(--space-md);
  font-size: 0.975rem;
  color: var(--slate);
  max-width: 60ch;
  font-family: var(--font-sans);
  line-height: 1.65;
}

.section-navy .section-head h2 {
  color: var(--white);
}

.section-navy .section-head p {
  color: rgba(247, 245, 239, 0.6);
}

.rule-top {
  border-top: 2px solid var(--gold);
}

/* ---------- Section Kicker ---------- */
.section-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.75rem;
}

.section-kicker span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Image Band ---------- */
.image-band {
  margin: 3.5rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.image-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 29, 51, 0.03) 0%,
    rgba(11, 29, 51, 0.08) 100%
  );
  pointer-events: none;
}

.image-band img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 7;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.image-band:hover img {
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .image-band img {
    aspect-ratio: 16 / 9;
  }
}

/* ---------- Solutions Grid ---------- */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (max-width: 980px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }
}

.sol-card {
  background: var(--white);
  padding: 2rem 1.625rem;
  display: flex;
  flex-direction: column;
  transition:
    background var(--transition-base),
    transform var(--transition-base);
}

.sol-card:hover {
  background: var(--paper);
}

.sol-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 1.125rem;
  color: var(--navy);
}

.sol-card .flag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

.sol-card h3 {
  font-size: 1.1875rem;
  font-weight: 500;
  margin-bottom: 0.625rem;
  line-height: 1.3;
}

.sol-card p {
  font-size: 0.875rem;
  color: var(--slate);
  font-family: var(--font-sans);
  flex-grow: 1;
  line-height: 1.6;
}

.sol-card a.more {
  margin-top: 1.125rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-decoration: none;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition:
    color var(--transition-fast),
    gap var(--transition-fast);
}
h2 span{
    color:var(--gold);
    font-style:italic;
    font-weight:400;

}
.sol-card a.more:hover {
  color: var(--gold);
  gap: 0.625rem;
}

.sol-card a.more span {
  transition: transform var(--transition-fast);
}

.sol-card a.more:hover span {
  transform: translateX(3px);
}

/* ---------- Product Cards ---------- */
.products{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
    margin-top:2rem;
}

@media (max-width:900px){

.products{

grid-template-columns:1fr;

}

}

/* ---------------------------------- */

.product{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:42px;

    background:#fff;

    border:1px solid rgba(11,29,51,.08);

    border-radius:24px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    overflow:hidden;

}

/* Gold accent */

.product::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

/* Hover */

.product:hover{

    transform:translateY(-8px);

    border-color:rgba(173,138,62,.35);

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

}

.product:hover::before{

    transform:scaleX(1);

}

/* ---------------------------------- */
/* Tag */
/* ---------------------------------- */

.product .tag{

    display:inline-flex;

    align-self:flex-start;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(173,138,62,.08);

    color:var(--gold);

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:22px;

}

/* ---------------------------------- */
/* Title */
/* ---------------------------------- */

.product h3{

    margin:0 0 18px;

    font-size:1.65rem;

    font-weight:500;

    line-height:1.25;

    color:var(--navy);

}

/* ---------------------------------- */
/* Description */
/* ---------------------------------- */

.product p{

    margin:0 0 30px;

    color:var(--slate);

    line-height:1.85;

    font-size:1rem;

}

/* ---------------------------------- */
/* Feature List */
/* ---------------------------------- */

.product ul{

    margin:0;

    padding:0;

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ---------------------------------- */

.product li{

    position:relative;

    padding-left:32px;

    color:var(--navy);

    line-height:1.65;

    font-size:.96rem;

}

/* Gold circular bullet */

.product li::before{

    content:"";

    position:absolute;

    left:0;

    top:.45rem;

    width:12px;

    height:12px;

    border-radius:50%;

    border:2px solid var(--gold);

    background:#fff;

}

/* Small gold center */

.product li::after{

    content:"";

    position:absolute;

    left:4px;

    top:.72rem;

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--gold);

}

/* ---------- Stats Band ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (max-width: 760px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

.stat {
  background: var(--white);
  padding: 2rem 1.75rem;
  transition: background var(--transition-base);
}

.stat:hover {
  background: var(--paper);
}

.stat .num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.2;
}

.stat .cap {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.55;
  font-family: var(--font-sans);
}

.stat .src {
  margin-top: 0.625rem;
  font-size: 0.6875rem;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
/* =====================================================
   PROCESS
===================================================== */

.process{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    margin-top:2rem;
}

@media(max-width:992px){

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

}

@media(max-width:640px){

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

}

.step{

    position:relative;

    padding:38px;

    background:#fff;

    border:1px solid rgba(11,29,51,.08);

    border-radius:22px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    overflow:hidden;

}

/* Gold Accent */

.step::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.step:hover{

    transform:translateY(-8px);

    border-color:rgba(173,138,62,.35);

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

}

.step:hover::before{

    transform:scaleX(1);

}

/* Number */

.step .idx{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(173,138,62,.08);

    color:var(--gold);

    font-size:.82rem;

    font-weight:700;

    margin-bottom:24px;

}

/* Title */

.step h3{

    font-size:1.4rem;

    font-weight:500;

    line-height:1.3;

    color:var(--navy);

    margin:0 0 16px;

}

/* Description */

.step p{

    color:var(--slate);

    font-size:.96rem;

    line-height:1.8;

}
.process-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

@media(max-width:900px){

.process-3{

grid-template-columns:1fr;

}

}
/* =====================================================
   PULL QUOTE
===================================================== */

.pull-quote{

    position:relative;

    margin-top:5rem;

    padding:48px;

    background:#fff;

    border:1px solid rgba(11,29,51,.08);

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 10px 35px rgba(0,0,0,.04);

}

/* Gold Accent */

.pull-quote::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:var(--gold);

}

.pull-quote .eyebrow{

    margin-bottom:20px;

}

.pull-quote .big{

    margin:0 0 24px;

    font-size:clamp(1.5rem,2.2vw,2rem);

    line-height:1.6;

    font-style:italic;

    font-weight:400;

    color:var(--navy);

    max-width:760px;

}

.pull-quote .attrib{

    color:var(--slate);

    line-height:1.75;

    font-size:1rem;

}
/* =====================================================
   BUSINESS GRID
===================================================== */

.biz-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

@media(max-width:900px){

.biz-grid{

grid-template-columns:1fr;

}

}

.biz-cell{

    position:relative;

    padding:36px;

    background:#fff;

    border:1px solid rgba(11,29,51,.08);

    border-radius:22px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.biz-cell::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.biz-cell:hover{

    transform:translateY(-8px);

    border-color:rgba(173,138,62,.35);

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

}

.biz-cell:hover::before{

    transform:scaleX(1);

}

.biz-cell .idx{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    background:rgba(173,138,62,.08);

    color:var(--gold);

    font-size:.78rem;

    font-weight:700;

    margin-bottom:20px;

}

.biz-cell h3{

    font-size:1.35rem;

    font-weight:500;

    margin:0 0 14px;

    color:var(--navy);

}

.biz-cell p{

    color:var(--slate);

    font-size:.96rem;

    line-height:1.8;

}
/* ---------- Audience Columns ---------- */
/* =====================================================
   AUDIENCE
===================================================== */

.audience-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;

    width:min(1200px,92%);
    margin:0 auto;

    padding:0 0 5rem;
}

@media(max-width:1100px){

.audience-grid{

grid-template-columns:1fr;

}

}

/* ========================================= */

.aud-col{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:42px;

    background:#fff;

    border:1px solid rgba(11,29,51,.08);

    border-radius:24px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    overflow:hidden;

}

/* Gold accent */

.aud-col::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.aud-col:hover{

    transform:translateY(-8px);

    border-color:rgba(173,138,62,.35);

    box-shadow:
        0 20px 45px rgba(0,0,0,.08);

}

.aud-col:hover::before{

    transform:scaleX(1);

}

/* ========================================= */
/* Government Card */
/* ========================================= */

.aud-col.gov{

    background:linear-gradient(
        180deg,
        #0b1d33 0%,
        #132f52 100%
    );

    color:#fff;

    border:none;

}

.aud-col.gov::before{

    transform:scaleX(1);

}

/* ========================================= */

.aud-col.biz{

    background:#fff;

}

.aud-col.ent{

    background:#faf9f6;

}

/* ========================================= */
/* Sector Label */
/* ========================================= */

.aud-col .role{

    display:inline-flex;

    align-self:flex-start;

    padding:8px 14px;

    margin-bottom:22px;

    border-radius:999px;

    font-size:.72rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-weight:600;

}

.aud-col.gov .role{

    background:rgba(255,255,255,.12);

    color:var(--gold-light);

}

.aud-col.biz .role,

.aud-col.ent .role{

    background:rgba(173,138,62,.08);

    color:var(--gold);

}

/* ========================================= */
/* Heading */
/* ========================================= */

.aud-col h3{

    font-size:1.7rem;

    line-height:1.25;

    margin:0 0 18px;

    font-weight:500;

}

.aud-col.gov h3{

    color:#fff;

}

.aud-col.biz h3,

.aud-col.ent h3{

    color:var(--navy);

}

/* ========================================= */
/* Paragraph */
/* ========================================= */

.aud-col p{

    font-size:1rem;

    line-height:1.8;

    margin-bottom:30px;

}

.aud-col.gov p{

    color:rgba(255,255,255,.78);

}

.aud-col.biz p,

.aud-col.ent p{

    color:var(--slate);

}

/* ========================================= */
/* List */
/* ========================================= */

.aud-col ul{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:18px;

    flex-grow:1;

}

.aud-col li{

    position:relative;

    padding-left:30px;

    line-height:1.65;

    font-size:.96rem;

}

/* Premium bullets */

.aud-col li::before{

    content:"";

    position:absolute;

    left:0;

    top:.45rem;

    width:12px;

    height:12px;

    border-radius:50%;

    border:2px solid var(--gold);

}

.aud-col li::after{

    content:"";

    position:absolute;

    left:4px;

    top:.72rem;

    width:4px;

    height:4px;

    border-radius:50%;

    background:var(--gold);

}

.aud-col.gov li{

    color:rgba(255,255,255,.92);

}

.aud-col.biz li,

.aud-col.ent li{

    color:var(--navy);

}

/* ========================================= */
/* Buttons */
/* ========================================= */

.aud-col .btn{

    margin-top:36px;

    width:fit-content;

}

@media(max-width:768px){

.aud-col{

padding:34px 28px;

}

.aud-col .btn{

width:100%;

}

}

/* ---------- Trust Principles ---------- */
.navy-texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(247, 245, 239, 0.035) 0 1px,
      transparent 1px 26px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(247, 245, 239, 0.035) 0 1px,
      transparent 1px 26px
    );
  pointer-events: none;
}

.section-navy .wrap {
  position: relative;
  z-index: 1;
}

.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .principles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .principles {
    grid-template-columns: 1fr;
  }
}

.principle {
  background: var(--navy);
  padding: 1.875rem 1.625rem;
  transition: background var(--transition-base);
}

.principle:hover {
  background: var(--navy-soft);
}

.principle .n {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}

.principle h4 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0.75rem 0 0.5rem;
  color: var(--white);
  font-family: var(--font-serif);
  line-height: 1.3;
}

.principle p {
  font-size: 0.8125rem;
  color: rgba(247, 245, 239, 0.6);
  font-family: var(--font-sans);
  line-height: 1.6;
}
/* =====================================================
   ABOUT
===================================================== */

.about-grid{

    display:grid;

    grid-template-columns:.95fr 1.05fr;

    gap:48px;

    align-items:center;

    padding:16px 0;

}

@media(max-width:900px){

.about-grid{

grid-template-columns:1fr;

gap:32px;

padding:0;

}

}

/* ---------------------------------- */
/* Image */
/* ---------------------------------- */

.about-image{

    margin:0;

    overflow:hidden;

    border-radius:24px;

    border:1px solid rgba(11,29,51,.08);

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

}

.about-image img{

    width:100%;

    height:360px;

    object-fit:cover;

    object-position:center;

    display:block;

    transition:transform .45s ease;

}

.about-image:hover img{

    transform:scale(1.04);

}

/* ---------------------------------- */
/* Text */
/* ---------------------------------- */

.about-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.about-text .eyebrow{

    margin-bottom:16px;

}

.about-text h2{

    font-size:clamp(2rem,3vw,2.8rem);

    line-height:1.15;

    font-weight:500;

    margin:0 0 22px;

    color:var(--navy);

}

.about-text .lede{

    font-size:1.2rem;

    line-height:1.75;

    color:var(--navy);

    margin-bottom:20px;

    font-weight:400;

}

.about-text p{

    font-size:1rem;

    line-height:1.8;

    color:var(--slate);

    margin:0 0 16px;

}

.about-text p:last-child{

    margin-bottom:0;

}

/* =====================================================
   FOOTER
===================================================== */

footer{

    background:var(--navy);

    color:#fff;

    padding:72px 0 28px;

}

/* ======================================= */

.footer-header{

    max-width:620px;

    margin-bottom:60px;

}

.footer-header h2{

    color:#fff;

    font-size:2rem;

    font-weight:500;

    margin-bottom:18px;

}

.footer-header p{

    color:rgba(255,255,255,.72);

    line-height:1.8;

    font-size:1rem;

}

/* ======================================= */

.footer-main{

    display:grid;

    grid-template-columns:1.3fr 1fr 1.2fr;

    gap:60px;

    padding:48px 0;

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

}

@media(max-width:900px){

.footer-main{

grid-template-columns:1fr;

gap:40px;

}

}

/* ======================================= */

.footer-main h4{

    color:var(--gold-light);

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:.72rem;

    margin-bottom:20px;

}

.footer-main ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-main li{

    margin-bottom:14px;

}

.footer-main a{

    color:rgba(255,255,255,.72);

    text-decoration:none;

    transition:.3s;

}

.footer-main a:hover{

    color:var(--gold-light);

    padding-left:6px;

}

.footer-main address{

    font-style:normal;

    color:rgba(255,255,255,.72);

    line-height:1.9;

}

/* ======================================= */

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:24px;

    color:rgba(255,255,255,.45);

    font-size:.85rem;

    flex-wrap:wrap;

    gap:16px;

}

@media(max-width:768px){

.footer-bottom{

justify-content:center;

text-align:center;

}

}

/* ---------- Scroll Reveal Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--transition-smooth),
    transform 0.6s var(--transition-smooth);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}

/* ---------- Spacing Utilities ---------- */
.products-section {
  margin-top: 3.5rem;
}

.process-section {
  margin-top: 3.5rem;
}