/* ==========================================================================
   HoloDevs · Dobra 11
   Sizes are expressed in design pixels × var(--u), so each breakpoint scales
   its Figma frame fluidly (mobile 393 · tablet 822 · desktop 1600 base).
   ========================================================================== */

:root {
  --orange: #fa7631;
  --red: #e53f40;
  --blue: #2871a8;
  --ink: #221d19;
  --cream: #f3e8c3;
  --mist: #d7dcd9;
  --paper: #ffffff;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

::selection { background: var(--orange); color: var(--cream); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Page scaffold
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  min-height: 100vh;
  container-type: inline-size;
  overflow: hidden;
}

.grid {
  /* mobile frame: 393px wide */
  --u: min(calc(100cqw / 393), 1.3px);
  --r: calc(25 * var(--u));
  --gap: calc(15 * var(--u));
  --bracket: calc(9.7 * var(--u));

  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "hero"
    "label"
    "services"
    "dots"
    "sobre"
    "logo"
    "contact";
  gap: var(--gap);
  width: calc(393 * var(--u));
  margin-inline: auto;
  padding: calc(20 * var(--u)) calc(19 * var(--u)) calc(44 * var(--u)) calc(21 * var(--u));
}

.card { position: relative; border-radius: var(--r); }

/* Racing stripes along the left edge */
.rails {
  --u: min(calc(100cqw / 393), 1.3px);
  --w: calc(9 * var(--u));
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--w) * 5);
  background: linear-gradient(90deg,
    var(--ink) 0 20%, var(--cream) 0 40%, var(--orange) 0 60%, var(--red) 0 80%, var(--blue) 0);
}
.rails__flare { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  grid-area: hero;
  min-height: calc(371 * var(--u));
  background: var(--orange);
  color: var(--cream);
  padding: calc(34 * var(--u)) calc(27 * var(--u));
  isolation: isolate;
}

.hero__art {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: -1;
}

.hero__stripes {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(325 * var(--u));
  max-width: none;
}

.hero__satellite {
  position: absolute;
  left: calc(213 * var(--u));
  top: calc(184 * var(--u));
  width: calc(127 * var(--u));
  max-width: none;
  transform-origin: 18% 22%;
}

.hero__title {
  position: relative;
  max-width: calc(300 * var(--u));
  font-weight: 800;
  font-size: calc(26 * var(--u));
  line-height: 1.38;
  letter-spacing: -0.011em;
  text-wrap: pretty;
}
.hero__title .line { display: block; }

/* --------------------------------------------------------------------------
   Section label (SERVIÇOS)
   -------------------------------------------------------------------------- */

.label {
  grid-area: label;
  display: grid;
  place-items: center;
  min-height: calc(93 * var(--u));
  background: var(--ink);
}

.label__text {
  color: var(--orange);
  font-weight: 900;
  font-size: calc(45 * var(--u));
  line-height: 1;
  letter-spacing: -0.011em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Services: accordion of stacked "folders", one is always open
   -------------------------------------------------------------------------- */

.services { grid-area: services; }

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

.acc__item {
  --text: var(--cream);
  --overlap: calc(17 * var(--u));
  --acc-speed: .7s;
  position: relative;
  display: flex;
  /* overlap the previous folder, like a stack of index cards */
  margin: calc(var(--overlap) * -1) 0 0 var(--bracket);
  transition: transform .5s var(--ease-out);
}
.acc__item:first-child { margin-top: var(--bracket); --text: var(--mist); }

/* light-grey L bracket hugging the top-left corner of every folder */
.acc__item::before {
  content: "";
  position: absolute;
  left: calc(var(--bracket) * -1);
  top: calc(var(--bracket) * -1);
  width: calc(116 * var(--u));
  height: calc(37 * var(--u));
  border: var(--bracket) solid var(--mist);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: calc(var(--r) + var(--bracket));
  pointer-events: none;
  transition: height var(--acc-speed) var(--ease-out), width var(--acc-speed) var(--ease-out);
}
.acc__item.is-open::before { height: calc(170 * var(--u)); }

/* little connector "pins" in the accent colour of the next folder */
.pins {
  position: absolute;
  z-index: 2;
  left: calc(114 * var(--u));
  top: calc(-11 * var(--u));
  width: calc(65 * var(--u));
  height: calc(11 * var(--u));
  background: linear-gradient(90deg, var(--accent) 0 63%, transparent 0 77%, var(--mist) 0);
  border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0;
  pointer-events: none;
}
.pins::before,
.pins::after {
  content: "";
  position: absolute;
  left: calc(-125 * var(--u));
  width: calc(11 * var(--u));
  height: calc(13 * var(--u));
  background: var(--accent);
  border-radius: calc(2 * var(--u)) 0 0 calc(2 * var(--u));
  transition: top var(--acc-speed) var(--ease-out), left var(--acc-speed) var(--ease-out);
}
.pins::before { top: calc(48 * var(--u)); }
.pins::after  { top: calc(67 * var(--u)); }
.is-open .pins::before { top: calc(183 * var(--u)); }
.is-open .pins::after  { top: calc(202 * var(--u)); }

.face {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--r);
}

.acc__face {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.acc__heading { font: inherit; }

.acc__trigger {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(114 * var(--u));
  padding: calc(18 * var(--u)) calc(30 * var(--u)) calc(18 * var(--u) + var(--overlap));
  text-align: left;
  color: var(--mist);
  font-weight: 800;
  font-size: calc(30 * var(--u));
  line-height: 1.15;
  letter-spacing: -0.011em;
  transition:
    min-height var(--acc-speed) var(--ease-out),
    padding var(--acc-speed) var(--ease-out),
    color .35s ease;
}
.acc__item:last-child .acc__trigger { padding-bottom: calc(18 * var(--u)); }
.is-open .acc__trigger,
.acc__item.is-open:last-child .acc__trigger {
  min-height: calc(60 * var(--u));
  padding-top: calc(32 * var(--u));
  padding-bottom: calc(10 * var(--u));
  color: var(--title);
  cursor: default;
}
.acc__trigger:focus-visible { outline-color: var(--cream); outline-offset: -6px; border-radius: var(--r); }

.acc__tab { display: none; }

/* height animates through a 0fr -> 1fr grid track */
.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-speed) var(--ease-out);
}
.is-open .acc__body { grid-template-rows: 1fr; }
.acc__clip { min-height: 0; overflow: hidden; }

.acc__inner {
  padding: 0 calc(30 * var(--u)) calc(44 * var(--u));
  opacity: 0;
  transform: translate3d(0, calc(10 * var(--u)), 0);
  transition: opacity .3s ease, transform .5s var(--ease-out);
}
.is-open .acc__inner {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .2s, transform .7s var(--ease-out) .15s;
}
.acc__item:not(:last-child) .acc__inner { padding-bottom: calc(44 * var(--u) + var(--overlap)); }

.panel__lead,
.panel__list,
.panel__close {
  font-size: max(13px, calc(18 * var(--u)));
  line-height: 1.4;
  letter-spacing: -0.011em;
}
.panel__lead { font-weight: 500; }

.panel__list {
  list-style: none;
  padding: 0;
  margin: 1.4em 0;
  display: grid;
  gap: 1.4em;
  font-weight: 500;
}
.panel__list li {
  position: relative;
  padding-left: 1.05em;
}
.panel__list li::before {
  content: "\2022";
  position: absolute;
  left: .3em;
}

.panel__close { font-weight: 700; }

@media (hover: hover) {
  .acc__item:not(.is-open):hover { transform: translateX(calc(8 * var(--u))); }
  .acc__item:not(.is-open):hover .acc__trigger { color: var(--cream); }
}

/* --------------------------------------------------------------------------
   Dots matrix
   -------------------------------------------------------------------------- */

.dots {
  grid-area: dots;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(4 * var(--u));
  min-height: calc(394 * var(--u));
  background: var(--cream);
}

.dots__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(64 * var(--u));
}
.dots__col img { width: 100%; }

.dots__col i {
  display: block;
  border-radius: 50%;
  background: var(--c);
}
.dots__col i:nth-of-type(1) { width: calc(48 * var(--u)); height: calc(48 * var(--u)); margin-top: calc(4 * var(--u)); }
.dots__col i:nth-of-type(2) { width: calc(41 * var(--u)); height: calc(41 * var(--u)); margin-top: calc(13 * var(--u)); }
.dots__col i:nth-of-type(3) { width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin-top: calc(15 * var(--u)); }
.dots__col i:nth-of-type(4) { width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(18 * var(--u)); }
.dots__col:nth-child(1) { --c: var(--ink); }
.dots__col:nth-child(2) { --c: var(--orange); }
.dots__col:nth-child(3) { --c: var(--red); }
.dots__col:nth-child(4) { --c: var(--blue); }

/* --------------------------------------------------------------------------
   Sobre — red card framed by the blue tab shape
   -------------------------------------------------------------------------- */

.sobre {
  grid-area: sobre;
  position: relative;
  isolation: isolate;
  margin-right: calc(-4 * var(--u));
  padding: 0 calc(26 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u));
  color: var(--mist);
}

/* the red card sits behind the blue frame */
.sobre::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: calc(13 * var(--u));
  right: 0;
  bottom: calc(9 * var(--u));
  left: calc(24 * var(--u));
  background: var(--red);
  border-radius: var(--r);
}

.sobre__frame {
  position: absolute;
  z-index: -1;
  inset: 0 calc(28 * var(--u)) 0 0;
  pointer-events: none;
}
.sobre__frame > span { position: absolute; display: block; background: var(--blue); }

.sobre__band {
  top: 0; left: 0; right: 0;
  height: calc(92 * var(--u));
  border-radius: calc(45 * var(--u)) calc(23 * var(--u)) calc(23 * var(--u)) 0;
}
.sobre__strip {
  top: calc(40 * var(--u)); bottom: calc(20 * var(--u)); left: 0;
  width: calc(30 * var(--u));
}
.sobre__tab {
  bottom: 0; left: 0;
  width: calc(194 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 0 calc(15 * var(--u)) calc(23 * var(--u)) calc(39 * var(--u));
}
.sobre__frame > .sobre__fillet { background: none; left: calc(30 * var(--u)); }
.sobre__fillet--top {
  top: calc(92 * var(--u));
  width: calc(38 * var(--u)); height: calc(38 * var(--u));
  background: radial-gradient(circle at 100% 100%, transparent calc(38 * var(--u)), var(--blue) calc(38 * var(--u) + .5px)) !important;
}
.sobre__fillet--bottom {
  bottom: calc(30 * var(--u));
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  background: radial-gradient(circle at 100% 0, transparent calc(30 * var(--u)), var(--blue) calc(30 * var(--u) + .5px)) !important;
}

.sobre__title {
  display: flex;
  align-items: center;
  height: calc(92 * var(--u));
  margin-bottom: calc(22 * var(--u));
  color: var(--cream);
  font-weight: 900;
  font-size: calc(45 * var(--u));
  line-height: 1;
  letter-spacing: -0.011em;
  text-transform: uppercase;
}

.sobre__body {
  display: grid;
  gap: 1.5em;
  font-weight: 800;
  font-size: max(13px, calc(16 * var(--u)));
  line-height: 1.5;
  letter-spacing: -0.011em;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.logo {
  grid-area: logo;
  display: grid;
  place-items: center;
  background: var(--cream);
  overflow: hidden;
}
.logo img { width: 100%; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--u));
  min-height: calc(238 * var(--u));
  padding: calc(28 * var(--u)) calc(14 * var(--u));
  background: var(--red);
}

.contact__slogan {
  color: var(--cream);
  font-weight: 800;
  font-style: italic;
  font-size: calc(23 * var(--u));
  line-height: 1.5;
  letter-spacing: -0.011em;
}

