/* WITHAL / below-hero redesign. Hero styles remain in styles.css. */
/* The existing header is docked outside the clipped hero, without cloning links. */
.header-dock { position: fixed; top: 16px; left: 0; right: 0; width: min(1440px, calc(100% - 72px)); margin-inline: auto; z-index: 60; border-radius: 12px; isolation: isolate; background-color: rgba(255,255,255,0); background-clip: padding-box; transform: translate3d(0,0,0); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; transition: transform 520ms var(--ease-panel), background-color 240ms ease; }
.header-dock.is-hidden { transform: translate3d(0,calc(-100% - 24px),0); pointer-events: none; }
.header-dock.is-scrolled { background-color: #fff; }
.header-dock .site-header { width: 100%; min-height: 76px; padding: 16px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-dock .brand { flex: 0 0 114px; width: 114px; height: 44px; display: flex; align-items: center; }
.header-dock .brand img { filter: brightness(0) invert(1); transition: filter 360ms ease; }
.header-dock .main-nav { gap: 8px; }
.header-dock .main-nav a { padding: 12px 20px; color: #fff; transition: color 360ms ease; }
.header-dock .main-nav a, .header-dock .mobile-menu a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.header-dock .main-nav a::after { display: none; }
.header-dock .header-cta { flex: none; min-height: 38px; padding: 0 7px 0 16px; border: 0; font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: 0; text-transform: none; transform: none; transition: color 240ms ease, background-color 240ms ease, transform 140ms var(--ease-settle); }
.header-dock .header-cta .button__arrow { display: grid; }
.header-dock .header-cta:active { transform: scale(.98); }
.header-dock .menu-toggle, .header-dock .menu-toggle span { transition: background-color 360ms ease, transform 300ms var(--ease-panel), opacity 200ms ease; }
.header-dock.is-scrolled .brand img { filter: brightness(0); }
.header-dock.is-scrolled .main-nav a { color: var(--ink); }
.header-dock.is-scrolled .header-cta { background: var(--ink); color: var(--lime); }
.header-dock.is-scrolled .header-cta .button__arrow { background: var(--lime); color: var(--ink); }
.header-dock.is-scrolled .menu-toggle { background: var(--ink); }
.header-dock.is-scrolled .menu-toggle span { background: var(--lime); }
body.menu-open .header-dock { transform: none; }
html.nav-open { overflow: hidden; }
.nav-label { display: block; position: relative; height: 20px; overflow: hidden; }
.nav-label > span { display: block; transition: transform 450ms var(--ease-panel); }
.nav-label-copy { position: absolute; inset: 100% 0 auto; }
.header-dock a:focus-visible, .header-dock button:focus-visible { outline: 2px solid #258fd5; outline-offset: 4px; border-radius: 6px; }
@media (hover:hover) and (pointer:fine) { .header-dock a:hover .nav-label > span { transform: translateY(-100%); } }
@media (max-width:1199px) {
  .header-dock .site-header { min-height: 72px; padding-block: 16px; }
  .header-dock .brand { height: 40px; }
  .header-dock .main-nav, .header-dock .header-cta { display: none; }
  .header-dock .menu-toggle { position: relative; display: grid; place-content: center; flex: none; width: 40px; height: 40px; gap: 6px; padding: 0; border: 0; border-radius: 8px; background: var(--lime); z-index: 22; }
  .header-dock .menu-toggle span { width: 25px; height: 2px; background: var(--ink); }
  .header-dock.is-scrolled .menu-toggle { background: var(--ink); }
  .header-dock.is-scrolled .menu-toggle span { background: var(--lime); }
  .header-dock .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(8px) rotate(45deg); }
  .header-dock .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .header-dock .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-8px) rotate(-45deg); }
  .header-dock .mobile-menu { position: absolute; inset: 76px 36px auto; padding: 24px; flex-direction: column; gap: 24px; border-radius: 12px; background: #fff; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; transform-origin: top center; }
  .header-dock .mobile-menu:not([hidden]) { display: flex; }
  .header-dock .mobile-menu a { display: flex; justify-content: center; padding: 0; border: 0; text-align: center; }
  .header-dock .mobile-menu a:last-child { margin: 0; padding: 10px 16px; border-radius: 48px; background: var(--ink); color: var(--lime); }
}
@media (max-width:760px) { .header-dock { width: calc(100% - 32px); } .header-dock .site-header { padding-inline: 24px; } .header-dock .mobile-menu { left: 24px; right: 24px; } }
@media (prefers-reduced-motion:reduce) { .header-dock, .header-dock *, .nav-label > span { transition: none !important; } }
.wh-site, .wh-footer { --wh-muted: #787e80; --wh-panel: #f0f1ef; --wh-white: #fff; }
.wh-site h2, .wh-site h3, .wh-site p, .wh-footer p { margin: 0; }
.wh-site h2 { font-size: clamp(36px, 4.1vw, 62px); font-weight: 500; line-height: 1.09; letter-spacing: -.028em; text-wrap: balance; }
.wh-site h3 { font-size: clamp(23px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; }
.wh-section { width: min(1280px, calc(100% - 80px)); margin: 0 auto; padding: 56px 0; scroll-margin-top: 36px; }
.wh-about { padding-top: 48px; }
.wh-heading { text-align: center; max-width: 870px; margin: 0 auto 64px; }
.wh-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 26px !important; font-size: 11px; line-height: 1.5; font-weight: 550; letter-spacing: .13em; text-transform: uppercase; }
.wh-eyebrow::before { width: 4px; height: 4px; background: currentColor; content: ''; flex: none; }
.wh-muted { color: var(--wh-muted); }
.wh-intro { max-width: 540px; margin: 24px auto 0 !important; font-size: 17px; line-height: 1.55; color: #686e70; text-wrap: pretty; }
/* Align the circle's centre with the parent text's baseline + half its x-height. */
.wh-inline-orb { display: inline-grid; place-items: center; width: .94em; height: .94em; background: var(--lime); border-radius: 50%; font-size: .83em; vertical-align: middle; }
.wh-inline-orb svg { display: block; width: 76%; height: 76%; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wh-orb-word { white-space: nowrap; }
.wh-inline-orb--bulb { background: #38c6f6; }
.wh-inline-orb--bulb svg { width: 52%; height: 52%; fill: #fff; stroke: none; }
.wh-button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; border-radius: 50px; padding: 6px 7px 6px 24px; font-size: 14px; font-weight: 550; margin-top: 28px; transition: transform 240ms var(--ease-settle), background 240ms ease; }
.wh-button span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; transition: transform 250ms var(--ease); }
.wh-button--dark { background: var(--ink); color: #fff; }
.wh-button--dark span { background: var(--lime); color: var(--ink); }
.wh-button--lime { background: var(--lime); color: var(--ink); }
.wh-button--lime span { background: var(--ink); color: var(--lime); }
.wh-button:active { transform: scale(.98); }
.wh-small, .wh-number { font-size: 11px; line-height: 1.5; letter-spacing: .07em; }
.wh-number { display: block; color: #777d7e; text-transform: uppercase; margin-bottom: 12px; }
.wh-about-grid { display: grid; grid-template-columns: 1.04fr 1.04fr .94fr; gap: 18px; }
.wh-art-card { position: relative; min-height: 430px; overflow: hidden; border-radius: 26px; isolation: isolate; background: #1085cc; }
.wh-art-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; position: absolute; transition: transform 1.1s var(--ease); }
.wh-art-label { position: relative; display: flex; justify-content: space-between; padding: 25px; color: #fff; font-size: 11px; letter-spacing: .12em; }
.wh-art-label span:last-child { font-size: 20px; }
.wh-glass-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 24px; background: rgba(255,255,255,.93); border-radius: 18px; }
.wh-glass-caption h3 { font-size: 29px; }
.wh-glass-caption p { margin-top: 14px; color: #68757a; font-size: 12px; }
.wh-principle { display: flex; flex-direction: column; padding: 30px; background: var(--wh-panel); border-radius: 26px; }
.wh-principle .wh-eyebrow { justify-content: flex-start; margin-bottom: 24px !important; }
.wh-principle h3 { font-size: 34px; }
.wh-principle > p:last-child { color: #676c6e; font-size: 15px; line-height: 1.5; margin-top: auto; padding-top: 24px; }
.wh-disciplines { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 18px; }
.wh-disciplines span { border: 1px solid #d6dad4; border-radius: 40px; padding: 10px 15px; font-size: 13px; background: #fafbf8; }
.wh-about-stack { display: grid; grid-template-rows: 1.1fr 1fr; gap: 18px; }
.wh-lime-card, .wh-dark-card { position: relative; border-radius: 26px; padding: 26px; overflow: hidden; }
.wh-lime-card { background: var(--lime); }
.wh-lime-card h3 { margin: 17px 0; }
.wh-lime-card p, .wh-dark-card p { font-size: 13px; line-height: 1.5; max-width: 245px; }
.wh-corner-arrow { position: absolute; right: 23px; top: 16px; font-size: 26px; }
.wh-dark-card { background: #17191b; color: white; }
.wh-dark-card h3 { margin: 20px 0 15px; }
.wh-dark-card p { color: #adb0b0; }
.wh-status { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.wh-status::before { content: ''; width: 6px; height: 6px; border-radius: 100%; background: var(--lime); box-shadow: 0 0 0 4px #c8f55c18; }
.wh-services-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; gap: 12px; background: var(--wh-panel); border-radius: 30px; }
.wh-service { border-radius: 20px; background: #fff; overflow: hidden; min-width: 0; }
.wh-service-copy { text-align: center; padding: 15px 36px 35px; }
.wh-service-copy h3 { font-size: 28px; }
.wh-service-copy > p { color: #7a7f80; line-height: 1.55; font-size: 15px; max-width: 440px; margin: 16px auto 0; }
.wh-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; }
.wh-tags span { color: #777d7e; font-size: 10px; padding: 6px 9px; background: #f6f7f4; border-radius: 30px; }
.wh-demo { height: 350px; display: grid; place-items: center; position: relative; overflow: hidden; perspective: 1000px; isolation: isolate; }
.wh-demo.wh-scene { height: auto; aspect-ratio: 8 / 5; background: #fff; perspective: none; }
.wh-scene img { display: block; width: 100%; height: auto; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; animation: wh-scene-drift 12s var(--ease-scroll) infinite; transform-origin: 50% 50%; }
.wh-scene--automation img { animation-name: wh-scene-orbit; animation-duration: 14s; animation-delay: -4s; }
.wh-scene--web img { animation-delay: -7s; animation-duration: 15s; }
.wh-scene--data img { animation-delay: -3s; animation-duration: 13s; }
.wh-motion-controls { min-height: 34px; display: flex; justify-content: flex-end; padding: 14px 4px 0; }
.wh-motion-toggle { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #727972; font: inherit; font-size: 11px; cursor: pointer; padding: 5px 0 5px 8px; }
.wh-motion-toggle[hidden] { display: none; }
.wh-motion-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wh-play-icon, .wh-motion-toggle[aria-pressed='true'] .wh-pause-icon { display: none; }
.wh-motion-toggle[aria-pressed='true'] .wh-play-icon { display: block; }
@keyframes wh-scene-drift { 0%,100% { transform: translate3d(-.3%,.6%,0) scale(1) rotate(-.3deg); } 50% { transform: translate3d(.3%,-.6%,0) scale(1.025) rotate(.3deg); } }
@keyframes wh-scene-orbit { 0%,100% { transform: rotate(-.7deg) scale(1); } 50% { transform: rotate(.7deg) scale(1.02); } }
.wh-system { --wh-muted: #929c99; margin: 60px 12px; border-radius: 32px; background: #171c1b; color: #fff; position: relative; padding: 90px 6% 80px; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(240px,.8fr); column-gap: 6%; align-items: start; }
.wh-system-sticky { position: sticky; top: 80px; }
.wh-system .wh-heading { text-align: left; margin-bottom: 25px; }
.wh-system .wh-eyebrow { justify-content: flex-start; color: var(--lime); }
.wh-system h2 { font-size: clamp(34px,3.7vw,55px); }
.wh-system-map { height: 320px; position: relative; display: flex; align-items: center; justify-content: space-between; }
.wh-system-inputs, .wh-system-outputs { display: flex; flex-direction: column; justify-content: space-around; height: 100%; position: relative; z-index: 2; width: 28%; }
.wh-system-inputs > span, .wh-system-outputs > span { display: flex; align-items: center; justify-content: space-between; padding: 15px 13px; background: #222a27; border: 1px solid #3c4740; border-radius: 11px; color: #bbc3bd; font-size: 11px; transition: color 400ms ease, border-color 400ms ease, background 400ms ease; }
.wh-system-outputs > span { background: #1a201c; }
.wh-system-outputs i { font-style: normal; color: var(--lime); }
.wh-system-core { width: 90px; height: 90px; background: var(--lime); border: 5px solid #c8f55c33; background-clip: padding-box; border-radius: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #171c1b; position: relative; z-index: 2; }
.wh-system-core b { font-size: 46px; line-height: .95; letter-spacing: -.08em; }
.wh-system-core small { font-size: 7px; letter-spacing: .12em; margin-top: 6px; }
.wh-core-ring { position: absolute; inset: -16px; border: 1px solid #c8f55c20; border-radius: 36px; transition: transform 600ms var(--ease), opacity 600ms ease; }
.wh-connections { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; fill: none; stroke-width: 1.3; }
.wh-connection-base { stroke: #4f6548; }
.wh-connection-light { stroke: var(--lime); stroke-width: 2.5; stroke-dasharray: 14 1000; animation: wh-signal 5s linear infinite; }
.wh-system-map[data-stage='1'] .wh-core-ring { transform: scale(1.3); opacity: .7; }
.wh-system-map[data-stage='1'] .wh-system-inputs > span { border-color: #92b55b; color: #e4f1d8; }
.wh-system-map[data-stage='2'] .wh-system-outputs > span { background: #c8f55c; color: #1d2615; border-color: #c8f55c; }
.wh-system-map[data-stage='2'] .wh-system-outputs i { color: #1d2615; }
.wh-system-progress { display: flex; gap: 6px; margin-top: 10px; }
.wh-system-progress span { height: 3px; width: 38px; background: #39443c; border-radius: 4px; transition: background 400ms ease; }
.wh-system-progress span.is-active { background: var(--lime); }
.wh-system-steps { padding-top: 130px; }
.wh-system-steps article { min-height: 430px; padding: 100px 0 70px; opacity: .4; transition: opacity 600ms ease; }
.wh-system-steps article.is-active { opacity: 1; }
.wh-system-steps article > span { color: var(--lime); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.wh-system-steps h3 { font-size: 28px; margin: 22px 0 18px; }
.wh-system-steps p { color: #a7b2ac; font-size: 15px; line-height: 1.55; }
.wh-heading--split { display: grid; grid-template-columns: 1.4fr 1fr; text-align: left; align-items: end; gap: 60px; max-width: none; }
.wh-heading--split .wh-eyebrow, .wh-heading--left .wh-eyebrow { justify-content: flex-start; }
.wh-heading--split .wh-intro { max-width: 350px; margin: 0 0 4px auto !important; }
.wh-work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.wh-project { min-width: 0; }
.wh-project-art { height: 390px; overflow: hidden; border-radius: 25px; position: relative; isolation: isolate; transition: transform 650ms var(--ease); }
.wh-project-art--ebike { background: #c8f55c; }
.wh-project-word { position: absolute; top: 27px; left: 30px; font-size: 75px; font-weight: 800; line-height: 1; letter-spacing: -.065em; z-index: 2; }
.wh-rental-card { position: absolute; width: 208px; top: 128px; left: 8%; padding: 20px; background: #fff; border: 5px solid #e5efdb; border-radius: 20px; box-shadow: 0 12px 25px #33442425; transform: rotate(-8deg); z-index: 3; }
.wh-rental-card > span:first-child { font-size: 10px; color: #7d8379; }
.wh-rental-card b { display: block; margin-top: 20px; font-size: 31px; font-weight: 550; line-height: 1.05; letter-spacing: -.03em; }
.wh-rental-arrow { position: absolute; right: 15px; bottom: 15px; font-size: 23px; }
.wh-wheel { width: 240px; height: 240px; border: 37px solid #242c1e; box-shadow: inset 0 0 0 4px #839a64, 0 0 0 2px #586d3d; border-radius: 50%; position: absolute; }
.wh-wheel::after { content: ''; position: absolute; inset: 40%; border-radius: 50%; background: #242c1e; }
.wh-wheel--one { right: -45px; bottom: 18px; }
.wh-wheel--two { right: 29px; top: 42px; width: 175px; height: 175px; border-width: 23px; opacity: .16; }
.wh-project-art > small { position: absolute; bottom: 21px; right: 24px; font-size: 9px; z-index: 4; }
.wh-project-art--streams { background: #072738; color: white; }
.wh-project-art--streams > img { position: absolute; height: 100%; width: 100%; object-fit: cover; opacity: .6; transition: transform 900ms var(--ease); }
.wh-stream-live { position: absolute; top: 30px; left: 30px; font-size: 10px; letter-spacing: .1em; display: flex; align-items: center; gap: 8px; }
.wh-stream-live i { width: 6px; height: 6px; background: var(--lime); border-radius: 100%; }
.wh-stream-title { position: absolute; left: 30px; top: 85px; font-size: clamp(52px,6vw,80px); letter-spacing: -.04em; }
.wh-wave { position: absolute; left: 32px; right: 32px; top: 212px; height: 80px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.wh-wave i { height: 70%; width: 18px; border-radius: 20px; background: #c8f55ccf; transform: scaleY(.3); animation: wh-wave 2.8s ease-in-out infinite alternate; }
.wh-wave i:nth-child(3n) { height: 100%; animation-delay: -.9s; }
.wh-wave i:nth-child(3n + 1) { height: 50%; animation-delay: -1.8s; }
.wh-project-caption { display: flex; justify-content: space-between; align-items: flex-start; padding: 26px 3px 0; gap: 25px; }
.wh-project-caption h3 { font-size: 26px; }
.wh-project-caption p { margin-top: 12px; color: #777d7e; font-size: 14px; line-height: 1.55; max-width: 370px; }
.wh-link-arrow { display: grid; place-items: center; height: 42px; width: 42px; flex: none; border-radius: 50%; background: #edf0e8; font-size: 22px; transition: transform 250ms var(--ease), background 250ms ease; }
.wh-process-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.wh-step { padding: 30px; border-radius: 24px; background: #eff1ed; }
.wh-step--accent { background: var(--lime); }
.wh-step-number { display: block; color: #bcc3b7; font-size: 58px; font-weight: 400; letter-spacing: -.06em; margin-bottom: 38px; }
.wh-step--accent .wh-step-number { color: #74962e; }
.wh-step h3 { font-size: 27px; }
.wh-step > p { margin-top: 19px; font-size: 14px; line-height: 1.55; color: #656e60; }
.wh-step ul { list-style: none; padding: 0; margin: 30px 0 0; border-top: 1px solid #28361c20; }
.wh-step li { padding: 13px 0 0; font-size: 12px; display: flex; gap: 10px; }
.wh-step li::before { content: '✓'; }
.wh-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9%; }
.wh-heading--left { text-align: left; margin: 0; }
.wh-heading--left > p:last-child { margin-top: 24px; color: #777d7e; font-size: 14px; line-height: 1.5; max-width: 310px; }
.wh-heading--left a { color: var(--ink); border-bottom: 1px solid #a8b2a0; }
/* Keep the heading alongside the questions, bounded by the first and last row.
   Native sticky positioning follows scroll in both directions without lag. */
@media (min-width: 761px) and (min-height: 500px) and (prefers-reduced-motion: no-preference) {
  .wh-faq > .wh-heading { position: sticky; top: clamp(108px, 20vh, 180px); align-self: start; }
}
.wh-faq-list details { border-bottom: 1px solid #dce0d7; padding: 21px 0; }
.wh-faq-list details:first-child { border-top: 1px solid #dce0d7; }
.wh-faq-list summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 24px; list-style: none; font-size: 17px; font-weight: 450; }
.wh-faq-list summary::-webkit-details-marker { display: none; }
.wh-faq-list summary > span { width: 25px; height: 25px; flex: none; position: relative; border-radius: 50%; background: #edf0e8; }
.wh-faq-list summary > span::before, .wh-faq-list summary > span::after { position: absolute; content: ''; height: 1px; width: 9px; background: #343c2e; top: 12px; left: 8px; }
.wh-faq-list summary > span::after { transform: rotate(90deg); transition: transform 280ms var(--ease-settle); }
.wh-faq-list details[open]:not(.is-closing) summary > span::after { transform: rotate(0); }
.wh-faq-answer { overflow: hidden; }
.wh-faq-answer p { font-size: 14px; color: #71796c; line-height: 1.65; padding: 20px 35px 2px 0; }
.wh-contact { margin: 24px 12px 12px; min-height: 640px; position: relative; border-radius: 30px; overflow: hidden; isolation: isolate; background: #097cbd; color: white; display: grid; place-items: center; padding: 95px 30px; }
.wh-contact-sky { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(9,25,32,.18),rgba(9,25,32,.25) 52%,rgba(9,25,32,.38)),url('assets/contact-meadow.webp') center 58%/cover no-repeat; z-index: -1; }
.wh-contact-content { text-align: center; max-width: 1000px; }
.wh-contact h2 { font-size: clamp(40px,6vw,84px); }
.wh-contact h2 > span:not(.wh-word) { color: #c8f55c; }
.wh-contact-content > p:not(.wh-eyebrow) { font-size: 18px; line-height: 1.5; color: #ecf5ff; margin-top: 30px; }
.wh-contact .wh-button { margin-top: 38px; min-height: 58px; padding-left: 28px; }
.wh-contact-email { display: block; width: max-content; margin: 24px auto 0; font-size: 13px; color: #e1eff5; border-bottom: 1px solid #e1eff570; padding-bottom: 3px; }
.wh-footer { margin: 12px; border-radius: 30px; background: #171c1b; color: #f1f5ef; padding: 65px 6% 26px; }
.wh-footer-top { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 8%; padding-bottom: 55px; }
.wh-footer .footer-brand { display: block; width: 155px; filter: none; }
.wh-footer .footer-brand img { filter: brightness(0) invert(1); }
.wh-footer-brand > p { margin-top: 25px; color: #99a49b; font-size: 13px; line-height: 1.6; }
.wh-footer nav { display: flex; flex-direction: column; gap: 17px; font-size: 14px; }
.wh-footer-contact > span { font-size: 11px; color: #99a49b; }
.wh-footer-contact > a { display: block; font-size: 23px; margin-top: 17px; color: var(--lime); }
.wh-footer-contact p { margin-top: 22px; font-size: 12px; color: #99a49b; line-height: 1.6; }
.wh-footer-bottom { padding-top: 23px; border-top: 1px solid #394039; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 10px; color: #a1aaa3; }
.wh-site a:focus-visible, .wh-site button:focus-visible, .wh-site summary:focus-visible, .wh-footer a:focus-visible { outline: 2px solid #258fd5; outline-offset: 6px; border-radius: 8px; }
/* Soft focus is limited to titles, subtitles and their decorative circles. */
.wh-word { display: inline-block; }
.wh-word-inner { display: inline-block; }
.wh-site.motion-ready [data-words] { isolation: isolate; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wh-site.motion-ready [data-words]:not(.is-visible) { filter: blur(10px); }
.wh-site.motion-ready [data-words].is-visible { filter: blur(0); transition: filter 700ms var(--ease-scroll); }
.wh-site.motion-ready [data-words]:not(.is-visible) :is(.wh-word-inner, .wh-inline-orb) { opacity: 0; transform: translateY(10px); }
.wh-site.motion-ready [data-words].is-visible :is(.wh-word-inner, .wh-inline-orb) { animation: wh-word-in 700ms var(--ease-scroll) both; animation-delay: var(--word-delay,0ms); }
.wh-site.motion-ready [data-words].wh-words-with-parent .wh-word-inner { transform: none; }
.wh-site.motion-ready [data-words].wh-words-with-parent.is-visible .wh-word-inner { animation-name: wh-word-focus; }
.wh-site.motion-ready [data-enter] { opacity: 0; transform: translateY(16px); }
.wh-site.motion-ready [data-enter].is-visible { opacity: 1; transform: none; transition: opacity 700ms var(--ease-scroll), transform 700ms var(--ease-scroll); transition-delay: var(--enter-delay,0ms); }
.wh-site.motion-ready :is(.wh-heading, .wh-testimonials-header, .wh-contact-content) > p[data-enter] { filter: blur(10px); }
.wh-site.motion-ready :is(.wh-heading, .wh-testimonials-header, .wh-contact-content) > p[data-enter].is-visible { filter: blur(0); transition: opacity 700ms var(--ease-scroll), transform 700ms var(--ease-scroll), filter 700ms var(--ease-scroll); transition-delay: var(--enter-delay,0ms); }
.wh-demo:not(.is-running) *, .wh-project-art:not(.is-running) *, .wh-system-map:not(.is-running) * { animation-play-state: paused !important; }
@keyframes wh-word-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wh-word-focus { from { opacity: 0; } to { opacity: 1; } }
@keyframes wh-signal { from { stroke-dashoffset: 1014; } to { stroke-dashoffset: 0; } }
@keyframes wh-wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (hover:hover) and (pointer:fine) {
  .wh-button:hover span { transform: rotate(45deg); }
  .wh-art-card:hover > img { transform: scale(1.04); }
  .wh-project:hover .wh-link-arrow { transform: rotate(45deg); background: var(--lime); }
  .wh-project:hover .wh-project-art--streams > img { transform: scale(1.06); }
  .wh-footer a:hover { color: var(--lime); }
}
@media (max-width:1050px) {
  .wh-section { width: calc(100% - 48px); padding-block: 48px; }
  .wh-about-grid { grid-template-columns: 1fr 1fr; }
  .wh-about-stack { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .wh-art-card { min-height: 420px; }
  .wh-demo { height: 320px; }
  .wh-system { grid-template-columns: minmax(0,1.3fr) minmax(220px,.8fr); gap: 5%; padding: 70px 4%; }
  .wh-system-core { width: 66px; height: 66px; border-radius: 20px; }
  .wh-system-core b { font-size: 32px; }
  .wh-system-inputs > span, .wh-system-outputs > span { font-size: 9px; padding-inline: 8px; }
  .wh-step { padding: 25px; }
  .wh-step h3 { font-size: 23px; }
}
@media (max-width:760px) {
  .wh-section { width: calc(100% - 36px); padding-block: 36px; }
  .wh-site h2 { font-size: clamp(31px,7.9vw,48px); line-height: 1.13; letter-spacing: -.025em; }
  .wh-heading { margin-bottom: 35px; }
  .wh-eyebrow { font-size: 9px; margin-bottom: 20px !important; }
  .wh-intro { margin-top: 20px !important; font-size: 15px; padding-inline: 5px; }
  .wh-about-grid { gap: 12px; }
  .wh-art-card { min-height: 460px; grid-column: 1 / -1; }
  .wh-principle { grid-column: 1 / -1; padding: 27px; }
  .wh-principle h3 { font-size: 32px; }
  .wh-disciplines { margin-block: 24px 4px; }
  .wh-principle > p:last-child { padding-top: 18px; }
  .wh-about-stack { gap: 12px; grid-template-columns: 1fr; }
  .wh-lime-card, .wh-dark-card { padding: 21px; border-radius: 20px; }
  .wh-about-stack h3 { font-size: 24px; }
  .wh-about-stack p { font-size: 12px; }
  .wh-small { font-size: 9px; }
  .wh-corner-arrow { display: none; }
  .wh-status { font-size: 9px; }
  .wh-services-grid { grid-template-columns: minmax(0,1fr); padding: 8px; gap: 8px; border-radius: 24px; }
  .wh-demo { height: 315px; }
  .wh-service-copy { padding: 10px 23px 30px; }
  .wh-service-copy h3 { font-size: 26px; }
  .wh-service-copy p { font-size: 14px; }
  .wh-system { display: block; margin: 30px 10px; padding: 55px 23px 15px; border-radius: 24px; }
  .wh-system-sticky { position: relative; top: auto; }
  .wh-system .wh-heading { text-align: center; }
  .wh-system .wh-eyebrow { justify-content: center; }
  .wh-system h2 { font-size: 32px; }
  .wh-system-map { height: 265px; margin: 25px 0 0; }
  .wh-system-core { width: 65px; height: 65px; border-radius: 19px; }
  .wh-system-inputs, .wh-system-outputs { width: 30%; }
  .wh-system-inputs > span, .wh-system-outputs > span { font-size: 9px; padding: 12px 8px; }
  .wh-system-progress { display: none; }
  .wh-system-steps { padding-top: 15px; }
  .wh-system-steps article { min-height: 0; padding: 30px 0; border-top: 1px solid #ffffff1f; opacity: 1; }
  .wh-system-steps h3 { font-size: 26px; margin-block: 14px; }
  .wh-system-steps p { font-size: 14px; max-width: 380px; }
  .wh-heading--split { display: block; }
  .wh-heading--split .wh-intro { margin: 22px 0 0 !important; max-width: 440px; padding: 0; }
  .wh-work-grid { grid-template-columns: 1fr; gap: 40px; }
  .wh-project-art { height: 340px; border-radius: 22px; }
  .wh-project-word { font-size: 67px; }
  .wh-rental-card { top: 110px; width: 180px; }
  .wh-rental-card b { font-size: 27px; }
  .wh-wheel--one { right: -50px; width: 210px; height: 210px; }
  .wh-project-caption { padding-top: 20px; }
  .wh-project-caption p { font-size: 14px; }
  .wh-process-grid { grid-template-columns: 1fr; gap: 12px; }
  .wh-step { padding: 26px; }
  .wh-step-number { float: right; margin-bottom: 0; font-size: 40px; }
  .wh-step h3 { font-size: 26px; }
  .wh-step > .wh-number { padding-top: 6px; }
  .wh-step ul { margin-top: 23px; }
  .wh-faq { display: block; }
  .wh-faq .wh-heading { margin-bottom: 35px; }
  .wh-faq-list summary { font-size: 15px; gap: 20px; }
  .wh-faq-answer p { font-size: 13px; padding-right: 15px; }
  .wh-contact { margin: 16px 10px 10px; padding: 65px 22px; min-height: 540px; border-radius: 24px; }
  .wh-contact-sky { background-position: center, 62% center; }
  .wh-contact h2 { font-size: clamp(35px,9vw,59px); }
  .wh-contact-content > p:not(.wh-eyebrow) { font-size: 15px; }
  .wh-footer { margin: 10px; padding: 40px 25px 24px; border-radius: 24px; }
  .wh-footer-top { grid-template-columns: 1fr 1fr; gap: 35px 24px; padding-bottom: 35px; }
  .wh-footer .footer-brand { width: 125px; }
  .wh-footer-brand > p { font-size: 11px; }
  .wh-footer nav { font-size: 12px; align-items: flex-end; }
  .wh-footer-contact { grid-column: 1 / -1; border-top: 1px solid #394039; padding-top: 27px; }
  .wh-footer-contact > a { font-size: 25px; }
  .wh-footer-bottom { flex-wrap: wrap; font-size: 9px; }
  .wh-footer-bottom > span:nth-child(2) { order: 3; width: 100%; }
}
@media (max-width:370px) {
  .wh-about-stack { grid-template-columns: 1fr; }
  .wh-system { padding-inline: 16px; }
  .wh-system-inputs > span, .wh-system-outputs > span { font-size: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .wh-scene img { animation: none !important; transform: none !important; }
  .wh-site.motion-ready [data-enter], .wh-site.motion-ready [data-words], .wh-site.motion-ready [data-words] :is(.wh-word-inner, .wh-inline-orb) { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  .wh-system-sticky { position: relative; top: auto; }
  .wh-system-steps article { opacity: 1; }
  .wh-connection-light { animation: none; }
}