/* ==========================================================================
   Lava New Media, 2026 design: Contact (/contact/), Thank-you (/thank-you/)
   and Privacy (/privacy/)

   design/contact/CONTACT.md, boards 52, 52m and 52t. Contact's sections:
   the hero with the form on the ink, what happens next (charcoal), where we
   are (white), then the footer; the page is the call to action, so it has no
   closing band. Thank-you is the ink hero alone. Privacy is one ink
   section with the label column.
   Tokens, fonts, masthead, buttons, links, eyebrows and the footer are
   lava.css.

   The reveal, eyebrow and held-phrase rules under "shared" repeat
   about.css's (which repeat what-we-do.css's) exactly. They belong in
   lava.css, once, when that is allowed.
   ========================================================================== */

/* --------------------------------------------------------------- shared -- */
/* Reveals, armed only once lava.js adds .js-anim: fade from 0.001 and rise
   16px when in view, once. */
.js-anim .reveal {
  opacity: 0.001; transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* Eyebrows: red rule and label on white; a grey label under the gold rule
   on the charcoal. */
.eyebrow--red::before { background: var(--red); }
.eyebrow--red .eyebrow__label { color: var(--red); }
.ct-next .eyebrow__label { color: var(--gray-3); }

/* Held phrases ({...} in the copy, cs_text()): whole on one line from 768. */
@media (min-width: 768px) { .cs-keep { display: inline-block; } }
.cs-hero__red { color: var(--red); }

/* Read by screen readers, never seen. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The section heading, Raleway 500 34; the label column beside a body. */
.ct-h2 { font: 500 34px/1.25 var(--display); letter-spacing: -0.5px; }
.ct-label { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 767px) {
  .ct-h2 { font-size: 28px; line-height: 1.22; }
  .ct-label { gap: 16px; }
}

/* ----------------------------------------------------------------- hero -- */
/* Ink, the form directly on it: no card, no panel. From 1024 up, two 560
   columns at 1440 (x 84 and x 796, 152 apart, the same proportions below
   1440): the copy with the phone and email blocks under it on the left, the
   form on the right. 768 to 1023: one column, the copy, the form (640 at
   most), then the phone and email. The phone, as the 390 board. */
.ct-hero { background: var(--near-black); color: var(--white); }
.ct-hero__grid { padding-top: 160px; padding-bottom: 120px; }
.ct-hero__eyebrow { font: 600 12px/1.25 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.ct-hero h1 { margin-top: 26px; font: 700 76px/1.02 var(--display); letter-spacing: -2.2px; }
.ct-hero__sub { margin-top: 26px; max-width: 480px; font: 400 19px/1.6 var(--body); color: var(--gray-4); text-wrap: balance; }

/* Rather talk? and Email, on a hairline. */
.ct-hero__reach {
  display: flex; flex-direction: column; gap: 22px;
  margin-top: 62px; padding-top: 32px; border-top: 1px solid var(--hairline-dark);
}
.ct-reach { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ct-reach__label { font: 600 12px/1.5 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gray-3); }
.ct-reach__phone { font: 600 22px/1.4 var(--body); color: var(--white); }
.ct-reach__email { font: 600 18px/1.4 var(--body); color: var(--gold); }
.ct-reach__note { max-width: 420px; font: 400 14px/1.5 var(--body); color: var(--gray-3); }

@media (min-width: 1024px) {
  .ct-hero__grid {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 560fr) minmax(0, 560fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro form" "reach form";
    column-gap: calc(152 / 1272 * 100%);
  }
  .ct-hero__intro { grid-area: intro; }
  .ct-hero__form { grid-area: form; }
  .ct-hero__reach { grid-area: reach; }
}
/* Below 1440 the H1 keeps its 1440 shape: it scales with the column, so
   "Tell us what" and "isn't working." stay the two lines the board has. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .ct-hero h1 { font-size: calc(76 / 1440 * 100vw); letter-spacing: calc(-2.2 / 1440 * 100vw); }
  .ct-hero__sub { font-size: 18px; }
}
@media (max-width: 1023px) {
  .ct-hero__grid { padding-top: 104px; padding-bottom: 104px; }
  .ct-hero h1 { max-width: 9em; font-size: 60px; letter-spacing: -1.8px; }
  .ct-hero__form { max-width: 640px; margin-top: 56px; }
  .ct-hero__reach { max-width: 640px; margin-top: 56px; }
}
@media (max-width: 767px) {
  .ct-hero__grid { padding-top: 64px; padding-bottom: 64px; }
  .ct-hero__eyebrow { font-size: 11px; }
  .ct-hero h1 { margin-top: 18px; font-size: 44px; line-height: 1.04; letter-spacing: -1.4px; }
  .ct-hero__sub { margin-top: 18px; font-size: 16px; }
  .ct-hero__form { margin-top: 42px; }
  .ct-hero__reach { gap: 18px; margin-top: 24px; padding-top: 24px; }
  .ct-reach__label { font-size: 11px; }
  .ct-reach__phone { font-size: 20px; }
  .ct-reach__email { font-size: 17px; }
}

/* ----------------------------------------------------------------- form -- */
/* Four fields, labels above, 22 apart. A field on the ink: a 1px white 18%
   edge, 10px corners, a white 3% fill, white 16px text, 52 tall (the
   message 112). Focus: the edge turns gold and the focus ring applies; no
   glow. Error: the edge turns red and one plain line sits under it in
   white at 14px (red text on the ink is 3.9:1, under the 4.5:1 floor; Ed,
   2026-10-02). The red edge, aria-invalid and aria-describedby carry the state.
   The phone: 48 tall (the message 104), never under 44. */
.ct-form { display: flex; flex-direction: column; gap: 22px; }
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ct-field__label { font: 600 14px/1.4 var(--body); color: var(--white); }
.ct-field__optional { font: 400 12px/1.4 var(--body); color: var(--gray-3); }
.ct-field__hint { font: 400 13px/1.5 var(--body); color: var(--gray-3); }
.ct-field__input {
  display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); color: var(--white);
  font: 400 16px/1.5 var(--body);
  transition: border-color 160ms var(--ease);
  -webkit-appearance: none; appearance: none;
}
.ct-field__input--area { height: 112px; min-height: 112px; padding: 13px 16px; resize: vertical; }
.ct-field__input:focus { border-color: var(--gold); }
.ct-field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ct-field.is-invalid .ct-field__input { border-color: var(--red); }
.ct-field__error { font: 400 14px/1.45 var(--body); color: var(--white); }
.ct-field__error[hidden] { display: none; }
/* Autofill keeps the field's own colours instead of the browser's yellow. */
.ct-field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  box-shadow: 0 0 0 100px #121213 inset;
  caret-color: var(--white);
}

