* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#111;
    color:#eee;
    line-height:1.6
}
a {
    color:#fff
}
img {
    max-width:100%;
    height:auto
}
h1,h2 {
    line-height:1.2
}
.hero {
    min-height:72vh;
    display:grid;
    place-items:center;
    text-align:center;
    padding:40px 20px;
    position:relative;
    overflow:hidden;
    background:#333
}
.home-hero:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(#0007,#000b),url('../images/Custom-Fabrication-and-Inst.jpg') center 48%/cover no-repeat;
    opacity:0;
    transform:scale(1.015);
    animation:heroFade 1.8s ease-out .15s forwards
}
.hero-content {
    position:relative;
    z-index:1
}
.hero-logo {
    max-width:min(760px,94vw);
    filter:drop-shadow(0 3px 8px #000)
}
.hero p {
    max-width:760px;
    margin:12px auto 22px;
    font-size:1.15rem;
    text-shadow:0 2px 5px #000
}
.nav {
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap
}
.btn,button {
    background:#eee;
    color:#111;
    border:0;
    border-radius:7px;
    padding:12px 18px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none
}
.btn.alt {
    background:#333;
    color:#fff;
    border:1px solid #666
}
.btn.active {
    box-shadow:0 0 0 2px #fff inset
}
.section {
    max-width:1100px;
    margin:auto;
    padding:64px 20px
}
.section h1 {
    font-size:2.25rem;
    margin:0 0 12px
}
.section h2 {
    font-size:2rem;
    margin:0 0 18px
}
.home-about {
    max-width:1140px;
    padding-top:34px;
    padding-bottom:76px
}
.home-about-heading {
    text-align:center;
    margin:0 auto 46px
}
.home-about-heading h1 {
    font-size:2.85rem;
    margin:0 0 2px
}
.home-about-heading h2 {
    font-size:1.9rem;
    font-weight:400;
    margin:0
}
.about-grid {
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:24px;
    align-items:center;
    max-width:960px;
    margin:0 auto
}
.about-grid img {
    width:100%;
    border-radius:7px;
    display:block
}
.about-copy {
    padding-left:0
}
.about-copy p {
    margin:0 0 16px
}
.about-copy .actions {
    margin-top:8px
}
.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.actions.center {
    justify-content:center
}
.home-links {
    text-align:center;
    padding-top:35px
}
.page-header {
    background:#050505;
    text-align:center;
    padding-bottom:22px;
    border-bottom:1px solid #333
}
.page-banner {
    display:block;
    width:100%;
    max-width:960px;
    margin:0 auto 22px
}
.gallery-banner {
    aspect-ratio:3/1;
    object-fit:cover
}
.page-nav {
    padding:0 15px
}
.contact-header {
    padding-top:25px
}
.contact-logo {
    display:block;
    width:min(400px,88vw);
    margin:0 auto 22px
}
.gallery-tabs {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:28px 0 20px
}
.gallery-tabs button.active {
    background:#fff
}
.gallery-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px
}
.gallery-card {
    border:0;
    padding:0;
    background:#222;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer
}
.gallery-card img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block
}
.contact-wrap {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:36px
}
.contact-form {
    display:grid;
    gap:12px
}
.contact-form input,.contact-form textarea,.contact-form select {
    width:100%;
    padding:13px;
    border:1px solid #555;
    border-radius:7px;
    background:#1b1b1b;
    color:#fff;
    font:inherit
}
.contact-form textarea {
    min-height:170px;
    resize:vertical
}
.hp {
    position:absolute!important;
    left:-9999px!important
}
.notice {
    padding:12px;
    border-radius:6px;
    background:#253225
}
.notice.error {
    background:#522
}
.footer {
    text-align:center;
    padding:30px 20px;
    color:#aaa;
    border-top:1px solid #333
}
.lightbox {
    position:fixed;
    inset:0;
    background:#000e;
    display:none;
    z-index:99;
    align-items:center;
    justify-content:center;
    padding:20px
}
.lightbox.open {
    display:flex
}
.lightbox img {
    max-width:95vw;
    max-height:90vh
}
.lightbox button {
    position:absolute;
    top:18px;
    right:18px;
    font-size:20px
}
.adminbar {
    max-width:1200px;
    margin:auto;
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.admin-grid {
    max-width:1200px;
    margin:auto;
    padding:20px
}
.cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}
.card {
    background:#202020;
    padding:12px;
    border-radius:8px
}
.card img {
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:5px
}
.row {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center
}
.panel {
    background:#191919;
    padding:18px;
    border-radius:9px;
    margin-bottom:18px
}
.small {
    font-size:.88rem;
    color:#bbb
}
.danger {
    background:#7a2222;
    color:#fff
}
@keyframes heroFade {
    to {
        opacity:1;
        transform:scale(1)
    }
}
@media(prefers-reduced-motion:reduce) {
    .home-hero:before {
        animation:none;
        opacity:1;
        transform:none
    }
}
@media(max-width:800px) {
    .about-grid,.contact-wrap {
        grid-template-columns:1fr
    }
    .gallery-grid,.cards {
        grid-template-columns:repeat(2,1fr)
    }
    .hero {
        min-height:60vh
    }
    .home-hero:before {
        background-position:42% center
    }
    .section {
        padding:50px 18px
    }
}
@media(max-width:480px) {
    .gallery-grid,.cards {
        grid-template-columns:1fr 1fr
    }
    .section {
        padding:44px 15px
    }
    .btn,button {
        padding:11px 13px
    }
    .hero p {
        font-size:1rem
    }
    .hero {
        min-height:64vh;
        padding:30px 14px
    }
    .home-hero:before {
        background-position:38% center
    }
    .page-header {
        padding-bottom:18px
    }
    .gallery-banner {
        margin-bottom:18px
    }
}
@media(max-width:800px) {
    .home-about-heading {
        margin-bottom:30px
    }
    .home-about-heading h1 {
        font-size:2.25rem
    }
    .home-about-heading h2 {
        font-size:1.5rem
    }
    .home-about .about-grid {
        gap:24px
    }
    .about-copy {
        padding:0 4px
    }
}
@media(max-width:480px) {
    .home-about {
        padding-top:30px;
        padding-bottom:52px
    }
    .home-about-heading h1 {
        font-size:1.9rem
    }
    .home-about-heading h2 {
        font-size:1.25rem
    }
    .home-about-heading {
        margin-bottom:24px
    }
}
/* Home introduction proportions — matched to approved example */
.home-about {
    max-width:1180px;
    padding-top:36px;
    padding-bottom:82px
}
.home-about-heading {
    margin:0 auto 48px;
    text-align:center
}
.home-about-heading h1 {
    font-size:3rem;
    line-height:1.08;
    margin:0 0 4px;
    font-weight:700
}
.home-about-heading h2 {
    font-size:2rem;
    line-height:1.15;
    font-weight:400;
    margin:0
}
.home-about .about-grid {
    grid-template-columns:468px minmax(0,1fr);
    gap:26px;
    max-width:1135px;
    align-items:center
}
.home-about .about-grid img {
    width:468px;
    height:158px;
    object-fit:cover;
    border-radius:7px
}
.home-about .about-copy {
    font-size:1rem;
    line-height:1.42
}
.home-about .about-copy p {
    margin:0 0 17px
}
.home-about .about-copy .actions {
    margin-top:6px;
    gap:10px
}
.home-about .about-copy .btn {
    font-size:1rem;
    padding:13px 18px
}
@media(max-width:800px) {
    .home-about {
        padding-top:34px;
        padding-bottom:60px
    }
    .home-about-heading {
        margin-bottom:32px
    }
    .home-about-heading h1 {
        font-size:2.35rem
    }
    .home-about-heading h2 {
        font-size:1.55rem;
        line-height:1.2
    }
    .home-about .about-grid {
        grid-template-columns:1fr;
        max-width:620px;
        gap:26px
    }
    .home-about .about-grid img {
        width:100%;
        height:auto;
        aspect-ratio:2.96/1;
        object-fit:cover
    }
    .home-about .about-copy {
        font-size:1rem;
        line-height:1.5
    }
}
@media(max-width:480px) {
    .home-about-heading h1 {
        font-size:2rem
    }
    .home-about-heading h2 {
        font-size:1.3rem
    }
    .home-about .about-grid img {
        aspect-ratio:2.2/1
    }
    .home-about .about-copy {
        line-height:1.55
    }
}

/* Gallery Admin — compact controls and clean typography */
.adminbar,
.admin-grid,
.admin-grid input,
.admin-grid select,
.admin-grid textarea,
.admin-grid button,
.adminbar .btn {
    font-family: Arial, Helvetica, sans-serif;
}

.admin-grid button,
.adminbar .btn {
    font-size: 13px;
    line-height: 1.1;
    padding: 7px 12px;
    min-height: 30px;
    border-radius: 5px;
}

.admin-grid .card .row {
    gap: 6px;
    margin-top: 6px;
}

.admin-grid .card .row button {
    padding: 6px 10px;
    min-height: 28px;
}

.admin-grid .card select {
    height: 28px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1.1;
}

.admin-grid .card form + form {
    margin-top: 6px;
}

.admin-grid .card form:last-child {
    margin-top: 8px;
}

.admin-grid .card .danger {
    padding: 6px 11px;
    min-height: 28px;
}

.admin-grid input,
.admin-grid select,
.admin-grid textarea {
    font-size: 14px;
}

@media(max-width:480px) {
    .admin-grid button,
    .adminbar .btn {
        padding: 7px 10px;
    }
}

/* Services */
.services {
    padding-top: 28px;
    padding-bottom: 42px;
    text-align: center;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 24px;
    text-align: left;
}
.service-grid > div {
    background: #191919;
    border: 1px solid #2d2d2d;
    border-radius: 8px;
    padding: 18px;
}
.service-grid h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}
.service-grid p {
    margin: 0;
    color: #ccc;
}

