.ihredesign * { box-sizing: border-box; }
.ihredesign h2 { text-transform: capitalize !important; }

/* When this design sits below a real site header/nav that is
     itself sticky (as on the live WordPress site), the search bar
     needs to dock BELOW that nav rather than both competing for
     top:0. Override this variable to match your theme's actual
     sticky-header height — e.g. if your nav is 84px tall once
     scrolled, set --sticky-bar-offset: 84px. Defaults to 0px here
     since this standalone preview has no real nav above it. */

:root {
    --sticky-bar-offset: 0px;
  }

html { scroll-behavior: smooth; }

.ihredesign { font-family: Lato, sans-serif; }

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

/* ============ HERO ============ */

.ihredesign .hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 24px 64px;
  }

/* ============ HERO BACKGROUND VIDEO ============
     Replaces the old .hero-slides image carousel. The <video> sits
     behind everything with the same absolute positioning the slides
     used to have. `poster` shows an instant static image (no wait for
     video bytes), and the actual video source is only injected by JS
     — see script block 4 below — after full page load, and only for
     desktop viewports where prefers-reduced-motion is not set. On
     mobile / reduced-motion, visitors just see the poster image,
     which behaves exactly like a normal hero background image. */

.ihredesign .hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: rgb(15, 20, 30); /* avoids a flash of white before the poster paints */
  }

.ihredesign .hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

/* Dark overlay so text stays legible over any photo */

.ihredesign .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,20,30,0.55) 0%, rgba(15,20,30,0.72) 100%);
    z-index: 1;
  }

.ihredesign .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: heroLoadFade 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

@keyframes heroLoadFade {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

@media (prefers-reduced-motion: reduce) {
.ihredesign .hero-content { animation: none; }
}

/* =========================================================
     SCROLL-TRIGGERED FADE-IN
     Applied via JS (see the script near the end of the page) to
     section headings, cards, and other content blocks. Each
     element starts hidden/offset and fades + slides up once it
     first scrolls into view — it does not reverse or re-trigger
     if you scroll back up past it.
     ========================================================= */

.ihredesign .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

.ihredesign .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

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

/* .why-card and .btn already declare their own `transition` for
     hover effects — since that's the same CSS property, whichever
     rule came later in the stylesheet would otherwise win outright
     and silently cancel the fade-in transition. These two combined
     selectors (higher specificity than either class alone) merge
     both needs into one declaration instead. */

.ihredesign .why-card.reveal {
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s ease,
                border-color 0.4s ease;
  }

.ihredesign .btn.reveal {
    transform: none; /* buttons just fade in, no slide */
    transition: opacity 0.7s ease,
                background 0.2s ease,
                transform 0.1s ease; /* keeps the button's own click-press feel snappy */
  }

.ihredesign .hero-eyebrow {
    color: rgb(198, 154, 63);
    letter-spacing: 0.35em;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
  }

.ihredesign .hero-heading {
    font-family: Lato, sans-serif;
    font-weight: 600;
    font-size: 65px;
    color: rgb(255, 255, 255) !important; /* theme's own h1 colour was overriding this */
    margin: 0px 0px 36px;
    max-width: 900px;
    line-height: 1.05;
  }

/* ============ SEARCH BAR ============ */

.ihredesign .search-bar {
    width: 100%;
    max-width: 1040px;
    background: rgba(60, 62, 68, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: stretch;
    padding: 10px;
    gap: 4px;
  }

/* ============ STICKY SEARCH BAR (desktop only, enabled via JS) ============ */

.ihredesign .search-bar-slot {
    width: 100%;
    max-width: 1040px;
  }

.ihredesign .search-bar.is-stuck {
    position: fixed;
    top: var(--sticky-bar-offset, 0px);
    left: 0;
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid rgba(198, 154, 63, 0.55);
    /* Deliberately a neutral charcoal, not navy — the page has several
       dark navy sections (Reviews, the parallax section, Google
       Reviews) and a navy-tinted glass bar would blend straight into
       them as it scrolls past, effectively "disappearing". A distinct
       hue plus the gold seam above keeps it visible against any
       section colour, light or dark. */
    background: rgba(32, 34, 40, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
    padding: 2px max(16px, calc((92vw - 1080px) / 2));
    z-index: 999;
  }

/* Shrink the field text/labels slightly once stuck, both to match
     the smaller bar and to free up horizontal room so values like
     "Select Departure Airport" render in full rather than clipping. */

.ihredesign .search-bar.is-stuck .search-field {
    padding: 8px 14px;
  }

.ihredesign .search-bar.is-stuck .search-field label {
    font-size: 10px;
    margin-bottom: 2px;
  }

.ihredesign .search-bar.is-stuck .search-field select {
    font-size: 13px;
  }

.ihredesign .search-bar.is-stuck .search-submit .btn {
    padding: 12px 28px;
    font-size: 14px;
  }

/* Fields don't all need equal width — "Select Departure Airport" is
     the longest default label of the four, so it gets more of the
     available space while the shorter ones (Destination, Month) give
     a little back. This is what actually stops it clipping, rather
     than just shrinking the font further. */

.ihredesign .search-bar.is-stuck .search-field:nth-child(1) { flex: 1; }

.ihredesign .search-bar.is-stuck .search-field:nth-child(2) { flex: 0.8; }

.ihredesign .search-bar.is-stuck .search-field:nth-child(3) { flex: 1.6; padding-left: 10px; padding-right: 10px; }

.ihredesign .search-bar.is-stuck .search-field:nth-child(4) { flex: 0.6; }

/* Transition applies to both the resting and stuck states, so the
     switch between them (background, radius, padding/width) animates
     smoothly. The fixed positioning itself is applied exactly at the
     scroll point where the bar would sit at top:0 anyway, so there's
     no visual jump when the class toggles. */

.ihredesign .search-bar {
    transition: max-width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-radius 0.4s ease,
                background 0.4s ease,
                box-shadow 0.4s ease,
                border-color 0.4s ease;
  }

/* Desktop-only: JS gates the sticky class to viewports above 900px,
     but this is a defensive backstop so the effect never renders on
     tablet/mobile even if that check were bypassed. */

@media (max-width: 900px) {
.ihredesign .search-bar.is-stuck {
      position: static;
      width: 100%;
      max-width: 100%;
      border-radius: 20px;
      box-shadow: none;
      padding: 8px;
    }
}

.ihredesign .search-field {
    flex: 1;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    min-width: 0;
  }

.ihredesign .search-field:last-of-type {
    border-right: none;
  }

.ihredesign .search-field {
    text-align: left;
  }

.ihredesign .search-field label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0px;
    text-align: left;
  }

.ihredesign .search-field select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 4px 22px 4px 0;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
  }

.ihredesign .search-field select option {
    color: #111;
  }

.ihredesign .search-submit {
    display: flex;
    align-items: center;
    padding-left: 4px;
  }

.ihredesign .btn {
    background: rgb(198, 154, 63);
    color: rgb(255, 255, 255);
    font-weight: 800;
    padding: 16px 40px;
    border-radius: 999px;
    font-size: 15px;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    font-family: Lato, sans-serif;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease;
  }

.ihredesign .btn:hover { background: rgb(178, 137, 50); }

.ihredesign .btn:active { transform: scale(0.98); }

.ihredesign .search-submit .btn {
    width: 100%;
  }

.ihredesign .hero-cta {
    margin-top: 32px;
	display: flex;
	grid-gap: 10px;
  }

/* ============ TABLET ============ */

@media (max-width: 900px) {
.ihredesign .hero-heading { font-size: 48px; max-width: 640px; }
.ihredesign .search-bar {
      flex-wrap: wrap;
      border-radius: 20px;
    }
.ihredesign .search-field {
      flex: 1 1 45%;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }
.ihredesign .search-submit {
      flex: 1 1 100%;
      padding-left: 0;
      padding-top: 8px;
    }
}

/* ============ MOBILE ============ */

@media (max-width: 560px) {
	.ihredesign .hero-cta {display: block;}
	.btn-2 {width:100%; margin-top: 10px;display:inline-block;}
.ihredesign .hero { padding: 90px 16px 48px; min-height: 560px; }
.ihredesign .hero-heading { font-size: 34px; margin-bottom: 24px; }
.ihredesign .hero-eyebrow { font-size: 11px; letter-spacing: 0.25em; }
.ihredesign .search-bar { padding: 8px; gap: 0; }
.ihredesign .search-field {
      flex: 1 1 100%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
      padding: 12px 14px;
    }
.ihredesign .btn { padding: 14px 28px; font-size: 14px; width: 100%; }
}

/* ============ PAGE / PROMO BANNER ============ */

.ihredesign .page-body {
    background: rgb(247, 243, 236);
    padding: 48px 24px;
  }

.ihredesign .promo-banner {
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    gap: 24px;
    /* Several shades of the brand blue, stretched wide and animated by
       sliding the background-position — reads as a slow, soft drift
       between tones rather than a static flat colour. */
    background: linear-gradient(
      120deg,
      rgb(9, 38, 74) 0%,
      rgb(14, 71, 138) 25%,
      rgb(21, 96, 173) 50%,
      rgb(14, 71, 138) 75%,
      rgb(9, 38, 74) 100%
    );
    background-size: 300% 300%;
    animation: promoGradientShift 14s ease-in-out infinite;
  }

@keyframes promoGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

@media (prefers-reduced-motion: reduce) {
.ihredesign .promo-banner { animation: none; background-position: 50% 50%; }
}

.ihredesign .promo-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgb(198, 154, 63);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.ihredesign .promo-icon svg {
    width: 26px;
    height: 26px;
  }

.ihredesign .promo-text {
    flex: 1 1 auto;
    min-width: 0;
  }

.ihredesign .promo-text h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: rgb(255, 255, 255);
    margin: 0 0 6px;
  }

