/* Cold Vison
   Radius rule: buttons are pills, panels are 20px, form fields are 12px.
   Layers: header 10, skip link 20. Nothing else uses z-index. */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #f3f4fc;
  --surface: #fdfdff;
  --ink: #15163a;
  --muted: #474a70;
  --line: #d5d8ee;
  --brand: #3f3bc4;
  --brand-hover: #302ca3;
  --brand-ink: #ffffff;
  --link: #3530b0;
  --field-border: #6b6f99;
  --error: #b3261e;
  --focus: #15163a;
  --hero-a: #a9b6f6;
  --hero-b: #cbbdf6;
  --glass: rgb(255 255 255 / 0.42);
  --glass-line: rgb(255 255 255 / 0.7);
  --shadow: 0 24px 60px rgb(63 59 196 / 0.18);
  --todo-bg: #ffe58a;
  --todo-ink: #3a2a00;

  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body: "Geist", "Segoe UI", system-ui, sans-serif;
  --header-h: 69px;
  --radius-panel: 20px;
  --radius-field: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f22;
    --surface: #171936;
    --ink: #ecedfb;
    --muted: #b5b8da;
    --line: #33365f;
    --brand: #aeb5fc;
    --brand-hover: #c6cbff;
    --brand-ink: #0e0f22;
    --link: #b9bfff;
    --field-border: #8a8fc0;
    --error: #ffb4ab;
    --focus: #ffffff;
    --hero-a: #23265c;
    --hero-b: #3a3382;
    --glass: rgb(255 255 255 / 0.08);
    --glass-line: rgb(255 255 255 / 0.2);
    --shadow: 0 24px 60px rgb(0 0 0 / 0.45);
  }
}

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