/* The button and the promise beside it. The button never wraps or shrinks. */
.ct-form__send { display: flex; align-items: center; gap: 20px; margin-top: 6px; }
.ct-form__button { white-space: nowrap; flex-shrink: 0; }
.ct-form__button[disabled] { cursor: progress; background: var(--red-hover); transform: none; }
.ct-form__promise { font: 400 14px/1.45 var(--body); color: var(--gray-4); }

/* The failure line: the address is a mailto link, gold like every link on
   the ink. */
.ct-form__fail { font: 400 14px/1.5 var(--body); color: var(--white); }
.ct-form__fail[hidden] { display: none; }
.ct-form__mail { color: var(--gold); font-weight: 600; }

/* Under a hairline, the two small lines. */
.ct-form__small {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--hairline-dark);
  font: 400 13px/1.5 var(--body); color: var(--gray-3);
}
.ct-form__privacy { font-size: 13px; }

/* The honeypot: off the page, out of the tab order, hidden from assistive
   tech. Not display: none, which some bots skip. */
.ct-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 767px) {
  .ct-form { gap: 18px; }
  .ct-field__input { height: 48px; }
  .ct-field__input--area { height: 104px; min-height: 104px; }
  /* As the 390 board: the button full width, the promise centred under it. */
  .ct-form__send { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 4px; }
  .ct-form__promise { text-align: center; }
  .ct-form__small { padding-top: 14px; }
}

/* ---------------------------------------------------- what happens next -- */
/* Charcoal. The label column (440 at 1440) with the Ward line under it as
   the trust signal; the three steps on #242426 hairlines beside it, each
   with its gold 44px numeral. The phone: the label, the steps, the line. */
.ct-next { background: var(--charcoal); color: var(--white); padding: 120px 0 130px; }
.ct-next__grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 440fr) minmax(0, 768fr);
  grid-template-rows: auto 1fr;
  column-gap: 64px;
}
.ct-next .ct-label { grid-column: 1; grid-row: 1; }
.ct-steps { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hairline-dark); }
.ct-quote { grid-column: 1; grid-row: 2; margin-top: 46px; display: flex; flex-direction: column; gap: 14px; }

