/* ==========================================================================
   Northline Services - brand stylesheet (theme3, blog 4)

   Values are lifted directly from the prototype's inline styles so the Divi
   build matches it 1:1. Divi's own module defaults are reset first, then the
   prototype's rules are applied to utility classes that the block tree
   assigns via module.advanced.htmlAttributes.

   Layout note: every row holds a single 4_4 column and all multi-column
   layout is done with CSS grid on divi/group modules. Divi's column widths
   and its row clearfix pseudo-elements would otherwise fight the grid.
   ========================================================================== */

:root {
  --nl-blue: #2563EB;
  --nl-blue-dark: #1D4ED8;
  --nl-blue-tint: #EAF0FF;
  --nl-blue-pale: #93B4FF;
  --nl-blue-lift: #DBE4FF;
  --nl-amber: #F59E0B;
  --nl-ink: #0F172A;
  --nl-head: #111827;
  --nl-body: #1F2937;
  --nl-slate: #334155;
  --nl-muted: #475569;
  --nl-muted-2: #64748B;
  --nl-muted-3: #94A3B8;
  --nl-surface: #F4F6F9;
  --nl-border: #E5E9F0;
  --nl-border-2: #E9EDF3;
  --nl-field: #D5DCE6;
  --nl-shell: 1180px;
  --nl-gutter: 24px;
  --nl-sec-y: 84px;
}

/* ==========================================================================
   1. Divi resets
   ========================================================================== */

.nl-sec.et_pb_section {
  padding: 0;
  background-color: transparent;
}

.nl-sec .et_pb_row {
  width: 100%;
  max-width: var(--nl-shell);
  margin: 0 auto;
  padding: var(--nl-sec-y) var(--nl-gutter);
}

.nl-sec .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
}

/* Divi gives every module `margin-bottom: 2.75%` and injects that rule in
   per-page dynamic CSS that loads after this file, so the reset needs
   !important to land. The prototype spaces everything explicitly, and a
   percentage margin here also breaks flex rows: unmargined last children
   stretch to the tallest sibling and their content drifts off the baseline. */
.nl-sec .et_pb_module,
.nl-header .et_pb_module,
.nl-footer .et_pb_module {
  margin-bottom: 0 !important;
}

/* No :last-child margin reset here. It outranks the component rules that
   deliberately space paragraphs (card copy, intro text) and silently
   collapsed them; the blanket `> p { margin: 0 }` above is enough, and
   component rules later in this file re-add margins where the design has
   them. */
.nl-sec .et_pb_text_inner > p {
  padding-bottom: 0;
}

/* Divi wraps buttons in a block-level wrapper that breaks inline rows. */
.nl-sec .et_pb_button_module_wrapper {
  margin: 0;
  display: inline-block;
  max-width: 100%;
}

.nl-sec .et_pb_svg_inner {
  display: flex;
  line-height: 0;
}

/* Divi groups are plain divs. No blanket width/max-width here: a blanket
   rule outranks the single-class component rules below (icon tiles, trust
   items, hero column, CTA clusters) and stretches them to full width. */

/* wpautop wraps a text module's content in <p>, so every layout rule that
   targets .et_pb_text_inner has to target that paragraph as well. */
.nl-sec .et_pb_text_inner > p,
.nl-footer .et_pb_text_inner > p {
  margin: 0;
}

/* ==========================================================================
   2. Base typography
   ========================================================================== */

body,
.nl-sec,
.nl-sec .et_pb_text_inner,
.nl-header,
.nl-footer {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--nl-body);
  line-height: 1.6;
}

.nl-sec h1,
.nl-sec h2,
.nl-sec h3,
.nl-sec h4,
.nl-header .nl-logo__txt,
.nl-footer .nl-fcol__h {
  font-family: 'Poppins', system-ui, sans-serif;
}

.nl-sec a {
  color: var(--nl-blue);
  text-decoration: none;
}

.nl-sec a:hover {
  color: var(--nl-blue-dark);
}

/* Section headings ------------------------------------------------------- */

.nl-h1 .et_pb_module_header {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 54px;
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: #fff;
  text-wrap: balance;
}

.nl-h2 .et_pb_module_header {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--nl-head);
}

