/* 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; }
}