/* ==========================================================================
   Webline v3: full-screen photographs. The homepage acts and the pieces every
   page shares: frames, shades, galleries, sheets, the hero, the close.
   ========================================================================== */

/* ============================================================ type & bits == */
.display {
  margin: 0; font-weight: 640; font-size: clamp(2.2rem, 1.1rem + 3vw, 4.25rem);
  line-height: 1; letter-spacing: -0.04em; color: var(--wl-navy); text-wrap: balance;
}
.eyebrow--teal { color: var(--wl-teal-text); }
.eyebrow--crimson { color: var(--wl-crimson-text); }
.link--teal { color: var(--wl-teal-text); text-decoration-color: rgb(0 118 111 / 0.35); }
.link--crimson { color: var(--wl-crimson-text); text-decoration-color: rgb(200 16 46 / 0.35); }
.btn--crimson { background: var(--wl-crimson-text); color: #fff; box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / 0.16); }
@media (hover: hover) and (pointer: fine) { .btn--crimson:hover { background: #A50D26; } }
.btn--lg { min-height: 56px; padding: 0 1.5em; font-size: 1.0625rem; }

/* ============================================================ photographs ==
   A frame holds one photograph at full bleed; a gallery holds a stack of them
   (motion.js reveals each in turn). --fx is the photograph's focal point, so
   a narrow screen crops toward the people, not the wall. */
.frame, .gallery { position: absolute; inset: 0; overflow: hidden; background: #d8dde5; }
.slide { position: absolute; inset: 0; overflow: hidden; }
.frame img, .slide img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--fx, 50%) 50%; transform-origin: 50% 50%;
}
.slide img { will-change: transform; }
@media (max-aspect-ratio: 3/5) { img.is-crop { object-position: 50% 50%; } }
@media (max-aspect-ratio: 4/5) { img.is-tallm { object-position: 50% 50%; } }

/* Light lifts, never dark veils: on a high-key photograph the copy sits on a
   wash of the page's own canvas colour. Shades are siblings of the copy, so
   the verification pass measures them as part of the ground. */
.shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.shade--left {
  background: linear-gradient(90deg, rgb(245 247 250 / 0.95) 0%, rgb(245 247 250 / 0.9) 30%, rgb(245 247 250 / 0.72) 44%, rgb(245 247 250 / 0) 64%);
}
@media (max-aspect-ratio: 4/5) {
  .shade--left { background: linear-gradient(180deg, rgb(245 247 250 / 0) 40%, rgb(245 247 250 / 0.9) 62%, rgb(245 247 250 / 0.96) 100%); }
}

/* ================================================================== hero == */
.hero__stage { background: #e6e2dc; }
.hero { --fa: 0.44; --fb: 0.62; }
.frame--hero img { transform: scale(calc(1.02 + var(--sc-p, 0) * 0.1)); }
html.js .frame--hero img { animation: settle 2.8s cubic-bezier(0.2, 0.7, 0.15, 1) both; }
@keyframes settle {
  from { scale: 1.14; filter: brightness(1.14) saturate(0.85); }
  to { scale: 1; filter: none; }
}
.shade--hero {
  background:
    linear-gradient(180deg, rgb(245 247 250 / 0.6) 0, rgb(245 247 250 / 0) calc(var(--wl-bar-h) + 3rem)),
    linear-gradient(90deg, rgb(245 247 250 / 0.6) 0%, rgb(245 247 250 / 0.5) 36%, rgb(245 247 250 / 0) 58%),
    radial-gradient(ellipse 58% 70% at 22% 50%, rgb(245 247 250 / 0.9), rgb(245 247 250 / 0.68) 48%, rgb(245 247 250 / 0) 82%);
  opacity: calc(1 - clamp(0, (var(--sc-p, 0) - var(--fa)) / (var(--fb) - var(--fa)), 1));
}
.hero__copy {
  position: absolute; z-index: 4;
  left: var(--sc-gutter); top: calc(var(--wl-bar-h) + clamp(2.5rem, 12vh, 8.5rem));
  width: min(38rem, 44vw);
}
.hero__title {
  margin: 0; font-weight: 640; font-size: clamp(2.6rem, 1rem + 3.9vw, 5.2rem);
  line-height: 0.98; letter-spacing: -0.045em; color: var(--wl-navy); text-wrap: balance;
}
.hero__turn { display: block; color: var(--wl-cobalt-text); }
.hero__lede {
  margin: 1.6rem 0 0; max-width: 34rem; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.22rem);
  line-height: 1.55; letter-spacing: -0.01em; color: var(--wl-lede); text-wrap: pretty;
}
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 2.2rem; }
.hero__scroll {
  position: absolute; z-index: 4; left: 50%; bottom: 1.6rem; width: 1px; height: 3.2rem; overflow: hidden;
  background: rgb(10 36 104 / 0.18);
  opacity: calc(1 - clamp(0, var(--sc-p, 0) * 6, 1));
}
.hero__scroll::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--wl-navy);
  animation: drip 2.2s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes drip { to { top: 100%; } }

