/*
=======================================================================
SAFEIFY — POSITIONING FOR CONTACT PAGE
FILE: positioning-contact.css
=======================================================================

PURPOSE
-------
This file is the desktop/laptop manual control panel for contact.html.
It lets you freely move and resize the Contact page without changing
other pages.

LOAD ORDER
----------
1. global.css
2. contact.css
3. responsive.css
4. positioning-contact.css   <-- KEEP THIS LAST

DESKTOP / LAPTOP ONLY
---------------------
Manual controls below apply only when the screen is wider than 900px.
Tablet/mobile remain under responsive.css.

POSITION RULES
--------------
X positive = right      X negative = left
Y positive = down       Y negative = up
Scale 1 = normal        1.10 = 10% bigger      0.90 = 10% smaller
=======================================================================
*/

:root {

  /* =========================================================
     PAGE BACKGROUND
  ========================================================= */
  --contact-background-size: cover;
  --contact-background-position-x: 50%;
  --contact-background-position-y: 50%;


  /* =========================================================
     COMPLETE HEADER CONTAINER
  ========================================================= */
  --contact-header-container-width: 1800px;
  --contact-header-container-x: 0px;
  --contact-header-container-y: 0px;
  --contact-header-edge-space: clamp(20px, 3vw, 70px);

  /* Logo + brand */
  --contact-header-logo-x: -330px;
  --contact-header-logo-y: 0px;
  --contact-logo-size: 42px;
  --contact-brand-text-size: 16px;

  /* Navigation */
  --contact-header-nav-x: 20px;
  --contact-header-nav-y: 0px;
  --contact-nav-font-size: 18px;
  --contact-nav-padding-y: 14px;
  --contact-nav-padding-x: 8px;
  --contact-nav-gap: 30px;

  /* Header CTA */
  --contact-header-cta-x: 330px;
  --contact-header-cta-y: 0px;
  --contact-header-cta-font-size: 14px;
  --contact-header-cta-height: 48px;
  --contact-header-cta-padding-x: 22px;


  /* =========================================================
     HERO — COMPLETE CONTENT
  ========================================================= */
  --contact-hero-x: 430px;
  --contact-hero-y: 0px;
  --contact-hero-container-width: 1500px;

  --contact-hero-eyebrow-size: 15px;

  --contact-hero-heading-width: 1100px;
  --contact-hero-heading-size: 72px;
  --contact-hero-heading-line-height: 1.03;

  --contact-hero-paragraph-width: 850px;
  --contact-hero-paragraph-size: 17px;


  /* =========================================================
     COMPLETE CONTACT AREA / TWO-COLUMN LAYOUT
  ========================================================= */
  --contact-layout-x: 450px;
  --contact-layout-y: -100px;
  --contact-layout-width: 1550px;
  --contact-layout-gap: 60px;
  --contact-layout-left-column: 0.8fr;
  --contact-layout-right-column: 1.2fr;


  /* =========================================================
     LEFT COLUMN — CONTACT INTRO
  ========================================================= */
  --contact-intro-x: 0px;
  --contact-intro-y: 0px;
  --contact-intro-width: 600px;

  --contact-intro-eyebrow-size: 15px;

  --contact-intro-heading-width: 600px;
  --contact-intro-heading-size: 52px;
  --contact-intro-heading-line-height: 1.05;

  --contact-intro-paragraph-width: 560px;
  --contact-intro-paragraph-size: 16px;


  /* =========================================================
     LEFT COLUMN — CONTACT CARD GRID / SPACING
  ========================================================= */
  --contact-info-gap: 15px;

  /* Shared card appearance/size */
  --contact-box-width: 100%;
  --contact-box-min-height: 100px;
  --contact-box-padding-y: 24px;
  --contact-box-padding-x: 24px;
  --contact-box-radius: 16px;

  /* Shared card text sizes */
  --contact-box-label-size: 16px;
  --contact-box-content-size: 14px;
  --contact-box-label-bottom-space: 5px;


  /* =========================================================
     CONTACT BOX 1 — EMAIL
     Moves/resizes COMPLETE box
  ========================================================= */
  --contact-box-1-x: 0px;
  --contact-box-1-y: 0px;
  --contact-box-1-scale: 1;
  --contact-box-1-width: 100%;
  --contact-box-1-height: auto;

  /* Moves only text INSIDE box 1 */
  --contact-box-1-content-x: 0px;
  --contact-box-1-content-y: 0px;


  /* =========================================================
     CONTACT BOX 2 — LOCATION
  ========================================================= */
  --contact-box-2-x: 0px;
  --contact-box-2-y: 0px;
  --contact-box-2-scale: 1;
  --contact-box-2-width: 100%;
  --contact-box-2-height: auto;

  --contact-box-2-content-x: 0px;
  --contact-box-2-content-y: 0px;


  /* =========================================================
     CONTACT BOX 3 — AVAILABILITY
  ========================================================= */
  --contact-box-3-x: 0px;
  --contact-box-3-y: 0px;
  --contact-box-3-scale: 1;
  --contact-box-3-width: 100%;
  --contact-box-3-height: auto;

  --contact-box-3-content-x: 0px;
  --contact-box-3-content-y: 0px;


  /* =========================================================
     CONTACT FORM — COMPLETE FORM BOX
  ========================================================= */
  --contact-form-x: 0px;
  --contact-form-y: 0px;
  --contact-form-scale: 1;

  --contact-form-width: 100%;
  --contact-form-min-height: auto;
  --contact-form-padding-y: 34px;
  --contact-form-padding-x: 34px;
  --contact-form-radius: 16px;


  /* =========================================================
     CONTACT FORM — GRID
  ========================================================= */
  --contact-form-column-gap: 18px;
  --contact-form-row-gap: 18px;
  --contact-form-left-column: 1fr;
  --contact-form-right-column: 1fr;


  /* =========================================================
     FORM FIELD 1 — NAME
     Moves complete label + input block
  ========================================================= */
  --contact-name-field-x: 0px;
  --contact-name-field-y: 0px;
  --contact-name-field-width: 100%;

  /* Internal label/input movement */
  --contact-name-label-x: 0px;
  --contact-name-label-y: 0px;
  --contact-name-input-x: 0px;
  --contact-name-input-y: 0px;


  /* =========================================================
     FORM FIELD 2 — EMAIL
  ========================================================= */
  --contact-email-field-x: 0px;
  --contact-email-field-y: 0px;
  --contact-email-field-width: 100%;

  --contact-email-label-x: 0px;
  --contact-email-label-y: 0px;
  --contact-email-input-x: 0px;
  --contact-email-input-y: 0px;


  /* =========================================================
     FORM FIELD 3 — AREA OF INTEREST
  ========================================================= */
  --contact-service-field-x: 0px;
  --contact-service-field-y: 0px;
  --contact-service-field-width: 100%;

  --contact-service-label-x: 0px;
  --contact-service-label-y: 0px;
  --contact-service-input-x: 0px;
  --contact-service-input-y: 0px;


  /* =========================================================
     FORM FIELD 4 — PROJECT DETAILS
  ========================================================= */
  --contact-message-field-x: 0px;
  --contact-message-field-y: 0px;
  --contact-message-field-width: 100%;

  --contact-message-label-x: 0px;
  --contact-message-label-y: 0px;
  --contact-message-input-x: 0px;
  --contact-message-input-y: 0px;


  /* =========================================================
     SHARED FORM LABEL / INPUT / SELECT / TEXTAREA CONTROLS
  ========================================================= */
  --contact-field-gap: 7px;

  --contact-label-size: 12px;

  --contact-control-height: 48px;
  --contact-control-font-size: 14px;
  --contact-control-padding-y: 13px;
  --contact-control-padding-x: 14px;
  --contact-control-radius: 10px;

  --contact-textarea-height: 150px;


  /* =========================================================
     SEND BUTTON AREA
  ========================================================= */
  --contact-send-area-x: 0px;
  --contact-send-area-y: 0px;
  --contact-send-area-gap: 14px;
  --contact-send-area-top-space: 20px;

  /* Button itself */
  --contact-send-button-x: 0px;
  --contact-send-button-y: 0px;
  --contact-send-button-height: 48px;
  --contact-send-button-font-size: 15px;
  --contact-send-button-padding-x: 24px;

  /* Status text */
  --contact-form-status-x: 0px;
  --contact-form-status-y: 0px;
  --contact-form-status-size: 13px;


  /* =========================================================
     FOOTER BRAND COLUMN
  ========================================================= */
  --contact-footer-brand-x: 0px;
  --contact-footer-brand-y: 0px;
  --contact-footer-brand-scale: 1;

  /* Footer Explore */
  --contact-footer-explore-x: 0px;
  --contact-footer-explore-y: 0px;
  --contact-footer-explore-scale: 1;

  /* Footer Contact */
  --contact-footer-contact-x: 0px;
  --contact-footer-contact-y: 0px;
  --contact-footer-contact-scale: 1;

  /* Footer bottom row */
  --contact-footer-bottom-x: 0px;
  --contact-footer-bottom-y: 0px;
}


/* =====================================================================
   APPLY MANUAL CONTROLS — DESKTOP / LAPTOP ONLY
===================================================================== */
@media (min-width: 901px) {

  /* =========================================================
     PAGE BACKGROUND
  ========================================================= */
  html[data-page="contact"] body.subpage {
    background-size: var(--contact-background-size) !important;
    background-position:
      var(--contact-background-position-x)
      var(--contact-background-position-y) !important;
  }


  /* =========================================================
     COMPLETE HEADER CONTAINER
  ========================================================= */
  html[data-page="contact"] .site-header .navbar {
    width: min(
      calc(100% - (var(--contact-header-edge-space) * 2)),
      var(--contact-header-container-width)
    ) !important;
    max-width: var(--contact-header-container-width) !important;
    position: relative;
    left: var(--contact-header-container-x);
    top: var(--contact-header-container-y);
    box-sizing: border-box;
  }

  html[data-page="contact"] .navbar > .brand {
    transform: translate(
      var(--contact-header-logo-x),
      var(--contact-header-logo-y)
    );
    font-size: var(--contact-brand-text-size) !important;
  }

  html[data-page="contact"] .brand-logo {
    width: var(--contact-logo-size) !important;
    height: var(--contact-logo-size) !important;
  }

  html[data-page="contact"] .navbar > .nav-links {
    transform: translate(
      var(--contact-header-nav-x),
      var(--contact-header-nav-y)
    );
    gap: var(--contact-nav-gap) !important;
  }

  html[data-page="contact"] .navbar > .nav-links > a {
    font-size: var(--contact-nav-font-size) !important;
    padding:
      var(--contact-nav-padding-y)
      var(--contact-nav-padding-x) !important;
  }

  html[data-page="contact"] .navbar > .header-cta {
    transform: translate(
      var(--contact-header-cta-x),
      var(--contact-header-cta-y)
    );
    min-height: var(--contact-header-cta-height) !important;
    padding-left: var(--contact-header-cta-padding-x) !important;
    padding-right: var(--contact-header-cta-padding-x) !important;
    font-size: var(--contact-header-cta-font-size) !important;
  }


  /* =========================================================
     HERO
  ========================================================= */
  html[data-page="contact"] .page-hero > .container {
    position: relative;
    left: var(--contact-hero-x);
    top: var(--contact-hero-y);
    width: var(--contact-hero-container-width) !important;
    max-width: none !important;
  }

  html[data-page="contact"] .page-hero .eyebrow {
    font-size: var(--contact-hero-eyebrow-size) !important;
  }

  html[data-page="contact"] .page-hero h1 {
    width: var(--contact-hero-heading-width) !important;
    max-width: var(--contact-hero-heading-width) !important;
    font-size: var(--contact-hero-heading-size) !important;
    line-height: var(--contact-hero-heading-line-height) !important;
  }

  html[data-page="contact"] .page-hero > .container > p:not(.eyebrow) {
    width: var(--contact-hero-paragraph-width) !important;
    max-width: var(--contact-hero-paragraph-width) !important;
    font-size: var(--contact-hero-paragraph-size) !important;
  }


  /* =========================================================
     COMPLETE CONTACT LAYOUT
  ========================================================= */
  html[data-page="contact"] .contact-layout {
    position: relative;
    left: var(--contact-layout-x);
    top: var(--contact-layout-y);
    width: var(--contact-layout-width) !important;
    max-width: none !important;
    grid-template-columns:
      var(--contact-layout-left-column)
      var(--contact-layout-right-column) !important;
    gap: var(--contact-layout-gap) !important;
  }


  /* =========================================================
     CONTACT INTRO
  ========================================================= */
  html[data-page="contact"] .contact-info {
    gap: var(--contact-info-gap) !important;
    min-width: 0;
  }

  html[data-page="contact"] .contact-info > div:first-child {
    position: relative;
    left: var(--contact-intro-x);
    top: var(--contact-intro-y);
    width: var(--contact-intro-width) !important;
    max-width: none !important;
  }

  html[data-page="contact"] .contact-info > div:first-child > .eyebrow {
    font-size: var(--contact-intro-eyebrow-size) !important;
  }

  html[data-page="contact"] .contact-info > div:first-child > .section-title {
    width: var(--contact-intro-heading-width) !important;
    max-width: var(--contact-intro-heading-width) !important;
    font-size: var(--contact-intro-heading-size) !important;
    line-height: var(--contact-intro-heading-line-height) !important;
  }

  html[data-page="contact"] .contact-info > div:first-child > .section-intro {
    width: var(--contact-intro-paragraph-width) !important;
    max-width: var(--contact-intro-paragraph-width) !important;
    font-size: var(--contact-intro-paragraph-size) !important;
  }


  /* =========================================================
     SHARED CONTACT BOX SETTINGS
  ========================================================= */
  html[data-page="contact"] .contact-box {
    width: var(--contact-box-width) !important;
    min-height: var(--contact-box-min-height) !important;
    padding:
      var(--contact-box-padding-y)
      var(--contact-box-padding-x) !important;
    border-radius: var(--contact-box-radius) !important;
    box-sizing: border-box;
  }

  html[data-page="contact"] .contact-box strong {
    font-size: var(--contact-box-label-size) !important;
    margin-bottom: var(--contact-box-label-bottom-space) !important;
  }

  html[data-page="contact"] .contact-box p,
  html[data-page="contact"] .contact-box a {
    font-size: var(--contact-box-content-size) !important;
  }


  /* =========================================================
     CONTACT BOX 1 — EMAIL
  ========================================================= */
  html[data-page="contact"] .contact-info > .contact-box:nth-child(2) {
    transform: translate(
      var(--contact-box-1-x),
      var(--contact-box-1-y)
    );
    scale: var(--contact-box-1-scale);
    width: var(--contact-box-1-width) !important;
    height: var(--contact-box-1-height) !important;
  }

  html[data-page="contact"] .contact-info > .contact-box:nth-child(2) > * {
    position: relative;
    left: var(--contact-box-1-content-x);
    top: var(--contact-box-1-content-y);
  }


  /* =========================================================
     CONTACT BOX 2 — LOCATION
  ========================================================= */
  html[data-page="contact"] .contact-info > .contact-box:nth-child(3) {
    transform: translate(
      var(--contact-box-2-x),
      var(--contact-box-2-y)
    );
    scale: var(--contact-box-2-scale);
    width: var(--contact-box-2-width) !important;
    height: var(--contact-box-2-height) !important;
  }

  html[data-page="contact"] .contact-info > .contact-box:nth-child(3) > * {
    position: relative;
    left: var(--contact-box-2-content-x);
    top: var(--contact-box-2-content-y);
  }


  /* =========================================================
     CONTACT BOX 3 — AVAILABILITY
  ========================================================= */
  html[data-page="contact"] .contact-info > .contact-box:nth-child(4) {
    transform: translate(
      var(--contact-box-3-x),
      var(--contact-box-3-y)
    );
    scale: var(--contact-box-3-scale);
    width: var(--contact-box-3-width) !important;
    height: var(--contact-box-3-height) !important;
  }

  html[data-page="contact"] .contact-info > .contact-box:nth-child(4) > * {
    position: relative;
    left: var(--contact-box-3-content-x);
    top: var(--contact-box-3-content-y);
  }


  /* =========================================================
     COMPLETE CONTACT FORM
  ========================================================= */
  html[data-page="contact"] .contact-form {
    transform: translate(
      var(--contact-form-x),
      var(--contact-form-y)
    );
    scale: var(--contact-form-scale);
    width: var(--contact-form-width) !important;
    min-height: var(--contact-form-min-height) !important;
    padding:
      var(--contact-form-padding-y)
      var(--contact-form-padding-x) !important;
    border-radius: var(--contact-form-radius) !important;
    box-sizing: border-box;
    min-width: 0;
  }

  html[data-page="contact"] .form-grid {
    grid-template-columns:
      var(--contact-form-left-column)
      var(--contact-form-right-column) !important;
    column-gap: var(--contact-form-column-gap) !important;
    row-gap: var(--contact-form-row-gap) !important;
  }

  html[data-page="contact"] .form-field {
    gap: var(--contact-field-gap) !important;
    min-width: 0;
  }


  /* =========================================================
     FIELD 1 — NAME
  ========================================================= */
  html[data-page="contact"] .form-grid > .form-field:nth-child(1) {
    transform: translate(
      var(--contact-name-field-x),
      var(--contact-name-field-y)
    );
    width: var(--contact-name-field-width) !important;
  }

  html[data-page="contact"] .form-grid > .form-field:nth-child(1) > label {
    position: relative;
    left: var(--contact-name-label-x);
    top: var(--contact-name-label-y);
  }

  html[data-page="contact"] .form-grid > .form-field:nth-child(1) > input {
    position: relative;
    left: var(--contact-name-input-x);
    top: var(--contact-name-input-y);
  }


  /* =========================================================
     FIELD 2 — EMAIL
  ========================================================= */
  html[data-page="contact"] .form-grid > .form-field:nth-child(2) {
    transform: translate(
      var(--contact-email-field-x),
      var(--contact-email-field-y)
    );
    width: var(--contact-email-field-width) !important;
  }

  html[data-page="contact"] .form-grid > .form-field:nth-child(2) > label {
    position: relative;
    left: var(--contact-email-label-x);
    top: var(--contact-email-label-y);
  }

  html[data-page="contact"] .form-grid > .form-field:nth-child(2) > input {
    position: relative;
    left: var(--contact-email-input-x);
    top: var(--contact-email-input-y);
  }


  /* =========================================================
     FIELD 3 — AREA OF INTEREST
  ========================================================= */
  html[data-page="contact"] .form-grid > .form-field:nth-child(3) {
    transform: translate(
      var(--contact-service-field-x),
      var(--contact-service-field-y)
    );
    width: var(--contact-service-field-width) !important;
  }

  html[data-page="contact"] .form-grid > .form-field:nth-child(3) > label {
    position: relative;
    left: var(--contact-service-label-x);
    top: var(--contact-service-label-y);
  }

  html[data-page="contact"] .form-grid > .form-field:nth-child(3) > select {
    position: relative;
    left: var(--contact-service-input-x);
    top: var(--contact-service-input-y);
  }


  /* =========================================================
     FIELD 4 — PROJECT DETAILS
  ========================================================= */
  html[data-page="contact"] .form-grid > .form-field:nth-child(4) {
    transform: translate(
      var(--contact-message-field-x),
      var(--contact-message-field-y)
    );
    width: var(--contact-message-field-width) !important;
  }

  html[data-page="contact"] .form-grid > .form-field:nth-child(4) > label {
    position: relative;
    left: var(--contact-message-label-x);
    top: var(--contact-message-label-y);
  }

  html[data-page="contact"] .form-grid > .form-field:nth-child(4) > textarea {
    position: relative;
    left: var(--contact-message-input-x);
    top: var(--contact-message-input-y);
  }


  /* =========================================================
     SHARED LABEL / CONTROL SIZES
  ========================================================= */
  html[data-page="contact"] .form-field label {
    font-size: var(--contact-label-size) !important;
  }

  html[data-page="contact"] .form-field input,
  html[data-page="contact"] .form-field select,
  html[data-page="contact"] .form-field textarea {
    font-size: var(--contact-control-font-size) !important;
    padding:
      var(--contact-control-padding-y)
      var(--contact-control-padding-x) !important;
    border-radius: var(--contact-control-radius) !important;
    box-sizing: border-box;
  }

  html[data-page="contact"] .form-field input,
  html[data-page="contact"] .form-field select {
    min-height: var(--contact-control-height) !important;
  }

  html[data-page="contact"] .form-field textarea {
    min-height: var(--contact-textarea-height) !important;
  }


  /* =========================================================
     SEND AREA
  ========================================================= */
  html[data-page="contact"] .form-actions {
    transform: translate(
      var(--contact-send-area-x),
      var(--contact-send-area-y)
    );
    gap: var(--contact-send-area-gap) !important;
    margin-top: var(--contact-send-area-top-space) !important;
  }

  html[data-page="contact"] .form-actions .btn {
    position: relative;
    left: var(--contact-send-button-x);
    top: var(--contact-send-button-y);
    min-height: var(--contact-send-button-height) !important;
    padding-left: var(--contact-send-button-padding-x) !important;
    padding-right: var(--contact-send-button-padding-x) !important;
    font-size: var(--contact-send-button-font-size) !important;
  }

  html[data-page="contact"] .form-status {
    position: relative;
    left: var(--contact-form-status-x);
    top: var(--contact-form-status-y);
    font-size: var(--contact-form-status-size) !important;
  }


  /* =========================================================
     FOOTER
  ========================================================= */
  html[data-page="contact"] .footer-grid > div:nth-child(1) {
    transform: translate(
      var(--contact-footer-brand-x),
      var(--contact-footer-brand-y)
    );
    scale: var(--contact-footer-brand-scale);
  }

  html[data-page="contact"] .footer-grid > .footer-links:nth-child(2) {
    transform: translate(
      var(--contact-footer-explore-x),
      var(--contact-footer-explore-y)
    );
    scale: var(--contact-footer-explore-scale);
  }

  html[data-page="contact"] .footer-grid > .footer-links:nth-child(3) {
    transform: translate(
      var(--contact-footer-contact-x),
      var(--contact-footer-contact-y)
    );
    scale: var(--contact-footer-contact-scale);
  }

  html[data-page="contact"] .footer-bottom {
    transform: translate(
      var(--contact-footer-bottom-x),
      var(--contact-footer-bottom-y)
    );
  }
}
/* =====================================================================
   SAFEIFY CONTACT — UNIFIED RESPONSIVE DESKTOP/LAPTOP OVERRIDES (V2)
   =====================================================================
   Keeps the Contact page inside the viewport on 1920px/1440px laptops
   while scaling naturally on 2560px monitors. Tablet/mobile remain under
   responsive.css because this block starts at 901px.
   ===================================================================== */

