/* ============================================================
   Webify — Contact page layer
   ------------------------------------------------------------
   Loaded last, only by /contact/ and /ar/contact/. Removing that
   one <link> returns the page to what the shared library gives it.

   WHY THIS LAYER EXISTS: the Contact page was the last flat page
   on the site — a single white .section holding an intro, an info
   sidebar and a form. Every other redesigned page this session
   alternates ground, blocks colour and uses typographic rather
   than card treatments. This brings Contact into that system.

   COLOUR, third and final pass. Two earlier attempts are recorded
   here because both failed for reasons worth not repeating.

   1. A monotone ramp (white → 6% → 10% → navy). The two tinted
      bands read as ONE block down the middle of the page — the
      exact flatness this pass exists to remove.
   2. Hard alternation (white → tint → navy → white). Better, but
      the grounds were still wrong in two ways that only show up
      when you sample the actual pixels:

      • The tint was mixed from --brand-primary (#0300A9, h241,
        fully saturated) which lands on a LAVENDER — while every
        neutral on the site (--color-gray-*, borders, inputs) is
        a cool blue-GREY at h210. The page's own furniture fought
        its background.
      • The value steps were 100 → 96 → 21 → 100 → 21. One step
        of four points, three of nearly eighty. Nothing in the
        midrange, so every transition was either invisible or a
        slap.

   What ships instead — one hue family, symmetric, and no hard
   seam at the top:

     hero   white, fading DOWN into --ct-tint at its own base, so
            the hero and the form band are continuous — there is
            no edge between them to notice
     form   --ct-tint          (the white form card lifts off it)
     next   --ct-dark   NAVY, gold numerals — the one colour block
     close  --ct-tint          (same value as the form band)
     footer navy

   So the tint BRACKETS the dark band symmetrically, and the page
   ends tint → navy into the footer rather than white → navy. The
   grounds are mixed from --brand-primary into --color-gray-50, so
   they stay in the neutral family AND re-theme with the client's
   brand, which a hardcoded hex would not.

   Logical properties throughout — no physical left/right — so
   /ar/ mirrors without a retrofit. The ONE physical value is the
   radial wash position in the hero, which is flipped explicitly
   for RTL below rather than left to chance.
   ============================================================ */

:root {
  /* The page's three grounds. Mixed INTO the neutral scale rather
     than into pure white, so they read as the site's own cool grey
     with the brand in it — not as a lavender the rest of the page
     has never seen. */
  /* This page's tint recipe was the correct one and is now the site's:
     it moved verbatim into tokens.css as --ground-tint and every other
     page adopted it. These are aliases onto that canonical ladder --
     the values are unchanged, the authority just moved up a layer.
     --ct-rule stays local: it is a slightly warmer hairline this page
     uses against its own tint, not a site-wide value. */
  --ct-ground:     var(--ground);
  --ct-tint:       var(--ground-tint);
  --ct-rule:       color-mix(in srgb, var(--brand-primary) 6%, var(--border));
  --ct-dark:       var(--ground-dark);

  --rule:          var(--ct-rule);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   1. HERO — the statement, and the ways to reach a human
   ============================================================
   The direct channels used to sit beside the form as an info
   sidebar. They belong here: someone who would rather message
   than fill in a form should not have to scroll past the form
   to find that out. Moving them up also gives the hero a second
   column, which is what fixes the empty right-hand side.  */

.cthero {
  position: relative;
  background: var(--ct-ground);
  color: var(--text-body);
  overflow-x: clip;
  padding-block: var(--hero-pad-top) var(--section-pad-lg);
  /* The hero previously carried TWO radial washes, one bronze and
     one blue. At 8-11% neither read as a decision — they read as a
     warm smudge on a page that is otherwise entirely cool, and the
     bronze one sat directly above the cool tint band and fought it.

     Both are gone. What replaces them is a single vertical fade
     that lands the hero on EXACTLY --ct-tint at its own base, so
     the form band below continues the value instead of starting a
     new one. There is no seam left to look at, which was the whole
     complaint. A vertical fade also needs no RTL mirroring.

     The cool radial is layered ON TOP (first in the list paints
     first) at a strength low enough to lift the white without
     tinting it — it is light, not colour. */
  --wash-a: 82%;
  background-image:
    radial-gradient(58vw 40vw at var(--wash-a) 14%,
      color-mix(in srgb, var(--brand-primary) 6%, transparent), transparent 66%),
    linear-gradient(to bottom, var(--ct-ground) 38%, var(--ct-tint) 100%);
}
/* The radial's position is a physical percentage; the page is not. */
html[dir="rtl"] .cthero { --wash-a: 18%; }

.cthero__inner {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .cthero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
}

.cthero__copy { max-width: 34rem; }

/* Masthead scale, matching .wkhero__title on the Work page so the
   two redesigned pages read as one site. */
.cthero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h-page);
  line-height: var(--h-page-leading);
  letter-spacing: var(--h-page-track);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

.cthero__rule {
  block-size: 1px;
  border: 0;
  background: linear-gradient(to var(--to-end, right),
    color-mix(in srgb, var(--brand-primary) 45%, transparent), var(--rule) 62%, transparent);
  margin-block: clamp(1rem, 2vw, 1.5rem);
}
html[dir="rtl"] .cthero__rule { --to-end: left; }

.cthero__lead {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--leading-body);
  /* --text-muted (gray-500) is AA on pure white and NOT on --ct-tint,
     at 4.29. The hero fades into the tint behind this very paragraph,
     so its background is somewhere between the two and cannot be
     reasoned about from the section's background-color. gray-600
     clears AA against both ends of the fade. Same for every muted
     run below that shares the hero or a tint band. */
  color: var(--muted-on-tint);
  max-width: 46ch;
}

/* ------------------------------------------------------------
   Direct channels — a ruled list, not a stack of icon chips
   ------------------------------------------------------------
   The old .info-item put every channel behind a bronze rounded
   icon tile, which is the card treatment this pass is removing.
   Here the label carries the meaning and a hairline carries the
   structure, the same way .wkentry__facts works on /work/. */

.ctreach {
  margin: 0;
  padding-block-start: var(--space-lg);
  border-block-start: 2px solid color-mix(in srgb, var(--brand-accent) 55%, transparent);
}

.ctreach__title {
  font-family: var(--font-heading);
  /* A LIST heading, not a page kicker -- it labels the direct-contact
     column, so it stays brand blue rather than gold. Size and tracking
     come from the kicker tokens so it agrees with every other small
     uppercase label on the site. */
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--kicker-track);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 var(--space-md);
}

.ctreach__list { margin: 0; display: grid; }

.ctreach__row {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.ctreach__row:last-child { border-block-end: 0; }

/* Only the rows that are links respond. */
a.ctreach__row { transition: background var(--transition-base, 180ms) ease; }
a.ctreach__row:hover,
a.ctreach__row:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  /* Bleed the tint past the text so the row reads as a target. */
  margin-inline: calc(var(--space-sm) * -1);
  padding-inline: var(--space-sm);
}

.ctreach__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-on-tint);
}
.ctreach__value {
  font-weight: 600;
  color: var(--text-strong);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
a.ctreach__row .ctreach__value { color: var(--brand-primary); }

/* ============================================================
   2. WHAT HAPPENS NEXT
   ============================================================
   Three steps, numbered typographically. Deliberately NOT a
   three-card grid: the whole complaint about this page was flat
   boxes on flat white, and a card row here would reintroduce it
   one section further down. The number is the graphic. */

.ctnext {
  background: var(--ct-dark);
  color: var(--color-gray-300);
  padding-block: var(--section-pad-lg);
}

.ctnext__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h-section);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
  margin: 0;
  text-wrap: balance;
}

.ctnext__lead {
  margin: var(--space-md) 0 0;
  color: color-mix(in srgb, var(--color-white) 76%, transparent);
  line-height: var(--leading-body);
  max-width: 52ch;
}

.ctsteps {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 52rem) {
  .ctsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The progress rail is the SAME gesture as .step on the homepage, and it
   used to be the same twenty lines of CSS written a second time. The
   mechanism now lives once as .rail-step in webify.css; this block is
   only the four values that make it look like Contact's -- a thinner
   hairline, gold on navy instead of grey on white. The look is
   unchanged. Logical props in the primitive mean it still sweeps
   right-to-left in Arabic with no mirror rule. */
.ctstep {
  --rail-size: 2px;
  --rail-track: color-mix(in srgb, var(--brand-accent) 70%, transparent);
  --rail-fill: var(--brand-accent-light);
  --rail-pad: var(--space-md);
}

/* The numeral is the step's whole graphic identity. Tabular so
   01 / 02 / 03 sit on the same rhythm, and Western digits in both
   scripts because that is what the rest of the site uses. */
.ctstep__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--brand-accent-light);
  font-variant-numeric: tabular-nums;
}