.contact__bar {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: calc(320 * var(--u));
  height: calc(105 * var(--u));
  background: var(--blue);
  border-radius: var(--r);
}

.contact__icon {
  display: block;
  width: calc(45 * var(--u));
  border-radius: 50%;
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-out);
}
.contact__icon img { width: 100%; }
@media (hover: hover) {
  .contact__icon:hover { transform: translateY(calc(-4 * var(--u))) scale(1.08); box-shadow: 0 calc(8 * var(--u)) calc(16 * var(--u)) rgb(34 29 25 / .28); }
}
.contact__icon:focus-visible { outline-color: var(--cream); outline-offset: 3px; border-radius: 50%; }

/* ==========================================================================
   Tablet — 822px frame, two columns
   ========================================================================== */

@media (min-width: 700px) {
  .grid {
    --u: min(calc(100cqw / 822), 1.2px);
    --gap: calc(23 * var(--u));
    grid-template-columns: minmax(0, 351fr) minmax(0, 382fr);
    grid-template-areas:
      "hero    hero"
      "label   services"
      "dots    services"
      "sobre   services"
      "sobre   logo"
      "contact contact";
    grid-template-rows: auto auto auto auto 1fr auto;
    column-gap: calc(24 * var(--u));
    width: calc(822 * var(--u));
    padding: calc(27 * var(--u)) calc(27 * var(--u)) calc(52 * var(--u)) calc(38 * var(--u));
  }

  .rails { --u: min(calc(100cqw / 822), 1.2px); --w: calc(16 * var(--u)); }

  .hero { padding: calc(50 * var(--u)) calc(49 * var(--u)); }
  .hero__stripes { width: calc(494 * var(--u)); }
  .hero__satellite { left: calc(507 * var(--u)); top: calc(199 * var(--u)); width: calc(254 * var(--u)); }
  .hero__title { max-width: calc(598 * var(--u)); font-size: calc(33 * var(--u)); }

  .label { min-height: calc(143 * var(--u)); }

  .services { align-self: start; }
  .acc__item { --overlap: calc(18 * var(--u)); margin-left: 0; }
  .acc__item:first-child { margin-top: 0; }
  .acc__trigger {
    font-size: calc(33 * var(--u));
    min-height: calc(121 * var(--u));
    padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u) + var(--overlap)) calc(43 * var(--u));
  }
  .acc__item:last-child .acc__trigger { padding-bottom: calc(20 * var(--u)); }
  .is-open .acc__trigger,
  .acc__item.is-open:last-child .acc__trigger { min-height: calc(64 * var(--u)); padding-top: calc(28 * var(--u)); padding-bottom: calc(10 * var(--u)); }
  .acc__inner { padding: 0 calc(30 * var(--u)) calc(40 * var(--u)) calc(43 * var(--u)); }
  .acc__item:not(:last-child) .acc__inner { padding-bottom: calc(40 * var(--u) + var(--overlap)); }

  .dots { min-height: calc(394 * var(--u)); }

  .sobre { align-self: stretch; }

  .logo { align-self: stretch; min-height: calc(368 * var(--u)); margin-top: calc(26 * var(--u)); }

  .contact {
    flex-direction: row;
    justify-content: space-between;
    min-height: calc(168 * var(--u));
    margin-left: calc(6 * var(--u));
    padding: 0 calc(30 * var(--u)) 0 calc(48 * var(--u));
  }
  .contact__slogan { font-size: calc(20 * var(--u)); }
  .contact__bar { width: calc(408 * var(--u)); }
  .contact__icon { width: calc(53 * var(--u)); }
}

/* ==========================================================================
   Desktop — landscape composition
   ========================================================================== */

