/* ==========================================================================
   Pergola landing page — pergola.standard.ee
   Rebuilt 1:1 from the Aivan x Standard Figma file
   (file 8azC5QZ4hcmRYb7DmmTs6M, frames "Desktop" 504:10 and "iPhone 16" 504:114)

   HOW THE SCALING WORKS
   Both Figma frames are fixed-width compositions, so this stylesheet keeps them
   that way instead of reflowing them. `--u` is one Figma pixel: every length
   below is the literal number from the design multiplied by it. At a 1728px
   viewport --u resolves to exactly 1px and the desktop frame is reproduced
   pixel for pixel; narrower than that, the whole composition scales down
   proportionally. Under 1200px the iPhone frame takes over on the same
   principle, capped so it never stretches past a phone-like width.

   FONT NOTE
   The file specifies "Muoto Mono Condensed Trial" for all display type — a
   licensed trial face with no public CDN. The stand-in is Google's Martian
   Mono pinned to font-stretch: 75%, which has a genuine width axis rather than
   just being a narrow mono. Light -> 300, Regular -> 400. Body copy uses Roboto
   Mono, the real font from the design. To use the licensed face: add @font-face
   rules here and point --font-display at it; --font-stretch-display can then
   go back to normal.
   ========================================================================== */

:root {
  --blue: #008cff;
  --grey: #dedede;
  --near-black: #1f1f1f;
  --dark: #222222;
  --dark-2: #363636;
  --white: #ffffff;
  --rule: rgba(255, 255, 255, 0.15);

  --font-display: 'Martian Mono', 'Roboto Mono', monospace;
  --font-body: 'Roboto Mono', monospace;
  /* The module nav is set in ABC Areal Semi Mono Variable — a third licensed
     face, separate from the display and body fonts. Roboto Mono stands in. */
  --font-nav: 'Roboto Mono', monospace;
  --font-stretch-display: 75%;

  /* Muoto Mono Condensed advances at 0.523em per character; Martian Mono, even
     at wdth 75, advances at 0.600em — the width axis restyles the glyphs but
     does not narrow them. Every display-type rule below adds this on top of the
     design's own tracking, which lands line breaks and column fits where Figma
     puts them instead of 15% wide. The value was tuned by sweeping it against
     the line counts Figma draws (system title 3 lines, its body 6, the Aivan
     paragraph 6, the M1 label 2). Set it to 0 once the licensed face is in. */
  --display-metric-fix: -0.1em;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grey);
  color: var(--near-black);
  font-family: var(--font-body);
  font-stretch: var(--font-stretch-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  container-type: inline-size;
}

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

/* Present to assistive tech and crawlers, absent from the composition. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
picture { display: contents; }
a { color: inherit; }
h2 { font-weight: inherit; }

/* --------------------------------------------------------------------------
   The frame. Mobile (iPhone 16, 393px) is the base; the desktop frame takes
   over further down. --cap stops the phone composition from stretching into a
   poster on a tablet — past it the frame simply centres on the grey field.
   -------------------------------------------------------------------------- */
.page {
  --frame: 393;
  --cap: 560px;
  --w: min(100vw, var(--cap));
  --u: calc(var(--w) / var(--frame));

  position: relative;
  width: var(--w);
  margin: 0 auto;
  padding-bottom: calc(var(--u) * 210);
}

@supports (width: 1cqw) {
  .page { --w: min(100cqw, var(--cap)); }
}

main { position: relative; z-index: 1; }

/* Vertical guide lines: 1px #222 hairlines, inset 16px, five-to-a-frame on
   desktop and two on mobile. Figma node 504:124 / 504:26. */
.stripes {
  position: absolute;
  z-index: 0;
  top: 0;
  left: calc(var(--u) * 16);
  width: calc(var(--u) * 361 + 1px);
  height: 100%;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--dark) 0 1px,
    transparent 1px calc(var(--u) * 180.5)
  );
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: calc(var(--u) * 1032);
}

/* The white plate sits above the hero photo — on desktop the two overlap by
   71px and Figma stacks the plate on top (node 504:248 paints after 504:66). */
.brand {
  position: absolute;
  z-index: 2;
  left: calc(var(--u) * 16);
  top: calc(var(--u) * 69);
  width: calc(var(--u) * 181);
  height: calc(var(--u) * 68);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  overflow: hidden;
  text-decoration: none;
}

.brand__word {
  width: calc(var(--u) * 116.047);
  height: calc(var(--u) * 37.99);
}

.brand__mark {
  position: absolute;
  z-index: 3;
  left: calc(var(--u) * 342);
  top: calc(var(--u) * 22);
  width: calc(var(--u) * 19);
  height: calc(var(--u) * 19.82);
}

.hero__tagline {
  position: absolute;
  left: calc(var(--u) * 32);
  top: calc(var(--u) * 255);
  width: calc(var(--u) * 329);
  margin: 0;
  padding: calc(var(--u) * 30) 0;
  background: var(--grey);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 32);
  line-height: 1.2;
  letter-spacing: calc(var(--u) * 1.6 + var(--display-metric-fix));
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: calc(var(--u) * 2);
  text-underline-offset: calc(var(--u) * 6);
  text-decoration-skip-ink: none;
}

.topnav { display: none; }

.hero__photo {
  position: absolute;
  left: calc(var(--u) * 32);
  top: calc(var(--u) * 621);
  width: calc(var(--u) * 329);
  height: calc(var(--u) * 411);
  margin: 0;
  overflow: hidden;
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__accent {
  position: absolute;
  left: calc(var(--u) * 111);
  top: calc(var(--u) * 695);
  width: calc(var(--u) * 173);
  height: calc(var(--u) * 101);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   MODULES
   -------------------------------------------------------------------------- */
.modules {
  width: calc(var(--u) * 329);
  margin: calc(var(--u) * 220) auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 90);
}

.module {
  display: flex;
  flex-direction: column;
}

.module__frame {
  order: -1;
  position: relative;
  width: 100%;
  height: calc(var(--u) * 329);
  margin-bottom: calc(var(--u) * 48);
  background: var(--white);
  overflow: hidden;
}

/* The renders are 16:9 exports cropped into their frames. These are the exact
   crop rectangles from the design rather than a generic object-fit guess. */
.module__frame img { position: absolute; max-width: none; }
.module--m1 .module__frame img { width: 178.06%; height: 100.19%; left: -36.71%; top: 3.09%; }
.module--m2 .module__frame img { width: 175.68%; height: 100.05%; left: -36.36%; top: 3.06%; }
.module--m3 .module__frame img { width: 177.81%; height: 100.05%; left: -37.37%; top: -16.83%; }

.module--m2 .module__frame { height: calc(var(--u) * 325); }

.module__label {
  margin: 0 0 calc(var(--u) * 32);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 36);
  line-height: 1;
  letter-spacing: calc(var(--u) * 1.44 + var(--display-metric-fix));
  text-transform: uppercase;
  color: var(--blue);
}

/* The <br> in the M3 label is only how the desktop frame breaks it. */
.module--m3 .module__label br { display: none; }

.module__copy {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 32);
  padding-bottom: calc(var(--u) * 16);
}

.module__desc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: 1.36;
  color: var(--near-black);
}

/* Mobile sets the dimension line in the display face; desktop uses Roboto Mono
   Medium. That difference is in the file, not an oversight here. */
.module__dims {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 14);
  line-height: 1.35;
  letter-spacing: var(--display-metric-fix);
  color: var(--near-black);
}

/* --------------------------------------------------------------------------
   SYSTEM / DARK SECTION — a two-state slider

   The band is full bleed: it breaks out of the centred .page box so it always
   runs to the window edges, and its contents are re-centred inside it. The two
   slides invert each other, so the ink colours live on custom properties that
   flip with .is-slide-2 rather than being hard-coded per element.
   -------------------------------------------------------------------------- */
.system {
  --ink: var(--white);
  --ink-dim: rgba(255, 255, 255, 0.15);
  --surface: var(--dark);

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(var(--u) * 220);
  padding: calc(var(--u) * 90) 0;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 32);
  transition: background-color 0.8s ease;
}

@supports (width: 1cqw) {
  .system { width: 100cqw; margin-left: calc(50% - 50cqw); }
}

.system.is-slide-2 {
  --ink: var(--dark);
  --ink-dim: rgba(34, 34, 34, 0.15);
  --surface: var(--white);
}

/* Mobile runs the three parts as one column; the panel is only a grouping box
   for desktop, so it steps out of the way here. */
.system__panel { display: contents; }

.steps { order: 1; }
.system__stage { order: 2; }
.system__copies { order: 3; }

.steps,
.system__stage,
.system__copies { width: calc(var(--u) * 329); }

.steps {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
}

.steps__nums {
  display: flex;
  gap: calc(var(--u) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(var(--u) * 18);
  line-height: 1.35;
  letter-spacing: var(--display-metric-fix);
  color: var(--ink-dim);
  transition: color 0.8s ease;
}

.steps__nums li {
  flex: 1 0 0;
  transition: color 0.8s ease;
}

.steps__nums li.is-active { color: var(--ink); }

/* The numbers drive the slider by hand. `all: unset` strips the button styling
   back to plain inherited text so the markup stays as drawn while still being
   a real, keyboard-reachable control. */
.steps__nums button {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.steps__nums button:hover { opacity: 0.55; }

.steps__nums button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: calc(var(--u) * 4);
}

.steps__bars {
  display: flex;
  gap: calc(var(--u) * 4);
}

.steps__bar {
  position: relative;
  flex: 1 0 0;
  height: calc(var(--u) * 2);
  overflow: hidden;
  background: var(--ink-dim);
  transition: background-color 0.8s ease;
}

/* The fill is the progress indicator — js/main.js drives scaleX from 0 to 1
   across each slide's turn. Without JS the first segment sits at the 64% Figma
   draws it at. */
.steps__bar i {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: background-color 0.8s ease;
}

.steps__bar:first-child i { transform: scaleX(0.64); }

.system__stage {
  position: relative;
  height: calc(var(--u) * 329);
  margin-bottom: calc(var(--u) * 16);
  overflow: hidden;
}

/* Surface and construction are separate layers: the backdrops cross-fade while
   the renders travel across them. That only works because the exports keep
   their alpha — a flattened render would drag its own background along. */
.system__backdrop,
.system__object {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.system__backdrop[data-slide="1"] {
  opacity: 1;
  background: linear-gradient(to bottom, var(--dark-2), var(--dark));
}

.system__backdrop[data-slide="2"] { background: var(--white); }

.system__object[data-slide="1"] { opacity: 1; }

.system__object img {
  position: absolute;
  top: 0;
  left: -28%;
  width: 128%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.system__object[data-slide="2"] img { left: 0; width: 100%; }

/* Both copies occupy the same grid cell so they can cross-fade without the
   panel jumping; the cell takes the height of the taller one. */
.system__copies { display: grid; }

.system__copy {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 32);
  color: var(--ink);
  opacity: 0;
  transition: color 0.8s ease;
}

.system__copy[data-slide="1"] { opacity: 1; }

.system__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 36);
  line-height: 1;
  letter-spacing: calc(var(--u) * 1.44 + var(--display-metric-fix));
  text-transform: uppercase;
}

.system__desc {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(var(--u) * 18);
  line-height: 1.35;
  letter-spacing: var(--display-metric-fix);
}

/* --------------------------------------------------------------------------
   AIVAN
   -------------------------------------------------------------------------- */
.aivan {
  width: calc(var(--u) * 329);
  margin: calc(var(--u) * 240) auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 48);
}

.aivan__photo {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 329);
  margin: 0;
  overflow: hidden;
}

.aivan__photo img {
  position: absolute;
  top: 0;
  left: -33.66%;
  width: 170.36%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.aivan__copy {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
  color: var(--dark);
}

.aivan__title {
  margin: 0 0 calc(var(--u) * 24);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 36);
  line-height: 1;
  letter-spacing: calc(var(--u) * 1.44 + var(--display-metric-fix));
  text-transform: uppercase;
}

.aivan__body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(var(--u) * 18);
  line-height: 1.35;
  letter-spacing: var(--display-metric-fix);
  text-align: center;
}

.aivan__link {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(var(--u) * 18);
  line-height: 1.35;
  letter-spacing: var(--display-metric-fix);
  text-align: right;
  text-decoration: underline;
  text-decoration-thickness: calc(var(--u) * 1);
  text-underline-offset: calc(var(--u) * 4);
  text-decoration-skip-ink: none;
}

/* --------------------------------------------------------------------------
   LIFESTYLE + FOOTER
   -------------------------------------------------------------------------- */
.lifestyle {
  position: relative;
  width: calc(var(--u) * 329);
  height: calc(var(--u) * 329);
  margin: calc(var(--u) * 240) auto 0;
  overflow: hidden;
}

.lifestyle img {
  position: absolute;
  top: -23.04%;
  left: -12.77%;
  width: 112.77%;
  height: 122.93%;
  max-width: none;
  object-fit: cover;
}

.site-footer {
  width: calc(var(--u) * 329);
  margin: calc(var(--u) * 60) auto 0;
  padding: calc(var(--u) * 30) 0;
  background: var(--grey);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 30);
  text-align: center;
}

.site-footer__title {
  margin: 0;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 24);
  line-height: 1.2;
  letter-spacing: calc(var(--u) * 1.2 + var(--display-metric-fix));
  text-transform: uppercase;
  color: var(--blue);
}

.site-footer__link {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: 1.35;
  letter-spacing: var(--display-metric-fix);
  color: var(--dark);
  text-decoration: underline;
  text-decoration-thickness: calc(var(--u) * 1);
  text-underline-offset: calc(var(--u) * 4);
  text-decoration-skip-ink: none;
}

/* Figma trims every text box to the cap height (text-box-trim: trim-both with
   text-box-edge: cap alphabetic), so its boxes are shorter than a browser's
   default half-leading would make them. Mirroring that keeps the vertical
   rhythm identical rather than accumulating extra leading down the page.
   Browsers without support just get the default leading — a few px taller in
   places, nothing breaks. */
.hero__tagline,
.module__label,
.module__desc,
.module__dims,
.steps__nums,
.system__title,
.system__desc,
.aivan__title,
.aivan__body,
.aivan__link,
.site-footer__title,
.site-footer__link {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* ==========================================================================
   DESKTOP FRAME — Figma "Desktop" 504:10, 1728 x 7099
   ========================================================================== */
@media (min-width: 1200px) {

  .page {
    --frame: 1728;
    --cap: 1728px;
    padding-bottom: calc(var(--u) * 185);
  }

  .stripes {
    left: calc(var(--u) * 48);
    width: calc(var(--u) * 1630 + 1px);
    background-image: repeating-linear-gradient(
      to right,
      var(--dark) 0 1px,
      transparent 1px calc(var(--u) * 326)
    );
  }

  /* ---------- Hero ---------- */
  .hero { height: calc(var(--u) * 1230); }

  /* Header as reworked in Figma: the full-bleed wordmark plate that used to
     overlap the hero (nodes 504:248 and 504:13) is gone. In its place a small
     plate at x49/y87 holds the wordmark and the circled S locked up together
     (543:763), with an M1/M2/M3 nav row at y132 (543:778-780). */
  .brand {
    left: calc(var(--u) * 49);
    top: calc(var(--u) * 87);
    width: calc(var(--u) * 325);
    height: calc(var(--u) * 108);
    display: block;
  }

  .brand__word {
    position: absolute;
    left: calc(var(--u) * 58);
    top: calc(var(--u) * 24);
    width: calc(var(--u) * 184.621);
    height: calc(var(--u) * 59.984);
  }

  /* Now inside the plate, locked to the wordmark. Frame coordinates:
     49 (plate) + 58 (lockup inset) + 195.24 (mark inset) = 302.24. */
  .brand__mark {
    left: calc(var(--u) * 302.24);
    top: calc(var(--u) * 111.43);
    width: calc(var(--u) * 14.767);
    height: calc(var(--u) * 14.768);
  }

  .topnav { display: block; }

  .topnav a {
    position: absolute;
    top: calc(var(--u) * 132);
    width: calc(var(--u) * 294);
    font-family: var(--font-nav);
    font-weight: 400;
    font-size: calc(var(--u) * 24);
    line-height: 1.35;
    color: var(--near-black);
    text-decoration: none;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .topnav a:nth-child(1) { left: calc(var(--u) * 717); }
  .topnav a:nth-child(2) { left: calc(var(--u) * 1044); }
  .topnav a:nth-child(3) { left: calc(var(--u) * 1370); }

  .hero__tagline,
  .hero__accent { display: none; }

  .hero__photo {
    left: calc(var(--u) * 64);
    top: calc(var(--u) * 337);
    width: calc(var(--u) * 1600);
    height: calc(var(--u) * 893);
  }

  /* ---------- Modules ---------- */
  .modules {
    width: calc(var(--u) * 1600);
    margin: calc(var(--u) * 277) 0 0 calc(var(--u) * 64);
    gap: calc(var(--u) * 60);
  }

  .module {
    display: grid;
    grid-template-columns:
      calc(var(--u) * 294)
      calc(var(--u) * 948)
      calc(var(--u) * 294);
    gap: calc(var(--u) * 32);
    align-items: start;
  }

  .module__frame,
  .module--m2 .module__frame {
    order: 0;
    height: calc(var(--u) * 533);
    margin-bottom: 0;
  }

  .module--m1 .module__frame img { width: 100.14%; height: 100.19%; left: -0.07%; top: 1.88%; }
  .module--m2 .module__frame img { width: 100%;    height: 100.05%; left: 0;       top: 4.89%; }
  .module--m3 .module__frame img { width: 100%;    height: 100.05%; left: 0;       top: -16.83%; }

  .module__label {
    margin: 0;
    font-size: calc(var(--u) * 48);
    letter-spacing: calc(var(--u) * 2.4 + var(--display-metric-fix));
  }

  /* M1 is drawn at 46px / 1.2 / 2.3px while M2 and M3 are 48px / 1.0 / 2.4px.
     Reproduced as drawn rather than normalised — see README.md. */
  .module--m1 .module__label {
    font-size: calc(var(--u) * 46);
    line-height: 1.2;
    letter-spacing: calc(var(--u) * 2.3 + var(--display-metric-fix));
  }

  .module--m3 .module__label br { display: inline; }

  .module__copy { padding-bottom: 0; }

  .module__dims {
    font-family: var(--font-body);
    font-weight: 500;
    line-height: 1.36;
  }

  /* ---------- System / dark ---------- */
  .system {
    display: block;
    gap: 0;
    height: calc(var(--u) * 972);
    margin-top: calc(var(--u) * 278);
    padding: 0;
    background: none;
  }

  /* width/height must be restated: the mobile rule pins the stage to the 329px
     column, and an explicit width wins over the right half of `inset: 0`. */
  .system__stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .system__backdrop,
  .system__object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .system__backdrop[data-slide="1"] {
    background: linear-gradient(to top, var(--dark) 25%, var(--dark-2));
  }

  .system__backdrop[data-slide="2"] { background: var(--white); }

  .system__object[data-slide="1"] img { inset: 0; width: 100%; height: 100%; left: 0; }

  /* Exact crop from node 504:230. */
  .system__object[data-slide="2"] img {
    left: -26.34%;
    top: -13.12%;
    width: 126.34%;
    height: 126.34%;
  }

  /* The section is full bleed, so the panel is placed against the centre of the
     viewport rather than the left edge: half the frame back (864) puts us at
     frame x0, then the frame's own 48. */
  .system__panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: calc(50% - var(--u) * 816);
    top: 0;
    z-index: 1;
    width: calc(var(--u) * 310);
    padding: calc(var(--u) * 120) 0 0 calc(var(--u) * 16);
    border-left: 1px solid var(--ink);
    gap: calc(var(--u) * 60);
  }

  .steps,
  .system__copies { width: calc(var(--u) * 294); }

  /* Desktop splits the filling segment at 61 of 95.33 units. */
  .steps__bar:first-child i { transform: scaleX(0.64); }

  /* Slide 2's heading is drawn in Muoto Mono UltraCond Light at 48px — a fourth
     face, and larger than slide 1's 36px. Reproduced as drawn. */
  .system__title--alt {
    font-weight: 300;
    font-size: calc(var(--u) * 48);
    letter-spacing: calc(var(--u) * 1.92 + var(--display-metric-fix));
  }
  /* ---------- Aivan ---------- */
  .aivan {
    width: calc(var(--u) * 1600);
    height: calc(var(--u) * 555);
    margin: calc(var(--u) * 263) 0 0 calc(var(--u) * 64);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .aivan__photo {
    order: 1;
    width: calc(var(--u) * 947);
    height: calc(var(--u) * 555);
  }

  .aivan__photo img { left: 0; width: 100%; }

  .aivan__copy {
    width: calc(var(--u) * 621);
    padding: calc(var(--u) * 30) 0;
    gap: calc(var(--u) * 48);
    background: var(--grey);
    text-align: center;
  }

  .aivan__title {
    margin: 0;
    font-size: calc(var(--u) * 48);
    letter-spacing: calc(var(--u) * 1.92 + var(--display-metric-fix));
  }

  .aivan__body,
  .aivan__link {
    font-size: calc(var(--u) * 24);
    letter-spacing: var(--display-metric-fix);
    text-align: center;
  }

  .aivan__link { text-decoration-thickness: calc(var(--u) * 1.4); }

  /* ---------- Lifestyle + footer ---------- */
  .lifestyle {
    width: calc(var(--u) * 1599.228);
    height: calc(var(--u) * 892.592);
    margin: calc(var(--u) * 255) 0 0 calc(var(--u) * 64);
  }

  .lifestyle img { inset: 0; width: 100%; height: 100%; }

  .site-footer {
    width: calc(var(--u) * 948);
    margin: calc(var(--u) * 120.4) 0 0 calc(var(--u) * 390);
    padding: 0;
    gap: 0;
    background: none;
  }

  .site-footer__title {
    padding: calc(var(--u) * 48) 0;
    background: var(--grey);
    font-weight: 300;
    font-size: calc(var(--u) * 60);
    letter-spacing: var(--display-metric-fix);
    text-transform: none;
    text-decoration: underline;
    text-decoration-thickness: calc(var(--u) * 2);
    text-underline-offset: calc(var(--u) * 10);
    text-decoration-skip-ink: none;
  }

  .site-footer__link {
    font-weight: 300;
    font-size: calc(var(--u) * 24);
    text-decoration-thickness: calc(var(--u) * 1.4);
  }
}

/* --------------------------------------------------------------------------
   Pre-launch gate — not in the Figma file. Built from the page's own type and
   colour so the first thing a reviewer sees already looks like the site.
   -------------------------------------------------------------------------- */
.gate {
  width: calc(var(--u) * 329);
  margin: calc(var(--u) * 240) auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
  color: var(--near-black);
}

.gate__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 36);
  line-height: 1;
  letter-spacing: calc(var(--u) * 1.44 + var(--display-metric-fix));
  text-transform: uppercase;
}

.gate__body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: 1.36;
}

.gate__form {
  display: flex;
  gap: calc(var(--u) * 8);
  margin: calc(var(--u) * 8) 0 0;
}

.gate__input {
  flex: 1 0 0;
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  border: 1px solid var(--near-black);
  border-radius: 0;
  background: var(--white);
  color: var(--near-black);
  font-family: var(--font-body);
  font-size: calc(var(--u) * 16);
  line-height: 1.2;
}

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

.gate__button {
  padding: calc(var(--u) * 12) calc(var(--u) * 20);
  border: 1px solid var(--near-black);
  background: var(--near-black);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 14);
  line-height: 1.2;
  letter-spacing: calc(var(--u) * 1 + var(--display-metric-fix));
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gate__button:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.gate__error {
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(var(--u) * 14);
  line-height: 1.36;
  color: var(--blue);
}

@media (min-width: 1200px) {
  .gate {
    width: calc(var(--u) * 621);
    margin: calc(var(--u) * 277) 0 calc(var(--u) * 277) calc(var(--u) * 64);
  }

  .gate__input,
  .gate__button { font-size: calc(var(--u) * 16); }
}

/* --------------------------------------------------------------------------
   404 — not in the Figma file. Built from the page's own type and colour so a
   wrong URL still looks like the site rather than like the server.
   -------------------------------------------------------------------------- */
.notfound {
  width: calc(var(--u) * 329);
  margin: calc(var(--u) * 240) auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 24);
  color: var(--near-black);
}

.notfound__code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 36);
  line-height: 1;
  letter-spacing: calc(var(--u) * 1.44 + var(--display-metric-fix));
  color: var(--blue);
}

.notfound__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--u) * 36);
  line-height: 1;
  letter-spacing: calc(var(--u) * 1.44 + var(--display-metric-fix));
  text-transform: uppercase;
}

.notfound__body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  line-height: 1.36;
}

.notfound__link {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(var(--u) * 18);
  line-height: 1.35;
  letter-spacing: var(--display-metric-fix);
  text-decoration: underline;
  text-decoration-thickness: calc(var(--u) * 1);
  text-underline-offset: calc(var(--u) * 4);
}

@media (min-width: 1200px) {
  .notfound {
    width: calc(var(--u) * 621);
    margin: calc(var(--u) * 277) 0 calc(var(--u) * 277) calc(var(--u) * 64);
  }
}

/* ==========================================================================
   Scroll-reveal base states (animated in js/main.js)
   Scoped under .js-anim, which an inline script in <head> puts on <html>.
   Without that class everything renders at its natural, visible state — so if
   GSAP's CDN is blocked or js/main.js throws, the page still shows its content
   instead of staying blank.
   ========================================================================== */
.js-anim [data-reveal-img],
.js-anim [data-reveal-text] {
  opacity: 0;
  transform: translateY(28px);
}

.js-anim .module__label { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal-img],
  .js-anim [data-reveal-text],
  .js-anim .module__label {
    opacity: 1;
    transform: none;
  }
}