.elementor-kit-6{--e-global-color-primary:#0D1E30;--e-global-color-secondary:#B68E2F;--e-global-color-text:#0D1E30;--e-global-color-accent:#75132A;--e-global-color-djbcream:#F7EEE5;--e-global-color-djbparch:#FDF9F4;--e-global-color-djbrule:#DDD0BE;--e-global-color-djbmuted:#4A5A68;--e-global-typography-primary-font-family:"Oswald";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Oswald";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Source Serif 4";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Oswald";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   Douglas J. Bystry site: global stylesheet for WordPress
   Ported from the approved Lovable mockup (src/styles.css).

   HOW TO INSTALL (once, site-wide):
   - Elementor: Site Settings > Custom CSS (Elementor Pro), OR
   - Appearance > Customize > Additional CSS (works with any theme), OR
   - A child theme stylesheet (most robust).

   SCOPING: every rule lives under .djb so the WordPress theme cannot
   override it and it cannot leak into the theme or the admin bar.
   Every HTML block must sit inside <div class="djb"> ... </div>.

   Breakpoints: desktop (default), max-width 1024px, max-width 767px.
   Spacing ladder: 8 16 24 32 48 64 80 120.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Serif+4:wght@400;600&display=swap");

.djb {
  --ink: #0d1e30;
  --gold: #b68e2f;
  --crimson: #75132a;
  --cream: #f7eee5;
  --parchment: #fdf9f4;
  --rule: #ddd0be;
  --font-display: "Oswald", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;

  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
}

/* The header wrapper must not clip the mobile dropdown menu. */
.djb.djb-header {
  overflow: visible;
  position: relative;
  z-index: 100;
}

/* Site-wide page background, so theme gutters match the mockup. */
body {
  background-color: #f7eee5;
}

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

.djb img {
  max-width: 100%;
  height: auto;
}

/* Neutralize common theme defaults inside the blocks */
.djb h1,
.djb h2,
.djb h3,
.djb h4,
.djb p,
.djb figure,
.djb blockquote {
  margin: 0;
  padding: 0;
  color: inherit;
}
.djb a {
  color: inherit;
  box-shadow: none;
}
.djb a:hover,
.djb a:focus {
  color: inherit;
}
.djb ul,
.djb ol {
  margin: 0;
}
/* Hello Elementor makes captions small grey italics; ours follow the design. */
.djb figcaption {
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  margin: 0;
}

/* ---------- layout ---------- */

.djb .container {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.djb .section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.djb .section-tight {
  padding-top: 64px;
  padding-bottom: 64px;
}

.djb .band-ink,
.djb.band-ink {
  background-color: var(--ink);
  color: var(--cream);
}

.djb .band-parchment {
  background-color: var(--parchment);
}

.djb .surface {
  background-color: var(--parchment);
  border: 1px solid var(--rule);
}

.djb .hairline {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
  height: 0;
  background: none;
}

.djb .prose {
  max-width: 34em;
}

.djb .stack-8 > * + * { margin-top: 8px; }
.djb .stack-16 > * + * { margin-top: 16px; }
.djb .stack-24 > * + * { margin-top: 24px; }
.djb .stack-32 > * + * { margin-top: 32px; }
.djb .stack-48 > * + * { margin-top: 48px; }


.djb .grid-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: start;
}

.djb .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.djb .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.djb .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.djb .grid-hero > *,
.djb .grid-2 > *,
.djb .grid-3 > *,
.djb .grid-4 > *,
.djb .figure-row > * {
  min-width: 0;
}

.djb .grid-align-center {
  align-items: center;
}

/* ---------- type ---------- */

.djb .h1-name,
.djb .h1-page,
.djb .h2,
.djb .h3,
.djb .descriptor,
.djb .eyebrow,
.djb .label,
.djb .btn,
.djb .nav-link,
.djb .wordmark,
.djb .figure-big,
.djb .card-title,
.djb .list-title {
  font-family: var(--font-display);
  margin: 0;
}

.djb .h1-name {
  font-size: 76px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.djb .h1-page {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.djb .h2 {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.djb .h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.djb .descriptor {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--gold);
}

.djb .eyebrow,
.djb .label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.4;
}

.djb .label-gold { color: var(--gold); }

.djb .lead {
  font-size: 22px;
  line-height: 1.55;
  margin: 0;
}

.djb p {
  font-size: 18px;
  line-height: 1.62;
  margin: 0;
}
.djb p.lead { font-size: 22px; line-height: 1.55; }
.djb p.label,
.djb p.eyebrow { font-size: 13px; line-height: 1.4; }
.djb p.descriptor { font-size: 26px; line-height: 1.3; }
.djb p.notify-note { font-size: 15px; }

.djb .muted { color: #4a5a68; }
.djb .band-ink .muted,
.djb.band-ink .muted { color: #b9c4cd; }
.djb .crimson { color: var(--crimson); }

.djb .figure-big {
  font-size: 78px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.djb .rule-gold {
  width: 96px;
  height: 3px;
  background-color: var(--gold);
  border: 0;
  margin: 0;
}

.djb .nowrap { white-space: nowrap; }

/* ---------- buttons & links ---------- */

.djb .btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 16px 24px;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
}

.djb .btn-ink,
.djb .btn-ink:hover,
.djb .btn-ink:focus {
  background-color: var(--ink);
  color: var(--cream);
}

.djb .btn-outline,
.djb .btn-outline:hover,
.djb .btn-outline:focus {
  background-color: transparent;
  color: var(--ink);
}

.djb .band-ink .btn-outline,
.djb.band-ink .btn-outline {
  color: var(--cream);
  border-color: var(--cream);
}

.djb .btn-gold,
.djb .btn-gold:hover,
.djb .btn-gold:focus {
  background-color: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.djb .link-gold {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 4px;
  display: inline-block;
}

.djb .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- chrome: header ---------- */

/* Hello Elementor styles its own .site-header/.site-footer; neutralize them
   so ours span the full width. */
.djb .site-header,
.djb .site-footer {
  max-width: none;
  width: 100%;
  margin: 0;
  display: block;
}
.djb .site-footer { padding: 0; }

.djb .utility-strip {
  background-color: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: right;
}

.djb .utility-strip a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
}

.djb .site-header {
  background-color: var(--cream);
  border-bottom: 1px solid var(--rule);
  padding-top: 24px;
  padding-bottom: 24px;
}

.djb .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.djb .wordmark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

.djb .wordmark .gold { color: var(--gold); }

.djb .site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.djb .nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
}

.djb .nav-link.is-active { border-bottom-color: var(--gold); }

/* ---------- chrome: footer ---------- */

.djb .site-footer {
  background-color: var(--parchment);
  border-top: 1px solid var(--rule);
}

.djb .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 48px;
}

.djb .footer-col a {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin-top: 8px;
}

.djb .footer-plain {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  margin-top: 8px;
}

.djb .footer-logo-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.djb .footer-bar {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- components ---------- */

.djb .card {
  border-top: 2px solid var(--gold);
  background-color: var(--parchment);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px 24px;
}

.djb .card-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.djb .band-col {
  border-top: 2px solid var(--gold);
  padding-top: 24px;
}

.djb .band-col .card-title {
  font-size: 26px;
  color: var(--cream);
}

.djb .placeholder {
  border: 2px dashed var(--rule);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  width: 100%;
}

.djb .placeholder span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #7b6a58;
}

.djb .ratio-4-5 { aspect-ratio: 4 / 5; }
.djb .ratio-3-2 { aspect-ratio: 3 / 2; }
.djb .ratio-16-9 { aspect-ratio: 16 / 9; }
.djb .ratio-1-1 { aspect-ratio: 1 / 1; }

.djb .logo-panel {
  background-color: var(--parchment);
  border: 1px solid var(--rule);
  padding: 64px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.djb .logo-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.djb .cover-flat,
.djb .cover-mockup,
.djb .cover-announce {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 24px 32px rgba(13, 30, 48, 0.18));
}
.djb .cover-flat { max-width: 400px; }
.djb .cover-mockup { max-width: 480px; }
.djb .cover-announce { max-width: 340px; }

/* ---------- forms ---------- */

.djb .field {
  display: block;
  margin-top: 24px;
}

.djb .field .label {
  display: block;
  margin-bottom: 8px;
}

.djb .field input,
.djb .field select,
.djb .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--parchment);
  border: 1px solid var(--rule);
  padding: 16px;
  border-radius: 0;
}

.djb .field textarea {
  min-height: 160px;
  resize: vertical;
}

.djb .band-ink .field input { background-color: var(--cream); }

.djb .newsletter-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 520px;
}

.djb .newsletter-row input {
  flex: 1 1 280px;
  font-family: var(--font-body);
  font-size: 18px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background-color: var(--cream);
  color: var(--ink);
  padding: 16px;
}

.djb .notify-heading {
  font-family: var(--font-display);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.djb .form-confirm {
  flex-basis: 100%;
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--gold);
}

.djb .list-plain {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.djb .list-plain li {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.62;
}

.djb .figure-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}
.djb .figure-row.has-hero { grid-template-columns: 280px 1fr; }
.djb .figure-big.figure-hero { font-size: 112px; }

/* ---------- photos ---------- */

.djb .hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 24px 32px rgba(13, 30, 48, 0.18));
}

.djb .hero-photo-frame {
  position: relative;
  isolation: isolate;
  min-width: 0;
}
.djb .hero-photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(16px, 16px);
  border: 1px solid var(--gold);
  border-radius: 8px;
  z-index: -1;
  pointer-events: none;
}
.djb .hero-photo-rounded {
  border-radius: 8px;
  border: 0;
}

.djb .art-3-2 {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

.djb .hero-centered { text-align: center; }
.djb .hero-centered .prose { margin-left: auto; margin-right: auto; }
.djb .hero-centered .rule-gold { margin-left: auto; margin-right: auto; }
.djb .hero-centered .btn-row { justify-content: center; }

/* ---------- sector icons ---------- */

.djb .band-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.djb .band-icon img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--gold);
}
.djb .sector-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px 32px;
}
.djb .sector-grid > * {
  flex: 0 0 calc((100% - 96px) / 4);
  min-width: 0;
}