.ihredesign .promo-text p {
    font-family: Lato, sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
  }

.ihredesign .promo-cta {
    flex: 0 0 auto;
  }

.ihredesign .promo-cta .btn {
    padding: 14px 32px;
  }

@media (max-width: 700px) {
.ihredesign .promo-banner {
      flex-wrap: wrap;
      padding: 28px 24px;
      border-radius: 20px;
    }
.ihredesign .promo-text { flex: 1 1 100%; order: 1; }
.ihredesign .promo-icon { order: 0; }
.ihredesign .promo-cta { flex: 1 1 100%; order: 2; margin-top: 8px; }
.ihredesign .promo-cta .btn { width: 100%; }
.ihredesign .promo-text h2 { font-size: 20px; }
}

/* ============ EXPERTISE SECTION ============ */
.btn-2 {
    /* background: rgb(198, 154, 63); */
    /* border: 1px solid white !important; */
    color: rgb(255, 255, 255);
    font-weight: 800;
    padding: 15px 40px;
    border-radius: 999px;
    font-size: 15px;
    letter-spacing: 0.02em;
    border: 1px solid white;
    /* border-inline: 0px solid white; */
    cursor: pointer;
    font-family: Lato, sans-serif;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease;
}
	.btn-2:hover {
		background: white;
		color: #2c2c2c;
	}

.ihredesign .expertise-wrap {
    background: rgb(247, 243, 236);
    padding: 0 24px 64px;
  }

.ihredesign .expertise-card {
    max-width: 1200px;
    margin: 0 auto;
    background: rgb(240, 236, 228);
    border-radius: 28px;
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }

.ihredesign .expertise-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgb(255, 255, 255);
    border-radius: 999px;
    padding: 8px 18px 8px 8px;
    margin-bottom: 24px;
  }

.ihredesign .expertise-badge-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgb(198, 154, 63);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
    flex: 0 0 auto;
  }

.ihredesign .expertise-badge-icon svg {
    transform: rotate(-45deg);
    width: 12px;
    height: 12px;
  }

.ihredesign .expertise-badge span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgb(14, 71, 138);
    text-transform: uppercase;
  }

.ihredesign .expertise-content h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 38px;
    color: rgb(14, 71, 138);
    margin: 0 0 20px;
    line-height: 1.15;
  }

.ihredesign .expertise-content p {
    font-family: Lato, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: rgb(70, 74, 82);
    margin: 0 0 20px;
    max-width: 540px;
  }

.ihredesign .btn-rect {
    display: inline-block;
    background: rgb(198, 154, 63);
    color: rgb(255, 255, 255);
    font-weight: 800;
    padding: 16px 32px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    font-family: Lato, sans-serif;
    margin-top: 12px;
    transition: background 0.2s ease, transform 0.1s ease;
  }

.ihredesign .btn-rect:hover { background: rgb(178, 137, 50); }

