/* ==================================================================
   FAIR FORD PHARMACEUTICALS — HOMEPAGE
   home.css · loaded by public/index.html after style.css
   ------------------------------------------------------------------
   Scoped to the homepage's own sections (fh- prefix) plus a small set
   of deliberate overrides for the shared product-card and footer
   components. Nothing here leaks to other pages.

   Palette: "Premium Royal Blue" — #0F4C81 is already the site primary,
   so the rest of the scale is built around it rather than replacing it.
   ================================================================== */

:root {
    --fh-primary:   #0F4C81;
    --fh-secondary: #1E6FA8;
    --fh-accent:    #36B7A5;
    --fh-bg:        #F7FAFC;

    --fh-ink:       #0B2239;
    --fh-body:      #4A6076;
    --fh-muted:     #7089A0;
    --fh-line:      rgba(15, 76, 129, .12);
    --fh-line-soft: rgba(15, 76, 129, .07);

    --fh-sh-sm: 0 2px 10px rgba(11, 34, 57, .05);
    --fh-sh-md: 0 18px 40px -20px rgba(11, 34, 57, .28), 0 2px 8px rgba(11, 34, 57, .04);
    --fh-sh-lg: 0 40px 80px -36px rgba(11, 34, 57, .40), 0 6px 18px rgba(11, 34, 57, .06);

    --fh-ease:     cubic-bezier(.22, .61, .36, 1);
    --fh-ease-out: cubic-bezier(.16, 1, .3, 1);

    --fh-radius: 22px;
    --fh-gutter: clamp(18px, 4.5vw, 56px);
}

/* ==================================================================
   SCROLL REVEAL — shared by every homepage section
   ================================================================== */
.fh-rise {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .8s var(--fh-ease-out) var(--fh-d, 0ms),
        transform .9s var(--fh-ease-out) var(--fh-d, 0ms);
}
.fh-rise.is-in { opacity: 1; transform: none; }

/* If the observer never runs (JS off), nothing may stay invisible. */
.no-js .fh-rise, .fh-noreveal .fh-rise { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .fh-rise { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ==================================================================
   1 · HERO SLIDER — full-bleed band
   ------------------------------------------------------------------
   One section spans the viewport edge to edge and holds every slide,
   with a caption bar underneath carrying each slide's title and CTA.

   Shape. The banners are 1.50, 1.78 and 1.68, and every one of them
   carries copy close to its edges, so the stage ratio and the crop
   focus are BOTH derived from measurements of where the ink actually
   sits - never picked for looks. The hero must also clear the fold,
   which on a short laptop wants a box wider than any of the artwork.
   Those two pull against each other, and the settled answer is: crop
   only into the empty band above each headline and the badge strip
   below each CTA, and give up caption-bar height before artwork.
   See .fh-hero__stage, .fh-slide__art and the short-window media
   query for the numbers behind 2, 58% and 44px.
   ================================================================== */
.fh-hero {
    --fh-bar-h: 60px;

    /* Everything the hero may occupy: the screen, less the chrome above it
       (measured at runtime into --fh-chrome by initHeroFit) and the caption
       bar below it. 8px keeps a hairline of the next section in view, which
       is what tells a visitor the page continues. The vh line is a fallback
       for engines without svh; svh is the correct one on mobile because it
       assumes the browser UI is SHOWN, so the hero cannot be pushed under
       a toolbar that slides back in. */
    --fh-hero-max: calc(100vh  - var(--fh-chrome, 118px) - var(--fh-bar-h) - 8px);
    --fh-hero-max: calc(100svh - var(--fh-chrome, 118px) - var(--fh-bar-h) - 8px);

    position: relative;
    width: 100%;
    /* Full bleed: no padding, no gutters, no centring measure. Nothing above
       this in the tree constrains width either — html, body and main are all
       already 100% with zero padding, so the section reaches both edges. */
    padding: 0;
    margin: 0;
    background: var(--fh-bg);
    isolation: isolate;
}

.fh-hero__panel {
    /* Previously this carried width: min(100% - gutters, --fh-max-w,
       heightBudget * 1.5) plus margin-inline:auto, which was the ONLY thing
       holding the hero back from the viewport edges. Now it simply fills. */
    width: 100%;
    margin: 0;
    border-radius: 0;           /* square corners — a full-bleed band, not a card */
    overflow: hidden;
    background: var(--fh-bg);
}

/* ---- Stage ----
   TWO THINGS SET THE HERO HEIGHT: --fh-hero-ratio (the shape it wants) and
   --fh-hero-max (the hard ceiling that guarantees it fits the first screen).
   Whichever is smaller wins, so the banner is never below the fold.

   The rule the whole hero is built on: SHOW THE WHOLE IMAGE. The artwork is
   1.50 / 1.78 / 1.68 and every banner carries copy to its edges, so any box
   that fills edge to edge on a 16:9 screen has to cut something. It used to
   cut: the stage was 2:1 with object-fit: cover, and the crop was steered
   into the empty band above each headline. That was the wrong trade. The
   image is now contained in full and the leftover space is painted instead.

   What that costs is honest and worth stating: on a 1920x1080 screen the
   Fair Ford banner draws 1341px wide inside a 1905px stage, so about 15% of
   the width on each side is field rather than artwork. There is no setting
   that avoids it - a 1.50 image shown whole on a 16:9 screen is simply
   narrower than the screen. The only real fix is wider artwork (2.2:1 or
   2.4:1), at which point the bands shrink to nothing on their own. */

/* 1.78 is the WIDEST banner, and that is the whole point: the box must never
   sit BETWEEN the three ratios. With contain, a slide narrower than the box
   gets side bands and a slide wider than it gets top/bottom bands - so a box
   at, say, 1.72 puts UPHAAR bands on one axis and the other two on the other,
   and no single field can meet both. At 1.78 or wider, every slide is bounded
   by width, so the bands are ALWAYS on the sides. The cap only ever makes the
   box wider than this, never narrower, so the guarantee holds at every size.
   Phones invert it - see the media query - by pinning the box to 1.5, the
   NARROWEST banner, where every slide is bounded by height instead. */
.fh-hero__stage {
    --fh-hero-ratio: 2;
    --fh-hero-focus: 58%;

    position: relative;
    width: 100%;
    aspect-ratio: var(--fh-hero-ratio);
    /* Height only. width stays an explicit 100%, so the cap can never feed
       back into the width the way an earlier height-derived panel did. */
    max-height: var(--fh-hero-max);
    /* THE CROP-BUDGET FLOOR, and the reason the hero is allowed to run a
       little past the fold on a wide, short window.

       min-height outranks max-height in CSS, which is exactly what is
       wanted here: the fold cap may shorten the hero only until the crop
       reaches what the artwork can survive, and no further. 2.3 is that
       limit, measured, not guessed - Fair Ford is clear to 19.9% at the
       top and its CTA ends at 85.0%, so 34.9% of its height can go, and
       1.50 / (1 - 0.349) = 2.30. Past that the cut lands on the button.

       Without this line a 1900x940 window drove the box to 2.50 and trimmed
       40%, clipping the eyebrow AND the CTA. With it the box holds at 2.28,
       the hero grows ~70px, and both survive. 100vw rather than 100% because
       min-height cannot be a function of the element own width; the ~15px
       scrollbar difference is well inside the margin this leaves. */
    min-height: max(240px, calc(100vw / 2.3));
    overflow: hidden;
}

.fh-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    /* The field behind the artwork. Bands sit on the SIDES on desktop and
       tablet (the box is always wider than the art there) and top/bottom on
       a phone, so each slide carries one gradient per orientation, sampled
       from its own outer 6px edge. Flat colour stops, not a smooth ramp: a
       ramp would meet the artwork part-way through the blend and show a
       seam, whereas a flat stop meets it in exactly its own edge colour. */
    background: var(--slide-bg-x, var(--slide-bg, #fff));
    opacity: 0;
    visibility: hidden;
    /* The cinematic dissolve: blur and fade together, never a hard cut. */
    transition:
        opacity 1000ms var(--fh-ease),
        filter 1000ms var(--fh-ease),
        transform 1500ms var(--fh-ease),
        visibility 1000ms;
    filter: blur(14px);
    transform: scale(1.035);
    will-change: opacity, filter, transform;
}

/* ---- Per-slide field ----
   What shows around the artwork once it is contained. Sampled from each
   banner's own outer 6px edge at six points down (or across) every side.

   Two layers, each anchored to one side and half the box: the left band is
   painted from the LEFT edge column, the right band from the RIGHT edge
   column. One averaged colour per slide was tried first and showed a seam,
   because these edges are not a single tone - Fair Ford's right edge runs
   from warm pharmacy shelf at the top to pale marble at the bottom, so a
   flat fill matched neither end. A gradient down the band tracks it.

   -x is for side bands (desktop, where the box is wider than every banner),
   -y for top/bottom bands (tablet and phone, where the 1.5 box is narrower
   than UPHAAR and NUEVA VIDA). .fh-slide picks between them by breakpoint.

   These are measurements, not choices. Re-sample them whenever the artwork
   is replaced. */
.fh-slide--ff {
    --slide-bg-x:
        linear-gradient(180deg,#ead6ca 8%,#a29469 25%,#d5c6c1 42%,#c6afa4 58%,#423421 75%,#bb8c68 92%) right / 50% 100% no-repeat,
        linear-gradient(180deg,#fae4d5 8%,#fae7da 25%,#fae6d9 42%,#f9e5d8 58%,#f7e0d1 75%,#f5c6bb 92%) left  / 50% 100% no-repeat;
    --slide-bg-y:
        linear-gradient(90deg,#f5c2b8 8%,#f4c2b7 25%,#efbaaa 42%,#f3d1b6 58%,#dea67d 75%,#d49e75 92%) bottom / 100% 50% no-repeat,
        linear-gradient(90deg,#fae6d9 8%,#fbe8dc 25%,#f6decd 42%,#f6ebe7 58%,#d5a277 75%,#dfbfb2 92%) top    / 100% 50% no-repeat;
}

.fh-slide--uphaar {
    --slide-bg-x:
        linear-gradient(180deg,#987c3d 8%,#b08b42 25%,#766b38 42%,#293013 58%,#514b1c 75%,#172811 92%) right / 50% 100% no-repeat,
        linear-gradient(180deg,#071b0f 8%,#071e12 25%,#061d11 42%,#051c10 58%,#061b0f 75%,#061a0e 92%) left  / 50% 100% no-repeat;
    --slide-bg-y:
        linear-gradient(90deg,#051a0e 8%,#051a0e 25%,#051b0f 42%,#051b0f 58%,#091d0f 75%,#1c2713 92%) bottom / 100% 50% no-repeat,
        linear-gradient(90deg,#061b0e 8%,#0a2111 25%,#1c2910 42%,#102a15 58%,#926c27 75%,#987c3d 92%) top    / 100% 50% no-repeat;
}

.fh-slide--nueva {
    --slide-bg-x:
        linear-gradient(180deg,#bd976f 8%,#a89c65 25%,#857d3e 42%,#b74c57 58%,#821f2f 75%,#bd9c91 92%) right / 50% 100% no-repeat,
        linear-gradient(180deg,#fbf0e5 8%,#faf1e8 25%,#f9f0e7 42%,#f8f0e7 58%,#f6ede4 75%,#dba8ad 92%) left  / 50% 100% no-repeat;
    --slide-bg-y:
        linear-gradient(90deg,#9f0e3f 8%,#8a0c37 25%,#dd869b 42%,#f5ece6 58%,#e2cbc2 75%,#e1d0c4 92%) bottom / 100% 50% no-repeat,
        linear-gradient(90deg,#fbeee1 8%,#fcf0e3 25%,#faebdc 42%,#f4e9de 58%,#d4b89c 75%,#d4a77f 92%) top    / 100% 50% no-repeat;
}

.fh-slide.is-active {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: scale(1);
    z-index: 2;
}

.fh-slide__art {
    width: 100%;
    height: 100%;
    /* cover, so the banner reaches BOTH viewport edges with no field beside
       it. Aspect is still preserved — cover scales uniformly and trims the
       overflow; it never stretches.

       This is the whole trade, stated plainly: the artwork is 1.50 / 1.78 /
       1.68, the box on a desktop is about 2.5, and a narrower picture cannot
       fill a wider hole. Either it is cropped, or a field shows beside it.
       contain was tried and the field read as dead space; cover is the other
       side of that coin. The only setting that satisfies both is artwork
       authored at the hero's own ratio — see the note on .fh-hero__stage. */
    object-fit: cover;
    /* Which 58% of the trim comes off the TOP. Top-heavy on purpose: the top
       of every banner is empty and the bottom carries a badge strip, so this
       spends the crop where there is nothing to lose. Solved against the
       measured limits — Fair Ford is clear to 19.9% and its CTA ends at
       85.0%; at a 2.3 box (a 1280x720 laptop, where the height cap bites
       hardest) 58% puts the cuts at 20.2% and 85.4%, inside both. */
    object-position: center var(--fh-hero-focus, 58%);
    display: block;
}
/* ---- Caption bar ---- */
.fh-hero__bars {
    position: relative;
    height: var(--fh-bar-h);
}

.fh-bar {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 clamp(16px, 2.4vw, 32px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms var(--fh-ease), visibility 700ms;
}
.fh-bar.is-active { opacity: 1; visibility: visible; z-index: 2; }

.fh-bar--ff     { background: linear-gradient(100deg, #0F4C81, #14589A); }
.fh-bar--uphaar { background: linear-gradient(100deg, #0C2A22, #144535); }
.fh-bar--nueva  { background: linear-gradient(100deg, #0F4F4A, #14655E); }

.fh-bar__text { min-width: 0; }

.fh-bar__title {
    font-family: var(--ff-font-heading, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: clamp(15px, 1.9vw, 21px);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fh-bar__title em { font-style: normal; }
.fh-bar--ff     .fh-bar__title em { color: #7FC4F5; }
.fh-bar--uphaar .fh-bar__title em { color: #E7C65C; }
.fh-bar--nueva  .fh-bar__title em { color: #6FD8C6; }

.fh-bar__sub {
    margin-top: 4px;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: clamp(11px, 1.3vw, 13px);
    line-height: 1.4;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fh-bar__side {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.8vw, 22px);
    flex: none;
}

.fh-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding: 11px 22px;
    border-radius: 999px;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .35s var(--fh-ease), box-shadow .35s var(--fh-ease),
                filter .35s var(--fh-ease);
}
.fh-bar__btn svg { width: 15px; height: 15px; }

.fh-bar--ff     .fh-bar__btn { color: #06243F; background: linear-gradient(135deg, #9FD5FA, #5FB2EE); }
.fh-bar--uphaar .fh-bar__btn { color: #0C2A22; background: linear-gradient(135deg, #E7C65C, #C9A227); }
.fh-bar--nueva  .fh-bar__btn { color: #06231F; background: linear-gradient(135deg, #8AE3D3, #36B7A5); }

.fh-bar__btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ---- Dots: inside the bar, so the artwork is never overlaid ---- */
.fh-hero__dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.fh-dot {
    position: relative;
    width: 22px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .30);
    cursor: pointer;
    overflow: hidden;
    transition: width .45s var(--fh-ease), background .3s var(--fh-ease);
}
.fh-dot.is-active { width: 38px; background: rgba(255, 255, 255, .24); }

.fh-dot__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 3px;
    background: #fff;
}

/* The dots live in the first bar only; keep them visible on every slide. */
.fh-bar:not(.is-active) .fh-hero__dots { visibility: hidden; }
.fh-hero__dots { position: relative; z-index: 5; }

/* ==================================================================
   HERO RESPONSIVE
   ================================================================== */
/* min-height OUTRANKS max-height in CSS, so on a very short window the floor
   wins and the hero pushes past the fold - it did, by 2px, on a 740x420
   landscape phone. Lower the floor there so the cap stays in charge. Nothing
   is lost that was not already gone: with 196px of site chrome on a 420px
   screen there is only ~150px left, and the alternative is a scrollbar. */
@media (max-height: 560px) {
    .fh-hero__stage { min-height: 120px; }
}

/* Short desktop windows - a 1280x720 or 1366x768 laptop. Here the height cap
   binds hard, and every pixel the caption bar gives up is a pixel the artwork
   keeps. Dropping the bar from 60px to 44px pulls the Fair Ford trim from
   36.5% back to 34.7%, which is just inside its 34.9% budget - the difference
   between keeping its DAILY WELLNESS eyebrow and cutting it off. Taking the
   height out of my own bar rather than out of the banner is always the right
   trade: the bar is a caption I control, the banner is artwork I do not. */
@media (min-width: 861px) and (max-height: 800px) {
    .fh-hero { --fh-bar-h: 44px; }
    .fh-bar__sub { display: none; }
    .fh-bar__title { font-size: 15px; }
    .fh-hero__stage { --fh-hero-focus: 57%; }
}

@media (max-width: 860px) {
    .fh-hero { --fh-bar-h: 64px; }
    .fh-bar__sub { display: none; }          /* keep the bar to one clean line */
    .fh-bar__title { font-size: 16px; }
    /* Still >= 1.78, so still no horizontal crop and no side band. */
    .fh-hero__stage { --fh-hero-ratio: 1.85; }
}

@media (max-width: 620px) {
    .fh-hero { --fh-bar-h: 116px; }
    /* 1.78 is the FLOOR and the reason there is never a side band: the
       widest banner is 1.777, so at 1.78 every slide is still bounded by
       WIDTH and can only crop vertically. Go below it and the wide banners
       start losing their left edge, which is where every headline and CTA
       sits (measured left content edge: UPHAAR 3.83%, NUEVA VIDA 3.51%). */
    .fh-hero__stage { --fh-hero-ratio: 1.78; min-height: 200px; }
    .fh-bar {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 11px;
        padding-block: 14px;
    }
    .fh-bar__side { justify-content: space-between; width: 100%; }
    .fh-bar__btn { flex: 1; justify-content: center; padding: 11px 16px; }
    .fh-bar__title { white-space: normal; font-size: 15px; }
}

/* ==================================================================
   2 · STATISTICS
   ================================================================== */
.fh-stats {
    position: relative;
    overflow: hidden;
    padding-block: clamp(30px, 3.6vw, 46px);
    background:
        radial-gradient(80% 120% at 12% 0%, rgba(30, 111, 168, .22), transparent 60%),
        radial-gradient(70% 110% at 92% 100%, rgba(54, 183, 165, .20), transparent 62%),
        linear-gradient(135deg, #0B3A63 0%, var(--fh-primary) 45%, #0A3A63 100%);
}

/* Fine grid so the band reads as engineered rather than a flat fill. */
.fh-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    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: 62px 62px;
    mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
}

.fh-stats__inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 20px);
    max-width: 940px;
    margin-inline: auto;
    padding-inline: var(--fh-gutter);
}

.fh-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(13px, 1.9vw, 18px);
    padding: clamp(16px, 2.1vw, 22px) clamp(18px, 2.4vw, 26px);
    border-radius: var(--fh-radius);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .5s var(--fh-ease), background .5s var(--fh-ease),
                border-color .5s var(--fh-ease);
}
.fh-stat:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, .11);
    border-color: rgba(54, 183, 165, .48);
}

.fh-stat__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(42px, 4.4vw, 52px);
    aspect-ratio: 1;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(140deg, rgba(54, 183, 165, .34), rgba(30, 111, 168, .30));
    border: 1px solid rgba(255, 255, 255, .18);
}
.fh-stat__icon svg { width: 50%; height: 50%; }

.fh-stat__num {
    display: flex;
    align-items: baseline;
    font-family: var(--ff-font-heading, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: clamp(30px, 4.6vw, 44px);
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.fh-stat__suffix { color: var(--fh-accent); }

.fh-stat__label {
    margin-top: 6px;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: clamp(10.5px, 1.5vw, 12.5px);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

@media (max-width: 620px) {
    .fh-stats__inner { grid-template-columns: 1fr; }
    .fh-stat { justify-content: flex-start; }
}

/* ==================================================================
   3 · SECTION FURNITURE — shared by the catalogue and UPHAAR blocks
   ================================================================== */
.fh-section { padding-block: clamp(46px, 5.6vw, 78px); }
.fh-shell {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--fh-gutter);
}

.fh-head { text-align: center; margin-bottom: clamp(28px, 3.4vw, 44px); }

.fh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border-radius: 999px;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fh-primary);
    background: rgba(15, 76, 129, .07);
    border: 1px solid var(--fh-line);
}
.fh-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--fh-accent); }

.fh-head h2 {
    margin-top: 14px;
    font-family: var(--ff-font-heading, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: clamp(30px, 4.6vw, 50px);
    line-height: 1.1;
    letter-spacing: -.028em;
    color: var(--fh-ink);
}
.fh-head h2 span { color: var(--fh-primary); }

.fh-head p {
    margin: 12px auto 0;
    max-width: 58ch;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: clamp(14.5px, 1.9vw, 16.5px);
    line-height: 1.7;
    color: var(--fh-body);
}

/* ==================================================================
   4 · BROWSE THE CATALOGUE — five dosage-form categories
   ================================================================== */
.fh-cats {
    position: relative;
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(30, 111, 168, .07), transparent 62%),
        var(--fh-bg);
}

.fh-cats__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 22px);
}

.fh-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.4vw, 16px);
    padding: clamp(22px, 2.6vw, 30px) clamp(12px, 1.6vw, 18px);
    min-height: clamp(158px, 15vw, 190px);
    border-radius: var(--fh-radius);
    background: #fff;
    border: 1px solid var(--fh-line-soft);
    box-shadow: var(--fh-sh-sm);
    text-align: center;
    overflow: hidden;
    transition: transform .55s var(--fh-ease), box-shadow .55s var(--fh-ease),
                border-color .55s var(--fh-ease);
}

/* Brand wash that rises from the base on hover. */
.fh-cat::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 76, 129, .06), transparent 62%);
    transform: translateY(100%);
    transition: transform .6s var(--fh-ease);
    pointer-events: none;
}

/* Accent rule that draws across the top edge. */
.fh-cat::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fh-primary), var(--fh-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--fh-ease);
}

.fh-cat:hover {
    transform: translateY(-9px);
    border-color: rgba(54, 183, 165, .34);
    box-shadow: var(--fh-sh-lg);
}
.fh-cat:hover::before { transform: translateY(0); }
.fh-cat:hover::after  { transform: scaleX(1); }

.fh-cat__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: clamp(62px, 6.4vw, 76px);
    aspect-ratio: 1;
    border-radius: 20px;
    color: var(--fh-primary);
    background: linear-gradient(150deg, rgba(15, 76, 129, .09), rgba(54, 183, 165, .10));
    border: 1px solid var(--fh-line-soft);
    transition: transform .55s var(--fh-ease-out), color .45s var(--fh-ease),
                background .55s var(--fh-ease), border-color .45s var(--fh-ease);
}
.fh-cat__icon svg {
    width: 54%;
    height: 54%;
    stroke-width: 1.6;
}
.fh-cat:hover .fh-cat__icon {
    transform: translateY(-4px) scale(1.07) rotate(-3deg);
    color: #fff;
    background: linear-gradient(150deg, var(--fh-primary), var(--fh-secondary));
    border-color: transparent;
}

.fh-cat__name {
    position: relative;
    z-index: 1;
    max-width: 15ch;
    font-family: var(--ff-font-heading, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: clamp(15px, 1.7vw, 18px);
    letter-spacing: -.012em;
    line-height: 1.25;
    color: var(--fh-ink);
    transition: color .4s var(--fh-ease);
}
.fh-cat:hover .fh-cat__name { color: var(--fh-primary); }

/* Arrow cue appears on hover — communicates that the card navigates. */
.fh-cat__cue {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--fh-primary);
    background: rgba(15, 76, 129, .08);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .45s var(--fh-ease), transform .45s var(--fh-ease);
}
.fh-cat__cue svg { width: 13px; height: 13px; }
.fh-cat:hover .fh-cat__cue { opacity: 1; transform: none; }

@media (hover: none) { .fh-cat__cue { opacity: 1; transform: none; } }

/* Catalogue responsive: 5 -> 3 -> 2 */
@media (max-width: 1080px) {
    .fh-cats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .fh-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-cat { min-height: 148px; }
}
@media (max-width: 380px) {
    .fh-cats__grid { grid-template-columns: 1fr; }
}

/* Section CTAs under the grid */
.fh-cats__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(26px, 3vw, 38px);
}

.fh-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 999px;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .35s var(--fh-ease), box-shadow .35s var(--fh-ease),
                background .35s var(--fh-ease), color .35s var(--fh-ease),
                border-color .35s var(--fh-ease);
}
.fh-btn svg { width: 16px; height: 16px; }

.fh-btn--solid {
    color: #fff;
    background: linear-gradient(135deg, var(--fh-primary), var(--fh-secondary));
    box-shadow: 0 14px 30px -14px rgba(15, 76, 129, .85);
}
.fh-btn--solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -14px rgba(15, 76, 129, .9);
}

.fh-btn--ghost {
    color: var(--fh-primary);
    background: #fff;
    border: 1px solid var(--fh-line);
}
.fh-btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--fh-accent);
    color: var(--fh-secondary);
}

/* ==================================================================
   5 · UPHAAR FEATURE BAND
   The supplied artwork is a composed banner, so it is presented whole
   (contain) inside a framed panel rather than cropped into a cover
   block — same reasoning as the hero.
   ================================================================== */
.fh-uphaar {
    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 8vw, 104px);
    background:
        radial-gradient(60% 80% at 8% 10%, rgba(15, 76, 129, .10), transparent 60%),
        radial-gradient(60% 80% at 96% 92%, rgba(54, 183, 165, .12), transparent 62%),
        #fff;
}

.fh-uphaar__frame {
    position: relative;
    border-radius: clamp(18px, 2.4vw, 30px);
    overflow: hidden;
    background: #0C2A22;             /* matches the artwork's own field */
    box-shadow: var(--fh-sh-lg);
    transition: transform .7s var(--fh-ease), box-shadow .7s var(--fh-ease);
}
.fh-uphaar__frame:hover { transform: translateY(-6px); }

.fh-uphaar__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1624 / 968;        /* the artwork's true shape */
    overflow: hidden;
}
.fh-uphaar__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 1.1s var(--fh-ease);
}
.fh-uphaar__frame:hover .fh-uphaar__media img { transform: scale(1.02); }

/* Gold hairline just inside the frame — echoes the artwork's trim. */
.fh-uphaar__frame::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(201, 162, 39, .28);
    border-radius: clamp(12px, 1.8vw, 22px);
    pointer-events: none;
    z-index: 2;
}

/* Caption bar under the artwork keeps the band from reading as a
   dropped-in image: it names the programme and carries the CTA. */
.fh-uphaar__bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 38px);
    background: linear-gradient(100deg, #0C2A22, #113A2E);
    border-top: 1px solid rgba(201, 162, 39, .24);
}

.fh-uphaar__title {
    font-family: var(--ff-font-heading, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: clamp(17px, 2.4vw, 24px);
    letter-spacing: .01em;
    color: #fff;
}
.fh-uphaar__title em {
    font-style: normal;
    color: #D9B441;
}
.fh-uphaar__sub {
    margin-top: 5px;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: clamp(12px, 1.6vw, 14px);
    color: rgba(255, 255, 255, .68);
}

.fh-uphaar__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: #0C2A22;
    background: linear-gradient(135deg, #E7C65C, #C9A227);
    box-shadow: 0 12px 26px -14px rgba(201, 162, 39, .9);
    transition: transform .35s var(--fh-ease), box-shadow .35s var(--fh-ease);
}
.fh-uphaar__btn svg { width: 15px; height: 15px; }
.fh-uphaar__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -14px rgba(201, 162, 39, .95);
}

@media (max-width: 620px) {
    .fh-uphaar__bar { flex-direction: column; align-items: flex-start; }
    .fh-uphaar__btn { width: 100%; justify-content: center; }
}

