/**
 * AGH Teams
 * File: agh-tokens.css
 * Purpose: Production global design tokens for the refreshed AGH Teams public website.
 *          Preserves the existing token contract while adding the approved image-led
 *          Hero, wide visual-stage, premium card-motion, pastel-surface and Footer
 *          sizing primitives required by the 2026 remediation programme.
 * Depends on: None — this remains the first global system file.
 * Used by: All AGH global CSS files, reusable components, and page/template styles.
 * Version: 2.0
 */

:root {
  /* ========================================================================
     01. FONT FAMILIES & WEIGHTS
     ======================================================================== */

  /* Runtime must deliver Manrope; this fallback stack prevents broken text
     while the font asset/provider is loading or unavailable. */
  --agh-font-family-primary: "Manrope", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --agh-font-weight-regular: 400;
  --agh-font-weight-medium: 500;
  --agh-font-weight-semibold: 600;
  --agh-font-weight-bold: 700;

  /* ========================================================================
     02. BRAND, SURFACE & TEXT COLOURS
     ======================================================================== */

  --agh-color-brand-primary: #fe7b0c;
  --agh-color-brand-primary-hover: #f56a00;

  --agh-color-text-primary: #181818;
  --agh-color-text-secondary: #5f6368;

  --agh-color-white: #ffffff;
  --agh-color-warm-white: #faf9f7;
  --agh-color-soft-neutral: #f2f2f2;
  --agh-color-border: #e3e3e3;

  --agh-color-pastel-peach: #fdede3;
  --agh-color-pastel-ice-blue: #e9f0f9;
  --agh-color-pastel-lavender: #efeaf9;
  --agh-color-pastel-sage: #edf4e9;

  /* Derived brand / surface helpers for the refreshed image-led system. */
  --agh-color-brand-primary-soft: rgba(254, 123, 12, 0.08);
  --agh-color-brand-primary-soft-strong: rgba(254, 123, 12, 0.14);
  --agh-color-brand-primary-border: rgba(254, 123, 12, 0.38);
  --agh-color-charcoal-soft: rgba(24, 24, 24, 0.06);
  --agh-color-charcoal-overlay: rgba(24, 24, 24, 0.64);

  --agh-color-surface-peach: var(--agh-color-pastel-peach);
  --agh-color-surface-ice: var(--agh-color-pastel-ice-blue);
  --agh-color-surface-lavender: var(--agh-color-pastel-lavender);
  --agh-color-surface-sage: var(--agh-color-pastel-sage);

  /* Optional functional accents — never primary brand colours. */
  --agh-color-functional-blue: #4a7fc7;
  --agh-color-functional-lavender: #8a6bc5;
  --agh-color-functional-green: #7fa276;

  /* Semantic state colours. */
  --agh-color-state-success: #287a4b;
  --agh-color-state-warning: #9a6200;
  --agh-color-state-error: #b42318;
  --agh-color-state-info: #3569a8;

  /* Semantic surface aliases. */
  --agh-color-background: var(--agh-color-white);
  --agh-color-background-alt: var(--agh-color-warm-white);
  --agh-color-surface: var(--agh-color-white);
  --agh-color-surface-muted: var(--agh-color-soft-neutral);

  --agh-color-surface-hero-panel: rgba(255, 255, 255, 0.94);
  --agh-color-surface-hero-panel-border: rgba(255, 255, 255, 0.72);
  --agh-color-surface-visual-stage: var(--agh-color-warm-white);
  --agh-color-surface-system-stage: var(--agh-color-white);

  /* ========================================================================
     03. TYPOGRAPHY — REFERENCE TOKENS
     ======================================================================== */

  /* Desktop. */
  --agh-type-display-size-desktop: 64px;
  --agh-type-display-line-height-desktop: 68px;
  --agh-type-display-weight: var(--agh-font-weight-semibold);
  --agh-type-display-letter-spacing: -0.035em;

  --agh-type-h1-size-desktop: 56px;
  --agh-type-h1-line-height-desktop: 62px;
  --agh-type-h1-weight: var(--agh-font-weight-semibold);
  --agh-type-h1-letter-spacing: -0.03em;

  --agh-type-h2-size-desktop: 44px;
  --agh-type-h2-line-height-desktop: 52px;
  --agh-type-h2-weight: var(--agh-font-weight-semibold);
  --agh-type-h2-letter-spacing: -0.025em;

  --agh-type-h3-size-desktop: 30px;
  --agh-type-h3-line-height-desktop: 38px;
  --agh-type-h3-weight: var(--agh-font-weight-semibold);
  --agh-type-h3-letter-spacing: -0.015em;

  --agh-type-h4-size-desktop: 22px;
  --agh-type-h4-line-height-desktop: 30px;
  --agh-type-h4-weight: var(--agh-font-weight-semibold);
  --agh-type-h4-letter-spacing: -0.01em;

  --agh-type-h5-size-desktop: 19px;
  --agh-type-h5-line-height-desktop: 27px;
  --agh-type-h5-weight: var(--agh-font-weight-semibold);

  --agh-type-body-large-size-desktop: 19px;
  --agh-type-body-large-line-height-desktop: 30px;
  --agh-type-body-large-weight: var(--agh-font-weight-regular);

  --agh-type-body-size-desktop: 17px;
  --agh-type-body-line-height-desktop: 28px;
  --agh-type-body-weight: var(--agh-font-weight-regular);

  --agh-type-body-small-size-desktop: 15px;
  --agh-type-body-small-line-height-desktop: 23px;
  --agh-type-body-small-weight: var(--agh-font-weight-regular);

  --agh-type-eyebrow-size-desktop: 12px;
  --agh-type-eyebrow-line-height-desktop: 18px;
  --agh-type-eyebrow-weight: var(--agh-font-weight-semibold);
  --agh-type-eyebrow-letter-spacing: 0.11em;

  --agh-type-navigation-size: 15px;
  --agh-type-navigation-line-height: 20px;
  --agh-type-navigation-weight: var(--agh-font-weight-semibold);

  --agh-type-button-size: 15px;
  --agh-type-button-line-height: 20px;
  --agh-type-button-weight: var(--agh-font-weight-semibold);

  --agh-type-form-label-size: 14px;
  --agh-type-form-label-line-height: 20px;
  --agh-type-form-label-weight: var(--agh-font-weight-semibold);

  --agh-type-form-input-size: 16px;
  --agh-type-form-input-line-height: 24px;
  --agh-type-form-input-weight: var(--agh-font-weight-regular);

  --agh-type-meta-size: 14px;
  --agh-type-meta-line-height: 20px;
  --agh-type-meta-weight-min: var(--agh-font-weight-regular);
  --agh-type-meta-weight-max: var(--agh-font-weight-medium);

  /* Tablet. */
  --agh-type-h1-size-tablet: 48px;
  --agh-type-h1-line-height-tablet: 54px;
  --agh-type-h2-size-tablet: 38px;
  --agh-type-h2-line-height-tablet: 46px;
  --agh-type-h3-size-tablet: 27px;
  --agh-type-h3-line-height-tablet: 35px;
  --agh-type-h4-size-tablet: 21px;
  --agh-type-h4-line-height-tablet: 29px;
  --agh-type-body-large-size-tablet: 18px;
  --agh-type-body-large-line-height-tablet: 29px;
  --agh-type-body-size-tablet: 16px;
  --agh-type-body-line-height-tablet: 26px;

  /* Mobile. */
  --agh-type-display-size-mobile: 44px;
  --agh-type-display-line-height-mobile: 48px;
  --agh-type-h1-size-mobile: 38px;
  --agh-type-h1-line-height-mobile: 43px;
  --agh-type-h2-size-mobile: 30px;
  --agh-type-h2-line-height-mobile: 37px;
  --agh-type-h3-size-mobile: 25px;
  --agh-type-h3-line-height-mobile: 32px;
  --agh-type-h4-size-mobile: 20px;
  --agh-type-h4-line-height-mobile: 28px;
  --agh-type-body-large-size-mobile: 18px;
  --agh-type-body-large-line-height-mobile: 28px;
  --agh-type-body-size-mobile: 16px;
  --agh-type-body-line-height-mobile: 26px;
  --agh-type-body-small-size-mobile: 14px;
  --agh-type-body-small-line-height-mobile: 22px;
  --agh-type-eyebrow-size-mobile: 12px;
  --agh-type-eyebrow-line-height-mobile: 18px;

  /* Semantic typography aliases initialise to the desktop system.
     agh-responsive.css may remap these aliases at the locked breakpoints. */
  --agh-type-display-size: var(--agh-type-display-size-desktop);
  --agh-type-display-line-height: var(--agh-type-display-line-height-desktop);
  --agh-type-h1-size: var(--agh-type-h1-size-desktop);
  --agh-type-h1-line-height: var(--agh-type-h1-line-height-desktop);
  --agh-type-h2-size: var(--agh-type-h2-size-desktop);
  --agh-type-h2-line-height: var(--agh-type-h2-line-height-desktop);
  --agh-type-h3-size: var(--agh-type-h3-size-desktop);
  --agh-type-h3-line-height: var(--agh-type-h3-line-height-desktop);
  --agh-type-h4-size: var(--agh-type-h4-size-desktop);
  --agh-type-h4-line-height: var(--agh-type-h4-line-height-desktop);
  --agh-type-h5-size: var(--agh-type-h5-size-desktop);
  --agh-type-h5-line-height: var(--agh-type-h5-line-height-desktop);
  --agh-type-body-large-size: var(--agh-type-body-large-size-desktop);
  --agh-type-body-large-line-height: var(--agh-type-body-large-line-height-desktop);
  --agh-type-body-size: var(--agh-type-body-size-desktop);
  --agh-type-body-line-height: var(--agh-type-body-line-height-desktop);
  --agh-type-body-small-size: var(--agh-type-body-small-size-desktop);
  --agh-type-body-small-line-height: var(--agh-type-body-small-line-height-desktop);
  --agh-type-eyebrow-size: var(--agh-type-eyebrow-size-desktop);
  --agh-type-eyebrow-line-height: var(--agh-type-eyebrow-line-height-desktop);

  /* Readability / measure. */
  --agh-measure-hero-h1-min: 560px;
  --agh-measure-hero-h1-max: 700px;
  --agh-measure-h2-min: 680px;
  --agh-measure-h2-max: 780px;
  --agh-measure-supporting-copy-min: 580px;
  --agh-measure-supporting-copy-max: 680px;
  --agh-measure-long-form: 68ch;

  /* ========================================================================
     04. SPACING SCALE
     ======================================================================== */

  --agh-space-4: 4px;
  --agh-space-8: 8px;
  --agh-space-12: 12px;
  --agh-space-16: 16px;
  --agh-space-24: 24px;
  --agh-space-32: 32px;
  --agh-space-40: 40px;
  --agh-space-48: 48px;
  --agh-space-64: 64px;
  --agh-space-80: 80px;
  --agh-space-96: 96px;
  --agh-space-120: 120px;
  --agh-space-160: 160px;

  --agh-space-base: var(--agh-space-8);

  /* Section spacing. */
  --agh-section-space-standard-desktop: 104px;
  --agh-section-space-compact-desktop: 72px;
  --agh-section-space-hero-top-min: 40px;
  --agh-section-space-hero-top-max: 56px;
  --agh-section-space-hero-bottom: 64px;
  --agh-section-space-editorial-desktop: 88px;

  --agh-section-space-standard-tablet: 80px;
  --agh-section-space-standard-tablet-min: 72px;

  --agh-section-space-standard-mobile: 64px;
  --agh-section-space-standard-mobile-min: 56px;
  --agh-section-space-compact-mobile: 40px;

  /* Semantic section alias initialises to desktop. */
  --agh-section-space-standard: var(--agh-section-space-standard-desktop);

  /* ========================================================================
     05. CONTAINERS, GRID & GUTTERS
     ======================================================================== */

  --agh-container-primary: 1280px;
  --agh-container-wide: 1440px;
  --agh-container-text-min: 720px;
  --agh-container-text-max: 840px;
  --agh-container-reading-min: 760px;
  --agh-container-reading-max: 840px;

  --agh-grid-columns-desktop: 12;
  --agh-grid-columns-tablet: 8;
  --agh-grid-columns-mobile: 4;

  --agh-gutter-large-desktop-min: 48px;
  --agh-gutter-desktop: 32px;
  --agh-gutter-tablet: 32px;
  --agh-gutter-mobile: 20px;
  --agh-gutter-small-mobile-min: 18px;

  /* Semantic gutter alias initialises to desktop. */
  --agh-gutter-page: var(--agh-gutter-desktop);

  /* Breakpoint references. CSS custom properties cannot be used directly in
     @media conditions; agh-responsive.css must use these locked thresholds. */
  --agh-breakpoint-xxl: 1440px;
  --agh-breakpoint-xl: 1200px;
  --agh-breakpoint-lg: 992px;
  --agh-breakpoint-md: 768px;
  --agh-breakpoint-sm: 480px;

  /* ========================================================================
     06. RADII
     ======================================================================== */

  --agh-radius-control-small: 10px;
  --agh-radius-button: 12px;
  --agh-radius-input: 12px;
  --agh-radius-card: 20px;
  --agh-radius-feature: 24px;
  --agh-radius-image: 24px;
  --agh-radius-mega-menu: 24px;
  --agh-radius-hero-stage: 24px;
  --agh-radius-visual-stage: 24px;
  --agh-radius-floating-panel: 20px;
  --agh-radius-dashboard-min: 16px;
  --agh-radius-dashboard-max: 20px;
  --agh-radius-pill: 999px;

  --agh-radius-icon-container-small: 10px;
  --agh-radius-icon-container-card: 12px;
  --agh-radius-icon-container-feature: 14px;
  --agh-radius-icon-container-large: 16px;

  /* ========================================================================
     07. BORDERS & CONNECTORS
     ======================================================================== */

  --agh-border-width-default: 1px;
  --agh-border-style-default: solid;
  --agh-border-default: var(--agh-border-width-default) var(--agh-border-style-default) var(--agh-color-border);
  --agh-border-strong: 1px solid rgba(24, 24, 24, 0.14);
  --agh-border-header: 1px solid rgba(24, 24, 24, 0.08);
  --agh-border-brand-soft: 1px solid var(--agh-color-brand-primary-border);
  --agh-border-panel-light: 1px solid rgba(255, 255, 255, 0.72);

  --agh-connector-width-min: 1px;
  --agh-connector-width-max: 2px;
  --agh-connector-color: var(--agh-color-brand-primary);

  /* ========================================================================
     08. SHADOWS
     ======================================================================== */

  --agh-shadow-ui: 0 1px 3px rgba(24, 24, 24, 0.05);
  --agh-shadow-card: 0 12px 32px rgba(24, 24, 24, 0.08);
  --agh-shadow-feature: 0 22px 56px rgba(24, 24, 24, 0.10);
  --agh-shadow-card-hover: 0 18px 44px rgba(24, 24, 24, 0.11);
  --agh-shadow-floating-panel: 0 20px 56px rgba(24, 24, 24, 0.14);

  /* ========================================================================
     09. CONTROLS & INTERACTION DIMENSIONS
     ======================================================================== */

  --agh-control-touch-min: 44px;
  --agh-control-button-height: 48px;
  --agh-control-button-height-max: 52px;
  --agh-control-input-height: 52px;
  --agh-control-textarea-min-height: 140px;

  --agh-form-field-gap: 20px;
  --agh-form-group-gap-min: 28px;
  --agh-form-group-gap-max: 32px;

  --agh-card-padding-min: 28px;
  --agh-card-padding-max: 32px;
  --agh-card-hover-translate-max: 4px;
  --agh-card-hover-scale: 1.02;
  --agh-card-hover-border-color: var(--agh-color-brand-primary-border);
  --agh-card-hover-background: var(--agh-color-brand-primary-soft);
  --agh-card-hover-orange-background: var(--agh-color-brand-primary);

  /* ========================================================================
     10. HEADER & NAVIGATION DIMENSIONS
     ======================================================================== */

  --agh-header-height-desktop: 80px;
  --agh-header-height-mobile-min: 68px;
  --agh-header-height-mobile-max: 72px;

  --agh-logo-height-desktop-min: 34px;
  --agh-logo-height-desktop-max: 38px;
  --agh-logo-height-mobile-min: 30px;
  --agh-logo-height-mobile-max: 34px;

  /* Footer brand treatment is intentionally larger than the Header logo. */
  --agh-footer-logo-height-desktop-min: 52px;
  --agh-footer-logo-height-desktop-max: 60px;
  --agh-footer-logo-height-mobile-min: 42px;
  --agh-footer-logo-height-mobile-max: 48px;

  --agh-navigation-gap-min: 28px;
  --agh-navigation-gap-max: 32px;
  --agh-mega-menu-padding-min: 28px;
  --agh-mega-menu-padding-max: 32px;

  /* ========================================================================
     11. ICON SYSTEM
     ======================================================================== */

  --agh-icon-viewbox-size: 24;
  --agh-icon-size-default: 24px;
  --agh-icon-size-small-min: 18px;
  --agh-icon-size-small-max: 20px;
  --agh-icon-size-feature-min: 32px;
  --agh-icon-size-feature-max: 40px;
  --agh-icon-stroke-width: 1.8px;

  --agh-icon-container-small: 40px;
  --agh-icon-container-card: 48px;
  --agh-icon-container-feature: 56px;
  --agh-icon-container-large: 64px;

  /* ========================================================================
     12. IMAGE & VISUAL RATIOS
     ======================================================================== */

  --agh-ratio-hero: 16 / 9;
  --agh-ratio-hero-alternative-wide: 2 / 1;
  --agh-ratio-hero-alternative-photo: 3 / 2;
  --agh-ratio-feature: 4 / 3;
  --agh-ratio-feature-vertical: 4 / 5;
  --agh-ratio-card: 1 / 1;
  --agh-ratio-process: 16 / 9;
  --agh-ratio-process-wide: 2 / 1;
  --agh-ratio-mobile-hero: 4 / 5;

  /* New image-led presentation modes. Existing ratios remain for compatibility. */
  --agh-ratio-visual-stage-wide: 2 / 1;
  --agh-ratio-editorial-stage: 16 / 9;
  --agh-ratio-dashboard-showcase: 16 / 10;
  --agh-ratio-workflow-showcase: 2 / 1;

  --agh-hero-stage-min-height-desktop: 620px;
  --agh-hero-stage-min-height-tablet: 520px;
  --agh-hero-stage-content-max: 520px;
  --agh-hero-stage-panel-padding-desktop: 32px;
  --agh-hero-stage-panel-padding-mobile: 24px;
  --agh-hero-stage-overlay-start: rgba(24, 24, 24, 0.58);
  --agh-hero-stage-overlay-mid: rgba(24, 24, 24, 0.20);
  --agh-hero-stage-overlay-end: rgba(24, 24, 24, 0);

  --agh-visual-stage-padding-desktop: 24px;
  --agh-visual-stage-padding-tablet: 20px;
  --agh-visual-stage-padding-mobile: 12px;
  --agh-visual-stage-gap-desktop: 32px;
  --agh-visual-stage-gap-mobile: 20px;

  /* ========================================================================
     13. MOTION
     ======================================================================== */

  --agh-duration-micro-min: 160ms;
  --agh-duration-micro-max: 220ms;
  --agh-duration-button: 180ms;
  --agh-duration-card: 220ms;
  --agh-duration-accordion-min: 220ms;
  --agh-duration-accordion-max: 280ms;
  --agh-duration-page-reveal-min: 350ms;
  --agh-duration-page-reveal-max: 500ms;
  --agh-duration-visual: 240ms;
  --agh-easing-default: cubic-bezier(0.22, 1, 0.36, 1);
  --agh-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/**
 * AGH Teams
 * File: agh-base.css
 * Purpose: Production browser-normalisation, document defaults, unified
 *          typography foundations, media safety, content-element defaults,
 *          and form inheritance for the refreshed AGH Teams public website.
 * Depends on: agh-tokens.css
 * Used by: All AGH public website pages, global components, templates,
 *          editorial content, legal content, forms, dashboards, and visuals.
 * Version: 2.0
 */

/* ========================================================================== 
   01. DOCUMENT FOUNDATION
   ========================================================================== */

html {
  box-sizing: border-box;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: var(--agh-font-family-primary);
  background: var(--agh-color-background);
}

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

body {
  min-block-size: 100vh;
  min-inline-size: 0;
  margin: 0;
  color: var(--agh-color-text-primary);
  background: var(--agh-color-background);
  font-family: var(--agh-font-family-primary);
  font-size: var(--agh-type-body-size);
  font-weight: var(--agh-type-body-weight);
  line-height: var(--agh-type-body-line-height);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

@supports (min-height: 100dvh) {
  body {
    min-block-size: 100dvh;
  }
}

::selection {
  color: var(--agh-color-text-primary);
  background: var(--agh-color-brand-primary-soft-strong);
}


/* ========================================================================== 
   02. TYPOGRAPHIC RESET & UNIFIED TYPE FOUNDATION
   ========================================================================== */

:where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  figure,
  figcaption,
  dl,
  dd
) {
  margin: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--agh-color-text-primary);
  font-family: var(--agh-font-family-primary);
  overflow-wrap: normal;
  word-break: normal;
}

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

h1 {
  font-size: var(--agh-type-h1-size);
  font-weight: var(--agh-type-h1-weight);
  line-height: var(--agh-type-h1-line-height);
  letter-spacing: var(--agh-type-h1-letter-spacing);
}

h2 {
  font-size: var(--agh-type-h2-size);
  font-weight: var(--agh-type-h2-weight);
  line-height: var(--agh-type-h2-line-height);
  letter-spacing: var(--agh-type-h2-letter-spacing);
}

h3 {
  font-size: var(--agh-type-h3-size);
  font-weight: var(--agh-type-h3-weight);
  line-height: var(--agh-type-h3-line-height);
  letter-spacing: var(--agh-type-h3-letter-spacing);
}

