/* ======================
   Basic Reset
====================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'DIN Condensed Bold';
  src: url("DIN Condensed-Bold.woff2") format('woff2'),
       url("DINCondensed-Bold.woff") format('woff'),
       url("DIN\ Condensed\ Bold.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ======================
   Root Variables
====================== */
:root {
  --z-bg: -1;
  --z-content: 1;
  --z-ui: 2;
}



/* ======================
   Background Video
====================== */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-bg);
  pointer-events: none; /* ensures clicks pass through */
}

.desktop-video { display: none; }
.mobile-video { display: block; }

@media (min-width: 768px) {
  .mobile-video { display: none; }
  .desktop-video { display: block; }
}

/* ======================
   Overlay
====================== */
.bg-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.7); /* adjust dimness */
  z-index: 0;
  pointer-events: none;
}

/* ======================
   Body & Main
====================== */
html, body {
  height: 100%;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

body {
  position: relative; /* needed for overlay/video z-index */
}

/* Main flex container for vertical & horizontal centering */
main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 18vh;
  height: 100dvh; /* replaces 100vh */
  position: relative;
  z-index: var(--z-content);
}

/* ======================
   Container
====================== */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 90%;         /* mobile friendly */
  max-width: 95%;     /* mobile */
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  position: relative;
  z-index: var(--z-content);
  transform: translate(0px, -6%);
}

.spacer {
  height: 35rem; /* adjust height to create gap above CTA */
}


/* ======================
   About Section
====================== */
.about h1,
.about p,
.about .emphasis {
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.about h1 {
  transform: translateY(-1px);
  font-family: 'DIN Condensed Bold';
  font-size: 3.2rem;
  letter-spacing: 0.02em;
  color: #fff;
}

.about p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #fff;
  opacity: 0.9;
  margin-top: 0;
    margin-left: auto;
  margin-right: auto;
}
.about .emphasis {
   max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: 'DIN Condensed Bold';
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  color: #fff;
  opacity: 0.85;
}

.section-header {
  margin-bottom: -2rem;
  align-self: center;
  text-align: center;
}


/* ======================
   Contact Form
====================== */
.contact h1 {
  font-family: 'DIN Condensed Bold';
  font-size: 2.5rem;
  letter-spacing: 0.02em;
  color: #fff;
  padding-bottom: 2rem;
}

.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.field label {
  font-family: 'DIN Condensed Bold';
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
    opacity: 0.9;
  margin-bottom: 6px;
}

.field input,
.field textarea {
  resize: none;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding: 0px 0px; /* 10px top & bottom, 6px left & right */
  font-size: 0.95rem; /* slightly larger for readability */
  color: #fff;
  font-family: system-ui, sans-serif;
  outline: none;
  margin-bottom: 20px; /* extra space below each field */
  transition: border-bottom-color 0.3s ease; /* smooth focus effect */
}

.field input::placeholder,
.field textarea::placeholder {
   font-style: italic;
     font-size: 0.8rem;
   opacity: 0.8; 
  color: rgba(255,255,255,0.4);
}

.field input:focus,
.field textarea:focus {
  border-bottom-color: rgba(255,255,255,0.7);
}

/* Align SEND button with your existing READY? logic */
.contact-form .button {
  opacity: 0.35;
  margin-top: 14px;
  align-self: center;
}
/* Contact page: SEND button */
.contact-form .button:hover {
  opacity: 0.85;
  transform: none; /* no enlargement */
}

/* Other buttons (READY on homepage/footer) */
.button:hover {
  opacity: 1;
  transform: scale(105%); /* keep enlargement */
}

/* ======================
   Netlify Honeypot (Anti-spam)
====================== */
.hidden {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* ======================
   Thank You Page
====================== */
.contact .section-header h1 {
  transform: translateY(-4px); /* optical vertical alignment */
  font-family: 'DIN Condensed Bold';
  font-size: 3.2rem;
  letter-spacing: 0.02em;
  color: #fff;
  margin-top: -2.2rem;
  margin-bottom: 24px;
}
.contact p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #fff;
  opacity: 0.9;
  max-width: 38ch;
  margin: 0 auto; /* center the paragraph */
  text-align: center;
}

/* ======================
   Navigation Header
====================== */
.site-header {
  position: fixed;
  top: 34px;
  left: calc(50% + 0px); /* move +11px to the right */
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: var(--z-ui);
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.4s ease;
}

.site-header:hover,
.site-header:focus-within { opacity: 1; }

