/* ============================================================
   PRECISION PERFORMANCE SYSTEMS — styles.css
   ============================================================
   This single file controls the visual design of every page.

   HOW TO FIND THINGS:
   Search (Ctrl+F) for any section label below to jump to it.

   TABLE OF CONTENTS
   1.  Design System (CSS Variables)
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Buttons
   6.  Navigation — Desktop
   7.  Navigation — Mobile
   8.  Hero Section
   9.  Section Scaffolding (shared section styles)
   10. Intro / Lead Text Section
   11. Service Tier Cards (homepage)
   12. "Why PPS" Differentiators Section
   13. CTA Banner
   14. Inner Page Hero (service pages & about)
   15. Content Pages (prose, credentials, service detail)
   16. Contact Form
   17. Footer
   18. Utility Classes
   19. Accessibility — Focus States
   20. Responsive — 768 px breakpoint
   21. Responsive — 1024 px breakpoint
   ============================================================ */


/* ============================================================
   1. DESIGN SYSTEM — CSS Variables
   To change the color palette or fonts site-wide, edit here.
   ============================================================ */
:root {
  /* --- Brand Colors ----------------------------------------- */
  --navy:          #0B1F3A;   /* deep navy — primary brand */
  --navy-mid:      #122944;   /* slightly lighter for hover states */
  --navy-dark:     #071526;   /* deepest navy — mobile menu bg */
  --steel:         #1D5C96;   /* steel blue — CTAs, links, accents */
  --steel-dark:    #164878;   /* steel blue hover state */
  --steel-light:   #E8F0F8;   /* very light blue tint for bg panels */
  --silver:        #C0C5CC;   /* silver — decorative / text on dark bg */
  --silver-light:  #E8EAED;   /* near-white gray — alt section bg */
  --white:         #FFFFFF;
  --charcoal:      #2A2A2A;   /* main body text */
  --mid-gray:      #5A6272;   /* secondary / caption text */
  --border:        #D1D5DB;   /* subtle dividers */
  --overlay:       rgba(11, 31, 58, 0.74); /* hero image dark overlay */

  /* --- Typography ------------------------------------------- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Font sizes — use clamp() for fluid headings where set */
  --sz-xs:    0.75rem;    /* 12px */
  --sz-sm:    0.875rem;   /* 14px */
  --sz-base:  1rem;       /* 16px */
  --sz-md:    1.125rem;   /* 18px */
  --sz-lg:    1.25rem;    /* 20px */
  --sz-xl:    1.5rem;     /* 24px */
  --sz-2xl:   1.875rem;   /* 30px */
  --sz-3xl:   2.375rem;   /* 38px */
  --sz-4xl:   3rem;       /* 48px */
  --sz-5xl:   3.75rem;    /* 60px */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  900;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.65;
  --lh-loose:  1.85;

  /* --- Spacing ---------------------------------------------- */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */
  --sp-24:  6rem;      /* 96px */
  --sp-32:  8rem;      /* 128px */

  /* --- Layout ----------------------------------------------- */
  --max-w:      1140px;   /* max content width */
  --nav-h:      72px;     /* header height — change here if needed */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow:     0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 12px 36px rgba(0,0,0,0.15);
  --transition: 200ms ease;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px; /* base for rem calculations */
}

body {
  font-family: var(--font-sans);
  font-size: var(--sz-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--steel);
  text-decoration: underline;
  transition: color var(--transition);
}

a:hover {
  color: var(--steel-dark);
}

ul, ol {
  list-style: none;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--navy);
}

h1 { font-size: clamp(var(--sz-3xl), 5vw, var(--sz-5xl)); }
h2 { font-size: clamp(var(--sz-2xl), 4vw, var(--sz-4xl)); }
h3 { font-size: clamp(var(--sz-xl), 3vw, var(--sz-3xl)); }
h4 { font-size: var(--sz-xl);  font-family: var(--font-sans); font-weight: var(--fw-semi); }
h5 { font-size: var(--sz-lg);  font-family: var(--font-sans); font-weight: var(--fw-semi); }
h6 { font-size: var(--sz-base); font-family: var(--font-sans); font-weight: var(--fw-semi); }

p {
  margin-bottom: var(--sp-4);
  line-height: var(--lh-normal);
}
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--sz-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--sp-4);
}