.nl-h2--gap20 .et_pb_module_header { margin-bottom: 20px; }
.nl-h2--gap14 .et_pb_module_header { margin-bottom: 14px; }
.nl-h2--gap12 .et_pb_module_header { margin-bottom: 12px; }
.nl-h2--gap8  .et_pb_module_header { margin-bottom: 8px; }
.nl-h2--light .et_pb_module_header { color: #fff; }
.nl-h2--cta   .et_pb_module_header { font-size: 34px; color: #fff; margin-bottom: 8px; }

.nl-h3 .et_pb_module_header {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--nl-head);
}

.nl-h3--gap7 .et_pb_module_header { margin-bottom: 7px; }
.nl-h3--light .et_pb_module_header { color: #fff; }

.nl-h4 .et_pb_module_header {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 22px;
  color: var(--nl-head);
}

/* Body copy -------------------------------------------------------------- */

.nl-p .et_pb_text_inner,
.nl-p .et_pb_text_inner p {
  font-size: 17px;
  color: var(--nl-muted);
  margin: 0;
  line-height: 1.6;
}

.nl-p--16 .et_pb_text_inner p { margin-bottom: 16px; }
.nl-p--26 .et_pb_text_inner p { margin-bottom: 26px; }
.nl-p--28 .et_pb_text_inner p { margin-bottom: 28px; }

.nl-lead .et_pb_text_inner,
.nl-lead .et_pb_text_inner p {
  font-size: 19px;
  color: #CBD5E1;
  margin: 0 0 32px;
  max-width: 540px;
  line-height: 1.6;
}

.nl-small .et_pb_text_inner,
.nl-small .et_pb_text_inner p {
  font-size: 15px;
  color: var(--nl-muted-2);
  margin: 0;
  line-height: 1.55;
}

.nl-small--16 .et_pb_text_inner p { margin-bottom: 16px; }
.nl-small--dark .et_pb_text_inner p { color: var(--nl-muted-3); }

/* ==========================================================================
   3. Shell + section shapes
   ========================================================================== */

.nl-bg-surface.et_pb_section { background-color: var(--nl-surface); }
.nl-bg-ink.et_pb_section     { background-color: var(--nl-ink); color: #E2E8F0; }
.nl-bg-blue.et_pb_section    { background-color: var(--nl-blue); }
.nl-bg-white.et_pb_section   { background-color: #FFFFFF; }

.nl-sec--tight .et_pb_row { padding-top: 60px; padding-bottom: 60px; }

/* Centered intro block --------------------------------------------------- */

.nl-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 52px;
}

.nl-intro .et_pb_module_header,
.nl-intro .et_pb_text_inner,
.nl-intro .et_pb_text_inner p {
  text-align: center;
}

.nl-intro .nl-p .et_pb_text_inner p { margin: 0; }

/* Grids ------------------------------------------------------------------ */

.nl-grid-2,
.nl-grid-3,
.nl-grid-4 {
  display: grid;
}

.nl-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nl-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }

.nl-grid-3--24 { gap: 24px; }
.nl-grid-4--24 { gap: 24px; }

/* ==========================================================================
   4. Buttons and inline links
   ========================================================================== */

.nl-sec .nl-btn.et_pb_button,
.nl-header .nl-btn.et_pb_button {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  border: none;
  border-radius: 10px;
  line-height: 1.6;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.nl-sec .nl-btn.et_pb_button::after,
.nl-header .nl-btn.et_pb_button::after {
  display: none !important;
}

.nl-btn--primary.et_pb_button {
  background-color: var(--nl-blue);
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.nl-btn--primary.et_pb_button:hover {
  background-color: var(--nl-blue-dark);
}

.nl-btn--amber.et_pb_button {
  background-color: var(--nl-amber);
  color: var(--nl-body) !important;
  font-weight: 700;
  padding: 16px 28px;
}

.nl-btn--amber.et_pb_button:hover {
  background-color: #E08E08;
}

.nl-btn--form.et_pb_button {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

/* Ghost / phone buttons carry an inline icon, so they are anchors inside a
   text module rather than divi/button. */
.nl-ghost a {
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  backdrop-filter: blur(4px);
}

.nl-ghost--cta a {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  padding: 16px 26px;
}

.nl-arrow-link .et_pb_text_inner a {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nl-blue);
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.nl-header.et_pb_section {
  position: sticky;
  top: 0;
  z-index: 500;
  padding: 0;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nl-header .et_pb_row {
  width: 100%;
  max-width: var(--nl-shell);
  margin: 0 auto;
  padding: 18px var(--nl-gutter);
  display: flex;
  align-items: center;
  gap: 40px;
}

.nl-header .et_pb_row::before,
.nl-header .et_pb_row::after {
  display: none;
}

.nl-header .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 40px;
}

.nl-header .et_pb_module { margin-bottom: 0; }

/* Logo lockup */
.nl-logo-mod { flex: 0 0 auto; }

.nl-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff !important;
}

.nl-logo__mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--nl-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  flex: 0 0 36px;
}

.nl-logo__txt {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Nav (divi/menu) */
.nl-nav {
  margin: 0 auto;
  flex: 0 1 auto;
}

.nl-nav .et_pb_menu__wrap { justify-content: center; }
.nl-nav .et_pb_menu__menu { display: block; }
.nl-nav .et_pb_menu__logo-wrap { display: none; }

.nl-nav ul.et-menu {
  display: flex;
  gap: 36px;
  align-items: center;
}

.nl-nav ul.et-menu > li { padding: 0; margin: 0; }

.nl-nav ul.et-menu > li > a {
  color: #E2E8F0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  padding: 0;
  opacity: 1;
}

.nl-nav ul.et-menu > li > a:hover { color: #fff; opacity: 1; }

/* Active page gets the amber underline from the prototype. */
.nl-nav ul.et-menu > li.current-menu-item > a,
.nl-nav ul.et-menu > li.current_page_item > a {
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid var(--nl-amber);
  padding-bottom: 2px;
}

.nl-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
  margin-left: auto;
  width: auto;
}

.nl-hphone a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff !important;
  white-space: nowrap;
}

.nl-header .nl-btn--head.et_pb_button {
  background-color: var(--nl-amber);
  color: var(--nl-body) !important;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 9px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.nl-header .nl-btn--head.et_pb_button:hover { background-color: #E08E08; }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.nl-hero.et_pb_section {
  position: relative;
  background-position: 60% center;
  background-size: cover;
  background-repeat: no-repeat;
}

.nl-hero.et_pb_section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 14, 26, 0.9) 0%, rgba(9, 14, 26, 0.75) 42%, rgba(9, 14, 26, 0.35) 78%, rgba(9, 14, 26, 0.2) 100%);
  pointer-events: none;
}

.nl-hero .et_pb_row {
  position: relative;
  z-index: 1;
  padding: var(--nl-gutter);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nl-hero .et_pb_row::before,
.nl-hero .et_pb_row::after { display: none; }

.nl-hero__inner { max-width: 630px; }

.nl-badge .et_pb_text_inner > span,
.nl-badge .et_pb_text_inner > p > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.22);
  border: 1px solid rgba(147, 180, 255, 0.35);
  color: var(--nl-blue-lift);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 13px;
  border-radius: 999px;
}

.nl-badge .et_pb_text_inner { margin-bottom: 24px; }

.nl-badge .nl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nl-blue-pale);
  display: inline-block;
  flex: 0 0 7px;
}

.nl-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ==========================================================================
   7. Trust bar
   ========================================================================== */

.nl-trust.et_pb_section {
  background-color: var(--nl-surface);
  border-bottom: 1px solid var(--nl-border-2);
}

.nl-trust .et_pb_row { padding: 22px var(--nl-gutter); }

.nl-trust__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  justify-content: center;
}

.nl-trust__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
}

.nl-trust__item .et_pb_text_inner,
.nl-trust__item .et_pb_text_inner p {
  font-weight: 600;
  font-size: 15px;
  color: var(--nl-slate);
  margin: 0;
}

/* ==========================================================================
   8. Split rows (image + copy)
   ========================================================================== */

.nl-split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.nl-split--copy-first { grid-template-columns: 1.05fr 0.95fr; align-items: start; }

.nl-shot .et_pb_image_wrap,
.nl-shot img {
  width: 100%;
  display: block;
}

.nl-shot img {
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: 16px;
}

/* ==========================================================================
   9. Cards
   ========================================================================== */

.nl-card {
  background: #fff;
  border: 1px solid var(--nl-border);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  transition: box-shadow .2s, transform .2s;
}

.nl-card:hover {
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.10);
  transform: translateY(-3px);
}

/* The prototype's card is a single <a>; Divi groups cannot be anchors, so the
   card's "Learn more" link is stretched to cover the whole card instead. */
.nl-card__link .et_pb_text_inner a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.nl-card__link .et_pb_text_inner a {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--nl-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nl-card--flat {
  background: var(--nl-surface);
  border-color: #EDF0F5;
}

.nl-card--flat:hover { box-shadow: none; transform: none; }

/* Icon tiles ------------------------------------------------------------- */

.nl-tile {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--nl-blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex: 0 0 52px;
}

.nl-tile--48 {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--nl-border);
  margin-bottom: 18px;
}

.nl-tile--42 {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid var(--nl-border);
  margin-bottom: 0;
}

/* Numbered process steps ------------------------------------------------- */

.nl-step__n .et_pb_text_inner {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--nl-amber);
  color: var(--nl-body);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.nl-step__n .et_pb_text_inner p { margin: 0; }

/* Featured work ---------------------------------------------------------- */

.nl-work {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--nl-border);
  background: #fff;
  position: relative;
  padding: 0;
}

.nl-work img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.nl-work__body { padding: 22px 24px 26px; }

.nl-pill .et_pb_text_inner > span,
.nl-pill .et_pb_text_inner > p > span {
  display: inline-block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nl-blue);
  background: var(--nl-blue-tint);
  padding: 4px 10px;
  border-radius: 999px;
}

.nl-pill .et_pb_text_inner { margin-bottom: 14px; }

.nl-work__hit a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Featured-work section header (heading left, arrow link right) ---------- */

.nl-work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.nl-work-head__title { max-width: 560px; width: auto; }
.nl-work-head .nl-arrow-link { width: auto; }

/* Reviews ---------------------------------------------------------------- */

.nl-rev-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.nl-rev-badge .et_pb_text_inner > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--nl-border);
  border-radius: 999px;
  padding: 8px 18px;
}

.nl-rev-badge { text-align: center; margin-bottom: 20px; }

.nl-rev-badge .nl-g {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nl-blue-tint);
  color: var(--nl-blue);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nl-rev-badge .nl-lbl { font-weight: 600; font-size: 15px; color: var(--nl-slate); }
.nl-rev-badge .nl-stars { color: var(--nl-amber); font-size: 15px; letter-spacing: 1px; }
.nl-rev-badge .nl-score { font-weight: 700; font-family: 'Poppins', system-ui, sans-serif; font-size: 15px; color: var(--nl-head); }
.nl-rev-badge .nl-count { font-size: 13.5px; color: var(--nl-muted-2); }

.nl-review { display: flex; flex-direction: column; }

.nl-review__stars .et_pb_text_inner {
  color: var(--nl-amber);
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.nl-review__stars .et_pb_text_inner p { margin: 0; }

.nl-review__q .et_pb_text_inner,
.nl-review__q .et_pb_text_inner p {
  font-size: 16px;
  color: var(--nl-slate);
  margin: 0 0 22px;
  line-height: 1.6;
}

.nl-review__q { flex: 1; }

.nl-review__by { display: flex; align-items: center; gap: 12px; }

.nl-avatar .et_pb_text_inner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--nl-blue-tint);
  color: var(--nl-blue);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nl-avatar { flex: 0 0 42px; }
.nl-avatar .et_pb_text_inner p { margin: 0; }

.nl-review__name .et_pb_text_inner {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--nl-head);
}

.nl-review__city .et_pb_text_inner { font-size: 13.5px; color: var(--nl-muted-3); }
.nl-review__name .et_pb_text_inner p,
.nl-review__city .et_pb_text_inner p { margin: 0; }

/* ==========================================================================
   10. CTA band
   ========================================================================== */

.nl-cta .et_pb_row { padding: 60px var(--nl-gutter); }

.nl-cta__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.nl-cta__copy { width: auto; flex: 1 1 420px; }

.nl-cta__copy .nl-p .et_pb_text_inner,
.nl-cta__copy .nl-p .et_pb_text_inner p {
  font-size: 18px;
  color: var(--nl-blue-lift);
  margin: 0;
}

.nl-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  width: auto;
  align-items: center;
}

/* ==========================================================================
   11. Forms (visual match; the prototype does not submit anywhere)
   ========================================================================== */

.nl-form form { display: grid; gap: 16px; }

.nl-form .nl-form__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.nl-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--nl-slate);
}

.nl-form input,
.nl-form textarea,
.nl-form select {
  padding: 12px 14px;
  border: 1px solid var(--nl-field);
  border-radius: 9px;
  font-size: 15px;
  color: var(--nl-body);
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
  width: 100%;
}

.nl-form textarea { resize: vertical; }

.nl-form input:focus,
.nl-form textarea:focus,
.nl-form select:focus {
  outline: 2px solid var(--nl-blue);
  outline-offset: 0;
  border-color: var(--nl-blue);
}

.nl-form button {
  background: var(--nl-blue);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  justify-self: start;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.nl-form button:hover { background: var(--nl-blue-dark); }

/* Business info card ----------------------------------------------------- */

.nl-info {
  background: var(--nl-surface);
  border-radius: 16px;
  padding: 32px;
  align-self: start;
}

.nl-info__list { display: grid; gap: 20px; margin-bottom: 24px; }

.nl-info__row { display: flex; gap: 15px; align-items: flex-start; width: auto; }

.nl-info__label .et_pb_text_inner {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--nl-head);
  margin-bottom: 2px;
}

.nl-info__val .et_pb_text_inner,
.nl-info__val .et_pb_text_inner p,
.nl-info__val .et_pb_text_inner a {
  font-size: 15px;
  color: var(--nl-muted);
  margin: 0;
}

.nl-info__label .et_pb_text_inner p { margin: 0; }

/* Prototype placeholder block, reproduced exactly. */
.nl-ph .et_pb_text_inner {
  background-color: var(--nl-border);
  background-image: repeating-linear-gradient(135deg, rgba(37, 76, 202, 0.05) 0 10px, rgba(37, 76, 202, 0.10) 10px 20px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  aspect-ratio: 16 / 8;
  border-radius: 12px;
}

.nl-ph .et_pb_text_inner span {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--nl-muted-2);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 8px;
  margin: 12px;
  border-radius: 4px;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.nl-footer.et_pb_section {
  background-color: var(--nl-ink);
  color: var(--nl-muted-3);
  padding: 0;
}

.nl-footer .et_pb_row {
  width: 100%;
  max-width: var(--nl-shell);
  margin: 0 auto;
  padding: 64px var(--nl-gutter) 28px;
}

.nl-footer .et_pb_column { width: 100% !important; margin: 0 !important; }
.nl-footer .et_pb_module { margin-bottom: 0; }

.nl-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nl-footer .nl-logo__mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; font-size: 18px; }
.nl-footer .nl-logo__txt { font-size: 19px; }
.nl-footer .nl-logo { margin-bottom: 16px; }

.nl-footer__blurb .et_pb_text_inner,
.nl-footer__blurb .et_pb_text_inner p {
  font-size: 15px;
  margin: 0 0 20px;
  max-width: 300px;
  color: var(--nl-muted-3);
}

.nl-social { display: flex; gap: 12px; width: auto; }

.nl-social a,
.nl-social .et_pb_svg {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nl-social .et_pb_svg_inner { align-items: center; justify-content: center; height: 100%; }

.nl-fcol__h .et_pb_text_inner {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  margin-bottom: 16px;
}

.nl-fcol__h .et_pb_text_inner p { margin: 0; }

.nl-flinks .et_pb_text_inner {
  display: grid;
  gap: 11px;
  font-size: 15px;
}

.nl-flinks .et_pb_text_inner a,
.nl-flinks .et_pb_text_inner span {
  color: var(--nl-muted-3);
  font-size: 15px;
}

.nl-flinks .et_pb_text_inner a:hover { color: #fff; }

.nl-footer__bottom .et_pb_text_inner {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--nl-muted-3);
}

.nl-footer__bottom .et_pb_text_inner p { margin: 0; }
.nl-footer__bottom .nl-legal { display: flex; gap: 22px; }
.nl-footer__bottom a { color: var(--nl-muted-3); }
.nl-footer__bottom a:hover { color: #fff; }

/* Divi's own theme chrome is replaced by the Theme Builder layouts. */
#main-header,
#main-footer,
#et-secondary-nav {
  display: none !important;
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .nl-header .et_pb_row,
  .nl-header .et_pb_column { gap: 24px; }
  .nl-nav ul.et-menu { gap: 24px; }
}

@media (max-width: 980px) {
  :root { --nl-sec-y: 64px; --nl-gutter: 22px; }

  .nl-h1 .et_pb_module_header { font-size: clamp(34px, 6vw, 44px); }
  .nl-h2 .et_pb_module_header,
  .nl-h2--cta .et_pb_module_header { font-size: clamp(27px, 4.2vw, 32px); }

  .nl-grid-3,
  .nl-grid-4 { grid-template-columns: repeat(2, 1fr); }

  .nl-split,
  .nl-split--copy-first { grid-template-columns: 1fr; gap: 32px; }

  .nl-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }

  .nl-hero .et_pb_row { min-height: 520px; }
  .nl-hero__inner { max-width: 100%; }

  .nl-cta__wrap { gap: 24px; }

  /* Header collapses to a compact logo + hamburger bar. */
  .nl-header .et_pb_row,
  .nl-header .et_pb_column {
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
  }

  .nl-nav { margin: 0 0 0 auto; order: 3; flex: 0 0 auto; }
  .nl-nav .et_pb_menu__menu { display: none; }
  .nl-nav .et_mobile_nav_menu { display: block; float: none; margin: 0; }
  .nl-nav .mobile_menu_bar::before { color: #fff; font-size: 30px; }
  .nl-nav .et_mobile_menu {
    background: rgba(15, 23, 42, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 0;
  }
  .nl-nav .et_mobile_menu li a { color: #E2E8F0; font-size: 15px; font-weight: 500; }

  .nl-header__actions { order: 2; gap: 14px; margin-left: auto; }
  .nl-header .nl-btn--head.et_pb_button { padding: 10px 16px; font-size: 14px; }
}

@media (max-width: 780px) {
  .nl-form .nl-form__pair { grid-template-columns: 1fr; }
  .nl-cta__wrap { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .nl-grid-3,
  .nl-grid-4 { grid-template-columns: 1fr; }
  .nl-footer__top { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 480px) {
  :root { --nl-sec-y: 52px; --nl-gutter: 20px; }

  .nl-h1 .et_pb_module_header { font-size: clamp(28px, 8vw, 34px); }
  .nl-h2 .et_pb_module_header,
  .nl-h2--cta .et_pb_module_header { font-size: clamp(24px, 7vw, 28px); }
  .nl-h3 .et_pb_module_header { font-size: 17px; }

  .nl-lead .et_pb_text_inner,
  .nl-lead .et_pb_text_inner p { font-size: 17px; }

  .nl-p .et_pb_text_inner,
  .nl-p .et_pb_text_inner p { font-size: 16px; }

  .nl-hero .et_pb_row { min-height: 470px; }

  /* Buttons centre rather than floating to an edge. */
  .nl-hero__actions,
  .nl-cta__actions { flex-direction: column; align-items: stretch; width: 100%; }

  .nl-hero__actions .et_pb_button_module_wrapper,
  .nl-cta__actions .et_pb_button_module_wrapper { display: block; width: 100%; }

  .nl-hero__actions .et_pb_button,
  .nl-cta__actions .et_pb_button,
  .nl-ghost a { display: flex; justify-content: center; width: 100%; text-align: center; }

  .nl-trust__grid { gap: 12px 20px; }
  .nl-trust__item { flex: 1 1 44%; }

  .nl-card { padding: 22px; }
  .nl-info { padding: 24px; }

  .nl-footer__bottom .et_pb_text_inner { flex-direction: column; gap: 10px; }

  .nl-header .nl-hphone a { font-size: 0; gap: 0; }
  .nl-header .nl-hphone a svg { width: 20px; height: 20px; }
}


/* ==========================================================================
   14. wpautop and Divi-default corrections

   Divi wraps text-module content in <p> via wpautop, and its menu module
   ships an opaque white background. Both are corrected here rather than in
   the rules above so the prototype-derived values stay readable.
   ========================================================================== */

/* Menu module: the prototype header is transparent over the dark bar. */
.nl-nav.et_pb_menu,
.nl-nav .et_pb_menu_inner_container,
.nl-nav .et_pb_menu__wrap,
.nl-nav .et-menu-nav,
.nl-nav nav.et-menu-nav > ul {
  background: transparent !important;
  box-shadow: none;
}

.nl-nav.et_pb_menu { padding: 0; }
.nl-nav .et_pb_menu_inner_container { padding: 0; }

/* Footer link columns are a stacked grid in the prototype. */
.nl-flinks .et_pb_text_inner,
.nl-flinks .et_pb_text_inner > p {
  display: grid;
  gap: 11px;
  justify-items: start;
}

.nl-flinks .et_pb_text_inner > p { margin: 0; }

/* Social row, footer bottom bar and pill/badge wrappers. */
.nl-social .et_pb_text_inner,
.nl-social .et_pb_text_inner > p {
  display: flex;
  gap: 12px;
  margin: 0;
}

.nl-footer__bottom .et_pb_text_inner > p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}

.nl-rev-badge .et_pb_text_inner > p > span:first-child,
.nl-rev-badge .et_pb_text_inner > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--nl-border);
  border-radius: 999px;
  padding: 8px 18px;
}

.nl-ph .et_pb_text_inner > p {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: 100%;
  margin: 0;
}

/* Component widths - restated at .nl-sec depth so they outrank anything
   Divi sets on .et_pb_module inside a section. */
.nl-sec .nl-tile { width: 52px; flex: 0 0 52px; }
.nl-sec .nl-tile--48 { width: 48px; flex: 0 0 48px; }
.nl-sec .nl-tile--42 { width: 42px; flex: 0 0 42px; }
.nl-sec .nl-trust__item { width: auto; }
.nl-sec .nl-hero__inner { max-width: 630px; }
.nl-sec .nl-intro { max-width: 620px; margin: 0 auto 52px; }
.nl-sec .nl-cta__copy { flex: 1 1 420px; width: auto; }
.nl-sec .nl-cta__actions { width: auto; }
.nl-sec .nl-info__row { width: auto; }
.nl-sec .nl-work-head__title { max-width: 560px; width: auto; }
.nl-sec .nl-avatar { flex: 0 0 42px; width: 42px; }
.nl-footer .nl-social { width: auto; }


/* ==========================================================================
   15. Module-level spacing restored

   Section 1 clears Divi's percentage margin on every .et_pb_module with
   !important. Any spacing the prototype puts on an element that Divi happens
   to render as a module (icon tiles, intro blocks, section headers) has to be
   restated at the same weight or it is wiped out with Divi's.
   ========================================================================== */

.nl-sec .nl-tile { margin-bottom: 20px !important; }
.nl-sec .nl-tile--48 { margin-bottom: 18px !important; }
.nl-sec .nl-tile--42 { margin-bottom: 0 !important; }
.nl-sec .nl-intro { margin-bottom: 52px !important; }
.nl-sec .nl-rev-head { margin-bottom: 48px !important; }
.nl-sec .nl-rev-badge { margin-bottom: 20px !important; }
.nl-sec .nl-work-head { margin-bottom: 44px !important; }
.nl-sec .nl-info__list { margin-bottom: 24px !important; }

/* Inline-flex anchors sit inside a wpautop <p>, whose line box adds leading
   on top of the anchor's own height. Making the paragraph a flex container
   removes that extra few pixels so button rows match the prototype. */
.nl-ghost .et_pb_text_inner > p,
.nl-hphone .et_pb_text_inner > p,
.nl-arrow-link .et_pb_text_inner > p,
.nl-card__link .et_pb_text_inner > p,
.nl-work__hit .et_pb_text_inner > p {
  display: flex;
  align-items: center;
  line-height: 1.6;
  margin: 0;
}

/* Header button: pin the line box so the bar is the prototype's 85px. */
.nl-header .nl-btn--head.et_pb_button { line-height: 24px; }


/* ==========================================================================
   16. Line-height and inherited size parity with the prototype

   Divi sets headings to a 1em line-height and modules to a 14px base. The
   prototype's headings and cards inherit the body's 1.6 / 16px, which changes
   every card's height. These restore the prototype's values.
   ========================================================================== */

.nl-sec { font-size: 16px; }

.nl-sec .nl-h3 .et_pb_module_header { line-height: 1.6; }
.nl-sec .nl-h4 .et_pb_module_header { line-height: 1.6; }

.nl-card__link .et_pb_text_inner a,
.nl-arrow-link .et_pb_text_inner a { line-height: 1.6; }

/* Divi pads every heading with a 10px bottom padding from its own late
   dynamic CSS. The prototype has none - all heading spacing is margin - so
   clear it at the same weight as the module-margin reset in section 1. */
.nl-sec .et_pb_module_header,
.nl-header .et_pb_module_header,
.nl-footer .et_pb_module_header {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Divi forces line-height 1.7em on .et_pb_button and reserves height in the
   menu module for its mobile toggle. The prototype's buttons are 1.6 and its
   nav is exactly one 24px line, which is what sets the 85px header. */
.nl-sec .nl-btn.et_pb_button,
.nl-header .nl-btn.et_pb_button {
  line-height: 1.6 !important;
}

.nl-nav .et_pb_menu__wrap { min-height: 0; align-items: center; }
.nl-nav .et_pb_menu_inner_container { min-height: 0; }
.nl-nav ul.et-menu,
.nl-nav ul.et-menu > li > a { line-height: 24px; }

@media (min-width: 981px) {
  .nl-nav .et_mobile_nav_menu { display: none; }
}


/* ==========================================================================
   17. Inner-page banner, stats, team and service area (About / Services /
       Contact). Values lifted from the prototypes' inline styles.
   ========================================================================== */

/* Page banner ------------------------------------------------------------ */

.nl-banner.et_pb_section {
  position: relative;
  background-position: 60% center;
  background-size: cover;
  background-repeat: no-repeat;
}

.nl-banner.et_pb_section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 14, 26, 0.92) 0%, rgba(9, 14, 26, 0.78) 45%, rgba(9, 14, 26, 0.45) 100%);
  pointer-events: none;
}

