/* =============================================================================
   Nu-Look Carpet & Upholstery Cleaning — brand layer
   -----------------------------------------------------------------------------
   The design source of truth. Token values come from design/tokens.md, which in
   turn comes verbatim from the approved mockups in design/mockups/.

   To re-skin: edit the :root block below and re-run deploy/02-theme-plugins.sh.
   Nothing else in the repo needs to change.
   ========================================================================== */

:root {
  /* Blues — brand, headers, hero */
  --nl-teal:      #2d5ca0;
  --nl-teal-d:    #234d86;
  --nl-teal-dd:   #16345c;
  --nl-teal-l:    #4a7fc0;
  --nl-teal-soft: #e7eff8;

  /* Green — call-to-action ONLY. See the contrast note below. */
  --nl-fresh:      #2f9e5f;
  --nl-fresh-d:    #268650;
  --nl-fresh-soft: #e6f4ec;

  /* Amber — review stars, used sparingly */
  --nl-amber: #e2a33c;

  /* Text */
  --nl-ink:   #16233a;
  --nl-ink2:  #37475f;
  --nl-soft:  #647087;
  --nl-muted: #93a1b8;

  /* Surfaces */
  --nl-line:  #dde5ef;
  --nl-paper: #f4f7fb;
  --nl-white: #fff;

  /* Type */
  --nl-font-head: "Poppins", system-ui, -apple-system, sans-serif;
  --nl-font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --nl-radius:    14px;
  --nl-radius-sm: 10px;
  --nl-shadow:    0 10px 30px rgba(22, 52, 92, .08);
  --nl-shadow-lg: 0 18px 50px rgba(22, 52, 92, .14);
  --nl-section:   clamp(3rem, 7vw, 5.5rem);
}

/* -----------------------------------------------------------------------------
   CONTRAST RULE — not a style preference

   --nl-fresh (#2f9e5f) on white is ~3.1:1. That clears WCAG AA for large text
   and fails it for body copy. So: white text on a green button at 16px/600+,
   never green text in prose. Inline links use --nl-teal, which clears AA on both
   white and --nl-paper. Enforced structurally below — there is deliberately no
   utility class that sets green as a text colour.
   -------------------------------------------------------------------------- */

/* ============================================================ ICONS ======== */

/* Inline SVG from Phosphor (see mu-plugins/nulook-icons.php). Sized in em so an
   icon always matches the text it sits beside, and vertical-align keeps it on
   the optical baseline rather than the box baseline. */
.nl-icon {
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
}
.nl-star { color: var(--nl-amber); }

/* ============================================================ BASE ========= */

body {
  font-family: var(--nl-font-body);
  color: var(--nl-ink2);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Full-width sections are laid out with the 100vw negative-margin trick, and
   100vw includes the scrollbar gutter. That overflowed the viewport by the
   scrollbar's width (~7px) and put a horizontal scrollbar on every page.
   `clip` rather than `hidden` because `hidden` silently breaks position:sticky
   on descendants. */
html { overflow-x: clip; }
body  { overflow-x: clip; max-width: 100%; }

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nl-font-head);
  color: var(--nl-ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem);  }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem);  font-weight: 600; }

a       { color: var(--nl-teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--nl-teal-d); }

/* Visible focus ring. Removing this fails keyboard accessibility outright. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--nl-teal-l);
  outline-offset: 2px;
}

/* ============================================================ HELPERS ====== */

