/* Figma Home 119:2367 — centered desktop navigation. */
.site-header { position: fixed; padding: 48px; flex-wrap: nowrap; }
.site-header .wordmark, .site-header .wordmark img { width: 145px; height: 30px; }
.site-header .site-nav { position: absolute; left: 50%; top: 53px; transform: translateX(-50%); width: auto; gap: 48px; font: 500 18px/24px Arturm, sans-serif; letter-spacing: .72px; }
.site-header .site-nav a { color: #fff; }
#approach { scroll-margin-top: 110px; }
.site-header a:focus-visible, .mobile-menu a:focus-visible, .mobile-menu-toggle:focus-visible, .mobile-menu-close:focus-visible { outline: 2px solid #E9C79E; outline-offset: 6px; }
@media (max-width: 1023px) {
  .menu-ready .site-header { padding: 24px 30px; }
  .menu-ready .site-header .site-nav { display: none; }
  .mobile-menu-toggle { display: block; margin-left: auto; }
  .mobile-menu-header { padding: 24px 30px 0; }
  .mobile-menu-header > a img { width: 145px; height: 30px; }
  html:not(.menu-ready) .site-header { flex-wrap: wrap; gap: 20px; padding: 24px; }
  html:not(.menu-ready) .site-header .site-nav { position: static; transform: none; flex-wrap: wrap; gap: 20px; }
}
@media (max-width: 760px) {
  .menu-ready .site-header, .mobile-menu-header { padding: 18px 24px 0 30px; }
  .menu-ready .site-header .wordmark, .menu-ready .site-header .wordmark img, .mobile-menu-header > a img { width: 97px; height: 20px; }
}

/* Figma 119:2377: outlined project action, aligned with the centered links. */
.project-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(233,199,158,.75); border-radius: 12px; color: #fff; font: 500 18px/24px Arturm, sans-serif; letter-spacing: .72px; text-decoration: none; white-space: nowrap; transition: background-color 180ms ease, border-color 180ms ease; }
.project-cta img { display: block; width: 18px; height: 18px; flex: none; }
.project-cta:hover { background: rgba(233,199,158,.08); border-color: #E9C79E; }
.site-header > .project-cta { position: absolute; right: 38px; top: 40px; }
.mobile-menu-action { padding: 32px clamp(1.875rem, 9vw, 3.75rem) 0; }
.mobile-menu-action + .mobile-menu-social { padding-top: 32px; }
@media (max-width: 1023px) { .site-header > .project-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .project-cta { transition: none; } }

/* Project action: restrained champagne fill and directional feedback. */
.project-cta { transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease; }
.project-cta img { transition: transform 280ms cubic-bezier(.22,.61,.36,1), filter 280ms ease; }
.project-cta:focus-visible { background: #E9C79E; border-color: #E9C79E; color: #201E1C; }
.project-cta:focus-visible img { filter: brightness(0); transform: translateX(2px); }
@media (hover: hover) {
  .project-cta:hover { background: #E9C79E; border-color: #E9C79E; color: #201E1C; }
  .project-cta:hover img { filter: brightness(0); transform: translateX(2px); }
}
.project-cta:active { background: #E9C79E; color: #201E1C; }
.project-cta:active img { filter: brightness(0); }
#work, #about, #services, #approach, #contact { scroll-margin-top: 110px; }
@media (max-width: 760px) { #work, #about, #services, #approach, #contact { scroll-margin-top: 76px; } }
@media (prefers-reduced-motion: reduce) { .project-cta, .project-cta img { transition: none; } .project-cta img { transform: none !important; } }
/* Outlined at rest; beige fill on hover and keyboard focus. */
.project-cta, .mobile-menu .project-cta { background: transparent; border-color: rgba(233,199,158,.75); color: #fff; }
.project-cta img { filter: none; }
.project-cta:focus-visible, .mobile-menu .project-cta:focus-visible { background: #E9C79E; border-color: #E9C79E; color: #241810; }
.project-cta:focus-visible img { filter: brightness(0) saturate(100%) invert(9%) sepia(23%) saturate(1018%) hue-rotate(341deg) brightness(94%) contrast(94%); }
@media (hover: hover) {
  .project-cta:hover, .mobile-menu .project-cta:hover { background: #E9C79E; border-color: #E9C79E; color: #241810; }
  .project-cta:hover img { filter: brightness(0) saturate(100%) invert(9%) sepia(23%) saturate(1018%) hue-rotate(341deg) brightness(94%) contrast(94%); }
}

/* Gentle acceleration and a soft settle, with restrained arrow travel. */
.project-cta { transition: background-color 520ms cubic-bezier(.45,0,.2,1), border-color 520ms cubic-bezier(.45,0,.2,1), color 520ms cubic-bezier(.45,0,.2,1); }
.project-cta img { transition: transform 520ms cubic-bezier(.45,0,.2,1), filter 520ms cubic-bezier(.45,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .project-cta, .project-cta img { transition: none; } }

/* Figma header 120:629 and project button 120:625. */
.site-header .site-nav { font-family: 'Helixa', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: .64px; text-transform: uppercase; }
.project-cta, .mobile-menu .project-cta { box-sizing: border-box; height: 48px; gap: 12px; padding: 12px 16px 12px 18px; border-radius: 12px; font: 600 15px/24px 'Helixa', Arial, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.project-cta img { width: 16px; height: 16px; }
.mobile-menu-primary a { font-family: 'Helixa', Arial, sans-serif; font-weight: 500; text-transform: uppercase; }
@media (min-width: 1024px) {
  .site-header { position: fixed; padding: 40px 48px; height: 128px; flex-wrap: nowrap; align-items: center; }
  .site-header .wordmark, .site-header .wordmark img { width: 145px; height: 30px; }
  .site-header .site-nav { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); width: auto; gap: 48px; }
  .site-header > .project-cta { position: absolute; top: 40px; right: 48px; }
}

/* Compact navigation hierarchy with a prominent full-width mobile action. */
@media (max-width: 1023px) {
  .mobile-menu-primary { gap: 24px; }
  .mobile-menu-primary a { font-size: clamp(26px, 5vw, 32px); line-height: 1.25; letter-spacing: .03em; }
  .mobile-menu-action { padding-top: 36px; }
  .mobile-menu-action .project-cta { display: flex; width: 100%; min-height: 60px; height: auto; padding: 18px 22px; justify-content: space-between; font-size: 15px; }
  .mobile-menu-action .project-cta img { width: 18px; height: 18px; }
}
@media (max-width: 760px) {
  .mobile-menu-primary, .mobile-menu-action, .mobile-menu-social { padding-inline: 30px; }
  .mobile-menu-primary { padding-top: clamp(40px, 9dvh, 72px); }
}
@media (max-width: 1023px) and (max-height: 600px) {
  .mobile-menu-primary { padding-top: 24px; gap: 16px; }
  .mobile-menu-action { padding-top: 24px; }
}

@media (max-width: 1023px) {
  .mobile-menu-action .project-cta { font-size: clamp(26px, 5vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: .03em; }
}