@import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&family=Lato:ital,wght@1,300&family=Poppins:wght@200&display=swap');

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

    :root {
      --navy-900: #0b1d3a;
      --navy-800: #122348;
      --navy-700: #1a3060;
      --navy-600: #1e3a70;
      --navy-400: #3a5fa0;
      --navy-200: #9eb5d8;
      --navy-100: #d0dcef;
      --navy-50:  #edf1f8;
      --cream:    #f7f5f0;
      --white:    #ffffff;
      --text-dark: #0e1c33;
      --text-mid:  #3d5070;
      --text-light: #7a90b0;
      --border:    rgba(30, 58, 112, 0.12);
      --border-mid: rgba(30, 58, 112, 0.22);

      --bg: #0b1820;
      --bg-mid: #0f2030;
      --teal: #1a3a4a;
      --blue-card: #1e6fa8;
      --blue-card-hover: #1a5f94;
      --orange: #e85d20;
      --white: #ffffff;
      --text-muted: rgba(255,255,255,0.55);
      --watermark: rgba(255,255,255,0.045);

       --green-50:  #e1f5ee;
      --green-800: #085041;
      --amber-50:  #faeeda;
      --amber-800: #633806;
      --pink-50:   #fbeaf0;
      --pink-800:  #72243e;
      --surface:   #f4f6fa;
       --cream:      #f7f5f0;
    }

/* ── HERO WRAPPER ── */
    .hs-hero {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background: radial-gradient(ellipse at 60% 40%, #0f2a3a 0%, #0b1820 65%);
      display: flex;
      align-items: center;
      overflow: hidden;
    }
 
    /* ── WATERMARK TEXT ── */
    .watermark {
      position: absolute;
      top: 50%;
      right: 12vw;
      transform: translateY(-50%);
      font-family: 'Cormorant Garamond', serif;
      font-weight: 900;
      font-size: clamp(120px, 20vw, 280px);
      line-height: 0.85;
      color: var(--watermark);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      letter-spacing: -0.02em;
    }
 
    /* ── ORANGE RING ACCENT ── */
    .ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: clamp(80px, 10vw, 140px);
      height: clamp(80px, 10vw, 140px);
      border-radius: 50%;
      opacity: 0.9;
      pointer-events: none;
    }
 
    /* ── HEADLINE TOP LEFT ── */
    .headline {
      position: absolute;
      top: clamp(2rem, 6vh, 5rem);
      left: clamp(2rem, 5vw, 5rem);
      z-index: 2;
    }
 
    .headline h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: clamp(1.8rem, 3.2vw, 3rem);
      color: var(--white);
      line-height: 1.05;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
 
    /* ── SERVICE CARDS ── */
    /* Cards are absolutely positioned, 3 left + 2 right */
    .card {
      position: absolute;
      background: transparent;
      padding: clamp(0.9rem, 1.5vh, 1.3rem) clamp(1rem, 2vw, 1.8rem);
      width: clamp(240px, 28vw, 380px);
      z-index: 3;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }
 
    /* .card:hover {
      background: var(--blue-card-hover);
      transform: translateX(4px);
    } */
 
    .card h2 {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: clamp(0.85rem, 1.3vw, 1.15rem);
      color: var(--white);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 0.6rem;
      line-height: 1.5;
    }
 
    .card p {
      font-size: clamp(0.7rem, 1vw, 0.82rem);
      font-weight: 400;
      color: rgba(255,255,255,0.75);
      line-height: 1.55;
      letter-spacing: 1.2px;
    }
 
    .card .arrow {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.9rem;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #C86E1A;
      transition: color 0.2s;
    }
 
    .card:hover .arrow { color: var(--white); }
 
    .arrow::after {
      content: '→';
      font-size: 0.85rem;
    }
 
    /* LEFT SIDE CARDS */
    .card-left-1 {
      left: 0;
      top: 18%;
    }
 
    .card-left-2 {
      left: 0;
      top: 46%;
    }
 
    .card-left-3 {
      left: 0;
      top: 72%;
    }
 
    /* RIGHT SIDE CARDS */
    .card-right-1 {
      right: 0;
      top: 28%;
    }
 
    .card-right-2 {
      right: 0;
      top: 58%;
    }
 
    /* ── CONNECTOR LINES ── */
    .connectors {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }
 
    /* ── CENTER LOGO / BRAND ── */
    .center-brand {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      text-align: center;
    }
 
    .center-brand .brand-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(1.4rem, 2.5vw, 2.2rem);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.12);
    }
 
    /* ── BOTTOM BAR ── */
    .bottom-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1rem clamp(2rem, 5vw, 5rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid rgba(255,255,255,0.06);
      z-index: 5;
    }
 
    .bottom-bar-logo {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: 1.1rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--white);
    }
 
    .bottom-bar-logo span { color: var(--orange); }
 
    .bottom-bar-tagline {
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }
 
    .bottom-bar-cta {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--orange);
      text-decoration: none;
      border: 1px solid rgba(232,93,32,0.4);
      padding: 0.4rem 1rem;
      transition: background 0.2s;
    }
 
    .bottom-bar-cta:hover { background: rgba(232,93,32,0.1); }
 
    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .hs-hero {
        min-height: auto;
        padding: 6rem 0 5rem;
      }
 
      .watermark { display: none; }
      .ring { display: none; }
      .center-brand { display: none; }
 
      .headline {
        position: static;
        padding: 0 1.5rem 2.5rem;
      }
 
      .card {
        position: static;
        width: 100%;
        margin-bottom: 2px;
      }
 
      .card:hover { transform: none; }
 
      .hs-hero {
        flex-direction: column;
        align-items: stretch;
        padding-top: 2rem;
        padding-bottom: 4rem;
      }
 
      .cards-mobile {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
 
      .connectors { display: none; }
      .bottom-bar { position: static; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); }
    }



/* *********WHY IT MATTERS SECTION ONE ********** */
    .wam-sectionn {
      width: 100%;
      padding: 0 8vw;
      border-top: 0.5px solid var(--border) !important;
      border-bottom: 0.5px solid var(--border) !important;
    }
 
    /* ── TOP ROW ── */
    .wam-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 0.5px solid var(--border-mid) !important;
    }
 
    .wam-intro {
      padding: 5rem 4vw 5rem 0;
      border-right: 0.5px solid var(--border-mid) !important;
    }
 
    .wam-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--navy-400) !important;
      margin-bottom: 1.4rem;
    }
 
    .wam-eyebrow::before {
      content: '';
      display: block;
      width: 22px;
      height: 1px;
      background: var(--navy-400) !important;
    }
 
    .wam-headline {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2rem, 3.5vw, 3.2rem);
      line-height: 1.1;
      color: var(--navy-900) !important;
      margin-bottom: 1.4rem;
    }
 
    .wam-headline em {
      font-style: italic;
      color: var(--navy-400) !important;
    }
 
    .wam-lead {
      font-size: 0.9rem;
      font-weight: 300;
      line-height: 1.85;
       color: var(--navy-900);
      max-width: 460px;
      margin-bottom: 2rem;
    }
 
    .wam-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
       color: var(--navy-900) !important;
      border-bottom: 1px solid var(--navy-200) !important;
      padding-bottom: 2px;
      text-decoration: none;
      transition: color 0.2s, border-color 0.2s;
    }
 
    .wam-cta:hover {  color: var(--navy-900) !important; border-color: var(--navy-400) !important; }
 
    /* ── STATS GRID ── */
    .wam-stats {
      padding: 5rem 0 5rem 4vw;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
 
    .wam-stat {
      padding: 1.6rem 1.4rem;
      border-right: 0.5px solid var(--border-mid) !important;
      border-bottom: 0.5px solid var(--border-mid) !important;
    }
 
    .wam-stat:nth-child(2n) { border-right: none; }
    .wam-stat:nth-last-child(-n+2) { border-bottom: none; }
 
    .wam-stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2rem, 3vw, 2.8rem);
      line-height: 1;
      color: var(--navy-900) !important;
      margin-bottom: 0.4rem;
    }
 
    .wam-stat-num span { color: var(--navy-400); }
 
    .wam-stat-label {
      font-size: 0.8rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--navy-900);
      line-height: 1.55;
    }
 
    /* ── FOUR PILLARS ── */
    .wam-pillars {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-bottom: 0.5px solid var(--border-mid) !important;
    }
 
    .wam-pillar {
      padding: 2.5rem 2rem 2.5rem 0;
      border-right: 0.5px solid var(--border-mid) !important;
      position: relative;
    }
 
    .wam-pillar:last-child { border-right: none; }
    .wam-pillar:not(:first-child) { padding-left: 2rem; padding-right: 2rem; }
    .wam-pillar:last-child { padding-right: 0; }
 
    .wam-pillar-num {
      position: absolute;
      top: 1.8rem;
      right: 1.4rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.6rem;
      font-weight: 300;
       color: var(--navy-900);
      line-height: 1;
    }
 
    .wam-pillar-icon {
      width: 34px;
      height: 34px;
      background: var(--navy-50);
      border: 0.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.2rem;
    }
 
    .wam-pillar-icon svg {
      width: 15px;
      height: 15px;
      stroke: var(--navy-700) !important;
      fill: none;
      stroke-width: 1.5;
    }
 
    .wam-pillar-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--navy-900);
      margin-bottom: 0.6rem;
      letter-spacing: 0.01em;
    }
 
    .wam-pillar-body {
      font-size: 0.78rem;
      font-weight: 300;
      line-height: 1.8;
       color: var(--navy-900);
    }
 
    /* ── QUOTE + LEGAL ROW ── */
    .wam-bottom {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 0;
    }
 
    .wam-quote {
      padding: 3.5rem 4vw 3.5rem 0;
      border-right: 0.5px solid var(--border-mid);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
 
    .wam-quote blockquote {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.2rem, 2vw, 1.7rem);
      line-height: 1.55;
      color: var(--navy-900);
      border-left: 2px solid var(--navy-400);
      padding-left: 1.4rem;
      margin-bottom: 1.2rem;
      border-radius: 0;
    }
 
    .wam-quote cite {
      display: block;
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-light);
      font-style: normal;
      padding-left: 1.4rem;
    }
 
    .wam-legal {
      padding: 3.5rem 0 3.5rem 3vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.1rem;
    }
 
    .wam-legal-title {
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-light);
      margin-bottom: 0.4rem;
    }
 
    .wam-legal-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
 
    .wam-legal-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--navy-400);
      flex-shrink: 0;
      margin-top: 5px;
    }
 
    .wam-legal-text {
      font-size: 0.78rem;
      font-weight: 300;
      line-height: 1.65;
       color: var(--navy-900);
    }
 
    .wam-legal-text strong {
      font-weight: 500;
      color: var(--navy-900);
    }
 
    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
      .wam-top { grid-template-columns: 1fr; }
      .wam-intro { padding: 3.5rem 0 2.5rem; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .wam-stats { padding: 2.5rem 0; }
      .wam-pillars { grid-template-columns: 1fr 1fr; }
      .wam-pillar { padding: 2rem !important; }
      .wam-pillar:nth-child(2) { border-right: none; }
      .wam-pillar:nth-child(n+3) { border-top: 0.5px solid var(--border-mid); }
      .wam-bottom { grid-template-columns: 1fr; }
      .wam-quote { padding: 3rem 0; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .wam-legal { padding: 3rem 0; }
    }
 
    @media (max-width: 600px) {
      .wam-pillars { grid-template-columns: 1fr; }
      .wam-pillar { border-right: none !important; border-top: 0.5px solid var(--border-mid); }
      .wam-pillar:first-child { border-top: none; }
      .wam-stats { grid-template-columns: 1fr 1fr; }
    }

    /* ************SERVICE SECTION TWO */
    .services-sectionn {
      position: relative;
      overflow: hidden;
      padding: 7rem 8vw;
      background: #07111e;
    }
 
    .services-sectionn::before {
      content: '';
      position: absolute;
      inset: -60%;
      background: conic-gradient(
        from 0deg at 30% 40%,
        #07111e   0deg,
        #0d2240  60deg,
        #112e58 100deg,
        #0a1d3a 140deg,
        #071525 180deg,
        #0e2850 220deg,
        #152f5c 260deg,
        #0b1e3a 300deg,
        #07111e 360deg
      );
      animation: bgSpin 28s linear infinite;
      z-index: 0;
    }
 
    .services-sectionn::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 18% 28%, rgba(30,70,140,0.38) 0%, transparent 68%),
        radial-gradient(ellipse 60% 50% at 82% 76%, rgba(12,44,100,0.42) 0%, transparent 65%),
        radial-gradient(ellipse 50% 70% at 58% 8%,  rgba(18,55,120,0.22) 0%, transparent 60%);
      animation: radialShift 14s ease-in-out infinite alternate;
      z-index: 0;
    }
 
    @keyframes bgSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
 
    @keyframes radialShift {
      0%   { opacity: 0.7; transform: scale(1)    translateX(0px); }
      50%  { opacity: 1.0; transform: scale(1.06) translateX(22px); }
      100% { opacity: 0.8; transform: scale(0.97) translateX(-16px); }
    }
 
    /* ── Layer 3: static grid overlay ──
       Pure CSS grid pattern on top of the animation.
       pointer-events:none so it doesn't block clicks. */
    .svc-grid-bg {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 88px 88px;
      z-index: 1;
      pointer-events: none;
    }
 
    /* All content must sit above the 3 bg layers (z-index 0–1) */
    .svc-header,
    .svc-grid,
    .svc-grid-bottom,
    .svc-footer {
      position: relative;
      z-index: 2;
    }
 
    /* ════════════════════════════════════════════
       HEADER
    ════════════════════════════════════════════ */
    .svc-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding-bottom: 4rem;
      border-bottom: 0.5px solid rgba(255,255,255,0.08);
      margin-bottom: 4rem;
    }
 
    .svc-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--navy-200);
      margin-bottom: 1.4rem;
    }
 
    .svc-eyebrow::before {
      content: '';
      display: block;
      width: 22px;
      height: 1px;
      background: var(--navy-400);
    }
 
    .svc-headline {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2.2rem, 4vw, 3.6rem);
      line-height: 1.08;
      color: var(--white);
    }
 
    .svc-headline em {
      font-style: italic;
      color: var(--navy-200);
    }
 
    .svc-header-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 1.2rem;
    }
 
    .svc-lead {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255,255,255,0.45);
      text-align: right;
      max-width: 400px;
    }
 
    .svc-count {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: 5rem;
      line-height: 1;
      color: rgba(255,255,255,0.05);
    }
 
    /* ════════════════════════════════════════════
       CARD GRIDS
       Top row:    3 equal columns
       Bottom row: 2 equal columns
       Gap is 1.5px — creates a thin dark line
       between cards that looks like a border.
    ════════════════════════════════════════════ */
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
      margin-bottom: 1.5px;
    }
 
    .svc-grid-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5px;
    }
 
    /* ════════════════════════════════════════════
       CARD
    ════════════════════════════════════════════ */
    .svc-card {
      position: relative;
      background: rgba(10, 22, 48, 0.72);
      border: 0.5px solid rgba(255,255,255,0.08);
      padding: 2.8rem 2.4rem 2.2rem;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: background 0.35s, border-color 0.35s;
    }
 
    /* Blue tint overlay revealed on hover */
    .svc-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(58,95,160,0.12) 0%, transparent 55%);
      opacity: 0;
      transition: opacity 0.35s;
      pointer-events: none;
    }
 
    .svc-card:hover {
      background: rgba(18, 38, 80, 0.88);
      border-color: rgba(158,181,216,0.22);
    }
 
    .svc-card:hover::after { opacity: 1; }
 
    /* Large faded number watermark top-right */
    .svc-card-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: 4.5rem;
      line-height: 1;
      color: rgba(255,255,255,0.04);
      position: absolute;
      top: 1rem;
      right: 1.4rem;
      transition: color 0.35s;
      pointer-events: none;
      user-select: none;
    }
 
    .svc-card:hover .svc-card-num { color: rgba(158,181,216,0.1); }
 
    /* Icon square */
    .svc-card-icon {
      width: 42px;
      height: 42px;
      border: 0.5px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.8rem;
      flex-shrink: 0;
      transition: border-color 0.3s, background 0.3s;
      position: relative;
      z-index: 1;
    }
 
    .svc-card:hover .svc-card-icon {
      border-color: rgba(158,181,216,0.4);
      background: rgba(58,95,160,0.18);
    }
 
    .svc-card-icon svg {
      width: 17px;
      height: 17px;
      stroke: var(--navy-200);
      fill: none;
      stroke-width: 1.5;
    }
 
    /* Card title */
    .svc-card-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      font-size: clamp(1.15rem, 1.7vw, 1.5rem);
      line-height: 1.2;
      color: var(--white);
      margin-bottom: 1rem;
      position: relative;
      z-index: 1;
    }
 
    /* Card body text */
    .svc-card-body {
      font-size: 0.78rem;
      font-weight: 300;
      line-height: 1.9;
      color: rgba(255,255,255,0.42);
      flex: 1;
      margin-bottom: 1.6rem;
      position: relative;
      z-index: 1;
    }
 
    /* Keyword tags row */
    .svc-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-bottom: 1.8rem;
      position: relative;
      z-index: 1;
    }
 
    .svc-tag {
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--navy-200);
      border: 0.5px solid rgba(158,181,216,0.2);
      padding: 3px 8px;
    }
 
    /* CTA button with sliding fill animation */
    .svc-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--white);
      border: 0.5px solid rgba(255,255,255,0.18);
      padding: 0.65rem 1.2rem;
      text-decoration: none;
      position: relative;
      z-index: 1;
      align-self: flex-start;
      overflow: hidden;
      transition: border-color 0.25s;
    }
 
    /* The sliding fill — scales from left on hover */
    .svc-btn-fill {
      position: absolute;
      inset: 0;
      background: var(--navy-400);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.32s ease;
      z-index: -1;
    }
 
    .svc-btn:hover { border-color: var(--navy-400); }
    .svc-btn:hover .svc-btn-fill { transform: scaleX(1); }
 
    /* Arrow nudges right on hover */
    .svc-btn-arrow {
      transition: transform 0.25s;
      display: inline-block;
    }
 
    .svc-btn:hover .svc-btn-arrow { transform: translateX(4px); }
 
    /* Bottom accent line — sweeps across on hover */
    .svc-card-accent {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--navy-400), var(--navy-200));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
 
    .svc-card:hover .svc-card-accent { transform: scaleX(1); }
 
    /* ════════════════════════════════════════════
       FOOTER STRIP
    ════════════════════════════════════════════ */
    .svc-footer {
      margin-top: 4rem;
      padding-top: 2.5rem;
      border-top: 0.5px solid rgba(255,255,255,0.07);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }
 
    .svc-footer-text {
      font-size: 0.78rem;
      font-weight: 300;
      color: rgba(255,255,255,0.28);
      line-height: 1.75;
      max-width: 500px;
    }
 
    .svc-footer-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--white);
      background: rgba(58,95,160,0.35);
      border: 0.5px solid rgba(158,181,216,0.2);
      padding: 0.8rem 1.6rem;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s;
      flex-shrink: 0;
    }
 
    .svc-footer-cta:hover { background: rgba(58,95,160,0.6); }
 
    /* ════════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════════ */
    @media (max-width: 1000px) {
      .svc-grid        { grid-template-columns: 1fr 1fr; }
      .svc-grid-bottom { grid-template-columns: 1fr; }
    }
 
    @media (max-width: 680px) {
      .svc-header        { grid-template-columns: 1fr; gap: 2rem; }
      .svc-header-right  { align-items: flex-start; }
      .svc-lead          { text-align: left; }
      .svc-grid          { grid-template-columns: 1fr; }
      .svc-footer        { flex-direction: column; align-items: flex-start; }
    }


/* *************SECTION THEE WHAT IS WCAG */
        .wcag-section {
      width: 100%;
      padding: 0 8vw;
      border-top: 0.5px solid var(--border) !important;
      border-bottom: 0.5px solid var(--border) !important;
    }
 
    /* ════════════════════════════════════════
       HERO ROW
    ════════════════════════════════════════ */
    .wcag-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-bottom: 0.5px solid var(--border-mid) !important;
    }
 
    .wcag-hero-left {
      padding: 5rem 4vw 5rem 0;
      border-right: 0.5px solid var(--border-mid) !important;
    }
 
    .wcag-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--navy-400);
      margin-bottom: 1.2rem;
    }
 
    .wcag-eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 1px;
      background: var(--navy-400) !important;
    }
 
    .wcag-hero-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2rem, 3.5vw, 3.2rem);
      line-height: 1.1;
      color: var(--navy-900);
      margin-bottom: 1.4rem;
    }
 
    .wcag-hero-title em {
      font-style: italic;
      color: var(--navy-400);
    }
 
    .wcag-hero-body {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.85;
      color: var(--navy-900);
      margin-bottom: 2rem;
      max-width: 460px;
    }
 
    /* WCAG Acronym breakdown grid */
    .wcag-acronym {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 0.5px solid var(--border-mid) !important;
    }
 
    .wcag-letter {
      padding: 1.2rem 0.8rem;
      border-right: 0.5px solid var(--border-mid) !important;
      text-align: center;
      transition: background 0.2s;
    }
 
    .wcag-letter:last-child { border-right: none; }
    .wcag-letter:hover { background: var(--navy-50) !important; }
 
    .wcag-letter-char {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: 2.4rem;
      line-height: 1;
      color: var(--navy-900);
      margin-bottom: 0.3rem;
    }
 
    .wcag-letter-word {
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
     color: var(--navy-900);
    }
 
    /* Right: key facts */
    .wcag-hero-right {
      padding: 5rem 0 5rem 4vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
    }
 
    .wcag-fact {
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
      padding: 1.6rem 0;
      border-bottom: 0.5px solid var(--border) !important;
    }
 
    .wcag-fact:first-child { padding-top: 0; }
    .wcag-fact:last-child { border-bottom: none; padding-bottom: 0; }
 
    .wcag-fact-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: 2.6rem;
      line-height: 1;
      color: var(--border-mid) !important;
      flex-shrink: 0;
      min-width: 2.5rem;
    }
 
    .wcag-fact-title {
      font-size: 1rem;
      font-weight: 800;
      color: var(--navy-900) !important;
      margin-bottom: 0.4rem;
    }
 
    .wcag-fact-body {
      font-size: 0.78rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--navy-900);
    }
 
    /* ════════════════════════════════════════
       FOUR POUR PRINCIPLES
    ════════════════════════════════════════ */
    .wcag-principles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-bottom: 0.5px solid var(--border-mid) !important;
    }
 
    .wcag-principle {
      padding: 2.5rem 2rem 2.5rem 0;
      border-right: 0.5px solid var(--border-mid) !important;
      position: relative;
    }
 
    .wcag-principle:last-child { border-right: none; }
    .wcag-principle:not(:first-child) { padding-left: 2rem; }
 
    .wcag-p-num {
      position: absolute;
      top: 1.6rem;
      right: 1.2rem;
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: 3rem;
      line-height: 1;
      color: var(--border) !important;
    }
 
    .wcag-p-icon {
      width: 36px;
      height: 36px;
      background: var(--navy-50);
      border: 0.5px solid var(--border ) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.2rem;
    }
 
    .wcag-p-icon svg {
      width: 15px;
      height: 15px;
      stroke: var(--navy-700);
      fill: none;
      stroke-width: 1.5;
    }
 
    .wcag-p-title {
      font-size: 1rem;
      font-weight: 800;
      color: var(--navy-900);
      margin-bottom: 0.5rem;
      letter-spacing: 0.01em;
    }
 
    .wcag-p-body {
      font-size: 0.78rem;
      font-weight: 300;
      line-height: 1.8;
     color: var(--navy-900);
      margin-bottom: 1rem;
    }
 
    .wcag-p-examples {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
 
    .wcag-p-ex {
      font-size: 0.82rem;
      font-weight: 300;
      color: #C86E1A;
      display: flex;
      align-items: flex-start;
      gap: 7px;
      line-height: 1.55;
    }
 
    .wcag-p-ex::before {
      content: '';
      display: block;
      width: 10px;
      height: 1px;
      background: var(--navy-200);
      flex-shrink: 0;
      margin-top: 0.58em;
    }
 
    /* ════════════════════════════════════════
       CONFORMANCE LEVELS
    ════════════════════════════════════════ */
    .wcag-levels {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-bottom: 0.5px solid var(--border-mid) !important;
    }
 
    .wcag-level {
      padding: 2.5rem 2.5rem 2.5rem 0;
      border-right: 0.5px solid var(--border-mid) !important;
    }
 
    .wcag-level:last-child { border-right: none; }
    .wcag-level:not(:first-child) { padding-left: 2.5rem; }
 
    .wcag-level-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 4px 10px;
      margin-bottom: 1.2rem;
    }
 
    .badge-a   { background: var(--navy-50);   color: #0c447c; }
    .badge-aa  { background: var(--green-50);  color: var(--green-800); }
    .badge-aaa { background: var(--amber-50);  color: var(--amber-800); }
 
    .wcag-level-title {
      font-size: 01rem;
      font-weight: 800;
      color: var(--navy-900);
      margin-bottom: 0.6rem;
    }
 
    .wcag-level-body {
      font-size: 0.78rem;
      font-weight: 300;
      line-height: 1.8;
      color: var(--navy-900);
      margin-bottom: 1.2rem;
    }
 
    .wcag-level-reqs {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
 
    .wcag-level-req {
      font-size: 0.82rem;
      font-weight: 300;
      color: #C86E1A;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.55;
    }
 
    .wcag-level-req::before {
      content: '';
      display: block;
      width: 10px;
      height: 1px;
      flex-shrink: 0;
      margin-top: 0.6em;
    }
 
    .req-a::before   { background: #185fa5; }
    .req-aa::before  { background: #0f6e56; }
    .req-aaa::before { background: #854f0b; }
 
    /* ════════════════════════════════════════
       VERSION TIMELINE
    ════════════════════════════════════════ */
    .wcag-versions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-bottom: 0.5px solid var(--border-mid) !important;
    }
 
    .wcag-version {
      padding: 2rem 2.5rem 2rem 0;
      border-right: 0.5px solid var(--border-mid) !important;
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
    }
 
    .wcag-version:last-child { border-right: none; }
    .wcag-version:not(:first-child) { padding-left: 2.5rem; }
 
    .wcag-v-tag {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: 1.8rem;
      color: var(--navy-400);
      flex-shrink: 0;
      line-height: 1;
    }
 
    .wcag-v-title {
      font-size: 1rem;
      font-weight: 800;
      color: var(--navy-900);
      margin-bottom: 0.4rem;
    }
 
    .wcag-v-body {
      font-size: 0.75rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--navy-900);
    }
 
    /* ════════════════════════════════════════
       BOTTOM: QUOTE + CTA
    ════════════════════════════════════════ */
    .wcag-bottom {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 0;
    }
 
    .wcag-quote {
      padding: 3.5rem 4vw 3.5rem 0;
      border-right: 0.5px solid var(--border-mid);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
 
    .wcag-quote blockquote {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 300;
      font-size: clamp(1.1rem, 2vw, 1.65rem);
      line-height: 1.55;
      color: var(--navy-900);
      border-left: 2px solid var(--navy-400);
      padding-left: 1.4rem;
      margin-bottom: 1rem;
      border-radius: 0;
    }
 
    .wcag-quote cite {
      display: block;
      font-size: 0.65rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-light);
      font-style: normal;
      padding-left: 1.4rem;
    }
 
    .wcag-cta {
      padding: 3.5rem 0 3.5rem 3vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1.2rem;
    }
 
    .wcag-cta-label {
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text-light);
    }
 
    .wcag-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--white);
      background: var(--navy-800);
      border: none;
      padding: 0.85rem 1.4rem;
      cursor: pointer;
      text-decoration: none;
      align-self: flex-start;
      transition: background 0.2s;
    }
 
    .wcag-cta-btn:hover { background: var(--navy-600); }
 
    .wcag-cta-note {
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.7;
      color: var(--navy-900);
    }
 
    /* ════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════ */
    @media (max-width: 1000px) {
      .wcag-principles { grid-template-columns: 1fr 1fr; }
      .wcag-principle:nth-child(2) { border-right: none; }
      .wcag-principle:nth-child(n+3) { border-top: 0.5px solid var(--border-mid); padding-top: 2rem; }
    }
 
    @media (max-width: 860px) {
      .wcag-hero    { grid-template-columns: 1fr; }
      .wcag-hero-left { padding: 3.5rem 0 2.5rem; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .wcag-hero-right { padding: 2.5rem 0; }
      .wcag-levels  { grid-template-columns: 1fr; }
      .wcag-level   { padding: 2rem 0 !important; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .wcag-level:last-child { border-bottom: none; }
      .wcag-versions { grid-template-columns: 1fr; }
      .wcag-version { padding: 1.8rem 0 !important; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .wcag-version:last-child { border-bottom: none; }
      .wcag-bottom  { grid-template-columns: 1fr; }
      .wcag-quote   { padding: 3rem 0; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .wcag-cta     { padding: 3rem 0; }
    }
 
    @media (max-width: 600px) {
      .wcag-principles { grid-template-columns: 1fr; }
      .wcag-principle  { padding: 2rem 0 !important; border-right: none; border-top: 0.5px solid var(--border-mid); }
      .wcag-principle:first-child { border-top: none; }
      .wcag-acronym { grid-template-columns: repeat(4, 1fr); }
    }




    /* *******ASSESSMENT PROCESS SECTION FOUR */
      .aap-section {
      width: 100%;
      padding: 0 8vw;
      border-top: 0.5px solid var(--border) !important;
      border-bottom: 0.5px solid var(--border) !important;
      background: #07111e;
    }
 
    /* ── HEADER ── */
    .aap-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      padding: 5rem 0 4rem;
      border-bottom: 0.5px solid var(--border-mid);
    }
 
    .aap-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--navy-400);
      margin-bottom: 1.2rem;
    }
 
    .aap-eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 1px;
      background: var(--navy-400);
    }
 
    .aap-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2rem, 3.5vw, 3rem);
      line-height: 1.1;
      color: #fff;
    }
 
    .aap-title em {
      font-style: italic;
      color: var(--navy-400);
    }
 
    .aap-header-right {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      gap: 3rem;
    }
 
    .aap-meta { text-align: right; }
 
    .aap-meta-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: 3.8rem;
      line-height: 1;
      color: #C86E1A;
    }
 
    .aap-meta-label {
      font-size: 0.65rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
    }
 
    /* ── TIMELINE ── */
    .aap-timeline {
      position: relative;
      padding: 3.5rem 0 0;
    }
 
    .aap-line {
      position: absolute;
      top: 6.3rem;
      left: 28px;
      right: 0;
      height: 1px;
      background: var(--border);
      z-index: 0;
    }
 
    .aap-steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      position: relative;
      z-index: 1;
    }
 
    .aap-step {
      padding: 0 1.8rem 3rem 0;
    }
 
    .aap-step:last-child { padding-right: 0; }
 
    .aap-step-dot-wrap {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      margin-bottom: 1.8rem;
    }
 
    .aap-step-dot {
      width: 56px;
      height: 56px;
      border: 0.5px solid var(--border-mid);
      background: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color 0.25s, background 0.25s;
    }
 
    .aap-step:hover .aap-step-dot {
      background: var(--navy-50);
      border-color: var(--navy-400);
    }
 
    .aap-step-dot svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-light);
      fill: none;
      stroke-width: 1.5;
      transition: stroke 0.25s;
    }
 
    .aap-step:hover .aap-step-dot svg { stroke: var(--navy-700); }
 
    .aap-step-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: 0.8rem;
      color: var(--text-light);
      letter-spacing: 0.08em;
    }
 
    .aap-step-title {
      font-size: 0.9rem;
      font-weight: 500;
      color: #C86E1A;
      margin-bottom: 0.6rem;
      letter-spacing: 0.01em;
      line-height: 1.3;
      letter-spacing: .5px;
    }
 
    .aap-step-body {
      font-size: 0.78rem;
      line-height: 1.8;
      color: #edf1f8;
    }
 
    .aap-step-tag {
      display: inline-block;
      margin-top: 0.9rem;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--navy-400);
      padding: 3px 8px;
    }
 
    /* ── DETAIL CARDS ── */
    .aap-details {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 0.5px solid var(--border-mid);
    }
 
    .aap-detail {
      padding: 2.5rem 2.5rem 2.5rem 0;
      border-right: 0.5px solid var(--border-mid);
    }
 
    .aap-detail:nth-child(n+2) { padding-left: 2.5rem; }
    .aap-detail:last-child { border-right: none; }
 
    .aap-detail-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 1.2rem;
      padding-bottom: 1.2rem;
      border-bottom: 0.5px solid var(--border);
    }
 
    .aap-detail-badge {
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 4px 10px;
    }
 
    .badge-discovery {    color: #0c447c; }
    .badge-testing   {   color: var(--green-800); }
    .badge-reporting {   color: var(--amber-800); }
 
    .aap-detail-title {
      font-size: 0.95rem;
      font-weight: 500;
      color: #ffffff;
      margin-bottom: 1rem;
    }
 
    .aap-detail-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }
 
    .aap-detail-list li {
      font-size: 0.78rem;
      font-weight: 300;
      color: #C86E1A;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      line-height: 1.6;
      letter-spacing: .6px;
    }
 
    .aap-detail-list li::before {
      content: '';
      display: block;
      width: 14px;
      height: 1px;
      background: var(--navy-200);
      flex-shrink: 0;
      margin-top: 0.65em;
    }
 
    /* ── FOOTER STATS ── */
    .aap-footer {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 0.5px solid var(--border-mid);
    }
 
    .aap-footer-stat {
      padding: 2rem 2.5rem 2rem 0;
      border-right: 0.5px solid var(--border-mid);
      display: flex;
      align-items: center;
      gap: 1.4rem;
    }
 
    .aap-footer-stat:nth-child(n+2) { padding-left: 2.5rem; }
    .aap-footer-stat:last-child { border-right: none; }
 
    .aap-footer-num {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: 2.6rem;
      color: var(--navy-900);
      line-height: 1;
      flex-shrink: 0;
    }
 
    .aap-footer-num span { color: var(--navy-400); }
 
    .aap-footer-text {
      font-size: 0.75rem;
      font-weight: 300;
      color: var(--text-mid);
      line-height: 1.65;
    }
 
    /* ── RESPONSIVE ── */
    @media (max-width: 960px) {
      .aap-header { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 0 3rem; }
      .aap-header-right { justify-content: flex-start; gap: 2rem; }
      .aap-line { display: none; }
      .aap-steps { grid-template-columns: 1fr 1fr; gap: 0; }
      .aap-step { padding: 0 1.5rem 2.5rem 0; }
      .aap-step:nth-child(2n) { padding-right: 0; }
      .aap-details { grid-template-columns: 1fr; }
      .aap-detail { padding: 2rem 0 !important; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .aap-detail:last-child { border-bottom: none; }
      .aap-footer { grid-template-columns: 1fr; }
      .aap-footer-stat { padding: 1.5rem 0 !important; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .aap-footer-stat:last-child { border-bottom: none; }
    }
 
    @media (max-width: 560px) {
      .aap-steps { grid-template-columns: 1fr; }
      .aap-step { padding: 0 0 2rem; }
      .aap-header-right { flex-wrap: wrap; gap: 1.5rem; }
    }


    /* ************SECTION FIVE */
       .cw-section {
      width: 100%;
      border-top: 0.5px solid var(--border);
      border-bottom: 0.5px solid var(--border);
    }
 
    /* ════════════════════════════════════════
       SPLIT MASTHEAD
    ════════════════════════════════════════ */
    .cw-masthead {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-bottom: 0.5px solid var(--border-mid);
    }
 
    .cw-mast-left {
      background: var(--white);
      padding: 5rem 4vw 5rem 8vw;
      border-right: 0.5px solid var(--border-mid);
    }
 
    .cw-mast-right {
      background: var(--surface);
      padding: 5rem 8vw 5rem 4vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
 
    .cw-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--navy-400);
      margin-bottom: 1.2rem;
    }
 
    .cw-eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 1px;
      background: var(--navy-400);
    }
 
    .cw-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      line-height: 1.1;
      color: var(--navy-900);
      margin-bottom: 1rem;
    }
 
    .cw-title em {
      font-style: italic;
      color: var(--navy-400);
    }
 
    .cw-subtitle {
      font-size: 0.9rem;
      font-weight: 300;
      line-height: 1.85;
      color: var(--navy-900);
      max-width: 440px;
      letter-spacing: 1px;
    }
 
    /* ════════════════════════════════════════
       SCROLLING TICKER
    ════════════════════════════════════════ */
    .cw-ticker-wrap {
      overflow: hidden;
      border-bottom: 0.5px solid var(--border-mid);
      padding: 1.1rem 0;
      background: var(--white);
      position: relative;
    }
 
    /* Fade edges */
    .cw-ticker-wrap::before,
    .cw-ticker-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }
 
    .cw-ticker-wrap::before {
      left: 0;
      background: linear-gradient(to right, var(--white), transparent);
    }
 
    .cw-ticker-wrap::after {
      right: 0;
      background: linear-gradient(to left, var(--white), transparent);
    }
 
    .cw-ticker {
      display: flex;
      gap: 0;
      white-space: nowrap;
      animation: tickerScroll 32s linear infinite;
      width: max-content;
    }
 
    .cw-ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 1.2rem;
      padding: 0 2.5rem;
      border-right: 0.5px solid var(--border);
      flex-shrink: 0;
    }
 
    .cw-ticker-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--navy-400);
      flex-shrink: 0;
    }
 
    .cw-ticker-name {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--navy-900);
    }
 
    .cw-ticker-label {
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-light);
    }
 
    @keyframes tickerScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
 
   
 
 
    /* ════════════════════════════════════════
       FINAL CTA — full bleed
    ════════════════════════════════════════ */
    .wb-final-cta {
      background: var(--navy-900);
      padding: 6rem 8vw;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 4vw;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
 
    .wb-final-cta::before {
      content: '';
      position: absolute;
      inset: -60%;
      background: conic-gradient(
        from 90deg at 50% 50%,
        #07111e 0deg,
        #0f2540 90deg,
        #07111e 180deg,
        #112040 270deg,
        #07111e 360deg
      );
      animation: heroSpin 50s linear infinite;
      z-index: 0;
      opacity: 0.5;
    }
 
    .wb-cta-left { position: relative; z-index: 1; }
    .wb-cta-right { position: relative; z-index: 1; flex-shrink: 0; }
 
    .wb-final-headline {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      font-size: clamp(2rem, 4vw, 3.8rem);
      line-height: 1.08;
      color: var(--white);
      margin-bottom: 1rem;
    }
 
    .wb-final-headline em {
      font-style: italic;
      color: var(--navy-200);
    }
 
    .wb-final-sub {
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.85;
      color: rgba(255,255,255,0.4);
      max-width: 520px;
    }
 
    .wb-cta-btns {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      align-items: flex-end;
    }
 
    .wb-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--navy-900);
      background: var(--white);
      padding: 1rem 2rem;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s;
    }
 
    .wb-btn-primary:hover { background: var(--navy-100); }
 
    .wb-btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--navy-200);
      border-bottom: 1px solid rgba(158,181,216,0.35);
      padding-bottom: 2px;
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.2s;
    }
 
    .wb-btn-ghost:hover { color: var(--white); }
 
    /* ════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════ */
    @media (max-width: 960px) {
      .wb-hero { grid-template-columns: 1fr; min-height: auto; }
      .wb-hero-left { min-height: 420px; padding: 5rem 8vw 4rem; }
      .wb-hero-right { padding: 4rem 8vw; border-left: none; border-top: 0.5px solid var(--border-mid); }
      .wb-hero-stat:first-child { padding-top: 1.8rem; }
      .wb-diff-row { grid-template-columns: 1fr 1fr; }
      .wb-diff-row.indent { margin-left: 0; margin-right: 0; }
      .wb-diff-item:nth-child(2) { border-right: none; }
      .wb-diff-item:nth-child(n+3) { border-top: 0.5px solid var(--border-mid); padding-top: 2rem; }
      .wb-commitment { grid-template-columns: 1fr; gap: 3rem; }
      .wb-trust { grid-template-columns: 1fr; }
      .wb-testimonial { padding: 3rem 8vw; border-right: none; border-bottom: 0.5px solid var(--border-mid); }
      .wb-trust-right { padding: 3rem 8vw; }
      .wb-final-cta { grid-template-columns: 1fr; gap: 2.5rem; }
      .wb-cta-btns { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    }
 
    @media (max-width: 600px) {
      .wb-diff-row { grid-template-columns: 1fr; }
      .wb-diff-item { border-right: none; padding-left: 0 !important; padding-right: 0 !important; }
      .wb-diff-item:nth-child(n+2) { border-top: 0.5px solid var(--border-mid); }
    }