/* ==========================================================================
   ЭЛИЗИУМ. Landing styles.
   Aesthetic family: dark tech / instrument panel. This is an aesthetic, not an
   official design system (no Material, Fluent, Carbon or Polaris here). Built
   with native CSS custom properties.

   Redesign mode: Preserve. The visual language from the previous overhaul is
   sound and stays; what changed is the subject. The page is now about the
   device, not the company, so the hero carries the product and the brand is
   demoted to nav, footer and favicon.
   Dials: DESIGN_VARIANCE 7, MOTION_INTENSITY 7, VISUAL_DENSITY 4. The motion
   step is not decoration: retiring the hero photograph deleted the page's one
   scroll-driven animation, so the level had to be re-earned inside the same
   90ms quantize grid rather than lost.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts. Self-hosted, font-display: swap.
   TildaSans is the preserved brand type stack (variable, full Cyrillic).
   JetBrains Mono (OFL-1.1, latin subset) carries technical numerals only.
   The variable axis runs 250 to 1000 and the redesign actually uses it: 300
   for prose, 600 for section heads, 700 for titles, 800 for the display.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'TildaSans';
  src: url('../fonts/TildaSans-VF.woff2') format('woff2-variations');
  font-weight: 250 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}

/* --------------------------------------------------------------------------
   2. Tokens.
   Ground is the preserved brand near-black, derived from the old hero tint
   rgb(51,36,0). The neutral ramp around it is roughly three times wider than
   the previous build, which is what lets sections read as separate planes
   instead of one flat column.
   Accent holds the existing brand hue (13deg) from #FF8562, desaturated from
   100% to 76% to satisfy the max-saturation rule, then re-tuned per mode so
   contrast passes AA in both. One accent, one hue, whole page.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark light;

  /* dark is the brand default */
  --deep:        #070604;   /* below ground: the full-bleed band */
  --ground:      #0D0B08;   /* preserved, matches the theme-color meta */
  --surface:     #17130C;
  --surface-2:   #221D14;
  --stage:       #2C2519;   /* lighter plane the product render sits on */
  --plate:       #F4F3F0;   /* light plate for dark-only partner logos */
  --line:        rgba(239, 237, 232, 0.13);
  --line-strong: rgba(239, 237, 232, 0.26);
  --ink:         #EFEDE8;
  --ink-muted:   #ADA79F;
  --ink-faint:   #8E887F;
  --accent:      #E87454;
  --accent-ink:  #12100C;
  --accent-soft: rgba(232, 116, 84, 0.14);
  --accent-glow: rgba(232, 116, 84, 0.20);
  --plane-accent: #1E120D;  /* accent-tinted close, still inside the dark family */
  --shade:       rgba(0, 0, 0, 0.45);

  /* one radius rule: surfaces 20px (brand token), controls 10px */
  --r-surface: 20px;
  --r-control: 10px;

  /* type scale: five distinct steps plus display, so the page does not
     collapse to one loud moment followed by flat body text.
     The display step is retuned down from a 6.5rem cap: it used to set the
     seven-letter wordmark ЭЛИЗИУМ, and now sets a 34-character product name.
     At the old cap that headline ran four lines and pushed the CTA off the
     fold. Same scale, same ratios, one step re-fitted to its new content. */
  --fs-display:   clamp(2.125rem, 5vw, 3.875rem);
  --fs-h2:        clamp(2rem, 4.6vw, 3.5rem);
  --fs-statement: clamp(1.375rem, 2.9vw, 2.25rem);
  --fs-h3:        clamp(1.3125rem, 2.2vw, 1.75rem);
  --fs-num:       clamp(2.5rem, 5.4vw, 4rem);
  --fs-lead:      clamp(1.0625rem, 1.5vw, 1.3125rem);
  --fs-body:      1.0625rem;
  --fs-sm:        0.9375rem;
  --fs-xs:        0.8125rem;

  /* spacing scale, VISUAL_DENSITY 4 band */
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --space-section: clamp(4.5rem, 8.5vw, 7rem);
  --space-block:   clamp(2.5rem, 5vw, 4rem);
  --gutter:        clamp(1.25rem, 4vw, 3rem);
  --maxw:          1400px;
  --nav-h:         72px;

  /* faceplate texture: hairline grid, the one decorative material on the page */
  --grid-fine:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--line) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--line) 27px 28px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --step: 90ms;            /* quantized reveal grid, echoing the looper */
}

@media (prefers-color-scheme: light) {
  :root {
    --deep:        #E4E3DE;
    --ground:      #F1F1EF;   /* preserved, matches the theme-color meta */
    --surface:     #FAFAF8;
    --surface-2:   #E9E9E5;
    --stage:       #E6E5E0;
    --plate:       #FDFDFC;   /* off-white, never pure #fff */
    --line:        rgba(20, 18, 16, 0.14);
    --line-strong: rgba(20, 18, 16, 0.28);
    --ink:         #141210;
    --ink-muted:   #55514B;
    --ink-faint:   #635E57;   /* darkened so it clears AA on --deep too */
    --accent:      #A8482A;
    --accent-ink:  #FBF9F6;
    --accent-soft: rgba(168, 72, 42, 0.10);
    --accent-glow: rgba(168, 72, 42, 0.14);
    --plane-accent: #F3E9E4;
    --shade:       rgba(20, 18, 16, 0.10);
  }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'TildaSans', Arial, sans-serif;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

a { color: inherit; }

/* Optical tracking scales with size instead of two fixed values. */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.018em;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 60ch;
}

/* mono numerals, the only place the mono face appears */
.num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--gutter);
  top: 0.75rem;
}

.nav-sentinel {
  display: block;
  height: 1px;
  margin-top: -1px;
}

/* --------------------------------------------------------------------------
   5. Navigation. One line at desktop, 72px tall. Preserved split composition:
   two links, centred brand mark, two links.
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--ground) 94%, transparent);
}

.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nav__group {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.nav__group--end { justify-content: flex-end; }

.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color 0.25s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav__brand { display: block; line-height: 0; }
.nav__brand img {
  width: 44px;
  height: 44px;
  transition: opacity 0.25s var(--ease);
}
.nav__brand:hover img { opacity: 0.72; }

.nav__burger {
  display: none;
  grid-column: 3;
  justify-self: end;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  padding: 0.5rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--line);
}
.nav__mobile-link {
  padding: 0.9rem 0;
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav__mobile-link:last-child { border-bottom: 0; }

@media (max-width: 767px) {
  .nav__group { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__brand { grid-column: 1; justify-self: start; }
  .nav__burger { display: flex; grid-column: 2; }
  .nav__mobile:not([hidden]) { display: flex; }
}

/* --------------------------------------------------------------------------
   6. Hero. Layout family A: asymmetric split.
   Type block left, the device itself right. The photograph of third-party
   hardware is gone, and the brand watermark with it: the product is the
   subject of the page now, so nothing else competes for the slot. Preserves
   the brand's inset card, the 20px radius and the 1.08 / 0.92 column ratio.
   -------------------------------------------------------------------------- */
.hero { padding: var(--gutter); }

.hero__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-surface);
  min-height: min(calc(100dvh - var(--nav-h) - (var(--gutter) * 2)), 880px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  /* Fixed dark in BOTH modes, and the accent glow with it. This card is the
     brand's dark expression surviving light mode, so every value on it is
     literal rather than tokenised: a light-mode token here would put
     near-white type on a near-white card. The glow sits behind the render,
     which is a near-black cut-out and would otherwise sink into the card. */
  background-color: #14110B;
  background-image:
    radial-gradient(58% 52% at 74% 46%, rgba(232, 116, 84, 0.20) 0%, transparent 68%);
}

/* faceplate hairline grid, the material cue that ties the page together */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(239, 237, 232, 0.05) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(239, 237, 232, 0.05) 27px 28px);
  mask-image: radial-gradient(80% 70% at 74% 45%, #000 0%, transparent 78%);
}

.hero__content {
  grid-column: 1;
  padding-inline: clamp(1.75rem, 4.5vw, 4.25rem);
  padding-block: clamp(2.5rem, 6vw, 5.25rem);   /* under the 6rem desktop cap */
  max-width: 46rem;   /* wide enough to hold the headline to two lines */
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #F7F5F0;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
  text-wrap: balance;
}

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: #E4E0D8;
  max-width: 38ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* The page's primary action, and the first one this site has ever had. The
   accent pair is literal for the same reason the type is: this card does not
   follow the page's light tokens. 6.39:1 on the button, AA. */