.eyebrow--light {
  color: var(--silver);
}

.lead {
  font-size: var(--sz-md);
  line-height: var(--lh-loose);
  color: var(--mid-gray);
}

/* Content-page body prose — used on inner pages for longer reading copy */
.prose {
  max-width: 70ch;
  margin: 0 auto;
  color: var(--charcoal);
}
.prose p,
.prose ul,
.prose ol {
  font-size: var(--sz-md);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-5);
}
.prose h3 {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-3);
}
.prose h3:first-child {
  margin-top: 0;
}
.prose ul,
.prose ol {
  padding-left: var(--sp-6);
}
.prose li + li {
  margin-top: var(--sp-2);
}
.prose strong {
  color: var(--navy);
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

.section {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}

.section--gray {
  background: var(--silver-light);
}

.section--navy {
  background: var(--navy);
  color: var(--white);
}

.section__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--sp-12);
}

.section__header h2 {
  margin-bottom: var(--sp-4);
}

.section__header .lead {
  color: var(--mid-gray);
}

/* On navy backgrounds, override text colors */
.section--navy .section__header h2,
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.section--navy .lead,
.section--navy p {
  color: var(--silver-light);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.text-center { text-align: center; }


/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: var(--sp-4) var(--sp-8);
  font-family: var(--font-sans);
  font-size: var(--sz-sm);
  font-weight: var(--fw-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  line-height: 1;
}

/* Primary button — steel blue */
.btn--primary {
  background: var(--steel);
  color: var(--white);
  border-color: var(--steel);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--steel-dark);
  border-color: var(--steel-dark);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(29, 92, 150, 0.40);
}

/* Ghost button — white outline (for use on dark backgrounds) */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.60);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255,255,255,0.10);
  border-color: var(--white);
  color: var(--white);
}

/* Outline button — navy outline (for use on white backgrounds) */
.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--navy);
  color: var(--white);
}

/* Card link arrow style */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--sz-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  color: var(--steel);
  letter-spacing: 0.04em;
  transition: gap var(--transition), color var(--transition);
}
.card-link::after {
  content: '→';
  font-size: 1em;
}
.card-link:hover,
.card-link:focus-visible {
  color: var(--steel-dark);
  gap: var(--sp-3);
}


/* ============================================================
   6. NAVIGATION — Desktop
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--navy);
  height: var(--nav-h);
  box-shadow: 0 2px 12px rgba(0,0,0,0.30);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--sp-5);
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Brand / logo area */
.nav-brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.nav-brand__name {
  font-family: var(--font-display);
  font-size: var(--sz-md);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.nav-brand__sub {
  font-size: var(--sz-xs);
  font-weight: var(--fw-medium);
  color: var(--silver);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Desktop nav links — hidden on mobile, shown at 768px+ */
.nav-links {
  display: none;
  align-items: center;
  gap: var(--sp-1);
}

.nav-links > li > a,
.nav-links > li > button {
  display: block;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-sans);
  font-size: var(--sz-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.nav-links > li > a:hover,
.nav-links > li > a:focus-visible,
.nav-links > li > button:hover,
.nav-links > li > button:focus-visible {
  color: var(--white);
  background: rgba(255,255,255,0.10);
  outline: none;
}

.nav-links > li > a.active,
.nav-links > li > a[aria-current="page"] {
  color: var(--white);
}

/* Services dropdown container */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__btn {
  display: flex !important;
  align-items: center;
  gap: var(--sp-2);
}

/* Dropdown chevron icon */
.nav-dropdown__btn svg {
  width: 10px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}

.nav-dropdown__btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Dropdown panel */
.nav-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  min-width: 270px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2) 0;
  z-index: 300;
}

.nav-dropdown.open .nav-dropdown__panel {
  display: block;
}

.nav-dropdown__panel a {
  display: block;
  padding: var(--sp-3) var(--sp-6);
  color: var(--charcoal);
  font-size: var(--sz-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  border-left: 3px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}

.nav-dropdown__panel a:hover,
.nav-dropdown__panel a:focus-visible {
  background: var(--silver-light);
  color: var(--navy);
  border-left-color: var(--steel);
  outline: none;
}

/* Hamburger button — visible mobile only */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: var(--sp-2);
  flex-shrink: 0;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 2px;
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

/* Hamburger animates to X when open */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   7. NAVIGATION — Mobile
   ============================================================ */
.nav-mobile {
  display: none; /* JS adds .open class to show */
  position: absolute;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--navy-dark);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 199;
}

.nav-mobile.open {
  display: block;
}

.nav-mobile__list {
  padding: var(--sp-4) 0 var(--sp-8);
}

.nav-mobile__list li a,
.nav-mobile__toggle-btn {
  display: block;
  width: 100%;
  text-align: left;
  color: rgba(255,255,255,0.82);
  font-size: var(--sz-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: var(--sp-4) var(--sp-6);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-family: var(--font-sans);
}

.nav-mobile__list li a:hover,
.nav-mobile__list li a:focus-visible,
.nav-mobile__toggle-btn:hover,
.nav-mobile__toggle-btn:focus-visible {
  background: rgba(255,255,255,0.07);
  color: var(--white);
  outline: none;
}

/* Mobile Services accordion */
.nav-mobile__toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-mobile__toggle-btn svg {
  width: 10px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}

.nav-mobile__toggle-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-mobile__submenu {
  display: none;
  background: rgba(0,0,0,0.25);
}

.nav-mobile__submenu.open {
  display: block;
}

.nav-mobile__submenu a {
  padding-left: var(--sp-10) !important;
  font-size: var(--sz-sm) !important;
  color: var(--silver) !important;
}


/* ============================================================
   8. HERO SECTION (homepage)
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-color: var(--navy); /* fallback when image is missing */
  background-image: url('images/hero.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Dark overlay so text is always readable over the photo */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(11, 31, 58, 0.88) 0%,
    rgba(11, 31, 58, 0.72) 55%,
    rgba(11, 31, 58, 0.50) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-24) var(--sp-5) var(--sp-20);
}

.hero__content {
  max-width: 720px;
}

.hero__eyebrow {
  display: block;
  font-size: var(--sz-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--sp-5);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--sz-3xl), 5.5vw, var(--sz-5xl));
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-6);
}

