/* === reset.css === */
/*
 * CSS Reset & Base Styles
 * PSOS Website - Plain Speak Online Services
 */

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

/* Remove default margins and paddings */
* {
  margin: 0;
  padding: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: -webkit-fill-available;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  /* iOS Safari viewport fix — 100vh includes address bar space */
  min-height: -webkit-fill-available;
  min-height: calc(var(--vh, 1vh) * 100);
  line-height: 1.5;
  text-rendering: optimizeSpeed;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === variables.css === */
/*
 * Design System Variables
 * PSOS Website - Plain Speak Online Services
 * All design tokens defined here for consistency
 */

:root {
  /* Base Colors */
  --primary-white: #FFFFFF;
  --text-dark: #2B2B2B;
  --text-muted: #6C757D;

  /* Retro Color Palette */
  --retro-coral: #E85D5D;
  --retro-orange: #E89147;
  --retro-yellow: #F4B942;
  --retro-teal: #238078;
  --retro-purple: #7B4BC4;
  --retro-pink: #D6246E;
  --retro-yellow-hover: #e6aa30;

  /* Background Colors */
  --cream: #FCF6E8;
  --sand: #F4E8D3;
  --navy: #2D3047;
  --background-light: var(--cream);

  /* Legacy Support (keeping old names mapped to new colors) */
  --accent-teal: var(--retro-teal);
  --accent-orange: var(--retro-coral);

  /* Supporting Colors */
  --border-light: #DEE2E6;
  --border-dark: var(--navy);
  --success-green: #10B981;
  --warning-yellow: var(--retro-yellow);
  --error-red: #EF4444;
  --text-contrast-improved: #5a5d6a;
  --placeholder-text: #6b7280;

  /* Semantic Colors — coral bg with navy text passes WCAG AA (4.68:1) */
  --color-primary: var(--retro-coral);
  --color-primary-hover: #D94E4E;
  --color-secondary: var(--retro-teal);
  --color-secondary-hover: #2D9B93;

  /* Typography - Font Families */
  --font-display: 'Space Grotesk', 'Space Grotesk Fallback', 'Archivo Black', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'DM Sans', 'DM Sans Fallback', 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Inter Fallback', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Caveat', 'Caveat Fallback', 'Shadows Into Light', cursive;

  /* Typography - Font Sizes (Fluid - scales smoothly from mobile to desktop) */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1.125rem;   /* 18px */
  --text-lg: 1.25rem;      /* 20px */
  /* Static fallbacks for browsers without clamp() (Safari <13.1) */
  --text-xl: 1.375rem;                                         /* 22px fallback */
  --text-2xl: 1.75rem;                                         /* 28px fallback */
  --text-3xl: 2.25rem;                                         /* 36px fallback */
  --text-4xl: 3rem;                                            /* 48px fallback */
  --text-5xl: 3.75rem;                                         /* 60px fallback */

  /* Typography - Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Typography - Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* Spacing Scale */
  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 1.5rem;      /* 24px */
  --space-lg: 2rem;        /* 32px */
  --space-xl: 3rem;        /* 48px */
  --space-2xl: 4rem;       /* 64px */
  --space-3xl: 5rem;       /* 80px */
  --space-4xl: 6rem;       /* 96px */

  /* Section Padding (Fluid) — static fallback for browsers without clamp() */
  --section-padding-y: 4rem;
  --section-padding-x: clamp(1.5rem, 4vw, 5rem);

  /* Container Max-widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* Border Radius */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-full: 9999px;

  /* Shadows - Standard */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Retro Shadows - Softened & More Subtle */
  --shadow-retro-sm: 2px 2px 0px var(--navy);
  --shadow-retro-md: 3px 3px 0px var(--navy);
  --shadow-retro-lg: 4px 4px 0px var(--navy);
  --shadow-retro-xl: 6px 6px 0px var(--navy);

  /* Colored Retro Shadows - Softened */
  --shadow-retro-teal: 3px 3px 0px var(--retro-teal);
  --shadow-retro-coral: 3px 3px 0px var(--retro-coral);
  --shadow-retro-yellow: 3px 3px 0px var(--retro-yellow);
  --shadow-retro-purple: 3px 3px 0px var(--retro-purple);

  /* Text Shadows - Layered Retro Effect */
  --text-shadow-retro-sm: 2px 2px 0px var(--retro-yellow);
  --text-shadow-retro-md:
    3px 3px 0px var(--retro-yellow),
    6px 6px 0px var(--retro-coral);
  --text-shadow-retro-lg:
    4px 4px 0px var(--retro-yellow),
    8px 8px 0px var(--retro-coral),
    12px 12px 0px var(--retro-purple);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Borders */
  --border-thin: 2px;
  --border-medium: 3px;
  --border-thick: 4px;
  --border-extra-thick: 6px;

  /* Hover Lift Scale */
  --lift-sm: -2px;
  --lift-md: -4px;
  --lift-lg: -8px;

  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
}

/* Fluid typography and spacing for browsers supporting clamp() */
@supports (font-size: clamp(1rem, 2vw, 2rem)) {
  :root {
    --text-xl: clamp(1.25rem, 1.125rem + 0.3125vw, 1.5rem);    /* 20px -> 24px */
    --text-2xl: clamp(1.5rem, 1.125rem + 0.9375vw, 2rem);      /* 24px -> 32px */
    --text-3xl: clamp(2rem, 1.25rem + 1.875vw, 2.5rem);        /* 32px -> 40px */
    --text-4xl: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem);         /* 40px -> 56px */
    --text-5xl: clamp(3rem, 2rem + 3vw, 4.5rem);              /* 48px -> 72px */
    --section-padding-y: clamp(3rem, 2rem + 2.5vw, 5rem);
  }
}

/* === typography.css === */
/*
 * Typography Styles
 * PSOS Website - Plain Speak Online Services
 */

/* Google Fonts loaded via <link> in HTML <head> — no @import needed */

/* Base Typography */
body {
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px - slightly larger for better readability */
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-dark);
  background-color: var(--primary-white);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-dark);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* Paragraph */
p {
  margin-bottom: var(--space-md);
  max-width: 65ch; /* Optimal reading width */
}

p:last-child {
  margin-bottom: 0;
}

/* Center paragraph blocks inside centered containers.
   The base p { max-width: 65ch } constrains paragraph width for readability,
   but without auto margins the block stays left-aligned inside wider centered
   containers. This rule ensures the paragraph block itself is also centered. */
.text-center p,
.text-block-center p,
[style*="text-align: center"] p,
[style*="text-align:center"] p {
  margin-left: auto;
  margin-right: auto;
}

p.lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* Links */
a {
  color: var(--accent-teal);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

a:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Lists */
ul, ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

li {
  margin-bottom: var(--space-xs);
}

ul[role="list"],
ol[role="list"] {
  padding-left: 0;
  list-style: none;
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--accent-teal);
  padding-left: var(--space-lg);
  margin: var(--space-xl) 0;
  font-style: italic;
  color: var(--text-muted);
}

/* Code */
code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background-color: var(--background-light);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
}

