/* ==========================================================================
   Grey Matter Digital — Dark Luxury
   Design system implemented from
   design/Grey_Matter_Digital_Design_Spec_Dark_Luxury.md

   Contents
     01. Fonts
     02. Design tokens
     03. Reset and base
     04. Typography
     05. Utilities
     06. Buttons and links
     07. Header and navigation
     08. Hero and network graphic
     09. Feature strip
     10. Sections and cards
     11. Process steps
     12. Services
     13. Two-column layouts and panels
     14. Forms
     15. Call to action
     16. Footer
     17. Responsive
     18. Motion preferences
   ========================================================================== */

/* 01. Fonts ---------------------------------------------------------------
   Self-hosted variable subsets (latin). No third-party font requests, which
   is what lets the Content-Security-Policy stay free of external origins. */

@font-face {
  font-family: "Playfair Display";
  src: url("/static/fonts/playfair-display-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 02. Design tokens ----------------------------------------------------- */

:root {
  /* Colour palette — exact values from the specification */
  --bg-primary: #0a0a0c;
  --bg-secondary: #111114;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a8;
  --accent-blue: #3b82f6;
  --accent-blue-glow: #60a5fa;
  --accent-gold: #c9a84c;
  --border: #2a2a2e;

  /* Derived surfaces */
  --surface: rgba(255, 255, 255, 0.02);
  --surface-hover: rgba(255, 255, 255, 0.045);
  --input-bg: rgba(255, 255, 255, 0.025);

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout — 8px base unit */
  --content-max: 1280px;
  --gutter: 24px;
  --pad-x: 64px;
  --section-y: 128px;
  --header-h: 76px;

  /* Rhythm */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-15: 120px;

  --radius: 6px;
  --radius-sm: 4px;
  --transition: 0.2s ease;
}

/* 03. Reset and base ---------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

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

p {
  margin: 0 0 var(--sp-3);
}

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

button {
  font: inherit;
  color: inherit;
}

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

/* 04. Typography -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--sp-3);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero__headline,
.section__title,
.page-hero__title,
.cta__title,
.steps__name,
.card__title,
.service__title {
  font-family: var(--font-display);
  color: var(--text-primary);
}

.eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: 0.78125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.lede {
  max-width: 34rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 05. Utilities --------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-3);
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-blue);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--sp-2);
}

.rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 0 var(--sp-4);
  background: var(--border);
  border: 0;
}

.rule--gold {
  background: var(--accent-gold);
}

.icon {
  width: 32px;
  height: 32px;
  display: block;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

/* 06. Buttons and links -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn--primary {
  background-color: var(--accent-blue);
  color: #fff;
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.22);
}

.btn--primary:hover {
  background-color: var(--accent-blue-glow);
  box-shadow: 0 8px 30px rgba(96, 165, 250, 0.3);
  transform: translateY(-1px);
}

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

.btn--outline:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue-glow);
}

.btn--sm {
  padding: 11px 20px;
  font-size: 0.875rem;
}

.btn--full {
  width: 100%;
}

.btn__arrow {
  transition: transform var(--transition);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.link-gold,
.link-quiet {
  display: inline-block;
  padding-bottom: 3px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.link-gold {
  color: var(--text-primary);
  border-bottom: 1px solid var(--accent-gold);
}

.link-gold:hover {
  color: var(--accent-gold);
}

.link-quiet {
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
}

.link-quiet:hover {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}

/* 07. Header and navigation --------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.is-scrolled {
  background-color: rgba(10, 10, 12, 0.88);
  border-bottom-color: var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.brand__mark {
  width: 48px;
  height: 48px;
  /* The source is a square-ish JPEG on a black field. Cropping to the brain
     and fading its edges keeps the artwork but removes the visible dark
     rectangle the JPEG background would otherwise show. */
  object-fit: cover;
  object-position: 50% 52%;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, rgba(0, 0, 0, 0.5) 84%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, rgba(0, 0, 0, 0.5) 84%, transparent 100%);
}

.brand__text {
  display: flex;
  flex-direction: column;
  /* The "— digital —" mark sits centred beneath the wordmark rather than
     flush to its left edge. */
  text-align: center;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.brand__sub {
  margin-top: 3px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent-gold);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

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

.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--transition);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.site-nav__link:hover {
  color: var(--text-primary);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav__link[aria-current="page"] {
  color: var(--text-primary);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--text-primary);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* 08. Hero and network graphic ------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88vh;
  padding-top: calc(var(--header-h) + var(--sp-12));
  padding-bottom: var(--sp-15);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.98fr);
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
}

