/* ── Reset & base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cobalt:    #1B69FF;
  --cobalt-dk: #1450CC;
  --navy:      #0D1B40;
  --navy-lt:   #152254;
  --orange:    #F47820;
  --orange-dk: #D4640E;
  --off-white: #F7F9FC;
  --light:     #EEF2FA;
  --charcoal:  #2C2C3A;
  --mid:       #5A5A72;
  --border:    #D6DDED;
  --white:     #FFFFFF;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --max: 1180px;
  --radius: 6px;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--charcoal); background: var(--white); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img  { display: block; max-width: 100%; height: auto; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ── Typography ───────────────────────────────────────── */
.display-xl { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,4rem);   font-weight:700; line-height:1.1;  letter-spacing:-.02em; }
.display-lg { font-family: var(--font-display); font-size: clamp(1.8rem,3vw,2.6rem); font-weight:700; line-height:1.15; letter-spacing:-.015em; }
.display-md { font-family: var(--font-display); font-size: clamp(1.3rem,2vw,1.7rem); font-weight:600; line-height:1.25; }
.eyebrow    { font-family: var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); display:block; }

/* ── Buttons ──────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:var(--radius); font-family:var(--font-display); font-size:.95rem; font-weight:600; cursor:pointer; border:none; transition:transform .18s, box-shadow .18s, background .18s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--orange); color:var(--white); box-shadow:0 4px 18px rgba(244,120,32,.35); }
.btn-primary:hover { background:var(--orange-dk); box-shadow:0 6px 24px rgba(244,120,32,.45); }
.btn-ghost   { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.45); }
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:var(--white); }
.btn-outline { background:transparent; color:var(--cobalt); border:1.5px solid var(--cobalt); }
.btn-outline:hover { background:var(--cobalt); color:var(--white); }

/* ── Navigation ───────────────────────────────────────── */
#nav { position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; transition:background .3s, box-shadow .3s; }
#nav.scrolled { background:rgba(13,27,64,.97); backdrop-filter:blur(12px); box-shadow:0 2px 20px rgba(0,0,0,.25); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.site-logo  { height:46px; width:auto; }

.nav-links { display:flex; align-items:center; gap:32px; list-style:none; padding:0; margin:0; }
.nav-links a { font-family:var(--font-display); font-size:.9rem; font-weight:500; color:rgba(255,255,255,.8); transition:color .2s; }
.nav-links a:hover { color:var(--white); }
.nav-links .nav-cta a { background:var(--orange); color:var(--white); padding:10px 22px; border-radius:var(--radius); font-weight:600; }
.nav-links .nav-cta a:hover { background:var(--orange-dk); }

.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:transform .2s,opacity .2s; }

/* ── Hero ─────────────────────────────────────────────── */
#hero { background:var(--navy); min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:120px 0 80px; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(27,105,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(27,105,255,.04) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.hero-signal { position:absolute; right:-5%; top:50%; transform:translateY(-50%); width:700px; height:700px; pointer-events:none; }
.signal-core { position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); width:120px;height:120px; background:radial-gradient(circle,var(--cobalt) 0%,var(--cobalt-dk) 60%,transparent 100%); border-radius:50%; animation:pulse-core 3s ease-in-out infinite; }
.signal-ring { position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); border-radius:50%; border:1.5px solid var(--cobalt); opacity:0; animation:expand-ring 4s ease-out infinite; }
.signal-ring:nth-child(2){width:200px;height:200px;animation-delay:0s}
.signal-ring:nth-child(3){width:320px;height:320px;animation-delay:.8s}
.signal-ring:nth-child(4){width:460px;height:460px;animation-delay:1.6s}
.signal-ring:nth-child(5){width:600px;height:600px;animation-delay:2.4s}
.signal-ring:nth-child(6){width:700px;height:700px;animation-delay:3.2s}
@keyframes expand-ring { 0%{transform:translate(-50%,-50%) scale(.3);opacity:.6} 100%{transform:translate(-50%,-50%) scale(1);opacity:0} }
@keyframes pulse-core  { 0%,100%{box-shadow:0 0 40px 10px rgba(27,105,255,.25)} 50%{box-shadow:0 0 80px 20px rgba(27,105,255,.45)} }

