/* ============================================================================
   Famous Vitrified - new.css
   ----------------------------------------------------------------------------
   Styles for sections added in the September 2026 redesign. Loaded after
   style.css and theme.css (see include/head.blade.php) and uses the palette
   variables defined in theme.css.

   Currently holds (homepage):
     - .hero-single      single-image hero banner
     - .fv-highlights    four-item bar overlapping the bottom of the hero
     - .fv-intro         intro copy and image composition
   ========================================================================== */

/* ------------------------------------------------------------------
   Single-image hero. Replaces the five-slide Owl carousel that used to
   sit here. Sized fluidly rather than at 100vh so the section below
   stays partly visible on first paint.
------------------------------------------------------------------- */
.hero-single {
    position: relative;
    width: 100%;
    /* Mobile and tablet stay capped: a full-height band on a phone pushes
       every other section off the screen. Desktop goes full-screen below. */
    min-height: clamp(440px, 66vh, 640px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--fv-ink, #2C2928);
    isolation: isolate;
}

/* Newer units avoid the jump caused by mobile browser chrome. */
@supports (min-height: 1svh) {
    .hero-single {
        min-height: clamp(440px, 66svh, 640px);
    }
}

/* Full-screen banner on desktop. The copy stays vertically centred: pinning
   it to the bottom of a 100vh band left ~560px of empty image above it and
   stranded the text on the pale floor at the bottom of the photograph. */
@media (min-width: 992px) {
    .hero-single {
        min-height: 100vh;
    }

    @supports (min-height: 1svh) {
        .hero-single {
            min-height: 100svh;
        }
    }

    /* Balanced around the centre; the small bias downward accounts for the
       fixed header sitting over the top of the band. */
    .hero-single__inner {
        padding-top: clamp(96px, 12vh, 140px);
        padding-bottom: clamp(72px, 9vh, 110px);
    }
}

.hero-single__media,
.hero-single__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-single__media img {
    object-fit: cover;
    object-position: center;
    /* A slow drift keeps the surface feeling alive without animating layout. */
    animation: heroDrift 22s ease-in-out infinite alternate;
}

/* Directional scrim. The copy sits on the left, so that side needs a genuinely
   dark ground - the lower half of this photograph is pale floor tile and white
   text was floating on it. The right side stays clear so the tile surface, which
   is the actual product, is still visible. */
.hero-single__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(18, 19, 23, .94) 0%,
            rgba(18, 19, 23, .90) 28%,
            rgba(18, 19, 23, .72) 46%,
            rgba(18, 19, 23, .38) 64%,
            rgba(18, 19, 23, .12) 82%,
            rgba(18, 19, 23, .04) 100%),
        linear-gradient(to top, rgba(18, 19, 23, .45) 0%, rgba(18, 19, 23, 0) 38%);
}

.hero-single__inner {
    position: relative;
    z-index: 2;
    /* Top padding clears the fixed header; the smaller bottom value leaves
       room for the scroll cue without stranding the CTA mid-band. */
    padding-top: clamp(84px, 11vh, 118px);
    padding-bottom: clamp(48px, 7vh, 78px);
}

.hero-single__content {
    /* Wide enough that "Full Body Vitrified Tiles" holds one line at desktop
       (it needs ~770px at the top of the type scale) while still leaving the
       right of the photograph clear. */
    max-width: min(820px, 100%);
}

