/* ======================================================================
   SOLUTION FINDER — one field: the visitor's website in, our offer out
   1. the finder page
   2. the teaser band (home page under "Experts in", Solutions page)
   Brand palette only, Aptos, no strokes on cards, no letter-spacing.
   ====================================================================== */
.sa-fd {
  --fd-bg: #0D151F;
  --fd-panel: rgba(207, 217, 238, .06);
  --fd-panel-2: rgba(207, 217, 238, .10);
  --fd-line: rgba(207, 217, 238, .16);
  --fd-dim: rgba(255, 255, 255, .64);
  --fd-soft: rgba(255, 255, 255, .84);
  --fd-gut: var(--sa-frame-gut, 32px);
  background: var(--fd-bg);
  color: #FFFFFF;
  font-family: "Aptos", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}
body.sa-fd-page { background: #0D151F; }
.sa-fd *, .sa-fd *::before, .sa-fd *::after { box-sizing: border-box; }
html .sa-fd li, html .sa-fdt li { margin: 0; padding-left: 0; }
.sa-fd-in { width: min(var(--sa-frame, 1180px), 100% - 2 * var(--fd-gut)); margin-inline: auto; }
.sa-fd-eyebrow { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #6F8FC9; }

/* ---------------------------------------------------------------- stage */
.sa-fd-stage { min-height: 100vh; min-height: 100svh; }
.sa-fd-stage > .sa-fd-in {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(76px + clamp(32px, 6vh, 80px)) clamp(48px, 8vh, 96px);
}
/* the intro and the field sit in the centre of the stage */
.sa-fd-head { margin-inline: auto; text-align: center; }
.sa-fd-head .sa-fd-sub { margin-inline: auto; }
.sa-fd-form { margin-inline: auto; width: 100%; }
.sa-fd-form .sa-fd-label { text-align: center; }
.sa-fd-form .sa-fd-hint, .sa-fd-form .sa-fd-note { margin-left: 0; text-align: center; }
.sa-fd-form .sa-fd-status { margin-left: 0; justify-content: center; }
.sa-fd-result { width: 100%; }

.sa-fd-head { max-width: 780px; }
.sa-fd-h1 { margin: 16px 0 0; font-size: clamp(40px, 3vw + 14px, 76px); font-weight: 800; line-height: 1.04; color: #FFFFFF; text-wrap: balance; }
.sa-fd-h1 .is-accent { color: #6F8FC9; }
.sa-fd-sub { margin: 24px 0 0; max-width: 600px; font-size: 18px; font-weight: 300; line-height: 1.55; color: var(--fd-soft); }

/* ---------------------------------------------------------------- the field */
.sa-fd-form { margin-top: clamp(32px, 5vh, 48px); max-width: 720px; }
.sa-fd-label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--fd-soft); }
.sa-fd-field {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 22px; border-radius: 0;
  background: rgba(207, 217, 238, .10);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.sa-fd-field:focus-within { background: rgba(207, 217, 238, .14); box-shadow: 0 0 0 2px #6F8FC9; }
.sa-fd-field svg.sa-fd-globe { flex: none; width: 18px; height: 18px; color: #6F8FC9; }
html .sa-fd .sa-fd-input {
  flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 18px; font-weight: 300; color: #FFFFFF; box-shadow: none;
}
.sa-fd-input::placeholder { color: rgba(255, 255, 255, .45); }
.sa-fd-hint { margin: 12px 0 0 22px; font-size: 13px; color: var(--fd-dim); }
.sa-fd-note { margin: 14px 0 0 22px; font-size: 15px; line-height: 1.5; color: #FFFFFF; }
.sa-fd-note a { color: #CFD9EE; font-weight: 600; }

/* loading */
.sa-fd-status { display: grid; gap: 10px; margin: 28px 0 0 22px; padding: 0; list-style: none; }
.sa-fd-status[hidden] { display: none; }
.sa-fd-status li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .4); transition: color .3s ease; }
.sa-fd-status li i { width: 10px; height: 10px; border-radius: 50%; background: rgba(207, 217, 238, .2); transition: background-color .3s ease; }
.sa-fd-status li.is-now { color: #FFFFFF; }
.sa-fd-status li.is-now i { background: #6F8FC9; animation: sa-fd-pulse 1.1s ease-in-out infinite; }
.sa-fd-status li.is-done { color: var(--fd-soft); }
.sa-fd-status li.is-done i { background: #6F8FC9; }
@keyframes sa-fd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 143, 201, .5); } 50% { box-shadow: 0 0 0 6px rgba(111, 143, 201, 0); } }

/* ---------------------------------------------------------------- buttons */
.sa-fd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none;
  height: 48px; padding: 0 22px; border-radius: 0; border: 0;
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.sa-fd-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.sa-fd-btn:hover svg.is-fwd { transform: translateX(3px); }
.sa-fd-btn:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 3px; }
html .sa-fd-btn.is-primary { background: #FFFFFF; color: #101B37; }
html .sa-fd-btn.is-primary:hover { background: #E6ECF7; color: #101B37; }
html .sa-fd-btn.is-primary[disabled] { opacity: .5; cursor: progress; }
html .sa-fd-btn.is-ghost { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
html .sa-fd-btn.is-ghost:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }

/* ---------------------------------------------------------------- the result */
.sa-fd-result { margin-top: clamp(48px, 7vh, 80px); padding-top: clamp(32px, 4vh, 48px); border-top: 1px solid var(--fd-line); animation: sa-fd-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.sa-fd-result[hidden] { display: none; }
@keyframes sa-fd-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sa-fd-rh { margin: 10px 0 0; font-size: clamp(28px, 1.4vw + 16px, 44px); font-weight: 800; line-height: 1.12; text-wrap: balance; outline: 0; }
.sa-fd-rh .is-accent { color: #6F8FC9; }
.sa-fd-rsub { margin: 14px 0 0; max-width: 680px; font-size: 17px; line-height: 1.55; color: var(--fd-soft); }

.sa-fd-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.sa-fd-offer a {
  display: flex; flex-direction: column; height: 100%; padding: 24px 24px 22px; border-radius: 0;
  background: var(--fd-panel-2); color: #FFFFFF; text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.sa-fd-offer a:hover { background: rgba(207, 217, 238, .15); }
.sa-fd-offer a:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 3px; }
.sa-fd-offer-k { margin-bottom: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; color: #6F8FC9; }
.sa-fd-offer-n { font-size: 20px; font-weight: 600; line-height: 1.25; }
.sa-fd-offer-d { margin-top: 10px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); flex: 1; }
.sa-fd-offer-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: #CFD9EE; }
.sa-fd-offer-more svg { width: 14px; height: 14px; transition: transform .2s ease; }
.sa-fd-offer a:hover .sa-fd-offer-more svg { transform: translateX(3px); }

.sa-fd-rsec { margin-top: 48px; }
.sa-fd-rsec-h { margin: 0 0 16px; font-size: 13px; font-weight: 600; color: #6F8FC9; }
.sa-fd-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sa-fd-case a { display: block; color: inherit; text-decoration: none; }
.sa-fd-case-img { aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden; background: #E6ECF7; }
.sa-fd-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sa-fd-case a:hover .sa-fd-case-img img { transform: scale(1.03); }
.sa-fd-case-tag { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: #6F8FC9; }
.sa-fd-case-t { margin: 4px 0 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: #FFFFFF; }
.sa-fd-case a:hover .sa-fd-case-t { color: #CFD9EE; }
.sa-fd-case-c { margin: 4px 0 0; font-size: 13px; color: var(--fd-dim); }

.sa-fd-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--fd-line); }
.sa-fd-final p { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.5; color: var(--fd-soft); }
.sa-fd-final-a { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 991px) {
  .sa-fd-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 640px) {
  .sa-fd-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sa-fd-field { flex-wrap: wrap; padding: 8px; border-radius: 0; }
  .sa-fd-field svg.sa-fd-globe { margin-left: 12px; }
  .sa-fd-field .sa-fd-btn { width: 100%; }
  .sa-fd-sub { font-size: 16px; }
  .sa-fd-hint, .sa-fd-note, .sa-fd-status { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-fd-result, .sa-fd-status li.is-now i { animation: none; }
}

/* ======================================================================
   2. TEASER — one field, hands the address to /solution-finder
   ====================================================================== */
.sa-fdt {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: center;
  padding: clamp(32px, 3.4vw, 56px) clamp(24px, 3.4vw, 56px);
  color: #FFFFFF;
  font-family: "Aptos", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}
.sa-fdt-k { margin: 0; font-size: 13px; font-weight: 600; color: #CFD9EE; }
html .sa-fdt .sa-fdt-h { margin: 8px 0 0; font-size: clamp(24px, 1vw + 16px, 34px); font-weight: 800; line-height: 1.15; color: #FFFFFF; text-wrap: balance; }
.sa-fdt-p { margin: 10px 0 0; max-width: 520px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.sa-fdt-form { margin: 0; }
.sa-fdt-field { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border-radius: 0; background: rgba(13, 21, 31, .55); }
.sa-fdt-field:focus-within { box-shadow: 0 0 0 2px #6F8FC9; }
html .sa-fdt .sa-fdt-input {
  flex: 1; min-width: 0; height: 46px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: 16px; color: #FFFFFF;
}
.sa-fdt-input::placeholder { color: rgba(255, 255, 255, .5); }
html .sa-fdt .sa-fdt-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: none; height: 46px; padding: 0 20px; border: 0; border-radius: 0;
  background: #FFFFFF; color: #101B37; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease;
}
html .sa-fdt .sa-fdt-btn:hover { background: #E6ECF7; }
html .sa-fdt .sa-fdt-btn:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 3px; }
.sa-fdt-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.sa-fdt-btn:hover svg { transform: translateX(3px); }
.sa-fdt-meta { display: block; margin: 10px 0 0 20px; font-size: 13px; color: rgba(255, 255, 255, .72); }
@media (max-width: 860px) {
  .sa-fdt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .sa-fdt-field { flex-wrap: wrap; padding: 6px; border-radius: 0; }
  html .sa-fdt .sa-fdt-input { padding-left: 14px; }
  html .sa-fdt .sa-fdt-btn { width: 100%; justify-content: center; }
  .sa-fdt-meta { margin-left: 4px; }
}

/* where the teaser sits */
.sa-net .sa-fdt { margin-top: clamp(40px, 5vw, 64px); }
.sa-s2-fd { padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 112px); background: #0D151F; }
html .sa-s2-index .sa-s2-fdlink {
  grid-column: 1 / -1; justify-self: start;
  display: block; margin-top: 24px;
  font-size: 15px; line-height: 1.5; font-weight: 300; color: #CFD9EE; text-decoration: none;
}
html .sa-s2-index .sa-s2-fdlink b { font-weight: 600; color: #FFFFFF; white-space: nowrap; }
html .sa-s2-index .sa-s2-fdlink svg { display: inline-block; vertical-align: -2px; width: 14px; height: 14px; margin-left: 6px; transition: transform .2s ease; }
html .sa-s2-index .sa-s2-fdlink:hover b { color: #CFD9EE; }
html .sa-s2-index .sa-s2-fdlink:hover svg { transform: translateX(3px); }
.sa-fd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html .sa-fd .sa-fd-ex { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #CFD9EE; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html .sa-fd .sa-fd-ex:hover { color: #FFFFFF; }
html .sa-fd .sa-fd-ex:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 2px; border-radius: 2px; }

html .sa-fd .sa-fd-rh:focus, html .sa-fd .sa-fd-rh:focus-visible { outline: none; box-shadow: none; }
/* Chrome autofill paints the field light blue; keep it on the dark surface */
html .sa-fd .sa-fd-input:-webkit-autofill,
html .sa-fd .sa-fd-input:-webkit-autofill:hover,
html .sa-fd .sa-fd-input:-webkit-autofill:focus,
html .sa-fdt .sa-fdt-input:-webkit-autofill,
html .sa-fdt .sa-fdt-input:-webkit-autofill:hover,
html .sa-fdt .sa-fdt-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF; caret-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0 1000px #1E2735 inset; box-shadow: 0 0 0 1000px #1E2735 inset;
  transition: background-color 9999s ease-out 0s;
}
html .sa-fdt .sa-fdt-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #121C2E inset; box-shadow: 0 0 0 1000px #121C2E inset; }
/* text selection inside the fields stays on brand */
.sa-fd-input::selection, .sa-fdt-input::selection { background: #2F579A; color: #FFFFFF; }

/* ======================================================================
   3. THERMAL — the contact band's moving light, shared by the finder page,
   the teasers and the right half of the home hero. Long diagonal streams of
   the palette's blues drift over near-black pools on two layers with
   different clocks, so the pattern never repeats. Brightest point stays at
   #4E72B7, so white type keeps AA contrast.
   ====================================================================== */
.sa-thermal { position: relative; isolation: isolate; overflow: hidden; background-color: #0D151F; background-image: linear-gradient(180deg, #101B37 0%, #0D151F 100%); }
.sa-thermal::before, .sa-thermal::after {
  content: ""; position: absolute; left: -30%; top: -40%; width: 160%; height: 180%;
  z-index: -1; pointer-events: none; filter: blur(48px); will-change: transform;
}
.sa-thermal::before {
  background:
    radial-gradient(60% 22% at 30% 62%, rgba(78, 114, 183, 1) 0%, rgba(78, 114, 183, 0) 70%),
    radial-gradient(50% 18% at 72% 30%, rgba(111, 143, 201, .7) 0%, rgba(111, 143, 201, 0) 70%),
    radial-gradient(45% 30% at 80% 78%, rgba(13, 21, 31, 1) 0%, rgba(13, 21, 31, 0) 70%);
  animation: sa-fd-thermal-a 14s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.sa-thermal::after {
  background:
    radial-gradient(55% 20% at 60% 40%, rgba(47, 87, 154, .95) 0%, rgba(47, 87, 154, 0) 70%),
    radial-gradient(40% 26% at 18% 22%, rgba(13, 21, 31, 1) 0%, rgba(13, 21, 31, 0) 70%),
    radial-gradient(48% 16% at 50% 84%, rgba(78, 114, 183, .7) 0%, rgba(78, 114, 183, 0) 70%);
  animation: sa-fd-thermal-b 18s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes sa-fd-thermal-a {
  0%   { transform: translate3d(-22%, 16%, 0) rotate(-12deg) scale(1); }
  50%  { transform: translate3d(4%, -8%, 0) rotate(-24deg) scale(1.2); }
  100% { transform: translate3d(24%, -20%, 0) rotate(-8deg) scale(1.05); }
}
@keyframes sa-fd-thermal-b {
  0%   { transform: translate3d(20%, -14%, 0) rotate(-20deg) scale(1.15); }
  50%  { transform: translate3d(-10%, 6%, 0) rotate(-30deg) scale(.95); }
  100% { transform: translate3d(-26%, 22%, 0) rotate(-10deg) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .sa-thermal::before, .sa-thermal::after { animation: none; } }
/* on the long finder page the light stays with the first screen */
.sa-fd-stage.sa-thermal::before, .sa-fd-stage.sa-thermal::after { height: 130vh; top: -30vh; }

/* ======================================================================
   4. HOME HERO — the right half glows; the Solution Finder is its own row
   between the headline and the featured projects, which keep their list
   and scene side by side
   ====================================================================== */
.sa-xh-glow.sa-thermal {
  position: absolute; top: 0; bottom: 0; left: 50%; right: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}
html .sa-xh .sa-xhf {
  --xhf-pad: clamp(20px, 2.2vw, 36px);
  grid-column: 1 / -1; position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px 56px;
  /* the panel reaches a little past the frame, so its words line up with the headline */
  margin: clamp(28px, 4vh, 48px) calc(-1 * var(--xhf-pad)) 0;
  padding: clamp(20px, 2.6vh, 32px) var(--xhf-pad);
  background: rgba(13, 21, 31, .55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.sa-xhf-k { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #CFD9EE; }
html .sa-xh .sa-xhf-h { margin: 6px 0 0; font-size: clamp(24px, .9vw + 16px, 34px); font-weight: 800; line-height: 1.15; color: #FFFFFF; text-wrap: balance; }
.sa-xhf .sa-fdt-field { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; background: rgba(13, 21, 31, .7); }
.sa-xhf .sa-fdt-field:focus-within { box-shadow: 0 0 0 2px #6F8FC9; }
html .sa-xh .sa-xhf .sa-fdt-input {
  flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: 16px; font-weight: 300; color: #FFFFFF;
}
.sa-xhf .sa-fdt-input::placeholder { color: rgba(255, 255, 255, .5); }
html .sa-xh .sa-xhf .sa-fdt-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 0;
  background: #FFFFFF; color: #101B37; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease;
}
html .sa-xh .sa-xhf .sa-fdt-btn:hover { background: #E6ECF7; }
html .sa-xh .sa-xhf .sa-fdt-btn:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 3px; }
.sa-xhf .sa-fdt-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.sa-xhf .sa-fdt-btn:hover svg { transform: translateX(3px); }
.sa-xhf-hint { margin: 10px 0 0 20px; font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, .78); }
html .sa-xh .sa-xhf .sa-fdt-input:-webkit-autofill { -webkit-text-fill-color: #FFFFFF; -webkit-box-shadow: 0 0 0 1000px #121C2E inset; box-shadow: 0 0 0 1000px #121C2E inset; }

/* the projects keep clear air under the finder; their scene scales with
   the window width, so on a laptop it is simply a smaller copy of itself */
@media (min-width: 901px) {
  html .sa-xh .sa-xhf ~ .sa-xh-left, html .sa-xh .sa-xhf ~ .sa-xh-right { margin-top: clamp(40px, 6vh, 72px); }
  html .sa-xh .sa-xh-scenes { height: clamp(300px, 32vw, 620px); }
}
/* short laptop screens: the hero may run past the fold rather than squeeze;
   the finder becomes one tight row */
@media (min-width: 901px) and (max-height: 920px) {
  html .sa-xh .sa-xh-in { min-height: 0; padding-block: calc(76px + clamp(32px, 6vh, 56px)) clamp(48px, 7vh, 72px); }
  html .sa-xh .sa-xhf-hint { display: none; }
  html .sa-xh .sa-xh-scenes { height: clamp(280px, 28vw, 440px); }
}
@media (max-width: 900px) {
  .sa-xh-glow.sa-thermal { left: 0; opacity: .7; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%); }
  html .sa-xh .sa-xhf { grid-template-columns: minmax(0, 1fr); margin-inline: 0; margin-bottom: 8px; }
}
@media (max-width: 480px) {
  .sa-xhf .sa-fdt-field { flex-wrap: wrap; padding: 6px; }
  html .sa-xh .sa-xhf .sa-fdt-input { padding-left: 14px; }
  html .sa-xh .sa-xhf .sa-fdt-btn { width: 100%; justify-content: center; }
  .sa-xhf-hint { margin-left: 4px; }
}
.sa-fd-stage.sa-thermal .sa-fd-eyebrow { color: #CFD9EE; }
/* teaser bands sit straight on the section, no panel of their own */
.sa-fdt { background: none; padding-inline: 0; }
/* the heading sits level with the field; the hint hangs under the field */
@media (min-width: 901px) {
  html .sa-xh .sa-xhf { row-gap: 10px; }
  .sa-xhf .sa-xhf-act { display: contents; }
  .sa-xhf .sa-xhf-txt { grid-column: 1; grid-row: 1; }
  .sa-xhf .sa-fdt-field { grid-column: 2; grid-row: 1; }
  html .sa-xh .sa-xhf .sa-xhf-hint { grid-column: 2; grid-row: 2; margin-top: 0; }
  html .sa-xh .sa-xhf-h { margin-top: 0; }
}
/* on the Solutions page: a quiet way past the finder to the projects */
.sa-fd-more { display: flex; justify-content: center; margin-top: clamp(32px, 5vh, 56px); }
.sa-fd-more .sa-fd-btn svg { transition: transform .2s ease; }
.sa-fd-more .sa-fd-btn:hover svg { transform: translateY(3px); }

/* ======================================================================
   5. HERO FINDER, v3 — the finder is the headline's own action: a lead-in
   line and a search field right under the headline, left-aligned on the
   same edge, no panel. Headline + action read as one group; the projects
   follow as the next group.
   ====================================================================== */
html .sa-xh .sa-xhf {
  display: block; max-width: 680px;
  margin: clamp(24px, 3.4vh, 40px) 0 0; padding: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html .sa-xh .sa-xhf .sa-xhf-act { display: block; }
html .sa-xh .sa-xhf-h { margin: 0 0 14px; font-size: clamp(18px, .5vw + 14px, 22px); font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, .9); }
html .sa-xh .sa-xhf .sa-fdt-field { padding: 6px 6px 6px 20px; background: rgba(207, 217, 238, .09); }
html .sa-xh .sa-xhf .sa-fdt-field:focus-within { background: rgba(207, 217, 238, .13); box-shadow: 0 0 0 2px #6F8FC9; }
html .sa-xh .sa-xhf .sa-xhf-hint { display: block; margin: 10px 0 0 20px; }
@media (min-width: 901px) {
  html .sa-xh .sa-xhf ~ .sa-xh-left, html .sa-xh .sa-xhf ~ .sa-xh-right { margin-top: clamp(48px, 7vh, 88px); }
}
@media (max-width: 480px) {
  html .sa-xh .sa-xhf .sa-xhf-hint { margin-left: 4px; }
}

/* laptop screens (short windows): the whole hero — headline, finder and the
   four projects with their scene — sits on one screen; type steps down one
   size, spacing stays on the scale */
@media (min-width: 901px) and (max-height: 920px) {
  html .sa-xh .sa-xh-in { padding-block: calc(76px + clamp(20px, 3.4vh, 32px)) clamp(24px, 4vh, 40px); }
  html .sa-xh .sa-xh-h1 { font-size: min(clamp(34px, 2vw + 14px, 64px), 5.6vh); }
  html .sa-xh .sa-xhf { margin-top: clamp(20px, 3vh, 32px); }
  html .sa-xh .sa-xhf-h { margin-bottom: 10px; font-size: 18px; }
  html .sa-xh .sa-xhf .sa-fdt-field { padding: 4px 4px 4px 18px; }
  html .sa-xh .sa-xhf .sa-fdt-input, html .sa-xh .sa-xhf .sa-fdt-btn { height: 44px; }
  html .sa-xh .sa-xhf .sa-fdt-btn { font-size: 14px; padding: 0 18px; }
  html .sa-xh .sa-xhf ~ .sa-xh-left, html .sa-xh .sa-xhf ~ .sa-xh-right { margin-top: clamp(24px, 4vh, 40px); }
  html .sa-xh .sa-xh-scenes { height: clamp(260px, min(23vw, 100svh - 400px), 400px); }
  html .sa-xh .sa-xh-tt { font-size: 18px; }
  html .sa-xh .sa-xh-m { font-size: 14px; }
  html .sa-xh .sa-xh-left .sa-xh-all { margin-top: 16px; }
}

/* the glow fades out before the hero ends, so there is no hard edge where
   the next (dark) section begins */
@media (min-width: 901px) {
  .sa-xh-glow.sa-thermal {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-composite: intersect;
  }
}
@media (max-width: 900px) {
  .sa-xh-glow.sa-thermal { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); }
}

/* the hero fills the whole first screen again (its content fits now), so the
   client logos start below the fold instead of peeking into the hero */
@media (min-width: 901px) and (max-height: 920px) {
  html .sa-xh .sa-xh-in { min-height: 100vh; min-height: 100svh; }
}

/* teaser field: without its panel the field needs its own visible surface,
   the same as the hero field */
.sa-fdt .sa-fdt-field { background: rgba(207, 217, 238, .09); }
.sa-fdt .sa-fdt-field:focus-within { background: rgba(207, 217, 238, .13); }