/* ============================================================
   J3LEgacy Technology Solutions — Main Stylesheet
   Military-professional: Deep Navy, Gold, White
   ============================================================ */

/* --- Custom palette: Navy/Gold/White military-professional --- */
:root, [data-theme="light"] {
  --color-bg:              #f5f6f8;
  --color-surface:         #ffffff;
  --color-surface-2:       #eef0f4;
  --color-surface-offset:  #e3e6ed;
  --color-divider:         #d0d4de;
  --color-border:          #c8ccd8;

  --color-text:            #0d1b2e;
  --color-text-muted:      #4a5568;
  --color-text-faint:      #9aa3b4;
  --color-text-inverse:    #ffffff;

  /* Navy primary */
  --color-primary:         #0b2545;
  --color-primary-hover:   #0d2f5a;
  --color-primary-active:  #061628;
  --color-primary-light:   #1a3a6b;

  /* Gold accent */
  --color-gold:            #c9952a;
  --color-gold-hover:      #b5841f;
  --color-gold-light:      #f5e6c0;
  --color-gold-bright:     #e8a82e;

  /* Hero navy for sections */
  --color-navy-hero:       #061525;
  --color-navy-mid:        #0d2545;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 3px rgba(11,37,69,0.08);
  --shadow-md: 0 4px 16px rgba(11,37,69,0.12);
  --shadow-lg: 0 12px 40px rgba(11,37,69,0.18);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  --font-display: 'Clash Display', 'Playfair Display', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;

  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.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;
  --space-32: 8rem;
}

[data-theme="dark"] {
  --color-bg:             #070e17;
  --color-surface:        #0d1b2e;
  --color-surface-2:      #122038;
  --color-surface-offset: #192840;
  --color-divider:        #1e3050;
  --color-border:         #243860;
  --color-text:           #e8ecf2;
  --color-text-muted:     #8fa0bb;
  --color-text-faint:     #4a5f7a;
  --color-text-inverse:   #0d1b2e;
  --color-primary:        #4a7fc1;
  --color-primary-hover:  #6494d0;
  --color-primary-active: #2d5a96;
  --color-primary-light:  #1e3a6a;
  --color-gold:           #e8a82e;
  --color-gold-hover:     #f0ba50;
  --color-gold-light:     #3a2e12;
  --color-gold-bright:    #f0c050;
  --color-navy-hero:      #040b14;
  --color-navy-mid:       #0a1a2e;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #070e17; --color-surface: #0d1b2e; --color-surface-2: #122038;
    --color-surface-offset: #192840; --color-divider: #1e3050; --color-border: #243860;
    --color-text: #e8ecf2; --color-text-muted: #8fa0bb; --color-text-faint: #4a5f7a;
    --color-text-inverse: #0d1b2e; --color-primary: #4a7fc1; --color-primary-hover: #6494d0;
    --color-primary-active: #2d5a96; --color-gold: #e8a82e; --color-gold-hover: #f0ba50;
    --color-gold-light: #3a2e12; --color-navy-hero: #040b14; --color-navy-mid: #0a1a2e;
  }
}

/* --- Base Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: none; text-size-adjust: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
}
body {
  min-height: 100dvh; line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); }
p, li, figcaption { text-wrap: pretty; max-width: 68ch; }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: rgba(201,149,42,0.25); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
a, button, [role="button"] {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive), opacity var(--transition-interactive);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* --- Layout Utilities --- */
.container { width: min(var(--content-wide), 100% - var(--space-8)); margin-inline: auto; }
.container--narrow { width: min(var(--content-narrow), 100% - var(--space-8)); margin-inline: auto; }
.container--default { width: min(var(--content-default), 100% - var(--space-8)); margin-inline: auto; }
.section-pad { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.section-pad-sm { padding-block: clamp(var(--space-10), 5vw, var(--space-20)); }

/* --- Header / Nav --- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: oklch(from var(--color-primary) l c h / 0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201,149,42,0.3);
  box-shadow: 0 2px 20px rgba(0,0,0,0.25);
  transition: box-shadow 0.3s ease;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-6);
}
.nav-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-logo-name {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
  color: #ffffff; letter-spacing: 0.06em; text-transform: uppercase;
}
.nav-logo-sub { font-size: var(--text-xs); color: var(--color-gold); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; }
.nav-links a {
  font-size: var(--text-sm); font-weight: 500; color: rgba(255,255,255,0.85);
  text-decoration: none; letter-spacing: 0.03em;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--color-gold); border-bottom-color: var(--color-gold); }
.nav-links a.active { color: var(--color-gold); border-bottom-color: var(--color-gold); }
.nav-cta {
  background: var(--color-gold); color: var(--color-primary) !important;
  padding: var(--space-2) var(--space-5) !important;
  border-radius: var(--radius-md); font-weight: 700 !important;
  border-bottom: none !important; white-space: nowrap;
}
.nav-cta:hover { background: var(--color-gold-hover) !important; }
.nav-controls { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle {
  color: rgba(255,255,255,0.7); padding: var(--space-2); border-radius: var(--radius-md);
  line-height: 1;
}
.theme-toggle:hover { color: var(--color-gold); background: rgba(255,255,255,0.1); }
.nav-mobile-toggle {
  display: none; color: white; padding: var(--space-2);
  border-radius: var(--radius-md); flex-direction: column; gap: 5px; width: 36px;
}
.nav-mobile-toggle span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile-menu {
  display: none; flex-direction: column; gap: 0;
  background: var(--color-primary); border-top: 1px solid rgba(201,149,42,0.3);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 500;
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: var(--text-base); letter-spacing: 0.02em;
}
.nav-mobile-menu a:hover { color: var(--color-gold); background: rgba(255,255,255,0.06); }
.nav-mobile-menu .mobile-cta { color: var(--color-gold) !important; font-weight: 700; }
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
}

/* --- Veteran Badge --- */
.veteran-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(201,149,42,0.15); border: 1px solid rgba(201,149,42,0.4);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-gold);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.veteran-badge svg { flex-shrink: 0; }

/* --- Hero Section --- */
.hero {
  position: relative; overflow: hidden;
  background: var(--color-navy-hero);
  min-height: 92vh; display: flex; align-items: center;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(11,37,69,0.7) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(201,149,42,0.08) 0%, transparent 60%);
}
.hero-bg-image {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.18;
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(201,149,42,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,149,42,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.hero-content { position: relative; z-index: 2; padding-block: clamp(var(--space-24), 12vw, var(--space-32)); }
.hero-eyebrow { margin-bottom: var(--space-6); }
.hero-headline {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700;
  color: #ffffff; line-height: 1.05; margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}
.hero-headline .gold { color: var(--color-gold); }
.hero-subtitle {
  font-size: var(--text-lg); color: rgba(255,255,255,0.75); margin-bottom: var(--space-10);
  max-width: 52ch; line-height: 1.6; font-weight: 400;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-12);
  padding-top: var(--space-10); border-top: 1px solid rgba(255,255,255,0.1);
}
.trust-item {
  display: flex; align-items: center; gap: var(--space-2);
  color: rgba(255,255,255,0.65); font-size: var(--text-sm);
}
.trust-item svg { color: var(--color-gold); flex-shrink: 0; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-7); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  letter-spacing: 0.02em; white-space: nowrap; cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary { background: var(--color-gold); color: var(--color-primary); border-color: var(--color-gold); }
.btn-primary:hover { background: var(--color-gold-hover); border-color: var(--color-gold-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,149,42,0.35); }
.btn-outline { background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.4); }
.btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold); }
.btn-navy { background: var(--color-primary); color: #ffffff; border-color: var(--color-primary); }
.btn-navy:hover { background: var(--color-primary-hover); }
.btn-lg { padding: var(--space-4) var(--space-10); font-size: var(--text-base); }

/* --- Section Labels --- */
.section-label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4);
}
.section-label::before { content: ''; display: block; width: 24px; height: 2px; background: var(--color-gold); }
.section-title { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-5); line-height: 1.1; }
.section-title-white { color: #ffffff; }
.section-desc { font-size: var(--text-base); color: var(--color-text-muted); max-width: 55ch; line-height: 1.7; }
.section-desc-white { color: rgba(255,255,255,0.7); }
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }

/* --- Why Us / Values Strip --- */
.values-strip { background: var(--color-navy-mid); border-block: 1px solid rgba(201,149,42,0.2); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-8); }
.value-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.value-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: rgba(201,149,42,0.12); border: 1px solid rgba(201,149,42,0.25); display: flex; align-items: center; justify-content: center; color: var(--color-gold); }
.value-title { font-size: var(--text-base); font-weight: 700; color: #ffffff; }
.value-desc { font-size: var(--text-sm); color: rgba(255,255,255,0.6); line-height: 1.6; }

/* --- Origin Story Section --- */
.story-section { background: var(--color-bg); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-10), 5vw, var(--space-20)); align-items: center; }
.story-quote {
  position: relative; padding: var(--space-8);
  background: var(--color-navy-hero); border-radius: var(--radius-xl);
  border-left: 4px solid var(--color-gold); box-shadow: var(--shadow-lg);
}
.story-quote::before { content: '\201C'; font-family: var(--font-display); font-size: 6rem; color: rgba(201,149,42,0.2); position: absolute; top: -1rem; left: var(--space-6); line-height: 1; }
.story-quote-text { font-size: var(--text-lg); color: rgba(255,255,255,0.9); line-height: 1.7; font-style: italic; position: relative; z-index: 1; }
.story-quote-attr { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-gold); font-weight: 600; }
@media (max-width: 768px) {
  .story-grid { grid-template-columns: 1fr; }
}

