@font-face {
  font-family: Geist;
  src: url("/assets/geist.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --ink: #131313;
  --night: #0a0a0a;
  --paper: #f0f0f0;
  --gray: #777777;
  --green: #00b000;
  --green-dark: #008400;
  --lime: #88ef1b;
  --mint: #bfebbf;
  --gutter: clamp(1.125rem, 4.8vw, 5rem);
  --heading-display: clamp(2.125rem, 4.35vw, 3.625rem);
  --heading-section: clamp(1.875rem, 3.4vw, 2.875rem);
  --heading-card: clamp(1.125rem, 1.7vw, 1.375rem);
  --text-lead: clamp(.9375rem, 1.35vw, 1.0625rem);
  font-family: Geist, Arial, sans-serif;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-size: .9375rem;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
section[id], article[id] { scroll-margin-top: 1.5rem; }
::selection { color: var(--ink); background: var(--lime); }

:focus-visible {
  outline: 3px solid #238d0e;
  outline-offset: 5px;
}

.site-header :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--lime); }

.shell {
  width: min(82rem, calc(100% - var(--gutter) - var(--gutter)));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  z-index: 5;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: var(--ink);
  background: var(--lime);
  transform: translateY(-200%);
}

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

.site-header { background: var(--ink); }

.header-inner {
  min-height: 5.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #ffffff26;
}

.header-brand { flex: 0 0 auto; }
.header-brand img { width: clamp(6rem, 10vw, 8.5rem); height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3.4vw, 3.1rem);
  font-size: .875rem;
  font-weight: 560;
}

.nav a,
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  transition: color .2s ease;
}

.nav a:hover,
.site-footer a:hover { color: var(--lime); }

.hero {
  background: radial-gradient(ellipse at 74% 100%, #0c2814, transparent 60%), var(--ink);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: clamp(1.7rem, 4vw, 4.6rem);
  padding-block: clamp(2.3rem, 4.5vw, 4.6rem) clamp(2.8rem, 5vw, 5.2rem);
}

.hero-copy {
  align-self: center;
  padding-block: 1.6rem;
}

.eyebrow {
  font-size: clamp(.65rem, 1.1vw, .76rem);
  font-weight: 670;
  line-height: 1.5;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.hero-label {
  display: flex;
  align-items: center;
  gap: .62rem;
  margin-bottom: clamp(.9rem, 1.6vw, 1.4rem);
  color: var(--mint);
}

.hero-label::before {
  width: .52rem;
  height: .52rem;
  background: var(--lime);
  content: "";
}

.hero h1,
.service-hero h1 {
  font-size: var(--heading-display);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.hero h1 em {
  color: var(--lime);
  font-style: normal;
  white-space: nowrap;
}

.hero-description {
  max-width: 41ch;
  margin-top: clamp(.9rem, 1.65vw, 1.35rem);
  color: #d2d8d0;
  font-size: var(--text-lead);
  line-height: 1.65;
}

.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.9rem;
  min-height: 3.3rem;
  margin-top: clamp(1.15rem, 1.9vw, 1.6rem);
  padding: .7rem 1.05rem .7rem 1.15rem;
  color: var(--night);
  background: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 680;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}

.primary-link:hover { background: var(--mint); border-color: var(--mint); }

.arrow {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.arrow::before {
  position: absolute;
  top: 50%;
  left: 12%;
  width: 72%;
  height: 1.5px;
  background: currentColor;
  content: "";
}

.arrow::after {
  position: absolute;
  top: 50%;
  right: 17%;
  width: .4rem;
  height: .4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-43%) rotate(45deg);
  content: "";
}

.arrow-down { transform: rotate(90deg); }
.arrow-up { transform: rotate(-90deg); }

.hero-photo {
  position: relative;
  min-height: clamp(27rem, 43vw, 39.5rem);
  overflow: hidden;
  border-radius: clamp(1.1rem, 3vw, 2.5rem);
  isolation: isolate;
  background: #234234;
}

.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  filter: saturate(.7) contrast(1.04);
  animation: photo-reveal 1.05s cubic-bezier(.2,.7,.3,1) both;
}

.hero-photo::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-right: 3px solid var(--lime);
  pointer-events: none;
  animation: photo-line 1.05s cubic-bezier(.2,.7,.3,1) both;
  content: "";
}

