/* =========================================================================
   Northline Mechanical — design system (Figma file CHtchib3…).
   Tokens: Foundations 8:6 / type 9:6. Navy #092F4B + Orange #F0642B.
   Barlow Condensed (display) + Inter (body/UI). 1200 content · mobile 390/24.
   ========================================================================= */

:root {
  /* Navy ramp */
  --nl-navy-900: #06233A;
  --nl-navy-800: #092F4B;
  --nl-navy-700: #123F5F;
  --nl-navy-100: #E8F0F5;
  /* Orange ramp */
  --nl-orange-600: #D94E16;
  --nl-orange-500: #F0642B;
  --nl-orange-100: #FFF0E9;
  /* Neutrals */
  --nl-white: #FFFFFF;
  --nl-n50: #F7F8F6;
  --nl-n100: #EFF2F3;
  --nl-n200: #D7DEE3;
  --nl-n400: #8A969E;
  --nl-n600: #5D6870;
  --nl-n800: #22313A;
  --nl-n900: #10212B;
  /* Status */
  --nl-success: #2F7D4A;
  --nl-success-100: #EAF5EE;
  --nl-error: #C43D32;
  --nl-error-100: #FCECEA;
  --nl-warning-100: #FFF4D6;
  /* Semantic */
  --nl-text: #10212B;
  --nl-text-2: #5D6870;
  --nl-border: #D7DEE3;
  --nl-bg: #FFFFFF;
  --nl-bg-subtle: #F7F8F6;
  /* Fonts */
  --nl-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --nl-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Layout */
  --nl-container: 1200px;
  --nl-gutter: clamp(24px, 8.33vw, 120px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.northline {
  margin: 0; background: var(--nl-bg); color: var(--nl-text);
  font-family: var(--nl-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 { font-family: var(--nl-display); color: var(--nl-text); margin: 0 0 0.4em; letter-spacing: -0.5px; line-height: 1.02; }
h1 { font-weight: 700; font-size: 56px; }
h2 { font-weight: 700; font-size: 48px; line-height: 1.08; }
h3 { font-weight: 700; font-size: 40px; line-height: 1.1; }
h4 { font-weight: 600; font-size: 32px; line-height: 1.25; letter-spacing: 0; }
h5 { font-weight: 600; font-size: 24px; line-height: 1.33; letter-spacing: 0; }

a { color: var(--nl-navy-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--nl-orange-500); outline-offset: 2px; }

p { margin: 0 0 1rem; }

/* Layout ----------------------------------------------------------------- */
.nl-wrap { width: 100%; max-width: calc(var(--nl-container) + 2 * var(--nl-gutter)); margin-inline: auto; padding-inline: var(--nl-gutter); }
/* padding-block only — `.nl-section` is used together with `.nl-wrap`, and a
   `padding: X 0` shorthand would zero the wrap's inline gutter, making the
   content width inconsistent between nav / sections / footer. */
.nl-section { padding-block: clamp(48px, 6vw, 96px); }
.nl-skip { position: absolute; left: 16px; top: -48px; z-index: 200; background: var(--nl-orange-500); color: #fff; padding: 10px 16px; border-radius: 2px; font-weight: 600; transition: top 150ms ease; }
.nl-skip:focus { top: 16px; }

/* Type utilities --------------------------------------------------------- */
.nl-hero-title { font-family: var(--nl-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1.0; letter-spacing: -0.5px; margin: 0; text-transform: uppercase; }
.nl-eyebrow { font-family: var(--nl-body); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nl-orange-500); margin: 0 0 12px; }
.nl-lede { font-size: 18px; line-height: 1.6; color: var(--nl-text-2); }
.nl-small { font-size: 14px; color: var(--nl-text-2); }

/* Buttons ---------------------------------------------------------------- */
.nl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 2px; font-family: var(--nl-body); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid transparent; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.nl-btn--primary { background: var(--nl-orange-500); color: #fff; border-color: var(--nl-orange-500); }
.nl-btn--primary:hover { background: var(--nl-orange-600); border-color: var(--nl-orange-600); color: #fff; text-decoration: none; }
.nl-btn--secondary { background: var(--nl-navy-800); color: #fff; border-color: var(--nl-navy-800); }
.nl-btn--secondary:hover { background: var(--nl-navy-900); border-color: var(--nl-navy-900); color: #fff; text-decoration: none; }
.nl-btn--outline { background: transparent; color: var(--nl-navy-800); border-color: var(--nl-n200); }
.nl-btn--outline:hover { border-color: var(--nl-navy-800); text-decoration: none; }
.nl-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.nl-btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.nl-btn--sm { min-height: 40px; padding: 0 16px; font-size: 12px; }

.nl-link-arrow { font-family: var(--nl-body); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nl-orange-500); display: inline-flex; align-items: center; gap: 6px; }
.nl-link-arrow:hover { text-decoration: none; color: var(--nl-orange-600); }

/* ---- Header ------------------------------------------------------------ */
.nl-header { background: var(--nl-white); border-bottom: 1px solid var(--nl-border); position: sticky; top: 0; z-index: 100; }
/* Figma header (node 34:3): 96px tall, logo 218x50 at the 120px gutter. */
.nl-header__inner { display: flex; align-items: center; gap: 24px; min-height: 96px; }
.nl-logo { display: inline-flex; flex: none; }
.nl-logo svg { height: 50px; width: auto; }
.nl-nav { margin-left: auto; }
.nl-nav__list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nl-nav__list a { color: var(--nl-navy-800); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.nl-nav__list a:hover { color: var(--nl-orange-500); text-decoration: none; }
.nl-nav__list .current-menu-item > a { color: var(--nl-orange-500); }
.nl-header__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.nl-header__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--nl-navy-800); font-weight: 700; font-size: 15px; }
.nl-header__phone:hover { color: var(--nl-orange-500); text-decoration: none; }
.nl-nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: none; color: var(--nl-navy-800); cursor: pointer; }

/* ---- Hero (split navy + image) ----------------------------------------- */
.nl-hero { background: var(--nl-navy-800); color: #fff; }
/* Cap the hero to the same container as nav/sections/footer so the content
   width is consistent site-wide at viewports wider than the 1440 frame. */
.nl-hero__inner { display: grid; grid-template-columns: calc((var(--nl-container) + 2 * var(--nl-gutter)) / 2) 1fr; align-items: stretch; min-height: 520px; max-width: none; margin-left: max(0px, calc((100% - (var(--nl-container) + 2 * var(--nl-gutter))) / 2)); margin-right: 0; }
.nl-hero__text { align-self: center; padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 64px) clamp(40px, 5vw, 72px) var(--nl-gutter); max-width: 620px; }
.nl-hero__title { color: #fff; margin: 12px 0 8px; }
.nl-hero__accent { color: var(--nl-orange-500); font-family: var(--nl-display); font-weight: 700; font-size: clamp(20px, 2.5vw, 28px); text-transform: none; letter-spacing: -0.5px; margin: 0 0 20px; }
.nl-hero__body { color: #cdd7de; font-size: 18px; max-width: 44ch; margin: 0 0 28px; }
.nl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.nl-hero__points { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.nl-hero__points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #cdd7de; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.nl-hero__points li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nl-orange-500); }
.nl-hero__media { position: relative; min-height: 340px; }
.nl-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Trust bar --------------------------------------------------------- */
/* Figma trust strip (node 34:36): white bordered box on the subtle page, thin
   dividers between items, bare orange icons (no navy tile). */
.nl-trust { background: var(--nl-bg-subtle); padding-block: 20px; }
.nl-trust__inner { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--nl-white); border: 1px solid var(--nl-border); border-radius: 6px; }
.nl-trust__item { position: relative; display: flex; align-items: center; gap: 16px; padding: 26px clamp(20px, 2.5vw, 34px); }
.nl-trust__item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 56px; background: var(--nl-border); }
.nl-trust__icon { flex: none; color: var(--nl-orange-500); display: inline-flex; }
.nl-trust__icon svg { display: block; width: 24px; height: 24px; }
.nl-trust__label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.nl-trust__sub { color: var(--nl-text-2); font-size: 14px; }

/* ---- Section head ------------------------------------------------------ */
.nl-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.nl-shead__title { margin: 0; }

/* ---- Service cards ----------------------------------------------------- */
.nl-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
/* Figma service cards (node 34:57): light-fill, centered, bare orange icon on top. */
.nl-svc-card { display: block; text-align: center; border: 1px solid var(--nl-border); border-radius: 8px; padding: 32px 20px; background: var(--nl-n50); color: var(--nl-text); transition: border-color 150ms ease, box-shadow 150ms ease; }
.nl-svc-card:hover { border-color: var(--nl-navy-700); box-shadow: 0 8px 24px rgba(9,47,75,0.08); text-decoration: none; }
.nl-svc-card__icon { color: var(--nl-orange-500); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.nl-svc-card__icon svg { width: 40px; height: 40px; }
.nl-svc-card__name { display: block; font-family: var(--nl-display); font-weight: 600; font-size: 20px; line-height: 1.15; margin: 0 0 6px; color: var(--nl-navy-900); }
.nl-svc-card__tag { display: block; color: var(--nl-text-2); font-size: 14px; margin: 0; }

/* ---- Locations band (navy) --------------------------------------------- */
.nl-locations { background: var(--nl-navy-800); color: #fff; }
.nl-locations__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 40px; }
.nl-locations__eyebrow { color: var(--nl-orange-500); }
.nl-locations__list { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 8px 0 0; padding: 0; }
.nl-locations__list a { color: #cdd7de; font-weight: 600; }
.nl-locations__list a:hover { color: #fff; }

/* ---- Reviews ----------------------------------------------------------- */
.nl-reviews__inner { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 40px; align-items: center; }
.nl-reviews__score { font-family: var(--nl-display); font-weight: 700; font-size: 64px; line-height: 1; color: var(--nl-navy-900); }
.nl-stars { color: var(--nl-orange-500); display: inline-flex; gap: 2px; }
/* Figma reviews (node 34:88): left stars navy, plain white card, service pill. */
.nl-reviews__inner > div:first-child .nl-stars { color: var(--nl-navy-900); }
.nl-review-card { border: 1px solid var(--nl-border); border-radius: 6px; padding: 28px; background: var(--nl-white); }
.nl-review-card .nl-stars { color: var(--nl-orange-500); }
.nl-review-card__text { font-size: 18px; line-height: 1.5; color: var(--nl-navy-900); margin: 14px 0 18px; }
.nl-review-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nl-review-card__name { color: var(--nl-navy-900); font-size: 14px; font-weight: 700; }
.nl-review-card__tag { flex: none; background: var(--nl-orange-100); color: var(--nl-orange-600); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; }
.nl-reviews-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.nl-chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--nl-border); border-radius: 2px; background: var(--nl-white); color: var(--nl-navy-800); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.nl-chip.is-active, .nl-chip:hover { background: var(--nl-navy-800); color: #fff; border-color: var(--nl-navy-800); }

/* ---- CTA band ---------------------------------------------------------- */
.nl-cta { background: var(--nl-navy-800); color: #fff; }
.nl-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 40px; }
.nl-cta__title { color: #fff; margin: 0; }

/* ---- Footer ------------------------------------------------------------ */
.nl-footer { background: var(--nl-navy-900); color: #cdd7de; }
.nl-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-block: clamp(48px, 5vw, 72px) 32px; }
.nl-footer__logo svg { height: 40px; width: auto; }
.nl-footer__blurb { max-width: 30ch; margin: 16px 0; font-size: 14px; }
.nl-footer__phone { color: #fff; font-weight: 700; font-size: 18px; }
.nl-footer__heading { color: #fff; font-family: var(--nl-display); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; }
.nl-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nl-footer__list a { color: #cdd7de; font-size: 14px; }
.nl-footer__list a:hover { color: #fff; }
.nl-footer__legal { display: flex; justify-content: space-between; gap: 16px; padding-block: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: #8ea0ac; }

/* ---- Mobile sticky actions --------------------------------------------- */
.nl-sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; background: var(--nl-navy-900); }
.nl-sticky a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; }
.nl-sticky__call { color: #fff; }
.nl-sticky__quote { background: var(--nl-orange-500); color: #fff; }

/* ---- Forms + notices --------------------------------------------------- */
.nl-form { max-width: 640px; }
.nl-field { margin-bottom: 16px; }
.nl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nl-field label { display: block; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nl-navy-800); margin-bottom: 6px; }
.nl-field input, .nl-field textarea, .nl-field select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--nl-n200); border-radius: 2px; background: #fff; color: var(--nl-text); font: inherit; font-size: 15px; }
.nl-field textarea { min-height: 120px; padding: 12px 14px; }
.nl-field--check label { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }
.nl-field--check input { width: auto; min-height: 0; }
.nl-field input[aria-invalid="true"], .nl-field textarea[aria-invalid="true"], .nl-field select[aria-invalid="true"] { border-color: var(--nl-error); background: var(--nl-error-100); }
.nl-field__error { color: var(--nl-error); font-size: 13px; margin: 6px 0 0; }
.nl-req { color: var(--nl-error); }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-form__note { color: var(--nl-text-2); font-size: 13px; margin-top: 12px; }
.nl-notice { border-radius: 4px; padding: 16px 18px; margin-bottom: 20px; font-size: 14px; }
.nl-notice--error { background: var(--nl-error-100); border: 1px solid var(--nl-error); color: #7c2820; }
.nl-notice--error ul { margin: 6px 0 0; padding-left: 18px; }
.nl-notice--error a { color: #7c2820; }
.nl-notice--success { background: var(--nl-success-100); border: 1px solid var(--nl-success); color: #1e5533; }
.nl-notice--success h3 { color: var(--nl-success); margin: 0 0 4px; }
.nl-notice--emergency { background: var(--nl-orange-100); border: 1px solid var(--nl-orange-500); color: #8a3312; }

/* ---- Accordion --------------------------------------------------------- */
.nl-accordion { border-top: 1px solid var(--nl-border); max-width: 760px; }
.nl-accordion__item { border-bottom: 1px solid var(--nl-border); }
.nl-accordion__q { cursor: pointer; padding: 18px 0; font-family: var(--nl-display); font-weight: 600; font-size: 20px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.nl-accordion__q::-webkit-details-marker { display: none; }
.nl-accordion__q::after { content: "+"; color: var(--nl-orange-500); font-size: 22px; }
.nl-accordion__item[open] .nl-accordion__q::after { content: "\2013"; }
.nl-accordion__a { padding: 0 0 18px; color: var(--nl-text-2); max-width: 62ch; }

/* ---- Page hero / breadcrumbs / archives -------------------------------- */
/* Inner pages use a light hero band (Figma): breadcrumb + navy title + gray
   subtitle. The navy split hero is reserved for the Home page (.nl-hero). */
.nl-pagehero { background: var(--nl-n50); border-bottom: 1px solid var(--nl-border); color: var(--nl-text); padding: clamp(40px, 5vw, 72px) 0; }
.nl-pagehero h1 { color: var(--nl-navy-900); }
.nl-pagehero .nl-lede { color: var(--nl-text-2); }
.nl-breadcrumbs { font-size: 13px; color: var(--nl-n600); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.nl-breadcrumbs a { color: var(--nl-navy-700); }
.nl-breadcrumbs a:hover { color: var(--nl-orange-500); text-decoration: none; }
.nl-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.nl-loc-card { display: block; border: 1px solid var(--nl-border); border-radius: 4px; padding: 24px; background: var(--nl-white); color: var(--nl-text); transition: border-color 150ms ease, box-shadow 150ms ease; }
.nl-loc-card:hover { border-color: var(--nl-navy-700); box-shadow: 0 8px 24px rgba(9,47,75,0.08); text-decoration: none; }
.nl-loc-card h3 { font-size: 24px; margin: 0 0 6px; }
.nl-loc-card__meta { color: var(--nl-orange-600); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.nl-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.nl-article-card a { display: flex; flex-direction: column; }
.nl-article-card__media { aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; background: var(--nl-n100); margin-bottom: 12px; }
.nl-article-card__title { margin-top: 4px; }
.nl-article-card .nl-small { margin-top: 6px; }
.nl-article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.nl-article-card__meta { color: var(--nl-text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.nl-article-card__title { font-family: var(--nl-display); font-weight: 600; font-size: 22px; margin: 6px 0; }
.nl-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.nl-split__media { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; }
.nl-split__media img { width: 100%; height: 100%; object-fit: cover; }
.nl-prose { max-width: 720px; }
.nl-prose p { margin: 0 0 1.1rem; }
.nl-empty-state { text-align: center; padding: clamp(48px, 8vw, 96px) 16px; }
.nl-pagination .nav-links { display: flex; gap: 8px; justify-content: center; margin: 40px 0; }
.nl-pagination .page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--nl-border); border-radius: 2px; color: var(--nl-navy-800); padding: 0 8px; }
.nl-pagination .page-numbers.current { background: var(--nl-navy-800); color: #fff; border-color: var(--nl-navy-800); }

/* ---- Service detail bits ----------------------------------------------- */
.nl-bg-subtle-sec { position: relative; z-index: 0; }
.nl-bg-subtle-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nl-n50); box-shadow: 0 0 0 100vmax var(--nl-n50); clip-path: inset(0 -100vmax); }
.nl-panel { background: var(--nl-navy-100); border-radius: 4px; padding: 28px; }
.nl-panel h3 { font-size: 22px; margin: 0 0 12px; }
.nl-checklist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.nl-checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--nl-text); }
.nl-checklist li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--nl-orange-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D94E16' stroke-width='3'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.nl-process { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.nl-process__num { font-family: var(--nl-display); font-weight: 700; font-size: 32px; color: var(--nl-orange-500); display: block; }
.nl-process__title { font-size: 22px; margin: 8px 0 6px; }
.nl-process__step p { color: var(--nl-text-2); font-size: 15px; margin: 0; }

/* ---- Plans ------------------------------------------------------------- */
.nl-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.nl-plan { position: relative; border: 1px solid var(--nl-border); border-radius: 4px; padding: 32px 28px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.nl-plan.is-featured { border-color: var(--nl-orange-500); border-width: 2px; }
.nl-plan__badge { position: absolute; top: -12px; left: 28px; background: var(--nl-orange-500); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 2px; }
.nl-plan__name { font-size: 26px; margin: 0; }
.nl-plan__price { font-family: var(--nl-display); font-weight: 700; font-size: 32px; color: var(--nl-navy-900); margin: 0; }
.nl-plan .nl-checklist { margin: 12px 0 20px; flex: 1; }
.nl-plan .nl-btn { margin-top: auto; }

/* ---- Search list ------------------------------------------------------- */
.nl-search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; max-width: 820px; }
.nl-search-item { border-bottom: 1px solid var(--nl-border); padding-bottom: 20px; }
.nl-search-item__type { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nl-orange-600); font-weight: 700; }
.nl-search-item__title { font-family: var(--nl-display); font-weight: 600; font-size: 24px; color: var(--nl-navy-900); }
.nl-search-item a:hover { text-decoration: none; }
.nl-search-item a:hover .nl-search-item__title { color: var(--nl-orange-500); }

/* Search form (Hello default reset) */
.search-form { display: flex; gap: 8px; }
.search-form .search-field { flex: 1; min-height: 48px; padding: 0 14px; border: 1px solid var(--nl-n200); border-radius: 2px; }
.search-form .search-submit { min-height: 48px; padding: 0 20px; background: var(--nl-orange-500); color: #fff; border: none; border-radius: 2px; font-weight: 700; text-transform: uppercase; cursor: pointer; }

/* ---- Filter pills (archives) ------------------------------------------- */
.nl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }

/* ---- Service photo cards (Services archive 36:80) ---------------------- */
.nl-svc-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.nl-svc-photo { display: block; border: 1px solid var(--nl-border); border-radius: 4px; overflow: hidden; background: #fff; color: var(--nl-text); transition: border-color 150ms ease, box-shadow 150ms ease; }
.nl-svc-photo:hover { border-color: var(--nl-navy-700); box-shadow: 0 8px 24px rgba(9,47,75,0.08); text-decoration: none; }
.nl-svc-photo__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--nl-n100); }
.nl-svc-photo__media img { width: 100%; height: 100%; object-fit: cover; }
.nl-svc-photo__body { padding: 20px 24px 24px; display: flex; flex-direction: column; }
.nl-svc-photo__eyebrow { color: var(--nl-orange-500); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; }
.nl-svc-photo__title { font-family: var(--nl-display); font-weight: 700; font-size: 24px; color: var(--nl-navy-900); margin: 0 0 8px; }
.nl-svc-photo__excerpt { color: var(--nl-text-2); font-size: 15px; margin: 0 0 14px; }

/* ---- About: value chips, team, steps ----------------------------------- */
.nl-value-chips { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: 24px 0 0; padding: 0; }
.nl-value-chips li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--nl-navy-900); }
.nl-value-chips svg { flex: none; color: var(--nl-orange-500); }
.nl-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.nl-role-card { border: 1px solid var(--nl-border); border-radius: 4px; padding: 24px; background: #fff; }
.nl-role-card__eyebrow { color: var(--nl-orange-500); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px; }
.nl-role-card__title { font-family: var(--nl-display); font-weight: 700; font-size: 22px; color: var(--nl-navy-900); margin: 0 0 8px; }
.nl-role-card p { color: var(--nl-text-2); font-size: 14px; margin: 0; }
.nl-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.nl-steps__num { font-family: var(--nl-display); font-weight: 700; font-size: 28px; color: var(--nl-orange-500); display: block; }
.nl-steps__title { font-size: 20px; margin: 6px 0 6px; }
.nl-steps p { color: var(--nl-text-2); font-size: 14px; margin: 0; }

/* ---- Reviews: rating summary + distribution --------------------------- */
.nl-rating { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
.nl-rating__score { font-family: var(--nl-display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--nl-navy-900); display: inline-flex; align-items: center; gap: 14px; }
.nl-rating__bars { display: grid; gap: 6px; min-width: 220px; }
.nl-rating__row { display: grid; grid-template-columns: 28px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; color: var(--nl-text-2); }
.nl-rating__track { height: 8px; border-radius: 4px; background: var(--nl-n200); overflow: hidden; }
.nl-rating__fill { height: 100%; background: var(--nl-navy-800); }
.nl-review-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.nl-rev { border: 1px solid var(--nl-border); border-radius: 4px; padding: 24px; background: #fff; display: flex; flex-direction: column; }
.nl-rev__text { color: var(--nl-navy-900); font-size: 16px; margin: 12px 0 20px; }
.nl-rev__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.nl-rev__name { color: var(--nl-text-2); font-size: 14px; font-weight: 600; }
.nl-rev__chip { background: var(--nl-orange-100); color: var(--nl-orange-600); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 2px; }

/* ---- Plans: feature row + price period --------------------------------- */
.nl-plan-features { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: 0 0 32px; padding: 0; }
.nl-plan-features li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--nl-navy-900); }
.nl-plan-features svg { flex: none; color: var(--nl-orange-500); }
.nl-plan__price span { font-size: 15px; font-family: var(--nl-body); font-weight: 600; color: var(--nl-text-2); }
.nl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.nl-bullets { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 10px; }
.nl-bullets li { position: relative; padding-left: 18px; color: var(--nl-text-2); }
.nl-bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--nl-orange-500); }

/* ---- Contact / Quote: navy info sidebar -------------------------------- */
.nl-aside { background: var(--nl-navy-800); color: #cdd7de; border-radius: 4px; padding: clamp(28px, 3vw, 40px); }
.nl-aside h2, .nl-aside h3 { color: #fff; }
.nl-aside__group { margin-bottom: 20px; }
.nl-aside__label { color: var(--nl-orange-500); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; }
.nl-aside__val { color: #e6edf2; font-size: 15px; margin: 0; }
.nl-aside a { color: #fff; }

/* ---- Blog featured card ------------------------------------------------ */
.nl-featured { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--nl-border); border-radius: 4px; overflow: hidden; margin-bottom: 40px; background: #fff; }
.nl-featured__media { min-height: 320px; background: var(--nl-n100); }
.nl-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.nl-featured__body { background: var(--nl-navy-800); color: #cdd7de; padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.nl-featured__eyebrow { color: var(--nl-orange-500); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; }
.nl-featured__title { color: #fff; font-size: 32px; margin: 0 0 12px; }
.nl-featured__excerpt { color: #cdd7de; margin: 0 0 20px; }

/* ---- Article: centered header ------------------------------------------ */
.nl-article-head { text-align: center; max-width: 760px; margin-inline: auto; }
.nl-article-head__meta { color: var(--nl-orange-600); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; }
.nl-article-head h1 { color: var(--nl-navy-900); }
.nl-article-head__by { color: var(--nl-text-2); font-size: 14px; margin: 10px 0 0; }

/* ---- Centered empty state (no-results / 404) --------------------------- */
.nl-center { text-align: center; max-width: 620px; margin-inline: auto; padding: clamp(56px, 9vw, 120px) 16px; }
.nl-center h1 { color: var(--nl-navy-900); }
.nl-center__eyebrow { color: var(--nl-orange-500); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 12px; }
.nl-center__lede { color: var(--nl-text-2); font-size: 18px; margin: 0 0 28px; }
.nl-center__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.nl-center .search-form { max-width: 480px; margin: 0 auto 20px; }
.nl-404-num { font-family: var(--nl-display); font-weight: 800; font-size: clamp(64px, 10vw, 120px); line-height: 1; color: var(--nl-orange-500); }

/* ---- Location detail: areas + reviews ---------------------------------- */
.nl-areas-list { columns: 2; column-gap: 24px; list-style: none; margin: 12px 0 0; padding: 0; }
.nl-areas-list li { padding: 6px 0; color: var(--nl-text); break-inside: avoid; }
.nl-map { margin-top: 16px; aspect-ratio: 16 / 9; border-radius: 4px; background:
  radial-gradient(circle at 30% 40%, rgba(240,100,43,0.10), transparent 40%),
  linear-gradient(135deg, var(--nl-navy-100), #dbe6ee); border: 1px solid var(--nl-border);
  display: flex; align-items: center; justify-content: center; color: var(--nl-navy-800); position: relative; }
.nl-map__pin { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; background: #fff; padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(9,47,75,0.15); }
.nl-map__pin svg { color: var(--nl-orange-500); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .nl-svc-grid, .nl-loc-grid, .nl-article-grid, .nl-process, .nl-plans, .nl-svc-photo-grid, .nl-review-cards, .nl-team-grid { grid-template-columns: repeat(2, 1fr); }
  .nl-steps { grid-template-columns: repeat(3, 1fr); }
  .nl-footer__grid { grid-template-columns: 1fr 1fr; }
  .nl-footer__brand { grid-column: 1 / -1; }
  .nl-reviews__inner, .nl-two-col, .nl-featured { grid-template-columns: 1fr; }
  .nl-featured__media { min-height: 220px; }
}
/* Header collapses to the drawer earlier than the layout, to avoid the nav +
   actions overflowing at tablet widths. */
@media (max-width: 1080px) {
  .nl-header__inner { min-height: 64px; }
  .nl-logo svg { height: 36px; }
  .nl-nav { position: fixed; inset: 64px 0 auto 0; background: #fff; border-bottom: 1px solid var(--nl-border); padding: 12px 24px 24px; transform: translateY(-120%); transition: transform 220ms ease; z-index: 90; margin: 0; }
  .nl-nav.is-open { transform: translateY(0); box-shadow: 0 16px 40px rgba(0,0,0,0.14); }
  .nl-nav__list { flex-direction: column; gap: 4px; }
  .nl-nav__list a { display: flex; min-height: 44px; align-items: center; }
  .nl-nav-toggle { display: inline-flex; }
}

@media (max-width: 860px) {
  .nl-header__phone span, .nl-header__quote { display: none; }
  .nl-hero__inner, .nl-trust__inner, .nl-svc-grid, .nl-cta__inner, .nl-locations__inner, .nl-split, .nl-loc-grid, .nl-article-grid { grid-template-columns: 1fr; }
  .nl-hero__inner { display: flex; flex-direction: column-reverse; }
  .nl-hero__media { aspect-ratio: 16 / 10; min-height: 0; width: 100%; }
  .nl-hero__text { padding: 40px var(--nl-gutter); }
  .nl-trust__item:not(:first-child)::before { display: none; }
  .nl-trust__item + .nl-trust__item { border-top: 1px solid var(--nl-border); }
  .nl-field-row { grid-template-columns: 1fr; }
  .nl-footer__grid { grid-template-columns: 1fr; }
  .nl-sticky { display: flex; }
  body.northline { padding-bottom: 56px; }
  .nl-split__media { order: -1; }
  .nl-process, .nl-plans, .nl-steps, .nl-svc-photo-grid, .nl-review-cards, .nl-team-grid { grid-template-columns: 1fr; }
  .nl-plan.is-featured { order: -1; }
  .nl-areas-list { columns: 1; }
}
@media (max-width: 520px) {
  .nl-svc-grid, .nl-loc-grid, .nl-article-grid { grid-template-columns: 1fr; }
  .nl-rating { gap: 16px; }
}

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }