/* ===== Bilah atas: logo, cari, Aa, profil ===== */
.top .tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.top .brand img{height:42px}
.top .tools .srch{margin-left:0}
.tb{width:44px;height:44px;border-radius:50%;border:0;background:var(--blue1);color:var(--blue7);font-family:'Fredoka';font-weight:700;font-size:19px;display:grid;place-items:center;line-height:1}
.tb small{font-size:12px}
.me{border:0;background:none;padding:0;border-radius:50%;line-height:0}
.avw{display:block;position:relative;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#bfe3ff,#e9f6ff 70%);box-shadow:0 0 0 2.5px #fff,0 0 0 4px var(--blue)}
.avw .avc{position:absolute;left:-28%;top:3%;width:134%}
.avw.girl{background:linear-gradient(180deg,#ffd6e8,#fff0f6 70%);box-shadow:0 0 0 2.5px #fff,0 0 0 4px #ee6aa0}
.avw.guest{background:var(--blue5);display:grid;place-items:center;box-shadow:0 0 0 2.5px #fff,0 0 0 4px var(--line)}
.avw.guest svg{width:56%;height:56%;fill:var(--ink)}
.topnav{display:none!important}
/* bilah bawah selalu tampil; di layar lebar menjadi pil mengambang */
@media(min-width:820px){
 .bottom{display:flex!important;left:50%;right:auto;transform:translateX(-50%);bottom:14px;width:min(520px,92vw);border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 30px rgba(18,52,91,.18);padding:6px 10px}
 body{padding-bottom:84px!important}
}
/* ===== Ukuran huruf, tema, gerakan ===== */
main,.foot{zoom:var(--zm,1)}
html[data-theme=hangat]{filter:sepia(.3) saturate(1.05)}
html[data-theme=gelap]{filter:invert(1) hue-rotate(180deg);background:#fff}
html[data-theme=gelap] img,html[data-theme=gelap] .im,html[data-theme=gelap] .avw{filter:invert(1) hue-rotate(180deg)}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}
/* ===== Layar profil / pendaftaran anak ===== */
body.obopen{overflow:hidden}
.ob[hidden]{display:none}
.ob{position:fixed;inset:0;z-index:100;overflow-y:auto;overflow-x:hidden;background:linear-gradient(180deg,#8fd0ff 0%,#cfeaff 38%,#fff9ee 72%);-webkit-overflow-scrolling:touch}
.ob-sky{position:absolute;inset:0 0 auto 0;height:380px;overflow:hidden;pointer-events:none}
.ob-sky .sun{position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#fff3b0 0 40%,#ffd75a 41% 62%,rgba(255,215,90,.35) 63%);animation:sunp 5s ease-in-out infinite alternate}
.ob-sky .cloud{position:absolute;width:90px;height:28px;background:#fff;border-radius:30px;opacity:.9;animation:drift 38s linear infinite}
.ob-sky .cloud:before,.ob-sky .cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.ob-sky .cloud:before{width:42px;height:42px;left:14px;top:-20px}.ob-sky .cloud:after{width:30px;height:30px;left:46px;top:-12px}
.ob-sky .c1{top:70px;left:-120px}.ob-sky .c2{top:140px;left:-120px;animation-duration:52s;animation-delay:-20s;transform:scale(.7)}.ob-sky .c3{top:30px;left:-120px;animation-duration:64s;animation-delay:-40s;transform:scale(.5)}
@keyframes drift{to{left:110%}}
@keyframes sunp{to{transform:scale(1.08)}}
.ob-in{position:relative;z-index:2;max-width:440px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 18px 60px;text-align:center}
.ob-logo{margin:4px auto 6px;height:54px;width:auto}
.ob h1{font-size:28px;color:var(--navy);margin:6px 0 4px}
.ob-sub{font-size:15px;color:var(--ink);margin:0 auto 6px;max-width:34ch}
.ob-mus{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top));border:2px solid #b9e3c8;background:#e3f5ea;color:#237a46;font-weight:700;font-size:13px;border-radius:999px;padding:6px 12px;min-height:36px}
.ob-mus.on{background:#fff}
.ob-mus:not(.on){animation:musp 1.8s ease-in-out infinite}
@keyframes musp{50%{transform:scale(1.07)}}
.ob-stage{position:relative;margin:6px -18px 0;padding:6px 18px 0}
.ob-chars{display:flex;justify-content:center;gap:10px;position:relative;z-index:2}
.ob-ch{flex:0 0 42%;max-width:170px;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;opacity:.72;transform:scale(.9);transition:transform .25s,opacity .25s;touch-action:manipulation}
.ob-ch.on{opacity:1;transform:scale(1.04)}
.ob-ch span{margin-top:2px;font-family:'Fredoka';font-weight:600;font-size:15px;color:var(--navy);background:#fff;border:2px solid var(--line);border-radius:999px;padding:3px 14px;box-shadow:0 2px 0 rgba(18,52,91,.08)}
.ob-ch.on span{background:var(--blue);border-color:var(--blue7);color:#fff}
.ob-ch .chr{width:100%}
.ob-ch .chr .c-sh{opacity:.55}
.ob-ground{position:absolute;left:0;right:0;bottom:30px;height:38px;z-index:1;background:repeating-linear-gradient(90deg,#7fcf6a 0 46px,#6cc35a 46px 92px);animation:gr 1.6s linear infinite;border-radius:6px;opacity:.9}
@keyframes gr{to{background-position:-92px 0}}
.ob-form{background:#fff;border:3px solid var(--blue);border-radius:24px;padding:16px;margin-top:4px;text-align:left;position:relative;z-index:3;box-shadow:0 10px 30px rgba(18,52,91,.15)}
.ob-form label{display:block;font-weight:600;font-size:14px;margin:10px 0 4px;color:var(--navy)}
.ob-form input{width:100%;min-height:48px;border:2px solid var(--line);border-radius:14px;padding:8px 14px;font:inherit;font-size:16px;color:var(--navy);background:#fff}
.ob-form input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue1)}
.ob-age{font-size:13.5px;color:var(--green7);min-height:20px;margin-top:4px}.ob-age.bad{color:var(--alert7)}
.ob-more{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.ob-more summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--blue7);min-height:32px;display:flex;align-items:center}
.ob-more .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-err{color:var(--alert7);font-size:13.5px;font-weight:600;min-height:20px;margin-top:6px}
.ob-go,.ob-btn{display:block;width:100%;border:0;background:var(--green);color:#fff;font-family:'Fredoka';font-weight:700;font-size:20px;border-radius:999px;min-height:54px;box-shadow:0 5px 0 var(--green7)}
.ob-go:active,.ob-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green7)}
.ob-btn{background:var(--blue);box-shadow:0 5px 0 var(--blue7);max-width:320px;margin:12px auto 0}
.ob-acts{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:10px}
.ob-link{border:0;background:none;color:var(--blue7);font-weight:600;font-size:15px;min-height:44px;padding:0 14px;text-decoration:underline;text-underline-offset:3px}
.ob-note{font-size:12.5px;color:var(--ink);margin-top:14px;position:relative;z-index:3}
.ob-hill{position:fixed;left:-10%;right:-10%;bottom:-70px;height:130px;background:radial-gradient(ellipse at 50% 0,#8fd96f 0 60%,transparent 61%);z-index:1;pointer-events:none}
.ob-list{display:grid;gap:10px;margin:10px 0}
.ob-prof{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--blue1);border-radius:22px;padding:10px 14px;text-align:left;min-height:84px;box-shadow:0 4px 0 var(--blue1)}
.ob-prof:active{transform:translateY(2px)}
.ob-prof span:nth-child(2){flex:1}
.ob-prof b{font-family:'Fredoka';font-size:20px;display:block}.ob-prof small{color:var(--ink);font-size:13.5px}
.ob-prof i{font-style:normal;font-size:28px;color:var(--blue7)}
.ob-prof .avw{flex:0 0 auto}
@media(min-height:760px){.ob-in{padding-top:calc(34px + env(safe-area-inset-top))}}
/* ===== Lembar profil dan Aa ===== */
.psheet{z-index:90}
.pf-card{display:flex;align-items:center;gap:14px;background:var(--blue5);border-radius:20px;padding:12px 14px;margin:6px 0 10px}
.pf-card b{font-family:'Fredoka';font-size:22px;display:block}.pf-card small{display:block;color:var(--ink);font-size:13.5px}
.pf-card.big .pf-ch{width:96px;flex:0 0 96px}
.pf-card .avw{flex:0 0 auto}
.pf-p{font-size:14.5px;color:var(--ink);margin:6px 0 10px}
.pf-acts{display:flex;gap:8px;flex-wrap:wrap}.pf-acts .btn{font-size:15px;padding:9px 16px}
.pf-del{border:0;background:none;color:var(--alert7);font-weight:600;font-size:14px;margin-top:12px;min-height:40px;text-decoration:underline}
.pf-code{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.pf-code label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.pf-code .r{display:flex;gap:8px}.pf-code input{flex:1;min-height:46px;border:2px solid var(--line);border-radius:14px;padding:6px 14px;font:inherit;font-size:16px;text-transform:uppercase;letter-spacing:2px}
.pf-code .ok{color:var(--green7);font-weight:600}
.aa-g{margin:14px 0}.aa-l{font-weight:600;font-size:14.5px;margin-bottom:6px;display:flex;justify-content:space-between}
.aa-h{font-size:12.5px!important;color:var(--ink);margin-top:6px}
.aa-sz{display:flex;align-items:center;gap:10px}
.aa-sz button{width:52px;height:48px;border-radius:14px;border:2px solid var(--blue7);background:#fff;color:var(--blue7);font-family:'Fredoka';font-weight:700;font-size:18px}
.aa-sz button.big{font-size:26px}.aa-sz button:disabled{opacity:.35}
.aa-sz button small{font-size:11px}
.aa-bar{flex:1;display:flex;gap:4px}.aa-bar i{flex:1;height:10px;border-radius:6px;background:var(--line)}.aa-bar i.on{background:var(--blue)}
.aa-seg{display:flex;gap:6px;flex-wrap:wrap}.aa-seg button{flex:1;min-width:88px;min-height:44px;border:2px solid var(--line);background:#fff;border-radius:999px;font-weight:600;font-size:14px;color:var(--navy)}
.aa-seg button[aria-checked=true]{background:var(--blue);border-color:var(--blue7);color:#fff}
/* ===== Sapaan di beranda ===== */
.kidbar{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--blue1);border-radius:20px;padding:8px 12px;margin:12px 0 0}
.kidbar .avw{flex:0 0 auto}
.kidbar p{flex:1;font-size:14px;line-height:1.35;margin:0}.kidbar b{font-family:'Fredoka';font-size:17px}
.kidbar button{border:0;background:var(--blue1);color:var(--blue7);font-weight:700;font-size:13px;border-radius:999px;padding:8px 14px;min-height:38px}
/* ===== Main Bersama bergerak ===== */
.act .play{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:var(--p700);color:#fff;font-weight:700;font-size:13.5px;border-radius:999px;padding:8px 14px;min-height:40px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.act .play svg{width:14px;height:14px;fill:#fff}
.act .meta+.play{margin-left:0}
.act.playing .panels{display:none}
.stagebox{display:none}
.act.playing .stagebox{display:block}
.stage{position:relative;aspect-ratio:450/312;border-radius:18px;overflow:hidden;background:var(--p50);border:2px solid var(--p100)}
.stage .fr{position:absolute;inset:0;opacity:0;transform:translateX(8%) scale(1.02);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1);background-repeat:no-repeat}
.stage .fr.on{opacity:1;transform:none;animation:kb 3.4s ease-in-out forwards}
.stage .fr.out{opacity:0;transform:translateX(-8%)}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1%)}}
.stage .chip3{position:absolute;left:10px;top:10px;background:var(--p700);color:#fff;font-family:'Fredoka';font-weight:700;font-size:13px;letter-spacing:.6px;border-radius:999px;padding:5px 12px;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.stagecap{font-family:'Fredoka';font-weight:600;font-size:19px;line-height:1.3;margin:10px 2px 6px;min-height:50px;color:var(--navy)}
.stagectl{display:flex;align-items:center;gap:10px}
.stagectl button{border:0;background:var(--p100);color:var(--p700);border-radius:50%;width:44px;height:44px;font-weight:700;font-size:16px;display:grid;place-items:center}
.stagectl .dots{flex:1;display:flex;gap:6px}.stagectl .dots button{flex:1;height:10px;width:auto;border-radius:6px;background:var(--line);padding:0}
.stagectl .dots button.on{background:var(--p700)}
.stagectl .back{width:auto;padding:0 16px;font-size:13px;border-radius:999px}

/* perbaikan: form kode di lembar profil tidak boleh melebar */
.pf-code .r{display:flex;gap:8px;align-items:stretch;width:100%}
.pf-code .r input{flex:1 1 auto;min-width:0;width:auto}
.pf-code .r .btn{flex:0 0 auto;padding:0 18px;min-height:48px}

/* ===================== PERBAIKAN UI (21 Okt 2026) ===================== */
/* bilah atas: tiga tombol sama tinggi, tidak terpotong tepi layar */
.top{padding-left:14px;padding-right:14px;gap:10px}
.top .brand{flex:0 1 auto;min-width:0}
.top .brand img{height:38px;max-width:100%}
.top .tools{gap:8px;flex:0 0 auto;margin-left:auto}
.top .tools .srch{width:42px;height:42px;min-width:42px;flex:0 0 auto}
.tb{width:auto;min-width:42px;height:42px;padding:0 11px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;white-space:nowrap;flex:0 0 auto}
.tb .aa{display:inline-block;line-height:1;white-space:nowrap}
.tb small{display:inline;font-size:14px;margin-left:1px}
.me{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center}
.top .avw{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--blue)}
.top .avw.girl{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #ee6aa0}

/* layar pendaftaran: jarak label karakter dengan kotak isian, tanggal lahir tidak meluber */
.ob-stage{padding-bottom:16px;margin-bottom:6px}
.ob-ground{bottom:48px}
.ob-form{margin-top:10px}
.ob-form input{display:block;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;line-height:1.3}
.ob-form input[type=date]{position:relative;text-align:left;min-height:50px;overflow:hidden}
.ob-form input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.3em;margin:0}
.ob-form input[type=date]::-webkit-calendar-picker-indicator{opacity:.6}
.ob-form input[type=date]:not(.has):not(:focus)::before{content:attr(data-ph);color:#8a97a8;position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.ob-form .two>div{min-width:0}
.ob-form details{min-width:0}
.ob-mus{z-index:5}

/* lembar profil / Aa: tombol Tutup tidak lagi menyempitkan kartu */
.psheet .in{display:flex;flex-direction:column}
.psheet .in>.close{float:none;align-self:flex-end;order:-1;margin:0 0 -34px;position:relative;z-index:2;min-height:38px}
.psheet .in>h3{margin:0 0 10px;padding-right:90px;min-height:38px;display:flex;align-items:center}
.psheet .pf-card{width:100%;align-self:stretch}
.pf-card>div:not(.pf-ch){flex:1;min-width:0}
.pf-card b{overflow-wrap:anywhere;line-height:1.2}
.pf-card small{margin-top:3px;line-height:1.35}
.pf-card.big .pf-ch{width:84px;flex:0 0 84px}
.pf-acts .btn{white-space:nowrap}

/* beranda: sapaan anak dan pencarian rapi */
.kidbar{align-items:center;padding:10px 12px}
.kidbar p{display:flex;flex-direction:column;gap:2px;min-width:0}
.kidbar .kn{font-family:'Fredoka';font-weight:600;font-size:17px;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kidbar .ka{font-size:13px;color:var(--ink);line-height:1.3}
.kidbar button{flex:0 0 auto}
.searchbox input{text-overflow:ellipsis;font-size:16px}

/* Main Bersama: label langkah sejajar walau satu label turun dua baris */
.pn{display:flex;flex-direction:column;min-width:0}
.pn .st{line-height:1.25;min-height:2.5em;display:flex;align-items:flex-end;margin-bottom:5px}
.pn p{overflow-wrap:anywhere}
@media(min-width:520px){.pn .st{min-height:1.25em}}

/* daftar bullet di halaman panduan dan lainnya: beri indentasi */
main ul:not([class]),main ol:not([class]){margin:8px 0 8px 22px;padding:0}
main ul:not([class]) li,main ol:not([class]) li{margin:5px 0;padding-left:2px}
.card ul,.card ol{margin:8px 0 2px 22px}
.card h4{margin-bottom:4px}

/* PERBAIKAN UI 2 (21 Okt 2026): kartu tidak melebar pada ukuran huruf terbesar */
.item{min-width:0;max-width:100%}
.item>span:not(.code):not(.go){flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.item .go{flex:none;max-width:42%;white-space:normal;line-height:1.25}
.item .go small{display:block;white-space:normal;overflow-wrap:anywhere}
.item .t,.item .s{overflow-wrap:anywhere}
/* form awal: tanggal & jarak */
.ob-form input[type=date]:not(.has):not(:focus)::-webkit-datetime-edit,
.ob-form input[type=date]:not(.has):not(:focus)::-webkit-datetime-edit-fields-wrapper{opacity:0}
.ob-form input[type=date]:not(.has):not(:focus){color:transparent}
.ob-age:empty{display:none}
.ob-err:empty{min-height:0;margin-top:0}
.ob-err{min-height:0}
.ob-chars{align-items:flex-end}
.ob-ch span{margin-top:6px}
.ob-ch{transform:none !important}
.ob-ch .chr{transform:scale(.9);transform-origin:50% 100%;transition:transform .25s}
.ob-ch.on .chr{transform:scale(1.04)}
.ob-form .ob-go{margin-top:16px}
/* tab Kenali/Main Bersama & lompat A-Z menempel tepat di bawah header (header 63px, tidak ikut zoom) */
.seg{top:calc(68px / var(--zm,1))}
.az .jump{top:calc(66px / var(--zm,1))}
/* kartu aktivitas: judul di baris sendiri, info alat rata kiri dan konsisten */
.act>header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.act>header h3{flex:1 1 0;min-width:0}
.act>header .meta{flex:1 1 100%;margin-left:0;text-align:left;font-size:13.5px;line-height:1.4}
.pg-list{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}

/* ===== Gambar utama beranda & tumbnil bab (21 Okt 2026) ===== */
.hero{background:linear-gradient(135deg,#E6F0CB 0%,#EEF2D6 55%,#F6F1DC 100%);box-shadow:0 10px 28px rgba(86,98,40,.16)}
.hero:before{background:rgba(255,255,255,.35)}
.hero h1 em{background:linear-gradient(transparent 60%,#F6CF63 60%,#F6CF63 92%,transparent 92%)}
.hero .fam{order:-1;display:block;align-self:stretch;width:calc(100% + 40px);max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;margin:-22px -20px 6px;border:0;border-radius:0;box-shadow:none;filter:none;position:relative;z-index:0;-webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%)}
.hero h1,.hero p,.hero .searchbox{z-index:1}
@media(min-width:600px) and (max-width:959px){.hero{display:flex;min-height:0}.hero .fam{aspect-ratio:2/1;position:relative;right:auto;bottom:auto;top:auto;height:auto;width:calc(100% + 40px)}.hero h1,.hero p,.hero .searchbox{max-width:none}}
@media(min-width:960px){
 .hero{min-height:300px}
 .hero h1,.hero p,.hero .searchbox{max-width:50%}
 .hero .fam{position:absolute;right:0;top:0;bottom:0;left:auto;order:0;width:60%;height:100%;aspect-ratio:auto;margin:0;object-position:62% 50%;z-index:0;-webkit-mask-image:linear-gradient(to right,transparent 0,transparent 6%,rgba(0,0,0,.6) 30%,#000 56%);mask-image:linear-gradient(to right,transparent 0,transparent 6%,rgba(0,0,0,.6) 30%,#000 56%)}
 .hero .searchbox{position:relative}
}
.babc .im .bn{display:none}
.babc .im img{object-position:50% 50%}
.bab-grid .babc:last-child:nth-child(odd) .im .tn{display:none}
.bab-grid .babc:last-child:nth-child(odd) .im .bn{display:block}
@media(min-width:700px){.bab-grid .babc:last-child:nth-child(odd) .im .tn{display:block}.bab-grid .babc:last-child:nth-child(odd) .im .bn{display:none}}
.babc .im{aspect-ratio:4/3}
.bab-grid .babc:last-child:nth-child(odd) .im{aspect-ratio:1040/424}
@media(min-width:700px){.bab-grid .babc:last-child:nth-child(odd) .im{aspect-ratio:4/3}}
/* intro: lantai penuh selebar layar & karakter berdiri di atasnya */
.ob-ground{left:50%;right:auto;width:100vw;margin-left:-50vw;height:46px;bottom:62px;border-radius:0}
.ob-ch span{margin-top:14px}
/* intro: tanpa balok lantai; tiap karakter berdiri di bidang rumput bulat */
.ob-ground{display:none}
.ob-ch{position:relative}
.ob-ch::before{content:"";position:absolute;left:2%;right:2%;bottom:40px;height:40px;border-radius:50%;z-index:0;background:radial-gradient(ellipse at 50% 50%,#9be07a 0,#7fcf6a 55%,rgba(127,207,106,.0) 71%);opacity:.95}
.ob-ch .chr{position:relative;z-index:1}
.ob-ch .chr .c-sh{opacity:.25}
.ob-ch span{position:relative;z-index:1}
.ob-ch::before{bottom:58px;height:38px;background:radial-gradient(ellipse at 50% 50%,#5fae4c 0,#7fcf6a 34%,#9be07a 58%,rgba(155,224,122,0) 72%)}
.ob-ch .chr .c-sh{opacity:0}
.ob-ch .chr .c-sh{display:none}
/* mode padat (filter usia aktif): gambar utama tetap tampil */
.hero.compact .fam{display:block}
.hero.compact .fam{aspect-ratio:2.2/1;margin-bottom:4px}
@media(min-width:600px) and (max-width:959px){.hero.compact .fam{aspect-ratio:2.6/1}}
@media(min-width:960px){.hero.compact{min-height:250px}.hero.compact .fam{aspect-ratio:auto}}
.hero.compact .fam{object-position:50% 8%}@media(min-width:960px){.hero.compact .fam{object-position:62% 50%}}