/* ==========================================================================
   Khushi Dental Care — About Us
   Loads on top of style.css (tokens, header, footer, buttons, motion layer).
   ========================================================================== */

/* .ruled lives in style.css — it is shared by About, Contact and Treatments. */

/* --- Hero ----------------------------------------------------------------- */
.page-hero{position:relative;background:var(--panel);overflow:hidden}
/* The curve and the clipping belong to the container: the image inside is
   scaled and parallaxed, so a radius on the image itself would be pushed
   out of view along with it. */
.page-hero-media{
  position:absolute;inset:0 0 0 auto;width:52%;overflow:hidden;
  border-bottom-left-radius:clamp(90px,17vw,250px);
  box-shadow:-20px 0 46px rgba(10,21,36,.07);
}
.page-hero-media img{
  width:100%;height:100%;object-fit:cover;
  /* main.js drives a scroll parallax on this transform. No CSS animation
     here — an inline transform would silently override it. */
  transform:scale(1.16);
}
.page-hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--panel) 0%,rgba(247,245,242,.75) 8%,rgba(247,245,242,0) 26%);
}
.page-hero-inner{position:relative;z-index:2;padding-block:48px 44px}
.page-hero-copy{max-width:560px}
.page-hero h1{
  font-family:var(--serif);
  font-size:clamp(34px,4vw,50px);font-weight:600;letter-spacing:-.01em;line-height:1.12;
}
.page-hero h1 em{font-style:normal;color:var(--teal-800)}
.page-hero-lead{margin-top:18px;max-width:420px;font-size:15px;color:#43505c}

/* Sits inside the hero panel, clear of the photo.
   No transform here — the reveal animation owns transform and would cancel it. */
.statbar{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  max-width:700px;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  margin-top:32px;
}
.statbar-item{display:flex;align-items:center;gap:10px;padding:14px 12px}
.statbar-item+.statbar-item{border-left:1px solid var(--line-2)}
.statbar-icon{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--beige);color:var(--teal-800);
}
.statbar-icon .icon{width:22px;height:22px;stroke-width:1.35}
.statbar b{display:block;font-size:16px;font-weight:600;color:var(--ink);line-height:1.25}
.statbar small{font-size:11px;line-height:1.4;color:#5d6873;white-space:nowrap}

/* --- Body grid -------------------------------------------------------------- */
.about-body{padding:46px 0 32px}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:stretch}
.about-col{display:flex;flex-direction:column;gap:32px}

/* --- Our Story ------------------------------------------------------------ */
.story-body p{font-size:13.5px;line-height:1.75;color:var(--body)}
.story-body p+p{margin-top:12px}

