/* =========================================================================
   Valorix Group
   Design tokens and styles for the single-page site.
   Section order matches index.html.
   ========================================================================= */

/* -------------------------------------------------------------- 1. Tokens */

:root {
  /* Colour */
  --navy-900: #07141f; /* page background, hero base */
  --navy-800: #0d1d2b; /* alternate dark sections, form panel, inputs */
  --navy-700: #0b1b28; /* photo panel fallback */
  --navy-footer: #050e16;
  --bone: #efe8da; /* main text on dark, light section background */
  --bone-body: #e6deca; /* body copy on dark */
  --bone-small: #d9d1be; /* small copy on dark */
  --copper: #c9844a; /* accent on dark */
  --copper-deep: #8a4f22; /* accent on bone (copper fails contrast there) */
  --line: #34495b; /* rules on dark */
  --line-light: #a99f89; /* rules on bone */
  --field-border: #4a5e70;
  --light-body: #2b3540; /* body text on bone */
  --error: #f0a68a;

  /* Type */
  --font-cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(72px, 9vw, 144px);
  --maxw: 1320px;
}

/* ------------------------------------------------------------ 2. Resets */

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

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

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

p {
  overflow-wrap: break-word;
}

/* Visible focus everywhere, including on dark panels. */
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
}

.light :focus-visible {
  outline-color: var(--copper-deep);
}

@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;
  }
}

/* --------------------------------------------------- 3. Shared primitives */

.cond {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper);
}

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

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

.section--alt {
  background: var(--navy-800);
}

.section--light {
  background: var(--bone);
  color: var(--navy-900);
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Two-column blocks collapse to one column on narrow screens. */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(40px, 5vw, 64px);
  align-items: start;
}

.cols--center {
  align-items: center;
}

.lede {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--bone-body);
}

.light .lede,
.light .body {
  color: var(--light-body);
}

.body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--bone-body);
}

/* Anchor targets sit clear of the top of the viewport. */
[id] {
  scroll-margin-top: 24px;
}

/* Buttons. Sharp corners, no radius anywhere on the site. */
.btn {
  display: inline-block;
  padding: 18px 32px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.18s ease, filter 0.18s ease;
}

.btn--solid {
  background: var(--copper);
  color: var(--navy-900);
  border: 0;
}

.btn--solid:hover {
  filter: brightness(1.1);
}

.btn--line {
  padding: 16.5px 32px;
  border: 1.5px solid var(--bone);
  background: transparent;
  color: var(--bone);
}

.btn--line:hover {
  background: rgba(239, 232, 218, 0.12);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Text link with an arrow. */
.more {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--copper);
}

.more:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 14px 22px;
  background: var(--copper);
  color: var(--navy-900);
  font-weight: 600;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ------------------------------------------------------- 4. Nav and hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 880px;
  overflow: hidden;
  background: var(--navy-900);
}

@media (max-height: 760px) {
  .hero {
    min-height: 100svh;
  }
}

.hero__media,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 20, 31, 0.72) 0%,
    rgba(7, 20, 31, 0.05) 32%,
    rgba(7, 20, 31, 0.9) 100%
  );
}

.nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  padding: 28px var(--gutter);
}

/* Pushes the links and the call to action to the right of the logo. */
.nav__logo {
  margin-right: auto;
}

.nav__logo img {
  display: block;
  width: auto;
  height: 64px;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 12px 20px;
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  /* Five links plus the logo and the button only just fit at the narrow end
     of the wide layout. Closing the gap there keeps the button on the same
     row; above about 1450px it is back to the original 32px. */
  gap: 12px clamp(20px, 2.2vw, 32px);
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav__link {
  opacity: 0.85;
}

.nav__link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.nav__cta {
  padding: 14px 24px;
}

/* The toggle only exists when JS is running; without it the links stay put. */
.nav__toggle {
  display: none;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
  background: transparent;
  border: 1.5px solid rgba(239, 232, 218, 0.55);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav__toggle:hover {
  border-color: var(--bone);
  background: rgba(239, 232, 218, 0.1);
}

.nav__toggle-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.nav__toggle-bars::before {
  top: -6px;
}

.nav__toggle-bars::after {
  top: 6px;
}

@media (max-width: 1000px) {
  .js .nav__toggle {
    display: inline-flex;
  }

  .js .nav__links {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    background: var(--navy-900);
  }

  .js .nav[data-menu='open'] .nav__links {
    display: flex;
  }

  .js .nav__links .nav__link {
    width: 100%;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }

  .nav {
    padding-block: 20px;
  }

  .nav__logo img {
    height: 48px;
  }
}

@media (max-width: 420px) {
  .nav__cta {
    padding: 12px 16px;
    font-size: 14px;
  }

  .nav__toggle {
    padding: 11px 14px;
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1500px;
  padding: 0 var(--gutter) clamp(56px, 7vw, 72px);
}

.hero__title {
  margin: 0;
  font-size: clamp(56px, 10.5vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.005em;
}

@media (max-width: 560px) {
  .hero__title br {
    display: none;
  }
}

.hero__below {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  align-items: flex-end;
  margin-top: clamp(28px, 3.5vw, 40px);
}

.hero__below p {
  margin: 0;
  max-width: 560px;
}

/* --------------------------------------------------- 5. Who we are */

.h2 {
  margin: 0 0 24px;
  font-size: clamp(42px, 5.6vw, 88px);
  line-height: 0.96;
}

.about__media {
  width: 100%;
  height: auto;
  display: block;
}

.keeps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.keeps__title {
  margin: 0 0 8px;
  font-size: 28px;
  color: var(--copper);
}

.keeps p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--bone-small);
}

/* --------------------------------------------- 6. Our work and the rail */

/* A section that holds a rail runs edge to edge so the rail can bleed past
   the gutter; the blocks inside it put the gutter back. Our work and Reviews
   both use it. */
.section--rail {
  padding-left: 0;
  padding-right: 0;
}

.section--rail > .wrap {
  padding-inline: var(--gutter);
}

.work__lede {
  max-width: 62ch;
}

/* The rail. Cards keep their own aspect ratio and share one height, so the
   layout never crops a photograph to fit a shape it was not shot in. */
.rail {
  --card-h: clamp(300px, 48vh, 560px);
  --rail-gap: clamp(14px, 1.6vw, 28px);
  margin-top: clamp(48px, 6vw, 80px);
  /* Two tracks sit side by side so the loop has somewhere to go. The gap here
     is the seam between them and must match the gap inside a track, or the
     rhythm breaks once per lap. */
  display: flex;
  gap: var(--rail-gap);
  padding-left: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.rail::-webkit-scrollbar {
  height: 8px;
}

.rail::-webkit-scrollbar-track {
  background: transparent;
}

.rail::-webkit-scrollbar-thumb {
  background: var(--line);
}

.rail__track {
  list-style: none;
  margin: 0;
  padding: 0 0 18px;
  display: flex;
  gap: var(--rail-gap);
  width: max-content;
}

/* The second copy of the track, added by JavaScript to make the loop
   seamless. It is hidden from assistive technology so the photographs are
   not announced twice. */
.rail__track--clone {
  display: flex;
}

.rail__item {
  flex: 0 0 auto;
  /* --ar is set inline per card by tools/build-gallery.mjs. */
  width: min(78vw, calc(var(--card-h) * var(--ar)));
  scroll-snap-align: center;
}

.shot {
  margin: 0;
}

/* `height: auto` is required: the width and height attributes on the img are
   a presentational hint that would otherwise beat aspect-ratio. */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  background: var(--navy-700);
}

.shot__cap {
  display: block;
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--copper);
}

.shot__kicker {
  display: block;
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  color: var(--copper);
}

.shot__text {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bone-small);
}


.rail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(20px, 3vw, 32px);
}

.rail__hint {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bone-small);
}

/* Without JavaScript the buttons would do nothing, so JavaScript reveals
   them. Native scrolling and the keyboard work either way. */
.rail__nav {
  display: none;
  gap: 10px;
}

.js .rail__nav {
  display: flex;
}

.rail__btn {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.rail__btn svg {
  width: 20px;
  height: 20px;
}

/* The play and pause icons share one button; aria-pressed decides which of
   them is drawn, so the state is never carried by the icon alone. */
.rail__btn--play {
  width: auto;
  gap: 8px;
  padding: 0 16px;
}

.rail__btn-label {
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
}

.rail__btn--play .rail__ico-play,
.rail__btn--play[aria-pressed='true'] .rail__ico-pause {
  display: none;
}

.rail__btn--play[aria-pressed='true'] .rail__ico-play {
  display: block;
}

.rail__btn:hover:not([disabled]) {
  border-color: var(--copper);
  color: var(--copper);
}

.rail__btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .rail {
    scroll-snap-type: none;
  }
}

/* ----------------------------------------------------- 7. Reviews */

/* The reviews ride the same rail as Our work. Text has no aspect ratio to
   keep, so every card is one fixed width, and the track's default stretch
   gives every card the height of the longest quote. */
.rail--reviews {
  margin-top: clamp(40px, 5vw, 64px);
  scrollbar-color: var(--line-light) transparent;
}

.rail--reviews::-webkit-scrollbar-thumb {
  background: var(--line-light);
}

.rail--reviews .rail__item {
  width: min(82vw, 380px);
}

/* The rule on top matches the pillars in How it works, so the two read as
   the same kind of block rather than two inventions. */
.review {
  padding-top: 24px;
  border-top: 4px solid var(--copper-deep);
  /* Quotes differ in length, so the card keeps the attribution on a shared
     baseline instead of letting it float up under a short one. */
  display: flex;
  flex-direction: column;
}

/* The star shape is drawn once, in a sprite that takes up no room. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Five filled stars. Copper-deep because plain copper is too faint on bone. */
.review__stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  color: var(--copper-deep);
}

.review__stars svg {
  width: 20px;
  height: 20px;
}

.review__text {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--light-body);
}

.review__who {
  margin: auto 0 0;
  padding-top: 20px;
}

.review__name {
  display: block;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper-deep);
}

.review__meta {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--light-body);
  opacity: 0.75;
}

