/* Contact (contact.html), after Spyker's contact page (spykercars.com/contact),
   measured at 1440px, with every size about a quarter larger as Hodge asked:
   titles 20px → 26px, labels and fields 14px → 17px, small print 12px → 15px.
   Spyker's two equal columns, underlined fields with labels inside them, the
   long send button, the ruled "Press" block (here: discovery calls), and the
   four-photo "Follow the journey" row. Fonts come from type-system.css; the
   nav, opening and footer come from the shared files. */

.contact-page {
  --sp-ink: #17131c;
  --sp-muted: #5d5763;
  --sp-rule: rgba(23, 19, 28, .22);
  --sp-purple: #5f3c91;
  --sp-violet: #4c3074;
  --sp-gutter: clamp(1.25rem, 2.8vw, 2.5rem);
}

/* ——— Details and form ——— */
.sp-contact {
  display: grid;
  gap: 4rem;
  padding: clamp(5rem, 8.9vw, 8rem) var(--sp-gutter) clamp(3rem, 5vw, 5rem);
  background: #fff;
  color: var(--sp-ink);
}
.sp-contact__title {
  margin: 0;
  font-size: clamp(1.4rem, 1.8vw, 1.625rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.sp-contact address { display: grid; gap: 1.5rem; margin-top: 2.6rem; font-style: normal; font-size: .9375rem; line-height: 1.6; }
.sp-contact address p { margin: 0; }
.sp-contact a { color: inherit; text-decoration: none; }
.sp-contact address a:hover,
.sp-contact__extra a:hover { text-decoration: underline; text-underline-offset: .2em; }

.sp-form { display: grid; gap: 0; margin-top: 2.4rem; }
.sp-field { position: relative; margin: 0 0 2.3rem; }
.sp-field input,
.sp-field select,
.sp-field textarea {
  display: block;
  width: 100%;
  padding: 1.05rem 0 .8rem;
  border: 0;
  border-bottom: 1px solid var(--sp-rule);
  border-radius: 0;
  background: transparent;
  color: var(--sp-ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.6;
  appearance: none;
  transition: border-color .25s ease;
}
.sp-field textarea { min-height: 7rem; resize: vertical; }
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus { outline: none; border-color: var(--sp-ink); }
.sp-field label {
  position: absolute;
  top: 1.05rem;
  left: 0;
  color: var(--sp-ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  pointer-events: none;
  transform-origin: left top;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), color .25s ease;
}
/* The label lifts out of the way once there is something in the field. */
.sp-field input:focus + label,
.sp-field input:not(:placeholder-shown) + label,
.sp-field textarea:focus + label,
.sp-field textarea:not(:placeholder-shown) + label,
.sp-field select:focus + label,
.sp-field select:valid + label { color: var(--sp-muted); transform: translateY(-1.35rem) scale(.78); }
.sp-field--select::after {
  content: "";
  position: absolute;
  right: .15rem;
  top: 1.7rem;
  border-style: solid;
  border-width: 7px 6px 0;
  border-color: var(--sp-ink) transparent transparent;
  pointer-events: none;
}
.sp-field--select select { cursor: pointer; }

.sp-form__row { display: grid; gap: .8rem; margin: -.4rem 0 2.6rem; }
.sp-check { display: inline-flex; align-items: center; gap: .6rem; font-size: 1rem; cursor: pointer; }
.sp-check input { width: 13px; height: 13px; margin: 0; border: 1px solid var(--sp-ink); border-radius: 50%; appearance: none; cursor: pointer; transition: background .2s; }
.sp-check input:checked { background: var(--sp-purple); border-color: var(--sp-purple); box-shadow: inset 0 0 0 2px #fff; }
.sp-form__note { margin: 0; color: var(--sp-muted); font-size: .9375rem; line-height: 1.5; }

.sp-send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 23rem);
  min-height: 2.8rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 0;
  background: var(--sp-purple);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}
.sp-send span:last-child { display: inline-flex; font-size: .85rem; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
/* Drawn, not typed. U+25B6 is rendered as a colour emoji by iOS and Android,
   so the button held a flat blue-black glyph instead of a mark in its own colour. */
.sp-send span:last-child svg { width: .72em; height: auto; fill: currentColor; }
.sp-send:hover { background: var(--sp-violet); }
.sp-send:hover span:last-child { transform: translateX(4px); }

.contact-error { margin: .45rem 0 0; color: #a3324d; font-size: .9rem; }
.contact-field.is-invalid input,
.contact-field.is-invalid select,
.contact-field.is-invalid textarea { border-color: #a3324d; }

.sp-contact__extra { margin-top: clamp(4rem, 6vw, 5.5rem); }
.sp-contact__rule { padding-bottom: .75rem; border-bottom: 1px solid var(--sp-ink); }
.sp-contact__extra a { display: inline-block; margin-top: 1.1rem; font-size: .9375rem; }

/* ——— Follow the journey ——— */
.sp-journey { padding: clamp(3.5rem, 5.6vw, 5rem) var(--sp-gutter) clamp(5rem, 8vw, 7rem); background: #fff; color: var(--sp-ink); }
.sp-journey__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.4rem; }
.sp-journey h2 { margin: 0; font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 400; line-height: 1.35; letter-spacing: -.01em; }
.sp-social { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.sp-social a { display: grid; width: 44px; height: 44px; place-items: center; color: var(--sp-ink); transition: opacity .25s; }
.sp-social a:hover { opacity: .6; }
.sp-social svg { display: block; width: 30px; height: 30px; fill: currentColor; }
.sp-journey__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.sp-journey__grid li { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; }
.sp-journey__grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.sp-journey__grid li:hover img { transform: scale(1.04); }

@media (min-width: 900px) {
  .sp-contact { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
  .sp-form__row { grid-template-columns: auto 1fr; align-items: center; }
  .sp-form__note { text-align: right; }
  .sp-journey__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-field label, .sp-send span, .sp-journey__grid img { transition: none; }
}
.sp-social svg.sp-social__stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.sp-social svg.sp-social__stroke .dot { fill: currentColor; stroke: none; }
/* The discovery-call calendar: TLH's Microsoft Bookings page, on the deep
   plum ground the menu and What We Do use, so booking reads as its own moment
   after the white form. The words, the host and the details sit on the left
   and stay put while the calendar scrolls; the calendar is a white card on
   the right. */
.sp-book {
  --book-ground: #241733;
  --book-ink: #f5eee9;
  --book-quiet: rgba(245, 238, 233, .66);
  --book-rule: rgba(245, 238, 233, .16);
  --book-lilac: #b798dc;
  scroll-margin-top: 4rem;
  padding: clamp(4.5rem, 9vw, 8rem) var(--sp-gutter);
  background: var(--book-ground);
  color: var(--book-ink);
}
.sp-book__inner { display: grid; gap: clamp(2.5rem, 5vw, 5rem); max-width: 84rem; margin: 0 auto; }
.sp-book__eyebrow { margin: 0; color: var(--book-lilac); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.sp-book h2 {
  max-width: 12ch;
  margin: 1.1rem 0 0;
  color: var(--book-ink);
  font-size: clamp(2.5rem, 4.6vw, 4.6rem);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}
.sp-book__lead { max-width: 30rem; margin: 1.6rem 0 0; color: var(--book-quiet); font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.55; }
.sp-book__host { display: flex; align-items: center; gap: 1rem; margin: 2.4rem 0 0; }
.sp-book__host img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--book-rule); }
.sp-book__host figcaption { display: grid; gap: .2rem; }
.sp-book__host strong { font-size: 1rem; font-weight: 500; }
.sp-book__host span { color: var(--book-quiet); font-size: .875rem; }
.sp-book__details { margin: 2.4rem 0 0; padding: 0; border-top: 1px solid var(--book-rule); }
.sp-book__details div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--book-rule); }
.sp-book__details dt { color: var(--book-lilac); font-size: .68rem; font-weight: 600; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; }
.sp-book__details dd { margin: 0; font-size: .975rem; }
.sp-book__link { display: inline-flex; gap: .4rem; margin-top: 2rem; color: var(--book-quiet); font-size: .875rem; text-decoration: underline; text-decoration-color: var(--book-rule); text-underline-offset: .3em; transition: color .25s, text-decoration-color .25s; }
.sp-book__link:hover { color: var(--book-ink); text-decoration-color: currentColor; }
/* Microsoft's page is grey with a white booking column, and it can't be
   styled from here. At 400px wide it switches to its phone layout, which is
   white edge to edge apart from a 25px grey band at the very top. So the
   frame is held at that width, centred on a white panel, and lifted 25px
   under the panel's top edge to trim the band: no grey anywhere. */
.sp-book__card { display: flex; justify-content: center; overflow: hidden; padding-top: clamp(1.5rem, 4vw, 3.5rem); background: #fff; }
.sp-book__clip { flex: none; width: min(100%, 400px); overflow: hidden; }
.sp-book__card iframe { display: block; width: 100%; height: 1040px; margin-top: -25px; border: 0; }
/* Desktop: the calendar fills the whole right-hand side, from the top of the
   band to the bottom and out to the edge of the window, so there is no plum
   frame around it. */
@media (min-width: 1000px) {
  .sp-book { padding-right: 0; padding-block: 0; }
  .sp-book__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; max-width: none; margin: 0; column-gap: clamp(3rem, 6vw, 6rem); }
  .sp-book__intro { align-self: start; position: sticky; top: 7rem; padding-block: clamp(4.5rem, 9vw, 8rem); }
  .sp-book__card iframe { height: calc(max(100svh, 1080px) + 25px); }
}
/* A phone stacks Microsoft's calendar above its times, so the card is taller. */
@media (max-width: 767px) { .sp-book__card iframe { height: 1420px; } }
/* The bot trap: off-screen rather than display:none, which some bots skip. */
.sp-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sp-form[aria-busy="true"] .sp-send { opacity: .6; cursor: progress; }