/* The headline's words rise out of their own masks, once, on arrival. */
.is-rising .rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.is-rising .rw__i {
  display: inline-block; transform: translate3d(0, 108%, 0);
  transition: transform 1100ms cubic-bezier(0.16, 0.84, 0.24, 1);
  transition-delay: calc(160ms + var(--i) * 60ms);
}
.is-risen .rw__i { transform: none; }

@media (max-width: 860px) {
  .hero__copy { top: calc(var(--wl-bar-h) + 1.5rem); width: auto; right: var(--sc-gutter); }
  .hero__title { font-size: clamp(2.3rem, 1.2rem + 5.6vw, 3.4rem); }
  .hero__lede { font-size: 1rem; margin-top: 1rem; }
  .hero__ctas { margin-top: 1.4rem; }
}
/* Phones: a cover. The title on the sky or the wall above the people, the
   intro and the buttons on a lift of light at the foot of the photograph. */
@media (max-aspect-ratio: 4/5) {
  .hero__copy { top: calc(var(--wl-bar-h) + 1.25rem); bottom: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; }
  .shade--hero {
    background: linear-gradient(180deg, rgb(245 247 250 / 0.72) 0%, rgb(245 247 250 / 0.4) 24%, rgb(245 247 250 / 0) 40%,
      rgb(245 247 250 / 0) 52%, rgb(245 247 250 / 0.9) 70%, rgb(245 247 250 / 0.95) 100%);
  }
  .hero__scroll { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__title { font-size: 2.05rem; }
  .hero__lede { font-size: 0.9rem; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .frame--hero img { transform: none; animation: none !important; }
  .hero__scroll::after { animation: none; top: 30%; }
}

/* =================================================================== gap == */
/* Shipped code on the left, a security report on the right. The halves stand
   a little apart, pull wide on "where breaches live" (a thin crimson line
   burns in the gap), and close on "We own both sides" onto a cobalt seam. */
.gap {
  --open: clamp(0, calc((var(--sc-p, 0) - 0.06) / 0.2), 1);
  --close: clamp(0, calc((var(--sc-p, 0) - 0.5) / 0.3), 1);
  --gap-max: clamp(6rem, 17vw, 19rem);
  --gap: calc((0.22 + 0.78 * var(--open)) * (1 - var(--close)) * var(--gap-max));
}
.gap__stage { background: #f6f3ee; }
.gap__void {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(255 42 59 / calc(var(--open) * (1 - var(--close)) * 0.9)) calc(50% - 0.5px), rgb(255 42 59 / calc(var(--open) * (1 - var(--close)) * 0.9)) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    radial-gradient(ellipse 9% 46% at 50% 62%, rgb(255 42 59 / calc(var(--open) * (1 - var(--close)) * 0.2)), transparent),
    #f6f3ee;
}
.gap__half { position: absolute; top: 0; bottom: 0; width: 50%; margin: 0; overflow: hidden; will-change: transform; }
.gap__half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; max-width: none; }
.gap__half--l { left: 0; transform: translate3d(calc(var(--gap) * -0.5), 0, 0); }
.gap__half--r { right: 0; transform: translate3d(calc(var(--gap) * 0.5), 0, 0); }
.gap__half--l img { transform: scale(calc(1.08 - var(--close) * 0.08)); transform-origin: 100% 60%; }
.gap__half--r img { transform: scale(calc(1.08 - var(--close) * 0.08)); transform-origin: 0 60%; }
.gap__seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; translate: -50% 0; z-index: 2;
  background: linear-gradient(transparent 30%, var(--wl-cobalt) 50%, var(--wl-cobalt) 80%, transparent);
  opacity: clamp(0, calc((var(--close) - 0.85) * 6.6), 1);
  box-shadow: 0 0 18px 2px rgb(10 139 255 / 0.5);
}
.gap__wash {
  position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: calc(var(--wl-bar-h) + 20rem); pointer-events: none;
  background: linear-gradient(to bottom, rgb(245 247 250 / 0.93) 0%, rgb(245 247 250 / 0.86) 60%, rgb(245 247 250 / 0) 100%);
}
.gap__text {
  position: absolute; z-index: 5; left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--wl-bar-h) + clamp(1.25rem, 4.5vh, 3rem));
  margin: 0; font-weight: 600; font-size: clamp(1.45rem, 0.55rem + 1.55vw, 2.35rem);
  line-height: 1.12; letter-spacing: -0.03em; color: var(--wl-navy);
}
.gap__line { display: block; }
.gap__line--em { font-style: italic; font-weight: 560; color: #A50D26; margin-top: 0.1em; }
.gap__line--own { color: #0058B4; margin-top: 0.1em; }
/* Phones and tall tablets: the statement on top, the two photographs stacked
   below it, and the gap runs across the screen instead. */
@media (max-aspect-ratio: 4/5) {
  .gap { --gap-max: 14vh; }
  .gap__half { width: auto; left: 0; right: 0; }
  .gap__half--l { top: 31%; bottom: auto; height: 34.5%; transform: translate3d(0, calc(var(--gap) * -0.5), 0); }
  .gap__half--r { top: 65.5%; bottom: auto; height: 34.5%; transform: translate3d(0, calc(var(--gap) * 0.5), 0); }
  .gap__half--l img { object-position: 50% 48%; transform-origin: 50% 100%; }
  .gap__half--r img { object-position: 50% 70%; transform-origin: 50% 0; }
  .gap__void {
    background:
      linear-gradient(180deg, transparent calc(65.5% - 0.5px), rgb(255 42 59 / calc(var(--open) * (1 - var(--close)) * 0.9)) calc(65.5% - 0.5px), rgb(255 42 59 / calc(var(--open) * (1 - var(--close)) * 0.9)) calc(65.5% + 0.5px), transparent calc(65.5% + 0.5px)),
      #f6f3ee;
  }
  .gap__seam { top: 65.5%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; translate: 0 -50%;
    background: linear-gradient(90deg, transparent, var(--wl-cobalt) 20%, var(--wl-cobalt) 80%, transparent); }
  .gap__wash { height: 36%; background: linear-gradient(to bottom, rgb(245 247 250 / 0.96) 0%, rgb(245 247 250 / 0.94) 80%, rgb(245 247 250 / 0) 100%); }
  .gap__text { top: calc(var(--wl-bar-h) + 1.1rem); font-size: clamp(1.3rem, 0.95rem + 2vw, 1.8rem); line-height: 1.14; }
}

/* ================================================================== caps == */
.caps__stage { background: #0d1322; }
.caps__frame { background: #0d1322; }
.shatter { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.caps__dim { position: absolute; inset: 0; z-index: 2; background: #06102e; opacity: 0; pointer-events: none; }
.hits { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
.caps__stage.is-testing .caps__frame { cursor: crosshair; }

.sheet {
  position: absolute; z-index: 20; left: var(--sc-gutter); top: calc(var(--wl-bar-h) + clamp(1rem, 5vh, 3.5rem));
  width: min(27rem, 34vw); padding: clamp(1.25rem, 2vw, 1.75rem);
  background: rgb(255 255 255 / 0.93); border-radius: 16px;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 30px 60px -24px rgb(4 12 36 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.6);
  color: var(--wl-navy);
}
.sheet .eyebrow { margin-bottom: 0.9rem; }
.sheet__title { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.1vw, 2.3rem); font-weight: 640; line-height: 1.04; letter-spacing: -0.035em; color: var(--wl-navy); text-wrap: balance; }
.sheet__lede { margin: 0.9rem 0 0; font-size: 0.975rem; line-height: 1.55; color: var(--wl-lede); text-wrap: pretty; }
.sheet .link { display: inline-block; margin-top: 1.1rem; }
.sheet__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 1.1rem; }
.sheet__row .link { margin-top: 0; }
.sheet__note { margin: 0.9rem 0 0; font: 400 0.75rem/1.4 var(--sc-font-mono); color: var(--sc-ink-soft); letter-spacing: 0.02em; }

/* The lists follow the photographs: the line whose picture is on screen is
   lit. Nyoxa's lines also take each probe's severity as it lands, and all
   five seal in Codexa teal once the retest is on screen. */
.log { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.1rem; }
.log li {
  position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0 0.5rem 0.2rem;
  font-size: 0.95rem; line-height: 1.35; color: var(--wl-navy); border-top: 1px solid var(--sc-hairline);
  transition: color 240ms var(--sc-ease-out), padding-left 320ms var(--sc-ease-out);
}
.log li::before {
  content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--sc-hairline-strong);
  background: center / 70% no-repeat; transition: background-color 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.log li.is-on { padding-left: 0.8rem; font-weight: 560; box-shadow: inset 3px 0 0 var(--on, var(--wl-teal)); }
.log--break { --on: var(--wl-crimson); }
.log--break li.is-on::before { box-shadow: inset 0 0 0 1.5px var(--wl-crimson); }
.log--build li.is-on::before, .log--break li.is-sealed::before {
  background-color: var(--wl-teal); box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.3 5 8.6 9.6 3.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.log--break li.is-hit::before { background-color: var(--sev); box-shadow: none; }
.log--break li.is-sealed { --on: var(--wl-teal); }
.log--break li[data-sev="critical"] { --sev: #FF2A3B; --sev-text: #C8102E; --word: "Critical"; }
.log--break li[data-sev="high"] { --sev: #FB923C; --sev-text: #B4520A; --word: "High"; }
.log--break li[data-sev="medium"] { --sev: #F5A524; --sev-text: #8A5A00; --word: "Medium"; }
.log--break li[data-sev="low"] { --sev: #38BDF8; --sev-text: #0369A1; --word: "Low"; }
.log--break li::after { content: ""; margin-left: auto; font: 500 0.66rem/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.log--break li.is-hit::after { content: var(--word); color: var(--sev-text); }
.log--break li.is-sealed::after { content: "Secure"; color: var(--wl-teal-text); }
.log--break li[data-sev="secure"].is-sealed::after { content: "Retested"; }

/* Callouts beside each probe, set like a technical drawing: a leader and a word. */
.hit {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.5rem; margin-top: -0.7rem;
  font: 600 0.7rem/1 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.hit i { display: block; width: clamp(1.25rem, 3vw, 2.75rem); height: 1px; background: currentColor; opacity: 0.8; }
.hit b { font-weight: 600; padding: 0.35rem 0.5rem; background: rgb(255 255 255 / 0.95); border-radius: 4px; box-shadow: 0 6px 18px -6px rgb(4 12 36 / 0.5); }
.hit[data-sev="critical"] { color: #FF4757; } .hit[data-sev="critical"] b { color: #C8102E; }
.hit[data-sev="high"] { color: #FB923C; } .hit[data-sev="high"] b { color: #B4520A; }
.hit[data-sev="medium"] { color: #F5A524; } .hit[data-sev="medium"] b { color: #8A5A00; }
.hit[data-sev="low"] { color: #38BDF8; } .hit[data-sev="low"] b { color: #0369A1; }

/* Phones: the photograph takes the band under the bar and the sheet the rest. */
@media (max-aspect-ratio: 4/5) {
  .caps__frame { top: var(--wl-bar-h); bottom: auto; height: 42%; }
  .caps__stage { background: var(--sc-canvas); }
  .sheet { top: auto; bottom: 0.75rem; left: 0.75rem; right: 0.75rem; width: auto; padding: 0.95rem 1.05rem; border-radius: 14px; box-shadow: var(--sc-e3), 0 0 0 1px var(--sc-hairline); }
  .sheet__title { font-size: 1.35rem; }
  .sheet__lede { font-size: 0.875rem; margin-top: 0.5rem; }
  .log { margin-top: 0.6rem; }
  .log li { padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.82rem; }
  .sheet .link, .sheet__row { margin-top: 0.7rem; }
  .sheet__note { display: none; }
  .hit { font-size: 0.6rem; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 720px) {
  .caps__frame { height: 34%; }
  .sheet__lede { font-size: 0.78rem; line-height: 1.38; }
  .log li { padding-top: 0.22rem; padding-bottom: 0.22rem; font-size: 0.78rem; }
}

/* ================================================================= group == */
.group { padding-top: var(--sc-section); background: var(--sc-canvas); }
.group__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 2rem; }
.group__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.group__head .display { max-width: 16ch; }
.group__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(2rem, 4vw, 3.5rem); }
.brandpanel { position: relative; display: block; min-height: min(96svh, 60rem); overflow: hidden; text-decoration: none; color: var(--wl-navy); isolation: isolate; }
.brandpanel__photo, .brandpanel__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.brandpanel__photo img { object-fit: cover; object-position: 50% 62%; max-width: none; transition: transform 1400ms var(--sc-ease-out); }
.brandpanel__shot {
  position: absolute; z-index: 1; right: 7%; bottom: calc(clamp(10.5rem, 17vw, 13rem) + 1.5rem); width: min(60%, 26rem);
  border-radius: 10px; overflow: hidden; rotate: -2deg;
  box-shadow: 0 30px 60px -20px rgb(4 12 36 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.55);
  transition: transform 700ms var(--sc-ease-out);
}
.brandpanel--nyoxa .brandpanel__shot { rotate: 2deg; }
.brandpanel__shot img { display: block; width: 100%; height: auto; }
.brandpanel__text {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1.2rem, 3vw, 2.6rem);
  background: rgb(255 255 255 / 0.95); display: grid; gap: 0.3rem; min-height: clamp(10.5rem, 17vw, 13rem); align-content: start;
}
.brandpanel__url { font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.06em; }
.brandpanel__kind { font: 500 0.75rem/1.2 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: 0.4rem; }
.brandpanel h3 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); font-weight: 640; letter-spacing: -0.03em; }
.brandpanel__desc { font-size: 0.975rem; line-height: 1.5; color: var(--wl-lede); max-width: 40ch; }
.brandpanel--codexa .brandpanel__url { color: var(--wl-teal-text); }
.brandpanel--nyoxa .brandpanel__url { color: var(--wl-crimson-text); }
.brandpanel--codexa .brandpanel__text { box-shadow: inset 0 3px 0 var(--wl-teal); }
.brandpanel--nyoxa .brandpanel__text { box-shadow: inset 0 3px 0 var(--wl-crimson); }
@media (hover: hover) and (pointer: fine) {
  .brandpanel:hover .brandpanel__photo img { transform: scale(1.04); }
  .brandpanel:hover .brandpanel__shot { transform: translateY(-8px); }
}
@media (max-width: 760px) {
  .group__head { grid-template-columns: 1fr; }
  .group__grid { grid-template-columns: 1fr; }
  .brandpanel { min-height: 88svh; }
}

/* ================================================================== runs == */
.runs__stage { background: #e9ecf1; }
.runs__copy {
  position: absolute; z-index: 5; left: var(--sc-gutter); top: calc(var(--wl-bar-h) + clamp(1.5rem, 8vh, 5.5rem));
  width: min(32rem, 40vw);
}
.runs__lead .display { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.6rem); }
.runs__moves { position: relative; margin-top: clamp(1.6rem, 4vh, 2.6rem); min-height: 11.5rem; }
.move { position: absolute; left: 0; right: 0; top: 0; }
.move__n { font: 500 0.8rem/1 var(--sc-font-mono); letter-spacing: 0.08em; color: var(--wl-cobalt-text); }
.move h3 { margin: 0.6rem 0 0; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 640; letter-spacing: -0.03em; color: var(--wl-navy); }
.move p { margin: 0.6rem 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--wl-lede); max-width: 38ch; }
.runs__track { display: flex; gap: 8px; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.runs__track li { width: 2.6rem; height: 3px; border-radius: 2px; background: rgb(10 36 104 / 0.18); transition: background-color 300ms var(--sc-ease-out), width 400ms var(--sc-ease-out); }
.runs__track li.is-on { width: 4.2rem; background: var(--wl-cobalt); }
@media (max-aspect-ratio: 4/5) {
  .runs .gallery { top: var(--wl-bar-h); bottom: auto; height: 46%; }
  .runs .shade { display: none; }
  .runs__copy { top: auto; bottom: 1.2rem; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
  .runs__lead .display { font-size: clamp(1.6rem, 1rem + 3vw, 2.2rem); }
  .runs__moves { margin-top: 1rem; min-height: 9.5rem; }
  .move p { font-size: 0.93rem; }
}

/* ================================================================= close == */
.close { position: relative; background: var(--sc-canvas); }
.close__scene { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.close__frame img { transform: scale(calc(1.14 - var(--sc-p, 0) * 0.2)); }
.close__copy { position: relative; z-index: 4; padding-block: calc(var(--wl-bar-h) + 3rem) 4rem; }
.close__copy .display { max-width: 11ch; font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); }
.close__lede { margin: 1.3rem 0 0; max-width: 30rem; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.55; color: var(--wl-lede); }
.close__cta { margin-top: 2rem; }
.figures { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.figures__chip { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1.6rem; font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wl-lede); }
.figures__chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wl-teal); box-shadow: 0 0 0 4px rgb(0 179 170 / 0.16); }
.figures__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--sc-hairline-strong); }
.figures__row > div { padding: 1.4rem 1.5rem 0 0; }
.figures__row > div + div { padding-left: 1.5rem; border-left: 1px solid var(--sc-hairline); }
.figures__row dt { font-weight: 620; font-size: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; color: var(--wl-navy); font-variant-numeric: tabular-nums; }
.figures__row dd { margin: 0.7rem 0 0; font-size: 0.925rem; line-height: 1.45; color: var(--wl-lede); max-width: 24ch; }
@media (max-aspect-ratio: 4/5), (max-width: 860px) {
  .close__scene { min-height: auto; display: block; }
  .close__frame { position: relative; display: block; height: 72vw; min-height: 280px; }
  .close .shade { display: none; }
  .close__copy { padding-block: 2rem 1rem; }
  .figures__row { grid-template-columns: 1fr 1fr; }
  .figures__row > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .figures__row > div:nth-child(n+3) { border-top: 1px solid var(--sc-hairline); margin-top: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .close__frame img, .band__frame img { transform: none !important; } }

/* ================================================================ footer == */
.foot { border-top: 1px solid var(--sc-hairline); padding: clamp(2.5rem, 5vw, 4rem) var(--sc-gutter) 2rem; max-width: var(--sc-maxw); margin-inline: auto; }
.foot__top { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 2rem; }
.foot__brand p { margin: 1rem 0 0.8rem; max-width: 30ch; font-size: 0.95rem; line-height: 1.5; color: var(--wl-lede); }
.foot__h { margin: 0 0 0.9rem; font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.foot__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.foot__col a { color: var(--wl-navy); text-decoration: none; font-size: 0.975rem; }
.foot__col a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.foot__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--sc-hairline); font-size: 0.85rem; color: var(--sc-ink-soft); }
@media (max-width: 760px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* ============================================================== no script ==
   Without JavaScript nothing is pinned or driven, so every act reads as an
   ordinary, finished page: the first photograph of each gallery, the gap
   closed, both sheets side by side, every step written out. */
html:not(.js) [data-sc-stage] { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
html:not(.js) .gap { --open: 1; --close: 1; }
html:not(.js) .caps__stage, html:not(.js) .runs__stage { height: auto; min-height: 100svh; }
html:not(.js) .sheet--break { left: auto; right: var(--sc-gutter); }
html:not(.js) .move { position: relative; margin-bottom: 1.4rem; }
html:not(.js) .runs__moves { min-height: 0; }
html:not(.js) .runs__copy { position: relative; padding-bottom: 2rem; }
@media (max-aspect-ratio: 4/5) {
  html:not(.js) .caps__stage { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem; padding: 46svh 0 0.75rem; }
  html:not(.js) .sheet { position: relative; inset: auto; margin-inline: 0.75rem; }
  html:not(.js) .runs__stage { padding-top: 48svh; }
}
html:not(.js) .bar { background: rgb(245 247 250 / 0.94); box-shadow: 0 1px 0 var(--sc-hairline); }

/* contact details in the footer: the address, the phone and WhatsApp, the email */
.foot__nap { display: grid; gap: 0.35rem; margin: 0 0 0.2rem; font-style: normal; font-size: 0.95rem; line-height: 1.5; color: var(--wl-lede); }
.foot__nap a { color: var(--wl-navy); text-decoration: none; }
.foot__nap a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.foot__nap .link { color: var(--wl-cobalt-text); text-decoration: underline; margin-top: 0.35rem; justify-self: start; }