/* Keep the archived layout and motion; change only brand and content treatments. */
:root {
  --color-pink: #ff4e00;
  --color-pink-transparent: #ff4e0000;
  --color-contrast: var(--color-pink);
}
[data-theme="light"], [data-theme="dark"] {
  --color-contrast: var(--color-pink);
  --theme-contrast: var(--color-pink);
}
[data-theme="contrast"] {
  --color-primary: var(--color-pink);
  --theme-primary: var(--color-pink);
  --color-primary-transparent: var(--color-pink-transparent);
  --theme-primary-transparent: var(--color-pink-transparent);
}
svg[viewBox="0 0 1360 336"] { visibility: hidden; }
:has(>svg[viewBox="0 0 1360 336"]), .fwd-wordmark {
  background: url('/fwd/wordmark.svg?v=4') center top / 100% auto no-repeat;
}
/* Projects closing line "Something slowing you down? Let’s build it" is hidden; the Get in touch CTA above it stays. */
p.opacity-60:has(> a[href="/contact"]) { display: none; }
/* Hero: the wordmark is the page's h1 as real text; the archived logo drawings and the small tagline stay hidden. */
#home div.p-s.col-span-full { display: none; }
h1:has(> .fwd-wordmark-text) { background: none !important; }
h1:has(> .fwd-wordmark-text) > svg { display: none; }
.fwd-wordmark-text {
  display: block; width: 100%; margin: 0; color: #fff; white-space: nowrap; text-transform: uppercase;
  font: 400 calc(var(--layout-width) * var(--fwd-wordmark-scale, .157)) / .86 var(--font-anton), Impact, sans-serif;
  letter-spacing: -.01em; text-align: justify; text-align-last: justify;
}
#home > .dr-layout-grid > .desktop-only p {
  width: fit-content; padding-inline: .05em;
  color: #000; background: var(--color-pink);
}
/* Desktop: sub-heading left-aligned under the wordmark, pulled up (archived offset was 395 at a 1440 layout, right column). */
@media (min-width: 801px) {
  #home > .dr-layout-grid-inner > span { top: 15.9vw; grid-column: 1 / span 7; text-align: start; }
}
header a[href="/"] { position: relative; }
header a[href="/"] svg { visibility: hidden; }
header a[href="/"]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid currentColor;
  background: url('/fwd/logo.jpeg') center / cover no-repeat;
}
@media (min-width: 800px) {
  header.dr-layout-grid-inner { display: flex; gap: clamp(20px, 2.5vw, 48px); }
  header > .fwd-nav-about { margin-left: auto; }
  header > div:has(> a[href="/"]) { position: absolute; left: 50%; transform: translateX(-50%); }
}
footer .fwd-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.fwd-back-top { padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; margin-left: auto; min-height: 44px; color: inherit; font: 700 clamp(14px, 1.25vw, 20px)/1.2 var(--font-roboto), sans-serif; text-transform: uppercase; white-space: nowrap; }
.fwd-back-top > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 3px; background: #ff4e00; color: #fff; }
.fwd-back-top svg { width: 25px; height: 25px; transition: transform .2s ease; }
.fwd-back-top:hover svg { transform: translateY(-3px); }
.fwd-back-top:focus-visible { outline: 2px solid #ff4e00; outline-offset: 5px; }
@media (max-width: 800px) { footer .fwd-footer-bottom > div { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .fwd-back-top svg { transition: none; } }
/* Hero: one wordmark heading, one right-aligned display sub-heading, like the archived layout. */
.fwd-hero-heading { text-align: left; text-transform: uppercase; }
.fwd-hero-heading > span { display: block; }
.fwd-hero-promise { color: #ff4e00; font-size: clamp(22px, 2.35vw, 44px); line-height: 1.1; text-wrap: balance; }
.fwd-icp { font-size: clamp(21px, 1.7vw, 34px); line-height: 1.06; }
.fwd-industry-detail {
  display: block; margin-top: 18px; max-width: 28em;
  font-family: var(--font-roboto), sans-serif; font-size: clamp(13px, 1.2vw, 22px);
  font-weight: 400 !important; line-height: 1.35; text-transform: none;
}
main a[href^="/projects/"] > div.aspect-\[4\/3\] img { transition: transform .45s ease; }
main a[href^="/projects/"]:has(> div.aspect-\[4\/3\])::after { content: none; }
@media (hover: hover) {
  main a[href^="/projects/"]:hover > div.aspect-\[4\/3\] img { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  main a[href^="/projects/"] > div.aspect-\[4\/3\] img { transition: none; }
}
#approach code { font: inherit; }
#approach aside > div { position: relative; isolation: isolate; }
#approach aside > div::before {
  content: ''; position: absolute; inset: -48px -56px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .7) 12%, rgba(0, 0, 0, .7) 88%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  opacity: 0; transition: opacity .25s ease;
}
#approach aside > div:hover::before, #approach aside > div:focus-within::before { opacity: 1; }
#approach aside p { color: #efefef; opacity: 1; line-height: 1.6; max-width: 40ch; }
@media (max-width: 800px) {
  #approach aside > div::before { inset: -32px -16px; }
}
@media (prefers-reduced-motion: reduce) { #approach aside > div::before { transition: none; } }
/* The T in AI-NATIVE sits at 60.52% of the first line in Panchang. Align its stem with the reveal. */
#story h2.vh {
  width: max-content; white-space: nowrap;
  transform-origin: 60.52% calc(50% - var(--progress1) * 27%);
  transform: translate(-60.52%, -50%) scale(calc(var(--progress1) * (12.5 + var(--progress1) * 5.7)));
}
@media (min-width: 800px) {
  #story h2.vh {
    transform-origin: 60.52% calc(50% - var(--progress1) * 25%);
    transform: translate(-60.52%, -50%) scale(calc(var(--progress1) * 10));
  }
}
#who-we-help { scroll-margin-top: 0; }
main section:first-of-type a[href="/contact"] svg { background: url('/fwd/arrow.svg') center / contain no-repeat; }
main section:first-of-type a[href="/contact"] svg > * { display: none; }
/* Preloader: black, with the voxel mark and a blinking cursor. Shown only on the first page of a visit. */
html.fwd-skip-intro div.z-1000.bg-pink { display: none !important; }
/* The archived intro is desktop-only (max-dt:hidden); show it on phones too, with a larger mark. It still slides away on
   its own timer, and the more specific skip rule above keeps it off repeat pages. */
@media (max-width: 800px) {
  div.z-1000.bg-pink { display: block !important; }
  html div.z-1000.bg-pink::before, html div.z-1000.bg-pink::after { width: 84vw; }
}
div.z-1000.bg-pink { background: #000 !important; }
div.z-1000.bg-pink > * { visibility: hidden; }
div.z-1000.bg-pink::before, div.z-1000.bg-pink::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(44vw, 740px); aspect-ratio: 740 / 600;
  transform: translate(-50%, -50%); mix-blend-mode: screen;
}
/* ::before holds the mark, tagline and progress line. */
div.z-1000.bg-pink::before {
  content: 'KEEP MOVING FORWARD'; display: flex; align-items: flex-end; justify-content: center;
  box-sizing: border-box; padding-bottom: 18px;
  color: #fff; font: 700 clamp(14px, 1.5vw, 24px) / 1 var(--font-panchang), sans-serif; letter-spacing: .1em;
  background: linear-gradient(90deg, var(--color-pink) 50%, transparent 50%) 100% 100% / 200% 3px no-repeat,
              url('/fwd/hero/loader-mark.webp') center top / 100% auto no-repeat;
  animation: fwd-progress 3s linear forwards;
}
@keyframes fwd-progress { to { background-position: 0% 100%, 50% 0%; } }
/* ::after is the sage cursor, blinking independently. */
div.z-1000.bg-pink::after {
  background: url('/fwd/hero/loader-cursor.png') center top / 100% auto no-repeat;
  animation: fwd-blink 1s steps(1, end) infinite;
}
@keyframes fwd-blink { 50% { opacity: 0; } }
/* Hero stage: /fwd/hero/main.js draws the FWD mark and hands inside the archived fixed WebGL wrapper, over its starfield.
   The arm model itself is removed by fwd_content.py. Screen blending lets the stars show through the black render. */
#fwd-hero-stage { position: absolute; inset: 0; mix-blend-mode: screen; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
#fwd-hero-stage.fwd-light { mix-blend-mode: multiply; }   /* light sections: white render multiplies to nothing, colours stay true */
#fwd-hero-stage .fwd-frame { width: 1280px; height: 720px; position: absolute; left: 50%; top: 50%; transform-origin: center; }
#fwd-hero-stage .fwd-stage { position: absolute; inset: 0; overflow: hidden; }
#fwd-hero-stage .fwd-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fwd-hero-stage .fwd-glow {
  position: absolute; left: 50%; top: 69%; width: 760px; height: 760px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(237,1,50,.38) 0%, rgba(237,1,50,.12) 30%, transparent 62%);
  mix-blend-mode: screen; opacity: .7;
}
#fwd-hero-stage .fwd-rays {
  position: absolute; left: 50%; top: 69%; width: 1100px; height: 1100px; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.07) 0deg .5deg, transparent .5deg 5.3deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 18%, transparent 46%);
  mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 18%, transparent 46%);
  mix-blend-mode: screen; filter: blur(1px); animation: fwd-rays-spin 90s linear infinite;
}
@keyframes fwd-rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
#fwd-hero-stage .fwd-hand { position: absolute; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 0 5px rgba(255,255,255,.18)); }
#fwd-hero-stage .fwd-hand-left { left: -40px; top: 470px; }
#fwd-hero-stage .fwd-hand-right { right: -110px; top: 200px; }
@media (max-width: 800px) {
  #fwd-hero-stage .fwd-stage { overflow: visible; }
  #fwd-hero-stage .fwd-hand-left { left: -82px; top: 580px; }
  .fwd-industry-detail { font-size: 15px; margin-top: 14px; }
  main section:first-of-type h2 { font-size: 25px; }
  .fwd-icp { font-size: 21px; }
  #home > .dr-layout-grid-inner > span { grid-column: 1 / -1; }
  .fwd-hero-promise { font-size: 22px; line-height: 1.15; }
}