h4 {
  font-size: var(--agh-type-h4-size);
  font-weight: var(--agh-type-h4-weight);
  line-height: var(--agh-type-h4-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
}

h5,
h6 {
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

p {
  color: inherit;
  font: inherit;
}

@supports (text-wrap: pretty) {
  :where(p, li, dd, figcaption, blockquote) {
    text-wrap: pretty;
  }
}

small {
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

strong,
b {
  font-weight: var(--agh-font-weight-bold);
}

em,
i {
  font-style: italic;
}

mark {
  color: var(--agh-color-text-primary);
  background: var(--agh-color-pastel-peach);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 0.75em;
  line-height: 0;
}

sub {
  inset-block-end: -0.25em;
}

sup {
  inset-block-start: -0.5em;
}


/* ========================================================================== 
   03. LINKS
   ========================================================================== */

a {
  color: inherit;
  text-decoration-color: var(--agh-color-brand-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}

a:hover {
  text-decoration-color: var(--agh-color-brand-primary-hover);
}

a:where([href^="tel:"], [href^="mailto:"]) {
  overflow-wrap: anywhere;
}


/* ========================================================================== 
   04. LISTS & DESCRIPTION LISTS
   ========================================================================== */

:where(ul, ol) {
  margin: 0;
  padding-inline-start: 1.25em;
}

:where(ul, ol) :where(ul, ol) {
  margin-block-start: var(--agh-space-8);
}

li::marker {
  color: currentColor;
}

dt {
  font-weight: var(--agh-font-weight-semibold);
}

dd {
  color: var(--agh-color-text-secondary);
}


/* ========================================================================== 
   05. DIVIDERS & QUOTATION FOUNDATIONS
   ========================================================================== */

hr {
  block-size: 0;
  margin: 0;
  border: 0;
  border-block-start: var(--agh-border-default);
  color: inherit;
}

blockquote {
  color: inherit;
}

q {
  quotes: auto;
}


/* ========================================================================== 
   06. MEDIA & EMBED FOUNDATIONS
   ========================================================================== */

img,
picture,
svg,
canvas,
video {
  display: block;
}

img,
picture,
video,
canvas,
iframe,
svg {
  max-inline-size: 100%;
}

img,
video {
  block-size: auto;
}

img {
  font-style: italic;
  vertical-align: middle;
}

picture {
  min-inline-size: 0;
}

figure {
  max-inline-size: 100%;
  min-inline-size: 0;
}

figcaption {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

iframe {
  border: 0;
}

svg {
  overflow: visible;
}

svg:not(:root) {
  overflow: hidden;
}


/* ========================================================================== 
   07. TABLE FOUNDATION
   ========================================================================== */

table {
  max-inline-size: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: inherit;
  font: inherit;
}

caption {
  text-align: start;
}

th {
  text-align: start;
}


/* ========================================================================== 
   08. FORM & CONTROL INHERITANCE
   ========================================================================== */

:where(
  button,
  input,
  optgroup,
  select,
  textarea
) {
  margin: 0;
  color: inherit;
  font: inherit;
}

button,
select {
  text-transform: none;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]) {
  -webkit-appearance: button;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]),
select,
label {
  touch-action: manipulation;
}

button,
input,
select,
textarea {
  min-inline-size: 0;
  max-inline-size: 100%;
}

button:not(:disabled),
input:where([type="button"], [type="reset"], [type="submit"]):not(:disabled),
select:not(:disabled) {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  max-inline-size: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}


/* ========================================================================== 
   09. NATIVE DISCLOSURE & INTERACTIVE TEXT ELEMENTS
   ========================================================================== */

summary {
  display: list-item;
  cursor: pointer;
}

details > summary:first-of-type {
  list-style-position: inside;
}

abbr[title] {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  cursor: help;
}


/* ========================================================================== 
   10. CODE & PREFORMATTED CONTENT FOUNDATION
   ========================================================================== */

pre,
code,
kbd,
samp {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
}

pre {
  max-inline-size: 100%;
  margin: 0;
  overflow: auto;
  white-space: pre;
  tab-size: 2;
}

code,
kbd,
samp {
  font-size: 0.9em;
}


/* ========================================================================== 
   11. BROWSER / ATTRIBUTE NORMALISATION
   ========================================================================== */

[hidden] {
  display: none !important;
}

template {
  display: none;
}

address {
  font-style: normal;
}

audio:not([controls]) {
  display: none;
  block-size: 0;
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-disabled="true"] {
  cursor: not-allowed;
}


/* ========================================================================== 
   12. BASE RESPONSIBILITY BOUNDARIES
   ========================================================================== */

/**
 * This file intentionally owns only browser/document foundations.
 *
 * agh-components.css owns:
 * - buttons,
 * - Hero shells and the image-led Hero stage,
 * - cards and card motion,
 * - pastel component surfaces,
 * - visual/image-stage components,
 * - reusable content UI.
 *
 * agh-responsive.css owns:
 * - semantic typography remapping,
 * - responsive gutters and section spacing,
 * - desktop/tablet/mobile recomposition.
 *
 * agh-accessibility.css owns:
 * - focus-visible reinforcement,
 * - skip links,
 * - reduced-motion overrides,
 * - accessibility-safe interaction behaviour.
 *
 * AGH Public Website — Global Runtime & Shell owns actual Manrope delivery.
 * Declaring Manrope here or in agh-tokens.css does not itself load the font.
 */


/* ========================================================================== 
   13. PRINT-SAFE BASELINE
   ========================================================================== */

@media print {
  html,
  body {
    color: #000000;
    background: #ffffff;
  }

  img,
  svg,
  video,
  canvas {
    max-inline-size: 100%;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }
}

/**
 * AGH Teams
 * File: agh-layout.css
 * Purpose: Production global page containers, section rhythm, grid architecture,
 *          structural composition, wide image-stage primitives, overflow safety,
 *          and reusable layout utilities for the refreshed AGH public website.
 * Depends on: agh-tokens.css, agh-base.css
 * Used by: All AGH public website pages, reusable sections, and components.
 * Version: 2.0
 */

/* ========================================================================== 
   01. ROOT LAYOUT SAFETY
   ========================================================================== */

/**
 * A stable root scrollbar gutter prevents viewport-wide compositions from
 * creating horizontal movement when classic scrollbars are present.
 */
@supports (scrollbar-gutter: stable) {
  html {
    scrollbar-gutter: stable;
  }
}

.agh-site,
.agh-main {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.agh-site {
  inline-size: 100%;
}

.agh-main {
  inline-size: 100%;
  overflow-wrap: break-word;
}


/* ========================================================================== 
   02. CONTAINER SYSTEM
   ========================================================================== */

/**
 * Containers include their page gutters inside the total rendered width.
 * This keeps the approved content measure stable at every breakpoint while
 * allowing the responsive system to remap --agh-gutter-page globally.
 */
.agh-container,
.agh-container-wide,
.agh-container-text,
.agh-container-reading {
  --agh-layout-container-max: var(--agh-container-primary);

  inline-size: 100%;
  max-inline-size: calc(
    var(--agh-layout-container-max) + (var(--agh-gutter-page) * 2)
  );
  margin-inline: auto;
  padding-inline: var(--agh-gutter-page);
}

.agh-container-wide {
  --agh-layout-container-max: var(--agh-container-wide);
}

.agh-container-text {
  --agh-layout-container-max: var(--agh-container-text-max);
}

.agh-container-reading {
  --agh-layout-container-max: var(--agh-container-reading-max);
}

/**
 * Use only for intentionally viewport-led compositions whose own children
 * still provide safe gutters. This does not replace the normal containers.
 */
.agh-container-fluid {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: auto;
  padding-inline: var(--agh-gutter-page);
}


/* ========================================================================== 
   03. FULL-BLEED & VIEWPORT REGIONS
   ========================================================================== */

/**
 * Safe baseline remains contained. Browsers with stable root scrollbar-gutter
 * support receive true viewport expansion without forcing a 100vw width.
 */
.agh-full-bleed {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: 0;
}

@supports (scrollbar-gutter: stable) {
  .agh-full-bleed {
    inline-size: auto;
    max-inline-size: none;
    margin-inline: calc(50% - 50vw);
  }
}

.agh-full-bleed > * {
  min-inline-size: 0;
}


/* ========================================================================== 
   04. SECTION SYSTEM
   ========================================================================== */

.agh-section {
  position: relative;
  min-inline-size: 0;
  padding-block: var(--agh-section-space-standard);
}

.agh-section--compact {
  padding-block: var(--agh-section-space-compact-desktop);
}

/**
 * The refreshed Hero begins closer to the Header so the approved image-led
 * stage enters the viewport immediately instead of leaving a large white gap.
 */
.agh-section--hero {
  padding-block-start: var(--agh-section-space-hero-top-max);
  padding-block-end: var(--agh-section-space-hero-bottom);
}

.agh-section--visual {
  padding-block: var(--agh-section-space-compact-desktop);
}

.agh-section--editorial,
.agh-section--legal {
  padding-block: var(--agh-section-space-editorial-desktop);
}

.agh-section--flush {
  padding-block: 0;
}

.agh-section--flush-start {
  padding-block-start: 0;
}

.agh-section--flush-end {
  padding-block-end: 0;
}


/* ========================================================================== 
   05. CORE GRID SYSTEM
   ========================================================================== */

/**
 * The default AGH grid remains the locked 12-column desktop system.
 * agh-responsive.css owns tablet/mobile column remapping and recomposition.
 */
.agh-grid {
  --agh-layout-grid-columns: var(--agh-grid-columns-desktop);
  --agh-layout-grid-gap-x: var(--agh-space-32);
  --agh-layout-grid-gap-y: var(--agh-space-32);

  display: grid;
  grid-template-columns: repeat(
    var(--agh-layout-grid-columns),
    minmax(0, 1fr)
  );
  column-gap: var(--agh-layout-grid-gap-x);
  row-gap: var(--agh-layout-grid-gap-y);
  min-inline-size: 0;
}

.agh-grid > * {
  min-inline-size: 0;
}


/* ========================================================================== 
   06. SEMANTIC GRID PATTERNS
   ========================================================================== */

.agh-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agh-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agh-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/**
 * Legacy split-Hero compatibility. The visual side now receives a stronger
 * share of the desktop width while page rebuilds migrate to the image-led
 * stage system in agh-components.css.
 */
.agh-grid--hero {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
}

.agh-grid--hero-equal,
.agh-grid--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/**
 * Reusable editorial/media compositions for image-led sections.
 */
.agh-grid--visual-led {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
}

.agh-grid--visual-dominant {
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  align-items: center;
}

.agh-grid--content-led {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}

.agh-grid--align-start {
  align-items: start;
}

.agh-grid--align-center {
  align-items: center;
}

.agh-grid--align-end {
  align-items: end;
}

.agh-grid--stretch {
  align-items: stretch;
}


/* ========================================================================== 
   07. 12-COLUMN SPAN UTILITIES
   ========================================================================== */

.agh-col-span-1 {
  grid-column: span 1;
}

.agh-col-span-2 {
  grid-column: span 2;
}

.agh-col-span-3 {
  grid-column: span 3;
}

.agh-col-span-4 {
  grid-column: span 4;
}

.agh-col-span-5 {
  grid-column: span 5;
}

.agh-col-span-6 {
  grid-column: span 6;
}

.agh-col-span-7 {
  grid-column: span 7;
}

.agh-col-span-8 {
  grid-column: span 8;
}

.agh-col-span-9 {
  grid-column: span 9;
}

.agh-col-span-10 {
  grid-column: span 10;
}

.agh-col-span-11 {
  grid-column: span 11;
}

.agh-col-span-12,
.agh-col-span-full {
  grid-column: 1 / -1;
}


/* ========================================================================== 
   08. STACK PRIMITIVE
   ========================================================================== */

.agh-stack {
  --agh-layout-stack-gap: var(--agh-space-24);

  display: flex;
  flex-direction: column;
  gap: var(--agh-layout-stack-gap);
  min-inline-size: 0;
}

.agh-stack--8 {
  --agh-layout-stack-gap: var(--agh-space-8);
}

.agh-stack--12 {
  --agh-layout-stack-gap: var(--agh-space-12);
}

.agh-stack--16 {
  --agh-layout-stack-gap: var(--agh-space-16);
}

.agh-stack--24 {
  --agh-layout-stack-gap: var(--agh-space-24);
}

.agh-stack--32 {
  --agh-layout-stack-gap: var(--agh-space-32);
}

.agh-stack--40 {
  --agh-layout-stack-gap: var(--agh-space-40);
}

.agh-stack--48 {
  --agh-layout-stack-gap: var(--agh-space-48);
}

.agh-stack--64 {
  --agh-layout-stack-gap: var(--agh-space-64);
}

.agh-stack--80 {
  --agh-layout-stack-gap: var(--agh-space-80);
}


/* ========================================================================== 
   09. CLUSTER PRIMITIVE
   ========================================================================== */

.agh-cluster {
  --agh-layout-cluster-gap: var(--agh-space-16);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-layout-cluster-gap);
  min-inline-size: 0;
}

.agh-cluster--start {
  justify-content: flex-start;
}

.agh-cluster--center {
  justify-content: center;
}

.agh-cluster--between {
  justify-content: space-between;
}

.agh-cluster--end {
  justify-content: flex-end;
}

.agh-cluster--8 {
  --agh-layout-cluster-gap: var(--agh-space-8);
}

.agh-cluster--12 {
  --agh-layout-cluster-gap: var(--agh-space-12);
}

.agh-cluster--16 {
  --agh-layout-cluster-gap: var(--agh-space-16);
}

.agh-cluster--24 {
  --agh-layout-cluster-gap: var(--agh-space-24);
}

.agh-cluster--32 {
  --agh-layout-cluster-gap: var(--agh-space-32);
}


/* ========================================================================== 
   10. SPLIT / DISTRIBUTION PRIMITIVE
   ========================================================================== */

.agh-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-32);
  min-inline-size: 0;
}

.agh-split > * {
  min-inline-size: 0;
}

.agh-split--start {
  align-items: flex-start;
}

.agh-split--end {
  align-items: flex-end;
}


/* ========================================================================== 
   11. CONTENT WIDTH UTILITIES
   ========================================================================== */

.agh-measure-hero {
  max-inline-size: var(--agh-measure-hero-h1-max);
}

.agh-measure-heading {
  max-inline-size: var(--agh-measure-h2-max);
}

.agh-measure-supporting {
  max-inline-size: var(--agh-measure-supporting-copy-max);
}

.agh-measure-reading {
  max-inline-size: var(--agh-measure-long-form);
}

.agh-measure-full {
  max-inline-size: none;
}


/* ========================================================================== 
   12. ALIGNMENT UTILITIES
   ========================================================================== */

.agh-align-start {
  margin-inline-end: auto;
}

.agh-align-center {
  margin-inline: auto;
}

.agh-align-end {
  margin-inline-start: auto;
}

.agh-text-start {
  text-align: start;
}

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

.agh-text-end {
  text-align: end;
}


/* ========================================================================== 
   13. STRUCTURAL GAP UTILITIES
   ========================================================================== */

.agh-gap-8 {
  gap: var(--agh-space-8);
}

.agh-gap-12 {
  gap: var(--agh-space-12);
}

.agh-gap-16 {
  gap: var(--agh-space-16);
}

.agh-gap-24 {
  gap: var(--agh-space-24);
}

.agh-gap-32 {
  gap: var(--agh-space-32);
}

.agh-gap-40 {
  gap: var(--agh-space-40);
}

.agh-gap-48 {
  gap: var(--agh-space-48);
}

.agh-gap-64 {
  gap: var(--agh-space-64);
}

.agh-gap-80 {
  gap: var(--agh-space-80);
}


/* ========================================================================== 
   14. MIN-WIDTH & OVERFLOW SAFETY
   ========================================================================== */

.agh-min-0,
.agh-grid > *,
.agh-stack > *,
.agh-cluster > *,
.agh-split > *,
.agh-visual-stage > * {
  min-inline-size: 0;
}

.agh-overflow-x {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.agh-overflow-clip {
  overflow: clip;
}

@supports not (overflow: clip) {
  .agh-overflow-clip {
    overflow: hidden;
  }
}


/* ========================================================================== 
   15. MEDIA / VISUAL FOUNDATION
   ========================================================================== */

.agh-visual {
  position: relative;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.agh-visual > :where(img, picture, video, canvas, iframe),
.agh-visual > picture > img {
  inline-size: 100%;
}

.agh-visual > picture {
  display: block;
}

.agh-visual--hero {
  aspect-ratio: var(--agh-ratio-hero);
}

.agh-visual--feature {
  aspect-ratio: var(--agh-ratio-feature);
}

.agh-visual--vertical {
  aspect-ratio: var(--agh-ratio-feature-vertical);
}

.agh-visual--square {
  aspect-ratio: var(--agh-ratio-card);
}

.agh-visual--process {
  aspect-ratio: var(--agh-ratio-process);
}

.agh-visual--process-wide {
  aspect-ratio: var(--agh-ratio-process-wide);
}

/**
 * New adaptive image-led presentation ratios. These wrappers define geometry;
 * agh-components.css owns visual framing, borders, surfaces and overlays.
 */
.agh-visual--stage-wide {
  aspect-ratio: var(--agh-ratio-visual-stage-wide);
}

.agh-visual--editorial-stage {
  aspect-ratio: var(--agh-ratio-editorial-stage);
}

.agh-visual--dashboard-showcase {
  aspect-ratio: var(--agh-ratio-dashboard-showcase);
}

.agh-visual--workflow-showcase {
  aspect-ratio: var(--agh-ratio-workflow-showcase);
}

.agh-visual--intrinsic {
  aspect-ratio: auto;
}

/**
 * Photo-led compositions intentionally cover their frame. This preserves the
 * existing visual contract while providing an explicit opt-in utility.
 */
.agh-visual--hero > :where(img, video),
.agh-visual--hero > picture > img,
.agh-visual--feature > :where(img, video),
.agh-visual--feature > picture > img,
.agh-visual--vertical > :where(img, video),
.agh-visual--vertical > picture > img,
.agh-visual--square > :where(img, video),
.agh-visual--square > picture > img,
.agh-visual--process > :where(img, video),
.agh-visual--process > picture > img,
.agh-visual--process-wide > :where(img, video),
.agh-visual--process-wide > picture > img,
.agh-visual--stage-wide > :where(img, video),
.agh-visual--stage-wide > picture > img,
.agh-visual--editorial-stage > :where(img, video),
.agh-visual--editorial-stage > picture > img {
  block-size: 100%;
  object-fit: cover;
}

/**
 * Dashboard, workflow and UI imagery must remain readable. The whole source
 * visual stays visible instead of being destructively cropped.
 */
.agh-visual--dashboard-showcase > :where(img, video),
.agh-visual--dashboard-showcase > picture > img,
.agh-visual--workflow-showcase > :where(img, video),
.agh-visual--workflow-showcase > picture > img,
.agh-visual--contain > :where(img, video),
.agh-visual--contain > picture > img {
  block-size: 100%;
  object-fit: contain;
}

.agh-visual--cover > :where(img, video),
.agh-visual--cover > picture > img {
  block-size: 100%;
  object-fit: cover;
}

.agh-visual--intrinsic > :where(img, video),
.agh-visual--intrinsic > picture > img {
  block-size: auto;
  object-fit: initial;
}


/* ========================================================================== 
   16. WIDE VISUAL-STAGE STRUCTURE
   ========================================================================== */

/**
 * Structural primitive for the refreshed major image sections. It supports a
 * full-size media layer and an optional content layer occupying the same grid
 * area. Components/page CSS may decide whether that content becomes a floating
 * card, labels, KPI chips or an under-image panel.
 */
.agh-visual-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  inline-size: 100%;
  min-inline-size: 0;
  isolation: isolate;
}

.agh-visual-stage__media,
.agh-visual-stage__content {
  grid-column: 1;
  grid-row: 1;
  min-inline-size: 0;
}

.agh-visual-stage__media {
  position: relative;
  z-index: 0;
  inline-size: 100%;
}

.agh-visual-stage__media > :where(img, picture, video),
.agh-visual-stage__media > picture > img {
  inline-size: 100%;
}

.agh-visual-stage__media > picture {
  display: block;
}

.agh-visual-stage__content {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: start;
  max-inline-size: min(100%, var(--agh-hero-stage-content-max));
}

.agh-visual-stage__content--start {
  align-self: start;
}

.agh-visual-stage__content--center {
  align-self: center;
}

.agh-visual-stage__content--end {
  align-self: end;
}

.agh-visual-stage__content--inline-end {
  justify-self: end;
}

.agh-visual-stage__content--inline-center {
  justify-self: center;
}

/**
 * Geometry modes only. Visual treatment belongs to agh-components.css.
 */
.agh-visual-stage--wide {
  aspect-ratio: var(--agh-ratio-visual-stage-wide);
}

.agh-visual-stage--editorial {
  aspect-ratio: var(--agh-ratio-editorial-stage);
}

.agh-visual-stage--dashboard {
  aspect-ratio: var(--agh-ratio-dashboard-showcase);
}

.agh-visual-stage--workflow {
  aspect-ratio: var(--agh-ratio-workflow-showcase);
}

.agh-visual-stage--intrinsic {
  grid-template-rows: auto;
  aspect-ratio: auto;
}

.agh-visual-stage--intrinsic .agh-visual-stage__media,
.agh-visual-stage--intrinsic .agh-visual-stage__content {
  grid-row: auto;
}


/* ========================================================================== 
   17. IMAGE-LED HERO STAGE STRUCTURE
   ========================================================================== */

/**
 * New Hero geometry. The media fills the stage and the content shares the same
 * grid area. agh-components.css owns the overlay, clipping, panel surface and
 * visual styling; agh-responsive.css owns tablet/mobile recomposition.
 */
.agh-hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(var(--agh-hero-stage-min-height-desktop), auto);
  inline-size: 100%;
  min-inline-size: 0;
  isolation: isolate;
}

.agh-hero-stage__media,
.agh-hero-stage__content {
  grid-column: 1;
  grid-row: 1;
  min-inline-size: 0;
}

.agh-hero-stage__media {
  position: relative;
  z-index: 0;
  inline-size: 100%;
  min-block-size: inherit;
}

.agh-hero-stage__media > :where(img, picture, video),
.agh-hero-stage__media > picture > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.agh-hero-stage__media > picture {
  display: block;
  block-size: 100%;
}

.agh-hero-stage__content {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: start;
  inline-size: min(100%, var(--agh-hero-stage-content-max));
  margin: var(--agh-hero-stage-panel-padding-desktop);
}

.agh-hero-stage__content--inline-end {
  justify-self: end;
}

.agh-hero-stage__content--block-end {
  align-self: end;
}

.agh-hero-stage__content--block-start {
  align-self: start;
}


/* ========================================================================== 
   18. LAYOUT HOOKS FOR RESPONSIVE RECOMPOSITION
   ========================================================================== */

/**
 * These hooks intentionally hold only desktop structural state.
 * agh-responsive.css owns locked breakpoint transformations, including:
 *
 * - 3 columns -> 2 -> 1
 * - 4 columns -> 2 -> 1
 * - two-column split -> one-column stack
 * - legacy Hero split -> copy + CTA + visual
 * - new image-led Hero stage -> deliberate mobile composition
 * - wide visual stages -> safe mobile showcase
 */
.agh-recompose-3,
.agh-recompose-4,
.agh-recompose-2,
.agh-recompose-hero,
.agh-recompose-visual,
.agh-hero-stage,
.agh-visual-stage {
  min-inline-size: 0;
}

/**
 * AGH Teams
 * File: agh-components.css
 * Purpose: Production reusable visual components for the refreshed AGH Teams
 *          public website, including buttons, breadcrumbs, image-led Hero
 *          stages, section headers, premium cards, wide visual showcases,
 *          feature panels, FAQ accordions, article cards, legal shells, and
 *          shared content UI primitives.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css
 * Used by: All AGH public website pages and page/template compositions.
 * Version: 2.0
 */

/* ========================================================================== 
   01. SHARED COMPONENT TEXT
   ========================================================================== */

.agh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--agh-space-8);
  margin: 0;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-eyebrow::before {
  content: "";
  inline-size: var(--agh-space-24);
  block-size: var(--agh-connector-width-max);
  flex: 0 0 auto;
  background: var(--agh-color-brand-primary);
  border-radius: var(--agh-radius-pill);
}

.agh-eyebrow--light {
  color: rgba(255, 255, 255, 0.86);
}

.agh-eyebrow--light::before {
  background: var(--agh-color-brand-primary);
}

.agh-supporting-copy {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-large-size);
  font-weight: var(--agh-type-body-large-weight);
  line-height: var(--agh-type-body-large-line-height);
  text-wrap: pretty;
}

.agh-meta {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}


/* ========================================================================== 
   02. BUTTON SYSTEM
   ========================================================================== */

.agh-button {
  --agh-button-background: transparent;
  --agh-button-border: 1px solid transparent;
  --agh-button-color: var(--agh-color-text-primary);

  display: inline-flex;
  min-block-size: var(--agh-control-button-height);
  min-inline-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: center;
  gap: var(--agh-space-8);
  padding-block: var(--agh-space-12);
  padding-inline: var(--agh-space-24);
  border: var(--agh-button-border);
  border-radius: var(--agh-radius-button);
  color: var(--agh-button-color);
  background: var(--agh-button-background);
  box-shadow: none;
  font-size: var(--agh-type-button-size);
  font-weight: var(--agh-type-button-weight);
  line-height: var(--agh-type-button-line-height);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--agh-duration-button) var(--agh-easing-default),
    border-color var(--agh-duration-button) var(--agh-easing-default),
    color var(--agh-duration-button) var(--agh-easing-default),
    transform var(--agh-duration-button) var(--agh-easing-default),
    box-shadow var(--agh-duration-button) var(--agh-easing-default);
}

.agh-button:hover {
  text-decoration: none;
}

.agh-button:active:not(:disabled, [aria-disabled="true"]) {
  transform: translateY(1px);
}

.agh-button--primary {
  --agh-button-background: var(--agh-color-brand-primary);
  --agh-button-color: var(--agh-color-text-primary);
}

.agh-button--primary:hover:not(:disabled, [aria-disabled="true"]) {
  --agh-button-background: var(--agh-color-brand-primary-hover);
  box-shadow: var(--agh-shadow-ui);
}

.agh-button--secondary {
  --agh-button-background: var(--agh-color-white);
  --agh-button-border: var(--agh-border-strong);
  --agh-button-color: var(--agh-color-text-primary);
}

.agh-button--secondary:hover:not(:disabled, [aria-disabled="true"]) {
  --agh-button-background: var(--agh-color-brand-primary-soft);
  --agh-button-border: var(--agh-border-brand-soft);
}

.agh-button--tertiary {
  min-block-size: var(--agh-control-touch-min);
  min-inline-size: 0;
  justify-content: flex-start;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.agh-button--tertiary:hover:not(:disabled, [aria-disabled="true"]) {
  text-decoration-thickness: 2px;
}

.agh-button__icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
  flex: 0 0 auto;
  color: currentColor;
  transition: transform var(--agh-duration-micro-min) var(--agh-easing-default);
}

.agh-button--tertiary .agh-button__icon {
  color: var(--agh-color-brand-primary);
}

@media (hover: hover) and (pointer: fine) {
  .agh-button--tertiary:hover:not(:disabled, [aria-disabled="true"]) .agh-button__icon {
    transform: translateX(var(--agh-space-4));
  }
}

.agh-button:is(:disabled, [aria-disabled="true"]) {
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-soft-neutral);
  border-color: var(--agh-color-border);
  box-shadow: none;
  opacity: 0.72;
  pointer-events: none;
}

.agh-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-12);
}


/* ========================================================================== 
   03. ICON COMPONENTS
   ========================================================================== */

.agh-icon {
  inline-size: var(--agh-icon-size-default);
  block-size: var(--agh-icon-size-default);
  flex: 0 0 auto;
  color: currentColor;
}

.agh-icon :where(path, circle, rect, line, polyline, polygon, ellipse) {
  vector-effect: non-scaling-stroke;
}

.agh-icon-box {
  --agh-icon-box-size: var(--agh-icon-container-card);
  --agh-icon-box-radius: var(--agh-radius-icon-container-card);
  --agh-icon-box-background: var(--agh-color-pastel-peach);
  --agh-icon-box-color: var(--agh-color-brand-primary);

  display: inline-flex;
  inline-size: var(--agh-icon-box-size);
  block-size: var(--agh-icon-box-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-icon-box-radius);
  color: var(--agh-icon-box-color);
  background: var(--agh-icon-box-background);
  transition:
    color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default),
    transform var(--agh-duration-card) var(--agh-easing-default);
}

.agh-icon-box--small {
  --agh-icon-box-size: var(--agh-icon-container-small);
  --agh-icon-box-radius: var(--agh-radius-icon-container-small);
}

.agh-icon-box--feature {
  --agh-icon-box-size: var(--agh-icon-container-feature);
  --agh-icon-box-radius: var(--agh-radius-icon-container-feature);
}

.agh-icon-box--large {
  --agh-icon-box-size: var(--agh-icon-container-large);
  --agh-icon-box-radius: var(--agh-radius-icon-container-large);
}

.agh-icon-box--ice {
  --agh-icon-box-background: var(--agh-color-pastel-ice-blue);
  --agh-icon-box-color: var(--agh-color-functional-blue);
}

.agh-icon-box--lavender {
  --agh-icon-box-background: var(--agh-color-pastel-lavender);
  --agh-icon-box-color: var(--agh-color-functional-lavender);
}

.agh-icon-box--sage {
  --agh-icon-box-background: var(--agh-color-pastel-sage);
  --agh-icon-box-color: var(--agh-color-functional-green);
}

.agh-icon-box > .agh-icon {
  inline-size: var(--agh-icon-size-default);
  block-size: var(--agh-icon-size-default);
}

.agh-icon-box--feature > .agh-icon,
.agh-icon-box--large > .agh-icon {
  inline-size: var(--agh-icon-size-feature-min);
  block-size: var(--agh-icon-size-feature-min);
}


/* ========================================================================== 
   04. BREADCRUMB
   ========================================================================== */

.agh-breadcrumb {
  margin-block-end: var(--agh-space-32);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}

.agh-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--agh-space-8);
  min-inline-size: 0;
}

.agh-breadcrumb__item:not(:last-child)::after {
  content: "›";
  color: var(--agh-color-text-secondary);
  font-size: 1.1em;
  line-height: 1;
}

.agh-breadcrumb__link {
  color: var(--agh-color-text-secondary);
  text-decoration: none;
}

.agh-breadcrumb__link:hover {
  color: var(--agh-color-text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
}

.agh-breadcrumb__current {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-type-meta-weight-max);
}


/* ========================================================================== 
   05. HERO COMPONENT — LEGACY SPLIT + NEW IMAGE-LED STAGE
   ========================================================================== */

.agh-hero {
  position: relative;
  min-inline-size: 0;
}

/**
 * Legacy split-Hero contract remains available while Page Snippets are rebuilt
 * one by one. The image receives more visual weight than in Version 1.0.
 */
.agh-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: var(--agh-space-48);
  min-inline-size: 0;
}

.agh-hero--equal .agh-hero__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agh-hero__content,
.agh-hero__visual {
  min-inline-size: 0;
}

.agh-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-24);
}

.agh-hero__title {
  max-inline-size: var(--agh-measure-hero-h1-max);
  text-wrap: balance;
}

.agh-hero__title--display {
  font-size: var(--agh-type-display-size);
  font-weight: var(--agh-type-display-weight);
  line-height: var(--agh-type-display-line-height);
  letter-spacing: var(--agh-type-display-letter-spacing);
}

.agh-hero__copy {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-large-size);
  line-height: var(--agh-type-body-large-line-height);
  text-wrap: pretty;
}

.agh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-12);
}

.agh-hero__visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--agh-radius-image);
  background: var(--agh-color-surface-visual-stage);
}

.agh-hero__visual > :where(img, picture, video) {
  inline-size: 100%;
  border-radius: inherit;
}

.agh-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--agh-space-16) var(--agh-space-24);
  padding: 0;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  list-style: none;
}

.agh-hero__signal {
  display: inline-flex;
  align-items: center;
  gap: var(--agh-space-8);
}

.agh-hero__signal::before {
  content: "";
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  flex: 0 0 auto;
  border: var(--agh-border-width-default) solid var(--agh-color-brand-primary);
  border-radius: 50%;
}

/**
 * Preferred refreshed Hero. The approved image becomes the full visual stage;
 * content sits inside one compact panel rather than occupying a detached white
 * half of the viewport.
 */
.agh-hero--image-led {
  overflow: visible;
}

.agh-hero__stage {
  position: relative;
  min-block-size: var(--agh-hero-stage-min-height-desktop);
  overflow: hidden;
  border-radius: var(--agh-radius-hero-stage);
  background: var(--agh-color-surface-visual-stage);
  isolation: isolate;
}

.agh-hero__stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--agh-hero-stage-overlay-start) 0%,
    var(--agh-hero-stage-overlay-mid) 38%,
    var(--agh-hero-stage-overlay-end) 72%
  );
}

.agh-hero__stage--content-right::after {
  background: linear-gradient(
    270deg,
    var(--agh-hero-stage-overlay-start) 0%,
    var(--agh-hero-stage-overlay-mid) 38%,
    var(--agh-hero-stage-overlay-end) 72%
  );
}

.agh-hero__stage--system::after,
.agh-hero__stage--no-scrim::after {
  display: none;
}

.agh-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  min-inline-size: 0;
}

.agh-hero__media > :where(img, picture, video) {
  inline-size: 100%;
  block-size: 100%;
}

.agh-hero__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.agh-hero__stage--system .agh-hero__media {
  display: grid;
  place-items: center;
  padding: var(--agh-visual-stage-padding-desktop);
  background: var(--agh-color-surface-system-stage);
}

.agh-hero__stage--system .agh-hero__image {
  object-fit: contain;
}

.agh-hero__panel {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--agh-space-32);
  inset-inline-start: var(--agh-space-32);
  display: flex;
  inline-size: min(
    var(--agh-hero-stage-content-max),
    calc(100% - (var(--agh-space-32) * 2))
  );
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-24);
  padding: var(--agh-hero-stage-panel-padding-desktop);
  border: var(--agh-border-panel-light);
  border-radius: var(--agh-radius-floating-panel);
  color: var(--agh-color-text-primary);
  background: var(--agh-color-surface-hero-panel);
  box-shadow: var(--agh-shadow-floating-panel);
}

.agh-hero__panel--right {
  inset-inline-start: auto;
  inset-inline-end: var(--agh-space-32);
}

.agh-hero__panel--top {
  inset-block-start: var(--agh-space-32);
  inset-block-end: auto;
}

.agh-hero__panel .agh-hero__title,
.agh-hero__panel .agh-hero__copy {
  max-inline-size: 100%;
}

.agh-hero__panel .agh-hero__copy {
  color: var(--agh-color-text-secondary);
}

.agh-hero__stage--system .agh-hero__panel {
  border-color: var(--agh-color-border);
}


/* ========================================================================== 
   06. SECTION HEADER
   ========================================================================== */

.agh-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-16);
  max-inline-size: var(--agh-measure-h2-max);
  margin-block-end: var(--agh-space-48);
}

.agh-section-header--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.agh-section-header--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  max-inline-size: none;
  align-items: end;
  gap: var(--agh-space-32);
}

.agh-section-header__title {
  max-inline-size: var(--agh-measure-h2-max);
  text-wrap: balance;
}

.agh-section-header__copy {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}


/* ========================================================================== 
   07. SPLIT CONTENT COMPONENT
   ========================================================================== */

.agh-split-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--agh-space-64);
  min-inline-size: 0;
}

.agh-split-content--visual-led {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.agh-split-content--top {
  align-items: start;
}

.agh-split-content--reverse .agh-split-content__visual {
  order: -1;
}

.agh-split-content__body,
.agh-split-content__visual {
  min-inline-size: 0;
}

.agh-split-content__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-24);
}

.agh-split-content__visual > :where(img, picture, video) {
  inline-size: 100%;
  border-radius: var(--agh-radius-image);
}

.agh-split-content__visual--system {
  padding: var(--agh-visual-stage-padding-desktop);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-visual-stage);
  background: var(--agh-color-surface-system-stage);
  box-shadow: var(--agh-shadow-ui);
}

.agh-split-content__visual--system > :where(img, picture, video) {
  object-fit: contain;
}


/* ========================================================================== 
   08. GENERIC PREMIUM CARD SYSTEM
   ========================================================================== */

.agh-card {
  --agh-card-background: var(--agh-color-surface);
  --agh-card-border-color: var(--agh-color-border);

  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
  padding: var(--agh-card-padding-max);
  border: var(--agh-border-width-default) solid var(--agh-card-border-color);
  border-radius: var(--agh-radius-card);
  color: var(--agh-color-text-primary);
  background: var(--agh-card-background);
  box-shadow: var(--agh-shadow-ui);
  transform: translateZ(0);
  transition:
    transform var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default),
    color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-card--warm {
  --agh-card-background: var(--agh-color-warm-white);
}

.agh-card--peach {
  --agh-card-background: var(--agh-color-pastel-peach);
}

.agh-card--ice {
  --agh-card-background: var(--agh-color-pastel-ice-blue);
}

.agh-card--lavender {
  --agh-card-background: var(--agh-color-pastel-lavender);
}

.agh-card--sage {
  --agh-card-background: var(--agh-color-pastel-sage);
}

.agh-card--flat {
  box-shadow: none;
}

.agh-card--static {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .agh-card:not(.agh-card--static):hover {
    --agh-card-background: var(--agh-card-hover-background);
    --agh-card-border-color: var(--agh-card-hover-border-color);

    transform:
      translateY(calc(var(--agh-card-hover-translate-max) * -1))
      scale(var(--agh-card-hover-scale));
    box-shadow: var(--agh-shadow-card-hover);
  }

  .agh-card--flat:not(.agh-card--static):hover {
    box-shadow: var(--agh-shadow-card);
  }

  .agh-card--hover-orange:not(.agh-card--static):hover {
    --agh-card-background: var(--agh-card-hover-orange-background);
    --agh-card-border-color: var(--agh-color-brand-primary-hover);
  }

  .agh-card--hover-orange:hover :where(
    .agh-card__copy,
    .agh-card__meta,
    .agh-card__capability
  ) {
    color: var(--agh-color-text-primary);
  }

  .agh-card--hover-orange:hover .agh-icon-box {
    --agh-icon-box-background: rgba(255, 255, 255, 0.72);
    --agh-icon-box-color: var(--agh-color-text-primary);
  }
}

.agh-card__title {
  margin: 0;
}

.agh-card__copy {
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
  transition: color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-card__meta,
.agh-card__capability {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  transition: color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-card__action {
  margin-block-start: auto;
  padding-block-start: var(--agh-space-8);
}


/* ========================================================================== 
   09. SERVICE CARD
   ========================================================================== */

.agh-service-card {
  min-block-size: 100%;
}

.agh-service-card__icon {
  margin-block-end: var(--agh-space-8);
}

.agh-service-card__title {
  font-size: var(--agh-type-h4-size);
  font-weight: var(--agh-type-h4-weight);
  line-height: var(--agh-type-h4-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
}

.agh-service-card__link {
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  gap: var(--agh-space-8);
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-underline-offset: 0.28em;
}

.agh-service-card__link:hover {
  text-decoration-thickness: 2px;
}

.agh-service-card__link .agh-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
  color: var(--agh-color-brand-primary);
}

@media (hover: hover) and (pointer: fine) {
  .agh-service-card:hover .agh-service-card__link .agh-icon {
    transform: translateX(var(--agh-space-4));
  }
}


/* ========================================================================== 
   10. VALUE & DELIVERABLE CARDS
   ========================================================================== */

.agh-value-card,
.agh-deliverable-card {
  min-block-size: 100%;
}

.agh-value-card__title,
.agh-deliverable-card__title {
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

.agh-deliverable-card {
  border-block-start-color: var(--agh-color-brand-primary);
}

.agh-deliverable-card__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}


/* ========================================================================== 
   11. CAPABILITY GRID
   ========================================================================== */

.agh-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--agh-space-24);
  min-inline-size: 0;
}

.agh-capability-grid > * {
  min-inline-size: 0;
}

.agh-capability-item {
  display: flex;
  min-block-size: 100%;
  align-items: flex-start;
  gap: var(--agh-space-16);
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-surface);
  transition:
    background-color var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default);
}

@media (hover: hover) and (pointer: fine) {
  .agh-capability-item:hover {
    border-color: var(--agh-card-hover-border-color);
    background: var(--agh-card-hover-background);
    box-shadow: var(--agh-shadow-ui);
  }
}

.agh-capability-item__content {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
}

.agh-capability-item__title {
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

.agh-capability-item__copy {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  text-wrap: pretty;
}


/* ========================================================================== 
   12. FEATURE PANEL
   ========================================================================== */

.agh-feature-panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--agh-space-48);
  min-inline-size: 0;
  padding: var(--agh-space-48);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-background-alt);
  box-shadow: var(--agh-shadow-ui);
}

.agh-feature-panel--visual-led {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.agh-feature-panel--white {
  background: var(--agh-color-white);
}

.agh-feature-panel--muted {
  background: var(--agh-color-soft-neutral);
}

.agh-feature-panel--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-feature-panel--ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-feature-panel--lavender {
  background: var(--agh-color-pastel-lavender);
}

.agh-feature-panel--sage {
  background: var(--agh-color-pastel-sage);
}

.agh-feature-panel__content,
.agh-feature-panel__visual {
  min-inline-size: 0;
}

.agh-feature-panel__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-24);
}

.agh-feature-panel__visual {
  overflow: hidden;
  border-radius: var(--agh-radius-image);
}

.agh-feature-panel__visual > :where(img, picture, video) {
  inline-size: 100%;
  border-radius: inherit;
}

.agh-feature-panel__visual--system {
  padding: var(--agh-visual-stage-padding-desktop);
  border: var(--agh-border-default);
  background: var(--agh-color-surface-system-stage);
  box-shadow: var(--agh-shadow-ui);
}

.agh-feature-panel__visual--system > :where(img, picture, video) {
  object-fit: contain;
}


/* ========================================================================== 
   13. WIDE VISUAL STAGE SYSTEM
   ========================================================================== */

/**
 * The visual-stage system is the preferred presentation for major approved
 * page imagery. It intentionally prevents important photography, dashboards,
 * workflow graphics, timelines and UI screenshots from being reduced to small
 * supporting thumbnails.
 */
.agh-visual-stage {
  --agh-visual-stage-background: var(--agh-color-surface-visual-stage);

  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-visual-stage);
  background: var(--agh-visual-stage-background);
  box-shadow: var(--agh-shadow-ui);
  isolation: isolate;
}

.agh-visual-stage--borderless {
  border-color: transparent;
}

.agh-visual-stage--peach {
  --agh-visual-stage-background: var(--agh-color-pastel-peach);
}

.agh-visual-stage--ice {
  --agh-visual-stage-background: var(--agh-color-pastel-ice-blue);
}

.agh-visual-stage--lavender {
  --agh-visual-stage-background: var(--agh-color-pastel-lavender);
}

.agh-visual-stage--sage {
  --agh-visual-stage-background: var(--agh-color-pastel-sage);
}

.agh-visual-stage__media {
  position: relative;
  min-inline-size: 0;
}

.agh-visual-stage__media > :where(img, picture, video) {
  inline-size: 100%;
}

.agh-visual-stage__image {
  inline-size: 100%;
  block-size: 100%;
}

.agh-visual-stage--photo .agh-visual-stage__media {
  aspect-ratio: var(--agh-ratio-editorial-stage);
}

.agh-visual-stage--photo .agh-visual-stage__image {
  object-fit: cover;
}

.agh-visual-stage--editorial .agh-visual-stage__media {
  aspect-ratio: var(--agh-ratio-editorial-stage);
}

.agh-visual-stage--editorial .agh-visual-stage__image {
  object-fit: cover;
}

.agh-visual-stage--dashboard,
.agh-visual-stage--workflow,
.agh-visual-stage--ui {
  padding: var(--agh-visual-stage-padding-desktop);
  background: var(--agh-color-surface-system-stage);
}

.agh-visual-stage--dashboard .agh-visual-stage__media {
  aspect-ratio: var(--agh-ratio-dashboard-showcase);
}

.agh-visual-stage--workflow .agh-visual-stage__media {
  aspect-ratio: var(--agh-ratio-workflow-showcase);
}

.agh-visual-stage--ui .agh-visual-stage__media {
  min-block-size: 0;
}

.agh-visual-stage--dashboard .agh-visual-stage__image,
.agh-visual-stage--workflow .agh-visual-stage__image,
.agh-visual-stage--ui .agh-visual-stage__image {
  object-fit: contain;
}

.agh-visual-stage__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-16);
  padding: var(--agh-space-24) var(--agh-space-32) var(--agh-space-32);
}

.agh-visual-stage__title {
  max-inline-size: var(--agh-measure-h2-max);
}