.hero__subheadline {
  font-size: var(--sz-md);
  color: rgba(255,255,255,0.82);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-10);
  max-width: 580px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.hero__location {
  font-size: var(--sz-sm);
  color: var(--silver);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero__location::before {
  content: '📍';
  font-size: 0.9em;
}


/* ============================================================
   9. SECTION SCAFFOLDING
   ============================================================ */
/* Divider bar under section eyebrow lines — soft gradient for a richer feel */
.section-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--steel) 0%, var(--steel-dark) 100%);
  margin: var(--sp-4) auto 0;
  border-radius: 2px;
}

.section-rule--left {
  margin-left: 0;
  margin-right: auto;
}


/* ============================================================
   10. INTRO / LEAD TEXT SECTION
   ============================================================ */
.intro {
  padding: var(--sp-16) 0;
  background: var(--white);
}

.intro__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.intro__text {
  font-size: var(--sz-md);
  line-height: var(--lh-loose);
  color: var(--mid-gray);
}


/* ============================================================
   11. SERVICE TIER CARDS (homepage)
   ============================================================ */
.services-section {
  padding: var(--sp-16) 0;
  background: var(--silver-light);
}

.service-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.service-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-top: 4px solid var(--steel);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.service-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.service-card__number {
  font-family: var(--font-display);
  font-size: var(--sz-4xl);
  font-weight: var(--fw-black);
  color: var(--silver-light);
  line-height: 1;
  margin-bottom: var(--sp-3);
  /* Decorative only — aria-hidden in HTML */
}

.service-card__label {
  font-size: var(--sz-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--sp-3);
}

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--sz-xl);
  font-weight: var(--fw-bold);
  color: var(--navy);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-snug);
}

.service-card__desc {
  font-size: var(--sz-sm);
  color: var(--mid-gray);
  line-height: var(--lh-loose);
  flex-grow: 1;
  margin-bottom: var(--sp-6);
}

.service-card__items {
  margin-bottom: var(--sp-6);
}

.service-card__items li {
  font-size: var(--sz-sm);
  color: var(--mid-gray);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  position: relative;
  line-height: var(--lh-snug);
}

.service-card__items li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--steel);
}


/* ============================================================
   12. "WHY PPS" DIFFERENTIATORS SECTION
   ============================================================ */
