/* about.css - styles scoped to #page-about */

#page-about { --green:#237b3d; --dark-green:#14582a; --light-green:#f3f8f3; --yellow:#f2e900; --soft-yellow:#fffde0; --dark:#17231a; --muted:#6c766e; --border:#e8ece8; --white:#ffffff; font-family:"DM Sans",sans-serif; color:var(--dark); background:#ffffff; line-height:1.6; overflow-x:hidden }
#page-about .eyebrow { display:inline-flex; align-items:center; gap:9px; background:var(--soft-yellow); color:var(--dark-green); padding:8px 14px; border-radius:50px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:20px }
#page-about section { padding:100px 0 }
#page-about .section-heading { max-width:650px; margin:0 auto 50px; text-align:center }
#page-about .cta { background:var(--dark-green); color:white; border-radius:30px; padding:65px 70px; display:flex; align-items:center; justify-content:space-between; gap:40px; overflow:hidden; position:relative }
#page-about .cta h2 { font-family:"Manrope",sans-serif; font-size:clamp(32px,4vw,48px); letter-spacing:-2px; line-height:1.05; margin-bottom:13px }
#page-about .cta p { color:rgba(255,255,255,0.72); font-size:14px }
#page-about .cta .btn { background:var(--yellow); color:var(--dark); position:relative; z-index:2; white-space:nowrap; padding:15px 25px; border-radius:50px; font-size:14px; font-weight:800 }
#page-about .page-hero { padding:85px 0 90px; background:#fafcf9; position:relative; overflow:hidden }
#page-about .page-hero::before { content:""; position:absolute; width:430px; height:430px; background:var(--soft-yellow); border-radius:50%; right:-170px; top:-180px; z-index:0 }
#page-about .page-hero::after { content:""; position:absolute; width:230px; height:230px; background:#edf7ef; border-radius:50%; left:-110px; bottom:-120px; z-index:0 }
#page-about .hero-inner { position:relative; z-index:1; text-align:center; max-width:820px; margin:auto }
#page-about .page-hero h1 { font-family:"Manrope",sans-serif; font-size:clamp(44px,6vw,70px); line-height:1; letter-spacing:-3px; font-weight:800; margin-bottom:22px }
#page-about .page-hero h1 span { color:var(--green) }
#page-about .page-hero p { color:var(--muted); max-width:650px; margin:auto; font-size:17px }
#page-about .intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center }
#page-about .intro-image { height:570px; width:100%; object-fit:cover; border-radius:28px }
#page-about .intro-content h2 { font-family:"Manrope",sans-serif; font-size:clamp(34px,4vw,50px); line-height:1.08; letter-spacing:-2px; margin-bottom:20px }
#page-about .intro-content h2 span { color:var(--green) }
#page-about .intro-content p { color:var(--muted); font-size:15px; margin-bottom:17px }
#page-about .intro-highlight { margin-top:28px; padding:22px; background:var(--light-green); border-left:4px solid var(--green); border-radius:0 16px 16px 0 }
#page-about .intro-highlight strong { display:block; font-family:"Manrope",sans-serif; margin-bottom:4px }
#page-about .intro-highlight span { font-size:13px; color:var(--muted) }
#page-about .mission-section { background:var(--light-green) }
#page-about .mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px }
#page-about .mission-card { background:white; border:1px solid #e4ebe4; border-radius:24px; padding:40px }
#page-about .mission-icon { width:54px; height:54px; background:var(--soft-yellow); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:23px }
#page-about .mission-card h3 { font-family:"Manrope",sans-serif; font-size:23px; margin-bottom:11px }
#page-about .mission-card p { color:var(--muted); font-size:14px }
#page-about .difference-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:75px; align-items:center }
#page-about .difference-content h2 { font-family:"Manrope",sans-serif; font-size:clamp(34px,4vw,50px); line-height:1.08; letter-spacing:-2px; margin-bottom:18px }
#page-about .difference-content > p { color:var(--muted); font-size:15px; margin-bottom:30px }
#page-about .difference-list { display:grid; gap:19px }
#page-about .difference-item { display:flex; align-items:flex-start; gap:15px }
#page-about .check { flex-shrink:0; width:40px; height:40px; border-radius:12px; background:var(--light-green); color:var(--green); display:flex; align-items:center; justify-content:center; font-weight:800 }
#page-about .difference-item h3 { font-family:"Manrope",sans-serif; font-size:16px; margin-bottom:2px }
#page-about .difference-item p { color:var(--muted); font-size:13px }
#page-about .difference-image { height:540px; width:100%; object-fit:cover; border-radius:28px }
#page-about .values-section { background:#fafcf9 }
#page-about .section-heading h2 { font-family:"Manrope",sans-serif; font-size:clamp(34px,4vw,50px); line-height:1.08; letter-spacing:-2px; margin-bottom:15px }
#page-about .section-heading p { color:var(--muted); font-size:15px }
#page-about .values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
#page-about .value-card { background:white; border:1px solid var(--border); border-radius:22px; padding:30px 25px; transition:0.25s }
#page-about .value-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(30,50,35,0.08) }
#page-about .value-number { font-family:"Manrope",sans-serif; font-size:34px; font-weight:800; color:#dceade; margin-bottom:18px }
#page-about .value-card h3 { font-family:"Manrope",sans-serif; font-size:17px; margin-bottom:8px }
#page-about .value-card p { color:var(--muted); font-size:13px }
#page-about .place-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:center }
#page-about .place-image { height:500px; width:100%; object-fit:cover; border-radius:28px }
#page-about .place-content h2 { font-family:"Manrope",sans-serif; font-size:clamp(34px,4vw,50px); line-height:1.08; letter-spacing:-2px; margin-bottom:18px }
#page-about .place-content p { color:var(--muted); font-size:15px; margin-bottom:17px }
#page-about .place-points { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:27px }
#page-about .place-point { padding:15px; border:1px solid var(--border); border-radius:15px; font-size:13px; font-weight:700; background:white }
#page-about .place-point span { color:var(--green); margin-right:6px }
#page-about .trust-section { padding-top:0 }
#page-about .trust-box { background:var(--dark-green); border-radius:28px; padding:48px; color:white; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center }
#page-about .trust-item { border-right:1px solid rgba(255,255,255,0.15) }
#page-about .trust-item:last-child { border-right:none }
#page-about .trust-item strong { display:block; font-family:"Manrope",sans-serif; font-size:35px; margin-bottom:4px }
#page-about .trust-item span { color:rgba(255,255,255,0.7); font-size:13px }
#page-about .cta::after { content:""; position:absolute; width:330px; height:330px; background:rgba(255,255,255,0.05); border-radius:50%; right:-120px; top:-120px }

@media (max-width:1000px) {
  #page-about .intro-grid, #page-about .difference-grid, #page-about .place-grid { gap:40px }
  #page-about .values-grid { grid-template-columns:repeat(2,1fr) }
}

@media (max-width:700px) {
  #page-about section { padding:70px 0 }
  #page-about .cta { padding:45px 28px; flex-direction:column; align-items:flex-start }
  #page-about .page-hero { padding:65px 0 70px }
  #page-about .page-hero h1 { font-size:47px; letter-spacing:-2.5px }
  #page-about .page-hero p { font-size:15px }
  #page-about .intro-grid, #page-about .mission-grid, #page-about .difference-grid, #page-about .place-grid { grid-template-columns:1fr }
  #page-about .intro-image { height:400px }
  #page-about .difference-image { height:400px; order:-1 }
  #page-about .place-image { height:380px }
  #page-about .values-grid { grid-template-columns:1fr 1fr }
  #page-about .place-points { grid-template-columns:1fr }
  #page-about .trust-box { grid-template-columns:1fr; padding:35px 25px }
  #page-about .trust-item { border-right:none; border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:22px }
  #page-about .trust-item:last-child { border-bottom:none; padding-bottom:0 }
}

@media (max-width:420px) {
  #page-about .values-grid { grid-template-columns:1fr }
  #page-about .mission-card { padding:30px }
}