/* ---------- testimonials ---------- */

.djb .quote-card {
  margin: 0;
  border-top: 1px solid var(--gold);
  padding-top: 24px;
}
.djb .quote-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.25;
  color: var(--ink);
}
.djb .quote-name { display: block; font-weight: 600; }
.djb .quote-title { display: block; margin-top: 8px; }

/* ---------- book chapter gallery ---------- */

.djb .chapter-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: calc(220px * 4 + 32px * 3);
  margin-left: auto;
  margin-right: auto;
}
.djb .chapter-item {
  margin: 0;
  flex: 0 0 220px;
  max-width: 220px;
  min-width: 0;
  text-align: center;
}
.djb .chapter-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rule);
  box-shadow: 0 8px 20px rgba(13, 30, 48, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.djb .chapter-item figcaption {
  display: block;
  margin-top: 16px;
  text-align: center;
}
@media (min-width: 1025px) and (hover: hover) {
  .djb .chapter-item:hover img {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(13, 30, 48, 0.16);
  }
}

/* ---------- scroll reveal (paired with djb-site.js) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .djb .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .djb .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .djb .chapter-item img { transition: none; }
}

/* ---------- mobile menu ---------- */

.djb .menu-toggle,
.djb .mobile-nav {
  display: none;
}

/* ==========================================================================
   1024px and below
   ========================================================================== */
@media (max-width: 1024px) {
  .djb .section { padding-top: 64px; padding-bottom: 64px; }
  .djb .section-tight { padding-top: 48px; padding-bottom: 48px; }
  .djb .h1-name { font-size: 58px; }
  .djb .h1-page { font-size: 46px; }
  .djb .h2 { font-size: 36px; }
  .djb .descriptor,
  .djb p.descriptor { font-size: 23px; }
  .djb .lead,
  .djb p.lead { font-size: 20px; }
  .djb .figure-big { font-size: 62px; }
  .djb .grid-hero,
  .djb .grid-2 { gap: 48px; }
  .djb .grid-4,
  .djb .grid-3 { grid-template-columns: 1fr 1fr; gap: 32px; }
  .djb .footer-grid { gap: 32px; }
  .djb .logo-panel { padding: 48px 32px; }
  .djb .cover-flat { max-width: 320px; }
  .djb .cover-mockup { max-width: 380px; }
  .djb .figure-row.has-hero { grid-template-columns: 220px 1fr; }
  .djb .figure-big.figure-hero { font-size: 88px; }
  .djb .sector-grid > * { flex-basis: calc((100% - 32px) / 2); }
  .djb .chapter-gallery { max-width: calc(220px * 3 + 32px * 2); }
}

/* ==========================================================================
   767px and below
   ========================================================================== */
@media (max-width: 767px) {
  .djb .section { padding-top: 48px; padding-bottom: 48px; }
  .djb .section-tight { padding-top: 48px; padding-bottom: 48px; }
  .djb,
  .djb p { font-size: 17px; }
  .djb .h1-name { font-size: 40px; }
  .djb .h1-page { font-size: 34px; }
  .djb .h2 { font-size: 29px; }
  .djb .h3,
  .djb .card-title,
  .djb .band-col .card-title { font-size: 22px; }
  .djb .descriptor,
  .djb p.descriptor { font-size: 20px; }
  .djb .lead,
  .djb p.lead { font-size: 18px; }
  .djb .figure-big { font-size: 52px; }
  .djb .grid-hero,
  .djb .grid-2,
  .djb .grid-3,
  .djb .grid-4,
  .djb .footer-grid,
  .djb .figure-row,
  .djb .figure-row.has-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .djb .figure-big.figure-hero { font-size: 72px; }
  .djb .utility-strip { text-align: left; letter-spacing: 0.1em; }
  .djb .logo-panel { padding: 32px 24px; }
  .djb .cover-flat,
  .djb .cover-mockup { max-width: 280px; }
  .djb .hero-photo-frame::before { display: none; }

  /* header becomes hamburger */
  .djb .site-header { position: relative; }
  .djb .header-inner { flex-wrap: nowrap; gap: 16px; }
  .djb .site-nav { display: none; }
  .djb .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 0;
    color: var(--ink);
    cursor: pointer;
  }
  .djb .mobile-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    background-color: var(--cream);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(13, 30, 48, 0.08);
  }
  .djb .mobile-nav-link {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 16px 24px;
    border-bottom: 1px solid var(--rule);
  }
  .djb .mobile-nav-link:last-child { border-bottom: 0; }
  .djb .mobile-nav-link.is-active { color: var(--gold); }

  .djb .newsletter-row { flex-direction: column; flex-wrap: nowrap; }
  .djb .newsletter-row input {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 16px;
    width: 100%;
  }
  .djb .newsletter-row .btn { width: 100%; text-align: center; }

  .djb .book-cover-col { order: -1; }

  .djb .sector-grid { gap: 32px 16px; }
  .djb .sector-grid > * { flex-basis: calc((100% - 16px) / 2); }
  .djb .band-icon,
  .djb .band-icon img { width: 64px; height: 64px; }

  .djb .chapter-gallery {
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 16px;
  }
  .djb .chapter-item {
    flex: 0 0 calc((100% - 32px) / 2.5);
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   NATIVE ELEMENTOR WIDGETS: make them match the HTML sections exactly.
   Use inside any Elementor container that has the CSS class "djb"
   (Container > Advanced > CSS Classes). Then give each widget one of
   these classes in Widget > Advanced > CSS Classes:

     Heading widget:      djb-h1  djb-h2  djb-h3  djb-eyebrow
     Text Editor widget:  djb-text (body copy)   djb-lead (intro copy)
                          add  djb-muted  for the grey note style
     Image widget:        djb-img

   Leave the widget's own Style tab at defaults; the classes do the styling.
   Set the container Gap to 0. Spacing between widgets comes from below.
   ========================================================================== */

/* Elementor gives containers padding/gap by default; zero it in .djb areas */
.djb.e-con,
.djb .e-con {
  --padding-top: 0px; --padding-bottom: 0px;
  --padding-left: 0px; --padding-right: 0px;
}

.djb .djb-h1 .elementor-heading-title,
.djb .djb-h2 .elementor-heading-title,
.djb .djb-h3 .elementor-heading-title,
.djb .djb-eyebrow .elementor-heading-title {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}
.djb .band-ink .elementor-heading-title,
.djb.band-ink .elementor-heading-title { color: var(--cream); }

.djb .djb-h1 .elementor-heading-title { font-size: 60px; font-weight: 600; line-height: 1.06; letter-spacing: 0.02em; }
.djb .djb-h2 .elementor-heading-title { font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; }
.djb .djb-h3 .elementor-heading-title { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: 0.04em; }
.djb .djb-eyebrow .elementor-heading-title {
  font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.17em; color: #4a5a68;
}

.djb .djb-text,
.djb .djb-lead {
  font-family: var(--font-body);
  color: var(--ink);
  max-width: 34em;
}
.djb .djb-text p { font-size: 18px; line-height: 1.62; margin: 0; }
.djb .djb-lead p { font-size: 22px; line-height: 1.55; margin: 0; }
/* Elementor forces widgets to max-width:100%, so the reading-column limit
   sits on the paragraphs (34em = same measure as the mockup's .prose). */
.djb .djb-text p,
.djb .djb-lead p { max-width: 34em; }
/* Optional extra class "djb-narrow": keeps a lead paragraph to the
   body-text measure (612px), as on the Speaking page intro. */
.djb .djb-narrow p { max-width: 612px; }
.djb .djb-text p + p,
.djb .djb-lead p + p { margin-top: 24px; }
.djb .djb-text a { border-bottom: 1px solid var(--gold); text-decoration: none; }
.djb .djb-muted,
.djb .djb-muted p { color: #4a5a68; }
.djb .band-ink .djb-text,
.djb .band-ink .djb-lead { color: var(--cream); }
.djb .band-ink .djb-muted p { color: #b9c4cd; }

.djb .djb-img img { display: block; width: 100%; height: auto; }

/* Spacing between stacked native widgets (mirrors the mockup) */
.djb .djb-eyebrow + .elementor-widget { margin-top: 16px; }
.djb .djb-h1 + .elementor-widget { margin-top: 24px; }
.djb .djb-h2 + .elementor-widget { margin-top: 32px; }
.djb .djb-h3 + .elementor-widget { margin-top: 24px; }
.djb .djb-text + .elementor-widget,
.djb .djb-lead + .elementor-widget { margin-top: 32px; }

@media (max-width: 1024px) {
  .djb .djb-h1 .elementor-heading-title { font-size: 46px; }
  .djb .djb-h2 .elementor-heading-title { font-size: 36px; }
  .djb .djb-lead p { font-size: 20px; }
}
@media (max-width: 767px) {
  .djb .djb-h1 .elementor-heading-title { font-size: 34px; }
  .djb .djb-h2 .elementor-heading-title { font-size: 29px; }
  .djb .djb-h3 .elementor-heading-title { font-size: 22px; }
  .djb .djb-text p { font-size: 17px; }
  .djb .djb-lead p { font-size: 18px; }
}

/* ==========================================================================
   ELEMENTOR PRO FORM WIDGET: matches the mockup's form fields.
   Give the Form widget the CSS class "djb-form" (Advanced > CSS Classes)
   and set its Columns Gap and Rows Gap to 0.
   ========================================================================== */
.djb .djb-form .elementor-form { max-width: 34em; }
/* Elementor writes per-widget colors with very high specificity, so the
   brand values below are marked !important to win. */
.djb .djb-form .elementor-field-group .elementor-field-textual,
.djb .djb-form .elementor-field-group select {
  background-color: var(--parchment) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
}
.djb .djb-form .elementor-field-type-submit,
.djb .djb-form .e-form__buttons {
  width: auto !important;
  flex: 0 0 auto !important;
}
.djb .djb-form .elementor-button,
.djb .djb-form .elementor-button:hover,
.djb .djb-form .elementor-button:focus {
  width: auto !important;
  background-color: var(--ink) !important;
  color: var(--cream) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
}
.djb .djb-form .elementor-form-fields-wrapper { margin: 0; }
.djb .djb-form .elementor-field-group {
  margin: 24px 0 0;
  padding: 0;
}
.djb .djb-form .elementor-field-group .elementor-field-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink);
}
.djb .djb-form .elementor-field-group .elementor-field-textual,
.djb .djb-form .elementor-field-group select {
  width: 100%;
  min-height: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--parchment);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 16px;
  box-shadow: none;
}
.djb .djb-form .elementor-field-group textarea.elementor-field-textual {
  min-height: 160px;
  resize: vertical;
}
.djb .djb-form .elementor-field-group .elementor-field-textual:focus {
  outline: 2px solid var(--gold);
  outline-offset: 0;
}
.djb .djb-form .e-form__buttons,
.djb .djb-form .elementor-field-type-submit { margin-top: 32px; }
.djb .djb-form .elementor-button {
  display: inline-block;
  width: auto;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  padding: 16px 24px;
  background-color: var(--ink);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}
