/* ==========================================================================
   Mares Interactive Agency — Design System
   ========================================================================== */

:root {
  /* Brand colors — sampled directly from the logo */
  --navy-950: #050b16;
  --navy-900: #081428;
  --navy-800: #0d1c34;
  --navy-700: #142842;
  --navy-600: #1d3554;

  --copper-900: #7a3f1c;
  --copper-700: #a85a2a;
  --copper-600: #c97a3d;
  --copper-500: #dc8f52;
  --copper-400: #e8a06b;
  --copper-gold: #ffe4aa;

  --sage-600: #647159;
  --sage-500: #7c8b6e;
  --sage-400: #97a58a;

  --ink: #f4f1ea;
  --ink-dim: #c7cdd8;
  --ink-muted: #8a93a6;

  --bg: var(--navy-900);
  --bg-elevated: var(--navy-800);
  --border: rgba(244, 241, 234, 0.1);

  --gradient-copper: linear-gradient(135deg, var(--copper-600) 0%, var(--copper-500) 45%, var(--copper-400) 100%);
  --gradient-glow: radial-gradient(circle, rgba(201, 122, 61, 0.35) 0%, rgba(201, 122, 61, 0) 70%);

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1200px;
  --nav-height: 84px;
}

/* Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

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

/* Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-copper);
  color: var(--navy-950);
  box-shadow: 0 8px 24px -8px rgba(201, 122, 61, 0.6);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(201, 122, 61, 0.75);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  border-color: var(--copper-500);
  color: var(--copper-400);
}

.btn-lg {
  padding: 16px 34px;
  font-size: 1rem;
}

/* Navigation
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

/* Blur lives on a pseudo-element, not on .nav itself — backdrop-filter on .nav
   would make it the containing block for its position:fixed descendants
   (the mobile nav-links panel), breaking their viewport-relative positioning. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5, 11, 22, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.3s ease;
}

.nav.is-scrolled {
  border-bottom-color: var(--border);
}

.nav.is-scrolled::before {
  background: rgba(5, 11, 22, 0.92);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-brand img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 8px;
}

.nav-brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-brand .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.nav-brand .brand-tag {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-400);
  font-weight: 600;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}

.nav-links a {
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  font-weight: 500;
  color: var(--ink-dim);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--gradient-copper);
  transition: width 0.25s ease;
  border-radius: 2px;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lang-toggle:hover {
  border-color: var(--copper-500);
  color: var(--copper-400);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 110;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hero
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 800px) {
  .hero {
    height: auto;
    aspect-ratio: 700 / 941;
    max-height: 100vh;
  }

  .hero-image {
    position: relative;
    top: 0;
    height: 100%;
  }
}

/* Splash intro
   ========================================================================== */
html.splash-lock,
html.splash-lock body {
  overflow: hidden;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-950);
  opacity: 1;
  transition: opacity 0.7s ease;
}

.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.splash__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.splash__skip {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 1;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(5, 11, 22, 0.55);
  border: 1px solid rgba(244, 241, 234, 0.25);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.splash__skip:hover {
  color: var(--copper-400);
  border-color: rgba(232, 160, 107, 0.5);
  background: rgba(5, 11, 22, 0.75);
}

@media (max-width: 480px) {
  .splash__skip {
    right: 18px;
    bottom: 18px;
    padding: 8px 16px;
    font-size: 0.72rem;
  }
}

/* Services — single editorial service panel
   ========================================================================== */
.services {
  position: relative;
  padding: 140px 0 160px;
  background: var(--navy-900);
  overflow: hidden;
}

.services-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}

.services-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-400);
  white-space: nowrap;
}

.services-copy {
  max-width: 420px;
  text-align: right;
}