/* --- Meet Our Dentist ----------------------------------------------------- */
.dentist-card{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  background:var(--panel);border-radius:var(--r-lg);overflow:hidden;
  scroll-margin-top:110px; /* keeps the sticky header from covering the photo on #dentist-card jumps */
}
.dentist-card-photo{margin:0}
.dentist-card-photo img{width:100%;height:100%;min-height:250px;object-fit:cover;object-position:center 22%}
.dentist-card-body{padding:18px 20px}
.dentist-card-body h2{font-family:"Playfair Display",Georgia,serif;font-size:clamp(22px,2.2vw,28px);font-weight:600}
.dentist-card-body .credentials{margin-top:8px;font-size:13.5px;font-weight:600;color:#1c2a38}
.dentist-card-lead{margin-top:10px;font-size:13px;line-height:1.65;color:var(--body)}
/* This column is narrow — keep the CTA on one line */
.dentist-card-body .btn{font-size:13.5px;padding:11px 18px;white-space:nowrap}
/* 2x2 — four across overflows this card at real type sizes */
.mini-features-4{grid-template-columns:repeat(2,1fr);gap:10px 16px;margin:14px 0 16px;max-width:none}
.mini-features-4 .icon{width:23px;height:23px}
.mini-features-4 p{font-size:11.5px;line-height:1.5}
.mini-features-4 b{font-size:12px}

/* --- Why Choose ----------------------------------------------------------- */
/* Right column matches the left column's height (Our Story + Dentist card),
   so this fills that space and stretches its cards to line up top and bottom. */
.why{display:flex;flex-direction:column;flex:1}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:14px;flex:1;margin-top:22px}
.why-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:28px 14px 26px;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-md);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#dfe6e6}
.why-card .bubble{width:58px;height:58px;margin-bottom:16px}
.why-card .bubble .icon{width:29px;height:29px}
.why-card:hover .bubble{background:var(--teal-800);color:#fff}
.why-card h3{font-size:14.5px;font-weight:600;line-height:1.35;margin-bottom:9px}
.why-card p{font-size:12px;line-height:1.6;color:#68727c}
/* Signature line-draw, same as the homepage treatment icons */
.js .why-card .bubble .icon{stroke-dasharray:100;stroke-dashoffset:100}
.js .why-card.is-in .bubble .icon{animation:drawStroke .85s var(--ease) calc(.25s + var(--d,0s)) forwards}

/* --- Our Values + promo --------------------------------------------------- */
.values{background:var(--beige);padding:28px 0 36px}
.values-inner{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(290px,320px);
  gap:22px;align-items:center;position:relative;
}
.values-title{
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(22px,2.2vw,27px);font-weight:600;line-height:1.2;
}
.values-list{display:grid;grid-template-columns:repeat(5,1fr)}
.values-list li{display:flex;gap:9px;padding:4px 11px}
.values-list li+li{border-left:1px solid #eae4dd}
.values-list .icon{width:22px;height:22px;flex:none;color:var(--teal-800);stroke-width:1.3;margin-top:1px}
.values-list p{font-size:11px;line-height:1.5;color:#68727c}
.values-list b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.js .values-list .icon{stroke-dasharray:100;stroke-dashoffset:100}
.js .values-list li.is-in .icon{animation:drawStroke .85s var(--ease) calc(.2s + var(--d,0s)) forwards}

/* Third column; the negative bottom margin lets it hang over the footer */
.promo{
  position:relative;overflow:hidden;align-self:start;
  margin-bottom:-74px;
  background:var(--teal-900);color:#fff;border-radius:var(--r-lg);
  padding:22px 24px;box-shadow:var(--shadow-lg);z-index:3;
}
.promo-watermark{
  position:absolute;right:-14px;bottom:-26px;width:150px;height:150px;
  fill:none;stroke:rgba(255,255,255,.11);stroke-width:.7;pointer-events:none;
  animation:floatSoft 9s ease-in-out infinite;
}
.promo .promo-title{color:#fff;font-size:19px;font-weight:600;line-height:1.22;margin:0;max-width:none}
.promo p{margin:8px 0 16px;font-size:13.5px;color:#cfe0e0;max-width:290px}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Footer needs headroom for the overlapping promo card */
.site-footer{padding-top:74px}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero-media{width:48%}
}

@media (max-width:1024px){
  /* Two parallel columns stop working — stack the whole body */
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-body{padding:72px 0 48px}
  .why{flex:none}
  .why-grid{flex:none;grid-auto-rows:auto;grid-template-columns:repeat(3,1fr)}

  .page-hero{display:flex;flex-direction:column}
  .page-hero-media{position:relative;width:auto;height:300px;order:-1;border-bottom-left-radius:0;box-shadow:none}
  .page-hero-media::before{background:linear-gradient(0deg,rgba(247,245,242,.9) 0%,rgba(247,245,242,0) 45%)}
  .page-hero-inner{padding-top:34px}
  .page-hero-copy{max-width:none;min-height:0}
  .page-hero-lead{max-width:620px}
  .statbar{transform:none;margin:30px 0 0}

  .values-inner{grid-template-columns:1fr;gap:20px}
  .values-list{grid-template-columns:repeat(3,1fr);gap:14px 0}
  .values-list li:nth-child(4){border-left:0}
  .promo{margin-top:10px}
}

@media (max-width:900px){
  .dentist-card{grid-template-columns:1fr}
  .dentist-card-photo img{height:300px;min-height:0}
  .mini-features-4{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .about-body{padding:52px 0 38px}
  .about-col{gap:34px}
  .page-hero-media{height:230px}
  .statbar{grid-template-columns:1fr}
  .statbar-item+.statbar-item{border-left:0;border-top:1px solid var(--line-2)}
  .dentist-card-body{padding:22px 20px}
  .why-grid{grid-template-columns:1fr}
  .values{padding:30px 0 34px}
  .values-list{grid-template-columns:1fr;gap:0}
  .values-list li{border-left:0!important;padding:12px 0}
  .values-list li+li{border-top:1px solid #eae4dd}
  .promo{margin-bottom:-70px;padding:22px 20px}
}

/* ==========================================================================
   Motion — About Us
   Same language as the homepage (settle, never bounce) but its own vocabulary:
   masked line-rise, a wiping photo, rules and dividers that grow.
   Every effect drives off a CHILD of the revealed element, because the reveal
   system itself owns transform on the [data-reveal] node.
   ========================================================================== */

/* (The .ruled draw-in now lives in style.css alongside the component itself.) */

/* Hero headline rises line by line from behind a mask ----------------------- */
.page-hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js .page-hero h1 .line>span{display:block;transform:translateY(108%)}
.js .page-hero h1.is-in .line>span{
  transform:none;transition:transform .9s var(--ease);
}
.js .page-hero h1.is-in .line:nth-child(2)>span{transition-delay:.11s}

/* Stat bar cascades in, dividers grow downward ------------------------------ */
.statbar-item{position:relative}
.statbar-item+.statbar-item{border-left:0}
.statbar-item+.statbar-item::before{
  content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;
  background:var(--line-2);transform-origin:top center;
}
.js .statbar-item{opacity:0;transform:translateY(13px)}
.js .statbar-item+.statbar-item::before{transform:scaleY(0)}
.js .statbar.is-in .statbar-item{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease) var(--sd,0s),transform .55s var(--ease) var(--sd,0s);
}
.js .statbar.is-in .statbar-item+.statbar-item::before{
  transform:scaleY(1);transition:transform .5s var(--ease) var(--sd,0s);
}
.statbar-item:nth-child(2){--sd:.09s}
.statbar-item:nth-child(3){--sd:.18s}
.statbar-item:nth-child(4){--sd:.27s}

/* Why-Choose: bubble settles in, accent bar on hover ------------------------ */
.why-card{overflow:hidden}
.why-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--teal-800);transform:scaleX(0);transform-origin:center;
  transition:transform .38s var(--ease);
}
.why-card:hover::before{transform:scaleX(1)}
.js .why-card .bubble{opacity:0;transform:scale(.72)}
.js .why-card.is-in .bubble{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s),
             background .3s var(--ease),color .3s var(--ease);
}

/* Values dividers grow ------------------------------------------------------ */
.values-list li{position:relative}
.values-list li+li{border-left:0}
.values-list li+li::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:#eae4dd;transform-origin:top center;
}
.js .values-list li+li::before{transform:scaleY(0)}
.js .values-list li.is-in+li::before,
.js .values-list li.is-in::before{transform:scaleY(1);transition:transform .55s var(--ease) var(--d,0s)}

@media (max-width:640px){
  /* Stacked — horizontal rules replace the vertical dividers */
  .values-list li+li::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .js .why-card .bubble .icon,
  .js .values-list .icon{stroke-dasharray:none;stroke-dashoffset:0}
  .page-hero-media img,.promo-watermark{animation:none}
  /* Land every entrance on its finished state rather than its start state */
  .js .ruled::after,
  .js .statbar-item+.statbar-item::before,
  .js .values-list li+li::before{transform:none}
  .js .page-hero h1 .line>span{transform:none}
  .js .statbar-item{opacity:1;transform:none}
  .js .why-card .bubble{opacity:1;transform:none}
}