:root {
    --graphite: #111315;
    --graphite-2: #1a1d20;
    --concrete: #e8e6e0;
    --muted: #7f858a;
    --gold: #c89b3c;
    --white: #ffffff;
}

* { box-sizing: border-box; }

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--graphite);
    background: #fff;
}

[dir="rtl"] body {
    font-family: Tahoma, Arial, sans-serif;
}

.strucora-nav {
    padding: 1.15rem 0;
    background: linear-gradient(180deg, rgba(10,11,12,.85), transparent);
    transition: .25s ease;
}

.strucora-nav.scrolled {
    padding: .75rem 0;
    background: rgba(14,15,16,.96);
    backdrop-filter: blur(14px);
}

.navbar-brand { letter-spacing: .08em; }
.brand-dot, .admin-logo span { color: var(--gold); }

.nav-link { color: rgba(255,255,255,.8) !important; font-size: .94rem; }
.nav-link:hover, .language-link { color: #fff !important; }

.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #101112;
    font-weight: 700;
    border-radius: 0;
    padding-inline: 1.35rem;
}
.btn-gold:hover { background: #d7aa50; border-color: #d7aa50; color: #101112; }

.hero-section {
    min-height: 92vh;
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(9,10,11,.95) 0%, rgba(9,10,11,.68) 52%, rgba(9,10,11,.38) 100%),
        var(--hero-image, radial-gradient(circle at 80% 30%, #3c3f42 0%, #111315 50%, #0a0b0c 100%));
    background-size: cover;
    background-position: center;
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .14;
    background-image:
        linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: perspective(900px) rotateX(68deg) scale(1.5);
    transform-origin: center bottom;
}

.hero-content { padding-bottom: 7rem; z-index: 2; }
.eyebrow {
    color: var(--gold);
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 800;
}
.eyebrow.dark { color: #8f6b21; }

.hero-title {
    font-size: clamp(3.5rem, 8vw, 7.6rem);
    line-height: .92;
    letter-spacing: -.055em;
    max-width: 1050px;
    font-weight: 800;
}

.hero-lead {
    max-width: 690px;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    color: rgba(255,255,255,.72);
}

.stats-strip {
    background: var(--graphite-2);
    color: #fff;
    border-top: 1px solid rgba(255,255,255,.08);
}

.stat-box {
    padding: 2rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,.09);
}
[dir="rtl"] .stat-box { border-right: 0; border-left: 1px solid rgba(255,255,255,.09); }

.stat-box strong { display: block; font-size: 2rem; line-height: 1; }
.stat-box span { color: #959ba0; font-size: .82rem; display: block; margin-top: .55rem; }

.section-pad { padding: 7rem 0; }

.section-heading { max-width: 680px; margin-bottom: 2rem; }
.section-heading h2 {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.04em;
    margin: .6rem 0 1rem;
}
.section-heading p { color: #777d82; font-size: 1.05rem; }

.service-card {
    background: #fff;
    border: 1px solid #dddcd7;
    padding: 2rem;
    transition: transform .2s ease, border-color .2s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.service-number { color: var(--gold); font-size: .75rem; letter-spacing: .12em; }
.service-card h3 { margin: 2rem 0 .8rem; font-weight: 750; }
.service-card p { color: #777d82; margin: 0; }

.project-section { background: var(--graphite); }
.text-link { color: var(--gold); text-decoration: none; font-weight: 700; }

.project-card {
    height: 510px;
    display: block;
    position: relative;
    overflow: hidden;
    background: #202326;
    color: #fff;
    text-decoration: none;
}
.project-image {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, #34383b, #17191b);
    background-size: cover;
    background-position: center;
    transition: transform .5s ease;
}
.placeholder-project::after {
    content: "";
    position: absolute;
    inset: 12% 10%;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 80px 60px 0 -79px rgba(255,255,255,.18), -80px 100px 0 -79px rgba(255,255,255,.18);
}
.project-card:hover .project-image { transform: scale(1.045); }

.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(8,9,10,.95) 100%);
}
.project-overlay { position: absolute; z-index: 2; left: 1.5rem; right: 1.5rem; bottom: 1.6rem; }
[dir="rtl"] .project-overlay { text-align: right; }
.project-overlay span { color: var(--gold); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.project-overlay h3 { font-size: 1.55rem; margin: .4rem 0; }
.project-overlay small { color: rgba(255,255,255,.6); }

.sector-list { border-top: 1px solid #d8d7d1; }
.sector-row {
    display: grid;
    grid-template-columns: 55px 1fr 30px;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid #d8d7d1;
}
.sector-row > span:first-child { color: #9a9da0; font-size: .75rem; }
.sector-row strong { font-size: 1.15rem; }
.sector-arrow { text-align: end; color: var(--gold); }

.cta-section {
    background:
        linear-gradient(rgba(17,19,21,.92), rgba(17,19,21,.92)),
        repeating-linear-gradient(90deg, transparent 0 89px, rgba(255,255,255,.07) 90px);
}

.footer-section { background: #0b0c0d; color: #fff; }

.inner-hero, .project-detail-hero {
    min-height: 58vh;
    padding: 12rem 0 5rem;
    color: #fff;
    background: linear-gradient(135deg, #101214, #2b2e31);
}
.inner-hero h1, .project-detail-hero h1 {
    font-size: clamp(3.2rem, 7vw, 6.5rem);
    line-height: .94;
    letter-spacing: -.05em;
    max-width: 980px;
    font-weight: 800;
    margin-top: .7rem;
}
.inner-hero p { color: rgba(255,255,255,.65); max-width: 650px; margin-top: 1.5rem; }

.project-detail-hero {
    min-height: 72vh;
    background-size: cover;
    background-position: center;
}
.project-meta { display: flex; gap: 1rem; flex-wrap: wrap; }
.project-meta span { padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.8); }

.project-facts { border-top: 1px solid #ddd; }
.project-facts > div { padding: 1rem 0; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; gap: 1rem; }
.project-facts small { color: #83878a; }
.project-facts strong { text-align: end; }

.empty-state { border: 1px dashed #bbb; padding: 4rem 2rem; text-align: center; }

@media (max-width: 991.98px) {
    .hero-section { min-height: 82vh; }
    .hero-content { padding-bottom: 4rem; }
    .section-pad { padding: 5rem 0; }
    .project-card { height: 420px; }
    .strucora-nav { background: rgba(14,15,16,.94); }
}

@media (max-width: 575.98px) {
    .hero-title { font-size: 3.2rem; }
    .stat-box { padding: 1.4rem 1rem; }
    .project-card { height: 390px; }
}

.project-gallery-image { width:100%; height:420px; object-fit:cover; display:block; background:#e8e6e0; }
@media (max-width: 767px) { .project-gallery-image { height:260px; } }

.compact-hero { min-height: 50vh; }
.enquiry-form { display:grid; gap:1.5rem; }
.form-block { background:#fff; border:1px solid #deded8; padding:clamp(1.4rem,3vw,2.3rem); }
.form-block-title { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.6rem; }
.form-block-title > span { color:var(--gold); font-size:.75rem; font-weight:800; letter-spacing:.1em; padding-top:.35rem; }
.form-block-title h2 { font-weight:800; font-size:1.5rem; margin:0; }
.form-block-title p { margin:.3rem 0 0; color:#85898c; }
.enquiry-form .form-control,.enquiry-form .form-select { border-radius:0; border-color:#d7d6d0; padding:.85rem .9rem; }
.enquiry-form .form-control:focus,.enquiry-form .form-select:focus { border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(200,155,60,.12); }
.secure-upload { border:1px dashed #b7b6b0; padding:1.4rem; background:#fafaf8; }
.secure-upload small { display:block; color:#7b7f82; margin-top:.7rem; }
.honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; }


.compact-hero { min-height: 48vh; }

.client-home-section { background: #f4f3ef; }
.client-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #d9d8d2;
    border-left: 1px solid #d9d8d2;
}
.client-logo-card {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #fff;
    border-right: 1px solid #d9d8d2;
    border-bottom: 1px solid #d9d8d2;
    color: #1b1d1f;
    text-decoration: none;
    text-align: center;
    transition: background .2s ease, transform .2s ease;
}
.client-logo-card:hover { background: #f9f8f5; }
.client-logo-card img {
    width: min(160px, 82%);
    height: 72px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .8;
    transition: filter .2s ease, opacity .2s ease;
}
.client-logo-card:hover img { filter: grayscale(0); opacity: 1; }
.client-logo-card strong { font-size: 1rem; letter-spacing: .02em; }
.placeholder-logo { color: #a0a3a5; }
.dark-link { color: #8f6b21; }

.career-card {
    min-height: 230px;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
    background: #fff;
    border: 1px solid #dddcd7;
    color: #111315;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease;
}
.career-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.career-dept {
    color: #8f6b21;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 800;
}
.career-card h2 { font-weight: 800; margin: 1.1rem 0 2rem; letter-spacing: -.025em; }
.career-meta { display: flex; flex-wrap: wrap; gap: .55rem; }
.career-meta span {
    font-size: .76rem;
    color: #73787c;
    border: 1px solid #deddd8;
    padding: .35rem .55rem;
}
.career-arrow { color: var(--gold); font-size: 1.4rem; }

.job-copy h2 { font-weight: 800; letter-spacing: -.025em; }
.content-copy { color: #545a5e; line-height: 1.9; white-space: normal; }
.application-box {
    background: #f3f2ee;
    border: 1px solid #dddcd7;
    padding: 2rem;
    position: sticky;
    top: 7rem;
}
.application-box .form-control, .application-box .form-select {
    border-radius: 0;
    border-color: #d2d1cb;
    padding: .75rem .85rem;
}
.hp-field { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }

.document-list { display: grid; gap: 1px; background: #dad9d3; border: 1px solid #dad9d3; }
.document-card {
    background: #fff;
    color: #111315;
    padding: 1.7rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    text-decoration: none;
    transition: padding .2s ease, background .2s ease;
}
.document-card:hover { background: #f8f7f4; padding-inline: 2.35rem; }
.document-card span { color: #8f6b21; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.document-card h2 { font-size: 1.25rem; margin: .35rem 0; font-weight: 750; }
.document-card small { color: #858a8d; }
.document-card > strong { color: var(--gold); font-size: 1.7rem; }

.footer-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 2rem;
    align-items: end;
}
.footer-meta-grid > div { display: flex; flex-direction: column; gap: .35rem; }
.footer-copy { text-align: end; }
.footer-copy a { color: #9ca0a3; text-decoration: none; }
.footer-copy a:hover { color: #fff; }

@media (max-width: 991.98px) {
    .client-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .application-box { position: static; }
    .footer-meta-grid { grid-template-columns: 1fr 1fr; }
    .footer-copy { text-align: start; }
}
@media (max-width: 767.98px) {
    .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-logo-card { min-height: 125px; padding: 1rem; }
    .career-card { min-height: 200px; padding: 1.5rem; }
    .document-card { padding: 1.35rem; }
    .document-card:hover { padding-inline: 1.35rem; }
    .footer-meta-grid { grid-template-columns: 1fr; }
}


/* Phase 4 — corporate content, directories, filters and case studies */
.service-link-card { display:block; color:inherit; text-decoration:none; }
.service-link-card strong { display:inline-block; margin-top:1.5rem; color:#8f6b21; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
.service-link-card h2 { margin:2rem 0 .8rem; font-size:1.5rem; font-weight:800; }

.sector-row-link { color:inherit; text-decoration:none; transition:padding .2s ease, background .2s ease; }
.sector-row-link:hover { background:#f6f5f1; padding-inline:1rem; }

.detail-hero {
    min-height:68vh;
    padding:13rem 0 5rem;
    display:flex;
    align-items:flex-end;
    color:#fff;
    background:linear-gradient(135deg,#101214,#2b2e31);
    background-size:cover;
    background-position:center;
}
.detail-hero h1 {
    font-size:clamp(3.4rem,7vw,6.8rem);
    line-height:.94;
    letter-spacing:-.055em;
    font-weight:850;
    max-width:1050px;
    margin:.7rem 0 1.3rem;
}
.detail-hero p { max-width:720px; color:rgba(255,255,255,.72); font-size:1.16rem; }

.large-copy { font-size:1.08rem; line-height:2; }
.technical-panel { border:1px solid #dddcd7; background:#f5f4f0; padding:2rem; position:sticky; top:7rem; }
.technical-list { list-style:none; margin:0; padding:0; }
.technical-list li { padding:.85rem 0; border-bottom:1px solid #d8d7d1; position:relative; padding-inline-start:1.2rem; }
.technical-list li::before { content:""; width:5px; height:5px; background:var(--gold); position:absolute; inset-inline-start:0; top:1.35rem; }

.sector-directory { border-top:1px solid #d9d8d2; }
.sector-directory-row {
    display:grid;
    grid-template-columns:70px minmax(0,1fr) 40px;
    gap:1.5rem;
    align-items:start;
    padding:2rem 0;
    border-bottom:1px solid #d9d8d2;
    text-decoration:none;
    color:inherit;
    transition:padding .2s ease;
}
.sector-directory-row:hover { padding-inline:1rem; }
.sector-directory-row > span { color:#9a9da0; font-size:.78rem; padding-top:.4rem; }
.sector-directory-row h2 { font-weight:800; letter-spacing:-.03em; margin:0 0 .45rem; }
.sector-directory-row p { margin:0; color:#7d8285; max-width:700px; }
.sector-directory-row > strong { color:var(--gold); font-size:1.4rem; text-align:end; }

.principle-card { min-height:330px; border:1px solid rgba(255,255,255,.12); padding:2rem; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.principle-card > span { position:absolute; top:1.7rem; inset-inline-start:1.7rem; color:rgba(255,255,255,.28); font-size:.75rem; }
.principle-card h2 { font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.15; margin-top:1rem; }

.value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #dddcd7; border-left:1px solid #dddcd7; }
.value-card { min-height:150px; padding:1.5rem; border-right:1px solid #dddcd7; border-bottom:1px solid #dddcd7; display:flex; flex-direction:column; justify-content:space-between; }
.value-card span { color:#a0a3a5; font-size:.75rem; }
.value-card strong { font-size:1.3rem; }

.info-card { border:1px solid #dddcd7; padding:2rem; background:#fff; }
.info-card h3 { font-weight:800; margin-bottom:1rem; }
.info-card p { color:#666c70; line-height:1.8; margin:0; }

.timeline-list { border-top:1px solid #d8d7d1; }
.timeline-list > div { display:grid; grid-template-columns:60px 1fr; gap:1rem; padding:1.15rem 0; border-bottom:1px solid #d8d7d1; }
.timeline-list span { color:#9a9da0; font-size:.75rem; }

.split-heading { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:end; }
.split-heading h2 { font-size:clamp(2.5rem,5vw,4.5rem); font-weight:850; line-height:1; letter-spacing:-.045em; margin:.7rem 0 0; }
.split-heading > p { color:#6d7276; font-size:1.05rem; line-height:1.8; margin:0; }
.split-heading.light > p { color:rgba(255,255,255,.6); }

.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #d9d8d2; border-left:1px solid #d9d8d2; }
.process-card { padding:2rem; min-height:260px; border-right:1px solid #d9d8d2; border-bottom:1px solid #d9d8d2; }
.process-card > span { color:var(--gold); font-size:.75rem; }
.process-card h3 { font-weight:800; margin:3rem 0 1rem; }
.process-card p { color:#6f7477; margin:0; line-height:1.75; }

.hse-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); }
.hse-grid article { background:#151719; padding:2rem; min-height:230px; }
.hse-grid h3 { font-weight:800; margin-bottom:1rem; }
.hse-grid p { color:rgba(255,255,255,.55); line-height:1.75; margin:0; }

.contact-facts { border-top:1px solid #d8d7d1; }
.contact-facts > div { padding:1.25rem 0; border-bottom:1px solid #d8d7d1; display:flex; flex-direction:column; gap:.3rem; }
.contact-facts small { color:#8b8f92; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; }
.contact-facts strong { font-size:1.08rem; word-break:break-word; }
.contact-form .form-control { border-radius:0; padding:.85rem; }

.project-filter-section { background:#fff; border-bottom:1px solid #dddcd7; position:relative; z-index:3; }
.project-filter-form { display:grid; grid-template-columns:repeat(6,minmax(120px,1fr)) auto auto; gap:.7rem; padding:1.2rem 0; }
.project-filter-form .form-control,.project-filter-form .form-select,.project-filter-form .btn { border-radius:0; min-height:46px; }
.project-result-head { color:#7d8285; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }

.tag-list { display:flex; flex-wrap:wrap; gap:.6rem; }
.tag-list a { color:#33383c; text-decoration:none; border:1px solid #d7d6d1; padding:.5rem .75rem; font-size:.82rem; }
.tag-list a:hover { border-color:var(--gold); color:#8f6b21; }

.case-study-list { border-top:1px solid #d8d7d1; }
.case-study-row { display:grid; grid-template-columns:70px minmax(180px,.7fr) 1.5fr; gap:2rem; padding:2rem 0; border-bottom:1px solid #d8d7d1; }
.case-study-row > span { color:#9a9da0; font-size:.75rem; }
.case-study-row h3 { font-weight:800; font-size:1.3rem; margin:0; }
.case-study-row .content-copy { margin:0; }

.footer-links { display:flex; flex-wrap:wrap; gap:1.2rem 1.7rem; }
.footer-links a { color:#9ca0a3; text-decoration:none; font-size:.88rem; }
.footer-links a:hover { color:#fff; }

@media(max-width:1199.98px) {
    .project-filter-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:991.98px) {
    .technical-panel { position:static; }
    .split-heading { grid-template-columns:1fr; gap:1.5rem; }
    .process-grid,.hse-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .case-study-row { grid-template-columns:50px 1fr; }
    .case-study-row .content-copy { grid-column:2; }
}
@media(max-width:767.98px) {
    .detail-hero { min-height:58vh; padding:10rem 0 4rem; }
    .project-filter-form { grid-template-columns:1fr 1fr; }
    .process-grid,.hse-grid { grid-template-columns:1fr; }
    .value-grid { grid-template-columns:1fr; }
    .sector-directory-row { grid-template-columns:45px 1fr 25px; gap:.8rem; }
}
@media(max-width:575.98px) {
    .project-filter-form { grid-template-columns:1fr; }
    .case-study-row { grid-template-columns:1fr; gap:.8rem; }
    .case-study-row .content-copy { grid-column:1; }
}

/* Phase 5 */
.cert-card { background:#fff; border:1px solid #deded8; overflow:hidden; }
.cert-card > img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#e8e8e4; }
.cert-card-body { padding:1.5rem; }
.dark-link { color:#8f6b21; }
.project-gallery-group:last-child { margin-bottom:0 !important; }
.gallery-type-mark { width:28px; height:2px; background:var(--gold); display:inline-block; }


/* Phase 6 visual/demo polish */
.visual-inner-hero { background-size:cover !important; background-position:center !important; }
.service-link-card { overflow:hidden; display:block; text-decoration:none; color:inherit; }
.service-media { display:block; height:155px; margin:-2rem -2rem 1.7rem; background-size:cover; background-position:center; position:relative; }
.service-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(12,13,14,.32)); }
.service-directory-card h2 { font-size:1.35rem; font-weight:800; }
.sector-directory-row { grid-template-columns:55px 126px 1fr 30px !important; }
.sector-thumb { width:126px; height:82px; background-size:cover; background-position:center; display:block; }
.contact-visual { min-height:250px; background-size:cover; background-position:center; position:relative; }
.contact-visual::after { content:""; position:absolute; inset:0; border:1px solid rgba(17,19,21,.08); box-shadow:inset 0 0 0 10px rgba(255,255,255,.14); }
.demo-notice { margin-top:72px; background:#fff5dc; border-top:1px solid #e7cf93; border-bottom:1px solid #e7cf93; color:#5e4819; padding:.7rem 0; font-size:.82rem; }
@media (max-width:767px){ .sector-directory-row{grid-template-columns:42px 1fr 24px !important}.sector-thumb{display:none}.service-media{height:135px} }
.site-logo{max-height:44px;max-width:190px;object-fit:contain}.footer-logo{max-height:58px;max-width:220px;object-fit:contain}.maintenance-screen{min-height:100vh;background:var(--graphite,#111315);color:#fff;display:grid;place-items:center;padding:30px}.maintenance-card{max-width:720px;text-align:center}.maintenance-card h1{font-size:clamp(2.5rem,6vw,5rem);font-weight:800;letter-spacing:-.04em}.project-video{aspect-ratio:16/9;width:100%;border:0}.project-docs a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #ddd;text-decoration:none;color:inherit}.related-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:767px){.related-project-grid{grid-template-columns:1fr}.before-after-grid{grid-template-columns:1fr}.before-after-grid img{height:300px}}
.home-section-stack{display:flex;flex-direction:column}.home-section-stack>section{width:100%}
.before-after-grid figure{margin:0;position:relative}.before-after-grid figcaption{position:absolute;left:18px;bottom:18px;background:#111;color:#fff;padding:7px 12px;font-weight:700}.site-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:99999;display:grid;place-items:center;padding:40px}.site-lightbox img{max-width:95vw;max-height:90vh;object-fit:contain}.site-lightbox button{position:absolute;right:24px;top:18px;border:0;background:none;color:#fff;font-size:2.5rem}.project-gallery-image,[data-lightbox]{cursor:zoom-in}
body{font-family:var(--site-font,Inter,"Segoe UI",Arial,sans-serif)}h1,h2,h3,h4,h5,h6,.hero-title{font-weight:var(--heading-weight,800)}

.footer-social{display:flex;flex-wrap:wrap;gap:1rem}.footer-social a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.86rem}.footer-social a:hover{color:var(--gold)}


/* Phase 7 before / after comparison */
.before-after-compare{--compare-position:50%;position:relative;overflow:hidden;aspect-ratio:16/9;background:#17191b;isolation:isolate}.before-after-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.before-after-reveal{position:absolute;inset:0;clip-path:inset(0 0 0 var(--compare-position));z-index:2}.before-after-divider{position:absolute;z-index:4;top:0;bottom:0;left:var(--compare-position);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none;filter:drop-shadow(0 0 5px rgba(0,0,0,.45))}.before-after-divider i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-style:normal;font-size:1.15rem;font-weight:800;box-shadow:0 8px 28px rgba(0,0,0,.3)}.before-after-range{position:absolute;z-index:5;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.before-after-label{position:absolute;z-index:3;bottom:18px;background:rgba(17,19,21,.85);color:#fff;padding:7px 12px;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;pointer-events:none}.before-after-label.label-before{left:18px}.before-after-label.label-after{right:18px}@media(max-width:767px){.before-after-compare{aspect-ratio:4/3}.before-after-divider i{width:38px;height:38px}}