.services-copy-text {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.services-secondary {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Panel stage — establishes the 3D perspective context */
.service-panel-stage {
  perspective: 1200px;
}

/* Scroll-driven layer: entrance settle + slow scale-in as the section
   passes, kept separate from the hover-tilt layer below it so GSAP's
   ScrollTrigger scrub and the mousemove tilt never fight over the same
   transform properties on the same element. */
.service-panel-scroll {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.service-panel {
  position: relative;
  height: clamp(420px, 62vw, 620px);
  border-radius: 8px;
  background: var(--navy-800);
  border: 1px solid var(--border);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: default;
}

.panel-layer {
  position: absolute;
}

.panel-bg {
  inset: -10% -10%;
  background:
    linear-gradient(180deg, rgba(201, 122, 61, 0.05) 0%, rgba(5, 11, 22, 0) 40%),
    var(--navy-800);
  pointer-events: none;
}

.panel-title-layer {
  top: 0;
  left: 0;
  right: 0;
  padding: 44px 48px 0;
  z-index: 3;
  pointer-events: none;
}

.panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.75rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.panel-support-line {
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--ink-dim);
  opacity: 0.7;
  letter-spacing: 0.01em;
}

.panel-title-mask {
  display: block;
  overflow: hidden;
}

.panel-title-line {
  display: block;
  transform: translateY(100%);
}

.panel-visual {
  left: 6%;
  right: 6%;
  bottom: 0;
  top: 34%;
  z-index: 2;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  cursor: none;
}

.panel-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--navy-800) 0%, rgba(8, 20, 40, 0) 30%);
  opacity: 0.9;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.service-panel.is-hovering .panel-visual::after {
  opacity: 0.45;
}

/* Touch devices have no hover — settle for a lighter static scrim since the
   reveal there comes from scroll position (see js/service-panel.js) instead. */
.service-panel.is-touch .panel-visual::after {
  opacity: 0.55;
}

.panel-visual img,
.panel-visual__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: var(--navy-900);
  transform: scale(0.97) translateY(3%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The mockup image is a ~4:3 screenshot, but the visual box on desktop is
   much wider/shorter than that — cover-fit was cropping its bottom half
   clean off. Desktop switches to contain (whole image, letterboxed in a
   matching navy) instead; the box is close enough to square on mobile that
   cover-fit there only trims the sides, which reads fine, so it's untouched. */
@media (min-width: 801px) {
  .panel-visual img,
  .panel-visual__media {
    object-fit: contain;
  }
}

.service-panel.is-hovering .panel-visual img,
.service-panel.is-hovering .panel-visual__media {
  transform: scale(1) translateY(0%);
}

/* GSAP drives this transform directly on touch (scroll-scrubbed); a CSS
   transition here would fight it and lag behind the scroll position. */
.service-panel.is-touch .panel-visual img,
.service-panel.is-touch .panel-visual__media {
  transition: none;
}

/* Curtain reveal — covers the mockup at rest and wipes away left-to-right
   once, on scroll entrance (see js/service-panel.js). Transform-origin on
   the right so the covered edge is the last to clear. */
.panel-visual__curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--navy-800);
  transform-origin: right center;
  pointer-events: none;
}

/* Copper cursor light — a soft reflection that tracks the pointer inside
   the visual, positioned via --sheen-x/--sheen-y set from JS. */
.panel-visual__sheen {
  position: absolute;
  inset: 0;
  background: radial-gradient(480px circle at var(--sheen-x, 50%) var(--sheen-y, 50%), rgba(220, 143, 82, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s ease;
  mix-blend-mode: screen;
  pointer-events: none;
}

.service-panel.is-hovering .panel-visual__sheen {
  opacity: 1;
}

.service-panel.is-touch .panel-visual__sheen {
  display: none;
}

.panel-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  border: 1px solid rgba(232, 160, 107, 0.5);
  background: rgba(5, 11, 22, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--copper-400);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 4;
}

.service-panel.is-hovering .panel-cursor {
  opacity: 1;
  transform: scale(1);
}

.panel-cursor-arrow {
  font-size: 0.95rem;
  line-height: 1;
}

.panel-details {
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(5, 11, 22, 0.6) 0%, rgba(5, 11, 22, 0) 100%);
  pointer-events: none;
}

