.alert { margin-bottom: 20px; padding: 15px; border: 1px solid transparent; }
.alert-danger { border-color: #ebccd1; color: #a94442; background: #f2dede; }
.alert-success { border-color: #d6e9c6; color: #3c763d; background: #dff0d8; }

header.header.filled { padding: 35px 0 0; }
    header.header .Logo { display: inline-block; vertical-align: middle; position: relative; top: -20px; height: 70px; width: 280px; transition: all 1s ease; }
    header.header.filled .Logo { height: 50px; width: 200px; }
        header.header .Logo svg { height: 100%; width: 100%; fill: #FFFFFF; }
        header.header.filled .Logo svg { height: 100%; fill: #000000; }

.Skills { columns: 2; }

    .box-items .box-item .item .desc .image a { height: 215px; width: 100%; background-size: cover; background-position: center top; }
.box-items .box-item .item .desc .name { padding-top: 10px; }
    .box-items .box-item .item .desc .name a { line-height: 1; }

@media (min-width: 425px)
{
    .Skills { columns: 4; }
}

@media (min-width: 768px)
{
    .box-items .box-item .item .desc .image a { height: 240px; }
}

@media (min-width: 1024px)
{
    .box-items .box-item .item .desc .image a { height: 326px; }
}

@media (min-width: 1440px)
{
    .box-items .box-item .item .desc .image a { height: 364px; }
}
/* Accessibility */
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #292929;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #ffffff;
}
a.btn:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 2px #ffffff, inset 0 -14px 0 #ede574; }

/* Buttons that replaced links */
button.menu-btn, button.mouse-btn, button.close {
    padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
button.btn {
    padding: 6px 0 4px; line-height: 14px; min-height: 24px;
    background: none; border: 0; font-family: inherit; color: #292929;
}
.header .top-menu .close { display: none; }
@media (max-width: 1079px) {
    .header .top-menu .close {
        display: block; position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
        font-size: 28px; line-height: 28px; color: #292929;
    }
    .header .top-menu .close:before { content: "\00d7"; }
    .header .top-menu:not(.active) { visibility: hidden; transition: visibility 0s linear 0.4s, right 0.4s ease 0s; }
}

/* Contact form */
.contact-form .form-note { margin: 0 0 20px; font-size: 14px; }
.contact-form label { padding-bottom: 4px; font-size: 14px; letter-spacing: 0.05em; color: #292929; }
.contact-form span.error { display: block; margin-top: 6px; font-size: 14px; color: #a30018; }
.contact-form input.error, .contact-form textarea.error { border-bottom: 2px solid #a30018; }

/* Hero text legibility over the photo: tight dark halo plus a soft spread */
.section.started .st-title,
.section.started .typed-title,
.section.started .typed-cursor {
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.95),
        0 0 6px rgba(0, 0, 0, 0.85),
        0 0 14px rgba(0, 0, 0, 0.7),
        0 0 28px rgba(0, 0, 0, 0.5);
}

/* Header menu links are white over the photo until the header fills white on scroll;
   on small screens they sit in the white slide-out panel, so no shadow there */
@media (min-width: 1080px) {
    .header:not(.filled) .top-menu ul li a {
        text-shadow:
            0 0 2px rgba(0, 0, 0, 0.95),
            0 0 6px rgba(0, 0, 0, 0.85),
            0 0 14px rgba(0, 0, 0, 0.7),
            0 0 28px rgba(0, 0, 0, 0.5);
    }
}

/* Header logo (white SVG) over the photo until the header fills white on scroll.
   text-shadow doesn't apply to SVG shapes, so use the equivalent drop-shadow filters */
header.header:not(.filled) .Logo svg {
    filter:
        drop-shadow(0 0 2px rgba(0, 0, 0, 0.95))
        drop-shadow(0 0 6px rgba(0, 0, 0, 0.85))
        drop-shadow(0 0 14px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 28px rgba(0, 0, 0, 0.5));
}

/* Hamburger (white bars) over the photo until the header fills white on scroll */
.header:not(.filled) .menu-btn {
    filter:
        drop-shadow(0 0 2px rgba(0, 0, 0, 0.95))
        drop-shadow(0 0 6px rgba(0, 0, 0, 0.85))
        drop-shadow(0 0 14px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 28px rgba(0, 0, 0, 0.5));
}

/* Hero intro and calls to action */
.section.started .hero-lead,
.section.started .hero-sub {
    font-family: 'Hind', helvetica; text-transform: none; letter-spacing: 0.02em; color: #ffffff;
}
.section.started .hero-lead { margin: 28px auto 8px; max-width: 900px; font-size: 28px; line-height: 36px; font-weight: 600; }
.section.started .hero-sub { margin: 0 auto; max-width: 700px; font-size: 20px; line-height: 28px; font-weight: 400; }
@media (max-width: 720px) {
    .section.started .hero-lead { font-size: 22px; line-height: 30px; }
    .section.started .hero-sub { font-size: 17px; line-height: 24px; }
}
.section.started .hero-actions { margin-top: 28px; }
.section.started .hero-actions a.btn {
    margin: 0 14px 10px; padding: 10px 6px 8px; font-size: 14px; line-height: 16px; color: #ffffff;
}
.section.started .hero-actions a.btn:hover,
.section.started .hero-actions a.btn:focus-visible { color: #292929; text-shadow: none; }

/* About: grouped skills */
.skills-heading { margin: 30px 0 0; font-size: 28px; line-height: 36px; }
.skills-group h3 { margin: 18px 0 6px; font-family: 'Hind', helvetica; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.skills-group ul.Skills { columns: 2; }
@media (min-width: 768px) { .skills-group ul.Skills { columns: 4; } }

/* Hero subtext: thin small text needs a denser, tighter halo and more weight than the big headline */
.section.started .hero-lead,
.section.started .hero-sub,
.section.started .hero-actions a.btn {
    text-shadow:
        0 0 1px #000,
        0 0 2px #000,
        0 0 3px rgba(0, 0, 0, 0.95),
        0 1px 3px #000,
        0 0 8px rgba(0, 0, 0, 0.9),
        0 0 16px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 0, 0, 0.7);
}
.section.started .hero-lead { font-weight: 700; }
.section.started .hero-sub { font-size: 22px; line-height: 30px; font-weight: 600; }
@media (max-width: 720px) {
    .section.started .hero-sub { font-size: 18px; line-height: 26px; }
}
.section.started .hero-actions a.btn { font-weight: 600; }
.section.started .hero-actions a.btn:hover,
.section.started .hero-actions a.btn:focus-visible { text-shadow: none; }

/* Hero buttons: solid dark background so they read clearly over the photo */
.section.started .hero-actions a.btn {
    padding: 13px 24px 11px;
    background: #292929;
    color: #ffffff;
    text-shadow: none;
}
.section.started .hero-actions a.btn:hover,
.section.started .hero-actions a.btn:focus-visible {
    background: #ede574;
    color: #292929;
    box-shadow: inset 0 -6px 0 #ede574;
}
.section.started .hero-actions a.btn:focus-visible { box-shadow: 0 0 0 2px #ffffff; }

/* Hero buttons: 50% see-through background (text stays fully opaque) */
.section.started .hero-actions a.btn {
    background: rgba(41, 41, 41, 0.5);
    text-shadow: 0 0 1px #000, 0 0 3px rgba(0, 0, 0, 0.95), 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8);
}
.section.started .hero-actions a.btn:hover,
.section.started .hero-actions a.btn:focus-visible { background: #ede574; text-shadow: none; }

/* About section body text */
.section.about p,
.section.about .Skills li {
    font-size: 22px;
    line-height: 36px;
}

.section.about .skills-group h3 { font-size: 20px; line-height: 30px; }

/* FAQ */
.section.faq .faq-list { max-width: 860px; }
.section.faq .faq-item { margin-bottom: 32px; }
.section.faq .faq-item h3 {
    margin: 0 0 8px; font-family: 'Hind', helvetica; font-size: 24px; line-height: 34px; font-weight: 600;
}
.section.faq .faq-item p { margin: 0; font-size: 20px; line-height: 34px; }

/* Services descriptions */
.section.services .service-item p { font-size: 18px; line-height: 28px; }

/* Contact form honeypot: kept off-screen (not display:none, which bots detect) */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }