*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#003153;--nd:#001F3A;--nm:#01426E;--np:#2E6F9E;
  --nt:#D6E6F2;--nw:#EBF3FA;
  --white:#fff;--off:#F8F7F5;--stone:#E8E5DF;--rule:#D4D1CB;
  --text:#1A1A1A;--muted:#6A6A6A;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--white);color:var(--text);font-size:15px;font-weight:300;line-height:1.7;overflow-x:hidden}

/* ===== NAVIGATION ===== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  background:var(--white);height:80px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 60px;
  border-bottom:1px solid var(--rule);
  transition:box-shadow .3s;
}

nav.scrolled{box-shadow:0 2px 24px rgba(0,0,0,.07)}
.nlogo{cursor:pointer;display:flex;align-items:center}
.nlogo img{height:64px;width:auto}
.nmain{display:flex;align-items:center;gap:0;list-style:none}
.nmain>li{position:relative}
.nmain>li>a{
  font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--text);text-decoration:none;cursor:pointer;
  display:block;padding:28px 20px;
  position:relative;transition:color .2s;
}
.nmain>li>a::after{
  content:'';position:absolute;bottom:0;left:20px;right:20px;
  height:2px;background:var(--navy);transform:scaleX(0);transition:transform .3s;
}
.nmain>li:hover>a{color:var(--navy)}
.nmain>li:hover>a::after{transform:scaleX(1)}
.nmain>li>a.active{color:var(--navy)}
.nmain>li>a.active::after{transform:scaleX(1)}
.ncta{
  font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--white);background:var(--navy);padding:11px 26px;
  cursor:pointer;transition:background .3s;border:none;
}
.ncta:hover{background:var(--nm)}
.nhas-arrow>a::before{content:'';position:absolute;right:8px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top:5px solid currentColor;margin-top:2px}

/* =========================
   HAMBURGER
========================= */

.menu-toggle{
    display:none;
    width:40px;
    height:40px;
    cursor:pointer;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:6px;
}

.menu-toggle span{
    width:26px;
    height:2px;
    background:var(--text);
    transition:.3s;
}

.nmain.open{
    display:flex;
}

.nmain>li{
    width:100%;
}

.nmain>li>a{
    padding:18px 24px;
    border-bottom:1px solid var(--rule);
}

.mega,
.dropdown{
    position:static;
    display:none;
    width:100%;
    min-width:100%;
    box-shadow:none;
    border:none;
}

.nmain>li:hover .mega,
.nmain>li:hover .dropdown{
    display:none;
}

@media (max-width:1100px){

    nav{
        padding:0 20px;
    }

    .menu-toggle{
        display:flex;
    }

    .ncta{
        display:none;
    }

    .nmain{
        position:fixed;
        top:80px;
        left:0;
        width:100%;
        height:calc(100vh - 80px);
        background:#fff;
        display:none;
        flex-direction:column;
        overflow-y:auto;
        z-index:99999;
    }

    .nmain.open{
        display:flex !important;
    }

    .nmain > li{
        width:100%;
    }

    .nmain > li > a{
        display:block;
        padding:20px;
        border-bottom:1px solid var(--rule);
    }

    .mega,
    .dropdown{
        position:static !important;
        width:100%;
        min-width:100%;
        display:none !important;
        box-shadow:none;
        border:none;
    }

    .mobile-parent.open > .mega{
        display:flex !important;
        flex-direction:column;
    }

    .mobile-parent.open > .dropdown{
        display:block !important;
    }

    /* Disable desktop hover on mobile */
    .nmain > li:hover .mega,
    .nmain > li:hover .dropdown{
        display:none !important;
    }

    .mobile-parent.open:hover > .mega{
        display:flex !important;
    }

    .mobile-parent.open:hover > .dropdown{
        display:block !important;
    }

}

.menu-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* ===== MEGA MENU ===== */
.mega,.dropdown{
  position:absolute;top:100%;left:0;
  background:var(--white);
  border-top:2px solid var(--navy);
  border-bottom:1px solid var(--rule);
  border-left:1px solid var(--rule);
  border-right:1px solid var(--rule);
  box-shadow:0 12px 48px rgba(0,0,0,.08);
  display:none;z-index:400;
}
.nmain>li:hover .mega,
.nmain>li:hover .dropdown{display:block}
.mega{padding:36px 40px;min-width:720px;display:none;gap:0}
.nmain>li:hover .mega{display:flex}
.mega-cols{display:flex;gap:0;width:100%}
.mega-col{flex:1;padding:0 28px 0 0;border-right:1px solid var(--rule)}
.mega-col:last-child{border-right:none;padding-right:0}
.mega-col+.mega-col{padding-left:28px}
.mega-col-title{
  font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}
.mega-link{
  display:flex;align-items:center;justify-content:space-between;
  font-size:14px;font-weight:300;color:var(--text);
  padding:7px 0;cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color .2s,padding-left .2s;
  font-family:var(--serif);
}
.mega-link:hover{color:var(--navy);padding-left:4px}
.mega-link-arr{font-size:12px;color:var(--muted);transition:transform .2s}
.mega-link:hover .mega-link-arr{transform:translateX(4px);color:var(--navy)}
.mega-sub{
  font-size:11.5px;font-weight:300;color:var(--muted);
  padding:4px 0 4px 12px;display:block;cursor:pointer;
  border-left:1px solid var(--rule);margin-left:4px;margin-bottom:2px;
  transition:color .2s,border-left-color .2s,padding-left .2s;
}
.mega-sub:hover{color:var(--navy);border-left-color:var(--navy);padding-left:16px}
.mega-featured{
  background:var(--navy);color:var(--white);
  padding:24px;margin-top:auto;
  font-size:12px;font-weight:300;line-height:1.7;
}
.mega-featured strong{font-weight:500;display:block;font-family:var(--serif);font-size:16px;margin-bottom:6px}
.dropdown{padding:16px 0;min-width:220px}
.drop-link{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:300;color:var(--text);
  padding:9px 24px;cursor:pointer;transition:color .2s,background .2s;
}
.drop-link:hover{color:var(--navy);background:var(--off)}

/* ===== PAGE SYSTEM ===== */
.page{display:none;padding-top:96px}
.page.active{display:block}

/* ===== SECTIONS ===== */
.sec{padding:50px 60px}
.s-w{background:var(--white)}
.s-o{background:var(--off)}
.s-st{background:var(--stone)}
.s-nv{background:var(--nd);color:var(--white)}
.s-nm{background:var(--navy);color:var(--white)}
/* Legacy compat */
.s-dark,.section-prussian{background:var(--nd);color:var(--white)}
.s-mid,.section-prussian-mid{background:var(--navy);color:var(--white)}
.s-wash,.section-wash{background:var(--nw)}
.s-near,.section-white,.s-white{background:var(--white)}

/* SECTION RULE HEADER */
.sec-hd{margin-bottom:56px}
.sec-tag{
  font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--rule);
  padding-top:16px;margin-bottom:20px;display:block;
}
.sec-tag-w{color:rgba(255,255,255,.35);border-top-color:rgba(255,255,255,.18)}

/* TYPOGRAPHY */
.t-hero{font-family:var(--serif);font-size:clamp(56px,8vw,96px);font-weight:300;line-height:1.05;color:var(--white)}
.t-hero em{font-style:italic;color:rgba(255,255,255,.55)}
.t-h1{font-family:var(--serif);font-size:clamp(40px,5.5vw,72px);font-weight:300;line-height:1.08;color:var(--text)}
.t-h1 em{font-style:italic}
.t-h1-w{color:var(--white)}
.t-h2{font-family:var(--serif);font-size:clamp(28px,4vw,52px);font-weight:300;line-height:1.12;color:var(--text)}
.t-h2 em{font-style:italic}
.t-h2-w{color:var(--white)}
.t-h3{font-family:var(--serif);font-size:clamp(20px,3vw,32px);font-weight:400;line-height:1.2;color:var(--text)}
.t-body{font-size:18px;font-weight:400;line-height:1.9;color:var(--muted);margin-bottom:20px}
.t-body-w{color:rgba(255,255,255,.5)}
.t-eye{font-size:12.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--np);margin-bottom:16px;display:block}
.t-eye-w{color:rgba(255,255,255,.4)}

/* RULE LINE */
.rule{width:100%;height:1px;background:var(--rule)}
.rule-short{width:40px;height:2px;background:var(--navy);display:block;margin-bottom:20px}
.rule-short-w{background:rgba(255,255,255,.45)}

/* ===== HERO (FULL SCREEN) ===== */
.hero{
  min-height:100vh;position:relative;
  display:flex;align-items:flex-end;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.28;
  background-image:url('https://images.unsplash.com/photo-1495603889488-42d1d66e5523?w=1800&q=80');
}
.hero-ov{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,20,40,.98) 0%,rgba(0,31,58,.88) 45%,rgba(0,49,83,.55) 100%);
}
.hero-grid-pat{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
}
.hero-c{
  position:relative;z-index:2;
  padding:100px 60px 110px;max-width:680px;
}
.hero-eyebrow{
  display:flex;align-items:center;gap:16px;margin-bottom:36px;
}
.hero-ey-line{width:40px;height:1px;background:rgba(255,255,255,.4)}
.hero-ey-text{font-size:13px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.4)}
.hero-mets{
  position:absolute;bottom:64px;right:5%;z-index:3;
  display:flex;gap:40px;
}
@media (max-width: 959px){
  .hero-mets{
    display: none;
  }
}
.hero-met{text-align:right}
.hero-met-v{font-family:var(--serif);font-size:40px;font-weight:300;color:var(--white);line-height:1}
.hero-met-v span{font-size:18px;color:rgba(255,255,255,.4)}
.hero-met-l{font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:5px}
.hero-line{position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(255,255,255,.1)}

/* ===== BUTTONS ===== */
.btn-arr{
  display:inline-flex;align-items:center;gap:12px;
  font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--navy);cursor:pointer;transition:gap .3s;text-decoration:none;
}
.btn-arr::after{content:'→';font-size:14px}
.btn-arr:hover{gap:18px}
.btn-arr-w{color:rgba(255,255,255,.7)}
.btn-arr-w:hover{color:var(--white)}
.btn-s{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--white);background:var(--navy);padding:13px 32px;
  cursor:pointer;transition:background .3s;border:none;text-decoration:none;
}
.btn-s:hover{background:var(--nm)}
.btn-s-inv{background:var(--white);color:var(--nd)}
.btn-s-inv:hover{background:var(--nt)}
.btn-o{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--navy);border:1px solid var(--navy);padding:12px 28px;
  cursor:pointer;transition:all .3s;text-decoration:none;
}
.btn-o:hover{background:var(--navy);color:var(--white)}
.btn-o-w{color:var(--white);border-color:rgba(255,255,255,.45)}
.btn-o-w:hover{background:rgba(255,255,255,.1)}

/* ===== TICKER ===== */
.ticker{background:var(--navy);padding:10px 60px;display:flex;align-items:center;gap:36px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.07)}
.tk-lbl{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.35);flex-shrink:0;border-right:1px solid rgba(255,255,255,.12);padding-right:18px}
.tk-s{display:flex;gap:56px;animation:tick 28s linear infinite}
.tk-i{font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;display:flex;align-items:center;gap:10px}
.tk-d{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.2)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== GROUP CARDS ===== */
.group-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
.group-card{border-right:1px solid var(--rule);overflow:hidden;cursor:pointer;transition:background .3s}
.group-card:last-child{border-right:none}
.group-card-img{width:100%;height:220px;object-fit:cover;display:block;filter:grayscale(0.15) brightness(.9);transition:all .5s}
.group-card:hover .group-card-img{filter:grayscale(0) brightness(1.02);transform:scale(1.02)}
.group-card-body{padding:28px 22px}
.group-card-n{font-size:12px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.group-card-name{font-family:var(--serif);font-size:21px;font-weight:400;color:var(--text);margin-bottom:10px}
.group-card-desc{font-size:12.5px;font-weight:300;line-height:1.8;color:var(--muted);margin-bottom:16px}
.group-card-lnk{font-size:12.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:8px;transition:gap .3s}
.group-card-lnk::after{content:'→'}
.group-card:hover .group-card-lnk{gap:14px}

/* ===== STAT ROW ===== */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
.stat-blk{padding:44px 28px;border-right:1px solid var(--rule)}
.stat-blk:last-child{border-right:none}
.stat-v{font-family:var(--serif);font-size:56px;font-weight:300;color:var(--navy);line-height:1;margin-bottom:8px}
.stat-v span{font-size:22px;color:var(--np)}
.stat-l{font-size:12.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* ===== NEWS ===== */
.ngrid{display:grid;grid-template-columns:2fr 1fr 1fr;border:1px solid var(--rule)}
.nc{border-right:1px solid var(--rule);padding:36px 28px;display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:background .3s}
.nc:last-child{border-right:none}
.nc:hover{background:var(--off)}
.nc.feat{background:var(--navy);color:var(--white)}
.nc.feat:hover{background:var(--nm)}
.ntag{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--np)}
.nc.feat .ntag{color:rgba(255,255,255,.45)}
.ntit{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.3;color:var(--white);flex:1}
.ntit-sm{font-family:var(--serif);font-size:18px;font-weight:400;line-height:1.4;color:var(--text);flex:1}
.nexc{font-size:12.5px;font-weight:300;line-height:1.85;color:rgba(255,255,255,.45)}
.ndate{font-size:13px;font-weight:400;letter-spacing:1px;color:var(--muted);margin-top:auto}
.ndatel{color:rgba(255,255,255,.3)}

/* ===== AWARDS ===== */
.award-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
.award{padding:32px 24px;border-right:1px solid var(--rule)}
.award:last-child{border-right:none}
.award-yr{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.award-n{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--text);margin-bottom:6px;line-height:1.3}
.award-org{font-size:11px;font-weight:300;color:var(--muted)}

/* ===== PAGE HERO ===== */
.phero{
  min-height:58vh;display:flex;align-items:flex-end;
  padding:60px 60px 72px;position:relative;overflow:hidden;
  background-size:cover;background-position:center;
}
.phero::before{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(0,31,58,.95) 50%,rgba(0,49,83,.6));z-index:1}
.phero-c{position:relative;z-index:2}
.phero-bc{
  font-size:12.5px;font-weight:500;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:18px;
  display:flex;align-items:center;gap:8px;
}
.phero-bc::before{content:'';width:24px;height:1px;background:rgba(255,255,255,.3)}

/* ===== BACK BAR ===== */
.back-bar{padding:16px 60px;background:var(--off);border-bottom:1px solid var(--rule)}
.back-btn{font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--np);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.back-btn:hover{color:var(--navy)}

/* ===== SERVICE GRIDS ===== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.svc-grid-2,.svc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.svc{padding:44px 32px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--white)}
.svc2{background:var(--white);padding:44px 36px}
.svc:nth-child(3n){border-right:none}
.svc-num,.snumd{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--np);margin-bottom:14px}
.svc-numw{color:rgba(255,255,255,.3)}
.svc-tit,.stitle{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--text);margin-bottom:12px;line-height:1.2}
.svc-tit-w,.svc-titw,.stitle-w{color:var(--white)}
.svc-desc,.svc-desc2,.sdesc2{font-size:13px;font-weight:300;line-height:1.85;color:var(--muted)}
.svc-desc-w,.svc-descw,.sdesc2-w{color:rgba(255,255,255,.42)}

/* ===== PRODUCTS ===== */
.pgrid,.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pcard{background:var(--white);padding:52px 44px}
.pcode{font-size:12.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--np);margin-bottom:16px}
.pname{font-family:var(--serif);font-size:38px;font-weight:400;color:var(--text);margin-bottom:8px;line-height:1.1}
.ptype{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.pdesc{font-size:13.5px;font-weight:300;line-height:1.9;color:var(--muted);margin-bottom:20px}
.pfl{list-style:none;margin-bottom:28px}
.pfl li{font-size:12.5px;font-weight:300;color:var(--text);padding:8px 0;border-bottom:1px solid var(--rule);display:flex;align-items:flex-start;gap:10px}
.pfl li::before{content:'—';color:var(--np);flex-shrink:0;font-size:11px;margin-top:1px}
.ptag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;background:var(--nw);color:var(--nm);padding:5px 12px;margin-right:6px;margin-bottom:6px}

/* ===== PARTNERS ===== */
.pargrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.parcard{padding:36px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column}
.parcard:nth-child(3n){border-right:none}
.parcard a.parsite{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--np);text-decoration:none;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule);transition:color .2s,gap .2s}
.parcard a.parsite::after{content:'→'}
.parcard a.parsite:hover{color:var(--navy);gap:10px}
.parcard a.parname-lnk{text-decoration:none;color:inherit;transition:color .2s}
.parcard a.parname-lnk:hover{color:var(--navy)}
.parcard:nth-child(3n){border-right:none}
.parname{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--text);margin-bottom:10px}
.parcat{font-size:12.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--np);margin-bottom:16px}
.pardesc{font-size:13px;font-weight:300;line-height:1.85;color:var(--muted)}

/* ===== VALUES ===== */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.vi{background:var(--white);padding:44px 32px;position:relative;overflow:hidden}
.vnum{font-family:var(--serif);font-size:50px;font-weight:300;line-height:1;color:rgba(0,49,83,.04);position:absolute;top:16px;right:22px}
.vlbl{font-size:12.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--np);margin-bottom:12px}
.vtit{font-family:var(--serif);font-size:25px;font-weight:400;color:var(--text);margin-bottom:12px;line-height:1.2}
.vdesc{font-size:13px;font-weight:300;line-height:1.9;color:var(--muted)}

/* ===== LEADERSHIP ===== */
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
.lcard{padding:36px 26px;border-right:1px solid var(--rule);transition:background .3s}
.lcard:last-child{border-right:none}
.lcard:hover{background:var(--off)}
.lavt{width:52px;height:52px;border-radius:50%;background:var(--nd);border:1px solid var(--nt);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;font-weight:400;color:var(--white);margin-bottom:18px}
.lname{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--text);line-height:1.2;margin-bottom:5px}
.lrole{font-size:12.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.lbio{font-size:12px;font-weight:300;line-height:1.85;color:var(--muted)}

/* Legacy leadership dark variant */
.lcard-dark{background:var(--nd)!important}
.lcard-dark .lname{color:var(--white)}
.lcard-dark .lrole{color:rgba(255,255,255,.32)}
.lcard-dark .lbio{color:rgba(255,255,255,.36)}
.lcard-dark:hover{background:var(--nm)!important}

/* ===== COMMODITY/AGRI CARDS ===== */
.com-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.com-card{padding:40px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:pointer;transition:background .3s}
.com-card:hover{background:var(--off)}
.com-icon{width:44px;height:44px;border-radius:50%;background:var(--nw);border:1px solid var(--nt);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.com-icon svg{width:20px;height:20px;fill:var(--navy)}
.com-name{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--text);margin-bottom:10px}
.com-desc{font-size:12.5px;font-weight:300;line-height:1.8;color:var(--muted);margin-bottom:18px}
.com-lnk{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:8px;cursor:pointer;transition:gap .3s}
.com-lnk::after{content:'→'}
.com-card:hover .com-lnk{gap:14px}

/* ===== INFRA CARDS ===== */
.infra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.inf-card{padding:36px 28px;border-right:1px solid var(--rule);cursor:pointer;transition:background .3s}
.inf-card:nth-child(3n){border-right:none}
.inf-card:hover{background:var(--off)}
.inf-icon{font-size:24px;margin-bottom:14px}
.inf-name{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--text);margin-bottom:8px}
.inf-desc{font-size:12.5px;font-weight:300;line-height:1.8;color:var(--muted);margin-bottom:16px}
.inf-lnk{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:8px;cursor:pointer}
.inf-lnk::after{content:'→'}

/* ===== GROUP STRUCTURE (5-col) ===== */
.ggrid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--rule)}
.ge{padding:32px 22px;border-right:1px solid var(--rule);transition:background .3s}
.ge:last-child{border-right:none}
.ge:hover{background:var(--off)}
.getag{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.gename{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--text);margin-bottom:10px;line-height:1.3}
.gedesc{font-size:11.5px;font-weight:300;color:var(--muted);line-height:1.75}

/* Dark variant for ggrid */
.s-nv .ge,.s-dark .ge{border-color:rgba(255,255,255,.1)!important;background:transparent}
.s-nv .ge:hover,.s-dark .ge:hover{background:var(--nm)!important}
.s-nv .getag,.s-dark .getag{color:rgba(255,255,255,.3)}
.s-nv .gename,.s-dark .gename{color:var(--white)}
.s-nv .gedesc,.s-dark .gedesc{color:rgba(255,255,255,.4)}

/* ===== REACH ===== */
.rsgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:28px}
.rsbox{background:var(--white);padding:28px 24px}
.rsv{font-family:var(--serif);font-size:48px;font-weight:300;color:var(--navy);line-height:1;margin-bottom:7px}
.rsv sup{font-size:20px;color:var(--np);vertical-align:top;margin-top:8px;display:inline-block}
.rsl{font-size:12.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* Dark reach variant */
.s-nv .rsgrid,.s-nm .rsgrid{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.1)!important}
.s-nv .rsbox,.s-nm .rsbox{background:var(--nd)!important}
.s-nv .rsv,.s-nm .rsv{color:var(--white)!important}
.s-nv .rsv sup,.s-nm .rsv sup{color:rgba(255,255,255,.4)!important}
.s-nv .rsl,.s-nm .rsl{color:rgba(255,255,255,.35)!important}

/* ===== CTA BAND ===== */
.cta-band{background:var(--navy);padding:80px 60px;display:flex;align-items:center;justify-content:space-between;gap:36px}
.cta-band-txt{font-family:var(--serif);font-size:clamp(26px,3.5vw,44px);font-weight:300;color:var(--white);line-height:1.2;max-width:520px}
.cta-band-txt em{font-style:italic;color:rgba(255,255,255,.55)}
.cta-acts{display:flex;gap:14px;flex-shrink:0}

/* ===== CONTACT ===== */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.cblk{margin-bottom:32px}
.clbl{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:8px}
.cval{font-size:14px;font-weight:300;color:rgba(255,255,255,.7);line-height:1.7}
.ff{margin-bottom:18px}
.ff label{display:block;font-size:12.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ff input,.ff select,.ff textarea{width:100%;padding:13px 16px;background:var(--off);border:1px solid var(--rule);font-family:var(--sans);font-size:13.5px;font-weight:300;color:var(--text);outline:none;transition:border-color .3s}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--navy)}
.ff textarea{height:130px;resize:vertical}

/* ===== FOOTER ===== */
footer{background:var(--navy);padding:72px 60px 40px;border-top:1px solid rgba(161, 120, 120, 0.05)}
.ftop{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;margin-bottom:52px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.07)}
.flogo{height:54px;width:auto;margin-bottom:14px;display:block}
.ftagl{font-size:18px;font-weight:500;line-height:1.9;color:rgba(255,255,255,.28);max-width:250px;margin-bottom:26px}
.fcrow{font-size:16px;font-weight:300;color:rgba(255,255,255,.38);margin-bottom:9px;display:flex;align-items:flex-start;gap:11px}
.fcrow strong{font-weight:500;color:rgba(255,255,255,.22);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0;margin-top:2px;min-width:36px}
.fct{font-size:16px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:22px}
.fl{display:block;font-size:16px;font-weight:600;color:rgba(255,255,255,.38);text-decoration:none;margin-bottom:10px;cursor:pointer;transition:color .2s}
.fl:hover{color:rgba(255,255,255,.75)}
.fbot{display:flex;justify-content:space-between;align-items:center}
.fcopy{font-size:11px;font-weight:300;color:rgba(255,255,255,.18);letter-spacing:.5px}
.fblinks{display:flex;gap:24px}
.fbl{font-size:13px;font-weight:400;letter-spacing:1px;color:rgba(255,255,255,.18);cursor:pointer;transition:color .2s}
.fbl:hover{color:rgba(255,255,255,.5)}

/* ===== MISC ===== */
.cbadge{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--nm);background:var(--nw);border:1px solid var(--nt);padding:7px 13px;margin-right:7px;margin-bottom:7px}
.closing{padding:60px;background:var(--off);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center}
.closing p{font-family:var(--serif);font-size:clamp(18px,2.5vw,28px);font-weight:300;color:var(--text);line-height:1.55;max-width:760px;margin:0 auto}
.closing p em{font-style:italic;color:var(--np)}
.img-r{width:100%;height:420px;object-fit:cover;display:block}
.img-half{width:100%;height:360px;object-fit:cover;display:block}
.img-full{width:100%;height:480px;object-fit:cover;display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.twos{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:center}
.twor{display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:center}
.bd{font-size:14px;font-weight:300;line-height:1.95;color:var(--muted);margin-bottom:20px}
.bd-w{color:rgba(255,255,255,.5)}
.bq{font-family:var(--serif);font-size:21px;font-style:italic;font-weight:300;color:var(--text);line-height:1.65;border-left:2px solid var(--navy);padding-left:26px;margin-bottom:28px}
.pills{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.pill{padding:20px 18px;border:1px solid var(--rule);background:var(--off)}
.pll{font-size:12.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--nm);margin-bottom:7px}
.plt{font-size:12.5px;font-weight:300;line-height:1.7;color:var(--muted)}
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.sub-card{display:flex;flex-direction:column;border-right:1px solid var(--rule)}
.sub-card:last-child{border-right:none}
.sub-card-img{width:100%;height:200px;object-fit:cover;display:block}
.sub-card-body{padding:28px;flex:1;display:flex;flex-direction:column}
.sub-card-name{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--text);margin-bottom:10px}
.sub-card-desc{font-size:13px;font-weight:300;line-height:1.8;color:var(--muted);flex:1;margin-bottom:20px}
.sub-card-lnk{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--navy);cursor:pointer;display:flex;align-items:center;gap:8px;transition:gap .3s}
.sub-card-lnk::after{content:'→'}
.sub-card:hover .sub-card-lnk{gap:14px}
.fade{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.fade.vis{opacity:1;transform:none}
.arow{display:flex;gap:0;border:1px solid var(--rule)}
.aw{flex:1;padding:32px 24px;border-right:1px solid var(--rule)}
.aw:last-child{border-right:none}
.ay{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.an{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--text);line-height:1.3;margin-bottom:6px}
.aorg{font-size:11px;font-weight:300;color:var(--muted)}
/* Dark award row compat */
.s-nv .arow,.s-dark .arow{border-color:rgba(255,255,255,.1)}
.s-nv .aw,.s-dark .aw{border-right-color:rgba(255,255,255,.1)}
.s-nv .an,.s-dark .an{color:var(--white)}
.s-nv .ay,.s-dark .ay{color:rgba(255,255,255,.3)}
.s-nv .aorg,.s-dark .aorg{color:rgba(255,255,255,.4)}
.rtags{display:flex;flex-wrap:wrap;gap:10px}
.rtag{font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.18);padding:8px 14px;transition:all .3s}
.rtag:hover{background:rgba(255,255,255,.08);color:var(--white)}
.spec-tbl{width:100%;border-collapse:collapse;border:1px solid var(--rule)}
.spec-tbl th{padding:12px 16px;text-align:left;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;background:var(--nd);color:rgba(255,255,255,.6)}
.spec-tbl td{padding:11px 16px;font-size:13px;font-weight:300;color:var(--text);border-bottom:1px solid var(--rule)}
.spec-tbl tr:nth-child(even) td{background:var(--off)}
.spec-tbl .sv{font-weight:500;text-align:right;color:var(--navy)}

/* Dark variants for service grids used in sub-pages */
.s-nv .svc,.s-dark .svc{background:var(--navy)!important;border-color:rgba(255,255,255,.1)!important}
.s-nm .svc{background:var(--nm)!important;border-color:rgba(255,255,255,.1)!important}
@media(max-width:1100px){
  nav{padding:0 28px}.nmain{display:none}
  .sec,.phero{padding:72px 28px}
  .hero-c{padding:80px 28px 60px}
  .hero-mets{right:28px;bottom:40px;gap:28px}
  .two,.twos,.twor,.cgrid{grid-template-columns:1fr}
  .group-grid,.stat-row,.svc-grid,.svc-grid-2,.svc-grid2,.pgrid,.prod-grid,.lgrid{grid-template-columns:1fr 1fr}
  .vgrid,.ngrid,.com-grid,.infra-grid,.pargrid,.sub-grid,.award-row,.arow{grid-template-columns:1fr 1fr}
  .ggrid{grid-template-columns:1fr}
  .ftop{grid-template-columns:1fr 1fr}
  .cta-band{flex-direction:column}
  .ticker{padding:10px 28px}
  .rsgrid{grid-template-columns:1fr 1fr}
}

a.fl{display:block;text-decoration:none}
a.back-btn{text-decoration:none}
a.btn-s,a.btn-o,a.btn-arr{text-decoration:none;cursor:pointer}
a.mega-link,a.mega-sub,a.drop-link{text-decoration:none}
a.drop-link{display:flex;align-items:center;gap:8px}

/* ===== HERO LOGO ANIMATION SCENE ===== */
.hero-logo-scene{
  position:absolute;
  right:4%;top:50%;
  transform:translateY(-50%);
  width:460px;height:460px;
  display:flex;align-items:center;justify-content:center;
  z-index:1;pointer-events:none;
}
/* Outer ring — slow clockwise rotation */
.hlr-outer{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(46,111,158,0.2);
  animation:hlrSpin 60s linear infinite;
}
.hlr-outer::before,.hlr-outer::after{
  content:'';position:absolute;
  width:8px;height:8px;border-radius:50%;
  background:rgba(201,168,76,0.7);
  top:-4px;left:calc(50% - 4px);
}
.hlr-outer::after{top:auto;bottom:-4px;}
/* Mid ring — counter-clockwise */
.hlr-mid{
  position:absolute;width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(46,111,158,0.15);
  animation:hlrSpinRev 45s linear infinite;
}
.hlr-mid::before{
  content:'';position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.35);
  right:-3px;top:calc(50% - 3px);
}
/* Inner pulsing ring */
.hlr-inner{
  position:absolute;width:240px;height:240px;border-radius:50%;
  border:1px solid rgba(46,111,158,0.28);
  animation:hlrPulse 4s ease-in-out infinite;
}
/* Radar sweep */
.hlr-sweep{
  position:absolute;width:270px;height:270px;
  border-radius:50%;overflow:hidden;
  animation:hlrSpin 7s linear infinite;
}
.hlr-sweep::before{
  content:'';position:absolute;
  top:0;left:50%;width:50%;height:50%;
  background:conic-gradient(from 0deg,transparent 260deg,rgba(46,111,158,0.22) 360deg);
  transform-origin:0% 100%;
}
/* Four gold diamond corner markers */
.hlr-diamond{
  position:absolute;width:10px;height:10px;
  border:1px solid rgba(201,168,76,0.55);
  transform:rotate(45deg);animation:hlrDimPulse 3s ease-in-out infinite;
}
.hlr-diamond:nth-child(1){top:0;left:calc(50% - 5px);animation-delay:0s}
.hlr-diamond:nth-child(2){bottom:0;left:calc(50% - 5px);animation-delay:0.75s}
.hlr-diamond:nth-child(3){left:0;top:calc(50% - 5px);animation-delay:1.5s}
.hlr-diamond:nth-child(4){right:0;top:calc(50% - 5px);animation-delay:2.25s}
/* Cross-hair lines */
.hlr-lines{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.hlr-lines::before,.hlr-lines::after{content:'';position:absolute;background:rgba(46,111,158,0.09)}
.hlr-lines::before{width:100%;height:1px;top:50%;left:0}
.hlr-lines::after{width:1px;height:100%;left:50%;top:0}
/* Radial glow behind logo */
.hlr-glow{
  position:absolute;width:195px;height:195px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,31,58,0.95) 0%,rgba(0,49,83,0.3) 55%,transparent 75%);
  z-index:4;animation:hlrGlow 4s ease-in-out infinite;
}
/* The IPI eagle logo */
.hlr-logo{
  width:185px;height:auto;position:relative;z-index:5;
  /* invert(1) turns white bg → black; screen blend makes black transparent */
  filter:invert(1) brightness(1.6) saturate(0.5)
         drop-shadow(0 0 18px rgba(46,111,158,0.9));
  mix-blend-mode:screen;
  opacity:0.85;
  animation:hlrLogoBreath 5s ease-in-out infinite;
}
/* Shimmer sweep */
.hlr-shimmer{
  position:absolute;width:3px;height:700px;z-index:6;
  background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,0.0) 30%,rgba(255,255,255,0.16) 50%,rgba(255,255,255,0.0) 70%,transparent 100%);
  top:50%;left:50%;transform-origin:0 0;
  animation:hlrShimmer 6s ease-in-out infinite;
}
/* Outer circle tick marks */
.hlr-ticks{
  position:absolute;inset:0;border-radius:50%;
  animation:hlrSpin 60s linear infinite reverse;
}
.hlr-ticks::before{
  content:'';position:absolute;
  width:100%;height:100%;border-radius:50%;
  background:
    repeating-conic-gradient(
      rgba(46,111,158,0.25) 0deg 1deg,
      transparent 1deg 30deg
    );
  -webkit-mask:radial-gradient(transparent calc(100% - 12px),white calc(100% - 12px));
  mask:radial-gradient(transparent calc(100% - 12px),white calc(100% - 12px));
}

/* === KEYFRAMES === */
@keyframes hlrSpin    {from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
@keyframes hlrSpinRev {from{transform:rotate(0deg)} to{transform:rotate(-360deg)}}
@keyframes hlrPulse   {
  0%,100%{transform:scale(1);  opacity:.55;border-color:rgba(46,111,158,.28)}
  50%    {transform:scale(1.06);opacity:1; border-color:rgba(46,111,158,.55)}
}
@keyframes hlrLogoBreath {
  0%,100%{opacity:.16;transform:scale(1)}
  50%    {opacity:.28;transform:scale(1.04)}
}
@keyframes hlrGlow {
  0%,100%{opacity:.5;transform:scale(1)}
  50%    {opacity:1; transform:scale(1.25)}
}
@keyframes hlrDimPulse {
  0%,100%{opacity:.3;transform:rotate(45deg) scale(1)}
  50%    {opacity:1; transform:rotate(45deg) scale(1.4);box-shadow:0 0 8px rgba(201,168,76,.7)}
}
@keyframes hlrShimmer {
  0%   {opacity:0;transform:translate(-50%,-50%) rotate(-30deg) translateX(-700px)}
  10%  {opacity:1}
  90%  {opacity:1}
  100% {opacity:0;transform:translate(-50%,-50%) rotate(-30deg) translateX(700px)}
}


  /* ===========================
BUSINESS GROUPS
=========================== */

.business-header{

    max-width:700px;

    margin-bottom:70px;

}

.flash-grid{

    display:grid;

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

    gap:28px;

}

.flash-card{

    position:relative;

    padding:42px 36px;

    background:var(--white);

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

    border-radius:20px;

    cursor:pointer;

    overflow:hidden;

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

    box-shadow:
        0 10px 25px rgba(0,0,0,.05);

}

.flash-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:var(--np);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.flash-card:hover::before{

    transform:scaleX(1);

}

.flash-card:hover{

    background:var(--navy);

    color:#fff;

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.18);

}

/* ICON */

.icon-badge{

    width:84px;

    height:84px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f4f6fb;

    font-size:42px;

    margin-bottom:34px;

    transition:.35s;

}

.flash-card:hover .icon-badge{

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

    transform:
        scale(1.08);

}

/* NUMBER */

.flash-number{

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    color:var(--muted);

    margin-bottom:16px;

}

.flash-card:hover .flash-number{

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

}

/* TITLE */

.flash-card h3{

    font-family:var(--serif);

    font-size:28px;

    font-weight:400;

    margin-bottom:18px;

    line-height:1.2;

}

/* DESCRIPTION */

.flash-card p{

    color:var(--muted);

    line-height:1.8;

    margin-bottom:36px;

    transition:.35s;

}

/* LINK */

.flash-card a{

    color:var(--np);

    text-decoration:none;

    font-weight:600;

    letter-spacing:.5px;

    transition:.35s;

}

.flash-card:hover h3,
.flash-card:hover p,
.flash-card:hover a{

    color:#fff;

}

/* RESPONSIVE */

@media(max-width:1200px){

    .flash-grid{

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

    }

}

@media(max-width:700px){

    .flash-grid{

        grid-template-columns:1fr;

    }

}


.recognition-header{

    width:100%;
    max-width:720px;

    margin:0 0 60px 0;

    text-align:left;

}

.recognition-header .sec-tag{

    display:block;

}

.recognition-header .t-h1{

    margin-bottom:22px;

}

.recognition-text{

    max-width:620px;

    margin:0;

    color:var(--muted);

    font-size:15px;

    line-height:1.9;

}

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

.cert-grid{

    display:grid;

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

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

}

.cert-card{
    padding:38px 30px;

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

    background:var(--white);

    box-shadow:
        0 4px 10px rgba(0,0,0,.04),
        0 10px 24px rgba(0,0,0,.06);

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

.cert-card:hover{
    background:var(--navy);

    color:#fff;

    transform:translateY(-6px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.18),
        0 24px 60px rgba(0,0,0,.12);
}

.cert-card:hover h3,
.cert-card:hover p,
.cert-card:hover span{
    color:#fff;
}
.cert-card:nth-child(3n){

    border-right:none;

}

.cert-card:nth-last-child(-n+3){

    border-bottom:none;

}

.cert-year{
    display:inline-block;

    margin-bottom:12px;

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--muted);

    transition:color .35s ease;
}

.cert-card:hover .cert-year{
    color:rgba(255,255,255,.75);
}


.logo{

    height:70px;

    display:flex;

    align-items:center;

    margin-bottom:24px;

}

.logo{
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
}

.logo img{
    border-radius: 5px;
    max-width:140px;
    max-height:80px;
    width:auto;
    height:auto;
    object-fit:contain;
    transition:transform .35s ease, filter .35s ease;
}

.cert-card:hover .logo img{
    transform:scale(1.08);
}
.cert-card h3{

    font-family:var(--serif);

    font-size:22px;

    font-weight:400;

    color:var(--text);

    margin-bottom:12px;

    line-height:1.25;

}

.cert-card p{

    font-size:13px;

    line-height:1.8;

    color:var(--muted);

    margin-bottom:22px;

}

.cert-card span{

    display:inline-block;

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--np);

}

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

@media(max-width:1100px){

    .cert-grid{

        grid-template-columns:1fr 1fr;

    }

    .cert-card:nth-child(3n){

        border-right:1px solid var(--rule);

    }

    .cert-card:nth-child(2n){

        border-right:none;

    }

}

@media(max-width:768px){

    .recognition-header{

        margin-bottom:40px;

    }

    .cert-grid{

        grid-template-columns:1fr;

    }

    .cert-card{

        border-right:none;

    }

}


.subsidiary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:35px;
    margin-top:50px;
}

.subsidiary-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e8ecef;
    transition:all .35s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.subsidiary-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

/* Image */

.card-image{
    position:relative;
    width:100%;
    height:230px;
    overflow:hidden;
}

.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.subsidiary-card:hover .card-image img{
    transform:scale(1.06);
}

.image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.35),
        rgba(0,0,0,0)
    );
}

/* Content */

.card-content{
    padding:28px;
}

.card-content h3{
    margin:0 0 8px;
    color:#003B63;
    font-size:24px;
    font-weight:700;
}

.sub-tagline{
    display:inline-block;
    margin-bottom:18px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
    color:#0a6db8;
    text-transform:uppercase;
}

.card-content p{
    color:#666;
    line-height:1.8;
    font-size:15px;
    margin-bottom:28px;
}

.card-content .btn-s{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
}

/* Responsive */

@media (max-width:992px){

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

}

