/* R3 Media — implemented from the Claude Design handoff "R3 Media.dc.html".
   Default design props: accent #355E3B, mood Forest, density Standard, motion on. */

:root {
  --accent: #355E3B;
  --accent-deep: #27462C;   /* accent mixed 26% toward black */
  --dark: #17281A;          /* "Forest" mood: accent mixed 66% toward #080C09 */
  --paper: #F6F6F2;
  --ink: #141613;
  --line: #DFE0D8;
  --card-line: #E3E4DC;
  --rule: #C4C7BB;
  --muted: #6A6F64;
  --body: #5E6359;
  --lede: #4A4F45;
  --faint: #8A8F82;
  --secpad: clamp(64px, 8vw, 116px);
  --gut: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22, .7, .28, 1);
  --display: 'Barlow Semi Condensed', Helvetica, sans-serif;
  --sans: Barlow, Helvetica, Arial, sans-serif;
}

/* Animates `translate` (not `transform`) so hover transforms still apply after the fill. */
@keyframes rise { from { opacity: 0; translate: 0 26px } to { opacity: 1; translate: none } }

* { box-sizing: border-box }
html { scroll-padding-top: 118px }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.site { min-height: 100vh; overflow-x: clip }
a { color: inherit; text-decoration: none }
a:hover { color: var(--accent) }
::selection { background: var(--accent); color: #fff }
input, textarea, select, button { font-family: var(--sans) }
summary::-webkit-details-marker { display: none }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
img { display: block }
.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 }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 4px; font: 600 14px/1 var(--sans) }
.skip:focus { top: 12px; color: #fff }

.wrap { max-width: 1520px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut) }
.accent { color: var(--accent) }

/* ---------- Motion ---------- */
.rise { animation: rise .85s var(--ease) both }
.rise--fast { animation-duration: .8s }
.rise--slow { animation-duration: .9s }
.rise--hero { animation-duration: 1s }
.d1 { animation-delay: .07s } .d2 { animation-delay: .14s } .d3 { animation-delay: .2s }
.d-fig { animation-delay: .1s } .d-c1 { animation-delay: .12s } .d-c2 { animation-delay: .16s }
.reveal { animation: rise .9s var(--ease) both; animation-timeline: view(); animation-range: entry 5% entry 50% }
.reveal--55 { animation-range: entry 5% entry 55% }
.reveal--60 { animation-duration: .8s; animation-range: entry 5% entry 60% }
.reveal--85 { animation-duration: .85s }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* ---------- Type ---------- */
.eyebrow { font: 600 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 }
.eyebrow--split { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(18px, 2vw, 28px) }
.eyebrow__rule { width: 22px; height: 1px; background: var(--rule) }
.eyebrow--on-dark { color: #9DB29F }
.num { font: 600 12px/1 var(--display); letter-spacing: .2em; margin: 0 }

.h2 { font: 600 clamp(30px, 3.6vw, 52px)/1.02 var(--display); letter-spacing: -.022em; margin: 0 }
.h2-md { font: 600 clamp(28px, 2.9vw, 42px)/1.05 var(--display); letter-spacing: -.02em; margin: 0 }
.h2-form { font: 600 clamp(24px, 2.1vw, 32px)/1.1 var(--display); letter-spacing: -.015em; margin: 0 }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--accent); color: #fff;
  font: 600 16px/1 var(--sans); padding: 16px 26px;
  border: 0; border-radius: 4px; cursor: pointer;
  transition: background .22s, transform .22s;
}
.btn:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px) }
.btn__arrow { font-size: 14px }
.btn--nav { gap: 10px; font-size: 15px; padding: 13px 20px }
.btn--nav:hover { transform: translateY(-1px) }
.btn--nav .btn__arrow { font-size: 13px }
.btn--light { background: var(--paper); color: var(--accent); padding: 17px 28px }
.btn--light:hover { background: #fff; color: var(--accent) }
.btn--submit { padding: 16px 28px }
.btn:disabled { opacity: .7; cursor: progress; transform: none }

.link-line {
  font: 600 15px/1 var(--sans); color: var(--ink);
  border-bottom: 1px solid var(--rule); padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.link-line:hover { color: var(--accent); border-color: var(--accent) }
.link-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px/1 var(--sans); color: var(--ink);
  padding: 15px 4px; border-bottom: 1px solid #B9BCB0;
  transition: color .2s, border-color .2s;
}
.link-ghost:hover { color: var(--accent); border-color: var(--accent) }
.link-dark {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  font: 600 16px/1 var(--sans); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 5px;
  transition: border-color .2s, color .2s;
}
.link-dark:hover { color: #fff; border-color: #fff }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 246, 242, .88);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  min-height: 74px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; column-gap: clamp(14px, 3vw, 48px); row-gap: 8px;
}
.site-logo { display: block; flex: 0 0 auto; line-height: 0; padding: 16px 0 }
.site-logo img { width: clamp(112px, 12vw, 150px); height: auto }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); flex-wrap: wrap }
.nav-link { position: relative; font: 600 15px/1 var(--sans); letter-spacing: .01em; padding: 6px 0; transition: color .2s }
.nav-link:hover { color: var(--accent) }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent);
}

