/* Thara Tropical — page styles.
   Read top to bottom: base → header → building blocks → one block per section → footer.
   Colours, fonts and spacing come from tokens.css. No inline styles are allowed by the site's CSP, so everything lives here. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); scroll-padding-bottom: calc(var(--bar-h) + 1rem); }
body { margin: 0; background: var(--cream); color: var(--charcoal); font: 300 var(--fs-body)/1.7 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 3px; }
.section--moss :focus-visible, .section--charcoal :focus-visible, .book-bar :focus-visible { outline-color: var(--gold); }

.skip-link { position: absolute; left: var(--sp-2); top: -4rem; z-index: 100; background: var(--moss); color: var(--cream); padding: .75rem 1rem; border-radius: var(--radius); transition: top .2s; }
.skip-link:focus { top: var(--sp-1); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- Type ---------- */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; font-variant-numeric: lining-nums; }
h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--em, var(--moss)); }
.lead { font: 400 var(--fs-lead)/1.45 var(--serif); }
.prose > * + * { margin-top: var(--sp-2); }
.prose p { max-width: var(--measure); }
.prose h2 { margin-bottom: var(--sp-3); }
.small { font-size: .875rem; font-weight: 400; color: var(--muted, var(--taupe)); }
.link { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .85rem 1.6rem; font: 400 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn--primary { background: var(--moss); color: var(--cream); }
.btn--primary:hover { background: var(--charcoal); }
.btn--ghost { border-color: currentColor; color: var(--moss); }
.btn--ghost:hover { background: var(--moss); border-color: var(--moss); color: var(--cream); }
.btn--large { min-height: 3.5rem; padding: 1.1rem 2.4rem; font-size: .8125rem; }
@media (max-width: 26rem) { .btn--large { padding: 1rem 1.25rem; letter-spacing: .14em; } }
.section--moss .btn--primary { background: var(--cream); color: var(--moss); }
.section--moss .btn--primary:hover { background: var(--gold); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(247 247 239 / .94); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(102 97 92 / .14); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); height: var(--header-h); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; font: 400 1.125rem/1 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); text-decoration: none; }
.wordmark .mark { width: 1.75rem; height: 1.75rem; }
.nav { display: none; }
.nav a { font: 400 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); text-decoration: none; padding: .6rem 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: currentColor; }
/* Phones: no Book button in the header (the hero button and the bottom bar cover it); it returns on desktop below. */
.site-header .btn { display: none; min-height: 2.75rem; padding: .7rem 1rem; letter-spacing: .14em; font-size: .6875rem; white-space: nowrap; }
.wordmark { white-space: nowrap; }
@media (max-width: 26rem) {
  .wordmark { font-size: .95rem; letter-spacing: .1em; gap: .4rem; }
  .wordmark .mark { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 22.5rem) { .wordmark .mark { display: none; } }

/* Mobile/tablet nav disclosure: below 56rem the in-page nav is reachable via
   this toggle instead of being unreachable entirely. See js/site.js. */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-right: -.25rem; padding: 0; background: none; border: none; color: var(--taupe); cursor: pointer; order: -1; }
.nav-toggle__icon { width: 1.375rem; height: 1.375rem; }
.nav-toggle__icon.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.nav.is-open {
  display: flex; flex-direction: column; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cream); padding: var(--sp-2) var(--gutter) var(--sp-3);
  border-bottom: 1px solid rgb(102 97 92 / .14);
  box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / .08);
}
.nav.is-open a { display: flex; align-items: center; min-height: 2.75rem; padding: .6rem 0; border-bottom: 1px solid rgb(102 97 92 / .12); }
.nav.is-open a:last-child { border-bottom: none; }

@media (min-width: 56rem) {
  .nav-toggle { display: none; }
  .nav { display: flex; gap: var(--sp-4); position: static; background: none; padding: 0; border: 0; box-shadow: none; }
  .nav a { min-height: auto; }
  .site-header .btn { display: inline-flex; padding: .7rem 1.2rem; letter-spacing: .2em; font-size: .75rem; }
}
/* Medium desktops (about 900-1150px): wordmark + 5 links + Book button don't fit at full spacing and the name ran into 'Villa'.
   Tighten spacing here only; full spacing returns above 72rem. */
@media (min-width: 56rem) and (max-width: 72rem) {
  .site-header__in { gap: var(--sp-2); }
  .wordmark { font-size: 1rem; letter-spacing: .1em; }
  .nav { gap: var(--sp-2); }
  .nav a { letter-spacing: .1em; }
  .site-header .btn { padding: .7rem .9rem; letter-spacing: .14em; }
}

