/* The landing pages with a contact form, Coaching (public:coaching, ADR
   0099) and Consulting (public:consulting, ADR 0101): black, white and greys.
   Two colours are deliberately not grey: the site-wide keyboard focus ring
   (static/shared/css/focus.css, never lightened) and the form's error red,
   which always comes with words and an icon (WCAG 1.4.1).

   Contrast, on white / on the #f5f5f7 panel: --landing-ink #1d1d1f
   16.8 / 15.5; --landing-text #424245 10.0 / 9.2; --landing-muted
   #5c6672 5.8 / 5.4 (the AX-10 grey, .card__meta's); --landing-error
   #b02a37 6.5 / 6.0. On the #1d1d1f panel: #ffffff 16.8, #d2d2d7 11.2,
   #aeaeb2 7.6. The form's own red (Bootstrap's #dc3545, 4.5) only sits on
   the white form card. */

.landing-page {
  --landing-ink: #1d1d1f;
  --landing-text: #424245;
  --landing-muted: #5c6672;
  --landing-surface: #f5f5f7;
  --landing-line: #d2d2d7;
  --landing-error: #b02a37;
  /* The admin's Site Theme > Layout "section spacing", halved on a phone. */
  --landing-space: var(--site-section-spacing, 4rem);
  padding-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .landing-page {
    --landing-space: calc(var(--site-section-spacing, 4rem) / 2);
  }
}

.landing-page h1,
.landing-page h2,
.landing-page h3 {
  overflow-wrap: break-word;
}

/* A short label above a heading. Written in sentence case and shown in
   capitals, so a screen reader reads a word, not letters. */
.landing-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--landing-muted);
}

.landing-section__title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--landing-ink);
}

.landing-section__intro {
  max-width: 40rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--landing-text);
}

.landing-section__head {
  max-width: 40rem;
  margin-bottom: 2.5rem;
}

/* The page's own buttons: the ink colour in every state (Bootstrap's
   --bs-btn-* variables, as base.html themes .btn-primary). With .btn-pill
   they're about 45px tall (WCAG 2.5.8 asks 24px). */
.btn.landing-cta {
  --bs-btn-bg: var(--landing-ink);
  --bs-btn-border-color: var(--landing-ink);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #3a3a3c;
  --bs-btn-hover-border-color: #3a3a3c;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-active-color: #fff;
  display: inline-flex;
  align-items: center;
}

/* While the form is on its way (public/js/inquiry_form.js). */
.btn.landing-cta[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.8;
}

/* Text links on the page: ink, always underlined (not told apart by
   colour alone, WCAG 1.4.1). */
.landing-link,
.landing-form__privacy a {
  color: var(--landing-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.landing-link:hover,
.landing-form__privacy a:hover {
  color: var(--landing-ink);
  text-decoration-thickness: 2px;
}

/* ---- Hero: the text alone, or text and photo side by side from 992px
   (the photo after the text below that, so the heading and the button
   come first on a phone). ---- */

.landing-hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem 0 var(--landing-space);
}

.landing-hero__text {
  max-width: 40rem;
}

/* Without a photo the heading takes two lines instead of three; the
   paragraph keeps its reading width. */
.landing-hero:not(.landing-hero--with-image) .landing-hero__text {
  max-width: 50rem;
}

.landing-hero:not(.landing-hero--with-image) .landing-hero__lead {
  max-width: 40rem;
}

.landing-hero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--landing-ink);
}

.landing-hero__lead {
  margin: 0 0 2rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--landing-text);
}

.landing-hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 1.5rem;
  background: var(--landing-surface);
}

/* The admin's focal point and zoom (content.PageHero), as the page-hero
   banner uses them; greyscale whatever was uploaded. */
.landing-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focal-x, 50%) var(--focal-y, 50%);
  filter: grayscale(1);
}

@media (min-width: 992px) {
  .landing-hero {
    padding-top: 3rem;
  }

  .landing-hero--with-image {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .landing-hero__media {
    aspect-ratio: 1 / 1;
  }
}

/* ---- Sections ---- */

.landing-section {
  padding: var(--landing-space) 0;
  border-top: 1px solid var(--landing-line);
}

/* Heading and intro beside their content from 992px, above it below. */
.landing-split {
  display: grid;
  gap: 2rem;
}

@media (min-width: 992px) {
  .landing-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }
}

.landing-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-checklist li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--landing-line);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--landing-ink);
}

.landing-checklist li:first-child {
  padding-top: 0;
}

.landing-checklist__mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid transparent; /* a ring in forced colours */
  border-radius: 50%;
  background: var(--landing-ink);
  color: #fff;
  font-size: 1rem;
}

.landing-features {
  display: grid;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .landing-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }
}

@media (min-width: 1200px) {
  .landing-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.landing-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--landing-line);
  border-radius: 50%;
  font-size: 1.375rem;
  color: var(--landing-ink);
}

.landing-feature__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--landing-ink);
}

.landing-feature__text {
  margin: 0;
  line-height: 1.6;
  color: var(--landing-text);
}

/* Two to a row at most, for features that carry more text (Consulting's
   services: what each is, and why it helps). */
@media (min-width: 1200px) {
  .landing-features--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 4rem;
  }
}

.landing-feature__value {
  margin: 0.75rem 0 0;
  line-height: 1.6;
  color: var(--landing-ink);
}

/* Typography-led points (Consulting's challenges): a heading and a line or
   two under an ink rule, no icon. One under the other on a phone, two to a
   row from 768px, four from 1200px. */
.landing-points {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .landing-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }
}

@media (min-width: 1200px) {
  .landing-points {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.landing-point {
  padding-top: 1.25rem;
  border-top: 2px solid var(--landing-ink);
}

.landing-point__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--landing-ink);
}

.landing-point__text {
  margin: 0;
  line-height: 1.6;
  color: var(--landing-text);
}

/* The checklist two to a row from 768px (Consulting's deliverables), so
   it reads across each row in the same order as the list. */
@media (min-width: 768px) {
  .landing-checklist--columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .landing-checklist--columns li:nth-child(2) {
    padding-top: 0;
  }
}

/* A muted closing line under a section's content. */
.landing-note {
  max-width: 40rem;
  margin: 2rem 0 0;
  line-height: 1.6;
  color: var(--landing-muted);
}

/* ---- Our approach: a dark panel, the four steps in a row from 992px
   with a line joining them, two by two from 768px, and one under the
   other with a line down the side on a phone. ---- */

.landing-approach {
  margin-top: calc(var(--landing-space) / 2);
  padding: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid transparent; /* an edge in forced colours */
  border-radius: 1.5rem;
  background: var(--landing-ink);
  color: #fff;
}

.landing-approach .landing-eyebrow {
  color: #aeaeb2;
}

.landing-approach .landing-section__title {
  color: #fff;
}

.landing-approach .landing-section__intro {
  color: #d2d2d7;
}

.landing-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-step {
  position: relative;
}

.landing-step__number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #fff;
  font-weight: 700;
  color: var(--landing-ink);
}

.landing-step__title {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}

.landing-step__text {
  margin: 0;
  line-height: 1.6;
  color: #d2d2d7;
}

@media (max-width: 767.98px) {
  .landing-step {
    min-height: 2.75rem;
    padding: 0 0 2rem 4rem;
  }

  .landing-step:last-child {
    padding-bottom: 0;
  }

  .landing-step__number {
    position: absolute;
    top: 0;
    left: 0;
  }

  .landing-step__title {
    margin-top: 0.4rem;
  }

  .landing-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.25rem;
    bottom: 0.5rem;
    left: 1.375rem;
    border-left: 1px solid #6e6e73;
  }
}

@media (min-width: 768px) {
  .landing-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }
}

@media (min-width: 992px) {
  .landing-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .landing-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.375rem;
    right: -1.25rem;
    left: 3.75rem;
    border-top: 1px solid #6e6e73;
  }
}

/* ---- Contact ---- */

.landing-contact {
  margin-top: var(--landing-space);
  padding: clamp(1rem, 4vw, 4rem);
  border: 1px solid transparent;
  border-radius: 1.5rem;
  background: var(--landing-surface);
}

.landing-reassurance {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.landing-reassurance li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  line-height: 1.5;
  color: var(--landing-text);
}

.landing-reassurance .bi {
  flex: none;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--landing-ink);
}

.landing-form-card {
  min-width: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  border: 1px solid var(--landing-line);
  border-radius: 1rem;
  background: #fff;
}

.landing-form__instructions {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--landing-muted);
}

/* First and last name side by side from 768px (one thing, a name). */
@media (min-width: 768px) {
  .landing-form__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }
}

/* A field with an error: a red edge beside its words (Bootstrap only
   draws one for .is-invalid, which Django doesn't set). */
.landing-form .form-control[aria-invalid="true"],
.landing-form .form-select[aria-invalid="true"] {
  border-color: var(--landing-error);
}

.landing-form__summary {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--landing-error);
  border-left-width: 0.5rem;
  border-radius: 0.5rem;
}

.landing-form__summary-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--landing-ink);
}

.landing-form__summary-title .bi {
  color: var(--landing-error);
}

.landing-form__summary-list {
  margin: 0;
  padding-left: 1.25rem;
}

.landing-form__summary-list li + li {
  margin-top: 0.25rem;
}

.landing-form__summary-list a {
  color: var(--landing-error);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The honeypot: off-screen, out of the tab order, hidden from assistive
   technology (public/inquiry/_contact_form.html). Not display: none,
   which some bots skip. */
.landing-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.landing-form__privacy {
  margin: 0.5rem 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--landing-muted);
}

.landing-sent {
  padding: 1rem 0;
}

.landing-sent__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--landing-ink);
  font-size: 1.5rem;
  color: #fff;
}

.landing-sent__title {
  margin: 1.25rem 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--landing-ink);
}

.landing-sent__text {
  margin: 0 0 1.25rem;
  color: var(--landing-text);
}