/* NineGravity — Mobile + Tablet Optimization Layer
 *
 * Purpose: Centralised responsive overrides for mobile, tablet, and small
 * laptop viewports. Pairs with responsive.css (which handles large-screen
 * amplification ≥ 1440 px) and base.css (which is the desktop baseline).
 *
 * Loaded AFTER all other stylesheets so its rules win without needing
 * !important on every line.
 *
 * Breakpoint system:
 *   ≤ 1280 px   small laptop / large tablet landscape   "lap-sm"
 *   ≤ 1024 px   tablet landscape                        "tab-lg"
 *   ≤ 880  px   tablet portrait                         "tab"
 *   ≤ 640  px   mobile (large phones)                   "mob"
 *   ≤ 420  px   mobile (small phones)                   "mob-sm"
 *
 * Sections in this file:
 *   §1  Global guards            — overflow, container, images, tables
 *   §2  Typography floors        — keep copy readable on narrow viewports
 *   §3  Navigation               — burger / mobile panel polish
 *   §4  Hero variants            — all *-hero blocks
 *   §5  Grids that must stack    — services, dual, case, reviews, footer, …
 *   §6  Forms                    — CF7 + WCEU form
 *   §7  Block-level fixes        — community, work, agencies, audit, etc.
 *   §8  Spacing rhythm           — section padding tuning
 */

/* =====================================================================
   §1 GLOBAL GUARDS — applied at every viewport up to 1280 px
   ===================================================================== */