/* --- Services Grid --- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.service-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-8);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--color-gold); }
.service-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); background: rgba(11,37,69,0.08); display: flex; align-items: center; justify-content: center; color: var(--color-primary); margin-bottom: var(--space-5); }
[data-theme="dark"] .service-icon { background: rgba(74,127,193,0.15); color: var(--color-primary); }
.service-name { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); font-family: var(--font-display); }
.service-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--space-5); }
.service-price { font-size: var(--text-sm); font-weight: 700; color: var(--color-gold); }

/* --- Pricing Section --- */
.pricing-section { background: var(--color-navy-hero); }
.pricing-table { width: 100%; border-collapse: collapse; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.pricing-table thead tr { background: var(--color-gold); }
.pricing-table th { padding: var(--space-4) var(--space-6); text-align: left; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); letter-spacing: 0.04em; }
.pricing-table tbody tr { background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.07); }
.pricing-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.pricing-table tbody tr:hover { background: rgba(201,149,42,0.07); }
.pricing-table td { padding: var(--space-4) var(--space-6); font-size: var(--text-sm); color: rgba(255,255,255,0.85); }
.pricing-table td:last-child { font-weight: 700; color: var(--color-gold); white-space: nowrap; }
.pricing-note { margin-top: var(--space-6); font-size: var(--text-sm); color: rgba(255,255,255,0.55); text-align: center; }
.pricing-note strong { color: var(--color-gold); }

/* --- Membership Card --- */
.membership-section { background: var(--color-surface-2); }
.membership-card {
  background: var(--color-primary); color: white;
  border-radius: var(--radius-xl); padding: clamp(var(--space-10), 6vw, var(--space-16));
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(201,149,42,0.3);
  position: relative; overflow: hidden;
}
.membership-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 90% 10%, rgba(201,149,42,0.15) 0%, transparent 60%);
}
.membership-card > * { position: relative; z-index: 1; }
.membership-price { margin: var(--space-4) 0 var(--space-6); }
.membership-price .price-amount { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-gold); }
.membership-price .price-per { font-size: var(--text-sm); color: rgba(255,255,255,0.6); margin-left: var(--space-2); }
.membership-features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.membership-features li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: rgba(255,255,255,0.85); }
.membership-features li svg { color: var(--color-gold); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 768px) {
  .membership-card { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* --- Testimonials --- */
.testimonials-section { background: var(--color-bg); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.testimonial-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); }
.testimonial-stars { display: flex; gap: var(--space-1); color: var(--color-gold); margin-bottom: var(--space-4); }
.testimonial-text { font-size: var(--text-base); color: var(--color-text); line-height: 1.7; font-style: italic; margin-bottom: var(--space-5); }
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-avatar { width: 42px; height: 42px; border-radius: var(--radius-full); background: var(--color-primary); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; }
.testimonial-name { font-weight: 700; font-size: var(--text-sm); color: var(--color-text); }
.testimonial-location { font-size: var(--text-xs); color: var(--color-text-muted); }

/* --- CTA Banner --- */
.cta-banner { background: var(--color-gold); padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.cta-banner-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); }
.cta-banner-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-2); font-family: var(--font-display); }
.cta-banner-sub { font-size: var(--text-base); color: rgba(11,37,69,0.75); }
.cta-banner .btn-navy { font-size: var(--text-base); padding: var(--space-4) var(--space-10); }

/* --- About Page --- */
.about-hero { background: var(--color-navy-hero); padding-block: clamp(var(--space-20), 10vw, var(--space-32)); }
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(var(--space-10), 5vw, var(--space-20)); align-items: start; }
.about-photo-frame { border-radius: var(--radius-xl); overflow: hidden; position: relative; }
.about-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.about-photo-placeholder {
  aspect-ratio: 3/4; background: var(--color-navy-mid);
  border: 2px solid rgba(201,149,42,0.3); border-radius: var(--radius-xl);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  color: rgba(255,255,255,0.4); font-size: var(--text-sm); text-align: center; padding: var(--space-8);
}
.about-photo-placeholder svg { color: var(--color-gold); opacity: 0.5; }
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }

/* --- Contact Page --- */
.contact-section { background: var(--color-bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(var(--space-10), 5vw, var(--space-16)); align-items: start; }
.contact-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-10); }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.form-input, .form-select, .form-textarea {
  padding: var(--space-3) var(--space-4); background: var(--color-bg);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-base); color: var(--color-text); width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201,149,42,0.15); outline: none; }
.form-textarea { min-height: 140px; resize: vertical; }
.contact-info-item { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.contact-info-icon { width: 44px; height: 44px; background: rgba(11,37,69,0.08); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; }
[data-theme="dark"] .contact-info-icon { background: rgba(74,127,193,0.15); color: var(--color-primary); }
.contact-info-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.contact-info-value { font-size: var(--text-base); color: var(--color-text); font-weight: 500; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }

/* --- Commitment badges --- */
.commitment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.commitment-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.commitment-icon { color: var(--color-gold); flex-shrink: 0; margin-top: 2px; }
.commitment-title { font-size: var(--text-base); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-1); }
.commitment-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }

/* --- Footer --- */
.site-footer { background: var(--color-navy-hero); border-top: 1px solid rgba(201,149,42,0.2); }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-12); padding-block: clamp(var(--space-12), 5vw, var(--space-20)); }
.footer-brand-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: #ffffff; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-2); }
.footer-brand-sub { font-size: var(--text-xs); color: var(--color-gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer-tagline { font-size: var(--text-sm); color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 32ch; }
.footer-heading { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-5); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a { font-size: var(--text-sm); color: rgba(255,255,255,0.55); text-decoration: none; }
.footer-links a:hover { color: var(--color-gold); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid rgba(255,255,255,0.08); font-size: var(--text-xs); color: rgba(255,255,255,0.35); }
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; }
.footer-bottom a:hover { color: var(--color-gold); }
.footer-veteran-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-gold); }
@media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr; gap: var(--space-8); } }

/* --- Service page specifics --- */
.service-category { margin-bottom: var(--space-16); }
.service-category-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-gold); margin-bottom: var(--space-8); font-family: var(--font-display); }
.service-full-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.service-full-card { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; gap: var(--space-5); align-items: flex-start; }
.service-full-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-md); }
.service-full-icon { width: 44px; height: 44px; min-width: 44px; border-radius: var(--radius-md); background: rgba(11,37,69,0.07); display: flex; align-items: center; justify-content: center; color: var(--color-primary); }
[data-theme="dark"] .service-full-icon { background: rgba(74,127,193,0.12); }
.service-full-name { font-size: var(--text-base); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-1); }
.service-full-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-2); }
.service-full-price { font-size: var(--text-sm); font-weight: 700; color: var(--color-gold); }

/* --- Network health check highlight --- */
.network-highlight {
  background: var(--color-primary); border-radius: var(--radius-xl);
  padding: clamp(var(--space-10), 5vw, var(--space-16));
  border: 1px solid rgba(201,149,42,0.3); margin-top: var(--space-16);
  position: relative; overflow: hidden;
}
.network-highlight::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 90% 50%, rgba(201,149,42,0.1) 0%, transparent 70%); }
.network-highlight > * { position: relative; z-index: 1; }
.network-highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; }
@media (max-width: 768px) { .network-highlight-grid { grid-template-columns: 1fr; } }
.network-includes { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.network-includes li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: rgba(255,255,255,0.85); }
.network-includes li svg { color: var(--color-gold); flex-shrink: 0; }
.network-boundaries { background: rgba(0,0,0,0.25); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); }
.network-boundaries-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-gold); margin-bottom: var(--space-3); letter-spacing: 0.05em; text-transform: uppercase; }
.network-boundaries ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.network-boundaries li { font-size: var(--text-sm); color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: var(--space-2); }
.network-boundaries li::before { content: '✓'; color: var(--color-gold); font-weight: 700; flex-shrink: 0; }

/* --- Page hero (inner pages) --- */
.page-hero { background: var(--color-navy-hero); padding-block: clamp(var(--space-16), 8vw, var(--space-24)); border-bottom: 1px solid rgba(201,149,42,0.2); }
.page-hero-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-3); }
.page-hero-title { font-size: var(--text-2xl); font-weight: 700; color: #ffffff; margin-bottom: var(--space-4); }
.page-hero-desc { font-size: var(--text-lg); color: rgba(255,255,255,0.7); max-width: 52ch; }

/* --- Scroll animations --- */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }