/* contact.css - the Contact page.

   One column, read downstream. It was a two column split with the heading on
   the left and the form stranded on the right, which is a layout for a page
   with something to say beside the form; this page is a centred heading and
   eight fields, so the split was holding two half empty columns apart.

   Every control is a box. The old fields were underlines, which look clean on a
   mockup and leave a reader guessing where the target is, and the operation
   list was a row of custom chips with hand drawn checkboxes. Boxes, one width,
   one height, one border.

   Scoped to body.pg-ct. No em dashes and no middle dots in rendered text. */

body.pg-ct{
  --cpad:clamp(18px,3.4vw,58px);
  --cbar:clamp(58px,5vw,72px);
  --cline:rgba(255,255,255,.26);
  --cease:cubic-bezier(.16,.84,.3,1);
  background:#000;color:#fff}
body.pg-ct main{display:block;background:#000}
body.pg-ct section{background:#000}

.cf{padding:calc(var(--cbar) + clamp(40px,7vh,96px)) var(--cpad) clamp(60px,9vh,130px)}
.cf__in{width:100%;max-width:760px;margin-inline:auto}

/* The heading is centred over the column and stands alone. The back link and
   the standfirst under it are gone: the bar above already returns to the index,
   and a page called Contact carrying a form does not need a line explaining
   that it is for getting in touch. */
.cf__title{margin:0;text-align:center;font-family:var(--angular);font-weight:600;
  font-size:clamp(2.2rem,5.6vw,5rem);line-height:.98;letter-spacing:-.024em;color:#fff}

/* ---------- the form ---------- */
.cf__form{margin-top:clamp(40px,6vh,80px);display:flex;flex-direction:column;
  gap:clamp(20px,2.6vh,30px)}
.cf__row{display:flex;flex-direction:column;gap:10px}
.cf__row > label,.cf__legend{font-family:var(--angular);font-weight:600;
  font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}

/* one box, one height, one border, on every control including the select and
   the textarea. 16px on the field is not a style choice: below it iOS zooms the
   page in on focus and leaves the reader on a viewport they did not ask for. */
.cf__row > input,
.cf__row > select,
.cf__row > textarea{
  font-family:var(--angular);font-weight:500;font-size:16px;line-height:1.4;
  color:#fff;background:#0C0D0F;border:1px solid var(--cline);border-radius:0;
  padding:14px 16px;width:100%;min-height:52px;appearance:none;
  transition:border-color .25s var(--cease),background .25s var(--cease)}
.cf__row > textarea{resize:vertical;min-height:140px}
.cf__row > input:hover,.cf__row > select:hover,.cf__row > textarea:hover{border-color:rgba(255,255,255,.5)}
.cf__row > input:focus,.cf__row > select:focus,.cf__row > textarea:focus{
  outline:0;border-color:#fff;background:#111316}
.cf__row > input::placeholder,.cf__row > textarea::placeholder{color:rgba(255,255,255,.42)}
/* the native menu paints its list in the page's colours, and white on white is
   unreadable, so the options get the ground explicitly */
.cf__row > select option{background:#0C0D0F;color:#fff}

/* ---------- the operation group ----------
   A bordered group of plain rows rather than a row of chips. The control is the
   browser's own checkbox, squared off: a hand drawn one has to reimplement
   focus, indeterminate state and the forced colours mode, and it was getting
   none of that right. */
.cf__group{border:1px solid var(--cline);background:#0C0D0F;padding:6px 0}
.cf__opt{display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:12px 16px;min-height:48px;
  transition:background .2s var(--cease)}
.cf__opt:hover{background:rgba(255,255,255,.05)}
.cf__opt input{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:18px;height:18px;min-height:18px;min-width:18px;padding:0;border:1px solid rgba(255,255,255,.55);background:transparent;
  display:grid;place-items:center;
  transition:background .18s linear,border-color .18s linear}
.cf__opt input::after{content:"";width:9px;height:9px;background:#000;transform:scale(0);
  transition:transform .18s var(--cease)}
.cf__opt input:checked{background:#fff;border-color:#fff}
.cf__opt input:checked::after{transform:scale(1)}
.cf__opt input:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cf__opt span{font-family:var(--angular);font-weight:500;font-size:1rem;color:#fff}

/* ---------- send ----------
   Centred under the column, with the status line centred below it rather than
   set beside it: a note that appears next to the button shifts the button off
   centre the moment it has something to say. */
.cf__foot{margin-top:clamp(10px,1.6vh,18px);display:flex;flex-direction:column;
  align-items:center;gap:clamp(14px,2vh,20px)}
.cf__send{font-family:var(--angular);font-weight:600;
  font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;
  padding:0 34px;min-height:54px;border:1px solid #fff;background:#fff;color:#000;
  cursor:pointer;transition:background .28s var(--cease),color .28s var(--cease)}
.cf__send:hover{background:transparent;color:#fff}
.cf__note{margin:0;text-align:center;font-family:var(--angular);font-weight:500;
  font-size:1rem;line-height:1.4;color:#fff;min-height:1.4em}

@media (max-width:640px){
  .cf__foot{align-items:stretch}
  .cf__send{width:100%}
}