.ihredesign .btn-rect:active { transform: scale(0.98); }

.ihredesign .expertise-media {
    position: relative;
  }

.ihredesign .expertise-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 460px;
    background-size: cover;
    background-position: center;
  }

/* Floating info card */

.ihredesign .floating-card {
    position: absolute;
    top: 24px;
    left: -24px;
    width: 230px;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 40px rgba(14, 71, 138, 0.18);
    animation: floatCard 3.5s ease-in-out infinite;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease;
  }

.ihredesign .floating-card:hover {
    box-shadow: 0 24px 48px rgba(14, 71, 138, 0.26);
  }

@keyframes floatCard {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
  }

/* Second floating card, bottom-right of the image. Same visual
     language as the first, but offset with a negative animation-delay
     so the two float out of sync rather than moving in lockstep. */

.ihredesign .floating-card-stat {
    position: absolute;
    bottom: 24px;
    right: -24px;
    width: 190px;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 20px 40px rgba(14, 71, 138, 0.18);
    animation: floatCard 3.5s ease-in-out infinite;
    animation-delay: -1.75s;
    display: flex;
    align-items: center;
    gap: 12px;
  }

.ihredesign .floating-stat-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgb(247, 243, 236);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.ihredesign .floating-stat-icon svg {
    width: 22px;
    height: 22px;
    stroke: rgb(198, 154, 63);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.ihredesign .floating-stat-number {
    font-family: Lato, sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: rgb(14, 71, 138);
    line-height: 1.15;
  }

.ihredesign .floating-stat-label {
    font-family: Lato, sans-serif;
    font-size: 11px;
    color: rgb(110, 114, 120);
    line-height: 1.3;
  }

.ihredesign .floating-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

.ihredesign .tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
  }

.ihredesign .tag-bestseller {
    background: rgba(198, 154, 63, 0.15);
    color: rgb(178, 130, 40);
  }

.ihredesign .tag-small-group {
    background: rgba(70, 120, 90, 0.15);
    color: rgb(60, 105, 78);
  }

.ihredesign .floating-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

.ihredesign .floating-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
  }

.ihredesign .floating-info h3 {
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: rgb(20, 30, 45);
    margin: 0 0 6px;
    line-height: 1.25;
  }

.ihredesign .floating-stars {
    color: rgb(198, 154, 63);
    font-size: 12px;
    letter-spacing: 1px;
  }

.ihredesign .floating-price {
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: rgb(14, 71, 138);
    margin-top: 10px;
  }

@media (max-width: 900px) {
.ihredesign .expertise-card {
      grid-template-columns: 1fr;
      padding: 36px;
    }
.ihredesign .expertise-content h2 { font-size: 30px; }
.ihredesign .floating-card { left: 16px; width: 200px; }
.ihredesign .floating-card-stat { right: 16px; width: 170px; }
}

@media (max-width: 560px) {
.ihredesign .expertise-card { padding: 24px; border-radius: 20px; }
.ihredesign .expertise-content h2 { font-size: 26px; }
.ihredesign .expertise-image { height: 320px; }
.ihredesign .floating-card,
  .ihredesign .floating-card-stat {
      position: static;
      width: 100%;
      margin-bottom: 16px;
      animation: none;
    }
}

/* =========================================================
     FEATURED HOLIDAYS — TEMPORARY CARD STYLES
     TODO: These cards are a placeholder build. Once the real
     card component is wired up via shortcode, delete this
     entire block (from here down to "END FEATURED HOLIDAYS
     CARDS") plus the matching HTML block in the body — no
     other section depends on these classes.
     ========================================================= */

.ihredesign .featured-wrap {
    background: rgb(247, 243, 236);
    padding: 0 24px 80px;
  }

.ihredesign .featured-heading {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 40px;
  }

.ihredesign .featured-heading h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: rgb(14, 71, 138);
    margin: 0 0 12px;
  }

.ihredesign .featured-heading .underline {
    width: 44px;
    height: 3px;
    background: rgb(198, 154, 63);
    margin: 0 auto;
    border-radius: 2px;
  }

.ihredesign .featured-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

.ihredesign .holiday-card {
    background: rgb(255, 255, 255);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(14, 71, 138, 0.08);
    display: flex;
    flex-direction: column;
  }

.ihredesign .holiday-card-image {
    position: relative;
    height: 220px;
    background-size: cover;
    background-position: center;
  }

.ihredesign .holiday-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,20,30,0.05) 0%, rgba(10,20,30,0.45) 100%);
  }

.ihredesign .holiday-tag {
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 16px;
    background: rgb(198, 154, 63);
    color: rgb(255, 255, 255);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
  }

.ihredesign .holiday-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

.ihredesign .holiday-title {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: rgb(14, 71, 138);
    margin: 0 0 8px;
    line-height: 1.25;
    text-transform: capitalize;
  }

.ihredesign .holiday-title a {
    color: inherit;
    text-decoration: none;
  }

.ihredesign .holiday-title a:hover {
    text-decoration: underline;
  }