.hero-content  { position:relative; z-index:2; max-width:680px; }
.hero-eyebrow  { display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; }
.hero-eyebrow::before { content:''; display:block; width:28px; height:2px; background:var(--orange); }
.hero-eyebrow span { font-family:var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); }
.hero-title { font-family:var(--font-display); font-size:clamp(2.6rem,5.5vw,4.2rem); font-weight:700; color:var(--white); line-height:1.08; letter-spacing:-.025em; margin-bottom:24px; }
.hero-title em { font-style:normal; color:var(--cobalt); }
.hero-sub      { font-size:1.1rem; color:rgba(255,255,255,.7); line-height:1.75; margin-bottom:44px; max-width:560px; }
.hero-actions  { display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats    { display:flex; gap:48px; margin-top:72px; padding-top:40px; border-top:1px solid rgba(255,255,255,.1); flex-wrap:wrap; }
.stat-num      { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--white); line-height:1; }
.stat-num span { color:var(--orange); }
.stat-label    { font-size:.82rem; color:rgba(255,255,255,.5); margin-top:4px; letter-spacing:.04em; }

/* ── Sections ─────────────────────────────────────────── */
.section       { padding:96px 0; }
.section-light { background:var(--off-white); }
.section-dark  { background:var(--navy); }
.section-header { margin-bottom:56px; }
.section-header h2 { color:var(--charcoal); }
.section-header.on-dark h2 { color:var(--white); }
.section-header p { margin-top:14px; font-size:1.05rem; color:var(--mid); max-width:560px; line-height:1.75; }
.section-header.on-dark p { color:rgba(255,255,255,.6); }

/* ── Clients strip ────────────────────────────────────── */
.clients-strip { padding:60px 0; background:var(--navy); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.clients-label { font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.35); font-family:var(--font-display); margin-bottom:28px; text-align:center; }
.clients-logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:20px 32px; }
.client-logo-wrap { display:flex; align-items:center; }
.client-logo-img  { max-height:48px; width:auto; filter:grayscale(100%) brightness(1.8); opacity:.7; transition:filter .2s,opacity .2s; }
.client-logo-img:hover { filter:grayscale(0); opacity:1; }
.client-pill { font-family:var(--font-display); font-size:.82rem; font-weight:600; color:rgba(255,255,255,.5); padding:10px 20px; border:1px solid rgba(255,255,255,.12); border-radius:100px; white-space:nowrap; transition:all .2s; }
.client-pill:hover { color:var(--white); border-color:rgba(255,255,255,.4); }

/* ── About ────────────────────────────────────────────── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-visual { position:relative; height:440px; }
.about-card { position:absolute; background:var(--white); border:1px solid var(--border); border-radius:10px; padding:24px 28px; box-shadow:0 8px 32px rgba(0,0,0,.07); }
.about-card-main { top:0;left:0;right:0; background:var(--navy); color:var(--white); padding:36px; }
.about-card-main h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:10px; color:var(--white); }
.about-card-main p  { font-size:.9rem; color:rgba(255,255,255,.65); line-height:1.7; }
.about-card-since { bottom:0;left:0; width:160px; text-align:center; background:var(--cobalt); color:var(--white); }
.since-year  { font-family:var(--font-display); font-size:2.4rem; font-weight:700; line-height:1; color:var(--white); }
.since-label { font-size:.75rem; color:rgba(255,255,255,.7); margin-top:6px; }
.about-card-reg { bottom:0;right:0; width:260px; }
.reg-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:.8rem; }
.reg-row:last-child { border-bottom:none; }
.reg-label  { color:var(--mid); }
.reg-value  { font-weight:600; color:var(--charcoal); font-family:var(--font-display); font-size:.78rem; }
.about-text h2    { margin-bottom:20px; }
.about-text p     { font-size:1rem; color:var(--mid); line-height:1.8; margin-bottom:16px; }
.about-pillars    { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
.pillar           { padding:18px; background:var(--off-white); border-radius:var(--radius); border-left:3px solid var(--cobalt); }
.pillar h4        { font-family:var(--font-display); font-size:.88rem; font-weight:600; color:var(--charcoal); margin-bottom:4px; }
.pillar p         { font-size:.82rem; color:var(--mid); line-height:1.6; }

/* ── Services list layout ─────────────────────────────── */
.services-list { display:flex; flex-direction:column; gap:0; list-style:none; }
.service-list-item { display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; border-bottom:1px solid var(--border); }
.service-list-item:last-child { border-bottom:none; }
.service-list-item--reverse .service-list-image { order:2; }
.service-list-item--reverse .service-list-body   { order:1; }

.service-list-image { position:relative; min-height:320px; overflow:hidden; background:var(--light); }
.service-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.service-list-item:hover .service-img { transform:scale(1.03); }
.service-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--light) 0%,var(--border) 100%); }
.service-icon-lg { font-size:5rem; opacity:.35; }

.service-list-body { padding:48px 52px; display:flex; flex-direction:column; justify-content:center; }
.service-icon-sm   { font-size:2rem; margin-bottom:16px; }
.service-list-title { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:var(--charcoal); margin-bottom:14px; line-height:1.2; }
.service-list-desc  { font-size:.975rem; color:var(--mid); line-height:1.8; margin-bottom:24px; }
.service-link       { display:inline-flex; align-items:center; gap:6px; font-size:.875rem; font-weight:600; color:var(--cobalt); font-family:var(--font-display); transition:gap .2s; }
.service-link:hover { gap:12px; }

/* ── Portfolio ────────────────────────────────────────── */
.portfolio-tabs { display:flex; gap:8px; margin-bottom:40px; flex-wrap:wrap; }
.tab-btn { font-family:var(--font-display); font-size:.85rem; font-weight:600; padding:10px 20px; border-radius:100px; border:1.5px solid var(--border); background:transparent; color:var(--mid); cursor:pointer; transition:all .2s; }
.tab-btn:hover,.tab-btn.active { background:var(--cobalt); border-color:var(--cobalt); color:var(--white); }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.project-card   { background:var(--white); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:box-shadow .25s,transform .25s; display:flex; flex-direction:column; }
.project-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.1); transform:translateY(-4px); }

