:root {
  /*
   * Plugin-owned visual scale. Semantic HTML remains semantic (H1/H2/H3 etc.),
   * while factory components consume these bounded visual roles instead of
   * inheriting an oversized theme heading scale or scattering raw font sizes.
   */
  --zaco-fe-text-2xs: .6875rem;
  --zaco-fe-text-xs: .75rem;
  --zaco-fe-text-sm: .8125rem;
  --zaco-fe-text-md: .875rem;
  --zaco-fe-text-base: 1rem;
  --zaco-fe-text-lg: 1.125rem;
  --zaco-fe-text-xl: 1.375rem;
  --zaco-fe-text-2xl: clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  --zaco-fe-text-3xl: clamp(1.85rem, 1.55rem + 1vw, 2.5rem);
  --zaco-fe-page-title-size: clamp(2.35rem, 2rem + 1.8vw, 3.75rem);
  --zaco-fe-section-title-size: clamp(1.55rem, 1.35rem + .6vw, 2rem);
  --zaco-fe-card-title-size: var(--zaco-fe-text-md);
  --zaco-fe-consultation-title-size: clamp(1.5rem, 1.3rem + .45vw, 1.8rem);

  --zaco-fe-leading-tight: 1.08;
  --zaco-fe-leading-heading: 1.15;
  --zaco-fe-leading-compact: 1.3;
  --zaco-fe-leading-body: 1.55;

  /* P4.10: Stitch editorial sizing and component geometry (global, portable). */
  --zaco-fe-editorial-hero-size: clamp(2.25rem, 3.8vw, 3.5rem);
  --zaco-fe-editorial-hero-weight: 400;
  --zaco-fe-editorial-section-size: 1.875rem;
  --zaco-fe-editorial-panel-size: clamp(1.45rem, 2.1vw, 2rem);
  --zaco-fe-editorial-lead-size: clamp(1.25rem, 1.55vw, 1.5rem);
  /* P4.17: Stitch's compact italic hero subtitle and restrained supporting
   * prose are distinct reusable roles, not variants of a panel H2 or body-xs. */
  --zaco-fe-editorial-subtitle-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --zaco-fe-editorial-subtitle-leading: 1.33;
  --zaco-fe-editorial-subtitle-weight: 300;
  --zaco-fe-editorial-support-size: clamp(.875rem, .825rem + .17vw, .9375rem);
  --zaco-fe-editorial-support-leading: 1.625;
  --zaco-fe-editorial-support-weight: 300;
  /* Stitch text measure: maximum readable supporting copy width on image or panels. */
  --zaco-fe-editorial-support-measure: 32rem;
  --zaco-fe-editorial-line-height: 1.16;
  --zaco-fe-editorial-section-space: clamp(3.5rem, 5vw, 5rem);
  --zaco-fe-editorial-section-space-mobile: 2.75rem;
  --zaco-fe-stitch-story-gap: clamp(1.75rem, 3.4vw, 3rem);
  /* Story gallery: editorial text sets the common row height when the two
   * columns are adjacent; photo tracks consume that height, not intrinsic
   * image ratios. Shared with future image-led Product/Service compositions. */
  --zaco-fe-story-media-major-track: 1fr;
  --zaco-fe-story-media-minor-track: 1fr;
  --zaco-fe-story-media-tablet-ratio: 16 / 9;
  --zaco-fe-story-media-mobile-major-ratio: 16 / 10;
  --zaco-fe-story-media-mobile-minor-ratio: 4 / 3;
  --zaco-fe-stitch-feature-gap: var(--zaco-fe-space-6);
  --zaco-fe-stitch-feature-track-min: 11.5rem;
  --zaco-fe-stitch-card-radius: .5rem;
  --zaco-fe-stitch-image-hover-scale: 1.04;
  --zaco-fe-stitch-overlay-blur: 8px;
  /* P4.11: transferable Project visual anatomy, brand derived at factory root. */
  --zaco-fe-project-pill-radius: 999px;
  --zaco-fe-project-pill-padding-block: .4rem;
  --zaco-fe-project-pill-padding-inline: .9rem;
  --zaco-fe-project-overview-pad: clamp(1.25rem, 2vw, 2rem);
  --zaco-fe-project-overview-icon-box: 2.5rem;
  --zaco-fe-project-overview-icon-glyph: 1.25rem;
  --zaco-fe-project-overview-item-gap: var(--zaco-fe-space-4);
  --zaco-fe-project-overview-row-pad: var(--zaco-fe-space-4);
  --zaco-fe-project-testimonial-image-width: 34%;
  /* P4.14: Location / testimonial shared editorial layout. */
  --zaco-fe-location-badge-icon: 1.125rem;
  --zaco-fe-location-badge-gap: var(--zaco-fe-space-2);
  --zaco-fe-location-body-size: var(--zaco-fe-text-sm);
  --zaco-fe-location-body-leading: 1.65;
  --zaco-fe-testimonial-body-size: var(--zaco-fe-text-md);
  --zaco-fe-testimonial-body-leading: 1.55;
  --zaco-fe-testimonial-attribution-gap: var(--zaco-fe-space-5);
  --zaco-fe-location-media-ratio: 4 / 3;

  /* Shared frontend primitives: one governed source for section rhythm and
   * responsive gutters. Factory components consume tokens, not layout literals.
   * These tokens are intentionally brand-neutral; theme fonts/colors remain
   * theme-owned and are resolved on .zaco-fe below. */
  --zaco-fe-space-1: .25rem;
  --zaco-fe-space-2: .5rem;
  --zaco-fe-space-3: .75rem;
  --zaco-fe-space-4: 1rem;
  --zaco-fe-space-5: 1.25rem;
  --zaco-fe-space-6: 1.5rem;
  --zaco-fe-space-8: 2rem;
  --zaco-fe-space-10: 2.5rem;
  --zaco-fe-space-12: 3rem;
  --zaco-fe-space-14: 3.5rem;
  --zaco-fe-section-space-block: 3.625rem;
  --zaco-fe-section-space-block-compact: 2.625rem;
  --zaco-fe-project-story-column-gap: 3.25rem;
  --zaco-fe-section-heading-max-width: 48.75rem;
  /* P4.49: one ordinary-page label role. Only on-media Hero/closing labels opt out. */
  --zaco-fe-eyebrow-margin-bottom: .875rem;
  --zaco-fe-eyebrow-font-size: .75rem;
  --zaco-fe-eyebrow-leading: 1.5;
  --zaco-fe-eyebrow-tracking: .16em;
  --zaco-fe-eyebrow-weight: 700;
  --zaco-fe-heading-to-copy-gap: var(--zaco-fe-space-6);
  --zaco-fe-card-padding: var(--zaco-fe-space-6);
  --zaco-fe-material-media-height: 7.25rem;
  /* P4.20-C transferable image-led collections and editorial body rhythm. */
  --zaco-fe-product-section-gap: var(--zaco-fe-space-8);
  --zaco-fe-product-intro-measure: 27rem;
  --zaco-fe-product-card-gap: var(--zaco-fe-space-4);
  --zaco-fe-product-card-radius: var(--zaco-fe-stitch-card-radius);
  --zaco-fe-product-benefit-pad: var(--zaco-fe-space-5);
  --zaco-fe-product-icon-box: 2.75rem;
  --zaco-fe-product-icon-size: 1.375rem;
  --zaco-fe-product-icon-radius: var(--zaco-fe-space-3);
  --zaco-fe-product-label-tracking: .08em;
  --zaco-fe-product-choice-min: 10rem;
  --zaco-fe-product-layout-media-ratio: 4 / 3;
  --zaco-fe-product-material-media-ratio: 1 / 1;
  --zaco-fe-arrow-hover-travel: .1875rem;
  --zaco-fe-product-arrow-travel: var(--zaco-fe-arrow-hover-travel);
  --zaco-fe-product-process-min-height: 27rem;
  --zaco-fe-product-process-tablet-ratio: 16 / 9;
  --zaco-fe-product-process-pad: clamp(1.25rem, 2.2vw, 2.5rem);
  --zaco-fe-product-process-step-gap: var(--zaco-fe-space-4);

  /* Reusable content, actions and card primitives: site identity is inherited. */
  --zaco-fe-lead-measure: 40.625rem;
  --zaco-fe-richtext-measure: 76ch;
  --zaco-fe-icon-size-default: 1.4375rem;
  --zaco-fe-actions-gap: .625rem;
  --zaco-fe-actions-offset: 1.5625rem;
  --zaco-fe-control-min-height: 2.75rem;
  --zaco-fe-control-pad-block: .6875rem;
  --zaco-fe-control-pad-inline: var(--zaco-fe-space-5);
  --zaco-fe-control-gap: var(--zaco-fe-space-3);
  --zaco-fe-control-border: var(--zaco-fe-stroke-hairline);
  --zaco-fe-breadcrumb-space-block-start: var(--zaco-fe-space-5);
  --zaco-fe-breadcrumb-space-block-end: 1.625rem;
  --zaco-fe-card-grid-gap: var(--zaco-fe-space-5);
  --zaco-fe-card-radius: .1875rem;
  --zaco-fe-card-body-pad-top: .875rem;
  --zaco-fe-card-body-pad-inline: .9375rem;
  --zaco-fe-card-body-pad-bottom: var(--zaco-fe-space-4);
  --zaco-fe-card-compact-min-height: var(--zaco-fe-space-14);
  --zaco-fe-material-body-gap: .125rem;
  --zaco-fe-material-card-radius: var(--zaco-fe-space-1);
  /* P4.15 shared FAQ accordion primitive: one theme-aware control for all factories. */
  /* One desktop question typography contract across Home, Product, Project and modal FAQ. */
  --zaco-fe-faq-question-size: 1.125rem;
  --zaco-fe-faq-question-leading: 1.444444; /* 26px at 18px */
  --zaco-fe-faq-question-weight: 600;
  --zaco-fe-faq-closed-row-min: 4.75rem;
  --zaco-fe-faq-item-pad-block: var(--zaco-fe-space-5);
  --zaco-fe-faq-item-pad-inline: var(--zaco-fe-space-6);
  --zaco-fe-faq-item-gap: var(--zaco-fe-space-5);
  --zaco-fe-faq-card-gap: var(--zaco-fe-space-3);
  --zaco-fe-faq-card-radius: var(--zaco-fe-stitch-card-radius);
  --zaco-fe-faq-caret-size: .625rem;
  --zaco-fe-faq-caret-stroke: 2px;
  --zaco-fe-faq-answer-pad-bottom: var(--zaco-fe-space-5);
  --zaco-fe-faq-answer-size: var(--zaco-fe-text-base);
  --zaco-fe-faq-answer-leading: 1.625;
  /* Feature image badges share one governed offset, not a hard-coded selector value. */
  --zaco-fe-project-feature-icon-top: -2.7rem;
  /* P4.12 — two-card Project hero bento, independent of theme branding. */
  --zaco-fe-project-hero-grid-gap: var(--zaco-fe-space-6);
  --zaco-fe-project-hero-card-radius: var(--zaco-fe-space-5);
  /* P4.13: desktop Project hero must fit the visible canvas on normal screens.
   * Reserve the theme header, top/bottom hero margins, and a little safety room;
   * never clip an overview that legitimately needs more height (zoom/long data). */
  --zaco-fe-project-hero-fold-reserve-base: 9rem;
  --zaco-fe-project-hero-fold-reserve: var(--zaco-fe-project-hero-fold-reserve-base);
  --zaco-fe-project-hero-admin-bar-fallback: 2rem;
  --zaco-fe-project-hero-bento-pad: clamp(1.25rem, 2.5vw, 2.25rem);
  --zaco-fe-project-hero-overview-pad-compact: clamp(1.125rem, 1.45vw, 1.5rem);
  --zaco-fe-project-hero-overview-row-pad-compact: var(--zaco-fe-space-2);
  --zaco-fe-project-hero-overview-action-gap-compact: var(--zaco-fe-space-4);
  --zaco-fe-project-hero-overview-document-gap-compact: var(--zaco-fe-space-2);
  --zaco-fe-project-hero-title-spacing: var(--zaco-fe-space-4);
  --zaco-fe-project-hero-text-spacing: var(--zaco-fe-space-6);
  /* Shared editorial cluster rhythm; usable by Project, Product and Home. */
  --zaco-fe-editorial-eyebrow-to-title: var(--zaco-fe-space-2);
  --zaco-fe-editorial-title-to-subtitle: var(--zaco-fe-space-2);
  --zaco-fe-editorial-subtitle-to-meta: var(--zaco-fe-space-3);
  --zaco-fe-editorial-meta-weight: 500;
  --zaco-fe-editorial-meta-to-support: var(--zaco-fe-space-5);
  --zaco-fe-editorial-support-to-chips: 1.75rem;
  --zaco-fe-project-hero-min-height: 36.875rem;
  --zaco-fe-project-hero-copy-width: 38.125rem;
  --zaco-fe-project-hero-gutter: clamp(2.375rem, 5vw, 5rem);
  --zaco-fe-project-hero-copy-top: 3.4375rem;
  --zaco-fe-project-hero-copy-bottom: 3.125rem;
  /* Desktop: retain an independently sized overview while the image gives way. */
  --zaco-fe-project-hero-sidebar-width: clamp(20rem, 23vw, 23rem);

  --zaco-fe-fallback-wide-width: 80rem;
  --zaco-fe-fallback-reading-width: 45rem;
  --zaco-fe-layout-min-width-guard: 20rem;
  --zaco-fe-stroke-hairline: 1px;
  --zaco-fe-page-gutter-default: clamp(1rem, 2vw, 2rem);
  --zaco-fe-material-swatch-fallback: #e9ebe7;

  /* Plugin-owned component presentation tokens. Raw values are declared only here. */
  --zaco-fe-on-media: #fff;
  --zaco-fe-media-scrim-light: rgb(0 0 0 / .24);
  --zaco-fe-media-scrim-medium: rgb(0 0 0 / .46);
  --zaco-fe-media-scrim-strong: rgb(0 0 0 / .78);
  --zaco-fe-radius: 7px;
  --zaco-fe-shadow-card-fallback: 0 8px 24px rgb(0 0 0 / .06);
  /* Shared interaction/motion primitives, not a brand-specific theme skin. */
  --zaco-fe-motion-fast: 180ms;
  --zaco-fe-motion-media: 360ms;
  --zaco-fe-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --zaco-fe-hover-image-scale: 1.035;
  --zaco-fe-hover-lift: -1px;
  --zaco-fe-focus-ring-width: 2px;
  --zaco-fe-focus-ring-offset: 3px;
  /* P4.20 Product hero: globally available architectural-panel geometry.
   * Brand colors/fonts/shadow continue to resolve from the active theme. */
  --zaco-fe-hero-panel-gap: var(--zaco-fe-space-6);
  --zaco-fe-hero-panel-radius: var(--zaco-fe-stitch-card-radius);
  --zaco-fe-hero-panel-min-block: 32rem;
  --zaco-fe-hero-panel-max-block: 41rem;
  --zaco-fe-hero-panel-pad: clamp(1.25rem, 2vw, 2rem);
  --zaco-fe-hero-caption-pad: var(--zaco-fe-space-4);
  --zaco-fe-hero-caption-surface: color-mix(in srgb, var(--zaco-fe-theme-text) 85%, transparent);
  --zaco-fe-hero-consultation-gap: var(--zaco-fe-space-6);
  /* Product overview geometry / minimum readable column track. */
  --zaco-fe-hero-benefit-gap: var(--zaco-fe-space-3);
  --zaco-fe-overview-benefit-gap: var(--zaco-fe-space-3);
  --zaco-fe-overview-benefit-track-min: 10.25rem;
  --zaco-fe-overview-benefit-pad: var(--zaco-fe-space-3);


}

