/* =========================================================
   AFCO INTERNATIONAL CORP
   Stylesheet
   ---------------------------------------------------------
   Sections:
   1.  Design Tokens (custom properties)
   2.  Reset & Base
   3.  Typography (single source of truth)
   4.  Layout & Containers
   5.  Buttons
   6.  Brand Mark (header & footer logo)
   7.  Header & Navigation
   8.  Mobile Menu
   9.  Hero (home & page hero)
   10. Services Hero Art (right-side composition)
   11. Section Patterns
   12. Pillars (What We Do, Our Approach)
   13. Track Record
   14. Services Teaser
   15. Services Page (intro statement, grid, who we work with)
   16. Contact CTA
   17. Footer
   18. Reveal-on-scroll & Reduced Motion
   19. Accessibility & Focus
   20. Responsive (375 / 768 / 1024 / 1440)
   ========================================================= */


/* ---------------------------------------------------------
   1. Design Tokens
   --------------------------------------------------------- */
:root {
  /* Color system */
  --navy: #0A1F3D;
  --navy-mid: #102A4C;
  --navy-deep: #061633;
  --navy-accent: #1A3A66;
  --black: #000000;
  --ink: #0B0F19;
  --white: #FFFFFF;
  --grey: #6B7280;
  --grey-soft: #9CA3AF;
  --grey-line: #E5E7EB;
  --grey-bg: #F7F8FA;

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

  /* Type scale (single source of truth) */
  --fs-hero: clamp(2.5rem, 7vw + 0.5rem, 5.5rem);
  --fs-h1:   clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
  --fs-h2:   clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem);
  --fs-h3:   clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
  --fs-lead: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-button: 0.9375rem;
  --fs-display: clamp(1.25rem, 1.4vw + 0.7rem, 1.625rem);

  /* Weights (single source) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --lh-tight: 1.25;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-heading: -0.015em;
  --ls-eyebrow: 0.18em;
  --ls-button: 0.04em;
  --ls-wordmark: 0.32em;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Section vertical rhythm (single scale) */
  --section-pad:        clamp(4rem, 8vw, 7rem);
  --section-pad-tight:  clamp(3rem, 5vw, 4.5rem);
  --section-pad-xtight: clamp(2rem, 3vw, 3rem);
  --section-pad-hero:   clamp(5rem, 10vw, 8rem);
  --section-pad-page:   clamp(4rem, 7vw, 6rem);
  --section-pad-footer: clamp(3rem, 6vw, 5rem);

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-tight: 720px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --transition-fast: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --transition-med: 320ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --shadow-soft: 0 1px 2px rgba(10, 31, 61, 0.06), 0 8px 24px rgba(10, 31, 61, 0.06);
  --shadow-deep: 0 12px 40px rgba(10, 31, 61, 0.18);
}


/* ---------------------------------------------------------
   2. Reset & Base
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 0 0 1em; }

strong, b { font-weight: var(--fw-bold); }

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


/* ---------------------------------------------------------
   3. Typography (single source of truth)
   ---------------------------------------------------------
   Element-level rules below are THE consistent type system.
   No section-level overrides should redefine font-size,
   font-family, font-weight, line-height, or letter-spacing.
   --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  margin: 0 0 0.5em;
  color: inherit;
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}

h2 { font-size: var(--fs-h2); }

h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.005em;
  line-height: var(--lh-tight);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: var(--sp-4);
  line-height: 1.2;
}

.eyebrow.on-navy { color: rgba(255, 255, 255, 0.7); }

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--grey);
  max-width: 56ch;
}

.section-heading {
  /* Section-level h2 wrapper, max-width only — no font override */
  max-width: 22ch;
}


/* ---------------------------------------------------------
   4. Layout & Containers
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: var(--container-narrow); }
.container--tight  { max-width: var(--container-tight);  }

.section          { padding-block: var(--section-pad); }
.section--tight   { padding-block: var(--section-pad-tight); }
.section--xtight  { padding-block: var(--section-pad-xtight); }

.section--dark   { background: var(--navy); color: var(--white); }
.section--ink    { background: var(--ink);  color: var(--white); }
.section--light  { background: var(--white); color: var(--ink); }
.section--soft   { background: var(--grey-bg); color: var(--ink); }

.section-header {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

@media (min-width: 1024px) {
  .section-header--split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--sp-8);
  }
}

.divider {
  height: 1px;
  background: var(--grey-line);
  border: 0;
  margin: 0;
}

.divider--on-navy { background: rgba(255, 255, 255, 0.12); }


/* ---------------------------------------------------------
   5. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.95rem 1.6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn .arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.btn:hover .arrow,
.btn:focus-visible .arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: transparent;
  color: var(--white);
}

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn--ghost-dark {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
  background: var(--navy);
  color: var(--white);
}


/* ---------------------------------------------------------
   6. Brand Mark (used in header & footer)
   ---------------------------------------------------------
   Composite logo: thin rectangle border around "AFCO",
   "INTERNATIONAL" sits to the right, optically centered.
   --------------------------------------------------------- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--white);
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
}

.brand-mark__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  /* Slightly heavier left padding compensates for the trailing
     letter-space on the inner text, keeping AFCO visually centered. */
  padding: 0.55em 0.65em 0.55em 0.78em;
  font-size: 0.875rem;
}

.brand-mark__box-text {
  display: inline-block;
  letter-spacing: 0.22em;
  /* Pull back the trailing letter-spacing so the right padding measures
     against the actual last glyph, not the trailing tracking gap. */
  margin-right: -0.22em;
}

.brand-mark__suffix {
  font-size: 0.875rem;
  letter-spacing: var(--ls-wordmark);
  /* Pull suffix slightly toward optical baseline of boxed text. */
  position: relative;
  top: 0.5px;
}

/* Footer variant — slightly larger, more presence */
.site-footer .brand-mark {
  font-size: 1rem;
}
.site-footer .brand-mark__box,
.site-footer .brand-mark__suffix {
  font-size: 1rem;
}


/* ---------------------------------------------------------
   7. Header & Navigation
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background var(--transition-med);
}

.site-header.is-scrolled {
  background: rgba(10, 31, 61, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: var(--sp-5);
}

.primary-nav { display: none; }

@media (min-width: 768px) {
  .primary-nav {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
  }
}

.primary-nav a {
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
  line-height: 1;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-med);
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"] { color: var(--white); }

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }


/* ---------------------------------------------------------
   8. Mobile Menu
   --------------------------------------------------------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
  .menu-toggle { display: none; }
}

.menu-toggle .bars {
  position: relative;
  width: 22px;
  height: 14px;
}

.menu-toggle .bar {
  display: block;
  position: absolute;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: transform var(--transition-fast), opacity var(--transition-fast), top var(--transition-fast);
}

.menu-toggle .bar:nth-child(1) { top: 0; }
.menu-toggle .bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle .bar:nth-child(3) { top: 100%; transform: translateY(-100%); }

body.menu-open .menu-toggle .bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
body.menu-open .menu-toggle .bar:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle .bar:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--navy);
  color: var(--white);
  z-index: 40;
  transform: translateX(100%);
  transition: transform var(--transition-med);
  display: flex;
  flex-direction: column;
  padding: var(--sp-7) var(--container-pad);
  visibility: hidden;
}

body.menu-open .mobile-menu {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.mobile-menu a {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.005em;
  color: var(--white);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.2;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible { color: rgba(255, 255, 255, 0.78); }

.mobile-menu .meta {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
}

@media (min-width: 768px) {
  .mobile-menu { display: none; }
}


/* ---------------------------------------------------------
   9. Hero (home & page hero)
   --------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  padding-block: var(--section-pad-hero);
}

.hero--page {
  min-height: auto;
  padding-block: var(--section-pad-page);
  align-items: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 80% 110%, rgba(26, 58, 102, 0.55), transparent 60%),
    radial-gradient(900px 500px at 10% -10%, rgba(16, 42, 76, 0.65), transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-mid) 100%);
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 80px 80px;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
  z-index: -1;
  opacity: 0.55;
}

.hero__bg-art {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: clamp(160px, 28vw, 320px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  color: rgba(255, 255, 255, 0.55);
}

.hero__bg-orb {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  background: radial-gradient(circle at center, var(--navy-accent), transparent 70%);
  z-index: -1;
  animation: orbDrift 18s ease-in-out infinite alternate;
}

.hero__bg-orb--a { top: -20vmin; right: -10vmin; }
.hero__bg-orb--b { bottom: -25vmin; left: -10vmin; animation-delay: -8s; }

@keyframes orbDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(2vw, -3vh, 0); }
}

.hero__content {
  max-width: 22ch;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-5);
}

/* Page hero h1 uses the standard h1 size, not the giant hero size.
   Note: no max-width here — the page hero's text column governs wrap. */
