/* ==========================================================
   Contact Page - High-End Curtain Reveal & Form Stacking
   ========================================================== */

.contact-page {
  background-color: #05080a;
  color: #ffffff;
}

/* ---- FAQ -> Footer curtain reveal ----
   Same technique as about.html's Team -> Footer reveal: footer sits
   BEHIND #faq-section purely via z-index/stacking (not opacity/
   visibility), inside a shared positioned ancestor
   (.forms-footer-container, wrapping both - see contact.html), and
   js/script.js's initFaqSection() pins that wrapper once its own
   bottom reaches the viewport bottom, then slides #faq-section away
   (translateY) to reveal footer underneath - no fade, a real layered
   reveal, reversible by scrolling back up. (This wrapper used to also
   include #contact-forms-section, back when the form was the curtain
   layer over the footer - that's since moved out to its own section,
   now that FAQ is the thing directly above the footer.)

   inline.css's unconditional #footer{position:absolute;inset:0;
   height:100vh} rule (written for the Home page's layout, where the
   positioned ancestor is exactly 100vh) anchors footer to the
   wrapper's TOP - wrong here, since #faq-section's content can run
   taller than one screen (6 accordion items) and the reveal happens
   at the wrapper's BOTTOM edge, not its top. Height stays the
   inherited 100vh (untouched, same as about.html's own footer
   override); only the anchor edge changes from top to bottom -
   `top: auto` is required here (not just `bottom: 0`) because the
   inherited rule already sets top:0 via its `inset:0`, and
   top+bottom+height all specified at once is over-constrained - top
   wins and bottom gets silently ignored without this. display/
   align-items/background-color are left untouched (background-color
   is overridden again by the footer element's own inline style,
   black, unchanged). */
.forms-footer-container {
  position: relative;
}

.forms-footer-container #footer {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Mobile: drop the pin/curtain (initFaqSection() only builds it above
   768px via gsap.matchMedia - see js/script.js) for a plain stacked
   flow instead, matching the same touch-scroll-safety fallback used
   elsewhere on this page (.ct-locations-footer-container above) and
   on the Home/About pages' own footer reveals. */
@media (max-width: 767px) {
  .forms-footer-container #footer {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
  }
}

/* ----------------------------------------------------------
   Section 1: Hero Container
   #ct-hero is taller than one screen so .ct-hero-pin can hold in
   place via position:sticky while the user scrolls through that
   extra height - see js/contact.js's updateHero() for how that
   scroll distance maps to reveal progress.
   ---------------------------------------------------------- */
.ct-hero {
  position: relative;
  width: 100%;
  height: 220vh;
  background-color: #05080a;
}

.ct-hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Layer 1: Form Layer (Static underneath) */
.ct-hero-form-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 40px;
  box-sizing: border-box;
  pointer-events: auto;
}

.ct-form-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.ct-form-header {
  margin-bottom: 32px;
  text-align: left;
}

.ct-form-step {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: #00accd;
  margin-bottom: 12px;
}

.ct-form-heading {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.2;
}

.ct-form-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Form Elements */
.ct-form-card {
  width: 100%;
}

.ct-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

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

.ct-field-full {
  grid-column: span 2;
}

.ct-field label {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
  box-sizing: border-box;
}

.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  border-color: #00accd;
  background: rgba(255, 255, 255, 0.08);
}

.ct-field select option {
  background: #111518;
  color: #ffffff;
}

.ct-form-footer {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
}

.ct-form-submit {
  padding: 14px 40px;
  background: #00accd;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.ct-form-submit:hover {
  background: #0088a3;
  transform: translateY(-2px);
}

.ct-form-status {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #00accd;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ct-form-status.is-visible {
  opacity: 1;
}

/* ----------------------------------------------------------
   Layer 2: Slice Overlay (On top, wipes up on scroll)
   ---------------------------------------------------------- */
.ct-hero-slices {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Allows form clicks when slices move away */
}

.ct-slice {
  position: relative;
  width: 100%;
  height: 25vh; /* 4 slices * 25vh = 100vh total */
  overflow: hidden;
  background-color: #05080a;
  will-change: transform;
}

/* Positions 1 image seamlessly across 4 slices */
.ct-slice-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
}

.ct-slice:nth-child(1) .ct-slice-img { top: 0; }
.ct-slice:nth-child(2) .ct-slice-img { top: -25vh; }
.ct-slice:nth-child(3) .ct-slice-img { top: -50vh; }
.ct-slice:nth-child(4) .ct-slice-img { top: -75vh; }

.ct-hero-overlay-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35); /* Subtle dimming over hero text */
}

.ct-hero-label {
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #00accd;
  margin-bottom: 16px;
}

.ct-hero-heading {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 16px;
}

.ct-hero-desc {
  max-width: 540px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* ----------------------------------------------------------
   Section 2 & Footer Container
   ---------------------------------------------------------- */
/* .ct-locations-footer-container is taller than one screen so
   .ct-locations-footer-pin can hold in place via position:sticky
   while the user scrolls through that extra height. #footer (global
   rule in inline.css already gives it position:absolute;inset:0;
   z-index:1;height:100vh) sits underneath .ct-locations-section as a
   second absolute layer inside that pin, and js/contact.js's
   updateLocationsFooter() drives .ct-locations-section's translateY
   from scroll progress through the extra height - same technique as
   the homepage's .testimonial-footer-container -> #footer reveal,
   just with real scroll room so the reveal actually holds on screen. */
.ct-locations-footer-container {
  position: relative;
  width: 100%;
  height: 200vh;
}

.ct-locations-footer-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.ct-locations-section {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #0d1117;
  padding: 120px 8%;
  box-sizing: border-box;
  will-change: transform;
}

.ct-locations-header {
  margin-bottom: 60px;
}

.ct-locations-label {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #00accd;
}

.ct-locations-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
}

.ct-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.ct-location-card {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 24px;
}

.ct-location-index {
  font-size: 0.85rem;
  color: #00accd;
  font-weight: 600;
}

.ct-location-city {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 12px 0;
}

.ct-location-address {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 16px;
}

.ct-location-line {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 6px;
  transition: color 0.3s ease;
}

.ct-location-line:hover {
  color: #00accd;
}

@media (max-width: 768px) {
  .ct-form-grid {
    grid-template-columns: 1fr;
  }
  .ct-field-full {
    grid-column: span 1;
  }
}

/* Mobile: drop the sticky-pin curtain reveal for a plain stacked flow
   (matches the homepage's own .testimonial-footer-container -> #footer
   breakpoint fallback) - simpler and safer with touch scroll, and
   #footer itself already reverts to position:relative here via the
   global rule in inline.css. */
@media (max-width: 767px) {
  .ct-locations-footer-container {
    height: auto;
  }

  .ct-locations-footer-pin {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .ct-locations-section {
    position: relative;
    inset: auto;
    height: auto;
    transform: none !important;
  }
}