:root{
  --bg:#ffffff;
  --text:#2f2f2f;
  --muted:#6e6e6e;
  --muted-2:#8b8b8b;
  --line:#e9e9e9;

  --teal:#00c3b3;
  --pink:#ff3b6f;
  --blue:#0aa0ff;

  --container:1280px;
  --radius:14px;
  --shadow:0 14px 28px rgba(0,0,0,.08);

  --card-bg:#fbfbfb;
  --card-border:#eeeeee;
}

*{box-sizing:border-box}
html{
  height:100%;
  overflow-x:hidden;
}
body{
  min-height:100%;
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.45;
  overflow-x:hidden;
}

/* ===== GLOBAL: Prevent mid-word breaking for ALL headings (ALL SCREENS) ===== */
/* This applies to ALL pages and ALL screen sizes */
h1, h2, h3, h4, h5, h6 {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  word-spacing: normal !important;
  white-space: normal !important;
}

/* Specific heading classes for about page */
.about-story__title,
.about-story__lead,
.about-values__title,
.about-values__subtitle,
.about-values__card-title,
.about-process__title,
.about-process__subtitle,
.about-process__step-title {
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
}

/* All paragraphs */
p,
.about-story__lead,
.about-story__text,
.about-values__card-text,
.about-process__step-text,
.about-process__subtitle {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

img{max-width:100%;display:block}
a{color:inherit}

.container{
  width:min(var(--container), calc(100% - 48px));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  background:#111;
  color:#fff;
  border-radius:10px;
  transform:translateY(-160%);
  transition:transform .18s ease;
  z-index:10000;
}
.skip-link:focus{transform:translateY(0)}

/* Focus visibility */
:where(a,button,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:3px solid rgba(0, 195, 179, .55);
  outline-offset:3px;
  border-radius:10px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Header row 1 */
.topbar{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.topbar__inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding:18px 0;
  gap:16px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand__mark{
  font-weight:800;
  letter-spacing:.5px;
  font-size:42px;
  color:var(--teal);
}

.topbar__center{
  display:flex;
  justify-content:center;
}
.topbar__right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.toplink{
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
}
.toplink:hover{color:#3a3a3a;text-decoration:underline}

/* Language dropdown */
.lang__flag{
  display:inline-flex;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.lang__chev{font-size:12px;color:var(--muted-2)}
.lang-menu{position:relative}
.lang-menu__trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  padding:6px 8px;
  color:var(--muted);
  cursor:pointer;
  font-size:14px;
  border-radius:10px;
}
.lang-menu__trigger:hover{color:#3a3a3a}
.lang-menu__trigger:hover{background:rgba(0,0,0,.02)}
.lang-menu__list{
  position:absolute;
  right:0;
  top:100%;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 18px 36px rgba(0,0,0,.12);
  border-radius:14px;
  padding:6px 0;
  min-width:210px;
  margin:0;
  list-style:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:1000;
}
.lang-menu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:12px;
}
.lang-menu:hover .lang-menu__list,
.lang-menu:focus-within .lang-menu__list,
.lang-menu[data-open="true"] .lang-menu__list{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.lang-menu[data-suppress="true"] .lang-menu__list{
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(-4px) !important;
  pointer-events:none !important;
}
.lang-menu__option{
  width:100%;
  border:0;
  background:transparent;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#5f5f5f;
  font-size:14px;
  cursor:pointer;
  text-align:left;
}
.lang-menu__option:hover{background:rgba(0,0,0,.04); color:#2f2f2f}
.lang-menu__option[aria-selected="true"]{color:#1f1f1f; font-weight:700}
.lang-menu__flag{width:18px; display:inline-flex; justify-content:center}

/* Header row 2 */
.mainnav{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.mainnav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.mainnav__links{display:flex;align-items:center;gap:14px}
.navlist{
  display:flex;
  align-items:center;
  gap:22px;
  list-style:none;
  padding:0;
  margin:0;
}
.navlink{
  text-decoration:none;
  color:#4a4a4a;
  font-size:15px;
}
.navlink:hover{color:#1f1f1f}
.mainnav__right{
  display:flex;
  align-items:center;
  gap:12px;
}
.contact{
  text-decoration:none;
  font-size:15px;
  color:#3a3a3a;
}
.contact:hover{text-decoration:underline}
.icon-btn{
  border:0;
  background:transparent;
  padding:8px;
  border-radius:12px;
  cursor:pointer;
  color:#3b3b3b;
}
.icon-btn:hover{background:rgba(0,0,0,.04)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.1px;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
}
.btn--outline{
  background:transparent;
  border:2px solid currentColor;
}
.btn--neutral{
  color:#ff3b6f;
  border-color:rgba(255, 59, 111, .7);
  padding:10px 16px;
  font-weight:600;
}
.btn--neutral:hover{background:rgba(255, 59, 111, .06)}
.btn--pink{
  color:var(--pink);
  border-color:rgba(255, 59, 111, .9);
  padding:14px 18px;
  width:fit-content;
}
.btn--pink:hover{background:rgba(255, 59, 111, .07)}
.btn__icon{display:inline-flex}

/* Mobile menu */
.mainnav__toggle{display:none}
.mobile-menu{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:9999;
}
.mobile-menu__panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(360px, 88vw);
  background:#fff;
  box-shadow:0 18px 46px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
}
.mobile-menu__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 16px 10px;
  border-bottom:1px solid var(--line);
}
.mobile-menu__title{font-weight:800;color:#3a3a3a}
.mobile-menu__list{
  list-style:none;
  padding:10px 0;
  margin:0;
}
.mobile-menu__link{
  display:flex;
  padding:14px 16px;
  text-decoration:none;
  color:#3a3a3a;
  font-weight:600;
}
.mobile-menu__link:hover{background:rgba(0,0,0,.04)}
.mobile-menu__footer{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding:10px 0;
}

/* Sticky CTA */
.sticky-cta{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:16px;
  background:#4b1fb8;
  color:#fff;
  border:0;
  padding:14px 22px;
  border-radius:6px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  cursor:pointer;
  z-index:9997;
}
.sticky-cta:hover{background:#3f1aa0}
.sticky-cta[hidden]{display:none !important}
.sticky-cta__icon{display:inline-flex}

/* Footer */
.site-footer{
  background:#fafafa;
  border-top:1px solid var(--line);
  padding:68px 0 130px;
}
.footer__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
  flex-wrap:wrap;
}
.footer__intro{
  flex: 1 1 260px;
  max-width:360px;
}
.footer__brand .brand__mark{font-size:36px}
.footer__blurb{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.footer__grid{
  flex: 1 1 520px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:34px;
}
.footer__heading{
  margin:0 0 12px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8d8d8d;
  font-weight:800;
}
.footer__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.footer__list a,
.footer__mini a{
  text-decoration:none;
  color:var(--muted);
  font-size:14px;
}
.footer__list a:hover,
.footer__mini a:hover{
  text-decoration:underline;
  color:#3a3a3a;
}
.footer__bottom{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  color:var(--muted);
  font-size:13px;
}
.footer__mini{display:flex; gap:16px; flex-wrap:wrap}

/* Shared responsive */
@media (max-width: 1100px){
  .topbar__inner{grid-template-columns: 1fr auto 1fr}
  .brand__mark{font-size:38px}
}
@media (max-width: 900px){
  .topbar__inner{
    grid-template-columns: 1fr;
    justify-items:start;
    align-items:start;
  }
  .topbar__center{justify-content:flex-start}
  .topbar__right{justify-content:flex-start}
  .navlist{display:none}
  .mainnav__toggle{display:inline-flex}
}
@media (max-width: 600px){
  .sticky-cta{width:min(520px, calc(100% - 32px)); justify-content:center}
}
@media (max-width: 520px){
  .container{width:min(var(--container), calc(100% - 32px))}
  .brand__mark{font-size:36px}
  .btn{width:100%}
  .btn--neutral{width:100%}
  .site-footer{padding:54px 0 68px}
  .footer__grid{grid-template-columns: 1fr}
}
/* Page */
.page-hero{
  background:#fbfbfb;
  border-bottom:1px solid var(--line);
}
.page-hero__inner{
  padding:54px 0 34px;
}
.page-hero__title{
  margin:0;
  font-size:44px;
  letter-spacing:-.5px;
  color:#2f2f2f;
  font-weight:800;
}
.page-hero__subtitle{
  margin:10px 0 0;
  max-width:820px;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}
.page-blocks{background:#fff}
.page-blocks .container{padding:34px 0 84px}
.page-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:24px;
}
.page-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:20px 18px;
}
.page-card__title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
  color:#2f2f2f;
}
.page-card__text{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}
.page-actions{margin-top:18px}
@media (max-width: 1000px){
  .page-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .page-hero__title{font-size:40px}
}
@media (max-width: 600px){
  .page-grid{grid-template-columns: 1fr}
  .page-hero__inner{padding:46px 0 28px}
  .page-hero__title{font-size:36px}
}

/* About Page Specific Styles */
/* Story Section */
.about-story{
  padding:68px 0;
  background:#fff;
}
.about-story__layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:68px;
  align-items:center;
}
.about-story__title{
  margin:0 0 20px;
  font-size:48px;
  font-weight:800;
  letter-spacing:-.5px;
  color:#2f2f2f;
  line-height:1.2;
  /* CRITICAL: Prevent ANY word breaking in the middle */
  word-break: normal !important;
  overflow-wrap: normal !important;  /* Only break at word boundaries */
  word-wrap: normal !important;      /* Legacy support */
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  /* Additional properties to prevent breaking */
  word-spacing: normal;
  white-space: normal;
  /* Ensure text doesn't force breaks */
  max-width: 100%;
  box-sizing: border-box;
}
.about-story__lead{
  margin:0 0 18px;
  font-size:18px;
  line-height:1.7;
  color:#2f2f2f;
  font-weight:600;
}
.about-story__text{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}
/* Values Section */
.about-values{
  padding:68px 0;
  background:#fbfbfb;
  border-top:1px solid var(--line);
}
.about-values__header{
  text-align:center;
  max-width:680px;
  margin:0 auto 48px;
}
.about-values__title{
  margin:0 0 14px;
  font-size:36px;
  font-weight:800;
  letter-spacing:-.3px;
  color:#2f2f2f;
}
.about-values__subtitle{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}
.about-values__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:32px;
}
.about-values__card{
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:32px 24px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  text-align:center;
}
.about-values__icon{
  width:64px;
  height:64px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  color:#fff;
}
.about-values__icon--teal{background:rgba(0, 195, 179, .12); color:var(--teal)}
.about-values__icon--pink{background:rgba(255, 59, 111, .12); color:var(--pink)}
.about-values__icon--yellow{background:rgba(255, 186, 80, .12); color:#f2a50c}
.about-values__card-title{
  margin:0 0 12px;
  font-size:20px;
  font-weight:800;
  color:#2f2f2f;
}
.about-values__card-text{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
/* Process Section */
.about-process{
  padding:68px 0;
  background:#fff;
  border-top:1px solid var(--line);
}
.about-process__header{
  text-align:center;
  max-width:680px;
  margin:0 auto 54px;
}
.about-process__title{
  margin:0 0 14px;
  font-size:36px;
  font-weight:800;
  letter-spacing:-.3px;
  color:#2f2f2f;
}
.about-process__subtitle{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}
/* Enhanced Process Section with Decorative Strikes */
.about-process__steps{
  max-width:780px;
  margin:0 auto 38px;
  display:grid;
  gap:0;
  position:relative;
  /* Prevent clipping */
  overflow:visible;
}

/* Connecting line between steps */
.about-process__steps::before{
  display:none !important;
}

.about-process__steps.animate-connector::before{
  display:none !important;
}

.about-process__step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  align-items:start;
  padding:32px 0;
  position:relative;
  z-index:1;
  opacity:0;
  transform:translateX(-40px);
  transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
  /* Prevent overflow clipping */
  overflow:visible;
}

.about-process__step.animate-in{
  opacity:1;
  transform:translateX(0);
}

/* Decorative strike through step number */
.about-process__step-number{
  font-size:48px;
  font-weight:800;
  color:var(--teal);
  opacity:0.15;
  line-height:1;
  position:relative;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  background:rgba(0,195,179,0.05);
  border-radius:12px;
  border:2px solid transparent;
}

/* Remove the X strike-through effect completely */
.about-process__step-number::before,
.about-process__step-number::after{
  display:none;
}

.about-process__step.animate-in .about-process__step-number{
  opacity:1;
  background:rgba(0,195,179,0.1);
  border-color:rgba(0,195,179,0.2);
  transform:scale(1);
  animation:stepNumberPop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.about-process__step:hover .about-process__step-number{
  opacity:1;
  transform:scale(1.15);
  background:rgba(0,195,179,0.15);
  border-color:var(--teal);
  box-shadow:0 8px 24px rgba(0,195,179,0.2);
}

/* Step number pop animation */
@keyframes stepNumberPop{
  0%{
    opacity:0;
    transform:scale(0.5) rotate(-10deg);
  }
  60%{
    transform:scale(1.1) rotate(5deg);
  }
  100%{
    opacity:1;
    transform:scale(1) rotate(0deg);
  }
}

/* Step content lazy load animation */
.about-process__step-content{
  opacity:0;
  transform:translateY(20px);
  transition:all 0.6s ease 0.2s;
  /* Prevent clipping */
  overflow:visible;
  position:relative;
  z-index:1;
}

.about-process__step.animate-in .about-process__step-content{
  opacity:1;
  transform:translateY(0);
}

/* Decorative strike divider between steps */
.about-process__step::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--teal) 20%,var(--pink) 50%,var(--teal) 80%,transparent 100%);
  transition:width 0.8s ease 0.4s;
  z-index:2;
}

.about-process__step.animate-in::after{
  width:100%;
}

.about-process__step:last-child::after{
  display:none;
}

/* Title hover: underline accent (no color flip / no shift) */
.about-process__step-title{
  margin:0 0 10px;
  font-size:22px;
  font-weight:800;
  color:#2f2f2f;
  position:relative;
  display:inline-block;
  transition:color .25s ease,transform .25s ease;
}

/* Underline accent */
.about-process__step-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--teal));
  transition:width .35s ease;
}

.about-process__step:hover .about-process__step-title{
  color:#2f2f2f;
  transform:none;
  padding:0;
}

.about-process__step:hover .about-process__step-title::after{
  width:100%;
}

/* IMPORTANT: disable any old "strike" line if it still exists */
.about-process__step-title::before{
  display:none !important;
}

/* Step text lazy load with stagger */
.about-process__step-text{
  margin:0 0 16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
  opacity:0;
  transform:translateY(10px);
  transition:all 0.5s ease 0.3s;
}

.about-process__step.animate-in .about-process__step-text{
  opacity:1;
  transform:translateY(0);
}

/* Disable the dot completely */
.about-process__step::before{
  display:none !important;
}
.about-process__step.animate-in::before{
  display:none !important;
}
.about-process__step:hover::before{
  display:none !important;
}

/* Remove old hover effects that conflict */
.about-process__step:hover{
  padding-left:0;
}
.about-process__cta{
  text-align:center;
}
/* Responsive */
@media (max-width: 1100px){
  .about-story__layout{
    grid-template-columns: 1fr;
    gap:48px;
  }
}
@media (max-width: 900px){
  .about-values__grid{grid-template-columns: 1fr}
  .about-story__title{font-size:40px}
}
@media (max-width: 600px){
  /* Ensure text wrapping rules are maintained on mobile */
  * {
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
  }

  .lang-menu__list{
    right:auto;
    left:0;
    transform:translateY(-4px);
  }
  .lang-menu[data-open="true"] .lang-menu__list{
    transform:translateY(0);
  }

  /* Override any aggressive word-breaking that might exist */
  p, h1, h2, h3, h4, h5, h6, li, span, div, a, button {
    word-break: normal !important;
    hyphens: none !important;
    overflow-wrap: break-word !important;
  }

  .about-story,
  .about-values,
  .about-process{
    padding:48px 0;
  }
  .about-story__title{font-size:36px}
  .about-values__title,
  .about-process__title{font-size:32px}
  
  .about-process__step{
    grid-template-columns:1fr;
    gap:16px;
    padding-left:48px;
  }
  
  .about-process__step-number{
    position:absolute;
    left:0;
    top:0;
    width:36px;
    height:36px;
    font-size:24px;
  }
  
  .about-process__step-title:hover{
    transform:none;
    padding:0;
  }
  
  .about-process__step{
    overflow:visible;
  }
  
  .about-process__step-content{
    overflow:visible;
  }
}

/* Animations and Effects */
/* Scroll-triggered fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Letter-by-letter animation */
@keyframes letterAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Initial hidden state for animated elements */
[data-animate] {
  opacity: 0;
}

[data-animate].animate-in {
  animation-fill-mode: forwards;
}

[data-animate="fade-up"].animate-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

[data-animate="slide-right"].animate-in {
  animation: slideInRight 0.6s ease-out forwards;
}

[data-animate="scale"].animate-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Delay classes */
[data-delay="100"].animate-in { animation-delay: 0.1s; }
[data-delay="200"].animate-in { animation-delay: 0.2s; }
[data-delay="300"].animate-in { animation-delay: 0.3s; }
[data-delay="400"].animate-in { animation-delay: 0.4s; }

/* Letter-by-letter animation for titles */
[data-animate="letters"] {
  opacity: 1;
}

[data-animate="letters"] .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: letterAppear 0.4s ease-out forwards;
}