.agh-visual-stage__copy {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}

.agh-visual-stage__overlay-panel {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--agh-space-24);
  inset-inline-start: var(--agh-space-24);
  inline-size: min(440px, calc(100% - (var(--agh-space-24) * 2)));
  padding: var(--agh-space-24);
  border: var(--agh-border-panel-light);
  border-radius: var(--agh-radius-floating-panel);
  background: var(--agh-color-surface-hero-panel);
  box-shadow: var(--agh-shadow-floating-panel);
}

.agh-visual-stage__overlay-panel--right {
  inset-inline-start: auto;
  inset-inline-end: var(--agh-space-24);
}

.agh-visual-stage__overlay-panel > * + * {
  margin-block-start: var(--agh-space-12);
}


/* ========================================================================== 
   14. FLOATING INFORMATION PANEL
   ========================================================================== */

.agh-floating-panel {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  border: var(--agh-border-panel-light);
  border-radius: var(--agh-radius-floating-panel);
  color: var(--agh-color-text-primary);
  background: var(--agh-color-surface-hero-panel);
  box-shadow: var(--agh-shadow-floating-panel);
}

.agh-floating-panel--compact {
  padding: var(--agh-space-16) var(--agh-space-24);
}

.agh-floating-panel__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-floating-panel__value {
  font-size: var(--agh-type-h4-size);
  font-weight: var(--agh-type-h4-weight);
  line-height: var(--agh-type-h4-line-height);
}


/* ========================================================================== 
   15. PLATFORM FEATURE SHELL
   ========================================================================== */

/**
 * Platform treatment remains visually distinct from normal Service Cards.
 * Dashboard internals remain owned by agh-dashboard.css.
 */
.agh-platform-feature {
  position: relative;
  min-inline-size: 0;
  padding: var(--agh-space-48);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-background-alt);
  box-shadow: var(--agh-shadow-feature);
}

.agh-platform-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--agh-space-48);
}

.agh-platform-feature__content,
.agh-platform-feature__visual {
  min-inline-size: 0;
}

.agh-platform-feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-24);
}

.agh-platform-feature__visual {
  overflow: hidden;
  padding: var(--agh-visual-stage-padding-desktop);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-image);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-card);
}

.agh-platform-feature__visual > :where(img, picture, video) {
  inline-size: 100%;
  object-fit: contain;
}


/* ========================================================================== 
   16. FAQ ACCORDION
   ========================================================================== */

.agh-faq {
  inline-size: 100%;
  max-inline-size: 960px;
  margin-inline: auto;
}

.agh-faq__item {
  border-block-end: var(--agh-border-default);
}

.agh-faq__question {
  display: flex;
  inline-size: 100%;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-24);
  padding-block: var(--agh-space-24);
  padding-inline: 0;
  border: 0;
  color: var(--agh-color-text-primary);
  background: transparent;
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-h5-line-height);
  text-align: start;
}

.agh-faq__question:hover {
  color: var(--agh-color-text-primary);
}

.agh-faq__indicator {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-control-small);
  color: var(--agh-color-text-primary);
  background: var(--agh-color-soft-neutral);
  transition:
    color var(--agh-duration-accordion-min) var(--agh-easing-default),
    background-color var(--agh-duration-accordion-min) var(--agh-easing-default),
    transform var(--agh-duration-accordion-min) var(--agh-easing-default);
}

@media (hover: hover) and (pointer: fine) {
  .agh-faq__question:hover .agh-faq__indicator {
    background: var(--agh-color-brand-primary-soft-strong);
  }
}

.agh-faq__question[aria-expanded="true"] .agh-faq__indicator {
  color: var(--agh-color-text-primary);
  background: var(--agh-color-pastel-peach);
}

.agh-faq__answer {
  padding-block-end: var(--agh-space-24);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-size);
  line-height: var(--agh-type-body-line-height);
}

.agh-faq__answer > * + * {
  margin-block-start: var(--agh-space-16);
}

.agh-faq__panel[hidden] {
  display: none;
}


/* ========================================================================== 
   17. ARTICLE CARD
   ========================================================================== */

.agh-article-card {
  display: flex;
  min-block-size: 100%;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
}

.agh-article-card--surface {
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-white);
}

.agh-article-card__media {
  display: block;
  aspect-ratio: var(--agh-ratio-hero-alternative-wide);
  overflow: hidden;
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-soft-neutral);
}

.agh-article-card__media > :where(img, picture) {
  inline-size: 100%;
  block-size: 100%;
}

.agh-article-card__media img {
  object-fit: cover;
  transition: transform var(--agh-duration-card) var(--agh-easing-default);
}

@media (hover: hover) and (pointer: fine) {
  .agh-article-card:hover .agh-article-card__media img {
    transform: scale(1.025);
  }
}

.agh-article-card__category {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-article-card__title {
  font-size: var(--agh-type-h4-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-h4-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
}

.agh-article-card__title a {
  color: inherit;
  text-decoration: none;
}

.agh-article-card__title a:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
}

.agh-article-card__excerpt {
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}

.agh-article-card__link {
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  gap: var(--agh-space-8);
  margin-block-start: auto;
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-underline-offset: 0.28em;
}


/* ========================================================================== 
   18. LEGAL COMPONENT SHELL + QUIET LEGAL HERO
   ========================================================================== */

/**
 * Long-form legal typography remains owned by agh-editorial.css. These
 * components provide only the quiet, non-promotional surfaces shared by the
 * Privacy Policy, Terms & Conditions, and Cookie Policy pages.
 */
.agh-legal-shell {
  inline-size: 100%;
  max-inline-size: var(--agh-container-reading-max);
  margin-inline: auto;
}

.agh-legal-hero {
  position: relative;
  padding: var(--agh-space-48);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-warm-white);
}

.agh-legal-hero--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-legal-hero--ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-legal-hero__inner {
  display: flex;
  max-inline-size: var(--agh-container-reading-max);
  flex-direction: column;
  gap: var(--agh-space-16);
}

.agh-legal-hero__title {
  max-inline-size: var(--agh-measure-hero-h1-max);
}

.agh-legal-hero__intro {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-large-size);
  line-height: var(--agh-type-body-large-line-height);
}

.agh-legal-hero__meta {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  line-height: var(--agh-type-meta-line-height);
}

.agh-legal-contact {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-8);
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-background-alt);
}

.agh-legal-contact__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-small-line-height);
}


/* ========================================================================== 
   19. SECTION SURFACE VARIANTS
   ========================================================================== */

.agh-surface-white {
  background: var(--agh-color-white);
}

.agh-surface-warm {
  background: var(--agh-color-warm-white);
}

.agh-surface-neutral {
  background: var(--agh-color-soft-neutral);
}

.agh-surface-peach {
  background: var(--agh-color-pastel-peach);
}

.agh-surface-ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-surface-lavender {
  background: var(--agh-color-pastel-lavender);
}

.agh-surface-sage {
  background: var(--agh-color-pastel-sage);
}

.agh-surface-orange-soft {
  background: var(--agh-color-brand-primary-soft);
}


/* ========================================================================== 
   20. MEDIA PRESENTATION COMPONENTS
   ========================================================================== */

.agh-media {
  position: relative;
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  border-radius: var(--agh-radius-image);
  background: var(--agh-color-soft-neutral);
}

.agh-media > :where(img, picture, video) {
  inline-size: 100%;
  border-radius: inherit;
}

.agh-media--cover > :where(img, picture, video) {
  block-size: 100%;
  object-fit: cover;
}

.agh-media--contain {
  padding: var(--agh-visual-stage-padding-desktop);
  background: var(--agh-color-surface-system-stage);
}

.agh-media--contain > :where(img, picture, video) {
  object-fit: contain;
}

.agh-media--system {
  border: var(--agh-border-default);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
}

.agh-media--elevated {
  box-shadow: var(--agh-shadow-card);
}


/* ========================================================================== 
   21. COMPONENT RESPONSIBILITY HOOKS
   ========================================================================== */

/**
 * Responsive recomposition remains centralised in agh-responsive.css.
 * Navigation, process, dashboard, form and long-form editorial extensions are
 * intentionally owned by their dedicated later files in the locked load order.
 */
.agh-hero,
.agh-hero__stage,
.agh-section-header,
.agh-split-content,
.agh-capability-grid,
.agh-feature-panel,
.agh-visual-stage,
.agh-floating-panel,
.agh-platform-feature,
.agh-faq,
.agh-article-card,
.agh-legal-shell,
.agh-legal-hero,
.agh-media {
  min-inline-size: 0;
}

/**
 * AGH Teams
 * File: agh-navigation.css
 * Purpose: Global Header, desktop navigation, Services mega menu, mobile
 *          navigation shell, navigation states, and Footer navigation system.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css, agh-components.css
 * Used by: All AGH public website pages and templates.
 * Version: 2.0
 *
 * Build direction:
 * - Preserve the existing Header / Mega Menu / Mobile Navigation DOM contract
 *   consumed by agh-app.js.
 * - Preserve responsive ownership in agh-responsive.css.
 * - Strengthen the premium white-first / orange-led / pastel-supported system.
 * - Use the larger dedicated Footer-logo tokens introduced by agh-tokens.css.
 * - Prepare Footer social / Platform-access presentation for the Runtime rebuild.
 */

/* ========================================================================== 
   01. SITE HEADER
   ========================================================================== */

.agh-site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1000;
  inline-size: 100%;
  min-inline-size: 0;
  background: rgba(255, 255, 255, 0.97);
  border-block-end: var(--agh-border-header);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.02);
}

@supports (backdrop-filter: blur(12px)) {
  .agh-site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px) saturate(130%);
  }
}

.agh-site-header__inner {
  display: flex;
  min-block-size: var(--agh-header-height-desktop);
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-32);
}

.agh-site-header__brand {
  display: inline-flex;
  min-inline-size: 0;
  flex: 0 0 auto;
  align-items: center;
  color: var(--agh-color-text-primary);
  text-decoration: none;
}

.agh-site-header__brand:hover {
  text-decoration: none;
}

.agh-site-header__logo {
  display: block;
  inline-size: auto;
  block-size: clamp(
    var(--agh-logo-height-desktop-min),
    2.4vw,
    var(--agh-logo-height-desktop-max)
  );
  max-inline-size: 100%;
  object-fit: contain;
}

.agh-site-header__desktop {
  display: flex;
  min-inline-size: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--agh-space-24);
}

.agh-site-header__cta {
  flex: 0 0 auto;
}

.agh-site-header__cta .agh-button {
  white-space: nowrap;
}


/* ========================================================================== 
   02. PRIMARY DESKTOP NAVIGATION
   ========================================================================== */

.agh-primary-nav {
  min-inline-size: 0;
}

.agh-primary-nav__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(
    var(--agh-navigation-gap-min),
    2vw,
    var(--agh-navigation-gap-max)
  );
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-primary-nav__item {
  position: relative;
  display: flex;
  min-inline-size: 0;
  align-items: center;
}

/**
 * Desktop Services contract:
 *
 * .agh-primary-nav__services-control contains two separate semantic controls:
 *
 * 1. .agh-primary-nav__link
 *    A real anchor to /services/.
 *
 * 2. button.agh-primary-nav__trigger
 *    A disclosure button that owns aria-expanded / aria-controls and opens
 *    the Services mega menu.
 *
 * This DOM contract must remain aligned with agh-app.js.
 */
.agh-primary-nav__services-control {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--agh-space-4);
}

.agh-primary-nav__link,
.agh-primary-nav__trigger {
  position: relative;
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: center;
  gap: var(--agh-space-8);
  padding: 0;
  border: 0;
  color: var(--agh-color-text-primary);
  background: transparent;
  font-size: var(--agh-type-navigation-size);
  font-weight: var(--agh-type-navigation-weight);
  line-height: var(--agh-type-navigation-line-height);
  white-space: nowrap;
  text-decoration: none;
  transition:
    color var(--agh-duration-micro-min) var(--agh-easing-default),
    background-color var(--agh-duration-micro-min) var(--agh-easing-default),
    transform var(--agh-duration-micro-min) var(--agh-easing-default);
}

.agh-primary-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 5px;
  block-size: 2px;
  border-radius: var(--agh-radius-pill);
  background: var(--agh-color-brand-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--agh-duration-micro-min) var(--agh-easing-default);
}

.agh-primary-nav__link:hover,
.agh-primary-nav__trigger:hover {
  color: var(--agh-color-text-primary);
  text-decoration: none;
}

.agh-primary-nav__link:hover::after,
.agh-primary-nav__link[aria-current="page"]::after,
.agh-primary-nav__item--current > .agh-primary-nav__link::after,
.agh-primary-nav__item--current
  .agh-primary-nav__services-control
  > .agh-primary-nav__link::after,
.agh-primary-nav__services-control:has(
  .agh-primary-nav__trigger[aria-expanded="true"]
) > .agh-primary-nav__link::after {
  transform: scaleX(1);
}

.agh-primary-nav__link[aria-current="page"],
.agh-primary-nav__item--current > .agh-primary-nav__link,
.agh-primary-nav__item--current
  .agh-primary-nav__services-control
  > .agh-primary-nav__link {
  font-weight: var(--agh-font-weight-bold);
}

.agh-primary-nav__item--services .agh-primary-nav__trigger {
  inline-size: var(--agh-control-touch-min);
  min-inline-size: var(--agh-control-touch-min);
  flex: 0 0 auto;
  border-radius: var(--agh-radius-control-small);
}

.agh-primary-nav__item--services .agh-primary-nav__trigger:hover,
.agh-primary-nav__item--services .agh-primary-nav__trigger[aria-expanded="true"] {
  background: var(--agh-color-brand-primary-soft);
}

.agh-primary-nav__item--services
  .agh-primary-nav__trigger:hover
  .agh-primary-nav__chevron,
.agh-primary-nav__item--services
  .agh-primary-nav__trigger[aria-expanded="true"]
  .agh-primary-nav__chevron {
  color: var(--agh-color-brand-primary-hover);
}

.agh-primary-nav__chevron {
  inline-size: var(--agh-icon-size-small-min);
  block-size: var(--agh-icon-size-small-min);
  flex: 0 0 auto;
  color: var(--agh-color-text-secondary);
  transition:
    color var(--agh-duration-micro-max) var(--agh-easing-default),
    transform var(--agh-duration-micro-max) var(--agh-easing-default);
}

.agh-primary-nav__trigger[aria-expanded="true"] .agh-primary-nav__chevron {
  transform: rotate(180deg);
}


/* ========================================================================== 
   03. SERVICES MEGA MENU
   ========================================================================== */

.agh-primary-nav__item--services {
  position: static;
}

.agh-mega-menu {
  position: absolute;
  inset-inline: var(--agh-gutter-page);
  inset-block-start: calc(100% - var(--agh-space-8));
  z-index: 1010;
  max-inline-size: var(--agh-container-primary);
  margin-inline: auto;
  padding: clamp(
    var(--agh-mega-menu-padding-min),
    2.5vw,
    var(--agh-mega-menu-padding-max)
  );
  border: var(--agh-border-panel-light);
  border-radius: var(--agh-radius-mega-menu);
  background: rgba(255, 255, 255, 0.985);
  box-shadow: var(--agh-shadow-floating-panel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--agh-space-8) * -1));
  pointer-events: none;
  transition:
    opacity var(--agh-duration-micro-max) var(--agh-easing-default),
    visibility var(--agh-duration-micro-max) var(--agh-easing-default),
    transform var(--agh-duration-micro-max) var(--agh-easing-default);
}

.agh-mega-menu[data-state="open"],
.agh-mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.agh-mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--agh-space-16);
  min-inline-size: 0;
}

.agh-mega-menu__group {
  min-inline-size: 0;
  padding: var(--agh-space-24);
  border: 1px solid transparent;
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-warm-white);
}

.agh-mega-menu__group:nth-child(1) {
  background: var(--agh-color-pastel-peach);
}

.agh-mega-menu__group:nth-child(2) {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-mega-menu__group:nth-child(3) {
  background: var(--agh-color-pastel-sage);
}

.agh-mega-menu__group-title {
  margin: 0 0 var(--agh-space-16);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-mega-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-mega-menu__link {
  display: flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  padding-block: var(--agh-space-8);
  padding-inline: var(--agh-space-12);
  border-radius: var(--agh-radius-control-small);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-navigation-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-navigation-line-height);
  text-decoration: none;
  transition:
    color var(--agh-duration-micro-min) var(--agh-easing-default),
    background-color var(--agh-duration-micro-min) var(--agh-easing-default),
    transform var(--agh-duration-micro-min) var(--agh-easing-default);
}

.agh-mega-menu__link:hover {
  color: var(--agh-color-text-primary);
  background: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.agh-mega-menu__link[aria-current="page"] {
  color: var(--agh-color-text-primary);
  background: rgba(255, 255, 255, 0.86);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-mega-menu__link[aria-current="page"]::before {
  content: "";
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  flex: 0 0 auto;
  margin-inline-end: var(--agh-space-4);
  border-radius: 50%;
  background: var(--agh-color-brand-primary);
}

.agh-mega-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-24);
  margin-block-start: var(--agh-space-24);
  padding-block-start: var(--agh-space-24);
  border-block-start: var(--agh-border-default);
}

.agh-mega-menu__all-services {
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  gap: var(--agh-space-8);
  padding-inline: var(--agh-space-4);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-navigation-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-navigation-line-height);
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.agh-mega-menu__all-services:hover {
  text-decoration-thickness: 2px;
}

.agh-mega-menu__all-services .agh-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
  color: var(--agh-color-brand-primary);
  transition: transform var(--agh-duration-micro-min) var(--agh-easing-default);
}


/* ========================================================================== 
   04. MOBILE MENU TRIGGER
   ========================================================================== */

.agh-menu-toggle {
  display: none;
  inline-size: var(--agh-control-touch-min);
  block-size: var(--agh-control-touch-min);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-control-small);
  color: var(--agh-color-text-primary);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
  transition:
    background-color var(--agh-duration-button) var(--agh-easing-default),
    border-color var(--agh-duration-button) var(--agh-easing-default),
    color var(--agh-duration-button) var(--agh-easing-default),
    transform var(--agh-duration-button) var(--agh-easing-default);
}

.agh-menu-toggle:hover {
  background: var(--agh-color-brand-primary-soft);
  border-color: var(--agh-color-brand-primary-border);
}

.agh-menu-toggle[aria-expanded="true"] {
  color: var(--agh-color-text-primary);
  background: var(--agh-color-pastel-peach);
  border-color: var(--agh-color-brand-primary-border);
}

.agh-menu-toggle__icon {
  inline-size: var(--agh-icon-size-default);
  block-size: var(--agh-icon-size-default);
}


/* ========================================================================== 
   05. MOBILE NAVIGATION DRAWER
   ========================================================================== */

/**
 * agh-responsive.css controls when the mobile drawer becomes the active
 * navigation system. agh-app.js owns open/close behaviour and ARIA state.
 */
.agh-mobile-nav {
  position: fixed;
  inset-inline: 0;
  inset-block-start: var(--agh-header-height-mobile-max);
  inset-block-end: 0;
  z-index: 990;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(
      180deg,
      var(--agh-color-white) 0%,
      var(--agh-color-warm-white) 100%
    );
}

.agh-mobile-nav[data-state="open"],
.agh-mobile-nav.is-open {
  display: block;
}

.agh-mobile-nav__inner {
  display: flex;
  min-block-size: 100%;
  flex-direction: column;
  gap: var(--agh-space-24);
  padding-block: var(--agh-space-24) var(--agh-space-32);
}

.agh-mobile-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-mobile-nav__item {
  border-block-end: var(--agh-border-default);
}

.agh-mobile-nav__link,
.agh-mobile-nav__services-trigger {
  display: flex;
  inline-size: 100%;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-16);
  padding-block: var(--agh-space-16);
  padding-inline: 0;
  border: 0;
  color: var(--agh-color-text-primary);
  background: transparent;
  font-size: var(--agh-type-body-large-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-large-line-height);
  text-align: start;
  text-decoration: none;
  transition:
    color var(--agh-duration-micro-min) var(--agh-easing-default),
    padding-inline var(--agh-duration-micro-min) var(--agh-easing-default);
}

.agh-mobile-nav__link:hover,
.agh-mobile-nav__services-trigger:hover {
  color: var(--agh-color-brand-primary-hover);
  text-decoration: none;
}

.agh-mobile-nav__link[aria-current="page"] {
  color: var(--agh-color-brand-primary-hover);
}

.agh-mobile-nav__services-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
  flex: 0 0 auto;
  color: var(--agh-color-text-secondary);
  transition:
    color var(--agh-duration-accordion-min) var(--agh-easing-default),
    transform var(--agh-duration-accordion-min) var(--agh-easing-default);
}

.agh-mobile-nav__services-trigger[aria-expanded="true"] {
  color: var(--agh-color-brand-primary-hover);
}

.agh-mobile-nav__services-trigger[aria-expanded="true"] .agh-mobile-nav__services-icon {
  color: var(--agh-color-brand-primary-hover);
  transform: rotate(180deg);
}

.agh-mobile-nav__services-panel {
  padding-block: 0 var(--agh-space-16);
}

.agh-mobile-nav__services-panel[hidden] {
  display: none;
}

.agh-mobile-nav__services-list {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-4);
  margin: 0;
  padding: var(--agh-space-12);
  border: 1px solid var(--agh-color-brand-primary-border);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-pastel-peach);
  list-style: none;
}

.agh-mobile-nav__service-link {
  display: flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  padding-block: var(--agh-space-8);
  padding-inline: var(--agh-space-12);
  border-radius: var(--agh-radius-control-small);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-body-line-height);
  text-decoration: none;
  transition:
    color var(--agh-duration-micro-min) var(--agh-easing-default),
    background-color var(--agh-duration-micro-min) var(--agh-easing-default);
}

.agh-mobile-nav__service-link:hover,
.agh-mobile-nav__service-link[aria-current="page"] {
  color: var(--agh-color-text-primary);
  background: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.agh-mobile-nav__service-link[aria-current="page"] {
  font-weight: var(--agh-font-weight-semibold);
}

.agh-mobile-nav__cta {
  margin-block-start: auto;
  padding-block-start: var(--agh-space-8);
}

.agh-mobile-nav__cta .agh-button {
  inline-size: 100%;
}


/* ========================================================================== 
   06. NAVIGATION OPEN STATE
   ========================================================================== */

body[data-agh-nav-open="true"] {
  overflow: hidden;
}

.agh-nav-backdrop {
  position: fixed;
  inset: var(--agh-header-height-mobile-max) 0 0;
  z-index: 980;
  display: none;
  background: rgba(24, 24, 24, 0.22);
  backdrop-filter: blur(2px);
}

.agh-nav-backdrop[data-state="open"],
.agh-nav-backdrop.is-open {
  display: block;
}


/* ========================================================================== 
   07. SITE FOOTER — PREMIUM WHITE / PASTEL SYSTEM
   ========================================================================== */

.agh-site-footer {
  inline-size: 100%;
  min-inline-size: 0;
  border-block-start: var(--agh-border-default);
  background:
    linear-gradient(
      180deg,
      var(--agh-color-warm-white) 0%,
      var(--agh-color-white) 100%
    );
}

.agh-site-footer__main {
  padding-block: var(--agh-space-96) var(--agh-space-64);
}

.agh-site-footer__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 1.15fr)
    minmax(0, 1fr)
    minmax(0, 0.85fr)
    minmax(0, 1.2fr)
    minmax(0, 0.9fr);
  gap: var(--agh-space-40) var(--agh-space-32);
  min-inline-size: 0;
}

.agh-site-footer__column {
  min-inline-size: 0;
}

.agh-site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-16);
}

.agh-site-footer__brand-link {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  color: var(--agh-color-text-primary);
  text-decoration: none;
}

.agh-site-footer__brand-link:hover {
  text-decoration: none;
}

.agh-site-footer__logo {
  display: block;
  inline-size: auto;
  block-size: clamp(
    var(--agh-footer-logo-height-desktop-min),
    4.5vw,
    var(--agh-footer-logo-height-desktop-max)
  );
  max-inline-size: 100%;
  object-fit: contain;
}

.agh-site-footer__brand-copy {
  max-inline-size: 32ch;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-site-footer__heading {
  margin: 0 0 var(--agh-space-16);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-site-footer__list,
.agh-site-footer__contact-list,
.agh-site-footer__legal-list,
.agh-site-footer__social-list {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-site-footer__link,
.agh-site-footer__contact-link,
.agh-site-footer__social-link,
.agh-site-footer__platform-link {
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  gap: var(--agh-space-8);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-body-small-line-height);
  text-decoration: none;
  transition:
    color var(--agh-duration-micro-min) var(--agh-easing-default),
    text-decoration-color var(--agh-duration-micro-min) var(--agh-easing-default),
    transform var(--agh-duration-micro-min) var(--agh-easing-default);
}

.agh-site-footer__link:hover,
.agh-site-footer__contact-link:hover,
.agh-site-footer__social-link:hover,
.agh-site-footer__platform-link:hover {
  color: var(--agh-color-text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-underline-offset: 0.24em;
}

.agh-site-footer__link[aria-current="page"] {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-site-footer__contact-item {
  min-inline-size: 0;
}

.agh-site-footer__contact-label {
  display: block;
  margin-block-end: var(--agh-space-4);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-meta-line-height);
}

.agh-site-footer__contact-link {
  min-block-size: 0;
  overflow-wrap: anywhere;
}

.agh-site-footer__contact-text {
  display: block;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-site-footer__get-started {
  min-inline-size: 0;
}

.agh-site-footer__get-started .agh-button {
  inline-size: 100%;
  max-inline-size: 240px;
}

/**
 * Runtime 2.0 hook: these classes are intentionally prepared for the approved
 * LinkedIn, Instagram and Platform Login links that will be emitted by the
 * Global Runtime & Shell rebuild. They do not alter the current DOM contract.
 */
.agh-site-footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-12);
  min-inline-size: 0;
}

.agh-site-footer__social-list--inline {
  flex-flow: row wrap;
  gap: var(--agh-space-8);
}

.agh-site-footer__social-list--inline .agh-site-footer__social-link {
  min-block-size: var(--agh-control-touch-min);
  padding-inline: var(--agh-space-12);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-pill);
  background: var(--agh-color-white);
}

.agh-site-footer__platform-link {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
}


/* ========================================================================== 
   08. FOOTER LOWER BAR
   ========================================================================== */

.agh-site-footer__bottom {
  border-block-start: var(--agh-border-default);
  background: rgba(255, 255, 255, 0.7);
}

.agh-site-footer__bottom-inner {
  display: flex;
  min-block-size: var(--agh-space-80);
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-24);
}

.agh-site-footer__copyright,
.agh-site-footer__legal-company {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}

.agh-site-footer__legal-company {
  max-inline-size: 58ch;
  text-align: end;
}


/* ========================================================================== 
   09. POINTER-ONLY MICRO-INTERACTIONS
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .agh-primary-nav__link:hover {
    transform: translateY(-1px);
  }

  .agh-mega-menu__link:hover {
    transform: translateX(var(--agh-space-4));
  }

  .agh-mega-menu__all-services:hover .agh-icon {
    transform: translateX(var(--agh-space-4));
  }

  .agh-site-footer__link:hover,
  .agh-site-footer__contact-link:hover,
  .agh-site-footer__social-link:hover,
  .agh-site-footer__platform-link:hover {
    transform: translateY(-1px);
  }

  .agh-site-footer__social-list--inline .agh-site-footer__social-link:hover {
    border-color: var(--agh-color-brand-primary-border);
    background: var(--agh-color-brand-primary-soft);
  }
}


/* ========================================================================== 
   10. REDUCED MOTION SAFETY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .agh-primary-nav__link,
  .agh-primary-nav__trigger,
  .agh-primary-nav__chevron,
  .agh-mega-menu,
  .agh-mega-menu__link,
  .agh-mega-menu__all-services .agh-icon,
  .agh-menu-toggle,
  .agh-mobile-nav__link,
  .agh-mobile-nav__services-trigger,
  .agh-mobile-nav__services-icon,
  .agh-mobile-nav__service-link,
  .agh-site-footer__link,
  .agh-site-footer__contact-link,
  .agh-site-footer__social-link,
  .agh-site-footer__platform-link {
    transition-duration: 0.01ms;
  }

  .agh-primary-nav__link:hover,
  .agh-mega-menu__link:hover,
  .agh-mega-menu__all-services:hover .agh-icon,
  .agh-site-footer__link:hover,
  .agh-site-footer__contact-link:hover,
  .agh-site-footer__social-link:hover,
  .agh-site-footer__platform-link:hover {
    transform: none;
  }
}


/* ========================================================================== 
   11. NAVIGATION RESPONSIBILITY HOOKS
   ========================================================================== */

/**
 * agh-responsive.css owns the locked Desktop -> Tablet -> Mobile navigation
 * recomposition, including:
 *
 * - Desktop navigation visibility below the appropriate breakpoint.
 * - Mobile header height and logo sizing.
 * - Menu trigger visibility.
 * - Mega-menu replacement by the expandable Services mobile hierarchy.
 * - Footer multi-column -> stacked composition.
 *
 * Desktop Services markup keeps navigation and disclosure separate:
 *
 * - .agh-primary-nav__link navigates to /services/.
 * - button.agh-primary-nav__trigger controls the mega menu.
 *
 * agh-app.js owns:
 *
 * - aria-expanded state on the disclosure button only.
 * - Mega-menu open/close.
 * - Mobile-drawer open/close.
 * - Escape-key handling.
 * - Outside-click handling where appropriate.
 * - Body scroll-lock state.
 *
 * Global Runtime & Shell owns the actual navigation labels, URLs, CTA wording,
 * Footer links, social destinations and the Discovery -> Consultation migration.
 */
.agh-site-header,
.agh-primary-nav,
.agh-mega-menu,
.agh-mobile-nav,
.agh-site-footer {
  min-inline-size: 0;
}

/**
 * AGH Teams
 * File: agh-content.css
 * Purpose: Production structured-content presentation for commercial pages,
 *          service pages, information groups, lists, callouts, comparisons,
 *          management-friendly content blocks, and pastel-supported editorial UI.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css,
 *             agh-components.css, agh-navigation.css
 * Used by: AGH commercial pages, service pages, Platform content, FAQ support,
 *          About, How It Works introductions, and supporting page sections.
 * Version: 2.0
 */

/* ========================================================================== 
   01. CONTENT ROOT & FLOW
   ========================================================================== */

.agh-content {
  --agh-content-flow-space: var(--agh-space-24);

  min-inline-size: 0;
  color: var(--agh-color-text-primary);
}

.agh-content > * {
  max-inline-size: 100%;
}

.agh-content > * + * {
  margin-block-start: var(--agh-content-flow-space);
}

.agh-content--compact {
  --agh-content-flow-space: var(--agh-space-16);
}

.agh-content--relaxed {
  --agh-content-flow-space: var(--agh-space-32);
}

.agh-content--spacious {
  --agh-content-flow-space: var(--agh-space-40);
}


/* ========================================================================== 
   02. CONTENT TYPOGRAPHY
   ========================================================================== */

.agh-content__lead {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-large-size);
  font-weight: var(--agh-type-body-large-weight);
  line-height: var(--agh-type-body-large-line-height);
  text-wrap: pretty;
}

.agh-content__body {
  max-inline-size: var(--agh-measure-long-form);
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}

.agh-content__body--strong {
  color: var(--agh-color-text-primary);
}

.agh-content__label {
  display: inline-flex;
  align-items: center;
  gap: var(--agh-space-8);
  max-inline-size: 100%;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-content__label::before {
  content: "";
  inline-size: var(--agh-space-16);
  block-size: var(--agh-connector-width-max);
  flex: 0 0 auto;
  border-radius: var(--agh-radius-pill);
  background: var(--agh-color-brand-primary);
}

.agh-content__title {
  color: var(--agh-color-text-primary);
  text-wrap: balance;
}

.agh-content__subtitle {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-content__muted {
  color: var(--agh-color-text-secondary);
}

.agh-inline-emphasis {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-inline-accent {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-decoration-thickness: var(--agh-border-width-default);
  text-underline-offset: 0.24em;
}


/* ========================================================================== 
   03. STRUCTURED CONTENT STACK
   ========================================================================== */

.agh-content-stack {
  --agh-content-stack-gap: var(--agh-space-24);

  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-content-stack-gap);
}

.agh-content-stack--tight {
  --agh-content-stack-gap: var(--agh-space-16);
}

.agh-content-stack--wide {
  --agh-content-stack-gap: var(--agh-space-32);
}

.agh-content-stack--spacious {
  --agh-content-stack-gap: var(--agh-space-40);
}

.agh-content-stack__group {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
}

.agh-content-stack__group > :where(p, li, dd) {
  text-wrap: pretty;
}


/* ========================================================================== 
   04. STANDARD CONTENT LIST
   ========================================================================== */

.agh-content-list {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-content-list__item {
  position: relative;
  min-inline-size: 0;
  padding-inline-start: var(--agh-space-24);
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}

.agh-content-list__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(
    (var(--agh-type-body-line-height) - var(--agh-space-8)) / 2
  );
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  border-radius: 50%;
  background: var(--agh-color-brand-primary);
}

.agh-content-list__item strong {
  color: var(--agh-color-text-primary);
}

.agh-content-list--soft .agh-content-list__item::before {
  box-shadow: 0 0 0 var(--agh-space-4) var(--agh-color-brand-primary-soft);
}


/* ========================================================================== 
   05. CHECK / CONFIRMED LIST
   ========================================================================== */

.agh-check-list {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-check-list__item {
  display: grid;
  grid-template-columns: var(--agh-icon-container-small) minmax(0, 1fr);
  align-items: start;
  gap: var(--agh-space-12);
  min-inline-size: 0;
  color: var(--agh-color-text-secondary);
}

.agh-check-list__marker {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-small);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-pastel-peach);
}

.agh-check-list__marker > .agh-icon {
  inline-size: var(--agh-icon-size-small-min);
  block-size: var(--agh-icon-size-small-min);
}

.agh-check-list__text {
  min-inline-size: 0;
  padding-block-start: var(--agh-space-4);
  text-wrap: pretty;
}

.agh-check-list__text strong {
  color: var(--agh-color-text-primary);
}

.agh-check-list--ice .agh-check-list__marker {
  color: var(--agh-color-functional-blue);
  background: var(--agh-color-pastel-ice-blue);
}

.agh-check-list--lavender .agh-check-list__marker {
  color: var(--agh-color-functional-lavender);
  background: var(--agh-color-pastel-lavender);
}

.agh-check-list--sage .agh-check-list__marker {
  color: var(--agh-color-functional-green);
  background: var(--agh-color-pastel-sage);
}


/* ========================================================================== 
   06. KEY POINT GRID
   ========================================================================== */

.agh-key-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--agh-space-24);
  min-inline-size: 0;
}

.agh-key-point {
  --agh-key-point-background: var(--agh-color-warm-white);
  --agh-key-point-border-color: var(--agh-color-border);

  position: relative;
  display: flex;
  min-block-size: 100%;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  overflow: hidden;
  border: var(--agh-border-width-default) solid var(--agh-key-point-border-color);
  border-radius: var(--agh-radius-card);
  background: var(--agh-key-point-background);
  box-shadow: var(--agh-shadow-ui);
  transform: translateZ(0);
  transition:
    transform var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-key-point::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--agh-connector-width-max);
  background: var(--agh-color-brand-primary);
}

.agh-key-point--white {
  --agh-key-point-background: var(--agh-color-white);
}

.agh-key-point--peach {
  --agh-key-point-background: var(--agh-color-pastel-peach);
}

.agh-key-point--ice {
  --agh-key-point-background: var(--agh-color-pastel-ice-blue);
}

.agh-key-point--lavender {
  --agh-key-point-background: var(--agh-color-pastel-lavender);
}

.agh-key-point--sage {
  --agh-key-point-background: var(--agh-color-pastel-sage);
}

.agh-key-point__label {
  color: var(--agh-color-brand-primary-hover);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-key-point__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-key-point__copy {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .agh-key-point:hover {
    --agh-key-point-background: var(--agh-card-hover-background);
    --agh-key-point-border-color: var(--agh-card-hover-border-color);

    transform:
      translateY(calc(var(--agh-card-hover-translate-max) * -1))
      scale(var(--agh-card-hover-scale));
    box-shadow: var(--agh-shadow-card-hover);
  }
}


/* ========================================================================== 
   07. CONTENT CALLOUT
   ========================================================================== */

.agh-callout {
  --agh-callout-accent: var(--agh-color-brand-primary);
  --agh-callout-background: var(--agh-color-background-alt);
  --agh-callout-border-color: var(--agh-color-border);

  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  overflow: hidden;
  border: var(--agh-border-width-default) solid var(--agh-callout-border-color);
  border-radius: var(--agh-radius-card);
  background: var(--agh-callout-background);
}

.agh-callout::before {
  content: "";
  position: absolute;
  inset-block: var(--agh-space-24);
  inset-inline-start: 0;
  inline-size: var(--agh-connector-width-max);
  border-radius: var(--agh-radius-pill);
  background: var(--agh-callout-accent);
}

.agh-callout--information,
.agh-callout--ice {
  --agh-callout-accent: var(--agh-color-state-info);
  --agh-callout-background: var(--agh-color-pastel-ice-blue);
}

.agh-callout--success,
.agh-callout--sage {
  --agh-callout-accent: var(--agh-color-state-success);
  --agh-callout-background: var(--agh-color-pastel-sage);
}

.agh-callout--warning {
  --agh-callout-accent: var(--agh-color-state-warning);
  --agh-callout-background: var(--agh-color-warm-white);
}

.agh-callout--critical {
  --agh-callout-accent: var(--agh-color-state-error);
  --agh-callout-background: var(--agh-color-background-alt);
}

.agh-callout--peach {
  --agh-callout-accent: var(--agh-color-brand-primary);
  --agh-callout-background: var(--agh-color-pastel-peach);
}

.agh-callout--lavender {
  --agh-callout-accent: var(--agh-color-functional-lavender);
  --agh-callout-background: var(--agh-color-pastel-lavender);
}

.agh-callout__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-callout__copy {
  max-inline-size: var(--agh-measure-long-form);
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}

.agh-callout__copy > * + * {
  margin-block-start: var(--agh-space-12);
}


/* ========================================================================== 
   08. PRINCIPLE / POSITIONING STATEMENT
   ========================================================================== */

.agh-principle {
  --agh-principle-background: transparent;
  --agh-principle-border-color: var(--agh-color-border);

  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--agh-space-32);
  min-inline-size: 0;
  padding-block: var(--agh-space-24);
  border-block: var(--agh-border-width-default) solid var(--agh-principle-border-color);
  background: var(--agh-principle-background);
}

.agh-principle--panel {
  padding: var(--agh-space-32);
  border: var(--agh-border-width-default) solid var(--agh-principle-border-color);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-warm-white);
}

.agh-principle--peach {
  --agh-principle-background: var(--agh-color-pastel-peach);
}

.agh-principle--ice {
  --agh-principle-background: var(--agh-color-pastel-ice-blue);
}

.agh-principle--lavender {
  --agh-principle-background: var(--agh-color-pastel-lavender);
}

.agh-principle--sage {
  --agh-principle-background: var(--agh-color-pastel-sage);
}

.agh-principle__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-principle__content {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
}

.agh-principle__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h4-size);
  font-weight: var(--agh-type-h4-weight);
  line-height: var(--agh-type-h4-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
  text-wrap: balance;
}

.agh-principle__copy {
  max-inline-size: var(--agh-measure-long-form);
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}


/* ========================================================================== 
   09. DEFINITION / INFORMATION ROWS
   ========================================================================== */

.agh-definition-list {
  margin: 0;
  border-block-start: var(--agh-border-default);
}

.agh-definition-row {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
  gap: var(--agh-space-32);
  min-inline-size: 0;
  padding-block: var(--agh-space-24);
  border-block-end: var(--agh-border-default);
}

.agh-definition-row__term {
  margin: 0;
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
  text-wrap: balance;
}

.agh-definition-row__description {
  min-inline-size: 0;
  margin: 0;
  color: var(--agh-color-text-secondary);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.agh-definition-row__description > * + * {
  margin-block-start: var(--agh-space-12);
}

.agh-definition-row__description a {
  text-underline-offset: 0.22em;
}


/* ========================================================================== 
   10. COMPARISON CONTENT
   ========================================================================== */

.agh-comparison {
  min-inline-size: 0;
  overflow: hidden;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
}

.agh-comparison__header,
.agh-comparison__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-inline-size: 0;
}

.agh-comparison__header {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-comparison__heading,
.agh-comparison__cell {
  min-inline-size: 0;
  padding: var(--agh-space-24);
}

.agh-comparison__heading {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-comparison__heading + .agh-comparison__heading,
.agh-comparison__cell + .agh-comparison__cell {
  border-inline-start: var(--agh-border-default);
}

.agh-comparison__row {
  border-block-start: var(--agh-border-default);
}

.agh-comparison__row:nth-child(even) {
  background: var(--agh-color-warm-white);
}

.agh-comparison__cell {
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}

.agh-comparison__cell strong {
  color: var(--agh-color-text-primary);
}


/* ========================================================================== 
   11. CONTENT MATRIX
   ========================================================================== */

.agh-content-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--agh-space-24);
  min-inline-size: 0;
}

.agh-content-matrix__item {
  --agh-content-matrix-background: var(--agh-color-white);
  --agh-content-matrix-border-color: var(--agh-color-border);

  position: relative;
  display: flex;
  min-block-size: 100%;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  border: var(--agh-border-width-default) solid var(--agh-content-matrix-border-color);
  border-radius: var(--agh-radius-card);
  background: var(--agh-content-matrix-background);
  box-shadow: var(--agh-shadow-ui);
  transform: translateZ(0);
  transition:
    transform var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-content-matrix__item--warm {
  --agh-content-matrix-background: var(--agh-color-warm-white);
}

.agh-content-matrix__item--peach {
  --agh-content-matrix-background: var(--agh-color-pastel-peach);
}

.agh-content-matrix__item--ice {
  --agh-content-matrix-background: var(--agh-color-pastel-ice-blue);
}

.agh-content-matrix__item--lavender {
  --agh-content-matrix-background: var(--agh-color-pastel-lavender);
}

.agh-content-matrix__item--sage {
  --agh-content-matrix-background: var(--agh-color-pastel-sage);
}

.agh-content-matrix__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-content-matrix__copy {
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .agh-content-matrix__item:hover {
    --agh-content-matrix-background: var(--agh-card-hover-background);
    --agh-content-matrix-border-color: var(--agh-card-hover-border-color);

    transform:
      translateY(calc(var(--agh-card-hover-translate-max) * -1))
      scale(var(--agh-card-hover-scale));
    box-shadow: var(--agh-shadow-card-hover);
  }
}


/* ========================================================================== 
   12. CONTENT ITEM WITH ICON
   ========================================================================== */

.agh-content-item {
  display: grid;
  grid-template-columns: var(--agh-icon-container-card) minmax(0, 1fr);
  align-items: start;
  gap: var(--agh-space-16);
  min-inline-size: 0;
}

.agh-content-item--panel {
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-warm-white);
}

.agh-content-item--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-content-item--ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-content-item--lavender {
  background: var(--agh-color-pastel-lavender);
}

.agh-content-item--sage {
  background: var(--agh-color-pastel-sage);
}

.agh-content-item__body {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
}

.agh-content-item__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-content-item__copy {
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}


/* ========================================================================== 
   13. CONTENT ACTION ROW
   ========================================================================== */

.agh-content-action {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-24);
  padding-block-start: var(--agh-space-24);
  border-block-start: var(--agh-border-default);
}

.agh-content-action--panel {
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-warm-white);
}

.agh-content-action--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-content-action--ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-content-action__copy {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}

.agh-content-action__controls {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-12);
}


/* ========================================================================== 
   14. TEXTUAL STATUS / SCOPE LABELS
   ========================================================================== */

/**
 * Chips are reserved for concise semantic labels only. They are not intended
 * as a decorative card system or replacement for normal headings.
 */
.agh-content-tag {
  --agh-content-tag-background: var(--agh-color-white);
  --agh-content-tag-border-color: var(--agh-color-border);
  --agh-content-tag-marker: var(--agh-color-brand-primary);

  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  gap: var(--agh-space-8);
  max-inline-size: 100%;
  padding-block: var(--agh-space-8);
  padding-inline: var(--agh-space-12);
  border: var(--agh-border-width-default) solid var(--agh-content-tag-border-color);
  border-radius: var(--agh-radius-pill);
  color: var(--agh-color-text-primary);
  background: var(--agh-content-tag-background);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-content-tag--peach {
  --agh-content-tag-background: var(--agh-color-pastel-peach);
  --agh-content-tag-border-color: var(--agh-color-brand-primary-border);
}

.agh-content-tag--ice {
  --agh-content-tag-background: var(--agh-color-pastel-ice-blue);
  --agh-content-tag-marker: var(--agh-color-functional-blue);
}

.agh-content-tag--lavender {
  --agh-content-tag-background: var(--agh-color-pastel-lavender);
  --agh-content-tag-marker: var(--agh-color-functional-lavender);
}

.agh-content-tag--sage {
  --agh-content-tag-background: var(--agh-color-pastel-sage);
  --agh-content-tag-marker: var(--agh-color-functional-green);
}

.agh-content-tag__marker {
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--agh-content-tag-marker);
}


/* ========================================================================== 
   15. CONTENT SEPARATOR
   ========================================================================== */

.agh-content-separator {
  inline-size: 100%;
  block-size: var(--agh-border-width-default);
  margin: 0;
  border: 0;
  background: var(--agh-color-border);
}

.agh-content-separator--brand {
  block-size: var(--agh-connector-width-max);
  background: var(--agh-color-brand-primary);
}


/* ========================================================================== 
   16. REDUCED-MOTION SAFETY FOR CONTENT INTERACTIONS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .agh-key-point,
  .agh-content-matrix__item {
    transition: none;
  }

  .agh-key-point:hover,
  .agh-content-matrix__item:hover {
    transform: none;
  }
}


/* ========================================================================== 
   17. RESPONSIBILITY BOUNDARIES
   ========================================================================== */

/**
 * Responsive recomposition belongs to agh-responsive.css.
 * Major Hero and visual-stage presentation belongs to agh-components.css.
 * Process connectors belong to agh-process.css.
 * Dashboard/KPI visualisation belongs to agh-dashboard.css.
 * Form presentation belongs to agh-forms.css.
 * Article and legal long-form typography belongs to agh-editorial.css.
 */
.agh-content,
.agh-content-stack,
.agh-content-list,
.agh-check-list,
.agh-key-points,
.agh-callout,
.agh-principle,
.agh-definition-list,
.agh-comparison,
.agh-content-matrix,
.agh-content-item,
.agh-content-action {
  min-inline-size: 0;
}

/**
 * AGH Teams
 * File: agh-process.css
 * Purpose: Reusable process, workflow, pipeline, stage, connector, operational
 *          flow and wide process-visual presentation for the AGH public site.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css,
 *             agh-components.css, agh-navigation.css, agh-content.css
 * Used by: How It Works, Recruitment Support, Project Management Support,
 *          Remote Coordinator, Home Care Coordination & Rostering,
 *          Sales & Business Development Support, Data/Reporting pages,
 *          and other approved operational-flow sections.
 * Version: 2.0
 */

/* ========================================================================== 
   01. PROCESS ROOT
   ========================================================================== */

.agh-process {
  --agh-process-columns: 7;
  --agh-process-gap: var(--agh-space-24);
  --agh-process-marker-size: var(--agh-icon-container-feature);
  --agh-process-card-background: var(--agh-color-white);
  --agh-process-card-border: var(--agh-color-border);

  position: relative;
  min-inline-size: 0;
}

.agh-process--3 {
  --agh-process-columns: 3;
}

.agh-process--4 {
  --agh-process-columns: 4;
}

.agh-process--5 {
  --agh-process-columns: 5;
}

.agh-process--7 {
  --agh-process-columns: 7;
}

.agh-process__list {
  display: grid;
  grid-template-columns: repeat(
    var(--agh-process-columns),
    minmax(0, 1fr)
  );
  gap: var(--agh-process-gap);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-process__item {
  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-16);
}

.agh-process__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--agh-process-marker-size) / 2);
  inset-inline-start: calc(
    var(--agh-process-marker-size) + var(--agh-space-12)
  );
  inline-size: calc(
    100% - var(--agh-process-marker-size) - var(--agh-space-4)
  );
  block-size: var(--agh-connector-width-min);
  background: var(--agh-connector-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.agh-process__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  inline-size: var(--agh-process-marker-size);
  block-size: var(--agh-process-marker-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: var(--agh-border-width-default) solid var(--agh-color-border);
  border-radius: var(--agh-radius-icon-container-feature);
  color: var(--agh-color-text-primary);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: 1;
  transition:
    color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default);
}

.agh-process__marker::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--agh-space-4) * -1);
  inset-block-start: 50%;
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  border-radius: 50%;
  background: var(--agh-connector-color);
  transform: translateY(-50%);
}

.agh-process__marker-number {
  display: inline-block;
  min-inline-size: 2ch;
  text-align: center;
}

.agh-process__marker-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
  flex: 0 0 auto;
  margin-inline-start: var(--agh-space-4);
  color: var(--agh-color-brand-primary);
}

.agh-process__content {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
}

.agh-process__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-process__copy {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  text-wrap: pretty;
}

.agh-process__meta {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}


/* ========================================================================== 
   02. PROCESS CARD VARIANT
   ========================================================================== */

.agh-process--cards .agh-process__item {
  padding: var(--agh-space-24);
  border: var(--agh-border-width-default) solid var(--agh-process-card-border);
  border-radius: var(--agh-radius-card);
  background: var(--agh-process-card-background);
  box-shadow: var(--agh-shadow-ui);
  transform: translateZ(0);
  transition:
    transform var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-process--cards .agh-process__item:not(:last-child)::after {
  inset-inline-start: calc(
    100% + (var(--agh-process-gap) / 4)
  );
  inline-size: calc(var(--agh-process-gap) / 2);
}

.agh-process--cards .agh-process__marker {
  margin-block-end: var(--agh-space-4);
}

.agh-process--cards.agh-process--warm {
  --agh-process-card-background: var(--agh-color-warm-white);
}

.agh-process--cards.agh-process--peach {
  --agh-process-card-background: var(--agh-color-pastel-peach);
}

.agh-process--cards.agh-process--ice {
  --agh-process-card-background: var(--agh-color-pastel-ice-blue);
}

.agh-process--cards.agh-process--lavender {
  --agh-process-card-background: var(--agh-color-pastel-lavender);
}

.agh-process--cards.agh-process--sage {
  --agh-process-card-background: var(--agh-color-pastel-sage);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .agh-process--cards .agh-process__item:hover {
    border-color: var(--agh-card-hover-border-color);
    background: var(--agh-card-hover-background);
    box-shadow: var(--agh-shadow-card-hover);
    transform:
      translateY(calc(var(--agh-card-hover-translate-max) * -1))
      scale(var(--agh-card-hover-scale));
  }

  .agh-process--cards .agh-process__item:hover .agh-process__marker {
    border-color: var(--agh-color-brand-primary-border);
    background: var(--agh-color-pastel-peach);
  }
}


/* ========================================================================== 
   03. PROCESS CURRENT / EMPHASIS STATE
   ========================================================================== */

/**
 * aria-current="step" is the semantic source of truth for a current stage.
 * Styling reinforces that state without relying on colour as the sole signal.
 */
.agh-process__item[aria-current="step"] .agh-process__marker {
  border-color: var(--agh-color-brand-primary);
  background: var(--agh-color-pastel-peach);
  box-shadow: var(--agh-shadow-card);
}

.agh-process__item[aria-current="step"] .agh-process__title {
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-decoration-thickness: var(--agh-border-width-default);
  text-underline-offset: 0.22em;
}

.agh-process--cards .agh-process__item[aria-current="step"] {
  border-color: var(--agh-color-brand-primary-border);
  background: var(--agh-color-brand-primary-soft);
}


/* ========================================================================== 
   04. WORKFLOW
   ========================================================================== */

.agh-workflow {
  --agh-workflow-gap: var(--agh-space-24);
  --agh-workflow-card-background: var(--agh-color-white);
  --agh-workflow-card-border: var(--agh-color-border);

  min-inline-size: 0;
}

.agh-workflow__list {
  display: grid;
  grid-template-columns: repeat(
    var(--agh-workflow-columns, 4),
    minmax(0, 1fr)
  );
  gap: var(--agh-workflow-gap);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-workflow--3 .agh-workflow__list {
  --agh-workflow-columns: 3;
}

.agh-workflow--4 .agh-workflow__list {
  --agh-workflow-columns: 4;
}

.agh-workflow--5 .agh-workflow__list {
  --agh-workflow-columns: 5;
}

.agh-workflow__step {
  position: relative;
  display: flex;
  min-block-size: 100%;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  border: var(--agh-border-width-default) solid var(--agh-workflow-card-border);
  border-radius: var(--agh-radius-card);
  background: var(--agh-workflow-card-background);
  box-shadow: var(--agh-shadow-ui);
  transform: translateZ(0);
  transition:
    transform var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-workflow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 100%;
  inline-size: var(--agh-workflow-gap);
  block-size: var(--agh-connector-width-min);
  background: var(--agh-connector-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.agh-workflow__step:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: calc(
    100% + (var(--agh-workflow-gap) / 2) - (var(--agh-space-8) / 2)
  );
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  border-radius: 50%;
  background: var(--agh-connector-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.agh-workflow--warm {
  --agh-workflow-card-background: var(--agh-color-warm-white);
}

.agh-workflow--peach {
  --agh-workflow-card-background: var(--agh-color-pastel-peach);
}

.agh-workflow--ice {
  --agh-workflow-card-background: var(--agh-color-pastel-ice-blue);
}

.agh-workflow--lavender {
  --agh-workflow-card-background: var(--agh-color-pastel-lavender);
}

.agh-workflow--sage {
  --agh-workflow-card-background: var(--agh-color-pastel-sage);
}

.agh-workflow__index {
  color: var(--agh-color-brand-primary-hover);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
}

.agh-workflow__icon {
  display: inline-flex;
  inline-size: var(--agh-icon-container-card);
  block-size: var(--agh-icon-container-card);
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-card);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-pastel-peach);
  transition:
    color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-workflow__icon > .agh-icon {
  inline-size: var(--agh-icon-size-default);
  block-size: var(--agh-icon-size-default);
}

.agh-workflow__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-workflow__copy {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  text-wrap: pretty;
}

.agh-workflow__step[aria-current="step"] {
  border-color: var(--agh-color-brand-primary-border);
  background: var(--agh-color-brand-primary-soft);
  box-shadow: var(--agh-shadow-card);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .agh-workflow__step:hover {
    border-color: var(--agh-card-hover-border-color);
    background: var(--agh-card-hover-background);
    box-shadow: var(--agh-shadow-card-hover);
    transform:
      translateY(calc(var(--agh-card-hover-translate-max) * -1))
      scale(var(--agh-card-hover-scale));
  }

  .agh-workflow__step:hover .agh-workflow__icon {
    color: var(--agh-color-text-primary);
    background: rgba(255, 255, 255, 0.72);
  }
}


/* ========================================================================== 
   05. PIPELINE
   ========================================================================== */

.agh-pipeline {
  --agh-pipeline-columns: 3;
  --agh-pipeline-gap: var(--agh-space-24);

  min-inline-size: 0;
}

.agh-pipeline--4 {
  --agh-pipeline-columns: 4;
}

.agh-pipeline--5 {
  --agh-pipeline-columns: 5;
}

.agh-pipeline__track {
  display: grid;
  grid-template-columns: repeat(
    var(--agh-pipeline-columns),
    minmax(0, 1fr)
  );
  gap: var(--agh-pipeline-gap);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-pipeline__stage {
  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding-block-start: var(--agh-space-32);
}

.agh-pipeline__stage::before {
  content: "";
  position: absolute;
  inset-block-start: var(--agh-space-8);
  inset-inline-start: 0;
  inline-size: var(--agh-space-12);
  block-size: var(--agh-space-12);
  border: var(--agh-border-width-default) solid var(--agh-connector-color);
  border-radius: 50%;
  background: var(--agh-color-white);
  transition:
    background-color var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default);
}

.agh-pipeline__stage:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: calc(
    var(--agh-space-8) + (var(--agh-space-12) / 2)
  );
  inset-inline-start: var(--agh-space-12);
  inline-size: calc(100% + var(--agh-pipeline-gap));
  block-size: var(--agh-connector-width-min);
  background: var(--agh-connector-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.agh-pipeline__stage[aria-current="step"]::before {
  background: var(--agh-color-brand-primary);
  box-shadow: 0 0 0 var(--agh-space-4) var(--agh-color-pastel-peach);
}

.agh-pipeline__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-max);
  line-height: var(--agh-type-meta-line-height);
}

.agh-pipeline__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-pipeline__copy {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  text-wrap: pretty;
}


/* ========================================================================== 
   06. OPERATIONAL FLOW
   ========================================================================== */

.agh-flow {
  --agh-flow-columns: 4;
  --agh-flow-gap: var(--agh-space-24);
  --agh-flow-card-background: var(--agh-color-warm-white);
  --agh-flow-card-border: var(--agh-color-border);

  min-inline-size: 0;
}

.agh-flow--3 {
  --agh-flow-columns: 3;
}

.agh-flow--4 {
  --agh-flow-columns: 4;
}

.agh-flow--5 {
  --agh-flow-columns: 5;
}

.agh-flow--white {
  --agh-flow-card-background: var(--agh-color-white);
}

.agh-flow--peach {
  --agh-flow-card-background: var(--agh-color-pastel-peach);
}

.agh-flow--ice {
  --agh-flow-card-background: var(--agh-color-pastel-ice-blue);
}

.agh-flow--lavender {
  --agh-flow-card-background: var(--agh-color-pastel-lavender);
}

.agh-flow--sage {
  --agh-flow-card-background: var(--agh-color-pastel-sage);
}

.agh-flow__list {
  display: grid;
  grid-template-columns: repeat(
    var(--agh-flow-columns),
    minmax(0, 1fr)
  );
  gap: var(--agh-flow-gap);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-flow__item {
  position: relative;
  display: flex;
  min-block-size: 100%;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  border: var(--agh-border-width-default) solid var(--agh-flow-card-border);
  border-radius: var(--agh-radius-card);
  background: var(--agh-flow-card-background);
  box-shadow: var(--agh-shadow-ui);
  transform: translateZ(0);
  transition:
    transform var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 100%;
  inline-size: var(--agh-flow-gap);
  block-size: var(--agh-connector-width-min);
  background: var(--agh-connector-color);
  transform: translateY(-50%);
  pointer-events: none;
}

.agh-flow__marker {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-small);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
  transition:
    color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default);
}

.agh-flow__marker > .agh-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
}

.agh-flow__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-flow__copy {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  text-wrap: pretty;
}

.agh-flow__item[aria-current="step"] {
  border-color: var(--agh-color-brand-primary-border);
  background: var(--agh-color-brand-primary-soft);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .agh-flow__item:hover {
    border-color: var(--agh-card-hover-border-color);
    background: var(--agh-card-hover-background);
    box-shadow: var(--agh-shadow-card-hover);
    transform:
      translateY(calc(var(--agh-card-hover-translate-max) * -1))
      scale(var(--agh-card-hover-scale));
  }

  .agh-flow__item:hover .agh-flow__marker {
    color: var(--agh-color-text-primary);
    background: rgba(255, 255, 255, 0.72);
  }
}


/* ========================================================================== 
   07. PROCESS STEP
   ========================================================================== */

.agh-process-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--agh-space-16);
  min-inline-size: 0;
}

.agh-process-step__marker {
  display: inline-flex;
  inline-size: var(--agh-icon-container-card);
  block-size: var(--agh-icon-container-card);
  align-items: center;
  justify-content: center;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-icon-container-card);
  color: var(--agh-color-text-primary);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: 1;
}

.agh-process-step__body {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
  padding-block-start: var(--agh-space-4);
}

.agh-process-step__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-process-step__copy {
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}


/* ========================================================================== 
   08. CONNECTOR UTILITIES
   ========================================================================== */

/**
 * Connectors communicate real sequence, relationship, or workflow. They are
 * intentionally functional and should not be added as unrelated decoration.
 */
.agh-connector {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: var(--agh-connector-width-min);
  background: var(--agh-connector-color);
}

.agh-connector--dotted {
  block-size: 0;
  border-block-start:
    var(--agh-connector-width-min)
    dotted
    var(--agh-connector-color);
  background: transparent;
}

.agh-connector__node {
  position: absolute;
  inset-block-start: 50%;
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  border-radius: 50%;
  background: var(--agh-connector-color);
  transform: translateY(-50%);
}

.agh-connector__node--start {
  inset-inline-start: 0;
}

.agh-connector__node--center {
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.agh-connector__node--end {
  inset-inline-end: 0;
}


/* ========================================================================== 
   09. PROCESS PANEL
   ========================================================================== */

.agh-process-panel {
  --agh-process-panel-background: var(--agh-color-background-alt);
  --agh-process-panel-border: var(--agh-color-border);

  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-32);
  padding: var(--agh-space-48);
  border: var(--agh-border-width-default) solid var(--agh-process-panel-border);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-process-panel-background);
  box-shadow: var(--agh-shadow-ui);
}

.agh-process-panel--white {
  --agh-process-panel-background: var(--agh-color-white);
}

.agh-process-panel--peach {
  --agh-process-panel-background: var(--agh-color-pastel-peach);
}

.agh-process-panel--ice {
  --agh-process-panel-background: var(--agh-color-pastel-ice-blue);
}

.agh-process-panel--lavender {
  --agh-process-panel-background: var(--agh-color-pastel-lavender);
}

.agh-process-panel--sage {
  --agh-process-panel-background: var(--agh-color-pastel-sage);
}

.agh-process-panel__header {
  display: flex;
  min-inline-size: 0;
  align-items: end;
  justify-content: space-between;
  gap: var(--agh-space-24);
}

.agh-process-panel__heading {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
}

.agh-process-panel__title {
  max-inline-size: var(--agh-measure-h2-max);
  color: var(--agh-color-text-primary);
  text-wrap: balance;
}

.agh-process-panel__copy {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  text-wrap: pretty;
}


/* ========================================================================== 
   10. WIDE PROCESS / WORKFLOW VISUAL STAGE
   ========================================================================== */

/**
 * Process imagery is usually a workflow, timeline, dashboard or UI surface.
 * The safe default is therefore CONTAIN rather than COVER so labels, arrows,
 * charts and interface details are not cropped. Photography can opt into the
 * --photo modifier when a full-bleed crop is intentional.
 */
.agh-process-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  overflow: hidden;
  padding: clamp(
    var(--agh-visual-stage-padding-mobile),
    2vw,
    var(--agh-visual-stage-padding-desktop)
  );
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-visual-stage);
  background: var(--agh-color-surface-system-stage);
  box-shadow: var(--agh-shadow-card);
  isolation: isolate;
}

.agh-process-visual--wide {
  aspect-ratio: var(--agh-ratio-process-wide);
}

.agh-process-visual--standard {
  aspect-ratio: var(--agh-ratio-process);
}

.agh-process-visual--workflow {
  aspect-ratio: var(--agh-ratio-workflow-showcase);
}

.agh-process-visual--dashboard {
  aspect-ratio: var(--agh-ratio-dashboard-showcase);
}

.agh-process-visual--intrinsic {
  aspect-ratio: auto;
}

.agh-process-visual > :where(img, picture, video),
.agh-process-visual > picture > img {
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.agh-process-visual > picture {
  display: block;
  inline-size: 100%;
}

.agh-process-visual--intrinsic > :where(img, picture, video),
.agh-process-visual--intrinsic > picture > img {
  block-size: auto;
  max-block-size: none;
}

.agh-process-visual--photo {
  padding: 0;
  background: var(--agh-color-soft-neutral);
}

.agh-process-visual--photo > :where(img, picture, video),
.agh-process-visual--photo > picture > img {
  block-size: 100%;
  object-fit: cover;
}

.agh-process-visual--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-process-visual--ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-process-visual--lavender {
  background: var(--agh-color-pastel-lavender);
}

.agh-process-visual--sage {
  background: var(--agh-color-pastel-sage);
}


/* ========================================================================== 
   11. MOTION / PROGRESSIVE REVEAL HOOKS
   ========================================================================== */

/**
 * Structural reveal classes remain compatible with agh-app.js. Their default
 * state is visible, so content remains usable when JavaScript is unavailable.
 */
.agh-process[data-reveal="true"] .agh-process__item,
.agh-workflow[data-reveal="true"] .agh-workflow__step,
.agh-pipeline[data-reveal="true"] .agh-pipeline__stage,
.agh-flow[data-reveal="true"] .agh-flow__item {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--agh-duration-page-reveal-min) var(--agh-easing-default),
    transform var(--agh-duration-page-reveal-min) var(--agh-easing-default);
}

.agh-process[data-reveal="true"][data-state="pending"] .agh-process__item,
.agh-workflow[data-reveal="true"][data-state="pending"] .agh-workflow__step,
.agh-pipeline[data-reveal="true"][data-state="pending"] .agh-pipeline__stage,
.agh-flow[data-reveal="true"][data-state="pending"] .agh-flow__item {
  opacity: 0;
  transform: translateY(var(--agh-space-8));
}


/* ========================================================================== 
   12. RESPONSIVE / ACCESSIBILITY RESPONSIBILITY HOOKS
   ========================================================================== */

/**
 * agh-responsive.css owns the horizontal -> vertical recomposition for
 * tablet/mobile and preserves connector meaning in stacked layouts.
 * agh-accessibility.css owns the final global reduced-motion overrides.
 *
 * This file keeps every Version 1.0 class contract intact so existing Page
 * Snippets and the current responsive selectors continue to work.
 */
.agh-process,
.agh-workflow,
.agh-pipeline,
.agh-flow,
.agh-process-step,
.agh-process-panel,
.agh-process-visual {
  min-inline-size: 0;
}

/**
 * AGH Teams
 * File: agh-dashboard.css
 * Purpose: Production light-first dashboard, management-visibility, KPI,
 *          status, task, schedule, attendance, reporting, progress, table,
 *          data-visualisation and public-site dashboard showcase surfaces.
 *          This rebuild preserves the existing dashboard DOM contract while
 *          adding the approved premium card motion, orange interaction,
 *          stronger pastel hierarchy and information-safe visual treatment.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css,
 *             agh-components.css, agh-navigation.css, agh-content.css,
 *             agh-process.css
 * Used by: AGH Workforce Management Platform, Data/Reporting & Dashboards,
 *          Recruitment Support, Project Management Support, Remote
 *          Coordinator, Home Care Coordination & Rostering, Sales Support,
 *          Home page dashboard previews, and other approved UI previews.
 * Version: 2.0
 */

/* ========================================================================== 
   01. DASHBOARD FRAME
   ========================================================================== */

.agh-dashboard-frame {
  --agh-dashboard-frame-padding: var(--agh-space-24);
  --agh-dashboard-module-gap: var(--agh-space-16);
  --agh-dashboard-frame-background: var(--agh-color-background-alt);
  --agh-dashboard-topbar-background: var(--agh-color-white);

  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-dashboard-frame-background);
  box-shadow: var(--agh-shadow-card);
}

.agh-dashboard-frame--white {
  --agh-dashboard-frame-background: var(--agh-color-white);
}

.agh-dashboard-frame--warm {
  --agh-dashboard-frame-background: var(--agh-color-warm-white);
}

.agh-dashboard-frame--peach {
  --agh-dashboard-frame-background: var(--agh-color-pastel-peach);
}

.agh-dashboard-frame--ice {
  --agh-dashboard-frame-background: var(--agh-color-pastel-ice-blue);
}

.agh-dashboard-frame--lavender {
  --agh-dashboard-frame-background: var(--agh-color-pastel-lavender);
}

.agh-dashboard-frame--sage {
  --agh-dashboard-frame-background: var(--agh-color-pastel-sage);
}

.agh-dashboard-frame__topbar {
  display: flex;
  min-block-size: var(--agh-space-64);
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-16);
  padding-inline: var(--agh-dashboard-frame-padding);
  border-block-end: var(--agh-border-default);
  background: var(--agh-dashboard-topbar-background);
}

.agh-dashboard-frame__identity {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--agh-space-12);
}

.agh-dashboard-frame__mark {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-small);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-pastel-peach);
}

.agh-dashboard-frame__mark > .agh-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
}

.agh-dashboard-frame__title-group {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-4);
}

.agh-dashboard-frame__title {
  overflow: hidden;
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agh-dashboard-frame__subtitle {
  overflow: hidden;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agh-dashboard-frame__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--agh-space-8);
}

.agh-dashboard-frame__action {
  display: inline-flex;
  inline-size: var(--agh-control-touch-min);
  block-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-control-small);
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
  transition:
    color var(--agh-duration-micro-min) var(--agh-easing-default),
    background-color var(--agh-duration-micro-min) var(--agh-easing-default),
    border-color var(--agh-duration-micro-min) var(--agh-easing-default),
    box-shadow var(--agh-duration-micro-min) var(--agh-easing-default),
    transform var(--agh-duration-micro-min) var(--agh-easing-default);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .agh-dashboard-frame__action:hover:not(:disabled, [aria-disabled="true"]) {
    color: var(--agh-color-text-primary);
    background: var(--agh-color-brand-primary-soft);
    border-color: var(--agh-card-hover-border-color);
    box-shadow: var(--agh-shadow-card);
    transform: translateY(-2px);
  }
}

.agh-dashboard-frame__body {
  min-inline-size: 0;
  padding: var(--agh-dashboard-frame-padding);
}

.agh-dashboard-frame__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--agh-dashboard-module-gap);
  min-inline-size: 0;
}

.agh-dashboard-frame__grid > * {
  min-inline-size: 0;
}


/* ========================================================================== 
   02. DASHBOARD MODULE
   ========================================================================== */

.agh-dashboard-module {
  --agh-dashboard-module-background: var(--agh-color-white);

  position: relative;
  display: flex;
  min-block-size: 100%;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
  padding: calc(var(--agh-space-16) + var(--agh-space-4));
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-dashboard-max);
  background: var(--agh-dashboard-module-background);
  box-shadow: var(--agh-shadow-ui);
  transition:
    transform var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default);
}

.agh-dashboard-module--compact {
  padding: var(--agh-space-16);
  border-radius: var(--agh-radius-dashboard-min);
}

.agh-dashboard-module--muted,
.agh-dashboard-module--warm {
  --agh-dashboard-module-background: var(--agh-color-background-alt);
}

.agh-dashboard-module--peach {
  --agh-dashboard-module-background: var(--agh-color-pastel-peach);
}

.agh-dashboard-module--ice {
  --agh-dashboard-module-background: var(--agh-color-pastel-ice-blue);
}

.agh-dashboard-module--lavender {
  --agh-dashboard-module-background: var(--agh-color-pastel-lavender);
}

.agh-dashboard-module--sage {
  --agh-dashboard-module-background: var(--agh-color-pastel-sage);
}

.agh-dashboard-module--static {
  transition: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .agh-dashboard-module:not(.agh-dashboard-module--static):hover {
    border-color: var(--agh-card-hover-border-color);
    background: var(--agh-card-hover-background);
    box-shadow: var(--agh-shadow-card-hover);
    transform:
      translateY(calc(var(--agh-card-hover-translate-max) * -1))
      scale(var(--agh-card-hover-scale));
  }
}

.agh-dashboard-module__header {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--agh-space-16);
}

.agh-dashboard-module__heading {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-4);
}

.agh-dashboard-module__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-line-height);
}

.agh-dashboard-module__meta {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}

.agh-dashboard-module__body {
  min-inline-size: 0;
}

.agh-dashboard-module__footer {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-12);
  margin-block-start: auto;
  padding-block-start: var(--agh-space-12);
  border-block-start: var(--agh-border-default);
}


/* ========================================================================== 
   03. DASHBOARD GRID SPANS
   ========================================================================== */

.agh-dashboard-span-3 {
  grid-column: span 3;
}

.agh-dashboard-span-4 {
  grid-column: span 4;
}

.agh-dashboard-span-5 {
  grid-column: span 5;
}

.agh-dashboard-span-6 {
  grid-column: span 6;
}

.agh-dashboard-span-7 {
  grid-column: span 7;
}

.agh-dashboard-span-8 {
  grid-column: span 8;
}

.agh-dashboard-span-9 {
  grid-column: span 9;
}

.agh-dashboard-span-12,
.agh-dashboard-span-full {
  grid-column: 1 / -1;
}


/* ========================================================================== 
   04. KPI / METRIC CARDS
   ========================================================================== */

/**
 * Values shown inside KPI cards must come from approved real or explicitly
 * illustrative content. This CSS never supplies, calculates, or implies data.
 */
.agh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--agh-space-16);
  min-inline-size: 0;
}

.agh-kpi-card {
  --agh-kpi-card-background: var(--agh-color-white);

  position: relative;
  display: flex;
  min-block-size: 100%;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: calc(var(--agh-space-16) + var(--agh-space-4));
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-dashboard-min);
  background: var(--agh-kpi-card-background);
  box-shadow: var(--agh-shadow-ui);
  transition:
    transform var(--agh-duration-card) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default);
}

.agh-kpi-card--warm {
  --agh-kpi-card-background: var(--agh-color-warm-white);
}

.agh-kpi-card--peach {
  --agh-kpi-card-background: var(--agh-color-pastel-peach);
}

.agh-kpi-card--ice {
  --agh-kpi-card-background: var(--agh-color-pastel-ice-blue);
}

.agh-kpi-card--lavender {
  --agh-kpi-card-background: var(--agh-color-pastel-lavender);
}

.agh-kpi-card--sage {
  --agh-kpi-card-background: var(--agh-color-pastel-sage);
}

.agh-kpi-card--static {
  transition: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .agh-kpi-card:not(.agh-kpi-card--static):hover {
    border-color: var(--agh-card-hover-border-color);
    background: var(--agh-card-hover-background);
    box-shadow: var(--agh-shadow-card-hover);
    transform:
      translateY(calc(var(--agh-card-hover-translate-max) * -1))
      scale(var(--agh-card-hover-scale));
  }
}

.agh-kpi-card__header {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-12);
}

.agh-kpi-card__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-max);
  line-height: var(--agh-type-meta-line-height);
}

.agh-kpi-card__icon {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-small);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-pastel-peach);
  transition:
    color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default),
    transform var(--agh-duration-card) var(--agh-easing-default);
}

.agh-kpi-card--ice .agh-kpi-card__icon {
  color: var(--agh-color-functional-blue);
  background: var(--agh-color-white);
}

.agh-kpi-card--lavender .agh-kpi-card__icon {
  color: var(--agh-color-functional-lavender);
  background: var(--agh-color-white);
}

.agh-kpi-card--sage .agh-kpi-card__icon {
  color: var(--agh-color-functional-green);
  background: var(--agh-color-white);
}

.agh-kpi-card__icon > .agh-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .agh-kpi-card:not(.agh-kpi-card--static):hover .agh-kpi-card__icon {
    color: var(--agh-color-white);
    background: var(--agh-color-brand-primary);
    transform: scale(1.04);
  }
}

.agh-kpi-card__value {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h3-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-h3-line-height);
  letter-spacing: var(--agh-type-h3-letter-spacing);
  font-variant-numeric: tabular-nums;
}

.agh-kpi-card__context {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}


/* ========================================================================== 
   05. STATUS COMPONENT
   ========================================================================== */

/**
 * Status must always be represented by icon + text + colour in markup.
 * Colour alone is never sufficient.
 */
.agh-status {
  --agh-status-color: var(--agh-color-state-info);
  --agh-status-background: var(--agh-color-pastel-ice-blue);

  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  max-inline-size: 100%;
  align-items: center;
  gap: var(--agh-space-8);
  padding-block: var(--agh-space-8);
  padding-inline: var(--agh-space-12);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-pill);
  color: var(--agh-color-text-primary);
  background: var(--agh-status-background);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-status--success {
  --agh-status-color: var(--agh-color-state-success);
  --agh-status-background: var(--agh-color-pastel-sage);
}

.agh-status--warning {
  --agh-status-color: var(--agh-color-state-warning);
  --agh-status-background: var(--agh-color-warm-white);
}

.agh-status--error {
  --agh-status-color: var(--agh-color-state-error);
  --agh-status-background: var(--agh-color-pastel-peach);
}

.agh-status--info {
  --agh-status-color: var(--agh-color-state-info);
  --agh-status-background: var(--agh-color-pastel-ice-blue);
}

.agh-status__icon {
  inline-size: var(--agh-icon-size-small-min);
  block-size: var(--agh-icon-size-small-min);
  flex: 0 0 auto;
  color: var(--agh-status-color);
}

.agh-status__text {
  min-inline-size: 0;
  color: var(--agh-color-text-primary);
}


/* ========================================================================== 
   06. DASHBOARD LIST / ACTIVITY ROWS
   ========================================================================== */

.agh-dashboard-list {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-dashboard-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--agh-space-12);
  min-inline-size: 0;
  padding-block: var(--agh-space-12);
  border-block-end: var(--agh-border-default);
}

.agh-dashboard-list__item:last-child {
  border-block-end: 0;
}

.agh-dashboard-list__icon {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-small);
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-soft-neutral);
}

.agh-dashboard-list__icon > .agh-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
}

.agh-dashboard-list__content {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-4);
}

.agh-dashboard-list__title {
  overflow: hidden;
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-small-line-height);
  text-overflow: ellipsis;
}

.agh-dashboard-list__meta {
  overflow: hidden;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
  text-overflow: ellipsis;
}

.agh-dashboard-list__aside {
  min-inline-size: 0;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-max);
  line-height: var(--agh-type-meta-line-height);
  text-align: end;
}


/* ========================================================================== 
   07. TASK / OPEN ACTION ROWS
   ========================================================================== */

.agh-task-list {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--agh-space-12);
  min-inline-size: 0;
  padding-block: var(--agh-space-12);
  border-block-end: var(--agh-border-default);
}

.agh-task-row:last-child {
  border-block-end: 0;
}

.agh-task-row__marker {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  align-items: center;
  justify-content: center;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-icon-container-small);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-white);
}

.agh-task-row__marker > .agh-icon {
  inline-size: var(--agh-icon-size-small-min);
  block-size: var(--agh-icon-size-small-min);
}

.agh-task-row__content {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-4);
  padding-block-start: var(--agh-space-4);
}

.agh-task-row__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-task-row__meta {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}

.agh-task-row__status {
  padding-block-start: var(--agh-space-4);
}


/* ========================================================================== 
   08. SCHEDULE / ATTENDANCE ROWS
   ========================================================================== */

.agh-schedule-list,
.agh-attendance-list {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-schedule-row,
.agh-attendance-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--agh-space-16);
  min-inline-size: 0;
  padding-block: var(--agh-space-12);
  border-block-end: var(--agh-border-default);
}

.agh-schedule-row:last-child,
.agh-attendance-row:last-child {
  border-block-end: 0;
}

.agh-schedule-row__time,
.agh-attendance-row__time {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-meta-line-height);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.agh-schedule-row__content,
.agh-attendance-row__content {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-4);
}

.agh-schedule-row__title,
.agh-attendance-row__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-schedule-row__meta,
.agh-attendance-row__meta {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  line-height: var(--agh-type-meta-line-height);
}


/* ========================================================================== 
   09. NATIVE PROGRESS
   ========================================================================== */

.agh-progress {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
}

.agh-progress__header {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--agh-space-12);
}

.agh-progress__label,
.agh-progress__value {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-max);
  line-height: var(--agh-type-meta-line-height);
}

.agh-progress__value {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.agh-progress__bar {
  inline-size: 100%;
  block-size: var(--agh-space-8);
  overflow: hidden;
  border: 0;
  border-radius: var(--agh-radius-pill);
  background: var(--agh-color-soft-neutral);
  appearance: none;
}

.agh-progress__bar::-webkit-progress-bar {
  border-radius: var(--agh-radius-pill);
  background: var(--agh-color-soft-neutral);
}

.agh-progress__bar::-webkit-progress-value {
  border-radius: var(--agh-radius-pill);
  background: var(--agh-color-brand-primary);
}

.agh-progress__bar::-moz-progress-bar {
  border-radius: var(--agh-radius-pill);
  background: var(--agh-color-brand-primary);
}


/* ========================================================================== 
   10. DATA VISUALISATION FRAME
   ========================================================================== */

/**
 * The frame styles approved chart/report surfaces only. Actual values, chart
 * geometry, labels, and data must come from real or explicitly illustrative
 * page content; this stylesheet does not fabricate data.
 *
 * Raster dashboard/report screenshots preserve their complete interface with
 * object-fit: contain. SVG and canvas surfaces remain available for genuine
 * chart/report rendering and are not treated as photography-style crops.
 */
.agh-data-visual {
  --agh-data-visual-background: var(--agh-color-white);

  display: flex;
  min-block-size: 240px;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
  padding: calc(var(--agh-space-16) + var(--agh-space-4));
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-dashboard-min);
  background: var(--agh-data-visual-background);
  box-shadow: var(--agh-shadow-ui);
}

.agh-data-visual--warm {
  --agh-data-visual-background: var(--agh-color-warm-white);
}

.agh-data-visual--peach {
  --agh-data-visual-background: var(--agh-color-pastel-peach);
}

.agh-data-visual--ice {
  --agh-data-visual-background: var(--agh-color-pastel-ice-blue);
}

.agh-data-visual--lavender {
  --agh-data-visual-background: var(--agh-color-pastel-lavender);
}

.agh-data-visual--sage {
  --agh-data-visual-background: var(--agh-color-pastel-sage);
}

.agh-data-visual__header {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--agh-space-16);
}

.agh-data-visual__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-line-height);
}

.agh-data-visual__meta {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}

.agh-data-visual__canvas {
  position: relative;
  display: flex;
  min-block-size: 160px;
  min-inline-size: 0;
  flex: 1 1 auto;
  align-items: stretch;
  overflow: hidden;
  border-block-end: var(--agh-border-default);
  background-color: var(--agh-color-white);
  background-image:
    linear-gradient(
      to bottom,
      transparent calc(25% - 0.5px),
      var(--agh-color-border) 25%,
      transparent calc(25% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(50% - 0.5px),
      var(--agh-color-border) 50%,
      transparent calc(50% + 0.5px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(75% - 0.5px),
      var(--agh-color-border) 75%,
      transparent calc(75% + 0.5px)
    );
}

.agh-data-visual__canvas > :where(svg, canvas) {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
}

.agh-data-visual__canvas > :where(img, picture) {
  align-self: center;
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
}

.agh-data-visual__canvas > img,
.agh-data-visual__canvas > picture > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.agh-data-visual__canvas--intrinsic {
  min-block-size: 0;
  align-items: center;
  border-block-end: 0;
  background: var(--agh-color-white);
}

.agh-data-visual__canvas--intrinsic > img,
.agh-data-visual__canvas--intrinsic > picture > img {
  block-size: auto;
  max-block-size: none;
}

.agh-data-visual__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-12) var(--agh-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-data-visual__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--agh-space-8);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  line-height: var(--agh-type-meta-line-height);
}

.agh-data-visual__legend-marker {
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--agh-color-brand-primary);
}

.agh-data-visual__legend-marker--blue {
  background: var(--agh-color-functional-blue);
}

.agh-data-visual__legend-marker--lavender {
  background: var(--agh-color-functional-lavender);
}

.agh-data-visual__legend-marker--green {
  background: var(--agh-color-functional-green);
}


/* ========================================================================== 
   11. DATA TABLE
   ========================================================================== */

.agh-data-table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-dashboard-min);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
  -webkit-overflow-scrolling: touch;
}

.agh-data-table {
  inline-size: 100%;
  min-inline-size: 680px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-data-table__caption {
  padding: var(--agh-space-16) calc(var(--agh-space-16) + var(--agh-space-4));
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
  text-align: start;
}

.agh-data-table__head {
  background: var(--agh-color-soft-neutral);
}

.agh-data-table__heading,
.agh-data-table__cell {
  padding: var(--agh-space-16) calc(var(--agh-space-16) + var(--agh-space-4));
  border-block-end: var(--agh-border-default);
  text-align: start;
  vertical-align: middle;
}

.agh-data-table__heading {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
  white-space: nowrap;
}

.agh-data-table__cell {
  color: var(--agh-color-text-secondary);
}

.agh-data-table__row:last-child .agh-data-table__cell {
  border-block-end: 0;
}

.agh-data-table__cell--strong {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-data-table__cell--numeric,
.agh-data-table__heading--numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}


/* ========================================================================== 
   12. DASHBOARD FILTER / SEGMENT CONTROL
   ========================================================================== */

/**
 * These controls style already-confirmed filters or view selectors only.
 * They do not introduce filtering functionality by themselves.
 */
.agh-dashboard-filter {
  display: flex;
  min-inline-size: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-8);
}

.agh-dashboard-filter__control {
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: center;
  padding-block: var(--agh-space-8);
  padding-inline: var(--agh-space-12);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-control-small);
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-white);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-meta-line-height);
  transition:
    color var(--agh-duration-micro-min) var(--agh-easing-default),
    background-color var(--agh-duration-micro-min) var(--agh-easing-default),
    border-color var(--agh-duration-micro-min) var(--agh-easing-default),
    box-shadow var(--agh-duration-micro-min) var(--agh-easing-default),
    transform var(--agh-duration-micro-min) var(--agh-easing-default);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .agh-dashboard-filter__control:hover:not(:disabled, [aria-disabled="true"]) {
    color: var(--agh-color-text-primary);
    background: var(--agh-color-brand-primary-soft);
    border-color: var(--agh-card-hover-border-color);
    box-shadow: var(--agh-shadow-ui);
    transform: translateY(-1px);
  }
}

.agh-dashboard-filter__control[aria-pressed="true"],
.agh-dashboard-filter__control[aria-current="true"] {
  color: var(--agh-color-text-primary);
  background: var(--agh-color-pastel-peach);
  border-color: var(--agh-color-brand-primary);
}


/* ========================================================================== 
   13. EMPTY / NO-DATA SURFACE
   ========================================================================== */

.agh-dashboard-empty {
  display: flex;
  min-block-size: 180px;
  min-inline-size: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--agh-space-12);
  padding: var(--agh-space-32);
  border-radius: var(--agh-radius-dashboard-min);
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-warm-white);
  text-align: center;
}

.agh-dashboard-empty__icon {
  display: inline-flex;
  inline-size: var(--agh-icon-container-feature);
  block-size: var(--agh-icon-container-feature);
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-feature);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-pastel-peach);
}

.agh-dashboard-empty__icon > .agh-icon {
  inline-size: var(--agh-icon-size-default);
  block-size: var(--agh-icon-size-default);
}

.agh-dashboard-empty__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

.agh-dashboard-empty__copy {
  max-inline-size: 44ch;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}


/* ========================================================================== 
   14. PUBLIC-SITE DASHBOARD PREVIEW / SHOWCASE
   ========================================================================== */

/**
 * Preview mode is for public website visuals. It keeps the interface readable
 * and editorial rather than trying to reproduce a dense application screen.
 *
 * The showcase helpers support the new image-led AGH system. Dashboard/UI
 * screenshots must remain information-safe and use contain rather than a
 * photography-style destructive crop.
 */
.agh-dashboard-preview {
  position: relative;
  min-inline-size: 0;
}

.agh-dashboard-preview .agh-dashboard-frame {
  box-shadow: var(--agh-shadow-feature);
}

.agh-dashboard-preview--contained {
  padding: var(--agh-visual-stage-padding-desktop);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-visual-stage);
  background: var(--agh-color-surface-visual-stage);
}

.agh-dashboard-preview--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-dashboard-preview--ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-dashboard-preview--lavender {
  background: var(--agh-color-pastel-lavender);
}

.agh-dashboard-preview--sage {
  background: var(--agh-color-pastel-sage);
}

.agh-dashboard-preview__media {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-image);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-card);
}

.agh-dashboard-preview__media--ratio {
  aspect-ratio: var(--agh-ratio-dashboard-showcase);
}

.agh-dashboard-preview__media > :where(img, picture, video),
.agh-dashboard-preview__media > picture > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
}

.agh-dashboard-preview__media--ratio > :where(img, picture, video),
.agh-dashboard-preview__media--ratio > picture > img {
  block-size: 100%;
}

.agh-dashboard-preview__note {
  margin-block-start: var(--agh-space-12);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}


/* ========================================================================== 
   15. MODULE VISIBILITY HOOKS
   ========================================================================== */

/**
 * Desktop may show the full approved composition. agh-responsive.css owns the
 * locked tablet/mobile reduction strategy and can hide lower-priority preview
 * modules or expose controlled horizontal regions without shrinking text to
 * unreadable sizes.
 */
.agh-dashboard-module[data-priority="high"] {
  order: -1;
}


/* ========================================================================== 
   16. MOTION HOOKS
   ========================================================================== */

/**
 * Dashboard entrance motion remains subtle and uses the existing global reveal
 * contract consumed by agh-app.js. Hover motion above is guarded by
 * prefers-reduced-motion: no-preference; agh-accessibility.css owns final
 * reduced-motion reinforcement for reveal states.
 */
.agh-dashboard-frame[data-reveal="true"] .agh-dashboard-module {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--agh-duration-page-reveal-min) var(--agh-easing-default),
    transform var(--agh-duration-page-reveal-min) var(--agh-easing-default),
    border-color var(--agh-duration-card) var(--agh-easing-default),
    background-color var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default);
}

.agh-dashboard-frame[data-reveal="true"][data-state="pending"] .agh-dashboard-module {
  opacity: 0;
  transform: translateY(var(--agh-space-8));
}


/* ========================================================================== 
   17. RESPONSIBILITY BOUNDARIES
   ========================================================================== */

/**
 * agh-responsive.css:
 * - reduces the KPI grid on compact desktop,
 * - converts the dashboard 12-column grid to 8 columns on tablet,
 * - converts dashboard modules to a readable single-column mobile system,
 * - enables controlled horizontal tables where required,
 * - prevents unreadably scaled desktop dashboards.
 *
 * agh-accessibility.css:
 * - owns global focus-visible and forced-colour reinforcement,
 * - neutralises non-essential reveal movement for reduced-motion users.
 *
 * agh-app.js:
 * - owns the existing approved dashboard reveal contract,
 * - may control approved filters/tabs only when corresponding functionality is
 *   genuinely present in markup,
 * - must not fabricate live data or real-time behaviour.
 *
 * Major approved dashboard/report image assets used by page snippets should
 * normally be composed with .agh-visual-stage--dashboard or the
 * .agh-dashboard-preview__media helpers above; do not crop information-heavy
 * dashboard UI as if it were photography.
 *
 * This file intentionally does not define or imply:
 * payroll, salary, tax, visa, immigration, GPS, geofencing, biometrics,
 * facial recognition, screen monitoring, keystroke monitoring, surveillance,
 * AI employee scoring, automated KPI generation, statutory leave calculation,
 * workforce forecasting, government integrations, or unconfirmed features.
 */
.agh-dashboard-frame,
.agh-dashboard-module,
.agh-kpi-grid,
.agh-kpi-card,
.agh-dashboard-list,
.agh-task-list,
.agh-schedule-list,
.agh-attendance-list,
.agh-progress,
.agh-data-visual,
.agh-data-table-wrap,
.agh-dashboard-filter,
.agh-dashboard-empty,
.agh-dashboard-preview,
.agh-dashboard-preview__media {
  min-inline-size: 0;
}

/**
 * AGH Teams
 * File: agh-forms.css
 * Purpose: Reusable accessible form presentation for Contact, Consultation,
 *          service enquiry, and other approved AGH public website forms.
 *          This rebuild preserves the existing form DOM/JS contract while
 *          aligning forms with the refreshed white-first, orange-led and
 *          pastel-supported AGH visual system.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css,
 *             agh-components.css, agh-navigation.css, agh-content.css,
 *             agh-process.css, agh-dashboard.css
 * Used by: Contact, Book a Consultation, and approved enquiry/form
 *          components across the AGH public website.
 * Version: 2.0
 */

/* ========================================================================== 
   01. FORM ROOT
   ========================================================================== */

.agh-form {
  --agh-form-control-border-color: var(--agh-color-border);
  --agh-form-control-border-hover: rgba(24, 24, 24, 0.30);
  --agh-form-control-background: var(--agh-color-white);
  --agh-form-control-text: var(--agh-color-text-primary);
  --agh-form-control-placeholder: var(--agh-color-text-secondary);
  --agh-form-control-focus-ring: var(--agh-color-brand-primary);

  inline-size: 100%;
  min-inline-size: 0;
  color: var(--agh-color-text-primary);
}

.agh-form__body {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-form-group-gap-max);
}

.agh-form__section {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-24);
}

.agh-form__section + .agh-form__section {
  padding-block-start: var(--agh-space-32);
  border-block-start: var(--agh-border-default);
}

.agh-form__section-header {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
}

.agh-form__section-title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h4-size);
  font-weight: var(--agh-type-h4-weight);
  line-height: var(--agh-type-h4-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
  text-wrap: balance;
}

.agh-form__section-copy {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
}


/* ========================================================================== 
   02. FORM LAYOUT
   ========================================================================== */

.agh-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--agh-form-field-gap);
  min-inline-size: 0;
}

.agh-form-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.agh-form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agh-form-grid__full {
  grid-column: 1 / -1;
}

.agh-form-grid > * {
  min-inline-size: 0;
}


/* ========================================================================== 
   03. FIELD
   ========================================================================== */

.agh-field {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
}

.agh-field__label-row {
  display: flex;
  min-inline-size: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--agh-space-12);
}

.agh-field__label {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-form-label-size);
  font-weight: var(--agh-type-form-label-weight);
  line-height: var(--agh-type-form-label-line-height);
}

.agh-field__requirement {
  flex: 0 0 auto;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}

.agh-field__requirement--required {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-medium);
}

.agh-field__requirement--optional {
  color: var(--agh-color-text-secondary);
}

.agh-field__help {
  max-inline-size: var(--agh-measure-long-form);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-field__error {
  display: none;
  align-items: flex-start;
  gap: var(--agh-space-8);
  color: var(--agh-color-state-error);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-field__error:not(:empty) {
  text-wrap: pretty;
}

.agh-field__error-icon {
  inline-size: var(--agh-icon-size-small-min);
  block-size: var(--agh-icon-size-small-min);
  flex: 0 0 auto;
  margin-block-start: 2px;
  color: currentColor;
}

.agh-field:has(
  .agh-input[aria-invalid="true"],
  .agh-select[aria-invalid="true"],
  .agh-textarea[aria-invalid="true"],
  .agh-choice__control[aria-invalid="true"]:not(:disabled)
) .agh-field__error {
  display: flex;
}


/* ========================================================================== 
   04. TEXT INPUTS
   ========================================================================== */

.agh-input,
.agh-select,
.agh-textarea {
  inline-size: 100%;
  min-inline-size: 0;
  border: var(--agh-border-width-default) solid
    var(--agh-form-control-border-color);
  border-radius: var(--agh-radius-input);
  color: var(--agh-form-control-text);
  background: var(--agh-form-control-background);
  font-size: var(--agh-type-form-input-size);
  font-weight: var(--agh-type-form-input-weight);
  line-height: var(--agh-type-form-input-line-height);
  box-shadow: var(--agh-shadow-ui);
  transition:
    border-color var(--agh-duration-micro-max) var(--agh-easing-default),
    box-shadow var(--agh-duration-micro-max) var(--agh-easing-default),
    background-color var(--agh-duration-micro-max) var(--agh-easing-default);
}

.agh-input,
.agh-select {
  min-block-size: var(--agh-control-input-height);
  padding-block: var(--agh-space-12);
  padding-inline: var(--agh-space-16);
}

.agh-textarea {
  min-block-size: var(--agh-control-textarea-min-height);
  padding: var(--agh-space-16);
  resize: vertical;
}

.agh-input::placeholder,
.agh-textarea::placeholder {
  color: var(--agh-form-control-placeholder);
  opacity: 0.74;
}

.agh-input:hover:not(:disabled, [readonly]),
.agh-select:hover:not(:disabled),
.agh-textarea:hover:not(:disabled, [readonly]) {
  border-color: var(--agh-form-control-border-hover);
  box-shadow: 0 0 0 3px var(--agh-color-brand-primary-soft);
}

.agh-input:focus,
.agh-select:focus,
.agh-textarea:focus {
  border-color: var(--agh-form-control-focus-ring);
  outline: var(--agh-border-width-default) solid var(--agh-form-control-focus-ring);
  outline-offset: 2px;
  box-shadow:
    0 0 0 3px var(--agh-color-brand-primary-soft),
    var(--agh-shadow-ui);
}

.agh-input[aria-invalid="true"],
.agh-select[aria-invalid="true"],
.agh-textarea[aria-invalid="true"] {
  border-color: var(--agh-color-state-error);
  background: linear-gradient(
    0deg,
    rgba(180, 35, 24, 0.025),
    rgba(180, 35, 24, 0.025)
  ), var(--agh-color-white);
}

.agh-input[aria-invalid="true"]:focus,
.agh-select[aria-invalid="true"]:focus,
.agh-textarea[aria-invalid="true"]:focus {
  outline-color: var(--agh-color-state-error);
  box-shadow:
    0 0 0 3px rgba(180, 35, 24, 0.08),
    var(--agh-shadow-ui);
}

.agh-input:disabled,
.agh-select:disabled,
.agh-textarea:disabled {
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-soft-neutral);
  border-color: var(--agh-color-border);
  box-shadow: none;
  opacity: 0.72;
}

.agh-input[readonly],
.agh-textarea[readonly] {
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-background-alt);
  box-shadow: none;
}


/* ========================================================================== 
   05. SELECT
   ========================================================================== */

.agh-field--select {
  position: relative;
}

.agh-field--select .agh-select {
  appearance: none;
  padding-inline-end: var(--agh-space-48);
}

.agh-field--select__control {
  position: relative;
}

.agh-field--select__control::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--agh-space-16);
  inset-block-start: 50%;
  inline-size: var(--agh-space-8);
  block-size: var(--agh-space-8);
  border-inline-end: var(--agh-border-width-default) solid
    var(--agh-color-text-secondary);
  border-block-end: var(--agh-border-width-default) solid
    var(--agh-color-text-secondary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.agh-field--select:has(.agh-select:focus) .agh-field--select__control::after {
  border-color: var(--agh-color-brand-primary-hover);
}

.agh-field--select:has(.agh-select:disabled)
  .agh-field--select__control::after {
  opacity: 0.5;
}


/* ========================================================================== 
   06. INPUT WITH PREFIX / SUFFIX
   ========================================================================== */

.agh-input-group {
  position: relative;
  display: flex;
  min-inline-size: 0;
  align-items: stretch;
}

.agh-input-group .agh-input {
  flex: 1 1 auto;
}

.agh-input-group__prefix,
.agh-input-group__suffix {
  display: inline-flex;
  min-inline-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: center;
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-background-alt);
  font-size: var(--agh-type-form-input-size);
  line-height: var(--agh-type-form-input-line-height);
  white-space: nowrap;
  transition:
    border-color var(--agh-duration-micro-max) var(--agh-easing-default),
    background-color var(--agh-duration-micro-max) var(--agh-easing-default);
}

.agh-input-group__prefix {
  padding-inline-start: var(--agh-space-16);
  padding-inline-end: var(--agh-space-12);
  border: var(--agh-border-width-default) solid
    var(--agh-form-control-border-color);
  border-inline-end: 0;
  border-radius:
    var(--agh-radius-input)
    0
    0
    var(--agh-radius-input);
}

.agh-input-group__suffix {
  padding-inline-start: var(--agh-space-12);
  padding-inline-end: var(--agh-space-16);
  border: var(--agh-border-width-default) solid
    var(--agh-form-control-border-color);
  border-inline-start: 0;
  border-radius:
    0
    var(--agh-radius-input)
    var(--agh-radius-input)
    0;
}

.agh-input-group:has(.agh-input:focus) :where(
  .agh-input-group__prefix,
  .agh-input-group__suffix
) {
  border-color: var(--agh-color-brand-primary);
  background: var(--agh-color-brand-primary-soft);
}

.agh-input-group:has(.agh-input-group__prefix) .agh-input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.agh-input-group:has(.agh-input-group__suffix) .agh-input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}


/* ========================================================================== 
   07. CHECKBOX & RADIO
   ========================================================================== */

.agh-choice-group {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
}

.agh-choice-group__legend {
  margin-block-end: var(--agh-space-8);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-form-label-size);
  font-weight: var(--agh-type-form-label-weight);
  line-height: var(--agh-type-form-label-line-height);
}

.agh-choice {
  display: grid;
  grid-template-columns: var(--agh-control-touch-min) minmax(0, 1fr);
  align-items: start;
  min-inline-size: 0;
  border-radius: var(--agh-radius-control-small);
  cursor: pointer;
}

.agh-choice__control-wrap {
  display: inline-flex;
  inline-size: var(--agh-control-touch-min);
  block-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: flex-start;
}

.agh-choice__control {
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  flex: 0 0 auto;
  border: var(--agh-border-width-default) solid var(--agh-color-border);
  accent-color: var(--agh-color-brand-primary-hover);
}

.agh-choice__control[aria-invalid="true"]:not(:disabled) {
  border-color: var(--agh-color-state-error);
  outline: calc(var(--agh-border-width-default) * 2) solid
    var(--agh-color-state-error);
  outline-offset: 2px;
}

.agh-choice:has(
  .agh-choice__control[aria-invalid="true"]:not(:disabled)
) .agh-choice__label {
  font-weight: var(--agh-font-weight-semibold);
}

.agh-choice__body {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-4);
  padding-block-start: var(--agh-space-12);
}

.agh-choice__label {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-form-input-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-form-input-line-height);
}

.agh-choice__description {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-choice:has(.agh-choice__control:disabled) {
  cursor: not-allowed;
  opacity: 0.65;
}


/* ========================================================================== 
   08. CHECKBOX CONSENT / ACKNOWLEDGEMENT ROW
   ========================================================================== */

/**
 * This component styles a consent/acknowledgement row only when such a field
 * is explicitly present in approved markup. It does not create, require, or
 * infer consent obligations.
 */
.agh-form-consent {
  padding-block-start: var(--agh-space-8);
}

.agh-form-consent .agh-choice__label {
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-regular);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-form-consent a {
  color: var(--agh-color-text-primary);
  text-decoration-color: var(--agh-color-brand-primary);
}


/* ========================================================================== 
   09. FORM FIELDSET / GROUP
   ========================================================================== */

.agh-fieldset {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
  margin: 0;
  padding: 0;
  border: 0;
}

.agh-fieldset__legend {
  margin-block-end: var(--agh-space-4);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

.agh-fieldset__description {
  margin-block-start: calc(var(--agh-space-8) * -1);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-fieldset:disabled {
  opacity: 0.72;
}


/* ========================================================================== 
   10. VALIDATION SUMMARY
   ========================================================================== */

.agh-form-summary {
  display: none;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  border: var(--agh-border-width-default) solid var(--agh-color-state-error);
  border-radius: var(--agh-radius-card);
  background: linear-gradient(
    0deg,
    rgba(180, 35, 24, 0.035),
    rgba(180, 35, 24, 0.035)
  ), var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
}

.agh-form-summary[data-state="error"] {
  display: flex;
}

.agh-form-summary__header {
  display: flex;
  align-items: flex-start;
  gap: var(--agh-space-12);
}

.agh-form-summary__icon {
  inline-size: var(--agh-icon-size-default);
  block-size: var(--agh-icon-size-default);
  flex: 0 0 auto;
  color: var(--agh-color-state-error);
}

.agh-form-summary__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

.agh-form-summary__list {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-8);
  margin: 0;
  padding-inline-start: var(--agh-space-24);
}

.agh-form-summary__link {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  text-decoration-color: var(--agh-color-state-error);
  text-underline-offset: 0.2em;
}


/* ========================================================================== 
   11. FORM STATUS / RESPONSE
   ========================================================================== */

/**
 * Response content is displayed only after the surrounding application layer
 * has genuinely confirmed its state. CSS never assumes submission success.
 */
.agh-form-status {
  --agh-form-status-color: var(--agh-color-state-info);
  --agh-form-status-background: var(--agh-color-pastel-ice-blue);
  --agh-form-status-border: rgba(53, 105, 168, 0.24);

  display: none;
  min-inline-size: 0;
  align-items: flex-start;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  border: var(--agh-border-width-default) solid var(--agh-form-status-border);
  border-radius: var(--agh-radius-card);
  background: var(--agh-form-status-background);
  box-shadow: var(--agh-shadow-ui);
}

.agh-form-status[data-state="success"] {
  --agh-form-status-color: var(--agh-color-state-success);
  --agh-form-status-background: var(--agh-color-pastel-sage);
  --agh-form-status-border: rgba(40, 122, 75, 0.24);

  display: flex;
}

.agh-form-status[data-state="error"] {
  --agh-form-status-color: var(--agh-color-state-error);
  --agh-form-status-background: var(--agh-color-pastel-peach);
  --agh-form-status-border: rgba(180, 35, 24, 0.22);

  display: flex;
}

.agh-form-status[data-state="warning"] {
  --agh-form-status-color: var(--agh-color-state-warning);
  --agh-form-status-background: var(--agh-color-warm-white);
  --agh-form-status-border: rgba(154, 98, 0, 0.24);

  display: flex;
}

.agh-form-status[data-state="info"] {
  display: flex;
}

.agh-form-status__icon {
  inline-size: var(--agh-icon-size-default);
  block-size: var(--agh-icon-size-default);
  flex: 0 0 auto;
  color: var(--agh-form-status-color);
}

.agh-form-status__body {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-4);
}

.agh-form-status__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-body-line-height);
}

.agh-form-status__copy {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}


/* ========================================================================== 
   12. FORM ACTIONS
   ========================================================================== */

.agh-form__actions {
  display: flex;
  min-inline-size: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-12);
  padding-block-start: var(--agh-space-8);
}

.agh-form__actions--between {
  justify-content: space-between;
}

.agh-form__actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-12);
}

.agh-form__submit-note {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-form__submit-note a {
  color: var(--agh-color-text-primary);
}


/* ========================================================================== 
   13. LOADING / BUSY STATE
   ========================================================================== */

.agh-form[aria-busy="true"] {
  cursor: progress;
}

.agh-form[aria-busy="true"] .agh-form__actions {
  opacity: 0.78;
}

.agh-form[aria-busy="true"] .agh-button[type="submit"] {
  pointer-events: none;
}

.agh-form__spinner {
  display: none;
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: agh-form-spin 700ms linear infinite;
}

.agh-form[aria-busy="true"] .agh-form__spinner {
  display: inline-block;
}

@keyframes agh-form-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ========================================================================== 
   14. MULTI-STEP CONSULTATION FORM SHELL
   ========================================================================== */

/**
 * The Consultation page uses a progressive two-stage experience when the
 * confirmed implementation requires requirement details followed by a meeting
 * selection step. This shell only presents those stages. It does not invent
 * a booking provider, availability, meeting technology, duration, reminders,
 * timezone logic, or confirmation mechanics.
 *
 * Existing DOM hooks are intentionally preserved so the current form runtime
 * can continue to operate until its separate Consultation migration rebuild.
 */
.agh-form-steps {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-32);
}

.agh-form-steps__progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--agh-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-form-steps__item {
  position: relative;
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: var(--agh-space-12);
  padding: var(--agh-space-12) var(--agh-space-16);
  border: var(--agh-border-default);
  border-block-end-width: 2px;
  border-radius: var(--agh-radius-control-small);
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-white);
  transition:
    border-color var(--agh-duration-micro-max) var(--agh-easing-default),
    background-color var(--agh-duration-micro-max) var(--agh-easing-default),
    box-shadow var(--agh-duration-micro-max) var(--agh-easing-default);
}

.agh-form-steps__item[aria-current="step"] {
  border-color: var(--agh-color-brand-primary);
  border-block-end-color: var(--agh-color-brand-primary-hover);
  background: var(--agh-color-pastel-peach);
  box-shadow: var(--agh-shadow-ui);
}

.agh-form-steps__marker {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-icon-container-small);
  color: var(--agh-color-text-secondary);
  background: var(--agh-color-white);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: 1;
}

.agh-form-steps__item[aria-current="step"] .agh-form-steps__marker {
  color: var(--agh-color-text-primary);
  background: var(--agh-color-white);
  border-color: var(--agh-color-brand-primary);
}

.agh-form-steps__label {
  min-inline-size: 0;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-form-label-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-form-label-line-height);
}

.agh-form-steps__item[aria-current="step"] .agh-form-steps__label {
  color: var(--agh-color-text-primary);
}

.agh-form-step {
  min-inline-size: 0;
}

.agh-form-step[hidden] {
  display: none;
}


/* ========================================================================== 
   15. CALENDAR / BOOKING HOST SHELL
   ========================================================================== */

/**
 * Architecture-neutral host for the approved Consultation booking stage.
 * It deliberately does not emulate or invent an actual booking tool.
 */
.agh-booking-host {
  min-block-size: 280px;
  min-inline-size: 0;
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background:
    linear-gradient(135deg, var(--agh-color-pastel-ice-blue), transparent 60%),
    var(--agh-color-warm-white);
  box-shadow: var(--agh-shadow-ui);
}

.agh-booking-host__placeholder {
  display: flex;
  min-block-size: 232px;
  min-inline-size: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--agh-space-12);
  color: var(--agh-color-text-secondary);
  text-align: center;
}

.agh-booking-host__icon {
  display: inline-flex;
  inline-size: var(--agh-icon-container-feature);
  block-size: var(--agh-icon-container-feature);
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-feature);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-white);
  border: var(--agh-border-brand-soft);
  box-shadow: var(--agh-shadow-ui);
}

.agh-booking-host__icon > .agh-icon {
  inline-size: var(--agh-icon-size-default);
  block-size: var(--agh-icon-size-default);
}

.agh-booking-host__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
  text-wrap: balance;
}

.agh-booking-host__copy {
  max-inline-size: 52ch;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}


/* ========================================================================== 
   16. FORM PANEL
   ========================================================================== */

.agh-form-panel {
  min-inline-size: 0;
  padding: var(--agh-space-48);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-card);
}

.agh-form-panel--quiet {
  box-shadow: var(--agh-shadow-ui);
}

.agh-form-panel--warm {
  background: var(--agh-color-warm-white);
}

.agh-form-panel--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-form-panel--ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-form-panel--lavender {
  background: var(--agh-color-pastel-lavender);
}

.agh-form-panel--sage {
  background: var(--agh-color-pastel-sage);
}

.agh-form-panel--accent {
  border-color: var(--agh-color-brand-primary-border);
  box-shadow: var(--agh-shadow-card);
}

.agh-form-panel__header {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  margin-block-end: var(--agh-space-32);
}

.agh-form-panel__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h3-size);
  font-weight: var(--agh-type-h3-weight);
  line-height: var(--agh-type-h3-line-height);
  letter-spacing: var(--agh-type-h3-letter-spacing);
  text-wrap: balance;
}

.agh-form-panel__copy {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
}


/* ========================================================================== 
   17. CONTACT / CONSULTATION LAYOUT SHELL
   ========================================================================== */

.agh-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: var(--agh-space-64);
  min-inline-size: 0;
}

.agh-form-layout__aside,
.agh-form-layout__main {
  min-inline-size: 0;
}

.agh-form-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-24);
}

.agh-form-layout__main {
  inline-size: 100%;
}


/* ========================================================================== 
   18. INLINE CONTACT DETAILS
   ========================================================================== */

.agh-form-contact-list {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-form-contact-list__item {
  display: grid;
  grid-template-columns: var(--agh-icon-container-small) minmax(0, 1fr);
  gap: var(--agh-space-12);
  min-inline-size: 0;
  padding-block: var(--agh-space-12);
  border-block-end: var(--agh-border-default);
}

.agh-form-contact-list__item:last-child {
  border-block-end: 0;
}

.agh-form-contact-list__icon {
  display: inline-flex;
  inline-size: var(--agh-icon-container-small);
  block-size: var(--agh-icon-container-small);
  align-items: center;
  justify-content: center;
  border-radius: var(--agh-radius-icon-container-small);
  color: var(--agh-color-brand-primary);
  background: var(--agh-color-pastel-peach);
  transition:
    color var(--agh-duration-micro-max) var(--agh-easing-default),
    background-color var(--agh-duration-micro-max) var(--agh-easing-default),
    transform var(--agh-duration-micro-max) var(--agh-easing-default);
}

.agh-form-contact-list__item:nth-child(4n + 2) .agh-form-contact-list__icon {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-form-contact-list__item:nth-child(4n + 3) .agh-form-contact-list__icon {
  background: var(--agh-color-pastel-lavender);
}

.agh-form-contact-list__item:nth-child(4n + 4) .agh-form-contact-list__icon {
  background: var(--agh-color-pastel-sage);
}

.agh-form-contact-list__icon > .agh-icon {
  inline-size: var(--agh-icon-size-small-max);
  block-size: var(--agh-icon-size-small-max);
}

.agh-form-contact-list__content {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-4);
}

.agh-form-contact-list__label {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-meta-line-height);
}

.agh-form-contact-list__value,
.agh-form-contact-list__link {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  overflow-wrap: anywhere;
}

.agh-form-contact-list__link {
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  text-decoration-color: var(--agh-color-brand-primary);
  text-underline-offset: 0.2em;
}

.agh-form-contact-list__link:hover {
  color: var(--agh-color-text-primary);
  text-decoration-thickness: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .agh-form-contact-list__item:has(.agh-form-contact-list__link:hover)
    .agh-form-contact-list__icon {
    color: var(--agh-color-text-primary);
    background: var(--agh-color-brand-primary-soft-strong);
    transform: translateY(-2px);
  }
}


/* ========================================================================== 
   19. FILE INPUT SHELL
   ========================================================================== */

/**
 * Included as a reusable style only if an approved future form contains a file
 * field. No current AGH form is assumed to contain one.
 */
.agh-file-control {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
  padding: var(--agh-space-24);
  border: var(--agh-border-width-default) dashed var(--agh-color-border);
  border-radius: var(--agh-radius-input);
  background: var(--agh-color-background-alt);
  transition:
    border-color var(--agh-duration-micro-max) var(--agh-easing-default),
    background-color var(--agh-duration-micro-max) var(--agh-easing-default);
}

.agh-file-control:focus-within {
  border-color: var(--agh-color-brand-primary);
  background: var(--agh-color-brand-primary-soft);
}

.agh-file-control__input {
  inline-size: 100%;
  max-inline-size: 100%;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-file-control__input::file-selector-button {
  min-block-size: var(--agh-control-touch-min);
  margin-inline-end: var(--agh-space-12);
  padding-inline: var(--agh-space-16);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-button);
  color: var(--agh-color-text-primary);
  background: var(--agh-color-white);
  font: inherit;
  font-weight: var(--agh-font-weight-semibold);
  cursor: pointer;
  transition:
    border-color var(--agh-duration-button) var(--agh-easing-default),
    background-color var(--agh-duration-button) var(--agh-easing-default);
}

.agh-file-control__input::file-selector-button:hover {
  border-color: var(--agh-color-brand-primary-border);
  background: var(--agh-color-brand-primary-soft);
}

.agh-file-control__help {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  line-height: var(--agh-type-meta-line-height);
}


/* ========================================================================== 
   20. AUTOFILL NORMALISATION
   ========================================================================== */

.agh-input:-webkit-autofill,
.agh-input:-webkit-autofill:hover,
.agh-input:-webkit-autofill:focus,
.agh-textarea:-webkit-autofill,
.agh-textarea:-webkit-autofill:hover,
.agh-textarea:-webkit-autofill:focus,
.agh-select:-webkit-autofill,
.agh-select:-webkit-autofill:hover,
.agh-select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--agh-color-text-primary);
  box-shadow: 0 0 0 1000px var(--agh-color-white) inset;
  transition: background-color 9999s ease-out;
}


/* ========================================================================== 
   21. RESPONSIBILITY BOUNDARIES
   ========================================================================== */

/**
 * agh-responsive.css owns:
 * - 2-column form grids -> 1 column,
 * - 3-column form grids -> 2 -> 1,
 * - Contact/Consultation split layout -> stacked layout,
 * - mobile-safe full-width action controls where appropriate.
 *
 * agh-accessibility.css owns:
 * - shared focus-visible treatment,
 * - reduced-motion suppression,
 * - high-contrast support where appropriate.
 *
 * agh-forms.js owns:
 * - client-side validation messaging,
 * - aria-invalid / aria-describedby updates,
 * - multi-step form transitions,
 * - busy-state management,
 * - defensive front-end form behaviour.
 *
 * This stylesheet intentionally does not define or imply:
 * API endpoints, server-side validation, form storage, email delivery,
 * CRM routing, anti-spam provider, CAPTCHA provider, analytics, consent
 * platform, booking provider, calendar provider, meeting provider,
 * meeting duration, availability hours, timezone behaviour, reminders,
 * confirmations, or any credentials/secrets.
 *
 * Required/optional form constraints belong in approved page markup and
 * server-side handling; CSS must not silently decide which fields are required.
 */
.agh-form,
.agh-form__body,
.agh-form__section,
.agh-form-grid,
.agh-field,
.agh-choice-group,
.agh-choice,
.agh-fieldset,
.agh-form-summary,
.agh-form-status,
.agh-form__actions,
.agh-form-steps,
.agh-form-step,
.agh-booking-host,
.agh-form-panel,
.agh-form-layout,
.agh-form-contact-list,
.agh-file-control {
  min-inline-size: 0;
}

/**
 * AGH Teams
 * File: agh-editorial.css
 * Purpose: Reusable editorial and long-form reading system for AGH Insights
 *          articles and quiet, text-first Legal pages.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css,
 *             agh-components.css, agh-navigation.css, agh-content.css,
 *             agh-process.css, agh-dashboard.css, agh-forms.css
 * Used by: Insights, Insight Article Template, Privacy Policy,
 *          Terms & Conditions, Cookie Policy, and approved long-form content.
 * Version: 2.0
 */

/* ========================================================================== 
   01. EDITORIAL ROOT
   ========================================================================== */

/**
 * Editorial type remains a deliberate extension of the single AGH Manrope
 * typography system. These values are scoped to long-form reading only and do
 * not introduce a second font family or unrelated site-wide type scale.
 */
.agh-article {
  --agh-editorial-article-h1-size: clamp(52px, 4.4vw, 60px);
  --agh-editorial-article-h1-line-height: 1.08;
  --agh-editorial-article-h2-size: 34px;
  --agh-editorial-article-h2-line-height: 42px;
  --agh-editorial-article-h3-size: 26px;
  --agh-editorial-article-h3-line-height: 34px;
  --agh-editorial-lead-size: 20px;
  --agh-editorial-lead-line-height: 32px;
  --agh-editorial-body-size: 17px;
  --agh-editorial-body-line-height: 30px;
  --agh-editorial-paragraph-gap: var(--agh-space-24);
  --agh-editorial-section-gap: var(--agh-space-64);

  min-inline-size: 0;
  color: var(--agh-color-text-primary);
  font-family: var(--agh-font-family-primary);
}

.agh-article__reading-column {
  inline-size: 100%;
  max-inline-size: var(--agh-container-reading-min);
  margin-inline: auto;
}


/* ========================================================================== 
   02. ARTICLE HEADER
   ========================================================================== */

.agh-article-header {
  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--agh-space-24);
  max-inline-size: var(--agh-container-reading-max);
  margin-inline: auto;
  margin-block-end: var(--agh-space-48);
}

.agh-article-header__category {
  display: inline-flex;
  align-items: center;
  gap: var(--agh-space-8);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-article-header__category::before {
  content: "";
  inline-size: var(--agh-space-24);
  block-size: var(--agh-connector-width-max);
  flex: 0 0 auto;
  border-radius: var(--agh-radius-pill);
  background: var(--agh-color-brand-primary);
}

.agh-article-header__title {
  max-inline-size: var(--agh-container-reading-max);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-editorial-article-h1-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-editorial-article-h1-line-height);
  letter-spacing: var(--agh-type-h1-letter-spacing);
  text-wrap: balance;
}

.agh-article-header__lead {
  max-inline-size: var(--agh-measure-supporting-copy-max);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-editorial-lead-size);
  font-weight: var(--agh-font-weight-regular);
  line-height: var(--agh-editorial-lead-line-height);
}

.agh-article-header__meta {
  display: flex;
  min-inline-size: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--agh-space-8) var(--agh-space-16);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}

.agh-article-header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--agh-space-8);
}

.agh-article-header__meta-item + .agh-article-header__meta-item::before {
  content: "";
  inline-size: var(--agh-space-4);
  block-size: var(--agh-space-4);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--agh-color-border);
}

/**
 * Optional quiet editorial header surface. Use only when the Article template
 * intentionally calls for a contained editorial stage; the default remains a
 * clean white-first reading header.
 */
.agh-article-header--surface {
  max-inline-size: var(--agh-container-primary);
  padding: clamp(var(--agh-space-32), 5vw, var(--agh-space-64));
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-warm-white);
}

.agh-article-header--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-article-header--ice {
  background: var(--agh-color-pastel-ice-blue);
}


/* ========================================================================== 
   03. ARTICLE FEATURED IMAGE — LOCKED 16:9
   ========================================================================== */

.agh-article-featured {
  inline-size: 100%;
  max-inline-size: var(--agh-container-primary);
  margin-inline: auto;
  margin-block-end: var(--agh-space-64);
}

.agh-article-featured__media {
  position: relative;
  aspect-ratio: var(--agh-ratio-editorial-stage);
  min-inline-size: 0;
  overflow: hidden;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-image);
  background: var(--agh-color-soft-neutral);
  box-shadow: var(--agh-shadow-ui);
}

.agh-article-featured__media > :where(img, picture, video) {
  inline-size: 100%;
  block-size: 100%;
}

.agh-article-featured__media img,
.agh-article-featured__media video {
  object-fit: cover;
  object-position: center;
}

/**
 * Meaningful UI, dashboard, report, workflow or diagram imagery must remain
 * fully visible rather than be photography-cropped.
 */
.agh-article-featured__media--contain {
  padding: var(--agh-visual-stage-padding-desktop);
  background: var(--agh-color-surface-system-stage);
}

.agh-article-featured__media--contain img,
.agh-article-featured__media--contain video {
  object-fit: contain;
}

.agh-article-featured__caption {
  max-inline-size: var(--agh-container-reading-min);
  margin-inline: auto;
  margin-block-start: var(--agh-space-12);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}


/* ========================================================================== 
   04. ARTICLE BODY FLOW
   ========================================================================== */

.agh-article-body {
  inline-size: 100%;
  max-inline-size: var(--agh-container-reading-min);
  margin-inline: auto;
  color: var(--agh-color-text-primary);
  font-size: var(--agh-editorial-body-size);
  font-weight: var(--agh-font-weight-regular);
  line-height: var(--agh-editorial-body-line-height);
}

.agh-article-body > * {
  max-inline-size: 100%;
}

.agh-article-body > * + * {
  margin-block-start: var(--agh-editorial-paragraph-gap);
}

.agh-article-body > :where(h2, h3) {
  color: var(--agh-color-text-primary);
  text-wrap: balance;
  scroll-margin-block-start: calc(
    var(--agh-header-height-desktop) + var(--agh-space-24)
  );
}

.agh-article-body > h2 {
  margin-block-start: var(--agh-editorial-section-gap);
  font-size: var(--agh-editorial-article-h2-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-editorial-article-h2-line-height);
  letter-spacing: var(--agh-type-h3-letter-spacing);
}

.agh-article-body > h3 {
  margin-block-start: var(--agh-space-48);
  font-size: var(--agh-editorial-article-h3-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-editorial-article-h3-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
}

.agh-article-body > :where(p, ul, ol, blockquote, figure, table, pre) + h2 {
  margin-block-start: var(--agh-editorial-section-gap);
}

.agh-article-body > :where(p, ul, ol, blockquote, figure, table, pre) + h3 {
  margin-block-start: var(--agh-space-48);
}

.agh-article-body p {
  color: var(--agh-color-text-primary);
}

.agh-article-body strong {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-article-body a {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-medium);
  text-decoration-color: var(--agh-color-brand-primary);
  text-decoration-thickness: var(--agh-border-width-default);
  text-underline-offset: 0.2em;
}

.agh-article-body a:hover {
  text-decoration-thickness: 2px;
}

.agh-article-body hr {
  margin-block: var(--agh-space-48);
  border-block-start-color: var(--agh-color-border);
}


/* ========================================================================== 
   05. ARTICLE LISTS
   ========================================================================== */

.agh-article-body :where(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding-inline-start: var(--agh-space-32);
}

.agh-article-body li {
  padding-inline-start: var(--agh-space-4);
}

.agh-article-body li::marker {
  color: var(--agh-color-brand-primary-hover);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-article-body li > :where(ul, ol) {
  margin-block-start: var(--agh-space-12);
}


/* ========================================================================== 
   06. ARTICLE BLOCKQUOTE
   ========================================================================== */

.agh-article-body blockquote,
.agh-editorial-quote {
  position: relative;
  margin-inline: 0;
  padding: var(--agh-space-24) var(--agh-space-32);
  border: var(--agh-border-default);
  border-inline-start: var(--agh-connector-width-max) solid
    var(--agh-color-brand-primary);
  border-radius: 0 var(--agh-radius-card) var(--agh-radius-card) 0;
  color: var(--agh-color-text-primary);
  background: var(--agh-color-pastel-peach);
  font-size: var(--agh-type-body-large-size);
  line-height: var(--agh-type-body-large-line-height);
}

.agh-article-body blockquote > * + *,
.agh-editorial-quote > * + * {
  margin-block-start: var(--agh-space-12);
}

.agh-editorial-quote__source {
  display: block;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  font-style: normal;
  line-height: var(--agh-type-body-small-line-height);
}


/* ========================================================================== 
   07. ARTICLE FIGURE
   ========================================================================== */

.agh-article-figure {
  margin-block: var(--agh-space-40);
}

.agh-article-figure__media {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-image);
  background: var(--agh-color-soft-neutral);
}

.agh-article-figure__media > :where(img, picture, video) {
  inline-size: 100%;
}

.agh-article-figure__media img,
.agh-article-figure__media video {
  block-size: auto;
}

.agh-article-figure__media--contain {
  padding: var(--agh-visual-stage-padding-desktop);
  background: var(--agh-color-surface-system-stage);
}

.agh-article-figure__media--contain > :where(img, picture, video),
.agh-article-figure__media--contain img,
.agh-article-figure__media--contain video {
  max-block-size: min(72vh, 720px);
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

.agh-article-figure__caption {
  margin-block-start: var(--agh-space-12);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  line-height: var(--agh-type-meta-line-height);
}


/* ========================================================================== 
   08. ARTICLE INFORMATION / EXAMPLE BOX
   ========================================================================== */

.agh-editorial-note {
  --agh-editorial-note-accent: var(--agh-color-brand-primary);
  --agh-editorial-note-background: var(--agh-color-warm-white);

  position: relative;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-editorial-note-background);
  box-shadow: var(--agh-shadow-ui);
}

.agh-editorial-note::before {
  content: "";
  position: absolute;
  inset-block: var(--agh-space-24);
  inset-inline-start: 0;
  inline-size: var(--agh-connector-width-max);
  border-radius: var(--agh-radius-pill);
  background: var(--agh-editorial-note-accent);
}

.agh-editorial-note--peach {
  --agh-editorial-note-background: var(--agh-color-pastel-peach);
}

.agh-editorial-note--info {
  --agh-editorial-note-accent: var(--agh-color-state-info);
  --agh-editorial-note-background: var(--agh-color-pastel-ice-blue);
}

.agh-editorial-note--practical {
  --agh-editorial-note-accent: var(--agh-color-functional-green);
  --agh-editorial-note-background: var(--agh-color-pastel-sage);
}

.agh-editorial-note--lavender {
  --agh-editorial-note-accent: var(--agh-color-functional-lavender);
  --agh-editorial-note-background: var(--agh-color-pastel-lavender);
}

.agh-editorial-note__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-editorial-note__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

.agh-editorial-note__body {
  color: var(--agh-color-text-primary);
}

.agh-editorial-note__body > * + * {
  margin-block-start: var(--agh-space-12);
}


/* ========================================================================== 
   09. KEY TAKEAWAY
   ========================================================================== */

.agh-article-takeaway {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
  margin-block-start: var(--agh-editorial-section-gap);
  padding: var(--agh-space-32);
  border: var(--agh-border-brand-soft);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-pastel-peach);
  box-shadow: var(--agh-shadow-ui);
}

.agh-article-takeaway--ice {
  border-color: var(--agh-color-border);
  background: var(--agh-color-pastel-ice-blue);
}

.agh-article-takeaway--sage {
  border-color: var(--agh-color-border);
  background: var(--agh-color-pastel-sage);
}

.agh-article-takeaway__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-article-takeaway__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h4-size);
  font-weight: var(--agh-type-h4-weight);
  line-height: var(--agh-type-h4-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
}

.agh-article-takeaway__body {
  color: var(--agh-color-text-primary);
}

.agh-article-takeaway__body > * + * {
  margin-block-start: var(--agh-space-12);
}


/* ========================================================================== 
   10. CODE / PREFORMATTED CONTENT
   ========================================================================== */

.agh-article-body :not(pre) > code,
.agh-legal__body :not(pre) > code {
  padding: 0.1em 0.35em;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-control-small);
  background: var(--agh-color-warm-white);
  font-size: 0.9em;
}

.agh-article-body pre,
.agh-legal__body pre {
  max-inline-size: 100%;
  overflow-x: auto;
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-warm-white);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
  -webkit-overflow-scrolling: touch;
}


/* ========================================================================== 
   11. ARTICLE TABLE
   ========================================================================== */

.agh-editorial-table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
  -webkit-overflow-scrolling: touch;
}

.agh-editorial-table {
  inline-size: 100%;
  min-inline-size: 640px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-editorial-table__caption {
  padding: var(--agh-space-16);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  line-height: var(--agh-type-meta-line-height);
  text-align: start;
}

.agh-editorial-table__head {
  background: var(--agh-color-warm-white);
}

.agh-editorial-table__heading,
.agh-editorial-table__cell {
  padding: var(--agh-space-16);
  border-block-end: var(--agh-border-default);
  text-align: start;
  vertical-align: top;
}

.agh-editorial-table__heading {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-editorial-table__cell {
  color: var(--agh-color-text-secondary);
}

.agh-editorial-table__row:last-child .agh-editorial-table__cell {
  border-block-end: 0;
}


/* ========================================================================== 
   12. ARTICLE SERVICE CONNECTION
   ========================================================================== */

/**
 * Optional and contextual only. It should appear when an Article naturally
 * connects educational content to a relevant AGH service or platform page.
 */
.agh-article-service-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--agh-space-24);
  min-inline-size: 0;
  margin-block-start: var(--agh-editorial-section-gap);
  padding: var(--agh-space-32);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-warm-white);
  box-shadow: var(--agh-shadow-ui);
  transition:
    border-color var(--agh-duration-card) var(--agh-easing-default),
    box-shadow var(--agh-duration-card) var(--agh-easing-default),
    transform var(--agh-duration-card) var(--agh-easing-default);
}

.agh-article-service-link--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-article-service-link--ice {
  background: var(--agh-color-pastel-ice-blue);
}

@media (hover: hover) and (pointer: fine) {
  .agh-article-service-link:hover {
    border-color: var(--agh-card-hover-border-color);
    box-shadow: var(--agh-shadow-card-hover);
    transform: translateY(calc(var(--agh-card-hover-translate-max) * -1));
  }
}

.agh-article-service-link__content {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-8);
}

.agh-article-service-link__label {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-eyebrow-size);
  font-weight: var(--agh-type-eyebrow-weight);
  line-height: var(--agh-type-eyebrow-line-height);
  letter-spacing: var(--agh-type-eyebrow-letter-spacing);
  text-transform: uppercase;
}

.agh-article-service-link__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h4-size);
  font-weight: var(--agh-type-h4-weight);
  line-height: var(--agh-type-h4-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
}

.agh-article-service-link__copy {
  color: var(--agh-color-text-secondary);
}


/* ========================================================================== 
   13. RELATED INSIGHTS
   ========================================================================== */

.agh-related-insights {
  min-inline-size: 0;
  margin-block-start: var(--agh-space-96);
  padding-block-start: var(--agh-space-64);
  border-block-start: var(--agh-border-default);
}

.agh-related-insights__header {
  display: flex;
  min-inline-size: 0;
  align-items: end;
  justify-content: space-between;
  gap: var(--agh-space-24);
  margin-block-end: var(--agh-space-32);
}

.agh-related-insights__heading {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-12);
}

.agh-related-insights__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h3-size);
  font-weight: var(--agh-type-h3-weight);
  line-height: var(--agh-type-h3-line-height);
  letter-spacing: var(--agh-type-h3-letter-spacing);
}

.agh-related-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--agh-space-32);
  min-inline-size: 0;
}


/* ========================================================================== 
   14. LEGAL ROOT
   ========================================================================== */

.agh-legal {
  --agh-legal-h1-size: clamp(48px, 4vw, 56px);
  --agh-legal-h1-line-height: 1.12;
  --agh-legal-h2-size: 30px;
  --agh-legal-h2-line-height: 38px;
  --agh-legal-body-size: 17px;
  --agh-legal-body-line-height: 28px;
  --agh-legal-section-gap: var(--agh-space-64);

  inline-size: 100%;
  max-inline-size: var(--agh-container-reading-max);
  margin-inline: auto;
  color: var(--agh-color-text-primary);
  font-family: var(--agh-font-family-primary);
  font-size: var(--agh-legal-body-size);
  font-weight: var(--agh-font-weight-regular);
  line-height: var(--agh-legal-body-line-height);
}

/**
 * The Legal header acts as the required quiet page Hero. It is intentionally
 * text-first and non-commercial: no photography, no service cards, no sales
 * CTA and no promotional visual treatment.
 */
.agh-legal__header {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
  margin-block-end: var(--agh-space-48);
  padding: var(--agh-space-32);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-feature);
  background: var(--agh-color-warm-white);
}

.agh-legal__header--peach {
  background: var(--agh-color-pastel-peach);
}

.agh-legal__header--ice {
  background: var(--agh-color-pastel-ice-blue);
}

.agh-legal__title {
  max-inline-size: var(--agh-container-reading-max);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-legal-h1-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-legal-h1-line-height);
  letter-spacing: var(--agh-type-h1-letter-spacing);
  text-wrap: balance;
}

.agh-legal__intro {
  max-inline-size: var(--agh-measure-long-form);
  color: var(--agh-color-text-secondary);
}

.agh-legal__meta {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  font-weight: var(--agh-type-meta-weight-min);
  line-height: var(--agh-type-meta-line-height);
}


/* ========================================================================== 
   15. LEGAL CONTENT
   ========================================================================== */

.agh-legal__body {
  min-inline-size: 0;
}

.agh-legal__body > * {
  max-inline-size: 100%;
}

.agh-legal__body > * + * {
  margin-block-start: var(--agh-space-24);
}

.agh-legal__body > :where(h2, h3) {
  scroll-margin-block-start: calc(
    var(--agh-header-height-desktop) + var(--agh-space-24)
  );
}

.agh-legal__body > h2 {
  margin-block-start: var(--agh-legal-section-gap);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-legal-h2-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-legal-h2-line-height);
  letter-spacing: var(--agh-type-h4-letter-spacing);
  text-wrap: balance;
}

.agh-legal__body > h3 {
  margin-block-start: var(--agh-space-48);
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-font-weight-semibold);
  line-height: var(--agh-type-h5-line-height);
}

.agh-legal__body p {
  color: var(--agh-color-text-primary);
}

.agh-legal__body strong {
  font-weight: var(--agh-font-weight-semibold);
}

.agh-legal__body :where(ul, ol) {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-8);
  padding-inline-start: var(--agh-space-32);
}

.agh-legal__body li {
  padding-inline-start: var(--agh-space-4);
}

.agh-legal__body li::marker {
  color: var(--agh-color-text-secondary);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-legal__body a {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-medium);
  text-decoration-color: var(--agh-color-brand-primary);
  text-underline-offset: 0.2em;
}

.agh-legal__body a:hover {
  text-decoration-thickness: 2px;
}


/* ========================================================================== 
   16. LEGAL TABLE OF CONTENTS
   ========================================================================== */

.agh-legal-toc {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
  margin-block-end: var(--agh-space-48);
  padding: var(--agh-space-24);
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-pastel-ice-blue);
  box-shadow: var(--agh-shadow-ui);
}

.agh-legal-toc__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

.agh-legal-toc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--agh-space-8) var(--agh-space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.agh-legal-toc__link {
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  font-weight: var(--agh-font-weight-medium);
  line-height: var(--agh-type-body-small-line-height);
  text-decoration: none;
}

.agh-legal-toc__link:hover {
  color: var(--agh-color-text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
}


/* ========================================================================== 
   17. LEGAL TABLE
   ========================================================================== */

.agh-legal-table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: var(--agh-border-default);
  border-radius: var(--agh-radius-card);
  background: var(--agh-color-white);
  box-shadow: var(--agh-shadow-ui);
  -webkit-overflow-scrolling: touch;
}

.agh-legal-table {
  inline-size: 100%;
  min-inline-size: 640px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-legal-table__caption {
  padding: var(--agh-space-16);
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-meta-size);
  line-height: var(--agh-type-meta-line-height);
  text-align: start;
}

.agh-legal-table__head {
  background: var(--agh-color-warm-white);
}

.agh-legal-table__heading,
.agh-legal-table__cell {
  padding: var(--agh-space-16);
  border-block-end: var(--agh-border-default);
  text-align: start;
  vertical-align: top;
}

.agh-legal-table__heading {
  color: var(--agh-color-text-primary);
  font-weight: var(--agh-font-weight-semibold);
}

.agh-legal-table__cell {
  color: var(--agh-color-text-secondary);
}

.agh-legal-table__row:last-child .agh-legal-table__cell {
  border-block-end: 0;
}


/* ========================================================================== 
   18. LEGAL CONTACT / NOTICE
   ========================================================================== */

/**
 * .agh-legal-contact is established in agh-components.css. These selectors
 * extend that approved component only for quiet long-form legal context.
 */
.agh-legal .agh-legal-contact {
  margin-block-start: var(--agh-space-48);
  background: var(--agh-color-warm-white);
  box-shadow: none;
}

.agh-legal-contact__value,
.agh-legal-contact__link {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-body-size);
  line-height: var(--agh-type-body-line-height);
  overflow-wrap: anywhere;
}

.agh-legal-contact__link {
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  text-decoration-color: var(--agh-color-brand-primary);
}


/* ========================================================================== 
   19. EDITORIAL SEPARATOR / FOOTNOTE
   ========================================================================== */

.agh-editorial-separator {
  inline-size: 100%;
  block-size: var(--agh-border-width-default);
  margin-block: var(--agh-space-48);
  border: 0;
  background: var(--agh-color-border);
}

.agh-editorial-footnote {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-editorial-footnote > * + * {
  margin-block-start: var(--agh-space-8);
}


/* ========================================================================== 
   20. EDITORIAL REFERENCE LIST
   ========================================================================== */

/**
 * References must contain genuine sources supplied by content or verified
 * during Article production. This component never fabricates references.
 */
.agh-editorial-references {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--agh-space-16);
  margin-block-start: var(--agh-space-64);
  padding-block-start: var(--agh-space-32);
  border-block-start: var(--agh-border-default);
}

.agh-editorial-references__title {
  color: var(--agh-color-text-primary);
  font-size: var(--agh-type-h5-size);
  font-weight: var(--agh-type-h5-weight);
  line-height: var(--agh-type-h5-line-height);
}

.agh-editorial-references__list {
  display: flex;
  flex-direction: column;
  gap: var(--agh-space-12);
  margin: 0;
  padding-inline-start: var(--agh-space-24);
}

.agh-editorial-references__item {
  color: var(--agh-color-text-secondary);
  font-size: var(--agh-type-body-small-size);
  line-height: var(--agh-type-body-small-line-height);
}

.agh-editorial-references__item a {
  color: var(--agh-color-text-primary);
  overflow-wrap: anywhere;
  text-decoration-color: var(--agh-color-brand-primary);
}


/* ========================================================================== 
   21. REDUCED-MOTION SAFETY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .agh-article-service-link {
    transition: none;
  }

  .agh-article-service-link:hover {
    transform: none;
  }
}


/* ========================================================================== 
   22. RESPONSIBILITY BOUNDARIES
   ========================================================================== */

/**
 * agh-responsive.css owns:
 * - Article H1 mobile size (38–42px),
 * - editorial and legal spacing reduction,
 * - related-article 3 -> 2 -> 1 grids,
 * - legal TOC 2 -> 1 columns,
 * - mobile handling for service-link blocks and tables,
 * - responsive reduction of visual-stage padding.
 *
 * agh-accessibility.css owns:
 * - shared focus-visible rules,
 * - additional reduced-motion behaviour,
 * - high-contrast and assistive patterns.
 *
 * This file intentionally does not:
 * - invent Article authors,
 * - invent publication dates,
 * - invent reading times,
 * - invent view counts or popularity,
 * - create newsletter/comment/search functionality,
 * - create category landing pages,
 * - add commercial Heroes, Service Cards or large visuals to Legal pages,
 * - make implementation-dependent Privacy/Terms/Cookie claims.
 */
.agh-article,
.agh-article-header,
.agh-article-featured,
.agh-article-body,
.agh-article-figure,
.agh-editorial-note,
.agh-article-takeaway,
.agh-editorial-table-wrap,
.agh-article-service-link,
.agh-related-insights,
.agh-legal,
.agh-legal__body,
.agh-legal-toc,
.agh-legal-table-wrap,
.agh-editorial-references {
  min-inline-size: 0;
}

/**
 * AGH Teams
 * File: agh-responsive.css
 * Purpose: Production central responsive recomposition system for the refreshed
 *          AGH public website. Owns breakpoint-level typography remapping,
 *          gutters, section rhythm, grids, image-led Heroes, wide visual stages,
 *          navigation, Footer, structured content, processes, dashboards, forms,
 *          editorial reading, Legal content and controlled overflow behaviour.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css,
 *             agh-components.css, agh-navigation.css, agh-content.css,
 *             agh-process.css, agh-dashboard.css, agh-forms.css,
 *             agh-editorial.css
 * Used by: All AGH public website pages, templates and future Insights articles.
 * Version: 2.0
 */

/* ========================================================================== 
   01. RESPONSIVE SYSTEM FOUNDATION
   ========================================================================== */

/**
 * Locked structural thresholds:
 *
 * XXL: 1440px+
 * XL:  1200–1439px
 * LG:  992–1199px
 * MD:  768–991px
 * SM:  480–767px
 * XS:  below 480px
 *
 * Primary principle:
 * RECOMPOSE — do not continuously shrink desktop compositions until the
 * content, controls, images or dashboards become unreadable.
 *
 * CSS custom properties cannot be used directly in media-query conditions,
 * therefore the locked literal breakpoint thresholds are used below.
 */

html,
body,
.agh-site,
.agh-main {
  max-inline-size: 100%;
}

.agh-site,
.agh-main,
.agh-container,
.agh-container-wide,
.agh-container-text,
.agh-container-reading,
.agh-container-fluid {
  min-inline-size: 0;
}


/* ========================================================================== 
   02. LARGE DESKTOP — 1440px AND ABOVE
   ========================================================================== */

@media (min-width: 1440px) {
  :root {
    --agh-gutter-page: var(--agh-gutter-large-desktop-min);
  }
}


/* ========================================================================== 
   03. DESKTOP NAVIGATION SAFETY — 1200px AND ABOVE
   ========================================================================== */

/**
 * Defensive reset for resize/state edge cases. The interaction layer should
 * already close the mobile drawer when leaving mobile navigation, but the CSS
 * contract must never allow a stale drawer state to cover the desktop site.
 */
@media (min-width: 1200px) {
  .agh-site-header__desktop,
  .agh-primary-nav {
    display: flex;
  }

  .agh-menu-toggle,
  .agh-mobile-nav,
  .agh-mobile-nav[data-state="open"],
  .agh-mobile-nav.is-open,
  .agh-nav-backdrop,
  .agh-nav-backdrop[data-state="open"],
  .agh-nav-backdrop.is-open {
    display: none;
  }

  body[data-agh-nav-open="true"] {
    overflow: visible;
  }
}


/* ========================================================================== 
   04. COMPACT DESKTOP / LAPTOP — BELOW 1200px
   ========================================================================== */

@media (max-width: 1199.98px) {
  /* ------------------------------------------------------------------------
     Navigation: desktop navigation -> mobile drawer architecture.
     ------------------------------------------------------------------------ */

  .agh-site-header__inner {
    min-block-size: var(--agh-header-height-mobile-max);
    gap: var(--agh-space-24);
  }

  .agh-site-header__logo {
    block-size: clamp(
      var(--agh-logo-height-mobile-min),
      3vw,
      var(--agh-logo-height-mobile-max)
    );
  }

  .agh-site-header__desktop,
  .agh-primary-nav,
  .agh-mega-menu {
    display: none;
  }

  .agh-menu-toggle {
    display: inline-flex;
  }

  .agh-mobile-nav,
  .agh-nav-backdrop {
    inset-block-start: var(--agh-header-height-mobile-max);
  }

  /* ------------------------------------------------------------------------
     Compact four-up systems -> two-up.
     ------------------------------------------------------------------------ */

  .agh-grid--4,
  .agh-recompose-4,
  .agh-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ------------------------------------------------------------------------
     Image-led stages: retain integrated desktop logic but reduce shell weight.
     ------------------------------------------------------------------------ */

  .agh-hero__stage,
  .agh-hero-stage {
    min-block-size: var(--agh-hero-stage-min-height-tablet);
  }

  .agh-hero__panel {
    inset-block-end: var(--agh-space-24);
    inset-inline-start: var(--agh-space-24);
    inline-size: min(
      var(--agh-hero-stage-content-max),
      calc(100% - (var(--agh-space-24) * 2))
    );
    padding: var(--agh-hero-stage-panel-padding-mobile);
  }

  .agh-hero__panel--right {
    inset-inline-start: auto;
    inset-inline-end: var(--agh-space-24);
  }

  .agh-hero__panel--top {
    inset-block-start: var(--agh-space-24);
    inset-block-end: auto;
  }

  .agh-hero__stage--system .agh-hero__media,
  .agh-split-content__visual--system,
  .agh-feature-panel__visual--system,
  .agh-platform-feature__visual,
  .agh-media--contain,
  .agh-article-featured__media--contain,
  .agh-article-figure__media--contain,
  .agh-dashboard-preview--contained,
  .agh-visual-stage--dashboard,
  .agh-visual-stage--workflow,
  .agh-visual-stage--ui {
    padding: var(--agh-visual-stage-padding-tablet);
  }

  /* ------------------------------------------------------------------------
     Footer: six columns -> three balanced columns.
     ------------------------------------------------------------------------ */

  .agh-site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ========================================================================== 
   05. TABLET — BELOW 992px
   ========================================================================== */

@media (max-width: 991.98px) {
  :root {
    --agh-type-h1-size: var(--agh-type-h1-size-tablet);
    --agh-type-h1-line-height: var(--agh-type-h1-line-height-tablet);
    --agh-type-h2-size: var(--agh-type-h2-size-tablet);
    --agh-type-h2-line-height: var(--agh-type-h2-line-height-tablet);
    --agh-type-h3-size: var(--agh-type-h3-size-tablet);
    --agh-type-h3-line-height: var(--agh-type-h3-line-height-tablet);
    --agh-type-h4-size: var(--agh-type-h4-size-tablet);
    --agh-type-h4-line-height: var(--agh-type-h4-line-height-tablet);
    --agh-type-body-large-size: var(--agh-type-body-large-size-tablet);
    --agh-type-body-large-line-height: var(--agh-type-body-large-line-height-tablet);
    --agh-type-body-size: var(--agh-type-body-size-tablet);
    --agh-type-body-line-height: var(--agh-type-body-line-height-tablet);

    --agh-section-space-standard: var(--agh-section-space-standard-tablet);
    --agh-gutter-page: var(--agh-gutter-tablet);
  }

  /* ------------------------------------------------------------------------
     Section rhythm.
     ------------------------------------------------------------------------ */

  .agh-section--compact {
    padding-block: var(--agh-section-space-standard-tablet-min);
  }

  .agh-section--hero {
    padding-block-start: var(--agh-section-space-standard-tablet-min);
    padding-block-end: var(--agh-section-space-standard-tablet-min);
  }

  .agh-section--editorial,
  .agh-section--legal,
  .agh-section--visual {
    padding-block: var(--agh-section-space-standard-tablet-min);
  }

  /* ------------------------------------------------------------------------
     Core grid: 12 columns -> 8 columns.
     ------------------------------------------------------------------------ */

  .agh-grid {
    --agh-layout-grid-columns: var(--agh-grid-columns-tablet);
  }

  .agh-col-span-8,
  .agh-col-span-9,
  .agh-col-span-10,
  .agh-col-span-11,
  .agh-col-span-12,
  .agh-col-span-full {
    grid-column: 1 / -1;
  }

  .agh-grid--3,
  .agh-recompose-3,
  .agh-key-points,
  .agh-capability-grid,
  .agh-related-insights__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ------------------------------------------------------------------------
     Two-column content compositions -> intentional one-column sequence.
     ------------------------------------------------------------------------ */

  .agh-grid--hero,
  .agh-grid--hero-equal,
  .agh-grid--split,
  .agh-grid--visual-led,
  .agh-grid--visual-dominant,
  .agh-grid--content-led,
  .agh-recompose-hero,
  .agh-recompose-visual,
  .agh-recompose-2,
  .agh-hero__grid,
  .agh-hero--equal .agh-hero__grid,
  .agh-section-header--split,
  .agh-split-content,
  .agh-split-content--visual-led,
  .agh-feature-panel,
  .agh-feature-panel--visual-led,
  .agh-platform-feature__grid,
  .agh-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .agh-hero__grid,
  .agh-split-content,
  .agh-feature-panel,
  .agh-platform-feature__grid,
  .agh-form-layout {
    gap: var(--agh-space-48);
  }

  .agh-split-content--reverse .agh-split-content__visual {
    order: initial;
  }

  .agh-section-header--split {
    align-items: start;
  }

  /* Legacy Hero order remains copy -> CTA -> visual. */
  .agh-hero__content {
    order: 1;
  }

  .agh-hero__visual {
    order: 2;
  }

  /* ------------------------------------------------------------------------
     Preferred image-led Hero remains integrated on tablet.
     ------------------------------------------------------------------------ */

  .agh-hero__stage,
  .agh-hero-stage {
    min-block-size: var(--agh-hero-stage-min-height-tablet);
  }

  .agh-hero-stage__content {
    inline-size: min(100%, var(--agh-hero-stage-content-max));
    margin: var(--agh-hero-stage-panel-padding-mobile);
  }

  /* ------------------------------------------------------------------------
     Wide visual stages remain prominent but use tablet-safe shell padding.
     ------------------------------------------------------------------------ */

  .agh-visual-stage--dashboard,
  .agh-visual-stage--workflow,
  .agh-visual-stage--ui,
  .agh-dashboard-preview--contained,
  .agh-article-featured__media--contain,
  .agh-article-figure__media--contain,
  .agh-media--contain,
  .agh-platform-feature__visual,
  .agh-split-content__visual--system,
  .agh-feature-panel__visual--system {
    padding: var(--agh-visual-stage-padding-tablet);
  }

  .agh-visual-stage__content {
    padding: var(--agh-space-24);
  }

  .agh-visual-stage__overlay-panel {
    inset-block-end: 20px;
    inset-inline-start: 20px;
    inline-size: min(420px, calc(100% - 40px));
  }

  .agh-visual-stage__overlay-panel--right {
    inset-inline-start: auto;
    inset-inline-end: 20px;
  }

  /* ------------------------------------------------------------------------
     Structured content.
     ------------------------------------------------------------------------ */

  .agh-content-action {
    align-items: flex-start;
  }

  /* ------------------------------------------------------------------------
     Process systems: horizontal -> vertical while preserving sequence.
     ------------------------------------------------------------------------ */

  .agh-process__list,
  .agh-workflow__list,
  .agh-pipeline__track,
  .agh-flow__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--agh-space-32);
  }

  .agh-process__item {
    display: grid;
    grid-template-columns: var(--agh-process-marker-size) minmax(0, 1fr);
    column-gap: var(--agh-space-16);
    row-gap: 0;
  }

  .agh-process__item:not(:last-child)::after,
  .agh-process--cards .agh-process__item:not(:last-child)::after {
    inset-block-start: calc(var(--agh-process-marker-size) + var(--agh-space-8));
    inset-block-end: calc(var(--agh-process-gap) * -1);
    inset-inline-start: calc(var(--agh-process-marker-size) / 2);
    inline-size: var(--agh-connector-width-min);
    block-size: auto;
    background: var(--agh-connector-color);
    transform: translateX(-50%);
  }

  .agh-process__marker {
    grid-column: 1;
    grid-row: 1;
  }

  .agh-process__marker::after {
    display: none;
  }

  .agh-process__content {
    grid-column: 2;
    grid-row: 1;
    padding-block-start: var(--agh-space-8);
  }

  .agh-process--cards .agh-process__item {
    grid-template-columns: var(--agh-process-marker-size) minmax(0, 1fr);
  }

  .agh-workflow__step:not(:last-child)::after,
  .agh-flow__item:not(:last-child)::after {
    inset-block-start: 100%;
    inset-inline-start: var(--agh-space-24);
    inline-size: var(--agh-connector-width-min);
    block-size: var(--agh-space-32);
    transform: none;
  }

  .agh-workflow__step:not(:last-child)::before {
    inset-block-start: calc(100% + (var(--agh-space-32) / 2));
    inset-inline-start: calc(var(--agh-space-24) - (var(--agh-space-8) / 2));
    transform: translateY(-50%);
  }

  .agh-pipeline__stage {
    padding-block-start: 0;
    padding-inline-start: var(--agh-space-32);
  }

  .agh-pipeline__stage::before {
    inset-block-start: var(--agh-space-8);
    inset-inline-start: 0;
  }

  .agh-pipeline__stage:not(:last-child)::after {
    inset-block-start: var(--agh-space-24);
    inset-block-end: calc(var(--agh-space-32) * -1);
    inset-inline-start: calc(var(--agh-space-12) / 2);
    inline-size: var(--agh-connector-width-min);
    block-size: auto;
    transform: none;
  }

  .agh-process-panel {
    padding: var(--agh-space-40);
  }

  /* ------------------------------------------------------------------------
     Dashboard: 12-column application composition -> 8-column tablet system.
     ------------------------------------------------------------------------ */

  .agh-dashboard-frame__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .agh-dashboard-span-3,
  .agh-dashboard-span-4 {
    grid-column: span 4;
  }

  .agh-dashboard-span-5,
  .agh-dashboard-span-6,
  .agh-dashboard-span-7,
  .agh-dashboard-span-8,
  .agh-dashboard-span-9,
  .agh-dashboard-span-12,
  .agh-dashboard-span-full {
    grid-column: 1 / -1;
  }

  .agh-dashboard-preview--contained {
    padding: var(--agh-visual-stage-padding-tablet);
  }

  /* ------------------------------------------------------------------------
     Forms: three-column field groups -> two columns.
     ------------------------------------------------------------------------ */

  .agh-form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ------------------------------------------------------------------------
     Editorial / Legal.
     ------------------------------------------------------------------------ */

  .agh-article {
    --agh-editorial-section-gap: var(--agh-space-48);
  }

  .agh-article-header--surface {
    padding: var(--agh-space-40);
  }

  .agh-article-featured {
    margin-block-end: var(--agh-space-48);
  }

  .agh-article-featured__media--contain,
  .agh-article-figure__media--contain {
    padding: var(--agh-visual-stage-padding-tablet);
  }

  .agh-related-insights {
    margin-block-start: var(--agh-space-80);
    padding-block-start: var(--agh-space-48);
  }

  .agh-legal {
    --agh-legal-section-gap: var(--agh-space-48);
  }

  .agh-legal-hero {
    padding: var(--agh-space-40);
  }

  /* ------------------------------------------------------------------------
     Footer: three columns -> two columns.
     ------------------------------------------------------------------------ */

  .agh-site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ========================================================================== 
   06. MOBILE — BELOW 768px
   ========================================================================== */

@media (max-width: 767.98px) {
  :root {
    --agh-type-display-size: var(--agh-type-display-size-mobile);
    --agh-type-display-line-height: var(--agh-type-display-line-height-mobile);
    --agh-type-h1-size: var(--agh-type-h1-size-mobile);
    --agh-type-h1-line-height: var(--agh-type-h1-line-height-mobile);
    --agh-type-h2-size: var(--agh-type-h2-size-mobile);
    --agh-type-h2-line-height: var(--agh-type-h2-line-height-mobile);
    --agh-type-h3-size: var(--agh-type-h3-size-mobile);
    --agh-type-h3-line-height: var(--agh-type-h3-line-height-mobile);
    --agh-type-h4-size: var(--agh-type-h4-size-mobile);
    --agh-type-h4-line-height: var(--agh-type-h4-line-height-mobile);
    --agh-type-body-large-size: var(--agh-type-body-large-size-mobile);
    --agh-type-body-large-line-height: var(--agh-type-body-large-line-height-mobile);
    --agh-type-body-size: var(--agh-type-body-size-mobile);
    --agh-type-body-line-height: var(--agh-type-body-line-height-mobile);
    --agh-type-body-small-size: var(--agh-type-body-small-size-mobile);
    --agh-type-body-small-line-height: var(--agh-type-body-small-line-height-mobile);
    --agh-type-eyebrow-size: var(--agh-type-eyebrow-size-mobile);
    --agh-type-eyebrow-line-height: var(--agh-type-eyebrow-line-height-mobile);

    --agh-section-space-standard: var(--agh-section-space-standard-mobile);
    --agh-gutter-page: var(--agh-gutter-mobile);
  }

  /* ------------------------------------------------------------------------
     Sections.
     ------------------------------------------------------------------------ */

  .agh-section--compact {
    padding-block: var(--agh-section-space-compact-mobile);
  }

  .agh-section--hero,
  .agh-section--editorial,
  .agh-section--legal,
  .agh-section--visual {
    padding-block: var(--agh-section-space-standard-mobile);
  }

  /* ------------------------------------------------------------------------
     Grid: 8-column tablet -> 4-column mobile.
     ------------------------------------------------------------------------ */

  .agh-grid {
    --agh-layout-grid-columns: var(--agh-grid-columns-mobile);
    --agh-layout-grid-gap-x: var(--agh-space-24);
    --agh-layout-grid-gap-y: var(--agh-space-24);
  }

  .agh-col-span-1,
  .agh-col-span-2,
  .agh-col-span-3,
  .agh-col-span-4,
  .agh-col-span-5,
  .agh-col-span-6,
  .agh-col-span-7,
  .agh-col-span-8,
  .agh-col-span-9,
  .agh-col-span-10,
  .agh-col-span-11,
  .agh-col-span-12,
  .agh-col-span-full {
    grid-column: 1 / -1;
  }

  .agh-grid--2,
  .agh-grid--3,
  .agh-grid--4,
  .agh-grid--hero,
  .agh-grid--hero-equal,
  .agh-grid--split,
  .agh-grid--visual-led,
  .agh-grid--visual-dominant,
  .agh-grid--content-led,
  .agh-recompose-2,
  .agh-recompose-3,
  .agh-recompose-4,
  .agh-recompose-hero,
  .agh-recompose-visual,
  .agh-key-points,
  .agh-capability-grid,
  .agh-content-matrix,
  .agh-kpi-grid,
  .agh-related-insights__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ------------------------------------------------------------------------
     Flex distribution primitives -> readable mobile stacks.
     ------------------------------------------------------------------------ */

  .agh-split,
  .agh-content-action,
  .agh-process-panel__header,
  .agh-related-insights__header,
  .agh-site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .agh-split,
  .agh-content-action,
  .agh-process-panel__header,
  .agh-related-insights__header {
    gap: var(--agh-space-16);
  }

  /* ------------------------------------------------------------------------
     Legacy split Hero: copy + CTA + visual.
     ------------------------------------------------------------------------ */

  .agh-hero__grid,
  .agh-split-content,
  .agh-feature-panel,
  .agh-platform-feature__grid,
  .agh-form-layout {
    gap: var(--agh-space-32);
  }

  .agh-hero__content {
    gap: var(--agh-space-24);
  }

  .agh-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ------------------------------------------------------------------------
     Preferred image-led Hero: deliberate mobile recomposition.

     Desktop overlays are removed on mobile. Copy and CTA remain first; the
     approved visual follows beneath. Photography keeps a safe 16:9 baseline.
     System/dashboard Heroes use a 16:10 information-safe stage and CONTAIN.
     A page may still opt into a dedicated 4:5 mobile asset/composition when
     normal cropping would damage faces, UI or workflow meaning.
     ------------------------------------------------------------------------ */

  .agh-hero--image-led .agh-hero__stage {
    display: flex;
    min-block-size: 0;
    flex-direction: column;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }

  .agh-hero--image-led .agh-hero__stage::after {
    display: none;
  }

  .agh-hero--image-led .agh-hero__panel,
  .agh-hero--image-led .agh-hero__panel--right,
  .agh-hero--image-led .agh-hero__panel--top {
    position: relative;
    inset: auto;
    order: 1;
    inline-size: 100%;
    max-inline-size: none;
    padding: 0 0 var(--agh-space-24);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .agh-hero--image-led .agh-hero__media {
    position: relative;
    inset: auto;
    order: 2;
    inline-size: 100%;
    aspect-ratio: var(--agh-ratio-hero);
    overflow: hidden;
    border-radius: var(--agh-radius-image);
    background: var(--agh-color-soft-neutral);
  }

  .agh-hero--image-led .agh-hero__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .agh-hero--image-led .agh-hero__stage--system .agh-hero__media {
    display: grid;
    aspect-ratio: var(--agh-ratio-dashboard-showcase);
    place-items: center;
    padding: var(--agh-visual-stage-padding-mobile);
    border: var(--agh-border-default);
    background: var(--agh-color-surface-system-stage);
  }

  .agh-hero--image-led .agh-hero__stage--system .agh-hero__image {
    object-fit: contain;
  }

  /* Structural Hero-stage primitive follows the same mobile hierarchy. */
  .agh-hero-stage {
    display: flex;
    min-block-size: 0;
    flex-direction: column;
    grid-template-rows: none;
  }

  .agh-hero-stage__content,
  .agh-hero-stage__content--inline-end,
  .agh-hero-stage__content--block-end,
  .agh-hero-stage__content--block-start {
    order: 1;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0 0 var(--agh-space-24);
    align-self: stretch;
    justify-self: stretch;
  }

  .agh-hero-stage__media {
    order: 2;
    min-block-size: 0;
    aspect-ratio: var(--agh-ratio-hero);
    overflow: hidden;
    border-radius: var(--agh-radius-image);
  }

  /* ------------------------------------------------------------------------
     Wide visual stages: preserve prominence but stop covering key media.
     ------------------------------------------------------------------------ */

  .agh-visual-stage {
    display: flex;
    aspect-ratio: auto;
    flex-direction: column;
    grid-template-rows: none;
  }

  .agh-visual-stage__media,
  .agh-visual-stage__content {
    grid-column: auto;
    grid-row: auto;
  }

  .agh-visual-stage__media {
    order: 1;
  }

  .agh-visual-stage__content {
    order: 2;
    max-inline-size: none;
    align-self: stretch;
    justify-self: stretch;
    padding: 20px;
  }

  .agh-visual-stage--wide .agh-visual-stage__media,
  .agh-visual-stage--workflow .agh-visual-stage__media {
    aspect-ratio: var(--agh-ratio-workflow-showcase);
  }

  .agh-visual-stage--editorial .agh-visual-stage__media,
  .agh-visual-stage--photo .agh-visual-stage__media {
    aspect-ratio: var(--agh-ratio-editorial-stage);
  }

  .agh-visual-stage--dashboard .agh-visual-stage__media {
    aspect-ratio: var(--agh-ratio-dashboard-showcase);
  }

  .agh-visual-stage--intrinsic .agh-visual-stage__media {
    aspect-ratio: auto;
  }

  .agh-visual-stage--dashboard,
  .agh-visual-stage--workflow,
  .agh-visual-stage--ui,
  .agh-dashboard-preview--contained,
  .agh-article-featured__media--contain,
  .agh-article-figure__media--contain,
  .agh-media--contain,
  .agh-platform-feature__visual,
  .agh-split-content__visual--system,
  .agh-feature-panel__visual--system {
    padding: var(--agh-visual-stage-padding-mobile);
  }

  .agh-visual-stage__overlay-panel,
  .agh-visual-stage__overlay-panel--right {
    position: static;
    inset: auto;
    inline-size: auto;
    margin: 0;
    border-block-start: var(--agh-border-default);
    border-radius: 0;
    box-shadow: none;
  }

  .agh-visual-stage__overlay-panel {
    order: 3;
  }

  .agh-floating-panel {
    box-shadow: var(--agh-shadow-card);
  }

  /* Media helpers must never impose a destructive global mobile crop. */
  .agh-hero__visual > :where(img, picture, video),
  .agh-split-content__visual > :where(img, picture, video),
  .agh-feature-panel__visual > :where(img, picture, video),
  .agh-platform-feature__visual > :where(img, picture, video) {
    max-block-size: none;
  }

  /* ------------------------------------------------------------------------
     Component spacing.
     ------------------------------------------------------------------------ */

  .agh-card,
  .agh-capability-item,
  .agh-callout,
  .agh-content-matrix__item,
  .agh-workflow__step,
  .agh-flow__item,
  .agh-dashboard-module,
  .agh-kpi-card,
  .agh-data-visual,
  .agh-form-panel,
  .agh-process-panel,
  .agh-article-takeaway,
  .agh-article-service-link,
  .agh-legal-toc,
  .agh-legal__header,
  .agh-legal-hero {
    padding: var(--agh-space-24);
  }

  .agh-feature-panel,
  .agh-platform-feature {
    padding: var(--agh-space-32);
  }

  .agh-section-header {
    margin-block-end: var(--agh-space-32);
  }

  /* ------------------------------------------------------------------------
     Structured content rows -> stack.
     ------------------------------------------------------------------------ */

  .agh-principle,
  .agh-definition-row,
  .agh-article-service-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .agh-principle,
  .agh-definition-row {
    gap: var(--agh-space-16);
  }

  .agh-comparison {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .agh-comparison__header,
  .agh-comparison__row {
    min-inline-size: 560px;
  }

  .agh-content-action__controls {
    max-inline-size: 100%;
  }

  /* ------------------------------------------------------------------------
     Process / workflow mobile presentation.
     ------------------------------------------------------------------------ */

  .agh-process-panel {
    gap: var(--agh-space-24);
  }

  .agh-process--cards .agh-process__item {
    padding: var(--agh-space-24);
  }

  .agh-process-visual {
    padding: var(--agh-visual-stage-padding-mobile);
  }

  .agh-process-visual--photo {
    padding: 0;
  }

  /* ------------------------------------------------------------------------
     Dashboard: readable single-column management preview.
     ------------------------------------------------------------------------ */

  .agh-dashboard-frame {
    --agh-dashboard-frame-padding: var(--agh-space-16);
    --agh-dashboard-module-gap: var(--agh-space-16);
  }

  .agh-dashboard-frame__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .agh-dashboard-span-3,
  .agh-dashboard-span-4,
  .agh-dashboard-span-5,
  .agh-dashboard-span-6,
  .agh-dashboard-span-7,
  .agh-dashboard-span-8,
  .agh-dashboard-span-9,
  .agh-dashboard-span-12,
  .agh-dashboard-span-full {
    grid-column: 1 / -1;
  }

  .agh-dashboard-frame__topbar {
    min-block-size: 0;
    gap: var(--agh-space-12);
    padding-block: var(--agh-space-12);
  }

  .agh-dashboard-frame__subtitle {
    display: none;
  }

  .agh-dashboard-list__item,
  .agh-task-row,
  .agh-schedule-row,
  .agh-attendance-row {
    gap: var(--agh-space-12);
  }

  .agh-schedule-row,
  .agh-attendance-row {
    grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  }

  .agh-schedule-row > :last-child,
  .agh-attendance-row > :last-child {
    grid-column: 2;
  }

  .agh-dashboard-preview--contained {
    padding: var(--agh-visual-stage-padding-mobile);
  }

  .agh-data-visual__canvas {
    min-block-size: 140px;
  }

  .agh-data-table-wrap,
  .agh-editorial-table-wrap,
  .agh-legal-table-wrap {
    max-inline-size: 100%;
    overflow-x: auto;
  }

  /* ------------------------------------------------------------------------
     Forms: all field grids stack to one column.
     ------------------------------------------------------------------------ */

  .agh-form-grid,
  .agh-form-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .agh-form-grid__full {
    grid-column: auto;
  }

  .agh-form-panel {
    border-radius: var(--agh-radius-card);
  }

  .agh-form-steps {
    gap: var(--agh-space-24);
  }

  .agh-form-steps__progress {
    gap: var(--agh-space-8);
  }

  .agh-form-steps__item {
    align-items: flex-start;
  }

  .agh-field__label-row {
    flex-wrap: wrap;
  }

  .agh-booking-host,
  .agh-file-control {
    padding: 20px;
  }

  /* ------------------------------------------------------------------------
     Editorial Article.
     ------------------------------------------------------------------------ */

  .agh-article {
    --agh-editorial-article-h1-size: var(--agh-type-h1-size-mobile);
    --agh-editorial-article-h1-line-height: var(--agh-type-h1-line-height-mobile);
    --agh-editorial-article-h2-size: var(--agh-type-h2-size-mobile);
    --agh-editorial-article-h2-line-height: var(--agh-type-h2-line-height-mobile);
    --agh-editorial-article-h3-size: var(--agh-type-h3-size-mobile);
    --agh-editorial-article-h3-line-height: var(--agh-type-h3-line-height-mobile);
    --agh-editorial-lead-size: var(--agh-type-body-large-size-mobile);
    --agh-editorial-lead-line-height: var(--agh-type-body-large-line-height-mobile);
    --agh-editorial-body-size: var(--agh-type-body-size-mobile);
    --agh-editorial-body-line-height: var(--agh-type-body-line-height-mobile);
    --agh-editorial-paragraph-gap: var(--agh-space-24);
    --agh-editorial-section-gap: var(--agh-space-48);
  }

  .agh-article-header {
    gap: var(--agh-space-16);
    margin-block-end: var(--agh-space-32);
  }

  .agh-article-header--surface {
    padding: var(--agh-space-24);
    border-radius: var(--agh-radius-card);
  }

  .agh-article-header__title {
    text-wrap: pretty;
  }

  .agh-article-featured {
    margin-block-end: var(--agh-space-40);
  }

  .agh-article-featured__media--contain,
  .agh-article-figure__media--contain {
    padding: var(--agh-visual-stage-padding-mobile);
  }

  .agh-article-body > h2,
  .agh-article-body > :where(p, ul, ol, blockquote, figure, table) + h2 {
    margin-block-start: var(--agh-space-48);
  }

  .agh-article-body > h3,
  .agh-article-body > :where(p, ul, ol, blockquote, figure, table) + h3 {
    margin-block-start: var(--agh-space-40);
  }

  .agh-article-body blockquote,
  .agh-editorial-quote {
    padding: var(--agh-space-24);
  }

  .agh-related-insights {
    margin-block-start: var(--agh-space-64);
    padding-block-start: var(--agh-space-40);
  }

  /* ------------------------------------------------------------------------
     Legal: quiet, text-first, non-commercial mobile composition.
     ------------------------------------------------------------------------ */

  .agh-legal {
    --agh-legal-h1-size: var(--agh-type-h1-size-mobile);
    --agh-legal-h1-line-height: var(--agh-type-h1-line-height-mobile);
    --agh-legal-h2-size: var(--agh-type-h3-size-tablet);
    --agh-legal-h2-line-height: var(--agh-type-h3-line-height-tablet);
    --agh-legal-body-size: var(--agh-type-body-size-mobile);
    --agh-legal-body-line-height: var(--agh-type-body-line-height-mobile);
    --agh-legal-section-gap: var(--agh-space-48);
  }

  .agh-legal__header {
    margin-block-end: var(--agh-space-32);
  }

  .agh-legal__body > h2 {
    margin-block-start: var(--agh-space-48);
  }

  .agh-legal__body > h3 {
    margin-block-start: var(--agh-space-40);
  }

  .agh-legal-toc__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ------------------------------------------------------------------------
     Footer mobile composition.
     ------------------------------------------------------------------------ */

  .agh-site-footer__main {
    padding-block: var(--agh-space-64) var(--agh-space-48);
  }

  .agh-site-footer__grid {
    gap: var(--agh-space-32) var(--agh-space-24);
  }

  .agh-site-footer__column:first-child {
    grid-column: 1 / -1;
  }

  .agh-site-footer__logo {
    block-size: clamp(
      var(--agh-footer-logo-height-mobile-min),
      9vw,
      var(--agh-footer-logo-height-mobile-max)
    );
  }

  .agh-site-footer__social-list--inline {
    gap: var(--agh-space-8);
  }

  .agh-site-footer__bottom-inner {
    min-block-size: 0;
    padding-block: var(--agh-space-24);
  }

  .agh-site-footer__legal-company {
    text-align: start;
  }
}


/* ========================================================================== 
   07. SMALL MOBILE — BELOW 480px
   ========================================================================== */

@media (max-width: 479.98px) {
  :root {
    --agh-gutter-page: var(--agh-gutter-small-mobile-min);
    --agh-section-space-standard: var(--agh-section-space-standard-mobile-min);
  }

  /* ------------------------------------------------------------------------
     Section spacing.
     ------------------------------------------------------------------------ */

  .agh-section--hero,
  .agh-section--editorial,
  .agh-section--legal,
  .agh-section--visual {
    padding-block: var(--agh-section-space-standard-mobile-min);
  }

  /* ------------------------------------------------------------------------
     Header / mobile navigation.
     ------------------------------------------------------------------------ */

  .agh-site-header__inner {
    min-block-size: var(--agh-header-height-mobile-min);
    gap: var(--agh-space-16);
  }

  .agh-site-header__logo {
    block-size: var(--agh-logo-height-mobile-min);
  }

  .agh-mobile-nav,
  .agh-nav-backdrop {
    inset-block-start: var(--agh-header-height-mobile-min);
  }

  .agh-mobile-nav__inner {
    padding-block-start: var(--agh-space-16);
  }

  /* ------------------------------------------------------------------------
     CTA controls remain easy to reach and do not create narrow button rows.
     ------------------------------------------------------------------------ */

  .agh-hero__actions,
  .agh-button-group,
  .agh-form__actions,
  .agh-form__actions-group,
  .agh-content-action__controls {
    inline-size: 100%;
  }

  .agh-hero__actions .agh-button,
  .agh-button-group .agh-button,
  .agh-form__actions .agh-button,
  .agh-form__actions-group .agh-button,
  .agh-content-action__controls .agh-button {
    inline-size: 100%;
  }

  /* ------------------------------------------------------------------------
     Cards / panels / quiet Legal surfaces.
     ------------------------------------------------------------------------ */

  .agh-feature-panel,
  .agh-platform-feature,
  .agh-form-panel,
  .agh-process-panel {
    padding: var(--agh-space-24);
  }

  .agh-card,
  .agh-capability-item,
  .agh-callout,
  .agh-content-matrix__item,
  .agh-workflow__step,
  .agh-flow__item,
  .agh-dashboard-module,
  .agh-kpi-card,
  .agh-data-visual,
  .agh-article-takeaway,
  .agh-article-service-link,
  .agh-legal-toc,
  .agh-legal__header,
  .agh-legal-hero,
  .agh-floating-panel {
    padding: var(--agh-space-24);
  }

  .agh-visual-stage__content,
  .agh-visual-stage__overlay-panel {
    padding: var(--agh-space-16);
  }

  /* ------------------------------------------------------------------------
     Footer: two columns -> one column.
     ------------------------------------------------------------------------ */

  .agh-site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .agh-site-footer__column:first-child {
    grid-column: auto;
  }

  .agh-site-footer__get-started .agh-button {
    max-inline-size: none;
  }

  .agh-site-footer__social-list--inline {
    flex-direction: column;
    align-items: stretch;
  }

  .agh-site-footer__social-list--inline .agh-site-footer__social-link {
    justify-content: flex-start;
  }

  /* ------------------------------------------------------------------------
     Dashboard micro-layouts.
     ------------------------------------------------------------------------ */

  .agh-dashboard-frame__topbar {
    padding-inline: var(--agh-space-12);
  }

  .agh-dashboard-frame__actions {
    gap: var(--agh-space-4);
  }

  .agh-dashboard-list__item,
  .agh-task-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .agh-dashboard-list__aside,
  .agh-task-row__status {
    grid-column: 2;
    text-align: start;
  }

  .agh-status {
    min-block-size: var(--agh-control-touch-min);
    white-space: normal;
  }

  /* ------------------------------------------------------------------------
     Form progress and actions.
     ------------------------------------------------------------------------ */

  .agh-form-steps__progress {
    grid-template-columns: minmax(0, 1fr);
  }

  .agh-form-steps__item {
    padding-block: var(--agh-space-8);
    border-block-end-width: var(--agh-border-width-default);
  }

  .agh-form__actions--between {
    align-items: stretch;
  }

  .agh-input-group {
    max-inline-size: 100%;
  }

  /* ------------------------------------------------------------------------
     Editorial / Legal compact spacing without reducing body readability.
     ------------------------------------------------------------------------ */

  .agh-article-takeaway,
  .agh-article-service-link,
  .agh-article-header--surface,
  .agh-legal__header,
  .agh-legal-hero {
    border-radius: var(--agh-radius-card);
  }

  .agh-legal__title,
  .agh-article-header__title {
    text-wrap: pretty;
  }
}


/* ========================================================================== 
   08. CONTROLLED OVERFLOW SAFETY
   ========================================================================== */

/**
 * Tables and wide comparison structures preserve their semantic relationships
 * through controlled horizontal scrolling rather than being scaled to
 * unreadable miniature interfaces.
 */
@media (max-width: 767.98px) {
  .agh-data-table,
  .agh-editorial-table,
  .agh-legal-table {
    font-size: var(--agh-type-body-small-size-mobile);
    line-height: var(--agh-type-body-small-line-height-mobile);
  }

  .agh-data-table__heading,
  .agh-data-table__cell,
  .agh-editorial-table__heading,
  .agh-editorial-table__cell,
  .agh-legal-table__heading,
  .agh-legal-table__cell {
    padding: var(--agh-space-16);
  }
}


/* ========================================================================== 
   09. POINTER / MOTION RESPONSIBILITY
   ========================================================================== */

/**
 * Hover animation itself is owned by the relevant component stylesheet and is
 * already guarded by pointer capability. This file does not create a second
 * motion system. agh-accessibility.css remains the final reduced-motion layer.
 */


/* ========================================================================== 
   10. RESPONSIVE INTEGRATION BOUNDARIES
   ========================================================================== */

/**
 * This file owns responsive composition only.
 *
 * agh-accessibility.css owns:
 * - shared focus-visible treatment,
 * - prefers-reduced-motion behaviour,
 * - forced-colours/high-contrast reinforcement,
 * - accessibility-specific state overrides.
 *
 * agh-app.js / agh-forms.js own confirmed interaction state only.
 *
 * The Global Runtime & Shell owns Header/Footer markup, routing, social/contact
 * destinations and the legacy booking -> Consultation migration.
 *
 * Page/template files may compose the primitives above and may choose an
 * approved page-specific mobile image/crop where source imagery requires it,
 * but they should not introduce a competing breakpoint scale or duplicate the
 * global transformations defined here.
 */

/**
 * AGH Teams
 * File: agh-accessibility.css
 * Purpose: Production global accessibility reinforcement for keyboard focus,
 *          skip navigation, visually hidden content, touch targets, semantic
 *          interaction states, error/status clarity, reduced motion,
 *          high-contrast environments, anchored content, and accessible
 *          behaviour across the refreshed AGH public website.
 * Depends on: agh-tokens.css, agh-base.css, agh-layout.css,
 *             agh-components.css, agh-navigation.css, agh-content.css,
 *             agh-process.css, agh-dashboard.css, agh-forms.css,
 *             agh-editorial.css, agh-responsive.css
 * Used by: All AGH public website pages, templates, forms, navigation,
 *          dashboards, editorial content, Legal content, and future Insights.
 * Version: 2.0
 */

/* ========================================================================== 
   01. KEYBOARD FOCUS SYSTEM
   ========================================================================== */

/**
 * The locked AGH system requires visible keyboard focus on White, Warm White,
 * Orange and pastel surfaces. Charcoal remains the primary focus indicator.
 * Native focus is never globally removed; :focus-visible strengthens keyboard
 * navigation without adding unnecessary mouse-focus decoration.
 */
:where(
  a[href],
  area[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  iframe,
  [contenteditable="true"],
  [role="button"],
  [role="checkbox"],
  [role="combobox"],
  [role="link"],
  [role="menuitem"],
  [role="option"],
  [role="radio"],
  [role="slider"],
  [role="spinbutton"],
  [role="switch"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: calc(var(--agh-border-width-default) * 2) solid
    var(--agh-color-text-primary);
  outline-offset: var(--agh-space-4);
}

/**
 * Forms retain the branded focus border from agh-forms.css while receiving the
 * stronger charcoal keyboard outline from this final accessibility layer.
 * Invalid controls keep the semantic error border instead of being recoloured.
 */
:where(
  .agh-input,
  .agh-select,
  .agh-textarea,
  .agh-choice__control
):focus-visible {
  outline-color: var(--agh-color-text-primary);
  outline-offset: var(--agh-space-4);
}

:where(
  .agh-input,
  .agh-select,
  .agh-textarea,
  .agh-choice__control
)[aria-invalid="true"]:focus-visible {
  border-color: var(--agh-color-state-error);
  outline-color: var(--agh-color-text-primary);
}

/**
 * Complex cards/panels can contain the actual focusable control. A restrained
 * focus-within border makes the relationship clear without replacing the focus
 * ring on the control itself.
 */
:where(
  .agh-card,
  .agh-capability-item,
  .agh-content-matrix__item,
  .agh-process--cards .agh-process__item,
  .agh-workflow__step,
  .agh-flow__item,
  .agh-dashboard-module,
  .agh-kpi-card,
  .agh-article-card,
  .agh-article-service-link
):focus-within {
  border-color: var(--agh-card-hover-border-color);
}


/* ========================================================================== 
   02. SKIP NAVIGATION
   ========================================================================== */

.agh-skip-link {
  position: fixed;
  inset-block-start: var(--agh-space-8);
  inset-inline-start: var(--agh-space-8);
  z-index: 1200;
  display: inline-flex;
  min-block-size: var(--agh-control-touch-min);
  align-items: center;
  justify-content: center;
  max-inline-size: calc(100vw - (var(--agh-space-16) * 2));
  padding-block: var(--agh-space-12);
  padding-inline: var(--agh-space-16);
  border: calc(var(--agh-border-width-default) * 2) solid
    var(--agh-color-text-primary);
  border-radius: var(--agh-radius-button);
  color: var(--agh-color-text-primary);
  background: var(--agh-color-brand-primary);
  box-shadow: var(--agh-shadow-ui);
  font-size: var(--agh-type-button-size);
  font-weight: var(--agh-type-button-weight);
  line-height: var(--agh-type-button-line-height);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--agh-space-24)));
  transition: transform var(--agh-duration-micro-min) var(--agh-easing-default);
}

.agh-skip-link:focus,
.agh-skip-link:focus-visible {
  transform: translateY(0);
  text-decoration: none;
}

#agh-main-content:focus {
  outline: none;
}

#agh-main-content:focus-visible {
  outline: calc(var(--agh-border-width-default) * 2) solid
    var(--agh-color-text-primary);
  outline-offset: calc(var(--agh-space-4) * -1);
}


/* ========================================================================== 
   03. VISUALLY HIDDEN UTILITIES
   ========================================================================== */

/**
 * Use for accessible names and supplementary assistive text that must remain
 * in the accessibility tree while staying visually hidden.
 */
.agh-visually-hidden,
.agh-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/**
 * Use where visually hidden content must become available when keyboard focus
 * enters it. Focused content returns to normal document sizing automatically.
 */
.agh-visually-hidden-focusable:not(:focus, :focus-within) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}


/* ========================================================================== 
   04. TOUCH TARGET REINFORCEMENT
   ========================================================================== */

/**
 * Running-copy links are not converted into oversized blocks. Discrete
 * navigation/actions use the locked 44px minimum interaction target.
 */
:where(
  .agh-button,
  .agh-menu-toggle,
  .agh-primary-nav__link,
  .agh-primary-nav__trigger,
  .agh-mega-menu__link,
  .agh-mega-menu__all-services,
  .agh-mobile-nav__link,
  .agh-mobile-nav__services-trigger,
  .agh-mobile-nav__service-link,
  .agh-service-card__link,
  .agh-faq__question,
  .agh-dashboard-frame__action,
  .agh-dashboard-filter__control,
  .agh-content-tag,
  .agh-article-card__link,
  .agh-legal-toc__link,
  .agh-legal-contact__link,
  .agh-form-contact-list__link,
  .agh-site-footer__link,
  .agh-site-footer__contact-link,
  .agh-site-footer__social-link,
  .agh-site-footer__platform-link
) {
  min-block-size: var(--agh-control-touch-min);
}

:where(
  .agh-button,
  .agh-menu-toggle,
  .agh-primary-nav__trigger,
  .agh-dashboard-frame__action
) {
  min-inline-size: var(--agh-control-touch-min);
}

.agh-button--tertiary {
  min-inline-size: var(--agh-control-touch-min);
}

.agh-choice__control-wrap {
  min-inline-size: var(--agh-control-touch-min);
  min-block-size: var(--agh-control-touch-min);
}


/* ========================================================================== 
   05. CURRENT / SELECTED STATE REINFORCEMENT
   ========================================================================== */

/**
 * Current and selected states must remain identifiable without colour alone.
 */
:where(
  .agh-primary-nav__link[aria-current="page"],
  .agh-mega-menu__link[aria-current="page"],
  .agh-mobile-nav__link[aria-current="page"],
  .agh-mobile-nav__service-link[aria-current="page"],
  .agh-site-footer__link[aria-current="page"]
) {
  font-weight: var(--agh-font-weight-bold);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--agh-border-width-default);
  text-underline-offset: 0.24em;
}

.agh-dashboard-filter__control[aria-pressed="true"],
.agh-dashboard-filter__control[aria-current="true"] {
  font-weight: var(--agh-font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-thickness: var(--agh-border-width-default);
  text-underline-offset: 0.2em;
}

.agh-form-steps__item[aria-current="step"] .agh-form-steps__label {
  font-weight: var(--agh-font-weight-bold);
}

.agh-process__item[aria-current="step"] .agh-process__title,
.agh-pipeline__stage[aria-current="step"] .agh-pipeline__title {
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-decoration-thickness: var(--agh-border-width-default);
  text-underline-offset: 0.22em;
}


/* ========================================================================== 
   06. DISCLOSURE / ACCORDION ACCESSIBILITY
   ========================================================================== */

/**
 * Hidden panels remain governed by semantic markup plus agh-app.js. Expanded
 * controls receive a second non-colour cue and never rely on animation alone.
 */
.agh-faq__question[aria-expanded="true"],
.agh-mobile-nav__services-trigger[aria-expanded="true"],
.agh-primary-nav__trigger[aria-expanded="true"] {
  font-weight: var(--agh-font-weight-bold);
}

.agh-faq__question[aria-expanded="true"] {
  text-decoration-line: underline;
  text-decoration-color: var(--agh-color-brand-primary);
  text-decoration-thickness: var(--agh-border-width-default);
  text-underline-offset: 0.22em;
}


/* ========================================================================== 
   07. TARGET / ANCHOR ACCESSIBILITY
   ========================================================================== */

/**
 * Sticky navigation must not cover in-page destinations reached through skip
 * navigation, Legal TOCs, article anchors or keyboard navigation.
 */
:where(
  main[id],
  section[id],
  article[id],
  h2[id],
  h3[id],
  h4[id],
  [data-agh-anchor]
) {
  scroll-margin-block-start: calc(
    var(--agh-header-height-desktop) + var(--agh-space-24)
  );
}

@media (max-width: 1199.98px) {
  :where(
    main[id],
    section[id],
    article[id],
    h2[id],
    h3[id],
    h4[id],
    [data-agh-anchor]
  ) {
    scroll-margin-block-start: calc(
      var(--agh-header-height-mobile-max) + var(--agh-space-24)
    );
  }
}

@media (max-width: 479.98px) {
  :where(
    main[id],
    section[id],
    article[id],
    h2[id],
    h3[id],
    h4[id],
    [data-agh-anchor]
  ) {
    scroll-margin-block-start: calc(
      var(--agh-header-height-mobile-min) + var(--agh-space-24)
    );
  }
}


/* ========================================================================== 
   08. STATUS, ERROR & FORM REINFORCEMENT
   ========================================================================== */

.agh-status__text,
.agh-form-status__title,
.agh-form-status__copy,
.agh-field__error,
.agh-form-summary__title,
.agh-form-summary__link {
  text-wrap: pretty;
}

.agh-field__error:not(:empty),
.agh-form-summary[data-state="error"] {
  font-weight: var(--agh-font-weight-medium);
}

:where(
  .agh-input,
  .agh-select,
  .agh-textarea
)[aria-invalid="true"] {
  border-style: solid;
  border-width: calc(var(--agh-border-width-default) * 2);
}

.agh-choice__control[aria-invalid="true"]:not(:disabled) {
  outline: calc(var(--agh-border-width-default) * 2) solid
    var(--agh-color-state-error);
  outline-offset: 2px;
}

/**
 * Long contact/legal values must remain readable under zoom and narrow widths.
 */
:where(
  .agh-site-footer__contact-link,
  .agh-site-footer__legal-company,
  .agh-form-contact-list__value,
  .agh-form-contact-list__link,
  .agh-legal-contact__value,
  .agh-legal-contact__link,
  .agh-editorial-references__item a
) {
  overflow-wrap: anywhere;
}


/* ========================================================================== 
   09. ACCESSIBILITY-SAFE DISABLED / BUSY STATES
   ========================================================================== */

:where(
  .agh-button,
  .agh-menu-toggle,
  .agh-dashboard-frame__action,
  .agh-dashboard-filter__control
):is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
}

[aria-busy="true"] {
  cursor: progress;
}

.agh-form[aria-busy="true"] :where(
  .agh-input,
  .agh-select,
  .agh-textarea,
  .agh-choice__control,
  .agh-button[type="submit"]
) {
  cursor: progress;
}


/* ========================================================================== 
   10. REDUCED MOTION
   ========================================================================== */

/**
 * Reduced motion removes decorative lift/scale/reveal behaviour while keeping
 * semantic state changes visible. Disclosure chevrons may still show their
 * final orientation, but without an animated transition.
 */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  .agh-site *,
  .agh-site *::before,
  .agh-site *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    transition-delay: 0ms;
    scroll-behavior: auto;
  }

  .agh-skip-link,
  .agh-primary-nav__link::after,
  .agh-primary-nav__chevron,
  .agh-mega-menu,
  .agh-mega-menu__link,
  .agh-mega-menu__all-services .agh-icon,
  .agh-mobile-nav__services-icon,
  .agh-faq__indicator,
  .agh-button__icon,
  .agh-icon-box,
  .agh-card,
  .agh-capability-item,
  .agh-article-card__media img,
  .agh-process--cards .agh-process__item,
  .agh-process__marker,
  .agh-workflow__step,
  .agh-workflow__icon,
  .agh-flow__item,
  .agh-flow__marker,
  .agh-dashboard-module,
  .agh-kpi-card,
  .agh-kpi-card__icon,
  .agh-dashboard-frame__action,
  .agh-dashboard-filter__control,
  .agh-form-contact-list__icon,
  .agh-article-service-link {
    transition: none;
  }

  .agh-button:active:not(:disabled, [aria-disabled="true"]),
  .agh-button--tertiary:hover:not(:disabled, [aria-disabled="true"]) .agh-button__icon,
  .agh-card:not(.agh-card--static):hover,
  .agh-service-card:hover .agh-service-card__link .agh-icon,
  .agh-capability-item:hover,
  .agh-article-card:hover .agh-article-card__media img,
  .agh-mega-menu__link:hover,
  .agh-mega-menu__all-services:hover .agh-icon,
  .agh-process--cards .agh-process__item:hover,
  .agh-process--cards .agh-process__item:hover .agh-process__marker,
  .agh-workflow__step:hover,
  .agh-workflow__step:hover .agh-workflow__icon,
  .agh-flow__item:hover,
  .agh-flow__item:hover .agh-flow__marker,
  .agh-dashboard-module:not(.agh-dashboard-module--static):hover,
  .agh-kpi-card:not(.agh-kpi-card--static):hover,
  .agh-kpi-card:not(.agh-kpi-card--static):hover .agh-kpi-card__icon,
  .agh-dashboard-frame__action:hover:not(:disabled, [aria-disabled="true"]),
  .agh-dashboard-filter__control:hover:not(:disabled, [aria-disabled="true"]),
  .agh-form-contact-list__item:has(.agh-form-contact-list__link:hover)
    .agh-form-contact-list__icon,
  .agh-article-service-link:hover {
    transform: none;
  }

  .agh-process[data-reveal="true"][data-state="pending"] .agh-process__item,
  .agh-workflow[data-reveal="true"][data-state="pending"] .agh-workflow__step,
  .agh-pipeline[data-reveal="true"][data-state="pending"] .agh-pipeline__stage,
  .agh-flow[data-reveal="true"][data-state="pending"] .agh-flow__item,
  .agh-dashboard-frame[data-reveal="true"][data-state="pending"]
    .agh-dashboard-module {
    opacity: 1;
    transform: none;
  }

  .agh-form__spinner {
    animation: none;
    border-inline-end-color: currentColor;
  }
}


/* ========================================================================== 
   11. FORCED COLOURS / HIGH-CONTRAST ENVIRONMENTS
   ========================================================================== */

@media (forced-colors: active) {
  :where(
    a[href],
    area[href],
    button,
    input:not([type="hidden"]),
    select,
    textarea,
    summary,
    [contenteditable="true"],
    [role="button"],
    [role="checkbox"],
    [role="combobox"],
    [role="link"],
    [role="menuitem"],
    [role="option"],
    [role="radio"],
    [role="slider"],
    [role="spinbutton"],
    [role="switch"],
    [role="tab"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: var(--agh-space-4);
  }

  :where(
    .agh-button,
    .agh-menu-toggle,
    .agh-mega-menu,
    .agh-dashboard-frame__action,
    .agh-dashboard-filter__control,
    .agh-card,
    .agh-capability-item,
    .agh-content-matrix__item,
    .agh-process--cards .agh-process__item,
    .agh-workflow__step,
    .agh-flow__item,
    .agh-dashboard-frame,
    .agh-dashboard-module,
    .agh-kpi-card,
    .agh-status,
    .agh-form-panel,
    .agh-form-status,
    .agh-form-summary,
    .agh-callout,
    .agh-editorial-note,
    .agh-article-takeaway,
    .agh-article-service-link,
    .agh-legal-toc,
    .agh-data-table-wrap,
    .agh-editorial-table-wrap,
    .agh-legal-table-wrap
  ) {
    border-color: CanvasText;
  }

  :where(
    .agh-primary-nav__link[aria-current="page"],
    .agh-mega-menu__link[aria-current="page"],
    .agh-mobile-nav__link[aria-current="page"],
    .agh-mobile-nav__service-link[aria-current="page"],
    .agh-site-footer__link[aria-current="page"],
    .agh-dashboard-filter__control[aria-pressed="true"],
    .agh-dashboard-filter__control[aria-current="true"],
    .agh-form-steps__item[aria-current="step"] .agh-form-steps__label,
    .agh-process__item[aria-current="step"] .agh-process__title,
    .agh-pipeline__stage[aria-current="step"] .agh-pipeline__title
  ) {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
  }

  .agh-status__icon,
  .agh-form-status__icon,
  .agh-field__error-icon,
  .agh-form-summary__icon,
  .agh-icon-box,
  .agh-workflow__icon,
  .agh-flow__marker,
  .agh-kpi-card__icon {
    color: currentColor;
  }

  .agh-data-visual__legend-marker,
  .agh-content-tag__marker,
  .agh-connector__node,
  .agh-hero__signal::before {
    border: var(--agh-border-width-default) solid CanvasText;
  }

  .agh-progress__bar {
    border: var(--agh-border-width-default) solid CanvasText;
  }

  .agh-skip-link {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
  }
}


/* ========================================================================== 
   12. INCREASED-CONTRAST PREFERENCE
   ========================================================================== */

@media (prefers-contrast: more) {
  :where(
    .agh-card,
    .agh-capability-item,
    .agh-content-matrix__item,
    .agh-process--cards .agh-process__item,
    .agh-workflow__step,
    .agh-flow__item,
    .agh-dashboard-module,
    .agh-kpi-card,
    .agh-form-panel,
    .agh-callout,
    .agh-editorial-note,
    .agh-legal-toc
  ) {
    border-color: rgba(24, 24, 24, 0.42);
  }

  :where(
    .agh-site-footer__link,
    .agh-site-footer__contact-link,
    .agh-site-footer__social-link,
    .agh-site-footer__platform-link,
    .agh-article-body a,
    .agh-legal__body a
  ) {
    text-decoration-thickness: 2px;
  }
}


/* ========================================================================== 
   13. PRINT ACCESSIBILITY
   ========================================================================== */

@media print {
  .agh-skip-link,
  .agh-menu-toggle,
  .agh-nav-backdrop,
  .agh-mobile-nav {
    display: none;
  }

  :where(
    a[href],
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
  ) {
    outline: 0;
    box-shadow: none;
  }

  .agh-article-body a[href],
  .agh-legal__body a[href] {
    text-decoration: underline;
  }

  .agh-card,
  .agh-dashboard-frame,
  .agh-dashboard-module,
  .agh-kpi-card,
  .agh-form-panel,
  .agh-article-service-link {
    box-shadow: none;
  }
}


/* ========================================================================== 
   14. IMPLEMENTATION BOUNDARIES
   ========================================================================== */

/**
 * Markup/template requirements remain mandatory:
 *
 * - Semantic landmarks and logical heading structure.
 * - Exactly one page H1.
 * - Informative images need meaningful alt text; decorative images alt="".
 * - Decorative SVGs use aria-hidden="true" and focusable="false".
 * - Informative SVGs need an accessible name or equivalent hidden text.
 * - Icon-only buttons need an accessible name.
 * - Services navigation keeps a real /services/ link and a separate disclosure.
 * - FAQ controls require aria-expanded plus an associated controlled panel.
 * - Form fields require visible labels and programmatic label association.
 * - Error messages must be associated with the invalid control.
 * - Status, progress and selected state must not rely on colour alone.
 * - Scrollable data regions should be keyboard reachable when their markup
 *   requires independent scrolling.
 * - agh-app.js / agh-forms.js own confirmed runtime focus/ARIA/state behaviour.
 *
 * This stylesheet improves the implementation baseline but does not claim
 * WCAG certification or formal accessibility conformance. Production keyboard,
 * screen-reader, zoom, contrast and reduced-motion QA remain required.
 */