.panel-index {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.panel-caption {
  font-size: 0.85rem;
  color: var(--ink-dim);
  flex: 1;
}

.panel-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  pointer-events: auto;
}

.panel-view-arrow {
  transition: transform 0.25s ease;
}

.panel-view:hover .panel-view-arrow {
  transform: translate(2px, -2px);
}

/* Technical annotations — small editorial labels beside the title, each
   with a short thin line reaching toward the panel's edge. Purely
   decorative (aria-hidden), revealed one at a time on scroll, nudged on
   mousemove. Anchored with fixed pixel offsets (not the title's own clamp
   scale) so they stay safely inside the title's own vertical space at
   every panel height instead of risking overflow past the visual below. */
.panel-annotations {
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.panel-annotation {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--copper-400);
  opacity: 0;
  white-space: nowrap;
}

.panel-annotation__line {
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(232, 160, 107, 0.4);
}

.panel-annotation--1 {
  top: 54px;
}

.panel-annotation--2 {
  top: 80px;
}

.panel-annotation--3 {
  top: 106px;
}

@media (max-width: 640px) {
  .panel-annotations {
    display: none;
  }
}

/* Responsive
   ========================================================================== */
@media (max-width: 800px) {
  .nav-links {
    position: fixed;
    inset: 0 0 0 30%;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    background: var(--navy-900);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40px 32px;
    gap: 28px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-left: 1px solid var(--border);
  }

  .nav-links.is-open {
    transform: translateX(0);
  }

  .nav-links a {
    font-size: 1.1rem;
  }

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

  .nav-toggle {
    display: flex;
  }

  .services {
    padding: 96px 0;
  }

  .services-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .services-copy {
    max-width: 100%;
    text-align: left;
  }

  .service-panel {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .panel-title-layer {
    padding: 28px 24px 0;
  }

  .panel-visual {
    left: 4%;
    right: 4%;
    top: 30%;
  }

  .panel-details {
    padding: 16px 20px;
  }

  .panel-caption {
    display: none;
  }
}

/* Work — full-CSS scroll-driven carousel
   ========================================================================== */
.work {
  position: relative;
  padding: 140px 0 120px;
  background: var(--navy-900);
  overflow: hidden;
}

.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

.work-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-400);
  white-space: nowrap;
}

.work-sub {
  max-width: 380px;
  text-align: right;
  font-size: 1rem;
  color: var(--ink-dim);
}

.work-pin {
  position: relative;
}

@supports (animation-timeline: scroll(inline)) {
  /* Named timeline: the progress bar isn't a descendant of the scrolling
     track (it sits above it), so it needs a name + timeline-scope to bind
     to that scroller rather than "nearest", which would find the wrong one.
     Only applies in the mobile/native-scroll fallback (see js/work-carousel.js) —
     the desktop pinned mode drives the bar from JS instead. */
  .work-pin:not(.is-pinned) {
    timeline-scope: --work-scroll;
  }
}

/* Desktop: JS (GSAP ScrollTrigger) pins this element and translates the
   track horizontally as the page scrolls vertically past it. */
.work-pin.is-pinned {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.work-pin.is-pinned .work-track {
  overflow: visible;
  scroll-snap-type: none;
}

.work-pin.is-pinned .work-card__inner {
  animation: none;
}

.work-pin.is-pinned .work-progress-bar {
  animation: none;
  transform: scaleX(0);
}

.work-progress {
  height: 2px;
  margin: 0 24px 32px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.work-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--gradient-copper);
  transform-origin: left center;
  transform: scaleX(0);
}

@supports (animation-timeline: scroll(inline)) {
  .work-progress-bar {
    animation: work-progress-fill linear both;
    animation-timeline: --work-scroll;
  }
}

@keyframes work-progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.work-track {
  display: flex;
  gap: 24px;
  padding: 8px 24px 24px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-timeline: --work-scroll inline;
}

.work-track::-webkit-scrollbar {
  display: none;
}

.work-track:focus-visible {
  outline: 2px solid var(--copper-500);
  outline-offset: 4px;
}

