/* ============================================================================
   NEW LANDING — HGR Graham Partners LLP
   Standalone conversion landing page. Everything here is namespaced under
   `.nl-landing` so it cannot leak into or collide with the rest of the theme.

   Conventions (per design brief):
   - Colours:  --nl-red #A72035 · --nl-dark #2A2C33 · --nl-text #3D464D · #FFF
   - Fonts:    Lora (headings) · Nunito (body)
   - Spacing:  utility classes mb-10 = margin-bottom:10px, gap-20, pt-30, etc.
               Use these in markup wherever possible; reach for component CSS
               only for structural / non-spacing rules.
   ========================================================================== */

.nl-landing {
  --nl-red:    #a72035;
  --nl-dark:   #2a2c33;
  --nl-text:   #3d464d;
  --nl-muted:  #687279;
  --nl-line:   #e6e7ea;
  --nl-bg:     #f7f7f8;
  --nl-white:  #ffffff;
  --semi-black: #3D464DB2;

  --nl-lora:   'Lora', serif;
  --nl-sans:   'Nunito', sans-serif;

  font-family: var(--nl-sans);
  color: var(--nl-text);
  font-size: 18px;
  line-height: 1.4;
  background: var(--nl-white);
}
.nl-landing *,
.nl-landing *::before,
.nl-landing *::after { box-sizing: border-box; }

.nl-landing h1, .nl-landing h2, .nl-landing h3 {
  font-family: var(--nl-lora);
  font-weight: 400;
     color: #2A2C33;
  margin: 0;
  line-height: 1.3;
}
.nl-landing p { /*margin: 0;*/ }
.nl-landing img { max-width: 100%; height: auto; display: block; }
.nl-landing a { color: inherit; text-decoration: none; }
.nl-landing ul { margin: 0; padding: 0; list-style: none; }

/* Layout helpers (mirror the theme container width so it lines up site-wide) */
.nl-container { width: 100%; max-width: 1450px; margin: 0 auto; padding: 0 20px; }
.nl-row { display: flex; flex-wrap: wrap; }

/* Brand colour helpers used inline in two-tone headings */
.nl-text-red  { color: var(--nl-red); }
.nl-text-grey { color: var(--nl-muted); }

/* Inline bullet dot used between meta items */
.nl-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .5; margin: 0 4px; vertical-align: middle; }

/* ----------------------------------------------------------------------------
   UTILITY CLASSES — spacing scale (px). Namespaced so they never collide.
   margin: m{t,b,l,r}-N · padding: p{t,b,l,r}-N · gap-N
   -------------------------------------------------------------------------- */
.nl-landing .mb-0  { margin-bottom: 0; }
.nl-landing .mb-5  { margin-bottom: 5px; }
.nl-landing .mb-10 { margin-bottom: 10px; }
.nl-landing .mb-15 { margin-bottom: 15px; }
.nl-landing .mb-20 { margin-bottom: 20px; }
.nl-landing .mb-25 { margin-bottom: 25px; }
.nl-landing .mb-30 { margin-bottom: 30px; }
.nl-landing .mb-40 { margin-bottom: 40px; }
.nl-landing .mb-50 { margin-bottom: 50px; }

.nl-landing .mt-0  { margin-top: 0; }
.nl-landing .mt-10 { margin-top: 10px; }
.nl-landing .mt-15 { margin-top: 15px; }
.nl-landing .mt-20 { margin-top: 20px; }
.nl-landing .mt-30 { margin-top: 30px; }
.nl-landing .mt-40 { margin-top: 40px; }

.nl-landing .pt-30 { padding-top: 30px; }
.nl-landing .pb-30 { padding-bottom: 30px; }

.nl-landing .gap-10 { gap: 10px; }
.nl-landing .gap-15 { gap: 15px; }
.nl-landing .gap-20 { gap: 20px; }
.nl-landing .gap-30 { gap: 30px; }


/* ----------------------------------------------------------------------------
   TYPOGRAPHY UTILITIES — the single source of truth for type.
   Atomic-first: every font-family / size / weight / line-height / alignment
   lives HERE and is applied as a class on the element. Component CSS rules
   (.nl-card__title etc.) must NOT redeclare these — they keep only structure
   (layout, position) and colour. fs-* values follow the px in the name.
   Responsive headings use base + breakpoint variants (md: <=1100, sm: <=575).
   -------------------------------------------------------------------------- */

/* font-size (px in name) */
.fs-11{font-size: 11px;}
.fs-12{font-size: 12px;}
.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-16{font-size: 16px;}
.fs-17{font-size: 17px;}
.fs-18{font-size: 18px;}
.fs-20{font-size: 20px;}
.fs-24{font-size: 24px;}
.fs-26{font-size: 26px;}
.fs-28{font-size: 28px;}
.fs-30{font-size: 30px;}
.fs-36{font-size: 36px;}
.fs-40{font-size: 40px;}
.fs-42{font-size: 42px;}
.fs-72{font-size: 72px;}

/* font-weight */
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}

/* font-family */
.nunito{font-family: var(--nl-sans);}
.lora{font-family: var(--nl-lora);}

/* line-height (digits after lh- are the decimal, e.g. lh-118 = 1.18) */
.lh-1{line-height: 1 !important;}
.lh-105{line-height: 1.05;}
.lh-12{line-height: 1.2;}
.lh-118{line-height: 1.18;}
.lh-125{line-height: 1.25;}
.lh-13{line-height: 1.3;}
.lh-135{line-height: 1.35;}
.lh-14{line-height: 1.4;}
.lh-15{line-height: 1.5;}
.lh-155{line-height: 1.55;}
.lh-16{line-height: 1.6;}

/* text-align */
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}

/* font-style */
.italic{font-style: italic;}

/* uppercase + tracking (eyebrows, step pills) */
.upper{text-transform: uppercase;}
.capitalize{text-transform:capitalize}
.ls-06{letter-spacing: .06em;}
.ls-08{letter-spacing: .08em;}


/*colors*/
.white{color:var(--nl-white)}
.semi-white{color: var(--nl-bg);}
.red{color: var(--nl-red);}
.dark{ color: var(--nl-dark);}
.semi-dark{color: var(--nl-text);}
.nl-text-semi{    color: #FFFFFFCC;}


/*layout*/
.flex {display: flex;}
.align-center {align-items: center;}
.gap-15{gap: 15px;}
/* ---- Responsive font-size variants ----------------------------------------
   Base fs-* (above) is the desktop value; these shrink at breakpoints so the
   six resizing headings keep their mobile scaling now that size lives in the
   markup. Placed AFTER the base utilities; the cascade picks the matching
   media query. Specificity is bumped via :where(.nl-landing) so they reliably
   override a base fs-* sitting on the same element without raising specificity.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :where(.nl-landing) .md\:fs-40{font-size: 40px;}
}
@media (max-width: 991px) {
  :where(.nl-landing) .lg\:fs-30{font-size: 30px;}   /* section-head, foot title */
  :where(.nl-landing) .lg\:fs-32{font-size: 32px;}   /* situation, foot title */
}
@media (max-width: 767px) {
  :where(.nl-landing) .sm\:fs-28{font-size: 28px;}   /* foot title (mobile heading) */
}
@media (max-width: 575px) {
   :where(.nl-landing) .xs\:fs-12{font-size: 12px;}   /* hero subtitle */
  :where(.nl-landing) .xs\:fs-16{font-size: 16px;}   /* hero subtitle */
  :where(.nl-landing) .xs\:fs-18{font-size: 18px;}   /* points title */
  :where(.nl-landing) .xs\:fs-22{font-size: 22px;}   /* form-panel title */

  :where(.nl-landing) .xs\:fs-26{font-size: 26px;}   /* situation title */
   :where(.nl-landing) .xs\:fs-28{font-size: 28px;}   /* hero title, stat num */
  :where(.nl-landing) .xs\:fs-30{font-size: 30px;}   /* hero title, stat num */
  :where(.nl-landing) .xs\:fs-48{font-size: 48px;}   /* thank-you title */
}

/* ----------------------------------------------------------------------------
   REUSABLE BUTTON — .nl-btn (+ modifiers). Consumed by every section + modal.
   --red: solid crimson · --outline: bordered (used in the header).
   -------------------------------------------------------------------------- */
.nl-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 16px 30px; border: 1px solid transparent;
  background: var(--nl-red); color: var(--nl-white);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  /* type comes from utilities on each button: lora fs-18 lh-1 (+ fw-500 where bolder) */
}
.nl-btn:hover  { background: var(--nl-dark); color: var(--nl-white); }
.nl-btn__arrow { font-size: 18px; line-height: 1; }

.nl-btn--red     { background: var(--nl-red); color: var(--nl-white) !important; }
.nl-btn--outline { background: transparent; color: var(--nl-red); border-color: var(--nl-red); }
.nl-btn--outline:hover { background: var(--nl-red); color: var(--nl-white); }

/* ============================================================================
   SECTION 01 — HEADER
   ========================================================================== */
.nl-header { background: var(--nl-white); border-bottom: 1px solid var(--nl-line); }
.nl-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; padding: 18px 20px; min-height: 84px;max-width: 1660px;
}
.nl-header__logo img { width: auto; max-height: 56px; }

.nl-header__nav {
  display: flex; align-items: center;  flex: 1; justify-content: flex-end;    gap: 6%;
}
.nl-offices { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; min-width: 70%;
    justify-content: space-between;}
.nl-offices__item { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.nl-offices__city { color: var(--nl-red); }
.nl-offices__phone {
  color: var(--nl-text);
  display: inline-flex; align-items: center; gap: 6px;
}
.nl-offices__phone i { font-size: 11px;
    color: var(--nl-dark);
    transform: rotate(95deg); }
.nl-offices__phone:hover { color: var(--nl-red); }

/* Mobile hamburger — hidden on desktop */
/* Each icon SVG is self-contained (its own dark background + white glyph), so
   the button itself carries NO background and NO padding — the SVG fills it. */
.nl-header__toggle { display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 0; line-height: 0; }
.nl-header__toggle-icon { width: 100%; height: 100%; }
/* Exactly one icon shows, driven by the button's aria-expanded state (JS flips
   it on open/close). Each rule is scoped to the button so it always outranks
   the generic `.nl-landing img { display:block }` rule. */
.nl-header__toggle[aria-expanded="false"] .nl-header__toggle-icon--open  { display: block; }
.nl-header__toggle[aria-expanded="false"] .nl-header__toggle-icon--close { display: none; }
.nl-header__toggle[aria-expanded="true"]  .nl-header__toggle-icon--open  { display: none; }
.nl-header__toggle[aria-expanded="true"]  .nl-header__toggle-icon--close { display: block; }

/* ============================================================================
   SECTION 02 — HERO
   ========================================================================== */
.nl-hero { position: relative; overflow: hidden; }
.nl-hero__bg { position: absolute; inset: 0; z-index: 0; }
.nl-hero__bg img { width: 100%; height: 100%; object-fit: cover; }


.nl-hero__inner { position: relative; z-index: 1; padding: 90px 20px 110px; }
.nl-hero__grid { align-items: flex-start; gap: 30px; }
.nl-hero__left  { flex: 1 1 460px; max-width: 540px; }
.nl-hero__right { flex: 1 1 440px; display: flex; justify-content: flex-end; }

/* Rating row (reused in modal) */
.nl-rating { display: inline-flex; align-items: center; gap: 12px; }
.nl-rating__avatars { display: inline-flex; }
.nl-rating__avatars img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--nl-white); margin-left: -10px; background: var(--nl-bg);
}
.nl-rating__avatars img:first-child { margin-left: 0; }
.nl-rating__meta { display: flex; flex-direction: column; line-height: 1.2; }
.nl-rating__top { display: inline-flex; align-items: center; gap: 8px; }
.nl-rating__top strong { color: var(--nl-dark); }
.nl-rating__stars { color: #e8b500; letter-spacing: 1px; }
.nl-rating__label { color: var(--nl-muted); }

.nl-hero__title { color: var(--nl-dark); max-width: 540px; }
.nl-hero__subtitle { color: var(--nl-text); max-width: 480px; }

/* Form panel (reused: hero right + section 07 + modal share .nl-form-panel look) */
.nl-form-panel {
  width: 100%; max-width: 570px; background: var(--nl-white);
  box-shadow: 0 24px 60px rgba(42,44,51,.18); border: 1px solid var(--nl-line);
}
.nl-form-panel__head { padding: 28px 28px 0; }




.ribbon {
  --f: 1em; /* control the folded part*/
  --r: .8em; /* control the ribbon shape */

  position: relative;
  bottom: -2px;
  right: calc(-1*var(--f));
  border-top: var(--f) solid #0005;
  border-left: var(--r) solid #0000;
  /* Left arrowhead removed — left edge runs straight (0 var(--f) → 0 100%).
     Right side is unchanged from the original. */
  clip-path:
    polygon(0 100%,100% 100%,100% var(--f),calc(100% - var(--f)) 0,
      calc(100% - var(--f)) var(--f),0 var(--f));
}

.nl-form-panel__meta {
  display: flex; flex-wrap: wrap; align-items: center;justify-content: center; gap: 4px;
  color: var(--nl-dark); margin-top: 20px;margin-bottom: 20px;
}
/* Meta separators are small red SQUARES in this context (not the grey dot). */
.nl-form-panel__meta .nl-dot,
.nl-modal__meta .nl-dot {
  width: 6px; height: 6px; border-radius: 0; background: var(--nl-red); opacity: 1; margin: 0 6px;
}
/* Body has side padding; the dark submit bar below breaks out to full width. */
.nl-form-panel__body { padding: 0 30px; }
.nl-form-panel__assure-img img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; background: #444;margin-left: -14px;
}

/* ----------------------------------------------------------------------------
   CF7 FORM (inside .nl-form-panel — hero + footer share this).
   The real CF7 markup uses .baa-form-group wrappers (one field each) and
   .baa-fw-group for full-width fields. Styled to the white-panel mockup:
   light inputs, grey border, dark text, red-square meta dots, dark submit bar.
   Scoped to .nl-form-panel so it never touches the theme's other CF7 forms.
   -------------------------------------------------------------------------- */
.nl-form-panel .wpcf7 { margin: 0; }
.nl-form-panel .wpcf7-form { display: flex; flex-wrap: wrap; gap: 10px;     position: relative;}
.nl-form-panel .wpcf7-form br { display: none; }
.nl-form-panel .screen-reader-response,
.nl-form-panel label.sr-only { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nl-form-panel .hidden-fields-container { display: none; }

/* Field groups: 2-up by default (First|Last, Phone|Email). */
.nl-form-panel .baa-form-group { flex: 1 1 calc(50% - 7px); min-width: 0; }
.nl-foot__inner .nl-form-panel .baa-form-group { flex: 1 1 calc(100% - 7px); min-width: 0; }
.nl-foot__inner  .nl-form-panel .baa-form-group.baa-fw-group:has(select) {
    flex: 1 1 calc(100% - 7px);
}



.nl-form-panel .baa-form-group p { margin: 0; }
/* .baa-fw-group is full-width EXCEPT the two <select> groups (Office + Service),
   which sit side-by-side per the mockup. Target by content so it is order-proof:
   a fw-group that holds a textarea stays full-width; one with a select goes 2-up. */
.nl-form-panel .baa-form-group.baa-fw-group { flex: 1 1 100%; }
.nl-form-panel .baa-form-group.baa-fw-group:has(select) { flex: 1 1 calc(50% - 7px); }

/* Inputs / selects / textarea */
.nl-form-panel .wpcf7-form-control-wrap { display: block; }
.nl-form-panel input.wpcf7-form-control,
.nl-form-panel select.wpcf7-form-control,
.nl-form-panel textarea.wpcf7-form-control {
  width: 100%; display: block; font-family: var(--nl-sans); font-size: 16px;
  color: var(--nl-dark); background: var(--nl-white);
  border: 1px solid var(--nl-line); border-radius: 0;
  padding: 16px 18px; line-height: 1.2; transition: border-color .18s ease;
  -webkit-appearance: none; appearance: none;
  font-weight: 500;;
}

.nl-form-panel select.wpcf7-form-control,
.nl-form-panel select.wpcf7-form-control option {
  color: var(--semi-black);
  background-color: var(--nl-white);
}
/* greyed placeholder when the empty first option is selected */
.nl-form-panel select.wpcf7-form-control:has(option[value=""]:checked) {
  color: var(--nl-muted);
}
.nl-form-panel textarea.wpcf7-form-control { min-height: 80px;max-height: 100px; resize: vertical; }
.nl-form-panel .wpcf7-form-control::placeholder { color: var(--nl-muted); opacity: 1; }
.nl-form-panel .wpcf7-form-control:hover { border-color: #c7cad0; }
.nl-form-panel .wpcf7-form-control:focus { outline: none; border-color: var(--nl-red); }

/* Native select chevron (appearance is reset above) */
.nl-form-panel select.wpcf7-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233d464d' d='M6 8 0 2 1.4.6 6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px; cursor: pointer;
}

/* ---- Submit bar — the DARK bar holding Submit (left) + assure (right) ----
   .baa-form-actions is the bar. It holds CF7's <p> (hidden Service Name helper
   + the Submit) and the .nl-form-panel__assure block (avatars + note), which
   CF7 wraps in its own <p>/<br>. We break the bar out to the full panel width
   (the body has 30px side padding) and lay the two halves out as a flex row. */
.nl-form-panel .baa-form-actions {
flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--nl-text);
    margin: -10px -33px 0 -50px;
    padding: 16px 24px 16px 16px;
}

.nl-form-panel .baa-form-actions > p { margin: 0; display: flex; align-items: center; flex: 0 0 auto; }
/* Hide the "Service Name" helper text field (kept so the form still posts). */
.nl-form-panel .wpcf7-form-control-wrap[data-name="baa-service-name"],
.nl-form-panel #baac-service-name { display: none !important; }

.nl-form-panel input.wpcf7-submit {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--nl-lora); font-size: 18px; line-height: 1; white-space: nowrap;
  background-color: var(--nl-red); color: var(--nl-white); border: 0; border-radius: 0;
  /* Arrow (↗) from submit.svg, sat at the right edge. Extra right padding makes
     room so it doesn't overlap the label. An <input> can't hold a child <img>
     or ::after, so the icon is a background-image. */
  background-image: url("images/landing/submit.svg");
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: 18px 18px;
  padding: 16px 52px 16px 34px;
  transition: background-color .18s ease; -webkit-appearance: none; appearance: none;
}
.nl-form-panel input.wpcf7-submit:hover { background-color: #444; }
.nl-form-panel .wpcf7-spinner { margin: 0 0 0 12px; }

/* Assure (avatars + note) — now a child of .baa-form-actions, on the right.
   Neutralise CF7's injected <p>/<br> wrappers. */
.nl-form-panel .baa-form-actions .nl-form-panel__assure {
  flex: 1 1 auto; display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.35;
}
.nl-form-panel .baa-form-actions .nl-form-panel__assure p { margin: 0; display: flex; align-items: center; gap: 12px; }
.nl-form-panel__assure-img { flex: 0 0 auto; display: inline-flex; }
/*.nl-form-panel__assure-text { display: inline-block; }*/
.hide-mobile{display: inline-block;}
 .hide-desktop{ display: none;}

/* Validation + response states */
.nl-form-panel .wpcf7-not-valid { border-color: var(--nl-red) !important; }
.nl-form-panel .wpcf7-not-valid-tip { font-family: var(--nl-sans); font-size: 12px; color: var(--nl-red); margin-top: 4px; }
.nl-form-panel .wpcf7-response-output { flex: 1 1 100%; margin: 4px 0 0 !important; padding: 10px 14px !important;
  font-family: var(--nl-sans); font-size: 13px; border-width: 1px; }

/* ----------------------------------------------------------------------------
   MODAL FORM — reuse the .nl-form-panel form look inside .nl-modal__body.
   The modal renders the SAME CF7 form (id 54f07da) but is NOT wrapped in
   .nl-form-panel, so none of the rules above reach it. We re-scope the
   field-level rules to .nl-modal__body so inputs/selects/textarea/groups +
   submit match the hero exactly. (Card chrome — white box / shadow / max-width —
   is intentionally NOT copied; the modal provides its own container.)
   -------------------------------------------------------------------------- */
.nl-modal__body .wpcf7 { margin: 0; }
.nl-modal__body .wpcf7-form { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.nl-modal__body .wpcf7-form br { display: none; }
.nl-modal__body .screen-reader-response,
.nl-modal__body label.sr-only { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nl-modal__body .hidden-fields-container { display: none; }

/* Field groups: 2-up by default; full-width for textarea, 2-up for selects. */
.nl-modal__body .baa-form-group { flex: 1 1 calc(50% - 7px); min-width: 0; }
.nl-modal__body .baa-form-group p { margin: 0; }
.nl-modal__body .baa-form-group.baa-fw-group { flex: 1 1 100%; }
.nl-modal__body .baa-form-group.baa-fw-group:has(select) { flex: 1 1 calc(50% - 7px); }

/* Inputs / selects / textarea */
.nl-modal__body .wpcf7-form-control-wrap { display: block; }
.nl-modal__body input.wpcf7-form-control,
.nl-modal__body select.wpcf7-form-control,
.nl-modal__body textarea.wpcf7-form-control {
  width: 100%; display: block; font-family: var(--nl-sans); font-size: 16px;
 color: var(--semi-black);background-color: var(--nl-white);
  border: 1px solid var(--nl-line); border-radius: 0;
  padding: 16px 18px; line-height: 1.2; transition: border-color .18s ease;
  -webkit-appearance: none; appearance: none;
}
.nl-modal__body textarea.wpcf7-form-control { min-height: 80px; max-height: 100px; resize: vertical; }
.nl-modal__body .wpcf7-form-control::placeholder { color: var(--nl-muted); opacity: 1; }
.nl-modal__body .wpcf7-form-control:hover { border-color: #c7cad0; }
.nl-modal__body .wpcf7-form-control:focus { outline: none; border-color: var(--nl-red); }

/* Native select chevron (appearance reset above) */
.nl-modal__body select.wpcf7-form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233d464d' d='M6 8 0 2 1.4.6 6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px; cursor: pointer;
}

/* Hide the "Service Name" helper field (kept so the form still posts). */
.nl-modal__body .wpcf7-form-control-wrap[data-name="baa-service-name"],
.nl-modal__body #baac-service-name { display: none !important; }

/* Submit bar — dark row, Submit (left) + assure (right). Modal version uses a
   plain full-width bar (no negative-margin breakout — the modal body has its
   own padding, not the panel's). */
.nl-modal__body .baa-form-actions {
  flex: 1 1 100%; display: flex; align-items: center; gap: 18px;
  background: var(--nl-text); margin: 6px 0 0; padding: 14px 18px;
}
.nl-modal__body .baa-form-actions > p { margin: 0; display: flex; align-items: center; flex: 0 0 auto; }

.nl-modal__body input.wpcf7-submit {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--nl-lora); font-size: 18px; line-height: 1; white-space: nowrap;
  background-color: var(--nl-red); color: var(--nl-white); border: 0; border-radius: 0;
  background-image: url("images/landing/submit.svg");
  background-repeat: no-repeat; background-position: right 22px center; background-size: 18px 18px;
  padding: 16px 52px 16px 34px;
  transition: background-color .18s ease; -webkit-appearance: none; appearance: none;
}
.nl-modal__body input.wpcf7-submit:hover { background-color: #444; }
.nl-modal__body .wpcf7-spinner { margin: 0 0 0 12px; }

.nl-modal__body .baa-form-actions .nl-form-panel__assure {
  flex: 1 1 auto; display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.35;
}
.nl-modal__body .baa-form-actions .nl-form-panel__assure p { margin: 0; display: flex; align-items: center; gap: 12px; }

/* Validation + response states */
.nl-modal__body .wpcf7-not-valid { border-color: var(--nl-red) !important; }
.nl-modal__body .wpcf7-not-valid-tip { font-family: var(--nl-sans); font-size: 12px; color: var(--nl-red); margin-top: 4px; }
.nl-modal__body .wpcf7-response-output { flex: 1 1 100%; margin: 4px 0 0 !important; padding: 10px 14px !important;
  font-family: var(--nl-sans); font-size: 13px; border-width: 1px; }

/* ============================================================================
   SECTION 03 — IS THIS YOUR SITUATION?
   ========================================================================== */
.nl-situation { padding: 70px 0; position: relative;   }
.nl-situation__bg { position: absolute; inset: 0; z-index: 0;    right: 0; margin-left: auto;}
.nl-situation__grid { gap: 50px; align-items: stretch; }
.nl-situation__left  { flex: 1 1 520px; }
.nl-situation__right { flex: 1.3 1 420px; display: flex;margin-top: 60px; position: relative;}

/* Eyebrow (reused across sections) — type comes from utilities:
   nunito fw-700 fs-13 upper ls-08 */
.nl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
}
.nl-eyebrow__dot { width: 9px; height: 9px; background: var(--nl-red); display: inline-block; }

.nl-situation__title { }
.nl-situation__title .nl-text-grey{display: block;}
.nl-situation__intro { color: var(--nl-text); max-width: 690px; }

/* 3 icon/title/subtext rows */
.nl-points { display: flex; flex-direction: column; gap: 10px; }
.nl-points__item { display: flex;flex-direction: column; gap: 10px; align-items: flex-start;
  border-top: 1px solid var(--nl-line); padding-top: 20px;}
.nl-points__item:first-child { border-top: 0; padding-top: 0; }
.nl-points__head { display: flex; align-items: flex-start; gap: 18px; }
.nl-points__icon {
  flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--nl-red); font-size: 20px;
}
.nl-points__title { }
.nl-points__text { color: var(--nl-muted); margin: 0; }

/* RIGHT — split media card (60/40 stacked: photo+quote over crimson stats) */
.nl-mediacard {
  margin: 0; width: 100%; display: grid;
    grid-template-columns: 1fr ;
  overflow: hidden;  align-items: flex-start;
}
.nl-mediacard-content{
  display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}
.nl-mediacard__top { position: relative; flex: 1 1 auto; min-height: 320px;height: 100%;
  display: flex; align-items: flex-start; width: calc(100% + 130px); margin-top: 50px; margin-left: 0px;clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 2.5%);padding-top: 1rem;
 }
.nl-mediacard__photo { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;   filter: none; z-index: 2;top: auto;box-shadow: 0 20px 50px rgba(42, 44, 51, .16);}
.nl-mediacard__top::after { content: ""; position: absolute; inset: 0; z-index: 1;
     background: #2A2C33; }
.nl-mediacard__quote { position: relative; z-index: 2; padding: 28px; color: var(--nl-white); }
.nl-mediacard__note { margin-bottom: 18px; }
.nl-mediacard__person { display: flex; align-items: center; gap: 12px; }
.nl-mediacard__avatar img { width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,.5); background: #555; }
.nl-mediacard__person-meta { display: flex; flex-direction: column; line-height: 1.25; }
.nl-mediacard__name { }
.nl-mediacard__role { color: rgba(255,255,255,.7); }

.nl-mediacard__stats { background: var(--nl-red); color: var(--nl-white);
  padding: 28px; display: flex; flex-direction: column; gap: 20px; height: 100%; padding-left: 180px;
    width: 380px; }
.nl-stat { display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 18px; }
.nl-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.nl-stat__num { }
.nl-stat__label { color: rgba(255,255,255,.85); }

/* ============================================================================
   CONTACT MODAL (reusable)
   ========================================================================== */
.nl-modal { position: fixed; inset: 0; z-index: 9999; display: flex;
  align-items: center; justify-content: center; padding: 24px 0; }
.nl-modal[hidden] { display: none; }
.nl-modal__overlay { position: absolute; inset: 0; background: rgba(42,44,51,.6); backdrop-filter: blur(2px); }
.nl-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 833px;
  max-height: 92vh; overflow: hidden; background: var(--nl-white);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  display: flex; flex-direction: column; }
.nl-modal__close { position: absolute; top: 12px; right: 14px; z-index: 3;
  width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer;
  color: var(--nl-white); }
/* Grid scrolls inside the fixed-height dialog so tall forms (esp. on mobile)
   stay reachable; the close button is absolute on the dialog and stays put. */
.nl-modal__grid { display: flex; max-width: 833px;
  overflow-y: hidden;  min-height: 0; }
.nl-modal__form { flex: 1 1 594px; padding: 36px; }
.nl-modal__title { }
.nl-modal__meta { display: flex; flex-wrap: wrap; align-items: center;
  color: var(--nl-muted); margin: 12px 0 22px; }
.nl-modal__assure { margin-top: 16px; color: var(--nl-muted); }
.nl-modal__aside { flex: 0 0 259px; position: relative; background: var(--nl-dark); overflow: hidden; }
.nl-modal__aside .nl-modal__photo { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1); opacity: .9; }
.nl-modal__rating { position: relative; z-index: 2; padding: 22px; }
.nl-modal__rating .nl-rating__label,
.nl-modal__rating .nl-rating__top strong { color: var(--nl-white); }
.nl-modal__close:focus-visible,
.nl-btn:focus-visible { outline: 2px solid var(--nl-red); outline-offset: 2px; }

/* Lock body scroll while the modal is open */
body.nl-modal-open { overflow: hidden; }

/* ----------------------------------------------------------------------------
   THANK-YOU MODAL (mobile only) — shown by JS on wpcf7mailsent instead of the
   desktop redirect. Reuses .nl-modal/.nl-modal__overlay/.nl-modal__close.
   Structure + color only; type + spacing live as utilities in the markup.
   -------------------------------------------------------------------------- */
.nl-tymodal__dialog { position: relative; z-index: 1; width: 100%; max-width: 520px;
  max-height: 92vh; overflow: hidden; background: var(--nl-dark); color: var(--nl-white);
  box-shadow: 0 30px 80px rgba(0,0,0,.4); display: flex; flex-direction: column;
  justify-content: flex-end; }
.nl-tymodal__bg { position: absolute; inset: 0; z-index: 0; }
.nl-tymodal__bg img { width: 100%; height: 100%; object-fit: cover; }
.nl-tymodal__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,44,51,.55) 0%, rgba(42,44,51,.9) 100%); }
.nl-tymodal .nl-modal__close { color: var(--nl-white); }
.nl-tymodal__content { position: relative; z-index: 2; padding: 40px 26px 24px; }
.nl-tymodal__title { color: var(--nl-white); }
.nl-tymodal__text { color: rgba(255,255,255,.92); }
.nl-tymodal__signoff { color: var(--nl-white); }
.nl-tymodal__trust { position: relative; z-index: 2; display: flex; align-items: center;
  gap: 12px; padding: 14px 26px; background: rgba(42,44,51,.92); }
.nl-tymodal__trust-text { color: rgba(255,255,255,.9); }

/* ----------------------------------------------------------------------------
   SHARED — centered section head + light/centered eyebrow
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.nl-section-head { max-width: 900px; margin-left: auto; margin-right: auto; }
.nl-section-head__title { }
.nl-section-head__sub {max-width: 730px; color: var(--nl-muted);margin-left: auto; margin-right: auto; }
.nl-eyebrow--center { justify-content: center; }
.nl-eyebrow--light { color: var(--nl-white); }
.nl-eyebrow--light .nl-eyebrow__dot { background: var(--nl-red); }

/* ============================================================================
   SECTION 04 — SERVICES
   ========================================================================== */
.nl-services { padding: 50px 0; background: var(--nl-bg); }
.nl-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.nl-services__cell { display: flex; position: relative;}
.nl-services__cell .cta-bg{
  position: absolute;
}

.nl-card { background: var(--nl-white); border: 1px solid var(--nl-line); display: flex; flex-direction: column; width: 100%; }
.nl-card__media img { width: 100%; height: 200px; object-fit: cover;  display: block; }
.nl-card__body {padding:16px; box-shadow: 0px 4px 20px 0px #0000000D;clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 5.5%);
    margin-top: -1rem;background: var(--nl-white);}
.nl-card__icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
   color: var(--nl-red); font-size: 16px; }
.nl-card__title { margin-bottom: 8px; }
.nl-card__text { color: var(--nl-muted); }

/* Crimson CTA card (8th cell) — reuses .nl-guidance look */
.nl-guidance { /*background: var(--nl-dark);*/ color: var(--nl-white); padding: 28px 24px; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;z-index: 1;
 /* background-image: linear-gradient(180deg, rgba(42,44,51,.6), rgba(42,44,51,.92));*/ }
.nl-guidance__title { color: var(--nl-white) !important; margin-bottom: 10px; }
.nl-guidance__text { color: rgba(255,255,255,.8); margin-bottom: 18px; max-width: 64%;}
.nl-guidance__rating { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.nl-guidance__rating .nl-rating__label,
.nl-guidance__rating .nl-rating__top strong { color: var(--nl-white); }
.nl-guidance__cta { align-self: flex-start; }

/* ============================================================================
   SECTION 05 — HOW IT WORKS (process steps)
   ========================================================================== */
.nl-process { padding: 50px 0; }
.nl-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.nl-step { background: var(--nl-bg); display: flex; flex-direction: column; padding: 28px 28px 0; height: 100%; overflow: hidden; }
.nl-step__pill { align-self: flex-start; background: var(--nl-red); color: var(--nl-white);
  padding: 6px 14px; margin-bottom: 18px; }
.nl-step__title { margin-bottom: 12px; }
.nl-step__text { color: var(--nl-muted); margin-bottom: 16px; }
.nl-step__bullets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.nl-step__bullets li { display: flex; gap: 10px; color: var(--nl-text); }
.nl-step__plus { color: var(--nl-red); }
.nl-step__media { position: relative; margin: auto -28px 0; overflow: hidden; }
.nl-step__media img { width: 100%; height: 200px; object-fit: cover; display: block; }
.nl-step__chevron { position: absolute; left: 0; bottom: 0; width: 62%; height: 72%;
  background: var(--nl-red); clip-path: polygon(0 100%, 0 32%, 72% 100%); opacity: .92; }

/* ============================================================================
   SECTION 06 — WHY US
   ========================================================================== */
.nl-why { padding: 50px 0; background: var(--nl-bg); background-repeat: no-repeat; background-position: center; background-size: cover; }
.nl-why__grid { display: grid; grid-template-columns: 1fr 0.9fr 1fr; gap: 40px; align-items: center; }
.nl-why__col { display: flex; flex-direction: column; gap: 20px; }
.nl-why__col--right { text-align: right; }
/*.nl-why__col--right .nl-why__icon { margin-left: auto; }  */
.nl-why__point{background: #F9F9F9;border: 1px solid #3D464D1A;box-shadow: 0px 4px 20px 0px #0000000D; padding: 30px; text-align: left;

}
.nl-why__icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: var(--nl-red); color: var(--nl-white); font-size: 18px; margin-bottom: 14px; }
.nl-why__title { margin-bottom: 8px; }
.nl-why__text { color: var(--nl-muted); }
.nl-why__portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

/* ============================================================================
   SECTION 07 — TESTIMONIALS
   Always a Slick slider (desktop + mobile): centerMode, 3 full cards + ~50%
   peek of the prev/next card on each side. Slick owns the layout, so the
   container is NOT a grid; spacing comes from per-slide padding.
   ========================================================================== */
.nl-testimonials { padding: 50px 0; overflow: hidden; }
/* Pre-init (before Slick attaches) show the first 3 in a row so there is no
   unstyled flash; once .slick-initialized lands, Slick's track takes over. */
.nl-testimonials__grid { display: flex; }
.nl-testimonials__grid.slick-initialized { display: block; }
.nl-testimonials__cell { display: flex !important; height: auto; padding: 0 12px; }
.nl-testimonials__grid:not(.slick-initialized) .nl-testimonials__cell { flex: 0 0 33.333%; }
/* Equal-height slides */
.nl-testimonials .slick-track { display: flex; }
.nl-testimonials .slick-slide { height: auto;   -webkit-user-select: text;-khtml-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;}
.nl-testimonials .slick-slide > div { height: 100%; display: flex; }
.nl-testimonials .slick-dots{display: none;}
.nl-quote { background: var(--nl-bg); border: 1px solid var(--nl-line); padding: 30px; width: 100%;
  display: flex; flex-direction: column; position: relative; }
