/* ==========================================================================
   WINTEAM — COMPONENTS
   Site chrome: the window frame, navigation, buttons, forms, footer.
   ========================================================================== */

/* ------------------------------------------------------- The window frame */

/*  The conceit the whole site is built on: the viewport is a window, and the
    sashes part once to reveal what is outside. After the intro the frame
    stays as a hairline reveal around the page — chrome, not decoration.

    `--aperture` runs 0 (sealed) → 1 (open) and is written by the intro
    runtime. Everything here is a function of it, so there is exactly one
    number to keep in sync.                                                 */

.window-frame {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  --aperture: 1;
}

/* The two sashes. They only exist during the intro. */
.window-frame__sash {
  position: absolute;
  inset-block: 0;
  width: 50.2%;
  background-color: var(--wt-ink-950);
  will-change: transform;
}

.window-frame__sash--left {
  inset-inline-start: 0;
  transform: translate3d(calc(var(--aperture) * -100%), 0, 0);
}

.window-frame__sash--right {
  inset-inline-end: 0;
  transform: translate3d(calc(var(--aperture) * 100%), 0, 0);
}

/* The meeting stile: a single hairline of light where the sashes part. */
.window-frame__stile {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--wt-cyan-400) 22%,
    var(--wt-cyan-300) 50%,
    var(--wt-cyan-400) 78%,
    transparent
  );
  opacity: calc(1 - var(--aperture));
}

/* The reveal that persists: the page sits inside a frame, not against glass. */
.window-frame__reveal {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  margin: clamp(0.5rem, 1.1vw, 1rem);
  opacity: calc(var(--aperture) * 0.85);
  transition: opacity var(--duration-slow) var(--ease-editorial);
}

/* ------------------------------------------------------------ Navigation */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  /* The bar carries a `data-scheme` so its *text* adopts the colour of
     whatever it is passing over. That attribute also paints an opaque
     surface, which would put a solid slab across the top of the hero — so
     the background is cleared here and only comes back on scroll. */
  background-color: transparent;
  transition: height var(--duration-base) var(--ease-editorial),
    background-color var(--duration-base) var(--ease-editorial),
    border-color var(--duration-base) var(--ease-editorial);
  border-block-end: 1px solid transparent;
}

/* Condensed and glassed once the page has moved. */
.nav[data-scrolled="true"] {
  height: var(--nav-h-compact);
  background-color: var(--glass-bg);
  border-block-end-color: var(--glass-line);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Hidden while the intro is still running. */
.nav[data-intro="running"] {
  opacity: 0;
  pointer-events: none;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gap);
  width: 100%;
}

.nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-shrink: 0;
}

.nav__wordmark {
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
}

.nav__tagline {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  color: var(--content-subtle);
  display: none;
}

@media (min-width: 48rem) {
  .nav__tagline {
    display: inline;
  }
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2.5rem);
}

@media (min-width: 64rem) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  font-size: var(--text-body-sm);
  color: var(--content-muted);
  padding-block: 0.35rem;
  transition: color var(--duration-fast) var(--ease-swift);
}

.nav__link:hover,
.nav__link[aria-current] {
  color: var(--content);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ------------------------------------------------------ Language switcher */

.locale-switch {
  display: none;
  align-items: center;
  gap: 0.4rem;
}

@media (min-width: 48rem) {
  .locale-switch {
    display: flex;
  }
}

.locale-switch__item {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--content-subtle);
  padding: 0.25rem 0.35rem;
  transition: color var(--duration-fast) var(--ease-swift);
}

.locale-switch__item:hover {
  color: var(--content);
}

.locale-switch__item[aria-current="true"] {
  color: var(--content);
}

.locale-switch__sep {
  color: var(--line-strong);
  font-size: var(--text-eyebrow);
}

/* --------------------------------------------------------- Menu and overlay */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  background: none;
  border: 0;
  align-items: stretch;
}

.nav-toggle__bar {
  display: block;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--duration-fast) var(--ease-editorial),
    opacity var(--duration-instant) linear;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  transform: translateY(3px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  align-content: center;
  overflow-y: auto;
  padding-block: calc(var(--nav-h) + var(--space-block)) var(--space-block);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-editorial),
    visibility var(--duration-base) step-end;
}

.nav-overlay[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-editorial),
    visibility 0s;
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
}

.nav-overlay__row {
  border-block-start: 1px solid var(--line);
}

.nav-overlay__row:last-child {
  border-block-end: 1px solid var(--line);
}

/*  The padding belongs to the link, not the row. Same rhythm either way, but
    this makes the whole band tappable rather than just the glyphs — on a
    phone the link was 32px tall inside a 70px row.                         */
.nav-overlay__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--grid-gap);
  padding-block: clamp(1rem, 2.2vw, 1.75rem);
  transition: color var(--duration-fast) var(--ease-swift);
}

/* The row's children sit under the link, so they get the padding back. */
.nav-overlay__row:has(.nav-overlay__children) .nav-overlay__link {
  padding-block-end: 0.5rem;
}

.nav-overlay__row:has(.nav-overlay__children) {
  padding-block-end: clamp(1rem, 2.2vw, 1.75rem);
}

.nav-overlay__link:hover {
  color: var(--accent);
}

.nav-overlay__desc {
  font-size: var(--text-body-sm);
  color: var(--content-subtle);
  text-align: end;
  max-width: 24ch;
}

.nav-overlay__children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-block-start: 0.9rem;
}

.nav-overlay__child {
  font-size: var(--text-body-sm);
  color: var(--content-muted);
}

.nav-overlay__child:hover {
  color: var(--content);
}

.nav-overlay__foot {
  display: grid;
  gap: var(--grid-gap);
  margin-block-start: var(--space-block);
}

@media (min-width: 48rem) {
  .nav-overlay__foot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.nav-overlay__group-title {
  margin-block-end: 0.75rem;
}

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-swift),
    border-color var(--duration-fast) var(--ease-swift),
    color var(--duration-fast) var(--ease-swift),
    opacity var(--duration-fast) var(--ease-swift);
}

.btn--md { height: 2.75rem; padding-inline: 1.35rem; }
.btn--lg { height: 3.25rem; padding-inline: 1.75rem; font-size: var(--text-body); }

.btn--solid {
  background-color: var(--content);
  color: var(--content-inverse);
}

.btn--solid:hover {
  background-color: var(--accent);
  color: var(--accent-contrast);
}

.btn--outline {
  border-color: var(--line-strong);
  color: var(--content);
}

.btn--outline:hover {
  border-color: var(--content);
}

.btn--ghost {
  color: var(--content-muted);
  padding-inline: 0.75rem;
}

.btn--ghost:hover {
  color: var(--content);
}

.btn__arrow {
  width: 1em;
  height: 1em;
  transition: transform var(--duration-base) var(--ease-editorial);
}

.btn:hover .btn__arrow {
  transform: translateX(0.25em);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- Eyebrow */

/*  Section index and label, set on one baseline with a hairline between.  */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.eyebrow__index {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--content-subtle);
}

.eyebrow__rule {
  flex: 0 0 clamp(1.5rem, 4vw, 3.5rem);
  height: 1px;
  background-color: var(--line-strong);
  transform-origin: left;
}

/* -------------------------------------------------------------- Reveals */

/*  Every entrance on the site is one of two things: a block that rises and
    fades, or a line that slides out from behind a mask. Both start hidden
    and are released by the observer in site.js.

    `no-js` never gets that far, so the end state is the default and the
    hidden state is opted into by the runtime adding `data-reveal-ready`.  */

[data-reveal][data-reveal-ready] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance, 1.5rem), 0);
}

[data-reveal][data-reveal-ready][data-revealed="true"] {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease-editorial)
      var(--reveal-delay, 0s),
    transform var(--duration-slow) var(--ease-editorial) var(--reveal-delay, 0s);
}

/*  Line-level reveal. The mask is a real element so the ascenders of the
    first line are not clipped by the overflow.                            */
.reveal-lines {
  display: flex;
  flex-direction: column;
}

.reveal-lines__mask {
  overflow: hidden;
  /* Instrument Serif is set at line-height 0.88, but its glyph box measures
     about 1.29em — so roughly 0.2em of ascender and descender sits outside the
     line box on each side. The padding makes room for it and the negative
     margin gives the space back, so the block keeps its optical position. */
  padding-block: 0.26em;
  margin-block: -0.26em;
}

.reveal-lines__line {
  display: block;
  /* `balance` collapses these atomic inline masks to their shortest possible
     width — on the Next build that shrank a 135px headline to 32px. Every
     line here is already a single line; it has nothing left to balance. */
  text-wrap: normal;
}

/*  165%, not 100%: the line has to clear its own height *and* the padding the
    mask carries for ascenders, or a sliver of the headline shows before the
    reveal has run. Measured — at 110% the cap heights were still visible. */
.reveal-lines[data-reveal-ready] .reveal-lines__line {
  transform: translate3d(0, 165%, 0);
}

.reveal-lines[data-reveal-ready][data-revealed="true"] .reveal-lines__line {
  transform: none;
  transition: transform var(--duration-cinematic) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-delay, 0s) + var(--line-index, 0) * 0.07s);
}

/* ------------------------------------------------------------------ Forms */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--content-subtle);
}

.field__control {
  width: 100%;
  background-color: transparent;
  border: 0;
  border-block-end: 1px solid var(--line-strong);
  padding-block: 0.65rem;
  font-size: var(--text-body);
  transition: border-color var(--duration-fast) var(--ease-swift);
}

.field__control::placeholder {
  color: var(--content-subtle);
}

.field__control:hover {
  border-block-end-color: var(--content-muted);
}

.field__control:focus {
  outline: none;
  border-block-end-color: var(--accent);
}

.field__control:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

textarea.field__control {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.6;
}

select.field__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.7rem center, right 0.35rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-inline-end: 1.5rem;
}

.field[data-invalid="true"] .field__control {
  border-block-end-color: var(--wt-critical);
}

.field__error {
  font-size: var(--text-caption);
  color: var(--wt-critical);
}

/*  The honeypot. Off the tab order, hidden from assistive technology, and
    positioned rather than `display: none` — some bots skip what is not
    rendered at all.                                                       */
.honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}

.form-status--sent {
  border-color: color-mix(in oklab, var(--wt-positive) 60%, transparent);
  color: var(--content);
}

.form-status--failed,
.form-status--invalid,
.form-status--unconfigured {
  border-color: color-mix(in oklab, var(--wt-critical) 60%, transparent);
}

/* ----------------------------------------------------------------- Footer */

.footer {
  padding-block: var(--space-section-sm);
}

.footer__top {
  display: grid;
  gap: var(--space-block);
}

@media (min-width: 64rem) {
  .footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer__group-title {
  margin-block-end: 1rem;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: var(--text-body-sm);
  color: var(--content-muted);
}

.footer__list a:hover {
  color: var(--content);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem var(--grid-gap);
  justify-content: space-between;
  align-items: baseline;
  margin-block-start: var(--space-block);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}