/* Oswald, self-hosted rather than linked from Google Fonts: hotlinking sends
   every visitor's IP to Google, which EU courts have treated as a GDPR
   problem for sites without consent. Headings only; body text stays on the
   system stack so there is nothing extra to download for it. */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/oswald-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/oswald-latin-ext-700.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/oswald-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/oswald-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================
   CESA – GRADNJA — light theme (white / charcoal / orange)
   =========================================================== */

:root {
    --color-orange: #F26522;
    --color-orange-dark: #D9551B;
    --color-orange-tint: #FFF3EC;
    --color-charcoal: #2B2B2B;
    --color-charcoal-soft: #5A5A5A;
    --color-bg: #FFFFFF;
    --color-bg-alt: #FAF8F6;
    --color-border: #E9E4DF;
    --color-success-bg: #E8F6EC;
    --color-success-text: #1E7A34;
    --color-error-bg: #FCEAEA;
    --color-error-text: #B3261E;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 3px rgba(43, 43, 43, .06);
    --shadow-md: 0 8px 24px rgba(43, 43, 43, .10);
    --container-width: 1140px;
    --font-main: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Oswald', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-main);
    color: var(--color-charcoal);
    background: var(--color-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--color-orange);
    text-decoration: none;
}
a:hover { color: var(--color-orange-dark); }

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .5em;
    color: var(--color-charcoal);
}
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

p { margin: 0 0 1em; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-orange);
    color: #fff;
    padding: .75rem 1.25rem;
    z-index: 1000;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    font-size: 1rem;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: var(--color-orange);
    color: #fff;
}
.btn-primary:hover { background: var(--color-orange-dark); color: #fff; }

.btn-outline {
    background: transparent;
    border-color: var(--color-charcoal);
    color: var(--color-charcoal);
}
.btn-outline:hover { background: var(--color-charcoal); color: #fff; }

.btn-white {
    background: #fff;
    color: var(--color-orange);
}
.btn-white:hover { background: var(--color-orange-tint); color: var(--color-orange-dark); }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-border);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .75rem 1.25rem;
}
.brand { display: flex; align-items: center; }
.brand-logo { height: 62px; width: auto; }

.main-nav {
    display: flex;
    gap: 1.75rem;
    flex: 1;
    justify-content: center;
}
.main-nav a {
    color: var(--color-charcoal);
    font-weight: 500;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.main-nav a:hover,
.main-nav a.active {
    color: var(--color-orange);
    border-bottom-color: var(--color-orange);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.phone-link {
    font-weight: 600;
    color: var(--color-charcoal);
    white-space: nowrap;
}
.phone-link:hover { color: var(--color-orange); }

.lang-toggle {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
}
.lang-toggle a {
    padding: .3rem .7rem;
    font-weight: 700;
    font-size: .8rem;
    color: var(--color-charcoal-soft);
}
.lang-toggle a.active {
    background: var(--color-orange);
    color: #fff;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--color-charcoal);
    border-radius: 1px;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #fff 55%, var(--color-orange-tint) 100%);
    border-bottom: 1px solid var(--color-border);
}
/* Blueprint line drawing, barely there — it should read as texture, never as
   a picture competing with the headline. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/img/hero-bg.svg') no-repeat center bottom;
    background-size: 100% auto;
    opacity: .095;
    pointer-events: none;
}
.hero-inner {
    position: relative;
    padding: 5rem 1.25rem;
    text-align: center;
}
.hero-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: .012em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.hero-title .accent { color: var(--color-orange); }
.hero-title .dash { color: var(--color-border); font-weight: 600; }
.hero-tagline {
    font-size: 1.15rem;
    color: var(--color-charcoal-soft);
    max-width: 640px;
    margin: 0 auto 2rem;
}
.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Headings ---------- */
h1, h2, h3,
.section-heading, .page-heading, .project-title {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: .01em;
}
h1, .page-heading { font-weight: 700; }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section-alt { background: var(--color-bg-alt); }
.section-heading { text-align: center; }
.section-sub {
    text-align: center;
    color: var(--color-charcoal-soft);
    margin-top: -.5rem;
    margin-bottom: 2.5rem;
}
.section-cta { text-align: center; margin-top: 2rem; }

.page-heading { margin-bottom: .25rem; }
.page-sub { color: var(--color-charcoal-soft); margin-bottom: 2rem; }

.empty-state {
    text-align: center;
    color: var(--color-charcoal-soft);
    padding: 2rem 0;
}

/* ---------- Services grid ---------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.service-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.75rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-orange);
}
.service-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.service-card p { font-size: .9rem; color: var(--color-charcoal-soft); margin: 0; }

/* Two-tone SVG icons: charcoal linework plus a solid orange highlight, both
   coloured here so the whole set restyles from one place. */
.service-icon {
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 1rem;
}
.service-icon .i-line {
    fill: none;
    stroke: var(--color-charcoal);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.service-icon .i-accent { fill: var(--color-orange); stroke: none; }

.link-arrow { font-weight: 600; display: inline-block; margin-top: .5rem; }

/* Keyword line under the wordmark: part of the H1, so it must read as a
   subtitle rather than competing with the brand above it. */
.hero-subtitle {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-main);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-charcoal);
}
/* Pushed to the card's bottom edge so the arrows line up across the row
   however long each description happens to be. */
.service-card-more {
    display: inline-block;
    margin-top: auto;
    padding-top: .9rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-orange);
}

/* ---------- Service landing pages ---------- */
.breadcrumb {
    font-size: .85rem;
    color: var(--color-charcoal-soft);
    margin-bottom: 1.25rem;
}
.breadcrumb span { margin: 0 .4rem; }
.breadcrumb [aria-current="page"] { margin: 0; font-weight: 600; color: var(--color-charcoal); }

.service-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}
.service-page h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.heading-place { color: var(--color-orange); }
.service-bullets { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.service-bullets li { margin-bottom: .45rem; }
.service-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
.service-aside {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.75rem;
}
.service-aside .service-icon { margin: 0 0 .5rem; }
.service-aside h2 { margin-top: 0; font-size: 1rem; }
.service-other-list { list-style: none; margin: 0; padding: 0; }
.service-other-list li { margin-bottom: .5rem; }
.service-aside-cta { margin: 1.25rem 0 0; }

@media (max-width: 860px) {
    .service-layout { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Service detail ---------- */
.service-detail {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 3rem;
    align-items: start;
}
.service-detail-intro {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    position: sticky;
    top: 100px;
}

/* ---------- Photo grid & lightbox ---------- */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.photo-grid-gallery { grid-template-columns: repeat(4, 1fr); }
.photo-thumb {
    display: block;
    border: none;
    padding: 0;
    background: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    aspect-ratio: 4 / 3;
}
.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.photo-thumb:hover img { transform: scale(1.06); }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
}
.filter-label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-charcoal-soft);
    margin-right: .2rem;
}
.filter-pill {
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    color: var(--color-charcoal);
    font-size: .9rem;
    font-weight: 500;
}
.filter-pill:hover { border-color: var(--color-orange); color: var(--color-orange); }
.filter-pill.active {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #fff;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 16, .92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1000;
    padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible {
    outline: 3px solid var(--color-orange);
    outline-offset: 3px;
}
@media (max-width: 600px) {
    .lightbox-prev { left: .4rem; }
    .lightbox-next { right: .4rem; }
}
.lightbox img { max-width: min(90vw, 1000px); max-height: 78vh; border-radius: var(--radius-sm); }
.lightbox p { color: #fff; margin: 0; text-align: center; }
.lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- About ---------- */
.about-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: start;
}
.lead-text { font-size: 1.1rem; }
.stats-row {
    display: flex;
    gap: 2.5rem;
    margin-top: 2rem;
}
.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-orange);
}
.stat-label { color: var(--color-charcoal-soft); font-size: .9rem; }

.about-info-card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
}
.about-info-card dl { margin: 0; }
.about-info-card dt {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-charcoal-soft);
    margin-top: 1rem;
}
.about-info-card dt:first-child { margin-top: 0; }
.about-info-card dd { margin: .15rem 0 0; font-weight: 600; }

/* ---------- Contact ---------- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
}
.contact-info-card, .contact-form-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
}
.contact-info-card { background: var(--color-bg-alt); }
.map-embed {
    margin-top: 1.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.map-embed-placeholder {
    position: relative;
    height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--color-orange-tint);
    text-align: center;
    padding: 1rem;
}
/* Faint street grid in brand orange — reads as "a map" without competing with
   the button sitting on top of it. */
.map-embed-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(242, 101, 34, .15) 0 1px, transparent 1px 36px),
        repeating-linear-gradient(90deg, rgba(242, 101, 34, .15) 0 1px, transparent 1px 36px);
    pointer-events: none;
}
.map-embed-pin, .map-embed-load, .map-embed-notice { position: relative; }
.map-embed-pin {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 2px 3px rgba(43, 43, 43, .18));
}
.map-embed-pin .i-accent { fill: var(--color-orange); }
.map-embed-pin .i-knockout { fill: #fff; }
.map-embed-load {
    font: inherit;
    font-weight: 600;
    padding: .6rem 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    cursor: pointer;
}
.map-embed-load:hover { background: var(--color-bg-alt); }
.map-embed-notice {
    margin: 0;
    font-size: .8rem;
    color: var(--color-charcoal-soft);
}

/* ---------- Legal pages (privacy policy) ---------- */
.legal-page { max-width: 46rem; }
.legal-page h2 {
    font-size: 1.15rem;
    margin: 2.25rem 0 .6rem;
}
.legal-page p { margin: 0 0 .9rem; }
.legal-updated {
    font-size: .85rem;
    color: var(--color-charcoal-soft);
    margin-bottom: 1.5rem;
}
.legal-list {
    margin: 0 0 .9rem;
    padding-left: 1.2rem;
}
.legal-list li { margin-bottom: .35rem; }
/* The right to object must stand out rather than sit buried in the prose. */
.legal-callout {
    border-left: 3px solid var(--color-orange);
    background: var(--color-bg-alt);
    padding: .8rem 1rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.field-hp { position: absolute; left: -9999px; }

.field-error {
    margin: .35rem 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: #C0341B;
}
.form-row input.has-error,
.form-row select.has-error,
.form-row textarea.has-error {
    border-color: #C0341B;
    background: #FEF6F4;
}

.form-row { margin-bottom: 1.1rem; }
.form-row label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .35rem;
}
.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: .65rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    color: var(--color-charcoal);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--color-orange);
    box-shadow: 0 0 0 3px rgba(242, 101, 34, .15);
}
.privacy-note { font-size: .8rem; color: var(--color-charcoal-soft); }

.alert {
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    margin-bottom: 1.25rem;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-error { background: var(--color-error-bg); color: var(--color-error-text); }

/* ---------- CTA banner ---------- */
.cta-banner {
    background: var(--color-orange);
    color: #fff;
    text-align: center;
    padding: 2.5rem 0;
}
.cta-banner p { font-size: 1.2rem; margin-bottom: 1rem; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-charcoal);
    color: rgba(255, 255, 255, .8);
    margin-top: 2rem;
}
.footer-single {
    padding: 3rem 1.25rem 2rem;
    text-align: center;
}
.footer-single h3 { color: #fff; font-size: 1.05rem; margin-bottom: .6rem; }
.footer-single p { margin: .35rem 0; }
.footer-single a { color: rgba(255, 255, 255, .78); }
.footer-single a:hover { color: var(--color-orange); }
.small { font-size: .85rem; }
.footer-admin { margin: .4rem 0 0; }
.footer-admin a { opacity: .55; font-size: .8rem; }
.footer-admin a:hover { opacity: 1; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: center;
    padding: 1.1rem 1.25rem;
    font-size: .8rem;
}
.footer-bottom p { margin: .2rem 0; }
.footer-legal { margin: .4rem 0 0; }
.footer-legal a { text-decoration: underline; }

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(37, 211, 102, .4);
    z-index: 900;
    transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }

/* Music toggle, stacked directly above the WhatsApp button and built to match
   it: same 56px circle, same shadow treatment, brand orange instead of
   WhatsApp green. On/off is carried by the icon swap rather than the colour,
   with a slightly deeper orange while playing. */
.audio-float {
    position: fixed;
    bottom: calc(1.5rem + 56px + .75rem);
    right: 1.5rem;
    width: 56px;
    height: 56px;
    padding: 0;
    background: var(--color-orange);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(242, 101, 34, .4);
    z-index: 900;
    transition: transform .15s ease, background .15s ease;
}
/* Sized here rather than on the SVG attributes so the two icons stay in step
   with the button at every breakpoint. */
.audio-float svg { width: 28px; height: 28px; }
.audio-float:hover { transform: scale(1.08); background: var(--color-orange-dark); }
.audio-float:focus-visible { outline: 3px solid var(--color-charcoal); outline-offset: 2px; }
.audio-float.is-playing { background: var(--color-orange-dark); }
.audio-float[hidden] { display: none; }
/* The UA rule for [hidden] does not reliably apply to inline SVG, so the
   inactive icon is hidden explicitly or both would render side by side. */
.audio-float svg[hidden] { display: none; }

/* At 768px the WhatsApp button shrinks to 50px and moves to bottom:1rem, so
   the music button has to follow it or the two overlap. */
@media (max-width: 768px) {
    .audio-float { width: 50px; height: 50px; bottom: calc(1rem + 50px + .6rem); right: 1rem; }
    .audio-float svg { width: 25px; height: 25px; }
}

/* ---------- Admin panel ---------- */
.admin-shell { max-width: 980px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.admin-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.admin-nav a { color: var(--color-charcoal); font-weight: 500; }
.admin-nav a:hover, .admin-nav a.active { color: var(--color-orange); }
.admin-login-box {
    max-width: 380px;
    margin: 4rem auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
}
.admin-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin-bottom: 2rem;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
    text-align: left;
    padding: .75rem .5rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    font-size: .92rem;
}
.admin-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.admin-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.admin-stat {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.75rem;
    min-width: 160px;
}
.admin-stat .stat-number { color: var(--color-charcoal); }
.badge-unread {
    background: var(--color-orange);
    color: #fff;
    border-radius: 999px;
    font-size: .7rem;
    padding: .1rem .5rem;
    margin-left: .3rem;
}
.btn-danger { border-color: var(--color-error-text); color: var(--color-error-text); background: transparent; }
.btn-danger:hover { background: var(--color-error-text); color: #fff; }
.btn-sm { padding: .4rem .9rem; font-size: .85rem; }

/* ---------- Gallery projects (before / after) ---------- */
.project {
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--color-border);
}
.project:first-of-type { border-top: 0; padding-top: .5rem; }
.project-title { font-size: 1.35rem; margin: 0 0 1.25rem; }

.ba-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: start;
}
/* A project with only one side should use the full width rather than
   leaving an empty column. */
.ba-col:only-child { grid-column: 1 / -1; }

.ba-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin: 0 0 .75rem;
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: 999px;
}
.ba-label-before { background: var(--color-border); color: var(--color-charcoal-soft); }
.ba-label-after { background: var(--color-orange-tint); color: var(--color-orange-dark); }

