/* ===== Mashvera Group — base ===== */

:root {
  --brand-50:#EDF8F4; --brand-100:#D4EDE5; --brand-300:#72C0A7; --brand-400:#279B76;
  --brand-500:#007A53; --brand-600:#006142; --brand-700:#044933; --brand-800:#063224;
  --night:#082119;
  --ink:#1A1A1A; --ink-700:#2E2E2C; --ink-500:#5C5C58; --ink-300:#8C8C86;
  --paper:#FAFAF8; --surface:#F1F1EE;
  --font-display:'Space Grotesk',sans-serif; --font-body:'IBM Plex Sans',sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font-body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-display); margin:0; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
ul { margin:0; padding:0; list-style:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--brand-500); color:var(--paper); }
:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }

.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }
@media (min-width:768px){ .container{ padding:0 2.5rem; } }

/* ===== Header ===== */
.site-header { position:sticky; top:0; z-index:50; background:rgba(250,250,248,.95); backdrop-filter:blur(8px); border-bottom:1px solid rgba(24,24,24,.08); }
.site-header .container { height:78px; display:flex; align-items:center; justify-content:space-between; }
.site-header .logo img { height:32px; width:auto; }
.main-nav { display:none; align-items:center; gap:2.25rem; }
.main-nav a { font-size:15px; font-weight:500; color:var(--ink-700); transition:color .2s; }
.main-nav a:hover { color:var(--brand-500); }
.site-header a.header-cta { display:none; }
.menu-toggle { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:none; border:none; color:var(--ink); }
.mobile-nav { display:none; position:absolute; inset-inline:0; top:78px; background:var(--paper); border-bottom:1px solid rgba(24,24,24,.08); padding:1.5rem; flex-direction:column; }
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:.75rem 0; font-size:1.125rem; font-weight:500; color:var(--ink-700); }
.mobile-nav .btn { margin-top:1rem; justify-content:center; min-height:48px; }
@media (min-width:768px){ .main-nav{ display:flex; } .site-header a.header-cta{ display:inline-flex; } .menu-toggle{ display:none; } }

.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:6px; padding:.85rem 1.5rem; font-size:15px; font-weight:500; border:none; cursor:pointer; transition:.2s; white-space:nowrap; }
.btn svg { width:16px; height:16px; }
.btn-dark { background:var(--ink); color:var(--paper); }
.btn-dark:hover { background:var(--brand-600); }
.btn-light { background:var(--paper); color:var(--night); }
.btn-light:hover { background:var(--brand-50); }
.btn-ghost { color:var(--paper); border:1px solid rgba(250,250,248,.3); }
.btn-ghost:hover { border-color:var(--brand-400); color:var(--brand-300); }
.btn-link { color:var(--ink); text-decoration:underline; text-decoration-color:rgba(24,24,24,.3); text-underline-offset:4px; padding:.85rem .25rem; }
.btn-link:hover { text-decoration-color:var(--brand-500); }