.ihredesign .holiday-rating {
    font-size: 13px;
    color: rgb(198, 154, 63);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

.ihredesign .star-rating {
    position: relative;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
  }
.ihredesign .star-rating .star-rating-empty {
    color: rgba(140, 140, 140, 0.35);
    letter-spacing: 2px;
  }
.ihredesign .star-rating .star-rating-filled {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: rgb(198, 154, 63);
    letter-spacing: 2px;
  }

.ihredesign .holiday-rating .count {
    color: rgb(140, 140, 140);
    margin-left: 4px;
  }

.ihredesign .holiday-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgb(90, 94, 100);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.ihredesign .holiday-divider {
    border: none;
    border-top: 1px solid rgb(232, 228, 220);
    margin: 0 0 18px;
    height: 0px !important;
  }

.ihredesign .holiday-footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

.ihredesign .holiday-price-label {
    font-size: 12px;
    color: rgb(140, 140, 140);
    margin-bottom: 2px;
  }

.ihredesign .holiday-price {
    font-size: 20px;
    font-weight: 800;
    color: rgb(198, 154, 63);
  }

.ihredesign .btn-holiday {
    background: rgb(14, 71, 138);
    color: rgb(255, 255, 255);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: Lato, sans-serif;
    white-space: nowrap;
    transition: background 0.2s ease;
  }

.ihredesign .btn-holiday:hover { background: rgb(15, 65, 110); }

@media (max-width: 900px) {
.ihredesign .featured-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
.ihredesign .featured-grid { grid-template-columns: 1fr; }
.ihredesign .featured-heading h2 { font-size: 28px; }
}

/* =========================== END FEATURED HOLIDAYS CARDS =========================== */

/* ============ BEST SELLERS ============ */

.ihredesign .bestsellers-wrap {
    background: rgb(255, 255, 255);
    padding: 64px 24px 80px;
    position: relative;
    overflow: hidden;
  }

/* Same subtle sparkle watermark as Holiday Inspiration, tucked into
   the bottom-right corner here for a bit of variety across sections
   rather than every watermark sitting in the same spot. */

.ihredesign .bestsellers-wrap::before {
    content: "";
    position: absolute;
    bottom: -140px;
    right: -140px;
    width: 640px;
    height: 640px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z' fill='%23C69A3F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
  }

.ihredesign .bestsellers-top {
    max-width: 1200px;
    margin: 0 auto 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    z-index: 1;
  }

/* Shared gold icon + heading pattern — reused by any section
     heading that wants a small icon in front of the title
     (currently Best Sellers and Destinations). */

.ihredesign .heading-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

.ihredesign .heading-with-icon h2 {
    margin: 0 !important;
  }

.ihredesign .heading-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgb(198, 154, 63);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.ihredesign .heading-icon svg {
    width: 20px;
    height: 20px;
    stroke: rgb(255, 255, 255);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.ihredesign .bestsellers-heading-group {
    text-align: left;
  }

.ihredesign .bestsellers-heading-group h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: rgb(14, 71, 138);
    margin: 0 0 12px;
  }

.ihredesign .bestsellers-heading-group p {
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(100, 106, 114);
    margin: 0;
    max-width: 480px;
  }

@media (max-width: 700px) {
.ihredesign .bestsellers-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
.ihredesign .bestsellers-top .btn { width: 100%; }
}

.ihredesign .bestsellers-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    position: relative;
    z-index: 1;
  }

.ihredesign .bestseller-card {
    background: rgb(255, 255, 255);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(14, 71, 138, 0.06);
    padding: 20px;
    display: flex;
    gap: 20px;
  }

.ihredesign .bestseller-image {
    position: relative;
    flex: 0 0 140px;
    height: 140px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

.ihredesign .bestseller-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgb(198, 154, 63);
    color: rgb(255, 255, 255);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    max-width: calc(100% - 20px);
  }

.ihredesign .bestseller-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

.ihredesign .bestseller-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
  }

.ihredesign .bestseller-title {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: rgb(14, 71, 138);
    margin: 0;
    line-height: 1.3;
    text-transform: capitalize;
  }

.ihredesign .bestseller-title a {
    color: inherit;
    text-decoration: none;
  }

.ihredesign .bestseller-title a:hover {
    text-decoration: underline;
  }

.ihredesign .bestseller-price-block {
    flex: 0 0 auto;
    text-align: right;
  }

.ihredesign .bestseller-price {
    font-size: 17px;
    font-weight: 800;
    color: rgb(198, 154, 63);
    white-space: nowrap;
  }

.ihredesign .bestseller-days {
    font-size: 12px;
    color: rgb(150, 150, 150);
  }

.ihredesign .bestseller-rating {
    font-size: 12px;
    color: rgb(198, 154, 63);
    margin-bottom: 8px;
  }

.ihredesign .bestseller-rating .count {
    color: rgb(150, 150, 150);
    margin-left: 4px;
  }

.ihredesign .bestseller-desc {
    font-size: 13px;
    line-height: 1.55;
    color: rgb(95, 99, 105);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.ihredesign .bestseller-link {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: rgb(14, 71, 138);
    text-decoration: none;
  }

.ihredesign .bestseller-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
.ihredesign .bestsellers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
.ihredesign .bestseller-card { flex-direction: column; }
.ihredesign .bestseller-image { flex: 0 0 auto; width: 100%; height: 160px; }
}

/* ============ GET IN TOUCH ============ */

.ihredesign .contact-wrap {
    background: rgb(250, 248, 244);
    padding: 80px 24px;
  }

.ihredesign .contact-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }

.ihredesign .contact-heading {
    margin-bottom: 32px;
  }

.ihredesign .contact-heading h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: rgb(14, 71, 138);
    margin: 0 0 12px;
  }

.ihredesign .contact-heading p {
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(100, 106, 114);
    margin: 0;
    max-width: 440px;
  }

.ihredesign .contact-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

.ihredesign .contact-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }

.ihredesign .contact-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgb(247, 243, 236);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.ihredesign .contact-icon svg {
    width: 20px;
    height: 20px;
    stroke: rgb(198, 154, 63);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.ihredesign .contact-text h3 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(14, 71, 138);
    margin: 0 0 6px;
  }

.ihredesign .contact-text p,
  .ihredesign .contact-text a {
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(70, 74, 82);
    margin: 0;
    text-decoration: none;
  }

.ihredesign .contact-text a:hover {
    color: rgb(14, 71, 138);
    text-decoration: underline;
  }

.ihredesign .contact-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(10, 48, 84, 0.1);
  }

.ihredesign .contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
    display: block;
  }

.ihredesign .contact-map-note {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: rgb(90, 94, 100);
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border-radius: 999px;
  }

@media (max-width: 900px) {
.ihredesign .contact-inner { grid-template-columns: 1fr; gap: 40px; }
.ihredesign .contact-map { min-height: 320px; }
.ihredesign .contact-map iframe { min-height: 320px; }
}

/* ============ SCROLL TO TOP ============ */

.ihredesign .scroll-top-btn {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(198, 154, 63);
    color: rgb(255, 255, 255);
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(10, 20, 30, 0.28);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    z-index: 998;
  }

.ihredesign .scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

.ihredesign .scroll-top-btn:hover {
    background: rgb(178, 137, 50);
  }

