/* Island Compass - home page trims.
   Loaded ONLY on page 325 (see ic-home.php). Selectors are qualified with
   .page-id-325, matching the convention already used in the Customizer CSS,
   so nothing here can reach another page. Not named ic-*.css so the sitewide
   glob skips it. */

/* Hero: 66vh instead of full viewport, so the CTA and the service row
   are both above the fold and the next section peeks. */
.page-id-325 .ic-hero { min-height: 66vh; }
.page-id-325 .ic-hero  { min-height: 66vh; }
@media (max-width: 767px) {
  .page-id-325 .ic-hero { min-height: 74vh; }
  .page-id-325 .ic-hero  { min-height: 74vh; }
}
.page-id-325 .ic-hero__lede p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--shell-50);
  max-width: 46ch;
  margin: 0;
}
.page-id-325 .ic-hero__link .elementor-button {
  background: transparent;
  border: 0;
  color: var(--shell-50);
  border-bottom: 1px solid rgba(253,251,248,.55);
  border-radius: 0;
  padding: 4px 2px;
  min-height: 0;
}
/* Vertical rhythm: the old page used clamp(96px,14vw,200px) and
   clamp(110px,15vw,220px) bands. Tightened here per Nicole's "shorter". */
.page-id-325 .ic-intro { padding: clamp(38px, 4.4vw, 66px) clamp(20px, 5vw, 64px) !important; }
.page-id-325 .ic-intro  { gap: clamp(20px, 2.4vw, 32px); }
.page-id-325 .ic-henq { padding: clamp(52px, 5.6vw, 86px) clamp(20px, 5vw, 64px) !important; }
.page-id-325 .ic-teasers { padding: clamp(38px, 4.2vw, 62px) clamp(20px, 5vw, 64px) !important; }

/* The Collection */
.page-id-325 .ic-hc { padding: clamp(40px, 4.4vw, 68px) clamp(20px, 5vw, 64px) !important; }
.page-id-325 .ic-hc  { max-width: var(--container-wide); margin: 0 auto; gap: clamp(28px, 3vw, 44px); }
.page-id-325 .ic-hc__head  {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: none;
}
.page-id-325 .ic-hc__h .elementor-heading-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  margin: 0;
}
/* Villa cards - same card language as the Villas listing page, scoped here */
.page-id-325 .ic-hc-results .post-wrapper {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow var(--dur-base, 250ms) var(--ease-standard, ease);
}
.page-id-325 .ic-hc-results .post-wrapper:hover { box-shadow: var(--shadow-md); }
.page-id-325 .ic-hc-results .post-image { overflow: hidden; }
.page-id-325 .ic-hc-results .post-image img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--dur-image, 600ms) var(--ease-standard, ease);
}
.page-id-325 .ic-hc-results .post-wrapper:hover .post-image img { transform: scale(1.04); }
.page-id-325 .ic-hc-results .inner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}
.page-id-325 .ic-hc-results .elementor-repeater-item-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-tertiary);
}
.page-id-325 .ic-hc-results .post-title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-regular);
  line-height: 1.25;
  margin: 0;
}
.page-id-325 .ic-hc-results .post-title a { color: var(--text-primary); text-decoration: none; }
.page-id-325 .ic-hc-results .post-taxonomy {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: var(--space-2) 0 0; padding: 0;
}
.page-id-325 .ic-hc-results .post-taxonomy li a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}
.page-id-325 .ic-hc-results .post-read-more {
  margin-top: auto;
  align-self: flex-start;
  padding-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-button);
  color: var(--text-primary);
  text-decoration: none;
}
.page-id-325 .ic-hc-results .post-read-more:after {
  content: ""; display: block; height: 1px;
  background: var(--text-primary); margin-top: 4px;
}

@media (max-width: 767px) {
  .page-id-325 .ic-hc__head  { flex-direction: column; align-items: flex-start; }
  .page-id-325 .ic-hc-results .inner-content { padding: var(--space-4); }
  .page-id-325 .ic-hero__cta  { flex-direction: column; align-items: center; gap: var(--space-3); }
}
/* ============================================================
   TIGHTENING PASS - home only. Selectors are prefixed
   body.page-id-325 where they must outrank a Customizer rule,
   because inline Customizer CSS loads after this stylesheet.
   ============================================================ */

/* 1. Trust statement: the tallest offender. Copy unchanged. */
/* max-width removed Sep 2026: it was written for the .e-con-inner wrapper and
   was hoisted onto the section itself during the e-con-inner compatibility
   pass, capping the whole band at 860px. Width belongs to Elementor. */
body.page-id-325 .ic-intro { gap: clamp(14px, 1.6vw, 22px); }
body.page-id-325 .ic-intro__rose img { width: 26px; height: 26px; }
body.page-id-325 .ic-intro__sub p { line-height: 1.65; }

/* 2. Sections meet cleanly - no stray margins between bands */
body.page-id-325 .ic-intro,
body.page-id-325 .ic-hc,
body.page-id-325 .ic-teasers,
body.page-id-325 .ic-henq { margin: 0; }
/* 3. Concierge + Property Management: the Customizer forces this grid to
   ONE column on desktop, which is why it read as two huge feature blocks.
   Restore two columns and shorten the images. */
body.page-id-325 .ic-teasers .ic-tsrgrid  {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 44px);
  align-items: start;
}
body.page-id-325 .ic-teasers .ic-tsr  { gap: var(--space-3); }
body.page-id-325 .ic-teasers .ic-tsr__img img {
  aspect-ratio: 16 / 9;
  max-height: 260px;
  box-shadow: none;
}
body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  max-width: 24ch;
}
body.page-id-325 .ic-teasers .ic-tsr__p p { line-height: 1.6; max-width: 42ch; }

@media (max-width: 900px) {
  body.page-id-325 .ic-teasers .ic-tsrgrid  { grid-template-columns: 1fr; gap: var(--space-5); }
  body.page-id-325 .ic-teasers .ic-tsr__img img { aspect-ratio: 2 / 1; max-height: 200px; }
}
/* 4. Featured villa cards - same data, more restraint.
   Border softened to a hairline that only firms up on hover, spec line set
   on one row, CTA separated by a rule so the card reads top-to-bottom. */