.ctstep__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-white);
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}

.ctstep__text {
  margin: var(--space-2xs) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--color-gray-300);
  max-width: 32ch;
}

/* ============================================================
   3. MOTION
   ============================================================
   The hero rises once on load; everything below keeps the site's
   existing .reveal behaviour and adds nothing new. */

@media (prefers-reduced-motion: no-preference) {
  /* Was a local `ct-rise` at 900ms on --ease-out-expo. That keyframe was
     a byte-for-byte duplicate of webify.css's `intro-rise` (opacity 0->1,
     translateY 14px) under a different name, run at a different duration
     and curve -- so this page moved at a visibly different tempo from
     the other seven. It now uses the shared vocabulary and the shared
     --intro-dur / --intro-ease, and the local keyframe is gone. */
  .cthero__copy > *,
  .cthero__reach {
    animation: intro-rise var(--intro-dur) var(--intro-ease) backwards;
  }
  .cthero__title    { animation-delay: 60ms; }
  .cthero__rule     { animation-delay: 130ms; }
  .cthero__lead     { animation-delay: 200ms; }
  /* .cthero__actions is the 4th child of .cthero__copy, so `> *` caught
     it but the delay list did not -- it inherited 0ms and the CTA landed
     BEFORE the headline it belongs to. It sits after the lead it follows
     in the DOM. */
  .cthero__actions  { animation-delay: 270ms; }
  .cthero__reach    { animation-delay: 340ms; }
}

/* ============================================================
   4. THE FORM SECTION — an object on a tinted ground
   ============================================================
   Appended after section 2 in source order but sits between hero
   and "what happens next" on the page. The form is the one thing
   on this page that has earned a surface of its own: it is a
   container for input, not a decorative card. Giving the SECTION
   the tint and leaving the form white is what makes that read as
   deliberate rather than as the old flat white page. */

.ctform {
  background: var(--ct-tint);
  /* No rule on the leading edge: the hero has already faded into
     this exact value, and a hairline there would draw the seam
     the fade exists to remove. */
  border-block-end: 1px solid var(--ct-rule);
}

/* With the channels moved into the hero, the form no longer sits
   in a two-column .contact grid — it is a single measured column. */
.ctform__inner { max-width: 44rem; margin-inline: auto; }

.ctform__head { margin-block-end: var(--space-xl); }

.ctform__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h-sub);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}

.ctform__note {
  margin: var(--space-sm) 0 0;
  color: var(--muted-on-tint);
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
}

/* The optional-field hint, so "no asterisk" is legible as a rule
   rather than as an oversight. */
.field__opt {
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--muted-on-tint);
}

/* ------------------------------------------------------------
   Hero action
   ------------------------------------------------------------
   The lead ends on "you can send us the same brief there", so the
   button that does exactly that belongs directly under it. It also
   closes the dead band that sat below the copy column: the reach
   list is the taller of the two, and without this the hero ended
   on ~140px of nothing on the reading side. */
.cthero__actions { margin: var(--space-xl) 0 0; }

/* ------------------------------------------------------------
   Closing band — white between two navies
   ------------------------------------------------------------
   It used to be .section--inverse, which put navy against the navy
   footer and buried the page's last sentence. On white it reads,
   and it gives the page its navy / white / navy close. */
.ctclose {
  /* The same value as the form band, so the navy sits inside a
     symmetric light frame — and so the page steps tint → navy into
     the footer rather than white → navy, which flickered. */
  background: var(--ct-tint);
}
.ctclose__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--h-section);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.ctclose__text {
  margin: var(--space-md) auto 0;
  max-width: 54ch;
  color: var(--muted-on-tint);
  line-height: var(--leading-body);
}
.ctclose__actions { margin-block-start: var(--space-xl); }

/* One-line privacy notice under the submit button (audit F5). Body text
   colour, not muted: it is small, so it needs the full 4.5:1. */
.form-privacy {
  margin-block-start: var(--space-sm);
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--text-body);
}
.form-privacy a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 0.2em; }