/* Resolve theme inputs and every derived token at the factory root, not at :root.
   Blocksy and WordPress often define theme custom properties on body; computing
   ZACO derived values on :root would prematurely freeze fallback values. */
.zaco-fe {
  /* Theme / WordPress Global Styles bridge. ZACO owns domain components, not the site's brand system. */
  --zaco-fe-theme-font-family: inherit;
  --zaco-fe-theme-text: var(--wp--preset--color--contrast, CanvasText);
  --zaco-fe-theme-heading: var(--zaco-fe-theme-text);
  --zaco-fe-theme-muted: color-mix(in srgb, var(--zaco-fe-theme-text) 66%, transparent);
  --zaco-fe-theme-accent: var(--wp--preset--color--primary, currentColor);
  --zaco-fe-theme-surface: var(--wp--preset--color--base, Canvas);
  --zaco-fe-theme-surface-alt: color-mix(in srgb, var(--zaco-fe-theme-text) 3%, var(--zaco-fe-theme-surface));
  --zaco-fe-theme-border: color-mix(in srgb, var(--zaco-fe-theme-text) 15%, transparent);
  --zaco-fe-theme-border-strong: color-mix(in srgb, var(--zaco-fe-theme-text) 24%, transparent);
  --zaco-fe-theme-button-bg: var(--wp--preset--color--contrast, CanvasText);
  --zaco-fe-theme-button-text: var(--wp--preset--color--base, Canvas);
  --zaco-fe-theme-button-hover-bg: var(--zaco-fe-theme-button-bg);
  --zaco-fe-theme-button-hover-text: var(--zaco-fe-theme-button-text);
  --zaco-fe-theme-button-radius: .375rem;
  --zaco-fe-theme-reading-width: var(--zaco-theme-reading-width, var(--wp--style--global--content-size, var(--zaco-fe-fallback-reading-width)));
  --zaco-fe-theme-wide-width: var(--zaco-theme-wide-width, var(--wp--style--global--wide-size, var(--zaco-fe-fallback-wide-width)));
  --zaco-fe-theme-page-gutter-inline: var(--zaco-theme-page-gutter, var(--zaco-fe-page-gutter-default));
  --zaco-fe-theme-shadow-card: var(--zaco-theme-shadow-card, var(--wp--custom--zare-experience--elevation--surface, var(--wp--preset--shadow--natural, var(--zaco-fe-shadow-card-fallback))));

  /* ZACO semantic frontend tokens derive from the active theme. */
  --zaco-fe-font-family: var(--zaco-fe-theme-font-family, inherit);
  /* P4.42: the label/eyebrow is a visual role, not a heading-font child.
     Theme authors may override --zaco-theme-font-label. Blocksy body font is
     preferred, followed by a WordPress Manrope preset or conservative sans. */
  --zaco-fe-label-font-family: var(--zaco-theme-font-label, var(--theme-font-family, var(--wp--preset--font-family--manrope, "Manrope", Arial, sans-serif)));
  --zaco-fe-text: var(--zaco-fe-theme-text);
  --zaco-fe-heading: var(--zaco-fe-theme-heading);
  --zaco-fe-eyebrow-ink: var(--zaco-fe-heading);
  --zaco-fe-theme-h1-leading: var(--zaco-theme-h1-leading, var(--zaco-fe-leading-tight));
  --zaco-fe-text-muted: var(--zaco-fe-theme-muted);
  --zaco-fe-text-subtle: color-mix(in srgb, var(--zaco-fe-theme-text) 48%, transparent);
  --zaco-fe-accent: var(--zaco-fe-theme-accent);
  --zaco-fe-accent-hover: color-mix(in srgb, var(--zaco-fe-accent) 84%, black);
  --zaco-fe-accent-soft: color-mix(in srgb, var(--zaco-fe-accent) 9%, var(--zaco-fe-theme-surface));
  --zaco-fe-accent-softer: color-mix(in srgb, var(--zaco-fe-accent) 5%, var(--zaco-fe-theme-surface));
  --zaco-fe-surface: var(--zaco-fe-theme-surface);
  --zaco-fe-surface-raised: var(--zaco-fe-theme-surface);
  --zaco-fe-surface-subtle: var(--zaco-fe-theme-surface-alt);
  --zaco-fe-border: var(--zaco-fe-theme-border);
  --zaco-fe-border-strong: var(--zaco-fe-theme-border-strong);
  --zaco-fe-layout-reading: var(--zaco-fe-theme-reading-width);
  --zaco-fe-layout-wide: max(var(--zaco-fe-layout-min-width-guard), var(--zaco-fe-theme-wide-width));
  --zaco-fe-page-gutter: var(--zaco-fe-theme-page-gutter-inline);
  /* Viewport-edge safety only. Already-constrained theme parents add no second inset. */
  --zaco-fe-container-edge-clearance: var(--zaco-fe-page-gutter);
  /* The hero starts at the viewport's left edge, but its right edge lands on
   * the same centered wide-container boundary as Project Story below it. */
  --zaco-fe-project-hero-aligned-measure: min(
    var(--zaco-fe-layout-wide),
    calc(100vw - var(--zaco-fe-container-edge-clearance) - var(--zaco-fe-container-edge-clearance))
  );
  --zaco-fe-shadow-card: var(--zaco-fe-theme-shadow-card);
  --zaco-fe-hover-shadow: var(--zaco-theme-shadow-hover, var(--zaco-fe-shadow-card));
  --zaco-fe-hover-surface: color-mix(in srgb, var(--zaco-fe-theme-text) 2%, var(--zaco-fe-surface-raised));
  --zaco-fe-focus-color: var(--zaco-fe-theme-accent);
  /* Reusable thematic surfaces: no hard-coded Blissspace mint/brand colors. */
  --zaco-fe-editorial-surface-mint: var(--zaco-theme-surface-mint, var(--theme-palette-color-11, var(--zaco-fe-accent-softer)));
  --zaco-fe-editorial-surface-tile: var(--zaco-theme-surface-tile, var(--theme-palette-color-10, var(--zaco-fe-accent-soft)));
  --zaco-fe-editorial-on-media: var(--zaco-fe-on-media);
  --zaco-fe-editorial-on-media-soft: color-mix(in srgb, var(--zaco-fe-on-media) 90%, transparent);
  --zaco-fe-editorial-on-media-muted: var(--zaco-theme-on-media-muted, rgb(203 213 225 / .9));
  --zaco-fe-editorial-panel-shadow: var(--zaco-fe-shadow-card);
  --zaco-fe-faq-card-surface: var(--zaco-theme-faq-card-surface, var(--zaco-fe-surface-raised));
  --zaco-fe-faq-card-shadow: var(--zaco-theme-faq-card-shadow, var(--zaco-fe-shadow-card));
  --zaco-fe-faq-caret-color: var(--zaco-fe-theme-muted);
  /* Shared FAQ/explore composition + shared native modal. */
  --zaco-fe-info-column-gap: var(--zaco-fe-space-8);
  --zaco-fe-motion-image: 500ms;
  --zaco-fe-info-card-gap: var(--zaco-fe-space-4);
  --zaco-fe-info-card-radius: var(--zaco-fe-stitch-card-radius);
  --zaco-fe-info-image-ratio: 16 / 9;
  --zaco-fe-info-image-min: 6.5rem;
  --zaco-fe-info-title-size: var(--zaco-fe-text-lg);
  --zaco-fe-faq-expanded-max: 10rem;
  --zaco-fe-modal-width: 54rem;
  --zaco-fe-modal-viewport-gutter: var(--zaco-fe-space-4);
  --zaco-fe-modal-max-block: 86dvh;
  --zaco-fe-modal-backdrop: rgba(8, 20, 15, .70);
  --zaco-fe-modal-close-size: 2.75rem;

  --zaco-fe-editorial-pill-fill: color-mix(in srgb, var(--zaco-fe-on-media) 9%, transparent);
  --zaco-fe-editorial-pill-stroke: color-mix(in srgb, var(--zaco-fe-on-media) 27%, transparent);
  --zaco-fe-editorial-panel-border: var(--zaco-fe-border);
  --zaco-fe-editorial-cta-bg: var(--zaco-theme-editorial-cta-bg, var(--theme-palette-color-9, var(--zaco-fe-theme-button-bg)));
  --zaco-fe-editorial-cta-on: var(--zaco-theme-editorial-cta-on, var(--zaco-fe-on-media));
  --zaco-fe-editorial-cta-hover-bg: var(--zaco-theme-editorial-cta-hover-bg, var(--zaco-fe-theme-button-hover-bg));



  /*
   * Optional site/theme display role. A brand can provide these three custom
   * properties without ZACO ever hard-coding a brand font such as Cormorant.
   */
  --zaco-fe-font-display: var(--zaco-theme-font-display, var(--wp--custom--zare-experience--typography--family--display, var(--zaco-fe-font-family)));
  --zaco-fe-display-lg: var(--zaco-theme-display-lg, clamp(2.5rem, 4vw, 3.5rem));
  --zaco-fe-display-md: var(--zaco-theme-display-md, clamp(2rem, 3vw, 2.75rem));
  --zaco-fe-display-leading-lg: var(--zaco-theme-display-leading-lg, 1);
  --zaco-fe-display-leading-md: var(--zaco-theme-display-leading-md, 1.05);
  --zaco-fe-display-tracking-lg: var(--zaco-theme-display-tracking-lg, -.02em);
  --zaco-fe-display-tracking-md: var(--zaco-theme-display-tracking-md, -.015em);

  /* Compatibility aliases used by the P4 factory geometry. */
  --zaco-fe-ink: var(--zaco-fe-text);
  --zaco-fe-ink-soft: var(--zaco-fe-text-muted);
  --zaco-fe-deep: var(--zaco-fe-accent);
  --zaco-fe-deep-2: var(--zaco-fe-theme-button-bg);
  --zaco-fe-paper: var(--zaco-fe-surface);
  --zaco-fe-soft: var(--zaco-fe-surface-subtle);
  --zaco-fe-soft-green: var(--zaco-fe-accent-soft);
  --zaco-fe-line: var(--zaco-fe-border);
  --zaco-fe-white: var(--zaco-fe-on-media);
  --zaco-fe-warm: var(--zaco-fe-text-muted);
  --zaco-fe-shadow: var(--zaco-fe-shadow-card); /* Legacy P4 alias; components use shadow-card. */
}

