/* ==========================================================================
   Contact

   Carroll's #new_contact_form rebuilt. Theirs is a full viewport black band
   with a background video, a centred heading carrying the brokerage mark
   washed across it, and a white form card pulled 25px up into the heading's
   own bottom padding.

   Kept from theirs
     the three layer stack: video, gradient, form
     the card geometry: 790px cap, 25px overlap, two 49% columns above 1024
     the 45px field height and the 200px submit
     the reveal: one class added when the section reaches mid viewport and
       never removed, children staggered in 0.1s steps

   Ours
     LEFT ALIGNED, heading and card both. Theirs is centred throughout.
     Brand tokens and the brand serif, so no literal colour appears below.
     The video is real markup rather than a lazy loader's innerHTML, so the
       section is a photograph and not a black rectangle without JS.
     Focus rings, a drawn check glyph and an inline status line. Their form
       has none of the three: the global reset deletes every outline, the
       tick is an icon font glyph that renders as nothing when the font is
       blocked, and the only confirmation is a SweetAlert modal.

   Depends on _shared.css for .yp-sec, .yp-wrap, .yp-shead and .yp-rise, and
   on sections.js for the .yp-anim / .yp-in flip.
   ========================================================================== */

/* Ink ground, declared in the markup as .yp-sec-ink the way every section
   here declares its own. It sits between Shell above and the Sand footer
   below, so the dark band is what draws the boundary between the two beiges
   at the bottom of the page.

   Vertically centred above 1024 rather than top aligned. Carroll gets a full
   viewport band whose video only covers the content height, so the leftover
   strip falls back to the section's black. Ours covers the whole section, so
   there is no strip to fill and the block centres in the frame instead. */
.yp-contact {
  isolation: isolate;
}

@media (min-width: 1024px) {
  .yp-contact {
    display: flex;
    align-items: center;
    min-height: 100vh;
    /* svh, not vh: on mobile Safari in landscape vh is the tall URL bar
       measurement, which would push the card past the visible frame. */
    min-height: 100svh;
  }
}

/* ---- media layer ---------------------------------------------------------
   Carroll's <video> does not exist in their HTML at all; a lazy loader writes
   it in on intersection, so with JS blocked the whole section is flat black
   with white type on it. Ours ships the element, with a poster so the frame
   is a photograph from first paint rather than after the first keyframe. */

.yp-contact-ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--yp-ink);
}

/* block, not the reset's inline-block: an inline video sits on a text
   baseline and leaves a few px of ground showing under a 100% height clip. */
.yp-contact-ground video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Theirs runs black to transparent bottom up, which leaves the heading, which
   sits at the TOP, with nothing behind it but a text shadow. Ours is heaviest
   where the type actually is: dark at the top under the heading, dark again at
   the bottom where the section meets the footer, and near clear through the
   middle so the picture still reads as a picture. */
.yp-contact-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgb(var(--yp-ink-rgb) / 0.78) 0%,
    rgb(var(--yp-ink-rgb) / 0.46) 42%,
    rgb(var(--yp-ink-rgb) / 0.52) 72%,
    rgb(var(--yp-ink-rgb) / 0.86) 100%);
  pointer-events: none;
}

/* ---- layout --------------------------------------------------------------
   position and z-index, not tree order: the ground is a positioned element in
   the same stacking context, and a static wrapper would paint underneath it. */

.yp-contact-inner {
  position: relative;
  z-index: 1;
}

/* Full width, both of them, so the heading and the card share the same left
   and right edges as every other section on the page. This replaces a 790px
   cap that kept the block in the left half with the video showing through on
   the right. Client direction: the form runs the whole width.

   The empty right half was doing real work, so two things move with it. The
   watermark had nowhere to sit that was not behind the card, and the four
   fields would have stretched to 700px each on a wide screen, which is far
   past a comfortable target. Both are handled below. */
