/* ==========================================================================
   CSS Variables (Design System Tokens)
   ========================================================================== */
:root {
  --color-primary: #0b3d6e;
  --color-primary-dark: #082c50;
  --color-action: #d35400;
  --color-action-dark: #a84300;
  --color-text-main: #222222;
  --color-text-muted: #555555;
  --color-bg-main: #fdfdfd;
  --color-bg-alt: #f4f6f8;
  --color-border: #dddddd;

  --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max-width: 1200px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --border-radius: 4px;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
body {
  font-family: var(--font-stack);
  color: var(--color-text-main);
  background-color: var(--color-bg-main);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; border-radius: var(--border-radius); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--color-action); outline-offset: 2px; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3 { line-height: 1.2; margin-bottom: var(--spacing-sm); color: var(--color-primary); }
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
p { margin-bottom: var(--spacing-sm); }
.disclaimer { font-size: 0.875rem; color: var(--color-text-muted); }

/* ==========================================================================
   Layout & Header
   ========================================================================== */
.site-header {
  background-color: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-sm) 0;
}
.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
}
.brand-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}
.brand-logo:hover { text-decoration: none; }
.primary-nav { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; justify-content: center; }
.primary-nav a { font-weight: 600; color: var(--color-text-main); }
.primary-nav a:hover { color: var(--color-action); text-decoration: none; }

/* ==========================================================================
   Hero Section (Split Layout)
   ========================================================================== */
.split-hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.hero-text { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-lead { font-size: 1.125rem; color: var(--color-text-muted); margin-bottom: var(--spacing-md); }
.hero-visual { flex: 1; }
.hero-visual img { width: 100%; object-fit: cover; max-height: 400px; }

/* CTAs */
.cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  padding: 0 1.5rem;
  border-radius: var(--border-radius);
  min-height: 48px;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: center;
}
.cta-button.primary {
  background-color: var(--color-action);
  color: #fff;
  border: 2px solid var(--color-action);
}
.cta-button.primary:hover { background-color: var(--color-action-dark); border-color: var(--color-action-dark); color: #fff; text-decoration: none; }
.cta-button.outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.cta-button.outline:hover { background-color: var(--color-bg-alt); text-decoration: none; }

/* ==========================================================================
   Trust Bar & Services
   ========================================================================== */
.trust-bar {
  background-color: var(--color-primary);
  color: #fff;
  padding: var(--spacing-sm);
}
.trust-bar ul {
  max-width: var(--max-width);
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  text-align: center;
}
.trust-bar li { font-weight: 600; }

.services-overview {
  max-width: var(--max-width);
  margin: var(--spacing-lg) auto;
  padding: 0 var(--spacing-sm);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}
.service-card {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card img { border-radius: 0; width: 100%; height: 250px; object-fit: cover; }
.card-content { padding: var(--spacing-sm); flex: 1; display: flex; flex-direction: column; }
.card-link { margin-top: auto; font-weight: 600; color: var(--color-action); }

/* ==========================================================================
   Forms
   ========================================================================== */
.contact-section { max-width: 600px; margin: var(--spacing-lg) auto; padding: 0 var(--spacing-sm); }
form { display: flex; flex-direction: column; gap: var(--spacing-sm); }
label { font-weight: 700; color: var(--color-primary); margin-bottom: -0.25rem; }
input, select, textarea {
  width: 100%; padding: 0.75rem; border: 1px solid var(--color-border);
  border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; min-height: 48px;
}

/* ==========================================================================
   Desktop Queries
   ========================================================================== */
@media (min-width: 768px) {
  h1 { font-size: 2.5rem; }
  .nav-container { flex-direction: row; justify-content: space-between; }
  .split-hero { flex-direction: row; align-items: center; }
  .cta-group { flex-direction: row; }
  .trust-bar ul { flex-direction: row; justify-content: space-around; }
  .services-overview { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}.brand-logo img {
  display: block;
  margin: 0;
}

/* Keep the expanded service name readable in navigation, CTAs, and forms. */
.nav-container { flex-wrap: wrap; }
.primary-nav a { max-width: 32ch; text-align: center; }
.hero-text, .hero-visual { min-width: 0; }
.cta-button { padding-block: 0.75rem; }
select { min-width: 0; max-width: 100%; }
.screen-service-photo img {
  width: min(100%, 301px);
  height: auto;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
}
.screen-service-help {
  display: none;
  font-size: 1rem;
  color: var(--color-text-muted);
}
@media (max-width: 600px) {
  .screen-service-help { display: block; }
}