/* ==================================================================
   MADHAV FLOWER DECOR — COMPONENTS
   1.  Buttons
   2.  Intro (Section 1)
   3.  Category Cards (Section 2)
   4.  Featured Grid (Section 3)
   5.  Why Choose Us (Section 4)
   6.  Process Timeline (Section 5)
   7.  Counters (Section 6)
   8.  Masonry Gallery (Section 7)
   9.  Testimonials (Section 8)
   10. Instagram Marquee (Section 9)
   11. Call To Action (Section 10)
   ================================================================== */

/* ------------------------------------------------------------------
   1. BUTTONS
   ------------------------------------------------------------------ */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.05rem 2.2rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;                 /* clips the ripple */
    isolation: isolate;
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 16px; height: 16px; }

/* A compact button, for the places a 2.2rem-padded pill simply does not fit:
   a search box in a 260px filter column, a quantity row inside a cart line.
   The letter-spacing comes down with the size — 0.16em on a six-character
   word at 0.68rem reads as gaps, not as a word. */
.btn--sm {
    padding: 0.6rem 1.1rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    gap: 0.4rem;
}
.btn--sm svg { width: 14px; height: 14px; }

/* The arrow nudges forward on hover. */
.btn__arrow { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Ripple element injected by main.js on pointer-down. */
.ripple {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.22;
    transform: scale(0);
    pointer-events: none;
    animation: ripple 0.62s var(--ease-out) forwards;
}

/* Primary — solid gold with a sheen that sweeps across on hover. */
.btn--gold,
.btn--primary {
    background: var(--c-gold);
    color: var(--c-white);
    box-shadow: var(--shadow-gold);
}
.btn--gold::before,
.btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.32) 50%,
        transparent 80%);
    transform: translateX(-120%);
    transition: transform var(--t-slow) var(--ease-out);
}
.btn--gold:hover,
.btn--primary:hover {
    background: var(--c-gold-deep);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px var(--c-gold-glow);
}
.btn--gold:hover::before,
.btn--primary:hover::before { transform: translateX(120%); }

/* Ghost — glass pill for use over imagery. */
.btn--ghost {
    color: var(--c-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover {
    background: var(--c-white);
    border-color: var(--c-white);
    color: var(--c-ink);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* Dark — for light backgrounds. */
.btn--dark {
    background: var(--c-green);
    color: var(--c-white);
}
.btn--dark:hover {
    background: var(--c-green-mid);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* Outline — quiet secondary on light backgrounds. */
.btn--outline {
    color: var(--c-ink);
    border: 1px solid var(--c-grey-line);
}
.btn--outline:hover {
    border-color: var(--c-gold);
    color: var(--c-gold-deep);
    transform: translateY(-3px);
}

.btn--lg { padding: 1.3rem 3rem; font-size: 0.84rem; }

/* Full width — a form whose only action is "pay" or "sign in" gives that
   action the whole column, so there is nothing else to aim at. Defined here
   rather than in shop.css because the payment page loads no page stylesheet
   at all, and a rule the page never loads is a rule that does not exist. */
.btn--block { width: 100%; justify-content: center; }

/* Bare text link with an animated gold rule beneath. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold-deep);
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--c-grey-line);
    transition: border-color var(--t-fast) var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover { border-color: var(--c-gold); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ------------------------------------------------------------------
   2. INTRO — Section 1
   ------------------------------------------------------------------ */
.intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6.5rem);
}

.intro__title { margin-block: 1.25rem 1.5rem; }
.intro__text  { margin-bottom: 1.5rem; }

.intro__points {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 2.5rem;
}
.intro__points li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.95rem;
    color: var(--c-ink);
}
/* Gold diamond bullet. */
.intro__points li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    background: var(--c-gold);
    transform: rotate(45deg);
}

.intro__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Layered image: main frame, offset accent frame, floating badge. */
.intro__media { position: relative; }
.intro__media-main {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.intro__media-main img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.intro__media:hover .intro__media-main img { transform: scale(1.05); }

/* Gold outline offset behind the photo. */
.intro__media::after {
    content: "";
    position: absolute;
    inset: 1.75rem -1.75rem -1.75rem 1.75rem;
    border: 1px solid var(--c-gold);
    border-radius: var(--radius-lg);
    opacity: 0.5;
}

/* Glass badge overlapping the bottom-left corner. */
.intro__badge {
    position: absolute;
    z-index: 2;
    left: -1.5rem;
    bottom: 2.5rem;
    display: grid;
    gap: 0.15rem;
    padding: 1.4rem 1.75rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow);
}
.intro__badge strong {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 400;
    line-height: 1;
    color: var(--c-green);
}
.intro__badge span {
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-muted);
}

/* ------------------------------------------------------------------
   3. CATEGORY CARDS — Section 2
   ------------------------------------------------------------------ */
.categories__grid { grid-template-columns: repeat(4, 1fr); }

.category-card {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
}
.category-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.category-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.category-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.category-card:hover .category-card__media img { transform: scale(1.09); }

/* Gradient scrim so the arrow stays visible on pale photos. */
.category-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(22, 48, 31, 0.55));
    opacity: 0;
    transition: opacity var(--t-base) var(--ease);
}
.category-card:hover .category-card__media::after { opacity: 1; }

.category-card__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.6rem 1.75rem;
}
.category-card__body h3 {
    font-size: 1.3rem;
    margin-bottom: 0.35rem;
    transition: color var(--t-fast) var(--ease);
}
.category-card:hover h3 { color: var(--c-gold-deep); }
.category-card__body p {
    font-size: 0.83rem;
    line-height: 1.6;
    color: var(--c-muted);
}

.category-card__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--c-grey-line);
    color: var(--c-muted);
    transition: all var(--t-base) var(--ease);
}
.category-card__arrow svg { width: 16px; height: 16px; }
.category-card:hover .category-card__arrow {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: var(--c-white);
    transform: rotate(-45deg);
}

/* ------------------------------------------------------------------
   4. FEATURED GRID — Section 3
   ------------------------------------------------------------------ */
.featured__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
}

/* Footprints tile a 4×3 grid exactly:
   row 1  [ wide × 2 ][ tall × 2 ]
   row 2  [ 1 ][ 1 ][  tall cont. ]
   row 3  [       full × 4        ]  */
.featured-card {
    position: relative;
    display: block;
    grid-column: span 1;
    grid-row: span 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-green);
}
.featured-card.is-wide { grid-column: span 2; }
.featured-card.is-tall { grid-column: span 2; grid-row: span 2; }
.featured-card.is-full { grid-column: 1 / -1; }

.featured-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.featured-card:hover img { transform: scale(1.08); }

/* Dark wash that deepens on hover. */
.featured-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: clamp(1.5rem, 2.4vw, 2.25rem);
    background: linear-gradient(180deg,
        rgba(22, 48, 31, 0) 40%,
        rgba(22, 48, 31, 0.72) 100%);
    transition: background var(--t-base) var(--ease);
}
.featured-card:hover .featured-card__overlay {
    background: linear-gradient(180deg,
        rgba(22, 48, 31, 0.35) 0%,
        rgba(22, 48, 31, 0.82) 100%);
}

.featured-card__meta {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-gold);
}
.featured-card__overlay h3 {
    color: var(--c-white);
    font-size: clamp(1.4rem, 1.7vw, 1.9rem);
}

/* Slides up + fades in from behind the title. */
.featured-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-white);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease-out);
}
.featured-card__cta svg { width: 15px; height: 15px; }
.featured-card:hover .featured-card__cta,
.featured-card:focus-visible .featured-card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------------------------------
   5. WHY CHOOSE US — Section 4
   ------------------------------------------------------------------ */
.features__grid { grid-template-columns: repeat(4, 1fr); }

.feature {
    position: relative;
    padding: clamp(1.75rem, 2.4vw, 2.5rem);
    border-radius: var(--radius);
    background: var(--c-white);
    border: 1px solid var(--c-grey-line);
    overflow: hidden;
    transition: transform var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease);
}
/* Gold wash sweeps up from the bottom edge on hover. */
.feature::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background: linear-gradient(180deg, transparent, rgba(192, 160, 98, 0.07));
    transition: height var(--t-base) var(--ease-out);
}
.feature:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow);
}
.feature:hover::before { height: 100%; }