/* Phones/tablets: only the pool card ("Green tiles, mountain air") changes colour on phones/tablets, where the card sits under the photo:
   Moss background with cream text and a gold accent word. The hero and tubs cards keep their normal cream. Desktop untouched. */
@media (max-width: 55.99rem) {
  #pool .bleed__card { background: var(--moss); color: var(--cream); --em: var(--gold); }
}


/* ---------- Arch: the signature shape (copies the villa's arched niches, doors and headboards) ---------- */
.arch { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-arch) var(--radius-arch) 0 0; background: var(--stone); }
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Generic section + split layout ---------- */
.section { background: var(--bg, var(--cream)); color: var(--fg, var(--charcoal)); padding-block: var(--section); }
.split { display: grid; gap: var(--sp-5); align-items: center; }
.split__media { order: -1; }
.split__media .arch { width: min(100%, 30rem); margin-inline: auto; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .split__media { order: 0; }
  .split--flip .split__media { order: -1; }
}

/* ---------- 1. Hero: full-width photo with the headline card (same layout as the pool section below) ---------- */
.hero .bleed__img { height: min(62svh, 34rem); }
.hero .bleed__card h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.hero .lead { margin-top: var(--sp-2); font-size: 1.2rem; line-height: 1.32; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.hero .btn { min-height: 0; padding: .7rem 1.1rem; }
.bleed__card p.hero__trust { margin-top: var(--sp-2); color: var(--charcoal); font-size: 1rem; line-height: 1.3; } /* darker than the usual taupe: the card is see-through on desktop, so the small line needs the extra contrast */
@media (min-width: 56rem) {
  .hero .bleed__img { height: min(calc(100svh - var(--header-h)), 54rem); min-height: 40rem; }
  /* Desktop overlay card: tight padding (1.6rem), 20% see-through, right-aligned. Width = text column (26rem) + padding, so the box hugs the text and more photo shows. */
  .hero .bleed__card { width: min(26.35rem, 39.7%); padding: calc(var(--sp-4) * .72); background: rgb(247 247 239 / .8); text-align: center; }
  .hero .bleed__card h1 { text-align: left; }
  .hero .lead { text-align: left; }
  .hero .hero__actions { justify-content: center; }
}

/* At-a-glance strip - icon + one line of text per fact (icons are hand-drawn
   placeholders; Jason is supplying the real set later, so keep these easy to
   swap: one <svg class="facts__icon"> per <li>, sized by the rule below). */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); padding-block: var(--sp-5); text-align: center; list-style: none; }
.facts li { display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.facts__icon { width: 2.75rem; height: 2.75rem; color: var(--em); stroke-width: 1; } /* line weight; the SVGs themselves are drawn at 1.5 */
.facts li span { font: 400 calc(var(--fs-h3) * .8)/1.2 var(--serif); color: var(--em); }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(4, 1fr); } }
/* Phones (the 2-column layout, under 40rem): shorter labels so each fits on one line: "Salt Water Pool", "5 mins to the Beach". */
.facts li span .facts-short { display: none; }
@media (max-width: 39.99rem) { .facts li span .facts-long { display: none; } .facts li span .facts-short { display: inline; } }
.section--facts { padding-block: 0; }

/* ---------- 3. Pool: full-bleed photo with a card ---------- */
.section--bleed { padding-block: 0; }
.bleed { position: relative; }
.bleed__img { width: 100%; height: min(70svh, 42rem); object-fit: cover; }
.bleed__card { background: var(--cream); color: var(--charcoal); padding: var(--sp-5) var(--gutter); }
.bleed__card h2 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); }
.bleed__card p { margin-top: var(--sp-2); font-family: var(--serif); font-size: 1.2rem; font-weight: 400; line-height: 1.32; } /* shared by the hero, pool and tubs cards: serif, 19.2px regular, ~25.3px line to line (the hero paragraph is the reference) */
@media (min-width: 56rem) {
  .bleed__card { position: absolute; right: var(--gutter); bottom: var(--sp-5); width: min(28rem, 40%); padding: var(--sp-5); border-radius: var(--radius); }
  .bleed--left .bleed__card { right: auto; left: var(--gutter); }
  /* Pool card: keep a constant 1.8:1 shape so the pool stays in view at any width (height follows width, capped, crop anchored low) */
  #pool .bleed__img { height: auto; aspect-ratio: 1.8; max-height: 56rem; object-position: 50% 70%; }
  .bleed__card { background: rgb(247 247 239 / .8); } /* 20% see-through over the photo, same as the hero card */
}
.quote { max-width: 44rem; margin-inline: auto; text-align: center; }
.quote p { font: italic 400 clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem)/1.25 var(--serif); }
.quote cite { display: block; margin-top: var(--sp-2); font: 400 var(--fs-label)/1.4 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- 6. Bedrooms: row of arches (swipeable on phones) ---------- */
.section-head { max-width: var(--measure); margin-inline: auto; text-align: center; margin-bottom: var(--sp-6); }
.section-head p { margin-top: var(--sp-2); }
.nowrap { white-space: nowrap; } /* keep a short phrase together on one line */
#gallery .section-head { max-width: none; }
#gallery-title { white-space: nowrap; font-size: clamp(1.45rem, .55rem + 4.6vw, 3.25rem); } /* one line at every width: the type shrinks with the screen */
/* Small phones only (<= 30rem): break after "corner," so the heading reads on two lines at a normal heading size. */
.br-small { display: none; }
@media (max-width: 30rem) {
  .br-small { display: inline; }
  #gallery-title { font-size: clamp(1.6rem, 8.2vw, 2.25rem); line-height: 1.1; }
}
.arch-row { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); }
.arch-row > * { scroll-snap-align: center; }
.arch-card figcaption { margin-top: var(--sp-2); text-align: center; font: 400 var(--fs-label)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 56rem) {
  .arch-row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; gap: var(--sp-5); }
}