/* ==================================================================
   6 · TOP SELLING PRODUCTS — card refinements
   The description and Order button are removed from the markup; these
   rules give the remaining image / name / category more room and a
   cleaner hover. Overrides live here rather than in style.css so the
   product grid on product.html is untouched.
   ================================================================== */
.top-products .product-card {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: clamp(360px, 34vw, 430px);
    border-radius: var(--fh-radius);
    background: #fff;
    border: 1px solid var(--fh-line-soft);
    box-shadow: var(--fh-sh-sm);
    overflow: hidden;
    transition: transform .55s var(--fh-ease), box-shadow .55s var(--fh-ease),
                border-color .55s var(--fh-ease);
}
.top-products .product-card:hover {
    transform: translateY(-10px);
    border-color: rgba(54, 183, 165, .34);
    box-shadow: var(--fh-sh-lg);
}

.top-products .product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: clamp(20px, 3vw, 30px);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(30, 111, 168, .09), transparent 62%),
        #fff;
    overflow: hidden;
}
.top-products .product-card__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .7s var(--fh-ease);
}
.top-products .product-card:hover .product-card__media img { transform: scale(1.07); }

.top-products .product-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 24px) clamp(22px, 3vw, 28px);
    border-top: 1px solid var(--fh-line-soft);
    flex: 1;
}

