/* ==========================================================================
   layout.css — global header, SP drawer, closing CTA band and footer.
   These blocks are duplicated verbatim in every page's HTML, so their styles
   live here rather than in a per-page stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   The bar itself is a translucent blurred plate; the orange apply badge
   deliberately hangs below it, so the header element must not clip.
   -------------------------------------------------------------------------- */

.l-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  pointer-events: none;
  backdrop-filter: blur(2.5px);
  background-color: var(--color-overlay);
}

.l-header.is-front-page {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition: all var(--duration-base) var(--ease-out);
}

.l-header.is-front-page.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.l-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--header-height);
}

.l-header__inner > * {
  pointer-events: auto;
}

.l-header__logo {
  flex-shrink: 0;
  width: 9.4rem;
}

.l-header__tagline {
  display: none;
  flex-shrink: 0;
  color: var(--color-text-inverse);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.l-header__nav {
  display: none;
}

.l-header__nav-link {
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.015em;
  line-height: 1.5;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.l-header__nav-link:hover,
.l-header__nav-link.is-current {
  color: var(--zino-orange);
}

/* Apply badge — the orange blob overhanging the bar. */
.l-header__cta {
  position: absolute;
  top: 0;
  right: 0;
  width: 96.63px;
  height: 96.63px;
  transition: transform var(--duration-base) var(--ease-out);
}

.l-header__cta:hover {
  animation: beating 0.8s ease-in-out infinite;
}

@keyframes beating {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.l-header__cta-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 113.1px;
  height: 113.1px;
  background-color: var(--color-black);
  border-radius: 50%;
  transition: background-color 0.5s ease-in-out;
}

.l-header__cta.dark-mode .l-header__cta-shape {
  background-color: var(--color-white);
}

.l-header__cta-text {
  position: absolute;
  top: 1.2rem;
  left: 2.56rem;
  color: var(--color-text-inverse);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  transition: color 0.5s ease-in-out;
}

.l-header__cta.dark-mode .l-header__cta-text {
  color: var(--color-black);
}


.l-header__cta-underline {
  position: absolute;
  top: 6.2rem;
  left: 3.45rem;
  width: 4.1rem;
  height: 1.96rem;
  rotate: -8.75deg;
}

.l-header__toggle {
  display: block;
  order: -1;
  width: 4rem;
  height: 2rem;
  position: absolute;
  left: 2rem;
}

.l-header__toggle img {
  width: 100%;
}

/* --------------------------------------------------------------------------
   SP drawer
   -------------------------------------------------------------------------- */

.l-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.4rem 2rem 1.6rem;
  background-color: var(--zino-orange);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-base) var(--ease-out),
    visibility var(--duration-base) var(--ease-out);
}

.l-drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.l-drawer__close {
  position: absolute;
  top: 3rem;
  left: 2rem;
  width: 4rem;
  height: 2rem;
}

.l-drawer__close::before,
.l-drawer__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-inverse);
}

.l-drawer__close::before {
  rotate: 30deg;
}

.l-drawer__close::after {
  rotate: -30deg;
}

.l-drawer__logo {
  width: 10rem;
}

.l-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 10.2rem;
  text-align: center;
}

@media (width >= 768px) {
  .l-drawer__nav {
    margin-top: 13.2rem;
  }
}

.l-drawer__nav-link {
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}

.l-drawer__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
  width: 100%;
  margin-top: auto;
  margin-bottom: 4rem;
}

.l-drawer__copyright {
  color: var(--color-text-inverse);
  font-size: var(--fs-2xs);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Closing CTA band
   -------------------------------------------------------------------------- */
.cta__button {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 350px;
  height: 80px;
  transform-origin: 50% 50%;
  border: 3px solid var(--zino-pale-orange);
  color: var(--zino-pale-orange);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  transition: all var(--duration-base) var(--ease-out);
}

.cta__button--primary {
  background-color: var(--zino-orange);
}

.cta__button--primary:hover {
  transform: matrix(0.9962, -0.0872, 0.0872, 0.9962, 0, 0);
}

.cta__button--apply {
  background-color: var(--zino-green);
}

.cta__button--apply:hover {
  transform: matrix(0.9962, -0.0872, 0.0872, 0.9962, 0, 0);
}

.cta__button-swoosh {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
  transition: all var(--duration-base) ease;
}

.cta__button--primary .cta__button-swoosh {
  top: -32%;
  left: 0%;
}

.cta__button--apply .cta__button-swoosh {
  top: -16%;
  right: -6%;
}

.cta__button:hover .cta__button-swoosh {
  width: 24%;
  height: 51.8%;
  max-width: 90px;
  max-height: 64px;
  object-fit: contain;
  visibility: visible;
  opacity: 1;
}

.cta__button--primary:hover .cta__button-swoosh {
  transform: rotate(385deg);
}

.cta__button--apply:hover .cta__button-swoosh {
  transform: rotate(355deg);
}

.l-cta-band {
  position: relative;
  padding-block: 3.5rem 6.5rem;
  overflow: hidden;
  color: var(--color-text-inverse);
  text-align: center;
}

.l-cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
}

