/*
Theme Name: NoJiggery
Theme URI: https://nojiggery.com.au
Author: Ross O'Neill
Author URI: https://ross-oneill.com
Description: Custom FSE block theme for NoJiggery - Digital Experience Consultant. Built with ACF Pro blocks, theme.json design tokens, and plain CSS.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nojiggery
*/

/* ==========================================================================
   0. Font Face Declarations
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url('./assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url('./assets/fonts/figtree.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. CSS Variables (mapped from theme.json)
   ========================================================================== */

:root {
  /* ── Colours ── */
  --nj-color-primary: #004646;       /* Primary Teal */
  --nj-color-teal-dark: #013F3B;     /* Teal Dark */
  --nj-color-accent: #fa2a6f;        /* Accent Pink */
  --nj-color-teal-light: #d6ecf0;    /* Teal Light */
  --nj-color-teal-medium: #badfe6;   /* Teal Medium */
  --nj-color-white: #ffffff;
  --nj-color-off-white: #f0efec;
  --nj-color-cream: #e5e3dc;
  --nj-color-pink-light: #fff1f5;

  /* ── Typography ── */
  --nj-font-heading: "Bricolage Grotesque", sans-serif;
  --nj-font-body: "Figtree", sans-serif;

  /* ── Letter Spacing ── */
  --nj-tracking-tightest: -0.05em;   /* Buttons, large headings, section labels */
  --nj-tracking-tighter: -0.04em;    /* Hero title, article title */
  --nj-tracking-tight: -0.03em;      /* Card titles, subheadings, h2/h3 */
  --nj-tracking-normal: -0.02em;     /* Body text, descriptions */
  --nj-tracking-loose: -0.01em;      /* Small UI text, meta */
  --nj-tracking-none: 0;

  /* ── Font Sizes ── */
  --nj-text-sm: 1rem;                /* 16px */
  --nj-text-base: 1.25rem;           /* 20px */
  --nj-text-md: 1.375rem;            /* 22px */
  --nj-text-lg: 1.5rem;              /* 24px */
  --nj-text-xl: 1.75rem;             /* 28px */
  --nj-text-2xl: 2.125rem;           /* 34px */
  --nj-text-3xl: 2.875rem;           /* 46px */
  --nj-text-4xl: 4rem;               /* 64px */
  --nj-text-hero: 7.5rem;            /* 120px */

  /* ── Spacing ── */
  --nj-space-xs: 0.5rem;             /* 8px */
  --nj-space-sm: 1rem;               /* 16px */
  --nj-space-md: 1.5rem;             /* 24px */
  --nj-space-lg: 2rem;               /* 32px */
  --nj-space-xl: 3rem;               /* 48px */
  --nj-space-2xl: 4rem;              /* 64px */
  --nj-space-3xl: 6rem;              /* 96px */
  --nj-space-4xl: 8rem;              /* 128px */

  /* ── Layout ── */
  --nj-content-width: 800px;
  --nj-container-width: 1200px;
  --nj-wide-width: 1600px;

  /* Section padding — used sitewide, updated per breakpoint */
  --nj-section-x: 120px;
  --nj-section-y: 130px;

  /* Border Radius */
  --nj-radius-sm: 0.5rem;
  --nj-radius-md: 1rem;
  --nj-radius-lg: 1.5rem;
  --nj-radius-xl: 2rem;

  /* Transitions */
  --nj-transition-fast: 150ms ease;
  --nj-transition-base: 200ms ease;
  --nj-transition-slow: 300ms ease;
  --nj-transition-xslow: 500ms ease;
}

/* ==========================================================================
   2. Base / Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   3. Typography — handled by theme.json, component overrides below
   ========================================================================== */

a {
  color: inherit;
  text-decoration: none;
  transition: text-decoration var(--nj-transition-base);
}

a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.has-text-align-center {
  text-align: center;
}

.has-text-align-right {
  text-align: right;
}

/* Highlighted text (underlined accent) */
.nj-highlight {
  color: var(--nj-color-accent);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Page-level guard against horizontal bleed (e.g. hero image, swiper
     teasers) so individual sections don't need overflow-x: clip, which in
     Safari also clips vertically-overhanging elements like the hero arrow. */
  overflow-x: clip;
}

/* Spacer block behind fixed header — pushes content down naturally */
.nj-header-spacer {
  height: var(--nj-header-height, 84px);
  background-color: var(--nj-color-teal-light);
  flex-shrink: 0;
}

.nj-header-spacer--white {
  background-color: var(--nj-color-white);
}

.wp-site-blocks > main {
  flex-grow: 1;
}

/* Override WP default block spacing for the theme's top-level ACF sections —
   our section system uses margin-bottom only via .nj-spacing--*.
   IMPORTANT: this is deliberately NOT applied inside .wp-block-post-content,
   so normal content blocks (paragraphs, headings, lists, quotes) a user builds
   inside pages/posts — including nested in Columns/Group/Spectra containers —
   keep their natural spacing instead of being zeroed. */
:where(.wp-site-blocks) > *,
.wp-site-blocks > main > :where(.is-layout-flow):not(.wp-block-post-content) > *,
.wp-site-blocks > main > :where(.is-layout-constrained):not(.wp-block-post-content) > * {
  margin-block-start: 0 !important;
}

:where(.wp-site-blocks) > *:not([class*="nj-spacing--"]),
.wp-site-blocks > main > :where(.is-layout-flow):not(.wp-block-post-content) > *:not([class*="nj-spacing--"]),
.wp-site-blocks > main > :where(.is-layout-constrained):not(.wp-block-post-content) > *:not([class*="nj-spacing--"]) {
  margin-block-end: 0 !important;
}

/* Alignments */
.alignwide {
  max-width: var(--nj-wide-width);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  max-width: none;
  width: 100%;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.wp-block-button__link,
.nj-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--nj-font-heading);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--nj-tracking-tightest);
  line-height: 1;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--nj-transition-base);
  text-decoration: none !important;
  border: none;
  background-color: var(--nj-color-accent);
  color: var(--nj-color-white);
}

.wp-block-button__link:hover,
.nj-btn:hover {
  background-color: var(--nj-color-accent);
  color: var(--nj-color-white);
  transform: scale(1.05);
}

/* Secondary button — matches .nj-ia__view-all exactly */
.wp-block-button.is-style-secondary .wp-block-button__link {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  cursor: pointer !important;
  font-family: var(--nj-font-heading) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: var(--nj-tracking-loose) !important;
  color: var(--nj-color-teal-dark) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--nj-color-accent) !important;
  text-underline-offset: 3px !important;
  transition: text-decoration-style var(--nj-transition-fast) !important;
}

.wp-block-button.is-style-secondary .wp-block-button__link .nj-secondary-arrow {
  color: var(--nj-color-accent);
  flex-shrink: 0;
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  text-decoration-style: dotted !important;
  text-decoration-color: var(--nj-color-accent) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  transform: none !important;
  background: none !important;
  color: var(--nj-color-teal-dark) !important;
}

/* Image — no radius variant */
.wp-block-image.is-style-no-radius,
.wp-block-image.is-style-no-radius img {
  border-radius: 0 !important;
}

/* Group — card variant */
.wp-block-group.is-style-card {
  background-color: var(--nj-color-off-white);
  border-radius: var(--nj-radius-xl);
  padding: 80px;
}

@media (max-width: 768px) {
  .wp-block-group.is-style-card {
    padding: 48px 32px;
  }
}

/* Arrow icon in buttons */
.nj-arrow-icon {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.nj-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background-color: var(--nj-color-teal-light);
  border-radius: 0 0 var(--nj-radius-xl) var(--nj-radius-xl);
  padding: 0;
}

/* Offset header for WP admin bar when logged in */
.admin-bar .nj-header {
  top: 32px;
  transition: transform var(--nj-transition-slow), box-shadow var(--nj-transition-slow);
}

/* Hidden state — slides up off screen on scroll down */
.nj-header.is-hidden {
  transform: translateY(-100%);
}

.nj-header__inner {
  max-width: var(--nj-wide-width);
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* No border-bottom on scroll — clean edge */

/* Suppress dotted underline on logo, images, and cards */
.wp-block-site-logo a,
.nj-footer__awia-badge a,
img {
  text-decoration: none !important;
}

.nj-header .wp-block-site-logo img {
  width: 200px;
  height: auto;
}

.nj-header__nav {
  display: flex;
  align-items: center;
  gap: var(--nj-space-lg);
}

/* Arrow button - pink circle (acf/header-cta block) */
.nj-header__arrow-btn {
  display: block;
}

.nj-header__arrow-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  min-width: 64px;
  background-color: var(--nj-color-accent);
  border-radius: 50%;
  text-decoration: none !important;
  transition: background-color var(--nj-transition-base), transform var(--nj-transition-base);
}

.nj-header__arrow-link:hover {
  transform: scale(1.05);
}

.nj-header__arrow-link svg {
  width: 20px;
  height: 20px;
  color: var(--nj-color-white);
  flex-shrink: 0;
}

/* Mobile menu trigger - hidden on desktop */
.nj-header__mobile-trigger {
  display: none;
}

/* Mobile menu overlay - hidden by default */
.nj-mobile-menu {
  display: none;
}

/* WordPress navigation block overrides for header */
.nj-header .wp-block-navigation {
  gap: 40px;
}

/* Tight gap between nav and arrow button */
.nj-header__nav {
  gap: 16px;
}

.nj-header .wp-block-navigation-item__content {
  font-family: var(--nj-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--nj-color-primary);
  position: relative;
  padding-top: 10px;
  transition: color var(--nj-transition-base);
}

/* Active indicator - pink line above (only on active page, not hover) */
.nj-header .wp-block-navigation-item__content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--nj-color-accent);
  transform: scaleX(0);
}

/* Hover — dotted underline, no color change */
.nj-header .wp-block-navigation-item__content:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Active page - show pink border */
.nj-header
  .wp-block-navigation-item.current-menu-item
  .wp-block-navigation-item__content::before,
.nj-header
  .wp-block-navigation-item.current_page_item
  .wp-block-navigation-item__content::before,
.nj-header
  .wp-block-navigation-item--current
  .wp-block-navigation-item__content::before,
.nj-header
  .wp-block-navigation-item[aria-current="page"]
  .wp-block-navigation-item__content::before,
.nj-header
  .wp-block-navigation-link[aria-current="page"]
  .wp-block-navigation-item__content::before,
.nj-header
  .wp-block-navigation-item.current-menu-ancestor
  .wp-block-navigation-item__content::before {
  transform: scaleX(1);
}

/*Sunbav styles */

.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
  font-size: 18px;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  border-color: var(--nj-color-teal-medium);
  border-radius: 24px;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

/* Footer — full-width container. Backgrounds bleed edge-to-edge via pseudo-elements.
   The wrapper is constrained to 1200px centred (matching header__inner).
   Each column background bleeds to the screen edge via box-shadow.
   .nj-footer overflow:hidden + border-radius clips the bleed at the top corners. */
.nj-footer {
  border-radius: var(--nj-radius-xl) var(--nj-radius-xl) 0 0;
  overflow: hidden;
}

/* Footer wrapper — matches nj-container width, two columns with bg bleed */
/* !important needed to override WP's :where(.is-layout-flex) { gap: 24px } in the editor */
.nj-footer__wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 !important;
  max-width: var(--nj-wide-width);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   7.1 Footer Main (left 66% — teal bg bleeds to left screen edge)
   ========================================================================== */

.nj-footer__main {
  flex: 0 0 66.666%;
  max-width: 66.666%;
  background-color: var(--nj-color-teal-light);
  box-shadow: -100vw 0 0 100vw var(--nj-color-teal-light);
  padding: 0;
  display: flex;
  flex-direction: column;
}


/* Footer top section - logo and intro */
.nj-footer__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: var(--nj-section-y) var(--nj-section-x) 0;
}

/* Footer logo */
.nj-footer__logo {
  margin: 0;
}

.nj-footer__logo img {
  width: 322px;
  height: auto;
}

/* Footer bio text */
.nj-footer__bio {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  margin: 0;
  max-width: 50%;
}

/* LinkedIn link - separate row */
.nj-footer__linkedin {
  padding-bottom: 0;
  margin-top: 0 !important;
}

.nj-footer__linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  text-decoration: none;
  transition: color var(--nj-transition-base);
}

