/* ================================================================
   SEKOLAH ALAM DEPOK · CLIENT PRODUCTION v34
   Editorial nature system · Site development: MUHAMMAD RIZKI AKBAR
   ================================================================ */

:root{
  --pine:#123d2b;
  --pine-deep:#092b1e;
  --pine-soft:#2f654b;
  --ivory:#f7f3ea;
  --paper:#fffdf8;
  --oat:#e9dfcf;
  --terracotta:#a96543;
  --sun:#d7a84f;
  --charcoal:#19352a;
  --muted:#657168;
  --rule:rgba(25,53,42,.14);
  --pro-shadow:0 24px 70px rgba(8,37,25,.12);
  --pro-shadow-hover:0 30px 78px rgba(8,37,25,.18);
}

html{background:var(--ivory);scroll-padding-top:92px}
body{background:var(--ivory)!important;background-image:none!important;color:var(--charcoal)}
main{overflow:clip}
.shell{width:min(1240px,calc(100% - 72px))}
.shell-wide{width:min(1400px,calc(100% - 36px))}
.section:not(.hero):not(.inner-hero){padding:clamp(76px,7vw,104px) 0}
.cream{background:var(--ivory)!important}
.sand{background:#eee5d8!important}
.warm{background:#e7d6c5!important}
.deep{background:var(--pine-deep)!important}
.forest{background:var(--pine)!important}

/* The final identity uses real photography and disciplined surfaces. */
.section-botanical:after,
.header-card:after,
.eyebrow:after,
.hero-copy:before,
.intro:before,
.roots:before,
.stages:after,
.story-lab:before,
.experiences:before,
.field-journal:after,
.profile:before,
.profile:after,
.cta:after,
.inner-hero:before,
.trait-grid article:after,
.method-grid article:after,
.facility-grid article:after,
.calendar-notes article:after,
.contact-grid article:after,
.library-service-grid article:after,
.library-portal-card>div:after,
.btn-seed:before,
.btn-leaf:after,
.btn-branch:after,
.btn-flower:before,
.btn-vine:after,
.btn-water:after,
.btn-sun:before{display:none!important}

.botanical,
.nature-sketch,
.section-ornament,
.hero-leaf,
.line-vine,
.story-orbit,
.campus-bamboo,
.campus-sketch,
.journal-fern,
.cta-leaf,
.footer-botanical,
.drawer-plant,
.scribble,
.section-trail{display:none!important}

.intro,.profile{background-image:none!important}
.map-wrap,.map-card{transform:none!important}

/* Typography: clear hierarchy, restrained editorial rhythm. */
.eyebrow{gap:10px;font-size:9px;line-height:1.3;letter-spacing:.2em;color:var(--terracotta)}
.eyebrow:before{width:28px;background:currentColor}
.display{max-width:940px;margin:14px 0 24px;font-size:clamp(50px,5.7vw,82px);line-height:.94;letter-spacing:-.035em;text-wrap:balance}
.display em{color:var(--terracotta)}
.lead{font-size:clamp(20px,1.8vw,27px);line-height:1.43;text-wrap:pretty}
.section-head{grid-template-columns:minmax(0,1.25fr) minmax(290px,430px);gap:clamp(42px,6vw,80px);margin-bottom:46px}
.section-head>p,.section-head>div>p{line-height:1.72;color:var(--muted)}
.section-head.light p{color:rgba(255,255,255,.72)}
p{line-height:1.72}

/* One calm header that reacts to the visitor's scroll direction. */
.site-header{top:14px;transition:transform .32s cubic-bezier(.2,.75,.25,1),opacity .24s,top .24s;will-change:transform}
.site-header.hidden{transform:translateY(calc(-100% - 30px))!important;opacity:0!important;pointer-events:none}
.site-header.force-visible{transform:none!important;opacity:1!important;pointer-events:auto!important}
body.hash-navigating .site-header{transform:none!important;opacity:1!important;pointer-events:auto!important}
.header-card{height:72px;padding:0 13px;border:1px solid rgba(18,61,43,.12);border-radius:18px;background:rgba(255,253,248,.95);box-shadow:0 14px 42px rgba(7,35,23,.13);backdrop-filter:blur(18px) saturate(1.08)}
.site-header.scrolled{top:8px}
.site-header.scrolled .header-card{height:64px}
.menu-button{width:46px;height:46px;border-radius:13px;background:var(--pine);transition:background .2s,transform .2s}
.menu-button:hover{background:var(--pine-soft);transform:translateY(-1px)}
.menu-button span{width:18px}
.brand img{width:48px;height:48px}.brand b{font-size:23px}.brand small{font-size:6.8px}
.header-action,.header-link{border-radius:10px}
.header-action.apply{padding:11px 17px!important;background:var(--pine)!important;border-color:var(--pine)!important}
.header-link{font-size:10px;letter-spacing:.02em}
.header-link:hover{background:rgba(18,61,43,.07)}
.nav-ribbon{display:none!important}

/* Full menu: editorial, not ornamental. */
.drawer{background:linear-gradient(135deg,var(--pine-deep),var(--pine) 72%)}
.drawer-shell{padding-top:82px;gap:clamp(40px,6vw,86px)}
.drawer-links a{padding:12px 0;border-color:rgba(255,255,255,.15)}
.drawer-links a:hover{padding-left:6px;color:#f0c875}
.drawer-links small{font-family:var(--sans);font-size:11px;letter-spacing:.14em}
.drawer-links strong{font-size:clamp(29px,3vw,45px)}
.drawer-feature{min-height:520px;padding:40px;border-radius:24px;background:linear-gradient(165deg,rgba(116,71,47,.91),rgba(76,47,34,.96));box-shadow:0 26px 70px rgba(2,19,12,.24)}
.drawer-feature h2{font-size:clamp(42px,4.2vw,64px);line-height:.95}
.drawer-feature:after{opacity:.2}
.drawer-close,.search-close{border-radius:14px}
.search-overlay{background:rgba(9,43,29,.985)}

/* Buttons and focus states. */
.btn{min-height:46px;padding:13px 20px;border-radius:10px;box-shadow:none;transition:transform .22s,box-shadow .22s,background .22s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,37,25,.14)}
.btn:focus-visible,.carousel-button:focus-visible,.story-controls button:focus-visible,.campus-tabs button:focus-visible,.journal-card:focus-visible{outline:3px solid rgba(215,168,79,.7);outline-offset:3px}
.text-link{border-bottom:0;padding-bottom:2px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* Hero: cinematic photography, clean information hierarchy. */
.hero{height:min(920px,100svh);min-height:720px;max-height:920px;background:var(--pine-deep)}
.hero:after{display:none!important}
.hero-media img{object-position:center 42%;transform:scale(1.015);animation:hero-breathe 22s ease-in-out infinite alternate}
@keyframes hero-breathe{to{transform:scale(1.055)}}
.hero-overlay{background:linear-gradient(90deg,rgba(5,28,18,.87),rgba(8,39,26,.50) 44%,rgba(8,38,25,.06) 78%),linear-gradient(0deg,rgba(7,34,23,.53),transparent 48%)}
.hero-grid{grid-template-columns:minmax(0,1.38fr) minmax(250px,.62fr);padding-top:92px}
.hero-copy{max-width:820px}
.hero h1{max-width:790px;margin:18px 0 28px;font-size:clamp(76px,8.6vw,126px);line-height:.84;letter-spacing:-.045em;text-shadow:0 12px 34px rgba(0,15,8,.25)}
.hero-copy p{max-width:600px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.86)}
.hero-side{align-self:end;width:min(100%,280px);margin-bottom:72px;padding:24px;border:1px solid rgba(255,255,255,.25);border-radius:18px;background:rgba(7,36,23,.42);backdrop-filter:blur(10px)}
.hero-script{padding:0 0 17px;border:0;border-bottom:1px solid rgba(255,255,255,.24);border-radius:0;font-family:var(--serif);font-size:clamp(27px,2.3vw,36px);line-height:1.06;text-align:left;transform:none;color:#f3e0bd}
.hero-mini{border-top:0;padding-top:4px}.hero-mini b{font-size:37px}
.hero-scroll{right:24px;bottom:28px}

/* Route bar: five explicit pathways, no decorative template icons. */
.quick-routes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(1240px,calc(100% - 72px));margin:-30px auto 0;border:1px solid var(--rule);border-radius:18px;background:var(--paper);box-shadow:var(--pro-shadow);overflow:hidden}
.quick-routes a{min-height:98px;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:20px 18px;border-right:1px solid var(--rule);transition:background .22s,color .22s}
.quick-routes a:last-child{border-right:0}
.quick-routes a:hover{background:var(--pine);color:#fff}
.quick-routes img{display:none}
.quick-routes small{font-size:8px;letter-spacing:.16em;color:var(--terracotta)}
.quick-routes b{font-family:var(--serif);font-size:21px;line-height:1.08}
.quick-routes i{font-style:normal}

/* Intro photography remains expressive without circles, scribbles, or vines. */
.intro{padding-top:108px!important}
.split{grid-template-columns:.94fr 1.06fr;gap:clamp(54px,7vw,92px)}
.image-collage{height:clamp(500px,46vw,590px)}
.img-organic{left:0;top:0;width:82%;height:88%;clip-path:none;border-radius:22px;box-shadow:var(--pro-shadow)}
.img-round{right:0;bottom:0;width:43%;aspect-ratio:1.12;border:6px solid var(--ivory);border-radius:18px;box-shadow:var(--pro-shadow)}
.value-trio{border-top:1px solid var(--rule);margin-top:30px}
.value-trio div{border-color:var(--rule)}
.value-trio b{font-size:26px}

/* Static brand statement; no sideways auto-scrolling ticker. */
.ticker{padding:17px 24px;white-space:normal;background:var(--terracotta)}
.ticker div{display:flex;justify-content:center;align-items:center;gap:18px;animation:none!important;transform:none!important}
.ticker span{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ticker span:nth-of-type(5),.ticker i:last-child{display:none}
.ticker i{font-style:normal;color:#f2cf88}

/* Reusable professional surfaces. */
.pillar-grid{gap:18px}
.pillar,.pillar:nth-child(1),.pillar:nth-child(2),.pillar:nth-child(3){min-height:430px;padding:34px;border-radius:18px!important;clip-path:none!important;background:rgba(255,255,255,.055);box-shadow:none}
.pillar:nth-child(2){background:rgba(120,144,95,.14)}.pillar:nth-child(3){background:rgba(169,101,67,.14)}
.pillar>span,.mission-list b,.trait-grid small,.method-grid b,.facility-grid span{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.15em}
.pillar h3{font-size:50px;line-height:.92}.pillar p{font-size:13px;line-height:1.65}
.pillar img{display:none}

.stage-layout{grid-template-columns:.78fr 1.22fr;gap:58px}
.stage-cards{gap:14px}
.stage-card,.stage-card.arch,.stage-card.round,.stage-card.cut{height:500px;border:0;border-radius:18px!important;clip-path:none!important;box-shadow:var(--pro-shadow)}
.stage-card:after{background:linear-gradient(transparent 38%,rgba(5,28,18,.88))}
.stage-card b{font-size:28px}

.story-lab{background:var(--ivory)}
.story-slider{grid-template-columns:1.03fr .97fr;gap:54px;padding:24px;border:1px solid var(--rule);border-radius:22px;background:rgba(255,255,255,.56);box-shadow:none}
.story-visual{min-height:560px}
.story-image-frame{inset:0;border-radius:18px;background:var(--pine)}
.story-copy h3{font-size:clamp(42px,4.4vw,62px);line-height:.96}
.story-tabs{gap:7px;margin-bottom:24px}
.story-tabs button{min-height:38px;border-radius:9px}
.story-controls>button{width:46px;height:46px;border-radius:11px;background:var(--paper)}
.story-dots button{width:22px;height:3px;border-radius:3px;transform:none!important}

/* Explicit carousel controls. */
.carousel-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 0 18px}
.carousel-toolbar--experience{width:min(1240px,calc(100% - 72px));margin:-34px auto 20px}
.carousel-toolbar--campus{margin-top:-24px;margin-bottom:18px}
.carousel-label{min-width:70px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--muted)}
.forest .carousel-label,.deep .carousel-label{color:rgba(255,255,255,.7)}
.carousel-button{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--rule);border-radius:11px;background:var(--paper);color:var(--pine);font-size:20px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.carousel-button:hover{background:var(--pine);color:#fff;transform:translateY(-1px)}
.forest .carousel-button,.deep .carousel-button{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.forest .carousel-button:hover,.deep .carousel-button:hover{background:#fff;color:var(--pine)}
.carousel-button:disabled{opacity:.36;cursor:not-allowed;transform:none}

.experiences{padding-bottom:84px!important}
.experiences .section-head>.btn{justify-self:end;align-self:end;width:auto}
.experience-rail{gap:18px;padding:8px max(36px,calc((100vw - 1240px)/2)) 28px;scroll-behavior:smooth;overscroll-behavior-inline:contain}
.experience-card,.experience-card.organic-a,.experience-card.arch,.experience-card.circle-top,.experience-card.organic-b{flex:0 0 min(31vw,400px);height:540px;border:0;border-radius:18px!important;clip-path:none!important;box-shadow:var(--pro-shadow)}
.experience-card h3{font-size:39px;line-height:.95}
.experience-card:after{background:linear-gradient(transparent 34%,rgba(5,28,18,.9))}

/* Living Campus: structured selector + one clean photographic stage. */
.school-world{background:var(--pine)}
.campus-explorer{grid-template-columns:300px minmax(0,1fr);min-height:590px;border:1px solid rgba(255,255,255,.17);border-radius:20px;background:rgba(255,255,255,.045);box-shadow:none}
.campus-tabs{padding:12px;background:rgba(4,28,17,.28)}
.campus-tabs button{min-height:102px;padding:16px;border-color:rgba(255,255,255,.12);border-radius:10px;transition:background .2s,color .2s,padding .2s}
.campus-tabs button:hover{padding-left:18px}
.campus-tabs button.active{border-radius:10px;background:#e7c36d;color:var(--pine-deep)}
.campus-tabs span{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.13em}
.campus-tabs b{font-size:23px}.campus-tabs small{font-size:8px}
.campus-stage{min-height:590px;background:#315542}
.campus-caption{left:34px;right:34px;bottom:30px;max-width:650px;padding:24px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(5,32,20,.56);backdrop-filter:blur(9px)}
.campus-caption h3{font-size:clamp(45px,4.8vw,66px);line-height:.92}
.campus-caption p{font-size:13px;line-height:1.62}
.campus-map-mini{grid-template-columns:.8fr 1.2fr;gap:58px;margin-top:72px}
.campus-map-mini .map-wrap{padding:12px;border-radius:16px;background:#f2e8d8}

/* Field Journal: editorial collage with full keyboard/lightbox navigation. */
.field-journal{padding-bottom:76px!important;background:#f1ecdf}
.journal-grid{gap:14px;grid-auto-rows:220px}
.journal-card{border-radius:16px;box-shadow:none;background:var(--pine)}
.journal-card img{transition:transform .55s cubic-bezier(.2,.72,.25,1)}
.journal-card:hover img{transform:scale(1.035)}
.journal-card:after{border-radius:11px}
.journal-card span{font-size:9px;letter-spacing:.12em}
.journal-hint{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.image-lightbox{background:rgba(5,27,18,.96)}
.image-lightbox__inner{width:min(1120px,92vw);padding:12px 12px 18px;border-radius:18px;background:#fff}
.image-lightbox img{width:100%;max-height:76vh;border-radius:12px;object-fit:contain;background:#112d22}
.image-lightbox p{margin:14px 66px 4px;font-family:var(--sans);font-size:14px;text-align:center;color:var(--charcoal)}
.image-lightbox__inner>button[aria-label="Tutup foto"]{top:18px;right:18px;width:44px;height:44px;border-radius:10px;background:rgba(8,39,26,.88);color:#fff;z-index:5}
.lightbox-nav{position:absolute;left:24px;right:24px;top:50%;display:flex;justify-content:space-between;pointer-events:none;translate:0 -50%}
.lightbox-nav button{position:static!important;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:rgba(7,35,23,.82);color:#fff;font-size:23px;pointer-events:auto;cursor:pointer;backdrop-filter:blur(8px)}
.lightbox-count{position:absolute;left:24px;top:24px;padding:7px 10px;border-radius:8px;background:rgba(7,35,23,.78);color:#fff;font-size:9px;font-weight:700;letter-spacing:.14em}

.profile{background:var(--ivory)!important}
.circle-gallery{gap:18px}
.circle-gallery figure,.circle-gallery figure:nth-child(1),.circle-gallery figure:nth-child(2),.circle-gallery figure:nth-child(3){aspect-ratio:4/3;border:0;border-radius:17px!important;box-shadow:var(--pro-shadow)}

.cta{min-height:620px}
.cta-shade{background:linear-gradient(90deg,rgba(7,38,25,.85),rgba(7,38,25,.58)),rgba(8,35,24,.22)}
.cta-copy h2{font-size:clamp(64px,7vw,104px);line-height:.86}

/* Inner pages: consistent editorial grid, no blobs or clipped polygons. */
.inner-hero{padding:170px 0 88px;background:var(--ivory)}
.inner-grid{grid-template-columns:1fr 1fr;gap:64px}
.inner-hero h1{font-size:clamp(67px,7vw,105px);line-height:.82}
.inner-visual{height:450px;border:0;border-radius:20px;box-shadow:var(--pro-shadow)}
.editorial,.teacher-grid,.school-map-grid,.admission-grid{gap:64px}
.teacher-main,.teacher-small{clip-path:none!important;border-radius:18px!important}
.teacher-small{border:6px solid var(--ivory)}
.trait-grid,.method-grid,.facility-grid{gap:12px;border:0}
.trait-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.trait-grid article,.method-grid article,.facility-grid article{border:1px solid var(--rule);border-radius:14px;background:rgba(255,255,255,.55)}
.deep .facility-grid article,.forest .facility-grid article{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.055)}
.curriculum-cards{gap:14px}
.curriculum-cards article,.curriculum-cards article:nth-child(1),.curriculum-cards article:nth-child(2),.curriculum-cards article:nth-child(3){border-radius:16px!important;clip-path:none!important}
.level-stack,.experience-list{gap:90px}
.level-image,.level-image.arch,.level-image.round,.level-image.cut,.experience-image,.experience-image.arch,.experience-image.round,.experience-image.cut,.experience-image.organic-a,.experience-image.organic-b{height:500px;border-radius:18px!important;clip-path:none!important;box-shadow:var(--pro-shadow)}
.map-card{padding:12px;border-radius:16px;box-shadow:var(--pro-shadow)}
.feature-pair{gap:18px}.feature-pair article{border-radius:16px;overflow:hidden;box-shadow:var(--pro-shadow)}
.feature-pair img{height:340px}
.story-archive{gap:18px}.story-archive a{border:1px solid var(--rule);border-radius:16px;box-shadow:none}
.story-archive img{height:280px}
.calendar-notes,.contact-grid{gap:14px}
.calendar-notes article,.contact-grid article,.contact-grid article:nth-child(n){border:1px solid var(--rule);border-radius:16px!important;box-shadow:none;background:var(--paper)}
.schedule{border-radius:14px;overflow:hidden;box-shadow:none;border:1px solid var(--rule)}
.schedule th{background:var(--pine)}
.interest-form{border-radius:18px;background:var(--pine-deep);box-shadow:var(--pro-shadow)}
.interest-form input,.interest-form textarea,.interest-form select{border-radius:9px}
.library-service-grid{gap:12px;border:0}
.library-service-grid article{border:1px solid rgba(255,255,255,.16);border-radius:14px}
.library-portal-card{border-radius:18px;box-shadow:var(--pro-shadow)}
.faq-grid details{border-radius:12px}

/* Footer: information-first and protected from floating controls. */
.site-footer{padding-top:68px;background:var(--pine-deep)}
.footer-top{align-items:center}.footer-grid{gap:34px}.footer-bottom{padding-right:120px}

/* Scroll motion stays vertical, short, and predictable. */
.motion-ready [data-reveal]{
  --reveal-x:0px!important;
  --reveal-y:18px!important;
  opacity:0;
  translate:0 18px!important;
  scale:1!important;
  rotate:0deg!important;
  transform:none!important;
  clip-path:inset(0)!important;
  filter:none!important;
  transition:opacity .55s ease var(--delay,0ms),translate .7s cubic-bezier(.2,.72,.25,1) var(--delay,0ms)!important;
}
.motion-ready [data-reveal].is-in{opacity:1;translate:0 0!important;scale:1!important;rotate:0deg!important;clip-path:inset(0)!important}
.motion-ready [data-reveal].is-in:hover{translate:0 0!important}
.motion-ready [data-reveal] img{scale:1!important}

@media(max-width:1100px){
  .header-action.visit{display:none}
  .header-right .library-link{display:none}
  .quick-routes{grid-template-columns:repeat(3,1fr)}
  .quick-routes a:nth-child(3){border-right:0}
  .quick-routes a:nth-child(-n+3){border-bottom:1px solid var(--rule)}
  .quick-routes a:nth-child(4){grid-column:1/2}.quick-routes a:nth-child(5){grid-column:2/4}
  .trait-grid{grid-template-columns:repeat(3,1fr)}
  .experience-card{flex-basis:min(43vw,400px)}
}

@media(max-width:760px){
  :root{--mobile-edge:16px}
  body{background:var(--ivory)!important}
  .shell{width:calc(100% - 32px)}.shell-wide{width:calc(100% - 16px)}
  main>.section:not(.hero):not(.inner-hero){padding-top:56px!important;padding-bottom:56px!important}
  .display{font-size:clamp(41px,11.8vw,55px);line-height:1}
  .lead{font-size:18px}
  .section-head{grid-template-columns:1fr;gap:14px;margin-bottom:26px}

  .site-header,.site-header.scrolled{top:calc(8px + env(safe-area-inset-top))}
  .header-card,.site-header.scrolled .header-card{height:58px;border-radius:15px}
  .menu-button{width:42px;height:42px;border-radius:11px}
  .brand img,.site-header.scrolled .brand img{width:37px;height:37px;flex-basis:37px}
  .brand b,.site-header.scrolled .brand b{font-size:16px}

  .drawer-shell{padding-top:74px}.drawer-feature{min-height:430px;border-radius:18px;padding:26px}
  .drawer-links strong{font-size:clamp(27px,8vw,34px)}

  .hero{height:max(100svh,680px);min-height:680px;max-height:none}
  .hero-grid{display:block;padding-top:126px}
  .hero h1{max-width:96%;font-size:clamp(54px,16.2vw,70px);line-height:.89;margin:13px 0 20px}
  .hero-copy p{font-size:13.5px;line-height:1.58}
  .hero-media img{object-position:60% center}
  .hero-side,.hero-scroll{display:none}
  .hero .button-row{grid-template-columns:1fr 1fr}

  .quick-routes{grid-template-columns:1fr 1fr;width:calc(100% - 20px);margin:-24px auto 0;border-radius:14px}
  .quick-routes a,.quick-routes a:nth-child(n){min-height:78px;grid-column:auto;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:13px 14px}
  .quick-routes a:nth-child(even){border-right:0}
  .quick-routes a:last-child{grid-column:1/-1;border-right:0;border-bottom:0}
  .quick-routes b{font-size:18px}.quick-routes small{font-size:7px}

  .intro{padding-top:64px!important}
  .split,.stage-layout,.story-slider,.inner-grid,.editorial,.teacher-grid,.school-map-grid,.admission-grid{grid-template-columns:1fr;gap:34px}
  .image-collage{height:360px}
  .img-organic{width:86%;height:86%;border-radius:15px}.img-round{width:43%;border-width:4px;border-radius:12px}
  .value-trio{grid-template-columns:1fr;gap:0}
  .value-trio div,.value-trio div+div{padding:13px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .value-trio div:last-child{border-bottom:0}
  .ticker{padding:14px 12px}.ticker div{gap:8px;flex-wrap:wrap}.ticker span{font-size:8px}.ticker i{font-size:8px}

  .pillar-grid,.stage-cards,.trait-grid,.method-grid,.curriculum-cards,.facility-grid,.calendar-notes,.contact-grid,.story-archive{grid-template-columns:1fr}
  .pillar,.pillar:nth-child(n){min-height:300px;padding:25px;border-radius:14px!important}.pillar h3{font-size:42px}
  .stage-card,.stage-card:nth-child(n){height:min(108vw,420px);border-radius:14px!important}

  .story-slider{padding:10px;border-radius:16px}
  .story-visual{min-height:min(105vw,410px)}
  .story-image-frame{border-radius:12px}
  .story-copy{padding:12px 6px 8px}.story-copy h3{font-size:clamp(35px,10vw,42px)}
  .story-tabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.story-tabs button{min-height:40px;text-align:center}
  .story-controls{justify-content:space-between}.story-dots{display:none}

  .carousel-toolbar{justify-content:space-between;margin:0 0 14px}
  .carousel-toolbar--experience{width:calc(100% - 32px);margin:-8px auto 14px}
  .carousel-toolbar--campus{margin:0 0 12px}
  .carousel-button{width:44px;height:44px;border-radius:10px}
  .experience-rail{padding:4px 16px 22px;gap:12px}
  .experience-card,.experience-card:nth-child(n){flex-basis:calc(100vw - 42px);height:min(124vw,465px);border-radius:14px!important}
  .experience-card h3{font-size:33px}

  .campus-explorer{grid-template-columns:1fr;border-radius:15px;overflow:hidden}
  .campus-tabs{display:grid;grid-template-columns:1fr;gap:5px;overflow:hidden;padding:8px}
  .campus-tabs button{display:none;min-height:74px;padding:12px;border:0}
  .campus-tabs button.active{display:grid}
  .campus-stage{min-height:520px}
  .campus-caption{left:12px;right:12px;bottom:12px;padding:17px;border-radius:13px}
  .campus-caption h3{max-width:none;font-size:clamp(37px,11vw,44px)}
  .campus-caption p{font-size:12.5px}
  .campus-map-mini{grid-template-columns:1fr;gap:28px;margin-top:44px}

  .journal-grid{grid-template-columns:1fr;grid-auto-rows:230px;gap:10px}
  .journal-card,.journal-card--wide,.journal-card--tall,.journal-card:first-child,.journal-card:last-child{grid-column:1;grid-row:auto;min-height:230px;border-radius:13px}
  .image-lightbox{padding:70px 8px calc(78px + env(safe-area-inset-bottom))}
  .image-lightbox__inner{width:100%;padding:8px 8px 14px;border-radius:14px}
  .image-lightbox img{max-height:65dvh;border-radius:9px}
  .image-lightbox p{margin:12px 48px 2px;font-size:12px}
  .image-lightbox__inner>button[aria-label="Tutup foto"]{top:-54px;right:0}
  .lightbox-nav{left:14px;right:14px}.lightbox-nav button{width:44px;height:44px}
  .lightbox-count{left:14px;top:14px}

  .circle-gallery{grid-template-columns:1fr;gap:10px}.circle-gallery figure:nth-child(n){aspect-ratio:4/3;border-radius:13px!important}
  .cta{min-height:500px}.cta-copy h2{font-size:clamp(47px,13vw,61px);line-height:.93}

  .inner-hero{padding:100px 0 48px}.inner-hero h1{font-size:clamp(49px,14vw,66px);line-height:.91}
  .inner-visual{height:min(82vw,320px);border-radius:14px}
  .level-stack,.experience-list{gap:54px}.level-stack article,.experience-list article{grid-template-columns:1fr;gap:28px}
  .level-stack article:nth-child(even)>:first-child,.experience-list article:nth-child(even)>.experience-image{order:0}
  .level-image,.experience-image{height:min(100vw,390px);border-radius:14px!important}
  .teacher-collage{height:380px}.teacher-main,.teacher-small{border-radius:13px!important}
  .feature-pair{grid-template-columns:1fr}.feature-pair img{height:260px}
  .trait-grid article,.method-grid article,.facility-grid article,.calendar-notes article,.contact-grid article{border-radius:12px!important}
  .schedule{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .schedule tbody,.schedule thead{min-width:620px}
  .library-service-grid{grid-template-columns:1fr}.library-portal-card{border-radius:14px}

  .site-footer{padding-top:52px}.footer-bottom{padding-right:0}
}

@media(max-width:390px){
  .shell{width:calc(100% - 26px)}
  main>.section:not(.hero):not(.inner-hero){padding-top:58px!important;padding-bottom:58px!important}
  .hero h1{font-size:clamp(51px,16vw,62px)}
  .hero .button-row{gap:7px}.hero .btn{padding-inline:8px;font-size:9px}
  .quick-routes{width:calc(100% - 16px)}
  .display{font-size:clamp(39px,11.4vw,47px)}
  .carousel-toolbar--experience{width:calc(100% - 26px)}
  .experience-rail{padding-inline:13px}.experience-card{flex-basis:calc(100vw - 34px)}
  .campus-stage{min-height:500px}
}

@media(prefers-reduced-motion:reduce){
  .hero-media img{animation:none!important}
  .experience-rail{scroll-behavior:auto}
  .carousel-button,.site-header{transition:none!important}
}

/* ================================================================
   v34 FINAL AUTHORITY
   Neutralises the remaining v33 template layer with one disciplined
   editorial system. These rules intentionally come last.
   ================================================================ */
.site-header.signature-header-hidden{transform:translateY(calc(-100% - 30px))!important;opacity:0!important;pointer-events:none!important}
.site-header.force-visible,.site-header.force-visible.signature-header-hidden{transform:none!important;opacity:1!important;pointer-events:auto!important}
.header-card,.site-header.scrolled .header-card{height:72px!important;padding:0 13px!important;border:1px solid rgba(18,61,43,.12)!important;border-radius:18px!important;background:rgba(255,253,248,.95)!important;box-shadow:0 14px 42px rgba(7,35,23,.13)!important}
.site-header.scrolled .header-card{height:64px!important}
.menu-button{width:46px!important;height:46px!important;border-radius:13px!important}
.header-action.visit,.header-right .pmb-link{display:none!important}
.header-action,.header-link{min-height:40px!important;border-radius:9px!important}
.header-link{padding:10px 9px!important;border-color:transparent!important;background:transparent!important}
.header-action.apply{padding:11px 17px!important;border-radius:10px!important;background:var(--pine)!important;color:#fff!important}
.nav-ribbon,.signature-rail-controls{display:none!important}

.btn{border-radius:10px!important;overflow:hidden!important}
.quick-routes{width:min(1240px,calc(100% - 72px))!important;margin:-30px auto 0!important;border:1px solid var(--rule)!important;border-radius:18px!important;background:var(--paper)!important;box-shadow:var(--pro-shadow)!important}
.quick-routes a{min-height:98px!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;padding:20px 18px!important;transform:none!important}
.quick-routes img{display:none!important}
.quick-routes b{font-family:var(--serif)!important;font-size:21px!important;line-height:1.08!important;overflow-wrap:normal!important;word-break:normal!important}

body.signature-motion [data-reveal]{filter:none!important;transform:translate3d(0,18px,0)!important;clip-path:none!important;transition:opacity .68s ease,transform .78s cubic-bezier(.2,.75,.25,1)!important}
body.signature-motion [data-reveal].sig-in,
body.signature-motion [data-reveal].is-in{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}

.image-collage{min-height:0!important;height:clamp(500px,46vw,590px)!important}
.img-organic{left:0!important;top:0!important;width:82%!important;height:88%!important;clip-path:none!important;border-radius:22px!important;transform:none!important}
.img-round{right:0!important;bottom:0!important;width:43%!important;height:auto!important;aspect-ratio:1.12!important;border:6px solid var(--ivory)!important;border-radius:18px!important;transform:none!important}

.pillar,.pillar:nth-child(n){min-height:430px!important;padding:34px!important;border-radius:18px!important;clip-path:none!important}
.pillar:hover{transform:translateY(-3px)!important}
.stage-layout>div:first-child{position:static!important}
.stage-card,.stage-card:nth-child(n){height:500px!important;border-radius:18px!important;clip-path:none!important;transform:none!important}
.stage-card:hover{transform:translateY(-4px)!important}

.story-slider{grid-template-columns:1.03fr .97fr!important;gap:54px!important;min-height:0!important;padding:24px!important;border:1px solid var(--rule)!important;border-radius:22px!important;background:rgba(255,255,255,.56)!important;box-shadow:none!important;overflow:visible!important}
.story-visual{min-height:560px!important;border-radius:18px!important;overflow:hidden!important}
.story-image-frame{border-radius:18px!important}
.story-copy{padding:20px 12px!important}
.story-tabs{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin-bottom:24px!important;padding-bottom:0!important;overflow:visible!important}
.story-tabs button{min-height:38px!important;border-radius:9px!important}
.story-controls>button{width:46px!important;height:46px!important;border-radius:11px!important}
.story-dots button{width:22px!important;height:3px!important;border-radius:3px!important}

.experience-card,.experience-card:nth-child(n){height:540px!important;border-radius:18px!important;clip-path:none!important;transform:none!important}
.experience-card:hover{transform:translateY(-4px)!important}
.campus-explorer{grid-template-columns:300px minmax(0,1fr)!important;gap:0!important;min-height:590px!important;padding:0!important;border-radius:20px!important}
.campus-tabs{border-radius:0!important}
.campus-tabs button{min-height:102px!important;padding:16px!important;border-radius:10px!important}
.campus-stage{min-height:590px!important;border-radius:0 20px 20px 0!important}
.campus-caption{left:34px!important;right:34px!important;bottom:30px!important;max-width:650px!important;padding:24px!important;border-radius:16px!important}
.campus-map-mini{margin-top:72px!important;border-radius:20px!important}

.journal-grid{grid-auto-rows:220px!important;gap:14px!important}
.journal-card,.journal-card:nth-child(n){min-height:0!important;border-radius:16px!important;box-shadow:none!important}
.journal-card span{margin:0!important;border-radius:0!important;background:linear-gradient(transparent,rgba(5,28,18,.82))!important}
.circle-gallery figure,.circle-gallery figure:nth-child(n){aspect-ratio:4/3!important;border-radius:17px!important;transform:none!important}

.inner-hero{min-height:auto!important;padding:150px 0 84px!important;background:linear-gradient(135deg,#eee5d8,#f7f3ea 72%)!important}
.inner-hero .inner-grid{gap:62px!important}
.inner-hero h1{font-size:clamp(64px,7vw,108px)!important;line-height:.86!important}
.inner-visual,.page-learning .inner-visual,.page-levels .inner-visual,.page-experiences .inner-visual,.page-school .inner-visual,.page-library .inner-visual{height:450px!important;border-radius:20px!important;clip-path:none!important;transform:none!important}
.method-grid article,.curriculum-cards article,.trait-grid article,.facility-grid article,.calendar-notes article,.contact-grid article,.faq-grid details{border-radius:14px!important}
.level-stack article,.experience-list article{gap:46px!important;padding-block:54px!important}
.level-stack article figure,.level-stack article:nth-child(n) figure,.experience-list article figure,.experience-list article:nth-child(n) figure{border-radius:18px!important}
.site-footer{padding:76px 0 26px!important;background:var(--pine-deep)!important}

@media(max-width:760px){
  .header-card,.site-header.scrolled .header-card{height:58px!important;border-radius:15px!important}
  .menu-button{width:42px!important;height:42px!important;border-radius:11px!important}
  .quick-routes{width:calc(100% - 20px)!important;margin:-24px auto 0!important;border-radius:14px!important}
  .quick-routes a{min-height:78px!important;padding:13px 14px!important}
  .quick-routes b{font-size:18px!important}
  .image-collage{height:360px!important}
  .img-organic{width:86%!important;height:86%!important;border-radius:15px!important}
  .img-round{width:43%!important;border-width:4px!important;border-radius:12px!important}
  .pillar,.pillar:nth-child(n){min-height:300px!important;padding:25px!important;border-radius:14px!important}
  .stage-card,.stage-card:nth-child(n){height:min(108vw,420px)!important;border-radius:14px!important}
  .story-slider{grid-template-columns:1fr!important;gap:34px!important;padding:10px!important;border-radius:16px!important;overflow:hidden!important}
  .story-visual{min-height:min(105vw,410px)!important;border-radius:12px!important}
  .story-copy{padding:12px 6px 8px!important}
  .story-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;margin-bottom:21px!important}
  .experience-card,.experience-card:nth-child(n){height:min(124vw,465px)!important;border-radius:14px!important}
  .campus-explorer{grid-template-columns:1fr!important;min-height:0!important;border-radius:15px!important;overflow:hidden!important}
  .campus-tabs button{min-height:74px!important;padding:12px!important}
  .campus-stage{min-height:520px!important;border-radius:0!important}
  .campus-caption{left:12px!important;right:12px!important;bottom:12px!important;padding:17px!important;border-radius:13px!important}
  .campus-map-mini{margin-top:44px!important;border-radius:15px!important}
  .journal-grid{grid-auto-rows:230px!important;gap:10px!important}
  .journal-card,.journal-card:nth-child(n){min-height:230px!important;border-radius:13px!important}
  .circle-gallery figure,.circle-gallery figure:nth-child(n){aspect-ratio:4/3!important;border-radius:13px!important}
  .inner-hero{padding:100px 0 48px!important}
  .inner-hero h1{font-size:clamp(49px,14vw,66px)!important;line-height:.91!important}
  .inner-visual,.page-learning .inner-visual,.page-levels .inner-visual,.page-experiences .inner-visual,.page-school .inner-visual,.page-library .inner-visual{height:min(82vw,320px)!important;border-radius:14px!important}
  .site-footer{padding-top:52px!important}
}

@media(max-width:380px){
  .brand{gap:4px!important}
  .brand b,.site-header.scrolled .brand b{
    max-width:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
    text-overflow:clip!important;
    font-size:13.5px!important;
    letter-spacing:-.02em!important;
  }
  .brand img,.site-header.scrolled .brand img{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
  }
}

/* ============================================================
   HOTFIX v35 — drawer/full-screen menu text overlap
   Root cause: ".drawer-links" lays the menu out as a 2-column
   CSS grid. Each link is itself a 3-col grid (number / label /
   arrow). Long one-word labels ("Pembelajaran", "Pengalaman",
   "Perpustakaan") at clamp(29px–45px) render wider than their
   column and, because grid items default to min-width:auto,
   the text overflows into the neighbouring column and collides
   with its number+arrow. Confirmed on-screen at 1360px width.
   Fix: force the grid items to respect their track (min-width:0)
   and let the label wrap onto a second line instead of
   overflowing, with a touch of headroom on line-height.
   ============================================================ */
.drawer-links a{min-width:0}
.drawer-links a strong{
  min-width:0;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
  line-height:1.05;
}
@media(min-width:761px){
  .drawer-links strong{font-size:clamp(24px,2.6vw,38px)!important}
}