.why-section {
  padding: var(--sp-20) 0;
  background: var(--white);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}

.why-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.why-item__number {
  font-family: var(--font-display);
  font-size: var(--sz-5xl);
  font-weight: var(--fw-black);
  color: var(--silver-light);
  line-height: 1;
  min-width: 60px;
  text-align: right;
  user-select: none;
}

.why-item__content h3 {
  font-size: var(--sz-xl);
  margin-bottom: var(--sp-3);
  color: var(--navy);
}

.why-item__content p {
  font-size: var(--sz-sm);
  color: var(--mid-gray);
  line-height: var(--lh-loose);
  margin: 0;
}


/* ============================================================
   13. CTA BANNER
   ============================================================ */
.cta-banner {
  background: var(--navy);
  padding: var(--sp-16) 0;
  text-align: center;
}

.cta-banner h2 {
  color: var(--white);
  font-size: clamp(var(--sz-xl), 3vw, var(--sz-3xl));
  margin-bottom: var(--sp-4);
}

.cta-banner p {
  color: var(--silver-light);
  font-size: var(--sz-md);
  margin-bottom: var(--sp-8);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   14. INNER PAGE HERO (service pages, about page)
   ============================================================ */
.page-hero {
  background: var(--navy);
  padding: var(--sp-16) 0 var(--sp-12);
}

.page-hero--with-image {
  background-image: url('images/page-hero-bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.page-hero--with-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(11, 31, 58, 0.88) 0%,
    rgba(11, 31, 58, 0.74) 55%,
    rgba(11, 31, 58, 0.58) 100%
  );
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.page-hero__eyebrow {
  display: block;
  font-size: var(--sz-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--sp-4);
}

.page-hero__title {
  color: var(--white);
  font-size: clamp(var(--sz-2xl), 4vw, var(--sz-4xl));
  margin-bottom: var(--sp-4);
}

.page-hero__subtitle {
  color: rgba(255,255,255,0.78);
  font-size: var(--sz-md);
  max-width: 640px;
  line-height: var(--lh-loose);
}


/* ============================================================
   15. CONTENT PAGES (prose, credentials, service detail)
   ============================================================ */

/* Photo + text two-column layout */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: start;
}

.about-photo {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.about-photo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.about-photo__caption {
  font-size: var(--sz-sm);
  color: var(--mid-gray);
  text-align: center;
  margin-top: var(--sp-3);
  font-style: italic;
}

/* Credentials display */
.credentials-list {
  margin: var(--sp-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.credential-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5) var(--sp-6);
  background: var(--steel-light);
  border-left: 4px solid var(--steel);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.credential-item__badge {
  font-size: var(--sz-sm);
  font-weight: var(--fw-black);
  color: var(--steel);
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding-top: 2px;
  min-width: 120px;
}

.credential-item__detail strong {
  display: block;
  font-size: var(--sz-sm);
  font-weight: var(--fw-semi);
  color: var(--navy);
  margin-bottom: 2px;
}

.credential-item__detail span {
  font-size: var(--sz-xs);
  color: var(--mid-gray);
}

/* Service detail sections on inner pages */
.service-detail {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--border);
}

.service-detail:last-of-type {
  border-bottom: none;
}

.service-detail h3 {
  font-size: var(--sz-2xl);
  margin-bottom: var(--sp-4);
}

.service-detail .service-items {
  margin: var(--sp-6) 0;
}

.service-items li {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  color: var(--charcoal);
  font-size: var(--sz-base);
  line-height: var(--lh-snug);
  border-bottom: 1px solid var(--border);
}

.service-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--steel);
  border-radius: 50%;
}

.service-items li:last-child {
  border-bottom: none;
}

/* Callout / note box */
.callout {
  background: var(--steel-light);
  border: 1px solid rgba(29, 92, 150, 0.18);
  border-left: 4px solid var(--steel);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-8) 0;
}

.callout p {
  font-size: var(--sz-sm);
  color: var(--charcoal);
  margin: 0;
  line-height: var(--lh-loose);
}

.callout strong {
  color: var(--navy);
}


