/* ==========================================================================
   New Cornerstone Technical Services L.L.C — Main Stylesheet
   Palettes: deep navy (primary), white (base), steel gray (borders/sections),
   gold (accent). Organized by section for easy maintenance.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand colors */
    --navy-950:      #05182b;
    --navy-900:      #0a2540;
    --navy-800:      #11304f;
    --navy-700:      #1a4066;
    --steel-600:     #4c6379;
    --steel-400:     #8296aa;
    --steel-200:     #d6dfe8;
    --steel-100:     #e7ecf1;
    --steel-50:      #f3f6f9;
    --white:         #ffffff;
    --gold:          #c9a227;
    --gold-dark:     #a98619;
    --gold-light:    #e0c04f;
    --ink:           #16263a;
    --muted:         #5c7085;
    --error:         #c0392b;
    --success:       #1e8449;

    /* Typography */
    --font-head: 'Archivo', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
    --fs-base:   1rem;
    --fs-hero:   clamp(2.2rem, 4.6vw, 3.4rem);
    --fs-h2:     clamp(1.7rem, 3vw, 2.4rem);
    --fs-h3:     1.25rem;

    /* Spacing */
    --sp-1: 0.5rem;
    --sp-2: 1rem;
    --sp-3: 1.5rem;
    --sp-4: 2rem;
    --sp-5: 3rem;
    --sp-6: 4.5rem;

    /* Shape & elevation */
    --container: 1200px;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.08);
    --shadow-md: 0 12px 32px rgba(10, 37, 64, 0.12);
    --shadow-lg: 0 24px 56px rgba(10, 37, 64, 0.16);
    --transition: 0.25s ease;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--navy-700);
    text-decoration: none;
    transition: color var(--transition);
}

ul {
    list-style: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy-900);
}

button {
    font-family: inherit;
    cursor: pointer;
}

::selection {
    background: var(--gold);
    color: var(--navy-900);
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-2);
}

.section {
    padding: var(--sp-6) 0;
}

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

.section-navy {
    background: var(--navy-900);
}

.section-head {
    max-width: 700px;
    margin-bottom: var(--sp-5);
}

.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: var(--sp-1);
}

.section-head .eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--gold);
}

.section-head.text-center .eyebrow::after {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--gold);
}

.section-head h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-2);
}

.section-head p {
    color: var(--muted);
    font-size: 1.03rem;
}

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

/* Headings on navy sections */
h2.inverse {
    color: var(--white);
}

.inverse-muted {
    color: var(--steel-200);
}

.hero .eyebrow {
    color: var(--gold-light);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    border: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-gold {
    background: var(--gold);
    color: var(--navy-900);
}

.btn-gold:hover {
    background: var(--gold-dark);
    color: var(--white);
}

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

.btn-outline:hover {
    background: var(--white);
    color: var(--navy-900);
}

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

.btn-outline-navy:hover {
    background: var(--navy-800);
    color: var(--white);
}

.btn-navy {
    background: var(--navy-800);
    color: var(--white);
}

.btn-navy:hover {
    background: var(--navy-700);
    color: var(--white);
}

.btn-block {
    width: 100%;
}

/* --------------------------------------------------------------------------
   5. Topbar, Header & Navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

/* Anchor targets clear the sticky header when jumped to */
[id] {
    scroll-margin-top: 100px;
}

/* Top strip */
.topbar {
    background: var(--navy-950);
    color: var(--steel-400);
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: 38px;
    flex-wrap: wrap;
}

.topbar-contact {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.topbar a {
    color: var(--steel-400);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.topbar a:hover,
.topbar a:hover i {
    color: var(--gold-light);
}

.topbar i {
    color: var(--gold);
    font-size: 0.72rem;
}

.topbar-hours {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Main bar */
.navbar {
    background: transparent;
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: 86px;
}

/* Pushes the nav to the right of the header, next to the phone/CTA row. */
.navbar-inner > .nav {
    margin-left: auto;
}

/* Logo.
   The uploaded logo is a 1000x1000 file whose NCTS mark occupies only
   x15-286 / y537-616 of the canvas, with the company name and service list
   set as ~10px lettering beside it. That lettering has no detail to scale up,
   so it stays blurry however large the image is displayed.
   The mark is cropped out of the file at full sharpness and the name and
   service list are rendered as real HTML text, so they stay crisp and bold
   at any size. --logo-mark is the displayed width of the NCTS mark. */
.brand {
    --logo-mark: 108px;
    --brand-max: 780px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    max-width: var(--brand-max);
}

.brand-mark {
    position: relative;
    flex: none;
    width: var(--logo-mark);
    height: calc(var(--logo-mark) * 0.2904);
    overflow: hidden;
}

.brand-logo {
    position: absolute;
    top: calc(var(--logo-mark) * -1.9743);
    left: calc(var(--logo-mark) * -0.0551);
    width: calc(var(--logo-mark) * 3.676);
    height: auto;
    max-width: none;
    border-radius: 0;
    border: none;
    background: transparent;
    padding: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

/* Company name and service list share one size, weight and tracking so the
   two lines read as an aligned pair. */
.brand-text strong,
.brand-text span {
    font-family: var(--font-head);
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    text-transform: uppercase;
}

.brand-text strong {
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

/* Keeps the two lines flush on the left edge at every size. */
.brand-text {
    align-items: flex-start;
    text-align: left;
}

.brand-text strong {
    color: var(--navy-900);
}

.brand-text span {
    /* The service list is 56 characters against the company name's 40, so it
       is set smaller to finish at the same right edge as the name. Both lines
       then line up on the left and the right. */
    font-size: 0.595rem;
    /* Tracking scales with the smaller size so the caps keep an even feel. */
    letter-spacing: 0.095em;
    /* Tucks the line under the name while staying flush left with it. */
    margin-top: 0.25rem;
    /* Darker than --gold-dark so the uppercase text stays legible against
       the white header. */
    color: #7d6108;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.nav-link {
    white-space: nowrap;
    display: block;
    padding: 0.6rem 1rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy-900);
    position: relative;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.25rem;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.nav-link.active {
    color: var(--navy-800);
}

.nav-link.active::after {
    transform: scaleX(1);
}

@media (hover: hover) {
    .nav-link:hover,
    .nav-link.active {
        color: var(--navy-800);
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        transform: scaleX(1);
    }
}

/* --------------------------------------------------------------------------
   Navigation Dropdown (Services Mega Menu)
   -------------------------------------------------------------------------- */
.has-dropdown {
    position: relative;
}

.dropdown-arrow {
    font-size: 0.6rem;
    margin-left: 0.35rem;
    transition: transform 0.25s ease;
    vertical-align: middle;
}

@media (hover: hover) {
    .has-dropdown:hover > .nav-link .dropdown-arrow {
        transform: rotate(180deg);
    }
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 420px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--steel-200);
    z-index: 200;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

@media (hover: hover) {
    .has-dropdown:hover > .nav-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 24px;
}

.nav-dropdown-inner {
    padding: 0;
}

.nav-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--steel-100);
}

.nav-dropdown-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--navy-900);
}

.nav-dropdown-view-all {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color var(--transition);
}

.nav-dropdown-view-all:hover {
    color: var(--gold);
}

.nav-dropdown-view-all i {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.nav-dropdown-view-all:hover i {
    transform: translateX(2px);
}

.nav-dropdown-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 0.5rem;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    color: var(--ink);
}

@media (hover: hover) {
    .nav-dropdown-item:hover {
        background: var(--steel-50);
        color: var(--navy-800);
    }
}

.nav-dropdown-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--steel-50);
    color: var(--gold-dark);
    font-size: 0.88rem;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}

@media (hover: hover) {
    .nav-dropdown-item:hover .nav-dropdown-icon {
        background: var(--gold);
        color: var(--white);
    }
}

.nav-dropdown-label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}



.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 0.5rem;
    z-index: 101;
}

.nav-toggle span {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--navy-900);
    transition: all var(--transition);
}

body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Hero (Home)
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    background:
        linear-gradient(120deg, var(--navy-950) 0%, rgba(10, 37, 64, 0.96) 55%, rgba(26, 64, 102, 0.88) 100%),
        radial-gradient(circle at 82% 18%, rgba(201, 162, 39, 0.14), transparent 52%);
    color: var(--white);
    overflow: hidden;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-5);
    align-items: center;
    padding: var(--sp-6) 0;
}

.hero-content h1 {
    color: var(--white);
    font-size: var(--fs-hero);
    font-weight: 800;
    margin-bottom: var(--sp-2);
}

.hero-content h1 .accent {
    color: var(--gold-light);
}

.hero-lead {
    max-width: 560px;
    color: var(--steel-400);
    font-size: 1.05rem;
    margin-bottom: var(--sp-4);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--steel-400);
    font-size: 0.9rem;
}

.hero-trust i {
    color: var(--gold);
}

/* Floating trust card in hero */
.hero-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: var(--sp-4);
    box-shadow: var(--shadow-lg);
    border-top: 4px solid var(--gold);
}

.hero-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}

.hero-card .card-sub {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: var(--sp-3);
}

.hero-card ul {
    display: grid;
    gap: 0.85rem;
}

.hero-card li {
    display: flex;
    gap: 0.75rem;
    color: var(--ink);
    font-size: 0.92rem;
}

.hero-card li i {
    color: var(--gold-dark);
    margin-top: 0.15rem;
}

.hero-card .card-foot {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--steel-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.hero-card .card-foot small {
    color: var(--muted);
}

.hero-card .card-foot a {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--gold-dark);
}

.hero-card .card-foot a:hover {
    color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   6b. Home Hero Slider
   -------------------------------------------------------------------------- */
.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--navy-950);
}

.hero-slider-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hero-slide {
    min-width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 480px;
    aspect-ratio: 1980 / 950;
}

.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(4, 18, 33, 0.88) 0%, rgba(4, 18, 33, 0.55) 38%, rgba(4, 18, 33, 0.22) 68%, rgba(4, 18, 33, 0.10) 100%),
        linear-gradient(to right, rgba(4, 18, 33, 0.45) 0%, rgba(4, 18, 33, 0.10) 55%, rgba(4, 18, 33, 0) 100%);
}

/* Legibility scrims matched to the copy placement chosen in
   admin > Home Slider, so the headline never sits on a bright part of
   the photo. Falls back to the base overlay where :has() is unsupported. */
.hero-slide:has(.hero-pos-bottom-left) .hero-slide-bg::after,
.hero-slide:has(.hero-pos-center-left) .hero-slide-bg::after {
    background:
        linear-gradient(to top, rgba(4, 18, 33, 0.90) 0%, rgba(4, 18, 33, 0.64) 42%, rgba(4, 18, 33, 0.26) 72%, rgba(4, 18, 33, 0.12) 100%),
        linear-gradient(to right, rgba(4, 18, 33, 0.74) 0%, rgba(4, 18, 33, 0.44) 38%, rgba(4, 18, 33, 0.08) 72%, rgba(4, 18, 33, 0) 100%);
}

.hero-slide:has(.hero-pos-bottom-right) .hero-slide-bg::after {
    background:
        linear-gradient(to top, rgba(4, 18, 33, 0.90) 0%, rgba(4, 18, 33, 0.64) 42%, rgba(4, 18, 33, 0.26) 72%, rgba(4, 18, 33, 0.12) 100%),
        linear-gradient(to left, rgba(4, 18, 33, 0.74) 0%, rgba(4, 18, 33, 0.44) 38%, rgba(4, 18, 33, 0.08) 72%, rgba(4, 18, 33, 0) 100%);
}

.hero-slide:has(.hero-pos-bottom-center) .hero-slide-bg::after {
    background:
        linear-gradient(to top, rgba(4, 18, 33, 0.92) 0%, rgba(4, 18, 33, 0.74) 34%, rgba(4, 18, 33, 0.42) 62%, rgba(4, 18, 33, 0.18) 100%);
}

.container.hero-slide-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    /* Full-bleed box whose padding keeps the copy on the same 1200px grid
       as every section below, instead of hugging the screen edge. */
    width: 100%;
    max-width: none;
    padding: var(--sp-4);
    padding-left: max(1.25rem, calc((100% - var(--container)) / 2));
    padding-right: max(1.25rem, calc((100% - var(--container)) / 2));
}

/* Per-slide content placement (chosen in admin > Home Slider).
   The content box is full width with symmetric grid padding, so only
   vertical placement and text alignment differ here. Text sits directly
   on the image, so keep it clear of the dot indicators pinned to the
   bottom of the slide. */
.container.hero-slide-content.hero-pos-bottom-left {
    align-self: flex-end;
    margin-bottom: 3.5rem;
    text-align: left;
}

.container.hero-slide-content.hero-pos-bottom-center {
    align-self: flex-end;
    margin-bottom: 3.5rem;
    text-align: center;
}

.container.hero-slide-content.hero-pos-bottom-right {
    align-self: flex-end;
    margin-bottom: 3.5rem;
    text-align: right;
}

/* Vertically centred in the banner, text still anchored to the left edge. */
.container.hero-slide-content.hero-pos-center-left {
    align-self: center;
    text-align: left;
}

.hero-slide-content.hero-pos-bottom-center .hero-slide-actions {
    justify-content: center;
}

.hero-slide-content.hero-pos-bottom-right .hero-slide-actions {
    justify-content: flex-end;
}

.hero-slide-content .eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: var(--sp-2);
    background: rgba(201, 162, 39, 0.12);
    padding: 0.35rem 0.9rem;
    border-radius: 4px;
}

.hero-slide-content h1 {
    color: var(--white);
    font-family: 'Oswald', 'Archivo', var(--font-head);
    font-size: clamp(1.8rem, 4.4vw, 3.2rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: var(--sp-2);
    max-width: 820px;
    text-shadow: 0 2px 14px rgba(5, 24, 43, 0.55);
}

.hero-slide-content.hero-pos-bottom-center h1 {
    margin-left: auto;
    margin-right: auto;
}

.hero-slide-content.hero-pos-bottom-right h1 {
    margin-left: auto;
    margin-right: 0;
}

.hero-slide-content h1 .accent {
    color: var(--gold-light);
}

.hero-slide-content p {
    color: var(--steel-200);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: var(--sp-4);
    max-width: 640px;
    text-shadow: 0 1px 10px rgba(5, 24, 43, 0.5);
}

.hero-slide-content.hero-pos-bottom-center p {
    margin-left: auto;
    margin-right: auto;
}

.hero-slide-content.hero-pos-bottom-right p {
    margin-left: auto;
    margin-right: 0;
}

.hero-slide-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.hero-slide-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-slide-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--steel-400);
    font-size: 0.9rem;
}

.hero-slide-trust i {
    color: var(--gold);
}

/* Slider navigation arrows — tall translucent bars on the slide edges */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 76px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.88);
    color: var(--navy-950);
    transform: translateY(-50%);
}

.slider-arrow--prev {
    left: 20px;
}

.slider-arrow--next {
    right: 20px;
}

/* Slider dot indicators */
.slider-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.slider-dot.active {
    background: var(--gold);
    border-color: var(--gold);
    transform: scale(1.15);
}

.slider-dot:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.7);
}

/* Slider progress bar */
.slider-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.slider-progress-bar {
    height: 100%;
    background: var(--gold);
    width: 0%;
    transition: width 0.3s linear;
}

/* Pause on hover */
.hero-slider:hover .slider-progress-bar {
    transition: none;
}

/* Slide content entrance — replays each time a slide becomes active */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-slide.is-active .hero-slide-content > * {
    animation: heroFadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero-slide.is-active .hero-slide-content > *:nth-child(1) { animation-delay: 0.10s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(2) { animation-delay: 0.25s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(3) { animation-delay: 0.40s; }
.hero-slide.is-active .hero-slide-content > *:nth-child(4) { animation-delay: 0.55s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-slider-track {
        transition: none;
    }

    .hero-slide.is-active .hero-slide-content > * {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   7. Page Hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
    background:
        linear-gradient(120deg, var(--navy-950) 0%, rgba(10, 37, 64, 0.97) 60%, rgba(26, 64, 102, 0.92) 100%),
        radial-gradient(circle at 84% 25%, rgba(201, 162, 39, 0.12), transparent 50%);
    color: var(--white);
    padding: var(--sp-5) 0 var(--sp-6);
    text-align: center;
}

.page-hero h1 {
    color: var(--white);
    font-family: 'Oswald', 'Archivo', var(--font-head);
    font-size: var(--fs-h2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.page-hero h1::after {
    content: "";
    display: block;
    width: 76px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    margin: 0.9rem auto 0;
}

.page-hero p {
    color: var(--steel-400);
    max-width: 640px;
    margin: 0 auto;
}

.page-hero--about {
    background:
        linear-gradient(120deg, rgba(7, 24, 42, 0.94) 0%, rgba(10, 37, 64, 0.86) 55%, rgba(20, 58, 99, 0.74) 100%),
        url("../images/about-banner.jpg");
    background-size: cover;
    background-position: center;
}

/* --------------------------------------------------------------------------
   7b. Photo banner hero (contact / about with an uploaded image)
   The photo stays visible through a directional scrim: dark where the text
   sits, lighter on the open side, with a gold accent and a soft fade into the
   next section.
   -------------------------------------------------------------------------- */
.page-hero--banner {
    position: relative;
    isolation: isolate;
    background-color: var(--navy-950);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 42%;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem);
}

/* Scrim + accents, painted above the photo via ::before */
.page-hero--banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 88% 12%, rgba(201, 162, 39, 0.22) 0%, rgba(201, 162, 39, 0) 55%),
        linear-gradient(180deg, rgba(7, 24, 42, 0.55) 0%, rgba(7, 24, 42, 0.28) 38%, rgba(7, 24, 42, 0.88) 100%);
}

/* Fade into the following section */
.page-hero--banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(7, 24, 42, 0) 0%, rgba(7, 24, 42, 0.55) 100%);
    pointer-events: none;
}

.page-hero--banner .container {
    position: relative;
    max-width: 900px;
}

.page-hero--banner h1 {
    text-shadow: 0 2px 18px rgba(4, 14, 26, 0.65);
    margin-bottom: 0.65rem;
}

.page-hero--banner h1::after {
    width: 96px;
    height: 3px;
    margin-top: 1rem;
    box-shadow: 0 2px 14px rgba(201, 162, 39, 0.45);
}

.page-hero--banner p {
    color: rgba(226, 236, 245, 0.94);
    text-shadow: 0 2px 12px rgba(4, 14, 26, 0.7);
    max-width: 680px;
}

.page-hero--banner .breadcrumb {
    margin-top: var(--sp-3);
}

.page-hero--banner .breadcrumb a,
.page-hero--banner .breadcrumb span {
    text-shadow: 0 1px 8px rgba(4, 14, 26, 0.8);
}

/* Overlay strength — chosen in the admin, so the photo can be dialled up or
   down without touching code. */
.page-hero--banner.overlay-light::before {
    background:
        radial-gradient(120% 90% at 88% 12%, rgba(201, 162, 39, 0.18) 0%, rgba(201, 162, 39, 0) 55%),
        linear-gradient(180deg, rgba(7, 24, 42, 0.34) 0%, rgba(7, 24, 42, 0.12) 40%, rgba(7, 24, 42, 0.72) 100%);
}

.page-hero--banner.overlay-medium::before {
    background:
        radial-gradient(120% 90% at 88% 12%, rgba(201, 162, 39, 0.22) 0%, rgba(201, 162, 39, 0) 55%),
        linear-gradient(180deg, rgba(7, 24, 42, 0.55) 0%, rgba(7, 24, 42, 0.28) 38%, rgba(7, 24, 42, 0.88) 100%);
}

.page-hero--banner.overlay-strong::before {
    background:
        radial-gradient(120% 90% at 88% 12%, rgba(201, 162, 39, 0.28) 0%, rgba(201, 162, 39, 0) 55%),
        linear-gradient(180deg, rgba(7, 24, 42, 0.74) 0%, rgba(7, 24, 42, 0.52) 38%, rgba(7, 24, 42, 0.95) 100%);
}

/* Gold hairline that finishes the banner */
.page-hero--banner .container::after {
    content: "";
    display: block;
    width: 180px;
    height: 2px;
    margin: var(--sp-3) auto 0;
    background: linear-gradient(90deg, rgba(201, 162, 39, 0), var(--gold), rgba(201, 162, 39, 0));
    opacity: 0.75;
}

@media (max-width: 700px) {
    .page-hero--banner {
        background-position: center;
        padding: 3rem 0 3.75rem;
    }
}

/* Photo-only banner: the image is shown on its own, no visible text.
   The heading stays in the DOM (sr-only) for SEO and screen readers. */
.page-hero--banner.page-hero--image-only {
    padding: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
}

.page-hero--image-only .container {
    width: 100%;
    max-width: none;
    min-height: 300px;
}

/* When an explicit pixel height is set in the admin, the section owns the
   height so every page banner can be made exactly the same size. */
.page-hero--fixed-height {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.page-hero--fixed-height .container {
    min-height: 0;
    width: 100%;
}

.page-hero--fixed-height.page-hero--image-only .container {
    min-height: 0;
}

.page-hero--image-only::after {
    height: 64px;
    background: linear-gradient(180deg, rgba(7, 24, 42, 0) 0%, rgba(7, 24, 42, 0.42) 100%);
}

/* Visually hidden, still read by search engines and screen readers */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 700px) {
    .page-hero--image-only .container {
        min-height: 200px;
    }
}

.page-hero .breadcrumb {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: var(--sp-2);
    font-size: 0.82rem;
}

.page-hero .breadcrumb a {
    color: var(--gold-light);
}

.page-hero .breadcrumb span {
    color: var(--steel-400);
}

/* --------------------------------------------------------------------------
   8. Cards & Shared Components
   -------------------------------------------------------------------------- */
.card {
    background: var(--white);
    border: 1px solid var(--steel-100);
    border-radius: var(--radius);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

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

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
}

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

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}