.ihredesign .scroll-top-btn svg {
    width: 20px;
    height: 20px;
    stroke: rgb(255, 255, 255);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

@media (max-width: 560px) {
.ihredesign .scroll-top-btn { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* =========================================================
     REVIEWS / TESTIMONIALS — TEMPORARY BUILD
     TODO: This whole section is a stand-in for a reviews
     plugin (Trustpilot / Feefo / similar) that will be wired
     in later. When that happens, delete this CSS block (down
     to "END REVIEWS SECTION"), the matching HTML block in the
     body, and the <script id="reviewsScript"> block — nothing
     else depends on these classes.

     Until then: to add, edit or remove a review, just edit the
     `reviewsData` array in the script — the cards render from
     that data, so nothing in the HTML needs to be touched.
     ========================================================= */

.ihredesign .reviews-wrap {
    background: rgb(14, 71, 138);
    padding: 80px 40px 88px;
    overflow: hidden;
  }

.ihredesign .reviews-inner {
    max-width: 1180px;
    margin: 0 auto;
  }

.ihredesign .reviews-heading {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 38px;
    color: rgb(255, 255, 255);
    margin: 0;
  }

.ihredesign .reviews-inner .heading-with-icon {
    margin-bottom: 40px;
  }

.ihredesign .reviews-row {
    display: block;
  }
	
	.google-reviews-row #sb-reviews-container-2 .sb-post-item-wrap {
		margin-bottom: 20px !important;
	}
	
.reviews-row .sb-item-author-name {
    color: white !important;
}
	
.reviews-row .sb-item-author-date {
    color: white !important;
}
	
.reviews-row .sb-item-text.sb-fs {
	color: white !important;
}

.ihredesign .reviews-nav {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: rgb(255, 255, 255);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 46px;
    transition: background 0.2s ease;
  }

.ihredesign .reviews-nav:hover { background: rgba(255, 255, 255, 0.12); }

.ihredesign .reviews-summary {
    flex: 0 0 200px;
    padding-right: 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    margin-right: 16px;
  }

.ihredesign .reviews-summary h3 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: rgb(255, 255, 255);
    margin: 0 0 12px;
  }

.ihredesign .reviews-summary-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
  }

.ihredesign .review-star-box {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: rgb(198, 154, 63);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-size: 13px;
  }

.ihredesign .reviews-summary-count {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
  }

.ihredesign .reviews-summary-count a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
  }

.ihredesign .reviews-track {
    flex: 1;
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }

.ihredesign .reviews-track::-webkit-scrollbar { display: none; }

.ihredesign .review-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }

.ihredesign .review-card:first-child {
    border-left: none;
    padding-left: 0;
  }

.ihredesign .review-top-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

.ihredesign .review-stars {
    display: flex;
    gap: 3px;
  }

.ihredesign .review-star-box.small {
    width: 20px;
    height: 20px;
    font-size: 11px;
    border-radius: 4px;
  }

.ihredesign .review-verified {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
  }

.ihredesign .review-author {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
  }

.ihredesign .review-author strong {
    color: rgb(255, 255, 255);
    font-weight: 700;
  }

.ihredesign .review-title {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: rgb(255, 255, 255);
    margin: 0 0 8px;
  }

.ihredesign .review-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

@media (max-width: 900px) {
.ihredesign .reviews-wrap { padding: 64px 24px 72px; }
.ihredesign .reviews-summary { flex-basis: 160px; }
.ihredesign .reviews-heading { font-size: 30px; }
}

@media (max-width: 640px) {
.ihredesign .reviews-row { flex-wrap: wrap; }
.ihredesign .reviews-summary {
      flex: 1 1 100%;
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
      padding-bottom: 20px;
      margin-bottom: 20px;
      margin-right: 0;
    }
.ihredesign .reviews-nav { margin-top: 0; }
}

/* =========================== END REVIEWS SECTION =========================== */

/* ============ HOLIDAY INSPIRATION ============ */

.ihredesign .inspiration-wrap {
    background: rgb(247, 243, 236);
    padding: 72px 24px 88px;
    position: relative;
    overflow: hidden;
  }

/* Subtle watermark — the same 4-point sparkle shape from the logo
   (and already used for the "Our Expertise" badge icon elsewhere on
   this page), scaled up huge and faded almost to nothing. Sits behind
   the heading/grid via z-index, cropped off the top-right corner of
   the section for a quieter, more "found in the corner" placement
   rather than sitting dead-centre and competing with the content. */

.ihredesign .inspiration-wrap::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 640px;
    height: 640px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z' fill='%23C69A3F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
  }

.ihredesign .inspiration-heading {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 44px;
    position: relative;
    z-index: 1;
  }

.ihredesign .inspiration-heading h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: rgb(14, 71, 138);
    margin: 0 0 12px;
  }

.ihredesign .inspiration-heading .underline {
    width: 44px;
    height: 3px;
    background: rgb(198, 154, 63);
    margin: 0 auto;
    border-radius: 2px;
  }

.ihredesign .inspiration-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid !important;
    /* Change 1.15fr if you want the tall card wider or narrower - that is the
       only number here worth touching. */
    grid-template-columns: 1.15fr 1fr 1fr !important;
    grid-template-rows: repeat(2, 210px) !important;
    gap: 24px;
    position: relative;
    z-index: 1;
  }

.ihredesign .inspiration-card {
    position: relative;
    grid-column: span 1;
    grid-row: span 1;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
  }

.ihredesign .inspiration-card.featured {
    grid-row: span 2;
  }

/* ---------------------------------------------------------------------------
   EXPLICIT PLACEMENT - do not remove.

   Every card is pinned to a named cell rather than being auto-placed.
   Auto-placement was the whole problem: another stylesheet on this site sets a
   two-column span on one of these cards using a higher-specificity selector, so
   it won no matter what order the stylesheets loaded in. Once one card takes two
   columns the rest of the row shunts along and the last card drops into an
   implicit third row - which is the thin sliver that kept appearing underneath
   the River Cruising card.

   Pinning each card to a specific column and row makes that impossible. It no
   longer matters what any other rule says about spans, because nothing is being
   placed automatically any more.

        +-----------+-----+-----+
        |           |  2  |  3  |
        |     1     +-----+-----+
        |           |  4  |  5  |
        +-----------+-----+-----+
   ------------------------------------------------------------------------- */
.ihredesign .inspiration-card:nth-child(1) { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
.ihredesign .inspiration-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
.ihredesign .inspiration-card:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
.ihredesign .inspiration-card:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; }
.ihredesign .inspiration-card:nth-child(5) { grid-column: 3 !important; grid-row: 2 !important; }

/* Anything beyond the fifth card is hidden rather than allowed to start a new
   row. The section is designed for exactly five. */
