/* ==========================================================================
   Reset
   ========================================================================== */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: #04255f; /* matches the artwork's base tone, fills any letterboxing */
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  display: block;
}

.bars {
  display: none; /* decorative mobile-only element, see the mobile media query */
}

h1,
p,
address {
  margin: 0;
  font-style: normal;
}

/* ==========================================================================
   Stage
   The composition is designed on a 1728 x 1117 canvas (the Figma desktop
   frame). The stage keeps that exact aspect ratio and scales uniformly to
   fit the viewport, so every proportion below stays accurate at any size.
   ========================================================================== */

.page {
  width: min(100vw, calc(100vh * 1728 / 1117));
  aspect-ratio: 1728 / 1117;
  background: url("assets/background-desktop.png") center / cover no-repeat;
  display: grid;
  grid-template-columns:
    5.5556%   /* left margin */
    38.0787%  /* illustration */
    2.1123%   /* gap */
    46.0359%  /* content column */
    8.2176%;  /* right margin */
  grid-template-rows: 100%; /* gives a definite row height so the nested
                                percentage rows below resolve correctly */
}

/* ==========================================================================
   Illustration
   ========================================================================== */

.illustration {
  grid-column: 2;
  display: grid;
  grid-template-rows:
    5.19%   /* top margin */
    90.83%  /* artwork */
    3.98%;  /* bottom margin */
}

.illustration img {
  grid-row: 2;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Content column
   ========================================================================== */

.content {
  grid-column: 4;
  display: grid;
  align-items: start; /* pin each block to the top of its row instead of centering it */
  grid-template-rows:
    11.77%  /* top margin */
    12.04%  /* heading */
    8.24%   /* gap */
    34.02%  /* logo */
    8.55%   /* gap */
    3.94%   /* tagline */
    5.33%   /* gap */
    6.04%   /* contact */
    10.07%; /* bottom margin */
}

.content img {
  width: 100%;
  height: auto; /* each SVG's own viewBox proportions set the height */
}

.heading {
  grid-row: 2;
}

.content .logo {
  grid-row: 4;
  width: 78.63%; /* the logo artwork is narrower than the other content blocks */
  margin-left: 11%; /* and inset relative to their shared left edge */
}

.tagline {
  grid-row: 6;
}

.contact {
  grid-row: 8;
}

/* ==========================================================================
   Side bars
   Decorative full-height strips, flush with the page's own left/right edges.
   The right strip reuses the same left-facing artwork, mirrored with CSS.
   ========================================================================== */

.desktop-bar {
  grid-row: 1;
  height: auto; /* its native aspect ratio yields the full page height */
}

/* each bar's width is a percentage of its OWN grid column (a percentage
   width resolves against the item's containing block, i.e. the column,
   not the whole page) — both resolve to the artwork's native 32px at 1x */
.desktop-bar--left {
  grid-column: 1;
  width: 33.3333%; /* 32px of the 96px-wide (5.5556%) left margin column */
}

.desktop-bar--right {
  grid-column: 5;
  width: 22.5352%; /* 32px of the 142px-wide (8.2176%) right margin column */
  justify-self: end;
  transform: scaleX(-1);
}

/* ==========================================================================
   Mobile
   A distinct single-column composition (not a scaled-down desktop layout),
   designed on an 804px-wide reference. Every measurement below is in vw so
   the whole composition scales together and stays proportional across
   phone widths, with no fixed viewport-height lock (the page simply grows
   and scrolls, as on any normal mobile page).
   ========================================================================== */

@media (max-width: 767px) {
  html,
  body {
    height: auto;
  }

  .desktop-bar {
    display: none;
  }

  body {
    display: block;
    background-color: #04255f;
  }

  .page {
    width: 100%;
    min-height: 100vh; /* fills the viewport, but can still grow taller and scroll */
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: #04255f url("assets/background-mobile.png") center / cover no-repeat;
    padding: 19.65vw 0 0;
  }

  /* source order stays illustration-then-content; flex order puts the
     illustration last to match the mobile composition */
  .illustration {
    order: 2;
    display: block;
    width: 62.35vw;
    margin: 6.84vw auto 0;
  }

  .illustration img {
    width: 100%;
    height: auto; /* preserves the robot's native proportions, no stretching */
  }

  /* pinned last, with margin-top:auto acting as a sticky footer: it soaks up
     any leftover space so the bars sit flush on the viewport's bottom edge
     on short pages, and simply follow the illustration on tall ones */
  .bars {
    display: block;
    order: 3;
    width: 100%;
    height: auto;
    margin-top: auto;
  }

  .content {
    order: 1;
    display: block;
  }

  .heading {
    width: 77.74vw;
    margin: 0 auto;
  }

  .content .logo {
    display: block;
    width: 58.83vw;
    margin: 11.57vw auto 0;
  }

  .tagline {
    width: 77.86vw;
    margin: 12.06vw 0 0 10.95vw;
  }

  .contact {
    width: 78.11vw;
    margin: 5.72vw 0 0 10.95vw;
  }
}