.hero-photo::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #082b241c 30%, transparent 60%, #0a170dee 100%);
  content: "";
}

.photo-corner {
  position: absolute;
  z-index: 2;
  top: 1.1rem;
  right: 1.1rem;
  width: 1.9rem;
  height: 1.9rem;
  border-top: 2px solid var(--lime);
  border-right: 2px solid var(--lime);
}

.brand-star {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 2.1vw, 2rem);
  bottom: clamp(1rem, 2.1vw, 2rem);
  width: clamp(2.7rem, 5.7vw, 5.7rem);
  aspect-ratio: 1;
  background: var(--lime);
  clip-path: polygon(50% 0%, 58% 34%, 78% 7%, 72% 40%, 100% 27%, 79% 50%, 100% 63%, 73% 65%, 88% 94%, 61% 75%, 56% 100%, 46% 76%, 24% 96%, 29% 70%, 0% 79%, 21% 57%, 0% 47%, 28% 43%, 13% 16%, 40% 32%);
}

.hero-photo figcaption {
  position: absolute;
  z-index: 2;
  bottom: clamp(1rem, 2.1vw, 2rem);
  left: clamp(1rem, 2.1vw, 2rem);
  padding-left: .7rem;
  border-left: 2px solid var(--lime);
  color: white;
  font-size: .77rem;
  font-weight: 610;
  line-height: 1.5;
  letter-spacing: .025em;
}

@keyframes photo-reveal {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.04); }
  to { clip-path: inset(0); transform: scale(1); }
}

@keyframes photo-line {
  from { transform: translateX(-100%); opacity: 1; }
  82% { opacity: 1; }
  to { transform: translateX(0); opacity: 0; }
}

