@charset "UTF-8";
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-off-white: #f9f7f0;
  --color-gray: #797979;
  --color-primary: #002960;
  --color-secondary: #007bff;
  --color-accent-1: #49c5b1;
  --color-accent-2: #7f56d9;
  --color-type-body: var(--color-black);
  --color-type-heading: var(--color-black);
  --color-success-500: #10b981;
  --color-warning-500: #f59e0b;
  --color-error-500: #ef4444;
  --color-highlight: var(--color-secondary);
  --color-highlight-hover: var(--color-accent-1);
  --color-highlight-alt: var(--color-accent-1);
  --color-highlight-alt-hover: var(--color-white);
  /* Color Ramps — tints (100/300) and shades (700/900) derived from the
     base role token; base ≙ the 500 step. Additive: consumed by nothing
     until a block binds a step. Mix percentages are nominal defaults —
     tunable in a design pass, mechanism fixed. */
  --color-primary-100: color-mix(in srgb, var(--color-primary) 10%, var(--color-white));
  --color-primary-300: color-mix(in srgb, var(--color-primary) 40%, var(--color-white));
  --color-primary-700: color-mix(in srgb, var(--color-primary) 80%, var(--color-black));
  --color-primary-900: color-mix(in srgb, var(--color-primary) 55%, var(--color-black));
  --color-secondary-100: color-mix(in srgb, var(--color-secondary) 10%, var(--color-white));
  --color-secondary-300: color-mix(in srgb, var(--color-secondary) 40%, var(--color-white));
  --color-secondary-700: color-mix(in srgb, var(--color-secondary) 80%, var(--color-black));
  --color-secondary-900: color-mix(in srgb, var(--color-secondary) 55%, var(--color-black));
  --color-accent-1-100: color-mix(in srgb, var(--color-accent-1) 10%, var(--color-white));
  --color-accent-1-300: color-mix(in srgb, var(--color-accent-1) 40%, var(--color-white));
  --color-accent-1-700: color-mix(in srgb, var(--color-accent-1) 80%, var(--color-black));
  --color-accent-1-900: color-mix(in srgb, var(--color-accent-1) 55%, var(--color-black));
  --color-accent-2-100: color-mix(in srgb, var(--color-accent-2) 10%, var(--color-white));
  --color-accent-2-300: color-mix(in srgb, var(--color-accent-2) 40%, var(--color-white));
  --color-accent-2-700: color-mix(in srgb, var(--color-accent-2) 80%, var(--color-black));
  --color-accent-2-900: color-mix(in srgb, var(--color-accent-2) 55%, var(--color-black));
  --color-gradient-1: linear-gradient(var(--color-primary), var(--color-secondary));
  /* Gradient system (P54) — ONE governed gradient recipe as role tokens,
     re-VALUED per client, never a from-star, via-star, to-star, bg-gradient-to-star
     utility scale. --color-gradient-1 above is the ad-hoc precedent this system
     generalizes: angle=180deg + from=primary + to=secondary reproduces it exactly. */
  --gradient-angle: 180deg; /* direction role (default top→bottom = --color-gradient-1's implicit vertical) */
  --gradient-from: var(--color-primary); /* start-stop role — reuses the primary colour role */
  --gradient-via: transparent; /* optional mid-stop role — transparent = inert (a two-stop gradient) until a consumer opts into three-stop */
  --gradient-to: var(--color-secondary); /* end-stop role — reuses the secondary colour role */
  /* Framework & Containers  */
  --content-width: 1440px;
  --content-half-width: calc(var(--content-width) / 2);
  --content-text-max-width: 850px;
  --content-horizontal-padding: 50px;
  /* Container-bound sticky + out-of-container rail (P45). Role-named, re-VALUED
     per client, never renamed (Block Transportability). Only the two genuinely
     homeless dimensions are minted — each a component literal in the
     --header-height:85px / --input-max-width:400px / --swiper-button-size:40px
     tradition; everything else BINDS an existing home (offset→--header-height,
     gutter→--column-gap-*, elevation→--box-shadow-lg, corners→--border-radius-*). */
  --sticky-inset-top: 0; /* how far a BOUND sticky holds below the top edge */
  --rail-width: 300px; /* the out-of-container companion column's reserved width */
  /* Full-viewport fill height (P28) — vh default here; upgraded to dynamic
     units in the @supports block after the :root close (below). */
  --overlay-full-height: 100vh; /* full-screen fixed overlay */
  --section-full-height: 100vh; /* full-bleed hero / section */
  /* Vertical Content Spacing */
  --content-vertical-padding-normal: 90px;
  --content-vertical-padding-more: 150px;
  --content-vertical-padding-less: 50px;
  /* Section-bleed overlap (P49) — the NEGATIVE direction of the positive rhythm,
     the one homeless dimension. Role-named, re-VALUED per client, never renamed
     (Block Transportability). The MAGNITUDE keeps ONE home: each default is the
     negation of an existing positive-rhythm role via calc(-1 * …), so re-valuing
     the rhythm moves the overlap with it and only the SIGN lives here. A denser
     consumer re-points --section-overlap at a different rhythm step AT the block. */
  --section-overlap: calc(-1 * var(--content-vertical-padding-normal)); /* vertical: a section pulls up over its neighbor (hero → next section) */
  --content-bleed-inline: calc(-1 * var(--content-horizontal-padding)); /* horizontal: content escapes the side padding to a full-bleed edge */
  /* Inner Content Spacing */
  --inner-spacing-xl: 70px;
  --inner-spacing-lg: 50px;
  --inner-spacing-md: 30px;
  --inner-spacing-sm: 15px;
  --inner-spacing-xs: 5px;
  /* Border Radius  */
  --border-radius-xl: 70px;
  --border-radius-lg: 40px;
  --border-radius-md: 20px;
  --border-radius-sm: 10px;
  /* Box Shadows — P3 recipe, jh design-pass APPROVED 2026-08-06. Single-layer,
     light-from-above, opacity-ramped: restrained enough to keep the Swiss
     flatness, present enough to read elevation. Re-VALUED per client. */
  --box-shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.06);
  --box-shadow-sm-hover: 0px 2px 6px rgba(0, 0, 0, 0.08);
  --box-shadow-md: 0px 4px 12px rgba(0, 0, 0, 0.08);
  --box-shadow-md-hover: 0px 6px 16px rgba(0, 0, 0, 0.11);
  --box-shadow-lg: 0px 12px 32px rgba(0, 0, 0, 0.14);
  --box-shadow-lg-hover: 0px 16px 40px rgba(0, 0, 0, 0.18);
  /* Glassmorphism (P53) — ONE governed frosted-surface recipe, role-named,
     re-VALUED per client (the "intensity dial" = re-value --glass-backdrop),
     never a .backdrop-blur-* utility scale. The solid fallback is what a
     no-backdrop-filter browser AND a prefers-reduced-transparency user see. */
  --glass-surface: rgba(255, 255, 255, 0.08); /* translucent fill — ONLY where backdrop-filter is supported */
  --glass-surface-solid: var(--color-primary); /* opaque fallback (no-support + reduced-transparency + forced-colors) — reuses an existing role */
  --glass-backdrop: blur(12px) saturate(1.4); /* the backdrop treatment (blur + saturate); re-value = the intensity dial */
  --glass-border: rgba(255, 255, 255, 0.18); /* the hairline highlight edge */
  /* Miscellaneous */
  --line-thickness: 1px;
  /* Edge-fade mask (P55) — the ONE governed slice of CSS masks: a per-axis
     linear-gradient fade for carousels / hero overflow, re-VALUED per client,
     never a .mask-t-from-* utility grid. Fade distance is the only new role. */
  --fade-size: 40px; /* how far each edge fades to transparent (the fade length role) */
  --overlay-opacity: 0.7;
  /* Media treatment (P52) — the governed CSS filter a media surface carries.
     A rest/active PAIR, each a COMPLETE filter recipe re-VALUED per client,
     never a numeric utility scale. Named by the ROLE (the state), not the
     effect: re-value the recipe, never rename the role (Block Transportability). */
  --media-filter-rest: grayscale(100%); /* at rest: the governed treatment (default: the team-grid desaturate) */
  --media-filter-active: grayscale(0); /* on hover/focus: the reveal (default: full colour) */
  /* Image-slot fit mode (P29) — axis one of the two-axis image contract. Role
     token consumed by the .fw-c-image-fill constant; default preserves the
     shipped cover behavior exactly (zero pixel change at introduction). The
     ledger deferred this definition to "whichever consumer graduates first" —
     step 8 is that graduation. */
  --image-object-fit: cover;
  /* Minimum interactive hit area for coarse pointers (P27) — WCAG 2.5.5 target size */
  --touch-target-min: 44px;
  --zoom-scale: 1.1;
  --text-clamp-max-lines: 3;
  /* Focus Ring (keyboard navigation) */
  --focus-ring-color: var(--color-highlight);
  --focus-ring-width: calc(var(--line-thickness) * 2);
  --focus-ring-offset: 3px;
  /* Lines  */
  --hr-color: var(--color-highlight);
  --hr-color-alt: var(--color-highlight-alt);
  --hr-width: 100%;
  --hr-height: var(--line-thickness);
  /* Transitions */
  --transition-timing-normal: 0.6s;
  --transition-timing-fast: 0.5s;
  --transition-timing-slow: 0.8s;
  --transition-ease-1: ease;
  --transition-ease-2: ease-in-out;
  /* Stacking Order (z-index layers) — role-named; values match current paint */
  --z-below: -1; /* parked/hidden layers behind their stacking context */
  --z-raised: 1; /* content raised above siblings within a section */
  --z-header: 100; /* header bar + mobile-nav overlay */
  --z-header-logo: 104; /* logo above the open mobile-nav overlay */
  --z-header-toggle: 105; /* menu toggle above the logo */
  --z-modal: 999; /* modal container, raised (active) state */
  --z-loader: 9999; /* page preloader, above everything */
  /* Font Families */
  --display-font-family: "Rawest", sans-serif;
  --heading-font-family: "Wotfard", serif;
  --body-font-family: "Inter", sans-serif;
  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-light: 200;
  --font-weight-regular: 300;
  --font-weight-medium: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;
  --font-weight-extra-bold: 700;
  /* Headings - Perfect Fourth type scale */
  /* Heading XS */
  --heading-xs-font-size: 21px;
  --heading-xs-line-height: 1.2;
  /* Heading SM */
  --heading-sm-font-size: 28px;
  --heading-sm-line-height: 1.2;
  /* Heading MD */
  --heading-md-font-size: 37px;
  --heading-md-line-height: 1.2;
  /* Heading LG */
  --heading-lg-font-size: 49px;
  --heading-lg-line-height: 1.2;
  /* Heading XL */
  --heading-xl-font-size: 65px;
  --heading-xl-line-height: 1.1;
  /* Heading 2XL */
  --heading-2xl-font-size: 87px;
  --heading-2xl-line-height: 1;
  /* Stat Display (oversized featured numbers) */
  --stat-display-xl-font-size: 120px;
  /* Body - Major Second (1.125) */
  /* Body SM */
  --body-sm-font-size: 14px;
  --body-sm-line-height: 1.4;
  /* Body MD   */
  --body-md-font-size: 16px;
  --body-md-line-height: 1.4;
  /* Body LG */
  --body-lg-font-size: 18px;
  --body-lg-line-height: 1.4;
  /* Caption  */
  --caption-font-size: 12px;
  --caption-line-height: 1.2;
  --body-default-font-size: var(--body-md-font-size);
  --body-default-line-height: var(--body-md-line-height);
  --body-default-font-weight: var(--font-weight-regular);
  --body-default-font-color: var(--color-black);
  --display-font-weight: var(--font-weight-light);
  --heading-font-weight: var(--font-weight-light);
  /* Micro-typography (P59) — the eyebrow's tracking (uppercase labels need positive
     letter-spacing to read); a role, re-valued per client. */
  --letter-spacing-eyebrow: 0.08em;
  /* Text Links */
  --text-link-underline-height: var(--line-thickness);
  --text-link-underline-offset: 5px;
  --text-link-underline-height-hover: calc(var(--line-thickness) * 2);
  --text-link-underline-style: solid; /* the 4th composite axis (solid default; re-value to wavy/dotted for a treatment) */
  /* Link colors */
  --text-link-color: var(--color-primary);
  --text-link-color-alt: var(--color-white);
  /* Hover Colors */
  --text-link-color-hover: var(--color-secondary);
  --text-link-color-alt-hover: var(--color-highlight-alt);
  /* TEXT LINK — UNDERLINE COLORS */
  --text-link-underline-color: var(--color-highlight);
  --text-link-underline-color-alt: var(--color-highlight-alt);
  /* Hover Underline Colors */
  --text-link-underline-color-hover: var(--color-highlight);
  --text-link-underline-color-alt-hover: var(--color-highlight-alt);
  /* Visited Color */
  --text-link-color-visited: var(--text-link-color);
  /* List Items  */
  --list-marker-color: var(--color-primary);
  --list-marker-color-alt: var(--color-white);
  --list-item-vertical-margin: var(--inner-spacing-md);
  /* Block Quote   */
  --block-quote-border-color: var(--color-highlight);
  --block-quote-border-color-alt: var(--color-highlight);
  --block-quote-font-size: var(--body-md-font-size);
  --block-quote-font-style: italic;
  --block-quote-max-width: 500px;
  --block-quote-vertical-sapcing: var(--inner-spacing-sm);
  --block-quote-horizontal-sapcing: calc(var(--block-quote-vertical-sapcing) * 2);
  /* Tables */
  --table-border-color: var(--color-gray);
  --table-border-thickness: var(--line-thickness);
  --table-cell-padding-vertical: var(--inner-spacing-xs);
  --table-cell-padding-horizontal: var(--inner-spacing-sm);
  --table-head-background-color: var(--color-off-white);
  --table-head-text-color: var(--color-type-heading);
  --table-head-font-weight: var(--font-weight-bold);
  /* Minimum card inline size before the grid wraps (P48) — role-named, a
     component literal like --input-max-width:400px / --header-height:85px;
     re-VALUED per client, never renamed (Block Transportability). */
  --card-min-inline-size: 280px;
  /* //////////////////////////////
   /////// Column Settings ///////
   //////////////////////////// */
  --column-gap-two: var(--inner-spacing-lg);
  --column-gap-three: var(--inner-spacing-md);
  --column-gap-four: var(--inner-spacing-md);
  --column-gap-five: var(--inner-spacing-sm);
  --column-gap-six: var(--inner-spacing-sm);
  /* //////////////////////////////
   /// Shared Control Dimensions ///
   ////////////////////////////// */
  /* One welding basis the button / input / select / pagination surfaces
     derive from — re-VALUED per client, never renamed (Block Transportability).
     --control-height has NO incumbent (grep exit 1): it SETS a height these
     controls never had; the first adopter's QA pins the exact number. */
  --control-height: 48px;
  --control-padding-x: var(--inner-spacing-md);
  /* Scroll-snap card row (P50) — the fixed track width of ONE item in a
     horizontally-scrolling card row. Role-named, re-VALUED per client, never
     renamed (Block Transportability). Minted because the column system sizes
     items as a container-FRACTION (100%/N), the wrong basis for a scroll row;
     component literal per the --swiper-button-size:40px / --header-height:85px
     / --input-max-width:400px precedent. Everything else the row needs REUSES
     an existing home (gap → --column-gap-*, radius → --border-radius-*). */
  --card-row-item-width: 280px;
  /* ////////////////////////
   ///////// BUTTONS ////////
   /////////////////////// */
  --button-font-family: var(--body-font-family);
  --button-font-size: var(--body-default-font-size);
  --button-font-weight: var(--body-default-font-weight);
  --button-padding-vertical: var(--inner-spacing-sm);
  --button-padding-horizontal: var(--inner-spacing-md);
  --button-border-radius: var(--border-radius-xl);
  --button-border-thickness: var(--line-thickness);
  --button-border-color: var(--color-primary);
  --button-border-type: none;
  --button-gap-size: var(--inner-spacing-sm);
  /* Default Button */
  --button-default-font-color: var(--color-white);
  --button-default-background-color: var(--color-secondary);
  /*  Default Button Hover */
  --button-default-font-color-hover: var(--color-white);
  --button-default-background-color-hover: var(--color-primary);
  --button-default-border-color-hover: var(--color-highlight-hover);
  /* Alt Button */
  --button-alt-font-color: var(--color-primary);
  --button-alt-background-color: var(--color-white);
  --button-alt-border-color: var(--color-highlight-alt);
  /* Alt Button Hover */
  --button-alt-font-color-hover: var(--color-secondary);
  --button-alt-background-color-hover: var(--color-accent-1);
  --button-alt-border-color-hover: var(--color-highlight-alt-hover);
  /* Chip / interactive-tag family (P42) — selectable/dismissible app-surface
     control. Cato §3.1 reuse-before-create: the chip is a .fw-frameworker-button and
     reuses the button colour/motion/stroke roles; only the genuinely-homeless chip
     dimensions (a smaller pill than the button) and the PERSISTENT selected surface
     (a button has default+hover, never a sticky selected state) are minted, each by
     ROLE. A client re-values, never renames (Block Transportability). */
  --chip-padding-vertical: var(--inner-spacing-xs); /* 5px — one step in from the button's sm */
  --chip-padding-horizontal: var(--inner-spacing-sm); /* 15px */
  --chip-gap: var(--inner-spacing-xs); /* spacing WITHIN a chip set */
  --chip-font-size: var(--caption-font-size); /* chips read one step down from the button */
  --chip-border-radius: var(--border-radius-xl); /* full pill — the SAME radius role the button binds */
  --chip-border-thickness: var(--line-thickness); /* reuse the stroke role */
  --chip-background-color: var(--color-off-white); /* resting surface */
  --chip-text-color: var(--color-primary);
  --chip-border-color: var(--color-highlight-alt);
  --chip-background-color-selected: var(--color-highlight); /* selected/pressed — the accent role, not a value class */
  --chip-text-color-selected: var(--color-white);
  /* Floating action button family (P38) — app/dashboard chrome. Role-named, not
     value-named; a client re-values, never renames. Colors REUSE the button roles
     (Cato §3.1), not a second button-color vocabulary. */
  --fab-size: 56px; /* the control diameter */
  --fab-icon-size: 24px; /* the glyph within */
  --fab-offset: var(--inner-spacing-sm); /* inset from the viewport edge */
  --fab-extended-padding-horizontal: var(--inner-spacing-md); /* Extended FAB label gutter */
  /* Validation states (consumed by the NF skin in form-styles.scss) */
  --input-border-color-error: var(--color-error-500);
  --input-message-color-error: var(--color-error-500);
  --input-message-color-success: var(--color-success-500);
  /* Range control (P23) — thumb color reuses --input-accent-color (P8) */
  --range-track-color: var(--input-border-color);
  --range-track-height: 4px;
  --range-thumb-size: 16px;
  /* Switch control (P25) — on-state reuses the shared input accent role (P8/P23) */
  --switch-width: 36px;
  --switch-height: 20px;
  --switch-track-color: var(--input-border-color);
  --switch-track-color-on: var(--input-accent-color);
  --switch-thumb-color: var(--input-background-color);
  /* ////////////////////////////
   //////// Input & Forms ////////
   //////////////////////////// */
  --input-font-family: var(--body-font-family);
  --input-font-weight: var(--body-default-font-weight);
  --input-text-color: var(--color-black);
  --input-placeholder-color: var(--color-black);
  --input-placeholder-opacity: 0.3333;
  --input-border-color: var(--color-black);
  --input-background-color: var(--color-white);
  --input-border-radius: 0;
  --input-border-thickness: var(--line-thickness);
  --input-border-color-focus: var(--color-highlight);
  --input-padding-vertical: var(--inner-spacing-sm);
  --input-padding-horizontal: var(--inner-spacing-sm);
  --input-max-width: 400px;
  --input-border-color-alt: var(--color-off-white);
  --input-border-highlight-dark: var(--color-highlight-alt);
  /* Rich field controls (P39) — app/dashboard data-entry family. Role-named, re-
     VALUED per client, never renamed (Block Transportability). The selected/filled
     state REUSES --input-accent-color (P8/P23/P25, Cato §3.1); the popup elevation
     REUSES --box-shadow-lg (re-valued from flat, like P38); only the two homeless
     dimensions are minted, each a component literal (the --swiper-button-size:40px /
     --header-height:85px precedent, both shipped literals). */
  --field-cell-size: 48px; /* one fixed square field cell — OTP char + calendar day */
  --rating-icon-size: 24px; /* the rating glyph diameter */
  /* Notices (inline status feedback — form success/error, announcements) */
  --notice-success-color: var(--color-success-500);
  --notice-warning-color: var(--color-warning-500);
  --notice-error-color: var(--color-error-500);
  --notice-text-color: var(--color-type-body);
  --notice-padding-vertical: var(--inner-spacing-sm);
  --notice-padding-horizontal: var(--inner-spacing-md);
  --notice-border-radius: var(--border-radius-sm);
  --notice-border-thickness: var(--line-thickness);
  /* Checks & Radios (checkbox/radio controls — NF core fields + template markup) */
  --input-check-size: 18px;
  --input-accent-color: var(--color-highlight);
  --input-check-gap: var(--inner-spacing-xs);
  /* ////////////////////////////
   ////////// Loaders ////////////
   //////////////////////////// */
  --loader-background-color: var(--color-white);
  --loader-spinner-color: var(--color-secondary);
  --loader-spinner-width: 200px;
  /* Skeleton placeholder (P41) — the per-pane loading affordance, sibling of the
     page #preloader. Role-named — re-VALUED per client, never renamed (Block
     Transportability). Surface + highlight re-value existing colour roles; radius
     derives from the shape scale; the shimmer cadence is the ONE genuinely-new
     dimension — a literal default in the --loader-spinner-width:200px tradition,
     because no loop-cadence role exists to reuse (the spinner's 2s is a raw
     literal, loaders.scss:35). */
  --skeleton-surface-color: var(--color-off-white);
  --skeleton-highlight-color: var(--color-white);
  --skeleton-radius: var(--border-radius-sm);
  --skeleton-shimmer-duration: 1.5s;
  /* ///////////////////////////////////
  //// Global Pagination Settings ///////
  ////////////////////////////////////// */
  /* Section Spacing */
  --pagination-padding-vertical: var(--inner-spacing-md);
  --pagination-padding-horizontal: 0;
  /* Border */
  --pagination-border-width: var(--line-thickness);
  --pagination-border-color: var(--color-highlight);
  /* Button Spacing */
  --pagination-button-padding-vertical: var(--inner-spacing-sm);
  --pagination-button-padding-horizontal: var(--inner-spacing-md);
  --pagination-button-space-between: var(--inner-spacing-xs);
  /* Clickable Buttons */
  --pagination-clickable-text-color: var(--color-black);
  --pagination-clickable-background-color: var(--color-primary);
  --pagination-clickable-border-color: var(--color-highlight);
  /* Clickable Buttons Hover */
  --pagination-clickable-text-color-hover: var(--color-black);
  --pagination-clickable-background-color-hover: var(--color-white);
  --pagination-clickable-border-color-hover: var(--color-highlight);
  /* Active Button */
  --pagination-active-text-color: var(--pagination-clickable-text-color);
  --pagination-active-background-color: var(--color-white);
  --pagination-active-border-color: var(--color-highlight);
  /* Next Prev Buttons */
  --pagination-net-prev-padding: calc(var(--pagination-button-padding-horizontal) + 5px);
  /* Breadcrumb Trail */
  --breadcrumb-font-size: var(--body-sm-font-size);
  --breadcrumb-link-color: var(--text-link-color);
  --breadcrumb-current-color: var(--color-gray);
  --breadcrumb-separator-color: var(--color-gray);
  --breadcrumb-item-gap: var(--inner-spacing-xs);
  --breadcrumb-margin-bottom: var(--inner-spacing-md);
  /* Tabs (strip + panels; aliases the pagination active-item roles) */
  --tab-strip-gap: var(--pagination-button-space-between);
  --tab-text-color: var(--pagination-clickable-text-color);
  --tab-background-color: var(--pagination-clickable-background-color);
  --tab-border-color: var(--pagination-clickable-border-color);
  --tab-active-text-color: var(--pagination-active-text-color);
  --tab-active-background-color: var(--pagination-active-background-color);
  --tab-active-border-color: var(--pagination-active-border-color);
  --tab-panel-padding-vertical: var(--inner-spacing-md);
  /* ///////////////////////////////////
  //// Swiper Carousel Settings /////////
  ////////////////////////////////////// */
  /* Arrow Buttons — canonical look from carousel-section-2 */
  --swiper-button-size: 40px;
  --swiper-button-border-width: 1px;
  --swiper-button-border-color: var(--color-highlight);
  --swiper-button-chevron-color: var(--color-highlight);
  /* Hover → tertiary (accent-1, via the highlight-hover token) */
  --swiper-button-border-color-hover: var(--color-highlight-hover);
  --swiper-button-chevron-color-hover: var(--color-highlight-hover);
  /* Pagination Dots (shared by Swiper bullets + Flickity .dot) */
  --swiper-pagination-bullet-color: var(--color-highlight);
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-horizontal-gap: 5px;
  --swiper-pagination-vertical-spacing: 0px;
  /* Swiper built-in pagination offsets (horizontal carousels) */
  --swiper-pagination-bottom: 0px;
  --swiper-pagination-top: 0px;
  /* //////////////////////////
   /// Header Settings /////////
   ///////////////////////////*/
  --header-position: relative;
  --header-background-color: var(--color-white);
  /* Offset a native anchor jump reserves above its scroll stop (P47). Default 0 =
     header is in-flow, no offset. Uncomment the override BELOW (together with the
     --header-position: fixed pair above) to re-value it to var(--header-height), so a
     #hash jump clears the fixed chrome. The active default is declared FIRST and the
     commented opt-in AFTER — so uncommenting it WINS the cascade (mirrors the
     --header-position: relative / // fixed pair). Role-named (never --scroll-85 /
     --anchor-top); re-VALUED per client, never renamed. */
  --scroll-anchor-offset: 0;
  --mobile-menu-background-color: var(--color-white);
  /* Sizing + Spacing */
  --header-height: 85px;
  --header-vertical-padding: var(--inner-spacing-md);
  --header-menu-item-spacing: var(--inner-spacing-md);
  --header-logo-max-width: 65%;
  /* Fonts + Text */
  --submenu-item-spacing: var(--inner-spacing-md);
  --header-font-size: var(--body-md-font-size);
  --header-font-family: var(--body-font-family);
  --header-font-weight: var(--body-default-font-weight);
  /* Link Styling */
  --header-text-decoration: none;
  --header-nav-link-color: var(--color-secondary);
  --header-nav-link-color-hover: var(--color-accent-1);
  --header-nav-link-underline-color: var(--color-primary);
  --header-nav-link-underline-color-hover: var(--color-secondary);
  --header-nav-link-underline-height: var(--line-thickness);
  --header-nav-link-underline-height-hover: calc(var(--line-thickness) * 2);
  --header-nav-active-link-color: var(--color-primary);
  --header-nav-active-link-underline-color: var(--color-primary);
  /* Search */
  --header-search-background-color: var(--color-primary);
  --header-search-text-color: var(--color-white);
  --header-search-button-text-color: var(--color-primary);
  --header-search-button-background-color: var(--color-white);
  /* //////////////////////////////////
   /// App Shell — Navigation Rail /////
   ////////////////////////////////// */
  /* Persistent dashboard/app rail (P37). Role-named — re-VALUED per client,
     never renamed (Block Transportability). Complements the marketing header
     nav + mobile drawer; it does NOT replace them. Defined-but-unbound today.
     The account avatar binds P36's --avatar-size (ONE home) — introduced there;
     this diff mints it only if P36 has not landed first. */
  --nav-rail-width: 72px; /* collapsed icon rail */
  --nav-rail-expanded-width: 264px; /* expanded tree nav */
  --nav-rail-background: var(--color-white); /* surface — re-values a color role, like --header-background-color */
  /* //////////////////////////
   /// User Identity //////////
   ///////////////////////////*/
  /* Session/operator identity chrome — re-VALUED per client, never renamed
     (Block Transportability). --avatar-size / --status-dot-size are component
     literals (the --swiper-button-size:40px / --header-height:85px precedent);
     ring + overlap DERIVE from the shipped stroke/size roles; presence colour
     binds an existing accent role. Round crop is border-radius:50% (geometry). */
  --avatar-size: 40px;
  --avatar-ring-width: calc(var(--line-thickness) * 2);
  --avatar-ring-color: var(--color-white);
  --avatar-stack-overlap: calc(var(--avatar-size) / 3);
  --status-dot-size: 10px;
  --status-dot-color-online: var(--color-accent-1);
  /* //////////////////////////
  //// Footer Settings ////
  /////////////////////////

  /// // Footer Section Spacing */
  --footer-vertical-spacing-top: var(--content-vertical-padding-normal);
  --footer-vertical-spacing-bottom: var(--content-vertical-padding-less);
  /* Take Total Number of Columns divide by 100 */
  --footer-tile-width: calc(25% - var(--inner-spacing-sm));
  --footer-tile-padding-horizontal: var(--inner-spacing-md);
  --footer-tile-margin-bottom: 0px;
  /* Tile Text */
  --footer-font-size: var(--body-md-font-size);
  --footer-font-weight: var(--body-default-font-weight);
  --footer-background-color: var(--color-secondary);
  --footer-text-color: var(--color-white);
  --footer-text-color-hover: var(--color-accent-1);
  /* Tile Title */
  --footer-tile-title-font-family: var(--heading-font-family);
  --footer-tile-title-font-size: var(--heading-sm-font-size);
  --footer-tile-title-font-weight: var(--heading-font-weight);
  --footer-tile-title-margin-bottom: var(--inner-spacing-sm);
  /* Footer Links */
  --footer-text-decoration-style: underline;
  --footer-link-underline-color: var(--color-highlight);
  --footer-link-underline-color-hover: var(--color-highlight-hover);
  --footer-link-underline-height: var(--line-thickness);
  --footer-link-underline-height-hover: calc(var(--line-thickness) * 2);
  /* Logo Tile */
  --footer-logo-max-width: 200px;
  /* Site Nav Tile */
  --footer-nav-links-vertical-spacing: var(--inner-spacing-sm);
  /* Contact Tile */
  --footer-contact-links-vertical-spacing: var(--inner-spacing-sm);
  /* Social Tile */
  --social-icon-font-size: var(--body-lg-font-size);
  --social-icon-horizontal-spacing: var(--inner-spacing-sm);
  /* Copyright Footer */
  --copyright-font-size: var(--body-sm-font-size);
  /* //////////////////////////
  //// Modal Settings ////
  /////////////////////////*/
  --modal-max-width: 640px;
  --modal-vert-padding: var(--inner-spacing-xl);
  --modal-horiz-padding: var(--inner-spacing-xl);
  --modal-background-color: var(--color-white);
  --modal-text-color: var(--color-black);
  --modal-headline-font-family: var(--heading-font-family);
  --modal-headline-font-size: var(--heading-md-font-size);
  --modal-headline-line-height: var(--heading-md-line-height);
  --modal-headline-font-weight: var(--heading-font-weight);
  --modal-border-radius: var(--border-radius-md);
  --modal-close-size: calc((var(--modal-vert-padding) + var(--modal-horiz-padding)) / 4);
  --modal-close-top: calc(var(--modal-vert-padding) / 2);
  --modal-close-right: calc(var(--modal-horiz-padding) / 2);
  /* //////////////////////////
   //// Toast / Snackbar //////
   /////////////////////////*/
  /* Transient app/dashboard status messages (P40). Role-named, re-VALUED per
     client, never renamed. Colour/motion/radius/shadow REUSE shipped roles
     (Cato §3.1); only placement + timing are new. */
  --toast-max-width: 400px; /* the toast's reach; a client re-values */
  --toast-offset: var(--inner-spacing-md); /* inset from the viewport corner */
  --toast-gap: var(--inner-spacing-sm); /* vertical gap between stacked toasts */
  --toast-duration: 5000ms; /* auto-dismiss display time (role, not value) */
  /* Tooltip (CSS-first hover/focus hint bubble) */
  --tooltip-background-color: var(--color-primary);
  --tooltip-text-color: var(--color-white);
  --tooltip-font-size: var(--caption-font-size);
  --tooltip-border-radius: var(--border-radius-sm);
  --tooltip-padding-vertical: var(--inner-spacing-xs);
  --tooltip-padding-horizontal: var(--inner-spacing-sm);
  --tooltip-max-width: 250px;
  --tooltip-offset: var(--inner-spacing-xs);
  /* //////////////////////////////
  ///////// Card Settings ////////
  ///////////////////////////// */
  --card-text: var(--body-default-font-color);
  --card-background: var(--color-white);
  --card-text-alt: var(--body-default-font-color);
  --card-background-alt: var(--color-off-white);
  /* //////////////////////////////
  //// Progress / Meter Settings //
  ///////////////////////////// */
  --progress-track-color: var(--color-off-white);
  --progress-fill-color: var(--color-highlight);
  --progress-track-height: 5px; /* component literal, not a spacing-rhythm alias — re-valuing the spacing scale must not silently change bar thickness (Cato 2026-07-31) */
  --progress-border-radius: var(--border-radius-xl);
  --progress-label-font-size: var(--body-sm-font-size);
  /* //////////////////////////////
  //// WP Standard Settings ///
  ///////////////////////////// */
  --wp-post-block-padding: var(--inner-spacing-lg);
}