.hero--page .hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
}

/* Page hero text: let content, title, and subtitle all fill the grid column.
   The base .hero__content / .hero__title max-widths are for the home hero's
   giant headline wrap and must NOT apply to the page hero. */
.hero--page .hero__content,
.hero--page .hero__title,
.hero--page .hero__subtitle {
  max-width: none;
}

.hero__subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 48ch;
  margin: 0;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 60ch;
}

/* Page-hero two-column layout (text left, art right) — at ALL sizes */
.hero--page > .container { width: 100%; }

.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
}

@media (min-width: 480px) {
  .hero__layout { gap: var(--sp-4); }
}

@media (min-width: 768px) {
  .hero__layout { gap: var(--sp-6); }
}

@media (min-width: 1024px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--sp-7);
  }
}

/* Page-hero subtitle width is governed by the combined rule below
   (see .hero--page .hero__content,.hero__title,.hero__subtitle). */


/* ---------------------------------------------------------
   10. Services Hero Art (right side composition)
   --------------------------------------------------------- */
.services-hero-art {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 1024px) {
  .services-hero-art {
    margin: 0 0 0 auto;
    max-width: 480px;
  }
}

.services-hero-art svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ---------------------------------------------------------
   11. Section Patterns
   --------------------------------------------------------- */
.text-block { max-width: 64ch; }
.text-block p + p { margin-top: 1em; }


/* ---------------------------------------------------------
   12. Pillars (What We Do, Our Approach)
   --------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
}

.pillar {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.section--light .pillar { border-top-color: var(--grey-line); }

.pillar__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-5);
  color: currentColor;
  opacity: 0.95;
}

.pillar__title {
  /* Use the standard h3 size — no override here, inherits from h3 element */
  margin: 0 0 var(--sp-3);
}

.pillar__body {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--lh-body);
}

.section--light .pillar__body { color: var(--grey); }


/* ---------------------------------------------------------
   13. Track Record
   --------------------------------------------------------- */
.track-record {
  position: relative;
  background: var(--white);
}

.track-record__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 1024px) {
  .track-record__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--sp-9);
  }
}

.track-record__heading {
  /* Inherits h2 size; layout-only overrides here */
  margin: 0;
}

.track-record__body {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: 60ch;
  margin: 0;
}

.track-record__body strong {
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.track-record__rule {
  height: 1px;
  background: var(--grey-line);
  margin: var(--sp-7) 0 0;
}


/* ---------------------------------------------------------
   14. Services Teaser
   --------------------------------------------------------- */
.services-teaser__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .services-teaser__inner {
    grid-template-columns: 1fr auto;
    gap: var(--sp-8);
  }
}

.services-teaser h2 {
  /* Inherits h2 size — no override */
  margin: 0 0 var(--sp-3);
}

.services-teaser p {
  margin: 0;
  color: var(--grey);
  max-width: 56ch;
}