.work-pin:focus-visible {
  outline: 2px solid var(--copper-500);
  outline-offset: -4px;
}

.work-card {
  flex: 0 0 auto;
  width: min(78vw, 760px);
  height: clamp(360px, 52vw, 520px);
  scroll-snap-align: center;
}

.work-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.work-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card 01 uses the client's logo (near-square, black background) rather than
   a landscape photo — contain keeps the full badge visible instead of
   cropping it, and the dark fill blends with the badge's own black background. */
.work-card--01 .work-card__inner {
  background: #030303;
}

.work-card--01 .work-card__image {
  object-fit: contain;
  padding: 32px;
}

.work-card--01 .work-card__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(5, 11, 22, 0.85) 0%, rgba(5, 11, 22, 0.15) 45%, rgba(5, 11, 22, 0.35) 100%);
  pointer-events: none;
}

/* Placeholder background treatments — distinct per card, brand-toned.
   Swap these for real project screenshots when client work is ready. */
/* Card 02 also uses a client logo (navy background, near-square) — same
   contain treatment as card 01 so the full badge stays visible. */
.work-card--02 .work-card__inner {
  background: #050a14;
}

.work-card--02 .work-card__image {
  object-fit: contain;
  padding: 32px;
}

.work-card--02 .work-card__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(5, 11, 22, 0.85) 0%, rgba(5, 11, 22, 0.15) 45%, rgba(5, 11, 22, 0.35) 100%);
  pointer-events: none;
}

/* Card 03 also uses a client logo (dark green shield, near-square) — same
   contain treatment as cards 01/02 so the full badge stays visible. */
.work-card--03 .work-card__inner {
  background: linear-gradient(155deg, #1a2118 0%, #12180f 60%, #081428 100%);
}

.work-card--03 .work-card__image {
  object-fit: contain;
  padding: 32px;
}

.work-card--03 .work-card__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(5, 11, 22, 0.85) 0%, rgba(5, 11, 22, 0.15) 45%, rgba(5, 11, 22, 0.35) 100%);
  pointer-events: none;
}

.work-card__number {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}

.work-card__info {
  position: relative;
  z-index: 1;
  padding: 28px;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(5, 11, 22, 0.55) 0%, rgba(5, 11, 22, 0) 100%);
}

.work-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--copper-400);
  transition: color 0.2s ease;
}

.work-card__link:hover {
  color: var(--copper-gold);
}

.work-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-400);
  margin-bottom: 10px;
  padding: 3px 10px;
  border: 1px solid rgba(232, 160, 107, 0.35);
  border-radius: 999px;
}

.work-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.work-card__subtitle {
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* The scale/fade-through-view effect — progressive enhancement only.
   Unsupported browsers (Safari/Firefox today) just get a plain snap carousel. */
@supports (animation-timeline: view(inline)) {
  .work-card__inner {
    animation: work-card-reveal linear both;
    animation-timeline: view(inline);
    animation-range: cover 0% cover 100%;
  }
}

@keyframes work-card-reveal {
  0% {
    transform: scale(0.86);
    opacity: 0.45;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.86);
    opacity: 0.45;
  }
}

.work-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 24px;
}

.work-arrows {
  display: flex;
  gap: 10px;
}

.work-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.work-arrow:hover {
  border-color: rgba(232, 160, 107, 0.5);
  color: var(--copper-400);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .work-card__inner {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .work-progress-bar {
    animation: none !important;
    transform: scaleX(1);
  }
}

@media (max-width: 800px) {
  .work {
    padding: 96px 0;
  }

  .work-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .work-sub {
    max-width: 100%;
    text-align: left;
  }

  .work-card {
    width: 86vw;
    height: 60vw;
  }
}

/* Projects — personal work, hover-reveal cards
   ========================================================================== */
.projects {
  position: relative;
  padding: 140px 0;
  background: var(--navy-900);
  overflow: hidden;
}

.ambient-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.ambient-glow--copper {
  background: radial-gradient(circle, var(--copper-600) 0%, transparent 70%);
}

.ambient-glow--sage {
  background: radial-gradient(circle, var(--sage-500) 0%, transparent 70%);
}

.services .ambient-glow {
  top: -160px;
  right: -120px;
}

.work .ambient-glow {
  bottom: -180px;
  left: -140px;
}

.projects .ambient-glow {
  top: -140px;
  left: 50%;
  margin-left: -280px; /* centers a 560px glow without using transform, which the parallax JS owns */
}

@media (prefers-reduced-motion: reduce) {
  .ambient-glow {
    display: none;
  }
}

.projects-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

.projects-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-400);
  white-space: nowrap;
}

