/* ===================================================================
   gts-home.css — greetings.ie (GTS) Home Page Redesign
   -------------------------------------------------------------------
   Self-contained stylesheet for the redesigned GTS home page rendered
   by the Slim chrome (templates/web/home_gts.html.twig + its
   templates/web/home_gts/_*.twig section partials).

   This file is the SOURCE OF TRUTH for the redesign class names. Every
   Phase B section partial is authored against the `.ghr-*` classes
   defined here, so the markup mirrors the design reference
   (docs/plans/assets/design_handoff_home_redesign/Greetings Home
   Redesign.dc.html) section-for-section.

   Context: the GTS Slim home is Bootstrap-FREE — a clean 16px base
   with NO `html{font-size:10px}` legacy reset — so px and clamp()
   values from the handoff are used verbatim. Plain CSS only (no
   Tailwind utilities) to sidestep the JIT-bundle trap. Design tokens
   live as CSS custom properties on the `.ghr` root.

   !! ON EVERY EDIT TO THIS FILE, bump the `?v=` query in
      templates/web/home_gts.html.twig (same commit) so warm caches
      don't serve a stale stylesheet. (Project rule.)
   =================================================================== */


/* ===================================================================
   1. ROOT + DESIGN TOKENS
   The page wrapper. All `.ghr-*` content lives inside `.ghr`, so the
   custom properties declared here cascade to every descendant.
   =================================================================== */
.ghr {
    /* — Surfaces & ink — */
    --ghr-bg: #fbfaf8;              /* warm off-white page background       */
    --ghr-surface: #fff;           /* white cards / panels                 */
    --ghr-hairline: #ecebe5;       /* 1px hairline borders                 */
    --ghr-ink: #0c2c38;            /* primary ink / headings               */
    --ghr-ink-body: #14323f;       /* body text / emphasised inline strong */
    --ghr-ink-2: #4a5b63;          /* secondary copy                       */
    --ghr-ink-3: #6a7980;          /* tertiary copy                        */
    --ghr-ink-soft: #3a4a52;       /* review body / nav default            */
    --ghr-muted: #7c8a90;          /* small / meta text                    */

    /* — Brand blue — */
    --ghr-brand: #009dd9;          /* primary brand                        */
    --ghr-brand-dark: #0086bc;     /* hover / darker brand                 */
    --ghr-brand-light: #eaf7fd;    /* light brand wash (hero gradient top) */
    --ghr-brand-light-2: #e7f6fc;  /* alt light brand wash (tiles)         */
    --ghr-brand-border: #cfe9f6;   /* brand-tinted border (eyebrow pill)   */

    /* — Dark navy surfaces — */
    --ghr-navy: #0c2c38;           /* reassurance band / panel gradient    */
    --ghr-navy-footer: #0a2530;    /* footer (chrome — for reference)      */
    --ghr-navy-body: #9fc4d3;      /* body text on navy                    */
    --ghr-navy-icon: #56c3ec;      /* icon stroke on navy                  */

    /* — Accent palette (category tints & step/icon colours) — */
    --ghr-acc-pink: #c2426a;
    --ghr-acc-blue: #2f6fae;
    --ghr-acc-purple: #6a48b0;
    --ghr-acc-green: #3e8f55;
    --ghr-acc-green-2: #2f9e44;
    --ghr-acc-amber: #c98a1a;
    --ghr-acc-orange: #cf7038;
    --ghr-acc-slate: #5e6f77;
    --ghr-acc-gifts: #f4886b;
    --ghr-trustpilot: #00b67a;

    /* — Type — */
    --ghr-font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --ghr-font-head: 'Poppins', var(--ghr-font-body);

    /* — Shadows (soft, blue-tinted) — */
    --ghr-shadow-btn: 0 8px 20px -8px rgba(0, 157, 217, 0.7);
    --ghr-shadow-card: 0 12px 26px -16px rgba(12, 44, 56, 0.4);

    /* — Motion — */
    --ghr-transition: 0.18s ease;

    min-height: 100vh;
    background: var(--ghr-bg);
    color: var(--ghr-ink-body);
    font-family: var(--ghr-font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Local box model + link/media resets (scoped — never leak to chrome) */
.ghr *,
.ghr *::before,
.ghr *::after { box-sizing: border-box; }

/* Zero-specificity reset via :where() so component link-colour classes
   (.ghr-btn / .ghr-btn-light / .ghr-seeall) always win over this base rule.
   A plain `.ghr a` selector (0,1,1) would otherwise override those classes
   (0,1,0) and make e.g. the hero button text/arrow inherit the wrong colour. */
:where(.ghr) a { color: inherit; text-decoration: none; }

.ghr img { max-width: 100%; }

.ghr ::selection { background: #bfeafa; }

/* Headings drop the UA margins; size/colour are set per element below. */
.ghr h1,
.ghr h2,
.ghr h3 { font-family: var(--ghr-font-head); }


/* ===================================================================
   2. SHARED LAYOUT PRIMITIVES
   `.ghr-section` is the full-bleed <section> block; `.ghr-container`
   (and the section roots grouped with it) is the centred, padded
   1200px content column.
   =================================================================== */
.ghr-section {
    position: relative;
    width: 100%;
}

/* Standard centred column: max 1200px + clamped vertical & horizontal
   padding. Plain sections use their own root class (also listed here);
   full-bleed sections wrap a `__inner` column carrying the same box. */
.ghr-container,
.ghr-popular,
.ghr-steps,
.ghr-reviews,
.ghr-photo,
.ghr-gi,
.ghr-hero__inner,
.ghr-occ__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(44px, 6vw, 80px) clamp(16px, 4vw, 40px);
}


/* ===================================================================
   3. SHARED TYPOGRAPHY HELPERS
   Eyebrows, section headings and emphasised inline text reused across
   multiple sections.
   =================================================================== */

/* Uppercase tracked eyebrow (Popular, How-it-works, Guaranteed Irish). */
.ghr-eyebrow-up {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ghr-brand);
    margin-bottom: 8px;
}
.ghr-eyebrow-up--green { color: var(--ghr-acc-green-2); }

/* Section H2. Base = section scale; modifiers step it down for panels. */
.ghr-h2 {
    font-weight: 700;
    font-size: clamp(26px, 3.4vw, 40px);
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ghr-ink);
}
.ghr-h2--md { font-size: clamp(24px, 3vw, 36px); }   /* photo / reviews */
.ghr-h2--sm { font-size: clamp(23px, 2.8vw, 33px); } /* guaranteed irish */
.ghr-h2--xs { font-size: clamp(22px, 2.6vw, 30px); } /* seo intro       */

/* Emphasised inline text. Use `.ghr-strong` on a <strong>; the scoped
   fallbacks below also catch bare <strong> inside the relevant copy. */
.ghr-strong { color: var(--ghr-ink-body); font-weight: 700; }
.ghr-strong--green { color: var(--ghr-acc-green-2); font-weight: 700; }

.ghr-sub strong,
.ghr-trust strong,
.ghr-pcard__meta strong,
.ghr-reviews__rating-text strong { color: var(--ghr-ink-body); }


/* ===================================================================
   4. SHARED COMPONENTS
   Buttons, Trustpilot star tiles and the custom thin scrollbar — used
   by more than one section.
   =================================================================== */

/* Primary brand button (hero CTA). */
.ghr-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ghr-brand);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 26px;
    border-radius: 12px;
    box-shadow: var(--ghr-shadow-btn);
    transition: background var(--ghr-transition), transform var(--ghr-transition);
}
.ghr-btn:hover {
    background: var(--ghr-brand-dark);
    transform: translateY(-1px);
}

/* Light button on a dark panel (photo-upload CTA). */
.ghr-btn-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--ghr-navy);
    font-weight: 700;
    font-size: 15.5px;
    padding: 14px 24px;
    border-radius: 12px;
    transition: background var(--ghr-transition);
}
.ghr-btn-light:hover { background: var(--ghr-brand-light); }

/* Trustpilot star row — five green tiles. `--lg` = larger (reviews head). */
.ghr-tp-stars { display: flex; gap: 2px; }
.ghr-tp-star {
    width: 20px;
    height: 20px;
    background: var(--ghr-trustpilot);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
.ghr-tp-stars--lg { gap: 3px; }
.ghr-tp-stars--lg .ghr-tp-star { width: 22px; height: 22px; }

/* Thin horizontal scrollbar for the popular-cards track. */
.ghr-scroll {
    scrollbar-width: thin;
    scrollbar-color: #d8e6ec transparent;
}
.ghr-scroll::-webkit-scrollbar { height: 8px; }
.ghr-scroll::-webkit-scrollbar-thumb {
    background: #d8e6ec;
    border-radius: 8px;
}


/* ===================================================================
   5. HERO
   Two-column: left copy + right visual (card-stack default, lifestyle
   alt). Section carries the vertical gradient; `__inner` is the flex
   container.
   =================================================================== */
.ghr-hero {
    background: linear-gradient(180deg, var(--ghr-brand-light) 0%, var(--ghr-bg) 100%);
    overflow: hidden;
}

/* Hero column uses a slightly tighter vertical rhythm than other
   sections, plus the two-column flex layout. */
.ghr-hero__inner {
    padding-block: clamp(40px, 6vw, 76px);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.ghr-hero__copy {
    flex: 1 1 380px;
    min-width: 300px;
}

/* Right column — card-stack variant. */
.ghr-hero__visual {
    flex: 1 1 360px;
    min-width: 300px;
    display: flex;
    justify-content: center;
    position: relative;
}

/* Right column — lifestyle-photo variant (slightly wider basis). */
.ghr-hero__visual--lifestyle {
    flex: 1 1 420px;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

/* — Eyebrow pill — */
.ghr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ghr-brand-border);
    color: var(--ghr-brand-dark);
    font-weight: 600;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.ghr-eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ghr-brand);
    display: inline-block;
}

/* — Headline — */
.ghr-h1 {
    font-weight: 800;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    color: var(--ghr-ink);
}
.ghr-h1__accent { color: var(--ghr-brand); }  /* the word "today" */

/* — Sub-paragraph — */
.ghr-sub {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.55;
    color: var(--ghr-ink-2);
    max-width: 30em;
    margin: 0 0 28px;
}

/* — CTA row — */
.ghr-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

/* — Trust row — */
.ghr-trustrow {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 28px;
    align-items: center;
}
.ghr-trust {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--ghr-ink-2);
}
.ghr-trust--gi { gap: 8px; }
.ghr-trust__logo {
    height: 24px;
    width: auto;
    display: block;
}

/* — Hero visual: fanned card stack —
   Three personalised cards, statically rotated and (motion allowed)
   gently floating. The rotation is carried per-card via `--ghr-card-rot`
   so it survives the float animation: a translateY-only keyframe would
   override the static `transform:rotate(...)` for the whole (infinite)
   run, flattening the fan. The keyframe composes rotate() + translateY()
   from the variable instead. See §13 for the animation gating. */
.ghr-cardstack {
    position: relative;
    width: min(420px, 100%);
    height: clamp(340px, 38vw, 440px);
}
.ghr-cardstack__card {
    position: absolute;
    aspect-ratio: 3 / 4;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transform: rotate(var(--ghr-card-rot, 0deg));
}
.ghr-cardstack__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Back-left card (float1) */
.ghr-cardstack__card--1 {
    --ghr-card-rot: -8deg;
    left: 6%;
    top: 14%;
    width: 46%;
    box-shadow: 0 22px 48px -22px rgba(12, 44, 56, 0.4);
}
/* Back-right card (float3) */
.ghr-cardstack__card--2 {
    --ghr-card-rot: 7deg;
    right: 4%;
    top: 4%;
    width: 48%;
    box-shadow: 0 26px 56px -24px rgba(12, 44, 56, 0.45);
}
/* Front card (float2) */
.ghr-cardstack__card--3 {
    --ghr-card-rot: -2deg;
    left: 24%;
    bottom: 0;
    width: 50%;
    z-index: 2;
    box-shadow: 0 30px 60px -22px rgba(12, 44, 56, 0.5);
}