.ihredesign .inspiration-card:nth-child(n+6) { display: none !important; }

.ihredesign .inspiration-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

.ihredesign .inspiration-card:hover .inspiration-bg {
    transform: scale(1.08);
  }

.ihredesign .inspiration-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,16,26,0) 40%, rgba(8,16,26,0.55) 100%);
    transition: background 0.5s ease;
  }

.ihredesign .inspiration-card:hover .inspiration-overlay {
    background: linear-gradient(180deg, rgba(8,16,26,0.05) 0%, rgba(8,16,26,0.82) 100%);
  }

.ihredesign .inspiration-text {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 20px;
    z-index: 1;
  }

.ihredesign .inspiration-title {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: rgb(255, 255, 255);
    margin: 0;
    transition: transform 0.4s ease;
  }

.ihredesign .inspiration-card.featured .inspiration-title {
    font-size: 24px;
  }

.ihredesign .inspiration-desc {
    font-family: Lato, sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin: 6px 0 0;
    max-height: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height 0.45s ease, opacity 0.35s ease, transform 0.35s ease, margin 0.45s ease;
    overflow: hidden;
  }

.ihredesign .inspiration-card:hover .inspiration-desc {
    max-height: 60px;
    opacity: 1;
    transform: translateY(0);
  }

/* Featured card's description is short and shown by default,
     per the reference design — but it still gets the same
     hover polish (zoom + darker overlay) as the others. */

.ihredesign .inspiration-card.featured .inspiration-desc {
    max-height: 24px;
    opacity: 0.85;
    transform: translateY(0);
  }

.ihredesign .inspiration-card.featured:hover .inspiration-desc {
    opacity: 1;
  }

@media (max-width: 900px) {
.ihredesign .inspiration-grid {
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: 260px repeat(2, 190px) !important;
    }
/* Unpin everything the desktop rules pinned, then place the five cards for two
   columns: the tall one goes full width across the top, the rest fill in pairs.
   Same specificity as the desktop rules and later in the file, so these win. */
.ihredesign .inspiration-card:nth-child(1) { grid-column: 1 / span 2 !important; grid-row: 1 !important; }
.ihredesign .inspiration-card:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
.ihredesign .inspiration-card:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
.ihredesign .inspiration-card:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
.ihredesign .inspiration-card:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; }
}

@media (max-width: 560px) {
.ihredesign .inspiration-grid {
      grid-template-columns: 1fr !important;
      grid-template-rows: none !important;
    }
/* One column: let them stack in document order. */
.ihredesign .inspiration-card:nth-child(n) {
      grid-column: 1 !important;
      grid-row: auto !important;
      height: 220px !important;
    }
.ihredesign .inspiration-heading h2 { font-size: 28px; }
.ihredesign .inspiration-wrap::before { width: 380px; height: 380px; top: -60px; right: -60px; }
}

/* ============ DESTINATIONS CAROUSEL ============ */

.ihredesign .destinations-wrap {
    background: rgb(233, 238, 243);
    padding: 72px 24px 88px;
    position: relative;
    overflow: hidden;
  }

/* Same subtle sparkle watermark, bottom-left corner here — a
   different corner from Inspiration (top-right) and Best Sellers
   (bottom-right) so the repeated motif doesn't feel mechanical. */

.ihredesign .destinations-wrap::before {
    content: "";
    position: absolute;
    bottom: -130px;
    left: -130px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z' fill='%23C69A3F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
  }

.ihredesign .destinations-top {
    max-width: 1200px;
    margin: 0 auto 44px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    z-index: 1;
  }

.ihredesign .destinations-heading-group {
    text-align: left;
  }

.ihredesign .destinations-heading-group .underline {
    width: 44px;
    height: 3px;
    background: rgb(198, 154, 63);
    margin: 0 0 16px;
    border-radius: 2px;
  }

.ihredesign .destinations-heading-group h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: rgb(14, 71, 138);
    margin: 0 0 12px;
  }

.ihredesign .destinations-heading-group p {
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(100, 106, 114);
    margin: 0;
    max-width: 480px;
  }

.ihredesign .btn-outline {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 2px solid rgb(14, 71, 138);
    color: rgb(14, 71, 138);
    font-family: Lato, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 14px 26px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
  }

.ihredesign .btn-outline:hover {
    background: rgb(14, 71, 138);
    color: rgb(255, 255, 255);
  }

.ihredesign .btn-outline:active { transform: scale(0.97); }

@media (max-width: 700px) {
.ihredesign .destinations-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
.ihredesign .destinations-top .btn { width: 100%; }
}

.ihredesign .destinations-carousel-wrap {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

.ihredesign .destinations-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 6px 4px 16px;
  }

.ihredesign .destinations-track::-webkit-scrollbar { display: none; }

.ihredesign .destinations-nav-row {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 4px;
  }

.ihredesign .destinations-nav {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(14, 71, 138, 0.15);
    background: rgb(255, 255, 255);
    color: rgb(14, 71, 138);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(14, 71, 138, 0.08);
    transition: background 0.2s ease, transform 0.15s ease;
  }

.ihredesign .destinations-nav:hover { background: rgb(14, 71, 138); color: rgb(255, 255, 255); }

.ihredesign .destinations-nav:active { transform: scale(0.94); }

.ihredesign .destination-card {
    position: relative;
    flex: 0 0 300px;
    height: 340px;
    scroll-snap-align: start;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;
  }

.ihredesign .destination-bg {
    position: absolute;
    inset: 0;
    background: rgb(190, 198, 206); /* fallback if the image fails to load */
    overflow: hidden;
  }

.ihredesign .destination-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

.ihredesign .destination-card:hover .destination-bg img {
    transform: scale(1.1);
  }

.ihredesign .destination-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,16,26,0) 45%, rgba(8,16,26,0.7) 100%);
    transition: background 0.4s ease;
  }

.ihredesign .destination-card:hover .destination-overlay {
    background: linear-gradient(180deg, rgba(8,16,26,0.05) 0%, rgba(8,16,26,0.85) 100%);
  }

.ihredesign .destination-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

.ihredesign .destination-name {
    font-family: Lato, sans-serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
  }

.ihredesign .destination-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.2s ease;
  }

.ihredesign .destination-card:hover .destination-arrow {
    opacity: 1;
    transform: translateX(0);
  }