.nj-footer__linkedin-link::before {
  content: '';
  display: inline-block;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background-image: url('assets/images/icons/linked-in.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.nj-footer__linkedin-link:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Footer middle section - AWIA badge + nav columns */
.nj-footer__middle {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 64px;
  padding: 32px var(--nj-section-x) 128px;
  flex: 1;
}

/* AWIA section */
.nj-footer__awia {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nj-footer__awia-badge {
  margin: 0 0 8px 0;
}

.nj-footer__awia-badge img {
  width: 112px;
  height: auto;
}

.nj-footer__awia-badge a {
  display: block;
}

.nj-footer__awia-text {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  margin: 0;
  max-width: 280px;
}

/* Footer navigation column */
.nj-footer__nav-column {
  text-align: right;
}

.nj-footer__nav.wp-block-navigation {
  gap: 12px;
}

.nj-footer__nav .wp-block-navigation-item__content {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-loose);
  color: var(--nj-color-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--nj-transition-base);
}

.nj-footer__nav .wp-block-navigation-item__content:hover {
  text-decoration-style: solid;
}

/* Footer bottom - copyright bar */
.nj-footer__bottom {
  padding: 16px 24px;
  margin-top: auto;
}

.nj-footer__copyright {
  font-family: var(--nj-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  margin: 0;
}

/* Footer legal links */
.nj-footer__legal {
  gap: 8px;
}

.nj-footer__legal p {
  margin: 0;
}

.nj-footer__legal a {
  font-family: var(--nj-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--nj-transition-base);
}

.nj-footer__legal a:hover {
  text-decoration-style: solid;
}

.nj-footer__legal-divider {
  opacity: 0.5;
}

/* ==========================================================================
   7.2 Footer CTA (4 col / right side)
   ========================================================================== */

.nj-footer__cta {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  background-color: var(--nj-color-teal-dark);
  box-shadow: 100vw 0 0 100vw var(--nj-color-teal-dark);
  padding: var(--nj-section-y) var(--nj-section-x);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.nj-footer__cta-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.nj-footer__cta-content .wp-block-buttons {
  margin-top: 0;
}

.nj-footer__cta-title {
  font-family: var(--nj-font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-teal-medium);
  margin: 0;
}

.nj-footer__cta-text {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-white);
  margin: 0;
}

/* CTA Button — inherits base .wp-block-button__link styles */

/* Footer illustration */
.nj-footer__illustration {
  position: absolute;
  bottom: 48px;
  right: 48px;
  margin: 0;
  z-index: 0;
}

.nj-footer__illustration img {
  width: 180px;
  height: auto;
}

/* ==========================================================================
   8. Blocks - Hero
   ========================================================================== */

.nj-hero {
  position: relative;
  z-index: 1;
  background-color: var(--nj-color-teal-light);
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  min-height: min(calc(95svh - var(--nj-header-height, 84px)), 795px);
  /* Overflow must stay visible so the down-arrow can hang below the hero.
     Safari doesn't support overflow-clip-margin and collapses mismatched
     overflow-x/overflow-y to clip-both, both of which cut the arrow off.
     Horizontal bleed is guarded at the page root instead (.wp-site-blocks). */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Inner wrapper: constrain content width, handle padding and layout */
.nj-hero__inner {
  flex: 1;
  max-width: var(--nj-wide-width);
  width: 100%;
  margin: 0 auto;
  padding: 110px var(--nj-section-x);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

.nj-hero__content {
  position: relative;
  z-index: 1;
  /* Content takes left ~55% so image has right ~35% with gap breathing room */
  max-width: min(737px, 55%);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.nj-hero__eyebrow {
  font-family: var(--nj-font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-teal-dark);
  margin: 0;
}

.nj-hero__title {
  font-family: var(--nj-font-heading);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--nj-tracking-tighter);
  color: var(--nj-color-accent);
  margin: 0;
}

.nj-hero__description {
  font-family: var(--nj-font-body);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-teal-dark);
  margin: 0;
}

.nj-hero__image {
  position: absolute;
  /* Bottom-aligned with content, pinned right */
  bottom: 110px;
  right: 6%;
  width: 36%;
  max-width: 600px;
  z-index: 0;
}

.nj-hero__image img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 600px;
}

/* ── Insights hero variant ── */

/* Fixed height — same across insights/standard/contact heroes */
.nj-hero--insights {
  min-height: 600px;
  max-height: none;
}

/* Padding top + bottom */
.nj-hero--insights .nj-hero__inner {
  padding-bottom: 110px;
  justify-content: flex-end;
}

/* Content takes left ~55% — same proportion as home hero */
.nj-hero--insights .nj-hero__content {
  gap: 20px;
  max-width: min(737px, 55%);
}

/* Image: absolutely positioned right side, bottom-aligned — same as home but smaller */
.nj-hero--insights .nj-hero__image {
  position: absolute;
  right: 6%;
  bottom: 110px;
  width: 36%;
  max-width: 500px;
}

/* ── Standard hero variant ── */

/* Fixed height — matches insights hero */
.nj-hero--standard {
  min-height: 600px;
  max-height: none;
}

/* Padding top + bottom */
.nj-hero--standard .nj-hero__inner {
  padding: 110px var(--nj-section-x);
  justify-content: flex-end;
  gap: 10px;
}

/* Content: 737px max, 32px gap between heading/desc, button gets extra spacing */
.nj-hero--standard .nj-hero__content {
  gap: 32px;
  max-width: min(737px, 55%);
}

/* Button: 40px gap from text block (32px content gap + 8px extra) */
.nj-hero--standard .nj-hero__cta-btn {
  margin-top: 8px;
}

/* Image: absolutely positioned right side, bottom-aligned per Figma.
   Slightly reduced from 425px so its aspect-derived height clears the hero
   top and isn't clipped by the header edge. Position and bottom anchor
   unchanged. */
.nj-hero--standard .nj-hero__image {
  position: absolute;
  right: 12%;
  bottom: 110px;
  width: 385px;
  max-width: 27%;
}

/* No-image added? — let content span the full inner width */
.nj-hero--standard .nj-hero__inner--no-image .nj-hero__content,
.nj-hero--insights .nj-hero__inner--no-image .nj-hero__content {
  max-width: 100%;
}

/* Hero CTA button — inherits base .wp-block-button__link styles */

/* Search row: white pill input + dark teal pill button, gap 4px */
.nj-hero__search form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  max-width: 490px;
}

.nj-hero__search-input {
  flex: 1;
  width: 354px;
  height: 56px;
  padding: 16px 32px;
  background: var(--nj-color-white);
  border: 1px solid var(--nj-color-teal-light);
  border-radius: 50px;
  font-family: var(--nj-font-body);
  font-size: 18px;
  color: var(--nj-color-primary);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--nj-transition-base), box-shadow var(--nj-transition-base);
}

.nj-hero__search-input:focus {
  border-color: var(--nj-color-teal-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nj-color-teal-dark) 12%, transparent);
}

.nj-hero__search-input::placeholder {
  color: rgba(0, 70, 70, 0.45);
}

.nj-hero__search-btn {
  flex-shrink: 0;
  width: 134px;
  height: 56px;
  padding: 16px 32px;
  background: var(--nj-color-teal-dark);
  border: none;
  border-radius: 50px;
  font-family: var(--nj-font-heading);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--nj-tracking-tightest);
  color: var(--nj-color-white);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--nj-transition-base);
}

.nj-hero__search-btn:hover {
  transform: scale(1.05);
}

/* Down arrow — bottom-left of hero, aligned with content area, half hanging over the edge */
.nj-hero__scroll-down {
  position: absolute;
  bottom: 0;
  left: calc(max((100% - var(--nj-wide-width)) / 2, 0px) + var(--nj-section-x));
  transform: translateY(50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nj-hero__scroll-down-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nj-color-accent);
  border: 8px solid var(--nj-color-white);
  color: var(--nj-color-white);
  transform: rotate(45deg);
  transition: transform var(--nj-transition-base);
}

.nj-hero__scroll-down:hover .nj-hero__scroll-down-circle {
  transform: rotate(45deg) scale(1.05);
}

.nj-hero__scroll-down-circle svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .nj-hero__scroll-down-circle {
    width: 48px;
    height: 48px;
    border-width: 6px;
  }

  .nj-hero__scroll-down-circle svg {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   9. Pattern — Text + Image (.nj-text-image)
   CSS handles: responsive padding, column stacking, font reduction.
   Desktop styling (padding, gap, colors, fonts) is set in Gutenberg.
   ========================================================================== */

/* ≤ 1550px — reduce section padding */
@media (max-width: 1550px) {
  .nj-text-image {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ≤ 1280px — tighten gap + heading */
@media (max-width: 1280px) {
  .nj-text-image .wp-block-columns {
    gap: 48px !important;
  }

  .nj-text-image .wp-block-heading {
    font-size: 52px !important;
  }
}

/* ≤ 1024px — stack: content top, illustration bottom-right */
@media (max-width: 1024px) {
  .nj-text-image {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .nj-text-image .wp-block-columns {
    flex-direction: column !important;
    align-items: flex-end;
    gap: 24px !important;
  }

  .nj-text-image .wp-block-columns > .wp-block-column:last-child {
    flex-basis: auto !important;
    width: 100%;
    order: 0;
  }

  .nj-text-image .wp-block-columns > .wp-block-column:first-child {
    flex-basis: auto !important;
    width: 320px;
    max-width: 75%;
    order: 1;
  }

  /* Flip only the illustration, not the whole column. When this column holds
     text (e.g. a heading), scaleX(-1) on the column mirror-reversed the text
     and made it unreadable. Scope the flip to images/figures only. */
  .nj-text-image .wp-block-columns > .wp-block-column:first-child > figure,
  .nj-text-image .wp-block-columns > .wp-block-column:first-child > .wp-block-image {
    transform: scaleX(-1);
  }

  .nj-text-image .wp-block-heading {
    font-size: 42px !important;
  }
}

/* ≤ 768px — mobile */
@media (max-width: 768px) {
  .nj-text-image {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Kill the Gutenberg column's own 32px horizontal pad on mobile so the
     heading/body inside sit flush with the section gutter (var(--nj-section-x)),
     matching the hero and the rest of the site. */
  .nj-text-image .wp-block-columns > .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .nj-text-image .wp-block-columns > .wp-block-column:first-child {
    width: 263px;
  }

  .nj-text-image .wp-block-heading {
    font-size: 40px !important;
  }

  /* h3 (sub-headlines like "Who you are matters…") needs a smaller, tighter
     scale on mobile — the default 38px / 1.3 lh wraps to ~5 lines and dominates. */
  .nj-text-image h3.wp-block-heading {
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: var(--nj-tracking-tight) !important;
  }

  .nj-text-image p {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   10. Blocks - Services Slider
   ========================================================================== */

/* ==========================================================================
   10. Post Type Slider (Services / Insights)
   ========================================================================== */

/*
 * Layout:
 * - Section: no left padding — overflow-x: clip to allow swiper to bleed right
 * - __inner: flex column, two rows
 *   Row 1 (__slider-row): flex-row, align-items: flex-end
 *     - label carries padding-left: section-x — sits at page content edge, OUTSIDE card area
 *     - swiper fills remaining width, bleeds right
 *   Row 2 (__controls-row): progress bar + buttons, padded right
 */

/*
 * The label width determines where the card track starts.
 * --nj-services-label-w is the total space the label column takes (text + gaps).
 * Controls row gets the same left offset so the progress bar aligns with card left edge.
 */
.nj-services {
  /* No overflow anywhere in the chain — cards bleed freely to the right */
  padding: 0;
}

.nj-services__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* No max-width, no margin:auto — full viewport width so swiper never gets constrained */
}

/* Slider row: left-padded to align with the container, no right constraint */
.nj-services__slider-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-left: max(var(--nj-section-x), calc((100vw - var(--nj-wide-width)) / 2 + var(--nj-section-x)));
}

/* Desktop: header is the rotated label column — controls hidden, live in controls-row */
.nj-services__header {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  margin-right: 24px; /* gap between label and first card */
}

.nj-services__header .nj-services__controls {
  display: none;
}

/* Rotated label — negative margin-left pulls it back into the left padding
   so the swiper left edge stays flush with the section content edge.
   Layout width of vertical-mode text = line-height box = font-size × line-height = 64 × 1.1 ≈ 70px.
   Plus padding-right (gap to card) = 24px. Total = ~94px pulled back via negative margin. */
.nj-services__label {
  font-family: var(--nj-font-heading);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tightest);
  color: var(--nj-color-teal-dark);
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: calc(64px * 1.1 * -1); /* pull label text box back into padding */
}

.nj-services__swiper {
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.nj-services__swiper .swiper-wrapper {
  align-items: flex-end;
}

/* Editor only — Swiper JS not running, show gap via CSS */
.editor-styles-wrapper .nj-services__swiper .swiper-wrapper {
  gap: 24px;
}

.nj-services__controls-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding-left: calc(max(var(--nj-section-x), (100vw - var(--nj-wide-width)) / 2 + var(--nj-section-x)) + 24px);
  padding-right: max(var(--nj-section-x), calc((100vw - var(--nj-wide-width)) / 2 + var(--nj-section-x)));
}

/* Progress track — light teal background, dark teal fill */
.nj-services__progress {
  flex: 1;
  position: relative;
  height: 3px;
  background-color: var(--nj-color-teal-light);
}

.nj-services__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%;
  background-color: var(--nj-color-teal-dark);
  transition: width var(--nj-transition-slow);
}

.nj-services__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nj-services__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform var(--nj-transition-base), background-color var(--nj-transition-base);
  flex-shrink: 0;
}

/* Active state — teal-light bg, dark teal icon */
.nj-services__btn--prev,
.nj-services__btn--next {
  background-color: var(--nj-color-teal-light);
  color: var(--nj-color-teal-dark);
}

/* Disabled state — off-white bg, white icon (visible but subtle, matches Figma grey circle) */
.nj-services__btn.swiper-button-disabled {
  background-color: var(--nj-color-off-white);
  color: var(--nj-color-white);
  cursor: default;
}

.nj-services__btn:not(.swiper-button-disabled):hover {
  transform: scale(1.05);
}

.nj-services__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Individual service/insight card — <a> tag, overflow hidden for image zoom */
.nj-service-card {
  display: block;
  width: 100%;
  height: 668px;
  border-radius: var(--nj-radius-xl);
  background-color: var(--nj-color-teal-dark);
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
}

/* Background image layer — scaled independently on hover */
.nj-service-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--nj-transition-xslow);
  z-index: 0;
}

.nj-service-card:hover .nj-service-card__bg {
  transform: scale(1.05);
}

/* No-link variant: grab cursor, no dotted underline on title */
.nj-service-card--no-link {
  cursor: grab;
}

.nj-service-card--no-link:active {
  cursor: grabbing;
}

.nj-service-card--no-link:hover .nj-service-card__title {
  text-decoration: none !important;
}

/* Gradient overlay */
.nj-service-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nj-color-teal-dark) 0%, transparent) 0%, var(--nj-color-teal-dark) 69%);
  z-index: 1;
}

.nj-service-card__content {
  position: relative;
  z-index: 2;
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  box-sizing: border-box;
  gap: 24px;
}

.nj-service-card__title {
  font-family: var(--nj-font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-teal-medium);
  margin: 0;
  transition: color var(--nj-transition-base);
}

.nj-service-card:hover .nj-service-card__title {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--nj-color-teal-medium);
}

.nj-service-card__desc {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-white);
  margin: 0;
}

/* Desktop: header is part of the slider row — label is rotated vertical, controls hidden (in controls-row instead) */
.nj-services__header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-shrink: 0;
}

/* Hide mobile controls on desktop — they live in controls-row instead */
.nj-services__header .nj-services__controls {
  display: none;
}

/* ≤ 1280px */
@media (max-width: 1280px) {
  .nj-service-card {
    height: 520px;
  }

  .nj-service-card__content {
    padding: 40px 36px;
  }

  .nj-service-card__title {
    font-size: 36px;
  }

  .nj-services__label {
    font-size: 52px;
  }
}

/* ≤ 1024px — tablet/mobile: label left, controls right, no progress bar */
@media (max-width: 1024px) {
  /* Slider row: stack header above swiper */
  .nj-services__slider-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Header: in-flow label+controls row */
  .nj-services__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 16px;
  }

  /* Show controls inside header on mobile/tablet */
  .nj-services__header .nj-services__controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }

  /* Hide desktop progress+controls row */
  .nj-services__controls-row {
    display: none;
  }

  /* Label: reset all desktop vertical-mode styles */
  .nj-services__label {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: var(--nj-tracking-tightest);
    color: var(--nj-color-teal-dark);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Buttons: 48px per Figma */
  .nj-services__btn {
    width: 48px;
    height: 48px;
  }

  /* Cards: 506px tall per Figma mobile */
  .nj-service-card {
    height: 506px;
  }

  .nj-service-card__content {
    padding: 48px 32px;
    gap: 24px;
  }

  .nj-service-card__title {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: var(--nj-tracking-tight);
  }

  .nj-service-card__desc {
    font-size: 20px;
  }

  /* Projects slider mobile: match services card size */
  .nj-project-card {
    height: 506px;
    border-radius: var(--nj-radius-xl);
  }

  .nj-project-card__overlay {
    padding: 48px 32px;
  }

  .nj-project-card__title {
    font-size: 38px;
  }

  .nj-project-card__url {
    font-size: 20px;
  }
}

/* ≤ 768px — phones */
@media (max-width: 768px) {
  
  .nj-service-card {
    height: 460px;
  }

  .nj-service-card__content {
    padding: 32px 24px;
    gap: 24px;
  }

  .nj-service-card__title {
    font-size: 30px;
  }

  .nj-service-card__desc {
    font-size: 18px;
  }

  .nj-services__btn {
    width: 48px;
    height: 48px;
  }

  .nj-services__btn svg {
    width: 20px;
    height: 20px;
  }
}

/* ==========================================================================
   10. Blocks - Testimonials Slider
   ========================================================================== */

/*
 * Desktop layout (Figma 1680px outer, 1200px inner row, gap 64px):
 *   Left  (.nj-testimonials__card)  548px — heading + testimonial swiper
 *   Right (.nj-testimonials__panel) 588px — off-white card, feature cards slider + controls
 */

.nj-testimonials {
  background-color: var(--nj-color-white);
  padding: 0;
  overflow-x: clip;
}

.nj-testimonials__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  max-width: calc(1200px + 2 * var(--nj-section-x));
  margin: 0 auto;
  padding: 0 var(--nj-section-x);
}

/* ── Left column ── */
.nj-testimonials__card {
  flex: 0 0 548px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

/* Decorative watermark SVG " — positioned bottom-right, rotated, behind content */
.nj-testimonials__watermark {
  position: absolute;
  right: 0;
  bottom: 32px;
  width: 190px;
  height: 120px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Heading */
.nj-testimonials__heading {
  font-family: var(--nj-font-heading);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tightest);
  color: var(--nj-color-primary);
  margin: 0;
  text-decoration: none !important;
  position: relative;
  z-index: 1;
}

.nj-testimonials__heading span,
.nj-testimonials__heading a {
  text-decoration: none !important;
}

/* Testimonial swiper — above watermark */
.nj-testimonials__swiper {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.nj-testimonials__quote-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* SVG double-quote mark — accent colour */
.nj-testimonials__quote-mark {
  display: block;
  width: 56px;
  height: 36px;
  flex-shrink: 0;
}

.nj-testimonials__quote-text {
  font-family: var(--nj-font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-primary);
  margin: 0;
}

.nj-testimonials__attribution {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  margin: 0;
}

/* ── Right panel ── */
/* Fills remaining space after the left card + gap.
   Swiper teasers overflow right; section overflow-x: clip handles the clip. */
.nj-testimonials__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 120px;
  padding: 80px 0 80px 80px;
  background-color: var(--nj-color-off-white);
  border-radius: var(--nj-radius-xl);
  overflow: hidden;
}

/* Feature cards swiper — panel clips the teaser at the card edge.
   Width extends into right padding so teaser is visible before the card clips it. */
.nj-testimonials__features-swiper {
  overflow: visible;
  width: calc(100% + 80px);
}

.nj-testimonials__features-swiper .swiper-slide {
  height: auto;
  opacity: 0.5;
  transition: opacity var(--nj-transition-slow);
}

.nj-testimonials__features-swiper .swiper-slide-active {
  opacity: 1;
}

.nj-feature-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nj-feature-card__title {
  font-family: var(--nj-font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-primary);
  margin: 0;
}

.nj-feature-card__desc {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  margin: 0;
}

/* Controls: counter left, circle btns right.
   Width matches the active slide: swiper is calc(100% + 80px), divided by slidesPerView 1.45.
   This aligns the controls right edge with the active slide right edge. */
.nj-testimonials__controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc((100% + 80px) / 1.45);
}

/* "1/8" counter — 34px bold */
.nj-testimonials__counter {
  font-family: var(--nj-font-heading);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--nj-tracking-loose);
  color: var(--nj-color-primary);
}

/* Prev + next circle buttons */
.nj-testimonials__nav-btns {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.nj-testimonials__btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--nj-transition-base), opacity var(--nj-transition-base);
}

.nj-testimonials__btn:not(.swiper-button-disabled):hover {
  transform: scale(1.05);
}

/* Both buttons: pink with white arrow by default */
.nj-testimonials__btn--prev,
.nj-testimonials__btn--next {
  background-color: var(--nj-color-accent);
  color: var(--nj-color-white);
}

/* Disabled (no more slides in that direction): grey */
.nj-testimonials__btn--prev.swiper-button-disabled,
.nj-testimonials__btn--next.swiper-button-disabled {
  background-color: var(--nj-color-cream);
  color: var(--nj-color-primary);
  opacity: 1;
  cursor: default;
}

/* ── ≤1550px ── */
@media (max-width: 1550px) {
  
  .nj-testimonials__card {
    flex: 0 0 420px;
  }

  .nj-testimonials__heading {
    font-size: 52px;
  }

  .nj-testimonials__panel {
    flex: 1;
    gap: 80px;
  }
}

/* ── ≤1280px ── */
@media (max-width: 1280px) {
  .nj-testimonials__inner {
    gap: 40px;
  }

  .nj-testimonials__card {
    flex: 0 0 340px;
    gap: 40px;
    padding: 24px;
  }

  .nj-testimonials__heading {
    font-size: 42px;
  }

  .nj-feature-card__title {
    font-size: 34px;
  }

  .nj-testimonials__panel {
    flex: 1;
    padding: 48px;
    gap: 56px;
  }
}

/* ── ≤1024px: stack ── */
@media (max-width: 1024px) {
  
  .nj-testimonials__inner {
    flex-direction: column;
    gap: 32px;
    padding-right: var(--nj-section-x);
  }

  .nj-testimonials__card {
    flex: none;
    padding: 32px;
    gap: 32px;
    border-radius: var(--nj-radius-md);
  }

  .nj-testimonials__watermark {
    width: 120px;
    height: 76px;
  }

  .nj-testimonials__heading {
    font-size: 36px;
  }

  .nj-testimonials__quote-text {
    font-size: 22px;
  }

  .nj-testimonials__panel {
    flex: none;
    border-radius: var(--nj-radius-md);
    padding: 40px;
    gap: 40px;
  }

  .nj-feature-card__title {
    font-size: 28px;
  }

  .nj-feature-card__desc {
    font-size: 17px;
  }

  .nj-testimonials__btn {
    width: 48px;
    height: 48px;
  }

  .nj-testimonials__counter {
    font-size: 26px;
  }
}

/* ── ≤768px: mobile ── */
@media (max-width: 768px) {
  
  .nj-testimonials__inner {
    gap: 24px;
    padding: 0 var(--nj-section-x);
  }

  .nj-testimonials__card {
    width: 100%;
    box-sizing: border-box;
    padding: 32px 32px 0;
    gap: 32px;
    border-radius: var(--nj-radius-xl);
  }

  .nj-testimonials__watermark {
    display: none;
  }

  .nj-testimonials__heading {
    font-size: 40px;
  }

  .nj-testimonials__quote-text {
    font-size: 22px;
  }

  /* No teaser on mobile — full width single slide, contained */
  .nj-testimonials__panel {
    width: 100%;
    box-sizing: border-box;
    padding: 48px 32px;
    gap: 32px;
    border-radius: var(--nj-radius-xl);
    overflow: hidden;
  }

  .nj-testimonials__features-swiper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .nj-feature-card__title {
    font-size: 38px;
  }

  .nj-feature-card__desc {
    font-size: 20px;
  }

  .nj-testimonials__controls {
    width: 100%;
    padding-right: 0;
  }

  .nj-testimonials__btn {
    width: 48px;
    height: 48px;
  }

  .nj-testimonials__counter {
    font-size: 34px;
  }
}

/* ==========================================================================
   11. Blocks - Projects Slider
   ========================================================================== */

.nj-projects {
  padding: 0;
  overflow: hidden;
}

.nj-projects__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* No padding here — applied individually to header and swiper so the
     swiper can stretch full-width while header stays content-aligned */
}

/* Header row: label left, nav buttons right — inset to match content grid */
.nj-projects__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: max(var(--nj-section-x), calc((100vw - var(--nj-wide-width)) / 2 + var(--nj-section-x)));
  padding-right: max(var(--nj-section-x), calc((100vw - var(--nj-wide-width)) / 2 + var(--nj-section-x)));
}

.nj-projects__label {
  font-family: var(--nj-font-heading);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tightest);
  color: var(--nj-color-primary);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  margin: 0;
}

.nj-projects__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.nj-projects__btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--nj-transition-base), background-color var(--nj-transition-base);
  flex-shrink: 0;
}

.nj-projects__btn:not(.swiper-button-disabled):hover {
  transform: scale(1.05);
}

.nj-projects__btn--prev {
  background-color: var(--nj-color-off-white);
  color: var(--nj-color-primary);
}

.nj-projects__btn--next {
  background-color: var(--nj-color-teal-light);
  color: var(--nj-color-primary);
}

.nj-projects__btn--next:not(.swiper-button-disabled):hover {
  background-color: var(--nj-color-accent);
  color: var(--nj-color-white);
}

.nj-projects__btn.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}

/* Swiper — overflows right, clipped by section overflow:hidden.
   slidesOffsetBefore set via JS to align first slide with header left edge. */
.nj-projects__swiper {
  overflow: visible;
  width: 100%;
}

.nj-project-card {
  position: relative;
  border-radius: var(--nj-radius-xl);
  overflow: hidden;
  height: 668px;
  background-color: var(--nj-color-teal-light);
  text-decoration: none !important;
}

.nj-project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--nj-transition-xslow);
}

.nj-project-card:hover img {
  transform: scale(1.05);
}

.nj-project-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 64px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nj-color-teal-dark) 0%, transparent) 0%, var(--nj-color-teal-dark) 69%);
  color: var(--nj-color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  height: 100%;
  box-sizing: border-box;
}

.nj-project-card__title {
  font-family: var(--nj-font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-teal-medium);
  margin: 0;
}

.nj-project-card__url {
  font-family: var(--nj-font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-white);
  margin: 0;
  opacity: 1;
}

/* ==========================================================================
   12. Blocks - Insights Teaser
   ========================================================================== */

/*
 * Figma structure (desktop):
 * Frame 149: 1200px wide, flex-col, gap 24px — contains 2 rows
 * Row 1 (Frame 148): 1084px, flex-row, align-items flex-end, gap 24px, h 418px
 *   └ Label col (Frame 150): 64px × 418px, justify-content flex-end
 *   └ Card 1 (Frame 72):  486px × 304px, no padding, content position:absolute top/left 64px
 *   └ Card 2 (Frame 71):  486px × 340px, padding 64px, gap 64px
 * Row 2 (Frame 147): 1084px, flex-row, align-items flex-start, gap 24px, h 340px
 *   └ Card 3 (Frame 61):  486px × 340px, padding 64px, gap 64px
 *   └ Card 4 (Frame 73):  486px × 304px, padding 64px, gap 64px
 * Row 2 has no label col — it starts at the same x as the cards in row 1.
 * Outer 1200px = 64px label + 24px gap + 486px + 24px gap + 486px = 1084px of content
 */

.nj-insights {
  padding: 0;
}

/* Outer: 1084px centred (64 label + 24 gap + 486 + 24 gap + 486) */
.nj-insights__inner {
  max-width: calc(1084px + 2 * var(--nj-section-x));
  margin: 0 auto;
  padding: 0 var(--nj-section-x);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Row 1: label (64px) + card 1 (486×304) + card 2 (486×340), bottom-aligned */
.nj-insights__row--1 {
  display: flex;
  gap: 24px;
  align-items: flex-end;
}

/* Row 2: two cards, flush left */
.nj-insights__row--2 {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Label column — 64px wide, stretches full row height */
.nj-insights__label-col {
  flex: 0 0 64px;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

/* Rotated "Insights" — reads bottom-to-top */
.nj-insights__label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--nj-font-heading);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--nj-tracking-tightest);
  color: var(--nj-color-primary);
  white-space: nowrap;
  margin: 0;
}

/* ── Cards ── */

/* Base card */
.nj-insight-card {
  flex: 0 0 486px;
  background-color: var(--nj-color-teal-light);
  border-radius: var(--nj-radius-xl);
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  text-decoration: none !important;
  transition: opacity var(--nj-transition-base), transform var(--nj-transition-base);
  box-sizing: border-box;
  overflow: hidden;
}

.nj-insight-card:hover {
  transform: translateY(-4px);
}

.nj-insight-card--short {
  height: 304px;
}

.nj-insight-card--tall {
  height: 340px;
}

/* Card 1 (row 1, first card): no padding — content sits absolute top-left */
.nj-insight-card--abs {
  padding: 0;
}

.nj-insight-card--abs .nj-insight-card__content {
  position: absolute;
  left: 64px;
  top: 64px;
  width: calc(100% - 128px);
  height: calc(100% - 128px);
}

/* Content block: title at top, "Read article" at bottom */
.nj-insight-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  flex: 1;
}

.nj-insight-card__title {
  font-family: var(--nj-font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-teal-dark);
  margin: 0;
}

