.rol-hero{position:relative;overflow:hidden;background:var(--gray-50);padding:100px 24px 72px;text-align:center}
.rol-hero-inner{position:relative;max-width:820px;margin:0 auto}
.rol-title{font-family:var(--font-display);font-weight:700;font-size:clamp(44px,7vw,84px);line-height:1.05;letter-spacing:-.015em;color:var(--gray-900);margin:14px 0 22px}
.rol-title em{font-style:italic;font-weight:400;color:var(--blue-600)}
.rol-gallery-wrap{background:var(--gray-50);padding:0 24px 100px}
.rol-tip{text-align:center;color:var(--gray-500);font-size:14px;margin:0 0 24px}
.rol-gallery{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.rol-card{all:unset;box-sizing:border-box;position:relative;display:block;aspect-ratio:4/5.6;border-radius:24px;overflow:hidden;cursor:pointer;background:var(--blue-800);box-shadow:0 10px 30px rgba(11,61,92,.14);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;transition-delay:0s}
.rol-card.fade-up{transition:opacity .8s ease var(--d),transform .8s cubic-bezier(.2,.7,.2,1) var(--d),box-shadow .5s ease}
.rol-card.fade-up.in:hover,.rol-card.fade-up.in:focus-visible,.rol-card.tapped{transform:translateY(-8px);box-shadow:0 24px 50px rgba(11,61,92,.28);transition-delay:0s}
.rol-card:focus-visible{outline:3px solid var(--gold-500,#E2B228);outline-offset:3px}
.rol-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.rol-card:hover img,.rol-card:focus-visible img,.rol-card.tapped img{transform:scale(1.07);filter:saturate(.9)}
.rol-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,61,92,0) 45%,rgba(11,61,92,.78) 100%);transition:background .6s ease}
.rol-card:hover .rol-shade,.rol-card:focus-visible .rol-shade,.rol-card.tapped .rol-shade{background:linear-gradient(180deg,rgba(13,77,118,.35) 0%,rgba(11,61,92,.95) 62%)}
.rol-name{position:absolute;left:22px;right:22px;bottom:20px;font-family:var(--font-display);font-size:22px;font-weight:700;color:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.rol-name::before{content:"";display:block;width:28px;height:3px;border-radius:3px;background:var(--gold-500,#E2B228);margin-bottom:10px}
.rol-card:hover .rol-name,.rol-card:focus-visible .rol-name,.rol-card.tapped .rol-name{transform:translateY(-12px);opacity:0}
.rol-reveal{position:absolute;left:22px;right:22px;bottom:22px;color:#fff;opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rol-card:hover .rol-reveal,.rol-card:focus-visible .rol-reveal,.rol-card.tapped .rol-reveal{opacity:1;transform:none;transition-delay:.08s}
.rol-q{display:block;font-family:var(--font-display);font-size:64px;line-height:.6;color:var(--gold-500,#E2B228);height:28px}
.rol-reveal p{margin:0 0 18px;font-family:var(--font-display);font-style:italic;font-size:16px;line-height:1.55;text-wrap:pretty}
.rol-read{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-100,#f5dc8f)}
.rol-read b{transition:transform .3s ease}
.rol-card:hover .rol-read b{transform:translateX(4px)}
.rol-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s}
.rol-modal.open{visibility:visible;opacity:1;transition:opacity .35s ease}
.rol-backdrop{position:absolute;inset:0;background:rgba(11,61,92,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rol-panel{position:relative;width:min(1040px,100%);max-height:min(88vh,760px);background:#fff;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);box-shadow:0 40px 90px rgba(11,61,92,.35);transform:translateY(24px) scale(.98);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.rol-modal.open .rol-panel{transform:none}
.rol-panel-photo{position:relative;background:var(--blue-800)}
.rol-panel-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.rol-panel-body{padding:52px 48px 36px;overflow-y:auto;max-height:min(88vh,760px)}
.rol-panel-body h2{font-family:var(--font-display);font-size:clamp(30px,3.4vw,40px);margin:0 0 24px;color:var(--gray-900);line-height:1.15}
#rolStory p{font-size:16.5px;line-height:1.8;color:var(--gray-900);margin:0 0 18px;text-wrap:pretty}
#rolStory p:first-child::first-letter{font-family:var(--font-display);font-size:3.2em;float:left;line-height:.9;margin:6px 10px 0 0;color:var(--blue-600);font-weight:700}
#rolVerse{margin:28px 0 0;padding:22px 24px;border-radius:16px;background:var(--gold-50);font-family:var(--font-display);font-style:italic;font-size:16px;line-height:1.7;color:var(--gray-900)}
.rol-nav{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:22px;border-top:1px solid var(--gray-200)}
.rol-nav button{all:unset;cursor:pointer;font-weight:600;font-size:14px;color:var(--blue-600);padding:8px 4px}
.rol-nav button:hover{color:var(--blue-700)}
.rol-close{all:unset;position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;color:var(--gray-900);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.rol-close:hover{background:#fff}
@media (max-width:1100px){.rol-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
.rol-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -24px;padding:6px 24px 18px;scrollbar-width:none}
.rol-gallery::-webkit-scrollbar{display:none}
.rol-card{flex:0 0 74%;scroll-snap-align:center}
.rol-hero{padding:72px 20px 56px}
.rol-panel{grid-template-columns:minmax(0,1fr);max-height:92vh;overflow-y:auto}
.rol-panel-photo{height:300px}
.rol-panel-body{max-height:none;overflow:visible;padding:32px 24px 28px}
.rol-modal{padding:12px}
}

/* ===== Gallery wall ===== */
.wall-wrap{padding:24px 24px 80px;background:radial-gradient(ellipse 70% 60% at 50% 35%,#fbfbfa 0%,#eef0f2 70%,#e6e9ec 100%)}
.wall{position:relative;max-width:1240px;margin:0 auto;aspect-ratio:1200/900}
.wall-item,.wall-plaque{position:absolute;left:var(--l);top:var(--t);width:var(--w)}
.wall-item.fade-up,.wall-plaque.fade-up{transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.wall-frame{background:#1a1a1a;padding:7%;border-radius:3px;transform:rotate(var(--r));box-shadow:0 1px 0 rgba(255,255,255,.08) inset,6px 12px 22px rgba(31,41,55,.22),2px 3px 6px rgba(31,41,55,.18);transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s ease}
.wall-frame::before{content:"";position:absolute;left:50%;top:-38px;width:1px;height:38px;background:transparent}
.wall-mat{background:#fff;padding:5%}
.wall .rol-card{border-radius:0;box-shadow:none;transform:none!important;width:100%}
.wall-item:hover .wall-frame,.wall-item:focus-within .wall-frame,.wall-item:has(.tapped) .wall-frame{transform:rotate(0) translateY(-10px) scale(1.03);box-shadow:10px 24px 44px rgba(31,41,55,.28),3px 6px 10px rgba(31,41,55,.16);z-index:3;position:relative}
.wall-item:hover,.wall-item:focus-within{z-index:5}
.wall .rol-name{font-size:clamp(15px,1.5vw,21px);left:8%;right:8%;bottom:7%}
.wall .rol-reveal{left:8%;right:8%;bottom:7%}
.wall .rol-reveal p{font-size:clamp(12px,1.1vw,15px)}
.wall .rol-q{font-size:clamp(40px,4vw,60px)}
.wall .rol-read{font-size:clamp(10px,.9vw,12px)}
.wall-tag{aspect-ratio:1;border-radius:4px;background:linear-gradient(145deg,var(--blue-500),var(--blue-700));transform:rotate(var(--r));box-shadow:5px 10px 20px rgba(31,41,55,.22);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:clamp(14px,2.2vw,30px);color:#fff;font-family:var(--font-display);line-height:1.25}
.wall-tag span{font-size:clamp(15px,2vw,26px);font-weight:700}
.wall-tag em{font-size:clamp(15px,2vw,26px);color:var(--gold-100,#f5dc8f)}
.wall-emblem{aspect-ratio:1;border-radius:50%;background:#fff;padding:clamp(10px,1.4vw,18px);box-shadow:4px 10px 20px rgba(31,41,55,.2)}
.wall-emblem::before{content:"";position:absolute;left:50%;top:-34%;width:44%;height:40%;transform:translateX(-50%);border:1.5px solid #9aa3ad;border-bottom:none;border-radius:50% 50% 0 0}
.wall-emblem img{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
@media (max-width:860px){
.wall{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 22px;padding-top:10px}
.wall-item,.wall-plaque{position:relative;left:auto;top:auto;width:auto}
.wall-item:nth-child(even){margin-top:48px}
.wall-plaque{max-width:200px;justify-self:center;width:80%}
.wall .rol-name{font-size:18px}.wall .rol-reveal p{font-size:13px}.wall .rol-read{font-size:11px}
}
/* ===== Roots ===== */
.roots-wrap{position:relative;overflow:hidden;padding:30px 24px 120px;background:radial-gradient(ellipse 55% 60% at 8% 35%,rgba(17,119,195,.28),transparent 70%),radial-gradient(ellipse 50% 55% at 95% 80%,rgba(226,178,40,.38),transparent 70%),radial-gradient(ellipse 40% 40% at 60% 10%,rgba(17,119,195,.16),transparent 70%),linear-gradient(165deg,#dcebf8 0%,#e9f3fb 45%,#fbefcd 100%)}
.roots-wrap>*{position:relative}
.roots-top{max-width:560px;margin:0 auto 20px;text-align:center}
.roots-top img{display:block;margin:0 auto 18px;width:130px;height:130px;object-fit:contain;padding:14px;background:#fff;border:1px solid rgba(17,119,195,.12);border-radius:50%;box-shadow:var(--shadow-md);margin-bottom:18px}
.roots-top p{font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.7;color:var(--gray-900);margin:0}
.roots{position:relative;max-width:1000px;margin:10px auto 0;padding:30px 0}
.roots-trunk{position:absolute;left:50%;top:0;bottom:40px;width:4px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(var(--blue-600),var(--blue-500) 60%,var(--gold-500,#E2B228))}
.roots-trunk::after{content:"";position:absolute;left:50%;bottom:-18px;width:14px;height:14px;transform:translateX(-50%);border-radius:50%;background:var(--gold-500,#E2B228);box-shadow:0 0 0 6px var(--gold-50)}
.root-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);align-items:center;margin-bottom:-150px}
.root-row:last-child{margin-bottom:0}
.roots .root-label{display:none}
.root-card{width:min(300px,100%)}
.root-row.left .root-card{grid-column:1;justify-self:end}
.root-row.left .root-branch{grid-column:2}
.root-row.left .root-label{grid-column:3;justify-self:start;padding-left:10px}
.root-row.right .root-card{grid-column:3;grid-row:1;justify-self:start}
.root-row.right .root-branch{grid-column:2;grid-row:1;transform:scaleX(-1)}
.root-row.right .root-label{grid-column:1;grid-row:1;justify-self:end;text-align:right;padding-right:10px}
.root-branch{position:relative;height:120px}
.root-branch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.root-branch path{fill:none;stroke:var(--blue-500);stroke-linecap:round;vector-effect:non-scaling-stroke}
.rb-main{stroke-width:3.5}.rb-twig{stroke-width:1.6;opacity:.55}
.root-branch path{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .15s}
.root-row.in .root-branch path{stroke-dashoffset:0}
.root-node{position:absolute;left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:4px solid var(--blue-600);box-shadow:0 0 0 6px rgba(17,119,195,.12)}
.root-label{display:flex;flex-direction:column;gap:4px}
.root-num{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gold-500,#E2B228)}
.root-name{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);font-weight:700;color:var(--gray-900)}
.roots .rol-card{width:100%}
@media (max-width:760px){
.roots-trunk{left:22px}
.root-row,.root-row.right{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;row-gap:10px;margin-bottom:40px}
.root-row .root-branch,.root-row.right .root-branch{grid-column:1;grid-row:1/3;height:100%;transform:none}
.root-branch svg{display:none}
.root-node{left:22px;top:18px}
.root-row .root-label,.root-row.right .root-label{grid-column:2;grid-row:1;justify-self:start;text-align:left;padding:0;flex-direction:row;align-items:baseline;gap:10px}
.root-row .root-card,.root-row.right .root-card{grid-column:2;grid-row:2;justify-self:start;width:min(320px,100%)}
.root-row{margin-bottom:40px}
}

/* ===== Roots horizontal ===== */
.rh-scroll{max-width:1280px;margin:0 auto;overflow-x:auto;scrollbar-width:none;padding:10px 0 20px}
.rh-scroll::-webkit-scrollbar{display:none}
.rh{position:relative;min-width:1100px;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:auto auto;column-gap:22px;padding:0 30px}
.rh-trunk{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);border-radius:4px;background:linear-gradient(90deg,var(--blue-600),var(--blue-500) 60%,var(--gold-500,#E2B228))}
.rh-trunk::before,.rh-trunk::after{content:"";position:absolute;top:50%;width:14px;height:14px;transform:translateY(-50%);border-radius:50%}
.rh-trunk::before{left:-4px;background:var(--blue-600);box-shadow:0 0 0 6px rgba(17,119,195,.12)}
.rh-trunk::after{right:-4px;background:var(--gold-500,#E2B228);box-shadow:0 0 0 6px var(--gold-50)}
.rh-item{display:flex;flex-direction:column;align-items:center}
.rh-item.up{grid-row:1;justify-content:flex-end}
.rh-item.down{grid-row:2;justify-content:flex-start}
.rh-card{width:100%}
.rh .rol-card{width:100%}
.rh-branch{position:relative;width:60px;height:90px}
.rh-item.down .rh-branch{transform:scaleY(-1)}
.rh-branch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rh-branch path{fill:none;stroke:var(--blue-500);stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d)}
.rh.in .rh-branch path{stroke-dashoffset:0}
.rh-branch::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;transform:translateX(-50%);border-radius:50%;background:#fff;border:4px solid var(--blue-600);box-shadow:0 0 0 6px rgba(17,119,195,.12);box-sizing:border-box}
.rh-card{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d) + .25s)}
.rh-item.down .rh-card{transform:translateY(-16px)}
.rh.in .rh-card{opacity:1;transform:none}
.rh.fade-up{opacity:1;transform:none}
.rh-swipe{display:none;text-align:center;color:var(--gray-500);font-size:13px;margin:6px 0 0}
@media (max-width:1100px){.rh-scroll{margin:0 -24px;padding:10px 24px 20px}.rh-swipe{display:block}}
@media (max-width:760px){.rh{min-width:1000px;column-gap:16px;padding:0 20px}}