/* ---------- Page hero (Services / About / Contact) ---------- */
.page-hero { padding-top: clamp(40px, 5vw, 76px); padding-bottom: clamp(30px, 3.4vw, 50px) }
.page-hero--ruled { padding-bottom: clamp(36px, 4vw, 62px); border-bottom: 1px solid var(--line) }
.page-hero__row { display: flex; flex-wrap: wrap; gap: 20px clamp(32px, 5vw, 90px); align-items: flex-end }
.page-hero h1 {
  font: 600 clamp(38px, 5.6vw, 80px)/.98 var(--display); letter-spacing: -.028em;
  margin: 0; flex: 1 1 440px; min-width: 0; max-width: 16ch;
}
.page-hero p.page-hero__lede {
  font: 400 clamp(16px, 1.3vw, 19px)/1.55 var(--sans); color: var(--lede);
  margin: 0; flex: 1 1 320px; max-width: 44ch; text-wrap: pretty;
}

/* ---------- Home: hero ---------- */
.hero {
  padding-top: clamp(40px, 5.5vw, 84px);
  display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); align-items: stretch;
}
.hero__copy {
  flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding-bottom: clamp(20px, 3vw, 40px);
}
.hero .eyebrow--split { margin-bottom: clamp(20px, 2.4vw, 34px) }
.hero h1 { font: 600 clamp(52px, 8.4vw, 112px)/.92 var(--display); letter-spacing: -.03em; margin: 0; color: var(--ink) }
.hero__lede {
  font: 400 clamp(17px, 1.45vw, 21px)/1.5 var(--sans); color: var(--lede);
  max-width: 52ch; margin: clamp(22px, 2.6vw, 34px) 0 0; text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: clamp(26px, 3vw, 40px) }
.hero__art {
  flex: 1 1 380px; min-width: 0; margin: 0; position: relative; overflow: hidden;
  border-radius: 4px; min-height: clamp(260px, 34vw, 520px); background: #0D110E;
}
.hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center }

/* ---------- Home: capabilities ---------- */
.caps { padding-top: clamp(26px, 3.2vw, 48px) }
.caps ul {
  list-style: none; margin: 0; padding: clamp(18px, 2vw, 26px) 0 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font: 500 13px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.caps .sep { color: var(--rule) }

/* ---------- Section head (title + eyebrow on the right) ---------- */
.section { padding-top: var(--secpad) }
.section--pad { padding-top: var(--secpad); padding-bottom: var(--secpad) }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px }

/* ---------- Home: R3 system cards ---------- */
.system .section-head { margin-bottom: clamp(28px, 3.4vw, 48px) }
.system .h2 { max-width: 18ch }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(14px, 1.6vw, 24px) }
.card {
  background: #fff; border: 1px solid var(--card-line); border-top: 3px solid var(--accent); border-radius: 4px;
  padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; min-width: 0;
  transition: transform .28s var(--ease), box-shadow .28s, border-color .28s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgba(20, 22, 19, .4) }
.card .num { color: var(--accent); margin-bottom: clamp(28px, 3vw, 48px) }
.card h3 { font: 600 clamp(23px, 1.9vw, 30px)/1.12 var(--display); letter-spacing: -.015em; margin: 0 0 12px; max-width: 16ch }
.card p:not(.num) { font: 400 16px/1.6 var(--sans); color: var(--body); margin: 0 0 26px; text-wrap: pretty }
.card .link-line { margin-top: auto; align-self: flex-start }