.nj-insight-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nj-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-loose);
  color: var(--nj-color-teal-dark);
  text-decoration: none;
  flex-shrink: 0;
  transition: color var(--nj-transition-base);
}

/* Pink underline on the text only, not the arrow */
.nj-insight-card__link-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--nj-color-accent);
}

.nj-insight-card__arrow {
  color: var(--nj-color-accent);
  flex-shrink: 0;
  display: block;
}

/* Hover: dotted underline on title */
.nj-insight-card:hover .nj-insight-card__title {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Hover: dotted underline on "Read article" */
.nj-insight-card:hover .nj-insight-card__link-text {
  text-decoration-style: dotted;
}

/* ==========================================================================
   13. Pattern - Call to Action
   ========================================================================== */

/* Hug — section padding (responsive via --nj-section-x) */
/* ==========================================================================
   CTA (.nj-cta)
   CSS handles: responsive section padding, card height, illustration
   absolute positioning, content max-width, responsive overrides.
   Desktop styling (bg, padding, radius, gap, fonts) is set in Gutenberg.
   ========================================================================== */

/* Card (inner group): relative context, fixed height */
.nj-cta > .wp-block-group {
  position: relative !important;
  overflow: hidden;
  /* height: 539px; */
}

/* All card children sit above illustration */
.nj-cta > .wp-block-group > *:not(.nj-cta__illustration) {
  position: relative;
  z-index: 1;
  max-width: 60%;
}

/* Illustration: absolute bottom-right overlay */
.nj-cta__illustration {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: min(658px, 40%) !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 0;
}

.nj-cta__illustration img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

/* ≤ 1550px */
@media (max-width: 1550px) {
  .nj-cta {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* ≤ 1024px */
@media (max-width: 1024px) {
  .nj-cta {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .nj-cta > .wp-block-group {
    height: auto;
    min-height: 400px;
  }

  .nj-cta__illustration {
    width: min(480px, 40%) !important;
  }
}

/* ≤ 768px — mobile */
@media (max-width: 768px) {
  .nj-cta {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .nj-cta > .wp-block-group {
    height: auto;
    padding: 48px 32px !important;
  }

  .nj-cta__illustration {
    display: none !important;
  }

  .nj-cta > .wp-block-group > *:not(.nj-cta__illustration) {
    max-width: 100%;
  }

  .nj-cta .wp-block-heading:first-child {
    font-size: 38px !important;
  }

  /* Sub-headings inside an nj-cta block (e.g. "Who you are matters…" on the
     about page) need a smaller size and tighter line-height on mobile —
     default xx-large preset wraps to 5+ lines and dominates the viewport.
     Specificity (0,3,1) overrides .nj-cta .wp-block-heading:first-child
     (0,3,0) above, which otherwise catches the h3 too. */
  .nj-cta h3.wp-block-heading.has-xx-large-font-size {
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: var(--nj-tracking-tight) !important;
  }
}

/* ==========================================================================
   14. Intro Section — see section 9 for primary styles
   ========================================================================== */

/* ==========================================================================
   15. Single Insight
   ========================================================================== */

/* Outer wrapper — full width, provides vertical rhythm */
.nj-single {
  padding: 0 0 120px;
}

/* Kill WP flow layout margins inside single insight — our layout handles spacing.
   Excludes elements that need their own intentional margins (lists, embeds, quotes, tables). */
.nj-single .is-layout-flow > *:not(ul):not(ol):not(iframe):not(blockquote):not(table):not(.wp-block-quote):not(.wp-block-pullquote):not(.wp-block-table):not(.wp-block-embed):not(.nj-callout) {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Back link row */
.nj-single__back-row {
  max-width: var(--nj-container-width);
  margin: 0 auto;
  padding: 120px 24px 0;
}

.nj-single__back-link-wrap {
  margin: 0 !important;
}

.nj-single__back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-family: var(--nj-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-loose);
  color: var(--nj-color-primary);
  text-decoration: underline;
  text-decoration-color: var(--nj-color-accent);
  text-underline-offset: 3px;
}

.nj-single__back-link::before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 24px;
  background: var(--nj-color-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M5 12l7 7M5 12l7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M5 12l7 7M5 12l7-7'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  flex-shrink: 0;
}

.nj-single__back-link:hover {
  text-decoration-style: dotted;
  text-decoration-color: var(--nj-color-accent);
  color: var(--nj-color-primary);
}

/* Three-column layout: left sidebar | content | right sidebar */
.nj-single__wrap {
  max-width: var(--nj-container-width);
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 179px minmax(0, 691px) 282px;
  gap: 24px;
  align-items: start;
}

/* ── Left sidebar ── */
.nj-single__sidebar-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  padding: 0 16px;
  /* position: sticky;
  top: calc(var(--nj-header-height, 84px) + 32px); */
  align-self: start;
}

.nj-single__author-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nj-single__author-label {
  font-family: var(--nj-font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  margin: 0;
}

.nj-single__author-name,
.nj-single__author-name p {
  font-family: var(--nj-font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-primary);
  margin: 0;
}

.nj-single__date-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nj-single__date-mark {
  margin: 0 !important;
}

.nj-single__date-mark img {
  display: block;
  width: 24px !important;
  height: auto;
  border-radius: 0 !important;
  filter: brightness(0) saturate(100%) invert(32%) sepia(96%) saturate(3293%) hue-rotate(330deg) brightness(94%) contrast(97%);
}

.nj-single__date,
.nj-single__date a {
  font-family: var(--nj-font-body);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  text-decoration: none;
}

/* ── Main content ── */
.nj-single__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 691px;
}

.nj-single__header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nj-single__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
}

.nj-single__reading-time {
  display: block;
  font-family: var(--nj-font-body);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
}

.nj-single__title {
  font-family: var(--nj-font-heading) !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: var(--nj-tracking-tighter) !important;
  color: var(--nj-color-primary) !important;
  margin: 0 !important;
}

/* Tags — pill style */
.nj-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Hide comma separators between terms */
.nj-single__tags .wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nj-single__tags .wp-block-post-terms__separator {
  display: none;
}

a.nj-single__term,
.nj-single__term a,
.nj-single__tags .wp-block-post-terms a {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  background: var(--nj-color-off-white);
  border-radius: var(--nj-radius-lg);
  font-family: var(--nj-font-body);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  text-decoration: none;
}

a.nj-single__term:hover,
.nj-single__term a:hover,
.nj-single__tags .wp-block-post-terms a:hover {
  background: var(--nj-color-teal-light);
}

/* Lead paragraph — the .intro paragraph styled as the standfirst with a drop cap.
   Sarah marks the intro paragraph with the "intro" class in the editor. */
.nj-single__body .wp-block-post-content > p.intro {
  font-family: var(--nj-font-body);
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  margin: 0;
  padding-top: 32px; /* 32px + 16px parent gap = 48px from tags */
}

/* Drop cap — own column via grid, text never wraps underneath */
.nj-single__body .wp-block-post-content > p.intro.has-drop-cap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}

.nj-single__body .wp-block-post-content > p.intro .nj-drop-cap {
  font-family: var(--nj-font-heading);
  font-weight: 700;
  font-size: 90px;
  line-height: 1;
  letter-spacing: var(--nj-tracking-tighter);
  color: var(--nj-color-primary);
}

.nj-single__body .wp-block-post-content > p.intro .nj-drop-text {
  display: block;
  align-self: center;
  padding: 8px 0;
}

/* Inline links inside the intro keep flowing with the text */
.nj-single__body .wp-block-post-content > p.intro .nj-drop-text a {
  display: inline;
}

/* Article body typography */
.nj-single__body {
  font-family: var(--nj-font-body);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
}

.nj-single__body > .wp-block-post-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─────────────────────────────────────────────────────────────
   Loose page content (default page template only).
   The page template uses `default` layout so blocks manage their
   own full-bleed width. But plain text typed straight into a page
   (no group/section wrapper) has nothing constraining it and runs
   edge-to-edge. Constrain ONLY those bare flow elements — never
   the theme's block sections, which keep their own --nj-section-x.
   Scoped to page-template-default so single/insight/policies are
   untouched.
   ───────────────────────────────────────────────────────────── */

/* Breathing room below the fixed header for hand-built pages that open
   with loose content. Uses padding on the content wrapper (not margin on the
   first child) so it can't be beaten by the global margin-kill !important
   rule, and only applies when the first child is loose content, not a
   full-bleed theme block. */
.page-template-default .wp-block-post-content:has(> :first-child:not([class*="nj-"]):not(.alignfull):not(.wp-block-group):not(.wp-block-columns):not(.wp-block-cover)) {
  padding-top: var(--nj-section-y, 80px);
}
.page-template-default .wp-block-post-content > p,
.page-template-default .wp-block-post-content > h1,
.page-template-default .wp-block-post-content > h2,
.page-template-default .wp-block-post-content > h3,
.page-template-default .wp-block-post-content > h4,
.page-template-default .wp-block-post-content > h5,
.page-template-default .wp-block-post-content > h6,
.page-template-default .wp-block-post-content > ul,
.page-template-default .wp-block-post-content > ol,
.page-template-default .wp-block-post-content > blockquote,
.page-template-default .wp-block-post-content > .wp-block-quote,
.page-template-default .wp-block-post-content > .wp-block-pullquote,
.page-template-default .wp-block-post-content > figure,
.page-template-default .wp-block-post-content > table,
.page-template-default .wp-block-post-content > pre {
  max-width: calc(var(--nj-content-width) + 2 * var(--nj-section-x));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--nj-section-x);
  padding-right: var(--nj-section-x);
  box-sizing: border-box;
}

/* Spacing on pages is controlled by the block editor + theme.json blockGap
   (24px default), NOT by forced !important margins here. The old rhythm hacks
   were removed so the editor's spacing controls actually take effect. Section
   gaps still come from the ACF nj-spacing--default system. */

/* Image block with a fixed height set in the editor. WordPress writes the
   height to the <img> but without object-fit the image just keeps its aspect
   ratio and the height appears to do nothing. Make a set height actually crop.
   Only applies when the block carries an inline height (has-custom-height is
   added by core, and the img gets an inline height style). */
.page-template-default .wp-block-post-content .wp-block-image img[style*="height"],
.page-template-default .wp-block-post-content .wp-block-image.is-resized img[style*="height"] {
  object-fit: cover;
  width: 100%;
}

/* Leading audio hoisted above the excerpt */
.nj-single__audio {
  margin: 0 0 24px;
}

.nj-single__audio .wp-block-audio,
.nj-single__audio figure {
  margin: 0;
}

.nj-single__audio audio {
  width: 100%;
}

/* When the post starts with an audio block, give the hoisted player top spacing */
.has-leading-audio .nj-single__audio {
  padding-top: 32px;
}

/* Hide stray leading <br> tags from pasted content */
.nj-single__body p > br:first-child,
.nj-single__body h2 > br:first-child,
.nj-single__body h3 > br:first-child,
.nj-single__body h4 > br:first-child {
  display: none;
}

.nj-single__body p {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  margin: 0;
}

/* Inline links — bold, dotted underline, solid on hover.
   Shared between post bodies and hand-built pages. */
.nj-single__body a:not(.wp-block-button__link),
.page-template-default .wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button) {
  font-weight: 600;
  color: var(--nj-color-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.nj-single__body a:not(.wp-block-button__link):hover,
.page-template-default .wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
  color: var(--nj-color-accent);
  text-decoration-style: solid;
  text-decoration-color: var(--nj-color-accent);
}

/* ═══════════════════════════════════════════════════════════════
   HEADING SCALES — single source of truth (desktop here, mobile in the
   ≤768 block further down). Two scales, split by context:
     • POSTS  (.nj-single__body)            → Article scale  (42/34/28)
     • PAGES  (.page-template-default + editor) → Heading scale (64/46/38…)
   Page selectors include .editor-styles-wrapper so the editor matches the
   front end from one place — no separate editor-page.css heading dupes.
   ═══════════════════════════════════════════════════════════════ */

/* ── POSTS: Article scale ── */
.nj-single__body h2 {
  font-family: var(--nj-font-heading);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-primary);
  padding: 40px 0 8px;
}

.nj-single__body h3 {
  font-family: var(--nj-font-heading);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-primary);
  padding-top: 24px;
}

.nj-single__body h4 {
  font-family: var(--nj-font-heading);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
  padding-top: 16px;
}

/* ── PAGES: Heading scale (front end). Editor copies live in editor-page.css
   with the SAME values, scoped to .editor-styles-wrapper. Keep in sync.
   :not([class*="nj-"]) excludes headings that belong to the theme's ACF blocks
   (e.g. .nj-services__label, .nj-insight-card__title) which style themselves. ── */
.page-template-default .wp-block-post-content h1:not([class*="nj-"]) {
  font-family: var(--nj-font-heading);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.page-template-default .wp-block-post-content h2:not([class*="nj-"]) {
  font-family: var(--nj-font-heading);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: var(--nj-color-primary);
}

.page-template-default .wp-block-post-content h3:not([class*="nj-"]) {
  font-family: var(--nj-font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--nj-color-teal-dark);
}

.page-template-default .wp-block-post-content h4:not([class*="nj-"]) {
  font-family: var(--nj-font-heading);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--nj-color-teal-dark);
}

.page-template-default .wp-block-post-content h5:not([class*="nj-"]) {
  font-family: var(--nj-font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--nj-color-teal-dark);
}

/* Union mark — POSTS h2 (kept) */
.nj-single__body h2::before {
  content: '';
  display: block;
  width: 100px;
  height: 14px;
  margin-bottom: 16px;
  background: url('./assets/images/icons/union-pink.svg') no-repeat left center / contain;
}

/* Full-width images in article body */
.nj-single__body .wp-block-image {
  margin-left: 0;
  margin-right: 0;
}

.nj-single__body .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--nj-radius-md);
}

/* Highlight/mark text */
.nj-single__body mark {
  background-color: var(--nj-color-teal-light);
  color: var(--nj-color-primary);
  padding: 2px 6px;
  border-radius: 4px;
}

/* List visual styling (font, item gap, markers) — shared posts + pages.
   No outer margins here so pages let the editor control list spacing. */