/* ============================================================
   16. CONTACT FORM
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

.contact-info__item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-6);
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  background: var(--steel-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--sz-lg);
}

.contact-info__label {
  font-size: var(--sz-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: var(--sp-1);
}

.contact-info__value {
  font-size: var(--sz-md);
  font-weight: var(--fw-medium);
  color: var(--navy);
}

.contact-info__value a {
  color: var(--navy);
  text-decoration: none;
}

.contact-info__value a:hover {
  color: var(--steel);
}

.contact-info__note {
  font-size: var(--sz-sm);
  color: var(--mid-gray);
}

/* Form styles */
.contact-form {
  background: var(--silver-light);
  padding: var(--sp-8);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.form-group {
  margin-bottom: var(--sp-5);
}

.form-group label {
  display: block;
  font-size: var(--sz-sm);
  font-weight: var(--fw-medium);
  color: var(--charcoal);
  margin-bottom: var(--sp-2);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--sz-base);
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgba(29, 92, 150, 0.15);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6272' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.form-submit {
  margin-top: var(--sp-6);
}

.form-submit .btn {
  width: 100%;
  padding: var(--sp-5) var(--sp-8);
  font-size: var(--sz-base);
}

.accepting-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--sz-sm);
  font-weight: var(--fw-semi);
  color: #1a6e3c;
  background: #e8f5ec;
  border: 1px solid #a8d5b5;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-8);
}

.accepting-note::before {
  content: '●';
  font-size: 0.6em;
  color: #28a05b;
}


/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy-dark);
  color: var(--silver-light);
  padding: var(--sp-16) 0 var(--sp-8);
  border-top: 3px solid var(--steel);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
}

/* Footer brand column */
.footer-brand__name {
  font-family: var(--font-display);
  font-size: var(--sz-xl);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}

.footer-brand__tagline {
  font-size: var(--sz-sm);
  color: var(--silver);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-6);
}

.footer-brand__cta .btn {
  font-size: var(--sz-xs);
}