.feature__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    background: var(--c-beige-soft);
    color: var(--c-gold-deep);
    transition: background var(--t-base) var(--ease),
                color var(--t-base) var(--ease),
                transform var(--t-base) var(--ease-out);
}
.feature__icon svg { width: 26px; height: 26px; stroke-width: 1.3; }
.feature:hover .feature__icon {
    background: var(--c-gold);
    color: var(--c-white);
    transform: rotate(-6deg) scale(1.06);
}

.feature h3 {
    position: relative;
    font-size: 1.22rem;
    margin-bottom: 0.6rem;
}
.feature p {
    position: relative;
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--c-muted);
}

/* ------------------------------------------------------------------
   6. PROCESS TIMELINE — Section 5
   ------------------------------------------------------------------ */
.process { position: relative; }

/* --steps is set inline from the number of steps actually rendered. The layout
   used to hard-code six columns; when the flowers-only pivot cut the process to
   four, the four steps filled the left two-thirds and the rail ran on empty to
   the right. Driving the columns — and the rail insets — from the real count
   keeps the steps evenly spread whatever the number. */
.process__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--steps, 6), 1fr);
    gap: 1rem;
}

/* The rail sits behind the markers, centred on them: inset by half a column so
   it starts under the first marker and ends under the last. Half a column is
   50% / steps. */
.process__track::before {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(50% / var(--steps, 6));
    right: calc(50% / var(--steps, 6));
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
}
/* Gold progress line, scaled by JS as the section scrolls into view. */
.process__progress {
    position: absolute;
    top: 27px;
    left: calc(50% / var(--steps, 6));
    right: calc(50% / var(--steps, 6));
    height: 1px;
    background: linear-gradient(90deg, var(--c-gold), var(--c-gold-deep));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.6s var(--ease-out);
}
.process.is-visible .process__progress { transform: scaleX(1); }

.process__step { text-align: center; }

.process__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--c-green);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.55);
    transition: all var(--t-base) var(--ease-out);
    transition-delay: var(--step-delay, 0s);
}
.process.is-visible .process__marker {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: var(--c-white);
    box-shadow: 0 0 0 6px rgba(192, 160, 98, 0.14);
}
.process__step:hover .process__marker { transform: scale(1.1); }

.process__step h3 {
    font-size: 1.15rem;
    color: var(--c-white);
    margin-bottom: 0.5rem;
}
.process__step p {
    font-size: 0.82rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.52);
}

/* ------------------------------------------------------------------
   7. COUNTERS — Section 6
   ------------------------------------------------------------------ */
.counters__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.counter {
    position: relative;
    text-align: center;
    padding: clamp(1.5rem, 3vw, 2.5rem) 1rem;
}
/* Hairline dividers between cells, none on the last. */
.counter + .counter::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 56%;
    background: var(--c-grey-line);
    transform: translateY(-50%);
}

.counter__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem);
    font-weight: 300;
    line-height: 1;
    color: var(--c-green);
}
/* As a flex item the <sup> loses vertical-align, so `top` does nothing.
   Raise it by aligning to the top of the line box instead. */
.counter__value sup {
    align-self: flex-start;
    margin-top: 0.14em;
    font-size: 0.42em;
    line-height: 1;
    color: var(--c-gold);
}

.counter__label {
    margin-top: 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-muted);
}

/* ------------------------------------------------------------------
   8. MASONRY GALLERY — Section 7
   ------------------------------------------------------------------ */
.gallery__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    /* Backfills the gaps that the tall items leave behind. */
    grid-auto-flow: dense;
}

/* Rendered as <a> in link mode and <button> in lightbox mode, so the
   button's default padding and border must be zeroed here or every
   image would sit inset from its tile. */
.gallery__item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--c-grey);
    cursor: pointer;
}
.gallery__item.is-tall { grid-row: span 2; }

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.07); }

/* Centred glass "+" that scales in. */
.gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(22, 48, 31, 0.4);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease);
}
.gallery__item:hover::after { opacity: 1; }

.gallery__zoom {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--c-white);
    font-size: 1.5rem;
    font-weight: 200;
    line-height: 1;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease-out);
}
.gallery__item:hover .gallery__zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ------------------------------------------------------------------
   9. TESTIMONIALS — Section 8
   ------------------------------------------------------------------ */
.testimonials { overflow: hidden; }

.slider { position: relative; }

.slider__viewport { overflow: hidden; }

.slider__track {
    display: flex;
    transition: transform 0.7s var(--ease-out);
    will-change: transform;
}

.slider__slide {
    flex: 0 0 33.3333%;
    padding-inline: clamp(0.5rem, 0.9vw, 0.875rem);
}

.testimonial {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 2.6vw, 2.5rem);
    border-radius: var(--radius-lg);
    background: var(--c-white);
    border: 1px solid var(--c-grey-line);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out);
}
.testimonial:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

/* Oversized watermark quote glyph. */
.testimonial__mark {
    position: absolute;
    top: 1.75rem;
    right: 1.75rem;
    width: 44px;
    height: 44px;
    color: var(--c-beige);
}

.testimonial__stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    color: var(--c-gold);
}
.testimonial__stars svg { width: 15px; height: 15px; }

.testimonial__quote {
    flex: 1;
    margin-bottom: 1.75rem;
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--c-ink);
}

.testimonial__person {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-grey-line);
}
.testimonial__person img {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-white);
    box-shadow: 0 0 0 1px var(--c-gold);
}
.testimonial__person strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--c-ink);
}
.testimonial__person span {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: var(--c-muted);
}

/* Dots */
.slider__dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 3rem;
}
.slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-grey-line);
    transition: all var(--t-base) var(--ease);
}
.slider__dot[aria-selected="true"] {
    width: 30px;
    border-radius: var(--radius-pill);
    background: var(--c-gold);
}

/* ------------------------------------------------------------------
   10. INSTAGRAM MARQUEE — Section 9
   ------------------------------------------------------------------ */
/* Two identical tracks sit side by side, separated by the parent's
   gap. Each slides left by exactly its own width plus that gap, so
   the seam between copy A and copy B is pixel-perfect and the loop
   never stutters. Doubling items inside ONE track cannot do this —
   translating -50% lands mid-gap. */
.marquee {
    --marquee-gap: 1.25rem;
    position: relative;
    display: flex;
    gap: var(--marquee-gap);
    overflow: hidden;
    /* Feathered edges so images dissolve rather than clip. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
    display: flex;
    flex: none;
    gap: var(--marquee-gap);
    min-width: 100%;
    animation: marquee 46s linear infinite;
    will-change: transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
    position: relative;
    flex: none;
    width: clamp(200px, 20vw, 290px);
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
}
/* The anchor must fill the tile — an inline box would collapse to the
   line height and the image's height:100% would resolve against it. */
.marquee__item a {
    display: block;
    width: 100%;
    height: 100%;
}
.marquee__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-base) var(--ease-out);
}
.marquee__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(22, 48, 31, 0.45);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease);
}
.marquee__item:hover img { transform: scale(1.08); }
.marquee__item:hover::after { opacity: 1; }

.marquee__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    color: var(--c-white);
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease-out);
}
.marquee__item:hover .marquee__icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.instagram__handle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: var(--c-ink);
    transition: color var(--t-fast) var(--ease);
}
.instagram__handle:hover { color: var(--c-gold-deep); }
.instagram__handle svg { width: 20px; height: 20px; color: var(--c-gold-deep); }

/* ------------------------------------------------------------------
   11. CALL TO ACTION — Section 10
   ------------------------------------------------------------------ */
.cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.cta__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(12, 26, 17, 0.86), rgba(12, 26, 17, 0.72)),
        radial-gradient(ellipse at 50% 50%, rgba(192, 160, 98, 0.18), transparent 60%);
}

.cta__inner {
    max-width: 780px;
    margin-inline: auto;
    padding-block: clamp(5rem, 9vw, 8.5rem);
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
}
.cta .eyebrow { color: var(--c-gold); }
.cta__inner h2 {
    margin-block: 1.5rem 1.5rem;
    color: var(--c-white);
}
.cta__inner .lead {
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 2.75rem;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Phone line beneath the buttons. */
.cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 2.5rem;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--t-fast) var(--ease);
}
.cta__phone:hover { color: var(--c-gold); }
.cta__phone svg { width: 17px; height: 17px; color: var(--c-gold); }

/* ==================================================================
   19. PHASE 7C — MOBILE ACTION BAR
   ==================================================================
   Phones only. A visitor holding a phone at a wedding fair does not
   scroll back to the header to find a phone number.

   Fixed to the bottom, above the safe area on an iPhone. `body` gets
   padding to match, further down, so the bar never covers the last
   paragraph of a page — a sticky bar that hides content is a bar that
   makes people close the tab.
   ================================================================== */
.actionbar { display: none; }

@media (max-width: 767px) {
    .actionbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;

        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;

        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--c-grey-line);
        box-shadow: 0 -4px 24px rgba(26, 26, 24, 0.07);

        /* Above the iPhone home indicator, and only there. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .actionbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;

        /* 56px of vertical target. The WCAG minimum is 44; a thumb on a
           moving train is not a mouse, and the extra 12px is free. */
        min-height: 56px;
        padding: 0.55rem 0.35rem;

        font-size: 0.66rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-decoration: none;
        color: var(--c-body);

        transition: background var(--t-fast) var(--ease);
    }

    .actionbar__item:active { background: var(--c-grey); }
    .actionbar__item svg { width: 19px; height: 19px; }

    .actionbar__item--whatsapp svg { color: #25d366; }

    .actionbar__item--pay {
        color: var(--c-green);
        font-weight: 600;
    }
    .actionbar__item--pay svg { color: var(--c-gold-deep); }

    .actionbar__item--cta {
        background: var(--c-gold);
        color: var(--c-white);
        font-weight: 600;
    }
    .actionbar__item--cta:active { background: var(--c-gold-deep); }
    .actionbar__item--cta svg { color: var(--c-white); }

    /* The bar's own height, given back to the page, so nothing is buried. */
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ==================================================================
   20. PHASE 7C — THE PAY PAGE
   ================================================================== */
.paycard {
    background: var(--c-white);
    border: 1px solid var(--c-grey-line);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(26, 26, 24, 0.06);
}

.paycard__head { text-align: center; margin-bottom: 1.75rem; }
.paycard__head h2 { margin: 0 0 0.35rem; font-size: 1.6rem; }
.paycard__head p  { margin: 0; color: var(--c-muted); font-size: 0.9rem; }

.paycard__figures {
    margin: 0 0 1.75rem;
    padding: 1.25rem 1.4rem;
    background: var(--c-ivory);
    border-radius: 14px;
}
.paycard__figures > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.4rem 0;
}
.paycard__figures dt { color: var(--c-muted); font-size: 0.9rem; }
.paycard__figures dd { margin: 0; font-weight: 500; }

/* The number the customer came here for. It should be the only thing
   on this card they cannot miss. */
.paycard__balance {
    margin-top: 0.5rem;
    padding-top: 0.9rem !important;
    border-top: 1px solid var(--c-grey-line);
}
.paycard__balance dt { color: var(--c-ink) !important; font-weight: 500; }
.paycard__balance dd {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--c-green);
}

.payform__choice { border: 0; padding: 0; margin: 0 0 1.5rem; }
.payform__choice legend {
    padding: 0;
    margin-bottom: 0.85rem;
    font-size: 0.9rem;
    color: var(--c-muted);
}

.payopt {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--c-grey-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.payopt:hover { border-color: var(--c-gold); }
.payopt:has(input:checked) {
    border-color: var(--c-gold);
    background: var(--c-gold-glow);
}
.payopt input { accent-color: var(--c-gold-deep); width: 18px; height: 18px; }
.payopt span   { display: flex; justify-content: space-between; align-items: baseline; width: 100%; gap: 1rem; }
.payopt strong { font-weight: 500; }
.payopt em     { font-style: normal; font-weight: 600; color: var(--c-green); white-space: nowrap; }

.payform__trust {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.1rem 0 0;
    font-size: 0.8rem;
    color: var(--c-muted);
    line-height: 1.6;
}
.payform__trust svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--c-gold-deep); }

