/* ==========================================================================
   The enquiry form
   --------------------------------------------------------------------------
   Its own stylesheet, loaded only on the one page that has a form, because it
   is the only page that carries Contact Form 7's markup and there is no reason
   for the other nine to pay for it.

   Contact Form 7 emits the controls and we do not control that. What we do
   control is the layout, the labels and the error slots, which are written by
   hand in the form definition — a grid with helper text and a per-field
   message does not survive being generated one paragraph per field.

   Three layers of ground, and that is the whole design:

       page      --mist        the section it sits in
       panel     --paper       the form itself, so its edge is visible
       field     tinted        recessed, brightening to white on focus

   The first version had all three white. A white form on a white page has no
   edge at all, and every border was --line (#DCE8ED) — 1.09:1 against its own
   ground, which is not a border, it is a rumour of one. Field borders here are
   measured at 3.3:1 against the panel, which is what WCAG 1.4.11 asks of a
   control boundary and, not coincidentally, what makes them visible.
   ========================================================================== */

.fame-formwrap {
  /* Field borders and their focus ring, kept together so the resting and
     focused states cannot drift apart. */
  --field-bg:    #F6FAFC;
  --field-br:    #73929F;   /* 3.31:1 on --paper — a boundary, not a hint */
  --field-br-hi: var(--brand-600);

  overflow: hidden;   /* so the head's colour is clipped by the radius */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(14, 16, 48, .05), 0 24px 48px -34px rgba(14, 16, 48, .55);
}

/* --------------------------------------------------------------------------
   The head

   The heading lives inside the panel, on colour, rather than above it on the
   page. It gives the form a top edge you cannot miss and it is the same
   ink-to-teal the page heroes use, so the panel arrives as part of the site.

   The gradient runs dark to less dark — ink #0E1030 into brand-800 #0A5468 —
   which keeps every stop well clear on contrast: the lightest corner measures
   6.1:1 against the eyebrow and 6.0:1 against the paragraph, and the text sits
   at the darker end of the sweep besides.
   -------------------------------------------------------------------------- */

.fame-formwrap__head {
  position: relative;
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(135deg, var(--ink) 0%, var(--brand-900) 58%, var(--brand-800) 100%);
  color: var(--on-dark);

  /* The eyebrow reads --accent-text like every other eyebrow on the site; this
     is the dark-ground value for it. */
  --accent-text: var(--brand-200);
}

/* One bright rule along the top edge. The brand cyan at full strength appears
   exactly once on this page, and this is where. */
.fame-formwrap__head::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300) 55%, var(--warm-500));
  content: "";
}

.fame-formwrap__head h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: var(--tr-head);
  color: var(--on-dark);
}

.fame-formwrap__head p {
  max-width: 54ch;
  margin: var(--s-2) 0 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--on-dark-2);
}

.fame-formwrap__body { padding: var(--s-6); }

.fame-formwrap .wpcf7-form > p { margin: 0; }

/* Every field on this form is required, so an asterisk on all five marks
   nothing — it is five pieces of noise saying the same thing. One line says it
   once, before the reader starts rather than after they have missed one. */
/* Selector weight is deliberate: the rule two lines above zeroes the margin on
   every direct child paragraph of the form, and it wins on specificity against
   a single class. */
.fame-formwrap .wpcf7-form > .fame-form__note {
  margin: 0 0 var(--s-5);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
}

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

   Five fields, three rows. Name and email pair because they are the reply
   address; organisation and subject pair because they are the routing.
   -------------------------------------------------------------------------- */

.fame-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.fame-field--wide { grid-column: 1 / -1; }

/* Mono, tracked, uppercase — the same treatment every other label on this site
   gets. It is most of what makes the form read as belonging here rather than
   as a plugin's default. */
.fame-field label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .16s ease;
}

/* The label follows focus, so the field being typed into is identifiable
   without reading it — useful on the narrow layout where the label is the only
   thing above the caret. */
.fame-field:focus-within label { color: var(--brand-700); }

.fame-field__hint {
  margin: -3px 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.fame-formwrap input[type="text"],
.fame-formwrap input[type="email"],
.fame-formwrap input[type="tel"],
.fame-formwrap input[type="url"],
.fame-formwrap select,
.fame-formwrap textarea {
  display: block;
  width: 100%;
  padding: 12px var(--s-4);
  font-family: inherit;

  /* 16px exactly. Below it iOS zooms the viewport the moment a field takes
     focus and never zooms back — from the reader's side the page breaks as
     they start typing, on the one form the site has. */
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-br);
  border-radius: var(--r-sm);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    transform .16s ease;
}

/* The native select arrow sits at a different inset on every platform. Drawn
   here so every control in the column lines up. */