.djb .djb-form .elementor-button:hover,
.djb .djb-form .elementor-button:focus {
  background-color: var(--ink);
  color: var(--cream);
}
.djb .djb-form .elementor-message {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gold);
  margin-top: 16px;
}
.djb .djb-form .elementor-message::before { display: none; }
@media (max-width: 767px) {
  .djb .djb-form .elementor-field-group .elementor-field-textual,
  .djb .djb-form .elementor-field-group select { font-size: 17px; }
}

/* ========================================================================
   FORBES FEEDBACK (Oct 27, 2026): pre-order buttons, header CTA,
   footer social icons, consulting service cards and engagement steps.
   Mirrors the Lovable mockup's styles.css.
   ======================================================================== */
.djb .preorder-row { align-items: center; gap: 12px; }
.djb .preorder-row > .btn { padding-left: 20px; padding-right: 20px; }
.djb .preorder-more { align-self: center; }
.djb .preorder-row--compact .btn { padding: 12px 20px; font-size: 13px; }

.djb .nav-cta { align-self: center; padding: 8px 14px; font-size: 12px; letter-spacing: 0.12em; white-space: nowrap; }
@media (max-width: 1024px) {
  .djb .nav-cta { padding: 7px 11px; font-size: 11px; letter-spacing: 0.1em; }
}
@media (max-width: 900px) {
  .djb .header-inner { gap: 24px; }
  .djb .site-nav { gap: 16px; }
  .djb .nav-cta { padding: 6px 9px; font-size: 10.5px; letter-spacing: 0.08em; }
}
@media (max-width: 819px) {
  .djb .nav-cta { display: none; }
}