.nl-banner .et_pb_row {
  position: relative;
  z-index: 1;
  padding: 76px var(--nl-gutter) 72px;
}

.nl-crumb .et_pb_text_inner,
.nl-crumb .et_pb_text_inner > p {
  font-size: 14px;
  color: var(--nl-blue-pale);
  font-weight: 500;
  margin: 0 0 14px;
}

.nl-crumb a { color: var(--nl-blue-pale) !important; }
.nl-crumb .nl-sep { color: var(--nl-muted-2); }
.nl-crumb .nl-here { color: #CBD5E1; }

.nl-h1--page .et_pb_module_header {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #fff;
  max-width: 700px;
}

.nl-banner__lead .et_pb_text_inner,
.nl-banner__lead .et_pb_text_inner > p {
  font-size: 18px;
  color: #CBD5E1;
  margin: 0;
  max-width: 580px;
}

/* Stats band ------------------------------------------------------------- */

.nl-stats .et_pb_row { padding: 60px var(--nl-gutter); }

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

.nl-stat__n .et_pb_text_inner,
.nl-stat__n .et_pb_text_inner > p {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--nl-amber);
  margin: 0 0 10px;
}

.nl-stat__l .et_pb_text_inner,
.nl-stat__l .et_pb_text_inner > p {
  font-size: 15px;
  color: var(--nl-muted-3);
  margin: 0;
}