.nl-quote__bg { position: absolute; inset: 0; z-index: 0;top: 12px;right: 12px;left:auto; }
.nl-quote__stars { color: #e8b500; letter-spacing: 1px; margin-bottom: 0; }
.nl-quote__upper { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nl-quote__text { color: var(--nl-text); margin-bottom: 18px;  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden; }
.nl-quote__name { color: var(--nl-red); margin-top: auto;     display: flex;
    align-items: center;
    gap: 30px;}
.q-name{    display: inline-block;    white-space: nowrap;}
.q-line{border: 1px solid #3D464D1A;width: 100%;}

/* ============================================================================
   SECTION 08 — FOOTER (offices + form over dark bg)
   ========================================================================== */
.nl-foot { position: relative; overflow: hidden; background: var(--nl-dark); }
.nl-foot__bg { position: absolute; inset: 0; z-index: 0; }
.nl-foot__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); -webkit-filter: brightness(0.8); }
.nl-foot__inner { position: relative; z-index: 1; padding: 80px 20px; }
.nl-foot__grid { gap: 50px; align-items: flex-start; }
.nl-foot__left { flex: 1 1 480px; }
.nl-foot__right { flex: 1 1 420px; display: flex; justify-content: flex-end; }
.nl-foot__title { color: var(--nl-white); }
.nl-foot__offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.nl-foot__offices .nl-text-grey{color: #FFFFFFCC;}
/* Title as the first grid cell (index 0, top-left) on desktop. */
.nl-foot__title-cell { display: flex; align-items: flex-start; }
.nl-foot__title-cell .nl-foot__title { margin: 0;color: #fff; }
 
.nl-foot__title--mobile { display: none; } /* shown only on mobile, above the slider */
.nl-officecard { background: #F9F9F9; border: 1px solid rgba(255,255,255,.14);
  padding: 18px; color: var(--nl-white); height: 100%;position: relative; min-height:192px;
background-position: bottom right; background-size: 190px; background-repeat: no-repeat;
}
.nl-officecard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-officecard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.nl-officecard__city { background: var(--nl-red); color: var(--nl-white); padding: 4px 14px; }
.nl-officecard__phone { color: var(--nl-dark) !important; display: inline-flex; align-items: center; gap: 6px; }
.nl-officecard__phone i { color: var(--nl-red); font-size: 11px; }
.nl-officecard__addr { color: #2A2C33; max-width: 66%; }

/* ============================================================================
   SECTION 09 — COPYRIGHT BAR
   ========================================================================== */
.nl-copyright { background: var(--nl-dark); border-top: 1px solid rgba(255,255,255,.08); }
.nl-copyright__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 20px; }
.nl-copyright__logo img { max-height: 60px; width: auto; }
.nl-copyright__text { color: rgba(255,255,255,.7); }

/* ----------------------------------------------------------------------------
   SLICK — only restyle dots; sliders are inert (display:contents) on desktop
   so the CSS grid above governs layout until Slick initialises on mobile.
   -------------------------------------------------------------------------- */
.nl-landing .slick-dots { display: flex; justify-content: center; gap: 8px; padding: 22px 0 0; margin: 0; }
.nl-landing .slick-dots li { width: auto; height: auto; }
.nl-landing .slick-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #c7cad0; text-indent: -9999px; overflow: hidden; cursor: pointer; }
.nl-landing .slick-dots .slick-active button { background: var(--nl-red); }

/* ============================================================================
   THANK-YOU PAGE (page-thank-you.php) — band with B&W bg + crimson chevron
   ========================================================================== */
.nl-thankyou { position: relative; overflow: hidden; min-height: 700px;
  display: flex; align-items: center; background: var(--nl-dark); margin-bottom: -1px; }
.nl-thankyou__bg { position: absolute; inset: 0; z-index: 0; }
.nl-thankyou__bg img { width: 100%; height: 100%; object-fit: cover; }
/*
.nl-thankyou__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(247,247,248,.95) 0%, rgba(247,247,248,.85) 34%, rgba(247,247,248,.35) 55%, rgba(42,44,51,.25) 100%); }
*/
/* Crimson roofline chevron on the right — a thick upward "^" arrow.
   Peak near top-centre of the band; two arms of even thickness sweep down. */
.nl-thankyou__chevron { position: absolute; z-index: 1; top: -4%; bottom: -4%; right: -6%;
  width: 62%; background: var(--nl-red); opacity: .92;
  clip-path: polygon(50% 0, 70% 0, 100% 90%, 80% 90%, 50% 28%, 20% 90%, 0 90%); }
/* Dark corner wedge, bottom-left. */
.nl-thankyou__wedge { position: absolute; z-index: 1; left: 0; bottom: 0;
  width: 220px; height: 120px; background: var(--nl-dark);
  clip-path: polygon(0 100%, 0 30%, 100% 100%); opacity: .9; }

.nl-thankyou__inner { position: relative; z-index: 2; padding: 70px 20px; }
.nl-thankyou__content { max-width: 540px; }
.nl-thankyou__title { font-family: var(--nl-lora); font-weight: 500; color: var(--nl-dark);
  font-size: 72px; line-height: 1.05; }
.nl-thankyou__text { font-family: var(--nl-sans); font-size: 18px; line-height: 1.55; color: var(--nl-text); }
.nl-thankyou__signoff { font-family: var(--nl-sans); font-size: 18px; color: var(--nl-dark); }

/* Trust strip — hidden on desktop, shown on mobile (matches the mock). */
.nl-thankyou__trust { display: none; position: relative; z-index: 2;
  align-items: center; gap: 12px; background: rgba(42,44,51,.92); padding: 14px 20px; }
.nl-thankyou__trust-text { font-family: var(--nl-sans); font-size: 14px; color: rgba(255,255,255,.9); }

/* ============================================================================
   404 PAGE (404.php) — reuses the .nl-thankyou band; .nl-404 makes it a
   light, centered layout with an oversized display "404".
   ========================================================================== */
.nl-404 { background: var(--nl-bg); }
/* Light wash over the (dark) bg image so the dark serif text stays readable. */
 
.nl-404__inner { display: flex; justify-content: center; }
.nl-404__content { max-width: 544px; }
/* Bespoke oversized display glyph — not a reusable type step, so its size
   lives here with responsive steps rather than as a utility. */
.nl-404__title { color: var(--nl-dark); font-size: clamp(120px, 22vw, 260px); }
.nl-404__text { color: var(--nl-dark); }
.nl-404__oops { color: var(--nl-red); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablet --- */
@media (max-width: 1100px) {
  .nl-offices { gap: 20px; }
  .nl-header__nav { gap: 24px; }
  /* hero title resize handled by md:fs-40 utility in markup */
}

/* --- Below 992px: stack hero + situation, collapse header into a toggle --- */
@media (max-width: 991px) {
  .nl-header__inner { gap: 16px; min-height: 64px; padding: 14px 20px; }
  .nl-header__toggle { display: flex; }

  /* Collapsed nav drops below the bar; toggled open via .is-open */
  .nl-header__nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 18px; background: var(--nl-white); border: 1px solid var(--nl-line);
    border-top: 0; padding: 20px; display: none;
  }
  /* Sticky header on mobile: stays pinned as the page scrolls. Sits above the
     dim overlay (z 40) and the dropdown nav (z 50). */
  .nl-header { position: sticky; top: 0; z-index: 60; }
  .nl-header__nav.is-open { display: flex; }

  /* Dim + blur the page behind the open nav. The overlay covers the viewport;
     the sticky header (z 60) and open nav (z 50) stay above it. */
  body.nl-nav-open::after {
    content: ""; position: fixed; inset: 0; z-index: 40;
    background: #00000066; /*backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);*/
  }
  body.nl-nav-open { overflow: hidden; }
  .nl-offices { gap: 16px; }
  .nl-offices__item { flex: 1 1 45%; }
  .nl-header__cta { width: 100%; justify-content: center; }

  .nl-hero__inner { padding: 44px 20px; }
  .nl-hero__grid { gap: 30px; }
  .nl-hero__left { flex: 1 1 100%; max-width: 100%;position: relative; }
  .nl-hero__right { flex: 1 1 100%; justify-content: stretch; }

  .nl-form-panel { max-width: 100%; }

  .nl-situation { padding: 60px 0; }
  .nl-situation__bg {
    display: none !important;
}
  .nl-situation__grid { gap: 36px; }
  .nl-situation__left,
  .nl-situation__right { flex: 1 1 100%; }
  /* situation title resize handled by lg:fs-32 utility in markup */

  .nl-modal__grid { flex-direction: column; }
  .nl-modal__aside { display: none; } /* hero photo aside hidden on small screens */
  .nl-modal__form { padding: 28px 22px; }
  .nl-modal__close { color: var(--nl-dark); }
  /* Stacked dialog: reset the desktop full-bleed submit bar (top:100% offset +
     over-wide negative margins) that otherwise pushes the Send button off the
     bottom of the scroll area, unreachable. Clean in-flow, full-width bar. */
  .nl-modal__body .baa-form-actions { width: 100%; top: 0; margin: 6px 0 0; flex-wrap: wrap; }

  /* Sections 04-09 — collapse multi-col grids */
  .nl-services, .nl-process, .nl-why, .nl-testimonials { padding: 60px 0; }
  .nl-services__grid { grid-template-columns: repeat(2, 1fr); }
  .nl-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .nl-process__grid { grid-template-columns: 1fr; gap: 22px; }
  /* section-head title resize handled by lg:fs-30 utility in markup */

  /* Why-us: portrait on top, then the four points in a 2-col block */
  .nl-why__grid { grid-template-columns: 1fr; gap: 28px; }
  .nl-why__col { flex-direction: row; gap: 28px; }
  .nl-why__col--right { text-align: left; }
  .nl-why__col--right .nl-why__icon { margin-left: 0; }
  .nl-why__portrait { /*order: -1;*/ }


  /* Footer stacks; office cards become a 2-col block (slider kicks in <768) */
  .nl-foot__inner { padding: 56px 20px; }
  .nl-foot__grid { gap: 36px; }
  .nl-foot__left, .nl-foot__right { flex: 1 1 100%; }
  /* foot title resize handled by lg:fs-32 utility in markup */

  .nl-copyright__inner { flex-direction: column; text-align: center; gap: 14px; }

  /* Thank-you: smaller chevron, tighter band */
  .nl-thankyou { min-height: 460px; }
  .nl-thankyou__title { font-size: 56px; }
  .nl-thankyou__chevron { width: 70%; opacity: .85; }
}

/* --- Sliders activate at <=767px: hand layout to Slick --- */
@media (max-width: 767px) {
  /* Pre-Slick, keep a single column so the first card shows full-width.
     Once Slick adds .slick-initialized, its track takes over (display:block).
     (Testimonials is a slider at ALL widths and is handled in its own block.) */
  .nl-services__grid,
  .nl-foot__offices { grid-template-columns: 1fr; }

  /* Footer title: show the standalone mobile heading; the index-0 title-cell
     is detached from the slider by JS (and hidden here as a JS-off fallback). */
  .nl-foot__title--mobile { display: block; max-width: 100vw; margin-bottom: 24px; } /* size via sm:fs-28 in markup */
  .nl-foot__title-cell { display: none; }

  /* Services CTA: JS parks it after the slider as a standalone full-width block
     (.is-parked). Pre-JS / JS-off it sits as the last grid cell — fine either
     way. The margin separates it from the slider dots above. */
  .nl-services__cta-cell.is-parked { display: flex; margin-top: 24px; }

  .nl-slider.slick-initialized { display: block; }
  .nl-slider .slick-slide { height: auto; }
  .nl-slider .slick-slide > .nl-services__cell { padding: 0 8px; }
  /* Slick needs slides to stretch; flex children fill the track cell */
  .nl-slider .slick-track { display: flex;}
  .nl-slider .slick-track .slick-slide { display: flex; height: auto; }
 .nl-slider .slick-track .slick-slide:not(:last-child) { margin-right: 16px; }

  /* The offices slider is display:grid by default — that breaks Slick's width
     measurement. Once it's a slider, it must be a plain block. */
  .nl-foot__offices.slick-initialized { display: block; }

  /* Offices: first card flush-left + a peek of the next card on the right.
     Right padding on the list narrows the track so the next slide shows; the
     gap between cards comes from the slide margin-right rule above. */
  .nl-foot__offices .slick-list { padding-right: 18%; }
}

/* --- Phones --- */
@media (max-width: 575px) {

  .nl-landing .mb-30 {
    margin-bottom: 20px;
}
  .nl-header__logo img { max-height: 40px; }
  .nl-offices__item { flex: 1 1 100%; }
    .nl-offices {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
  
  /* hero title/subtitle resize via xs:fs-30 / xs:fs-16 utilities in markup */

.nl-hero__bg img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

  .nl-hero__left { min-height: 100px; max-width: 100%;  background-repeat: no-repeat; background-position: bottom right;
        background-size: contain; }


    .nl-hero__right {
        flex: 1 1 100%;
        justify-content: stretch;
        max-width: 100% ;
                margin: 60% auto 0;
        z-index: 2;
    }
.nl-form-panel__meta{font-size: 12px;gap: 1px;}
 .nl-hero__left .nl-btn { width: 245px; justify-content: center; }
  .nl-form-panel__head { padding: 22px 16px 0; }
  .nl-form-panel__body { padding: 0 20px 0px 20px; }


.nl-form-panel__assure-img img{margin-left: -16px;    width: 30px;
    height: 30px;    flex: 0 0 30px;}
.nl-form-panel .baa-form-actions{margin: -10px -20px 0 -39px; padding: 16px 34px 16px 0;gap: 10px;}
.nl-form-panel input.wpcf7-submit{font-size: 16px;padding: 10px 40px 10px 16px;font-family: 'Lora';}
.nl-form-panel__assure-text {
    font-size: 12px;
    line-height: 1.2;
    font-family: 'Nunito';
}
 .hide-mobile{display: none;}
 .hide-desktop{display: inline-block;}
  /* form-panel title resize via xs:fs-22 utility in markup */


    .nl-services, .nl-process, .nl-why, .nl-testimonials {
        padding: 20px 0;
    }
  /* situation title / points title / stat num resize via xs:fs-26 / xs:fs-18 / xs:fs-30 utilities */


.nl-services__cta-cell.is-parked {
        overflow: hidden;
        height: 369px;
    }

  .nl-situation {
        padding: 20px 0;
    }
    .nl-situation__title .nl-text-grey {
    display: inline;
}
.nl-points {
    gap: 10px;
}
.nl-points__head {
    padding-top: 5px;
}
.nl-mediacard{    margin-top: -50px;}
.nl-mediacard__top{width: calc(100% + 17px);}
.nl-mediacard__stats{padding-left: 35px;width: auto; padding-bottom: 160px;}
.nl-mediacard__quote{  padding: 16px;}
.nl-mediacard__quote .fw-16{font-size: 12px;}
.nl-mediacard__note {font-size: 16px}
  .nl-points__item { gap: 14px; }
  .nl-btn { width: auto; justify-content: center; }
.nl-form-panel .baa-form-group.baa-fw-group:has(select),
.nl-form-panel .baa-form-group { flex: 1 1 calc(100% - 7px);}


.nl-mediacard-content {
    overflow: hidden;
}
 .nl-situation__right{
  flex-direction: column; align-items: stretch;        margin-top: 0; 
 }
 .nl-mediacard__photo-mob{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;   filter: none; z-index: 2;top: auto;box-shadow: 0 20px 50px rgba(42, 44, 51, .16);bottom: 90px;
 }
 .nl-mediacard__photo {
           display: none !important;;
  }
  .nl-mediacard__bottom-img{
    margin-top: 20px;
    width: 100%;
    height: 200px;
    object-fit: cover;
     filter: none; z-index: 2;box-shadow: 0 20px 50px rgba(42, 44, 51, .16);
  }
.nl-section-head{padding: 0 16px;}
    .nl-why__col {
        flex-direction: column;
        gap: 12px;
    }
.nl-why__portrait img { order: 0; }

section.nl-foot{min-height: 1275px;}
.nl-foot__inner{padding: 30px 20px; height: 100%;}
    .nl-foot__grid {
        height: 100%;
        gap: 320px;
    }
/*.nl-foot__left{padding-bottom:360px;}*/
.nl-officecard{height: 192px;}
.nl-foot__left .slick-dots{display: none !important;}
.nl-foot__left .nl-eyebrow--light { margin: 0 auto;
    text-align: center;
    display: flex;
    margin-bottom: 12px;
    justify-content: center; }
.nl-foot__title--mobile {
        display: block;
        max-width: 90vw;
        color: white !important;
        text-align: center;
         margin-bottom: 12px;
    }
   .nl-foot__title--mobile  .nl-text-grey{color: #FFFFFFCC !important;}
.nl-foot__bg img{ filter:unset; -webkit-filter:unset;object-fit: cover; height: auto;}
 
.nl-form-panel__title {text-align: center;}

.nl-copyright{border-top: unset;}
.nl-copyright__inner{    padding: 0 20px 20px;}
  /* Thank-you mobile: dark band, full-bleed photo behind, trust strip shown */
  .nl-thankyou { min-height: 0; flex-direction: column; align-items: stretch; }
  .nl-thankyou__bg::after {
    background: linear-gradient(180deg, rgba(42,44,51,.55) 0%, rgba(42,44,51,.82) 100%);
  }
  .nl-thankyou__chevron, .nl-thankyou__wedge { display: none; }
  .nl-thankyou__inner { padding: 48px 22px 40px; }
  .nl-thankyou__title { font-size: 48px; color: var(--nl-white); }
  .nl-thankyou__text { color: rgba(255,255,255,.92); }
  .nl-thankyou__signoff { color: var(--nl-white); }
  .nl-thankyou__trust { display: flex; }

  .nl-foot__left{max-width: 100%;}

.nl-slider .slick-track .slick-slide:not(:last-child) {
                margin-right: 16px;
    }

.nl-modal__body .baa-form-group.baa-fw-group:has(select),
.nl-modal__body .baa-form-group{flex: 1 1 calc(100% - 7px);}

.nl-modal__grid { 
  overflow-y: auto; -webkit-overflow-scrolling: touch;  }
}



/*MODAL — desktop only (>=992px, where the two-column dialog is used). The
  full-bleed submit bar (over-wide + top:100% offset) is tuned for the 833px
  dialog; below 992px the form stacks and this hack pushes the Send button
  off-screen, so it is scoped to desktop and smaller screens use the clean
  in-flow actions bar defined in the <=991px block. */
@media (min-width: 992px) {
  .nl-modal__meta{
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .nl-modal__form {
    padding: 36px 36px 0;
  }
  .nl-modal__body .baa-form-actions{
    width: calc(100% + 90px);
    position: relative;
    top: 100%;
    min-height: 80px;
    margin: 0px -36px 0 -54px;
    z-index: 1;
  }
}