/* — Hero visual: lifestyle photo + floating price chip — */
.ghr-lifestyle {
    position: relative;
    width: min(560px, 100%);
}
.ghr-lifestyle__img {
    width: 100%;
    aspect-ratio: 11 / 9;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 26px 56px -24px rgba(12, 44, 56, 0.45);
    display: block;
}
.ghr-pricechip {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 30px -12px rgba(12, 44, 56, 0.45);
    padding: 11px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.ghr-pricechip__badge {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--ghr-brand-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ghr-brand-dark);
    font-family: var(--ghr-font-head);
    font-weight: 800;
    font-size: 16px;
}
.ghr-pricechip__text { line-height: 1.25; }
.ghr-pricechip__title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ghr-ink-body);
}
.ghr-pricechip__sub {
    font-size: 12px;
    color: var(--ghr-muted);
}


/* ===================================================================
   6. POPULAR RIGHT NOW (carousel)
   Heading row (eyebrow + H2 + see-all) above a horizontally scrolling,
   scroll-snapping product track.
   =================================================================== */
.ghr-popular__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}
.ghr-seeall {
    font-weight: 600;
    color: var(--ghr-brand-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.ghr-seeall:hover { text-decoration: underline; }

/* Scrolling track: one row of cards, snap-aligned. */
.ghr-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

/* Product card. */
.ghr-pcard {
    scroll-snap-align: start;
    display: block;
    transition: transform var(--ghr-transition);
}
.ghr-pcard:hover { transform: translateY(-4px); }
.ghr-pcard__img {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ghr-shadow-card);
    background: #fff;
}
.ghr-pcard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ghr-pcard__body { padding: 12px 2px 0; }
.ghr-pcard__title {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ghr-ink-body);
}
.ghr-pcard__meta {
    font-size: 13px;
    color: var(--ghr-muted);
    margin-top: 2px;
}

/* Corner badge pill (top-left of the card image). Coloured text on
   white; modifiers set the text colour. */
.ghr-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #fff;
    color: var(--ghr-brand-dark);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
}
.ghr-badge--bestseller { color: var(--ghr-acc-pink); }
.ghr-badge--newbaby { color: var(--ghr-acc-green); }
.ghr-badge--photo { color: var(--ghr-brand-dark); }


/* ===================================================================
   7. SHOP BY OCCASION (grid)
   Full-bleed white section (hairline top & bottom borders) with a
   centred head and an 8-tile pastel grid.
   =================================================================== */
.ghr-occ {
    background: #fff;
    border-top: 1px solid var(--ghr-hairline);
    border-bottom: 1px solid var(--ghr-hairline);
}
.ghr-occ__head {
    text-align: center;
    margin-bottom: 38px;
}
.ghr-occ__head .ghr-h2 { margin-bottom: 10px; }
.ghr-occ__sub {
    font-size: 16.5px;
    color: var(--ghr-ink-3);
    margin: 0;
}

.ghr-occ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

/* Tile — pastel surface + matching border + white icon chip + label.
   Each `--<key>` modifier sets the surface, border and icon accent
   (`--ghr-occ-icon`, consumed by the chip's currentColor). */
.ghr-occ-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 18px;
    border-radius: 16px;
    transition: transform var(--ghr-transition);
}
.ghr-occ-tile:hover { transform: translateY(-3px); }