.hero__copy {
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  color: var(--accent-gold);
}

.hero__headline {
  /* Sized to break over three or four lines, per the specification. */
  max-width: 20ch;
  margin-bottom: var(--sp-4);
  font-size: clamp(2.5rem, 4.9vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hero__lede {
  max-width: 30rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.hero__visual {
  position: relative;
  justify-self: end;
  width: 118%;
  max-width: 860px;
}

.hero__glow {
  position: absolute;
  inset: 8% 4% 8% 14%;
  background: radial-gradient(closest-side, rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0.05) 62%, transparent 78%);
  filter: blur(28px);
  pointer-events: none;
}

.network {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* Fade the graphic into the background on its left edge so it reads as
     light rather than as a boxed image. */
  -webkit-mask-image: radial-gradient(115% 105% at 74% 48%, #000 26%, rgba(0, 0, 0, 0.55) 58%, transparent 86%);
  mask-image: radial-gradient(115% 105% at 74% 48%, #000 26%, rgba(0, 0, 0, 0.55) 58%, transparent 86%);
  animation: networkDrift 46s ease-in-out infinite;
}

.network__edges {
  stroke-linecap: round;
}

.node--hub {
  filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.75));
  animation: nodePulse 9s ease-in-out infinite;
}

/* Staggered pulse offsets so the network breathes rather than blinks.
   Classes rather than style attributes, to keep the CSP free of
   'unsafe-inline' for styles. */
.network .d0  { animation-delay: 0s; }
.network .d1  { animation-delay: 0.5s; }
.network .d2  { animation-delay: 1s; }
.network .d3  { animation-delay: 1.5s; }
.network .d4  { animation-delay: 2s; }
.network .d5  { animation-delay: 2.5s; }
.network .d6  { animation-delay: 3s; }
.network .d7  { animation-delay: 3.5s; }
.network .d8  { animation-delay: 4s; }
.network .d9  { animation-delay: 4.5s; }
.network .d10 { animation-delay: 5s; }
.network .d11 { animation-delay: 5.5s; }

@keyframes nodePulse {
  0%,
  100% {
    opacity: 0.62;
  }
  50% {
    opacity: 1;
  }
}

@keyframes networkDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-8px, -10px, 0) scale(1.012);
  }
}

