/* =========================================================
   ABOUT / PROMISE — CLEAN, DEDUPED, COMMENTED
   Includes:
   - Full-bleed background (desktop + mobile swap)
   - Harmonized copy card + service badge + animated dot
   - Photo polish + badge
   - Buttons layout
   - NEW: Promise card icon tile hover becomes transparent (not red)
   ========================================================= */

/* =========================================================
   1) SECTION SPACING + LAYOUT
   ========================================================= */
#about.about.ca-light.section{
  padding-top: clamp(3.15rem, 4vw, 4.15rem);
  padding-bottom: clamp(5.75rem, 7.5vw, 8.25rem);
  position: relative;
  overflow: hidden;
}

#about .about-hero-row{
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem) !important;
}

/* Right column rhythm */
#about .about-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keep headline + copy left-aligned */
}


/* Typography polish (bigger, responsive, overrides template) */
#about .about-content h2{
  font-size: clamp(2.15rem, 1.55rem + 2.1vw, 3.15rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  text-wrap: balance;
  margin-bottom: clamp(.65rem, .45rem + .6vw, 1rem) !important;
}

/* Optional: tighten a hair on very small phones */
@media (max-width: 380px){
  #about .about-content h2{
    font-size: clamp(1.95rem, 1.5rem + 1.8vw, 2.45rem) !important;
  }
}



#about .about-copy-card .lead{
  line-height: 1.75;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

/* =========================================================
   ABOUT: BACKGROUND ART LAYER (DESKTOP + MOBILE SWAP)
   - NOTE: paths are directory-safe for /special-offer/ pages
   ========================================================= */

#about .about-bg{
  position: absolute;
  inset: -3px; /* prevents any tiny seam/gap */
  z-index: 0;
  pointer-events: none;

  background-image: url("../../assets/img/about/about-background.webp");
  background-repeat: no-repeat;
  background-size: cover;

  /* keep grass anchored */
  background-position: center bottom;

  opacity: 0.55;
  filter: saturate(0.98) contrast(0.98) brightness(1.02);
}

/* If your art has extra empty sky at top, nudge it up slightly on desktop */
@media (min-width: 992px){
  #about .about-bg{
    background-position: center 92%; /* try 88–96% if needed */
  }
}

/* Mobile background swap */
@media (max-width: 991.98px){
  #about .about-bg{
    background-image: url("../../assets/img/about/about-background-mobile.webp");
    background-position: center bottom;
    background-size: cover;
  }
}

/* Ensure section can contain the absolute bg */
#about{
  position: relative;
  overflow: hidden;
}

/* Ensure real content stays above the background */
#about .container{
  position: relative;
  z-index: 1;
}
/* =========================================================
   3) PHOTO POLISH + BADGE
   ========================================================= */
#about .about-photo-wrap{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1.15rem;
  box-shadow: 0 18px 46px rgba(6,30,37,.14);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  background: color-mix(in srgb, var(--surface-alt), transparent 35%);
}

#about .about-photo-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0) 42%, rgba(6,30,37,.14) 100%),
    linear-gradient(135deg, rgba(11,38,48,.10) 0%, rgba(42,120,166,.05) 100%);
  mix-blend-mode:multiply;
  opacity:.85;
}

#about .about-photo-wrap img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(.94) contrast(1.05) saturate(.94);
  transform: translateZ(0);
}

#about .about-photo-badge{
  position:absolute;
  z-index: 3;
  right: .9rem;
  bottom: .9rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding: .55rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-alt), #fff 30%);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
  box-shadow: 0 10px 22px rgba(6,30,37,.10);
  color: var(--heading-color);
  font-weight: 900;
  font-size: .92rem;
  line-height: 1;
  backdrop-filter: blur(.25rem);
}
#about .about-photo-badge i{ font-size: 1.05rem; }

/* =========================================================
   4) SERVICE BADGE (TOP LEVEL) + ANIMATED DOT
   ========================================================= */
#about .about-service-badge{
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;

  width: fit-content;
  margin: .4rem 0 1.1rem;

  padding: clamp(.5rem, .32rem + .4vw, .62rem) clamp(.85rem, .7rem + .5vw, 1.05rem);
  border-radius: 999px;

  font-weight: 850;
  font-size: clamp(.98rem, .9rem + .25vw, 1.08rem);
  line-height: 1.05;

  background: color-mix(in srgb, var(--background-color, #FBEBCB), #fff 55%);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 88%);
  color: color-mix(in srgb, var(--heading-color), var(--default-color) 20%);

  box-shadow: 0 10px 22px rgba(6,30,37,.06);
  position: relative;
  overflow: hidden;
}

#about .about-service-badge::after{
  content:"";
  position:absolute;
  inset:-65% -35%;
  pointer-events:none;
  background: radial-gradient(circle at 20% 25%,
    rgba(255,255,255,.42),
    rgba(255,255,255,0) 58%);
  opacity:.55;
}

/* Dot + ping ring */
#about .about-service-badge .asa-dot{
  width: clamp(.58rem, .52rem + .12vw, .66rem);
  height: clamp(.58rem, .52rem + .12vw, .66rem);
  border-radius: 999px;
  background: var(--accent-color);
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--accent-color), transparent 82%);
}

#about .about-service-badge .asa-dot::after{
  content:"";
  position:absolute;
  inset:-.42rem;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 35%);
  opacity: 0;
  transform: scale(.72);
  animation: asaPing 2.1s ease-out infinite;
}

@keyframes asaPing{
  0%   { opacity: 0; transform: scale(.72); }
  18%  { opacity: .55; }
  55%  { opacity: 0; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce){
  #about .about-service-badge .asa-dot::after{
    animation: none;
    opacity: 0;
  }
}

/* =========================================================
   5) COPY CARD (HARMONIZED + DIMENSIONAL)
   ========================================================= */
#about .about-copy-card{
  border-radius: 1.25rem;
  padding: clamp(1.05rem, .8rem + 1vw, 1.55rem);
  background: color-mix(in srgb, var(--background-color, #FBEBCB), var(--surface-alt) 70%);
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  box-shadow:
    0 18px 48px rgba(6,30,37,.10),
    0 1px 0 rgba(255,255,255,.55) inset;
  backdrop-filter: blur(.28rem);
  position: relative;
  overflow: hidden;
}

#about .about-copy-card::after{
  content:"";
  position:absolute;
  inset:-45% -45%;
  pointer-events:none;
  background: radial-gradient(circle at 22% 18%,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,0) 62%);
  transform: rotate(-10deg);
  opacity: .7;
}

#about .about-copy-card .lead:last-of-type{ margin-bottom: 0 !important; }

/* =========================================================
   6) ACTION BUTTONS
   ========================================================= */
#about .about-actions{
  margin-top: clamp(1.05rem, 1.4vw, 1.55rem);
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  align-items:center;
}

#about .about-btn-primary,
#about .about-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border-radius: .95rem;
  font-weight: 900;
  text-decoration:none;
}

#about .about-btn-primary{
  padding: .9rem 1.15rem;
  box-shadow: 0 10px 22px rgba(6,30,37,.14);
}

#about .about-btn-secondary{
  padding: .82rem 1.05rem;
}

/* =========================================================
   7) PROMISE ROW + ICON HOVER FIX (NO RED ON HOVER)
   ========================================================= */
#about .promise-row{
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

#about .promise-icon{
  width: clamp(44px, 3.2vw + 18px, 62px);
  height: auto;
  display:block;
}

#about .icon-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

/* If the icon sits in a colored "tile" (red square), make it transparent on hover.
   This targets the most common markup pattern: an <img> inside a rounded wrapper. */
#about .about-card .icon-wrap{
  border-radius: 1rem;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Hover: remove the colored background/border/shadow behind the icon (keeps the icon itself) */
#about .about-card:hover .icon-wrap{
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* If your red square is NOT .icon-wrap but a nested element,
   add that class here too, for example:
   #about .about-card:hover .icon-wrap .icon-tile{ ... }
*/

/* =========================================================
   8) RESPONSIVE REFINEMENTS
   ========================================================= */
@media (max-width: 991.98px){
  #about.about.ca-light.section{
    padding-top: clamp(3rem, 6vw, 3.75rem);
    padding-bottom: clamp(5rem, 9vw, 7rem);
  }
  #about .about-actions{ gap: .75rem; }
}



  /* Make emphasized words (like <strong>) use the heading font */
  p.lead strong,
  .lead strong {
    font-family: var(--heading-font) !important;
    font-weight: 700;               /* tweak 600–800 if you prefer */
    letter-spacing: 0.01em;         /* subtle “headline” feel */
    color: var(--heading-color);    /* keeps it aligned with headings */
  }

  /* Optional: if you also use <b> anywhere */
  p.lead b,
  .lead b {
    font-family: var(--heading-font) !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--heading-color);
  }



/* =========================================================
   TESTIMONIALS SECTION (BASE + TYPOGRAPHY + META + QUOTES)
   ========================================================= */

/* ---------------------------------------------------------
   0) HEADING FONT FALLBACK (only if globals aren’t applying)
   --------------------------------------------------------- */
:root{
  --heading-font: "Paytone One", system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------
   1) BASE SECTION LAYOUT (your existing rules, cleaned)
   --------------------------------------------------------- */
#testimonials.testimonials{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* was "showsolation" */
  padding-top: clamp(5rem, 8vw, 7.5rem);
  padding-bottom: clamp(5rem, 9vw, 9rem);
  min-height: clamp(38rem, 70vh, 52rem);

  /* -----------------------
     LEVERS (edit these)
     ----------------------- */
  --t-emphasis: var(--heading-color); /* used by <strong> + quote marks */
  --t-quote-tint: 28%;                /* higher = lighter quote marks */
  --t-name-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.2rem);
  --t-name-weight: 800;
  --t-quote-size: 1.15em;
  --t-quote-weight: 900;
  --t-quote-pad-left: .25rem;
  --t-meta-gap: .25rem;
  --t-link-size: .95rem;
  --t-link-weight: 600;
}

#testimonials.testimonials > .section-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.05);
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: .55;
}

#testimonials.testimonials > .container{
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   2) META LAYOUT: lock name row + link row
   --------------------------------------------------------- */
#testimonials.testimonials .testimonial-meta{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  row-gap: var(--t-meta-gap);
  align-items: start;
}

#testimonials.testimonials .testimonial-meta .testimonial-dot{
  display: none;
}

#testimonials.testimonials .testimonial-meta .testimonial-detail{
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font-size: var(--t-link-size);
  font-weight: var(--t-link-weight);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------------------------------------------------------
   3) NAME: heading font + clamp
   --------------------------------------------------------- */
#testimonials.testimonials .testimonial-meta .testimonial-name{
  font-family: var(--heading-font) !important;
  font-weight: var(--t-name-weight) !important;
  font-size: var(--t-name-size) !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  color: var(--heading-color) !important;
}

/* ---------------------------------------------------------
   4) QUOTES: decorative marks + softer tint
   --------------------------------------------------------- */
#testimonials.testimonials .testimonial-quote{
  position: relative;
  padding-left: var(--t-quote-pad-left);
}

#testimonials.testimonials .testimonial-quote::before,
#testimonials.testimonials .testimonial-quote::after{
  font-family: var(--heading-font) !important;
  font-weight: var(--t-quote-weight) !important;
  letter-spacing: .01em !important;
  line-height: 0 !important;
  font-size: var(--t-quote-size) !important;
  opacity: 1 !important;

  color: color-mix(in srgb, var(--t-emphasis), transparent var(--t-quote-tint)) !important;
}

#testimonials.testimonials .testimonial-quote::before{ content: "“ " !important; }
#testimonials.testimonials .testimonial-quote::after{ content: " ”" !important; }

/* ---------------------------------------------------------
   5) EMPHASIS: bolded phrase uses heading font + emphasis color
   --------------------------------------------------------- */
#testimonials.testimonials .testimonial-quote strong{
  font-family: var(--heading-font) !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  color: var(--t-emphasis) !important;
}


/* =========================================================
   PROMISE ICONS — ICON ONLY (NO TILE/OUTLINE) + CENTERED
   Put this AFTER your existing #about promise styles
   ========================================================= */

/* Center the icon row inside each promise card */
#about .icon-wrap{
  display: flex;
  align-items: center;
  justify-content: center; /* was flex-start */
  width: 100%;
}

/* Remove any "tile" styling that might be applied by template styles */
#about .icon-wrap,
#about .promise-icon{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Ensure the image itself isn't getting padding/rounded corners that create the tile look */
#about .promise-icon{
  padding: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
}

#about .promise-icon{
  width: clamp(60px, 4vw + 20px, 88px);
  height: auto;
  display: block;
}


/* =========================================================
   ABOUT / PROMISE — “Glass” Copy Card
   Purpose:
   1) Keep the decorative background layer behind content
   2) Give Jim’s copy card a subtle glass + gentle border depth
   Notes:
   - Only targets #about .about-copy-card (Jim’s words)
   - Avoids layout changes (no width/display tweaks)
   ========================================================= */

/* 1) Ensure the decorative background art stays behind everything */
#about{
  position: relative;
}
#about .about-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#about .container{
  position: relative;
  z-index: 1;
}

/* 2) Jim’s copy card — soft “glass” with a harmonized border */
#about .about-copy-card{
  position: relative;
  z-index: 2; /* keep it above the bg art layer */

  /* Glass surface */
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* Gentle border that blends into the sky/greens */
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 18px;

  /* Subtle “pressed in” depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),     /* top highlight */
    inset 0 -18px 28px rgba(6, 30, 37, 0.05), /* soft inner shade */
    0 6px 18px rgba(6, 30, 37, 0.06);         /* light separation */
}

/* Inner rim: adds a faint sage-tinted edge without looking “outlined” */
#about .about-copy-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(215, 232, 200, 0.22);
}