html {
    font-size: 14px;
    overflow-y: scroll;
}

/* Heading typography */
.card-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #23282d;
}
.card-title small {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    color: #6c757d;
}
/* Sidebar headings slightly smaller than content card titles. These are
   <div>s (not h6) since 2026-09-14 so they stay out of the page's heading
   outline; the line-height/margin below restore what h6 gave them. */
.col-lg-3 .card-title {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    margin-bottom: .5rem;
}
/* Content cards: white on the grey page ground, crisp edge, soft lift.
   Overrides the #f7f7f7 tint classes (.MetalFenceRepair etc.) the views carry. */
.content-col .card {
    background-color: #ffffff;
    border: 1px solid #dfe3e7;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    min-width: 992px;
    margin-bottom: 0;
    /* 2026-09-14 (review item 5, ON TRIAL): light grey page ground so the
       white content cards lift off it. Was #ffffff with #f7f7f7 cards. */
    background-color: #f1f2f4;
}




.modal-footer {
    text-align: left;
}

#modalImage {
    max-height: 65vh;
    object-fit: contain;
}
.photo-controls {
    justify-content: space-between;
    gap: .5rem;
}
#photoPosition { font-size: .85rem; }

/* Touch photo viewer: full screen, with fixed controls and an unobstructed photo. */
body.photo-viewer-open { overflow: hidden; }
.pswp .pswp__bg { background: #111417; }
.pswp .pswp__top-bar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    background: linear-gradient(#111417, rgba(17, 20, 23, 0));
}
.pswp .pswp__button--close,
.pswp .pswp__button--zoom {
    width: 52px;
    height: 52px;
    opacity: 1;
}
.pswp .pswp__button:focus-visible {
    outline: 2px solid #ffc107;
    outline-offset: -4px;
}
.pswp .pswp__photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 72px calc(12px + env(safe-area-inset-bottom, 0px));
    color: #ffffff;
    background: #111417;
    text-align: center;
    line-height: 1.4;
}
.photo-caption-text {
    font-size: 14px;
    max-height: 3.9em;
    overflow: auto;
}
.photo-caption-count { margin-top: 4px; font-size: 12px; color: #b9c2c9; }
.pswp.pswp--touch .pswp__button--arrow { display: block; }
@media (max-width: 767.98px) {
    .pswp .pswp__button--arrow {
        top: auto;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        margin-top: 0;
        z-index: 20;
        opacity: 1;
    }
    .pswp .pswp__button--arrow .pswp__icn { top: 11px; }
    .pswp .pswp__button--arrow--prev { left: max(4px, env(safe-area-inset-left, 0px)); }
    .pswp .pswp__button--arrow--next { right: max(4px, env(safe-area-inset-right, 0px)); }
    .pswp .pswp__photo-caption { padding-left: 62px; padding-right: 62px; }
}
.service-enquiry {
    background-color: #23282d;
    border-radius: 5px;
    padding: 24px;
    color: #ffffff;
}
.service-enquiry h2 { font-size: 1.35rem; font-weight: 600; }
.service-enquiry p { color: #d2d6d8; margin-bottom: 1rem; }
.enquiry-examples summary { color: #0d6efd; cursor: pointer; }
.enquiry-examples p { color: #4a545c; font-size: .95rem; }
[data-bs-target="#imageModal"]:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 3px;
}






.img50 {
    max-width: 50px;
    height: auto;
}
.img60 {
    max-width: 60px;
    height: auto;
}
.img70 {
    max-width: 70px;
    height: auto;
}
.img80 {
    max-width: 80px;
    height: auto;
}
.img90 {
    max-width: 90px;
    height: auto;
}
.img100 {
    max-width: 100px;
    height: auto;
}
.img110 {
    max-width: 110px;
    height: auto;
}
.img120 {
    max-width: 120px;
    height: auto;
}
.img125 {
    max-width: 125px;
    height: auto;
}
.img130 {
    max-width: 130px;
    height: auto;
}
.img140 {
    max-width: 140px;
    height: auto;
}
.img150 {
    max-width: 150px;
    height: auto;
}
.img160 {
    max-width: 160px;
    height: auto;
}
.img170 {
    max-width: 170px;
    height: auto;
}
.img180 {
    max-width: 180px;
    height: auto;
}
.img190 {
    max-width: 190px;
    height: auto;
}
.img200 {
    max-width: 200px;
    height: auto;
}


.text-strap {
    display: none;
}


.imggen {
    max-width: 170px;
    height: auto;
}

.hr-x {
    border: none;
    height: 35px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

.hr-y {
    height: 6px;
    border-width: 0;
    color: GrayText;
    /* was white — showed as a white strip under each sidebar line on the grey page (2026-09-14) */
    background-color: transparent;
    /* Sidebar section dividers stay hidden. */
    display: none;
}

/* Plain sidebar menus on the grey page background, without cards or dividers. */
.side-section-gap {
    margin-top: 2.25rem;
}
.nav.flex-column.side-menu .nav-item {
    padding-left: 0;
}
.nav.flex-column.side-menu .nav-link {
    padding: .5rem 0;
    font-size: 15px;
}
.nav.flex-column.side-menu .nav-link.active {
    position: relative;
    isolation: isolate;
    padding-right: 16px;
}
.nav.flex-column.side-menu .nav-link.active::before {
    content: "";
    position: absolute;
    inset: 0 0 0 -8px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to right, #ffc107 0 1px, #ffffff 1px 100%);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.side-menu .card-title {
    margin-bottom: .35rem;
}
.hr-z {
    height: 2px;
    border-width: 0;
    color: black;
    background-color: white;
    margin-left: 020px;
}

.MetalFenceRepair {
    background-color: #f7f7f7;
}

.IndustrialFenceTypes {
    background-color: #f7f7f7;
}

.MetalFenceEnquiry {
    background-color: #f7f7f7;
}

.beige {
    background-color: #fffef3;
}

.bluer {
    background-color: #f3f9ff;
}

.whiter {
    background-color: #fff;
}

.grellow {
    background-color: #ffffef;
}

.greener {
    background-color: #f0f6f5;
}

.smaul {
    font-size: 14px;
    
}

.little {
    font-size: 13px;
    color: black;
}


.damo {
    font-size: 14px;
    color: #dc3545;
}

.repo {
    font-size: 14px;
    color: green;
}

.sidebar {
    height: 100vh;
    padding-top: 20px;
}
.nav-item {
    font-size: 14px;
    color: #23282d;
}

.nav-link {
    font-weight: normal;
    color: #0d6efd;
}
.nav-link:hover {
    color: #0d6efd;
    text-decoration: underline;
 }

.nav-item .active {
    font-weight: bold;
    color: #0d6efd;
}

/* In-content text links (e.g. "See Industrial Fencing Information Guide"):
   match the sidebar links - blue, underline on hover only */
.card-link {
    color: #0d6efd;
    text-decoration: none;
}
.card-link:hover {
    color: #0d6efd;
    text-decoration: underline;
}
.form-label-real {
    display: none;
}

.form-control-real {
    display: none;
}
.navtop-item {
    font-size: 14px;
    color: #fff;
}
.navtop-link .link {
    font-weight: normal;
    color: white;
}

.navtop-link:hover {
    color: #ffc107;
}
.formal {
    font-size: 13px;
    color: #000000;
}
/* Masthead photo strip: dark steel band (replaces the old picket-fence gif).
   The nine photos render as flat 4:3 tiles with a thin light edge so the
   strip reads as one filmstrip rather than nine framed pictures. */
.navbar-custom {
    background-color: #2e343a;
    background-image: linear-gradient(180deg, #343b42 0%, #262c31 100%);
}
.navbar-custom img.img-thumbnail {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 2px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.navbar-custom img.img-thumbnail:hover {
    border-color: #ffc107;
}

/* Keyword strip above the masthead (2026-09-14, review item 4): a single
   quiet line of small-caps keywords separated by dots, rather than nine
   greyed-out buttons that looked disabled. Shorter band, centred. */
.navbar.bif-strip {
    background-color: #23282d;
    padding-top: .3rem;
    padding-bottom: .3rem;
}
.navbar.bif-strip .container {
    justify-content: center;
}
.strip-chip {
    background: transparent;
    border: none;
    border-radius: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .35rem;
    white-space: nowrap;
    pointer-events: none; /* keyword chips, not links */
}
.strip-chip + .strip-chip::before {
    content: "·";
    color: rgba(255, 255, 255, .3);
    margin-right: .75rem;
}

/* Brand-bar nav links (Home / Get a Quote / Contact): flat links with a subtle
   hover overlay and thin separators (pattern borrowed from ManchesterModelShop).
   The separator is absolutely positioned OUTSIDE the link box so the hover
   background never covers it. Dark variant for the white mobile panel is in
   the mobile layer below. */
.bif-navlinks {
    display: flex;
    align-items: center;
}
.bif-navlink {
    color: #ffffff;
    font-size: .9rem;
    font-weight: 500;
    border-radius: 4px;
    /* Tightened from .9rem/1.3rem when the nav grew from 3 links to 7
       (Gallery / Fencing Guide / About / FAQ), so the row still fits. */
    padding: .5rem .7rem;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}
.bif-navlink:not(:last-child) {
    margin-right: .6rem;
}
.bif-navlink:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -.3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}
.bif-navlink:hover,
.bif-navlink:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
}

/* White logo icon beside the yellow title. */
.navbar-brand .bi-columns {
    color: #ffffff;
}

/* Main BIF Title Text */
.navbar-brand.title-button {
    padding-top: 5px;
    color: #ffc107 !important; /* Override the existing Bootstrap text-white class. */
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 500;
    letter-spacing: .03em;
    font-size: 20px;
    text-align: left;
}
.nav.flex-column .nav-item {
    padding-left: 10px;
    margin-left: 0;
}
    .nav.flex-column .nav-item a {
        padding-left: 1px;
        margin-left: 0;
        display: block; /* Ensure it behaves like a block element */
    }





/* Grayscale filter for images (sidebar Photo Gallery thumbnails) */
.grayscale-img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    /* Fluid: fill the column (so they shrink with the narrowing col-lg-3 between
       1000-1400px instead of overflowing into the main content), capped at their
       img140/img90 max-width when there's room. */
    width: 100%;
    height: auto;
}
/* Optional: Remove grayscale on hover */
.grayscale-img:hover {
    filter: grayscale(0%);
 }

/* Sidebar work photos: uniform 3-up square thumbnails. Whatever shape the
   source photo is, every tile crops to the same square so the grid stays even. */
.side-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.side-thumbs img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 1px solid #cfd4d9;
    border-radius: 6px;
    background: #fff;
}
.side-thumbs img:hover {
    border-color: #6c757d;
}

/* ============================================================
   TYPE SCALE (added 2026-09-14, review item 3)
   Same Segoe UI, but the content-card titles step up so they read
   as headings rather than bold body text, body copy goes 14 -> 15px
   with more line height, and on desktop a paragraph never runs
   wider than ~78 characters (the full-width cards were ~150 chars
   a line at 1440px). Two-column cards are narrower than that cap,
   so they are unaffected. Sidebar, tables, captions, the guide
   tiles and the dark enquiry panel are left at their own sizes.
   ============================================================ */
.content-col .card-title {
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: 0;
}
/* Heading outline (2026-09-14 SEO): the first card title on every page is the
   visible H1, the other card titles are H2, the bold lead lines are H3. */
.content-col h1.card-title {
    font-size: 1.7rem;
}
.content-col h3.card-lead {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: #23282d;
    margin-bottom: 1rem;
}
.content-col .card-title small {
    font-size: .72em;
}
/* Card subtitle on its own line under the title (replaces the old
   "Title ... italic subtitle" run-on; Index homepage cards, 2026-09-14) */
.card-title .card-sub {
    display: block;
    font-size: .62em;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    color: #6c757d;
    margin-top: .25rem;
}
.content-col p:not(.guide-tile-desc),
.content-col li:not(.enquiry-aside li) {
    font-size: 15px;
    line-height: 1.65;
}
/* Bold lead paragraphs act as sub-headings ("What Is Steel Palisade Fencing ?") */
.content-col p.fw-bold {
    font-size: 16px;
}
@media (min-width: 992px) {
    .content-col p:not(.guide-tile-desc),
    .content-col ul:not(.nav) {
        max-width: 78ch;
    }
}

/* ============================================================
   PROJECTS / CASE STUDIES (added 2026-09-14, SEO content pass)
   ============================================================ */
.crumbs {
    font-size: 13px;
    color: #6c757d;
    margin: 0 0 .75rem 2px;
}
.crumbs a { color: #0d6efd; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 .35rem; }
.crumbs span[aria-current] { margin: 0; color: #23282d; }

.project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    font-size: 14px;
    color: #4a545c;
    margin: .25rem 0 .5rem;
}
.project-meta i { color: #ffc107; margin-right: .3rem; }
.project-chip {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 500;
    color: #23282d;
    background: #f1f2f4;
    border: 1px solid #dfe3e7;
    border-radius: 999px;
    padding: .15rem .7rem;
    text-decoration: none;
}
.project-chip:hover { background: #ffc107; border-color: #ffc107; color: #1c2127; }

/* Photo grid on a project page: 4-up, uniform 4:3 tiles, same flat frame as the rest of the site */
.project-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: .5rem 0 .25rem;
}
.project-grid img.img-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
@media (max-width: 991.98px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px)  { .project-grid { grid-template-columns: repeat(2, 1fr); } }

/* Projects index: 3-up cards, whole card is the link */
.project-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.project-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dfe3e7;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    color: #23282d;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.project-card:hover { border-color: #adb5bd; box-shadow: 0 3px 10px rgba(0, 0, 0, .10); color: #23282d; }
.project-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.project-card-body { display: flex; flex-direction: column; gap: .3rem; padding: .75rem .9rem .9rem; }
.project-card-title { font-family: 'Segoe UI', Arial, sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.project-card-loc { font-size: 12.5px; color: #6c757d; }
.project-card-loc i { color: #ffc107; margin-right: .3rem; }
.project-card-sum { font-size: 13.5px; line-height: 1.45; color: #4a545c; }
.project-card-more { font-size: 13px; font-weight: 600; color: #0d6efd; margin-top: .2rem; }
@media (max-width: 991.98px) { .project-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .project-cards { grid-template-columns: 1fr; } }

/* ============================================================
   PHOTO TILES (added 2026-09-13)
   Every clickable photo thumbnail is one flat tile: no white
   padding, no rounded frame, a 1px edge that darkens on hover.
   The strip photos (.imggen / .img140) are cropped to a common
   4:3 so each row of five sits on one baseline whatever shape
   the source file is. The small diagrams, signs, GIFs and
   portrait detail shots (img80 - img160, captioned figures)
   keep their natural shape - only the frame changes.
   ============================================================ */
.img-thumbnail {
    padding: 0;
    border: 1px solid #cfd4d9;
    border-radius: 2px;
    background-color: #fff;
}
.img-thumbnail:hover {
    border-color: #6c757d;
}
.content-col img.img-thumbnail.imggen,
.content-col img.img-thumbnail.img140 {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Sidebar "Free Quote" call-to-action: dark card, yellow-underlined heading */
.side-cta {
    background-color: #23282d;
    border-radius: 5px;
    padding: 16px 18px;
}
.side-cta .card-title {
    color: #fff;
    display: inline-block;
    margin-bottom: 0;
    padding-bottom: .5rem;
    border-bottom: 2px solid #ffc107;
}
.side-cta p {
    color: #b9c2c9;
    font-size: 14px;
    margin: .9rem 0 1.1rem;
}
.side-cta .cta-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: .65rem 1rem;
    font-size: 1.05rem;
}


.dropdown-400area {
    width: 400px;
    padding: 40px;
}
.dropdown-300area {
    width: 300px;
    padding: 40px;
}

.custom-btn {
    background-color: #1b6ec2; /* Button background color */
    color: white; /* Text color */
    border: none; /* Optional: remove border */
    /* Standard Bootstrap button sizing (overrides the btn-sm class the markup
       still carries, so all blue buttons render at the default .btn size) */
    font-size: 1rem;
    padding: .375rem .75rem;
    border-radius: .375rem;
}

.custom-btn:hover {
    background-color: #2986e1; /* Change background on hover */
    color: white; /* Change text color on hover */
}

/* Primary call-to-action buttons (Get a Quote / Send an Enquiry / hero) */
.cta-btn {
    background-color: #ffc107;
    color: #1c2127;
    border: none;
    font-weight: 600;
    font-size: 14px;
}

.cta-btn:hover {
    background-color: #ffd147;
    color: #000;
}

/* Sidebar enquiry CTA: match the hero "Get a Free Quote" button exactly, and
   restore even padding (the generic .nav.flex-column .nav-item a rule below
   sets padding-left:1px, which would otherwise squash the button's left side) */
.nav.flex-column .nav-item a.cta-btn {
    padding: .65rem 1.6rem;
    font-size: 1.05rem;
    display: inline-block;
}

.blooto {
    background-color: #b5defe;
}


/* Guarantee screen-reader-only headings (SEO H1s) stay visually hidden,
   independent of the Bootstrap build in use. */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ============================================================
   MOBILE / TABLET RESPONSIVE LAYER
   The desktop layout is completely untouched at >=992px (lg).
   Below 992px the SAME markup reflows into a stacked,
   finger-friendly layout. This is responsive design (Google's
   recommended approach) - one set of pages, no separate URLs.
   ============================================================ */
@media (max-width: 991.98px) {

    /* 1. Release the desktop width locks (incl. inline min-width styles) */
    html, body { min-width: 0 !important; overflow-x: hidden; }
    .row { min-width: 0 !important; }
    .container { max-width: 100%; }

    /* 2. Green strip reinstated as a single text line (the 9 buttons are hidden;
          the .d-lg-none text label shows instead). The .navbar-custom photo
          strip below keeps its background image with the last 5 images shrunk. */
    .navbar.bif-strip .btn { display: none !important; }
    .navbar.bif-strip { padding-top: 5px !important; padding-bottom: 5px !important; min-height: 0; }
    .navbar.bif-strip .container { padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
    .green-strip-text {
        display: block; width: 100%; text-align: center; white-space: nowrap;
        font-size: clamp(8px, 2.45vw, 22px); line-height: 1.3; padding: 2px 2px;
    }

    .navbar-custom { padding: 0 !important; }
    .navbar-custom .container { flex-wrap: nowrap; justify-content: center; gap: 3px; padding: 4px 2px 2px; margin-left: 0; margin-right: 0; max-width: 100%; }
    /* On small screens show only the last 5 thumbnails, sized to fill the row width */
    .navbar-custom .container img.img-thumbnail { display: none; }
    .navbar-custom .container img.img-thumbnail:nth-last-of-type(-n+5) {
        display: block; flex: 1 1 0; min-width: 0; max-width: none; height: auto; margin: 0;
    }

    /* Brand-bar tagline hidden on small screens to save space */
    .text-strap { display: none; }

    /* 2026-09-14: the keyword line was unreadable at phone size, and on the
       homepage the five tiny strip photos sat directly above the hero photo.
       Hide the keyword strip on every page and the photo strip on hero pages
       (body.has-hero, set by _Layout when a view defines @section Hero). */
    .navbar.bif-strip { display: none; }
    .has-hero .navbar-custom { display: none; }

    /* Keep the brand title compact so it shares one row with the hamburger,
       and pull the logo hard to the left edge */
    .navbar.bg-black { padding-top: 2px; padding-bottom: 4px; padding-left: 0; padding-right: 0; }
    .navbar.bg-black .container { padding-left: 16px; padding-right: 6px; margin-left: 0; margin-right: 0; max-width: 100%; }
    .navbar-brand.title-button { font-size: 15px; padding-top: 2px; padding-left: 0; margin-left: 0; margin-right: .25rem; white-space: nowrap; }
    .navbar .navbar-toggler { flex: 0 0 auto; }
    .navbar.bg-black .navbar-toggler { margin-left: auto !important; }
    .navbar.bg-black .menu-toggler {
        color: #000;
        background-color: #fff;
        border-color: #adb5bd;
        border-radius: 4px;
        padding: 4px 10px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
    }
    .navbar.bg-black .menu-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35);
    }

    /* Small specialist sub-line beneath the brand */
    .brand-subtitle { display: block; font-size: 11px; line-height: 1.05; font-weight: normal; color: #d2d6d8; margin-top: 1px; }

    /* Unfurled hamburger menu: white panel, black section titles, blue links */
    #mainNav {
        background-color: #fff;
        border: 1px solid #d3d3d3;
        border-radius: 6px;
        padding: 10px 12px;
        margin-top: 6px;
    }
    #mainNav .navbar-text { color: #000 !important; }
    /* Present the primary mobile navigation as distinct buttons. */
    #mainNav .bif-navlinks {
        flex-wrap: wrap;
        gap: .45rem;
    }
    #mainNav .bif-navlink {
        color: #fff;
        background-color: #1b6ec2;
        border: 1px solid #1b6ec2;
        border-radius: 4px;
        margin-right: 0;
        padding: .45rem .75rem;
    }
    #mainNav .bif-navlink:hover,
    #mainNav .bif-navlink:focus {
        color: #fff;
        background-color: #2986e1;
        border-color: #2986e1;
    }
    #mainNav .bif-navlink:not(:last-child)::after { content: none; }
    #mainNav .nav-link { color: #0d6efd; }
    #mainNav .nav-link.active { color: #0a58ca; font-weight: 600; }
    #mainNav .nav-link:hover { color: #0a58ca; }

    /* 3. Contact dropdowns must fit the viewport */
    .dropdown-400area, .dropdown-300area { width: min(92vw, 400px) !important; padding: 20px !important; }
    .dropdown-menu { max-width: 96vw; }

    /* 4. Photo-grid & two-column layout tables reflow into a stack */
    .content-col table,
    .content-col tbody,
    .content-col tr { display: block; width: 100%; }
    .content-col td { display: block; width: 100% !important; padding: 4px 0 !important; }

    /* image strips become a multi-up grid (3-up) to keep pages short */
    .content-col td:has(> img.img-thumbnail) {
        display: inline-block; width: 31.5% !important; vertical-align: top;
        padding: 0.9% !important; text-align: center;
    }
    .content-col td:has(> img.img-thumbnail) > img.img-thumbnail { width: 100%; max-width: 100%; }

    /* Drop the lonely last image of any ODD-count photo strip so the grid stays
       even on small screens (protects lone single images via :not(:first-child)). */
    .content-col td:has(> img.img-thumbnail):last-child:nth-child(odd):not(:first-child) { display: none !important; }

    /* Consistent ~20px padding inside every content card on small screens.
       The card's own padding (px-0/py-2/ps-3 etc.) is zeroed and the inner
       redundant .container padding removed, so the only inset is the card-body's
       20px. Bootstrap row/column gutters are left intact so two-column layouts
       (e.g. the before/after repair panels) keep a gap between columns. */
    .content-col .card { padding: 0 !important; }
    .content-col .card > .card-body { padding: 20px; }
    .content-col .card > .card-body > .container { padding-left: 0; padding-right: 0; max-width: 100%; }

    /* 5. Every content image scales within its container, never overflows */
    .content-col img { max-width: 100%; height: auto; }

    /* 6. Drop wide-column right margins that assumed a 1400px layout */
    .me-4, .me-5 { margin-right: 0 !important; }

    /* 7. Comfortable base text size */
    html { font-size: 15px; }
}

/* Phones: image grid switches to a roomier 2-up */
@media (max-width: 575.98px) {
    .content-col td:has(> img.img-thumbnail) { width: 48% !important; }
}

/* Desktop range 992-1400px: the content column is narrower than at >=1400px, so
   make the photo-strip tables fluid (images scale to the column) so the full
   desktop layout fits without horizontal scroll down to ~1000px wide. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .content-col table { width: 100%; }
    .content-col td > img.img-thumbnail { width: 100%; max-width: 100%; height: auto; }
}

/* Card images in narrow columns (col-6 2x2 grids / before-after pairs, and col-3
   image columns beside text) don't shrink like the 5-per-row strip images. Cap
   them to the size the strips render at within each Bootstrap container range so
   they look the same size (Index Razor/Pedestrian/Installation cards; Fence Repair
   before/after pairs). The small img80 intro thumbnails are left as-is. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .content-col .col-6 > img.imggen,
    .content-col .col-3 > img.imggen { max-width: 146px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .content-col .col-6 > img.imggen,
    .content-col .col-3 > img.imggen { max-width: 119px; }
}

/* Masthead photo strip: keep it to a single row across the desktop range by
   dropping the end images that would otherwise wrap onto a second line.
   (Full 9 shown at >=1400px; mobile shows the last 5 separately.) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-custom .container img.img-thumbnail:nth-last-of-type(-n+2) { display: none; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-custom .container img.img-thumbnail:nth-last-of-type(-n+3) { display: none; }
}

/* Keyword strip must stay on ONE line. Nine chips fit only at the xxl
   container (>=1400px); drop the last two below that and the last three in
   the tightest 992-1200 band (Safety Barriers / Security Fences / Mobile Welding). */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar.bif-strip .container > button:nth-last-of-type(-n+2) { display: none; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar.bif-strip .container > button:nth-last-of-type(-n+3) { display: none; }
}

/* The brand-bar tagline only fits on one line alongside the seven nav links
   once the container reaches its widest (xxl) size. Below that, drop it. */
@media (max-width: 1399.98px) {
    .navbar.bg-black .text-strap { display: none; }
}

/* FAQ page accordion (Bootstrap accordion, tinted to the site palette) */
.faq-accordion .accordion-item {
    border-color: #e2e5e8;
}
.faq-accordion .accordion-button {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: #23282d;
    background-color: #fff;
    box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) {
    color: #23282d;
    background-color: #fffaeb;
    box-shadow: inset 0 -1px 0 #e2e5e8;
}
.faq-accordion .accordion-button:focus {
    border-color: #e2e5e8;
    box-shadow: 0 0 0 .15rem rgba(255, 193, 7, .45);
}
.faq-accordion .accordion-body {
    color: #4a545c;
    background-color: #fff;
}

/* Enquiry page guidance panel (right-hand column).
   Dark card to match the sidebar "Free Quote" block (.side-cta). */
.enquiry-aside {
    background-color: #23282d;
    border-radius: 5px;
    padding: 16px 18px;
    font-size: 14px;
    color: #b9c2c9;
}
.enquiry-aside h6,
.enquiry-aside h3 {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: .95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    display: inline-block;
    margin-bottom: .9rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #ffc107;
}
.enquiry-aside p + h6,
.enquiry-aside ul + h6,
.enquiry-aside p + h3,
.enquiry-aside ul + h3 {
    margin-top: .6rem;
}
.enquiry-aside ul {
    list-style: none;
    padding: 0;
    margin: 0 0 .9rem;
}
.enquiry-aside li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .55rem;
    line-height: 1.5;
}
.enquiry-aside li i {
    position: absolute;
    left: 0;
    top: .2rem;
    color: #ffc107;
}
.enquiry-aside strong { color: #fff; }
/* No trailing gap inside the panel: the guidance list is now its last element,
   and .enquiry-aside ul carries a .9rem bottom margin for the case where it isn't. */
.enquiry-aside > :last-child { margin-bottom: 0; }

/* ===== Enquiry form: photo upload dropzone (added 2026-06-26) =====
   Drag & drop + click-to-browse + mobile "take photo" (accept=image/*),
   with accumulating thumbnail previews. JS lives in the enquiry view. */
.upload-input-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); border: 0;
}
.upload-dropzone {
    border: 2px dashed #adb5bd;
    border-radius: .5rem;
    background: #f8f9fa;
    padding: 1.5rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.upload-dropzone:hover,
.upload-dropzone:focus { border-color: #0d6efd; background: #eef5ff; outline: none; }
.upload-dropzone--over { border-color: #0d6efd; background: #e3f0ff; }
.upload-dropzone-icon { font-size: 2rem; color: #0d6efd; display: block; margin-bottom: .25rem; }
.upload-dropzone-text { font-size: .95rem; color: #343a40; }
.upload-dropzone-hint { font-size: .8rem; color: #6c757d; margin-top: .25rem; }

.upload-preview { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.upload-thumb {
    position: relative;
    width: 96px;
    border: 1px solid #dee2e6;
    border-radius: .4rem;
    overflow: hidden;
    background: #fff;
}
.upload-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; background: #e9ecef; }
.upload-thumb-meta { padding: .2rem .3rem; font-size: .65rem; line-height: 1.15; }
.upload-thumb-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #343a40; }
.upload-thumb-size { color: #6c757d; }
.upload-thumb-remove {
    position: absolute; top: 2px; right: 2px;
    width: 20px; height: 20px; line-height: 18px;
    padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .6); color: #fff;
    font-size: 14px; cursor: pointer;
}
.upload-thumb-remove:hover { background: #dc3545; }
.upload-summary { font-size: .8rem; color: #198754; font-weight: 600; margin-top: .5rem; }

/* Enquiry confirmation page (Send_Enquiry_Return) */
.enquiry-confirm-head { gap: .75rem; margin-top: .5rem; }
.enquiry-confirm-head > div { min-width: 0; }   /* let the heading wrap instead of overflowing on mobile */
.enquiry-confirm-head .card-title { overflow-wrap: anywhere; }
.enquiry-confirm-icon { font-size: 2rem; line-height: 1; flex: 0 0 auto; }
.enquiry-summary { font-size: .9rem; }
.enquiry-summary dt {
    font-weight: 600; color: #6c757d; padding: .5rem .75rem .5rem 0;
    border-bottom: 1px solid #eee;
}
.enquiry-summary dd {
    color: #212529; padding: .5rem 0; margin-bottom: 0;
    border-bottom: 1px solid #eee; word-break: break-word;
}
.upload-thumb-fileicon {
    height: 72px; display: flex; align-items: center; justify-content: center;
    background: #e9ecef; color: #6c757d; font-size: 1.6rem;
}

/* Fencing Types Information Guide — tile grid (5-up), title overlaid on image,
   description in small text beneath. Reflows to 3-up (tablet) and 2-up (phone). */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 1rem;
}
.guide-tile { margin: 0; }
.guide-tile-imgwrap { position: relative; display: block; cursor: zoom-in; }
.guide-tile-imgwrap img.img-thumbnail {
    width: 100%; height: 120px; object-fit: cover; margin: 0;
    transition: opacity .15s ease;
}
.guide-tile-imgwrap:hover img.img-thumbnail { opacity: .9; }
.guide-tile-badge {
    position: absolute; left: 5px; right: 5px; bottom: 5px;
    background: rgba(0, 0, 0, .72); color: #fff;
    font-size: .68rem; font-weight: 600; line-height: 1.15;
    padding: .22rem .4rem; border-radius: .25rem;
}
.guide-tile-desc { font-size: .72rem; color: #6c757d; line-height: 1.25; margin: .35rem .1rem 0; }
#guideModalImg { max-height: 75vh; }

@media (max-width: 991.98px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px)  { .guide-grid { grid-template-columns: repeat(2, 1fr); } }

/* Index 'Industrial Fence & Gate Installation' card: the two side images sit in a
   fixed 25% col-3, so below ~800px they shrink too small. Below 800px, stack the
   image column ABOVE the text and show the two photos side-by-side at a usable size.
   (Scoped via .install-row so other col-3 image cards/pages are unaffected.) */
@media (max-width: 799.98px) {
    .install-row .install-imgs,
    .install-row .install-text {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .install-row .install-imgs {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: .75rem;
    }
    .install-row .install-imgs img.imggen {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        height: auto;
        margin-top: 0 !important;
    }
}

/* ============================================================
   HOMEPAGE HERO (added 2026-07-27, styling refresh)
   Rendered via the optional "Hero" section hook in _Layout,
   full-width between the masthead and the content container.
   ============================================================ */
.hero-banner {
    background: linear-gradient(rgba(18, 22, 26, .50), rgba(18, 22, 26, .74)),
                url('../Images/Banner.jpg') center 45% / cover no-repeat;
    color: #fff;
    padding: 64px 0 68px;
}
.hero-title {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    font-size: clamp(1.7rem, 3.2vw, 2.7rem);
    line-height: 1.15;
    letter-spacing: .02em;
    color: #fff;
    max-width: 900px;
    margin-bottom: .6rem;
}
.hero-sub {
    font-size: clamp(.95rem, 1.4vw, 1.15rem);
    color: rgba(255, 255, 255, .88);
    max-width: 760px;
    margin-bottom: 1.4rem;
}
.hero-cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.hero-cta .cta-btn {
    font-size: 1.05rem;
    padding: .65rem 1.6rem;
}
/* Solid badge keeps the phone number legible over the hero photograph. */
.hero-phone {
    display: inline-flex;
    align-items: center;
    background-color: #23282d;
    border: 1px solid #ffc107;
    border-radius: .5rem;
    padding: .4rem .8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
/* The phone number is a real tel: link. Every state is pinned to
   white so a phone browser cannot restyle it as a default blue link
   (iOS Safari auto-links numbers and turns them blue on tap). */
.hero-phone,
.hero-phone:link,
.hero-phone:visited,
.hero-phone:hover,
.hero-phone:focus,
.hero-phone:active {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .04em;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.hero-phone:hover,
.hero-phone:focus-visible {
    color: #ffffff;
}
.hero-phone:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}
.hero-phone i {
    margin-right: .4rem;
    font-size: 1rem;
    color: #ffc107;
}
@media (max-width: 991.98px) {
    .hero-banner { padding: 36px 0 40px; }
}

/* ============================================================
   SITE FOOTER (added 2026-07-27, styling refresh)
   ============================================================ */
.site-footer {
    background-color: #23282d;
    color: #adb5bd;
    border-top: 3px solid #ffc107;
    font-size: .9rem;
}
.site-footer h6 {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 500;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    margin-bottom: .75rem;
}
.site-footer a {
    color: #8ab8e8;
    text-decoration: none;
}
.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}
.site-footer address {
    font-style: normal;
    margin-bottom: .5rem;
    line-height: 1.5;
}
.site-footer ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.site-footer ul li {
    margin-bottom: .35rem;
}
.footer-bottom {
    border-top: 1px solid #3a4046;
    margin-top: 1.25rem;
    padding-top: .85rem;
    font-size: .82rem;
    color: #868e96;
}