/* ============================================================
   MODAL — Contact page
   Misty mountain forest backdrop, full-bleed, with a soft
   vignette so the white type and frosted contact cards stay
   legible across the brighter sky region of the photo.
   ============================================================ */

.page-contact {
  background: var(--color-black);
  color: var(--color-white);
}

/* Black underlay — only visible behind the forest image while it
   loads; doubles as a depth anchor under the bottom vignette. */
.page-contact .bg-black {
  position: fixed;
  inset: 0;
  background: var(--color-black);
  z-index: 0;
}

/* Full-bleed forest photograph. Slow alternating drift gives the
   page a gentle ambient breath without distracting from the cards.
   prefers-reduced-motion freezes it. */
.ct-bg {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 100vw);
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.92;
  filter: saturate(1.06) contrast(1.04);
  animation: ct-bg-drift 60s linear infinite alternate;
}
@keyframes ct-bg-drift {
  from { transform: translate(calc(-50% - 14px), -50%) scale(1.02); }
  to   { transform: translate(calc(-50% + 14px), calc(-50% - 6px)) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-bg { animation: none; transform: translate(-50%, -50%) scale(1.02); }
}

/* Deeper vignette — the forest photo is brighter than the old
   space backdrop, so we need more weight at the edges + top to
   anchor the white type and the frosted cards. */
.ct-vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 75% at 50% 130%, transparent 0%, rgba(1, 13, 5, 0.08) 55%, rgba(1, 13, 5, 0.42) 85%, rgba(1, 13, 5, 0.62) 100%),
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(1, 13, 5, 0.42) 0%, transparent 70%),
    linear-gradient(180deg, rgba(1, 13, 5, 0.18) 0%, transparent 35%);
}

/* All actual content sits above the backdrop layers */
.ct-main {
  position: relative;
  z-index: 5;
  min-height: 100vh;
}

/* ============================================================
   Atmospheric overlay text (mono micro-detail, like home hero)
   ============================================================ */
.ct-overlay-tl,
.ct-overlay-tr {
  position: fixed;
  top: clamp(1.6rem, 2.2vw, 2.4rem);
  z-index: 20;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.62);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  pointer-events: none;
}
.ct-overlay-tl { left: clamp(1.4rem, 2.5vw, 2.4rem); }
.ct-overlay-tr { right: clamp(1.4rem, 2.5vw, 2.4rem); }
.ct-overlay-tl .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #1cd07c;
  box-shadow: 0 0 14px rgba(28, 208, 124, 0.85);
  animation: ct-pulse 2.4s ease-in-out infinite;
}
.ct-overlay-tr .dash {
  width: 1.4rem; height: 1px;
  background: rgba(var(--color-white-rgb), 0.6);
}
@keyframes ct-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (max-width: 760px) {
  /* Hide right-side text on mobile, keep the signal indicator on the left */
  .ct-overlay-tr { display: none; }
  .ct-overlay-tl {
    top: 0.55rem;
    left: 1.1rem;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    gap: 0.4rem;
  }
  .ct-overlay-tl .dot { width: 6px; height: 6px; }
}

/* ============================================================
   Hero stage
   ============================================================ */
.ct-stage {
  padding: clamp(10rem, 16vw, 14rem) 0 clamp(8rem, 12vw, 10rem);
}
.ct-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  box-sizing: border-box;
  position: relative;
}

.ct-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.85);
  margin: 0 0 var(--space-10) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.ct-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: rgba(var(--color-white-rgb), 0.85);
}

.ct-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  /* Trimmed from clamp(3rem, 7vw, 7rem) — previous max was 112px on
     ultra-wide, towering over About/Projects/Team heroes. New clamp
     keeps the "Get in touch." display weight but lines up with the
     rest of the site's hero headlines. */
  font-size: clamp(2.4rem, 4.6vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.026em;
  color: var(--color-white);
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.5rem) 0;
  text-wrap: balance;
}
.ct-headline em {
  font-style: italic;
  font-weight: 500;
  color: rgba(var(--color-white-rgb), 0.78);
}

