/* components.css — hero + partners (chrome preview). Home sections build next. */

/* Hero */
.hero{position:relative;background:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url('../assets/img/hero-bg.webp') center/cover no-repeat;z-index:0}
.hero .wrap{position:relative;z-index:1;text-align:center;max-width:900px;padding:5.5rem 1.5rem 4.5rem}
.hero h1{margin:0 auto}
.hero h1 .dot{color:var(--green)}
.hero .lead{color:var(--muted);font-size:1.08rem;max-width:56ch;margin:1.4rem auto 2rem}
.hero .cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Partners strip */
.partners{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partners .wrap{display:flex;align-items:center;gap:2.5rem;padding:1.6rem 1.5rem;flex-wrap:wrap}
.partners .plabel{font-size:.9rem;font-weight:600;color:var(--navy);white-space:nowrap}
.partners .plogos{display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;flex:1;justify-content:space-around;opacity:.85}
.partners .plogos .ph{height:26px;display:flex;align-items:center;gap:.4rem;color:var(--navy);font-weight:700;font-size:1.05rem}

.buildnote{max-width:var(--wrap);margin:2.5rem auto;padding:1rem 1.5rem;font-size:.85rem;color:var(--muted-2);text-align:center}
.buildnote code{background:var(--bg-soft);padding:.1rem .4rem;border-radius:5px}

/* ============ Generic page hero (Services/About/Contact/Stubs) ============ */
.pagehero{position:relative;background:#fff;overflow:hidden;text-align:center}
.pagehero::before{content:"";position:absolute;inset:0;background:url('../assets/img/hero-bg.webp') center/cover no-repeat;z-index:0}
.pagehero .wrap{position:relative;z-index:1;max-width:820px;padding:4.5rem 1.5rem 3rem}
.pagehero p{font-size:1.05rem;max-width:60ch;margin:1rem auto 1.8rem}
.pagehero .cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ============ Home: Explore our Services ============ */
.explore{padding:4.5rem 0}
.explore .head{max-width:640px;margin-bottom:2rem}
.explore h2{margin:.3rem 0 .6rem}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.filters button{font:inherit;font-size:.85rem;font-weight:500;color:var(--muted);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:.5rem 1.1rem;cursor:pointer;transition:.15s}
.filters button.on,.filters button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.scard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;
  box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.scard:hover{transform:translateY(-4px);border-color:#cfd6e4;box-shadow:var(--shadow)}
.scard .ill{border-radius:var(--radius-sm);height:150px;margin-bottom:1.2rem;display:grid;place-items:center;
  background:linear-gradient(135deg,#eef2f9,#e4ecf7);color:var(--navy);position:relative;overflow:hidden}
.scard .ill svg{width:44px;height:44px;opacity:.85}
.scard .ill.ph::after{content:"illustration";position:absolute;bottom:8px;right:10px;font-size:.62rem;color:#9aa4b8;letter-spacing:.05em}
.scard h3{font-size:1.12rem;margin-bottom:.45rem}
.scard p{font-size:.92rem;flex:1}
.scard .more{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--navy);font-size:.88rem;margin-top:1rem}
.scard .more:hover{gap:.6rem;color:var(--green)}

/* ============ Home: Trusted by (dark) ============ */
.trusted{background:var(--navy);color:#fff;padding:4rem 0}
.trusted h2{color:#fff;text-align:center;margin-bottom:2.2rem}
.tlogos{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;max-width:900px;margin:0 auto}
.tlogos2{display:flex;gap:2.6rem;justify-content:center;flex-wrap:wrap}
.tblock{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;flex:0 1 400px}
.tlogos .cell,.tblock .cell{aspect-ratio:16/9;border:1px solid rgba(255,255,255,.12);border-radius:10px;display:grid;
  place-items:center;color:#cdd3e6;font-weight:600;font-size:.9rem;background:rgba(255,255,255,.02)}

/* ============ Home: Testimonials ============ */
.tst{padding:4.5rem 0;background:var(--bg-soft)}
.tst .head{text-align:center;max-width:620px;margin:0 auto 2.4rem}
.tst h2{margin-bottom:.5rem}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;grid-auto-flow:row dense}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.tcard.big{grid-row:span 2;background:var(--navy);color:#fff;border-color:var(--navy)}
.tcard.brand{border:1px solid var(--line)}
.tcard.tall{grid-row:span 2}
.tcard .logo-row{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--navy)}
.tcard.big .logo-row{color:#fff}
.tcard p{font-size:.92rem;color:var(--muted);flex:1}
.tcard.big p{color:#cfd3e6;font-size:1.02rem}
.tcard .who{display:flex;align-items:center;gap:.7rem}
.tcard .who img{width:40px;height:40px;border-radius:50%}
.tcard .who b{font-size:.9rem;display:block;color:var(--navy)}
.tcard.big .who b{color:#fff}
.tcard .who span{font-size:.8rem;color:var(--muted-2)}

/* ============ Home: Fortify CTA ============ */
.fortify{padding:3rem 0 4.5rem}
.fortify .card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);
  padding:3rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;position:relative;overflow:hidden}
.fortify h2{margin-bottom:.7rem}
.fortify p{max-width:46ch;margin-bottom:1.5rem}
.fortify .art{height:200px;border-radius:var(--radius);background:radial-gradient(circle at 60% 40%,#eef3fb,#e2ebf8);display:grid;place-items:center;color:#b9c2d6}

/* ============ Shared: Ready to Secure (dark circuit) ============ */
.secure-cta{padding:3rem 0 4.5rem}
.secure-inner{position:relative;background:var(--navy);border-radius:22px;color:#fff;overflow:hidden;padding:3rem}
.secure-inner::after{content:"";position:absolute;inset:0;background:url('../assets/img/secure-circuit.webp') right center/cover no-repeat;opacity:.9;z-index:0}
.secure-copy{position:relative;z-index:1}
.secure-copy h2{color:#fff}
.secure-copy p{color:#cfd3e6;max-width:44ch;margin:.6rem 0 1.5rem}
.secure-btns{display:flex;gap:.7rem;flex-wrap:wrap}

/* ============ Services page: split scroll-sync ============ */
.svc-split{padding:2rem 0 4rem}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.svc-list{display:flex;flex-direction:column}
.svc-block{padding:3rem 0;border-top:1px solid var(--line)}
.svc-block:first-child{border-top:0;padding-top:1rem}
.svc-block .eyebrow{margin-bottom:.7rem}
.svc-block h2{font-size:1.9rem;margin-bottom:.7rem}
.svc-block>p{margin-bottom:1.5rem;max-width:52ch}
.svc-items{display:flex;flex-direction:column;gap:1.1rem}
.svc-item{display:flex;gap:.9rem}
.svc-item .ck{flex:0 0 26px;height:26px;border-radius:7px;border:1.5px solid var(--navy);display:grid;place-items:center;color:var(--navy);margin-top:2px}
.svc-item b{display:block;color:var(--navy);font-size:.98rem;margin-bottom:.15rem}
.svc-item p{font-size:.9rem}
.svc-sticky{position:sticky;top:110px}
.svc-cardvis{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:1.6rem;transition:.3s}
.svc-cardvis h4{font-size:1.05rem;margin-bottom:.35rem}
.svc-cardvis .mini{font-size:.88rem;color:var(--muted);margin-bottom:1.1rem}
.svc-cardvis .ill{height:230px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#eef2f9,#e3ecf7);display:grid;place-items:center;color:#aab4c8;position:relative}
.svc-cardvis .ill svg{width:52px;height:52px;opacity:.8}
.svc-cardvis .tagfoot{margin-top:1rem;font-size:.72rem;color:#9aa4b8;text-align:center}
.svc-cardvis.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.svc-cardvis.dark .mini{color:#cfd3e6}
.svc-inline-card{display:none;margin-top:1.5rem}

/* ============ About ============ */
.about-hero{position:relative;text-align:center;overflow:hidden;background:#fff}
.about-hero::before{content:"CE";position:absolute;top:-1.5rem;left:50%;transform:translateX(-50%);
  font-family:var(--head);font-weight:800;font-size:clamp(10rem,32vw,26rem);color:rgba(11,11,36,.05);z-index:0;line-height:1}
.about-hero .wrap{position:relative;z-index:1;max-width:820px;padding:5.5rem 1.5rem 2rem}
.about-hero p{max-width:66ch;margin:1.2rem auto 0}
.ceo-card{max-width:760px;margin:3rem auto 0;background:var(--orange);border-radius:20px;color:#fff;
  padding:2rem;display:grid;grid-template-columns:200px 1fr;gap:1.6rem;align-items:center;box-shadow:var(--shadow)}
.ceo-card .who{text-align:center}
.ceo-card .who img{width:84px;height:84px;border-radius:50%;margin:0 auto .7rem;border:3px solid rgba(255,255,255,.5)}
.ceo-card .who .nm{font-family:'Caveat',cursive;font-size:1.7rem;font-weight:700;line-height:1}
.ceo-card .who .rl{font-size:.85rem;opacity:.9;margin-top:.2rem}
.ceo-card .q{font-size:.95rem;line-height:1.6;color:#fff}
.team{padding:4rem 0;background:var(--bg-soft)}
.team .head{text-align:center;max-width:600px;margin:0 auto 2.4rem}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;max-width:900px;margin:0 auto}
.team-card{text-align:center}
.team-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:#eef0f4;margin-bottom:.8rem}
.team-card b{display:block;color:var(--navy);font-size:.95rem}
.team-card span{font-size:.82rem;color:var(--muted-2)}

/* ============ Contact ============ */
.contact-wrap{padding:1rem 0 4.5rem}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.cform{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:2rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.85rem;font-weight:500;color:var(--navy);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;background:#fff;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,11,36,.06)}
.field textarea{resize:vertical;min-height:120px}
.cform .btn-dark{width:100%;justify-content:center;margin-top:.3rem}
.direct h3{font-size:1.2rem;margin-bottom:1rem}
.direct .drow{display:flex;gap:.6rem;align-items:center;color:var(--muted);margin-bottom:.7rem;font-size:.95rem}
.direct .drow i{color:var(--navy)}
.mapcard{margin-top:1.5rem;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.mapcard iframe{width:100%;height:230px;border:0;display:block;filter:grayscale(.2)}
.mapcard .mfoot{padding:1rem 1.2rem}
.mapcard .mfoot b{display:block;color:var(--navy);font-size:.95rem}
.mapcard .mfoot span{font-size:.85rem;color:var(--muted)}

/* ============ Stub pages ============ */
.stub{min-height:52vh;display:grid;place-items:center;text-align:center;padding:5rem 1.5rem}
.stub .box{max-width:520px}
.stub .badge{display:inline-block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:1rem}
.stub h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem}
.stub p{margin-bottom:1.6rem}

/* ============ Home: Explore our Services — BENTO (overrides) ============ */
.ex-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:1.3rem;align-items:stretch}
.ex-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.ex-card h3{font-size:1.05rem;margin-bottom:.4rem}
.ex-card>p{font-size:.88rem;color:var(--muted)}
.ex-compliance{grid-column:1;grid-row:1 / span 2}
.ex-mentoring{grid-column:2;grid-row:1}
.ex-forensic{grid-column:2;grid-row:2}
.ex-assessment{grid-column:3;grid-row:1 / span 2}

/* compliance illustration grid + tabs */
.thumbgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin:1.3rem 0}
.thumb{aspect-ratio:1;border-radius:9px;background:var(--bg-soft);display:grid;place-items:center;color:#cbd2df}
.thumb.active{outline:2px solid var(--orange);outline-offset:-2px;background:#fff}
.ex-tabs{display:flex;gap:.15rem;margin-top:auto;flex-wrap:nowrap}
.ex-tabs button{font:inherit;font-size:.78rem;color:var(--muted-2);background:none;border:1px solid transparent;padding:.35rem .6rem;border-radius:999px;cursor:pointer;transition:.15s;white-space:nowrap}
.ex-tabs button.on{color:var(--navy);border-color:var(--line);font-weight:500}
.ex-tabs button:hover{color:var(--navy)}

/* mentoring / forensic top graphic */
.ex-graphic{height:130px;border-radius:var(--radius-sm);background:var(--bg-soft);display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.1rem;position:relative;overflow:hidden}
.ex-graphic.net .av{width:34px;height:34px;border-radius:50%;background:#d5dbe6;border:2px solid #fff}
.ex-graphic.net .node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.3rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;font-size:.72rem;font-weight:600;color:var(--navy);box-shadow:var(--shadow-sm)}
.ex-graphic.hex{background:repeating-linear-gradient(60deg,#eef1f6,#eef1f6 10px,#f5f7fb 10px,#f5f7fb 20px)}
.ex-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--navy);color:#fff;font-size:.72rem;font-weight:600;padding:.4rem .85rem;border-radius:999px}

/* security assessment inner checklist card */
.assess{margin-top:1.3rem;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.1rem 1.2rem;background:#fff}
.assess-row{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.assess-row:last-of-type{border-bottom:0}
.assess-row .ic{flex:0 0 34px;height:34px;border-radius:9px;display:grid;place-items:center}
.assess-row b{font-size:.86rem;font-weight:500;color:var(--navy)}
.assess-foot{display:flex;align-items:center;justify-content:center;gap:.3rem;font-size:.68rem;color:#aeb6c6;padding-top:.9rem}


/* ===================== Real asset wiring ===================== */
.thumbgrid .thumb{padding:6px;overflow:hidden}
.thumbgrid .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.thumb.blank{background:var(--bg-soft)}
.ex-graphic.forensic{background:#0B0B24 url('../assets/img/service-forensic.webp') center/cover no-repeat}
.ex-graphic.forensic .ex-badge{background:rgba(11,11,36,.85);backdrop-filter:blur(2px)}
.assess-row .ic{background:transparent!important}
.assess-row .ic img{width:32px;height:32px;object-fit:contain}
.fortify .art{height:auto;background:transparent}
.fortify .art img{width:100%;max-width:460px;height:auto;margin:0 auto}
.svc-cardvis .ill img{width:100%;height:100%;object-fit:contain;display:block}
.svc-cardvis.dark .ill{background:#0B0B24}
.about-hero::before{content:"";background:url('../assets/img/logo-dark.webp') center top/contain no-repeat;opacity:.06;width:min(720px,86%);height:360px;font-size:0}

/* ===================== Observation fixes ===================== */
/* #4 Fortify illustration smaller */
.fortify .art img{max-width:300px}
/* #2 Services "Ready to Secure" circuit: lightened + anchored to the right */
.secure-inner::after{background-size:contain;background-position:right center;filter:none;opacity:.6}
/* #6,#7,#8 Services light-card illustrations sized to fit */
.svc-cardvis .ill{height:auto;min-height:210px;padding:1.1rem}
.svc-cardvis .ill img{width:auto;height:auto;max-width:100%;max-height:220px;margin:0 auto}
/* Forensic (dark) card fills with its image */
.svc-cardvis.dark .ill{padding:0;min-height:0;background:#0B0B24;border-radius:var(--radius-sm);overflow:hidden}
.svc-cardvis.dark .ill img{width:100%;height:auto;max-height:none}
/* #5 Compliance grid inside the services card */
.svc-compliance{margin-top:1rem}
.svc-compliance .thumbgrid{margin:0 0 1rem}

.svc-cardvis.dark h4{color:#fff}

/* #2/#3 Services sticky card compact + right-aligned (match design, not full-column) */
.svc-sticky{max-width:400px;margin-left:auto}
.svc-cardvis{padding:1.4rem}
.svc-compliance .thumbgrid{gap:.5rem;margin:.8rem 0 1rem}

/* ===================== Mentoring network graphic ===================== */
.mentor-net{position:relative;width:100%;aspect-ratio:2.1/1;min-height:180px;margin-bottom:1.1rem}
.mentor-links{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.mentor-links path{fill:none;stroke:#cbd3e0;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.mav{position:absolute;width:46px;height:46px;border-radius:50%;transform:translate(-50%,-50%);
  border:3px solid #fff;box-shadow:0 5px 14px rgba(11,11,36,.14);object-fit:cover;background:#eef0f4;z-index:1}
.mav.a1{left:17%;top:30%}.mav.a2{left:50%;top:14%;width:54px;height:54px}.mav.a3{left:83%;top:30%}
.mav.a4{left:17%;top:78%}.mav.a5{left:50%;top:90%}.mav.a6{left:83%;top:78%}
.mentor-node{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:inline-flex;
  align-items:center;gap:.32rem;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.32rem .72rem;font-size:.72rem;font-weight:600;color:var(--navy);
  box-shadow:0 5px 16px rgba(11,11,36,.14);white-space:nowrap;z-index:2}
/* services mentoring card: a touch taller */
.svc-mentor .mentor-net{aspect-ratio:1.5/1;min-height:230px}

/* Mentoring — homepage top-3 variant (compact) */
.mentor-net.top3{aspect-ratio:2.5/1;min-height:150px;margin-bottom:.6rem}
.mentor-net.top3 .mentor-node{top:62%}
.mentor-net.top3 .mav.a1{top:32%}
.mentor-net.top3 .mav.a2{top:16%}
.mentor-net.top3 .mav.a3{top:32%}