@charset "UTF-8";
/*
 * Space-themed components added on top of the Webflow styles.
 * Colours come from the theme swatches (--swatch--light is the text colour
 * and --swatch--dark the background in both modes), so everything here
 * follows the light/dark switch automatically.
 */

:root {
  --tx-line: color-mix(in srgb, var(--swatch--light) 28%, transparent);
  --tx-line-soft: color-mix(in srgb, var(--swatch--light) 12%, transparent);
  --tx-dim: color-mix(in srgb, var(--swatch--light) 60%, transparent);
  --tx-mono: 'Inconsolata', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===================== Contact form: transmission console ===================== */

.form-block-2 .form,
.form-block-2 .w-form-done,
.form-block-2 .w-form-fail {
  position: relative;
  padding: 1.25rem 1.25rem 1.5rem;
  border: .5px solid var(--swatch--light);
  border-radius: 0;
  background: transparent;
}

.tx-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.25rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--swatch--brand);
  font-family: var(--_typography---font--primary-family);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--tx-dim);
}

.tx-head .tx-title { color: var(--swatch--light); font-weight: 700; }
.tx-head .tx-channel { margin-left: auto; }

.tx-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--swatch--brand);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--swatch--brand) 60%, transparent);
  animation: tx-pulse 2s ease-out infinite;
}

@keyframes tx-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--swatch--brand) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.5rem transparent; }
}

.form-block-2 .input-field_container {
  margin-bottom: 0.9rem;
  gap: 0.4rem;
}

.tx-label {
  font-family: var(--_typography---font--primary-family);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--swatch--light);
  transition: color 0.2s;
}

.tx-label span {
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--tx-dim);
}

.input-field_container:focus-within .tx-label { color: var(--swatch--brand); }

.form-block-2 .input-field_div,
.form-block-2 .ms-input,
.form-block-2 .ms-input.nice-select {
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--tx-line);
  border-radius: 0.4rem;
  background-color: color-mix(in srgb, var(--swatch--dark) 70%, transparent);
  color: var(--swatch--light);
  font-family: inherit;
  font-size: 1rem;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-block-2 .input-field_div::placeholder { color: var(--tx-dim); opacity: 1; }

.form-block-2 .input-field_div:hover,
.form-block-2 .ms-input:hover,
.form-block-2 .ms-input.nice-select:hover {
  border-color: color-mix(in srgb, var(--swatch--light) 55%, transparent);
  background-color: color-mix(in srgb, var(--swatch--dark) 70%, transparent);
  color: var(--swatch--light);
  box-shadow: none;
}

.form-block-2 .input-field_div:focus,
.form-block-2 .ms-input:focus,
.form-block-2 .ms-input.nice-select:focus {
  outline: none;
  border-color: var(--swatch--brand);
  color: var(--swatch--light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch--brand) 22%, transparent);
}

.form-block-2 textarea.input-field_div {
  min-height: 9rem;
  resize: vertical;
}

/* Select: custom chevron, readable options in both modes. */
.form-block-2 select.ms-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: var(--cursor-hand, pointer);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--swatch--light) 50%),
    linear-gradient(135deg, var(--swatch--light) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.form-block-2 select.ms-input option {
  background-color: var(--swatch--dark);
  color: var(--swatch--light);
}

.form-block-2 .checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
  color: var(--swatch--light);
}

.form-block-2 .form_checkbox {
  accent-color: var(--swatch--brand);
}

/* Sending: the button sweeps a signal across while waiting for a reply. */
.form-block-2 .form.is-transmitting .hm-button-2 {
  background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #fff 45%, transparent) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: tx-sweep 1s linear infinite;
}

@keyframes tx-sweep {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}

.form-block-2 .w-form-done,
.form-block-2 .w-form-fail {
  margin-top: 0;
  text-align: left;
  color: var(--swatch--light);
}

.form-block-2 .w-form-done { background-color: transparent; }
.form-block-2 .w-form-fail { border-color: var(--swatch--brand); }

.tx-result {
  display: block;
  font-family: var(--_typography---font--primary-family);
  line-height: 1.6;
}

.tx-result .tx-dot {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  .tx-dot,
  .form-block-2 .form.is-transmitting .hm-button-2 { animation: none; }
}

/* ===================== Get In Touch: local time at base ===================== */

.base-clock {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  padding: 0.85rem 1rem;
  border: .5px solid var(--swatch--light);
  border-radius: 0;
  background: transparent;
  max-width: 24rem;
}