.hero__cta {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-control);
  background: #E87454;
  color: #12100C;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.27s var(--ease), transform 0.27s var(--ease);
}
.hero__cta:hover { background: #F08A6B; }
@media (prefers-reduced-motion: no-preference) {
  .hero__cta:hover { transform: translateY(-2px); }
}

.hero__figure {
  grid-column: 2;
  margin: 0;
  justify-self: center;
  align-self: center;
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: clamp(1rem, 3vw, 2.5rem);
  min-width: 0;
}
.hero__figure img {
  max-height: min(58vh, 520px);
  width: auto;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.55));
}

@media (max-width: 1023px) {
  .hero__card { grid-template-columns: 1fr; align-content: center; }
  .hero__content { grid-column: 1; max-width: none; }
  .hero__figure { grid-column: 1; padding-top: 0; }
  .hero__figure img { max-height: min(42vh, 420px); }
}

@media (max-width: 767px) {
  .hero__card { min-height: calc(100dvh - var(--nav-h) - (var(--gutter) * 2)); }
  .hero__lead { max-width: none; }
  .hero__figure img { max-height: 34vh; }
}

/* --------------------------------------------------------------------------
   7. Product intro. Layout family B: typographic asymmetric grid, no image.
   Header stacks vertically (no split-header), body indents on a later row.
   This slot used to hold the company section. It now carries the device's
   technical description, so the page never leaves its subject.
   -------------------------------------------------------------------------- */
.product {
  padding-top: var(--space-section);
  border-top: 1px solid var(--line);
}

.product__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.product__head { grid-column: 1 / 9; }

/* The accent is reserved for a single role on this page: action and data. It
   is not a decorative text colour, so this sub-line takes muted ink. */
.product__sub {
  margin-top: var(--s-3);
  font-size: var(--fs-lead);
  font-weight: 400;
  color: var(--ink-muted);
  max-width: 44ch;
}

.product__body {
  grid-column: 4 / 12;
  margin-top: clamp(1rem, 3vw, 2.75rem);   /* the offset that breaks the symmetry */
  display: grid;
  gap: var(--s-4);
}
.product__body p { color: var(--ink-muted); max-width: 60ch; }
.product__body .lead { color: var(--ink); }

@media (max-width: 767px) {
  .product__grid { grid-template-columns: 1fr; }
  .product__head, .product__body { grid-column: 1; }
  .product__body { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   8. Specs. Layout family E: four-cell numeric grid on one panel.
   Hairline-divided cells rather than four card boxes. The first cell carries
   the headline figure and gets the extra width.
   -------------------------------------------------------------------------- */
.specs {
  margin-top: var(--space-block);
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
}

/* The cells carry the faceplate grid so this reads as one divided panel rather
   than four flat text boxes, and the headline figure sits on its own tinted
   plane. Background colour is kept separate from the image stack so the hover
   can still transition. */
.specs__cell {
  background-color: var(--surface);
  background-image: var(--grid-fine);
  padding: clamp(1.375rem, 2.6vw, 2.25rem);
  transition: background-color 0.27s var(--ease);
}
.specs__cell:hover { background-color: color-mix(in srgb, var(--surface) 88%, var(--ink)); }

.specs__cell:first-child {
  background-color: var(--surface-2);
  background-image:
    linear-gradient(150deg, var(--accent-soft) 0%, transparent 62%),
    var(--grid-fine);
}
.specs__cell:first-child:hover { background-color: color-mix(in srgb, var(--surface-2) 90%, var(--ink)); }

.specs__value {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: var(--fs-num);
  line-height: 0.92;
  color: var(--accent);
}
.specs__unit {
  font-size: 0.3em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.specs__label {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-muted);
  max-width: 18ch;
}

@media (max-width: 1023px) {
  .specs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 519px) {
  .specs { grid-template-columns: 1fr; }
  .specs__label { max-width: none; }
}

/* --------------------------------------------------------------------------
   9. Capabilities. Layout family F: asymmetric 1 + 2 grid.
   Exactly three cells for three items. Two of the three carry real background
   variation (accent wash, faceplate grid) so this is not a text-on-text grid.
   -------------------------------------------------------------------------- */
.caps {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.caps__cell {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
  transition: border-color 0.27s var(--ease), transform 0.27s var(--ease);
}
.caps__cell p {
  margin-top: var(--s-3);
  color: var(--ink-muted);
  max-width: 52ch;
}
.caps__cell:hover { border-color: var(--line-strong); }
@media (prefers-reduced-motion: no-preference) {
  .caps__cell:hover { transform: translateY(-3px); }
}

.caps__title {
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.018em;
}

.caps__cell--lead {
  grid-column: 1 / -1;
  background:
    var(--grid-fine),
    linear-gradient(120deg, var(--accent-soft) 0%, transparent 58%),
    var(--surface-2);
  border-color: var(--line-strong);
}
.caps__cell--lead .caps__title { font-size: var(--fs-statement); }
.caps__cell--lead p { max-width: 46ch; font-size: var(--fs-lead); color: var(--ink); }

.caps__cell--tint {
  background:
    var(--grid-fine),
    var(--surface-2);
}

@media (max-width: 767px) {
  .caps { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. Uses. Layout family G: the page's one full-bleed band.
   Three uses divided by vertical rules, no boxes.
   -------------------------------------------------------------------------- */
.uses {
  margin-top: var(--space-section);
  padding-block: clamp(3rem, 6vw, 4.75rem);
  background: var(--deep);
  border-block: 1px solid var(--line);
}

.uses__row {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* these rules are the only structure in the band, so they take the stronger
   hairline rather than the default one */
.uses__item + .uses__item {
  border-left: 1px solid var(--line-strong);
  padding-left: clamp(1.5rem, 4vw, 3rem);
}
.uses__item p {
  margin-top: var(--s-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  max-width: 30ch;
}

.uses__title {
  font-size: clamp(1.125rem, 1.8vw, 1.4375rem);
  line-height: 1.2;
  font-weight: 600;
}

.uses__audience {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  max-width: 72ch;
}

@media (max-width: 767px) {
  .uses__row { grid-template-columns: 1fr; gap: var(--s-5); }
  .uses__item + .uses__item {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--s-5);
  }
  .uses__item p { max-width: none; }
}

/* --------------------------------------------------------------------------
   11. Partners. Layout family H: credential band.
   The mark is black-on-white artwork and must not be recoloured, so it keeps a
   light plate inside the dark page. That is a contained asset, not a section
   theme flip.
   -------------------------------------------------------------------------- */
.partners {
  padding-block: var(--space-section);
  border-top: 1px solid var(--line);
}

.partners__title { margin-bottom: var(--space-block); }

.partners__band {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

/* Two marks now, stacked in the narrow column so each gets the full plate
   width rather than half of it. Logos only, no category labels beneath. */
.partners__plates {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.125rem);
}

.plate {
  background: var(--plate);
  border-radius: var(--r-control);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  min-height: clamp(128px, 13vw, 168px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.27s var(--ease);
}
.plate img {
  max-height: clamp(72px, 8.4vw, 108px);
  width: auto;
  object-fit: contain;
}

/* The Platforma mark is not a cut-out like the FASIE one: it ships as a
   finished panel with its own purple ground, its own margins and a four-line
   lockup. Capped at the 108px logo height it renders that lockup at about 5px
   and becomes unreadable, so this plate gives the panel the whole frame
   instead of boxing it inside a white one. Same radius, same column, no white
   ground and no padding to fight. */
.plate--panel {
  padding: 0;
  background: none;
  min-height: 0;
  /* the panel is a square-cornered raster and the plate is rounded, so the
     corners have to be clipped back to the plate's radius */
  overflow: hidden;
}
.plate--panel img {
  width: 100%;
  height: auto;
  max-height: none;
}
@media (prefers-reduced-motion: no-preference) {
  .plate:hover { transform: translateY(-3px); }
}

/* Grant credential copy. Required content, so it is set at readable size and
   full contrast, not as fine print. */
.partners__support {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink);
  max-width: 78ch;
  padding-left: var(--s-4);
  border-left: 2px solid var(--accent);
}

.partners__legal {
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-faint);
  max-width: 72ch;
}

@media (max-width: 767px) {
  .partners__band { grid-template-columns: 1fr; }
  .plate { min-height: 128px; }
}

/* --------------------------------------------------------------------------
   12. Contact + footer. Layout family I: accent-tinted close.
   The one large-area accent moment below the fold. Still inside the dark
   family in dark mode and the light family in light mode, so the page theme
   never flips.
   -------------------------------------------------------------------------- */
.contact {
  padding-block: var(--space-section);
  background: var(--plane-accent);
  border-top: 1px solid var(--line);
}

.contact__main {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  justify-items: start;
  padding-bottom: var(--space-block);
}

/* The page's conversion point, and until now the site did not have one: this
   section carried a city name and a copyright line and nothing actionable.
   Accent in its action role, sized as the largest thing under the heading.
   6.15:1 dark, 4.85:1 light, both AA. */
.contact__mail {
  font-size: clamp(1.25rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  overflow-wrap: anywhere;
  transition: border-color 0.27s var(--ease);
}
.contact__mail:hover { border-bottom-color: var(--accent); }

/* demoted below the mail link, which is now the section's loudest element */
.contact__where {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-muted);
}

.contact__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.contact__mark {
  width: 32px;
  height: 32px;
  flex: none;
  opacity: 0.7;
}
@media (prefers-color-scheme: light) {
  /* the mark is white line art, so it needs inverting on a light ground.
     The hero mark is excluded: that card is dark in both modes. */
  .contact__mark, .nav__brand img { filter: invert(1); }
}

.contact__legal {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   13. Motion. MOTION_INTENSITY 7.
   Every duration is a whole multiple of the 90ms quantize step, so the page
   moves on the same grid the looper records on. Three reveal roles, transform
   and opacity only. The brand-watermark role went with the watermark. Nothing here runs without JS, and nothing
   here runs under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  .js [data-reveal] {
    opacity: 0;
    transition-delay: calc(var(--i, 0) * var(--step));
    transition-timing-function: var(--ease);
    will-change: transform, opacity;
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    clip-path: none;
    will-change: auto;
  }

  /* Watchdog escape hatch. If the document animation clock is stalled and a
     transition never ran, main.js adds this and the end state applies at once,
     whatever the variant's target opacity is. */
  .js [data-reveal].is-settled { transition: none; }

  /* type and prose: 6 steps */
  .js [data-reveal="rise"] {
    transform: translateY(20px);
    transition-property: opacity, transform;
    transition-duration: 540ms;
  }

  /* data tiles: 5 steps, shorter travel so a row of them reads as one gesture */
  .js [data-reveal="tile"] {
    transform: translateY(14px);
    transition-property: opacity, transform;
    transition-duration: 450ms;
  }

  /* media panels: 8 steps, a settle rather than a slide */
  .js [data-reveal="media"] {
    transform: scale(1.03);
    clip-path: inset(0 0 12% 0 round var(--r-surface));
    transition-property: opacity, transform, clip-path;
    transition-duration: 720ms;
  }

}

/* Scroll-driven lift on the hero render. This is the motion the retired
   photograph took with it, re-earned on the product instead: the device eases
   back and up as the hero scrolls away, so the type block leads the exit.
   Native CSS timeline, no scroll listener, no library. Three elements, three
   jobs, so nothing contends for the same transform: the reveal transition runs
   on .hero__figure, this runs on the <picture> inside it, and the drop-shadow
   stays on the image below that. The wrapper is deliberately the animated one.
   Driving this on the image itself re-rasterizes its drop-shadow every frame
   and stalls the compositor; on an unfiltered wrapper the shadow is rasterized
   once and the cached layer is simply moved. Silently absent where
   unsupported. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__figure picture {
      animation: hero-lift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
      will-change: transform;
    }
    @keyframes hero-lift {
      to { transform: translateY(-6%) scale(0.955); }
    }
  }
}

/* Two hover affordances predate this pass and animated a transform without a
   reduced-motion guard: the nav underline wipe and the burger morph. Every
   other transform on the page is already inside a no-preference block, so
   these are dropped to instant here. The end states are untouched, the
   underline still appears and the burger still becomes a cross. */
@media (prefers-reduced-motion: reduce) {
  .nav__link::after,
  .nav__burger span { transition: none; }
}