/** Rólam: independent page layout, using the compiled Tailwind theme tokens. */
.about-grid,.about-text-grid { display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; }
.about-hero { padding:72px 0 90px; }
.about-hero h1 { font-size:clamp(3.5rem,5.4vw,5.6rem); margin:23px 0 28px; }
.about-page h2 { font-size:clamp(2.7rem,4vw,3.9rem); margin-bottom:26px; }
.about-page p:not(.section-label):not(.rn-eyebrow):not(.lead) { font-size: var(--text-reading); line-height:1.9; }
.about-hero p:not(.rn-eyebrow),.about-text-grid > div:last-child,.about-why p:not(.section-label) { color:var(--color-muted); }
.about-page p + p { margin-top:20px; }
.about-photo { overflow:hidden; background:var(--color-wash); }
.about-photo picture,.about-photo img { display:block; width:100%; height:100%; }
.about-photo img { object-fit:cover; }
.about-portrait { aspect-ratio:4/5; border-radius:260px 260px 4px 4px; }
.about-portrait img { object-position:44% 65%; }
.about-presence { aspect-ratio:2/3; border-radius:4px 110px 4px 4px; }
.about-presence img { object-position:50% 50%; }
.about-journey { background:var(--color-wash); }
.about-text-grid { align-items:start; }
.about-text-grid > div:last-child { padding-top:40px; }
.about-motto { background:var(--color-forest); color:var(--color-paper); padding:48px 0; }
.about-motto figure { margin:0; max-width:850px; margin-inline:auto; text-align:center; }
.about-motto .rn-eyebrow { color:var(--color-paper); margin-bottom:18px; }
.about-motto blockquote { font-family:var(--font-display); font-size:clamp(1.4rem,2.1vw,1.9rem); line-height:1.45; }
.about-motto figcaption { font-size:12px; letter-spacing:.04em; margin-top:28px; }
.about-teachers { display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:45px; }
.about-teachers article { padding:35px; background:var(--color-wash); border-radius:4px; }
.about-teachers h3 { font-family:var(--font-display); font-size:29px; line-height:1.2; margin-bottom:18px; }
.about-teachers p { color:var(--color-muted); }
.about-teachers .text-link { display:inline-block; margin-top:20px; font-size:var(--text-reading); }
.about-learning-note { color:var(--color-muted); margin-top:30px; max-width:850px; }
.certificates { margin-top:45px; }
.certificate-track { display:flex; gap:23px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:0; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--color-sage) var(--color-wash); padding:4px 4px 20px; }
.certificate-card { flex:0 0 calc((100% - 46px)/3); scroll-snap-align:start; margin:0; min-width:0; }
.certificate-preview { display:flex; align-items:center; justify-content:center; height:250px; padding:18px; background:var(--color-wash); border:1px solid var(--color-line); border-radius:4px; }
.certificate-preview img { display:block; width:100%; height:100%; object-fit:contain; }
.certificate-card figcaption { font-size:12px; line-height:1.6; margin-top:14px; color:var(--color-olive); }
.certificate-controls { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.certificate-controls button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--color-line); border-radius:50%; font-size:22px; cursor:pointer; background:var(--color-paper); color:var(--color-forest); }
.certificate-controls button:hover { background:var(--color-wash); }
.certificate-controls button:disabled { opacity:.35; cursor:default; }
.about-learning { background:var(--color-wash); }
.about-attention { background:var(--color-paper); margin-bottom:0; }
@media(max-width:1100px) { .about-grid,.about-text-grid { gap:45px; } .about-teachers { gap:25px; } .about-teachers article { padding:28px; } }
@media(max-width:850px) {
 .about-grid,.about-text-grid,.about-teachers { grid-template-columns:1fr; gap:35px; }
 .about-photo { width:100%; max-width:540px; margin-inline:auto; }
 .about-text-grid > div:last-child { padding-top:0; }
 .about-why .about-photo { order:2; }
 .about-why .about-grid > div:last-child { order:1; }
 .certificate-card { flex-basis:calc((100% - 23px)/2); }
}
@media(max-width:640px) {
 .about-hero { padding:45px 0 60px; }
 .about-hero h1 { font-size:3.5rem; }
 .about-page h2 { font-size:2.8rem; }
 .about-motto { padding:32px 0; }
 .about-motto blockquote { font-size:1.4rem; }
 .about-portrait { border-radius:200px 200px 4px 4px; }
 .about-presence { border-top-right-radius:80px; }
 .about-teachers { margin-top:30px; }
 .about-teachers article { padding:26px; }
 .certificate-track { gap:18px; }
 .certificate-card { flex-basis:83%; }
 .certificate-preview { height:235px; }
 .about-attention { margin-bottom:0; }
}

/* Progressive enhancement: no scrollbar on the looping carousel at any width. */
.certificate-rail { display:contents; }
.certificate-autoplay { display:none !important; }
.certificate-autoplay svg [hidden] { display:none; }
.is-carousel .certificate-track { overflow:hidden; scroll-snap-type:none; scrollbar-width:none; padding:4px; touch-action:pan-y pinch-zoom; }
.is-carousel .certificate-track::-webkit-scrollbar { display:none; }
.is-carousel .certificate-rail { display:flex; flex:none; width:100%; gap:23px; }
.is-carousel .certificate-autoplay { display:grid !important; }
@media(max-width:640px) { .is-carousel .certificate-rail { gap:18px; } }

/* Preserve the highlighted teacher cards and introductory lead. */
.about-page .about-teachers p { font-size: 14px; }
.about-page .about-hero p.lead { font-size: var(--text-reading); }

/* The closing motto follows the presence section without an oversized gap. */
.about-motto { margin-bottom:70px; }
@media(max-width:640px) { .about-motto { margin-bottom:48px; } }

/* Matching mobile arrows use the same geometry, mirrored for previous. */
.certificate-prev > svg, .certificate-next > svg { display:none; }
@media (max-width:640px) {
 .certificate-controls .certificate-arrow-text { display:none; }
 .certificate-prev > svg, .certificate-next > svg { display:block; width:22px; height:22px; }
 .certificate-prev > svg { transform:rotate(180deg); }
}

/* Mobile: each heading is followed by its photo, then the unchanged body copy. */
@media (max-width:640px) {
 .about-hero .about-copy, .about-why .about-copy { display:contents; }
 .about-hero .about-copy > h1, .about-why .about-copy > h2 { order:1; margin-bottom:0; }
 .about-hero .about-photo, .about-why .about-photo { order:2; }
 .about-hero .about-body, .about-why .about-body { order:3; }
}

/* Mobile attention section: heading first; desktop columns stay unchanged. */
@media (max-width:640px) {
 .about-attention .about-text-grid > div:last-child { order:-1; }
 .about-attention h2 { margin-bottom:0; }
}