@media (max-width:768px){

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

    .card-image{
        height:200px;
    }

    .card-content{
        padding:22px;
    }

    .card-content h3{
        font-size:22px;
    }

}
#backToTop{

    position:fixed;

    right:32px;
    bottom:32px;

    width:58px;
    height:58px;

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

    border:none;
    border-radius:50%;

    background:var(--navy);
    color:#fff;

    cursor:pointer;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

    opacity:0;
    visibility:hidden;

    transform:
        translateY(20px)
        scale(.9);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease,
        background .25s ease;

    z-index:999;

}

#backToTop svg{

    width:22px;
    height:22px;

    stroke:#fff;
    stroke-width:2;

}

#backToTop.show{

    opacity:1;
    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}

#backToTop:hover{

    background:var(--text);

    transform:
        translateY(-4px)
        scale(1.05);

}

/* ===================================
   IPI SOLUTIONS HERO
=================================== */

/* ===========================
   IPI SOLUTIONS HERO
=========================== */

.hero-solutions{
    min-height:60vh;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-solutions .hero-bg{
    background-image:url("images/technology.jpg");
    background-position:center;
    background-size:cover;
    opacity:.22;
}

.hero-solutions .hero-ov{
    background:linear-gradient(
        to right,
        rgba(0,20,40,.95) 0%,
        rgba(0,31,58,.88) 45%,
        rgba(0,49,83,.65) 100%
    );
}

.hero-solutions .hero-c{
    max-width:760px;
    margin:0 auto;
    padding:120px 60px 90px;
    text-align:center;
}

.hero-solutions .hero-eyebrow{
    justify-content:center;
}

.hero-solutions .t-hero{
    margin-bottom:24px;
    font-size:clamp(48px,6vw,72px);
}

.hero-solutions .t-body-w{
    max-width:620px;
    margin:0 auto 40px;

    font-size:15px;
    line-height:1.9;
    color:rgba(255,255,255,.60);
}

.hero-solutions .hero-buttons{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.hero-solutions .btn-s,
.hero-solutions .btn-o{
    min-width:190px;
}

/* Optional glow */

.hero-solutions::after{
    content:"";
    position:absolute;
    top:50%;
    right:-180px;
    transform:translateY(-50%);
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(46,111,158,.10) 0%,
        transparent 70%
    );
    pointer-events:none;
}

@media(max-width:1100px){

    .hero-solutions .hero-c{
        max-width:100%;
        padding:110px 40px 80px;
    }

}

@media(max-width:768px){

    .hero-solutions{
        min-height:50vh;
    }

    .hero-solutions .hero-c{
        padding:90px 28px 60px;
    }

    .hero-solutions .t-hero{
        font-size:clamp(40px,10vw,54px);
    }

    .hero-solutions .t-body-w{
        font-size:14px;
    }

}


/*=====================================================
    GLOOMME PROCESS TIMELINE
======================================================*/

.gloomme-process{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:35px;
    margin-top:70px;
    text-align:center;
}

.process-line{
    position:absolute;
    top:40px;
    left:8%;
    right:8%;
    height:3px;
    background:linear-gradient(90deg,#1f5e88,#43a8df);
    z-index:1;
    border-radius:20px;
}

.process-step{
    position:relative;
    z-index:2;
}

.process-circle{
    width:82px;
    height:82px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#fff;
    border:3px solid #1f5e88;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    color:#1f5e88;
    transition:.35s;
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

.process-step h3{
    font-size:20px;
    margin-bottom:12px;
    color:#07233f;
}

.process-step p{
    font-size:15px;
    line-height:1.8;
    color:#666;
    max-width:220px;
    margin:auto;
}

.process-step:hover .process-circle{
    background:#1f5e88;
    color:#fff;
    transform:translateY(-8px) scale(1.08);
    box-shadow:0 18px 45px rgba(31,94,136,.35);
}

.process-step:hover h3{
    color:#1f5e88;
}

/* Mobile */

@media(max-width:1000px){

.gloomme-process{
    grid-template-columns:1fr;
    gap:55px;
}

.process-line{
    display:none;
}

.process-step{
    max-width:450px;
    margin:auto;
}

}

/* ===============================
   GLOOMME TIMELINE
==================================*/

.timeline-wrap{
    position:relative;
    display:flex;
    justify-content:space-between;
    gap:30px;
    margin-top:70px;
    padding:40px 0;
}

.timeline-line{
    position:absolute;
    left:0;
    right:0;
    top:74px;
    height:3px;
    z-index:0;
}

.timeline-step{
    position:relative;
    flex:1;
    text-align:center;
    z-index:2;
}

.timeline-circle{
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#0b2745;
    color:#fff;
    font-size:22px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
    box-shadow:0 12px 35px rgba(0,0,0,.15);
}

.timeline-step h3{
    font-size:20px;
    margin-bottom:12px;
    color:#0b2745;
}

.timeline-step p{
    font-size:15px;
    line-height:1.8;
    color:#6f7c8b;
    max-width:220px;
    margin:auto;
}

.timeline-step:hover .timeline-circle{
    transform:translateY(-8px) scale(1.08);
    color:#0b2745;
}

@media (max-width:992px){

.timeline-wrap{
    flex-direction:column;
    gap:55px;
    padding-left:45px;
}

.timeline-line{
    width:3px;
    height:100%;
    left:34px;
    right:auto;
    top:0;
}

.timeline-step{
    text-align:left;
}

.timeline-circle{
    margin:0 0 20px;
}

.timeline-step p{
    margin:0;
    max-width:none;
}

}
/* ================================
   FLIP CARDS
================================ */

.flip-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    margin-top:70px;
}

.flip-card{
    height:360px;
    perspective:1200px;
}

.flip-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform .8s ease;
    transform-style:preserve-3d;
}

.flip-card:hover .flip-inner{
    transform:rotateY(180deg);
}

.flip-front,
.flip-back{
    position:absolute;
    inset:0;
    border-radius:22px;
    padding:45px 35px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    backface-visibility:hidden;
    overflow:hidden;
}

.flip-front{
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.flip-front::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0b4d7d,#2e6f9e);
}

.flip-back{
    background:linear-gradient(135deg,#062944,#0b4d7d);
    color:#fff;
    transform:rotateY(180deg);
    box-shadow:0 18px 40px rgba(11,77,125,.35);
}

.vnum{
    font-size:30px;
    font-weight:800;
    color:#0b4d7d;
    line-height:1;
    margin-bottom:18px;
}

.vlbl{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:3px;
    color:#6b7280;
    margin-bottom:14px;
}

.vtit{
    font-size:28px;
    font-weight:700;
    color:#0f172a;
    line-height:1.3;
}

.flip-back h3{
    font-size:30px;
    font-weight:800;
    color:#fff;
    margin-bottom:18px;
}

.flip-back p{
    font-size:16px;
    line-height:1.9;
    color:rgba(255,255,255,.95);
    font-weight:600;
    max-width:290px;
}

/* Mobile */

@media(max-width:768px){

.flip-grid{
    grid-template-columns:1fr;
    gap:25px;
}

.flip-card{
    height:320px;
}

.vnum{
    font-size:48px;
}

.vtit{
    font-size:24px;
}

.flip-back h3{
    font-size:24px;
}

}

/* ===================================
   IPI FARMS HERO
=================================== */

.hero-farms .hero-bg{
    background-position:center;
}

.hero-farms .hero-ov{
    background:
        linear-gradient(
            to right,
            rgba(13,44,20,.95) 0%,
            rgba(25,78,40,.82) 45%,
            rgba(46,125,50,.45) 100%
        );
}

.hero-farms .hero-c{
    max-width:760px;
}

.hero-farms .t-body-w{
    max-width:620px;
}

/* =========================================================
   IPI FARMS
========================================================= */

.farm-img{
    width:100%;
    height:560px;
    object-fit:cover;
    border-radius:28px;
    display:block;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.farm-points{
    margin-top:42px;
    display:grid;
    gap:18px;
}

.farm-point{
    display:flex;
    align-items:center;
    gap:18px;

    padding:18px 22px;

    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;

    background:#fff;

    font-weight:600;
    color:#183153;

    transition:.35s;
}

.farm-point:hover{

    transform:translateX(8px);

    border-color:#5ea64d;

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

}

.farm-point span{

    width:46px;
    height:46px;

    border-radius:50%;

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

    background:#2e7d32;
    color:#fff;

    font-weight:700;

    flex-shrink:0;

}


/* =========================================================
   VALUE CHAIN
========================================================= */

.value-chain{

    margin-top:70px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;

    flex-wrap:wrap;

}

.chain-item{

    width:170px;

    background:#fff;

    border-radius:24px;

    padding:30px 20px;

    text-align:center;

    transition:.35s;

    box-shadow:0 14px 35px rgba(0,0,0,.08);

}

.chain-item:hover{

    transform:translateY(-10px);

    box-shadow:0 24px 60px rgba(0,0,0,.14);

}

.chain-item{

    font-size:44px;

}

.chain-item h3{

    margin-top:18px;

    font-size:18px;

    font-weight:700;

}

.chain-arrow{

    font-size:38px;

    color:#5ea64d;

    font-weight:700;

}


/* =========================================================
   REVENUE CARDS
========================================================= */

#page-farms .svc{

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

}

#page-farms .svc:hover{

    transform:translateY(-12px);

}

#page-farms .svc-num{

    background:linear-gradient(
        135deg,
        #2e7d32,
        #56ab2f
    );

    color:#fff;

    width:70px;
    height:70px;

    border-radius:20px;

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

    font-size:26px;

    margin-bottom:30px;

}


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

@media(max-width:992px){

.value-chain{

    flex-direction:column;

}

.chain-arrow{

    transform:rotate(90deg);

}

.farm-img{

    height:420px;

}

}

@media(max-width:768px){

.farm-img{

    height:320px;

}

.farm-point{

    padding:16px;

    font-size:15px;

}

.chain-item{

    width:100%;

}

}

/*==========================
BUSINESS DIVISIONS
===========================*/

.division{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;

    align-items:center;

    margin-top:90px;

}

.division.reverse{

    direction:rtl;

}

.division.reverse>*{

    direction:ltr;

}

.division-img img{

    width:100%;
    height:520px;

    object-fit:cover;

    border-radius:28px;

    display:block;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.division-number{

    display:inline-flex;

    padding:8px 18px;

    border-radius:100px;

    background:#2e7d32;

    color:#fff;

    font-weight:700;

    margin-bottom:20px;

}

.division-content h3{

    font-size:38px;

    line-height:1.2;

    margin-bottom:24px;

}

.division-lead{

    font-size:17px;

    line-height:1.9;

    color:#5f6d7a;

    margin-bottom:35px;

}

.division-list{

    display:grid;

    gap:18px;

}

.division-list div{

    position:relative;

    padding-left:34px;

    color:#183153;

    line-height:1.8;

    font-weight:500;

}

.division-list div::before{

    content:"✓";

    position:absolute;

    left:0;
    top:0;

    width:22px;
    height:22px;

    border-radius:50%;

    background:#e8f5e9;

    color:#2e7d32;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:700;

}

@media(max-width:992px){

.division{

    grid-template-columns:1fr;

    gap:40px;

}

.division.reverse{

    direction:ltr;

}

.division-img img{

    height:380px;

}

}

/*==========================
FARM LOCATIONS
==========================*/

.farm-map-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

.farm-map img{

    width:100%;
    display:block;

}

.farm-locations{

    display:flex;
    flex-direction:column;
    gap:35px;

}

.farm-location{

    display:flex;
    gap:22px;

}

.farm-dot{

    width:18px;
    height:18px;

    background:#2e7d32;

    border-radius:50%;

    margin-top:8px;

    position:relative;

}

.farm-dot::after{

    content:"";

    position:absolute;

    left:8px;
    top:18px;

    width:2px;
    height:85px;

    background:#d9e7d7;

}

.farm-location:last-child .farm-dot::after{

    display:none;

}

.farm-location h3{

    margin-bottom:8px;

}

.farm-location p{

    color:#667085;

    line-height:1.8;

}

/*==========================
ROADMAP
==========================*/

.roadmap{

    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:20px;

    margin-top:70px;

}

.road-step{

    flex:1;

    text-align:center;

    background:#fff;

    padding:35px;

    border-radius:22px;

    box-shadow:0 12px 40px rgba(0,0,0,.07);

}

.road-step span{

    width:70px;
    height:70px;

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

    margin:auto;

    border-radius:50%;

    background:#2e7d32;

    color:#fff;

    font-size:22px;
    font-weight:700;

    margin-bottom:20px;

}

.road-line{

    width:90px;
    height:4px;

    background:#2e7d32;

    margin-top:55px;

}

@media(max-width:992px){

.farm-map-grid{

    grid-template-columns:1fr;

}

.roadmap{

    flex-direction:column;

}

.road-line{

    width:4px;
    height:60px;

    margin:auto;

}

}

.vi{

    position:relative;
    overflow:hidden;

}

.vi::before{

    content:"";
    position:absolute;
    top:0;
    left:0;

    width:60px;
    height:3px;

    background:var(--gold);

}

.vlbl{

    display:inline-block;

    margin:18px 0 16px;

    font-size:12px;
    font-weight:700;
    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--gold);

}

.vtit{

    font-size:21px;
    font-weight:400;

    margin-bottom:18px;

}

.vdesc{

    font-size:16px;
    font-weight:500;

    line-height:1.9;

}
.quote-wrap{

    display:grid;
    grid-template-columns:420px 1fr;
    gap:70px;
    align-items:center;

}

.quote-image{

    overflow:hidden;
    border-radius:22px;

}

.quote-image img{

    width:100%;
    height:520px;
    object-fit:cover;
    display:block;

}

.farm-quote{

    margin:30px 0;

    font-size:clamp(34px,3vw,52px);
    font-style:italic;
    font-weight:300;
    line-height:1.3;

    color:#111;

}

.quote-author{

    font-size:18px;
    font-weight:700;

    margin-bottom:30px;

    color:var(--gold);

}

@media(max-width:900px){

.quote-wrap{

    grid-template-columns:1fr;
    gap:40px;

}

.quote-image img{

    height:360px;

}

}

/*=========================================
TUCANA VIDEO SHOWCASE
=========================================*/

.bread-showcase{

    position:relative;

    width:min(1400px,94%);

    height:78vh;

    min-height:650px;

    margin:120px auto;

    border-radius:32px;

    overflow:hidden;

    background:#000;

}

.bread-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.03);

}

.bread-overlay{

    position:absolute;

    inset:0;

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

    text-align:center;

    padding:40px;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.18),
        rgba(0,0,0,.42),
        rgba(0,0,0,.68)
    );

}

.bread-heading{

    margin:20px 0;

    color:#fff;

    font-size:clamp(52px,6vw,96px);

    font-weight:700;

    line-height:1.05;

    letter-spacing:-2px;

}

.bread-heading em{

    font-style:italic;

    color:var(--gold);

}

.bread-text{

    max-width:700px;

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

    font-size:18px;

    line-height:1.9;

    font-weight:300;

}

.bread-showcase::after{

    content:"";

    position:absolute;

    inset:0;

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

    border-radius:32px;

    pointer-events:none;

}

@media(max-width:900px){

.bread-showcase{

    height:60vh;

    min-height:500px;

    border-radius:20px;

}

.bread-heading{

    font-size:clamp(40px,8vw,60px);

}

.bread-text{

    font-size:16px;

    max-width:90%;

}

}

/*=====================================
VALUE CHAIN
=====================================*/

.value-chain{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;

    margin-top:70px;

}

.chain-item{

    position:relative;

    width:300px;
    height:220px;

    border-radius:26px;

    overflow:hidden;

    background:#0f172a;

    transition:.45s;

}

.chain-item:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.25);

}

.chain-item img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.15);

    transition:.55s;

}



.chain-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.15)
    );

    opacity:0;

    transition:.45s;

}

.chain-item:hover::after{

    opacity:1;

}

.chain-content{

    position:absolute;

    inset:0;

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

    z-index:5;

    transition:.45s;

}

.chain-content span{

    display:block;

    margin-bottom:18px;

    font-size:14px;

    letter-spacing:3px;

    color:var(--gold);

    font-weight:700;

}

.chain-content h3{

    margin:0;

    text-align:center;

    font-size:22px;

    color:#fff;

    font-weight:700;

}

.chain-item:hover .chain-content{

    justify-content:flex-end;

    padding-bottom:28px;

}

.chain-arrow{

    width:40px;
    height:2px;

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

    position:relative;

}

.chain-arrow::after{

    content:"";

    position:absolute;

    right:-2px;
    top:-4px;

    width:10px;
    height:10px;

    border-top:2px solid rgba(255,255,255,.35);
    border-right:2px solid rgba(255,255,255,.35);

    transform:rotate(45deg);

}

@media(max-width:1000px){

.value-chain{

    flex-direction:column;

}

.chain-arrow{

    width:2px;
    height:35px;

}

.chain-arrow::after{

    top:auto;
    bottom:-2px;
    right:-4px;

    transform:rotate(135deg);

}

}
/* ===================================================
   DROCKE HERO
=================================================== */

.hero-drocke{
    min-height:72vh;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.hero-drocke .hero-bg{
    background-size:cover;
    background-position:center;
    opacity:.28;
}

.hero-drocke .hero-ov{

    background:
    linear-gradient(
        90deg,
        rgba(8,15,30,.98) 0%,
        rgba(11,22,40,.92) 45%,
        rgba(15,32,58,.72) 100%
    );

}

.hero-drocke .hero-c{
    max-width:760px;
}

.hero-drocke .hero-desc{

    margin-top:28px;
    max-width:640px;

    font-size:17px;
    line-height:1.9;

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

}

.hero-actions{

    display:flex;
    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;

}

.hero-drocke::after{

    content:"";

    position:absolute;

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

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(201,165,92,.10),
    transparent 70%);

    pointer-events:none;

}

@media(max-width:900px){

.hero-drocke{

    min-height:45vh;

}

.hero-drocke .hero-c{

    max-width:100%;

}

.hero-actions{

    flex-direction:column;
    align-items:flex-start;

}

}
.about-img{

    width:100%;
    height:580px;

    object-fit:cover;

    border-radius:22px;

    box-shadow:0 25px 70px rgba(0,0,0,.12);

}

.drocke-points{

    display:grid;

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

    gap:16px;

    margin-top:38px;

}

.drocke-points div{

    padding:18px 20px;

    border-left:4px solid var(--pri);

    background: var(--navy);

    font-weight:700;

    border-radius:12px;
    color: white;
    border: 2px solid rgb(239, 229, 177);

}

/* DROCKE DIVISIONS */

#page-drocke .svc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
    margin-top:50px;
}

#page-drocke .svc{
    background:var(--navy);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:26px;
    min-height:220px;          /* reduced height */
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

#page-drocke .svc::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:4px;
    height:100%;
    background:var(--gold);
    transform:scaleY(0);
    transform-origin:top;
    transition:.35s;
}

#page-drocke .svc:hover{
    transform:translateY(-8px);
    border-color:rgba(212,175,55,.35);
    box-shadow:0 18px 40px rgba(0,0,0,.22);
}

#page-drocke .svc:hover::before{
    transform:scaleY(1);
}

#page-drocke .svc-num{
    width:48px;
    height:48px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(212,175,55,.12);
    color:var(--gold);
    font-size:18px;
    font-weight:700;
    margin-bottom:18px;
}

#page-drocke .svc-tit{
    color:#fff;
    font-size:22px;
    font-weight:700;
    margin-bottom:12px;
}

#page-drocke .svc-desc{
    color:rgba(255,255,255,.72);
    line-height:1.7;
    font-size:15px;
    margin:0;
}
.delivery-framework{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    margin-top:60px;

    overflow-x:auto;
    padding-bottom:10px;

}

/* Cards */

.delivery-step{

    flex:0 0 185px;

    background:var(--navy);

    border-radius:18px;

    padding:22px 18px;

    text-align:center;

    color:#fff;

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

    transition:.35s;

    min-height:190px;

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

}

.delivery-step:hover{

    transform:translateY(-8px);

    background:#05294b;

}

/* Number */

.delivery-num{

    width:50px;
    height:50px;

    margin:0 auto 18px;

    border-radius:50%;

    background:var(--pri);

    color:#fff;

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

    font-weight:700;
    font-size:17px;

}

/* Title */

.delivery-step h3{

    margin-bottom:10px;

    font-size:18px;

    color:#fff;

    line-height:1.3;

}

/* Description */

.delivery-step p{

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

    font-size:14px;

    line-height:1.65;

    margin:0;

}

/* Connecting Track */

.delivery-line{

    flex:0 0 45px;

    height:4px;

    background:var(--navy);

    border-radius:20px;

    margin-top:0;

    opacity:.9;

}

/* Tablet */

@media(max-width:1100px){

.delivery-framework{

    justify-content:flex-start;

    padding-bottom:18px;

}

}

.sector-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:60px;

}

.sector-card{

    position:relative;
    height:300px;

    border-radius:22px;

    overflow:hidden;

    background-size:cover;
    background-position:center;

    transition:.45s;

}

.sector-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,20,40,.92),
        rgba(0,20,40,.18)
    );

}

.sector-content{

    position:absolute;

    left:30px;
    bottom:28px;

    color:#fff;

    z-index:2;

}

.sector-content span{

    display:inline-block;

    margin-bottom:14px;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:var(--gold);

}

.sector-content h3{

    font-size:28px;

    line-height:1.2;

}

.sector-card:hover{

    transform:translateY(-10px) scale(1.02);

}

@media(max-width:1000px){

.sector-grid{

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

}

}

@media(max-width:700px){

.sector-grid{

    grid-template-columns:1fr;

}

}

.tech-sec{

    background:var(--navy);

}

.tech-grid{

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

    gap:24px;

    margin-top:60px;

}

.tech-card{

    padding:34px;

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

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

    border-radius:20px;

    transition:.35s;

}

.tech-card:hover{

    transform:translateY(-10px);

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

    border-color:var(--gold);

}

.tech-card h3{

    color:#fff;

    font-size:24px;

    margin-bottom:18px;

}

.tech-card p{

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

    line-height:1.8;

}

.text-white{

    color:#fff;

}

.text-light{

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

}

@media(max-width:1000px){

.tech-grid{

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

}

}

@media(max-width:700px){

.tech-grid{

    grid-template-columns:1fr;

}

}

/* ================= WHY DROCKE ================= */

.why-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:28px;

    margin-top:70px;

}

.why-card{

    position:relative;

    background:var(--navy);

    color:#fff;

    border-radius:22px;

    padding:42px 36px;

    overflow:hidden;

    transition:.35s;

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

}

.why-card:hover{

    transform:translateY(-10px);

    background:#071d38;

}

.why-no{

    font-size:72px;

    font-weight:800;

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

    position:absolute;

    top:18px;

    right:24px;

    line-height:1;

}

.why-card h3{

    font-size:24px;

    margin-bottom:18px;

    position:relative;

    z-index:2;

}

.why-card p{

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

    line-height:1.9;

    position:relative;

    z-index:2;

}

.tech-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:70px;

}

.tech-card{

    position:relative;

    background:var(--navy);

    color:#fff;

    padding:36px;

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

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

}

.tech-card:hover{

    transform:translateY(-10px);

    border-color:var(--pri);

}

.tech-card::before{

    content:"";

    position:absolute;

    top:-70px;
    right:-70px;

    width:160px;
    height:160px;

    border-radius:50%;

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

}

.tech-no{

    width:54px;
    height:54px;

    border-radius:50%;

    background:var(--pri);

    display:flex;

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

    font-weight:700;

    margin-bottom:25px;

}

.tech-card h3{

    font-size:23px;

    margin-bottom:18px;

}

.tech-card p{

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

    line-height:1.9;

}

@media(max-width:1000px){

.tech-grid{

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

}

}

@media(max-width:700px){

.tech-grid{

    grid-template-columns:1fr;

}

}

/* ===========================
   CHAIRMAN'S STATEMENT
=========================== */

.hero-chairman .hero-bg{
    background-position:center;
}

/* Chairman Hero */
.hero-chairman{
    min-height:55vh;
}

.hero-chairman .hero-c{
    padding-top:120px;
    padding-bottom:80px;
}

.chairman-wrap{

    max-width:900px;

    margin:auto;

}

.chairman-photo{

    width:460px;

    margin:0 auto 35px;

}

.chairman-photo img{

    width:100%;

    display:block;

    border-radius:18px;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.chairman-info{

    text-align:center;

    margin-bottom:50px;

}

.chairman-name{

    display:inline-block;

    margin-top:15px;

    font-size:15px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--pri);

    font-weight:700;

}

.chairman-letter{

    background:#fff;

    padding:70px;

    border-radius:22px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.chairman-letter p{

    margin-bottom:30px;

    color:#555;

    font-size:17px;

    line-height:2.1;

    text-align:justify;

}

.chairman-sign{

    margin-top:60px;

    text-align:center;

}

.chairman-sign img{

    width:180px;

    opacity:.95;

    margin-bottom:10px;

}

.chairman-sign h3{

    margin-bottom:8px;

    color:var(--navy);

}

.chairman-sign span{

    color:#777;

    font-size:15px;

    letter-spacing:1px;

}

/* Mobile */

@media(max-width:768px){

.chairman-letter{

    padding:35px 28px;

}

.chairman-photo{

    width:180px;

}

.chairman-letter p{

    font-size:16px;

    line-height:1.9;

}

}

/* ===============================
   CHAIRMAN STATEMENT
==================================*/

.chairman-photo{

    text-align:center;

    margin:60px auto 70px;

}

.chairman-photo img{

    width:420px;

    max-width:90%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:24px;

    border:4px solid #c8a44d;

    box-shadow:
        0 18px 45px rgba(0,0,0,.18),
        0 0 25px rgba(200,164,77,.18);

    transition:.45s ease;

}

.chairman-photo img:hover{

    transform:translateY(-8px) scale(1.02);

    border-color:#d8b45d;

    box-shadow:
        0 30px 70px rgba(0,0,0,.22),
        0 0 45px rgba(200,164,77,.45);

}

.chairman-photo h3{

    margin-top:28px;

    font-size:30px;

    color:var(--navy);

    font-weight:700;

}

.chairman-photo span{

    display:block;

    margin-top:8px;

    color:#777;

    font-size:15px;

    line-height:1.8;

    letter-spacing:.5px;

}



/* ===============================
   LETTER
==================================*/

.chairman-text{

    max-width:900px;

    margin:0 auto;

}

.chairman-text p{

    font-size:18px;

    line-height:2;


     color: white;

    margin-bottom:30px;

    text-align:justify;



}

.lead-letter{

    font-size:22px !important;


    font-weight:500;

}





/* ===============================
   SIGNATURE QUOTE
==================================*/

.chairman-quote{

    max-width:900px;

    margin:80px auto 20px;

    padding:60px 40px;

    text-align:center;

    font-size:clamp(30px,3vw,46px);

    line-height:1.45;

    font-style:italic;

    font-weight:800;

    color: gold;

    position:relative;

    letter-spacing:-.5px;

}

.chairman-quote::before{

    content:"“";

    position:absolute;

    top:-35px;

    left:20px;

    font-size:120px;

    color:#c8a44d;

    opacity:.18;

    font-family:Georgia,serif;

}

.chairman-quote::after{

    content:"”";

    position:absolute;

    right:20px;

    bottom:-75px;

    font-size:120px;

    color:#c8a44d;

    opacity:.18;

    font-family:Georgia,serif;

}

/* ===========================
   GROUP AT A GLANCE
===========================*/

.glance-stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
    margin:20px 0;
}

.g-stat{
    background:var(--navy);
    border:1px solid rgba(212,175,55,.2);
    padding:14px 18px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    transition:.35s;
}

.g-stat:hover{
    transform:translateY(-6px);
    border-color:#D4AF37;
    box-shadow:0 15px 35px rgba(212,175,55,.15);
}

.g-stat h3{
    font-size:15px;
    color:#D4AF37;
    margin-bottom:6px;
    font-weight:700;
    font-style:italic;
    line-height:1.3;
}

.g-stat span{
    display:block;
    font-size:11px;
    color:rgba(212,175,55,.75);
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
    font-style:italic;
}

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

.glance-card{
    background:var(--navy);
    border:1px solid rgba(212,175,55,.15);
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.25);
}

.glance-row{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:24px;
    padding:16px 24px;
    border-bottom:1px solid rgba(212,175,55,.12);
}

.glance-row:last-child{
    border-bottom:none;
}

.glance-row span{
    color:#D4AF37;
    font-weight:700;
    font-style:italic;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:1px;
}

.glance-row strong{
    color:#fff;
    font-size:16px;
    line-height:1.6;
}

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

@media(max-width:1000px){

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

    .glance-row{
        grid-template-columns:1fr;
        gap:8px;
        padding:16px 20px;
    }

}

@media(max-width:600px){

    .glance-stats{
        grid-template-columns:1fr;
    }

    .g-stat{
        padding:16px;
    }

    .g-stat h3{
        font-size:18px;
    }

    .g-stat span{
        font-size:10px;
    }

}
/*=========================
        VALUES
==========================*/

.values-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:28px;

    margin-top:70px;

}

.value-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:38px;

    overflow:hidden;

    transition:.35s;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.value-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:var(--pri);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.value-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.value-card:hover::before{

    transform:scaleX(1);

}

.value-no{

    font-size:54px;

    font-weight:700;

    color: var(--navy);

    margin-bottom:10px;

    line-height:1;

}

.value-card h3{

    font-size:28px;

    color:var(--navy);

    margin-bottom:18px;

}

.value-card p{

    color:#666;

    line-height:1.9;

    font-size:16px;

}

/* ===========================
   GOVERNANCE
=========================== */

#governance{
    scroll-margin-top:110px;
}

.governance-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:28px;
    margin-top:60px;
}

.governance-card{
    background:var(--white);
    border:1px solid var(--rule);
    padding:42px 36px;
    cursor:pointer;
    transition:.35s ease;
    display:flex;
    flex-direction:column;
    height:100%;
}

.governance-card:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.gov-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    margin:0 auto 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--off);
    border:1px solid var(--rule);
    transition:.3s;
}

.governance-card:hover .gov-icon{
    border-color:var(--gold);
    background:#faf8f2;
}

.gov-icon svg{
    width:32px;
    height:32px;
    stroke:var(--gold);
    stroke-width:1.7;
}

.governance-card h3{
    font-family:var(--serif);
    font-size:28px;
    font-weight:400;
    color:var(--text);
    margin:0 0 10px;
    text-align:center;
}

.gov-subtitle{
    display:block;
    text-align:center;
    color:var(--gold);
    font-size:13px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:20px;
}

.governance-card p{
    color:var(--muted);
    font-size:15px;
    line-height:1.9;
    text-align:center;
    flex:1;
}

.gov-link{
    margin-top:28px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    color:var(--gold);
    font-size:14px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:.3s;
}

.governance-card:hover .gov-link{
    letter-spacing:.14em;
}

@media (max-width:768px){

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

    .governance-card{
        padding:32px 24px;
    }

    .governance-card h3{
        font-size:24px;
    }

    .gov-icon{
        width:64px;
        height:64px;
    }

    .gov-icon svg{
        width:28px;
        height:28px;
    }

}

/* ===========================
   GOVERNANCE MODAL
=========================== */

.certificate-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

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

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.35s ease;
    z-index:9999;

    padding:40px;
}

.certificate-modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.certificate-container{
    position:relative;

    width:min(1100px,100%);
    max-height:90vh;

    display:grid;
    grid-template-columns:1.2fr .8fr;

    background:var(--white);
    overflow:hidden;

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

    transform:translateY(25px) scale(.98);
    transition:.35s ease;
}

.certificate-modal.active .certificate-container{
    transform:translateY(0) scale(1);
}

.certificate-image{
    background:#f8f8f8;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}

.certificate-image img{
    width:100%;
    max-height:75vh;
    object-fit:contain;
    border:1px solid var(--rule);
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.certificate-info{
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.certificate-info h2{
    margin:18px 0;
}

.certificate-info p{
    line-height:1.9;
    color:var(--muted);
}

.certificate-actions{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:40px;
}

.certificate-actions a{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}

.certificate-actions svg{
    width:18px;
    height:18px;
}

.certificate-close{
    position:absolute;
    top:22px;
    right:22px;

    width:46px;
    height:46px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.95);
    border:1px solid var(--rule);

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

    cursor:pointer;

    transition:.3s;
    z-index:10;
}

.certificate-close:hover{
    background:var(--gold);
    color:#fff;
    transform:rotate(90deg);
}

.certificate-close svg{
    width:20px;
    height:20px;
}

.certificate-info .sec-tag{
    width:fit-content;
}

@media (max-width:900px){

    .certificate-container{
        grid-template-columns:1fr;
        max-height:95vh;
        overflow-y:auto;
    }

    .certificate-image{
        padding:24px;
    }

    .certificate-image img{
        max-height:420px;
    }

    .certificate-info{
        padding:36px 28px;
    }

    .certificate-actions{
        flex-direction:column;
    }

    .certificate-actions a{
        justify-content:center;
    }

}

@media (max-width:600px){

    .certificate-modal{
        padding:16px;
    }

    .certificate-image img{
        max-height:280px;
    }

    .certificate-info{
        padding:28px 20px;
    }

    .certificate-close{
        top:14px;
        right:14px;
        width:42px;
        height:42px;
    }

}

.group-grid{
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
}

.group-card{
    background: var(--white);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--navy); /* Blue top border */
    padding: 28px;
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}

.group-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(13,110,253,.18);
    border-color: rgba(13,110,253,.25);
}

.group-card:nth-child(even){
    background:var(--off);
}



.group-number{
    font-family:var(--serif);
    font-size:40px;
    line-height:1;
    color:var(--gold);
    margin-bottom:18px;
}

.group-content{
    display:flex;
    flex-direction:column;
    flex:1;
}

.group-content h3{
    font-family:var(--serif);
    font-size:20px;
    font-weight:400;
    line-height:1.35;
    color:var(--text);
    margin:0 0 16px;
}

.group-label{
    display:inline-block;
    width:max-content;
    padding:6px 14px;
    margin-bottom:18px;
    border:1px solid var(--rule);
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold);
}

.group-content p{
    margin:0;
    font-size:13px;
    line-height:1.8;
    color:var(--muted);
}

@media (max-width:1400px){

    .group-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media (max-width:992px){

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

}

@media (max-width:768px){

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

    .group-card{
        padding:28px 22px;
    }

    .group-number{
        font-size:36px;
    }

    .group-content h3{
        font-size:19px;
    }

}
.business-groups{
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.business-card{
    background:var(--navy);
    border:1px solid gold;
    padding:32px 28px;
    transition:.35s ease;
    display:flex;
    flex-direction:column;
    height:100%;
    color: var(--off);
}



.business-card:hover{
    transform:translateY(-6px);
    border-color:var(--gold);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.business-number{
    font-family:var(--serif);
    font-size:42px;
    line-height:1;
    margin-bottom:20px;
}

.business-content{
    display:flex;
    flex-direction:column;
    flex:1;
    color: white;
}

.business-tag{
    display:inline-block;
    width:max-content;
    padding:6px 14px;
    margin-bottom:16px;
    border:2px solid var(--rule);
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.business-content h3{
    font-family:var(--serif);
    font-size:24px;
    font-weight:400;
    color: white;
    line-height:1.3;
    margin:0 0 16px;
}

.business-content p{
    font-size:14px;
    line-height:1.8;
    color: white;
    margin:0;
    font-weight: 200;
}

@media (max-width:1200px){

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

}

@media (max-width:768px){

    .business-groups{
        grid-template-columns:1fr;
    }

    .business-card{
        padding:28px 24px;
    }

    .business-number{
        font-size:36px;
    }

    .business-content h3{
        font-size:22px;
    }

}

/* ---------- PRODUCT HERO ---------- */

.gold-pill{
display:inline-block;
background:rgba(212,175,55,.12);
color:#D4AF37;
border:1px solid rgba(212,175,55,.35);
padding:8px 18px;
border-radius:999px;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:30px;
}

.hero-title{
font-family:var(--serif);
font-size:64px;
font-weight:300;
color:#fff;
line-height:1.05;
margin:0 0 15px;
}

.hero-subtitle{
font-size:22px;
font-weight:500;
letter-spacing:2px;
color:#D4AF37;
margin-bottom:28px;
}

.hero-text{
font-size:16px;
line-height:2;
color:rgba(255,255,255,.75);
margin-bottom:25px;
max-width:720px;
}

.hero-text-light{
font-size:16px;
line-height:2;
color:rgba(255,255,255,.45);
margin-bottom:45px;
max-width:720px;
}

/* ---------- STATS ---------- */

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:55px;
}

.stats-grid div{
display:flex;
flex-direction:column;
}

.stats-grid div div{
font-size:34px;
font-weight:300;
color:#D4AF37;
line-height:1.1;
margin-bottom:6px;
}

.stats-grid span{
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:#95A6C2;
}

/* ---------- FEATURE CARDS ---------- */

.feature-card{
display:flex;
align-items:flex-start;
gap:20px;
padding:22px;
margin-bottom:18px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.02);
border-radius:18px;
transition:.35s;
}

.feature-card:hover{
background:rgba(212,175,55,.06);
border-color:rgba(212,175,55,.30);
transform:translateY(-4px);
}

.feature-card i{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(212,175,55,.12);
color:#D4AF37;
flex-shrink:0;
}

.feature-card strong{
display:block;
font-size:17px;
font-weight:600;
color:#fff;
margin-bottom:8px;
}

.feature-card p{
font-size:15px;
line-height:1.7;
color:rgba(255,255,255,.65);
margin:0;
}

/* ---------- TECH PILLS ---------- */

.tech-pill{
padding:10px 18px;
border-radius:999px;
font-size:13px;
letter-spacing:.6px;
background:rgba(212,175,55,.08);
border:1px solid rgba(212,175,55,.25);
color:#D4AF37;
transition:.3s;
}

.tech-pill:hover{
background:#D4AF37;
color:#041327;
}

/* ---------- BUTTONS ---------- */

.btn-gold{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 34px;
border-radius:999px;
background:#D4AF37;
color:#041327;
font-weight:600;
text-decoration:none;
transition:.3s;
}

.btn-gold:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(212,175,55,.25);
}

.btn-outline{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 34px;
border-radius:999px;
border:1px solid rgba(255,255,255,.18);
color:#fff;
text-decoration:none;
transition:.3s;
}

.btn-outline:hover{
background:rgba(255,255,255,.08);
border-color:#D4AF37;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:1100px){

.sec > div{
grid-template-columns:1fr !important;
}

.hero-title{
font-size:48px;
}

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

}

@media(max-width:768px){

.hero-title{
font-size:40px;
}

.hero-subtitle{
font-size:18px;
}

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

.feature-card{
padding:18px;
}

.sec > div > div{
padding:40px !important;
}

}

@media(max-width:520px){

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

.hero-title{
font-size:34px;
}

.hero-subtitle{
font-size:16px;
}

}

.btn-platform{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 30px;
background:linear-gradient(135deg,#D4AF37,#F3D66B);
color:#041327;
font-size:15px;
font-weight:600;
letter-spacing:.8px;
text-decoration:none;
transition:all .35s ease;
box-shadow:0 8px 24px rgba(212,175,55,.25);
}

.btn-platform i{
width:18px;
height:18px;
transition:transform .35s ease;
}

.btn-platform:hover{
transform:translateY(-3px);
box-shadow:0 14px 36px rgba(212,175,55,.4);
background:linear-gradient(135deg,#E0BC4D,#FFD76A);
}

.btn-platform:hover i{
transform:translate(3px,-3px);
}

.btn-platform:active{
transform:translateY(0);
}

.btn-platform:focus-visible{
outline:2px solid #D4AF37;
outline-offset:4px;
}

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

.envlope-page{

background:#020B18;

}

.envlope-hero{

display:grid;
grid-template-columns:1.15fr .85fr;
min-height:90vh;

background:
linear-gradient(
135deg,
#031224 0%,
#08274A 55%,
#123E70 100%
);

}

.envlope-left{

padding:90px 80px;
display:flex;
flex-direction:column;
justify-content:center;

}

.env-badge{

display:inline-flex;
align-items:center;
width:max-content;

padding:9px 20px;

border-radius:999px;

background:rgba(212,175,55,.12);

border:1px solid rgba(212,175,55,.35);

color:#D4AF37;

font-size:12px;

font-weight:700;

letter-spacing:2px;

margin-bottom:35px;

}

.envlope-left h1{

font-family:var(--serif);

font-size:74px;

font-weight:300;

color:#fff;

margin-bottom:12px;

line-height:1;

}

.envlope-left h1 sup{

font-size:28px;

color:#D4AF37;

}

.envlope-left h2{

font-size:28px;

font-style:italic;

font-weight:500;

color:#D4AF37;

margin-bottom:35px;

}

.envlope-left p{

font-size:17px;

line-height:2;

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

margin-bottom:22px;

max-width:760px;

}

.envlope-left .lead{

font-size:18px;

color:#fff;

}

.hero-actions{

display:flex;

gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

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

.envlope-right{

background:#031120;

display:flex;

justify-content:center;

align-items:center;

padding:70px;

}

.trust-panel{

width:100%;

max-width:500px;

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

border:1px solid rgba(212,175,55,.18);

border-radius:24px;

padding:35px;

backdrop-filter:blur(12px);

}

.trust-header{

display:flex;

align-items:center;

gap:20px;

margin-bottom:35px;

}

.shield{

width:70px;

height:70px;

border-radius:18px;

background:rgba(212,175,55,.12);

display:flex;

align-items:center;

justify-content:center;

}

.shield i{

width:34px;

height:34px;

color:#D4AF37;

}

.trust-header h3{

color:#fff;

font-size:24px;

margin-bottom:6px;

}

.trust-header span{

color:#9FB2CC;

letter-spacing:1px;

font-size:13px;

text-transform:uppercase;

}

.trust-list{

display:flex;

flex-direction:column;

gap:18px;

}

.trust-item{

display:flex;

align-items:flex-start;

gap:14px;

padding-bottom:16px;

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

}

.trust-item:last-child{

border-bottom:none;

padding-bottom:0;

}

.trust-item i{

width:18px;

height:18px;

color:#D4AF37;

margin-top:3px;

flex-shrink:0;

}

.trust-item span{

color:#E8EEF8;

font-size:15px;

line-height:1.6;

}

.trust-footer{

margin-top:30px;

padding-top:25px;

border-top:1px solid rgba(212,175,55,.12);

font-size:14px;

line-height:1.8;

color:#AEBED5;

}

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

@media(max-width:1100px){

.envlope-hero{

grid-template-columns:1fr;

}

.envlope-left{

padding:60px 35px;

}

.envlope-right{

padding:40px 35px 70px;

}

}

@media(max-width:700px){

.envlope-left h1{

font-size:52px;

}

.envlope-left h2{

font-size:22px;

}

.hero-actions{

flex-direction:column;

}

}

/*==============================
  ENVLOPE CAPABILITIES
===============================*/

.env-capabilities{

    background:#07182F;

    padding:100px 7%;

}

.env-section-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.env-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:40px;

    background:rgba(212,175,55,.12);

    border:1px solid rgba(212,175,55,.25);

    color:#D4AF37;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:12px;

    font-weight:700;

    margin-bottom:24px;

}

.env-section-head h2{

    font-family:var(--serif);

    font-size:52px;

    font-weight:300;

    color:#fff;

    margin-bottom:22px;

}

.env-section-head p{

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

    line-height:1.9;

    font-size:17px;

}

.env-cap-grid{

    display:grid;

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

    gap:28px;

}

.env-cap-card{

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(212,175,55,.12);

    border-radius:22px;

    padding:36px;

    transition:.35s;

}

.env-cap-card:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

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

}

.env-cap-card i{

    width:54px;

    height:54px;

    color:#D4AF37;

    margin-bottom:22px;

}

.env-cap-card h3{

    color:#fff;

    font-size:22px;

    margin-bottom:16px;

    font-weight:600;

}

.env-cap-card p{

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

    line-height:1.9;

    font-size:15px;

}

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

@media(max-width:1000px){

    .env-cap-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:700px){

    .env-capabilities{

        padding:70px 25px;

    }

    .env-section-head h2{

        font-size:36px;

    }

}

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

ENVLOPE CONSTITUENCIES

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

.env-constituencies{

    background:#041327;

    padding:100px 7%;

}

.env-users-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.env-user-card{

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

    border:1px solid rgba(212,175,55,.12);

    border-radius:24px;

    padding:40px;

    transition:.35s;

}

.env-user-card:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

    box-shadow:0 18px 40px rgba(0,0,0,.35);

}

.env-user-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(212,175,55,.10);

    margin-bottom:28px;

}

.env-user-icon i{

    width:34px;

    height:34px;

    color:#D4AF37;

}

.env-user-card h3{

    color:#fff;

    font-size:24px;

    margin-bottom:18px;

}

.env-user-card p{

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

    line-height:1.9;

    font-size:15px;

}

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

@media(max-width:1000px){

    .env-users-grid{

        grid-template-columns:1fr;

    }

}

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

ENVLOPE MARKET STANDING

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

.env-market{

    background:var(--navy);

    padding:100px 7%;

}

.env-market-wrap{

    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:70px;

    align-items:center;

}

.env-market-left h2{

    font-family:var(--serif);

    font-size:48px;

    color:#fff;

    font-weight:300;

    margin:25px 0;

}

.env-market-left p{

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

    line-height:2;

    font-size:16px;

}

.env-publications{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

.publication{

    padding:14px 28px;

    border:1px solid rgba(212,175,55,.20);

    background:rgba(212,175,55,.08);

    border-radius:40px;

    color:#D4AF37;

    font-weight:700;

    letter-spacing:1px;

}

.market-highlight{

    background:linear-gradient(180deg,#0A2445,#081B35);

    border:1px solid rgba(212,175,55,.18);

    border-radius:26px;

    padding:50px 40px;

    text-align:center;

}

.market-highlight i{

    width:60px;

    height:60px;

    color:#D4AF37;

    margin-bottom:30px;

}

.market-highlight h3{

    color:#fff;

    font-size:28px;

    margin-bottom:18px;

}

.market-highlight p{

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

    line-height:1.9;

}

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

@media(max-width:1000px){

.env-market-wrap{

grid-template-columns:1fr;

}

}

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

ENVLOPE CTA

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

.env-cta{

    background:#041327;

    padding:120px 7%;

}

.env-cta-box{

    max-width:1000px;

    margin:auto;

    text-align:center;

    padding:70px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #07182F 0%,
        #0C274D 100%
    );

    border:1px solid rgba(212,175,55,.20);

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.env-cta-box h2{

    font-family:var(--serif);

    font-size:58px;

    font-weight:300;

    color:#fff;

    margin:28px 0;

    line-height:1.2;

}

.env-cta-box p{

    max-width:760px;

    margin:auto;

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

    line-height:2;

    font-size:17px;

}

.env-cta-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}

/* Gold platform button */

.btn-platform{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border-radius:50px;

    background:#D4AF37;

    color:#06152F;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.btn-platform:hover{

    background:#E6C75A;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(212,175,55,.35);

}

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

@media(max-width:768px){

.env-cta{

padding:80px 25px;

}

.env-cta-box{

padding:45px 28px;

}

.env-cta-box h2{

font-size:38px;

}

.env-cta-box p{

font-size:15px;

}

.env-cta-buttons{

flex-direction:column;

}

.env-cta-buttons a{

width:100%;

}

}

/*=========================================
CRATER365 SUITE CAPABILITIES
=========================================*/

.crater-capabilities{

    background:#07182F;

    padding:100px 7%;

}

.crater-section-head{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.crater-section-head h2{

    font-family:var(--serif);

    font-size:52px;

    font-weight:300;

    color:#fff;

    margin:22px 0;

}

.crater-section-head p{

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

    line-height:1.9;

    font-size:17px;

}

.crater-grid{

    display:grid;

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

    gap:28px;

}

.crater-card{

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(212,175,55,.15);

    border-radius:24px;

    padding:38px;

    transition:.35s;

     position:relative;

    overflow:hidden;

}

.crater-card:hover{

    transform:translateY(-10px);

    border-color:#D4AF37;

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

}

.crater-card i{

    width:58px;

    height:58px;

    color:#D4AF37;

    margin-bottom:24px;



}

.crater-card h3{

    color:#fff;

    font-size:24px;

    font-weight:600;

    margin-bottom:18px;

    line-height:1.4;

}

.crater-card p{

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

    font-size:15px;

    line-height:1.9;

}

.crater-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:#D4AF37;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.crater-card:hover::before{

    transform:scaleX(1);

}

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

@media(max-width:1100px){

    .crater-grid{

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

    }

}

@media(max-width:768px){

    .crater-capabilities{

        padding:80px 25px;

    }

    .crater-section-head h2{

        font-size:38px;

    }

    .crater-grid{

        grid-template-columns:1fr;

    }

    .crater-card{

        padding:30px;

    }

    .crater-card h3{

        font-size:22px;

    }

}

/*=============================
CRATER365 SOLUTION FAMILY
==============================*/

.crater-family{

    background:#041327;

    padding:110px 7%;

}

.crater-family-head{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}

.crater-family-head h2{

    color:#fff;

    font-family:var(--serif);

    font-size:54px;

    font-weight:300;

    margin:20px 0;

    line-height:1.2;

}

.crater-family-head p{

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

    line-height:2;

    font-size:16px;

}

.family-grid{

    display:grid;

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

    gap:35px;

}

.family-card{

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(212,175,55,.15);

    border-radius:26px;

    padding:45px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.family-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:#D4AF37;

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.family-card:hover{

    transform:translateY(-10px);

    border-color:#D4AF37;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.family-card:hover::before{

    transform:scaleX(1);

}

.family-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    background:rgba(212,175,55,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}

.family-icon i{

    width:34px;

    height:34px;

    color:#D4AF37;

}

.family-card h3{

    color:#fff;

    font-size:28px;

    margin-bottom:8px;

}

.family-card span{

    color:#D4AF37;

    text-transform:uppercase;

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

}

.family-card p{

    margin:25px 0 35px;

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

    line-height:1.9;

    font-size:15px;

}

.family-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#D4AF37;

    font-weight:700;

    transition:.3s;

}

.family-btn:hover{

    gap:14px;

}

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

@media(max-width:1100px){

    .family-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .crater-family{

        padding:80px 25px;

    }

    .crater-family-head h2{

        font-size:38px;

    }

    .family-card{

        padding:35px;

    }

}

/*========================================
CRATER365 ENTERPRISE
========================================*/

.crater-enterprise{

    background:linear-gradient(135deg,#06152F 0%,#0B2345 100%);

    padding:110px 7%;

}

.crater-enterprise-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.crater-enterprise-left h2{

    font-family:var(--serif);

    font-size:54px;

    color:#fff;

    font-weight:300;

    margin:22px 0 30px;

    line-height:1.2;

}

.crater-enterprise-left p{

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

    line-height:2;

    margin-bottom:28px;

}

.crater-enterprise-right{

    display:grid;

    gap:24px;

}

.enterprise-feature{

    display:flex;

    gap:22px;

    padding:26px 28px;

    border-radius:22px;

    border:1px solid rgba(212,175,55,.15);

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

    transition:.35s;

}

.enterprise-feature:hover{

    transform:translateX(8px);

    border-color:#D4AF37;

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

}

.enterprise-feature i{

    width:42px;

    height:42px;

    color:#D4AF37;

    flex-shrink:0;

}

.enterprise-feature h4{

    color:#fff;

    font-size:20px;

    margin-bottom:10px;

}

.enterprise-feature p{

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

    line-height:1.8;

    font-size:15px;

}

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

@media(max-width:1000px){

.crater-enterprise-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.crater-enterprise{

padding:80px 25px;

}

.crater-enterprise-left h2{

font-size:38px;

}

.enterprise-feature{

padding:22px;

}

}

/*=====================================
TABLARS CAPABILITIES
======================================*/

.tablars-capabilities{

    background:#07182F;

    padding:100px 7%;

}

.tablars-head{

    max-width:820px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}

.tablars-head h2{

    color:#fff;

    font-family:var(--serif);

    font-size:52px;

    font-weight:300;

    margin:20px 0;

}

.tablars-head p{

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

    line-height:2;

}

.tablars-grid{

    display:grid;

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

    gap:28px;

}

.tablars-card{

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

    border:1px solid rgba(212,175,55,.15);

    border-radius:24px;

    padding:36px;

    transition:.35s;

}

.tablars-card:hover{

    transform:translateY(-10px);

    border-color:#D4AF37;

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

}

.tablars-card i{

    width:52px;

    height:52px;

    color:#D4AF37;

    margin-bottom:22px;

}

.tablars-card h3{

    color:#fff;

    font-size:23px;

    margin-bottom:18px;

}

.tablars-card p{

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

    line-height:1.9;

}

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

@media(max-width:1000px){

.tablars-grid{

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

}

}

@media(max-width:768px){

.tablars-grid{

grid-template-columns:1fr;

}

.tablars-head h2{

font-size:38px;

}

}

/*==========================================
TABLARS PROVENANCE
==========================================*/

.tablars-provenance{

    background:linear-gradient(135deg,#06152F 0%,#0A2142 100%);

    padding:110px 7%;

}

.tablars-prov-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.tablars-prov-left h2{

    font-family:var(--serif);

    color:#fff;

    font-size:54px;

    font-weight:300;

    line-height:1.2;

    margin:22px 0 30px;

}

.tablars-prov-left p{

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

    line-height:2;

    margin-bottom:28px;

}

.tablars-prov-left blockquote{

    margin-top:45px;

    padding-left:25px;

    border-left:4px solid #D4AF37;

    color:#D4AF37;

    font-size:24px;

    font-style:italic;

    font-weight:600;

}

.tablars-prov-right{

    display:grid;

    gap:22px;

}

.prov-card{

    display:flex;

    align-items:flex-start;

    gap:22px;

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

    border:1px solid rgba(212,175,55,.15);

    border-radius:22px;

    padding:24px 28px;

    transition:.35s;

}

.prov-card:hover{

    transform:translateX(10px);

    border-color:#D4AF37;

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

}

.prov-card i{

    width:42px;

    height:42px;

    color:#D4AF37;

    flex-shrink:0;

}

.prov-card h4{

    color:#fff;

    font-size:20px;

    margin-bottom:10px;

}

.prov-card p{

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

    line-height:1.8;

    font-size:15px;

}

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

@media(max-width:1000px){

.tablars-prov-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.tablars-provenance{

padding:80px 25px;

}

.tablars-prov-left h2{

font-size:38px;

}

.prov-card{

padding:22px;

}

}

/*==========================================
TABLARS CTA
==========================================*/

.tablars-cta{

    background:#041327;

    padding:120px 7%;

}

.tablars-cta-box{

    max-width:950px;

    margin:auto;

    text-align:center;

    padding:70px;

    border-radius:30px;

    border:1px solid rgba(212,175,55,.18);

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );

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

}

.tablars-cta-box h2{

    font-family:var(--serif);

    font-size:56px;

    font-weight:300;

    color:#fff;

    margin:28px 0;

    line-height:1.2;

}

.tablars-cta-box p{

    max-width:760px;

    margin:auto;

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

    line-height:2;

    font-size:17px;

}

.tablars-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:50px;

}

.tablars-cta-box:hover{

    border-color:#D4AF37;

    transition:.35s;

}

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

@media(max-width:900px){

.tablars-cta-box{

padding:45px 30px;

}

.tablars-cta-box h2{

font-size:40px;

}

}

@media(max-width:600px){

.tablars-cta{

padding:80px 25px;

}

.tablars-cta-box h2{

font-size:32px;

}

.tablars-cta-box p{

font-size:15px;

}

.tablars-cta-buttons{

flex-direction:column;

align-items:center;

}

.tablars-cta-buttons a{

width:100%;

max-width:320px;

text-align:center;

}

}

/*==================================================
SIGMA PLATFORM ARCHITECTURE
==================================================*/

.sigma-architecture{

    padding:110px 7%;

    background:linear-gradient(135deg,#06152F 0%,#0C274D 55%,#163C6B 100%);

}

.sigma-architecture .platform-heading{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.sigma-architecture .platform-heading h2{

    font-family:var(--serif);

    font-size:56px;

    font-weight:300;

    color:#fff;

    line-height:1.2;

    margin:22px 0;

}

.sigma-architecture .platform-heading p{

    max-width:760px;

    margin:auto;

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

    line-height:2;

    font-size:16px;

}

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

.sigma-grid{

    display:grid;

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

    gap:28px;

}

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

.sigma-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:flex-start;

    gap:28px;

    padding:34px;

    border-radius:24px;

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

    border:1px solid rgba(212,175,55,.15);

    backdrop-filter:blur(12px);

    transition:.35s;

}

.sigma-card i{

    width:72px;

    height:72px;

    min-width:72px;

    min-height:72px;

    color:#D4AF37;

    stroke-width:1.75;

    flex-shrink:0;

}

.sigma-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

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

    pointer-events:none;

}

.sigma-card:hover{

    transform:translateY(-10px);

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

    border-color:#D4AF37;

    box-shadow:0 20px 55px rgba(0,0,0,.28);

}


.sigma-card h3{

    color:#fff;

    font-size:22px;

    font-weight:600;

    margin-bottom:12px;

    line-height:1.35;

}

.sigma-card p{

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

    font-size:15px;

    line-height:1.9;

}

/*======================================
OPTIONAL FEATURE LIST INSIDE CARDS
======================================*/

.sigma-card ul{

    margin-top:16px;

    padding-left:18px;

}

.sigma-card li{

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

    margin-bottom:8px;

    line-height:1.7;

}

/*======================================
STAT ROW (IF USED)
======================================*/

.sigma-stats{

    display:grid;

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

    gap:20px;

    margin-top:55px;

}

.sigma-stat{

    text-align:center;

}

.sigma-stat h3{

    color:#D4AF37;

    font-size:34px;

    margin-bottom:8px;

    font-weight:600;

}

.sigma-stat span{

    color:#9FAAC4;

    font-size:12px;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*======================================
BUTTON GROUP
======================================*/

.sigma-actions{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:45px;

}

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

@media(max-width:1100px){

.sigma-grid{

grid-template-columns:1fr;

}

}

@media(max-width:900px){

.sigma-architecture{

padding:90px 35px;

}

.sigma-architecture .platform-heading h2{

font-size:44px;

}

}

@media(max-width:768px){

.sigma-grid{

gap:22px;

}

.sigma-card{

padding:24px;

gap:18px;

}

.sigma-card h3{

font-size:20px;

}

.sigma-card p{

font-size:14px;

}

.sigma-stats{

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

}

}

@media(max-width:600px){

.sigma-architecture{

padding:80px 25px;

}

.sigma-architecture .platform-heading{

margin-bottom:45px;

}

.sigma-architecture .platform-heading h2{

font-size:34px;

}

.sigma-card{

flex-direction:column;

}

.sigma-card i{

margin-bottom:12px;

}

.sigma-stats{

grid-template-columns:1fr;

}

.sigma-actions{

flex-direction:column;

align-items:center;

}

.sigma-actions a{

width:100%;

max-width:320px;

text-align:center;

}

}

.sigma-why{

    padding:110px 7%;

    background:#041327;

}

.sigma-why-grid{

    display:grid;

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

    gap:28px;

    margin-top:60px;

}

.sigma-why-card{

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

    border:1px solid rgba(212,175,55,.15);

    border-radius:24px;

    padding:34px;

    transition:.35s;

}

.sigma-why-card:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

}

.sigma-why-card i{

    width:60px;

    height:60px;

    color:#D4AF37;

    margin-bottom:20px;

}

.sigma-why-card h3{

    color:#fff;

    font-size:24px;

    margin-bottom:14px;

}

.sigma-why-card p{

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

    line-height:1.9;

}

@media(max-width:900px){

.sigma-why-grid{

grid-template-columns:1fr;

}

}

.sigma-mark{

    padding:120px 7%;

    background:

    linear-gradient(
        135deg,
        #06152F 0%,
        #0C274D 55%,
        #163C6B 100%
    );

    border-top:1px solid rgba(212,175,55,.25);

}


.sigma-mark-inner{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:70px;

    align-items:center;

    max-width:1200px;

    margin:auto;

}


/* Sigma Symbol */

.sigma-symbol{

    width:220px;

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;


    font-family:var(--serif);

    font-size:150px;

    font-weight:300;

    font-style:italic;


    color:#D4AF37;


    border:1px solid rgba(212,175,55,.35);

    border-radius:50%;


    background:rgba(212,175,55,.05);


    box-shadow:

    0 20px 60px rgba(0,0,0,.35);

}


/* Content */


.sigma-mark-content h2{

    font-family:var(--serif);

    color:#fff;

    font-size:56px;

    font-weight:300;

    margin:22px 0;

}


.sigma-mark-content p{

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

    font-size:16px;

    line-height:2;

    max-width:850px;

    margin-bottom:22px;

}


/* Pills */


.sigma-pill-row{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:35px 0;

}


.sigma-pill-row span{

    padding:10px 18px;

    border-radius:40px;


    color:#D4AF37;


    background:rgba(212,175,55,.08);

    border:1px solid rgba(212,175,55,.25);


    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* Responsive */


@media(max-width:900px){

.sigma-mark-inner{

grid-template-columns:1fr;

text-align:center;

}


.sigma-symbol{

margin:auto;

width:170px;

height:170px;

font-size:110px;

}


.sigma-mark-content h2{

font-size:42px;

}


.sigma-pill-row{

justify-content:center;

}


}


@media(max-width:600px){

.sigma-mark{

padding:80px 25px;

}


.sigma-mark-content h2{

font-size:36px;

}

}

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


.crowwe-page{

background:#041327;

}



.crowwe-hero{

display:grid;

grid-template-columns:1.1fr .9fr;

background:

linear-gradient(
135deg,
#06152F 0%,
#0C274D 55%,
#163C6B 100%
);

border-top:4px solid #D4AF37;

padding:70px;


gap:60px;

}





.crowwe-hero h1{

font-family:var(--serif);

font-size:64px;

font-weight:300;

color:#fff;

margin:20px 0 10px;

}



.crowwe-hero h3{

color:#D4AF37;

letter-spacing:2px;

font-weight:500;

margin-bottom:25px;

}



.crowwe-hero p{

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

line-height:2;

font-size:16px;

margin-bottom:20px;

}





.crowwe-actions{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:40px;

}





/* RIGHT PANEL */


.crowwe-hero-panel{

background:#041327;

padding:40px;

border-radius:24px;

border:1px solid rgba(212,175,55,.18);

}



.crowwe-brand-box{

text-align:center;

padding-bottom:30px;

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

margin-bottom:25px;

}



.crowwe-brand-box i{

width:55px;

height:55px;

color:#D4AF37;

margin-bottom:15px;

}



.crowwe-brand-box h4{

color:#fff;

font-size:22px;

margin-bottom:10px;

}



.crowwe-brand-box p{

color:#9FAAC4;

font-size:14px;

}





.crowwe-feature{

display:flex;

gap:20px;

padding:22px;

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

border-radius:18px;

margin-bottom:15px;

border:1px solid rgba(212,175,55,.12);

}





.crowwe-feature i{

color:#D4AF37;

width:42px;

height:42px;

flex-shrink:0;

}



.crowwe-feature strong{

color:#fff;

display:block;

margin-bottom:8px;

}



.crowwe-feature p{

color:#9FAAC4;

font-size:14px;

margin:0;

}




@media(max-width:1000px){

.crowwe-hero{

grid-template-columns:1fr;

padding:45px 25px;

}


}

.crowwe-page{

    background:#06152F;

}


.crowwe-page .platform-shell{

    background:
    linear-gradient(
        135deg,
        #06152F 0%,
        #0C274D 55%,
        #163C6B 100%
    );

    border-top:4px solid #D4AF37;

}


.crowwe-page .platform-hero{

    display:grid;
    grid-template-columns:1.1fr .9fr;

}


.crowwe-page .platform-left{

    padding:70px;

}


.crowwe-page .platform-badge{

    display:inline-block;

    background:rgba(212,175,55,.12);

    color:#D4AF37;

    border:1px solid rgba(212,175,55,.35);

    padding:8px 18px;

    border-radius:40px;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}


.crowwe-page h1{

    font-family:var(--serif);

    color:white;

    font-size:64px;

    font-weight:300;

    margin:30px 0 10px;

}


.crowwe-page h3{

    color:#D4AF37;

    letter-spacing:2px;

}


.crowwe-page p{

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

    line-height:2;

    max-width:650px;

}


.crowwe-page .platform-right{

    background:#041327;

    padding:70px;

}


.crowwe-page .platform-card{

    color:white;

}


.crowwe-page .feature-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px;

    margin-bottom:15px;

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

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

    border-radius:16px;

}


.crowwe-page .feature-item svg{

    width:22px;

    height:22px;

    color:#D4AF37;

}


.gold-btn{

    display:inline-block;

    background:#D4AF37;

    color:#06152F;

    padding:14px 30px;

    border-radius:30px;

    font-weight:700;

}


.outline-btn{

    display:inline-block;

    border:1px solid #D4AF37;

    color:#D4AF37;

    padding:14px 30px;

    border-radius:30px;

}

.crowwe-stats{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;

    padding:60px 70px;

}


.crowwe-stat{

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

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

    padding:25px;

    border-radius:18px;

    text-align:center;

}


.crowwe-stat h3{

    color:#D4AF37;

    font-size:32px;

    margin-bottom:10px;

}


.crowwe-stat span{

    color:#9FAAC4;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

}





.crowwe-content{

    padding:70px;

    background:#fff;

}


.crowwe-content h2,
.crowwe-users h2{

    color:#06152F;

    font-size:36px;

    margin-bottom:40px;

}



.crowwe-grid{

    display:grid;

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

    gap:25px;

}



.crowwe-feature{

    display:flex;

    gap:18px;

    padding:28px;

    border-radius:20px;

    background:#fff;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}



.crowwe-feature svg{

    width:26px;

    height:26px;

    color:#D4AF37;

    flex-shrink:0;

}



.crowwe-feature strong{

    color:#06152F;

    font-size:17px;

}



.crowwe-feature p{

    color:#666;

    line-height:1.8;

    font-size:14px;

}





.crowwe-users{

    padding:70px;

    background:#F7F8FA;

}



.crowwe-user-grid{

    display:grid;

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

    gap:25px;

}



.crowwe-user-grid div{

    background:white;

    padding:30px;

    border-radius:20px;

}



.crowwe-user-grid h3{

    color:#06152F;

}



.crowwe-user-grid p{

    color:#666;

    line-height:1.8;

}





.crowwe-position{

    padding:80px;

    text-align:center;

    background:

    linear-gradient(
        135deg,
        #06152F,
        #163C6B
    );

}



.crowwe-position span{

    color:#D4AF37;

    letter-spacing:2px;

    font-size:12px;

}



.crowwe-position h2{

    color:white;

    font-size:42px;

    margin:25px 0;

}



.crowwe-position p{

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

    max-width:800px;

    margin:auto;

    line-height:2;

}




@media(max-width:1000px){

    .crowwe-stats,
    .crowwe-grid,
    .crowwe-user-grid{

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

    }

}



@media(max-width:600px){

    .crowwe-stats,
    .crowwe-grid,
    .crowwe-user-grid{

        grid-template-columns:1fr;

    }


    .crowwe-content,
    .crowwe-users,
    .crowwe-position{

        padding:30px;

    }

}

/* ==========================================================
   CERTIFICATIONS & AWARDS PAGE
   Matches Envlope • Crater365 • Tablars • Sigma • Crowwe
========================================================== */

.certifications-page{

    background:#06152F;

}


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

.cert-hero{

    padding:80px 70px;

    background:
    linear-gradient(
        135deg,
        #06152F 0%,
        #0C274D 55%,
        #163C6B 100%
    );

    border-top:4px solid #D4AF37;

}


.cert-badge{

    display:inline-block;

    background:rgba(212,175,55,.12);

    color:#D4AF37;

    border:1px solid rgba(212,175,55,.35);

    padding:8px 18px;

    border-radius:40px;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:28px;

}


.cert-hero h1{

    font-family:var(--serif);

    font-size:62px;

    font-weight:300;

    color:#fff;

    margin-bottom:18px;

}


.cert-hero p{

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

    line-height:2;

    font-size:16px;

    max-width:760px;

}



/*==========================================================
SECTION
==========================================================*/

.cert-section{

    background:#fff;

    padding:70px;

}


.cert-section h2{

    color:var(--navy);

    font-family:var(--serif);

    font-size:42px;

    font-weight:300;

    margin-bottom:45px;

}



/*==========================================================
CERTIFICATION GRID
==========================================================*/

.cert-grid{

    display:grid;

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

    gap:28px;

}


.cert-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}


.cert-card:hover{

    transform:translateY(-10px);

}


.cert-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,175,55,.12);

    margin-bottom:25px;

}


.cert-icon svg{

    width:26px;

    height:26px;

    color:#D4AF37;

}


.cert-card h3{

    color:var(--navy);

    font-size:22px;

    margin-bottom:15px;

}


.cert-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:28px;

}


.cert-card button{

    background:var(--navy);

    color:#D4AF37;

    border:none;

    padding:14px 26px;

    border-radius:40px;

    cursor:pointer;

    font-weight:600;

    transition:.3s;

}


.cert-card button:hover{

    background:#0C274D;

}



/*==========================================================
AWARDS
==========================================================*/

.award-section{

    background:#F8F9FB;

    padding:70px;

}


.award-section h2{

    color:var(--navy);

    font-family:var(--serif);

    font-size:42px;

    font-weight:300;

    margin-bottom:45px;

}


.award-grid{

    display:grid;

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

    gap:28px;

}


.award-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

}


.award-card:hover{

    transform:translateY(-10px);

}


.award-year{

    display:inline-block;

    background:rgba(212,175,55,.12);

    color:#D4AF37;

    padding:6px 14px;

    border-radius:40px;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:20px;

}


.award-card h3{

    color:var(--navy);

    font-size:22px;

    line-height:1.5;

    margin-bottom:18px;

}


.award-org{

    color:#888;

    font-size:15px;

    margin-bottom:28px;

}


.award-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4AF37;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}


.award-card a:hover{

    transform:translateX(6px);

}



/*==========================================================
SECURITY
==========================================================*/

.security-section{

    padding:80px 70px;

    background:
    linear-gradient(
        135deg,
        #06152F,
        #0C274D
    );

}


.security-box{

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

    border-radius:24px;

    padding:50px;

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

}


.security-box h2{

    color:#fff;

    font-family:var(--serif);

    font-size:42px;

    font-weight:300;

    margin-bottom:25px;

}


.security-box p{

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

    line-height:2;

    margin-bottom:35px;

}


.security-features{

    display:grid;

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

    gap:22px;

}


.security-item{

    display:flex;

    gap:16px;

    padding:22px;

    border-radius:18px;

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

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

}


.security-item svg{

    width:26px;

    height:26px;

    color:#D4AF37;

    flex-shrink:0;

}


.security-item strong{

    display:block;

    color:#fff;

    margin-bottom:6px;

}


.security-item span{

    color:#AAB6CF;

    font-size:14px;

    line-height:1.7;

}



/*==========================================================
CTA
==========================================================*/

.cert-cta{

    padding:90px 70px;

    background:#fff;

    text-align:center;

}


.cert-cta h2{

    color:var(--navy);

    font-family:var(--serif);

    font-size:46px;

    font-weight:300;

    margin-bottom:20px;

}


.cert-cta p{

    color:#666;

    max-width:760px;

    margin:0 auto 40px;

    line-height:2;

}



/*==========================================================
MODAL
==========================================================*/

.cert-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}


.cert-modal-box{

    width:700px;

    max-width:90%;

    background:#fff;

    border-radius:24px;

    padding:45px;

    position:relative;

    animation:fadeUp .35s ease;

}


.cert-modal-box h2{

    color:var(--navy);

    margin-bottom:20px;

}


.cert-modal-box p{

    color:#666;

    line-height:1.9;

}


.cert-close{

    position:absolute;

    top:18px;

    right:22px;

    font-size:34px;

    color:#999;

    cursor:pointer;

    transition:.3s;

}


.cert-close:hover{

    color:#D4AF37;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}



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

@media(max-width:1100px){

    .cert-grid{

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

    }

    .award-grid{

        grid-template-columns:1fr;

    }

    .security-features{

        grid-template-columns:1fr;

    }

}


@media(max-width:700px){

    .cert-hero,
    .cert-section,
    .award-section,
    .security-section,
    .cert-cta{

        padding:40px 24px;

    }

    .cert-hero h1{

        font-size:42px;

    }

    .cert-section h2,
    .award-section h2,
    .security-box h2,
    .cert-cta h2{

        font-size:34px;

    }

    .cert-grid{

        grid-template-columns:1fr;

    }

}

/*=========================================
AWARDS
=========================================*/

.award-section{

    background:#F7F8FA;

    padding:70px;

}


.award-head{

    max-width:760px;

    margin:0 auto 55px;

    text-align:center;

}


.award-head h2{

    font-family:var(--serif);

    font-size:46px;

    font-weight:300;

    color:var(--navy);

    margin:18px 0;

}


.award-head p{

    color:#666;

    line-height:2;

}


.award-grid{

    display:grid;

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

    gap:28px;

}



.award-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

    display:flex;

    flex-direction:column;

}


.award-card:hover{

    transform:translateY(-10px);

}



.award-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.award-year{

    background:rgba(212,175,55,.12);

    color:#D4AF37;

    border:1px solid rgba(212,175,55,.35);

    padding:7px 18px;

    border-radius:40px;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}



.award-icon{

    width:62px;

    height:62px;

    border-radius:18px;

    background:rgba(212,175,55,.12);

    display:flex;

    align-items:center;

    justify-content:center;

}


.award-icon svg{

    width:26px;

    height:26px;

    color:#D4AF37;

}



.award-card h3{

    color:var(--navy);

    font-size:22px;

    line-height:1.6;

    margin-bottom:18px;

}



.award-org{

    color:#888;

    font-size:15px;

    margin-bottom:35px;

}



.award-card a{

    margin-top:auto;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#D4AF37;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}


.award-card a:hover{

    gap:14px;

}



@media(max-width:900px){

.award-grid{

grid-template-columns:1fr;

}

}



@media(max-width:600px){

.award-section{

padding:40px 24px;

}

.award-head h2{

font-size:34px;

}

}

/* ======================================
   COMPANY TIMELINE
====================================== */


.timeline-section{

    padding:80px 70px;

    background:#fff;

}



.timeline{

    max-width:900px;

    margin:auto;

    position:relative;

}



/* vertical line */

.timeline:before{

    content:"";

    position:absolute;

    left:35px;

    top:0;

    bottom:0;

    width:2px;

    background: var(--navy);

}



/* item */

.timeline-item{

    position:relative;

    display:flex;

    gap:40px;

    margin-bottom:55px;

}



/* number circle */

.timeline-marker{

    width:72px;

    height:72px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--navy);

    color: white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

    z-index:2;

}



/* content */

.timeline-content{

    background: var(--off);

    padding:25px;

    border-radius:24px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    flex:1;

    transition:.35s;

    border: 2px dotted var(--navy);

}



.timeline-content:hover{

    transform:translateX(10px);

}



.timeline-label{

    display:inline-block;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:15px;

}



.timeline-content h3{

    color:var(--navy);

    font-size:26px;

    margin-bottom:15px;

}



.timeline-content p{

    color:#666;

    line-height:1.9;

}



/* current era */

.timeline-item.active .timeline-marker{


    background: var(--navy);
    color: white;
}



.timeline-item.active .timeline-content{

    background:var(--navy);

}



.timeline-item.active h3{

    color:#fff;

}



.timeline-item.active p{

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

}



.timeline-item.active .timeline-label{

    color: white;

}



/* mobile */

@media(max-width:700px){


.timeline-section{

padding:50px 24px;

}


.timeline:before{

left:25px;

}


.timeline-item{

gap:20px;

}


.timeline-marker{

width:52px;

height:52px;

font-size:15px;

}


.timeline-content{

padding:10px;

}


.timeline-content h3{

font-size:21px;

}


}
/* =========================================
   LEADERSHIP PAGE
   NAVY + GOLD EXECUTIVE STYLE
========================================= */


.leadership-page{

    background:var(--navy);

    padding:100px 70px;

    color:var(--white);

}



/* HEADER
----------------------------------------- */

.leadership-header{

    max-width:800px;

    margin:0 auto 90px;

    text-align:center;

}


.leadership-header .sec-tag{

    color:var(--nt);

    border-color:var(--nt);

}



.leadership-header .t-h2{

    color:var(--white);

}



.leadership-header .t-h2 em{

    color:var(--nt);

}



.leadership-header p{

    max-width:650px;

    margin:25px auto 0;

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

    line-height:1.9;

    font-size:16px;

}




/* SECTION TITLE
----------------------------------------- */

.leadership-title{

    color:var(--nt);

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-weight:700;

    padding-bottom:20px;

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

    margin-bottom:50px;

}




.executive-group{

    max-width:1050px;

    margin:0 auto 100px;

}




/* EXECUTIVE PROFILES
----------------------------------------- */


.executive-profile{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:70px 40px;

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

}



.executive-profile:first-of-type{

    border-top:3px solid var(--nt);

}



/* IMAGES */


.profile-image img{

    width:240px;

    height:240px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid var(--nt);

    margin-bottom:35px;

}



.chairman .profile-image img{

    width:300px;

    height:300px;

}





/* PROFILE TEXT
----------------------------------------- */


.profile-details{

    max-width:760px;

}



.profile-details span,
.senior-profile span{

    display:block;

    color:var(--nt);

    font-size:12px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}



.profile-details h3{

    font-family:var(--serif);

    font-size:48px;

    font-weight:400;

    color:var(--white);

    margin:0 0 25px;

}



.profile-details p{

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

    font-size:16px;

    line-height:2;

}




/* SENIOR TEAM
----------------------------------------- */


.senior-grid{

    display:grid;

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

    gap:60px;

}



.senior-profile{

    text-align:center;

    padding:50px 35px;

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

}



.senior-profile img{

    width:180px;

    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid var(--nt);

    margin-bottom:30px;

}



.senior-profile h3{

    font-family:var(--serif);

    color:var(--white);

    font-size:32px;

    font-weight:400;

    margin:15px 0;

}



.senior-profile p{

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

    line-height:1.9;

    font-size:15px;

}




/* GOLD ACCENT UNDERLINE */

.profile-details h3::after,
.senior-profile h3::after{

    content:"";

    display:block;

    width:45px;

    height:2px;

    background:var(--nt);

    margin:18px auto 0;

}




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


@media(max-width:800px){


.leadership-page{

    padding:70px 25px;

}



.chairman .profile-image img{

    width:220px;

    height:220px;

}



.profile-image img{

    width:180px;

    height:180px;

}



.profile-details h3{

    font-size:36px;

}



.senior-grid{

    grid-template-columns:1fr;

}


}

/* FERTILISER PAGE */


.page-back{

padding:20px 60px;

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

background:var(--white);

}


.page-back span{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

cursor:pointer;

color:var(--navy);

}




.fert-benefits{

margin-top:35px;

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

}


.fert-benefits div{

padding:18px 0;

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

font-size:15px;

color:var(--muted);

}



.fert-benefits strong{

color:var(--nt);

font-size:20px;

margin-right:20px;

}





.fert-image img{

width:100%;

height:520px;

object-fit:cover;

}





.fert-grid{

display:grid;

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

gap:30px;

}



.fert-card{

background:var(--white);

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

padding:40px;

}