.ct-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.65;
  color: rgba(var(--color-white-rgb), 0.72);
  max-width: 64ch;
  margin: 0 0 clamp(3rem, 5vw, 5rem) 0;
}

/* ============================================================
   Channel cards (liquid glass + system-specs aesthetic)
   ============================================================ */
.ct-channels {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(2.5rem, 4vw, 3.5rem) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.5vw, 1.5rem);
}
.ct-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 1.8vw, 1.8rem) clamp(1.5rem, 1.8vw, 1.8rem) clamp(1.4rem, 1.6vw, 1.6rem);
  border-radius: var(--radius-card);
  background: rgba(var(--color-white-rgb), 0.04);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.ct-card:hover {
  transform: translateY(-3px);
  background: rgba(var(--color-white-rgb), 0.07);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.ct-card-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.78);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.ct-card-label .num {
  color: var(--color-white);
  font-weight: 600;
}
.ct-card-desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  color: rgba(var(--color-white-rgb), 0.78);
  margin: 0;
  max-width: 32ch;
  flex: 1;
}
.ct-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--color-white-rgb), 0.14);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  color: var(--color-white);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color .25s ease;
}
.ct-card-action:hover { color: rgba(var(--color-white-rgb), 0.78); }
.ct-arrow {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: rgba(var(--color-white-rgb), 0.7);
  transition: transform .25s ease, color .25s ease;
}
.ct-card-action:hover .ct-arrow {
  color: var(--color-white);
  transform: translate(2px, -2px);
}

/* ============================================================
   Contact form — uses the Client Portal dark-glass colour theme.
   ============================================================ */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.6rem, 2.4vw, 2.4rem) clamp(1.4rem, 2vw, 2rem);
  border-radius: var(--radius-card);
  background: rgba(var(--color-white-rgb), 0.04);
  margin: 0 0 clamp(2.5rem, 4vw, 3.5rem) 0;
  max-width: 56rem;
}
.ct-form-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.85);
  margin: 0 0 var(--space-4) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.ct-form-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: rgba(var(--color-white-rgb), 0.85);
}
/* Inline success / error banner shown after the visitor submits and
   api/contact.js redirects back with ?sent=1 or ?error=…. */
.ct-form-msg {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.55rem;
  border: 1px solid;
}
.ct-form-msg[hidden] { display: none; }
.ct-form-msg--success {
  background: rgba(22, 112, 74, 0.15);
  border-color: rgba(22, 112, 74, 0.45);
  color: rgba(var(--color-white-rgb), 0.95);
}
.ct-form-msg--error {
  background: rgba(225, 106, 106, 0.12);
  border-color: rgba(225, 106, 106, 0.45);
  color: rgba(var(--color-white-rgb), 0.95);
}
.ct-form-msg a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.ct-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.ct-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ct-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.7);
}
.ct-field input,
.ct-field textarea,
.ct-field select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: rgba(var(--color-white-rgb), 0.06);
  border: 1px solid rgba(var(--color-white-rgb), 0.14);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ct-field textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.55;
}
.ct-field select {
  /* Custom chevron — same monochrome treatment as the dark inputs. */
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--color-white-rgb), 0.7) 50%),
                    linear-gradient(135deg, rgba(var(--color-white-rgb), 0.7) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 1rem) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
  cursor: pointer;
}
.ct-field select option {
  background: #0a0c10;
  color: var(--color-white);
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: rgba(var(--color-white-rgb), 0.4);
}
.ct-field input:hover,
.ct-field textarea:hover,
.ct-field select:hover {
  background: rgba(var(--color-white-rgb), 0.08);
  border-color: rgba(var(--color-white-rgb), 0.22);
}
.ct-field input:focus,
.ct-field textarea:focus,
.ct-field select:focus {
  outline: none;
  border-color: var(--color-green);
  background: rgba(var(--color-white-rgb), 0.09);
  box-shadow: 0 0 0 3px rgba(22, 112, 74, 0.18);
}