/* The rail controls are drawn for a dark section. On bone they take the
   bone section's text, rule and accent colours instead. */
.light .rail__hint {
  color: var(--light-body);
}

.light .rail__btn {
  border-color: var(--light-body);
  color: var(--light-body);
}

.light .rail__btn:hover:not([disabled]) {
  border-color: var(--copper-deep);
  color: var(--copper-deep);
}


/* --------------------------------------------------- 8. For owners */

.partner__title {
  margin: 0 0 24px;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: 0.94;
}

.partner__lede {
  margin: 0 0 36px;
  max-width: 460px;
}

/* Placeholder for Pat Cassidy's video. The dashed edge and the badge are
   there so nobody mistakes it for finished work, and so it is obvious on the
   page if it ever reaches the real domain by accident. */
.vidslot {
  margin: 0;
  width: 100%;
}

.vidslot__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  padding: 22px;
  border: 2px dashed var(--field-border);
  background: var(--navy-900);
}

.vidslot__badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 12px;
  background: var(--copper);
  color: var(--navy-900);
  font-family: var(--font-cond);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
}

/* A plain triangle, drawn with borders so it needs no extra asset. */
.vidslot__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -18px 0 0 -11px;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent var(--field-border);
}

.vidslot__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--bone-body);
}

.vidslot__cap {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-small);
  opacity: 0.75;
}

/* --------------------------------------- 9. How it works day to day */

.support__title {
  margin: 0 0 clamp(36px, 5vw, 56px);
  max-width: 980px;
  font-size: clamp(42px, 5.8vw, 92px);
  line-height: 0.96;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px;
}

.pillar {
  padding-top: 24px;
  border-top: 4px solid var(--copper-deep);
}

.pillar h3 {
  margin: 0 0 12px;
  font-size: clamp(30px, 2.6vw, 34px);
}

.pillar p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--light-body);
}

/* ------------------------------------------------- 10. Our companies */

.companies__title {
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 960px;
  font-size: clamp(42px, 5.8vw, 92px);
  line-height: 0.96;
}

.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 32px;
}

.company {
  background: var(--navy-800);
}

/* `height: auto` is required: the width/height attributes on the img are a
   presentational hint that would otherwise beat aspect-ratio. */
.company img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.company__body {
  padding: 32px;
}

.company__body .eyebrow {
  margin-bottom: 10px;
}

.company__name {
  margin: 0 0 14px;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1;
}

.company__body p {
  margin: 0;
}

.company--open {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-height: 360px;
  padding: 32px;
  border: 2px dashed var(--field-border);
}

.company--open .eyebrow,
.company--open p {
  margin: 0;
}

.company--open p {
  max-width: 440px;
}

.quote {
  margin: clamp(48px, 6vw, 72px) 0 0;
  max-width: 1000px;
}

.quote blockquote {
  margin: 0;
  font-family: var(--font-cond);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: 1.05;
}

.quote figcaption {
  margin-top: 24px;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper);
}

/* ------------------------------------------------- 11. For the crews */

.people__media {
  display: block;
  width: 100%;
  height: auto; /* see the note on .company img */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 60%;
}

.ruled {
  display: grid;
  margin: 0 0 36px;
  border-top: 1px solid var(--line);
}

.ruled li,
.ruled p {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  list-style: none;
}

/* ---------------------------------------------------- 12. Contact form */

.contact__title {
  margin: 0 0 24px;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.92;
}

.contact__lede {
  margin: 0 0 40px;
  max-width: 460px;
}

.details {
  display: grid;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.details dt {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--copper);
}

.details dd {
  margin: 0;
  font-size: 20px;
}

.details a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.form {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 3vw, 44px);
  background: var(--navy-800);
}

.field label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bone);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--navy-900);
  border: 1px solid var(--field-border);
  border-radius: 0;
  color: var(--bone);
  font: inherit;
  font-size: 16px;
}

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

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--bone) 50%),
    linear-gradient(135deg, var(--bone) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 1px;
}

.field [aria-invalid='true'] {
  border-color: var(--error);
  border-width: 2px;
}

.field__error {
  display: none;
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--error);
}

.field__error[data-shown='true'] {
  display: block;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin: 0;
  padding: 16px 18px;
  font-size: 17px;
  line-height: 1.5;
}

.form__status[hidden] {
  display: none;
}

.form__status--ok {
  border-left: 4px solid var(--copper);
  background: rgba(201, 132, 74, 0.14);
  color: var(--bone);
}

.form__status--bad {
  border-left: 4px solid var(--error);
  background: rgba(240, 166, 138, 0.12);
  color: var(--bone);
}

.form button[type='submit'] {
  min-height: 56px;
  padding: 0 32px;
  font-size: 17px;
}

.form button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* ------------------------------------------------------- 13. Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: center;
  justify-content: space-between;
  padding: 48px var(--gutter);
  background: var(--navy-footer);
}

.footer img {
  display: block;
  width: auto;
  height: 72px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  font-size: 14px;
  color: #b7b2a6;
}

.footer__links a:hover {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (max-width: 520px) {
  .footer img {
    height: 56px;
  }
}