.fert-card span{

font-size:40px;

font-family:var(--serif);

color:var(--nt);

}



.fert-card h3{

font-family:var(--serif);

font-size:30px;

margin:20px 0;

color:var(--navy);

}



.fert-card p{

font-size:15px;

line-height:1.8;

color:var(--muted);

}




.s-navy{

background:var(--navy);

color:white;

}



.supply-box{

max-width:850px;

margin:auto;

text-align:center;

}



.supply-box h2{

font-family:var(--serif);

font-size:45px;

font-weight:400;

}



.supply-box em{

color:var(--nt);

}



.supply-box p{

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

line-height:1.9;

margin:25px 0 40px;

}



.supply-box button{

background:var(--nt);

border:none;

padding:16px 35px;

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

cursor:pointer;

}





@media(max-width:800px){


.fert-grid{

grid-template-columns:1fr;

}


.fert-image img{

height:350px;

}

}

/* SUNFLOWER PAGE */


.oil-benefits{

margin-top:35px;

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

}


.oil-benefits div{

padding:18px 0;

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

font-size:15px;

color:var(--muted);

}


.oil-benefits strong{

color:var(--nt);

font-size:22px;

margin-right:20px;

}



.oil-image img{

width:100%;

height:500px;

object-fit:cover;

}





.oil-grid{

display:grid;

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

gap:30px;

}



.oil-card{

padding:40px;

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

background:var(--white);

}



.oil-card span{

font-family:var(--serif);

font-size:45px;

color:var(--navy);

}



.oil-card h3{

font-family:var(--serif);

font-size:30px;

color:var(--navy);

margin:20px 0;

}



.oil-card p{

color:var(--muted);

line-height:1.8;

}





.package-grid{

display:grid;

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

gap:1px;

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

}



.package-grid div{

background:var(--navy);

padding:45px;

text-align:center;

}



.package-grid h3{

font-family:var(--serif);

font-size:60px;

font-weight:400;

color:var(--nt);

}



.package-grid p{

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

}




.cta-section{

padding:90px 30px;

background:var(--off);

text-align:center;

}



.cta-section h2{

font-family:var(--serif);

font-size:45px;

font-weight:400;

}



.cta-section em{

color:var(--nt);

}



.cta-section p{

color:var(--muted);

margin:20px 0 35px;

}



.cta-section button{

background:var(--navy);

color:white;

border:none;

padding:16px 35px;

letter-spacing:2px;

text-transform:uppercase;

cursor:pointer;

}



@media(max-width:800px){

.oil-grid,
.package-grid{

grid-template-columns:1fr;

}


.oil-image img{

height:350px;

}

}

.product-hero{

height:620px;

position:relative;

background:
url("https://images.unsplash.com/photo-1474979266404-7eaacbcd87c5?w=1600&q=80")
center/cover no-repeat;

display:flex;

align-items:center;

}


.product-hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(5,18,35,.92),
rgba(5,18,35,.55),
rgba(5,18,35,.25)
);

}



.product-hero-content{

position:relative;

z-index:2;

max-width:850px;

padding:0 80px;

color:white;

}



.product-breadcrumb{

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

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

margin-bottom:30px;

}



.product-hero h1{

font-family:var(--serif);

font-size:80px;

font-weight:400;

line-height:1.05;

margin:0 0 25px;

}



.product-hero h1 em{

font-style:italic;

color:var(--nt);

}



.product-hero p{

font-size:20px;

font-weight:300;

line-height:1.8;

max-width:600px;

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

}



.hero-line{

margin-top:45px;

width:80px;

height:2px;

background:var(--nt);

}




@media(max-width:800px){

.product-hero{

height:520px;

}



.product-hero-content{

padding:0 30px;

}



.product-hero h1{

font-size:52px;

}



.product-hero p{

font-size:16px;

}

}

.spec-table{

width:100%;
border-collapse:collapse;
border:1px solid var(--rule);
background:var(--white);

}


.spec-table th{

background:var(--navy);
color:white;
padding:16px;
text-align:left;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;

}


.spec-table td{

padding:15px;
border-bottom:1px solid var(--rule);
font-size:14px;
color:var(--muted);

}


.spec-table td:last-child{

text-align:right;
color:var(--navy);
font-weight:500;

}

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

.commodity-hero {
    height: 620px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}


.commodity-overlay {
    position: absolute;
    inset: 0;
    background:
    linear-gradient(
        90deg,
        rgba(5,10,20,.88),
        rgba(5,10,20,.55),
        rgba(5,10,20,.25)
    );
}



.commodity-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 60px;
    color:white;
}



.commodity-content .product-breadcrumb {
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:25px;
}



.commodity-content h1 {
    font-family:var(--serif);
    font-size:80px;
    font-weight:300;
    line-height:1;
    margin-bottom:25px;
}


.commodity-content h1 em {
    font-style:italic;
    color:#d6b36a;
}



.commodity-content p {
    max-width:520px;
    font-size:18px;
    font-weight:300;
    line-height:1.8;
    color:rgba(255,255,255,.8);
}



/* ==============================
   IMAGE
================================ */


.commodity-image img {

    width:100%;
    height:520px;
    object-fit:cover;

}





/* ==============================
   TRADE STATS
================================ */


.trade-stats {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    margin-top:45px;
    background:var(--pbt);
    border:1px solid var(--pbt);

}



.trade-stats div {

    background:var(--pbw);
    padding:28px 20px;

}



.trade-stats strong {

    display:block;
    font-family:var(--serif);
    font-size:38px;
    font-weight:300;
    color:var(--navy);
    margin-bottom:8px;

}



.trade-stats p {

    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--st);

}





/* ==============================
 GOLD PROFILE
================================ */


.gold-table {

    display:grid;
    grid-template-columns:repeat(2,1fr);
    border:1px solid var(--pbt);
}



.gold-table div {

    padding:28px;
    border-bottom:1px solid var(--pbt);
    display:flex;
    justify-content:space-between;
    gap:20px;
    background:white;

}



.gold-table span {

    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--st);

}



.gold-table strong {

    font-size:14px;
    font-weight:500;
    color:var(--navy);
    text-align:right;

}






/* ==============================
 SOURCE COUNTRIES
================================ */


.country-grid {

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1px;
    background:rgba(255,255,255,.15);

}



.country-grid div {

    padding:45px 20px;
    text-align:center;
    background:var(--pb);

}



.country-grid h3 {

    font-family:var(--serif);
    font-size:26px;
    font-weight:300;
    color:white;
    margin-bottom:10px;

}



.country-grid span {

    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);

}






/* ==============================
 TRANSACTION PROCESS
================================ */


.process-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}



.process-grid div {

    border:1px solid var(--pbt);
    padding:35px;
    background:white;

}



.process-grid span {

    font-family:var(--serif);
    font-size:40px;
    color:#d6b36a;
}



.process-grid h3 {

    margin:20px 0 12px;
    font-size:18px;
    font-weight:500;
}



.process-grid p {

    font-size:13px;
    color:var(--st);
    line-height:1.8;

}





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


@media(max-width:900px){


.commodity-content {
    padding:0 25px;
}


.commodity-content h1 {
    font-size:55px;
}


.trade-stats,
.gold-table,
.process-grid,
.country-grid {

    grid-template-columns:1fr;

}



.commodity-hero {

    height:520px;

}



.gold-table div {

    flex-direction:column;

}


.gold-table strong {

    text-align:left;

}


}

/* =================================
   ENERGY COMMODITY STYLE
================================= */


.energy-hero {

    height:620px;
    background-size:cover;
    background-position:center;
    position:relative;
    display:flex;
    align-items:center;

}



.energy-overlay {

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(4,12,22,.92),
        rgba(4,12,22,.65),
        rgba(4,12,22,.25)
    );

}



.energy-content {

    position:relative;
    z-index:2;
    padding:0 60px;
    max-width:900px;
    color:white;

}



.energy-content h1 {

    font-family:var(--serif);
    font-size:78px;
    font-weight:300;
    line-height:1;

}



.energy-content h1 em {

    color:#8fa8b8;
    font-style:italic;

}



.energy-content p {

    max-width:600px;
    margin-top:25px;

    font-size:18px;
    line-height:1.8;
    color:rgba(255,255,255,.75);

}



/* ENERGY PILLARS */


.energy-pillars {

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

    background:var(--pbt);
    border:1px solid var(--pbt);

}



.energy-pillars div {

    padding:40px 30px;
    background:white;

}



.energy-pillars span {

    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--pbp);

}



.energy-pillars h3 {

    font-family:var(--serif);
    font-size:30px;
    font-weight:300;

    margin:18px 0;

}



.energy-pillars p {

    font-size:13px;
    line-height:1.8;
    color:var(--st);

}





/* SERVICE CARDS */


.energy-service-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

}



.energy-service {

    padding:35px;
    background:var(--pb);
    border:1px solid rgba(255,255,255,.1);

}



.energy-service h3 {

    color:white;
    font-family:var(--serif);
    font-size:28px;
    font-weight:300;

}



.energy-service p {

    margin-top:18px;
    font-size:13px;
    line-height:1.8;
    color:rgba(255,255,255,.55);

}




/* ENERGY PRODUCTS */


.energy-products {

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;

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

}



.energy-products div {

    padding:35px 20px;
    text-align:center;
    background:var(--pb);

}



.energy-products h3 {

    font-family:var(--serif);
    color:white;
    font-size:25px;
    font-weight:300;

}



.energy-products span {

    display:block;
    margin-top:10px;

    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;

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

}





/* MARKET EDGE */


.market-box {

    background:var(--pbd);
    padding:45px;

}



.market-box h2 {

    color:white;
    font-family:var(--serif);
    font-size:45px;
    font-weight:300;

}



.market-box h2 em {

    color:#9fb5c3;

}



.market-box p {

    color:rgba(255,255,255,.6);
    line-height:1.9;
    max-width:700px;

}





@media(max-width:900px){


.energy-content {

padding:0 25px;

}


.energy-content h1 {

font-size:55px;

}



.energy-pillars,
.energy-service-grid,
.energy-products {

grid-template-columns:1fr;

}


}

/* ================================
   COMMODITIES STYLE SYSTEM
================================ */

.com-page {
    background: #f8f7f3;
}


/* Commodity Hero */

.com-page .phero {
    min-height: 620px;
    background-position:center;
}


.com-page .phcont {
    max-width:1200px;
}


/* Premium breadcrumb */

.com-page .phbc {
    letter-spacing:3px;
    font-size:11px;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
}



/* Commodity headings */

.com-page .t2 em,
.com-page .t1 em {
    color:#b89445;
    font-style:italic;
}



/* Commodity cards */

.com-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:#d8d3c8;
}


.com-card {

    background:white;
    padding:40px 32px;

    border:1px solid #e7e1d5;

    transition:.35s ease;

}


.com-card:hover {

    transform:translateY(-6px);

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

}


.com-card span {

    display:block;

    font-family:"Cormorant Garamond",serif;

    font-size:42px;

    color:#b89445;

    margin-bottom:20px;

}



.com-card h3 {

    font-size:22px;

    font-weight:500;

    margin-bottom:15px;

}



.com-card p {

    color:#666;

    font-size:14px;

    line-height:1.8;

}





/* Dark market section */

.com-dark {

    background:#08121b;

    color:white;

}



.com-dark .et {

    color:#b89445;
}


.com-dark h2 {

    color:white;

}



.com-dark p {

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

}



/* Commodity specification boxes */


.spec-box {

    background:#101d28;

    padding:30px;

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

}


.spec-box strong {

    display:block;

    font-family:"Cormorant Garamond";

    font-size:34px;

    color:#b89445;

}




/* Source country cards */


.source-grid {

    display:grid;

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

}


.source-card {

    background:#101b24;

    padding:35px 20px;

    text-align:center;

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

}



.source-card h3 {

    font-family:"Cormorant Garamond";

    color:white;

    font-size:25px;

}



.source-card small {

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

    letter-spacing:2px;

    text-transform:uppercase;

}



/* Trading CTA */

.com-cta {

    background:#b89445;

    color:white;

}


.com-cta em {

    font-family:"Cormorant Garamond";

    font-style:italic;

}





/* Mobile */

@media(max-width:900px){

    .com-grid {

        grid-template-columns:1fr;

    }


    .source-grid {

        grid-template-columns:1fr 1fr;

    }

}


/* ===========================================================
   TUCANA BREAD LANDING PAGE
=========================================================== */

.tucanang-page{
    background:#faf7f2;
    color:#2b2b2b;
    overflow:hidden;
}

/* ===========================================================
   COMMON
=========================================================== */

.tucanang-page section{
    padding:100px 8%;
}

.tucanang-page .section-heading{
    max-width:700px;
    margin:0 auto 70px;
    text-align:center;
}

.tucanang-page .section-heading span{
    display:inline-block;
    color:#b88022;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.tucanang-page .section-heading h2{
    font-size:52px;
    font-family:var(--serif);
    margin-bottom:18px;
    color:#1e1e1e;
}

.tucanang-page .section-heading p{
    font-size:17px;
    color:#666;
    line-height:1.8;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 34px;
    background:#b88022;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.btn-primary:hover{
    background:#8b6118;
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 34px;
    border:1px solid #b88022;
    color:#b88022;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.btn-secondary:hover{
    background:#b88022;
    color:#fff;
}

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

.tb-hero{
    min-height:90vh;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:80px;
}

.tb-tag{
    display:inline-block;
    background:#fff;
    padding:10px 18px;
    border-radius:100px;
    color:#b88022;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:25px;
}

.tb-hero h1{
    font-size:72px;
    line-height:1.05;
    font-family:var(--serif);
    margin-bottom:25px;
}

.tb-hero p{
    font-size:19px;
    line-height:1.9;
    color:#666;
    max-width:620px;
}

.tb-buttons{
    display:flex;
    gap:18px;
    margin-top:40px;
    flex-wrap:wrap;
}

.tb-hero-image{
    text-align:center;
}

.tb-hero-image img{
    width:100%;
    max-width:600px;
    object-fit:contain;
}

/* ===========================================================
   FEATURES
=========================================================== */

.tb-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.tb-feature{
    background:#fff;
    padding:45px;
    text-align:center;
    border-radius:18px;
    transition:.35s;
    box-shadow:0 12px 40px rgba(0,0,0,.05);
}

.tb-feature:hover{
    transform:translateY(-10px);
}

.tb-icon{
    font-size:50px;
    margin-bottom:25px;
}

.tb-feature h3{
    margin-bottom:15px;
    font-size:24px;
}

.tb-feature p{
    color:#666;
    line-height:1.8;
}

/* ===========================================================
   PRODUCTS
=========================================================== */

.tb-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.tb-product{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    transition:.35s;
}

.tb-product:hover{
    transform:translateY(-10px);
}

.tb-product img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.tb-product h3{
    padding:30px 30px 10px;
    font-size:24px;
}

.tb-product p{
    padding:0 30px 30px;
    color:#666;
}

/* ===========================================================
   PROCESS
=========================================================== */

.tb-process{
    background:#fff;
}

.tb-process-row{
    display:grid;
    grid-template-columns:repeat(11,auto);
    justify-content:center;
    align-items:center;
    gap:15px;
}

.tb-step{
    width:160px;
    text-align:center;
}

.step-number{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#b88022;
    color:#fff;
    margin:auto auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.tb-arrow{
    font-size:32px;
    color:#b88022;
}

/* ===========================================================
   QUALITY
=========================================================== */

.tb-quality-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.quality-card{
    background:#fff;
    padding:50px 30px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.35s;
}

.quality-card:hover{
    background:#b88022;
    color:#fff;
}

/* ===========================================================
   GALLERY
=========================================================== */

.tb-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.tb-gallery-grid img{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:16px;
    transition:.35s;
}

.tb-gallery-grid img:hover{
    transform:scale(1.05);
}

/* ===========================================================
   DISTRIBUTOR
=========================================================== */

.tb-distributor{
    background:#b88022;
    color:#fff;
    text-align:center;
}

.tb-distributor span{
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:12px;
}

.tb-distributor h2{
    font-size:54px;
    margin:20px 0;
    font-family:var(--serif);
}

.tb-distributor p{
    max-width:720px;
    margin:auto;
    line-height:1.9;
    opacity:.9;
}

.tb-distributor .btn-primary{
    margin-top:40px;
    background:#fff;
    color:#b88022;
}

/* ===========================================================
   CTA
=========================================================== */

.tb-cta{
    text-align:center;
    background:#2b2b2b;
    color:#fff;
}

.tb-cta h2{
    font-size:56px;
    font-family:var(--serif);
    margin-bottom:20px;
}

.tb-cta p{
    max-width:700px;
    margin:0 auto 40px;
    line-height:1.9;
    color:#ddd;
}

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

@media(max-width:1100px){

.tb-hero{
    grid-template-columns:1fr;
    text-align:center;
}

.tb-hero p{
    margin:auto;
}

.tb-buttons{
    justify-content:center;
}

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

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

.tb-features{
    grid-template-columns:1fr;
}

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

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

.tb-arrow{
    display:none;
}

}

@media(max-width:768px){

.tucanang-page section{
    padding:80px 24px;
}

.tb-hero h1{
    font-size:46px;
}

.section-heading h2,
.tb-distributor h2,
.tb-cta h2{
    font-size:38px;
}

.tb-grid,
.tb-gallery-grid,
.tb-quality-grid{
    grid-template-columns:1fr;
}

.tb-product img{
    height:220px;
}

}

/*==================================================
 PARTNERS PAGE
==================================================*/

#page-partners{
    background:#fff;
}

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

#page-partners .phero{
    height:72vh;
    min-height:620px;
    position:relative;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background-size:cover;
    background-position:center;
}

#page-partners .phero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.78),
            rgba(0,0,0,.45),
            rgba(0,0,0,.2)
        );
}

#page-partners .phero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.45),
            transparent 45%
        );
}

#page-partners .phcont{
    position:relative;
    z-index:2;
    max-width:720px;
    padding:0 70px 90px;
}

#page-partners .phbc{
    color:rgba(255,255,255,.65);
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:22px;
}

#page-partners .phtit{
    font-size:clamp(48px,7vw,86px);
    line-height:.95;
    font-family:var(--serif);
    font-weight:300;
    color:#fff;
    margin-bottom:24px;
}

#page-partners .phtit em{
    font-style:italic;
    color:var(--pb);
}

#page-partners .phsub{
    max-width:560px;
    color:rgba(255,255,255,.72);
    font-size:17px;
    line-height:1.9;
    font-weight:300;
}

/*==================================
 BACK LINK
==================================*/

#page-partners .backbar{
    padding:20px 70px;
    border-bottom:1px solid var(--pbt);
    background:#fff;
}

#page-partners .backbar span{
    display:inline-flex;
    gap:10px;
    align-items:center;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--pb);
    transition:.3s;
}

#page-partners .backbar span:hover{
    transform:translateX(-4px);
}

/*==================================
 INTRO
==================================*/

#page-partners .twos{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}

#page-partners .img-half{
    width:100%;
    border-radius:18px;
    display:block;
    box-shadow:
        0 40px 70px rgba(0,0,0,.12);
}

/*==================================
 SECTION HEADERS
==================================*/

#page-partners .sec-hdr{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

#page-partners .t1,
#page-partners .t2{
    margin-top:16px;
    font-size:clamp(36px,4vw,56px);
    font-weight:300;
    line-height:1.1;
    font-family:var(--serif);
}

#page-partners .t1 em,
#page-partners .t2 em{
    color:var(--pb);
    font-style:italic;
}

#page-partners .bd{
    color:var(--pbd);
    line-height:2;
    font-size:15px;
    margin-bottom:20px;
}

/*==================================
 PARTNER GRID
==================================*/

.pargrid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px,1fr)
        );

    gap:28px;

}

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

.parcard{

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    border-radius:18px;

    padding:34px;

    transition:.35s;

    display:flex;

    flex-direction:column;

    position:relative;

    overflow:hidden;

}

.parcard::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:4px;

    background:var(--pb);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.parcard:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 65px rgba(0,0,0,.09);

}

.parcard:hover::before{

    transform:scaleX(1);

}

