:root {
  /* Brand core */
  --color-navy: #0A1B2E; /* alpine midnight */
  --color-blue: #2F89C5; /* alpine blue */
  --color-accent: #1D90CF; /* glacier blue */
  --color-pine: #2E7D5B; /* pine green */

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-gray-50: #F6FAFC; /* icy tint */
  --color-gray-100: #ECF4F7; /* light snow */
  --color-gray-300: #CCDAE3; /* cool gray */
  --color-gray-600: #445463; /* slate */
  --color-gray-800: #2B3742; /* deep slate */
  --color-gray-900: #16212A; /* near-navy */

  /* Utility */
  --color-snow: #FFFFFF;
  --color-success: #2E6F4E; /* pine success */
  --color-warning: #D69E2E;
  --color-error: #C53030;

  /* Derived */
  --shadow-sm: 0 4px 14px rgba(10, 27, 46, 0.08);
  --shadow: 0 12px 34px rgba(10, 27, 46, 0.12);
  --shadow-lg: 0 22px 60px rgba(10, 27, 46, 0.16);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
}

/* Base typography & rhythm */
html { scroll-behavior: smooth; }
body {
  color: var(--color-gray-900);
  background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-gray-100) 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}

h1, h2, h3, .navbar-brand { letter-spacing: -0.015em; }

/* Navbar */
.navbar { background: var(--color-white); box-shadow: var(--shadow-sm); }
.navbar-brand { font-weight: 800; color: var(--color-navy); }
.nav-link { color: var(--color-gray-600); font-weight: 600; position: relative; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--color-accent); transition: width .2s ease; }
.nav-link:hover::after, .nav-link:focus::after { width: 100%; }
.nav-link:hover, .nav-link:focus { color: var(--color-accent); }

/* Buttons */
.btn { border-radius: 999px; }
.btn-brand { background: var(--color-blue); color: var(--color-white); border: none; box-shadow: var(--shadow-sm); transition: transform .06s ease; }
.btn-brand:hover, .btn-brand:focus { background: var(--color-pine); color: var(--color-white); transform: translateY(-1px); }
.btn-brand:active { transform: translateY(0); }
.btn-outline-secondary { border-color: var(--color-gray-300); color: var(--color-gray-800); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--color-gray-100); color: var(--color-gray-900); }

/* Cards */
.card { border: 1px solid var(--color-gray-100); box-shadow: var(--shadow-sm); border-radius: var(--radius); }
.card .card-body { padding: 1.25rem 1.25rem; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Page helpers */
.section-muted{background:var(--color-gray-50)}
.brand-kicker{letter-spacing:.25em; color:var(--color-pine);} 
.hero-img{border:1px; border-radius:.75rem}


/* Accessibility utility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:var(--color-navy);color:#fff;z-index:1050;border-radius:.25rem}


/* Header & Footer navy theme overrides */
nav.navbar { background: var(--color-navy) !important; }
.navbar .navbar-brand { color: var(--color-white) !important; }
.navbar .nav-link { color: var(--color-white) !important; }
.navbar .nav-link::after { background: var(--color-accent) !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--color-accent) !important; }
.navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.25); }
.navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

footer { background: var(--color-navy) !important; color: var(--color-white) !important; border-top: none !important; }
footer .text-muted { color: rgba(255, 255, 255, 0.75) !important; }
footer a { color: rgba(255, 255, 255, 0.9) !important; text-decoration: none; }
footer a:hover, footer a:focus { color: var(--color-accent) !important; text-decoration: underline; }


/* Ensure hero image fits within its container */
.hero-img{overflow:hidden}
.hero-img img{display:block;width:100%;height:100%;object-fit:contain}


/* Ensure profile image fits within its container */
.ph{overflow:hidden}
.ph img{display:block;max-width:100%;height:auto;margin:0 auto; border-radius:.75rem}