@font-face {
  font-family: Mulish;
  src: url('/assets/fonts/mulish-cyrillic.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Mulish;
  src: url('/assets/fonts/mulish-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #151c17;
  --night: #101411;
  --light: #f2f4ed;
  --soft: #c6d0c2;
  --sage: #d3e8c8;
  --paper: #ecede5;
  --paper-muted: #49564b;
  --paper-line: #a9b1a3;
  --gutter: clamp(1.25rem, 5.6vw, 10.5rem);
  --shell: 2880px;
  --section-space: clamp(4.6rem, 8.4vw, 12.5rem);
  font-family: Mulish, sans-serif;
  color: var(--light);
  background: var(--night);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
[hidden] { display: none !important; }
::selection { background: #b8d5ac; color: var(--ink); }
:focus-visible { outline: 2px solid #a6db8f; outline-offset: 5px; }
:is(.scenarios, .request) :focus-visible { outline-color: #2b613b; }

.shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: var(--gutter); }
.analytics-pixel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.skip { position: fixed; z-index: 5; top: 1rem; left: 1rem; padding: .75rem; background: var(--night); clip-path: inset(50%); }
.skip:focus { clip-path: none; }

.header { position: absolute; z-index: 2; inset: 0 0 auto; }
.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: clamp(4.5rem, 6.3vw, 7.6rem);
}
.header-inner::after { position: absolute; inset: auto var(--gutter) 0; height: 1px; background: #dbe5d631; content: ''; }
.wordmark { justify-self: start; width: fit-content; font: 600 clamp(1rem, 1.38vw, 1.6rem)/1 'IBM Plex Mono', monospace; letter-spacing: .105em; }
.nav { display: flex; gap: clamp(1.5rem, 3.3vw, 5rem); color: var(--soft); }
.nav a { display: flex; align-items: center; min-height: 2.75rem; }
.nav a:hover { color: var(--light); }
.header-action { justify-self: end; display: inline-flex; gap: .6rem; align-items: center; min-height: 2.75rem; white-space: nowrap; }
.header-action span { color: var(--sage); font-size: 1.08em; }
.nav, .header-action { font-size: clamp(.86rem, 1vw, 1.15rem); }
.header-action:hover { color: var(--sage); }

.hero { position: relative; isolation: isolate; overflow: hidden; background: #0c100e; }
.hero-art, .hero-shade { position: absolute; inset: 0; pointer-events: none; }
.hero-art {
  --damage-image: url('/assets/rebuild-desktop-damage.webp');
  --fragment-image: url('/assets/rebuild-desktop-before.webp');
  overflow: hidden;
  background: radial-gradient(ellipse at 74% 52%, #151d18, #0b100e 68%);
}
.hero-scene {
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  aspect-ratio: 1938 / 812;
  transform: translateY(-50%);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
}
.hero-picture, .hero-damage, .hero-piece { position: absolute; inset: 0; }
.hero-picture img { display: block; width: 100%; height: 100%; }
.hero-damage, .hero-piece { display: none; }
.hero-shade {
  background:
    linear-gradient(90deg, #0b100eed 1%, #0b100ec8 20%, #0b100e60 45%, transparent 68%),
    linear-gradient(180deg, #090d0b79, transparent 22%, transparent 69%, #0b100ee3 100%);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 5.15rem;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(7.25rem, 10vw, 14rem) clamp(1.5rem, 4.1vw, 5.25rem);
}
.hero-copy { width: max-content; max-width: 100%; padding-bottom: clamp(1.2rem, 4.8vh, 5rem); }
.hero h1 {
  font-size: clamp(3.6rem, 7.35vw, 10.5rem);
  font-weight: 440;
  line-height: .99;
  letter-spacing: -.055em;
}
.hero h1 span { display: block; color: var(--sage); }
.hero-description {
  max-width: 29ch;
  margin-top: clamp(1.1rem, 2.3vw, 2.6rem);
  color: var(--soft);
  font-size: clamp(1.05rem, 1.68vw, 1.95rem);
  line-height: 1.44;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.1vw, 2.45rem);
  min-height: clamp(3.2rem, 4vw, 4.65rem);
  max-width: 100%;
  padding: .8rem clamp(1rem, 1.45vw, 1.85rem);
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--sage);
  color: #19271b;
  font-size: clamp(.9rem, 1.02vw, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.button > span[aria-hidden] { flex: none; font-size: 1.3em; line-height: 1; }
.hero .button { margin-top: clamp(1.4rem, 2.65vw, 3.65rem); }
.hero .button:hover { background: #e4f5dd; }
.hero-scroll {
  display: inline-flex;
  align-items: center;
  align-self: end;
  justify-self: start;
  gap: .7rem;
  min-height: 2.75rem;
  color: var(--soft);
  font-size: clamp(.8rem, 1vw, 1.12rem);
}
.hero-scroll span:last-child { color: var(--sage); font-size: 1.3em; line-height: 1; }
.hero-scroll:hover { color: var(--light); }

.section { padding-block: var(--section-space); }
.section-title {
  font-size: clamp(2.6rem, 5.1vw, 8rem);
  font-weight: 460;
  line-height: 1;
  letter-spacing: -.052em;
  text-wrap: balance;
  scroll-margin-top: 2rem;
}
.section-intro p, .request-copy p {
  max-width: 32ch;
  margin-top: clamp(1rem, 2vw, 2rem);
  color: var(--paper-muted);
  font-size: clamp(1rem, 1.27vw, 1.45rem);
  line-height: 1.55;
}

.scenarios { color-scheme: light; background: var(--paper); color: var(--ink); }
.scenario-layout, .request-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: start;
  gap: clamp(2rem, 7.6vw, 11rem);
}
.incident-list { border-bottom: 1px solid var(--paper-line); }
.incident { border-top: 1px solid var(--paper-line); }
.incident summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: clamp(4.65rem, 6.5vw, 8.3rem);
  padding: .7rem 0;
  list-style: none;
  font-size: clamp(1.22rem, 2.1vw, 2.8rem);
  font-weight: 550;
  line-height: 1.18;
  letter-spacing: -.032em;
  cursor: pointer;
}
.incident summary::-webkit-details-marker { display: none; }
.incident summary:hover { color: #3a6946; }
.incident-icon {
  position: relative;
  flex: none;
  width: clamp(2.5rem, 3.25vw, 4rem);
  aspect-ratio: 1;
  border: 1px solid var(--paper-line);
  border-radius: 50%;
  color: #284731;
  transition: background-color .25s, border-color .25s;
}
.incident-icon::before, .incident-icon::after { position: absolute; inset: 50% auto auto 50%; width: .78rem; height: 1px; background: currentColor; transform: translate(-50%, -50%); content: ''; }
.incident-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s; }
.incident[open] .incident-icon { border-color: #c5d5be; background: #d6e4cf; }
.incident[open] .incident-icon::after { transform: translate(-50%, -50%) rotate(0); }
.incident-body { padding: 0 clamp(2.4rem, 5vw, 7rem) clamp(1.3rem, 2.4vw, 3rem) 0; }
.incident-body p { max-width: 44ch; color: var(--paper-muted); font-size: clamp(.98rem, 1.24vw, 1.46rem); line-height: 1.55; }
.inline-action { display: inline-flex; align-items: center; gap: .58rem; min-height: 2.75rem; margin-top: .42rem; color: #244b30; font-weight: 720; }
.inline-action:hover { text-decoration: underline; text-underline-offset: .28em; }

.process { background: #151b17; }
.process-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(2.5rem, 6.7vw, 10rem); }
.process-visual { aspect-ratio: 1.13; overflow: hidden; background: #222b25; }
.process-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.process .section-title { text-wrap: wrap; }
.steps { list-style: none; margin: clamp(1.55rem, 3.4vw, 3.75rem) 0 0; padding: 0; border-top: 1px solid #d9e5d442; counter-reset: steps; }
.steps li { position: relative; padding: clamp(.95rem, 1.45vw, 1.8rem) 0 clamp(.95rem, 1.45vw, 1.8rem) 3.05rem; border-bottom: 1px solid #d9e5d442; counter-increment: steps; }
.steps li::before { position: absolute; top: 1.16em; left: 0; color: #b4d0ad; font: 600 .95rem/1.4 'IBM Plex Mono', monospace; content: counter(steps, decimal-leading-zero); }
.steps h3 { font-size: clamp(1.05rem, 1.53vw, 1.95rem); font-weight: 630; line-height: 1.22; letter-spacing: -.015em; }
.steps p { max-width: 42ch; margin-top: .38rem; color: var(--soft); font-size: clamp(.93rem, 1.1vw, 1.24rem); line-height: 1.52; }

.request { color-scheme: light; background: #dce8d6; color: var(--ink); }
.request .section-title { text-wrap: wrap; }
.request-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.request-copy p { max-width: 34ch; }
.lead-form { --form-gap: clamp(.9rem, 1.3vw, 1.5rem); display: grid; gap: var(--form-gap); }
.field { display: grid; gap: .48rem; }
.field label { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: clamp(.9rem, 1vw, 1.13rem); font-weight: 680; }
.field label span { color: var(--paper-muted); font-size: .76em; font-weight: 500; }
.field input, .field textarea {
  width: 100%;
  min-width: 0;
  padding: .8rem 1rem;
  border: 1px solid #96a793;
  border-radius: 2px;
  background: #f3f6ef;
  color: var(--ink);
  font-size: clamp(1rem, 1.05vw, 1.18rem);
}
.field input { min-height: clamp(3.05rem, 3.65vw, 4.2rem); }
.field textarea { min-height: 5rem; resize: vertical; }
.field :is(input, textarea)::placeholder { color: #576456; opacity: 1; }
.field :is(input, textarea):focus-visible { outline-offset: 1px; }
.field [aria-invalid='true'] { border-color: #982d21; }
.field-error, .form-status, .noscript { font-size: .9rem; line-height: 1.45; }
.field-error, .form-status[data-state='error'] { color: #982d21; }
.form-status { color: #23512e; }
.form-status:empty { margin-top: calc(-1 * var(--form-gap)); }
.submit { background: #233829; color: #f3f7f0; }
.submit:hover:not(:disabled) { background: #35523c; }
.submit:disabled { opacity: .68; cursor: default; }
.request-contacts { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #9eaf99; }
.request-contacts p { margin-bottom: .48rem; color: var(--paper-muted); font-size: .85rem; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.3rem; font-size: clamp(.88rem, .99vw, 1.12rem); font-style: normal; }
.contact-links a { color: var(--sage); white-space: nowrap; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.request .contact-links a { color: #2a5634; }
.contact-links a:hover { text-decoration-thickness: 2px; }

.footer { background: var(--night); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; padding-block: clamp(1.65rem, 2.65vw, 3.25rem); }
.footer-inner > span { color: var(--soft); font-size: clamp(.8rem, .98vw, 1.1rem); }

@media (prefers-reduced-motion: no-preference) {
  .hero-scene { --hero-loop: 9.6s; }
  .hero-damage, .hero-piece {
    display: block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    animation-duration: var(--hero-loop);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.38, .12, .3, 1);
  }
  .hero-damage { background-image: var(--damage-image); animation-name: show-damage; }
  .hero-piece { background-image: var(--fragment-image); animation-name: assemble-piece; }
  .hero-piece-top {
    --piece-x: -7.2%;
    --piece-y: 10.3%;
    clip-path: polygon(79.2% 17.5%, 81.8% 16.2%, 83% 12.5%, 85.6% 9.9%, 96.2% 15%, 96.3% 16%, 95.9% 32.5%, 79.2% 20.7%);
  }
  .hero-piece-middle {
    --piece-x: -6%;
    --piece-y: 5.1%;
    clip-path: polygon(80.9% 33.9%, 82.3% 31.9%, 92.5% 36.5%, 92.7% 37.6%, 92.5% 43%, 80.9% 38.8%);
    animation-delay: -.13s;
  }
  .hero-piece-bottom { display: none; }
  @keyframes show-damage {
    0%, 23%, 71%, 100% { opacity: 0; }
    38%, 55% { opacity: 1; }
  }
  @keyframes assemble-piece {
    0%, 24%, 71%, 100% { transform: translate(var(--piece-x), var(--piece-y)); opacity: 0; }
    39%, 54% { transform: translate(0, 0); opacity: 1; }
    66% { transform: translate(var(--piece-x), var(--piece-y)); opacity: .88; }
  }
  .steps[data-motion] li::before { color: #9aa99a; transition: color .35s; }
  .steps[data-motion] li::after { position: absolute; inset: auto 0 -1px; height: 1px; background: #b4d0ad80; transform: scaleX(0); transform-origin: left; transition: transform .62s ease-out; content: ''; }
  .steps[data-motion] li.is-active::before { color: #d3edc9; }
  .steps[data-motion] li.is-active::after { transform: scaleX(1); }
}

@media (min-width: 1880px) {
  .hero-shade { background: linear-gradient(90deg, #0b100ede, #0b100e7a 41%, transparent 65%), linear-gradient(180deg, #090d0b79, transparent 24%, transparent 70%, #0b100ee3); }
  .steps li { padding-inline-start: clamp(3rem, 3.3vw, 5rem); }
  .steps li::before { top: 1.35em; font-size: clamp(.95rem, 1vw, 1.3rem); }
}

@media (min-aspect-ratio: 29/10) {
  .hero-scene { width: min(100%, 288svh); }
}

@media (max-width: 900px) {
  .header-inner { min-height: 4.45rem; grid-template-columns: 1fr auto; gap: .75rem; }
  .nav { display: none; }
  .scenario-layout, .process-grid, .request-grid { gap: 2rem; }
}

@media (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .hero-inner { grid-template-rows: auto 1fr; align-items: start; padding-block: clamp(6.35rem, 13svh, 10rem) 1.45rem; }
  .hero-copy { padding-bottom: 1.5rem; }
  .hero h1 { font-size: clamp(2.7rem, 12.4vw, 6rem); letter-spacing: -.054em; }
  .hero-description { max-width: 27ch; }
  .hero-art {
    --damage-image: url('/assets/rebuild-mobile-damage.webp');
    --fragment-image: url('/assets/rebuild-mobile-before.webp');
  }
  .hero-scene {
    top: 68%;
    right: auto;
    left: 50%;
    aspect-ratio: 992 / 1586;
    transform: translate(-50%, -68%);
    mask-image: none;
  }
  .hero-shade { background: linear-gradient(180deg, #0b100e82, #0b100e31 45%, transparent 66%, #0b100eea 100%); }
}

@media (max-width: 900px) and (max-aspect-ratio: 5/8) {
  .hero-scene { width: auto; height: 100%; }
}

@media (max-width: 600px) and (max-aspect-ratio: 1/2) {
  .hero-scene {
    top: auto;
    bottom: 5.25rem;
    width: 100%;
    height: auto;
    transform: translateX(-50%);
    mask-image: linear-gradient(180deg, transparent, #000 15%, #000 87%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .hero-piece-top {
    --piece-x: -13%;
    --piece-y: 6.7%;
    clip-path: polygon(69.4% 46.4%, 72.6% 46.1%, 89.4% 50.6%, 94.8% 59.1%, 92.1% 60.6%, 68.9% 50.1%);
  }
  .hero-piece-middle {
    --piece-x: -10%;
    --piece-y: 4.3%;
    clip-path: polygon(80.8% 64%, 85% 61%, 89% 60.8%, 93.6% 66.4%, 91.4% 68.5%, 83% 65.9%);
  }
  .hero-piece-bottom {
    display: block;
    --piece-x: -6%;
    --piece-y: 2.8%;
    clip-path: polygon(82.7% 69.5%, 85.3% 68%, 89.7% 70%, 90.7% 72.3%, 89.2% 72.8%, 82.7% 70.1%);
    animation-delay: -.26s;
  }
}

@media (max-width: 640px) {
  .header-action { gap: .35rem; font-size: .84rem; }
  .hero-scroll { justify-content: center; width: 2.75rem; border: 1px solid #c3d4c37a; border-radius: 50%; }
  .scroll-label { display: none; }
  .scenario-layout, .process-grid, .request-grid { grid-template-columns: minmax(0, 1fr); }
  .process-visual { grid-row: 2; aspect-ratio: 1.28; }
  .section-title { text-wrap: wrap; }
  .footer-inner { column-gap: 1rem; }
}

@media (max-width: 640px) and (max-height: 700px) and (max-aspect-ratio: 1/1) {
  .hero-inner { padding-top: 5.75rem; }
  .hero-description { margin-top: .8rem; }
  .hero .button { margin-top: 1.1rem; }
}

@media (max-width: 900px) and (min-aspect-ratio: 1/1) and (max-height: 580px) {
  .hero-inner { padding-top: 5.75rem; }
  .hero h1 { font-size: clamp(2.75rem, 6.9vw, 4.25rem); }
  .hero-description { margin-top: .7rem; }
  .hero .button { margin-top: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; }
}