/* ==========================================================================
   Contact Us — rebuilt page
   Loaded only by contact.html. Scoped under .px-contact so it cannot leak.

   ONE SCREEN, NO SCROLL, and the form is the whole page. Three bands:

       .px-hero__top     eyebrow + the two offices   — pinned to the top
       .px-hero__form    full width                  — centred in the rest
       .px-hero__links   email + socials             — pinned to the bottom

   `grid-template-rows: auto 1fr auto` is what pins them; the middle row
   absorbs the leftover height so the form floats in the centre of the screen
   no matter how tall the window is. contact.html carries no footer (the
   scrape never had one), so a hero sized to the viewport really is the whole
   document.

   There is deliberately no display heading or lead paragraph — "The brief"
   carries the page at display scale instead, so one piece of large type still
   anchors the composition without crowding the form.

   Two things about the height, and both matter:
     * svh, not vh — on mobile browsers vh is the *large* viewport (toolbars
       hidden), so 100vh overflows by the toolbar height and the page scrolls
       exactly as much as we were trying to avoid.
     * do NOT add the theme's -100px back. `#qodef-page-outer` carries
       `margin-top:-100px`, but the 100px header sits in flow above this
       content and the negative margin just cancels it, so the hero's top
       lands at viewport 0. Compensating made the document exactly 100px
       taller than the window at every size. --px-head is still needed for the
       hero's top PADDING, because the header paints over the hero even though
       it does not push it down.
   Below 1024px the bands stack loosely and scrolling is allowed again; a form
   this tall cannot be used in a locked 844px-tall phone viewport.
   ========================================================================== */

.px-contact {
  --gutter: clamp(22px, 5vw, 92px);
  --px-head: 100px;          /* the overlaying header / the negative margin */
  background: #000;
  color: var(--px-cream);

  /* break out of the theme's centred .qodef-content-grid so the hero plate
     runs edge to edge */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.px-contact *,
.px-contact *::before,
.px-contact *::after { box-sizing: border-box; }

/* The theme paints three 2px vertical rules down the whole page
   (.qodef-content-line, left / centre / right) as a decorative grid. On a page
   whose background is footage they read as scratches on the plate, so they are
   switched off here. This stylesheet only loads on contact.html, so the other
   pages keep them. */
.qodef-content-lines-holder { display: none !important; }

/* ---------------------------------------------------------------- hero --- */

.px-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--px-head) + clamp(18px, 3vh, 44px))
           var(--gutter)
           clamp(24px, 4vh, 52px);
}

.px-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.px-hero__media video,
.px-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: px-drift 26s ease-in-out infinite alternate;
}

@keyframes px-drift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .px-hero__media video,
  .px-hero__media img { animation: none; transform: scale(1.04); }
}

/* Navy → black scrim. Pulled well back so the plate actually reads as footage
   rather than a dark wash — but it cannot go to zero: the form sits directly
   on top of it and cream type over bare sand is unreadable. The values below
   were set by sampling the rendered pixels behind the type, not by eye; see
   the contrast note in the README before lightening further. */
.px-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.34) 22%,
                            rgba(0,0,0,.14) 48%, rgba(0,0,0,.62) 100%),
    linear-gradient(104deg, rgba(var(--px-navy-rgb), .62) 0%,
                            rgba(var(--px-navy-rgb), .34) 46%,
                            rgba(0, 0, 0, .34) 74%,
                            rgba(0, 0, 0, .42) 100%);
}

/* ---------------------------------------------------------------- grid --- */

/* The form IS the page, so it runs the full width and takes the top. `1fr auto
   auto` gives it all the leftover height (it centres inside that) and pins the
   links strip and the office directory to the bottom edge beneath it.
   No column split, nothing beside the form competing. */
.px-hero__stack {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: clamp(18px, 2.6vh, 36px);
  width: 100%;
  max-width: 1500px;
  height: 100%;
  margin: 0 auto;
}

/* -------------------------------------------------------- bottom band ---
   `.px-hero__top` is a historical name — this block holds the offices and now
   sits at the BOTTOM of the stack, under the links. Kept as-is so the selector
   stays stable. */

.px-hero__top { padding-top: clamp(10px, 1.6vh, 18px); }

/* ------------------------------------------------------------- offices --- */