/* Slow, staggered entrance for the hero column. */
.reveal {
  animation: revealUp 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.reveal--1 { animation-delay: 0.05s; }
.reveal--2 { animation-delay: 0.14s; }
.reveal--3 { animation-delay: 0.26s; }
.reveal--4 { animation-delay: 0.34s; }
.reveal--5 { animation-delay: 0.44s; }

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 09. Feature strip ------------------------------------------------------ */

.strip {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* One step wider than the container on each side, so the vertical dividers
     reach a little past its edge. This must be done with max-width + padding:
     a negative `margin-inline` here overrides the `auto` that `.container` uses
     to centre itself, which pins the whole strip to the left edge of the page
     and leaves a gap on the right. */
  max-width: calc(var(--content-max) + var(--sp-4) * 2);
  margin-inline: auto;
  padding-inline: calc(var(--pad-x) + var(--sp-4));
}

.strip__item {
  /* A centring column: the icon, title and body are centred as boxes, not just
     their inline text, so nothing can sit flush against the left edge of a
     column that is wider than its content. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
}

.strip__item + .strip__item {
  border-left: 1px solid var(--border);
}

.strip__icon {
  /* The icon svg is itself a block box (see .icon), so text-align on the item
     cannot move it — without this it stays pinned to the left edge while the
     title and body are centred. */
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
  color: var(--accent-blue);
}

.strip__title {
  margin-bottom: var(--sp-1);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.strip__body {
  /* Auto side margins keep the measure centred inside the column now that
     the strip's text is centre-aligned. */
  margin: 0 auto;
  max-width: 24ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 10. Sections and cards ------------------------------------------------ */

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

.section--flush {
  padding-top: var(--sp-8);
}

.section--alt {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Opening block on every inner page. The top offset clears the fixed header. */
.page-hero {
  padding-top: calc(var(--header-h) + var(--sp-12));
  padding-bottom: var(--sp-8);
}

.page-hero__title {
  max-width: 24ch;
  margin-bottom: var(--sp-4);
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.1;
}

.page-hero__lede {
  max-width: 44rem;
}

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

.page-hero--center .rule {
  margin-inline: auto;
}

.page-hero--center .page-hero__lede {
  margin-inline: auto;
}

.page-hero--center .hero__actions {
  justify-content: center;
}

.section__head {
  max-width: 46rem;
  margin-bottom: var(--sp-8);
}

.section__title {
  margin-bottom: var(--sp-3);
  font-size: clamp(1.875rem, 3.1vw, 2.75rem);
  line-height: 1.14;
}

.section__lede {
  margin: 0;
  max-width: 46rem;
  font-size: 1.0625rem;
  color: var(--text-secondary);
}

.section__narrow {
  max-width: 52rem;
}

.section__more {
  margin: var(--sp-8) 0 0;
}

.cards {
  display: grid;
  gap: var(--gutter);
}

.cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

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

.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.card:hover {
  border-color: rgba(59, 130, 246, 0.55);
  background-color: var(--surface-hover);
  transform: translateY(-2px);
}

.card__title {
  margin-bottom: var(--sp-2);
  font-size: 1.4375rem;
  line-height: 1.25;
}

.card__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.card__link {
  margin-top: var(--sp-4);
  align-self: flex-start;
  font-size: 0.875rem;
}

.card--principle {
  padding: var(--sp-6);
}

.card--principle .card__title {
  font-size: 1.625rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
}

.tags__item {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* 11. Process steps ----------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.steps__item {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.steps__number {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  color: var(--accent-gold);
}

.steps__name {
  margin-bottom: var(--sp-2);
  font-size: 1.625rem;
}

.steps__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.steps--stacked {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 54rem;
}

.steps--stacked .steps__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--border);
}

.steps--stacked .steps__item:last-child {
  border-bottom: 1px solid var(--border);
}

.steps--stacked .steps__number {
  margin: 0;
  font-size: 1.5rem;
}

.steps--stacked .steps__name {
  font-size: 2rem;
}

.steps--stacked .steps__body {
  max-width: 60ch;
  font-size: 1rem;
}

/* 12. Services ---------------------------------------------------------- */

.services {
  display: flex;
  flex-direction: column;
}

.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

.service:last-child {
  border-bottom: 1px solid var(--border);
}

.service__title {
  margin-bottom: var(--sp-2);
  font-size: 1.875rem;
  line-height: 1.2;
}

.service__summary {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ticks__item {
  position: relative;
  padding-left: var(--sp-4);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ticks__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 1px;
  background: var(--accent-gold);
}

/* 13. Two-column layouts and panels ------------------------------------ */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.two-col--contact {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.prose h2 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
  font-size: 1.75rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.panel {
  padding: var(--sp-6);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.panel--success {
  border-color: rgba(59, 130, 246, 0.5);
}

.panel__title {
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.panel__body {
  margin: 0 0 var(--sp-3);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.panel__body a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--accent-gold);
}

.panel__body a:hover {
  color: var(--accent-gold);
}

.panel .btn {
  margin-top: var(--sp-3);
}

.facts {
  margin: 0;
}

.facts dt {
  margin-top: var(--sp-3);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.facts dt:first-child {
  margin-top: 0;
}

.facts dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-list__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.contact-list a {
  font-size: 1.0625rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.contact-list a:hover {
  color: var(--accent-blue-glow);
  border-bottom-color: var(--accent-blue-glow);
}

/* 14. Forms ------------------------------------------------------------- */

.form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}

.field {
  margin-bottom: var(--sp-3);
}

.field__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.field__req {
  color: var(--accent-gold);
}

.field__input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background-color: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.field__input::placeholder {
  color: rgba(160, 160, 168, 0.65);
}

.field__input:hover {
  border-color: #3a3a40;
}

.field__input:focus {
  outline: none;
  border-color: var(--accent-blue);
  background-color: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.field__input--area {
  resize: vertical;
  min-height: 11rem;
}

.field--invalid .field__input {
  border-color: #e05a5a;
}

.field--invalid .field__input:focus {
  box-shadow: 0 0 0 3px rgba(224, 90, 90, 0.18);
}

.field__error {
  margin: var(--sp-1) 0 0;
  font-size: 0.8125rem;
  color: #f08a8a;
}

.alert {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background-color: rgba(224, 90, 90, 0.08);
  border: 1px solid rgba(224, 90, 90, 0.4);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: #f0a5a5;
}

.form__actions {
  margin-top: var(--sp-4);
}

.form__note {
  margin: var(--sp-2) 0 0;
  max-width: 44ch;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.form__status {
  margin: var(--sp-3) 0 0;
  font-size: 0.9375rem;
}

.form__status.is-error {
  color: #f0a5a5;
}

.form__status.is-ok {
  color: var(--accent-blue-glow);
}

.form.is-sending {
  opacity: 0.72;
  pointer-events: none;
}

/* Honeypot — hidden from people, irresistible to bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 15. Call to action ---------------------------------------------------- */

.cta {
  padding-block: var(--sp-15);
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-8);
}

.cta__title {
  margin-bottom: var(--sp-3);
  font-size: clamp(1.875rem, 3.1vw, 2.75rem);
  line-height: 1.14;
}

.cta__lede {
  margin: 0;
  max-width: 48ch;
  font-size: 1.0625rem;
  color: var(--text-secondary);
}

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  justify-self: end;
}

/* 16. Footer ------------------------------------------------------------ */

.site-footer {
  padding-top: var(--sp-12);
  border-top: 1px solid var(--border);
  background-color: var(--bg-primary);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
}

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

.site-footer__blurb {
  margin: 0;
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.site-footer__heading {
  margin-bottom: var(--sp-3);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.site-footer__list a {
  transition: color var(--transition);
}

.site-footer__list a:hover {
  color: var(--accent-blue-glow);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.site-footer__bottom p {
  margin: 0;
}

/* 17. Responsive -------------------------------------------------------- */

/* Tablet: 768–1199px */
@media (max-width: 1199px) {
  :root {
    --pad-x: 32px;
    --section-y: 96px;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + var(--sp-8));
    padding-bottom: var(--sp-12);
  }

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

  .hero__headline {
    max-width: 18ch;
    font-size: clamp(2.5rem, 6.4vw, 3.75rem);
  }

  .hero__visual {
    justify-self: center;
    width: 100%;
    max-width: 620px;
  }

  .strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .strip__item:nth-child(odd) {
    border-left: 0;
  }

  .strip__item:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .cards--3,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-nav {
    gap: var(--sp-4);
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
  :root {
    --pad-x: 20px;
    --section-y: 72px;
    --header-h: 68px;
  }

  .brand__mark {
    width: 38px;
    height: 38px;
  }

  .brand__name {
    font-size: 1.25rem;
  }

  .brand__sub {
    font-size: 0.625rem;
  }

  /* Navigation collapses behind the toggle */
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--pad-x) var(--sp-6);
    background-color: rgba(10, 10, 12, 0.98);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__item + .site-nav__item {
    border-top: 1px solid var(--border);
  }

  .site-nav__link {
    display: block;
    padding: var(--sp-2) 0;
    font-size: 0.9375rem;
  }

  .site-nav__link::after {
    display: none;
  }

  .site-nav__cta {
    justify-content: center;
  }

  .page-hero {
    padding-top: calc(var(--header-h) + var(--sp-8));
    padding-bottom: var(--sp-6);
  }

  .hero__headline {
    max-width: none;
    font-size: clamp(2.125rem, 9vw, 2.75rem);
  }

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

  .hero__actions .btn {
    width: 100%;
  }

  .hero__visual {
    max-width: 420px;
    opacity: 0.55;
  }

  .strip__grid,
  .cards--2,
  .cards--3,
  .steps,
  .steps--stacked .steps__item,
  .service,
  .two-col,
  .two-col--contact,
  .form__row,
  .cta__inner,
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .strip__grid {
    /* Single column at this width: let the strip run edge to edge rather than
       subtracting the container's padding with a negative margin, which would
       shift it left again. */
    max-width: none;
    padding-inline: 0;
  }

  .strip__item {
    padding: var(--sp-4) var(--pad-x);
    border-left: 0 !important;
  }

  .strip__item + .strip__item {
    border-top: 1px solid var(--border);
  }

  .strip__body {
    max-width: none;
  }

  .steps__item {
    padding-top: var(--sp-3);
  }

  .steps--stacked .steps__item {
    gap: var(--sp-2);
  }

  .steps--stacked .steps__name {
    font-size: 1.5rem;
  }

  .service {
    gap: var(--sp-3);
    padding: var(--sp-6) 0;
  }

  .service__title {
    font-size: 1.5rem;
  }

  .cta {
    padding-block: var(--sp-12);
  }

  .cta__actions {
    justify-self: start;
    width: 100%;
  }

  .cta__actions .btn {
    width: 100%;
  }

  .site-footer__nav,
  .site-footer__contact {
    display: block;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 18. Motion preferences ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}