:root {
  --accent: #2f5d50;
  --accent-deep: #18372f;
  --accent-soft: #dfe9e5;
  --accent-soft-2: #edf3f0;
  --warm: #c77959;
  --warm-soft: #ead6cc;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --pointer-x: 50vw;
  --pointer-y: 32vh;
}

::selection {
  background: var(--accent-deep);
  color: #fff;
}

html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button {
  cursor: none !important;
}

body {
  position: relative;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(720px circle at var(--pointer-x) var(--pointer-y), rgba(47, 93, 80, .055), transparent 52%),
    radial-gradient(520px circle at calc(var(--pointer-x) + 14vw) calc(var(--pointer-y) + 16vh), rgba(199, 121, 89, .035), transparent 56%);
  opacity: .9;
}

.site-header::after {
  background: linear-gradient(90deg, var(--accent), var(--warm));
  height: 2px;
  box-shadow: 0 0 16px rgba(47, 93, 80, .25);
}

.site-header.is-scrolled {
  background: rgba(246, 246, 243, 0.82);
  box-shadow: 0 14px 42px rgba(24, 55, 47, 0.05);
}

.wordmark::after,
.nav > a:not(.nav-contact)::after {
  background: var(--accent);
}

.nav > a:not(.nav-contact) {
  transition: color .35s var(--ease-out-quart), transform .35s var(--ease-out-quart);
}

.nav > a:not(.nav-contact):hover {
  color: var(--accent-deep);
}

.nav-contact {
  position: relative;
  overflow: hidden;
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
  transition:
    transform .5s var(--ease-out-expo),
    background .35s ease,
    color .35s ease,
    border-color .35s ease;
}

.nav-contact::before {
  content: "";
  position: absolute;
  inset: -100% 45% -100% -55%;
  transform: translateX(-135%) rotate(12deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: transform .8s var(--ease-out-expo);
}

.nav-contact:hover::before {
  transform: translateX(330%) rotate(12deg);
}

.nav-contact:hover {
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}

.hero {
  isolation: isolate;
}

.hero::before {
  background: radial-gradient(circle, rgba(47, 93, 80, 0.2), rgba(47, 93, 80, 0.06) 38%, transparent 69%);
  transform: translate3d(var(--hero-orb-x, 0), var(--hero-orb-y, 0), 0);
  transition: transform .8s var(--ease-out-expo);
}

.hero::after {
  background: radial-gradient(circle, rgba(199, 121, 89, 0.13), rgba(199, 121, 89, 0.035) 44%, transparent 72%);
  transform: translate3d(calc(var(--hero-orb-x, 0) * -.55), calc(var(--hero-orb-y, 0) * -.55), 0);
  transition: transform 1s var(--ease-out-expo);
}

.hero-title-wrap::before {
  content: "";
  position: absolute;
  left: -8%;
  top: 14%;
  width: 42%;
  height: 62%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,93,80,.09), transparent 67%);
  filter: blur(22px);
  transform: translate3d(var(--hero-glow-x, 0), var(--hero-glow-y, 0), 0);
  transition: transform .9s var(--ease-out-expo);
}

h1 {
  transform: translate3d(0, var(--hero-shift, 0px), 0);
  text-wrap: balance;
}

h1 span {
  -webkit-text-stroke-color: var(--accent);
  text-stroke-color: var(--accent);
}

h1 em,
blockquote em,
.contact-wrap h2 em {
  color: var(--warm);
}

.round-link {
  position: relative;
  overflow: hidden;
  border-color: var(--accent-deep);
  color: var(--accent-deep);
  transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
  transition:
    transform .52s var(--ease-out-expo),
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}

.round-link::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: inherit;
  border: 1px solid rgba(47,93,80,.16);
  transform: scale(.72);
  opacity: 0;
  transition: transform .55s var(--ease-out-expo), opacity .4s ease;
}

.round-link:hover::before {
  transform: scale(1.45);
  opacity: 1;
}

.round-link:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  box-shadow: 0 18px 44px rgba(24, 55, 47, 0.18);
}

.hero-ticker {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: #f9faf8;
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -1px rgba(255,255,255,.08);
}

.hero-ticker div {
  animation-duration: var(--ticker-speed, 28s);
}

.project,
.project-visual {
  min-width: 0;
}

.project {
  perspective: 1400px;
}

.project-meta {
  transition: color .35s ease, transform .5s var(--ease-out-expo);
}

.project:hover .project-meta {
  color: var(--accent-deep);
  transform: translateY(-3px);
}

.project-visual {
  border-color: rgba(24,55,47,.13);
  transform: translateZ(0);
  transition:
    border-color .5s ease,
    box-shadow .7s var(--ease-out-expo),
    clip-path .9s var(--ease-out-expo);
  clip-path: inset(0 0 0 0 round 0px);
}

