:root {
      
      --color-cream:      #F5F0E8;
      --color-yellow:     #DEFF00;
      --color-teal:       #A8C8BE;
      --color-footer:     #2A2420;
      --color-brown:      #571902;
      --color-orange:     #F43A01;
      --color-pink:       #F45090;
      --color-white:      #FFFFFF;

      
      --font-main:        'special-gothic-expanded-one', sans-serif;
      --font-display:     'gelica', serif;

      
      --fs-nav:           1.25rem;   
      --fs-subtitle:      1.4375rem; 
      --fs-h2:            3.75rem;   
      --fs-btn:           1.75rem;   
      --fs-footer:        1.0625rem; 
      --fs-tagline:       2.25rem;   
      --fs-body:          1.125rem;  

      
      --gutter:           3.75rem;   
      --nav-height:       4.375rem;  
      --max-width:        90rem;     

      
      --card-front-w:     min(29.86vw, 26.875rem); 
      --card-front-h:     min(36.11vw, 32.5rem);   
      --card-mid-w:       min(23.33vw, 21rem);      
      --card-mid-h:       min(29.86vw, 26.875rem);  
      --card-back-w:      min(16.81vw, 15.125rem);  
      --card-back-h:      min(23.33vw, 21rem);      

      
      --stage-w:          min(100vw, 77.125rem); 
      --stage-h:          min(36.11vw, 32.5rem); 

      
      --offset-mid:       min(22.71vw, 20.4375rem);  
      --offset-back:      min(34.51vw, 31.0625rem);  

      
      --overlap:          5.3125rem; 

      
      --radius-card:      1rem;
      --radius-btn:       0.5rem;    

      
      --transition-base:  0.3s ease;
      --transition-slow:  0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    html {
      font-size: 16px;
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-main);
      background-color: var(--color-cream);
      color: var(--color-brown);
      overflow-x: hidden;
    }

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

    button {
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit;
    }

    
    .container {
      width: 100%;
      max-width: var(--max-width);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background-color: var(--color-cream);
      height: var(--nav-height);
      display: flex;
      align-items: center;
      transform: translateY(0);
      transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .nav--hidden {
      transform: translateY(-100%);
    }

    .nav__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: var(--max-width);
      margin-inline: auto;
      padding-inline: var(--gutter);
    }

    .nav__logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
    }

    .nav__logo svg {
      height: 2rem; 
      width: auto;
    }

    .nav__links {
      display: flex;
      align-items: center;
      gap: 0;
      list-style: none;
    }

    .nav__links li {
      display: flex;
      align-items: center;
    }

    
    .nav__links li + li::before {
      content: '';
      display: block;
      width: 1px;
      height: 1.25rem;
      background-color: #FF5CA4;
      margin-inline: 1.125rem; 
    }

    .nav__link {
      font-family: var(--font-main);
      font-size: var(--fs-nav);
      font-weight: 500;
      color: var(--color-brown);
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: color var(--transition-base);
    }

    .nav__link:hover {
      color: var(--color-orange);
    }

    
    .hero {
      background: linear-gradient(
        to bottom,
        var(--color-cream) 85%,
        var(--color-yellow) 85%
      );
      position: relative;
      z-index: 2;
      padding-top: 2rem;
      padding-bottom: 0;
      overflow: visible;
    }

    .hero__stage-wrapper {
      width: 100%;
      overflow: visible;
      display: flex;
      justify-content: center;
    }

    
    .hero__stage {
      position: relative;
      width: var(--stage-w);
      height: var(--stage-h);
      flex-shrink: 0;
    }

    
    .card {
      position: absolute;
      border-radius: var(--radius-card);
      overflow: hidden;
      transition:
        translate 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: translate;
    }

    .card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    

    

    
    .card--slot-bl {
      width:  var(--card-back-w);
      height: var(--card-back-h);
      top: 50%;
      left: 50%;
      translate: calc(-50% - var(--offset-back)) -50%;
      z-index: 1;
    }

    
    .card--slot-ml {
      width:  var(--card-mid-w);
      height: var(--card-mid-h);
      top: 50%;
      left: 50%;
      translate: calc(-50% - var(--offset-mid)) -50%;
      z-index: 2;
    }

    
    .card--slot-fc {
      width:  var(--card-front-w);
      height: var(--card-front-h);
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      z-index: 3;
    }

    
    .card--slot-mr {
      width:  var(--card-mid-w);
      height: var(--card-mid-h);
      top: 50%;
      left: 50%;
      translate: calc(-50% + var(--offset-mid)) -50%;
      z-index: 2;
    }

    
    .card--slot-br {
      width:  var(--card-back-w);
      height: var(--card-back-h);
      top: 50%;
      left: 50%;
      translate: calc(-50% + var(--offset-back)) -50%;
      z-index: 1;
    }

    
    .card--hidden {
      opacity: 0;
      pointer-events: none;
      top: 50%;
      left: 50%;
      width: var(--card-front-w);
      height: var(--card-front-h);
      translate: -50% -50%;
      transform: scale(0.8);
      z-index: 0;
    }

    
    .about {
      background-color: var(--color-yellow);
      position: relative;
      z-index: 1;
      
      padding-top: 3.125rem; 
      padding-bottom: 3.125rem; 
      text-align: center;
    }

    .about__tagline {
      font-family: var(--font-display);
      font-size: var(--fs-tagline);
      font-weight: 600;
      color: var(--color-brown);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
    }

    .about__logo-big {
      display: block;
      width: 59rem;      
      max-width: 90%;    
      height: auto;      
      margin-inline: auto;
      margin-bottom: 2rem;
    }

    .about__body {
      font-family: var(--font-main);
      font-size: var(--fs-subtitle);  
      font-weight: 600;               
      color: var(--color-brown);
      max-width: 58.875rem;           
      margin-inline: auto;
      line-height: 1.55;
      text-wrap: balance;
      margin-bottom: 3.4375rem; 
    }

    
    .about__cta-wrapper {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
      z-index: 10;
    }

    .btn-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      width: 15rem;        
      height: 4.0625rem;   
      max-width: 15rem;
      max-height: 4.0625rem;
      padding-inline: 1.5rem;
      background-color: var(--color-pink);
      border-radius: var(--radius-btn);
      font-family: var(--font-main);
      font-size: var(--fs-btn);
      font-weight: 600;
      color: var(--color-brown);
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: transform var(--transition-base);
      white-space: nowrap;
      cursor: pointer;
    }

    .btn-cta:hover {
      transform: scale(1.03);
    }

    .btn-cta__icon {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      transition: transform var(--transition-base);
    }

    .btn-cta:hover .btn-cta__icon {
      transform: translate(2px, 2px);
    }

    
    .contact {
      background-color: var(--color-teal);
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                  padding 0.7s cubic-bezier(0.4, 0, 0.2, 1);
      padding-top: 0;
      padding-bottom: 0;
    }

    .contact.is-open {
      max-height: 62.5rem; 
      padding-top: 5rem;   
      padding-bottom: 5rem;
    }

    .contact__inner {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .contact__heading {
      font-family: var(--font-main);
      font-size: var(--fs-h2);
      font-weight: 700;
      color: var(--color-brown);
      margin-bottom: 1rem;
    }

    .contact__sub {
      font-family: var(--font-main);
      font-size: var(--fs-body);     
      font-weight: 500;              
      color: var(--color-brown);
      max-width: 53.75rem;           
      margin-inline: auto;
      line-height: 1.55;
      text-wrap: balance;
      margin-bottom: 2.5rem;
    }

    
    .contact__form {
      max-width: 35rem;
      margin-inline: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .contact__form-field {
      width: 100%;
      padding: 1rem 1.25rem;
      background-color: var(--color-cream);
      border: none;
      border-radius: 0.75rem;
      font-family: var(--font-main);
      font-size: 1rem;
      font-weight: 500;
      color: var(--color-brown);
      outline: none;
      transition: box-shadow var(--transition-base);
    }

    .contact__form-field::placeholder {
      color: rgba(87, 25, 2, 0.45);
    }

    .contact__form-field:focus {
      box-shadow: 0 0 0 2px var(--color-brown);
    }

    .contact__form-field--full {
      grid-column: 1 / -1;
    }

    textarea.contact__form-field {
      resize: none;
      min-height: 9rem;
    }

    .contact__form-submit {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      margin-top: 0.5rem;
    }

    .contact__mailto {
      color: var(--color-brown);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: var(--color-orange);
      transition: color var(--transition-base);
      white-space: nowrap;
    }

    .contact__mailto:hover {
      color: var(--color-orange);
    }

    .btn-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-inline: auto;
      text-decoration: none;
      width: 9rem;           
      height: 2.4375rem;     
      max-width: 9rem;
      max-height: 2.4375rem;
      background-color: var(--color-pink);
      border-radius: var(--radius-btn);
      font-family: var(--font-main);
      font-size: calc(var(--fs-btn) * 0.6); 
      font-weight: 600;
      color: var(--color-brown);
      border: none;
      cursor: pointer;
      letter-spacing: 0.01em;
      transition: background-color var(--transition-base),
                  transform var(--transition-base);
    }

    .btn-submit:hover {
      background-color: #f03080;
      transform: scale(1.03);
    }

    
    .footer {
      background-color: var(--color-footer);
      color: var(--color-cream);
      min-height: 6.375rem;          
      display: flex;
      align-items: center;
      
      padding-top: 4rem;
      padding-bottom: 2.75rem; 
    }

    .footer__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.75rem 1rem;
      width: 100%;
      min-width: 0;
    }

    .footer__left,
    .footer__right {
      display: flex;
      align-items: center;
      white-space: nowrap;
      min-width: 0;
    }

    .footer__left { justify-content: flex-start; }
    .footer__right { justify-content: flex-end; }

    
    @media (min-width: 60rem) {
      .footer__inner {
        flex-wrap: nowrap;
      }
      .footer__left,
      .footer__right {
        flex-shrink: 1;
      }
      .footer__item {
        font-size: clamp(0.5625rem, 1.2vw, var(--fs-footer));
      }
    }

    
    @media (max-width: 59.9375rem) {
      .footer__inner {
        justify-content: center;
      }
      .footer__left,
      .footer__right {
        justify-content: center;
        flex: 0 0 100%;
      }
    }

    .footer__item {
      font-family: var(--font-main);
      font-size: var(--fs-footer);
      font-weight: 500;
      color: var(--color-cream);
      text-decoration: none;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }

    a.footer__item:hover {
      color: var(--color-orange);
    }

    
    .footer__divider {
      display: inline-block;
      width: 1px;
      height: 1.25rem;
      background-color: #FF5CA4;
      margin-inline: 1.125rem;       
      flex-shrink: 0;
    }

    
    .no-transition .card {
      transition: none !important;
    }

    
    .nav__hamburger {
      display: none; 
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      gap: 6px;
      width: 2rem;
      height: 2rem;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      z-index: 200;
      flex-shrink: 0;
    }

    .nav__hamburger-line {
      display: block;
      height: 2px;
      background-color: var(--color-brown);
      border-radius: 2px;
      transform-origin: center;
      transition:
        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    
    .nav__hamburger-line:nth-child(1) { width: 1.5rem; }
    .nav__hamburger-line:nth-child(2) { width: 1rem; }

    
    .nav__hamburger.is-open .nav__hamburger-line:nth-child(1) {
      width: 1.5rem;
      transform: translateY(4px) rotate(45deg);
      background-color: var(--color-white);
    }
    .nav__hamburger.is-open .nav__hamburger-line:nth-child(2) {
      width: 1.5rem;
      transform: translateY(-4px) rotate(-45deg);
      background-color: var(--color-white);
    }

    
    .nav.menu-open .nav__logo svg path {
      fill: var(--color-white);
      transition: fill 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    
    .mobile-menu {
      display: none; 
      position: fixed;
      inset: 0;
      z-index: 150;
      
      backdrop-filter: blur(24px) brightness(0.45);
      -webkit-backdrop-filter: blur(24px) brightness(0.45);
      background-color: rgba(20, 15, 10, 0.35);
      padding: calc(var(--nav-height) + 2.5rem) var(--gutter) 3rem;
      
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-menu.is-open {
      opacity: 1;
      pointer-events: all;
    }

    .mobile-menu__nav {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }

    .mobile-menu__primary,
    .mobile-menu__secondary {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .mobile-menu__link {
      text-decoration: none;
      font-family: var(--font-main);
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.1;
      transition: opacity 0.2s ease;
    }

    .mobile-menu__link:hover { opacity: 0.6; }

    .mobile-menu__link--primary {
      font-size: clamp(3rem, 14vw, 5rem);
      color: var(--color-white);
    }

    .mobile-menu__link--secondary {
      font-size: clamp(3rem, 14vw, 5rem);
      color: rgba(255, 255, 255, 0.45);
    }

    .mobile-menu__link--social {
      font-size: clamp(1rem, 5vw, 1.5rem);
      color: var(--color-white);
      font-weight: 600;
    }

    
    @media (max-width: 37.5rem) {
      .nav__hamburger { display: flex; }
      .mobile-menu    { display: block; }
    }

    
    @media (max-width: 64rem) {
      :root {
        --offset-mid:  20vw;
        --offset-back: 30vw;
      }
    }

    
    @media (max-width: 37.5rem) {
      :root {
        --gutter:         1.25rem;
        --fs-h2:          2.5rem;
        --fs-tagline:     1.25rem;
        --fs-btn:         1rem;
        --fs-nav:         1rem;
        --fs-footer:      0.75rem;  
        --fs-subtitle:    1rem;

        
        --card-front-w:   100vw;
        --card-front-h:   100dvh; 
        --stage-h:        100dvh;
      }

      
      .nav__links { display: none; }
      .nav__logo svg { height: 1.375rem; }

      
      .nav {
        position: fixed;
        background-color: transparent;
        width: 100%;
        z-index: 200; 
      }

      
      .hero {
        background: var(--color-cream);
        padding-top: 0;
      }

      
      .hero__stage {
        width: 100vw;
        height: var(--stage-h);
      }

      
      .card--slot-bl,
      .card--slot-ml,
      .card--slot-mr,
      .card--slot-br { display: none; }

      
      .card--slot-fc {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        top: 0;
        left: 0;
        translate: 0 0;
      }

      
      .about {
        padding-top: 2rem;
      }

      .about__body {
        font-size: var(--fs-subtitle);
        margin-bottom: 0.8rem;
      }

      
      .btn-cta {
        width: 11.25rem;   
        height: 3rem;      
        font-size: var(--fs-btn);
      }

      
      .contact__form {
        grid-template-columns: 1fr;
      }

      
      .footer__inner {
        justify-content: center;
        gap: 0.5rem 0.75rem;
      }

      .footer {
        padding-bottom: 0.825rem; 
      }
    }

    
    @media (prefers-reduced-motion: reduce) {
      .card {
        transition: none;
      }
      .contact {
        transition: max-height 0.01ms, padding 0.01ms;
      }
    }