/* ============================================================
   PART 1
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-size: var(--text-m);
  font-family: var(--text-font-family);
  overflow-x: clip;
  color: var(--text-color);
  line-height: var(--text-line-height);
  font-weight: var(--text-font-weight);
  text-wrap: var(--text-text-wrap);
  -webkit-font-smoothing: antialiased;
  background: var(--body-color);
  transition: background var(--transition);
}

section:where(:not(section section)) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--container-gap);
  padding-block: var(--section-space-m);
  padding-inline: var(--gutter);
}

:where([data-etch-element~="container"]) {
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
  display: grid;
  gap: var(--container-gap);
}

h1,
h2,
h3,
h4,
h5,
h6,
:where(.h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--heading-font-family);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  font-weight: var(--heading-font-weight);
  text-wrap: var(--heading-text-wrap);
  letter-spacing: -2%;
  max-inline-size: var(--text-max-width);
}

h1 {
  font-size: var(--h1);
}

.h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

.h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

.h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

.h4 {
  font-size: var(--h4);
}

h5 {
  font-size: var(--h5);
}

.h5 {
  font-size: var(--h5);
}

h6 {
  font-size: var(--h6);
}

.h6 {
  font-size: var(--h6);
}

p {
  max-inline-size: var(--text-max-width);
}

[id] {
  scroll-margin-top: 0;
}

:where(a) {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.clickable-parent {
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    cursor: pointer !important;
    display: flex;
    z-index: 1;
  }
}

.list--none {
  :where(&) {
    list-style: none;
    padding-inline-start: 0;
    list-style-type: none;
    margin-block-start: 0em;
    margin-block-end: 0;
  }
}

a:where(
  :not(
    [class^="btn-"],
    [class*=" btn-"],
    :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a
  )
) {
  color: var(--primary);
  font-weight: var(--text-font-weight);
  text-decoration: none;
  text-underline-offset: 0.2ex;
  transition: var(--transition);
  inline-size: max-content;

  &:hover {
    color: var(--primary-hover);
  }
}

:where([class^="btn-"], [class*=" btn-"]) {
  background: var(--primary);
  color: var(--black);
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: var(--text-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block: 1em;
  padding-inline: 1.5em;
  min-inline-size: var(--btn-min-width);
  min-block-size: calc(3em - 2 * var(--border-width));
  inline-size: max-content;
  text-decoration: none;
  border: var(--border-width) solid transparent;
  border-radius: 0;
  transition: var(--transition);
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: var(--space-xs);
}

:where(:focus-visible) {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}

[hidden] {
  display: none !important;
}

/* ============================================================
   PART 2
   ============================================================ */

/* --- Buttons -------------------------------------------- */

.btn-primary {
  &:hover {
    color: var(--primary-hover);
    background: var(--black-70);
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    outline: calc(var(--border-width) * 1.5) solid var(--primary-hover);
    outline-offset: 0;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
  }

  &:hover::before {
    opacity: 1;
    outline-offset: 0.25em;
  }
}

.btn-primary--dark {
  background: var(--bg-dark);
  color: var(--white);

  &:hover {
    background: var(--primary-hover);
    color: var(--black);
  }
}

/* --- Eyebrow -------------------------------------------- */

.eyebrow {
  display: flex;
  gap: var(--space-xs);
  font-family: var(--eyebrow-font-family);
  font-weight: var(--eyebrow-font-weight);
  font-stretch: 75%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-color);
  line-height: var(--heading-line-height);

  &::before {
    content: "";
    inset-block-start: var(--space-m);
    inset-inline-end: var(--space-s);
    inline-size: 1em;
    block-size: 1em;
    background: var(--primary-500);
    mask-image: var(--icon-cross);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
  }

  & span:first-child {
    order: -1;
  }

  && {
    font-size: var(--text-s);
  }
}

/* --- Media placeholder ---------------------------------- */

/* --- Header --------------------------------------------- */

/* --- Media placeholder ---------------------------------- */

/* --- Header --------------------------------------------- */

