/*********************************************************
	Theme Name:  Astra Child
	Template:    astra
	Description: Custom styling and layout primitives for cagliarinoleggio.
	             Design system adapted from the lucasrey.com child theme;
	             all branding, brand colours and hardcoded URLs stripped.
	Version:     1.2.4
	Author:      Cagliarinoleggio
	Text Domain: astra-child-cagliarinoleggio
**********************************************************/

/*
================================================================================
  CAGLIARINOLEGGIO.IT — STYLE.CSS PROJECT GUIDE (for humans + future AI agents)
================================================================================

SITE
  Production: https://cagliarinoleggio.it
  Business:   equipment rental in Cagliari / Sardinia (bikes, events, tools, sport)
  WordPress:  Astra parent + this child theme
  PHP logic:  functions.php + includes/*.php (see functions.php header for map)

CONTENT MODEL (important)
  Most pages are NOT PHP templates. Editors paste HTML from:
    cagliarinoleggio extracted_pages/*-custom-layout.html
  into WordPress page content. The child theme supplies:
    - cn-* CSS classes (this file)
    - shortcodes registered in PHP ([cn_noleggi_directory], etc.)
    - filters on the_content (related cards, LCP, link fixes)
  Hub pages with custom layouts (paste-ready):
    - homepage-custom-layout.html          → front page
    - elenco-prodotti-custom-layout.html   → /elenco-prodotti-noleggio/
    - contatti-custom-layout.html          → /contatti/
  Product/guide pages: individual HTML files in extracted_pages/ (no stage wrapper
  required on every page — hub pages use .cn-section-full as the stage sheet).

ARCHITECTURE — CASCADE LAYERS (low → high priority)
  @layer reset      — normalize, focus rings, reduced-motion base
  @layer tokens      — :root design tokens (--cn-*)
  @layer primitives  — .cn-section-full shell, grids, prose, columns
  @layer components  — cards, buttons, FAQ, CTA bands, tags, forms
  @layer adapter     — WordPress/Astra bridges (.entry-content overrides)

  Unlayered blocks at FILE END intentionally beat Astra inline CSS (!important).
  theme.json mirrors palette for block editor; live cn-* pages use style.css.

================================================================================
  VISUAL HIERARCHY (v1.0.63 — tonal separation, not shadow stacking)
================================================================================

  DO NOT remove .cn-section-full — it is the intentional “stage sheet”.
  The “too many layers” problem was fixed via colour steps + spacing, not removal.

  Four-level stack:
    1. Canvas  — body/.site background     --cn-color-bg-section  #ece8e1
    2. Stage   — .cn-section-full wrapper  --cn-color-bg-stage    #f6f4f0
    3. Card    — .cn-card, .cn-product-card, etc.  --cn-color-bg-card  #ffffff
    4. Subcard — .cn-subcard inside grids   --cn-color-bg-subcard #faf9f7

  Elevation philosophy (2026 refresh):
    - Hairline borders: --cn-color-border-card = rgba(0,0,0,0.05)
    - Whisper shadows:  --cn-shadow-rest = 0 2px 8px rgba(0,0,0,0.03)
    - Subcards: NO box-shadow (tonal step only)
    - Stage: minimal --cn-shadow-stage (contrast from colour, not heavy drop shadow)
    - Hover lifts reduced (~2px, not 3–6px skeuomorphic stack)

  Spacing tightened ~25% (v1.0.63):
    - Stage padding: --cn-padding-stage-* (max ~32px desktop, not 60px)
    - Card padding:  --cn-padding-card clamp(18px … 28px)
    - Subcard pad:   clamp(14px … 18px)
    - Section gaps:  --cn-gap-card clamp(16px … 24px)
    - .cn-mt-40 / .cn-mb-40 = 28px (class name kept for HTML compatibility)

  Dark mode: REMOVED in v1.0.62 — prefers-color-scheme:dark block deleted.
  Site is light-only (warm Sardinian aesthetic). Do not re-add OS-driven dark
  tokens without an explicit user toggle.

================================================================================
  KEY CSS COMPONENTS (search these class names to extend)
================================================================================

  LAYOUT / SHELL
    .cn-section-full     Stage sheet wrapper (keep on hub pages)
    .cn-section-centered  Prose-width centred block (Zone A on mobile ≤921px)
    .cn-prose             65ch reading measure
    .cn-subgrid           Responsive card grid (container: cn-stage)
    .cn-split              Two-column asymmetric layouts

  CARDS & SURFACES
    .cn-card               Primary section card (white + border + light shadow)
    .cn-subcard            Nested item (faf9f7 background, flat)
    .cn-card-featured      Emphasised category (home/catalog)
    .cn-product-card       Catalog product tile
    .cn-category-card      Category intro card
    .cn-contact-method     Contatti channel card
    .cn-panel-white        Inner white panel
    .cn-panel-muted        Low-contrast rest panel
    .cn-cta-band           Gradient conversion band (catalog/contact)

  CRO / CONVERSION (v1.0.61+)
    .cn-reassurance-strip  Trust line under CTAs (15 min / free quote / no obligation)
    .cn-category-jump-nav  Anchor pills to #strumenti #attrezzatura #sport
    .cn-advisory-panel     “Non sai cosa scegliere?” panel
    .cn-subcard-actions    Vedi dettagli + Chiedi disponibilità button pair
    .cn-channel-compare    WhatsApp vs phone vs email comparison (contatti)
    .cn-best-for           “Ideale per:” category hint line
    .cn-mobile-cta-bar      Scroll-triggered WhatsApp bar (mobile, hub pages only)
    .cn-trust-strip        Homepage proof points (4 items)
    .cn-card-footer-cta    Distinct action zone at card bottom

  MOBILE ALIGNMENT (≤921px — block at end of file)
    Zone A (centered): #hero, .cn-promise-band, .cn-section-centered intros
    Zone B (left): cards, subcards, footer CTAs, action/advisory/cta bands
    Both zones: full-width stacked buttons; reassurance strip = one row per item

  TYPOGRAPHY / CHROME
    .cn-hero-heading       Page h1 hero
    .cn-hero-rotator       Cycling accent word (Palantir-style; data-cn-rotator)
    .cn-reveal              Scroll/load entrance (auto via cn-interactions.js)
    .cn-kicker             Eyebrow label above headings
    .cn-section-heading    Centred h2
    .cn-section-heading-left  Left-aligned h2
    .cn-desc               Lead paragraph under headings
    .cn-tag / .cn-tag-alert / .cn-tag-success  Badges (eventi, sport, più richiesto)

  BUTTONS
    .cn-button-primary     WhatsApp / main CTA (accent fill)
    .cn-button-secondary   Outline secondary
    .cn-button-ghost       Text-style tertiary
    .cn-button-small       Compact variant
    :active states on .cn-button-primary for instant tap feedback

  FAQ
    .cn-faq                Wrapper; uses native <details>/<summary>
    .cn-faq-answer         Answer body (used by PHP FAQ schema extractor)

  NAV / ACCESSIBILITY
    .cn-breadcrumbs        Visual breadcrumb trail (PHP renders; styles here)
    focus-visible rings via --cn-shadow-focus-ring
    prefers-reduced-motion: disables transforms/animations site-wide

================================================================================
  FILE SECTION MAP (approximate line regions — grep "LAYER:" or "=====")
================================================================================

  @layer reset           ~line 28
  @layer tokens          ~line 162   (:root --cn-* tokens)
  @layer primitives      ~line 366   (.cn-section-full, grids)
  @layer components       ~line 522   (cards, buttons, hero, forms)
  @layer adapter          ~line 1443  (Astra .entry-content bridges)

  Unlayered (high specificity, wins over parent theme):
    Cognitive pacing utilities     ~3357
    Subgrid / subcard rules        ~3526
    Entry-content typography       ~3972
    Shell width alignment          ~4491
    MATERIAL PATINA + CALM CANVAS  ~4792  (body canvas, header/footer surfaces)
    Card surface overrides         ~4900  (splits card vs subcard elevation)
    Cross-browser compat           ~5062
    Breadcrumbs                    ~5552
    Reduced motion final override  ~5601
    MOBILE SURFACE REFINEMENT      ~5640  (≤921px: flat cards, tight stage pad)

================================================================================
  VERSION HISTORY (style-relevant milestones)
================================================================================

  v1.0.12+  Cascade layers introduced; Source Sans 3; cn-* design system
  v1.0.40+  Stage sheet (.cn-section-full), warm canvas patina, material surfaces
  v1.0.55+  Compliance footer/cookie styles; cn-legal-* classes
  v1.0.61   CRO components: reassurance strip, jump nav, advisory panel, mobile CTA
  v1.0.62   Removed prefers-color-scheme:dark auto dark mode
  v1.0.63   Tonal 4-layer hierarchy; shadow reduction; spacing tighten; subcard tint
  v1.0.64   PROJECT GUIDE comment blocks (this file + functions.php) for AI continuity
  v1.0.65   Footer legal strip: shell padding, stacked identity, scroll-top clearance
  v1.0.66   Footer legal centered + more padding; scroll-top moved above Joinchat (right)
  v1.0.67   Footer legal vertical rhythm: larger bottom padding, link row spacing
  v1.0.68   Footer wrap owns padding + canvas margin below; copyright bar breathing room
  v1.0.69   Scroll-top bottom-left restored; Joinchat immediate load (no consent delay)
  v1.0.70   Footer legal typography unified to copyright size (13px); Gestisci cookie match
  v1.0.71   Footer vertical rhythm: uniform 12px line gaps, section gap before legal links
  v1.0.72   Footer spacing fix: no double gaps; sibling margins; tighter copyright→name
  v1.0.73   Footer flex row-gap model; neutralize Astra below-footer vertical padding
  v1.0.74   Unified .cn-site-footer replaces split Astra + cn-footer-legal blocks
  v1.0.75   Flat footer rows (no identity wrapper); uniform row-gap; lighter link weight
  v1.0.76   Footer padding-split rhythm (6+6px per row) for even visual gaps
  v1.1.0    Palantir-style hero rotator + scroll reveal headings (cn-interactions.js)
  v1.1.1    Catalog rotator, staggered card reveals, rotator pause on hover/focus
  v1.1.2    P0 product hero rotators; expansion rotator support; category-card reveals
  v1.1.14   style.css filemtime cache-bust; production parity validation for CSS
  v1.1.20   Visual rebuild: fixed --cn-font-family to actually load the self-hosted
            Source Sans 3 (site-wide; token previously still said Inter — the brand
            font was being paid for but never applied). Added a coastal gradient
            wash behind the homepage hero (was 100% bare text), a highlighter wash
            on the hero rotator word, a sea/sand/accent accent bar on featured
            cards, and gradient warmth on kickers + category-nav/chip hover. All
            additive (new selectors/properties only) — no existing rule touched.
  v1.1.21   Code-review pass over v1.1.16-1.1.20 (multi-agent audit of the day's
            CSS work). Fixed: desktop nav colour/current-page highlight was
            silently inert (a same-file rule this session didn't know about
            already won that specificity fight) — edited that rule directly
            instead of layering another one on top; .cn-button-primary's hover
            state was invisibly masked by the new rest-state gradient painting
            over it; .cn-quote-flow__option lost its forced-colors (Windows
            High Contrast) focus outline on the whole row, not just the
            checkbox, when focus styling moved to box-shadow-only; .cn-crosslink-
            mesh's h3/p sizing and link-hover-underline only worked by
            coincidence (unlayered ties resolve by specificity, not by being
            unlayered) — added !important / switched to the correct longhand.
            Also: corrected two comments that were factually wrong (#hero is
            not homepage-only; WhatsApp-first channel-compare confirmed on
            all 6 languages, not 4), extracted a gradient literal duplicated
            in two components to one token, bumped functions.php/
            functions.deploy.php @version to match per this header's own
            "bump both" rule (no logic changed there).
  v1.2.0    "Bolder coastal & vivid" direction (explicit user request — v1.1.x's
            token-correctness/whisper-restraint approach read as "looks the
            same as before" despite real fixes, because it deliberately never
            changed colour intensity/typography scale/component boldness).
            New second accent (--cn-color-terracotta) + dark --cn-color-deep-sea
            tone, both contrast-checked against white/dark text before use
            (see BOLD COASTAL PALETTE token comment for the actual ratios).
            #hero rebuilt from a whisper-level wash into a full sunset
            gradient banner (deep-sea -> accent -> terracotta) with all text
            recoloured for dark-background contrast; --cn-radius-pill 10px ->
            999px (true capsule — was deliberately NOT one before, superseded
            by this direction); buttons bigger/bolder (padding, weight,
            deepened primary shadow); kicker changed from pale accent-wash
            chip to solid accent/terracotta gradient with white text;
            featured-card accent bar and .cn-cta-band deepened into the same
            palette; .cn-trust-strip is the first deliberate colour-block
            "rhythm break" against the surrounding neutral sections (deep-sea
            background, white text) rather than another pale wash; hero/h1/h2
            type-scale ceilings raised for more visual presence. Layout
            structure/section order NOT touched — homepage content lives in
            the WP database as pasted HTML, not a git-tracked template file,
            so reordering sections is a different, higher-risk operation than
            anything in this changelog; flagged separately, not done here.
            (Same-day hotfix folded into this version rather than its own
            bump: two of the rules above were landing in @layer components,
            losing to several pre-existing unlayered "typography
            consistency" rules regardless of specificity — hero heading/
            subheading rendered in the wrong colour, button weight/radius
            silently reverted. Caught via getComputedStyle immediately
            post-deploy, fixed unlayered at file end same session.)
  v1.2.1    "Premium, silver to platinum" — layered onto v1.2.0's coastal
            palette as the treatment for premium/featured moments, not a
            replacement for it. New --cn-color-platinum(-light/-dark) +
            --cn-gradient-platinum (multi-stop brushed-metal sheen) tokens.
            .cn-card-featured gets a metallic platinum frame (new ::after
            pseudo-element, purely additive — same technique as its
            existing accent bar, can't lose a cascade fight regardless of
            which competing background/border rule wins). Card/button/
            image elevation shadows deepened and softened sitewide (bigger
            blur+spread) for a less-flat, more expensive feel — did NOT
            touch the stage-sheet shadow or the focus ring, both
            deliberately out of scope (layout chrome / accessibility, not
            a "look" decision). .cn-button-primary gets a diagonal glossy
            sheen (second background-image layer, no overflow/pseudo-
            element needed). --cn-color-border-card (used across every
            card-family component) shifted from a flat black-based
            hairline to a platinum-tinted one — @media (prefers-contrast:
            high)'s own border-card override is untouched on purpose.
            Applied the previous hotfix's lesson proactively this round:
            every new/changed declaration was checked for existing
            duplicate-value tokens and competing selectors BEFORE writing
            it, not after deploying.

================================================================================
  CONVENTIONS FOR FUTURE EDITS
================================================================================

  1. Prefer token changes in @layer tokens over one-off hex in components.
  2. New cn-* classes: add in @layer components; Astra overrides go unlayered
     at file end only when parent inline CSS wins otherwise.
  3. Do not stack white-on-white without a tonal step — use canvas/stage/card/subcard.
  4. Mobile (≤921px): cards are intentionally flat (no shadow) — see MOBILE block.
  5. Backup files style-backup-*.css are archives — never edit; edit style.css only.
  6. Bump Version in this header AND functions.php @version when shipping changes.

================================================================================
  DEFERRED / NOT IN CSS YET (see functions.php header)
================================================================================

  - Skeleton loaders (.cn-skeleton)
  - Scroll-driven entrance animations (cn-reveal — see cn-interactions.js)
  - Active nav current-page highlight (partially Astra menu classes)
  - Per-page stage wrapper variants (hub vs product — needs PHP body class)
  - Container queries beyond cn-stage @container

Property ordering convention (within each rule):
  Layout/Positioning → Box Model → Typography → Visuals → Effects/Misc.
*/

@layer reset, tokens, primitives, components, adapter;

/* =====================================================================
	LAYER: RESET
===================================================================== */

