/* ============================================================
   DISCOVERY IT GROUP — GLOBAL STYLESHEET
   ============================================================ */

/* ---------- TOKENS ---------- */
:root, [data-theme='light'] {
  --color-bg:             #f5f6f8;
  --color-surface:        #ffffff;
  --color-surface-2:      #eef0f4;
  --color-border:         #e1e4eb;
  --color-divider:        #d4d8e2;

  --color-text:           #0f1623;
  --color-text-muted:     #566070;
  --color-text-faint:     #96a0b0;
  --color-text-inverse:   #ffffff;

  /* Navy primary */
  --color-primary:        #0d2d52;
  --color-primary-mid:    #1a4a7a;
  --color-primary-light:  #e8eef6;
  --color-primary-hover:  #0a2240;

  /* Accent amber */
  --color-accent:         #e8900a;
  --color-accent-hover:   #cf7d08;
  --color-accent-light:   #fef3e2;

  /* Sector — IT blue */
  --color-it:             #2563eb;
  --color-it-bg:          #eff6ff;
  --color-it-border:      #bfdbfe;

  /* Sector — DC purple */
  --color-dc:             #6d28d9;
  --color-dc-bg:          #f5f3ff;
  --color-dc-border:      #ddd6fe;

  /* Sector — RE green */
  --color-re:             #047857;
  --color-re-bg:          #ecfdf5;
  --color-re-border:      #a7f3d0;

  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(15,22,35,.07), 0 1px 2px rgba(15,22,35,.04);
  --shadow-md: 0 4px 16px rgba(15,22,35,.09), 0 2px 6px rgba(15,22,35,.05);
  --shadow-lg: 0 12px 40px rgba(15,22,35,.13), 0 4px 12px rgba(15,22,35,.06);

  --font-display: 'Cabinet Grotesk', 'Inter', sans-serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;

  --text-xs:   clamp(.75rem,  .7rem  + .25vw, .875rem);
  --text-sm:   clamp(.875rem, .8rem  + .35vw, 1rem);
  --text-base: clamp(1rem,    .95rem + .25vw, 1.125rem);
  --text-lg:   clamp(1.125rem,1rem   + .75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,  1.2rem + 1.25vw,2.25rem);
  --text-2xl:  clamp(2rem,    1.2rem + 2.5vw, 3.25rem);
  --text-hero: clamp(2.75rem, 1rem   + 4.5vw, 5rem);

  --space-1:2px; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  --trans: 180ms cubic-bezier(.16,1,.3,1);
}

[data-theme='dark'] {
  --color-bg:           #0b0f18;
  --color-surface:      #111827;
  --color-surface-2:    #161d2e;
  --color-border:       #1f2d42;
  --color-divider:      #1a2538;
  --color-text:         #e2e8f4;
  --color-text-muted:   #7d8fa8;
  --color-text-faint:   #3d4d62;
  --color-text-inverse: #0b0f18;
  --color-primary:      #4a8fd9;
  --color-primary-mid:  #2d6aaa;
  --color-primary-light:#162035;
  --color-primary-hover:#5fa0e8;
  --color-accent:       #f59e0b;
  --color-accent-hover: #d68a00;
  --color-accent-light: #2a1f05;
  --color-it:           #60a5fa;
  --color-it-bg:        #1a2b42;
  --color-it-border:    #2d4a70;
  --color-dc:           #a78bfa;
  --color-dc-bg:        #1e1a32;
  --color-dc-border:    #3d2f6e;
  --color-re:           #34d399;
  --color-re-bg:        #0b2a1e;
  --color-re-border:    #1a4a38;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#0b0f18; --color-surface:#111827; --color-surface-2:#161d2e;
    --color-border:#1f2d42; --color-divider:#1a2538;
    --color-text:#e2e8f4; --color-text-muted:#7d8fa8; --color-text-faint:#3d4d62;
    --color-text-inverse:#0b0f18;
    --color-primary:#4a8fd9; --color-primary-mid:#2d6aaa;
    --color-primary-light:#162035; --color-primary-hover:#5fa0e8;
    --color-accent:#f59e0b; --color-accent-hover:#d68a00; --color-accent-light:#2a1f05;
    --color-it:#60a5fa; --color-it-bg:#1a2b42; --color-it-border:#2d4a70;
    --color-dc:#a78bfa; --color-dc-bg:#1e1a32; --color-dc-border:#3d2f6e;
    --color-re:#34d399; --color-re-bg:#0b2a1e; --color-re-border:#1a4a38;
  }
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.65}
img,svg{display:block;max-width:100%}
ul{list-style:none}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:1.1;text-wrap:balance}
p,li{text-wrap:pretty}
input,select,textarea{font:inherit;color:inherit}
a,button,[role=button]{transition:color var(--trans),background var(--trans),border-color var(--trans),box-shadow var(--trans),opacity var(--trans)}