body.page-id-325 .ic-hc-results .post-wrapper {
  border-color: var(--border-hairline);
  border-radius: var(--radius-media);
  transition: box-shadow 400ms var(--ease-standard, ease), border-color 400ms var(--ease-standard, ease);
}
body.page-id-325 .ic-hc-results .post-wrapper:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-media, var(--shadow-md));
}
body.page-id-325 .ic-hc-results .inner-content { gap: 6px; padding: clamp(18px, 1.6vw, 26px); }
body.page-id-325 .ic-hc-results .elementor-repeater-item-h1 { margin-bottom: 2px; }
body.page-id-325 .ic-hc-results .post-title {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  letter-spacing: -.012em;
}
body.page-id-325 .ic-hc-results .elementor-repeater-item-h3:after {
  content: "\00B7";
  margin: 0 8px;
  color: var(--text-tertiary);
}
/* Amenity chips: quieter, so the villa name leads */
body.page-id-325 .ic-hc-results .post-taxonomy { margin-top: 10px; gap: 5px; }
body.page-id-325 .ic-hc-results .post-taxonomy li a {
  background: transparent;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 9px;
  color: var(--text-tertiary);
}
/* CTA sits below a hairline rule */
body.page-id-325 .ic-hc-results .post-read-more {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
  width: 100%;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: .1em;
}
body.page-id-325 .ic-hc-results .post-read-more:after { display: none; }
/* 5. Mobile: the service triad stacked to three full-width rows, which cost
   most of a phone screen. Keep it as one compact row of three. */
@media (max-width: 767px) {
  body.page-id-325 .ic-intro { padding: clamp(30px, 8vw, 44px) 20px !important; }
  body.page-id-325 .ic-hc { padding: clamp(32px, 8vw, 48px) 20px !important; }
  body.page-id-325 .ic-teasers { padding: clamp(30px, 8vw, 44px) 20px !important; }
  body.page-id-325 .ic-henq { padding: clamp(40px, 10vw, 60px) 20px !important; }
  body.page-id-325 .ic-hc  { gap: var(--space-4); }
  body.page-id-325 .ic-hc-results .inner-content { padding: 16px; }
}
/* ============================================================
   POLISH PASS - home only.
   ============================================================ */

/* 1. Hero legibility: a soft gradient behind the copy only, so the
   headline and lede lift off the water without darkening the whole photo. */
body.page-id-325 .ic-hero__copy:before {
  content: "";
  position: absolute;
  inset: 0 0 -140px 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(22,38,31,0) 0%, rgba(22,38,31,.22) 38%, rgba(22,38,31,.42) 66%, rgba(22,38,31,.20) 88%, rgba(22,38,31,0) 100%);
  pointer-events: none;
}
body.page-id-325 .ic-hero__lede p {
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.6;
  /* Aug26 fix: ic-system.css has a sitewide rule targeting any non-eyebrow
     text-editor paragraph inside an "ic-" scoped container
     (body [class*="ic-"] .elementor-widget-text-editor:not(...):not(...):not(...) p),
     forcing color:var(--text-secondary) (a dark ink-brown meant for cream
     sections) so Elementor's own white colour setting never reaches the
     page. That selector's three :not() clauses give it specificity (0,6,2),
     which beats a normal override here, so !important is used for this one
     declaration only. */
  color: var(--shell-50) !important;
  text-shadow: 0 1px 22px rgba(22,38,31,.62);
  max-width: 44ch;
}
body.page-id-325 .ic-hero__copy .ic-eyebrow p {
  /* "BARBADOS" eyebrow above the H1 only — scoped via its unique parent
     .ic-hero__copy so no other .ic-eyebrow--on-dark on the page is
     affected (e.g. the enquiry-band eyebrow keeps its own colour). */
  color: #FFC2E8;
  text-shadow: 0 1px 16px rgba(22,38,31,.55);
}
body.page-id-325 .ic-hero__link .elementor-button {
  border-bottom-color: rgba(253,251,248,.8);
  text-shadow: 0 1px 16px rgba(22,38,31,.5);
}
body.page-id-325 .ic-hero__tile:first-child { border-left: 0; }
body.page-id-325 .ic-hero__tile { border-left-color: rgba(253,251,248,.24); }
body.page-id-325 .ic-hero__tile:hover { background: rgba(253,251,248,.14); }
body.page-id-325 .ic-hero__tile .elementor-icon-box-wrapper {
  gap: 9px;
  padding: clamp(16px, 2vw, 26px) 14px;
}
body.page-id-325 .ic-hero__tile .elementor-icon {
  font-size: 19px;
  opacity: .85;
}
body.page-id-325 .ic-hero__tile .elementor-icon-box-title,
body.page-id-325 .ic-hero__tile .elementor-icon-box-title a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--shell-50);
  text-shadow: 0 1px 14px rgba(22,38,31,.5);
}
/* 3. Featured villas: equal-height cards, title responds on hover. */
body.page-id-325 .ic-hc-results .post-wrapper { height: 100%; }
body.page-id-325 .ic-hc-results .post-title a { transition: color 300ms var(--ease-standard, ease); }
body.page-id-325 .ic-hc-results .post-wrapper:hover .post-title a { color: var(--pink-700); }
body.page-id-325 .ic-hc-results .post-read-more { transition: color 300ms var(--ease-standard, ease); }
body.page-id-325 .ic-hc-results .post-wrapper:hover .post-read-more { color: var(--pink-700); }

/* 4. Teaser pair: each side becomes one restrained card, equal height,
   with the link pinned to the bottom so both align. */
body.page-id-325 .ic-teasers .ic-tsrgrid  { align-items: stretch; }
body.page-id-325 .ic-teasers .ic-tsr  {
  height: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: clamp(16px, 1.4vw, 22px);
  gap: var(--space-3);
}
body.page-id-325 .ic-teasers .ic-tsr__img img { max-height: 220px; }
body.page-id-325 .ic-teasers .ic-tsr .ic-link { margin-top: auto; padding-top: var(--space-2); }
body.page-id-325 .ic-teasers .ic-tsr .ic-eyebrow p { margin-bottom: 0; }
/* 5. Enquiry band: the Customizer stacks these two buttons into a full-width
   column at every width. Side by side on desktop, stacked on phones. */
