:root {
      --alt-black: #252422;
      --alt-orange: #eb5e28;
      --alt-white: #fffcf2;
      --alt-charcoal: #403d39;

      --black-80: #1a1917;
      --black-66: #0f0e0c;
      --black-33: #0b0a09;

      --orange-80: #d64d1f;
      --orange-66: #b33a12;
      --orange-33: #89270d;

      --white-80: #f4f0e6;
      --white-66: #e6dfc9;
      --white-33: #d0c5b0;

      --alt-white-80: var(--white-80);
      --alt-white-66: var(--white-66);
      --alt-white-33: var(--white-33);

      --alt-orange-66: var(--orange-66);
      --alt-orange-33: var(--orange-33);

      --charcoal-80: #2a2824;
      --charcoal-66: #171512;
      --charcoal-33: #0b0a08;

      --font-heading: 'Special Gothic Expanded One', sans-serif;
      --font-body: 'Noto Sans', sans-serif;

      --spacing-xs: 4px;
      --spacing-sm: 8px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 32px;
      --spacing-xxl: 48px;

      --transition-fast: 0.2s ease-out;
      --transition-normal: 0.4s ease-out;
    }

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

    html {
      scroll-behavior: smooth;
      font-family: var(--font-body);
      color: var(--alt-white);
      background-color: var(--alt-black);
      line-height: 1.6;
    }

    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

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

    a {
      text-decoration: none;
      color: inherit;
    }

    section {
      min-height: 100vh;
      scroll-snap-align: center;
    }

    body {
      scroll-snap-type: y proximity;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: var(--spacing-md) var(--spacing-xl);
      background-color: rgba(37, 36, 34, 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--charcoal-66);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .header.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo {
      font-family: var(--font-heading);
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      font-weight: 600;
      color: var(--alt-orange);
      letter-spacing: 0.05em;
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .hero-transition {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--alt-charcoal);
      z-index: 999;
      pointer-events: none;
    }

    .hero-logo {
      font-family: var(--font-heading);
      font-size: clamp(3rem, 10vw, 6rem);
      font-weight: 600;
      color: var(--alt-orange);
      letter-spacing: 0.1em;
      text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);
      transition: font-size 0.1s linear, opacity 0.3s ease, color 0.3s ease;
    }

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-color: var(--alt-black);
      overflow: hidden;
      padding-top: 140vh;
      transition: padding-top 0.1s linear;
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('media/a.webp');
      background-image: -webkit-image-set(url('media/a.webp') type('image/webp'), url('media/a.jpg') type('image/jpeg'));
      background-image: image-set(url('media/a.webp') type('image/webp'), url('media/a.jpg') type('image/jpeg'));
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 800px;
      padding: var(--spacing-xl);
    }

    .hero-logo {
      margin-bottom: var(--spacing-md);
    }

    .hero-logo img {
      height: 64px;
      width: auto;
    }

    .hero-title {
      font-family: var(--font-heading);
      font-size: clamp(2.5rem, 8vw, 4.5rem);
      font-weight: 600;
      color: var(--alt-white);
      line-height: 1.1;
      margin-bottom: var(--spacing-md);
    }

    .hero-subtitle {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--alt-white-66);
      max-width: 480px;
      margin: 0 auto var(--spacing-xl);
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-md) var(--spacing-lg);
      background-color: var(--alt-orange);
      color: var(--alt-white);
      font-size: 1rem;
      font-weight: 600;
      border-radius: 4px;
      transition: transform var(--transition-fast), box-shadow var(--transition-normal);
    }

    .hero-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(235, 94, 40, 0.3);
    }

    .about {
      min-height: 100vh;
      display: flex;
      background-color: var(--alt-charcoal);
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .about::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('media/b.webp');
      background-image: -webkit-image-set(url('media/b.webp') type('image/webp'), url('media/b.jpg') type('image/jpeg'));
      background-image: image-set(url('media/b.webp') type('image/webp'), url('media/b.jpg') type('image/jpeg'));
      pointer-events: none;
    }

    .about-content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin: 0 auto var(--spacing-xl);
      text-align: center;
    }

    .about-title {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 600;
      color: var(--alt-white);
      margin-bottom: var(--spacing-md);
    }

    .about-text {
      font-size: clamp(1.05rem, 2vw, 1.15rem);
      color: var(--alt-white-66);
      max-width: 640px;
      margin: 0 auto var(--spacing-xl);
    }

    .about-highlight {
      font-family: var(--font-heading);
      font-size: clamp(1.3rem, 3vw, 1.5rem);
      color: var(--alt-orange);
      font-weight: 500;
      margin-top: var(--spacing-lg);
    }

    .services {
      min-height: 210vh;
      display: flex;
      background-color: var(--alt-black);
      align-items: center;
      position: relative;
    }

    .services::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('media/c.webp');
      background-image: -webkit-image-set(url('media/c.webp') type('image/webp'), url('media/c.jpg') type('image/jpeg'));
      background-image: image-set(url('media/c.webp') type('image/webp'), url('media/c.jpg') type('image/jpeg'));
      pointer-events: none;
    }

    .services-content {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto var(--spacing-xl);
    }

    .services-title {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 600;
      color: var(--alt-white);
      text-align: center;
      margin-bottom: var(--spacing-xxl);
    }

    .services-grid {
      display: grid;
      gap: var(--spacing-xl);
    }

    .service-card {
      background-color: var(--charcoal-33);
      border-radius: 8px;
      overflow: hidden;
      transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    }

    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(64, 61, 57, 0.3);
    }

    .service-image {
      width: 100%;
      height: 380px;
      object-fit: cover;
    }

    .service-content {
      padding: var(--spacing-lg);
    }

    .service-title {
      font-family: var(--font-heading);
      font-size: clamp(1.25rem, 3vw, 1.5rem);
      font-weight: 600;
      color: var(--alt-white);
      margin-bottom: var(--spacing-sm);
    }

    .service-description {
      font-size: 0.95rem;
      color: var(--alt-white-66);
      line-height: 1.7;
    }



    .contact {
      min-height: 125vh;
      display: flex;
      align-items: center;
      background: linear-gradient(180deg, var(--alt-orange) 0%, var(--orange-66) 50%, var(--orange-33) 100%);
      position: relative;
    }

    .contact::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('media/d.webp');
      background-image: -webkit-image-set(url('media/d.webp') type('image/webp'), url('media/d.jpg') type('image/jpeg'));
      background-image: image-set(url('media/d.webp') type('image/webp'), url('media/d.jpg') type('image/jpeg'));
      pointer-events: none;
    }

    .contact-content {
      position: relative;
      z-index: 1;
      max-width: 640px;
      margin: 0 auto var(--spacing-xl);
      text-align: center;
    }

    .contact-title {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 600;
      color: var(--alt-white);
      margin-bottom: var(--spacing-md);
    }

    .contact-title-orange {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 600;
      color: var(--alt-orange);
      margin-bottom: var(--spacing-md);
    }

    .contact-subtitle {
      font-size: 1.05rem;
      color: var(--alt-white-66);
      margin-bottom: var(--spacing-xl);
    }

    .contact-highlight {
      font-size: clamp(2rem, 5vw, 3rem);
      color: var(--alt-orange);
      font-weight: 600;
      margin-top: var(--spacing-md);
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
    }

    .form-group {
      text-align: left;
    }

    .form-label {
      font-size: 0.85rem;
      color: var(--alt-white-66);
      margin-bottom: var(--spacing-xs);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .form-input,
    .form-select {
      width: 100%;
      padding: var(--spacing-md) var(--spacing-lg);
      background-color: rgba(255, 252, 242, 0.95);
      border: none;
      border-radius: 4px;
      font-family: var(--font-body);
      font-size: 1rem;
      color: var(--alt-black);
      transition: box-shadow var(--transition-fast);
    }

    .form-input:focus,
    .form-select:focus {
      outline: none;
      box-shadow: 0 0 0 2px var(--alt-orange);
    }

    .form-textarea {
      resize: vertical;
      min-height: 140px;
    }

    .contact-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-sm);
      padding: var(--spacing-lg) var(--spacing-xl);
      background-color: var(--alt-orange);
      color: var(--alt-white);
      font-size: 1.05rem;
      font-weight: 600;
      border-radius: 4px;
      transition: transform var(--transition-fast), box-shadow var(--transition-normal);
    }

    .contact-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(37, 36, 34, 0.4);
    }

    .contact-form.shake {
      animation: shake 0.5s ease-in-out;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      75% { transform: translateX(8px); }
    }

    .contact-feedback {
      padding: var(--spacing-md) var(--spacing-lg);
      border-radius: 4px;
      font-size: 0.95rem;
      margin-bottom: var(--spacing-md);
      display: none;
    }

    .contact-feedback.success {
      display: block;
      background-color: rgba(34, 197, 94, 0.15);
      border: 1px solid rgba(34, 197, 94, 0.4);
      color: #86efac;
    }

    .contact-feedback.error {
      display: block;
      background-color: rgba(239, 68, 68, 0.15);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #fca5a5;
    }

    .footer {
      min-height: 50vh;
      display: flex;
      align-items: center;
      background-color: var(--alt-charcoal);
      position: relative;
    }

    .footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url('media/e.webp');
      background-image: -webkit-image-set(url('media/e.webp') type('image/webp'), url('media/e.jpg') type('image/jpeg'));
      background-image: image-set(url('media/e.webp') type('image/webp'), url('media/e.jpg') type('image/jpeg'));
      pointer-events: none;
    }

    .footer-content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin: 0 auto var(--spacing-xl);
      text-align: center;
    }

    .footer-logo {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 600;
      color: var(--alt-orange);
      margin-bottom: var(--spacing-lg);
    }

    .footer-logo img {
      height: 80px;
      width: auto;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      gap: var(--spacing-xl);
      margin-bottom: var(--spacing-lg);
    }

    .footer-link {
      font-size: 0.9rem;
      color: var(--alt-white-66);
      transition: color var(--transition-fast);
    }

    .footer-link:hover {
      color: var(--alt-orange);
    }

    .footer-bottom {
      border-top: 1px solid var(--charcoal-80);
      padding-top: var(--spacing-lg);
      margin-top: var(--spacing-xl);
    }

    .footer-copyright {
      font-size: 0.85rem;
      color: var(--alt-white-66);
    }

    @media (max-width: 1200px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 968px) {
      .hero-logo img {
        height: 48px;
      }

      .hero-title {
        font-size: clamp(2rem, 7vw, 3.5rem);
      }

      .hero-subtitle {
        max-width: 360px;
      }

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

      .service-image {
        height: 280px;
      }

      .footer-links {
        flex-direction: column;
        gap: var(--spacing-md);
      }
    }

    @media (max-width: 640px) {

      .hero-content {
        padding: var(--spacing-lg);
      }

      .hero-cta {
        width: 100%;
        justify-content: center;
      }

      .service-card {
        margin-bottom: var(--spacing-md);
      }

      .form-input,
      .form-select,
      .form-textarea {
        padding: var(--spacing-sm) var(--spacing-md);
      }

      .contact-cta {
        width: 100%;
        justify-content: center;
      }
    }