/* ==========================================================================
   CO3 Group site stylesheet

   Organised as:
     1.  Tokens
     2.  Reset and base
     3.  Layout primitives
     4.  Typography
     5.  Buttons
     6.  Header and navigation
     7.  Hero sections
     8.  Home page
     9.  About page
     10. Services page
     11. Contact page
     12. Footer
     13. Motion and reveals
     14. Responsive
   ========================================================================== */

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

:root {
  --teal: #3b6b78;
  --teal-dark: #2c545e;
  --amber: #e8a030;
  --bg: #f2f2f0;
  --ink: #1a1a1a;

  --body: #3a3a38;   /* body copy on light backgrounds */
  --muted: #56564f;  /* secondary copy, card blurbs */
  --faint: #8a8a80;  /* labels, meta */
  --error: #c0392b;

  --rule: rgba(26, 26, 26, 0.08);
  --rule-strong: rgba(26, 26, 26, 0.16);

  --font-display: 'Space Grotesk', Georgia, serif;
  --font-body: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Page gutter and max width, applied by .container */
  --container: min(1240px, 100% - 44px);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --section-y: clamp(64px, 9vw, 118px);
  --section-y-tight: clamp(56px, 8vw, 96px);
}

/* -- 2. Reset and base --------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button {
  font-family: inherit;
}

a {
  color: var(--teal);
}

/* Visible keyboard focus everywhere, since several controls remove outlines. */
:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font: 600 15px var(--font-body);
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 12px;
}

/* -- 3. Layout primitives ------------------------------------------------ */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.page__main {
  flex: 1;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

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

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

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

.section--white {
  background: #fff;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.section--ink {
  background: var(--ink);
}

.section--ruled {
  border-bottom: 1px solid var(--rule);
}

.section--amber {
  background: var(--amber);
}

/* Two-column split used by the intro and mission blocks. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  align-items: flex-start;
}

.split__lead {
  flex: 1 1 320px;
  min-width: 0;
}

.split__body {
  flex: 1 1 380px;
  min-width: 0;
}

/* -- 4. Typography ------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font: 600 13px var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0;
}

.eyebrow--hero {
  letter-spacing: 0.26em;
}

/* The superscript 3 in the CO3 wordmark. */
.brand-sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

.heading-xl {
  font: 700 clamp(46px, 7.6vw, 88px) / 1 var(--font-display);
  letter-spacing: -0.025em;
  margin: 20px 0 0;
}

.heading-lg {
  font: 700 clamp(38px, 6vw, 68px) / 1.04 var(--font-display);
  letter-spacing: -0.025em;
  margin: 18px 0 0;
}

.heading-md {
  font: 700 clamp(30px, 4.4vw, 48px) / 1.08 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 16px 0 0;
}

.heading-sm {
  font: 700 clamp(26px, 3.6vw, 40px) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
}

.heading-md--narrow {
  max-width: 13ch;
}

.heading-md--mission {
  max-width: 14ch;
}

.prose {
  font: 400 clamp(17px, 1.9vw, 19px) / 1.66 var(--font-body);
  color: var(--body);
  margin: 0 0 20px;
}

.prose:last-child {
  margin-bottom: 0;
}

.prose--sm {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.72;
}

.prose--lead {
  font: 500 clamp(18px, 2.1vw, 22px) / 1.5 var(--font-body);
  color: var(--ink);
  margin-bottom: 26px;
}

.prose__highlight {
  color: var(--teal);
  font-weight: 600;
}

/* Section header with a heading on the left and a link on the right. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: clamp(34px, 4vw, 54px);
}

.section-head--stacked {
  margin-bottom: clamp(34px, 4vw, 52px);
}

.section-head--centre {
  display: block;
  text-align: center;
  max-width: 30ch;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

/* -- 5. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-radius: var(--radius-sm);
  font: 600 16px var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.btn__arrow {
  /* Decorative; the label alone carries the meaning. */
  speak: never;
}

.btn--amber {
  background: var(--amber);
  color: var(--ink);
  padding: 16px 28px;
}

.btn--amber:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(232, 160, 48, 0.32);
}

.btn--teal {
  background: var(--teal);
  color: #fff;
  padding: 16px 32px;
}

.btn--teal:hover {
  background: var(--teal-dark);
  transform: translateY(-2px);
}

.btn--ink {
  background: var(--ink);
  color: #fff;
  padding: 18px 34px;
  font-size: 17px;
  white-space: nowrap;
}

.btn--ink:hover {
  transform: translateY(-2px);
}

.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  padding: 16px 26px;
}

.btn--outline-light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--outline-teal {
  background: none;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  padding: 13px 26px;
  font-size: 15px;
}

.btn--outline-teal:hover {
  background: rgba(59, 107, 120, 0.06);
}

.btn--link {
  background: none;
  color: var(--teal);
  padding: 0;
  border-bottom: 2px solid var(--amber);
  border-radius: 0;
}

.btn--link:hover {
  color: var(--teal-dark);
}

.btn--nav {
  background: var(--teal);
  color: #fff;
  padding: 11px 20px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.btn--nav:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* -- 6. Header and navigation -------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242, 242, 240, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 15px 0;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0;
  border: none;
  background: none;
}

.site-header__logo img {
  height: 48px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  flex-wrap: wrap;
}

.site-nav__link {
  padding: 6px 1px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font: 600 15px var(--font-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

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

.site-nav__link[aria-current='page'] {
  border-bottom-color: var(--amber);
  color: var(--teal);
}

/* -- 7. Hero sections ---------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  color: #fff;
}

.hero__net {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

/* The home hero's network is oversized and drifts. */
.hero__net--drift {
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
  animation: driftnet 22s ease-in-out infinite;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    130% 100% at 82% 28%,
    rgba(44, 84, 94, 0) 30%,
    rgba(44, 84, 94, 0.55) 100%
  );
}

.hero__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  padding: clamp(56px, 8vw, 116px) 0;
}

.hero__copy {
  flex: 1 1 440px;
  min-width: 0;
}

.hero__body {
  font: 400 clamp(17px, 2.1vw, 20px) / 1.62 var(--font-body);
  color: rgba(255, 255, 255, 0.82);
  max-width: 31em;
  margin: 26px 0 0;
}

.hero__graphic {
  flex: 1 1 340px;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.hero__graphic svg {
  width: 100%;
  max-width: 430px;
  animation: floaty 7s ease-in-out infinite;
}

/* Compact hero used by about, services and contact. */
.page-hero__inner {
  position: relative;
  padding: clamp(54px, 8vw, 96px) 0;
}

.page-hero__body {
  font: 400 clamp(17px, 2vw, 20px) / 1.62 var(--font-body);
  color: rgba(255, 255, 255, 0.82);
  margin: 24px 0 0;
  max-width: 54ch;
}

.page-hero__heading--narrow {
  max-width: 18ch;
}

/* -- 8. Home page -------------------------------------------------------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.service-card {
  background: var(--bg);
  border: 1px solid rgba(26, 26, 26, 0.07);
  border-radius: var(--radius-md);
  padding: 30px 26px 28px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(26, 26, 26, 0.09);
  border-color: rgba(232, 160, 48, 0.5);
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(59, 107, 120, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card__num {
  font: 700 15px var(--font-display);
  color: var(--amber);
  letter-spacing: 0.04em;
}

.service-card__title {
  font: 600 21px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.2;
}

.service-card__blurb {
  font: 400 15px / 1.6 var(--font-body);
  color: var(--muted);
  margin: 0;
}

/* Method: diagram plus numbered list. */
.method {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  justify-content: center;
}

.method__diagram {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 470px;
  margin-inline: auto;
}

.method__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.method__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.method__line {
  stroke: var(--teal);
  stroke-width: 0.9;
}

.method__node {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.method__node--spoke {
  width: 25%;
  background: var(--amber);
  color: var(--ink);
  box-shadow: 0 0 0 7px var(--bg);
}

.method__node--hub {
  width: 33%;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 0 0 7px var(--bg), 0 0 0 12px rgba(59, 107, 120, 0.16);
}

.method__node--top { left: 50%; top: 15%; }
.method__node--left { left: 20%; top: 81%; }
.method__node--right { left: 80%; top: 81%; }
.method__node--centre { left: 50%; top: 50%; }

.method__node-num {
  font: 700 clamp(16px, 3vw, 24px) var(--font-display);
  line-height: 1;
}

.method__node--hub .method__node-num {
  font-size: clamp(20px, 4vw, 30px);
}

.method__node-label {
  font: 600 clamp(9px, 1.5vw, 12px) var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

.method__node--hub .method__node-label {
  font-size: clamp(10px, 1.7vw, 13px);
  letter-spacing: 0.08em;
  margin-top: 3px;
}

.method__list {
  flex: 1 1 330px;
  min-width: 0;
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.method__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.method__badge {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px var(--font-display);
}

.method__item:first-child .method__badge {
  background: var(--teal);
  color: #fff;
}

.method__item-copy {
  min-width: 0;
}

.method__item-title {
  font: 600 19px var(--font-display);
  color: var(--ink);
  margin: 0 0 5px;
}

.method__item-body {
  font: 400 15px / 1.6 var(--font-body);
  color: var(--muted);
  margin: 0;
}

/* Closing call to action band. */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cta-band__copy {
  min-width: 0;
}

.cta-band__heading {
  font: 700 clamp(26px, 3.4vw, 40px) / 1.12 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.cta-band__body {
  font: 400 clamp(16px, 1.7vw, 18px) / 1.55 var(--font-body);
  color: #4a3a18;
  margin: 12px 0 0;
}

.cta-dark__heading {
  font: 700 clamp(28px, 4vw, 44px) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  max-width: 20ch;
}

.cta-dark .btn {
  margin-top: 30px;
}

/* -- 9. About page ------------------------------------------------------- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.value {
  border-left: 3px solid var(--amber);
  padding: 6px 0 6px 22px;
}

.value__title {
  font: 600 20px var(--font-display);
  color: var(--ink);
  margin: 0 0 10px;
}

.value__body {
  font: 400 15px / 1.62 var(--font-body);
  color: var(--muted);
  margin: 0;
}

/* -- 10. Services page --------------------------------------------------- */

.service-detail {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(48px, 7vw, 82px) 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}

.service-detail__copy {
  flex: 1 1 300px;
  min-width: 0;
}

.service-detail__rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.service-detail__num {
  font: 700 16px var(--font-display);
  color: var(--amber);
  letter-spacing: 0.06em;
}

.service-detail__rule::after {
  content: '';
  height: 1px;
  width: 42px;
  background: var(--amber);
}

.service-detail__body {
  font: 400 clamp(16px, 1.8vw, 18px) / 1.66 var(--font-body);
  color: var(--body);
  margin: 0 0 22px;
  max-width: 46ch;
}

.service-detail__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}

.service-detail__point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 400 15px / 1.5 var(--font-body);
  color: var(--body);
}

.service-detail__point::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  margin-top: 7px;
}

.service-detail__visual {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* Image order flips on alternating rows; see .service-detail--reverse. */
.service-detail--reverse .service-detail__copy {
  order: 1;
}

.service-detail--reverse .service-detail__visual {
  order: 0;
}

.service-photo {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--teal);
  overflow: hidden;
}

.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-photo__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    150deg,
    rgba(59, 107, 120, 0.3),
    rgba(44, 84, 94, 0.04) 45%,
    rgba(44, 84, 94, 0.46)
  );
}

