/* Finder: a sticky stage on the old sky. Page scroll drives the cards sideways; WebGL draws them as a ribbon. */
.agency-home .finder-hero {
  --gallery-card-width: min(84vw, 69.6svh, 880px);
  --gallery-picture-height: calc(var(--gallery-card-width) / 1.6);
  --gallery-gutter: max(16px, calc((100vw - var(--gallery-card-width)) / 2));
  --gallery-gap: 10px;
  --finder-ease: cubic-bezier(.44, 0, .56, 1);
  position: relative;
  overflow: visible;
  padding: 0;
  background: var(--home-sky);
  color: #fff3f0;
}

.agency-home .industry-scroll-shell {
  position: relative;
  width: 100%;
}

.agency-home .industry-sticky {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(100px, 14.5svh, 136px) 0 28px;
  display: flex;
  flex-direction: column;
}

.agency-home .industry-scroll-active .industry-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.agency-home .industry-scroll-active .industry-sticky::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 140px;
  background: linear-gradient(rgba(14, 18, 24, 0), var(--home-sky));
  opacity: var(--finder-exit, 0);
  pointer-events: none;
}

/* The stage wears the closing contact card (.closing in styles.css), layer for layer: the card's own gradient
   (warm taupe #66615c in the bottom right corner, graphite #24282e, deep navy black #11151c towards the top
   left) on the stage itself, its .stage-sky (the .closing .stage-sky gradient) as .hero-sky at the same .3,
   and the orbit rings in the card's ring line, #ddd2c6 at a low alpha. Both gradients are sized in percent,
   so on the full viewport they keep the proportions they have on the card. Only here: the page below keeps
   --home-sky and its own rings (home-sky.js uses the same orbit classes). The sky does not move with the
   scroll: while the stage is pinned, every layer stays put (no --drift on .lightscape). */
.agency-home .industry-sticky {
  background: radial-gradient(ellipse at 100% 100%, #66615c 0%, #24282e 35%, #11151c 74%);
}
.agency-home .industry-sticky > .hero-sky {
  opacity: .3;
  background: radial-gradient(140% 110% at 75% 0, #1d262d, #414348 45%, #846762 85%, #000);
}

.agency-home .industry-sticky > .lightscape { transform: none; }
.agency-home .industry-sticky > .lightscape::after { content: none; }
.agency-home .industry-sticky .light-orbit {
  border-color: #ddd2c633;
  background: none;
  box-shadow: 0 -8px 40px #ddd2c608;
}
.agency-home .industry-sticky .orbit-two { border-color: #ddd2c624; box-shadow: none; }
.agency-home .industry-sticky .light-plane {
  border-color: #ddd2c61a;
  background: linear-gradient(130deg, #ddd2c612, transparent 70%);
  box-shadow: inset 1px 1px 0 #ddd2c617;
}

/* Without the pinned stage (reduced motion) its lower edge meets the page below, so it always fades into
   --home-sky there; above, the sticky stage fades in the same edge only once it unsticks (--finder-exit). */
.agency-home .finder-hero:not(.industry-scroll-active) .industry-sticky::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 140px;
  background: linear-gradient(rgba(14, 18, 24, 0), var(--home-sky));
  pointer-events: none;
}

.agency-home .industry-sticky > .hero-fade {
  height: 70px;
  z-index: 0;
  background: linear-gradient(rgba(14, 18, 24, 0), var(--home-sky));
}

.agency-home .industry-webgl {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.agency-home .industry-gl .industry-webgl { display: block; }

/* Heading row: two-tone title on the left, lead text on the right. */
.agency-home .finder-top {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  transition: opacity .35s var(--finder-ease);
}

.agency-home .finder-top h1 {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.04em;
}
.agency-home .finder-top .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.agency-home .finder-top .ln > span { display: block; }
.agency-home .finder-top .ln + .ln > span { color: rgba(255, 255, 255, .65); }

.agency-home .finder-lead {
  flex: none;
  width: 340px;
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.01em;
}

/* Bottom bar: counter on the left, the contact pill on the right, each taking half of the bar. */
.agency-home .finder-bar {
  position: relative;
  z-index: 3;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 36px;
  margin-top: auto;
  padding: 0 40px;
  font-size: 14px;
  letter-spacing: -.02em;
  transition: opacity .35s var(--finder-ease);
}
.agency-home .finder-counter,
.agency-home .finder-more { flex: 1 1 0; min-width: 0; display: flex; align-items: center; margin: 0; }
.agency-home .finder-counter { gap: 12px; }
.agency-home .finder-count { flex: none; color: #fff3f0; font-variant-numeric: tabular-nums; }
.agency-home .finder-total { color: rgba(255, 255, 255, .4); }
.agency-home .finder-rule { flex: none; width: 24px; height: 1px; background: rgba(255, 255, 255, .25); }
.agency-home [data-gallery-title] { overflow: hidden; color: rgba(255, 255, 255, .8); white-space: nowrap; text-overflow: ellipsis; }
/* The closing card is not an industry: title only, no number. */
.agency-home .finder-counter.is-about .finder-count,
.agency-home .finder-counter.is-about .finder-rule { display: none; }
.agency-home .finder-counter.is-about [data-gallery-title] { display: block; }
.agency-home .finder-more { justify-content: flex-end; }
/* 36px to the eye, 44px to the finger (::before). */
.agency-home .finder-more button {
  position: relative;
  height: 36px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  letter-spacing: -.02em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: background-color .4s var(--finder-ease), color .4s var(--finder-ease);
}
.agency-home .finder-more button::before { content: ''; position: absolute; inset: -4px 0; }
@media (hover: hover) and (pointer: fine) {
  .agency-home .finder-more button:hover { background-color: rgba(255, 255, 255, .25); color: #fff3f0; }
}

/* The DOM row: visible as the flat fallback, positioned under the ribbon for focus when WebGL draws. */
.agency-home .industry-viewport {
  position: relative;
  z-index: 2;
  flex: none;
  width: 100%;
  margin: 40px 0 32px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #5d6269 transparent;
  scroll-snap-type: x proximity;
  outline-offset: -4px;
}

.agency-home .industry-scroll-active .industry-viewport {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--gallery-row-top, 40%) - 16px);
  margin: 0;
  overflow: hidden;
  scroll-snap-type: none;
}

.agency-home .industry-track {
  display: flex;
  align-items: flex-start;
  gap: var(--gallery-gap);
  width: max-content;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 16px var(--gallery-gutter);
  position: relative;
  z-index: 1;
}
.agency-home .industry-scroll-active .industry-track { will-change: transform; }
.agency-home .industry-gl .industry-track { pointer-events: none; }

.agency-home .industry-track .industry-card {
  display: block;
  position: relative;
  flex: 0 0 var(--gallery-card-width);
  width: var(--gallery-card-width);
  min-width: 0;
  grid-column: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  transition: none;
  scroll-snap-align: center;
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}

.agency-home .industry-track .industry-card:hover {
  transform: none;
  border: 0;
  background: none;
}

.agency-home .industry-track .industry-card:focus-visible {
  outline: 2px solid #fff3f0;
  outline-offset: 5px;
}
/* With WebGL the focused card shows the hover dent and the lit arrow button on the real geometry. */
.agency-home .industry-gl .industry-track .industry-card:focus-visible { outline: none; }

.agency-home .industry-track .industry-picture {
  width: 100%;
  height: var(--gallery-picture-height);
  border-radius: 16px;
  transform: none;
  box-shadow: none;
  container-type: inline-size;
}
.agency-home .industry-track .industry-picture::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  pointer-events: none;
}

.agency-home .industry-track .industry-picture img {
  transition: none;
}

.agency-home .industry-track .industry-card:hover img {
  transform: none;
}

/* Captions sit on the card like the title in the WebGL texture. */
.agency-home .industry-track .industry-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .6cqw;
  height: 50%;
  padding: 0 3.2cqw 2.6cqw;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
  pointer-events: none;
}

.agency-home .industry-track .industry-caption h2 {
  margin: 0;
  color: #fff3f0;
  font-size: max(15px, 3.2cqw);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.agency-home .industry-track .industry-caption > span {
  display: block;
  color: rgba(255, 255, 255, .65);
  font-size: max(11px, 2.1cqw);
  line-height: 1.35;
  letter-spacing: -.02em;
  text-align: left;
}

.agency-home .industry-gl .industry-picture { visibility: hidden; }
.agency-home .industry-gl .industry-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: none;
}

/* The linked DOM pictures remain available if WebGL cannot be used. */
.agency-home .industry-track .industry-smash img {
  width: 100%;
  height: 100%;
  opacity: .89;
  object-position: 50% 56%;
}

.agency-home .industry-track .industry-smash strong {
  left: 6%;
  top: 8%;
  font-size: clamp(64px, 13cqw, 155px);
  letter-spacing: -.07em;
  transform: rotate(-7deg);
}

.agency-home .industry-track .industry-werk .industry-picture {
  background-size: 38px 38px;
}

.agency-home .industry-track .industry-werk img {
  position: absolute;
  right: 5%;
  bottom: 3%;
  width: 63%;
  height: 89%;
  object-fit: contain;
}

.agency-home .industry-track .industry-werk strong {
  left: 6%;
  top: 10%;
  font-size: clamp(40px, 8cqw, 91px);
  letter-spacing: -.065em;
}

.agency-home .industry-track .industry-zest strong {
  left: 6%;
  top: 11%;
  font-size: clamp(65px, 13cqw, 155px);
  letter-spacing: -.075em;
}

.agency-home .industry-track .zest-card-word {
  right: 7%;
  bottom: 11%;
  font-size: clamp(70px, 14cqw, 170px);
  letter-spacing: -.07em;
}

/* Closing card before its canvas face arrives (and without canvas): the slate page with the WAVEN Design
   logo. The SVG brings its own clear space; it is only scaled as a whole, never stretched or cropped. */
.agency-home .industry-track .industry-about .industry-picture {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 22%;
  background: radial-gradient(60% 70% at 3% 48%, #34464d57, transparent),
    radial-gradient(55% 60% at 93% 10%, #4a4b564d, transparent), #0e1218;
}

.agency-home .industry-track .industry-about .about-logo {
  flex: none;
  width: 48cqw;
  height: auto;
  object-fit: contain;
  transform: none;
}

.agency-home .industry-track [data-gallery-preview] img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  opacity: 1;
  transform: none;
}
.agency-home .industry-track .industry-card:hover [data-gallery-preview] img { transform: none; }

/* Intro: hidden until the preloader hands over, then revealed per line. */
.industry-boot .agency-home .finder-fade,
.industry-boot .agency-home .finder-rise,
.agency-home .industry-gl:not(.is-in) .finder-fade,
.agency-home .industry-gl:not(.is-in) .finder-rise { opacity: 0; }
.industry-boot .agency-home .finder-top .ln > span,
.agency-home .industry-gl:not(.is-in) .finder-top .ln > span { transform: translateY(115%); }
.industry-boot .agency-home .industry-track { visibility: hidden; }

.agency-home .is-in .finder-top .ln > span { animation: finder-line 1.25s cubic-bezier(.16, 1, .3, 1) .75s both; }
.agency-home .is-in .finder-top .ln + .ln > span { animation-delay: .81s; }
.agency-home .is-in .finder-fade { animation: finder-fade .7s cubic-bezier(.5, 1, .89, 1) both; }
.agency-home .is-in .finder-rise { animation: finder-rise 1s cubic-bezier(.22, 1, .36, 1) .95s both; }
.agency-home .is-in .finder-counter { animation-delay: 1.3s; }
.agency-home .is-in .finder-more { animation-delay: 1.4s; }
.agency-home .is-instant .finder-top .ln > span,
.agency-home .is-instant .finder-fade,
.agency-home .is-instant .finder-rise { animation: none; opacity: 1; transform: none; }

/* Opening the last card: heading and bar fade with the scroll (--finder-hide, set by industry-gallery.js). */
.agency-home .industry-expand .finder-top,
.agency-home .industry-expand .finder-bar { opacity: calc(1 - var(--finder-hide, 0)); pointer-events: none; transition: none; }
/* After the opening the intro stands over the end of the stage, transparent, above the canvas; its text fades
   in with the last part of the opening (--intro-overlap and --intro-in from industry-gallery.js). Everything
   after it is lifted above the stage too, so the stage's plain lower part shows behind instead of covering it. */
.finder-overlap .agency-home .intro { position: relative; z-index: 1; margin-top: var(--intro-overlap, 0px); pointer-events: none; }
.finder-overlap .agency-home .intro-copy { opacity: var(--intro-in, 1); transform: translateY(calc((1 - var(--intro-in, 1)) * 24px)); }
.finder-overlap .agency-home .intro-copy p { pointer-events: auto; }
.finder-overlap .agency-home .intro ~ *,
.finder-overlap .agency-home > footer { position: relative; z-index: 1; }
/* The blurred backdrop of the light plane bleeds a bright line at the stage edge, even under the opened card. */
.agency-home .industry-expand .lightscape .light-plane { -webkit-backdrop-filter: none; backdrop-filter: none; }

.agency-home .grabbing,
.agency-home .grabbing * { cursor: grabbing !important; }


/* Detail sheet (industry-gallery.js, openSheet / closeSheet): a sheet inset over the dimmed gallery with the
   industry on the left and the example's preview and sections on the right, after the project view on
   jesperlandberg.com. It wears the closing contact card (.closing in styles.css): its gradient, its .stage-sky at
   .3 (::before) and its ring line (::after), with the site's glass pills and buttons. The dialog is transparent and full size; its dim, the panel and, while a card flies,
   the WebGL canvas live inside it. The panel enters from .98 (.is-start → .is-in) behind the flying card, whose
   target is the preview frame's box measured before that scale. The text reveals line by line (.is-revealed). */
html.sheet-open { overflow: hidden; }
.industry-sheet {
  --sheet-ease: cubic-bezier(.16, 1, .3, 1);
  --sheet-ink: #fff3f0;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--sheet-ink);
  font-family: Inter, Arial, sans-serif;
}
.industry-sheet::backdrop { background: transparent; }
.industry-sheet .sheet-dim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 9, .74);
  opacity: 0;
  transition: opacity .55s cubic-bezier(.33, 1, .68, 1);
}
.industry-sheet.is-in .sheet-dim { opacity: 1; }
.industry-sheet.is-out .sheet-dim { opacity: 0; transition-duration: .5s; }
.industry-sheet .sheet-panel {
  position: absolute;
  inset: 48px;
  overflow: hidden;
  border: 1px solid #ffffff1a;
  border-radius: 24px;
  background: radial-gradient(ellipse at 100% 100%, #66615c 0%, #24282e 35%, #11151c 74%);
  box-shadow: 0 30px 80px #0008;
  opacity: 0;
  transition: opacity .45s cubic-bezier(.33, 1, .68, 1), transform .8s var(--sheet-ease);
}
.industry-sheet.is-start .sheet-panel { transform: scale(.98); transition: none; }
.industry-sheet.is-in .sheet-panel { opacity: 1; transform: none; }
.industry-sheet.is-out .sheet-panel { opacity: 0; transform: scale(.98); transition: opacity .45s cubic-bezier(.33, 1, .68, 1) .1s, transform .6s var(--sheet-ease) .1s; }
.industry-sheet .sheet-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 110% at 75% 0, #1d262d, #414348 45%, #846762 85%, #000);
  opacity: .3;
  pointer-events: none;
}
.industry-sheet .sheet-panel::after {
  content: '';
  position: absolute;
  left: 10%;
  top: 30%;
  width: 110%;
  height: 110%;
  border: 1px solid #ddd2c633;
  border-radius: 50%;
  transform: rotate(-25deg);
  pointer-events: none;
}
.industry-sheet .sheet-scroll {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.industry-sheet .sheet-scroll::-webkit-scrollbar { width: 10px; }
.industry-sheet .sheet-scroll::-webkit-scrollbar-track { background: transparent; }
.industry-sheet .sheet-scroll::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, .22) padding-box; }
.industry-sheet .sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
  padding: 72px 72px 72px 64px;
}
.industry-sheet .sheet-text { position: sticky; top: 72px; padding-top: 4px; }
.industry-sheet .sheet-title { margin: 0 0 28px; font-size: clamp(40px, 4.6vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.industry-sheet .sheet-description { max-width: 440px; margin: 0 0 34px; color: rgba(255, 255, 255, .8); font-size: 17px; line-height: 1.55; letter-spacing: -.01em; }
.industry-sheet .sheet-ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.industry-sheet .sheet-ln > span { display: block; transform: translateY(115%); transition: transform 1.1s var(--sheet-ease) calc(var(--i, 0) * 70ms); }
.industry-sheet.is-revealed .sheet-ln > span { transform: none; }
.industry-sheet .sheet-tags,
.industry-sheet .sheet-actions { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.33, 1, .68, 1), transform .9s var(--sheet-ease); }
.industry-sheet.is-revealed .sheet-tags,
.industry-sheet.is-revealed .sheet-actions { opacity: 1; transform: none; transition-delay: calc(var(--lines, 4) * 70ms + .1s); }
.industry-sheet.is-revealed .sheet-actions { transition-delay: calc(var(--lines, 4) * 70ms + .2s); }
.industry-sheet .sheet-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding: 0; list-style: none; }
.industry-sheet .sheet-tags li { padding: 8px 14px 7px; border: 1px solid #ffffff1a; border-radius: 999px; background: #ffffff1a; color: rgba(255, 255, 255, .8); font-size: 11px; line-height: 1; letter-spacing: .07em; text-transform: uppercase; }
.industry-sheet .sheet-actions { display: flex; align-items: center; gap: 18px; }
.industry-sheet .sheet-go,
.industry-sheet .sheet-close {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .4s cubic-bezier(.44, 0, .56, 1), color .4s cubic-bezier(.44, 0, .56, 1);
}
/* ↗ as the site's primary button, × as its glass button. */
.industry-sheet .sheet-go { background: #ffffffcc; color: #000; }
@media (hover: hover) and (pointer: fine) { .industry-sheet .sheet-go:hover { background: #fff3f0; } }
.industry-sheet .sheet-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  border: 1px solid #ffffff1a;
  background: #ffffff1a;
  color: #fff;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
@media (hover: hover) and (pointer: fine) { .industry-sheet .sheet-close:hover { background: rgba(255, 255, 255, .25); } }
.industry-sheet .sheet-more { color: rgba(255, 255, 255, .8); font-size: 14px; letter-spacing: -.01em; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 2px; transition: color .3s, border-color .3s; }
@media (hover: hover) and (pointer: fine) { .industry-sheet .sheet-more:hover { color: #fff3f0; border-color: #fff3f0; } }
.industry-sheet :is(.sheet-go, .sheet-more, .sheet-close):focus-visible { outline: 2px solid #fff3f0; outline-offset: 4px; }
.industry-sheet .sheet-media { display: grid; gap: 24px; }
.industry-sheet .sheet-frame { margin: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; }
/* The landing box of the flying card: exactly 16:10 like the card, corners at the frame's inner radius. */
.industry-sheet .sheet-shot { position: relative; aspect-ratio: 16 / 10; border-radius: 9px; }
.industry-sheet .sheet-copy { position: absolute; display: block; max-width: none; }
.industry-sheet .sheet-static { display: block; width: 100%; height: 100%; border-radius: inherit; }
.industry-sheet .sheet-extra { overflow: hidden; background: #1b1f25; }
.industry-sheet .sheet-extra img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
@media (max-width: 760px) {
  .industry-sheet .sheet-panel {
    inset: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    border-radius: 18px;
  }
  .industry-sheet .sheet-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 76px 16px 40px; }
  .industry-sheet .sheet-media { order: -1; gap: 14px; }
  .industry-sheet .sheet-text { position: static; padding: 0 4px; }
  .industry-sheet .sheet-title { font-size: 40px; margin-bottom: 20px; }
  .industry-sheet .sheet-description { font-size: 15px; margin-bottom: 26px; }
  .industry-sheet .sheet-tags { margin-bottom: 28px; }
  .industry-sheet .sheet-close { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .industry-sheet .sheet-panel,
  .industry-sheet.is-out .sheet-panel { transform: none; transition: opacity .2s linear; }
  .industry-sheet .sheet-dim { transition: opacity .2s linear; }
  .industry-sheet .sheet-ln > span,
  .industry-sheet .sheet-tags,
  .industry-sheet .sheet-actions { transform: none; transition: none; }
  .industry-sheet .sheet-tags,
  .industry-sheet .sheet-actions { opacity: 1; }
}

@keyframes finder-line { from { transform: translateY(115%); } to { transform: translateY(0); } }
@keyframes finder-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes finder-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .agency-home .finder-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .agency-home .finder-lead { width: auto; max-width: 440px; font-size: 15px; }
}

@media (max-width: 700px) {
  .agency-home .industry-sticky { padding-top: 104px; padding-bottom: 20px; }
  .agency-home .finder-lead { font-size: 14px; }
  .agency-home .finder-bar { gap: 12px; padding: 0 16px; }
  .agency-home .finder-more button { padding: 0 16px; font-size: 13px; }
}

@media (max-width: 560px) {
  .agency-home .finder-rule,
  .agency-home [data-gallery-title] { display: none; }
}

@media (max-height: 700px) and (min-width: 701px) {
  .agency-home .industry-sticky { padding-top: 88px; }
  .agency-home .finder-top h1 { font-size: clamp(32px, 3.2vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .agency-home .industry-scroll-shell { height: auto !important; }
  .agency-home .industry-webgl { display: none !important; }
}

/* Phones (up to 649px, jesperlandberg.com's breakpoint): his mobile gallery. The cards stand in a vertical stack
   in the page flow, in his measures (his rem is the screen width / 39, 10px at 390): 2rem side padding, 2rem gap,
   1.5rem corners, the full width at 16:10. The page scrolls natively; with WebGL the canvas lies over the stack
   (industry-gallery.js draws each plane on its DOM card) and the DOM cards stay transparent for taps and focus.
   The contact pill moves up under the lead and the counter goes, since every card carries its title. The stack
   ends with the last industry: no "Über uns" card here, the intro section follows directly below. */
@media (max-width: 649.98px) {
  .agency-home .finder-hero { --m-rem: calc(100vw / 39); }
  /* The stage runs on below the first screen here: its gradient and sky keep the proportions of a screen (130svh)
     and settle into the stage's darkest tone below, which its bottom edge fades into the page's (--home-sky). */
  .agency-home .industry-sticky {
    min-height: 100svh;
    padding-top: calc(104px + env(safe-area-inset-top, 0px));
    padding-bottom: 0;
    background:
      linear-gradient(#11151c00 100svh, #11151c 130svh) 0 0 / 100% 130svh no-repeat,
      radial-gradient(ellipse at 100% 100%, #66615c 0%, #24282e 35%, #11151c 74%) 0 0 / 100% 130svh no-repeat,
      #11151c;
  }
  .agency-home .industry-sticky > .hero-sky {
    bottom: auto;
    height: 130svh;
    -webkit-mask-image: linear-gradient(#000 70%, transparent);
    mask-image: linear-gradient(#000 70%, transparent);
  }
  .agency-home .finder-top { order: 1; }
  .agency-home .finder-bar {
    order: 2;
    width: calc(100% - 40px);
    height: auto;
    margin: 20px auto 0;
    padding: 0;
  }
  .agency-home .finder-counter { display: none; }
  .agency-home .finder-more { flex: none; justify-content: flex-start; }
  .agency-home .industry-viewport {
    order: 3;
    position: relative;
    margin: 36px 0 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .agency-home .industry-track {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--m-rem) * 2);
    width: auto;
    padding: 0 calc(var(--m-rem) * 2) calc(var(--m-rem) * 2);
  }
  .agency-home .industry-track .industry-about { display: none; }
  .agency-home .industry-track .industry-card {
    flex: none;
    width: 100%;
    border-radius: calc(var(--m-rem) * 1.5);
    scroll-snap-align: none;
    touch-action: manipulation;
  }
  .agency-home .industry-track .industry-picture {
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--m-rem) * 1.5);
  }
  /* Flat cards (no WebGL, reduced motion): the title where his sits, 1rem in, 1.6rem, the line below it. */
  .agency-home .industry-track .industry-caption {
    gap: 2px;
    padding: 0 var(--m-rem) var(--m-rem);
    border-radius: 0 0 calc(var(--m-rem) * 1.5) calc(var(--m-rem) * 1.5);
  }
  .agency-home .industry-track .industry-caption h2 { font-size: calc(var(--m-rem) * 1.6); line-height: 1.4; letter-spacing: -.05em; }
  .agency-home .industry-track .industry-caption > span { font-size: calc(var(--m-rem) * 1.2); }
  /* WebGL: the canvas reaches a little above and below the stack, where the bulge can carry a card. */
  .agency-home .industry-mobile .industry-webgl {
    top: -12svh;
    height: calc(100% + 24svh);
  }
  .agency-home .industry-mobile.industry-gl .industry-track { pointer-events: auto; }
}