/* Public website (layouts/site.php). Kept separate from app.css, which styles
   the staff console. Everything is self-hosted: the CSP allows only 'self'
   for fonts and images, so there are no web fonts or remote photos here. */

:root {
    --vc-ink: #1b2330;
    --vc-ink-2: #263142;
    --vc-accent: #e8870e;
    --vc-accent-dark: #c46f05;
    --vc-accent-soft: #fdf1e1;
    --vc-sand: #f7f4ef;
    --vc-line: #e7e1d8;
    --vc-muted: #5f6977;
    --vc-radius: 14px;
}

.vc-site {
    color: var(--vc-ink);
    background: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.vc-site h1, .vc-site h2, .vc-site h3, .vc-site h4 { font-weight: 750; letter-spacing: -.02em; }
/* :where() keeps this at single-class specificity so component rules (.vc-footer a, a.vc-card, buttons) win. */
.vc-site :where(a:not(.btn)) { color: var(--vc-accent-dark); }
.vc-site :where(a:not(.btn)):hover { color: var(--vc-ink); }
.text-muted-vc { color: var(--vc-muted); }

/* ---------- buttons ---------- */
.vc-btn-accent {
    background: var(--vc-accent); border-color: var(--vc-accent); color: #fff; font-weight: 600;
}
.vc-btn-accent:hover, .vc-btn-accent:focus { background: var(--vc-accent-dark); border-color: var(--vc-accent-dark); color: #fff; }
.vc-btn-ghost { border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-weight: 600; }
.vc-btn-ghost:hover { background: #fff; color: var(--vc-ink); }
.vc-btn-dark { background: var(--vc-ink); color: #fff; font-weight: 600; }
.vc-btn-dark:hover { background: var(--vc-ink-2); color: #fff; }

/* ---------- top bar + nav ---------- */
.vc-topbar { background: var(--vc-ink); color: rgba(255,255,255,.75); font-size: .85rem; }
.vc-topbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.vc-topbar a:hover { color: #fff; }
.vc-topbar i { color: var(--vc-accent); margin-right: .25rem; }

.vc-nav { background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--vc-line); }
.vc-nav .nav-link { color: var(--vc-ink); font-weight: 550; padding: .5rem .8rem !important; border-radius: 8px; }
.vc-nav .nav-link:hover { color: var(--vc-accent-dark); }
.vc-nav .nav-link.active { color: var(--vc-accent-dark); background: var(--vc-accent-soft); }

.vc-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.vc-brand-mark {
    width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center;
    background: var(--vc-accent); color: #fff; font-size: 1.2rem;
}
.vc-brand-name { font-weight: 800; font-size: 1.15rem; color: var(--vc-ink); letter-spacing: -.02em; }
.vc-brand-light .vc-brand-name { color: #fff; }
.vc-brand-img { max-height: 52px; max-width: 220px; }

/* ---------- hero ---------- */
.vc-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 32px 32px,
        radial-gradient(1200px 500px at 85% 20%, #34425a 0%, transparent 60%),
        var(--vc-ink);
    padding: 5.5rem 0 5rem;
}
.vc-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }
.vc-hero h1 span { color: var(--vc-accent); }
.vc-hero .lead { color: rgba(255,255,255,.78); max-width: 34rem; }
.vc-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    color: var(--vc-accent);
}
.vc-hero-art { width: 100%; max-width: 480px; height: auto; display: block; margin-left: auto; }
.vc-hero-facts { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.25rem; }
.vc-hero-facts div { border-left: 3px solid var(--vc-accent); padding-left: .8rem; }
.vc-hero-facts strong { display: block; font-size: 1.35rem; }
.vc-hero-facts small { color: rgba(255,255,255,.7); }

/* Inner-page header */
.vc-pagehead {
    color: #fff; padding: 3.5rem 0 3rem;
    background:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--vc-ink);
}
.vc-pagehead h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: .5rem; }
.vc-pagehead p { color: rgba(255,255,255,.75); max-width: 40rem; margin: 0; }

/* ---------- sections ---------- */
.vc-section { padding: 4.5rem 0; }
.vc-section-sand { background: var(--vc-sand); }
.vc-section-title { max-width: 40rem; margin-bottom: 2.5rem; }
.vc-section-title h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.vc-section-title p { color: var(--vc-muted); margin: 0; }

.vc-card {
    background: #fff; border: 1px solid var(--vc-line); border-radius: var(--vc-radius);
    padding: 1.6rem; height: 100%; transition: transform .15s ease, box-shadow .15s ease;
}
a.vc-card { display: block; color: inherit; text-decoration: none; }
a.vc-card:hover, .vc-card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(27,35,48,.09); color: inherit; }
.vc-card h3 { font-size: 1.15rem; margin: 1rem 0 .5rem; }
.vc-card p { color: var(--vc-muted); margin-bottom: 0; }
.vc-icon {
    width: 52px; height: 52px; border-radius: 12px; display: inline-grid; place-items: center;
    background: var(--vc-accent-soft); color: var(--vc-accent-dark); font-size: 1.5rem;
}
.vc-card-link { font-weight: 600; font-size: .92rem; margin-top: 1rem; display: inline-block; color: var(--vc-accent-dark); }

.vc-check { list-style: none; padding: 0; margin: 0; }
.vc-check li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; }
.vc-check li::before {
    content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0;
    color: var(--vc-accent-dark); font-size: 1.1rem; line-height: 1.4;
}

/* Process steps */
.vc-steps { counter-reset: step; }
.vc-step { position: relative; padding-top: 3.2rem; }
.vc-step::before {
    counter-increment: step; content: counter(step, decimal-leading-zero);
    position: absolute; top: 0; left: 0; font-size: 2.2rem; font-weight: 800; color: var(--vc-accent);
    line-height: 1;
}
.vc-step h3 { font-size: 1.1rem; }
.vc-step p { color: var(--vc-muted); margin: 0; }

/* ---------- projects ---------- */
.vc-project { overflow: hidden; padding: 0; }
.vc-project-art {
    aspect-ratio: 4 / 3; position: relative; display: grid; place-items: center; overflow: hidden;
    color: rgba(255,255,255,.9); font-size: 3rem;
    background:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(135deg, var(--vc-ink-2), var(--vc-ink));
}
.vc-project-art img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
a.vc-project:hover .vc-project-art img { transform: scale(1.04); }
.vc-project-body { padding: 1.3rem 1.4rem 1.4rem; }
.vc-project-body h3 { margin: .35rem 0 .4rem; }
.vc-project-body p { margin-bottom: 0; }
.vc-project-cat {
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vc-accent-dark);
}
.vc-status { z-index: 1; }
.vc-status {
    position: absolute; top: .8rem; right: .8rem; font-size: .75rem; font-weight: 700;
    padding: .3rem .65rem; border-radius: 99px; background: #fff; color: var(--vc-ink);
}
.vc-status.is-done { background: #16a34a; color: #fff; }
.vc-status.is-live { background: var(--vc-accent); color: #fff; }
.vc-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .88rem; color: var(--vc-muted); margin-top: .75rem; }
.vc-meta i { color: var(--vc-accent-dark); margin-right: .2rem; }

/* Category filter pills */
.vc-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.vc-site .vc-pills a {
    padding: .45rem 1rem; border-radius: 99px; border: 1px solid var(--vc-line);
    color: var(--vc-ink); text-decoration: none; font-weight: 600; font-size: .9rem; background: #fff;
}
.vc-site .vc-pills a:hover { border-color: var(--vc-accent); color: var(--vc-accent-dark); }
.vc-site .vc-pills a.active { background: var(--vc-ink); border-color: var(--vc-ink); color: #fff; }

/* Project detail */
.vc-site .vc-back { color: rgba(255,255,255,.75); text-decoration: none; font-size: .9rem; font-weight: 600; }
.vc-site .vc-back:hover { color: var(--vc-accent); }
.vc-gallery .carousel-inner { border-radius: var(--vc-radius); background: var(--vc-ink); aspect-ratio: 3 / 2; }
.vc-gallery .carousel-item { height: 100%; }
.vc-gallery .carousel-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vc-gallery-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1rem .75rem;
    color: #fff; font-size: .92rem; background: linear-gradient(transparent, rgba(0,0,0,.65));
}
/* Thumbnail strip: re-style Bootstrap's indicator bar into a static row of thumbnails. */
.vc-gallery .vc-thumbs {
    position: static; margin: .75rem 0 0; padding: 0; justify-content: flex-start;
    flex-wrap: wrap; gap: .5rem;
}
.vc-gallery .vc-thumbs [data-bs-target] {
    width: 84px; height: 63px; margin: 0; padding: 0; flex: 0 0 auto; text-indent: 0;
    border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; opacity: .55;
}
.vc-gallery .vc-thumbs [data-bs-target].active { opacity: 1; border-color: var(--vc-accent); }
.vc-gallery .vc-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-prose { color: var(--vc-muted); line-height: 1.75; }
.vc-prose h2 { color: var(--vc-ink); }
.vc-facts { background: var(--vc-sand); border-radius: var(--vc-radius); padding: 1.6rem; }
.vc-facts dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--vc-line); }
.vc-facts dl > div:last-child { border-bottom: 0; }
.vc-facts dt { font-weight: 500; color: var(--vc-muted); }
.vc-facts dt i { color: var(--vc-accent-dark); margin-right: .45rem; }
.vc-facts dd { margin: 0; font-weight: 650; text-align: right; }

.vc-empty {
    text-align: center; padding: 3.5rem 1.5rem; border: 2px dashed var(--vc-line);
    border-radius: var(--vc-radius); background: #fff;
}
.vc-empty > i { font-size: 2.5rem; color: var(--vc-accent); }

/* ---------- CTA band ---------- */
.vc-cta {
    background: var(--vc-accent); color: #fff; border-radius: calc(var(--vc-radius) + 4px);
    padding: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
}
.vc-cta h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 .3rem; }
.vc-cta p { margin: 0; opacity: .9; }

/* ---------- enquiry ---------- */
.vc-form-card { background: #fff; border: 1px solid var(--vc-line); border-radius: var(--vc-radius); padding: 2rem; }
.vc-form-card .form-control, .vc-form-card .form-select { padding: .65rem .85rem; border-radius: 10px; }
.vc-form-card .form-control:focus, .vc-form-card .form-select:focus {
    border-color: var(--vc-accent); box-shadow: 0 0 0 .2rem rgba(232,135,14,.18);
}
.vc-contact-card { background: var(--vc-ink); color: #fff; border-radius: var(--vc-radius); padding: 2rem; }
.vc-contact-card a { color: #fff; }
.vc-contact-item { display: flex; gap: .9rem; margin-bottom: 1.3rem; }
.vc-contact-item i {
    flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255,255,255,.08); color: var(--vc-accent); font-size: 1.15rem;
}
.vc-contact-item small { display: block; color: rgba(255,255,255,.6); }
.vc-contact-item > div { min-width: 0; overflow-wrap: anywhere; }
/* Honeypot: off-screen rather than display:none, which some bots detect. */
.vc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.vc-footer { background: var(--vc-ink); color: rgba(255,255,255,.72); padding: 3.5rem 0 1.5rem; margin-top: 0; }
/* The logo is designed for a light background, so give it a white tile on the dark footer. */
.vc-footer-logo { display: inline-block; background: #fff; border-radius: 10px; padding: .5rem .75rem; }
.vc-footer-logo img { display: block; max-height: 72px; max-width: 240px; }
.vc-footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
.vc-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.vc-footer a:hover { color: var(--vc-accent); }
.vc-footer li { margin-bottom: .45rem; }
.vc-footer-contact li { display: flex; gap: .6rem; }
/* Long email addresses must wrap rather than push the page wider than a phone screen. */
.vc-footer-contact li > :last-child { min-width: 0; overflow-wrap: anywhere; }
/* On phones the Explore links sit in two short columns instead of one long list. */
@media (max-width: 767.98px) {
    .vc-footer-links { columns: 2; column-gap: 1.5rem; }
    .vc-footer-links li { break-inside: avoid; }
}
.vc-footer-contact i { color: var(--vc-accent); }
.vc-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.25rem;
    display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; font-size: .88rem;
}

@media (max-width: 991.98px) {
    .vc-hero { padding: 3.5rem 0; }
    .vc-hero-art { margin: 2.5rem auto 0; max-width: 360px; }
    .vc-nav .navbar-collapse { padding-bottom: .75rem; }
}
@media (max-width: 575.98px) {
    .vc-section { padding: 3rem 0; }
    .vc-form-card, .vc-contact-card, .vc-cta { padding: 1.4rem; }
}