/* Shared semantic typography primitives. */
.zaco-fe-display { font-family: var(--zaco-fe-font-display); }
.zaco-fe-display--lg { font-size: var(--zaco-fe-display-lg); line-height: var(--zaco-fe-display-leading-lg); letter-spacing: var(--zaco-fe-display-tracking-lg); }
.zaco-fe-display--md { font-size: var(--zaco-fe-display-md); line-height: var(--zaco-fe-display-leading-md); letter-spacing: var(--zaco-fe-display-tracking-md); }
/* Reusable editorial text roles. Semantic element type is independent of visual
 * scale; both apply in any ZACO PHP factory and future block composition. */
.zaco-fe .zaco-fe-editorial-subtitle {
  font-family: var(--zaco-fe-font-display);
  font-size: var(--zaco-fe-editorial-subtitle-size);
  font-weight: var(--zaco-fe-editorial-subtitle-weight);
  line-height: var(--zaco-fe-editorial-subtitle-leading);
}
.zaco-fe .zaco-fe-editorial-support {
  font-size: var(--zaco-fe-editorial-support-size);
  font-weight: var(--zaco-fe-editorial-support-weight);
  line-height: var(--zaco-fe-editorial-support-leading);
}

/* Explicit Blocksy bridge. Global theme containers + optional ZACO site overrides. */
body.zaco-theme-blocksy .zaco-fe,
.editor-styles-wrapper.zaco-theme-blocksy .zaco-fe {
  --zaco-fe-theme-font-family: var(--theme-font-family, inherit);
  --zaco-fe-theme-text: var(--theme-text-color, currentColor);
  --zaco-fe-theme-heading: var(--theme-headings-color, var(--theme-heading-color, var(--theme-palette-color-4, var(--theme-text-color, currentColor))));
  --zaco-fe-theme-muted: color-mix(in srgb, var(--theme-text-color, currentColor) 66%, transparent);
  --zaco-fe-theme-accent: var(--theme-link-initial-color, var(--theme-palette-color-1, currentColor));
  --zaco-fe-theme-surface: var(--theme-palette-color-8, Canvas);
  --zaco-fe-theme-surface-alt: color-mix(in srgb, var(--theme-text-color, currentColor) 3%, var(--theme-palette-color-8, Canvas));
  --zaco-fe-theme-border: var(--theme-border-color, color-mix(in srgb, currentColor 15%, transparent));
  --zaco-fe-theme-border-strong: color-mix(in srgb, var(--theme-text-color, currentColor) 24%, transparent);
  --zaco-fe-theme-button-bg: var(--theme-button-background-initial-color, var(--zaco-fe-theme-accent));
  --zaco-fe-theme-button-text: var(--theme-button-text-initial-color, var(--zaco-fe-theme-surface));
  --zaco-fe-theme-button-hover-bg: var(--theme-button-background-hover-color, var(--zaco-fe-theme-button-bg));
  --zaco-fe-theme-button-hover-text: var(--theme-button-text-hover-color, var(--zaco-fe-theme-button-text));
  --zaco-fe-theme-button-radius: var(--theme-button-border-radius, .375rem);
  --zaco-fe-theme-reading-width: var(--zaco-theme-reading-width, var(--theme-block-max-width, var(--wp--style--global--content-size, var(--zaco-fe-fallback-reading-width))));
  --zaco-fe-theme-wide-width: var(--zaco-theme-wide-width, var(--theme-block-wide-max-width, var(--wp--style--global--wide-size, var(--theme-container-width, var(--zaco-fe-fallback-wide-width)))));
  --zaco-fe-theme-page-gutter-inline: var(--zaco-theme-page-gutter, var(--zaco-fe-page-gutter-default));
  --zaco-fe-theme-shadow-card: var(--zaco-theme-shadow-card, var(--theme-box-shadow, var(--zaco-fe-shadow-card-fallback)));
}

/* P4.9: globally reusable interaction primitives. Nothing uses cursor:pointer
   without an actual action. Nonlinked editorial tiles receive surface-only feedback. */
.zaco-fe .zaco-fe-interactive {
  transition: box-shadow var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease),
              background-color var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease),
              transform var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease);
}
@media (hover: hover) {
  .zaco-fe .zaco-fe-interactive:is(:hover, :focus-within) {
    box-shadow: var(--zaco-fe-hover-shadow);
    transform: translateY(var(--zaco-fe-hover-lift));
  }
  .zaco-fe .zaco-fe-interactive--surface:is(:hover, :focus-within) {
    background-color: var(--zaco-fe-hover-surface);
  }
}
.zaco-fe .zaco-fe-interactive__media,
.zaco-fe .zaco-fe-media-hover { display: block; overflow: hidden; }
.zaco-fe .zaco-fe-interactive__media img,
.zaco-fe .zaco-fe-media-hover img {
  transition: transform var(--zaco-fe-motion-media) var(--zaco-fe-motion-ease);
}
@media (hover: hover) {
  .zaco-fe .zaco-fe-interactive--image:is(:hover, :focus-within) .zaco-fe-interactive__media img,
  .zaco-fe .zaco-fe-media-hover:hover img {
    transform: scale(var(--zaco-fe-hover-image-scale));
  }
}
.zaco-fe .zaco-fe-surface-feedback {
  transition: background-color var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease),
              border-color var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease);
}
@media (hover: hover) {
  .zaco-fe .zaco-fe-surface-feedback:hover {
    background-color: var(--zaco-fe-hover-surface);
    border-color: var(--zaco-fe-border-strong);
  }
}
.zaco-fe a:focus-visible, .zaco-fe button:focus-visible,
.zaco-fe summary:focus-visible {
  outline: var(--zaco-fe-focus-ring-width) solid var(--zaco-fe-focus-color);
  outline-offset: var(--zaco-fe-focus-ring-offset);
}
.zaco-fe .zaco-fe-button {
  transition: transform var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease),
              background-color var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease),
              color var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease),
              border-color var(--zaco-fe-motion-fast) var(--zaco-fe-motion-ease);
}
@media (hover: hover) {
  .zaco-fe .zaco-fe-button:hover { transform: translateY(var(--zaco-fe-hover-lift)); }
}
@media (prefers-reduced-motion: reduce) {
  .zaco-fe .zaco-fe-interactive, .zaco-fe .zaco-fe-interactive__media img,
  .zaco-fe .zaco-fe-media-hover img, .zaco-fe .zaco-fe-surface-feedback,
  .zaco-fe .zaco-fe-button { transition-duration: 0ms; transform: none !important; }
}