.parcat{

    display:inline-flex;

    width:fit-content;

    padding:7px 14px;

    border-radius:50px;

    background:rgba(9,71,148,.08);

    color:var(--pb);

    font-size:11px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:22px;

}

.parname{

    font-family:var(--serif);

    font-size:30px;

    font-weight:300;

    margin-bottom:16px;

    color:#111;

    transition:.3s;

}

.parcard:hover .parname{

    color:var(--pb);

}

.pardesc{

    color:#666;

    line-height:1.9;

    font-size:14px;

    flex:1;

}

.parsite{

    margin-top:28px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--pb);

    text-decoration:none;

    font-weight:600;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

}

.parsite::after{

    content:"→";

    transition:.3s;

}

.parsite:hover::after{

    transform:translateX(6px);

}

/*==================================
 BUTTONS
==================================*/

#page-partners .bp{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    background:var(--pb);

    color:#fff;

    text-decoration:none;

    border-radius:6px;

    letter-spacing:1px;

    text-transform:uppercase;

    font-size:12px;

    transition:.35s;

}

#page-partners .bp:hover{

    background:#111;

}

#page-partners .bo{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

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

    color:#fff;

    cursor:pointer;

    transition:.35s;

}

#page-partners .bo:hover{

    background:#fff;

    color:#111;

}

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

@media(max-width:1100px){

    #page-partners .twos{

        grid-template-columns:1fr;

        gap:50px;

    }

    .pargrid{

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

    }

}

@media(max-width:768px){

    #page-partners .phcont{

        padding:0 30px 70px;

    }

    #page-partners .backbar{

        padding:18px 30px;

    }

    .pargrid{

        grid-template-columns:1fr;

    }

}
/*==================================
 DARK SECTION
==================================*/

#page-partners .s-dark{
    background:#08131f;
    color:#fff;
    position:relative;
    overflow:hidden;
}

#page-partners .s-dark::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(9,71,148,.18),
        transparent 45%);
    pointer-events:none;
}

#page-partners .t1w{
    color:#fff;
}

#page-partners .t1w em{
    color:var(--pb);
}

#page-partners .etw{
    color:rgba(255,255,255,.6);
}

#page-partners .elw{
    background:var(--pb);
}

/*==================================
 APPROACH GRID
==================================*/

.arow{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.aw{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:36px;
    transition:.35s;
    backdrop-filter:blur(6px);
}

.aw:hover{
    transform:translateY(-10px);
    border-color:rgba(9,71,148,.4);
    background:rgba(255,255,255,.06);
}

.an{
    font-size:20px;
    font-family:var(--serif);
    font-weight:300;
    margin-bottom:18px;
    color:#fff;
}

.aw p{
    color:rgba(255,255,255,.65);
    line-height:1.9;
    font-size:14px;
}

/*==================================
 WHO WE SERVE
==================================*/

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

.vi{
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
    border-radius:18px;
    padding:34px;
    transition:.35s;
}

.vi:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 55px rgba(0,0,0,.08);
}

.vlbl{
    display:inline-block;
    margin-bottom:18px;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
    color:var(--pb);
}

.vtit{
    font-family:var(--serif);
    font-size:28px;
    font-weight:300;
    margin-bottom:18px;
    line-height:1.2;
}

.vdesc{
    color:#666;
    line-height:1.9;
    font-size:14px;
}

/*==================================
 CTA BAND
==================================*/

.ctaband{
    background:#0b1522;
    color:#fff;
    padding:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
}

.ctatxt{
    font-size:42px;
    font-family:var(--serif);
    font-weight:300;
    line-height:1.2;
}

.ctatxt em{
    color:var(--pb);
    font-style:italic;
}

.ctaacts{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.bpw{
    background:var(--pb);
}

.bpw:hover{
    background:#fff;
    color:#111;
}

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

#page-partners footer{
    background:#050b13;
    color:#fff;
    padding-top:90px;
}

#page-partners .ftop{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:60px;
    padding:0 70px 70px;
}

#page-partners .fbrand{
    font-family:var(--serif);
    font-size:34px;
    font-weight:300;
    margin-bottom:16px;
}

#page-partners .fbline{
    width:80px;
    height:2px;
    background:var(--pb);
    margin-bottom:26px;
}

#page-partners .ftagl{
    color:rgba(255,255,255,.6);
    line-height:1.9;
    font-size:14px;
    margin-bottom:28px;
}

#page-partners .fcrow{
    display:flex;
    gap:12px;
    color:#fff;
    font-size:14px;
}

#page-partners .fct{
    margin-bottom:22px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

#page-partners .fl{
    display:block;
    color:rgba(255,255,255,.6);
    text-decoration:none;
    margin-bottom:14px;
    transition:.3s;
}

#page-partners .fl:hover{
    color:#fff;
    padding-left:8px;
}

#page-partners .fbot{
    border-top:1px solid rgba(255,255,255,.08);
    padding:28px 70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

#page-partners .fcopy{
    color:rgba(255,255,255,.45);
    font-size:13px;
}

#page-partners .fblinks{
    display:flex;
    gap:28px;
}

#page-partners .fbl{
    color:rgba(255,255,255,.45);
    cursor:pointer;
    transition:.3s;
}

#page-partners .fbl:hover{
    color:#fff;
}

/*==================================
 ANIMATIONS
==================================*/

.parcard,
.aw,
.vi,
.img-half{
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.img-half:hover{
    transform:scale(1.03);
}

.bp,
.bo,
.parsite{
    transition:all .3s ease;
}

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

@media(max-width:1200px){

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

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

    #page-partners .ftop{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:900px){

    .ctaband{
        flex-direction:column;
        text-align:center;
        padding:60px 40px;
    }

    .ctaacts{
        justify-content:center;
    }

}

@media(max-width:768px){

    .arow,
    .vgrid,
    #page-partners .ftop{
        grid-template-columns:1fr;
    }

    .ctatxt{
        font-size:32px;
    }

    #page-partners footer{
        text-align:center;
    }

    #page-partners .fcrow{
        justify-content:center;
    }

    #page-partners .fbot{
        flex-direction:column;
    }

}

.partner-hero{

height:70vh;
min-height:620px;
position:relative;
display:flex;
align-items:center;
background:url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&q=80") center/cover;
overflow:hidden;

}

.partner-overlay{

position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(6,18,34,.88),rgba(6,18,34,.55),rgba(6,18,34,.2));

}

.partner-wrap{

position:relative;
z-index:2;
max-width:760px;
padding:0 70px;
color:#fff;

}

.partner-tag{

display:inline-block;
padding:9px 18px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
border-radius:40px;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:26px;

}

.partner-wrap h1{

font-size:clamp(52px,7vw,84px);
line-height:.95;
font-family:var(--serif);
font-weight:300;
margin-bottom:28px;

}

.partner-wrap h1 span{

color:var(--pb);
font-style:italic;

}

.partner-wrap p{

font-size:17px;
line-height:1.9;
color:rgba(255,255,255,.75);
max-width:620px;

}

.partner-grid{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;

}

.partner-grid img{

width:100%;
border-radius:18px;
display:block;
box-shadow:0 35px 70px rgba(0,0,0,.12);

}

.small-title{

display:block;
font-size:12px;
letter-spacing:3px;
text-transform:uppercase;
font-weight:700;
color:var(--pb);
margin-bottom:18px;

}

.partner-intro h2{

font-size:54px;
font-family:var(--serif);
font-weight:300;
line-height:1.1;
margin-bottom:28px;

}

.partner-intro h2 span{

color:var(--pb);
font-style:italic;

}

.partner-intro p{

font-size:15px;
line-height:2;
color:#666;
margin-bottom:22px;

}

.section-head{

max-width:700px;
margin:0 auto 60px;
text-align:center;

}

.section-head span{

font-size:12px;
letter-spacing:3px;
text-transform:uppercase;
font-weight:700;
color:var(--pb);

}

.section-head h2{

font-size:52px;
font-family:var(--serif);
font-weight:300;
margin-top:20px;

}

.section-head em{

font-style:italic;
color:var(--pb);

}

.service-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;

}

.service-grid article{

padding:40px;
border:1px solid rgba(0,0,0,.07);
border-radius:18px;
transition:.35s;
background:#fff;

}

.service-grid article:hover{

transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.service-grid h3{

font-size:28px;
font-family:var(--serif);
font-weight:300;
margin-bottom:20px;

}

.service-grid p{

line-height:1.9;
color:#666;

}

.partner-stats{

background:#08131f;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;

}

.stat{

padding:60px 30px;
text-align:center;
background:#0f1d2e;

}

.stat h2{

font-size:56px;
font-family:var(--serif);
font-weight:300;
color:#fff;
margin-bottom:12px;

}

.stat span{

color:rgba(255,255,255,.65);
font-size:13px;
letter-spacing:1px;

}

.value-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.value-grid div{

padding:40px;
background:#fff;
border-radius:18px;
border:1px solid rgba(0,0,0,.06);
transition:.35s;

}

.value-grid div:hover{

transform:translateY(-8px);
box-shadow:0 25px 55px rgba(0,0,0,.08);

}

.value-grid h3{

font-size:28px;
font-family:var(--serif);
font-weight:300;
margin-bottom:18px;

}

.value-grid p{

line-height:1.9;
color:#666;

}

@media(max-width:1000px){

.partner-grid,
.service-grid,
.partner-stats,
.value-grid{

grid-template-columns:1fr;

}

.partner-wrap{

padding:0 30px;

}

.partner-intro h2,
.section-head h2{

font-size:40px;

}

}

/* ===============================
   COMMODITY SUB PAGE
   =============================== */

.page {
  display: none;
}

.page.active {
  display: block;
}


/* HERO */
.phero {
  height: 520px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}

.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.75),
      rgba(0,0,0,.35)
    );
}

.phcont {
  position: relative;
  z-index: 2;
  padding: 0 60px;
  max-width: 900px;
}

.phbc {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 25px;
}

.phtit {
  font-size: clamp(45px,5vw,72px);
  line-height: 1;
  font-weight: 600;
  color:white;
  margin:0 0 20px;
  letter-spacing:-2px;
}

.phtit em {
  font-style:italic;
  font-weight:400;
}

.phsub {
  max-width:650px;
  font-size:18px;
  line-height:1.7;
  color:rgba(255,255,255,.85);
  font-weight:300;
}


/* SECTION */

.sec {
  padding:100px 60px;
}

.s-white {
  background:#fff;
}

.twos {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
}


.fade {
  opacity:1;
}


/* EYEBROW */

.ey {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:25px;
}

.el {
  width:35px;
  height:1px;
  background:var(--pbp);
}

.et {
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--pbp);
}


/* HEADINGS */

.t2 {
  font-size:48px;
  line-height:1.15;
  font-weight:500;
  letter-spacing:-1.5px;
  color:var(--dark);
}

.t2 em {
  display:block;
  font-style:italic;
  font-weight:400;
}


/* BODY TEXT */

.bd {
  font-size:16px;
  line-height:1.9;
  color:var(--st);
  font-weight:300;
  margin-bottom:22px;
}


/* IMAGE */

.img-half {
  width:100%;
  height:600px;
  object-fit:cover;
  display:block;
}



/* INFO BOXES */

.twos div[style*="grid-template-columns"] {
  margin-top:35px;
}


.twos div[style*="padding:22px"] {
  transition:.3s ease;
}


.twos div[style*="padding:22px"]:hover {
  transform:translateY(-5px);
  border-color:var(--pbp);
}



/* CTA BAND */

.ctaband {
  background:#101010;
  padding:70px 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
}


.ctatxt {
  color:white;
  font-size:42px;
  line-height:1.2;
  font-weight:400;
  max-width:650px;
  letter-spacing:-1px;
}

.ctatxt em {
  font-style:italic;
  display:block;
}


.ctaacts {
  display:flex;
  gap:15px;
  align-items:center;
}


.bp,
.bo {
  padding:16px 30px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.3s ease;
}


.bpw {
  background:white;
  color:#111;
}


.bpw:hover {
  background:var(--pbp);
  color:white;
}


.bo {
  border:1px solid rgba(255,255,255,.4);
  color:white;
}


.bo:hover {
  border-color:white;
}



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


footer {
  background:#080808;
  color:white;
}


.ftop {
  padding:80px 60px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:50px;
}


.fbrand {
  font-size:28px;
  font-weight:700;
  letter-spacing:3px;
}


.fbline {
  width:45px;
  height:2px;
  background:var(--pbp);
  margin:20px 0;
}


.ftagl {
  color:#aaa;
  font-size:14px;
  line-height:1.8;
  max-width:350px;
}


.fcrow {
  margin-top:25px;
  display:flex;
  gap:20px;
  font-size:14px;
}


.fcrow strong {
  color:white;
}


.fcrow span {
  color:#aaa;
}


.fct {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:3px;
  color:white;
  margin-bottom:25px;
}


.fl {
  display:block;
  color:#999;
  text-decoration:none;
  font-size:14px;
  margin-bottom:14px;
  transition:.3s;
}


.fl:hover {
  color:white;
  padding-left:5px;
}


.fbot {
  border-top:1px solid rgba(255,255,255,.1);
  padding:25px 60px;
  display:flex;
  justify-content:space-between;
  color:#777;
  font-size:13px;
}


.fblinks {
  display:flex;
  gap:30px;
}


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


@media(max-width:900px){

.phero{
  height:420px;
}

.phcont{
  padding:0 25px;
}


.phtit{
  font-size:42px;
}


.phsub{
  font-size:15px;
}


.sec{
  padding:60px 25px;
}


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


.t2{
  font-size:36px;
}


.img-half{
  height:400px;
}


.ctaband{
  padding:50px 25px;
  flex-direction:column;
  align-items:flex-start;
}


.ctatxt{
  font-size:32px;
}


.ctaacts{
  flex-direction:column;
  width:100%;
}


.bp,
.bo{
  width:100%;
  text-align:center;
}


.ftop{
  padding:60px 25px;
  grid-template-columns:1fr;
}


.fbot{
  padding:25px;
  flex-direction:column;
  gap:20px;
}


}
/* =========================================================
   PARTNERS PAGE
========================================================= */


/* HERO */

.partners-hero{

    background: var(--navy);
}



.partners-lead{

    max-width:760px;
    margin-top:25px;

    font-size:18px;
    line-height:1.8;

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

}



.partners-actions{

    display:flex;
    gap:18px;

    margin-top:40px;

}







/* =========================================================
   INTRO SECTION
========================================================= */


.partners-points{

    margin-top:35px;

    display:grid;

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

    gap:18px;


}



.partners-points div{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:14px;

    font-weight:600;

    color:var(--text);

}



.partners-points svg{

    width:20px;

    color:var(--navy);

}





/* =========================================================
   PARTNER GRID
========================================================= */


.pargrid{


    display:grid;

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


    gap:30px;


    margin-top:60px;


}





/* =========================================================
   PARTNER CARD (NO HOVER)
========================================================= */

.parcard{

    background:white;

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

    padding:35px;

    min-height:330px;

    display:flex;

    flex-direction:column;

    transition:.25s ease;

}


.parcard:hover{

    transform:translateY(-4px);

    border-color:var(--pbt);

}



/* =========================================================
   LOGO AREA
========================================================= */

.par-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.partner-logo{

    width:110px;

    height:45px;

    object-fit:contain;

}





.par-badge{

    padding:7px 14px;

    border-radius:30px;

    background:#f4f5f7;

    color:var(--navy);

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}





.parname{

    font-size:24px;

    margin-bottom:15px;

    color:var(--navy);

}





.pardesc{

    color:#667085;

    line-height:1.7;

    font-size:15px;

    flex:1;

}





.parsite{

    margin-top:25px;

    display:inline-flex;

    width:max-content;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:var(--navy);

}
/* =========================================================
   LOGO AREA
========================================================= */


.par-top{


    display:flex;

    justify-content:space-between;

    align-items:center;


    margin-bottom:30px;


}




.partner-logo{


    width:110px;

    height:45px;


    object-fit:contain;


    filter:none;


    transition:.3s ease;


}









.par-badge{


    padding:7px 14px;


    border-radius:30px;


    background:
    rgba(0,0,0,.05);


    font-size:11px;


    font-weight:700;


    letter-spacing:1px;


    text-transform:uppercase;


}




.parcard:hover .par-badge{


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


    color:white;


}







/* NAME */


.parname{


    font-size:24px;


    margin-bottom:15px;


    color:var(--navy);


    transition:.3s ease;


}






/* DESCRIPTION */


.pardesc{


    color:#667085;


    line-height:1.7;


    font-size:15px;


    flex:1;


    transition:.3s ease;


}






/* WEBSITE LINK */


.parsite{


    margin-top:25px;


    display:inline-flex;


    width:max-content;


    font-size:13px;


    font-weight:700;


    letter-spacing:1px;


    text-transform:uppercase;


    color:var(--navy);


    transition:.3s ease;


}




.parsite:hover{


    opacity:.75;


}









/* =========================================================
   CTA
========================================================= */


.partner-cta{


    max-width:850px;


}




.partner-buttons{


    display:flex;

    gap:20px;


    margin-top:35px;


}









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


@media(max-width:1100px){


.pargrid{

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

}


}





@media(max-width:700px){


.partners-actions,
.partner-buttons{


    flex-direction:column;


}



.pargrid{


    grid-template-columns:1fr;


}



.partners-points{


    grid-template-columns:1fr;


}



.parcard{


    padding:25px;


}



.partner-logo{


    width:90px;

}



}

/* ==========================================================
   TESTIMONIALS
========================================================== */

.testimonial-section{
    padding:110px 8%;
    background:var(--bg,#fff);
}

.testimonial-head{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.testimonial-head .section-tag{
    display:inline-block;
    padding:8px 18px;
    border:1px solid var(--pbt,#ddd);
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--pbp,#0d6efd);
    margin-bottom:22px;
}

.testimonial-head h2{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.1;
    margin-bottom:18px;
    color:var(--pt,#111);
}

.testimonial-head p{
    font-size:1.05rem;
    line-height:1.8;
    color:var(--ps,#666);
}

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

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:32px;
}

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

.testimonial-card{
    background:#fff;
    border:1px solid var(--pbt,#e8e8e8);
    border-radius:20px;
    padding:40px 32px;
    text-align:center;
    transition:.35s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.testimonial-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:var(--pbp,#0057ff);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

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

/* ================= LOGO ================= */

.testimonial-logo{
    width:110px;
    height:110px;
    object-fit:contain;
    margin-bottom:28px;
    display:block;
}

/* ================= TITLE ================= */

.testimonial-card h3{
    font-size:1.25rem;
    font-weight:700;
    color:var(--pt,#111);
    margin-bottom:20px;
    line-height:1.35;
}

/* ================= TEXT ================= */

.testimonial-text{
    font-size:.98rem;
    line-height:1.85;
    color:var(--ps,#666);
    margin-bottom:26px;
    flex:1;
    font-style:italic;
    position:relative;
}

.testimonial-text::before{
    content:"“";
    font-size:4rem;
    line-height:0;
    color:rgba(0,0,0,.08);
    position:absolute;
    left:-8px;
    top:12px;
    font-family:serif;
}

/* ================= AUTHOR ================= */

.testimonial-author{
    display:block;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--pbp,#0057ff);
}

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

@media (max-width:992px){

    .testimonial-section{
        padding:90px 6%;
    }

    .testimonial-grid{
        gap:24px;
    }

}

@media (max-width:768px){

    .testimonial-section{
        padding:80px 24px;
    }

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

    .testimonial-card{
        padding:35px 26px;
    }

    .testimonial-logo{
        width:90px;
        height:90px;
    }

    .testimonial-head{
        margin-bottom:50px;
    }

    .testimonial-head h2{
        font-size:2rem;
    }

}

@media (max-width:480px){

    .testimonial-card{
        padding:30px 22px;
        border-radius:16px;
    }

    .testimonial-logo{
        width:80px;
        height:80px;
    }

    .testimonial-card h3{
        font-size:1.1rem;
    }

    .testimonial-text{
        font-size:.93rem;
    }

}