/* Northline Group — bespoke landing styles (built on theme.css tokens) */

/* ---------- Header nav ---------- */

/* lucide:chevron-down caret on the Resources dropdown */
.nl-nav-drop {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.nl-nav-drop::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
  mask: var(--icon-chevron-down) center / contain no-repeat;
}

/* Hamburger and drawer are mobile-only chrome; desktop never renders them. */
.nav-toggle,
.mobile-nav { display: none; }

/* ---------- Hero ---------- */

.nl-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

.nl-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 44%) 1fr;
  min-height: 560px;
  align-items: center;
  /* keeps the headline above the absolutely-positioned photo, which would
     otherwise clip the overhanging end of the longest line */
  position: relative;
  z-index: 1;
}

.nl-hero-copy {
  padding-block: 4rem;
  max-width: 460px;
}

.nl-hero-title {
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 1.4rem;
}

.nl-hero-title span { display: block; }

.nl-hero-title-accent { color: var(--color-accent); }

.nl-hero-sub {
  color: var(--color-ink-muted);
  font-size: 1.02rem;
  max-width: 40ch;
  margin-bottom: 2rem;
}

.nl-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Light-dusk hero photograph layered over the painted fallback gradient.
   The photo asset itself is graded light (shadows lifted, white wash) so the
   left-hand fade into the copy column can stay faint instead of having to
   fight a near-black frame. */
.nl-hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Reaches further under the copy column than it needs to, so the fade can
     finish at zero alpha well before the element's own left edge. */
  width: 66%;
  /* The dissolve lives on the element's alpha, not on a white veil painted
     over it: at the left edge the art contributes nothing at all, so there is
     no edge line where it stops. The veil below only lightens what remains. */
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.06) 12%,
    rgba(0, 0, 0, 0.28) 24%,
    rgba(0, 0, 0, 0.68) 38%,
    rgba(0, 0, 0, 1) 52%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.06) 12%,
    rgba(0, 0, 0, 0.28) 24%,
    rgba(0, 0, 0, 0.68) 38%,
    rgba(0, 0, 0, 1) 52%);
  background:
    url("../../assets/img/northline/hero.webp") center / cover no-repeat,
    /* pool water strip */
    linear-gradient(180deg, rgba(0,0,0,0) 78%, rgba(150, 190, 214, 0.75) 80%, rgba(118, 158, 190, 0.85) 100%),
    /* warm interior glow of the house */
    radial-gradient(60% 42% at 74% 46%, rgba(250, 226, 190, 0.5) 0%, rgba(250, 226, 190, 0) 70%),
    /* sunset glow */
    radial-gradient(90% 70% at 30% 30%, rgba(250, 236, 216, 0.7) 0%, rgba(250, 236, 216, 0) 60%),
    /* sky */
    linear-gradient(180deg, #f2f6fb 0%, #e2ebf5 38%, #c8d7e8 62%, #a7bad3 84%, #8ba1bf 100%);
}

.nl-hero-art::before {
  /* Wash that lifts the photo toward the page white ahead of the alpha fade,
     so the two taper together instead of the image going out at full tone. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.92) 14%,
    rgba(255, 255, 255, 0.6) 28%,
    rgba(255, 255, 255, 0.26) 42%,
    rgba(255, 255, 255, 0) 58%);
}

.nl-hero-art::after {
  /* painted glass-house silhouette retired now the photo is wired in */
  content: none;
}

/* ---------- What we do + featured listing ---------- */

/* Services and the featured listing are two separate statements, so they get
   a row each at full container width rather than competing side by side. */
.nl-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4.5rem;
  align-items: start;
}

.nl-services-head {
  text-align: center;
  margin-inline: auto;
  margin-bottom: 2.25rem;
}

.nl-service-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.nl-service {
  padding-inline: 1.1rem;
  text-align: center;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nl-service:first-child { border-left: none; }

/* Traced feature marks. Each file carries the slate ink sampled off the
   mockup, so they are referenced rather than recolored. */
.nl-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.9rem;
}

.nl-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nl-service-title {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.nl-service-text {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  margin-bottom: 0.9rem;
  flex: 1;
}

.nl-service .card-link { font-size: 0.8rem; }

/* Featured listing */

.nl-featured {
  position: relative;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.nl-featured-nav {
  position: absolute;
  top: 2.1rem;
  right: 0;
  display: flex;
  gap: 0.5rem;
}

/* Quiet hairline discs with chevrons — they sit beside section eyebrows, so
   they read as secondary navigation rather than as buttons competing with
   the page's primary actions. */
.nl-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-ink-muted);
  background: transparent;
}

.nl-arrow svg { width: 15px; height: 15px; display: block; }

.nl-testimonials-nav .nl-arrow { border-color: #cdd9ea; }

/* At full width the photo carries the row and the details sit beside it as a
   narrow, unhurried column. */
.nl-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem;
  margin-top: 1.1rem;
}

/* Details read top-down from the eyebrow; the prev/next pair closes the
   column, bottom-aligned against the photo's lower edge. */
.nl-featured-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The listing link and the prev/next pair are one action group. It claims the
   column's remaining height so the arrows can bottom-align here rather than
   against the info column, which lets mobile turn the group into a single row
   without touching anything above it. */
.nl-featured-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
}

.nl-featured-actions .nl-featured-nav {
  position: static;
  margin-top: auto;
  padding-top: 1.5rem;
}

.nl-featured-title {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.nl-featured-loc {
  font-size: 0.88rem;
  color: var(--color-ink-muted);
  margin-bottom: 0.9rem;
}

.nl-spec-list {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.nl-spec-list li { display: inline-flex; align-items: center; gap: 0.35rem; }

/* lucide bed-double / bath / scaling, masked to the row's own gray */
.nl-spec-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.nl-spec-list li:nth-child(1)::before {
  -webkit-mask-image: var(--icon-bed-double);
  mask-image: var(--icon-bed-double);
}

.nl-spec-list li:nth-child(2)::before {
  -webkit-mask-image: var(--icon-bath);
  mask-image: var(--icon-bath);
}

.nl-spec-list li:nth-child(3)::before {
  -webkit-mask-image: var(--icon-scaling);
  mask-image: var(--icon-scaling);
}

.nl-featured-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--color-ink);
  margin-bottom: 0.7rem;
}

.nl-featured-media {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, rgba(32, 48, 76, 0.06) 0%, rgba(32, 48, 76, 0.16) 100%),
    url("../../assets/img/northline/listing.webp") center / cover no-repeat,
    radial-gradient(120% 90% at 82% 18%, rgba(244, 222, 192, 0.65) 0%, rgba(244, 222, 192, 0) 55%),
    linear-gradient(180deg, #e9eff8 0%, #d3dfee 42%, #a9bcd6 68%, #5d7294 88%, #2c3d5c 100%);
  background-size: cover;
  background-position: center;
}

.nl-featured-media::before,
.nl-featured-media::after { content: none; }

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

.nl-stats { padding-block: 3rem; }

.nl-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.nl-stat {
  text-align: center;
  padding-inline: 1rem;
  border-left: 1px solid var(--color-border);
}

.nl-stat:first-child { border-left: none; }

.nl-stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  color: var(--color-ink);
}

.nl-stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-top: 0.3rem;
}

/* ---------- Process ---------- */

.nl-center-head {
  text-align: center;
  margin-inline: auto;
  margin-bottom: 3.25rem;
}

.nl-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  position: relative;
}

.nl-process::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--color-border);
}

.nl-step {
  position: relative;
  text-align: center;
  padding-inline: 0.4rem;
}

.nl-step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  box-shadow: 0 0 0 6px var(--color-bg);
}

.nl-step-title {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.nl-step-text {
  font-size: 0.84rem;
  color: var(--color-ink-muted);
  margin: 0;
}

/* ---------- Testimonials ---------- */

.nl-testimonials { padding-block: var(--section-pad); }

/* Heading and carousel arrows share the top row; the quote cards take the
   full container width on the row beneath. The arrows sit in the same grid
   rather than floating, so their right edge is the cards' right edge. */
.nl-testimonials-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 1.5rem;
  align-items: end;
}

.nl-testimonials-head {
  grid-column: 1;
  grid-row: 1;
}

.nl-testimonials-head .section-title { margin-bottom: 0; }

.nl-quote-row {
  grid-column: 1 / -1;
  grid-row: 2;
}

.nl-testimonials-head .section-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

.nl-quote-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.nl-quote {
  margin: 0;
  padding: 1.6rem 1.6rem 1.5rem;
  border: none;
  box-shadow: var(--shadow-sm);
}

.nl-quote-mark {
  display: block;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}

.nl-quote-mark svg { width: 22px; height: 22px; display: block; }

.nl-quote blockquote {
  margin: 0 0 1.3rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-ink);
  flex: 1;
}

.nl-quote-byline {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.nl-quote-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-brand);
  background:
    radial-gradient(120% 120% at 30% 25%, #f0e2cd 0%, #c8d5e6 55%, #96accb 100%);
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Headshots layered over the gradient disc; initials go transparent so
   they remain as fallback text if the image ever fails to paint on top.
   No color grade — skin tones are left as shot. */
.nl-quote:nth-child(1) .nl-quote-avatar,
.nl-quote:nth-child(2) .nl-quote-avatar,
.nl-quote:nth-child(3) .nl-quote-avatar {
  color: transparent;
}

.nl-quote:nth-child(1) .nl-quote-avatar {
  background-image:
    url("../../assets/img/pack/headshot-1.webp"),
    radial-gradient(120% 120% at 30% 25%, #f0e2cd 0%, #c8d5e6 55%, #96accb 100%);
}

.nl-quote:nth-child(2) .nl-quote-avatar {
  background-image:
    url("../../assets/img/pack/headshot-2.webp"),
    radial-gradient(120% 120% at 30% 25%, #f0e2cd 0%, #c8d5e6 55%, #96accb 100%);
}

.nl-quote:nth-child(3) .nl-quote-avatar {
  background-image:
    url("../../assets/img/pack/headshot-4.webp"),
    radial-gradient(120% 120% at 30% 25%, #f0e2cd 0%, #c8d5e6 55%, #96accb 100%);
}

.nl-quote-byline strong {
  display: block;
  font-size: 0.9rem;
}

.nl-quote-byline em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.nl-testimonials-nav {
  position: static;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 0.2rem;
}

/* ---------- Insights ---------- */

.nl-insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.nl-insights-head .section-title { margin-bottom: 0; }

.nl-insight-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

/* The photo is part of the card, not a picture sitting on it: it bleeds to
   three edges and the card's own overflow clip rounds its outer corners. */
.nl-insight {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
}

.nl-insight-media {
  flex: none;
  width: 38%;
  min-height: 150px;
  border-radius: 0;
  aspect-ratio: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.nl-insight-media::before,
.nl-insight-media::after { content: none; }

.nl-insight:nth-child(1) .nl-insight-media {
  background-image:
    linear-gradient(180deg, rgba(32, 48, 76, 0.06) 0%, rgba(32, 48, 76, 0.14) 100%),
    url("../../assets/img/northline/insight-skyline.webp"),
    radial-gradient(120% 90% at 82% 18%, rgba(244, 222, 192, 0.65) 0%, rgba(244, 222, 192, 0) 55%),
    linear-gradient(180deg, #e9eff8 0%, #d3dfee 42%, #a9bcd6 68%, #5d7294 88%, #2c3d5c 100%);
}

.nl-insight:nth-child(2) .nl-insight-media {
  background-image:
    linear-gradient(180deg, rgba(32, 48, 76, 0.06) 0%, rgba(32, 48, 76, 0.14) 100%),
    url("../../assets/img/northline/insight-apartments.webp"),
    radial-gradient(120% 90% at 82% 18%, rgba(244, 222, 192, 0.65) 0%, rgba(244, 222, 192, 0) 55%),
    linear-gradient(180deg, #e9eff8 0%, #d3dfee 42%, #a9bcd6 68%, #5d7294 88%, #2c3d5c 100%);
}

.nl-insight:nth-child(3) .nl-insight-media {
  background-image:
    linear-gradient(180deg, rgba(32, 48, 76, 0.06) 0%, rgba(32, 48, 76, 0.14) 100%),
    url("../../assets/img/northline/insight-living.webp"),
    radial-gradient(120% 90% at 82% 18%, rgba(244, 222, 192, 0.65) 0%, rgba(244, 222, 192, 0) 55%),
    linear-gradient(180deg, #e9eff8 0%, #d3dfee 42%, #a9bcd6 68%, #5d7294 88%, #2c3d5c 100%);
}

.nl-insight-body {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.3rem;
  min-width: 0;
}

.nl-insight-date {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 0.4rem;
}

.nl-insight-title {
  font-size: 1.15rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

.nl-insight-text {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  margin-bottom: 0.7rem;
  flex: 1;
}

.nl-insight .card-link { font-size: 0.8rem; }

/* ---------- CTA band ---------- */

.nl-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 140% at 90% 110%, rgba(139, 166, 207, 0.25) 0%, rgba(139, 166, 207, 0) 60%),
    var(--color-brand);
  color: var(--color-on-brand);
  padding-block: 3.25rem;
  margin-top: var(--section-pad);
}

/* Topographic contour lines traced off the band's right-hand side, masked so
   they read as a faint lighter etch on the navy rather than flat artwork. */
.nl-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  pointer-events: none;
  background: url("../../assets/img/northline/pattern-topo-contours.svg") right center / auto 100% no-repeat;
  /* the trace ships as black lines on transparent; inverting flips them to
     the light etch the band shows without touching the alpha channel */
  filter: invert(1);
  opacity: 0.03;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 42%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 42%);
}

.nl-cta-inner { position: relative; z-index: 1; }

.nl-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.nl-cta-title {
  color: var(--color-on-brand);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin-bottom: 0.35rem;
}

.nl-cta-sub {
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  font-size: 0.98rem;
}

/* The outline button of the theme, inverted for the navy band: the band is
   already the loud element, so the action reads as a light hairline on it
   rather than a second solid block. */
.nl-btn-light {
  background: transparent;
  color: var(--color-on-brand);
  border-color: rgba(255, 255, 255, 0.6);
}

.nl-btn-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-on-brand);
}

/* ---------- Footer tweaks ---------- */

.nl-footer { margin-top: 0; }

/* Five columns now the social tiles live under Contact: the freed width goes
   back to the brand blurb and the address line, the two that want it. */
.nl-footer-grid { grid-template-columns: 1.85fr 0.95fr 1.25fr 0.95fr 1.5fr; }

/* lucide phone / mail / map-pin ahead of each contact line */
.nl-footer-contact .footer-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.nl-footer-contact .footer-link::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 0.22em;
  background-color: var(--color-brand);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.nl-footer-contact .footer-link:nth-of-type(1)::before {
  -webkit-mask-image: var(--icon-phone);
  mask-image: var(--icon-phone);
}

.nl-footer-contact .footer-link:nth-of-type(2)::before {
  -webkit-mask-image: var(--icon-mail);
  mask-image: var(--icon-mail);
}

.nl-footer-contact .footer-link:nth-of-type(3)::before {
  -webkit-mask-image: var(--icon-map-pin);
  mask-image: var(--icon-map-pin);
}

/* Social tiles: official brand marks knocked out of a navy square, sitting at
   the foot of the contact column under the address. */
.nl-social-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.nl-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 4px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  text-decoration: none;
}

.nl-social:hover { background: var(--color-brand-deep); }

.nl-social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* LinkedIn's glyph was withdrawn from simple-icons, so its tile carries the
   wordmark as type rather than an approximated vector. */
.nl-social-wordmark {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ---------- Responsive ---------- */

/* Tablet tier. The seven inline links plus the consultation button measure
   ~797px, which with the brand lockup and the container gutters needs about
   1030px of viewport, so the nav is already a drawer by this width, the same
   tier the hero stacks at. */
@media (max-width: 1024px) {
  /* The drawer hangs off the header, so the header is its containing block. */
  .site-header { position: relative; }

  /* Brand and hamburger stay on one line: the stacked-header rule in
     theme.css would otherwise drop the toggle below the lockup. */
  .site-header-inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .site-nav { display: none; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    color: var(--color-brand);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .nav-toggle:hover { background: var(--color-surface-alt); }

  .nav-toggle-icon { width: 24px; height: 24px; }

  /* One button, two glyphs: menu while closed, x while open. */
  .nav-toggle-close { display: none; }

  .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }

  .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

  /* A layer over the page, not a row in it: absolutely placed under the
     header so opening it never moves the hero. */
  .mobile-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition:
      transform 220ms ease,
      opacity 220ms ease,
      visibility 0s linear 220ms;
  }

  .mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
      transform 220ms ease,
      opacity 220ms ease,
      visibility 0s;
  }

  .mobile-nav-inner {
    display: flex;
    flex-direction: column;
    padding-block: 0.25rem 1.25rem;
  }

  /* Same weight and ink as the desktop nav links, at a full tap height. */
  .mobile-nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
  }

  .mobile-nav-link:hover { color: var(--color-brand); }

  .mobile-nav-cta {
    margin-top: 1.1rem;
    align-self: stretch;
  }

  .nl-hero-inner { grid-template-columns: 1fr; min-height: 0; }

  /* Once the photo drops below the copy there is no second column to balance
     against, so the copy centres on the container instead of hugging the left
     edge and leaving an empty rectangle where the art used to sit. */
  .nl-hero-copy {
    padding-block: 3rem 20rem;
    max-width: none;
    text-align: center;
  }
  .nl-hero-sub { margin-inline: auto; }
  .nl-hero-actions { justify-content: center; }
  .nl-hero-art {
    top: auto;
    height: 18rem;
    width: 100%;
    /* stacked layout puts the copy above the photo, so the dissolve turns
       vertical — same alpha-fade idea, rotated */
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.35) 12%,
      rgba(0, 0, 0, 1) 30%);
    mask-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.35) 12%,
      rgba(0, 0, 0, 1) 30%);
  }
  .nl-hero-art::before {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.6) 12%,
      rgba(255, 255, 255, 0.22) 24%,
      rgba(255, 255, 255, 0) 40%);
  }

  .nl-split { grid-template-columns: 1fr; }
  .nl-service-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .nl-service:nth-child(3) { border-left: none; }

  .nl-stats-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .nl-stat:nth-child(3) { border-left: none; }

  .nl-process { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; }
  /* Five steps over two columns leaves the last one alone in its row; it
     spans the pair instead so the row reads as a close, not a gap. */
  .nl-process .nl-step:last-child { grid-column: 1 / -1; }
  .nl-process::before { display: none; }
  .nl-step-num { box-shadow: none; }

  .nl-testimonials-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .nl-quote-row { grid-template-columns: 1fr; }
  .nl-testimonials-nav { display: none; }

  .nl-insight-row { grid-template-columns: 1fr; }

  /* Five columns over two tracks would strand Contact alone in a half-empty
     last row. The brand block takes a full-width row of its own and the four
     link columns pair off underneath it, so every row is filled. */
  .nl-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
  .nl-footer-grid .footer-about { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav.is-open { transition: none; }
}

@media (max-width: 640px) {
  :root { --section-pad: 3rem; }

  /* Centered hero: headline, lede, and the two actions share one axis. */
  .nl-hero-copy {
    max-width: none;
    text-align: center;
    padding-bottom: 16rem;
  }
  .nl-hero-sub { margin-inline: auto; }
  .nl-hero-actions { justify-content: center; }

  .nl-hero-art { height: 14rem; }
  .nl-service-row { grid-template-columns: 1fr; }
  .nl-service { border-left: none; }
  /* One column, photo first: the listing sells on the picture, so it leads the
     section instead of trailing it. The grid steps aside so the eyebrow, the
     photo, and the details are all ordered together in one stack. */
  .nl-featured {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .nl-featured-grid { display: contents; }

  .nl-featured-media { order: -1; }

  /* The action group flattens to one row: link left, arrows right. */
  .nl-featured-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: none;
  }

  .nl-featured-actions .nl-featured-nav {
    margin-top: 0;
    padding-top: 0;
  }
  .nl-stats-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .nl-stat { border-left: none; }
  .nl-process { grid-template-columns: 1fr; }
  .nl-footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }

  /* The navy band's copy and its action centre on the same axis. */
  .nl-cta-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  /* Side by side the photo strip is ~129px wide and the copy ~213px; the
     card stacks image over text like every other card group on the page. */
  .nl-insight { flex-direction: column; }

  .nl-insight-media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* Tap targets: these read as ~22px text lines on their own. */
  .card-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nl-social { width: 44px; height: 44px; }

  .nl-social svg { width: 20px; height: 20px; }

  .nl-social-wordmark { font-size: 1.05rem; }
}