@media (min-width: 1280px) {
  .grid {
    /* fit the whole composition on screen: scale by width or height,
       whichever is tighter (never below .62 so text stays legible) */
    --u: min(calc(100cqw / 1600), max(calc(100svh / 1206), .62px), 1.12px);
    --gap: calc(24 * var(--u));
    grid-template-columns: minmax(0, 351fr) minmax(0, 351fr) minmax(0, 748fr);
    grid-template-areas:
      "sobre hero    hero"
      "sobre label   services"
      "sobre dots    services"
      "logo  dots    services"
      "logo  contact contact";
    grid-template-rows:
      minmax(calc(371 * var(--u)), auto)
      minmax(calc(143 * var(--u)), auto)
      minmax(calc(188 * var(--u)), auto)
      minmax(calc(176 * var(--u)), auto)
      minmax(calc(168 * var(--u)), auto);
    column-gap: calc(25 * var(--u));
    width: calc(1600 * var(--u));
    padding: calc(28 * var(--u)) calc(60 * var(--u));
  }

  .page { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; }

  .rails {
    --u: min(calc(100cqw / 1600), max(calc(100svh / 1206), .62px), 1.12px);
    width: calc(448 * var(--u));
    background: none;
  }
  .rails__flare { display: block; width: 100%; height: 100%; overflow: visible; }
  /* the JS timeline drives the desktop rails (drop + fan); hide until it has set frame 0 */
  html.js .rails { animation: none; }
  .js .rails__flare { visibility: hidden; }
  .js .rails__flare.is-ready { visibility: visible; }

  .hero { min-height: calc(371 * var(--u)); padding: calc(51 * var(--u)) calc(52 * var(--u)); }
  .hero__stripes { width: calc(767 * var(--u)); }
  .hero__satellite { left: calc(815 * var(--u)); top: calc(148 * var(--u)); width: calc(324 * var(--u)); }
  .hero__title { max-width: calc(980 * var(--u)); }

  .label { min-height: calc(143 * var(--u)); }

  .services { align-self: stretch; }

  /* folders sit side by side; the open one grows, the rest show a spine */
  .acc { flex-direction: row; height: 100%; }
  .acc__item,
  .acc__item:first-child {
    --overlap: calc(12 * var(--u));
    flex: 0 0 calc(105 * var(--u));
    margin: 0 0 var(--bracket) calc(var(--overlap) * -1);
    transition: flex-grow var(--acc-speed) var(--ease-out), flex-basis var(--acc-speed) var(--ease-out), transform .5s var(--ease-out);
  }
  .acc__item:first-child { margin-left: var(--bracket); }
  .acc__item.is-open { flex: 1 1 0; }

  /* bracket flips to the bottom-left corner */
  .acc__item::before {
    top: auto;
    bottom: calc(var(--bracket) * -1);
    width: calc(37 * var(--u));
    height: calc(116 * var(--u));
    border-top: 0;
    border-bottom: var(--bracket) solid var(--mist);
    border-radius: 0 0 0 calc(var(--r) + var(--bracket));
  }
  .acc__item.is-open::before { width: calc(170 * var(--u)); height: calc(116 * var(--u)); }

  .pins {
    top: auto;
    left: calc(-11 * var(--u));
    bottom: calc(114 * var(--u));
    width: calc(11 * var(--u));
    height: calc(65 * var(--u));
    background: linear-gradient(0deg, var(--accent) 0 63%, transparent 0 77%, var(--mist) 0);
    border-radius: calc(2 * var(--u)) 0 0 calc(2 * var(--u));
  }
  .pins::before, .pins::after,
  .is-open .pins::before, .is-open .pins::after {
    top: auto;
    bottom: calc(-125 * var(--u));
    width: calc(13 * var(--u));
    height: calc(11 * var(--u));
    border-radius: 0 0 calc(2 * var(--u)) calc(2 * var(--u));
  }
  .pins::before { left: calc(48 * var(--u)); }
  .pins::after  { left: calc(67 * var(--u)); }
  .is-open .pins::before { left: calc(183 * var(--u)); }
  .is-open .pins::after  { left: calc(202 * var(--u)); }

  /* collapsed: the whole spine is the button, label reads bottom-to-top */
  .acc__trigger,
  .acc__item:last-child .acc__trigger {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
    padding: calc(24 * var(--u)) var(--overlap) calc(24 * var(--u)) 0;
    align-items: flex-end;
    justify-content: center;
  }
  .acc__title { position: absolute; opacity: 0; white-space: nowrap; }
  .acc__tab {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    transition: opacity .3s ease .3s;
  }

  .is-open .acc__trigger,
  .acc__item.is-open:last-child .acc__trigger {
    position: relative;
    inset: auto;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    padding: calc(28 * var(--u)) calc(30 * var(--u) + var(--overlap)) calc(14 * var(--u)) calc(43 * var(--u));
    font-size: calc(33 * var(--u));
  }
  .is-open .acc__title { position: static; opacity: 1; transition: opacity .4s ease .3s; }
  .is-open .acc__tab { position: absolute; opacity: 0; transition: opacity .15s ease; }

  /* width animates instead of height: keep the copy at a fixed measure */
  .acc__body, .is-open .acc__body { grid-template-rows: 1fr; flex: 1; }
  .acc__inner,
  .acc__item:not(:last-child) .acc__inner {
    width: calc(340 * var(--u));
    padding: 0 0 calc(30 * var(--u)) calc(43 * var(--u));
    box-sizing: content-box;
  }
  .panel__lead, .panel__list, .panel__close { font-size: calc(18 * var(--u)); }
  .panel__list { margin: 1em 0; gap: 1em; }

  @media (hover: hover) {
    .acc__item:not(.is-open):hover { transform: translateY(calc(-10 * var(--u))); }
  }

  .dots { min-height: calc(394 * var(--u)); }

  .sobre { align-self: stretch; margin-top: calc(-12 * var(--u)); }
  .sobre__body { font-size: calc(16 * var(--u)); }
  .sobre { padding-bottom: calc(36 * var(--u)); }
  .sobre__title { margin-bottom: calc(14 * var(--u)); }

  .logo { align-self: stretch; aspect-ratio: auto; margin-top: 0; }

  .contact { min-height: calc(168 * var(--u)); margin-left: 0; padding: 0 calc(30 * var(--u)) 0 calc(55 * var(--u)); }
  .contact__slogan { font-size: calc(33 * var(--u)); }
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(calc(-6 * var(--u)), calc(-10 * var(--u)), 0) rotate(-2.5deg); }
}

/* the stripes unroll from the top like a banner hanging on a wall */
@keyframes rails-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Continuous cascade for the dots: each dot breathes in and out, offset per
   dot so a soft diagonal wave keeps rolling through the matrix. */
@keyframes dot-cascade {
  0%        { scale: 1; }
  30%       { scale: .6; }
  60%, 100% { scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.985);
    transition: opacity .7s var(--ease-out), transform 1s var(--ease-out);
    transition-delay: var(--delay, 0ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js .rails { animation: rails-in 1.3s cubic-bezier(.65, 0, .35, 1) both; }

  .js .hero__stripes {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s var(--ease-out) .35s;
  }
  .js .hero.is-in .hero__stripes { clip-path: inset(0 0 0 0); }

  .js .hero__satellite {
    opacity: 0;
    translate: 40px -40px;
    transition: opacity 1s var(--ease-out) .6s, translate 1.4s var(--ease-out) .6s;
  }
  .js .hero.is-in .hero__satellite {
    opacity: 1;
    translate: 0 0;
    animation: float 7s ease-in-out 2s infinite;
  }

  .js .hero__title .line {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  }
  .js .hero.is-in .hero__title .line { opacity: 1; transform: none; }
  .js .hero.is-in .hero__title .line:nth-child(1) { transition-delay: .25s; }
  .js .hero.is-in .hero__title .line:nth-child(2) { transition-delay: .4s; }

  .js .dots__col > * {
    transform: scale(0);
    transition: transform .7s var(--ease-spring);
  }
  .js .dots.is-in .dots__col > * {
    transform: scale(1);
    animation: dot-cascade var(--cycle, 3.6s) cubic-bezier(.45, 0, .55, 1) var(--loop, 1.6s) infinite;
  }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}