/* =========================================================
   Design tokens
   ========================================================= */

:root {
  --white: #faf9f3;
  --black: #111111;
  --yellow: #ffb703;
  --red: #ff4d6d;
  --violet: #8338ec;

  --scale-factor: 1.414;
  --base-unit: 1rem;

  --step-down-1: calc(var(--base-unit) / var(--scale-factor));
  --step-down-2: calc(var(--step-down-1) / var(--scale-factor));
  --step-down-3: calc(var(--step-down-2) / var(--scale-factor));
  --step-down-4: calc(var(--step-down-3) / var(--scale-factor));

  --step-up-1: calc(var(--base-unit) * var(--scale-factor));
  --step-up-2: calc(var(--step-up-1) * var(--scale-factor));
  --step-up-3: calc(var(--step-up-2) * var(--scale-factor));
  --step-up-4: calc(var(--step-up-3) * var(--scale-factor));

  --content-max: 1280px;
}

html {
  box-sizing: border-box;
  font-size: clamp(18px, 0.92rem + 0.4vw, 24px);
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--white);
  color: var(--black);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: var(--base-unit);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

p,
h1,
h2,
h3 {
  margin-block-start: 0;
}

h1,
h2,
h3 {
  line-height: 1;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(
    var(--step-up-2),
    7vw,
    var(--step-up-4)
  );
}

h2 {
  font-size: clamp(
    var(--step-up-1),
    5vw,
    var(--step-up-3)
  );
}

h3 {
  font-size: var(--step-up-1);
}

p {
  max-inline-size: 68ch;
}

section[id] {
  scroll-margin-block-start: calc(
    var(--step-up-4) + var(--step-up-1)
  );
}

::selection {
  background: var(--yellow);
  color: var(--black);
}

:focus-visible {
  outline: var(--step-down-4) solid var(--violet);
  outline-offset: var(--step-down-4);
}


/* =========================================================
   CUBE CSS — Composition
   ========================================================= */

.container {
  inline-size: min(
    calc(100% - (var(--step-up-1) * 2)),
    var(--content-max)
  );
  margin-inline: auto;
}

.section {
  padding-block: var(--step-up-4);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--step-up-1);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--step-up-1);
}

.stack > * {
  margin-block: 0;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-up-1);
}

.section-heading {
  align-items: end;
}

.section-heading__intro,
.section-heading__copy {
  grid-column: 1 / -1;
}

.section-heading__copy {
  margin-block-end: var(--step-down-1);
  font-size: var(--step-up-1);
}


/* =========================================================
   CUBE CSS — Utility
   ========================================================= */

.text-balance {
  text-wrap: balance;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--step-down-2);
  width: fit-content;
  margin: 0;
  font-size: var(--step-down-1);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  inline-size: var(--step-up-1);
  block-size: var(--step-down-4);
  background: var(--red);
}

.skip-link,
.u-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  z-index: 100;
  inset-block-start: var(--step-down-2);
  inset-inline-start: var(--step-down-2);
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  clip: auto;
  margin: 0;
  padding: var(--step-down-1) var(--step-up-1);
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  font-weight: 800;
  white-space: normal;
}


/* =========================================================
   CUBE CSS — Blocks
   ========================================================= */

/* Header */

.site-header {
  position: sticky;
  z-index: 20;
  inset-block-start: 0;
  background: rgb(250 249 243 / 0.96);
  border-block-end: 2px solid var(--black);
}

.site-header__inner {
  min-block-size: calc(var(--step-up-4) + var(--step-down-1));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-down-1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--step-down-1);
  color: var(--black);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.brand__logo {
  inline-size: var(--step-up-2);
  block-size: var(--step-up-2);
  object-fit: cover;
}

.brand__name {
  max-inline-size: calc(var(--step-up-4) * 2.6);
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--step-down-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav a {
  min-block-size: var(--step-up-3);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--step-down-1);
  font-size: var(--step-down-1);
  font-weight: 750;
  text-decoration-thickness: var(--step-down-4);
  text-underline-offset: var(--step-down-3);
}

.site-nav a:hover {
  text-decoration-color: var(--red);
}

.site-header__cta {
  display: none;
}


/* Buttons and links */

