/* ==========================================================================
   Content Forge — Contact page

   One screen, two columns: the identity and the two non-form ways to reach us
   on the left, the brief form on the right. This replaced a fixed 108rem hero
   with the form stacked underneath it as a second screen.

   The hero used to place every element at absolute rem coordinates from the
   Figma. That cannot survive a column whose height depends on its content — a
   form grows with validation messages — so the left rail flows and only the
   three decorations (cube, sticker, arrow) stay absolutely positioned.
   ========================================================================== */

.contact {
  position: relative;
  min-height: 100vh;
  /* Top padding only has to clear the absolutely positioned header; the spare
     room is distributed by the centring below rather than by a big fixed inset. */
  padding: 14rem 24rem 8rem;
  display: grid;
  grid-template-columns: 64rem 1fr;
  /* Two rows: the content takes every spare pixel, the bar hugs its content at
     the foot. Handing all the free space to one row and centring inside it
     puts the content in the middle of the screen — an earlier attempt used
     align-content: space-between, which pinned the content to the top and the
     bar to the bottom and left the gap between them. */
  grid-template-rows: 1fr auto;
  gap: 0 14rem;
  align-items: center;
}
/* .zone__bg is positioned, so it paints over any static sibling. The content
   columns need a stacking context above it. Listed explicitly rather than as
   `.contact > *`: that would also match .header, whose own position:absolute
   is less specific, and turning the header into a grid item drops it into the
   first column. The three decorations set their own z-index alongside the
   position they already need. */
.contact__lead,
.cform__form,
.cform__done,
.contact__bar { position: relative; z-index: 2; }

/* ---------- left rail ---------- */

.contact__lead { grid-column: 1; }

.contact__title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  /* 14rem, not the 20.7rem of the old full-bleed hero: at that size the word
     "HELLO!" alone is wider than the column the form leaves. */
  font-size: 14rem;
  line-height: 0.9;
  letter-spacing: -0.49rem;
  word-spacing: 0.49rem;
  text-transform: uppercase;
  color: #fff;
}

.contact__nice {
  margin-top: 3.2rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: 0.22rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--cream);
}

.contact__inq {
  /* Was 7.2rem below the booking CTA that used to sit between this and the
     intro line; it now carries that gap itself. */
  margin-top: 9rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.22rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--cream);
}
.contact__hello {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  letter-spacing: -0.3rem;
  word-spacing: 0.3rem;
  text-transform: uppercase;
  color: var(--lime);
}
.contact__hello:hover { text-decoration: underline; }
.contact__domain {
  display: block;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.18rem;
  text-transform: uppercase;
  color: var(--lime);
}
.contact__domain:hover { text-decoration: underline; }

/* ---------- decorations ---------- */

/* Coordinates are relative to .contact__lead, not to the section, because the
   rail is vertically centred and would otherwise slide out from under them at
   every window height. Each sits in a measured gap in the rail's own text:
   "SAY" ends at 34rem and "HELLO!" starts 10rem down, leaving a hole to the
   right of the short first line; the sticker and arrow sit outboard of the
   lime address, whose text runs to ~32rem inside a full-width block.
   pointer-events off so the cube cannot swallow a click. */
.contact__cube {
  position: absolute;
  left: 40rem;
  top: -3rem;
  width: 13rem;
  height: 13rem;
  object-fit: contain;
  object-position: bottom;
  z-index: 3;
  pointer-events: none;
}
.contact__mail {
  position: absolute;
  /* 36rem, not 33: the 12.13deg rotation widens the box to ~14rem, and the
     address text below runs to 35.2rem. */
  left: 36rem;
  top: 35rem;
  width: 12rem;
  height: 12rem;
  transform: rotate(12.13deg);
  z-index: 3;
}
/* Flipped: the original pointed left-to-right at an address on the far side of
   the page, and the address now sits to its left. */
.contact__arrow {
  position: absolute;
  left: 37rem;
  top: 52rem;
  width: 10rem;
  transform: scaleX(-1) rotate(-12deg);
  z-index: 3;
  pointer-events: none;
}

/* ---------- form ---------- */

.cform__form {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 4.2rem;
}
.cform__eyebrow { margin-bottom: -1.4rem; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4.2rem; }

.cfield { display: flex; flex-direction: column; gap: 1.2rem; }
.cfield__label {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.14rem;
  text-transform: uppercase;
  color: var(--cream);
}
.cfield__input {
  width: 100%;
  padding: 1.2rem 0;
  background: none;
  border: none;
  border-bottom: 0.1rem solid rgba(239, 239, 209, 0.3);
  border-radius: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--cream);
  caret-color: var(--lime);
  transition: border-color 0.25s ease;
}
.cfield__input:hover { border-bottom-color: rgba(239, 239, 209, 0.55); }
.cfield__input:focus { outline: none; border-bottom-color: var(--lime); }
.cfield__input--area { resize: vertical; min-height: 9rem; }

/* The native control paints its own chrome on a dark background, so it is
   stripped back and the chevron drawn by the wrapper instead. */