/* ===== Hero (home, dark + wave) ===== */
.hero { position:relative; background:var(--night); overflow:hidden; }
.hero-wave { position:absolute; top:-10%; right:-15%; width:900px; max-width:130%; opacity:.9; pointer-events:none; }
.hero .container { position:relative; z-index:1; padding:6rem 1.5rem 5rem; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; color:var(--brand-300); font-size:14px; font-weight:500; }
.eyebrow svg { width:16px; height:16px; }
.hero h1 { color:var(--paper); font-size:2.6rem; font-weight:600; line-height:1.12; letter-spacing:-.02em; margin-top:1rem; max-width:600px; }
.hero .lede { color:rgba(250,250,248,.72); font-size:1.15rem; line-height:1.65; max-width:520px; margin-top:1.4rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap:1.75rem 2.5rem; margin-top:3.5rem; padding-top:2rem; border-top:1px solid rgba(250,250,248,.14); max-width:800px; }
.hero-trust .item { display:flex; align-items:center; gap:.65rem; }
.hero-trust .item .ic { width:34px; height:34px; border-radius:8px; background:rgba(250,250,248,.08); color:var(--brand-300); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-trust .item .ic svg { width:17px; height:17px; }
.hero-trust .item p { color:rgba(250,250,248,.8); font-size:.875rem; font-weight:500; max-width:190px; line-height:1.4; }
@media (min-width:768px){ .hero .container{ padding:8rem 2.5rem 7rem; } .hero h1{ font-size:3.6rem; } }

/* ===== Light inner-page hero ===== */
.page-hero { padding:5rem 0 3rem; background:var(--paper); border-bottom:1px solid rgba(24,24,24,.08); }
.page-hero .eyebrow-dark { display:inline-flex; align-items:center; gap:.4rem; color:var(--brand-600); font-size:14px; font-weight:600; }
.page-hero .eyebrow-dark svg { width:15px; height:15px; }
.page-hero h1 { font-size:2.5rem; font-weight:600; letter-spacing:-.02em; margin-top:.75rem; }
.page-hero .lede { margin-top:1.1rem; max-width:36rem; font-size:1.125rem; color:var(--ink-500); line-height:1.6; }
@media (min-width:768px){ .page-hero{ padding:6.5rem 0 3.5rem; } .page-hero h1{ font-size:3rem; } }

/* ===== Sections ===== */
.section { padding:5.5rem 0; }
@media (min-width:768px){ .section{ padding:7.5rem 0; } }
.section-head { max-width:560px; }
.section-head .eyebrow-dark { display:inline-flex; align-items:center; gap:.4rem; color:var(--brand-600); font-size:14px; font-weight:600; }
.section-head .eyebrow-dark svg { width:15px; height:15px; }
.section-head h2 { font-size:2rem; font-weight:600; letter-spacing:-.02em; margin-top:.6rem; }
.section-head p { margin-top:1rem; color:var(--ink-500); font-size:1.05rem; line-height:1.6; }
@media (min-width:768px){ .section-head h2{ font-size:2.5rem; } }

/* ===== Service cards ===== */
.service-grid { margin-top:3.5rem; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .service-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .service-grid{ grid-template-columns:1fr 1fr 1fr; } }
.service-card { display:block; background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:14px; padding:2rem; transition:transform .25s, box-shadow .25s, border-color .25s; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 14px 28px -18px rgba(8,33,25,.18); border-color:rgba(0,122,83,.3); }
.service-icon { width:48px; height:48px; border-radius:10px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.service-icon svg { width:24px; height:24px; }
.service-card h3 { font-size:1.15rem; font-weight:600; }
.service-card .tagline { margin-top:.4rem; font-size:.875rem; font-style:italic; color:var(--brand-600); }
.service-card .desc { margin-top:.75rem; font-size:.9rem; line-height:1.6; color:var(--ink-500); }
.service-card .learn { margin-top:1.25rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.875rem; font-weight:500; color:var(--ink); }
.service-card .learn svg { width:15px; height:15px; transition:transform .2s; }
.service-card:hover .learn svg { transform:translateX(3px); }
.service-card .num { font-size:.8rem; color:var(--ink-300); display:block; margin-bottom:.5rem; }

/* ===== Why strip ===== */
.why { background:var(--surface); }
.why .container { display:grid; gap:2.5rem; grid-template-columns:1fr; }
.why-item { display:flex; gap:1rem; }
.why-item .ic { width:40px; height:40px; border-radius:9px; background:var(--night); color:var(--brand-300); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.why-item .ic svg { width:20px; height:20px; }
.why-item p:first-child { font-weight:600; }
.why-item p:last-child { margin-top:.35rem; font-size:.9rem; color:var(--ink-500); line-height:1.55; }
@media (min-width:768px){ .why .container{ grid-template-columns:1fr 1fr 1fr 1fr; } }

/* ===== Industry cards ===== */
.industry-grid { margin-top:3.5rem; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .industry-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .industry-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; } }
.industry-card { position:relative; background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:12px; padding:1.75rem; overflow:hidden; transition:transform .25s, box-shadow .25s; }
.industry-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand-400), var(--brand-700)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.industry-card:hover { transform:translateY(-3px); box-shadow:0 12px 22px -16px rgba(8,33,25,.14); }
.industry-card:hover::before { transform:scaleX(1); }
.industry-card .ic { width:38px; height:38px; border-radius:8px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.industry-card .ic svg { width:19px; height:19px; }
.industry-card h3 { font-size:1.05rem; font-weight:600; }
.industry-card p { margin-top:.5rem; font-size:.9rem; color:var(--ink-500); line-height:1.55; }

/* ===== CTA band (dark + wave, sitewide) ===== */
.cta { position:relative; background:var(--night); overflow:hidden; }
.cta-wave { position:absolute; bottom:-30%; left:-10%; width:700px; max-width:110%; opacity:.6; pointer-events:none; }
.cta .container { position:relative; z-index:1; padding:4.5rem 1.5rem; display:flex; flex-direction:column; gap:2rem; }
.cta h2 { color:var(--paper); font-size:2rem; font-weight:600; max-width:480px; }
.cta .sub { display:flex; flex-direction:column; gap:.4rem; margin-top:.9rem; }
.cta .sub span { display:flex; align-items:center; gap:.5rem; color:rgba(250,250,248,.65); font-size:.9375rem; }
.cta .sub svg { width:15px; height:15px; }
@media (min-width:768px){ .cta .container{ flex-direction:row; align-items:center; justify-content:space-between; padding:5.5rem 2.5rem; } .cta h2{ font-size:2.5rem; } }

/* ===== Footer ===== */
.site-footer { background:var(--ink); color:rgba(250,250,248,.9); }
.site-footer .container { padding:4rem 1.5rem 2.5rem; }
.footer-grid { display:grid; gap:2.5rem; grid-template-columns:1fr; }
.footer-grid img { height:30px; filter:brightness(0) invert(1); }
.footer-about p { margin-top:1.2rem; max-width:280px; font-size:.875rem; color:rgba(250,250,248,.55); line-height:1.6; }
.footer-col h4 { font-size:.8rem; font-weight:600; color:rgba(250,250,248,.45); font-family:var(--font-body); }
.footer-col ul { margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a { font-size:.875rem; color:rgba(250,250,248,.75); }
.footer-col a:hover { color:var(--brand-400); }
.footer-contact { margin-top:1.5rem; display:flex; flex-direction:column; gap:.4rem; font-size:.875rem; color:rgba(250,250,248,.6); }
.footer-contact a:hover { color:var(--brand-400); }
.footer-contact p { max-width:220px; line-height:1.6; }
.footer-bottom { margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(250,250,248,.1); display:flex; flex-direction:column; gap:.6rem; font-size:.75rem; color:rgba(250,250,248,.4); }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } .footer-bottom{ flex-direction:row; justify-content:space-between; } }

/* ===== Service detail page ===== */
.back-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:var(--ink-500); }
.back-link:hover { color:var(--brand-600); }
.back-link svg { width:16px; height:16px; }
.service-detail { display:grid; gap:3rem; padding:2.5rem 0 5rem; }
@media (min-width:768px){ .service-detail{ grid-template-columns:1.3fr 1fr; padding-bottom:7rem; } }
.service-detail .icon-lg { width:56px; height:56px; border-radius:12px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; }
.service-detail .icon-lg svg { width:28px; height:28px; }
.service-detail .index { font-size:.875rem; color:var(--ink-300); }
.service-detail .tagline { margin-top:1rem; font-size:1.125rem; font-style:italic; color:var(--brand-600); }
.service-detail .desc { margin-top:1.25rem; max-width:40rem; font-size:1.0625rem; line-height:1.7; color:var(--ink-700); }
.capability-panel { border-top:1px solid rgba(24,24,24,.1); padding-top:2rem; }
@media (min-width:768px){ .capability-panel{ border-top:none; border-left:1px solid rgba(24,24,24,.1); padding-top:0; padding-left:2.5rem; } }
.capability-panel h2 { font-size:.875rem; font-weight:500; color:var(--ink-500); font-family:var(--font-body); }
.capability-panel ul { margin-top:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.capability-panel li { display:flex; gap:.75rem; font-size:.9375rem; color:var(--ink-700); }
.capability-panel .check { flex-shrink:0; margin-top:.125rem; color:var(--brand-500); width:16px; height:16px; }
.next-service { border-top:1px solid rgba(24,24,24,.1); padding:2rem 0 5rem; }
.next-service a { display:flex; align-items:center; justify-content:space-between; }
.next-service .label { font-size:.875rem; color:var(--ink-500); }
.next-service .name { font-size:1.125rem; font-weight:500; }

/* ===== About / Careers info blocks ===== */
.info-grid { margin-top:4rem; padding-top:3rem; border-top:1px solid rgba(24,24,24,.1); display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:768px){ .info-grid{ grid-template-columns:1fr 1fr 1fr; } }
.info-grid .ic { width:40px; height:40px; border-radius:9px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.info-grid .ic svg { width:20px; height:20px; }
.info-grid h2 { font-size:1rem; font-weight:600; font-family:var(--font-body); }
.info-grid p { margin-top:.5rem; font-size:.9375rem; line-height:1.6; color:var(--ink-500); }

.split-cta { margin-top:5rem; padding-top:3rem; border-top:1px solid rgba(24,24,24,.1); display:flex; flex-direction:column; gap:1.5rem; padding-bottom:5rem; }
@media (min-width:768px){ .split-cta{ flex-direction:row; align-items:center; justify-content:space-between; } }
.split-cta p { max-width:28rem; color:var(--ink-500); }

.role-grid { margin-top:1.25rem; display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:640px){ .role-grid{ grid-template-columns:1fr 1fr; } }
.role-chip { display:flex; align-items:center; gap:.75rem; border:1px solid rgba(24,24,24,.1); border-radius:8px; padding:1rem 1.25rem; font-size:.9375rem; }
.role-chip svg { width:18px; height:18px; color:var(--brand-600); flex-shrink:0; }

/* ===== Contact form ===== */
.contact-layout { display:grid; gap:4rem; padding:2.5rem 0 5rem; grid-template-columns:1fr; }
@media (min-width:768px){ .contact-layout{ grid-template-columns:1.2fr 1fr; padding-bottom:7rem; } }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; font-size:.875rem; font-weight:500; color:var(--ink-700); margin-bottom:.5rem; }
.form-group input, .form-group textarea, .form-group select {
  width:100%; border:1px solid rgba(24,24,24,.15); border-radius:6px; padding:.75rem 1rem;
  font-family:inherit; font-size:1rem; background:var(--paper); color:var(--ink);
}
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C58' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:16px; padding-right:2.5rem; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline:none; border-color:var(--brand-500); }

/* ===== Checkpoint 4: Industries / About page motifs & layout ===== */
.industry-detail-card { position:relative; background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:14px; padding:2rem; transition:transform .2s ease, box-shadow .2s ease; }
.industry-detail-card:hover { transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(8,33,25,.16); }
.industry-detail-card .ic { width:44px; height:44px; border-radius:10px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; }
.industry-detail-card .ic svg { width:22px; height:22px; }
.industry-detail-card h3 { font-size:1.1rem; font-weight:600; }
.industry-detail-card p.desc { margin-top:.6rem; font-size:.9rem; color:var(--ink-500); line-height:1.6; }
.industry-caps { margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.industry-caps span { font-size:.75rem; font-weight:500; padding:.3rem .7rem; border-radius:999px; background:var(--surface); color:var(--ink-700); }

.about-flow { margin-top:2.5rem; display:flex; flex-direction:column; gap:0; }
.about-flow-item { display:flex; gap:1.25rem; padding:1.25rem 0; border-bottom:1px solid rgba(24,24,24,.08); }
.about-flow-item:last-child { border-bottom:none; }
.about-flow-item .ic { width:40px; height:40px; border-radius:9px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.about-flow-item .ic svg { width:20px; height:20px; }
.about-flow-item h3 { font-size:1rem; font-weight:600; }
.about-flow-item p { margin-top:.35rem; font-size:.9rem; color:var(--ink-500); line-height:1.6; }

.about-motif { max-width:280px; margin:0 auto; }
.about-motif svg { width:100%; height:auto; display:block; }
.contact-info-list { display:flex; flex-direction:column; gap:2rem; padding-top:2rem; border-top:1px solid rgba(24,24,24,.1); }
@media (min-width:768px){ .contact-info-list{ border-top:none; border-left:1px solid rgba(24,24,24,.1); padding-top:0; padding-left:3rem; } }
.contact-info-item { display:flex; gap:1rem; }
.contact-info-item .ic { width:40px; height:40px; border-radius:9px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item .ic svg { width:19px; height:19px; }
.contact-info-item .label { font-size:.875rem; color:var(--ink-500); }
.contact-info-item .value { font-weight:600; color:var(--ink); }
.form-note { margin-top:1rem; font-size:.875rem; padding:1rem; border-radius:6px; }
.form-note.success { background:var(--brand-50); color:var(--brand-700); }
.form-note.error { background:#FEF2F2; color:#B91C1C; }
.hidden { display:none; }

/* ===== Stage 6: MASHVERA wordmark ===== */
.wordmark { display:flex; align-items:center; gap:.6rem; }
.wordmark img { height:28px; width:auto; }
.wordmark .word-stack { display:flex; flex-direction:column; justify-content:center; line-height:1; }
.wordmark .word { font-family:var(--font-display); font-weight:700; font-size:1.25rem; letter-spacing:.01em; color:var(--ink); line-height:1; }
.wordmark .descriptor { margin-top:.2rem; font-family:var(--font-body); font-weight:400; font-size:9px; letter-spacing:.07em; color:var(--ink-300); white-space:nowrap; line-height:1; }
.wordmark.on-dark .word { color:var(--paper); }
.wordmark.on-dark .descriptor { color:rgba(250,250,248,.45); }
.wordmark.on-dark img { filter:brightness(0) invert(1); }

/* Header-only lockup: keep compact, hide descriptor if space is genuinely constrained */
.site-header .wordmark .descriptor { display:block; }
@media (max-width:420px) {
  .site-header .wordmark .descriptor { display:none; }
}

/* ===== Stage 6: mega-menu nav ===== */
.nav-item-dd { position:relative; }
.nav-trigger { display:flex; align-items:center; gap:.3rem; font-size:15px; font-weight:500; color:var(--ink-700); background:none; border:none; cursor:pointer; padding:0; font-family:inherit; }
.nav-trigger:hover, .nav-item-dd.open .nav-trigger { color:var(--brand-500); }
.nav-trigger svg { width:14px; height:14px; transition:transform .2s; }
.nav-item-dd.open .nav-trigger svg { transform:rotate(180deg); }
.mega-panel {
  display:none; position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:360px; background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:12px;
  box-shadow:0 24px 48px -20px rgba(8,33,25,.25); padding:.5rem; z-index:60;
}
.nav-item-dd.open .mega-panel, .nav-item-dd:hover .mega-panel { display:block; }
.mega-panel a { display:flex; flex-direction:column; gap:.05rem; padding:.4rem .7rem; border-radius:7px; font-size:.875rem; font-weight:600; color:var(--ink); line-height:1.3; white-space:nowrap; }
.mega-panel a:hover { background:var(--brand-50); color:var(--brand-700); }
.mega-panel a.sub { padding:.3rem .7rem .3rem 1.7rem; font-weight:400; font-size:.8rem; color:var(--ink-500); white-space:normal; }
.mega-panel a.sub:hover { color:var(--brand-600); }
.mega-panel .divider { margin:.35rem .25rem; border-top:1px solid rgba(24,24,24,.08); }
.mega-panel a.talent-link { color:var(--ink-500); font-size:.8rem; font-weight:500; white-space:normal; }
.mega-panel a.talent-link:hover { color:var(--brand-600); background:var(--brand-50); }
.mega-panel .pending { opacity:.55; }
@media (max-width:767px) {
  .mega-panel { position:static; transform:none; width:auto; box-shadow:none; border:none; display:none; margin-top:.5rem; }
  .nav-item-dd.open .mega-panel { display:block; }
}

/* ===== Stage 6: capability pillar cards on homepage ===== */
.pillar-grid { margin-top:3.5rem; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .pillar-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .pillar-grid{ grid-template-columns:1fr 1fr 1fr; } }

/* ===== Stage 6: spotlight sections (Enterprise AI / Integration on homepage) ===== */
.spotlight { padding:5.5rem 0; }
@media (min-width:768px){ .spotlight{ padding:7rem 0; } }
.spotlight .grid { display:grid; gap:3rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:768px){ .spotlight .grid{ grid-template-columns:1.1fr .9fr; } }
.spotlight .badge { display:inline-flex; align-items:center; gap:.4rem; color:var(--brand-600); font-size:14px; font-weight:600; }
.spotlight .badge svg { width:15px; height:15px; }
.spotlight h2 { margin-top:.6rem; font-size:2rem; font-weight:600; letter-spacing:-.02em; }
@media (min-width:768px){ .spotlight h2{ font-size:2.5rem; } }
.spotlight .lede { margin-top:1.1rem; color:var(--ink-500); font-size:1.05rem; line-height:1.65; max-width:34rem; }
.spotlight .callout { margin-top:1.5rem; padding:1.25rem 1.5rem; background:var(--surface); border-radius:10px; font-size:.9rem; line-height:1.6; color:var(--ink-700); border-left:3px solid var(--brand-500); }
.spotlight .sub-links { margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.spotlight .sub-links a { font-size:.85rem; font-weight:500; padding:.5rem .9rem; border:1px solid rgba(24,24,24,.12); border-radius:999px; color:var(--ink-700); }
.spotlight .sub-links a:hover { border-color:var(--brand-400); color:var(--brand-600); }
.spotlight-panel { background:var(--surface); border-radius:14px; padding:2rem; }
.spotlight-panel h3 { font-size:.85rem; font-weight:600; color:var(--ink-500); text-transform:none; }
.spotlight-panel ul { margin-top:1rem; display:flex; flex-direction:column; gap:.9rem; }
.spotlight-panel li { display:flex; gap:.65rem; font-size:.9rem; color:var(--ink-700); }
.spotlight-panel li svg { width:16px; height:16px; color:var(--brand-500); flex-shrink:0; margin-top:.15rem; }

/* node graphic for Integration spotlight */
.node-graphic { width:100%; height:auto; }

/* ===== Stage 6: platform/data mini-grid ===== */
.mini-grid { margin-top:3rem; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:768px){ .mini-grid{ grid-template-columns:1fr 1fr 1fr; } }
.mini-card { background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:12px; padding:1.75rem; transition:transform .2s, box-shadow .2s; }
.mini-card:hover { transform:translateY(-3px); box-shadow:0 12px 22px -16px rgba(8,33,25,.14); }
.mini-card .ic { width:38px; height:38px; border-radius:8px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.mini-card .ic svg { width:19px; height:19px; }
.mini-card h3 { font-size:1.05rem; font-weight:600; }
.mini-card p { margin-top:.5rem; font-size:.9rem; color:var(--ink-500); line-height:1.55; }
.mini-card a.learn { margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:500; color:var(--ink); }

/* ===== Stage 6: talent secondary section ===== */
.talent-section { background:var(--surface); }
.talent-section .container { padding:3.5rem 0; max-width:760px; }
.talent-section .label { font-size:.8rem; font-weight:600; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em; }
.talent-section h2 { margin-top:.5rem; font-size:1.35rem; font-weight:600; }
.talent-section p { margin-top:.85rem; color:var(--ink-500); font-size:.95rem; line-height:1.65; max-width:42rem; }
.talent-section a.text-link { margin-top:1rem; display:inline-block; font-size:.9rem; font-weight:500; color:var(--ink); text-decoration:underline; text-decoration-color:rgba(24,24,24,.3); text-underline-offset:4px; }
.talent-section a.text-link:hover { text-decoration-color:var(--brand-500); color:var(--brand-600); }

/* ===== Stage 6: global positioning section ===== */
.global-section .container { max-width:760px; text-align:left; padding:5rem 0; }
.global-section h2 { font-size:2rem; font-weight:600; letter-spacing:-.02em; }
@media (min-width:768px){ .global-section h2{ font-size:2.5rem; } }
.global-section p { margin-top:1.1rem; color:var(--ink-500); font-size:1.05rem; line-height:1.65; }

/* ===== Stage 6: capability landing page (Enterprise AI / Integration) ===== */
.cap-hero { position:relative; background:var(--night); overflow:hidden; }
.cap-hero .container { position:relative; z-index:1; padding:5rem 1.5rem 4rem; }
.cap-hero .crumb { font-size:.85rem; color:rgba(250,250,248,.5); }
.cap-hero .crumb a { color:rgba(250,250,248,.7); }
.cap-hero .crumb a:hover { color:var(--brand-300); }
.cap-hero h1 { color:var(--paper); font-size:2.4rem; font-weight:600; letter-spacing:-.02em; margin-top:1rem; max-width:640px; }
.cap-hero .lede { color:rgba(250,250,248,.72); font-size:1.1rem; line-height:1.65; max-width:600px; margin-top:1.2rem; }
@media (min-width:768px){ .cap-hero .container{ padding:6.5rem 2.5rem 5rem; } .cap-hero h1{ font-size:3.1rem; } }

.cap-section { padding:4.5rem 0; }
@media (min-width:768px){ .cap-section{ padding:6rem 0; } }
.cap-section h2 { font-size:1.65rem; font-weight:600; letter-spacing:-.02em; }
.cap-section > .container > p.intro { margin-top:.85rem; max-width:42rem; color:var(--ink-500); font-size:1.02rem; line-height:1.6; }

.cap-grid { margin-top:2.5rem; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .cap-grid{ grid-template-columns:1fr 1fr; } }
.cap-item { border:1px solid rgba(24,24,24,.08); border-radius:12px; padding:1.5rem; }
.cap-item h3 { font-size:1rem; font-weight:600; }
.cap-item p { margin-top:.5rem; font-size:.875rem; color:var(--ink-500); line-height:1.55; }

.subpage-grid { margin-top:2.5rem; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .subpage-grid{ grid-template-columns:1fr 1fr 1fr; } }
.subpage-card { display:block; border:1px solid rgba(24,24,24,.08); border-radius:14px; padding:1.75rem; transition:transform .2s, box-shadow .2s, border-color .2s; }
.subpage-card:hover { transform:translateY(-4px); box-shadow:0 14px 28px -18px rgba(8,33,25,.17); border-color:rgba(0,122,83,.3); }
.subpage-card h3 { font-size:1.05rem; font-weight:600; }
.subpage-card p { margin-top:.5rem; font-size:.875rem; color:var(--ink-500); line-height:1.55; }
.subpage-card .learn { margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.825rem; font-weight:500; color:var(--ink); }

.usecase-list { margin-top:1.5rem; display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:640px){ .usecase-list{ grid-template-columns:1fr 1fr; } }
.usecase-item { display:flex; gap:.65rem; font-size:.9rem; color:var(--ink-700); line-height:1.5; }
.usecase-item svg { width:16px; height:16px; color:var(--brand-500); flex-shrink:0; margin-top:.2rem; }

.ecosystem-note { margin-top:1rem; padding:1.5rem; background:var(--surface); border-radius:12px; font-size:.9rem; color:var(--ink-700); line-height:1.65; max-width:48rem; }

.approach-steps { margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem; max-width:44rem; }
.approach-step { display:flex; gap:1rem; }
.approach-step .n { flex-shrink:0; width:28px; height:28px; border-radius:999px; background:var(--night); color:var(--brand-300); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; font-family:var(--font-display); }
.approach-step p { font-size:.9rem; color:var(--ink-700); line-height:1.6; padding-top:.25rem; }

/* ===== Stage 6 Checkpoint 2: top-level Enterprise AI / Oracle Cloud nav links ===== */
.main-nav a.nav-primary, .mobile-nav a.nav-primary { font-weight:600; }
.oracle-accent { color:#B5533C; }
.badge-oracle { display:inline-flex; align-items:center; gap:.4rem; color:#B5533C; font-size:14px; font-weight:600; }
.badge-oracle svg { width:15px; height:15px; }

/* ===== Motion system: scroll reveal ===== */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in-view { opacity:1; transform:translateY(0); }
.reveal-group > *:nth-child(1) { transition-delay:0ms; }
.reveal-group > *:nth-child(2) { transition-delay:80ms; }
.reveal-group > *:nth-child(3) { transition-delay:160ms; }
.reveal-group > *:nth-child(4) { transition-delay:240ms; }
.reveal-group > *:nth-child(5) { transition-delay:320ms; }
.reveal-group > *:nth-child(6) { transition-delay:400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-wave, .ai-network, .oracle-flow { animation:none !important; }
}

/* ===== Hero ambient motion ===== */
@keyframes waveDrift {
  0%   { transform:rotate(-6deg) translate(0,0); }
  50%  { transform:rotate(-4deg) translate(-8px, 6px); }
  100% { transform:rotate(-6deg) translate(0,0); }
}
.hero-wave { animation:waveDrift 14s ease-in-out infinite; }

/* ===== AI network graphic ===== */
@keyframes nodePulse {
  0%, 100% { opacity:.55; r:9; }
  50%      { opacity:1; r:12; }
}
.ai-network circle.pulse { animation:nodePulse 3.2s ease-in-out infinite; }
.ai-network circle.pulse:nth-of-type(2) { animation-delay:.5s; }
.ai-network circle.pulse:nth-of-type(3) { animation-delay:1s; }
.ai-network circle.pulse:nth-of-type(4) { animation-delay:1.5s; }

/* ===== Oracle flowing lines ===== */
@keyframes flowDash {
  to { stroke-dashoffset:-40; }
}
.oracle-flow path.flow-line { stroke-dasharray:6 6; animation:flowDash 3s linear infinite; }
.oracle-flow { width:100%; height:auto; max-width:320px; margin:0 auto; display:block; }

/* ===== Section: Digital Engineering / Flexible Engagement grids ===== */
.engage-grid { margin-top:2.5rem; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .engage-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .engage-grid{ grid-template-columns:1fr 1fr 1fr; } }
.engage-card { background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:12px; padding:1.5rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.engage-card:hover { transform:translateY(-3px); box-shadow:0 12px 22px -16px rgba(8,33,25,.14); }
.engage-card .ic { width:36px; height:36px; border-radius:8px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; }
.engage-card .ic svg { width:18px; height:18px; }
.engage-card h3 { font-size:1rem; font-weight:600; }
.engage-card p { margin-top:.4rem; font-size:.85rem; color:var(--ink-500); line-height:1.5; }

/* Oracle-tinted engagement card icon variant */
.engage-card .ic.oracle-ic { background:#FBEDE9; color:#B5533C; }

/* ===== Expertise chip grid (Oracle) ===== */
.chip-grid { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.chip { padding:.55rem 1.1rem; border:1px solid rgba(24,24,24,.12); border-radius:999px; font-size:.85rem; font-weight:500; color:var(--ink-700); background:var(--paper); }

/* ===== Oracle hero variant ===== */
.oracle-hero-wave { position:absolute; top:-10%; right:-15%; width:900px; max-width:130%; opacity:.9; pointer-events:none; }

/* ===== Checkpoint 2 refinement: expertise visual grid (Oracle) ===== */
.expertise-grid { margin-top:2.5rem; display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (min-width:640px){ .expertise-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media (min-width:1024px){ .expertise-grid{ grid-template-columns:1fr 1fr 1fr 1fr; } }
.expertise-item { display:flex; align-items:center; gap:.75rem; background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:10px; padding:.9rem 1rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.expertise-item:hover { transform:translateY(-2px); box-shadow:0 10px 18px -14px rgba(8,33,25,.13); border-color:rgba(181,83,60,.3); }
.expertise-item .ic { width:32px; height:32px; border-radius:8px; background:#FBEDE9; color:#B5533C; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.expertise-item .ic svg { width:16px; height:16px; }
.expertise-item span.label { font-size:.85rem; font-weight:600; color:var(--ink); line-height:1.3; }

/* ===== Checkpoint 2 refinement: compact Oracle capability indicator strip (homepage) ===== */
.oracle-indicators { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.75rem; }
.oracle-indicators .item { display:flex; align-items:center; gap:.5rem; }
.oracle-indicators .item .ic { width:30px; height:30px; border-radius:7px; background:#FBEDE9; color:#B5533C; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.oracle-indicators .item .ic svg { width:15px; height:15px; }
.oracle-indicators .item span { font-size:.85rem; font-weight:600; color:var(--ink-700); }

/* ===== Oracle hero: split layout + abstract architecture visual ===== */
.oracle-hero-grid { display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .oracle-hero-grid{ grid-template-columns:1.15fr .85fr; } }
.oracle-hero-media { position:relative; }
.oracle-hero-media svg { width:100%; height:auto; display:block; }

@keyframes archDrift {
  0%   { transform:translateY(0); }
  50%  { transform:translateY(-6px); }
  100% { transform:translateY(0); }
}
.oracle-architecture { animation:archDrift 10s ease-in-out infinite; }
.oracle-architecture .flow-line { stroke-dasharray:5 5; animation:flowDash 3.5s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .oracle-architecture, .oracle-architecture .flow-line { animation:none !important; }
}

/* ===== Checkpoint 3: split Capabilities nav control (label links, chevron toggles) ===== */
.nav-item-dd.split { display:flex; align-items:center; gap:.15rem; }
.nav-item-dd.split > a.nav-cap-label { font-size:15px; font-weight:500; color:var(--ink-700); }
.nav-item-dd.split > a.nav-cap-label:hover { color:var(--brand-500); }
.nav-item-dd.split > .nav-trigger { padding:.25rem; color:var(--ink-500); }
.mobile-nav .nav-item-dd.split { justify-content:space-between; padding:.75rem 0; }
.mobile-nav .nav-item-dd.split > a.nav-cap-label { font-size:1.125rem; font-weight:500; color:var(--ink-700); padding:0; }

/* ===== Checkpoint 3: domain motif section layout (reused across capability pages) ===== */
.motif-section .container { display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:900px){ .motif-section .container{ grid-template-columns:1fr .85fr; } }
.motif-media { max-width:320px; margin:0 auto; }
.motif-media svg { width:100%; height:auto; display:block; }

/* ===== Checkpoint 3: related capabilities cross-link row ===== */
.related-caps { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.related-caps a { font-size:.85rem; font-weight:500; padding:.55rem 1rem; border:1px solid rgba(24,24,24,.12); border-radius:999px; color:var(--ink-700); }
.related-caps a:hover { border-color:var(--brand-400); color:var(--brand-600); }

/* ===== Checkpoint 3: secondary engagement note ===== */
.engagement-note { margin-top:1rem; padding:1.5rem; background:var(--surface); border-radius:12px; font-size:.9rem; color:var(--ink-700); line-height:1.65; max-width:48rem; }

/* ===== Final polish: selective motion for Enterprise AI family motifs ===== */
/* Deliberately applied only to Generative AI (typing-dot pulse) and Agentic AI (flow lines) —
   the AI/ML Engineering scatter-plot motif remains static by choice, not oversight. */
@keyframes motifPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.motif-pulse { animation:motifPulse 1.6s ease-in-out infinite; }
.motif-pulse:nth-of-type(2) { animation-delay:.25s; }
.motif-pulse:nth-of-type(3) { animation-delay:.5s; }

.motif-flow { stroke-dasharray:4 4; animation:flowDash 2.8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .motif-pulse, .motif-flow { animation:none !important; }
}

/* ===== Stage 6B: surgical whitespace correction =====
   Applied only to three named sparse sections (Capabilities "Six capabilities, one
   engineering approach"; About "Engineering-led, architecture-first" and
   "Responsible, pragmatic AI adoption"). Every other .cap-section on the site
   keeps its existing, approved padding. */
.cap-section-compact { padding:3rem 0; }
@media (min-width:768px){ .cap-section-compact{ padding:3.5rem 0; } }

/* ===== Stage 6B: differentiated hero motifs =====
   Homepage (.hero .hero-wave) and Oracle Cloud (.oracle-architecture) are frozen
   and untouched. These four classes give Enterprise AI, Capabilities, Industries
   and About their own hero visual instead of the shared wave, while keeping the
   same absolute-positioned placement convention inside .cap-hero. */
.hero-motif-ai, .hero-motif-caps, .hero-motif-industries, .hero-motif-about {
  position:absolute; pointer-events:none;
}
.hero-motif-ai { top:-8%; right:-8%; width:380px; max-width:60%; opacity:.9; }
.hero-motif-caps { top:-2%; right:-4%; width:320px; max-width:54%; opacity:.85; }
.hero-motif-industries { top:-6%; right:-6%; width:380px; max-width:60%; opacity:.85; }
.hero-motif-about { top:0; right:-20%; width:480px; max-width:72%; opacity:.3; }
@media (min-width:768px){
  .hero-motif-ai { width:460px; }
  .hero-motif-caps { width:400px; }
  .hero-motif-industries { width:460px; }
  .hero-motif-about { width:600px; }
}