/* =====================================================================
  STRUCPRO LIMITED — Main Stylesheet
   Mobile-first, no external framework dependency.
   ===================================================================== */

:root {
    --color-navy: #0f2233;
    --color-navy-light: #17324a;
    --color-sky: #7ab8e0;
    --color-amber: #e8961e;
    --color-amber-dark: #c97c0f;
    --color-steel: #4a5b68;
    --color-bg: #f7f7f5;
    --color-white: #ffffff;
    --color-text: #23303a;
    --color-text-light: #5c6b76;
    --color-border: #e2e5e8;

    /* Secondary accent — a muted clay/terracotta, used sparingly against
       the navy + amber pair to add depth (links, focus rings, small
       highlight details) without competing with the primary CTA color. */
    --color-accent: #b85c3e;
    --color-accent-dark: #9a492f;
    --color-accent-soft: #f7e9e3;

    --font-heading: 'Oswald', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --radius: 6px;
    --shadow-sm: 0 1px 3px rgba(15, 34, 51, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 34, 51, 0.12);
    --shadow-lg: 0 16px 40px rgba(15, 34, 51, 0.18);
    --container-width: 1180px;

    /* ---------- Type scale (major third-ish, 1.2 ratio) ---------- */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-md: 1.125rem;   /* 18px */
    --text-lg: 1.35rem;    /* ~22px */
    --text-xl: 1.7rem;     /* ~27px */
    --text-2xl: 2.1rem;    /* ~34px */
    --text-3xl: 2.75rem;   /* ~44px */

    /* ---------- Spacing scale (4px base unit) ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;

    /* ---------- Motion ---------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 0.15s;
    --duration-base: 0.25s;
    --duration-slow: 0.6s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; line-height: 1.2; }
p { margin: 0 0 1rem; }

/* Consistent, visible focus state for keyboard users across every
   interactive element — uses the secondary accent so it's distinct
   from hover states (which lean amber/navy). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-amber);
    color: var(--color-navy);
    padding: 0.75rem 1rem;
    z-index: 1000;
}
.skip-link:focus { left: 0; }

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

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
}
.btn--primary { background: var(--color-amber); color: var(--color-navy); }
.btn--primary:hover { background: var(--color-amber-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--primary:active { background: var(--color-amber-dark); transform: translateY(0) scale(0.97); box-shadow: var(--shadow-sm); }
.btn--secondary { background: var(--color-navy); color: var(--color-white); }
.btn--secondary:hover { background: var(--color-navy-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--secondary:active { background: var(--color-navy-light); transform: translateY(0) scale(0.97); box-shadow: var(--shadow-sm); }
.btn--outline { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.7); }
.btn--outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); border-color: var(--color-white); }
.btn--outline:active { transform: translateY(0) scale(0.97); background: rgba(255,255,255,0.18); }
.btn--lg { padding: 1rem 2rem; font-size: 0.95rem; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---------- Alerts ---------- */
.alert {
    margin-top: 1rem;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius);
    background: #e6f6ec;
    color: #1a6b3c;
    border: 1px solid #b7e5c6;
    font-size: 0.95rem;
}

/* ---------- Topbar ---------- */
.topbar {
    background: var(--color-navy);
    color: rgba(255,255,255,0.85);
    font-size: 0.8rem;
    max-height: 44px;
    overflow: hidden;
    transition:
        max-height var(--duration-base) var(--ease-out),
        opacity var(--duration-base) var(--ease-out);
}
.topbar__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.25rem;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.topbar__contact a { margin-right: 1rem; transition: color var(--duration-fast) var(--ease-out); }
.topbar__contact a:hover { color: var(--color-amber); }
.topbar__meta { opacity: 0.75; }

/* Header shrinks as the page scrolls: the topbar collapses away and
   the navbar's own padding/logo size step down, so the sticky header
   takes up progressively less vertical real estate. */
.site-header.is-compact .topbar {
    max-height: 0;
    opacity: 0;
}

/* ---------- Navbar ---------- */
/* --nav-scale is driven by main.js as a continuous 1 -> 0.8 value tied
   to scroll position (see "Gradual nav shrink on scroll" below), so the
   whole nav lockup eases smaller the further the visitor scrolls,
   rather than collapsing into a hamburger menu. */