.djb .footer-social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.djb .footer-col .footer-social-link { display: inline-flex; align-items: center; justify-content: center; margin-top: 0; color: #4a5a68; transition: color 0.2s ease; }
.djb .footer-col a.footer-social-link:hover { color: var(--gold); }
.djb .footer-social-link.is-placeholder { opacity: 0.5; }
.djb .footer-social-link svg { display: block; }

.djb .grid-stretch { align-items: stretch; }
.djb .card-icon { color: var(--gold); display: flex; margin-bottom: 16px; }
.djb .card-icon svg { width: 40px; height: 40px; }
.djb .photo-4-5 { aspect-ratio: 4 / 5; }
.djb .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.djb .steps > * { min-width: 0; }
.djb .step-num { font-family: var(--font-display); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: 0.04em; color: var(--gold); margin-bottom: 16px; }
@media (max-width: 1024px) {
  .djb .step-num { font-size: 48px; }
}
@media (max-width: 767px) {
  .djb .steps { grid-template-columns: 1fr; gap: 32px; }
  .djb .mobile-nav-cta { display: block; width: 100%; text-align: center; padding: 16px 24px; font-size: 14px; letter-spacing: 0.17em; border-radius: 0; }
  .djb .preorder-row { flex-direction: column; align-items: stretch; }
  .djb .preorder-row .btn { width: 100%; text-align: center; }
  .djb .preorder-more { align-self: flex-start; margin-top: 8px; }
}

/* ==========================================================================
   Spacing utilities: replace the mockup's inline style="margin-top".
   Kept LAST on purpose so they win over the margin:0 resets above.
   ========================================================================== */
.djb .mt-8 { margin-top: 8px; }
.djb .mt-16 { margin-top: 16px; }
.djb .mt-24 { margin-top: 24px; }
.djb .mt-32 { margin-top: 32px; }
.djb .mt-48 { margin-top: 48px; }/* End custom CSS */