/* ==========================================================================
   Island Compass - shared visual system.
   Printed inline at wp_head 103, after the Customizer block (101) and the
   e-con-inner compatibility layer (102), so it settles ties without
   !important. Everything is namespaced to .ic-* components, the WPForms
   container, or the header row. Remove this file to revert.
   ========================================================================== */

/* --- 1. HEADER -----------------------------------------------------------
   Blocksy paints the header row with palette colour 8 (#FFC2E8). The home
   page hides that behind an overlay gradient; interior pages showed it raw,
   which is the bright pink bar. Interior pages now use the same cream glass
   the home page already uses once scrolled, so the two are consistent.
   Pink survives as an accent on the Enquire button only. */
body:not(.ic-overlay-header) header.ct-header [data-row="middle"] {
  background: rgba(253, 251, 248, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--ic-hairline, rgba(34,30,26,.08));
}
body:not(.ic-overlay-header) header.ct-header .header-menu > li > a,
body:not(.ic-overlay-header) header.ct-header .ct-header-text a,
body:not(.ic-overlay-header) header.ct-header .ct-toggle {
  color: var(--text-primary, #221E1A);
}
body:not(.ic-overlay-header) header.ct-header .header-menu > li > a:hover {
  color: var(--pink-700, #7f3961);
}
/* --- 2. TYPOGRAPHY -------------------------------------------------------
   Body copy across the .ic-* components was 15px in a light grey. Raised to
   17px at a comfortable line height in the secondary ink. Eyebrows, captions
   and notes are excluded so small labels stay small. */
/* Specificity note (Aug 2026 editability audit): the three chained :not()
   clauses scored (0,6,2), which outranked Elementor's own per-widget rules at
   (0,4,0) and meant colour and size set in the editor were ignored. Combining
   them into a single :not(a,b,c) keeps the identical exclusions but scores
   (0,3,2), so Elementor controls now win while theme defaults still lose. */
[class*="ic-"] .elementor-widget-text-editor:not([class*="eyebrow"],[class*="__note"],[class*="crumb"]) p {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
[class*="ic-"] .elementor-widget-text-editor[class*="eyebrow"] p {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
/* Lists inside components read at the same size as body copy */
[class*="ic-"] .elementor-widget-text-editor li {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* Heading hierarchy: display faces already come from the kit, this only
   firms up the steps between section head, sub-head and card title. */
[class*="ic-"] .elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.12;
  letter-spacing: -.02em;
}
[class*="ic-"] .elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.2;
  letter-spacing: -.014em;
}

/* --- 3. CONTENT WIDTH ----------------------------------------------------
   These sections are full-bleed on purpose (backgrounds run edge to edge),
   so the max-width goes on their CHILDREN, never on the section itself.
   This restores the centring that was lost with the .e-con-inner wrappers
   without collapsing any background band. */
body .ic-note > *,
body .ic-svcsec > *,
body .ic-howsec > *,
body .ic-plansec > *,
body .ic-wasec > *,
body .ic-scopesec > *,
body .ic-repsec > *,
body .ic-waitsec > *,
body .ic-featsec > *,
body .ic-helpsec > *,
body .ic-closesec > *,
body .ic-nextsec > *,
body .ic-artsec > *,
body .ic-newssec > *,
body .ic-catsec > *,
body .ic-chansec > *,
body .ic-cformsec > *,
body .ic-tysec > *,
body .ic-vctasec > * {
  width: 100%;
  max-width: var(--container-max, 1320px);
  margin-inline: auto;
}
/* Narrow, centred statement blocks keep a reading measure */
body .ic-note__inner,
body .ic-sec__lede,
body .ic-ph__copy { max-width: var(--container-text, 880px); }
body .ic-pagehero > * { width: 100%; max-width: var(--container-max, 1320px); margin-inline: auto; }

/* --- 4. FORMS ------------------------------------------------------------
   One treatment for every WPForms form on the site: Contact, Concierge,
   Rental Assessment and the villa enquiry form. Notification settings,
   fields and routing are untouched - this is presentation only. */
body .wpforms-container .wpforms-field-label {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--weight-medium, 500);
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.35;
}
body .wpforms-container .wpforms-field-sublabel,
body .wpforms-container .wpforms-field-description {
  font-size: .875rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}
body .wpforms-container .wpforms-field { padding: 10px 0; }
body .wpforms-container input[type="text"],
body .wpforms-container input[type="email"],
body .wpforms-container input[type="tel"],
body .wpforms-container input[type="number"],
body .wpforms-container input[type="date"],
body .wpforms-container select,
body .wpforms-container textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control, 4px);
  padding: 13px 15px;
  width: 100%;
  box-shadow: none;
  transition: border-color 200ms var(--ease-standard, ease);
}
body .wpforms-container input:focus,
body .wpforms-container select:focus,
body .wpforms-container textarea:focus {
  outline: none;
  border-color: var(--pink-700, #7f3961);
  box-shadow: 0 0 0 3px rgba(127,57,97,.10);
}
body .wpforms-container textarea { min-height: 130px; resize: vertical; }
body .wpforms-container .wpforms-field-checkbox li label,
body .wpforms-container .wpforms-field-radio li label {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
body .wpforms-container .wpforms-required-label { color: var(--pink-700, #7f3961); }
body .wpforms-container button[type="submit"] {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium, 500);
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 54px;
  padding: 0 34px;
  border: 0;
  border-radius: var(--radius-control, 4px);
  background: var(--pink-700, #7f3961);
  color: var(--shell-50, #fdfbf8);
  cursor: pointer;
  transition: background 220ms var(--ease-standard, ease);
}
body .wpforms-container button[type="submit"]:hover { background: var(--pink-600, #a24a7c); }
body .wpforms-confirmation-container-full {
  background: var(--surface-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card, 4px);
  padding: var(--space-5);
  font-size: 1.0625rem;
  color: var(--text-secondary);
}
/* --- 5. CARDS ------------------------------------------------------------
   One card language for service cards, contact cards, process cards, journal
   cards and both villa card grids. */
body .ic-sc,
body .ic-ch,
body .ic-art,
body .ic-pp,
body .ic-scope,
body .ic-wait,
body .ic-testi {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card, 4px);
  transition: box-shadow 320ms var(--ease-standard, ease), border-color 320ms var(--ease-standard, ease);
}
body .ic-sc:hover,
body .ic-ch:hover,
body .ic-art:hover,
body .ic-pp:hover,
body .ic-scope:hover,
body .ic-wait:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}
/* Card headings step down from section headings but stay legible */
body .ic-sc .elementor-heading-title,
body .ic-ch .elementor-heading-title,
body .ic-pp .elementor-heading-title,
body .ic-scope .elementor-heading-title,
body .ic-wait .elementor-heading-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  font-weight: var(--weight-regular);
  line-height: 1.2;
}
/* Filter panel on the Villas listing: same card language, no plugin default.
   The widget's behaviour, query and markup are untouched. */
body .ic-vl-filters .bpfwe-filter-container,
body .ic-vl-filters form {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card, 4px);
  padding: clamp(14px, 1.4vw, 20px);
}
body .ic-vl-filters label,
body .ic-vl-search label { font-size: 1rem; color: var(--text-secondary); }
body .ic-vl-search input[type="text"],
body .ic-vl-search input[type="search"] {
  border-radius: var(--radius-control, 4px);
  padding: 12px 15px;
  font-size: 1rem;
}

/* Buttons: one shape everywhere */
body .ic-btn .elementor-button,
body .ic-ph__btns .elementor-button,
body .ic-henq__btns .elementor-button {
  border-radius: var(--radius-control, 4px);
  font-weight: var(--weight-medium, 500);
}
/* --- 7. SEARCH RESULTS -----------------------------------------------------
   Villas were rendering as blog cards: pink panel, amenity terms as
   categories, long excerpt, author and date. Villa hits now read as property
   results. Blog posts in search keep the theme's normal card. */
.search .entry-card.type-villa {
  background-color: var(--surface-card, #fff);
  border: 1px solid var(--border-hairline);
  box-shadow: none;
}
.search .entry-card.type-villa .entry-meta { display: none; }
.search .entry-card.type-villa .entry-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1.2;
}
.search .entry-card.type-villa .entry-title a { color: var(--text-primary); text-decoration: none; }
.search .entry-card.type-villa .entry-excerpt p {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
/* Spec line: location, then bed and bath with pink icons */
.ic-result-loc {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.ic-spec-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
}
.ic-spec-icon {
  flex: 0 0 auto;
  vertical-align: -2px;
  margin-right: 2px;
}
.ic-spec-sep { color: var(--text-tertiary); margin: 0 4px; }
/* --- 8. PINK ACCENTS ------------------------------------------------------
   Brand pink #FFC2E8 on icons and small decorative marks only. No pink
   backgrounds, no pink body text. Contrast note is in the handover. */
:root { --ic-pink-accent: #FFC2E8; }

[class*="ic-"] .elementor-widget-icon-box .elementor-icon,
[class*="ic-"] .elementor-widget-icon .elementor-icon {
  color: var(--ic-pink-accent);
  fill: var(--ic-pink-accent);
}
[class*="ic-"] .elementor-widget-icon-box .elementor-icon svg,
[class*="ic-"] .elementor-widget-icon .elementor-icon svg {
  fill: var(--ic-pink-accent);
}
[class*="ic-"] .elementor-icon-list-icon i,
[class*="ic-"] .elementor-icon-list-icon svg {
  color: var(--ic-pink-accent);
  fill: var(--ic-pink-accent);
}
/* --- 9. PINK LOGO + MENU HOVER -------------------------------------------
   The wordmark is now the pink SVG (#FFC2E8). That reads beautifully over
   the dark hero, but on the cream glass header it is about 1.3:1 against
   the background - effectively invisible. So the light-header states swap
   to a deeper pink of the same wordmark (#A24A7C) via content:url().
   Both files are the identical artwork, only the fill differs. */
body:not(.ic-overlay-header) .ct-header .site-logo-container img,
body.ic-scrolled .ct-header .site-logo-container img {
  content: url('https://island-compass.com/wp-content/uploads/2026/08/wordmark-pink-deep-v2.svg');
}

/* Menu hover: brand pink on the dark hero header, a deeper pink on the cream
   glass header where #FFC2E8 would not be legible. Same hue family either way. */
body .ct-header .header-menu > li > a,
body .ct-header .ct-header-text a,
body .ct-header [data-id="text"] a {
  transition: color 300ms cubic-bezier(.22,.61,.36,1);
}
body.ic-overlay-header:not(.ic-scrolled) .ct-header .header-menu > li > a:hover,
body.ic-overlay-header:not(.ic-scrolled) .ct-header .header-menu > li.current-menu-item > a,
body.ic-overlay-header:not(.ic-scrolled) .ct-header .ct-header-text a:hover {
  color: var(--ic-pink-accent, #FFC2E8);
}
body:not(.ic-overlay-header) .ct-header .header-menu > li > a:hover,
body:not(.ic-overlay-header) .ct-header .header-menu > li.current-menu-item > a,
body:not(.ic-overlay-header) .ct-header .ct-header-text a:hover,
body.ic-scrolled .ct-header .header-menu > li > a:hover,
body.ic-scrolled .ct-header .ct-header-text a:hover {
  color: #A24A7C;
}
/* --- 10. HEADER HOVER STATES --------------------------------------------
   Menu links, the search and WhatsApp items and the Enquire button all take
   the brand pink on hover. Over the hero the pink is #FFC2E8; on the cream
   glass header that tone is roughly 1.3:1 against the background, so those
   states use #A24A7C - the same hue, dark enough to read. */
body .ct-header .header-menu > li > a,
body .ct-header .header-menu > li > a > span,
body .ct-header [data-id="search"] a,
body .ct-header [data-id="search"] svg,
body .ct-header .ct-header-text a,
body .ct-header .ct-header-text svg {
  transition: color 320ms cubic-bezier(.22,.61,.36,1),
              fill 320ms cubic-bezier(.22,.61,.36,1),
              opacity 320ms ease;
}

/* Over the hero video */
body.ic-overlay-header:not(.ic-scrolled) .ct-header .header-menu > li > a:hover,
body.ic-overlay-header:not(.ic-scrolled) .ct-header .header-menu > li > a:focus-visible,
body.ic-overlay-header:not(.ic-scrolled) .ct-header .ct-header-text a:hover,
body.ic-overlay-header:not(.ic-scrolled) .ct-header [data-id="search"] a:hover {
  color: #FFC2E8;
}
body.ic-overlay-header:not(.ic-scrolled) .ct-header [data-id="search"] a:hover svg,
body.ic-overlay-header:not(.ic-scrolled) .ct-header .ct-header-text a:hover svg {
  fill: #FFC2E8;
  color: #FFC2E8;
}/* Cream glass header (scrolled, and every interior page) */
body:not(.ic-overlay-header) .ct-header .header-menu > li > a:hover,
body:not(.ic-overlay-header) .ct-header .ct-header-text a:hover,
body:not(.ic-overlay-header) .ct-header [data-id="search"] a:hover,
body.ic-scrolled .ct-header .header-menu > li > a:hover,
body.ic-scrolled .ct-header .ct-header-text a:hover,
body.ic-scrolled .ct-header [data-id="search"] a:hover {
  color: #A24A7C;
}
body:not(.ic-overlay-header) .ct-header [data-id="search"] a:hover svg,
body:not(.ic-overlay-header) .ct-header .ct-header-text a:hover svg,
body.ic-scrolled .ct-header [data-id="search"] a:hover svg,
body.ic-scrolled .ct-header .ct-header-text a:hover svg {
  fill: #A24A7C;
  color: #A24A7C;
}

/* Current page: a soft pink underline rather than a colour block */
body .ct-header .header-menu > li.current-menu-item > a {
  position: relative;
}
body .ct-header .header-menu > li.current-menu-item > a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #FFC2E8;
  opacity: .9;
}
body:not(.ic-overlay-header) .ct-header .header-menu > li.current-menu-item > a:after,
body.ic-scrolled .ct-header .header-menu > li.current-menu-item > a:after {
  background: #A24A7C;
  opacity: .75;
}/* Enquire button: fills with brand pink on hover, dark ink text for contrast */
body .ct-header .ct-header-text .ic-btn a,
body .ct-header [data-id="button"] .ct-button,
body .ct-header .ct-button {
  transition: background-color 320ms cubic-bezier(.22,.61,.36,1),
              border-color 320ms cubic-bezier(.22,.61,.36,1),
              color 320ms cubic-bezier(.22,.61,.36,1),
              transform 320ms cubic-bezier(.22,.61,.36,1);
}
body .ct-header .ct-button:hover,
body .ct-header [data-id="button"] .ct-button:hover {
  background-color: #FFC2E8;
  border-color: #FFC2E8;
  color: #221E1A;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  body .ct-header .ct-button:hover,
  body .ct-header [data-id="button"] .ct-button:hover { transform: none; }
}
/* --- 11. HOMEPAGE HEADER: read as glass over the hero, not a solid bar ----
   Two things were making the bar look detached from the video:
   1. Blocksy sets the header row 120px tall and fills it with palette
      colour 8 (#FFC2E8). The overlay gradient covers that, but the row is
      tall enough to read as a band in its own right.
   2. The scrolled state was 82% cream with a 14px blur - opaque enough to
      look like a separate bar rather than glass over the footage.
   Both are eased here, on the home page only. */
body.page-id-325 header.ct-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
}
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,.46), rgba(22,38,31,.10) 70%, rgba(22,38,31,0));
  border-bottom-color: rgba(253,251,248,.14);
  --height: 92px;
}
body.page-id-325.ic-scrolled header.ct-header [data-row="middle"] {
  background: rgba(253,251,248,.62);
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  backdrop-filter: saturate(1.5) blur(18px);
  --height: 78px;
}
/* --- 12. FORCE THE HOMEPAGE HEADER TO OVERLAY ----------------------------
   The header was still occupying layout space above the hero. Every rule I
   could read said it should be fixed, so something in the computed cascade
   is winning that is not visible from the served CSS. These declarations are
   deliberately !important - the only ones in this file - to settle it. If the
   cause is later identified they can come straight back out. */
body.page-id-325 header#header.ct-header,
body.page-id-325 header.ct-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 200 !important;
}
body.page-id-325 #main,
body.page-id-325 main.site-main,
body.page-id-325 .site-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page-id-325 .ic-hero {
  margin-top: 0 !important;
}
/* --- 13. FOOTER: pink on hover, per element --------------------------------
   Dark green ground, so the light brand pink reads cleanly here. Each link,
   the email, phone, Privacy Policy and each social icon respond only where
   the pointer actually is. */