/* P28 — engines that support dynamic viewport units re-declare the SAME roles
   to the dynamic units; non-supporting engines keep the 100vh defaults above.
   One detection gates the whole family — dvh/svh/lvh shipped together, so
   `@supports (height: 100dvh)` also confirms svh. */
@supports (height: 100dvh) {
  :root {
    --overlay-full-height: 100dvh; /* tracks the live visible viewport */
    --section-full-height: 100svh; /* smallest guaranteed viewport */
  }
}
@media screen and (max-width: 1024px) {
  :root {
    --header-vertical-padding: 25px;
    --header-height: 90px;
    --header-menu-item-spacing: var(--inner-spacing-md);
    --heading-xs-font-size: 16px;
    --heading-xs-line-height: 1.2;
    /* Heading SM */
    --heading-sm-font-size: 21px;
    --heading-sm-line-height: 1.2;
    /* Heading MD */
    --heading-md-font-size: 28px;
    --heading-md-line-height: 1.2;
    /* Heading LG */
    --heading-lg-font-size: 37px;
    --heading-lg-line-height: 1.2;
    /* Heading XL */
    --heading-xl-font-size: 49px;
    --heading-xl-line-height: 1.2;
    /* Heading 2XL */
    --heading-2xl-font-size: 65px;
    --heading-2xl-line-height: 1.2;
    --footer-tile-width: calc(50% - var(--inner-spacing-sm));
    --footer-tile-margin-bottom: var(--inner-spacing-md);
    --footer-tile-title-margin-bottom: var(--inner-spacing-xs);
  }
}
@media screen and (max-width: 885px) {
  :root {
    --content-horizontal-padding: 35px;
    --content-vertical-padding-normal: 60px;
    --content-vertical-padding-more: 120px;
    --content-vertical-padding-less: 30px;
    /* Border Radius */
    --border-radius-xl: 50px;
    --border-radius-lg: 30px;
    --border-radius-md: 10px;
    --border-radius-sm: 5px;
    --body-default-font-size: var(--body-sm-font-size);
    --header-font-size: var(--body-lg-font-size);
    /* Logo Sizing */
    --header-logo-max-width: 45%;
    /* Headline Sizing */
    --heading-xs-font-size: 12px;
    --heading-xs-line-height: 1.2;
    /* Heading SM */
    --heading-sm-font-size: 16px;
    --heading-sm-line-height: 1.2;
    /* Heading MD */
    --heading-md-font-size: 21px;
    --heading-md-line-height: 1.2;
    /* Heading LG */
    --heading-lg-font-size: 28px;
    --heading-lg-line-height: 1.2;
    /* Heading XL */
    --heading-xl-font-size: 37px;
    --heading-xl-line-height: 1.2;
    /* Heading 2XL */
    --heading-2xl-font-size: 49px;
    --heading-2xl-line-height: 1.2;
    --footer-vertical-spacing-top: 30px;
    --footer-vertical-spacing-bottom: 40px;
    --footer-tile-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --modal-close-size: 30px;
    --modal-vert-padding: 60px;
    --modal-horiz-padding: 40px;
  }
}