/* Shared design system for the existing PHP site. Loaded after legacy component CSS. */
:root {
  --navy: #06142e;
  --navy-2: #06142e;
  --tech-blue: #0757ff;
  --tech-blue-dk: #0048df;
  --tech-blue-2: #0757ff;
  --tech-blue-soft: #edf3ff;
  --cool-white: #fffefa;
  --slate-100: #f4f6fa;
  --slate-200: #e5e9ef;
  --slate-500: #64738c;
  --radius: 10px;
  --radius-lg: 16px;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.modern-site { background: var(--cool-white); color: var(--navy); overflow-x: visible; }
.modern-site button, .modern-site input, .modern-site select, .modern-site textarea { font-family: inherit; }
.modern-site :focus-visible { outline: 3px solid var(--tech-blue) !important; outline-offset: 4px; }
.site-shell { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.site-skip { position: fixed; top: -100px; left: 20px; z-index: 200; padding: 12px 20px; background: white; }
.site-skip:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 100; background: #fffefaf5; backdrop-filter: blur(16px); border-bottom: 1px solid #e5e9efb0; }
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 88px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 750; letter-spacing: .7px; white-space: nowrap; color: var(--navy); }
.site-brand svg { width: 34px; height: 34px; color: var(--tech-blue); }
.site-desktop { display: flex; align-items: center; gap: 22px; font-size: 13px; font-weight: 500; }
.site-desktop > a { padding-block: 15px; }
.site-header a:hover, .site-header [aria-current=page] { color: var(--tech-blue); }
.site-dropdown { position: relative; }
.site-dropdown summary { cursor: pointer; display: flex; align-items: center; gap: 6px; list-style: none; padding-block: 15px; }
.site-header summary::-webkit-details-marker { display: none; }
.site-dropdown-panel { position: absolute; top: 100%; left: -18px; width: 294px; padding: 10px; border: 1px solid var(--slate-200); border-radius: 14px; background: white; box-shadow: 0 15px 45px #06142e12; }
.site-dropdown-panel a { display: block; padding: 12px; border-radius: 7px; font-size: 13px; }
.site-dropdown-panel a:hover { background: var(--tech-blue-soft); }
.site-button { display: inline-flex; justify-content: center; align-items: center; gap: 16px; background: var(--navy); color: white; min-height: 48px; padding: 12px 22px; border-radius: 30px; font-size: 13px; font-weight: 600; transition: background .2s; }
.site-header .site-button:hover { background: var(--tech-blue); color: white; }
.site-toggle { display: none; }
.site-mobile[hidden] { display: none; }
.site-content { min-width: 0; }
.site-content h1 { font-weight: 750 !important; letter-spacing: -.045em !important; line-height: 1.1 !important; font-style: normal !important; }
.site-content h1 span { font-style: normal !important; font-weight: inherit !important; color: var(--tech-blue) !important; }
.site-content h2 { letter-spacing: -.03em; line-height: 1.2; }
.site-content h2 span[style*="font-style:italic"] { font-style: normal !important; font-weight: inherit !important; color: var(--tech-blue) !important; }
.site-content .ds-section { padding: 72px 48px !important; }
.site-content .ds-section:not([style*="max-width"]) { padding-inline: max(48px, calc((100vw - 1280px) / 2)) !important; }
.site-content .ds-hero { padding-block: 88px 72px !important; background: linear-gradient(120deg, #fffefa, #f7faff) !important; }
.site-content .ds-hero h1 { font-size: clamp(40px, 4.6vw, 64px) !important; max-width: 1000px; }
.site-content .ds-hero p { font-size: 18px !important; line-height: 1.75 !important; color: #64738c !important; }
.site-content .ds-hero > [aria-hidden=true] { display: none; }
.site-content .ds-hero > div > div[style*="inline-flex"] { background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--tech-blue) !important; font-size: 11px !important; letter-spacing: 1.2px !important; font-weight: 600 !important; margin-bottom: 24px !important; }
.site-content .ds-hero > div > div[style*="inline-flex"] > div { display: none; }
.site-content a[style*="background-color:#06142E"],
.site-content a[style*="background-color:#0757FF"],
.site-content button[type=submit] { background: var(--tech-blue) !important; color: white !important; border-radius: 10px !important; text-transform: none !important; letter-spacing: 0 !important; min-height: 48px; }
.site-content a[style*="background-color:#0757FF"]:hover,
.site-content a[style*="background-color:#06142E"]:hover,
.site-content button[type=submit]:hover { background: var(--tech-blue-dk) !important; }
.site-content [style*="grid-template-columns"] > * { min-width: 0; }
.site-content .dl-card-lift, .site-content .dl-project-card { border-radius: 16px !important; box-shadow: 0 8px 28px #06142e06 !important; }
.site-content .ds-section [style*="border-radius:8px"][style*="border:1px"],
.site-content .ds-section [style*="border-radius:12px"][style*="border:1px"] { border-radius: 14px !important; }
.site-content input:not([type=checkbox]), .site-content select, .site-content textarea { border-radius: 9px !important; background: #fff !important; border-color: #d9e0eb !important; min-height: 48px; font-size: 16px !important; }
.site-content textarea { line-height: 1.6; }
.site-content .ds-dark-section { width: min(1280px, calc(100% - 96px)); margin: 32px auto 64px; padding: 52px !important; border-radius: 18px; background: linear-gradient(115deg,#06142e,#112945) !important; }
.site-content .ds-dark-section p, .site-content .ds-dark-section > div[style*="color:"] { color: #bbcbe0 !important; }
.site-content .ds-dark-section a[style*="background-color"] { background: white !important; color: var(--navy) !important; }
.site-content .blog-content { font-family: var(--font-sans); }
.site-content .blog-content h2 { margin-top: 2.5rem; }
.site-content details > summary { min-height: 48px; }
.site-content details[open] > summary { color: var(--tech-blue); }
.site-content .website-offer { background: #f5f7fb; padding: 64px 48px; margin-block: 16px 56px; }
.site-content .website-offer-inner { max-width: 1280px; }
.site-content .website-offer h2 { font-size: 34px; }
.site-content .website-offer-industries article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  background: white;
  text-align: center;
}
.site-content .website-offer-industries article h3 { margin: 0 0 12px; }
.site-content .website-offer-industries article p { max-width: 30ch; margin: 0; }
.site-content .website-offer-link { border-radius: 10px; background: var(--tech-blue); color: white; }
.site-footer { padding: 64px 0 28px; background: #fffefa; border-top: 1px solid var(--slate-200); margin-top: 64px; }
.site-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 40px; }
.site-footer-intro > p { font-size: 14px; color: #64738c; line-height: 1.8; margin: 18px 0; max-width: 285px; }
.site-email { color: var(--tech-blue); font-size: 14px; }
.site-footer nav h2 { font-size: 12px; font-weight: 650; color: var(--navy); margin-bottom: 18px; }
.site-footer-grid nav a { display: block; width: fit-content; font-size: 12px; color: #64738c; line-height: 1.6; padding-block: 6px; }
.site-footer a:hover { color: var(--tech-blue); }
.site-footer-info { margin-top: 40px; padding-block: 26px; border-block: 1px solid var(--slate-200); display: flex; flex-wrap: wrap; gap: 26px 60px; font-size: 11px; line-height: 1.8; color: #64738c; }
.site-footer-info > a { margin-left: auto; }
.site-footer-bottom { padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 11px; color: #64738c; }
.site-footer-bottom nav { display: flex; gap: 24px; }
.site-footer-bottom small { font-size: inherit; }
@media(max-width:1100px) {
 .site-shell { width: calc(100% - 64px); }
 .site-desktop, .site-nav-cta { display: none; }
 .site-nav { min-height: 76px; }
 .site-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; gap: 6px; background: none; color: var(--navy); border: 0; cursor: pointer; }
 .site-toggle span { width: 22px; height: 2px; background: currentColor; transition: transform .2s; }
 .site-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
 .site-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
 .site-mobile { max-height: calc(100dvh - 76px); overflow-y: auto; padding-block: 6px 24px; }
 .site-mobile > a:not(.site-button), .site-mobile summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding-block: 12px; border-bottom: 1px solid var(--slate-200); list-style: none; font-size: 14px; cursor: pointer; }
 .site-mobile details div { padding: 8px 0 8px 16px; }
 .site-mobile details a { display: block; font-size: 13px; min-height: 44px; padding-block: 12px; }
 .site-mobile .site-button { margin-top: 20px; display: flex; }
 .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media(max-width:720px) {
 .site-shell { width: calc(100% - 48px); }
 .site-brand { font-size: 15px; letter-spacing: .5px; }
 .site-brand svg { width: 30px; height: 30px; }
 .site-content .ds-section, .site-content .ds-section:not([style*="max-width"]) { padding: 44px 24px !important; }
 .site-content .ds-hero { padding-top: 48px !important; padding-bottom: 44px !important; }
 .site-content .ds-hero h1 { font-size: clamp(32px,8.5vw,42px) !important; line-height: 1.12 !important; letter-spacing: -.035em !important; overflow-wrap: break-word !important; hyphens: auto !important; }
 .site-content .ds-hero p { font-size: 16px !important; }
 .site-content .ds-section h2 { font-size: 28px !important; line-height: 1.2 !important; }
 .site-content .ds-section h3 { line-height: 1.3 !important; }
 .site-content .ds-section [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; gap: 24px !important; }
 .site-content .ds-section [style*="padding:52px"], .site-content .ds-section [style*="padding:44px"] { padding: 24px !important; }
 .site-content .ds-dark-section { width: calc(100% - 48px); margin-block: 16px 40px; padding: 32px 24px !important; }
 .site-content .ds-section a[style*="background-color"] { max-width: 100%; white-space: normal; text-align: center; }
 .site-content .website-offer { padding: 40px 24px; margin-block: 8px 32px; }
 .site-content .website-offer h2 { font-size: 28px; }
 .site-footer { margin-top: 40px; padding-top: 40px; }
 .site-footer-grid { gap: 30px 22px; }
 .site-footer-intro { grid-column: 1/-1; }
 .site-footer-grid nav a { min-height: 40px; padding-block: 9px; font-size: 12px; overflow-wrap: anywhere; }
 .site-footer-info { margin-top: 26px; gap: 16px; flex-direction: column; }
 .site-footer-info > a { margin: 0; }
 .site-footer-bottom { flex-direction: column; }
 .site-footer-bottom a { padding-block: 10px; }
}
@media(max-width:360px) {
 .site-shell { width: calc(100% - 32px); }
 .site-brand { font-size: 14px; }
 .site-content .ds-section, .site-content .ds-section:not([style*="max-width"]) { padding-inline: 16px !important; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Page-specific finishing touches within the same design system. */
.ds-profile-card { background: var(--navy); color: white; border-radius: 18px; padding: 40px; }
.ds-profile-mark { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 20px; background: var(--tech-blue); font-size: 26px; font-weight: 700; margin-bottom: 32px; }
.ds-profile-card .ds-kicker { color: #a9bcd7; font-size: 10px; letter-spacing: 1px; margin-bottom: 14px; }
.ds-profile-card h2 { font-size: 30px; margin-bottom: 16px; }
.ds-profile-card > p:not(.ds-kicker) { color: #c0cde0; font-size: 15px; line-height: 1.8; }
.ds-profile-card ul { list-style: none; padding: 24px 0; margin-block: 24px; border-block: 1px solid #ffffff24; font-size: 13px; line-height: 2.4; color: #dbe5f4; }
.ds-profile-card li::before { content: '✓'; color: #7da9ff; margin-right: 10px; }
.ds-profile-card > a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-size: 14px; }
.site-content .dl-btn-primary { background: var(--tech-blue); border-color: var(--tech-blue); color: white; border-radius: 10px; text-transform: none; }
.site-content .dl-btn-primary:hover { background: var(--tech-blue-dk); color: white; }
.site-content .ds-dark-section h2 span { color: #8bb5ff !important; }
.site-content .ds-section[style*="background-color:#E5E9EF"] { background: #f4f6fa !important; }
@media(max-width:720px) {
 .site-content .ds-contact-step { flex-direction: row !important; align-items: flex-start !important; gap: 14px !important; }
 .site-content .ds-contact-step > div:first-child { width: 34px !important; min-width: 34px !important; max-width: 34px !important; flex: 0 0 34px !important; color: white !important; }
 .ds-profile-card { padding: 28px; }
}
.site-content [style*="font-family:monospace"]:not(pre):not(code) { font-family: var(--font-sans) !important; }
.site-content [style*="background-color:#06142E"] [style*="color:#64738C"] { color: #b8c8df !important; }
.site-content .ds-contact-step > div:first-child { color: white !important; }
/* Keep both numeric and textual portfolio metrics inside their cards. */
.site-content .dl-portfolio-hero-stats > div { min-width: 0; padding: 18px; }
.site-content .dl-portfolio-hero-stats strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
.site-content .dl-portfolio-hero-stats > div:last-child strong { font-size: 18px; letter-spacing: -.02em; }
@media(max-width:380px) {
 .site-content .dl-portfolio-hero-stats > div { padding: 14px; }
 .site-content .dl-portfolio-hero-stats > div:last-child strong { font-size: 16px; }
}
/* Readable labels and robust wrapping inside cards, including narrow displays. */
.site-content .ds-usecase { flex-direction: column; align-items: flex-start; gap: 18px !important; }
.site-content .ds-usecase-tag { color: white !important; padding: 8px 12px !important; height: auto !important; min-height: 34px; font-size: 12px !important; line-height: 1.5; overflow-wrap: anywhere; max-width: 100%; }
.site-content .ds-usecase > div:last-child { min-width: 0; width: 100%; }
.site-content .dl-svc-card h3, .site-content .ds-project-meta, .site-content li { overflow-wrap: anywhere; }
.site-content li > * { min-width: 0; }
.site-content [style*="min-width:80px"] { min-width: 96px !important; flex-shrink: 0; }
.site-content .ds-process-title > div:first-child { flex-shrink: 0; }
.site-content .ds-process-title > div:last-child { min-width: 0; }
.modern-home .mh-insight { right: 0; }
@media(max-width:720px) {
 .site-content .ds-project-meta { flex-wrap: wrap; }
 .site-content .ds-process-title { flex-direction: column; gap: 12px !important; }
 .site-content .ds-process-title > div:first-child { font-size: 52px !important; }
 .site-content .ds-section li, .site-content .ds-section p { overflow-wrap: anywhere; }
 .site-content .dl-svc-card { padding: 24px; }
}