/* Resolve viewport-derived values at the component, not at :root: admin-bar and
 * site-specific overrides must be able to affect the same computed scope. */
.zaco-fe-stitch-project {
  --zaco-fe-project-hero-bento-height: clamp(32rem, calc(100svh - var(--zaco-fe-project-hero-fold-reserve)), 38rem);
}

/* Shared Stitch editorial H2 role: 30px mobile, 36px from its sm breakpoint. */
@media (min-width: 640px) {
  :root { --zaco-fe-editorial-section-size: 2.25rem; }
}

/* P4.23 reusable collection foundation. Opt-in modes consume existing first-party
   canonical cards; Grid = photo above copy, List = photo left/copy right. */
.zaco-fe-collection {
  display: grid;
  gap: var(--zaco-fe-product-card-gap, 1rem);
  min-width: 0;
}
.zaco-fe-collection > * { min-width: 0; }
.zaco-fe-collection--grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.zaco-fe-collection--list {
  grid-template-columns: minmax(0, 1fr);
}
.zaco-fe-collection.zaco-fe-collection--list > :is(.zaco-fe-card, .zaco-fe-product-choice) {
  display: grid;
  grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
  align-items: stretch;
}
.zaco-fe-collection--list > :is(.zaco-fe-card, .zaco-fe-product-choice) > :is(.zaco-fe-card__media, .zaco-fe-product-choice__media) {
  width: 100%;
  height: 100%;
  min-height: 9rem;
  aspect-ratio: auto;
}
.zaco-fe-collection--list > :is(.zaco-fe-card, .zaco-fe-product-choice) > :is(.zaco-fe-card__media, .zaco-fe-product-choice__media) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zaco-fe-collection--list > :is(.zaco-fe-card, .zaco-fe-product-choice) > :is(.zaco-fe-card__body, .zaco-fe-product-choice__body) {
  min-width: 0;
}