/* Service cards */
.service-card {
    position: relative;
    padding-top: var(--sp-4);
}

.service-card .service-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--navy-800);
    color: var(--gold-light);
    font-size: 1.3rem;
    margin-bottom: var(--sp-2);
    transition: background var(--transition), color var(--transition);
}

.service-card:hover .service-icon {
    background: var(--gold);
    color: var(--navy-900);
}

.service-card h3 {
    font-size: var(--fs-h3);
    margin-bottom: 0.55rem;
}

.service-card p {
    color: var(--muted);
    font-size: 0.94rem;
    margin-bottom: var(--sp-2);
}

.service-card a {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--gold-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.service-card a i {
    transition: transform var(--transition);
}

.service-card a:hover {
    color: var(--navy-800);
}

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

/* Media (image) variant of service cards */
.service-card--media {
    padding: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card--media .service-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    font-weight: normal;
    color: inherit;
    text-decoration: none;
}

.service-card--media .service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.service-card--media:hover .service-media img {
    transform: scale(1.07);
}

.service-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 24, 42, 0.02) 0%, rgba(7, 24, 42, 0.55) 72%, rgba(7, 24, 42, 0.85) 100%);
}

.service-card--media .service-media .service-icon {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    margin: 0;
    background: var(--navy-900);
    border: 1px solid rgba(224, 192, 79, 0.35);
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
}

.service-card--media:hover .service-media .service-icon {
    background: var(--gold);
    color: var(--navy-900);
}

.service-card-body {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-card-body h3 {
    margin-top: 0;
}

.service-card-body > a {
    margin-top: auto;
    position: relative;
}

.service-card-body > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.service-card-body > a:hover::after {
    transform: scaleX(1);
}

/* AMC cards (navy section) */
.amc-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: var(--sp-4);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.amc-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(224, 192, 79, 0.45);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.amc-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.amc-card-head i {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(201, 162, 39, 0.14);
    border: 1px solid rgba(224, 192, 79, 0.35);
    border-radius: 10px;
    color: var(--gold-light);
    font-size: 1rem;
}

.amc-card-head h3 {
    margin: 0;
    color: var(--white);
    font-size: 1.05rem;
}

.amc-card .check-list {
    margin: 0;
}

.amc-card .check-list li {
    color: var(--steel-200);
    font-size: 0.93rem;
    line-height: 1.55;
}

.amc-card .check-list li i {
    color: var(--gold-light);
}

.amc-card p {
    color: var(--steel-200);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

.philosophy-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: var(--sp-3) 0;
}

.philosophy-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    background: rgba(224, 192, 79, 0.15);
    border: 1px solid rgba(224, 192, 79, 0.35);
    border-radius: 999px;
    color: var(--gold-light);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.philosophy-flow > i {
    color: var(--steel-400);
    font-size: 0.7rem;
}

.amc-cta {
    text-align: center;
    margin-top: var(--sp-4);
}

/* Feature cards (Why choose us / values) */
.feature-card {
    text-align: center;
}

.feature-card .feature-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto var(--sp-2);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.12);
    color: var(--gold-dark);
    font-size: 1.4rem;
    border: 1px solid rgba(201, 162, 39, 0.25);
}

.feature-card h3 {
    font-size: var(--fs-h3);
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: var(--muted);
    font-size: 0.94rem;
}

.feature-card.navy-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.feature-card.navy-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

.feature-card.navy-card h3 {
    color: var(--white);
}

.feature-card.navy-card p {
    color: var(--steel-400);
}

.feature-card.navy-card .feature-icon {
    background: rgba(201, 162, 39, 0.16);
    color: var(--gold-light);
    border-color: rgba(201, 162, 39, 0.4);
}

/* Industries */
.industry-pill {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.2rem;
    background: var(--white);
    border: 1px solid var(--steel-100);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    font-weight: 500;
    color: var(--navy-800);
    font-size: 0.95rem;
    transition: all var(--transition);
}

.industry-pill i {
    color: var(--gold-dark);
}

.industry-pill:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--gold);
    border-left-width: 6px;
}

.commitment-card {
    padding: var(--sp-4);
    border: 1px solid var(--steel-100);
    border-radius: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.commitment-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold-dark);
    box-shadow: 0 10px 24px rgba(10, 37, 64, 0.10);
}

.commitment-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--steel-50);
}

.commitment-head i {
    color: var(--gold-dark);
    font-size: 1.2rem;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: rgba(201, 162, 39, 0.10);
    border-radius: 10px;
    flex-shrink: 0;
}

.commitment-head h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--navy-900);
}

.commitment-card .check-list {
    margin: 0;
}

.industries-block {
    margin-top: var(--sp-5);
    text-align: center;
}

.industries-block h3 {
    color: var(--navy-900);
    font-size: 1.35rem;
    margin-bottom: var(--sp-2);
}

.industry-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
}

.industry-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    border: 1px solid var(--steel-100);
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    color: var(--navy-800);
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.industry-list li:hover {
    transform: translateY(-2px);
    border-color: var(--gold-dark);
    background: rgba(201, 162, 39, 0.08);
}

.industry-list i {
    color: var(--gold-dark);
}

/* --------------------------------------------------------------------------
   9. Splits (About / mixed sections)
   -------------------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: center;
}

.split-media {
    position: relative;
    align-self: stretch;
}

.split-media .media-frame {
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    min-height: 320px;
    height: 100%;
    color: var(--gold-light);
    font-size: 4rem;
    overflow: hidden;
    position: relative;
}

.split-media .media-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.split-media .media-frame::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 50%;
    right: -80px;
    bottom: -80px;
    pointer-events: none;
    z-index: 2;
}

.split-media .media-frame.gradient-overlay::after {
    border-color: rgba(255, 255, 255, 0.5);
}

.split-media .media-badge {
    position: absolute;
    bottom: var(--sp-3);
    right: var(--sp-3);
    background: var(--gold);
    color: var(--navy-900);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.1rem;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: var(--shadow-md);
    z-index: 3;
}

.split-body .eyebrow {
    margin-bottom: var(--sp-1);
}

.split-body h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-2);
}

/* The home page overview heading is a 40-character uppercase line sitting in
   half a grid column, so it is stepped down from --fs-h2 to avoid three
   cramped lines. Scoped to this block only — every other section keeps the
   standard h2 size. */
.split-body--overview h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.95rem);
    line-height: 1.28;
}

.split-body--overview .eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
}

.split-body p {
    color: var(--muted);
    margin-bottom: var(--sp-2);
}

.split-body .overview-tagline {
    color: var(--navy-900);
    font-weight: 700;
    font-size: 1.08rem;
    text-align: center;
}

.split-body .btn {
    margin-top: var(--sp-1);
}

.check-list {
    display: grid;
    gap: 0.6rem;
    margin: var(--sp-2) 0 var(--sp-2);
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--ink);
    font-size: 0.95rem;
}

.check-list i {
    color: var(--gold-dark);
    margin-top: 0.25rem;
}

/* Focus & Commitment Cards */
.focus-commitment-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}

/* Our Focus — modern tile grid (navy gradient, matches Our Commitment) */
.focus-card {
    background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-950) 100%);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: var(--sp-4);
    color: var(--white);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -18px rgba(7, 24, 42, 0.6);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.focus-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 162, 39, 0.45);
    box-shadow: 0 28px 50px -20px rgba(7, 24, 42, 0.75), 0 0 0 1px rgba(201, 162, 39, 0.12);
}

