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

 :root {
   --bg: #f8f5ef;
   --white: #ffffff;
   --forest: #001AFF;
   --forest2: #163d1b;
   --sec-color: #ff0000;
   --gold2: #dde7ff;
   --goldfade: rgba(184, 137, 42, 0.11);
   --goldborder: rgba(184, 137, 42, 0.22);
   --cream: var(--muted);
   --radius: 12px;
   --shadow: 0 4px 32px rgba(17, 24, 16, 0.08);
 }

 :root {
   /* Core Brand */

   /* Dark Surfaces */

   /* Neutrals */
   --bg: #F7F8FE;
   --bg-alt: #EEF1FC;
   --surface: #FFFFFF;
   --cream: #EEF0FB;
   --ink: #0A0D1E;
   --ink2: rgba(10, 13, 30, 0.60);
   --ink3: rgba(10, 13, 30, 0.35);
   --ink4: rgba(10, 13, 30, 0.18);

   /* Utility */
   --white: #FFFFFF;
   --shadow-sm: 0 2px 12px rgba(0, 26, 255, 0.07);
   --shadow: 0 4px 28px rgba(0, 26, 255, 0.10);
   --shadow-lg: 0 12px 48px rgba(0, 26, 255, 0.14);
   --radius-sm: 8px;
   --radius: 12px;
   --radius-lg: 20px;

   /* Success */
   --green: #0d7a3e;
   --green-fade: rgba(13, 122, 62, 0.08);

   --glass-bg: rgba(255, 255, 255, 0.08);
   --glass-border: rgba(255, 255, 255, 0.15);
   --glass-blur: 18px;
   --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
 }

 html {
   scroll-behavior: smooth
 }

 body {
   font-family: 'Outfit', sans-serif;
   background: var(--bg-alt);
   color: var(--ink);
   overflow-x: hidden
 }



 /* HERO SECTION */

 .hero {
   min-height: 100vh;
   padding: 120px 7%;
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 70px;
   align-items: center;
   background:
     radial-gradient(circle at top left,
       rgba(38, 56, 217, 0.08),
       transparent 35%),
     var(--bg);
   overflow: hidden;
 }

 /* LEFT */

 .hero-left {
   color: var(--text);
 }

 .hero-eyebrow {
   display: inline-flex;
   padding: 10px 18px;
   border-radius: 999px;
   background: var(--card);
   border: 1px solid var(--border);
   color: var(--primary);
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 28px;
 }

 .hero-left h1 {
   font-size: 72px;
   line-height: 1.05;
   margin-bottom: 28px;
   font-weight: 800;
   letter-spacing: -2px;
   color: var(--text);
 }

 .hero-left h1 em {
   font-style: normal;
   color: var(--primary);
 }

 .hero-left p {
   font-size: 18px;
   line-height: 1.9;
   color: var(--muted);
   max-width: 620px;
   margin-bottom: 40px;
 }

 /* BUTTONS */

 .hero-left-btns {
   display: flex;
   gap: 18px;
   flex-wrap: wrap;
   margin-bottom: 50px;
 }

 .btn-gold {
   background: var(--primary);
   color: #fff;
   padding: 16px 28px;
   border-radius: 14px;
   text-decoration: none;
   font-weight: 600;
   transition: .3s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 .btn-gold:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 30px rgba(38, 56, 217, 0.2);
 }

 .btn-ghost-w {
   border: 1px solid #dbe4ff;
   color: var(--primary);
   background: #fff;
   padding: 16px 28px;
   border-radius: 14px;
   text-decoration: none;
   font-weight: 600;
   transition: .3s ease;
 }

 .btn-ghost-w:hover {
   background: var(--primary-soft);
 }

 /* STATS */

 .hero-stats {
   display: flex;
   gap: 22px;
   flex-wrap: wrap;
 }

 .hs {
   min-width: 120px;
 }

 .hs .n {
   font-size: 34px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 6px;
 }

 .hs .l {
   color: var(--muted);
   font-size: 14px;
 }

 /* RIGHT */

 .hero-right {
   display: flex;
   flex-direction: column;
   gap: 28px;
 }

 /* IMAGE */

 .hero-image-wrap {
   position: relative;
   height: 420px;
   border-radius: 30px;
   overflow: hidden;
   box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
 }

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

 .hero-image-wrap::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to top,
       rgba(15, 23, 42, 0.7),
       rgba(15, 23, 42, 0.05));
 }

 /* IMAGE OVERLAY CARD */

 .image-overlay-card {
   position: absolute;
   left: 30px;
   bottom: 30px;
   z-index: 2;
   max-width: 340px;
 }

 .image-overlay-card span {
   display: inline-block;
   background: var(--primary);
   color: #fff;
   padding: 8px 16px;
   border-radius: 999px;
   font-size: 13px;
   margin-bottom: 14px;
   font-weight: 600;
 }

 .image-overlay-card h4 {
   color: #fff;
   font-size: 30px;
   line-height: 1.3;
   font-weight: 700;
 }

 /* TRUST GRID */

 .trust-grid {
   display: block;
 }

 /* TRUST CARD */



 /* ICON */

 .tc-icon {
   width: 60px;
   height: 60px;
   border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--primary-soft);
   font-size: 28px;
   margin-bottom: 20px;
 }

 /* CONTENT */

 .tc-body h4 {
   color: var(--text);
   font-size: 22px;
   margin-bottom: 12px;
   line-height: 1.3;
 }

 .tc-body p {
   color: var(--muted);
   line-height: 1.7;
   font-size: 15px;
 }

 /* BADGE */

 .tc-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   padding: 8px 14px;
   border-radius: 999px;
   background: var(--primary);
   color: #fff;
   font-size: 12px;
   font-weight: 600;
 }

 /* ANIMATION */

 .reveal {
   animation: fadeUp .7s ease;
 }

 @keyframes fadeUp {

   from {
     opacity: 0;
     transform: translateY(30px);
   }

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

 }

 /* RESPONSIVE */

 @media(max-width:1100px) {

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

   .hero-left h1 {
     font-size: 56px;
   }

 }

 @media(max-width:768px) {

   .hero {
     padding: 100px 6%;
     gap: 50px;
   }

   .hero-left h1 {
     font-size: 42px;
     line-height: 1.15;
   }

   .hero-left p {
     font-size: 16px;
   }

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

   .hero-image-wrap {
     height: 320px;
   }

   .image-overlay-card {
     left: 20px;
     bottom: 20px;
   }

   .image-overlay-card h4 {
     font-size: 24px;
   }

   .hero-stats {
     gap: 18px;
   }

   .hs .n {
     font-size: 28px;
   }

 }

 .trust-card {
   background: var(--glass-bg);
   backdrop-filter: blur(var(--glass-blur));
   border: 1px solid var(--glass-border);
   box-shadow: var(--glass-shadow);
   padding: 28px 32px;
   display: flex;
   align-items: flex-start;
   gap: 18px;
   transition: transform .3s, box-shadow .3s;
   position: relative;
   overflow: hidden;
   border-radius: 10px;
 }

 .trust-card:hover {
   transform: translateX(6px);
   box-shadow: 0 8px 40px rgba(17, 24, 16, .12)
 }

 .trust-card::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 3px;
   background: var(--sec-color)
 }

 .tc-icon {
   width: 48px;
   height: 48px;
   border-radius: 10px;
   background: var(--goldfade);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   flex-shrink: 0
 }

 .tc-body h4 {
   font-size: .95rem;
   font-weight: 700;
   margin-bottom: 5px
 }

 .tc-body p {
   font-size: .8rem;
   color: var(--ink2);
   line-height: 1.6
 }

 .tc-badge {
   position: absolute;
   top: 16px;
   right: 16px;
   background: var(--goldfade);
   border: 1px solid var(--goldborder);
   color: var(--sec-color);
   font-size: .68rem;
   font-weight: 700;
   padding: 3px 10px;
   border-radius: 100px;
   letter-spacing: .05em
 }

 /* ── SECTION BASE ── */
 .section {
   padding: 96px 56px
 }

 .section-dark {
   background: var(--forest)
 }

 .section-cream {
   background: var(--cream)
 }

 .eyebrow {
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--sec-color);
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px
 }

 .eyebrow::before {
   content: '';
   display: block;
   width: 20px;
   height: 2px;
   background: var(--sec-color)
 }

 .eyebrow.light {
   color: var(--gold2)
 }

 .eyebrow.light::before {
   background: var(--gold2)
 }

 .sec-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(2rem, 3.2vw, 2.7rem);
   line-height: 1.12;
   letter-spacing: -.015em;
   margin-bottom: 14px
 }

 .sec-sub {
   font-size: .9rem;
   line-height: 1.8;
   color: var(--ink2);
   max-width: 480px
 }

 /* ── STORY ── */
 .story-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 72px;
   align-items: center;
 }

 .story-number {
   font-family: 'Cormorant Garamond', serif;
   font-size: 10rem;
   font-weight: 400;
   color: rgba(17, 24, 16, .04);
   line-height: 1;
   position: absolute;
   top: -20px;
   left: -20px;
   pointer-events: none;
   user-select: none;
 }

 .story-visual {
   position: relative;
   padding: 24px
 }

 .story-card-big {
   background: var(--forest);
   border-radius: 20px;
   padding: 48px 40px;
   position: relative;
   overflow: hidden;
 }

 .story-card-big::before {
   content: '';
   position: absolute;
   top: -60px;
   right: -60px;
   width: 280px;
   height: 280px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(184, 137, 42, .14) 0%, transparent 65%);
 }

 .sbig-num {
   font-family: 'Cormorant Garamond', serif;
   font-size: 5rem;
   color: var(--gold2);
   line-height: 1;
   margin-bottom: 8px
 }

 .sbig-label {
   font-size: .85rem;
   color: rgba(255, 255, 255, .5);
   line-height: 1.6;
   margin-bottom: 32px
 }

 .sbig-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
 }

 .spill {
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .1);
   color: rgba(255, 255, 255, .65);
   font-size: .75rem;
   padding: 6px 14px;
   border-radius: 100px;
   font-weight: 500
 }

 .story-float {
   position: absolute;
   bottom: -20px;
   right: -20px;
   background: var(--sec-color);
   border-radius: 12px;
   padding: 18px 22px;
   box-shadow: 0 8px 32px rgba(184, 137, 42, .4);
 }

 .sf-num {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.6rem;
   color: var(--white);
   line-height: 1;
   margin-bottom: 2px
 }

 .sf-label {
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--white);
   font-weight: 600
 }

 .story-text p {
   font-size: .93rem;
   line-height: 1.85;
   color: var(--ink2);
   margin-bottom: 20px
 }

 .story-text p strong {
   color: var(--ink);
   font-weight: 700
 }

 /* Values inline */
 .value-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 32px
 }

 .vpill {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--white);
   border: 1px solid rgba(17, 24, 16, .08);
   border-radius: 100px;
   padding: 9px 18px;
   font-size: .8rem;
   font-weight: 600;
   box-shadow: 0 2px 8px rgba(17, 24, 16, .05);
 }

 .vpill-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--sec-color);
   flex-shrink: 0
 }

 /* ── MILESTONES TIMELINE ── */
 .timeline {
   position: relative;
   padding-left: 48px;
   margin-top: 56px;
 }

 .timeline::before {
   content: '';
   position: absolute;
   left: 16px;
   top: 8px;
   bottom: 8px;
   width: 2px;
   background: rgba(255, 255, 255, .1);
 }

 .tl-item {
   position: relative;
   margin-bottom: 44px;
 }

 .tl-item:last-child {
   margin-bottom: 0
 }

 .tl-dot {
   position: absolute;
   left: -40px;
   top: 4px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--sec-color);
   box-shadow: 0 0 0 4px rgba(184, 137, 42, .2);
 }

 .tl-year {
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--gold2);
   margin-bottom: 6px
 }

 .tl-title {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.1rem;
   color: #fff;
   margin-bottom: 6px
 }

 .tl-desc {
   font-size: .83rem;
   color: rgba(255, 255, 255, .5);
   line-height: 1.65
 }

 /* ── LEADERSHIP ── */
 .team-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 56px;
 }

 .team-card {
   background: var(--white);
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid rgba(17, 24, 16, .07);
   transition: transform .3s, box-shadow .3s;
 }

 .team-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 16px 48px rgba(17, 24, 16, .1)
 }

 .team-avatar {
   height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 3.5rem;
   position: relative;
   overflow: hidden;
 }

 .team-card:nth-child(1) .team-avatar {
   background: linear-gradient(135deg, #1a3d1e, #0e2b12)
 }

 .team-card:nth-child(2) .team-avatar {
   background: linear-gradient(135deg, #2a1f0e, #1a1208)
 }

 .team-card:nth-child(3) .team-avatar {
   background: linear-gradient(135deg, #0e1a2b, #080f1a)
 }

 .team-initials {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .1);
   border: 2px solid rgba(255, 255, 255, .15);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.8rem;
   color: var(--gold2);
   font-style: italic;
 }

 .team-info {
   padding: 24px 26px
 }

 .team-info h3 {
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 3px
 }

 .team-info .role {
   font-size: .76rem;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--sec-color);
   font-weight: 700;
   margin-bottom: 10px
 }

 .team-info p {
   font-size: .8rem;
   color: var(--ink2);
   line-height: 1.6
 }

 /* ── NUMBERS STRIP ── */
 .numbers-strip {
   background: var(--white);
   padding: 72px 56px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .numbers-strip::after {
   content: 'TRUST';
   position: absolute;
   right: -20px;
   top: 50%;
   transform: translateY(-50%);
   font-family: 'Cormorant Garamond', serif;
   font-size: 14rem;
   color: rgba(14, 43, 18, .06);
   line-height: 1;
   pointer-events: none;
   user-select: none;
 }

 .ns-item .big {
   font-family: 'Cormorant Garamond', serif;
   font-size: 3rem;
   color: var(--forest);
   line-height: 1;
   margin-bottom: 6px
 }

 .ns-item .small {
   font-size: .76rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: rgba(14, 43, 18, .55)
 }

 /* ── TRUST SIGNALS ── */
 .trust-grid {
   gap: 24px;
   margin-top: 56px;
 }

 .trust-sig {
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: var(--radius);
   padding: 36px;
   transition: border-color .3s;
 }

 .trust-sig:hover {
   border-color: var(--goldborder)
 }

 .ts-icon {
   font-size: 2rem;
   margin-bottom: 16px
 }

 .trust-sig h3 {
   font-family: 'Cormorant Garamond', serif;
   font-size: 1.2rem;
   color: #fff;
   margin-bottom: 10px
 }

 .trust-sig p {
   font-size: .84rem;
   color: rgba(255, 255, 255, .5);
   line-height: 1.7
 }

 .trust-sig .ts-tag {
   display: inline-block;
   margin-top: 14px;
   background: var(--goldfade);
   border: 1px solid var(--goldborder);
   color: var(--gold2);
   font-size: .68rem;
   font-weight: 700;
   padding: 4px 12px;
   border-radius: 100px;
   letter-spacing: .05em
 }

 /* ── TESTIMONIALS ── */
 .testi-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 56px;
 }

 .testi-card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 32px;
   border: 1px solid rgba(17, 24, 16, .06);
   position: relative;
   transition: transform .3s, box-shadow .3s;
 }

 .testi-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow)
 }

 .testi-card::before {
   content: '"';
   position: absolute;
   top: 20px;
   right: 24px;
   font-family: 'Cormorant Garamond', serif;
   font-size: 5rem;
   color: rgba(17, 24, 16, .05);
   line-height: 1
 }

 .tc-stars {
   color: var(--sec-color);
   font-size: .82rem;
   letter-spacing: 2px;
   margin-bottom: 14px
 }

 .testi-card blockquote {
   font-size: .88rem;
   line-height: 1.75;
   color: var(--ink2);
   font-style: italic;
   margin-bottom: 22px
 }

 .tc-author {
   display: flex;
   align-items: center;
   gap: 12px
 }

 .tc-av {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--sec-color), #7a5a10);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: .8rem;
   color: var(--white);
   flex-shrink: 0
 }

 .tc-name {
   font-size: .85rem;
   font-weight: 700
 }

 .tc-role {
   font-size: .72rem;
   color: var(--ink3)
 }

 /* ── CTA BAND ── */
 .cta-band {
   background: var(--forest);
   padding: 96px 56px;
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 56px;
   align-items: center;
   position: relative;
   overflow: hidden;
 }

 .cta-band::before {
   content: '';
   position: absolute;
   right: -120px;
   top: -120px;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(184, 137, 42, .1) 0%, transparent 65%)
 }

 .cta-band h2 {
   font-family: 'Cormorant Garamond', serif;
   font-size: clamp(2rem, 3.2vw, 2.8rem);
   color: #fff;
   line-height: 1.1;
   letter-spacing: -.015em;
   margin-bottom: 14px
 }

 .cta-band p {
   font-size: .9rem;
   color: rgba(255, 255, 255, .5);
   line-height: 1.75;
   max-width: 500px
 }

 .cta-actions {
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex-shrink: 0;
   min-width: 210px
 }

 .btn-dark {
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .14);
   color: rgba(255, 255, 255, .7);
   padding: 13px 28px;
   border-radius: 8px;
   font-size: .82rem;
   font-weight: 500;
   text-decoration: none;
   text-align: center;
   transition: all .2s;
   display: block
 }

 .btn-dark:hover {
   border-color: rgba(255, 255, 255, .4);
   color: #fff
 }



 /* ── REVEAL ── */
 .reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .6s ease, transform .6s ease
 }

 .reveal.on {
   opacity: 1;
   transform: none
 }

 .reveal-left {
   opacity: 0;
   transform: translateX(-24px);
   transition: opacity .6s ease, transform .6s ease
 }

 .reveal-left.on {
   opacity: 1;
   transform: none
 }

 /* ── RESPONSIVE ── */
 @media(max-width:1100px) {
   .hero {
     grid-template-columns: 1fr
   }

   .hero-right {
     display: none
   }

   .story-grid {
     grid-template-columns: 1fr;
     gap: 40px
   }

   .team-grid {
     grid-template-columns: 1fr 1fr
   }

   .numbers-strip {
     grid-template-columns: repeat(2, 1fr)
   }

   .trust-grid {
     grid-template-columns: 1fr
   }

   .testi-grid {
     grid-template-columns: 1fr 1fr
   }

   .cta-band {
     grid-template-columns: 1fr
   }

   .footer-grid {
     grid-template-columns: 1fr 1fr;
     gap: 36px
   }

   nav,
   .topbar,
   .section,
   .cta-band,
   .numbers-strip,
   footer {
     padding-left: 32px;
     padding-right: 32px
   }
 }

 @media(max-width:720px) {
   nav {
     padding: 0 20px
   }

   .nav-links {
     display: none
   }

   .topbar {
     display: none
   }

   .hero-left {
     padding: 80px 24px
   }

   .team-grid,
   .testi-grid,
   .footer-grid {
     grid-template-columns: 1fr
   }

   .hero-stats {
     flex-wrap: wrap;
     gap: 24px
   }

   .section {
     padding: 60px 20px
   }

   .cta-band {
     padding: 60px 20px
   }

   .numbers-strip {
     padding: 48px 20px;
     grid-template-columns: 1fr 1fr
   }

   footer {
     padding: 50px 20px 28px
   }
 }