.ct-step { display: flex; align-items: flex-start; gap: 24px; padding: 28px 0; border-top: 1px solid var(--hairline-dark); }
.ct-step__num { flex: 0 0 64px; font: 600 44px/1 var(--display); letter-spacing: -1px; color: var(--gold); }
.ct-step__text { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.ct-step__title { font: 600 22px/1.25 var(--display); color: var(--white); }
.ct-step__body { font: 400 16px/1.6 var(--body); color: var(--gray-4); text-wrap: balance; }

.ct-quote__text { font: 500 26px/1.25 var(--display); color: var(--white); }
.ct-quote__text p { text-wrap: balance; }
.ct-quote__who { font: 400 14px/1.5 var(--body); color: var(--gray-4); }

@media (max-width: 1023px) {
  .ct-next { padding: 104px 0; }
  .ct-next__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ct-next .ct-label, .ct-steps, .ct-quote { grid-column: 1; grid-row: auto; }
  .ct-label { max-width: 34em; }
  .ct-steps { margin-top: 40px; max-width: 46em; }
  .ct-quote { margin-top: 48px; max-width: 34em; }
}
@media (max-width: 767px) {
  .ct-next { padding: 64px 0 56px; }
  .ct-steps { margin-top: 24px; }
  .ct-step { gap: 18px; padding: 20px 0; }
  .ct-step__num { flex-basis: 44px; font-size: 32px; letter-spacing: -0.5px; }
  .ct-step__text { gap: 6px; padding-top: 4px; }
  .ct-step__title { font-size: 20px; }
  .ct-step__body { font-size: 15px; line-height: 1.55; }
  .ct-quote { margin-top: 28px; gap: 10px; }
  .ct-quote__text { font-size: 22px; }
  .ct-quote__who { font-size: 13px; }
}

/* --------------------------------------------------------- where we are -- */
/* White. The red rule, eyebrow and heading in the label column, then
   OFFICE, HOURS and ELSEWHERE, 64 apart. Below 1280 the label takes its
   own row over the three; the phone: office and hours side by side,
   elsewhere under them. */
.ct-where { padding: 100px 0 120px; }
.ct-where__grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 440fr) repeat(3, minmax(0, 213fr));
  column-gap: 64px;
}
.ct-where .ct-h2 { color: var(--ink); }
.ct-where__col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 6px; }
.ct-where__label { font: 600 12px/1.5 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gray-2); }
.ct-where__text { font: 400 16px/1.6 var(--body); font-style: normal; color: var(--gray-1); }
.ct-where__link { font-size: 16px; }
.ct-where__note { font: 400 14px/1.5 var(--body); color: var(--gray-2); }

@media (max-width: 1279px) {
  .ct-where__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; column-gap: 48px; }
  .ct-where .ct-label { grid-column: 1 / -1; }
  .ct-where__col { padding-top: 0; }
}
@media (max-width: 1023px) { .ct-where { padding: 96px 0 104px; } }
@media (max-width: 767px) {
  .ct-where { padding: 64px 0 56px; }
  .ct-where__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; column-gap: 20px; }
  .ct-where__col--else { grid-column: 1 / -1; }
  .ct-where__label { font-size: 11px; }
  .ct-where__text { font-size: 15px; line-height: 1.55; }
  .ct-where__link { font-size: 15px; }
}

/* ------------------------------------------------------------ thank-you -- */
/* The About hero (about.css: .ab-hero, the partners from
   includes/partner-faces.php) with this page's words; only the two gold
   links are this page's, under the paragraph from 1280 up (the row is
   placed absolutely there) and under the partners below. */
.ct-thanks__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; font-size: 16px; }
@media (max-width: 767px) {
  .ct-thanks__links { flex-direction: column; align-items: flex-start; margin-top: 26px; font-size: 15px; }
}

/* -------------------------------------------------------------- privacy -- */
/* A plain text page on the ink, as Contact and Thank-you: the same hero
   padding and H1 (Raleway 700 76, scaling 1024-1439, 60 under 1024, 44 on
   the phone), the date where their subhead sits, then the six parts in the
   label column's neighbour at a reading measure. Headings white Raleway 600
   22 (the step titles'), paragraphs Inter 17/1.7 in --gray-4 (8.4:1 on the
   near-black), the address and number gold 600 like the form's mail link,
   underlined red on hover like every link on dark. */
.ct-privacy { background: var(--near-black); color: var(--white); padding: 160px 0 140px; }
.ct-privacy__grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 440fr) minmax(0, 768fr);
  column-gap: 64px;
}
.ct-privacy__label { display: flex; flex-direction: column; }
.ct-privacy h1 { font: 700 76px/1.02 var(--display); letter-spacing: -2.2px; color: var(--white); }
.ct-privacy__updated { margin-top: 26px; font: 400 15px/1.5 var(--body); color: var(--gray-3); }
.ct-privacy__body { display: flex; flex-direction: column; gap: 36px; max-width: 40em; padding-top: 14px; }
.ct-privacy__part { display: flex; flex-direction: column; gap: 10px; }
.ct-privacy h2 { font: 600 22px/1.3 var(--display); color: var(--white); }
.ct-privacy p { font: 400 17px/1.7 var(--body); color: var(--gray-4); }
.ct-privacy__a { color: var(--gold); font-weight: 600; }

@media (min-width: 1024px) and (max-width: 1439px) {
  .ct-privacy h1 { font-size: calc(76 / 1440 * 100vw); letter-spacing: calc(-2.2 / 1440 * 100vw); }
}
@media (max-width: 1023px) {
  .ct-privacy { padding: 104px 0 112px; }
  .ct-privacy__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .ct-privacy h1 { font-size: 60px; letter-spacing: -1.8px; }
  .ct-privacy__body { padding-top: 0; }
}
@media (max-width: 767px) {
  .ct-privacy { padding: 64px 0 64px; }
  .ct-privacy__grid { row-gap: 32px; }
  .ct-privacy h1 { font-size: 44px; line-height: 1.04; letter-spacing: -1.4px; }
  .ct-privacy__updated { margin-top: 18px; font-size: 14px; }
  .ct-privacy__body { gap: 28px; }
  .ct-privacy__part { gap: 8px; }
  .ct-privacy h2 { font-size: 20px; }
  .ct-privacy p { font-size: 16px; line-height: 1.65; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .ct-field__input { transition: none; }
}