/*
 * V5 — Deep navy & white.
 * Intentionally restrained: white space, ink-blue text, subtle icy-blue accents.
 * Fully static, no additional libraries or build step.
 */
:root {
  --ink: #10213f;
  --ink2: #263a5d;
  --muted: #6b7b91;
  --cream: #f8fafd;
  --white: #ffffff;
  --green: #b8d6ff; /* historical design token, now ice-blue */
  --line: #dee6f0;
  --dark: #0b1831;
}
body { background: #f8fafd; color: var(--ink); }
::selection { background: #c8e1ff; color: #10213f; }
.skip-link { background: #bbd8ff; color: #0c1b36; }
.site-header { background: #fff; border-bottom: 1px solid #edf1f7; }
.brand-dot, .footer-mark span { color: #3267a8; }
.brand-name span, .footer-text { color: #657791; }
.desktop-nav a:hover, .footer-links a:hover { color: #376ba9; }
.nav-contact { background: #10213f; color: #fff; }
.nav-contact:hover { background: #1e3d70; }
.mobile-toggle { background: #112442; }
.mobile-nav:not([hidden]) { background: #fff; }

/* The hero stays dark and elegant rather than turning the whole page navy. */
.hero-card,
.hero-card.hero-card { background: #0d1c39; color: #fff; }
.hero-eyebrow { color: #c3d2e7; }
.eyebrow-rule { background: #8dbdf5; }
.hero-serif { color: #c4dcff; }
.hero-description { color: #c0cce0; }
.hero-footer, .hero-footer-line { color: #8ea5c5; }
.hero-footer-line { background: #6880a3; }
.hero-photo-frame { background: #192d52; }
.btn-primary { background: #c5dcff; color: #0e2343; }
.btn-primary:hover { background: #e4f0ff; }
.btn-text { color: #fff; border-color: #4a6288; }
.photo-index { color: #b8cde8; }
.code-fragment { color: #c1d8ff; opacity: .075; }

/* Portfolio content and project cards */
.trust-section { border-color: #e1e8f1; }
.trust-title { color: #718099; }
.trust-logos { color: #64738a; }
.section-topline { border-color: #d7e1ec; }
.section-number { color: #20385c; }
.section-topline-right { color: #8795aa; }
.section-kicker { color: #315f9d; }
.muted-heading { color: #90a0b6; }
.accent-period { color: #487cb8; }
.section-aside, .services-head>p, .process-header>p { color: #6b7c94; }
.filter-tab { color: #8795a8; }
.filter-tab.active { color: #0d1d39; border-color: #15315c; }
.filter-tab:hover { color: #315f9d; }
.filter-tab span, .filters-helper { color: #8190a5; }
.project-cover-button { background: #e4ebf4; }
.project-cover-button:focus-visible { outline-color: #578fd0; }
.project-cover-button .cover-arrow { background: #fff; color: #173151; }
.project-category { color: #647995; }
.project-credit { color: #728097; }
.project-credit strong { color: #344c6c; }
.project-tech span { background: #eaf0f8; color: #4d6584; }
.more-btn { border-color: #b4c3d5; color: #213958; }
.more-btn:hover { background: #e8f0fa; }
.portfolio-note { color: #8796ab; }

/* A pale-blue statement acts as the only bright mid-page break. */
.statement-section { background: #eaf2fd; }
.statement-mark { color: #8bacd4; }
.statement-inner p { color: #102343; }
.statement-inner p span { color: #6482a9; }
.statement-small { color: #55749d; }

/* Services */
.services-grid { border-color: #dce6f0; }
.service-card { background: #fff; border-color: #dce6f0; }
.service-card:hover { background: #f5f9fe; }
.service-index, .service-card p { color: #748298; }
.service-icon, .service-card-arrow { color: #396da9; }
.service-tags span { border-color: #dce6f1; color: #5a6c83; }

/* A dedicated navy biography, balanced by generously spaced white areas. */
.about-section { background: #112441; color: #f7faff; }
.about-topline { border-color: #364e70; }
.about-topline .section-number { color: #c3d2e7; }
.about-left .section-kicker { color: #a7cbf9; }
.about-left h2 span, .about-stats strong span, .about-link { color: #c0d9ff; }
.about-right>p { color: #bdcbe0; }
.about-lead { color: #fff !important; }
.about-stats { border-color: #3b5374; }
.about-stats>div>span { color: #bacbe2; }
.about-skills span { border-color: #486081; color: #d0dded; }
.about-link { border-color: #698ab5; }
.process-steps article { border-color: #19385f; }
.step-num { color: #396fae; }
.step-num span { color: #7894b7; }
.process-steps p { color: #73839a; }

/* One dark call-to-action section. Keep form fields distinct and high-contrast. */
.contact-shell { background: #0e2140; }
.contact-top .section-number { color: #b0c1d7; }
.contact-availability { color: #c2d9f8; }
.contact-availability .live-pulse { background: #8bbaf0; box-shadow: 0 0 0 4px rgba(139,186,240,.13); }
.contact-pretitle { color: #acbfd9; }
.contact-shell h2 em, .contact-spark { color: #c4dcff; }
.contact-desc { color: #c4d0e1; }
.contact-bottom { border-color: #425877; }
.contact-email { background: #c6deff; color: #112746; }
.contact-email:hover { background: #e2efff; }
.contact-location { color: #aec0d6; }
.contact-location strong { color: #fff; }
.form-heading { color: #b2c5df; }
.contact-form label { color: #e4ecf9; }
.contact-form input, .contact-form textarea { background: #182f52; border-color: #49617f; color: #fff; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #a6cdfc; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a8b9d1; }
.form-foot>span { color: #b3c3d7; }
.form-submit { background: #fff; color: #122846; }
.form-submit:hover { background: #d3e5ff; }
.footer-inner>p { color: #8896ac; }

/* Dialog content follows the same lighter palette. */
.project-dialog { background: #fff; color: #142742; }
.project-dialog::backdrop { background: rgba(5,18,40,.77); }
.dialog-meta { color: #3869a6; }
.dialog-organization { color: #667991; }
.dialog-body>p, .dialog-body ul { color: #4f627d; }
.dialog-tech span { border-color: #d6e1ee; }
.dialog-link { background: #15335b; color: #fff; }
.dialog-disclaimer { color: #8292a8 !important; }

/* Preserve WhatsApp's recognizable green icon, but quiet the surrounding pill. */
.whatsapp-float { border-color: #dce5ee; color: #142746; box-shadow: 0 9px 27px rgba(16,34,63,.12); }
.whatsapp-float:hover, .whatsapp-float:focus-visible { box-shadow: 0 13px 30px rgba(16,34,63,.17); }
.wa-copy small { color: #647994; }
@media (prefers-reduced-motion: reduce) { .code-fragment { animation: none !important; } }

/* Give each project a distinct surface while keeping the portfolio restrained. */
.projects-grid { gap: 32px; }
.project-card {
  overflow: hidden;
  padding: 10px 10px 20px;
  background: #fff;
  border: 1px solid #d9e3ef;
  border-radius: 17px;
  box-shadow: 0 10px 30px rgba(16, 33, 63, .07);
  transition: opacity .6s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.project-card:hover,
.project-card:focus-within {
  transform: translateY(-5px);
  border-color: #aec5df;
  box-shadow: 0 18px 42px rgba(16, 33, 63, .13);
}
.project-cover-button {
  aspect-ratio: 7 / 4;
  border-radius: 11px;
}
.project-card-info { padding: 20px 12px 2px; }
.project-category {
  display: inline-flex;
  padding: 6px 9px;
  background: #edf4fc;
  border: 1px solid #dce8f5;
  border-radius: 999px;
  color: #496889;
  line-height: 1.2;
}
.project-tech span { border: 1px solid #dce6f1; }

@media (max-width: 700px) {
  .projects-grid { gap: 25px; }
  .project-card { padding: 8px 8px 18px; border-radius: 14px; }
  .project-card-info { padding: 17px 8px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card { transition: border-color .01ms, box-shadow .01ms; }
  .project-card:hover, .project-card:focus-within { transform: none; }
}