/* Rebuild-specific behaviour layer (replaces the Framer runtime). Framer-generated layout CSS lives in css/framer/. */

/* 1. Appear (on load) and reveal (on scroll) animations: hidden until site.js animates them in. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-appear]:not(.is-in), .js [data-reveal]:not(.is-in) { opacity: 0.001; }
}
[data-appear].is-animating { will-change: transform, opacity; }

/* 2. Tickers (logo strip, work strips): items duplicated by site.js, then looped. */
[data-ticker] > ul { width: max-content !important; }
[data-ticker].is-running > ul { animation: sw-ticker var(--ticker-duration, 30s) linear infinite; }
[data-ticker][data-dir="right"].is-running > ul { animation-direction: reverse; }
@keyframes sw-ticker { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--ticker-shift, 50%))); } }

/* 3. Mobile menu open state */
.nav-open-enter { animation: sw-fade .35s cubic-bezier(.22,1,.36,1); }
@keyframes sw-fade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
[data-highlight="true"] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-ticker].is-running > ul { animation: none; }
}

/* 5. Hover states Framer applied from JS (values measured on the live site) */
[data-highlight="true"] { transition: background-color .25s ease, opacity .25s ease; }
/* Work page "View Project" pills */
.framer-1se5jt2, .framer-1f3n168, .framer-sg8srq, .framer-swoiu5, .framer-1v2bno1 { transition: background-color .25s ease; }
a:hover .framer-1se5jt2, .framer-1se5jt2:hover,
a:hover .framer-1f3n168, a:hover .framer-sg8srq, a:hover .framer-swoiu5, a:hover .framer-1v2bno1,
.framer-1f3n168:hover, .framer-sg8srq:hover, .framer-swoiu5:hover, .framer-1v2bno1:hover { background-color: rgb(56, 56, 56) !important; }
/* Contact form submit */
.framer-lgn8F.hover { background-color: rgba(17, 17, 17, .8) !important; }

/* Shared footer wrapper (homepage footer everywhere) */
.site-footer { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 44px 40px 40px; position: relative; box-sizing: border-box; }

/* Home hero: Framer's white-space:pre line was clipped to "ing complex problem" at tablet widths */
.framer-nnchts { white-space: normal !important; max-width: 100%; text-align: center; }

/* single responsive footer (replaces 3 Framer variants) */
.site-footer > footer { width: 100% !important; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .site-footer .framer-lH7Kb .framer-16t7br5 { width: 200px; }
  .site-footer .framer-lH7Kb .framer-1pobslx { justify-content: center; gap: 44px; }
  .site-footer .framer-lH7Kb .framer-oqjni9 { width: 222px; }
}
@media (max-width: 809.98px) {
  .site-footer { padding: 35px 20px 20px; }
  .site-footer .framer-lH7Kb.framer-k7y9qh { padding: 40px 20px; }
  .site-footer .framer-lH7Kb .framer-167ln2q-container { flex: none; width: 100%; }
  .site-footer .framer-lH7Kb .framer-1pobslx { flex-direction: column; justify-content: flex-start; gap: 40px; }
  .site-footer .framer-lH7Kb .framer-cq9wy5 { place-content: flex-start; align-items: flex-start; gap: 20px; }
  .site-footer .framer-lH7Kb .framer-rc8k91 { flex-direction: column; align-content: flex-start; align-items: flex-start; }
  .site-footer .framer-lH7Kb .framer-vqgzcd, .site-footer .framer-lH7Kb .framer-16t7br5, .site-footer .framer-lH7Kb .framer-oqjni9 { width: 100%; }
}

/* QA r3: long email address on /contact must not overflow at 390 */
.layout-page h5, .layout-page h5 *, .layout-page [data-was], .layout-page [data-was] * { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 809.98px) { .layout-page h5, .layout-page [data-was] { white-space: normal !important; } .layout-page :has(> h5), .layout-page :has(> [data-was]) { white-space: normal !important; max-width: 100%; } }

/* QA r4: visible keyboard focus on form fields */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid #3b82f6 !important; outline-offset: 2px !important; }