/* P4.44: shared straight and diagonal navigation primitives. P4.43: one local bold navigation arrow; never inherit theme glyph width/weight.
   Fallback text arrows remain available in browsers without CSS masks. */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .zaco-fe-arrow-glyph { font-size: 0 !important; line-height: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle; }
  .zaco-fe-arrow-glyph::before {
    content: ""; display: block; width: var(--zaco-fe-nav-arrow-size, 19px); height: var(--zaco-fe-nav-arrow-size, 19px); flex: none;
    background: currentColor; -webkit-mask: url("../../vendor/phosphor/bold/arrow-right-bold.svg") center / contain no-repeat;
    mask: url("../../vendor/phosphor/bold/arrow-right-bold.svg") center / contain no-repeat;
  }
  .zaco-fe-arrow-glyph--up-right::before {
    -webkit-mask-image: url("../../vendor/phosphor/bold/arrow-up-right-bold.svg");
    mask-image: url("../../vendor/phosphor/bold/arrow-up-right-bold.svg");
  }
  .zaco-fe-arrow-glyph--left::before {
    -webkit-mask-image: url("../../vendor/phosphor/bold/arrow-left-bold.svg");
    mask-image: url("../../vendor/phosphor/bold/arrow-left-bold.svg");
  }
  .zaco-fe-arrow-glyph--down::before {
    -webkit-mask-image: url("../../vendor/phosphor/bold/arrow-down-bold.svg");
    mask-image: url("../../vendor/phosphor/bold/arrow-down-bold.svg");
  }
}