html {
  scroll-behavior: smooth;
  /* 1px tuck: rounding must never leave a sliver of the section above. */
  scroll-padding-top: calc(var(--header-h) - 1px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

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

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 600;
}
.skip-link:focus {
  top: 1rem;
  outline-color: var(--brand);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.6rem;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-ink);
  font: 600 1rem/1.2 var(--body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.button:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.button:active {
  transform: scale(0.98);
}
.button-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.button-ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.button-small {
  min-height: 2.75rem;
  padding: 0.5rem 1.2rem;
}
.button[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span {
  font-weight: 400;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a:not(.button) {
  display: inline-block;
  padding: 0.6rem 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:not(.button):hover {
  text-decoration: underline;
}
.nav-toggle {
  display: none;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 1rem/1.2 var(--body);
  cursor: pointer;
}

@media (max-width: 767px) {
  .header-row {
    flex-wrap: wrap;
    padding-block: 0.75rem;
    gap: 0.5rem 1rem;
  }
  .site-nav {
    flex-basis: 100%;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
  }
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
  }
  .js .site-nav:not(.is-open) {
    display: none;
  }
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  max-width: 14ch;
}
.hero-lede {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: 1.2rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

/* Hero scene: decorative 3D glass windows and a turning block, after the
   reference artwork. Built with CSS 3D transforms, no images or libraries. */
.face-0 {
  --face: linear-gradient(135deg, #8ea0f5, #c9b8f6);
}
.face-1 {
  --face: linear-gradient(135deg, #f7a17c, #e5633b);
}
.face-2 {
  --face: linear-gradient(135deg, #b7a4f2, #6f6ad9);
}
.hero-scene {
  height: clamp(16rem, 30vw, 24rem);
  perspective: 900px;
}
.scene {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.5s var(--ease);
}
.pane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  aspect-ratio: 4 / 3;
  margin: -23% 0 0 -31%;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
.pane::before,
.pane img {
  content: "";
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  border-radius: 12px;
  background: var(--face);
  object-fit: cover;
}
.pane-back {
  transform: translate3d(30%, -14%, -140px) rotateY(-34deg) rotateX(6deg);
}
.pane-mid {
  transform: translate3d(2%, 2%, 0) rotateY(-30deg) rotateX(6deg);
}
.pane-front {
  transform: translate3d(-28%, 16%, 110px) rotateY(-26deg) rotateX(6deg);
}
.cube {
  --half: clamp(1.6rem, 3.2vw, 2.6rem);
  position: absolute;
  right: 12%;
  bottom: 12%;
  width: calc(var(--half) * 2);
  height: calc(var(--half) * 2);
  transform-style: preserve-3d;
  transform: translateZ(200px) rotateX(-24deg) rotateY(32deg);
}
.cube-face {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: #e5633b;
}
.cube-front {
  transform: translateZ(var(--half));
}
.cube-back {
  transform: rotateY(180deg) translateZ(var(--half));
  background: #b84a27;
}
.cube-left {
  transform: rotateY(-90deg) translateZ(var(--half));
  background: #cf5631;
}
.cube-right {
  transform: rotateY(90deg) translateZ(var(--half));
  background: #f08a66;
}
.cube-top {
  transform: rotateX(90deg) translateZ(var(--half));
  background: #f7a17c;
}
.cube-bottom {
  transform: rotateX(-90deg) translateZ(var(--half));
  background: #a8421f;
}

@media (max-width: 767px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-scene {
    height: 15rem;
  }
}

/* Portfolio deck. Without JavaScript it is a plain grid of cards. With it,
   the cards stand in 3D and the active one faces the visitor. */
.work {
  overflow: clip;
}
.deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  width: min(100% - 2.5rem, 1180px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.window {
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
.window-face {
  aspect-ratio: 16 / 10;
  background: var(--face);
}
.window-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.window-body {
  padding: 1.5rem;
}
.window-name {
  font-size: 1.4rem;
}
.window-body p {
  margin-top: 0.6rem;
}
.window-type {
  color: var(--muted);
  font-size: 0.95rem;
}
.deck-controls {
  display: none;
}
.deck-more {
  margin-top: 1.75rem;
  text-align: center;
}
.js .deck-more {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.js .deck-more.is-shown {
  visibility: visible;
  opacity: 1;
}

/* Portfolio page */
.portfolio-page {
  padding-block: clamp(3rem, 7vw, 5rem);
}
.portfolio-page h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.25rem);
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.work-item:has(.window-link) {
  cursor: pointer;
}
.work-item .window {
  transition: transform 0.3s var(--ease);
}
.work-item:hover .window {
  transform: translateY(-4px);
}
.portfolio-next {
  margin-top: 3rem;
}
.js .deck-stage {
  perspective: 1400px;
  touch-action: pan-y;
  padding-block: 1.5rem 2.5rem;
}
.js .deck {
  grid-template-columns: min(30rem, 74%);
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.5s var(--ease);
}
.js .deck-card {
  grid-area: 1 / 1;
  transform: translateX(calc(var(--pos, 0) * 64%)) translateZ(calc(var(--depth, 0) * -260px))
    rotateY(calc(var(--pos, 0) * -28deg));
  transition: transform 0.8s var(--ease), opacity 0.5s var(--ease), visibility 0.5s;
}
.js .deck-card.is-far {
  opacity: 0;
  visibility: hidden;
}
.js .deck-card:not(.is-active),
.js .deck-card:has(.window-link) {
  cursor: pointer;
}
.window-body .window-link {
  margin-top: 0.4rem;
}
.js .deck-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.deck-status {
  min-width: 9rem;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}

/* Sections */
/* Each home page section fills the screen below the header, so a jump from
   the menu lands on that section alone with no neighbour showing. */
.hero,
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 2px over, to cover the 1px tuck under the header plus rounding. */
  min-height: calc(100dvh - var(--header-h) + 2px);
}
.section {
  padding-block: clamp(4rem, 9vw, 7rem);
}
.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}
.section-head p {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.125rem;
}

/* Services */
.services {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.25rem;
}
.service {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.service h3 {
  font-size: 1.5rem;
}
.service p {
  margin-top: 0.75rem;
  color: var(--muted);
}
.service-lead {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  border: 0;
  background: linear-gradient(160deg, var(--hero-b), var(--hero-a));
}
.service-lead h3 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}
.service-lead p {
  max-width: 40ch;
  color: var(--ink);
}

@media (max-width: 767px) {
  .services {
    grid-template-columns: 1fr;
  }
  .service-lead {
    min-height: 0;
  }
}

/* Process */
.process {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding-top: 1.25rem;
  border-top: 3px solid var(--brand);
}
.steps li::before {
  content: counter(step);
  display: block;
  font: 600 2.25rem/1 var(--display);
  color: var(--brand);
  margin-bottom: 0.75rem;
}
.steps h3 {
  font-size: 1.2rem;
}
.steps p {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 1rem;
}

@media (max-width: 1023px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 559px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* Launch checks */
.checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.checks h3 {
  font-size: 1.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.checks ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
}
.checks li + li {
  margin-top: 0.6rem;
}
.checks li::marker {
  color: var(--brand);
}

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

/* Contact */
.contact {
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
}
.contact .section-head p {
  color: var(--ink);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.form-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
}
.form-note {
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.field {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}
.field label {
  font-weight: 600;
}
.field-hint {
  color: var(--muted);
  font-size: 0.95rem;
}
.field input,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--field-border);
  border-radius: var(--radius-field);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.field textarea {
  min-height: 9rem;
  resize: vertical;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
}
.field-error {
  color: var(--error);
  font-weight: 600;
  font-size: 0.95rem;
}
.check-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  align-items: start;
  margin-bottom: 1.6rem;
}
.check-field input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.15rem 0 0;
  accent-color: var(--brand);
}
.check-field .field-error {
  grid-column: 2;
}
.form-status {
  margin-top: 1.25rem;
  font-weight: 600;
}
.form-status:empty {
  display: none;
}
.form-status[data-state="error"] {
  color: var(--error);
}
.contact-details {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
}
.contact-details h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}
.contact-details address {
  font-style: normal;
}
.contact-details p + p {
  margin-top: 0.75rem;
}
.contact a {
  color: var(--ink);
}
.form-panel a {
  color: var(--link);
}

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

/* Footer */
.site-footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 1rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
}
.footer-details {
  margin-top: 1rem;
  max-width: 52ch;
  font-style: normal;
  color: var(--muted);
}
.footer-heading {
  font-size: 1.1rem;
  letter-spacing: 0;
}
.footer-links {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.footer-links a {
  display: inline-block;
  padding: 0.3rem 0;
}
.footer-base {
  margin-top: 2.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

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

/* Policy pages */
.policy {
  padding-block: clamp(3rem, 7vw, 5rem);
}
.policy-body {
  max-width: 70ch;
}
.policy h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.25rem);
}
.policy-meta {
  margin-top: 1rem;
  color: var(--muted);
}
.policy h2 {
  margin-top: 2.75rem;
  font-size: 1.6rem;
}
.policy h3 {
  margin-top: 1.75rem;
  font-size: 1.2rem;
  letter-spacing: 0;
}
.policy p,
.policy ul,
.policy ol,
.policy address {
  margin-top: 1rem;
}
.policy li + li {
  margin-top: 0.5rem;
}
.policy address {
  font-style: normal;
}
.policy-summary {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}
.policy-summary p:first-child {
  margin-top: 0;
}
.table-scroll {
  margin-top: 1.25rem;
  overflow-x: auto;
}
.policy table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 1rem;
}
.policy th,
.policy td {
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.policy caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: 0.5rem;
}

mark.todo {
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: var(--todo-bg);
  color: var(--todo-ink);
  font-weight: 600;
}

/* Cut scene: three panels swing shut over the page, name the destination,
   then swing open on it. Built by site.js when a header link is clicked. Layer 30. */
.cut {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  perspective: 1400px;
  visibility: hidden;
  pointer-events: none;
}
.cut.is-on {
  visibility: visible;
  pointer-events: auto;
}
.cut-panel {
  background: #2a2790;
  transform-origin: left center;
  transform: rotateY(90deg);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  backface-visibility: hidden;
  will-change: transform;
}
.cut-panel:nth-child(2) {
  background: #3f3bc4;
  transition-delay: 0.07s;
}
.cut-panel:nth-child(3) {
  background: #5a55d6;
  transition-delay: 0.14s;
}
.cut.is-covering .cut-panel {
  transform: none;
}
/* Exit: the panels part vertically, outer ones up and the middle one down.
   They move together, so none is left behind the others. */
.cut.is-leaving .cut-panel {
  transform: translateY(-101%);
  transition-duration: 0.6s;
  transition-delay: 0s;
}
.cut.is-leaving .cut-panel:nth-child(2) {
  transform: translateY(101%);
}
.cut:not(.is-on) .cut-panel {
  transition: none;
}
.cut-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: #ffffff;
  font: 600 clamp(2.5rem, 9vw, 6.5rem) / 1 var(--display);
  letter-spacing: -0.02em;
  text-align: center;
  opacity: 0;
  transform: translateZ(60px) translateY(16px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.cut.is-labelled .cut-label {
  opacity: 1;
  transform: translateZ(60px);
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
}
[tabindex="-1"]:focus {
  outline: none;
}

/* Motion. Page changes cross-fade, sections rise into place as they are
   reached, the glass windows float, the block turns, and cards lean towards
   the pointer. All of it switches off when the visitor asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  .site-header {
    view-transition-name: site-header;
  }
  ::view-transition-old(root) {
    animation: page-out 0.25s ease-in both;
  }
  ::view-transition-new(root) {
    animation: page-in 0.45s var(--ease) both;
  }
  @keyframes page-out {
    to {
      opacity: 0;
      transform: translateY(-10px);
    }
  }
  @keyframes page-in {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }

  .js [data-reveal] {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 0.7s var(--ease), translate 0.7s var(--ease), transform 0.4s var(--ease);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    translate: none;
  }

  .service {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }

  .pane {
    animation: float 7s ease-in-out infinite alternate;
  }
  .pane-mid {
    animation-delay: -2.3s;
  }
  .pane-front {
    animation-delay: -4.6s;
  }
  @keyframes float {
    from {
      translate: 0 -7px;
    }
    to {
      translate: 0 7px;
    }
  }
  .cube {
    animation: turn 18s linear infinite;
  }
  @keyframes turn {
    from {
      transform: translateZ(200px) rotateX(-24deg) rotateY(0deg);
    }
    to {
      transform: translateZ(200px) rotateX(-24deg) rotateY(360deg);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .button,
  .scene,
  .js .deck,
  .js .deck-card {
    transition: none;
  }
}

@media print {
  .site-header,
  .skip-link,
  .hero-actions {
    display: none;
  }
}