.cfield--select { position: relative; }
.cfield--select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 3rem; }
.cfield--select::after {
  content: '';
  position: absolute;
  right: 0.4rem;
  bottom: 2.2rem;
  width: 1rem;
  height: 1rem;
  border-right: 0.2rem solid var(--cream);
  border-bottom: 0.2rem solid var(--cream);
  transform: rotate(45deg);
  pointer-events: none;
}
/* The options list is drawn by the OS, which does not inherit the page's
   colours — set them so the menu is not black-on-black. */
.cfield--select option { background: var(--ink); color: var(--cream); }
.cfield--select select:invalid { color: rgba(239, 239, 209, 0.45); }

.cform__chips { border: none; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.cform__chips legend { margin-bottom: 1.8rem; }
.chip { cursor: pointer; }
/* Off-screen rather than display:none so the checkbox stays focusable and
   keeps announcing its checked state. */
.chip input { position: absolute; opacity: 0; width: 0.1rem; height: 0.1rem; }
.chip span {
  display: block;
  padding: 1.1rem 2.4rem;
  border: 0.1rem solid rgba(239, 239, 209, 0.3);
  border-radius: 8.63rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--cream);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.chip:hover span { border-color: var(--cream); }
.chip input:checked + span { background: var(--lime); border-color: var(--lime); color: #000; }
.chip input:focus-visible + span { outline: 0.2rem solid var(--lime); outline-offset: 0.3rem; }

.cfield--error .cfield__input { border-bottom-color: var(--red); }
.cfield__error { font-size: 1.4rem; line-height: 1.3; color: var(--red); }

/* Kept out of view without display:none, which some bots skip. */
.cform__hp { position: absolute; left: -9999rem; width: 1rem; height: 1rem; overflow: hidden; }

.cform__foot { display: flex; align-items: center; gap: 2.8rem; }
.cform__submit { flex: none; }
.cform__submit[disabled] { opacity: 0.55; pointer-events: none; }
.cform__status { font-size: 1.6rem; line-height: 1.4; color: rgba(239, 239, 209, 0.7); }
.cform__status--error { color: var(--red); }

.cform__done {
  grid-column: 2;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: -0.16rem;
  word-spacing: 0.16rem;
  text-transform: uppercase;
  color: var(--lime);
}
.cform__done span {
  display: block;
  margin-top: 1.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0;
  word-spacing: 0;
  text-transform: none;
  color: rgba(239, 239, 209, 0.7);
}

/* ---------- footer bar ---------- */

.contact__bar {
  grid-column: 1 / -1;
  /* A minimum separation from the content, not the thing that positions it —
     the bar's own grid row already holds it at the foot of the section. */
  margin-top: 6rem;
  display: flex;
  justify-content: space-between;
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  color: #fff;
}

/* ---------- mobile ---------- */

@media (max-width: 820px) {
  .contact {
    min-height: 0;
    padding: 11rem 2rem 4rem;
    grid-template-columns: 1fr;
    /* One column, three stacked items, and no min-height to create spare
       space — so the desktop `1fr auto` template has nothing to distribute
       and would only mis-assign rows. Let every row size to its content. */
    grid-template-rows: none;
    gap: 0;
    text-align: center;
  }
  .contact__lead { display: flex; flex-direction: column; align-items: center; }
  .contact__title { font-size: 6.4rem; letter-spacing: -0.32rem; word-spacing: 0.32rem; }
  .contact__nice { margin-top: 2rem; font-size: 1.4rem; }
  .contact__inq { margin-top: 6rem; font-size: 1.4rem; }
  .contact__hello { margin-top: 1rem; font-size: 4rem; letter-spacing: -0.2rem; word-spacing: 0.2rem; }
  /* padded so the address is a real tap target, not a 21px sliver */
  .contact__domain { padding: 1rem 1.2rem; font-size: 1.6rem; }

  /* All three decorations are desktop-only. Each was placed against a gap in
     the two-column layout, and once the columns collapse there is no gap left
     to sit in — the cube pushed the whole form a screen further down for no
     gain, and the sticker and arrow pointed at positions that no longer exist. */
  .contact__cube, .contact__mail, .contact__arrow { display: none; }

  /* Reset to column 1. `grid-column: 2` against a single-column template does
     not clamp — it creates an implicit second column, which put the form
     alongside the lead rather than under it. */
  .cform__form, .cform__done { grid-column: 1; }
  .cform__form { margin-top: 6rem; gap: 3.2rem; text-align: left; }
  .cform__eyebrow { margin-bottom: -1rem; }
  /* One field per row: two 1.8rem inputs side by side on a phone are too
     narrow to read what you are typing. */
  .cform__row { grid-template-columns: 1fr; gap: 3.2rem; }
  .cform__chips { gap: 1rem; }
  .chip span { padding: 1rem 1.8rem; font-size: 1.4rem; }
  .cform__foot { flex-direction: column; align-items: stretch; gap: 1.8rem; }
  .cform__submit { width: 100%; }
  .cform__done { font-size: 2.4rem; letter-spacing: -0.12rem; word-spacing: 0.12rem; text-align: left; }
  .contact__bar { margin-top: 6rem; flex-direction: column; align-items: center; gap: 2.6rem; }
}