.site-header { position: sticky; top: 0; z-index: 100; --nav-scale: 1; }
.navbar {
    width: 100%;
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out);
}
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(0.55rem * var(--nav-scale)) calc(1.25rem * var(--nav-scale));
    position: relative;
    transition: padding var(--duration-fast) linear;
}
.navbar__brand { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; }
.navbar__logo {
    transition: font-size var(--duration-base) var(--ease-out);
}

.site__logo img {
    display: block;
    height: calc(26px * var(--nav-scale));
    width: auto;
    object-fit: contain;
    transition: height var(--duration-fast) linear;
}
@media (max-width: 768px) {
    .site_logo {
        width: 120px;
    }
}
.logo {
    width: 200px;
    height: auto;
}
/* Site header brand lockup — logo on the left, with the company name
   and slogan stacked to its right (name on top, slogan beneath it). */
.navbar__brand--site {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.site__logo-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.navbar__brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}
.navbar__wordmark {
    font-family: var(--font-heading);
    font-size: calc(1.4rem * var(--nav-scale));
    letter-spacing: 0.03em;
    color: var(--color-navy);
    transition: font-size var(--duration-fast) linear;
}
.navbar__wordmark strong { color: var(--color-amber-dark); }

/* Company slogan under the wordmark — italic, light blue, and smaller
   than the company name so it stays a supporting detail in the brand
   lockup, positioned to the right of the logo along with the name. */
.navbar__slogan {
    font-style: italic;
    font-size: calc(0.6rem * var(--nav-scale)); /* small, smaller than the wordmark */
    line-height: 1.2;
    color: var(--color-sky);
    white-space: nowrap;
    transition: font-size var(--duration-fast) linear;
}

/* Compact state (added by main.js once the page scrolls past a small
   threshold): drops a shadow under the navbar, on top of the topbar
   already collapsing above. The logo/wordmark/menu sizing itself is
   handled continuously by --nav-scale (set inline by main.js as the
   visitor scrolls) rather than by a single compact/non-compact step. */
.site-header.is-compact .navbar { box-shadow: var(--shadow-md); }

.navbar__toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}
.navbar__toggle span {
    display: block;
    height: 2px;
    background: var(--color-navy);
    border-radius: 2px;
    transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
    transform-origin: center;
}
/* Morphs the three bars into an "X" once the menu is open. */
.navbar__toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar__toggle.is-active span:nth-child(2) { opacity: 0; }
.navbar__toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.navbar__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    box-shadow: var(--shadow-md);
    display: none;
    padding: 0.5rem 1.25rem 1rem;
}
.navbar__menu.is-open { display: flex; }
.navbar__menu-item--cta { display: none; }
.navbar__menu.is-open .navbar__menu-item--cta { display: block; margin-top: 0.75rem; }
.navbar__menu-cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    text-align: center;
}
.navbar__menu li a {
    display: block;
    padding: 0.75rem 0;
    font-weight: 500;
    font-size: calc(1rem * var(--nav-scale));
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    transition: color var(--duration-fast) var(--ease-out), font-size var(--duration-fast) linear;
}
.navbar__menu li a.is-active,
.navbar__menu li a:hover { color: var(--color-amber-dark); }

/* Animated underline sweep — only meaningful once the menu goes
   horizontal at the desktop breakpoint (see media query below). */
.navbar__menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: var(--color-amber);
    transition: width var(--duration-base) var(--ease-out);
}
.navbar__menu li a:hover::after,
.navbar__menu li a.is-active::after { width: 100%; }
.navbar__cta {
    display: none;
    transform: scale(var(--nav-scale));
    transform-origin: right center;
    transition: transform var(--duration-fast) linear;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    color: var(--color-white);
    padding: var(--space-9) 0 var(--space-8);
    overflow: hidden;
}
/* Parallax background layer — kept as a separate absolutely-positioned
   element (rather than painted directly on .hero) so JS can translate
   it independently of the content on scroll for a subtle depth effect. */