/* P4.44: a single token for icon-only or label+arrow actions. Component CSS owns
   surfaces, icon role owns geometry; no changes to typography or button palette. */
.zaco-fe .zaco-fe-arrow-glyph { --zaco-fe-nav-arrow-size:18px; }
.zaco-fe :is(.zaco-fe-home-view-all, .zaco-fe-home-hero__button, .zaco-fe-button, .zaco-fe-product-section-top__link, .zaco-fe-product-info__view-all, .zaco-fe-project-faq__view-all, .zaco-fe-location-card__link, .zaco-fe-home-faq-visit__more, .zaco-fe-home-story__link) > .zaco-fe-arrow-glyph { vertical-align:middle; }
/* Text fallback for browsers without CSS masking, keeping all labels accessible. */
.zaco-fe .zaco-fe-arrow-glyph { font-weight: 700; }
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
 .zaco-fe .zaco-fe-control-close { font-size:0 !important; }
 .zaco-fe .zaco-fe-control-close::before { content:"";display:block;width:18px;height:18px;background:currentColor;
   -webkit-mask:url("../../vendor/phosphor/bold/x-bold.svg") center/contain no-repeat;
   mask:url("../../vendor/phosphor/bold/x-bold.svg") center/contain no-repeat; }
 .zaco-fe .zaco-fe-breadcrumb-separator { font-size:0 !important; display:inline-flex;align-items:center; }
 .zaco-fe .zaco-fe-breadcrumb-separator::before { content:"";display:block;width:12px;height:12px;background:currentColor;
   -webkit-mask:url("../../vendor/phosphor/regular/caret-right.svg") center/contain no-repeat;
   mask:url("../../vendor/phosphor/regular/caret-right.svg") center/contain no-repeat; }
}

/* P4.47 shared text-led value cards. Not for image-led/project gallery cards.
   Active theme owns every surface and shadow. Variants opt in explicitly. */
.zaco-fe .zaco-fe-value-card {
  border: 0;
  background: var(--zaco-fe-surface-raised);
  border-radius: var(--zaco-fe-stitch-card-radius);
  box-shadow: var(--zaco-fe-shadow-card);
}
.zaco-fe .zaco-fe-value-card__icon {
  display: grid;
  place-items: center;
  border-radius: var(--zaco-fe-product-icon-radius);
  background: var(--zaco-fe-accent-soft);
  color: var(--zaco-fe-accent);
}
.zaco-fe .zaco-fe-value-card__footer { border-top: 0; padding-top: 0; }
@media (hover: hover) {
 .zaco-fe .zaco-fe-value-card.zaco-fe-surface-feedback:hover {
   border: 0;
   box-shadow: var(--zaco-fe-hover-shadow);
 }
}

/* P5-D shared content-sized glass caption primitive. Use only on a text label,
   never the full-media gradient/scrim or intentionally full-width trust panels. */
.zaco-fe .zaco-fe-media-caption--fit {
  position: absolute;
  inset-inline-start: var(--zaco-fe-media-caption-inset, var(--zaco-fe-space-4));
  inset-inline-end: auto;
  inline-size: max-content;
  max-inline-size: calc(100% - 2 * var(--zaco-fe-media-caption-inset, var(--zaco-fe-space-4)));
  overflow-wrap: anywhere;
}