.photo-grid-ba { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* ---------- Admin: projects ---------- */
.admin-hint { color: var(--color-charcoal-soft); font-size: .92rem; margin-top: -.4rem; }
.admin-back { margin-bottom: .5rem; font-size: .92rem; }

.project-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
}
.project-row:first-of-type { border-top: 0; }
.project-row-main { display: flex; flex-direction: column; gap: .2rem; }
.project-row-en { color: var(--color-charcoal-soft); font-size: .9rem; }
.project-row-meta { color: var(--color-charcoal-soft); font-size: .82rem; }
.project-row-actions { display: flex; align-items: start; gap: .5rem; }
.project-rename {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.project-rename input { flex: 1 1 200px; }

.kind-choice { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .9rem 1rem; }
.kind-choice legend { font-weight: 600; padding: 0 .4rem; font-size: .92rem; }
.kind-choice label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 1.5rem 0 0;
    width: auto;
    white-space: nowrap;
    font-weight: 500;
}
.kind-choice input[type="radio"] { width: auto; margin: 0; }

.admin-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}
.admin-photo { margin: 0; text-align: center; }
.admin-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.admin-photo figcaption { font-size: .85rem; color: var(--color-charcoal-soft); margin: .4rem 0; }

.mail-warning {
    color: var(--color-error-text);
    background: var(--color-error-bg);
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: var(--radius-sm);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    /* Tighten the nav before the hamburger takes over at 768px, so the
       five labels never crowd the logo or the language toggle. */
    .main-nav { gap: 1.05rem; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .service-detail { grid-template-columns: 1fr; }
    .service-detail-intro { position: static; }
    .about-layout, .contact-layout { grid-template-columns: 1fr; }
    .photo-grid, .photo-grid-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--color-border);
        flex-direction: column;
        gap: 0;
        display: none;
        box-shadow: var(--shadow-md);
    }
    .main-nav.open { display: flex; }
    .main-nav a {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--color-border);
    }
    .main-nav a.active { border-bottom: 1px solid var(--color-border); }
    .nav-toggle { display: flex; }
    .phone-link { display: none; }
    .brand-logo { height: 50px; }

    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .photo-grid, .photo-grid-gallery { grid-template-columns: repeat(2, 1fr); }
    .ba-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .stats-row { justify-content: center; }
    .hero-inner { padding: 3rem 1.25rem; }
    .hero::before { background-size: auto 100%; background-position: center; opacity: .075; }
    .whatsapp-float { width: 50px; height: 50px; bottom: 1rem; right: 1rem; }
}

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

/* ---------- Phone layout ----------
   Two things drive this block. Buttons sitting side by side at 390px end up
   narrow, unequal and hard to hit, so below 600px every button becomes a
   full-width stacked block with a 48px tap target. And the before/after photo
   grid used auto-fill with a 170px minimum, which fits two columns on a phone
   — a project with one photo per side therefore rendered it at half width with
   dead space beside it. The gallery is the main sales tool here, so those go
   full width instead. */
@media (max-width: 600px) {
    .btn {
        min-height: 48px;
        justify-content: center;
        text-align: center;
    }
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .hero-actions .btn { width: 100%; }

    .service-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .service-actions .btn { width: 100%; }

    .contact-form-card form button[type="submit"] { width: 100%; }

    /* Full-width before/after photos rather than half-width with dead space. */
    .photo-grid-ba { grid-template-columns: 1fr; }
    .ba-grid { gap: 1.25rem; }

    /* Breathing room, tuned down from the desktop rhythm. */
    .section { padding: 2.75rem 0; }
    .section-sub { margin-bottom: 1.75rem; }
    .hero-inner { padding: 2.5rem 1.25rem 3rem; }
    .hero-tagline { font-size: 1rem; margin-bottom: 1.75rem; }

    /* The three figures were crowding each other with their labels wrapping. */
    .stats-row {
        gap: 1rem;
        justify-content: space-between;
        text-align: center;
    }
    .stats-row > * { flex: 1; }

    .filter-bar { gap: .5rem; }
}

/* Narrow phones: the logo, language switch and hamburger all compete for the
   same row, so the logo gives up height and the gutters tighten. */
@media (max-width: 420px) {
    .container { padding: 0 1rem; }
    .header-inner { gap: .75rem; padding: .6rem 1rem; }
    .brand-logo { height: 44px; }
    .hero-inner { padding: 2.25rem 1rem 2.75rem; }
}