/* Gallery Admin category view */
.gallery-admin-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 14px;
}
.gallery-admin-heading h2 {
    margin: 0;
}
.card[hidden],
.gallery-card[hidden] {
    display: none !important;
}

@media(max-width: 800px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 480px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
    .gallery-admin-heading {
        align-items: flex-start;
    }
}

/* Gallery Admin category management */
.category-admin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.category-admin-row .category-rename-form {
    flex: 1 1 auto;
    margin: 0;
}

.category-admin-row .category-rename-form input[name="name"] {
    flex: 1 1 260px;
}

.category-admin-row .category-delete-form {
    flex: 0 0 auto;
    margin: 0;
}

.category-admin-row .danger {
    padding: 7px 11px;
    min-height: 30px;
    white-space: nowrap;
}

.category-admin-row button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media(max-width: 620px) {
    .category-admin-row {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .category-admin-row .category-rename-form {
        width: 100%;
    }

    .category-admin-row .category-delete-form .danger {
        width: 100%;
    }
}

/* Gallery Admin — modern compact form controls */
.admin-grid .panel > h2 {
    margin-bottom: 14px;
}

.admin-grid .category-add-form {
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 720px;
}

.admin-grid .admin-field,
.admin-grid .contact-form select,
.admin-grid .contact-form input:not([type="file"]) {
    height: 36px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #555;
    border-radius: 7px;
    background: #1b1b1b;
    color: #fff;
    font: 14px/1.2 Arial, Helvetica, sans-serif;
    outline: none;
}

.admin-grid .admin-field:focus,
.admin-grid select:focus,
.admin-grid input:focus {
    border-color: #999;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

.admin-grid button,
.adminbar .btn,
.admin-grid .btn {
    min-height: 26px;
    padding: 5px 11px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #303030;
    color: #f5f5f5;
    font: 700 12px/1.15 Arial, Helvetica, sans-serif;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.admin-grid button:hover,
.adminbar .btn:hover,
.admin-grid .btn:hover {
    background: #3b3b3b;
    border-color: #777;
}

.admin-grid button:active,
.adminbar .btn:active,
.admin-grid .btn:active {
    transform: translateY(1px);
}

.admin-grid .danger {
    background: #7a2222;
    border-color: #963232;
    color: #fff;
}

.admin-grid .danger:hover {
    background: #8d2929;
    border-color: #ad4040;
}

.category-divider {
    height: 1px;
    margin: 18px 0 14px;
    background: #333;
}

.category-admin-row {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    gap: 8px;
    max-width: 720px;
    margin: 8px 0 0;
}

.category-admin-row .category-rename-form {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto;
    gap: 8px;
    width: 100%;
    margin: 0;
}

.category-admin-row .category-rename-form input[name="name"] {
    width: 100%;
    min-width: 0;
}

.category-admin-row .category-delete-form,
.category-admin-row .danger {
    margin: 0;
    white-space: nowrap;
}

.file-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    margin-top: 4px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid #555;
    border-radius: 7px;
    background: #1b1b1b;
}

.file-picker input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-picker-button {
    flex: 0 0 auto;
    padding: 5px 10px;
    border: 1px solid #666;
    border-radius: 5px;
    background: #303030;
    color: #fff;
    font: 700 12px/1.2 Arial, Helvetica, sans-serif;
}

.file-picker-name {
    min-width: 0;
    overflow: hidden;
    color: #bbb;
    font: 13px/1.2 Arial, Helvetica, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-grid .upload-button {
    min-height: 30px;
}

/* Keep the full homepage hero photograph visible on narrow screens. */
@media(max-width: 800px) {
    .home-hero {
        min-height: 0;
        padding: 42px 16px;
        background: #222;
    }

    .home-hero:before {
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

@media(max-width: 620px) {
    .admin-grid .category-add-form {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .category-admin-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .category-admin-row .category-delete-form .danger {
        width: auto;
    }
}

@media(max-width: 430px) {
    .admin-grid .category-add-form,
    .category-admin-row .category-rename-form {
        grid-template-columns: 1fr;
    }

    .admin-grid .category-add-form button,
    .category-admin-row .category-rename-form button,
    .category-admin-row .category-delete-form .danger {
        width: 100%;
    }
}

/* Category form action buttons align with their 36px fields. */
.admin-grid .category-add-form button,
.category-admin-row .category-rename-form button {
    height: 36px;
    min-height: 36px;
    padding: 6px 12px;
}

/* Category delete button aligns with the 36px category fields. */
.category-admin-row .category-delete-form .danger {
    height: 36px;
    min-height: 36px;
    padding: 6px 12px;
}

/* Responsive image delivery: the hero image is now a real responsive image rather than a CSS background. */
.home-hero:before {
    content:none;
}
.hero-background,
.hero-shade {
    position:absolute;
    inset:0;
}
.hero-background {
    z-index:0;
    display:block;
    opacity:0;
    animation:heroFade 1.8s ease-out .15s forwards;
}
.hero-background img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 48%;
}
.hero-shade {
    z-index:0;
    pointer-events:none;
    background:linear-gradient(#0007,#000b);
}
.about-grid picture {
    display:block;
}
.about-grid picture img {
    width:100%;
    display:block;
    border-radius:10px;
}
.page-header picture {
    display:block;
    width:100%;
}
.contact-header picture {
    width:auto;
}

@media(max-width:800px) {
    .home-hero {
        min-height:0;
        aspect-ratio:2048 / 1202;
        padding:24px 16px;
    }
    .hero-background img {
        object-fit:contain;
        object-position:center center;
    }
    .hero-shade {
        background:linear-gradient(#0005,#0009);
    }
}

@media(max-width:560px) {
    .home-hero {
        aspect-ratio:auto;
        min-height:58vw;
    }
    .hero-logo {
        max-width:min(560px,92vw);
    }
    .hero p {
        margin:8px auto 14px;
        font-size:.95rem;
    }
}


/* HOME HERO RESPONSIVE FIX */
.home-hero {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background: #444;
    isolation: isolate;
}

.home-hero .hero-picture {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.home-hero .hero-picture img,
.home-hero .hero-bg-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.46);
    pointer-events: none;
}

.home-hero .hero-content {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .home-hero {
        min-height: 390px;
    }
}

@media (max-width: 600px) {
    .home-hero {
        min-height: 330px;
    }

    .home-hero .hero-picture img,
    .home-hero .hero-bg-image {
        object-fit: contain;
        object-position: center center;
    }
}


/* HOME HERO — MOBILE CONTENT CLEARANCE + LIGHTER SILHOUETTE */
.home-hero::after {
    background: rgba(0, 0, 0, 0.31);
}

@media (max-width: 600px) {
    .home-hero {
        min-height: 390px;
        height: auto;
        padding-bottom: 22px;
    }

    .home-hero .hero-content {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        min-height: 368px;
        padding-bottom: 18px;
    }

    .home-hero .hero-picture,
    .home-hero .hero-picture img,
    .home-hero .hero-bg-image {
        min-height: 100%;
    }
}


/* ============================================================
   HOME HERO — TABLET / SMALL-LAPTOP WIDTH FIX
   At intermediate viewport widths, let the content determine
   the hero's required height and allow the navigation to wrap
   cleanly instead of overlapping the following section.
   ============================================================ */
@media (max-width: 1100px) {
    .home-hero {
        height: auto;
        min-height: 410px;
        padding-bottom: 24px;
    }

    .home-hero .hero-content {
        box-sizing: border-box;
        width: min(94%, 900px);
        max-width: 900px;
        min-height: 386px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 22px;
    }

    .home-hero nav,
    .home-hero .hero-nav,
    .home-hero .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .home-hero nav a,
    .home-hero .hero-nav a,
    .home-hero .nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    .home-hero {
        min-height: 400px;
    }

    .home-hero .hero-content {
        width: 100%;
        min-height: 376px;
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 600px) {
    .home-hero {
        min-height: 400px;
        padding-bottom: 24px;
    }

    .home-hero .hero-content {
        min-height: 376px;
        padding-bottom: 20px;
    }
}


/* ============================================================
   GALLERY IMAGE CAPTIONS + VISIBILITY
   ============================================================ */
.image-admin-card {
    position: relative;
}

.image-admin-card.is-hidden-image > img {
    opacity: 0.42;
}

.image-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0 8px;
}

.image-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid #555;
    border-radius: 999px;
    font: 700 11px/1 Arial, Helvetica, sans-serif;
}

.visible-status {
    background: #253326;
}

.hidden-status {
    background: #3b2b2b;
}

.image-caption-form {
    margin: 0 0 7px;
}

.image-caption-label {
    display: block;
    margin: 0 0 6px;
    font: 700 12px/1.25 Arial, Helvetica, sans-serif;
}

.image-caption-input {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    margin-top: 5px;
    padding: 6px 9px;
    border: 1px solid #555;
    border-radius: 5px;
    background: #181818;
    color: #fff;
    font: 400 13px/1.2 Arial, Helvetica, sans-serif;
}

.image-save-button,
.image-visibility-form .admin-action {
    min-height: 32px;
    height: 32px;
}

.image-visibility-form {
    margin: 0 0 8px;
}

.hide-image-button {
    background: #3b3b3b;
}

.show-image-button {
    background: #245b32;
}

.lightbox-content {
    max-width: min(94vw, 1200px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: calc(92vh - 70px);
    object-fit: contain;
}

.lightbox-caption {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    text-align: center;
    font: 400 15px/1.4 Arial, Helvetica, sans-serif;
}


/* ============================================================
   LIGHTBOX CAPTION — BOTTOM OVERLAY THAT EXPANDS DOWNWARD
   The first caption strip overlaps the bottom of the image.
   If the text wraps, extra height grows below the photograph
   rather than covering progressively more of the image.
   ============================================================ */
.lightbox-content {
    position: relative;
    width: fit-content;
    max-width: min(94vw, 1200px);
    max-height: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.lightbox-content img {
    display: block;
    width: auto;
    max-width: min(94vw, 1200px);
    max-height: 84vh;
    object-fit: contain;
}

.lightbox-caption {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    margin-top: -46px;
    padding: 12px 16px;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.76);
    color: #fff;
    text-align: left;
    font: 400 15px/1.45 Arial, Helvetica, sans-serif;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .lightbox-content img {
        max-width: 94vw;
        max-height: 78vh;
    }

    .lightbox-caption {
        min-height: 44px;
        margin-top: -44px;
        padding: 11px 13px;
        font-size: 14px;
        line-height: 1.4;
    }
}


/* ============================================================
   LIGHTBOX CAPTION — DESKTOP WIDTH CORRECTION
   Keep caption exactly within the displayed image/figure width.
   Long captions wrap downward, never wider than the photograph.
   ============================================================ */
@media (min-width: 601px) {
    .lightbox-content {
        width: min(94vw, 1200px);
        max-width: min(94vw, 1200px);
        align-items: center;
    }

    .lightbox-content img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 84vh;
        margin-left: auto;
        margin-right: auto;
    }

    .lightbox-caption {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        box-sizing: border-box;
    }
}

/* For the normal landscape gallery photographs, constrain the figure itself
   to the image's practical display width rather than allowing caption text
   to establish a wider intrinsic width. */
.lightbox-content {
    contain: layout;
}

.lightbox-caption {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}


/* GALLERY ADMIN — THREE-LINE CAPTION EDITOR */
.image-caption-textarea {
    display: block;
    width: 100%;
    height: auto;
    min-height: 66px;
    padding: 7px 9px;
    resize: vertical;
    line-height: 1.35;
    overflow-y: auto;
}


/* ============================================================
   GALLERY ADMIN CAPTION EDITOR — TRUE THREE-LINE DEFAULT
   ============================================================ */
.image-caption-input.image-caption-textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 78px;
    min-height: 78px;
    max-height: none;
    padding: 8px 9px;
    resize: vertical;
    overflow-y: auto;
    line-height: 1.4;
}

/* ============================================================
   LIGHTBOX — IMAGE DEFINES CAPTION WIDTH
   JS records the actual rendered image width after the image
   loads. The caption then wraps only inside that exact width.
   ============================================================ */
.lightbox-content {
    width: auto;
    max-width: 94vw;
    align-items: flex-start;
}

.lightbox-content img {
    width: auto;
    max-width: 94vw;
    height: auto;
}

.lightbox-content.is-image-sized {
    width: var(--lightbox-image-width);
    max-width: var(--lightbox-image-width);
}

.lightbox-content.is-image-sized img,
.lightbox-content.is-image-sized .lightbox-caption {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.lightbox-content.is-image-sized img {
    height: auto;
    object-fit: contain;
}

.lightbox-caption {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

/* GALLERY ADMIN — UPLOAD / PROCESSING FEEDBACK */
.upload-progress-panel{margin-top:10px;padding:10px 12px;border:1px solid #4a4a4a;border-radius:6px;background:#171717;font-family:Arial,Helvetica,sans-serif}
.upload-progress-status{margin-bottom:7px;font-size:13px;font-weight:700;color:#fff}
.upload-progress-track{width:100%;height:12px;overflow:hidden;border:1px solid #555;border-radius:999px;background:#292929}
.upload-progress-bar{width:0;height:100%;border-radius:inherit;background:#e8e8e8;transition:width .15s linear}
.upload-progress-panel.is-processing .upload-progress-bar{width:100%!important;animation:gallery-processing-pulse 1.15s ease-in-out infinite alternate}
.upload-progress-detail{margin-top:7px;color:#bdbdbd;font-size:12px;line-height:1.35}
#upload-submit-button:disabled{opacity:.6;cursor:wait}
@keyframes gallery-processing-pulse{from{opacity:.42}to{opacity:1}}

/* GALLERY ADMIN — BULK CAPTION SAVE */
.gallery-admin-heading-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}
#save-all-captions:disabled{opacity:.65;cursor:wait}
@media(max-width:600px){
    .gallery-admin-heading{align-items:flex-start}
    .gallery-admin-heading-actions{width:100%;justify-content:flex-start}
}

/* SAVE ALL CAPTIONS — prominent gallery-wide control */
.save-all-captions-row{
    display:flex;
    width:100%;
    margin:0 0 12px;
}
.save-all-captions-button{
    display:block !important;
    width:100%;
    min-height:34px;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:700;
    cursor:pointer;
}

/* ============================================================
   GALLERY ADMIN — DRAG / TOUCH REORDERING
   ============================================================ */
.image-drag-handle{
    display:block;
    width:100%;
    min-height:32px;
    margin:0 0 8px;
    padding:6px 9px;
    border:1px solid #555;
    border-radius:5px;
    background:#242424;
    color:#ddd;
    font:700 12px/1.2 Arial,Helvetica,sans-serif;
    text-align:center;
    cursor:grab;
    touch-action:none;
}
.image-drag-handle:active{cursor:grabbing}
.image-admin-card.is-dragging{
    opacity:.58;
    outline:2px dashed #aaa;
    outline-offset:2px;
}
.image-admin-card.is-touch-dragging{
    position:relative;
    z-index:20;
}
.drag-order-status{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    margin-left:10px;
    font:700 12px/1.2 Arial,Helvetica,sans-serif;
    color:#cfcfcf;
}
.drag-order-status.is-error{color:#ffb1b1}
.save-all-captions-row{align-items:center}
@media(max-width:600px){
    .save-all-captions-row{flex-wrap:wrap}
    .drag-order-status{width:100%;margin:6px 0 0}
    .image-drag-handle{min-height:38px;font-size:13px}
}

/* DRAG ORDER FIX — show destination without moving card until release */
.image-drop-marker{
    box-sizing:border-box;
    min-height:150px;
    border:2px dashed #bdbdbd;
    border-radius:7px;
    background:rgba(255,255,255,.055);
}
.image-admin-card.is-dragging{
    opacity:.38;
}
@media(max-width:600px){
    .image-drop-marker{min-height:110px}
}

/* DRAG ORDER FIX 2 */
.image-admin-card[draggable="true"]{cursor:default}
.image-admin-card[draggable="true"] img,
.image-admin-card[draggable="true"] .image-drag-handle{cursor:grab}
.image-admin-card.is-dragging{opacity:.42}
.image-drop-marker{
    min-width:140px;
    min-height:220px;
    box-sizing:border-box;
    border:2px dashed #d0d0d0;
    border-radius:7px;
    background:rgba(255,255,255,.07);
}

/* DRAG ORDER POLISH — solid destination outline */
.image-drop-marker{
    border-style:solid !important;
    border-width:2px !important;
}

/* DRAG ORDER FIX 4: solid insertion target */
.image-drop-marker{
    border:2px solid #bdbdbd !important;
}

/* Contact page — polished estimate form */
.contact-section {
    max-width:1040px;
}
.contact-wrap {
    grid-template-columns:.85fr 1.15fr;
    gap:54px;
    align-items:start;
}
.contact-intro h1 {
    margin-top:0;
}
.contact-kicker {
    margin:0 0 8px;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.12em;
    color:#bbb;
}
.contact-detail {
    margin:26px 0;
    padding:18px 20px;
    border:1px solid #333;
    border-radius:8px;
    background:#181818;
}
.contact-detail strong,
.contact-phone {
    display:block;
}
.contact-phone {
    margin-top:3px;
    font-size:1.35rem;
    font-weight:700;
    text-decoration:none;
}
.contact-form-panel {
    padding:26px;
    border:1px solid #303030;
    border-radius:10px;
    background:#171717;
}
.contact-form-panel h2 {
    margin:0 0 4px;
    font-size:1.55rem;
}
.contact-form-note {
    margin:0 0 20px;
    color:#bbb;
}
.contact-form label {
    display:grid;
    gap:5px;
    font-weight:700;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    font-weight:400;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline:2px solid #aaa;
    outline-offset:1px;
    border-color:#aaa;
}
.contact-submit {
    width:100%;
    margin-top:3px;
    font-size:1rem;
}
.notice {
    margin:0 0 18px;
    border:1px solid #405340;
}
.notice.error {
    border-color:#7b3a3a;
}
@media(max-width:800px) {
    .contact-wrap {
        grid-template-columns:1fr;
        gap:30px;
    }
    .contact-section {
        padding-top:42px;
    }
}
@media(max-width:480px) {
    .contact-form-panel {
        padding:18px;
    }
}


/* ===== Rolen Metalworks Admin / Inquiry Center ===== */
.admin-nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.admin-nav .active{outline:1px solid #888}.admin-count{display:inline-flex;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:#8b2525;color:#fff;font-size:11px;margin-left:3px}.admin-dashboard-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}.admin-dashboard-card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid #3d3d3d;border-radius:8px;background:#191919;color:#fff;text-decoration:none}.admin-dashboard-card:hover{border-color:#777;background:#202020}.admin-dashboard-card strong{font-size:20px}.admin-dashboard-card span{color:#ccc}.inquiry-heading,.inquiry-customer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.inquiry-filters{display:flex;gap:6px;flex-wrap:wrap}.inquiry-list{display:flex;flex-direction:column;border-top:1px solid #333}.inquiry-list-row{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(240px,1.4fr) minmax(210px,.8fr);gap:18px;align-items:center;padding:15px 10px;border-bottom:1px solid #333;color:#eee;text-decoration:none}.inquiry-list-row:hover{background:#1e1e1e}.inquiry-list-row.is-new{border-left:4px solid #eee;background:#191919}.inquiry-list-row>div:first-child{display:flex;flex-direction:column;gap:4px}.inquiry-list-row span,.inquiry-preview{color:#bbb}.inquiry-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px}.status-pill{display:inline-block;padding:4px 8px;border:1px solid #555;border-radius:999px;font-size:11px;white-space:nowrap;color:#eee}.status-new{background:#702020}.status-open,.status-customer_replied{background:#244d2b}.status-waiting_customer{background:#55491e}.status-closed{background:#333}.inquiry-detail-grid{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(260px,.7fr);gap:16px;align-items:start}.inquiry-detail aside{display:flex;flex-direction:column;gap:16px}.inquiry-customer-head h1{margin:0 0 8px}.inquiry-customer-head>div{display:flex;flex-direction:column;gap:3px}.conversation{display:flex;flex-direction:column;gap:12px;margin:22px 0}.conversation-message{max-width:88%;padding:14px 16px;border:1px solid #444;border-radius:9px;background:#171717;line-height:1.5}.conversation-message.from-business{align-self:flex-end;background:#232323}.conversation-message header{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:12px}.conversation-message header span{color:#aaa}.delivery-warning{display:block;color:#e6b1b1;margin-top:8px}.reply-box{border-top:1px solid #3a3a3a;padding-top:18px}.reply-box label{display:flex;flex-direction:column;gap:8px}.reply-box textarea,.inquiry-detail textarea,.inquiry-detail select{width:100%;box-sizing:border-box;background:#1c1c1c;color:#fff;border:1px solid #4a4a4a;border-radius:5px;padding:10px;font:inherit}.reply-box button{margin-top:10px}.inquiry-detail .panel{margin:0}.inquiry-detail aside .panel{padding:16px}.inquiry-detail aside h2{margin-top:0}
@media(max-width:800px){.admin-dashboard-cards,.inquiry-detail-grid{grid-template-columns:1fr}.inquiry-list-row{grid-template-columns:1fr;gap:7px}.inquiry-meta{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.inquiry-heading,.inquiry-customer-head{flex-direction:column}.conversation-message{max-width:100%}.adminbar{align-items:flex-start}.admin-nav{justify-content:flex-start}}


/* ===== Admin dashboard landing-page cleanup ===== */
.admin-dashboard {
    padding-top: 20px;
}

.admin-dashboard-panel {
    padding: 28px;
}

.admin-dashboard-intro {
    padding-bottom: 22px;
    border-bottom: 1px solid #333;
}

.admin-dashboard-intro h1 {
    margin: 0 0 7px;
    font-size: 2rem;
}

.admin-dashboard-intro p {
    margin: 0;
    color: #bbb;
    font-size: .95rem;
}

.admin-dashboard .admin-dashboard-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.admin-dashboard .admin-dashboard-card {
    min-height: 155px;
    padding: 22px;
    gap: 14px;
    border-color: #383838;
    background: #202020;
}

.admin-dashboard .admin-dashboard-card:hover {
    border-color: #666;
    background: #242424;
}

.admin-dashboard-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.admin-dashboard-card-head strong {
    font-size: 1.25rem;
    line-height: 1.2;
}

.admin-dashboard-arrow {
    color: #aaa !important;
    font-size: 1.8rem;
    line-height: 1;
}

.admin-dashboard-stats {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.admin-dashboard-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    padding: 5px 9px;
    border: 1px solid #444;
    border-radius: 999px;
    background: #181818;
    color: #ccc !important;
    font-size: .82rem;
    line-height: 1.2;
}

.admin-dashboard-stats b {
    color: #fff;
}

@media(max-width: 700px) {
    .admin-dashboard-panel {
        padding: 20px;
    }

    .admin-dashboard .admin-dashboard-cards {
        grid-template-columns: 1fr;
    }

    .admin-dashboard .admin-dashboard-card {
        min-height: 0;
    }
}


/* ===== Compact admin summary dashboard ===== */
.admin-dashboard-compact .panel {
    min-height: 285px;
    padding: 18px 16px;
}

.admin-dashboard-compact h1 {
    margin: 0 0 20px;
    font-size: 2rem;
    line-height: 1.15;
}

.admin-summary-cards {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-summary-card {
    display: flex;
    flex-direction: column;
    width: 235px;
    min-height: 102px;
    padding: 8px;
    border: 1px solid #555;
    background: #1c1c1c;
    color: #fff;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color .15s ease, border-color .15s ease;
}

.admin-summary-card:hover,
.admin-summary-card:focus-visible {
    background: #252525;
    border-color: #888;
    color: #fff;
}

.admin-summary-card strong {
    margin-bottom: 3px;
    font-size: 1rem;
}

.admin-summary-card span {
    display: block;
    color: #fff;
    font-weight: 600;
}

@media (max-width: 620px) {
    .admin-summary-cards {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-summary-card {
        width: 100%;
    }

    .admin-dashboard-compact .panel {
        min-height: 0;
    }
}


/* ===== Inquiry attachments / secure customer thread ===== */
.message-attachments{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.attachment-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #555;border-radius:5px;background:#111;color:#fff!important;text-decoration:none!important;max-width:100%;overflow-wrap:anywhere}.attachment-chip:hover{border-color:#888;background:#1d1d1d}.attachment-chip small{color:#aaa;white-space:nowrap}.attachment-picker{display:flex!important;flex-direction:column;gap:7px;margin-top:14px}.attachment-picker input[type=file],.contact-form input[type=file]{box-sizing:border-box;width:100%;padding:8px;border:1px solid #4a4a4a;border-radius:5px;background:#1c1c1c;color:#fff;font:inherit}.thread-page{max-width:1050px;margin:0 auto;padding:24px 16px 50px}.thread-panel{padding:24px}.thread-panel h1{margin-top:0}.thread-header{min-height:auto;padding:16px;text-align:center}.thread-logo{display:block;width:min(360px,85vw);height:auto;margin:0 auto}.customer-reply{margin-top:24px}.contact-optional{font-weight:400;color:#aaa}@media(max-width:600px){.thread-panel{padding:16px}.conversation-message{max-width:100%}.attachment-chip{width:100%;box-sizing:border-box;justify-content:space-between}}


/* Contact form — required marks + modern attachment picker */
.required-mark {
    margin-left:2px;
}
.contact-file-picker {
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:48px;
    padding:5px;
    overflow:hidden;
    border:1px solid #555;
    border-radius:7px;
    background:#1b1b1b;
    cursor:pointer;
}
.contact-file-picker input[type="file"] {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}
.contact-file-button {
    flex:0 0 auto;
    padding:8px 13px;
    border:1px solid #666;
    border-radius:6px;
    background:#303030;
    color:#fff;
    font:700 13px/1.2 Arial,Helvetica,sans-serif;
}
.contact-file-picker:hover .contact-file-button {
    background:#3b3b3b;
    border-color:#777;
}
.contact-file-name {
    min-width:0;
    overflow:hidden;
    color:#bbb;
    font:400 13px/1.2 Arial,Helvetica,sans-serif;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Contact form — keep required asterisk on same line as field title */
.contact-field-label {
    display:inline-flex;
    align-items:baseline;
    gap:2px;
    width:max-content;
}
.contact-field-label .required-mark {
    margin-left:0;
}