.paycard__done {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.2rem;
    background: var(--c-green-soft);
    border-radius: 12px;
    color: var(--c-green);
    line-height: 1.7;
}
.paycard__done svg { flex: 0 0 20px; width: 20px; height: 20px; }

.paycard__opening { text-align: center; }
.paycard__opening p { color: var(--c-muted); margin-bottom: 1rem; }

.paycard__back { text-align: center; margin-top: 1.5rem; }
.paycard__back a { color: var(--c-muted); font-size: 0.9rem; }

/* --- The result page --- */
.paycard--result { text-align: center; padding: 3rem 2rem; }
.paycard--result h2 { margin: 1rem 0 0.75rem; }
.paycard--result p  { color: var(--c-body); line-height: 1.8; margin: 0 0 0.75rem; }

.paycard__icon {
    display: inline-grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--c-grey);
    color: var(--c-muted);
}
.paycard__icon svg { width: 28px; height: 28px; }

.paycard--success .paycard__icon { background: var(--c-green-soft); color: var(--c-green); }
.paycard--invalid .paycard__icon { background: #fdeceb; color: #b3261e; }

.paycard__note {
    margin-top: 1.25rem !important;
    padding: 0.9rem 1.1rem;
    background: var(--c-ivory);
    border-radius: 12px;
    font-size: 0.88rem;
    color: var(--c-muted) !important;
}

.paycard__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

@media (max-width: 640px) {
    .paycard { padding: 1.5rem 1.25rem; }
    .paycard--result { padding: 2rem 1.25rem; }
    .paycard__actions .btn { width: 100%; }
}

/* ==================================================================
   THE REQUIREMENT CHOOSER  (Phase 8A)

   The company does two different things now. A visitor who searched
   "artificial roses wholesale" and one who searched "wedding decorator"
   want opposite pages, and making them work it out from a nav bar loses
   one of them. This asks.

   Lives in components.css, not shop.css, because it renders on the
   homepage whether or not a catalogue exists yet — so its styles must be
   present even when shop.css is not loaded.
   ================================================================== */
.chooser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.chooser__card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.chooser__card:hover {
    transform: translateY(-4px);
    border-color: var(--c-gold);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .09);
}

.chooser__card:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 3px;
}

/* The wholesale door is the new one, so it is the one that gets the accent.
   It is also the only one that may not render at all. */
.chooser__card--gold {
    border-color: var(--c-gold);
    background: linear-gradient(180deg, rgba(201, 162, 39, .07), transparent 60%);
}

.chooser__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(201, 162, 39, .12);
    color: var(--c-gold);
    margin-bottom: .25rem;
}

.chooser__icon svg { width: 1.375rem; height: 1.375rem; }

.chooser__card h3 {
    margin: 0;
    font-size: 1.25rem;
}

.chooser__card p {
    margin: 0;
    opacity: .75;
    font-size: .9375rem;
    line-height: 1.6;
}

.chooser__go {
    margin-top: auto;
    padding-top: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
    font-size: .875rem;
    color: var(--c-gold);
}

.chooser__go svg {
    width: 1rem;
    height: 1rem;
    transition: transform .25s ease;
}

.chooser__card:hover .chooser__go svg { transform: translateX(3px); }

/* Category pills under the homepage product strip. */
.shop-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.shop-cats__pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    min-height: 44px;
    border: 1px solid var(--c-grey-line);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    font-size: .875rem;
    transition: border-color .2s ease, background .2s ease;
}

.shop-cats__pill:hover {
    border-color: var(--c-gold);
    background: rgba(201, 162, 39, .06);
}

.shop-cats__pill span {
    font-size: .75rem;
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
   PROJECT & BLOG CARDS

   These are COMPONENTS, and they live here for one concrete reason: the
   HOMEPAGE renders both of them, and the homepage does not load pages.css —
   it never has. So "Latest Projects" and the blog strip were rendering their
   markup with no styles at all: a heading, and then a tall blank nothing.

   pages.css is 74 KB, most of which the homepage has no use for, so pulling
   the whole sheet in just to style two cards would have made the most
   important page on the site pay for the other twenty-three.

   Both cards are used on the homepage AND on /projects and /blog. That is the
   definition of a component, and components.css is loaded everywhere.
   ================================================================== */

/* ------------------------------------------------------------------
   8. PROJECTS
   ------------------------------------------------------------------ */
.projects__grid { grid-template-columns: repeat(3, 1fr); }

.project-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-grey-line);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