.project-preview { height:200px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.project-preview-gov    { background:linear-gradient(135deg,#0D1B40 0%,#152254 100%); }
.project-preview-ngo    { background:linear-gradient(135deg,#1450CC 0%,#1B69FF 100%); }
.project-preview-social { background:linear-gradient(135deg,#D4640E 0%,#F47820 100%); }

.project-screenshot   { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .4s; }
.project-card:hover .project-screenshot { transform:scale(1.04); }
.project-url-fallback { font-family:var(--font-display); font-size:.9rem; font-weight:600; color:rgba(255,255,255,.75); letter-spacing:.02em; padding:0 16px; text-align:center; }

.project-body { padding:22px 24px; flex:1; }
.project-sector { font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); font-family:var(--font-display); margin-bottom:6px; }
.project-body h3 { font-family:var(--font-display); font-size:.96rem; font-weight:600; color:var(--charcoal); margin-bottom:8px; line-height:1.3; }
.project-body p  { font-size:.86rem; color:var(--mid); line-height:1.65; }
.project-footer  { padding:14px 24px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.project-footer a { font-size:.82rem; font-weight:600; color:var(--cobalt); font-family:var(--font-display); display:inline-flex; align-items:center; gap:5px; transition:gap .2s; }
.project-card:hover .project-footer a { gap:9px; }
.project-tag { font-size:.72rem; padding:3px 10px; border-radius:100px; background:var(--light); color:var(--mid); font-family:var(--font-display); font-weight:500; }
.portfolio-note { margin-top:24px; font-size:.82rem; color:var(--mid); text-align:center; font-style:italic; }

/* ── Why grid ─────────────────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; }
.why-card { background:var(--navy-lt); padding:36px 32px; transition:background .2s; }
.why-card:hover { background:rgba(27,105,255,.12); }
.why-num  { font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:rgba(27,105,255,.3); line-height:1; margin-bottom:16px; }
.why-card h3 { font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--white); margin-bottom:10px; }
.why-card p  { font-size:.875rem; color:rgba(255,255,255,.55); line-height:1.7; }

/* ── CTA band ─────────────────────────────────────────── */
.cta-band { background:linear-gradient(135deg,var(--cobalt-dk) 0%,var(--cobalt) 50%,#2E7BFF 100%); padding:80px 0; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
.cta-inner { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-inner h2 { font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; color:var(--white); line-height:1.15; }
.cta-inner h2 span { color:var(--orange); }
.cta-inner p  { margin-top:10px; font-size:.95rem; color:rgba(255,255,255,.75); }
.cta-actions  { display:flex; gap:14px; flex-wrap:wrap; }

/* ── Contact ──────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:64px; align-items:start; }
.contact-info h2 { margin-bottom:18px; }
.contact-info p  { font-size:.975rem; color:var(--mid); line-height:1.8; margin-bottom:32px; }
.contact-details { display:flex; flex-direction:column; gap:18px; }
.contact-row     { display:flex; align-items:flex-start; gap:16px; }
.contact-icon    { width:42px;height:42px; background:var(--light); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.contact-row-text label { display:block; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--mid); font-family:var(--font-display); margin-bottom:2px; }
.contact-row-text p { font-size:.9rem; color:var(--charcoal); font-weight:500; }
.contact-row-text a { color:var(--cobalt); }

.contact-form-wrap .contact-form { background:var(--off-white); border:1px solid var(--border); border-radius:12px; padding:40px; }
.contact-form h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--charcoal); margin-bottom:28px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:.8rem; font-weight:600; color:var(--charcoal); font-family:var(--font-display); margin-bottom:7px; letter-spacing:.02em; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-body); font-size:.9rem; color:var(--charcoal); background:var(--white); transition:border-color .2s,box-shadow .2s; outline:none; appearance:none; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--cobalt); box-shadow:0 0 0 3px rgba(27,105,255,.12); }
.form-group textarea { min-height:110px; resize:vertical; }

/* ── Footer ───────────────────────────────────────────── */
footer { background:#070F26; color:rgba(255,255,255,.55); padding:64px 0 32px; }
.footer-logo-link img { max-height:42px; width:auto; margin-bottom:16px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.07); }
.footer-brand p  { font-size:.875rem; line-height:1.8; max-width:300px; color:rgba(255,255,255,.45); }
.footer-reg-strip { display:flex; gap:24px; margin-top:20px; flex-wrap:wrap; }
.reg-badge { font-size:.72rem; font-family:var(--font-display); font-weight:600; color:rgba(255,255,255,.35); letter-spacing:.04em; }
.reg-badge span { color:rgba(255,255,255,.65); }
.footer-col h4   { font-family:var(--font-display); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.35); margin-bottom:18px; }
.footer-col ul   { display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:.875rem; color:rgba(255,255,255,.55); transition:color .2s; }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom { padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:.8rem; }
.footer-bottom a { color:rgba(255,255,255,.55); transition:color .2s; }
.footer-bottom a:hover { color:var(--white); }

/* ── Blog ─────────────────────────────────────────────── */
.blog-grid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:32px; }
.blog-card    { background:var(--white); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:box-shadow .25s,transform .25s; }
.blog-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.1); transform:translateY(-3px); }
.blog-card-thumb img { width:100%; height:200px; object-fit:cover; }
.blog-card-body  { padding:24px; }
.blog-card-date  { font-size:.78rem; color:var(--mid); margin-bottom:8px; font-family:var(--font-display); }
.blog-card-title { font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin-bottom:10px; line-height:1.3; }
.blog-card-title a { color:var(--charcoal); transition:color .2s; }
.blog-card-title a:hover { color:var(--cobalt); }
.blog-card-excerpt { font-size:.875rem; color:var(--mid); margin-bottom:18px; line-height:1.7; }
.blog-archive { padding-top:120px; }
.archive-header { margin-bottom:56px; }
.pagination { margin-top:48px; text-align:center; }
.page-content,.blog-single { padding-top:120px; padding-bottom:80px; }
.entry-header  { margin-bottom:32px; }
.entry-title   { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; color:var(--charcoal); line-height:1.15; }
.entry-meta    { font-size:.85rem; color:var(--mid); margin-top:12px; display:flex; gap:16px; }
.entry-thumbnail { margin:32px 0; border-radius:10px; overflow:hidden; }
.entry-content { font-size:1.05rem; line-height:1.85; color:var(--charcoal); }
.entry-content h2,.entry-content h3 { font-family:var(--font-display); margin:32px 0 16px; color:var(--charcoal); }
.entry-content p  { margin-bottom:20px; }
.entry-content a  { color:var(--cobalt); text-decoration:underline; }

/* ── Accessibility ────────────────────────────────────── */
:focus-visible { outline:3px solid var(--cobalt); outline-offset:3px; }
.skip-link { position:absolute; top:-100px; left:16px; background:var(--cobalt); color:var(--white); padding:12px 20px; border-radius:var(--radius); font-weight:600; z-index:999; transition:top .2s; }
.skip-link:focus { top:16px; }
@media (prefers-reduced-motion:reduce) { .signal-ring,.signal-core{animation:none} .service-img,.project-screenshot{transition:none} }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:1024px) {
  .service-list-item { grid-template-columns:1fr; }
  .service-list-item--reverse .service-list-image { order:0; }
  .service-list-item--reverse .service-list-body   { order:1; }
  .service-list-image { min-height:240px; }
  .service-list-body  { padding:36px 32px; }
}
@media (max-width:960px) {
  .about-grid,.contact-grid { grid-template-columns:1fr; }
  .about-visual { height:320px; margin-bottom:40px; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .why-grid   { grid-template-columns:1fr 1fr; }
  .hero-signal { opacity:.3; }
}
@media (max-width:680px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .hero-stats { gap:28px; }
  .cta-inner  { flex-direction:column; text-align:center; }
  .form-row   { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .why-grid   { grid-template-columns:1fr; }
  .about-pillars { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .container  { padding:0 20px; }
  .section    { padding:64px 0; }
}