.hero__bg {
    position: absolute;
    inset: -10% 0 -10% 0; /* slight overscan so the parallax shift never reveals an edge */
    background:
        linear-gradient(135deg, rgba(15,34,51,0.92), rgba(15,34,51,0.75)),
        repeating-linear-gradient(45deg, #1c3a52 0, #1c3a52 2px, #17324a 2px, #17324a 40px);
    will-change: transform;
}
.hero__inner { position: relative; max-width: 720px; }
.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-sm);
    color: var(--color-amber);
    font-weight: 600;
    margin-bottom: var(--space-4);
}
.hero__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}
.hero__subtitle {
    font-size: var(--text-md);
    color: rgba(255,255,255,0.85);
    margin-bottom: var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.25rem;
    margin-top: 1.75rem;
}
.hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255,255,255,0.88);
    font-size: 0.76rem;
    font-weight: 600;
}
.hero__badges .icon {
    width: 17px;
    height: 17px;
    color: var(--color-amber);
}

/* Base size for every <svg class="icon"><use ...></use></svg> sprite icon
   on the site; specific contexts (e.g. .hero__badges, .value-card__icon)
   override width/height/color as needed. */
.icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
}

/* ---------- Page-load entrance animation ---------- */
/* Hero content pieces fade + rise into place on load, staggered so the
   page feels considered rather than everything popping in at once.
   `.is-loaded` is added to <body> by main.js once the DOM is ready. */
.hero__eyebrow,
.hero__title,
.hero__subtitle,
.hero__actions,
.hero__badges {
    opacity: 0;
    transform: translateY(16px);
    
}
body.is-loaded .hero__eyebrow,
body.is-loaded .hero__title,
body.is-loaded .hero__subtitle,
body.is-loaded .hero__actions,
body.is-loaded .hero__badges {
    animation: hero-rise 0.7s var(--ease-out) forwards;
}
body.is-loaded .hero__eyebrow  { animation-delay: 0.05s; }
body.is-loaded .hero__title    { animation-delay: 0.15s; }
body.is-loaded .hero__subtitle { animation-delay: 0.25s; }
body.is-loaded .hero__actions  { animation-delay: 0.35s; }
body.is-loaded .hero__badges   { animation-delay: 0.45s; }

@keyframes hero-rise {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__eyebrow, .hero__title, .hero__subtitle, .hero__actions, .hero__badges {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
    .hero__bg { transform: none !important; }
}

/* ---------- Section shared styles ---------- */
section { padding: var(--space-8) 0; }
.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-amber-dark);
    margin-bottom: var(--space-2);
}
.section-eyebrow--center { text-align: center; }
.section-title { font-size: var(--text-xl); color: var(--color-navy); margin-bottom: var(--space-4); }
.section-title--center { text-align: center; }
.section-subtitle {
    max-width: 620px;
    margin: 0 auto var(--space-7);
    text-align: center;
    color: var(--color-text-light);
}

/* ---------- Overview ---------- */
.overview { background: var(--color-white); }
.overview__grid { display: grid; gap: var(--space-6); align-items: center; }
.overview__media-block {
    width: 95%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-navy), var(--color-steel));
    background-image:
        linear-gradient(135deg, rgba(15,34,51,0.85), rgba(74,91,104,0.75)),
        repeating-linear-gradient(-45deg, #2a4a5f 0, #2a4a5f 2px, transparent 2px, transparent 30px);
    transition: transform var(--duration-slow) var(--ease-out);
}
.overview__media-block:hover { transform: scale(1.015); }

/* Worker image inside the overview media block (slides in from left) */
.overview__worker-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;

    opacity: 0;
    transform: translateX(-48px);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

/* When the page load transition is enabled, animate the worker image in */
body.is-loaded .overview__worker-image {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .overview__worker-image {
        opacity: 1;
        transform: none;
        transition: none !important;
    }
}

/* ---------- Stats ---------- */
.stats { background: var(--color-navy); color: var(--color-white); padding: var(--space-7) 0; }
.stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    text-align: center;
}
.stats__item { transition: transform var(--duration-base) var(--ease-out); }
.stats__item:hover { transform: translateY(-2px); }
.stats__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-amber);
}
.stats__label {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.7);
    margin-top: var(--space-1);
}

/* ---------- Services ---------- */
.services__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}
.service-card__image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--color-accent-soft);
}
.service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-base) var(--ease-out);
}
.service-card:hover .service-card__image img { transform: scale(1.06); }
.service-card__body { padding: var(--space-6); }
.service-card__title { font-size: var(--text-md); color: var(--color-navy); margin-bottom: var(--space-2); }
.service-card__desc { color: var(--color-text-light); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.service-card__link {
    display: inline-block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-amber-dark);
    transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.service-card__link:hover { transform: translateX(4px); color: var(--color-accent); }

/* ---------- Core Values (About page) ---------- */
.values-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    margin-top: var(--space-7);
}
.value-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}
.value-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}
.value-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    margin-bottom: var(--space-4);
}
.value-card__icon .icon {
    width: 24px;
    height: 24px;
    color: var(--color-amber-dark);
}
.value-card__title { font-size: var(--text-md); color: var(--color-navy); margin-bottom: var(--space-2); }
.value-card__desc { color: var(--color-text-light); font-size: var(--text-sm); }

/* ---------- Projects ---------- */
.projects { background: var(--color-white); }
.projects__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}
.project-card {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    background: var(--color-white);
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.project-card__image {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--color-steel), var(--color-navy-light));
    transition: transform var(--duration-slow) var(--ease-out);
}
.project-card:hover .project-card__image { transform: scale(1.06); }
.project-card__image--1 { background: linear-gradient(135deg, #3b5a70, #17324a); }
.project-card__image--2 { background: linear-gradient(135deg, #8a6b2f, #4a3a17); }
.project-card__image--3 { background: linear-gradient(135deg, #5c6b76, #23303a); }
.project-card__body { padding: var(--space-5); }
.project-card__tag {
    display: inline-block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--color-amber-dark);
    background: #fdf1de;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    margin-bottom: var(--space-2);
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.project-card:hover .project-card__tag { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.project-card__title { font-size: var(--text-md); color: var(--color-navy); margin-bottom: var(--space-2); }
.project-card__desc { font-size: var(--text-sm); color: var(--color-text-light); margin-bottom: 0; }

/* ---------- Certifications ---------- */
.certifications { background: var(--color-bg); text-align: center; }
.certifications__title { font-size: var(--text-lg); color: var(--color-navy); margin-bottom: var(--space-5); }
.certifications__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-light);
    font-weight: 500;
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--color-white); }
.testimonials__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
.testimonial-card {
    margin: 0;
    background: var(--color-bg);
    border-left: 4px solid var(--color-amber);
    border-radius: var(--radius);
    padding: var(--space-5);
    transition:
        transform var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}
.testimonial-card:hover {
    transform: translateY(-3px);
    border-left-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}
.testimonial-card__quote { font-style: italic; color: var(--color-text); margin-bottom: var(--space-4); }
.testimonial-card__author { display: flex; flex-direction: column; }
.testimonial-card__name { font-weight: 700; color: var(--color-navy); font-size: var(--text-sm); }
.testimonial-card__role { font-size: var(--text-xs); color: var(--color-text-light); }

/* ---------- Contact ---------- */
.contact { background: var(--color-navy); color: var(--color-white); }
.contact .section-eyebrow {
    color: var(--color-amber);

    /* Make the eyebrow behave like a full-width label and
       distribute words across the container. */
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}

.contact .section-title { color: var(--color-white); }
.contact p { color: rgba(255,255,255,0.8); }
.contact__grid { display: grid; gap: var(--space-7); }
.contact__details { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-md); }
.contact__details a { transition: color var(--duration-fast) var(--ease-out); }
.contact__details a:hover { color: var(--color-amber); }

.contact__form {
    background: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}
.form-group { margin-bottom: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.form-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-navy);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    background: var(--color-bg);
    color: var(--color-text);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-amber);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(232, 150, 30, 0.18);
}
  
.messages {
    margin-bottom: 1.5rem;
}

.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.alert-success {
    border: 1px solid rgba(40, 167, 69, 0.35);
}

.alert-warning {
    border: 1px solid rgba(255, 193, 7, 0.35);
}

.form-error {
    display: block;
    margin-top: 0.35rem;
}

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


/* ---------- Footer ---------- */
.site-footer { background: #0a1720; color: rgba(255,255,255,0.75); padding-top: var(--space-8); }
.footer__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}
.navbar__brand--footer .navbar__wordmark { color: var(--color-white); }
.navbar__brand--footer .navbar__wordmark strong { color: var(--color-amber); }
/* Match the footer logo to the navbar logo's size. The footer sits
   outside .site-header (no --nav-scale to inherit), and by the time a
   visitor has scrolled far enough to see the footer, the navbar logo
   has already eased down to its smallest scroll size (26px * the 0.8
   floor set in main.js ≈ 21px) — so we pin the footer logo to that
   same size rather than the navbar's size at the top of the page. */
.navbar__brand--footer .navbar__logo img {
    height: 21px;
    width: auto;
}
.footer__tagline { margin-top: var(--space-4); font-size: var(--text-sm); }
 .footer__social { margin-top: var(--space-5); }
.footer__social-label {
    display: block;
    margin-bottom: var(--space-3);
    color: rgba(255,255,255,0.78);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.footer__social-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.footer__social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.55rem 0.8rem;
    border: 2px solid var(--color-amber);
    border-radius: 10px;
    color: var(--color-amber);
    background: transparent;
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 800;
    line-height: 1;
    transition: color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}
.footer__social-list a:hover,
.footer__social-list a:focus-visible {
    color: var(--color-navy);
    background: var(--color-amber);
    border-color: var(--color-amber);
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(232, 150, 30, 0.22);
}
.footer__social-list .icon { width: 18px; height: 18px; color: currentColor; flex: 0 0 auto; }

.channel-card__social { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: var(--space-3); }
.channel-card__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.55rem 0.8rem;
    border: 2px solid var(--color-amber);
    border-radius: 10px;
    background: transparent;
    color: var(--color-amber);
    text-decoration: none;
    font-weight: 800;
    font-size: var(--text-xs);
    line-height: 1;
    transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.channel-card__social a:hover,
.channel-card__social a:focus-visible {
    color: var(--color-navy);
    background: var(--color-amber);
    border-color: var(--color-amber);
    transform: translateY(-2px);
}
.channel-card__social .icon { width: 17px; height: 17px; flex: 0 0 auto; }

.footer__links--contact .icon {
    color: var(--color-amber);
}
.footer__heading {
    color: var(--color-white);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); }
.footer__links a {
    position: relative;
    display: inline-block;
    transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-amber); transform: translateX(3px); }
.footer__links--contact li { color: rgba(255,255,255,0.7); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--space-7); padding: var(--space-4) 0; }
.footer__bottom-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.5);
}

/* =====================================================================
   Responsive breakpoints — mobile-first, enhancing upward
   ===================================================================== */

@media (min-width: 640px) {
    .hero__title { font-size: var(--text-3xl); }
    .stats__grid { grid-template-columns: repeat(4, 1fr); }
    .services__grid { grid-template-columns: repeat(2, 1fr); }
    .projects__grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .why-choose-us__grid { grid-template-columns: repeat(2, 1fr); }
    .form-row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px) {
    .navbar__toggle { display: none; }
    .navbar__menu {
        position: static;
        display: flex !important;
        flex-direction: row;
        box-shadow: none;
        padding: 0;
        gap: var(--space-6);
        background: transparent;
    }
    .navbar__menu-item--cta { display: none; }
    .navbar__menu li a { border-bottom: none; padding: var(--space-2) 0; }
    .navbar__cta { display: inline-block; }

    .hero { padding: var(--space-10) 0 var(--space-9); }
    .hero__title { font-size: 3.35rem; }

    .overview__grid { grid-template-columns: 1fr 1.1fr; }
    .services__grid { grid-template-columns: repeat(4, 1fr); }
    .projects__grid { grid-template-columns: repeat(3, 1fr); }
    .values-grid { grid-template-columns: repeat(3, 1fr); }
    .why-choose-us__grid { grid-template-columns: repeat(3, 1fr); }
    .testimonials__grid { grid-template-columns: repeat(3, 1fr); }
    .contact__grid { grid-template-columns: 1fr 1.2fr; }
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
    .footer__bottom-inner { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
    section { padding: var(--space-9) 0; }
}

/* =====================================================================
   Gradual nav shrink on scroll
   Rather than collapsing the horizontal Home/Services/About/Projects/
   Contact menu into a hamburger as the visitor scrolls, main.js sets
   the --nav-scale custom property on .site-header continuously (from
   1 down to a floor of ~0.8) as the page scrolls down. Every sized
   piece of the brand lockup and menu above reads from that variable,
   so the whole nav bar eases smaller in one smooth, reversible motion
   instead of switching layouts. Nothing further is needed here — see
   the --nav-scale-driven rules above and the scroll handler in main.js.
   ===================================================================== */

/* =====================================================================
   Contact Page — mirrors dashboard/home page design tokens
   (colors, typography, spacing, and card/form styling reused as-is)
   ===================================================================== */

/* ---------- Page header (top content area) ---------- */
.page-header {
    background:
        linear-gradient(135deg, rgba(15,34,51,0.94), rgba(15,34,51,0.8)),
        repeating-linear-gradient(45deg, #1c3a52 0, #1c3a52 2px, #17324a 2px, #17324a 40px);
    color: var(--color-white);
    padding: var(--space-8) 0 var(--space-7);
    text-align: center;
}
.page-header__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}
.page-header__subtitle {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(255,255,255,0.82);
    font-size: var(--text-base);
}
/* Reuses the same load-in rise as the home hero so every page feels
   consistent on first paint. */
.page-header .hero__eyebrow,
.page-header__title,
.page-header__subtitle {
    opacity: 0;
    transform: translateY(16px);
}
body.is-loaded .page-header .hero__eyebrow,
body.is-loaded .page-header__title,
body.is-loaded .page-header__subtitle {
    animation: hero-rise 0.7s var(--ease-out) forwards;
}
body.is-loaded .page-header .hero__eyebrow { animation-delay: 0.05s; }
body.is-loaded .page-header__title        { animation-delay: 0.15s; }
body.is-loaded .page-header__subtitle     { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
    .page-header .hero__eyebrow, .page-header__title, .page-header__subtitle {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}

/* ---------- Contact page layout ---------- */
.contact-page { background: var(--color-bg); }
.contact-page__grid {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: start;
}

/* ---------- Alternative channels (visually distinct from the form) ---------- */
.channels {
    background: var(--color-navy);
    color: var(--color-white);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
}
.channels .section-eyebrow { color: var(--color-amber); }
.channels .section-title { color: var(--color-white); font-size: var(--text-lg); }
.channels__intro { color: rgba(255,255,255,0.75); font-size: var(--text-sm); margin-bottom: var(--space-6); }

.channels__list { display: flex; flex-direction: column; gap: var(--space-4); }
.channel-card {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-4);
    transition:
        background var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}
.channel-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
    border-color: var(--color-accent);
}
.channel-card__icon {
    font-size: var(--text-lg);
    line-height: 1;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 150, 30, 0.15);
    border-radius: 50%;
    transition: transform var(--duration-base) var(--ease-out);
}
.channel-card__icon .icon { width: 18px; height: 18px; color: var(--color-amber); }
.channel-card:hover .channel-card__icon { transform: scale(1.1); }
.channel-card__title {
    font-size: var(--text-sm);
    color: var(--color-white);
    margin-bottom: var(--space-1);
}
.channel-card__value {
    display: inline-block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-amber);
    transition: color var(--duration-fast) var(--ease-out);
}
.channel-card__value:hover { text-decoration: underline; color: var(--color-white); }
.channel-card__meta {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.6);
}

/* ---------- Contact page form ---------- */
.contact-page__form-wrap {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out);
}
.contact-page__form-wrap:hover { box-shadow: var(--shadow-md); }
.contact-page__form-wrap .section-title { font-size: var(--text-lg); }
.contact-page__form-intro {
    color: var(--color-text-light);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}
.contact-page__form .form-group { margin-bottom: var(--space-5); }
.contact-page__form-note {
    margin: var(--space-4) 0 0;
    font-size: var(--text-sm);
    color: #1a6b3c;
    min-height: 1.2em;
}
.contact-page__form-note.is-error { color: #b3261e; }
.contact-page__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-light);
}
.contact-page__consent input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
}
.contact-page__consent label {
    cursor: pointer;
}
.contact-page__privacy-note {
    margin: 0 0 var(--space-5);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--color-text-light);
}
.contact-page__honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Responsive: two-column layout on wider screens ---------- */
@media (min-width: 860px) {
    .contact-page__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); }
    .page-header { padding: var(--space-9) 0 var(--space-8); }
    .page-header__title { font-size: var(--text-3xl); }
}

/* =====================================================================
   Contact Page — Map section (slides in from the right)
   Sits just above the footer. Uses the same IntersectionObserver-driven
   reveal pattern as the Projects page image morph, but slides
   horizontally instead of fading/clipping.
   ===================================================================== */
.map-section { background: var(--color-bg); padding-bottom: var(--space-9); }

.map-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.map-card__info {
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.map-card__address {
    font-size: var(--text-md);
    color: var(--color-text-light);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.map-card__address .icon { color: var(--color-amber-dark); }

/* Inline location tags on the Projects page (portfolio card + modal) share
   the same pin icon; not part of any larger component that has its own
   stylesheet section yet, so styled directly here. */
.portfolio-card__location,
.project-modal__location {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-light);
    font-size: var(--text-sm);
}
.portfolio-card__location .icon,
.project-modal__location .icon {
    width: 15px;
    height: 15px;
    color: var(--color-amber-dark);
}
.map-card__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-border);
}
.map-card__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Slide-in-from-right reveal ---------- */
.reveal-right {
    opacity: 0;
    transform: translateX(64px);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
    will-change: opacity, transform;
}
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-right {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (min-width: 768px) {
    .map-card { grid-template-columns: 1fr 1.3fr; }
    .map-card__frame { aspect-ratio: auto; height: 100%; min-height: 360px; }
}

/* =====================================================================
   Error pages (404 / 500)
   Reuses the existing page-header pattern for the top banner, plus a
   dedicated card grid / CTA row styled consistently with the rest of
   the site's card and button language.
   ===================================================================== */
.error-actions { background: var(--color-white); }

.error-actions__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-7);
}

.error-action-card {
    display: block;
    text-align: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-5);
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}
.error-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
    background: var(--color-white);
}
.error-action-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    background: var(--color-accent-soft);
    border-radius: var(--radius);
    transition: transform var(--duration-base) var(--ease-out);
}
.error-action-card__icon .icon { width: 22px; height: 22px; color: var(--color-amber-dark); }
.error-action-card:hover .error-action-card__icon { transform: scale(1.08) rotate(-4deg); }
.error-action-card__title { font-size: var(--text-md); color: var(--color-navy); margin-bottom: var(--space-2); }
.error-action-card__desc { font-size: var(--text-sm); color: var(--color-text-light); margin-bottom: 0; }

.error-actions__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .error-actions__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   PREMIUM SCROLL REVEAL
================================================================ */

.reveal-card {
    opacity: 0;

    transform:
        translateY(30px)
        scale(0.985);

    transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out);

    transition-delay:
        calc(var(--card-delay, 0) * 90ms);

    will-change:
        opacity,
        transform;
}


.reveal-card.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ================================================================
   PREMIUM SECTION REVEAL
================================================================ */

.reveal-section {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.75s var(--ease-out),
        transform 0.75s var(--ease-out);
}


.reveal-section.is-visible {
    opacity: 1;

    transform: translateY(0);
}

/* ================================================================
   PREMIUM PROCESS CARDS
================================================================ */

.process-step {
    position: relative;

    padding: 2rem 1.5rem;

    text-align: left;

    background: var(--color-white);

    border:
        1px solid rgba(15, 34, 51, 0.08);

    border-radius: 12px;

    box-shadow:
        0 2px 5px rgba(15, 34, 51, 0.04),
        0 12px 30px rgba(15, 34, 51, 0.05);

    transition:
        transform 0.45s var(--ease-out),
        box-shadow 0.45s var(--ease-out);
}

.process-step:hover {
    transform: translateY(-7px);

    box-shadow:
        0 8px 15px rgba(15, 34, 51, 0.06),
        0 20px 40px rgba(15, 34, 51, 0.10);
}


.process-step__number {
    display: block;

    margin-bottom: 1.25rem;

    color:
        rgba(15, 34, 51, 0.25);

    font-family: var(--font-heading);

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.08em;
}


.process-step__icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 1.25rem;

    border-radius: 9px;

    background: var(--color-navy);

    color: var(--color-amber);

    transition:
        transform 0.4s var(--ease-out),
        background 0.35s ease;
}


.process-step:hover .process-step__icon {
    transform: translateY(-3px);

    background: var(--color-amber);

    color: var(--color-navy);
}


.process-step__title {
    margin-bottom: 0.55rem;

    color: var(--color-navy);

    font-size: 1.1rem;
}


.process-step__desc {
    margin: 0;

    color: var(--color-text-light);

    font-size: 0.85rem;

    line-height: 1.65;
}
/* ================================================================
   IMAGE LOAD EFFECT
================================================================ */

.project-card__media img,
.service-card__image img {
    opacity: 0;

    animation:
        imageReveal 0.7s var(--ease-out) forwards;
}


@keyframes imageReveal {

    from {
        opacity: 0;

        transform: scale(1.025);
    }

    to {
        opacity: 1;

        transform: scale(1);
    }

}


/* ================================================================
   BUTTON / LINK MICRO-INTERACTIONS
================================================================ */

.btn {
    position: relative;

    overflow: hidden;
}


.btn::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.22),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left 0.65s var(--ease-out);
}


.btn:hover::after {
    left: 150%;
}


/* ================================================================
  CORE VALUES
================================================================ */
.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

@media (min-width: 640px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.value-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-7) var(--space-6);
    box-shadow: var(--shadow-sm);
    overflow: hidden;

    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}

/* Gold accent at the top of every card */
.value-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease-out);
}

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

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

/* SVG icon container */
.value-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-5);

    background: var(--color-accent-soft);
    color: var(--color-accent);

    border-radius: 50%;

    transition:
        background var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
}

.value-card:hover .value-card__icon {
    background: var(--color-navy);
    color: var(--color-accent);
    transform: translateY(-2px) scale(1.05);
}

.value-card__icon .icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

/* Value title */
.value-card__title {
    font-size: var(--text-md);
    color: var(--color-navy);
    margin-bottom: var(--space-3);
    font-weight: 700;
}

/* Value description */
.value-card__desc {
    color: var(--color-text-light);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Accessibility: keyboard focus */
.value-card:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}
/* ================================================================
   ACCESSIBILITY
================================================================ */

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

    html {
        scroll-behavior: auto;
    }

    .reveal-card,
    .reveal-section {

        opacity: 1;

        transform: none;

        transition: none;
    }

    .service-card,
    .project-card,
    .service-card__icon,
    .project-card__media img,
    .project-card__view,
    .service-card__arrow {

        transition: none;
    }

    .btn::after {
        display: none;
    }

}
/* ================================================================
   WHATSAPP FLOATING BUTTON */

.whatsapp-float {
    position: fixed;

    right: 1.5rem;
    bottom: 1.5rem;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #25D366;
    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.18);

    z-index: 9999;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.whatsapp-float__icon {
    width: 29px;
    height: 29px;

    fill: currentColor;
}

.whatsapp-float:hover {
    color: #ffffff;

    transform: translateY(-4px) scale(1.04);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.24);
}

.whatsapp-float:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.4);
    outline-offset: 4px;
}

@media (max-width: 576px) {

    .whatsapp-float {
        right: 1rem;
        bottom: 1rem;

        width: 52px;
        height: 52px;
    }

    .whatsapp-float__icon {
        width: 26px;
        height: 26px;
    }
}