/* TOZ Contact page styles — page-specific (shared header/nav/footer/mobile-menu
   and :root tokens live in /css/shared.css) */

/* =============================================================================
   SHARED, Buttons (frosted-glass standard, see §13)
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 36px;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring),
              border-color 0.3s var(--ease-spring),
              color 0.3s var(--ease-spring);
}
.btn--ghost {
  background: rgba(28, 36, 75, 0.4);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--toz-white);
  border-color: rgba(229, 228, 235, 0.6);
}
.btn--ghost:hover {
  color: var(--toz-teal-bright);
  border-color: var(--toz-teal-bright);
  transform: translateY(-1px);
}
.btn:focus-visible {
  outline: 2px solid var(--toz-teal-bright);
  outline-offset: 4px;
}

/* =============================================================================
   1. HERO, full-bleed Rainbow Roberts photo, hero gradient overlay, H1
   ============================================================================= */

.hero {
  position: relative;
  isolation: isolate;
  /* Shorter than the other pages' full-viewport hero — the Contact page's
     job is to get visitors to the form quickly, not linger on the photo. */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 24px 64px;
  --hero-bg: url('/images/RD_Red_Dress_Art_2025.webp');
  /* Positioned left-of-centre (not the default centre) so the figures stay
     the focal point and the artwork's black negative space on the right
     is what gets cropped first on narrow viewports, not the figures. */
  background: var(--hero-bg) 30% center / cover no-repeat;
  color: var(--toz-white);
  text-align: center;
}
@media (max-width: 768px) {
  .hero { --hero-bg: url('/images/RD_Red_Dress_Art_2025-mobile.webp'); }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(28, 36, 75, 0.50) 0%,
    rgba(20, 20, 54, 0.30) 35%,
    rgba(9, 6, 18, 0.65) 100%);
}
.hero__inner { max-width: 960px; }
.hero__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-white);
  margin: 0;
  white-space: nowrap;
  hyphens: none;
}
/* =============================================================================
   2. FORM, navy section; contained IMG_6031 photo feathered behind the frosted
      panel (Rainbow no longer full-bleed); panel floats on top
   ============================================================================= */

.contact {
  position: relative;
  isolation: isolate;
  background: var(--toz-white);
  padding: 140px 24px;
  color: var(--toz-indigo);
}
.contact__inner {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.contact__intro {
  text-align: center;
  margin: 0 0 48px;
}
.contact__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-indigo);
  margin: 0;
  text-wrap: balance;
}
.contact-direct {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  line-height: 2;
  margin: 24px 0;
}
.contact-direct a {
  color: var(--toz-teal-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-direct a:hover { color: var(--toz-indigo); }
.contact__intro > p:not(.contact-direct) {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--toz-indigo);
  opacity: 0.85;
  margin: 0;
}
.form-help {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--toz-indigo);
  opacity: 0.75;
}
.form-help a {
  color: var(--toz-teal-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-help a:hover { color: var(--toz-indigo); }

/* Frosted panel over a wider, softly indigo-tinted clay photo. The panel
   fill + border live on ::after (in FRONT of the photo); the .contact-form
   box itself carries no bg/border, because a z-index:-1 ::before paints
   over the box's own bg/border and would hide them. ::before = wider clay
   photo field (z-index:-2, behind); ::after = the defined frosted panel
   (z-index:-1, in front of the photo, behind content). */
.contact-form {
  position: relative;
  isolation: isolate;
  border-radius: 0;
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* Wider clay photo behind/around the box, radially feathered so it melts
   into the Almost White section. Tint is deliberately light/subtle — the
   clay figures and warm off-white paper should stay clearly visible, not
   another large dark-blue block like the previous treatment. */
.contact-form::before {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -44px -120px;
  --form-bg: url('/images/CW_Untitled_Collection_2024.webp');
  background:
    linear-gradient(180deg,
      rgba(28, 36, 75, 0.16) 0%,
      rgba(28, 36, 75, 0.28) 100%),
    var(--form-bg)
    center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 88% 74% at center, #000 54%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 74% at center, #000 54%, transparent 100%);
}
@media (max-width: 768px) {
  .contact-form::before { --form-bg: url('/images/CW_Untitled_Collection_2024-mobile.webp'); }
}
/* Panel fill + border — light indigo tint (was near-invisible white, tuned
   for a dark backdrop) so the panel still reads as a distinct surface
   against the now much lighter photo behind it. On ::after so it paints
   in front of the photo. */
.contact-form::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  /* Was rgba(28, 36, 75, 0.05) — barely there. That left the rock-photo
     texture directly behind the field labels (the labels sit on this
     panel layer, not inside the input boxes, which already have their
     own near-opaque background), so contrast varied wildly patch to
     patch and the labels read as hard to make out even after bumping
     their own color/weight. A near-opaque light panel + blur keeps the
     photo present as a soft wash (the brief for this section) while
     actually giving label/helper text a consistent surface to sit on. */
  background: rgba(229, 228, 235, 0.88);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  border: 1px solid rgba(28, 36, 75, 0.15);
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Honeypot: invisible to sighted users and screen readers, but still
   present in the DOM so naive spam bots that don't render CSS fill it in.
   Deliberately not display:none — some bots specifically skip those. */
.contact-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form__success {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  /* --toz-teal measures only 2.58:1 on this section's light background
     (same issue as .pullquote__attribution in home.css and
     .about-intro__translation in about.css) — --toz-teal-on-light passes. */
  color: var(--toz-teal-on-light);
  padding: 20px 24px;
  border: 1px solid var(--toz-teal-on-light);
  /* Must clear .contact-form::before's desktop bleed (inset: -44px -120px)
     or that background photo overlaps this box's bottom border. */
  margin-bottom: 56px;
}
.contact-form__success[hidden] { display: none; }
.contact-field__label {
  font-family: 'Poppins', sans-serif;
  /* Was 300/12px/0.75-opacity — thin, tiny, and washed-out enough that the
     labels were genuinely hard to read despite technically-passing
     contrast math. Bumped weight and size and darkened the color; kept
     the uppercase treatment but tightened tracking so it doesn't get even
     harder to read at the larger size. */
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(28, 36, 75, 0.92);
}
.contact-field__optional {
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  opacity: 0.6;
}

/* Inputs / select / textarea, near-white frosted fields, indigo text */
.contact-field input,
.contact-field select,
.contact-field textarea {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--toz-indigo);
  background: rgba(246, 247, 255, 0.94);
  border: 1px solid rgba(246, 247, 255, 0.25);
  border-radius: 3px;
  padding: 14px 16px;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color 0.2s var(--ease-spring),
              box-shadow 0.2s var(--ease-spring);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(28, 36, 75, 0.45);
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--toz-teal);
  box-shadow: 0 0 0 3px rgba(72, 205, 197, 0.30);   /* soft teal focus ring */
}
.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  outline: 2px solid var(--toz-teal-bright);          /* keyboard a11y */
  outline-offset: 2px;
}
.contact-field textarea {
  resize: vertical;
  min-height: 150px;
}

/* Custom select, native chrome stripped, thin indigo chevron via SVG */
.contact-field select {
  padding-right: 48px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%231C244B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px;
}
.contact-field select::-ms-expand { display: none; }   /* legacy Edge */

/* Submit, full-width frosted ghost button */
.contact-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}

/* =============================================================================
   3. WHERE TO FIND US, solid dark indigo background, two info cards + map
   ============================================================================= */

.findus {
  background: var(--toz-indigo-alt);
  padding: 140px 24px;
  color: var(--toz-white);
}
.findus__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
.findus__header { text-align: center; margin-bottom: 64px; }
.findus__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--toz-white);
  margin: 0;
  text-wrap: balance;
}
.findus__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 880px;
  margin: 0 auto;
}
.findus-card {
  background: rgba(229, 228, 235, 0.04);
  border: 1px solid rgba(229, 228, 235, 0.10);
  padding: 48px 40px;
  text-align: center;
}
.findus-card__icon {
  width: 36px; height: 36px;
  margin: 0 auto 24px;
  color: var(--toz-teal-bright);
}
.findus-card__icon svg { width: 100%; height: 100%; display: block; }
.findus-card__title {
  font-family: 'Karla', sans-serif;
  font-weight: 100;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--toz-white);
  margin: 0 0 24px;
}
.findus-card__body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--toz-white);
  opacity: 0.9;
  margin: 0 0 12px;
}
.findus-card__body:last-child { margin-bottom: 0; }
.findus-card__body a {
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.findus-card__body a:hover {
  color: var(--toz-teal-bright);
  border-color: var(--toz-teal-bright);
}
.findus__map {
  margin-top: 72px;
  width: 100%;
  height: 420px;
  border: 1px solid rgba(229, 228, 235, 0.10);
  overflow: hidden;
  background: rgba(9, 6, 18, 0.4);
}
.findus__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.4) brightness(0.85);
}

/* =============================================================================
   FOOTER
   ============================================================================= */


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

@media (max-width: 1024px) {
  .findus__cards { gap: 32px; }
  .findus__map { height: 380px; margin-top: 56px; }
}

@media (max-width: 768px) {
  .hero { padding: 96px 24px 64px; }

  .contact { padding: 96px 20px; }
  .contact__intro { margin-bottom: 36px; }
  .contact-form { padding: 32px 22px; gap: 22px; }
  .contact-form::before { inset: -24px -20px; }

  .findus { padding: 80px 24px; }
  .findus__header { margin-bottom: 48px; }
  .findus__cards { grid-template-columns: 1fr; gap: 24px; }
  .findus__map { height: 320px; margin-top: 48px; }

  .toz-footer { padding: 56px 24px 32px; }
  .toz-footer__nav ul { flex-direction: column; gap: 16px; }
  .toz-footer__land { margin-top: 32px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}