/* Story split ------------------------------------------------------------ */

.nl-split--story { grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }

.nl-shot--story img {
  aspect-ratio: 4 / 3.4;
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.12);
}

.nl-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.nl-sec .nl-actions { width: auto; }

.nl-btn--outline.et_pb_button {
  background-color: #fff;
  color: var(--nl-body) !important;
  border: 1px solid var(--nl-field) !important;
  padding: 15px 26px;
  box-shadow: none;
}

.nl-btn--outline.et_pb_button:hover { background-color: var(--nl-surface); }

.nl-btn--quote.et_pb_button { box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25); }

/* Team ------------------------------------------------------------------- */

.nl-team {
  background: #fff;
  border: 1px solid var(--nl-border);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
}

/* Neutral on-brand avatar standing in for the prototype's photo slot. */
.nl-team__photo {
  aspect-ratio: 1 / 1;
  background: var(--nl-blue-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nl-team__photo .et_pb_svg_inner { align-items: center; justify-content: center; }
.nl-team__photo svg { opacity: 0.45; }

.nl-team__body { padding: 20px 22px 24px; }

.nl-team__body .nl-h3 .et_pb_module_header { margin-bottom: 3px; }

.nl-team__role .et_pb_text_inner,
.nl-team__role .et_pb_text_inner > p {
  font-size: 14px;
  color: var(--nl-blue);
  font-weight: 600;
  margin: 0 0 10px;
}

/* Service area ----------------------------------------------------------- */

.nl-split--even { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.nl-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.nl-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nl-sec .nl-area { width: auto; }

.nl-area .et_pb_text_inner,
.nl-area .et_pb_text_inner > p {
  font-size: 15px;
  color: var(--nl-slate);
  font-weight: 500;
  margin: 0;
}

.nl-ph--map .et_pb_text_inner { aspect-ratio: 4 / 3; border-radius: 16px; }

@media (max-width: 980px) {
  .nl-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .nl-split--story,
  .nl-split--even { grid-template-columns: 1fr; gap: 32px; }
  .nl-h1--page .et_pb_module_header { font-size: clamp(30px, 5vw, 38px); }
  .nl-banner .et_pb_row { padding: 56px var(--nl-gutter) 52px; }
}

@media (max-width: 480px) {
  .nl-stats__grid { grid-template-columns: 1fr; gap: 22px; }
  .nl-stat__n .et_pb_text_inner > p { font-size: 36px; }
  .nl-areas { grid-template-columns: 1fr; }
  .nl-h1--page .et_pb_module_header { font-size: clamp(26px, 7.5vw, 32px); }
  .nl-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .nl-actions .et_pb_button_module_wrapper { display: block; width: 100%; }
  .nl-actions .et_pb_button { display: flex; justify-content: center; width: 100%; }
}

/* Spacing variants used by the inner pages. */
.nl-h2--gap22 .et_pb_module_header { margin-bottom: 22px; }
.nl-h2--gap16 .et_pb_module_header { margin-bottom: 16px; }
.nl-h2--gap18 .et_pb_module_header { margin-bottom: 18px; }
.nl-p--30 .et_pb_text_inner p { margin-bottom: 30px; }
.nl-p--22 .et_pb_text_inner p { margin-bottom: 22px; }


/* ==========================================================================
   18. Services page: detail rows, extras, ruled steps, FAQ
   ========================================================================== */

.nl-detail-stack { display: grid; gap: 72px; }

.nl-h2--32 .et_pb_module_header { font-size: 32px; margin-bottom: 14px; }

.nl-shot--43 img { aspect-ratio: 4 / 3; }

/* Feature checklists ----------------------------------------------------- */

.nl-feats { display: grid; gap: 10px; margin-bottom: 26px !important; }

.nl-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.nl-sec .nl-feat { width: auto; }

.nl-feat .et_pb_svg { flex: 0 0 18px; }

.nl-feat .et_pb_text_inner,
.nl-feat .et_pb_text_inner > p {
  font-size: 15px;
  color: var(--nl-slate);
  margin: 0;
}

/* Tinted 48px tile used by the Also-available cards. */
.nl-tile--tint {
  background: var(--nl-blue-tint);
  border: none;
}

/* Ruled process steps ---------------------------------------------------- */

.nl-step--rule {
  border-top: 3px solid var(--nl-blue);
  padding-top: 22px;
}

.nl-step__label .et_pb_text_inner,
.nl-step__label .et_pb_text_inner > p {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--nl-blue);
  margin: 0 0 10px;
}

/* FAQ -------------------------------------------------------------------- */

.nl-shell--narrow .et_pb_row { max-width: 860px; }

.nl-faq-head .et_pb_module_header {
  text-align: center;
  margin-bottom: 40px;
}

.nl-faq-list { display: grid; gap: 14px; }

.nl-faq {
  background: #fff;
  border: 1px solid var(--nl-border);
  border-radius: 12px;
  padding: 24px 28px;
}

.nl-faq .nl-small .et_pb_text_inner,
.nl-faq .nl-small .et_pb_text_inner > p { line-height: 1.6; }

@media (max-width: 980px) {
  .nl-detail-stack { gap: 48px; }
  .nl-grid-4 .nl-step--rule { padding-top: 18px; }
}


/* ==========================================================================
   19. Contact page: quick cards, wide form, side cards, area chips
   ========================================================================== */

.nl-quick.et_pb_section {
  background-color: var(--nl-surface);
  border-bottom: 1px solid var(--nl-border-2);
}

.nl-quick .et_pb_row { padding: 40px var(--nl-gutter); }

.nl-qcard {
  background: #fff;
  border: 1px solid var(--nl-border);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.nl-qcard__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  background: var(--nl-blue-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0 !important;
}

.nl-sec .nl-qcard__icon { width: 48px; flex: 0 0 48px; }
.nl-qcard__icon .et_pb_svg_inner { align-items: center; justify-content: center; }

.nl-qcard__t .et_pb_text_inner,
.nl-qcard__t .et_pb_text_inner > p {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--nl-head);
  margin: 0;
}

.nl-qcard__t a { color: var(--nl-head) !important; }

.nl-qcard__s .et_pb_text_inner,
.nl-qcard__s .et_pb_text_inner > p {
  font-size: 15px;
  color: var(--nl-muted-2);
  margin: 0;
}

/* Form + side column ----------------------------------------------------- */

.nl-split--form { grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }

.nl-form--contact input,
.nl-form--contact textarea,
.nl-form--contact select { padding: 13px 14px; }

.nl-form--contact button { padding: 15px 30px; }

.nl-form__submit {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.nl-form__note { font-size: 14px; color: var(--nl-muted-2); }

.nl-side { display: grid; gap: 22px; }

.nl-info--tight .nl-h4 .et_pb_module_header { margin-bottom: 18px; }
.nl-info .nl-info__list--last { margin-bottom: 0 !important; }

.nl-hours { display: grid; gap: 12px; }

.nl-hour {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nl-border);
}

.nl-hour .et_pb_text_inner,
.nl-hour .et_pb_text_inner > p { font-size: 15px; margin: 0; }

.nl-hour__d .et_pb_text_inner > p { color: var(--nl-slate); font-weight: 600; }
.nl-hour__t .et_pb_text_inner > p { color: var(--nl-muted-2); }

.nl-ph--wide .et_pb_text_inner { aspect-ratio: 16 / 10; border-radius: 16px; }

/* Communities strip ------------------------------------------------------ */

.nl-strip .et_pb_row { text-align: center; }
.nl-strip .et_pb_module_header { text-align: center; }
.nl-strip .nl-p .et_pb_text_inner,
.nl-strip .nl-p .et_pb_text_inner > p { text-align: center; margin: 0 0 32px; }

.nl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.nl-chips .et_pb_text_inner,
.nl-chips .et_pb_text_inner > p {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
}

.nl-chips .nl-chip {
  background: #fff;
  border: 1px solid var(--nl-border);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--nl-slate);
}

/* Single amber phone action in the Contact CTA band. */
.nl-amber-link a {
  background: var(--nl-amber);
  color: var(--nl-body) !important;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nl-amber-link a:hover { background: #E08E08; }

@media (max-width: 980px) {
  .nl-split--form { grid-template-columns: 1fr; gap: 40px; }
  .nl-grid-3.nl-quick__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .nl-qcard { padding: 20px; gap: 14px; }
  .nl-form__submit { flex-direction: column; align-items: stretch; gap: 12px; }
  .nl-form--contact button { width: 100%; }
}

/* Form submit spans the column on phones rather than sitting against the
   left edge, matching how the hero and CTA buttons behave at this width. */
@media (max-width: 480px) {
  .nl-form button {
    justify-self: stretch;
    width: 100%;
    text-align: center;
  }
}

/* Divi anchors the open mobile menu to the hamburger itself, which in this
   header is a ~32px flex item, so the dropdown came out 32px wide. Anchor it
   to the header row instead so it spans the bar and sits above the hero. */
@media (max-width: 980px) {
  .nl-header .et_pb_column { position: relative; }

  /* These three are position:relative in Divi and become the dropdown's
     offset parent; the menu module is only as wide as the hamburger, so the
     dropdown inherited its 32px box. Make the column the offset parent. */
  .nl-nav.et_pb_menu,
  .nl-nav .et_pb_menu_inner_container,
  .nl-nav .et_mobile_nav_menu { position: static; }

  .nl-nav .et_mobile_menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    z-index: 600;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 18px 40px rgba(9, 14, 26, 0.35);
  }

  .nl-nav .et_mobile_menu li a {
    padding: 13px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .nl-nav .et_mobile_menu li:last-child a { border-bottom: none; }

  .nl-nav .et_mobile_menu li.current-menu-item > a { color: #fff; font-weight: 600; }
}

/* Studio credit sitting beside the copyright in the footer bottom bar.
   A middot separates it on wide screens; on phones the bottom bar is already
   a column, so the credit drops to its own line instead. */
.nl-footer__bottom .nl-credit::before {
  content: '·';
  margin: 0 8px;
  opacity: 0.55;
}

@media (max-width: 480px) {
  .nl-footer__bottom .nl-credit { display: block; }
  .nl-footer__bottom .nl-credit::before { content: none; margin: 0; }
}