.fame-formwrap select {
  appearance: none;
  padding-right: var(--s-7);
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-image: var(--fame-chevron);
}

.fame-formwrap textarea {
  min-height: 150px;
  resize: vertical;
}

.fame-formwrap input::placeholder,
.fame-formwrap textarea::placeholder { color: #6E8894; }

/* Typed inside — never `input` on its own. The submit control is an <input>
   too, and an unscoped `.fame-formwrap input:hover { background: var(--paper) }`
   painted the Send button white the moment the pointer touched it, label and
   all. Every rule meant for a field says which fields it means. */
.fame-formwrap input[type="text"]:hover,
.fame-formwrap input[type="email"]:hover,
.fame-formwrap input[type="tel"]:hover,
.fame-formwrap input[type="url"]:hover,
.fame-formwrap select:hover,
.fame-formwrap textarea:hover {
  border-color: var(--brand-600);
  background: var(--paper);
}

/* Focus brightens the field to white and lifts it a hair off the panel. The
   movement is one pixel and it is doing a job: it says which of the five boxes
   is live, from the corner of the eye, without relying on the ring's colour. */
.fame-formwrap input[type="text"]:focus,
.fame-formwrap input[type="email"]:focus,
.fame-formwrap input[type="tel"]:focus,
.fame-formwrap input[type="url"]:focus,
.fame-formwrap select:focus,
.fame-formwrap textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--field-br-hi);
  box-shadow: 0 0 0 3px var(--brand-100), 0 6px 16px -10px rgba(2, 110, 139, .8);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Invalid

   Three signals, never one: the border, the message, and a mark inside the
   message. Colour on its own fails anybody who cannot separate this border
   from the resting one, which is a large share of the men in this audience.
   -------------------------------------------------------------------------- */

.fame-field.is-invalid input,
.fame-field.is-invalid select,
.fame-field.is-invalid textarea,
.fame-formwrap .wpcf7-not-valid {
  border-color: var(--error);
  background: var(--error-bg);
}

/* Restated for hover and focus because the resting hover rule above outranks
   the invalid rule, and without these the red ground vanishes the moment the
   pointer crosses the field that is wrong. */
.fame-field.is-invalid input:hover,
.fame-field.is-invalid select:hover,
.fame-field.is-invalid textarea:hover,
.fame-field.is-invalid input:focus,
.fame-field.is-invalid select:focus,
.fame-field.is-invalid textarea:focus,
.fame-formwrap .wpcf7-not-valid:focus {
  border-color: var(--error);
  background: var(--error-bg);
}

.fame-field.is-invalid input:focus,
.fame-field.is-invalid select:focus,
.fame-field.is-invalid textarea:focus,
.fame-formwrap .wpcf7-not-valid:focus {
  box-shadow: 0 0 0 3px var(--error-ring);
}

.fame-field.is-invalid label { color: var(--error-ink); }

/* The slot is empty and hidden until there is something to say in it.
   This line is load-bearing: `display: flex` on the class below outranks the
   user agent's own `[hidden] { display: none }`, so without it every field on
   the form renders an empty red exclamation mark before the reader has typed
   a single character. The same trap has now caught this project three times —
   the office deck's cards and the menu button were the other two. */
.fame-field__error[hidden] { display: none; }

.fame-field__error,
.fame-formwrap .wpcf7-not-valid-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--error-ink);
  animation: fame-err-in .22s cubic-bezier(.2, .7, .3, 1) both;
}

.fame-field__error::before,
.fame-formwrap .wpcf7-not-valid-tip::before {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--error);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  content: "!";
}

@keyframes fame-err-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* CF7 renders its own tip into the same slot. One message per field. */
.fame-field.is-invalid .wpcf7-not-valid-tip { display: none; }

/* --------------------------------------------------------------------------
   The honeypot

   Positioned off-screen rather than display:none. A submission bot worth
   anything skips fields the stylesheet hides outright; a field moved away is
   indistinguishable from one that simply sits elsewhere on the page. The
   markup carries aria-hidden and tabindex="-1", so nobody using a keyboard or
   a screen reader can reach it by accident and be silently rejected.
   -------------------------------------------------------------------------- */

.fame-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Foot
   -------------------------------------------------------------------------- */

.fame-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.fame-formwrap .wpcf7-submit {
  flex: none;
  min-height: 50px;
  padding: 0 var(--s-6);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--w-medium);
  letter-spacing: .01em;
  color: var(--paper);

  /* Sized at 220% and slid on hover, because an <input> cannot carry a
     pseudo-element — this is the only way to animate a submit control that
     Contact Form 7 renders as an input rather than a button.

     Every stop is brand-700 or darker, and that is the constraint the ramp has
     to respect: the label is white at 15px, so the lightest fill the button
     may ever show is 5.82:1. The first version slid up to brand-600, which put
     the hovered state at 4.06:1 — a button that failed contrast only while
     somebody was pointing at it. */
  background: linear-gradient(115deg, var(--brand-900) 0%, var(--brand-800) 45%, var(--brand-700) 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 10px 20px -14px rgba(2, 110, 139, .9);
  transition:
    background-position .35s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.fame-formwrap .wpcf7-submit:hover {
  background-position: 100% 0;
  box-shadow: 0 14px 26px -12px rgba(2, 110, 139, .85);
  transform: translateY(-1px);
}

.fame-formwrap .wpcf7-submit:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px -12px rgba(2, 110, 139, .9);
}

.fame-form__reassure {
  flex: 1 1 220px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* CF7's spinner appears inline after the button and shoves the row sideways
   when it does. Given a fixed footprint it cannot. */
.fame-formwrap .wpcf7-spinner {
  flex: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Arrival

   The five fields fade up in sequence when the panel first comes into view.
   It runs once, it is over in under a second, and it exists for one reason: it
   draws the eye down the fields in the order they are meant to be filled in.

   The hidden state is keyed on .is-armed, which form.js adds to itself before
   it does anything else. No script, no class, no hidden fields — the form is
   never invisible because a stylesheet loaded and a script did not.
   -------------------------------------------------------------------------- */

.fame-formwrap.is-armed:not(.is-ready) .fame-field,
.fame-formwrap.is-armed:not(.is-ready) .fame-form__foot { opacity: 0; }

.fame-formwrap.is-ready .fame-field,
.fame-formwrap.is-ready .fame-form__foot {
  animation: fame-field-in .5s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: var(--d, 0s);
}

.fame-formwrap.is-ready .fame-field:nth-child(1) { --d: .04s; }
.fame-formwrap.is-ready .fame-field:nth-child(2) { --d: .10s; }
.fame-formwrap.is-ready .fame-field:nth-child(3) { --d: .16s; }
.fame-formwrap.is-ready .fame-field:nth-child(4) { --d: .22s; }
.fame-formwrap.is-ready .fame-field:nth-child(5) { --d: .28s; }
.fame-formwrap.is-ready .fame-form__foot          { --d: .34s; }

@keyframes fame-field-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* prefers-reduced-motion is handled globally in tokens.css, which shortens
   every animation to .01ms. That leaves the end state, which is the fields
   visible — correct, and nothing to repeat here. */

/* --------------------------------------------------------------------------
   The response
   -------------------------------------------------------------------------- */

.fame-formwrap .wpcf7-response-output {
  margin: var(--s-5) 0 0 !important;
  padding: var(--s-4) var(--s-5) !important;
  border-width: 1px !important;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.55;
  animation: fame-err-in .24s cubic-bezier(.2, .7, .3, 1) both;
}

.fame-formwrap form.sent .wpcf7-response-output {
  border-color: var(--live-br) !important;
  background: var(--live-bg);
  color: var(--live-ink);
}

.fame-formwrap form.invalid .wpcf7-response-output,
.fame-formwrap form.unaccepted .wpcf7-response-output,
.fame-formwrap form.failed .wpcf7-response-output,
.fame-formwrap form.spam .wpcf7-response-output {
  border-color: var(--error-br) !important;
  background: var(--error-bg);
  color: var(--error-ink);
}

@media (max-width: 640px) {
  .fame-formwrap__head { padding: var(--s-5) var(--s-4); }
  .fame-formwrap__body { padding: var(--s-5) var(--s-4); }

  /* One column. Two 150px fields side by side is worse than one of each: a
     name box you cannot see the end of is where typographical errors in a
     reply-to address come from. */
  .fame-form__grid { grid-template-columns: 1fr; gap: var(--s-4); }

  .fame-form__foot { gap: var(--s-3); }
  .fame-formwrap .wpcf7-submit { width: 100%; }

  /* Its own line, hard against the left margin. Left to wrap on its own it
     shares the row with CF7's spinner and starts an inch in from everything
     above it. */
  .fame-form__reassure { flex: 0 0 100%; }
}

/* --------------------------------------------------------------------------
   Google's reCAPTCHA badge

   Injected fixed to the bottom-right of the window, and on a screen narrower
   than about 400px it pushes the document wider than the viewport — a sideways
   scroll on every page of the site, caused by a third-party widget. Contained,
   and shown only on the page that actually has a form to protect.
   -------------------------------------------------------------------------- */

.grecaptcha-badge {
  z-index: 30;
  max-width: 100vw;
  visibility: hidden;
}

.fame-has-form .grecaptcha-badge { visibility: visible; }