.focus-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(201, 162, 39, 0.20), transparent 70%);
    bottom: -100px;
    left: -100px;
    z-index: 1;
    pointer-events: none;
}

.focus-card-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: var(--sp-2);
    position: relative;
    z-index: 2;
}

.focus-card-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: var(--navy-900);
    background: linear-gradient(135deg, var(--gold), #e6c15a);
    box-shadow: 0 8px 18px -6px rgba(201, 162, 39, 0.5);
    transition: transform var(--transition);
}

.focus-card:hover .focus-card-icon {
    transform: rotate(-8deg) scale(1.06);
}

.focus-card-title .focus-card-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 0.15rem;
}

.focus-card-title h3 {
    margin: 0;
    font-size: 1.35rem;
    color: var(--white);
}

.focus-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    position: relative;
    z-index: 2;
}

.focus-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--steel-100);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.focus-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity var(--transition), transform var(--transition);
}

.focus-list li:hover {
    transform: translateX(4px);
    border-color: rgba(201, 162, 39, 0.6);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 18px -8px rgba(7, 24, 42, 0.6);
}

.focus-list li:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

.focus-list li:hover i {
    transform: scale(1.15) rotate(360deg);
}

.focus-list li i {
    color: var(--navy-900);
    background: linear-gradient(135deg, var(--gold), #e6c15a);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 0.6rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 0.15rem;
    transition: transform 0.35s ease;
}

/* Our Commitment — navy gradient panel */
.commitment-panel {
    background: linear-gradient(150deg, var(--navy-800) 0%, var(--navy-950) 100%);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: var(--sp-4);
    color: var(--white);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -18px rgba(7, 24, 42, 0.6);
    display: flex;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.commitment-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 162, 39, 0.45);
    box-shadow: 0 28px 50px -20px rgba(7, 24, 42, 0.75), 0 0 0 1px rgba(201, 162, 39, 0.12);
}

.commitment-panel-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.commitment-panel-shape {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(201, 162, 39, 0.22), transparent 70%);
    top: -90px;
    right: -90px;
    z-index: 1;
    pointer-events: none;
}

.commitment-panel-shape::after {
    content: "";
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    border: 1px dashed rgba(201, 162, 39, 0.35);
}

.commitment-panel-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: var(--sp-2);
}

.commitment-panel-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: var(--navy-900);
    background: linear-gradient(135deg, var(--gold), #e6c15a);
    box-shadow: 0 8px 18px -6px rgba(201, 162, 39, 0.5);
}

.commitment-panel-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--white);
}

.commitment-panel p {
    margin: 0 0 var(--sp-3);
    color: var(--steel-200);
    font-size: 1rem;
    line-height: 1.7;
    flex-grow: 1;
}

.commitment-panel .btn {
    align-self: flex-start;
    font-size: 0.9rem;
}

.commitment-panel-foot {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   10. Stats band
   -------------------------------------------------------------------------- */
.stats-band {
    background: var(--navy-900);
    position: relative;
    overflow: hidden;
}

.stats-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 22px, rgba(255, 255, 255, 0.02) 22px, rgba(255, 255, 255, 0.02) 23px);
}

.stat-item {
    text-align: center;
    padding: var(--sp-4) 0;
    position: relative;
}

.stat-item .stat-value {
    font-family: var(--font-head);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--gold-light);
    line-height: 1;
}

.stat-item .stat-label {
    margin-top: 0.45rem;
    color: var(--steel-400);
    font-size: 0.9rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   11. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
}

.testimonial-card .quote-mark {
    font-size: 2.2rem;
    color: var(--gold);
    line-height: 1;
}

.testimonial-card p {
    color: var(--muted);
    font-size: 0.97rem;
    font-style: italic;
    flex-grow: 1;
}

.testimonial-card .stars {
    color: var(--gold);
    font-size: 0.85rem;
}

/* Unearned stars stay visible but muted, so the rating reads clearly */
.testimonial-card .stars .is-empty {
    color: var(--steel-200);
}

.testimonial-card .testimonial-title {
    color: var(--navy-900);
    font-size: 1.02rem;
    margin: 0 0 0.35rem;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-top: 1px solid var(--steel-100);
    padding-top: var(--sp-2);
}

.testimonial-card .author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--navy-800);
    color: var(--white);
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 0.95rem;
}

.author-avatar--img {
    object-fit: cover;
    border: 2px solid var(--gold);
}

.testimonial-card .author-name {
    font-weight: 600;
    color: var(--navy-900);
    font-size: 0.95rem;
}

.testimonial-card .author-role {
    font-size: 0.8rem;
    color: var(--muted);
}

/* Testimonial carousel */
.testimonial-slider {
    position: relative;
    margin-top: var(--sp-4);
}

.testimonial-track {
    display: flex;
    overflow: hidden;
}

.testimonial-slide {
    flex: 0 0 100%;
    padding: 0 var(--sp-1);
    transition: transform var(--transition);
}

.testimonial-arrow {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 5;
    background: var(--navy-800);
    border-color: var(--navy-800);
}

.testimonial-arrow--prev {
    left: -1.25rem;
}

.testimonial-arrow--next {
    right: -1.25rem;
}

.testimonial-arrow:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
}

.testimonial-dot {
    border-color: var(--steel-400);
    background: var(--steel-100);
}

.testimonial-dot:hover:not(.active) {
    border-color: var(--navy-800);
}

.testimonial-dot.active {
    background: var(--gold);
    border-color: var(--gold);
}

.testimonial-dot.hidden {
    display: none;
}

.testimonial-dots {
    margin-top: var(--sp-3);
    position: static;
    transform: none;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
    background:
        linear-gradient(110deg, var(--navy-950) 0%, var(--navy-900) 60%, rgba(26, 64, 102, 0.95) 100%),
        radial-gradient(circle at 85% 40%, rgba(201, 162, 39, 0.18), transparent 55%);
    color: var(--white);
    padding: var(--sp-5) 0;
    text-align: center;
}

.cta-band h2 {
    color: var(--white);
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-2);
}

.cta-band p {
    color: var(--steel-400);
    max-width: 620px;
    margin: 0 auto var(--sp-3);
}

.cta-band .btn {
    margin: 0 0.35rem;
}

.cta-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gold-light);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: var(--sp-2);
}

.cta-phone-link:hover {
    color: var(--white);
}

/* --------------------------------------------------------------------------
   13. Blog
   -------------------------------------------------------------------------- */
.blog-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.blog-card .blog-thumb {
    height: 180px;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
    display: grid;
    place-items: center;
    color: rgba(224, 192, 79, 0.85);
    font-size: 2.8rem;
    position: relative;
}

.blog-card .blog-thumb::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(201, 162, 39, 0.28);
    border-radius: 50%;
    left: -40px;
    top: -40px;
}

.blog-card .blog-body {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Featured image on blog-post.php — centred and edge-to-edge inside the
   article card rather than sitting at its natural size, flush left. */
.blog-featured-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto var(--sp-4);
    border-radius: var(--radius);
    background: var(--steel-50);
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.8rem;
    color: var(--muted);
    margin-bottom: 0.7rem;
}

.blog-meta .blog-category {
    color: var(--gold-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    background: rgba(201, 162, 39, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.blog-card h3 {
    font-size: 1.12rem;
    line-height: 1.35;
    margin-bottom: 0.6rem;
}

.blog-card h3 a:hover {
    color: var(--gold-dark);
}

.blog-card p {
    color: var(--muted);
    font-size: 0.92rem;
    flex-grow: 1;
    margin-bottom: var(--sp-2);
}

.blog-read-more {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--gold-dark);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-read-more i {
    transition: transform var(--transition);
}

.blog-read-more:hover {
    color: var(--navy-800);
}

.blog-read-more:hover i {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   13c. About Us image band (about.php)
   -------------------------------------------------------------------------- */
.about-image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
}

.about-image {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--navy-800);
    box-shadow: var(--shadow-sm);
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.about-image:hover img {
    transform: scale(1.06);
}

.about-image figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 0.85rem 0.7rem;
    background: linear-gradient(180deg, rgba(7, 24, 42, 0) 0%, rgba(7, 24, 42, 0.86) 100%);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Fewer than four photos: keep them wide instead of leaving gaps */
.about-image-grid:has(.about-image:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
}

.about-image-grid:has(.about-image:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.about-image-grid:has(.about-image:only-child) {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}

@media (max-width: 900px) {
    .about-image-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .about-image-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   13b. Gallery (gallery.php)
   -------------------------------------------------------------------------- */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--sp-4);
}

.gallery-filter {
    border: 1px solid var(--steel-200);
    background: var(--white);
    color: var(--ink);
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gallery-filter:hover {
    border-color: var(--gold);
}

.gallery-filter.active {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: var(--white);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

.gallery-item {
    margin: 0;
    border: 1px solid var(--steel-100);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.gallery-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--navy-800);
    cursor: zoom-in;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.gallery-open img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

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

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(10, 37, 64, 0.55);
    color: var(--white);
    font-size: 1.4rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-item:hover .gallery-overlay,
.gallery-open:focus-visible .gallery-overlay {
    opacity: 1;
}

.gallery-caption {
    padding: 0.85rem var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.gallery-caption strong {
    color: var(--navy-900);
}

.gallery-caption span {
    color: var(--muted);
    font-size: 0.84rem;
}

body.gallery-open-active {
    overflow: hidden;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(8, 18, 30, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.gallery-lightbox[hidden] {
    display: none;
}

.gallery-lightbox-inner {
    margin: 0;
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.gallery-lightbox-inner img {
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: #0b1420;
}

.gallery-lightbox-inner figcaption {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9rem;
    text-align: center;
}

.gallery-lightbox-close,
.gallery-lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.22);
}

.gallery-lightbox-close {
    top: 20px;
    right: 20px;
}

.gallery-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .gallery-lightbox-prev { left: 8px; }
    .gallery-lightbox-next { right: 8px; }
}

/* --------------------------------------------------------------------------
   14. Mission / values (About)
   -------------------------------------------------------------------------- */
.value-card {
    text-align: left;
}

.value-card .feature-icon {
    width: 58px;
    height: 58px;
    margin-bottom: var(--sp-2);
    border-radius: var(--radius);
}

.mission-block {
    background: var(--white);
    border: 1px solid var(--steel-100);
    border-radius: var(--radius);
    padding: var(--sp-4);
    border-left: 4px solid var(--gold);
    box-shadow: var(--shadow-sm);
}

.mission-block h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 1.15rem;
}

.mission-block h3 i {
    color: var(--gold-dark);
}

.mission-block p {
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   15. Team / expertise (About)
   -------------------------------------------------------------------------- */
.expertise-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: var(--sp-3);
}

.expertise-card .ex-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background: rgba(201, 162, 39, 0.1);
    color: var(--gold-dark);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    border: 1px solid rgba(201, 162, 39, 0.25);
}

.expertise-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}

.expertise-card p {
    color: var(--muted);
    font-size: 0.93rem;
}

.expertise-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.expertise-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 10px;
    color: var(--steel-200);
    font-size: 0.98rem;
    line-height: 1.5;
    cursor: default;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.expertise-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(224, 192, 79, 0.35);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.expertise-item i {
    color: var(--gold-light);
    margin-top: 0.2rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.expertise-item:hover i {
    color: var(--gold);
    transform: scale(1.2);
}

.expertise-item span {
    flex: 1;
}

.section-cooling-services {
    position: relative;
    background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
}

.section-cooling-services::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 12%, rgba(201, 162, 39, 0.12), transparent 45%),
        radial-gradient(circle at 8% 92%, rgba(26, 64, 102, 0.55), transparent 50%);
}

.section-cooling-services .container {
    position: relative;
    z-index: 1;
}

.services-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: var(--gold-light);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin: 0 auto var(--sp-4);
}

.services-label i {
    opacity: 0.9;
}

.services-label::before,
.services-label::after {
    content: '';
    height: 1px;
    width: 52px;
    background: rgba(224, 192, 79, 0.4);
}

.ct-service-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--sp-2);
}

.ct-service-grid li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: var(--sp-2) var(--sp-3);
    border-radius: 12px;
    color: var(--steel-200);
    font-size: 0.97rem;
    line-height: 1.45;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ct-service-grid li:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(224, 192, 79, 0.35);
}

.ct-service-grid li i {
    color: var(--gold-light);
    flex-shrink: 0;
}

.ct-service-grid li span {
    flex: 1;
}

.methodology-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
    max-width: 980px;
}

.method-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: var(--sp-3);
    border-radius: 12px;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.method-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(224, 192, 79, 0.35);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.method-num {
    flex-shrink: 0;
    font-family: 'Oswald', 'Archivo', var(--font-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gold-light);
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid rgba(224, 192, 79, 0.30);
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.method-card:hover .method-num {
    background: var(--gold-dark);
    color: var(--white);
}

.method-body h3 {
    color: var(--white);
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.method-body p {
    color: var(--steel-200);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.locations-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-4);
    align-items: stretch;
}

.map-wrap {
    border: 1px solid var(--steel-100);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.map-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

.locations-list {
    display: grid;
    gap: var(--sp-2);
    align-content: start;
}

.location-card {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    padding: var(--sp-3);
    border: 1px solid var(--steel-100);
    border-radius: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.location-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold-dark);
    box-shadow: 0 10px 24px rgba(10, 37, 64, 0.10);
}

.lc-icon {
    color: var(--gold-dark);
    font-size: 1.1rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(201, 162, 39, 0.10);
    border-radius: 9px;
    flex-shrink: 0;
}

.location-card h3 {
    margin: 0 0 0.3rem;
    font-size: 1.02rem;
    color: var(--navy-900);
}

.location-card p {
    margin: 0 0 0.15rem;
    color: var(--navy-700);
    font-size: 0.95rem;
    line-height: 1.5;
}

.location-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gold-dark);
    font-weight: 600;
    font-size: 0.88rem;
    margin-top: 0.35rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.location-card a:hover {
    color: var(--navy-900);
}

.why-ncts-section {
    position: relative;
    background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
}

.why-ncts-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 15%, rgba(201, 162, 39, 0.12), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(26, 64, 102, 0.55), transparent 50%);
}

.why-ncts-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--sp-5);
    align-items: center;
    max-width: 1080px;
}