@media (max-width: 1280px) {
	/* Stop pages scrolling sideways from a stray child overflowing. */
	html, body { overflow-x: hidden; }

	/* Any direct content child should never exceed the viewport width. */
	img, svg, video, iframe, table {
		max-width: 100%;
		height: auto;
	}

	/* Footer partner badges — preserve the explicit 22px height the
	   markup sets via the HTML height attribute. The global "img height:auto"
	   rule above would otherwise let the source image's intrinsic size take
	   over and the badge image would either disappear or render huge. */
	.nga-foot__badge-img img,
	.nga-foot__badge-img svg {
		height: 22px !important;
		width: auto !important;
		max-height: 22px;
		max-width: none !important;
		display: block;
	}
	.nga-foot__badge-img {
		display: inline-flex !important;
		align-items: center;
		flex-shrink: 0;
		min-width: 0;
	}

	/* Long unbroken strings (URLs, hashes, code) wrap instead of forcing
	   horizontal scroll. */
	.ng p, .ng li, .ng dd, .ng a {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Defensive: any block that absolute-positions a decorative orb /
	   blur element shouldn't be allowed to widen the page. */
	.nga-hero, .hero, .wceu-hero,
	[class*="-hero"], [class*="__bg"] {
		overflow: hidden;
	}
}

/* =====================================================================
   §2 TYPOGRAPHY FLOORS
   ===================================================================== */
@media (max-width: 1024px) {
	.ng { font-size: 16px; }
	.ng h1, .ng .nga-h1 { line-height: 1.04; }
	.ng h2, .ng .nga-h2 { line-height: 1.08; }
	.ng h3, .ng .nga-h3 { line-height: 1.18; }

	/* Eyebrows shouldn't track so wide they break onto two lines. */
	.ng .ng-eyebrow { letter-spacing: 0.12em; }
}

@media (max-width: 640px) {
	.ng h1, .ng .nga-h1 { font-size: clamp(36px, 9vw, 52px); }
	.ng h2, .ng .nga-h2 { font-size: clamp(30px, 7.5vw, 42px); }
	.ng h3, .ng .nga-h3 { font-size: clamp(22px, 5.5vw, 28px); }
	.ng p, .ng li { font-size: 16px; line-height: 1.6; }
}

@media (max-width: 420px) {
	.ng h1, .ng .nga-h1 { font-size: clamp(32px, 9.5vw, 42px); }
	.ng h2, .ng .nga-h2 { font-size: clamp(26px, 7.5vw, 34px); }
	.ng .ng-eyebrow { font-size: 11px; }
}

/* =====================================================================
   §3 NAVIGATION
   ===================================================================== */

/* HARD GUARD — applies at ALL viewport widths.
   The mobile menu panel must default to hidden. The burger toggles
   `.is-open` via JS (assets/js/ng.js initMobileNav). Anything else
   is a bug. !important here is intentional belt-and-braces against
   any inherited / cached rule that might leak through. */
.nga-nav__mobile {
	display: none !important;
}
.nga-nav__mobile.is-open {
	display: flex !important;
}

/* Small-laptop range — desktop menu + CTA both visible. Tighten so they
   don't crash into each other on a 13" laptop. */
@media (min-width: 901px) and (max-width: 1100px) {
	.nga-nav__inner { gap: 20px; }
	.nga-nav__menu { gap: 22px; font-size: 15px; }
	.nga-nav__cta .ng-btn {
		padding: 10px 14px !important;
		font-size: 13px !important;
	}
	.nga-nav__cta .ng-btn .price {
		display: none; /* free up button width on small laptops */
	}
	.nga-nav__logo img { height: 20px !important; }
}

/* Tablet & phone — burger only, generous tap targets. */
@media (max-width: 900px) {
	.nga-nav__inner {
		padding-top: 14px;
		padding-bottom: 14px;
		gap: 16px;
	}
	.nga-nav__logo img { height: 20px !important; }

	/* Hide the desktop "Book Your Audit" pill the moment the burger appears.
	   The button has an inline style attribute, so this needs !important to
	   beat that AND the inline style="padding:11px 18px;font-size:14px". */
	.nga-nav__cta { gap: 0; }
	.nga-nav__cta > .ng-btn,
	.nga-nav .nga-nav__cta .ng-btn:not(.nga-nav__mobile-cta) {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
	}

	/* ---------- Burger button: animated 3-bar → X icon ---------- */
	.nga-nav__burger {
		display: flex !important;
		position: relative;
		width: 44px; height: 44px;
		padding: 0;
		border-radius: 10px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0;
		background: transparent;
		border: 1px solid var(--line-2, var(--line));
		transition: background .2s ease, border-color .2s ease;
	}
	.nga-nav__burger:hover { background: var(--bone, #FAF6F0); }
	.nga-nav__burger:active { transform: scale(0.96); }

	.nga-nav__burger-bar {
		position: absolute;
		left: 50%;
		width: 18px;
		height: 1.6px;
		background: var(--ink);
		border-radius: 2px;
		transform: translateX(-50%);
		transition: transform .35s cubic-bezier(.6, .2, .2, 1),
		            opacity .25s ease,
		            top .35s cubic-bezier(.6, .2, .2, 1);
	}
	.nga-nav__burger-bar--top { top: 14px; }
	.nga-nav__burger-bar--mid { top: 21px; }
	.nga-nav__burger-bar--bot { top: 28px; }

	/* Open state — top bar rotates 45°, mid fades, bot rotates -45° (X). */
	.nga-nav__burger[aria-expanded="true"] .nga-nav__burger-bar--top {
		top: 21px;
		transform: translateX(-50%) rotate(45deg);
	}
	.nga-nav__burger[aria-expanded="true"] .nga-nav__burger-bar--mid {
		opacity: 0;
		transform: translateX(-50%) scaleX(0);
	}
	.nga-nav__burger[aria-expanded="true"] .nga-nav__burger-bar--bot {
		top: 21px;
		transform: translateX(-50%) rotate(-45deg);
	}

	/* ---------- Mobile menu panel ---------- */
	.nga-nav__mobile {
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		padding: 18px 18px 28px;
		gap: 0;
	}

	/* CTA at TOP of panel (moved out of header bar into menu area).
	   Matches the canonical .ng-btn design from tokens.css:
	     - border-radius: 2px (NOT pill — site standard)
	     - 1px solid var(--ink) border, ink background, white text
	     - padding 16x22, font-size 15
	     - .price uses a vertical hairline separator on the left
	   On mobile we just stretch it to full width as a tap-friendly target. */
	.nga-nav__mobile-cta.ng-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 10px !important;
		width: 100% !important;
		margin: 4px 0 20px !important;
		padding: 16px 22px !important;
		border-radius: 2px !important;
		border: 1px solid var(--ink) !important;
		background: var(--ink) !important;
		color: #fff !important;
		font-family: inherit;
		font-size: 15px !important;
		font-weight: 500 !important;
		letter-spacing: -0.005em !important;
		text-decoration: none !important;
		transition: background .15s ease, transform .15s ease;
	}
	.nga-nav__mobile-cta.ng-btn:hover {
		background: var(--ink-2) !important;
	}
	.nga-nav__mobile-cta.ng-btn:active {
		transform: scale(0.98);
	}
	/* Price chip — same hairline separator + tabular nums as .ng-btn .price */
	.nga-nav__mobile-cta .price {
		opacity: 0.6;
		font-variant-numeric: tabular-nums;
		padding-left: 10px;
		margin-left: 4px;
		border-left: 1px solid rgba(255, 255, 255, 0.2);
		font-weight: 500;
		font-size: 14px;
	}

	/* ---------- List + items inside the panel ---------- */
	.nga-nav__mobile-list {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.nga-nav__mobile-list > a,
	.nga-nav__mobile-group {
		border-bottom: 1px solid var(--line-soft, var(--line));
	}
	.nga-nav__mobile-list > a:last-child,
	.nga-nav__mobile-group:last-child { border-bottom: 0; }

	.nga-nav__mobile-list > a {
		display: block;
		padding: 16px 4px;
		font-size: 17px;
		color: var(--ink);
	}

	/* ---------- Parent + chevron + children (accordion) ---------- */
	.nga-nav__mobile-group { padding: 0; }
	.nga-nav__mobile-group > .nga-nav__mobile-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 4px;
		font-size: 17px;
		color: var(--ink);
		cursor: pointer;
		list-style: none; /* hide default ▶ marker */
		user-select: none;
		gap: 12px;
	}
	.nga-nav__mobile-group > .nga-nav__mobile-summary::-webkit-details-marker { display: none; }
	.nga-nav__mobile-group > .nga-nav__mobile-summary::marker { display: none; content: ''; }

	.nga-nav__mobile-parent {
		flex: 1;
		font-weight: 500;
	}
	.nga-nav__mobile-chev {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px; height: 32px;
		border-radius: 50%;
		background: var(--bone, #FAF6F0);
		color: var(--ink-2);
		transition: transform .3s cubic-bezier(.6, .2, .2, 1), background .2s ease;
	}
	.nga-nav__mobile-group[open] > .nga-nav__mobile-summary .nga-nav__mobile-chev {
		transform: rotate(180deg);
		background: var(--violet, #835AFF);
		color: #fff;
	}

	.nga-nav__mobile-children {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 4px 0 12px 16px;
		margin-left: 8px;
		border-left: 2px solid var(--line-soft, var(--line));
	}
	.nga-nav__mobile-sub {
		display: block;
		padding: 11px 12px;
		font-size: 15px;
		color: var(--ink-2);
		border-radius: 8px;
	}
	.nga-nav__mobile-sub:hover,
	.nga-nav__mobile-sub:active {
		background: var(--bone, #FAF6F0);
		color: var(--ink);
	}
	.nga-nav__mobile-sub--overview {
		font-style: italic;
		color: var(--violet, #835AFF);
	}
}

@media (max-width: 420px) {
	.nga-nav__inner { padding-left: 18px; padding-right: 18px; gap: 12px; }
	.nga-nav__mobile-list > a,
	.nga-nav__mobile-group > .nga-nav__mobile-summary { font-size: 16px; padding: 14px 4px; }
	.nga-nav__mobile-cta.ng-btn { font-size: 14px !important; padding: 14px 20px !important; }
	.nga-nav__mobile-cta .price { font-size: 13px; }
	.nga-nav__mobile-sub { font-size: 14px; padding: 10px 10px; }
}

/* =====================================================================
   §4 HERO VARIANTS — generic pattern for every "*-hero" block
   ===================================================================== */
@media (max-width: 1024px) {
	[class*="-hero"] .nga-container,
	[class*="-hero"] .nga-container--wide,
	[class*="-hero"] .container {
		padding-left: clamp(20px, 4vw, 40px);
		padding-right: clamp(20px, 4vw, 40px);
	}

	/* All hero foot rows collapse to a single column. */
	.nga-hero__foot,
	.hero__inner,
	[class*="-hero"] [class*="__foot"],
	[class*="-hero"] [class*="__inner"] {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
	.nga-hero__ctas {
		align-items: flex-start !important;
		flex-direction: column;
		gap: 14px;
	}
	.nga-hero__ctas .ng-btn,
	.nga-hero__ctas .ng-btn--lg {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.nga-hero {
		padding: clamp(72px, 14vw, 96px) 0 clamp(56px, 12vw, 80px) !important;
	}
	.nga-hero__h, .hero__h1 {
		font-size: clamp(40px, 11vw, 60px) !important;
		line-height: 0.98;
		max-width: none !important;
		padding-right: 0 !important;
	}
	.nga-hero__sub, .hero__sub {
		font-size: 16px;
		line-height: 1.5;
	}
	.nga-hero__meta {
		gap: 14px;
		font-size: 11px;
	}
	.nga-hero__meta-item { letter-spacing: 0.06em; }
}

/* =====================================================================
   §5 GRIDS THAT MUST STACK
   ===================================================================== */
@media (max-width: 1024px) {
	/* Services / dual-path / reviews 2-up at tablet */
	.nga-services__grid,
	.nga-dual,
	.nga-reviews__grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px;
	}

	/* Case-study metrics — keep 2 columns at tablet */
	.nga-case__metrics,
	.nga-case2__metrics {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px;
	}
}

@media (max-width: 720px) {
	.nga-services__grid,
	.nga-dual,
	.nga-reviews__grid,
	.nga-case__metrics,
	.nga-case2__metrics {
		grid-template-columns: 1fr !important;
	}
	.nga-services__card,
	.nga-dual__card,
	.nga-review {
		min-height: 0 !important;
	}
}

/* Footer — collapse the wide column grid in stages */
@media (max-width: 1024px) {
	.nga-foot__top {
		grid-template-columns: 1.4fr 1fr 1fr !important;
		gap: 32px !important;
	}
}
@media (max-width: 720px) {
	.nga-foot__top {
		grid-template-columns: 1fr 1fr !important;
		gap: 28px !important;
	}
	.nga-foot__brand,
	.nga-foot__col--contact { grid-column: 1 / -1 !important; }
}
@media (max-width: 480px) {
	.nga-foot__top {
		grid-template-columns: 1fr !important;
	}
	.nga-foot__bottom {
		flex-direction: column !important;
		gap: 12px;
		align-items: flex-start !important;
	}
}

/* =====================================================================
   §6 FORMS — CF7 + WCEU welcome-kit form
   ===================================================================== */
@media (max-width: 720px) {
	/* Default CF7 inputs */
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 input[type="url"],
	.wpcf7 textarea,
	.wpcf7 select {
		width: 100%;
		font-size: 16px; /* prevents iOS zoom-on-focus */
		padding: 14px 16px;
		border-radius: 10px;
	}
	.wpcf7 textarea { min-height: 140px; }
	.wpcf7 .wpcf7-submit,
	.wpcf7 button[type="submit"] {
		width: 100%;
		padding: 16px 24px;
		font-size: 15px;
	}

	/* WCEU tier radio + giftbox grids → single column on phone */
	.tier-radios { grid-template-columns: 1fr !important; gap: 12px !important; }
	.giftboxes   { grid-template-columns: 1fr !important; gap: 10px !important; }
	.tier-radio label,
	.giftbox label { padding: 14px 16px; }
}

/* =====================================================================
   §7 BLOCK-LEVEL FIXES
   ===================================================================== */

/* ----- Community Upcoming (journey timeline) ----- */
@media (max-width: 880px) {
	.comm-upcoming__head {
		text-align: left;
		align-items: flex-start;
		margin-left: 0;
	}
	.comm-upcoming__sub { max-width: none; }
}

/* ----- Work / case-study cards ----- */
@media (max-width: 1024px) {
	.work-grid,
	.work__grid,
	.case-list { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ----- For Agencies (far-* blocks) ----- */
@media (max-width: 1024px) {
	[class^="far-"] [class*="__grid"],
	[class^="far-"] [class*="__layout"],
	[class^="far-"] [class*="__inner"] {
		grid-template-columns: 1fr !important;
		gap: clamp(24px, 4vw, 40px) !important;
	}
}

/* ----- Audit ----- */
@media (max-width: 1024px) {
	.nga-audit {
		grid-template-columns: 1fr !important;
		gap: 48px !important;
	}
	.nga-audit__visual { order: -1; }
}

/* ----- WCEU page blocks (tiers, qualifier, sides, fit) ----- */
@media (max-width: 1024px) {
	.tiers__grid     { grid-template-columns: 1fr !important; gap: 16px !important; }
	.qualifier__inner,
	.sides__inner,
	.fit__inner,
	.process__inner,
	.protect__inner {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.statbar {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px !important;
		padding: 24px !important;
	}
}
@media (max-width: 480px) {
	.statbar { grid-template-columns: 1fr !important; }
}

/* ----- Logos / partner strip — wrap on tablet ----- */
@media (max-width: 1024px) {
	.nga-trust__logos,
	.nga-partner__row,
	.nga-autom__row {
		flex-wrap: wrap !important;
		gap: 24px 32px !important;
		justify-content: center;
	}
}

/* ----- Trust / metric strips -----
 * base.css gives this a flex row of items separated by left-borders. The
 * existing 900-px override switches it to a 2-col grid with selective
 * borders. Below 720 px the borders & spacing become noisy, and below
 * 480 px two columns is too cramped. Cascade gracefully:
 *   ≤ 720 px → 2-col, no borders, smaller values
 *   ≤ 480 px → 1-col, fully stacked
 */
@media (max-width: 720px) {
	.nga-trust__row {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 18px 16px !important;
		row-gap: 18px !important;
		padding: 22px 0 !important;
		flex-wrap: initial !important;
	}
	.nga-trust__item,
	.nga-trust__item:nth-child(2),
	.nga-trust__item:nth-child(3),
	.nga-trust__item:nth-child(4) {
		border-left: 0 !important;
		padding-left: 0 !important;
		gap: 10px;
		min-width: 0;
	}
	.nga-trust__item--automattic {
		grid-column: 1 / -1 !important;
		padding-top: 14px !important;
		border-top: 1px solid var(--line) !important;
		border-left: 0 !important;
	}
	.nga-trust__v,
	.nga-trust__big { font-size: 18px !important; }
	.nga-trust__l { font-size: 10.5px; }
	.nga-trust__item--automattic .nga-trust__l { max-width: none; }
}

@media (max-width: 480px) {
	.nga-trust__row {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
		padding: 18px 0 !important;
	}
	.nga-trust__item {
		justify-content: flex-start;
		padding: 0 !important;
	}
	.nga-trust__item + .nga-trust__item {
		padding-top: 14px !important;
		border-top: 1px solid var(--line) !important;
	}
	.nga-trust__v,
	.nga-trust__big { font-size: 17px !important; }
}

/* ----- Pricing / Audit price separation ----- */
@media (max-width: 480px) {
	.ng-btn .price,
	.ng-btn--lg .price {
		display: block;
		margin-top: 4px;
		font-size: 12px;
	}
}

/* =====================================================================
   §8 SPACING RHYTHM — keep vertical breathing tight on phone
   ===================================================================== */
@media (max-width: 1024px) {
	:root { --nga-sec-y: clamp(64px, 8vw, 96px); --nga-sec-y-sm: clamp(48px, 6vw, 72px); --nga-pad: clamp(24px, 4vw, 40px); }
}
@media (max-width: 640px) {
	:root { --nga-sec-y: clamp(56px, 11vw, 80px); --nga-sec-y-sm: clamp(40px, 8vw, 64px); --nga-pad: 20px; }
}
@media (max-width: 420px) {
	:root { --nga-pad: 18px; }
}

/* Generic section paddings — many sections inherit from these custom props
   but some hard-code padding. Apply a soft floor + ceiling. */
@media (max-width: 1024px) {
	section,
	.nga-sec,
	.section { padding-top: var(--nga-sec-y, 80px); padding-bottom: var(--nga-sec-y, 80px); }
}

/* =====================================================================
   §9 STANDARD MOBILE TAP-TARGET COMPLIANCE (44×44 px)
   Applies WCAG 2.2 AAA / Apple HIG minimum target sizes for any
   interactive element on touch viewports.
   ===================================================================== */
@media (max-width: 900px) {
	/* Buttons — every variant gets a proper tap height. */
	.ng-btn,
	.ng-btn--lg,
	.btn,
	button:not(.nga-nav__burger),
	[role="button"] {
		min-height: 44px;
	}

	/* The "ng-link" treatment (text + underline) is a smaller tap target
	   visually — give it real padding so fingers don't miss. */
	.ng-link,
	.nga-hero__alt {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
		padding: 6px 0;
	}

	/* Anchor links inside body copy stay inline, but list-style anchors
	   in cards get more vertical room. */
	.nga-services__card a,
	.nga-dual__card a,
	.nga-foot__col a {
		padding: 4px 0;
		display: inline-flex;
	}

	/* Disable hover-only effects on touch — replace with quicker tap feedback. */
	.ng-btn:hover,
	.btn:hover {
		transform: none;
	}
	.ng-btn:active,
	.btn:active {
		transform: scale(0.98);
		transition: transform .1s ease;
	}
}

/* Prevent iOS auto-zoom on any focused input (16 px floor). */
@media (max-width: 900px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* =====================================================================
   §9b TRUST STRIP — block wrapper alignment fix
   The block renders inside `.wp-block-acf-ninegravity-trust-strip` which
   ACF gives a default inline-block / max-width treatment that misaligns
   the inner `.nga-trust__row`. Force it to fill the section width.
   ===================================================================== */
.wp-block-acf-ninegravity-trust-strip {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}
.wp-block-acf-ninegravity-trust-strip > .nga-trust {
	width: 100%;
	margin: 0;
}
@media (max-width: 720px) {
	.wp-block-acf-ninegravity-trust-strip { padding: 0 !important; }
	.wp-block-acf-ninegravity-trust-strip .nga-trust__row {
		padding-left: var(--nga-pad, 22px) !important;
		padding-right: var(--nga-pad, 22px) !important;
	}
}

/* =====================================================================
   §9c CASE STUDY SLIDER — keep vertical pin slider, tune for mobile
   The desktop slider uses a tall pin → sticky rail → translated track.
   On mobile we keep the same behaviour, just compact the inner card so
   it fits a 420–560 px rail height comfortably.
   ===================================================================== */
@media (max-width: 860px) {
	.nga-case2__card,
	.nga-case2__slide {
		padding: 22px 22px 0 !important;
		border-radius: 12px;
	}
	.nga-case2__top { flex-wrap: wrap; gap: 12px; }
	.nga-case2__body {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 36px;
		gap: 14px;
		padding-bottom: 22px;
	}
	.nga-case2__title {
		font-size: clamp(22px, 6vw, 30px) !important;
		line-height: 1.1;
	}
	.nga-case2__meta {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px 18px !important;
		padding: 16px 0 18px !important;
		width: 100%;
	}
	.nga-case2__nav { display: flex !important; }
}

@media (max-width: 520px) {
	.nga-case2__card,
	.nga-case2__slide {
		padding: 18px 18px 0 !important;
	}
	.nga-case2__meta {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px 14px !important;
	}
	.nga-case2__title { font-size: clamp(20px, 6.5vw, 26px) !important; }
	.nga-case2__client-mark { width: 36px !important; height: 36px !important; }
	.nga-case2__client-name { font-size: 15px !important; }
}

/* =====================================================================
   §9d AUDIT PRODUCT — make item icons consistent in size
   Each .nga-audit__cell shows a number + icon row. The icon SVG comes
   from ng_icon() and renders at varying intrinsic sizes, so without a
   fixed icon-frame the row alignment looks uneven. Force a 22×22 frame
   on every audit item icon and constrain the inner SVG.
   ===================================================================== */
.nga-audit__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: inherit;
}
.nga-audit__icon svg,
.nga-audit__icon img {
	width: 22px !important;
	height: 22px !important;
	display: block;
}
/* The cell-top row aligns number left, icon right — make both vertically
   centered with consistent line-height so the icon never visually drifts. */
.nga-audit__cell-top {
	min-height: 24px;
	align-items: center !important;
}
.nga-audit__cell-top .nga-audit__n {
	display: inline-flex;
	align-items: center;
	height: 22px;
	line-height: 1;
}

/* =====================================================================
   §9e GLOBAL CTA-ROW MOBILE ALIGNMENT
   Many blocks render a primary + secondary button pair in a flex row
   (e.g. .sub-final__row, .nga-hero__ctas, .hero__cta, .pfs__cta-row).
   On mobile they should:
     • Stack vertically
     • Both become full-width pills/buttons
     • Sit flush-aligned (no inline gap pushing one ahead)
   This applies a single consistent rule across every CTA pair the theme
   uses, keyed off common selector patterns.
   ===================================================================== */
@media (max-width: 720px) {
	.sub-final__row,
	.hero__cta,
	.nga-hero__ctas,
	.pfs__cta-row,
	[class*="__cta-row"],
	[class*="__ctas"]:not(.nga-hero__ctas-keep) {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 12px !important;
	}
	.sub-final__row > .ng-btn,
	.sub-final__row > .ng-link,
	.hero__cta > .btn,
	.hero__cta > a,
	.nga-hero__ctas > .ng-btn,
	.nga-hero__ctas > .ng-link,
	.pfs__cta-row > a,
	[class*="__cta-row"] > .ng-btn,
	[class*="__ctas"] > .ng-btn {
		width: 100% !important;
		justify-content: center !important;
		text-align: center;
	}
	/* Secondary text-link CTAs (.ng-link, .nga-hero__alt) — keep them as a
	   centered text link, not full-width filled, so the visual hierarchy
	   between primary button and secondary link remains clear. */
	.sub-final__row > .ng-link,
	.nga-hero__ctas > .ng-link,
	.nga-hero__ctas > .nga-hero__alt {
		width: auto !important;
		align-self: center !important;
		padding: 8px 4px !important;
	}
}

/* Specifically tighten the pfs-final / sub-final block since it's a dark
   full-bleed CTA section that shows up across multiple pages. */
@media (max-width: 720px) {
	.sub-final {
		padding-left: var(--nga-pad, 22px);
		padding-right: var(--nga-pad, 22px);
	}
	.sub-final__h { font-size: clamp(34px, 8.5vw, 48px) !important; }
	.sub-final__l { font-size: 15.5px !important; }
	.sub-final__bullets {
		gap: 14px 24px !important;
		font-size: 10.5px !important;
		margin-top: 32px !important;
	}
	.sub-final__row .ng-btn,
	.sub-final__row .ng-btn--xl,
	.sub-final__row .ng-btn--signal {
		padding: 16px 22px !important;
		font-size: 15px !important;
	}
}

/* =====================================================================
   §10 LAYOUT SAFETY NET
   Catches anything else that might overflow or stack badly.
   ===================================================================== */
@media (max-width: 1024px) {
	/* Any flex row that would force horizontal overflow → wrap. */
	.nga-container > [style*="display:flex"],
	.nga-container--wide > [style*="display:flex"] { flex-wrap: wrap; }

	/* Fixed pixel widths inside content blocks scale down. */
	.nga-sec [style*="width:"] {
		max-width: 100% !important;
	}
}

/* =====================================================================
   Reduced-motion safety — applied across all viewports
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.15s !important;
		scroll-behavior: auto !important;
	}
}