.top-products .product-card__category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ff-font-body, 'Inter', sans-serif);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fh-accent);
}

.top-products .product-card__title {
    font-family: var(--ff-font-heading, 'Manrope', sans-serif);
    font-weight: 700;
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--fh-ink);
    transition: color .4s var(--fh-ease);
}
.top-products .product-card:hover .product-card__title { color: var(--fh-primary); }

/* Thin accent rule that grows on hover, replacing the removed CTA row. */
.top-products .product-card__body::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    margin-top: auto;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fh-primary), var(--fh-accent));
    transition: width .55s var(--fh-ease);
}
.top-products .product-card:hover .product-card__body::after { width: 62px; }

.top-products .product-card__badge {
    z-index: 2;
    box-shadow: 0 6px 16px -8px rgba(11, 34, 57, .55);
}

/* ==================================================================
   7 · "EASIEST WAY TO BUY" — polish only, structure untouched
   ================================================================== */
.sections-3ways {
    position: relative;
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(15, 76, 129, .06), transparent 62%),
        var(--fh-bg);
}

.sections-3ways .way-card,
.sections-3ways .step-card,
.sections-3ways .buy-card {
    border-radius: var(--fh-radius);
    border: 1px solid var(--fh-line-soft);
    background: #fff;
    box-shadow: var(--fh-sh-sm);
    transition: transform .5s var(--fh-ease), box-shadow .5s var(--fh-ease),
                border-color .5s var(--fh-ease);
}
.sections-3ways .way-card:hover,
.sections-3ways .step-card:hover,
.sections-3ways .buy-card:hover {
    transform: translateY(-7px);
    border-color: rgba(54, 183, 165, .32);
    box-shadow: var(--fh-sh-md);
}