.ihredesign .destination-card:hover .destination-arrow:hover {
    background: rgb(198, 154, 63);
    border-color: rgb(198, 154, 63);
  }

@media (max-width: 900px) {
.ihredesign .destination-card { flex-basis: 260px; height: 300px; }
}

@media (max-width: 560px) {
.ihredesign .destinations-heading-group h2 { font-size: 28px; }
.ihredesign .destinations-nav { display: none; }
.ihredesign .destination-card { flex-basis: 240px; height: 280px; }
}

/* ============ WHY TRAVEL WITH US (PARALLAX) ============ */

.ihredesign .why-wrap {
    position: relative;
    background-image: url('https://involvedholidays.com/wp-content/uploads/Walking-in-Brescia-lakes-view-across-the-lake.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 110px 24px;
    overflow: hidden;
  }

.ihredesign .why-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(6,20,36,0.88) 0%, rgba(10,48,84,0.8) 55%, rgba(6,20,36,0.9) 100%);
  }

.ihredesign .why-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
  }

.ihredesign .why-heading h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 38px;
    color: rgb(255, 255, 255);
    margin: 0;
    max-width: 640px;
  }

.ihredesign .why-heading .heading-with-icon {
    margin-bottom: 48px;
  }

.ihredesign .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

.ihredesign .why-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    padding: 40px 30px;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, border-color 0.4s ease;
  }

.ihredesign .why-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(198, 154, 63, 0.55);
  }

.ihredesign .why-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: linear-gradient(135deg, rgb(198, 154, 63), rgb(150, 112, 40));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(198, 154, 63, 0.28);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

.ihredesign .why-card:hover .why-icon {
    transform: scale(1.08) rotate(-4deg);
  }

.ihredesign .why-icon svg {
    width: 28px;
    height: 28px;
    stroke: rgb(255, 255, 255);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

.ihredesign .why-card h3 {
    font-family: Lato, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(198, 154, 63);
    margin: 0 0 14px;
  }

.ihredesign .why-card p {
    font-family: Lato, sans-serif;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
  }

@media (max-width: 900px) {
.ihredesign .why-wrap { background-attachment: scroll; padding: 80px 24px; }
.ihredesign .why-grid { grid-template-columns: 1fr; gap: 20px; }
.ihredesign .why-heading h2 { font-size: 30px; }
}

/* background-attachment:fixed is unreliable on iOS Safari, so
     drop the parallax there rather than risk a broken/jittery scroll */

@supports (-webkit-touch-callout: none) {
.ihredesign .why-wrap { background-attachment: scroll; }
}

/* ============ RECENTLY VIEWED HOLIDAYS ============ */

.ihredesign .recently-viewed-wrap {
    background: rgb(247, 243, 236);
    padding: 72px 24px 88px;
    position: relative;
    overflow: hidden;
  }

/* Same subtle sparkle watermark, top-left corner here — completes
   the set of four corners used across Inspiration (top-right), Best
   Sellers (bottom-right), Destinations (bottom-left), and this one. */

.ihredesign .recently-viewed-wrap::before {
    content: "";
    position: absolute;
    top: -120px;
    left: -120px;
    width: 600px;
    height: 600px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z' fill='%23C69A3F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
  }

.ihredesign .recently-viewed-heading {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 12px;
    position: relative;
    z-index: 1;
  }

.ihredesign .recently-viewed-heading h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: rgb(14, 71, 138);
    margin: 0 0 12px;
  }

.ihredesign .recently-viewed-heading .underline {
    width: 44px;
    height: 3px;
    background: rgb(198, 154, 63);
    margin: 0 auto;
    border-radius: 2px;
  }

.ihredesign .recently-viewed-subtitle {
    text-align: center;
    font-family: Lato, sans-serif;
    font-size: 15px;
    color: rgb(140, 140, 140);
    margin: 0 auto 40px;
    position: relative;
    z-index: 1;
  }

.ihredesign .recently-viewed-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
  }

.ihredesign .rv-card {
    background: rgb(255, 255, 255);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(14, 71, 138, 0.08);
    display: flex;
    flex-direction: column;
  }

.ihredesign .rv-card-image {
    position: relative;
    height: 220px;
  }

.ihredesign .rv-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

.ihredesign .rv-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,20,30,0.05) 0%, rgba(10,20,30,0.35) 100%);
  }

.ihredesign .rv-tag {
    position: absolute;
    z-index: 1;
    top: 16px;
    left: 16px;
    background: rgb(198, 154, 63);
    color: rgb(255, 255, 255);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
  }

.ihredesign .rv-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

.ihredesign .rv-title {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: rgb(14, 71, 138);
    margin: 0 0 8px;
    line-height: 1.25;
    text-transform: capitalize;
  }

.ihredesign .rv-title a {
    color: inherit;
    text-decoration: none;
  }

.ihredesign .rv-title a:hover {
    text-decoration: underline;
  }

.ihredesign .rv-rating {
    font-size: 13px;
    color: rgb(198, 154, 63);
    margin-bottom: 12px;
  }

.ihredesign .rv-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgb(90, 94, 100);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.ihredesign .rv-divider {
    border: none;
    border-top: 1px solid rgb(232, 228, 220);
    margin: 0 0 18px;
    height: 0px !important;
  }

.ihredesign .rv-footer {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

.ihredesign .rv-price-label {
    font-size: 12px;
    color: rgb(140, 140, 140);
    margin-bottom: 2px;
  }

.ihredesign .rv-price {
    font-size: 20px;
    font-weight: 800;
    color: rgb(198, 154, 63);
  }

.ihredesign .btn-rv {
    background: rgb(14, 71, 138);
    color: rgb(255, 255, 255);
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: Lato, sans-serif;
    white-space: nowrap;
    transition: background 0.2s ease;
  }

.ihredesign .btn-rv:hover { background: rgb(15, 65, 110); }

@media (max-width: 900px) {
.ihredesign .recently-viewed-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
.ihredesign .recently-viewed-grid { grid-template-columns: 1fr; }
.ihredesign .recently-viewed-heading h2 { font-size: 28px; }
}

/* =========================================================
     "DON'T JUST TAKE OUR WORD FOR IT" — now the Facebook Reviews
     section (feed=3 in the do_shortcode call below). Restyled with
     Facebook's own brand blue and a Facebook logo badge, and switched
     to a light background since Facebook's own UI is light/white
     with blue accents, not navy — this also fixes a readability
     issue: the Smash Balloon plugin's own review text is dark by
     default, which would have been hard to read against navy.
     ========================================================= */

.ihredesign .google-reviews-wrap {
    background: rgb(240, 242, 245); /* Facebook's own UI background grey */
    padding: 90px 24px 100px;
  }

.ihredesign .google-reviews-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 16px;
  }