body.page-id-325 .ic-henq__btns  {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: auto;
  gap: var(--space-4);
}
body.page-id-325 .ic-henq__inner  { gap: clamp(18px, 2vw, 30px); }
body.page-id-325 .ic-henq__mail p {
  font-size: var(--text-caption);
  letter-spacing: .04em;
  /* Same ic-system.css specificity conflict as the hero lede above — see
     that comment. !important needed here too, narrowly, on this one line. */
  color: rgba(253,251,248,.80) !important;
  margin: 0;
}
/* QA follow-up Aug26: the "Tell us when you'd like to come" supporting line
   and the email line both used the same muted 68%-alpha white as everywhere
   else on dark; on this band specifically they read as too faint at their
   light font-weight. Strengthened here only — email stays a notch quieter
   than the paragraph, matching its lesser role, but is clearly legible now. */
body.page-id-325 .ic-henq__p p {
  /* Same ic-system.css specificity conflict — see the comment on
     .ic-hero__lede p above. This is the "Tell us when you'd like to come"
     supporting line; without !important it renders in the dark ink-brown
     meant for cream sections, invisible on this dark green band. */
  color: rgba(253,251,248,.86) !important;
}
/* WhatsApp (outline) button on this band: border was rgba(...,.42), too
   faint against the dark green. Text was already high-contrast white. */
body.page-id-325 .ic-henq .ic-btn--outline .elementor-button {
  border-color: rgba(253,251,248,.62);
}
body.page-id-325 .ic-henq .ic-btn--outline .elementor-button:hover {
  border-color: var(--shell-50);
}

@media (max-width: 767px) {
  body.page-id-325 .ic-henq__btns  {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-3);
  }
}
/* 6. Mobile polish: readable, not cramped. */
@media (max-width: 767px) {
  body.page-id-325 .ic-hero__lede p { font-size: 1rem; line-height: 1.55; max-width: 34ch; }
  body.page-id-325 .ic-hero__tile .elementor-icon-box-wrapper { gap: 6px; padding: 14px 4px; }
  body.page-id-325 .ic-hero__tile .elementor-icon { font-size: 16px; }
  body.page-id-325 .ic-hero__tile .elementor-icon-box-title,
  body.page-id-325 .ic-hero__tile .elementor-icon-box-title a {
    font-size: 9.5px;
    letter-spacing: .08em;
    line-height: 1.25;
  }
  body.page-id-325 .ic-teasers .ic-tsr  { padding: 14px; gap: 12px; }
  body.page-id-325 .ic-teasers .ic-tsr__img img { max-height: 170px; }
  body.page-id-325 .ic-hc-results .post-taxonomy { margin-top: 8px; }
}
/* ============================================================
   FOOTER (homepage only) - QA follow-up Aug26.
   The footer is a shared template part, so these rules are qualified with
   body.page-id-325 to reach only this page; every other page keeps the
   footer exactly as it is. Layout, links and structure are untouched -
   colour/opacity only.
   ============================================================ */
body.page-id-325 .ic-foot-blurb,
body.page-id-325 .ic-foot-muted,
body.page-id-325 .ic-foot-legal,
body.page-id-325 footer.ct-footer [data-row="bottom"] .ct-footer-copyright p {
  color: rgba(253,251,248,.82);
}
body.page-id-325 .ic-foot-social a {
  border-color: rgba(253,251,248,.48);
}
body.page-id-325 .ic-foot-social a:hover {
  border-color: var(--pink-200);
}
/* ============================================================
   HEADER OVER HERO VIDEO (homepage only) - QA follow-up Aug26.
   The transparent-header gradient (defined sitewide in
   ic-header-footer.css) was tuned for a still photo. The looping video's
   brighter frames (sky/cloud) can drop nav text/icon contrast well under
   WCAG AA. Strengthened for the homepage only — same gradient shape, a
   stronger top edge — so legibility holds regardless of which frame is
   playing. Other pages using the overlay header keep the original values.
   ============================================================ */
body.page-id-325.ic-overlay-header:not(.ic-scrolled) #header .ct-header [data-row="middle"] {
  background: linear-gradient(to bottom, rgba(22,38,31,.60), rgba(22,38,31,0));
}
/* ============================================================
   TEASER REVISION - text-first two-column service section.
   The image becomes a small square thumbnail beside the copy
   instead of a wide banner above it, so the words lead.
   Overrides the card treatment added in the polish pass.
   ============================================================ */
body.page-id-325 .ic-teasers .ic-tsr  {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 18px;
  row-gap: 7px;
  align-content: start;
  padding: clamp(18px, 1.5vw, 24px);
}
body.page-id-325 .ic-teasers .ic-tsr__img {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: start;
}
body.page-id-325 .ic-teasers .ic-tsr__img img {
  aspect-ratio: 1 / 1;
  max-height: none;
  height: 104px;
  width: 104px;
  object-fit: cover;
  border-radius: var(--radius-control);
}
/* Copy column: eyebrow, heading, body, link all sit in column 2.
   Row 3 takes the slack so both links align on the same baseline. */