pre {
  background-color: var(--background-light);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

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

/* Small Text */
small, .text-small {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Text Utilities */
.text-muted {
  color: var(--text-muted);
}

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

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: var(--weight-bold);
}

.text-semibold {
  font-weight: var(--weight-semibold);
}

.text-medium {
  font-weight: var(--weight-medium);
}

/* Retro Typography Treatments */
.display-retro {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.heading-retro {
  font-family: var(--font-heading);
  font-weight: 700;
}

.text-shadow-retro {
  text-shadow: none; /* Removed for more mature look */
}

.text-shadow-retro-lg {
  text-shadow: none; /* Removed for more mature look */
}

.text-accent {
  font-family: var(--font-accent);
  font-weight: 600;
}

/* Highlight Effect */
.highlight-yellow {
  background: linear-gradient(180deg, transparent 60%, var(--retro-yellow) 60%);
  padding: 0 4px;
}

.highlight-coral {
  background: linear-gradient(180deg, transparent 60%, var(--retro-coral) 60%);
  padding: 0 4px;
}

.highlight-teal {
  background: linear-gradient(180deg, transparent 60%, var(--retro-teal) 60%);
  padding: 0 4px;
}

/* Gradient Text */
.text-gradient-purple {
  background: linear-gradient(135deg, var(--retro-purple) 0%, var(--retro-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-sunset {
  background: linear-gradient(135deg, var(--retro-coral) 0%, var(--retro-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Outlined Text */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--navy);
  text-stroke: 2px var(--navy);
}

/* Responsive Typography Adjustments */
@media (max-width: 767px) {
  body {
    font-size: 1rem; /* 16px on mobile for readability */
  }

  h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--space-sm);
  }

  p {
    margin-bottom: var(--space-sm);
  }

  .text-shadow-retro,
  .text-shadow-retro-lg {
    text-shadow: var(--text-shadow-retro-sm); /* Simpler shadows on mobile */
  }
}

/* === layouts.css === */
/*
 * Layout Utilities
 * PSOS Website - Plain Speak Online Services
 */

/* Container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

.container-sm {
  max-width: var(--container-sm);
}

.container-md {
  max-width: var(--container-md);
}

.container-lg {
  max-width: var(--container-lg);
}

/* Sections */
.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section-sm {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.section-lg {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

/* Background Variations */
.bg-white {
  background-color: var(--primary-white);
}

.bg-light {
  background-color: var(--background-light);
}

.bg-teal-dark {
  background-color: var(--color-secondary-hover);
  color: var(--primary-white);
}

.bg-teal {
  background-color: var(--accent-teal);
  color: var(--primary-white);
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-lg);
}

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

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

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

/* Responsive Grid - Laptop */
@media (max-width: 1279px) and (min-width: 1024px) {
  .two-col-split {
    gap: var(--space-xl);
  }

  .grid-3 {
    gap: var(--space-md);
  }

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

/* Responsive Grid - Tablet */
@media (max-width: 1023px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Flex Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

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

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

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

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

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

.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.gap-xl {
  gap: var(--space-xl);
}

/* Flexbox gap fallback for Safari <14.1 using margin-based spacing.
   Grid gap is supported everywhere; flex gap is not in older Safari.
   These margins provide spacing when flex gap is unavailable. */
@supports not (gap: 1rem) {
  .flex.gap-xs > * + * { margin-left: var(--space-xs); }
  .flex.flex-col.gap-xs > * + * { margin-left: 0; margin-top: var(--space-xs); }
  .flex.gap-sm > * + * { margin-left: var(--space-sm); }
  .flex.flex-col.gap-sm > * + * { margin-left: 0; margin-top: var(--space-sm); }
  .flex.gap-md > * + * { margin-left: var(--space-md); }
  .flex.flex-col.gap-md > * + * { margin-left: 0; margin-top: var(--space-md); }
  .flex.gap-lg > * + * { margin-left: var(--space-lg); }
  .flex.flex-col.gap-lg > * + * { margin-left: 0; margin-top: var(--space-lg); }
  .flex.gap-xl > * + * { margin-left: var(--space-xl); }
  .flex.flex-col.gap-xl > * + * { margin-left: 0; margin-top: var(--space-xl); }
}

/* Spacing Utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }

.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

/* Two Column Layout (60/40 split) */
.two-col-split {
  display: grid;
  grid-template-columns: 57fr 43fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 767px) {
  .two-col-split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Max Width Text Block */
.text-block {
  max-width: 65ch;
}

.text-block-center {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Visibility Utilities */
.hide-mobile {
  display: block;
}

.show-mobile {
  display: none;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }

  .show-mobile {
    display: block;
  }
}

/* === buttons.css === */
/*
 * PSOS Components - buttons
 * Split from components.css for maintainability
 */

/*
 * Component Styles
 * PSOS Website - Plain Speak Online Services
 */

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Skip Navigation Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background-color: var(--retro-coral);
  color: var(--primary-white);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: var(--border-thick) solid var(--navy);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-retro-md);
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
  outline: 2px solid var(--retro-yellow);
  outline-offset: 4px;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.875rem 2rem;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm); /* Softer corners */
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  min-height: 44px; /* Touch-friendly */
  position: relative;
}

.btn:focus-visible {
  outline: 2px solid var(--retro-yellow);
  outline-offset: 4px;
}

/* Primary Button — coral bg with navy text passes WCAG AA (4.68:1) */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--shadow-retro-md);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--navy);
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

/* Secondary Button - Retro White */
.btn-secondary {
  background-color: var(--primary-white);
  color: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--shadow-retro-md);
}

.btn-secondary:hover {
  background-color: var(--retro-yellow);
  color: var(--navy);
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

/* Outline Button */
.btn-outline {
  background-color: var(--primary-white);
  color: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--shadow-retro-md);
}

.btn-outline:hover {
  background-color: var(--retro-teal);
  color: var(--primary-white);
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.btn-outline:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

/* Disabled State */
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Sizes */
.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: var(--text-sm);
  min-height: 38px;
  border-width: 2px;
}

.btn-lg {
  padding: 1.125rem 2.5rem;
  font-size: var(--text-lg);
  min-height: 52px;
  border-width: 2px;
}

/* Button Group */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

/* === cards.css === */
/*
 * PSOS Components - cards
 * Split from components.css for maintainability
 */

/* ========================================
   CARDS
   ======================================== */

.card {
  background-color: var(--primary-white);
  border: var(--border-thick) solid var(--navy);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-retro-lg);
  transition: all var(--transition-bounce);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card:hover {
  transform: translateY(var(--lift-lg));
  box-shadow: var(--shadow-retro-xl);
}

.card:focus-within {
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
}

.card-header {
  margin-bottom: var(--space-md);
}

.card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  color: var(--retro-teal);
  stroke-width: 2.5px;
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
  margin-bottom: var(--space-sm);
}

.card-body {
  flex: 1;
  margin-bottom: var(--space-md);
}

.card-footer {
  margin-top: auto;
  padding-top: var(--space-md);
}

/* Card Variants */
.card-highlight {
  border-color: var(--retro-teal);
  border-width: var(--border-extra-thick);
  border-left-width: 12px;
  box-shadow: var(--shadow-retro-teal);
}

.card-highlight:hover {
  box-shadow: 10px 10px 0px var(--retro-purple);
}

.card-flat {
  box-shadow: none;
  border: var(--border-medium) solid var(--navy);
}

.card-flat:hover {
  box-shadow: var(--shadow-retro-sm);
  transform: translateY(var(--lift-md));
}

/* Retro Card Variants with Colored Backgrounds */
.card-retro-yellow {
  background-color: var(--retro-yellow);
  border-color: var(--navy);
  color: var(--navy);
}

.card-retro-yellow:hover {
  transform: translateY(var(--lift-lg));
}

.card-retro-coral {
  background-color: var(--retro-coral);
  border-color: var(--navy);
  color: var(--primary-white);
}

.card-retro-coral .card-title {
  color: var(--primary-white);
}

.card-retro-teal {
  background-color: var(--retro-teal);
  border-color: var(--navy);
  color: var(--primary-white);
}

.card-retro-teal .card-title {
  color: var(--primary-white);
}

.card-retro-purple {
  background: linear-gradient(135deg, var(--retro-purple) 0%, var(--retro-pink) 100%);
  border-color: var(--navy);
  color: var(--primary-white);
}

.card-retro-purple .card-title {
  color: var(--primary-white);
}

/* Border Accent Variants */
.card-border-teal {
  border-left: 12px solid var(--retro-teal);
}

.card-border-coral {
  border-left: 12px solid var(--retro-coral);
}

.card-border-purple {
  border-left: 12px solid var(--retro-purple);
}

.card-border-yellow {
  border-left: 12px solid var(--retro-yellow);
}

/* === forms.css === */
/*
 * PSOS Components - forms
 * Split from components.css for maintainability
 */

/* ========================================
   FORMS
   ======================================== */

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-xs);
  color: var(--text-dark);
}

.form-label-required::after {
  content: ' *';
  color: var(--error-red);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: var(--primary-white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  min-height: 44px; /* Touch-friendly */
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--retro-teal);
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(35, 128, 120, 0.15);
}

.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  border-color: var(--retro-teal);
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background-color: var(--background-light);
  cursor: not-allowed;
  opacity: 0.6;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232D3047' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-helper {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.form-error {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--error-red);
}

.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: var(--error-red);
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.form-check-input {
  margin-top: 0.25rem;
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
}

.form-check-input:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
}

.form-check:hover {
  background-color: var(--sand);
  border-radius: var(--radius-sm);
}

.form-check-label {
  font-size: var(--text-base);
  cursor: pointer;
}

/* === badges-alerts.css === */
/*
 * PSOS Components - badges-alerts
 * Split from components.css for maintainability
 */

/* ========================================
   BADGES & PILLS
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.375rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--accent-teal);
  color: var(--primary-white);
}

.badge-secondary {
  background-color: var(--color-secondary);
  color: var(--primary-white);
}

.badge-light {
  background-color: var(--background-light);
  color: var(--text-dark);
}

.badge-success {
  background-color: var(--success-green);
  color: var(--primary-white);
}

/* ========================================
   ALERTS & MESSAGES
   ======================================== */

.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-bottom: var(--space-md);
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-left-color: var(--success-green);
  color: var(--text-dark);
}

.alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left-color: var(--warning-yellow);
  color: var(--text-dark);
}

.alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  border-left-color: var(--error-red);
  color: var(--text-dark);
}

.alert-info {
  background-color: rgba(44, 154, 142, 0.1);
  border-left-color: var(--color-secondary);
  color: var(--text-dark);
}

/* === header-nav.css === */
/*
 * PSOS Components - header-nav
 * Split from components.css for maintainability
 */

/* ========================================
   HEADER & NAVIGATION
   ======================================== */

.header {
  background-color: var(--primary-white);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-xs) 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
}

.header.header-hidden {
  transform: translateY(-100%);
}

.header.header-visible {
  transform: translateY(0);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.logo {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: color var(--transition-fast);
}

.logo:hover {
  color: var(--color-secondary-hover);
  text-decoration: none;
}

.logo img {
  height: 90px; /* Fallback for browsers without clamp() */
  height: clamp(70px, 8vw, 110px);
  width: auto;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-main {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.logo-sub {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link {
  font-weight: var(--weight-medium);
  color: var(--text-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-xs) var(--space-sm);
  position: relative;
}

.nav-link:hover {
  color: var(--retro-teal);
  text-decoration: none;
}

.nav-link:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 4px;
  border-radius: 2px;
  color: var(--retro-teal);
}

.nav-link.active {
  color: var(--retro-teal);
  font-weight: var(--weight-semibold);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: var(--space-sm);
  right: var(--space-sm);
  height: 3px;
  background-color: var(--retro-coral);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: var(--space-xs);
  cursor: pointer;
  border-radius: 4px;
}

.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 3px;
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--text-dark);
  transition: all var(--transition-fast);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Navigation Dropdown Styles */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--weight-medium);
  color: var(--text-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  background: none;
  border: none;
  font-size: var(--text-base);
  font-family: var(--font-body);
}

.nav-dropdown-toggle:hover {
  color: var(--retro-teal);
}

.nav-dropdown-toggle:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 4px;
  border-radius: 2px;
}

.dropdown-icon {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-bounce);
}

.nav-dropdown.active .dropdown-icon {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 280px;
  background-color: var(--primary-white);
  border: var(--border-thick) solid var(--navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-retro-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-bounce);
  z-index: var(--z-popover);
  padding: var(--space-sm) 0;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.active .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: block;
  padding: var(--space-sm) var(--space-lg);
  color: var(--navy);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  position: relative;
}

.nav-dropdown-item:hover {
  background-color: var(--retro-teal);
  color: var(--primary-white);
  padding-left: calc(var(--space-lg) + var(--space-xs));
}

.nav-dropdown-item:focus-visible {
  outline: 2px solid var(--retro-yellow);
  outline-offset: -2px;
}

.nav-dropdown-overview {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--navy);
  color: var(--primary-white);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  border-bottom: 2px solid var(--border-light);
}

.nav-dropdown-overview svg {
  flex-shrink: 0;
}

.nav-dropdown-overview:hover {
  background-color: var(--retro-teal);
}

.nav-dropdown-divider {
  height: 2px;
  background-color: var(--navy);
  margin: var(--space-xs) var(--space-md);
}

/* Mobile Navigation (also activates for landscape phones) */
@media (max-width: 767px), ((orientation: landscape) and (max-height: 500px)) {
  .header {
    padding: 0;
  }

  .logo img {
    height: 130px;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    top: 132px;
    left: 0;
    right: 0;
    background-color: var(--primary-white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-md);
    box-shadow: var(--shadow-lg);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-base);
  }

  .nav.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-link {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
  }

  .nav-link.active::after {
    display: none;
  }

  .header-cta {
    width: 100%;
  }

  /* Mobile dropdown styles */
  .nav-dropdown-menu {
    position: static;
    min-width: 0;
    max-width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    margin-top: var(--space-sm);
    border-radius: var(--radius-sm);
    border: none;
    box-shadow: none;
    padding: 0;
    background-color: var(--cream);
  }

  .nav-dropdown.active .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-overview {
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .nav-dropdown-item {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }
}

/* Landscape phones — compact logo and nav position for short viewport */
@media (orientation: landscape) and (max-height: 500px) {
  .logo img {
    height: clamp(50px, 8vw, 70px);
  }

  .nav {
    top: 76px;
  }
}

/* === layout-elements.css === */
/*
 * PSOS Components - layout-elements
 * Split from components.css for maintainability
 */

/* ========================================
   DIVIDER
   ======================================== */

.divider {
  height: 1px;
  background-color: var(--border-light);
  border: none;
  margin: var(--space-2xl) 0;
}

/* ========================================
   CTA BLOCK
   ======================================== */

.cta-block {
  background-color: var(--background-light);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  border: 2px solid var(--border-light);
}

.cta-block-highlight {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%);
  color: var(--primary-white);
  border: none;
}

.cta-block-highlight h2,
.cta-block-highlight h3,
.cta-block-highlight p {
  color: var(--primary-white);
}

/* ========================================
   SERVICE CARD (Specific Component)
   ======================================== */

.service-card {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.service-card:hover {
  border-color: var(--retro-teal);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  text-decoration: none;
}

.service-card:focus-visible {
  outline: 3px solid var(--retro-teal);
  outline-offset: 2px;
  border-color: var(--retro-teal);
}

.service-card-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-md);
  color: var(--retro-teal);
}

.service-card-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
}

.service-card-description {
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  flex: 1;
}

.service-card-link {
  color: var(--accent-teal);
  font-weight: var(--weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* === footer.css === */
/*
 * PSOS Components - footer
 * Split from components.css for maintainability
 */

/* ========================================
   FOOTER
   ======================================== */

.footer {
  background-color: var(--primary-white);
  color: var(--navy);
  padding: var(--space-3xl) 0 var(--space-xl);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-light);
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle, var(--navy) 1.5px, transparent 1.5px);
  background-size: 25px 25px;
  opacity: 0.06;
  pointer-events: none;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-section h3 {
  font-family: var(--font-display);
  color: var(--navy);
  font-size: var(--text-xl);
  font-weight: 800;
  margin-bottom: var(--space-md);
}

.footer-section p,
.footer-section a {
  color: var(--text-dark);
  font-size: var(--text-base);
}

.footer-section a {
  display: block;
  margin-bottom: var(--space-xs);
  transition: all var(--transition-fast);
  text-decoration: none;
  position: relative;
}

.footer-section a:hover {
  color: var(--retro-teal);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.footer-section a:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Override for buttons in footer to prevent full-width */
.footer-section .btn {
  display: inline-flex;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: var(--space-xs);
}

/* Footer Email Signup */
.footer-email-signup {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.footer-email-signup .form-input {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.7);
  border-color: var(--navy);
  color: var(--navy);
}

.footer-email-signup .form-input::placeholder {
  color: rgba(45, 48, 71, 0.6);
}

.footer-email-signup .form-input:focus {
  background-color: var(--primary-white);
  border-color: var(--navy);
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-bottom p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.footer-social {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: var(--border-medium) solid var(--navy);
  border-radius: var(--radius-md);
  color: var(--navy);
  transition: all var(--transition-fast);
}

.footer-social a:hover {
  background-color: var(--navy);
  color: var(--primary-white);
  border-color: var(--navy);
  transform: translateY(-2px);
}

.footer-social a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* Footer Responsive - Laptop */
@media (max-width: 1279px) and (min-width: 1024px) {
  .footer-content {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* Footer Responsive - Tablet */
@media (max-width: 1023px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
  }
}

/* Inline contact icons (hidden on desktop) */
.contact-icon {
  display: none;
}

@media (max-width: 767px) {
  .footer {
    padding: var(--space-2xl) 0 var(--space-lg);
  }

  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .footer-section:first-child,
  .footer-section:last-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Social icons first in footer-bottom on mobile */
  .footer-bottom .footer-social {
    order: -1;
    width: 100%;
    justify-content: center;
    margin-bottom: var(--space-md);
  }

  .rights-reserved {
    display: block;
  }

  .contact-label {
    display: none;
  }

  .contact-line {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 2px solid var(--navy);
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 0px var(--navy);
  }

  .contact-icon-coral {
    background-color: var(--retro-coral);
    color: var(--primary-white);
  }
  .contact-icon-teal {
    background-color: var(--retro-teal);
    color: var(--primary-white);
  }
  .contact-icon-yellow {
    background-color: var(--retro-yellow);
    color: var(--primary-white);
  }
  .contact-icon-purple {
    background-color: var(--retro-purple);
  }

  .contact-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .footer-email-signup {
    flex-direction: column;
  }
}

/* === decorative.css === */
/*
 * PSOS Components - decorative
 * Split from components.css for maintainability
 */

/* ========================================
   DECORATIVE SHAPES & PATTERNS
   ======================================== */

/* Geometric Shapes */
.shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.shape-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: var(--border-thick) solid var(--navy);
}

.shape-circle-teal {
  background-color: var(--retro-teal);
  border-color: var(--navy);
}

.shape-circle-coral {
  background-color: var(--retro-coral);
  border-color: var(--navy);
}

.shape-circle-yellow {
  background-color: var(--retro-yellow);
  border-color: var(--navy);
}

.shape-triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 70px solid var(--retro-purple);
  filter: drop-shadow(2px 2px 0px var(--navy));
}

.shape-triangle-teal {
  border-bottom-color: var(--retro-teal);
}

.shape-square {
  width: 50px;
  height: 50px;
  background-color: var(--retro-teal);
  border: var(--border-medium) solid var(--navy);
  transform: rotate(45deg);
}

.shape-squiggle {
  width: 80px;
  height: 6px;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--retro-coral) 0px,
      var(--retro-coral) 10px,
      transparent 10px,
      transparent 20px
    );
  border-radius: 3px;
}

/* Large circle variant */
.shape-circle-lg {
  width: 168px;
  height: 168px;
}

/* Medium square variant */
.shape-square-md {
  width: 70px;
  height: 70px;
  background-color: var(--retro-orange);
  border: var(--border-medium) solid var(--navy);
  transform: rotate(12deg);
}

/* Additional circle color variants */
.shape-circle-purple {
  background-color: var(--retro-purple);
  border-color: var(--navy);
}

.shape-circle-pink {
  background-color: var(--retro-pink);
  border-color: var(--navy);
}

/* Additional triangle color variants */
.shape-triangle-pink {
  border-bottom-color: var(--retro-pink);
}


.shape-triangle-yellow {
  border-bottom-color: var(--retro-yellow);
}

/* Background Patterns */
.pattern-dots {
  background-image:
    radial-gradient(circle, var(--navy) 2px, transparent 2px);
  background-size: 30px 30px;
  opacity: 0.05;
}

.pattern-stripes-diagonal {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      var(--retro-teal) 10px,
      var(--retro-teal) 12px
    );
  opacity: 0.08;
}

.pattern-stripes-horizontal {
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--retro-yellow),
      var(--retro-yellow) 4px,
      var(--retro-coral) 4px,
      var(--retro-coral) 8px,
      var(--retro-purple) 8px,
      var(--retro-purple) 12px
    );
  opacity: 0.1;
}

.pattern-grid {
  background-image:
    linear-gradient(var(--navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.05;
}

.pattern-waves {
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 0, 50 10 T 100 10' stroke='%23238078' fill='none' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 100px 20px;
  opacity: 0.15;
}

/* Pattern Overlays */
.pattern-overlay {
  position: relative;
  overflow: hidden;
}

.pattern-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.pattern-overlay.dots::before {
  background-image:
    radial-gradient(circle, var(--navy) 2px, transparent 2px);
  background-size: 25px 25px;
  opacity: 0.06;
}

.pattern-overlay.stripes::before {
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 12px,
      var(--navy) 12px,
      var(--navy) 14px
    );
  opacity: 0.04;
}

/* Retro Badge/Sticker - Simplified */
.badge-retro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0.01em;
  background-color: var(--retro-yellow);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.badge-retro:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.badge-retro-coral {
  background-color: var(--retro-coral);
  color: var(--primary-white);
}

.badge-retro-teal {
  background-color: var(--retro-teal);
  color: var(--navy);
}

.badge-retro-purple {
  background: linear-gradient(135deg, var(--retro-purple) 0%, var(--retro-pink) 100%);
  color: var(--primary-white);
}

/* Portfolio Card — Industry Overline */
.portfolio-industry {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

/* Shimmer Badge - Animated gradient effect */
.badge-retro-shimmer {
  background: linear-gradient(
    110deg,
    var(--retro-purple) 0%,
    var(--retro-pink) 25%,
    var(--retro-coral) 50%,
    var(--retro-pink) 75%,
    var(--retro-purple) 100%
  );
  background-size: 200% 100%;
  color: var(--primary-white);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/* Number Badge - Simplified */
.number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  background-color: var(--retro-coral);
  color: var(--primary-white);
  border: 3px solid var(--navy);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}

.number-badge-yellow {
  background-color: var(--retro-yellow);
  color: var(--navy);
}

.number-badge-teal {
  background-color: var(--retro-teal);
  color: var(--navy);
}

.number-badge-purple {
  background: linear-gradient(135deg, var(--retro-purple) 0%, var(--retro-pink) 100%);
  color: var(--primary-white);
}

/* Section Dividers */
.divider-retro {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--retro-coral) 0%,
    var(--retro-orange) 25%,
    var(--retro-yellow) 50%,
    var(--retro-teal) 75%,
    var(--retro-purple) 100%
  );
  border: none;
  margin: var(--space-2xl) 0;
  border-radius: 3px;
}

.divider-wavy {
  height: 40px;
  background-image:
    url("data:image/svg+xml,%3Csvg width='1200' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q 150 0, 300 20 T 600 20 T 900 20 T 1200 20' stroke='%23238078' fill='none' stroke-width='6'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1200px 40px;
  border: none;
  margin: var(--space-2xl) 0;
}

/* ========================================
   GLOSSARY PROMO BADGE (Retro)
   ======================================== */

.glossary-promo {
  position: relative;
  background-color: var(--retro-yellow);
  border: 4px solid var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: 6px 6px 0 var(--navy);
  padding: 0;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.glossary-promo:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--navy);
}

.glossary-promo-stripe {
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--retro-coral),
    var(--retro-orange),
    var(--retro-yellow),
    var(--retro-teal),
    var(--retro-purple)
  );
}

.glossary-promo-inner {
  padding: var(--space-xl) var(--space-2xl);
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.glossary-promo-sticker {
  position: absolute;
  top: 20px;
  right: -4px;
  background-color: var(--retro-coral);
  color: var(--primary-white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xs);
  padding: 4px 14px 4px 12px;
  border: 3px solid var(--navy);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow: -2px 2px 0 var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.glossary-promo-stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-size: var(--text-xl);
  color: var(--navy);
  opacity: 0.25;
  line-height: 1;
}

.glossary-promo-content {
  flex: 1;
}

.glossary-promo-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: var(--space-xs);
  line-height: 1.2;
}

.glossary-promo-text {
  color: var(--navy);
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  opacity: 0.85;
}

.glossary-promo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--navy);
  color: var(--primary-white);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-lg);
  border: 3px solid var(--navy);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 3px 3px 0 var(--retro-teal);
}

.glossary-promo-link:hover {
  background-color: var(--retro-teal);
  color: var(--navy);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--navy);
}

.glossary-promo-link:focus-visible {
  outline: 3px solid var(--retro-teal);
  outline-offset: 3px;
}

.glossary-promo-link svg {
  transition: transform var(--transition-fast);
}

.glossary-promo-link:hover svg {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .glossary-promo-inner {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }

  .glossary-promo-stars {
    display: none;
  }

  .glossary-promo-link {
    width: 100%;
    justify-content: center;
  }

  .glossary-promo-sticker {
    top: 14px;
  }
}

/* ========================================
   ANIMATION ENHANCEMENTS
   ======================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Enhanced hover states for service cards */
.service-card {
  transform: translateZ(0); /* Force GPU acceleration */
  will-change: transform, box-shadow;
}

.service-card:hover .service-card-icon {
  transform: translateY(-4px);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Enhanced button interactions */
.btn {
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

/* Removed scale on hover for accessibility - keeps buttons clickable */
.btn:hover {
  transform: translateY(-2px) translateZ(0);
}

.btn:active {
  transform: translateY(0) translateZ(0);
}

/* Card hover enhancements */
.card {
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.card:hover {
  transform: translateY(-8px) translateZ(0);
}

/* Badge/Icon bounce on parent hover */
.badge-retro,
.number-badge {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.card:hover .badge-retro,
.card:hover .number-badge {
  transform: translateY(-4px);
}

/* Fade-in animation utilities */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Counter animation */
.counter-start,
.counter-end {
  display: inline-block;
  font-weight: inherit;
  color: inherit;
}

/* Parallax elements */
.parallax-shape {
  will-change: transform;
}

/* === responsive-compat.css === */
/*
 * PSOS Components - responsive-compat
 * Split from components.css for maintainability
 */

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 767px) {
  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .card {
    padding: var(--space-lg);
  }

  .cta-block {
    padding: var(--space-xl);
  }

  /* Disable parallax on mobile for performance */
  .parallax-shape {
    will-change: auto;
    transform: none !important;
  }
}

/* ========================================
   SERVICES ACCORDION
   ======================================== */

.services-accordion {
  position: relative;
  z-index: 2;
}

.accordion-item {
  position: relative;
}

.accordion-header {
  position: relative;
  user-select: none;
}

.accordion-header:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-retro-xl);
}

.accordion-header:active {
  transform: translateY(0);
  box-shadow: var(--shadow-retro-lg);
}

/* Active state for accordion */
.accordion-item.active .accordion-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Rotate chevron when active */
.accordion-item.active .accordion-toggle svg {
  transform: rotate(180deg);
}

/* Accordion content animations */
.accordion-content {
  position: relative;
}

/* Hover state for toggle button */
.accordion-toggle:hover {
  transform: scale(1.1);
}

.accordion-toggle:active {
  transform: scale(0.95);
}

/* Noticeable pulse animation for toggle button */
@keyframes accordionPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(45, 48, 71, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(45, 48, 71, 0);
    transform: scale(1.05);
  }
}

.accordion-toggle {
  animation: accordionPulse 2s ease-in-out infinite;
}

.accordion-item.active .accordion-toggle {
  animation: none;
}

/* Override hover to work with pulse */
.accordion-toggle:hover {
  transform: scale(1.15);
  animation: none;
}

/* Focus states for accessibility */
.accordion-header:focus-visible {
  outline: 3px solid var(--retro-yellow);
  outline-offset: 4px;
}

.accordion-toggle:focus-visible {
  outline: 3px solid var(--retro-yellow);
  outline-offset: 3px;
}

/* Mobile responsive accordion */
@media (max-width: 767px) {
  .accordion-header {
    padding: var(--space-md) var(--space-lg) !important;
    flex-wrap: wrap;
  }

  .accordion-header > div:first-child {
    flex-direction: column;
    align-items: flex-start !important;
    gap: var(--space-md) !important;
  }

  .accordion-header svg:first-of-type {
    width: 36px !important;
    height: 36px !important;
  }

  .accordion-header h3 {
    font-size: var(--text-lg) !important;
  }

  .accordion-header .badge-retro {
    position: static !important;
    margin-top: var(--space-sm);
  }

  .accordion-content > div {
    padding: var(--space-lg) !important;
  }

  /* Stack pricing on mobile */
  .accordion-header > div:first-child > div:last-child {
    font-size: var(--text-xl) !important;
  }
}

/* ===================================
   Services Subnavigation
   =================================== */

.services-subnav {
  background-color: var(--cream);
  border-bottom: 2px solid var(--navy);
  padding: var(--space-sm) 0;
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 1);
  transition: box-shadow var(--transition-base);
}

.services-subnav.scrolled {
  box-shadow: var(--shadow-md);
}

.subnav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Services Overview link - distinct "back to overview" style */
.subnav-overview {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 2px solid var(--navy);
  background-color: transparent;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.subnav-overview:hover {
  background-color: var(--navy);
  color: var(--primary-white);
}

.subnav-overview.active {
  background-color: var(--navy);
  color: var(--primary-white);
}

.subnav-divider-main {
  width: 2px;
  height: 24px;
  background-color: var(--navy);
  opacity: 0.3;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.subnav-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--navy);
  text-decoration: none;
  padding: var(--space-xs) 0.5rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.subnav-link:hover {
  background-color: var(--retro-yellow);
  color: var(--navy);
}

.subnav-link.active {
  background-color: var(--retro-yellow);
  color: var(--navy);
  font-weight: var(--weight-semibold);
}

.subnav-divider {
  width: 1px;
  height: 16px;
  background-color: var(--navy);
  opacity: 0.2;
  flex-shrink: 0;
}

/* Default: hide short labels on desktop */
.label-short {
  display: none;
}

/* Mobile services pill bar */
@media (max-width: 968px) {
  .services-subnav {
    padding: var(--space-xs) 0;
    position: static;
  }

  .subnav-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0 var(--space-sm);
  }

  /* Hide overview link and dividers on mobile */
  .subnav-overview,
  .subnav-divider-main,
  .subnav-divider {
    display: none;
  }

  .subnav-link {
    font-size: var(--text-xs);
    padding: 6px 10px;
    gap: 4px;
  }

  .subnav-link svg {
    width: 12px;
    height: 12px;
  }

  /* Active page: yellow filled, matching desktop */
  .subnav-link.active {
    background-color: var(--retro-yellow);
    color: var(--navy);
  }

  /* Swap long SEO label for short one */
  .subnav-link .label-full {
    display: none;
  }

  .subnav-link .label-short {
    display: inline;
  }
}

/* ========================================
   FLEXBOX GAP FALLBACK (Safari <14.1)
   ======================================== */