/* Footer nav columns */
.footer-col__heading {
  font-family: var(--font-sans);
  font-size: var(--sz-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--sp-5);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-col ul li a {
  color: rgba(255,255,255,0.70);
  font-size: var(--sz-sm);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-col ul li a:hover {
  color: var(--white);
}

/* Footer contact info */
.footer-contact__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.footer-contact__label {
  font-size: var(--sz-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
}

.footer-contact__value {
  font-size: var(--sz-sm);
  color: rgba(255,255,255,0.80);
}

.footer-contact__value a {
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-contact__value a:hover {
  color: var(--white);
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  text-align: center;
}

.footer-bottom p {
  font-size: var(--sz-xs);
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: var(--lh-normal);
}


/* ============================================================
   18. UTILITY CLASSES
   ============================================================ */

/* Skip-to-content link — visible only when focused via keyboard.
   Sits above all content. Used by keyboard and screen-reader users
   to jump past the header navigation. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 1000;
  padding: var(--sp-3) var(--sp-5);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--sz-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: top var(--transition);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--sp-4);
  outline: 2px solid var(--steel);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mt-8  { margin-top: var(--sp-8);  }
.mt-12 { margin-top: var(--sp-12); }
.mb-0  { margin-bottom: 0; }


/* ============================================================
   19. ACCESSIBILITY — FOCUS STATES
   Focus states are critical for keyboard users. Do not remove.
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--steel);
  outline-offset: 3px;
}

/* On dark backgrounds, use white focus ring */
.site-header :focus-visible,
.nav-mobile :focus-visible,
.site-footer :focus-visible {
  outline-color: rgba(255,255,255,0.70);
}

/* Remove outline for mouse users (browsers support :focus-visible natively) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure buttons and links look interactive */
button:not(:disabled) { cursor: pointer; }


/* ============================================================
   20. RESPONSIVE — 768 px and up (tablet / landscape mobile)
   ============================================================ */
@media (min-width: 768px) {

  /* Layout */
  .container {
    padding-left: var(--sp-8);
    padding-right: var(--sp-8);
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* Navigation */
  .nav-links {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .nav-mobile {
    display: none !important; /* always hidden at tablet+ */
  }

  .nav-brand__name {
    font-size: var(--sz-lg);
  }

  /* Hero */
  .hero {
    min-height: 85vh;
  }

  /* Service cards */
  .service-cards {
    grid-template-columns: 1fr 1fr;
  }

  /* Why grid */
  .why-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
  }

  /* About */
  .about-grid {
    grid-template-columns: 340px 1fr;
    align-items: start;
  }

  .about-photo {
    max-width: none;
    margin: 0;
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-6));
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr 1.6fr;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1.8fr 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Credentials */
  .credential-item {
    flex-direction: row;
    align-items: center;
  }
}


/* ============================================================
   21. RESPONSIVE — 1024 px and up (desktop)
   ============================================================ */
@media (min-width: 1024px) {

  /* Layout */
  .container {
    padding-left: var(--sp-10);
    padding-right: var(--sp-10);
  }

  .section {
    padding-top: var(--sp-24);
    padding-bottom: var(--sp-24);
  }

  /* Service cards — 4 across on desktop */
  .service-cards {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Why grid — 4 across if desired, or keep 2-col with larger spacing */
  .why-grid {
    gap: var(--sp-16);
  }

  /* Hero */
  .hero__inner {
    padding-top: var(--sp-32);
    padding-bottom: var(--sp-32);
  }

  /* Nav brand */
  .nav-brand__name {
    font-size: var(--sz-xl);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
  }
}


/* ============================================================
   22. POLISH — Scroll-fade-in, image treatments, micro-interactions
   Added in the visual-polish pass. Safe to remove if undesired.
   ============================================================ */

/* Scroll-triggered fade-up. JS adds .fade-on-scroll to the listed
   selectors and .is-visible when the element enters the viewport. */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.fade-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger child cards inside service-cards and why-grid for a nicer reveal */
.service-cards .service-card.fade-on-scroll {
  transition-delay: 0ms;
}
.service-cards .service-card.fade-on-scroll:nth-child(2) { transition-delay: 80ms; }
.service-cards .service-card.fade-on-scroll:nth-child(3) { transition-delay: 160ms; }
.service-cards .service-card.fade-on-scroll:nth-child(4) { transition-delay: 240ms; }

.why-grid .why-item.fade-on-scroll:nth-child(2) { transition-delay: 80ms; }
.why-grid .why-item.fade-on-scroll:nth-child(3) { transition-delay: 160ms; }
.why-grid .why-item.fade-on-scroll:nth-child(4) { transition-delay: 240ms; }

.credentials-list .credential-item.fade-on-scroll:nth-child(2) { transition-delay: 60ms; }
.credentials-list .credential-item.fade-on-scroll:nth-child(3) { transition-delay: 120ms; }
.credentials-list .credential-item.fade-on-scroll:nth-child(4) { transition-delay: 180ms; }

/* Respect users who prefer reduced motion — no animation at all */
@media (prefers-reduced-motion: reduce) {
  .fade-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Inline figures (used in service-page prose) — subtle zoom on hover */
.prose figure {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.prose figure img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.prose figure:hover img {
  transform: scale(1.03);
}

/* Service card on hover — slightly stronger lift + accent shift */
.service-card {
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--steel) 0%, var(--steel-dark) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.service-card:hover::before {
  opacity: 1;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* About-photo — slight bloom on hover, subtle ring */
.about-photo img {
  transition: transform 500ms ease, box-shadow 500ms ease;
}
.about-photo:hover img {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

/* Page hero: gentle bottom fade so the hero photo flows into the next section */
.page-hero--with-image::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--white) 100%);
  z-index: 0;
  pointer-events: none;
}

/* When the next section after page-hero is gray, fade into that instead */
.page-hero--with-image + .section[style*="silver-light"]::before,
.page-hero--with-image + section.section[style*="silver-light"] {
  /* no extra rule needed — the fade is white by default; visually OK */
}

/* Slightly richer focus ring globally — high-contrast steel */
:focus-visible {
  outline: 3px solid var(--steel) !important;
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(29, 92, 150, 0.30);
}

/* Hero — slightly more breathing room on tall screens */
@media (min-height: 800px) {
  .hero {
    min-height: 82vh;
  }
}

/* Credential items — gentle hover */
.credential-item {
  transition: transform var(--transition), box-shadow var(--transition);
}
.credential-item:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}

/* Callout — slight emphasis on hover (subtle, just a feedback signal) */
.callout {
  transition: border-color var(--transition);
}

/* Smooth nav link underline on hover for desktop */
.nav-links a {
  position: relative;
  transition: color var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--steel);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms ease;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}