/* ---------------------------------------------------------
   15. Services Page (intro statement, grid, who we work with)
   --------------------------------------------------------- */
.services-intro__statement {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  margin: 0 auto;
  max-width: 60ch;
}

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

@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}

@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

.service-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--grey-line);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border-radius: var(--radius-md);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 100%;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(10, 31, 61, 0.18);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  color: var(--navy);
  margin-bottom: var(--sp-3);
}

.service-card__title {
  /* Inherits h3 size — no override */
  margin: 0;
  color: var(--ink);
}

.service-card__body {
  margin: 0;
  color: var(--grey);
  line-height: var(--lh-body);
}

.who-we-work-with { background: var(--white); }

.who-we-work-with__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .who-we-work-with__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-9);
  }
}

.who-we-work-with h2 {
  /* Inherits h2 size — no override */
  margin: 0;
}

.who-we-work-with p {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  color: var(--ink);
  max-width: 60ch;
  margin: 0;
}


/* ---------------------------------------------------------
   16. Contact CTA
   --------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 50% 110%, rgba(26, 58, 102, 0.55), transparent 60%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  max-width: 56ch;
  margin: 0 auto;
}

.cta__heading {
  /* Inherits h2 size — no override */
  margin: 0;
}

.cta__lede {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-lead);
}

.cta__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

@media (min-width: 768px) {
  .cta__contacts {
    flex-direction: row;
    gap: var(--sp-5) var(--sp-6);
  }
}

.cta__contact {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  color: var(--white);
  letter-spacing: 0.005em;
  position: relative;
  padding-bottom: 4px;
  line-height: 1.2;
}

.cta__contact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  transition: background var(--transition-fast);
}

.cta__contact:hover::after,
.cta__contact:focus-visible::after { background: var(--white); }


/* ---------------------------------------------------------
   17. Footer
   --------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--white);
  padding-block: var(--section-pad-footer);
}

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

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--sp-7);
  }
}

.footer-brand .brand-mark { margin-bottom: var(--sp-4); }

.footer-brand p {
  color: rgba(255, 255, 255, 0.66);
  max-width: 38ch;
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.7;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--sp-4);
  line-height: 1.2;
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col li { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.86); line-height: 1.5; }
.footer-col a { color: rgba(255, 255, 255, 0.86); transition: color var(--transition-fast); }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--white); }

.footer-bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}


/* ---------------------------------------------------------
   18. Reveal-on-scroll & Reduced Motion
   --------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__bg-orb { animation: none; }
}


/* ---------------------------------------------------------
   19. Accessibility & Focus
   --------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}

.section--light :focus-visible,
.section--soft :focus-visible,
.service-card :focus-visible,
.who-we-work-with :focus-visible,
.track-record :focus-visible { outline-color: var(--navy); }

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--white);
  color: var(--navy);
  padding: 0.75rem 1rem;
  z-index: 100;
  font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus { top: 0; }


/* ---------------------------------------------------------
   20. Responsive (375 / 768 / 1024 / 1440)
   --------------------------------------------------------- */

/* Mobile: tighten the home hero so it doesn't push content to the bottom
   of an 86vh container, which creates a large empty gap below the header. */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    align-items: flex-start;
  }
  .hero:not(.hero--page) {
    padding-block: clamp(2.5rem, 9vw, 4.5rem);
  }
  .hero--page {
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }
}

@media (max-width: 374.98px) {
  .container { padding-inline: 1rem; }
  .hero__title { font-size: 2.25rem; }
  .hero--page .hero__title { font-size: 1.75rem; }
  .brand-mark__suffix { font-size: 0.8125rem; }
  .brand-mark__box { font-size: 0.8125rem; }
}

@media (min-width: 1024px) {
  .hero__content { max-width: 18ch; }
  .hero__intro {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    max-width: none;
  }
  .hero__intro .hero__subtitle {
    max-width: 36ch;
    text-align: right;
  }
}

@media (min-width: 1440px) {
  :root { --container-pad: 3rem; }
}