.ct-subscribe {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: rgba(var(--color-white-rgb), 0.72);
  cursor: pointer;
  user-select: none;
  margin-top: 0.3rem;
}
.ct-subscribe input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 3px;
  background: rgba(var(--color-white-rgb), 0.06);
  border: 1px solid rgba(var(--color-white-rgb), 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.ct-subscribe input:checked {
  background: var(--color-green);
  border-color: var(--color-green);
}
.ct-subscribe input:checked::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--color-white);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.ct-submit {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  align-self: flex-start;
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 0.65rem;
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ct-submit:hover {
  background: #1a8559;
  box-shadow: 0 6px 24px rgba(22, 112, 74, 0.35);
}
.ct-submit:active {
  transform: translateY(1px);
}
.ct-submit .ct-arrow {
  width: 18px;
  height: 18px;
  color: var(--color-white);
}
.ct-submit:hover .ct-arrow {
  transform: translateX(3px);
}

/* Honeypot — visually + AT hidden, but present for bots to fill. Not
   display:none (some bots skip those); pushed off-screen instead. */
.ct-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   Office specs panel (mirrors home hero .tpl-specs)
   ============================================================ */
.ct-specs {
  display: block;
  padding: clamp(1.4rem, 1.8vw, 1.8rem) clamp(1.5rem, 2vw, 2rem);
  border-radius: var(--radius-card);
  background: rgba(var(--color-white-rgb), 0.03);
  /* Matches the form width above + the map width above it, so the blocks
     stack cleanly in the same column. The bubble closes the location group
     and takes the big bottom margin separating it from the quote row. */
  max-width: 56rem;
  margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
}

/* Office Google Maps embed — opens the "location" group, sitting above the
   Office spec bubble. Matched to the form's width so the blocks stack
   cleanly against the left margin, with rounded corners + a faint frame to
   read as a deliberate card rather than a raw iframe. Default Maps tiles
   (no dark filter) so it reads the same as the standard institutional
   /contact pattern visitors are used to. Tight bottom margin pulls the
   Office bubble in close so the two read as one unit. */
.ct-map {
  position: relative;
  margin: 0 0 clamp(0.85rem, 1.4vw, 1.25rem);
  max-width: 56rem;                      /* matches .ct-form */
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(var(--color-white-rgb), 0.12);
  background: rgba(var(--color-white-rgb), 0.04);
  aspect-ratio: 16 / 9;
}
.ct-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 760px) {
  .ct-map { aspect-ratio: 4 / 3; }
}
.ct-specs-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 var(--space-4) 0;
}
.ct-specs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(var(--color-white-rgb), 0.10);
  font-family: var(--font-sans);
}
.ct-specs-row:first-of-type { border-top: 0; padding-top: 0; }
.ct-specs-row .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.6);
}
.ct-specs-row .value {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  color: var(--color-white);
  text-align: right;
}
.ct-specs-row .value a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(var(--color-white-rgb), 0.4);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.ct-specs-row .value a:hover {
  color: var(--color-green-bright);
  text-decoration-color: var(--color-green-bright);
}

/* ============================================================
   Quote row (echo of home hero "MODAL Corporation" rule)
   ============================================================ */
.ct-quote-row {
  margin-top: clamp(3rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.55);
}
.ct-quote-row .line {
  flex: 1;
  max-width: 240px;
  height: 1px;
  /* Matches the home hero quote-row treatment. */
  background: rgba(var(--color-white-rgb), 0.55);
}


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .ct-channels { grid-template-columns: 1fr; }
  .ct-card-desc { max-width: none; }
  .ct-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ct-stage { padding-top: 8rem; }
  .ct-headline { font-size: clamp(2.5rem, 11vw, 4rem); }
  .ct-earth { width: 220vw; bottom: -22%; }
}