/* ===================================================================
   TOP SELLING PRODUCTS — premium live showcase (fhp-)
   Light section on #F7FAFC. Product names use Playfair (highlighted),
   everything else Lato. Images sit in fixed-ratio soft containers with
   object-fit:contain so every pack size looks consistent.
   =================================================================== */
.fhp {
    --fhp-primary: #0F4C81;
    --fhp-primary-2: #1E6FA8;
    --fhp-accent: #1FA98C;
    --fhp-ink: #0B2239;
    --fhp-muted: #5A6B7B;
    --fhp-line: #E4EBF2;
    --fhp-card: #FFFFFF;
    --fhp-soft: linear-gradient(160deg, #F4F8FC 0%, #EAF1F8 100%);
    --fhp-ez: cubic-bezier(.22, 1, .36, 1);
}

/* ---- Header row: text + browse CTA ---- */
.fhp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    flex-wrap: wrap;
    text-align: left;
    max-width: none;
    margin-bottom: 26px;
}
.fhp-head__text { max-width: 640px; }
.fhp-head .section-title { margin: 10px 0 12px; }
.fhp-head .section-subtitle { margin: 0; }
.fhp-browse {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--ff-font-body);
    font-weight: 700;
    font-size: .92rem;
    color: #fff;
    background: linear-gradient(135deg, var(--fhp-primary) 0%, var(--fhp-primary-2) 100%);
    box-shadow: 0 10px 24px -10px rgba(15, 76, 129, .55);
    transition: transform .28s var(--fhp-ez), box-shadow .28s var(--fhp-ez);
    white-space: nowrap;
}
.fhp-browse svg { width: 17px; height: 17px; transition: transform .28s var(--fhp-ez); }
.fhp-browse:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(15, 76, 129, .6); }
.fhp-browse:hover svg { transform: translateX(4px); }

/* ---- Toolbar: search + category chips ---- */
.fhp-toolbar {
    display: flex;
    align-items: center;
    gap: 14px 18px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.fhp-search {
    position: relative;
    flex: 0 0 auto;
    width: min(320px, 100%);
}
.fhp-search svg {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--fhp-muted); pointer-events: none;
}
.fhp-search input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1.5px solid var(--fhp-line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--ff-font-body);
    font-size: .92rem;
    color: var(--fhp-ink);
    transition: border-color .2s, box-shadow .2s;
}
.fhp-search input::placeholder { color: #9AA8B6; }
.fhp-search input:focus {
    outline: none;
    border-color: var(--fhp-primary-2);
    box-shadow: 0 0 0 4px rgba(30, 111, 168, .12);
}
.fhp-chips {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.fhp-chip {
    appearance: none;
    border: 1.5px solid var(--fhp-line);
    background: #fff;
    color: var(--fhp-ink);
    font-family: var(--ff-font-body);
    font-weight: 600;
    font-size: .84rem;
    padding: 8px 15px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s var(--fhp-ez), color .2s, border-color .2s, transform .2s;
}
.fhp-chip small { opacity: .6; font-weight: 600; margin-left: 4px; }
.fhp-chip:hover { border-color: var(--fhp-primary-2); color: var(--fhp-primary); transform: translateY(-1px); }
.fhp-chip.is-on {
    background: linear-gradient(135deg, var(--fhp-primary) 0%, var(--fhp-primary-2) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(15, 76, 129, .55);
}
.fhp-chip.is-on small { opacity: .8; }

/* ---- Featured products (emphasised) ---- */
.fhp-featured {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 22px;
}
.fhp-featured:empty { display: none; }

/* ---- Product grid ---- */
.fhp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 20px;
}

/* ---- Card (shared) ---- */
.fhp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--fhp-card);
    border: 1px solid var(--fhp-line);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(11, 34, 57, .04);
    transition: transform .3s var(--fhp-ez), box-shadow .3s var(--fhp-ez), border-color .3s var(--fhp-ez);
    cursor: pointer;
}
.fhp-card:hover {
    transform: translateY(-6px);
    border-color: rgba(30, 111, 168, .3);
    box-shadow: 0 20px 40px -20px rgba(15, 76, 129, .38);
}
.fhp-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--fhp-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow: hidden;
}
.fhp-card__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .45s var(--fhp-ez);
    filter: drop-shadow(0 8px 16px rgba(11, 34, 57, .12));
}
.fhp-card:hover .fhp-card__media img { transform: scale(1.06); }
.fhp-card__media--ph {
    color: #B4C4D4; font-family: var(--ff-font-heading); font-size: 2.4rem; font-weight: 700;
}
.fhp-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    font-family: var(--ff-font-body); font-weight: 700; font-size: .68rem;
    letter-spacing: .04em; text-transform: uppercase; color: #fff;
    box-shadow: 0 6px 14px -6px rgba(11, 34, 57, .5);
}
.fhp-badge svg { width: 12px; height: 12px; }
.fhp-badge--new { background: linear-gradient(135deg, #1FA98C, #17877a); }
.fhp-badge--featured { background: linear-gradient(135deg, #C99A2E, #a9791b); }
.fhp-badge--popular { background: linear-gradient(135deg, var(--fhp-primary), var(--fhp-primary-2)); }
.fhp-card__body {
    display: flex; flex-direction: column; flex: 1;
    padding: 15px 16px 16px;
}
.fhp-card__cat {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ff-font-body); font-weight: 700; font-size: .68rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--fhp-primary-2);
    margin-bottom: 7px;
}
.fhp-card__cat svg { width: 12px; height: 12px; }
.fhp-card__name {
    font-family: var(--ff-font-heading);
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.22;
    color: var(--fhp-ink);
    margin: 0 0 6px;
    transition: color .2s;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fhp-card:hover .fhp-card__name { color: var(--fhp-primary); }
.fhp-card__desc {
    font-family: var(--ff-font-body); font-size: .84rem; line-height: 1.55;
    color: var(--fhp-muted); margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fhp-card__meta {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; margin-top: auto;
}
.fhp-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--ff-font-body); font-size: .72rem; font-weight: 600;
    color: var(--fhp-ink); background: #F2F6FA; border: 1px solid var(--fhp-line);
    padding: 4px 9px; border-radius: 7px;
}
.fhp-tag svg { width: 12px; height: 12px; color: var(--fhp-primary-2); }
.fhp-card__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 14px; border-radius: 10px;
    font-family: var(--ff-font-body); font-weight: 700; font-size: .85rem;
    color: var(--fhp-primary); background: rgba(15, 76, 129, .07);
    transition: background .25s var(--fhp-ez), color .25s;
}
.fhp-card__cta svg { width: 15px; height: 15px; transition: transform .25s var(--fhp-ez); }
.fhp-card:hover .fhp-card__cta { background: linear-gradient(135deg, var(--fhp-primary), var(--fhp-primary-2)); color: #fff; }
.fhp-card:hover .fhp-card__cta svg { transform: translateX(3px); }

/* ---- Featured card variant: image + info side by side ---- */
.fhp-card--featured { flex-direction: row; align-items: stretch; border-radius: 20px; }
.fhp-card--featured .fhp-card__media { aspect-ratio: auto; width: 46%; min-height: 220px; flex-shrink: 0; }
.fhp-card--featured .fhp-card__body { padding: 22px 24px; }
.fhp-card--featured .fhp-card__name { font-size: 1.5rem; -webkit-line-clamp: 3; }
.fhp-card--featured .fhp-card__desc { font-size: .9rem; -webkit-line-clamp: 4; margin-bottom: 14px; }
.fhp-card--featured .fhp-card__cta { align-self: flex-start; padding: 11px 22px; }

/* ---- Skeleton loading ---- */
.fhp-skel {
    border-radius: 18px; min-height: 300px;
    background: linear-gradient(100deg, #EEF3F8 30%, #F6F9FC 50%, #EEF3F8 70%);
    background-size: 200% 100%;
    animation: fhpShimmer 1.2s linear infinite;
}
@keyframes fhpShimmer { to { background-position: -200% 0; } }

/* ---- Empty state ---- */
.fhp-empty {
    text-align: center; padding: 44px 20px; color: var(--fhp-muted);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fhp-empty svg { color: #B4C4D4; }
.fhp-empty p { font-family: var(--ff-font-body); font-size: 1rem; margin: 0; }

/* ---- Full-catalogue CTA ---- */
.fhp-cta {
    margin-top: 34px;
    display: flex; align-items: center; justify-content: space-between; gap: 22px 40px;
    flex-wrap: wrap;
    padding: 30px 34px;
    border-radius: 22px;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(31, 169, 140, .22) 0%, transparent 50%),
        linear-gradient(135deg, #0B3A63 0%, var(--fhp-primary) 48%, #0A3358 100%);
    box-shadow: 0 24px 50px -24px rgba(15, 76, 129, .6);
    overflow: hidden;
    position: relative;
}
.fhp-cta__text { max-width: 560px; }
.fhp-cta__text h3 {
    font-family: var(--ff-font-heading); font-weight: 700; color: #fff;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.2; margin: 0 0 8px;
}
.fhp-cta__text p { font-family: var(--ff-font-body); color: rgba(255, 255, 255, .82); font-size: .95rem; line-height: 1.6; margin: 0; }
.fhp-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.fhp-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 24px; border-radius: 12px;
    font-family: var(--ff-font-body); font-weight: 700; font-size: .92rem;
    transition: transform .26s var(--fhp-ez), box-shadow .26s var(--fhp-ez), background .26s;
    white-space: nowrap;
}
.fhp-btn svg { width: 17px; height: 17px; transition: transform .26s var(--fhp-ez); }
.fhp-btn--solid { background: #fff; color: var(--fhp-primary); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5); }
.fhp-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(0, 0, 0, .55); }
.fhp-btn--solid:hover svg { transform: translateX(4px); }
.fhp-btn--ghost { background: rgba(255, 255, 255, .1); color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); }
.fhp-btn--ghost:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .fhp-featured { grid-template-columns: 1fr; }
    .fhp-card--featured { flex-direction: column; }
    .fhp-card--featured .fhp-card__media { width: 100%; aspect-ratio: 16 / 10; min-height: 0; }
    .fhp-card--featured .fhp-card__name { font-size: 1.3rem; }
    .fhp-cta { padding: 26px; }
}
@media (max-width: 640px) {
    .fhp-head { align-items: flex-start; }
    .fhp-browse { width: 100%; justify-content: center; }
    .fhp-toolbar { gap: 12px; }
    .fhp-search { width: 100%; }
    /* Category chips scroll horizontally, stay one row, easy to thumb */
    .fhp-chips {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: 2px; margin: 0 -4px; padding-left: 4px; padding-right: 4px;
    }
    .fhp-chips::-webkit-scrollbar { display: none; }
    .fhp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .fhp-card__media { padding: 12px; }
    .fhp-card__body { padding: 12px 13px 13px; }
    .fhp-card__name { font-size: .98rem; }
    .fhp-card__desc { display: none; }
    .fhp-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px; }
    .fhp-cta__actions { justify-content: center; }
    .fhp-btn { flex: 1; justify-content: center; }
}
/* Keep two columns on typical phones (scannable, images never oversized);
   only the narrowest devices drop to a single column. */
@media (max-width: 330px) {
    .fhp-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .fhp-skel { animation: none; }
    .fhp-card, .fhp-browse, .fhp-btn, .fhp-card__media img, .fhp-chip { transition: none; }
}