/* DHC landing-page style, trimmed from dhc/landingspages/lp.css for standalone pages. */

/*! Big Shoulders Display, IBM Plex Sans/Mono: SIL Open Font License 1.1 (see fonts/licenses) */
@font-face { font-family: "DHC LP Display"; src: url(fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DHC LP Sans"; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DHC LP Sans"; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DHC LP Mono"; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

.dhc-lp {
  --lp-ink: #2b2828;
  --lp-paper: #eee8df;
  --lp-surface: #f8f5f0;
  --lp-muted: #625d55;
  --lp-line: #c8c0b5;
  --lp-yellow: #f2b705;
  --lp-yellow-hi: #ffca16;
  --lp-green: #2d6a52;
  --lp-display: "DHC LP Display", Impact, "Arial Narrow", sans-serif;
  --lp-sans: "DHC LP Sans", "Segoe UI", Arial, sans-serif;
  --lp-mono: "DHC LP Mono", ui-monospace, Consolas, monospace;
  --lp-stripe: repeating-linear-gradient(-45deg, var(--lp-yellow) 0 14px, var(--lp-ink) 14px 28px);
  color-scheme: light;
  isolation: isolate;
  margin: 0;
  padding: 0;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font: 400 17px/1.6 var(--lp-sans);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.dhc-lp *,
.dhc-lp *::before,
.dhc-lp *::after {
  box-sizing: border-box;
}

.dhc-lp .lp-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Type */

.dhc-lp .lp-h1,
.dhc-lp .lp-h2,
.dhc-lp .lp-h3 {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: var(--lp-display);
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.dhc-lp .lp-h1 {
  font-size: clamp(2.7rem, 11vw, 5.6rem);
  line-height: 0.92;
}

.dhc-lp .lp-h2 {
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 0.98;
}

.dhc-lp .lp-h3 {
  font-size: 1.6rem;
  line-height: 1.05;
}

.dhc-lp .lp-p {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}

.dhc-lp .lp-lead {
  max-width: 38em;
  margin: 20px 0 0;
  font-size: 1.15rem;
  line-height: 1.55;
}

.dhc-lp .lp-kicker {
  display: block;
  margin: 0 0 12px;
  color: var(--lp-green);
  font: 500 0.82rem/1.3 var(--lp-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dhc-lp .lp-mark {
  color: var(--lp-yellow);
}

.dhc-lp .lp-fine {
  margin: 18px 0 0;
  color: inherit;
  font: 500 0.82rem/1.5 var(--lp-mono);
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.dhc-lp .lp-link {
  color: var(--lp-green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.dhc-lp .lp-link:hover {
  color: var(--lp-green);
  text-decoration-thickness: 2px;
}

.dhc-lp .lp-link:focus-visible,
.dhc-lp .lp-btn:focus-visible {
  outline: 3px solid var(--lp-green);
  outline-offset: 3px;
}

/* Buttons */

.dhc-lp .lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin-top: 28px;
}

.dhc-lp .lp-btn {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 12px 24px;
  border: 2px solid var(--lp-ink);
  border-radius: 0;
  background: var(--lp-yellow);
  box-shadow: 5px 5px 0 var(--lp-ink);
  color: var(--lp-ink);
  font: 600 1.05rem/1.2 var(--lp-sans);
  text-decoration: none;
  text-transform: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.dhc-lp .lp-btn:hover {
  background: var(--lp-yellow-hi);
  box-shadow: 2px 2px 0 var(--lp-ink);
  color: var(--lp-ink);
  transform: translate(3px, 3px);
}

.dhc-lp .lp-btn--dark {
  background: var(--lp-ink);
  box-shadow: 5px 5px 0 var(--lp-surface);
  color: var(--lp-paper);
}

.dhc-lp .lp-btn--dark:hover {
  background: #000;
  box-shadow: 2px 2px 0 var(--lp-surface);
  color: var(--lp-paper);
}

.dhc-lp .lp-btn--ghost {
  border-color: currentColor;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.dhc-lp .lp-btn--ghost:hover {
  background: transparent;
  box-shadow: none;
  color: inherit;
  transform: none;
  text-decoration: underline;
}

.dhc-lp .lp-arrow {
  font-family: var(--lp-mono);
}

/* Hero */

.dhc-lp .lp-hero {
  position: relative;
  padding: 28px 0 56px;
  background: var(--lp-ink);
  color: var(--lp-paper);
}

.dhc-lp .lp-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 14px;
  background: var(--lp-stripe);
  content: "";
}

.dhc-lp .lp-hero .lp-kicker {
  color: var(--lp-yellow);
}

.dhc-lp .lp-hero .lp-btn {
  box-shadow: 5px 5px 0 var(--lp-paper);
}

.dhc-lp .lp-hero .lp-btn:hover {
  box-shadow: 2px 2px 0 var(--lp-paper);
}

.dhc-lp .lp-hero .lp-btn--ghost,
.dhc-lp .lp-hero .lp-btn--ghost:hover {
  box-shadow: none;
}

.dhc-lp .lp-logo {
  display: block;
  width: 190px;
  max-width: 60%;
  height: auto;
  margin: 0 0 36px;
}

.dhc-lp .lp-hero--compact {
  padding-bottom: 48px;
}

.dhc-lp .lp-hero--compact .lp-h1 {
  font-size: clamp(2.5rem, 10vw, 4.6rem);
}

/* Standalone redirect page: the hero is the whole page. */
.dhc-lp .lp-hero--full {
  min-height: 100svh;
}

/* Sections */

.dhc-lp .lp-section {
  padding: 64px 0;
}

.dhc-lp .lp-section--surface {
  border-top: 2px solid var(--lp-ink);
  border-bottom: 2px solid var(--lp-ink);
  background: var(--lp-surface);
}

.dhc-lp .lp-section-head {
  max-width: 44em;
  margin-bottom: 32px;
}

.dhc-lp .lp-section-head .lp-p {
  margin-top: 16px;
}

/* Cards */

.dhc-lp .lp-cards {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dhc-lp .lp-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 22px;
  border: 2px solid var(--lp-ink);
  background: var(--lp-surface);
}

.dhc-lp .lp-card .lp-p {
  margin-top: 8px;
}

.dhc-lp .lp-card--accent {
  background: var(--lp-yellow);
}

/* Address */

.dhc-lp .lp-address {
  margin: 12px 0 0;
  font-style: normal;
}

/* Closing call to action */

.dhc-lp .lp-cta {
  position: relative;
  padding: 64px 0 72px;
  background: var(--lp-yellow);
  color: var(--lp-ink);
}

.dhc-lp .lp-cta::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 14px;
  background: var(--lp-stripe);
  content: "";
}

/* Green on yellow lacks contrast; links in the call to action use the ink colour. */
.dhc-lp .lp-cta .lp-link,
.dhc-lp .lp-cta .lp-link:hover {
  color: inherit;
}

/* Larger screens */

@media (min-width: 640px) {
  .dhc-lp .lp-wrap {
    padding: 0 32px;
  }

  .dhc-lp .lp-cards {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 900px) {
  .dhc-lp .lp-hero {
    padding: 36px 0 80px;
  }

  .dhc-lp .lp-section {
    padding: 88px 0;
  }

  .dhc-lp .lp-cards--4 {
    grid-template-columns: repeat(4, 1fr);
  }

}

@media (prefers-reduced-motion: reduce) {
  .dhc-lp .lp-btn {
    transition: none;
  }

  .dhc-lp .lp-btn:hover {
    transform: none;
  }
}