/* A directory, not two stacked cards: each office is ONE horizontal row —
   city / address / phone — and the two rows share a three-column grid so the
   cities, addresses and phones line up under each other.

   `.px-office { display: contents }` is what makes that work: the wrapper
   stops generating a box and its three children become grid items of
   .px-offices directly, so one office = one row of three cells. The wrapper
   carries no semantics, so dissolving it costs nothing. */
.px-offices {
  display: grid;
  /* every column hugs its content. An earlier version gave the address column
     1fr, which stretched the row to the full 1440px and left a dead ~600px gap
     before the right-aligned phone — that gap is what made the band look
     broken rather than small. */
  grid-template-columns: repeat(3, max-content);
  column-gap: clamp(24px, 3.4vw, 64px);
  row-gap: clamp(12px, 1.8vh, 20px);
  align-items: baseline;
  justify-content: start;
  margin: 0;
}

.px-office { display: contents; }

.px-office h4 {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(16px, 1.5vw, 24px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--px-red);
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.px-office p {
  margin: 0;
  color: var(--px-cream-soft);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.5;
  white-space: nowrap;
}

.px-office__tel { color: var(--px-cream) !important; }

/* No rule between the two rows. A per-cell border-top is the only way to draw
   one without adding a wrapper (the offices are `display:contents`), and the
   column gaps chop it into three disconnected segments. The column alignment
   and the row gap separate the offices on their own. */

.px-office a {
  color: var(--px-cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.px-office a:hover { color: var(--px-red); border-color: var(--px-red); }

.px-hero__links {
  margin: 0;
  align-self: end;
  padding-top: clamp(12px, 1.8vh, 20px);
  font-size: 12.5px;
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.px-hero__links a {
  color: var(--px-cream-soft);
  text-decoration: none;
  transition: color .25s ease;
}

.px-hero__links a:hover { color: var(--px-red); }
.px-hero__links .px-sep { color: rgba(226, 224, 215, .3); }

.px-maillink {
  color: var(--px-cream) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 224, 215, .34);
  padding-bottom: 2px;
  transition: border-color .3s ease, color .3s ease;
}

.px-maillink:hover { color: var(--px-red) !important; border-color: var(--px-red); }

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

/* full width, centred in whatever height the middle row gets. No panel and no
   divider — a filled card would read as a widget dropped on the footage
   instead of part of the plate. */
.px-hero__form {
  width: 100%;
  align-self: center;
}

.px-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

/* with the display heading gone this is the only large type on the page, so
   it has to anchor the composition on its own */
.px-section-head h3 {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(30px, min(3.6vw, 6vh), 60px);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--px-cream);
}

.px-section-head p {
  margin: 0;
  color: var(--px-cream-dim);
  font-size: clamp(13px, 1vw, 16px);
}

/* the form reads as a sentence the visitor completes, rather than a stack of
   labelled boxes */
.px-sentence {
  font-family: "Bebas Neue", sans-serif;
  /* the form is the page, so this runs at near-display scale. vh is in the
     clamp as well as vw: on a short window the limit is height, not width,
     and a vw-only clamp overflows a 768px-tall screen. */
  font-size: clamp(17px, min(2.05vw, 3.3vh), 34px);
  line-height: 1.9;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--px-cream-soft);
  /* no measure cap: this is a form prompt in display type, not body copy, and
     a cap left it wrapping at ~450px inside a 900px column, which read as a
     narrower element than the textarea sitting directly beneath it */
  max-width: none;
  margin: 0;
}

.px-fill {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.px-fill input,
.px-fill select {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--px-cream);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(226, 224, 215, .38);
  padding: 0 7px 5px;
  outline: none;
  border-radius: 0;
  min-width: 4ch;
}

.px-fill select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.3em;   /* room for the arrow; em so it tracks the type size
                             and the JS width measurement picks it up */
  cursor: pointer;
}

.px-fill select option {
  background: #10131c;
  color: var(--px-cream);
  font-size: 16px;
  letter-spacing: normal;
}

/* red rule sweeps in under the active field */
.px-fill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--px-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s cubic-bezier(.2,.6,.2,1);
}

.px-fill:focus-within::after { transform: scaleX(1); }

.px-fill--select::before {
  content: "";
  position: absolute;
  right: .45em;
  top: 50%;
  width: .32em;
  height: .32em;
  margin-top: -.26em;
  border-right: 1px solid var(--px-red);
  border-bottom: 1px solid var(--px-red);
  transform: rotate(45deg);
  pointer-events: none;
}