.ghr-occ-tile--birthday     { background: #fde7ef; border: 1px solid #f8d4e0; --ghr-occ-icon: var(--ghr-acc-pink); }
.ghr-occ-tile--anniversary  { background: #e3f0ff; border: 1px solid #d2e6fb; --ghr-occ-icon: var(--ghr-acc-blue); }
.ghr-occ-tile--wedding      { background: #efe8fb; border: 1px solid #e1d6f6; --ghr-occ-icon: var(--ghr-acc-purple); }
.ghr-occ-tile--new-baby     { background: #e6f4ea; border: 1px solid #d3ecd9; --ghr-occ-icon: var(--ghr-acc-green); }
.ghr-occ-tile--humour       { background: #fff6db; border: 1px solid #f4e9c0; --ghr-occ-icon: var(--ghr-acc-amber); }
.ghr-occ-tile--photo-upload { background: var(--ghr-brand-light-2); border: 1px solid #cfeaf7; --ghr-occ-icon: var(--ghr-brand-dark); }
.ghr-occ-tile--get-well     { background: #fdeee4; border: 1px solid #f6dcc8; --ghr-occ-icon: var(--ghr-acc-orange); }
.ghr-occ-tile--az           { background: #f1f3f5; border: 1px solid #e4e8eb; --ghr-occ-icon: var(--ghr-acc-slate); }

.ghr-occ-chip {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ghr-occ-icon, var(--ghr-brand));
}
.ghr-occ-tile__label {
    font-weight: 600;
    color: var(--ghr-ink-body);
}


/* ===================================================================
   8. HOW IT WORKS (three steps)
   Centred head + three equal columns. Per-step colour is themed via
   `--ghr-step-tile` (icon chip wash) and `--ghr-step-color` (icon
   stroke + numbered badge), consumed through currentColor.
   =================================================================== */
.ghr-steps__head {
    text-align: center;
    margin-bottom: 44px;
}
.ghr-steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.ghr-step {
    text-align: center;
    padding: 8px;
}
.ghr-step--1 { --ghr-step-tile: var(--ghr-brand-light-2); --ghr-step-color: var(--ghr-brand); }
.ghr-step--2 { --ghr-step-tile: #fde7ef;                  --ghr-step-color: var(--ghr-acc-pink); }
.ghr-step--3 { --ghr-step-tile: #e6f4ea;                  --ghr-step-color: var(--ghr-acc-green); }

.ghr-step__icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--ghr-step-tile);
    color: var(--ghr-step-color);   /* icon SVG uses stroke="currentColor" */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
}
.ghr-step__badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ghr-step-color);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ghr-step__title {
    font-family: var(--ghr-font-head);
    font-weight: 700;
    font-size: 19px;
    margin: 0 0 8px;
    color: var(--ghr-ink);
}
.ghr-step__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ghr-ink-3);
    margin: 0;
}


/* ===================================================================
   9. PHOTO UPLOAD FEATURE PANEL
   Rounded two-column panel with a navy→brand gradient. Section has its
   top padding removed so it sits tight under "How it works".
   =================================================================== */
.ghr-photo { padding-top: 0; }

.ghr-photo__panel {
    background: linear-gradient(135deg, var(--ghr-navy) 0%, var(--ghr-brand-dark) 100%);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    padding: clamp(28px, 4vw, 52px);
}
.ghr-photo__copy {
    flex: 1 1 320px;
    min-width: 280px;
    color: #fff;
}
.ghr-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 13px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.ghr-photo__title {
    font-family: var(--ghr-font-head);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 14px;
    /* colour inherits #fff from .ghr-photo__copy */
}
.ghr-photo__body {
    font-size: 16.5px;
    line-height: 1.6;
    color: #d4ecf6;
    margin: 0 0 24px;
    max-width: 32em;
}
.ghr-photo__media {
    flex: 1 1 320px;
    min-width: 260px;
    display: flex;
    justify-content: center;
}
.ghr-photo__img {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: 18px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.5);
    display: block;
}


/* ===================================================================
   10. GUARANTEED IRISH PANEL
   Soft green two-column panel: stacked GI logo + copy. Section top
   padding removed so it stacks tight under the photo panel.
   =================================================================== */
.ghr-gi { padding-top: 0; }

.ghr-gi__panel {
    background: #f1f8f1;
    border: 1px solid #d8ecda;
    border-radius: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(24px, 4vw, 52px);
    padding: clamp(28px, 4vw, 48px);
}
.ghr-gi__logo-wrap {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}
.ghr-gi__logo {
    width: clamp(132px, 18vw, 180px);
    height: auto;
    display: block;
}
.ghr-gi__copy {
    flex: 1 1 340px;
    min-width: 280px;
}
.ghr-gi__title {
    font-family: var(--ghr-font-head);
    font-weight: 700;
    font-size: clamp(23px, 2.8vw, 33px);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--ghr-ink);
}
.ghr-gi__body {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ghr-ink-2);
    margin: 0;
    max-width: 48em;
}
.ghr-gi__body strong { color: var(--ghr-acc-green-2); }


/* ===================================================================
   11. REASSURANCE BAND
   Full-bleed dark band; four reassurance items in an auto-fit grid.
   `__inner` uses a tighter vertical padding than the standard column.
   =================================================================== */
.ghr-band { background: var(--ghr-navy); }

.ghr-band__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(36px, 4vw, 52px) clamp(16px, 4vw, 40px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 28px;
}
.ghr-band__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.ghr-band__chip {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ghr-navy-icon);   /* icon SVG uses stroke="currentColor" */
}
/* The "€3.99" item renders a text glyph instead of an SVG. */
.ghr-band__chip--euro {
    font-family: var(--ghr-font-head);
    font-weight: 800;
    font-size: 18px;
}
.ghr-band__title {
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    margin-bottom: 3px;
}
.ghr-band__text {
    color: var(--ghr-navy-body);
    font-size: 13.5px;
    line-height: 1.45;
}


