/* ==========================================================================
   Swahili Coast Villas - About Us (post 25)

   0. Page canvas: the sections' own Mineral White, so the gaps between them
      are not the theme's white. The contact form section is hidden on every
      device.
   1. Layout for the live site's <=526px phone scale. Elementor's smallest
      breakpoint on this site is 767px, so the phone layout has to live here.
      No type is set here any more - see 5.
   2. Layout for the live site's 768-820px band, where its own tablet type
      scale has already kicked in but Elementor is still on the desktop tier.
   3. The contact-form skin, kept so the form looks right if it is ever shown
      again. Forminator's own rules carry an #id selector, so every declaration
      here is !important.
   4. Hero entrance + hover life.
   5. Type. Elementor's global stylesheet publishes the site's own scale in
      uploads/elementor/css/default-<device>.css, and it is responsive:
        desktop          h1 75 / h2 48 / h3 38 / h4 30 / h5 25 / h6 20, body 18
        <=1024 (tablet)  h1 45 / h2 40 / h3 35 / h4 25 / h5 22 / h6 20
        <=767  (mobile)  h1 40 / h2 35 / h3 30 / h4 20 / h5 16 / h6 16, body 16
      all of it Optima 400, leading 1.16. The reset below pins the DESKTOP
      numbers at every width, which is what the owner asked for on this page
      (body copy at 18px, headings on the default family and size) - but it
      means the small-screen steps have to be put back by hand, which is what
      the h1 rule at the end of this block does: 40px on a phone, the value the
      global scale itself uses at that width. The other headings still carry
      their desktop sizes on small screens. Each element also has its own class
      pinning a family, a size and a leading - with responsive copies below
      1025px - so every declaration here needs !important to win.
   6. The team section's card carousel: gutters for the arrows, the arrows and
      dots themselves, the drag affordance and the card typography. The
      carousel layout (track, card widths 3/2/1, scroll snapping) is native
      Elementor styling on the elements; only the chrome and the card type are
      here.
   7. The "Our Team" heading block and the "Our Story" block above it.
   8. The two overlapping photos in the commitment block:
        - the small photo (41acd367) is absolutely positioned inside the photo
          wrap (5d1eef4f). It is pinned so its TOP edge sits 35px above the
          bottom edge of the big photo above it, on every device, instead of
          covering a large part of it. The wrap is the containing block, so
          `top: calc(100% - 35px)` lands it exactly on the big photo's bottom
          edge (the big photo fills the wrap at every width above the phone);
          on the phone the wrap is square while the photo keeps its 3:2 shape,
          so the photo's bottom edge is 66.67% down and that is the value used.
          The vertical half of the theme's `translate: -50% 50%` is dropped so
          `top` is the whole story; the horizontal half stays, because it is
          what centres the photo over the big one.
        - the portrait in the story grid (709f184a) starts 80px above that
          small photo's bottom edge. The margin that lands it there cannot be a
          fixed number: the block above the grid is sized by whichever of its
          two columns is taller and the theme's spacing changes at every
          breakpoint (the measured need runs from about -87px at 768 to +241px
          at 1440). The grid's own margin here is the -80px asked for, which is
          what the front end falls back to, and script.js measures the gap and
          nudges it the rest of the way.
   9. The mission paragraph at the top of the page (1c3397a8, under the
      "Swahili Coast Villas" heading): it is the only thing on its row, so it
      reads better contained than run across the whole page - 60% of its
      column, centred like the text itself. From tablet up only; the phone
      keeps the full-width 380px measure set in rule 1.

   Selectors are the page's own element ids, scoped to .elementor-25, and carry
   !important because Elementor emits its rules at equal specificity.
   ========================================================================== */

/* --- 0a. page canvas ---------------------------------------------------- */
body.page-id-25,
body.page-id-25 .elementor-25 { background-color: #FBFBF9; }

/* --- 0b. contact form: no show, all devices ----------------------------- */
.elementor-25 [data-id="663269f7"] { display: none !important; }

/* --- 1. phone layout (mirrors the live site's <=526px block) ------------ */
@media (max-width: 526px) {
	.elementor-25 [data-id="7ad4dc65"] { padding: 0 !important; margin-bottom: 2rem !important; }
	.elementor-25 [data-id="10afbdd1"] { height: auto !important; aspect-ratio: 370 / 251 !important; max-height: none !important; }
	.elementor-25 [data-id="6a5c9a53"] { height: 36px !important; }
	.elementor-25 [data-id="cffbafb"] { margin-right: 1rem !important; }

	.elementor-25 [data-id="70e2c608"],
	.elementor-25 [data-id="6189adc1"],
	.elementor-25 [data-id="4ce9cbd3"],
	.elementor-25 [data-id="625f992f"],
	.elementor-25 [data-id="21606353"] { padding: 0 10px !important; margin: 0 0 2rem !important; }

	.elementor-25 [data-id="1c3397a8"],
	.elementor-25 [data-id="18252356"] { max-width: 380px !important; margin-left: auto !important; margin-right: auto !important; }

	.elementor-25 [data-id="5cd3f547"],
	.elementor-25 [data-id="2f1dc46e"] { gap: 3rem !important; }
	.elementor-25 [data-id="5d1eef4f"] { aspect-ratio: 1 !important; margin-bottom: 4rem !important; }

	.elementor-25 [data-id="1bf5c953"],
	.elementor-25 [data-id="9ab8284"] { width: 50px !important; height: 50px !important; }
}

/* --- 2. the live site's 768-820px band: layout only --------------------- */
@media (min-width: 768px) and (max-width: 820px) {
	.elementor-25 [data-id="6a5c9a53"] { height: 110px !important; }
}

/* --- 3. the contact-form skin (matches the live About Us form) ---------- */
.elementor-25 [data-id="2c1978ee"] .forminator-custom-form { display: flex !important; flex-direction: column !important; gap: 15px !important; margin: 0 !important; width: 100% !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 15px !important; margin: 0 !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-col { padding: 0 !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-col-6 { flex: 0 0 auto !important; width: calc(50% - 8px) !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-col-12 { flex: 0 0 auto !important; width: 100% !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-field { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-label { color: #A6533C !important; font-family: Poppins, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .04em !important; line-height: 20px !important; margin-bottom: .25rem !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-input,
.elementor-25 [data-id="2c1978ee"] .forminator-textarea { background-color: #FFF !important; border: none !important; border-radius: 5px !important; box-sizing: border-box !important; color: #88755A !important; outline: none !important; padding: 10px 15px !important; width: 100% !important; box-shadow: none !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-input { height: 45px !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-textarea { height: 125px !important; min-height: 125px !important; resize: none !important; }
.elementor-25 [data-id="2c1978ee"] .forminator-button-submit { background: #88755A !important; border: none !important; border-radius: 10px !important; color: #FFF !important; font-family: Optima, serif !important; font-size: 16px !important; font-weight: 600 !important; height: 50px !important; letter-spacing: .04em !important; line-height: 20px !important; margin-top: 10px !important; width: 30% !important; }

/* --- 4. a little life: hero entrance + hover life ----------------------- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes scvAboutHeroZoom {
		from { transform: scale(1.15); }
		to   { transform: scale(1); }
	}
	.elementor-25 [data-id="10afbdd1"] img { animation: scvAboutHeroZoom 8s linear both; transform-origin: center center; }
}

@media (hover: hover) {
	.elementor-25 [data-id="5d1eef4f"] img,
	.elementor-25 [data-id="709f184a"] img { transition: transform .9s ease; }
	.elementor-25 [data-id="5d1eef4f"]:hover img,
	.elementor-25 [data-id="709f184a"]:hover img { transform: scale(1.04); }
	.elementor-25 [data-id="60b68713"]:hover [data-id="c0645a2"],
	.elementor-25 [data-id="f54d1cc"]:hover [data-id="4102383d"] { color: #C96F4E; }
}

/* --- 5. type: back to the site's global defaults ------------------------ */
/* Headings: Optima, regular, at the default size for the level, at every
   breakpoint. The span inside a heading carried its own larger size, so it is
   pinned to the heading's size here. */
.elementor-25 .e-default-h1,
.elementor-25 .e-default-h1 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 75px !important; line-height: 1.16 !important; }
.elementor-25 .e-default-h2,
.elementor-25 .e-default-h2 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 48px !important; line-height: 1.16 !important; }
.elementor-25 .e-default-h3,
.elementor-25 .e-default-h3 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 38px !important; line-height: 1.16 !important; }
.elementor-25 .e-default-h4,
.elementor-25 .e-default-h4 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 30px !important; line-height: 1.16 !important; }
.elementor-25 .e-default-h5,
.elementor-25 .e-default-h5 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 25px !important; line-height: 1.16 !important; }
.elementor-25 .e-default-h6,
.elementor-25 .e-default-h6 span { font-family: Optima, serif !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.16 !important; }

/* Body copy: the default 18px in 'Neue Einstellung'. */
.elementor-25 .e-default-p,
.elementor-25 .e-default-p span { font-family: "Neue Einstellung", Optima, serif !important; font-weight: 400 !important; font-size: 18px !important; line-height: 1.44 !important; }

/* The one small-screen step that is put back: the global scale runs the h1 at
   40px on a phone, and the hero title is the page's only h1. */
@media (max-width: 767px) {
	.elementor-25 .e-default-h1,
	.elementor-25 .e-default-h1 span { font-size: 40px !important; }
}

/* --- 6. team card carousel --------------------------------------------- */
/* The track is 491106d4 inside section 625f992f; five cards, three visible on
   desktop, two on tablet, one on phone. The arrows live in the section's own
   side padding so they sit outside the cards on desktop and tablet; on a phone
   there is no room beside a full-width card, so they sit over the image edges
   by request. Elementor owns the track/card widths - this is only the chrome. */
.elementor-25 [data-id="625f992f"] { position: relative !important; }

@media (min-width: 1025px) {
	.elementor-25 [data-id="625f992f"] { padding-left: 76px !important; padding-right: 76px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-25 [data-id="625f992f"] { padding-left: 64px !important; padding-right: 64px !important; }
}

/* the scrollbar on the track is noise: the dots say where you are */
.elementor-25 [data-id="491106d4"] { scrollbar-width: none; -ms-overflow-style: none; }
.elementor-25 [data-id="491106d4"]::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* and it is draggable with a mouse, so it should say so */
@media (hover: hover) and (pointer: fine) {
	.elementor-25 [data-id="491106d4"] { cursor: grab; }
	.elementor-25 [data-id="491106d4"].is-dragging { cursor: grabbing; }
}
/* while a drag is in flight the snap and the easing would fight the pointer */
.elementor-25 [data-id="491106d4"].is-dragging { scroll-snap-type: none !important; scroll-behavior: auto !important; user-select: none; }
.elementor-25 [data-id="491106d4"].is-dragging img { -webkit-user-drag: none; user-drag: none; }

/* card type: the lead-in reads as a title, the rest as body copy */
.elementor-25 [data-id="625f992f"] h6 { color: #88755A !important; font-size: 18px !important; line-height: 1.5 !important; }
.elementor-25 [data-id="625f992f"] h6 strong { display: block !important; color: #A6533C !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; margin-bottom: 8px !important; }

/* arrows */
.scv-team-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(166, 83, 60, 0.35); border-radius: 9999px; background-color: rgba(255, 255, 255, 0.92); color: #A6533C; cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease; }
.scv-team-arrow svg { display: block; width: 18px; height: 18px; }
.scv-team-arrow:hover,
.scv-team-arrow:focus-visible { background-color: #A6533C; border-color: #A6533C; color: #FFFFFF; }
.scv-team-arrow.is-off { opacity: .35; pointer-events: none; }
.scv-team-arrow--prev { left: 10px; }
.scv-team-arrow--next { right: 10px; }

/* dots */
.scv-team-dots { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 6px; }
.scv-team-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 9999px; background-color: rgba(166, 83, 60, 0.28); cursor: pointer; transition: background-color .3s ease, transform .3s ease; }
.scv-team-dot:hover { background-color: rgba(166, 83, 60, 0.55); }
.scv-team-dot.is-active { background-color: #A6533C; transform: scale(1.3); }

/* Phone: smaller arrow plates, and lifted 15px on the section's centre line.
   A phone card is full width, so the arrows sit over the image and the copy
   underneath it; at the exact centre they clipped the first lines of text on
   the taller cards. `top` does the lifting rather than a transform, because
   the previous arrow gets its own inline `transform` from script.js. */
@media (max-width: 767px) {
	.scv-team-arrow { width: 42px; height: 42px; top: calc(50% - 15px); background-color: rgba(255, 255, 255, 0.85); }
	.scv-team-arrow--prev { left: 6px; }
	.scv-team-arrow--next { right: 6px; }
}

/* --- 7. the "Our Team" heading block, and the "Our Story" block --------- */
/* The theme leaves 112px between the "Our Team" block and the carousel, and
   lets the paragraph under "Our Team" run the full 1282px width at 1420. Both
   are tightened here: the paragraph reads at half measure (centred, like the
   heading above it) from tablet up, and the phone keeps its full-width
   measure. */
.elementor-25 [data-id="4ce9cbd3"] { margin-bottom: 28px !important; }

@media (min-width: 768px) {
	.elementor-25 [data-id="4ce9cbd3"] { margin-bottom: 40px !important; }
	.elementor-25 [data-id="18252356"] { max-width: 50% !important; margin-left: auto !important; margin-right: auto !important; }

	/* the portrait sits at the top of the story grid, so script.js can place
	   the grid by measuring the portrait's own top edge */
	.elementor-25 [data-id="709f184a"] { align-self: start !important; }

	/* "Our Story": the grid 2f1dc46e holds the copy (4d5f0071) and the portrait
	   (709f184a). -80px, as asked. script.js then measures where that puts the
	   portrait and nudges the margin the rest of the way, because the theme's
	   own spacing above this grid changes at every breakpoint. */
	.elementor-25 [data-id="2f1dc46e"] { margin-top: -80px !important; }
}

/* --- 8. the two overlapping photos -------------------------------------- */
/* Small photo: top edge 35px above the bottom edge of the big photo it sits
   over. `top` is measured from the photo wrap, which is the containing block;
   above the phone the big photo fills that wrap, so 100% is the big photo's
   bottom edge. The vertical half of the theme's translate is dropped so `top`
   is not fighting it. */
.elementor-25 [data-id="41acd367"] { translate: -50% 0 !important; top: calc(100% - 35px) !important; bottom: auto !important; }

/* On the phone the wrap is square (aspect-ratio 1, see rule 1) while the big
   photo keeps its 3:2 shape, so that photo's bottom edge is 66.67% down. */
@media (max-width: 526px) {
	.elementor-25 [data-id="41acd367"] { top: calc(66.67% - 35px) !important; }
}

/* --- 9. the mission paragraph at the top -------------------------------- */
/* "At Swahili Coast Villas, our mission is ..." sits alone on its row under the
   "Swahili Coast Villas" heading, so it is contained rather than run the full
   measure of the page. Centred, because the text itself is centred. */
@media (min-width: 768px) {
	.elementor-25 [data-id="1c3397a8"] { max-width: 60% !important; margin-left: auto !important; margin-right: auto !important; }
}