.ihredesign .google-reviews-heading .heading-with-icon {
    justify-content: center;
    margin-bottom: 8px;
  }

.ihredesign .google-reviews-heading h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: rgb(24, 27, 31); /* Facebook's own near-black text colour */
    margin: 0;
  }

.ihredesign .facebook-icon-badge {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgb(24, 119, 242); /* official Facebook blue */
    display: flex;
    align-items: center;
    justify-content: center;
  }

.ihredesign .facebook-icon-badge svg {
    width: 20px;
    height: 20px;
    fill: rgb(255, 255, 255);
  }

.ihredesign .google-reviews-subtitle {
    text-align: center;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: rgb(24, 119, 242);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 40px;
  }

.ihredesign .google-reviews-card-wrap {
    max-width: 1200px;
    margin: 0 auto;
    background: rgb(255, 255, 255);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 12px 30px rgba(24, 27, 31, 0.08);
    border-top: 4px solid rgb(24, 119, 242);
  }

.ihredesign .google-reviews-row {
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    align-items: center;
    gap: 12px;
  }

.ihredesign .google-reviews-nav {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: rgb(255, 255, 255);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
  }

.ihredesign .google-reviews-nav:hover { background: rgba(255, 255, 255, 0.12); }

.ihredesign .google-reviews-track {
    flex: 1;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 8px;
  }

.ihredesign .google-reviews-track::-webkit-scrollbar { display: none; }

.ihredesign .gr-card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 280px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 28px;
  }

.ihredesign .gr-stars {
    color: rgb(198, 154, 63);
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

.ihredesign .gr-title {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: rgb(255, 255, 255);
    margin: 0 0 12px;
  }

.ihredesign .gr-text {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.ihredesign .gr-author {
    font-size: 13px;
    font-weight: 700;
    color: rgb(198, 154, 63);
  }

.ihredesign .gr-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
  }

/* Smash Balloon Reviews Feed plugin's own elements (confirmed classes,
   spotted via the "sb-" prefix already used elsewhere on the page) —
   themed with Facebook blue accents against the new light background.
   The plugin's own dark text should already read fine on white/light
   grey, so (unlike the "You'll love our holidays" feed on navy) no
   forced white-text override is needed here. */

.ihredesign .google-reviews-row .sb-post-item-wrap {
    border-color: rgba(24, 119, 242, 0.15) !important;
  }

.ihredesign .google-reviews-row .sb-item-author-name {
    color: rgb(24, 27, 31) !important;
    font-weight: 700 !important;
  }

.ihredesign .google-reviews-row .sb-item-author-date {
    color: rgb(101, 103, 107) !important;
  }

.ihredesign .google-reviews-row .sb-rating,
.ihredesign .google-reviews-row .sb-review-stars,
.ihredesign .google-reviews-row [class*="star"] {
    color: rgb(24, 119, 242) !important;
  }

@media (max-width: 900px) {
.ihredesign .gr-card { flex-basis: calc(50% - 12px); }
.ihredesign .google-reviews-heading h2 { font-size: 28px; }
.ihredesign .google-reviews-card-wrap { padding: 24px; }
}

@media (max-width: 600px) {
.ihredesign .gr-card { flex-basis: 85%; }
.ihredesign .google-reviews-nav { display: none; }
}

/* =========================== END FACEBOOK REVIEWS SECTION =========================== */
	
/* ============ STICKY SEARCH BAR HOST (Safari fix) ============
   Created by script block 6. Sits directly on <body>, outside .hero,
   so WebKit cannot clip the fixed search bar against .hero's
   overflow:hidden. Carries the .ihredesign class so the bar keeps all
   of its scoped styling while it's docked in here. Takes up no space
   and renders nothing while the bar is back in its normal slot. */
/* position:relative + a z-index gives the host its own STACKING CONTEXT.
   That is the whole point of these two lines.

   Without it, the docked search bar's own z-index:999 competes directly
   against the site header in the root stacking context, and beats the
   nav's dropdown menus — so the dropdowns opened *underneath* the bar.

   With it, everything inside the host (the bar's 999 included) is sealed
   into one layer that sits at 49, below the header and its dropdowns.
   The number only has to be lower than the site header's; 49 leaves
   plenty of room either side.

   Safe for the bar itself: position:fixed is only knocked out of the
   viewport by an ancestor with transform / filter / perspective /
   contain — never by position:relative. The bar still docks to the top
   of the window exactly as before. */
.ihredesign#ihStickyBarHost {
    position: relative;
    z-index: 49;
  }
.ihredesign#ihStickyBarHost:empty {
    display: none;
  }
nav.header-v2__mainbar.navbar.navbar-expand-lg {
    z-index: 1000;
}
	
/* ============ LAST MINUTE HOLIDAYS ============ */
.ihredesign .lastminute-wrap {
    background: rgb(247, 243, 236);
    padding: 72px 24px 88px;
    position: relative;
    overflow: hidden;
  }
.ihredesign .lastminute-top {
    max-width: 1200px;
    margin: 0 auto 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    z-index: 1;
  }
.ihredesign .lastminute-heading-group h2 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 34px;
    color: rgb(14, 71, 138);
    margin: 0 0 12px;
  }
.ihredesign .lastminute-heading-group p {
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(100, 106, 114);
    margin: 0;
    max-width: 480px;
  }
.ihredesign .lm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 10px;
  }
.ihredesign .lm-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: rgb(238, 243, 250);
    color: rgb(14, 71, 138);
    white-space: nowrap;
  }
.ihredesign .lm-chip--spaces {
    background: rgba(70, 120, 90, 0.14);
    color: rgb(46, 96, 66);
  }
.ihredesign .lm-chip--urgent {
    background: rgba(179, 32, 32, 0.1);
    color: rgb(163, 30, 30);
  }
@media (max-width: 700px) {
.ihredesign .lastminute-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
.ihredesign .lastminute-top .btn { width: 100%; }
.ihredesign .lastminute-heading-group h2 { font-size: 28px; }
}