.base-clock__orbit {
  flex: none;
  align-self: flex-start;
  width: 4.5rem;
  height: 4.5rem;
  overflow: visible;
}

.base-clock__ring { fill: none; stroke: var(--tx-line); stroke-width: 1; stroke-dasharray: 2 3; }
.base-clock__ring--inner { stroke-dasharray: none; stroke: var(--tx-line-soft); }
.base-clock__ticks line { stroke: var(--tx-line); stroke-width: 1.2; }
.base-clock__sun { fill: var(--swatch--brand); }
.base-clock__planet { fill: var(--swatch--light); }
.base-clock__moon { fill: var(--swatch--brand-light, #fca6aa); }
.base-clock__planet-arm, .base-clock__moon-arm { transition: transform 0.6s ease; }
.base-clock.is-night .base-clock__sun { fill: color-mix(in srgb, var(--swatch--brand) 45%, transparent); }

.base-clock__readout {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--_typography---font--primary-family);
  color: var(--swatch--light);
}

.base-clock__label,
.base-clock__meta,
.base-clock__diff {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--tx-dim);
}
.base-clock__label { font-weight: 700; color: var(--swatch--light); }

.base-clock__time {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.base-clock__sec { font-size: 1.1rem; font-weight: 400; color: var(--tx-dim); }
.base-clock__diff { text-transform: none; letter-spacing: 0.02em; }

/* ===================== Personnel File: illustrations and dossier ===================== */

.pf-figure {
  margin: 0;
  width: 100%;
  color: var(--swatch--light);
}

.pf-illo { display: block; width: 100%; height: auto; overflow: visible; }
.pf-illo .pf-dim { stroke: var(--tx-line); }
.pf-illo .pf-faint { stroke: var(--tx-line-soft); }
.pf-illo .pf-accent { stroke: var(--swatch--brand); }
.pf-illo .pf-fill { fill: currentColor; stroke: none; }
.pf-illo .pf-fill-accent { fill: var(--swatch--brand); stroke: none; }
.pf-illo text { fill: currentColor; stroke: none; font-family: var(--tx-mono); }
.pf-illo .pf-label text, .pf-illo .pf-ring-text { fill: var(--tx-dim); }

.pf-caption {
  margin-top: 0.75rem;
  font-family: var(--tx-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-dim);
}

.pf-figure--patch { flex: 0 0 14rem; max-width: 14rem; margin: 0; text-align: center; }
/* Caption hangs below, so the patch itself centres on the list. */
.pf-cred-row .pf-figure--patch { position: relative; }
.pf-cred-row .pf-figure--patch .pf-caption { position: absolute; top: 100%; left: 0; right: 0; }
.pf-figure--sun { max-width: 9rem; margin-inline: auto; }
.pf-sun { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .pf-figure--sun { max-width: 6rem; } }

/* Credentials list with the mission patch centred beside it. */
.pf-cred-row { display: flex; align-items: center; gap: 2.5rem; }
.pf-cred-row > ul { flex: 1 1 auto; margin-bottom: 0; }
.pf-patch .pf-ring-text { transform-origin: 120px 120px; animation: pf-spin 90s linear infinite; }
/* Mission Protocols: each phase has its icon level with its heading, joined
   by a dashed flight path. */
.pf-phases { position: relative; }
.pf-phases > .pf-phase { position: relative; padding-right: 5.5rem; }
/* Desktop: each icon is centred on its whole phase (heading + text). */
.pf-phase-icon {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 3.25rem;
  height: 3.25rem;
  transform: translateY(-50%);
  overflow: visible;
  color: var(--swatch--light);
  z-index: 1;
}
.pf-phase-icon circle.pf-dim { fill: var(--swatch--dark); }
.pf-phase-icon .pf-dim { stroke: var(--tx-line); }
.pf-phase-icon .pf-accent { stroke: var(--swatch--brand); }
.pf-phase-icon .pf-fill { fill: currentColor; stroke: none; }
/* The squiggly flight path runs from the first icon to the last, behind them
   (its ends are set by a small script on the page). */
.pf-phases::before {
  content: '';
  position: absolute;
  top: var(--pf-path-top, 2rem);
  bottom: var(--pf-path-bottom, 2rem);
  right: calc(0.5rem + 1.625rem - 14px);
  width: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='56' viewBox='0 0 28 56'%3E%3Cpath d='M14 0C30 14-2 42 14 56' fill='none' stroke='%23fa6b72' stroke-width='1.2' stroke-dasharray='3 6' stroke-linecap='round'/%3E%3C/svg%3E") center top / 28px 56px repeat-y;
  opacity: 0.85;
}

@keyframes pf-spin { to { transform: rotate(360deg); } }

.pf-icon {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 0.75rem;
  color: var(--swatch--light);
  overflow: visible;
}
.pf-icon .pf-dim { stroke: var(--tx-line); }
.pf-icon .pf-accent { stroke: var(--swatch--brand); }
.pf-icon .pf-fill-accent { fill: var(--swatch--brand); stroke: none; }
.obj-text-div { flex-direction: column; }

.pf-lede { margin: 0.5rem 0 1.5rem; max-width: 38rem; color: var(--tx-dim); }

/* Dossier card: same frame as the objective cards (thin outline in the text
   colour, no fill, site fonts); brand-pink rules between the entries. */
.pf-dossier {
  margin: 0;
  padding: 0.5rem var(--sizes--1-5rem, 1.5rem);
  border: .5px solid var(--swatch--light);
  border-radius: 0;
  background: transparent;
  font-family: var(--_typography---font--primary-family);
}
.pf-dossier > div { padding: 1rem 0; border-bottom: 1px solid var(--swatch--brand); }
.pf-dossier > div:last-child { border-bottom: 0; }
.pf-dossier dt { font-family: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; color: var(--swatch--light); }
.pf-dossier dd { margin: 0.25rem 0 0; font-family: inherit; font-weight: 300; color: var(--swatch--light); font-size: 1rem; line-height: 1.5; }

@media (max-width: 767px) {
  .obj-text-div .pf-icon { width: 2.5rem; height: 2.5rem; margin: 0 0.75rem 0 0; flex: none; }
  .obj-text-div { flex-direction: row; }
  .pf-cred-row { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .pf-figure--patch { flex: none; max-width: 11rem; margin-inline: auto; }
  .pf-phases > .pf-phase { padding-right: 3.75rem; }
  .pf-phase-icon { width: 2.5rem; height: 2.5rem; right: 0; top: -0.4rem; transform: none; }
  .pf-phases::before { display: none; }
  .pf-phases > .pf-phase:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2.4rem;
    bottom: -0.6rem;
    right: 1.25rem;
    border-left: 1px dashed var(--swatch--brand);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) { .pf-patch .pf-ring-text { animation: none; } }

/* ===================== Image carousels and full-screen viewer ===================== */

.hm-carousel { width: 100%; outline: none; }
.hm-carousel:focus-visible .hm-carousel__stage { box-shadow: 0 0 0 2px var(--swatch--brand); }

.hm-carousel__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--tx-line-soft);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--swatch--light) 4%, var(--swatch--dark));
  cursor: zoom-in;
  touch-action: pan-y;
  user-select: none;
}

.hm-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.hm-carousel__img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-carousel__nav,
.hm-carousel__expand,
.hm-viewer__nav,
.hm-viewer__close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, #e7e7e4 30%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #20201f 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #e7e7e4;
  cursor: var(--cursor-hand, pointer);
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.hm-carousel__nav svg,
.hm-carousel__expand svg,
.hm-viewer__nav svg,
.hm-viewer__close svg { width: 1.2rem; height: 1.2rem; }

.hm-carousel__nav:hover,
.hm-carousel__expand:hover,
.hm-viewer__nav:hover,
.hm-viewer__close:hover { border-color: var(--swatch--brand); background: color-mix(in srgb, #20201f 80%, transparent); }

.hm-carousel__nav:focus-visible,
.hm-carousel__expand:focus-visible,
.hm-carousel__thumb:focus-visible,
.hm-viewer button:focus-visible { outline: 2px solid var(--swatch--brand); outline-offset: 2px; }

.hm-carousel__nav { top: 50%; transform: translateY(-50%); }
.hm-carousel__nav--prev { left: 0.75rem; }
.hm-carousel__nav--next { right: 0.75rem; }
.hm-carousel__expand { top: 0.75rem; right: 0.75rem; width: 2.25rem; height: 2.25rem; }

/* Arrows fade in on hover where there is a mouse; always shown on touch. */
@media (hover: hover) {
  .hm-carousel__nav, .hm-carousel__expand { opacity: 0; }
  .hm-carousel__stage:hover .hm-carousel__nav,
  .hm-carousel__stage:hover .hm-carousel__expand,
  .hm-carousel:focus-within .hm-carousel__nav,
  .hm-carousel:focus-within .hm-carousel__expand { opacity: 1; }
}

.hm-carousel__count {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 0;
  background: color-mix(in srgb, #20201f 60%, transparent);
  color: #e7e7e4;
  font-family: var(--tx-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.hm-carousel__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.2rem 0.1rem 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
/* Same pink scrollbar as the page. */
.hm-carousel__thumbs::-webkit-scrollbar { height: 8px; }
.hm-carousel__thumbs::-webkit-scrollbar-track { background: rgb(43, 43, 43); }
.hm-carousel__thumbs::-webkit-scrollbar-thumb { background: rgb(252, 166, 170); border-radius: 10px; }

.hm-carousel__thumb {
  flex: 0 0 auto;
  width: 5.5rem;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 1px solid var(--tx-line-soft);
  border-radius: 0.4rem;
  overflow: hidden;
  background: var(--swatch--dark);
  opacity: 0.5;
  cursor: var(--cursor-hand, pointer);
  scroll-snap-align: center;
  transition: opacity 0.2s, border-color 0.2s;
}
.hm-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-carousel__thumb:hover { opacity: 0.85; }
.hm-carousel__thumb.is-active { opacity: 1; border-color: var(--swatch--brand); }

.hm-carousel.is-single .hm-carousel__nav,
.hm-carousel.is-single .hm-carousel__thumbs,
.hm-viewer.is-single .hm-viewer__nav { display: none; }

/* Full-screen viewer (always dark, like a viewing screen). */
.hm-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 4.5rem 2rem;
  background: color-mix(in srgb, #0c0c0c 94%, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hm-viewer[hidden] { display: none; }
.hm-viewer.is-open { opacity: 1; }
html.hm-viewer-open { overflow: hidden; }

.hm-viewer__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}
.hm-viewer__img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; }
.hm-viewer__bar {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  max-width: 60rem;
  color: #e7e7e4;
  font-size: 0.9rem;
}
.hm-viewer__count { flex: none; font-family: var(--tx-mono); letter-spacing: 0.12em; color: #fa6b72; }
.hm-viewer__caption { color: color-mix(in srgb, #e7e7e4 70%, transparent); }
.hm-viewer__close { top: 1rem; right: 1rem; }
.hm-viewer__nav { top: 50%; transform: translateY(-50%); }
.hm-viewer__nav--prev { left: 1rem; }
.hm-viewer__nav--next { right: 1rem; }

@media (max-width: 767px) {
  .hm-carousel__thumb { width: 4.25rem; }
  .hm-viewer { padding: 3.75rem 0.75rem 1.25rem; }
  .hm-viewer__nav { top: auto; bottom: 1rem; transform: none; }
  .hm-viewer__bar { padding: 0 3.5rem; font-size: 0.8rem; }
  .hm-viewer__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-carousel__track { transition: none; }
}

/* ===================== Page transitions: laser warp (see js/warp.js) =====================
   Headings become thin beams in their own text colour (--laser). */
html { background-color: var(--swatch--dark); }

  /* Warp layer scoped to content wrapper */
  #swup, .page_main { position:relative; overflow-x:clip; }

  #warp-overlay { position:absolute; inset:0; background-color:var(--swatch--dark); z-index:50; opacity:0; pointer-events:none; transition:opacity .5s ease; }
  body.warp-out #warp-overlay { opacity:1; transition:opacity .25s ease .8s; }

  /* Layout overrides ONLY for explicit data-warp="text" (preview-look opt-in) */
  [data-warp="text"] {
    display:block; width:fit-content; transform-origin:left center;
    border-radius:2px;
  }

  /* Warp targets — explicit opt-ins + every in-content heading (cards excluded, opt-outs respected) */
  html.warp-arm :is(#swup, .page_main) [data-warp="text"],
  html.warp-arm :is(#swup, .page_main) :is(h1,h2,h3,h4,h5,h6):not(.project-card_title):not([data-warp="off"]) {
    color:transparent;
    background-color:var(--laser,#fff);
    transform:translateX(-160%) scaleX(55) scaleY(.04);
  }
  body.warp-in :is(#swup, .page_main) [data-warp="text"],
  body.warp-in :is(#swup, .page_main) :is(h1,h2,h3,h4,h5,h6):not(.project-card_title):not([data-warp="off"]) {
    animation:warpIn .92s cubic-bezier(.16,1,.3,1) var(--delay,0s) both;
    position:relative; z-index:55;
  }
  body.warp-out :is(#swup, .page_main) [data-warp="text"],
  body.warp-out :is(#swup, .page_main) :is(h1,h2,h3,h4,h5,h6):not(.project-card_title):not([data-warp="off"]) {
    animation:warpOut .8s cubic-bezier(.5,.05,.85,.35) var(--delay,0s) both;
    position:relative; z-index:55;
  }

  /* Images opt-in */
  :is(#swup, .page_main) [data-warp="img"] { opacity:1; transition:opacity 1s ease; }
  html.warp-arm :is(#swup, .page_main) [data-warp="img"] { opacity:0; }
  body.warp-in :is(#swup, .page_main) [data-warp="img"] { animation:imgIn 1s ease both; }
  body.warp-out :is(#swup, .page_main) [data-warp="img"] { opacity:0; transition:opacity .3s ease; }

  /* GIF overlay — visible only while settled */
  .fullscreen-gif-overlay { opacity:0; pointer-events:none; transition:opacity .45s ease; }
  body.page-ready .fullscreen-gif-overlay { opacity:1; }
  body.warp-leaving .fullscreen-gif-overlay, body.warp-out .fullscreen-gif-overlay { opacity:0 !important; transition:opacity .1s ease !important; }

  @keyframes warpOut {
    0%   { color:revert; background-color:revert;       transform:translateX(0) scaleX(1) scaleY(1); }
    14%  { color:transparent; background-color:var(--laser,#fff); transform:translateX(0) scaleX(1) scaleY(1); }
    100% { color:transparent; background-color:var(--laser,#fff); transform:translateX(-160%) scaleX(55) scaleY(.04); }
  }
  @keyframes warpIn {
    0%   { color:transparent; background-color:var(--laser,#fff); transform:translateX(-160%) scaleX(55) scaleY(.04); }
    70%  { color:transparent; background-color:var(--laser,#fff); transform:translateX(0) scaleX(1) scaleY(1); }
    100% { color:revert; background-color:revert;       transform:translateX(0) scaleX(1) scaleY(1); }
  }
  @keyframes imgIn { 0%{opacity:0;} 100%{opacity:1;} }

  @media (prefers-reduced-motion: reduce) {
    #warp-overlay { display:none !important; }
    :is(#swup, .page_main) [data-warp="text"],
    :is(#swup, .page_main) :is(h1,h2,h3,h4,h5,h6):not(.project-card_title):not([data-warp="off"]) {
      color:revert !important; background-color:revert !important; transform:none !important; animation:none !important;
    }
    :is(#swup, .page_main) [data-warp="img"] { opacity:1 !important; animation:none !important; transition:none !important; }
  }

/* ===================== Observatory (art, sketches, photography) ===================== */

.page_main > .section_wrap.obs { min-height: 85vh; padding: 7.5rem 0 6rem; }
.obs__inner { width: min(72rem, 100% - 4rem); margin-inline: auto; }
.obs__head { max-width: 42rem; margin-bottom: 2.5rem; }
.obs__kicker,
.obs__plate-sub,
.obs__sub,
.obs__status {
  font-family: var(--tx-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-dim);
}
.obs__kicker { margin-bottom: 0.75rem; color: var(--swatch--brand); }
.obs__lede { margin-top: 1rem; color: var(--tx-dim); }

.obs__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.obs__filter {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--tx-line);
  border-radius: 999px;
  background: transparent;
  color: var(--swatch--light);
  font-family: var(--tx-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: var(--cursor-hand, pointer);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.obs__filter span { margin-left: 0.35rem; color: var(--tx-dim); }
.obs__filter:hover { border-color: var(--swatch--light); }
.obs__filter.is-active { border-color: var(--swatch--brand); background: color-mix(in srgb, var(--swatch--brand) 14%, transparent); }
.obs__filter:focus-visible, .obs__card:focus-visible { outline: 2px solid var(--swatch--brand); outline-offset: 3px; }

.obs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 16rem;
  column-gap: 1rem;
}
.obs__item { break-inside: avoid; margin-bottom: 1rem; }
.obs__item[hidden] { display: none; }
.obs__card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--tx-line-soft);
  border-radius: 0.6rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--swatch--light) 4%, var(--swatch--dark));
  cursor: zoom-in;
  text-align: left;
}
.obs__card img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.obs__card:hover img { transform: scale(1.03); }
.obs__meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 2rem 0.9rem 0.75rem;
  background: linear-gradient(transparent, rgba(12, 12, 12, 0.85));
  color: #e7e7e4;
  opacity: 0;
  transition: opacity 0.25s;
}
.obs__card:hover .obs__meta, .obs__card:focus-visible .obs__meta { opacity: 1; }
.obs__title { font-weight: 600; }
.obs__meta .obs__sub { color: rgba(231, 231, 228, 0.7); font-size: 0.72rem; }

.obs__empty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.obs__plate {
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--tx-line-soft);
  border-radius: 0;
  color: var(--swatch--light);
  background: color-mix(in srgb, var(--swatch--light) 3%, transparent);
}
.obs__plate-title { margin: 0.9rem 0 0.2rem; font-weight: 600; }
.obs__status { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }

@media (hover: none) { .obs__meta { opacity: 1; } }
@media (max-width: 767px) {
  .page_main > .section_wrap.obs { padding: 62px 0 4rem; }
  .obs__empty { grid-template-columns: 1fr; }
  .obs__grid { columns: 2 9rem; column-gap: 0.6rem; }
  .obs__item { margin-bottom: 0.6rem; }
}

/* Get In Touch: the planet GIF sits beside the clock (pushed to the right of
   the column on desktop). */
.base-row { display: flex; align-items: center; gap: 1.25rem; margin: 1rem 0 1.5rem; }
.base-row .base-clock { margin: 0; }
@media (max-width: 767px) {
  .base-row { width: 100%; align-self: stretch; }
  .div-block-203 > .base-row { order: -1; }
  .base-row .base-clock { flex: 1 1 auto; width: 100%; box-sizing: border-box; max-width: none; }
}
/* The planet sits to the right of the "Current Coordinates" line. */
.coords-row { display: flex; align-items: center; justify-content: flex-start; gap: 1.25rem; width: 100%; align-self: stretch; }
.coords-row > p { margin: 0; flex: 0 1 auto; text-align: left; }
.base-planet { flex: none; width: 4.5rem; height: auto; }
@media (min-width: 768px) {
  .base-planet { width: 5.5rem; }
}

/* Tablet and desktop: clock on the left, coordinates (place name on its own
   line) on the right, tops aligned. If the column is too narrow they stack. */
@media (min-width: 768px) {
  .div-block-203:has(> .coords-row) { flex-flow: row wrap; align-items: flex-start; justify-content: space-between; column-gap: 1.5rem; }
  .div-block-203 > .base-row { order: -1; margin: 0; width: auto; }
  .div-block-203 > .coords-row { width: auto; flex: 0 1 auto; align-self: flex-start; }
  .div-block-203:has(> .coords-row) > p { flex: 0 0 100%; }
  .div-block-203:has(> .coords-row) > .contact-meteor { flex: none; width: var(--mw); margin: 1.5rem auto 0; }
  .coords-place { display: block; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .subcontain_right_content-div:has(> .form-block-2) { justify-content: center; }
}
@media (min-width: 992px) {
  .div-block-203:has(> .coords-row) > .contact-meteor { margin-left: 0; }
  /* Give the left column room for the clock and coordinates side by side. */
  .hero_image-div > .subcontain_top_right-div:has(.form-block-2) { flex-basis: 340px; }
}

/* Get In Touch: the meteor sits under the intro text. */
/* Centred under the clock: --clock-w is set by base-clock.js. */
.contact-meteor { --mw: 6rem; display: block; width: var(--mw); height: auto; margin: 1.5rem auto 0; }
[style*="--clock-w"] > .contact-meteor { margin-left: calc(var(--clock-w) / 2 - var(--mw) / 2); }
@media (max-width: 767px) {
  .contact-meteor { --mw: 5.5rem; }
  [style*="--clock-w"] > .contact-meteor { margin-left: auto; margin-right: auto; }
}

/* Personnel File: the section navbar at the bottom stays above the space
   overlay GIF (z-index 45). */
.hm-section-navbar { z-index: 50; }

/* Phones/tablets: full-width fields, then the "not an alien" check on the
   right, above the send button. */
@media (max-width: 991px) {
  .form-block-2 .contact-form { display: flex; flex-direction: column; }
  .form-block-2 .contact-form > .button_div { justify-content: flex-end; margin-top: 0.25rem; }
  .form-block-2 .contact-form > .input-field_container { align-self: stretch; width: 100%; max-width: none; margin-left: 0; }
  .form-block-2 .contact-form > .w-checkbox { align-self: flex-end !important; /* beats a Webflow #id rule */ justify-content: flex-end; margin-left: 0; margin-right: 0; padding-left: 0; }
}

/* Footer "Get In Touch" button keeps its label on one line. */
.hm_footer_small-copy .hm-button .button_wrap { white-space: nowrap; }