.px-fill input::placeholder { color: rgba(226, 224, 215, .34); }

.px-brief {
  margin-top: clamp(16px, 2.4vh, 28px);
}

/* NOT BLOOD. This is a functional form label and it has to read: BLOOD's
   luminance caps its contrast at 2.63:1 against pure black, so on the
   lightened plate it measured 1.45:1 — effectively invisible. Cream clears
   8:1 in the same spot. BLOOD is kept for the office cities, which are large
   enough to work as a colour accent rather than something you must read. */
.px-brief label {
  display: block;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--px-cream-soft);
  margin-bottom: 9px;
}

.px-brief textarea {
  width: 100%;
  min-height: 0;
  height: clamp(74px, 13vh, 150px);
  resize: none;
  background: transparent;
  color: var(--px-cream);
  border: 1px solid rgba(226, 224, 215, .22);
  padding: clamp(13px, 1.6vh, 18px) clamp(15px, 1.2vw, 20px);
  font-family: "Open Sans", sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  outline: none;
  transition: border-color .3s ease;
}

.px-brief textarea:focus { border-color: var(--px-red); }
.px-brief textarea::placeholder { color: rgba(226, 224, 215, .3); }

.px-form-actions {
  margin-top: clamp(14px, 2vh, 22px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.px-form-status {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--px-red);
  min-height: 1.2em;
  flex: 1 1 14ch;
}

/* ------------------------------------------------------------- buttons --- */

/* `.px-contact` prefix + explicit background beat the theme's own
   button[type=submit] styling, which otherwise paints the submit dark */
.px-contact .px-btn,
.px-contact button.px-btn[type="submit"] {
  --bg: var(--px-red);
  background: var(--px-red);
  border-color: var(--px-red);
  color: var(--px-cream);
  border-radius: 0;
}

.px-contact .px-btn:hover,
.px-contact button.px-btn[type="submit"]:hover {
  background: transparent;
  color: var(--px-cream);
}

.px-btn {
  --bg: var(--px-red);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 1.7vh, 19px) clamp(28px, 2.4vw, 42px);
  border: 1px solid var(--bg);
  background: var(--bg);
  color: var(--px-cream);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.px-btn:hover,
.px-btn:focus-visible {
  background: transparent;
  color: var(--px-cream);
  transform: translateY(-2px);
}

.px-btn__arrow { transition: transform .3s ease; }
.px-btn:hover .px-btn__arrow { transform: translateX(6px); }

/* ------------------------------------------------------------- reveals --- */

.px-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}

.px-reveal.px-in { opacity: 1; transform: none; }
/* the stagger lives in pixels-contact.js now (by document order), so no
   per-element transition-delay here */

@media (prefers-reduced-motion: reduce) {
  .px-reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------- one-screen sizing --- */

/* Desktop only.
   NOTE: the theme's `#qodef-page-outer { margin-top:-100px }` does NOT shift
   this content — the 100px header sits in flow above it and the negative
   margin just cancels that out, so the hero's top lands at viewport 0.
   Measured, not assumed: adding the 100px back made the document exactly
   100px taller than the window at every size. So the height here is a plain
   100svh. --px-head is still needed for the top padding, because the header
   paints *over* the hero even though it does not displace it. */
@media only screen and (min-width: 1025px) {
  .px-contact { overflow: hidden; }

  .px-hero {
    height: 100svh;
    min-height: 620px;
    display: grid;
    align-content: stretch;   /* the stack distributes its own three rows */
  }
}

/* --------------------------------------------------------------- small --- */

@media (max-width: 1024px) {
  .px-hero__stack { height: auto; gap: clamp(26px, 4vh, 40px); }
  .px-offices { column-gap: clamp(16px, 2.6vw, 34px); }
  .px-office p { white-space: normal; }
  .px-sentence { font-size: clamp(16px, 3.6vw, 22px); line-height: 2.15; }
}

@media (max-width: 600px) {
  /* no room for three columns — each office goes back to a stacked block */
  .px-offices { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .px-office h4 { margin-top: 14px; }
  .px-office:first-child h4 { margin-top: 0; }
  .px-office:last-child h4 { padding-top: 10px; }
  .px-sentence { line-height: 2.25; }
  .px-fill input, .px-fill select { min-width: 3ch; }
  .px-btn { width: 100%; justify-content: center; }
  .px-form-status { flex-basis: 100%; }
}