.why-ncts-intro h2 {
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.why-ncts-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.why-promise {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    background: rgba(224, 192, 79, 0.10);
    border: 1px solid rgba(224, 192, 79, 0.25);
    border-radius: 12px;
}

.why-promise i {
    color: var(--gold-light);
    font-size: 1.5rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.why-promise strong {
    display: block;
    color: var(--white);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.why-promise p {
    color: var(--steel-200);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.why-ncts-list {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: var(--sp-4);
}

.why-ncts-list h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.why-ncts-list h3 i {
    color: var(--gold-light);
}

.why-ncts-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}

.why-ncts-list li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    color: var(--steel-200);
    font-size: 0.97rem;
    line-height: 1.5;
    transition: transform 0.2s ease, color 0.2s ease;
}

.why-ncts-list li:hover {
    transform: translateX(4px);
    color: var(--white);
}

.why-ncts-list li i {
    color: var(--gold-light);
    margin-top: 0.22rem;
}

/* --------------------------------------------------------------------------
   16. Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--sp-4);
    align-items: start;
}

.contact-info-card {
    display: flex;
    gap: 1rem;
    padding: var(--sp-3);
}

/* The text half of the card is a flex item, so it resolves min-width to auto
   and cannot shrink below its longest unbreakable run. On a 320px screen the
   email address and the opening-hours times are both wider than the card, so
   the grid column overflowed and the page scrolled sideways. */
.contact-info-card > div:not(.ci-icon),
.contact-info-card .ci-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-info-card .ci-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background: rgba(201, 162, 39, 0.1);
    color: var(--gold-dark);
    border: 1px solid rgba(201, 162, 39, 0.25);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

.contact-info-card h3 {
    font-size: 1.02rem;
    margin-bottom: 0.25rem;
}

.contact-info-card p,
.contact-info-card a {
    color: var(--muted);
    font-size: 0.92rem;
    display: block;
}

.contact-info-card a:hover {
    color: var(--gold-dark);
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--steel-200);
    font-size: 0.9rem;
    color: var(--muted);
}

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

.hours-list strong {
    color: var(--navy-800);
}

.contact-form-wrap {
    background: var(--white);
    border: 1px solid var(--steel-100);
    border-radius: var(--radius);
    padding: var(--sp-4);
    box-shadow: var(--shadow-md);
}

.contact-form-wrap h2 {
    font-size: 1.45rem;
    margin-bottom: var(--sp-1);
}

.form-intro {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: var(--sp-3);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}

.form-group {
    margin-bottom: var(--sp-2);
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--navy-800);
    margin-bottom: 0.4rem;
}

.form-group label .req {
    color: var(--gold-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.78rem 0.9rem;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.94rem;
    color: var(--ink);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}

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

.form-alert {
    display: none;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    margin-bottom: var(--sp-2);
}

.form-alert.success {
    display: block;
    background: rgba(30, 132, 73, 0.1);
    border: 1px solid rgba(30, 132, 73, 0.45);
    color: var(--success);
}

.form-alert.error {
    display: block;
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.45);
    color: var(--error);
}

.form-error-msg {
    display: none;
    color: var(--error);
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.form-group.invalid .form-error-msg {
    display: block;
}

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

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--navy-950);
    color: var(--steel-400);
    padding-top: var(--sp-5);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
}

/* Grid items resolve min-width to auto, which floors each track at the item's
   min-content width. Combined with the footer brand's intrinsic width that
   minimum was larger than the container between roughly 640px and 1020px, so
   the grid pushed past the viewport and the whole page scrolled sideways.
   A 0 minimum lets the fr tracks shrink to the width actually available. */
.footer-grid > * {
    min-width: 0;
}

.footer-col h4 {
    color: var(--white);
    font-size: 1.05rem;
    margin-bottom: var(--sp-2);
    position: relative;
    padding-bottom: 0.6rem;
}

.footer-col h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background: var(--gold);
}

.footer-about p {
    font-size: 0.92rem;
    margin: var(--sp-2) 0;
}

/* The uploaded logo has an opaque white background, which shows as a white
   box on the dark footer. The footer uses a transparent-background crop of
   just the NCTS mark instead. */
.brand-footer {
    --logo-mark: 96px;
    --brand-max: 100%;
}

.brand-footer .brand-mark {
    height: auto;
    aspect-ratio: 272 / 80;
}

.brand-footer .brand-logo {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    filter: brightness(0) invert(1);
}

.brand-footer .brand-logo {
    border: none;
}

.brand-footer .brand-text strong {
    color: var(--white);
    font-size: 1rem;
}

/* The header brand keeps its two lines on one line each so they read as an
   aligned pair. The footer brand sits in a column narrower than that nowrap
   text at every breakpoint, so the name bled into the "Company" column. Let
   both footer lines wrap instead — .brand-text already carries min-width:0,
   so the flex row shrinks and the text reflows inside the column. */
.brand-footer .brand-text strong,
.brand-footer .brand-text span {
    white-space: normal;
}

.brand-footer .brand-text span {
    font-size: 0.62rem;
}

.brand-footer .brand-text span {
    color: var(--gold-light);
}

.footer-social {
    display: flex;
    gap: 0.6rem;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: var(--steel-400);
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--transition);
}

.footer-social a:hover {
    background: var(--gold);
    color: var(--navy-900);
    border-color: var(--gold);
}

.footer-links li {
    margin-bottom: 0.55rem;
}

.footer-links a {
    color: var(--steel-400);
    font-size: 0.92rem;
}

.footer-links a:hover {
    color: var(--gold-light);
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
}

/* These are flex items, so they resolve min-width to auto and refuse to grow
   smaller than their longest unbreakable run. The email address is one such
   run and is wider than the contact column between 1024px and 1200px, which
   pushed it past the container and made the page scroll sideways. */
.footer-contact-list li > span,
.footer-contact-list li > a {
    min-width: 0;
    overflow-wrap: anywhere;
}

.footer-contact-list i {
    color: var(--gold);
    margin-top: 0.2rem;
}

.footer-contact-list a {
    color: var(--steel-400);
}

.footer-contact-list a:hover {
    color: var(--gold-light);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--sp-2) 0;
    font-size: 0.84rem;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.footer-bottom-inner p {
    color: var(--steel-600);
}

/* Design credit — the agency name is the only clickable part. */
.footer-credit a,
.footer-credit span {
    color: var(--steel-400);
    font-family: var(--font-head);
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color var(--transition);
}

.footer-credit a:hover {
    color: var(--gold-light);
}

/* --------------------------------------------------------------------------
   18. Back to top
   -------------------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--navy-800);
    color: var(--gold-light);
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 162, 39, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all var(--transition);
    z-index: 90;
    box-shadow: var(--shadow-md);
}

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

.back-to-top:hover {
    background: var(--gold);
    color: var(--navy-900);
}

/* WhatsApp chat button */
.wa-chat {
    position: fixed;
    right: 1.2rem;
    bottom: 4.4rem;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: var(--white);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
    z-index: 90;
    text-decoration: none;
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.wa-chat:hover {
    background: #1ebe5b;
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(37, 211, 102, 0.55);
}

.wa-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.6);
    animation: wa-pulse 2s ease-out infinite;
}

@keyframes wa-pulse {
    0%   { transform: scale(1); opacity: 0.7; }
    80%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   19. Process steps (Services)
   -------------------------------------------------------------------------- */
.step-num {
    width: 44px;
    height: 44px;
    margin: 0 auto var(--sp-2);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy-900);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 6px 16px rgba(201, 162, 39, 0.3);
}

/* --------------------------------------------------------------------------
   19. Services page — trust strip
   -------------------------------------------------------------------------- */
.trust-strip {
    background: var(--navy-900);
    border-top: 1px solid rgba(201, 162, 39, 0.30);
    border-bottom: 1px solid rgba(10, 37, 64, 0.9);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: var(--sp-2) 0;
    color: var(--white);
}

.trust-item i {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.14);
    border: 1px solid rgba(224, 192, 79, 0.4);
    color: var(--gold-light);
    font-size: 1.1rem;
    transition: transform var(--transition), background var(--transition), color var(--transition);
}

.trust-item:hover i {
    transform: translateY(-3px);
    background: var(--gold);
    color: var(--navy-900);
}

.trust-item strong {
    display: block;
    font-family: var(--font-head);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.trust-item span {
    display: block;
    color: var(--steel-400);
    font-size: 0.85rem;
}

/* Industry pills — hover depth */
.industry-list li {
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.industry-list li:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(10, 37, 64, 0.10);
}

/* Methodology cards — fill height in the two-column grid */
.method-card {
    height: 100%;
}

/* --------------------------------------------------------------------------
   20. Brand logo carousel (home)
   -------------------------------------------------------------------------- */
.logo-strip {
    background: var(--white);
    border-bottom: 1px solid var(--steel-100);
    padding: var(--sp-4) 0 var(--sp-5);
    overflow: hidden;
}

.logo-strip-head {
    margin-bottom: var(--sp-4);
}

.logo-strip-head h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}

.logo-marquee {
    position: relative;
    overflow: hidden;
    cursor: grab;
    /* Keep vertical page scrolling while horizontal drags are captured */
    touch-action: pan-y;
    /* Edge fades that sit above the scrolling items */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.logo-marquee.is-dragging {
    cursor: grabbing;
}

.logo-marquee.is-dragging .logo-chip a {
    pointer-events: none;
}

.logo-marquee-track {
    display: flex;
    will-change: transform;
}

.logo-marquee-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    /* Matches the column gap so repeated groups join without a visible seam */
    padding-right: var(--sp-4);
    list-style: none;
    flex-shrink: 0;
}

/* Once the script takes over, the track scrolls in one continuous line */
.logo-marquee--ready .logo-marquee-group {
    flex-wrap: nowrap;
}

.logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    /* Generous padding keeps every logo optically the same size in the row */
    padding: 0.8rem 1.45rem;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius);
    background: var(--white);
    white-space: nowrap;
    transition: border-color var(--transition), background var(--transition),
                box-shadow var(--transition), transform var(--transition);
}

.logo-chip i {
    color: var(--gold);
    font-size: 0.9rem;
}

/* Uploaded brand logo — shown in full colour so the artwork stays legible.
   mix-blend-mode removes the opaque white box around logo files that were
   saved as PNGs without transparency. */
.logo-chip img {
    display: block;
    height: 48px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform var(--transition);
}

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

.logo-chip span,
.logo-chip a {
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy-800);
}

.logo-chip:hover {
    background: var(--white);
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.logo-chip a:hover {
    color: var(--gold-dark);
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee--ready .logo-marquee-group {
        flex-wrap: wrap;
    }

    .logo-marquee--ready .logo-marquee-track {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   21. Quick enquiry popup
   A two-column dialog: navy pitch panel beside the form. Below 860px it
   collapses to a single scrolling column (see responsive.css). The
   responsive-critical parts (full-height sheet, stacked layout) live in
   responsive.css so they sit with the other breakpoint overrides.
   -------------------------------------------------------------------------- */
body.enquiry-popup-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

.enquiry-popup {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.enquiry-popup[hidden] {
    display: none;
}

.enquiry-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 24, 43, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.enquiry-popup.is-open .enquiry-popup-backdrop {
    opacity: 1;
}

.enquiry-popup-card {
    position: relative;
    width: 100%;
    max-width: 940px;
    max-height: calc(100vh - var(--sp-5));
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.enquiry-popup.is-open .enquiry-popup-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* The dialog takes focus on open so screen readers announce it; the ring is
   only drawn for keyboard users, not on the mouse-driven auto-open. */
.enquiry-popup-card:focus {
    outline: none;
}

.enquiry-popup-card:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: -3px;
}

.enquiry-popup.is-closing .enquiry-popup-backdrop {
    opacity: 0;
}

.enquiry-popup.is-closing .enquiry-popup-card {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
}

.enquiry-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--steel-200);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--navy-800);
    font-size: 1rem;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.enquiry-popup-close:hover {
    background: var(--navy-800);
    color: var(--gold-light);
    transform: rotate(90deg);
}

/* ---- Pitch panel ---- */
.enquiry-popup-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 2.4rem 2rem;
    background: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-950) 100%);
    color: var(--steel-200);
    overflow: hidden;
}

/* Faint gold arc, so the dark panel is not a flat block. */
.enquiry-popup-aside::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 40px solid rgba(201, 162, 39, 0.1);
    pointer-events: none;
}

.enquiry-popup-aside > * {
    position: relative;
    z-index: 1;
}

.ep-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(201, 162, 39, 0.5);
    border-radius: 100px;
    background: rgba(201, 162, 39, 0.12);
    color: var(--gold-light);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ep-title {
    color: var(--white);
    font-size: 1.7rem;
    line-height: 1.2;
}

.ep-sub {
    color: var(--steel-400);
    font-size: 0.92rem;
    line-height: 1.6;
}

.ep-points {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.ep-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--steel-200);
}

.ep-points i {
    margin-top: 0.3rem;
    color: var(--gold);
    font-size: 0.8rem;
}

.ep-direct {
    display: grid;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ep-direct-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    margin: 0 -0.6rem;
    border-radius: var(--radius-sm);
    color: var(--steel-200);
    transition: background var(--transition), color var(--transition);
}

.ep-direct-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--white);
}

.ep-direct-item > i {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(201, 162, 39, 0.16);
    color: var(--gold-light);
    font-size: 0.82rem;
}

.ep-direct-item span {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.ep-direct-item strong {
    color: var(--white);
    font-family: var(--font-head);
    font-size: 0.88rem;
}

.ep-direct-item small {
    color: var(--steel-400);
    font-size: 0.72rem;
}

/* ---- Form panel ---- */
.enquiry-popup-main {
    padding: 2.2rem 2rem 1.8rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ep-form .form-row {
    gap: var(--sp-2);
}

.ep-form .form-group {
    margin-bottom: 0.85rem;
}

.ep-form textarea {
    min-height: 84px;
}

.ep-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ep-submit {
    margin-top: 0.3rem;
    padding: 0.85rem 1.8rem;
}

.ep-submit.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

.ep-submit.is-loading i {
    animation: ep-spin 0.9s linear infinite;
}

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

.ep-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    color: var(--muted);
    font-size: 0.76rem;
    text-align: center;
}

.ep-note i {
    font-size: 0.7rem;
}

.ep-alert {
    display: none;
}

.ep-alert.success,
.ep-alert.error {
    display: block;
}

/* ---- Success state ---- */
.ep-done {
    padding: 1.5rem 0;
    text-align: center;
}

.ep-done[hidden] {
    display: none;
}

.ep-done-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: rgba(30, 132, 73, 0.12);
    color: var(--success);
    font-size: 1.6rem;
}

.ep-done h3 {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.ep-done p {
    color: var(--muted);
    font-size: 0.92rem;
    max-width: 38ch;
    margin: 0 auto 1.4rem;
}

.ep-done-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .enquiry-popup-backdrop,
    .enquiry-popup-card,
    .ep-submit.is-loading i {
        transition: none;
        animation: none;
    }
}