/* PAGE CSS: contact
   Enqueued by functions.php when the slug matches.
   Lifted verbatim from the approved static build. */


/* ==========================================================
   TYPE SCALE, matched to the homepage
     18px    running body copy (global default)
     16.5px  copy inside cards and panels
     16px    smallest tier
   ==========================================================
   PAGE: /contact/
   Opens on cream, so it uses body.header--light.

   Devices used nowhere else on the site: a compact cream
   masthead with no image, a sticky detail rail beside the
   form, a six-cell terms ledger on navy, and the engagement
   notice as a standing panel.

   FIRST FORM ON THE SITE. Field, label, select and checkbox
   styling all live here rather than in global, because no
   other page has a form yet. Promote to global when the
   Opinion of Value questionnaire is built.
   ========================================================== */

/* ---------- Compact cream masthead ---------- */
.chead{padding-block:calc(var(--barh) + clamp(44px,5vw,76px)) clamp(30px,3.4vw,48px);}
.chead h1{font-size:clamp(38px,5vw,66px);line-height:1.05;max-width:15ch;margin:0 0 22px;}
.chead__lede{font-size:clamp(18px,1.85vw,22px);line-height:1.58;max-width:58ch;
  color:rgba(23,55,70,.86);margin:0;}
.chead__rule{width:56px;height:1px;background:var(--gold);margin-top:clamp(28px,3.2vw,40px);}

/* ---------- Rail beside the form ---------- */
.reach{padding-top:0;}
.reach__grid{display:grid;grid-template-columns:38fr 62fr;gap:clamp(32px,5vw,88px);
  /* stretch, NOT start. a sticky element cannot travel inside a box that is
     only as tall as itself, so with align-items:start the rail behaved as
     static and scrolled away with the page. the cell has to span the row
     height to give the rail somewhere to stick. */
  align-items:stretch;}
.rail{position:sticky;top:calc(var(--barh) + 24px);}
.rail__row{padding-block:20px;border-top:1px solid var(--stone);}
.rail__row:last-of-type{border-bottom:1px solid var(--stone);}
.rail__k{font-family:var(--display);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:9px;}
.rail__v{font-size:16.5px;line-height:1.6;margin:0;color:rgba(23,55,70,.9);}
.rail__v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--stone);}
.rail__v a:hover,.rail__v a:focus-visible{border-bottom-color:var(--gold);}
.rail__next{margin-top:clamp(28px,3.2vw,40px);}
.rail__next h2{font-size:20px;margin-bottom:16px;}
.rail__next ol{margin:0;padding:0;list-style:none;counter-reset:s;}
.rail__next li{counter-increment:s;position:relative;padding-left:30px;margin-bottom:13px;
  font-size:16px;line-height:1.58;color:rgba(23,55,70,.84);}
.rail__next li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--display);font-size:10.5px;letter-spacing:.16em;color:var(--gold);}

/* ---------- Form ----------
   The form sits on a white card so it reads as the thing to act on, rather
   than as more page. The rail beside it stays on cream, which is what makes
   the card register at all.
   Two consequences follow from the change of ground:
   the fields were transparent, which on white left them invisible except for
   their hairline, so they now carry a faint cream fill; and the focus state
   was a white wash, which on a white card did nothing, so focus now darkens
   the field instead. */
.form__card{background:#FFFFFF;border:1px solid var(--stone);
  padding:clamp(24px,3vw,44px);
  box-shadow:0 18px 50px rgba(16,41,53,.06);}

.form__intro{font-size:16.5px;line-height:1.66;color:rgba(23,55,70,.84);
  max-width:58ch;margin:0 0 clamp(26px,3vw,38px);}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,28px);}
.f--full{grid-column:1 / -1;}
.f label{font-family:var(--display);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);display:block;margin-bottom:9px;}
.f label .req{color:var(--gold);}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:16.5px;line-height:1.5;color:var(--ink);
  background:#FAF8F4;border:1px solid var(--stone);border-radius:0;
  padding:13px 15px;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none;}
