:root {
    --primary: #0095D9;
    --secondary: #34B6E4;
    --accent: #E3F2FA;
    --text: #1A1A1A;
    --bg: #F9FCFE;
    --text-danger: #dc3545;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--text);
    background: var(--bg);
    font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
    color: var(--primary);
    font-weight: 700;
}

.navbar .nav-link {
    color: var(--text);
    transition: color .2s ease;
}

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

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    transition: .2s;
}

    .btn-primary:hover {
        filter: brightness(0.92);
    }

.hero {
    background-image: linear-gradient(rgba(0,149,217,.40), rgba(0,149,217,.60)), url('/assets/img/cell-tower.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    min-height: 72vh;
    display: flex;
    align-items: center;
}

.section {
    padding: 60px 0;
}

.fade-in {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeInUp .8s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: none;
    }
}
/* Services subnav */
.service-subnav {
    background: #ffffff;
    background: rgba(255,255,255,1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 999;
    top: 58px;
}

#serviceNav a {
    color: var(--text);
    transition: color .2s ease;
    position: relative;
}

    #serviceNav a.active {
        color: var(--primary);
    }

        #serviceNav a.active::after {
            content: "";
            position: absolute;
            left: 15%;
            right: 15%;
            bottom: -3px;
            height: 2px;
            background: var(--primary);
        }

section[id^="service"] {
    scroll-margin-top: 150px;
}
/* Cards */
.card.service {
    border: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .card.service:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 28px rgba(0,149,217,.18);
    }
/* Footer hover for Wylice */
.wylice-link {
    position: relative;
    transition: color .3s ease;
}

    .wylice-link:hover {
        color: var(--primary);
    }

    .wylice-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 1px;
        background: var(--primary);
        transition: width .3s ease;
    }

    .wylice-link:hover::after {
        width: 100%;
    }


/* Accessibility helpers */
.visually-hidden-focusable:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}
:focus-visible { outline:none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Shrink-on-scroll header */
.navbar {
    transition: padding .2s ease, box-shadow .2s ease;
}

.nav-compact {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* CTA micro-interactions */
.btn-primary {
    transform: translateZ(0);
}

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0,149,217,.18);
    }

/* Dark mode */
/*@media (prefers-color-scheme: dark) {
  :root { --bg:#0B0F14; --text:#E9EEF3; --accent:#0F2230; }
  body { background:var(--bg); color:var(--text); }
  .bg-light { background:#0F2230 !important; }
  .card, .bg-white { background:#121825 !important; color:var(--text); }
  .navbar, footer { background:#0D121B !important; }
  .navbar .nav-link { color: var(--text); }
}
*/
/* Sticky contact CTA (desktop) */
.sticky-cta {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1000;
}

@media (max-width: 1199px) {
    .sticky-cta {
        display: none;
    }
}


/* v19b: Improve hero text legibility without altering layout */
.hero {
    position: relative;
}

    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        /*background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55));*/
        pointer-events: none;
    }

    .hero .display-4, .hero .lead {
        text-shadow: none !important;
        color: #fff;
    }

    .hero .fade-in {
        background: rgba(0,0,0,.38);
        display: inline-block;
        padding: 1rem 1.25rem;
        border-radius: .5rem;
    }

/* Ensure headshots show full heads */
.portrait-top {
    object-fit: cover;
    object-position: top center;
}


/* Footer link hover brand color */
footer a {
    color: #023C42;
    text-decoration: none;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

    footer a:hover {
        color: #06648F;
        border-bottom: 1px solid #06648F;
    }

footer .wylice-link {
    color: #06648F;
    font-weight: 500;
}

    footer .wylice-link:hover {
        color: #023C42;
        border-bottom: none;
    }



/* Process Page Enhancements v22 */
.text-brand {
    color: #0095D9 !important;
}

.process-card {
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

    .process-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
        background-color: #f8fcff;
    }

    .process-card .icon i {
        font-size: 2.5rem;
    }

@media (max-width: 767px) {
    .process-card .icon i {
        font-size: 2rem;
    }
}



/* Step Number Badges for Process Page v22b */
.step-number {
    display: inline-block;
    background-color: #0095D9;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    font-size: 0.9rem;
    padding: 4px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    letter-spacing: 0.5px;
}

@media (max-width: 767px) {
    .step-number {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
}



/* Contact Page Enhancements v23 */
.text-brand {
    color: #0095D9 !important;
}

.contact-card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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



/* Contact Page Updates v25 */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

footer {
    margin-top: auto;
}

.text-brand {
    color: #0095D9 !important;
}

.btn-brand {
    background-color: #0095D9;
    color: #fff;
    border: none;
    transition: background-color 0.3s ease-in-out;
}

    .btn-brand:hover {
        background-color: #007bb8;
    }

.contact-card img {
    object-fit: cover;
    object-position: center;
}



/* v26 Back to Top Consistency + Headshot Alignment */
.contact-card img {
    object-fit: cover;
    object-position: center 25%;
}

#backToTop:hover {
    background-color: #007bb8 !important;
    transform: translateY(-3px);
    transition: all 0.3s ease-in-out;
}



/* v27 Unified Back to Top + Consultation Button */
#backToTop:hover {
    background-color: #007bb8 !important;
    transform: translateY(-3px);
    transition: all 0.3s ease-in-out;
}

.btn-brand {
    background-color: #0095D9;
    color: #fff;
    border: none;
    transition: background-color 0.3s ease-in-out;
}

    .btn-brand:hover {
        background-color: #007bb8;
    }

/* serivces */
.blank-section {
    height: 630px;
}
@media (max-width: 1199px) {
    .blank-section {
        height: 350px;
    }
}
@media (max-width: 767px) {
    .blank-section {
        height: 150px;
    }
}

.validation-errors{
    color: var(--text-danger);
}

.invalid {
    color: var(--text-danger);
    border: var(--text-danger) solid;
}