/* ============================================================================
   Riela Kids - About Page Styles
   ============================================================================
   Page-only styles. Loaded AFTER riela-home.css, which already defines the
   shared :root colour/font variables, .r-btn / .r-pill / .r-wave helpers,
   header and footer styles reused from the homepage redesign.
   ============================================================================ */

/* ============================================================================
   STEP 1 - HERO BAND + BREADCRUMB
   ============================================================================ */
.r-ab-hero{background:var(--blush)}
.r-crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted);font-family:var(--r-body);padding-block:20px 0}
.r-crumbs a{color:var(--muted);text-decoration:none}
.r-crumbs a:hover{color:var(--pink-dk)}
.r-crumbs b{color:var(--purple)}

/* ============================================================================
   STEP 2 - HERO
   ============================================================================ */
.r-abh{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center;padding-block:40px 24px}
.r-abh-copy{display:grid;gap:18px;justify-items:start;min-width:0}
.r-abh-copy h1{font-family:var(--r-head);font-weight:600;line-height:1.1;margin:0;font-size:clamp(40px,5.6vw,70px);color:var(--purple)}
.r-abh-copy h1 .r-script{display:block;font-size:.72em;line-height:1.35;margin-top:6px}
.r-abh-pics{position:relative}
.r-abh-pics>div{border-radius:var(--r-radius,28px);overflow:hidden;box-shadow:0 16px 34px rgba(118,63,157,.2)}
.r-abh-pics img{width:100%;height:100%;object-fit:cover;display:block}
.r-ap1{position:absolute;right:0;top:0;width:82%;height:68%;border:8px solid #fff}
.r-ap1-solo{position:relative;width:100%;aspect-ratio:1046/660;border:8px solid #fff}
.r-abh-tag{position:absolute;right:10px;bottom:16px;background:#fff;border-radius:20px;padding:6px 14px;font-weight:800;font-size:13px;color:var(--purple);box-shadow:0 6px 16px rgba(118,63,157,.15)}

@media (max-width:1040px){
  .r-abh{grid-template-columns:1fr;gap:36px}
}

/* ============================================================================
   STEP 3 - NUMBERS
   ============================================================================ */
.r-ab-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:40px}
.r-ab-nums>div{background:var(--c);border-radius:var(--r-radius,28px);padding:24px;display:grid;gap:4px;text-align:center}
.r-ab-nums b{font-family:var(--r-head);font-weight:600;font-size:clamp(34px,4vw,46px);color:var(--purple);line-height:1}
.r-ab-nums span{font-size:15px;color:var(--muted);font-weight:700;font-family:var(--r-body)}

@media (max-width:1040px){
  .r-ab-nums{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .r-ab-nums{gap:12px}
  .r-ab-nums>div{padding:18px 10px}
}

/* ============================================================================
   STEP 4 - OUR STORY
   ============================================================================ */
.r-story{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.r-st-pics{position:relative;height:520px}
.r-st-pics>div{position:absolute;border-radius:var(--r-radius,28px);overflow:hidden;box-shadow:0 16px 34px rgba(118,63,157,.18)}
.r-st-pics img{width:100%;height:100%;object-fit:cover;display:block}
.r-sp1{left:0;top:0;width:68%;height:78%;border-radius:220px 220px 28px 28px!important;border:8px solid #fff}
.r-sp2{right:0;bottom:0;width:50%;height:52%;transform:rotate(4deg)}
.r-since{position:absolute;right:6%;top:6%;width:110px;height:110px;border-radius:50%;background:var(--star);display:grid;place-content:center;text-align:center;font-weight:800;font-size:13px;color:var(--ink);box-shadow:0 10px 22px rgba(0,0,0,.12);transform:rotate(8deg);font-family:var(--r-body)}
.r-since b{display:block;font-family:var(--r-head);font-weight:600;font-size:26px;line-height:1}
.r-st-copy{display:grid;gap:18px;justify-items:start;min-width:0}
.r-st-copy p{font-size:17.5px;color:var(--ink);max-width:60ch;margin:0;font-family:var(--r-body)}
.r-quote{margin:6px 0 0;border-left:5px solid var(--pink);background:var(--blush);border-radius:0 20px 20px 0;padding:18px 22px;font-family:var(--r-head);font-weight:500;font-size:21px;line-height:1.35;color:var(--purple)}
.r-quote cite{display:block;font-family:var(--r-body);font-style:normal;font-weight:800;font-size:14px;color:var(--muted);margin-top:8px}

@media (max-width:1040px){
  .r-story{grid-template-columns:1fr;gap:36px}
  .r-st-pics{height:420px}
}
@media (max-width:680px){
  .r-st-pics{height:340px}
  .r-since{width:86px;height:86px;font-size:11px}
  .r-since b{font-size:20px}
}

/* ============================================================================
   STEP 5 - VALUES
   ============================================================================ */
.r-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.r-vals>div{background:var(--c);border-radius:var(--r-radius,28px);padding:12px 12px 24px;display:grid;gap:10px;align-content:start}
.r-vimg{aspect-ratio:4/3;border-radius:20px;overflow:hidden;margin-bottom:6px}
.r-vimg img{width:100%;height:100%;object-fit:cover;display:block}
.r-vals h3,.r-vals p{padding:0 12px;margin:0;font-family:var(--r-body)}
.r-vals h3{font-family:var(--r-head);font-weight:600;font-size:21px}
.r-vals p{font-size:15px;color:var(--muted)}

@media (max-width:1040px){
  .r-vals{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .r-vals{grid-template-columns:1fr}
}

/* ============================================================================
   STEP 6 - AWARDS
   ============================================================================ */
.r-awb{background:linear-gradient(135deg,#FFF4CF,#FFEAF1 55%,#E3F1FB)}
.r-aw2{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:980px;margin:0 auto}
.r-aw-card{background:#fff;border-radius:var(--r-radius,28px);padding:32px;display:grid;justify-items:center;text-align:center;gap:10px;box-shadow:0 12px 28px rgba(118,63,157,.1)}
.r-aw-card .r-medal{width:88px;height:88px;border-radius:50%;background:var(--c);display:grid;place-items:center}
.r-aw-card .r-medal svg{width:52px;height:52px;color:var(--purple)}
.r-aw-card small{font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-dk);font-family:var(--r-body)}
.r-aw-card b{font-family:var(--r-head);font-weight:600;font-size:23px;line-height:1.25}

@media (max-width:1040px){
  .r-aw2{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .r-aw2{grid-template-columns:1fr}
  .r-aw-card{padding:24px}
}

/* ============================================================================
   STEP 7 - HOW WE CAN HELP
   ============================================================================ */
.r-dos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.r-do{background:#fff;border:2px solid var(--line);border-radius:var(--r-radius,28px);overflow:hidden;display:grid;transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.r-do:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(118,63,157,.12)}
.r-doimg{aspect-ratio:16/10;overflow:hidden}
.r-doimg img{width:100%;height:100%;object-fit:cover;display:block}
.r-dob{padding:20px 22px 24px;display:grid;gap:8px}
.r-dob h3{font-family:var(--r-head);font-weight:600;font-size:22px;margin:0}
.r-dob p{font-size:15px;color:var(--muted);margin:0;font-family:var(--r-body)}
.r-go2{font-weight:800;color:var(--pink-dk);margin-top:4px;font-family:var(--r-body)}

@media (max-width:1040px){
  .r-dos{grid-template-columns:1fr}
}