/* ============================================================
   CONTACT PAGE — contact.css
   ============================================================ */

body.no-loader {
  background: var(--black);
}

body.no-loader .header {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

body.no-loader #main-content {
  opacity: 1;
  visibility: visible;
}

/* ── Hero (video background + headline) ── */
.ct-hero {
  position: relative;
  min-height: clamp(520px, 82vh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(110px, 14vw, 180px) clamp(24px, 5vw, 80px) clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(238, 219, 193, 0.08);
  overflow: visible; /* headline parallaxes past the section edge uncropped */
}

/* Cropping happens here, not on .ct-hero, so the parallaxing headline
   is never clipped by the video's overflow boundary. */
.ct-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--black); /* covers the gap before the first frame paints */
}

.ct-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* portrait source, landscape box — crop, never letterbox */
  object-position: center 42%;
  /* Desaturating pulls the footage's electric blue toward the site palette and
     drops the luminance of its bright hot spots before the scrim even lands. */
  filter: brightness(0.62) saturate(0.6) contrast(1.02);
}

/* Two crossed gradients, tuned against the actual footage rather than guessed.
   Vertical: heavy at the bottom (headline) and top (the fixed bone header).
   Horizontal: heavy at the left, because every piece of type on this page is
   left-aligned and these clips throw near-white photo cards through that
   column. The right side stays open, so the video still reads. */
.ct-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(11, 11, 11, 0.58) 0%,
      rgba(11, 11, 11, 0.22) 40%,
      rgba(11, 11, 11, 0) 68%
    ),
    linear-gradient(
      to bottom,
      rgba(11, 11, 11, 0.74) 0%,
      rgba(11, 11, 11, 0.34) 30%,
      rgba(11, 11, 11, 0.54) 62%,
      rgba(11, 11, 11, 0.84) 100%
    );
}

.ct-headline,
.ct-services {
  position: relative;
  z-index: 1;
}

.ct-headline {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 17vw, 22rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--bone);
  margin: 0 0 clamp(16px, 2vw, 28px);
}

/* Each line is its own mask so the words can slide up from behind it, the same
   reveal the About and Home headlines use. JS releases the overflow once they
   land, because at line-height 0.88 a permanent clip shaves the apostrophe. */
.ct-line {
  display: block;
  overflow: hidden;
}

.ct-line-inner {
  display: block;
  will-change: transform;
}

.ct-services {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(7px, 0.6vw, 10px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Raised from 0.28 — at this size, over moving footage, 0.28 disappeared.
     0.74 measured >4.5:1 against the loop's brightest frame. */
  color: rgba(238, 219, 193, 0.74);
  margin: 0;
}

/* ── Body (info + form) ── */
.ct-body {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 80px) clamp(60px, 8vw, 110px);
  align-items: start;
}

/* ── Info column ── */
.ct-info {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 36px);
  position: sticky;
  top: clamp(80px, 10vw, 120px);
}

.ct-link {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  color: var(--bone);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  transition: opacity 0.3s ease;
}

.ct-link--email { font-size: clamp(1rem, 1.8vw, 2.2rem); }
.ct-link--ig    { font-size: clamp(0.85rem, 1.4vw, 1.7rem); opacity: 0.5; }
.ct-link:hover  { opacity: 0.35; }

.ct-arrow { color: rgba(238, 219, 193, 0.35); }

.ct-divider {
  width: clamp(32px, 5vw, 72px);
  height: 1px;
  background: rgba(238, 219, 193, 0.12);
}

/* ── Form ── */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.8vw, 36px);
}

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

/* A second rule that draws itself across the existing hairline on focus.
   Animating scaleX is cheaper than animating width and does not reflow. */
.ct-field::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bone);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.ct-field:focus-within::after { transform: scaleX(1); }

/* the label lifts and brightens while the field is active */
.ct-field label {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(10px, 0.85vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.35);
  transition: color 0.35s ease, letter-spacing 0.35s ease;
}

.ct-field:focus-within label {
  color: var(--bone);
  letter-spacing: 0.26em;
}

.ct-field input,
.ct-field textarea,
.ct-field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(238, 219, 193, 0.2);
  color: var(--bone);
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  letter-spacing: 0.06em;
  padding: clamp(10px, 1.2vw, 16px) 0;
  outline: none;
  width: 100%;
  resize: none;
  transition: border-color 0.25s ease;
  -webkit-appearance: none;
}

.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: rgba(238, 219, 193, 0.15);
}

.ct-field input:focus,
.ct-field textarea:focus,
.ct-field select:focus {
  border-bottom-color: rgba(238, 219, 193, 0.7);
}

.ct-field select {
  appearance: none;
  border-radius: 0;
  cursor: pointer;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23EEDBC1' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

/* a select has no ::placeholder, so dim it manually while nothing is chosen
   to match the empty state of the inputs above it */
.ct-field select:has(option[value=""]:checked) {
  color: rgba(238, 219, 193, 0.15);
}

/* the dropdown list is painted by the OS, not the page, so it needs its own
   colours or it opens as dark text on a dark panel */
.ct-field select option {
  background: var(--black);
  color: var(--bone);
}

.ct-submit {
  align-self: flex-start;
  margin-top: clamp(8px, 1vw, 16px);
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(0.65rem, 0.8vw, 0.88rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: none;
  padding: clamp(14px, 1.6vw, 20px) clamp(36px, 4.5vw, 56px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  position: relative;
  transition: opacity 0.25s ease;
}

.ct-submit-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ct-submit:hover { opacity: 0.45; }

/* ── Responsive ── */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .ct-hero {
    min-height: clamp(460px, 76vh, 680px);
    padding-top: clamp(96px, 22vw, 140px);
  }
  .ct-headline { font-size: clamp(4rem, 20vw, 8rem); }
  .ct-body { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 60px); }
  .ct-info { position: static; }
  .ct-link--email { font-size: clamp(1rem, 5vw, 1.8rem); }
  .ct-link--ig    { font-size: clamp(0.85rem, 4vw, 1.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ct-hero-video { display: none; }
}