.projects-sub {
  max-width: 380px;
  text-align: right;
  font-size: 1rem;
  color: var(--ink-dim);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy-800);
  border: 1px solid var(--border);
}

.project-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.project-card:hover .project-card__video {
  transform: scale(1.06);
  filter: brightness(0.7);
}

.project-card__tag {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-400);
  padding: 3px 10px;
  border: 1px solid rgba(232, 160, 107, 0.35);
  border-radius: 999px;
  background: rgba(5, 11, 22, 0.55);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-card__tag {
  opacity: 1;
  transform: translateY(0);
}

/* Play button — opens the full demo in the modal. */
.project-card__expand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: rgba(5, 11, 22, 0.7);
  border: 1px solid rgba(232, 160, 107, 0.5);
  color: var(--copper-400);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, color 0.2s ease;
  pointer-events: none;
}

.project-card:hover .project-card__expand {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.project-card__expand:hover {
  border-color: var(--copper-gold);
  color: var(--copper-gold);
}

/* Inset border frame that draws in on hover. */
.project-card__frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(232, 160, 107, 0);
  transition: inset 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
  pointer-events: none;
}

.project-card:hover .project-card__frame {
  inset: 14px;
  border-color: rgba(232, 160, 107, 0.55);
}

.project-card__caption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.project-card:hover .project-card__caption {
  transform: translateY(0);
  opacity: 1;
}

.project-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.project-card__subtitle {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Touch devices have no hover — keep the caption/tag/play button visible so
   nothing is ever hidden behind an interaction that doesn't exist there. */
@media (hover: none) {
  .project-card__caption {
    transform: translateY(0);
    opacity: 1;
    background: linear-gradient(0deg, rgba(5, 11, 22, 0.75) 0%, rgba(5, 11, 22, 0) 100%);
    padding-top: 32px;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 20px;
  }

  .project-card__frame {
    inset: 14px;
    border-color: rgba(232, 160, 107, 0.35);
  }

  .project-card__tag {
    opacity: 1;
    transform: translateY(0);
  }

  .project-card__expand {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card__video,
  .project-card__frame,
  .project-card__caption,
  .project-card__tag,
  .project-card__expand {
    transition: none;
  }
}

@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 800px) {
  .projects {
    padding: 96px 0;
  }

  .projects-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .projects-sub {
    max-width: 100%;
    text-align: left;
  }
}

/* Video demo modal
   ========================================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.video-modal.is-open {
  display: flex;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 22, 0.92);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  padding: 20px;
  border-radius: 16px;
  background: var(--navy-800);
  border: 1px solid var(--border);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6);
}

.video-modal__video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 10px;
  background: #000;
  margin: 0 auto;
}

.video-modal__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-700);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.video-modal__close:hover {
  color: var(--copper-400);
  border-color: rgba(232, 160, 107, 0.5);
}

.video-modal__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}

@media (max-width: 480px) {
  .video-modal {
    padding: 12px;
  }

  .video-modal__dialog {
    padding: 14px;
  }

  .video-modal__close {
    top: 4px;
    right: 4px;
  }
}

/* Process — sticky stacking cards
   ========================================================================== */
.process {
  padding: 140px 0 0;
  background: var(--navy-900);
}

.process-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}

.process-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-400);
  white-space: nowrap;
}

