/* ============================================================
   Norwich Builders - Global Stylesheet

   Building firm covering Norwich and the surrounding areas of
   Norfolk. Kitchens, bathrooms, extensions, renovations and
   conversions.

   Brand: navy #2c3172 (dominant), navy-deep #1f2352,
          gold #e5a824 (accent only - buttons, links, small
          highlights; never large fills or section backgrounds).
   Type:  Timeless Bold (headings), DM Sans (body).

   No motion. No keyframes, no scroll effects, no carousels or
   marquees. Colour and opacity transitions on hover only.
   ============================================================ */

/* --Timeless (heading / display face) --------------------------------------------------*/
@font-face {
    font-family: 'Timeless Bold';
    src: url('/assets/Font/timeless/Timeless-Bold.woff2') format('woff2'),
         url('/assets/Font/timeless/Timeless-Bold.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* --DM Sans (body) - self-hosted variable font, latin subset. Was Google Fonts; moved
     in-house so no visitor data goes to Google and there are two fewer origins to hit. */
@font-face {
    font-family: 'DM Sans';
    src: url('/assets/Font/dm-sans/DMSans-Variable-latin.woff2') format('woff2');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --brand-navy:   #2c3172;
    --brand-navy-deep: #1f2352;
    --brand-gold:   #e5a824;
    --brand-alice:  #F5F3EE;
    --brand-beige:  #F5F3EE;
    --brand-text:   #000000;
    --brand-navy-hover: #1f2352;
    --font-heading: 'Timeless Bold', serif;
    --font-body:    'DM Sans', sans-serif;
    
    /* Legacy variables for compatibility */
    --alice:        #F5F3EE;
}

body  { font-family: var(--font-body); background-color: var(--brand-alice); color: var(--brand-text); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
/* Client project photos are quoted from - keep colour close to true.
   Anything above ~1.1 shifts tile, worktop and paint finishes. */
img   { filter: saturate(1.1); }

/* --Before / After Slider --------------------------------------------------*/
.ba-slider {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}

/* --Custom Checkbox (form tick) --------------------------------------------------*/
.custom-tick {
    -webkit-appearance: none;
    appearance: none;
    background-color: #F5F3EE;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.custom-tick:checked {
    background-color: #e5a824 !important;
    border-color: #e5a824 !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* --Tagline / Section Label Pills --------------------------------------------------*/
span[style*="background:#e5a824"] {
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
span[style*="background:#e5a824"]:hover {
    background: #2c3172 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(44, 49, 114, 0.30);
}

span[style*="background:#2c3172"] {
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
span[style*="background:#2c3172"]:hover {
    background: #e5a824 !important;
    color: #000000 !important;
    box-shadow: 0 4px 16px rgba(232, 176, 30, 0.30);
}

span.pill-dark-bg {
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
span.pill-dark-bg:hover {
    background: #F5F3EE !important;
    color: #000000 !important;
    box-shadow: 0 4px 16px rgba(245, 243, 238, 0.30);
}

div[onmouseenter][style*="background:#2c3172"] {
    transition: background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --Global Button Component: flat square gold ------------------------------------------------
   One treatment sitewide: a square gold block with a black, letter-spaced label.
   The old bubble-fill circle and arrow icon are hidden rather than removed from the
   markup, so every existing .btn-bubble across the site picks this up unchanged. */
.btn-bubble,
.btn-primary,
.btn-secondary,
.btn-light,
.btn-dark-bg,
.btn-outline,
.btn-green {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2.25rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    line-height: 1;
    border-radius: 0;
    background-color: var(--brand-gold);
    color: #000000;
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.btn-bubble:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-dark-bg:hover,
.btn-outline:hover,
.btn-green:hover {
    background-color: #c98d18;
    color: #000000;
}

/* Legacy bubble internals - no longer part of the design. */
.btn-bubble-fill,
.btn-bubble-icon-container,
.btn-bubble-icon {
    display: none !important;
}

.btn-bubble-text {
    position: relative;
    z-index: 10;
    color: #000000;
    padding: 0 !important;
    white-space: nowrap;
}


@media (max-width: 768px) {
    #site-header a.group\/logo > div {
        transform: scale(0.85) !important;
        transform-origin: left center !important;
    }

    .btn-bubble {
        width: auto !important;
        max-width: 80vw !important;
        padding: 0.85rem 1.75rem !important;
        font-size: 0.95rem !important;
        justify-content: center !important;
    }

    main section h1,
    main section h2,
    main section h3,
    main section h4,
    main section p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    main section h1 > .section-underline,
    main section h2 > .section-underline,
    main section h3 > .section-underline {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    main section h1:has(> .section-underline),
    main section h2:has(> .section-underline),
    main section h3:has(> .section-underline) {
        width: 100% !important;
    }

    main section span.rounded-full[style*="background"] {
        display: inline-block !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    main section .flex-col {
        align-items: center !important;
        text-align: center !important;
    }

    main section a.btn-bubble,
    main section button.btn-bubble {
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-flex !important;
    }

    main section > div[class*="max-w-"],
    main section > div.container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }


    .sf-bullet-row,
    main section div.space-y-4 > div.flex {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0.75rem !important;
    }
    main section div.space-y-4 > div.flex > div.rounded-full {
        flex-shrink: 0 !important;
        margin-top: 0.15rem !important;
    }
    main section div.space-y-4 > div.flex > div.rounded-full ~ *,
    main section div.space-y-4 > div.flex:not(:has(> p)) {
        flex: 1 1 auto !important;
    }
}

@media (min-width: 1024px) {
    #site-header a.group\/logo > div {
        transform: scale(1) !important;
    }
    .btn-bubble {
        max-width: none !important;
    }
}

.gallery-item {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    aspect-ratio: 4 / 3;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
@media (hover: hover) {
    .gallery-item:hover img { transform: scale(1.10); }
}

.category-grid {
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .category-grid { gap: 2rem; }
}

.section-title-accent {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-title-accent::after {
    content: '';
    display: block;
    height: 2px;
    width: 3rem;
    border-radius: 9999px;
    background-color: #e5a824;
    margin: 0.75rem auto 0;
    transition: width 0.3s ease-in-out;
}
.section-title-accent:hover::after {
    width: 5rem;
}

#site-header nav a {
    transition: all 150ms;
    display: inline-flex;
    align-items: center;
}
#site-header nav a:hover {
    color: #e5a824;
}

.bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    mix-blend-mode: multiply;
}
/* ==========================================================================
   Square corners - site-wide
   Zeroes every corner radius: Tailwind `rounded-*` utilities, the component
   styles above, and any radius set in per-page <style> blocks. Kept as a
   single sweep rather than stripping ~370 `rounded-*` classes by hand, so
   new markup stays square by default.
   ========================================================================== */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* Exceptions to the square-corner sweep above: taglines and pills keep
   their original pill radius. Everything else stays square. */
.service-pill,
.tagline-pill,
.pill-dark-bg,
.area-pill,
.badge {
    border-radius: 9999px !important;
}

/* --Gallery filter bar: fade the edges so a clipped strip reads as swipeable ----*/
.filter-fade { position: relative; }
.filter-fade::before,
.filter-fade::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2.25rem;
    pointer-events: none;
    z-index: 30;
}
.filter-fade::before {
    left: 1rem;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    background: linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0));
}
.filter-fade::after {
    right: 1rem;
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
    background: linear-gradient(to left, #ffffff 30%, rgba(255,255,255,0));
}
@media (min-width: 640px) {
    .filter-fade::before { left: 0; }
    .filter-fade::after  { right: 0; }
}

/* --Homepage service cards ---------------------------------------------------
   Photo card with the copy sitting over the image and a two-button bar across
   the foot. Square corners, no motion: the only hover is a colour change. */


/* The services section pins to the viewport while the row of cards travels
   sideways, so every service passes the visitor before the page moves on.
   Height is set by script from the actual overflow; without script it is a
   normal auto-height section with a swipeable row. */
.services-pin { position: relative; }
.services-pin-inner {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* top padding clears the fixed header while the panel is pinned */
    padding: 5.5rem 0 1.5rem;
}
/* The whole panel has to fit one screen while it is pinned, so the heading
   block and the cards are sized against viewport height rather than fixed. */
.services-pin-inner > div { max-width: 112rem; padding-left: 2rem; padding-right: 2rem; }
.services-pin-inner .services-heading { margin-bottom: clamp(0.75rem, 2.5vh, 2.5rem); }
.services-pin-inner > div { max-width: 112rem; padding-left: 2rem; padding-right: 2rem; }
.services-pin-inner .services-heading h2 { font-size: clamp(2.25rem, 4.6vh, 3.75rem); margin-bottom: 0.5rem; }
.services-pin-inner > div { max-width: 112rem; padding-left: 2rem; padding-right: 2rem; }
.services-pin-inner .services-heading p  { font-size: clamp(0.95rem, 2vh, 1.125rem); margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
    .services-pin { height: auto !important; }
    .services-pin-inner { position: static; min-height: 0; }
}

/* ----------------------------------------------------------------------------
   Homepage services rail
   One line of cards. Horizontal position is driven entirely by page scroll:
   scrolling down moves them right-to-left, scrolling up moves them back.
   Nothing moves on its own - there is no timer and no autoplay.
---------------------------------------------------------------------------- */
.services-rail {
    --rail-gap: 2rem;
    --rail-w: min(100vw - 4rem, 112rem);
    /* Swipeable by default so the last cards are always reachable even if the
       scroll script never runs; the script switches this to hidden. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.services-rail::-webkit-scrollbar { display: none; }
.services-rail.is-scroll-linked { overflow-x: hidden; }
.services-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--rail-gap);
    width: max-content;
    will-change: transform;
}
.services-track > .service-card {
    flex: 0 0 auto;
    /* Exactly three cards across the container, as wide as the row allows. */
    width: calc((var(--rail-w) - 2 * var(--rail-gap)) / 3);
    /* Square cards, matching the reference layout. */
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 0;
}
@media (max-width: 1023px) { .services-track > .service-card { width: calc((var(--rail-w) - var(--rail-gap)) / 2); } }
@media (max-width: 639px)  { .services-track > .service-card { width: var(--rail-w); } }

/* Very short screens (landscape phones, small laptops): scale the heading back
   so the panel still fits one screen while pinned. */
@media (max-height: 680px) {
    .services-pin-inner { padding: 4.5rem 0 1rem; }
    .services-pin-inner > div { max-width: 112rem; padding-left: 2rem; padding-right: 2rem; }
.services-pin-inner .services-heading h2 { font-size: 2.5rem; line-height: 1.1; }
    .services-pin-inner > div { max-width: 112rem; padding-left: 2rem; padding-right: 2rem; }
.services-pin-inner .services-heading p  { font-size: 1rem; }
}

/* No scroll coupling for anyone who has asked for reduced motion -
   the rail becomes a plain swipeable row instead. */
@media (prefers-reduced-motion: reduce) {
    .services-rail { overflow-x: auto; }
    .services-track { transform: none !important; }
}

.service-card-scrim {
    /* Confined to the lower half, behind the heading and copy. The top of every
       photo is left completely clean - no veil across the image. */
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.78) 20%,
        rgba(0, 0, 0, 0.45) 38%,
        rgba(0, 0, 0, 0) 58%);
}

.service-card h3,
.services-track > .service-card p,
.service-card > .relative p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }

.service-card-actions {
    margin-top: auto;
    padding: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
.service-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 0.75rem;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-align: center;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.service-card-btn-solid {
    background-color: #ffffff;
    color: #1f2352;
}
.service-card-btn-solid:hover {
    background-color: var(--brand-gold);
    color: #000000;
}

.service-card-btn-ghost {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}
.service-card-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}