.button {
  min-block-size: var(--step-up-3);
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--step-down-1);
  padding-block: var(--step-down-1);
  padding-inline: var(--step-up-1);
  border: 2px solid var(--black);
  border-radius: var(--step-down-1);
  background: var(--black);
  color: var(--white);
  box-shadow:
    var(--step-down-3)
    var(--step-down-3)
    0
    var(--yellow);
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.button:hover {
  background: var(--violet);
  border-color: var(--violet);
}

.button:active {
  box-shadow: none;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.button--compact {
  min-block-size: var(--step-up-2);
  padding-inline: var(--step-down-1);
  font-size: var(--step-down-1);
}

.button--dark {
  background: var(--black);
  color: var(--white);
  box-shadow:
    var(--step-down-3)
    var(--step-down-3)
    0
    var(--violet);
}

.button--dark:hover {
  background: var(--violet);
  border-color: var(--black);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--step-down-2);
  min-block-size: var(--step-up-3);
  width: fit-content;
  font-weight: 850;
  text-decoration-line: underline;
  text-decoration-thickness: var(--step-down-4);
  text-decoration-color: var(--red);
  text-underline-offset: var(--step-down-3);
}

.text-link:hover {
  text-decoration-color: var(--violet);
}


/* Hero */

.hero {
  min-block-size: calc(100svh - var(--step-up-4));
  display: flex;
  align-items: center;
  padding-block-start: var(--step-up-3);
}

.hero__grid {
  align-items: center;
}

.hero__content,
.hero__visual {
  grid-column: 1 / -1;
}

.hero__title {
  max-inline-size: 12ch;
  margin-block-end: 0;
}

.hero__highlight {
  display: block;
  color: var(--violet);
}

.hero__lead {
  max-inline-size: 59ch;
  font-size: var(--step-up-1);
}

.hero__note {
  margin: 0;
  padding-inline-start: var(--step-up-1);
  border-inline-start: var(--step-down-4) solid var(--red);
  font-size: var(--step-down-1);
  font-weight: 700;
}

.hero__visual {
  display: grid;
  gap: var(--step-down-1);
  justify-items: center;
}

.pixel-art {
  inline-size: min(
    100%,
    calc(var(--step-up-4) * 5.8)
  );
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--step-down-3);
  padding: var(--step-down-3);
  background: var(--black);
  border: 2px solid var(--black);
}

.pixel-art__cell {
  border: 2px solid var(--black);
}

.pixel-art__cell--one {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background: var(--white);
}

.pixel-art__cell--two {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
  background: var(--yellow);
}

.pixel-art__cell--three {
  grid-column: 1 / 2;
  grid-row: 2 / 5;
  background: var(--red);
}

.pixel-art__cell--four {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: var(--white);
}

.pixel-art__cell--five {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
  background: var(--violet);
}

.pixel-art__cell--six {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
  background: var(--black);
}

.hero__visual-copy {
  inline-size: min(
    100%,
    calc(var(--step-up-4) * 5.8)
  );
  display: flex;
  justify-content: space-between;
  gap: var(--step-down-1);
  padding-block: var(--step-down-1);
  border-block-end: 2px solid var(--black);
  font-size: var(--step-down-1);
}

.hero__visual-copy span {
  text-align: end;
}


/* Services */

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--step-up-1);
}

.service-card {
  min-block-size: calc(var(--step-up-4) * 4);
  display: flex;
  flex-direction: column;
  padding: var(--step-up-1);
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--white);
  border-block-start-width: var(--step-down-2);
  border-radius: var(--step-down-1);
}

.service-card__number {
  margin-block-end: auto;
  font-size: var(--step-down-1);
  font-weight: 900;
}

.service-card h3 {
  margin-block-end: var(--step-down-1);
}

.service-card p:not(.service-card__number) {
  margin-block-end: var(--step-up-1);
}

.service-card__tag {
  margin-block-start: auto;
  font-size: var(--step-down-1);
  font-weight: 800;
}


/* Independent section */

.independent {
  background: var(--yellow);
}

.independent__grid {
  align-items: start;
}

.independent__intro,
.benefit-grid {
  grid-column: 1 / -1;
}

.independent__highlight {
  display: block;
}

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--step-down-1);
}

.benefit-card {
  padding: var(--step-up-1);
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--step-down-1);
  box-shadow:
    var(--step-down-3)
    var(--step-down-3)
    0
    var(--black);
}

.benefit-card__mark {
  min-inline-size: var(--step-up-2);
  min-block-size: var(--step-up-2);
  display: inline-grid;
  place-items: center;
  margin-block-end: var(--step-up-1);
  background: var(--red);
  border: 2px solid var(--black);
  border-radius: 50%;
  font-weight: 900;
}

.benefit-card h3 {
  margin-block-end: var(--step-down-1);
}

.benefit-card p {
  margin-block-end: 0;
}

.name-story {
  max-inline-size: var(--content-max);
  display: grid;
  gap: var(--step-down-1);
  margin-block-start: var(--step-up-3);
  margin-inline: auto;
  padding: var(--step-up-1);
  background: var(--black);
  color: var(--white);
  border-radius: var(--step-down-1);
}

.name-story__label {
  margin: 0;
  color: var(--yellow);
  font-size: var(--step-down-1);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.name-story__text {
  max-inline-size: 75ch;
  margin: 0;
  font-size: var(--step-up-1);
}


/* Process */

.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-block-start: 2px solid var(--black);
}

.process-step {
  padding-block: var(--step-up-1);
  border-block-end: 2px solid var(--black);
}

.process-step__number {
  margin-block-end: var(--step-up-2);
  color: var(--violet);
  font-size: var(--step-up-2);
  font-weight: 900;
  line-height: 1;
}

.process-step h3 {
  margin-block-end: var(--step-down-1);
}

.process-step p:last-child {
  margin-block-end: 0;
}

.process-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--step-down-1);
  padding: var(--step-up-1);
  background: var(--red);
  border: 2px solid var(--black);
  border-radius: var(--step-down-1);
}

.process-cta p {
  margin: 0;
  font-size: var(--step-up-1);
  font-weight: 800;
}


/* Contact */

.contact {
  background: var(--violet);
  color: var(--white);
}

.contact__intro,
.contact__form-wrap {
  grid-column: 1 / -1;
}

.contact__intro .eyebrow::before {
  background: var(--yellow);
}

.contact__intro h2 {
  max-inline-size: 11ch;
}

.contact__intro > p {
  font-size: var(--step-up-1);
}

.contact-note {
  padding: var(--step-up-1);
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: var(--step-down-1);
}

.contact-note p {
  margin-block-end: 0;
}

.contact-direct {
  padding-block-start: var(--step-up-1);
  border-block-start: 2px solid var(--white);
}

.contact-direct p {
  margin-block-end: var(--step-down-2);
}

.contact-form {
  padding: var(--step-up-1);
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: var(--step-down-1);
  box-shadow:
    var(--step-down-2)
    var(--step-down-2)
    0
    var(--black);
}

.contact-form__fieldset {
  display: grid;
  gap: var(--step-up-1);
  padding: 0;
  margin: 0;
  border: 0;
}

.contact-form__fieldset legend {
  margin-block-end: var(--step-up-1);
  padding: 0;
  font-size: var(--step-up-1);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.field {
  display: grid;
  gap: var(--step-down-2);
}

.field label {
  font-weight: 850;
}

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  min-block-size: var(--step-up-3);
  padding: var(--step-down-1);
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  border-radius: var(--step-down-2);
}

.field textarea {
  min-block-size: calc(var(--step-up-4) * 2);
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--violet);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--violet);
}

.field-help,
.field-error {
  margin: 0;
  font-size: var(--step-down-1);
  line-height: 1.4;
}

.field-help {
  color: rgb(17 17 17 / 0.74);
}

.field-error {
  font-weight: 800;
}

.field-error:empty {
  display: none;
}

.field--check {
  padding-block: var(--step-down-1);
}

.check-field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--step-down-1);
  cursor: pointer;
}

.check-field input {
  inline-size: var(--step-up-1);
  block-size: var(--step-up-1);
  min-block-size: auto;
  margin: 0;
  accent-color: var(--violet);
}

.contact-form__submit {
  inline-size: 100%;
  margin-block-start: var(--step-up-1);
}

.form-status {
  min-block-size: var(--step-up-1);
  margin-block-start: var(--step-up-1);
  margin-block-end: 0;
  padding: 0;
  font-size: var(--step-down-1);
  font-weight: 800;
}


/* Footer */

.site-footer {
  padding-block: var(--step-up-2);
  background: var(--black);
  color: var(--white);
}

.site-footer__inner {
  display: grid;
  gap: var(--step-up-1);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--step-down-1);
}

.site-footer__brand p,
.site-footer__meta p {
  margin-block-end: 0;
  font-size: var(--step-down-1);
}

.site-footer__logo {
  inline-size: var(--step-up-2);
  block-size: var(--step-up-2);
  object-fit: cover;
  border: 2px solid var(--white);
}

.site-footer__meta {
  display: grid;
  gap: var(--step-down-2);
}

.site-footer__top {
  min-block-size: var(--step-up-3);
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: var(--step-down-1);
  color: var(--yellow);
  font-weight: 850;
  text-underline-offset: var(--step-down-3);
}

.site-footer :focus-visible,
[data-theme="dark"] :focus-visible {
  outline-color: var(--yellow);
}


/* =========================================================
   CUBE CSS — Exceptions
   ========================================================= */

[data-theme="dark"] {
  background: var(--black);
  color: var(--white);
}

[data-theme="dark"] .eyebrow::before {
  background: var(--yellow);
}

.service-card[data-accent="yellow"] {
  border-block-start-color: var(--yellow);
}

.service-card[data-accent="red"] {
  border-block-start-color: var(--red);
}

.service-card[data-accent="violet"] {
  border-block-start-color: var(--violet);
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--red);
  border-inline-start-width: var(--step-down-3);
}

.field[data-invalid="true"] .field-error {
  color: var(--black);
}

.form-status[data-state="error"],
.form-status[data-state="success"],
.form-status[data-state="loading"] {
  padding: var(--step-down-1);
  border: 2px solid var(--black);
  border-radius: var(--step-down-2);
}

.form-status[data-state="error"] {
  background: var(--red);
  color: var(--black);
}

.form-status[data-state="success"] {
  background: var(--yellow);
  color: var(--black);
}

.form-status[data-state="loading"] {
  background: var(--white);
  color: var(--black);
}


/* =========================================================
   Tablet — 8-column logical grid
   768px–1023px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  .content-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .site-nav {
    display: block;
  }

  .brand__name {
    display: none;
  }

  .hero__content {
    grid-column: 1 / 6;
  }

  .hero__visual {
    grid-column: 6 / 9;
  }

  .section-heading__intro {
    grid-column: 1 / 6;
  }

  .section-heading__copy {
    grid-column: 6 / 9;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .independent__intro {
    grid-column: 1 / 5;
  }

  .benefit-grid {
    grid-column: 5 / 9;
  }

  .contact__intro {
    grid-column: 1 / 5;
  }

  .contact__form-wrap {
    grid-column: 5 / 9;
  }
}


/* =========================================================
   Desktop — 12-column logical grid
   1024px+
   ========================================================= */

@media (min-width: 1024px) {
  .content-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .site-nav {
    display: block;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .hero__content {
    grid-column: 1 / 8;
  }

  .hero__visual {
    grid-column: 9 / 13;
  }

  .section-heading__intro {
    grid-column: 1 / 8;
  }

  .section-heading__copy {
    grid-column: 9 / 13;
  }

  .service-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .independent__intro {
    grid-column: 1 / 6;
  }

  .benefit-grid {
    grid-column: 7 / 13;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .name-story {
    grid-template-columns: 3fr 9fr;
    align-items: start;
  }

  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .process-step {
    padding-inline: var(--step-up-1);
    border-inline-end: 2px solid var(--black);
  }

  .process-step:first-child {
    padding-inline-start: 0;
  }

  .process-step:last-child {
    padding-inline-end: 0;
    border-inline-end: 0;
  }

  .contact__intro {
    grid-column: 1 / 6;
  }

  .contact__form-wrap {
    grid-column: 7 / 13;
  }

  .site-footer__inner {
    grid-template-columns: 5fr 5fr 2fr;
    align-items: end;
  }

  .site-footer__top {
    justify-self: end;
  }
}


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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}