body.page-id-325 .ic-teasers .ic-tsr  > .elementor-widget:not(.ic-tsr__img),
body.page-id-325 .ic-teasers .ic-tsr  > .elementor-element:not(.ic-tsr__img) {
  grid-column: 2;
  width: 100%;
  max-width: none;
}
body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title {
  font-size: clamp(1.15rem, 1.35vw, 1.375rem);
  line-height: 1.22;
  max-width: 26ch;
}
body.page-id-325 .ic-teasers .ic-tsr__p p {
  font-size: var(--text-body-sm);
  line-height: 1.62;
  max-width: 50ch;
}
body.page-id-325 .ic-teasers .ic-tsr .ic-link { margin-top: 0; padding-top: 4px; align-self: end; }
body.page-id-325 .ic-teasers .ic-tsr .ic-link .elementor-button {
  font-size: var(--text-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Narrow desktop / tablet: two columns become one, thumbnail stays small */
@media (max-width: 900px) {
  body.page-id-325 .ic-teasers .ic-tsr  {
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px;
  }
  body.page-id-325 .ic-teasers .ic-tsr__img img { height: 92px; width: 92px; }
}
@media (max-width: 767px) {
  body.page-id-325 .ic-teasers .ic-tsr  {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    padding: 16px;
  }
  body.page-id-325 .ic-teasers .ic-tsr__img img { height: 76px; width: 76px; }
  body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title { font-size: 1.0625rem; max-width: none; }
  body.page-id-325 .ic-teasers .ic-tsr__p p { font-size: .9375rem; line-height: 1.55; }
}
/* ==========================================================================
   TEASER REDESIGN - editorial overlay cards.
   Previously two white strips with 104px thumbnails. Now the photograph fills
   each card with the copy set over a gradient, matching the hero language.
   Height is capped so the section does not grow.
   Overrides the thumbnail grid rules above.
   ========================================================================== */
body.page-id-325 .ic-teasers .ic-tsr {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 10;
  max-height: 330px;
  min-height: 260px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-media);
  background: var(--bark-800, #34281E);
  padding: clamp(20px, 2vw, 30px);
  gap: 6px;
  grid-template-columns: none;
  grid-template-rows: none;
}
body.page-id-325 .ic-teasers .ic-tsr:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22,38,31,.10) 0%, rgba(22,38,31,.52) 52%, rgba(22,38,31,.82) 100%);
  pointer-events: none;
}
body.page-id-325 .ic-teasers .ic-tsr__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  line-height: 0;
}
body.page-id-325 .ic-teasers .ic-tsr__img img {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  transition: transform 700ms var(--ease-standard, ease);
}
body.page-id-325 .ic-teasers .ic-tsr:hover .ic-tsr__img img { transform: scale(1.04); }

/* Copy sits above the gradient */
body.page-id-325 .ic-teasers .ic-tsr > .elementor-widget:not(.ic-tsr__img),
body.page-id-325 .ic-teasers .ic-tsr > .elementor-element:not(.ic-tsr__img) {
  position: relative;
  z-index: 2;
  grid-column: auto;
  width: 100%;
  max-width: none;
}
body.page-id-325 .ic-teasers .ic-tsr .ic-eyebrow p {
  color: rgba(253,251,248,.86);
  margin: 0 0 2px;
}
body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.016em;
  color: var(--shell-50, #fdfbf8);
  max-width: 22ch;
  margin: 0;
  text-shadow: 0 1px 24px rgba(22,38,31,.45);
}
body.page-id-325 .ic-teasers .ic-tsr__p p {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(253,251,248,.88);
  max-width: 46ch;
  margin: 0;
  text-shadow: 0 1px 20px rgba(22,38,31,.45);
}
body.page-id-325 .ic-teasers .ic-tsr .ic-link { margin-top: 10px; padding-top: 0; align-self: flex-start; }
body.page-id-325 .ic-teasers .ic-tsr .ic-link .elementor-button {
  color: var(--shell-50, #fdfbf8);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(253,251,248,.65);
  border-radius: 0;
  padding: 3px 1px;
  min-height: 0;
  font-size: var(--text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.page-id-325 .ic-teasers .ic-tsr .ic-link .elementor-button:hover { border-bottom-color: var(--shell-50, #fdfbf8); }
@media (max-width: 900px) {
  body.page-id-325 .ic-teasers .ic-tsr { aspect-ratio: 16 / 9; max-height: 280px; }
}
@media (max-width: 767px) {
  body.page-id-325 .ic-teasers .ic-tsr {
    aspect-ratio: 4 / 3;
    max-height: 260px;
    min-height: 220px;
    padding: 18px;
    grid-template-columns: none;
  }
  body.page-id-325 .ic-teasers .ic-tsr__img img { height: 100%; width: 100%; }
  body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title { font-size: 1.25rem; max-width: none; }
  body.page-id-325 .ic-teasers .ic-tsr__p p { font-size: .9375rem; max-width: none; }
}
/* ==========================================================================
   TEASER LEGIBILITY - stronger scrim, brighter type.
   The photographs are bright in the upper half, so the gradient now starts
   darker, deepens sooner, and the copy carries more weight and contrast.
   No size or spacing change: the section height is untouched.
   ========================================================================== */
body.page-id-325 .ic-teasers .ic-tsr:after {
  background:
    linear-gradient(180deg,
      rgba(18,30,25,.28) 0%,
      rgba(18,30,25,.48) 38%,
      rgba(18,30,25,.78) 72%,
      rgba(18,30,25,.92) 100%);
}
body.page-id-325 .ic-teasers .ic-tsr .ic-eyebrow p {
  color: #fff;
  opacity: .92;
  font-weight: var(--weight-medium, 500);
  letter-spacing: .16em;
  text-shadow: 0 1px 12px rgba(10,18,14,.7);
}
body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(10,18,14,.45), 0 2px 26px rgba(10,18,14,.6);
}
body.page-id-325 .ic-teasers .ic-tsr__p p {
  color: #fff;
  opacity: .94;
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(10,18,14,.45), 0 1px 20px rgba(10,18,14,.55);
}
body.page-id-325 .ic-teasers .ic-tsr .ic-link .elementor-button {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.85);
  text-shadow: 0 1px 10px rgba(10,18,14,.6);
}
/* A short solid foot behind the copy guarantees contrast on pale photographs */
body.page-id-325 .ic-teasers .ic-tsr:before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18,30,25,0) 0%, rgba(18,30,25,.55) 100%);
  pointer-events: none;
}
/* ==========================================================================
   TEASER v3 - EDITORIAL CARDS.
   Replaces the dark overlay banners above: no text sits on a photograph any
   more. Each card is an image area with a separate cream text panel beneath.
   Everything below overrides the overlay rules; delete this block to revert.
   ========================================================================== */

/* Reset the overlay treatment */
body.page-id-325 .ic-teasers .ic-tsr:before,
body.page-id-325 .ic-teasers .ic-tsr:after { content: none; display: none; }

body.page-id-325 .ic-teasers .ic-tsr {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  aspect-ratio: auto;
  min-height: 0;
  max-height: none;
  height: 100%;
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  transition: box-shadow 380ms var(--ease-standard, ease), border-color 380ms var(--ease-standard, ease);
}
body.page-id-325 .ic-teasers .ic-tsr:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}
/* Image area: a defined band at the top of the card, never behind the text */
body.page-id-325 .ic-teasers .ic-tsr__img {
  position: static;
  inset: auto;
  z-index: auto;
  order: -1;
  width: 100%;
  margin: 0;
  line-height: 0;
  overflow: hidden;
  flex: 0 0 auto;
}
body.page-id-325 .ic-teasers .ic-tsr__img img {
  width: 100%;
  height: 178px;
  max-height: 178px;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 700ms var(--ease-standard, ease);
}
body.page-id-325 .ic-teasers .ic-tsr:hover .ic-tsr__img img { transform: scale(1.03); }

