/* ============================================================
   NOVIRA — Website Version 1.0 (Visual Identity v2)
   Boutique Hiring Strategy & Executive Search Consultancy

   Visual direction: a dark, restrained, editorial atmosphere —
   near-black surfaces, a single muted brass accent used sparingly,
   a serif/sans typographic pairing for narrative weight, and
   precise spacing rhythm. Craftsmanship communicated through
   restraint rather than colour or decoration.

   Layout principle: every text column (header nav, hero headline,
   section headings, body copy) shares the SAME content container,
   so everything lines up on one consistent left edge down the page.
   Only the hero photograph is allowed to break out of that grid.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Surfaces */
  --bg: #0A0A0B;                 /* base near-black */
  --bg-raised: #111113;          /* alternating section tone */
  --bg-panel: rgba(255, 255, 255, 0.035);
  --bg-panel-hover: rgba(255, 255, 255, 0.055);
  --bg-input: rgba(255, 255, 255, 0.03);

  /* Borders */
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* Text */
  --text-primary: #F6F5F2;
  --text-secondary: #9C9B9E;
  --text-tertiary: #6C6B6E;

  /* Accent — muted brass, used sparingly */
  --accent: #CBA35C;
  --accent-bright: #E4C787;
  --accent-tint: rgba(203, 163, 92, 0.12);
  --accent-ring: rgba(203, 163, 92, 0.30);

  /* Inverse (primary CTA) */
  --cta-bg: #F6F5F2;
  --cta-bg-hover: #FFFFFF;
  --cta-text: #0A0A0B;

  /* Status */
  --color-error: #F0806B;
  --color-success: var(--accent-bright);

  /* Typography */
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

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

  /* Layout */
  --content-width: 1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* Motion — one consistent curve everywhere, capped duration for a crisp,
     premium (never sluggish) feel across all hover/focus micro-interactions. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-premium: var(--ease);
  --duration-fast: 150ms;
  --duration-med: 260ms;
  --duration-premium: 280ms;

  /* Ambient depth */
  --shadow-ambient: 0 1px 2px rgba(0, 0, 0, 0.22), 0 14px 32px -18px rgba(0, 0, 0, 0.5);

  --header-height: 96px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' 1;
  position: relative;
}

/* Subtle ambient vignette — adds depth without imagery */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 1200px 700px at 50% -10%, rgba(203, 163, 92, 0.08), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 20%, rgba(255, 255, 255, 0.035), transparent 60%),
    radial-gradient(ellipse 800px 500px at 0% 60%, rgba(203, 163, 92, 0.035), transparent 65%);
  pointer-events: none;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
}

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

input, textarea, button {
  font: inherit;
  color: inherit;
}

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

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

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  background: var(--text-primary);
  color: var(--bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--duration-fast) var(--ease);
}

.skip-link:focus {
  top: var(--space-3);
}

/* ---------- Layout ---------- */
/* Shared by the header, the hero and every section below — this is what
   keeps the logo, the hero headline and every section heading aligned on
   one consistent left edge all the way down the page. */
.container {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-9);
  scroll-margin-top: var(--header-height);
  background: var(--bg);
}

#top {
  scroll-margin-top: 0;
}

.section-alt {
  background: var(--bg-raised);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.15;
}

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h3, h4 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

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

.section-title {
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.85rem);
  margin-bottom: 2.25rem;
}

.section-title-light {
  color: var(--text-primary);
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.lead {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1.75rem;
}

.lead-light {
  color: var(--text-primary);
}

.section p {
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  max-width: 60ch;
}

.text-light {
  color: var(--text-secondary);
}

.callout {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent);
  margin-top: var(--space-4);
}

.callout-light {
  color: var(--text-primary);
  border-left-color: var(--accent-bright);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-med) var(--ease), background var(--duration-med) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(10, 10, 11, 0.88);
}

/* Safari/iOS treats `backdrop-filter` on an ancestor as establishing a
   containing block for `position: fixed` descendants, which breaks the
   full-screen mobile menu (it gets confined to the header's own box
   instead of covering the viewport). Dropping the filter for the moment
   the menu is open avoids that entirely; it is visually irrelevant since
   the menu's own opaque panel covers the header area anyway. */
.site-header.menu-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The header is allowed a wider stage and more generous side padding than
   the standard content container, giving the nav and CTA real breathing
   room. This does not affect the hero, section headings or body copy —
   they still all share the original .container below. */
.site-header .container {
  max-width: 1440px;
  padding-inline: clamp(2rem, 4vw, 4rem);
}

/* Three-track grid: logo | nav | actions. The outer tracks are auto-sized
   to their own content and the centre track is minmax(0, 1fr) — so the
   logo and CTA button each occupy exactly the space their own content
   needs and can never be pushed, shrunk or "compressed" by the nav, and
   the nav can never push them either. This is a structural guarantee,
   not just a width budget. */
.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-4);
  width: 100%;
  /* Stays above the full-screen mobile menu (see .mobile-nav) so the logo
     and the open/close toggle remain visible and tappable at all times. */
  position: relative;
  z-index: 2;
}

.logo {
  font-family: var(--font-serif);
  font-size: 2.875rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* The nav lives in its own grid track (see .header-inner) and is centred
   within that track. Its width can never affect the logo or CTA columns. */
.main-nav {
  display: none;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2.125rem;
  flex-wrap: nowrap;
}

.nav-list li {
  flex-shrink: 0;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding-block: var(--space-1);
  position: relative;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease);
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transition: right var(--duration-med) var(--ease);
}

.nav-link:hover::after {
  right: 0;
}

.nav-link.is-active {
  color: var(--text-primary);
}

.nav-link.is-active::after {
  right: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.header-actions .btn-primary {
  display: none;
}

/* Mobile menu toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
}

.menu-toggle span {
  width: 20px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Full-screen mobile menu panel. It covers the entire viewport (inset: 0),
   not just the area below the header, and clears the logo/toggle itself
   with top padding — that pairs with .header-inner's higher z-index above
   to keep the logo and close button visible and tappable on top of it.
   A solid, fully opaque background guarantees the Hero (or any other page
   content) is never visible through or around it while open. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  padding: calc(var(--header-height) + var(--space-6)) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-med) var(--ease), transform var(--duration-med) var(--ease), visibility var(--duration-med);
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

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

.mobile-nav-list .nav-link {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-full);
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  transition: background var(--duration-premium) var(--ease-premium),
              border-color var(--duration-premium) var(--ease-premium),
              transform var(--duration-premium) var(--ease-premium),
              color var(--duration-premium) var(--ease-premium),
              box-shadow var(--duration-premium) var(--ease-premium);
  white-space: nowrap;
}

.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn-primary:hover {
  background: var(--cta-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 0 24px rgba(203, 163, 92, 0.14);
}

.btn-primary:active {
  transform: translateY(0);
  transition-duration: var(--duration-fast);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0);
  transition-duration: var(--duration-fast);
}

.btn-lg {
  padding: 0.95rem 1.85rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
}

.btn-block {
  width: 100%;
  border-radius: var(--radius-sm);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 4vw + 1rem, 5rem);
  padding-bottom: var(--space-9);
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-content {
  max-width: 620px;
}

.hero-headline {
  font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin-bottom: 2.25rem;
}

.hero-subheadline {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Hero visual — a full-bleed cinematic photograph that breaks out of the
   content grid, rather than a boxed illustration. Contained/rounded on
   mobile; an immersive full-height right-side panel from tablet up. */
.hero-media {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-6);
  background: var(--bg-raised);
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 42%;
  display: block;
}

/* A second, blurred copy of the same photo, revealed only in the
   background region via a mask — approximates a shallow depth of field
   (distant skyline soft, office interior sharp) without touching the
   source image. */
.hero-image-blur {
  filter: blur(3.5px);
  -webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.5) 66%, #000 82%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.5) 66%, #000 82%, #000 100%);
}

.hero-media-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, 0.15), rgba(10, 10, 11, 0.18)),
    radial-gradient(ellipse 120% 120% at 65% 40%, transparent 50%, rgba(10, 10, 11, 0.4) 100%);
  pointer-events: none;
}

@media (min-width: 860px) {
  .hero {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
  }

  .hero-content {
    max-width: 540px;
  }

  .hero-media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 70%;
    height: 100%;
    aspect-ratio: auto;
    margin-top: 0;
    border-radius: 0;
  }

  .hero-media-overlay {
    background:
      linear-gradient(
        to right,
        var(--bg) 0%,
        rgba(10, 10, 11, 0.95) 8%,
        rgba(10, 10, 11, 0.8) 18%,
        rgba(10, 10, 11, 0.55) 30%,
        rgba(10, 10, 11, 0.32) 42%,
        rgba(10, 10, 11, 0.18) 56%,
        rgba(10, 10, 11, 0.12) 72%,
        rgba(10, 10, 11, 0.12) 100%
      ),
      linear-gradient(
        180deg,
        rgba(10, 10, 11, 0.35) 0%,
        transparent 14%,
        transparent 60%,
        rgba(10, 10, 11, 0.5) 85%,
        rgba(10, 10, 11, 0.78) 100%
      ),
      radial-gradient(ellipse 85% 85% at 78% 38%, transparent 45%, rgba(10, 10, 11, 0.3) 100%);
  }
}

