/* Contact: "Speak to a consultant", the section directly above the footer on every page
   (partials/shared/contact.html, id="talk": every "Speak to a consultant" link lands here).
   Always dark, whatever the page around it.

   Layout: copy, form, then the dotted world map. From 1000px the copy sits over the map in the left
   column (the map bleeding out to the window's left edge) and the form fills the right column.
   Form panel: a hairline tile with a soft blue bloom that follows a mouse pointer, and a lit edge while
   someone is filling it in; each field lights its own underline (the message its own hairline box) on
   focus, and after a failed send the fields still needed turn a calm coral (:user-invalid, no JS).
   Map: London glows; arcs draw outwards, the nodes appear, one pulse travels each arc and London pings
   twice. contact.js runs it once when the map comes into view (all done within five seconds) and again
   on mouse hover. Without JS, or with reduced motion, the map is drawn complete and still.
   Class names are .contact__* and .c-* so they cannot meet the landing page's own talk section. */

.contact {
  --c-acc: #8fb4ff;
  --c-ease: cubic-bezier(.22, .61, .36, 1);
  --c-text: rgb(255 255 255 / .72);
  --c-soft: rgb(255 255 255 / .6);
  --c-rule: rgb(255 255 255 / .34); /* field underlines: 3:1 against the panel */
  --c-warn: #ff9b8a; /* a field still needed: 9:1 against the void */
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  /* the footer follows on the same dark ground, so the foot of the section is shorter than its head */
  padding-block: var(--bay) clamp(1.875rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line-dark);
  background: var(--void);
  color: var(--paper);
  /* native parts (checkbox, autofill, resize grip, scrollbars) drawn for a dark surface */
  color-scheme: dark;
  /* a "Speak to a consultant" jump skips most of the top padding, so the whole form is in view: with
     shell.css's scroll-padding-top (the header plus .5rem) the eyebrow lands 1.5rem under the header */
  scroll-margin-top: calc(1.5rem - var(--bay));
}
.contact :focus-visible { outline-color: var(--c-acc); }
/* arrival: a faint wash of brand blue behind the heading marks where the section starts */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 40% at 15% 0%, rgb(0 98 254 / .09), transparent 70%);
}

/* ---------- Layout ---------- */
.contact__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "form" "reach";
  gap: var(--gap-col);
}
.contact__copy { grid-area: copy; }
.contact__form { grid-area: form; }
.contact__reach { grid-area: reach; }

@media (width >= 1000px) {
  .contact__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "copy form" "reach form";
    row-gap: clamp(2rem, 3.5vw, 3rem);
  }
  .contact__reach { align-self: end; }
  /* when the left column runs taller, the message box takes up the difference */
  .contact__form { display: flex; flex-direction: column; }
  .contact__field.contact__field--msg { flex: 1 1 auto; display: flex; flex-direction: column; }
  .contact__field--msg textarea { flex: 1 1 auto; }
}

/* ---------- Copy ---------- */
.contact__eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .66);
}
/* the dot: one person, the brand's motif */
.contact__eyebrow::before {
  content: "";
  flex: none;
  inline-size: .4375rem;
  block-size: .4375rem;
  border-radius: 50%;
  background: var(--c-acc);
}
.contact__h {
  margin-top: 1.25rem;
  max-width: 12ch;
  font-size: var(--step-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--paper);
  text-wrap: balance;
}
.contact__body {
  margin-top: 1.5rem;
  max-width: 42ch;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--c-text);
  text-wrap: pretty;
}
/* what happens next: three numbered steps, set like an engagement letter (mono numerals, sans text) */
.contact__steps {
  display: grid;
  gap: .375rem;
  max-width: 36rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: c-step;
  font-size: .9375rem;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--c-text);
}
.contact__steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  counter-increment: c-step;
}
.contact__steps li::before {
  content: counter(c-step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--c-acc);
}

/* ---------- Form panel ---------- */
.contact__form {
  --gx: 88%; /* bloom centre; contact.js moves it with a mouse pointer */
  --gy: 0%;
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(1.25rem, 2.6vw, 2.5rem);
  border: 1px solid var(--line-dark);
  background: rgb(255 255 255 / .022);
}
.contact__form::before,
.contact__form::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
}
.contact__form::before {
  z-index: -1;
  background:
    radial-gradient(60% 70% at var(--gx) var(--gy), rgb(0 98 254 / .16), transparent 72%),
    rgb(255 255 255 / .018);
  transition: opacity .4s var(--c-ease);
}
.contact__form::after {
  box-shadow: inset 0 0 0 1px rgb(143 180 255 / .55);
  transition: opacity .3s var(--c-ease);
}
.contact__form:focus-within::before,
.contact__form:focus-within::after { opacity: 1; }
@media (hover: hover) {
  .contact__form:hover::before { opacity: .55; }
}

/* honeypot: off screen, out of the tab order */
.contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__req {
  margin-bottom: 1.75rem;
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute-dark);
}

.contact__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1.5rem;
  /* if a label wraps in a narrow column, the two inputs still line up */
  align-items: end;
}
@media (width >= 560px) {
  .contact__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.contact__field {
  display: grid;
  gap: .5rem;
  margin-bottom: 1.375rem;
}
.contact__field label {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .74);
  transition: color .18s;
}
.contact__field :is(input, textarea) {
  inline-size: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: .625rem 0;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
  letter-spacing: -.011em;
  transition: border-color .18s, box-shadow .18s;
}
/* the message is a hairline box, so it reads as a field however tall the column stretches it */
.contact__field textarea {
  min-height: 6.5rem;
  padding: .75rem .875rem;
  border: 1px solid var(--c-rule);
  border-radius: 4px;
  background: rgb(255 255 255 / .02);
  resize: vertical;
}
@media (hover: hover) {
  .contact__field input:hover { border-bottom-color: rgb(255 255 255 / .5); }
  .contact__field textarea:hover { border-color: rgb(255 255 255 / .5); }
}
/* a field still needed after a failed send (or left empty): coral underline or box, coral label */
.contact__field input:user-invalid {
  border-bottom-color: var(--c-warn);
  box-shadow: 0 1px 0 var(--c-warn);
}
.contact__field textarea:user-invalid { border-color: var(--c-warn); }
.contact__field:has(:user-invalid) label { color: #ffb4a8; }
/* focus: the field's own underline lights up (no box round an underline-only field); the message box
   lights all four sides; the label brightens */
.contact__field :is(input, textarea):is(:focus, :focus-visible) { outline: none; }
.contact__field input:is(:focus, :focus-visible) {
  border-bottom-color: var(--c-acc);
  box-shadow: 0 1px 0 var(--c-acc);
}
.contact__field textarea:is(:focus, :focus-visible) {
  border-color: var(--c-acc);
  box-shadow: 0 0 0 1px var(--c-acc);
}
.contact__field:focus-within label { color: var(--paper); }
.contact__field:focus-within:has(:user-invalid) label { color: #ffb4a8; }
/* Windows high contrast: box shadows are dropped, so focus gets a system outline */
@media (forced-colors: active) {
  .contact__field :is(input, textarea):focus { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* browser autofill: keep the field transparent with paper-coloured text, not a pale blue block */
.contact__field :is(input, textarea):is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--paper);
  caret-color: var(--paper);
  transition: border-color .18s, background-color 600000s 0s, color 600000s 0s;
}

.contact__hint {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--mute-dark);
}

/* consent: the checkbox sits in a 44px tap area (a second label for the same control) */
.contact__consent {
  display: flex;
  align-items: flex-start;
  gap: .375rem;
  margin-block: 1.375rem 1.75rem;
}
.contact__tick {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin: -.625rem -.25rem -.625rem -.625rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* a hairline box to match the fields; ticked, it fills with the brand blue */
.contact__tick input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  border: 1px solid rgb(255 255 255 / .42);
  border-radius: 3px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.contact__tick input::before {
  content: "";
  inline-size: .75rem;
  block-size: .75rem;
  background: currentColor;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform .16s var(--c-ease);
}
.contact__tick input:user-invalid { border-color: var(--c-warn); }
.contact__tick input:checked { border-color: var(--blue); background: var(--blue); }
.contact__tick input:checked::before { transform: scale(1); }
@media (hover: hover) {
  .contact__consent:hover .contact__tick input:not(:checked) { border-color: rgb(255 255 255 / .7); }
}
.contact__tick input:focus-visible { outline: 2px solid var(--c-acc); outline-offset: 3px; }
/* Windows high contrast: hand the box back to the system */
@media (forced-colors: active) {
  .contact__tick input { -webkit-appearance: auto; appearance: auto; }
  .contact__tick input::before { content: none; }
}
.contact__consent p {
  max-width: 46ch;
  padding-top: .0625rem;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--c-soft);
}
.contact__consent label { cursor: pointer; }
.contact__consent a {
  color: var(--paper);
  text-decoration: underline 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color .18s;
}
.contact__consent a:hover { text-decoration-thickness: 2px; }

.contact__send {
  align-self: flex-start;
  min-height: 2.75rem;
}
@media (width < 620px) {
  .contact__send {
    width: 100%;
    min-height: 3rem;
    justify-content: space-between;
    padding-left: 1.25rem;
  }
}

/* ---------- Map ---------- */
.contact__reach {
  margin: 0;
  min-width: 0;
}
/* a small label over the map, set like the eyebrow without its dot (13 Oct 2026: "Founded in the UK" > "Location") */
.contact__loc {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .66);
}
.contact__frame { position: relative; }
.contact__canvas {
  --cw: 100%;
  position: relative;
  width: var(--cw);
  aspect-ratio: 1154 / 530;
}
.contact__map {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* narrow screens: a larger map, cropped round London, edges faded */
@media (width < 600px) {
  .contact__frame {
    overflow: hidden;
    margin-inline: calc(var(--gut) * -1);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .contact__canvas {
    --cw: max(100%, 35rem);
    margin-left: clamp(calc(100% - var(--cw)), calc(50% - var(--hx) * var(--cw)), 0px);
  }
}

/* two columns: the map bleeds out to the left edge of the window at every width, its western edge fading
   out; it stops at its own column, so it never runs under the form */
@media (width >= 1000px) {
  .contact__frame {
    margin-left: calc(-1 * (var(--gut) + max(0px, (100vw - 1440px) / 2)));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%);
    mask-image: linear-gradient(90deg, transparent, #000 9%);
  }
}
/* smaller two-column widths: heavier dots and arcs so the continents still read */
@media (1000px <= width < 1280px) {
  .c-land circle { r: 3.6; }
  .c-arc { stroke-width: 3; }
}

.contact__pin {
  position: absolute;
  left: calc(var(--hx) * 100%);
  /* 10% of the map's height (53 of its 530 units) above London: clear of the highest arc and its pulse */
  top: calc(var(--hy) * 100% - 10%);
  transform: translate(-50%, -100%);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .82);
  white-space: nowrap;
  pointer-events: none;
}

.contact__cap {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.55;
  color: rgb(255 255 255 / .66);
  text-wrap: pretty;
}

.c-land circle { fill: #fff; opacity: .19; }
.c-glow { opacity: 1; }
.c-arc {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: .7;
}
.c-node { fill: var(--c-acc); opacity: 1; }
.c-pulse { fill: #fff; }
.c-home { fill: #fff; }
.c-ping {
  fill: none;
  stroke: var(--c-acc);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* contact.js arms the map (motion allowed) so it can draw itself when it comes into view */
.contact__reach.is-armed .c-arc { stroke-dashoffset: 1; }
.contact__reach.is-armed .c-node,
.contact__reach.is-armed .c-glow { opacity: 0; }
.contact__reach.is-armed .c-glow { transition: opacity 1.2s var(--c-ease); }
.contact__reach.is-armed .c-node { transition: opacity .6s var(--c-ease) calc(.9s + var(--i) * 90ms); }

.contact__reach.is-armed.is-on .c-arc {
  animation: c-draw 1.4s var(--c-ease) calc(var(--i) * 90ms) forwards;
}
.contact__reach.is-armed.is-on .c-node,
.contact__reach.is-armed.is-on .c-glow { opacity: 1; }
.contact__reach.is-ping .c-ping { animation: c-ping 2.2s ease-out .15s 2; }

@keyframes c-draw { to { stroke-dashoffset: 0; } }
@keyframes c-ping {
  0% { transform: scale(.2); opacity: .8; }
  70% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .contact__reach .c-arc { stroke-dashoffset: 0; animation: none; }
  .contact__reach .c-node,
  .contact__reach .c-glow { opacity: 1; transition: none; }
  .contact__reach .c-ping { animation: none; opacity: 0; }
  .contact__form::before,
  .contact__form::after,
  .contact__field :is(input, textarea),
  .contact__field label,
  .contact__tick input,
  .contact__tick input::before { transition: none; }
}

@media print {
  .contact { display: none; }
}

/* Enquiry type (15 Oct 2026): a dropdown styled like the other underline fields. */
.contact__field select {
  inline-size: 100%; min-height: 2.75rem; margin: 0; padding: .625rem 1.75rem .625rem 0;
  border: 0; border-bottom: 1px solid var(--c-rule); border-radius: 0; background: transparent;
  color: var(--paper); font: inherit; font-size: 1rem; letter-spacing: -.011em; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgb(255 255 255 / .7) 50%), linear-gradient(135deg, rgb(255 255 255 / .7) 50%, transparent 50%);
  background-position: calc(100% - 10px) 52%, calc(100% - 5px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: border-color .18s, box-shadow .18s;
}
.contact__field select:invalid { color: rgb(255 255 255 / .5); }
.contact__field select option { color: var(--ink, #0e1116); background: #fff; }
@media (hover: hover) { .contact__field select:hover { border-bottom-color: rgb(255 255 255 / .5); } }
.contact__field select:is(:focus, :focus-visible) { outline: none; border-bottom-color: var(--c-acc); box-shadow: 0 1px 0 var(--c-acc); }
.contact__field select:user-invalid { border-bottom-color: var(--c-warn); box-shadow: 0 1px 0 var(--c-warn); }
@media (forced-colors: active) { .contact__field select:focus { outline: 2px solid Highlight; outline-offset: 2px; } }

/* /contact/: the block is the page's first section, so it starts where every other page's content does */
.contact-page > .contact { padding-top: clamp(2rem, 3.6vw, 3.25rem); border-top: 0; }