/* ---------- Dark bands ---------- */
.band { background: var(--dark); color: #fff }
.band .h2 { color: #fff }
.band--gap { margin-top: var(--secpad) }

.approach { padding-top: var(--secpad); padding-bottom: var(--secpad); display: flex; flex-wrap: wrap; gap: clamp(30px, 4vw, 80px) }
.approach__intro { flex: 1 1 380px; min-width: 0 }
.approach__intro .eyebrow { margin-bottom: 22px }
.approach__intro .h2 { max-width: 14ch }
.approach__intro > p:not(.eyebrow) {
  font: 400 clamp(16px, 1.2vw, 19px)/1.6 var(--sans); color: #C6D2C5; margin: 24px 0 0; max-width: 46ch; text-wrap: pretty;
}
.approach__list { flex: 1 1 420px; min-width: 0; align-self: center }
.approach__item { display: flex; gap: clamp(16px, 2vw, 32px); padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid rgba(255, 255, 255, .16) }
.approach__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16) }
.approach__item > span { font: 600 12px/1.6 var(--display); letter-spacing: .14em; color: #7E9A82; flex: 0 0 auto }
.approach__item > div { min-width: 0 }
.approach__item h3 { font: 600 clamp(19px, 1.5vw, 23px)/1.2 var(--display); margin: 0 0 6px; color: #fff }
.approach__item p { font: 400 16px/1.55 var(--sans); color: #AFBFAF; margin: 0; text-wrap: pretty }

/* ---------- Home: what we do ---------- */
.services-list .section-head { margin-bottom: clamp(24px, 2.6vw, 36px) }
.service-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px clamp(20px, 3vw, 56px);
  padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid var(--line);
  transition: padding-left .3s var(--ease), border-color .3s;
}
.service-row:last-child { border-bottom: 1px solid var(--line) }
.service-row:hover { padding-left: 14px; border-color: var(--accent); color: var(--ink) }
.service-row h3 { font: 600 clamp(21px, 1.9vw, 28px)/1.2 var(--display); margin: 0; flex: 0 0 auto; min-width: min(100%, 260px) }
.service-row p { font: 400 16px/1.55 var(--sans); color: var(--body); margin: 0; flex: 1 1 300px; text-wrap: pretty }

/* ---------- Services ---------- */
.subnav {
  position: sticky; top: 74px; z-index: 30;
  background: rgba(246, 246, 242, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.subnav .wrap { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 38px); font: 600 14px/1 var(--sans); letter-spacing: .02em }
.subnav a { padding: 16px 0; transition: color .2s }
.subnav a:hover { color: var(--accent) }
.subnav a.subnav__end { margin-left: auto; color: var(--muted) }
.subnav a.subnav__end:hover { color: var(--accent) }

.pillar {
  padding-top: clamp(40px, 5vw, 78px); padding-bottom: clamp(40px, 5vw, 78px);
  display: flex; flex-wrap: wrap; gap: clamp(24px, 3.2vw, 64px); border-bottom: 1px solid var(--line);
}
.pillar--last { border-bottom: 0 }
.pillar__intro { flex: 0 1 250px; min-width: 0 }
.pillar__intro .num { color: #9AA093; margin-bottom: 14px }
.pillar__intro h2 { font: 600 clamp(28px, 2.9vw, 42px)/1.04 var(--display); letter-spacing: -.02em; margin: 0 0 10px; color: var(--accent) }
.pillar__intro p:last-child { font: 400 16px/1.55 var(--sans); color: var(--body); margin: 0; max-width: 26ch }
.pillar__grid {
  flex: 1 1 560px; min-width: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(24px, 2.6vw, 44px);
}
.pillar__grid article { min-width: 0 }
.pillar__grid h3 { font: 600 clamp(22px, 1.8vw, 28px)/1.15 var(--display); letter-spacing: -.012em; margin: 0 0 12px }
.pillar__grid article > p { font: 400 16px/1.6 var(--sans); color: var(--body); margin: 0; text-wrap: pretty }
.pillar__grid ul { list-style: none; padding: 0; margin: 20px 0 0 }
.pillar__grid li { border-top: 1px solid var(--line); padding: 9px 0; font: 400 15px/1.45 var(--sans) }

.process { padding-top: var(--secpad); padding-bottom: var(--secpad) }
.process .section-head { gap: 14px 40px; margin-bottom: clamp(30px, 3.6vw, 52px) }
.process .h2 { font-size: clamp(30px, 3.4vw, 50px); max-width: 18ch }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(20px, 2.2vw, 32px) }
.step { min-width: 0; border-top: 2px solid var(--accent); padding-top: 18px }
.step .num { color: #8FA791; margin-bottom: 16px }
.step h3 { font: 600 clamp(20px, 1.6vw, 25px)/1.15 var(--display); margin: 0 0 8px; color: #fff }
.step p:last-child { font: 400 15px/1.55 var(--sans); color: #AFBFAF; margin: 0; text-wrap: pretty }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(28px, 4vw, 72px) }
.cta-row .h2-md { flex: 0 1 300px; min-width: 0 }
.cta-row p { font: 400 clamp(16px, 1.2vw, 18px)/1.6 var(--sans); color: var(--body); margin: 0; flex: 1 1 360px; min-width: 0; max-width: 56ch; text-wrap: pretty }
.cta-row .btn { flex: 0 0 auto }

/* ---------- About ---------- */
.page-hero--about h1 { max-width: 14ch }
.story { padding-top: clamp(40px, 5vw, 84px); padding-bottom: clamp(40px, 5vw, 84px); display: flex; flex-wrap: wrap; gap: clamp(26px, 3.6vw, 72px) }
.story__title { flex: 0 1 300px; min-width: 0 }
.story__body { flex: 1 1 480px; min-width: 0; max-width: 64ch }
.story__body p { font: 400 clamp(16px, 1.2vw, 18px)/1.65 var(--sans); color: var(--body); margin: 0 0 20px; text-wrap: pretty }
.story__body p:first-child { font: 400 clamp(17px, 1.35vw, 20px)/1.6 var(--sans); color: #3D423A }
.story__body p:last-child { margin-bottom: 0 }

.operate { padding-top: var(--secpad); padding-bottom: var(--secpad) }
.operate .eyebrow { margin-bottom: clamp(28px, 3.2vw, 46px) }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(24px, 2.8vw, 48px) }
.principle { min-width: 0; border-top: 2px solid var(--accent); padding-top: 20px }
.principle h3 { font: 600 clamp(22px, 1.8vw, 28px)/1.15 var(--display); margin: 0 0 10px; color: #fff }
.principle p { font: 400 16px/1.6 var(--sans); color: #AFBFAF; margin: 0; text-wrap: pretty }

/* ---------- Contact ---------- */
.page-hero--contact h1 { flex-basis: 400px; max-width: 13ch }
.contact {
  padding-top: clamp(24px, 3vw, 44px); padding-bottom: var(--secpad);
  display: flex; flex-wrap: wrap; gap: clamp(26px, 3.4vw, 64px); align-items: flex-start;
}
.essentials { flex: 1 1 280px; min-width: 0 }
.essentials .h2-form { margin-bottom: 18px }
.essential { display: flex; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line) }
.essential--last { border-bottom: 1px solid var(--line) }
.essential > span { font: 600 11px/1.9 var(--sans); letter-spacing: .14em; color: var(--accent); flex: 0 0 auto }
.essential > div { min-width: 0 }
.essential strong { display: block; font: 600 17px/1.35 var(--sans); color: var(--ink); margin-bottom: 3px }
.essential div span { font: 400 15px/1.5 var(--sans); color: var(--body) }
.essentials__note { font: 400 15px/1.6 var(--sans); color: var(--body); margin: 18px 0 0; text-wrap: pretty }

.form-card {
  flex: 1.6 1 440px; min-width: 0; background: #fff; border: 1px solid var(--card-line);
  border-radius: 4px; padding: clamp(24px, 2.6vw, 40px);
}
.form-card__intro { font: 400 16px/1.55 var(--sans); color: var(--body); margin: 6px 0 26px }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 22px }
.field { margin-bottom: 18px; min-width: 0 }
.field--wide { margin-bottom: 22px }
.field label { display: block; font: 600 15px/1.4 var(--sans); margin-bottom: 7px }
.field .req { color: var(--accent) }
.field .opt { font-weight: 400; color: var(--faint); font-size: 14px }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-width: 0;
  border: 1px solid #CBCEC2; border-radius: 3px; background: #FCFCFA; color: var(--ink);
  padding: 12px 13px; font-size: 16px; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { line-height: 1.5; resize: vertical; min-height: 130px }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(53, 94, 59, .14); outline: none;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px }
.form-actions p { font: 400 14px/1.5 var(--sans); color: var(--faint); margin: 0; max-width: 34ch }
.form-error { font: 500 15px/1.5 var(--sans); color: #9B2C1F; margin: 0 0 18px }
.form-error:empty { display: none }

.sent { padding: clamp(18px, 2vw, 34px) 0; animation: rise .6s var(--ease) both }
.sent .eyebrow { color: var(--accent); margin-bottom: 16px }
.sent h2 { font: 600 clamp(26px, 2.3vw, 36px)/1.08 var(--display); letter-spacing: -.015em; margin: 0 0 12px }
.sent h2:focus { outline: none }
.sent p:not(.eyebrow) { font: 400 17px/1.6 var(--sans); color: var(--body); margin: 0 0 26px; max-width: 48ch; text-wrap: pretty }
.btn-text {
  display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--ink);
  font: 600 15px/1 var(--sans); padding: 13px 0; border: 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; transition: color .2s, border-color .2s;
}
.btn-text:hover { color: var(--accent); border-color: var(--accent) }

.faq-section { border-top: 1px solid var(--line) }
.faq { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 80px); display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 72px); align-items: flex-start }
.faq > h2 { font: 600 clamp(26px, 2.5vw, 38px)/1.05 var(--display); letter-spacing: -.02em; margin: 0; flex: 0 1 260px; min-width: 0 }
.faq__list { flex: 1 1 480px; min-width: 0 }
.faq details { border-top: 1px solid var(--line) }
.faq details:last-child { border-bottom: 1px solid var(--line) }
.faq summary { display: block; cursor: pointer; list-style: none; font: 600 clamp(17px, 1.4vw, 20px)/1.4 var(--sans); padding: 18px 0; transition: color .2s }
.faq summary:hover { color: var(--accent) }
.faq details p { font: 400 16px/1.6 var(--sans); color: var(--body); margin: 0; padding: 0 0 20px; max-width: 62ch; text-wrap: pretty }

/* ---------- 404 ---------- */
.notfound { padding-top: clamp(56px, 7vw, 120px); padding-bottom: var(--secpad) }
.notfound h1 { font: 600 clamp(38px, 5.6vw, 80px)/.98 var(--display); letter-spacing: -.028em; margin: 0 0 20px; max-width: 14ch }
.notfound p:not(.eyebrow) { font: 400 clamp(16px, 1.3vw, 19px)/1.55 var(--sans); color: var(--lede); margin: 0 0 32px; max-width: 44ch }

/* ---------- Footer ---------- */
.footer-cta { background: var(--accent); color: #fff }
.footer-cta .wrap {
  padding-top: clamp(44px, 5.5vw, 88px); padding-bottom: clamp(44px, 5.5vw, 88px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px clamp(28px, 4vw, 64px);
}
.footer-cta h2 { font: 600 clamp(32px, 4.4vw, 64px)/1 var(--display); letter-spacing: -.025em; margin: 0; color: #fff; max-width: 16ch }
.footer-cta .btn { flex: 0 0 auto }
.footer-base { background: #121410; color: #fff }
.footer-base .wrap {
  padding-top: clamp(26px, 3vw, 40px); padding-bottom: clamp(26px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px;
}
.footer-logo { display: block; line-height: 0; flex: 0 0 auto }
.footer-logo img { width: clamp(116px, 11vw, 146px); height: auto }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 500 15px/1.4 var(--sans); color: #C3C7BC }
.footer-nav a { transition: color .2s }
.footer-nav a:hover { color: #fff }
.footer-base p { font: 400 13px/1.6 var(--sans); color: var(--faint); margin: 0 }