.nj-single .nj-single__body ul,
.nj-single .nj-single__body ol,
.page-template-default .wp-block-post-content ul:not(.wp-block-navigation__container):not(.wp-block-page-list),
.page-template-default .wp-block-post-content ol {
  font-size: 20px;
  line-height: 1.5;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Forced list margins on POSTS only. */
.nj-single .nj-single__body ul,
.nj-single .nj-single__body ol {
  margin-block-start: 16px !important;
  margin-block-end: 24px !important;
}

.nj-single__body ul li::marker,
.wp-block-list li::marker,
.page-template-default .wp-block-post-content ul li::marker {
  color: var(--nj-color-accent);
}

/* Embeds (YouTube, Vimeo, etc.) — keep inside container, breathe top/bottom */
.nj-single__body .wp-block-embed,
.nj-single__body .wp-block-embed__wrapper {
  max-width: 100%;
}

.nj-single__body iframe.youtube-player,
.nj-single__body iframe.youtube-player.lazyloaded,
.nj-single__body .wp-block-embed iframe {
  display: block;
  max-width: 100%;
  margin-inline: 0;
  margin-block-start: 32px !important;
  margin-block-end: 32px !important;
  border-radius: var(--nj-radius-md);
}

/* Callout pattern — keep inside body container, breathe top/bottom */
.nj-single__body .nj-callout {
  max-width: 100%;
  margin-inline: 0;
  margin-block-start: 32px !important;
  margin-block-end: 32px !important;
}

/* Blockquote — mirrors home testimonial style (pink mark + heading-font teal text).
   Shared between post bodies (.nj-single__body) and hand-built pages
   (.page-template-default .wp-block-post-content). */
.nj-single .nj-single__body blockquote,
.nj-single .nj-single__body .wp-block-quote,
.nj-single .nj-single__body .wp-block-pullquote,
.page-template-default .wp-block-post-content blockquote,
.page-template-default .wp-block-post-content .wp-block-quote,
.page-template-default .wp-block-post-content .wp-block-pullquote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Forced quote spacing on POSTS only. Pages let Spectra/the editor control
   spacing, so the theme doesn't impose 32px there. */
.nj-single .nj-single__body blockquote,
.nj-single .nj-single__body .wp-block-quote,
.nj-single .nj-single__body .wp-block-pullquote {
  margin-inline: auto;
  margin-block-start: 32px !important;
  margin-block-end: 32px !important;
}

.nj-single__body blockquote::before,
.nj-single__body .wp-block-quote::before,
.nj-single__body .wp-block-pullquote::before,
.page-template-default .wp-block-post-content blockquote::before,
.page-template-default .wp-block-post-content .wp-block-quote::before,
.page-template-default .wp-block-post-content .wp-block-pullquote::before {
  content: '';
  display: block;
  width: 56px;
  height: 36px;
  margin: 0;
  background: url('./assets/images/icons/quote-pink.svg') no-repeat left top / contain;
}

.nj-single__body blockquote p,
.nj-single__body .wp-block-quote p,
.nj-single__body .wp-block-pullquote p,
.page-template-default .wp-block-post-content blockquote p,
.page-template-default .wp-block-post-content .wp-block-quote p,
.page-template-default .wp-block-post-content .wp-block-pullquote p {
  font-family: var(--nj-font-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-primary);
  margin: 0;
}

.nj-single__body blockquote cite,
.nj-single__body .wp-block-quote cite,
.nj-single__body .wp-block-pullquote cite,
.page-template-default .wp-block-post-content blockquote cite,
.page-template-default .wp-block-post-content .wp-block-quote cite,
.page-template-default .wp-block-post-content .wp-block-pullquote cite {
  display: block;
  margin: 0;
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
}

/* Tables */
.nj-single .nj-single__body table,
.nj-single .nj-single__body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--nj-color-teal-light);
  margin-inline: 0;
  margin-block-start: 0 !important;
  margin-block-end: 24px !important;
  font-family: var(--nj-font-body);
  color: var(--nj-color-primary);
}

.nj-single .nj-single__body .wp-block-table {
  margin-inline: 0;
  margin-block-start: 0 !important;
  margin-block-end: 24px !important;
}

.nj-single__body table thead,
.nj-single__body table thead th {
  background-color: var(--nj-color-teal-light);
}

/* Kill WP core's `.wp-block-table thead { border-bottom: 3px solid }`
   (inherits currentColor → dark teal line under the header row). */
.nj-single__body table thead,
.nj-single .nj-single__body .wp-block-table thead {
  border-bottom: 2px solid var(--nj-color-teal-light);
}

.nj-single__body table th {
  font-family: var(--nj-font-heading);
  font-weight: 600;
  font-size: 18px;
  text-align: left;
  padding: 12px 16px;
  border: 2px solid var(--nj-color-teal-light);
}

.nj-single__body table tbody tr td,
.nj-single__body table tbody td {
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 16px;
  border: 2px solid var(--nj-color-teal-light);
}

/* ==========================================================================
   Callout (.nj-callout)
   CSS handles: ::before union decoration, overflow, happy icon sizing,
   responsive overrides.
   Desktop styling (bg, padding, radius, gap, colors) is set in Gutenberg.
   ========================================================================== */

/* Positioning context for ::before + overflow to clip decoration */
.nj-callout {
  position: relative;
  overflow: hidden;
}

/* Union SVG decoration overlapping top edge */
.nj-callout::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 48px;
  right: 48px;
  height: 84px;
  background: url('./assets/images/icons/union-teal.svg') no-repeat left top / 100% auto;
  pointer-events: none;
}

/* All content above ::before */
.nj-callout > * {
  position: relative;
  z-index: 1;
}

/* Header row: stretch full width, heading fills space, icon far right */
.nj-callout > .wp-block-group:first-child {
  width: 100%;
}

.nj-callout > .wp-block-group:first-child > .wp-block-heading {
  flex: 1;
}

/* Happy SVG — fixed height, no margin */
.nj-callout__happy {
  margin: 0 !important;
  flex-shrink: 0;
}

.nj-callout__happy img {
  width: auto !important;
  height: 67px !important;
  display: block;
  border-radius: 0 !important;
}

/* ── Right sidebar ── */
.nj-single__sidebar-right {
  position: sticky;
  top: calc(var(--nj-header-height, 84px) + 16px);
}