/* Cover shot plus a strip of three preview thumbnails. */
.project-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.project-card:hover .project-card__media img { transform: scale(1.07); }

.project-card__type {
    position: absolute;
    z-index: 1;
    top: 1rem;
    left: 1rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-green);
}

.project-card__strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.project-card__strip img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity var(--t-fast) var(--ease);
}
.project-card__strip img:hover { opacity: 1; }

.project-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.5rem, 2.2vw, 2rem);
}
.project-card__body h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }

.project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.15rem;
    margin-bottom: 1rem;
    font-size: 0.76rem;
    color: var(--c-muted);
}
.project-card__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.project-card__meta svg { width: 14px; height: 14px; color: var(--c-gold-deep); }

.project-card__summary { font-size: 0.88rem; line-height: 1.7; color: var(--c-muted); }

.project-card__feedback {
    margin-block: 1.5rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--c-beige-soft);
    border-left: 2px solid var(--c-gold);
}
.project-card__feedback p {
    font-family: var(--font-display);
    font-size: 1rem;
    font-style: italic;
    color: var(--c-ink);
    margin-bottom: 0.4rem;
}
.project-card__feedback cite {
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.1em;
    color: var(--c-muted);
}

.project-card__body .link-arrow { margin-top: auto; align-self: flex-start; }

.blog__grid { grid-template-columns: repeat(3, 1fr); }

.blog-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-grey-line);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.blog-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out);
}
.blog-card:hover .blog-card__media img { transform: scale(1.07); }

.blog-card__cat {
    position: absolute;
    z-index: 1;
    top: 1rem;
    left: 1rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--c-gold);
    color: var(--c-white);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(1.5rem, 2.2vw, 2rem);
}
.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.blog-card__body h3 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    transition: color var(--t-fast) var(--ease);
}
.blog-card:hover h3 { color: var(--c-gold-deep); }
.blog-card__excerpt { font-size: 0.88rem; line-height: 1.75; color: var(--c-muted); margin-bottom: 1.5rem; }
.blog-card__body .link-arrow { margin-top: auto; align-self: flex-start; }

/* Their responsive columns, moved from pages.css with them — otherwise the
   homepage would show three columns on a phone. */
@media (max-width: 1200px) {
    .projects__grid,
    .blog__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .projects__grid,
    .blog__grid { grid-template-columns: 1fr; }
}

/* The homepage's three-across preview strip. Its rule was commented
   "Homepage project preview" and was sitting in pages.css — the one
   stylesheet the homepage does not load. */
.projects__grid--preview { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
    .projects__grid--preview { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   12. THE PORTAL & PAYMENT PIECES

   .notice, .fld__help, .payform and .staff-login were used by the customer
   portal, the staff login and the invoice payment page, and defined in no
   stylesheet at all — so an error message rendered as a bare paragraph on the
   one screen where a customer is being asked for money.

   They live HERE, in the sheet every page loads, because pay.php and
   pay-callback.php set no page stylesheet: a rule those pages never fetch is a
   rule that, for them, does not exist.
   ------------------------------------------------------------------ */

.notice {
    padding: 0.9rem 1.15rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--c-grey-line);
    border-left: 3px solid var(--c-muted);
    border-radius: var(--radius-sm);
    background: var(--c-white);
    color: var(--c-body);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Colour is never the only signal — role="alert" and the wording itself carry
   the meaning for anyone who cannot tell the red box from the green one. */
.notice--error {
    border-left-color: #b3261e;
    background: #fdeceb;
    color: #8f2f1f;
}

.notice--ok {
    border-left-color: var(--c-green);
    background: var(--c-green-soft);
    color: var(--c-green);
}

/* The hint under a field — what "reference" means, where to find it. */
.fld__help {
    margin: 0.4rem 0 0;
    color: var(--c-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.payform { display: block; }

.staff-login {
    max-width: 26rem;
    margin-inline: auto;
}