/* =====================================================
   mainul.bd — multi-page components (loads after semantic.css)
   ===================================================== */

.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--accent);color:var(--ink);padding:10px 16px;border-radius:6px;font-weight:700}
.skip-link:focus{left:12px}

/* ---------- Dropdown navigation ---------- */
.main-nav{align-items:center}
.nav-dd{position:relative;display:flex;align-items:center;gap:4px}
.nav-dd-toggle{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;align-items:center;transition:transform .25s var(--ease),color .2s}
.nav-dd:hover .nav-dd-toggle,.nav-dd.open .nav-dd-toggle{color:var(--accent)}
.nav-dd.open .nav-dd-toggle{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 16px);left:-18px;min-width:270px;background:rgba(23,24,27,.98);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 24px 50px rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s var(--ease),visibility .2s}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:none}
.main-nav .nav-dd-menu a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;font-size:.74rem;letter-spacing:.08em;color:#d6d8de}
.main-nav .nav-dd-menu a::after{display:none}
.main-nav .nav-dd-menu a span{flex:0 0 24px;height:24px;border-radius:6px;background:var(--bg);border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.68rem}
.main-nav .nav-dd-menu a:hover,.main-nav .nav-dd-menu a.on{background:var(--panel);color:var(--white)}
.main-nav .nav-dd-menu a.on span{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.main-nav .nav-dd-menu .nav-dd-all{color:var(--accent);border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:6px;padding-top:12px}
.nav-cta-mobile{display:none}

/* ---------- Breadcrumbs ---------- */
.crumbs{padding-top:118px;position:relative;z-index:1}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-family:'Archivo',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--accent)}
.crumbs + section .svc-hero,.crumbs + .svc-hero{padding-top:34px}

/* ---------- Inner-page hero ---------- */
.svc-hero{padding:34px 0 70px;position:relative;z-index:1}
.svc-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.svc-title{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:.98;letter-spacing:-.02em;margin:18px 0 22px}
.svc-title .accent{display:block}
.svc-intro{color:var(--muted);font-size:1.08rem;max-width:620px;margin-bottom:28px}
.svc-intro strong{color:#e9eaee}
.svc-proof{display:grid;gap:14px}
.svc-proof-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;gap:18px;align-items:center}
.svc-proof-card:first-child{background:linear-gradient(150deg,var(--accent),var(--accent-d));border:none;color:var(--ink)}
.svc-proof-card:first-child small{color:rgba(0,0,0,.65)}
.svc-proof-card b{font-family:'Archivo',sans-serif;font-weight:900;font-size:2.3rem;line-height:1;min-width:110px;letter-spacing:-.02em}
.svc-proof-card strong{display:block;font-family:'Archivo',sans-serif;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase}
.svc-proof-card small{color:var(--muted);font-size:.84rem;line-height:1.4;display:block;margin-top:3px}

/* ---------- Answer box (definition-first, GEO friendly) ---------- */
.answer-box{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.answer-box .q{font-family:'Archivo',sans-serif;font-weight:900;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--accent);border-radius:6px;padding:7px 11px;white-space:nowrap}
.answer-box h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.25rem;margin-bottom:8px}
.answer-box p{color:#c9ccd4}
.answer-box p+p{margin-top:10px}

/* ---------- Prose block ---------- */
.prose{max-width:820px}
.prose p{color:var(--muted);font-size:1.02rem;margin-bottom:16px}
.prose strong{color:#e9eaee}
.sx-light .prose p{color:#4b505c}
.sx-light .prose strong{color:var(--ink)}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.two-col .sticky{position:sticky;top:120px}

/* ---------- Included list ---------- */
.inc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.inc{display:flex;gap:16px;background:#fff;border:1px solid var(--light-2);border-radius:14px;padding:22px}
.inc i{flex:0 0 34px;height:34px;border-radius:9px;background:var(--ink);color:var(--accent);font-style:normal;font-family:'Archivo',sans-serif;font-weight:900;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.inc h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:5px}
.inc p{color:#5b606c;font-size:.9rem}

/* ---------- KPI / data table (dark) ---------- */
.dtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.dtable{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
.dtable th,.dtable td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.dtable thead th{font-family:'Archivo',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--bg-2)}
.dtable tbody th{font-family:'Archivo',sans-serif;font-weight:800;color:#fff}
.dtable td{color:var(--muted)}
.dtable tr:last-child>*{border-bottom:none}

/* ---------- Tool / tag cloud ---------- */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-family:'Archivo',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.04em;padding:8px 13px;border-radius:7px;background:var(--panel);border:1px solid var(--line);color:#d6d8de}
.sx-light .tags span{background:#fff;border-color:var(--light-2);color:var(--ink)}

/* ---------- Related cards / link cards ---------- */
.link-card{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;transition:.25s;position:relative}
.link-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.link-card .k{font-family:'Archivo',sans-serif;font-weight:800;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.link-card h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.2rem;line-height:1.2}
.link-card p{color:var(--muted);font-size:.92rem;flex:1}
.link-card .go{font-family:'Archivo',sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.link-card:hover .go{color:var(--accent)}
.sx-light .link-card{background:#fff;border-color:var(--light-2)}
.sx-light .link-card p{color:#5b606c}
.sx-light .link-card .go{color:var(--ink)}
.sx-light .link-card .k{color:var(--accent-d)}
.link-card .metric{position:absolute;top:22px;right:22px;background:var(--accent);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:900;font-size:.82rem;padding:6px 11px;border-radius:6px}

/* ---------- Case study page ---------- */
.case-snap{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:34px}
.case-snap div{padding:20px 22px;border-right:1px solid var(--line)}
.case-snap div:last-child{border-right:none}
.case-snap dt{font-family:'Archivo',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.case-snap dd{font-weight:700;color:#e9eaee;font-size:.92rem}
.case-results{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.case-result{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.case-result:first-child{background:linear-gradient(150deg,var(--accent),var(--accent-d));color:var(--ink);border:none}
.case-result:first-child span,.case-result:first-child small{color:rgba(0,0,0,.7)}
.case-result b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:2.4rem;line-height:1;letter-spacing:-.02em}
.case-result span{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin:10px 0 4px;color:#e9eaee}
.case-result small{color:var(--muted);font-size:.84rem;line-height:1.4;display:block}
.phase-list{display:grid;gap:16px}
.phase{display:grid;grid-template-columns:70px 1fr;gap:20px;background:#fff;border:1px solid var(--light-2);border-radius:16px;padding:24px}
.phase .n{font-family:'Archivo',sans-serif;font-weight:900;font-size:2.2rem;color:var(--accent-d);line-height:1}
.phase h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.15rem;margin-bottom:8px}
.phase ul{padding-left:18px;color:#3a3d45;font-size:.93rem}
.phase li{margin-bottom:4px}
.case-quote{background:var(--ink);border-radius:20px;padding:40px;position:relative}
.case-quote blockquote{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.3;color:#fff}
.case-quote blockquote::before{content:"\201C";display:block;font-size:4rem;line-height:.6;color:var(--accent);margin-bottom:6px}
.case-quote cite{display:block;margin-top:18px;font-style:normal;font-family:'Archivo',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lesson{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.lesson:last-child{border-bottom:none}
.lesson b{flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:900;font-size:.8rem}
.lesson p{color:#d6d8de}
.case-filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-card[hidden]{display:none}

/* ---------- Career timeline (reuses .timeline/.tl-* from style.css) ---------- */
.journey .tl-card .tl-year{font-family:'Archivo',sans-serif;font-weight:900;font-size:.8rem;letter-spacing:.12em;color:var(--ink);background:var(--accent);border-radius:5px;padding:4px 9px}
.journey .tl-card ul{padding-left:18px;color:var(--muted);font-size:.93rem;margin-top:8px}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.nap{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px}
.nap h2{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.6rem;margin-bottom:6px}
.nap .role{color:var(--accent);font-family:'Archivo',sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}
.nap dl{display:grid;gap:16px}
.nap dt{font-family:'Archivo',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.nap dd{font-weight:600;color:#e9eaee}
.nap dd a:hover{color:var(--accent)}
.map-wrap{border-radius:20px;overflow:hidden;border:1px solid var(--line);min-height:340px;background:var(--panel)}
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(1) invert(.92) contrast(.9)}
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.channel{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;transition:.25s}
.channel:hover{border-color:var(--accent)}
.channel .ic{width:42px;height:42px;border-radius:11px;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center}
.channel .ic svg{width:20px;height:20px}
.channel h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem}
.channel p{color:var(--muted);font-size:.88rem;word-break:break-word}

/* ---------- Site CTA ---------- */
.site-cta-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.site-cta-sub{color:rgba(0,0,0,.72);font-weight:600;max-width:620px}
.site-cta-actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.site-cta-link{font-family:'Archivo',sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--ink)}

/* ---------- Hub cards (big) ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.hub-card{display:grid;grid-template-columns:auto 1fr;gap:22px;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px;transition:.25s}
.hub-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.hub-card .num{font-family:'Archivo',sans-serif;font-weight:900;font-size:3rem;line-height:.9;color:var(--accent)}
.hub-card h2,.hub-card h3{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.5rem;line-height:1.1;margin-bottom:10px}
.hub-card p{color:var(--muted);margin-bottom:14px}
.hub-card ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.hub-card li{font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:5px;background:var(--bg);border:1px solid var(--line);color:#c9ccd4}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
    .main-nav{gap:20px}
    .main-nav a{font-size:.72rem;letter-spacing:.1em}
}
@media(max-width:1024px){
    .svc-hero-grid,.two-col,.site-cta-inner,.contact-grid{grid-template-columns:1fr}
    .two-col .sticky{position:static}
    .case-snap,.case-results{grid-template-columns:repeat(2,1fr)}
    .case-snap div:nth-child(2){border-right:none}
    .case-snap div:nth-child(-n+2){border-bottom:1px solid var(--line)}
    .case-filter-grid,.channels{grid-template-columns:repeat(2,1fr)}
    .site-cta-actions{align-items:flex-start}
}
@media(max-width:900px){
    /* mobile nav panel (main.js toggles .open) */
    .main-nav,.nav-cta{display:none}
    .nav-toggle{display:flex}
    .main-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg-2);padding:18px 24px 26px;gap:4px;border-top:1px solid var(--line);max-height:calc(100vh - 70px);overflow-y:auto}
    .main-nav.open>a,.main-nav.open .nav-dd-link{padding:12px 0;font-size:.82rem}
    .main-nav.open>a::after,.main-nav.open .nav-dd-link::after{display:none}
    .nav-dd{flex-wrap:wrap;justify-content:space-between}
    .nav-dd-toggle{padding:10px}
    .nav-dd-menu{position:static;flex-basis:100%;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;background:var(--panel);margin:2px 0 8px}
    .nav-dd-menu::before{display:none}
    .nav-dd.open .nav-dd-menu{display:block}
    .nav-dd:hover .nav-dd-menu{opacity:1}
    .nav-cta-mobile{display:inline-flex;margin-top:14px}
    .crumbs{padding-top:96px}
}
@media(max-width:768px){
    .inc-grid,.hub-grid,.case-filter-grid,.channels{grid-template-columns:1fr}
    .case-snap,.case-results{grid-template-columns:1fr}
    .case-snap div{border-right:none;border-bottom:1px solid var(--line)}
    .case-snap div:last-child{border-bottom:none}
    .answer-box{grid-template-columns:1fr;padding:22px}
    .hub-card{grid-template-columns:1fr;padding:24px}
    .phase{grid-template-columns:1fr;gap:6px}
    .svc-proof-card b{min-width:86px;font-size:1.9rem}
    .case-quote{padding:28px}
}
.main-nav .nav-cta-mobile{color:var(--ink);letter-spacing:.06em}.main-nav .nav-cta-mobile::after{display:none}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}