@supports not (gap: 1rem) {
  .btn > * + * { margin-left: var(--space-xs); }
  .btn-group > * + * { margin-left: var(--space-md); }
  .header-container > * + * { margin-left: var(--space-lg); }
  .logo > * + * { margin-left: var(--space-sm); }
  .form-check > * + * { margin-left: var(--space-sm); }
  .footer-links > * + * { margin-top: var(--space-xs); }
}

/* ========================================
   HOVER GUARD FOR TOUCH DEVICES
   Prevents "sticky hover" on mobile by
   restricting transforms to pointer devices
   ======================================== */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-8px);
  }

  .card-highlight:hover {
    box-shadow: 10px 10px 0px var(--retro-purple);
  }

  .card-flat:hover {
    transform: translateY(-4px);
  }

  .card-retro-yellow:hover {
    transform: translateY(-8px);
  }

  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline:hover {
    transform: translateY(-2px);
  }
}

/* Touch-friendly active states */
@media (hover: none) {
  .card:active {
    transform: translateY(-2px);
    box-shadow: var(--shadow-retro-xl);
  }

  .btn-primary:active,
  .btn-secondary:active,
  .btn-outline:active {
    transform: translateY(-1px);
  }
}

/* ========================================
   POSITION: STICKY FALLBACK
   ======================================== */
@supports not (position: sticky) {
  .header {
    position: relative;
  }

  .services-subnav {
    position: relative;
  }
}

/* === pages.css === */
/*
 * PSOS Components - pages
 * Split from components.css for maintainability
 */

/* ========================================
   WEBSITE AUDIT LEAD CAPTURE
   ======================================== */

/* Full-width teal section (homepage) */
.audit-section {
  background-color: var(--retro-teal);
  padding: var(--section-padding-y) var(--section-padding-x);
  position: relative;
  overflow: hidden;
}

.audit-section .container {
  max-width: 820px;
  position: relative;
  z-index: 1;
}

.audit-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  color: var(--primary-white);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
  text-align: center;
}

.audit-section .audit-accent {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--retro-yellow);
  margin-bottom: var(--space-md);
  text-align: center;
}

.audit-section .audit-body {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

/* Form card container */
.audit-form-card {
  background-color: var(--primary-white);
  border: var(--border-thick) solid var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-retro-xl);
  padding: var(--space-2xl);
  margin-bottom: var(--space-lg);
}

/* Placeholder form (will be replaced by GHL embed) */
.audit-placeholder-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.audit-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.audit-form-field label {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--navy);
  margin-bottom: var(--space-xs);
}

.audit-form-field .optional-label {
  font-weight: var(--weight-regular);
  color: var(--text-muted);
  font-size: 0.8em;
}

.audit-form-field input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-dark);
  background-color: var(--primary-white);
  border: var(--border-thin) solid var(--navy);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-retro-sm);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.audit-form-field input::placeholder {
  color: var(--text-muted);
}

.audit-form-field input:focus {
  outline: none;
  border-color: var(--retro-teal);
  box-shadow: 0 0 0 3px rgba(35, 128, 120, 0.2);
}

.audit-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 1.125rem 2.5rem;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--navy);
  background-color: var(--retro-coral);
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-retro-md);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: 52px;
}

.audit-submit-btn:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Reassurance text */
.audit-reassurance {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-sm);
  text-align: center;
  margin-bottom: var(--space-lg);
  line-height: var(--leading-relaxed);
}

/* Trust pills row */
.audit-trust-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.audit-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.875rem;
  background-color: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--primary-white);
}

.audit-trust-pill svg {
  flex-shrink: 0;
}

/* Inline card (service page - two-column layout) */
.audit-inline-card {
  background-color: var(--retro-yellow);
  border: var(--border-extra-thick) solid var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-retro-xl);
  padding: var(--space-2xl);
  overflow: hidden;
}

.audit-inline-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.audit-inline-copy h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.audit-inline-accent {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--retro-teal);
  margin-bottom: var(--space-sm);
}

.audit-inline-body {
  color: var(--navy);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  opacity: 0.85;
}

.audit-inline-trust {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--retro-teal);
  margin-top: var(--space-sm);
}

.audit-inline-form {
  background-color: var(--primary-white);
  border: var(--border-thick) solid var(--navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-retro-lg);
  padding: var(--space-xl);
}

/* Responsive */
@media (max-width: 767px) {
  .audit-inline-card {
    padding: var(--space-lg);
  }

  .audit-inline-layout {
    grid-template-columns: 1fr;
  }

  .audit-inline-copy h3 {
    font-size: var(--text-xl);
  }
}

/* ============================================
   TESTIMONIALS
   ============================================ */

/* Featured Testimonial Card (Homepage) */
.testimonial-card {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--primary-white);
  border: var(--border-thick) solid var(--navy);
  border-left: 12px solid var(--retro-teal);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-retro-lg);
  position: relative;
}

.testimonial-card::before {
  content: "\201C";
  font-family: var(--font-accent);
  font-size: clamp(4rem, 3rem + 2.5vw, 6rem);
  color: var(--retro-coral);
  line-height: 1;
  position: absolute;
  top: var(--space-md);
  left: var(--space-xl);
  opacity: 0.3;
  pointer-events: none;
}

.testimonial-highlight {
  font-family: var(--font-accent);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.8rem);
  color: var(--retro-coral);
  line-height: 1.3;
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md);
}

.testimonial-card blockquote {
  border: none;
  padding: 0;
  margin: 0;
  font-style: normal;
}

.testimonial-card blockquote p {
  color: var(--text-dark);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.testimonial-card blockquote p:last-child {
  margin-bottom: 0;
}

.testimonial-card figcaption {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--sand);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial-card .testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-xs);
}

.testimonial-card .testimonial-stars svg {
  width: 18px;
  height: 18px;
  fill: var(--retro-yellow);
}

.testimonial-card cite {
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: var(--text-base);
}

/* Testimonial Pull-Quote (Service Pages) */
.testimonial-pullquote {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--retro-yellow);
  border: var(--border-thick) solid var(--navy);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-retro-lg);
  text-align: center;
}

.testimonial-pullquote blockquote {
  border: none;
  padding: 0;
  margin: 0;
  font-style: normal;
}

.testimonial-pullquote blockquote p {
  color: var(--navy);
  font-size: var(--text-lg);
  line-height: 1.7;
  margin-bottom: 0;
}

.testimonial-pullquote figcaption {
  margin-top: var(--space-lg);
}

.testimonial-pullquote cite {
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: var(--text-sm);
}

.testimonial-pullquote .testimonial-link {
  display: inline-block;
  margin-top: var(--space-sm);
  color: var(--navy);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.testimonial-pullquote .testimonial-link:hover {
  color: var(--retro-coral);
}

/* Responsive */
@media (max-width: 767px) {
  .testimonial-card {
    padding: var(--space-lg);
    border-left-width: 8px;
  }

  .testimonial-card::before {
    font-size: 3.5rem;
    left: var(--space-md);
    top: var(--space-sm);
  }

  .testimonial-pullquote {
    padding: var(--space-lg);
  }

  .testimonial-pullquote blockquote p {
    font-size: var(--text-base);
  }
}

/* ============================================================
   404 Error Page (extracted from 404.html)
   ============================================================ */
.error-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cream);
    position: relative;
    overflow: hidden;
}

.error-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.error-code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: 900;
    color: var(--navy);
    line-height: 1;
    margin-bottom: var(--space-sm);
    text-shadow:
        4px 4px 0px var(--retro-yellow),
        8px 8px 0px var(--retro-coral);
}

.error-subtitle {
    font-family: var(--font-accent);
    font-size: var(--text-3xl);
    color: var(--retro-teal);
    margin-bottom: var(--space-md);
    transform: rotate(-2deg);
}

.error-message {
    font-size: var(--text-lg);
    color: var(--text-dark);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-xl);
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.error-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    max-width: 700px;
    margin: var(--space-2xl) auto 0;
}

.error-link-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-retro-md);
    text-decoration: none;
    color: var(--navy);
    transition: all 0.25s ease;
}

.error-link-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-retro-lg);
}

.error-link-card:nth-child(1):hover { border-color: var(--retro-coral); }
.error-link-card:nth-child(2):hover { border-color: var(--retro-teal); }
.error-link-card:nth-child(3):hover { border-color: var(--retro-purple); }

.error-link-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--retro-teal);
}

.error-link-card:nth-child(1) .error-link-icon { color: var(--retro-coral); }
.error-link-card:nth-child(2) .error-link-icon { color: var(--retro-teal); }
.error-link-card:nth-child(3) .error-link-icon { color: var(--retro-purple); }

.error-link-text {
    text-align: left;
}

.error-link-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    margin-bottom: 2px;
}

.error-link-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .error-hero {
        min-height: 50vh;
    }

    .error-links {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Blog Preview Cards (extracted from blog.html)
   ============================================================ */
.blog-preview-card {
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-retro-md);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: cardReveal 0.5s ease forwards;
}

.blog-preview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    transition: height 0.3s ease;
}

.blog-preview-card:nth-child(1)::before { background-color: var(--retro-coral); }
.blog-preview-card:nth-child(2)::before { background-color: var(--retro-teal); }
.blog-preview-card:nth-child(3)::before { background-color: var(--retro-purple); }
.blog-preview-card:nth-child(1) { animation-delay: 0.1s; }
.blog-preview-card:nth-child(2) { animation-delay: 0.2s; }
.blog-preview-card:nth-child(3) { animation-delay: 0.3s; }

.blog-preview-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-retro-lg);
}

.blog-preview-card:hover::before {
    height: 12px;
}

.blog-card-icon {
    width: 56px;
    height: 56px;
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-retro-sm);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.blog-preview-card:nth-child(1) .blog-card-icon { background-color: var(--retro-coral); }
.blog-preview-card:nth-child(2) .blog-card-icon { background-color: var(--retro-teal); }
.blog-preview-card:nth-child(3) .blog-card-icon { background-color: var(--retro-purple); }

.blog-preview-card:hover .blog-card-icon {
    transform: scale(1.1);
}

.blog-hero-icon {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.blog-hero-icon:hover {
    transform: scale(1.15);
}

.newsletter-card {
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-retro-md);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.newsletter-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 24px;
    right: 24px;
    height: 6px;
    background: linear-gradient(90deg, var(--retro-coral), var(--retro-yellow), var(--retro-teal));
    border-radius: 3px 3px 0 0;
}

.newsletter-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-retro-lg);
}

.newsletter-input {
    flex: 1;
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--navy);
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-retro-sm);
    transition: all 0.2s ease;
}

.newsletter-input:focus {
    border-color: var(--retro-teal);
    outline: 2px solid var(--retro-teal);
    outline-offset: 2px;
    box-shadow: var(--shadow-retro-md);
    transform: translateY(-1px);
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   Work Portfolio - Mobile Shape Repositioning (extracted from work.html)
   ============================================================ */
@media (max-width: 767px) {
    #main-content .shape-circle-purple {
        top: 5% !important;
        left: -15px !important;
    }
    #main-content .shape-triangle-pink {
        top: 8% !important;
        right: -10px !important;
        bottom: auto !important;
    }
    #main-content .shape-square {
        bottom: 12% !important;
        right: -12px !important;
    }
}

/* ============================================================
   FAQ Page Components (extracted from faq.html)
   ============================================================ */

.faq-category {
    margin-bottom: var(--space-3xl);
}

.faq-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 4px solid var(--navy);
}

.faq-category-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.faq-item {
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-left: 8px solid var(--retro-teal);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-retro-md);
    overflow: hidden;
    transition: all 0.25s ease;
}

/* Cycling colors for FAQ items */
.faq-item:nth-child(5n+1) { border-left-color: var(--retro-teal); }
.faq-item:nth-child(5n+2) { border-left-color: var(--retro-coral); }
.faq-item:nth-child(5n+3) { border-left-color: var(--retro-yellow); }
.faq-item:nth-child(5n+4) { border-left-color: var(--retro-purple); }
.faq-item:nth-child(5n+5) { border-left-color: var(--retro-orange); }

.faq-item:hover {
    box-shadow: var(--shadow-retro-lg);
    transform: translateY(-3px);
    border-left-width: 12px;
}

.faq-item.active {
    box-shadow: var(--shadow-retro-lg);
    border-left-width: 12px;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--navy);
    transition: all 0.2s ease;
}

.faq-question:hover {
    color: var(--retro-teal);
    background-color: rgba(35, 128, 120, 0.05);
}

.faq-question:focus-visible {
    outline: 3px solid var(--retro-yellow);
    outline-offset: -3px;
}

.faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 4px;
    background-color: var(--cream);
    border: 2px solid var(--navy);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: var(--navy);
}

.faq-item:hover .faq-icon {
    background-color: var(--retro-yellow);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    background-color: var(--retro-teal);
    color: var(--primary-white);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.faq-answer-content {
    padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
    color: var(--text-dark);
    line-height: 1.8;
    font-size: var(--text-base);
    border-top: 2px dashed var(--border-light);
    margin: 0 var(--space-lg);
    padding-top: var(--space-lg);
    position: relative;
}


.faq-answer-content a {
    color: var(--retro-teal);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    font-weight: var(--weight-medium);
    transition: all 0.2s ease;
}

.faq-answer-content a:hover {
    color: var(--retro-purple);
    text-decoration-color: var(--retro-purple);
}

@media (max-width: 767px) {
    .faq-question {
        font-size: var(--text-base);
        padding: var(--space-md);
    }

    .faq-answer-content {
        padding: 0 var(--space-md) var(--space-md) var(--space-md);
    }
}

/* Category Cards */
.category-card {
    display: block;
    cursor: pointer;
    text-decoration: none;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.category-card:hover {
    transform: translateY(-8px);
}

.category-card-inner {
    padding: var(--space-xl);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-retro-lg);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    transition: box-shadow 0.3s ease;
}

.category-card:hover .category-card-inner {
    box-shadow: 8px 8px 0px var(--navy);
}

.category-card:focus-visible .category-card-inner {
    outline: 3px solid var(--retro-yellow);
    outline-offset: 4px;
}

.category-card-icon {
    width: 56px;
    height: 56px;
    stroke-width: 2.5px;
}

.category-card-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 900;
    margin: 0;
    line-height: 1.2;
}

.category-card-description {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin: 0;
    opacity: 0.95;
}

.category-card-arrow {
    width: 24px;
    height: 24px;
    stroke-width: 3px;
    margin-top: var(--space-xs);
    transition: transform 0.3s ease;
}

.category-card:hover .category-card-arrow {
    transform: translateY(4px);
    animation: bounceDown 0.6s ease infinite;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.category-card-icon {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.category-card:hover .category-card-icon {
    transform: scale(1.1);
}

/* Quiz answer buttons — hover only on non-touch devices */
@media (hover: hover) {
    .quiz-answer-btn:hover {
        background-color: var(--retro-teal) !important;
        color: var(--primary-white) !important;
        transform: translateX(8px);
        box-shadow: var(--shadow-retro-md);
    }
}

/* Smooth scroll offset for fixed header */
html {
    scroll-padding-top: 160px;
}

@media (max-width: 767px) {
    .category-card-inner {
        padding: var(--space-lg);
    }

    .category-card-icon {
        width: 48px;
        height: 48px;
    }

    .category-card-title {
        font-size: var(--text-lg);
    }
}

/* Category cards grid - responsive */
@media (max-width: 767px) {
    .faq-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}

/* Sticky Category Tabs */
.category-tabs-wrapper {
    position: sticky;
    top: 80px;
    z-index: 100;
    background-color: var(--primary-white);
    border-bottom: var(--border-thick) solid var(--navy);
    padding: var(--space-md) 0;
    transition: box-shadow 0.3s ease;
}

.category-tabs-wrapper.scrolled {
    box-shadow: 0 4px 12px rgba(45, 48, 71, 0.15);
}

.category-tabs {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: 0 var(--space-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

.category-tab {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--navy);
    background-color: var(--cream);
    border: 2px solid var(--navy);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    white-space: nowrap;
}

.category-tab:hover {
    transform: translateY(-2px);
    box-shadow: 2px 2px 0 var(--navy);
}

.category-tab.active {
    background-color: var(--retro-teal);
    color: var(--primary-white);
    transform: translateY(-2px);
    box-shadow: 3px 3px 0 var(--navy);
}

.category-tab[data-category="getting-started"].active { background-color: var(--retro-coral); }
.category-tab[data-category="pricing-payments"].active { background-color: var(--retro-yellow); color: var(--navy); }
.category-tab[data-category="services-overview"].active { background-color: var(--retro-teal); }
.category-tab[data-category="working-with-me"].active { background-color: var(--retro-orange); }
.category-tab[data-category="ownership-support"].active { background-color: var(--retro-purple); }

/* FAQ category show/hide animation */
.faq-category {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.faq-category.hidden {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .category-tabs-wrapper {
        top: 70px;
    }

    .category-tab {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--text-xs);
    }

    html {
        scroll-padding-top: 140px;
    }
}

/* ============================================================
   Contact Page Components (extracted from contact.html)
   ============================================================ */

.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    color: var(--navy);
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--navy);
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-retro-sm);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--retro-teal);
    outline: 2px solid var(--retro-teal);
    outline-offset: 2px;
    box-shadow: var(--shadow-retro-md);
    transform: translateY(-1px);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

.contact-info-item {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.contact-info-item .contact-icon {
    width: 48px;
    height: 48px;
    background-color: var(--retro-teal);
    color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-retro-sm);
}

.expectation-item {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    align-items: flex-start;
    padding: var(--space-xs) var(--space-sm);
    margin-left: calc(-1 * var(--space-sm));
    margin-right: calc(-1 * var(--space-sm));
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.check-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--retro-teal);
    color: var(--primary-white);
    border: 2px solid var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: all 0.2s ease;
}

.quick-link-card {
    text-decoration: none;
    display: block;
    transition: all var(--transition-bounce);
}

.quick-link-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-retro-lg);
}

.quick-link-icon {
    width: 56px;
    height: 56px;
    background-color: var(--retro-coral);
    color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-retro-sm);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.quick-link-card:hover .quick-link-icon {
    transform: scale(1.1);
}

/* Quick link card color cycling */
.quick-link-card:nth-child(1) .quick-link-icon { background-color: var(--retro-coral); }
.quick-link-card:nth-child(2) .quick-link-icon { background-color: var(--retro-teal); }
.quick-link-card:nth-child(3) .quick-link-icon { background-color: var(--retro-purple); }

/* Contact Method Cards */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.contact-method-card {
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-retro-sm);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
}

.contact-method-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    transition: height 0.3s ease;
}

.contact-method-card:nth-child(1)::before { background-color: var(--retro-teal); }
.contact-method-card:nth-child(2)::before { background-color: var(--retro-coral); }
.contact-method-card:nth-child(3)::before { background-color: var(--retro-yellow); }

.contact-method-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-retro-lg);
}

.contact-method-card:hover::before {
    height: 10px;
}

.contact-method-icon {
    width: 64px;
    height: 64px;
    border: var(--border-thick) solid var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    box-shadow: var(--shadow-retro-sm);
    transition: all 0.3s ease;
}

.contact-method-card:nth-child(1) .contact-method-icon { background-color: var(--retro-teal); color: var(--primary-white); }
.contact-method-card:nth-child(2) .contact-method-icon { background-color: var(--retro-coral); color: var(--primary-white); }
.contact-method-card:nth-child(3) .contact-method-icon { background-color: var(--retro-yellow); color: var(--navy); }

.contact-method-card:hover .contact-method-icon {
    transform: scale(1.1);
}

.contact-method-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--space-xs);
}

.contact-method-desc {
    font-size: var(--text-sm);
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
}

.contact-method-action {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.contact-method-card:nth-child(1) .contact-method-action { color: var(--retro-teal); }
.contact-method-card:nth-child(2) .contact-method-action { color: var(--retro-coral); }
.contact-method-card:nth-child(3) .contact-method-action { color: var(--navy); }

/* Enhanced form container - matches brand card style */
.form-container-enhanced {
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-retro-md);
    margin-bottom: var(--space-xl);
}

/* Enhanced contact info items */
.contact-info-item {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
}

.contact-info-item:hover {
    background-color: var(--sand);
}

.contact-info-item:hover .contact-icon {
    transform: scale(1.1);
}

.contact-info-item .contact-icon {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Sidebar card enhancements */
.sidebar-card-enhanced {
    transition: all 0.3s ease;
}

.sidebar-card-enhanced:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-retro-lg);
}

.expectation-item:hover {
    background-color: var(--sand);
}

.expectation-item:hover .check-icon {
    transform: scale(1.15);
}

/* Responsive adjustments */
@media (max-width: 968px) {
    .contact-methods {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .contact-method-card {
        display: flex;
        align-items: center;
        text-align: left;
        gap: var(--space-lg);
        padding: var(--space-lg);
    }

    .contact-method-card::before {
        height: 100%;
        width: 6px;
        right: auto;
        bottom: 0;
    }

    .contact-method-card:hover::before {
        width: 10px;
        height: 100%;
    }

    .contact-method-icon {
        margin: 0;
        flex-shrink: 0;
    }
}

@media (max-width: 968px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Contact form responsive */
@media (max-width: 480px) {
    #contact-form > div:first-child {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   Booking Page Components (extracted from book.html)
   ============================================================ */

.booking-container {
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-retro-md);
    margin-bottom: var(--space-xl);
}

.booking-iframe-wrapper {
    min-height: 800px;
    position: relative;
}

@media (orientation: landscape) and (max-height: 500px) {
    .booking-iframe-wrapper {
        min-height: 500px;
    }
}

.info-card {
    background-color: var(--retro-teal);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-retro-sm);
    margin-bottom: var(--space-lg);
}

.info-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--primary-white);
    margin-bottom: var(--space-sm);
    font-weight: 700;
}

.info-card p {
    color: var(--primary-white);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Enhanced booking container */
.booking-container-enhanced {
    background-color: var(--primary-white);
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-retro-md);
    margin-bottom: var(--space-xl);
    position: relative;
}

.booking-container-enhanced::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 24px;
    right: 24px;
    height: 6px;
    background: var(--retro-teal);
    border-radius: 3px 3px 0 0;
}

/* Enhanced info card */
.info-card-enhanced {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.info-card-icon {
    width: 44px;
    height: 44px;
    background-color: var(--primary-white);
    border: 2px solid var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Booking grid responsive */
@media (max-width: 968px) {
    .booking-grid {
        grid-template-columns: 1fr !important;
    }
    .booking-container-enhanced {
        padding: var(--space-md);
    }
}

@media (max-width: 480px) {
    .booking-container-enhanced {
        padding: 0;
        border: none;
        box-shadow: none;
        background: transparent;
        margin-left: calc(-1 * var(--section-padding-x));
        margin-right: calc(-1 * var(--section-padding-x));
    }
    .booking-container-enhanced::before {
        display: none;
    }
    .booking-iframe-wrapper {
        min-height: 1200px;
    }
    .booking-iframe-wrapper iframe {
        min-height: 1200px !important;
    }
}

/* ========================================
   QUIZ EMBED (Homepage)
   ======================================== */

#quiz-container {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.quiz-answer-btn {
    cursor: pointer;
    position: relative;
}

.quiz-answer-btn:hover {
    box-shadow: var(--shadow-retro-md);
}

.quiz-answer-btn:active {
    transform: translateX(8px) scale(0.98);
}

#quiz-result {
    animation: slideInUp 0.5s ease-out;
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
    #not-sure-container { padding: var(--space-lg) !important; }
    #quiz-question { font-size: var(--text-xl) !important; }
    .quiz-answer-btn { padding: var(--space-md) !important; font-size: var(--text-sm) !important; }
    #result-title { font-size: var(--text-xl) !important; }
    #result-description { font-size: var(--text-base) !important; }
}

/* === utilities.css === */
/* ============================================================
   UTILITIES.CSS — Supplementary utility classes
   Added to consolidate inline styles into reusable classes.
   Loads after components.css, before accessibility.css.
   ============================================================ */

/* --- Text Colors --- */
.color-navy { color: var(--navy); }
.color-white { color: var(--primary-white); }
.color-dark { color: var(--text-dark); }
.color-teal { color: var(--retro-teal); }
.color-coral { color: var(--retro-coral); }
.color-yellow { color: var(--retro-yellow); }
.color-purple { color: var(--retro-purple); }
.color-orange { color: var(--retro-orange); }

/* --- Background Colors --- */
.bg-cream { background-color: var(--cream); }
.bg-sand { background-color: var(--sand); }
.bg-navy { background-color: var(--navy); color: var(--primary-white); }
.bg-coral { background-color: var(--retro-coral); }
.bg-yellow { background-color: var(--retro-yellow); }
.bg-purple { background-color: var(--retro-purple); }
.bg-pink { background-color: var(--retro-pink); }
.bg-orange { background-color: var(--retro-orange); }

/* --- Line Heights --- */
.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* --- Content Container --- */
.container-content { max-width: 900px; margin-left: auto; margin-right: auto; }

/* --- Position Utilities --- */
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* --- Feature List Pattern --- */
.feature-list-item {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    align-items: flex-start;
}

.list-icon {
    flex-shrink: 0;
    color: var(--retro-teal);
    margin-top: 4px;
}

/* --- Section Heading --- */
.section-heading {
    color: var(--navy);
    margin-bottom: var(--space-md);
}

/* --- Step Number Circle --- */
.step-number {
    width: 64px;
    height: 64px;
    border: var(--border-thick) solid var(--navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    box-shadow: var(--shadow-retro-sm);
}
.step-number span {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--primary-white);
}

/* --- Step Title --- */
.step-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--navy);
    margin-bottom: var(--space-sm);
    font-weight: 700;
}

/* --- Note/Callout Box --- */
.note-callout {
    background-color: var(--cream);
    border: var(--border-medium) solid var(--navy);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
}

/* --- Button Variant: Yellow --- */
.btn-yellow {
    background-color: var(--retro-yellow);
    color: var(--navy);
    border-color: var(--navy);
}
.btn-yellow:hover {
    background-color: var(--retro-yellow-hover);
    color: var(--navy);
    transform: translateY(-2px);
}

/* --- Link Variant: Coral --- */
.link-coral {
    color: var(--retro-coral);
    text-decoration: underline;
    font-weight: var(--weight-semibold);
}

/* --- SVG Icon Stroke --- */
.icon-nav { stroke-width: 2.5; }

/* --- Accordion Component Patterns --- */
.accordion-trigger-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--navy);
    transition: color 0.2s ease;
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion-panel-content {
    padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);
    color: var(--text-dark);
    line-height: 1.8;
    font-size: var(--text-base);
    border-top: 2px dashed var(--border-light);
    margin: 0 var(--space-lg);
    padding-top: var(--space-lg);
}

.icon-interactive {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--navy);
    transition: transform 0.3s ease;
}

/* --- Full-Screen Overlay (for pattern backgrounds) --- */
.full-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* --- Margin zero --- */
.m-0 { margin: 0; }

/* --- List Reset --- */
.list-reset { list-style: none; padding: 0; }

/* --- Font size utilities (supplement typography.css) --- */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

/* --- Font family utilities --- */
.font-display { font-family: var(--font-display); }
.font-heading { font-family: var(--font-heading); }
.font-accent { font-family: var(--font-accent); }

/* --- Flex utilities (supplement layouts.css) --- */
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }

/* --- Width/height utilities --- */
.w-full { width: 100%; }

/* --- Display utilities --- */
.inline-block { display: inline-block; }
.block { display: block; }

/* --- Text decoration --- */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.italic { font-style: italic; }

/* --- Whitespace --- */
.whitespace-nowrap { white-space: nowrap; }

/* --- Extra spacing (3xl, 4xl) --- */
.mb-3xl { margin-bottom: var(--space-3xl); }
.mb-4xl { margin-bottom: var(--space-4xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

/* --- Alignment --- */
.items-baseline { align-items: baseline; }
.items-end { align-items: flex-end; }
.justify-end { justify-content: flex-end; }

/* --- Container size variants --- */
.container-700 { max-width: 700px; margin-left: auto; margin-right: auto; }
.container-600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.container-800 { max-width: 800px; margin-left: auto; margin-right: auto; }
.container-1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* --- Card variant (xl padding) --- */
.card-featured-sm {
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-retro-lg);
}
@media (max-width: 767px) {
  .card-featured-sm {
    padding: var(--space-lg);
  }
}

/* --- Step circle 48px variant --- */
.step-circle-lg {
    width: 48px;
    height: 48px;
    border: 3px solid var(--navy);
    border-radius: 50%;
}

/* --- Extra spacing --- */
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }

/* --- Line height none --- */
.leading-none { line-height: 1; }

/* --- Font weight black (900) --- */
.text-black { font-weight: 900; }

/* --- Border utilities --- */
.border-navy { border-color: var(--navy); }
.border-b-light { border-bottom: 2px solid var(--border-light); }

/* --- Featured card pattern --- */
.card-featured {
    border: var(--border-thick) solid var(--navy);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-retro-lg);
}
@media (max-width: 767px) {
  .card-featured {
    padding: var(--space-lg);
  }
}

/* --- Step circle (40px variant) --- */
.step-circle {
    width: 40px;
    height: 40px;
    border: 3px solid var(--navy);
    border-radius: 50%;
}

/* === accessibility.css === */
/*
 * Accessibility Enhancements
 * PSOS Website - Plain Speak Online Services
 * Ensures WCAG 2.1 AA compliance
 */

/* ========================================
   SKIP TO CONTENT LINK
   ======================================== */

/* Skip link styles defined in components.css using .skip-link class */

/* ========================================
   FOCUS INDICATORS (Global Enhancement)
   ======================================== */

/* Ensure all interactive elements have visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
}

/* Remove default outline and use our custom one */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
}

/* ========================================
   SCREEN READER ONLY CONTENT
   ======================================== */

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

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: high) {
  .btn {
    border-width: 3px;
  }

  .card {
    border-width: 3px;
  }

  .nav-link.active::after {
    height: 3px;
  }

  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    border-width: 3px;
    outline-width: 3px;
  }
}

/* ========================================
   REDUCED MOTION PREFERENCES
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Remove transforms that could cause motion */
  .btn:hover,
  .card:hover,
  .service-card:hover {
    transform: none;
  }

  /* Keep shadows for visual feedback */
  .btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
}

/* ========================================
   IMPROVED LINK IDENTIFICATION
   ======================================== */

/* Ensure links are distinguishable in body text */
main a:not(.btn):not(.nav-link):not(.service-card) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: all var(--transition-fast);
}

main a:not(.btn):not(.nav-link):not(.service-card):hover {
  text-decoration-thickness: 2px;
  color: var(--retro-teal);
}

/* ========================================
   IMPROVED COLOR CONTRAST
   ======================================== */

/* Ensure sufficient contrast for text */
.text-muted {
  color: var(--text-contrast-improved) !important;
}

/* Improve placeholder contrast */
::placeholder {
  color: var(--placeholder-text);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--placeholder-text);
}

::-ms-input-placeholder {
  color: var(--placeholder-text);
}

/* ========================================
   TOUCH TARGET SIZE
   ======================================== */

/* Ensure all interactive elements meet minimum 44x44px touch target */
.btn,
.nav-link,
.form-input,
.form-select,
.form-check-input,
.mobile-menu-toggle {
  min-height: 44px;
  min-width: 44px;
}

/* Exception for small text links - add padding */
a {
  padding: 2px 4px;
  margin: -2px -4px;
}

/* ========================================
   FORM ERROR HANDLING
   ======================================== */

/* Associate errors with form fields */
.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.form-select[aria-invalid="true"] {
  border-color: var(--error-red);
  border-width: 2px;
}

.form-input[aria-invalid="true"]:focus,
.form-textarea[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
  outline-color: var(--error-red);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

/* Error icon for screen readers */
.form-error::before {
  content: '⚠ ';
  speak: literal-punctuation;
}

/* ========================================
   KEYBOARD NAVIGATION IMPROVEMENTS
   ======================================== */

/* Show outline when navigating with keyboard */
body:not(.using-mouse) *:focus {
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
}

/* Track mouse usage to hide outline when clicking */
body.using-mouse *:focus {
  outline: none;
}

/* ========================================
   CARD & LINK FOCUS INDICATORS (A11Y-010)
   ======================================== */

/* Ensure card-style links have visible focus */
.contact-method-card:focus-visible,
.quick-link-card:focus-visible,
.service-card:focus-visible,
.category-card:focus-visible,
.blog-preview-card:focus-visible,
.error-link-card:focus-visible {
  outline: 3px solid var(--retro-teal);
  outline-offset: 3px;
}

/* ========================================
   ORANGE CONTRAST FIX (A11Y-008)
   White on orange (#E89147) is 2.44:1 — fails WCAG.
   Use navy fill for icons on orange backgrounds.
   ======================================== */

.bg-orange svg {
  fill: var(--navy);
}

/* ========================================
   MOBILE CTA VISIBILITY (UX-012)
   ======================================== */

/* Mobile CTA hidden — Book a Chat lives inside hamburger menu instead */
.header-cta-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  /* Show CTA as full-width button inside hamburger menu */
  .header-cta {
    width: 100%;
    margin-top: var(--space-sm);
  }
}

/* ========================================
   BACK TO TOP BUTTON (UX-005)
   ======================================== */

.back-to-top {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  color: var(--navy);
  border: var(--border-medium) solid var(--navy);
  border-radius: 50%;
  box-shadow: var(--shadow-retro-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
  z-index: 50;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-retro-md);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--retro-yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

/* ========================================
   FORM LOADING STATE (UX-001)
   ======================================== */

.form-submitting {
  opacity: 0.7;
  pointer-events: none;
  position: relative;
}

.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  border: 3px solid var(--primary-white);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-loading::after {
    animation: none;
    border-top-color: var(--primary-white);
    opacity: 0.5;
  }
}


/* ========================================
   INLINE FORM VALIDATION (UX-018)
   ======================================== */

.field-error {
  border-color: var(--retro-coral) !important;
  box-shadow: 0 0 0 2px rgba(232, 93, 93, 0.25) !important;
}

.field-error-message {
  color: var(--retro-coral);
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
  margin-bottom: 0;
  font-weight: 500;
}

/* ========================================
   FORM SUCCESS STATE (UX-006)
   ======================================== */

.form-success-card {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
}

.form-success-icon {
  width: 64px;
  height: 64px;
  background-color: var(--retro-teal);
  color: var(--primary-white);
  border: var(--border-thick) solid var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  box-shadow: var(--shadow-retro-sm);
}

.form-success-message {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.5;
}

/* ========================================
   ACCESSIBLE HIDE/SHOW
   ======================================== */

/* aria-hidden="true" hides elements from screen readers only, NOT visually.
   Do NOT set display:none on [aria-hidden] - that would hide decorative elements
   like pattern overlays and shapes that should remain visible.
   Use the [hidden] attribute for elements that should be fully hidden. */

[hidden] {
  display: none !important;
}

/* ========================================
   LANGUAGE SUPPORT
   ======================================== */

/* Indicate language changes - exclude all English variants (en, en-AU, en-US, etc.) */
[lang]:not([lang=""]):not([lang^="en"]) {
  font-style: italic;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  /* Ensure links are visible in print */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
  }

  /* Don't print navigation, forms, or decorative elements */
  .nav,
  .footer,
  .mobile-menu-toggle,
  .pattern-overlay,
  .shape,
  form {
    display: none !important;
  }

  /* Ensure good contrast in print */
  * {
    background: white !important;
    color: black !important;
  }

  .btn {
    border: 2px solid black !important;
  }
}

/* === tooltips.css === */
/*
 * PSOS Components — Plain Speak Tooltips
 * Branded tooltip system for explaining tech terms in plain English
 * Leans into the "Plain Speak" brand promise — no jargon
 */

/* ========================================
   TOOLTIP TRIGGER (inline button)
   ======================================== */

.ps-term-btn {
  /* Reset button styles to look inline */
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  vertical-align: baseline;
  cursor: help;
  /* Teal dotted underline */
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--retro-teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background-color var(--transition-fast),
              text-decoration-style var(--transition-fast);
}

.ps-term-btn:hover,
.ps-term-btn:focus-visible {
  background-color: rgba(252, 246, 232, 0.7);
  text-decoration-style: solid;
  border-radius: 2px;
}

.ps-term-btn:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
}

.ps-term-btn[aria-expanded="true"] {
  background-color: var(--cream);
  text-decoration-style: solid;
  text-decoration-color: var(--retro-teal);
  border-radius: 2px;
}


/* ========================================
   TOOLTIP POPUP (appended to body)
   ======================================== */

.ps-tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: 320px;
  min-width: 240px;
  padding: var(--space-sm);
  background-color: var(--primary-white);
  border: var(--border-thin) solid var(--navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-retro-sm);
  /* Hidden by default */
  display: none;
  opacity: 0;
  pointer-events: none;
}

.ps-tooltip--visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}


/* ========================================
   ARROW / NUB
   ======================================== */

.ps-tooltip-arrow {
  position: absolute;
  left: var(--ps-arrow-left, 50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

/* Arrow when tooltip is below the term (arrow points up) */
.ps-tooltip--below .ps-tooltip-arrow {
  top: -14px;
  border-bottom-color: var(--navy);
}

.ps-tooltip--below .ps-tooltip-arrow::after {
  content: '';
  position: absolute;
  top: 1px;
  left: -6px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: var(--primary-white);
}

/* Arrow when tooltip is above the term (arrow points down) */
.ps-tooltip--above .ps-tooltip-arrow {
  bottom: -14px;
  border-top-color: var(--navy);
}

.ps-tooltip--above .ps-tooltip-arrow::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: -6px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--primary-white);
}


/* ========================================
   TOOLTIP CONTENT
   ======================================== */

.ps-tooltip-header {
  display: block;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 700;
  color: var(--retro-teal);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.ps-tooltip-body {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-dark);
  line-height: var(--leading-relaxed);
}

.ps-tooltip-link {
  display: inline-block;
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--retro-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.ps-tooltip-link:hover,
.ps-tooltip-link:focus {
  color: var(--color-secondary-hover);
}

.ps-tooltip-link:focus-visible {
  outline: 2px solid var(--retro-teal);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ========================================
   DARK BACKGROUND CONTEXTS (hero sections)
   ======================================== */

[id^="hero-"] .ps-term-btn:hover,
[id^="hero-"] .ps-term-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
}

[id^="hero-"] .ps-term-btn[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.2);
}


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
  .ps-tooltip {
    max-width: calc(100vw - 2rem);
    min-width: 200px;
  }
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ps-term-btn,
  .ps-tooltip {
    transition: none;
  }
}