/* Text panel: cream, dark ink, generous but compact padding */
body.page-id-325 .ic-teasers .ic-tsr > .elementor-widget:not(.ic-tsr__img),
body.page-id-325 .ic-teasers .ic-tsr > .elementor-element:not(.ic-tsr__img) {
  position: static;
  z-index: auto;
  width: 100%;
  max-width: none;
  padding-inline: clamp(20px, 1.8vw, 28px);
}
body.page-id-325 .ic-teasers .ic-tsr > .elementor-widget:not(.ic-tsr__img):first-of-type { padding-top: clamp(18px, 1.6vw, 24px); }
/* Type: ink on cream, no shadows, no low-contrast greys */
body.page-id-325 .ic-teasers .ic-tsr .ic-eyebrow p {
  color: var(--pink-700, #7f3961);
  opacity: 1;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium, 500);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: none;
  margin: 0 0 6px;
}
body.page-id-325 .ic-teasers .ic-tsr__h { padding-top: 0; }
body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.7vw, 1.625rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.016em;
  color: var(--text-primary);
  text-shadow: none;
  max-width: 24ch;
  margin: 0 0 8px;
}
body.page-id-325 .ic-teasers .ic-tsr__p p {
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 1;
  text-shadow: none;
  max-width: 46ch;
  margin: 0;
}
/* CTA pinned to the foot so both cards align */
body.page-id-325 .ic-teasers .ic-tsr .ic-link {
  margin-top: auto;
  padding-top: clamp(14px, 1.2vw, 18px);
  padding-bottom: clamp(18px, 1.6vw, 24px);
  align-self: flex-start;
}
body.page-id-325 .ic-teasers .ic-tsr .ic-link .elementor-button {
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--text-primary);
  border-radius: 0;
  padding: 3px 1px;
  min-height: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium, 500);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: none;
  transition: color 240ms var(--ease-standard, ease), border-color 240ms var(--ease-standard, ease);
}
body.page-id-325 .ic-teasers .ic-tsr .ic-link .elementor-button:hover {
  color: var(--pink-700, #7f3961);
  border-bottom-color: var(--pink-700, #7f3961);
}
/* Two columns on desktop, equal height, single column on mobile */
body.page-id-325 .ic-teasers .ic-tsrgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
  align-items: stretch;
}
@media (max-width: 900px) {
  body.page-id-325 .ic-teasers .ic-tsrgrid { grid-template-columns: 1fr; gap: 18px; }
  body.page-id-325 .ic-teasers .ic-tsr__img img { height: 190px; max-height: 190px; }
}
@media (max-width: 767px) {
  body.page-id-325 .ic-teasers .ic-tsr { grid-template-columns: none; }
  body.page-id-325 .ic-teasers .ic-tsr__img img { height: 168px; max-height: 168px; }
  body.page-id-325 .ic-teasers .ic-tsr > .elementor-widget:not(.ic-tsr__img),
  body.page-id-325 .ic-teasers .ic-tsr > .elementor-element:not(.ic-tsr__img) { padding-inline: 18px; }
  body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title { font-size: 1.1875rem; max-width: none; }
  body.page-id-325 .ic-teasers .ic-tsr__p p { font-size: .9375rem; max-width: none; }
}
/* ==========================================================================
   INTRO WIDTH HANDED BACK TO ELEMENTOR (Sep 2026)
   The Customizer capped the pull-quote at 30ch and the supporting line at
   56ch, so the text could not be widened from the editor no matter what the
   container was set to. Those caps are lifted here; the measure is now the
   container's width, which IS an Elementor control.
   Specificity (0,3,1) beats the Customizer's (0,2,0) without !important.
   To restore a fixed measure, set max-width on the widget in Elementor.
   ========================================================================== */
body.page-id-325 .ic-intro__quote .elementor-heading-title {
  max-width: none;
  margin-inline: auto;
}
body.page-id-325 .ic-intro__sub p {
  max-width: none;
  margin-inline: auto;
}
/* ==========================================================================
   INTRO SECTION - restructured Sep 2026.
   One display line, then the guests / owners detail in two columns beneath.
   Nicole's words are unchanged; the two connector phrases became the column
   labels. Measures are set here so long copy never runs the full 1600px.
   ========================================================================== */
body.page-id-325 .ic-intro { align-items: center; text-align: center; }
body.page-id-325 .ic-intro__quote .elementor-heading-title {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.16;
  letter-spacing: -.02em;
}
body.page-id-325 .ic-intro__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.6vw, 72px);
  width: 100%;
  max-width: 940px;
  margin: clamp(10px, 1.4vw, 20px) auto 0;
  text-align: left;
}
body.page-id-325 .ic-intro__col { display: flex; flex-direction: column; gap: 8px; }
body.page-id-325 .ic-intro__col--guests { border-top: 2px solid var(--ic-pink-accent, #FFC2E8); padding-top: 16px; }
body.page-id-325 .ic-intro__col--owners { border-top: 2px solid var(--ic-pink-accent, #FFC2E8); padding-top: 16px; }
body.page-id-325 .ic-intro__label p {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium, 500);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}
body.page-id-325 .ic-intro__body p {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 46ch;
  margin: 0;
}
body.page-id-325 .ic-intro__sub p {
  max-width: 52ch;
  margin-inline: auto;
  padding-top: clamp(8px, 1vw, 14px);
}

@media (max-width: 767px) {
  body.page-id-325 .ic-intro__quote .elementor-heading-title { max-width: 16ch; font-size: clamp(1.625rem, 7vw, 2rem); }
  body.page-id-325 .ic-intro__cols { grid-template-columns: 1fr; gap: 22px; }
  body.page-id-325 .ic-intro__body p { max-width: none; font-size: 1rem; }
}
/* ==========================================================================
   MOTION PASS - homepage only, CSS only, no JavaScript.
   Slow easings and small distances: movement should register as quality,
   not as animation. Every transition here is disabled under
   prefers-reduced-motion at the end of this block.
   ========================================================================== */

/* --- Buttons: lift and soften, no colour flash --- */
body.page-id-325 .ic-btn .elementor-button,
body.page-id-325 .ic-henq__btns .elementor-button,
body.page-id-325 .ic-hero__cta .elementor-button {
  transition: transform 420ms cubic-bezier(.22,.61,.36,1),
              box-shadow 420ms cubic-bezier(.22,.61,.36,1),
              background-color 320ms ease,
              border-color 320ms ease;
  will-change: transform;
}
body.page-id-325 .ic-btn .elementor-button:hover,
body.page-id-325 .ic-henq__btns .elementor-button:hover,
body.page-id-325 .ic-hero__cta .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(22, 38, 31, .45);
}
body.page-id-325 .ic-btn .elementor-button:active,
body.page-id-325 .ic-henq__btns .elementor-button:active { transform: translateY(0); }
/* --- Text links: underline draws in from the left --- */
body.page-id-325 .ic-link .elementor-button {
  position: relative;
  border-bottom-color: transparent !important;
  transition: color 300ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-325 .ic-link .elementor-button:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 460ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-325 .ic-link .elementor-button:hover:after {
  transform: scaleX(0);
  transform-origin: right center;
}

/* --- Hero bottom navigation: lift, brighten, pink rule on hover --- */
body.page-id-325 .ic-hero__tile {
  position: relative;
  transition: background-color 380ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-325 .ic-hero__tile:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ic-pink-accent, #FFC2E8);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-325 .ic-hero__tile:hover:after { transform: scaleX(1); }
body.page-id-325 .ic-hero__tile .elementor-icon,
body.page-id-325 .ic-hero__tile .elementor-icon-box-title {
  transition: opacity 380ms ease, transform 380ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-325 .ic-hero__tile:hover .elementor-icon { opacity: 1; transform: translateY(-2px); }
/* --- Villa cards: slow image zoom, card lift, CTA responds --- */
body.page-id-325 .ic-hc-results .post-wrapper {
  transition: transform 520ms cubic-bezier(.22,.61,.36,1),
              box-shadow 520ms cubic-bezier(.22,.61,.36,1),
              border-color 420ms ease;
}
body.page-id-325 .ic-hc-results .post-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -26px rgba(22, 38, 31, .5);
}
body.page-id-325 .ic-hc-results .post-image { overflow: hidden; }
body.page-id-325 .ic-hc-results .post-image img {
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-325 .ic-hc-results .post-wrapper:hover .post-image img { transform: scale(1.05); }

/* Collection grid: even columns, equal heights, no cropped overlaps */
body.page-id-325 .ic-hc-results .elementor-grid {
  align-items: stretch;
  gap: clamp(18px, 1.8vw, 28px);
}
body.page-id-325 .ic-hc-results .post-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
/* --- Service cards: calmer hierarchy, deliberate crop, matching motion --- */
body.page-id-325 .ic-teasers .ic-tsr {
  transition: transform 520ms cubic-bezier(.22,.61,.36,1),
              box-shadow 520ms cubic-bezier(.22,.61,.36,1),
              border-color 420ms ease;
}
body.page-id-325 .ic-teasers .ic-tsr:hover { transform: translateY(-4px); }
body.page-id-325 .ic-teasers .ic-tsr__img img {
  height: 190px;
  max-height: 190px;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-325 .ic-teasers .ic-tsr:hover .ic-tsr__img img { transform: scale(1.04); }

/* Hierarchy: eyebrow, then heading, then copy, then link at the foot */
body.page-id-325 .ic-teasers .ic-tsr .ic-eyebrow p { margin-bottom: 8px; }
body.page-id-325 .ic-teasers .ic-tsr__h .elementor-heading-title {
  font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  line-height: 1.18;
  margin-bottom: 10px;
  max-width: 22ch;
}
body.page-id-325 .ic-teasers .ic-tsr__p p {
  line-height: 1.6;
  max-width: 44ch;
}
body.page-id-325 .ic-teasers .ic-tsr .ic-link { padding-top: clamp(16px, 1.4vw, 20px); }
/* --- Enquiry band: readability and balance --- */
body.page-id-325 .ic-henq__p p {
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  line-height: 1.6;
  color: rgba(253, 251, 248, .88);
  max-width: 46ch;
  margin-inline: auto;
}
body.page-id-325 .ic-henq__btns > .e-con-inner,
body.page-id-325 .ic-henq__btns {
  gap: clamp(14px, 1.4vw, 22px);
}
body.page-id-325 .ic-henq__mail p {
  color: rgba(253, 251, 248, .78);
  font-size: var(--text-body-sm);
  letter-spacing: .04em;
  padding-top: 4px;
}
body.page-id-325 .ic-henq__mail a { color: inherit; border-bottom: 1px solid rgba(253,251,248,.4); }
body.page-id-325 .ic-btn--outline .elementor-button:hover {
  background: rgba(253, 251, 248, .12);
  border-color: rgba(253, 251, 248, .85);
}
/* --- Accessibility: honour the system setting ---------------------------
   Anyone who has asked their OS to reduce motion gets no transforms and no
   transitions. Hover still changes colour and shadow, so nothing becomes
   unclickable or loses its affordance. */
@media (prefers-reduced-motion: reduce) {
  body.page-id-325 .ic-btn .elementor-button,
  body.page-id-325 .ic-henq__btns .elementor-button,
  body.page-id-325 .ic-hero__cta .elementor-button,
  body.page-id-325 .ic-hc-results .post-wrapper,
  body.page-id-325 .ic-hc-results .post-image img,
  body.page-id-325 .ic-teasers .ic-tsr,
  body.page-id-325 .ic-teasers .ic-tsr__img img,
  body.page-id-325 .ic-hero__tile,
  body.page-id-325 .ic-hero__tile:after,
  body.page-id-325 .ic-hero__tile .elementor-icon,
  body.page-id-325 .ic-link .elementor-button:after {
    transition: none !important;
    animation: none !important;
  }
  body.page-id-325 .ic-btn .elementor-button:hover,
  body.page-id-325 .ic-henq__btns .elementor-button:hover,
  body.page-id-325 .ic-hero__cta .elementor-button:hover,
  body.page-id-325 .ic-hc-results .post-wrapper:hover,
  body.page-id-325 .ic-teasers .ic-tsr:hover,
  body.page-id-325 .ic-hero__tile:hover .elementor-icon {
    transform: none !important;
  }
  body.page-id-325 .ic-hc-results .post-wrapper:hover .post-image img,
  body.page-id-325 .ic-teasers .ic-tsr:hover .ic-tsr__img img { transform: none !important; }
  body.page-id-325 .ic-link .elementor-button:hover:after { transform: scaleX(1) !important; }
}
/* Breathing space between the image band and the eyebrow.
   The earlier :first-of-type rule never applied: all the widgets are divs, so
   :first-of-type matched the image, which the :not() then excluded. Targeting
   the eyebrow widget directly instead. */
body.page-id-325 .ic-teasers .ic-tsr .ic-eyebrow { padding-top: clamp(18px, 1.6vw, 24px); }
@media (max-width: 767px) {
  body.page-id-325 .ic-teasers .ic-tsr .ic-eyebrow { padding-top: 16px; }
}
/* ==========================================================================
   HERO LOADING FLASH FIX (Sep 2026)
   Cause: Elementor paints the container's background_image (WMH22_IV_23.jpg,
   the old pool still) as a CSS background immediately, while the <video> ships
   with an empty src and no poster - the script attaches the source after load.
   So the wrong photograph showed first, then jumped to drone footage.

   Desktop: the still is suppressed and the first paint is the deep palm green
   that sits under the 44% overlay anyway, so the video fades in from a colour
   that already belongs to the design rather than from a different photograph.

   Mobile: untouched. Elementor marks the video container .elementor-hidden-mobile,
   so phones never load the video and still need the photo as the hero image.
   ========================================================================== */
@media (min-width: 768px) {
  body.page-id-325 .elementor-325 .ic-hero.elementor-element {
    background-image: none;
    background-color: var(--bark-800, #34281E);
  }
}
/* --- Compass watermark and the video ------------------------------------
   .ic-hero__rose is a 660px brand rosette at opacity .16, positioned
   absolutely with z-index 0. Elementor's video container is also z-index 0
   and comes FIRST in the DOM, so the rosette paints on top of the footage,
   and it is at its most obvious in the moment before the video starts.

   It was designed as a watermark over a still photograph. Over moving drone
   footage it reads as an artefact, so it is retired where the video plays and
   kept on mobile, where Elementor hides the video and the hero is a photo. */
@media (min-width: 768px) {
  body.page-id-325 .ic-hero .ic-hero__rose { display: none; }
  body.page-id-325 .ic-hero .elementor-background-video-container { z-index: 0; }
}
/* The hero's Enquire link is a text link, not a button, but the Customizer
   sets min-height:50px on every button in .ic-hero__cta for the solid pink
   one. That stretched the link's box, so its underline drew ~30px below the
   word. Height released here so the rule hugs the text. */
body.page-id-325 .ic-hero__cta .ic-hero__link .elementor-button {
  min-height: 0;
  height: auto;
  width: auto;
  padding: 2px 2px 3px;
  line-height: 1.3;
}
@media (max-width: 767px) {
  body.page-id-325 .ic-hero__cta .ic-hero__link .elementor-button {
    width: auto;
    margin-inline: auto;
  }
}
/* ==========================================================================
   COMPASS WATERMARK - fades in once the video is actually playing.
   Previously it painted with the page, before the video had a frame, which
   is what read as a flash. It is now hidden by default on desktop and
   revealed only when .ic-hero-video-ready is set by ic-hero-video.php.
   Layering: video 0, watermark 1, copy and service row 2.
   ========================================================================== */
@media (min-width: 768px) {
  body.page-id-325 .ic-hero .ic-hero__rose {
    display: block;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 650ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 650ms;
  }
  body.page-id-325 .ic-hero.ic-hero-video-ready .ic-hero__rose {
    opacity: .10;
    visibility: visible;
    transition: opacity 650ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
  }
  /* If the video never reports playing - blocked autoplay, slow link, a
     browser that refuses - the watermark simply stays hidden and the hero
     still reads correctly. */
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-325 .ic-hero .ic-hero__rose,
  body.page-id-325 .ic-hero.ic-hero-video-ready .ic-hero__rose {
    transition: none !important;
  }
}
/* ==========================================================================
   SERVICE ROW - single consolidated rule (Sep 2026)
   ---------------------------------------------------------------------
   History: 18 separate rules had accumulated on this element across seven
   passes - flat tints, three different gradients, a backdrop blur, borders
   and full-height dividers, several contradicting each other. Every one of
   them has been removed and replaced by what follows.

   Approach: NO overlay of any kind. Any translucent panel over moving
   footage will show its own edges and shift with the frame - that is what
   produced every line and patch reported so far. Legibility instead comes
   from shadows on the text and icons themselves, which have no edges and
   cannot band.
   ========================================================================== */
body.page-id-325 .ic-hero__nav {
  position: relative;
  z-index: 2;
  background: none;
  border-top: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.page-id-325 .ic-hero__nav:before { content: none; }/* Labels and icons carry their own legibility */
body.page-id-325 .ic-hero__nav .ic-hero__tile {
  background: none;
  border-left: 0;
  position: relative;
  transition: background-color 320ms cubic-bezier(.22,.61,.36,1);
}
body.page-id-325 .ic-hero__nav .ic-hero__tile:hover { background-color: rgba(253,251,248,.10); }
body.page-id-325 .ic-hero__nav .elementor-icon-box-title,
body.page-id-325 .ic-hero__nav .elementor-icon-box-title a {
  color: var(--shell-50, #fdfbf8);
  text-shadow: 0 1px 2px rgba(12,20,16,.75), 0 2px 14px rgba(12,20,16,.65);
}
body.page-id-325 .ic-hero__nav .elementor-icon {
  filter: drop-shadow(0 1px 3px rgba(12,20,16,.7));
}
/* Short hairline separators, clear of the fade above */
body.page-id-325 .ic-hero__nav .ic-hero__tile + .ic-hero__tile:before {
  content: "";
  position: absolute;
  left: 0;
  top: 26%;
  bottom: 26%;
  width: 1px;
  background: rgba(253,251,248,.16);
}
@media (max-width: 767px) {
  body.page-id-325 .ic-hero__nav { grid-template-columns: repeat(3, 1fr); }
  body.page-id-325 .ic-hero__nav .ic-hero__tile { padding: 12px 6px; }
  body.page-id-325 .ic-hero__nav .elementor-icon-box-title { font-size: 10px; letter-spacing: .06em; }
}
/* Villa card specs: bedrooms then bathrooms, number first then icon.
   Matches the Villas listing exactly - same two line icons, same deeper pink
   (#C25E9B) which stays legible at 19px on a white card. */
body.page-id-325 .ic-hc-results .elementor-repeater-item-h4,
body.page-id-325 .ic-hc-results .elementor-repeater-item-h4b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
}
body.page-id-325 .ic-hc-results .elementor-repeater-item-h4 { margin-right: 16px; }
body.page-id-325 .ic-hc-results .elementor-repeater-item-h4:after,
body.page-id-325 .ic-hc-results .elementor-repeater-item-h4b:after {
  content: "";
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
body.page-id-325 .ic-hc-results .elementor-repeater-item-h4:after { background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23C25E9B%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 18v-6a2 2 0 0 1 2-2h11a3 3 0 0 1 3 3v5%22/%3E%3Cpath d=%22M3 14h18%22/%3E%3Cpath d=%22M7 10V7h5v3%22/%3E%3Cpath d=%22M3 18v2%22/%3E%3Cpath d=%22M21 18v2%22/%3E%3C/svg%3E'); }
body.page-id-325 .ic-hc-results .elementor-repeater-item-h4b:after { background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23C25E9B%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-3z%22/%3E%3Cpath d=%22M6 12V6a2 2 0 0 1 3.5-1.3%22/%3E%3Cpath d=%22M8.5 5.5h2%22/%3E%3Cpath d=%22M7 19l-1 2%22/%3E%3Cpath d=%22M17 19l1 2%22/%3E%3C/svg%3E'); }

/* Villa cards: starting nightly rate replaces the amenity chips. The value
   comes from villa_rate_from, so it always matches the villa's own rates. */
body.page-id-325 .ic-hc-results .elementor-repeater-item-h5r {
  display: block;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-primary);
  text-align: left;
}
/* The widget wraps the before/after words in .pseudo spans. They were a
   lighter colour and smaller size, which split the line into three tones.
   The whole line now reads as one. */
body.page-id-325 .ic-hc-results .elementor-repeater-item-h5r .pseudo {
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
}
/* The trailing space in ' per night' collapses in HTML, so it is restored
   here rather than by adding a non-breaking space to the field. */
body.page-id-325 .ic-hc-results .elementor-repeater-item-h5r .pseudo:last-child { margin-left: .3em; }
/* --- VILLA COLLECTION: full page width ------------------------------------
   The section was capped at container-wide (1560px) and centred, so on a
   large screen the four cards sat in a block with cream either side. The cap
   is lifted and the gutter reduced, so the row spans the page. */
body.page-id-325 .ic-hc {
  max-width: none !important;
  margin-inline: 0 !important;
  padding-left: clamp(20px, 3vw, 48px) !important;
  padding-right: clamp(20px, 3vw, 48px) !important;
}
body.page-id-325 .ic-hc__head { max-width: none; width: 100%; }
body.page-id-325 .ic-hc-results { width: 100%; max-width: none; }
body.page-id-325 .ic-hc-results .post-container { max-width: none; width: 100%; }
/* --- COLLECTION HEADING ---------------------------------------------------
   The Customizer caps this heading at 20ch, which forced "chosen" onto a
   second line. The cap is lifted and wrapping prevented, and the header row
   sits closer to the cards above it. */
body.page-id-325 .ic-hc__h .elementor-heading-title {
  max-width: none;
  white-space: nowrap;
}
body.page-id-325 .ic-hc__head {
  align-items: center;
  margin-bottom: clamp(16px, 1.8vw, 26px);
}
body.page-id-325 .ic-hc { padding-top: clamp(28px, 3vw, 44px) !important; }
@media (max-width: 1100px) {
  body.page-id-325 .ic-hc__h .elementor-heading-title { white-space: normal; }
}
/* The PNG still sets the wrapper's height, so it stays in place but unseen */

/* --- HERO SLOGAN ----------------------------------------------------------
   "Navigating Your Perfect Holiday" is 31 characters against the 20 of
   "Barbados, privately", so the type comes down a step and the measure opens
   from 16ch to 22ch. That lets it break as two balanced lines - "Navigating
   Your" / "Perfect Holiday" - rather than three uneven ones. */
body.page-id-325 .ic-hero__h1 .elementor-heading-title {
  font-style: italic;
  /* Playfair italic sets a little wider than the roman, so the size comes
     down a touch and the tracking opens very slightly to keep it even. */
  font-size: clamp(2.125rem, 4.7vw, 4.25rem);
  letter-spacing: -.015em;
  line-height: 1.08;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
@media (max-width: 767px) {
  body.page-id-325 .ic-hero__h1 .elementor-heading-title {
    font-style: italic;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    max-width: 18ch;
    line-height: 1.12;
  }
}
/* --- ENQUIRY CTA: gradient + pink compass (consolidated) -------------------
   One definition, replacing the rules that had accumulated across earlier
   passes. Background only - no padding, height, position or layout is
   touched, so the section keeps exactly its current size. */
body.page-id-325 .ic-henq {
  background-image:
    radial-gradient(120% 90% at 78% 18%, rgba(255,194,232,.10) 0%, rgba(255,194,232,0) 55%),
    radial-gradient(90% 80% at 12% 88%, rgba(255,194,232,.06) 0%, rgba(255,194,232,0) 60%),
    linear-gradient(150deg, #302519 0%, #281F17 38%, #1E1711 72%, #17120D 100%) !important;
  background-color: #281F17 !important;
}
/* Compass tinted with a CSS mask - the PNG is white, so a mask reproduces
   the exact brand pink where a filter chain only approximates it. The wrapper
   keeps its own absolute positioning from the Customizer. */
body.page-id-325 .ic-henq__rose {
  background-color: #FFC2E8;
  -webkit-mask-image: url('https://island-compass.com/wp-content/uploads/2026/08/watermark-white-1024x1024.png');
  mask-image: url('https://island-compass.com/wp-content/uploads/2026/08/watermark-white-1024x1024.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: .22 !important;
}
body.page-id-325 .ic-henq__rose img { opacity: 0; }