.f textarea{min-height:172px;resize:vertical;}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),
  linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--ink);background:#F2EEE6;}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;}
.f--honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.consent{display:flex;gap:13px;align-items:flex-start;margin-top:4px;}
.consent input{width:17px;height:17px;flex:0 0 auto;margin-top:3px;border:1px solid var(--slate);
  /* padding:0 matters. the box inherits .f input{padding:13px 15px}, and with
     box-sizing:border-box a box cannot be smaller than its own padding plus
     border, so the checkbox was pinned at 32x28 and ignored every width and
     height set on it, here and in the touch-target rules. */
  padding:0;
  background:transparent;cursor:pointer;}
.consent input:checked{background:var(--ink);border-color:var(--ink);
  background-image:linear-gradient(45deg,transparent 46%,var(--cream) 46%,var(--cream) 54%,transparent 54%),
  linear-gradient(-45deg,transparent 46%,var(--cream) 46%,var(--cream) 54%,transparent 54%);}
.consent label{font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;
  color:rgba(23,55,70,.84);line-height:1.55;margin:0;cursor:pointer;}
.form__send{margin-top:clamp(24px,2.8vw,34px);}

/* ---------- Terms ledger on navy ---------- */
.terms{background:var(--ink-deep);color:var(--cream);}
.terms h2{color:var(--cream);}
.terms > .wrap > p{color:rgba(244,240,232,.8);max-width:none;}
.terms__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(38px,4.4vw,58px);background:rgba(244,240,232,.24);
  border:1px solid rgba(244,240,232,.24);}
.terms__cell{background:var(--ink-deep);padding:clamp(26px,3vw,40px);}
.terms__cell h3{font-size:19px;line-height:1.24;color:var(--cream);margin-bottom:11px;}
.terms__cell p{font-size:16px;line-height:1.62;color:rgba(244,240,232,.78);margin:0;}

/* ---------- Engagement notice ----------
   padding-top:0 was wrong here. it is right on sections that continue a
   cream run from the section above, but this one follows the NAVY terms
   band, so the panel sat hard against the colour change with 0 above it
   and 158 below. let .band supply its normal padding on both sides. */
.notice{}
.notice__in{border:1px solid var(--stone);padding:clamp(30px,3.6vw,56px);
  text-align:center;}
/* no measures here: the panel content runs the full width of the box and is
   centred within it. the eyebrow needs the width reset as well as the
   alignment, because it is a <p> and inherits p{max-width:64ch}, which would
   otherwise centre it inside a 368px box rather than inside the panel. */
.notice__in .eyebrow{display:block;text-align:center;max-width:none;width:100%;
  text-indent:.28em;}
.notice__in h2{font-size:clamp(23px,2.6vw,34px);margin-bottom:18px;max-width:none;
  margin-inline:auto;}
.notice__in p{font-size:16.5px;line-height:1.68;color:rgba(23,55,70,.84);max-width:none;}
.notice__in p:last-child{margin-bottom:0;}

/* Touch targets on this page specifically. The global rules cannot reach the
   consent box, because this page's stylesheet loads after global and its own
   .consent input rule wins on source order. Same intent: the box was 32x28,
   which is under the ~44px a finger reliably hits. The label is already large
   and clickable via for=, so this is the box catching up with it. */
@media (hover:none){
  .consent input{width:24px;height:24px;margin-top:0;}
  .consent{gap:15px;align-items:center;}
  .consent label{padding-block:6px;}
}

@media (max-width:1080px){
  .reach__grid{grid-template-columns:1fr;}
  .rail{position:static;}
  /* the card gets a little breathing room from the rail once they stack */
  .form__card{margin-top:clamp(24px,3vw,40px);}
  .terms__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:780px){
  .fgrid,.terms__grid{grid-template-columns:1fr;}
  .form__send .btn{width:100%;justify-content:center;}
}