/* Enhanced hover effects */
.about-values__card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
               box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.about-values__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s ease;
}

.about-values__card:hover::before {
  left: 100%;
}

.about-values__card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--teal);
}

.about-values__icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
               background-color 0.3s ease;
}

.about-values__card:hover .about-values__icon {
  transform: scale(1.1) rotate(5deg);
}

.about-values__icon--teal:hover { background: rgba(0, 195, 179, 0.18) !important; }
.about-values__icon--pink:hover { background: rgba(255, 59, 111, 0.18) !important; }
.about-values__icon--yellow:hover { background: rgba(255, 186, 80, 0.18) !important; }

/* Process step animations */

/* Stats animation */
.about-story__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 38px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}

.about-story__stat {
  text-align: center;
}

.about-story__stat-number {
  font-size: 42px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.about-story__stat-number--icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
  color: var(--teal);
}

.about-story__stat-icon{
  width: 54px;
  height: 54px;
  display:block;
}

.about-story__stat-label {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* Step list items lazy load with stagger */
.about-process__step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease 0.4s;
}

.about-process__step.animate-in .about-process__step-list {
  opacity: 1;
  transform: translateY(0);
}

.about-process__step-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s ease;
}

.about-process__step.animate-in .about-process__step-list li {
  opacity: 1;
  transform: translateX(0);
}

.about-process__step.animate-in .about-process__step-list li:nth-child(1) {
  transition-delay: 0.5s;
}

.about-process__step.animate-in .about-process__step-list li:nth-child(2) {
  transition-delay: 0.6s;
}

.about-process__step.animate-in .about-process__step-list li:nth-child(3) {
  transition-delay: 0.7s;
}

/* Arrow icon for list items */
.about-process__step-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.about-process__step:hover .about-process__step-list li::before {
  opacity: 1;
  transform: rotate(-45deg) translateX(4px);
  border-color: var(--pink);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .about-values__card,
  .about-process__step,
  .about-process__step-content,
  .about-process__step-text,
  .about-process__step-list,
  .about-process__step-list li,
  .about-process__steps::before,
  
  [data-animate] {
    opacity: 1;
  }
  
  .about-process__step.animate-in {
    opacity: 1;
    transform: none;
  }
}

/* Responsive adjustments for stats */
@media (max-width: 700px) {
  .about-story__stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .about-story__stat-number {
    font-size: 36px;
  }
}

/* ===== about.html — fix horizontal overflow on very small screens (≤360px) ===== */
@media (max-width: 360px) {
  /* Ensure text wrapping rules are maintained on very small screens */
  * {
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
  }

  /* Prevent any word-breaking overrides */
  .about-story__title,
  .about-story__lead,
  .about-story__text,
  .services__title,
  .panel__title,
  .panel__desc,
  .contact-section p,
  .result-card__title,
  .result-card__desc,
  .hero__title,
  .hero__desc,
  .provider__title,
  .provider__subtitle,
  .why__title,
  .why__desc {
    word-break: normal !important;
    hyphens: none !important;
    overflow-wrap: break-word !important;
  }

  /* Prevent page-level horizontal scroll */
  html, body {
    overflow-x: hidden;
  }

  /* Reduce container padding to maximize usable width */
  .container {
    width: calc(100% - 16px);
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }

  /* Fix header topbar: ensure button text wraps */
  .topbar__inner {
    gap: 12px;
  }

  .btn--neutral {
    font-size: 12px;
    padding: 8px 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  /* Reduce topbar right gap */
  .topbar__right {
    gap: 8px;
  }

  /* Ensure brand doesn't overflow */
  .brand__mark {
    font-size: 28px;
  }

  /* ===== STORY SECTION: Fix text overflow and center content ===== */
  /* Ensure story layout can shrink */
  .about-story__layout {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  /* Story content container - center and prevent overflow */
  .about-story__content {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
    text-align: left; /* Keep text left-aligned for readability, container is centered */
    padding: 0 4px;
  }

  /* Fix story title - wrap at word boundaries only, NO hyphens */
  .about-story__title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    overflow-wrap: normal !important;  /* Only breaks between words */
    word-break: normal !important;         /* Prevents breaking words in the middle */
    hyphens: none !important;              /* No hyphenation */
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center !important; /* Center the heading */
    margin-left: auto;
    margin-right: auto;
  }

  /* Fix story lead paragraph - wrap at word boundaries only, NO hyphens */
  .about-story__lead {
    font-size: 16px !important;
    line-height: 1.6 !important;
    overflow-wrap: normal !important;  /* Only breaks between words */
    word-break: normal !important;         /* Prevents breaking words in the middle */
    hyphens: none !important;              /* No hyphenation */
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
    text-align: center !important; /* Center the lead text */
  }

  /* Fix story body text - wrap at word boundaries only, NO hyphens */
  .about-story__text {
    font-size: 14px !important;
    line-height: 1.7 !important;
    overflow-wrap: normal !important;  /* Only breaks between words */
    word-break: normal !important;         /* Prevents breaking words in the middle */
    hyphens: none !important;              /* No hyphenation */
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
    text-align: left; /* Keep body text left-aligned for readability */
  }

  /* Fix stats grid: ensure single column and reduce gaps */
  .about-story__stats {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 24px;
    margin-top: 24px;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    justify-items: center;
  }

  .about-story__stat-number {
    font-size: 32px;
  }

  /* Fix process steps: remove left padding that causes overflow */
  .about-process__step {
    padding-left: 0 !important;
    padding-right: 0;
    gap: 12px;
  }

  .about-process__step-number {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 32px;
    height: 32px;
    font-size: 20px;
  }

  /* Ensure step content wraps at word boundaries only */
  .about-process__step-title,
  .about-process__step-text,
  .about-process__step-list,
  .about-process__step-list li {
    overflow-wrap: break-word !important;  /* Only breaks between words */
    word-break: normal !important;         /* Prevents breaking words in the middle */
    hyphens: none !important;              /* No hyphenation */
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Fix values section - wrap at word boundaries only */
  .about-values__title,
  .about-values__subtitle,
  .about-values__card-title,
  .about-values__card-text {
    overflow-wrap: break-word !important;  /* Only breaks between words */
    word-break: normal !important;         /* Prevents breaking words in the middle */
    hyphens: none !important;              /* No hyphenation */
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Fix process section titles - wrap at word boundaries only */
  .about-process__title,
  .about-process__subtitle {
    overflow-wrap: break-word !important;  /* Only breaks between words */
    word-break: normal !important;         /* Prevents breaking words in the middle */
    hyphens: none !important;              /* No hyphenation */
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Ensure all grid children can shrink */
  .about-story__layout,
  .about-values__grid,
  .about-process__steps {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Fix sticky CTA */
  .sticky-cta {
    width: calc(100% - 16px);
    max-width: 260px;
    font-size: 13px;
    padding: 12px 16px;
    white-space: normal;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
  }
}

/* Extra small screens (≤280px) - even more aggressive fixes */
@media (max-width: 280px) {
  .container {
    width: calc(100% - 12px);
    padding-left: 6px;
    padding-right: 6px;
  }

  .about-story__title {
    font-size: 22px !important;
    letter-spacing: -0.3px;
  }

  .about-story__lead {
    font-size: 15px !important;
  }

  .about-story__text {
    font-size: 13px !important;
  }

  .sticky-cta {
    width: calc(100% - 12px);
    max-width: 240px;
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* ===== Global: Natural word wrapping - no hyphens, no mid-word breaking (ALL SCREENS) ===== */
/* Apply to all text elements globally */
* {
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
}

/* Allow wrapping at word boundaries only (between words, not within words) */
p, h1, h2, h3, h4, h5, h6, li, ul, ol,
span, div, a, button,
.hero__title, .hero__desc,
.services__title, .services__lead, .panel__title, .panel__desc,
.provider__title, .provider__subtitle,
.why__title, .why__desc,
.about-story__title, .about-story__lead, .about-story__text,
.about-values__title, .about-values__subtitle, .about-values__card-title, .about-values__card-text,
.about-process__title, .about-process__subtitle, .about-process__step-title, .about-process__step-text,
.contact-section, .contact-info, .form-label, .form-input, .form-textarea,
.services-intro, .services-package, .services-included,
.results-section__title, .results-section__lead, .result-card__title, .result-card__desc,
.footer__blurb, .footer__list a,
.btn, .toplink, .navlink,
.checklist, .checklist li,
.about-story__stat-label,
.about-process__step-list, .about-process__step-list li {
  overflow-wrap: break-word;  /* Only breaks at word boundaries */
  word-wrap: break-word;       /* Legacy support */
  word-break: normal;          /* Prevents breaking words in the middle */
  hyphens: none;               /* No hyphenation */
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
}

/* Ensure text elements can wrap properly */
p, div, span, h1, h2, h3, h4, h5, h6 {
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== Desktop/Tablet: Ensure word-breaking rules apply ===== */
@media (min-width: 601px) {
  /* Force word-breaking rules on all headings for desktop/tablet */
  h1, h2, h3, h4, h5, h6 {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
  }

  /* Specific heading classes */
  .about-story__title {
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    /* Ensure container allows proper wrapping */
    max-width: 100%;
    box-sizing: border-box;
  }

  .about-story__lead,
  .about-story__text,
  .about-values__title,
  .about-process__title {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

/* Large desktop screens - extra enforcement */
@media (min-width: 1200px) {
  .about-story__title {
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
  }
}