.process-sub {
  max-width: 380px;
  text-align: right;
  font-size: 1rem;
  color: var(--ink-dim);
}

.process-stack {
  position: relative;
  padding-bottom: 140px;
}

.process-step {
  position: sticky;
  top: calc(96px + var(--i) * 20px);
  min-height: 56vh;
  display: flex;
  align-items: center;
  z-index: calc(var(--i) + 1);
}

.process-card {
  width: 100%;
  padding: clamp(32px, 5vw, 56px);
  border-radius: 16px;
  background: var(--navy-800);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

.process-card__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 20px;
  background: var(--gradient-copper);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.process-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 18px;
}

.process-card__text {
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

@media (max-width: 800px) {
  .process {
    padding: 96px 0 0;
  }

  .process-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .process-sub {
    max-width: 100%;
    text-align: left;
  }

  .process-step {
    top: calc(84px + var(--i) * 14px);
    min-height: 46vh;
  }
}

/* Team
   ========================================================================== */
.team {
  position: relative;
  padding: 140px 0;
  background: var(--navy-900);
  overflow: hidden;
}

.team-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}

.team-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-400);
  white-space: nowrap;
}

.team-sub {
  max-width: 380px;
  text-align: right;
  font-size: 1rem;
  color: var(--ink-dim);
}

.team-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
}

/* Photo fills the card at rest; on hover it zooms in slightly and a
   translucent footer (name + role) slides up from the bottom. */
.team-box {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease-in-out;
}

.team-box:hover {
  box-shadow: 0 20px 48px -14px rgba(0, 0, 0, 0.6);
}

.team-box__frame {
  position: absolute;
  inset: 0;
  transition: transform 0.4s ease-in-out;
}

.team-box:hover .team-box__frame {
  transform: scale(1.3);
}

.team-box__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--navy-700);
}

.team-box__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(5, 11, 22, 0.8);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: 0.3s ease-in-out;
  text-align: center;
  padding: 14px 12px;
}

.team-box:hover .team-box__footer {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.team-box__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 2.5px 0;
}

.team-box__role {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--copper-400);
  padding: 2.5px 0;
}

/* Touch devices have no hover — keep the footer permanently visible so the
   name/role are still readable without a pointer. */
@media (hover: none) {
  .team-box__frame {
    transform: none !important;
  }

  .team-box__footer {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-box,
  .team-box__frame,
  .team-box__footer {
    transition: none;
  }
}

@media (max-width: 800px) {
  .team {
    padding: 96px 0;
  }

  .team-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .team-sub {
    max-width: 100%;
    text-align: left;
  }
}

/* Testimonials — sticky heading, scrolling card list
   ========================================================================== */
.testimonials {
  padding: 140px 0;
  background: var(--navy-900);
}

.testimonials-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 64px;
  align-items: start;
}

.testimonials-sticky {
  position: sticky;
  top: 140px;
}

.testimonials-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin-bottom: 20px;
}

.testimonials-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}

.testimonials-sub {
  max-width: 320px;
  font-size: 1rem;
  color: var(--ink-dim);
}

.testimonials-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.testimonial-card {
  padding: 36px;
  border-radius: 16px;
  background: var(--navy-800);
  border: 1px solid var(--border);
}

.testimonial-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-400);
  margin-bottom: 20px;
  padding: 3px 10px;
  border: 1px solid rgba(232, 160, 107, 0.35);
  border-radius: 999px;
}

.testimonial-card__quote {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 28px;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--gradient-copper);
}

.testimonial-card__name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}

.testimonial-card__role {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .testimonials-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .testimonials-sticky {
    position: static;
  }
}

@media (max-width: 800px) {
  .testimonials {
    padding: 96px 0;
  }
}

/* Contact
   ========================================================================== */
.contact {
  position: relative;
  padding: 140px 0;
  background: var(--navy-900);
  overflow: hidden;
}

.contact-head {
  max-width: 640px;
  margin: 0 auto 64px;
  text-align: center;
}

.contact-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin-bottom: 20px;
}