/* ===================================================================
   12. REVIEWS
   Centred head (star row + rating line + H2) above a three-up grid of
   white review cards.
   =================================================================== */
.ghr-reviews__head {
    text-align: center;
    margin-bottom: 36px;
}
.ghr-reviews__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.ghr-reviews__rating-text {
    font-weight: 600;
    color: var(--ghr-ink-2);
}

.ghr-rev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.ghr-rev-card {
    background: #fff;
    border: 1px solid var(--ghr-hairline);
    border-radius: 16px;
    padding: 24px;
}
/* Green unicode ★★★★★ row. Colour + size apply to the inline text. */
.ghr-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
    color: var(--ghr-trustpilot);
    font-size: 16px;
}
.ghr-rev-card__body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ghr-ink-soft);
    margin: 0 0 16px;
}
.ghr-rev-card__author {
    font-weight: 600;
    font-size: 14px;
    color: var(--ghr-ink-body);
}


/* ===================================================================
   13. SEO INTRO BLOCK
   Full-bleed white section (top hairline border); a narrow (820px)
   centred column of intro copy with inline category links.
   =================================================================== */
.ghr-seo {
    background: #fff;
    border-top: 1px solid var(--ghr-hairline);
}
.ghr-seo__inner {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) clamp(16px, 4vw, 40px);
    text-align: center;
}
.ghr-seo__title {
    font-family: var(--ghr-font-head);
    font-weight: 700;
    font-size: clamp(22px, 2.6vw, 30px);
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    color: var(--ghr-ink);
}
.ghr-seo__body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ghr-acc-slate);
    margin: 0;
}
.ghr-seo__body a {
    color: var(--ghr-brand-dark);
    font-weight: 600;
}
.ghr-seo__body a:hover { text-decoration: underline; }


/* ===================================================================
   14. ANIMATIONS
   Keyframes are always defined; continuous animations are applied only
   when the user has NOT requested reduced motion, so reduced-motion
   users get a static (but fully rotated/legible) layout. Hover
   transitions are deliberately left ungated (user-initiated).
   =================================================================== */

/* Card-stack float. Composes the per-card rotation (var) with the
   vertical bob so the fan keeps its angle while floating. */
@keyframes ghr-float {
    0%, 100% { transform: rotate(var(--ghr-card-rot, 0deg)) translateY(0); }
    50%      { transform: rotate(var(--ghr-card-rot, 0deg)) translateY(-9px); }
}

/* Pulsing opacity for the countdown ⏱ glyph (catch_the_post chrome). */
@keyframes ghr-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: no-preference) {
    .ghr-cardstack__card--1 { animation: ghr-float 6s ease-in-out infinite; }
    .ghr-cardstack__card--2 { animation: ghr-float 6s ease-in-out infinite 0.8s; }
    .ghr-cardstack__card--3 { animation: ghr-float 7s ease-in-out infinite 0.4s; }

    /* Utility for the countdown glyph (applied in catch_the_post.twig). */
    .ghr-pulse { animation: ghr-pulse 1.6s ease-in-out infinite; }
}


/* ===================================================================
   15. RESPONSIVE
   Two-column sections (hero, photo, GI) collapse to one column via
   flex-wrap + min-width on their children; auto-fit grids (occasions,
   steps, band, reviews) reflow automatically. The only explicit
   breakpoint mirrors the handoff: below 900px the hero eyebrow and CTA
   centre themselves.
   =================================================================== */
@media (max-width: 900px) {
    .ghr-eyebrow {
        display: flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .ghr-cta { justify-content: center; }
}