:root {
      --graphite: #252829;
      --champagne: #f7e7ce;
      --white: #fbfbfb;
    }

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

    body {
      font-family: 'Montserrat Alternates', sans-serif;
      background-color: #fff;
      color: var(--graphite);
    }

    img {
      display: block;
    }

    /* ─── HEADER ─────────────────────────────── */
    .header-wrap {
      position: sticky;
      top: 0;
      z-index: 200;
      background-color: var(--white);
    }

    header {
      max-width: 1512px;
      margin: 0 auto;
      padding: 24px 110px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-logo {
      flex-shrink: 0;
      text-decoration: none;
      display: flex;
    }

    .header-logo img {
      height: 36px;
      width: 118px;
      object-fit: contain;
    }

    .header-menu {
      display: flex;
      gap: 32px;
      align-items: center;
    }

    .header-menu a {
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      color: #2b2b2b;
      text-decoration: none;
    }

    .header-menu a:hover {
      opacity: 0.7;
    }

    .header-socials {
      display: flex;
      gap: 32px;
      align-items: center;
    }

    .header-socials img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .header-right {
      display: flex;
      gap: 32px;
      align-items: center;
    }

    .lang-switcher {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #2b2b2b;
    }

    .lang-switcher a {
      text-decoration: none;
      color: #2b2b2b;
      opacity: 0.45;
    }

    .lang-switcher a:hover {
      opacity: 0.7;
    }

    .lang-switcher .active {
      opacity: 1;
    }

    .lang-divider {
      opacity: 0.3;
    }

    /* ─── MAIN WRAPPER ───────────────────────── */
    main {
      max-width: 1512px;
      margin: 0 auto;
      background-color: var(--white);
      display: flex;
      flex-direction: column;
      gap: 120px;
    }

    /* ─── DISPLAY & INTRO ────────────────────── */
    .display-intro {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .display {
      position: relative;
      width: 100%;
      padding: 120px 110px;
      display: flex;
      flex-direction: column;
      gap: 64px;
      border-radius: 4px;
      overflow: hidden;
    }

    .display-bg-img,
    .display-bg-overlay {
      position: absolute;
      inset: 0;
    }

    .display-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .display-bg-overlay {
      background: rgba(43, 43, 43, 0.35);
    }

    .display-body {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .display-btn-wrap {
      position: relative;
    }

    .display-headline {
      font-size: 96px;
      font-weight: 600;
      line-height: 1.05;
      color: var(--champagne);
    }

    .display-tagline {
      font-size: 24px;
      font-weight: 600;
      line-height: 48px;
      color: var(--white);
    }

    .btn-primary {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(--graphite);
      color: var(--white);
      font-family: 'Montserrat Alternates', sans-serif;
      font-size: 24px;
      font-weight: 600;
      height: 60px;
      padding: 0 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 420px;
      text-decoration: none;
    }

    .btn-primary:hover {
      opacity: 0.9;
    }

    .intro {
      position: relative;
      width: 100%;
      padding: 160px 110px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      overflow: hidden;
    }

    .intro-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .intro-text {
      position: relative;
      width: 572px;
      font-size: 24px;
      font-weight: 600;
      line-height: 48px;
      color: var(--graphite);
    }

    /* ─── SERVICES ───────────────────────────── */
    .services {
      display: flex;
      flex-direction: column;
      gap: 60px;
      align-items: center;
    }

    .services-title {
      width: 100%;
      padding: 0 110px;
      font-size: 64px;
      font-weight: 600;
      line-height: 1;
      color: var(--graphite);
    }

    .services-body {
      display: flex;
      flex-direction: column;
      gap: 44px;
      width: 100%;
    }

    /* Generic service row */
    .service-row {
      display: flex;
      gap: 20px;
      height: 600px;
      align-items: center;
      overflow: hidden;
      padding: 0 110px;
    }

    .service-row.bg-champagne {
      background-color: var(--champagne);
      padding: 60px 110px;
    }

    /* Text card */
    .service-card {
      flex-shrink: 0;
      width: 440px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 36px;
      padding: 60px 36px;
      border-radius: 4px;
      background-color: var(--champagne);
      color: var(--graphite);
    }

    .service-card.plain {
      background: transparent;
      padding: 40px 24px;
    }

    .service-card h2 {
      font-size: 32px;
      font-weight: 600;
      line-height: 48px;
    }

    .service-card .body-text {
      flex: 1;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
    }

    .service-card .body-text p + p {
      margin-top: 16px;
    }

    /* Image grids */
    .service-imgs {
      flex: 1;
      height: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow: hidden;
    }

    .service-imgs-row {
      flex: 1;
      display: flex;
      gap: 20px;
      min-height: 0;
    }

    .service-imgs img {
      object-fit: cover;
    }

    .service-imgs-row .img-narrow {
      flex-shrink: 0;
      width: 292px;
      height: 100%;
      object-fit: cover;
    }

    .service-imgs-row .img-wide {
      flex: 1;
      min-width: 0;
      height: 100%;
      object-fit: cover;
    }

    /* Production — images left (column + wide) */
    .prod-imgs {
      flex: 1;
      height: 100%;
      min-width: 0;
      display: flex;
      gap: 20px;
      align-items: center;
      overflow: hidden;
    }

    .prod-imgs-col {
      flex-shrink: 0;
      width: 292px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow: hidden;
    }

    .prod-imgs-col img {
      flex: 1;
      width: 100%;
      min-height: 0;
      object-fit: cover;
    }

    .prod-imgs .img-main {
      flex: 1;
      min-width: 0;
      height: 100%;
      object-fit: cover;
    }

    /* Decor images */
    .decor-imgs {
      flex: 1;
      height: 100%;
      min-width: 0;
      display: flex;
      gap: 20px;
      align-items: center;
      overflow: hidden;
    }

    .decor-imgs .img-main {
      flex: 1;
      min-width: 0;
      height: 100%;
      object-fit: cover;
    }

    .decor-imgs-col {
      flex-shrink: 0;
      width: 292px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow: hidden;
    }

    .decor-imgs-col img {
      flex: 1;
      width: 100%;
      min-height: 0;
      object-fit: cover;
    }

    /* ─── CONTACT FORM ───────────────────────── */
    .contact-section {
      position: relative;
      padding: 120px 110px;
      display: flex;
      flex-direction: column;
      gap: 60px;
      overflow: hidden;
    }

    .contact-section .bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .contact-heading {
      position: relative;
      display: flex;
align-items: center;
      flex-direction: column;
      gap: 20px;
    }

    .contact-heading h2 {
      font-size: 32px;
      font-weight: 600;
      line-height: 48px;
      color: var(--graphite);
    }

    .contact-heading p {
      font-size: 24px;
      font-weight: 400;
      line-height: 40px;
      color: var(--graphite);
    }

    .contact-form {
      position: relative;
      width: 440px;
      display: flex;
      flex-direction: column;
      gap: 36px;
    }

    .form-fields {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .form-input {
      background-color: var(--white);
      border-radius: 4px;
      padding: 4px 36px;
      height: 60px;
      display: flex;
      align-items: center;
      border: none;
    }

    .form-input input,
    .form-input textarea {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      font-family: 'Montserrat Alternates', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      color: var(--graphite);
      resize: none;
    }

    .form-input.textarea {
      height: 120px;
      align-items: flex-start;
      padding-top: 14px;
      padding-bottom: 14px;
    }

    .form-input input::placeholder,
    .form-input textarea::placeholder {
      color: var(--graphite);
      opacity: 0.6;
    }

    .btn-primary.full-width {
      width: 100%;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .field-error {
      display: none;
      font-family: 'Montserrat Alternates', sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      color: var(--graphite);
    }

    .field-error.is-visible {
      display: block;
    }

    .form-input.has-error input::placeholder,
    .form-input.has-error textarea::placeholder {
      color: #1173d4;
      opacity: 1;
    }

    /* ─── CONTACT SUCCESS ────────────────────── */
    .contact-success {
      display: none;
      flex-direction: column;
      width: 573px;
    }
    .contact-success.is-visible { display: flex; }
    .contact-success-bg { display: none; }
    .contact-success-overlay { display: none; }
    .contact-success-text p {
      font-size: 32px;
      font-weight: 600;
      line-height: 48px;
      color: var(--graphite);
    }
    .contact-success-text p + p { margin-top: 16px; }

    /* ─── ABOUT ──────────────────────────────── */
    .about-section {
      display: flex;
      gap: 20px;
      height: 600px;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 0 110px;
    }

    .about-body {
      flex-shrink: 0;
      width: 440px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 36px;
      padding-right: 40px;
      color: var(--graphite);
    }

    .about-body h1 {
      font-size: 64px;
      font-weight: 600;
      line-height: 1;
    }

    .about-body .body-text {
      flex: 1;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
    }

    .about-body .body-text p + p {
      margin-top: 16px;
    }

    .about-img {
      flex: 1;
      min-width: 0;
      height: 100%;
      object-fit: cover;
    }

    /* ─── CONTACTS ───────────────────────────── */
    .contacts-section {
      position: relative;
      display: flex;
      gap: 20px;
      align-items: center;
      justify-content: flex-end;
      padding: 120px 110px;
      overflow: hidden;
    }

    .contacts-section .bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .contacts-map {
      position: relative;
      flex: 1;
      min-width: 0;
      height: 583px;
      border-radius: 4px;
      background: rgba(255,255,255,0.1);
    }

    .contacts-card {
      position: relative;
      flex: 1;
      min-width: 0;
      height: 583px;
      background-color: var(--white);
      border-radius: 4px;
      padding: 60px;
      display: flex;
      flex-direction: column;
      gap: 36px;
      align-items: center;
      overflow: hidden;
    }

    .contacts-card h2 {
      font-size: 32px;
      font-weight: 600;
      line-height: 48px;
      color: #000;
      width: 100%;
    }

    .contacts-info {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      color: #000;
    }

    .contacts-info-item {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .contacts-info-item .label {
      font-size: 24px;
      font-weight: 400;
      line-height: 40px;
    }

    .contacts-info-item .value {
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
    }

    .contacts-socials {
      display: flex;
      gap: 36px;
      align-items: center;
      justify-content: center;
    }

    .contacts-socials img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    /* ─── Mobile-only defaults (hidden on desktop) ─ */
    .burger-btn { display: none; }
    .mobile-services-grid { display: none; }
    .mobile-service-panel { display: none; }
    .intro-overlay { display: none; }

    /* ─── Mobile (<1250px) ─────────────────────── */
    @media (max-width: 1249px) {
      /* Header */
      header { max-width: 100%; padding: 16px; }
      .header-logo img { height: 24px; width: 79px; }
      .header-menu { display: none; }
      .header-right { display: none; }
      .burger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 2px;
        cursor: pointer;
        flex-shrink: 0;
      }
      .burger-btn img { width: 24px; height: 24px; object-fit: contain; }

      /* Main */
      main { max-width: 100%; gap: 0; }

      /* Display */
      .display { padding: 120px 0; gap: 36px; border-radius: 0; align-items: center; }
      .display-body { width: 100%; max-width: 400px; padding: 0 16px; align-items: center; overflow: hidden; flex-shrink: 0; }
      .display-headline { font-size: 48px; line-height: 64px; width: 100%; }
      .display-tagline { font-size: 16px; font-weight: 400; line-height: 32px; width: 100%; }
      .display-btn-wrap { width: 100%; max-width: 400px; padding: 0 16px; align-items: center; overflow: hidden; flex-shrink: 0; }
      .display-btn-wrap .btn-primary { justify-content: center; padding: 8px 32px; height: auto; width: auto; }
      .btn-primary { font-size: 16px; font-weight: 400; height: auto; padding: 8px 32px; }
      .btn-primary.full-width { width: 100%; }

      /* Intro */
      .intro { padding: 64px 0; justify-content: center; }
      .intro-overlay { display: block; position: absolute; inset: 0; background: rgba(37,40,41,0.35); }
      .intro-text { width: 100%; max-width: 400px; padding: 0 16px; font-size: 16px; font-weight: 400; line-height: 32px; color: var(--white); }
      .intro-text p + p { margin-top: 0; }

      /* Services */
      .services { padding: 36px 0; gap: 24px; align-items: center; }
      .services-title { font-size: 48px; padding: 0 16px; max-width: 400px; }
      .services-body { display: none;}
      .mobile-services-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 16px;
max-width: 400px;
        width: 100%;
      }
      .mobile-services-row { display: flex; gap: 8px; width: 100%; max-width: 400px;}
      .mobile-service-btn {
        flex: 1;
        min-width: 0;
        background-color: var(--graphite);
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        text-decoration: none;
      }
      .mobile-service-label {
        padding: 8px;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: var(--white);
      }
      .mobile-service-img { position: relative; height: 160px; overflow: hidden; flex-shrink: 0; }
      .mobile-service-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .mobile-service-img::after { content: ''; position: absolute; inset: 0; background: rgba(37,40,41,0.35); }
      .mobile-service-btn { border: none; appearance: none; -webkit-appearance: none; padding: 0; }

      /* Service expandable panels */
      .mobile-services-grid.is-hidden { display: none !important; }
      .mobile-service-panel.is-active { display: block; }
      .svc-wrapper { display: flex; flex-direction: column; gap: 16px; }
      .svc-wrapper-white { padding: 0 16px; }
      .svc-wrapper-champagne { background: var(--champagne); padding: 36px 16px; }
      .svc-others { display: flex; gap: 8px; }
      .svc-others-btn {
        flex: 1; height: 144px; background: var(--graphite);
        border: none; cursor: pointer; border-radius: 4px; overflow: hidden;
        display: flex; flex-direction: column; padding: 0;
      }
      .svc-others-btn span {
        display: block; font-family: 'Montserrat Alternates', sans-serif;
        font-size: 12px; font-weight: 400; line-height: 24px;
        color: var(--white); text-align: center; padding: 8px 0; flex-shrink: 0;
      }
      .svc-others-pic { flex: 1; min-height: 0; position: relative; overflow: hidden; }
      .svc-others-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      .svc-others-pic::after { content: ''; position: absolute; inset: 0; background: rgba(37,40,41,0.35); }
      .svc-body { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; }
      .svc-h2 { font-size: 32px; font-weight: 600; line-height: 48px; color: var(--graphite); margin: 0; }
      .svc-h2-narrow { max-width: 296px; }
      .svc-text-sm { font-size: 12px; line-height: 24px; color: var(--graphite); }
      .svc-text-lg { font-size: 16px; line-height: 32px; color: var(--graphite); }
      .svc-text-sm p + p, .svc-text-lg p + p { margin-top: 16px; }
      .svc-text-sm p, .svc-text-lg p { margin: 0; }
      .svc-images { display: flex; flex-direction: column; gap: 8px; }
      .svc-img-row { display: flex; gap: 8px; }
      .svc-img { position: relative; overflow: hidden; }
      .svc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      .svc-img-h160 { height: 160px; }
      .svc-img-h134 { height: 134px; }
      .svc-img-h328 { height: 328px; }
      .svc-img-h350 { height: 350px; }
      .svc-img-w136 { width: 136px; flex-shrink: 0; }
      .svc-img-flex { flex: 1; min-width: 0; }
      .svc-img-full { width: 100%; }

      /* Contact form */
      .contact-section { padding: 36px 0; gap: 24px; }
      .contact-success {
        position: relative;
        width: 100%;
        min-height: 400px;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        padding: 24px 40px;
      }
      .contact-success-bg {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .contact-success-overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(37,40,41,0.35);
      }
      .contact-success-text { position: relative; z-index: 1; text-align: center; }
      .contact-success-text p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: var(--white);
      }
      .contact-success-text p + p { margin-top: 16px; }
      .contact-heading { padding: 0 16px; max-width: 400px; width: 100%; align-self: center; }
      .contact-heading h2 { font-size: 24px; font-weight: 400; line-height: 40px; }
      .contact-heading p { font-size: 12px; line-height: 24px; align-self:flex-start; }
      .contact-form { padding: 0 16px; max-width: 400px; width: 100%; align-self: center; }
      .form-input { padding: 4px 16px; }
      .form-input input, .form-input textarea { font-size: 12px; line-height: 24px; }
      .field-error { font-size: 12px; line-height: 24px; }

      /* About */
      .about-section { height: auto; padding: 36px 16px; gap: 24px; flex-direction: column; align-items: center; }
      .about-body { display: contents; }
      .about-body h1 { order: 1; font-size: 48px; width: 100%; max-width: 400px; }
      .about-body .body-text { order: 3; width: 100%; max-width: 400px; flex: none; }
      .about-img { order: 2; flex: none; width: 100%; max-width: 400px; height: 348px; }

      /* Contacts */
      .contacts-section { padding: 60px 16px; justify-content: center; }
      .contacts-map { display: none; }
      .contacts-card { flex: none; width: 100%; max-width: 400px; opacity: 0.75; }
      .contacts-card h2 { font-size: 24px; font-weight: 400; line-height: 40px; text-align: center; }
      .contacts-info-item .label { font-size: 16px; line-height: 24px; }
      .contacts-info-item .value { font-size: 12px; line-height: 24px; }
    }

    /* ─── MOBILE MENU OVERLAY ────────────────── */
    .mobile-menu-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--white);
      flex-direction: column;
    }
    .mobile-menu-overlay.is-open {
      display: flex;
    }
    .mobile-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      height: 56px;
      flex-shrink: 0;
    }
    .mobile-menu-logo img {
      height: 24px;
      width: 79px;
      object-fit: contain;
    }
    .mobile-menu-close {
      background: none;
      border: none;
      padding: 2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-menu-close img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
    .mobile-menu-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 64px;
      padding: 24px 96px;
      overflow: hidden;
    }
    .mobile-menu-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      padding: 8px 0;
    }
    .mobile-menu-links a {
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
      color: #2b2b2b;
      text-decoration: none;
      text-align: center;
      white-space: nowrap;
    }
    .mobile-menu-links a:hover { opacity: 0.7; }

    .mobile-menu-socials {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      padding: 8px 0;
    }
    .mobile-menu-socials a { display: flex; align-items: center; }
    .mobile-menu-socials img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    /* ─── MacBook 16" (>1600px) ──────────────── */
    @media (min-width: 1600px) {
      header {
        max-width: 1728px;
        padding: 24px 200px;
      }

      main {
        max-width: 1728px;
      }

      .display {
        padding: 120px 200px;
      }

      .intro {
        padding: 160px 200px;
      }

      .services-title {
        padding: 0 200px;
      }

      .service-row {
        padding: 0 200px;
      }

      .service-row.bg-champagne {
        padding: 60px 200px;
      }

      .contact-section {
        padding: 120px 200px;
      }

      .about-section {
        padding: 0 200px;
      }

      .contacts-section {
        padding: 120px 200px;
      }
    }