.header {
  padding-block: var(--space-m);
  padding-inline: var(--gutter);
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 99999;
  transition: var(--transition);

  &.is-scrolled {
    background: var(--bg-dark);
  }

  &::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg-dark);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }

  &:has(.header__nav-toggle[aria-expanded="true"])::after {
    opacity: 1;
    visibility: visible;
  }

  @media (width > 64rem) {
    position: absolute;

    &.is-scrolled {
      background: none;
    }

    &::after {
      content: none;
    }
  }
}

.header__container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  max-inline-size: unset;
}

.header__nav {
  position: absolute;
  inset-block-start: calc(100% + var(--space-xl));
  inset-inline: var(--gutter);
  z-index: 999;

  opacity: 0;
  visibility: hidden;
  transition: var(--transition);

  .header:has(.header__nav-toggle[aria-expanded="true"]) & {
    opacity: 1;
    visibility: visible;
  }

  @media (width > 64rem) {
    position: static;
    inline-size: auto;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
}

.header__nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (width > 64rem) {
    flex-direction: row;
  }
}

.header__nav-toggle {
  display: block;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  position: relative;
  z-index: 999;
  color: var(--white);
  padding: 0;

  @media (width > 64rem) {
    display: none;
  }

  & span {
    display: block;
    position: absolute;
    inset-inline-start: 50%;
    margin-inline-start: -1rem;
    inline-size: 2rem;
    block-size: 0.2188rem;
    background: currentColor;
    opacity: 1;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }

  & span:nth-child(1) {
    inset-block-start: 0.625rem;
  }

  & span:nth-child(2),
  & span:nth-child(3) {
    inset-block-start: 1.2656rem;
  }

  & span:nth-child(4) {
    inset-block-start: 1.9063rem;
  }

  &[aria-expanded="true"] span:nth-child(1),
  &[aria-expanded="true"] span:nth-child(4) {
    inset-block-start: 1.2656rem;
    inline-size: 0;
    margin-inline-start: 0;
  }

  &[aria-expanded="true"] span:nth-child(2) {
    transform: rotate(45deg);
  }

  &[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg);
  }

  /* menu open = document locked */
  html:has(&[aria-expanded="true"]) {
    overflow: hidden;

    @media (width > 64rem) {
      overflow: visible;
    }
  }
}

.header__link {
  display: block;
  padding: 1.5em 1.5em;
  color: var(--white);
  font-weight: 600;
  font-size: var(--text-l);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: var(--transition);

  &:hover {
    background: var(--black-20);
    color: var(--primary-hover);
  }

  @media (width > 64rem) {
    font-size: var(--text-xs);
  }
}

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

.hero {
  position: relative;
  overflow: clip;
  justify-content: end;
  background: var(--bg-dark);
  gap: calc(var(--container-gap) * 2);
  padding-block-start: var(--section-space-l);
  min-block-size: 100svh;
}

.hero__container {
  position: relative;
  z-index: 1;
  align-items: end;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg-dark), transparent 15%),
      color-mix(in srgb, var(--bg-dark), transparent 35%) 55%,
      var(--bg-dark) 100%
    );
  }
}

.hero__title {
  color: var(--white);
  max-inline-size: 41rem;
  text-transform: uppercase;
  font-weight: 900;
}

.hero__lede {
  font-size: var(--text-l);
  color: var(--white-90);
}

.hero__facts {
  z-index: 1;
  inline-size: 100%;
  display: grid;
  gap: 0;
  @media (width >= 39.375rem) {
    grid-template-columns: var(--grid-2);
  }
  @media (width >= 75rem) {
    grid-template-columns: var(--grid-4);
  }
}

.fact {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding: var(--space-m) var(--space-l);
  border-block-start: var(--border-width) solid var(--white-30);

  @media (width < 39.375rem) {
    &:first-child {
      border-block-start: none;
    }
  }

  @media (width >= 39.375rem) {
    &:nth-child(odd) {
      border-inline-end: var(--border-width) solid var(--white-30);
    }
  }

  @media (width >= 75rem) {
    &:not(:last-child) {
      border-inline-end: var(--border-width) solid var(--white-30);
    }
  }

  &:nth-child(n + 3) {
    position: relative;
    transition: var(--transition);

    &::after {
      content: "";
      position: absolute;
      inset-block-start: var(--space-m);
      inset-inline-end: var(--space-s);
      inline-size: 1em;
      block-size: 1em;
      background: var(--primary);
      mask-image: var(--icon-arrow);
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: center;
      rotate: -45deg;
    }

    &:hover {
      background: var(--white-10);
    }
  }
}