footer.ct-footer a,
footer.ct-footer .widget-menu li > a,
footer.ct-footer .ic-foot-contact a,
footer.ct-footer .ic-foot-social a,
footer.ct-footer .ic-foot-social svg {
  transition: color 300ms cubic-bezier(.22,.61,.36,1),
              border-color 300ms cubic-bezier(.22,.61,.36,1),
              stroke 300ms cubic-bezier(.22,.61,.36,1),
              background-color 300ms cubic-bezier(.22,.61,.36,1),
              transform 300ms cubic-bezier(.22,.61,.36,1);
}
footer.ct-footer a:hover,
footer.ct-footer .widget-menu li > a:hover,
footer.ct-footer .ic-foot-contact a:hover,
footer.ct-footer .ic-foot-legal:hover {
  color: #FFC2E8;
}/* Social icons: the icon is drawn with stroke="currentColor", so colouring
   the link recolours the glyph. The bordered square follows it. */
footer.ct-footer .ic-foot-social a:hover {
  color: #FFC2E8;
  border-color: #FFC2E8;
  background-color: rgba(255, 194, 232, .10);
  transform: translateY(-2px);
}
footer.ct-footer .ic-foot-social a:hover svg { stroke: #FFC2E8; }

/* Footer wordmark: subtle lift and full opacity on hover */
footer.ct-footer .ic-foot-logo {
  transition: opacity 300ms cubic-bezier(.22,.61,.36,1), transform 300ms cubic-bezier(.22,.61,.36,1);
}
footer.ct-footer .ic-foot-brand:hover .ic-foot-logo {
  opacity: 1;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  footer.ct-footer .ic-foot-social a:hover,
  footer.ct-footer .ic-foot-brand:hover .ic-foot-logo { transform: none; }
}
/* --- 14. HERO SERVICE ROW: neutralise the Customizer overlay --------------
   The Customizer sets a border-top and a gradient background on
   .ic-hero__nav, and a full-height border-left on each tile. It loads after
   home.css, so those win there. This block runs after the Customizer and
   clears them, leaving the consolidated treatment in home.css to stand:
   no panel over the video, legibility from text and icon shadows. */
body.page-id-325 .ic-hero__nav {
  background: none;
  border-top: 0;
}
body.page-id-325 .ic-hero__nav:before { content: none; }
body.page-id-325 .ic-hero__tile {
  border-left: 0;
  border-top: 0;
  background: none;
}
body.page-id-325 .ic-hero__tile:hover { background: rgba(253,251,248,.10); }
/* --- HOME PAGE LOGO SIZE --------------------------------------------------
   Home only. The Customizer sets 46px over the hero and 40px scrolled, at
   (0,4,1); these carry page-id-325 as well, so they out-specify it without
   !important and leave every other page untouched. */
body.page-id-325.ic-overlay-header:not(.ic-scrolled) .ct-header .site-logo-container img {
  height: 60px;
}
body.page-id-325.ic-scrolled .ct-header .site-logo-container img {
  height: 50px;
}
@media (max-width: 767px) {
  body.page-id-325 .ct-header .site-logo-container img,
  body.page-id-325.ic-overlay-header:not(.ic-scrolled) .ct-header .site-logo-container img {
    height: 42px;
  }
}
/* --- HEADER ALIGNMENT ----------------------------------------------------
   The header row sat in a much wider container than the page content, so
   the logo and menu began well left of every section below it. Both are
   now anchored to the same 1320px measure so the logo lines up with the
   content edge. Global, because there is one header for the whole site. */
header.ct-header [data-row="middle"] > .ct-container,
header.ct-header [data-row="middle"] > .ct-container-fluid {
  max-width: var(--container-max, 1320px);
  margin-inline: auto;
  width: 100%;
}

/* --- WHATSAPP BRAND ICON --------------------------------------------------
   Elementor renders solid and regular Font Awesome icons as inline SVG, but
   brand icons fall back to the webfont - and the brands stylesheet is not
   enqueued here, so <i class="fab fa-whatsapp"> drew nothing. The official
   mark is painted in as a background image instead, in brand pink. */
i.fab.fa-whatsapp {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 448 512%22 fill=%22%23FFC2E8%22%3E%3Cpath d=%22M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.ic-ch__icon i.fab.fa-whatsapp { width: 22px; height: 22px; }

/* --- HOMEPAGE HEADER HEIGHT ----------------------------------------------
   The homepage logo was raised to 60px but the header row keeps a fixed
   --header-height of 92px, so the taller logo was clipped along its top
   edge. The row is given the height it needs, and the logo is allowed to
   sit inside it rather than overflow. */
body.page-id-325.ic-overlay-header:not(.ic-scrolled) #header .ct-header [data-row="middle"] { --header-height: 108px; }
body.page-id-325.ic-scrolled #header .ct-header [data-row="middle"] { --header-height: 88px; }
body.page-id-325 .ct-header .site-logo-container, body.page-id-325 .ct-header .site-logo-container .logo-image-wrapper { display: flex; align-items: center; overflow: visible; max-height: none; }
body.page-id-325 .ct-header .site-logo-container img { object-fit: contain; }
@media (max-width: 1119px) {
  body.page-id-325.ic-overlay-header:not(.ic-scrolled) #header .ct-header [data-row="middle"],
  body.page-id-325.ic-scrolled #header .ct-header [data-row="middle"] { --header-height: 72px; }
}

/* Blocksy caps the logo box with --logo-max-height: 40px on
   [data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container.
   The 60px image was overflowing that box and being clipped along the top.
   The variable itself is raised here so the box grows with the logo. */
body.page-id-325 .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 60px; }
body.page-id-325.ic-scrolled .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 50px; }
@media (max-width: 767px) {
  body.page-id-325 .ct-header [data-id="logo"] .site-logo-container,
  body.page-id-325.ic-scrolled .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 42px; }
}

/* --- ADMIN BAR OFFSET -----------------------------------------------------
   The header is position:fixed at top:0, and nothing offset it for the
   WordPress admin bar, which is itself fixed over the top 32px of the
   viewport. Logged in, the admin bar sat on top of the header and clipped
   the logo. Logged-out visitors were never affected. WordPress switches the
   bar to 46px and static positioning below 783px, so that is matched. */
body.admin-bar header#header.ct-header,
body.admin-bar header.ct-header { top: 32px !important; }
body.admin-bar #header .ct-header [data-row="middle"] { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header#header.ct-header,
  body.admin-bar header.ct-header { top: 46px !important; }
  body.admin-bar #header .ct-header [data-row="middle"] { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar header#header.ct-header,
  body.admin-bar header.ct-header { top: 0 !important; }
  body.admin-bar #header .ct-header [data-row="middle"] { top: 0; }
}