.project-visual::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.2) 48%, rgba(255,255,255,.04) 55%, transparent 68%);
  transform: translateX(-58%) rotate(3deg);
  transition: transform 1.25s var(--ease-out-expo), opacity .4s ease;
}

.project:hover .project-visual {
  border-color: rgba(24,55,47,.28);
  box-shadow: 0 34px 90px rgba(24,55,47,.10);
}

.project:hover .project-visual::after {
  opacity: .75;
  transform: translateX(58%) rotate(3deg);
}

.project-blue {
  background:
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.11), transparent 28%),
    linear-gradient(145deg, #1d3f36, #10251f 72%);
}

.project-stone {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, #e9d8ce, #cf9c83);
}

.project-lime {
  background:
    radial-gradient(circle at 75% 15%, rgba(255,255,255,.42), transparent 33%),
    linear-gradient(145deg, #e7efeb, #bfd0c8);
}

.projects > .project:not(.project-large) .project-visual {
  padding: clamp(32px, 4vw, 64px);
}

.mock-browser,
.poster-card,
.type-card {
  transition:
    transform .72s var(--ease-out-expo),
    box-shadow .72s var(--ease-out-expo),
    filter .5s ease;
}

.project:hover .mock-browser,
.project:hover .poster-card,
.project:hover .type-card {
  filter: saturate(1.03) contrast(1.015);
}

.mock-copy button {
  border-color: var(--warm);
  background: var(--warm);
  color: #fff;
  transition: transform .35s var(--ease-out-expo), background .3s ease, color .3s ease, box-shadow .3s ease;
}

.mock-copy button:hover {
  transform: translateY(-3px);
  background: #df8f6c;
  box-shadow: 0 10px 26px rgba(199,121,89,.22);
}

.poster-card {
  width: min(100%, 460px);
  max-width: 100%;
  overflow: hidden;
  background: linear-gradient(155deg, #244b40, #17352d);
  color: #f8faf7;
}

.poster-card p {
  max-width: 100%;
  font-size: clamp(3rem, 4.8vw, 5.4rem);
}

.type-card {
  width: min(100%, 520px);
  max-width: 100%;
  overflow: hidden;
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 34px);
  border-color: var(--accent-deep);
  background: rgba(239, 245, 242, 0.95);
  color: var(--accent-deep);
  box-shadow: 0 30px 80px rgba(47, 93, 80, 0.15);
}

.type-card strong {
  max-width: 100%;
  font-size: clamp(2.55rem, 4.2vw, 4.55rem);
  line-height: .9;
  letter-spacing: -.07em;
  text-wrap: balance;
}

.type-card div {
  flex-wrap: wrap;
  gap: 10px 18px;
}

.service-row {
  --row-x: 50%;
  --row-y: 50%;
  overflow: hidden;
  transition:
    background .35s ease,
    padding-left .55s var(--ease-out-expo),
    padding-right .55s var(--ease-out-expo),
    transform .55s var(--ease-out-expo);
}

.service-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--row-x) var(--row-y), rgba(47,93,80,.10), transparent 56%);
  transition: opacity .35s ease;
}

.service-row:hover::after {
  opacity: 1;
}

.service-row:hover {
  background: var(--accent-soft-2);
  padding-left: 18px;
  padding-right: 18px;
  transform: translateX(4px);
}

.service-row:hover h3 {
  color: var(--accent-deep);
}

.statement-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #173a31, #0f2721 72%);
}

.statement-section::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  right: -240px;
  top: -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,121,89,.22), rgba(199,121,89,.04) 42%, transparent 68%);
  pointer-events: none;
}

.statement-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(110deg, transparent 0 46%, rgba(255,255,255,.05) 48%, transparent 50% 100%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,.025) 120px 121px);
  transform: translateX(var(--statement-shift, 0));
  transition: transform .1s linear;
}

.statement {
  position: relative;
  z-index: 1;
}

.statement blockquote {
  text-wrap: balance;
}

.statement-foot {
  border-top-color: rgba(255,255,255,.3);
}

.process-flow > b {
  color: var(--warm);
  transition: transform .45s var(--ease-out-expo), opacity .3s ease;
}

.process-flow:hover > b {
  transform: translateX(6px);
}

.process-flow div {
  position: relative;
  transition: transform .5s var(--ease-out-expo), color .35s ease;
}

.process-flow div::before {
  content: "";
  position: absolute;
  left: 0;
  top: -37px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--warm));
  transition: width .65s var(--ease-out-expo);
}

.process-flow div:hover::before {
  width: 100%;
}

.process-flow div:hover {
  transform: translateY(-6px);
  color: var(--accent-deep);
}

.contact-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #c36f50, #a85439 72%);
}

.contact-section::before,
.contact-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.contact-section::before {
  width: 560px;
  height: 560px;
  left: -180px;
  bottom: -340px;
  background: rgba(255,255,255,.08);
  transform: translate3d(var(--contact-orb-x, 0), var(--contact-orb-y, 0), 0);
  transition: transform .85s var(--ease-out-expo);
}

.contact-section::after {
  width: 420px;
  height: 420px;
  right: -120px;
  top: -220px;
  border: 1px solid rgba(255,255,255,.22);
  transform: translate3d(calc(var(--contact-orb-x, 0) * -.6), calc(var(--contact-orb-y, 0) * -.6), 0);
  transition: transform 1s var(--ease-out-expo);
}

.contact-wrap {
  position: relative;
  z-index: 1;
}

.contact-wrap h2 em {
  color: #f5dfd5;
}

.contact-link {
  position: relative;
  transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0);
  transition: opacity .3s ease, transform .55s var(--ease-out-expo);
}

.contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  background: currentColor;
  transition: right .65s var(--ease-out-expo);
}

.contact-link:hover::after {
  right: 0;
}

.contact-link:hover {
  opacity: .9;
}

.site-footer {
  background: #10231e;
}

.project-visual,
.type-card,
.poster-card,
.mock-browser,
.round-link,
.nav-contact {
  backface-visibility: hidden;
}

/* Cinematic page entrance */
.page-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--accent-deep);
  color: #f7f7f2;
  pointer-events: all;
  transform: translateY(0);
  transition: transform 1s var(--ease-out-expo) .62s;
}

.page-intro::before {
  content: "";
  position: absolute;
  width: min(80vw, 1000px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,121,89,.23), transparent 66%);
  filter: blur(8px);
  transform: scale(.8);
  opacity: 0;
  transition: opacity .7s ease, transform 1.2s var(--ease-out-expo);
}

.page-intro__inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 1320px);
}

.page-intro__brand {
  overflow: hidden;
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 8.5rem);
  line-height: .88;
  letter-spacing: -.07em;
  font-weight: 680;
}

.page-intro__brand span {
  display: block;
  transform: translateY(115%);
  transition: transform .8s var(--ease-out-expo) .08s;
}

.page-intro__line {
  height: 1px;
  margin-top: 32px;
  background: rgba(255,255,255,.25);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .8s var(--ease-out-expo) .18s;
}

.page-intro__meta {
  margin-top: 14px;
  opacity: 0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: opacity .55s ease .28s;
}

.page-intro.is-running::before {
  opacity: 1;
  transform: scale(1.1);
}

.page-intro.is-running .page-intro__brand span {
  transform: translateY(0);
}

.page-intro.is-running .page-intro__line {
  transform: scaleX(1);
}

.page-intro.is-running .page-intro__meta {
  opacity: .65;
}

.page-intro.is-done {
  transform: translateY(-102%);
  pointer-events: none;
}

/* Custom cursor */
.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12000;
  pointer-events: none;
  opacity: 0;
  will-change: transform, width, height, opacity;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent-deep);
  mix-blend-mode: multiply;
  transition: opacity .25s ease, background .25s ease;
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(24,55,47,.38);
  border-radius: 50%;
  backdrop-filter: blur(1px);
  transition:
    width .35s var(--ease-out-expo),
    height .35s var(--ease-out-expo),
    margin .35s var(--ease-out-expo),
    border-color .3s ease,
    background .3s ease,
    opacity .25s ease;
}

html.cursor-visible .cursor-dot,
html.cursor-visible .cursor-ring {
  opacity: 1;
}

html.cursor-active .cursor-ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: rgba(199,121,89,.6);
  background: rgba(199,121,89,.07);
}

html.cursor-active .cursor-dot {
  background: var(--warm);
}

/* More cinematic reveals */
.reveal {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.992);
  filter: blur(10px);
  clip-path: inset(0 0 12% 0);
  transition:
    opacity 1s ease var(--reveal-delay, 0ms),
    transform 1.05s var(--ease-out-expo) var(--reveal-delay, 0ms),
    filter .9s ease var(--reveal-delay, 0ms),
    clip-path 1.05s var(--ease-out-expo) var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}

@media (max-width: 980px) {
  .type-card strong {
    font-size: clamp(2.5rem, 7vw, 4.35rem);
  }
}

@media (max-width: 760px) {
  .service-row:hover {
    padding-left: 0;
    padding-right: 0;
    transform: none;
  }

  .hero::before {
    opacity: .7;
  }

  .hero::after {
    opacity: .5;
  }

  .projects > .project:not(.project-large) .project-visual {
    padding: 28px;
  }

  .type-card {
    padding: 26px 22px;
  }

  .type-card strong {
    font-size: clamp(2.35rem, 11vw, 4rem);
  }

  .page-intro__inner {
    width: calc(100% - 28px);
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-row,
  .process-flow div,
  .process-flow > b,
  .contact-link,
  .mock-copy button,
  .nav-contact,
  .round-link,
  .project-visual,
  .mock-browser,
  .poster-card,
  .type-card {
    transition: none !important;
  }

  .page-intro {
    display: none;
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
}