@layer reset {

	html {
		overflow-x: hidden;
		scroll-behavior: smooth;
		scroll-padding-block-start: max(7.5rem, var(--cn-header-offset, 5.5rem));
		scrollbar-gutter: stable;
		scrollbar-width: thin;
		scrollbar-color: rgba(var(--cn-color-text-muted-rgb), 0.4) var(--cn-color-bg-section);
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	body {
		margin: 0;
		padding: 0;
		width: 100%;
		font-family: var(--cn-font-family);
		font-size: var(--cn-font-size-body);
		font-weight: 400;
		line-height: var(--cn-line-height-body);
		color: var(--cn-color-text-main);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
		accent-color: var(--cn-color-accent);
		overflow-wrap: break-word;
		hyphens: manual;
		-webkit-tap-highlight-color: transparent;
	}

	@supports (text-wrap: pretty) {
		body {
			text-wrap: pretty;
		}
	}

	.site {
		overflow-x: hidden;
	}

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

	img, video, canvas, svg,
	.wp-block-image img, figure img, .entry-content img {
		display: block;
		max-width: 100% !important;
		max-inline-size: 100%;
		height: auto !important;
		block-size: auto;
	}

	h1, h2, h3, h4, h5, h6 {
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: none;
	}

	@supports (text-wrap: balance) {
		h1, h2, h3, h4, h5, h6 {
			text-wrap: balance;
		}
	}

	@media (max-width: 480px) {
		h1, h2, h3, h4, h5, h6 {
			overflow-wrap: anywhere;
		}
	}

	::selection {
		background-color: var(--cn-color-accent);
		color: #ffffff;
	}

	a:focus-visible,
	button:focus-visible,
	.wp-element-button:focus-visible,
	input:focus-visible,
	textarea:focus-visible,
	select:focus-visible,
	a.cn-tag:focus-visible,
	a.wp-block-tag:focus-visible,
	a.pill:focus-visible,
	.cn-tooltip:focus-visible,
	.cn-button:focus-visible,
	.cn-faq summary:focus-visible,
	.cn-lab-choice:focus-visible,
	.cn-utility-choice:focus-visible,
	.cn-quote-flow__option:has(input:focus-visible),
	.cn-card-actionable:focus-within {
		outline: none !important;
		box-shadow: var(--cn-shadow-focus-ring) !important;
		border-radius: var(--cn-radius-small);
		transition: box-shadow var(--cn-duration-moderate) var(--cn-easing-mechanical) !important;
	}

	@media (forced-colors: active) {
		a:focus-visible,
		button:focus-visible,
		.wp-element-button:focus-visible,
		input:focus-visible,
		textarea:focus-visible,
		select:focus-visible,
		a.cn-tag:focus-visible,
		a.wp-block-tag:focus-visible,
		a.pill:focus-visible,
		.cn-tooltip:focus-visible,
		.cn-button:focus-visible,
		.cn-faq summary:focus-visible,
		/* .cn-quote-flow__option's own input:focus-visible already gets an
		   outline from the input:focus-visible rule above it (a real,
		   visible 18px radio/checkbox, not visually hidden) — this adds
		   one for the whole option row too. Without it, forced-colors mode
		   (box-shadow doesn't render there) would show a focus ring on
		   just the small checkbox instead of the whole clickable row, a
		   regression from before cn-quote-flow.css moved to box-shadow-
		   only focus styling. */
		.cn-quote-flow__option:has(input:focus-visible),
		.cn-card-actionable:focus-within {
			outline: 2px solid CanvasText !important;
			outline-offset: 2px;
			box-shadow: none !important;
		}
	}

	::-webkit-scrollbar {
		width: 12px;
		background-color: var(--cn-color-bg-section);
	}

	::-webkit-scrollbar-thumb {
		background-color: rgba(var(--cn-color-text-muted-rgb), 0.3);
		border-radius: 10px;
		border: 3px solid var(--cn-color-bg-section);
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: var(--cn-color-accent);
	}
}

/* =====================================================================
	LAYER: TOKENS
===================================================================== */

@layer tokens {

	:root {
		color-scheme: light;

		/* COLORS
		   Accent follows Astra Global Colors (#046bd2 on production).
		   Fallbacks align with the calm Mediterranean palette below. */
		/* TONAL HIERARCHY (2026) — canvas → stage → card → subcard
		   Separation via colour steps + hairline borders, not stacked shadows. */
		--cn-color-text-main: #2e3438;
		--cn-color-text: #2e3438;
		--cn-color-text-heading: #1c2836;
		--cn-color-text-muted: #55606d;
		--cn-color-text-subtle: #46525e;
		--cn-color-bg-section: #ece8e1;
		--cn-color-bg-stage: #f6f4f0;
		--cn-color-bg-stage-end: #f4f2ee;
		--cn-color-bg-card: #ffffff;
		--cn-color-bg-subcard: #faf9f7;
		--cn-color-bg-elevated: #ffffff;
		--cn-color-bg-header: rgba(246, 244, 240, 0.97);
		--cn-color-bg-light: #f3f1ed;
		--cn-color-accent: var(--ast-global-color-0, #046bd2);
		--cn-color-accent-hover: var(--ast-global-color-1, #045cb4);
		--cn-color-accent-rgb: 4, 107, 210;
		--cn-color-accent-wash: #e9f0f6;
		--cn-color-sea-wash: #e3ecf4;
		--cn-color-sand-wash: #f0ece6;
		/* Shared coastal hover/accent gradient — was a literal repeated in
		   two components (.cn-kicker, .cn-category-nav a:hover/.cn-chip-link:hover);
		   one token per this file's own convention #1 ("prefer token
		   changes over one-off hex/values in components"). */
		--cn-gradient-accent-wash: linear-gradient(120deg, var(--cn-color-accent-wash) 0%, var(--cn-color-sea-wash) 100%);
		--cn-color-border-subtle: #e0dcd4;
		--cn-color-border-warm: rgba(54, 48, 40, 0.1);
		--cn-color-patina-edge: rgba(4, 107, 210, 0.18);
		--cn-color-text-muted-rgb: 85, 96, 109;

		/* BOLD COASTAL PALETTE (2026-08-13 direction: "bolder coastal & vivid" —
		   deeper sea, warm terracotta, sunset gradient moments, real colour
		   blocking instead of whisper-level tints). Second accent alongside
		   the existing blue, plus a dark "deep sea" tone for full-bleed
		   sections. Every foreground/background pairing actually used below
		   is contrast-checked (WCAG relative-luminance formula, not eyeballed —
		   this session has no working screenshot tool):
		     white on terracotta       4.72:1  (AA normal text)
		     white on terracotta-hover 5.94:1
		     white on deep-sea         11.44:1
		     text-heading on sand-solid 11.35:1
		     text-heading on terracotta-wash 12.58:1
		     accent/terracotta on terracotta-wash  4.38:1 / 3.98:1 (AA large-text/UI only —
		       don't use for small body copy on that background, headings/labels/icons only)
		   text-heading on deep-sea FAILS (1.3:1) — deep-sea backgrounds must
		   use white/light text, never the normal dark text tokens. */
		--cn-color-terracotta: #c1502b;
		--cn-color-terracotta-hover: #a8451f;
		--cn-color-terracotta-rgb: 193, 80, 43;
		--cn-color-terracotta-wash: #fbe8dd;
		--cn-color-sand-solid: #f2ddc9;
		--cn-color-deep-sea: #0a3d5c;
		--cn-color-deep-sea-hover: #093452;
		--cn-color-deep-sea-rgb: 10, 61, 92;
		--cn-gradient-sunset: linear-gradient(135deg, var(--cn-color-deep-sea) 0%, var(--cn-color-accent) 52%, var(--cn-color-terracotta) 115%);

		/* PLATINUM METALLIC (2026-08-15, "premium, silver to platinum" —
		   layered onto the coastal palette above as the treatment for
		   premium/featured moments specifically, not a replacement for it.
		   Multi-stop sheen gradient simulates brushed metal (light -> mid
		   -> shadow -> light again) rather than a flat grey. Dark text
		   (--cn-color-text-heading, #1c2836) on --cn-color-platinum is
		   ~14:1 contrast — safe for any text use on the flat tone; the
		   gradient/dark variants here are for borders/backgrounds/glows,
		   not text-bearing surfaces, so not individually contrast-checked
		   the way the coastal palette's text-on-colour pairings were. */
		--cn-color-platinum-light: #f4f5f6;
		--cn-color-platinum: #d9dade;
		--cn-color-platinum-dark: #9a9da5;
		--cn-color-platinum-rgb: 217, 218, 222;
		--cn-gradient-platinum: linear-gradient(
			135deg,
			var(--cn-color-platinum-light) 0%,
			var(--cn-color-platinum) 22%,
			var(--cn-color-platinum-dark) 45%,
			var(--cn-color-platinum) 68%,
			var(--cn-color-platinum-light) 100%
		);

		/* OKLCH parallels (progressive enhancement; hex remains canonical fallback) */
		--cn-color-accent-oklch: oklch(52% 0.14 250);
		--cn-color-accent-hover-oklch: oklch(46% 0.14 250);
		--cn-color-text-oklch: oklch(28% 0.01 250);
		--cn-color-heading-oklch: oklch(22% 0.02 250);
		--cn-color-canvas-oklch: oklch(92% 0.012 85);
		--cn-color-stage-oklch: oklch(98.5% 0.006 85);
		--cn-color-surface-oklch: oklch(100% 0 0);

		--cn-header-offset: 5.5rem;

		/* SPACING SCALE (rem-based, 16px root) */
		--cn-space-1: 0.25rem;
		--cn-space-2: 0.5rem;
		--cn-space-3: 0.75rem;
		--cn-space-4: 1rem;
		--cn-space-5: 1.5rem;
		--cn-space-6: 2rem;
		--cn-space-7: 2.5rem;
		--cn-space-8: 3rem;
		--cn-touch-target-min: 48px;

		--cn-color-alert: #b42318;
		--cn-color-alert-bg: #fef3f2;

		--cn-color-link: var(--cn-color-accent);
		--cn-color-link-hover: var(--cn-color-accent-hover);

		--cn-color-code: #db2777;

		--cn-color-focus-ring: rgba(var(--cn-color-accent-rgb), 0.4);
		--cn-color-focus-glow: rgba(var(--cn-color-accent-rgb), 0.12);

		--cn-prose-max-width: 65ch;
		--cn-padding-inline-mobile: 24px;
		--cn-padding-inline-shell: clamp(24px, 4.5vw, 40px);
		--cn-padding-section-block-start: clamp(40px, 6vw, 56px);
		--cn-padding-section-block-end: clamp(56px, 7vw, 80px);

		/* --- Callout Tokens --- */
		--cn-callout-edge-color: var(--cn-color-accent);
		--cn-callout-bg-color: var(--cn-color-bg-card);
		--cn-callout-wash-color: var(--cn-color-accent-wash);
		--cn-callout-shadow-idle: rgba(15, 23, 42, 0.04);
		--cn-callout-shadow-hover: rgba(15, 23, 42, 0.12);
		--cn-callout-border-hover: rgba(var(--cn-color-accent-rgb), 0.25);

		/* SPACING & SIZING
		   --cn-max-width-site: shared shell for header + page (≈ Bootstrap xl).
		   --cn-max-width-card: grids/cards use the full shell; prose stays 65ch. */
		--cn-max-width-site: 1200px;
		--cn-max-width-card: var(--cn-max-width-site);
		--cn-padding-section: clamp(28px, 5vw, 44px);
		--cn-padding-card: clamp(18px, 3vw, 28px);
		--cn-padding-small: 14px;
		--cn-padding-portfolio: clamp(14px, 2.5vw, 20px);
		--cn-padding-stage-inline: clamp(16px, 3vw, 28px);
		--cn-padding-stage-block-start: clamp(24px, 3.5vw, 32px);
		--cn-padding-stage-block-end: clamp(28px, 4vw, 40px);

		/* BORDER RADIUS
		   2026-08-13: --cn-radius-pill changed from 10px to a true capsule
		   (999px) as part of the "bolder coastal & vivid" direction — was
		   deliberately NOT a real pill before ("restrained, not bubbly
		   Memphis pills"), superseded by explicit direction toward more
		   visual energy. 5 consumers checked, all small button/chip/tag
		   elements where a true capsule is a safe, standard pattern. Stage/
		   card/medium/small/tag/image radii unchanged — still restrained. */
		--cn-radius-stage: 16px;
		--cn-radius-large: 14px;
		--cn-radius-medium: 10px;
		--cn-radius-small: 6px;
		--cn-radius-pill: 999px;
		--cn-radius-tag: 8px;
		--cn-radius-image: 11px;

		/* ELEVATION
		   2026-08-15 "premium" direction: card/component shadows deepened
		   and softened (bigger blur+spread, still fully desaturated black
		   so they stay neutral against every background colour added this
		   week) for a more expensive, less flat feel — think large soft
		   product-shot shadows, not tight whisper ones. Deliberately did
		   NOT touch --cn-shadow-stage/-mobile (the page-wrapper "stage
		   sheet" shadow) or --cn-shadow-focus-ring (accessibility-critical,
		   not a "look" decision) — this is about card/button/image
		   elevation specifically. */
		--cn-shadow-stage: 0 1px 2px rgba(0, 0, 0, 0.03);
		--cn-shadow-stage-mobile: 0 1px 2px rgba(0, 0, 0, 0.025);
		--cn-shadow-elevated-rest: 0 4px 16px rgba(0, 0, 0, 0.06);
		--cn-shadow-elevated-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
		--cn-shadow-rest: 0 4px 16px rgba(0, 0, 0, 0.06);
		--cn-shadow-active: 0 10px 26px rgba(0, 0, 0, 0.1);
		--cn-shadow-hover-card: 0 12px 32px rgba(0, 0, 0, 0.12);
		--cn-shadow-hover-button: 0 6px 16px rgba(var(--cn-color-accent-rgb), 0.22);
		--cn-shadow-hover-image: 0 10px 24px rgba(0, 0, 0, 0.1);
		--cn-shadow-image: 0 4px 12px rgba(0, 0, 0, 0.07);
		--cn-shadow-inset-paper: inset 0 1px 0 rgba(255, 255, 255, 0.55);
		--cn-shadow-focus-ring: 0 0 0 2px #f6f4f0, 0 0 0 4px var(--cn-color-focus-ring), 0 0 12px var(--cn-color-focus-glow);

		/* Was a flat black-based hairline. Platinum-tinted for the
		   2026-08-15 premium pass — cool metallic sliver instead of plain
		   grey, same alpha-restraint as before (still a hairline, not a
		   heavy border). --cn-color-border-card in @media (prefers-
		   contrast: high) further down is untouched on purpose — high-
		   contrast mode needs a strong solid border regardless of this
		   aesthetic preference, not a subtler metallic tint. */
		--cn-color-border-card: rgba(var(--cn-color-platinum-rgb), 0.32);
		--cn-color-border-hover: rgba(var(--cn-color-accent-rgb), 0.22);
		--cn-shadow-hover-panel: 0 3px 10px rgba(0, 0, 0, 0.04);

		/* FLUID GAPS */
		--cn-gap-large: clamp(24px, 4vw, 40px);
		--cn-gap-medium: clamp(16px, 2.5vw, 24px);
		--cn-gap-small: clamp(10px, 1.5vw, 14px);
		--cn-gap-button: var(--cn-space-3);
		--cn-gap-card: clamp(16px, 2.5vw, 24px);

		/* LIST GUTTERS — dot visible, compact, shared site-wide
		   [border][edge-gap][dot][gap][text…] */
		--cn-list-edge-gap: 4px;
		--cn-list-marker-size: 6px;
		--cn-list-marker-size-accent: 7px;
		--cn-list-marker-gap: 6px;
		--cn-list-marker-inset: var(--cn-list-edge-gap);
		--cn-list-item-pad-y: 6px;
		--cn-list-item-pad-end: 10px;
		--cn-list-text-inset: calc(
			var(--cn-list-edge-gap) + var(--cn-list-marker-size) + var(--cn-list-marker-gap)
		);
		--cn-list-text-inset-accent: calc(
			var(--cn-list-edge-gap) + var(--cn-list-marker-size-accent) + var(--cn-list-marker-gap)
		);

		/* FONT STACK — self-hosted Source Sans 3 (see assets/fonts/source-sans-3.css),
		   loaded on every page but previously never referenced here — the whole
		   site was silently rendering in the generic system-UI fallback instead
		   of the brand typeface. System stack stays as the swap-in fallback. */
		--cn-font-family: "Source Sans 3", "Source Sans 3 Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

		/* FLUID TYPOGRAPHY — px floors survive Astra html{font-size:91.2%} on mobile */
		--cn-font-size-body: clamp(17px, 0.95rem + 0.35vw, 18px);
		--cn-font-size-h1: clamp(32px, 1.3rem + 2.2vw, 54px);
		--cn-font-size-h2: clamp(24px, 1.1rem + 0.9vw, 32px);
		--cn-font-size-h3: clamp(18px, 1.05rem + 0.35vw, 20px);
		--cn-font-size-hero: clamp(38px, 1.4rem + 4vw, 68px);
		--cn-font-size-lead: clamp(17px, 1rem + 0.35vw, 20px);
		--cn-font-size-ui-min: 16px;
		--cn-font-size-small: 13px;
		--cn-font-size-tag: var(--cn-font-size-ui-min);
		--cn-font-size-caption: 13px;
		--cn-font-size-label: clamp(16px, 0.95rem + 0.2vw, 18px);

		--cn-line-height-heading: 1.25;
		--cn-line-height-body: 1.5;
		--cn-line-height-small: 1.45;
		--cn-line-height-ui: 1.4;

		--cn-letter-spacing-tight: -0.02em;
		--cn-letter-spacing-wide: 0.04em;

		--cn-margin-bottom-heading: 16px;
		--cn-margin-bottom-para: 1.25em;
		--cn-margin-bottom-tag: 24px;

		/* MOTION */
		--cn-duration-press: 0.12s;
		--cn-duration-fast: 0.18s;
		--cn-duration-base: 0.24s;
		--cn-duration-moderate: 0.36s;
		--cn-duration-slow: 0.48s;
		--cn-duration-slower: 0.62s;
		--cn-easing-standard: cubic-bezier(0.33, 0, 0.2, 1);
		--cn-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
		--cn-easing-mechanical: cubic-bezier(0.25, 0.46, 0.45, 0.94);
		--cn-easing-settle: cubic-bezier(0.22, 0.68, 0.42, 1);

		--cn-transition-base: var(--cn-duration-base) var(--cn-easing-standard);
		--cn-transition-pop: var(--cn-duration-slow) var(--cn-easing-mechanical);
	}

	@media (prefers-contrast: high) {
		:root {
			--cn-color-text-main: #000;
			--cn-color-text: #000;
			--cn-color-text-heading: #000;
			--cn-color-bg-card: #fff;
			--cn-color-code: #000;
			--cn-color-border-card: #767676;
		}
	}
}

/* =====================================================================
	LAYER: PRIMITIVES
===================================================================== */
@layer primitives {

	/* TYPOGRAPHY PRIMITIVES */
	.wp-block-heading {
		color: var(--cn-color-text-heading);
		font-weight: 700;
		margin-bottom: var(--cn-margin-bottom-heading);
	}

	h1.wp-block-heading:not(.cn-hero-heading) {
		font-size: var(--cn-font-size-h1);
		line-height: var(--cn-line-height-heading);
		letter-spacing: var(--cn-letter-spacing-tight);
	}

	h2.wp-block-heading {
		font-size: var(--cn-font-size-h2);
	}

	h3.wp-block-heading {
		font-size: var(--cn-font-size-h3);
		text-transform: none;
		letter-spacing: normal;
		margin-bottom: 20px;
	}

	p {
		color: var(--cn-color-text-main);
		line-height: var(--cn-line-height-body);
		margin-bottom: var(--cn-margin-bottom-para);
		font-size: var(--cn-font-size-body);
	}

	.has-small-font-size {
		font-size: var(--cn-font-size-small);
	}

	.cn-label {
		text-transform: uppercase;
		letter-spacing: var(--cn-letter-spacing-wide);
		font-weight: 600;
		font-size: var(--cn-font-size-label);
		color: var(--cn-color-text-main);
		margin-bottom: 20px;
	}

	.cn-desc {
		font-size: var(--cn-font-size-lead);
		line-height: var(--cn-line-height-body);
		color: var(--cn-color-text-subtle);
		margin-bottom: var(--cn-margin-bottom-para);
	}

	.cn-section-centered .cn-desc,
	.cn-section-centered > p.cn-desc,
	.cn-prose .cn-desc {
		max-width: var(--cn-prose-max-width);
	}

	.entry-content a {
		color: var(--cn-color-accent);
		text-underline-offset: 0.15em;
		text-decoration-thickness: 1px;
		text-decoration-color: rgba(var(--cn-color-accent-rgb), 0.3);
		text-underline-position: under;
		text-decoration-skip-ink: auto;
	}

	.entry-content a:hover {
		text-decoration-thickness: 2px;
		text-decoration-color: var(--cn-color-accent);
	}

	/* LAYOUT PRIMITIVES */
	.cn-section-full {
		display: flex;
		flex-direction: column;
		gap: var(--cn-gap-card);
		box-sizing: border-box;
		width: 100%;
		max-width: var(--cn-max-width-site);
		margin-inline: auto;
		padding-block: var(--cn-padding-stage-block-start) var(--cn-padding-stage-block-end);
		padding-inline: var(--cn-padding-stage-inline);
		font-family: var(--cn-font-family);
	}

	.cn-section-full > * {
		width: 100%;
		max-width: var(--cn-max-width-card);
		margin-inline: auto;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.cn-section-centered {
		text-align: center;
		max-width: var(--cn-prose-max-width);
		margin-inline: auto;
		width: 100%;
	}

	/* Long-form reading measure (65ch desktop; full width + 24px pad on mobile). */
	.cn-prose {
		max-width: var(--cn-prose-max-width);
		margin-inline: auto;
		width: 100%;
	}

	/* GRID & COLUMN PRIMITIVES */
	.wp-block-column {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-column > .cn-card,
	.wp-block-column > .cn-card-white,
	.wp-block-column > .cn-project-card {
		flex-grow: 1;
		width: 100%;
	}
	@media (min-width: 922px) {
		.wp-block-columns {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: stretch;
			gap: var(--cn-gap-card);
		}

		.wp-block-column {
			min-width: 0;
		}

		.wp-block-columns > .wp-block-column:not([class*="cn-col-"]) {
			flex: 1 1 0;
		}

		.cn-col-30 { flex: 0 0 30%; }
		.cn-col-40 { flex: 0 0 40%; }
		.cn-col-50 { flex: 0 0 50%; }
		.cn-col-60 { flex: 0 0 60%; }
		.cn-col-70 { flex: 0 0 70%; }

		.cn-explore-portfolio .wp-block-columns > .wp-block-column {
			flex: 1 1 0;
			display: flex;
			flex-direction: column;
		}
	}

	.wp-block-columns.cn-columns-medium {
		gap: var(--cn-gap-medium) !important;
		row-gap: var(--cn-gap-medium) !important;
		column-gap: var(--cn-gap-medium) !important;
	}

	/* SPACERS */
	.wp-block-separator.has-alpha-channel-opacity.is-style-wide {
		margin-bottom: 60px;
	}

}

/* =====================================================================
	LAYER: COMPONENTS
===================================================================== */

@layer components {

	/* GLOSSARY & DEFINITION LISTS */
	.cn-glossary {
		margin: 0;
		padding: 0;
	}

	.cn-glossary dt {
		font-weight: 700;
		color: var(--cn-color-text-heading);
		font-size: var(--cn-font-size-body);
		margin-top: 24px;
		border-bottom: 1px solid var(--cn-color-border-subtle);
		padding-bottom: 4px;
		display: inline-block;
	}

	.cn-glossary dd {
		margin-left: 0;
		margin-top: 8px;
		margin-bottom: 16px;
		line-height: var(--cn-line-height-body);
		color: var(--cn-color-text-main);
		font-size: var(--cn-font-size-body);
	}

	/* FIGURE CAPTIONS */
	figure {
		max-width: 100%;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	figure figcaption {
		width: 100%;
		max-width: var(--cn-prose-max-width);
		margin: 12px auto 0;
		padding: 8px 14px;
		writing-mode: horizontal-tb;
		font-size: var(--cn-font-size-caption);
		line-height: var(--cn-line-height-small);
		color: var(--cn-color-text-muted);
		text-align: center;
		background: transparent;
		border-radius: 8px;
		word-break: break-word;
		transition:
			opacity var(--cn-duration-slow) var(--cn-easing-mechanical),
			color var(--cn-duration-slow) var(--cn-easing-smooth);
	}

	@media (hover: hover) and (pointer: fine) {
		figure:hover figcaption {
			color: var(--cn-color-text-heading);
		}
	}

	@media (max-width: 480px) {
		figure figcaption {
			padding: 8px 12px;
			margin-top: 10px;
		}
	}

	figure.caption-left figcaption { text-align: left; max-width: 640px; margin-left: 0; }
	figure.caption-right figcaption { text-align: right; max-width: 640px; margin-right: 0; }

	/* CARD IMAGES */
	.cn-card img,
	.cn-project-card img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--cn-radius-image);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: transform var(--cn-duration-slow) var(--cn-easing-mechanical);
	}

	/* OPT-IN STABLE MEDIA SLOTS
	   Add .cn-media-slot to figure elements only where fixed-ratio
	   cropping is intentional. This avoids breaking editorial images
	   or figures with captions. */
	.cn-project-card figure.cn-media-slot,
	.cn-product-card figure.cn-media-slot,
	.cn-category-card figure.cn-media-slot {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: var(--cn-radius-image);
	}

	.cn-project-card figure.cn-media-slot img,
	.cn-product-card figure.cn-media-slot img,
	.cn-category-card figure.cn-media-slot img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-project-card:hover img,
		.cn-card-white:hover img {
			transform: scale(1.01);
		}
	}

	/* BUTTON VARIANTS */
	.is-primary {
		background-color: var(--cn-color-accent);
		color: #ffffff;
		border: 2px solid var(--cn-color-accent);
	}

	.is-outline {
		background: transparent;
		color: var(--cn-color-text-heading);
		border: 2px solid var(--cn-color-border-subtle);
	}

	@media (hover: hover) and (pointer: fine) {
		.is-primary:hover {
			background-color: var(--cn-color-accent-hover);
			box-shadow: var(--cn-shadow-hover-button);
		}
		.is-outline:hover {
			border-color: var(--cn-color-accent);
			background-color: var(--cn-color-bg-light);
			color: var(--cn-color-accent);
		}
	}

	/* UI COMPONENTS (Main Cards) */
	.cn-card,
	.cn-card-white,
	.cn-project-card {
		position: relative;
		border-radius: var(--cn-radius-large);
		padding: var(--cn-padding-card);
		background-color: var(--cn-color-bg-card);
		box-shadow: var(--cn-shadow-rest);
		border: 1px solid var(--cn-color-border-card);
		contain: layout;
		backface-visibility: hidden;
		transition:
			transform var(--cn-duration-slow) var(--cn-easing-mechanical),
			box-shadow var(--cn-duration-slow) var(--cn-easing-standard),
			border-color var(--cn-duration-slow) var(--cn-easing-standard);
	}

	.cn-project-card {
		display: flex;
		flex-direction: column;
	}

	.cn-card-white {
		background-color: var(--cn-color-bg-card);
		border: 1px solid var(--cn-color-border-card);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		width: 100%;
	}

	.cn-card-white > div:first-child {
		margin-bottom: 20px;
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-card-white:hover,
		.cn-project-card:hover {
			transform: translateY(-2px);
			box-shadow: var(--cn-shadow-hover-card);
			border-color: var(--cn-color-border-hover);
		}
	}

	.cn-card-white[data-active="true"],
	.cn-project-card[data-active="true"] {
		transform: none;
		box-shadow: var(--cn-shadow-elevated-hover), var(--cn-shadow-inset-paper);
		z-index: 2;
	}

	/* PORTFOLIO & PROJECT/CARD META */
	.cn-project-card h3 {
		font-size: var(--cn-font-size-h3);
		margin-bottom: 10px;
	}

	.cn-project-meta {
		text-transform: uppercase;
		letter-spacing: var(--cn-letter-spacing-wide);
		font-size: var(--cn-font-size-caption);
		line-height: 1.5;
		color: var(--cn-color-text-muted);
		margin-bottom: 20px;
	}

	/* IMAGES */
	.cn-img-rounded {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: var(--cn-radius-medium);
		box-shadow: var(--cn-shadow-image);
		transition:
			transform var(--cn-duration-slow) var(--cn-easing-mechanical),
			box-shadow var(--cn-duration-slow) var(--cn-easing-standard);
	}

	/* Fixed-height editorial crop for split-layout hero images. */
	.cn-img-cover {
		width: 100%;
		height: 220px;
		object-fit: cover;
	}

	.cn-img-rounded,
	.cn-logo-item img {
		user-select: none;
		-webkit-user-select: none;
		-webkit-user-drag: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-img-rounded:hover {
			transform: translateY(-2px);
			box-shadow: var(--cn-shadow-hover-image);
		}
	}

	.cn-caption {
		font-size: var(--cn-font-size-caption);
		line-height: var(--cn-line-height-small);
		text-align: center;
		margin-top: 15px;
		color: var(--cn-color-text-muted);
	}

	/* TAGS & PILLS */
	.cn-tag,
	.cn-tag-group span,
	.pill,
	.tag-pill,
	.cn-pill-small {
		display: inline-block;
		background-color: var(--cn-color-bg-light);
		padding: 8px 14px;
		border-radius: var(--cn-radius-tag);
		font-size: var(--cn-font-size-tag);
		color: var(--cn-color-text-main);
		border: 1px solid var(--cn-color-border-subtle);
		text-decoration: none;
		font-weight: 500;
		line-height: var(--cn-line-height-ui);
		letter-spacing: normal;
		margin: 4px 6px 4px 0;
		transition:
			transform var(--cn-duration-base) var(--cn-easing-mechanical),
			background-color var(--cn-duration-base) var(--cn-easing-standard),
			border-color var(--cn-duration-base) var(--cn-easing-standard),
			box-shadow var(--cn-duration-base) var(--cn-easing-standard),
			color var(--cn-duration-base) var(--cn-easing-standard);
	}

	.cn-tag-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		margin-bottom: var(--cn-margin-bottom-tag);
	}

	/* Flex gap handles spacing; legacy pill margins skew centering */
	.cn-tag-group .cn-tag,
	.cn-tag-group > span {
		margin: 0;
	}

	@media (hover: hover) and (pointer: fine) {
		a.cn-tag:hover,
		a.pill:hover,
		a.tag-pill:hover {
			background-color: var(--cn-color-accent-wash);
			border-color: var(--cn-color-accent);
			transform: translateY(-2px);
			color: var(--cn-color-accent);
			box-shadow: 0 4px 10px rgba(var(--cn-color-accent-rgb), 0.12);
		}
	}

	a.cn-tag:active,
	a.pill:active,
	a.tag-pill:active {
		transform: translateY(0) scale(0.96);
	}

	/* LISTS */
	.cn-list-group {
		display: flex;
		flex-direction: column;
		gap: var(--cn-gap-small);
	}

	ul.cn-list-group,
	ol.cn-list-group {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.cn-list-item {
		position: relative;
		min-width: 0;
		max-width: 100%;
		overflow: visible;
		overflow-wrap: break-word;
		word-wrap: break-word;
		list-style-type: none;
		background-color: transparent;
		padding:
			var(--cn-list-item-pad-y)
			var(--cn-list-item-pad-end)
			var(--cn-list-item-pad-y)
			var(--cn-list-text-inset);
		font-size: var(--cn-font-size-body);
		line-height: var(--cn-line-height-body);
		color: var(--cn-color-text-main);
		border-left: 2px solid var(--cn-color-border-subtle);
		margin: 0;
		transition:
			border-color var(--cn-duration-base) var(--cn-easing-standard),
			background-color var(--cn-duration-base) var(--cn-easing-standard);
	}

	li.cn-list-item {
		list-style: none;
	}
	li.cn-list-item::marker { content: ""; }

.cn-list-item::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 1;
		left: var(--cn-list-marker-inset);
		top: calc(var(--cn-list-item-pad-y) + 0.65em);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		width: var(--cn-list-marker-size);
		height: var(--cn-list-marker-size);
		border-radius: 50%;
		background-color: var(--cn-color-text-muted);
		opacity: 0.85;
		transition:
			background-color var(--cn-duration-base) var(--cn-easing-smooth),
			opacity var(--cn-duration-base) var(--cn-easing-smooth),
			transform var(--cn-duration-base) var(--cn-easing-mechanical);
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-list-item:hover {
			border-left-color: var(--cn-color-accent);
			background-color: var(--cn-color-accent-wash);
		}
		.cn-list-item:hover::before {
			background-color: var(--cn-color-accent);
			opacity: 1;
			transform: translateY(-50%) scale(1.4);
		}
	}

	/* Directory / hub links: body size, no left stripe */
	.cn-list-group--links .cn-list-item {
		border-left: none;
		padding-top: 4px;
		padding-bottom: 4px;
		background-color: transparent;
	}

	.cn-list-group--links .cn-list-item::before {
		background-color: var(--cn-color-accent);
		opacity: 0.55;
	}

	.cn-list-group--links .cn-list-item a {
		font-weight: 500;
		text-decoration: none;
		color: var(--cn-color-accent);
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-list-group--links .cn-list-item:hover {
			background-color: var(--cn-color-accent-wash);
		}
		.cn-list-group--links .cn-list-item a:hover {
			color: var(--cn-color-accent-hover);
			text-decoration: underline;
		}
	}

	.cn-index-list {
		margin: 0;
		padding-left: 0;
		list-style: none;
		line-height: 2;
		font-size: var(--cn-font-size-body);
	}

	.cn-index-list li {
		margin-bottom: 8px;
		list-style: none;
	}
	.cn-index-list li::marker { content: ""; }

	.cn-index-list a {
		display: inline-block;
		text-decoration: none;
		color: var(--cn-color-text-heading);
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		transition:
			transform var(--cn-duration-base) var(--cn-easing-mechanical),
			color var(--cn-duration-base) var(--cn-easing-standard),
			border-color var(--cn-duration-base) var(--cn-easing-standard);
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-index-list a:hover {
			color: var(--cn-color-accent);
			border-color: var(--cn-color-accent);
			transform: translateY(-1px);
		}
	}

	.cn-index-list a:active {
		transform: scale(0.98);
	}

	.cn-analytic {
		max-width: var(--cn-prose-max-width);
		margin: 0 0 32px 0;
		font-size: var(--cn-font-size-body);
		line-height: var(--cn-line-height-body);
		color: var(--cn-color-text-main);
	}

	details.cn-archive {
		background: var(--cn-color-bg-light);
		border: 1px solid var(--cn-color-border-subtle);
		border-radius: var(--cn-radius-medium);
		padding: 24px;
		transition: background-color var(--cn-duration-base) var(--cn-easing-standard);
	}

	details.cn-archive summary {
		cursor: pointer;
		font-weight: 700;
		font-size: var(--cn-font-size-h3);
		color: var(--cn-color-text-heading);
		outline: none;
		user-select: none;
	}

	details.cn-archive summary:focus-visible {
		box-shadow: var(--cn-shadow-focus-ring);
		border-radius: 4px;
	}

	.cn-glossary dt,
	h2[id],
	h3[id] {
		scroll-margin-top: 140px;
	}

	/* BUTTON LAYOUT UTILITIES */
	.cn-button-group-center { justify-content: center; }

	/* BASE PANEL PRIMITIVE */
	.cn-panel-white {
		position: relative;
		padding: clamp(20px, 4vw, 26px) clamp(20px, 5vw, 28px);
		background-color: var(--cn-callout-bg-color);
		border: 1px solid var(--cn-color-border-card);
		border-radius: var(--cn-radius-medium, 8px);
		margin: clamp(20px, 4vw, 32px) 0;
		box-shadow: 0 2px 8px var(--cn-callout-shadow-idle);
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
			box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
			border-color 0.3s ease;
		overflow: visible;
		-webkit-overflow-scrolling: touch;
	}

	.cn-panel-white > *:last-child {
		margin-bottom: 0 !important;
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-panel-white:not(.cn-panel-accent-edge):hover {
			box-shadow: var(--cn-shadow-hover-panel);
			border-color: var(--cn-color-border-hover);
		}
	}

	/* PARTNER / AFFILIATION LOGOS */
	.cn-affiliations-card,
	.cn-affiliations-wrapper {
		padding: clamp(20px, 4vw, 40px) 30px;
		background: #ffffff;
		border-radius: var(--cn-radius-large);
		box-shadow: var(--cn-shadow-rest);
		text-align: center;
		margin: 30px auto 0;
		border: 1px solid var(--cn-color-border-card);
	}

	.cn-affiliations-wrapper > p:first-child {
		font-size: var(--cn-font-size-caption);
		text-transform: uppercase;
		letter-spacing: var(--cn-letter-spacing-wide);
		font-weight: 600;
		color: var(--cn-color-text-muted);
		margin-bottom: 30px;
	}

	.cn-logo-grid {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 60px;
		flex-wrap: wrap;
		padding: 10px 0;
	}

	.cn-affiliations-wrapper .cn-logo-grid {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 30px;
	}

	.cn-logo-item { line-height: 0; }

	.cn-logo-item img {
		max-height: 80px;
		height: auto;
		width: auto;
		display: block;
		object-fit: contain;
		filter: grayscale(100%) opacity(0.5);
		border-radius: 0;
		box-shadow: none;
		transition:
			filter var(--cn-duration-slower) var(--cn-easing-mechanical),
			opacity var(--cn-duration-slower) var(--cn-easing-mechanical),
			transform var(--cn-duration-slower) var(--cn-easing-mechanical);
	}

	.cn-affiliations-wrapper .cn-logo-item img { max-height: 50px; }

	@media (hover: hover) and (pointer: fine) {
		.cn-logo-item:hover img {
			filter: grayscale(0%) opacity(1);
			transform: scale(1.08);
		}
	}

	@media (max-width: 921px) {
		.cn-logo-grid { gap: 50px; }
		.cn-logo-item img { max-height: 70px; }
		.cn-affiliations-wrapper .cn-logo-item img { max-height: 45px; }
	}

	@media (max-width: 540px) {
		.cn-logo-grid:not(.cn-affiliations-wrapper .cn-logo-grid) {
			flex-direction: column;
			gap: 40px;
		}
		.cn-logo-item img { max-height: 65px; }
	}

	/* ICON / AMENITIES GRID */
	.cn-tools-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 30px;
		padding: 10px 0;
	}

	.cn-tools-grid .cn-logo-item img,
	.cn-tools-grid .cn-logo-item svg,
	.cn-tools-grid .cn-logo-item .cn-tool-icon {
		max-height: 36px;
		height: 36px;
		width: auto;
		min-width: 36px;
		object-fit: contain;
		display: block;
		border-radius: 0;
		box-shadow: none;
		filter: grayscale(100%) opacity(0.5);
		transition:
			filter var(--cn-duration-slow) var(--cn-easing-mechanical),
			opacity var(--cn-duration-slow) var(--cn-easing-mechanical),
			transform var(--cn-duration-slow) var(--cn-easing-mechanical);
	}

	@media (max-width: 600px) {
		.cn-tools-grid { gap: 20px; }
		.cn-tools-grid .cn-logo-item img,
		.cn-tools-grid .cn-logo-item svg,
		.cn-tools-grid .cn-logo-item .cn-tool-icon {
			max-height: 28px;
			height: 28px;
			min-width: 28px;
		}
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-tools-grid .cn-logo-item:hover img,
		.cn-tools-grid .cn-logo-item:hover svg,
		.cn-tools-grid .cn-logo-item:hover .cn-tool-icon {
			filter: grayscale(0%) opacity(1);
			transform: scale(1.12);
		}
	}

	/* SECTION ARCHITECTURE */
	.cn-section-heading {
		margin-top: clamp(60px, 8vw, 100px);
		margin-bottom: clamp(30px, 4vw, 50px);
		font-size: var(--cn-font-size-h2);
		font-weight: 700;
		line-height: var(--cn-line-height-heading);
		letter-spacing: var(--cn-letter-spacing-tight);
		color: var(--cn-color-text-heading);
		text-align: center;
	}

	.cn-explore-portfolio .wp-block-column > .cn-project-card {
		flex: 1;
	}

	.cn-project-card .cn-tag-group { margin-bottom: 24px; }
	.cn-project-card .cn-list-group { margin-top: 24px; }

	.cn-back-to-top {
		font-size: var(--cn-font-size-small);
		margin-top: 24px;
		display: inline-block;
		color: var(--cn-color-text-muted);
		text-decoration: none;
		transition:
			color var(--cn-duration-moderate) var(--cn-easing-standard),
			transform var(--cn-duration-base) var(--cn-easing-mechanical);
	}

	@media (hover: hover) and (pointer: fine) {
		.cn-back-to-top:hover {
			color: var(--cn-color-accent);
			transform: translateY(-1px);
		}
	}

	.cn-mb-40 { margin-bottom: 28px; }
	.cn-mt-40 { margin-top: 28px; }
	.cn-mb-24 { margin-bottom: 24px; }
	.cn-mt-0 { margin-top: 0 !important; }
	.cn-mb-0 { margin-bottom: 0 !important; }
	.cn-m-0 { margin: 0 !important; }
	.cn-break-all { word-break: break-all; }

	.cn-tag-container-wide {
		max-width: var(--cn-max-width-site);
		margin-left: auto;
		margin-right: auto;
	}

	/* HERO SECTION */
	.cn-hero-heading {
		font-size: var(--cn-font-size-hero);
		font-weight: 700;
		letter-spacing: var(--cn-letter-spacing-tight);
		line-height: var(--cn-line-height-heading);
		margin-bottom: 20px;
	}
	.cn-hero-subheading {
		font-size: var(--cn-font-size-ui-min);
		font-weight: 600;
		line-height: var(--cn-line-height-ui);
		letter-spacing: var(--cn-letter-spacing-wide);
		text-transform: uppercase;
		color: var(--cn-color-accent);
		margin-bottom: clamp(16px, 3vw, 24px);
	}

	/* Palantir-style cycling accent word in hero H1 */
	.cn-hero-rotator {
		text-wrap: balance;
	}

	.cn-hero-rotator__suffix {
		font-weight: 700;
	}

	.cn-hero-rotator__suffix:empty {
		display: none;
	}

	.cn-hero-rotator__slot {
		display: inline-grid;
		overflow: hidden;
		vertical-align: bottom;
		color: var(--cn-color-accent);
		font-weight: 700;
		line-height: inherit;
	}

	.cn-hero-rotator__word {
		grid-area: 1 / 1;
		white-space: nowrap;
		transition:
			transform var(--cn-duration-slower) var(--cn-easing-settle),
			opacity var(--cn-duration-slower) var(--cn-easing-settle);
	}

	.cn-hero-rotator__word--exit {
		transform: translateY(-108%);
		opacity: 0;
	}

	.cn-hero-rotator__word--enter {
		transform: translateY(108%);
		opacity: 0;
	}

	/* Rotating word: was a soft light-background highlighter wash; now a
	   gold underline bar instead — reads correctly against the new dark
	   sunset-gradient hero background (see #hero below). box-shadow with
	   zero blur acts as a rule/underline without affecting layout, so it
	   still can't disturb the JS-measured .cn-hero-rotator__slot width
	   transition, same guarantee the old background-image approach had. */
	.cn-hero-rotator__word {
		box-shadow: 0 3px 0 0 var(--cn-color-sand-solid);
	}

	/* --- Hero: full sunset-gradient banner (2026-08-13 "bolder coastal &
	   vivid" redesign) — was bare text on a whisper-level radial wash;
	   now a real colour-blocked banner using --cn-gradient-sunset
	   (deep-sea -> accent blue -> terracotta, see BOLD COASTAL PALETTE
	   token comment for the contrast numbers behind every colour pairing
	   used here). #hero is NOT homepage-only — cn_expansion_render_page_html()
	   (includes/cn-demand-expansion.php) and cn_niche_render_cluster_hub_html()
	   (includes/cn-niche-cluster-hubs.php) print the identical
	   <header id="hero" class="cn-section-centered"> structure for every
	   expansion-product and cluster-hub page too, so this transforms all
	   of those consistently, not just the front page. Distinct from the
	   shared .cn-section-centered class reused as a plain centred intro
	   elsewhere, which correctly does NOT get this treatment.
	   Kept inset within the stage sheet's normal padding (same as every
	   other .cn-section-full child) rather than breaking out edge-to-edge
	   — the colour itself carries the "bold" change; fighting the shared
	   containment system for a full-bleed banner would need a fragile
	   negative-margin magic number matched to --cn-padding-stage-inline. */
	#hero {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 56px);
		border-radius: var(--cn-radius-stage);
		background: var(--cn-gradient-sunset);
		box-shadow: 0 4px 16px rgba(var(--cn-color-deep-sea-rgb), 0.18);
	}

	/* Soft glow layers over the flat gradient for depth/atmosphere — same
	   layered-radial-gradient technique as the old wash, just white/gold
	   at higher opacity so it reads as light against a dark background
	   instead of colour against a light one. */
	#hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image:
			radial-gradient(ellipse 60% 55% at 15% 10%, rgba(255, 255, 255, 0.16) 0%, transparent 60%),
			radial-gradient(ellipse 55% 50% at 92% 100%, rgba(255, 217, 168, 0.28) 0%, transparent 62%);
	}

	#hero > * {
		position: relative;
		z-index: 1;
	}

	#hero .cn-hero-subheading {
		color: rgba(255, 255, 255, 0.92);
	}

	#hero .cn-hero-heading,
	#hero .cn-hero-rotator__slot,
	#hero .cn-hero-rotator__suffix {
		color: #ffffff;
	}

	#hero .cn-desc {
		color: rgba(255, 255, 255, 0.86);
	}

	/* Secondary/ghost buttons default to dark text + subtle border/bg —
	   wrong for a dark hero. Scoped under #hero so every OTHER use of
	   these two button variants site-wide (the vast majority) is
	   untouched. */
	#hero .cn-button-secondary {
		color: #ffffff !important;
		border-color: rgba(255, 255, 255, 0.55);
	}

	#hero .cn-button-ghost {
		color: #ffffff !important;
	}

	@media (hover: hover) and (pointer: fine) {
		#hero .cn-button-secondary:hover,
		#hero .cn-button-ghost:hover {
			background-color: rgba(255, 255, 255, 0.14);
			border-color: #ffffff;
			color: #ffffff !important;
		}
	}

	/* .cn-button-primary is solid accent-blue -- that's also the middle
	   stop of the gradient behind it, so on its own it could sit flush
	   against a same-hue patch of the background. A white ring keeps it
	   reading as a distinct control at every position along the
	   gradient, not just where it happens to land on deep-sea or
	   terracotta. */
	#hero .cn-button-primary {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(var(--cn-color-deep-sea-rgb), 0.28);
	}

	/* Scroll / load entrance — Palantir-style section reveals */
	.cn-reveal {
		opacity: 0;
		transform: translateY(1.25rem);
		transition:
			opacity var(--cn-duration-slower) var(--cn-easing-settle),
			transform var(--cn-duration-slower) var(--cn-easing-settle);
	}

	.cn-reveal.cn-reveal--visible {
		opacity: 1;
		transform: none;
	}

	.cn-reveal--hero {
		transform: translateY(0.75rem);
	}

	/* Hero entrance, CSS-only. cn-interactions.js used to add .cn-reveal
	   (opacity 0) to these elements after they had already painted, then
	   fade them back in once the deferred script ran: on a slow connection
	   the already-visible hero text blinked out and faded back. A keyframe
	   animation starts with first paint instead, so the entrance survives
	   but the text never disappears once shown. The two LCP candidates
	   (heading, description) get no delay; the rest stagger as before. The
	   JS no longer touches #hero (see revealSelectors in cn-interactions.js). */
	@keyframes cn-hero-enter {
		from {
			opacity: 0;
			transform: translateY(0.75rem);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	#hero .cn-hero-heading,
	#hero .cn-desc,
	#hero .cn-intro-helper,
	#hero .cn-button-group,
	#hero .cn-reassurance-strip {
		animation: cn-hero-enter var(--cn-duration-slower) var(--cn-easing-settle) both;
	}

	#hero .cn-intro-helper {
		animation-delay: 90ms;
	}

	#hero .cn-button-group {
		animation-delay: 180ms;
	}

	#hero .cn-reassurance-strip {
		animation-delay: 270ms;
	}

	.cn-reveal.cn-category-section,
	.cn-reveal.cn-product-card,
	.cn-reveal.cn-category-picker__card,
	.cn-reveal.cn-category-card {
		transform: translateY(1rem);
	}

	/* DATA / INFO ROWS (e.g. vehicle spec rows) */
	.cn-cv-row {
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.cn-cv-row:last-child {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.cn-cv-list { margin: 15px 0 15px 20px; padding: 0; }
	.cn-cv-list li {
		font-size: var(--cn-font-size-body);
		line-height: var(--cn-line-height-body);
		color: var(--cn-color-text-main);
		margin-bottom: 8px;
	}

	@media (max-width: 768px) {
		.cn-cv-list { text-align: left; display: inline-block; }
	}

	/* FORM CONTROLS */
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	textarea,
	select {
		background-color: var(--cn-color-bg-light);
		border: 1px solid var(--cn-color-border-subtle);
		border-radius: var(--cn-radius-medium);
		padding: 14px 18px;
		color: var(--cn-color-text-main);
		font-family: inherit;
		font-size: var(--cn-font-size-body);
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		transition:
			border-color var(--cn-duration-moderate) var(--cn-easing-mechanical),
			box-shadow var(--cn-duration-moderate) var(--cn-easing-mechanical),
			background-color var(--cn-duration-moderate) var(--cn-easing-standard);
	}

	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	textarea {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	@media (hover: hover) and (pointer: fine) {
		input[type="text"]:hover,
		input[type="email"]:hover,
		textarea:hover,
		select:hover {
			border-color: rgba(var(--cn-color-accent-rgb), 0.3);
		}
	}

	input[type="text"]:focus-visible,
	input[type="email"]:focus-visible,
	input[type="date"]:focus-visible,
	textarea:focus-visible,
	select:focus-visible {
		outline: none;
		background-color: var(--cn-color-bg-card);
		border-color: var(--cn-color-accent);
		box-shadow: 0 8px 24px rgba(var(--cn-color-accent-rgb), 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
		transform: translateY(-1px);
	}

	textarea {
		resize: vertical;
		min-height: 120px;
		line-height: var(--cn-line-height-body);
	}

	input, textarea {
		caret-color: var(--cn-color-accent);
	}

	::placeholder {
		color: var(--cn-color-text-muted);
		opacity: 0.6;
		font-weight: 400;
	}

	@media (pointer: coarse) {
		input[type="text"],
		input[type="email"],
		input[type="url"],
		input[type="password"],
		input[type="search"],
		input[type="number"],
		input[type="tel"],
		input[type="date"],
		textarea,
		select {
			font-size: 16px;
		}

		.wp-element-button,
		.wp-block-button__link,
		.cn-tag,
		.cn-tag-group span,
		.pill,
		.tag-pill,
		.cn-pill-small,
		.cn-back-to-top,
		#ast-scroll-top,
		details summary {
			touch-action: manipulation;
		}
	}

	/* CODE & TECHNICAL SNIPPETS */
	code, kbd, samp, pre {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
		font-size: 0.875em;
	}

	code {
		background-color: var(--cn-color-bg-light);
		color: var(--cn-color-code);
		padding: 2px 6px;
		border-radius: 4px;
		border: 1px solid var(--cn-color-border-subtle);
		word-break: break-word;
	}

	pre {
		background-color: #1e293b;
		color: #f8fafc;
		padding: 24px;
		border-radius: var(--cn-radius-medium);
		overflow-x: auto;
		box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	pre code {
		background-color: transparent;
		color: inherit;
		padding: 0;
		border: none;
	}

	/* TABLES */
	table {
		width: 100%;
		border-collapse: collapse;
		table-layout: auto;
		min-width: 480px;
	}

	th {
		background-color: var(--cn-color-bg-light);
		color: var(--cn-color-text-heading);
		font-weight: 600;
		text-align: left;
		padding: 16px 20px;
		text-transform: uppercase;
		letter-spacing: var(--cn-letter-spacing-wide);
		font-size: var(--cn-font-size-caption);
		border-bottom: 2px solid var(--cn-color-accent);
		font-variant-numeric: tabular-nums;
	}

	td {
		padding: 14px 20px;
		border-bottom: 1px solid var(--cn-color-border-subtle);
		color: var(--cn-color-text-main);
		font-size: var(--cn-font-size-body);
		word-break: normal;
		overflow-wrap: break-word;
		font-variant-numeric: tabular-nums;
		transition: background-color var(--cn-duration-base) var(--cn-easing-standard);
	}

	tbody tr:nth-child(even) td {
		background-color: rgba(var(--cn-color-accent-rgb), 0.022);
	}

	@media (hover: hover) and (pointer: fine) {
		tr:hover td {
			background-color: rgba(var(--cn-color-accent-rgb), 0.06);
			color: var(--cn-color-text-heading);
		}
	}

	/* SECTION VISUAL PROPERTIES — stage sheet (tonal step above canvas) */
	.cn-section-full {
		position: relative;
		isolation: isolate;
		container-type: inline-size;
		container-name: cn-stage;
		background: linear-gradient(180deg, var(--cn-color-bg-stage) 0%, var(--cn-color-bg-stage-end) 100%);
		border: 1px solid var(--cn-color-border-subtle);
		border-radius: var(--cn-radius-stage);
		box-shadow: var(--cn-shadow-stage);
	}

}

/* =====================================================================
	LAYER: ADAPTER
===================================================================== */

@layer adapter {

	/* LINK OVERRIDES (.entry-content) */
	.entry-content a {
		transition:
			color var(--cn-duration-base) var(--cn-easing-mechanical),
			background-color var(--cn-duration-base) var(--cn-easing-mechanical),
			text-decoration-color var(--cn-duration-base) var(--cn-easing-mechanical),
			text-decoration-thickness var(--cn-duration-base) var(--cn-easing-mechanical) !important;
	}

	.entry-content a:hover {
		background-color: rgba(var(--cn-color-accent-rgb), 0.06) !important;
		border-radius: 2px;
	}

	/* HEADER & LAYOUT RESETS */
	.site-header, .ast-header-break-point .site-header {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/* Align WordPress/Astra shell with custom page column (1200px).
	   Outer padding reveals the sand canvas around the stage sheet. */
	.site-content > .ast-container {
		max-width: var(--cn-max-width-site);
		margin: 0 auto;
		padding-inline: var(--cn-padding-inline-shell);
		padding-block: clamp(16px, 3vw, 28px) clamp(24px, 4vw, 40px);
	}

	#masthead .site-primary-header-wrap.ast-container,
	#ast-desktop-header .site-primary-header-wrap.ast-container,
	#ast-mobile-header .site-primary-header-wrap.ast-container {
		max-width: var(--cn-max-width-site);
		margin-inline: auto;
		padding-inline: var(--cn-padding-inline-shell);
	}

	/* Astra customizer font → Source Sans 3 research stack */
	body,
	.site,
	.site-content,
	.entry-content,
	.main-header-menu .menu-link,
	.main-navigation .menu-link {
		font-family: var(--cn-font-family);
	}

	#primary, .content-area {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		float: none !important;
	}

	.entry-content .wp-block-group[style*="height"],
	.entry-content .wp-block-group[style*="min-height"] {
		height: auto !important;
		min-height: 0 !important;
	}

	/* FROSTED GLASS STICKY HEADER */
	.ast-primary-sticky-header-active .site-header,
	.ast-sticky-active.site-header {
		background-color: rgba(255, 255, 255, 0.95) !important;
		border-bottom: 1px solid rgba(0,0,0,0.06) !important;
		transition: background-color var(--cn-duration-slow) var(--cn-easing-mechanical) !important;
	}

	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.ast-primary-sticky-header-active .site-header,
		.ast-sticky-active.site-header {
			background-color: rgba(255, 255, 255, 0.85) !important;
			backdrop-filter: saturate(180%) blur(20px) !important;
			-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
			transition: background-color var(--cn-duration-slow) var(--cn-easing-mechanical), backdrop-filter var(--cn-duration-slow) var(--cn-easing-mechanical) !important;
		}
	}

	/* MOBILE PERFORMANCE: disable expensive sticky-header blur on small screens. */
	@media (max-width: 544px) {
		.ast-primary-sticky-header-active .site-header,
		.ast-sticky-active.site-header {
			background-color: rgba(255, 255, 255, 0.96) !important;
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.ast-primary-sticky-header-active .site-header,
		.ast-sticky-active.site-header {
			transition: none !important;
		}
	}

	/* BACK TO TOP (#ast-scroll-top) — bottom-left when dock hidden; dock mode via JS + .cn-scroll-top--dock */
	#ast-scroll-top,
	#scroll-to-top,
	.back-to-top {
		position: fixed !important;
		z-index: 9999;
		width: var(--cn-touch-target-min) !important;
		height: var(--cn-touch-target-min) !important;
		min-inline-size: var(--cn-touch-target-min);
		min-block-size: var(--cn-touch-target-min);
		border-radius: var(--cn-radius-medium) !important;
		background-color: #ffffff !important;
		border: 1px solid var(--cn-color-border-subtle) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer;
		transition:
			transform var(--cn-duration-moderate) var(--cn-easing-mechanical),
			background-color var(--cn-duration-base) var(--cn-easing-standard),
			border-color var(--cn-duration-base) var(--cn-easing-standard),
			box-shadow var(--cn-duration-base) var(--cn-easing-standard) !important;
	}

	html:not(.cn-mobile-cta-active) #ast-scroll-top,
	html:not(.cn-mobile-cta-active) #scroll-to-top,
	html:not(.cn-mobile-cta-active) .back-to-top {
		left: 32px !important;
		right: auto !important;
		bottom: 32px !important;
	}

	#ast-scroll-top[style*="display: none"],
	#ast-scroll-top[style*="display:none"] {
		display: none !important;
	}

	#ast-scroll-top:hover {
		transform: translateY(-4px) !important;
		background-color: var(--cn-color-bg-light) !important;
		border-color: var(--cn-color-accent) !important;
		box-shadow: 0 8px 20px rgba(var(--cn-color-accent-rgb), 0.12) !important;
		will-change: transform;
	}

	#ast-scroll-top:active {
		transform: translateY(-1px) scale(0.96) !important;
		transition: transform var(--cn-duration-press) var(--cn-easing-mechanical) !important;
	}

	#ast-scroll-top .ast-icon,
	#ast-scroll-top svg {
		display: none !important;
	}

	#ast-scroll-top::before {
		content: "";
		display: block;
		width: 10px;
		height: 10px;
		border-left: 2px solid var(--cn-color-accent);
		border-top: 2px solid var(--cn-color-accent);
		transform: rotate(45deg);
		margin-top: 3px;
	}

	@media (max-width: 768px) {
		html:not(.cn-mobile-cta-active) #ast-scroll-top {
			left: calc(20px + env(safe-area-inset-left, 0px)) !important;
			bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
			right: auto !important;
		}
	}

	/* TABLE MAPPING (.wp-block-table wrapper) */
	.wp-block-table,
	.entry-content .wp-block-table {
		display: block !important;
		min-width: 0;
		max-width: 100% !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		-webkit-overflow-scrolling: touch;
		margin-bottom: 24px !important;
		background-color: #ffffff !important;
		border-radius: var(--cn-radius-medium) !important;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
		border: 1px solid var(--cn-color-border-subtle) !important;
	}

	.wp-block-table td:first-child,
	.wp-block-table th:first-child {
		width: 22%;
		min-width: 160px;
		white-space: nowrap;
	}

	/* FIGURE / IMAGE MAPPING (.wp-block-image) */
	.wp-block-image, .wp-block-figure {
		max-width: 100% !important;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.wp-block-image figcaption,
	.wp-block-figure figcaption {
		width: 100% !important;
		max-width: var(--cn-prose-max-width);
		margin: 12px auto 0;
		padding: 8px 14px;
		writing-mode: horizontal-tb !important;
		font-size: var(--cn-font-size-caption);
		line-height: var(--cn-line-height-small);
		color: var(--cn-color-text-muted);
		text-align: center !important;
		background: transparent;
		border-radius: 8px;
		word-break: break-word;
		transition:
			color var(--cn-duration-slow) var(--cn-easing-smooth) !important;
	}

	@media (hover: hover) and (pointer: fine) {
		.wp-block-image:hover figcaption,
		.wp-block-figure:hover figcaption {
			color: var(--cn-color-text-heading);
		}
	}

	@media (max-width: 480px) {
		.wp-block-image figcaption,
		.wp-block-figure figcaption {
			font-size: var(--cn-font-size-caption);
			padding: 8px 12px;
			margin-top: 10px;
		}
	}

	.wp-block-image img,
	.wp-block-figure img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		border-radius: var(--cn-radius-image) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
		transition: transform var(--cn-duration-slow) var(--cn-easing-mechanical) !important;
	}

	.wp-block-image.size-full.is-resized.has-custom-border img,
	.wp-block-image.size-large.is-resized img {
		width: 100% !important;
		height: auto !important;
		object-fit: cover;
		border-radius: var(--cn-radius-medium) !important;
		box-shadow: var(--cn-shadow-image) !important;
		transition:
			transform var(--cn-duration-slow) var(--cn-easing-mechanical),
			box-shadow var(--cn-duration-slow) var(--cn-easing-standard) !important;
	}

	@media (hover: hover) and (pointer: fine) {
		.wp-block-image.size-full.is-resized.has-custom-border img:hover,
		.wp-block-image.size-large.is-resized img:hover {
			transform: translateY(-4px) !important;
			box-shadow: var(--cn-shadow-hover-image) !important;
		}
	}

	/* BUTTON MAPPING (.wp-block-button) */
	.wp-block-button__link,
	.wp-element-button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 10px;
		padding: 14px 36px !important;
		border-radius: var(--cn-radius-pill) !important;
		font-family: var(--cn-font-family);
		font-weight: 600;
		font-size: var(--cn-font-size-ui-min);
		line-height: var(--cn-line-height-ui);
		letter-spacing: normal;
		text-decoration: none !important;
		cursor: pointer;
		max-width: 100%;
		white-space: nowrap;
		transition:
			transform var(--cn-duration-moderate) var(--cn-easing-mechanical),
			box-shadow var(--cn-duration-moderate) var(--cn-easing-standard),
			background-color var(--cn-duration-base) var(--cn-easing-standard),
			border-color var(--cn-duration-base) var(--cn-easing-standard),
			color var(--cn-duration-base) var(--cn-easing-standard) !important;
	}

	.wp-block-button.is-style-fill .wp-block-button__link,
	.wp-block-button .wp-block-button__link.wp-element-button.is-primary {
		background-color: var(--cn-color-accent) !important;
		color: #ffffff !important;
		border: 2px solid var(--cn-color-accent) !important;
		box-shadow: 0 2px 8px rgba(var(--cn-color-accent-rgb), 0.18) !important;
	}

	.wp-block-button.is-style-outline .wp-block-button__link,
	.wp-block-button .wp-block-button__link.wp-element-button.is-outline {
		background: transparent !important;
		color: var(--cn-color-text-heading) !important;
		border: 2px solid var(--cn-color-border-subtle) !important;
	}

	.dark-section .wp-block-button.is-style-outline .wp-block-button__link {
		color: #ffffff !important;
		border-color: rgba(255, 255, 255, 0.3) !important;
		background: rgba(var(--cn-color-accent-rgb), 0.06) !important;
	}

	@media (hover: hover) and (pointer: fine) {
		.wp-block-button__link:hover,
		.wp-element-button:hover {
			transform: translateY(-3px);
			text-decoration: none !important;
		}
		.wp-block-button.is-style-fill .wp-block-button__link:hover {
			background-color: var(--cn-color-accent-hover) !important;
			box-shadow: var(--cn-shadow-hover-button) !important;
		}
		.wp-block-button.is-style-outline .wp-block-button__link:hover {
			border-color: var(--cn-color-accent) !important;
			background-color: var(--cn-color-bg-light) !important;
			color: var(--cn-color-accent) !important;
		}
		.dark-section .wp-block-button.is-style-outline .wp-block-button__link:hover {
			background-color: #ffffff !important;
			color: var(--cn-color-accent) !important;
			border-color: #ffffff !important;
		}
	}

	.wp-block-button__link:active,
	.wp-element-button:active {
		transform: translateY(-1px) scale(0.96) !important;
		transition: transform var(--cn-duration-press) var(--cn-easing-mechanical) !important;
	}

	.wp-block-button__link:focus-visible,
	.wp-element-button:focus-visible {
		outline: none !important;
		box-shadow: var(--cn-shadow-focus-ring) !important;
	}

	.wp-block-buttons {
		gap: var(--cn-gap-button);
		display: flex !important;
		flex-wrap: wrap !important;
	}

	.cn-button-full .wp-block-button__link { width: 100% !important; text-align: center !important; }
	.cn-project-card .wp-block-buttons,
	.cn-card-white .wp-block-buttons { margin-top: auto !important; padding-top: 24px; }

	@media (max-width: 600px) {
		.wp-block-button {
			display: flex !important;
			justify-content: center !important;
			width: 100% !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
		.wp-block-button__link,
		.wp-element-button {
			width: 100% !important;
			padding-left: 20px !important;
			padding-right: 20px !important;
			max-width: 420px;
		}
	}

	.cn-panel-light .wp-block-buttons,
	.cn-card-white .wp-block-buttons {
		width: 100%;
		justify-content: center;
	}

	.cn-panel-light .wp-block-button,
	.cn-card-white .wp-block-button {
		min-width: 0;
		max-width: 100%;
	}

	.cn-panel-light .wp-block-button__link,
	.cn-panel-light .wp-element-button,
	.cn-card-white .wp-block-button__link,
	.cn-card-white .wp-element-button {
		white-space: nowrap !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		width: 100% !important;
		text-align: center !important;
		line-height: 1;
		box-sizing: border-box;
	}

	/* TAG MAPPING (.wp-block-tag) */
	.wp-block-tag,
	.wp-block-buttons + .tag {
		display: inline-block !important;
		background-color: var(--cn-color-bg-light) !important;
		padding: 8px 14px !important;
		border-radius: var(--cn-radius-tag) !important;
		font-size: var(--cn-font-size-tag) !important;
		color: var(--cn-color-text-main) !important;
		border: 1px solid var(--cn-color-border-subtle) !important;
		text-decoration: none !important;
		font-weight: 500;
		margin: 4px 6px 4px 0;
		transition:
			transform var(--cn-duration-base) var(--cn-easing-mechanical),
			background-color var(--cn-duration-base) var(--cn-easing-standard),
			border-color var(--cn-duration-base) var(--cn-easing-standard),
			box-shadow var(--cn-duration-base) var(--cn-easing-standard),
			color var(--cn-duration-base) var(--cn-easing-standard) !important;
	}

	@media (hover: hover) and (pointer: fine) {
		a.wp-block-tag:hover {
			background-color: var(--cn-color-accent-wash) !important;
			border-color: var(--cn-color-accent) !important;
			transform: translateY(-2px) !important;
			color: var(--cn-color-accent) !important;
			box-shadow: 0 4px 10px rgba(var(--cn-color-accent-rgb), 0.12) !important;
		}
	}

	a.wp-block-tag:active {
		transform: translateY(0) scale(0.96) !important;
	}

	/* LIST MAPPING — all cn-* lists inside Gutenberg groups */
	.wp-block-group ul.cn-list-group,
	.wp-block-group ol.cn-list-group,
	.wp-block-group ul.cn-lead-checklist,
	.wp-block-group ol.cn-lead-checklist,
	.wp-block-group ul.cn-index-list {
		list-style: none !important;
		list-style-type: none !important;
		padding: 0 !important;
		margin-left: 0 !important;
	}

	.wp-block-group li.cn-list-item,
	.wp-block-group .cn-lead-checklist > li {
		list-style: none !important;
		list-style-type: none !important;
	}

	/* CALLOUT PANEL HOVER (legacy inline panels) */
	@media (hover: hover) and (pointer: fine) {
		.entry-content .cn-panel-white[style]:hover {
			background-color: rgba(var(--cn-color-accent-rgb), 0.08) !important;
			border-left-color: var(--cn-color-accent-hover) !important;
		}
	}

	/* WP UTILITY MAPPING */
	.has-text-align-center { text-align: center !important; }
	.has-text-align-left { text-align: left !important; }

	/* CODE BLOCK REINFORCEMENT (.entry-content) */
	.entry-content code {
		background-color: var(--cn-color-bg-light) !important;
		color: var(--cn-color-code) !important;
		padding: 2px 6px !important;
		border-radius: 4px !important;
		border: 1px solid var(--cn-color-border-subtle) !important;
	}

	.entry-content pre {
		background-color: #1e293b !important;
		color: #f8fafc !important;
		padding: 24px !important;
		border-radius: var(--cn-radius-medium) !important;
		box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2) !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
	}

	.entry-content pre code {
		background-color: transparent !important;
		color: inherit !important;
		padding: 0 !important;
		border: none !important;
	}

	/* FORM MAPPING (.wpcf7-*) */
	.wpcf7-form-control-wrap:focus-within {
		transform: translateX(2px);
		transition: transform var(--cn-duration-moderate) var(--cn-easing-mechanical) !important;
	}

	/* HERO LAYOUT MAPPING */
	@media (min-width: 922px) {
		.cn-card .wp-block-columns.cn-columns-large {
			display: flex !important;
			align-items: center !important;
		}
		.cn-card .wp-block-columns.cn-columns-large > .wp-block-column:not(:first-child) {
			display: flex !important;
			flex-direction: column !important;
			justify-content: center !important;
			height: 100% !important;
		}
		.wp-block-columns.cn-top-align {
			display: flex !important;
			align-items: flex-start !important;
		}
		.wp-block-columns.cn-top-align > .wp-block-column {
			display: flex;
			flex-direction: column;
			align-items: stretch;
		}
		.wp-block-columns.cn-top-align > .wp-block-column > h3,
		.wp-block-columns.cn-top-align > .wp-block-column > h4 {
			margin-top: 0;
			margin-bottom: 8px;
		}
		.wp-block-columns.cn-top-align > .wp-block-column > p.cn-desc {
			margin-top: 0;
			margin-bottom: 16px;
		}
		.wp-block-columns.cn-top-align > .wp-block-column > .cn-list-group,
		.wp-block-columns.cn-top-align > .wp-block-column > .wp-block-group.cn-list-group {
			flex: 1;
		}
	}

	@media (max-width: 768px) {
		.wp-block-column.cn-center-mobile {
			display: flex !important;
			flex-direction: column !important;
			align-items: center !important;
			width: 100% !important;
			padding: 0 !important;
			margin-bottom: 20px !important;
		}
		.cn-center-mobile figure.wp-block-image {
			width: 100% !important;
			max-width: 100% !important;
			margin: 0 !important;
		}
		.cn-center-mobile img {
			width: 100% !important;
			height: auto !important;
			max-width: 100% !important;
			display: block !important;
			margin: 0 auto !important;
			border-radius: 12px !important;
		}
		.cn-cv-row .wp-block-column { text-align: center !important; }
	}

	/* RESPONSIVE STACKING */
	@media (max-width: 921px) {
		.wp-block-columns {
			display: flex !important;
			flex-direction: column !important;
			gap: var(--cn-gap-card) !important;
			align-items: stretch !important;
		}
		.wp-block-column {
			flex: 1 1 100% !important;
			width: 100% !important;
		}
		.wp-block-buttons {
			display: flex !important;
			flex-direction: column !important;
			width: 100% !important;
			gap: 12px !important;
		}
		.wp-block-button { width: 100% !important; margin: 0 !important; }
		.wp-block-button__link { width: 100% !important; justify-content: center !important; }
	}

	/* LAYOUT FIXES */
	.site .cn-section-full .ast-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.cn-section-full > p:empty,
	.cn-section-full > br,
	.cn-section-full > div:empty,
	.wp-block-spacer {
		display: none !important;
	}

	.wp-block-group.alignfull.has-ast-global-color-5-background-color {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* GRID FIXES */
	.cn-explore-portfolio .wp-block-column {
		margin-bottom: 0 !important;
	}

	/* RESPONSIVE TWEAKS */
	@media (max-width: 544px) {
		.cn-tag-group { justify-content: center; }
		.cn-list-group { gap: 8px; }
	}

	/* PRINT STYLES & REDUCED MOTION */
	@media print {
		.site-header, .site-footer, .ast-footer-overlay, .ast-above-header, .ast-below-header, #ast-scroll-top, .wp-block-buttons, .cn-tools-grid, .cn-logo-grid, .cn-affiliations-card, .cn-affiliations-wrapper, .cn-button-group-center, nav {
			display: none !important;
		}
		body, .site, .ast-container {
			width: 100% !important;
			max-width: 100% !important;
			margin: 0 !important;
			padding: 0 !important;
			scroll-behavior: auto;
		}
		.cn-section-full { padding: 20px 0 !important; }
		.cn-card, .cn-card-white, .cn-project-card {
			box-shadow: none !important;
			border: 1px solid #d1d5db;
		}
		/* Keep small cards intact, but let tall section cards flow
		   across pages so they don't leave a near-blank page. */
		.cn-subcard, .cn-contact-method, .cn-category-card, .cn-product-card {
			break-inside: avoid;
			page-break-inside: avoid;
		}
		h1, h2, h3, h4 { page-break-after: avoid; }
		p, .cn-list-item {
			orphans: 3;
			widows: 3;
		}
		/* Never expand link URLs in print. WhatsApp deep-links and
		   buttons would otherwise dump long query strings into the
		   page (and inside the buttons themselves). */
		a[href]::after,
		a[href]::before {
			content: none !important;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			transition-duration: .01ms !important;
			animation-duration: .01ms !important;
			animation-iteration-count: 1 !important;
		}
		html {
			scroll-behavior: auto !important;
		}
		.cn-card-white[data-active="true"],
		.cn-project-card[data-active="true"] {
			transform: none !important;
			box-shadow: var(--cn-shadow-rest) !important;
		}
	}

}

/* =========================================================
	UNLAYERED OVERRIDES (LAST RESORT ONLY)
	Only put CSS here if it absolutely must beat Astra's core CSS.
========================================================= */

/* TOOLTIPS (generic) */
.cn-tooltip {
	border-bottom: 1px dotted var(--cn-color-accent, #1d6fa5);
	cursor: help;
	text-decoration: none;
}

#cn-tooltip-host {
	position: fixed;
	z-index: 100000;
	max-width: min(420px, 92vw);
	padding: 10px 14px;
	background: #1a1f2e;
	color: #f0f3f8;
	font-size: var(--cn-font-size-caption);
	line-height: var(--cn-line-height-small);
	border-radius: 8px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	display: none;
}

#cn-tooltip-host.cn-tip-visible {
	display: block;
}

/* CLEAN TABLE VARIANT */
table.cn-table-clean,
table.cn-comparison-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
	text-align: left;
}

table.cn-table-clean th,
table.cn-table-clean td,
table.cn-comparison-table th,
table.cn-comparison-table td {
	padding: 0.5rem 0.65rem;
	border-bottom: 1px solid var(--cn-color-border-subtle, #e5e5e5);
	vertical-align: top;
}

table.cn-table-clean thead th,
table.cn-comparison-table thead th {
	font-weight: 600;
	background: rgba(240, 243, 248, 0.65);
}

/* .cn-comparison-table (cn_render_comparison_table_by_slugs() in
   cn-layout-components.php, [cn_comparison_table] shortcode — live on
   4 guide pages) centers per-cell via a bare cn-text-center utility on
   each <th>/<td> rather than the table-level .cn-table-center modifier
   above; add that utility as its own rule so it works standalone. */
.cn-text-center {
	text-align: center;
}

table.cn-table-clean.cn-table-center th,
table.cn-table-clean.cn-table-center td {
	text-align: center;
}

table.cn-table-clean.cn-table-compact {
	font-size: var(--cn-font-size-body);
}

/* Horizontal scroll for comparison tables — wrapper is the positioning context */
.cn-table-scroll-wrap {
	position: relative;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

/* Scroll-tracking right-edge fade: created by JS, hidden when table fits or is scrolled to end */
.cn-table-scroll-fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2.5rem;
	pointer-events: none;
	border-radius: 0 var(--cn-radius-medium, 8px) var(--cn-radius-medium, 8px) 0;
	background: linear-gradient(to left, var(--cn-color-bg-stage, #f8f5f0) 20%, transparent);
	transition: opacity 0.18s ease;
	opacity: 1;
	z-index: 1;
}

.cn-table-scroll-fade--hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.cn-table-scroll {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	border-radius: var(--cn-radius-medium, 8px);
	/* margins live on .cn-table-scroll-wrap when JS is active;
	   fallback keeps spacing when JS has not yet run */
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.cn-table-scroll-wrap > .cn-table-scroll {
	/* reset margin once wrapper is present to avoid double spacing */
	margin-top: 0;
	margin-bottom: 0;
}

.cn-table-scroll:focus-visible {
	outline: 2px solid var(--cn-color-accent);
	outline-offset: 2px;
}

.cn-table-scroll table.cn-table-clean {
	width: 100%;
	min-width: 100%;
	max-width: none;
	margin-top: 0;
	table-layout: fixed;
}

.cn-table-scroll table.cn-table-clean th,
.cn-table-scroll table.cn-table-clean td {
	hyphens: none;
	-webkit-hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
}

@media (max-width: 768px) {
	.cn-table-scroll table.cn-table-clean {
		width: max(100%, 34rem);
		min-width: 34rem;
		table-layout: auto;
	}

	.cn-table-scroll table.cn-table-clean th,
	.cn-table-scroll table.cn-table-clean td {
		padding: 0.45rem 0.55rem;
		font-size: var(--cn-font-size-small);
		white-space: normal;
	}

	.cn-table-scroll table.cn-table-clean th:first-child,
	.cn-table-scroll table.cn-table-clean td:first-child {
		min-width: 7.5rem;
	}
}

/* ACCESSIBILITY HELPERS */
.cn-visually-hidden,
.cn-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* PEDAGOGICAL / ACCENT-EDGE CALLOUTS (ASTRA / MINIFIER SAFE) */
.cn-panel-white.cn-panel-accent-edge {
	background-color: var(--cn-callout-bg-color);
	border-top: 1px solid var(--cn-color-border-subtle) !important;
	border-right: 1px solid var(--cn-color-border-subtle) !important;
	border-bottom: 1px solid var(--cn-color-border-subtle) !important;
	border-left: 5px solid var(--cn-callout-edge-color) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.cn-panel-white.cn-panel-accent-edge:hover,
.cn-panel-white.cn-panel-accent-edge[data-active="true"] {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.cn-panel-white.cn-panel-accent-edge strong {
	color: var(--cn-callout-edge-color) !important;
	font-weight: 700 !important;
}

/* SECTION NAVIGATION ROW */
.cn-nav-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border-top: 1px solid var(--cn-color-border-subtle);
	padding-top: 16px;
	margin-top: 24px;
	font-size: var(--cn-font-size-ui-min);
	line-height: var(--cn-line-height-ui);
}

.cn-nav-row > :first-child {
	flex: 1;
	text-align: left;
}
.cn-nav-row > :nth-child(2) {
	flex: 1;
	text-align: center;
}
.cn-nav-row > :last-child {
	flex: 1;
	text-align: right;
}

@media (max-width: 600px) {
	.cn-nav-row {
		flex-direction: column;
		gap: 16px;
	}
	.cn-nav-row > * {
		text-align: center !important;
	}
}

/* CONTACT PANEL: EMAILS & MULTILINE BUTTONS */
a.cn-email-link,
.cn-panel-light a[href*="mailto:"] {
	white-space: nowrap !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--cn-font-size-ui-min) !important;
}

.cn-panel-light .wp-block-button__link,
.cn-panel-light .wp-element-button {
	white-space: normal !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
	height: auto !important;
	min-height: 48px !important;
	line-height: 1.3 !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	text-align: center !important;
}

/* =========================================================
   CN LIST GUTTERS (site-wide, beats Astra entry-content)
   Astra sets `.entry-content ul, ol { padding: revert }`, which
   stacks on our li padding and wastes horizontal space in cards.
   All cn-* lists share --cn-list-text-inset from :root tokens.
========================================================= */

/* 1. No hyphenation / micro-scrollbars in card columns. */
.cn-list-group,
.cn-list-item,
li.cn-list-item,
.cn-lead-checklist,
.cn-lead-checklist > li,
.cn-project-card,
.cn-card-white {
	text-align: left;
	hyphens: none !important;
	-webkit-hyphens: none !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
}

/* 2. Zero wrapper indent — Astra revert must not add a second gutter. */
.entry-content .cn-section-full :is(ul, ol):is(
	.cn-list-group,
	.cn-lead-checklist,
	.cn-index-list
) {
	padding: 0 !important;
	margin-left: 0 !important;
	list-style: none !important;
}

.cn-list-group,
.cn-list-item,
li.cn-list-item,
.cn-lead-checklist > li {
	overflow: visible !important;
	min-width: 0;
	max-width: 100%;
}

/* 3. Shared text inset; bullets anchored in the padding box. */
.entry-content .cn-section-full .cn-list-item,
.entry-content .cn-section-full li.cn-list-item,
.cn-list-item,
li.cn-list-item {
	position: relative !important;
	padding:
		var(--cn-list-item-pad-y)
		var(--cn-list-item-pad-end)
		var(--cn-list-item-pad-y)
		var(--cn-list-text-inset) !important;
}

.entry-content .cn-section-full .cn-lead-checklist > li,
.cn-lead-checklist > li {
	position: relative !important;
	padding:
		var(--cn-list-item-pad-y)
		var(--cn-list-item-pad-end)
		var(--cn-list-item-pad-y)
		var(--cn-list-text-inset-accent) !important;
}

.cn-list-item::before,
li.cn-list-item::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	z-index: 1 !important;
	left: var(--cn-list-marker-inset) !important;
	top: calc(var(--cn-list-item-pad-y) + 0.65em) !important;
	transform: translateY(-50%) !important;
	width: var(--cn-list-marker-size) !important;
	height: var(--cn-list-marker-size) !important;
	border-radius: 50% !important;
	background-color: var(--cn-color-text-muted) !important;
	opacity: 0.85 !important;
}

.cn-lead-checklist > li::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	z-index: 1 !important;
	left: var(--cn-list-marker-inset) !important;
	top: calc(var(--cn-list-item-pad-y) + 0.65em) !important;
	transform: translateY(-50%) !important;
	width: var(--cn-list-marker-size-accent) !important;
	height: var(--cn-list-marker-size-accent) !important;
	border-radius: 50% !important;
	background-color: var(--cn-color-accent) !important;
	opacity: 1 !important;
}

/* Column width flexibility — applies at ALL screen sizes (no media
   query). Row + wrap means: if there isn't room for the cards side
   by side, they simply drop to the next row. `min-width:0` lets each
   card shrink instead of bursting past the parent's white bounds. */
.cn-section-full .wp-block-columns.cn-columns-medium {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.cn-section-full .wp-block-columns.cn-columns-medium > .wp-block-column {
	flex: 1 1 280px !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* =========================================================
   PHASE 2 UX ARCHITECTURE UTILITIES (re-merged with the
   original cn- design language)
   ---------------------------------------------------------
   These utilities power the product grid, conversion bands,
   trust strips, FAQ disclosures and contact-method cards.
   Every value is wired into the real design tokens
   (--cn-color-*, --cn-radius-*, --cn-shadow-*, --cn-duration-*,
   --cn-easing-*) so they match the existing card / button /
   tag / accent-edge aesthetic instead of inventing new colors.
========================================================= */

/* --- Reusable interaction hooks --------------------------- */
.cn-transition {
	transition:
		transform var(--cn-duration-slow) var(--cn-easing-mechanical),
		box-shadow var(--cn-duration-slow) var(--cn-easing-standard),
		border-color var(--cn-duration-base) var(--cn-easing-standard),
		background-color var(--cn-duration-base) var(--cn-easing-standard),
		color var(--cn-duration-base) var(--cn-easing-standard);
}

@media (hover: hover) and (pointer: fine) {
	.cn-hover-lift:hover {
		transform: translateY(-3px);
		box-shadow: var(--cn-shadow-elevated-hover);
		border-color: var(--cn-color-border-hover);
		z-index: 2;
	}

	.cn-hover-ring:hover {
		box-shadow: var(--cn-shadow-elevated-hover);
		border-color: var(--cn-color-border-hover);
		z-index: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-transition,
	.cn-hover-lift,
	.cn-hover-ring,
	.cn-product-card,
	.cn-category-card,
	.cn-contact-method,
	.cn-button {
		transition: none !important;
		transform: none !important;
	}
}

/* --- Responsive grid (no breakouts, no sliders) ----------- */
.cn-grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--cn-gap-card);
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Adapt card columns to the stage width, not only the viewport */
@container cn-stage (min-width: 36rem) {
	.cn-grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	}
}

@container cn-stage (min-width: 52rem) {
	.cn-grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	}
}

@media (min-width: 922px) {
	.cn-grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	}
}

.cn-grid-compact {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--cn-gap-medium);
}

/* --- Discovery / conversion cards ------------------------- */
.cn-product-card,
.cn-category-card,
.cn-contact-method {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--cn-gap-small);
	min-width: 0;
	height: 100%;
	padding: var(--cn-padding-card);
	background: linear-gradient(168deg, var(--cn-color-bg-elevated) 0%, var(--cn-color-bg-card) 100%);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-large);
	box-shadow: var(--cn-shadow-elevated-rest);
	box-sizing: border-box;
	overflow: visible;
}

.cn-product-card > *,
.cn-category-card > *,
.cn-contact-method > * {
	min-width: 0;
}

.cn-product-card h2,
.cn-product-card h3,
.cn-product-card h4,
.cn-category-card h2,
.cn-category-card h3,
.cn-category-card h4,
.cn-contact-method h2,
.cn-contact-method h3 {
	margin: 0;
	font-size: var(--cn-font-size-h3);
	line-height: var(--cn-line-height-heading);
	color: var(--cn-color-text-heading);
}

.cn-product-card p,
.cn-category-card p,
.cn-contact-method p {
	margin: 0;
	color: var(--cn-color-text-main);
	line-height: var(--cn-line-height-body);
}

.cn-product-card h3 a,
.cn-product-card h4 a,
.cn-category-card h3 a,
.cn-category-card h4 a,
.cn-contact-method h3 a {
	color: var(--cn-color-text-heading);
	text-decoration: none;
	transition: color var(--cn-duration-base) var(--cn-easing-standard);
}

@media (hover: hover) and (pointer: fine) {
	.cn-product-card h3 a:hover,
	.cn-product-card h4 a:hover,
	.cn-category-card h3 a:hover,
	.cn-category-card h4 a:hover,
	.cn-contact-method h3 a:hover {
		color: var(--cn-color-accent);
	}
}

.cn-product-card figure {
	margin: 0;
}

/* --- Card action rows ------------------------------------- */
.cn-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cn-gap-button);
	align-items: center;
	margin-top: auto;
	padding-top: 4px;
}

.cn-card-actions .cn-button {
	max-width: 100%;
}

/* Unified CTA row on parent cards (one WhatsApp per category, not per subcard).
   Separate from .cn-card-actions so margin-top:auto never pulls over subcards. */
.cn-card-footer-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--cn-gap-button);
	width: 100%;
	flex: 0 0 auto;
	margin-top: clamp(24px, 4vw, 32px);
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--cn-color-border-subtle);
	position: relative;
	z-index: 3;
	clear: both;
	box-sizing: border-box;
}

.cn-card-footer-cta .cn-button {
	position: relative;
	z-index: 4;
	flex: 0 1 auto;
	max-width: 100%;
}

section.cn-card:has(> .cn-card-footer-cta),
article.cn-card:has(> .cn-card-footer-cta) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	contain: none;
}

/* Flex children stay content-height; only the footer pins to the bottom naturally */
section.cn-card:has(> .cn-card-footer-cta) > :not(.cn-card-footer-cta):not(.cn-card-actions--footer),
article.cn-card:has(> .cn-card-footer-cta) > :not(.cn-card-footer-cta):not(.cn-card-actions--footer) {
	flex: 0 0 auto;
}

/* Stretched-link contact cards: avoid layout containment clipping on press/hover */
section.cn-card:has(.cn-contact-method),
.cn-card:has(.cn-contact-method) {
	overflow: visible;
	contain: none;
}

/* Legacy class alias (if old HTML still deployed) */
.cn-card-actions--footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--cn-gap-button);
	width: 100%;
	flex: 0 0 auto;
	margin-top: clamp(24px, 4vw, 32px) !important;
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--cn-color-border-subtle);
	position: relative;
	z-index: 3;
	clear: both;
	box-sizing: border-box;
}

.cn-card-actions--footer.cn-button-group-center,
.cn-card-actions--footer {
	justify-content: center;
}

section.cn-card:has(> .cn-card-actions--footer),
article.cn-card:has(> .cn-card-actions--footer) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	contain: none;
}

section.cn-card:has(> .cn-card-actions--footer) > :not(.cn-card-footer-cta):not(.cn-card-actions--footer),
article.cn-card:has(> .cn-card-actions--footer) > :not(.cn-card-footer-cta):not(.cn-card-actions--footer) {
	flex: 0 0 auto;
}

/* --- Native cn- button system (matches site buttons) ------ */
.cn-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cn-gap-button);
	align-items: center;
}

.cn-button-group-center {
	justify-content: center;
}

.cn-button {
	display: inline-flex;
	display: -webkit-inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	gap: var(--cn-space-3);
	min-height: var(--cn-touch-target-min);
	max-width: 100%;
	padding: 16px 34px;
	border: 2px solid transparent;
	border-radius: var(--cn-radius-pill);
	font-family: var(--cn-font-family);
	font-weight: 700;
	font-size: calc(var(--cn-font-size-ui-min) + 1px);
	line-height: var(--cn-line-height-ui);
	letter-spacing: normal;
	text-align: center;
	text-decoration: none !important;
	white-space: normal;
	cursor: pointer;
	transition:
		transform var(--cn-duration-moderate) var(--cn-easing-mechanical),
		box-shadow var(--cn-duration-moderate) var(--cn-easing-standard),
		background-color var(--cn-duration-base) var(--cn-easing-standard),
		border-color var(--cn-duration-base) var(--cn-easing-standard),
		color var(--cn-duration-base) var(--cn-easing-standard);
}

.cn-button-primary {
	background-color: var(--cn-color-accent);
	/* Diagonal sheen band layered over the existing top-to-bottom accent
	   gradient (2026-08-15 "premium" pass) — classic glossy-surface cue,
	   pure background-image so it needs no overflow:hidden/pseudo-element
	   (multiple background-image layers paint in listed order, first on
	   top, and already respect the button's own border-radius). Hover
	   still goes fully flat (background-image: none, set further down —
	   the sheen is a rest-state detail, not fought over on hover). */
	background-image:
		linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.28) 46%, rgba(255, 255, 255, 0.06) 56%, transparent 72%),
		linear-gradient(180deg, var(--cn-color-accent) 0%, var(--cn-color-accent-hover) 100%);
	color: #ffffff !important;
	border-color: var(--cn-color-accent);
	/* Was 0 2px 8px / 0.18 alpha (whisper-level). Deepened for the 2026-08-13
	   "bolder coastal & vivid" direction — more presence on the site's main
	   conversion action (WhatsApp/CTA), not just decorative. */
	box-shadow: 0 6px 18px rgba(var(--cn-color-accent-rgb), 0.32);
}

.cn-button-secondary {
	background: transparent;
	color: var(--cn-color-text-heading) !important;
	border-color: var(--cn-color-border-subtle);
}

.cn-button-ghost {
	background: transparent;
	color: var(--cn-color-accent) !important;
	border-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
	.cn-button:hover {
		transform: translateY(-3px);
	}

	.cn-button-primary:hover {
		/* background-image (the gradient, set unconditionally at rest) paints
		   over background-color, so without this the hover colour change
		   below was invisible — confirmed by reading both rules together,
		   nothing here was actually broken on screen since it was never
		   deployed un-reviewed, but the hover darken would have silently
		   stopped working. Flattening to solid accent-hover on hover keeps
		   the original, tested hover behaviour; the gradient is a
		   rest-state-only detail. */
		background-image: none;
		background-color: var(--cn-color-accent-hover);
		border-color: var(--cn-color-accent-hover);
		box-shadow: var(--cn-shadow-hover-button);
	}

	.cn-button-secondary:hover {
		border-color: var(--cn-color-accent);
		background-color: var(--cn-color-bg-light);
		color: var(--cn-color-accent) !important;
	}

	.cn-button-ghost:hover {
		background-color: var(--cn-color-bg-light);
		color: var(--cn-color-accent) !important;
	}
}

.cn-button:active {
	transform: translateY(0) scale(0.985);
	transition: transform var(--cn-duration-press) var(--cn-easing-settle);
}

.cn-button-primary:active {
	background-color: var(--cn-color-accent-hover);
	filter: brightness(0.96);
}

.cn-button:focus-visible {
	outline: none;
	box-shadow: var(--cn-shadow-focus-ring);
}

/* --- Category jump navigation (tag/pill language) --------- */
.cn-category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cn-gap-small);
	justify-content: center;
	margin: clamp(20px, 4vw, 32px) auto 0;
	padding: 0;
	list-style: none;
}

.cn-category-nav a,
.cn-chip-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--cn-touch-target-min);
	padding: 8px 16px;
	background-color: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-pill);
	color: var(--cn-color-text-main);
	font-size: var(--cn-font-size-ui-min);
	font-weight: 500;
	line-height: var(--cn-line-height-ui);
	letter-spacing: normal;
	text-decoration: none !important;
	transition:
		transform var(--cn-duration-base) var(--cn-easing-mechanical),
		background-color var(--cn-duration-base) var(--cn-easing-standard),
		border-color var(--cn-duration-base) var(--cn-easing-standard),
		color var(--cn-duration-base) var(--cn-easing-standard),
		box-shadow var(--cn-duration-base) var(--cn-easing-standard);
}

@media (hover: hover) and (pointer: fine) {
	.cn-category-nav a:hover,
	.cn-chip-link:hover {
		background-color: var(--cn-color-accent-wash);
		background-image: var(--cn-gradient-accent-wash);
		border-color: var(--cn-color-accent);
		color: var(--cn-color-accent);
		transform: translateY(-2px);
		box-shadow: 0 4px 10px rgba(var(--cn-color-accent-rgb), 0.12);
	}
}

.cn-category-nav a:active,
.cn-chip-link:active {
	transform: translateY(0) scale(0.96);
}

/* --- Kicker label (accent-wash tag) ----------------------- */
.cn-kicker {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 7px 16px;
	/* Was a pale accent-wash chip with accent-coloured text (barely
	   registers at a glance, appears on nearly every section eyebrow
	   site-wide). Solid gradient + white text for the 2026-08-13 bold
	   direction — contrast-checked: white on accent 5.2:1, white on
	   terracotta 4.72:1, both pass AA normal text. True pill radius to
	   match the button system. */
	background-color: var(--cn-color-accent);
	background-image: linear-gradient(120deg, var(--cn-color-accent) 0%, var(--cn-color-terracotta) 145%);
	color: #ffffff;
	border-radius: var(--cn-radius-pill);
	font-size: var(--cn-font-size-ui-min);
	font-weight: 700;
	letter-spacing: var(--cn-letter-spacing-wide);
	line-height: var(--cn-line-height-ui);
	text-transform: uppercase;
}

/* Context kicker → heading: keep visual separation even when h2 has .cn-mt-0 */
.cn-kicker + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-hero-heading,
	.cn-section-heading,
	.cn-section-heading-left,
	.cn-location-card__title
) {
	margin-top: clamp(20px, 4vw, 28px) !important;
}

/* Large section cards: same flex rhythm as .cn-contact-method / .cn-subcard.
   Include nested stacks (e.g. .cn-split > div with .cn-tag-row + badge). */
:is(section, article).cn-card:has(> .cn-kicker),
.cn-card :is(div, header):not(
	.cn-split,
	.cn-subgrid,
	.cn-grid-auto,
	.cn-grid-compact,
	.cn-detail-grid,
	.cn-form-panel,
	.cn-panel-muted,
	.cn-tag-container-wide
):has(> .cn-kicker),
.cn-card :is(div, header):not(
	.cn-split,
	.cn-subgrid,
	.cn-grid-auto,
	.cn-grid-compact,
	.cn-detail-grid,
	.cn-form-panel,
	.cn-panel-muted,
	.cn-tag-container-wide
):has(> .cn-tag-row .cn-kicker),
.cn-panel-white:has(> .cn-kicker),
.cn-cta-band > div:has(> .cn-kicker) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--cn-gap-small);
}

:is(section, article).cn-card:has(> .cn-kicker) > *,
.cn-card :is(div, header):not(
	.cn-split,
	.cn-subgrid,
	.cn-grid-auto,
	.cn-grid-compact,
	.cn-detail-grid,
	.cn-form-panel,
	.cn-panel-muted,
	.cn-tag-container-wide
):has(> .cn-kicker) > *,
.cn-card :is(div, header):not(
	.cn-split,
	.cn-subgrid,
	.cn-grid-auto,
	.cn-grid-compact,
	.cn-detail-grid,
	.cn-form-panel,
	.cn-panel-muted,
	.cn-tag-container-wide
):has(> .cn-tag-row .cn-kicker) > *,
.cn-panel-white:has(> .cn-kicker) > *,
.cn-cta-band > div:has(> .cn-kicker) > * {
	margin-block: 0 !important;
}

/* Flex gap owns kicker→title spacing inside large stacks (no double margin). */
:is(section, article).cn-card:has(> .cn-kicker) > .cn-kicker + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-section-heading,
	.cn-section-heading-left
),
.cn-card :is(div, header):has(> .cn-kicker) > .cn-kicker + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-section-heading,
	.cn-section-heading-left
),
.cn-card :is(div, header):has(> .cn-tag-row .cn-kicker) > .cn-tag-row + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-section-heading,
	.cn-section-heading-left
),
.cn-panel-white:has(> .cn-kicker) > .cn-kicker + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-section-heading,
	.cn-section-heading-left
),
.cn-cta-band > div:has(> .cn-kicker) > .cn-kicker + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-section-heading,
	.cn-section-heading-left
),
.cn-cta-band > div:has(> .cn-kicker) > .cn-tag-row + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-section-heading,
	.cn-section-heading-left
) {
	margin-top: 0 !important;
}

/* Tag-row + badge: fallback when kicker is not the heading's direct sibling */
.cn-tag-row + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-section-heading,
	.cn-section-heading-left
) {
	margin-top: var(--cn-gap-small) !important;
}

:is(
	.cn-contact-method,
	.cn-category-card,
	.cn-product-card,
	:is(section, article).cn-card,
	.cn-card :is(div, header):has(> .cn-kicker),
	.cn-card :is(div, header):has(> .cn-tag-row .cn-kicker),
	.cn-panel-white,
	.cn-cta-band > div
) .cn-tag-row + :is(
	h1,
	h2,
	h3,
	h4,
	.cn-section-heading,
	.cn-section-heading-left
) {
	margin-top: 0 !important;
}

/* --- Product meta chips (match .cn-tag) ------------------- */
.cn-product-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.cn-product-meta li {
	display: inline-block;
	padding: 8px 14px;
	background-color: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-tag);
	color: var(--cn-color-text-main);
	font-size: var(--cn-font-size-tag);
	font-weight: 500;
	line-height: 1.2;
}

/* --- Conversion CTA band (accent-edge callout) ------------ */
.cn-cta-band {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
	gap: var(--cn-gap-large);
	align-items: center;
	padding: var(--cn-padding-card);
	background-color: var(--cn-color-accent-wash);
	border: 1px solid var(--cn-color-border-card);
	border-left: 5px solid var(--cn-color-accent);
	border-radius: var(--cn-radius-large);
	box-shadow: var(--cn-shadow-rest);
	box-sizing: border-box;
}

.cn-cta-band .cn-section-heading {
	margin-top: 0;
}

.cn-cta-band .cn-button-group {
	justify-content: flex-start;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

/* WA guide inside CTA band: stack below copy, never squeeze into side column */
.cn-cta-band:has(.cn-wa-next-steps) {
	grid-template-columns: 1fr;
	align-items: start;
}

.cn-cta-band .cn-wa-cta-block,
.cn-cta-band .cn-wa-next-steps {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

@media (max-width: 960px) {
	.cn-cta-band {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* Refinement sprint: card section rhythm */
.cn-section-full > .cn-card > .cn-section-heading-left:first-child,
.cn-section-full > section.cn-card > .cn-section-heading-left:first-child {
	margin-top: 0;
}

.cn-table-scroll .cn-table-clean {
	width: 100%;
	table-layout: fixed;
}

/* --- Trust strip ------------------------------------------ */
/* Deep-sea colour block — the first deliberate "rhythm break" against the
   surrounding neutral/white sections, part of the 2026-08-13 bold
   direction. All child text recoloured for dark-bg contrast (white on
   deep-sea 11.44:1, see BOLD COASTAL PALETTE token comment); was a pale
   sand-wash-to-bg-light gradient with dark text. */
.cn-trust-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(10px, 2vw, 14px);
	align-items: stretch;
	margin: clamp(20px, 4vw, 32px) 0;
	padding: clamp(18px, 3.5vw, 24px) clamp(14px, 3vw, 18px);
	background: linear-gradient(155deg, var(--cn-color-deep-sea) 0%, var(--cn-color-deep-sea-hover) 100%);
	border: 1px solid var(--cn-color-deep-sea-hover);
	border-radius: var(--cn-radius-medium);
}

.cn-trust-strip .cn-trust-item strong {
	color: #ffffff;
}

.cn-trust-strip .cn-trust-item strong::before {
	background-color: var(--cn-color-sand-solid);
}

.cn-trust-strip .cn-trust-item span {
	color: rgba(255, 255, 255, 0.78);
}

.cn-trust-item {
	padding: clamp(10px, 2vw, 14px);
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
}

.cn-trust-item strong {
	display: block;
	color: var(--cn-color-text-heading);
	font-size: var(--cn-font-size-label);
	font-weight: 700;
	line-height: 1.25;
}

/* Small accent mark above each proof point — same dot already used for
   list markers elsewhere (--cn-list-marker-size-accent / accent fill,
   see .cn-lead-checklist), just centred above text instead of inline
   before it, since trust items are centre-aligned. Text-only otherwise
   (no icon set in this project), so this is the cheapest way to give
   four flat stat labels a bit of rhythm. */
.cn-trust-item strong::before {
	content: "";
	display: block;
	width: var(--cn-list-marker-size-accent, 7px);
	height: var(--cn-list-marker-size-accent, 7px);
	margin: 0 auto 8px;
	border-radius: 50%;
	background-color: var(--cn-color-accent);
}

.cn-trust-item span {
	display: block;
	margin-top: 6px;
	color: var(--cn-color-text-muted);
	font-size: clamp(13px, 0.8rem, 14px);
	line-height: var(--cn-line-height-small);
}

/* --- Reassurance / proof / conversion helpers ------------- */
.cn-reassurance-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(10px, 2vw, 20px);
	margin: clamp(16px, 3vw, 24px) 0 0;
	padding: 0;
	list-style: none;
}

.cn-reassurance-strip li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cn-color-text-subtle);
	font-size: var(--cn-font-size-small);
	line-height: 1.35;
}

.cn-reassurance-icon {
	color: var(--cn-color-accent);
	font-weight: 700;
}

/* --- Phase 2: service area, pickup, WA next steps, cluster hubs --- */
.cn-service-area-strip {
	margin: clamp(16px, 3vw, 24px) 0 0;
	padding: clamp(12px, 2.5vw, 16px);
	background: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
}

.cn-service-area-strip__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 2vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-service-area-strip__list li {
	text-align: center;
}

.cn-service-area-strip__list strong {
	display: block;
	color: var(--cn-color-text-heading);
	font-size: var(--cn-font-size-label);
	font-weight: 700;
	line-height: 1.25;
}

/* Same accent mark as .cn-trust-item strong — identical shape (centred
   strong + span stat), same treatment for consistency. */
.cn-service-area-strip__list strong::before {
	content: "";
	display: block;
	width: var(--cn-list-marker-size-accent, 7px);
	height: var(--cn-list-marker-size-accent, 7px);
	margin: 0 auto 8px;
	border-radius: 50%;
	background-color: var(--cn-color-accent);
}

.cn-service-area-strip__list span {
	display: block;
	margin-top: 6px;
	color: var(--cn-color-text-muted);
	font-size: clamp(13px, 0.8rem, 14px);
	line-height: var(--cn-line-height-small);
}

.cn-pickup-location {
	margin-top: clamp(20px, 3vw, 28px);
	padding: clamp(14px, 2.5vw, 18px);
	background: linear-gradient(168deg, var(--cn-color-sand-wash) 0%, var(--cn-color-bg-light) 100%);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
}

.cn-pickup-location--compact {
	margin-top: clamp(16px, 3vw, 20px);
	padding: clamp(12px, 2vw, 14px);
}

.cn-pickup-location__title {
	margin: 0.5rem 0 0;
	font-size: var(--cn-font-size-h3);
	color: var(--cn-color-text-heading);
}

.cn-pickup-location__address {
	margin: 0.5rem 0 0;
	font-weight: 600;
	color: var(--cn-color-text-heading);
}

.cn-pickup-location__note,
.cn-pickup-location__maps {
	margin: 0.5rem 0 0;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	line-height: var(--cn-line-height-small);
}

.cn-wa-cta-block {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(10px, 2vw, 14px);
}

.cn-wa-next-steps {
	margin-top: clamp(10px, 2vw, 14px);
	padding: clamp(12px, 2.5vw, 16px);
	background: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
}

.cn-wa-next-steps--compact {
	margin-top: 0;
}

.cn-wa-next-steps__heading {
	margin: 0 0 0.75rem;
	font-weight: 700;
	color: var(--cn-color-text-heading);
}

.cn-wa-next-steps__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(14px, 2.5vw, 20px);
}

.cn-wa-next-steps__col {
	min-width: 0;
}

.cn-wa-next-steps__lead {
	margin: 0 0 0.5rem;
	font-size: var(--cn-font-size-label);
	font-weight: 700;
	color: var(--cn-color-text-heading);
}

.cn-wa-next-steps,
.cn-wa-next-steps * {
	hyphens: none;
	-webkit-hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
}

.cn-wa-next-steps__list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	line-height: var(--cn-line-height-small);
}

/* Never stack the WhatsApp guide under every catalog card CTA */
.cn-product-card .cn-wa-next-steps,
.cn-card-actions .cn-wa-next-steps,
.cn-subcard-actions .cn-wa-next-steps {
	display: none !important;
}

@media (min-width: 640px) {
	.cn-wa-next-steps__grid {
		grid-template-columns: repeat(2, minmax(12rem, 1fr));
	}
}

.cn-wa-next-steps__list--ordered {
	padding-left: 1.25rem;
}

.cn-cluster-hub-strip__lead {
	margin: 0 0 0.75rem;
	color: var(--cn-color-text-subtle);
	font-size: var(--cn-font-size-small);
	text-align: center;
}

.cn-cluster-hub-strip__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-cluster-hub-strip__link {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--cn-color-border-card);
	border-radius: 999px;
	background: var(--cn-color-bg-light);
	color: var(--cn-color-text-heading);
	font-size: var(--cn-font-size-small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--cn-transition-base), background-color var(--cn-transition-base), transform var(--cn-transition-base);
}

.cn-cluster-hub-strip__link:hover,
.cn-cluster-hub-strip__link:focus-visible {
	border-color: var(--cn-color-border-hover);
	background: var(--cn-color-accent-wash);
	transform: translateY(-1px);
}

/* Platform intelligence — graph links, accessories, bundles (cn-platform-intelligence.php) */
.cn-graph-links__group + .cn-graph-links__group {
	margin-top: 1.25rem;
}

.cn-graph-links__title,
.cn-accessory-strip__title,
.cn-bundle-suggestion__title,
.cn-problem-solutions__title {
	margin: 0 0 0.65rem;
	font-size: var(--cn-font-size-h3);
	color: var(--cn-color-text-heading);
}

.cn-graph-links__list,
.cn-accessory-strip__list,
.cn-bundle-suggestion__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cn-graph-links__list a,
.cn-accessory-strip__list a,
.cn-bundle-suggestion__list a {
	display: inline-flex;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--cn-color-border-card);
	border-radius: 999px;
	background: var(--cn-color-bg-light);
	color: var(--cn-color-text-heading);
	font-size: var(--cn-font-size-small);
	font-weight: 600;
	text-decoration: none;
}

.cn-accessory-strip__badge {
	font-size: var(--cn-font-size-micro);
	font-weight: 600;
	color: var(--cn-color-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cn-bundle-suggestion__cta,
.cn-problem-solutions__lead {
	color: var(--cn-color-text-subtle);
	font-size: var(--cn-font-size-small);
}

.cn-category-jump-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(16px, 3vw, 24px);
}

.cn-category-jump-nav a.cn-tag {
	text-decoration: none;
	transition: background-color var(--cn-transition-base), border-color var(--cn-transition-base), transform var(--cn-transition-base);
}

.cn-category-jump-nav a.cn-tag:hover,
.cn-category-jump-nav a.cn-tag:focus-visible {
	border-color: var(--cn-color-border-hover);
	background-color: var(--cn-color-accent-wash);
	transform: translateY(-1px);
}

.cn-advisory-panel {
	padding: clamp(18px, 3.5vw, 28px);
	background: linear-gradient(165deg, var(--cn-color-accent-wash) 0%, var(--cn-color-bg-card) 100%);
	border: 1px solid var(--cn-color-border-hover);
	border-radius: var(--cn-radius-medium);
}

.cn-advisory-panel--finder {
	padding: 0;
	background: transparent;
	border: 0;
}

.cn-advisory-panel--finder .cn-rental-finder--embed {
	margin: 0;
}

/* --- Rental Finder (guided decision tool) ---------------- */
.cn-rental-finder {
	margin: clamp(24px, 4vw, 40px) 0 0;
	padding: clamp(20px, 4vw, 32px);
	background: linear-gradient(165deg, var(--cn-color-accent-wash) 0%, var(--cn-color-bg-card) 55%);
	border: 1px solid var(--cn-color-border-hover);
	border-radius: var(--cn-radius-large);
	box-shadow: var(--cn-shadow-elevated-rest);
	box-sizing: border-box;
}

.cn-rental-finder--embed,
.cn-rental-finder--compact {
	margin: 0;
	padding: clamp(16px, 3vw, 24px);
	background: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-rest);
}

.cn-rental-finder__header {
	text-align: center;
	max-width: var(--cn-prose-max-width);
	margin-inline: auto;
}

.cn-rental-finder--embed .cn-rental-finder__header,
.cn-rental-finder--compact .cn-rental-finder__header {
	text-align: left;
	margin-inline: 0;
}

.cn-rental-finder__title {
	margin: 0 0 8px;
	font-size: var(--cn-font-size-h2);
	line-height: var(--cn-line-height-heading);
	color: var(--cn-color-text-heading);
}

.cn-rental-finder--embed .cn-rental-finder__title {
	font-size: var(--cn-font-size-h3);
}

.cn-rental-finder__subtitle {
	margin: 0 auto 20px;
	max-width: 42rem;
}

.cn-rental-finder__progress {
	margin: 0 0 16px;
	font-size: var(--cn-font-size-small);
	font-weight: 600;
	color: var(--cn-color-accent);
	text-align: center;
}

.cn-rental-finder__question {
	margin: 0 0 8px;
	font-size: var(--cn-font-size-h3);
	line-height: 1.35;
	color: var(--cn-color-text-heading);
	text-wrap: balance;
}

.cn-rental-finder__step-desc {
	margin: 0 0 20px;
	color: var(--cn-color-text-muted);
	text-wrap: balance;
}

.cn-rental-finder__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: var(--cn-gap-small);
	width: 100%;
}

.cn-rental-finder__option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-height: var(--cn-touch-target-min);
	padding: clamp(14px, 2.5vw, 18px);
	background: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-rest);
	cursor: pointer;
	text-align: left;
	transition:
		border-color var(--cn-duration-base) var(--cn-easing-standard),
		background-color var(--cn-duration-base) var(--cn-easing-standard),
		transform var(--cn-duration-base) var(--cn-easing-standard);
}

.cn-rental-finder__option-label {
	font-size: var(--cn-font-size-body);
	font-weight: 600;
	color: var(--cn-color-text-heading);
	line-height: 1.3;
}

.cn-rental-finder__option-hint {
	font-size: var(--cn-font-size-small);
	color: var(--cn-color-text-muted);
	line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
	.cn-rental-finder__option:hover,
	.cn-rental-finder__option:focus-visible {
		border-color: var(--cn-color-accent);
		background: var(--cn-color-accent-wash);
		transform: translateY(-1px);
	}
}

.cn-rental-finder__option:focus-visible {
	outline: 2px solid var(--cn-color-accent);
	outline-offset: 2px;
}

.cn-rental-finder__result-kicker {
	margin: 0 0 8px;
}

.cn-rental-finder__result-title {
	margin: 0 0 12px;
	font-size: var(--cn-font-size-h2);
	line-height: 1.25;
	color: var(--cn-color-text-heading);
	text-wrap: balance;
}

.cn-rental-finder__result-reason {
	margin: 0 0 16px;
	text-wrap: pretty;
}

.cn-rental-finder__why {
	margin: 0 0 20px;
	padding: clamp(12px, 2.5vw, 16px);
	background: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-small);
	text-align: left;
}

.cn-rental-finder__why-title {
	margin: 0 0 10px;
	font-size: var(--cn-font-size-label);
	font-weight: 600;
	color: var(--cn-color-text-heading);
}

.cn-rental-finder__why-list {
	margin: 0;
	padding: 0 0 0 1.15rem;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	line-height: 1.5;
}

.cn-rental-finder__why-list li + li {
	margin-top: 6px;
}

.cn-rental-finder__actions {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin-top: 4px;
}

.cn-rental-finder__actions .cn-button {
	justify-content: center;
	width: 100%;
	max-width: 100%;
}

.cn-rental-finder__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cn-gap-button);
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--cn-color-border-subtle);
}

.cn-rental-finder__start {
	display: flex;
	justify-content: center;
	padding-top: 8px;
}

.cn-rental-finder--embed .cn-rental-finder__start,
.cn-rental-finder--compact .cn-rental-finder__start {
	justify-content: flex-start;
}

.cn-rental-finder__noscript {
	display: block;
	margin-bottom: 16px;
}

@media (min-width: 640px) {
	.cn-rental-finder__actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.cn-rental-finder__actions .cn-button {
		width: auto;
		flex: 0 1 auto;
		min-width: min(100%, 12rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-rental-finder__option {
		transition: none;
		transform: none;
	}
}

@media (max-width: 921px) {
	.cn-rental-finder__options {
		grid-template-columns: 1fr;
	}

	.cn-rental-finder__actions,
	.cn-rental-finder__actions .cn-button {
		width: 100%;
	}
}

/* --- Intelligent Rental Search (typeahead) --------------- */
.cn-rental-search {
	margin: clamp(20px, 3.5vw, 32px) 0 0;
	padding: clamp(20px, 3.5vw, 28px);
	background: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-large);
	box-shadow: var(--cn-shadow-elevated-rest);
	box-sizing: border-box;
}

.cn-rental-search--embed {
	margin: 0;
	padding: clamp(16px, 3vw, 24px);
	box-shadow: var(--cn-shadow-rest);
}

.cn-rental-search__header {
	text-align: left;
	max-width: none;
	margin: 0 0 16px;
}

.cn-rental-search__title {
	margin: 0;
	font-size: var(--cn-font-size-h2);
	line-height: var(--cn-line-height-heading);
	color: var(--cn-color-text-heading);
}

.cn-rental-search__subtitle {
	margin: 8px 0 0;
}

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

.cn-rental-search__combobox {
	position: relative;
}

.cn-rental-search__field {
	position: relative;
	display: flex;
	align-items: center;
}

.cn-rental-search__icon {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	pointer-events: none;
	opacity: 0.55;
	background:
		radial-gradient(circle at 38% 38%, currentColor 0 2px, transparent 2.5px),
		conic-gradient(from 225deg at 50% 50%, transparent 0 270deg, currentColor 270deg 360deg);
	mask: none;
	color: var(--cn-color-text-muted);
}

.cn-rental-search__input {
	padding-left: 46px !important;
	padding-right: 18px !important;
	min-height: 52px;
	font-size: clamp(16px, 0.95rem + 0.35vw, 18px);
	border-radius: var(--cn-radius-medium);
	background: var(--cn-color-bg-light);
}

.cn-rental-search__input:focus-visible {
	transform: none;
	box-shadow: var(--cn-shadow-focus-ring);
}

.cn-rental-search__loading {
	position: absolute;
	right: 16px;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(var(--cn-color-accent-rgb), 0.18);
	border-top-color: var(--cn-color-accent);
	border-radius: 50%;
}

.cn-rental-search__loading[hidden] {
	display: none !important;
}

.cn-rental-search__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: min(60vh, 420px);
	overflow: auto;
	background: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-hover);
	border-radius: var(--cn-radius-medium);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
	-webkit-overflow-scrolling: touch;
}

.cn-rental-search__list {
	list-style: none;
	margin: 0;
	padding: 6px;
}

.cn-rental-search__option {
	margin: 0;
}

.cn-rental-search__option-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 14px;
	min-height: 48px;
	border-radius: calc(var(--cn-radius-medium) - 2px);
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}

.cn-rental-search__option-title {
	font-weight: 600;
	color: var(--cn-color-text-heading);
	line-height: 1.3;
}

.cn-rental-search__option-subtitle {
	font-size: var(--cn-font-size-small);
	color: var(--cn-color-text-muted);
	line-height: 1.35;
}

.cn-rental-search__option--active .cn-rental-search__option-link,
.cn-rental-search__option-link:focus-visible {
	background: var(--cn-color-accent-wash);
	outline: 2px solid var(--cn-color-accent);
	outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
	.cn-rental-search__option-link:hover {
		background: var(--cn-color-accent-wash);
	}
}

.cn-rental-search__empty {
	padding: 16px;
	text-align: center;
}

.cn-rental-search__empty-hint {
	margin: 0 0 14px;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	line-height: 1.45;
}

.cn-rental-search__empty-title {
	margin: 0 0 12px;
	font-weight: 600;
	color: var(--cn-color-text-heading);
}

.cn-rental-search__examples {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.cn-rental-search__example {
	appearance: none;
	border: 1px solid var(--cn-color-border-subtle);
	background: var(--cn-color-bg-light);
	color: var(--cn-color-text-main);
	border-radius: 999px;
	padding: 8px 14px;
	min-height: 40px;
	font: inherit;
	font-size: var(--cn-font-size-small);
	cursor: pointer;
	transition:
		border-color var(--cn-duration-moderate) var(--cn-easing-mechanical),
		background-color var(--cn-duration-moderate) var(--cn-easing-standard);
}

.cn-rental-search__example:focus-visible {
	outline: 2px solid var(--cn-color-accent);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.cn-rental-search__example:hover {
		border-color: rgba(var(--cn-color-accent-rgb), 0.35);
		background: var(--cn-color-accent-wash);
	}
}

/* --- CRO: category picker (catalog 5-second scan) -------- */
.cn-category-picker {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--cn-gap-card);
	align-items: stretch;
}

.cn-category-picker__card {
	display: flex;
	flex-direction: column;
	gap: var(--cn-gap-small);
	padding: var(--cn-padding-card);
	background: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-large);
	border-top: 4px solid var(--cn-color-border-subtle);
	box-shadow: var(--cn-shadow-rest);
}

.cn-category-picker__card--strumenti { border-top-color: #5b7c99; }
.cn-category-picker__card--eventi { border-top-color: var(--cn-color-accent); }
.cn-category-picker__card--sport { border-top-color: #2a9d8f; }

.cn-category-picker__card--featured {
	background: linear-gradient(168deg, var(--cn-color-accent-wash) 0%, var(--cn-color-bg-card) 100%);
	box-shadow: var(--cn-shadow-elevated-rest);
}

.cn-category-picker__title {
	margin: 0;
	font-size: var(--cn-font-size-h3);
	line-height: var(--cn-line-height-heading);
}

.cn-category-picker__title a {
	color: var(--cn-color-text-heading);
	text-decoration: none;
}

.cn-category-picker__count {
	margin: 0;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	font-weight: 600;
}

.cn-category-picker__card .cn-best-for {
	flex: 1 1 auto;
	min-height: 2.85em;
	margin-top: 0;
	font-size: clamp(13px, 0.8rem + 0.15vw, 14px);
	line-height: 1.45;
}

.cn-category-picker__card .cn-card-actions {
	margin-top: auto;
	flex-direction: column;
	align-items: stretch;
}

.cn-category-picker__card .cn-card-actions .cn-button {
	justify-content: center;
	width: 100%;
}

@media (min-width: 720px) {
	.cn-category-picker {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Catalog intro: event helper — balanced lines, no mid-phrase breaks */
.cn-intro-helper {
	margin: 0;
	text-align: center;
	text-wrap: balance;
}

.cn-intro-helper__lead {
	margin: 0 0 8px;
	font-size: var(--cn-font-size-small);
	font-weight: 600;
	color: var(--cn-color-text-muted);
	line-height: 1.45;
}

.cn-intro-helper__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	font-size: var(--cn-font-size-small);
	line-height: 1.45;
}

.cn-intro-helper__links a {
	font-weight: 600;
}

.cn-intro-helper__sep {
	color: var(--cn-color-text-muted);
	font-weight: 400;
	user-select: none;
}

/* Progressive disclosure — intro helper (NN/g choice overload) */
@media (max-width: 921px) {
	.cn-intro-helper__links.cn-intro-helper__links--collapsible:not(.cn-intro-helper__links--expanded)
		.cn-intro-helper__link--extra,
	.cn-intro-helper__links.cn-intro-helper__links--collapsible:not(.cn-intro-helper__links--expanded)
		.cn-intro-helper__sep--extra {
		display: none;
	}
}

.cn-intro-helper__more {
	margin-top: 10px;
	width: 100%;
	max-width: 280px;
}

/* Collapsed secondary scan path after lab tool */
.cn-scan-secondary {
	border-style: dashed;
	border-color: rgba(var(--cn-color-text-muted-rgb), 0.35);
}

.cn-scan-more {
	margin-top: 12px;
	border: 1px solid rgba(var(--cn-color-text-muted-rgb), 0.2);
	border-radius: var(--cn-radius-medium);
	background: var(--cn-color-bg-subcard, #faf9f7);
}

.cn-scan-more__summary {
	padding: 12px 16px;
	cursor: pointer;
	font-weight: 600;
	font-size: var(--cn-font-size-small);
	color: var(--cn-color-text-muted);
	list-style: none;
}

.cn-scan-more__summary::-webkit-details-marker {
	display: none;
}

.cn-scan-more[open] .cn-scan-more__summary {
	border-bottom: 1px solid rgba(var(--cn-color-text-muted-rgb), 0.15);
}

.cn-scan-more .cn-lead-checklist {
	margin: 12px 16px 16px;
}

@media (max-width: 921px) {
	.cn-section-full > .cn-card[data-lab-prototype] + .cn-card,
	.cn-section-full > .cn-card[data-lab-id] + .cn-card.cn-scan-secondary {
		margin-top: 12px !important;
	}

	.cn-section-full > .cn-card.cn-mt-24 + .cn-card.cn-mt-24,
	.cn-section-full > .cn-card.cn-mt-40 + .cn-card {
		margin-top: var(--cn-gap-card) !important;
	}
}

/* Homepage category grid — equal card footers */
#categorie .cn-category-card .cn-best-for {
	flex: 1 1 auto;
	min-height: 2.85em;
	margin-top: 0;
}

#categorie .cn-category-card .cn-card-actions {
	margin-top: auto;
	flex-direction: column;
	align-items: stretch;
}

#categorie .cn-category-card .cn-card-actions .cn-button {
	justify-content: center;
	width: 100%;
}

#categorie .cn-subcard > .cn-best-for {
	min-height: 2.5em;
}

/* --- CRO: trust panel (before actions) -------------------- */
.cn-trust-panel {
	padding: clamp(12px, 2.5vw, 16px);
	background: var(--cn-color-sand-wash);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-medium);
}

.cn-trust-panel--compact {
	padding: clamp(10px, 2vw, 12px);
}

.cn-trust-panel__heading {
	margin: 0 0 10px;
	font-size: var(--cn-font-size-label);
	font-weight: 700;
	color: var(--cn-color-text-heading);
}

.cn-trust-panel__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-trust-panel__list li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cn-trust-panel__list strong {
	font-size: var(--cn-font-size-small);
	color: var(--cn-color-text-heading);
	line-height: 1.25;
}

.cn-trust-panel__list span {
	font-size: var(--cn-font-size-caption);
	color: var(--cn-color-text-muted);
	line-height: 1.3;
}

/* --- CRO: lead intent chips ----------------------------- */
.cn-lead-intent-chips ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cn-lead-intent-chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	border: 1px solid var(--cn-color-border-card);
	border-radius: 999px;
	background: var(--cn-color-bg-card);
	color: var(--cn-color-text-heading);
	font-size: var(--cn-font-size-small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--cn-duration-base) var(--cn-easing-standard), background-color var(--cn-duration-base) var(--cn-easing-standard);
}

.cn-lead-intent-chip--help {
	border-color: var(--cn-color-accent);
	background: var(--cn-color-accent-wash);
}

@media (hover: hover) and (pointer: fine) {
	.cn-lead-intent-chip:hover,
	.cn-lead-intent-chip:focus-visible {
		border-color: var(--cn-color-accent);
		background: var(--cn-color-accent-wash);
	}
}

/* --- CRO: inline action band ---------------------------- */
.cn-action-band {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr);
	gap: var(--cn-gap-medium);
	align-items: center;
	padding: clamp(14px, 2.5vw, 20px);
	background: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-medium);
}

.cn-action-band__title {
	margin: 0;
	font-size: var(--cn-font-size-label);
	font-weight: 700;
	color: var(--cn-color-text-heading);
}

.cn-action-band__desc {
	margin: 6px 0 0;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	line-height: 1.4;
}

.cn-action-band .cn-button-group {
	justify-content: flex-end;
}

/* --- CRO: promise band (contatti) ----------------------- */
.cn-promise-band {
	padding: clamp(20px, 4vw, 32px);
	text-align: center;
	background: linear-gradient(165deg, var(--cn-color-accent-wash) 0%, var(--cn-color-bg-card) 100%);
	border: 1px solid var(--cn-color-border-hover);
	border-radius: var(--cn-radius-large);
}

.cn-promise-band__title {
	margin: 0;
	font-size: clamp(1.15rem, 2.5vw, 1.45rem);
	line-height: var(--cn-line-height-heading);
	color: var(--cn-color-text-heading);
}

.cn-promise-band .cn-button-group {
	justify-content: center;
}

/* --- CRO: inquiry checklist panel ----------------------- */
.cn-inquiry-checklist-panel {
	padding: clamp(16px, 3vw, 22px);
	background: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-medium);
}

.cn-inquiry-checklist-panel__title {
	margin: 0;
	font-size: var(--cn-font-size-h3);
	line-height: var(--cn-line-height-heading);
	color: var(--cn-color-text-heading);
}

/* --- CRO: form + trust split (contatti) ----------------- */
.cn-form-trust-split {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
	gap: var(--cn-gap-large);
	align-items: start;
	margin-top: clamp(16px, 3vw, 24px);
}

.cn-whatsapp-action-group .cn-button-group {
	flex-wrap: wrap;
}

/* --- CRO: category section separation (catalog) --------- */
.cn-category-section {
	border-top: 3px solid var(--cn-color-border-subtle);
}

.cn-category-section--eventi { border-top-color: color-mix(in srgb, var(--cn-color-accent) 55%, transparent); }
.cn-category-section--sport { border-top-color: color-mix(in srgb, #2a9d8f 55%, transparent); }
.cn-category-section--strumenti { border-top-color: color-mix(in srgb, #5b7c99 55%, transparent); }

.cn-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--cn-gap-card);
	align-items: stretch;
}

.cn-product-grid > .cn-product-card {
	height: 100%;
}

.cn-product-grid > .cn-product-card .cn-card-actions,
.cn-product-grid > .cn-product-card .cn-subcard-actions {
	margin-top: auto;
}

@media (max-width: 768px) {
	.cn-action-band,
	.cn-form-trust-split {
		grid-template-columns: 1fr;
	}

	.cn-action-band .cn-button-group {
		justify-content: flex-start;
	}
}

.cn-subcard-actions {
	margin-top: clamp(12px, 2vw, 16px);
	flex-wrap: wrap;
}

.cn-subcard-actions .cn-button {
	flex: 1 1 auto;
	min-width: min(100%, 9.5rem);
}

.cn-best-for {
	margin-top: 8px;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
}

.cn-best-for strong {
	color: var(--cn-color-text-heading);
}

.cn-channel-compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(12px, 2.5vw, 18px);
	margin-top: clamp(20px, 3vw, 28px);
}

.cn-channel-compare article {
	padding: clamp(14px, 2.5vw, 18px);
	background: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-small);
}

/* WhatsApp is always the first channel here (hand-authored content —
   confirmed consistent across all 6 languages: IT/EN/FR/NL/DE/ES) —
   matches the site's documented WhatsApp-primary conversion model
   (ADR 004), so it earns the same accent-wash emphasis used for the
   "help me choose" chip elsewhere, rather than reading as equal to
   phone/email. This is a positional selector standing in for a business
   rule with no semantic hook in the markup (no class/data-attribute
   marks the WhatsApp card as such) — if a future content edit in any
   language ever reorders these three <article> cards, the emphasis
   silently follows whichever card ends up first, not WhatsApp specifically.
   No CSS-only fix for that; would need a class/data-attribute added at
   the content/template level. */
.cn-channel-compare article:first-child {
	background: linear-gradient(165deg, var(--cn-color-accent-wash) 0%, var(--cn-color-bg-light) 100%);
	border-color: var(--cn-color-accent);
}

.cn-channel-compare article:first-child .cn-channel-compare__title {
	color: var(--cn-color-accent);
}

.cn-channel-compare h3,
.cn-channel-compare .cn-channel-compare__title {
	margin: 0 0 8px;
	font-size: var(--cn-font-size-label);
}

.cn-channel-compare .cn-channel-compare__title {
	font-weight: 700;
	color: var(--cn-color-text-heading);
}

.cn-cluster-nav {
	padding: clamp(16px, 3vw, 24px);
	border-radius: var(--cn-radius-medium);
}

.cn-cluster-nav .cn-list-group--links {
	margin: 0;
}

.cn-channel-compare p {
	margin: 0;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	line-height: 1.45;
}

.cn-mobile-cta-bar {
	--cn-mobile-cta-bar-offset: 5.5rem;
	--cn-mobile-dock-scroll-gap: 8px;
	position: fixed;
	inset-inline: clamp(12px, 3vw, 20px);
	inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-elevated-hover);
}

.cn-mobile-cta-bar[hidden] {
	display: none !important;
}

.cn-mobile-cta-bar__copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.cn-mobile-cta-bar__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
}

.cn-mobile-cta-bar__actions .cn-button {
	min-block-size: var(--cn-touch-target-min);
	min-inline-size: var(--cn-touch-target-min);
	white-space: nowrap;
}

.cn-mobile-cta-bar__copy strong {
	color: var(--cn-color-text-heading);
	font-size: var(--cn-font-size-label);
	line-height: 1.25;
}

.cn-mobile-cta-bar__copy span {
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	line-height: 1.3;
}

/* Mobile dock coordination — Joinchat swap, safe-area reserve */
@media (max-width: 921px) {
	html.cn-mobile-cta-active:not(.cn-cookie-banner-open) .joinchat {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	/* Reserve the dock's height so the floating bar never sits on top of
	   real content. #content alone is not enough: both footers are
	   siblings of it inside .site, so at maximum scroll the bar covered
	   the last rows of .cn-site-footer -- the "Contatti" link and the
	   "Gestisci cookie" button -- with no way left to scroll them clear.
	   .cn-site-footer is the last element in the body, so reserving there
	   protects the true bottom of the page. The offset var is written by
	   updateBarOffset() in cn-interactions.js as innerHeight - bar.top,
	   i.e. bar height plus its bottom inset; 5.5rem is only the
	   before-JS fallback. */
	html.cn-mobile-cta-active:not(.cn-cookie-banner-open) .site-content,
	html.cn-mobile-cta-active:not(.cn-cookie-banner-open) #content {
		padding-bottom: calc(var(--cn-mobile-cta-bar-offset, 5.5rem) + env(safe-area-inset-bottom, 0px));
	}

	html.cn-mobile-cta-active:not(.cn-cookie-banner-open) .cn-site-footer {
		padding-bottom: calc(var(--cn-mobile-cta-bar-offset, 5.5rem) + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 360px) {
	.cn-mobile-cta-bar__copy span {
		display: none;
	}
}

html.cn-cookie-banner-open .cn-mobile-cta-bar,
html[data-cn-consent-functional="denied"] .cn-mobile-cta-bar {
	display: none !important;
}

@media (min-width: 922px) {
	.cn-mobile-cta-bar {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.cn-mobile-cta-active:not(.cn-cookie-banner-open) .joinchat {
		transition: none;
	}
}

/* --- FAQ disclosures (native details/summary) ------------- */
.cn-faq {
	display: flex;
	flex-direction: column;
	gap: var(--cn-gap-small);
}

.cn-faq details {
	background-color: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-rest);
	overflow: hidden;
	transition:
		box-shadow var(--cn-duration-base) var(--cn-easing-standard),
		border-color var(--cn-duration-base) var(--cn-easing-standard);
}

@media (hover: hover) and (pointer: fine) {
	.cn-faq details:hover {
		border-color: var(--cn-color-border-hover);
		box-shadow: var(--cn-shadow-hover-panel);
	}
}

.cn-faq summary {
	cursor: pointer;
	padding: clamp(16px, 3vw, 20px) clamp(18px, 4vw, 24px);
	color: var(--cn-color-text-heading);
	font-weight: 700;
	font-size: var(--cn-font-size-label);
	line-height: 1.4;
	list-style: none;
	user-select: none;
}

.cn-faq summary::-webkit-details-marker {
	display: none;
}

.cn-faq summary::marker {
	content: "";
}

.cn-faq summary:focus-visible {
	outline: none;
	box-shadow: var(--cn-shadow-focus-ring);
	border-radius: var(--cn-radius-small);
}

.cn-faq details[open] summary {
	color: var(--cn-color-accent);
}

.cn-faq details > :not(summary) {
	margin: 0;
	padding: 0 clamp(18px, 4vw, 24px) clamp(16px, 3vw, 20px);
	color: var(--cn-color-text-main);
	line-height: var(--cn-line-height-body);
}

/* Explicit answer wrapper: survives WordPress content filters and
   matches the padded FAQ body used on hub pages. */
.cn-faq-answer {
	margin: 0;
	padding: 0 clamp(18px, 4vw, 24px) clamp(16px, 3vw, 20px);
	color: var(--cn-color-text-main);
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
}

.cn-faq-answer p {
	margin: 0;
}

.cn-faq-answer .cn-button-group,
.cn-faq-answer .cn-mt-16 {
	margin-top: 16px;
}

/* --- Contact-method emphasis ------------------------------ */
.cn-contact-method[data-primary="true"] {
	background-color: var(--cn-color-accent-wash);
	border-color: var(--cn-color-border-hover);
	border-left: 5px solid var(--cn-color-accent);
}

.cn-contact-method address {
	font-style: normal;
	font-weight: 600;
	color: var(--cn-color-text-heading);
}

.cn-contact-method address a {
	font-weight: 600;
}

/* --- Lead checklist --------------------------------------- */
.cn-lead-checklist {
	display: flex;
	flex-direction: column;
	gap: var(--cn-gap-small);
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.cn-lead-checklist li {
	position: relative;
	min-width: 0;
	padding:
		var(--cn-list-item-pad-y)
		var(--cn-list-item-pad-end)
		var(--cn-list-item-pad-y)
		var(--cn-list-text-inset-accent);
	color: var(--cn-color-text-main);
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
	list-style: none;
}

.cn-lead-checklist li::marker {
	content: "";
}

.cn-lead-checklist li::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	left: var(--cn-list-marker-inset);
	top: calc(var(--cn-list-item-pad-y) + 0.65em);
	transform: translateY(-50%);
	width: var(--cn-list-marker-size-accent);
	height: var(--cn-list-marker-size-accent);
	border-radius: 50%;
	background-color: var(--cn-color-accent);
	opacity: 1;
}

.cn-lead-checklist strong {
	color: var(--cn-color-text-heading);
	font-weight: 700;
}

/* --- Responsive behavior ---------------------------------- */
@media (max-width: 781px) {
	.cn-cta-band {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.cn-card-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cn-card-actions .cn-button,
	.cn-cta-band .cn-button {
		width: 100%;
	}

	.cn-cta-band .cn-button-group {
		width: 100%;
	}
}

/* =========================================================
   COGNITIVE PACING UTILITIES
   Layer-cake subheadings, isolation panels, asymmetric split
   layouts and pull-quotes. Token-driven so they inherit the
   same elegant spacing, color and shadow language as the rest
   of the cn- system. Grids use minmax(0, …) to stay inside the
   white container (no breakouts, no horizontal sliders).
========================================================= */

/* Spacing helpers — extend the existing cn-mt-40 scale. */
.cn-mt-16 { margin-top: 16px; }
.cn-mt-24 { margin-top: 24px; }
.cn-mt-32 { margin-top: 32px; }

/* Layer-cake subheading: a quiet, benefit-driven eyebrow that
   lets rapid scrollers grasp the value from headings alone. */
.cn-text-muted {
	color: var(--cn-color-text-muted);
	font-weight: 600;
}

h3.cn-text-muted,
h4.cn-text-muted {
	margin: 0 0 12px;
	font-size: var(--cn-font-size-label);
	line-height: 1.35;
	letter-spacing: 0;
}

.cn-text-small {
	font-size: var(--cn-font-size-small);
	line-height: var(--cn-line-height-small);
	color: var(--cn-color-text-muted);
}

h4.cn-text-small {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--cn-color-text-muted);
}

/* Isolation panel: a calm, low-contrast surface that gives the
   eye a designated place to rest and focus. */
.cn-panel-muted {
	padding: clamp(20px, 4vw, 30px);
	background-color: var(--cn-color-bg-light);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-rest);
	box-sizing: border-box;
}

.cn-panel-muted > *:last-child {
	margin-bottom: 0 !important;
}

/* Alert callout for urgent operational notices. */
.cn-panel-alert {
	border-color: var(--cn-color-alert) !important;
	background-color: var(--cn-color-alert-bg) !important;
	text-align: center;
}

.cn-panel-alert p {
	margin: 0;
	color: var(--cn-color-alert);
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
}

.cn-panel-alert a {
	color: var(--cn-color-alert);
	font-weight: 600;
}

/* Contact Form 7 — full-width panel (not squeezed in a split column). */
.cn-form-panel {
	width: 100%;
	max-width: min(100%, 40rem);
	margin-top: var(--cn-gap-medium);
	margin-inline: auto;
	padding: clamp(20px, 4vw, 28px);
	background-color: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-rest);
	box-sizing: border-box;
}

#modulo-contatti {
	text-align: center;
}

#modulo-contatti .cn-section-heading-left,
#modulo-contatti .cn-desc {
	text-align: center;
	margin-inline: auto;
}

#modulo-contatti .cn-desc {
	max-width: var(--cn-prose-max-width);
}

#modulo-contatti .cn-form-panel {
	text-align: left;
}

.cn-form-panel .wpcf7,
.cn-form-panel .wpcf7 form {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Ensure labels have consistent rhythm and weight */
.cn-form-panel .wpcf7 form label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: var(--cn-font-size-body);
}

.cn-form-panel .wpcf7 form > p {
	margin-bottom: var(--cn-margin-bottom-para);
}

/* Premium input styling */
.cn-form-panel .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.cn-form-panel textarea.wpcf7-form-control {
	width: 100%;
	max-width: 100%;
	padding: 14px 16px;
	border-radius: var(--cn-radius-small);
	border: 1px solid rgba(0,0,0,0.1);
	background-color: var(--cn-color-bg-subcard);
	font-family: inherit;
	font-size: max(16px, var(--cn-font-size-body));
	box-sizing: border-box;
	transition: 
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.cn-form-panel .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.cn-form-panel textarea.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--cn-color-accent);
	box-shadow: 0 0 0 3px rgba(35, 111, 243, 0.15); /* Fallback blue shadow */
	background-color: #ffffff;
}

/* Checkbox alignment */
.cn-form-panel .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	margin-left: 0;
}

.cn-form-panel .wpcf7-list-item input[type="checkbox"] {
	margin-top: 4px;
	margin-right: 8px;
}

.cn-form-panel .wpcf7-list-item-label {
	font-weight: 400;
}

/* Submit button */
.cn-form-panel .wpcf7-submit {
	margin-top: 16px;
	padding: 16px 32px;
	background-color: var(--cn-color-accent);
	color: #ffffff;
	border: none;
	border-radius: var(--cn-radius-tag);
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	font-size: var(--cn-font-size-body);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.cn-form-panel .wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Asymmetric zig-zag split: ~60% content + ~40% media/quote. */
.cn-split {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--cn-gap-large);
	align-items: start;
}

.cn-split > * {
	min-width: 0;
}

.cn-split-reverse > :first-child {
	order: 2;
}

@media (max-width: 781px) {
	.cn-split {
		grid-template-columns: 1fr;
	}

	.cn-split-reverse > :first-child {
		order: 0;
	}
}

/* Pull-quote: an oversized, isolated emphasis statement. */
.cn-pullquote {
	margin: 0;
	padding: clamp(20px, 4vw, 28px) clamp(22px, 4vw, 32px);
	background-color: var(--cn-color-accent-wash);
	border-left: 5px solid var(--cn-color-accent);
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-rest);
}

.cn-pullquote p {
	margin: 0;
	color: var(--cn-color-text-heading);
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	font-weight: 600;
	line-height: 1.4;
}

/* =========================================================
   PHASE 4 — CHOICE ARCHITECTURE & CONVERSION
   Token-driven utilities that fix Hick's Law (nested
   sub-cards), apply the Von Restorff effect (featured card),
   the Endowed Progress effect (step indicator), micro-
   persuasion tags, and a sticky mobile conversion bar.
   No breakouts: grids use minmax(min(100%, …)).
========================================================= */

/* Sticky mobile conversion bar — disabled site-wide.
   Joinchat provides the floating WhatsApp CTA; showing this bar too
   stacked two controls in the same corner on small screens. Markup may
   remain in legacy page HTML; CSS keeps it hidden. */
.cn-bottom-bar {
	display: none !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Left-aligned section heading for parent category cards. */
.cn-section-heading-left {
	margin-top: 6px;
	margin-bottom: clamp(10px, 2vw, 16px);
	font-size: var(--cn-font-size-h2);
	font-weight: 700;
	line-height: var(--cn-line-height-heading);
	letter-spacing: var(--cn-letter-spacing-tight);
	color: var(--cn-color-text-heading);
	text-align: left;
}

/* --- Von Restorff: the one card that breaks the pattern --- */
.cn-card-featured {
	position: relative;
	border: 2px solid var(--cn-color-accent) !important;
	background-color: var(--cn-color-accent-wash) !important;
	box-shadow: var(--cn-shadow-active);
}

/* Coastal accent bar — purely additive (new pseudo-element, properties no
   other rule touches) so it can't lose a cascade fight with the competing
   unlayered .cn-card-featured background/border declarations further down
   the file; it just paints on top regardless of which of those wins. */
.cn-card-featured::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 6px;
	border-radius: var(--cn-radius-large) var(--cn-radius-large) 0 0;
	/* Was accent -> sea-wash -> sand-wash (pale). Deepened into the sunset
	   trio (matches #hero) for the 2026-08-13 bold direction — thicker bar
	   too (4px -> 6px) so it reads at a glance, not just up close. */
	background-image: var(--cn-gradient-sunset);
}

/* Platinum frame (2026-08-15, "premium, silver to platinum" direction) —
   featured = premium, so the natural mapping is a metallic frame, not
   just a coloured top bar. Same purely-additive technique as the accent
   bar above: a new pseudo-element with properties nothing else touches,
   so it can't lose a cascade fight regardless of which competing
   .cn-card-featured background/border rule wins. isolation:isolate on
   the card (added below) contains this element's z-index:-1 to just
   behind the card itself, not the wrong ancestor. Sits 2px outside the
   card's own edge so it reads as a metal frame, not a background tint —
   deliberately NOT the border-image / double-background-gradient
   technique (border-image ignores border-radius; double-background
   would mean overriding .cn-card-featured's own background entirely,
   fighting its existing !important background-color declaration for no
   reason when this achieves the same visual result additively). */
.cn-card-featured {
	isolation: isolate;
}

.cn-card-featured::after {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: calc(var(--cn-radius-large) + 2px);
	background: var(--cn-gradient-platinum);
}

/* Bento accent: let the featured card claim extra width on
   wide screens so the eye lands on it first. */
@media (min-width: 880px) {
	.cn-grid-auto > .cn-span-2 {
		grid-column: span 2;
	}
}

/* --- Micro-persuasion tags (social proof / scarcity) --- */
.cn-tag-alert,
.cn-tag-success {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	max-width: 100%;
	padding: 5px 12px;
	border-radius: var(--cn-radius-pill);
	font-size: var(--cn-font-size-tag);
	font-weight: 700;
	line-height: var(--cn-line-height-ui);
	letter-spacing: var(--cn-letter-spacing-wide);
	box-sizing: border-box;
}

.cn-tag-alert {
	background-color: var(--cn-color-accent);
	color: #ffffff;
	border: 1px solid var(--cn-color-accent);
}

.cn-tag-success {
	background-color: #e7f6ee;
	color: #1b7a45;
	border: 1px solid #b7e3c8;
}

.cn-tag-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Custom-layout pages: Astra's entry-title H1 is disabled in functions.php
   (front page + any page that supplies its own .cn-hero-heading) so the hero
   provides the single H1. Hide the now-empty header wrapper so it leaves no
   stray spacing above the hero. Astra flags such headers with .ast-no-title. */
.home .ast-article-single > .entry-header,
.ast-article-single > .entry-header.ast-no-title {
	display: none;
}

/* --- Hick's Law: compact nested sub-cards inside a parent ---
   Equal-height rows: each row is as tall as the subcard with the most
   text; siblings stretch to match (CSS Grid, all modern browsers).
   Parent flex cards keep flex:0 0 auto on the subgrid so rows never
   inflate to the full viewport. */
.cn-subgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--cn-gap-small);
	align-items: stretch;
	align-content: start;
	width: 100%;
	height: auto;
	min-height: 0;
	flex: 0 0 auto;
	box-sizing: border-box;
}

@container cn-stage (min-width: 30rem) {
	.cn-subgrid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	}
}

@container cn-stage (min-width: 48rem) {
	.cn-subgrid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	}

	/* Exactly three subcards: keep equal columns (avoids lone third card stretching) */
	.cn-subgrid:has(> .cn-subcard:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cn-subcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	padding: clamp(14px, 2vw, 18px);
	background-color: var(--cn-color-bg-subcard);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
	box-sizing: border-box;
	box-shadow: none;
	transition:
		border-color var(--cn-duration-base) var(--cn-easing-standard),
		background-color var(--cn-duration-base) var(--cn-easing-standard);
}

/* Stretch to the tallest card in the same grid row (content-defined row height) */
.cn-subgrid > .cn-subcard {
	align-self: stretch;
	height: 100%;
	min-height: 100%;
}

/* Card content always hugs the heading at the top. Only a genuine
   action row (button group / card actions) is pushed to the bottom so
   CTAs line up across cards of unequal height. Targeting the action
   containers explicitly avoids the old bug where a bare text node made
   the heading itself the last element child and inherited margin-top:auto
   (which vertically centred short cards such as "Idropulitrici"). */
.cn-subcard > .cn-button-group:last-child,
.cn-subcard > .cn-card-actions:last-child {
	margin-top: auto;
}

.cn-subcard h3,
.cn-subcard h4 {
	margin: 0;
	font-size: var(--cn-font-size-h3);
	line-height: 1.3;
	color: var(--cn-color-text-heading);
}

.cn-subcard h3 a,
.cn-subcard h4 a {
	color: var(--cn-color-text-heading);
	text-decoration: none;
	transition: color var(--cn-duration-base) var(--cn-easing-standard);
}

.cn-subcard p {
	margin: 0;
	flex: 0 0 auto;
	color: var(--cn-color-text-main);
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
}

/* WP autop sometimes leaves orphan punctuation nodes in subcards */
.cn-subcard > p:empty,
.cn-subcard > p:blank {
	display: none;
	margin: 0;
	padding: 0;
}

.cn-subcard > p:last-child:has(a:last-child) {
	text-wrap: pretty;
}

/* Text stays at the top; optional action rows pin to the bottom */
.cn-subgrid > .cn-subcard > h3,
.cn-subgrid > .cn-subcard > h4 {
	flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
	.cn-subcard:hover {
		border-color: var(--cn-color-border-hover);
		background-color: #f8f7f5;
		box-shadow: none;
	}

	/* Nested subcards: no lift — avoids overlapping parent/footer cards */
	.cn-subgrid .cn-subcard:hover,
	.cn-subgrid .cn-subcard.cn-hover-lift:hover {
		transform: none;
		z-index: auto;
	}

	.cn-subcard h3 a:hover,
	.cn-subcard h4 a:hover {
		color: var(--cn-color-accent);
	}
}

/* Compact action button for nested / inline contexts. */
.cn-button-small {
	padding: 9px 18px;
	min-height: 44px;
	font-size: var(--cn-font-size-ui-min);
	line-height: var(--cn-line-height-ui);
}

/* Compact stays compact for mouse users; fingers get the 48px standard. */
@media (pointer: coarse) {
	.cn-button-small {
		min-height: var(--cn-touch-target-min, 48px);
	}
}

/* --- Endowed Progress: 2-step funnel indicator ---
   Uses <div> elements (not <ol>/<li>) so theme list styles can
   never add a native marker next to our custom step number. */
.cn-progress {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--cn-gap-small);
	margin: clamp(18px, 3vw, 24px) auto 0;
	padding: 0;
	list-style: none;
}

.cn-progress-step {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-pill);
	background-color: #ffffff;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-ui-min);
	font-weight: 600;
	line-height: var(--cn-line-height-ui);
	letter-spacing: normal;
}

.cn-progress-step .cn-progress-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--cn-color-bg-light);
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-caption);
	font-weight: 700;
}

.cn-progress-step.is-done {
	border-color: var(--cn-color-accent);
	background-color: var(--cn-color-accent-wash);
	color: var(--cn-color-accent);
}

.cn-progress-step.is-done .cn-progress-num,
.cn-progress-step.is-current .cn-progress-num {
	background-color: var(--cn-color-accent);
	color: #ffffff;
}

.cn-progress-step.is-current {
	border-color: var(--cn-color-accent);
	color: var(--cn-color-text-heading);
}

/* Stepper variant: decorative progress, not tab buttons */
.cn-progress--stepper {
	position: relative;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2px;
}

.cn-progress--stepper::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 18%;
	right: 18%;
	height: 2px;
	background-color: var(--cn-color-border-card);
	z-index: 0;
}

.cn-progress--stepper .cn-progress-step {
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	pointer-events: none;
	cursor: default;
	text-align: center;
	position: relative;
	z-index: 1;
	font-size: var(--cn-font-size-tag);
}

.cn-progress--stepper .cn-progress-step .cn-progress-num {
	width: 28px;
	height: 28px;
	border: 2px solid var(--cn-color-border-card);
	background-color: #ffffff;
	color: var(--cn-color-text-muted);
}

.cn-progress--stepper .cn-progress-step.is-done,
.cn-progress--stepper .cn-progress-step.is-current {
	background: transparent;
}

.cn-progress--stepper .cn-progress-step.is-done .cn-progress-num,
.cn-progress--stepper .cn-progress-step.is-current .cn-progress-num {
	border-color: var(--cn-color-accent);
	background-color: var(--cn-color-accent);
	color: #ffffff;
}

.cn-progress--stepper .cn-progress-step:not(.is-done):not(.is-current) .cn-progress-num {
	color: var(--cn-color-text-heading);
}

/* Informational cards: no false click affordance */
.cn-card-static {
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.cn-card-static.cn-hover-ring:hover,
	.cn-card-static.cn-hover-lift:hover,
	.cn-product-card.cn-card-static:hover,
	.cn-category-card.cn-card-static:hover {
		transform: none;
		box-shadow: var(--cn-shadow-rest);
		border-color: var(--cn-color-border-card);
	}
}

/* Whole-card action (stretched link pattern) */
.cn-card-actionable {
	position: relative;
	cursor: pointer;
	transition:
		transform var(--cn-duration-slow) var(--cn-easing-settle),
		box-shadow var(--cn-duration-slow) var(--cn-easing-settle),
		border-color var(--cn-duration-base) var(--cn-easing-standard);
}

.cn-card-actionable:focus-within {
	z-index: 2;
	box-shadow: var(--cn-shadow-focus-ring), var(--cn-shadow-elevated-hover);
	border-color: var(--cn-color-border-hover);
}

.cn-card-cover-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.cn-card-actionable > :not(.cn-card-cover-link) {
	pointer-events: none;
}

.cn-card-actionable .cn-button,
.cn-card-actionable .cn-button-small {
	width: fit-content;
}

.cn-trust-item--info {
	cursor: default;
	user-select: text;
	pointer-events: none;
}

.cn-trust-item--actionable {
	position: relative;
	cursor: pointer;
	padding: clamp(14px, 2.5vw, 18px);
	background: var(--cn-color-bg-card) !important;
	border: 1px solid rgba(var(--cn-color-accent-rgb), 0.28) !important;
	border-radius: var(--cn-radius-medium) !important;
	box-shadow: var(--cn-shadow-rest) !important;
}

.cn-trust-item--actionable strong {
	color: var(--cn-color-accent);
}

.cn-trust-item--actionable span {
	color: var(--cn-color-text-main);
	font-weight: 600;
}

@media (max-width: 768px) {
	.cn-trust-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cn-trust-item--actionable {
		grid-column: 1 / -1;
	}
}

@media (max-width: 420px) {
	.cn-trust-strip {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   TYPOGRAPHY CONSISTENCY
   Unlayered overrides so cn- scale wins over Astra entry-content.
========================================================= */
.entry-content .cn-section-full {
	font-family: var(--cn-font-family);
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
	color: var(--cn-color-text-main);
}

.entry-content {
	font-family: var(--cn-font-family);
}

/* Product/editorial pages: unclassed paragraphs inside cards use body scale. */
.entry-content .cn-section-full .cn-card p:not([class]),
.cn-section-full .cn-card p:not([class]),
.cn-section-full .cn-card > div > p:not([class]),
.cn-section-full .cn-split > div > p:not([class]),
.entry-content .cn-section-full .cn-panel-muted p:not([class]),
.entry-content .cn-section-full .cn-panel-alert p:not([class]) {
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
	color: var(--cn-color-text-main);
	margin-bottom: var(--cn-margin-bottom-para);
	max-width: none;
}

.entry-content .cn-section-full .cn-card p:not([class]):last-child,
.cn-section-full .cn-card p:not([class]):last-child,
.entry-content .cn-section-full .cn-panel-muted p:not([class]):last-child,
.entry-content .cn-section-full .cn-panel-alert p:not([class]):last-child {
	margin-bottom: 0;
}

.entry-content .cn-section-full p:not([class]) {
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
	color: var(--cn-color-text-main);
	margin-bottom: var(--cn-margin-bottom-para);
	max-width: var(--cn-prose-max-width);
}

.entry-content .cn-section-full h1.cn-hero-heading,
.entry-content .cn-section-full .cn-hero-heading {
	font-family: var(--cn-font-family);
	font-size: var(--cn-font-size-hero) !important;
	font-weight: 700 !important;
	line-height: var(--cn-line-height-heading) !important;
	letter-spacing: var(--cn-letter-spacing-tight) !important;
	color: var(--cn-color-text-heading) !important;
}

.entry-content .cn-section-full h1:not(.cn-hero-heading) {
	font-family: var(--cn-font-family);
	font-size: var(--cn-font-size-h1) !important;
	font-weight: 700 !important;
	line-height: var(--cn-line-height-heading) !important;
	letter-spacing: var(--cn-letter-spacing-tight) !important;
	color: var(--cn-color-text-heading) !important;
}

.entry-content .cn-section-full h2,
.entry-content .cn-section-full h2.cn-section-heading,
.entry-content .cn-section-full h2.cn-section-heading-left,
.entry-content h2.cn-section-heading,
.entry-content h2.cn-section-heading-left {
	font-family: var(--cn-font-family) !important;
	font-size: var(--cn-font-size-h2) !important;
	font-weight: 700 !important;
	line-height: var(--cn-line-height-heading) !important;
	letter-spacing: var(--cn-letter-spacing-tight) !important;
	color: var(--cn-color-text-heading) !important;
}

.entry-content .cn-section-full h3,
.cn-category-card h3,
.cn-product-card h3,
.cn-contact-method h3,
.cn-subcard h3 {
	font-size: var(--cn-font-size-h3) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--cn-color-text-heading) !important;
}

.cn-card > h2.cn-section-heading,
.cn-card > h2.cn-section-heading-left,
.cn-card h2.cn-section-heading,
.cn-card h2.cn-section-heading-left,
.cn-cta-band h2,
.cn-panel-white > h2.cn-section-heading,
.cn-panel-white > h2.cn-section-heading-left {
	margin-top: 0 !important;
}

/* Kicker → titolo: specificità maggiore della regola margin-top: 0 sopra */
.cn-card > .cn-kicker + h2.cn-section-heading,
.cn-card > .cn-kicker + h2.cn-section-heading-left,
.cn-panel-white > .cn-kicker + h2.cn-section-heading,
.cn-panel-white > .cn-kicker + h2.cn-section-heading-left {
	margin-top: clamp(20px, 4vw, 28px) !important;
}

.cn-card h2.cn-section-heading,
.cn-panel-white > h2.cn-section-heading {
	margin-bottom: clamp(16px, 3vw, 24px) !important;
}

.cn-section-centered .cn-hero-subheading,
.cn-section-centered .cn-desc,
.cn-section-centered > p.cn-desc {
	font-size: var(--cn-font-size-lead);
}

.cn-section-centered .cn-hero-subheading {
	max-width: var(--cn-prose-max-width);
	margin-inline: auto;
	color: var(--cn-color-accent);
	font-size: var(--cn-font-size-ui-min) !important;
	font-weight: 600;
	letter-spacing: var(--cn-letter-spacing-wide);
	text-transform: uppercase;
}

.cn-faq summary {
	font-size: var(--cn-font-size-label) !important;
}

/* TYPOGRAPHY-01 (GROWTH-ROUND-02 P2-B): presentation-only; semantic headings unchanged */
.cn-product-card > p:not([class]) {
	max-width: var(--cn-prose-max-width);
	line-height: 1.6;
}

@media (max-width: 921px) {
	.cn-card .cn-section-heading {
		margin-top: clamp(24px, 5vw, 40px);
		margin-bottom: clamp(16px, 3vw, 24px);
	}

	.cn-section-full > .cn-card.cn-mt-40,
	.cn-section-full > aside.cn-cta-band.cn-mt-40 {
		margin-top: clamp(24px, 5vw, 36px);
	}

	/* ACCESSIBILITY-02: comfortable FAQ tap targets */
	.cn-faq summary {
		min-block-size: var(--cn-touch-target-min);
		display: flex;
		align-items: center;
	}

	/* ACCESSIBILITY-02: calmer reading rhythm on small screens */
	.cn-desc,
	.cn-section-full .cn-card p:not([class]) {
		line-height: 1.55;
	}
}

/* ACCESSIBILITY-02: scroll-top keyboard focus */
:is(#ast-scroll-top, #scroll-to-top, .back-to-top):focus-visible {
	outline: none !important;
	box-shadow: var(--cn-shadow-focus-ring) !important;
}

@media (forced-colors: active) {
	:is(#ast-scroll-top, #scroll-to-top, .back-to-top):focus-visible {
		outline: 2px solid CanvasText !important;
		outline-offset: 2px;
		box-shadow: none !important;
	}

	.cn-mobile-cta-bar {
		border: 2px solid CanvasText;
	}

	.cn-mobile-cta-bar__actions .cn-button {
		border: 2px solid ButtonText;
	}
}

/* ACCESSIBILITY-02: stronger contrast when user prefers more contrast */
@media (prefers-contrast: more) {
	.cn-button {
		border-width: 2px;
	}

	.cn-card,
	.cn-faq details,
	.cn-mobile-cta-bar {
		border-color: var(--cn-color-text-muted);
	}

	.cn-desc,
	.cn-section-full .cn-card p:not([class]) {
		color: var(--cn-color-text-heading);
	}
}

.cn-card > h2.cn-section-heading + .cn-desc,
.cn-card > h2.cn-section-heading + p.cn-desc {
	text-align: center;
}

.cn-section-centered .cn-tag-group {
	justify-content: center;
}

/* Centered intro blocks: prose-width hero, slightly wider tag panel */
.cn-section-full > header.cn-section-centered {
	max-width: var(--cn-prose-max-width);
	margin-inline: auto;
	width: 100%;
}

.cn-section-full > section.cn-panel-white.cn-section-centered {
	max-width: min(100%, 52rem);
	margin-inline: auto;
	width: 100%;
	text-align: center;
}

/* Full-width section cards: cn-section-centered must not shrink cn-card to prose width */
.cn-section-full > section.cn-card.cn-section-centered {
	max-width: var(--cn-max-width-card);
	width: 100%;
	text-align: center;
}

#recensioni > .cn-panel-white,
.cn-google-reviews > .cn-panel-white {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

#recensioni .ti-widget,
#recensioni .ti-widget .ti-widget-container,
.cn-google-reviews .ti-widget,
.cn-google-reviews .ti-widget .ti-widget-container {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.cn-google-reviews-fallback {
	text-align: center;
}

.cn-google-reviews-fallback .cn-button-group {
	justify-content: center;
	flex-wrap: wrap;
}

html:not([data-cn-admin]) .cn-trustindex-admin-note {
	display: none !important;
}

.cn-tag-container-wide {
	width: 100%;
	text-align: center;
}

.cn-tag-container-wide .cn-tag-group {
	justify-content: center;
}

.cn-split > .cn-panel-muted,
.cn-split > .cn-panel-white,
.cn-split .cn-panel-muted .cn-panel-white {
	margin: 0;
}

/* Inner centered blocks inside full-width cards (e.g. contatti hero copy) */
.cn-card > .cn-section-centered,
.cn-card .cn-section-centered:first-child {
	text-align: center;
	margin-inline: auto;
	width: 100%;
}

/* Card-level centered intro: full card width, prose-width heading/copy only */
.cn-card.cn-section-centered,
section.cn-card.cn-section-centered {
	max-width: var(--cn-max-width-card);
	width: 100%;
}

.cn-card.cn-section-centered > :is(h2, h3, p.cn-desc, .cn-desc) {
	max-width: var(--cn-prose-max-width);
	margin-inline: auto;
}

.cn-card.cn-section-centered > .cn-panel-white,
.cn-card.cn-section-centered > .cn-panel-muted {
	max-width: 100%;
	width: 100%;
}

.cn-card.cn-section-centered .ti-widget,
.cn-card.cn-section-centered .ti-widget-container {
	width: 100%;
	max-width: 100%;
}

.cn-panel-white address {
	margin: 0;
	font-style: normal;
	line-height: var(--cn-line-height-body);
	color: var(--cn-color-text-main);
}

/* Contatti — richiesta dettagliata: main content + sede sidebar */
.cn-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--cn-gap-medium);
	align-items: start;
}

.cn-detail-main {
	min-width: 0;
}

.cn-location-card {
	display: flex;
	flex-direction: column;
	gap: var(--cn-gap-small);
	min-width: 0;
	padding: clamp(18px, 3vw, 24px);
	background: var(--cn-color-accent-wash);
	border: 1px solid var(--cn-color-patina-edge);
	border-radius: var(--cn-radius-medium);
	box-shadow: none;
}

.cn-location-card__title {
	margin: 0;
	font-size: var(--cn-font-size-h3);
	font-weight: 700;
	line-height: var(--cn-line-height-heading);
	color: var(--cn-color-text-heading);
}

.cn-location-card address {
	margin: 0;
	font-style: normal;
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
	color: var(--cn-color-text-main);
}

.cn-location-card__note {
	margin: 0;
	font-size: var(--cn-font-size-small);
	line-height: var(--cn-line-height-small);
	color: var(--cn-color-text-muted);
}

.cn-location-card .cn-button {
	align-self: flex-start;
}

@media (max-width: 781px) {
	.cn-detail-grid {
		grid-template-columns: 1fr;
	}

	.cn-location-card {
		order: -1;
	}
}

/* Primary nav never set its own text colour despite the extensive
   typography control below, so it fell back to Astra's generic default
   (#334155) instead of this site's own --cn-color-text-heading.
   !important because Astra's customizer generates an inline <style> with
   `.ast-builder-menu-1 .menu-item > .menu-link { color: var(--ast-global-
   color-3) }` (3-class specificity, beats a plain 2-class selector even
   though this file loads after it). Matches this file's own documented
   convention for beating Astra core/customizer output (see PROJECT GUIDE
   at file top).
   Note: on the top-level #ast-desktop-header ≥768px menu specifically,
   this rule is NOT the one that wins — a pre-existing, more specific
   (#ast-desktop-header .main-header-menu > .menu-item > .menu-link,
   1 ID + 3 classes) rule in the DESKTOP HEADER NAV block further down
   governs that case and was edited directly there instead. This rule
   still matters for .main-navigation / .ast-builder-menu /
   .ast-header-navigation contexts and any nav link that isn't a direct
   .menu-item child (submenus) — confirmed via getComputedStyle that it
   does NOT reach top-level desktop links, so don't rely on it for that
   case without re-checking. */
.main-header-menu .menu-link,
.main-navigation .menu-link,
.ast-builder-menu .menu-link,
.ast-header-navigation .menu-link {
	color: var(--cn-color-text-heading) !important;
}

/* =========================================================
   UX RESEARCH: interactive typography floor
   Nav, buttons, labels ≥16px; no thin weights; regular tracking.
========================================================= */
.main-header-menu .menu-link,
.main-navigation .menu-link,
.ast-builder-menu .menu-link,
.ast-header-navigation .menu-link,
.cn-button,
.cn-button-small,
.wp-block-button__link,
.wp-element-button,
.wpcf7 label,
.wpcf7-form label,
.wpcf7-form .wpcf7-list-item-label,
.cn-tag,
.cn-tag-group span,
.cn-kicker,
.cn-chip-link,
.cn-category-nav a,
.cn-progress-step,
details.cn-faq summary,
details summary {
	font-family: var(--cn-font-family);
	font-size: var(--cn-font-size-ui-min);
	font-weight: 500;
	line-height: var(--cn-line-height-ui);
}

.cn-button,
.cn-button-small,
.wp-block-button__link,
.wp-element-button,
.cn-kicker,
.cn-progress-step,
details.cn-faq summary {
	font-weight: 600;
}

.cn-kicker,
.cn-tag,
.cn-tag-group span {
	letter-spacing: var(--cn-letter-spacing-wide);
}

.cn-button,
.cn-button-small,
.main-header-menu .menu-link,
.main-navigation .menu-link,
.wpcf7 label,
.cn-chip-link,
.cn-category-nav a {
	letter-spacing: normal;
}

/* =========================================================
   HEADER LOGO - responsive size
   astra_resize_logo is disabled in functions.php, so WordPress
   outputs the 512px asset with sizes="100vw" on mobile. Clamp the
   logo and its wrappers so the inline title + menu trigger fit.
   !important beats Astra customizer CSS and our reset img rule.
========================================================= */
@media (max-width: 921px) {
	#masthead .site-branding,
	#ast-mobile-header .site-branding {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 0.5em;
		min-width: 0;
	}

	#masthead .site-logo-img,
	#masthead .custom-logo-link,
	#ast-mobile-header .site-logo-img,
	#ast-mobile-header .custom-logo-link {
		display: inline-flex;
		flex: 0 0 auto;
		max-width: 52px;
		line-height: 0;
	}

	#masthead .site-logo-img .custom-logo-link img,
	#masthead .site-logo-img img,
	#ast-mobile-header .site-logo-img .custom-logo-link img,
	#ast-mobile-header .site-logo-img img,
	.site-header .site-logo-img img.custom-logo {
		max-width: 52px !important;
		max-height: 52px !important;
		width: auto !important;
		height: auto !important;
	}

	.ast-logo-title-inline .site-logo-img {
		padding-right: 0.5em;
	}

	#masthead .site-title,
	#ast-mobile-header .site-title {
		font-size: 1.3rem !important;
		line-height: 1.25;
		min-width: 0;
	}

	#masthead .site-title a,
	#ast-mobile-header .site-title a {
		font-size: inherit !important;
	}

	.ast-header-break-point .ast-primary-header-bar,
	.ast-header-break-point .ast-primary-header-bar .site-primary-header-wrap {
		min-height: 0 !important;
	}
}

@media (max-width: 544px) {
	#masthead .site-logo-img,
	#masthead .custom-logo-link,
	#ast-mobile-header .site-logo-img,
	#ast-mobile-header .custom-logo-link {
		max-width: 44px;
	}

	#masthead .site-logo-img .custom-logo-link img,
	#masthead .site-logo-img img,
	#ast-mobile-header .site-logo-img .custom-logo-link img,
	#ast-mobile-header .site-logo-img img,
	.site-header .site-logo-img img.custom-logo {
		max-width: 44px !important;
		max-height: 44px !important;
	}

	#masthead .site-title,
	#ast-mobile-header .site-title {
		font-size: 1.2rem !important;
	}
}

/* Desktop logo: keep inline title + menu compact */
@media (min-width: 922px) {
	#masthead .site-logo-img .custom-logo-link img,
	#masthead .site-logo-img img.custom-logo {
		max-width: 72px !important;
		max-height: 72px !important;
		width: auto !important;
		height: auto !important;
	}
}

/* =========================================================
   DESKTOP HEADER NAV
   Astra swaps to #ast-mobile-header (hamburger only) below 922px.
   Show the desktop bar with inline links from tablet width up, and
   keep the right-side menu from collapsing on wide screens.
========================================================= */
@media (min-width: 768px) {
	#ast-desktop-header {
		display: block !important;
	}

	#ast-mobile-header {
		display: none !important;
	}

	#ast-desktop-header .site-primary-header-wrap.ast-container {
		max-width: var(--cn-max-width-site);
	}

	#ast-desktop-header .ast-builder-grid-row {
		flex-wrap: nowrap;
		align-items: center;
		gap: 1rem;
	}

	#ast-desktop-header .site-header-primary-section-left {
		flex: 1 1 auto;
		/* Was min-width: 0 — combined with Astra's break-point grid template
		   this let the title column collapse to ~119px at 768-921px, where
		   Astra ALSO applies overflow-wrap:anywhere to the title, producing
		   a one-character-per-line site title ~271px tall and a ~334px
		   header (measured live at 800px, 2026-08-17). A floor wide enough
		   for "Huren in Cagliari"-length titles to wrap at word boundaries
		   at most once keeps the header sane; the row still fits at 768px
		   (12rem + nav ≈ 667px < 728px available). */
		min-width: 12rem;
	}

	/* Never wrap the brand name at all — it's a name, not prose. Astra's
	   break-point CSS sets overflow-wrap:anywhere on it (confirmed via
	   computed style at 800px → one-character-per-line title), and the
	   first fix attempt (overflow-wrap:normal, allowing word wraps) still
	   left a 3-line title even at 1280px because .site-branding computes
	   width:0 in Astra's flex chain and the anchor renders at min-content
	   width (measured live: branding 0px wide, anchor 55px = longest
	   word). nowrap makes the title's min-content its full single-line
	   width, which the flex chain then has to accommodate — one line
	   everywhere ≥768px, matching the intended design. All language
	   variants' titles are short ("Huren in Cagliari" pattern), and the
	   12rem section floor above guarantees room. */
	#ast-desktop-header .site-title,
	#ast-desktop-header .site-title a {
		overflow-wrap: normal !important;
		white-space: nowrap !important;
	}

	#ast-desktop-header .site-header-primary-section-right {
		flex: 0 0 auto;
		margin-left: auto;
	}

	#ast-desktop-header .site-branding {
		min-width: 0;
	}

	#ast-desktop-header .site-title {
		font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem) !important;
		line-height: 1.25;
		min-width: 0;
	}

	#ast-desktop-header .ast-builder-menu-1,
	#ast-desktop-header .main-header-bar-navigation,
	#ast-desktop-header .site-navigation,
	#ast-desktop-header .main-navigation,
	#ast-desktop-header .main-header-menu {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	#ast-desktop-header .main-header-menu {
		flex-flow: row nowrap !important;
		align-items: center;
		gap: 0.25rem;
		margin: 0;
		padding: 0;
	}

	#ast-desktop-header .main-header-menu > .menu-item {
		margin: 0;
	}

	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		display: inline-flex !important;
		align-items: center !important;
		height: auto !important;
		min-height: 44px;
		padding: 0.5rem 0.85rem !important;
		white-space: nowrap;
		line-height: 1.4 !important;
		/* Was --cn-color-text-main. This is the rule that actually governs
		   top-level desktop nav colour (1 ID + 3 classes, dated 2026-07-03 —
		   predates this session) — the separate .main-header-menu .menu-link
		   rule added below assumed it was the deciding rule and used
		   text-heading, but never actually won here on a real ≥768px
		   viewport (confirmed via getComputedStyle: it kept resolving to
		   text-main). Changed here directly instead of trying to out-rank
		   this rule with yet another one, for consistency with nav/heading
		   text elsewhere (crosslink-mesh, 404 title, --ast-global-color-2/3
		   all map to text-heading). That other rule stays — it's not wrong,
		   just non-authoritative for this specific selector; it still
		   covers .main-navigation/.ast-builder-menu/.ast-header-navigation
		   contexts this block doesn't reach. */
		color: var(--cn-color-text-heading) !important;
	}

	/* Current-page nav highlight. MUST come after the .menu-link rule
	   above: both are #ast-desktop-header .main-header-menu ... > .menu-link
	   at identical specificity (1 ID + 3 classes: .main-header-menu +
	   .menu-item/.current-menu-item + .menu-link), so a current item —
	   which carries both .menu-item and .current-menu-item — ties on
	   specificity and the cascade falls back to source order. Placed here,
	   after, so it wins that tie instead of losing to it (confirmed via
	   getComputedStyle at 1280px width: moving this above the rule it
	   needs to beat left the current item silently un-highlighted, same
	   failure mode as the original nav-colour bug this session started
	   with — this file's own PROJECT GUIDE convention is to beat Astra
	   output; the same care applies to two rules of this file competing
	   with each other). */
	#ast-desktop-header .main-header-menu .current-menu-item > .menu-link,
	#ast-desktop-header .main-navigation .current-menu-item > .menu-link {
		color: var(--cn-color-accent) !important;
		font-weight: 600;
	}
}

@media (min-width: 768px) and (max-width: 921px) {
	#ast-desktop-header .site-logo-img .custom-logo-link img,
	#ast-desktop-header .site-logo-img img.custom-logo {
		max-width: 52px !important;
		max-height: 52px !important;
		width: auto !important;
		height: auto !important;
	}
}

/* =========================================================
   ASTRA ADAPTER + SITE SHELL
   Required because Astra injects unlayered inline CSS (840px caps,
   #f5efef backgrounds, header colours). Rules here use !important
   intentionally — not technical debt. Do not purge without testing
   against live Astra inline #astra-theme-css-inline-css output.
   Header, content and footer share one 1200px column.
========================================================= */
.site-content > .ast-container,
#masthead .site-primary-header-wrap.ast-container,
#ast-desktop-header .site-primary-header-wrap.ast-container,
#ast-mobile-header .site-primary-header-wrap.ast-container,
.site-below-footer-wrap .ast-builder-grid-row-container-inner,
.site-below-footer-wrap .ast-builder-grid-row {
	max-width: var(--cn-max-width-site) !important;
	margin-inline: auto;
	padding-inline: var(--cn-padding-inline-shell);
}

.site-content > .ast-container {
	padding-block: clamp(16px, 3vw, 28px) clamp(24px, 4vw, 40px) !important;
}

@media (min-width: 922px) {
	:root {
		--cn-padding-inline-shell: clamp(32px, 4.5vw, 48px);
		--cn-padding-card: clamp(22px, 3vw, 32px);
		--cn-padding-stage-inline: clamp(24px, 3vw, 32px);
		--cn-padding-stage-block-start: clamp(28px, 3.5vw, 36px);
		--cn-padding-stage-block-end: clamp(32px, 4vw, 44px);
		--cn-padding-section-block-start: clamp(36px, 5vw, 52px);
		--cn-padding-section-block-end: clamp(44px, 6vw, 60px);
	}
}

/* Astra off-canvas / dropdown mobile menu tap targets */
@media (max-width: 921px) {
	.ast-mobile-header-content > .ast-builder-menu,
	.ast-mobile-header-content > .ast-builder-menu-mobile {
		padding-top: 8px !important;
		padding-bottom: 12px !important;
	}

	.ast-mobile-header-content .main-header-menu.ast-nav-menu,
	.ast-mobile-popup-drawer .main-header-menu.ast-nav-menu,
	.ast-builder-menu-mobile .main-header-menu.ast-nav-menu {
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 8px 0 12px;
	}

	.ast-mobile-header-content .main-header-menu .menu-item,
	.ast-mobile-header-content .main-navigation .menu-item,
	.ast-builder-menu-mobile .main-header-menu .menu-item,
	.ast-mobile-popup-drawer .main-header-menu .menu-item {
		margin: 0;
		border-bottom: 1px solid var(--cn-color-border-card);
	}

	.ast-mobile-header-content .main-header-menu .menu-item:last-child,
	.ast-mobile-header-content .main-navigation .menu-item:last-child,
	.ast-builder-menu-mobile .main-header-menu .menu-item:last-child,
	.ast-mobile-popup-drawer .main-header-menu .menu-item:last-child {
		border-bottom: none;
	}

	.ast-mobile-header-content .main-header-menu .menu-item > .menu-link,
	.ast-mobile-header-content .main-navigation .menu-item > .menu-link,
	.ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link,
	.ast-builder-menu-mobile .main-navigation .menu-item > .menu-link,
	.ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
		display: block !important;
		height: auto !important;
		min-height: 48px;
		padding: 14px 20px !important;
		color: var(--cn-color-text-heading) !important;
		font-size: var(--cn-font-size-ui-min) !important;
		font-weight: 500;
		line-height: 1.45 !important;
		letter-spacing: normal;
		-webkit-box-align: unset !important;
		align-items: unset !important;
	}

	/* Mobile menu extensively controls type/spacing above but never set its
	   own colour — fell back to Astra's generic default (slate #334155)
	   instead of this site's warm text token. Current-page item gets the
	   accent colour too (was bold-only, no colour wayfinding). */
	.ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link,
	.ast-mobile-header-content .main-navigation .current-menu-item > .menu-link,
	.ast-builder-menu-mobile .main-header-menu .current-menu-item > .menu-link,
	.ast-mobile-popup-drawer .main-header-menu .current-menu-item > .menu-link {
		color: var(--cn-color-accent) !important;
		font-weight: 600;
	}
}

/* Joinchat: mobile stacking — CTA chatbox must sit above the floating button */
.joinchat__chatbox {
	z-index: 5;
}

.joinchat__button {
	z-index: 6;
}

.joinchat--chatbox .joinchat__button {
	display: none;
}

/* Lift WhatsApp button when cookie banner is visible (functional widget) */
html.cn-cookie-banner-open .joinchat {
	bottom: calc(var(--cn-cookie-banner-offset, 7.5rem) + var(--sep, 20px));
}

/* Scroll-to-top: lift above cookie banner when it is open */
html.cn-cookie-banner-open :is(#ast-scroll-top, #scroll-to-top, .back-to-top) {
	bottom: calc(var(--cn-cookie-banner-offset, 7.5rem) + 20px) !important;
	left: 32px !important;
	right: auto !important;
}

/* The banner is fixed to the bottom of the viewport, so on a first visit
   -- before any consent choice, which is what every new visitor and every
   Lighthouse run sees -- it sat on top of the whole footer legal list:
   all six links plus the cookie button, unreachable because the page was
   already scrolled to its end (axe target-size, "partially obscured",
   smallest space 12.1px). This is the same defect as the mobile CTA bar
   covering the footer, and it was missed then because every check seeded
   consent into localStorage first and so never rendered the banner.

   syncBannerOffset() in assets/cn-cookie-consent.js already publishes the
   banner's measured height as --cn-cookie-banner-offset on the root, the
   same value the joinchat and scroll-top rules above consume; 7.5rem is
   only the before-JS fallback. Not scoped to mobile: the banner is fixed
   at every width. Measured on the live page: covered footer targets go
   6 -> 0. */
html.cn-cookie-banner-open .cn-site-footer {
	padding-bottom: calc(var(--cn-cookie-banner-offset, 7.5rem) + env(safe-area-inset-bottom, 0px));
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal {
	min-inline-size: var(--cn-touch-target-min);
	min-block-size: var(--cn-touch-target-min);
}

/* =========================================================
   TRUSTINDEX WIDGET PROTECTION
   The Trustindex loader injects a review widget that ships its
   own CSS (data-css-url). Our global resets - chiefly the
   `img { max-width:100%!important; height:auto!important }` rule
   and the body hyphenation/wrapping defaults - crush that
   widget's delicate flex/inline layout.

   These overrides deliberately re-open @layer reset instead of
   sitting unlayered at the bottom. Reason: for !important
   declarations, cascade-layer order is INVERTED, so a layered
   !important (the reset img rule) beats an unlayered !important.
   The only way to win is to live in the SAME layer and rely on
   higher specificity (.ti-widget img  >  img). We neutralise our
   impositions (auto/none) rather than imposing new values, so
   Trustindex's own stylesheet stays in control.
========================================================= */
@layer reset {
	.ti-widget,
	.ti-widget * {
		box-sizing: border-box;
		white-space: normal;
		overflow-wrap: normal !important;
		word-wrap: normal !important;
		word-break: normal !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
	}

	pre.ti-widget {
		display: none !important;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		overflow: visible;
		font-family: inherit;
		line-height: normal;
		tab-size: initial;
	}

	/* Lift our global `img { max-width:100%; height:auto }` clamp so the
	   widget's own CSS and each image's width/height attributes can win.
	   `revert` (not `auto`) cancels our !important without imposing a new
	   computed size that would stretch stars to the row width. */
	.ti-widget img,
	.ti-widget figure img {
		max-width: none !important;
		width: revert !important;
		height: revert !important;
		box-shadow: none !important;
	}

	/* Safety net: star rows, avatars and platform icons have known authored
	   dimensions. Pin them so a wide flex parent cannot balloon SVG stars. */
	.ti-widget .ti-stars img {
		width: 17px !important;
		height: 17px !important;
		max-width: 17px !important;
		min-width: 0 !important;
		flex-shrink: 0 !important;
		display: inline-block !important;
	}

	.ti-widget .ti-review-header .ti-platform-icon img {
		width: 20px !important;
		height: 20px !important;
		max-width: 20px !important;
	}

	.ti-widget .ti-review-header .ti-profile-img img {
		width: 40px !important;
		height: 40px !important;
		max-width: 40px !important;
	}

	.ti-widget .ti-footer .ti-profile-img img {
		width: 48px !important;
		height: 48px !important;
		max-width: 48px !important;
	}
}

/* =========================================================
   ASTRA INLINE TYPOGRAPHY RESET
   Unlayered + px floors: beats #astra-theme-css-inline-css and
   html{font-size:91.2%} without changing header chrome.
========================================================= */
:root {
	--cn-font-size-body: clamp(17px, 0.95rem + 0.35vw, 18px);
	--cn-font-size-h1: clamp(32px, 1.3rem + 2.2vw, 54px);
	--cn-font-size-h2: clamp(24px, 1.1rem + 0.9vw, 32px);
	--cn-font-size-h3: clamp(18px, 1.05rem + 0.35vw, 20px);
	--cn-font-size-hero: clamp(38px, 1.4rem + 4vw, 68px);
	--cn-font-size-lead: clamp(17px, 1rem + 0.35vw, 20px);
	--cn-font-size-ui-min: 16px;
	--cn-font-size-label: clamp(16px, 0.95rem + 0.2vw, 18px);
	--cn-font-size-small: clamp(14px, 0.93rem + 0.11vw, 15px);
	--cn-font-size-caption: clamp(13px, 0.86rem + 0.11vw, 14px);
	--cn-font-size-micro: clamp(12px, 0.79rem + 0.11vw, 13px);
}

body,
.site-content,
.entry-content {
	font-family: var(--cn-font-family) !important;
}

.entry-content .cn-section-full {
	font-family: var(--cn-font-family) !important;
	font-size: var(--cn-font-size-body) !important;
	line-height: var(--cn-line-height-body) !important;
	color: var(--cn-color-text-main) !important;
}

.entry-content .cn-section-full h1,
.entry-content .cn-section-full h2,
.entry-content .cn-section-full h3,
.entry-content .cn-section-full h4 {
	font-family: var(--cn-font-family) !important;
	color: var(--cn-color-text-heading) !important;
}

.entry-content .cn-section-full h1:not(.cn-hero-heading) {
	font-size: var(--cn-font-size-h1) !important;
	font-weight: 700 !important;
	line-height: var(--cn-line-height-heading) !important;
}

.entry-content .cn-section-full h1.cn-hero-heading,
.entry-content .cn-section-full .cn-hero-heading {
	font-size: var(--cn-font-size-hero) !important;
	font-weight: 700 !important;
	line-height: var(--cn-line-height-heading) !important;
}

.entry-content .cn-section-full h2 {
	font-size: var(--cn-font-size-h2) !important;
	font-weight: 700 !important;
	line-height: var(--cn-line-height-heading) !important;
}

.entry-content .cn-section-full h3,
.entry-content .cn-section-full h4 {
	font-size: var(--cn-font-size-h3) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.cn-category-card,
.cn-product-card,
.cn-subcard,
.cn-cta-band > div {
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
	color: var(--cn-color-text-main);
}

.cn-button,
.cn-button-small,
.main-header-menu .menu-link,
.ast-builder-menu-mobile .menu-link {
	font-size: var(--cn-font-size-ui-min) !important;
}

/* Stage sheet — reinforced unlayered (wins over Astra transparent overrides) */
.entry-content .cn-section-full {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	container-name: cn-stage;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--cn-max-width-site);
	margin-inline: auto;
	background: linear-gradient(180deg, var(--cn-color-bg-stage) 0%, var(--cn-color-bg-stage-end) 100%) !important;
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-stage);
	box-shadow: var(--cn-shadow-stage);
	padding-inline: var(--cn-padding-stage-inline);
	padding-block: var(--cn-padding-stage-block-start) var(--cn-padding-stage-block-end);
}

/* =========================================================
   MATERIAL PATINA + CALM CANVAS
   Warm limestone + sea-mist — lowers arousal, supports dwell time.
   Unlayered so it applies site-wide after layered components.
========================================================= */
body {
	background-color: var(--cn-color-bg-section);
}

.site {
	position: relative;
	background-color: var(--cn-color-bg-section);
	background-image:
		radial-gradient(ellipse 100% 72% at 50% -12%, var(--cn-color-sea-wash) 0%, transparent 58%),
		radial-gradient(ellipse 88% 58% at 0% 100%, rgba(196, 178, 154, 0.11) 0%, transparent 52%),
		radial-gradient(ellipse 72% 48% at 100% 88%, rgba(4, 107, 210, 0.055) 0%, transparent 48%);
}

.site::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.038;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}

#page {
	position: relative;
	z-index: 1;
}

.ast-plain-container,
.ast-page-builder-template,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single:not(.ast-related-post),
.ast-separate-container .ast-archive-description,
.ast-separate-container.ast-two-container #secondary .widget {
	background-color: transparent !important;
	background-image: none !important;
}

/* Header/footer: warm elevated surfaces, not stark white panels */
.ast-primary-header-bar,
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-desktop-header-content,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
	background-color: var(--cn-color-bg-header) !important;
	background-image: none !important;
}

.ast-primary-header-bar,
.ast-header-break-point .ast-primary-header-bar {
	border-bottom-color: var(--cn-color-border-subtle) !important;
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] {
	display: none !important;
}

.site-footer.site-footer {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	min-height: 0 !important;
}

.site-below-footer-wrap .ast-builder-grid-row-container-inner,
.site-below-footer-wrap .ast-builder-grid-row {
	padding-block: 0 !important;
}

/* Editorial images: framed, padded inside the shell rhythm */
.cn-section-full > figure.wp-block-image,
.cn-section-full > figure:has(.cn-img-rounded) {
	position: relative;
	margin-inline: auto;
	max-width: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--cn-color-border-warm);
	border-radius: var(--cn-radius-image);
	box-shadow: var(--cn-shadow-image), var(--cn-shadow-inset-paper);
	background-color: var(--cn-color-bg-light);
	transition:
		box-shadow var(--cn-duration-slow) var(--cn-easing-settle),
		border-color var(--cn-duration-slow) var(--cn-easing-settle);
}

.cn-section-full > figure.wp-block-image::after,
.cn-section-full > figure:has(.cn-img-rounded)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(
		168deg,
		rgba(255, 252, 247, 0.08) 0%,
		transparent 42%,
		rgba(42, 32, 24, 0.05) 100%
	);
}

.cn-section-full > figure.wp-block-image img,
.cn-section-full > figure.wp-block-image .cn-img-rounded,
.cn-section-full figure .cn-img-rounded {
	border-radius: 0;
	box-shadow: none;
	filter: saturate(0.97) contrast(1.02);
}

@media (hover: hover) and (pointer: fine) {
	.cn-section-full > figure.wp-block-image:hover {
		border-color: var(--cn-color-patina-edge);
		box-shadow: var(--cn-shadow-hover-image), var(--cn-shadow-inset-paper);
	}
}

/* Card surfaces: white tiles on the stage sheet */
.cn-card,
.cn-card-white,
.cn-project-card,
.cn-product-card,
.cn-category-card,
.cn-contact-method,
.cn-faq details,
.cn-panel-white {
	background-color: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	box-shadow: var(--cn-shadow-rest);
	transition:
		transform var(--cn-duration-slow) var(--cn-easing-settle),
		box-shadow var(--cn-duration-slow) var(--cn-easing-settle),
		border-color var(--cn-duration-slow) var(--cn-easing-settle),
		background-color var(--cn-duration-slow) var(--cn-easing-settle);
}

/* Subcards: tonal step below cards — no stacked white boxes */
.cn-subcard {
	background-color: var(--cn-color-bg-subcard) !important;
	border: 1px solid var(--cn-color-border-card) !important;
	box-shadow: none !important;
}

.cn-faq details[open] {
	box-shadow: var(--cn-shadow-hover-card);
	border-color: var(--cn-color-border-hover);
}

.cn-card-featured {
	background: linear-gradient(168deg, #faf9f7 0%, #f3f1ed 100%) !important;
	border-color: var(--cn-color-patina-edge) !important;
	box-shadow: var(--cn-shadow-rest) !important;
}

.cn-cta-band {
	/* Was sea-wash/sand-wash/accent-wash (all pale ~2-4% tints, barely
	   visible). Deepened toward the sunset trio for the 2026-08-13 bold
	   direction, kept light enough to still carry the section's normal
	   dark text (this isn't a white-text context like #hero). */
	background: linear-gradient(
		155deg,
		var(--cn-color-terracotta-wash) 0%,
		var(--cn-color-sand-solid) 52%,
		var(--cn-color-accent-wash) 100%
	);
	border-color: var(--cn-color-border-card);
	border-left-color: var(--cn-color-terracotta);
}

.cn-panel-muted {
	background: linear-gradient(168deg, var(--cn-color-sand-wash) 0%, var(--cn-color-bg-light) 100%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px rgba(42, 32, 24, 0.04) !important;
}

.cn-trust-item--actionable {
	background: var(--cn-color-bg-card) !important;
	border-color: rgba(var(--cn-color-accent-rgb), 0.28) !important;
	box-shadow: var(--cn-shadow-rest) !important;
}

/* Info trust facts stay flat inside the strip — no tile chrome */
.cn-trust-item--info {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Buttons: grounded rectangles, slower settle */
.cn-button,
.cn-button-small,
.wp-block-button__link.cn-button {
	border-radius: var(--cn-radius-medium);
	transition:
		transform var(--cn-duration-moderate) var(--cn-easing-settle),
		box-shadow var(--cn-duration-moderate) var(--cn-easing-settle),
		background-color var(--cn-duration-base) var(--cn-easing-standard),
		border-color var(--cn-duration-base) var(--cn-easing-standard),
		color var(--cn-duration-base) var(--cn-easing-standard);
}

@media (hover: hover) and (pointer: fine) {
	.cn-button:hover,
	.cn-button-small:hover {
		transform: translateY(-2px);
	}

	/* Footer CTA inside overflow-hidden parent cards */
	.cn-card-footer-cta .cn-button:hover,
	.cn-card-actions--footer .cn-button:hover {
		transform: none;
	}

	.cn-card-actionable:hover,
	.cn-product-card:not(.cn-card-static):hover,
	.cn-category-card:not(.cn-card-static):hover,
	.cn-contact-method:not(.cn-card-static):hover,
	.cn-product-card:hover,
	.cn-category-card:hover,
	.cn-contact-method:hover,
	.cn-trust-item--actionable:hover,
	.cn-hover-lift:hover {
		transform: translateY(-2px);
		z-index: 2;
		box-shadow: var(--cn-shadow-hover-card);
		border-color: var(--cn-color-border-hover);
	}

	/* Subcards inside subgrids stay flat (no lift / stack overlap) */
	.cn-subgrid .cn-subcard:hover,
	.cn-subgrid .cn-subcard.cn-hover-lift:hover {
		transform: none;
		z-index: auto;
	}
}

.cn-transition,
.cn-hover-lift,
.cn-hover-ring {
	transition:
		transform var(--cn-duration-slow) var(--cn-easing-settle),
		box-shadow var(--cn-duration-slow) var(--cn-easing-settle),
		border-color var(--cn-duration-base) var(--cn-easing-standard),
		background-color var(--cn-duration-base) var(--cn-easing-standard);
}

/* Sticky header: warm frosted glass */
.ast-primary-sticky-header-active .site-header,
.ast-sticky-active.site-header {
	background-color: rgba(252, 250, 247, 0.94) !important;
	border-bottom-color: var(--cn-color-border-warm) !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ast-primary-sticky-header-active .site-header,
	.ast-sticky-active.site-header {
		background-color: rgba(251, 249, 245, 0.86) !important;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
}

/* In-content links: colour at rest, underline on hover/focus (WCAG + NN/g) */
.entry-content .cn-section-full a:not(.cn-button):not(.cn-card-cover-link):not(.menu-link):not(.cn-rental-search__option-link):not(.cn-rental-search__empty-wa) {
	color: var(--cn-color-link);
	text-decoration: none;
	text-underline-offset: 3px;
}

.entry-content .cn-section-full a:not(.cn-button):not(.cn-card-cover-link):not(.menu-link):hover,
.entry-content .cn-section-full a:not(.cn-button):not(.cn-card-cover-link):not(.menu-link):focus-visible {
	color: var(--cn-color-link-hover);
	text-decoration: underline;
	text-decoration-color: rgba(var(--cn-color-accent-rgb), 0.55);
	text-decoration-thickness: 2px;
}

/* Links inside running text (a <p>) must not rely on colour alone:
   link blue vs body text is 2.42:1, under the 3:1 WCAG 1.4.1 floor, and
   no lighter blue can reach 3:1 against #2e3438 while staying 4.5:1 on
   the cream background (axe link-in-text-block). A thin, translucent
   underline at rest; hover/focus keeps the 2px treatment above.
   Card-cover, button, list-group and menu links are untouched. */
.entry-content .cn-section-full p a:not(.cn-button):not(.cn-card-cover-link):not(.menu-link):not(.cn-rental-search__option-link):not(.cn-rental-search__empty-wa) {
	text-decoration: underline;
	text-decoration-color: rgba(var(--cn-color-accent-rgb), 0.4);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* List-group links are inline, so their box is the 18px glyph area even
   though the line is 25.5px; WCAG 2.5.8 / axe target-size wants 24px.
   inline-block makes the box the full line, and 2px of padding pulled
   back by the margin keeps the list rhythm byte-identical. */
.cn-list-group .cn-list-item > a {
	display: inline-block;
	padding-block: 2px;
	margin-block: -2px;
}

/* =========================================================
   CROSS-BROWSER COMPATIBILITY
   Chrome, Firefox, Safari (macOS + iOS), Edge.
   IE11 is not supported (CSS variables, Grid, modern Flex).
   Unlayered so fixes beat layered component defaults.
========================================================= */

/* Safari / iOS: prevent auto-zoom on form focus (needs ≥16px) */
@supports (-webkit-touch-callout: none) {
	.cn-form-panel input,
	.cn-form-panel textarea,
	.cn-form-panel select,
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 input[type="url"],
	.wpcf7 textarea,
	.wpcf7 select {
		font-size: max(16px, var(--cn-font-size-body));
	}
}

/* Native controls: strip platform chrome (Safari, Firefox, legacy Edge) */
.cn-button,
button.cn-button,
input.cn-button,
.wpcf7 input[type="submit"],
.wpcf7-submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.wpcf7 input[type="submit"],
.wpcf7-submit {
	display: inline-flex;
	display: -webkit-inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: var(--cn-font-family);
}

/* Flex gap fallback (Safari < 14.1, legacy browsers) */
@supports not (gap: 1px) {
	.cn-tag-group > * {
		margin: 4px 6px 4px 0;
	}

	.cn-button-group > * {
		margin: 0 10px 10px 0;
	}

	.cn-grid-auto,
	.cn-subgrid,
	.cn-split,
	.cn-trust-strip {
		gap: 0;
	}

	.cn-grid-auto > *,
	.cn-subgrid > * {
		margin-bottom: var(--cn-gap-card);
	}
}

/* Grid min() fallback */
@supports not (width: min(100%, 1px)) {
	.cn-grid-auto {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	.cn-grid-compact {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}

	.cn-subgrid {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}

	.cn-trust-strip {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

/* Container-query fallbacks when @container is unavailable */
@supports not (container-type: inline-size) {
	@media (min-width: 36rem) {
		.cn-section-full .cn-grid-auto {
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
		}
	}

	@media (min-width: 52rem) {
		.cn-section-full .cn-grid-auto {
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
		}
	}

	@media (min-width: 30rem) {
		.cn-section-full .cn-subgrid {
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
		}
	}

	@media (min-width: 48rem) {
		.cn-section-full .cn-subgrid {
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		}

		.cn-section-full .cn-subgrid:has(> .cn-subcard:nth-child(3):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

/* Flex column stretch: Safari needs min-width 0 on nested grids */
.cn-product-card,
.cn-category-card,
.cn-contact-method,
.cn-subcard,
.cn-card,
.cn-panel-white {
	min-width: 0;
}

.cn-grid-auto > *,
.cn-subgrid > *,
.cn-split > * {
	min-width: 0;
}

/* Subgrid equal-height rows — reinforced for Safari / Firefox / Chrome */
.cn-subgrid {
	align-items: stretch;
}

.cn-subgrid > .cn-subcard {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-self: stretch;
	align-self: stretch;
	height: 100%;
	min-height: 100%;
}

/* iOS safe-area: stage padding + fixed controls */
@supports (padding: max(0px)) {
	.entry-content .cn-section-full {
		padding-left: max(var(--cn-padding-stage-inline), env(safe-area-inset-left, 0px));
		padding-right: max(var(--cn-padding-stage-inline), env(safe-area-inset-right, 0px));
	}

	html:not(.cn-mobile-cta-active) #ast-scroll-top,
	html:not(.cn-mobile-cta-active) #scroll-to-top,
	html:not(.cn-mobile-cta-active) .back-to-top {
		bottom: max(32px, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
		left: max(32px, calc(16px + env(safe-area-inset-left, 0px))) !important;
		right: auto !important;
	}

	@media (max-width: 768px) {
		html:not(.cn-mobile-cta-active) #ast-scroll-top,
		html:not(.cn-mobile-cta-active) #scroll-to-top,
		html:not(.cn-mobile-cta-active) .back-to-top {
			bottom: max(20px, calc(12px + env(safe-area-inset-bottom, 0px))) !important;
			left: max(20px, calc(12px + env(safe-area-inset-left, 0px))) !important;
			right: auto !important;
		}
	}
}

/* Safari / Firefox: consistent custom list markers */
.cn-list-item::before,
li.cn-list-item::before,
.cn-lead-checklist > li::before {
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cn-faq summary {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	list-style: none;
}

.cn-faq summary::-webkit-details-marker {
	display: none;
}

/* macOS Safari: align weight perception with Chrome/Firefox */
@media not all and (pointer: coarse) {
	body,
	.entry-content .cn-section-full {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-synthesis: none;
	}
}

/* =========================================================
   COOKIE CONSENT BANNER (GDPR)
========================================================= */
.cn-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	padding: 14px max(14px, env(safe-area-inset-left, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-right, 0px));
	background: rgba(252, 250, 247, 0.98);
	border-top: 1px solid var(--cn-color-border-card);
	box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.cn-cookie-banner[hidden] {
	display: none !important;
}

.cn-cookie-banner__inner {
	max-width: var(--cn-content-max, 1120px);
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.cn-cookie-banner__title {
	margin: 0;
	font-size: var(--cn-font-size-body);
	font-weight: 700;
	color: var(--cn-color-text-heading);
}

.cn-cookie-banner__text {
	margin: 0;
	font-size: var(--cn-font-size-small);
	line-height: 1.55;
	color: var(--cn-color-text-main);
}

.cn-cookie-banner__link {
	color: var(--cn-color-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cn-cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

.cn-cookie-banner__btn {
	min-width: 7.5rem;
	margin: 0;
}

@media (min-width: 640px) {
	.cn-cookie-banner__inner {
		grid-template-columns: 1fr auto;
		align-items: start;
		column-gap: 20px;
	}

	.cn-cookie-banner__actions {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: center;
		flex-direction: column;
		align-items: stretch;
	}
}

.cn-cookie-banner__prefs {
	display: grid;
	gap: 10px;
	grid-column: 1 / -1;
	padding: 12px;
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-md, 8px);
	background: rgba(255, 255, 255, 0.7);
}

.cn-cookie-banner__prefs[hidden] {
	display: none !important;
}

.cn-cookie-pref {
	display: grid;
	gap: 4px;
}

.cn-cookie-pref label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: var(--cn-font-size-small);
	color: var(--cn-color-text-heading);
	cursor: pointer;
}

.cn-cookie-pref p {
	margin: 0 0 0 1.6rem;
	font-size: var(--cn-font-size-small);
	line-height: 1.45;
	color: var(--cn-color-text-main);
}

.cn-cookie-pref--locked label {
	cursor: default;
	opacity: 0.92;
}

/* Legacy Astra below-footer copyright (Customizer) — hidden; cn-site-footer is canonical. */
.ast-footer-copyright {
	display: none !important;
}

/* Unified site footer — padding-split rhythm (6px + 6px = 12px between rows) */
.cn-site-footer {
	--cn-footer-line-gap: 12px;
	--cn-footer-row-pad: calc(var(--cn-footer-line-gap) / 2);
	--cn-footer-links-gap: 12px;
	--cn-footer-bottom-safe: clamp(56px, 9vw, 80px);
	box-sizing: border-box;
	width: 100%;
	margin-bottom: clamp(28px, 5vw, 48px);
	padding:
		var(--cn-footer-row-pad)
		var(--cn-padding-inline-shell)
		var(--cn-footer-bottom-safe);
	background-color: var(--cn-color-bg-stage);
	border-top: 1px solid var(--cn-color-border-subtle);
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 0;
	max-width: 100%;
	font-size: var(--cn-font-size-small);
	line-height: 1.5;
	color: var(--cn-color-text-main);
	text-align: center;
}

.cn-site-footer > :is(p, ul) {
	margin: 0 !important;
	padding-inline: 0;
	max-width: var(--cn-max-width-site);
	width: 100%;
}

.cn-site-footer > p {
	padding-block: var(--cn-footer-row-pad);
}

.cn-site-footer__copyright {
	font-size: inherit;
	line-height: inherit;
	color: var(--cn-color-text-muted);
}

.cn-site-footer__name {
	color: var(--cn-color-text-heading);
}

.cn-site-footer__name strong {
	font-weight: 500;
	font-size: inherit;
}

.cn-site-footer__meta {
	color: var(--cn-color-text-muted);
	max-width: 68ch;
	margin-inline: auto;
}

.cn-site-footer__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
	max-width: none;
}

.cn-site-footer__contact a {
	color: var(--cn-color-accent);
	font-weight: 500;
	font-size: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cn-site-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: var(--cn-footer-links-gap);
	row-gap: var(--cn-footer-links-gap);
	max-width: 920px;
	padding:
		var(--cn-footer-row-pad)
		0
		var(--cn-footer-row-pad);
	list-style: none;
	border-top: 1px solid var(--cn-color-border-card);
	font-size: inherit;
}

.cn-site-footer__links li {
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.cn-site-footer__links a,
.cn-site-footer__manage {
	display: inline-block;
	color: var(--cn-color-accent);
	font-weight: 500;
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cn-site-footer__manage {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
	font-weight: 500;
	line-height: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* The footer legal links and the cookie button are 21px inline-block
   boxes stacked about 12px apart on a phone, which fails WCAG 2.5.8 /
   axe target-size: under 24px in one dimension and without the clear
   spacing that would excuse it. Lighthouse mobile caught it on
   2026-08-26 (accessibility 100 -> 97, both flagged nodes in
   .cn-site-footer__links).

   Padding takes each box to 25px and an equal negative margin gives it
   back, so the footer's vertical rhythm is untouched: measured on the
   live page, footer height and document height are both unchanged to
   the pixel while the undersized-target count goes 6 -> 0. The
   .cn-site-footer__manage rule above resets `padding: 0`, so this has
   to come after it rather than fold into the shared rule. */
.cn-site-footer__links a,
.cn-site-footer__manage {
	min-block-size: 24px;
	padding-block: 2px;
}

/* The padding above is deliberately NOT pulled back with a negative
   margin. That was the first attempt and it swapped one axe target-size
   failure for another: a -2px block margin makes each 25px link box
   overflow its own 21px <li>, so every link was overlapped by its
   neighbours' list items and axe reported "partially obscured, smallest
   space 12.1px" instead of "too small". Measured at Lighthouse's own
   emulation (412x823): 6 of 6 links escaped their <li> with the negative
   margin, 0 of 6 without it.

   STILL NOT PASSING, and left this way on purpose. axe now reports 23.5px
   of unobstructed height against a 24px floor -- half a pixel short. Do
   not try to buy it back with row-gap: axe-core was run directly against
   the live page at 412x823 with gaps of 8, 16 and 24px and the
   unobstructed height got monotonically WORSE (23.5 -> 19.5 -> 11.5px),
   so the obstruction does not come from the neighbouring links. A
   row-gap override here would also be dead code regardless: the
   `@media (max-width: 544px)` block below re-sets row-gap to
   --cn-footer-links-gap and wins by document order on every phone. */

.cn-site-footer__manage:focus-visible,
.cn-site-footer__links a:focus-visible,
.cn-site-footer__contact a:focus-visible {
	outline: none;
	box-shadow: var(--cn-shadow-focus-ring);
	border-radius: var(--cn-radius-small);
}

@media (max-width: 768px) {
	.cn-site-footer {
		padding-bottom: max(var(--cn-footer-bottom-safe), calc(48px + env(safe-area-inset-bottom, 0px)));
		margin-bottom: clamp(20px, 4vw, 32px);
	}
}

@media (max-width: 544px) {
	.cn-site-footer__links {
		flex-direction: column;
		align-items: center;
		row-gap: var(--cn-footer-links-gap);
	}
}
.cn-cookie-pref label:focus-within {
	outline: 2px solid var(--cn-color-accent);
	outline-offset: 2px;
}

.cn-legal-page .cn-legal-body {
	padding: 1.25rem 1.5rem;
}

.cn-legal-page .cn-legal-body h2 {
	margin-top: 1.5rem;
	margin-bottom: 0.65rem;
	font-size: clamp(20px, 1.05rem + 0.4vw, 24px);
}

.cn-legal-page .cn-legal-body h3 {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.cn-legal-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}

.cn-legal-nav__list a {
	font-weight: 600;
	color: var(--cn-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cn-cf7-privacy-notice,
.cn-cf7-privacy-accept {
	font-size: var(--cn-font-size-small);
	line-height: 1.5;
	color: var(--cn-color-text-main);
}

.cn-cf7-privacy-accept label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.cn-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100002;
}

.cn-skip-link:focus,
.cn-skip-link:focus-visible {
	left: max(1rem, env(safe-area-inset-left, 0px));
	top: max(1rem, env(safe-area-inset-top, 0px));
	width: auto;
	height: auto;
	padding: 0.65rem 1rem;
	background: var(--cn-color-accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-focus-ring);
	z-index: 100003;
}

html[data-cn-consent-functional="denied"] .wpcf7-recaptcha,
html[data-cn-consent-functional="denied"] .g-recaptcha {
	visibility: hidden !important;
	pointer-events: none !important;
}


/* =========================================================
   ENTRY-CONTENT PROSE (native WP lists, blockquotes)
   cn-* lists keep their own gutter system above; these rules
   target plain ul/ol outside the cn design-system components.
========================================================= */
.entry-content :is(ul, ol):not(
	.cn-list-group,
	.cn-lead-checklist,
	.cn-index-list,
	[class*="cn-"]
) {
	padding-left: 1.1rem;
	margin-left: 0;
}

.entry-content :is(ul, ol):not(
	.cn-list-group,
	.cn-lead-checklist,
	.cn-index-list
) > li {
	margin-bottom: 0.4rem;
}

.entry-content :is(ul, ol):not(
	.cn-list-group,
	.cn-lead-checklist,
	.cn-index-list
) :is(ul, ol) {
	margin-top: 0.35rem;
	padding-left: 1.1rem;
}

.entry-content blockquote {
	margin: 1.25rem 0;
	padding: 1rem 1.1rem;
	border-left: 3px solid var(--cn-color-accent);
	background: rgba(var(--cn-color-accent-rgb), 0.04);
	color: var(--cn-color-text-main);
	font-size: var(--cn-font-size-body);
	line-height: var(--cn-line-height-body);
}

.entry-content blockquote :last-child {
	margin-bottom: 0;
}

.entry-content .wp-caption-text,
.entry-content figcaption {
	margin-top: 0.5rem;
	font-size: var(--cn-font-size-small);
	color: var(--cn-color-text-muted);
	line-height: 1.5;
}

/* =========================================================
   VISUAL BREADCRUMBS (pairs with JSON-LD BreadcrumbList)
========================================================= */
.cn-breadcrumbs {
	margin: 0 0 var(--cn-space-24, 24px);
	font-size: var(--cn-font-size-small);
	color: var(--cn-color-text-muted);
	line-height: 1.5;
}

.cn-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cn-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.cn-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--cn-color-border-strong, #c5c5c5);
	pointer-events: none;
}

.cn-breadcrumbs a {
	color: var(--cn-color-text-muted);
	text-decoration: none;
}

.cn-breadcrumbs a:hover,
.cn-breadcrumbs a:focus-visible {
	color: var(--cn-color-accent);
	text-decoration: underline;
}

.cn-breadcrumbs [aria-current="page"] {
	color: var(--cn-color-text-heading);
	font-weight: 600;
}

/* =========================================================
   UX EXPERIENCE QUALITY (v1.1.13)
   Calm, premium interaction polish — no flashy motion.
========================================================= */

/* Touch: instant tap response, no double-tap zoom delay */
.cn-button,
.cn-rental-search__example,
.cn-rental-search__option-link,
.cn-category-nav a,
.cn-chip-link,
.cn-faq summary,
.cn-lead-intent-chips a {
	touch-action: manipulation;
}

/* Forms: clear error + success feedback (Contact Form 7) */
.wpcf7-not-valid {
	border-color: var(--cn-color-alert) !important;
	background-color: var(--cn-color-alert-bg) !important;
}

.wpcf7-not-valid:focus-visible {
	box-shadow: 0 0 0 2px var(--cn-color-alert-bg), 0 0 0 4px rgba(180, 35, 24, 0.35) !important;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--cn-color-alert);
	font-size: var(--cn-font-size-small);
	line-height: 1.4;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 14px 16px;
	border-radius: var(--cn-radius-medium);
	border-width: 1px;
	border-style: solid;
	font-size: var(--cn-font-size-body);
	line-height: 1.45;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: rgba(var(--cn-color-accent-rgb), 0.28);
	background: var(--cn-color-accent-wash);
	color: var(--cn-color-text-heading);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: rgba(180, 35, 24, 0.28);
	background: var(--cn-color-alert-bg);
	color: var(--cn-color-alert);
}

.wpcf7 form.submitting .wpcf7-submit {
	opacity: 0.72;
	cursor: wait;
	pointer-events: none;
}

/* Coarse pointer: keep fields stable on focus (no lift jitter) */
@media (pointer: coarse) {
	input[type="text"]:focus-visible,
	input[type="email"]:focus-visible,
	input[type="search"]:focus-visible,
	input[type="tel"]:focus-visible,
	input[type="date"]:focus-visible,
	textarea:focus-visible,
	select:focus-visible,
	.cn-rental-search__input:focus-visible {
		transform: none !important;
	}
}

/* FAQ: chevron affordance + calm open state */
.cn-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cn-faq summary::after {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.5;
	transition: transform var(--cn-duration-moderate) var(--cn-easing-mechanical);
}

.cn-faq details[open] summary::after {
	transform: rotate(-135deg) translateY(2px);
}

/* Table scroll fade is now fully JS-driven via .cn-table-scroll-fade — no CSS ::after needed */
/* See initTableScrollFade() in cn-interactions.js */

/* Rental search: loading, status, empty reassurance */
.cn-rental-search__loading {
	position: absolute;
	right: 16px;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(var(--cn-color-accent-rgb), 0.18);
	border-top-color: var(--cn-color-accent);
	border-radius: 50%;
	animation: cn-search-spin 0.75s linear infinite;
}

.cn-rental-search__loading[hidden] {
	display: none !important;
}

@keyframes cn-search-spin {
	to { transform: rotate(360deg); }
}

.cn-rental-search--loading .cn-rental-search__icon {
	opacity: 0.25;
}

.cn-rental-search__empty-hint {
	margin: 0 0 14px;
	color: var(--cn-color-text-muted);
	font-size: var(--cn-font-size-small);
	line-height: 1.45;
}

.cn-rental-search__option-link:active {
	background: var(--cn-color-accent-wash);
}

.cn-rental-search__example:active {
	background: var(--cn-color-accent-wash);
	border-color: rgba(var(--cn-color-accent-rgb), 0.35);
}

/* Mobile dock: calm rise when hero CTA leaves viewport */
@keyframes cn-dock-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.cn-mobile-cta-bar.cn-mobile-cta-bar--visible:not([hidden]) {
	animation: cn-dock-rise 0.3s var(--cn-easing-settle, cubic-bezier(0.2, 0, 0, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
	.cn-rental-search__loading {
		animation: none;
		border-top-color: var(--cn-color-accent);
		opacity: 0.55;
	}

	.cn-mobile-cta-bar.cn-mobile-cta-bar--visible:not([hidden]) {
		animation: none;
	}

	.cn-faq summary::after {
		transition: none;
	}
}

/* =========================================================
   FINAL ACCESSIBILITY OVERRIDE
   Keep this as the final block in the stylesheet.
   It deliberately remains unlayered so it wins over earlier
   layered and unlayered motion declarations.
========================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto !important;
	}

	.site::before {
		display: none !important;
	}

	.cn-card-white[data-active="true"],
	.cn-project-card[data-active="true"],
	.cn-transition,
	.cn-hover-lift,
	.cn-hover-ring,
	.cn-button,
	.cn-product-card,
	.cn-category-card,
	.cn-contact-method,
	.cn-subcard,
	.cn-panel-white,
	.cn-reveal {
		transform: none !important;
	}

	.cn-reveal {
		opacity: 1 !important;
	}

	/* The hero keyframes above are already cut to 0.01ms by the universal
	   rule; the staggered delays are not, so drop them too. */
	#hero .cn-hero-heading,
	#hero .cn-desc,
	#hero .cn-intro-helper,
	#hero .cn-button-group,
	#hero .cn-reassurance-strip {
		animation-delay: 0s !important;
	}
}

/* =========================================================
   MOBILE SURFACE REFINEMENT (≤921px)
   Keep the stage sheet (page wrapper card). Tighten padding,
   soften shadows, clarify canvas vs stage vs section colors.
========================================================= */
@media (max-width: 921px) {
	:root {
		--cn-padding-inline-shell: 14px;
		--cn-padding-stage-inline: 14px;
		--cn-padding-stage-block-start: 24px;
		--cn-padding-stage-block-end: 28px;
		--cn-padding-card: clamp(16px, 3.5vw, 22px);
		--cn-gap-card: clamp(14px, 3vw, 20px);
		--cn-radius-stage: 12px;
	}

	.site-content > .ast-container {
		padding-block: 10px 18px !important;
	}

	.entry-content .cn-section-full,
	.cn-section-full {
		background: linear-gradient(180deg, var(--cn-color-bg-stage) 0%, var(--cn-color-bg-stage-end) 100%) !important;
		border: 1px solid var(--cn-color-border-subtle) !important;
		border-radius: var(--cn-radius-stage) !important;
		box-shadow: var(--cn-shadow-stage-mobile) !important;
	}

	.cn-card,
	.cn-card-white,
	.cn-project-card,
	.cn-product-card,
	.cn-category-card,
	.cn-contact-method,
	.cn-trust-item,
	.cn-faq details,
	.cn-panel-white {
		background: var(--cn-color-bg-card) !important;
		box-shadow: none !important;
		border: 1px solid var(--cn-color-border-card) !important;
	}

	.cn-subcard {
		background: var(--cn-color-bg-subcard) !important;
		box-shadow: none !important;
		border: 1px solid var(--cn-color-border-card) !important;
	}

	.cn-trust-item--info {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	/* Keep the deep-sea colour block on mobile. Its children are white
	   text (see "Trust strip" above, 2026-08-13 bold direction); the old
	   light-surface override here left the four proof points as white on
	   cream (axe contrast 1.1:1, i.e. invisible on every phone). */
	.cn-trust-strip {
		background: linear-gradient(155deg, var(--cn-color-deep-sea) 0%, var(--cn-color-deep-sea-hover) 100%) !important;
		border: 1px solid var(--cn-color-deep-sea-hover) !important;
	}

	.cn-trust-strip .cn-trust-item {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
	}

	.cn-card > .cn-panel-white,
	.cn-card > section > .cn-panel-white {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}

	.cn-card-featured,
	.cn-product-card.cn-card-featured,
	.cn-category-card.cn-card-featured {
		background: var(--cn-color-accent-wash) !important;
		border: 1.5px solid var(--cn-color-accent) !important;
		box-shadow: none !important;
	}

	/* Subcards stay as individual tiles (schede), not line dividers */
	.cn-subgrid > .cn-subcard {
		background: var(--cn-color-bg-card) !important;
		border: 1px solid var(--cn-color-border-card) !important;
		border-radius: var(--cn-radius-medium) !important;
		box-shadow: none !important;
		padding: clamp(14px, 3vw, 18px) !important;
		height: auto !important;
		min-height: 0 !important;
		align-self: start !important;
	}

	/* Single column + content height: avoids iOS grid stretch overlap */
	.cn-subgrid {
		grid-template-columns: 1fr !important;
		align-items: start !important;
		align-content: start !important;
	}

	section.cn-card:has(.cn-subgrid),
	article.cn-card:has(.cn-subgrid) {
		contain: none !important;
		overflow: visible !important;
	}
}

/* =========================================================
   MOBILE ALIGNMENT SYSTEM (≤921px)
   Two intentional zones — apply consistently, never mix:

   A) Centered — hero, promise band, progress, .cn-section-centered
      intros: centred copy + full-width stacked CTAs.

   B) Left — cards, subcards, catalog tiles, contatti channels,
      action/advisory/cta bands: left copy + full-width stacked CTAs.
========================================================= */
@media (max-width: 921px) {
	/* --- Zone B: card & panel CTAs (left stack, equal width) --- */
	.cn-product-card .cn-card-actions,
	.cn-category-card .cn-card-actions,
	.cn-contact-method .cn-card-actions,
	.cn-category-picker__card .cn-card-actions,
	.cn-subcard .cn-card-actions,
	.cn-subcard .cn-subcard-actions,
	.cn-subcard > .cn-button-group:last-child,
	.cn-action-band .cn-button-group,
	.cn-advisory-panel .cn-button-group,
	.cn-cta-band .cn-button-group,
	.cn-whatsapp-action-group .cn-button-group,
	section.cn-card:not(.cn-section-centered) > .cn-card-footer-cta,
	article.cn-card:not(.cn-section-centered) > .cn-card-footer-cta,
	section.cn-card:not(.cn-section-centered) > .cn-card-actions--footer,
	article.cn-card:not(.cn-section-centered) > .cn-card-actions--footer {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
	}

	.cn-product-card .cn-card-actions .cn-button,
	.cn-category-card .cn-card-actions .cn-button,
	.cn-contact-method .cn-card-actions .cn-button,
	.cn-category-picker__card .cn-card-actions .cn-button,
	.cn-subcard .cn-card-actions .cn-button,
	.cn-subcard .cn-subcard-actions .cn-button,
	.cn-subcard > .cn-button-group:last-child .cn-button,
	.cn-action-band .cn-button,
	.cn-advisory-panel .cn-button,
	.cn-cta-band .cn-button,
	.cn-whatsapp-action-group .cn-button,
	section.cn-card:not(.cn-section-centered) > .cn-card-footer-cta .cn-button,
	article.cn-card:not(.cn-section-centered) > .cn-card-footer-cta .cn-button,
	section.cn-card:not(.cn-section-centered) > .cn-card-actions--footer .cn-button,
	article.cn-card:not(.cn-section-centered) > .cn-card-actions--footer .cn-button {
		width: 100%;
		max-width: 100%;
		align-self: stretch;
	}

	.cn-location-card .cn-button {
		align-self: stretch;
		width: 100%;
	}

	/* --- Zone A: centred intros (symmetric full-width CTAs) --- */
	#hero .cn-button-group,
	.cn-promise-band .cn-button-group,
	.cn-section-centered > .cn-button-group,
	.cn-card > .cn-section-centered .cn-button-group,
	.cn-card.cn-section-centered > .cn-button-group,
	section.cn-card.cn-section-centered > .cn-button-group {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		width: 100%;
		max-width: 100%;
	}

	#hero .cn-button-group .cn-button,
	.cn-promise-band .cn-button-group .cn-button,
	.cn-section-centered > .cn-button-group .cn-button,
	.cn-card > .cn-section-centered .cn-button-group .cn-button,
	.cn-card.cn-section-centered > .cn-button-group .cn-button,
	section.cn-card.cn-section-centered > .cn-button-group .cn-button {
		width: 100%;
		max-width: 100%;
	}

	/* Reassurance checklists: one item per row, centred in Zone A */
	.cn-reassurance-strip {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
	}

	.cn-reassurance-strip li {
		width: 100%;
		justify-content: center;
	}

	.cn-service-area-strip__list,
	.cn-wa-next-steps__grid {
		grid-template-columns: 1fr;
	}

	.cn-cluster-hub-strip__list {
		flex-direction: column;
		align-items: stretch;
	}

	.cn-cluster-hub-strip__link {
		justify-content: center;
	}

	/* Single-column grids so channel cards share the same width */
	.cn-grid-auto,
	.cn-channel-compare,
	.cn-category-picker {
		grid-template-columns: 1fr !important;
	}

	.cn-trust-panel__list {
		grid-template-columns: 1fr;
	}

	/* Avoid awkward mid-word breaks (e.g. Sardegna) */
	.cn-section-full p,
	.cn-section-full .cn-desc,
	.cn-product-card p,
	.cn-category-card p,
	.cn-contact-method p,
	.cn-location-card address,
	.cn-action-band__desc {
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: manual;
		text-wrap: pretty;
	}
}

/* =========================================================
   MOBILE DOCK — scroll-top above banner (right)
   Element class + JS inline bottom; beats Astra inline left.
========================================================= */
@media (max-width: 921px) {
	#ast-scroll-top.cn-scroll-top--dock,
	#scroll-to-top.cn-scroll-top--dock,
	.back-to-top.cn-scroll-top--dock {
		display: flex !important;
		visibility: visible !important;
		pointer-events: auto !important;
		position: fixed !important;
		left: auto !important;
		width: var(--cn-touch-target-min, 44px) !important;
		height: var(--cn-touch-target-min, 44px) !important;
		min-width: var(--cn-touch-target-min, 44px) !important;
		min-height: var(--cn-touch-target-min, 44px) !important;
		/* right + bottom set by JS to match .cn-mobile-cta-bar edges */
		z-index: 10000 !important;
	}
}

/* Google reviews — consistent width on injected product/catalog blocks */
.cn-google-reviews.cn-section-centered {
	max-width: var(--cn-max-width-card);
	width: 100%;
	margin-inline: auto;
}

/* BROWSE-ROUND-02: catalog rhythm and mobile card clarity */
.cn-category-section + .cn-category-section {
	margin-top: clamp(2rem, 5vw, 2.75rem);
}

.cn-google-reviews + .cn-cta-band,
.cn-google-reviews + section.cn-cta-band {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

@media (max-width: 921px) {
	.cn-product-grid > .cn-product-card .cn-card-actions.cn-button-group {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.cn-category-section__header.cn-split {
		gap: 1.25rem;
	}
}

/* Catalog — restrained expansion product sections (Batch 1.1) */
details.cn-expansion-more {
	margin-top: var(--cn-space-24, 1.5rem);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-md, 8px);
	padding: 0.75rem 1rem;
	background: var(--cn-color-bg-subtle, #f8f9fa);
}

details.cn-expansion-more summary {
	cursor: pointer;
	font-weight: 500;
	list-style: none;
}

details.cn-expansion-more summary::-webkit-details-marker {
	display: none;
}

details.cn-expansion-more[open] summary {
	margin-bottom: 0.75rem;
}

/* Directory hub — grouped sections on catalog (full mode) */
.cn-directory-hub--full .cn-subgrid {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

details.cn-directory-group {
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-md, 8px);
	padding: 0.75rem 1rem;
	background: var(--cn-color-bg-subtle, #f8f9fa);
}

details.cn-directory-group summary {
	cursor: pointer;
	list-style: none;
}

details.cn-directory-group summary::-webkit-details-marker {
	display: none;
}

.cn-directory-group__title {
	margin: 0;
	font-size: var(--cn-font-size-body);
	font-weight: 600;
}

details.cn-directory-group[open] .cn-directory-group__title {
	margin-bottom: 0.5rem;
}

/* =========================================================
   MOBILE EXPERIENCE v1.1.16 (≤921px)
   Knowledge graph surfaces + 48px tap targets + scroll perf
========================================================= */
@media (max-width: 921px) {
	:root {
		--cn-touch-target-min: 48px;
	}

	.cn-lab-choice,
	.cn-utility-choice,
	.cn-subcard > h3 > a,
	.cn-graph-links__list a,
	.cn-accessory-strip__list a {
		min-height: var(--cn-touch-target-min);
		display: inline-flex;
		align-items: center;
		padding-block: 10px;
	}

	.cn-graph-links__group + .cn-graph-links__group {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--cn-color-border-subtle);
	}

	.cn-graph-links__title {
		font-size: var(--cn-font-size-body);
		margin-bottom: 0.5rem;
	}

	.cn-seasonal-intent .cn-subgrid {
		gap: var(--cn-gap-card);
	}

	/* Below-fold cards: defer paint until near viewport.
	   Subcards are deliberately NOT in this list any more: a skipped
	   subcard is sized at the 120px placeholder, so a 300px link list
	   inside it spilled over the next card whenever layout was forced
	   (Lighthouse/axe target-size: "partially obscured"), and the real
	   size arriving on scroll jumped the page. Two or three subcards per
	   grid are not worth deferring. */
	.cn-product-grid .cn-product-card:nth-child(n+3),
	.cn-grid-auto .cn-product-card:nth-child(n+3) {
		content-visibility: auto;
		contain-intrinsic-size: auto 120px;
	}

	/* NO content-visibility on the below-fold sections. It was live here for
	   part of 2026-08-26 and then removed, deliberately. Do not add it back
	   without re-running both measurements below.

	   1. It broke accessibility. A skipped block keeps its placeholder
	      height while any geometry query forces its real layout, so the
	      document holds two inconsistent pictures of itself at once. axe
	      then sees page content (p.cn-mt-24, "Vai al catalogo completo")
	      painted over the footer legal links and fails target-size with
	      "partially obscured". Confirmed by running axe-core directly at
	      412x823: 1 violation with the rule, 0 without it, and 0 with the
	      rule kept but contain-intrinsic-size dropped.

	   2. Once style.css began shipping minified (assets/style.min.css,
	      64.9KB -> 28.5KB gzipped) it stopped paying for itself. It still
	      cuts Style & Layout (~1030ms -> ~700ms), but FCP, LCP and the
	      Lighthouse score were all slightly BETTER without it over two runs
	      each: FCP 2148/2237 vs 2174/2368, LCP 2793/2948 vs 2812/3168,
	      perf 94/92 vs 93/90. Main-thread work alone did not justify an
	      accessibility failure. */

	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 textarea,
	.wpcf7 select {
		min-height: var(--cn-touch-target-min);
		font-size: 16px;
	}

	.cn-mobile-cta-bar__actions .cn-button {
		min-height: var(--cn-touch-target-min);
		min-width: 5.5rem;
		padding-inline: 1rem;
	}

	.cn-contact-method .cn-button,
	.cn-channel-compare article {
		min-height: var(--cn-touch-target-min);
	}

	.cn-cluster-hub-strip__link {
		min-height: var(--cn-touch-target-min);
		display: inline-flex;
		align-items: center;
	}
}

/* Pages are not a blog — hide legacy/cached comment blocks until LSCache purge. */
body.page .comments-area,
body.page #comments {
	display: none !important;
}

/* --- FAQ & details/summary Dropdowns Modernization (Round 03) --- */
details {
	transition:
		border-color var(--cn-duration-base, 0.25s) ease,
		box-shadow var(--cn-duration-base, 0.25s) ease,
		background-color var(--cn-duration-base, 0.25s) ease;
}

details:hover {
	border-color: rgba(var(--cn-color-accent-rgb, 0, 102, 204), 0.35);
}

details[open] {
	border-color: var(--cn-color-accent, #0066cc);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

details summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	user-select: none;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	transition: color var(--cn-duration-base, 0.25s) ease;
}

details summary:hover {
	color: var(--cn-color-accent, #0066cc);
}

details summary::-webkit-details-marker {
	display: none !important;
}

details summary::marker {
	content: "" !important;
	display: none !important;
}

details summary::after {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	opacity: 0.6;
	transition:
		transform var(--cn-duration-moderate, 0.25s) cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity var(--cn-duration-base, 0.25s) ease;
}

details[open] summary::after {
	transform: rotate(-135deg) translateY(1px);
	opacity: 1;
}

/* Force all list items (both native and design system) to be left-aligned even if parent containers are centered (e.g. cn-section-centered) */
.entry-content .cn-section-full :is(ul, ol),
.entry-content .cn-section-full :is(ul, ol) li,
.entry-content :is(ul, ol),
.entry-content :is(ul, ol) li {
	text-align: left !important;
}


/* === CN MOBILE UX FRICTION PATCH — BEGIN (managed) === */
/* =========================================================
   MOBILE UX FRICTION — tap latency, focus zoom, touch feedback
   Unlayered and last in the file so it settles order-based ties
   against the other unlayered override blocks above.
   Managed by deploy/patch_mobile_ux_friction.py — edit there.
========================================================= */

/* ---- 1. Tap latency -------------------------------------------------
   Structural, not an enumeration. The two hand-maintained touch-action
   lists (@layer components + the unlayered block) had drifted out of sync
   with every control added since; bare element selectors cannot drift.
   `manipulation` drops double-tap-zoom and the gesture wait it implies,
   while leaving pan and pinch-zoom intact. */
a[href],
button,
summary,
label,
select,
[role="button"],
[role="tab"],
[role="option"],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"] {
	touch-action: manipulation;
}

/* ---- 2. Touch acknowledgement ---------------------------------------
   Touch has no hover, so a control that only styles :hover/:focus-visible
   stays visually inert until its JS handler repaints. That gap is what
   reads as tap lag even when the handler fires immediately. */
.cn-lab-choice:active,
.cn-utility-choice:active,
.cn-rental-finder__option:active,
.cn-rental-finder__start-btn:active,
.cn-rental-finder__category-link:active,
.cn-rental-finder__product-link:active,
.cn-rental-finder__alt-link:active,
.cn-rental-finder__wa-link:active,
.cn-finder-back:active,
.cn-finder-restart:active,
.cn-intro-helper__more:active,
.cn-intro-helper__links a:active,
.cn-expansion-catalog-link:active,
.cn-scan-more__summary:active,
.wpcf7-submit:active,
#cn-cookie-accept:active,
#cn-cookie-reject:active,
#cn-cookie-save:active,
#cn-cookie-customize:active {
	background-color: var(--cn-color-accent-wash, rgba(4, 107, 210, 0.08));
	border-color: rgba(var(--cn-color-accent-rgb, 4, 107, 210), 0.35);
}

@media (prefers-reduced-motion: no-preference) {
	.cn-lab-choice:active,
	.cn-utility-choice:active,
	.cn-rental-finder__option:active,
	.cn-rental-finder__start-btn:active,
	.cn-intro-helper__more:active,
	.cn-scan-more__summary:active,
	.wpcf7-submit:active {
		transform: translateY(1px);
	}
}

/* ---- 3. iOS focus auto-zoom safety net ------------------------------
   The per-rule floors are fixed at source (see the patch script), but a
   16px floor on every text-entry control keeps a future component from
   reintroducing the zoom. Unlayered, so it clears all four @layer blocks;
   `max()` means it never shrinks a field that is deliberately larger. */
@media (pointer: coarse) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="date"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input:not([type]),
	textarea,
	select {
		font-size: max(16px, var(--cn-font-size-body));
	}

	/* A field that lifts on focus fights the soft keyboard animating in. */
	input:focus-visible,
	textarea:focus-visible,
	select:focus-visible,
	.wpcf7-form-control-wrap:focus-within {
		transform: none;
	}
}

/* ---- 4. Event calculator controls -----------------------------------
   Replaces the inline style="" attributes in cn-layout-components.php,
   which no stylesheet could reach. */
.cn-space-calculator__field {
	display: flex;
	flex-direction: column;
	flex: 1 1 12rem;
	min-width: 0;
}

.cn-space-calculator__input,
.cn-space-calculator__select {
	width: 100%;
	min-height: var(--cn-touch-target-min, 48px);
	padding: 10px 12px;
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-small);
	font-family: inherit;
	font-size: max(16px, var(--cn-font-size-body));
	box-sizing: border-box;
}

.cn-space-calculator__input:focus-visible,
.cn-space-calculator__select:focus-visible {
	outline: none;
	border-color: var(--cn-color-accent);
	box-shadow: var(--cn-shadow-focus-ring);
}

/* ---- 5. Pagination tap targets --------------------------------------
   Pagination comes from Astra; the child theme never styled it, so page
   links inherit whatever the parent gives them. On a coarse pointer that
   is below the 48px WCAG 2.5.5 target. Scoped to coarse pointers so the
   mouse layout is untouched, and min-width is safe here because these are
   short numeric links that were already narrower than they are tall. */
@media (pointer: coarse) {
	.ast-pagination a,
	.page-numbers,
	a.page-numbers,
	.nav-links a {
		min-height: var(--cn-touch-target-min, 48px);
		min-width: var(--cn-touch-target-min, 48px);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
}
/* === CN MOBILE UX FRICTION PATCH — END (managed) === */

/* === LANGUAGE SWITCHER DROPDOWN (supersedes the old LABEL FIX) ===
   2026-08-17, from USER SCREENSHOTS (first real visual feedback all week):
   the dropdown rendered as a dark box with bare unlabelled flags, stray
   grey "pagina iniziale" text on the last rows, and nothing at all in the
   mobile flyout menu.

   History: the old block here hid .cn-lang-label site-wide — correct for
   the OLD switcher (a horizontal flag row in the desktop menu, where the
   name wrapping under each flag was a bug). The concurrent session then
   replaced that switcher entirely with a <details class="cn-lang-switcher">
   dropdown (10 languages, inline-SVG flags, its own #cn-lang-switcher-css
   inline style block that WANTS the labels visible as menu rows). The old
   hiding rule kept applying — its properties (position/clip/width) are
   uncontested by the new inline CSS, so specificity never even came into
   play — producing exactly the flag-only rows in the screenshots. The
   justify-content:center companion rule squished them centred. Both
   removed, replaced with dropdown-supporting styles.

   !important on backgrounds/colours: the screenshots show the pill and
   menu rendering DARK despite the PHP inline CSS setting #fff — some
   rule (unidentified; likely Astra menu-context styling of the <li
   class="menu-item"> wrapper's children) is winning over the PHP's
   plain declarations. Forcing the intended light design at file end,
   this file's standard must-win pattern. Colours match the site's
   tokens rather than the PHP's hardcoded greys, so the switcher joins
   the design system properly.

   NOTE for functions.php owners: the "pagina iniziale" hint text
   (cn-lang-hint) is hardcoded Italian and shows untranslated on all 9
   non-IT subdomains — that's PHP content, not fixable from CSS; left
   visible but styled. */
.cn-lang-switcher > summary.cn-lang-current {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--cn-color-bg-card) !important;
	color: var(--cn-color-text-heading) !important;
	border: 1.5px solid var(--cn-color-border-subtle) !important;
	border-radius: var(--cn-radius-pill);
	padding: 0.5rem 0.9rem;
	box-shadow: var(--cn-shadow-rest);
}

.cn-lang-switcher > summary.cn-lang-current:hover,
.cn-lang-switcher[open] > summary.cn-lang-current {
	background: var(--cn-color-accent-wash) !important;
	border-color: var(--cn-color-accent) !important;
}

.cn-lang-current__name {
	color: var(--cn-color-text-heading) !important;
	font-weight: 700;
}

.cn-lang-globe,
.cn-lang-caret {
	color: var(--cn-color-accent) !important;
}

/* One arrow, not two. The site-wide "details summary::after" chevron
   (FAQ & details/summary modernization block, earlier in this file)
   also lands on this <summary>, right next to the switcher's own inline
   SVG caret -- so the pill showed a second, fainter arrow beside the
   first. The SVG caret is the designed one: drop the generic
   pseudo-element here and give the SVG the same open-state flip the
   generic chevron had, so the affordance is unchanged. */
.cn-lang-switcher > summary.cn-lang-current::after {
	content: none;
	display: none;
}

.cn-lang-switcher .cn-lang-caret {
	transition: transform var(--cn-duration-moderate, 0.25s) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cn-lang-switcher[open] .cn-lang-caret {
	transform: rotate(180deg);
}

.cn-lang-menu {
	background: var(--cn-color-bg-card) !important;
	color: var(--cn-color-text-main) !important;
	border: 1px solid var(--cn-color-border-subtle) !important;
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-elevated-hover) !important;
	padding: 0.4rem;
}

.cn-lang-menu .cn-lang-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.65rem;
	padding: 0.6rem 0.7rem;
	border-radius: var(--cn-radius-small);
	color: var(--cn-color-text-main) !important;
	text-decoration: none !important;
}

.cn-lang-menu .cn-lang-link:hover,
.cn-lang-menu .cn-lang-link:focus-visible {
	background: var(--cn-color-accent-wash) !important;
	color: var(--cn-color-text-heading) !important;
}

/* Undo every property the old hiding rule set — labels are real menu
   text now. */
.cn-lang-menu .cn-lang-label {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: nowrap;
	border: 0;
	flex: 1;
	font-weight: 600;
	color: var(--cn-color-text-heading) !important;
}

.cn-lang-hint {
	color: var(--cn-color-text-muted) !important;
	font-size: var(--cn-font-size-caption, 13px);
}

/* Flags: consistent crisp size (inline SVGs, scale cleanly at any zoom).
   The flag svg is the only unclassed svg in each context. */
.cn-lang-menu .cn-lang-link > svg,
.cn-lang-switcher > summary.cn-lang-current > svg:not(.cn-lang-globe):not(.cn-lang-caret) {
	width: 26px;
	height: 17px;
	flex: none;
}

/* Mobile menu accordion presentation.
   CORRECTION (2026-08-17, caught live before it aged): the first version
   of this block scoped these rules by viewport width alone (≤921px),
   which also captured the DESKTOP header's popover at 768-921px — the
   site shows the desktop header from 768px up — so opening the dropdown
   there forced the menu static and ballooned the header from ~111px to
   ~996px (measured live). Now scoped to .ast-mobile-header-content, the
   mobile menu's own container, so the desktop popover is untouched at
   every width where it exists.
   KNOWN LIMITATION, needs PHP not CSS: the mobile menu markup does NOT
   currently contain the switcher <li> at all — Astra renders the mobile
   menu separately and the switcher is only appended to the desktop menu
   render (confirmed live at 480px: no .cn-lang-switcher-item anywhere in
   .ast-mobile-header-content). So on true mobile widths (<768px) there
   is currently NO language switcher, and no CSS can conjure one from
   markup that isn't there. These rules are the styling for it, ready
   for when the menu filter in functions.php also covers the mobile menu
   location — that PHP change belongs to the switcher's owners (active
   uncommitted work by another session; deploying functions.php blind
   has fataled production before). */
.ast-mobile-header-content .cn-lang-switcher-item {
	display: block !important;
	padding: 10px 20px 18px;
}

.ast-mobile-header-content .cn-lang-switcher {
	display: block;
	width: 100%;
}

.ast-mobile-header-content .cn-lang-switcher > summary.cn-lang-current {
	width: 100%;
	justify-content: flex-start;
}

/* The PHP's own ≤600px rule hides the current-language name to save
   pill space — in the full-width flyout there's room, keep it. */
.ast-mobile-header-content .cn-lang-current__name {
	display: inline !important;
}

.ast-mobile-header-content .cn-lang-menu {
	position: static !important;
	min-width: 0 !important;
	max-height: none !important;
	margin-top: 0.5rem !important;
	box-shadow: none !important;
}
/* === LANGUAGE SWITCHER DROPDOWN — END === */

/* === ASTRA GLOBAL COLORS: finish the customisation ===
   Astra's Customizer "Global Colors" palette has 9 slots. Checked all
   9 (getComputedStyle(document.documentElement) on --ast-global-color-N):
   slot 0 (#046bd2) and 1 (#045cb4) were deliberately set to match this
   site's accent — --cn-color-accent literally reads `var(--ast-global-
   color-0, #046bd2)` already. Slots 2/3/6 were never touched and are
   still Astra's factory defaults (#1e293b / #334155 / #e2e8f0 — the
   stock slate palette Astra ships with), which is the root cause behind
   the 404 page heading/search-input border (color-2 / color-6) and
   WordPress search-results entry titles (color-2, via Astra's own
   `.entry-title a` customizer rule) — both confirmed live via
   getComputedStyle. (Primary desktop nav text turned out to be a
   separate, same-shape bug: a pre-existing same-file rule at higher/tied
   specificity, not this variable — fixed directly at that rule instead,
   see the DESKTOP HEADER NAV block.) Overriding the variables here —
   rather than only the individual selectors that consume them — fixes
   the same root cause for every current AND future un-styled corner of
   the site that falls through to an Astra default, not just the ones
   found by hand.
   Correction re: !important — earlier reasoning here invoked cascade-
   layer !important-reversal, which doesn't actually apply: neither this
   rule nor Astra's own :root customizer output uses @layer, so it's a
   plain unlayered-vs-unlayered contest decided by source order, and
   `astra-theme-css` is an explicit wp_enqueue_style dependency of this
   child stylesheet (functions.php) — Astra's inline <style> is
   guaranteed to print first regardless. A plain (non-!important)
   declaration here would already win on source order alone. Left the
   !important in place anyway since it's live, verified working, and
   costs nothing today — but it's defensive belt-and-suspenders, not
   load-bearing; don't assume the reasoning that follows some other
   !important elsewhere in this file (fighting genuine higher-specificity
   Astra output) applies here too.
   Confirmed via getComputedStyle before writing this that slots 4/5/7/8
   (#f9fafb / #FFFFFF / #cbd5e1 / #94a3b8) aren't causing any bug found
   so far — left untouched rather than remapping speculatively. Also
   confirmed (code-review pass): slots 2/3/6 have a few more Astra-core
   consumers than the 3 bugs above (WooCommerce price/cart colours,
   related-posts widget, comments border, footer copyright) — but this
   site has no active WooCommerce or comments markup on any loaded page
   (checked: no woocommerce.css enqueued, no comment-form/#respond in
   rendered output), so those consumers are dormant, not a live risk. */
:root {
	--ast-global-color-2: var(--cn-color-text-heading) !important;
	--ast-global-color-3: var(--cn-color-text-main) !important;
	--ast-global-color-6: var(--cn-color-border-subtle) !important;
}
/* === ASTRA GLOBAL COLORS — END === */

/* === CN CROSSLINK MESH FIX ===
   cn_inject_crosslink_mesh() (includes/cn-seo-framework.php) auto-appends
   a "Frequently Rented Together" block to the_content on every singular
   page site-wide (all 6 languages, via add_filter('the_content', ..., 25))
   — but hardcodes Tailwind-convention utility class names (cn-bg-gray-50,
   "cn-grid-cols-1 md:cn-grid-cols-3", cn-shadow-sm, cn-rounded-lg, etc.)
   that were never defined anywhere in this project's CSS (confirmed by
   grep — zero hits, and zero other files in the theme use this naming
   convention). The whole module has been rendering completely unstyled
   — no card, no grid, no spacing — on every page it appears on, in every
   language. Styled here by tag, scoped under .cn-crosslink-mesh (the one
   class in its markup that *is* safe/unique — confirmed no prior
   definition anywhere), using this project's own design tokens instead
   of adding a parallel Tailwind layer. If cn_inject_crosslink_mesh() is
   ever edited, keep the tag structure (div > h3 + p + ul > li > a) —
   that structure is what this targets, not the Tailwind class names.
   h3/p font-size+color are !important: being unlayered only wins ties
   against OTHER unlayered rules by specificity, and .entry-content
   .cn-section-full h3/p (also unlayered, several places in this file,
   e.g. the "TYPOGRAPHY CONSISTENCY" block) has higher specificity
   (0,2,1) than a bare `.cn-crosslink-mesh h3` (0,1,1) — it was only
   coincidentally harmless before because both sides happened to use the
   same token values; !important makes that not depend on coincidence. */
.cn-crosslink-mesh {
	max-width: var(--cn-max-width-site);
	margin: var(--cn-space-8, 3rem) auto 0;
	padding: var(--cn-padding-card);
	background-image: linear-gradient(155deg, var(--cn-color-sand-wash) 0%, var(--cn-color-bg-light) 100%);
	border: 1px solid var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-large);
	box-shadow: var(--cn-shadow-rest);
}

.cn-crosslink-mesh h3 {
	margin: 0 0 6px;
	font-size: var(--cn-font-size-h3) !important;
	font-weight: 700;
	color: var(--cn-color-text-heading) !important;
}

.cn-crosslink-mesh p {
	margin: 0 0 var(--cn-space-4, 1rem);
	font-size: var(--cn-font-size-small) !important;
	color: var(--cn-color-text-muted) !important;
}

.cn-crosslink-mesh ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cn-gap-card);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 922px) {
	.cn-crosslink-mesh ul {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cn-crosslink-mesh li {
	padding: var(--cn-padding-small);
	background-color: var(--cn-color-bg-card);
	border: 1px solid var(--cn-color-border-card);
	border-radius: var(--cn-radius-medium);
	box-shadow: var(--cn-shadow-rest);
	transition:
		box-shadow var(--cn-duration-base) var(--cn-easing-standard),
		transform var(--cn-duration-base) var(--cn-easing-standard);
}

@media (hover: hover) and (pointer: fine) {
	.cn-crosslink-mesh li:hover {
		box-shadow: var(--cn-shadow-elevated-hover);
		transform: translateY(-2px);
	}
}

.cn-crosslink-mesh a {
	display: block;
	font-weight: 600;
	text-decoration: none;
}

.cn-crosslink-mesh a:hover {
	/* text-decoration-line only, NOT the `text-decoration: underline`
	   shorthand — the shorthand resets -thickness/-color to initial too,
	   which would silently drop the site's signature thick accent-coloured
	   hover underline (.entry-content a:hover, @layer primitives) since
	   this rule is unlayered and unlayered normal beats layered normal
	   regardless of specificity. Longhand here only touches the one
	   property it needs to, leaving thickness/colour to cascade in from
	   that rule same as every other in-content link. */
	text-decoration-line: underline;
}
/* === CN CROSSLINK MESH FIX — END === */

/* === 404 PAGE: align with site palette ===
   Astra's default 404 template (.ast-404-layout-1 / .page-title /
   .page-sub-title / .search-field / .search-submit) had zero cn-*
   classes anywhere on it — never touched by this project. Heading
   rendered in Astra's generic slate (#1e293b, not this site's
   --cn-color-text-heading) and the search field used Astra's stock
   grey input instead of the border/radius/background pattern used for
   every other text input on the site (see .cn-form-panel .wpcf7-form-
   control). The search button is a small icon absolutely positioned
   inside the field's right padding (confirmed via computed position —
   not a separate visible button), so only its icon fill changes, not
   a background/box treatment that would look wrong on that shape. */
.ast-404-layout-1 .page-title {
	color: var(--cn-color-text-heading);
}

.ast-404-layout-1 .page-sub-title {
	color: var(--cn-color-text-muted);
	font-weight: 400;
}

.ast-404-layout-1 .search-field {
	border-color: var(--cn-color-border-subtle);
	border-radius: var(--cn-radius-small);
	background-color: var(--cn-color-bg-subcard);
}

.ast-404-layout-1 .search-field:focus-visible {
	outline: none;
	border-color: var(--cn-color-accent);
	box-shadow: var(--cn-shadow-focus-ring);
}

.ast-404-layout-1 .search-submit .ast-icon svg {
	fill: var(--cn-color-accent);
}
/* === 404 PAGE — END === */

/* === BOLD REDESIGN (v1.2.0) — POST-DEPLOY FIX ===
   Checked live via getComputedStyle immediately after deploying v1.2.0
   and found several of that round's new rules were silently losing —
   same root cause as the nav-colour bug earlier this session, but via
   cascade LAYERS this time rather than plain specificity: the new hero
   text-colour overrides were added inside @layer components (right next
   to the #hero rules they extend), but multiple pre-existing "typography
   consistency" rules that also match hero text are UNLAYERED — and for
   normal (non-!important) declarations, ANY unlayered rule beats EVERY
   layered rule regardless of specificity. Confirmed via raw CSS text
   fetch (not just computed styles) exactly which rule was winning in
   each case before writing this:
     - .entry-content .cn-section-full .cn-hero-heading sets
       color: var(--cn-color-text-heading) !important (unlayered) — beat
       the layered #hero .cn-hero-heading white-text rule outright.
     - .cn-section-centered .cn-hero-subheading sets
       color: var(--cn-color-accent) (unlayered, no !important) — still
       beat the layered #hero .cn-hero-subheading rule on layer alone,
       despite that rule's higher specificity (1 ID vs 2 classes) —
       layer trumps specificity for normal declarations, full stop.
     - .cn-button / .cn-button-small / ... { font-weight: 600 } and a
       separate { border-radius: var(--cn-radius-medium) } — both
       unlayered, no !important, simply placed later in the same
       unlayered section than nothing (this file's base .cn-button rule
       IS layered, so same layer-beats-specificity story applies).
   Fixing here — unlayered, file end, matching this file's own long-
   standing convention for rules that must reliably win — rather than
   editing the original rules in place a second time, since those
   originals are correct defaults for every context outside the ones
   fixed here (e.g. .cn-hero-subheading's accent-blue IS correct on a
   light background; only the #hero dark-gradient context needs white). */
#hero .cn-hero-heading,
#hero .cn-hero-rotator__slot,
#hero .cn-hero-rotator__suffix {
	color: #ffffff !important;
}

#hero .cn-hero-subheading {
	color: rgba(255, 255, 255, 0.92) !important;
}

#hero .cn-desc {
	color: rgba(255, 255, 255, 0.86) !important;
}

#hero .cn-button-secondary {
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
}

#hero .cn-button-ghost {
	color: #ffffff !important;
}

.cn-button-primary,
.cn-button-secondary,
.cn-button-ghost {
	font-weight: 700 !important;
	border-radius: var(--cn-radius-pill) !important;
}
/* === BOLD REDESIGN POST-DEPLOY FIX — END === */

/* --- Language switcher: stop the global svg{height:auto} reset collapsing
   the flags. cn-lang-flag collapse fix.

   Both the flag and the caret computed height:auto and laid out at 0x0
   inside the flex row: the width resolved, the height did not, so the menu
   rendered as labels with invisible flags. Explicit dimensions with
   !important are the only thing that beats a global element-level reset;
   aspect-ratio is set too so the flags stay correct if a future change
   drops one of the two values. --- */
.cn-lang-switcher .cn-lang-flag,
.cn-lang-menu .cn-lang-link > svg,
.cn-lang-switcher > summary.cn-lang-current > svg:not(.cn-lang-globe):not(.cn-lang-caret) {
	width: 26px !important;
	height: 17px !important;
	min-width: 26px;
	min-height: 17px;
	aspect-ratio: 26 / 17;
	flex: none;
	display: block;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.16);
}

.cn-lang-switcher .cn-lang-caret {
	width: 10px !important;
	height: 6px !important;
	min-width: 10px;
	min-height: 6px;
	flex: none;
	display: block;
}

.cn-lang-switcher .cn-lang-globe {
	width: 18px !important;
	height: 18px !important;
	flex: none;
	display: block;
}

/* =========================================================================
   2026-08-26 VISUAL REFRESH: width, palette, list markers, language menu
   =========================================================================
   Four issues reported from desktop screenshots. All four are fixed here,
   unlayered and at the file end, because every rule being corrected is
   itself unlayered (the hero clamp at ~line 6283, the marker dots at ~3784
   and ~3890) or is an Astra rule that outranks our components by one type
   selector. Layered overrides would silently lose to those.

   1. WIDTH. --cn-max-width-site was 1200px and #hero was additionally
      clamped to the 65ch prose measure, so on a 1440px viewport the hero
      banner rendered 581px wide inside a 1104px shell: a narrow ribbon with
      the gradient wasted on empty margin. The shell goes to 1320px and the
      hero becomes a real full-width banner, with only its text kept to a
      readable measure.

   2. PALETTE. The page carried four accent families at once: blue accent,
      deep sea, terracotta, and a sand/beige canvas. Rather than chase the
      dozen call sites, the warm family is retargeted at token level so
      every existing usage recolours coherently in one place. Blue stays the
      single accent, deep sea stays the dark, everything else becomes a cool
      neutral.

   3. LIST MARKERS. Two separate faults. (a) .cn-trust-item strong::before
      and its service-strip twin drew a 7px dot with position:static inside
      a display:block <strong>, so the dot landed on its own line above the
      label instead of beside it, reading as a broken bullet; on the dark
      strip it was also sand-coloured, which is where the stray yellow came
      from. Both are removed. (b) Astra sets `.entry-content ul,ol {padding:
      revert}` (0,1,1), which outranks our `.cn-service-area-strip__list
      {padding:0}` (0,1,0) and restored the browser's 40px indent on a grid
      list that has no markers at all, pushing the whole strip off centre.
      Re-asserted at (0,2,0).

   4. LANGUAGE MENU. .cn-lang-menu had no positioning at any breakpoint, so
      opening it put a 907px tall <ul> into normal flow and stretched the
      header to 948px. It is now an absolutely positioned two-column panel.
      The existing .ast-mobile-header-content override keeps its
      `position:static !important` and still wins on mobile.
   ========================================================================= */

:root {
	/* 1. Wider shell for modern desktop widths. */
	--cn-max-width-site: 1320px;

	/* 2. Collapse the warm family into cool neutrals. Keeping the token
	   names means every existing reference updates without edits. */
	--cn-color-bg-section: #eceef1;
	--cn-color-bg-stage: #f7f8fa;
	--cn-color-bg-stage-end: #f5f6f8;
	--cn-color-bg-light: #f2f4f6;
	--cn-color-bg-subcard: #f9fafb;
	--cn-color-border-subtle: #dfe3e8;
	--cn-color-border-warm: rgba(28, 40, 54, 0.1);
	--cn-color-sand-solid: #dfe4ea;
	--cn-color-sand-wash: #eef1f4;

	/* Terracotta is retired as a second accent and aliased onto deep sea,
	   so gradients and left-borders that referenced it stay high contrast
	   instead of turning muddy. */
	--cn-color-terracotta: #0a3d5c;
	--cn-color-terracotta-hover: #093452;
	--cn-color-terracotta-rgb: 10, 61, 92;
	--cn-color-terracotta-wash: #e8eef4;

	/* Two-stop blue, no warm third stop. */
	--cn-gradient-sunset: linear-gradient(135deg, var(--cn-color-deep-sea) 0%, var(--cn-color-accent) 100%);
}

/* --- 1. Hero is a banner, not a prose column ---------------------------- */

.cn-section-full > header#hero.cn-section-centered {
	max-width: var(--cn-max-width-card);
}

.cn-section-full > header#hero.cn-section-centered > * {
	margin-inline: auto;
}

/* Without a cap the h1 would run the full 1200px and read as a headline
   ticker. 900px lands it on two lines at the clamped hero size. */
.cn-section-full > header#hero.cn-section-centered > .cn-hero-heading {
	max-width: min(100%, 900px);
}

/* --- 3. List markers ---------------------------------------------------- */

.cn-trust-item strong::before,
.cn-trust-strip .cn-trust-item strong::before,
.cn-service-area-strip__list strong::before {
	content: none;
}

.entry-content .cn-service-area-strip__list,
.cn-service-area-strip__list {
	padding-left: 0;
	padding-inline-start: 0;
}

/* The one genuinely bulleted list on the home page still used the browser's
   full-size disc while every other cn-* list uses a small muted dot. */
.entry-content .cn-wa-next-steps__list,
.cn-wa-next-steps__list {
	padding-left: 1.25rem;
	padding-inline-start: 1.25rem;
}

.cn-wa-next-steps__list > li::marker {
	color: var(--cn-color-text-muted);
	font-size: 0.8em;
}

/* --- 4. Language menu --------------------------------------------------- */

.cn-lang-switcher {
	position: relative;
}

/* position is !important for the same reason the colours above it are: an
   unlayered plain declaration here still loses to something in Astra's stack
   that computes the menu to position:relative (no rule for it is visible via
   CSSOM, so it is not worth hunting further). display/grid land fine without
   it; only the positioning properties need forcing. Verified by setting them
   inline with priority: the <li> collapses from 475px back to 40px and the
   panel floats clear of the header. */
@media (min-width: 922px) {
	.cn-lang-switcher > .cn-lang-menu {
		position: absolute !important;
		top: calc(100% + 8px) !important;
		right: 0 !important;
		left: auto !important;
		z-index: 1000 !important;
		display: grid;
		grid-template-columns: repeat(2, minmax(148px, 1fr));
		gap: 2px;
		min-width: 320px;
		max-height: min(70vh, 420px);
		overflow-y: auto;
		margin: 0;
	}
}

/* =========================================================================
   2026-08-26 TARGET SIZE (WCAG 2.2 SC 2.5.8, 24x24 CSS px minimum)
   =========================================================================
   Five groups of controls were shipping under 24px tall. Measured live at
   375px: 22 failures on the catalogue, 7 on a product page, 7 on the
   catalogue at 1440px, 3 on contatti. All of them are block-level links or
   summaries whose height came from line-height alone (14px text, ~20-23px
   box) with no block padding.

   Earlier work tried to satisfy this with row-gap on the footer and it did
   not move the score. That is expected: SC 2.5.8's spacing exception is
   assessed on an undersized target plus its clearance, but the checkers used
   here report on the element box, so growing the box is what actually
   clears it. min-block-size is used rather than padding so the change is
   purely a floor: anything already >= 24px is untouched, and the pages grow
   by ~23px total.

   display:flex is applied only to the two groups that are already flex
   items of a flex parent (.cn-intro-helper__links and
   .cn-site-footer__contact both set display:flex), so centring their label
   inside the taller box costs nothing. The other three keep their display,
   deliberately: <summary> loses its disclosure semantics in some engines
   when its display is changed, and this project already carries a global
   `details summary::after` chevron that must keep working.

   Verified after the change: 0 failures on all four pages at both 375px and
   1440px, no horizontal overflow at either width.
   ========================================================================= */

.cn-intro-helper__links a,
.cn-site-footer__contact a {
	display: flex;
	align-items: center;
	min-block-size: 24px;
}

.cn-breadcrumbs a,
li.cn-bg-white > a,
details.cn-directory-group > summary {
	min-block-size: 24px;
}

/* =========================================================================
   2026-08-26 MOBILE CTA BAR: stop the copy collapsing to a 1-character column
   =========================================================================
   Reported from a screenshot: on a phone the bar's label rendered one letter
   per line, a tall vertical strip of text, and the WhatsApp button was cut off
   the right edge.

   Measured on a product page at 375px:
     .cn-mobile-cta-bar          351px wide, 323px inside its 14px padding
     .cn-mobile-cta-bar__actions 377px intrinsic, flex-shrink:0
     .cn-mobile-cta-bar__copy    flex:1 1 auto, min-width:0  ->  0px wide, 726px tall
     bar height 752px, actions overflowing the viewport by 41px

   Both faults come from the same place. The actions group refuses to shrink
   and already wants 54px more than the bar has, so the copy - which is allowed
   down to min-width:0 - absorbs the whole deficit and reaches zero width. Its
   text still has to render, so it wraps after every character.

   The existing mitigation only hides .cn-mobile-cta-bar__copy span below
   360px. That is too narrow a breakpoint (the bar is already broken at 375px)
   and too small a change (the <strong> keeps the collapsed column alive).

   Below 600px the copy is dropped entirely rather than allowed to collapse.
   Nothing is lost: its <strong> repeats the first button's label verbatim
   ("Richiedi preventivo") and the <span> is the "Tempo stimato" hint. The
   buttons then size to their content and may shrink, with tighter inline
   padding, which fits all three in one row with room to spare.
   min-inline-size is released because the touch target is carried by
   min-block-size (48px measured) and the narrowest button still comes out at
   71px, well past 24px.

   Verified live at 375px, before -> after:
     bar height        752px -> 74px
     copy box          0x726 -> not rendered
     actions width     377px -> 321px
     viewport overflow  +41px -> -27px
     buttons           151 / 71 / 87px, none clipped, all 48px tall
     document overflow-x 0

   REFINEMENT, same day: the first pass kept white-space:nowrap and fell back
   to an ellipsis, which was fine in Italian but truncated the primary CTA in
   German ("Fordern Sie ein Angebot an" wanted 189px against 177px at 375px).
   Truncating a call to action is worse than a slightly taller bar, so labels
   now wrap instead. min-inline-size is min-content rather than 0: at 0 the
   flex algorithm shrank buttons below their own longest word and clipped the
   unbreakable "WhatsApp" at 320px. min-content floors each button at its
   widest word, and the three minimums still total ~218px inside the 260px
   available at 320px.

   Final matrix, no clipping and no document overflow anywhere:
     375px IT  bar 74px, all labels on one line
     375px DE  bar 79px, primary on two lines
     320px IT  bar 79px, primary on two lines
     320px DE  bar 97px, primary on three lines
   The taller bar is safe: updateBarOffset() in cn-interactions.js writes
   --cn-mobile-cta-bar-offset from innerHeight - bar.top on every layout, so
   the scroll reserve tracks the real height. 5.5rem is only the pre-JS
   fallback.

   A font-size:14px was tried here first and quietly did nothing: line ~7083
   sets font-size:var(--cn-font-size-ui-min) !important on .cn-button, a
   deliberate 16px floor for UI controls. The declaration has been removed
   rather than fought; every measurement below was taken at the real 16px, so
   the fit comes from the padding, the wrapping and the min-content floors,
   not from shrinking the text.
   ========================================================================= */

@media (max-width: 599px) {
	.cn-mobile-cta-bar__copy {
		display: none;
	}

	.cn-mobile-cta-bar__actions {
		flex: 1 1 auto;
		min-width: 0;
		gap: 4px;
	}

	.cn-mobile-cta-bar__actions .cn-button {
		flex: 0 1 auto;
		min-inline-size: min-content;
		padding-inline: 6px;
		padding-block: 6px;
		white-space: normal;
		line-height: 1.15;
	}
}