:root {
  --bg: #f3f1ea;
  --bg-soft: #ece9e1;
  --ink: #151713;
  --ink-soft: #4e534b;
  --muted: #64685f;
  --line: rgba(21, 23, 19, 0.15);
  --line-soft: rgba(21, 23, 19, 0.08);
  --green: #2e5d43;
  --green-mid: #527d60;
  --green-light: #a8c2ac;
  --dark: #10140f;
  --dark-deep: #0b0e0a;
  --cream: #f3f1ea;
  --cream-muted: rgba(243, 241, 234, 0.62);
  --cream-line: rgba(243, 241, 234, 0.18);
  --error: #e7a58e;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-space: clamp(6.5rem, 12vw, 11rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: var(--green);
  color: var(--cream);
}

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

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul {
  margin: 0;
}

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

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

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

button {
  cursor: pointer;
}

.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.65rem 1rem;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.85rem;
  border-radius: 2px;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

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

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--gutter);
  transition: background 0.5s var(--ease), padding 0.5s var(--ease),
    border-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  padding-block: 0.95rem;
  background: rgba(243, 241, 234, 0.82);
  border-bottom-color: var(--line-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 2;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  margin-left: auto;
}

.site-nav a,
.header-link {
  position: relative;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  transition: color 0.3s ease;
}

.site-nav a::after,
.header-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.32rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

.site-nav a:hover,
.header-link:hover {
  color: var(--ink);
}

.site-nav a:hover::after,
.header-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-link {
  margin-left: clamp(1rem, 2.5vw, 3rem);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.header-link span {
  color: var(--green);
  transition: transform 0.35s var(--ease);
}

.header-link:hover span {
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(7.5rem, 14vh, 10rem);
  padding-bottom: clamp(4rem, 10vh, 8rem);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: min(70vw, 960px);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(72, 116, 86, 0.15),
    rgba(72, 116, 86, 0.05) 42%,
    transparent 68%
  );
  z-index: -1;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 22vh;
  background: linear-gradient(to bottom, transparent, var(--bg));
  z-index: -1;
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
  background-size: 25% 100%;
  background-position: calc(50% - 0.5px) 0;
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 75%, transparent);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 0.87fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  flex: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: 1rem 2rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow span {
  color: var(--green);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(46, 93, 67, 0.45);
  animation: pulse 2.8s ease-out infinite;
}