/* ---------- LAYOUT ---------- */
.container{width:100%;max-width:1160px;margin-inline:auto;padding-inline:clamp(var(--space-5),5vw,var(--space-12))}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:.7em 1.5em;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;line-height:1;white-space:nowrap;border:2px solid transparent;letter-spacing:.01em}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-accent{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.btn-accent:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
.btn-ghost{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.btn-ghost:hover{background:var(--color-surface);border-color:var(--color-text-muted)}
.btn-outline{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary-light)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-lg{padding:.85em 2em;font-size:var(--text-base)}
.btn-full{width:100%;justify-content:center}
.btn-sm{padding:.5em 1em;font-size:var(--text-xs)}

/* ---------- LABELS ---------- */
.eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--space-4)}
.eyebrow-primary{color:var(--color-primary)}
.eyebrow-white{color:rgba(255,255,255,.65)}
.eyebrow-it{color:var(--color-it)}
.eyebrow-dc{color:var(--color-dc)}
.eyebrow-re{color:var(--color-re)}
.eyebrow-accent{color:var(--color-accent)}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(245,246,248,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-border);transition:box-shadow var(--trans)}
[data-theme=dark] .site-header{background:rgba(11,15,24,.92)}
.site-header.scrolled{box-shadow:var(--shadow-sm)}

.nav-wrap{display:flex;align-items:center;gap:var(--space-8);height:68px}

.logo{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.logo-mark{width:36px;height:36px;background:var(--color-primary);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{color:#fff}
.logo-name{font-family:var(--font-display);font-size:1.05rem;font-weight:500;color:var(--color-text)}
.logo-name strong{font-weight:900}

.main-nav{display:flex;align-items:center;gap:var(--space-6);margin-left:auto}
.main-nav a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);padding:var(--space-2) 0;border-bottom:2px solid transparent;transition:color var(--trans),border-color var(--trans)}
.main-nav a:hover,.main-nav a.active{color:var(--color-text);border-bottom-color:var(--color-accent)}

.has-dropdown{position:relative}
.dropdown-toggle{display:flex;align-items:center;gap:4px;font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);padding:var(--space-2) 0;border:none;background:none;cursor:pointer;transition:color var(--trans)}
.dropdown-toggle:hover{color:var(--color-text)}
.dropdown-toggle svg{transition:transform var(--trans)}
.has-dropdown:hover .dropdown-toggle svg{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:-16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);min-width:220px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity var(--trans),transform var(--trans)}
.has-dropdown:hover .dropdown-menu{opacity:1;pointer-events:all;transform:translateY(0)}
.dropdown-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);transition:background var(--trans),color var(--trans)}
.dropdown-item:hover{background:var(--color-surface-2);color:var(--color-text)}
.dropdown-item .di-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

