/* ======================================================= */
/* CONTACT — CINEMATIC EDITORIAL SYSTEM */
/* ======================================================= */

.contact-cinema-hero {

  position: relative;

  min-height: 92vh;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  padding:
    180px 0
    90px;

  background:
    linear-gradient(
      180deg,
      #11161d 0%,
      #171d25 48%,
      #0c1015 100%
    );

  isolation: isolate;
}

/* ------------------------------------------------ */
/* ATMOSPHERE */
/* ------------------------------------------------ */

.contact-atmosphere {

  position: absolute;
  inset: 0;

  background:

    radial-gradient(
      circle at 18% 22%,
      rgba(199,163,90,0.08),
      transparent 30rem
    ),

    radial-gradient(
      circle at 78% 34%,
      rgba(179,188,200,0.06),
      transparent 34rem
    );

  opacity: 0.9;
}

.contact-grid-lines {

  position: absolute;
  inset: 0;

  opacity: 0.05;

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

  background-size: 84px 84px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 18%,
      black 82%,
      transparent
    );
}

/* ------------------------------------------------ */
/* HERO */
/* ------------------------------------------------ */

.contact-hero-grid {

  position: relative;
  z-index: 5;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    360px;

  gap:
    clamp(3rem,8vw,9rem);

  align-items: end;
}

.contact-hero-copy h1 {

  max-width: 840px;

  font-size:
    clamp(4.5rem,9vw,9rem);

  line-height: 0.88;

  letter-spacing: -0.04em;

  margin-bottom: 2rem;
}

.contact-hero-copy p {

  color:
    rgba(243,244,246,0.72);

  max-width: 560px;

  line-height: 1.9;
}

.contact-hero-note {

  padding-left: 2rem;

  border-left:
    1px solid rgba(199,163,90,0.24);
}

.contact-hero-note span {

  display: block;

  margin-bottom: 1rem;

  color: var(--gold);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}

.contact-hero-note p {

  font-family: var(--serif);

  font-size:
    clamp(1.4rem,2vw,2rem);

  line-height: 1.15;

  color:
    rgba(243,244,246,0.74);
}

/* ======================================================= */
/* EDITORIAL CONTACT */
/* ======================================================= */

.contact-editorial-shell {

  position: relative;

  padding:
    clamp(120px,14vw,220px)
    0;

  background:
    linear-gradient(
      180deg,
      rgba(17,22,29,0.98),
      rgba(12,16,21,0.98)
    );
}

.contact-editorial-grid {

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,480px);

  gap:
    clamp(3rem,8vw,10rem);

  align-items: start;
}

.contact-editorial-copy h2 {

  max-width: 720px;

  font-size:
    clamp(3rem,6vw,6.8rem);

  line-height: 0.92;

  margin-bottom: 3rem;
}

/* ------------------------------------------------ */
/* PRESENCE */
/* ------------------------------------------------ */

.contact-presence {

  display: flex;
  flex-wrap: wrap;

  gap: 0.9rem;

  margin-bottom: 4rem;
}

.contact-presence span {

  border:
    1px solid rgba(255,255,255,0.08);

  background:
    rgba(255,255,255,0.02);

  padding:
    0.75rem 1rem;

  color:
    rgba(243,244,246,0.68);

  font-size: 0.68rem;
  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

/* ------------------------------------------------ */
/* CONTACT LINES */
/* ------------------------------------------------ */

.contact-lines-editorial {

  display: grid;

  gap: 2rem;
}

.contact-lines-editorial small {

  display: block;

  margin-bottom: 0.8rem;

  color:
    rgba(199,163,90,0.78);

  font-size: 0.7rem;
  font-weight: 700;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}

.contact-lines-editorial a,
.contact-lines-editorial p {

  color:
    rgba(243,244,246,0.72);

  font-size: 1.05rem;

  line-height: 1.7;
}

/* ------------------------------------------------ */
/* FORM */
/* ------------------------------------------------ */

.contact-form-shell {

  position: sticky;

  top: 120px;

  padding:
    clamp(2rem,4vw,3rem);

  border:
    1px solid rgba(255,255,255,0.06);

  background:
    rgba(255,255,255,0.02);

  backdrop-filter: blur(14px);
}

.contact-form-shell h3 {

  font-size:
    clamp(2.2rem,4vw,4rem);

  line-height: 0.94;

  margin-bottom: 2rem;
}

.editorial-form {

  gap: 1.2rem;
}

/* ======================================================= */
/* VISUAL BAND */
/* ======================================================= */

.contact-visual-band {

  position: relative;

  height: 56vh;

  overflow: hidden;
}

.contact-visual-band img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(0.55)
    saturate(0.75)
    contrast(1.05);
}

