/* ============================================================
   pages.css — About, Services, Service Detail Shared Styles
   ============================================================ */

/* ═══════════════ ABOUT PAGE ═══════════════ */
.about-hero h1{font-size:clamp(36px,5vw,62px);font-weight:800;letter-spacing:-0.04em;color:var(--dark);margin-bottom:18px}
.about-hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-hero p{font-size:17px;color:var(--text-muted);max-width:540px;line-height:1.7;margin-bottom:32px}
.hero-pills{display:flex;gap:12px;flex-wrap:wrap}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);padding:8px 16px;border-radius:100px;font-size:13px;color:var(--text-muted);box-shadow:var(--shadow-sm)}
.hero-pill svg{width:15px;height:15px;stroke:var(--accent);fill:none}
.hero-pill strong{color:var(--dark)}

/* Story */
.story-section{padding:100px 0;background:#fff}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.story-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.story-tile{border-radius:var(--radius);padding:28px;text-align:center}
.story-tile.t-light{background:var(--bg);border:1px solid var(--border)}
.story-tile.t-dark{background:var(--dark)}
.story-tile.t-accent{background:var(--accent)}
.story-tile.t-gold{background:var(--gold)}
.st-num{font-family:'Syne',sans-serif;font-size:36px;font-weight:800;letter-spacing:-0.04em;margin-bottom:4px;color:var(--dark)}
.story-tile.t-dark .st-num,.story-tile.t-accent .st-num{color:#fff}
.story-tile.t-gold .st-num{color:var(--dark)}
.st-label{font-size:12px;color:var(--text-muted)}
.story-tile.t-dark .st-label{color:rgba(255,255,255,0.5)}
.story-tile.t-accent .st-label{color:rgba(255,255,255,0.6)}
.story-tile.t-gold .st-label{color:rgba(26,31,46,0.6)}
.story-content h2{font-size:clamp(26px,3.5vw,42px);font-weight:800;letter-spacing:-0.04em;color:var(--dark);margin-bottom:18px}
.story-content p{font-size:16px;color:var(--text-muted);line-height:1.75;margin-bottom:18px}

/* Values */
.values-section{padding:100px 0}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.value-card{background:#fff;border-radius:var(--radius);padding:36px 28px;border:1px solid var(--border);transition:var(--transition)}
.value-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow)}
.value-icon{width:52px;height:52px;border-radius:14px;background:rgba(45,74,62,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background 0.28s}
.value-card:hover .value-icon{background:var(--accent)}
.value-icon svg{width:24px;height:24px;stroke:var(--accent);fill:none;transition:stroke 0.28s}
.value-card:hover .value-icon svg{stroke:#fff}
.value-card h3{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:10px}
.value-card p{font-size:14px;color:var(--text-muted);line-height:1.65}

/* Team */
.team-section{padding:100px 0;background:#fff}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}
.team-card{background:var(--bg);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:var(--transition)}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(45,74,62,0.15)}
.team-avatar{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:36px;color:#fff}
.team-info{padding:20px}
.team-info h4{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:4px}
.team-info span{font-size:13px;color:var(--text-muted)}
.team-social{display:flex;gap:8px;margin-top:14px}
.team-social a{width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.team-social a svg{width:13px;height:13px;stroke:var(--text-muted);fill:none}
.team-social a:hover{background:var(--accent);border-color:var(--accent)}
.team-social a:hover svg{stroke:#fff}

/* Why (about page) */
.why-about{padding:100px 0}
.why-about-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.why-about-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wat{border-radius:var(--radius);padding:28px;border:1px solid var(--border);transition:transform 0.28s;background:var(--bg)}
.wat:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.wat.accent-tile{background:var(--accent);border-color:var(--accent)}
.wat.gold-tile{background:var(--gold);border-color:var(--gold)}
.wat-num{font-family:'Syne',sans-serif;font-size:36px;font-weight:800;letter-spacing:-0.04em;line-height:1;margin-bottom:4px;color:var(--dark)}
.wat.accent-tile .wat-num,.wat.accent-tile .wat-label{color:#fff}
.wat.accent-tile .wat-label{opacity:0.65}
.wat.gold-tile .wat-num{color:var(--dark)}
.wat.gold-tile .wat-label{color:rgba(26,31,46,0.6)}
.wat-label{font-size:12px;color:var(--text-muted)}
.why-about-content h2{font-size:clamp(26px,3.5vw,42px);font-weight:800;letter-spacing:-0.04em;color:var(--dark);margin-bottom:16px}
.why-about-content>.why-desc{font-size:16px;color:var(--text-muted);margin-bottom:40px;line-height:1.75}
.why-steps-list{display:flex;flex-direction:column;gap:24px}
.wsl-item{display:flex;gap:18px;align-items:flex-start}
.wsl-num{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--dark);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:#fff}
.wsl-body h4{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:3px}
.wsl-body p{font-size:13px;color:var(--text-muted);line-height:1.65}

/* ═══════════════ SERVICES PAGE ═══════════════ */
.services-hero h1{font-size:clamp(34px,5vw,60px);font-weight:800;letter-spacing:-0.04em;color:var(--dark);margin-bottom:18px}
.services-hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.services-hero p{font-size:17px;color:var(--text-muted);max-width:540px;line-height:1.7;margin-bottom:32px}
.hero-btn-row{display:flex;gap:14px;flex-wrap:wrap}

.svc-main{padding:100px 0;background:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc-card{background:var(--bg);border-radius:20px;padding:40px 32px;border:1.5px solid transparent;transition:var(--transition);display:flex;flex-direction:column}
.svc-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 24px 60px rgba(26,31,46,0.12)}
.svc-card-icon{width:56px;height:56px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:var(--shadow-sm);transition:background 0.28s}
.svc-card:hover .svc-card-icon{background:var(--accent)}
.svc-card-icon svg{width:26px;height:26px;stroke:var(--accent);fill:none;transition:stroke 0.28s}
.svc-card:hover .svc-card-icon svg{stroke:#fff}
.svc-card-title{font-size:20px;font-weight:700;color:var(--dark);margin-bottom:12px}
.svc-card-desc{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:22px}
.svc-card-feats{list-style:none;margin-bottom:auto;display:flex;flex-direction:column;gap:9px}
.svc-card-feats li{font-size:13px;color:var(--text-muted);display:flex;align-items:flex-start;gap:8px}
.svc-card-feats li svg{width:14px;height:14px;stroke:var(--accent);fill:none;flex-shrink:0;margin-top:2px}
.svc-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.svc-badge{font-size:11px;font-weight:600;color:var(--accent);background:rgba(45,74,62,0.08);border:1px solid rgba(45,74,62,0.12);padding:4px 12px;border-radius:100px;letter-spacing:0.05em}
.svc-learn-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-muted);transition:color 0.2s}
.svc-learn-link svg{width:15px;height:15px;stroke:currentColor;fill:none;transition:transform 0.2s}
.svc-card:hover .svc-learn-link{color:var(--accent)}
.svc-card:hover .svc-learn-link svg{transform:translateX(3px)}

/* Process steps */
.process-section{padding:100px 0}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative}
.process-steps::before{content:'';position:absolute;top:36px;left:12.5%;right:12.5%;height:2px;background:linear-gradient(90deg,var(--accent),var(--gold));z-index:0}
.ps{text-align:center;padding:0 16px;position:relative;z-index:1}
.ps-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;border:4px solid var(--bg);box-shadow:var(--shadow-sm)}
.ps-circle svg{width:28px;height:28px;fill:none}
.ps-circle.c-dark{background:var(--dark)}
.ps-circle.c-dark svg{stroke:#fff}
.ps-circle.c-gold{background:var(--gold)}
.ps-circle.c-gold svg{stroke:var(--dark)}
.ps-circle.c-accent{background:var(--accent)}
.ps-circle.c-accent svg{stroke:#fff}
.ps-circle.c-light{background:var(--accent-light)}
.ps-circle.c-light svg{stroke:#fff}
.ps h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:8px}
.ps p{font-size:13px;color:var(--text-muted);line-height:1.6}

/* ═══════════════ SERVICE DETAIL PAGE ═══════════════ */
.svc-detail-hero h1{font-size:clamp(30px,4.5vw,56px);font-weight:800;letter-spacing:-0.04em;color:var(--dark);margin-bottom:16px}
.svc-detail-hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.svc-tagline{font-size:17px;font-weight:600;color:var(--accent);margin-bottom:14px}
.svc-hero-desc{font-size:16px;color:var(--text-muted);line-height:1.75;margin-bottom:32px;max-width:580px}
.svc-hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* Layout with sidebar */
.svc-layout{display:grid;grid-template-columns:1fr 360px;gap:80px;align-items:start}
.svc-sidebar{position:sticky;top:100px}
.sidebar-card{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);border:1px solid var(--border)}
.sidebar-card h3{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:20px}
.sidebar-nav{list-style:none;margin-bottom:28px}
.sidebar-nav li{border-bottom:1px solid var(--border)}
.sidebar-nav li:last-child{border-bottom:none}
.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:13px 0;font-size:14px;color:var(--text-muted);transition:color 0.2s;font-weight:500}
.sidebar-nav a:hover,.sidebar-nav a.active{color:var(--accent);font-weight:600}
.sn-icon{width:32px;height:32px;border-radius:8px;background:rgba(45,74,62,0.07);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sn-icon svg{width:15px;height:15px;stroke:var(--accent);fill:none}
.sn-arr{margin-left:auto;opacity:0.3;font-size:14px}
.sidebar-cta-box{background:var(--dark);border-radius:12px;padding:24px;text-align:center}
.sidebar-cta-box p{font-size:13px;color:rgba(255,255,255,0.55);margin-bottom:16px;font-weight:300;line-height:1.65}
.scb-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:var(--dark);padding:13px;border-radius:100px;font-size:14px;font-weight:700;font-family:'DM Sans',sans-serif;margin-bottom:12px;transition:background 0.2s}
.scb-btn:hover{background:var(--gold-light)}
.scb-btn svg{width:15px;height:15px;stroke:var(--dark);fill:none}
.scb-phone{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.35);transition:color 0.2s}
.scb-phone svg{width:14px;height:14px;stroke:rgba(255,255,255,0.35);fill:none}
.scb-phone:hover{color:var(--gold)}

/* Benefits */
.benefits-section{padding:90px 0;background:#fff}
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.benefit-card{display:flex;gap:20px;padding:28px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border);transition:var(--transition)}
.benefit-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.benefit-icon{width:50px;height:50px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-sm)}
.benefit-icon svg{width:24px;height:24px;stroke:var(--accent);fill:none}
.benefit-body h4{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:6px}
.benefit-body p{font-size:14px;color:var(--text-muted);line-height:1.65}

/* Features */
.features-section{padding:90px 0}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
.feat-item{display:flex;align-items:center;gap:14px;padding:16px 20px;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--border);transition:var(--transition)}
.feat-item:hover{border-color:rgba(45,74,62,0.2);box-shadow:var(--shadow-sm)}
.feat-check{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-check svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.5}
.feat-item span{font-size:14px;color:var(--text);font-weight:500}

/* Timeline */
.process-tl{padding:90px 0;background:#fff}
.timeline{margin-top:48px;display:flex;flex-direction:column}
.tl-item{display:flex;gap:24px;padding-bottom:40px;position:relative}
.tl-item::before{content:'';position:absolute;left:23px;top:50px;bottom:0;width:2px;background:linear-gradient(to bottom,var(--border),transparent)}
.tl-item:last-child::before{display:none}
.tl-num{flex-shrink:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:14px;font-weight:800;color:#fff;z-index:1}
.tl-item:nth-child(odd) .tl-num{background:var(--dark)}
.tl-item:nth-child(even) .tl-num{background:var(--accent)}
.tl-body{padding-top:10px}
.tl-body h4{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:6px}
.tl-body p{font-size:14px;color:var(--text-muted);line-height:1.7}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .story-grid,.why-about-inner{gap:52px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:repeat(2,1fr);gap:36px}
  .process-steps::before{display:none}
  .svc-layout{grid-template-columns:1fr;gap:48px}
  .svc-sidebar{position:static}
  .benefits-grid,.feat-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .story-section,.values-section,.team-section,.why-about,.svc-main,.process-section,.benefits-section,.features-section,.process-tl{padding:72px 0}
  .story-grid,.why-about-inner{grid-template-columns:1fr;gap:44px}
  .story-tiles{order:-1}
  .why-about-tiles{order:-1}
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr;gap:16px}
  .svc-grid{grid-template-columns:1fr}
  .process-steps{grid-template-columns:1fr}
  .hero-pills,.hero-btn-row{flex-wrap:wrap}
}
@media(max-width:480px){.team-grid{grid-template-columns:1fr}}