.nj-single__cta-card {
  background: var(--nj-color-off-white);
  border-radius: var(--nj-radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.nj-single__cta-illustration {
  margin: 0 0 24px 0 !important;
}

.nj-single__cta-illustration img {
  width: auto;
  height: 108px !important;
  display: block;
  border-radius: 0 !important;
  filter: brightness(0) saturate(100%) invert(32%) sepia(96%) saturate(3293%) hue-rotate(330deg) brightness(94%) contrast(97%);
}

.nj-single__cta-card .wp-block-heading {
  font-family: var(--nj-font-heading) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: var(--nj-tracking-tight) !important;
  color: var(--nj-color-primary) !important;
  padding-bottom: 8px;
}

.nj-single__cta-card p {
  font-family: var(--nj-font-body) !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  letter-spacing: var(--nj-tracking-normal) !important;
  color: var(--nj-color-primary) !important;
  padding-bottom: 32px;
}

.nj-single__cta-card .wp-block-buttons {
  margin: 0 !important;
}

/* Single CTA button — full width inside sidebar card */
.nj-single__cta-btn .wp-block-button__link {
  width: 100%;
  text-align: center;
}

/* ── Keep reading section ── */
.nj-single__keep-reading {
  max-width: var(--nj-container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.nj-single__kr-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0 8px;
  margin-bottom: 0;
}

.nj-single__kr-mark {
  margin: 0 !important;
}

.nj-single__kr-mark img {
  display: block;
  width: 100px !important;
  height: auto;
  border-radius: 0 !important;
}

.nj-single__kr-heading {
  font-family: var(--nj-font-heading) !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  letter-spacing: var(--nj-tracking-tight) !important;
  color: var(--nj-color-primary) !important;
  margin: 0 !important;
}

/* Related article cards — 4-col grid with border-left */
.nj-single__kr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px !important;
}

.nj-single__kr-card {
  box-sizing: border-box;
  padding: 24px 24px 24px 32px;
  border-left: 6px solid var(--nj-color-teal-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Above-text arch mark above each card title — pink */
.nj-single__kr-card::before {
  content: '';
  display: block;
  width: 24px;
  height: 12px;
  background: url('./assets/images/icons/above-text.svg') no-repeat left center / contain;
  filter: brightness(0) saturate(100%) invert(32%) sepia(96%) saturate(3293%) hue-rotate(330deg) brightness(94%) contrast(97%);
  margin-bottom: 4px;
}

.nj-single__kr-title {
  font-family: var(--nj-font-body) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: var(--nj-tracking-normal) !important;
  color: var(--nj-color-primary) !important;
  margin: 0 !important;
}

/* Title link — inline so hover arrow appears after last word */
.nj-single__kr-title a {
  color: inherit;
  text-decoration: none;
  display: inline;
}

/* Arrow on title: hidden by default, slides in on hover — matches nj-ia__item-arrow */
.nj-single__kr-title-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  color: var(--nj-color-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--nj-transition-fast), transform var(--nj-transition-fast);
}

.nj-single__kr-title a:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.nj-single__kr-title a:hover .nj-single__kr-title-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* "Read article" link — matches nj-ia__view-all exactly */
.nj-single__kr-link,
.nj-single__kr-link a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-family: var(--nj-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-loose);
  color: var(--nj-color-teal-dark);
  text-decoration: underline;
  text-decoration-color: var(--nj-color-accent);
  text-underline-offset: 3px;
  transition: text-decoration-style var(--nj-transition-fast);
}

.nj-single__kr-arrow {
  color: var(--nj-color-accent);
  flex-shrink: 0;
}

.nj-single__kr-link a:hover,
.nj-single__kr-link:hover {
  text-decoration-style: dotted;
  text-decoration-color: var(--nj-color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ==========================================================================
   Insights Category page (templates/page-insights-category.html)
   The <main class="nj-cat-page"> owns the page's 140px block spacing.
   Inside it, nojiggery_render_category_page() outputs a <section class="nj-insights-archive">
   so it inherits the archive block's header / grid / container styling, then
   a 3-column list of the single-insight .nj-single__kr-* "Keep reading" cards.
   Only the deltas live here.
   ========================================================================== */

/* A category page has no hero above and no .nj-spacing--default sibling below,
   and the .is-layout-flow parent zeroes margin-block, so put the block spacing
   on the <main> wrapper as padding. (This is the ONLY place it lives — the
   inner <section> carries no spacing class.) 120px matches the single-insight
   back-row's own top padding so the "All articles" link sits at the same
   distance from the site header on both. */
.nj-cat-page {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* "All articles" back-link — matches the visible spacing on single insights.
   .nj-cat-page already supplies 140px above (≈ single's 120px to the back-row),
   and the section header below adds its own 24px top padding before the union,
   so 40px here brings the back-link → union gap to ~64px, which is the same
   visible gap a single insight has between "All articles" and the article. */
.nj-cat-page__back-row {
  padding: 0 24px 40px;
}

/* Desktop: on /insights/ the columns have `padding: 24px`, so the column text
   sits at section-x + 24 — the same as the header text. The kr-cards here have
   no such inner padding, so push the grid in by an extra 24px to land on the
   same line. (At <=1024 .nj-ia__header-inner drops to `24px 0`, so the header
   text is at section-x and the base .nj-ia__grid `padding: 0 section-x` already
   lines up — hence this is desktop-only.) */
@media (min-width: 1025px) {
  .nj-cat-page .nj-ia__grid {
    padding-left: calc(var(--nj-section-x) + 24px);
    padding-right: calc(var(--nj-section-x) + 24px);
  }
}

/* 3-column variant of .nj-single__kr-list (4-col by default), used as the
   sole child of .nj-ia__grid (a flex container) — hence width:100%.
   The 2-col / 1-col responsive rules on .nj-single__kr-list still apply. */
.nj-single__kr-list--3col {
  width: 100%;
  grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 1024px) {
  .nj-cat-page {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* Mobile category-page header rhythm:
     back-row → union  : 32px  (.nj-ia__header-inner padding-top)
     union → h1        : 16px  (.nj-ia__header-inner flex gap)
     h1 → intro        : 16px  (.nj-ia__header-inner flex gap)
     intro → grid      : 32px  (.nj-ia__header padding-bottom)
   .nj-cat-page padding-top is zeroed so the back-row's own 72px top decides
   where "All articles" sits — same as on a single insight. */
@media (max-width: 768px) {
  .nj-cat-page {
    padding-top: 0;
  }
  .nj-cat-page .nj-ia__header {
    padding-top: 0;
    padding-bottom: 32px;
  }
  .nj-cat-page .nj-ia__header-inner {
    padding-top: 32px;
    padding-bottom: 0;
  }
}

/* ── Union above page title — ::before, shown on mobile only ── */

/* ── Mobile author block — hidden on desktop, shown on mobile ── */
.nj-single__author-mobile {
  display: none;
}

/* ── Single insight: tablet ── */
@media (max-width: 1024px) {
  /* Stack to single column */
  .nj-single__wrap {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 8px;
  }

  /* Hide desktop sidebars */
  .nj-single__sidebar-left {
    display: none;
  }

  .nj-single__sidebar-right {
    display: none;
  }

  /* Union above title — ::before, same approach as h2 */
  .nj-single__title::before {
    content: '';
    display: block;
    width: 100px;
    height: 14px;
    margin-bottom: 16px;
    background: url('./assets/images/icons/union-pink.svg') no-repeat left center / contain;
  }

  /* Show mobile author at end of article */
  .nj-single__author-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 0;
    gap: 8px;
  }

  .nj-single__date-block-mobile {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .nj-single__date-block-mobile .nj-single__date,
  .nj-single__date-block-mobile .nj-single__date a {
    font-size: 18px;
  }

  .nj-single__author-mobile .nj-single__author-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .nj-single__author-mobile .nj-single__author-name,
  .nj-single__author-mobile .nj-single__author-name p {
    font-size: 22px;
    line-height: 1.3;
  }

  /* Content fills full width */
  .nj-single__content {
    max-width: 100%;
  }

  /* Title — 44px per Figma M Article/h1 */
  .nj-single__title {
    font-size: 44px !important;
    line-height: 1 !important;
  }

  /* Header section — Figma: padding 0, gap 16px */
  .nj-single__header {
    gap: 0;
  }

  .nj-single__meta {
    padding-top: 16px;
  }

  /* Lead paragraph — mobile size: 20px */
  .nj-single__body .wp-block-post-content > p.intro {
    font-size: 20px;
    line-height: 1.4;
  }

  /* Body text — 18px on mobile */
  .nj-single__body p {
    font-size: 18px;
    line-height: 1.5;
  }

  .nj-single__body {
    font-size: 18px;
  }

  .nj-single__body ul,
  .nj-single__body ol {
    font-size: 18px;
  }

  /* POSTS — Article scale mobile (36/30/26) */
  .nj-single__body h2 {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: var(--nj-tracking-tight);
    padding: 24px 0 8px;
  }

  .nj-single__body h3 {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: var(--nj-tracking-tight);
    padding-top: 16px;
  }

  .nj-single__body h4 {
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: var(--nj-tracking-normal);
    padding-top: 16px;
  }

  /* PAGES — Heading scale mobile (58/40/38/26/22). Front end; editor copies
     in editor-page.css. :not([class*="nj-"]) excludes ACF block headings. */
  .page-template-default .wp-block-post-content h1:not([class*="nj-"]) {
    font-size: 58px;
    line-height: 1;
  }

  .page-template-default .wp-block-post-content h2:not([class*="nj-"]) {
    font-size: 40px;
    line-height: 1.2;
  }

  .page-template-default .wp-block-post-content h3:not([class*="nj-"]) {
    font-size: 38px;
    line-height: 1.1;
  }

  .page-template-default .wp-block-post-content h4:not([class*="nj-"]) {
    font-size: 26px;
    line-height: 1.2;
  }

  .page-template-default .wp-block-post-content h5:not([class*="nj-"]) {
    font-size: 22px;
    line-height: 1.3;
  }

  /* Callout — mobile overrides */
  .nj-callout {
    padding: 48px 32px !important;
  }

  .nj-callout::before {
    left: 32px;
    right: 32px;
  }

  .nj-callout .wp-block-heading {
    font-size: 30px !important;
  }

  .nj-callout > p {
    font-size: 18px !important;
  }

  /* Stack buttons vertically, full-width primary */
  .nj-callout > .wp-block-group:last-child {
    flex-direction: column !important;
    width: 100%;
  }

  .nj-callout > .wp-block-group:last-child .is-style-fill {
    width: 100%;
  }

  .nj-callout > .wp-block-group:last-child .is-style-fill .wp-block-button__link {
    width: 100%;
    justify-content: center;
    display: flex;
  }

  /* Keep reading — 2 cols on tablet, 24px padding */
  .nj-single__keep-reading {
    padding: 0 24px;
  }

  .nj-single__kr-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .nj-single__kr-heading {
    font-size: 30px !important;
  }

  /* Page bottom padding — 48px on mobile, not 120px */
  .nj-single {
    padding-bottom: 48px;
  }

  /* Back row — mobile */
  .nj-single__back-row {
    padding: 72px 24px 0;
  }
}

/* ── Single insight: mobile ── */
@media (max-width: 768px) {
  .nj-single__title {
    font-size: 44px !important;
    line-height: 1 !important;
  }

  /* Keep reading — single column, padding 24px */
  .nj-single__keep-reading {
    padding: 0 24px;
  }

  .nj-single__kr-list {
    grid-template-columns: 1fr !important;
  }

  .nj-single__kr-card {
    padding: 16px 16px 16px 24px;
  }

  .nj-single__kr-heading {
    font-size: 30px !important;
  }

  .nj-single__kr-title {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   17. Swiper Slider Overrides
   ========================================================================== */

.swiper {
  width: 100%;
  overflow: hidden;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  flex-shrink: 0;
}

.swiper-button-prev,
.swiper-button-next {
  color: var(--nj-color-primary);
}

.swiper-pagination-bullet {
  background-color: var(--nj-color-primary);
}

.swiper-pagination-bullet-active {
  background-color: var(--nj-color-accent);
}

/* ==========================================================================
   19. Utilities
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   20. Responsive

   Breakpoint strategy:
   - Desktop (default):  > 1024px — Figma desktop design (1440px)
   - Laptop:            ≤ 1550px — desktop layout, tighter padding via --nj-section-x/y
   - Tablet/Mobile:     ≤ 1024px — stacked/mobile layout (Figma mobile 390px)
   - Mobile fine-tune:  ≤ 768px  — further adjustments for small screens

   No clamp(). Fixed pixel values at each breakpoint.
   --nj-section-x and --nj-section-y drive padding sitewide — change here,
   updates everywhere (hero, footer CTA, footer top, footer middle).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Laptop — ≤ 1550px (desktop layout, tighter padding)
   -------------------------------------------------------------------------- */
@media (max-width: 1550px) {
  :root {
    --nj-section-x: 80px;
    --nj-section-y: 100px;
  }

}

/* --------------------------------------------------------------------------
   Laptop narrow — ≤ 1280px (desktop layout, smaller image to prevent overlap)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .nj-hero__content {
    max-width: min(620px, 58%);
  }

  .nj-hero__image {
    width: 32%;
    max-width: 440px;
  }

  .nj-hero__title {
    font-size: 96px;
    letter-spacing: var(--nj-tracking-tighter);
  }
}

/* --------------------------------------------------------------------------
   Tablet/Mobile — ≤ 1024px (stacked layout)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  :root {
    --nj-section-x: 48px;
    --nj-section-y: 80px;
  }

  /* Header */

  .nj-header .wp-block-site-logo img {
    width: 160px;
  }

  .nj-header .wp-block-navigation {
    gap: 24px;
  }

  .nj-header .wp-block-navigation-item__content {
    font-size: 18px;
  }

  /* Hero — mobile/stacked layout from 1024px down */
  .nj-hero {
    min-height: calc(95vh - var(--nj-header-height, 84px));
  }

  .nj-hero__inner {
    padding: 48px;
    justify-content: space-between;
  }

  .nj-hero__content {
    max-width: 100%;
    width: 100%;
    gap: 24px;
  }

  .nj-hero__title {
    font-size: 72px;
    letter-spacing: var(--nj-tracking-tighter);
  }

  .nj-hero__eyebrow {
    font-size: 20px;
    letter-spacing: var(--nj-tracking-normal);
  }

  .nj-hero__description {
    font-size: 22px;
    letter-spacing: var(--nj-tracking-normal);
  }

  .nj-hero__image {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
  }

  /* Insights hero */
  .nj-hero--insights {
    min-height: calc(95vh - var(--nj-header-height, 84px));
    height: auto;
  }

  .nj-hero--insights .nj-hero__inner {
    justify-content: space-between;
    padding-bottom: 48px;
  }

  .nj-hero--insights .nj-hero__content {
    max-width: 100%;
    width: 100%;
  }

  .nj-hero--insights .nj-hero__image {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
  }

  /* Standard hero — size to content on mobile. The 95vh min-height forced a
     near-full-screen hero with a huge empty gap between the top-aligned text
     and the bottom-aligned image. Let it collapse to its content instead. */
  .nj-hero--standard {
    min-height: 0;
    height: auto;
  }

  .nj-hero--standard .nj-hero__inner {
    padding-bottom: 48px;
    justify-content: flex-start;
    gap: 32px;
  }

  .nj-hero--standard .nj-hero__content {
    max-width: 100%;
    width: 100%;
  }

  .nj-hero--standard .nj-hero__image {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
  }

  /* Footer */
  .nj-footer {
    border-radius: 0;
  }

  /* At mobile, columns stack full-width — box-shadow bleeds still work per column */
  .nj-footer__wrapper {
    flex-direction: column;
  }

  .nj-footer__main {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
  }

  .nj-footer__cta {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border-top-right-radius: 32px;
    border-top-left-radius: 0;
    padding: var(--nj-section-y) var(--nj-section-x);
  }

  .nj-footer__cta-title {
    font-size: 42px;
  }

  .nj-footer__cta-text {
    font-size: 18px;
  }

  .nj-footer__illustration {
    position: relative;
    bottom: auto;
    right: auto;
    order: -1;
    margin-bottom: 24px;
    align-self: flex-end;
  }

  .nj-footer__illustration img {
    height: 200px;
    width: auto;
  }

  .nj-footer__top {
    padding: var(--nj-section-y) var(--nj-section-x) 0;
  }

  .nj-footer__middle {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 40px var(--nj-section-x) 64px;
  }

  .nj-footer__nav-column {
    text-align: left;
    width: 100%;
  }

  /* Grids */
  .nj-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nj-testimonials__inner {
    grid-template-columns: 1fr;
  }

  .nj-testimonials__features {
    margin-top: var(--nj-space-xl);
  }

  /* Single — handled in dedicated single-insight mobile block above */

  /* Keep reading — handled in dedicated single-insight mobile block above */

  /* Insights teaser — tablet: hide label, drop fixed heights, keep 2-col */
  .nj-insights__label-col {
    display: none;
  }

  .nj-insights__row--1 {
    height: auto;
  }

  .nj-insights__row--2 {
    height: auto;
  }

  .nj-insight-card {
    flex: 1;
    height: auto;
    min-height: 260px;
    padding: 40px;
  }

  .nj-insight-card--abs {
    padding: 40px;
  }

  .nj-insight-card--abs .nj-insight-card__content {
    position: static;
    width: 100%;
  }

  .nj-insight-card__title {
    font-size: 22px;
  }
}

/* --------------------------------------------------------------------------
   Mobile — ≤ 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  :root {
    --nj-section-x: 24px;
    --nj-section-y: 64px;
  }

  /* Header */
  .nj-header {
    border-radius: 0;
  }

  .nj-header__inner {
    padding: 16px var(--nj-section-x);
  }

  .nj-header .wp-block-site-logo img {
    width: 128px;
  }

  .nj-header__nav {
    gap: 8px;
  }

  /* Hide desktop nav + arrow button, show mobile trigger */
  .nj-header .wp-block-navigation,
  .nj-header__arrow-btn {
    display: none;
  }

  .nj-header__mobile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .nj-header__menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--nj-font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--nj-color-primary);
  }

  .nj-header__menu-label {
    font-family: var(--nj-font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--nj-color-primary);
  }

  .nj-header__menu-btn svg {
    width: 24px;
    height: 24px;
    color: var(--nj-color-primary);
  }

  .nj-header__menu-close {
    display: none;
  }

  .nj-header__mobile-trigger.is-open .nj-header__menu-open {
    display: none;
  }

  .nj-header__mobile-trigger.is-open .nj-header__menu-close {
    display: flex;
  }

  /* Mobile menu overlay */
  .nj-mobile-menu {
    position: fixed;
    top: var(--nj-header-height, 84px);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--nj-color-teal-light);
    border-radius: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nj-transition-slow), visibility var(--nj-transition-slow);
  }

  .nj-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .nj-mobile-menu__nav {
    margin: 0;
    padding: 0;
  }

  .nj-mobile-menu__nav .wp-block-navigation,
  .nj-mobile-menu__nav .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100%;
  }

  .nj-mobile-menu__nav .wp-block-navigation-item {
    width: 100%;
    list-style: none;
    position: relative;
  }

  .nj-mobile-menu__nav .wp-block-navigation-item + .wp-block-navigation-item {
    border-top: 1px dashed var(--nj-color-teal-medium);
  }

  .nj-mobile-menu__nav .wp-block-navigation-item__content {
    display: block !important;
    font-family: var(--nj-font-heading) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: var(--nj-tracking-tightest) !important;
    color: var(--nj-color-primary) !important;
    text-decoration: none !important;
    padding: 16px 0 !important;
    width: 100%;
    border: none !important;
    position: static !important;
  }

  .nj-mobile-menu__nav .wp-block-navigation-item__content::before {
    display: none !important;
  }

  .nj-mobile-menu__nav .wp-block-navigation-item.current-menu-item::before,
  .nj-mobile-menu__nav .wp-block-navigation-item.current_page_item::before,
  .nj-mobile-menu__nav .wp-block-navigation-item[aria-current="page"]::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: var(--nj-color-accent);
    border-radius: 50%;
  }

  .nj-mobile-menu__nav .wp-block-navigation-item__content:hover {
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1px !important;
  }

  .nj-mobile-menu__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
  }

  .nj-mobile-menu__cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    background-color: var(--nj-color-accent);
    color: var(--nj-color-white);
    font-family: var(--nj-font-heading);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: var(--nj-tracking-tightest);
    line-height: 1;
    text-decoration: none !important;
    border-radius: 50px;
    transition: transform var(--nj-transition-base);
    white-space: nowrap;
  }

  .nj-mobile-menu__cta-btn:hover {
    transform: scale(1.05);
  }

  .nj-mobile-menu__coffee {
    height: 197px;
    width: auto;
    flex-shrink: 0;
  }

  /* Hero */
  .nj-hero {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .nj-hero__inner {
    padding: 48px 24px;
  }

  .nj-hero__image {
    max-width: 200px;
  }

  .nj-hero__title {
    font-size: 58px;
    letter-spacing: var(--nj-tracking-tighter);
  }

  .nj-hero__description {
    font-size: 20px;
  }

  /* Block vertical padding is zero — spacing between sections controlled by spacer blocks */

  /* Grids */
  /* Projects slider: mobile header + nav */
  .nj-projects__inner {
    gap: 16px;
  }

  .nj-projects__header {
    padding-left: var(--nj-section-x);
    padding-right: var(--nj-section-x);
  }

  .nj-projects__label {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: var(--nj-tracking-tightest);
    color: var(--nj-color-teal-dark);
  }

  .nj-projects__btn {
    width: 48px;
    height: 48px;
  }

  /* Insights teaser — mobile: label stacks above cards, 8px gaps between items */
  .nj-insights__inner {
    gap: 8px;
  }

  /* Row 1 wraps so label col becomes its own line above the cards */
  .nj-insights__row--1 {
    flex-wrap: wrap;
    gap: 0;
    row-gap: 16px;
  }

  .nj-insights__row--1 .nj-insights__label-col {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 8px;
  }

  .nj-insights__label {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 40px;
    line-height: 1.2;
  }

  .nj-insights__row--1,
  .nj-insights__row--2 {
    flex-direction: column;
    height: auto;
    gap: 8px;
    padding-left: 0;
  }

  .nj-insight-card {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 211px;
    padding: 32px 24px;
  }

  .nj-insight-card--tall {
    min-height: 240px;
  }

  .nj-insight-card--abs {
    padding: 32px 24px;
  }

  .nj-insight-card--abs .nj-insight-card__content {
    position: static;
    width: 100%;
  }

  .nj-insight-card__title {
    font-size: 22px;
  }

  .nj-insight-card__link {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 0;
  }

  .nj-testimonials__features {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .nj-footer__cta {
    padding: 48px var(--nj-section-x);
  }

  .nj-footer__cta-title {
    font-size: 38px;
    padding-top: 48px;
  }

  .nj-footer__illustration img {
    height: 182px;
  }

  .nj-footer__top {
    padding: 64px var(--nj-section-x) 0;
  }

  .nj-footer__logo img {
    width: 322px;
  }

  .nj-footer__bio {
    max-width: 100%;
    font-size: 18px;
  }

  .nj-footer__linkedin-link {
    font-size: 18px;
  }

  .nj-footer__middle {
    gap: 48px;
    padding: 48px var(--nj-section-x);
  }

  .nj-footer__awia-text {
    font-size: 18px;
  }

  .nj-footer__nav-column {
    text-align: left;
    width: 100%;
  }

  .nj-footer__nav .wp-block-navigation-item__content {
    font-size: 18px;
  }

  .nj-footer__bottom {
    margin: 0;
    padding: 16px 32px;
  }
}

/* ==========================================================================
   20.1 Block Spacing System
   ========================================================================== */

/* ACF block spacing overrides (applied via render_block filter) */
.nj-spacing--default { margin-bottom: 140px !important; }
.nj-spacing--none    { margin-bottom: 0 !important; }
.nj-spacing--double  { margin-bottom: 280px !important; }

@media (max-width: 1024px) {
  .nj-spacing--default { margin-bottom: 32px !important; }
  .nj-spacing--double  { margin-bottom: 64px !important; }
}

/* ==========================================================================
   21. Editor Styles (Gutenberg)
   ========================================================================== */

.editor-styles-wrapper {
  font-family: var(--nj-font-body);
  font-size: var(--nj-text-base);
  color: var(--nj-color-primary);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  font-family: var(--nj-font-heading);
}

/* Fix editor gap between footer columns */
.editor-styles-wrapper .nj-footer__wrapper > .wp-block {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Footer illustration note: position:absolute renders inline in editor — correct on frontend */
/* Footer illustration — keep absolute positioning in editor to match front-end */
.editor-styles-wrapper .nj-footer__illustration {
  position: absolute !important;
  bottom: 48px;
  right: 48px;
  z-index: 0;
  pointer-events: none;
}

/* ── Services/Projects slider — editor styles ── */
/* Show slides as a flex row; overflow visible so they're not clipped */
.editor-styles-wrapper .nj-services {
  overflow-x: visible;
}

.editor-styles-wrapper .nj-services__swiper {
  overflow: visible;
}

.editor-styles-wrapper .nj-services__swiper .swiper-wrapper {
  display: flex;
  gap: 24px;
  transform: none !important;
}

.editor-styles-wrapper .nj-services__swiper .swiper-slide {
  flex: 0 0 auto;
  width: 413px;
}

/* Show progress bar at a representative fill */
.editor-styles-wrapper .nj-services__progress-bar {
  width: 33%;
}

/* ── Projects slider — editor styles ── */
/* Swiper doesn't run in editor — show slides as a flex row */
.editor-styles-wrapper .nj-projects__swiper {
  overflow: visible;
}

.editor-styles-wrapper .nj-projects__swiper .swiper-wrapper {
  display: flex;
  gap: 24px;
  transform: none !important;
}

.editor-styles-wrapper .nj-projects__swiper .swiper-slide {
  flex: 0 0 auto;
  width: calc(25% - 18px);
}

.editor-styles-wrapper .nj-projects__nav {
  display: flex;
  gap: 8px;
}

/* ── Testimonials block — editor styles ── */
/* Swiper JS doesn't run in the editor. We replicate the teaser look:
   panel overflows right, features-swiper is calc(100% + 80px) wide,
   first slide fills the active area, second slide peeks as teaser. */
.editor-styles-wrapper .nj-testimonials {
  overflow-x: clip;
}

.editor-styles-wrapper .nj-testimonials__panel {
  overflow: hidden;
}

/* Swiper wrapper: lay slides out as a flex row matching frontend teaser look */
.editor-styles-wrapper .nj-testimonials__features-swiper {
  overflow: visible;
  width: calc(100% + 80px);
}

.editor-styles-wrapper .nj-testimonials__features-swiper .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 80px;
  transform: none !important;
}

/* All slides: auto width, clipped by panel overflow:hidden */
.editor-styles-wrapper .nj-testimonials__features-swiper .swiper-slide {
  opacity: 1;
  flex: 0 0 auto;
  width: calc((100% - 80px) / 1.45);
}

/* Dim all non-first slides like the real inactive state */
.editor-styles-wrapper .nj-testimonials__features-swiper .swiper-slide:not(:first-child) {
  opacity: 0.5;
}

/* Quote swiper: show first slide only */
.editor-styles-wrapper .nj-testimonials__swiper .swiper-wrapper {
  display: flex;
}

.editor-styles-wrapper .nj-testimonials__swiper .swiper-slide:not(:first-child) {
  display: none;
}

/* Controls: match active-slide width so it aligns with the card right edge */
.editor-styles-wrapper .nj-testimonials__controls {
  width: calc((100% + 80px) / 1.45);
  padding-right: 0;
}

/* ── Hug/CTA pattern — editor styles ── */
/* Illustration positioning works via front-end CSS; just disable pointer events in editor */
.editor-styles-wrapper .nj-cta__illustration {
  pointer-events: none;
}

/* ── Hero — editor styles ── */
/* Remove negative margin (no fixed header in editor) and cap height sensibly */
.editor-styles-wrapper .nj-hero {
  margin-top: 0 !important;
  height: auto;
  max-height: none;
  min-height: 600px;
  overflow: visible;
  border-radius: var(--nj-radius-xl);
}

/* Inner: no need to offset for header in editor */
.editor-styles-wrapper .nj-hero__inner {
  padding-top: 80px;
}

/* Image: relative in editor so it flows naturally */
.editor-styles-wrapper .nj-hero__image {
  position: relative;
  bottom: auto;
  right: auto;
  width: 40%;
  max-width: 500px;
  margin-left: auto;
  margin-top: 32px;
}

/* Insights variant: reasonable fixed height in editor */
.editor-styles-wrapper .nj-hero--insights {
  height: auto;
  min-height: 500px;
}

.editor-styles-wrapper .nj-hero--insights .nj-hero__inner {
  padding-top: 48px;
}

.editor-styles-wrapper .nj-hero--insights .nj-hero__image {
  position: relative;
  bottom: auto;
  right: auto;
  width: 300px;
  margin-left: auto;
  margin-top: 24px;
}

/* Standard variant in editor */
.editor-styles-wrapper .nj-hero--standard {
  height: auto;
  min-height: 500px;
}

.editor-styles-wrapper .nj-hero--standard .nj-hero__inner {
  padding-top: 48px;
}

.editor-styles-wrapper .nj-hero--standard .nj-hero__image {
  position: relative;
  bottom: auto;
  right: auto;
  width: 300px;
  margin-left: auto;
  margin-top: 24px;
}

/* Search bar in editor — preserve pill layout */
.editor-styles-wrapper .nj-hero__search form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
}

.editor-styles-wrapper .nj-hero__search-input {
  flex: 1 !important;
  width: 354px !important;
  height: 56px !important;
  padding: 16px 32px !important;
  background: var(--nj-color-white) !important;
  border: 1px solid var(--nj-color-teal-light) !important;
  border-radius: 50px !important;
  font-family: var(--nj-font-body) !important;
  font-size: 18px !important;
  color: var(--nj-color-primary) !important;
  box-sizing: border-box !important;
}

.editor-styles-wrapper .nj-hero__search-btn {
  flex-shrink: 0 !important;
  width: 134px !important;
  height: 56px !important;
  padding: 16px 32px !important;
  background: var(--nj-color-teal-dark) !important;
  border: none !important;
  border-radius: 50px !important;
  font-family: var(--nj-font-heading) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: var(--nj-tracking-tightest) !important;
  color: var(--nj-color-white) !important;
  white-space: nowrap !important;
}

/* Hide scroll-down button in editor (no scroll behavior) */
.editor-styles-wrapper .nj-hero__scroll-down {
  display: none;
}

/* ── Insights teaser — editor styles ── */
/* Layout renders statically — no JS needed, looks correct in editor */
.editor-styles-wrapper .nj-insight-card {
  pointer-events: none;
}

/* ── FSE root container max-width override ── */
/* WordPress applies max-width: contentSize (800px) to non-alignfull blocks in the
   root container. Our ACF blocks output alignfull on the <section> but the editor
   wraps them in .wp-block divs that don't always carry the alignfull class.
   Override the constraint for all nj- block wrappers so they render full-width. */
.editor-styles-wrapper .wp-block[data-type^="acf/"]:not([data-type="acf/header-cta"]) {
  max-width: none !important;
  width: 100% !important;
}

/* Header CTA — keep compact in editor */
.editor-styles-wrapper .wp-block[data-type="acf/header-cta"] {
  width: auto !important;
  max-width: 64px !important;
}

/* Remove max-width for ACF block wrappers and pattern groups so they render full-width */
.editor-styles-wrapper .wp-block:has(> [data-type^="acf/"]:not([data-type="acf/header-cta"])),
.editor-styles-wrapper .wp-block:has(> .nj-cta),
.editor-styles-wrapper .wp-block:has(> .nj-text-image),
.editor-styles-wrapper .wp-block:has(> .nj-callout) {
  max-width: none !important;
}

/* Block spacing in editor — match the front-end nj-spacing--default gap, which
   is margin-BOTTOM on the ACF block itself. Mirroring that model (rather than
   sibling adjacency) means the gap shows even when the next block is nested
   differently, e.g. a page's core/Spectra section after acf/hero — which is
   why the hero's bottom gap wasn't appearing in the page editor.
   Margin-bottom only (no adjacency margin-top) so gaps can't double to 280px. */
.editor-styles-wrapper .wp-block[data-type^="acf/"]:not([data-type="acf/header-cta"]) {
  margin-bottom: 140px !important;
}

/* Normal block followed by an ACF block still needs the gap (the normal block
   has no 140 bottom). Only this direction uses adjacency; it can't stack with
   the rule above because a normal block has no margin-bottom of its own here. */
.editor-styles-wrapper .wp-block:not([data-type^="acf/"]) + .wp-block[data-type^="acf/"]:not([data-type="acf/header-cta"]) {
  margin-top: 140px !important;
}

/* Pattern groups (nj-cta / nj-text-image / nj-callout) get their gap the same
   way as the front end: margin-BOTTOM on the block itself (mirrors
   nj-spacing--default), not sibling adjacency — so the gap shows even with no
   following block or with Spectra nesting.
   Target BOTH the .wp-block wrapper (any nesting depth) AND the pattern element
   itself, because the editor's block wrapping varies. */
.editor-styles-wrapper .wp-block.nj-cta,
.editor-styles-wrapper .wp-block.nj-text-image,
.editor-styles-wrapper .wp-block.nj-callout,
.editor-styles-wrapper .nj-cta,
.editor-styles-wrapper .nj-text-image,
.editor-styles-wrapper .nj-callout {
  margin-bottom: 140px !important;
}

/* Normal block followed by a pattern group still needs the gap above it. */
.editor-styles-wrapper .wp-block:not(:has(> .nj-cta)):not(:has(> .nj-text-image)):not(:has(> .nj-callout)) + .wp-block:has(> .nj-cta),
.editor-styles-wrapper .wp-block:not(:has(> .nj-cta)):not(:has(> .nj-text-image)):not(:has(> .nj-callout)) + .wp-block:has(> .nj-text-image),
.editor-styles-wrapper .wp-block:not(:has(> .nj-cta)):not(:has(> .nj-text-image)):not(:has(> .nj-callout)) + .wp-block:has(> .nj-callout) {
  margin-top: 140px !important;
}

/* Direct pattern adjacency (no .wp-block wrapper in some editor contexts) */
/* (Old pattern-to-pattern adjacency margin-top removed — the margin-bottom
   model above handles pattern spacing without doubling.) */

@media (max-width: 1024px) {
  /* Mobile editor: section gap drops to 32px, matching front-end
     nj-spacing--default mobile. Same direct-element model as desktop. */
  .editor-styles-wrapper .wp-block[data-type^="acf/"]:not([data-type="acf/header-cta"]),
  .editor-styles-wrapper .wp-block.nj-cta,
  .editor-styles-wrapper .wp-block.nj-text-image,
  .editor-styles-wrapper .wp-block.nj-callout,
  .editor-styles-wrapper .nj-cta,
  .editor-styles-wrapper .nj-text-image,
  .editor-styles-wrapper .nj-callout {
    margin-bottom: 32px !important;
  }
}

/* Buttons — match front-end size in editor */
.editor-styles-wrapper .wp-block-button__link {
  font-size: 22px !important;
  padding: 16px 32px !important;
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS ARCHIVE BLOCK
   Figma: tag-column layout. 3 cols desktop, stacked mobile.
   Each col: above-text mark + h3 tag name + article list +
   "Read article →" CTA. White background, 120px section x.
   ═══════════════════════════════════════════════════════════════ */

.nj-insights-archive {
  background: var(--nj-color-white);
  padding: 0;
  margin-block-start: 0 !important;
}

/* ── Section header (Union mark + h2 + subheading) ── */
.nj-ia__header {
  padding: 0 var(--nj-section-x);
}

.nj-ia__header-inner {
  max-width: var(--nj-container-width);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nj-ia__union {
  display: block;
  flex-shrink: 0;
}

.nj-ia__heading {
  font-family: var(--nj-font-heading);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tightest);
  color: var(--nj-color-teal-dark);
  margin: 0;
}

.nj-ia__subheading {
  font-family: var(--nj-font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-teal-dark);
  margin: 0;
}

/* ── 3-column tag grid ──
   Uses the same container math as the header band so the columns stay aligned
   with the header text at every viewport width: a max-width of
   (content + 2×section-x) with section-x as the inline gutter, border-box so
   the gutter is always honoured. */
.nj-ia__grid {
  max-width: calc(var(--nj-container-width) + 2 * var(--nj-section-x));
  margin: 48px auto 0;
  padding: 0 var(--nj-section-x);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px 24px;
  align-items: flex-start;
}

/* ── Individual tag column ── */
.nj-ia__col {
  flex: 0 0 calc(33.333% - 16px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  box-sizing: border-box;
}

/* ── Tag column header: mark + h3 ── */
.nj-ia__cat-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nj-ia__cat-mark {
  display: block;
  flex-shrink: 0;
}

.nj-ia__cat-name {
  font-family: var(--nj-font-heading);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-teal-dark);
  margin: 0;
}

/* Category name as a link to its landing page — inherits the heading look,
   gains a dotted underline on hover (matches the theme's link behaviour). */
.nj-ia__cat-name-link {
  color: inherit;
  text-decoration: none;
}

.nj-ia__cat-name-link:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* ── Article list ── */
.nj-ia__list {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  gap: 16px;
  flex: 1;
}

/* ── Article item ── */
.nj-ia__item {
  /* gap on .nj-ia__list handles vertical spacing */
}

/* Article link: inline so arrow appears right after last letter */
.nj-ia__item-link {
  text-decoration: none;
  color: var(--nj-color-teal-dark);
  padding: 4px 0;
  display: inline;
  transition: color var(--nj-transition-fast);
}

.nj-ia__item-link:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  background-color: var(--nj-color-off-white);
  color: var(--nj-color-teal-dark);
}

.nj-ia__item-title {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  margin: 0;
}

/* Arrow: inline, hidden by default, appears on hover after title text */
.nj-ia__item-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  color: var(--nj-color-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--nj-transition-fast), transform var(--nj-transition-fast);
}

.nj-ia__item-link:hover .nj-ia__item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── Dashed divider between articles ── */
.nj-ia__divider {
  width: 100%;
  height: 0;
  border-top: 1px dashed rgba(1, 63, 59, 0.5);
  flex-shrink: 0;
}

/* ── Expanded posts container — hidden by default, flex when revealed ── */
.nj-ia__more-posts[hidden] {
  display: none !important;
}

.nj-ia__more-posts:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── "View all" CTA — expands hidden posts inline ── */
.nj-ia__view-all {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  background: none;
  border: none;
  padding: 10px 0;
  cursor: pointer;
  font-family: var(--nj-font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-loose);
  color: var(--nj-color-teal-dark);
  text-decoration: underline;
  text-decoration-color: var(--nj-color-accent);
  text-underline-offset: 3px;
  transition: text-decoration-style var(--nj-transition-fast);
}

.nj-ia__view-all-arrow {
  color: var(--nj-color-accent);
  flex-shrink: 0;
}

.nj-ia__view-all:hover {
  text-decoration-style: dotted;
  text-decoration-color: var(--nj-color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.nj-ia__view-all[aria-expanded="true"] {
  display: none;
}

/* ── Empty state ── */
.nj-ia__empty {
  max-width: var(--nj-container-width);
  margin: 0 auto;
  padding: 64px var(--nj-section-x);
  font-family: var(--nj-font-body);
  font-size: 20px;
  color: var(--nj-color-teal-dark);
  text-align: center;
}

.nj-ia__empty a {
  color: var(--nj-color-accent);
  text-decoration: underline;
}

/* ==========================================================================
   Insights Archive — Search Results
   ========================================================================== */

/* ── Results list — sits inside the same .nj-ia__header / .nj-ia__header-inner
   wrapper as the search header above it (so the left edge matches the
   "Search Results" heading). Capped to 760px, left-aligned within the inner. ── */
.nj-ia__header-inner--results {
  padding-top: 0 !important;
}

.nj-ia__results {
  max-width: 760px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Search results: full-width list reusing .nj-ia__item-link pattern ── */
.nj-ia__result-item {
  padding: 16px 24px;
}

/* Tags sit below the title link */
.nj-ia__result-tags {
  display: block;
  font-family: var(--nj-font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(1, 63, 59, 0.5);
  padding: 4px 0 0;
}

/* Clear search — reuses .nj-ia__view-all pattern (already an <a> in PHP) */
.nj-ia__search-clear {
  max-width: var(--nj-container-width);
  margin: 32px auto 0;
  padding: 0 24px;
}

a.nj-ia__view-all {
  text-decoration: underline;
  text-decoration-color: var(--nj-color-accent);
  text-underline-offset: 3px;
}

a.nj-ia__view-all:hover {
  text-decoration-style: dotted;
  text-decoration-color: var(--nj-color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── No results state — card style ── */
.nj-ia__no-results {
  max-width: var(--nj-container-width);
  margin: 48px auto 0;
  padding: 0 24px;
}

.nj-ia__no-results-card {
  background: var(--nj-color-off-white);
  border-radius: var(--nj-radius-xl);
  padding: 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* No-results button — inherits base .wp-block-button__link styles */

.nj-ia__no-results-message {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-teal-dark);
  margin: 0;
  max-width: 500px;
}

/* ── Search results mobile ── */
@media (max-width: 768px) {
  .nj-ia__results {
    margin-top: 0;
    padding: 0 24px;
  }

  .nj-ia__result-item {
    padding: 16px 0;
  }

  .nj-ia__search-clear {
    padding: 0 24px;
  }

  .nj-ia__no-results {
    padding: 0 24px;
    margin-top: 0;
  }

  .nj-ia__no-results-card {
    padding: 48px 24px;
    border-radius: var(--nj-radius-lg);
  }

  .nj-ia__empty {
    padding: 0 24px;
  }
}

/* ── Tablet: keep 2 cols, reduce font sizes ── */
@media (max-width: 1024px) {
  .nj-ia__heading {
    font-size: 48px;
  }

  .nj-ia__cat-name {
    font-size: 36px;
  }

  .nj-ia__col {
    flex: 0 0 calc(50% - 12px);
    /* Match the header text inset (.nj-ia__header-inner is `24px 0` here). */
    padding: 24px 0;
  }

  /* Tablet: header text should sit inline with the grid, not extra-indented —
     drop the inner box's horizontal padding (keep the top/bottom). */
  .nj-ia__header-inner {
    padding: 24px 0;
  }
}

/* ── Mobile: stacked, Figma specs ── */
@media (max-width: 768px) {
  .nj-ia__header {
    padding: 16px 24px 48px;
    margin-top: 0;
  }

  .nj-ia__header-inner {
    padding: 24px 0;
    gap: 16px;
  }

  .nj-ia__heading {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: var(--nj-tracking-tightest);
  }

  .nj-ia__subheading {
    font-size: 20px;
  }

  .nj-ia__grid {
    flex-direction: column;
    gap: 0;
    padding: 0 24px 16px;
    margin-top: 0;
  }

  .nj-ia__col {
    flex: none;
    width: 100%;
    padding: 24px 0;
    gap: 16px;
    box-sizing: border-box;
  }

  .nj-ia__cat-name {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: var(--nj-tracking-tight);
  }

  .nj-ia__list {
    gap: 16px;
    padding: 16px 0;
  }

  .nj-ia__item-title {
    font-size: 18px;
    letter-spacing: var(--nj-tracking-normal);
  }
}

/* ── Hero insights: mobile overrides ── */
@media (max-width: 768px) {
  .nj-hero--insights .nj-hero__inner {
    padding-top: 48px;
  }

  .nj-hero--insights .nj-hero__image {
    max-width: 200px;
  }

  /* Search stacks vertically, button right-aligned */
  .nj-hero__search form {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .nj-hero__search-input {
    width: 100%;
    flex: none;
  }

  .nj-hero__search-btn {
    width: 134px;
  }
}

/* ── Hero standard: mobile overrides ── */
@media (max-width: 768px) {
  .nj-hero--standard .nj-hero__inner {
    padding-top: 48px;
  }

  .nj-hero--standard .nj-hero__image {
    max-width: 200px;
  }
}

/* ==========================================================================
   404 Page — reuses .nj-cta pattern
   ========================================================================== */

.nj-404 {
  padding-top: var(--nj-section-y);
}

.nj-404 .nj-cta__illustration {
  width: min(250px, 22%) !important;
}

/* ==========================================================================
 Proposals
 ========================================================================== */


/* --- Masthead card ------------------------------------------------------- */
.proposal-masthead {
  overflow: hidden; /* keeps children inside the 24px radius */
}
 
/* Top bar: logo left, CTA right */
.proposal-masthead__topbar {
  align-items: center;
  margin-bottom: var(--wp--preset--spacing--50);
}
 
/* CTA — pink pill on desktop (inherits your theme.json button styles),
   plain underlined text link on mobile */
@media (max-width: 781px) {
  .proposal-masthead__cta .wp-block-button__link {
    background: transparent !important;
    color: var(--wp--preset--color--primary) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
 
/* Hero row */
.proposal-masthead__hero {
  gap: var(--wp--preset--spacing--50);
}
 
/* Client logo — sits directly on the teal, no white box.
   Cap its size so large uploads don't dominate the card. */
.proposal-masthead__client-logo {
  margin-bottom: var(--wp--preset--spacing--40);
}
.proposal-masthead__client-logo img {
  max-height: 90px;
  width: auto;
}
 
/* Company name — H2 size from theme.json (64px), pink, never shatters */
.proposal-masthead__company {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  margin-bottom: var(--wp--preset--spacing--30);
}
 
/* Byline — the bound paragraph only outputs the client name; the static
   wrapper text is added here so there is a single text node that cannot
   wrap mid-phrase at the comma. */
.proposal-masthead__byline {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.4;
}
.proposal-masthead__byline::before {
  content: "Prepared for ";
}
.proposal-masthead__byline::after {
  content: ", by Sarah Jee Watson";
}
 
/* Illustration: right on desktop, stacks below on mobile (native column
   behaviour). Nothing needed for the stack; just constrain the image. */
.proposal-masthead__illustration img {
  width: 100%;
  height: auto;
}
 
/* On mobile put the illustration last and full-width (it already stacks;
   this just ensures it spans and has a little breathing room above). */
@media (max-width: 781px) {
  .proposal-masthead__illustration-col {
    margin-top: var(--wp--preset--spacing--40);
  }
}

/* --- Client Logos - mobile ------------------------------------------- */

figure.wp-block-gallery.has-nested-images {
  align-items: center;
  justify-content: center;
}

@media (max-width: 781px) {
  .nj-client-logos {
    margin: 24px!important;
  }
  .nj-client-logos figure.wp-block-image {
    padding: 16px;
    max-width: 160px!important;
  }
}
 
/* --- Investment block wrapper ------------------------------------------- */
/* Let the pricing block breathe at wide width inside the constrained
   proposal content. Wrap the block in a wide-aligned Group in the editor,
   or rely on this if you give the block its own alignment later. */
.proposal-content .nj-investment {
  margin-top: var(--wp--preset--spacing--50);
}
 
/* --- Footer card --------------------------------------------------------- */
.proposal-footer {
  overflow: hidden;
}
.proposal-footer__legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   Accordion block (acf/accordion)
   ═══════════════════════════════════════════════════════════════ */
.nj-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nj-accordion__item {
  background: var(--nj-color-off-white);
  border-radius: 32px;
  overflow: hidden;
}

/* Header row: reset the h3 wrapper so it doesn't inherit page heading scale */
.nj-accordion__heading {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.nj-accordion__heading::before { content: none !important; }

.nj-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--nj-color-primary);
}

.nj-accordion__icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nj-accordion__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.nj-accordion__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.nj-accordion__eyebrow {
  font-family: var(--nj-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
}

.nj-accordion__title {
  font-family: var(--nj-font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--nj-tracking-tight);
  color: var(--nj-color-teal-dark);
}

/* Toggle circle — teal-light with a +/- that morphs to - when open */
.nj-accordion__toggle {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nj-color-teal-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nj-color-primary);
  transition: background var(--nj-transition-base);
}
.nj-accordion__trigger:hover .nj-accordion__toggle {
  background: var(--nj-color-teal-dark);
  color: var(--nj-color-teal-light);
}
.nj-accordion__toggle-icon {
  width: 24px;
  height: 24px;
}
/* vertical stroke hides when open -> becomes a minus */
.nj-accordion__toggle-v {
  transform-origin: center;
  transition: opacity var(--nj-transition-base), transform var(--nj-transition-base);
}
.nj-accordion__trigger[aria-expanded="true"] .nj-accordion__toggle-v {
  opacity: 0;
  transform: scaleY(0);
}

/* Panel — height animated by JS; overflow hidden so content clips during it */
.nj-accordion__panel {
  padding: 0 40px;
  overflow: hidden;
  height: 0;
  transition: height var(--nj-transition-base, 0.3s ease);
}
.nj-accordion__panel[hidden] {
  display: none;
}
/* Reduced-motion: no height animation */
@media (prefers-reduced-motion: reduce) {
  .nj-accordion__panel {
    transition: none;
  }
}
.nj-accordion__content {
  padding-bottom: 32px;
  font-family: var(--nj-font-body);
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: var(--nj-tracking-normal);
  color: var(--nj-color-primary);
}
.nj-accordion__content > * {
  margin-block-start: 0;
  margin-block-end: 1.25rem;
}
.nj-accordion__content > *:last-child {
  margin-block-end: 0;
}
.nj-accordion__content strong {
  font-weight: 700;
}

/* Temp Spectra fix - gallery - client logos */
.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
  margin-top: auto;
}

/* Mobile */
@media (max-width: 768px) {
  .nj-accordion__trigger {
    gap: 16px;
    padding: 24px;
  }
  .nj-accordion__icon,
  .nj-accordion__toggle {
    width: 44px;
    height: 44px;
  }
  .nj-accordion__title {
    font-size: 22px;
  }
  .nj-accordion__eyebrow {
    font-size: 18px;
  }
  .nj-accordion__panel {
    padding: 0 24px;
  }
  .nj-accordion__content {
    font-size: 18px;
    padding-bottom: 24px;
  }
}