.fact__value {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: var(--h3);
  line-height: 1.05;
  color: var(--white);
  text-transform: uppercase;
}

.fact__label {
  font-size: var(--text-s);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-60);
}

/* --- Hurdles -------------------------------------------- */

/* --- Services ------------------------------------------- */

/* --- Hurdles -------------------------------------------- */

/* --- Services ------------------------------------------- */

.services__container {
  gap: var(--grid-gap);
  counter-reset: service;

  @media (width > 64rem) {
    grid-template-columns: var(--grid-2);
    grid-template-rows: var(--grid-3);
  }
}

/* --- About ---------------------------------------------- */

/* --- About ---------------------------------------------- */

.about__container {
  align-items: center;
  column-gap: var(--container-gap);

  @media (width > 58.125rem) {
    grid-template-columns: var(--grid-2-3);
  }
}

.about {
  padding-block-end: calc(var(--section-space-m) * 2);
}

.about__media {
  position: relative;
  aspect-ratio: 5 / 4;

  @media (width > 58.125rem) {
    aspect-ratio: 4 / 5;
    order: -1;
  }

  & img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
}

.about__badge {
  position: absolute;
  inset-inline: var(--space-m);
  inset-block-end: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-m) var(--space-l);
  background: var(--primary-400);
  flex-direction: column;
  max-inline-size: max-content;
}

.about__badge-value {
  text-transform: uppercase;

  && {
    font-size: calc(var(--h4) * 1.25);
  }
}

.about__badge-label {
  font-size: var(--text-s);
  text-transform: uppercase;
  font-family: var(--eyebrow-font-family);
  font-stretch: 75%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-color);
  line-height: var(--heading-line-height);
}

/* --- Proof ---------------------------------------------- */

/* --- Proof ---------------------------------------------- */

.proof {
  background: var(--bg-dark);
  padding-block-end: var(--section-space-xl);
}

.proof__container {
  justify-items: start;
}

/* --- Call to action ------------------------------------- */

.cta {
  padding-block: var(--section-space-2xl);
  position: relative;
  overflow: clip;
}

.cta__container {
  z-index: 1;
}

.cta__phone-number {
  font-size: var(--h4);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cta__alt {
  font-size: var(--text-s);
  color: var(--primary-950);
  text-align: center;
}

.cta__alt a {
  color: var(--primary-950);
  text-decoration: underline;
  text-underline-offset: 0.3ex;
}

/* --- Form ----------------------------------------------- */

/* --- Footer --------------------------------------------- */

/* --- Form ----------------------------------------------- */

/* --- Footer --------------------------------------------- */

.footer {
  padding-block: var(--section-space-m);
  padding-inline: var(--gutter);
  background: var(--bg-dark);
  gap: calc(var(--container-gap) * 2);
  display: grid;
}

.footer__container {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  flex-direction: row;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.footer__heading {
  color: var(--white);
}

.footer__credit {
  gap: var(--space-m);
  display: flex;
  flex-direction: column;
  align-items: center;

  &::before {
    content: "";
    inline-size: 100%;
    block-size: var(--border-width);
    background: linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--primary), transparent),
      transparent
    );
  }
}

.footer__address {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  color: var(--white-80);
  font-size: var(--text-s);

  &:hover {
    color: var(--primary);
  }
}

.footer__identity {
  display: grid;
  gap: var(--space-2xs);
}

.footer__brand {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-size: var(--text-l);
  text-transform: uppercase;
}

.footer__role {
  font-size: var(--text-s);
}

.footer__nav-list {
  display: grid;
  gap: var(--space-2xs);
}

.footer__legal {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--text-s);
  color: var(--white-50);
}

/* --- Placeholder marker --------------------------------- */

/* --- Přeneseno z Etche ----------------------------------- */

/* --- Placeholder marker --------------------------------- */

/* --- Přeneseno z Etche ----------------------------------- */

.results__photo {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklch, var(--bg-dark), white 13%) 0 12px,
    var(--bg-dark) 12px 24px
  );
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: clip;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

.hero__content {
  display: flex;
  justify-items: start;
  gap: var(--space-xl);
  padding-block-start: var(--space-2xl);
  flex-direction: column;
}

.eyebrow-wrapper {
  gap: var(--space-s);
  display: flex;
  flex-direction: column;
}

.service-card--main {
  && {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--primary-500);
    grid-row: span 3;
  }
}

.service-card {
  grid-row: span 1;
  display: grid;
  gap: var(--space-s);
  align-content: start;
  padding: var(--space-l);
  background: var(--bg-muted, var(--black-10));
  counter-increment: service;
}

.text--s {
  font-size: var(--text-s);
}

.results {
  inline-size: 100%;
  display: grid;
  gap: var(--space-s);
  @media (width >= 64rem) {
    grid-template-columns: var(--grid-2);
  }
}

.results__list-item {
  display: grid;
  grid-template-columns: var(--grid-2);
  gap: var(--space-s);
}

.results__tag {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  padding: 0.35em 0.9em;
  background: var(--black-70);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-90);
}

.results__tag--after {
  && {
    background: var(--primary);
    color: var(--black);
  }
}

.eyebrow--white {
  && {
    color: var(--white-90);
  }

  &&::before {
    background: var(--primary);
  }
}

.hero__heading-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.service-card__btn-wrapper {
  margin-block-start: auto;
  inline-size: fit-content;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: center;
}

.service-card__heading--main {
  text-transform: uppercase;
}

.service-card__heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);

  &::before {
    content: counter(service, decimal-leading-zero);
    display: inline-flex;
    font-size: var(--text-2xs);
    inline-size: 2.2em;
    block-size: 2.2em;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    background: var(--bg-dark);
    color: var(--primary-hover);
    /* mask-image: var(--icon-cross);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center; */
  }
}

.text--white {
  color: var(--white);
}

/* --- Nové třídy z Etche --------------------------------- */

.about__content {
  display: grid;
  gap: var(--space-l);
  justify-items: start;
}

.cta__content {
  display: grid;
  gap: var(--space-xl);
  justify-items: start;
}

.cta__text {
  font-size: var(--text-l);
  color: var(--white-90);
}

.about__text {
  gap: var(--content-gap);
  display: flex;
  flex-direction: column;
}

.logo {
  inline-size: 7em;
  fill: var(--white);
}

.eyebrow--lime {
  &&::before {
    background: var(--primary-hover);
  }
}

.cta__button-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;
}

/* --- Nové třídy z Etche --------------------------------- */

/* --- Nové třídy z Etche --------------------------------- */

.cta__media {
  position: absolute;
  inset: 0;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 0 0;
  }

  @supports (animation-timeline: view()) {
    & img {
      block-size: 140%;
      animation: parallax linear both;
      animation-timeline: view();
      animation-range: entry;
    }

    @media (prefers-reduced-motion: reduce) {
      & img {
        block-size: 100%;
        animation: none;
      }
    }
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg-dark), transparent 0%),
      color-mix(in srgb, var(--bg-dark), transparent 35%),
      transparent
    );
  }
}

.cta__heading {
  text-transform: uppercase;
  font-weight: 900;
  color: var(--white);
  max-inline-size: 41rem;
}

.cta__heading-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.lustadesign {
  color: var(--white-60);
  font-size: var(--text-xs);

  &:hover {
    color: var(--primary);
  }
}

.footer__list {
  display: flex;
  gap: var(--space-2xs);
  font-size: var(--text-s);
  flex-direction: column;
  font-style: normal;

  & a {
    color: var(--white-80);

    &:hover {
      color: var(--primary);
    }
  }
}

.footer__logo-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.footer__id {
  font-size: var(--text-s);
  color: var(--white-80);
}

.cta__btn {
  && {
    gap: var(--space-m);
  }
}

.text--l {
  font-size: var(--text-l);
}

.service-card__heading-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.header__button {
  margin-block-start: 1em;
  font-size: var(--text-l);

  @media (width > 64rem) {
    margin-block-start: unset;
    font-size: var(--text-s);
  }
}