/* ---------- Lists (location + good to know) ---------- */
.list-dl { border-top: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); }
.list-dl > div { display: grid; gap: .25rem var(--sp-3); padding: 1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); }
.list-dl dt { font: 400 var(--fs-label)/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.list-dl dd { font-weight: 300; }
.list-dl--times dt { font: 400 1.5rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--fg); }
.list-dl--times dd { color: var(--muted); font-weight: 400; }
@media (min-width: 40rem) {
  .list-dl > div { grid-template-columns: minmax(9rem, 13rem) 1fr; align-items: baseline; }
  .list-dl--times > div { grid-template-columns: 1fr auto; }
}
/* ---------- Extras: its own standalone section (moved out of Location) ---------- */
.extras ul { color: var(--muted); font-weight: 400; }
.extras li { padding-left: 1.1rem; position: relative; }
.extras li::before { content: ''; position: absolute; left: 0; top: .8em; width: .4rem; height: 1px; background: currentColor; }
.extras .small { margin-top: var(--sp-3); padding-left: 1.1rem; } /* footnote: more air above, indented to line up with the list text */

/* ---------- 8. Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: var(--sp-5); grid-auto-flow: dense; }
.gallery a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--stone); }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery a:hover img { transform: scale(1.04); }
.gallery .g--big { grid-column: span 2; }
.gallery .g--tall { grid-row: span 2; aspect-ratio: auto; }
@media (min-width: 56rem) {
  .gallery { grid-template-columns: repeat(4, 1fr); gap: .75rem; }
  .gallery .g--big { grid-row: span 2; aspect-ratio: auto; }
}

/* ---------- 9. Hosts ---------- */
.stars { display: flex; gap: .3rem; margin-top: var(--sp-3); color: var(--em); }
.stars svg { width: 1.5rem; height: 1.5rem; fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.rating { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-1); }
.rating strong { font: 400 2rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--em); }
.quotes { display: grid; gap: var(--sp-3); }
.quote-card { background: var(--cream); color: var(--charcoal); padding: calc(var(--sp-4) * 2 / 3); border-radius: var(--radius); } /* a third less padding than --sp-4 */
.quote-card p { font: italic 400 1.5rem/1.3 var(--serif); }
.quote-card cite { display: block; margin-top: var(--sp-2); font: 400 var(--fs-label)/1.4 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }

/* ---------- 11. Book direct ---------- */
.book { text-align: center; }
.book h2 { max-width: 20ch; margin-inline: auto; }
.book .btn { margin-top: var(--sp-6); font-weight: 600; min-height: 0; padding: 1.36rem; } /* bolder label so the closing CTA stands out on the moss background */

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--sp-6) var(--sp-5); }
.site-footer__grid { display: grid; gap: var(--sp-4); padding-right: 4.25rem; } /* keeps the right-hand column clear of the floating WhatsApp button */
.site-footer .wordmark { color: var(--cream); }
.site-footer ul { display: grid; gap: .5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .25em; }
.site-footer li.with-icon { display: flex; }
.site-footer .with-icon { display: inline-flex; align-items: center; gap: .6rem; min-height: 1.75rem; } /* icon + label; the height also lifts the tap target above 24px */
.site-footer .ficon { width: 1.25rem; height: 1.25rem; flex: none; }
.site-footer .small { color: var(--muted); }
/* tagline lines up with the 'THARA TROPICAL' lettering, not the leaf logo: indent = logo width + gap (mirrors the .wordmark sizes above) */
.site-footer .wordmark + .small { padding-left: 2.35rem; }
@media (max-width: 26rem) { .site-footer .wordmark + .small { padding-left: 1.9rem; } }
@media (max-width: 22.5rem) { .site-footer .wordmark + .small { padding-left: 0; } }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ---------- Mobile "Book direct" bar ---------- */
.book-bar { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom)); background: var(--moss); color: var(--cream); }
.book-bar span { font: 400 .8125rem/1.3 var(--sans); letter-spacing: .04em; }
.book-bar .btn { background: var(--cream); color: var(--moss); min-height: 2.75rem; padding: .7rem 1rem; white-space: nowrap; flex: none; }
@media (min-width: 56rem) { .book-bar { display: none; } }
/* Without JavaScript the bar simply stays visible. With JavaScript it slides in only when the top button has scrolled away. */
@media (scripting: enabled) {
  .book-bar { transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
  .book-bar.is-visible { transform: none; visibility: visible; transition: transform .3s ease; }
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-fab {
  position: fixed;
  right: var(--gutter);
  bottom: 5.5rem; /* clears the mobile book-bar underneath it */
  z-index: 55;
  display: flex;
  align-items: center;
  padding: .85rem; /* icon-only: a 3.2rem circle, still above the 44px tap-target minimum */
  border-radius: 999px;
  background: #167F3D; /* darkened from WhatsApp's #25D366 — white text on the original green was 1.98:1, fails WCAG AA (needs 4.5:1); this is 5.08:1 */
  color: #fff;
  font: 400 .875rem/1 var(--sans);
  letter-spacing: .02em;
  box-shadow: 0 .5rem 1.25rem rgb(0 0 0 / .18);
  transition: background-color .15s ease, transform .15s ease;
}
.whatsapp-fab:hover { background: #126A33; transform: translateY(-1px); }
.whatsapp-fab__icon { width: 1.5rem; height: 1.5rem; flex: none; }
@media (min-width: 56rem) { .whatsapp-fab { bottom: 1.5rem; } }

/* ---------- Motion (only where supported, never hides content) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: view()) {
    .arch img { animation: arch-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes arch-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* ---- Bedrooms carousel on phones: swipe hint (hidden on desktop, where the three arches sit in a grid) ---- */
.arch-scroll { position: relative; }
.swipe-hint { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem .5rem .7rem; border-radius: 999px; background: rgb(47 46 41 / .6); color: var(--cream); font: 400 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; transition: opacity .5s ease; }
.swipe-hint__icon { width: 1.5rem; height: 1.5rem; flex: none; animation: swipe-finger 1.8s ease-in-out infinite; }
.swipe-hint.is-dismissed { opacity: 0; }
@keyframes swipe-finger { 0%, 100% { transform: translateX(.55rem) rotate(8deg); } 50% { transform: translateX(-.55rem) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .swipe-hint__icon { animation: none; } }
@media (min-width: 56rem) { .swipe-hint { display: none; } }

/* Bedrooms carousel scrollbar: the browser's default is a light-grey track, which glows on the dark green section (and on some computers is always shown).
   Keep it subtle and on-brand: a thin cream thumb on a transparent track. */
.arch-row { scrollbar-width: thin; scrollbar-color: rgb(247 247 239 / .4) transparent; }
.arch-row::-webkit-scrollbar { height: .4rem; background: transparent; }
.arch-row::-webkit-scrollbar-track { background: transparent; }
.arch-row::-webkit-scrollbar-thumb { background: rgb(247 247 239 / .4); border-radius: 999px; }
.arch-row::-webkit-scrollbar-thumb:hover { background: rgb(247 247 239 / .6); }

/* ---------- Floor plan: the site's frame around the shared component (css/floorplan.css, loaded before this file) ---------- */
/* The whole plan always fits on screen under the sticky header (1.3918 = the image's width / height). svh after vh: iOS's vh is the tallest viewport. */
#floor-plan .fp { margin-inline: auto; }
@media (min-width: 48rem) and (min-height: 31rem) {
  #floor-plan .fp { max-width: max(20rem, calc((100vh - var(--header-h) - 3rem) * 1.3918)); max-width: max(20rem, calc((100svh - var(--header-h) - 3rem) * 1.3918)); }
}
/* phones: edge to edge, so the pins have every pixel of width */
@media (max-width: 40rem) {
  #floor-plan .fp { width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; box-shadow: none; }
}
/* the room card (moved to <body> by js/floorplan.js) sits above the header (50), WhatsApp button (55) and phone book bar (60) */
.fp-card { z-index: 70; }