/* ---------- Problem section ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.problem-text p {
  max-width: 62ch;
}

.problem-list {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-ambient);
}

.problem-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.problem-list li:last-child {
  border-bottom: none;
}

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-3);
  stroke: var(--text-secondary);
  transition: stroke var(--duration-med) var(--ease);
}

.card:hover .icon-lg {
  stroke: var(--accent-bright);
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-ambient);
  transition: transform var(--duration-premium) var(--ease-premium),
              background var(--duration-premium) var(--ease-premium),
              border-color var(--duration-premium) var(--ease-premium),
              box-shadow var(--duration-premium) var(--ease-premium);
}

.card:hover {
  transform: translateY(-10px) scale(1.015);
  background: var(--bg-panel-hover);
  border-color: rgba(203, 163, 92, 0.45);
  box-shadow: 0 32px 60px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(203, 163, 92, 0.45), 0 0 40px rgba(203, 163, 92, 0.16);
}

.card h3 {
  font-size: 1.125rem;
  margin-bottom: 1.125rem;
}

.card p {
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.card-expertise ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.card-expertise li {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  padding-block: 0.3rem;
  border-top: 1px solid var(--border);
}

.card-expertise li:first-child {
  border-top: none;
  padding-top: 0;
}

/* ---------- Process ---------- */
.process-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  counter-reset: step;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-ambient);
  transition: border-color var(--duration-med) var(--ease), background var(--duration-med) var(--ease), transform var(--duration-med) var(--ease);
}

.process-step:hover {
  border-color: var(--border-strong);
  background: var(--bg-panel-hover);
  transform: translateY(-3px);
}

.process-number {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 2ch;
}

.process-step p {
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 0;
  max-width: none;
}

/* ---------- Executive Search & Market Mapping (premium panel) ---------- */
.section-dark {
  background: var(--bg-raised);
  position: relative;
}

.mapping-panel {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  padding: var(--space-7) var(--space-6);
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
}

.mapping-panel::before {
  content: '';
  position: absolute;
  inset: -40% 40% auto -20%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(203, 163, 92, 0.16), transparent 70%);
  pointer-events: none;
}

.mapping-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.mapping-visual {
  display: flex;
  justify-content: center;
}

/* Executive Search photograph — sized as the dominant visual on the right,
   contained (not full-bleed) so it still reads as a curated editorial
   photo rather than a decorative background. The 3:2 box matches the
   source photo's native ratio exactly, so nothing is ever cropped. */
.mapping-image {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-ambient);
}

.mapping-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mapping-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10, 10, 11, 0.12) 0%, rgba(10, 10, 11, 0.32) 100%);
  pointer-events: none;
}

/* ---------- Forms ---------- */
.problem-grid,
.candidate-grid,
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.form-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-ambient);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-row-half > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font-size: 0.9375rem;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
  width: 100%;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.form-error {
  font-size: 0.8125rem;
  color: var(--color-error);
  min-height: 1.1em;
}

.form-status {
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
  min-height: 1.2em;
}

.form-status.is-success {
  color: var(--color-success);
}

.form-status.is-error {
  color: var(--color-error);
}

.file-input {
  position: relative;
}

.file-input input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-input-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.9rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.file-input:hover .file-input-label {
  border-color: var(--accent);
  background: var(--accent-tint);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-block: var(--space-6);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-top: var(--space-1);
}

.logo-footer {
  display: inline-block;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.footer-links a {
  transition: color var(--duration-med) var(--ease);
}

.footer-links a:hover {
  color: var(--accent-bright);
}

.footer-copyright {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

/* ---------- Legal pages (Privacy Policy / Terms of Use) ---------- */
.legal-page .lead {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-7);
}

.legal-content {
  max-width: 72ch;
}

.legal-content p {
  color: var(--text-secondary);
  max-width: none;
  margin-bottom: var(--space-4);
}

.legal-content h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin-top: var(--space-7);
  margin-bottom: 1.25rem;
}

.legal-content ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.legal-content li {
  position: relative;
  padding-left: var(--space-4);
  color: var(--text-secondary);
}

.legal-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.legal-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease);
}

.legal-content a:hover {
  color: var(--accent-bright);
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

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

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .form-row-half {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  .form-row-half {
    grid-template-columns: 1fr;
  }

  .mapping-panel {
    padding: var(--space-6) var(--space-4);
  }
}

@media (min-width: 860px) {
  .problem-grid {
    grid-template-columns: 1.3fr 1fr;
  }

  .candidate-grid,
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .mapping-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-7);
    align-items: center;
  }

  .mapping-visual {
    justify-content: flex-end;
  }

  .card-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-list {
    grid-template-columns: repeat(5, 1fr);
  }

  .process-step {
    flex-direction: column;
    gap: var(--space-2);
  }
}

@media (min-width: 1140px) {
  .card-grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* The full desktop nav needs real room — logo + 5 links + CTA button only
   fit comfortably once there's meaningfully more than tablet width.
   Below this, the hamburger menu (which has plenty of vertical space)
   takes over, avoiding the cramped wrapping/overlap that happens when
   the nav is squeezed into too little horizontal space. */
@media (min-width: 1360px) {
  .main-nav {
    display: flex;
    justify-content: center;
  }

  .header-actions .btn-primary {
    display: inline-flex;
  }

  .menu-toggle {
    display: none;
  }
}

@media (max-width: 1359px) {
  .mobile-nav-list .nav-link {
    display: inline-block;
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-7);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}