.nav {
  pointer-events: auto;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav-link {
  font-family: 'DIN Condensed Bold';
  font-size: 1.6rem;
  color: #fff;
  text-decoration: none;
  opacity: 0.25;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-link:hover { opacity: 0.85; transform: scale(1.06); }
.nav-link.active { opacity: 1; }

/* ======================
   Buttons
====================== */
.button {
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  font-family: 'DIN Condensed Bold';
  font-weight: 700;
  font-size: 2.5rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: transparent;
  border-radius: 5px;
  text-decoration: none;
  opacity: 0.3;
margin-left: 3px; /* moves button slightly right */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.button:hover { opacity: 1; transform: scale(105%);}


/* ======================
   Footer & Socials
====================== */
.footer {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: var(--z-ui);
  opacity: 0.9;
  transition: opacity 0.4s ease;
  pointer-events: auto;
}

.footer .button,
.footer .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.35;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.footer .button:hover,
.footer .socials a:hover,
.footer .button:focus,
.footer .socials a:focus { opacity: 0.85; }

.footer .button:active,
.footer .socials a:active { opacity: 1; }

.socials a {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.socials svg {
  width: 100%;
  height: 100%;
  fill: #fff;
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.copyright {
  position: fixed;
  bottom: 8px;          /* a little above the very bottom edge */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.3rem;   /* small text */
  color: rgba(255,255,255,0.5);
  font-family: system-ui, sans-serif;
  z-index: var(--z-ui);
  pointer-events: none;  /* so it doesn’t interfere with clicks */
}


/* ======================
   Desktop scaling (Golden Ratio)
====================== */
@media (min-width: 769px) {
  /* Container spans full width, inputs narrower */
  .container {
    align-items: stretch; /* keep container full width for desktop */
  }

  .about .section-header {
    margin-bottom: 0rem; /* increases space below the heading */
}

.about p:first-of-type {
    margin-top: -0.5rem; /* optional: slight extra spacing above first paragraph */
}

  /* Contact form spacing for desktop */
  .contact-form {
    max-width: 100%;
    gap: 32px; /* slightly bigger spacing than mobile */
  }

  /* Inputs and textareas narrower, centered in container */
  .field input,
  .field textarea {
    width: 70%;           /* desktop narrower */
    max-width: 70%;       /* prevent expansion */
    margin-left: auto;    /* center horizontally */
    margin-right: auto;
  }

  /* Labels match input width, left-aligned */
  .field label {
    width: 70%;
    margin-left: auto;    /* center label block with input */
    margin-right: auto;
    text-align: left;     /* keep label text left-aligned */
  }

  /* Adjust button size proportionally */
  .contact-form .button {
    font-size: calc(2.5rem * 1.618);
    padding: calc(10px * 1.618) calc(20px * 1.618);
    align-self: center;
  }

  /* Heading scaling */
  .contact h1 {
    font-size: calc(2.5rem * 1.618);
    margin-bottom: 40px;
  }
}

.about-scrollable p,
.about-scrollable .emphasis {
  margin-top: 1.2em;    /* space above each paragraph */
  margin-bottom: 1.2em; /* space below each paragraph */
}


/* ======================
   Responsive Adjustments
====================== */
@media (max-width: 768px){
  .container {max-width: 600px;}


  .about p { font-size: 0.92rem; max-width: 32ch; }
  .about .emphasis {  margin: 8px 0 0 0;}

  .nav-links { gap: 20px; }
  .nav-link { font-size: 1.4rem; }
  .site-header { top: 30px; }

  .footer .socials a svg,
  .footer .button { transform: none !important; }
  .nav-link:hover { transform: none; }
  .button:hover { transform: translateX(0px); }
  
    main {
    overflow-y: auto; /* lets the page scroll if content is too tall */
    padding-bottom: 80px; /* ensures footer is not overlapped */
  }

.contact .container {
    width: 90%;
    max-width: 600px; /* your original mobile widths */
  }

  .contact .field input,
  .contact .field textarea {
    width: 100%;
    max-width: 100%;
    display: block;
    margin-left: 0;
    margin-right: 0;
  }

  .contact .field label {
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
  }

  .contact .contact-form {
    gap: 24px;
  }

  .contact h1 {
    font-size: 2.5rem;
    margin-bottom: 24px;
  }

  .contact .contact-form .button {
    font-size: 2.5rem;
    padding: 10px 20px;
    align-self: center;
  }

  .about-scrollable {
  max-height: 48vh; /* adjust so only text up to "WORK THAT HOLDS ATTENTION" is visible */
  overflow-y: auto;
  padding-top: 0; 
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  position: relative;
    margin: 1em 0;       /* restores paragraph spacing */
  line-height: 1.65;   /* matches your previous line spacing */
}






}