/* Thin gold rule, echoing the .title small treatment used site-wide. */
.hero-single__rule {
    display: block;
    width: 64px;
    height: 3px;
    background: var(--fv-red, #E31E23);
    margin-bottom: clamp(18px, 3vw, 26px);
    transform-origin: left center;
}

.hero-single__title {
    /* Slightly held back so the emphasis line below reads as the brighter one. */
    color: rgba(255, 255, 255, .84);
    font-family: "Montserrat", Helvetica, sans-serif;
    font-weight: 300;
    font-size: clamp(1.9rem, 1.05rem + 3.4vw, 4.15rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 clamp(22px, 4vw, 34px);
    text-wrap: balance;
}

.hero-single__title strong {
    display: block;
    font-weight: 700;
    /* White, not red. In the logo the red is a small mark against charcoal and
       white - carrying that ratio over keeps the brand red an accent (the rule
       and the button) instead of washing the headline out. */
    color: #fff;
}

/* Two classes deep on purpose. style.css and theme.css both target this button
   as "a.btn_1" (class + element), which outranks a plain .hero-single__cta, so
   the radius and background set here were being silently overridden. */
.hero-single .hero-single__cta {
    font-size: 13px;
    letter-spacing: .12em;
    font-weight: 600;
    text-transform: uppercase;
    padding: 17px 34px;
    /* Keeps the tap target at the 44px accessibility minimum on touch. */
    min-height: 50px;
    gap: 14px;
    /* Square, matching the .btn_1.outline buttons used elsewhere on the site.
       The inherited 25px pill read as a generic promo badge against this
       photograph rather than as part of the brand. */
    border-radius: 2px;
    /* The deeper red. Pure #E31E23 over a large filled area looked loud next
       to the muted greys and beiges of the tile photography; the logo uses
       that red as a small mark, so it stays on the rule above instead. */
    background: var(--fv-red-dark, #B1171B);
    /* A contact shadow rather than the previous heavy 30px drop, which made
       the button look like it was floating off the page. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.hero-single .hero-single__cta:hover,
.hero-single .hero-single__cta:focus-visible {
    background: var(--fv-red, #E31E23);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.hero-single__cta:focus-visible {
    outline: 3px solid var(--fv-red-soft, #F29A9C);
    outline-offset: 3px;
}

.hero-single__cta svg {
    transition: transform .3s ease;
    flex: 0 0 auto;
}

.hero-single__cta:hover svg,
.hero-single__cta:focus-visible svg {
    transform: translateX(5px);
}

/* Scroll cue, linked to the section immediately below. */
.hero-single__scroll {
    position: absolute;
    left: 50%;
    /* Above the highlights bar that overlaps the bottom of the hero. */
    bottom: calc(var(--fv-hl-overlap, 0px) + 22px);
    z-index: 2;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    padding-top: 7px;
    transition: border-color .3s ease;
}

.hero-single__scroll:hover,
.hero-single__scroll:focus-visible {
    border-color: var(--fv-red, #E31E23);
}

.hero-single__scroll::after {
    content: "";
    width: 3px;
    height: 7px;
    border-radius: 2px;
    background: #fff;
    animation: heroScroll 1.9s ease-in-out infinite;
}

/* Entrance: one orchestrated reveal rather than scattered effects. */
.hero-single__rule,
.hero-single__title,
.hero-single__actions {
    animation: heroRise .9s cubic-bezier(.22, .61, .36, 1) both;
}

.hero-single__rule {
    animation-name: heroRuleIn;
}

.hero-single__title {
    animation-delay: .12s;
}

.hero-single__actions {
    animation-delay: .26s;
}

@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroRuleIn {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes heroDrift {
    from {
        transform: scale(1.02);
    }

    to {
        transform: scale(1.09);
    }
}

@keyframes heroScroll {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0);
    }

    35% {
        opacity: 1;
    }

    75% {
        opacity: 0;
        transform: translateY(11px);
    }
}

@media (max-width: 991px) {
    .hero-single__scrim {
        background:
            linear-gradient(180deg, rgba(20, 21, 25, .72) 0%, rgba(20, 21, 25, .58) 45%, rgba(20, 21, 25, .82) 100%);
    }

    .hero-single__content {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .hero-single__scroll {
        display: none;
    }

    .hero-single__cta {
        width: 100%;
    }
}

/* Honour the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {

    .hero-single__media img,
    .hero-single__rule,
    .hero-single__title,
    .hero-single__actions,
    .hero-single__scroll::after {
        animation: none !important;
    }

    .hero-single__cta,
    .hero-single__cta svg {
        transition: none;
    }
}


/* ------------------------------------------------------------------
   Highlights bar - one white bar overlapping the bottom of the hero,
   four items divided by hairlines, with a red line along the top.

   --fv-hl-overlap is how far the bar rides up over the hero. The hero's
   scroll cue reads the same variable so it always sits above the bar.
   The hairlines are the 1px gaps between cells showing the bar's
   background, which keeps them correct in both the 4-up and 2x2 layouts.
------------------------------------------------------------------- */
/* Kept below the bar's own top padding, so only its clean white edge and
   red line rise over the hero - never half a line of text. */
:root {
    --fv-hl-overlap: 32px;
}

@media (max-width: 767px) {
    :root {
        --fv-hl-overlap: 20px;
    }
}

.fv-highlights {
    position: relative;
    z-index: 3;
    margin-top: calc(var(--fv-hl-overlap) * -1);
    padding: 0;
    /* Transparent over the hero, white below it - matching the intro section
       that follows. Left transparent, the page background showed as a pale
       band either side of the bar. */
    background: linear-gradient(to bottom, transparent var(--fv-hl-overlap), var(--fv-surface, #fff) var(--fv-hl-overlap));
}

.fv-highlights__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background: var(--fv-border, #D9D8D8);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-top: 3px solid var(--fv-red, #E31E23);
    border-radius: 6px;
    box-shadow: 0 28px 64px rgba(44, 41, 40, .16);
}

/* style.css makes every li display:flex site-wide. */
.fv-highlights__grid > li {
    display: block;
    margin: 0;
    padding: 0;
}

.fv-highlight {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: clamp(22px, 2.4vw, 34px) clamp(18px, 1.7vw, 26px);
    background: var(--fv-surface, #fff);
    transition: background-color .3s ease;
}

.fv-highlight:hover {
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-highlight__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--fv-red-dark, #B1171B);
    background: var(--fv-red-tint, #FCE9E9);
    border-radius: 50%;
    transition: background-color .3s ease, color .3s ease;
}

.fv-highlight:hover .fv-highlight__icon {
    color: #fff;
    background: var(--fv-red-dark, #B1171B);
}

.fv-highlight__icon svg {
    width: 26px;
    height: 26px;
}

.fv-highlight__title {
    margin: 0;
    font-size: clamp(15px, 1.15vw, 17px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--fv-ink, #2C2928);
}

/* Below 1200px four across gets cramped: two by two instead. */
@media (max-width: 1199px) {
    .fv-highlights__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones: still two by two, with the icon above the text so each cell has
   room for a two-line title. */
@media (max-width: 575px) {
    .fv-highlight {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 18px;
    }

    .fv-highlight__icon {
        width: 46px;
        height: 46px;
    }

    .fv-highlight__icon svg {
        width: 22px;
        height: 22px;
    }

    .fv-highlight__title {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-highlight,
    .fv-highlight__icon {
        transition: none;
    }
}
/* ------------------------------------------------------------------
   Intro ("Who We Are") - image composition on the left, copy right.
   Replaces the old parallax_wrapper layout, whose fixed pixel offsets
   left uneven gaps and let the small photo drift over the text.
------------------------------------------------------------------- */
.fv-intro {
    padding: clamp(64px, 8vw, 112px) 0;
    background: var(--fv-surface, #fff);
    overflow: hidden;
}

.fv-intro__row {
    --bs-gutter-x: clamp(32px, 5vw, 88px);
    row-gap: 56px;
}

/* Media: large photo, a smaller inset photo overlapping its lower-right
   corner, and a soft brand-tint block peeking out behind the top-left. */
.fv-intro__media {
    position: relative;
    margin: 0;
    padding: 0 16% 12% 0;
}

.fv-intro__media::before {
    content: "";
    position: absolute;
    top: -22px;
    left: -22px;
    width: 58%;
    height: 62%;
    background: var(--fv-red-tint, #FCE9E9);
    z-index: 0;
}

.fv-intro__main,
.fv-intro__inset {
    display: block;
    object-fit: cover;
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-intro__main {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
}

.fv-intro__inset {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 44%;
    height: auto;
    aspect-ratio: 240 / 332;
    border: 8px solid var(--fv-surface, #fff);
    box-shadow: 0 20px 44px rgba(44, 41, 40, .18);
}

/* Copy. Both paragraphs share one size so the block reads as one voice. */
.fv-intro__body .title {
    margin-bottom: 22px;
}

.fv-intro__body .title h1 {
    margin-bottom: 0;
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .fv-intro__body .title h1 {
        font-size: 28px;
    }
}

.fv-intro__body p {
    max-width: 62ch;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--fv-ink-body, #52504F);
}

/* The button follows the last paragraph directly, so give that paragraph a
   little more room underneath. */
.fv-intro__body p:last-of-type {
    margin-bottom: 28px;
}
/* Tablet and down: copy first, photos below, kept to a sensible width. */
@media (max-width: 991px) {
    .fv-intro__media {
        max-width: 560px;
        margin-inline: auto;
    }
}

@media (max-width: 575px) {
    .fv-intro__media {
        padding: 0 12% 14% 0;
    }

    .fv-intro__media::before {
        top: -12px;
        left: -12px;
    }

    .fv-intro__inset {
        border-width: 5px;
    }

}
/* ------------------------------------------------------------------
   Outline buttons (.btn_1.outline) - brand red instead of the old
   template's charcoal border and grey (#4b514d) hover.
   Only border-colour and colours are set, so section-specific sizes
   (e.g. the thinner 1px border in the blog cards) are kept.
   Specificity 0,3,1 beats style.css, including ".blog-section a.btn_1"
   (0,2,1). The .white variant (for dark backgrounds) is left alone.
------------------------------------------------------------------- */
a.btn_1.outline:not(.white),
button.btn_1.outline:not(.white) {
    color: var(--fv-red-dark, #B1171B);
    background-color: transparent;
    border-color: var(--fv-red-dark, #B1171B);
    border-style: solid;
}

a.btn_1.outline:not(.white):hover,
a.btn_1.outline:not(.white):focus-visible,
button.btn_1.outline:not(.white):hover,
button.btn_1.outline:not(.white):focus-visible {
    color: #fff;
    background-color: var(--fv-red-dark, #B1171B);
    border-color: var(--fv-red-dark, #B1171B);
}

a.btn_1.outline:not(.white):focus-visible,
button.btn_1.outline:not(.white):focus-visible {
    outline: 2px solid var(--fv-red-soft, #F29A9C);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Collections - five collection cards after the intro.
   Desktop: two feature cards on the first row, three on the second
   (a 6-column grid, spans of 3 and 2). Tablet: two columns with the
   fifth card full width. Phone: one column.
------------------------------------------------------------------- */
.fv-coll {
    padding: clamp(64px, 8vw, 112px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
    border-top: 1px solid var(--fv-border, #D9D8D8);
}

.fv-coll__head {
    max-width: 760px;
    margin: 0 auto clamp(36px, 5vw, 56px);
    text-align: center;
}

.fv-coll__head .title h2 {
    margin-bottom: 16px;
    line-height: 1.2;
}

.fv-coll__head p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--fv-ink-body, #52504F);
}

.fv-coll__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* style.css sets li { display:flex } site-wide; the card inside handles layout. */
.fv-coll__grid > li {
    display: block;
    grid-column: span 2;
    margin: 0;
    padding: 0;
}

.fv-coll__grid > li:nth-child(-n+2) {
    grid-column: span 3;
}

.fv-coll-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 3px;
    overflow: hidden;
    transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}

.fv-coll-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 22px 44px rgba(44, 41, 40, .12);
}

.fv-coll-card__media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--fv-border, #D9D8D8);
}

.fv-coll__grid > li:nth-child(-n+2) .fv-coll-card__media {
    aspect-ratio: 16 / 9;
}

.fv-coll-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.fv-coll-card:hover .fv-coll-card__media img {
    transform: scale(1.05);
}

.fv-coll-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(22px, 2.2vw, 30px);
}

/* "01 --" index: number in brand red followed by a short rule. */
.fv-coll-card__index {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--fv-red-dark, #B1171B);
}

.fv-coll-card__index::after {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    transition: width .35s ease;
}

.fv-coll-card:hover .fv-coll-card__index::after {
    width: 48px;
}

.fv-coll-card__title {
    margin: 0 0 10px;
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--fv-ink, #2C2928);
}

.fv-coll-card__text {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--fv-ink-body, #52504F);
}

/* The CTA sits at the bottom of every card so buttons line up across a row.
   Same brand-red outline treatment as the other outline buttons. */
.fv-coll-card__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: auto;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fv-red-dark, #B1171B);
    text-decoration: none;
    border: 1.5px solid var(--fv-red-dark, #B1171B);
    border-radius: 2px;
    transition: background-color .25s ease, color .25s ease;
}

.fv-coll-card__cta svg {
    flex: none;
    transition: transform .25s ease;
}

.fv-coll-card__cta:hover,
.fv-coll-card__cta:focus-visible,
.fv-coll-card:hover .fv-coll-card__cta {
    color: #fff;
    background-color: var(--fv-red-dark, #B1171B);
}

.fv-coll-card:hover .fv-coll-card__cta svg,
.fv-coll-card__cta:focus-visible svg {
    transform: translateX(4px);
}

.fv-coll-card__cta:focus-visible {
    outline: 2px solid var(--fv-red-soft, #F29A9C);
    outline-offset: 3px;
}

/* Whole card clickable via the CTA's stretched hit area. */
.fv-coll-card__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Tablet: two columns, fifth card spans both. */
@media (max-width: 991px) {
    .fv-coll__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fv-coll__grid > li,
    .fv-coll__grid > li:nth-child(-n+2) {
        grid-column: span 1;
    }

    .fv-coll__grid > li:nth-child(-n+2) .fv-coll-card__media {
        aspect-ratio: 3 / 2;
    }

    .fv-coll__grid > li:last-child {
        grid-column: 1 / -1;
    }

    .fv-coll__grid > li:last-child .fv-coll-card__media {
        aspect-ratio: 21 / 9;
    }
}

/* Phone: single column. */
@media (max-width: 575px) {
    .fv-coll__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fv-coll__grid > li:last-child .fv-coll-card__media {
        aspect-ratio: 3 / 2;
    }

    .fv-coll-card__cta {
        align-self: stretch;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-coll-card,
    .fv-coll-card__media img,
    .fv-coll-card__index::after,
    .fv-coll-card__cta,
    .fv-coll-card__cta svg {
        transition: none;
    }

    .fv-coll-card:hover,
    .fv-coll-card:hover .fv-coll-card__media img {
        transform: none;
    }
}

/* ------------------------------------------------------------------
   "What is full body" explainer - dark band with a cross-section
   diagram comparing a full body tile with a surface-glazed tile.
   Each slab has a chip knocked out of its top edge: on the full body
   tile the chip shows the same colour, on the glazed tile it exposes
   a different body. Slabs are inline SVG; all text is HTML so it
   stays readable when the diagram scales down on phones.
------------------------------------------------------------------- */
.fv-fb {
    position: relative;
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--fv-ink, #2C2928);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

/* Faint oversized tile grid in the background. */
.fv-fb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: radial-gradient(ellipse at 75% 50%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 75% 50%, #000 0%, transparent 70%);
}

.fv-fb__row {
    --bs-gutter-x: clamp(32px, 5vw, 80px);
    row-gap: 48px;
}

/* Copy */
/* Theme red on charcoal is about 3:1, so the small label is set a touch
   heavier to stay crisp. */
.fv-fb .title small {
    color: var(--fv-red, #E31E23);
    font-weight: 700;
}

/* Not a heading element (the sheet has no heading for this section), so the
   type is spelled out here instead of coming from the h2 rules. */
.fv-fb__heading {
    margin: 0 0 20px;
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #fff;
}

@media (max-width: 767px) {
    .fv-fb__heading {
        font-size: 28px;
    }
}

.fv-fb__text {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .76);
}

.fv-fb__props-label {
    display: block;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.fv-fb__props {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fv-fb__props > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 3px;
}

.fv-fb__props svg {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--fv-red, #E31E23);
}

/* Diagram panel */
.fv-fb__panel {
    margin: 0;
    padding: clamp(22px, 3vw, 40px);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
}

.fv-fb__panel-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(18px, 2.4vw, 28px);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.fv-fb__panel-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .12);
}

.fv-fb__slab + .fv-fb__slab {
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px dashed rgba(255, 255, 255, .14);
}

.fv-fb__slab-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 14px;
}

.fv-fb__slab-name {
    margin: 0;
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: #fff;
}

.fv-fb__slab-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.fv-fb__slab--main .fv-fb__slab-tag {
    color: var(--fv-red, #E31E23);
    font-weight: 700;
}

.fv-fb__slab svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* Muted comparison slab */
.fv-fb__slab--alt svg {
    opacity: .82;
}

.fv-fb__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

.fv-fb__note::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--fv-red, #E31E23);
}

.fv-fb__slab--alt .fv-fb__note::before {
    background: rgba(255, 255, 255, .4);
}

/* Pulsing ring around each chip draws the eye to the comparison. */
.fv-fb__ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: fvFbPulse 2.6s ease-in-out infinite;
}

@keyframes fvFbPulse {
    0%, 100% { opacity: .9; transform: scale(1); }
    50% { opacity: .35; transform: scale(1.12); }
}

@media (max-width: 767px) {
    /* Crop in on the chip side (preserveAspectRatio="xMaxYMid slice") so the
       chip and the thin glazed layer stay legible on small screens. */
    .fv-fb__slab svg {
        height: 104px;
    }

    .fv-fb__props {
        grid-template-columns: minmax(0, 1fr);
    }

    .fv-fb__props > li {
        flex-direction: row;
        align-items: center;
        padding: 14px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-fb__ring {
        animation: none;
    }
}

/* ------------------------------------------------------------------
   Why choose - editorial split. Heading, copy and CTA on the left
   (sticky on desktop); four numbered reasons on the right in a 2x2
   grid ruled with hairlines instead of boxed cards, so it reads
   differently from the highlight and collection cards above.
------------------------------------------------------------------- */
.fv-why {
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
    border-top: 1px solid var(--fv-border, #D9D8D8);
    border-bottom: 1px solid var(--fv-border, #D9D8D8);
}

.fv-why__row {
    --bs-gutter-x: clamp(32px, 5vw, 88px);
    row-gap: 48px;
}

.fv-why__intro {
    position: sticky;
    top: 120px;
}

.fv-why__intro .title h2 {
    margin-bottom: 20px;
    line-height: 1.2;
}

.fv-why__intro p {
    margin: 0 0 30px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--fv-ink-body, #52504F);
}

.fv-why__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: var(--fv-red-dark, #B1171B);
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(177, 23, 27, .22);
    transition: background-color .25s ease, box-shadow .25s ease;
}

.fv-why__cta svg {
    transition: transform .25s ease;
}

.fv-why__cta:hover,
.fv-why__cta:focus-visible {
    color: #fff;
    background: var(--fv-red, #E31E23);
    box-shadow: 0 10px 24px rgba(227, 30, 35, .28);
}

.fv-why__cta:hover svg,
.fv-why__cta:focus-visible svg {
    transform: translateX(4px);
}

.fv-why__cta:focus-visible {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 3px;
}

/* Reasons grid: hairline rules between cells. */
.fv-why__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--fv-border, #D9D8D8);
    border-left: 1px solid var(--fv-border, #D9D8D8);
}

.fv-why__grid > li {
    position: relative;
    display: block;
    margin: 0;
    padding: clamp(26px, 3vw, 40px);
    background: transparent;
    border-right: 1px solid var(--fv-border, #D9D8D8);
    border-bottom: 1px solid var(--fv-border, #D9D8D8);
    transition: background-color .35s ease;
}

/* Brand-red rule that grows along the top of a cell on hover. */
.fv-why__grid > li::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: 3px;
    background: var(--fv-red, #E31E23);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.fv-why__grid > li:hover {
    background: var(--fv-surface, #fff);
}

.fv-why__grid > li:hover::before {
    transform: scaleX(1);
}

/* Large outlined index number. */
.fv-why__num {
    display: block;
    margin-bottom: clamp(18px, 2vw, 28px);
    font-size: clamp(44px, 4.2vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--fv-red, #E31E23);
    transition: color .35s ease;
}

.fv-why__grid > li:hover .fv-why__num {
    color: var(--fv-red, #E31E23);
}

.fv-why__title {
    margin: 0 0 10px;
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--fv-ink, #2C2928);
}

.fv-why__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--fv-ink-body, #52504F);
}

/* Browsers without text-stroke get a solid number instead of an invisible one. */
@supports not (-webkit-text-stroke: 1px red) {
    .fv-why__num {
        color: var(--fv-red, #E31E23);
    }
}

@media (max-width: 991px) {
    .fv-why__intro {
        position: static;
    }
}

@media (max-width: 575px) {
    .fv-why__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fv-why__num {
        font-size: 44px;
    }

    .fv-why__cta {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-why__grid > li,
    .fv-why__grid > li::before,
    .fv-why__num,
    .fv-why__cta,
    .fv-why__cta svg {
        transition: none;
    }
}

/* ------------------------------------------------------------------
   Testimonials - light section, centred heading, a row of quote cards
   (2 visible on desktop and tablet, 1 on phones) with arrows and dots
   centred underneath. The track is a native scroll-snap scroller
   (touch, trackpad and keyboard work without JS); public/js/new.js
   adds the arrows, dots and mouse drag.
------------------------------------------------------------------- */
.fv-testi {
    --fv-testi-gap: 24px;
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--fv-surface, #fff);
    border-bottom: 1px solid var(--fv-border, #D9D8D8);
}

.fv-testi__head {
    max-width: 720px;
    margin: 0 auto clamp(36px, 5vw, 56px);
    text-align: center;
}

.fv-testi__head .title h2 {
    margin-bottom: 16px;
    line-height: 1.2;
}

.fv-testi__head p {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--fv-ink-body, #52504F);
}

/* Track */
.fv-testi__track {
    position: relative;
    display: flex;
    gap: var(--fv-testi-gap);
    margin: 0;
    /* Room for the card shadow, which overflow would otherwise clip. */
    padding: 6px 2px 28px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.fv-testi__track::-webkit-scrollbar {
    display: none;
}

.fv-testi__track:focus-visible {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 4px;
}

.fv-testi__track > li {
    display: block;
    flex: 0 0 calc((100% - var(--fv-testi-gap)) / 2);
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

/* Mouse drag (public/js/new.js). Snap is switched off while dragging so the
   track follows the pointer, then back on once it has settled. */
@media (hover: hover) and (pointer: fine) {
    .fv-testi__track {
        cursor: grab;
    }
}

.fv-testi__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
    user-select: none;
    -webkit-user-select: none;
}

.fv-testi__track.is-dragging .fv-testi-card {
    transition: none;
    transform: none;
}

/* Card (unchanged look: white, red top rule, red quote mark, initials) */
.fv-testi-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: clamp(26px, 2.6vw, 36px);
    color: var(--fv-ink, #2C2928);
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-top: 3px solid var(--fv-red, #E31E23);
    border-radius: 3px;
    box-shadow: 0 10px 28px rgba(44, 41, 40, .06);
    transition: box-shadow .35s ease, transform .35s ease;
}

.fv-testi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(44, 41, 40, .12);
}

.fv-testi-card__mark {
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    color: var(--fv-red, #E31E23);
}

.fv-testi-card blockquote {
    flex: 1;
    margin: 0 0 26px;
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 500;
    line-height: 1.75;
    color: var(--fv-ink, #2C2928);
}

.fv-testi-card blockquote p {
    margin: 0;
}

.fv-testi-card figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--fv-border, #D9D8D8);
}

.fv-testi-card__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fv-red-dark, #B1171B);
    background: var(--fv-red-tint, #FCE9E9);
    border-radius: 50%;
}

.fv-testi-card__name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--fv-ink, #2C2928);
}

.fv-testi-card__role {
    display: block;
    font-size: 13px;
    color: var(--fv-ink-muted, #858382);
}

/* Controls: arrows either side of the dots, centred under the cards. */
.fv-testi__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 8px;
}

.fv-testi__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: var(--fv-ink, #2C2928);
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}

.fv-testi__arrow:hover:not(:disabled),
.fv-testi__arrow:focus-visible {
    color: #fff;
    background: var(--fv-red-dark, #B1171B);
    border-color: var(--fv-red-dark, #B1171B);
}

.fv-testi__arrow:focus-visible {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 3px;
}

.fv-testi__arrow:disabled {
    opacity: .35;
    cursor: default;
}

.fv-testi__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fv-testi__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: var(--fv-border, #D9D8D8);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.fv-testi__dot:hover {
    background: var(--fv-ink-muted, #858382);
}

.fv-testi__dot[aria-current="true"] {
    width: 28px;
    background: var(--fv-red, #E31E23);
}

.fv-testi__dot:focus-visible {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 3px;
}

@media (max-width: 575px) {
    .fv-testi {
        --fv-testi-gap: 16px;
    }

    .fv-testi__track > li {
        flex-basis: 100%;
    }

    .fv-testi__arrow {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-testi__track {
        scroll-behavior: auto;
    }

    .fv-testi-card,
    .fv-testi__arrow,
    .fv-testi__dot {
        transition: none;
    }

    .fv-testi-card:hover {
        transform: none;
    }
}

.fv-faq {
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
    border-top: 1px solid var(--fv-border, #D9D8D8);
    border-bottom: 1px solid var(--fv-border, #D9D8D8);
    overflow: clip;
}

.fv-faq__row {
    --bs-gutter-x: clamp(28px, 4vw, 64px);
    row-gap: 40px;
}

.fv-faq__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fv-red, #E31E23);
}

.fv-faq__label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.fv-faq__title {
    margin: 0 0 clamp(24px, 3vw, 36px);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--fv-ink, #2C2928);
}

.fv-faq__help {
    padding: clamp(24px, 2.6vw, 34px);
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(44, 41, 40, .06);
}

.fv-faq__help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    color: var(--fv-red-dark, #B1171B);
    background: var(--fv-red-tint, #FCE9E9);
    border-radius: 50%;
}

.fv-faq__help-icon svg {
    width: 26px;
    height: 26px;
}

.fv-faq__help-title {
    margin: 0 0 8px;
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--fv-ink, #2C2928);
}

.fv-faq__help-text {
    margin: 0 0 24px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--fv-ink-body, #52504F);
}

.fv-faq__help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--fv-border, #D9D8D8);
}

.fv-faq__help-btn,
.fv-faq__help-tel {
    display: inline-flex;
    flex: 1 1 150px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.fv-faq__help-btn {
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--fv-red-dark, #B1171B);
    border: 1px solid var(--fv-red-dark, #B1171B);
}

.fv-faq__help-btn svg {
    transition: transform .25s ease;
}

.fv-faq__help-btn:hover,
.fv-faq__help-btn:focus-visible {
    color: #fff;
    background: var(--fv-red, #E31E23);
    border-color: var(--fv-red, #E31E23);
}

.fv-faq__help-btn:hover svg,
.fv-faq__help-btn:focus-visible svg {
    transform: translateX(4px);
}

.fv-faq__help-tel {
    flex: 1.25 1 196px;
    font-size: 14px;
    letter-spacing: .01em;
    color: var(--fv-ink, #2C2928);
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
}

.fv-faq__help-tel svg {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--fv-red, #E31E23);
}

.fv-faq__help-tel:hover,
.fv-faq__help-tel:focus-visible {
    color: var(--fv-red-dark, #B1171B);
    border-color: var(--fv-red-dark, #B1171B);
}

.fv-faq__help-btn:focus-visible,
.fv-faq__help-tel:focus-visible {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 3px;
}
.fv-faq__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fv-faq__item {
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 10px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.fv-faq__item:hover {
    border-color: #C4C2C1;
}

.fv-faq__item[open] {
    border-color: var(--fv-border, #D9D8D8);
    box-shadow: 0 14px 34px rgba(44, 41, 40, .08);
}

.fv-faq__item summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px clamp(18px, 2vw, 26px);
    list-style: none;
    cursor: pointer;
    border-radius: 10px;
}

.fv-faq__item summary::-webkit-details-marker {
    display: none;
}

.fv-faq__item summary:focus-visible {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 2px;
}

.fv-faq__q {
    flex: 1;
    margin: 0;
    font-size: clamp(15.5px, 1.2vw, 17px);
    font-weight: 600;
    line-height: 1.45;
    color: var(--fv-ink, #2C2928);
    transition: color .25s ease;
}

.fv-faq__item summary:hover .fv-faq__q,
.fv-faq__item[open] .fv-faq__q {
    color: var(--fv-red-dark, #B1171B);
}

.fv-faq__icon {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--fv-ink, #2C2928);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .25s ease;
}

.fv-faq__icon::before,
.fv-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1.8px;
    margin: -.9px 0 0 -7px;
    background: currentColor;
    border-radius: 2px;
}

.fv-faq__icon::after {
    transform: rotate(90deg);
}

.fv-faq__item summary:hover .fv-faq__icon {
    color: var(--fv-red-dark, #B1171B);
}

.fv-faq__item[open] .fv-faq__icon {
    color: var(--fv-red-dark, #B1171B);
    transform: rotate(45deg);
}

.fv-faq__a {
    padding: 0 clamp(18px, 2vw, 26px) 22px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--fv-ink-body, #52504F);
}

.fv-faq__item[open] .fv-faq__a {
    animation: fvFaqIn .35s ease;
}

@keyframes fvFaqIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 992px) {
    .fv-faq__intro-col {
        position: sticky;
        top: 120px;
    }
}

@media (max-width: 575px) {
    .fv-faq__item summary {
        gap: 12px;
        padding: 18px 16px;
    }

    .fv-faq__a {
        padding: 0 16px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-faq__item,
    .fv-faq__icon,
    .fv-faq__q,
    .fv-faq__help-btn,
    .fv-faq__help-tel,
    .fv-faq__help-btn svg {
        transition: none;
    }

    .fv-faq__item[open] .fv-faq__a {
        animation: none;
    }
}

.fv-blog {
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--fv-surface, #fff);
}

.fv-blog__head {
    max-width: 640px;
    margin: 0 auto clamp(36px, 5vw, 56px);
    text-align: center;
}

.fv-blog__head .title h2 {
    margin-bottom: 0;
    line-height: 1.2;
}

.fv-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}

.fv-post {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(44, 41, 40, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.fv-post:hover,
.fv-post:focus-within {
    transform: translateY(-3px);
    border-color: #C9C7C6;
    box-shadow: 0 14px 30px rgba(44, 41, 40, .09);
}

.fv-post__media {
    display: block;
    aspect-ratio: 29 / 20;
    overflow: hidden;
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-post__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fv-post__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px 24px 24px;
}

.fv-post__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--fv-ink, #2C2928);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.fv-post__link {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.fv-post__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.fv-post:hover .fv-post__link,
.fv-post__link:focus-visible {
    color: var(--fv-red-dark, #B1171B);
}

.fv-post__link:focus-visible {
    outline: none;
}

.fv-post:focus-within {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 2px;
}

.fv-post__text {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--fv-ink-body, #52504F);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.fv-post__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.fv-post__avatar {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 6px;
    object-fit: contain;
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 50%;
}

.fv-post__who {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fv-ink, #2C2928);
}

.fv-post__when {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--fv-ink-muted, #858382);
}

.fv-blog__more {
    margin-top: clamp(32px, 4vw, 48px);
    text-align: center;
}

@media (max-width: 991px) {
    .fv-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .fv-post-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fv-post__body {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-post,
    .fv-post__link {
        transition: none;
    }

    .fv-post:hover,
    .fv-post:focus-within {
        transform: none;
    }
}

.banner-img .fv-banner-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: #fff;
    background-color: #00000017;
}

@media (max-width: 767px) {
    .banner-img .fv-banner-title {
        font-size: 32px;
    }
}

.fv-glance {
    padding: clamp(64px, 8vw, 104px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-glance__head {
    max-width: 800px;
    margin: 0 auto clamp(28px, 4vw, 48px);
    text-align: center;
}

.fv-glance__head .title h2 {
    margin-bottom: 0;
    line-height: 1.2;
    text-wrap: balance;
}

.fv-glance__sheet {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    background: var(--fv-border, #D9D8D8);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-top: 3px solid var(--fv-red, #E31E23);
    border-radius: 6px;
    box-shadow: 0 22px 54px rgba(44, 41, 40, .08);
}

.fv-glance__cell {
    grid-column: span 4;
    margin: 0;
    padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 34px);
    background: var(--fv-surface, #fff);
    transition: background-color .25s ease;
}

.fv-glance__cell:hover {
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-glance__cell--half { grid-column: span 6; }
.fv-glance__cell--wide { grid-column: span 8; }
.fv-glance__cell--full { grid-column: span 12; }

.fv-glance__label {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fv-ink-muted, #858382);
}

.fv-glance__value {
    margin: 0;
    font-size: clamp(17px, 1.45vw, 20px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--fv-ink, #2C2928);
}

.fv-glance__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

/* style.css makes every li display:flex site-wide. */
.fv-glance__chips > li {
    display: block;
    margin: 0;
    padding: 7px 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--fv-ink, #2C2928);
    background: var(--fv-surface-alt, #F8F8F7);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 999px;
}

/* Tablet: two columns. Product Focus and Market go full width so each row is
   complete: Company|Business, Location|Experience, Focus, Categories, Market,
   Customers. */
@media (max-width: 991px) {
    .fv-glance__sheet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fv-glance__cell,
    .fv-glance__cell--half {
        grid-column: span 1;
    }

    .fv-glance__cell--solo,
    .fv-glance__cell--wide,
    .fv-glance__cell--full {
        grid-column: span 2;
    }
}

/* Phones: one column. */
@media (max-width: 575px) {
    .fv-glance__sheet {
        grid-template-columns: minmax(0, 1fr);
    }

    .fv-glance__cell,
    .fv-glance__cell--half,
    .fv-glance__cell--solo,
    .fv-glance__cell--wide,
    .fv-glance__cell--full {
        grid-column: auto;
    }
}
/* ---- Why choose (the sheet's H1) ----
   A centred hub. A tile laid on its point, inside a ring, sits between the
   six reasons: three on the left, three on the right, icons facing it.
   1200px+: the hub (left column mirrored so the icons face the emblem).
   768-1199px: a smaller emblem on top, then two left-aligned columns.
   Under 768px: a small emblem, then one column.
   The 28px phone heading size comes from the shared
   ".fv-awhy__head h1, .fv-morbi__title" rule further down this file. */
.fv-awhy {
    --fv-awhy-hub: 220px;     /* emblem diameter */
    --fv-awhy-badge: 60px;    /* icon tile box */
    position: relative;
    padding: clamp(64px, 7vw, 100px) 0;
    color: #fff;
    background:
        radial-gradient(ellipse 50% 55% at 50% 60%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 70%),
        var(--fv-ink, #2C2928);
    overflow: hidden;
    isolation: isolate;
}

.fv-awhy__head {
    position: relative;
    max-width: 760px;
    margin: 0 auto clamp(40px, 4.2vw, 60px);
    padding-bottom: 30px;
    text-align: center;
}

.fv-awhy__head h1 {
    margin: 0;
    font-size: clamp(1.875rem, 2.6vw, 2.375rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #fff;
    text-wrap: balance;
}

/* Ornament under the heading: hairline, a small red tile on its point, hairline. */
.fv-awhy__head::before,
.fv-awhy__head::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
}

.fv-awhy__head::before {
    bottom: 4px;
    width: 128px;
    height: 1px;
    margin-left: -64px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .32)) 0 0 / 48px 1px no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0)) 100% 0 / 48px 1px no-repeat;
}

.fv-awhy__head::after {
    bottom: 0;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    background: var(--fv-red, #E31E23);
    transform: rotate(45deg);
}

.fv-awhy__hub {
    position: relative;
}

/* ---- the emblem (decorative, aria-hidden) ---- */
.fv-awhy__emblem {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--fv-awhy-hub);
    height: var(--fv-awhy-hub);
    margin: 0 auto clamp(40px, 5vw, 56px);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* the outline tile, its corners touching the ring */
.fv-awhy__emblem::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 70.71%;
    height: 70.71%;
    border: 1px solid rgba(227, 30, 35, .8);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* four red studs where those corners meet the ring */
.fv-awhy__emblem::after {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    background:
        radial-gradient(circle, var(--fv-red, #E31E23) 0 3px, transparent 3.5px) 50% 0 / 9px 9px no-repeat,
        radial-gradient(circle, var(--fv-red, #E31E23) 0 3px, transparent 3.5px) 100% 50% / 9px 9px no-repeat,
        radial-gradient(circle, var(--fv-red, #E31E23) 0 3px, transparent 3.5px) 50% 100% / 9px 9px no-repeat,
        radial-gradient(circle, var(--fv-red, #E31E23) 0 3px, transparent 3.5px) 0 50% / 9px 9px no-repeat;
}

/* faint ripples spreading out from the ring (one every hub/8, fading out) */
.fv-awhy__rings {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -2;
    width: 168%;
    height: 168%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: repeating-radial-gradient(circle,
        rgba(255, 255, 255, 0) 0 calc(var(--fv-awhy-hub) / 8 - 1px),
        rgba(255, 255, 255, .07) calc(var(--fv-awhy-hub) / 8 - 1px) calc(var(--fv-awhy-hub) / 8));
    -webkit-mask-image: radial-gradient(closest-side, transparent 50%, #000 54%, transparent 100%);
    mask-image: radial-gradient(closest-side, transparent 50%, #000 54%, transparent 100%);
}

/* the tile itself, laid on its point; light falls from above */
.fv-awhy__slab {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 54%;
    height: 54%;
    border-radius: 4px;
    background: linear-gradient(135deg, #4b4543 0%, #3a3533 50%, #312d2c 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        18px 18px 44px -16px rgba(0, 0, 0, .65);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Brand mark at the centre of the emblem: the site favicon in a round disc.
   The file is a red tile inside a dark frame with white corners, so the crop
   box hides that frame (scale 1.18 -> source 15-185 of 200) and the tile's red
   matches the disc behind it. Only the white "F" reads, fully inside the
   circle with even margin (F radius 41.5px inside a 49px disc). */
.fv-awhy__mark {
    display: grid;
    place-items: center;
    width: max(54px, calc(var(--fv-awhy-hub) * .35));
    height: max(54px, calc(var(--fv-awhy-hub) * .35));
    background: var(--fv-red, #E31E23);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .26),
        0 0 0 9px rgba(255, 255, 255, .045),
        14px 16px 34px -10px rgba(0, 0, 0, .6);
}

.fv-awhy__mark-crop {
    display: block;
    width: 70%;
    height: 70%;
    overflow: hidden;
}

.fv-awhy__mark-crop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 1.18 keeps the frame out on every side: the visible window is source
       15.3-184.7 of 200, inside the red field (8-190). A horizontal nudge is
       deliberately NOT used - it shifted the window right and let the dark
       frame back in as a vertical line. */
    transform: scale(1.18);
}

/* ---- the six reasons ---- */
.fv-awhy__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* style.css makes every li display:flex; each reason is a small grid. */
.fv-awhy__item {
    display: grid;
    grid-template-columns: var(--fv-awhy-badge) minmax(0, 1fr);
    grid-template-areas:
        "badge title"
        "badge text";
    align-content: center;
    column-gap: 18px;
    position: relative;
    z-index: 1;   /* above the emblem's faint rings */
    margin: 0;
    padding: 0;
    text-align: left;
}

.fv-awhy__badge {
    grid-area: badge;
    align-self: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fv-awhy-badge);
    height: var(--fv-awhy-badge);
    color: #fff;
}

/* a small red tile on its point behind the white icon */
.fv-awhy__badge::before {
    content: "";
    position: absolute;
    inset: 15%;
    border-radius: 6px;
    background: var(--fv-red, #E31E23);
    box-shadow: 9px 9px 20px -8px rgba(0, 0, 0, .6);
    transform: rotate(45deg);
}

.fv-awhy__icon {
    position: relative;
    display: block;
    flex: none;
    width: calc(var(--fv-awhy-badge) * .43);
    height: calc(var(--fv-awhy-badge) * .43);
}

.fv-awhy__title {
    grid-area: title;
    align-self: end;
    margin: 0 0 6px;
    font-size: clamp(18px, 1.4vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}

.fv-awhy__text {
    grid-area: text;
    align-self: start;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .72);
    text-wrap: pretty;
}

/* Tablet up: two columns, 1-3 down the left and 4-6 down the right, in rows
   that line up. grid-column -2 is the last column in both the 2- and 3-column grids. */
@media (min-width: 768px) {
    .fv-awhy__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(40px, 5vw, 64px);
        row-gap: 40px;
        max-width: none;
    }

    .fv-awhy__item--left { grid-column: 1; }
    .fv-awhy__item--right { grid-column: -2; }

    .fv-awhy__item:nth-child(1),
    .fv-awhy__item:nth-child(4) { grid-row: 1; }

    .fv-awhy__item:nth-child(2),
    .fv-awhy__item:nth-child(5) { grid-row: 2; }

    .fv-awhy__item:nth-child(3),
    .fv-awhy__item:nth-child(6) { grid-row: 3; }

}

/* Tablet: a smaller emblem so the stacked layout stays compact. */
@media (min-width: 768px) and (max-width: 1199px) {
    .fv-awhy {
        --fv-awhy-hub: 170px;
    }

    .fv-awhy__emblem {
        margin-bottom: 40px;
    }
}

/* Desktop: the hub. The emblem sits over the empty middle column. */
@media (min-width: 1200px) {
    .fv-awhy {
        --fv-awhy-hub: 280px;
    }

    .fv-awhy__list {
        grid-template-columns: minmax(0, 1fr) var(--fv-awhy-hub) minmax(0, 1fr);
        column-gap: 48px;
        row-gap: 44px;
        align-items: center;
    }

    .fv-awhy__emblem {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%);
    }

    .fv-awhy__rings {
        width: 200%;
        height: 200%;
    }

    /* the left column faces the emblem: icon on the right, text set right */
    .fv-awhy__item--left {
        grid-template-columns: minmax(0, 1fr) var(--fv-awhy-badge);
        grid-template-areas:
            "title badge"
            "text badge";
        text-align: right;
    }

    /* follow the ring: the top and bottom reasons tuck in towards it */
    .fv-awhy__item--left:nth-child(1),
    .fv-awhy__item--left:nth-child(3) {
        transform: translateX(32px);
    }

    .fv-awhy__item--right:nth-child(4),
    .fv-awhy__item--right:nth-child(6) {
        transform: translateX(-32px);
    }
}

@media (max-width: 767px) {
    .fv-awhy {
        --fv-awhy-hub: 150px;
        --fv-awhy-badge: 52px;
    }

    .fv-awhy__emblem {
        margin-bottom: 36px;
    }

    .fv-awhy__list {
        row-gap: 24px;
    }

    .fv-awhy__item {
        column-gap: 16px;
    }
}

@media (max-width: 399px) {
    .fv-awhy {
        --fv-awhy-badge: 46px;
    }

    .fv-awhy__item {
        column-gap: 12px;
    }
}

/* ---- Made in Morbi ---- */
.fv-morbi {
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--fv-surface, #fff);
    /* clip, not hidden: the tint block behind the photo pokes out a little, and
       hidden would stop the heading column from sticking. */
    overflow: clip;
}

.fv-morbi__row {
    --bs-gutter-x: clamp(32px, 5vw, 88px);
    row-gap: 28px;
}

.fv-morbi__rule {
    display: block;
    width: 56px;
    height: 3px;
    margin-bottom: 22px;
    background: var(--fv-red, #E31E23);
}

.fv-morbi__title {
    margin: 0;
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fv-ink, #2C2928);
}

/* Plain prose: one size for all four paragraphs, with the bold phrases from
   the sheet. No rule or markers down the left - a line with a dot per
   paragraph read as a timeline, which these four are not. */
.fv-morbi__body p {
    max-width: 66ch;
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.9;
    color: var(--fv-ink-body, #52504F);
}

.fv-morbi__body p:last-child {
    margin-bottom: 0;
}

.fv-morbi__body strong {
    font-weight: 600;
    color: var(--fv-ink, #2C2928);
}

/* Photo under the heading: the site's own container shot from the Export page,
   over a soft brand-tint block like the home page intro. */
.fv-morbi__media {
    position: relative;
    margin: clamp(26px, 3vw, 36px) 0 0;
}

.fv-morbi__media::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -14px;
    bottom: -14px;
    width: 64%;
    height: 66%;
    background: var(--fv-red-tint, #FCE9E9);
}

.fv-morbi__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--fv-surface-alt, #F8F8F7);
    border-radius: 4px;
}

@media (max-width: 991px) {
    .fv-morbi__media {
        max-width: 560px;
    }
}

@media (min-width: 992px) {
    .fv-morbi__head {
        position: sticky;
        top: 120px;
    }
}

@media (max-width: 767px) {
    .fv-awhy__head h1,
    .fv-morbi__title {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-glance__cell,
    .fv-awhy__item {
        transition: none;
    }
}

/* ---- Inspired by You / Where Your Vision Meets Our Expertise ----
   Replaces six centred cards with a ruled list: icon, title and paragraph on
   one line per row. The old cards used the template's ".item" class, whose
   hover rules (white text, inverted icon) are what made them go blank when
   hovered - the dark hover background they were written for no longer exists.
   These rows deliberately avoid .item / .feat-container / .define-ican. */
.fv-inspired {
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--fv-surface, #fff);
}

.fv-inspired__head {
    max-width: 760px;
    margin: 0 auto clamp(36px, 5vw, 60px);
    text-align: center;
}

.fv-inspired__head .title h2 {
    margin-bottom: 0;
    line-height: 1.2;
}

.fv-inspired__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--fv-border, #D9D8D8);
}

/* style.css makes every li display:flex; the row is a grid. */
.fv-inspired__row {
    display: grid;
    grid-template-columns: 76px minmax(200px, 300px) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(20px, 3vw, 44px);
    margin: 0;
    padding: clamp(24px, 2.6vw, 34px) clamp(8px, 1.6vw, 24px);
    border-top: 1px solid var(--fv-border, #D9D8D8);
    transition: background-color .3s ease;
}

.fv-inspired__row:hover {
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-inspired__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    background: var(--fv-surface-alt, #F8F8F7);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 50%;
    transition: background-color .3s ease, border-color .3s ease;
}

.fv-inspired__row:hover .fv-inspired__icon {
    background: var(--fv-surface, #fff);
    border-color: var(--fv-red, #E31E23);
}

.fv-inspired__icon img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.fv-inspired__title {
    margin: 0;
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--fv-ink, #2C2928);
    transition: color .25s ease;
}

.fv-inspired__row:hover .fv-inspired__title {
    color: var(--fv-red-dark, #B1171B);
}

.fv-inspired__text {
    max-width: 64ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--fv-ink-body, #52504F);
}

/* Tablet: icon on the left, title above the paragraph. */
@media (max-width: 991px) {
    .fv-inspired__row {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: start;
        row-gap: 6px;
    }

    .fv-inspired__icon {
        grid-row: 1 / span 2;
        width: 64px;
        height: 64px;
    }

    .fv-inspired__icon img {
        width: 38px;
        height: 38px;
    }

    .fv-inspired__title {
        align-self: end;
    }
}

/* Phones: everything stacked. */
@media (max-width: 575px) {
    .fv-inspired__row {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px 4px;
    }

    .fv-inspired__icon {
        grid-row: auto;
        margin-bottom: 8px;
    }

    .fv-inspired__title {
        align-self: auto;
    }
}

@media (max-width: 767px) {
    .fv-inspired__head .title h2 {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-inspired__row,
    .fv-inspired__icon,
    .fv-inspired__title {
        transition: none;
    }
}

/* ==================================================================
   GALLERY PAGE - intro text above the photo grid
================================================================== */
.fv-gallery-intro {
    padding: clamp(56px, 7vw, 96px) 0 0;
    background: var(--fv-surface, #fff);
}

.fv-gallery-intro__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

/* Short brand-red rule above the heading, as on the other new sections. */
.fv-gallery-intro__inner::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto 22px;
    background: var(--fv-red, #E31E23);
}

.fv-gallery-intro .title h2 {
    margin-bottom: 16px;
    line-height: 1.2;
    text-wrap: balance;
}

.fv-gallery-intro p {
    margin: 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--fv-ink-body, #52504F);
}

/* The grid section carries its own 80px top padding; with the intro above it
   that is more gap than the two belong apart. */
.fv-gallery-intro + #gallery {
    padding-top: clamp(32px, 4vw, 52px);
}

/* ==================================================================
   FAQ PAGE (/faq)
   Questions reuse the home page accordion classes (.fv-faq__list /
   __item / __q / __icon / __a). Added here: a topic list on the left
   that follows the reader, the group headings, and the closing block.
   The group headings are h1 or h2 depending on the sheet, so they are
   styled by class, never by tag.
================================================================== */
.fv-faqp {
    padding: clamp(56px, 7vw, 96px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-faqp__row {
    --bs-gutter-x: clamp(28px, 4vw, 64px);
    row-gap: 28px;
}

/* ---- Topic list ---- */
.fv-faqp__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--fv-border, #D9D8D8);
}

.fv-faqp__nav li {
    display: block;
    margin: 0;
}

.fv-faqp__nav a {
    display: block;
    margin-left: -2px;
    padding: 10px 0 10px 18px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fv-ink-body, #52504F);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.fv-faqp__nav a:hover,
.fv-faqp__nav a:focus-visible {
    color: var(--fv-red-dark, #B1171B);
}

.fv-faqp__nav a:focus-visible {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: -2px;
}

.fv-faqp__nav a[aria-current="true"] {
    color: var(--fv-red-dark, #B1171B);
    border-left-color: var(--fv-red, #E31E23);
}

@media (min-width: 992px) {
    .fv-faqp__nav {
        position: sticky;
        top: 120px;
    }
}

/* Below 992px the list becomes a row of chips you can swipe sideways. */
@media (max-width: 991px) {
    .fv-faqp__nav ul {
        display: flex;
        gap: 10px;
        padding-bottom: 6px;
        overflow-x: auto;
        border-left: 0;
        scrollbar-width: none;
    }

    .fv-faqp__nav ul::-webkit-scrollbar {
        display: none;
    }

    .fv-faqp__nav li {
        flex: none;
    }

    .fv-faqp__nav a {
        margin-left: 0;
        padding: 9px 16px;
        font-size: 14px;
        white-space: nowrap;
        background: var(--fv-surface, #fff);
        border: 1px solid var(--fv-border, #D9D8D8);
        border-radius: 999px;
    }

    .fv-faqp__nav a[aria-current="true"] {
        background: var(--fv-red-tint, #FCE9E9);
        border-color: var(--fv-red, #E31E23);
    }
}

/* ---- Groups ---- */
.fv-faqp__group {
    scroll-margin-top: 110px;
}

.fv-faqp__group + .fv-faqp__group {
    margin-top: clamp(40px, 5vw, 64px);
}

.fv-faqp__title {
    margin: 0 0 20px;
    padding-left: 16px;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--fv-ink, #2C2928);
    border-left: 3px solid var(--fv-red, #E31E23);
}

/* Question numbers stay part of the heading text, as in the sheet. */
.fv-faqp__no {
    margin-right: 2px;
    color: var(--fv-red-dark, #B1171B);
}

/* Landing on a question from a link leaves it clear of the fixed header. */
.fv-faqp .fv-faq__item {
    scroll-margin-top: 110px;
}

.fv-faqp .fv-faq__a strong {
    font-weight: 600;
    color: var(--fv-ink, #2C2928);
}

/* ---- Closing block ----
   A white band. The FAQ list above is light grey and the site footer below is
   dark charcoal, so a dark block here ran straight into the footer with no
   edge between them. White separates it from both, and the hairline on top
   keeps it distinct from the grey list. The footer is untouched. */
.fv-faqp-cta {
    position: relative;
    padding: clamp(64px, 8vw, 104px) 0;
    color: var(--fv-ink, #2C2928);
    background: var(--fv-surface, #fff);
    border-top: 1px solid var(--fv-border, #D9D8D8);
    overflow: hidden;
    isolation: isolate;
}

.fv-faqp-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(44, 41, 40, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 41, 40, .05) 1px, transparent 1px);
    background-size: 120px 120px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%);
}

.fv-faqp-cta__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.fv-faqp-cta__inner::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto 26px;
    background: var(--fv-red, #E31E23);
}

.fv-faqp-cta__inner .fv-faqp-cta__title {
    margin: 0 0 18px;
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fv-ink, #2C2928);
    text-wrap: balance;
}

.fv-faqp-cta__inner p {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--fv-ink-body, #52504F);
}

.fv-faqp-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: var(--fv-red-dark, #B1171B);
    border-radius: 3px;
    box-shadow: 0 12px 26px rgba(177, 23, 27, .24);
    transition: background-color .25s ease;
}

.fv-faqp-cta__btn svg {
    transition: transform .25s ease;
}

.fv-faqp-cta__btn:hover,
.fv-faqp-cta__btn:focus-visible {
    color: #fff;
    background: var(--fv-red, #E31E23);
}

.fv-faqp-cta__btn:hover svg,
.fv-faqp-cta__btn:focus-visible svg {
    transform: translateX(4px);
}

.fv-faqp-cta__btn:focus-visible {
    outline: 2px solid var(--fv-ink, #2C2928);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .fv-faqp-cta__inner .fv-faqp-cta__title {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .fv-faqp-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-faqp__nav a,
    .fv-faqp-cta__btn,
    .fv-faqp-cta__btn svg {
        transition: none;
    }
}

/* Links inside FAQ answers (catalogue, WhatsApp, e-mail). */
.fv-faqp .fv-faq__a a {
    font-weight: 600;
    color: var(--fv-red-dark, #B1171B);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.fv-faqp .fv-faq__a a:hover,
.fv-faqp .fv-faq__a a:focus-visible {
    color: var(--fv-red, #E31E23);
}

/* ==================================================================
   ARCHITECTS & DESIGNERS PAGE (/architects-interior-designers)
   Sections, in page order: hero, solutions (4 columns), how to select
   (steps + checklist), applications (tile panel), where (table),
   design factors (cards), why source (dark), closing call to action
   (brand red), FAQs. Headings are styled by class, not by tag.
================================================================== */

/* shared centred heading block */
.fv-arch-head {
    max-width: 780px;
    margin: 0 auto clamp(32px, 4.5vw, 54px);
    text-align: center;
}

.fv-arch-head h2 {
    margin: 0;
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--fv-ink, #2C2928);
    text-wrap: balance;
}

.fv-arch-head p {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--fv-ink-body, #52504F);
}

/* outlined number used in several sections */
.fv-arch-no {
    display: block;
    margin-bottom: 18px;
    font-size: clamp(40px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--fv-red, #E31E23);
}

@supports not (-webkit-text-stroke: 1px red) {
    .fv-arch-no { color: var(--fv-red, #E31E23); }
}

/* ---- 1. Hero ----
   Desktop/tablet: a full-screen photo with the title and a frosted description
   card over it. Phone: the photo sits on top as its own block and the content
   follows below on solid charcoal, so the text never fights the picture. */
.fv-arch-hero {
    --fv-hero-img-h: clamp(300px, 54svh, 480px);
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(116px, 15vh, 168px) 0 clamp(56px, 9vh, 96px);
    color: #fff;
    background: var(--fv-ink, #2C2928);
    overflow: hidden;
    isolation: isolate;
}

.fv-arch-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* lighter than before so the photo still shows; darkest behind the text */
.fv-arch-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(14, 15, 18, .84) 0%, rgba(14, 15, 18, .58) 55%, rgba(14, 15, 18, .3) 100%),
        linear-gradient(0deg, rgba(14, 15, 18, .78) 0%, rgba(14, 15, 18, .35) 45%, transparent 70%),
        linear-gradient(180deg, rgba(14, 15, 18, .55) 0%, transparent 22%);
}

.fv-arch-hero .container {
    container-type: inline-size;
}

.fv-arch-hero__content {
    max-width: 1080px;
}

.fv-arch-hero__rule {
    display: block;
    width: 56px;
    height: 3px;
    margin-bottom: 26px;
    background: var(--fv-red, #E31E23);
}

.fv-arch-hero h1 {
    margin: 0 0 clamp(26px, 4vh, 40px);
    /* the long second line is about 17.5em wide, so size from the container */
    font-size: clamp(1.9rem, 5.3cqi, 3.6rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: #fff;
}

@media (min-width: 768px) {
    .fv-h1-line {
        display: block;
    }
}

/* description: open layout under a hairline (no box). The lead paragraph is
   larger; the second paragraph and the button share the right column so the
   two sides end at the same height. */
.fv-arch-hero__text {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
    padding-top: clamp(28px, 3.4vh, 40px);
    border-top: 1px solid rgba(255, 255, 255, .26);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

/* short red segment on the hairline */
.fv-arch-hero__text::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 120px;
    height: 3px;
    background: var(--fv-red, #E31E23);
}

.fv-arch-hero__text p {
    margin: 0;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
}


.fv-arch-hero__side .fv-arch-hero__cta {
    margin-top: 28px;
}

.fv-arch-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 32px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: var(--fv-red-dark, #B1171B);
    border-radius: 2px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    transition: background-color .25s ease;
}

.fv-arch-hero__cta svg {
    transition: transform .25s ease;
}

.fv-arch-hero__cta:hover,
.fv-arch-hero__cta:focus-visible {
    color: #fff;
    background: var(--fv-red, #E31E23);
}

.fv-arch-hero__cta:hover svg,
.fv-arch-hero__cta:focus-visible svg {
    transform: translateX(5px);
}

.fv-arch-hero__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* tablet portrait: stack lead, paragraph and button */
@media (max-width: 991px) {
    .fv-arch-hero__text {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* phone: picture first, content after */
@media (max-width: 767px) {
    .fv-arch-hero {
        display: block;
        min-height: 0;
        padding: 0 0 56px;
    }

    .fv-arch-hero__bg {
        position: relative;
        inset: auto;
        z-index: 0;
        display: block;
        height: var(--fv-hero-img-h);
    }

    /* keep only a top fade (for the white menu icons) over the picture */
    .fv-arch-hero::before {
        bottom: auto;
        height: var(--fv-hero-img-h);
        background: linear-gradient(180deg, rgba(14, 15, 18, .7) 0%, transparent 45%);
    }

    .fv-arch-hero .container {
        padding-top: 32px;
    }

    .fv-arch-hero__cta {
        width: 100%;
        justify-content: center;
        padding: 0 18px;
    }
}

/* ---- 2. Solutions: four ruled columns ---- */
.fv-arch-solutions {
    padding: clamp(72px, 9vw, 112px) 0;
    background: var(--fv-surface, #fff);
}

.fv-arch-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* style.css makes every li display:flex. */
.fv-arch-cols > li {
    display: block;
    margin: 0;
    padding-top: 26px;
    border-top: 2px solid var(--fv-border, #D9D8D8);
    transition: border-color .3s ease;
}

.fv-arch-cols > li:hover {
    border-top-color: var(--fv-red, #E31E23);
}

.fv-arch-cols__title {
    margin: 0 0 10px;
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--fv-ink, #2C2928);
}

.fv-arch-cols__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--fv-ink-body, #52504F);
}

.fv-arch-cols__text strong {
    font-weight: 600;
    color: var(--fv-ink, #2C2928);
}

@media (max-width: 991px) {
    .fv-arch-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }
}

@media (max-width: 575px) {
    .fv-arch-cols {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }
}

/* ---- 3. Collections: product slider ----
   Five product cards with a large photo, in a native scroll-snap rail
   (3 on desktop, 2 on tablet, 1 plus a peek of the next on phones). new.js adds
   the arrows, dots and mouse drag (same script and controls as the home page
   testimonials); touch and keyboard scrolling work without it. The whole card
   links to its collection page through the title. No hover animation by
   design; keyboard focus still gets a visible ring. */
.fv-arch-apps {
    --fv-rail-gap: clamp(16px, 2vw, 26px);
    padding: clamp(72px, 9vw, 112px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-prod__track {
    position: relative;
    display: flex;
    gap: var(--fv-rail-gap);
    margin: 0;
    /* room for the card shadow, which overflow would otherwise clip */
    padding: 6px 2px 28px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* dragging must never highlight text */
    -webkit-user-select: none;
    user-select: none;
}

.fv-prod__track::-webkit-scrollbar {
    display: none;
}

.fv-prod__track:focus-visible {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 4px;
}

/* style.css makes every li display:flex, so say what we want */
.fv-prod__track > li {
    display: block;
    flex: 0 0 calc((100% - 2 * var(--fv-rail-gap)) / 3);
    min-width: 0;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

@media (hover: hover) and (pointer: fine) {
    .fv-prod__track {
        cursor: grab;
    }
}

/* while dragging: follow the pointer, no snapping */
.fv-prod__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.fv-prod__track img,
.fv-prod__track a {
    -webkit-user-drag: none;
}

.fv-prod__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 10px;
}

/* keyboard focus only (not shown on mouse clicks) */
.fv-prod__card:has(a:focus-visible) {
    outline: 2px solid var(--fv-red-dark, #B1171B);
    outline-offset: 2px;
}

/* photo */
.fv-prod__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #E9E7E4;
}

.fv-prod__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* round arrow chip on the photo, the cue that the card is a link */
.fv-prod__go {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--fv-ink, #2C2928);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.fv-prod__body {
    flex: 1;
    padding: clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 30px) clamp(24px, 2.4vw, 32px);
}

.fv-prod__label {
    margin: 0 0 10px;
    font-size: clamp(18px, 1.55vw, 21px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.fv-prod__label a {
    color: var(--fv-ink, #2C2928);
    text-decoration: none;
}

/* stretched link: the whole card is clickable */
.fv-prod__label a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.fv-prod__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--fv-ink-body, #52504F);
}

@media (max-width: 991px) {
    .fv-prod__track > li {
        flex-basis: calc((100% - var(--fv-rail-gap)) / 2);
    }
}

@media (max-width: 575px) {
    .fv-prod__track > li {
        flex-basis: 84%;
    }

    .fv-prod__go {
        right: 12px;
        bottom: 12px;
        width: 40px;
        height: 40px;
    }

    .fv-arch-apps .fv-testi__arrow {
        width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-prod__track {
        scroll-behavior: auto;
    }
}

/* ---- 5. Where: typographic index (dark) ----
   Seven tall rows with large application names and the considerations beside
   them; a red fill sweeps across a row on hover. It is still a real table
   (roles are set in the markup); CSS lays the rows out as a grid. The numbers
   are drawn with a pseudo-element and a CSS counter. */
.fv-arch-where {
    position: relative;
    padding: clamp(56px, 7vw, 88px) 0;
    color: #fff;
    background: var(--fv-ink, #2C2928);
    overflow: hidden;
    isolation: isolate;
}

.fv-arch-where::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 120px 120px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}

.fv-arch-where .fv-arch-head h2 {
    color: #fff;
}

.fv-arch-where .fv-arch-head p {
    color: rgba(255, 255, 255, .72);
}

.fv-ix {
    /* max-width: 960px; */
    margin: 0 auto;
}

.fv-ix table,
.fv-ix thead,
.fv-ix tbody {
    display: block;
    width: 100%;
    margin: 0;
}

/* shared row geometry: number | name | considerations */
.fv-ix thead tr,
.fv-ix tbody tr {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: clamp(16px, 2.4vw, 32px);
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.fv-ix thead tr {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
}

.fv-ix thead th {
    padding: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-align: left;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.fv-ix thead th:first-child {
    grid-column: 2;
}

.fv-ix thead th:last-child {
    grid-column: 3;
}

.fv-ix tbody {
    counter-reset: fvix;
}

.fv-ix tbody tr {
    counter-increment: fvix;
    padding-top: clamp(16px, 1.6vw, 20px);
    padding-bottom: clamp(16px, 1.6vw, 20px);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    background: linear-gradient(var(--fv-red-dark, #B1171B), var(--fv-red-dark, #B1171B)) no-repeat left center / 0% 100%;
    transition: background-size .5s cubic-bezier(.2, .7, .2, 1);
}

.fv-ix tbody tr:hover,
.fv-ix tbody tr:focus-within {
    background-size: 100% 100%;
}

.fv-ix tbody tr::before {
    content: counter(fvix, decimal-leading-zero);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .5);
    transition: color .3s ease;
}

.fv-ix tbody tr:hover::before {
    color: #fff;
}

.fv-ix tbody th,
.fv-ix tbody td {
    display: block;
    width: auto;
    padding: 0;
    text-align: left;
    background: transparent;
}

.fv-ix tbody th {
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
}

.fv-ix tbody td {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
    transition: color .3s ease;
}

.fv-ix tbody tr:hover td {
    color: #fff;
}

.fv-ix tbody td::before {
    content: attr(data-label);
    display: none;
}

/* tablet */
@media (max-width: 991px) {
    .fv-ix thead tr,
    .fv-ix tbody tr {
        grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.2fr);
    }
}

/* phone: number | name over considerations; header row for screen readers only */
@media (max-width: 767px) {
    .fv-ix thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .fv-ix tbody tr {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 12px;
        padding: 16px 14px;
        align-items: start;
    }

    .fv-ix tbody tr::before {
        grid-column: 1;
        grid-row: 1;
        padding-top: 4px;
    }

    .fv-ix tbody th {
        grid-column: 2;
        grid-row: 1;
        font-size: 19px;
    }

    .fv-ix tbody td {
        grid-column: 2;
        grid-row: 2;
        margin-top: 8px;
        font-size: 15px;
    }

    .fv-ix tbody td::before {
        display: block;
        margin-bottom: 2px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--fv-red-soft, #F29A9C);
    }
}

/* ---- 6. Design factors: bento grid ----
   Two wide cards on top, three below, so the descriptions get a comfortable
   line length instead of being squeezed into five narrow columns. The last
   card (Specification, the final check) is dark as the accent. */
.fv-arch-design {
    padding: clamp(72px, 9vw, 112px) 0;
    background: var(--fv-surface, #fff);
}

.fv-arch-factors {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* style.css makes every li display:flex, so say what we want explicitly */
.fv-arch-factors__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: span 2;
    min-width: 0;
    padding: clamp(26px, 2.6vw, 38px);
    overflow: hidden;
    background: var(--fv-surface-alt, #F8F8F7);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 8px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.fv-arch-factors__card:nth-child(-n+2) {
    grid-column: span 3;
}

/* red rule drawing in along the top edge */
.fv-arch-factors__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--fv-red, #E31E23);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.fv-arch-factors__card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 22px 46px rgba(44, 41, 40, .12);
}

.fv-arch-factors__card:hover::before {
    transform: scaleX(1);
}

.fv-arch-factors__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: clamp(22px, 2.4vw, 34px);
    color: var(--fv-red, #E31E23);
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-red-tint, #FCE9E9);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--fv-red-tint, #FCE9E9);
}

.fv-arch-factors__icon svg {
    width: 26px;
    height: 26px;
}

/* big outlined index in the corner */
.fv-arch-factors__no {
    position: absolute;
    top: clamp(18px, 2vw, 28px);
    right: clamp(22px, 2.4vw, 34px);
    font-size: clamp(44px, 4.2vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(44, 41, 40, .22);
    transition: -webkit-text-stroke-color .3s ease;
}

.fv-arch-factors__card:hover .fv-arch-factors__no {
    -webkit-text-stroke-color: var(--fv-red, #E31E23);
}

.fv-arch-factors__title {
    margin: 0 0 12px;
    font-size: clamp(21px, 1.9vw, 26px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--fv-ink, #2C2928);
}

.fv-arch-factors__text {
    max-width: 44ch;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--fv-ink-body, #52504F);
}

/* the accent card */
.fv-arch-factors__card:last-child {
    background: var(--fv-ink, #2C2928);
    border-color: var(--fv-ink, #2C2928);
}

.fv-arch-factors__card:last-child .fv-arch-factors__icon {
    color: #fff;
    background: var(--fv-red, #E31E23);
    border-color: var(--fv-red, #E31E23);
    box-shadow: 0 0 0 6px rgba(227, 30, 35, .22);
}

.fv-arch-factors__card:last-child .fv-arch-factors__no {
    -webkit-text-stroke-color: rgba(255, 255, 255, .3);
}

.fv-arch-factors__card:last-child .fv-arch-factors__title {
    color: #fff;
}

.fv-arch-factors__card:last-child .fv-arch-factors__text {
    color: rgba(255, 255, 255, .8);
}

/* tablet: two columns; the fifth card takes the full row */
@media (max-width: 991px) {
    .fv-arch-factors__card,
    .fv-arch-factors__card:nth-child(-n+2) {
        grid-column: span 3;
    }

    .fv-arch-factors__card:last-child {
        grid-column: span 6;
    }

    .fv-arch-factors__card:last-child .fv-arch-factors__text {
        max-width: 60ch;
    }
}

/* phone: one column */
@media (max-width: 575px) {
    .fv-arch-factors__card,
    .fv-arch-factors__card:nth-child(-n+2),
    .fv-arch-factors__card:last-child {
        grid-column: span 6;
    }

    .fv-arch-factors__icon {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }
}

/* ---- 7. Why source (dark) ----
   Left: a red stat card built from the first reason ("30+ Years..."). Right:
   heading, the two paragraphs in one matching style, then the other three
   reasons as icon rows. Stacks in reading order on phones. */
.fv-arch-why {
    position: relative;
    padding: clamp(64px, 8vw, 104px) 0;
    color: #fff;
    background: var(--fv-ink, #2C2928);
    overflow: hidden;
    isolation: isolate;
}

.fv-arch-why::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 120px 120px;
    -webkit-mask-image: radial-gradient(ellipse at 85% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 85% 0%, #000 0%, transparent 70%);
}

.fv-arch-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas:
        "stat head"
        "stat intro"
        "stat points";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 0;
}

.fv-arch-why__head {
    grid-area: head;
}

.fv-arch-why__head h2 {
    margin: 0;
    font-size: clamp(1.9rem, 3.1vw, 2.7rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #fff;
    text-wrap: balance;
}

.fv-arch-why__head h2::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-bottom: 22px;
    background: var(--fv-red, #E31E23);
}

/* both paragraphs: exactly the same style */
.fv-arch-why__intro {
    grid-area: intro;
    margin-top: clamp(20px, 2.4vw, 28px);
}

.fv-arch-why__intro p {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .8);
}

.fv-arch-why__intro p:last-child {
    margin-bottom: 0;
}

.fv-arch-why__intro strong {
    font-weight: 600;
    color: #fff;
}

/* stat card ---------------------------------------------------------------- */
.fv-arch-why__stat {
    grid-area: stat;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 3vw, 44px);
    overflow: hidden;
    color: #fff;
    background: linear-gradient(160deg, #F0292E 0%, var(--fv-red, #E31E23) 60%, #D91C21 100%);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(227, 30, 35, .28);
}

.fv-arch-why__stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 75%);
}

.fv-arch-why__stat > * {
    position: relative;
}

.fv-arch-why__stat .fv-arch-why__label {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0 14px;
    font-size: clamp(19px, 1.7vw, 23px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #fff;
}

.fv-arch-why__big {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(84px, 9.5vw, 140px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.05em;
}

.fv-arch-why__stat .fv-arch-why__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .9);
}

/* the other three reasons ------------------------------------------------- */
.fv-arch-why__points {
    grid-area: points;
    align-self: end;
    margin-top: clamp(28px, 3.4vw, 44px);
}

.fv-arch-why__tile {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.fv-arch-why__tile:last-child {
    padding-bottom: 0;
}

.fv-arch-why__icon {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: #fff;
    background: var(--fv-red, #E31E23);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(227, 30, 35, .22);
    transition: background-color .3s ease, box-shadow .3s ease;
}

.fv-arch-why__icon svg {
    width: 24px;
    height: 24px;
}

.fv-arch-why__tile:hover .fv-arch-why__icon {
    background: var(--fv-red-dark, #B1171B);
    box-shadow: 0 0 0 7px rgba(227, 30, 35, .3);
}

.fv-arch-why__tile .fv-arch-why__label {
    margin: 2px 0 6px;
    font-size: clamp(18px, 1.5vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: #fff;
}

.fv-arch-why__tile .fv-arch-why__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

/* tablet and phone: single column in reading order (heading, paragraphs, stat, reasons) */
@media (max-width: 991px) {
    .fv-arch-why__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "intro"
            "stat"
            "points";
        grid-template-rows: none;
    }

    .fv-arch-why__stat .fv-arch-why__label {
        flex: none;
        gap: 18px;
    }

    .fv-arch-why__stat {
        margin-top: 36px;
        min-height: 0;
        gap: 28px;
    }

    .fv-arch-why__big {
        font-size: clamp(84px, 22vw, 120px);
    }

    .fv-arch-why__points {
        align-self: auto;
        margin-top: 8px;
    }
}

@media (max-width: 575px) {
    .fv-arch-why__tile {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 16px;
    }

    .fv-arch-why__icon {
        width: 44px;
        height: 44px;
    }

    .fv-arch-why__icon svg {
        width: 21px;
        height: 21px;
    }
}

/* ---- 8. Closing call to action ----
   A light card on a soft grey band: text on the left, the button on the
   right. A red edge down the left side, a faint tile grid and two angled
   tinted "tiles" on the right give it character without a coloured
   background. Stacks on phones with a full-width button. */
.fv-arch-cta {
    padding: clamp(56px, 7vw, 96px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-arch-cta__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    padding: clamp(34px, 5vw, 64px) clamp(28px, 5vw, 72px);
    padding-left: clamp(34px, 5.4vw, 80px);
    overflow: hidden;
    color: var(--fv-ink, #2C2928);
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 14px;
    box-shadow: 0 24px 56px rgba(44, 41, 40, .08);
    isolation: isolate;
}

/* red edge down the left side */
.fv-arch-cta__inner > :first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background: var(--fv-red, #E31E23);
}

/* faint tile grid, strongest on the right */
.fv-arch-cta__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(44, 41, 40, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 41, 40, .06) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}

/* two angled tinted tiles peeking in from the right edge */
.fv-arch-cta__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -90px;
    width: 280px;
    height: 280px;
    margin-top: -140px;
    background: var(--fv-red-tint, #FCE9E9);
    border: 1px solid #F4CDCD;
    border-radius: 18px;
    box-shadow: -70px 46px 0 -22px rgba(252, 233, 233, .8), -140px -50px 0 -60px rgba(252, 233, 233, .7);
    transform: rotate(18deg);
}

.fv-arch-cta h2 {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 2.9vw, 2.375rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--fv-ink, #2C2928);
    text-wrap: balance;
}

.fv-arch-cta p {
    max-width: 54ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--fv-ink-body, #52504F);
}

.fv-arch-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 34px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    background: var(--fv-red-dark, #B1171B);
    border-radius: 3px;
    box-shadow: 0 14px 28px rgba(177, 23, 27, .26);
    transition: background-color .25s ease, transform .25s ease;
}

.fv-arch-cta__btn svg {
    transition: transform .25s ease;
}

.fv-arch-cta__btn:hover,
.fv-arch-cta__btn:focus-visible {
    color: #fff;
    background: var(--fv-red, #E31E23);
    transform: translateY(-2px);
}

.fv-arch-cta__btn:hover svg,
.fv-arch-cta__btn:focus-visible svg {
    transform: translateX(5px);
}

.fv-arch-cta__btn:focus-visible {
    outline: 2px solid var(--fv-ink, #2C2928);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .fv-arch-cta__inner {
        grid-template-columns: minmax(0, 1fr);
        padding-left: clamp(28px, 7vw, 40px);
    }

    .fv-arch-cta__btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}

/* ---- 9. FAQs ----
   Left: the heading with a large outlined question mark (sticky while the
   list scrolls). Right: numbered rows between hairlines; the open row gets a
   red edge and a tinted background. Native <details>, one open at a time. */
.fv-arch-faq {
    padding: clamp(72px, 9vw, 112px) 0;
    background: var(--fv-surface, #fff);
}

.fv-afaq {
    max-width: 920px;
    margin: 0 auto;
}

.fv-afaq__intro {
    margin-bottom: clamp(30px, 4vw, 48px);
    text-align: center;
}

.fv-afaq__intro h2 {
    margin: 0;
    font-size: 2.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--fv-ink, #2C2928);
    text-wrap: balance;
}

.fv-afaq__intro h2::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0 auto 22px;
    background: var(--fv-red, #E31E23);
}

.fv-afaq__list {
    counter-reset: fvafaq;
    border-top: 2px solid var(--fv-ink, #2C2928);
}

.fv-afaq__item {
    counter-increment: fvafaq;
    position: relative;
    border-bottom: 1px solid var(--fv-border, #D9D8D8);
    transition: background-color .25s ease;
}

/* red edge on the open row */
.fv-afaq__item::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--fv-red, #E31E23);
    transform: scaleY(0);
    transition: transform .3s ease;
}

.fv-afaq__item[open] {
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-afaq__item[open]::before {
    transform: scaleY(1);
}

.fv-afaq__item summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 40px;
    align-items: center;
    column-gap: 14px;
    padding: 24px 20px;
    list-style: none;
    cursor: pointer;
}

.fv-afaq__item summary::-webkit-details-marker {
    display: none;
}

.fv-afaq__item summary:focus-visible {
    outline: 2px solid var(--fv-red, #E31E23);
    outline-offset: -2px;
}

.fv-afaq__item summary::before {
    content: counter(fvafaq, decimal-leading-zero);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
    color: var(--fv-ink-muted, #858382);
    transition: color .25s ease;
}

.fv-afaq__q {
    font-size: clamp(16.5px, 1.35vw, 19px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--fv-ink, #2C2928);
    transition: color .25s ease;
}

.fv-afaq__item summary:hover .fv-afaq__q,
.fv-afaq__item[open] .fv-afaq__q {
    color: var(--fv-red-dark, #B1171B);
}

.fv-afaq__item[open] summary::before {
    color: var(--fv-red, #E31E23);
}

/* circular plus that turns into a cross when open */
.fv-afaq__icon {
    position: relative;
    justify-self: end;
    width: 38px;
    height: 38px;
    color: var(--fv-ink, #2C2928);
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 50%;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .25s ease, background-color .25s ease, border-color .25s ease;
}

.fv-afaq__icon::before,
.fv-afaq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    background: currentColor;
    border-radius: 2px;
}

.fv-afaq__icon::after {
    transform: rotate(90deg);
}

.fv-afaq__item summary:hover .fv-afaq__icon {
    border-color: var(--fv-red, #E31E23);
    color: var(--fv-red, #E31E23);
}

.fv-afaq__item[open] .fv-afaq__icon {
    color: #fff;
    background: var(--fv-red, #E31E23);
    border-color: var(--fv-red, #E31E23);
    transform: rotate(45deg);
}

.fv-afaq__a {
    padding: 0 calc(40px + 14px + 20px) 28px calc(34px + 14px + 20px);
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--fv-ink-body, #52504F);
}

.fv-afaq__a strong {
    font-weight: 600;
    color: var(--fv-ink, #2C2928);
}

.fv-afaq__a a {
    color: var(--fv-red-dark, #B1171B);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 575px) {
    .fv-afaq__item summary {
        grid-template-columns: 34px minmax(0, 1fr) 36px;
        column-gap: 10px;
        padding: 20px 12px;
    }

    .fv-afaq__icon {
        width: 34px;
        height: 34px;
    }

    .fv-afaq__a {
        padding: 0 14px 24px 56px;
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .fv-arch-head h2,
    .fv-arch-select__intro h2,
    .fv-arch-why h2,
    .fv-afaq__intro h2,
    .fv-arch-cta h2 {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-arch-hero__cta,
    .fv-arch-hero__cta svg,
    .fv-arch-cols > li,
    .fv-ix tbody tr,
    .fv-ix tbody tr::before,
    .fv-arch-factors__card,
    .fv-arch-why__tile,
    .fv-arch-cta__btn,
    .fv-arch-cta__btn svg {
        transition: none;
    }

    .fv-arch-factors__card:hover {
        transform: none;
    }
}

/* ==================================================================
   ABOUT: Core Mission / Vision / Values
   Three equal cards. Mission and Vision carry their photos (the dartboard and
   the camera lens already used on the old layout); Values is the dark accent
   card and shows the three words from its text in large type. Two columns on
   tablet (Values spans the full row), one on phones.
================================================================== */
.fv-mvv {
    padding: clamp(52px, 6vw, 84px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-mvv__head {
    max-width: 720px;
    margin: 0 auto clamp(26px, 3.2vw, 40px);
    text-align: center;
}

.fv-mvv__head .title small {
    justify-content: center;
}

.fv-mvv__head h2 {
    margin: 0;
}

.fv-mvv__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin: 0;
}

/* ---- shared card ---- */
.fv-mvv__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--fv-surface, #fff);
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 12px;
}

.fv-mvv__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #E9E7E4;
}

.fv-mvv__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fv-mvv__card--mission .fv-mvv__photo img {
    object-position: 50% 74%;
}

/* round icon badge straddling the photo's lower edge */
.fv-mvv__icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 clamp(24px, 2.4vw, 32px);
    color: #fff;
    background: var(--fv-red, #E31E23);
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--fv-surface, #fff), 0 10px 22px rgba(227, 30, 35, .25);
}

.fv-mvv__icon svg {
    width: 26px;
    height: 26px;
}

.fv-mvv__body {
    flex: 1;
    padding: 16px clamp(22px, 2.2vw, 28px) clamp(22px, 2.2vw, 28px);
}

.fv-mvv__body h3 {
    margin: 0 0 12px;
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--fv-ink, #2C2928);
}

.fv-mvv__body p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--fv-ink-body, #52504F);
}

/* ---- values: the dark accent card ---- */
.fv-mvv__card--values {
    justify-content: space-between;
    padding: clamp(24px, 2.4vw, 30px) clamp(22px, 2.2vw, 28px);
    color: #fff;
    background: var(--fv-ink, #2C2928);
    border-color: var(--fv-ink, #2C2928);
    isolation: isolate;
}

/* faint tile grid, fading out from the top right corner */
.fv-mvv__card--values::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
}

.fv-mvv__card--values .fv-mvv__icon {
    margin: 0 0 16px;
    box-shadow: 0 0 0 6px rgba(227, 30, 35, .24);
}

.fv-mvv__card--values h3 {
    margin: 0 0 12px;
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #fff;
}

.fv-mvv__card--values p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .78);
}

/* the three values as large type (decorative: the words are already in the text above) */
.fv-mvv__words {
    margin: clamp(18px, 2vw, 24px) 0 0;
    padding: 0;
    list-style: none;
}

/* style.css makes every li display:flex; this is what we want, said explicitly */
.fv-mvv__words li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.fv-mvv__words li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fv-red, #E31E23);
    transform: translateY(-2px);
}

/* ---- tablet: Mission + Vision side by side, Values full width ---- */
@media (max-width: 991px) {
    .fv-mvv__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fv-mvv__card--values {
        grid-column: 1 / -1;
    }

    .fv-mvv__words {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 20px;
    }
}

/* ---- phone ---- */
@media (max-width: 575px) {
    .fv-mvv__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fv-mvv__words {
        display: block;
    }
}

/* ==================================================================
   SITE FOOTER (include/footer.blade.php) - used on every page
   Dark charcoal footer with a red top edge. Desktop: brand | products |
   quick links | resources | contact. Under 1200px the brand and contact
   share the first row and the three link lists sit below; under 768px
   everything is two columns, and one column on small phones.
================================================================== */
.fv-foot {
    position: relative;
    color: rgba(255, 255, 255, .72);
    background: var(--fv-ink, #2C2928);
    border-top: 3px solid var(--fv-red, #E31E23);
}

.fv-foot a {
    text-decoration: none;
}

/* the footer is wider than the page content so the five columns do not cramp */
.fv-foot .container {
    max-width: 1320px;
}

.fv-foot__main {
    padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 4.4vw, 56px);
}

.fv-foot__grid {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1fr 1.2fr 1.5fr;
    column-gap: clamp(28px, 3vw, 44px);
    row-gap: 40px;
}

/* ---- brand ---- */
.fv-foot__logo {
    display: inline-block;
    padding: 12px 16px;
    background: #fff;
    border-radius: 8px;
    line-height: 0;
}

.fv-foot__logo img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
}

.fv-foot__tag {
    max-width: 30ch;
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}

.fv-foot__social {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.fv-foot__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    transition: background-color .2s ease, border-color .2s ease;
}

.fv-foot__social a:hover,
.fv-foot__social a:focus-visible {
    background: var(--fv-red, #E31E23);
    border-color: var(--fv-red, #E31E23);
}

.fv-foot__social svg {
    width: 19px;
    height: 19px;
}

/* ---- link columns ---- */
.fv-foot__title {
    margin: 0 0 22px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
}

.fv-foot__title::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    margin-top: 12px;
    background: var(--fv-red, #E31E23);
}

.fv-foot__title a {
    color: #fff;
}

/* style.css makes every li display:flex; plain blocks are what we want here */
.fv-foot__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fv-foot__list li {
    display: block;
    margin: 0 0 11px;
    padding: 0;
}

.fv-foot__list a {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease;
}

.fv-foot__list a:hover,
.fv-foot__list a:focus-visible {
    color: #fff;
}

/* ---- contact ---- */
.fv-foot__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fv-foot__contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 18px;
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* brand-red badge with a white icon */
.fv-foot__ico {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--fv-red, #E31E23);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(227, 30, 35, .22);
}

.fv-foot__ico svg {
    width: 18px;
    height: 18px;
}

.fv-foot__ctext {
    flex: 1;
    min-width: 0;
    padding-top: 6px;
}

.fv-foot__contact a {
    color: rgba(255, 255, 255, .82);
    overflow-wrap: break-word;
    transition: color .2s ease;
}

.fv-foot__contact a:hover,
.fv-foot__contact a:focus-visible {
    color: #fff;
}

.fv-foot__contact address {
    margin: 0;
    font-style: normal;
    color: rgba(255, 255, 255, .72);
}

.fv-foot__dmca {
    display: inline-block;
    margin-top: 8px;
    line-height: 0;
}

.fv-foot__dmca img {
    display: block;
    border-radius: 3px;
}

/* ---- bottom bar ---- */
.fv-foot__bar {
    background: rgba(0, 0, 0, .24);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.fv-foot__bar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .62);
}

.fv-foot__bar strong {
    font-weight: 600;
    color: #fff;
}

.fv-foot__bar a {
    color: rgba(255, 255, 255, .8);
    transition: color .2s ease;
}

.fv-foot__bar a:hover,
.fv-foot__bar a:focus-visible {
    color: #fff;
}

.fv-foot a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---- under 1200px: brand + contact on top, three link lists below ---- */
@media (max-width: 1199px) {
    .fv-foot__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .fv-foot__brand {
        grid-column: span 3;
        order: 1;
    }

    .fv-foot__contact-col {
        grid-column: span 3;
        order: 2;
    }

    .fv-foot__col {
        grid-column: span 2;
        order: 3;
    }
}

/* ---- tablet portrait / large phones ---- */
@media (max-width: 767px) {
    .fv-foot__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fv-foot__brand,
    .fv-foot__contact-col {
        grid-column: 1 / -1;
    }

    /* Products | Quick Links side by side, Resources across the full row in two columns */
    .fv-foot__col {
        grid-column: span 1;
    }

    .fv-foot__col:nth-child(4) {
        grid-column: 1 / -1;
    }

    .fv-foot__col:nth-child(4) .fv-foot__list {
        columns: 2;
        column-gap: 28px;
    }

    .fv-foot__bar .container {
        flex-direction: column;
        text-align: center;
    }
}

/* ---- small phones: Products full width, Quick Links + Resources side by side ---- */
@media (max-width: 479px) {
    .fv-foot__col:nth-child(2) {
        grid-column: 1 / -1;
    }

    .fv-foot__col:nth-child(3),
    .fv-foot__col:nth-child(4) {
        grid-column: span 1;
    }

    .fv-foot__col:nth-child(4) .fv-foot__list {
        columns: 1;
    }

    .fv-foot__list li {
        margin-bottom: 13px;
    }
}

/* ==================================================================
   SITE HEADER / MENU (include/menu.blade.php) - used on every page
   Desktop (992px and up): logo left, links right, hover dropdowns for
   Fullbody Tiles and Utility, Contact as a red button. Transparent over the
   page hero at the top (white links on a soft dark fade), solid white once the
   page is scrolled (.is-stuck, set by new.js).
   Below 992px: a hamburger opens a slide-in drawer with an overlay; the two
   dropdowns become tap-to-open accordions.
================================================================== */
.fv-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    padding: 0;
    background: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
}

/* soft dark fade so white links stay legible on bright hero photos */
.fv-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -26px;
    background: linear-gradient(180deg, rgba(14, 15, 18, .55) 0%, rgba(14, 15, 18, 0) 100%);
    pointer-events: none;
    transition: opacity .3s ease;
}

.fv-header.is-stuck,
.fv-header--solid {
    background: #fff;
    box-shadow: 0 8px 28px rgba(20, 20, 22, .09);
}

.fv-header.is-stuck::before,
.fv-header--solid::before {
    opacity: 0;
}

.fv-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px clamp(16px, 3vw, 48px);
    transition: padding .3s ease;
}

.fv-header.is-stuck .fv-header__bar {
    padding-top: 10px;
    padding-bottom: 10px;
}

.fv-header__logo {
    position: relative;
    flex: none;
    display: block;
    line-height: 0;
}

.fv-header__logo img {
    display: block;
    width: 150px;
    height: auto;
}

.fv-header__burger,
.fv-header__overlay,
.fv-nav__top,
.fv-nav__toggle {
    display: none;
}

/* ---- desktop nav ---- */
.fv-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left; /* style.css right-aligns every header nav ul */
}

/* style.css gives every li/ul its own idea of display and padding; set it explicitly */
.fv-nav__item {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}

.fv-nav__row {
    display: flex;
    align-items: center;
}

.fv-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
    transition: color .2s ease;
}

/* underline that grows from the centre on hover / focus / current page */
.fv-nav__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    background: var(--fv-red, #E31E23);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform .3s ease;
}

.fv-nav__link:hover::after,
.fv-nav__link:focus-visible::after,
.fv-nav__link.is-active::after,
.fv-nav__item.has-drop:hover > .fv-nav__row .fv-nav__link::after {
    transform: scaleX(1);
}

.fv-nav__link:focus-visible,
.fv-nav__cta:focus-visible,
.fv-nav__drop a:focus-visible {
    outline: 2px solid var(--fv-red, #E31E23);
    outline-offset: 2px;
    border-radius: 3px;
}

.fv-nav__chev {
    flex: none;
    transition: transform .25s ease;
}

.fv-nav__item.has-drop:hover .fv-nav__chev,
.fv-nav__item.has-drop:focus-within .fv-nav__chev {
    transform: rotate(180deg);
}

.fv-header.is-stuck .fv-nav__link,
.fv-header--solid .fv-nav__link {
    color: var(--fv-ink, #2C2928);
    text-shadow: none;
}

.fv-header.is-stuck .fv-nav__link.is-active,
.fv-header--solid .fv-nav__link.is-active {
    color: var(--fv-red-dark, #B1171B);
}

/* ---- Contact as a button ---- */
.fv-nav__item--cta {
    margin-left: 12px;
}

.fv-nav__cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: var(--fv-red-dark, #B1171B);
    border-radius: 3px;
    box-shadow: 0 8px 20px rgba(177, 23, 27, .28);
    transition: background-color .25s ease, transform .25s ease;
}

.fv-nav__cta:hover,
.fv-nav__cta:focus-visible {
    color: #fff;
    background: var(--fv-red, #E31E23);
    transform: translateY(-1px);
}

/* ---- dropdown cards (desktop) ---- */
.fv-nav__drop {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;
    min-width: 270px;
    margin: 0;
    padding: 10px;
    list-style: none;
    text-align: left;
    background: #fff;
    border-top: 3px solid var(--fv-red, #E31E23);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 26px 56px rgba(20, 20, 22, .22);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

/* invisible bridge so the card does not close while the pointer crosses the gap */
.fv-nav__drop::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
}

.fv-nav__item.has-drop:hover > .fv-nav__drop,
.fv-nav__item.has-drop:focus-within > .fv-nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.fv-nav__drop li {
    display: block;
    margin: 0;
    padding: 0;
}

.fv-nav__drop a {
    display: block;
    padding: 11px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fv-ink, #2C2928);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color .2s ease, color .2s ease;
}

.fv-nav__drop a:hover,
.fv-nav__drop a:focus-visible,
.fv-nav__drop a.is-active {
    color: var(--fv-red-dark, #B1171B);
    background: var(--fv-red-tint, #FCE9E9);
}

/* ---- laptops: a little tighter ---- */
@media (max-width: 1199px) and (min-width: 992px) {
    .fv-header__logo img {
        width: 112px;
    }

    .fv-nav__link {
        padding: 12px 9px;
        font-size: 14px;
    }

    .fv-nav__link::after {
        left: 9px;
        right: 9px;
    }

    .fv-nav__item--cta {
        margin-left: 6px;
    }

    .fv-nav__cta {
        padding: 11px 16px;
        font-size: 12px;
    }
}

/* ==================================================================
   Below 992px: hamburger + slide-in drawer
================================================================== */
@media (max-width: 991px) {
    .fv-header__bar {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .fv-header__logo img {
        width: 112px;
    }

    .fv-header__burger {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 46px;
        margin: 0;
        padding: 0;
        cursor: pointer;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .45);
        border-radius: 8px;
        transition: border-color .3s ease;
    }

    .fv-header__burger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: background-color .3s ease;
    }

    .fv-header.is-stuck .fv-header__burger,
    .fv-header--solid .fv-header__burger {
        border-color: var(--fv-border, #D9D8D8);
    }

    .fv-header.is-stuck .fv-header__burger span,
    .fv-header--solid .fv-header__burger span {
        background: var(--fv-ink, #2C2928);
    }

    .fv-header__burger:focus-visible,
    .fv-nav__close:focus-visible,
    .fv-nav__toggle:focus-visible {
        outline: 2px solid var(--fv-red, #E31E23);
        outline-offset: 2px;
    }

    .fv-header__overlay {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: block;
        background: rgba(20, 20, 22, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }

    .fv-header__overlay.is-open {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    /* the drawer */
    .fv-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        width: min(380px, 88vw);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: -20px 0 50px rgba(20, 20, 22, .25);
        visibility: hidden;
        transform: translateX(105%);
        transition: transform .38s cubic-bezier(.77, 0, .175, 1), visibility 0s linear .38s;
    }

    .fv-nav.is-open {
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .fv-nav__top {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 22px;
        background: #fff;
        border-bottom: 1px solid var(--fv-border, #D9D8D8);
    }

    .fv-nav__brand {
        display: block;
        line-height: 0;
    }

    .fv-nav__brand img {
        display: block;
        width: 110px;
        height: auto;
    }

    .fv-nav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        color: var(--fv-ink, #2C2928);
        cursor: pointer;
        background: var(--fv-surface-alt, #F8F8F7);
        border: 1px solid var(--fv-border, #D9D8D8);
        border-radius: 50%;
    }

    .fv-nav__list {
        display: block;
        padding: 6px 0 28px;
    }

    .fv-nav__item {
        border-bottom: 1px solid #ECEBEA;
    }

    .fv-nav__row {
        align-items: stretch;
    }

    .fv-nav__link,
    .fv-header.is-stuck .fv-nav__link,
    .fv-header--solid .fv-nav__link {
        flex: 1;
        padding: 17px 22px;
        font-size: 17px;
        color: var(--fv-ink, #2C2928);
        text-shadow: none;
    }

    .fv-nav__link::after,
    .fv-nav__chev {
        display: none;
    }

    /* current page: red edge + red text */
    .fv-nav__link.is-active,
    .fv-header.is-stuck .fv-nav__link.is-active,
    .fv-header--solid .fv-nav__link.is-active {
        color: var(--fv-red-dark, #B1171B);
        box-shadow: inset 4px 0 0 var(--fv-red, #E31E23);
    }

    .fv-nav__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 58px;
        padding: 0;
        color: var(--fv-ink, #2C2928);
        cursor: pointer;
        background: transparent;
        border: 0;
        border-left: 1px solid #ECEBEA;
    }

    .fv-nav__toggle svg {
        transition: transform .25s ease;
    }

    .fv-nav__item.is-open .fv-nav__toggle svg {
        transform: rotate(180deg);
    }

    .fv-nav__item.is-open .fv-nav__toggle {
        color: var(--fv-red, #E31E23);
    }

    /* dropdowns become accordions */
    .fv-nav__drop {
        position: static;
        display: none;
        min-width: 0;
        padding: 4px 0 12px;
        background: var(--fv-surface-alt, #F8F8F7);
        border: 0;
        border-top: 1px solid #ECEBEA;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .fv-nav__drop::before {
        display: none;
    }

    .fv-nav__item.is-open > .fv-nav__drop {
        display: block;
    }

    /* hover-open is a desktop behaviour */
    .fv-nav__item.has-drop:hover > .fv-nav__drop,
    .fv-nav__item.has-drop:focus-within > .fv-nav__drop {
        transform: none;
    }

    .fv-nav__drop a {
        padding: 13px 22px 13px 38px;
        font-size: 15.5px;
        font-weight: 500;
        border-radius: 0;
    }

    .fv-nav__item--cta {
        margin: 0;
        padding: 22px;
        border-bottom: 0;
    }

    .fv-nav__cta {
        display: flex;
        justify-content: center;
        padding: 16px 24px;
        font-size: 14px;
    }
}

body.fv-menu-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .fv-header,
    .fv-header__bar,
    .fv-nav,
    .fv-header__overlay,
    .fv-nav__drop,
    .fv-nav__link::after,
    .fv-nav__chev {
        transition: none;
    }
}

/* ---- keep header link colours on hover / focus ----
   style.css has a global  a:hover, a:focus { color: #24262d }  which is more
   specific than a plain class colour, so without these rules every header link
   turned dark charcoal on hover (invisible over a dark hero) and again after
   being clicked. */
.fv-header .fv-nav__link:hover,
.fv-header .fv-nav__link:focus {
    color: #fff;
}

.fv-header.is-stuck .fv-nav__link:hover,
.fv-header.is-stuck .fv-nav__link:focus,
.fv-header--solid .fv-nav__link:hover,
.fv-header--solid .fv-nav__link:focus {
    color: var(--fv-red-dark, #B1171B);
}

.fv-header .fv-nav__cta:hover,
.fv-header .fv-nav__cta:focus {
    color: #fff;
}

.fv-header .fv-nav__drop a:hover,
.fv-header .fv-nav__drop a:focus {
    color: var(--fv-red-dark, #B1171B);
}

/* the drawer is always white, whatever the scroll state */
@media (max-width: 991px) {
    .fv-header .fv-nav__link:hover,
    .fv-header .fv-nav__link:focus {
        color: var(--fv-red-dark, #B1171B);
    }
}


/* =====================================================================
   Contact page - enquiry form + contact details
   Light card form with icon-led fields (the product-page form is a dark
   panel with plain inputs, so the two do not look alike). Same five fields.
   ===================================================================== */
.fv-cform {
    padding: clamp(40px, 6vw, 80px) 0;
    background: var(--fv-surface-alt, #F8F8F7);
}

.fv-cform__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
    max-width: 1080px;
    margin: 0 auto;
}

.fv-cform__card {
    padding: clamp(24px, 4vw, 44px);
    background: #fff;
    border: 1px solid var(--fv-border, #E4E3E2);
    border-top: 3px solid var(--fv-red, #E31E23);
    border-radius: 14px;
    box-shadow: 0 18px 40px -26px rgba(44, 41, 40, 0.35);
}

.fv-cform__card h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--fv-ink, #2C2928);
}

.fv-cform__lead {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--fv-ink-body, #52504F);
}

.fv-cform__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    margin: 0;
}

.fv-cform__field {
    min-width: 0;
}

.fv-cform__field--full {
    grid-column: 1 / -1;
}

.fv-cform__field label {
    display: block;
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fv-ink, #2C2928);
}

.fv-cform__field label span {
    margin-left: 3px;
    color: var(--fv-red, #E31E23);
}

.fv-cform__control {
    position: relative;
}

.fv-cform__control svg {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    color: var(--fv-red, #E31E23);
    pointer-events: none;
}

.fv-cform__control--area svg {
    top: 16px;
    transform: none;
}

.fv-cform .fv-cform__control input,
.fv-cform .fv-cform__control textarea {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 14px 0 44px;
    font: inherit;
    font-size: 15px;
    color: var(--fv-ink, #2C2928);
    background: #FAFAF9;
    border: 1px solid var(--fv-border, #D9D8D8);
    border-radius: 10px;
    box-shadow: none;
    outline: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.fv-cform .fv-cform__control textarea {
    height: auto;
    min-height: 120px;
    padding: 13px 14px 13px 44px;
    line-height: 1.6;
    resize: vertical;
}

.fv-cform .fv-cform__control input::placeholder,
.fv-cform .fv-cform__control textarea::placeholder {
    color: #8A8786;
    opacity: 1;
}

.fv-cform .fv-cform__control input:focus,
.fv-cform .fv-cform__control textarea:focus {
    background: #fff;
    border-color: var(--fv-red, #E31E23);
    box-shadow: 0 0 0 3px rgba(227, 30, 35, 0.14);
}

.fv-cform__actions {
    margin-top: 4px;
}

.fv-cform__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 34px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--fv-red-dark, #B1171B);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.fv-cform__btn:hover,
.fv-cform__btn:focus-visible {
    background: #8F1215;
}

.fv-cform__btn:focus-visible {
    outline: 3px solid rgba(227, 30, 35, 0.35);
    outline-offset: 2px;
}

/* ---- details column: no background - title, intro, three outlined contact points ---- */
.fv-cform__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 4px 0;
    text-align: center;
}

.fv-cform__head {
    margin: 0 auto 22px;
    max-width: 380px;
}

.fv-cform__title {
    position: relative;
    margin: 0 0 18px;
    padding-bottom: 14px;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--fv-ink, #2C2928);
}

.fv-cform__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 44px;
    height: 3px;
    transform: translateX(-50%);
    background: var(--fv-red, #E31E23);
    border-radius: 2px;
}

.fv-cform__intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--fv-ink-body, #52504F);
}

.fv-cform__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* outlined, transparent boxes - the page background shows through */
.fv-cform__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 15px;
    border: 1px solid var(--fv-border, #D3D2D1);
    border-radius: 12px;
    transition: border-color 0.2s ease;
}

.fv-cform__list li:hover,
.fv-cform__list li:focus-within {
    border-color: var(--fv-red, #E31E23);
}

.fv-cform__ico {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--fv-red, #E31E23);
    border: 1.5px solid var(--fv-red, #E31E23);
    border-radius: 50%;
}

.fv-cform__ico svg {
    width: 19px;
    height: 19px;
}

.fv-cform__txt {
    display: block;
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fv-ink, #2C2928);
    overflow-wrap: anywhere;
}

.fv-cform__txt small {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7A7776;
}

.fv-cform .fv-cform__txt a {
    padding: 0;
    font-weight: 600;
    color: var(--fv-ink, #2C2928);
    text-decoration: none;
}

.fv-cform .fv-cform__txt a:hover,
.fv-cform .fv-cform__txt a:focus-visible {
    color: var(--fv-red-dark, #B1171B);
}

.fv-cform__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.fv-cform__social span {
    margin-right: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #7A7776;
}

.fv-cform .fv-cform__social a {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--fv-red, #E31E23);
    border: 1px solid var(--fv-border, #D3D2D1);
    border-radius: 50%;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.fv-cform .fv-cform__social a:hover,
.fv-cform .fv-cform__social a:focus-visible {
    color: var(--fv-red-dark, #B1171B);
    border-color: var(--fv-red, #E31E23);
}

.fv-cform__social svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 991px) {
    .fv-cform__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fv-cform__info {
        padding: 8px 0 0;
    }
}

@media (max-width: 575px) {
    .fv-cform__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .fv-cform__btn {
        width: 100%;
    }

    .fv-cform__card {
        border-radius: 12px;
    }
}

/* ---- About: "Certified Excellence" - when the certificate image stacks above the text
   (below 768px) there was no gap between the framed image and the "Backed by Standards"
   line. Bootstrap columns add no vertical space of their own. ---- */
@media (max-width: 767px) {
    .about_certificate .certificate_img {
        margin-bottom: 36px;
    }
}


/* =====================================================================
   /full-body-vitrified-tiles - responsive fixes
   ===================================================================== */

/* "Your Reliable Source" - once the photo stacks above the text (below 1200px)
   there was no space between the framed photo and the heading. */
@media (max-width: 1199px) {
    .main-product-css .full-body-product-section .product-img {
        margin-bottom: 28px;
    }
}

/* "Why Buy From Us" - the section's .auto-container has no padding anywhere, so on
   tablets and phones the heading and cards ran edge to edge, the ghost "FROM US" text
   was drawn over the real heading, and a 48px right margin (me-sm-5) made the cards
   lopsided. */
@media (max-width: 991px) {
    .main-product-css .why_buy_from_us .auto-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .main-product-css .why_buy_from_us .accordion-column {
        margin-right: 0 !important;
    }

    .main-product-css .why_buy_from_us .sec-title .float-text {
        display: none;
    }
}

@media (max-width: 767px) {
    /* The page's own inline rule that cancels the 70px text indent on phones has a
       typo (". text"), so the browser drops it and the paragraph sat 70px in from
       its heading. */
    .main-product-css .faq-section.why_buy_from_us .feature-block .text,
    .main-product-css .faq-section.why_buy_from_us .feature-block .pl-tp {
        margin-left: 0;
    }

    .main-product-css .why_us .feature-block {
        padding: 22px 20px;
    }

    /* Applications: four tall full-width dark cards -> two across. */
    .main-product-css .application-section .row > [class*="col-md-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .main-product-css .application-section .vt-loaction-grid-col {
        height: 100%;
        padding: 18px 10px 16px;
    }

    .main-product-css .application-section .vt-loaction-grid-col img {
        display: block;
        width: 100%;
        max-width: 64px;
        margin: 0 auto;
    }

    .main-product-css .application-section .vt-loaction-grid-col p {
        padding-top: 10px;
        font-size: 16px;
        line-height: 1.35;
    }
}

/* Applications on tablets: four cards across in 140-180px each - the 20px label was too
   wide for them, so shrink the label and padding a little in that range. */
@media (min-width: 768px) and (max-width: 1199px) {
    .main-product-css .application-section .vt-loaction-grid-col {
        height: 100%;
        padding: 18px 8px 16px;
    }

    .main-product-css .application-section .vt-loaction-grid-col p {
        font-size: 16px;
        line-height: 1.35;
    }
}

/* /full-body-vitrified-tiles - the picture under the FAQ list. On phones the image column
   stacks full width, and the desktop offsets (padding 35px 35px 0 45px + margin-left 20px)
   squeezed the photo and pushed it off-centre. */
@media (max-width: 767px) {
    section .faqs-image {
        padding: 0;
        margin-left: 0;
        margin-top: 24px;
    }
}

/* Inquiry form (product pages) - tighter padding on phones so the fields get more width. */
@media (max-width: 767px) {
    section.common-inquiry-form form {
        padding: 25px;
    }
}


/* =====================================================================
   Technical accordion ("01. Safety Meets Style...") - used on the anti-skid page
   ===================================================================== */

/* An open answer was capped at max-height 800px with overflow hidden. On a phone the
   three paragraphs are taller than that, so the end of the text was cut off mid-sentence. */
.products_technical .faq-answer.active {
    max-height: 3000px;
}

@media (max-width: 767px) {
    /* One tidy card per item: heading + answer share a border instead of a floating
       white heading block with loose text under it. */
    .products_technical .accordion-faq .faq-item {
        margin-bottom: 12px;
        overflow: hidden;
        background: #fff;
        border: 1px solid #E4E2DF;
        border-radius: 10px;
    }

    .products_technical .faq-question,
    .products_technical .faq-question.active {
        position: relative;
        align-items: flex-start;
        gap: 10px;
        padding: 16px 48px 16px 16px;
        font-size: 18px;
        line-height: 1.35;
        border-bottom: 0;
    }

    .products_technical .faq-question .icon {
        flex: 0 0 auto;
        color: var(--fv-red-dark, #B1171B);
    }

    /* plus / minus marker so it reads as an expandable item */
    .products_technical .faq-question::after {
        content: "+";
        position: absolute;
        top: 12px;
        right: 16px;
        font-size: 26px;
        font-weight: 400;
        line-height: 1.2;
        color: var(--fv-red-dark, #B1171B);
    }

    .products_technical .faq-question.active::after {
        content: "\2212";
    }

    .products_technical .faq-answer {
        padding: 0 16px;
        border-top: 0;
    }

    .products_technical .faq-answer.active {
        padding: 14px 16px 18px;
        border-top: 1px solid #ECEAE7;
    }

    .products_technical .faq-answer p {
        font-size: 15px;
        line-height: 1.7;
    }
}


/* =====================================================================
   /full-body-tiles - the three collection blocks (photo + title + text + button)
   on phones. The photo height was 45vh (so it changed with the phone's height), the
   h3 was 31px - bigger than the section's own 28px h2 - and the blocks ran into each
   other with nothing between them.
   ===================================================================== */
@media (max-width: 767px) {
    .collection-page-section .pinned-image--small {
        height: auto;
        aspect-ratio: 4 / 3;
        margin-bottom: 20px !important;
    }

    .collection-page-section .pinned-image__container {
        transform: none;
    }

    .collection-page-section .row.justify-content-between h3 {
        margin-bottom: 10px;
        font-size: 22px;
        line-height: 1.3;
    }

    .collection-page-section .row.justify-content-between {
        margin-top: 0 !important;
        margin-bottom: 32px !important;
        padding-bottom: 32px;
        border-bottom: 1px solid #E7E5E2;
    }

    .collection-page-section .row.justify-content-between:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0;
        border-bottom: 0;
    }
}


/* =====================================================================
   Page-specific rules that used to sit in <style> blocks inside the views.
   Each rule is scoped to its page with :where(body.pg-...) - :where() adds no
   specificity, so every rule keeps exactly the specificity it had inline - and
   the page's class comes from <body class="pg-..."> (include/menu.blade.php).
   ===================================================================== */
/* ---- Blog list (/blog) - moved here from an inline <style> block in its view ---- */
:where(body.pg-blog) .page-item.active .page-link {
    background-color: var(--fv-red-dark, #B1171B);
    border-color: var(--fv-red-dark, #B1171B);
}

:where(body.pg-blog) .page-link {
    color: var(--fv-red-dark, #B1171B);
}

:where(body.pg-blog) .page-link:hover {
    color: #fff;
    background-color: var(--fv-red-dark, #B1171B);
    border-color: var(--fv-red-dark, #B1171B);
}

:where(body.pg-blog) .pagination p {
    display: none !important;
}

/* ---- Blog post (/blog/{slug}) - moved here from an inline <style> block in its view ---- */
:where(body.pg-blog-post) .next-pre-blog.blog-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

:where(body.pg-blog-post) .next-pre-blog.blog-navigation li {
    text-align: center;
}

:where(body.pg-blog-post) .next-pre-blog .previous {
    text-align: left;
}

:where(body.pg-blog-post) .next-pre-blog .next {
    text-align: right;
}

:where(body.pg-blog-post) .next-pre-blog .nav-link {
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px;
    border-bottom: 1px solid gray;
}

:where(body.pg-blog-post) .next-pre-blog img {
    padding-left: 4px;
}

:where(body.pg-blog-post) .next-pre-blog .nav-link span {
    color: black;
    transition: color 0.3s ease;
}

:where(body.pg-blog-post) .nav-link:hover {
    color: rgb(190, 47, 51);
}

:where(body.pg-blog-post) .next-pre-blog .nav-link:hover span {
    color: red;
}

:where(body.pg-blog-post) .next-pre-blog .disabled {
    color: #999;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}

:where(body.pg-blog-post) .blog_details_sec ul {
    padding-left: 20px;
}

:where(body.pg-blog-post) .blog_details_sec li {
    list-style: disc !important;
    display: list-item;
    margin-bottom: 10px;
}

:where(body.pg-blog-post) .blog_details_sec h2 {
    margin-bottom: 10px;
}

:where(body.pg-blog-post) .blog_details_sec p {
    margin-bottom: 15px;
}

:where(body.pg-blog-post) .faq-section .accordion-title {
    color: #fff;
    font-size: 18px;
}

:where(body.pg-blog-post) .blog_details_sec strong a,
:where(body.pg-blog-post) .blog_details_sec a strong {
    color: var(--fv-red-dark, #B1171B);
}

:where(body.pg-blog-post) .faq-section .accordion-button:before {
    display: none;
}

:where(body.pg-blog-post) .also-read-section .section-title {
    font-size: 25px;
    font-weight: 600;
    color: #1a1a1a;
}

:where(body.pg-blog-post) .also-read-section .blog-list {
    border-left: 3px solid var(--fv-red-dark, #B1171B);
    padding-left: 0;
}

:where(body.pg-blog-post) .also-read-section .blog-item {
    display: block;
    padding: 8px 0 8px 15px;
    transition: padding-left 0.2s ease;
}

:where(body.pg-blog-post) .also-read-section .blog-item:hover {
    padding-left: 18px;
}

:where(body.pg-blog-post) .also-read-section .blog-link {
    text-decoration: none;
    color: #001a3f;
    transition: color 0.2s ease;
}

:where(body.pg-blog-post) .also-read-section .blog-link:hover {
    color: var(--fv-red-dark, #B1171B);
}

@media (max-width: 768px) {
    :where(body.pg-blog-post) .blog-content h3 {
        font-size: 22px;
    }

    :where(body.pg-blog-post) .blog-content h2 {
        font-size: 25px;
    }

    :where(body.pg-blog-post) .also-read-section .section-title {
        font-size: 16px;
    }

    :where(body.pg-blog-post) .also-read-section .blog-link {
        font-size: 13px;
    }

    :where(body.pg-blog-post) .banner-img p {
        max-width: 100%;
    }

    :where(body.pg-blog-post) .faq-section .icon {
        min-width: 24px;
    }

    :where(body.pg-blog-post) .faq-section .accordion-title {
        font-size: 17px;
    }
}

/* ---- Collection hub (/full-body-tiles) - moved here from an inline <style> block in its view ---- */
:where(body.pg-full-body-tiles) .services {
    max-width: 100%;
    text-align: center;
}

:where(body.pg-full-body-tiles) .services h5 {
    color: #28a745;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

:where(body.pg-full-body-tiles) .services .service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

:where(body.pg-full-body-tiles) .services .card {
    background: #fff;
    padding: 30px 30px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

:where(body.pg-full-body-tiles) .services .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

:where(body.pg-full-body-tiles) .services .card .icon {
    font-size: 40px;
    color: #28a745;
    margin-bottom: 25px;
}

:where(body.pg-full-body-tiles) .services .card h4 {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
}

:where(body.pg-full-body-tiles) .services .card p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

:where(body.pg-full-body-tiles) .services .service-cards .card h4 {
    border-bottom: 1px solid #b7b3b3;
    padding-bottom: 15px;
}

:where(body.pg-full-body-tiles) .services .service-cards .icon img {
    max-width: 80px;
}

:where(body.pg-full-body-tiles) .full_body_content {
    background: #faf8f5;
}

:where(body.pg-full-body-tiles) .faq-section {
    box-shadow: none;
}

:where(body.pg-full-body-tiles) .faq-section .accordion {
    width: 100%;
}

:where(body.pg-full-body-tiles) .faq-section .accordion .accordion-button {
    text-align: start;
}

:where(body.pg-full-body-tiles) .accordion-button:not(.collapsed)::after {
    background-image: none;
    transform: none;
}

:where(body.pg-full-body-tiles) .accordion-button:focus {
    box-shadow: none;
}

:where(body.pg-full-body-tiles) .accordion-button:before {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 25px;
    height: 2px;
    width: 1rem;
    background-color: var(--fv-red-dark, #B1171B);
}

:where(body.pg-full-body-tiles) .accordion-button.collapsed:after {
    content: "";
    position: absolute;
    right: 1.1875rem;
    top: 18px;
    height: 1.0625rem;
    width: 0.125rem;
    border-style: none;
    background-color: var(--fv-red-dark, #B1171B);
}

:where(body.pg-full-body-tiles) .faq-section .accordion-button h5 {
    margin-right: 13px;
}

:where(body.pg-full-body-tiles) .accordion-body {
    background-color: #303030;
    color: #ffffff;
    border-top: 1px solid #ffffff52;
}

:where(body.pg-full-body-tiles) button:focus:not(:focus-visible) {
    outline: 0;
}

@media screen and (min-width: 768px) {
    :where(body.pg-full-body-tiles) .accordion-button:before {
        right: 0.75rem;
    }

    :where(body.pg-full-body-tiles) .accordion-button.collapsed:after {
        right: 1.1875rem;
    }

    :where(body.pg-full-body-tiles) .faq-section .accordion-button h5 {
        margin-right: 0px;
    }
}

:where(body.pg-full-body-tiles) .faq-section .accordion-button p {
    font-size: 19px;
    margin-bottom: 0;
    font-weight: 600;
}

:where(body.pg-full-body-tiles) .accordion-button:not(.collapsed) p {
    color: #ffffff !important;
}

:where(body.pg-full-body-tiles) .faq_full_bdy {
    background: #faf8f5;
}

:where(body.pg-full-body-tiles) .custom_why .why_title {
    border-bottom: 1px solid #c7c1c1;
    padding-bottom: 10px;
}

/* ---- Full body vitrified tiles (/full-body-vitrified-tiles) - moved here from an inline <style> block in its view ---- */
:where(body.pg-full-body-vitrified-tiles) .main-product-css .faq-section .feature-block .inner-box {
    align-items: flex-start;
    gap: 20px;
}

:where(body.pg-full-body-vitrified-tiles) .main-product-css .faq-section .feature-block .b_wrap {
    flex-shrink: 0;
}

:where(body.pg-full-body-vitrified-tiles) .main-product-css .faq-section .feature-block .icon-box {
    width: 50px;
}

:where(body.pg-full-body-vitrified-tiles) .main-product-css .faq-section .feature-block .pl-tp,
:where(body.pg-full-body-vitrified-tiles) .main-product-css .faq-section .feature-block .text {
    margin-left: 70px;
}

/* ---- Gallery (/gallery) - moved here from an inline <style> block in its view ---- */
:where(body.pg-gallery) .img-wrapper {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

:where(body.pg-gallery) .img-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 2rem;
    color: white;
}

:where(body.pg-gallery) .img-wrapper:hover .img-overlay {
    opacity: 1;
}

:where(body.pg-gallery) #lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
}

:where(body.pg-gallery) .lightbox-content {
    max-width: 80%;
    max-height: 80vh;
    margin: auto;
    display: block;
    margin-top: 17vh;
}

:where(body.pg-gallery) #lightbox .close,
:where(body.pg-gallery) #lightbox .prev,
:where(body.pg-gallery) #lightbox .next {
    position: absolute;
    top: 50%;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

:where(body.pg-gallery) #lightbox .close {
    top: 100px;
    right: 20px;
}

:where(body.pg-gallery) #lightbox .prev {
    left: 20px;
    transform: translateY(-50%);
}

:where(body.pg-gallery) #lightbox .next {
    right: 20px;
    transform: translateY(-50%);
}