.l-cta-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.l-cta-band__title {
  font-size: 2.8rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.l-cta-band__lead {
  font-size: 14px;
  font-weight: var(--fw-semibold);
}

.l-cta-band__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  width: 100%;
}

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

.l-footer {
  position: relative;
  display: grid;
  place-items: end center;
  aspect-ratio: 390 / 458;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: var(--zino-orange);
  color: var(--color-text-inverse);
}

.l-footer__bg {
  position: absolute;
  inset: 0 auto;
  max-width: none;
}

/* Brush lettering, cut into three tilted strips exactly as the design does.
   The strips are positioned inside a box slightly wider than the footer,
   because Figma lays them out on a 1560px canvas over a 1440px backdrop. */
.l-footer__strips {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 458;
  pointer-events: none;
}

.l-footer__strip {
  position: absolute;
  max-width: none;
  transform: skewX(-10deg);
}

.l-footer__strip--1 {
  top: 6.8%;
  left: 11.812%;
  width: 77.262%;
  rotate: -5deg;
}

.l-footer__strip--2 {
  top: 25.0%;
  left: -4.1%;
  width: 104.50%;
  rotate: -6.31deg;
}

.l-footer__strip--3 {
  top: 44.2%;
  left: 3.999%;
  width: 93.341%;
  rotate: -5deg;
}

.l-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.7vw;
  padding-bottom: 4.5vw;
}

.l-footer__logo {
  width: 36.41vw;
}

.l-footer__copyright {
  font-size: 2.564vw;
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   From tablet up
   -------------------------------------------------------------------------- */

@media (width >= 768px) {
  .l-header__inner {
    padding-left: 2.1rem;
  }

  .l-header__toggle {
    display: none;
  }

  .l-header__nav {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
    padding-right: 132px;
  }

  .l-header__nav-link {
    font-size: 2vw;
  }

  .l-header__cta {
    width: 112px;
    height: 112px;
  }

  .l-header__cta-shape {
    width: 144px;
    height: 144px;
  }

  .l-header__cta-text {
    top: 1.4rem;
    left: 2.5rem;
    font-size: 24px;
  }

  .l-header__cta-underline {
    top: 7.2rem;
    left: 4.1rem;
    width: 6.2rem;
    height: 3rem;
  }

  .l-cta-band {
    padding-block: 8.4rem;
  }

  .l-cta-band__title {
    font-size: 4rem;
  }

  .l-cta-band__lead {
    font-size: 16px;
  }

  .l-cta-band__lead br {
    display: none;
  }

  .l-cta-band__actions {
    flex-direction: row;
    gap: var(--space-lg);
  }

  .l-cta-band__arrow {
    top: -4.2rem;
    right: auto;
    left: 60.2rem;
    width: 8.7rem;
  }

  .cta__button {
    width: 300px;
  }

  .cta__button--primary .cta__button-swoosh {
    left: -8%;
  }

  .cta__button--apply .cta__button-swoosh {
    right: -12%;
  }

  .l-footer {
    height: calc(25.486vw + 187px);
    max-height: 554px;
  }

  .l-footer__strips {
    aspect-ratio: 1440 / 554;
    max-width: 1440px;
    margin-inline: auto;
  }

  .l-footer__strip--1 {
    top: 6.0%;
    left: 26.492%;
    width: 42.48%;
  }

  .l-footer__strip--2 {
    top: 42.6%;
    left: -3.8%;
    width: 57.04%;
  }

  .l-footer__strip--3 {
    top: 25.0%;
    left: 52.75%;
    width: 50.75%;
  }

  .l-footer__inner {
    gap: 12px;
    padding-bottom: 10px;
  }

  .l-footer__logo {
    width: 188px;
  }

  .l-footer__copyright {
    font-size: 12px;
    line-height: 30px;
  }
}

@media (width >= 960px) {
  .l-header__tagline {
    display: block;
    padding-left: 2.27vw;
    font-size: 1.25vw;
  }

  .l-header__nav-link {
    font-size: 1.56vw;
  }
}

@media (width >= 1280px) {
  .l-header__logo {
    width: 11.6rem;
    margin-inline: 0;
  }

  .l-header__tagline {
    padding-left: 2.9rem;
    font-size: 16px;
  }

  .l-header__nav {
    padding-right: 200px;
  }

  .l-header__nav-link {
    font-size: 20px;
  }

  .l-header__cta {
    width: 150px;
    height: 150px;
  }

  .l-header__cta-shape {
    width: 190px;
    height: 190px;
  }

  .l-header__cta-text {
    top: 1.8rem;
    left: 3.1rem;
    font-size: var(--fs-2xl);
  }

  .l-header__cta-underline {
    top: 9.2rem;
    left: 5.6rem;
    width: 6.9rem;
    height: 3.3rem;
  }
}