/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* surfaces, light to deep */
  --ia-porcelain: #fdfcfa;
  --ia-sand: #f4ede3;
  --ia-greige: #e7dccb;
  --ia-taupe: #aea18f;

  /* brand mid tones */
  --ia-taupe-light: #a89a85;
  --ia-taupe-base: #9c8d78;
  --ia-bronze: #8a7c68;
  --ia-bronze-mid: #8a7c66;
  --ia-bronze-deep: #877961;
  --ia-umber: #7f7159;
  --ia-umber-deep: #6f6249;

  /* ink, light to deep */
  --ia-stone: #6b6156;
  --ia-clay: #5f564b;
  --ia-walnut: #4a4034;
  --ia-bark: #3d362d;
  --ia-espresso: #2e2823;

  /* functional */
  --ia-gold: #c9a227;
  --ia-error: #9c4a3c;

  /* lines */
  --ia-line: rgba(174, 161, 143, 0.3);
  --ia-line-strong: rgba(174, 161, 143, 0.55);
  --ia-line-dark: rgba(122, 110, 94, 0.32);

  /* type */
  --ia-display: "Fraunces", Georgia, serif;
  --ia-body: "Urbanist", Arial, sans-serif;

  /* motion */
  --ia-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* button gradient */
  --ia-btn-grad: linear-gradient(180deg, #a89a85 0%, #9c8d78 25%, #8a7c66 50%, #7f7159 75%, #6f6249 100%);
  --ia-btn-light-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 25%, rgba(252, 249, 244, 0.62) 50%, rgba(247, 241, 232, 0.6) 75%, rgba(240, 232, 219, 0.62) 100%);
  --ia-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(74, 64, 52, 0.16);
  --ia-btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 12px rgba(74, 64, 52, 0.22);
}


/* --------------------------------------------------------------------------
   2. Section fields
   Apply to a parent container via CSS Classes. Clear the panel background.
   -------------------------------------------------------------------------- */

.ia-field--white {
  background-color: #ffffff;
}

.ia-field--porcelain {
  background-color: var(--ia-porcelain);
  background-image: linear-gradient(180deg, #ffffff 0%, #fdfcfa 50%, #f7f3ec 100%);
}

.ia-field--sand {
  background-color: var(--ia-sand);
  background-image: linear-gradient(180deg, #faf6ef 0%, #f4ede3 50%, #ebe1d3 100%);
}

.ia-field--greige {
  background-color: var(--ia-greige);
  background-image: linear-gradient(180deg, #eee5d8 0%, #e7dccb 50%, #ddd0bb 100%);
}

.ia-field--taupe {
  background-color: var(--ia-taupe);
  background-image: linear-gradient(180deg, #b3a695 0%, #aea18f 50%, #a89b88 100%);
}


/* --------------------------------------------------------------------------
   3. Eyebrow
   .ia-eyebrow                left aligned, leading rule
   .ia-eyebrow--center        centered, rule on both sides
   .ia-eyebrow--on-greige     deeper tone for greige and taupe fields
   -------------------------------------------------------------------------- */

.ia-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ia-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ia-taupe);
  margin: 0 0 26px;
}

.ia-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}

.ia-eyebrow--center {
  justify-content: center;
}

.ia-eyebrow--center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}

.ia-eyebrow--on-greige {
  color: var(--ia-bronze);
}

.ia-eyebrow--on-taupe {
  color: var(--ia-porcelain);
}


/* --------------------------------------------------------------------------
   4. Headings
   -------------------------------------------------------------------------- */

.ia-h1 {
  font-family: var(--ia-display);
  font-weight: 200;
  font-size: clamp(46px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ia-walnut);
  margin: 0;
}

.ia-h2 {
  font-family: var(--ia-display);
  font-weight: 200;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ia-walnut);
  margin: 0;
}

.ia-h3 {
  font-family: var(--ia-display);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ia-walnut);
  margin: 0;
}

.ia-h1 em,
.ia-h2 em {
  font-style: italic;
  color: var(--ia-taupe-base);
}

.ia-h1--stacked em,
.ia-h2--stacked em {
  display: block;
}


/* --------------------------------------------------------------------------
   5. Body copy
   -------------------------------------------------------------------------- */

.ia-lede {
  font-family: var(--ia-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ia-stone);
  margin: 0 0 20px;
  max-width: 48ch;
}

.ia-lede:last-child {
  margin-bottom: 0;
}

.ia-lede--on-greige {
  font-weight: 400;
  color: var(--ia-clay);
}

.ia-lede--on-taupe {
  font-weight: 400;
  color: var(--ia-bark);
}


/* --------------------------------------------------------------------------
   6. Buttons
   .ia-btn                    base
   .ia-btn--solid             taupe gradient, white label
   .ia-btn--light             translucent white gradient, dark label
   .ia-btn--line              outline only, fills on hover
   -------------------------------------------------------------------------- */

a.ia-btn,
button.ia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ia-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 19px 35px;
  cursor: pointer;
  background-size: 100% 200%;
  background-position: 0% 0%;
  transition: background-position 0.45s ease, box-shadow 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

a.ia-btn--solid,
button.ia-btn--solid {
  color: #ffffff;
  background-color: var(--ia-taupe-base);
  background-image: var(--ia-btn-grad);
  box-shadow: var(--ia-btn-shadow);
}

a.ia-btn--solid:hover,
button.ia-btn--solid:hover {
  background-position: 0% 100%;
  box-shadow: var(--ia-btn-shadow-hover);
  color: #ffffff;
}

a.ia-btn--light,
button.ia-btn--light {
  color: var(--ia-walnut);
  background-color: rgba(255, 255, 255, 0.7);
  background-image: var(--ia-btn-light-grad);
  border: 1px solid var(--ia-taupe);
  padding: 18px 34px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

a.ia-btn--light:hover,
button.ia-btn--light:hover {
  background-position: 0% 100%;
  border-color: var(--ia-taupe-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--ia-espresso);
}

a.ia-btn--line,
button.ia-btn--line {
  color: var(--ia-espresso);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ia-taupe);
  padding: 18px 34px;
}

a.ia-btn--line:hover,
button.ia-btn--line:hover {
  background: var(--ia-taupe);
  border-color: var(--ia-taupe);
  color: var(--ia-espresso);
}

.ia-btn__arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.3s ease;
}

a.ia-btn:hover .ia-btn__arrow,
button.ia-btn:hover .ia-btn__arrow {
  transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   7. Mandala bullet
   Small five petal mark used for list items and FAQ markers.
   -------------------------------------------------------------------------- */

.ia-bullet {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--ia-taupe);
}

.ia-bullet svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ia-bullet--on-greige {
  color: var(--ia-bronze);
}


/* --------------------------------------------------------------------------
   8. Hairline list
   Bullet plus label rows separated by rules, no closing border.
   -------------------------------------------------------------------------- */

.ia-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--ia-line);
}

.ia-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--ia-line);
  font-family: var(--ia-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ia-walnut);
  list-style: none;
}

.ia-list li:last-child {
  border-bottom: 0;
}

.ia-list--on-greige,
.ia-list--on-greige li {
  border-color: var(--ia-line-dark);
}


/* --------------------------------------------------------------------------
   9. Cards
   Shared surface and hover behaviour for service, implant and FAQ cards.
   -------------------------------------------------------------------------- */

.ia-surface {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(174, 161, 143, 0.28);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(74, 64, 52, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

a.ia-surface {
  color: inherit;
  text-decoration: none;
}

.ia-surface--hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 62px rgba(74, 64, 52, 0.13);
  border-color: rgba(174, 161, 143, 0.6);
}

.ia-surface--wipe::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--ia-taupe-base);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
  z-index: 3;
}

.ia-surface--wipe:hover::before {
  transform: scaleX(1);
}

.ia-surface:focus-visible {
  outline: 2px solid var(--ia-taupe-base);
  outline-offset: 4px;
}

/* icon tile inside a card */

.ia-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ia-sand);
  flex-shrink: 0;
  transition: background 0.35s ease;
}

.ia-surface:hover .ia-icon-tile {
  background: var(--ia-greige);
}

.ia-icon-tile svg {
  width: 23px;
  height: 23px;
  color: var(--ia-taupe-base);
  stroke: currentColor;
}


/* --------------------------------------------------------------------------
   10. Learn more link
   -------------------------------------------------------------------------- */

.ia-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ia-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ia-taupe);
  text-decoration: none;
  width: fit-content;
  transition: gap 0.3s ease, color 0.3s ease;
}

.ia-surface:hover .ia-more,
a.ia-more:hover {
  gap: 12px;
  color: var(--ia-taupe-base);
}

.ia-more svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}


/* --------------------------------------------------------------------------
   11. Pills and badges
   -------------------------------------------------------------------------- */

.ia-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--ia-line);
  padding: 10px 22px;
  font-family: var(--ia-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ia-walnut);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ia-pill__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ia-taupe);
  flex: 0 0 auto;
}

.ia-pill--label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 15px;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   12. Section mark
   Oversized logo mandala used as a corner watermark.
   Parent needs position: relative and overflow: hidden.
   -------------------------------------------------------------------------- */

.ia-mark {
  position: absolute;
  z-index: 0;
  width: 720px;
  height: 720px;
  color: var(--ia-taupe);
  opacity: 0.09;
  pointer-events: none;
}

.ia-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ia-mark--tr {
  top: -240px;
  right: -260px;
}

.ia-mark--br {
  bottom: -240px;
  right: -250px;
}

.ia-mark--bl {
  bottom: -260px;
  left: -240px;
}

.ia-mark--sm {
  width: 520px;
  height: 520px;
}

/* on a taupe field the mark reads better light and stronger */

.ia-mark--on-taupe {
  color: var(--ia-porcelain);
  opacity: 0.16;
}


/* --------------------------------------------------------------------------
   13. Star rating
   -------------------------------------------------------------------------- */

.ia-rating {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--ia-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ia-walnut);
}

.ia-rating__stars {
  color: var(--ia-gold);
  letter-spacing: 0.06em;
  font-size: 17px;
  line-height: 1;
}

.ia-rating__mark {
  display: inline-flex;
  flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   14. Scroll reveal
   Pair with the IntersectionObserver snippet in each section widget.
   -------------------------------------------------------------------------- */

.ia-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.ia-reveal.is-in {
  opacity: 1;
  transform: none;
}

.ia-reveal--delay {
  transition-delay: 0.12s;
}


/* --------------------------------------------------------------------------
   15. Media frame
   Image with an offset hairline frame behind it.
   -------------------------------------------------------------------------- */

.ia-media {
  position: relative;
}

.ia-media__frame {
  position: absolute;
  top: 24px;
  right: -24px;
  bottom: -24px;
  left: 24px;
  border: 1px solid var(--ia-line-strong);
  border-radius: 4px;
  pointer-events: none;
}

.ia-media__shot {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 28px 64px rgba(74, 64, 52, 0.18);
}

.ia-media__shot img {
  display: block;
  width: 100%;
  height: 500px;
  object-fit: cover;
  transition: transform 1.1s var(--ia-ease);
}

.ia-media__shot:hover img {
  transform: scale(1.04);
}


/* --------------------------------------------------------------------------
   16. Layout helpers
   -------------------------------------------------------------------------- */

.ia-wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.ia-split {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 88px;
  align-items: center;
}

.ia-split > * {
  min-width: 0;
}

.ia-head--center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}


/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .ia-split {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .ia-media__shot img {
    height: 420px;
  }

  .ia-media__frame {
    top: 18px;
    right: -16px;
    bottom: -16px;
    left: 18px;
  }

  .ia-mark {
    width: 460px;
    height: 460px;
    opacity: 0.07;
  }

  .ia-mark--tr {
    top: -160px;
    right: -180px;
  }

  .ia-mark--br {
    bottom: -160px;
    right: -170px;
  }

  .ia-mark--bl {
    bottom: -180px;
    left: -160px;
  }

  .ia-head--center {
    margin-bottom: 44px;
  }
}

@media (max-width: 600px) {
  .ia-lede {
    font-size: 16px;
  }

  .ia-list li {
    font-size: 15px;
    gap: 13px;
  }

  .ia-bullet {
    width: 15px;
    height: 15px;
  }

  .ia-media__shot img {
    height: 340px;
  }

  .ia-media__frame {
    top: 12px;
    right: -10px;
    bottom: -10px;
    left: 12px;
  }

  .ia-eyebrow--center::before,
  .ia-eyebrow--center::after {
    width: 22px;
  }

  .ia-icon-tile {
    width: 46px;
    height: 46px;
  }
}


/* --------------------------------------------------------------------------
   18. Reduced motion
   -------------------------------------------------------------------------- */

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

  .ia-surface,
  .ia-icon-tile,
  .ia-more,
  .ia-btn,
  .ia-btn__arrow,
  .ia-media__shot img,
  .ia-surface--wipe::before {
    transition: none;
  }

  .ia-surface--hover:hover {
    transform: none;
  }

  .ia-media__shot:hover img {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   19. Native Elementor widget overrides

   Elementor writes its own styles with two class selectors, which outrank
   the single class rules above. These match that specificity so the ia-*
   classes work on native widgets.

   Rule for the team: add ia-* classes under Advanced > CSS Classes and
   leave the Style tab at default. Anything set in the Style tab becomes
   inline CSS and will beat this file.
   -------------------------------------------------------------------------- */

/* buttons */

.elementor-widget-button .elementor-button.ia-btn,
.elementor-button-wrapper .elementor-button.ia-btn,
.elementor-button.ia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ia-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  border: 0;
  border-radius: 999px;
  padding: 19px 35px;
  background-size: 100% 200%;
  background-position: 0% 0%;
  transition: background-position 0.45s ease, box-shadow 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.elementor-widget-button .elementor-button.ia-btn--solid,
.elementor-button-wrapper .elementor-button.ia-btn--solid,
.elementor-button.ia-btn--solid {
  color: #ffffff;
  background-color: var(--ia-taupe-base);
  background-image: var(--ia-btn-grad);
  box-shadow: var(--ia-btn-shadow);
}

.elementor-widget-button .elementor-button.ia-btn--solid:hover,
.elementor-button-wrapper .elementor-button.ia-btn--solid:hover,
.elementor-button.ia-btn--solid:hover {
  background-position: 0% 100%;
  box-shadow: var(--ia-btn-shadow-hover);
  color: #ffffff;
}

.elementor-widget-button .elementor-button.ia-btn--light,
.elementor-button-wrapper .elementor-button.ia-btn--light,
.elementor-button.ia-btn--light {
  color: var(--ia-walnut);
  background-color: rgba(255, 255, 255, 0.7);
  background-image: var(--ia-btn-light-grad);
  border: 1px solid var(--ia-taupe);
  padding: 18px 34px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.elementor-widget-button .elementor-button.ia-btn--light:hover,
.elementor-button-wrapper .elementor-button.ia-btn--light:hover,
.elementor-button.ia-btn--light:hover {
  background-position: 0% 100%;
  border-color: var(--ia-taupe-base);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--ia-espresso);
}

.elementor-widget-button .elementor-button.ia-btn--line,
.elementor-button-wrapper .elementor-button.ia-btn--line,
.elementor-button.ia-btn--line {
  color: var(--ia-espresso);
  background-color: rgba(255, 255, 255, 0.72);
  background-image: none;
  border: 1px solid var(--ia-taupe);
  padding: 18px 34px;
}

.elementor-widget-button .elementor-button.ia-btn--line:hover,
.elementor-button-wrapper .elementor-button.ia-btn--line:hover,
.elementor-button.ia-btn--line:hover {
  background-color: var(--ia-taupe);
  border-color: var(--ia-taupe);
  color: var(--ia-espresso);
}

/* Elementor wraps button text in a span, keep it from adding its own spacing */

.elementor-button.ia-btn .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.elementor-button.ia-btn .elementor-button-text {
  flex-grow: 0;
}

.elementor-button.ia-btn .elementor-button-icon {
  transition: transform 0.3s ease;
}

.elementor-button.ia-btn:hover .elementor-button-icon {
  transform: translateX(4px);
}

/* headings */

.elementor-widget-heading .elementor-heading-title.ia-h1,
.elementor-heading-title.ia-h1 {
  font-family: var(--ia-display);
  font-weight: 200;
  font-size: clamp(46px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ia-walnut);
  margin: 0;
}

.elementor-widget-heading .elementor-heading-title.ia-h2,
.elementor-heading-title.ia-h2 {
  font-family: var(--ia-display);
  font-weight: 200;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ia-walnut);
  margin: 0;
}

.elementor-widget-heading .elementor-heading-title.ia-h3,
.elementor-heading-title.ia-h3 {
  font-family: var(--ia-display);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ia-walnut);
  margin: 0;
}

.elementor-heading-title.ia-h1 em,
.elementor-heading-title.ia-h2 em {
  font-style: italic;
  color: var(--ia-taupe-base);
}

/* heading used as an eyebrow */

.elementor-widget-heading .elementor-heading-title.ia-eyebrow,
.elementor-heading-title.ia-eyebrow {
  font-family: var(--ia-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ia-taupe);
  margin: 0 0 26px;
}

/* text editor body copy */

.elementor-widget-text-editor.ia-copy,
.elementor-widget-text-editor.ia-copy p {
  font-family: var(--ia-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ia-stone);
}

.elementor-widget-text-editor.ia-copy p {
  margin: 0 0 20px;
  max-width: 48ch;
}

.elementor-widget-text-editor.ia-copy p:last-child {
  margin-bottom: 0;
}

.elementor-widget-text-editor.ia-copy--on-greige,
.elementor-widget-text-editor.ia-copy--on-greige p {
  font-weight: 400;
  color: var(--ia-clay);
}

.elementor-widget-text-editor.ia-copy--on-taupe,
.elementor-widget-text-editor.ia-copy--on-taupe p {
  font-weight: 400;
  color: var(--ia-bark);
}

/* icon list styled as a hairline list */

.elementor-widget-icon-list.ia-list-native .elementor-icon-list-items {
  border-top: 1px solid var(--ia-line);
}

.elementor-widget-icon-list.ia-list-native .elementor-icon-list-item {
  border-bottom: 1px solid var(--ia-line);
  padding: 15px 0;
}

.elementor-widget-icon-list.ia-list-native .elementor-icon-list-item:last-child {
  border-bottom: 0;
}

.elementor-widget-icon-list.ia-list-native .elementor-icon-list-text {
  font-family: var(--ia-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--ia-walnut);
}

.elementor-widget-icon-list.ia-list-native .elementor-icon-list-icon svg,
.elementor-widget-icon-list.ia-list-native .elementor-icon-list-icon i {
  color: var(--ia-taupe);
  width: 17px;
  height: 17px;
}

/* image widget in a media frame */

.elementor-widget-image.ia-shot img {
  display: block;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 28px 64px rgba(74, 64, 52, 0.18);
  transition: transform 1.1s var(--ia-ease);
}

.elementor-widget-image.ia-shot:hover img {
  transform: scale(1.04);
}

.elementor-widget-image.ia-shot {
  overflow: hidden;
  border-radius: 4px;
}


/* --------------------------------------------------------------------------
   20. Native widget reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .elementor-button.ia-btn,
  .elementor-button.ia-btn .elementor-button-icon,
  .elementor-widget-image.ia-shot img {
    transition: none;
  }

  .elementor-widget-image.ia-shot:hover img {
    transform: none;
  }
}