/* banner + nav active (shared pattern) */
.page-banner{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--ink),var(--teal-dark));
  color:var(--mint);padding:70px 0 56px;
}
.page-banner .eyebrow{color:var(--gold);}
.page-banner h1{font-size:clamp(2.2rem,4.5vw,3.2rem);margin-top:8px;color:var(--white);}
.page-banner .crumb{margin-top:14px;font-size:0.85rem;color:rgba(239,246,243,0.65);}
.page-banner .crumb a{color:var(--gold);}
.page-banner .crumb span{margin:0 6px;}
.banner-sweep{
  position:absolute;top:0;left:-30%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent, rgba(242,200,121,0.12), transparent);
  animation:bannerSweep 5s ease-in-out infinite;
}
@keyframes bannerSweep{0%{left:-30%;}50%{left:110%;}100%{left:110%;}}
.nav a.active{color:var(--coral);font-weight:700;}

/* ===== about main split ===== */
.about-main{padding:110px 0;overflow:hidden;}
.about-main-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}

/* left content — staggered entrance, triggered by .about-copy-pro.in */
.about-copy-pro .stagger{
  opacity:0;transform:translateX(-34px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.about-copy-pro.in .s1{transition-delay:.05s;}
.about-copy-pro.in .s2{transition-delay:.16s;}
.about-copy-pro.in .s3{transition-delay:.27s;}
.about-copy-pro.in .s4{transition-delay:.38s;}
.about-copy-pro.in .s5{transition-delay:.49s;}
.about-copy-pro.in .s6{transition-delay:.60s;}
.about-copy-pro.in .s7{transition-delay:.71s;}
.about-copy-pro.in .stagger{opacity:1;transform:translateX(0);}

.about-copy-pro p{color:#3c5254;max-width:500px;margin:14px 0;}
.about-copy-pro h2{margin-top:6px;}

.stat-row{display:flex;gap:34px;margin:30px 0;flex-wrap:wrap;}
.stat-item strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--teal);}
.stat-item span{font-size:0.78rem;color:#5b6f70;}

/* ===== modern floating image collage ===== */
.about-collage{position:relative;height:460px;}
.collage-photo{
  position:absolute;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
  border:6px solid var(--white);
}
.collage-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-a{width:62%;height:64%;top:0;left:4%;z-index:2;animation:floatY 6s ease-in-out infinite;}
.photo-b{width:48%;height:46%;bottom:2%;right:0;z-index:3;animation:floatY 7s ease-in-out infinite 1.2s;}
.photo-c{width:36%;height:34%;top:12%;right:4%;z-index:1;animation:floatY 5.5s ease-in-out infinite .6s;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

.collage-ring{
  position:absolute;width:190px;height:190px;border-radius:50%;
  border:1px dashed var(--teal);opacity:0.4;
  top:38%;left:14%;
  animation:collageSpin 22s linear infinite;
}
@keyframes collageSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.collage-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--gold);animation:dotPulse 2.6s ease-in-out infinite;}
.d1{top:6%;left:0;}
.d2{bottom:8%;left:40%;animation-delay:1s;}
@keyframes dotPulse{0%,100%{transform:scale(0.7);opacity:0.5;}50%{transform:scale(1.3);opacity:1;}}

.collage-badge{
  position:absolute;bottom:8%;left:0;z-index:4;
  background:var(--ink);color:var(--white);
  padding:16px 20px;border-radius:14px;box-shadow:var(--shadow);
  animation:floatY 6.5s ease-in-out infinite .3s;
}
.collage-badge strong{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--gold);}
.collage-badge span{font-size:0.72rem;color:rgba(239,246,243,0.8);}

/* ===== services overview cards (link-style) ===== */
.treat-card{display:block;text-align:left;text-decoration:none;color:inherit;}
.treat-card .treat-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:14px;font-size:1.5rem;margin-bottom:16px;
  background:var(--white);transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.treat-card:hover .treat-icon{transform:rotate(-10deg) scale(1.12);}
.treat-card h3{font-size:1.2rem;margin-bottom:6px;}
.treat-card p{color:#3c5254;font-size:0.92rem;}

/* ===== beautiful features section ===== */
.about-features{background:var(--teal-dark);}
.about-features .eyebrow{color:var(--gold);}
.section-title.light{color:var(--white);}

.pro-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.pro-feature{
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;padding:30px 24px;text-align:left;
  transition:transform .4s ease, background .4s ease, border-color .4s ease;
}
.pro-feature:hover{
  transform:translateY(-10px);
  background:rgba(255,255,255,0.08);
  border-color:rgba(242,200,121,0.4);
}
.pro-feature-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;font-size:1.6rem;margin-bottom:18px;
  background:linear-gradient(135deg,var(--teal),var(--coral));
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.pro-feature:hover .pro-feature-icon{transform:rotate(-10deg) scale(1.15);}
.pro-feature h4{font-family:var(--font-display);font-size:1.1rem;color:var(--white);margin-bottom:8px;}
.pro-feature p{color:rgba(239,246,243,0.68);font-size:0.9rem;}

/* ===== responsive ===== */
@media (max-width:900px){
  .about-main-grid{grid-template-columns:1fr;}
  .about-collage{order:-1;height:340px;}
  .pro-feature-grid{grid-template-columns:1fr 1fr;}
  .about-copy-pro .stagger{transform:translateY(20px);}
}
@media (max-width:560px){
  .pro-feature-grid{grid-template-columns:1fr;}
  .stat-row{gap:22px;}
}
@media (prefers-reduced-motion: reduce){
  .about-copy-pro .stagger{transition:opacity .3s ease;transform:none!important;}
  .collage-photo,.collage-ring,.collage-dot,.collage-badge,.banner-sweep{animation:none!important;}
}