.yp-contact-head,
.yp-contact-card {
  /* 90 percent, not full bleed. At the whole width of the wrap the card read
     as too wide for the form it holds, and the fields stretched past a
     comfortable target. Centred so the inset is even on both sides. */
  width: 90%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* z-index and pointer-events are both load bearing, exactly as they are on
   theirs. The card is pulled up under this block, so without the transparent
   pass through the heading's bottom padding would swallow clicks on the top
   band of the card, first row of fields included. */
.yp-contact .yp-shead {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* The white mark, out in the empty right half rather than washed across the
   type the way theirs is. At 0.14 it is a watermark on the video, not a logo
   placement; any lower and it disappears into the darker frames of the clip. */

/* Below 1180 the 790px block and the mark start to overlap, and a logo behind
   a form card reads as a printing fault rather than as a watermark. */
/* ---- card ----------------------------------------------------------------
   Shell rather than white: white is reserved for photography edges and
   reversed type, and Shell against the ink ground is warmer without giving up
   any of the contrast the fields need.

   The 25px lift is Carroll's, and it is the whole reason the heading needs
   pointer-events: none above. Square corners are the departure. Their 25px
   pill fields and pill card are an IDX plugin's house style; this site is
   ruled and architectural everywhere else, and the one pill it does keep is
   the button, which is already a component (see .yp-meet-btn). */
.yp-contact-card {
  position: relative;
  z-index: 1;
  margin-top: -25px;
  padding: clamp(28px, 3.4vw, 60px) clamp(20px, 2.6vw, 40px);
  background: var(--yp-shell);
  box-shadow: 0 0 15px rgb(var(--yp-ink-rgb) / 0.22);
}

.yp-contact-card fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Visually hidden, kept in the accessibility tree. clip-path rather than the
   plugin's height:0;width:0, which some screen readers skip entirely. Used by
   the fieldset legend, which is real structure and must not be seen. */
.yp-contact-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- field grid ----------------------------------------------------------
   Below 1024 a plain stacked list, above it Carroll's exact grid: two 49%
   columns with space-between, which at a 710px inner measure leaves a 14px
   gutter. Full width rows opt out with .yp-contact-full. */

.yp-contact-fields {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yp-contact-field { margin-bottom: 14px; }
.yp-contact-field:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .yp-contact-fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .yp-contact-field { width: 49%; margin-bottom: 15px; }
  .yp-contact-full { width: 100%; }
}

/* ---- fields --------------------------------------------------------------
   Labels are visible, as they are on theirs, but set the way every other
   label scale line on this site is set: tracked caps rather than a 12px
   weight 100 grey. Placeholders are deliberately absent, so the label is the
   only thing naming the field and it has to survive the field being filled. */

.yp-contact-field label {
  display: block;
  margin-bottom: 7px;
  color: rgb(var(--yp-ink-rgb) / 0.62);
  font-family: var(--yp-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--yp-track-sub, 0.09em);
  text-transform: uppercase;
}

.yp-contact-field input,
.yp-contact-field textarea {
  width: 100%;
  padding: 0 16px;
  border: 1px solid rgb(var(--yp-ink-rgb) / 0.18);
  border-radius: 0;
  /* Declared, never inherited. Neither of Carroll's two stylesheets sets a
     field background at all, so their inputs are whatever the UA paints, and
     on a dark or forced colours client they go transparent over a light card. */
  background: var(--yp-white);
  color: var(--yp-ink);
  font-family: var(--yp-serif);
  /* 16px is a floor, not a taste call: iOS Safari zooms the page on focus for
     anything smaller, which on a form this wide is a jarring reflow. */
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-contact-field input { height: 45px; }

/* vertical, not their resize:none. A message box is the one field where the
   author is the only one who knows how much room the text needs. */
.yp-contact-field textarea {
  height: 120px;
  padding: 14px 16px;
  resize: vertical;
}

.yp-contact-field input:hover,
.yp-contact-field textarea:hover { border-color: rgb(var(--yp-ink-rgb) / 0.34); }

/* Every focus affordance on Carroll's page is deleted by their reset, twice,
   with nothing put back. This is the replacement, and it is the same ring the
   footer and the buttons use so the whole site rings the same way. */
.yp-contact :is(input, textarea, button, a):focus-visible {
  outline: 1px solid var(--yp-ink);
  outline-offset: 3px;
}

.yp-contact-field input:focus,
.yp-contact-field textarea:focus { border-color: var(--yp-ink); }

/* Error state without a red, because the palette has four tokens and none of
   them is a red. Weight carries it instead: the hairline goes to full ink and
   doubles, which is the only border on the card heavy enough to read as a
   flag. :user-invalid rather than :invalid, so an untouched empty required
   field is not marked wrong before anybody has typed in it. */
.yp-contact-field input:user-invalid,
.yp-contact-field textarea:user-invalid {
  border-color: var(--yp-ink);
  border-width: 2px;
}

/* ---- consent -------------------------------------------------------------
   Their tick is a glyph from an icon font, on a box that ships pre-checked and
   required. Block the font and the checked state renders as nothing, so a
   reader who unticks a box they never ticked cannot see why the form will not
   send. Ours is a drawn SVG and starts empty: consent that was never given is
   not consent. */

.yp-contact-consent {
  /* The real checkbox below is position: absolute with no offsets, so it holds
     its static position. Naming a containing block here keeps that true even
     if the card ever stops being a positioned element. */
  position: relative;
}

.yp-contact-consent label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: rgb(var(--yp-ink-rgb) / 0.7);
  font-family: var(--yp-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
  text-transform: none;
  cursor: pointer;
}

/* Hidden from the eye, not from the keyboard or the accessibility tree. The
   label is the hit target and the drawn box is the affordance. */
.yp-contact-consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.yp-contact-box {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  /* 1px of optical lead in, so the box sits on the first line's cap height
     rather than on its ascender. */
  margin-top: 1px;
  border: 1px solid rgb(var(--yp-ink-rgb) / 0.34);
  background: var(--yp-white);
  transition: border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-contact-box svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--yp-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-contact-consent input:checked + label .yp-contact-box { border-color: var(--yp-ink); }
.yp-contact-consent input:checked + label .yp-contact-box svg { opacity: 1; }
.yp-contact-consent input:hover + label .yp-contact-box { border-color: rgb(var(--yp-ink-rgb) / 0.6); }

/* The input itself is clipped to a pixel, so the ring has to be drawn on the
   box that stands in for it. */
.yp-contact-consent input:focus-visible + label .yp-contact-box {
  outline: 1px solid var(--yp-ink);
  outline-offset: 3px;
}

.yp-contact-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-contact-consent a:hover { opacity: 0.6; }

/* ---- submit and status ---------------------------------------------------
   The same pill as .yp-meet-btn, because it is the site's button and this is
   not the place to invent a second one. Left aligned rather than their
   margin: 10px auto, so it sits on the same vertical as every field above it. */

.yp-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}

.yp-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 45px;
  padding: 0 24px;
  /* The tracking lands on the last letter too, which optically shoves a
     centred label left of its own box. The extra left padding puts it back. */
  padding-left: calc(24px + var(--yp-track-nav, 0.18em));
  border: 1px solid var(--yp-ink);
  border-radius: 50px;
  background: var(--yp-ink);
  color: var(--yp-shell);
  font-family: var(--yp-serif);
  font-size: 12px;
  letter-spacing: var(--yp-track-nav, 0.18em);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-contact-submit:hover,
.yp-contact-submit:focus-visible { background: transparent; color: var(--yp-ink); }

/* Carroll's only confirmation is a SweetAlert modal, which is gone the moment
   it is dismissed and never reaches a screen reader that missed it. This is an
   inline live region instead: empty until something is written into it, so it
   costs no space on a form nobody has submitted yet. */
.yp-contact-status {
  margin: 0;
  color: rgb(var(--yp-ink-rgb) / 0.72);
  font-family: var(--yp-serif);
  font-size: 13px;
  line-height: 1.5;
}

.yp-contact-status:empty { display: none; }

/* ---- reveal --------------------------------------------------------------
   The shared ladder in _shared.css delays .yp-rise by nth-child, which counts
   siblings: inside the heading that gives 0.30 / 0.40 / 0.50 correctly, but
   the card is the second child of the wrap and would land on 0.40, arriving
   before the standfirst above it. It takes the next rung explicitly.

   The selector is deliberately long: the shared rule is a three class chain,
   so anything shorter loses the cascade and the override silently does
   nothing. */

.yp-contact.yp-anim .yp-contact-inner .yp-contact-card { transition-delay: 0.60s; }

/* ---- responsive ----------------------------------------------------------
   Nothing here scrolls sideways: the card is width 100% inside .yp-wrap's
   gutters and every field is width 100% of the card, so the narrowest column
   the grid can produce is the one the viewport gives it. */

@media (max-width: 540px) {
  .yp-contact-card {
    /* The lift is tuned to the heading's desktop bottom padding. At phone
       widths that padding drops to 30px and the overlap starts eating the
       standfirst, so the card sits on its own line instead. */
    margin-top: 0;
    padding: 26px 20px;
  }

  .yp-contact-actions { margin-top: 20px; }
  .yp-contact-submit { width: 100%; }
}

/* ---- reduced motion ------------------------------------------------------
   Additive: nobody who has not asked their OS for less motion sees any of it.
   The video is the real subject here. An autoplaying looping clip is exactly
   what the query is asking about, so it is dropped and the poster frame is
   painted as a still instead, which also means the 13MB file is never fetched
   for a reader who did not want it. */

@media (prefers-reduced-motion: reduce) {
  .yp-contact-ground {
    background-image: url(../../uploads/ritz-sobe-1280x720.jpg);
    background-size: cover;
    background-position: center;
  }

  .yp-contact-ground video { display: none; }

  /* Scoped restatement of the shared flattening, so this section stays still
     even if it is ever loaded without _shared.css. */
  .yp-contact .yp-rise,
  .yp-contact.yp-anim .yp-rise,
  .yp-contact.yp-anim.yp-in .yp-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .yp-contact-field input,
  .yp-contact-field textarea,
  .yp-contact-box,
  .yp-contact-box svg,
  .yp-contact-consent a,
  .yp-contact-submit { transition: none; }
}

/* ---- full width field grid -----------------------------------------------
   The 49% two-up worked against a 790px card. Across the full 1460px wrap it
   would give roughly 700px inputs, which is well past a comfortable target
   and makes a short field like a phone number look broken. Four across at the
   top end, stepping down as the room goes. */

@media (min-width: 1180px) {
  .yp-contact-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
  }
  .yp-contact-field { width: 23.5%; margin-bottom: 0; }
  /* The message field is the one that genuinely wants the room. */
  .yp-contact-field:has(textarea) { width: 100%; margin-top: 18px; }
}

@media (min-width: 900px) and (max-width: 1179px) {
  .yp-contact-field { width: 32%; }
  .yp-contact-field:has(textarea) { width: 100%; }
}

/* ---- call to action -------------------------------------------------------
   Carroll's .ms-smt: the line that actually asks for the enquiry, sitting
   between the headline and the form. Smaller than the headline and lighter
   than the deck, so it reads as an instruction rather than as more prose. */

.yp-contact-cta {
  margin: 22px 0 0;
  font-family: var(--yp-serif);
  font-size: clamp(19px, 1.5vw + 8px, 26px);
  font-weight: 400 !important;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: rgb(var(--yp-shell-rgb) / 0.92);
  padding: 0 !important;   /* Divi puts padding-bottom on every heading-ish block */
}

@media (max-width: 620px) {
  .yp-contact-cta { margin-top: 16px; }
}