.hero-heading {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.hero-title {
  font-size: clamp(3.8rem, 10vw, 10.2rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.07em;
  margin-left: -0.02em;
  font-family: var(--sans);
  font-style: normal;
  text-transform: none;
}

.hero-title .hero-dot {
  color: #8fd9a6;
}

.hero-bar {
  display: block;
  height: clamp(12px, 1.9vw, 20px);
  margin-top: clamp(1rem, 2vw, 1.8rem);
  width: 100%;
  background: linear-gradient(90deg, #8fd9a6 0%, #b8f3c5 100%);
  border-radius: 1px;
  animation: fade-up 0.95s 0.5s var(--ease-out) both;
}

.hero-lede {
  max-width: 30ch;
  margin-top: clamp(1.8rem, 4vh, 3rem);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.5;
  color: #6b7066;
  animation: fade-up 1s 0.6s var(--ease-out) both;
}

.hero-actions {
  margin-top: clamp(1.8rem, 4.5vh, 3rem);
  animation: fade-up 1s 0.75s var(--ease-out) both;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1rem 1.55rem 1rem 1.75rem;
  border: 0;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
    transform 0.45s var(--ease);
}

.button-primary {
  background: var(--ink);
  color: var(--cream);
}

.button-primary:hover {
  background: var(--green);
}

.button-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: rgba(243, 241, 234, 0.13);
  font-size: 0.85rem;
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease);
}

.button:hover .button-arrow {
  transform: translateX(4px);
  background: rgba(243, 241, 234, 0.22);
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  margin-left: auto;
  animation: fade-in 1.6s 0.35s var(--ease-out) both;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(72, 116, 86, 0.14), transparent 66%);
  filter: blur(8px);
  pointer-events: none;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-visual-label {
  position: absolute;
  left: 1%;
  bottom: 1.5%;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-size: clamp(0.58rem, 0.72vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(46, 93, 67, 0.6);
  pointer-events: none;
}

.hero-visual-label span {
  font-size: 0.92em;
  letter-spacing: 0;
  color: rgba(46, 93, 67, 0.5);
}

.hero-footer {
  display: none;
}

.hero-index {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s ease;
}

.scroll-cue:hover {
  color: var(--ink);
}

.scroll-line {
  position: relative;
  width: 44px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: translateX(-100%);
  animation: scroll-line 2.6s 1.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Section foundations
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  padding-block: var(--section-space);
  scroll-margin-top: 5rem;
}

.section-head {
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.section-head .eyebrow {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.section-title {
  font-size: clamp(2.7rem, 6.2vw, 6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.section-title .serif,
.submit-title .serif,
.clients-title .serif {
  font-weight: 400;
}

.section-lede {
  max-width: 40ch;
  padding-bottom: 0.35rem;
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   What we solve
   -------------------------------------------------------------------------- */

.solve {
  border-top: none;
}

.solve-header {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.solve-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.solve-heading {
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-family: var(--sans);
}

.solve-heading-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.solve-intro {
  max-width: 42ch;
  padding-bottom: 0.4rem;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.7;
  color: #6b7066;
}

.solve-divider {
  margin-top: clamp(2rem, 4vw, 3rem);
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(21,23,19,0.18), rgba(21,23,19,0.08));
}

.solve-list {
  border-top: 1px solid rgba(21,23,19,0.1);
}

.solve-item {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(280px, 360px);
  align-items: center;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1rem, 2vw, 1.6rem);
  border-bottom: 1px solid rgba(21,23,19,0.1);
  transition: background-color 0.35s var(--ease);
}

.solve-item:hover,
.solve-item:focus-within {
  background: radial-gradient(900px circle at 90% 50%, rgba(143, 217, 166, 0.1), rgba(143, 217, 166, 0.04) 40%, transparent 72%);
  border-radius: 10px;
}

.solve-item > * {
  position: relative;
  z-index: 1;
}

.solve-col {
  display: flex;
  align-items: center;
}

.solve-col-num {
  align-items: flex-start;
}

.solve-col-title {
  align-items: center;
}

.solve-col-desc {
  align-items: center;
}

.solve-col-anim {
  justify-content: flex-end;
}

.solve-index {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: #6f8f7a;
}

.solve-name {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.04em;
  transition: color 0.3s ease;
}

.solve-item:hover .solve-name,
.solve-item:focus-within .solve-name {
  color: #1f2f25;
}

.solve-desc {
  max-width: 52ch;
  font-size: clamp(0.98rem, 1.1vw, 1.02rem);
  line-height: 1.7;
  color: #6b7066;
  transition: color 0.3s ease;
}

.solve-item:hover .solve-desc,
.solve-item:focus-within .solve-desc {
  color: #4f564b;
}

.solve-anim {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: clamp(130px, 14vw, 170px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.solve-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.solve-note {
  display: none;
}


/* --------------------------------------------------------------------------
   Approach
   -------------------------------------------------------------------------- */

.approach {
  background: var(--bg-soft);
  border-block: 1px solid var(--line-soft);
}

.approach-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.approach-head {
  position: sticky;
  top: clamp(6.5rem, 12vh, 9rem);
}

.approach-head .eyebrow {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.steps {
  counter-reset: step;
}

.step {
  position: relative;
  padding: clamp(1.8rem, 3.5vw, 2.6rem) 0 clamp(2.4rem, 5vw, 3.6rem);
  border-top: 1px solid var(--line);
}

.step::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--green);
  transition: width 0.8s var(--ease-out);
}

.step:hover::after {
  width: 100%;
}

.step-number {
  display: block;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--green);
}

.step-title {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   Clients
   -------------------------------------------------------------------------- */

.clients {
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.marquee {
  position: relative;
  padding-block: clamp(1.8rem, 3vw, 2.4rem);
  border-block: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(1.9rem, 4vw, 3.6rem);
  color: var(--ink);
  opacity: 0.58;
  white-space: nowrap;
  transition: opacity 0.4s ease, color 0.4s ease;
}

.logo:hover {
  opacity: 1;
  color: var(--green);
}

.logo-northwind {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.logo-atelier {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
}

.logo-helios {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.logo-kraft {
  font-family: var(--serif);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.logo-orbital {
  font-family: var(--mono);
  font-size: 0.92rem;
  letter-spacing: 0.3em;
}

.logo-palma {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.logo-montfort {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
}

.logo-seven {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
}

.clients-note {
  display: none;
}

/* --------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */

.submit {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--cream);
  padding-block: clamp(6rem, 10vw, 10rem);
}

.submit::before {
  content: "";
  position: absolute;
  inset: -40% -15% auto auto;
  width: min(60vw, 800px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgba(78, 120, 90, 0.2), transparent 65%);
  pointer-events: none;
}

.submit-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.eyebrow-light {
  color: var(--cream-muted);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.eyebrow-light span {
  color: var(--green-light);
}

.submit-title {
  font-size: clamp(3.2rem, 7.2vw, 7rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.submit-lede {
  max-width: 36ch;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.6;
  color: var(--cream-muted);
}

.submit-details {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.submit-details dt {
  margin-bottom: 0.45rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-light);
}

.submit-details dd {
  font-size: 0.95rem;
  color: var(--cream);
}

.submit-details a {
  border-bottom: 1px solid var(--cream-line);
  transition: border-color 0.3s ease;
}

.submit-details a:hover {
  border-color: var(--green-light);
}

.submit-form-wrap {
  width: 100%;
  max-width: 580px;
  justify-self: end;
}

.field {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem);
}

.field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 241, 234, 0.62);
}

.optional {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(243, 241, 234, 0.55);
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.65rem 0 0.95rem;
  border: 0;
  border-bottom: 1px solid var(--cream-line);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-size: 1.05rem;
  line-height: 1.5;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  min-height: 2.9rem;
  resize: vertical;
}

.field input:hover,
.field textarea:hover {
  border-bottom-color: rgba(243, 241, 234, 0.4);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--green-light);
  box-shadow: 0 1px 0 0 var(--green-light);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

.field.has-error input,
.field.has-error textarea {
  border-bottom-color: var(--error);
}

.field-error {
  min-height: 0;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--error);
}

.field-error:empty {
  display: none;
}

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px var(--dark) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.form-footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}

.button-submit {
  gap: 1rem;
  padding: 1.05rem 1.6rem 1.05rem 1.8rem;
  background: var(--cream);
  color: var(--dark);
}

.button-submit:hover {
  background: var(--green-light);
}

.button-submit .button-arrow {
  background: rgba(16, 20, 15, 0.09);
}

.button-submit:hover .button-arrow {
  background: rgba(16, 20, 15, 0.14);
}

.button-submit[disabled] {
  cursor: wait;
  opacity: 0.75;
}

.button-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgba(16, 20, 15, 0.25);
  border-top-color: var(--dark);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.button-submit.is-loading .button-arrow {
  display: none;
}

.button-submit.is-loading .button-spinner {
  display: inline-block;
}

.form-status {
  flex: 1 1 12rem;
  min-height: 1.2rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--error);
}

.form-privacy {
  margin-top: 1.5rem;
  font-size: 0.7rem;
  color: rgba(243, 241, 234, 0.5);
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--cream-line);
  background: rgba(243, 241, 234, 0.025);
  animation: fade-up 0.8s var(--ease-out) both;
}

.form-success[hidden] {
  display: none;
}

.success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--green-light);
  border-radius: 50%;
  color: var(--green-light);
  font-size: 1rem;
}

.success-kicker {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-light);
}

.success-title {
  margin-top: 0.8rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.success-text {
  max-width: 34ch;
  margin-top: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cream-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--dark-deep);
  color: var(--cream);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  border-top: 1px solid rgba(243, 241, 234, 0.08);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.wordmark-footer {
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.06em;
  color: var(--cream);
}

.footer-tagline {
  margin-top: 0.7rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--cream-muted);
}

.footer-meta {
  display: flex;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.footer-meta > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.footer-label {
  margin-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-light);
}

.footer-meta a,
.footer-meta p:not(.footer-label) {
  color: var(--cream-muted);
  transition: color 0.3s ease;
}

.footer-meta a:hover {
  color: var(--cream);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(243, 241, 234, 0.1);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243, 241, 234, 0.5);
}

/* --------------------------------------------------------------------------
   Reveal system & keyframes
   -------------------------------------------------------------------------- */

.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.has-js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes line-up {
  to {
    transform: translateY(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 93, 67, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(46, 93, 67, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 93, 67, 0);
  }
}

@keyframes scroll-line {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Intro — header wordmark (shared with intro overlay)
   -------------------------------------------------------------------------- */

.wordmark-text {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  /* No opacity transition on purpose: once the travelling logo lands, the
     handoff swaps both logos in a single frame. A transition would let the
     permanent logo appear while the intro logo is still visible. */
}

/* Hard gate owned exclusively by the intro controller. The class lives on the
   element itself and is !important so no page-reveal / cascade rule can show
   the permanent header logo before the travelling one has arrived. */
.wordmark-text.is-intro-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.wordmark-un,
.wordmark-stuck {
  color: var(--ink);
}

/* The header letters share the intro's exact inline-block structure so both
   wordmarks measure and render with identical metrics. Without this, the
   intro's per-letter boxes are ~0.5px wider and the period shifts on handoff. */
.wordmark-stuck span {
  display: inline-block;
}

.wordmark-hyphen,
.wordmark-dot {
  color: var(--green);
}

/* --------------------------------------------------------------------------
   Intro — overlay, backdrop & logo assembly
   -------------------------------------------------------------------------- */

.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  touch-action: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Only ever shown when JS is available and the intro actually runs */
html.has-js .intro-overlay {
  display: flex;
  animation: intro-safety-dismiss 0.001s 9s both;
}

/* Once the intro is confirmed to be running, cancel the CSS safety timer */
html.intro-live .intro-overlay {
  animation: none;
}

/* If JS breaks entirely (script loaded, intro never fired), the overlay
   releases itself so the site stays reachable */
@keyframes intro-safety-dismiss {
  to {
    visibility: hidden;
    opacity: 0;
  }
}

html.intro-skip .intro-overlay,
html.intro-done .intro-overlay,
.intro-overlay.is-dismissed {
  display: none;
}

/* Opaque backdrop is its own element so the timeline can fade it out while
   the logo keeps travelling above it. */
.intro-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg);
  will-change: opacity;
}

/* Keep underlying page elements visually hidden and un-tabbable while the
   overlay owns the viewport; layout stays intact so FLIP measurements remain
   valid. This reveal class deliberately does NOT touch the wordmark — that
   has its own gate above. */
html.intro-run .skip-link,
html.intro-run .site-header,
html.intro-run main,
html.intro-run .site-footer {
  visibility: hidden;
}

html.intro-page-visible .skip-link,
html.intro-page-visible .site-header,
html.intro-page-visible main,
html.intro-page-visible .site-footer {
  visibility: visible;
}

html.intro-locked,
html.intro-locked body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

/* Hold the hero entrance animations while the overlay is up, so they play
   for the visitor during the page reveal instead of behind the overlay */
html.intro-frozen .hero-bar,
html.intro-frozen .hero-lede,
html.intro-frozen .hero-actions,
html.intro-frozen .hero-visual {
  animation-play-state: paused;
}

.intro-logo {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(3.2rem, 11.5vw, 8.75rem);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  transform-origin: left top;
  will-change: transform;
  backface-visibility: hidden;
}

.intro-un,
.intro-stuck span {
  color: var(--ink);
}

.intro-hyphen,
.intro-dot {
  color: var(--green);
}

/* --- Initial pose for the Web Animations timeline ---

   These are only the states before the timeline starts. The intro controller
   owns every reveal animation through the Web Animations API, so the final
   values below are never expressed as CSS transitions (which would fire
   independently of the master timeline). */

.intro-stuck span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.2em);
}

/* "un" and the hyphen wipe open from the left while max-width makes room in
   the layout. clip-path avoids overflow:hidden, which would break the
   inline-block baseline. */
.intro-un,
.intro-hyphen {
  display: inline-block;
  opacity: 0;
  max-width: 0;
  clip-path: inset(0 100% 0 0);
  will-change: max-width, opacity, clip-path;
}

.intro-dot {
  display: inline-block;
  opacity: 0;
  max-width: 0;
  transform: scale(0.85);
  transform-origin: left bottom;
  will-change: max-width, opacity, transform;
}

/* The flight animation owns transform while it runs. On arrival the intro
   logo is retired in the same frame the permanent wordmark is revealed,
   so there is never a frame with two visible logos. */
.intro-logo.is-arrived {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }

  .solve-item {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr) 1.5rem;
    gap: 1.5rem;
  }

  .approach-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: clamp(7rem, 16vh, 9rem);
    padding-bottom: clamp(4rem, 12vw, 6rem);
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hero-content {
    padding-block: 0;
  }

  .hero-title {
    font-size: clamp(3.6rem, 13.5vw, 7.5rem);
  }

  .hero-lede {
    max-width: 26ch;
  }

  .hero-visual {
    width: min(100%, 520px);
    margin: 1.5rem auto 0;
  }

  .hero-footer {
    display: none;
  }

  .section-head-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .section-lede {
    max-width: 48ch;
  }

  .solve-item {
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: 0.8rem 1.5rem;
    padding-block: 1.8rem;
  }

  .solve-desc {
    grid-column: 2;
    padding-top: 0;
  }

  .solve-marker {
    display: none;
  }

  .approach-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .approach-head {
    position: static;
  }

  .approach-head .section-lede {
    max-width: 46ch;
  }

  .clients {
    padding-block: clamp(2rem, 5vw, 3.5rem);
  }

  .submit-inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .submit-form-wrap {
    max-width: 640px;
    justify-self: start;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-meta {
    margin-top: 1rem;
  }
}

@media (max-width: 640px) {
  .header-link {
    margin-left: 0;
    font-size: 0.72rem;
  }

  .site-header {
    padding-block: 1.15rem;
  }

  .hero-title {
    letter-spacing: -0.045em;
  }

  .hero-visual {
    width: 100%;
    margin-top: 1rem;
  }

  .hero-visual-label {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
  }

  .hero-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .hero-footer {
    display: none;
  }

  .solve-note {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .solve-note-text {
    max-width: 18ch;
  }

  .clients {
    padding-block: clamp(1.8rem, 5vw, 2.8rem);
  }

  .logo {
    padding-inline: 1.5rem;
  }

  .footer-meta {
    flex-wrap: wrap;
    gap: 2rem 3rem;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@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;
    scroll-behavior: auto !important;
  }

  html.has-js .intro-overlay {
    display: none;
  }

  html.has-js .wordmark-text {
    opacity: 1;
  }

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

  .hero-title .line-inner {
    transform: none;
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  .marquee-group[aria-hidden="true"] {
    display: none;
  }

  .marquee-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.2rem;
  }
}