@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Custom properties ──────────────────────────────────────────────────────
   Note: aiadvisory.html carried a stripped :root missing --ink2/--ink3/
   --muted/--line/--orange; this file is authoritative for all pages.
   ──────────────────────────────────────────────────────────────────────── */
:root{--ink:#09121e;--ink2:#0d1c2c;--ink3:#152a3b;--paper:#f5f8fb;--white:#fff;--muted:#a7b6c5;--text:#1b3041;--blue:#6d93ff;--blue-dark:#315fd3;--mint:#62e5c5;--line:#cdd8e1;--orange:#ffb977;--radius:18px}

/* ── Base reset ─────────────────────────────────────────────────────────── */
html,body{background-color:#09121e}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#09121e}body{margin:0;padding-top:82px;font-family:'DM Sans',Arial,sans-serif;color:var(--text);background:var(--paper);font-size:16px;line-height:1.55}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}a:hover{text-decoration:none}img,svg{max-width:100%}::selection{background:var(--mint);color:var(--ink)}:focus-visible{outline:3px solid var(--mint);outline-offset:4px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-.045em;line-height:1.04}h1{font-size:clamp(3.1rem,6.8vw,6.8rem);font-weight:600;max-width:10.8ch;margin-bottom:1.55rem}h2{font-size:clamp(2.25rem,4.6vw,4.65rem);font-weight:600;max-width:16ch;margin-bottom:1.35rem}h3{font-size:clamp(1.28rem,1.7vw,1.8rem);margin-bottom:.72rem;font-weight:600}p{font-size:1.06rem;line-height:1.67}.wrap{width:min(100% - 3.6rem,1340px);margin-inline:auto}.section{padding:clamp(5rem,9vw,9rem) 0}.section-heading{max-width:850px}.section-heading p{max-width:680px}.dark{background:var(--ink);color:#f5faff}.dark p{color:#b8c8d6}.light{background:var(--paper)}.white{background:#fff}

/* ── Skip link ──────────────────────────────────────────────────────────── */
.skip{position:absolute;top:-5rem;left:1rem;background:var(--mint);color:var(--ink);padding:.6rem 1rem;z-index:50}.skip:focus{top:1rem}

/* ── Header & navigation ────────────────────────────────────────────────── */
.header{height:82px;background:var(--ink);color:#fff;position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.12)}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem}.logo{display:inline-flex;align-items:center;gap:.7rem;font:700 1.55rem 'Space Grotesk',sans-serif;letter-spacing:-.055em;white-space:nowrap}.logo-mark{height:36px;width:auto;display:block}.nav{display:flex;align-items:center;gap:2.1rem}.nav a,.nav button{font-size:.94rem;font-weight:600;color:#dce7f3}.nav a:hover,.nav button:hover{color:var(--mint)}.nav-button{border:0;background:none;cursor:pointer;padding:1rem 0;display:flex;align-items:center;gap:.5rem}.nav-button svg{width:13px;transition:transform .2s}.nav-button[aria-expanded=true] svg{transform:rotate(180deg)}.nav-item{position:relative}.nav-menu{position:absolute;top:100%;left:-1rem;width:340px;padding:.8rem;background:#15283b;border:1px solid #3a5167;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.28);z-index:2;display:none}.nav-menu.open{display:block}.nav-menu a{display:block;padding:.7rem .8rem;border-radius:8px}.nav-menu a:hover{background:#284058}.nav-menu small{display:block;color:#9fb2c4;font-weight:400;margin-top:.1rem}.header-cta{border:1px solid #5b7792;border-radius:999px;padding:.68rem 1.15rem;font-weight:700;white-space:nowrap}.header-cta:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}.menu-toggle{display:none;background:transparent;border:1px solid #496078;border-radius:9px;color:#fff;padding:.55rem;cursor:pointer}.menu-toggle svg{display:block;width:23px;height:23px}

/* ── Hero ───────────────────────────────────────────────────────────────────
   Note: min-height:580px is the service-page standard.
   index.html and vapt.html override hero{min-height:0} inline.
   hero:after box-shadow was absent in aiadvisory.html and training.html;
   adding it here is a negligible visual change (3.5%/2.5% opacity rings).
   ──────────────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 81% 10%,#1c3557 0,transparent 37%),linear-gradient(145deg,#09121e,#0e2234 76%,#123342);color:#fff;min-height:580px}.hero:before{content:'';position:absolute;inset:0;opacity:.26;background-image:linear-gradient(rgba(125,168,207,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(125,168,207,.16) 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(to right,transparent 15%,black 100%);pointer-events:none}.hero:after{content:'';position:absolute;width:650px;height:650px;border:1px solid rgba(102,188,201,.17);border-radius:50%;right:-280px;top:-300px;box-shadow:0 0 0 105px rgba(93,168,217,.035),0 0 0 220px rgba(93,168,217,.025);pointer-events:none}

/* Note: padding clamp(4rem,6vw,6rem) 0 is the service-page standard.
   vapt.html uses clamp(5.5rem,8vw,8rem) 0 and overrides inline. */
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(390px,.78fr);gap:clamp(3rem,6vw,8rem);align-items:center;padding:clamp(4rem,6vw,6rem) 0}

/* Note: .hero-copy{max-width:740px} and .hero-copy h1 em are index/vapt-specific; kept inline there. */
.hero-copy h1{margin-left:-.045em}.hero-copy p{font-size:clamp(1.13rem,1.5vw,1.32rem);max-width:610px;color:#c6d4e1;margin-bottom:2rem}.text-link{display:inline-flex;align-items:center;gap:.55rem;color:var(--mint);font-weight:700;border-bottom:1px solid rgba(98,229,197,.5);padding-bottom:.22rem}.text-link:hover{gap:.8rem;color:#fff}

/* ── Enquiry form ───────────────────────────────────────────────────────── */
.enquiry{background:#f8fbfd;color:#14283a;border:1px solid #e0e8ef;border-radius:20px;padding:clamp(1.5rem,2.4vw,2.35rem);box-shadow:0 25px 60px rgba(1,9,20,.28);position:relative;overflow:hidden}.enquiry:before{content:'';position:absolute;inset:0 0 auto 0;height:5px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--blue),var(--mint))}.enquiry h2{font-size:clamp(1.65rem,2.3vw,2.15rem);letter-spacing:-.04em;margin-bottom:1.3rem;max-width:none}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.field{margin-bottom:.95rem}.field label{display:block;font-size:.86rem;font-weight:700;margin-bottom:.35rem}.field .optional{font-weight:400;color:#62788a}.field input,.field select,.field textarea{width:100%;border:1px solid #bacbd8;border-radius:9px;background:#fff;color:#1b3041;outline:0;padding:.75rem .85rem;min-height:45px}.field textarea{min-height:72px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-dark);box-shadow:0 0 0 3px rgba(91,131,255,.15)}.field [aria-invalid=true]{border-color:#b84a44}.field-error{display:none;color:#a63c38;font-size:.8rem;margin:.2rem 0 0}.field [aria-invalid=true]+.field-error{display:block}.field-hidden{display:none}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1.35rem;border-radius:9px;background:var(--mint);color:var(--ink);font-weight:800;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}.btn:hover{transform:translateY(-2px);background:#8aefd6;box-shadow:0 10px 22px rgba(48,165,134,.22)}.btn:disabled{opacity:.6;cursor:wait;transform:none}.form-submit{width:100%;margin:.1rem 0 .65rem}.form-note{font-size:.74rem;line-height:1.45;color:#667c8c;margin:0}.form-status{display:none;padding:.8rem;border-radius:9px;margin:.7rem 0;font-size:.9rem}.form-status.visible{display:block}.form-status.success{background:#d6f7ed;color:#0a5947}.form-status.error{background:#ffe6e3;color:#933b33}

/* ── Section utilities ──────────────────────────────────────────────────── */
.section-line{width:58px;height:4px;background:linear-gradient(90deg,var(--blue),var(--mint));margin-bottom:2rem}

/* ── Tiles ──────────────────────────────────────────────────────────────────
   Note: tile-grid uses repeat(3,1fr) — vciso.html standard.
   vapt.html uses repeat(4,1fr) and overrides inline.
   tile has no min-height here; vapt.html uses min-height:220px inline.
   ──────────────────────────────────────────────────────────────────────── */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}.tile{background:#eaf0f6;border:1px solid #d4e0ea;border-radius:14px;padding:1.8rem;position:relative;overflow:hidden}.tile:before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--blue)}.tile:nth-child(even):before{background:#20a88d}.tile h3{font-size:1.4rem}.tile p{font-size:.94rem;color:#52697a}.tile .tile-icon{height:42px;width:42px;border-radius:11px;border:1px solid #b9cce0;color:var(--blue-dark);display:grid;place-items:center;font:600 1.1rem 'Space Grotesk';margin-bottom:1.5rem}

/* ── Need cards ─────────────────────────────────────────────────────────────
   Note: no min-height here — vciso.html standard.
   vapt.html uses min-height:245px and adds :hover/transition inline.
   ──────────────────────────────────────────────────────────────────────── */
.need-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:3.2rem}.need-card{background:#fff;border:1px solid #d9e4ed;border-radius:var(--radius);padding:2.15rem;display:flex;flex-direction:column}.need-card:first-child{background:var(--ink2);border-color:var(--ink2);color:#fff}.need-card:first-child p{color:#bdd0e0}.need-card p{margin-bottom:1.5rem;color:#536b7b}.card-index{font:600 .8rem 'Space Grotesk',sans-serif;color:#6a8192;margin-bottom:1.1rem}.need-card:first-child .card-index{color:var(--mint)}.need-card h3{color:var(--ink)}.need-card p{color:var(--ink2)}.need-card:first-child h3{color:#fff}.need-card:first-child p{color:rgba(255,255,255,0.75)}

/* ── Proof cards & mini-doc ─────────────────────────────────────────────────
   Note: no min-height here — vciso.html standard.
   vapt.html uses min-height:305px inline.
   ──────────────────────────────────────────────────────────────────────── */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}.proof-card{background:#fff;border:1px solid #d9e4ed;border-radius:var(--radius);padding:1.9rem;display:flex;flex-direction:column}.proof-card p{color:#52697a;font-size:1rem}.proof-card .text-link{margin-top:auto;align-self:flex-start}.format-card h3{color:var(--ink)}.format-card p{color:var(--ink2)}.mini-doc{height:73px;border:1px solid #cbd8e2;border-radius:8px;margin-bottom:1.5rem;padding:12px;background:linear-gradient(90deg,#e6eef6 45%,transparent 45%);position:relative}.mini-doc:after{content:'';position:absolute;left:12px;right:20px;top:39px;height:6px;background:linear-gradient(90deg,#a7c3da 30%,transparent 30%,transparent 35%,#c9dbe9 35%,#c9dbe9 72%,transparent 72%)}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{max-width:900px;margin-top:2.4rem}.faq details{border-bottom:1px solid #c6d5e1;padding:1.25rem 0}.faq summary{font:600 1.17rem 'Space Grotesk';cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:2rem}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:1.5rem;color:var(--blue-dark);line-height:1}.faq details[open] summary:after{content:'−'}.faq p{color:#50687a;max-width:800px;margin:1rem 0 .1rem}

/* ── Closing section ────────────────────────────────────────────────────── */
.closing{background:linear-gradient(125deg,#213e65,#10263d 55%,#0a1827);color:#fff;padding:6rem 0}.closing-inner{display:flex;justify-content:space-between;align-items:end;gap:3rem}.closing h2{max-width:700px;margin-bottom:1rem}.closing p{color:#c9d8e5;margin:0;max-width:620px}.closing .btn{white-space:nowrap}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer{background:#070f18;color:#a9bccc;padding:3.5rem 0 2rem}.footer-top{display:flex;justify-content:space-between;gap:3rem;padding-bottom:3rem}.footer .logo{color:#fff}.footer-nav{display:flex;gap:3rem}.footer-nav div{display:flex;flex-direction:column;gap:.65rem}.footer-nav strong{color:#fff;font-size:.9rem}.footer-nav a{font-size:.9rem}.footer-nav a:hover{color:var(--mint)}.footer-bottom{border-top:1px solid #23384a;padding-top:1.3rem;display:flex;justify-content:center;gap:1rem;font-size:.8rem}.footer-bottom p{font-size:.8rem;margin:0;color:#8fa4b6}

/* ── Responsive ─────────────────────────────────────────────────────────────
   Shared breakpoint rules only. Page-specific grid overrides stay inline
   per page (tile-grid cols, proof-grid, framework-cards, build-grid, etc.)
   ──────────────────────────────────────────────────────────────────────── */

/* Note: index.html and vapt.html use 1fr 400px; they override inline. */
@media(max-width:1050px){.hero-inner{grid-template-columns:1fr 380px;gap:3rem}}

/* Note: hero-inner padding 4rem 0 4.5rem is the service-page standard.
   vapt.html deviates (4.6rem 0 5rem / gap:2.3rem) and overrides inline.
   index.html final value is 4rem 0 (via homepage block) and overrides inline. */
@media(max-width:780px){.wrap{width:min(100% - 2rem,640px)}.header{height:70px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:#102337;border-bottom:1px solid #3b5368;padding:1rem;flex-direction:column;align-items:stretch;gap:.3rem}.nav.open{display:flex}.nav-item{width:100%}.nav-button{width:100%;justify-content:space-between}.nav-menu{position:static;width:auto;box-shadow:none;display:none;margin:.2rem 0 .7rem;background:#172c40}.header-cta{display:none}.hero{min-height:0}.hero-inner{grid-template-columns:1fr;padding:4rem 0 4.5rem;gap:2rem}.hero-copy p{font-size:1.1rem}.enquiry{padding:1.45rem}.closing-inner{display:block}.closing .btn{margin-top:2rem}.footer-top{display:block}.footer-nav{margin-top:2.3rem;flex-wrap:wrap}.section{padding:5rem 0}body{padding-top:70px}}

@media(max-width:520px){.wrap{width:min(100% - 2rem,500px)}h1{font-size:clamp(2.95rem,12vw,4.25rem)}h2{font-size:clamp(2.1rem,9vw,3rem)}.footer-nav{gap:2.2rem}.footer-bottom{display:block}.footer-bottom p+p{margin-top:.5rem}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* ── Scroll progress, reveal, card effects ──────────────────────────────── */
#scroll-progress{position:absolute;bottom:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,#62e5c5,#6d93ff);transition:width 0.1s linear;z-index:1}main>section:first-child{margin-top:0}main{overflow-x:clip}.reveal{opacity:0;transform:translateY(32px);transition:opacity 0.6s ease,transform 0.6s ease}.reveal.from-left{transform:translateX(-40px)}.reveal.from-right{transform:translateX(40px)}.reveal.from-scale{transform:scale(0.95);opacity:0}.reveal.visible{opacity:1;transform:none}.card-hover{transition:transform 0.3s ease,box-shadow 0.3s ease,opacity 0.6s ease}.card-hover:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.18)}.card-border-hover{transition:border-color 0.25s ease,box-shadow 0.25s ease;border:1px solid transparent}.card-border-hover:hover{border-color:#62e5c5;box-shadow:0 4px 24px rgba(98,229,197,0.12)}.card-glow-hover{transition:box-shadow 0.3s ease,opacity 0.6s ease}.card-glow-hover:hover{box-shadow:0 0 0 2px #6d93ff,0 8px 32px rgba(109,147,255,0.15);transform:translateY(-2px)}