.contact-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 20px;
}

.contact-heading .accent {
  background: var(--gradient-copper);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-sub {
  font-size: 1.1rem;
  color: var(--ink-dim);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  max-width: 980px;
  margin: 0 auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Honeypot — present in the DOM for bots to find and fill, hidden from
   sighted users without relying on display:none (which some bots skip). */
.form-field--honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-field label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--navy-800);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-muted);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: rgba(232, 160, 107, 0.6);
  box-shadow: 0 0 0 3px rgba(201, 122, 61, 0.15);
}

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

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.contact-form__note {
  font-size: 0.85rem;
  color: var(--sage-400);
  min-height: 1.2em;
}

.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px;
  border-radius: 16px;
  background: var(--navy-800);
  border: 1px solid var(--border);
  height: fit-content;
}

.contact-direct__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-direct__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Shared small WhatsApp/Instagram glyph — used here and in the footer. */
.social-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.contact-direct__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.2s ease;
}

a.contact-direct__value:hover {
  color: var(--copper-400);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .contact {
    padding: 96px 0;
  }

  .contact-form__actions {
    flex-direction: column;
  }

  .contact-form__actions .btn {
    width: 100%;
  }
}

/* Footer
   ========================================================================== */
.site-footer {
  background: var(--navy-950);
  border-top: 1px solid var(--border);
  padding-top: 80px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
  padding-bottom: 64px;
}

.footer-brand {
  max-width: 340px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.footer-logo img {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 8px;
}

.footer-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.footer-logo__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.footer-logo__tag {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-400);
  font-weight: 600;
}

.footer-blurb {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

.footer-links {
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
}

.footer-links__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links__title {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.footer-links__group a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink-dim);
  transition: color 0.2s ease;
}

.footer-links__group a:hover {
  color: var(--copper-400);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.footer-top-link {
  color: var(--ink-muted);
  transition: color 0.2s ease;
}

.footer-top-link:hover {
  color: var(--copper-400);
}

@media (max-width: 800px) {
  .site-footer {
    padding-top: 64px;
  }

  .footer-top {
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
  }

  .footer-links {
    gap: 48px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  color: var(--ink-muted);
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--copper-400);
}

.contact-form__consent {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: -6px;
}

.contact-form__consent a {
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form__consent a:hover {
  color: var(--copper-400);
}

/* Legal pages (Privacy Policy, Terms & Conditions)
   ========================================================================== */
.legal-hero {
  padding: calc(var(--nav-height) + 72px) 0 56px;
  background: var(--navy-900);
  border-bottom: 1px solid var(--border);
}

.legal-hero-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin-bottom: 20px;
}

.legal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}

.legal-hero-date {
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.legal-content {
  padding: 72px 0 140px;
  background: var(--navy-900);
}

.legal-content .container {
  max-width: 760px;
}

.legal-content > .container > p:first-child {
  font-size: 1.08rem;
  color: var(--ink-dim);
  margin-bottom: 40px;
}

.legal-section {
  padding: 32px 0;
  border-top: 1px solid var(--border);
}

.legal-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.legal-section h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}

.legal-section h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 8px;
}

.legal-section p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-dim);
  margin-bottom: 14px;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--ink-dim);
}

.legal-section li {
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 6px;
}

.legal-section a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.legal-section a:hover {
  color: var(--copper-400);
}

.legal-disclaimer {
  margin-top: 48px;
  padding: 24px;
  border-radius: 12px;
  background: var(--navy-800);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-muted);
}

@media (max-width: 800px) {
  .legal-hero {
    padding: calc(var(--nav-height) + 48px) 0 40px;
  }

  .legal-content {
    padding: 48px 0 96px;
  }
}

/* Cookie consent banner
   ========================================================================== */
.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--navy-800);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
}

.cookie-banner p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-dim);
  flex: 1 1 240px;
}

.cookie-banner a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-banner .btn {
  padding: 10px 20px;
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 18px;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__actions .btn {
    flex: 1;
  }
}