@media (min-width: 901px) {
  html[data-page="contact"] .site-header .navbar {
    width: min(calc(100% - clamp(48px, 6vw, 144px)), 1800px) !important;
    max-width: 1800px !important;
    left: 0 !important;
    top: 0 !important;
    margin-inline: auto !important;
  }

  html[data-page="contact"] .navbar > .brand,
  html[data-page="contact"] .navbar > .nav-links,
  html[data-page="contact"] .navbar > .header-cta {
    transform: none !important;
  }

  html[data-page="contact"] .brand-logo {
    width: clamp(34px, 1.8vw, 42px) !important;
    height: clamp(34px, 1.8vw, 42px) !important;
  }

  html[data-page="contact"] .navbar > .brand {
    font-size: clamp(13px, 0.85vw, 16px) !important;
  }

  html[data-page="contact"] .navbar > .nav-links {
    gap: clamp(16px, 1.35vw, 30px) !important;
  }

  html[data-page="contact"] .navbar > .nav-links > a {
    font-size: clamp(13px, 0.78vw, 17px) !important;
    padding: 12px clamp(4px, 0.35vw, 8px) !important;
  }

  html[data-page="contact"] .navbar > .header-cta {
    min-height: clamp(42px, 2.3vw, 48px) !important;
    padding-inline: clamp(15px, 1vw, 22px) !important;
    font-size: clamp(12px, 0.7vw, 14px) !important;
  }

  html[data-page="contact"] .page-hero > .container {
    left: 0 !important;
    top: 0 !important;
    width: min(calc(100% - clamp(48px, 6vw, 144px)), 1600px) !important;
    max-width: 1600px !important;
    margin-inline: auto !important;
  }

  html[data-page="contact"] .page-hero h1 {
    width: min(100%, 1100px) !important;
    max-width: 1100px !important;
    font-size: clamp(50px, 4vw, 76px) !important;
  }

  html[data-page="contact"] .page-hero > .container > p:not(.eyebrow) {
    width: min(100%, 820px) !important;
    max-width: 820px !important;
    font-size: clamp(15px, 0.9vw, 17px) !important;
  }

  html[data-page="contact"] .contact-layout {
    left: 0 !important;
    top: 0 !important;
    width: min(calc(100% - clamp(48px, 6vw, 144px)), 1500px) !important;
    max-width: 1500px !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
    gap: clamp(34px, 3.5vw, 60px) !important;
  }

  html[data-page="contact"] .contact-info > div:first-child,
  html[data-page="contact"] .contact-info > div:first-child > .section-title,
  html[data-page="contact"] .contact-info > div:first-child > .section-intro {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-page="contact"] .contact-info > div:first-child > .section-title {
    font-size: clamp(36px, 3vw, 52px) !important;
  }

  html[data-page="contact"] .contact-form {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: clamp(26px, 2.4vw, 34px) !important;
  }

  html[data-page="contact"] .form-grid {
    min-width: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-page="contact"] .form-field,
  html[data-page="contact"] .form-field input,
  html[data-page="contact"] .form-field select,
  html[data-page="contact"] .form-field textarea,
  html[data-page="contact"] .contact-box {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-page="contact"] .contact-box,
  html[data-page="contact"] .contact-info > .contact-box:nth-child(2),
  html[data-page="contact"] .contact-info > .contact-box:nth-child(3),
  html[data-page="contact"] .contact-info > .contact-box:nth-child(4),
  html[data-page="contact"] .contact-info > .contact-box:nth-child(2) > *,
  html[data-page="contact"] .contact-info > .contact-box:nth-child(3) > *,
  html[data-page="contact"] .contact-info > .contact-box:nth-child(4) > *,
  html[data-page="contact"] .form-grid > .form-field,
  html[data-page="contact"] .form-grid > .form-field > label,
  html[data-page="contact"] .form-grid > .form-field > input,
  html[data-page="contact"] .form-grid > .form-field > select,
  html[data-page="contact"] .form-grid > .form-field > textarea,
  html[data-page="contact"] .form-actions,
  html[data-page="contact"] .form-actions .btn,
  html[data-page="contact"] .form-status {
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
  }

  html[data-page="contact"] .footer-grid > div,
  html[data-page="contact"] .footer-bottom {
    transform: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  html[data-page="contact"] .contact-layout {
    grid-template-columns: 1fr !important;
    width: min(calc(100% - 48px), 980px) !important;
    gap: 34px !important;
  }

  html[data-page="contact"] .contact-form {
    padding: 28px !important;
  }

  html[data-page="contact"] .page-hero h1 {
    font-size: clamp(46px, 5vw, 58px) !important;
  }
}