.contact-visual-overlay {

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(12,16,21,0.82),
      transparent 30%,
      transparent 70%,
      rgba(12,16,21,0.92)
    );
}

/* ======================================================= */
/* QUOTE */
/* ======================================================= */

.contact-quote {

  background:
    linear-gradient(
      180deg,
      #11161d,
      #0c1015
    );

  border-top:
    1px solid rgba(255,255,255,0.06);
}

.contact-quote blockquote {

  max-width: 980px;

  font-size:
    clamp(3rem,6vw,6.2rem);

  line-height: 0.96;
}

/* ======================================================= */
/* RESPONSIVE */
/* ======================================================= */

@media(max-width: 1080px) {

  .contact-hero-grid,
  .contact-editorial-grid {

    grid-template-columns: 1fr;
  }

  .contact-form-shell {

    position: relative;
    top: auto;
  }
}

@media(max-width: 760px) {

  .contact-cinema-hero {

    min-height: auto;

    padding:
      150px 0
      80px;
  }

  .contact-hero-copy h1 {

    font-size:
      clamp(3.5rem,14vw,6rem);
  }

  .contact-editorial-copy h2 {

    font-size:
      clamp(2.6rem,11vw,4.5rem);
  }

  .contact-quote blockquote {

    font-size:
      clamp(2.4rem,10vw,4rem);
  }

  .contact-visual-band {

    height: 36vh;
  }

}
  
  /* CONTACT PAGE FORM STYLE MATCH */

.page-contact .contact-form-shell form {
  display: grid;
  gap: 1.4rem;
}

.page-contact .contact-form-shell input,
.page-contact .contact-form-shell textarea {
  width: 100%;
  border: 1px solid rgba(179, 188, 200, 0.14);
  background: rgba(23, 29, 37, 0.72);
  color: var(--ink);
  padding: 1.35rem 1.5rem;
  font-size: 1rem;
  font-weight: 400;
  outline: none;
  border-radius: 0;
}

.page-contact .contact-form-shell textarea {
  min-height: 220px;
  resize: vertical;
}

.page-contact .contact-form-shell input::placeholder,
.page-contact .contact-form-shell textarea::placeholder {
  color: rgba(179, 188, 200, 0.62);
}

.page-contact .contact-form-shell input:focus,
.page-contact .contact-form-shell textarea:focus {
  border-color: rgba(199, 163, 90, 0.48);
  background: rgba(23, 29, 37, 0.92);
}

.page-contact .contact-form-shell button {
  justify-self: start;
  min-width: 220px;
}

/* CONTACT PAGE FORM - DESKTOP + MOBILE FINAL OVERRIDE */

.page-contact .contact-form-shell form {
  width: 100%;
  display: grid;
  gap: 1.4rem;
}

.page-contact .contact-form-shell input,
.page-contact .contact-form-shell textarea {
  appearance: none;
  -webkit-appearance: none;

  width: 100%;
  display: block;

  border: 1px solid rgba(179, 188, 200, 0.14);
  background: rgba(23, 29, 37, 0.72);
  color: var(--ink);

  padding: 1.35rem 1.5rem;

  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;

  border-radius: 0;
  outline: none;
  box-shadow: none;
}

.page-contact .contact-form-shell textarea {
  min-height: 220px;
  resize: vertical;
}

.page-contact .contact-form-shell input::placeholder,
.page-contact .contact-form-shell textarea::placeholder {
  color: rgba(179, 188, 200, 0.62);
}

.page-contact .contact-form-shell input:focus,
.page-contact .contact-form-shell textarea:focus {
  border-color: rgba(199, 163, 90, 0.48);
  background: rgba(23, 29, 37, 0.92);
}

.page-contact .contact-form-shell button {
  justify-self: start;
  min-width: 220px;
}