.nl-eyebrow {
  font-family: var(--nl-font-head);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nl-teal);
  margin-bottom: .5rem;
}
.nl-hero .nl-eyebrow { color: #9dbde8; }   /* on the dark hero */

.nl-lede { font-size: 1.1rem; color: var(--nl-soft); }

.nl-section        { padding-block: var(--nl-section); }
.nl-section-paper  { background: var(--nl-paper); padding-block: var(--nl-section); }
.nl-section-navy   { background: var(--nl-teal-dd); padding-block: var(--nl-section); color: #dbe6f4; }
.nl-section-navy h2, .nl-section-navy h3 { color: #fff; }

/* ============================================================ TOP BAR ====== */

.nl-topbar {
  background: var(--nl-teal-dd);
  color: #c4d6ef;
  font-size: .92rem;
  padding: .55rem 0;
  text-align: center;
}
.nl-topbar strong { color: #fff; }
.nl-topbar a      { color: #fff; text-decoration: none; font-weight: 600; }

/* ============================================================ HERO ========= */

.nl-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #1d4576 0%, var(--nl-teal-dd) 55%, #12294a 100%);
  color: #dbe6f4;
  padding-block: clamp(3rem, 7vw, 6rem);
}

/* Concentric arcs bleeding off the right edge, as in the approved reference.
   Pseudo-element so it costs no markup, pointer-events:none so it can never
   swallow a click on the CTA sitting near it. */
.nl-hero::after {
  content: "";
  position: absolute;
  right: -18%;
  top: 50%;
  translate: 0 -50%;
  width: min(1100px, 85vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle,
    transparent 0 30%,
    rgba(255,255,255,.045) 30% 30.35%,
    transparent 30.35% 44%,
    rgba(255,255,255,.038) 44% 44.35%,
    transparent 44.35% 59%,
    rgba(255,255,255,.03) 59% 59.35%,
    transparent 59.35% 75%,
    rgba(255,255,255,.022) 75% 75.35%,
    transparent 75.35%);
}
/* Hero content must sit above the arcs. */
.nl-hero > *      { position: relative; z-index: 1; }

.nl-hero h1 {
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.nl-hero-sub     { color: #b9cde6; font-size: clamp(1rem, 1.55vw, 1.12rem); max-width: 36rem; line-height: 1.7; }
.nl-hero-img img { border-radius: var(--nl-radius); box-shadow: var(--nl-shadow-lg); }

/* The reference puts a short rule before the eyebrow. Deliberately omitted at
   the client's request, so the eyebrow is the label alone. */

/* Floating review card, sitting below and left of the hero photo as in the
   reference rather than overlapping its corner. */
.nl-hero-badge {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(6, 20, 40, .28);
  padding: 1rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .95rem;
  margin-top: 2rem;
  position: relative;
  z-index: 2;
}
.nl-hero-badge .nl-score {
  font-family: var(--nl-font-head);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--nl-ink);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.nl-hero-badge .nl-score-meta  { display: flex; flex-direction: column; gap: .15rem; }
.nl-hero-badge .nl-score-stars { display: flex; gap: .1rem; color: var(--nl-amber); }
.nl-hero-badge .nl-score-stars .nl-icon { width: 1rem; height: 1rem; }
.nl-hero-badge .nl-score-label { font-size: .82rem; color: var(--nl-soft); line-height: 1.35; white-space: nowrap; }

/* Hero trust row. Each item gets a filled green tick disc, per the reference. */
/* One row on desktop, per the reference. The gap is tuned so all three fit
   beside a 52% hero column rather than wrapping the third onto its own line. */
.nl-hero-trust {
  display: flex; flex-wrap: wrap; gap: .75rem 1.35rem;
  margin-top: 2rem; color: #c4d6ef; font-size: .9rem;
}
.nl-hero-trust span {
  display: inline-flex; align-items: center; gap: .6rem;
}
/* The tick is a real Phosphor icon in the markup, not a CSS dingbat. This just
   gives it the green disc. */
.nl-hero-trust span > .nl-icon {
  flex: none;
  box-sizing: border-box;
  width: 1.45rem; height: 1.45rem;
  padding: .3rem;
  border-radius: 50%;
  background: rgba(47, 158, 95, .22);
  border: 1px solid rgba(47, 158, 95, .55);
  color: #6fdc9c;
}

/* ============================================================ BUTTONS ====== */

.wp-block-button__link,
.nl-btn {
  font-family: var(--nl-font-head);
  font-weight: 700;
  font-size: 1rem;              /* keeps green/white at AA "large text" */
  border-radius: 12px;
  padding: 1rem 1.9rem;
  transition: transform .12s ease, background-color .12s ease;
  text-decoration: none;
}
/* Tactile press, so a tap feels acknowledged. */
.wp-block-button__link:active,
.nl-btn:active { transform: translateY(1px); }
.wp-block-button__link:hover,
.nl-btn:hover { transform: translateY(-1px); }

/* -----------------------------------------------------------------------------
   Button specificity note.

   GeneratePress prints a global rule for
     button, input[type=submit], a.button, a.wp-block-button__link, ...
   into an inline <style> in the head. That ties a plain
   `.nl-btn-call .wp-block-button__link` on specificity and wins on source order,
   which painted the outlined hero Call button solid green.

   So these selectors deliberately chain both classes on the wrapper —
   `.wp-block-button.nl-btn-call > .wp-block-button__link` — to sit clearly above
   it. This is specificity used on purpose, not !important used in frustration.
   -------------------------------------------------------------------------- */

/* The Gutenberg wrapper is a layout box only. Never paint it, or any border or
   background set for the button shows up twice, one ring inside the other. */
.wp-block-button { border: 0; background: none; padding: 0; }

/* Primary CTA — the only sanctioned use of the green */
.wp-block-button.nl-btn-quote > .wp-block-button__link,
a.nl-btn-quote {
  background: var(--nl-fresh);
  background-color: var(--nl-fresh);
  color: #fff;
  border: 2px solid var(--nl-fresh);
}
.wp-block-button.nl-btn-quote > .wp-block-button__link:hover,
a.nl-btn-quote:hover {
  background-color: var(--nl-fresh-d);
  border-color: var(--nl-fresh-d);
  color: #fff;
}

/* Call button — outlined against the dark hero */
.wp-block-button.nl-btn-call > .wp-block-button__link,
a.nl-btn-call {
  background: transparent;
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .55);
}
.wp-block-button.nl-btn-call > .wp-block-button__link:hover,
a.nl-btn-call:hover {
  background-color: rgba(255, 255, 255, .16);
  color: #fff;
}

/* ...but on a light section an outlined-white button would be invisible, so it
   becomes a soft teal fill instead. */
.nl-section .wp-block-button.nl-btn-call > .wp-block-button__link,
.nl-section-paper .wp-block-button.nl-btn-call > .wp-block-button__link {
  background-color: var(--nl-teal-soft);
  color: var(--nl-teal-dd);
  border-color: var(--nl-teal-soft);
}
.nl-section .wp-block-button.nl-btn-call > .wp-block-button__link:hover,
.nl-section-paper .wp-block-button.nl-btn-call > .wp-block-button__link:hover {
  background-color: #d0dff2;
  color: var(--nl-teal-dd);
}

/* ============================================================ TRUST BAR ==== */

.nl-trustbar {
  background: var(--nl-paper);
  border-block: 1px solid var(--nl-line);
  padding-block: 1.15rem;
}
.nl-trustbar .wp-block-column {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--nl-font-head); font-weight: 600;
  color: var(--nl-ink); font-size: .95rem; text-align: center;
}

/* ============================================================ CARDS ======== */

/* Equal-height cards, done with flex rather than height:100%.
   height:100% made a card resolve to its COLUMN's height; when the card's own
   content was taller it overflowed the column and painted over whatever came
   next (this hid the "Reviews & gallery" button behind two review cards).
   Stretching the column instead lets it grow to the tallest card. */
.wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
.wp-block-columns > .wp-block-column > .nl-card,
.wp-block-columns > .wp-block-column > .nl-review { flex: 1 1 auto; }

.nl-card {
  background: #fff;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  padding: 1.6rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.nl-card:hover { box-shadow: var(--nl-shadow); transform: translateY(-2px); }
.nl-card h3    { margin-top: .35rem; margin-bottom: .5rem; }
.nl-card p     { color: var(--nl-soft); font-size: .97rem; margin-bottom: 0; }

/* Service card with a photo at the top */
.nl-service-card img {
  border-radius: var(--nl-radius-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  margin-bottom: 1rem;
}

/* ============================================================ REVIEWS ====== */

.nl-review {
  background: #fff;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  padding: 1.6rem;
}

/* Star row. The icons are inline SVG with fill="currentColor", so the colour is
   set here on the wrapper and inherited. */
.nl-review-stars {
  display: flex;
  gap: .12rem;
  color: var(--nl-amber);
  margin-bottom: .6rem;
}
.nl-review-stars .nl-icon { width: 1.05rem; height: 1.05rem; }

.nl-review p      { font-size: 1rem; color: var(--nl-ink2); font-style: italic; }
.nl-review cite   { display: block; margin-top: .9rem; font-style: normal;
                    font-family: var(--nl-font-head); font-weight: 600; color: var(--nl-ink); }
.nl-review .nl-review-src { color: var(--nl-muted); font-size: .85rem; font-weight: 400; }

/* ============================================================ SUBURBS ====== */

/* Plain text, deliberately. Suburb names must be crawlable (FR-005) — never
   baked into an image and never injected by script. */
.nl-suburbs ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .55rem 1rem;
}
.nl-suburbs li {
  padding: .5rem .8rem;
  background: #fff;
  border: 1px solid var(--nl-line);
  border-radius: 8px;
  font-size: .95rem;
  color: var(--nl-ink2);
}
.nl-suburb-group h3 {
  margin-top: 2rem; margin-bottom: .9rem;
  padding-bottom: .5rem; border-bottom: 2px solid var(--nl-teal-soft);
  color: var(--nl-teal-dd);
}

/* ============================================================ GALLERY ====== */

.nl-gallery figure { border-radius: var(--nl-radius); overflow: hidden; }
.nl-gallery img    { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.nl-ba-label {
  font-family: var(--nl-font-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--nl-soft); margin-top: .5rem;
}

/* ============================================================ FORMS ======== */

.fluentform .ff-el-input--label label {
  font-family: var(--nl-font-head);
  font-weight: 600;
  color: var(--nl-ink);
  font-size: .95rem;
}
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=date],
.fluentform select,
.fluentform textarea {
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius-sm);
  padding: .75rem .9rem;
  font-family: var(--nl-font-body);
  font-size: 1rem;      /* 16px minimum — anything less makes iOS zoom on focus */
  width: 100%;
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus { border-color: var(--nl-teal-l); }

.fluentform .ff-btn-submit {
  background: var(--nl-fresh);
  color: #fff;
  font-family: var(--nl-font-head);
  font-weight: 600;
  font-size: 1rem;
  border: 0;
  border-radius: var(--nl-radius-sm);
  padding: .9rem 1.75rem;
  cursor: pointer;
}
.fluentform .ff-btn-submit:hover { background: var(--nl-fresh-d); }

/* Errors must be legible, not decorative */
.fluentform .error, .fluentform .text-danger { color: #b32020; font-size: .9rem; }

.nl-form-card {
  background: #fff;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

/* ============================================================ CONTACT ====== */

.nl-contact-detail {
  display: flex; gap: .9rem; align-items: flex-start;
  padding-block: .9rem; border-bottom: 1px solid var(--nl-line);
}
.nl-contact-detail:last-child { border-bottom: 0; }
.nl-contact-detail strong { font-family: var(--nl-font-head); color: var(--nl-ink); display: block; }
.nl-contact-detail a      { font-size: 1.05rem; font-weight: 600; }

.nl-map iframe { width: 100%; height: 380px; border: 0; border-radius: var(--nl-radius); display: block; }

/* ============================================================ CTA BAND ===== */

.nl-cta-band {
  background: linear-gradient(160deg, var(--nl-teal) 0%, var(--nl-teal-dd) 100%);
  color: #dbe6f4;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.nl-cta-band h2 { color: #fff; }
.nl-cta-band p  { color: #c4d6ef; }

/* ============================================================ FOOTER ======= */

.site-footer, .nl-footer { background: var(--nl-teal-dd); color: #9dbde8; }
.nl-footer a            { color: #c4d6ef; text-decoration: none; }
.nl-footer a:hover      { color: #fff; text-decoration: underline; }
.nl-footer h4           { color: #fff; font-family: var(--nl-font-head); font-size: 1rem; margin-bottom: .7rem; }

/* ============================================================ HEADER ======= */

.main-navigation                      { background: #fff; border-bottom: 1px solid var(--nl-line); }
.main-navigation a                    { font-family: var(--nl-font-head); font-weight: 600; color: var(--nl-ink); }
.main-navigation .current-menu-item > a { color: var(--nl-teal); }
.site-logo img                        { max-height: 62px; width: auto; }

/* Desktop header row. MUST stay inside this media query: the flex rules below
   override GeneratePress's display:none on the collapsed mobile menu, which
   renders the whole nav expanded on a phone. */
@media (min-width: 769px) {
  /* Logo and navigation share one row. GeneratePress's float-based header puts the
     logo on its own line once the nav block gets tall; flex keeps them aligned. */
  .site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 1rem;
    /* Wider than the 1140px content container: logo + 7 nav items + phone pill +
       CTA does not fit in 1140 and the last button gets clipped. The reference
       runs the header close to the viewport edge for the same reason. */
    max-width: 1360px;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
  .site-header .inside-header .site-logo { flex: none; margin: 0; }
  .site-header .inside-header .main-navigation { flex: 1 1 auto; }

  /* -----------------------------------------------------------------------------
     Header row.

     GeneratePress floats the navigation right, and the CTA is injected inside the
     same container via generate_inside_navigation. Left alone, the two stack: CTA
     on one line, menu on the next. Flexing the container puts menu and CTA on one
     row, with `order` placing the buttons last as in the reference.
     -------------------------------------------------------------------------- */
  .main-navigation .inside-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .main-navigation .inside-navigation .main-nav { order: 1; }
  .main-navigation .inside-navigation .nl-header-cta { order: 2; }
  .main-navigation .main-nav > ul { display: flex; flex-wrap: nowrap; }
  /* Without these the flex row shrinks each item until labels break mid-phrase
     ("Bond / Clean", "Service / Areas"). Items keep their intrinsic width. */
  .main-navigation .main-nav > ul > li      { flex: none; }
  .main-navigation .main-nav > ul > li > a  { white-space: nowrap; padding-inline: .7rem; font-size: .97rem; }
}

/* Header call + quote buttons */
.nl-header-cta { display: flex; gap: .6rem; align-items: center; flex: none; }
.nl-header-call {
  background: var(--nl-teal-soft); color: var(--nl-teal-dd);
  font-family: var(--nl-font-head); font-weight: 700;
  padding: .75rem 1.35rem; border-radius: 12px; text-decoration: none;
  white-space: nowrap;
}
.nl-header-call:hover { background: #d0dff2; color: var(--nl-teal-dd); }
.nl-header-quote {
  background: var(--nl-fresh); color: #fff;
  font-family: var(--nl-font-head); font-weight: 700;
  padding: .75rem 1.5rem; border-radius: 12px; text-decoration: none;
  white-space: nowrap;
}
.nl-header-quote:hover { background: var(--nl-fresh-d); color: #fff; }

/* -----------------------------------------------------------------------------
   Sticky mobile call bar.

   FR-008 / SC-001: tap-to-call reachable without scrolling, on every page. The
   desktop header CTA collapses on small screens, so this is what actually
   satisfies the requirement on a phone. Body gets bottom padding so the bar
   never covers the last line of content or a submit button.
   -------------------------------------------------------------------------- */
.nl-callbar { display: none; }

@media (max-width: 768px) {
  .nl-callbar {
    display: flex;
    position: fixed; inset: auto 0 0 0; z-index: 9999;
    background: var(--nl-teal-dd);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    gap: .55rem;
  }
  .nl-callbar a {
    flex: 1; text-align: center;
    font-family: var(--nl-font-head); font-weight: 700; font-size: 1rem;
    padding: .8rem .5rem; border-radius: var(--nl-radius-sm); text-decoration: none;
  }
  .nl-callbar .nl-callbar-phone { background: #fff; color: var(--nl-teal-dd); }
  .nl-callbar .nl-callbar-quote { background: var(--nl-fresh); color: #fff; }

  body { padding-bottom: 4.75rem; }

  .nl-header-cta   { display: none; }   /* mobile header is logo + hamburger only */
  .nl-hero-badge   { margin-top: 1.5rem; width: 100%; justify-content: flex-start; }
  .nl-hero-trust   { gap: .7rem 1.25rem; font-size: .9rem; }
  .site-logo img   { max-height: 48px; }

  /* Full-width stacked CTAs, per the mobile reference. A half-width button on a
     phone is a smaller tap target for no benefit. */
  .nl-hero .wp-block-buttons {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
  }
  .nl-hero .wp-block-button { width: 100%; }
  .nl-hero .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1.05rem 1rem;
  }

  .nl-hero::after { right: -45%; opacity: .7; }
}

/* ============================================================ MOTION ======= */

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

/* ============================================================ PRINT ======== */

@media print {
  .nl-callbar, .nl-header-cta, .nl-cta-band, .nl-topbar { display: none !important; }
  body { padding-bottom: 0; }
}


/* =============================================================== MOBILE ==== */
/*
   Mobile header and menu, matching the SEQLD reference:
   row 1 = logo | phone pill | toggle,  row 2 (when open) = the menu panel.

   The phone pill stays visible in the header on mobile. Hiding it and relying
   only on the sticky bottom bar loses the number at the exact moment someone is
   deciding whether to call.
*/
@media (max-width: 768px) {

  /* nowrap + a shrinkable nav keeps logo, pill and toggle on one row. With wrap
     enabled, opening the menu widened the nav past the container and threw the
     logo onto its own line, right-aligned. */
  .site-header { position: relative; }
  .site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: .6rem;
    padding: .7rem clamp(.9rem, 4vw, 1.25rem);
  }
  .site-header .inside-header .site-logo { flex: 0 0 auto; margin: 0; }
  .site-logo img { max-height: 44px; width: auto; }

  /* position:static so the absolutely-positioned panel below resolves against
     .site-header and spans the full width, not just the nav column. */
  .main-navigation {
    flex: 1 1 0;
    min-width: 0;
    position: static;
    background: transparent;
    border-bottom: 0;
  }
  .main-navigation .inside-navigation { position: static; }
  .main-navigation .inside-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
  }
  /* Hide the word 'Menu'; the bars icon is universally understood and the row
     is tight at 360px. */
  .main-navigation .menu-toggle .mobile-menu { display: none; }

  /* No CTAs in the mobile header. The sticky bar at the bottom already carries
     both Call and Get a quote; repeating them beside the hamburger made a 390px
     row read as cluttered. Mobile header is logo + toggle, nothing else. */
  .nl-header-cta { display: none; }

  /* Top announcement bar hidden on mobile. It wrapped to two lines on a phone,
     pushed the hero down, and repeated the phone number the sticky bar already
     shows. Kept on desktop, where it costs nothing. */
  .nl-topbar { display: none; }

  /* GeneratePress makes the toggle a full-width block on mobile. Compact button
     instead, sitting at the right-hand end of the header row. */
  .main-navigation .menu-toggle {
    order: 2;
    flex: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: .62rem .8rem;
    background: var(--nl-paper);
    border: 1px solid var(--nl-line);
    border-radius: 10px;
    color: var(--nl-ink);
    line-height: 1;
  }
  .main-navigation .menu-toggle:hover { background: var(--nl-teal-soft); }

  /* Panel is taken out of flow and pinned under the header, full width. In flow
     it forced the header row to wrap; as an overlay it also matches how a mobile
     menu is expected to behave. */
  .main-navigation .main-nav {
    position: absolute;
    left: clamp(.9rem, 4vw, 1.25rem);
    right: clamp(.9rem, 4vw, 1.25rem);
    top: 100%;
    z-index: 60;
  }
  /* Appearance only. Visibility stays GeneratePress's job (.toggled), or the
     menu renders permanently open. */
  .main-navigation .main-nav > ul {
    background: var(--nl-paper);
    border: 1px solid var(--nl-line);
    border-radius: 12px;
    margin-top: .6rem;
    padding: .25rem 0;
    overflow: hidden;
  }
  .main-navigation.toggled .main-nav > ul { display: block; }
  .main-navigation .main-nav > ul > li     { display: block; width: 100%; float: none; }
  .main-navigation .main-nav > ul > li > a {
    display: block;
    text-align: left;
    padding: 1.05rem 1.15rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--nl-line);
    white-space: normal;
  }
  .main-navigation .main-nav > ul > li:last-child > a { border-bottom: 0; }
  .main-navigation .main-nav > ul > li.current-menu-item > a { color: var(--nl-teal); }

  /* Hero */
  .nl-hero::after { right: -45%; opacity: .6; }
  .nl-hero-badge  { margin-top: 1.5rem; width: 100%; justify-content: flex-start; }
  .nl-hero-trust  { gap: .7rem 1.1rem; font-size: .9rem; }

  /* Full-width stacked CTAs. A half-width button on a phone is a smaller tap
     target for no benefit. */
  .nl-hero .wp-block-buttons { display: flex; flex-direction: column; gap: .75rem; width: 100%; }
  .nl-hero .wp-block-button  { width: 100%; }
  .nl-hero .wp-block-button__link {
    display: block; width: 100%; text-align: center; padding: 1.05rem 1rem;
  }

  /* Sticky call bar clearance */
  body { padding-bottom: 4.9rem; }
}

/* Small phones: 320-380px. Long words and the two-up call bar are the pinch
   points here, not the layout. */
@media (max-width: 400px) {
  .nl-header-call { font-size: .88rem; padding: .55rem .8rem; }
  .site-logo img  { max-height: 38px; }
  .nl-hero-trust  { flex-direction: column; gap: .6rem; }
  .nl-callbar a   { font-size: .92rem; padding: .75rem .4rem; }
  .nl-hero-badge  { padding: .85rem 1.1rem; }
}

/* ============================================================ REVIEW PAGER = */
/* Pagination for the reviews wall. Pages are plain hidden divs so the content
   is in the HTML for crawlers even when a page is not visible. */
.nl-rev-pager {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 2rem;
}
.nl-rev-btn {
  font-family: var(--nl-font-head);
  font-weight: 700;
  font-size: .95rem;
  min-width: 2.75rem;
  padding: .6rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--nl-line);
  background: #fff;
  color: var(--nl-ink);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.nl-rev-btn:hover        { background: var(--nl-teal-soft); border-color: var(--nl-teal-soft); }
.nl-rev-btn.is-current   { background: var(--nl-teal); border-color: var(--nl-teal); color: #fff; }
.nl-rev-btn:focus-visible{ outline: 3px solid var(--nl-teal-l); outline-offset: 2px; }

/* Council cards on Service Areas */
.nl-council h3          { color: var(--nl-teal-dd); }
.nl-council-count {
  font-family: var(--nl-font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nl-teal);
  margin-top: .9rem;
  margin-bottom: 0;
}

/* ============================================================ FOOTER ======= */

.nl-footer {
  background: var(--nl-teal-dd);
  color: #a9c3e0;
  padding-block: clamp(2.75rem, 5vw, 4rem);
  font-size: .95rem;
}
.nl-footer-inner {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
}
.nl-footer h4 {
  color: #fff;
  font-family: var(--nl-font-head);
  font-size: .95rem;
  letter-spacing: .04em;
  margin: 0 0 1rem;
}
.nl-footer p    { margin: 0 0 .8rem; line-height: 1.6; }
.nl-footer ul   { list-style: none; margin: 0; padding: 0; }
.nl-footer li   { margin-bottom: .55rem; }
.nl-footer a    { color: #c4d6ef; text-decoration: none; }
.nl-footer a:hover { color: #fff; text-decoration: underline; }

.nl-footer-name {
  font-family: var(--nl-font-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.25;
}
.nl-footer-brand img { max-width: 200px; height: auto; margin-bottom: 1rem; }

.nl-footer-rating {
  display: flex; align-items: center; gap: .45rem;
  color: #dbe6f4;
}
.nl-footer-rating strong { color: #fff; font-size: 1.05rem; }

.nl-footer-phone a {
  font-family: var(--nl-font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
}
.nl-footer-contact p { display: flex; align-items: flex-start; gap: .55rem; }
.nl-footer-contact .nl-icon { margin-top: .25rem; color: #7fa6d4; }
.nl-footer-hours span { color: #a9c3e0; }

/* The only green in the footer, and it is a button. */
.nl-footer-cta {
  display: inline-block;
  margin-top: .5rem;
  background: var(--nl-fresh);
  color: #fff !important;
  font-family: var(--nl-font-head);
  font-weight: 700;
  padding: .8rem 1.4rem;
  border-radius: 12px;
  text-decoration: none !important;
}
.nl-footer-cta:hover { background: var(--nl-fresh-d); }

/* GeneratePress' own copyright bar sits below ours; tone it down so the two
   read as one footer rather than two. */
.site-info {
  background: #0f2545;
  color: #7fa6d4;
  font-size: .87rem;
  padding-block: 1.1rem;
}
.site-info a { color: #a9c3e0; }

@media (max-width: 900px) {
  .nl-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .nl-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .nl-footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ============================================================ LGA MAP ====== */

.nl-lga-map { width: 100%; height: auto; display: block; }
.nl-lga path { transition: fill-opacity .15s ease; }
.nl-lga:hover path { fill-opacity: .68; }

.nl-lga-legend {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 1.75rem; margin-top: 1.25rem;
}
.nl-lga-legend span {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--nl-font-head); font-weight: 600;
  font-size: .95rem; color: var(--nl-ink);
}
.nl-lga-legend i {
  width: 1rem; height: 1rem; border-radius: 4px; display: inline-block;
}

/* The contact paragraphs are flex rows of [icon][content]. Without a single
   wrapper the <br>-separated hours each became their own flex item and laid out
   side by side instead of stacking. */
.nl-footer-hours-list { display: block; line-height: 1.7; }