/* =====================================================================
   About
   File: 04-about.css
   ===================================================================== */

/* ================= ABOUT ================= */
.about-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; margin-top:50px;}
.about-img{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; position:relative;}
.about-img img{width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05);}
.about-img::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(252,110,32,.18), transparent 60%);}
#about .h-lg, #services .h-lg, #process .h-lg{text-transform:uppercase; letter-spacing:-.01em;}
.rich-text{position:relative;}
.rich-text p{font-size:19px; line-height:1.75; color:var(--body-color); font-weight:700; font-family:var(--font-body);}
.rich-text .w{color:var(--body-color); transition:color .05s linear;}
.rich-text .kw{color:var(--orange); font-weight:800;}
.reading-dot{position:absolute; width:7px; height:7px; border-radius:50%; background:var(--orange); transform:translate(-50%,-50%); pointer-events:none; z-index:2; opacity:0; transition:opacity .3s ease, left .1s linear, top .1s linear;}
#about .rich-text p{font-size:clamp(20px,2.3vw,28px); line-height:1.4;}
.about-divider{height:1px; background:var(--line); margin:36px 0 30px;}
.about-stats-row{display:flex; gap:56px; flex-wrap:wrap;}
.about-stat .num{font-family:var(--font-heading); font-weight:800; font-size:34px; color:var(--heading-color); line-height:1;}
.about-stat .lbl{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); margin-top:8px;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;}}