/* 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; display: inline-flex; align-items: center; gap: 10px; width: max-content; padding: 0; background: transparent; }
header a[href="/"] svg { visibility: hidden; flex: 0 0 52px; width: 52px; height: 40px; }
header a[href="/"]::after {
  content: ''; position: absolute; left: 0; top: 50%; width: 52px; height: 40px; transform: translateY(-50%); border-radius: 5px;
  border: 0;
  background: #000 url('/fwd/logo-mark.webp') center / 40px 40px no-repeat;
}
.fwd-header-brand-name { font: 700 clamp(15px, 1.3vw, 20px)/1 var(--font-roboto), Arial, sans-serif; letter-spacing: -.02em; text-transform: none; white-space: nowrap; }
@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%; flex-wrap: wrap; }
  /* Phones: the copyright line (desktop-only in the archive) sits centred under the links, then Back to top, centred, ends the page. */
  footer .fwd-footer-bottom { row-gap: 0; }
  footer .fwd-footer-bottom a.desktop-only[href="/"] { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 0; }
  footer .fwd-footer-bottom .fwd-back-top { margin-inline: auto; }
}
@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; }
/* Soft black panel behind each Who we are block (ui.css keeps it shown) and the Deployed on the floor intro. */
#approach aside > div, #projects > .dr-layout-grid:first-child > div:last-child > div { position: relative; isolation: isolate; }
#approach aside > div::before, #projects > .dr-layout-grid:first-child > div:last-child > 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; }
/* The Deployed on the floor intro sits over the 3D mark, so its panel is always shown. */
#projects > .dr-layout-grid:first-child > div:last-child > div::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, #projects > .dr-layout-grid:first-child > div:last-child > div::before { inset: -32px -16px; }
}
@media (prefers-reduced-motion: reduce) { #approach aside > div::before, #projects > .dr-layout-grid:first-child > div:last-child > div::before { transition: none; } }
/* Desktop: the Deployed on the floor heading and its paragraph read as one block. The paragraph starts level with the
   heading's second line (ON THE), and neither drifts on scroll (the archived parallax moved them in opposite directions). */
@media (min-width: 800px) {
  #projects > .dr-layout-grid:first-child > div:nth-child(-n+2) div { transform: none !important; }
  #projects > .dr-layout-grid:first-child > div:last-child { margin-top: calc((100 * 100) / var(--device-width) * 1vw); }
}
/* 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 .5s linear forwards;
}
/* Shortened intro: the archived slide-out waited 1.5s and took 1.5s; fwd_content.py also cuts its 1s start delay to 0.3s. */
div.z-1000.bg-pink, div.z-1000.bg-pink > div { transition-delay: .2s !important; transition-duration: .8s !important; }
div.z-1000.bg-pink path { transition-duration: .5s !important; }
@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; opacity: 0; transition: opacity .8s ease-out; }
#fwd-hero-stage.fwd-ready { opacity: 1; }
/* Inner pages: opacity follows scroll as the footer approaches (--fwd-footer, set in content.js), no timed fade. */
#fwd-hero-stage.fwd-footer-only { opacity: 0; transition: none; }
#fwd-hero-stage.fwd-footer-only.fwd-ready { opacity: var(--fwd-footer, 0); }
#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: calc(50% + 16% * (1 - var(--fwd-lift, 0))); 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: calc(50% + 16% * (1 - var(--fwd-lift, 0))); 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; }
}

/* Shared typography and starfield, with a quiet surface for the form. */
.fwd-contact { position: relative; padding: calc(var(--header-height) + 72px) max(20px, 2.78vw) 120px; color: #efefef; font-family: var(--font-roboto), Arial, sans-serif; }
.fwd-contact-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); max-width: 1440px; margin: auto; align-items: start; }
.fwd-contact-kicker { color: #aaa; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.fwd-contact h1 { margin: 28px 0; font: 400 clamp(72px, 10vw, 160px)/1.05 var(--font-anton), sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.fwd-contact h1 span { color: #ff4e00; }
.fwd-contact-intro > p:last-of-type { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.55; max-width: 30ch; }
.fwd-contact-intro > a { display: inline-flex; align-items: center; gap: 40px; margin-top: 36px; padding-bottom: 12px; border-bottom: 1px solid #ff4e00; font-size: 17px; }
.fwd-contact-intro > a span { font-size: 26px; color: #ff4e00; }
#fwd-contact-form { padding: clamp(24px, 3vw, 44px); border: 1px solid #444; border-radius: 12px; background: rgba(15, 15, 15, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#fwd-contact-form h2 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.03em; }
.fwd-contact-hint { color: #aaa; font-size: 14px; line-height: 1.5; margin: 12px 0 32px; }
#fwd-contact-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fwd-contact-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 20px; }
.fwd-contact-fields label { display: block; font-size: 15px; line-height: 1.5; }
.fwd-contact-fields label > span { color: #aaa; }
.fwd-contact-wide { grid-column: 1 / -1; }
.fwd-contact-fields input, .fwd-contact-fields textarea { display: block; width: 100%; margin-top: 10px; padding: 12px 14px; min-height: 48px; border: 1px solid #666; border-radius: 6px; background: #070707b3; color: #efefef; font: 400 16px/1.5 var(--font-roboto), Arial, sans-serif; }
.fwd-contact-fields textarea { resize: vertical; }
.fwd-contact-fields textarea::placeholder { color: #999; opacity: 1; }
.fwd-contact :is(input, textarea, button, a):focus-visible { outline: 2px solid #ff4e00; outline-offset: 4px; }
.fwd-contact-privacy { color: #aaa; font-size: 13px; line-height: 1.6; margin: 24px 0; }
.fwd-contact-privacy a { color: #efefef; text-decoration: underline; text-underline-offset: 3px; }
#fwd-contact-form button[type="submit"] { display: flex; align-items: center; width: 100%; min-height: 60px; padding: 0; overflow: hidden; border: 1px solid #ff4e00; border-radius: 12px; background: #ff4e00; color: #000; font-size: 16px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.fwd-contact-message-wrap { position: relative; margin-top: 10px; }
.fwd-contact-message-wrap textarea { margin-top: 0; padding-bottom: 64px; }
.fwd-contact-mic { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border: 1px solid #ff4e00; border-radius: 50%; background: #ff4e00; color: #000; cursor: pointer; }
.fwd-contact-mic svg { width: 22px; height: 22px; }
.fwd-contact-mic:hover { background: #ff7133; }
.fwd-contact-mic[aria-pressed="true"] { background: #ed0132; border-color: #ed0132; color: #fff; }
.fwd-mic-stop, .fwd-contact-mic[aria-pressed="true"] .fwd-mic-icon { display: none; }
.fwd-contact-mic[aria-pressed="true"] .fwd-mic-stop { display: block; }
#contact-dictation-status { color: #aaa; font-size: 12px; line-height: 1.5; margin-top: 10px; }
.fwd-contact-arrow { display: grid; place-items: center; align-self: stretch; width: 60px; flex-shrink: 0; background: #000; border-radius: 11px; color: #efefef; font-size: 36px; font-weight: 400; }
.fwd-contact-submit-label { flex: 1; padding: 16px; }
#fwd-contact-form fieldset:disabled { opacity: .65; }
#fwd-contact-form fieldset:disabled button { cursor: wait; }
#contact-result { margin-top: 16px; font-size: 15px; line-height: 1.5; }
#contact-result:empty { display: none; }
#contact-result[data-state="success"] { color: #b7d7b0; }
#contact-result[data-state="error"] { color: #ffb3a7; }
.fwd-contact-modal { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 100px max(24px, 5vw) 60px; border: 0; border-radius: 0; background: #090a0a; overflow-y: auto; overscroll-behavior: contain; color-scheme: dark; }
.fwd-contact-modal[open] { display: grid; align-items: center; }
.fwd-contact-modal::backdrop { background: #090a0a; }
html.fwd-contact-open { overflow: hidden; }
.fwd-contact-modal .fwd-contact-inner { width: 100%; }
.fwd-contact-close { position: fixed; z-index: 2; top: 20px; right: 24px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #090a0a; color: #efefef; font: 300 42px/1 Arial, sans-serif; cursor: pointer; }
.fwd-contact-close:hover { color: #ff4e00; }
@media (max-width: 900px) {
  .fwd-contact-inner { grid-template-columns: minmax(0, 1fr); }
  .fwd-contact h1 { font-size: clamp(72px, 14vw, 128px); }
  .fwd-contact-intro > p:last-of-type { max-width: 42ch; }
}
@media (max-width: 500px) {
  .fwd-contact { padding-top: calc(var(--header-height) + 40px); padding-bottom: 72px; }
  .fwd-contact-fields { grid-template-columns: minmax(0, 1fr); }
  .fwd-contact-modal { padding: 72px 20px 40px; }
  .fwd-contact-close { top: 12px; right: 12px; }
}
/* Popup: compact enough to fit one screen, so the form never scrolls on laptops or phones (it still can, as a fallback,
   when the phone keyboard is open). The /contact page keeps its roomier layout. */
.fwd-contact-modal { padding: 64px max(24px, 5vw) 32px; }
.fwd-contact-modal #fwd-contact-form { padding: clamp(20px, 2.2vw, 32px); }
.fwd-contact-modal .fwd-contact-hint { margin: 8px 0 20px; }
.fwd-contact-modal .fwd-contact-fields { gap: 14px 16px; }
.fwd-contact-modal .fwd-contact-fields input { margin-top: 6px; }
.fwd-contact-modal .fwd-contact-message-wrap { margin-top: 6px; }
.fwd-contact-modal .fwd-contact-message-wrap textarea { height: 120px; padding-bottom: 12px; padding-right: 64px; }
.fwd-contact-modal #contact-dictation-status { margin-top: 6px; }
.fwd-contact-modal .fwd-contact-privacy { margin: 14px 0; }
.fwd-contact-modal #fwd-contact-form button[type="submit"] { min-height: 56px; }
@media (max-width: 500px) {
  /* Phones: the intro stays for screen readers (it names the dialog) but gives its space to the form. */
  .fwd-contact-modal { padding: 60px 16px 12px; }
  .fwd-contact-modal .fwd-contact-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fwd-contact-modal #fwd-contact-form { padding: 18px; }
  .fwd-contact-modal #fwd-contact-form h2 { font-size: 24px; }
  .fwd-contact-modal .fwd-contact-hint { margin: 6px 0 14px; font-size: 13px; }
  .fwd-contact-modal .fwd-contact-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; }
  .fwd-contact-modal .fwd-contact-fields label { font-size: 14px; line-height: 1.4; }
  .fwd-contact-modal .fwd-contact-fields :is(input, textarea) { min-height: 44px; padding: 10px 12px; }
  .fwd-contact-modal .fwd-contact-fields input { margin-top: 4px; }
  .fwd-contact-modal .fwd-contact-message-wrap { margin-top: 4px; }
  .fwd-contact-modal .fwd-contact-message-wrap textarea { height: 96px; padding-right: 60px; }
  .fwd-contact-modal #contact-dictation-status { margin-top: 4px; }
  .fwd-contact-modal .fwd-contact-privacy { margin: 12px 0; font-size: 12px; }
  .fwd-contact-modal #fwd-contact-form button[type="submit"] { min-height: 52px; }
  .fwd-contact-modal .fwd-contact-arrow { width: 52px; }
}
.fwd-contact h1:focus { outline: none; }
/* Thank-you view: replaces the form after a confirmed send. */
#fwd-contact-form.is-sent > :not(.fwd-contact-thanks) { display: none; }
.fwd-contact-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 8px 0; animation: fwd-thanks-rise .5s ease both; }
.fwd-contact-thanks[hidden] { display: none; }
@keyframes fwd-thanks-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fwd-contact-thanks-check { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #ff4e00; border-radius: 50%; background: rgba(255, 78, 0, .12); color: #ff4e00; font-size: 26px; }
.fwd-contact-thanks h2 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.03em; }
.fwd-contact-thanks h2:focus { outline: none; }
.fwd-contact-thanks p { max-width: 44ch; color: #cfcfcf; font-size: 17px; line-height: 1.6; }
.fwd-contact-thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.fwd-contact-thanks-actions a, .fwd-contact-thanks-actions button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 8px; font: 700 15px/1 var(--font-roboto), Arial, sans-serif; text-transform: uppercase; cursor: pointer; }
.fwd-contact-thanks-actions a { background: #ff4e00; color: #000; }
.fwd-contact-thanks-actions button { border: 1px solid #666; background: none; color: #efefef; }
@media (prefers-reduced-motion: reduce) { .fwd-contact-thanks { animation: none; } }
.fwd-contact-fields label > span { font-weight: 400; }

/* Numbered FAQ and video column, following the homepage light section. */
.fwd-home-faq { position: relative; z-index: 1; padding: 96px max(20px, 2.78vw) 128px; background: rgba(239, 239, 239, .8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); color: #111; font-family: var(--font-roboto), Arial, sans-serif; scroll-margin-top: var(--header-height); }
.fwd-home-faq-inner { max-width: 1360px; margin: auto; }
.fwd-home-faq-heading { text-align: left; padding-bottom: 38px; border-bottom: 1px solid #ccc; }
.fwd-home-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 64px; margin-top: 56px; }
.fwd-home-faq-aside { position: sticky; top: calc(var(--header-height) + 24px); }
.fwd-home-faq-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000; }
.fwd-home-faq-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.fwd-home-faq-aside h3 { margin-top: 34px; font-size: 32px; line-height: 1.15; letter-spacing: -.04em; font-weight: 500; }
.fwd-home-faq-contact { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; margin-top: 24px; padding: 14px 22px; border-radius: 8px; background: #ff4e00; color: #000; font-size: 15px; font-weight: 700; text-transform: uppercase; transition: background-color .2s; }
.fwd-home-faq-contact > span { font-size: 28px; line-height: 1; font-weight: 400; }
.fwd-home-faq-contact:hover { background: #e94700; }
.fwd-home-faq :is(a, summary, video):focus-visible { outline: 2px solid #ff4e00; outline-offset: 5px; }
@media (max-width: 900px) {
  .fwd-home-faq-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .fwd-home-faq-aside { position: static; max-width: 360px; width: 100%; justify-self: center; }
}
@media (max-width: 600px) {
  .fwd-home-faq { padding-top: 64px; padding-bottom: 80px; }
  .fwd-home-faq-heading { padding-bottom: 28px; }
  .fwd-home-faq-layout { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .fwd-home-faq *, .fwd-home-faq *::after { transition: none !important; } }

/* Shared components retain the site's typography, palette and page compositions. */
:root { --fwd-accent: #ff4e00; --fwd-radius: 8px; color-scheme: dark; }
/* The sticky header fades into the page colour so scrolled content never runs under the navigation. */
header.sticky { background: linear-gradient(var(--header-bg) 70%, transparent); }
:is(a, button, summary, select, input, textarea, label) { touch-action: manipulation; }
.fwd-skip { position: fixed; z-index: 2000; top: 12px; left: 12px; padding: 12px 18px; border-radius: var(--fwd-radius); background: var(--fwd-accent); color: #000; font: 700 15px/1.2 var(--font-roboto), sans-serif; transform: translateY(-200%); }
.fwd-skip:focus { transform: none; }
:is(.fwd-case, .fwd-process, .fwd-policy, .fwd-home-faq, .fwd-contact, .fwd-projects) :is(h1, h2, h3) { text-wrap: balance; }
/* Who we are: keep the text panel on so copy stays legible over the mark and hands. */
#approach aside > div::before { opacity: 1; }
.fwd-home-faq-all { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 24px; color: inherit; font-size: 17px; text-decoration: underline; text-decoration-color: var(--fwd-accent); text-underline-offset: 6px; }
.fwd-home-faq-all span { color: var(--fwd-accent); }
.fwd-faq { --faq-border: #555; --faq-muted: #aaa; }
.fwd-home-faq .fwd-faq { --faq-border: #ccc; --faq-muted: #555; }
.fwd-faq details { border-bottom: 1px solid var(--faq-border); }
.fwd-faq summary { display: grid; grid-template-columns: 64px minmax(0, 1fr) 20px; align-items: baseline; gap: 20px; min-height: 98px; padding: 30px 0; list-style: none; cursor: pointer; font-size: clamp(18px, 1.4vw, 22px); font-weight: 500; line-height: 1.45; letter-spacing: normal; }
.fwd-faq summary::-webkit-details-marker { display: none; }
.fwd-faq-number { color: var(--faq-muted); font-size: 16px; font-variant-numeric: tabular-nums; }
.fwd-faq-toggle { position: relative; align-self: center; width: 20px; height: 20px; }
.fwd-faq-toggle::before, .fwd-faq-toggle::after { content: ''; position: absolute; width: 18px; height: 1px; left: 1px; top: 9px; background: var(--fwd-accent); }
.fwd-faq-toggle::after { transform: rotate(90deg); transition: transform .2s; }
.fwd-faq details[open] .fwd-faq-toggle::after { transform: rotate(0); }
.fwd-faq details > p { max-width: 64ch; margin-left: 84px; padding: 0 40px 30px 0; color: var(--faq-muted); font-size: 18px; line-height: 1.6; }
.fwd-faq summary:focus-visible { outline: 2px solid var(--fwd-accent); outline-offset: 4px; }
/* Arrow tiles identify the same contact action on both light and dark surfaces. */
footer a[href="/contact"] svg { background: url('/fwd/arrow.svg') center / contain no-repeat; }
footer a[href="/contact"] svg > * { visibility: hidden; }
footer a[href="/contact"]:has(svg) { --color-primary: #000; --theme-primary: #000; }
.fwd-home-faq-contact { flex-direction: row-reverse; padding: 0; justify-content: flex-end; border: 1px solid var(--fwd-accent); border-radius: var(--fwd-radius); min-height: 56px; gap: 20px; }
.fwd-home-faq-contact > span { display: grid; place-items: center; align-self: stretch; flex: 0 0 54px; border-radius: 7px; background: #000; color: #efefef; }
.fwd-case-related a, .fwd-case-highlight, .fwd-case-facts, .fwd-case-diagram { border-radius: var(--fwd-radius); }
.fwd-case-related-visual { aspect-ratio: 4 / 3; background: #111; }
.fwd-case-related img { width: 100%; height: 100%; object-fit: contain; }
.fwd-project-visual img { object-fit: contain; }
.fwd-case-related h3, .fwd-project-heading h3 { font-weight: 500; }
.fwd-mobile-filter { display: none; }
.fwd-view-switch button { min-height: 44px; }
:is(a, button, summary, select, input, textarea):focus-visible { outline: 2px solid var(--fwd-accent); outline-offset: 4px; }
header a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--fwd-accent); text-underline-offset: 6px; }
@media (max-width: 1000px) {
  .fwd-case-related { order: initial; }
}
@media (max-width: 800px) {
  /* Touch targets: footer links, menu links and card titles reach 44px. */
  footer a.link.p-xs { display: inline-flex; align-items: center; min-height: 44px; }
  div.fixed.z-11 > a.link.cta { padding-block: 10px; }
  main a[href^="/projects/"]:not(:has(img)) { display: inline-flex; align-items: center; min-height: 44px; }
  /* The projects strip's View all button and caption sit above the hero mark. */
  #projects a[href="/projects"], #projects p:has(+ p), #projects a[href="/projects"] + p { position: relative; z-index: 2; }
  #projects a.cta[href="/projects"] { min-width: 200px; }
  .fwd-projects-intro { min-height: 300px; padding-bottom: 32px; }
  .fwd-industry-filters { display: none; }
  .fwd-mobile-filter { display: flex; align-items: center; gap: 16px; width: 100%; font-size: 14px; }
  .fwd-mobile-filter select { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid #777; border-radius: var(--fwd-radius); background: #111; color: #efefef; font: inherit; }
  #approach aside > div::before { opacity: 1; }
}
@media (max-width: 600px) {
  .fwd-faq summary { grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 12px; padding: 26px 0; font-size: 18px; }
  .fwd-faq-number { font-size: 13px; }
  .fwd-faq details > p { margin-left: 54px; padding-right: 0; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .fwd-faq-toggle::after { transition: none; }
}