.services {
  padding-block: clamp(3.5rem, 7vw, 7rem);
  color: var(--ink);
  background: linear-gradient(145deg, #f7f9f4, #edf2eb);
}

.services-intro {
  display: grid;
  grid-template-columns: 1fr minmax(13rem, 27%);
  align-items: end;
  gap: 1.1rem 2rem;
  margin-bottom: clamp(1.65rem, 4vw, 3.1rem);
}

.section-title {
  font-size: var(--heading-section);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.section-title span { color: #008000; }

.service-row h3,
.need h3,
.format h3,
.process-steps h3,
.deliverable-list h3 {
  font-size: var(--heading-card);
  font-weight: 620;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.services-intro p,
.about-copy p {
  max-width: 33ch;
  font-size: var(--text-lead);
  line-height: 1.65;
}

.services-intro p { padding-bottom: .1rem; color: #4c514b; }

.services-layout {
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
  align-items: start;
}

.service-feature {
  position: sticky;
  top: 1.25rem;
  padding: clamp(1.65rem, 4vw, 3.6rem);
  color: var(--paper);
  background: radial-gradient(ellipse at 103% 0%, #2b7040, transparent 68%), #17251b;
  border: 1px solid #afd8aa29;
  border-radius: clamp(1.45rem, 3vw, 2.5rem);
}

.service-feature .eyebrow { margin-bottom: clamp(.85rem, 1.6vw, 1.4rem); color: var(--mint); }
.service-feature h3 {
  max-width: 20ch;
  font-size: clamp(1.45rem, 2.45vw, 2rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.service-feature h3 + p { max-width: 31ch; margin-top: 1.2rem; color: #e0eadc; line-height: 1.55; }
.service-feature :focus-visible { outline-color: var(--lime); }

.service-directory {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-directory li { min-width: 0; scroll-margin-top: 1.25rem; }
.service-directory li:nth-child(even) { --reveal-delay: 85ms; }
.service-directory li:nth-child(3n) { --reveal-delay: 155ms; }

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.65rem, 1.5vw, 1.3rem);
  padding: clamp(.9rem, 1.8vw, 1.35rem) clamp(.95rem, 2.4vw, 1.8rem);
  border: 1px solid #d9e2d7;
  border-radius: 1.15rem;
  background: #fcfdfa;
  text-decoration: none;
  transition: background .23s ease, border-color .23s ease;
}
.service-row:hover, .service-row:focus-visible { border-color: #98ba90; background: #eaf5e6; }
.service-row p { max-width: 56ch; margin-top: .25rem; color: #475547; font-size: .91rem; line-height: 1.45; }
.service-link-arrow {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid #c7d7c4;
  border-radius: 50%;
  color: #234e25;
  background: #edf5e9;
  transition: transform .23s ease, background .23s ease, border-color .23s ease;
}
.service-row:hover .service-link-arrow, .service-row:focus-visible .service-link-arrow {
  transform: translateX(3px);
  border-color: var(--lime);
  background: var(--lime);
}

.plus {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #bdcfb9;
  border-radius: 50%;
  transition: background .2s ease;
}

.plus::before,
.plus::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: .53rem;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  content: "";
}

.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.about {
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(109deg, #e5f2de, var(--mint) 72%, #a6e381);
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr .75fr;
  align-items: center;
  gap: 1.7rem clamp(2rem, 6vw, 6rem);
  padding-block: clamp(3.25rem, 7.5vw, 7rem);
}

.about-copy p {
  max-width: 51ch;
  margin-top: 1.1rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .2rem 1.2rem;
  min-height: 5.1rem;
  padding-block: .9rem;
  color: #d1d6cf;
  font-size: .85rem;
}

.footer-inner p span { margin-inline: .3em; color: var(--lime); }
.footer-inner a { gap: .35rem; font-weight: 560; }

@media (max-width: 900px) {
  .hero-inner { gap: 1.35rem; }
  .hero-photo { min-height: 25rem; }
}

@media (max-width: 760px) {
  .header-inner { min-height: 4.15rem; }
  .nav { font-size: .83rem; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1.45rem; padding-block: 1.85rem 2.4rem; }
  .hero-copy { padding: 0; }
  .hero-photo { min-height: 0; }
  .hero-photo img {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
    animation: none;
  }
  .hero-photo::before { display: none; }
  .services-intro { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.mobile-nav { display: none; }
.arrow-left { transform: rotate(180deg); }
.section-kicker { margin-bottom: 1rem; color: #2c5a2d; }

.about-belief {
  max-width: 31rem;
  margin-top: clamp(1.3rem, 2.6vw, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid #28512042;
}

.about-belief h3 { font-size: 1rem; }
.about-belief p { margin-top: .35rem; }

.experience {
  position: relative;
  min-width: 0;
  padding: clamp(1.3rem, 3.5vw, 3.1rem);
  color: var(--paper);
  background:
    linear-gradient(145deg, #111711, #173a20),
    var(--ink);
  border: 1px solid #ffffff25;
  border-radius: clamp(1.35rem, 2.75vw, 2.25rem);
}

.experience > .eyebrow { color: var(--mint); }

.experience-metrics {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(.65rem, 2.25vw, 2rem);
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid #bfebbf56;
}

.metric { min-width: 0; }
.metric + .metric { padding-left: clamp(.65rem, 2vw, 1.7rem); border-left: 1px solid #bfebbf56; }
.metric strong {
  display: block;
  color: var(--lime);
  font-size: clamp(2rem, 3.15vw, 3.25rem);
  font-weight: 660;
  line-height: 1.05;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.metric p { margin-top: .65rem; color: #d2e4d0; font-size: clamp(.79rem, 1.15vw, .98rem); line-height: 1.35; }

.word-motion {
  --word-gap: clamp(1rem, 2.35vw, 2.2rem);
  position: relative;
  padding-block: clamp(.65rem, 1.4vw, 1.3rem);
  color: var(--paper);
  background: radial-gradient(ellipse at 65% 0%, #1a4627, transparent 80%), #131b15;
  border-block: 1px solid #d6ffd326;
  overflow: hidden;
  contain: layout paint;
}
.word-lanes {
  margin-inline-end: calc(var(--gutter) + 2.8rem);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.word-lane { overflow: hidden; }
.word-lane + .word-lane { margin-top: .3rem; }
.word-track {
  display: flex;
  width: max-content;
  font-size: clamp(1rem, 1.7vw, 1.55rem);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: nowrap;
  animation: word-loop 33s linear infinite;
}
.word-track.word-reverse { color: var(--mint); animation-direction: reverse; animation-duration: 29s; }
.word-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 auto;
  min-width: 100vw;
  gap: var(--word-gap);
  padding-inline-end: var(--word-gap);
}
.word-group i {
  flex: 0 0 auto;
  width: .26em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
}
@keyframes word-loop { to { transform: translate3d(-50%, 0, 0); } }
.word-motion.is-paused .word-track, .word-motion.is-offscreen .word-track { animation-play-state: paused; }

.motion-symbol {
  width: .65rem;
  height: .8rem;
  border-inline: 2px solid currentColor;
}
.motion-toggle[aria-pressed="true"] .motion-symbol {
  width: 0;
  height: 0;
  margin-left: .1rem;
  border: 0;
  border-block: .4rem solid transparent;
  border-left: .65rem solid currentColor;
}
.word-toggle {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  transform: translateY(-50%);
  border: 1px solid #bfebbf66;
  border-radius: 50%;
  color: var(--paper);
  background: #17251be6;
  cursor: pointer;
}
.word-toggle[hidden], .carousel-controls button[hidden] { display: none; }
.word-toggle:hover { color: var(--lime); }
.word-toggle:focus-visible { outline-color: var(--lime); outline-offset: 2px; }

.needs,
.process,
.work-formats,
.portfolio,
.testimonials,
.faq,
.deliverables,
.service-overview {
  padding-block: clamp(3.4rem, 7.2vw, 7rem);
}

.needs { color: var(--ink); background: #e0efdc; }
.needs-grid, .formats-grid {
  display: grid;
  gap: clamp(.8rem, 1.6vw, 1.5rem);
  margin-top: clamp(1.4rem, 3.1vw, 2.65rem);
}
.needs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.need {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.25rem, 2.8vw, 2.3rem);
  border: 1px solid #bdcfb9;
  border-radius: clamp(1.25rem, 2.5vw, 2rem);
  background: #f6fbf3;
}
.need:nth-child(2) { --reveal-delay: 100ms; background: #edf6e9; }
.need:nth-child(3) { --reveal-delay: 200ms; background: #d3e9cf; }
.need p, .process-steps p, .process-intro, .format p { color: #425342; line-height: 1.58; }
.need p { flex: 1; }
.need-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.need-links a, .format a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.75rem;
  padding: .35rem .7rem;
  color: #214725;
  border: 1px solid #acc7a7;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 660;
  text-decoration: none;
}
.need-links a:hover, .format a:hover { background: #d9efcf; }

.process { color: var(--ink); background: #f9faf7; }
.process-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(1.4rem, 5.1vw, 5rem);
  align-items: start;
}
.process-intro { max-width: 34ch; margin-top: 1.1rem; }
.process-steps { margin: 0; padding: 0; list-style: none; }
.process-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding-block: 1.05rem;
  border-top: 1px solid #cbd9c7;
}
.process-steps li:last-child { border-bottom: 1px solid #cbd9c7; }
.process-steps li:nth-child(2) { --reveal-delay: 90ms; }
.process-steps li:nth-child(3) { --reveal-delay: 180ms; }
.step-number {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  color: #17321a;
  background: var(--mint);
  font-weight: 710;
}
.process-steps h3 { margin-bottom: .18rem; }

.work-formats { color: var(--ink); background: #edf4ea; }
.work-formats .section-title { max-width: 23ch; }
.formats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.format {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1rem;
  padding: clamp(1.4rem, 3.6vw, 3rem);
  border-radius: clamp(1.35rem, 2.8vw, 2.25rem);
  border: 1px solid #c5d7c1;
  background: #fbfcf9;
}
.format p { max-width: 43ch; }
.format-ongoing { --reveal-delay: 110ms; background: #d9ebd2; }

.portfolio { color: var(--paper); background: #131813; }
.portfolio .section-title span { color: var(--lime); }
.portfolio :focus-visible, .service-hero :focus-visible { outline-color: var(--lime); }

.portfolio-layout {
  display: grid;
  grid-template-columns: minmax(0, .61fr) minmax(0, 1.39fr);
  gap: clamp(1.3rem, 3.45vw, 3.4rem);
  align-items: center;
}

.block-intro {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: clamp(1.05rem, 2.65vw, 2rem);
}

.carousel-controls { display: flex; gap: .5rem; }
.carousel-controls[hidden] { display: none; }
.carousel-controls button {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid #bfebbf75;
  border-radius: 50%;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
}
.carousel-controls button:enabled:hover { color: var(--ink); background: var(--lime); }
.carousel-controls button:disabled { opacity: .39; cursor: default; }

:is(.portfolio-track, .testimonial-track) {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(.65rem, 1.4vw, 1.15rem);
  padding: .35rem .35rem .75rem;
  margin: -.35rem -.35rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .35rem;
  scrollbar-width: thin;
  scrollbar-color: #789775 #263528;
  list-style: none;
}
.portfolio-track { grid-auto-columns: min(39%, 17rem); }
:is(.project, .testimonial) { min-width: 0; scroll-snap-align: start; }
.project-link {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid #bfebbf55;
  border-radius: clamp(1rem, 2.3vw, 1.75rem);
  background: #263e2d;
}
.project-link:focus-visible { outline-offset: -4px; }
.project-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .42s cubic-bezier(.18,.7,.27,1);
}
.project-link:hover img { transform: scale(1.045); }
.project-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(2.95rem, 4.5vw, 4rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid #fff9;
  border-radius: 50%;
  color: #fff;
  background: #111a13b8;
  backdrop-filter: blur(8px);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.project-play::after { border-block: .43rem solid transparent; border-left: .68rem solid; margin-left: .16rem; content: ""; }
.project-link:hover .project-play, .project-link:focus-visible .project-play {
  transform: translate(-50%, -50%) scale(1.08);
  color: var(--ink);
  background: var(--lime);
}

.testimonials { color: var(--ink); background: var(--mint); }
.testimonials-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.testimonials .carousel-controls button { color: var(--ink); border-color: #254e2680; }
.testimonial-track { grid-auto-columns: min(47%, 34rem); scrollbar-color: #557755 transparent; }
.testimonial-track:focus-visible { outline-offset: -2px; }
.testimonial {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid #2c5a2d44;
  border-radius: 1.25rem;
  background: #f5faf2;
}
.testimonial blockquote { margin: 0; font-size: var(--text-lead); line-height: 1.65; overflow-wrap: anywhere; }
.testimonial figcaption { margin-top: 1rem; font-weight: 650; overflow-wrap: anywhere; }

.faq { color: var(--ink); background: #f6f6f3; }
.faq-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.35rem, 5.2vw, 5rem); }
.faq-list details { border-top: 1px solid #cbd4ca; }
.faq-list details:last-child { border-bottom: 1px solid #cbd4ca; }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  min-height: 3.7rem;
  padding-block: .65rem;
  list-style: none;
  font-size: .9375rem;
  font-weight: 650;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .plus { flex: 0 0 auto; }
.faq-list details[open] .plus { background: var(--mint); }
.faq-list details[open] .plus::after { display: none; }
.faq-list details p { max-width: 55ch; padding: 0 1.6rem 1rem 0; color: #3b463b; line-height: 1.55; }

.footer-main {
  display: grid;
  grid-template-columns: .62fr 1fr;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 5.5vw, 4.6rem);
  border-bottom: 1px solid #ffffff28;
}
.footer-brand img { width: clamp(7rem, 12vw, 10.5rem); height: auto; }
.footer-brand p { margin-top: .85rem; color: #cbd7ca; font-size: .9rem; }
.footer-services h2 { margin-bottom: .4rem; color: var(--mint); font-size: .97rem; }
.footer-services ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin: 0; padding: 0; list-style: none; }
.footer-services a { font-size: .92rem; }
.contact { padding-block: 0 clamp(2.5rem, 5.3vw, 5rem); background: #edf4ea; }
.related + .contact { padding-top: clamp(2.5rem, 5.3vw, 5rem); }
.contact-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.3rem);
  padding: clamp(1.75rem, 5vw, 4.6rem);
  color: var(--paper);
  background: radial-gradient(ellipse at 100% 5%, #2e7141, transparent 70%), #17281b;
  border-radius: clamp(1.4rem, 3vw, 2.7rem);
}
.contact-panel .section-title { max-width: 23ch; }
.contact-panel .primary-link { flex: 0 0 auto; margin-top: 0; }
.contact-panel .primary-link:disabled { opacity: 1; background: var(--lime); border-color: var(--lime); cursor: default; }
.contact-panel :focus-visible { outline-color: var(--lime); }

.service-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--paper);
  background: linear-gradient(113deg, #101511 24%, #152f1b 100%);
  border-bottom: 1px solid #8cef1b35;
}
.service-hero-inner { min-height: clamp(23rem, 44vw, 37rem); display: grid; align-content: center; padding-block: 3rem 4rem; }
.back-link { width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .55rem; color: var(--mint); text-decoration: none; font-size: .9rem; }
.back-link:hover { text-decoration: underline; }
.service-hero-copy { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: clamp(1.45rem, 5vw, 5rem); margin-top: 1.25rem; }
.service-hero h1 span { color: var(--lime); }
.service-hero-copy p { max-width: 36ch; color: #e0e8df; font-size: var(--text-lead); line-height: 1.65; }
.service-hero-copy .primary-link { margin-top: 1.15rem; }

.service-ribbons {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 36%);
}
.service-ribbons i {
  position: absolute;
  inset: -70% -18% -70% auto;
  width: 37%;
  border-radius: 50%;
  border-left: 1px solid #b7edb052;
  background: linear-gradient(91deg, #6de68c40, #182f1d00 36%, #131c13);
  transform: rotate(28deg);
  animation: ribbon-drift 3.6s cubic-bezier(.18,.6,.25,1) both;
}
.service-ribbons i:nth-child(2) { right: 8%; width: 30%; opacity: .72; animation-delay: .14s; }
.service-ribbons i:nth-child(3) { right: 29%; width: 28%; opacity: .43; animation-delay: .25s; }
@keyframes ribbon-drift {
  from { transform: translateX(18%) rotate(22deg) scale(.94); }
  to { transform: translateX(0) rotate(28deg) scale(1); }
}

.service-overview { color: var(--ink); background: var(--paper); }
.service-overview-inner { display: grid; grid-template-columns: 1fr .88fr; align-items: center; gap: clamp(1.6rem, 5.6vw, 5.3rem); }
.service-overview p { max-width: 48ch; color: #3f4a3f; font-size: var(--text-lead); line-height: 1.65; }

.deliverables { color: var(--ink); background: #f6f6f3; }
.deliverable-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 1.5vw, 1.15rem); margin: 1.9rem 0 0; padding: 0; list-style: none; }
.deliverable-list li { padding: clamp(1.25rem, 3vw, 2.3rem); border: 1px solid #d3ded0; border-top: 3px solid #518e43; border-radius: 1.25rem; background: #fcfcfa; }
.deliverable-list li:nth-child(2) { --reveal-delay: 95ms; }
.deliverable-list li:nth-child(3) { --reveal-delay: 190ms; }
.deliverable-list h3 { margin-bottom: .7rem; }
.deliverable-list p { max-width: 36ch; color: #3f4a3f; line-height: 1.55; }

.related { padding-block: clamp(2rem, 4.2vw, 4rem); color: var(--ink); background: var(--mint); }
.related h2 { margin-bottom: .85rem; font-size: 1.2rem; letter-spacing: -.03em; }
.related ul { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.related a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .8rem;
  border: 1px solid #28512073;
  border-radius: 999px;
  font-size: .94rem;
  font-weight: 590;
  text-decoration: none;
}
.related a:hover { background: #e4f6df; }

.will-reveal {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
}
.will-reveal[data-reveal="left"] { transform: translate3d(-1.65rem, .6rem, 0); }
.will-reveal[data-reveal="right"] { transform: translate3d(1.65rem, .6rem, 0); }
.will-reveal[data-reveal="service"] { transform: translate3d(1.1rem, .65rem, 0); }
.will-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: transform .74s cubic-bezier(.18,.7,.27,1), opacity .62s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.will-reveal:focus-within { opacity: 1; transform: none; transition: none; }

@media (max-width: 760px) {
  main, .site-footer { text-align: center; }
  .hero-label, .need-links, .testimonials-header, .related ul, .footer-inner { justify-content: center; }
  .hero-description,
  .services-intro p,
  .service-feature h3,
  .service-feature h3 + p,
  .service-row p,
  .about-copy p,
  .about-belief,
  .process-intro,
  .work-formats .section-title,
  .format p,
  .service-hero-copy p,
  .service-overview p,
  .deliverable-list p,
  .footer-brand img { margin-inline: auto; }

  .service-hero-inner { min-height: 0; padding-block: 2rem 2.6rem; }
  .service-hero-copy, .service-overview-inner, .faq-inner, .services-layout, .needs-grid, .process-layout, .portfolio-layout { grid-template-columns: 1fr; }
  .service-feature { position: static; }
  .service-row { grid-template-columns: 2rem minmax(0, 1fr) 2rem; gap: .55rem; }
  .service-row > div { grid-column: 2; }
  .service-link-arrow { width: 2rem; height: 2rem; }
  .service-ribbons { mask-image: linear-gradient(to right, transparent, #000 76%); }
  .experience { width: min(100%, 34rem); justify-self: center; }
  .back-link { justify-self: center; }
  .process-steps li { grid-template-columns: 1fr; justify-items: center; gap: .55rem; }
  .format { justify-items: center; }
  .block-intro, .contact-panel { align-items: center; }
  .portfolio-track { grid-auto-columns: clamp(10.8rem, 53vw, 16.5rem); }
  .contact-panel { flex-direction: column; }
  .faq-list summary { position: relative; justify-content: center; padding-inline: 1.875rem; }
  .faq-list summary .plus { position: absolute; inset-inline-end: 0; }
  .faq-list details p { margin-inline: auto; padding-inline: 1.875rem; }
  .will-reveal[data-reveal] { transform: translate3d(0, 1.7rem, 0); }
  .will-reveal.is-revealed, .will-reveal:focus-within { transform: none; }
}

@media (max-width: 650px) {
  .header-inner .nav { display: none; }
  .mobile-nav { display: block; position: relative; z-index: 5; }
  .mobile-nav summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    list-style: none;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 650;
  }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .menu-icon { width: 1rem; height: .56rem; border-block: 1.5px solid currentColor; }
  .mobile-nav nav {
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    display: grid;
    min-width: 11rem;
    padding: .35rem .8rem;
    color: var(--paper);
    background: #172419;
    border: 1px solid #bfebbf7b;
  }
  .mobile-nav nav a { display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
  .mobile-nav nav a:hover { color: var(--lime); }
  .deliverable-list, .footer-main { grid-template-columns: 1fr; }
  .testimonial-track { grid-auto-columns: 87%; }
}

@media (max-width: 540px) {
  .portfolio-track { grid-auto-columns: clamp(10.8rem, 64vw, 16rem); }
  .formats-grid { grid-template-columns: 1fr; }
  .carousel-controls { gap: .35rem; }
  .carousel-controls button { width: 2.75rem; height: 2.75rem; }
  .service-directory li, .need, .format { --reveal-delay: 0ms; }
  .experience-metrics { margin-top: 1.1rem; padding-top: 1.1rem; }
  .footer-services ul { gap: 0 .75rem; }
  .footer-services a { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo::before { display: none; }
  .will-reveal[data-reveal] { opacity: 1; transform: none; }
  .word-track { transform: none; }
}