/* components/Form Component.css */
.contact-section {
  width: 100%;
  padding: 120px 24px;
  position: relative;
}

.contact-container {
  width: min(900px, 100%);
  margin: 0 auto;
}

.contact-header {
  max-width: 650px;
  margin-bottom: 48px;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
}

.contact-header h2 {
  margin: 0 0 16px;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.contact-header p {
  margin: 0;
  max-width: 550px;
  line-height: 1.7;
  opacity: 0.6;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

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

.form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  color: inherit;
  font: inherit;
  outline: none;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

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

.form-field input::placeholder,
.form-field textarea::placeholder {
  opacity: 0.35;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
}

.contact-form button {
  align-self: flex-start;
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.contact-form button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.contact-form button:active {
  transform: translateY(0);
}

.button-loading {
  display: none;
}

form[aria-busy="true"] button {
  cursor: wait;
}

form[aria-busy="true"] .button-text {
  display: none;
}

form[aria-busy="true"] .button-loading {
  display: inline;
}

.form-status {
  min-height: 24px;
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.7;
}

.form-success {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid currentColor;
}

.form-success::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-weight: 700;
}

.contact-form {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.contact-form[data-instatic-form-state="success"] .form-content {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.form-error {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid currentColor;
}

.form-error::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-weight: 700;
}

@media (max-width: 700px) {
  .contact-section {
    padding: 80px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form button {
    width: 100%;
  }
}

/* src/styles/Under Construction Style.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    position: relative;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background-color: #0b0b0b;
    color: #f2f2f2;
}

/* ================================
   Background Grid
================================ */

body::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image: radial-gradient(
        ellipse at center,
        black 20%,
        transparent 85%
    );

    -webkit-mask-image: radial-gradient(
        ellipse at center,
        black 20%,
        transparent 85%
    );
}

/* ================================
   Construction / Hero
================================ */

.construction {
    min-height: 100vh;
    min-height: 100svh;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 32px 20px;
}

/* ================================
   Main Content
================================ */

.construction__content {
    width: 100%;
    max-width: 720px;

    text-align: center;

    opacity: 0;

    animation:
        constructionFadeUp 0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.15s
        forwards;
}

.construction__eyebrow {
    margin: 0 0 32px;

    font-size: 0.75rem;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    opacity: 0.55;
}

h1 {
    font-size: clamp(3.5rem, 9vw, 7rem);

    font-weight: 500;
    line-height: 0.95;

    letter-spacing: -0.06em;
}

.construction__message {
    max-width: 480px;

    margin: 32px auto 0;

    font-size: 1rem;
    line-height: 1.7;

    opacity: 0.65;
}

.construction__footer {
    margin: 32px auto 0;

    font-size: 0.75rem;

    opacity: 0.4;
}

.construction.is-scrolled .scroll-indicator {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
}

/* ================================
   Scroll Indicator
================================ */

.scroll-indicator {
    position: absolute;

    bottom: 2rem;
    left: 50%;

    transform: translateX(-50%);
    transition: opacity 0.4s ease, transform 0.4s ease;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;

    /*
     * Delayed slightly so the main construction
     * content appears first.
     */
    animation:
        indicatorFadeIn 0.8s ease-out
        1.1s
        forwards;
}

.scroll-arrow {
    display: block;

    width: 10px;
    height: 10px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform: rotate(45deg);

    animation:
        scrollArrow 1.8s
        ease-in-out
        1.9s
        infinite;
}

/* ================================
   Animations
================================ */

@keyframes constructionFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes indicatorFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 0.6;
        transform: translate(-50%, 0);
    }
}

@keyframes scrollArrow {
    0%,
    100% {
        transform: translateY(0) rotate(45deg);
    }

    50% {
        transform: translateY(7px) rotate(45deg);
    }
}

/* ================================
   Reduced Motion
================================ */

@media (prefers-reduced-motion: reduce) {
    .construction__content {
        opacity: 1;
        animation: none;
    }

    .scroll-indicator {
        opacity: 0.6;
        animation: none;
    }

    .scroll-arrow {
        animation: none;
    }
}

/* ================================
   Mobile
================================ */

@media (max-width: 600px) {
    .construction {
        padding: 32px 20px;
    }

    h1 {
        font-size: clamp(3rem, 16vw, 5rem);
    }

    .construction__message {
        font-size: 0.9rem;
    }

    .scroll-indicator {
        bottom: 1.5rem;
    }
}