/**
 * Prairie IT Services - Design System
 *
 * Bold, modern design, no WIX or Wordpress garbage here.
 * Dark mode dominant with orange (#f68c1e) brand accent
 *
 * 2026 Fresh Build
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================ */

:root {
    /* Brand Colors */
    --brand-orange: #f68c1e;
    --brand-orange-hover: #ff9a2e;
    --brand-orange-trans: rgba(246, 140, 30, 0.7);
    --brand-orange-glow: rgba(246, 140, 30, 0.3);

    /* Neutrals */
    --color-white: #ffffff;
    --color-off-white: #f8fafc;
    --color-light-gray: #e2e8f0;
    --color-med-gray: #64748b;
    --color-dark-gray: #2f353a;
    --color-charcoal: #1e293b;
    --color-black: #181b1e;
    --color-deep-black: #0f172a;

    /* Dark Mode Backgrounds */
    --bg-dark: #0f172a;
    --bg-darker: #0a0f1a;
    --bg-card: #1e293b;
    --bg-card-hover: #283548;
    --bg-section-light: #f8fafc;
    --bg-section-alt: #f1f5f9;

    /* Accent Colors */
    --color-success: #22c55e;
    --color-success-dark: #16a34a;
    /* Same green re-tuned for text on a LIGHT surface: the bright token reads at
       2.3:1 on white, this one at 5.0:1. See the .text-success rules below. */
    --color-success-on-light: #15803d;
    --color-danger: #ef4444;
    --color-danger-dark: #dc2626;
    --color-info: #3b82f6;
    --color-warning: #f59e0b;

    /* Glassmorphism */
    --glass-bg: rgba(30, 41, 59, 0.85);
    --glass-bg-light: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-light: rgba(255, 255, 255, 0.2);
    --backdrop-blur: blur(12px);

    /* Typography */
    --font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Bricolage Grotesque', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 40px var(--brand-orange-glow);
    --shadow-glow-lg: 0 0 60px var(--brand-orange-glow);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Header */
    --header-height: 80px;
    --header-height-scrolled: 70px;
    --topbar-height: 40px;
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--topbar-height));
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--color-white);
    background-color: var(--bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Override Bootstrap's default dark text colors globally */
body,
body p,
body span,
body li,
body div,
body label {
    color: var(--color-light-gray);
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
    color: var(--color-white);
}

/* Selection */
::selection {
    background-color: var(--brand-orange);
    color: var(--color-white);
}

/* Focus States */
:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

h1 {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-black);
}

h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
}

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

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

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

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

p {
    margin-bottom: var(--space-4);
    color: var(--color-light-gray);
}

.lead {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
    color: var(--color-light-gray);
}

a {
    color: var(--brand-orange);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--brand-orange-hover);
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section Headings */
.section-label {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--brand-orange);
    margin-bottom: var(--space-3);
}

.section-title {
    font-size: clamp(2rem, 4vw, var(--font-size-4xl));
    margin-bottom: var(--space-4);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-med-gray);
    max-width: 600px;
}

/* Light background text colors */
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6,
.section-light h1, .section-light h2, .section-light h3, .section-light h4, .section-light h5, .section-light h6 {
    color: var(--color-charcoal);
}

.bg-light p, .bg-light .lead,
.section-light p, .section-light .lead {
    color: var(--color-med-gray);
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover));
    color: var(--color-white);
    border-color: var(--brand-orange);
    box-shadow: 0 4px 15px var(--brand-orange-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px var(--brand-orange-glow);
    color: var(--color-white);
    border-color: var(--brand-orange);
    background: linear-gradient(135deg, var(--brand-orange-hover), var(--brand-orange));
}

.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(246, 140, 30, 0.5);
    border-color: var(--brand-orange);
    color: var(--color-white);
    outline: none;
}

.btn-primary:active,
.btn-primary.active {
    background: var(--brand-orange-hover);
    border-color: var(--brand-orange);
    color: var(--color-white);
    box-shadow: 0 2px 10px var(--brand-orange-glow);
    transform: translateY(0);
}

.btn-secondary {
    background: transparent;
    color: var(--color-white);
    border-color: var(--glass-border-light);
}

.btn-secondary:hover {
    background: var(--glass-bg-light);
    border-color: var(--brand-orange);
    color: var(--brand-orange);
}

.btn-secondary:focus,
.btn-secondary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    border-color: var(--glass-border-light);
    outline: none;
}

.btn-secondary:active,
.btn-secondary.active {
    background: var(--glass-bg-light);
    border-color: var(--brand-orange);
    color: var(--brand-orange);
}

/* Solid light button — the CTA that sits on a saturated colour band (report card
   next step, calculator prevention cards). Those bands carry .text-white, and this
   was the last variant with no rule of its own: it leaned on Bootstrap's
   --bs-btn-* vars underneath our .btn override, so the label could come out white
   on white. Spelled out here the same way .btn-ghost was after the same bug. */
.btn-light {
    background: var(--color-white);
    color: var(--color-charcoal);
    border-color: var(--color-white);
}

.btn-light:hover {
    background: var(--color-off-white);
    color: var(--color-charcoal);
    border-color: var(--color-off-white);
}

.btn-light:focus,
.btn-light:focus-visible {
    background: var(--color-off-white);
    color: var(--color-charcoal);
    border-color: var(--color-off-white);
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.4);
    outline: none;
}

.btn-light:active,
.btn-light.active {
    background: var(--color-light-gray);
    color: var(--color-charcoal);
    border-color: var(--color-light-gray);
}

.btn-outline {
    background: transparent;
    color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.btn-outline:hover,
.btn-outline:focus,
.btn.btn-outline:hover,
.btn.btn-outline:focus {
    background: var(--brand-orange);
    color: var(--color-white) !important;
    border-color: var(--brand-orange);
}

/* btn-check (hidden radio/checkbox) + btn-outline styling */
.btn-check {
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.btn-check:checked + .btn-outline,
.btn-check:checked + .btn.btn-outline,
.btn-check:active + .btn-outline,
.btn-check:active + .btn.btn-outline {
    background: var(--brand-orange) !important;
    color: var(--color-white) !important;
    border-color: var(--brand-orange) !important;
}

.btn-check:focus + .btn-outline,
.btn-check:focus + .btn.btn-outline {
    box-shadow: 0 0 0 0.25rem var(--brand-orange-glow);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.btn-icon {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-full);
}

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    height: auto;
    transition: all var(--transition-base);
}

/* ----------------------------------------------------------------------------
   TOP UTILITY BAR (phone, hours, primary offer) — sits above the navbar
   ---------------------------------------------------------------------------- */
.top-bar {
    height: var(--topbar-height);
    background: var(--bg-darker);
    border-bottom: 1px solid var(--glass-border);
    font-size: var(--font-size-sm);
}

.top-bar-inner {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.top-bar-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.top-bar-phone i {
    color: var(--brand-orange);
}

.top-bar-phone:hover {
    color: var(--brand-orange);
}

.top-bar-note {
    color: var(--color-med-gray);
    white-space: nowrap;
}

.top-bar .status-indicator {
    font-size: var(--font-size-xs);
    padding: 0;
    background: transparent;
    color: var(--color-light-gray);
    line-height: 1;
}

.top-bar-left,
.top-bar-right {
    flex-wrap: nowrap;
}

.top-bar-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--brand-orange);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.top-bar-cta:hover {
    background: var(--brand-orange-hover);
    color: var(--color-white);
}

@media (max-width: 575.98px) {
    .top-bar-phone span {
        font-size: var(--font-size-xs);
    }
}

.site-header .navbar {
    height: var(--header-height);
    background: transparent;
    transition: all var(--transition-base);
}

.site-header.scrolled .navbar {
    height: var(--header-height-scrolled);
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid var(--glass-border);
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-brand img {
    height: 45px;
    width: auto;
}

/* Offcanvas header logo sits slightly smaller than the desktop navbar */
.offcanvas-logo {
    height: 38px;
    width: auto;
}

.logo-dark {
    display: none;
}

.navbar-nav {
    gap: 0;
    align-items: center;
}

.navbar-nav .nav-item {
    position: relative;
}

/* Subtle separator between nav items - desktop only */
@media (min-width: 992px) {
    .navbar-nav .nav-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 14px;
        background: rgba(255, 255, 255, 0.15);
    }
}

.navbar-nav .nav-link {
    color: var(--color-light-gray);
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    min-width: 100px;
    text-align: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--color-white);
    background: var(--glass-bg-light);
}

.navbar-nav .nav-link.active {
    color: var(--brand-orange);
}

.navbar-nav .dropdown-toggle::after {
    margin-left: var(--space-2);
    vertical-align: middle;
    border-top-color: currentColor;
}

/* Dropdown Menu */
.dropdown-menu {
    /* Override Bootstrap CSS variables */
    --bs-dropdown-link-active-color: var(--brand-orange);
    --bs-dropdown-link-active-bg: var(--glass-bg-light);
    --bs-dropdown-link-hover-color: var(--brand-orange);
    --bs-dropdown-link-hover-bg: var(--glass-bg-light);

    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    margin-top: var(--space-2);
    min-width: 220px;
    box-shadow: var(--shadow-xl);
}

.dropdown-item {
    color: var(--color-white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
}

.dropdown-item i {
    color: var(--brand-orange);
    width: 20px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--glass-bg-light);
    color: var(--brand-orange);
}

.navbar-nav .dropdown-item.active,
.navbar-nav .dropdown-item.active:hover,
.navbar-nav .dropdown-item.active:focus {
    background: var(--glass-bg-light);
    color: var(--brand-orange);
}

/* Desktop hover dropdown */
@media (min-width: 992px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .dropdown > .dropdown-toggle:active {
        pointer-events: none;
    }
}

/* Mobile Menu Toggle */
.navbar-toggler {
    border: none;
    padding: var(--space-2);
    color: var(--color-white);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile Offcanvas Menu */
.offcanvas {
    background: var(--bg-darker);
    border-left: 1px solid var(--glass-border);
}

.offcanvas-header {
    border-bottom: 1px solid var(--glass-border);
    padding: var(--space-4) var(--space-6);
}

.offcanvas-body {
    padding: var(--space-6);
}

.offcanvas .navbar-nav .nav-link {
    padding: var(--space-3) 0;
    font-size: var(--font-size-lg);
    border-bottom: 1px solid var(--glass-border);
}

.offcanvas .navbar-nav .nav-item.has-children .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offcanvas .collapse .nav-link {
    font-size: var(--font-size-base);
    border-bottom: none;
    padding: var(--space-2) 0;
}

.mobile-contact a {
    color: var(--color-light-gray);
}

.mobile-contact a:hover {
    color: var(--brand-orange);
}

.btn-close {
    filter: invert(1);
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-height) + var(--topbar-height));
    background: var(--bg-darker);
    overflow: hidden;
}

.hero-compact {
    min-height: auto;
    padding: calc(var(--header-height) + var(--topbar-height) + var(--space-12)) 0 var(--space-8);
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, var(--brand-orange-glow) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    opacity: 0.5;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--bg-dark) 100%);
}

/* Animated Grid Pattern */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--glass-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--glass-border) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.3;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(60px); }
}

/* Hero Image with Fade Effect */
.hero-image {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.4;
    z-index: 0;
}

.hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-dark) 0%, transparent 40%, transparent 100%);
}

.hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, var(--bg-dark) 100%);
}

@media (max-width: 991.98px) {
    .hero-image {
        width: 100%;
        opacity: 0.2;
    }

    .hero-image::before {
        background: linear-gradient(90deg, var(--bg-dark) 0%, rgba(15, 23, 42, 0.7) 100%);
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-light-gray);
    margin-bottom: var(--space-6);
}

.hero-label i {
    color: var(--brand-orange);
}

.hero h1 {
    margin-bottom: var(--space-6);
}

.hero .lead {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-8);
    max-width: 600px;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--glass-border);
}

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

.hero-stat-value {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--brand-orange);
    line-height: 1;
}

.hero-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
    margin-top: var(--space-1);
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

section {
    padding: var(--space-20) 0;
}

/* Reduce spacing between hero and first content section */
.hero + section {
    padding-top: var(--space-8);
}

.section-dark {
    background: var(--bg-dark);
}

.section-darker {
    background: var(--bg-darker);
}

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

.section-alt {
    background: var(--bg-section-alt);
}

.section-gradient {
    background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
}

/* Section Header */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-12);
}

.section-header .section-subtitle {
    margin: 0 auto;
}

/* ============================================================================
   CARDS (Glassmorphism)
   ============================================================================ */

.card {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: all var(--transition-base);
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-orange-trans);
    box-shadow: var(--shadow-glow);
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover));
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.card-icon i {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
}

.card-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-3);
    color: var(--color-white);
}

.card-text {
    color: var(--color-med-gray);
    margin-bottom: var(--space-4);
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand-orange);
    font-weight: var(--font-weight-medium);
}

.card-link i {
    transition: transform var(--transition-fast);
}

.card-link:hover i {
    transform: translateX(4px);
}

/* Light Card Variant */
.card-light {
    background: var(--color-white);
    border-color: var(--color-light-gray);
}

.card-light .card-title {
    color: var(--color-charcoal);
}

.card-light .card-text {
    color: var(--color-med-gray);
}

/* Service Card */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-hover));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--color-light-gray);
    font-size: var(--font-size-sm);
}

.feature-list li i {
    color: var(--color-success);
    font-size: var(--font-size-xs);
}

/* ============================================================================
   INDUSTRY TABS
   ============================================================================ */

.industry-tabs {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.industry-card {
    flex: 1;
    min-width: 280px;
    padding: var(--space-8);
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
}

.industry-card:hover,
.industry-card.active {
    border-color: var(--brand-orange);
    background: var(--bg-card);
}

.industry-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--glass-bg-light);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    transition: all var(--transition-base);
}

.industry-card:hover .industry-card-icon,
.industry-card.active .industry-card-icon {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover));
}

.industry-card-icon i {
    font-size: var(--font-size-3xl);
    color: var(--brand-orange);
    transition: color var(--transition-base);
}

.industry-card:hover .industry-card-icon i,
.industry-card.active .industry-card-icon i {
    color: var(--color-white);
}

.industry-card-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.industry-card-text {
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
    margin-bottom: 0;
}

/* ============================================================================
   TRUST / PARTNERS BAR
   ============================================================================ */

.partners-section {
    padding: var(--space-12) 0;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.partners-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-med-gray);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-6);
    text-align: center;
}

.partners-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.partners-logos img {
    width: 140px;
    height: 48px;
    object-fit: contain;
    opacity: 0.6;
    filter: grayscale(100%) brightness(2);
    transition: all var(--transition-base);
}

.partners-logos img:hover {
    opacity: 1;
    filter: grayscale(0%) brightness(1);
}

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

.testimonial-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.testimonial-quote {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-white);
    margin-bottom: var(--space-6);
    position: relative;
}

.testimonial-quote::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    left: -10px;
    font-size: 80px;
    font-family: Georgia, serif;
    color: var(--brand-orange);
    opacity: 0.3;
    line-height: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    background: var(--glass-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-avatar i {
    font-size: var(--font-size-xl);
    color: var(--brand-orange);
}

.testimonial-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-bottom: 0;
}

.testimonial-industry {
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
}

/* Swiper Testimonials */
.testimonials-swiper {
    padding-bottom: var(--space-12);
}

.testimonials-swiper .swiper-wrapper {
    align-items: stretch;
}

.testimonials-swiper .swiper-slide {
    height: auto;
}

.testimonials-swiper .testimonial-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testimonials-swiper .testimonial-quote {
    flex: 1;
}

.testimonials-swiper .swiper-pagination-bullet {
    background: var(--color-med-gray);
    opacity: 1;
}

.testimonials-swiper .swiper-pagination-bullet-active {
    background: var(--brand-orange);
    width: 24px;
    border-radius: var(--radius-full);
}

/* ============================================================================
   CTA SECTION
   ============================================================================ */

.cta-section {
    position: relative;
    padding: var(--space-16) 0;
    background: var(--bg-darker);
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--brand-orange-glow) 0%, transparent 70%);
    opacity: 0.3;
}

.cta-wrapper {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
    text-align: center;
}

.cta-wrapper h2 {
    margin-bottom: var(--space-4);
}

.cta-wrapper p {
    font-size: var(--font-size-lg);
    color: var(--color-light-gray);
    margin-bottom: var(--space-6);
}

/* ============================================================================
   STATS
   ============================================================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-8);
}

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

.stat-value {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--brand-orange);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

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

.site-footer {
    background: var(--bg-darker);
}

/* Footer CTA - Dark Glassmorphic Style */
.footer-cta {
    position: relative;
    padding: var(--space-16) 0;
    background: var(--bg-darker);
    overflow: hidden;
}

.footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--brand-orange-glow) 0%, transparent 70%);
    opacity: 0.3;
}

/* Footer Main */
.footer-main {
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--glass-border);
}

.footer-brand .tagline {
    font-size: var(--font-size-lg);
    color: var(--color-light-gray);
    margin-bottom: var(--space-2);
}

.footer-brand .established {
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-light-gray);
    font-size: var(--font-size-sm);
}

.contact-item i {
    color: var(--brand-orange);
    width: 16px;
}

.contact-item a {
    color: var(--color-light-gray);
}

.contact-item a:hover {
    color: var(--brand-orange);
}

/* Office Status */
.office-status {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--glass-bg);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    animation: pulse 2s infinite;
}

.status-indicator.open .status-dot {
    background: var(--color-success);
    box-shadow: 0 0 10px var(--color-success);
}

.status-indicator.closed .status-dot {
    background: var(--color-danger);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.office-status .hours {
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
}

/* Footer Links */
.footer-heading {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}

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

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

.footer-links a {
    color: var(--color-med-gray);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--brand-orange);
}

/* Footer Bottom */
.footer-bottom {
    padding: var(--space-6) 0;
}

.copyright {
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
    margin: 0;
}

.footer-bottom-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.footer-copyright {
    font-size: 0.8125rem;
    color: #64748b;
}

.footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.footer-policy-links {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
}

.footer-policy-links a {
    color: #94a3b8;
}

.footer-policy-links a:hover {
    color: var(--brand-orange);
}

.footer-policy-links .separator {
    color: #475569;
}

@media (max-width: 991.98px) {
    .footer-bottom-row {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }

    .footer-bottom-right {
        flex-direction: column;
        gap: 1rem;
    }
}

.social-links {
    display: inline-flex;
    justify-content: center;
    gap: var(--space-3);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--glass-bg);
    border-radius: var(--radius-full);
    color: var(--color-light-gray);
    transition: all var(--transition-fast);
}

.social-links a:hover {
    background: var(--brand-orange);
    color: var(--color-white);
}

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

.form-control,
.form-select {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
}

.form-control:focus,
.form-select:focus {
    background: var(--bg-card);
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px var(--brand-orange-glow);
    color: var(--color-white);
    outline: none;
}

.form-control::placeholder {
    color: var(--color-med-gray);
}

.form-label {
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-2);
    color: var(--color-light-gray);
}

/* Input-group addon (the PRARIT- prefix on /remote-support). Bootstrap's default is
   a light-theme grey pill with dark text, and this was the last form control with no
   dark rule of its own. Padding and radius match .form-control so the prefix and the
   field read as one unit; the text is deliberately dimmer than the input's, so it
   reads as a fixed label rather than something the visitor typed. */
.input-group-text {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    color: var(--color-light-gray);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
}

/* Light form variant */
.form-light .form-control,
.form-light .form-select {
    background: var(--color-white);
    border-color: var(--color-light-gray);
    color: var(--color-charcoal);
}

.form-light .form-control:focus,
.form-light .form-select:focus {
    background: var(--color-white);
    border-color: var(--brand-orange);
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

/* Text Colors */
.text-orange { color: var(--brand-orange) !important; }
.text-white { color: var(--color-white) !important; }
.text-muted { color: var(--color-med-gray) !important; }
.text-light { color: var(--color-light-gray) !important; }

/* Contextual text, pulled onto the design tokens. Bootstrap's defaults are picked
   for a white page: #198754 green sits at 2.6:1 on our dark backgrounds, well under
   the 4.5:1 AA floor, and it's used for "Our Solution:" labels and check lists on
   15+ pages. The tokens read 4.6–7:1 on the same backgrounds. */
.text-success { color: var(--color-success) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }

/* ...but the bright variants are tuned for DARK grounds. Where the surface is
   deliberately light (the numbered pills in the cybersecurity training cycle),
   step back down to the deeper green so the contrast flips with the background. */
.bg-white.text-success,
.card-light .text-success,
.section-light .text-success,
.form-light .text-success {
    color: var(--color-success-on-light) !important;
}

/* Background Colors */
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-darker { background-color: var(--bg-darker) !important; }
.bg-card { background-color: var(--bg-card) !important; }
.bg-orange { background-color: var(--brand-orange) !important; }

/* Spacing Utilities */
.py-section { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.mt-section { margin-top: var(--space-20); }
.mb-section { margin-bottom: var(--space-20); }

/* AOS Custom Animations */
[data-aos="fade-up"] {
    transform: translateY(30px);
}

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

@media (max-width: 991.98px) {
    :root {
        --header-height: 70px;
    }

    .hero {
        min-height: auto;
        padding: calc(var(--header-height) + var(--topbar-height) + var(--space-12)) 0 var(--space-12);
    }

    .hero h1 {
        font-size: var(--font-size-4xl);
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: var(--space-6);
    }

    .hero-stat {
        flex: 1 0 40%;
    }

    section {
        padding: var(--space-16) 0;
    }

    .section-header {
        margin-bottom: var(--space-8);
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

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

    .footer-cta .cta-wrapper,
    .cta-wrapper {
        padding: var(--space-8);
    }

}

@media (max-width: 767.98px) {
    .hero-ctas {
        flex-direction: column;
    }

    .hero-ctas .btn {
        width: 100%;
    }

    .industry-tabs {
        flex-direction: column;
    }

    .industry-card {
        min-width: 100%;
    }

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

    .footer-cta .row {
        text-align: center;
    }

    .footer-cta .col-lg-4 {
        text-align: center !important;
    }

}

@media (max-width: 575.98px) {
    .hero h1 {
        font-size: var(--font-size-3xl);
    }

    .stat-value {
        font-size: var(--font-size-4xl);
    }
}

/* ============================================================================
   BOOTSTRAP OVERRIDES FOR DARK THEME
   ============================================================================ */

/* Alert Components */
.alert {
    border-radius: var(--radius-lg);
}

.alert-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid var(--color-success);
    color: var(--color-white);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--color-danger);
    color: var(--color-white);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid var(--color-warning);
    color: var(--color-white);
}

.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid var(--color-info);
    color: var(--color-white);
}

/* Form check labels for dark theme */
.form-check-label {
    color: var(--color-white);
}

.form-check-label strong {
    color: var(--color-white);
}

/* Form validation feedback */
.invalid-feedback {
    color: var(--color-danger);
}

.valid-feedback {
    color: var(--color-success);
}

/* Bootstrap font weight utilities - ensure white text */
.fw-bold,
.fw-bolder,
.fw-semibold {
    color: var(--color-white);
}

/* Form range slider (dark theme) */
.form-range::-webkit-slider-thumb {
    background: var(--brand-orange);
}

.form-range::-moz-range-thumb {
    background: var(--brand-orange);
}

.form-range::-webkit-slider-runnable-track {
    background: var(--glass-border);
}

.form-range::-moz-range-track {
    background: var(--glass-border);
}

/* Severity labels - align with 3-position slider */
.severity-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.severity-labels .badge {
    flex: 0 0 auto;
}

.severity-labels .badge:nth-child(2) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.severity-labels {
    position: relative;
}

/* Total cost footer inside card */
.total-cost-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-danger);
    color: white;
    margin: auto calc(var(--space-8) * -1) calc(var(--space-8) * -1);
    margin-top: auto;
    padding: var(--space-6) var(--space-8);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.total-cost-footer span {
    color: white !important;
}

/* Card with footer - use flexbox to push footer to bottom */
.card:has(.total-cost-footer) {
    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------------------------
   SWEEP 2026-08-13 — components used in public markup with no rule behind them.
   Found by diffing every class in the public pages against the selectors defined
   in this file; each one below was falling through to Bootstrap's light theme.
   ---------------------------------------------------------------------------- */

/* Help text under an input (remote-support). Bootstrap's default is
   rgba(33,37,41,.75) — near-black on a dark card. */
.form-text {
    color: var(--color-med-gray);
}

/* Bootstrap's own outline variants (assessment-intake, agreement-accept).
   .btn above sets `border: 2px solid transparent` as a SHORTHAND, which lands
   after Bootstrap and wipes out border-color — so these rendered with no outline
   at all, reading as bare text rather than buttons. Restore the border and pull
   -primary onto the brand, since blue belongs to no palette here. */
.btn-outline-primary {
    border-color: var(--brand-orange);
    color: var(--brand-orange);
}

.btn-outline-secondary {
    border-color: var(--glass-border-light);
    color: var(--color-light-gray);
}

.btn-outline-danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-check:checked + .btn-outline-primary {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--color-white);
}

.btn-outline-primary:hover {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--color-white);
}

.btn-outline-danger:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-white);
}

/* Modal (agreement-accept). Bootstrap's modal is a white surface, but this site
   paints every heading white via `body h1–h6`, so .modal-title came out white on
   white. Anchor the whole modal to dark-on-light instead of patching per element. */
.modal-content {
    color: var(--color-charcoal);
}

.modal-content h1, .modal-content h2, .modal-content h3,
.modal-content h4, .modal-content h5, .modal-content h6,
.modal-title {
    color: var(--color-charcoal);
}

/* Accordion (faq). The page sets the item/button colours inline, but inline styles
   can't reach ::after — so the chevron kept Bootstrap's near-black icon (invisible
   on the dark panel) and swapped to blue when expanded. brightness(0) invert(1)
   forces any source icon to white in both states. Focus ring goes brand too. */
.accordion-button::after {
    filter: brightness(0) invert(1);
}

.accordion-button:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px var(--brand-orange-glow);
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* Card header/body (assessment-intake). Bootstrap's header is a light-theme
   rgba(0,0,0,.03) fill with a #dee2e6 rule under it — a bright line on dark glass. */
.card-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--glass-border);
    color: var(--color-white);
}

/* Progress track (quote wizard). The bar itself carries .bg-orange; only the
   groove behind it was still Bootstrap's #e9ecef. */
.progress {
    background: var(--glass-bg-light);
}

/* Form checkbox/radio inputs for dark theme */
.form-check-input {
    background-color: var(--glass-bg);
    border-color: var(--glass-border);
}

.form-check-input:checked {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.form-check-input:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 0.25rem var(--brand-orange-glow);
}

/* Small text utility */
.small, small {
    color: var(--color-med-gray);
}

/* Badge overrides for dark theme */
.badge {
    font-weight: var(--font-weight-medium);
}

.badge.bg-success {
    background-color: var(--color-success) !important;
    color: var(--color-white);
}

.badge.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-black);
}

.badge.bg-danger {
    background-color: var(--color-danger) !important;
    color: var(--color-white);
}

/* Strong/bold text in dark theme context */
strong, b {
    color: var(--color-white);
}

/* Light section overrides - reset text colors */
.section-light strong,
.section-light b,
.section-light .fw-bold,
.bg-light strong,
.bg-light b,
.bg-light .fw-bold {
    color: var(--color-charcoal);
}

.section-light .card-title,
.bg-light .card-title {
    color: var(--color-charcoal);
}

/* Plain span elements inside cards should be white */
.card span {
    color: var(--color-light-gray);
}

/* List items inside cards */
.card li {
    color: var(--color-light-gray);
}

.card li span {
    color: var(--color-light-gray);
}

.card ul, .card ol {
    color: var(--color-light-gray);
}

/* Ensure all text inside cards is visible */
.card p,
.card div {
    color: var(--color-light-gray);
}

/* Card headings stay white */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: var(--color-white);
}

/* Headings classes (h1-h6 utility classes) */
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-white);
}


/* Light section text reset */
.section-light .card span,
.section-light .card li,
.section-light .card li span,
.section-light .card ul,
.section-light .card ol,
.section-light .card p,
.section-light .card div,
.bg-light .card span,
.bg-light .card li,
.bg-light .card li span,
.bg-light .card ul,
.bg-light .card ol,
.bg-light .card p,
.bg-light .card div {
    color: var(--color-med-gray);
}

.section-light .card h1, .section-light .card h2, .section-light .card h3,
.section-light .card h4, .section-light .card h5, .section-light .card h6,
.bg-light .card h1, .bg-light .card h2, .bg-light .card h3,
.bg-light .card h4, .bg-light .card h5, .bg-light .card h6 {
    color: var(--color-charcoal);
}

.section-light .h1, .section-light .h2, .section-light .h3,
.section-light .h4, .section-light .h5, .section-light .h6,
.bg-light .h1, .bg-light .h2, .bg-light .h3,
.bg-light .h4, .bg-light .h5, .bg-light .h6 {
    color: var(--color-charcoal);
}

/* Global light section text overrides */
.section-light,
.section-light p,
.section-light span,
.section-light li,
.section-light div,
.section-light label,
.bg-light,
.bg-light p,
.bg-light span,
.bg-light li,
.bg-light div,
.bg-light label {
    color: var(--color-med-gray);
}

.section-light h1, .section-light h2, .section-light h3,
.section-light h4, .section-light h5, .section-light h6,
.bg-light h1, .bg-light h2, .bg-light h3,
.bg-light h4, .bg-light h5, .bg-light h6 {
    color: var(--color-charcoal);
}

/* ============================================================================
   INSIGHTS SECTION STYLES
   ============================================================================ */

/* Category Filter Buttons */
.insight-filters {
    text-align: center;
}

.btn-filter {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--color-light-gray);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-filter:hover {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--color-white);
}

.btn-filter.active {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--color-white);
}

/* Insight Cards */
.insight-card {
    display: flex;
    flex-direction: column;
    transition: all var(--transition-normal);
    position: relative;
    cursor: pointer;
}

.insight-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
}

.insight-card-header {
    position: relative;
    padding: 1.5rem;
    padding-bottom: 0;
}

.insight-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-dark));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
}

.insight-card-icon i {
    font-size: 2rem;
    color: var(--brand-orange);
}

.insight-card-body {
    padding: 1.5rem;
    padding-top: 1rem;
    flex-grow: 1;
}

.insight-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.insight-card-title a {
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.insight-card-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.insight-card:hover .insight-card-title a {
    color: var(--brand-orange);
}

.insight-card-excerpt {
    color: var(--color-med-gray);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.insight-card-footer {
    padding: 1.5rem;
    padding-top: 0;
    margin-top: auto;
}

.insight-card-meta {
    display: flex;
    gap: 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
    margin-bottom: 1rem;
}

.insight-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.insight-card-meta i {
    color: var(--brand-orange);
    font-size: 0.875em;
}

.insight-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-orange);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.insight-card-link:hover {
    color: var(--brand-orange-hover);
    gap: 0.75rem;
}

.insight-card-link i {
    transition: transform var(--transition-fast);
}

.insight-card:hover .insight-card-link i {
    transform: translateX(4px);
}

/* Category Badges */
.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
}

.category-badge.cybersecurity {
    background: #ef4444;
}

.category-badge.agriculture-it {
    background: #22c55e;
}

.category-badge.it-management {
    background: #8b5cf6;
}

/* Subscribe Card */
.subscribe-card {
    padding: 3rem;
}

.subscribe-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.subscribe-icon i {
    font-size: 2rem;
    color: var(--color-white);
}

.subscribe-form .input-group {
    max-width: 500px;
    margin: 0 auto;
}

.subscribe-form .form-control {
    background: var(--bg-dark);
    border: 1px solid var(--glass-border);
    color: var(--color-white);
    padding: 0.875rem 1.25rem;
    font-size: var(--font-size-base);
}

.subscribe-form .form-control:focus {
    background: var(--bg-dark);
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px var(--brand-orange-glow);
    color: var(--color-white);
}

.subscribe-form .form-control::placeholder {
    color: var(--color-med-gray);
}

.subscribe-privacy {
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
}

.subscribe-privacy i {
    color: var(--color-success);
    margin-right: 0.25rem;
}

/* Article Page Styles */
.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
}

.article-breadcrumb a {
    color: var(--color-med-gray);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.article-breadcrumb a:hover {
    color: var(--brand-orange);
}

.article-breadcrumb i {
    font-size: 0.625rem;
    opacity: 0.5;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-meta i {
    color: var(--brand-orange);
}

/* Article Content Typography */
.article-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-light-gray);
}

.article-content h2 {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-content h3 {
    font-size: 1.375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

.article-content blockquote {
    border-left: 4px solid var(--brand-orange);
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    background: var(--glass-bg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}

.article-content a {
    color: var(--brand-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-content a:hover {
    color: var(--brand-orange-hover);
}

.article-content strong {
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
}

/* Inline CTA in articles */
.inline-cta {
    border-left: 4px solid var(--brand-orange);
    margin: 2rem 0;
    padding: 1.5rem;
}

.inline-cta h4 {
    margin-bottom: 0.5rem;
}

.inline-cta .btn-primary,
.article-cta .btn-primary {
    color: var(--color-white);
}

.inline-cta .btn-primary:hover,
.article-cta .btn-primary:hover {
    color: var(--color-white);
}

/* ============================================================================
   CYBER EMERGENCY BUTTON & PAGE
   ============================================================================ */

/* Emergency Colors */
:root {
    --emergency-red: #dc2626;
    --emergency-red-hover: #ef4444;
    --emergency-red-glow: rgba(220, 38, 38, 0.4);
    --emergency-red-trans: rgba(220, 38, 38, 0.15);
}

/* Floating Emergency Button */
.cyber-emergency-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, var(--emergency-red), var(--emergency-red-hover));
    border: 2px solid var(--emergency-red);
    border-radius: var(--radius-full);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 4px 20px var(--emergency-red-glow);
    transition: all var(--transition-base);
    animation: emergencyPulse 3s ease-in-out infinite;
}

.cyber-emergency-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 30px var(--emergency-red-glow);
    color: var(--color-white);
}

.cyber-emergency-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--emergency-red-glow), 0 4px 20px var(--emergency-red-glow);
}

.cyber-emergency-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.cyber-emergency-btn-icon i {
    font-size: 1rem;
}

.cyber-emergency-btn-text {
    white-space: nowrap;
}

@keyframes emergencyPulse {
    0%, 100% {
        box-shadow: 0 4px 20px var(--emergency-red-glow);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 35px rgba(220, 38, 38, 0.7);
        transform: scale(1.03);
    }
}

@media (max-width: 767.98px) {
    .cyber-emergency-btn {
        bottom: 24px;
        right: 20px;
        padding: var(--space-3);
        width: 48px;
        height: 48px;
        justify-content: center;
    }

    .cyber-emergency-btn-text {
        display: none;
    }

    .cyber-emergency-btn-icon {
        width: auto;
        height: auto;
    }

    .cyber-emergency-btn-icon i {
        font-size: 1.25rem;
    }
}

/* ============================================================================
   BACK TO TOP BUTTON
   ============================================================================ */

#backToTop {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    background: #0a0f1a;
    border: 2px solid var(--brand-orange);
    border-radius: var(--radius-full);
    color: var(--brand-orange);
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

#backToTop:hover {
    background: var(--brand-orange);
    color: #fff;
    box-shadow: 0 0 20px rgba(246, 140, 30, 0.4);
}

#backToTop:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 767.98px) {
    #backToTop {
        bottom: 16px;
        padding: 8px 32px;
    }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
    .cyber-emergency-btn {
        animation: none;
    }
    #backToTop {
        transition: opacity 0.15s ease;
    }
}

/* Emergency Page Hero */
.emergency-hero {
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--emergency-red-trans) 100%);
    border-bottom: 1px solid var(--emergency-red);
}

.emergency-hero .hero-label {
    background: var(--emergency-red-trans);
    border-color: var(--emergency-red);
}

.emergency-hero .hero-label i {
    color: var(--emergency-red);
}

/* Emergency Contact Box */
.emergency-contact-box {
    background: linear-gradient(135deg, var(--emergency-red-trans), rgba(220, 38, 38, 0.05));
    border: 2px solid var(--emergency-red);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
}

.emergency-contact-box h3 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.emergency-contact-box h3 i {
    color: var(--emergency-red);
    margin-right: var(--space-2);
}

.emergency-contact-box p {
    color: var(--color-light-gray);
    margin-bottom: var(--space-4);
}

.emergency-contact-box .btn-danger {
    background: var(--emergency-red);
    border-color: var(--emergency-red);
    font-size: var(--font-size-xl);
    padding: var(--space-4) var(--space-6);
}

.emergency-contact-box .btn-danger:hover {
    background: var(--emergency-red-hover);
    border-color: var(--emergency-red-hover);
}

.emergency-hours {
    margin-top: var(--space-3);
    margin-bottom: 0;
}

.emergency-hours small {
    color: var(--color-med-gray);
}

/* Triage Cards */
.triage-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    cursor: pointer;
    transition: all var(--transition-base);
    height: 100%;
}

.triage-card:hover {
    border-color: var(--emergency-red);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15);
}

.triage-card.active {
    border-color: var(--emergency-red);
    background: var(--emergency-red-trans);
}

.triage-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--emergency-red-trans);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.triage-card-icon i {
    font-size: var(--font-size-2xl);
    color: var(--emergency-red);
}

.triage-card h4 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.triage-card p {
    color: var(--color-med-gray);
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

/* Triage Guidance Panel */
.triage-guidance {
    display: none;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-top: var(--space-6);
}

.triage-guidance.active {
    display: block;
}

.triage-guidance-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--glass-border);
}

.triage-guidance-header i {
    font-size: var(--font-size-2xl);
    color: var(--emergency-red);
}

.triage-guidance-header h3 {
    margin: 0;
}

.emergency-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: step;
}

.emergency-steps li {
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--glass-border);
	color: var(--color-light-gray);
	line-height: 1.7;
}

.emergency-steps li:last-child {
	border-bottom: none;
}

.emergency-steps li::before {
	counter-increment: step;
	content: counter(step);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	width: 28px;
	height: 28px;
	background: var(--emergency-red);
	color: var(--color-white);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-sm);
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.emergency-steps .step-content {
	flex: 1;
}

.emergency-steps .step-content strong {
	display: block;
	color: var(--color-white);
	margin-bottom: 0.35rem;
}

/* Response Process Timeline */
.response-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: var(--space-8) 0;
}

.response-timeline::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--glass-border);
}

.response-step {
    text-align: center;
    position: relative;
    flex: 1;
    padding: 0 var(--space-2);
}

.response-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--glass-bg);
    border: 2px solid var(--emergency-red);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-4);
    position: relative;
    z-index: 1;
}

.response-step-number i {
    font-size: var(--font-size-2xl);
    color: var(--emergency-red);
}

.response-step h5 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.response-step p {
    color: var(--color-med-gray);
    font-size: var(--font-size-sm);
    margin: 0;
}

@media (max-width: 767.98px) {
    .response-timeline {
        flex-direction: column;
        gap: var(--space-6);
    }

    .response-timeline::before {
        display: none;
    }

    .response-step {
        display: flex;
        text-align: left;
        gap: var(--space-4);
    }

    .response-step-number {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        margin: 0;
    }

    .response-step-content {
        flex: 1;
    }
}

/* Author Box */
.author-box {
    margin-top: 3rem;
    padding: 1.5rem;
    overflow: hidden;
    height: auto;
}

.author-box .d-flex {
    min-width: 0;
}

.author-box .d-flex > div:last-child {
    min-width: 0;
    flex: 1;
}

.author-avatar {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.author-avatar i {
    font-size: 1.5rem;
    color: var(--color-white);
}

/* Article CTA */
.article-cta {
    margin-top: 2rem;
    padding: 1.5rem;
    height: auto;
}

.article-cta h3 {
    margin-bottom: 0.5rem;
}

/* Article Sidebar */
.article-sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-card {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    height: auto;
}

.sidebar-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.sidebar-card h4 i {
    color: var(--brand-orange);
}

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

.category-list li {
    margin-bottom: 0.5rem;
}

.category-list a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--color-light-gray);
    text-decoration: none;
    transition: color var(--transition-fast);
    border-bottom: 1px solid var(--glass-border);
}

.category-list a:hover,
.category-list a.active {
    color: var(--brand-orange);
}

.category-list li:last-child a {
    border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .article-sidebar {
        position: static;
        margin-top: 3rem;
    }

    .subscribe-card {
        padding: 2rem;
    }
}

@media (max-width: 767.98px) {
    .article-content {
        font-size: 1rem;
    }

    .article-content h2 {
        font-size: 1.5rem;
    }

    .article-content h3 {
        font-size: 1.25rem;
    }

    .article-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .insight-card-meta {
        flex-direction: column;
        gap: 0.25rem;
    }

    .author-box .d-flex {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================================================
   RECAPTCHA
   ============================================================================ */

.grecaptcha-badge {
    visibility: hidden !important;
}

/* ============================================================================
   CAREERS / JOB POSTINGS
   ============================================================================ */

.job-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: all var(--transition-base);
}

.job-card:hover {
    border-color: var(--brand-orange);
    box-shadow: 0 8px 32px rgba(246, 140, 30, 0.1);
}

.job-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.job-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover));
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.job-icon i {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
}

.job-title-wrap {
    flex: 1;
}

.job-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin: 0 0 var(--space-2);
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.job-meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-med-gray);
}

.job-meta i {
    color: var(--brand-orange);
    font-size: var(--font-size-xs);
}

.job-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--glass-bg);
    border: 1px solid var(--brand-orange);
    color: var(--brand-orange);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.job-salary {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
    margin-bottom: var(--space-4);
}

.job-excerpt {
    color: var(--color-light-gray);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
}

.job-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand-orange);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    padding: 0;
    font-size: var(--font-size-base);
}

.job-toggle:hover {
    color: var(--brand-orange-hover);
}

.job-toggle i {
    transition: transform var(--transition-fast);
}

.job-toggle.active i {
    transform: rotate(180deg);
}

.job-details {
    display: none;
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--glass-border);
}

.job-details.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

.job-section {
    margin-bottom: var(--space-6);
}

.job-section:last-child {
    margin-bottom: 0;
}

.job-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.job-section-title i {
    color: var(--brand-orange);
}

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

.job-list li {
    position: relative;
    padding-left: var(--space-6);
    padding-bottom: var(--space-2);
    color: var(--color-light-gray);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.job-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: var(--brand-orange);
    border-radius: var(--radius-full);
}

.job-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.job-benefits .badge {
    background: var(--glass-bg-light);
    color: var(--color-light-gray);
    font-weight: var(--font-weight-normal);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
}

.job-apply {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.job-apply-text {
    color: var(--color-med-gray);
    font-size: var(--font-size-sm);
}

/* Culture section */
.culture-card {
    text-align: center;
    padding: var(--space-6);
}

.culture-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--glass-bg-light);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    transition: all var(--transition-base);
}

.culture-card:hover .culture-icon {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-hover));
}

.culture-icon i {
    font-size: var(--font-size-2xl);
    color: var(--brand-orange);
    transition: color var(--transition-base);
}

.culture-card:hover .culture-icon i {
    color: var(--color-white);
}

/* Responsive adjustments for job cards */
@media (max-width: 767.98px) {
    .job-header {
        flex-direction: column;
    }

    .job-meta {
        flex-direction: column;
        gap: var(--space-2);
    }

    .job-apply {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ============================================================================
   HOMEPAGE — 2026 conversion sections
   ============================================================================ */

/* Hero trust badges (under the CTAs) */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--glass-bg-light);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-light-gray);
}

.hero-trust-item i {
    color: var(--brand-orange);
}

/* "Why switch" — problem vs. solution columns */
.pain-list,
.gain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pain-list li,
.gain-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--color-light-gray);
}

.pain-list li i {
    color: var(--color-danger);
    margin-top: 4px;
}

.gain-list li i {
    color: var(--color-success);
    margin-top: 4px;
}

/* "How it works" — orange numbered process (on-brand variant of the timeline) */
.process-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: var(--space-8) 0 0;
    gap: var(--space-4);
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--glass-border);
}

.process-step {
    text-align: center;
    position: relative;
    flex: 1;
    padding: 0 var(--space-2);
}

.process-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    background: var(--glass-bg);
    border: 2px solid var(--brand-orange);
    border-radius: var(--radius-full);
    color: var(--brand-orange);
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    position: relative;
    z-index: 1;
}

.process-step h3,
.process-step h5 {
    color: var(--color-white);
    margin-bottom: var(--space-2);
}

.process-step p {
    color: var(--color-med-gray);
    font-size: var(--font-size-sm);
    margin: 0;
}

@media (max-width: 767.98px) {
    .process-steps {
        flex-direction: column;
        gap: var(--space-6);
    }

    .process-steps::before {
        display: none;
    }

    .process-step {
        display: flex;
        text-align: left;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .process-step-num {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        margin: 0;
        font-size: var(--font-size-xl);
    }
}

/* All-inclusive value / pricing philosophy note */
.price-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

/* Local presence strip */
.local-towns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.local-town {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    color: var(--color-light-gray);
    font-size: var(--font-size-sm);
}

.local-town i {
    color: var(--brand-orange);
    font-size: var(--font-size-xs);
}

/* ============================================================================
   ACCESSIBILITY — SKIP LINK
   ============================================================================ */

/* Visually hidden until focused, then pinned over the header so keyboard users
   can jump past ~30 nav links on every page. */
.skip-link {
    /* fixed, not absolute — an absolute skip link scrolls off-screen, so tabbing
       part-way down the page would focus a control the user cannot see */
    position: fixed;
    top: 0;
    left: var(--space-4);
    z-index: 2000;
    transform: translateY(-150%);
    padding: var(--space-3) var(--space-5);
    background: var(--brand-orange);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: transform var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    color: var(--color-white);
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

/* ============================================================================
   UTILITY CLASSES (replacing former inline styles)
   ============================================================================ */

.footer-logo {
    height: 45px;
    width: auto;
}

/* Left-aligned variant of the normally centred section subtitle */
.section-subtitle-start {
    margin-left: 0;
    margin-right: 0;
}

/* Cards that carry a coloured edge to signal tone (positive / warning) */
.card-accent-brand {
    border-color: var(--brand-orange);
}

.card-accent-danger {
    border-color: var(--color-danger);
}

/* Oversized decorative icon heading a card */
.card-hero-icon {
    font-size: 4rem;
    margin-bottom: var(--space-6);
}

/* ============================================================================
   IT REPORT CARD — HOMEPAGE TEASER STAMP
   ============================================================================ */

.rc-teaser-stamp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 170px;
    border: 5px solid var(--brand-orange);
    border-radius: 24px;
    transform: rotate(-6deg);
}

.rc-teaser-stamp::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px dashed var(--brand-orange);
    border-radius: 15px;
    opacity: 0.65;
}

.rc-teaser-stamp span {
    font-family: var(--font-heading);
    font-size: 5.5rem;
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    color: var(--brand-orange);
}

/* ============================================================================
   LEAD MAGNET — IT SECURITY CHECKLIST (includes/checklist-magnet.php)
   ============================================================================ */

.checklist-magnet.card {
    height: auto;
}

.checklist-magnet .checklist-magnet-form {
    min-width: min(100%, 480px);
}

/* Slim site-wide strip in the footer */
.checklist-magnet-compact {
    background: rgba(246, 140, 30, 0.06);
    border-top: 1px solid rgba(246, 140, 30, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.checklist-magnet-compact .checklist-magnet-form {
    min-width: min(100%, 420px);
}

/* Honeypot: off-screen for humans, still fillable by naive bots.
   Not display:none — some bots skip hidden fields. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Secondary "Technologies We Deploy" label when the logo strip is folded into
   another band (homepage service-area section) rather than standing alone. */
.partners-label-sub {
    margin-top: var(--space-10);
}

/* ============================================================================
   IT REPORT CARD — SCORE-AWARE NEXT STEP
   Tone is set by the grade: a D and an A get different framing (and colour).
   ============================================================================ */

.rc-next-step {
    border: none;
    height: auto;
}

.rc-next-step--urgent {
    background: linear-gradient(135deg, var(--emergency-red), var(--emergency-red-hover));
}

.rc-next-step--attention {
    background: linear-gradient(135deg, var(--brand-orange), #d97706);
}

.rc-next-step--verify {
    background: linear-gradient(135deg, var(--color-success), #059669);
}

/* ============================================================================
   CTA HIERARCHY (2026-08-09)
   Report Card is the primary ask site-wide; the assessment stays visible as the
   fast lane, and everything else demotes to a text note so paths stay reachable
   without stacking three loud buttons.
   ============================================================================ */

.hero-cta-note {
    margin-top: var(--space-4);
    margin-bottom: 0;
    color: var(--color-med-gray);
    font-size: var(--font-size-sm);
}

.hero-cta-note a {
    color: var(--color-light-gray);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hero-cta-note a:hover,
.hero-cta-note a:focus {
    color: var(--brand-orange);
}

.cta-alt-note {
    margin-top: var(--space-5);
    margin-bottom: 0;
    font-size: var(--font-size-sm);
    opacity: 0.85;
}

.cta-alt-note a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Tertiary button — used where a third action must stay reachable without
   competing with the primary/secondary pair. Was referenced in markup for a
   long time with no rule behind it, so it rendered as unstyled Bootstrap. */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--color-light-gray);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--glass-bg-light);
    border-color: var(--brand-orange);
    color: var(--color-white);
}