:root {
    
    --primary-hue: 222;
    --primary-sat: 100%;
    --primary-light: 53%;

    --primary: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));
    --primary-light-hover: hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-light) + 8%));
    --primary-dark: hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-light) - 15%));

    --accent-hue: 48;
    --accent-sat: 100%;
    --accent-light: 51%;

    --accent: hsl(var(--accent-hue), var(--accent-sat), var(--accent-light));
    --accent-hover: hsl(var(--accent-hue), var(--accent-sat), calc(var(--accent-light) - 8%));

    --bg-base: #0b0f19;
    --bg-surface: #121824;
    --bg-surface-elevated: #1a2234;
    --bg-light: #0f1524;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-hover: rgba(255, 255, 255, 0.15);

    --glass-bg: rgba(18, 24, 36, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.3);

    --success: #10b981;
    --error: #ef4444;

    --container-max-width: 1280px;
    --header-height: 80px;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-full: 9999px;

    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 8px 25px rgba(255, 203, 5, 0.15);

    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-medium: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="light"] {
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #f1f5f9;
    --bg-light: #f1f5f9;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-color: rgba(15, 23, 42, 0.08);
    --border-color-hover: rgba(15, 23, 42, 0.15);

    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-shadow: rgba(15, 23, 42, 0.05);

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

/* Every type size on the site is a rem off this one value — 253 of the 255
   font-size declarations — so this is the single lever that scales the whole
   page's text and every Font Awesome icon with it.

   It used to be a flat 16px, which meant a 1920px desktop and a 1920px laptop
   running Windows at 125% scaling (1536 CSS px) rendered identical type, even
   though the second one has 20% less room for it and magnifies every pixel by
   1.25 on the way to the glass. That is why the page reads as oversized there:
   the headings are the same as the desktop's while the viewport around them is
   much smaller, so they swallow the fold.

   The size now tracks the viewport between 1400px and 1920px — 16px at 1920,
   ~14.4px at 1536, 14px at 1400 and below. Expressed in rem rather than px so
   it stays a multiple of whatever default font size the visitor has set in
   their browser instead of overriding it.

   Guarded to >=1101px on purpose: that is where the nav already collapses to
   the drawer, so the step lands inside a reflow that is happening anyway, and
   phones and tablets keep the full 16px (which also keeps iOS from zooming the
   contact form's inputs, as it does under 16px). */
@media (min-width: 1101px) {
    html {
        font-size: clamp(0.875rem, 0.385vw + 0.538rem, 1rem);
    }
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    transition: all var(--transition-fast);
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Spacing is the other half of "the page is too big": the type above scales with
   the viewport now, but 555 padding/margin values across this file are flat px
   and would have kept a 1920px desktop's whitespace on a 1536px laptop. These
   three carry the page's vertical rhythm, so making them fluid is what actually
   shortens the scroll. vw-based rather than rem-based so they stay continuous
   through the 1101px step above instead of jumping with it. */
.section-padding {
    padding: clamp(64px, 5.2vw, 100px) 0;
}

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

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color-hover);
    border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

.text-gradient {
    background: linear-gradient(135deg, var(--accent) 0%, #ff8c00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html[data-theme="light"] .text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-heading {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 12px;
    position: relative;
    padding-left: 30px;
}

.sub-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background-color: var(--accent);
}

/* Centered sub-headings have lines on both sides */
.text-center .sub-heading {
    padding-left: 30px;
    padding-right: 30px;
}

.text-center .sub-heading::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background-color: var(--accent);
}

html[data-theme="light"] .sub-heading {
    color: var(--primary);
}

html[data-theme="light"] .sub-heading::before {
    background-color: var(--primary);
}

html[data-theme="light"] .text-center .sub-heading::after {
    background-color: var(--primary);
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 50px auto;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.btn-primary {
    background-color: var(--accent);
    color: #0b0f19;
    box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 203, 5, 0.3);
}

html[data-theme="light"] .btn-primary {
    background-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(19, 38, 117, 0.2);
}

html[data-theme="light"] .btn-primary:hover {
    background-color: var(--primary-light-hover);
    box-shadow: 0 10px 30px rgba(19, 38, 117, 0.3);
}

.btn-secondary {
    background-color: var(--bg-surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--border-color-hover);
    transform: translateY(-2px);
    border-color: var(--text-muted);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color-hover);
}

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

.btn-sm {
    padding: 10px 20px;
    font-size: 0.85rem;
}

.btn-block {
    width: 100%;
}

.floating-controls {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 100;
}

.floating-btn {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-full);
    background-color: var(--bg-surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.floating-btn:hover {
    background-color: var(--accent);
    color: #0b0f19;
    transform: scale(1.1);
    border-color: var(--accent);
}

html[data-theme="light"] .floating-btn:hover {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.scroll-top-btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
}

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

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body.inner-page main,
body.inner-page .container {
    padding-top: calc(var(--header-height) + 20px);
}

.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.preloader-logo {
    height: 60px;
    width: auto;
    margin-bottom: 25px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.05));
}

.logo-animation {
    display: inline-block;
    animation: floatLogo 3s infinite ease-in-out;
}

.loader-bar {
    width: 180px;
    height: 4px;
    background-color: rgba(15, 23, 42, 0.06);
    margin: 10px auto 0 auto;
    border-radius: var(--border-radius-full);
    overflow: hidden;
    position: relative;
}

.loader-progress {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: var(--border-radius-full);
    animation: fillLoader 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

@keyframes fillLoader {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: transparent;
    z-index: 9999;
    display: flex;
    align-items: center;
    -webkit-transition: background-color var(--transition-medium), border var(--transition-medium), -webkit-backdrop-filter var(--transition-medium);
    transition: background-color var(--transition-medium), border var(--transition-medium), backdrop-filter var(--transition-medium);
}

.header.scrolled {
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100% !important;
    padding: 0 40px;
}

/* .header-container and .logo img narrow in steps further down, alongside the
   .nav-list rules they have to stay in sync with — 1200px, then 1100px, then
   768px. Keep those three blocks in that order; the cascade depends on it. */

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 64px;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-fast);
}

.logo:hover img {
    transform: scale(1.05);
}

html[data-theme="dark"] .logo .light-logo {
    display: block;
}

html[data-theme="dark"] .logo .dark-logo {
    display: none;
}

html[data-theme="light"] .logo .light-logo {
    display: none;
}

html[data-theme="light"] .logo .dark-logo {
    display: block;
}

.nav-menu {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    gap: 18px;
    align-items: center;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px 0;
    position: relative;
    white-space: nowrap;
}

/* The bar carries more items now, so it tightens up before the mobile menu.
   The nine links measure ~770px here; trimming the logo and the side padding
   leaves the row about 60px of slack at 1101px, the last width before the
   drawer takes over — enough that a fallback font can't push it into overflow. */
@media (max-width: 1200px) {
    .nav-list {
        gap: 13px;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    .logo img {
        height: 54px;
    }

    .header-container {
        padding: 0 28px;
    }
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

html[data-theme="light"] .nav-link {
    color: #000000;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
    color: var(--primary);
}

html[data-theme="light"] .nav-link::after {
    background-color: var(--primary);
}

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

.dropdown-icon {
    font-size: 0.7rem;
    margin-left: 6px;
    transition: transform var(--transition-fast) ease;
    vertical-align: middle;
}

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

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    width: 380px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 10000;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 10px;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent var(--bg-surface) transparent;
}

.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
    text-align: left;
}

.dropdown-item:hover,
.dropdown-item.active {
    color: var(--text-primary);
    background-color: var(--border-color);
    border-left: 3px solid var(--accent);
    padding-left: 24px;
}

html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item.active {
    border-left-color: var(--primary);
}

.nav-cta,
.nav-cta.active {
    background-color: var(--accent);
    color: #0b0f19;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-accent);
}

.nav-cta::after {
    display: none;
}

.nav-cta:hover,
.nav-cta.active:hover {
    background-color: var(--accent-hover);
    color: #0b0f19;
    transform: translateY(-1px);
}

html[data-theme="light"] .nav-cta,
html[data-theme="light"] .nav-cta.active {
    background-color: var(--primary);
    color: #ffffff;
    box-shadow: none;
}

html[data-theme="light"] .nav-cta:hover,
html[data-theme="light"] .nav-cta.active:hover {
    background-color: var(--primary-light-hover);
    color: #ffffff;
}

.nav-theme-item {
    display: flex;
    align-items: center;
    margin-left: -10px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast),
        background-color var(--transition-fast), transform var(--transition-fast);
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

html[data-theme="light"] .theme-toggle {
    background-color: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-theme="light"] .theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    flex: none;
}

/* The bar collapses into the drawer at 1100px, not 768px. It carries nine items
   next to a 64px logo, which needs roughly 1100px to lay out; below that the row
   used to overflow and get silently clipped by `body { overflow-x: hidden }`, so
   the last links simply vanished. That hit 1366px laptops and any display running
   Windows scaling at 125%/150% (a 1920px screen at 150% is only 1280 CSS px). */
@media (max-width: 1100px) {
    .logo img {
        height: 52px;
    }
}

@media (max-width: 768px) {
    .logo img {
        height: 46px;
    }

    .header-container {
        padding: 0 20px;
    }
}

.bar {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: all var(--transition-fast);
}

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 100px;
    overflow: hidden;
}

/* The photo sits on a pseudo-element, not on the section, because the zoom has
   to run without ever breaking `cover`.

   It used to animate `background-size` from 100% to 110% on the section itself.
   `100%` sets the width alone and lets the height fall out of the image's own
   2000x1231 ratio, so the picture was only ever 0.62x the viewport width tall.
   Once the hero grew taller than that — which it does on any laptop, where the
   window is short and this column of content is long — the image stopped
   reaching the section's top edge, and `background-position: center` split the
   shortfall into a pale band above and below it. The top band landed directly
   behind the fixed header and read as the navbar losing its transparency.

   Scaling by transform keeps `cover` in force at every size, so the coverage no
   longer depends on how tall the section happens to be. */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url('assets/blue-buildings.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: zoomHeroBg 20s infinite alternate linear;
}

@keyframes zoomHeroBg {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(11, 15, 25, 0.95) 0%, rgba(19, 38, 117, 0.4) 100%);
    z-index: 1;
}

html[data-theme="light"] .hero-bg-overlay {
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(19, 38, 117, 0.3) 100%);
}

.hero-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    flex-grow: 1;
}

.hero-main {
    display: block;
    margin-bottom: 50px;
}

.hero-content {
    max-width: 760px;
}

/* --- Sully companion ----------------------------------------------------
   Anchored to the free gutter beside the centred 1280px container rather than
   to the viewport edge, and scaled to whatever width that gutter actually has,
   so he can never sit on top of the content. Faded in once the hero is behind
   you, and hidden once the gutter is too narrow for him to read at all. */
.scroll-mascot {
    position: fixed;
    right: calc(50% + 628px);
    top: 50%;
    z-index: 90;
    width: min(272px, calc(50vw - 632px));
    margin: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* No scaleX(-1): unlike the old artwork, this one already faces right (into
       the content) and carries readable lettering on his badge and hard hat. */
    transform: translateY(calc(-50% + 24px));
    transform-origin: center;
    transition: opacity var(--transition-medium), visibility var(--transition-medium),
        transform var(--transition-medium);
}

body.sully-companion-visible .scroll-mascot {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
}

.mascot-bob {
    position: relative;
    animation: mascotBob 4s ease-in-out infinite;
}

.mascot-body {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

/* Waving-hand layer, pivoting at the wrist of the 776x1405 trimmed artwork.
   Body and arm share one canvas, so they stay registered at width: 100%. */
.mascot-arm {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: auto;
    transform-origin: 82.54% 34.59%;
    animation: mascotWave 3s ease-in-out infinite;
}

@keyframes mascotBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* One wave per 3s: swings for about a second, then rests */
@keyframes mascotWave {

    0%,
    6% {
        transform: rotate(0deg);
    }

    13% {
        transform: rotate(-10deg);
    }

    21% {
        transform: rotate(8deg);
    }

    29% {
        transform: rotate(-8deg);
    }

    37% {
        transform: rotate(6deg);
    }

    45%,
    100% {
        transform: rotate(0deg);
    }
}

/* Below this the gutter leaves him under ~118px wide, too small to read — and
   narrower still, he would have to sit on the text to appear at all, since the
   content column is a fixed 1280px. */
@media (max-width: 1500px) {
    .scroll-mascot {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mascot-bob,
    .mascot-arm {
        animation: none;
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 203, 5, 0.15);
    color: var(--accent);
    padding: 8px 16px;
    border-radius: var(--border-radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 25px;
    transform: translateY(-12px);
    border: 1px solid rgba(255, 203, 5, 0.25);
}

html[data-theme="light"] .hero-badge {
    background-color: rgba(19, 38, 117, 0.1);
    color: var(--primary);
    border-color: rgba(19, 38, 117, 0.15);
}

/* 4rem was a flat size, so a 1920px desktop and a 1536px laptop — the same
   1920 screen at Windows 125% scaling — both got 64px type, and on the laptop
   it swallowed the fold. The size now tracks the viewport between roughly
   1400px and 1920px and then holds: 64px at 1920, ~52px at 1536, 48px from
   1400px down, where the 1024px rule below picks it up at the same 48px so the
   two never disagree. */
.hero-title {
    font-size: clamp(3rem, 3.05vw + 0.32rem, 4rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-lead {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 35px;
    max-width: 760px;
}

.hero-actions {
    display: flex;
    gap: 20px;
}

.hero-info-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    padding: 25px 30px;
    margin-top: auto;
    margin-bottom: 40px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
}

.info-item:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

.info-item i {
    font-size: 1.8rem;
    color: var(--accent);
}

html[data-theme="light"] .info-item i {
    color: var(--primary);
}

.info-details h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-details p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 8px;
    right: 32px;
    left: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    z-index: 2;
    cursor: pointer;
    text-decoration: none;
}

.hero-scroll-indicator span {
    color: #4b5563;
}

.mouse {
    width: 24px;
    height: 40px;
    border: 2px solid var(--text-muted);
    border-radius: var(--border-radius-full);
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.wheel {
    width: 4px;
    height: 8px;
    background-color: var(--accent);
    border-radius: var(--border-radius-full);
    animation: scrollMouse 1.5s infinite ease-in-out;
}

html[data-theme="light"] .wheel {
    background-color: var(--primary);
}

@keyframes scrollMouse {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(6px);
        opacity: 0.3;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-section .section-grid {
    align-items: start;
}

/* Extra breathing room under Services. The collage that used to fill the right
   column carried a 140px top offset, which is what gave this section its air;
   the questions that replaced it start flush with the heading, so the padding
   has to supply that gap instead. ID selector so it outranks the
   `.home-page .section-padding` 68px rule further down the file. */
.home-page #about-introduction {
    padding-top: clamp(76px, 6.25vw, 120px);
}

@media (max-width: 1024px) {
    .home-page #about-introduction {
        padding-top: 84px;
    }
}

.about-text-highlight {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.about-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 35px;
}

.about-question-tabs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-question-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    max-width: 560px;
    min-width: 330px;
}

.about-question-item {
    display: flex;
    flex-direction: column;
}

/* Badge, question, and chevron all sit on one row so the closed card stays compact */
.about-question-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 18px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    overflow: hidden;
    transition: border-color var(--transition-medium), background-color var(--transition-medium),
        box-shadow var(--transition-medium), transform var(--transition-fast);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* Accent rail that wipes down on hover and stays while the answer is open */
.about-question-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-medium);
}

html[data-theme="light"] .about-question-btn::before {
    background-color: var(--primary);
}

.about-question-btn:hover::before,
.about-question-btn.active::before {
    transform: scaleY(1);
}

.about-question-meta {
    display: flex;
    flex-shrink: 0;
}

.about-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.12);
    border-radius: var(--border-radius-sm);
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

.about-question-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
}

/* The chevron gets its own pill so it reads as the control, not stray punctuation */
.about-question-btn i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: var(--bg-surface-elevated);
    border-radius: var(--border-radius-full);
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform var(--transition-medium), color var(--transition-medium),
        background-color var(--transition-medium);
}

.about-question-btn:hover,
.about-question-btn.active {
    border-color: var(--accent);
}

.about-question-btn:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* The open header is anchored to its answer, so it must not lift away from it */
.about-question-btn.active:hover {
    transform: none;
}

.about-question-btn:hover i {
    color: var(--text-primary);
}

.about-question-btn.active i {
    background-color: var(--primary);
    color: #ffffff;
    transform: rotate(180deg);
}

.about-question-btn.active .about-question-number {
    background-color: var(--primary);
    color: #ffffff;
}

/* Square off the seam where the open answer meets its question, and keep the
   divider between the two a hairline rather than a full accent stripe */
.about-question-btn.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: var(--border-color);
}

html[data-theme="light"] .about-question-btn:hover,
html[data-theme="light"] .about-question-btn.active {
    border-color: var(--primary);
}

html[data-theme="light"] .about-question-btn.active {
    border-bottom-color: var(--border-color);
}

.about-answer-box {
    height: 0;
    overflow: hidden;
    opacity: 0;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

/* inset shadow continues the header's rail without shifting the text */
.about-answer-box.is-open {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent), var(--shadow-md);
}

html[data-theme="light"] .about-answer-box.is-open {
    border-color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary), var(--shadow-md);
}

.about-answer-box[hidden] {
    display: none;
}

.about-answer-box p {
    margin: 0;
    padding: 18px 22px 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.75;
}

.about-answer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 22px 20px;
    padding: 9px 16px;
    background-color: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.1);
    border-radius: var(--border-radius-full);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.about-answer-link i {
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}

.about-answer-link:hover {
    background-color: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.18);
    color: var(--primary-light-hover);
}

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

@media (prefers-reduced-motion: reduce) {
    .about-answer-box {
        transition: opacity 0.15s ease;
    }

    .about-question-btn:hover {
        transform: none;
    }

    .about-question-btn::before {
        transition: none;
    }
}

/* The three questions moved out of .about-content into the grid's right column,
   where the collage used to sit. `.about-section .section-grid` is align-items:
   start, so they top-align with the heading. The .about-visuals rules below stay
   put — that markup is only commented out, not deleted. */
.about-questions {
    position: relative;
    margin-top: 48px;
}

/* Fill the column instead of stopping at the 560px cap it needed as a
   narrower block inside the text column. */
.about-questions .about-question-grid {
    max-width: 100%;
}

/* Rehomed from the removed .project-next-step band under Projects. Full width
   of the column so it reads as the closing step of the question stack rather
   than a stray button floating beside it. */
.about-questions-actions {
    margin-top: 22px;
}

.about-questions-actions .btn {
    width: 100%;
}

.about-visuals {
    position: relative;
    margin-top: 140px;
}

@media (max-width: 1024px) {
    .about-visuals {
        margin-top: 0;
    }
}

.image-collage {
    position: relative;
    width: 100%;
    height: 520px;
}

.about-trust-line {
    margin: 34px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: var(--text-primary);
}

html[data-theme="light"] .about-trust-line {
    color: #000000;
}

.collage-item {
    position: absolute;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform var(--transition-slow);
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.collage-item:hover img {
    transform: scale(1.05);
}

.main-img {
    width: 75%;
    height: 75%;
    top: 0;
    left: 0;
    z-index: 2;
    border: 4px solid var(--bg-surface);
}

.secondary-img {
    width: 60%;
    height: 60%;
    bottom: 0;
    right: 0;
    z-index: 3;
    border: 4px solid var(--bg-surface);
}

.badge-floating {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--accent);
    color: #0b0f19;
    padding: 20px 25px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--shadow-lg);
    z-index: 4;
}

html[data-theme="light"] .badge-floating {
    background-color: var(--primary);
    color: #ffffff;
}

.badge-floating .number {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}

.badge-floating .text {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.collage-bg-pattern {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    background-image: radial-gradient(var(--border-color-hover) 2px, transparent 2px);
    background-size: 15px 15px;
    z-index: 1;
}

.strengths-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.strength-card {
    position: relative;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 40px 30px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}

.strength-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 203, 5, 0.4);
    box-shadow: var(--shadow-lg);
}

html[data-theme="light"] .strength-card:hover {
    border-color: rgba(19, 38, 117, 0.3);
}

.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 203, 5, 0.06), transparent 40%);
    z-index: 1;
    pointer-events: none;
}

html[data-theme="light"] .card-glow {
    background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(19, 38, 117, 0.05), transparent 40%);
}

.strength-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.strength-card:hover .strength-icon {
    background-color: var(--accent);
    color: #0b0f19;
}

html[data-theme="light"] .strength-icon {
    color: var(--primary);
}

html[data-theme="light"] .strength-card:hover .strength-icon {
    background-color: var(--primary);
    color: #ffffff;
}

.strength-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.strength-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.strength-number {
    position: absolute;
    top: 30px;
    right: 30px;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--border-color-hover);
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cta-card {
    background: linear-gradient(135deg, var(--primary) 0%, #0d1222 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 203, 5, 0.2);
    justify-content: center;
}

.cta-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-card h3 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 15px;
}

.cta-card p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
}

.services-tabs-nav {
    display: none;
    flex-direction: column;
    gap: 15px;
    margin-top: 35px;
}

.services-overview-grid {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.85fr);
    gap: 64px;
}

.services-overview-grid .services-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 720px;
    padding-top: 12px;
}

.services-overview-grid .section-desc {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 16px;
}

.services-section {
    padding-bottom: 120px;
}

.services-summary-card {
    width: min(100%, 390px);
    margin-top: 22px;
    margin-left: 0;
    padding: 42px 44px;
    background: linear-gradient(135deg, #1b5cff 0%, #102760 100%);
    border-radius: var(--border-radius-md);
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 89, 255, 0.2);
}

.services-summary-card p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1rem;
    line-height: 1.68;
    margin-bottom: 28px;
}

.services-summary-card strong {
    color: #ffffff;
    font-weight: 800;
}

.services-summary-card .btn {
    background: #1b5cff;
    border-color: #1b5cff;
    color: #ffffff;
}

/* What We Do - service switcher */
.service-switch-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 26px;
}

.service-switch {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), color var(--transition-fast),
        background-color var(--transition-fast), transform var(--transition-fast);
}

.service-switch i {
    flex-shrink: 0;
    width: 24px;
    font-size: 1.15rem;
    text-align: center;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.service-switch:hover {
    border-color: var(--primary);
    transform: translateX(3px);
}

.service-switch.active {
    background-color: rgba(19, 38, 117, 0.05);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary) inset;
    color: var(--primary);
}

.service-switch.active i {
    color: var(--primary);
}

.service-panel {
    overflow: hidden;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    animation: servicePanelFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.service-panel[hidden] {
    display: none;
}

@keyframes servicePanelFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.service-panel-image img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.service-panel-body {
    padding: 32px 34px 36px;
}

.service-panel-body h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text-primary);
}

.service-panel-tagline {
    margin-top: 8px;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.service-panel-desc {
    margin-top: 18px;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

.service-panel-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.service-panel-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.service-panel-list li i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--success);
    font-size: 1rem;
}

@media (max-width: 992px) {
    .service-panel-image img {
        height: 230px;
    }
}

@media (max-width: 576px) {
    .service-switch {
        padding: 15px 18px;
        font-size: 0.92rem;
    }

    .service-panel-image img {
        height: 190px;
    }

    .service-panel-body {
        padding: 26px 22px 30px;
    }

    .service-panel-body h3 {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-panel {
        animation: none;
    }
}

.services-maintenance-visual {
    position: relative;
    min-height: 620px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    background: #e9eff7;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

.services-maintenance-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}

.services-visual {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding: 0;
}

.services-visual::before {
    display: none;
}

.services-visual::after {
    display: none;
}

.services-visual-image {
    width: 100%;
    height: 100%;
    min-height: 560px;
    padding: 0;
    background-color: #eef3fa;
    background-image: url('assets/img background/Stelsen Company Profile.webp');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    border: 1px solid rgba(15, 89, 255, 0.16);
    border-radius: var(--border-radius-md);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.services-visual-image img {
    display: none;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    transition: all var(--transition-medium);
}

.tab-btn i {
    font-size: 1.4rem;
    transition: color var(--transition-fast);
}

.tab-btn:hover {
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

.tab-btn.active {
    background-color: var(--bg-surface-elevated);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .tab-btn.active {
    border-color: var(--primary);
    color: var(--primary);
}

.tabs-container {
    position: relative;
    background-color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    min-height: 640px;
}

.tab-content {
    display: none;
    opacity: 0;
}

.tab-content.active {
    display: block;
    opacity: 1;
}

.tab-image {
    aspect-ratio: 16 / 9;
    min-height: 245px;
    max-height: 300px;
    overflow: hidden;
    background-color: var(--bg-surface-elevated);
}

.tab-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.tab-details {
    padding: 32px 34px 36px;
}

.tab-details h3 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.2;
    margin-bottom: 8px;
}

.tab-details .established {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    margin-bottom: 16px;
}

html[data-theme="light"] .tab-details .established {
    color: var(--primary);
}

.tab-details p {
    color: var(--text-secondary);
    margin-bottom: 22px;
    font-size: 0.95rem;
    line-height: 1.65;
}

.tab-bullets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.tab-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #ffffff;
}

.tab-bullets li i {
    color: var(--success);
    flex: 0 0 auto;
    margin-top: 3px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
}

.contact-intro {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .icon-circle {
    color: var(--primary);
}

.detail-text h4 {
    font-size: 1.05rem;
    margin-bottom: 5px;
}

.detail-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}


.contact-form-panel {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 50px 40px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

.contact-form h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.contact-form p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 35px;
}

.form-group {
    position: relative;
    margin-bottom: 30px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.contact-form input,
.contact-form textarea {
    /* display:block removes the inline descender gap that would otherwise push the
       textarea's border-bottom off the .form-border overlay */
    display: block;
    width: 100%;
    padding: 14px 0 8px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color-hover);
    color: var(--text-primary);
    /* Without this the browser default applies: monospace for textarea, Arial for input */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    transition: border-color var(--transition-fast);
}

/* Starts at a single line like the inputs above it and grows with the content;
   the height is driven by autoGrow() in app.js. */
.contact-form textarea {
    resize: none;
    overflow-y: hidden;
    max-height: 260px;
}

.contact-form label {
    position: absolute;
    top: 14px;
    left: 0;
    color: var(--text-muted);
    pointer-events: none;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

/* [type="file"] is excluded: file inputs never match :placeholder-shown, so the
   floating-label rules would permanently fire on the attachment dropzone label. */
.contact-form input:not([type="file"]):focus~label,
.contact-form input:not([type="file"]):not(:placeholder-shown)~label,
.contact-form textarea:focus~label,
.contact-form textarea:not(:placeholder-shown)~label {
    top: -12px;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
}

html[data-theme="light"] .contact-form input:not([type="file"]):focus~label,
html[data-theme="light"] .contact-form input:not([type="file"]):not(:placeholder-shown)~label,
html[data-theme="light"] .contact-form textarea:focus~label,
html[data-theme="light"] .contact-form textarea:not(:placeholder-shown)~label {
    color: var(--primary);
}

.form-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width var(--transition-medium);
}

html[data-theme="light"] .form-border {
    background-color: var(--primary);
}

.contact-form input:focus~.form-border,
.contact-form textarea:focus~.form-border {
    width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
}

.form-status {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    display: none;
}

.form-status.success {
    display: block;
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.form-status.error {
    display: block;
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* --- Inquiry modal -------------------------------------------------------
   The persona CTAs open the form here instead of scrolling to the page foot.
   The form node itself is relocated in and out, so it keeps a single set of
   ids and the existing upload/submit handlers stay bound. */
.inquiry-modal {
    position: fixed;
    inset: 0;
    /* Above the fixed header (9999) and the preloader (10000) */
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 24px;
}

.inquiry-modal[hidden] {
    display: none;
}

.inquiry-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(8, 11, 18, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: inquiryFade 0.2s ease both;
}

.inquiry-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 32px 80px rgba(8, 11, 18, 0.4);
    animation: inquiryRise 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes inquiryFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes inquiryRise {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.inquiry-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 28px 18px;
    border-bottom: 1px solid var(--border-color);
}

.inquiry-modal-head h3 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    margin: 0;
    color: var(--text-primary);
}

.inquiry-modal-sub {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.inquiry-modal-close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast);
}

.inquiry-modal-close:hover {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
    color: var(--error);
}

.inquiry-modal-body {
    padding: 26px 28px 30px;
    overflow-y: auto;
}

/* The dialog header already names the form */
.inquiry-modal-body .contact-form h3 {
    display: none;
}

body.inquiry-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .inquiry-modal {
        padding: 16px;
    }

    .inquiry-modal-dialog {
        max-width: none;
        width: 100%;
        max-height: calc(100vh - 32px);
    }

    .inquiry-modal-head {
        padding: 20px 20px 14px;
    }

    .inquiry-modal-body {
        padding: 20px 20px 32px;
    }
}

/* --- Phone number with country calling code ------------------------------ */
.phone-group {
    margin-bottom: 30px;
}

.phone-field {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.country-trigger {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 8px 0 6px;
    border: 1px solid var(--border-color-hover);
    border-radius: var(--border-radius-sm);
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.country-trigger:hover,
.country-trigger[aria-expanded="true"] {
    border-color: var(--primary);
    background-color: rgba(19, 38, 117, 0.05);
    color: var(--primary);
}

.country-trigger .fa-caret-up {
    transition: transform var(--transition-fast);
}

.country-trigger[aria-expanded="false"] .fa-caret-up {
    transform: rotate(180deg);
}

/* Emoji flags render as the ISO letters on Windows, so the slot is styled as a
   badge to keep that fallback looking deliberate rather than broken. */
.country-flag {
    display: block;
    width: 26px;
    height: 20px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

#country-flag img {
    display: block;
    width: 26px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
}

.phone-dial {
    flex-shrink: 0;
    padding-bottom: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    white-space: nowrap;
}

/* The input gets its own positioning context so the floating label and the
   underline line up with the input rather than the whole row (which also holds
   the country trigger and the dial code). */
.phone-input-wrap {
    position: relative;
    display: block;
    flex: 1;
    min-width: 0;
}

.contact-form .phone-input-wrap input[type="tel"] {
    width: 100%;
}

.country-panel {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    margin-top: 6px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.country-panel[hidden] {
    display: none;
}

.country-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.country-search-wrap i {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.contact-form input.country-search {
    width: 100%;
    padding: 4px 0;
    border: none;
    border-bottom: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.country-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 264px;
    overflow-y: auto;
}

.country-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--text-primary);
    font-size: 0.88rem;
    cursor: pointer;
}

.country-list li:hover,
.country-list li.is-active {
    background-color: rgba(19, 38, 117, 0.08);
}

.country-list li[aria-selected="true"] {
    background-color: var(--primary);
    color: #fff;
    font-weight: 600;
}

.country-list li[aria-selected="true"] .country-flag {
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.country-list li .country-dial {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.country-list li[aria-selected="true"] .country-dial {
    color: rgba(255, 255, 255, 0.85);
}

.country-list .country-empty {
    padding: 16px 14px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: default;
}

.country-list .country-empty:hover {
    background-color: transparent;
}

/* Inquiry context banner (set from the ?inquiry= query parameter) */
.contact-form-context {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px !important;
    padding: 12px 14px;
    border-radius: var(--border-radius-sm);
    background-color: rgba(19, 38, 117, 0.06);
    border-left: 3px solid var(--primary);
    color: var(--text-primary) !important;
    font-size: 0.88rem !important;
}

.contact-form-context[hidden] {
    display: none;
}

.contact-form-context i {
    color: var(--primary);
}

/* Project photo / document attachments */
.file-group {
    margin-bottom: 26px;
}

.file-group-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.file-group-label em {
    font-style: normal;
    font-weight: 400;
    color: var(--text-secondary);
}

.contact-form .file-group-help {
    margin-bottom: 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Keep the native input reachable by keyboard while the dropzone acts as the visual control */
.contact-form input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: none;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Scoped to .contact-form so it outranks `.contact-form label`, which is
   absolutely positioned and pointer-events: none for the floating-label inputs. */
.contact-form .file-dropzone {
    position: static;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px 20px;
    border: 1.5px dashed var(--border-color-hover);
    border-radius: var(--border-radius-sm);
    background-color: rgba(148, 163, 184, 0.05);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.contact-form .file-dropzone i {
    font-size: 1.35rem;
    color: var(--primary);
    margin-bottom: 2px;
}

.file-dropzone-main {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
}

.file-dropzone-hint {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.contact-form .file-dropzone:hover,
.contact-form input[type="file"]:focus-visible+.file-dropzone {
    border-color: var(--primary);
    background-color: rgba(19, 38, 117, 0.05);
}

.contact-form .file-dropzone.is-dragover {
    border-color: var(--primary);
    border-style: solid;
    background-color: rgba(19, 38, 117, 0.09);
}

.file-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-list:empty {
    display: none;
}

.file-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-surface);
    font-size: 0.84rem;
}

.file-list li.is-invalid {
    border-color: rgba(239, 68, 68, 0.4);
    background-color: rgba(239, 68, 68, 0.06);
}

.file-list li>i {
    color: var(--primary);
    flex-shrink: 0;
}

.file-list li.is-invalid>i {
    color: var(--error);
}

.file-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.file-item-size {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.file-list li.is-invalid .file-item-size {
    color: var(--error);
}

.file-item-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.file-item-remove:hover {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--error);
}

.footer-section {
    background-color: #080b12;
    color: #94a3b8;
    border-top: 1px solid var(--border-color);
    padding-top: 80px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-brand .logo {
    margin-bottom: 20px;
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all var(--transition-fast);
}

.social-links a:hover {
    background-color: var(--accent);
    color: #0b0f19;
    border-color: var(--accent);
    transform: translateY(-3px);
}

html[data-theme="light"] .social-links a:hover {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.footer-links h4,
.footer-contact h4 {
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: 0.9rem;
    color: #94a3b8;
}

.footer-links a:hover {
    color: var(--accent);
    padding-left: 5px;
}

html[data-theme="light"] .footer-links a:hover {
    color: var(--primary);
}

.footer-contact p {
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.footer-contact p i {
    color: var(--accent);
    margin-top: 3px;
}

html[data-theme="light"] .footer-contact p i {
    color: var(--primary);
}

.footer-bottom {
    padding: 30px 0;
    font-size: 0.85rem;
}

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-policies {
    display: flex;
    gap: 20px;
}

.footer-policies a:hover {
    color: #ffffff;
}

.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

@media (max-width: 1024px) {

    .section-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .services-overview-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .services-visual,
    .services-visual-image,
    .services-maintenance-visual {
        min-height: 420px;
    }

    .services-visual-image img {
        height: 420px;
    }

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

    /* Matches the floor of the fluid size above, so crossing 1024px is not a
       step back up in type size. */
    .hero-title {
        font-size: 3rem;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .image-collage {
        height: 450px;
    }

    .tabs-container {
        min-height: auto;
    }

    .tab-image {
        min-height: 230px;
    }
}

/* Everything from here to the end of this block is the mobile drawer. It has to
   switch on at the same width as the .menu-toggle above, otherwise the bar is
   left in its desktop row with no way to reach the hidden links. */
@media (max-width: 1100px) {
    :root {
        /* Drives .header, the drawer offset, and every scroll-margin-top at once */
        --header-height: 70px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: var(--bg-surface);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        padding: 50px;
        clip-path: circle(0px at 90% -10%);
        transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 999;
    }

    .nav-menu.active {
        clip-path: circle(120% at 50% 50%);
    }

    .nav-list {
        flex-direction: column;
        gap: 24px;
        align-items: center;
        width: 100%;
    }

    .nav-list > li {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav-link {
        font-size: 1.1rem;
        outline: none;
    }

    .nav-link:focus {
        outline: none;
    }

    .dropdown-menu {
        position: static !important;
        transform: none !important;
        left: auto !important;
        width: 100% !important;
        max-width: 240px;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.03);
        border: none;
        border-radius: var(--border-radius-sm);
        padding: 0;
        margin: 0 auto;
        transition: max-height var(--transition-medium), opacity var(--transition-medium), margin var(--transition-medium);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .dropdown-menu::before {
        display: none;
    }

    .dropdown-menu > li {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .dropdown-item {
        font-size: 0.95rem;
        padding: 12px 20px;
        width: 100%;
        justify-content: center;
        text-align: center;
        border-left: none !important;
        outline: none;
    }

    .dropdown-item:focus {
        outline: none;
    }

    .dropdown-item:hover {
        padding-left: 20px !important;
        background-color: rgba(255, 255, 255, 0.05);
        color: var(--accent);
        border-left: none !important;
    }

    html[data-theme="light"] .dropdown-item:hover {
        color: var(--primary);
        background-color: rgba(0, 0, 0, 0.03);
        border-left: none !important;
    }

    .nav-item.dropdown.active .dropdown-menu {
        max-height: 500px;
        opacity: 1;
        visibility: visible;
        margin-top: 10px;
        padding: 10px 0;
    }

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

    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

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

    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .contact-info-panel {
        text-align: center;
    }

    .services-left,
    .about-content {
        text-align: center;
    }

    .services-left .section-desc,
    .about-content .section-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .services-left .sub-heading,
    .about-content .sub-heading {
        padding-right: 30px;
    }

    .services-left .sub-heading::after,
    .about-content .sub-heading::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 2px;
        background-color: var(--accent);
    }

    html[data-theme="light"] .services-left .sub-heading::after,
    html[data-theme="light"] .about-content .sub-heading::after {
        background-color: var(--primary);
    }

    .contact-detail-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-info-bar {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .info-item {
        padding: 10px 0;
        border-right: none !important;
    }

    .info-item:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }

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

    .strength-card {
        padding: 22px 16px;
    }

    .strength-icon {
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
        margin-bottom: 14px;
    }

    .strength-card h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .strength-card p {
        font-size: 0.82rem;
    }

    .strength-number {
        top: 16px;
        right: 16px;
        font-size: 1.6rem;
    }

    .services-overview-grid .services-left {
        padding-top: 0;
    }

    .services-section {
        padding-bottom: 110px;
    }

    .services-summary-card {
        margin-left: 0;
        padding: 32px 26px;
    }

    .services-visual,
    .services-visual-image,
    .services-maintenance-visual {
        min-height: 310px;
    }

    .services-visual-image img {
        height: 310px;
    }

    .tab-image {
        min-height: 205px;
        max-height: 245px;
    }

    .tab-details {
        padding: 26px 24px 30px;
    }

    .tab-details p {
        margin-bottom: 18px;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

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

    .collage-item {
        border-radius: var(--border-radius-sm);
    }

    .badge-floating {
        padding: 12px 18px;
    }

    .badge-floating .number {
        font-size: 1.6rem;
    }
}

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

    .section-title {
        font-size: 2rem;
    }

    .image-collage {
        height: 320px;
    }

    .contact-form-panel {
        padding: 30px 20px;
    }

    .tab-image {
        min-height: 180px;
    }

    .tab-details {
        padding: 24px 20px 28px;
    }

    .tab-details .established {
        font-size: 0.78rem;
        letter-spacing: 0.7px;
    }

    .subpage-content-section {
        padding: 38px 0 52px;
    }

    .service-page-heading {
        margin-bottom: 24px;
    }

    .subpage-card {
        padding: 30px 22px;
    }

    .service-page-image {
        height: 190px;
        margin: -30px -22px 24px;
    }

    .subpage-list-item {
        gap: 12px;
        margin-bottom: 18px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

@media (max-width: 600px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 28px;
    }

    .client-card {
        height: 90px;
        padding: 14px 10px;
    }

    .client-logo-img {
        max-height: 48px;
    }
}

.client-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-md);
    padding: 30px 20px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

html[data-theme="light"] .client-card {
    background-color: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
}

.client-card:hover {
    transform: translateY(-6px);
    border-color: rgba(15, 89, 255, 0.4);
    box-shadow: 0 12px 30px rgba(15, 89, 255, 0.12);
}

html[data-theme="light"] .client-card:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 30px rgba(15, 89, 255, 0.08);
}

.client-logo-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.client-logo-img {
    max-width: 88%;
    max-height: 75px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-card:hover .client-logo-img {
    transform: scale(1.04);
}

.client-logo-img::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--bg-surface);
    z-index: 1;
}

.client-logo-img::after {
    content: attr(alt);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    z-index: 2;
    border-radius: var(--border-radius-md);
    line-height: 1.3;
}

.client-card.metric-card {
    background: linear-gradient(135deg, var(--primary) 0%, #102a6b 100%);
    border: 1px solid rgba(15, 89, 255, 0.3);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 4px 20px rgba(15, 89, 255, 0.1);
}

html[data-theme="light"] .client-card.metric-card {
    background: linear-gradient(135deg, var(--primary) 0%, #1e3a8a 100%);
    border: 1px solid var(--primary);
}

.client-card.metric-card:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 30px rgba(255, 203, 5, 0.15);
}

.metric-content .metric-num {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 5px;
}

.metric-content .metric-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.85);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.project-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-lg);
}

.project-image-wrapper {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.project-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-medium);
}

.project-card:hover .project-image-wrapper img {
    transform: scale(1.08);
}

.project-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--glass-bg);
    color: var(--text-primary);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.project-info {
    padding: 24px;
}

.project-info h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.project-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.project-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    background-color: rgba(255, 203, 5, 0.1);
    padding: 4px 10px;
    border-radius: var(--border-radius-full);
}

.project-status.completed {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}

.project-status.available {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}

/* Scoped to the main portfolio grid only — .special-projects-grid carries the
   same .projects-grid class but is a single-column flex stack, so applying
   these to it too shrank its image band without shrinking the white info
   panel to match, leaving the white area looking oversized underneath. */
@media (max-width: 600px) {
    .projects-grid:not(.special-projects-grid) {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 28px;
    }

    .projects-grid:not(.special-projects-grid) .project-image-wrapper {
        height: 110px;
    }

    .projects-grid:not(.special-projects-grid) .project-badge {
        top: 8px;
        left: 8px;
        padding: 3px 8px;
        font-size: 0.62rem;
    }

    .projects-grid:not(.special-projects-grid) .project-info {
        padding: 12px;
    }

    .projects-grid:not(.special-projects-grid) .project-info h3 {
        font-size: 0.85rem;
        margin-bottom: 2px;
    }

    .projects-grid:not(.special-projects-grid) .project-subtitle {
        font-size: 0.7rem;
        margin-bottom: 8px;
    }

    .projects-grid:not(.special-projects-grid) .project-status {
        font-size: 0.62rem;
        padding: 3px 7px;
    }
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

@media (max-width: 600px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 28px;
    }

    .brand-badge-card {
        height: 70px;
        padding: 10px;
    }

    .brand-logo-img {
        max-height: 38px;
    }

    .brand-card-text {
        font-size: 0.7rem;
    }
}

.brand-solution-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.brand-badge-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    transition: all var(--transition-fast);
}

.brand-badge-card:hover {
    border-color: var(--text-muted);
    background-color: var(--bg-surface-elevated);
    transform: scale(1.05);
}

.brand-logo-img {
    max-width: 90%;
    max-height: 50px;
    object-fit: contain;
    transition: all var(--transition-normal, 0.3s) ease;
}

.brand-logo-img.brand-logo-large {
    max-height: 70px;
    max-width: 95%;
}

.brand-card-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    display: block;
}

.brand-badge-card:hover .brand-logo-img {
    transform: scale(1.05);
}

html[data-theme="light"] .brand-badge-card:hover .brand-logo-img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}

html[data-theme="dark"] .brand-badge-card:hover .brand-logo-img {
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.15));
}

.mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
    align-items: start;
    
}

.mvv-card {
    position: relative;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 40px 30px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
}

.mvv-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 203, 5, 0.4);
    box-shadow: var(--shadow-lg);
}

html[data-theme="light"] .mvv-card:hover {
    border-color: rgba(19, 38, 117, 0.3);
}

.mvv-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mvv-card:hover .mvv-icon-wrapper {
    background-color: var(--accent);
    color: #0b0f19;
}

html[data-theme="light"] .mvv-icon-wrapper {
    color: var(--primary);
}

html[data-theme="light"] .mvv-card:hover .mvv-icon-wrapper {
    background-color: var(--primary);
    color: #ffffff;
}

.mvv-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.mvv-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.mvv-values-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.mvv-values-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.mvv-values-list li i {
    color: var(--card-color, var(--accent));
    margin-top: 4px;
    font-size: 0.95rem;
}

.mvv-values-list li strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.mvv-values-list li span {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

#mission {
    --card-color: #0ea5e9;
    
}

#vision {
    --card-color: var(--primary);
    
}

#core-values {
    --card-color: #10b981;
    
}

html[data-theme="light"] #mission {
    --card-color: #0284c7;
}

html[data-theme="light"] #vision {
    --card-color: #0f59ff;
}

html[data-theme="light"] #core-values {
    --card-color: #059669;
    
}

.mvv-section .mvv-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 20px 24px;
    min-height: 110px;
    
    transition: transform var(--transition-medium),
        border-color var(--transition-medium),
        box-shadow var(--transition-medium);
}

.mvv-section .mvv-card::after {
    content: '\f078';
    
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 49px;
    
    right: 24px;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: transform var(--transition-medium), color var(--transition-medium);
}

.mvv-section .mvv-card:hover::after {
    transform: rotate(180deg);
    color: var(--card-color);
}

.mvv-section .mvv-card .mvv-icon-wrapper {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--card-color);
    border-bottom-color: var(--card-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-medium), border-color var(--transition-medium);
}

html[data-theme="light"] .mvv-section .mvv-card .mvv-icon-wrapper {
    border: 2px solid rgba(15, 23, 42, 0.06);
    border-top-color: var(--card-color);
    border-bottom-color: var(--card-color);
}

.mvv-section .mvv-card .mvv-icon-wrapper::before {
    content: '';
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--card-color);
    opacity: 0.12;
    transition: opacity var(--transition-medium), transform var(--transition-medium);
    z-index: 1;
}

.mvv-section .mvv-card .mvv-icon-wrapper i {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--card-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08),
        inset 0 2px 4px rgba(255, 255, 255, 0.9);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.mvv-section .mvv-card:hover .mvv-icon-wrapper {
    background-color: transparent;
    color: inherit;
    transform: rotate(45deg);
    
}

.mvv-section .mvv-card:hover .mvv-icon-wrapper::before {
    opacity: 0.2;
    transform: scale(1.08);
}

.mvv-section .mvv-card:hover .mvv-icon-wrapper i {
    transform: scale(1.05) rotate(-45deg);
    
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15),
        inset 0 -2px 4px rgba(0, 0, 0, 0.08),
        inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

.mvv-section .mvv-card h3 {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    
    padding-right: 24px;
    
    align-self: center;
    color: var(--card-color);
    font-weight: 700;
}

.mvv-section .mvv-card p,
.mvv-section .mvv-card .mvv-values-list {
    grid-column: 1 / span 2;
    grid-row: 2;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transform: translateY(10px);
    transition: max-height var(--transition-medium) ease,
        opacity var(--transition-medium) ease,
        transform var(--transition-medium) ease,
        margin-top var(--transition-medium) ease;
}

.mvv-section .mvv-card:hover p {
    max-height: 150px;
    
    opacity: 1;
    margin-top: 16px;
    transform: translateY(0);
}

.mvv-section .mvv-card:hover .mvv-values-list {
    max-height: 550px;
    
    opacity: 1;
    margin-top: 16px;
    transform: translateY(0);
}

@media (max-width: 1024px) {
    .mvv-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.subpage-hero {
    position: relative;
    padding: 160px 0 100px 0;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('assets/img background/Stelsen Company Profile 2026 (4).pdf_43.png');
    background-size: cover;
    background-position: center 80%;
    background-repeat: no-repeat;
    color: #0f172a;
    
    text-align: center;
    overflow: hidden;
}

.subpage-hero .subpage-subtitle {
    color: #334155;
    
    font-weight: 500;
}

html[data-theme="light"] .subpage-hero {
    background-image: url('assets/img background/Stelsen\ Company\ Profile\ 2.png');
    background-size: cover;
    background-position: center 80%;
    background-repeat: no-repeat;
    color: #0f172a;
}

@media (max-width: 768px) {

    .subpage-hero,
    html[data-theme="light"] .subpage-hero {
        min-height: 200px;
        padding: 100px 0 30px 0;
        background-position: center 70%;
    }

    .subpage-content-section {
        padding: 46px 0 60px;
    }

    .service-page-heading {
        margin-bottom: 28px;
    }

    .subpage-grid > .reveal-item:first-child .section-title {
        font-size: 1.95rem;
    }

    .subpage-card {
        padding: 34px 28px;
    }

    .service-page-image {
        height: 230px;
        margin: -34px -28px 26px;
    }
}

.subpage-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -1.5px;
}

.subpage-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
    margin: 0 auto;
    font-weight: 500;
}

html[data-theme="light"] .subpage-subtitle {
    color: var(--text-secondary);
}

.subpage-content-section {
    padding: 62px 0 78px;
    background-color: var(--bg-surface);
}

.subpage-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
    gap: 76px;
    align-items: start;
}

.service-page-heading {
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 34px;
    text-align: left;
}

.service-page-heading .section-title {
    font-size: clamp(2rem, 2.7vw, 2.75rem);
    max-width: 620px;
    margin-bottom: 8px;
    line-height: 1.15;
}

.service-page-heading .section-desc {
    max-width: 620px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.subpage-grid > .reveal-item:first-child {
    max-width: 560px;
    padding-top: 16px;
}

.subpage-grid > .reveal-item:first-child .sub-heading {
    margin-bottom: 18px;
}

.subpage-grid > .reveal-item:first-child .section-title {
    font-size: clamp(1.85rem, 2.35vw, 2.35rem);
    line-height: 1.16;
    margin-bottom: 18px;
}

.subpage-grid > .reveal-item:first-child p {
    max-width: 520px;
}

.hero-verticals span:not(:last-child)::after {
    display: none;
}

@media (max-width: 992px) {
    .subpage-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .subpage-grid > .reveal-item:first-child {
        max-width: 680px;
        padding-top: 0;
    }
}

.subpage-card {
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 45px 40px;
    width: min(100%, 640px);
    justify-self: end;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.subpage-card:has(.service-page-image) {
    margin-top: -154px;
}

@media (max-width: 992px) {
    .subpage-card:has(.service-page-image) {
        margin-top: 0;
    }

    .subpage-card {
        width: 100%;
        justify-self: stretch;
    }
}

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

.service-page-image {
    height: 285px;
    margin: -45px -40px 30px;
    overflow: hidden;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.service-page-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

.subpage-card h3 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.subpage-card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--accent);
}

html[data-theme="light"] .subpage-card h3::after {
    background-color: var(--primary);
}

.subpage-list-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.subpage-list-item:last-child {
    margin-bottom: 0;
}

.subpage-list-item i {
    color: var(--accent);
    font-size: 1.25rem;
    margin-top: 4px;
}

html[data-theme="light"] .subpage-list-item i {
    color: var(--primary);
}

.subpage-list-item.service-icon-item i,
html[data-theme="light"] .subpage-list-item.service-icon-item i {
    color: var(--primary);
    width: 24px;
    text-align: center;
}

.audience-hero {
    min-height: 305px;
    padding-bottom: 0;
}

.audience-section {
    padding: 56px 0 90px;
    background-color: var(--bg-surface);
}

.audience-heading {
    max-width: 860px;
    margin-bottom: 52px;
}

.audience-heading .section-title {
    margin-bottom: 12px;
}

.audience-heading .section-desc {
    max-width: 820px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.audience-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.audience-selector {
    position: sticky;
    top: 110px;
    display: grid;
    gap: 14px;
    z-index: 5;
}

.audience-tab {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
    text-align: left;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium), background-color var(--transition-medium), color var(--transition-medium);
}

.audience-tab i {
    width: 22px;
    color: var(--primary);
    font-size: 1.1rem;
    text-align: center;
}

.audience-tab:hover {
    transform: translateX(4px);
    border-color: rgba(15, 89, 255, 0.25);
    box-shadow: var(--shadow-md);
}

.audience-tab.active {
    background: linear-gradient(135deg, #1b5cff 0%, #102760 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 89, 255, 0.18);
}

.audience-tab.active i {
    color: #ffffff;
}

.audience-carousel {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    z-index: 1;
}

.audience-panel {
    display: none;
    padding: 46px;
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateX(36px);
}

.audience-panel.active {
    display: block;
    animation: audienceSlideIn 0.42s ease forwards;
}

.audience-panel h2 {
    max-width: 720px;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.12;
    margin-bottom: 18px;
}

.audience-panel p {
    max-width: 740px;
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.75;
    margin-bottom: 30px;
}

.audience-panel h3 {
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.audience-panel ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin-bottom: 32px;
}

.audience-panel li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 800;
    line-height: 1.4;
}

.audience-panel li::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--primary);
    margin-top: 1px;
}

.audience-panel li.has-service-icon::before {
    content: none;
}

.audience-panel li.has-service-icon i {
    width: 18px;
    color: var(--primary);
    font-size: 1rem;
    margin-top: 2px;
    text-align: center;
}

@keyframes audienceSlideIn {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 992px) {
    .audience-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .audience-selector {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audience-carousel {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .audience-section {
        padding: 40px 0 64px;
    }

    .audience-heading {
        margin-bottom: 34px;
    }

    .audience-selector {
        grid-template-columns: 1fr;
    }

    .audience-panel {
        padding: 32px 24px;
    }

    .audience-panel ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .subpage-content-section {
        padding: 46px 0 60px;
    }

    .service-page-heading {
        margin-bottom: 28px;
    }

    .subpage-grid > .reveal-item:first-child .section-title {
        font-size: clamp(1.9rem, 7vw, 2.55rem);
    }

    .subpage-card {
        padding: 34px 28px;
    }

    .service-page-image {
        height: 230px;
        margin: -34px -28px 26px;
    }
}

@media (max-width: 480px) {
    .subpage-content-section {
        padding: 38px 0 52px;
    }

    .service-page-heading {
        margin-bottom: 24px;
    }

    .subpage-card {
        padding: 30px 22px;
    }

    .service-page-image {
        height: 190px;
        margin: -30px -22px 24px;
    }

    .subpage-list-item {
        gap: 12px;
        margin-bottom: 18px;
    }
}

/* Knowledge Hub hero carries no copy, so it only needs to read as a band */
.knowledge-hero,
html[data-theme="light"] .knowledge-hero {
    min-height: 300px;
    padding: 120px 0 0;
}

@media (max-width: 768px) {

    .knowledge-hero,
    html[data-theme="light"] .knowledge-hero {
        min-height: 170px;
        padding: 90px 0 0;
    }
}

/* ==========================================================================
   KNOWLEDGE HUB - header, filter pills, and article grid
   ========================================================================== */
.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

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

.breadcrumb a:hover {
    text-decoration: underline;
}

.hub-header-section {
    background-color: var(--bg-surface-elevated);
    border-bottom: 1px solid var(--border-color);
    padding: 140px 0 50px;
}

.hub-header-content {
    max-width: 900px;
    margin: 0 auto;
}

/* The pill row needs more room than the copy above it */
.hub-header-content .hub-filter-bar {
    width: fit-content;
    max-width: min(1180px, calc(100vw - 48px));
    margin-inline: auto;
}

.hub-main-title {
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--text-primary);
}

.text-primary-gradient {
    color: var(--primary);
    background: linear-gradient(135deg, hsl(var(--primary-hue), var(--primary-sat), var(--primary-light)) 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hub-main-subtitle {
    margin-bottom: 32px;
    color: var(--text-secondary);
    font-size: 1.08rem;
    line-height: 1.6;
}

/* All pills stay on one row; narrow screens scroll them sideways instead.
   justify-content: center would clip the ends once the row overflows, so the
   bar is centred by shrinking to its content instead. */
.hub-filter-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: none;
}

.hub-filter-bar::-webkit-scrollbar {
    display: none;
}

.hub-filter-pill {
    flex: 0 0 auto;
    padding: 8px 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
}

@media (max-width: 768px) {
    .hub-filter-bar {
        scroll-snap-type: x proximity;
        /* Real padding (not negative margins) so the first/last pills have
           room to scroll into the center — without it, tapping a pill near
           either end just clamps to 0/max scroll and never visually centers. */
        padding-left: 38%;
        padding-right: 38%;
    }

    .hub-filter-pill {
        scroll-snap-align: center;
    }
}

.hub-filter-pill:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.hub-filter-pill.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(19, 38, 117, 0.25);
}

.hub-grid-section {
    background-color: var(--bg-base);
    padding: 55px 0 90px;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
}

.resource-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium),
        border-color var(--transition-medium), opacity var(--transition-medium);
}

.resource-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.resource-card[hidden] {
    display: none;
}

.resource-card-image-box {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #0f172a;
}

.resource-card-image-box img.brand-product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-medium);
}

/* Product cut-outs sit inside the tile instead of being cropped by it */
.resource-card-image-box img.is-contain {
    object-fit: contain;
    padding: 22px;
    background-color: #f8fafc;
}

/* Infographics need the whole frame, so they get no inner padding */
/* 3:2 infographic against a 200px tile: cover from the top keeps the title
   and both column headings readable instead of letterboxing the whole graphic */
.resource-card-image-box img.is-infographic {
    object-fit: cover;
    object-position: center top;
    padding: 0;
    background-color: #f8fafc;
}

.resource-card:hover .resource-card-image-box img.brand-product-img {
    transform: scale(1.05);
}

.resource-card-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 14px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.7) 100%);
    pointer-events: none;
}

.resource-tag {
    padding: 4px 11px;
    border-radius: var(--border-radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.tag-firecode {
    background: rgba(220, 38, 38, 0.9);
    color: #ffffff;
}

.tag-fdas {
    background: rgba(234, 88, 12, 0.9);
    color: #ffffff;
}

.tag-suppression {
    background: rgba(2, 132, 199, 0.9);
    color: #ffffff;
}

.tag-compare {
    background: rgba(124, 58, 237, 0.9);
    color: #ffffff;
}

.tag-warning {
    background: rgba(217, 119, 6, 0.9);
    color: #ffffff;
}

.tag-cabling {
    background: rgba(13, 148, 136, 0.9);
    color: #ffffff;
}

.tag-turnover {
    background: rgba(37, 99, 235, 0.9);
    color: #ffffff;
}

.tag-inspection {
    background: rgba(225, 29, 72, 0.9);
    color: #ffffff;
}

.tag-downloads {
    background: rgba(51, 65, 85, 0.9);
    color: #ffffff;
}

.resource-readtime {
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.resource-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 22px;
}

.resource-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.4;
}

.resource-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 18px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.resource-card-footer {
    margin-top: auto;
}

.hub-empty-state {
    margin: 40px 0 0;
    padding: 34px 20px;
    background-color: var(--bg-surface);
    border: 1px dashed var(--border-color-hover);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-size: 0.98rem;
    text-align: center;
}

.hub-empty-state[hidden] {
    display: none;
}

.card-link-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

.card-link-action:hover {
    color: var(--primary-light-hover);
}

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

@media (max-width: 768px) {
    .hub-header-section {
        padding: 110px 0 40px;
    }

    .resources-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hub-filter-pill {
        padding: 7px 14px;
        font-size: 0.78rem;
    }
}

/* Tighten the pills before the row has to scroll */
@media (max-width: 1100px) {
    .hub-filter-pill {
        padding: 7px 13px;
        font-size: 0.79rem;
    }

    .hub-filter-bar {
        gap: 6px;
    }
}


/* ==========================================================================
   TECHNICAL ADVISORY ARTICLE PAGE
   ========================================================================== */
.single-article-wrapper {
    padding: 150px 0 80px;
    background-color: var(--bg-surface);
}

.article-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 26px;
}

.btn-back-resources {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.btn-back-resources:hover {
    transform: translateX(-4px);
    text-decoration: underline;
}

.single-article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 45px;
    align-items: start;
}

.single-article-header {
    margin-bottom: 35px;
}

.article-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 18px;
}

.article-category-badge {
    padding: 6px 14px;
    background-color: rgba(19, 38, 117, 0.1);
    border: 1px solid rgba(19, 38, 117, 0.25);
    border-radius: var(--border-radius-full);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.article-read-time,
.article-pub-date {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.single-article-title {
    margin-bottom: 20px;
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.8px;
    color: var(--text-primary);
}

.article-author-byline {
    margin-bottom: 25px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.article-author-byline i {
    margin-right: 6px;
    color: var(--primary);
}

.single-article-image-container {
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
    background-color: #0f172a;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Icon plate: for topics without dedicated photography yet. A large mark on a
   tinted field, not a stand-in for a photo — it reads as a category marker, the
   same job the FA icon does in .res-doc-icon, just at article-header scale. */
.single-article-image-container.is-icon-plate,
.resource-card-image-box.is-icon-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1a2f52 100%);
}

.single-article-image-container.is-icon-plate {
    min-height: 240px;
}

.is-icon-plate i {
    font-size: 3.5rem;
    color: #ffcb05;
    opacity: 0.92;
}

.resource-card-image-box.is-icon-plate i {
    font-size: 2.75rem;
}

.single-article-featured-img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

/* Product cut-outs show whole, on a light plate */
.single-article-featured-img.is-contain {
    height: 360px;
    max-height: none;
    padding: 28px;
    background-color: #f8fafc;
    object-fit: contain;
}

/* Infographics keep their own aspect ratio and fill the frame edge to edge */
.single-article-featured-img.is-fill {
    height: auto;
    max-height: none;
    object-fit: fill;
}

.image-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background-color: var(--bg-surface-elevated);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.article-body-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-primary);
}

/* Comparison table inside an advisory */
.article-table-scroll {
    overflow-x: auto;
    margin: 28px 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

.article-compare-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.article-compare-table caption {
    padding: 14px 18px;
    background-color: var(--bg-surface-elevated);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: left;
}

.article-compare-table th,
.article-compare-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

.article-compare-table thead th {
    background-color: var(--primary);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    border-bottom: none;
}

.article-compare-table tbody th {
    width: 27%;
    color: var(--text-primary);
    font-weight: 700;
}

.article-compare-table tbody td {
    color: var(--text-secondary);
}

.article-compare-table tbody tr:last-child th,
.article-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.article-compare-table tbody tr:nth-child(even) th,
.article-compare-table tbody tr:nth-child(even) td {
    background-color: var(--bg-surface-elevated);
}

/* Verification notice inside an advisory */
.article-callout {
    margin: 26px 0;
    padding: 18px 22px;
    background-color: rgba(19, 38, 117, 0.06);
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius-md);
}

.article-callout p {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.65;
}

.article-callout i {
    margin-right: 8px;
    color: var(--primary);
}

.article-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

/* Sidebar widgets */
.sidebar-widget {
    margin-bottom: 30px;
    padding: 25px;
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.consultation-widget {
    text-align: center;
    background: linear-gradient(180deg, var(--bg-surface-elevated) 0%, rgba(19, 38, 117, 0.05) 100%);
    border-color: rgba(19, 38, 117, 0.3);
}

.widget-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    background-color: var(--primary);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.4rem;
}

.consultation-widget h3 {
    margin-bottom: 10px;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.consultation-widget p {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.sidebar-widget h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.sidebar-links-list li {
    margin-bottom: 12px;
}

.sidebar-links-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.sidebar-links-list a:hover {
    color: var(--primary);
}

.sidebar-links-list a i {
    color: var(--primary);
}

.related-article-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.related-link-item {
    display: block;
    padding: 12px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.related-link-item:hover {
    border-color: var(--primary);
    transform: translateX(3px);
}

.related-link-item.active {
    background-color: var(--primary);
    border-color: var(--primary);
}

.related-link-item .tag {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.related-link-item h5 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

.related-link-item.active .tag,
.related-link-item.active h5 {
    color: #ffffff;
}

@media (max-width: 992px) {
    .single-article-wrapper {
        padding: 120px 0 60px;
    }

    .single-article-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

.resource-detail-article {
    display: none;
    scroll-margin-top: 110px;
}

.resource-detail-article.active {
    display: block;
    animation: resourceArticleIn 0.35s ease forwards;
}

/* Same switcher, applied to the sidebar reference list: each article gets the
   regulatory bodies it actually cites, instead of one static list shown behind
   all three regardless of which is open. data-ref-topic (not data-resource-article)
   so this doesn't get caught by the article selector in app.js. */
.references-widget[data-ref-topic] {
    display: none;
}

.references-widget[data-ref-topic].active {
    display: block;
}

@keyframes resourceArticleIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.resource-article-title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3vw, 2.65rem);
    font-weight: 800;
    line-height: 1.14;
    margin-bottom: 18px;
}

.resource-detail-article h3 {
    margin: 26px 0 10px;
    color: var(--text-primary);
    font-size: 1.22rem;
    line-height: 1.35;
}

.resource-detail-article p {
    max-width: 780px;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 24px;
}

.resource-detail-article ul {
    display: grid;
    gap: 12px;
}

.resource-detail-article li {
    display: flex;
    gap: 12px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.55;
}

.resource-detail-article li::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--primary);
    margin-top: 1px;
}

@media (max-width: 640px) {
    .single-article-featured-img {
        max-height: 240px;
    }

    .single-article-featured-img.is-contain {
        height: 240px;
        padding: 18px;
    }

    .single-article-featured-img.is-fill {
        height: auto;
    }

    .article-footer-nav .btn {
        width: 100%;
    }
}

.subpage-list-item-text h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.subpage-list-item-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.values-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .values-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .values-detail-grid .value-detail-card {
        grid-column: span 1 !important;
    }
}

.value-detail-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-medium);
}

.value-detail-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

html[data-theme="light"] .value-detail-card:hover {
    border-color: var(--primary);
}

.value-detail-icon {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 15px;
}

html[data-theme="light"] .value-detail-icon {
    color: var(--primary);
}

.value-detail-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.value-detail-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.image-placeholder-wrapper {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}

.image-placeholder-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: var(--transition-medium);
}

.image-placeholder-wrapper:hover img {
    transform: scale(1.05);
    opacity: 1;
}

.image-placeholder-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius-sm);
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html[data-theme="light"] .image-placeholder-overlay {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text-primary);
}

.image-placeholder-overlay h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.image-placeholder-overlay p {
    font-size: 0.8rem;
    opacity: 0.8;
}

.card-image-wrapper {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    background: var(--bg-surface-elevated);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    margin-bottom: 20px;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    position: relative;
    z-index: 1;
}

.card-image-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-elevated) 100%);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    gap: 8px;
    padding: 20px;
    text-align: center;
}

.card-image-fallback i {
    font-size: 1.8rem;
    color: var(--primary);
}

.mv-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.mv-logo-image {
    max-height: 80px;
    object-fit: contain;
    transition: var(--transition-medium);
}

.mv-logo-image:hover {
    transform: scale(1.05);
}

.brand-solution-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    height: 100%;
}

.brand-solution-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.brand-logo-wrapper {
    position: relative;
    height: 120px;
    background-color: #ffffff;
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
}

.brand-logo-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: var(--transition-medium);
}

.brand-solution-card:hover .brand-logo-wrapper img {
    transform: scale(1.05);
}

.brand-logo-placeholder {
    height: 100%;
    width: 100%;
    background: var(--bg-surface-elevated);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 10px;
}

.brand-solution-info {
    padding: 20px;
    background-color: var(--bg-surface);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-solution-info h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.4;
}

.brand-solution-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.subpage-hero.mission-vision-hero {
    background-image: url('assets/blue-buildings.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.subpage-hero.mission-vision-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 15, 25, 0.85) 0%, rgba(19, 38, 117, 0.45) 100%);
    z-index: -1;
}

html[data-theme="light"] .subpage-hero.mission-vision-hero {
    color: #ffffff;
    border-bottom: none;
}

html[data-theme="light"] .subpage-hero.mission-vision-hero .subpage-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .subpage-hero.mission-vision-hero::before {
    background: linear-gradient(135deg, rgba(11, 15, 25, 0.8) 0%, rgba(19, 38, 117, 0.5) 100%);
}

.mission-vision-content {
    background-image: url('assets/home-parallax.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

.mission-vision-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(11, 15, 25, 0.92);
    z-index: -1;
}

html[data-theme="light"] .mission-vision-content::before {
    background-color: rgba(248, 250, 252, 0.95);
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: stretch;
}

@media (max-width: 992px) {
    .mission-vision-grid {
        grid-template-columns: 1fr;
    }
}

/* Brand Pages Carousel Section Styles */
.carousel-container {
    position: relative;
    width: 100%;
    margin: 40px auto 0 auto;
    padding: 0 50px;
}

.carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
}

.carousel-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.carousel-card {
    flex: 0 0 calc((100% - 60px) / 3); /* 3 cards visible on desktop */
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-medium);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.carousel-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-md);
}

.carousel-card-img-container {
    width: 100%;
    height: 180px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    transition: all var(--transition-fast);
}

html[data-theme="light"] .carousel-card-img-container {
    background: rgba(0, 0, 0, 0.02);
}

.carousel-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform var(--transition-medium) ease;
}

.carousel-card:hover .carousel-card-img {
    transform: scale(1.08);
}

.carousel-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.carousel-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.card-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    transition: all var(--transition-fast);
}

.card-download-btn i {
    font-size: 1rem;
    transition: transform var(--transition-fast) ease;
}

.card-download-btn:hover {
    color: var(--primary-light-hover);
}

.card-download-btn:hover i {
    transform: translateY(2px);
}

.carousel-card-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background-color: rgba(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.1);
    border-radius: var(--border-radius-sm);
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-full);
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    z-index: 10;
}

.carousel-btn:hover {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(26, 115, 232, 0.4);
}

.carousel-btn.prev-btn {
    left: 0;
}

.carousel-btn.next-btn {
    right: 0;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--border-radius-full);
    background-color: var(--border-color-hover);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.carousel-dot.active {
    background-color: var(--primary);
    width: 25px;
}

/* Responsive styles for Carousel */
@media (max-width: 1024px) {
    .carousel-card {
        flex: 0 0 calc((100% - 30px) / 2); /* 2 cards visible */
    }
}

@media (max-width: 768px) {
    .carousel-container {
        padding: 0;
    }
    .carousel-card {
        flex: 0 0 100%; /* 1 card visible */
    }
    .carousel-btn {
        display: none; /* Hide buttons on mobile, swipe or dots instead */
    }
}

/* Email domain suggestion button styling */
.contact-form input[type="email"] {
    padding-right: 95px;
}

.email-suggest-btn {
    position: absolute;
    right: 0;
    bottom: 10px;
    background: rgba(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.1);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.2);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-fast);
    z-index: 5;
    line-height: 1;
}

html[data-theme="light"] .email-suggest-btn {
    color: var(--primary);
    background: rgba(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.08);
}

.email-suggest-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.email-suggest-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.4);
}

/* Hero Taglines / Verticals list styling */
.hero-verticals {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    max-width: 100%;
    margin-bottom: 25px;
    padding: 8px 16px;
    background-color: rgba(255, 203, 5, 0.15);
    border: 1px solid rgba(255, 203, 5, 0.25);
    border-radius: var(--border-radius-full);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

html[data-theme="light"] .hero-verticals {
    background-color: rgba(19, 38, 117, 0.1);
    border-color: rgba(19, 38, 117, 0.15);
    color: var(--primary);
}

.hero-verticals::-webkit-scrollbar {
    display: none;
}

.hero-verticals span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.hero-verticals span i {
    color: var(--accent);
    font-size: 1rem;
}

html[data-theme="light"] .hero-verticals span i {
    color: var(--primary);
}

.hero-verticals span:not(:last-child)::after {
    content: '•';
    margin-left: 12px;
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: 900;
}

@media (max-width: 992px) {
    .hero-verticals {
        font-size: 0.85rem;
        gap: 8px 10px;
    }
    .hero-verticals span:not(:last-child)::after {
        margin-left: 8px;
    }
}

@media (max-width: 768px) {
    .hero-verticals {
        font-size: 0.75rem;
        gap: 8px 14px;
        padding: 8px 14px;
    }
    .hero-verticals span i {
        font-size: 0.9rem;
    }
    .hero-verticals span:not(:last-child)::after {
        margin-left: 8px;
    }
}

@media (max-width: 480px) {
    .hero-verticals {
        font-size: 0.65rem;
        letter-spacing: 0.5px;
        gap: 6px 10px;
        padding: 8px 12px;
        border-radius: var(--border-radius-md);
    }
    .hero-verticals span {
        gap: 6px;
    }
    .hero-verticals span i {
        font-size: 0.8rem;
    }
    .hero-verticals span:not(:last-child)::after {
        margin-left: 6px;
    }
}

/* Hero "Choose your path" tabs + panels */
.hero-paths {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: -42px;
    margin-bottom: 60px;
}

.about-us-flow {
    scroll-margin-top: 70px;
}

/* Keep the homepage sections connected without oversized vertical gaps. */
.home-page .section-padding {
    padding-top: clamp(44px, 3.55vw, 68px);
    padding-bottom: clamp(44px, 3.55vw, 68px);
}

.home-page .services-section {
    padding-bottom: 68px;
}

.about-us-flow .services-section {
    padding-bottom: 36px;
}

.about-us-flow .about-section {
    padding-top: 36px;
}

.home-page .subpage-content-section {
    padding-top: 60px;
    padding-bottom: 68px;
}

html[data-theme="light"] .hero-paths .persona-title {
    color: #000000;
}

/* Borrows the .hero-verticals type treatment — small caps weight, letter
   spacing — but drops the pill itself: no tint, no border, no blur. The
   sentence sits bare on the hero photo. The component's icon and bullet rules
   target child spans, and there are none here, so nothing else carries over. */
.hero-paths .about-trust-line {
    display: flex;
    justify-content: center;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 4px 12px;
    line-height: 1.7;
    font-size: 0.95rem;
    background: none;
    border: none;
}

/* .hero-verticals steps its own size down at each breakpoint, but those rules
   are single-class and lose to the one above at every width — so the step-down
   has to be restated here. */
@media (max-width: 768px) {
    .hero-paths .about-trust-line {
        font-size: 0.88rem;
    }
}

@media (max-width: 480px) {
    .hero-paths .about-trust-line {
        font-size: 0.8rem;
    }
}

/* With the plate gone, readability rests on the glyphs. White text carries a
   tight dark shadow for edge contrast plus a wider soft one that darkens the
   photo immediately behind the line — that second layer is what holds the copy
   up where the overlay gradient runs pale. Both themes are written out because
   .hero-verticals sets colour and background at the same specificity — the
   extra class is what outranks it. */
html[data-theme="light"] .hero-paths .about-trust-line,
html[data-theme="dark"] .hero-paths .about-trust-line {
    color: #ffffff;
    background: none;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 2px 6px rgba(0, 0, 0, 0.7),
        0 0 16px rgba(0, 0, 0, 0.55);
}

.hero-path-tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    padding: 6px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-sm);
}

.hero-path-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 26px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-full);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.hero-path-tab i {
    font-size: 0.95rem;
}

.hero-path-tab:hover {
    background-color: var(--bg-surface-elevated);
    color: var(--text-primary);
}

.hero-path-tab.active,
.hero-path-tab.active:hover {
    background-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(19, 38, 117, 0.25);
}

.hero-path-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
    align-items: stretch;
    padding: 40px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    animation: heroPathFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-path-panel[hidden] {
    display: none;
}

@keyframes heroPathFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-path-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.hero-path-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 14px;
    background-color: rgba(19, 38, 117, 0.1);
    border-radius: var(--border-radius-full);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-path-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
}

.hero-path-desc {
    max-width: 52ch;
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.65;
}

.hero-path-list {
    display: grid;
    gap: 12px;
}

.hero-path-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.5;
}

.hero-path-list li i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--primary);
    font-size: 0.95rem;
}

.hero-path-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}

.hero-path-media {
    display: flex;
}

.hero-path-media img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 992px) {
    .hero-path-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .hero-path-tabs::-webkit-scrollbar {
        display: none;
    }

    .hero-path-tab {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    .hero-path-panel {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 30px;
    }

    .hero-path-media img {
        min-height: 220px;
        max-height: 260px;
    }
}

@media (max-width: 576px) {
    .home-page .section-padding {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .home-page .services-section {
        padding-bottom: 48px;
    }

    .about-us-flow .services-section {
        padding-bottom: 28px;
    }

    .about-us-flow .about-section {
        padding-top: 28px;
    }

    .home-page .subpage-content-section {
        padding-top: 44px;
        padding-bottom: 48px;
    }

    .hero-scroll-indicator {
        right: 16px;
    }

    .hero-paths {
        margin-bottom: 45px;
    }

    .hero-path-tab {
        padding: 10px 18px;
        font-size: 0.8rem;
    }

    .hero-path-panel {
        padding: 22px 18px;
        gap: 20px;
        margin: 0 10px;
        border-radius: var(--border-radius-md);
    }

    .hero-path-desc {
        font-size: 0.9rem;
    }

    .hero-path-actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-path-panel {
        animation: none;
    }
}

/* Persona Buttons container & layout */
.hero-personas-container {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.persona-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.hero-persona-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 15px;
    max-width: 620px;
}

.persona-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 72px;
    padding: 16px 20px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-medium);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.persona-btn:hover {
    background-color: var(--bg-surface-elevated);
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

html[data-theme="light"] .persona-btn:hover {
    border-color: var(--primary);
}

.persona-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--border-radius-sm);
    background-color: rgba(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.1);
    color: var(--primary);
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

html[data-theme="dark"] .persona-icon {
    background-color: rgba(255, 203, 5, 0.1);
    color: var(--accent);
}

.persona-btn:hover .persona-icon {
    background-color: var(--accent);
    color: #0b0f19;
}

html[data-theme="light"] .persona-btn:hover .persona-icon {
    background-color: var(--primary);
    color: #ffffff;
}

.persona-text {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hero-main {
        margin-bottom: 40px;
    }
}

@media (max-width: 640px) {
    .hero-persona-grid {
        grid-template-columns: 1fr;
    }

    .persona-text {
        white-space: normal;
    }
}

/* Contact Form Dropdown Select Styling */
.contact-form select {
    width: 100%;
    padding: 14px 0 8px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color-hover);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    transition: border-color var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.form-group.select-group::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 5px;
    bottom: 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    pointer-events: none;
    transition: transform var(--transition-fast);
}

.contact-form select:focus {
    outline: none;
}

.contact-form select:focus~.form-border {
    width: 100%;
}

.contact-form select:focus~label,
.contact-form select:valid~label {
    top: -12px;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
}

html[data-theme="light"] .contact-form select:focus~label,
html[data-theme="light"] .contact-form select:valid~label {
    color: var(--primary);
}

.contact-form select option {
    background-color: var(--bg-surface-elevated);
    color: var(--text-primary);
}
@media (max-width: 600px) {
    .about-question-grid {
        width: 100%;
        min-width: 0;
    }
}
/* Shared end-of-page conversion band */
.global-page-cta {
    padding: 72px 0;
    background: #eef4ff;
    border-top: 1px solid rgba(15, 89, 255, 0.14);
}

.global-page-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: 64px;
}

.global-page-cta-copy h2 {
    margin: 10px 0 14px;
    color: #0f172a;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.12;
}

.global-page-cta-copy p {
    max-width: 590px;
    margin: 0;
    color: #4b5e7a;
    font-size: 1.05rem;
    line-height: 1.65;
}

.global-page-cta-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.global-page-cta-actions .btn {
    min-height: 54px;
    padding: 13px 18px;
    text-align: center;
}

.global-page-cta-actions .btn-profile {
    grid-column: 1 / -1;
    background: #ffffff;
    border: 1px solid rgba(15, 89, 255, 0.3);
    color: #123f9c;
}

.global-page-cta-actions .btn-profile:hover {
    border-color: #155eef;
    color: #155eef;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .global-page-cta-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

@media (max-width: 600px) {
    .global-page-cta {
        padding: 56px 0;
    }

    .global-page-cta-actions {
        grid-template-columns: 1fr;
    }

    .global-page-cta-actions .btn-profile {
        grid-column: auto;
    }
}
/* Verified trust indicators */
.trust-proof-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 64px;
    overflow: hidden;
    border: 1px solid rgba(15, 89, 255, 0.16);
    border-radius: var(--border-radius-md);
    background: rgba(15, 89, 255, 0.16);
}

.trust-proof-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 24px;
    background: #ffffff;
}

.trust-proof-item i {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 1.55rem;
}

.trust-proof-item strong,
.trust-proof-item span {
    display: block;
}

.trust-proof-item strong {
    margin-bottom: 5px;
    color: #0f172a;
    font-size: 1rem;
}

.trust-proof-item span {
    color: #5b6b82;
    font-size: 0.88rem;
    line-height: 1.4;
}

.project-next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    margin-top: 46px;
    padding: 30px 34px;
    border-left: 4px solid var(--primary);
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

.project-next-step h3 {
    max-width: 620px;
    margin: 8px 0 0;
    color: #0f172a;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.25;
}

.project-next-step-actions {
    display: flex;
    width: 280px;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.project-next-step-actions .btn {
    flex: 0 0 100%;
    width: 100%;
    min-height: 54px;
}

@media (max-width: 1024px) {
    .trust-proof-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-next-step {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-next-step-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .trust-proof-strip {
        grid-template-columns: 1fr;
        margin-top: 42px;
    }

    .project-next-step {
        padding: 26px 22px;
    }

    .project-next-step-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Fire Safety Resources & Downloads page
   Sections alternate between --bg-base and --bg-surface-elevated; every colour
   comes from a token so the page follows the light/dark switch like the rest.
   ========================================================================== */

.res-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.res-toc a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.res-toc a i {
    font-size: 0.8rem;
    color: var(--primary);
}

.res-toc a:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* 56px, not the 84px this started at. Two stacked sections put their padding
   back to back, so 84 meant 168px of empty ground between one card grid and the
   next heading — fine when the page carried eight sections, far too loose now
   that these pages run to one and four. */
.res-section {
    padding: 56px 0;
    background-color: var(--bg-base);
    scroll-margin-top: calc(var(--header-height) + 20px);
}

.res-section.is-alt {
    background-color: var(--bg-surface-elevated);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.res-section-head {
    max-width: 780px;
    margin-bottom: 22px;
}

/* Scoped override: the shared .sub-heading utility carries a 12px bottom margin
   everywhere else on the site, but here it sits directly above a large title and
   read as a separate block rather than its label. */
.res-section-head .sub-heading {
    margin-bottom: 6px;
}

.res-section-head .section-title {
    font-size: clamp(1.75rem, 2.3vw, 2.25rem);
    line-height: 1.18;
    margin: 0 0 10px;
}

/* The shared rule caps this at 600px and centres it; these headings are left-aligned
   and wider, so the measure is reset rather than left ragged. */
.res-section-head .section-desc {
    max-width: 100%;
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

/* --- 01 Codes & standards ------------------------------------------------ */

/* auto-fill, not auto-fit: a category holding a single card must keep its column
   width instead of stretching across the whole row. 280px fits all four codes on
   one row at container width. */
.res-code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.res-code-card {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium),
        border-color var(--transition-medium);
}

.res-code-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.res-code-badge {
    align-self: flex-start;
    padding: 6px 12px;
    background-color: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.12);
    border-radius: var(--border-radius-sm);
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.res-code-badge.is-local {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--error);
}

.res-code-card h3 {
    margin: 12px 0 8px;
    font-size: 1.12rem;
    line-height: 1.35;
}

.res-code-card p {
    flex: 1;
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.7;
}

.res-code-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    transition: color var(--transition-fast);
}

.res-code-link i {
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}

.res-code-link:hover {
    color: var(--primary-light-hover);
}

.res-code-link:hover i {
    transform: translate(2px, -2px);
}

.res-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 0;
    padding: 18px 22px;
    background-color: var(--bg-surface);
    border: 1px dashed var(--border-color-hover);
    border-radius: var(--border-radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.65;
}

.res-note i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--primary);
}

.res-note a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- 02 System resources ------------------------------------------------- */

.res-sys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 24px;
}

@media (max-width: 660px) {
    .res-sys-grid {
        grid-template-columns: 1fr;
    }
}

.res-sys-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium),
        border-color var(--transition-medium);
}

.res-sys-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

/* Product shots are transparent cut-outs and must not be cropped, so the default
   is `contain` on a white ground; photographs opt into `cover` via .is-photo. */
.res-sys-media {
    height: 190px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.res-sys-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform var(--transition-medium);
}

.res-sys-media img.is-photo {
    object-fit: cover;
    padding: 0;
}

.res-sys-card:hover .res-sys-media img {
    transform: scale(1.04);
}

.res-sys-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px;
}

.res-sys-card h3 {
    margin: 0 0 10px;
    font-size: 1.08rem;
    line-height: 1.35;
}

.res-sys-card p {
    flex: 1;
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.65;
}

.res-sys-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: color var(--transition-fast);
}

.res-sys-link i {
    font-size: 0.78rem;
    transition: transform var(--transition-fast);
}

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

/* --- 03 Brochures -------------------------------------------------------- */

.res-brochure-group {
    margin-bottom: 38px;
}

.res-brochure-group:last-child {
    margin-bottom: 0;
}

.res-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.res-group-title i {
    color: var(--primary);
    font-size: 0.9rem;
}

.res-brochure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 20px;
}

@media (max-width: 700px) {
    .res-brochure-grid {
        grid-template-columns: 1fr;
    }
}

.res-doc-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 24px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium),
        border-color var(--transition-medium);
}

.res-doc-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.res-doc-card.is-on-request {
    border-style: dashed;
}

.res-doc-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.res-doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: rgba(239, 68, 68, 0.1);
    border-radius: var(--border-radius-sm);
    color: var(--error);
    font-size: 1.05rem;
}

.res-doc-card.is-on-request .res-doc-icon {
    background-color: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.12);
    color: var(--primary);
}

.res-doc-head h4 {
    margin: 0 0 6px;
    font-size: 1rem;
    line-height: 1.35;
}

.res-doc-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

.res-doc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.res-doc-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.res-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background-color: var(--primary);
    border-radius: var(--border-radius-full);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.res-doc-btn:hover {
    background-color: var(--primary-light-hover);
    transform: translateY(-1px);
}

.res-doc-btn.is-ghost {
    background-color: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}

.res-doc-btn.is-ghost:hover {
    background-color: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.1);
}

/* --- 04 Technical documents ---------------------------------------------- */

.res-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.res-tech-card {
    padding: 26px 24px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-medium), border-color var(--transition-medium);
}

.res-tech-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
}

.res-tech-card i {
    display: block;
    margin-bottom: 14px;
    color: var(--primary);
    font-size: 1.25rem;
}

.res-tech-card h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.35;
}

.res-tech-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

.res-request-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
    padding: 28px 32px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.res-request-bar h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
}

.res-request-bar p {
    margin: 0;
    max-width: 560px;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.65;
}

/* Shorter copy that reads as one line at the container's width, so the bar can
   drop the padding and margin sized for the two-line explanation. */
.res-request-bar.is-compact {
    margin-top: 20px;
    padding: 18px 24px;
}

.res-request-bar.is-compact h3 {
    margin-bottom: 3px;
    font-size: 1.02rem;
}

.res-request-bar.is-compact p {
    white-space: nowrap;
    font-size: 0.88rem;
}

@media (max-width: 480px) {

    /* The line no longer fits once the bar stacks to full-width on a phone. */
    .res-request-bar.is-compact p {
        white-space: normal;
    }
}

/* --- 05 Downloads centre -------------------------------------------------- */

.res-dl-table {
    overflow: hidden;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.res-dl-row {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-fast);
}

.res-dl-row:last-child {
    border-bottom: none;
}

.res-dl-row:not(.is-head):hover {
    background-color: var(--bg-surface-elevated);
}

.res-dl-row.is-head {
    background-color: var(--bg-surface-elevated);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.res-dl-name {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.45;
}

.res-dl-name i {
    flex-shrink: 0;
    color: var(--error);
    font-size: 1rem;
}

.res-dl-cat {
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.res-dl-type {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.res-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background-color: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.1);
    border-radius: var(--border-radius-full);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color var(--transition-fast);
}

.res-dl-btn:hover {
    background-color: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), 0.2);
}

.res-dl-btn i {
    font-size: 0.75rem;
}

/* --- Knowledge Hub additions ---------------------------------------------
   These four components were added when the page became the full eight-category
   hub. They read the --tn-* tokens directly rather than --bg-surface/--border-
   color, because those tokens already carry both themes: the light values sit on
   :root and html[data-theme="dark"] swaps them. One definition, both themes, no
   second override block further down the file. */

/* A section's own artwork, matched to the card that links to it from the Knowledge
   Hub grid so the same picture identifies the topic in both places. 3:2 source,
   shown whole rather than cropped — these are infographics, and cropping one cuts
   off the content that makes it worth showing. */
.res-section-figure {
    margin: 0 0 40px;
    overflow: hidden;
    background-color: var(--tn-surface);
    border: 1px solid var(--tn-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--tn-shadow);
}

.res-section-figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Every category closes with one primary action and a line saying where it goes,
   so an external jump is never a surprise. */
.res-section-cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 36px;
}

.res-cta-note {
    color: var(--tn-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* The four-step detect/signal/decide/act chain. An <ol> because the order is the
   content; the counter is drawn rather than using the list marker so it can sit
   inside the card. */
.res-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.res-flow-step {
    position: relative;
    padding: 24px 22px;
    background-color: var(--tn-surface);
    border: 1px solid var(--tn-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--tn-shadow);
}

.res-flow-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    background-color: var(--tn-tint);
    border-radius: var(--border-radius-full);
    color: var(--tn-action);
    font-size: 0.85rem;
    font-weight: 800;
}

.res-flow-step h3 {
    margin: 0 0 8px;
    color: var(--tn-ink);
    font-size: 1rem;
    line-height: 1.35;
}

.res-flow-step p {
    margin: 0;
    color: var(--tn-body);
    font-size: 0.88rem;
    line-height: 1.6;
}

.res-flow + .res-group-title {
    margin-top: 8px;
}

/* FAQ built on native <details>: keyboard accessible, findable by in-page search,
   and it still opens if JavaScript fails. */
.res-faq {
    display: grid;
    gap: 12px;
}

.res-faq-item {
    background-color: var(--tn-surface);
    border: 1px solid var(--tn-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--tn-shadow);
    transition: border-color var(--transition-fast), box-shadow var(--transition-medium);
}

.res-faq-item:hover,
.res-faq-item[open] {
    border-color: var(--tn-border-strong);
}

.res-faq-item[open] {
    box-shadow: var(--tn-shadow-lift);
}

.res-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    color: var(--tn-ink);
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

/* Replace the default disclosure triangle with a chevron that rotates on open */
.res-faq-item summary::-webkit-details-marker {
    display: none;
}

.res-faq-item summary::after {
    content: '\f078';
    flex-shrink: 0;
    color: var(--tn-action);
    font-family: 'Font Awesome 6 Free';
    font-size: 0.8rem;
    font-weight: 900;
    transition: transform var(--transition-fast);
}

.res-faq-item[open] summary::after {
    transform: rotate(180deg);
}

.res-faq-item summary:focus-visible {
    outline: 2px solid var(--tn-action);
    outline-offset: -2px;
    border-radius: var(--border-radius-md);
}

.res-faq-body {
    padding: 0 24px 22px;
}

.res-faq-body p {
    margin: 0;
    color: var(--tn-body);
    font-size: 0.94rem;
    line-height: 1.75;
}

.res-faq-body .res-sys-link {
    margin-top: 14px;
}

@media (max-width: 860px) {
    .res-section-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .res-faq-item summary {
        padding: 17px 18px;
        font-size: 0.97rem;
    }

    .res-faq-body {
        padding: 0 18px 18px;
    }

    .res-section {
        padding: 44px 0;
    }

    /* The header row has no meaning once each row becomes a stacked card */
    .res-dl-row.is-head {
        display: none;
    }

    .res-dl-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 20px 22px;
    }

    .res-dl-row .res-dl-btn {
        justify-content: center;
    }

    .res-request-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    .res-request-bar .btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .res-doc-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .res-doc-btn {
        justify-content: center;
    }
}

/* Transparent product shots are portrait and would be badly cropped by the `cover`
   used for photos and infographics; contain them on the box's dark ground instead. */
.resource-card-image-box img.is-product {
    object-fit: contain;
    padding: 14px;
    background-color: #0f172a;
}

/* --- Brochure cover ------------------------------------------------------
   The site header is transparent until scrolled, so the blue lives in an inset
   panel rather than bleeding full width — otherwise the dark nav links would sit
   on saturated blue at the top of the page. */

.res-hero {
    /* Top clears the 80px fixed header; bottom is the gap to the first section. */
    padding: 118px 0 34px;
    background-color: var(--bg-surface-elevated);
    border-bottom: 1px solid var(--border-color);
}

.res-hero-crumbs {
    margin-bottom: 22px;
}

.res-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    gap: 40px;
    padding: 46px 52px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.res-hero-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: var(--border-radius-full);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.res-hero-copy h1 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: clamp(1.95rem, 3.1vw, 2.9rem);
    line-height: 1.12;
}

.res-hero-copy p {
    max-width: 520px;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.02rem;
    line-height: 1.65;
}

.res-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* The shared button colours assume a light ground; restate them for the panel */
.res-hero-actions .btn-primary {
    background-color: #ffffff;
    color: var(--primary);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.res-hero-actions .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.res-hero-actions .btn-secondary {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.res-hero-actions .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: #ffffff;
}

/* Screen-reader-only text: stays in the accessibility tree and readable by
   crawlers, painted nowhere. Used for the <h1> on hero panels whose headline
   lives inside the artwork. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Banner artwork that already contains its own eyebrow, headline and standfirst.
   The panel drops the two-column split and its padding so the image runs to the
   rounded edges; the artwork's navy ground matches the gradient it covers.

   Full container width and the artwork's own aspect ratio, uncropped. Both a
   narrower centred panel and a 16:7 banner crop were tried and reverted: these
   sources are infographics, and every pixel cut off the bottom is content. */
.res-hero-inner.is-image-only {
    display: block;
    padding: 0;
    overflow: hidden;
}

.res-hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* An opaque, white-ground product shot rather than a transparent cut-out. The
   drop shadow and the 330px cut-out cap are wrong for it: it needs to read as a
   photo plate on the navy panel, so it gets rounded corners and its own shadow
   instead of a silhouette glow. */
.res-hero-media.is-plate img {
    max-width: 440px;
    border-radius: var(--border-radius-md);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    filter: none;
}

.res-hero-media img {
    width: 100%;
    max-width: 330px;
    height: auto;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.3));
}

/* The 330px cap and the drop shadow are for a cut-out floating on the panel.
   A full banner needs neither — it is the panel. */
.res-hero-inner.is-image-only .res-hero-media img {
    display: block;
    max-width: none;
    filter: none;
}

@media (max-width: 900px) {
    .res-hero {
        padding-top: 110px;
    }

    .res-hero-inner {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 34px 26px;
    }

    .res-hero-media {
        order: -1;
    }

    .res-hero-media img {
        max-width: 220px;
    }

    .res-hero-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ==========================================================================
   TECHNICAL NAVY — Knowledge Hub + Fire Safety Resources
   Scoped by class: the .resource- and .hub- families exist only on resources.html,
   and the .res- family only on fire-safety-resources.html, so nothing here reaches
   the other 25 pages.

   Fixes three measured problems with the previous look:
     1. nine saturated tag colours   -> one neutral kicker + a 7px colour dot
     2. 100%-saturation primary blue -> #2b57d4 for action, navy ink for text
     3. 8% borders / 5% shadows      -> readable border + a two-layer shadow
   ========================================================================== */

:root {
    --tn-canvas: #f7f9fc;
    --tn-surface: #ffffff;
    --tn-ink: #0d1b33;
    --tn-body: #5b6b85;
    --tn-muted: #8494ab;
    --tn-action: #2b57d4;
    --tn-action-hover: #1e40af;
    --tn-border: #dde4ee;
    --tn-border-strong: #c7d3e4;
    --tn-mat: #0d1b33;
    --tn-tint: rgba(43, 87, 212, 0.08);
    --tn-shadow: 0 1px 2px rgba(13, 27, 51, 0.06), 0 8px 24px rgba(13, 27, 51, 0.05);
    --tn-shadow-lift: 0 2px 4px rgba(13, 27, 51, 0.08), 0 16px 40px rgba(13, 27, 51, 0.11);
    --tn-hero: linear-gradient(140deg, #1a3768 0%, #0f2247 55%, #0b1730 100%);
}

html[data-theme="dark"] {
    --tn-canvas: var(--bg-base);
    --tn-surface: var(--bg-surface);
    --tn-ink: var(--text-primary);
    --tn-body: var(--text-secondary);
    --tn-muted: var(--text-muted);
    --tn-action: hsl(222, 92%, 70%);
    --tn-action-hover: hsl(222, 92%, 80%);
    --tn-border: rgba(255, 255, 255, 0.13);
    --tn-border-strong: rgba(255, 255, 255, 0.22);
    --tn-mat: #060a12;
    --tn-tint: rgba(90, 140, 255, 0.14);
    --tn-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --tn-shadow-lift: 0 14px 36px rgba(0, 0, 0, 0.45);
    --tn-hero: linear-gradient(140deg, #16294d 0%, #0d1830 55%, #080f1f 100%);
}

/* --- Knowledge Hub -------------------------------------------------------- */

.hub-header-section {
    background-color: var(--tn-surface);
    border-bottom: 1px solid var(--tn-border);
}

.hub-main-title {
    color: var(--tn-ink);
}

.hub-main-subtitle {
    color: var(--tn-body);
}

.hub-grid-section {
    background-color: var(--tn-canvas);
}

.hub-filter-pill {
    background-color: var(--tn-surface);
    border: 1px solid var(--tn-border);
    color: var(--tn-body);
}

.hub-filter-pill:hover {
    color: var(--tn-action);
    border-color: var(--tn-action);
}

.hub-filter-pill.active {
    background-color: var(--tn-ink);
    border-color: var(--tn-ink);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(13, 27, 51, 0.22);
}

.hub-empty-state {
    background-color: var(--tn-surface);
    border: 1px dashed var(--tn-border-strong);
    color: var(--tn-body);
}

/* --- Resource cards ------------------------------------------------------- */

.resource-card {
    background-color: var(--tn-surface);
    border: 1px solid var(--tn-border);
    border-radius: 14px;
    box-shadow: var(--tn-shadow);
}

.resource-card:hover {
    transform: translateY(-4px);
    border-color: var(--tn-border-strong);
    box-shadow: var(--tn-shadow-lift);
}

/* One mat behind every image, so product cut-outs and photographs sit together */
.resource-card-image-box {
    height: 190px;
    background-color: var(--tn-mat);
}

.resource-card-image-box img.brand-product-img {
    opacity: 0.94;
}

.resource-card-image-box img.is-infographic {
    background-color: var(--tn-mat);
}

.resource-card-image-box img.is-product {
    background-color: var(--tn-mat);
    padding: 16px;
}

/* Only the reading time stays on the image now — as a quiet chip, not a pill row */
.resource-card-image-overlay {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 12px;
    display: block;
    padding: 0;
    background: none;
}

.resource-readtime {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background-color: rgba(13, 27, 51, 0.66);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: var(--border-radius-full);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.resource-card-body {
    padding: 22px 24px 24px;
}

/* The label that replaces nine coloured pills */
.resource-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    color: var(--tn-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.resource-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dot-firecode { background-color: #d92d20; }
.dot-fdas { background-color: #2b57d4; }
.dot-compare { background-color: #7c3aed; }
.dot-warning { background-color: #d97706; }
.dot-downloads { background-color: #5b6b85; }
.dot-cabling { background-color: #0d9488; }
.dot-turnover { background-color: #2563eb; }
.dot-inspection { background-color: #e11d48; }
.dot-suppression { background-color: #0284c7; }
.dot-noise { background-color: #65a30d; }

.resource-title {
    color: var(--tn-ink);
    line-height: 1.32;
}

.resource-excerpt {
    color: var(--tn-body);
}

.resource-card-footer {
    border-top: none;
    padding-top: 0;
}

.card-link-action {
    color: var(--tn-action);
    font-weight: 700;
}

.card-link-action:hover {
    color: var(--tn-action-hover);
}

/* --- Fire Safety Resources page ------------------------------------------ */

.res-hero {
    background-color: var(--tn-surface);
    border-bottom: 1px solid var(--tn-border);
}

.res-hero-inner {
    background: var(--tn-hero);
    box-shadow: 0 18px 48px rgba(13, 27, 51, 0.22);
}

.res-hero-eyebrow {
    background-color: rgba(255, 255, 255, 0.13);
    letter-spacing: 1.5px;
}

.res-hero-actions .btn-primary {
    color: #12264d;
}

.res-toc a {
    background-color: var(--tn-surface);
    border: 1px solid var(--tn-border);
    color: var(--tn-body);
}

.res-toc a i {
    color: var(--tn-action);
}

.res-toc a:hover {
    color: var(--tn-action);
    border-color: var(--tn-action);
}

.res-section {
    background-color: var(--tn-canvas);
}

.res-section.is-alt {
    background-color: var(--tn-surface);
    border-top: 1px solid var(--tn-border);
    border-bottom: 1px solid var(--tn-border);
}

.res-section-head .sub-heading {
    color: var(--tn-action);
}

.res-section-head .section-title {
    color: var(--tn-ink);
}

.res-section-head .section-desc {
    color: var(--tn-body);
}

.res-code-card,
.res-sys-card,
.res-doc-card,
.res-tech-card,
.res-request-bar,
.res-dl-table {
    background-color: var(--tn-surface);
    border: 1px solid var(--tn-border);
    box-shadow: var(--tn-shadow);
}

.res-code-card:hover,
.res-sys-card:hover,
.res-doc-card:hover,
.res-tech-card:hover {
    border-color: var(--tn-border-strong);
    box-shadow: var(--tn-shadow-lift);
}

.res-code-card h3,
.res-sys-card h3,
.res-tech-card h3,
.res-doc-head h4,
.res-request-bar h3 {
    color: var(--tn-ink);
}

.res-code-card p,
.res-sys-card p,
.res-tech-card p,
.res-doc-head p,
.res-request-bar p {
    color: var(--tn-body);
}

.res-code-badge {
    background-color: var(--tn-tint);
    color: var(--tn-action);
}

.res-code-badge.is-local {
    background-color: rgba(217, 45, 32, 0.11);
    color: #d92d20;
}

.res-code-link,
.res-sys-link {
    color: var(--tn-action);
}

.res-code-link:hover,
.res-sys-link:hover {
    color: var(--tn-action-hover);
}

.res-code-link {
    border-top: 1px solid var(--tn-border);
}

.res-sys-media {
    background-color: var(--tn-mat);
    border-bottom: 1px solid var(--tn-border);
}

.res-sys-media img {
    opacity: 0.96;
}

.res-note {
    background-color: var(--tn-surface);
    border: 1px dashed var(--tn-border-strong);
    color: var(--tn-body);
}

.res-note i,
.res-note a {
    color: var(--tn-action);
}

.res-group-title {
    color: var(--tn-body);
    border-bottom: 1px solid var(--tn-border);
}

.res-group-title i {
    color: var(--tn-action);
}

.res-doc-icon {
    background-color: rgba(217, 45, 32, 0.1);
    color: #d92d20;
}

.res-doc-card.is-on-request .res-doc-icon {
    background-color: var(--tn-tint);
    color: var(--tn-action);
}

.res-doc-foot {
    border-top: 1px solid var(--tn-border);
}

.res-doc-meta {
    color: var(--tn-muted);
}

.res-doc-btn {
    background-color: var(--tn-action);
}

.res-doc-btn:hover {
    background-color: var(--tn-action-hover);
}

.res-doc-btn.is-ghost {
    border-color: var(--tn-action);
    color: var(--tn-action);
}

.res-doc-btn.is-ghost:hover {
    background-color: var(--tn-tint);
}

.res-tech-card i {
    color: var(--tn-action);
}

.res-request-bar {
    border-left: 3px solid var(--tn-action);
}

.res-dl-row {
    border-bottom: 1px solid var(--tn-border);
}

.res-dl-row.is-head {
    background-color: var(--tn-canvas);
    color: var(--tn-muted);
}

.res-dl-row:not(.is-head):hover {
    background-color: var(--tn-canvas);
}

.res-dl-name {
    color: var(--tn-ink);
}

.res-dl-name i {
    color: #d92d20;
}

.res-dl-cat {
    color: var(--tn-body);
}

.res-dl-type {
    color: var(--tn-muted);
}

.res-dl-btn {
    background-color: var(--tn-tint);
    color: var(--tn-action);
}

.res-dl-btn:hover {
    background-color: rgba(43, 87, 212, 0.16);
}

/* The theme-scoped .btn rules (html[data-theme=...] .btn-primary) outrank a plain
   two-class selector, so the hero's inverted buttons must match that specificity. */
html[data-theme="light"] .res-hero-actions .btn-primary,
html[data-theme="dark"] .res-hero-actions .btn-primary {
    background-color: #ffffff;
    color: #12264d;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .res-hero-actions .btn-primary:hover,
html[data-theme="dark"] .res-hero-actions .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

html[data-theme="light"] .res-hero-actions .btn-secondary,
html[data-theme="dark"] .res-hero-actions .btn-secondary {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

html[data-theme="light"] .res-hero-actions .btn-secondary:hover,
html[data-theme="dark"] .res-hero-actions .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: #ffffff;
}

/* The active pill paints ink as a BACKGROUND, so it needs its own pair rather than
   reusing --tn-ink, which flips to near-white in dark mode (white on white). */
:root {
    --tn-pill-bg: #0d1b33;
    --tn-pill-fg: #ffffff;
}

html[data-theme="dark"] {
    --tn-pill-bg: hsl(222, 92%, 70%);
    --tn-pill-fg: #0b1730;
}

.hub-filter-pill.active {
    background-color: var(--tn-pill-bg);
    border-color: var(--tn-pill-bg);
    color: var(--tn-pill-fg);
}

/* =========================================
   SPECIAL PROJECTS
========================================= */

/* Adds space between Project Portfolio and Special Projects */
.special-projects-header {
    margin-top: 90px;
}

/* Center the 3 special project cards */
.special-projects-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
}

/* Keep special project cards the same size */
.special-project-card {
    flex: 0 1 350px;
    width: 350px;
    max-width: 350px;
    text-decoration: none;
    color: inherit;
}

/* Make sure the clickable <a> behaves like a card */
.special-project-card .project-info {
    display: flex;
    flex-direction: column;
}

/* Keep status positioned nicely */
.special-project-card .project-status {
    margin-top: auto;
}


/* =========================================
   SPECIAL PROJECTS - MOBILE
========================================= */

@media (max-width: 768px) {

    .special-projects-header {
        margin-top: 60px;
    }

    .special-projects-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .special-project-card {
        /* The base rule's `flex: 0 1 350px` sets flex-basis, which is a HEIGHT
           here because the grid above switches to a column direction on phone —
           without resetting it, each card gets forced to 350px tall regardless
           of content, leaving a large empty gap under the status badge. */
        flex: 0 1 auto;
        width: 100%;
        max-width: 350px;
    }

    .special-project-card .project-info {
        display: block;
        padding: 16px 16px 16px;
    }

    .special-project-card .project-info h3 {
        margin-bottom: 2px;
    }

    .special-project-card .project-subtitle {
        margin-bottom: 10px;
    }

    .special-project-card .project-status {
        margin-top: 0;
    }

}