.nav-end{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.theme-btn{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-btn:hover{color:var(--color-text);background:var(--color-surface-2)}

.menu-btn{display:none;flex-direction:column;gap:5px;width:36px;height:36px;align-items:center;justify-content:center}
.menu-btn span{display:block;width:20px;height:2px;background:var(--color-text);border-radius:2px;transition:transform var(--trans),opacity var(--trans)}

.mob-nav{display:none;flex-direction:column;background:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-5) var(--space-6) var(--space-6)}
.mob-nav.open{display:flex}
.mob-nav a{padding:var(--space-4) 0;font-weight:500;border-bottom:1px solid var(--color-border);color:var(--color-text-muted)}
.mob-nav .btn{margin-top:var(--space-4);text-align:center;justify-content:center}
.mob-sector-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-faint);padding:var(--space-4) 0 var(--space-2)}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{padding-block:clamp(var(--space-16),8vw,var(--space-24));background:var(--color-primary);color:#fff}
.page-hero-inner{max-width:680px}
.page-hero h1{font-size:var(--text-2xl);font-weight:900;margin-bottom:var(--space-5)}
.page-hero p{font-size:var(--text-lg);color:rgba(255,255,255,.75);max-width:52ch;line-height:1.6}
.page-hero-it{background:linear-gradient(135deg,#1a3a6e 0%,#1e4fa0 100%)}
.page-hero-dc{background:linear-gradient(135deg,#2e1065 0%,#4c1d95 100%)}
.page-hero-re{background:linear-gradient(135deg,#022c22 0%,#065f46 100%)}
.page-hero-about{background:linear-gradient(135deg,#0d2d52 0%,#1a4a7a 100%)}
.page-hero-services{background:linear-gradient(135deg,#111827 0%,#1f2d42 100%)}
.page-hero-contact{background:linear-gradient(135deg,#0d2d52 0%,#1a3a6e 100%)}
.page-hero-video{background:linear-gradient(135deg,#1a0533 0%,#3b0764 100%)}
.page-hero-breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:rgba(255,255,255,.5);margin-bottom:var(--space-5)}
.page-hero-breadcrumb a{color:rgba(255,255,255,.5)}
.page-hero-breadcrumb a:hover{color:#fff}
.page-hero-breadcrumb span{color:rgba(255,255,255,.3)}

/* ---------- SECTION SCAFFOLDING ---------- */
.section{padding-block:clamp(var(--space-16),8vw,var(--space-24))}
.section-alt{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.section-dark{background:var(--color-primary);color:#fff}
.section-header{margin-bottom:var(--space-12)}
.section-header h2{font-size:var(--text-2xl);font-weight:900;margin-bottom:var(--space-4)}
.section-header p{font-size:var(--text-base);color:var(--color-text-muted);max-width:52ch}
.section-header-center{text-align:center;max-width:640px;margin-inline:auto;margin-bottom:var(--space-12)}

/* ---------- ROLE CHIP LIST ---------- */
.role-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.role-chip{padding:.35em .85em;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;border:1px solid}
.chip-it{background:var(--color-it-bg);color:var(--color-it);border-color:var(--color-it-border)}
.chip-dc{background:var(--color-dc-bg);color:var(--color-dc);border-color:var(--color-dc-border)}
.chip-re{background:var(--color-re-bg);color:var(--color-re);border-color:var(--color-re-border)}

/* ---------- CARDS ---------- */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm);transition:box-shadow var(--trans),transform var(--trans)}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
[data-theme=dark] .card{background:var(--color-surface-2)}

.icon-box{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-box-primary{background:var(--color-primary-light);color:var(--color-primary)}
.icon-box-it{background:var(--color-it-bg);color:var(--color-it)}
.icon-box-dc{background:var(--color-dc-bg);color:var(--color-dc)}
.icon-box-re{background:var(--color-re-bg);color:var(--color-re)}
.icon-box-accent{background:var(--color-accent-light);color:var(--color-accent)}

/* ---------- PROCESS STEPS ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6);counter-reset:steps}
.step{padding:var(--space-7);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);position:relative}
[data-theme=dark] .step{background:var(--color-surface-2)}
.step::before{counter-increment:steps;content:counter(steps,'0');position:absolute;top:var(--space-6);right:var(--space-6);font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--color-primary);opacity:.15}
.step h4{font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-3)}
.step p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.65}

/* ---------- FORM ---------- */
.form-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:clamp(var(--space-8),4vw,var(--space-10));box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--space-5)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.fg{display:flex;flex-direction:column;gap:var(--space-2)}
.fg label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.fg input,.fg select,.fg textarea{padding:.65em .9em;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);font-size:var(--text-sm);width:100%;transition:border-color var(--trans),box-shadow var(--trans)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}
.fg textarea{resize:vertical;min-height:100px}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center}

/* ---------- FOOTER ---------- */
.site-footer{background:#080f1e;color:rgba(255,255,255,.65)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(var(--space-10),6vw,var(--space-20));padding-block:clamp(var(--space-12),6vw,var(--space-20))}
.footer-brand .logo-name{color:#fff}
.footer-brand p{font-size:var(--text-sm);color:rgba(255,255,255,.45);margin-top:var(--space-4);max-width:38ch;line-height:1.7}
.footer-cols{display:flex;gap:clamp(var(--space-8),5vw,var(--space-16))}
.footer-col{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col h4{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;color:#fff;margin-bottom:var(--space-2)}
.footer-col a{font-size:var(--text-sm);color:rgba(255,255,255,.45);transition:color var(--trans)}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-block:var(--space-5)}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.footer-bottom p{font-size:var(--text-xs);color:rgba(255,255,255,.25)}
.footer-bottom-links{display:flex;gap:var(--space-5)}
.footer-bottom-links a{font-size:var(--text-xs);color:rgba(255,255,255,.25)}
.footer-bottom-links a:hover{color:rgba(255,255,255,.6)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .main-nav{display:none}
  .nav-end .btn{display:none}
  .menu-btn{display:flex}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-cols{flex-wrap:wrap;gap:var(--space-8)}
}
@media(max-width:600px){
  .btn-lg{padding:.75em 1.4em;font-size:var(--text-sm)}
}