.service-photo__mark {
  position: absolute;
  top: 16px;
  left: 16px;
  height: 48px;
  width: auto;
}

/* -- 11. Contact page ---------------------------------------------------- */

.contact-layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 72px);
  align-items: flex-start;
}

.contact-layout__form {
  flex: 1 1 380px;
  min-width: 0;
}

.contact-layout__aside {
  flex: 1 1 280px;
  min-width: 0;
}

.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 40px);
}

.contact-form__fields {
  display: grid;
  gap: 20px;
}

.contact-form__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.field {
  display: block;
}

.field__label {
  display: block;
  font: 600 13px var(--font-body);
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 8px;
}

.field__optional {
  color: #a0a098;
  font-weight: 400;
}

.field__input {
  width: 100%;
  border: 1.5px solid var(--rule-strong);
  border-radius: 5px;
  padding: 13px 14px;
  font: 400 16px var(--font-body);
  background: #fafafa;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

textarea.field__input {
  line-height: 1.5;
  resize: vertical;
}

.field__input:focus {
  border-color: var(--teal);
  background: #fff;
}

.field__input[aria-invalid='true'] {
  border-color: var(--error);
}

.field__error {
  display: block;
  font: 500 13px var(--font-body);
  color: var(--error);
  margin-top: 6px;
}

/* Honeypot. Hidden from people, left in the DOM for bots to fill in.
   Not display:none, because some bots skip those. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__submit {
  justify-self: start;
}

.contact-form__submit[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* Banner shown when the whole submission failed. */
.form-alert {
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 22px;
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid rgba(192, 57, 43, 0.3);
}

.form-alert__title {
  font: 600 16px var(--font-display);
  color: var(--error);
  margin: 0 0 4px;
}

.form-alert__body {
  font: 400 14px / 1.55 var(--font-body);
  color: var(--body);
  margin: 0;
}

/* Success panel. */
.success {
  text-align: center;
}

.success__tick {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(59, 107, 120, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}

.success__heading {
  font: 700 24px var(--font-display);
  color: var(--ink);
  margin: 0 0 12px;
}

.success__body {
  font: 400 16px / 1.6 var(--font-body);
  color: var(--muted);
  margin: 0 auto 26px;
  max-width: 38ch;
}

/* Contact channel list. */
.channels {
  display: grid;
  gap: 8px;
}

.channels__heading {
  font: 600 14px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 24px;
}

.channel {
  display: flex;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 18px 20px;
  transition: border-color 0.2s, transform 0.2s;
}

a.channel:hover {
  border-color: rgba(232, 160, 48, 0.6);
  transform: translateX(3px);
}

.channel__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(59, 107, 120, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.channel__label {
  display: block;
  font: 600 12px var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.channel__value {
  display: block;
  font: 600 16px var(--font-body);
  color: var(--ink);
  margin-top: 3px;
  word-break: break-word;
}

.contact-note {
  margin-top: 24px;
  padding: 20px;
  border-radius: 8px;
  background: rgba(59, 107, 120, 0.07);
  border: 1px solid rgba(59, 107, 120, 0.14);
}

.contact-note p {
  font: 400 14px / 1.6 var(--font-body);
  color: var(--body);
  margin: 0;
}

/* -- 12. Footer ---------------------------------------------------------- */

.site-footer {
  background: var(--teal);
  color: #fff;
  padding: clamp(48px, 6vw, 72px) 0 0;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(36px, 5vw, 56px);
}

.site-footer__brand {
  flex: 1 1 280px;
  max-width: 340px;
}

.site-footer__mark {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.site-footer__mark img {
  height: 48px;
  width: auto;
}

.site-footer__wordmark {
  font: 700 20px var(--font-display);
  letter-spacing: 0.05em;
  color: #fff;
}

.site-footer__tagline {
  font: 600 16px var(--font-display);
  letter-spacing: 0.01em;
  color: var(--amber);
  margin: 0 0 10px;
}

.site-footer__description {
  font: 400 15px / 1.6 var(--font-body);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 32ch;
}

.site-footer__links {
  flex: 0 1 auto;
  text-align: right;
}

.site-footer__links h2 {
  font: 600 12px var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}

.site-footer__link-list {
  display: grid;
  gap: 11px;
}

.site-footer__link-list a {
  text-decoration: none;
  font: 400 15px var(--font-body);
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s;
}

.site-footer__link-list a:hover {
  color: var(--amber);
}

.site-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0;
  font: 400 13px var(--font-body);
  color: rgba(255, 255, 255, 0.6);
}

/* -- 13. Motion and reveals ---------------------------------------------- */

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes pulsering {
  0% { transform: scale(0.7); opacity: 0.55; }
  100% { transform: scale(2.15); opacity: 0; }
}

@keyframes spinslow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes driftnet {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-14px, 10px); }
}

.spin-slow {
  transform-box: fill-box;
  transform-origin: center;
  animation: spinslow 70s linear infinite;
}

.spin-slow--reverse {
  animation: spinslow 95s linear infinite reverse;
}

.pulse-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulsering 3.4s ease-out infinite;
}

.pulse-ring--delay-1 { animation-delay: 0.9s; }
.pulse-ring--delay-2 { animation-delay: 1.8s; }

.breathe {
  transform-box: fill-box;
  transform-origin: center;
  animation: breathe 4.5s ease-in-out infinite;
}

/*
 * Scroll reveals. The starting state is applied only when the `js` class is
 * present on <html>, which the inline script in the head sets. Without
 * JavaScript nothing is ever hidden, so the content is always readable.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

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

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* -- 14. Responsive ------------------------------------------------------ */

@media (max-width: 760px) {
  .site-header__inner {
    justify-content: center;
  }

  .site-nav {
    justify-content: center;
    gap: 18px;
    width: 100%;
  }

  .site-footer__links {
    text-align: left;
  }

  .section-head {
    align-items: flex-start;
  }

  /* Alternating image order reads badly in a single column; keep copy first. */
  .service-detail--reverse .service-detail__copy,
  .service-detail--reverse .service-detail__visual {
    order: 0;
  }
}

@media (max-width: 460px) {
  .site-nav {
    gap: 14px;
  }

  .site-nav__link {
    font-size: 14px;
  }
}

@media print {
  .site-header,
  .hero__net,
  .hero__scrim,
  .btn {
    display: none;
  }

  body {
    background: #fff;
  }
}