/* Final route flow, contact and compact footer refinements. */
:root{--ruibo-header:88px}

@media (min-width:901px){
  html.fullPageMode{scroll-snap-type:y mandatory;scroll-padding-top:var(--ruibo-header)}
  html.fullPageMode .snapStage>.flowPanel{height:calc(100svh - var(--ruibo-header));min-height:620px;scroll-snap-align:start;scroll-snap-stop:always;overflow:clip;padding-top:clamp(42px,6vh,76px);padding-bottom:clamp(42px,6vh,76px)}
  html.fullPageMode .snapStage>.heroPanel{padding:0;height:calc(100svh - var(--ruibo-header));min-height:620px;max-height:none}
  html.fullPageMode .snapStage>.aboutPanel{padding:0}
  html.fullPageMode .snapStage>.flowPanel>.container,
  html.fullPageMode .snapStage>.flowPanel>.panelContent{height:100%}
  html.fullPageMode .recommendationPanel .homeProductGrid{gap:clamp(14px,1.5vw,24px)}
  html.fullPageMode .recommendationPanel .cardVisual{max-height:31vh}
  html.fullPageMode .exploreLayout{height:100%;align-items:center}
  html.fullPageMode .customStage>.customLead>.container,
  html.fullPageMode .customStage>.section>.container{height:auto}
  html.fullPageMode .customStage>.flowPanel{display:flex;align-items:center}
  html.fullPageMode .customStage>.flowPanel>.container{width:min(1240px,calc(100% - 96px))}
  html.fullPageMode .homeInquiry .inquiryLayout{height:100%;align-items:center}
  html.fullPageMode .siteFooter{scroll-snap-align:end}
}

html.motionReady .flowPanel .flowMotionTarget{opacity:0;transition:opacity 620ms ease,transform 700ms cubic-bezier(.22,.76,.2,1),clip-path 700ms cubic-bezier(.22,.76,.2,1);will-change:opacity,transform,clip-path}
html.motionReady .flowPanel.motion-rise .flowMotionTarget{transform:translate3d(0,46px,0)}
html.motionReady .flowPanel.motion-slide .flowMotionTarget{transform:translate3d(54px,0,0)}
html.motionReady .flowPanel.motion-reveal .flowMotionTarget{clip-path:inset(0 0 16% 0);transform:translate3d(0,22px,0)}
html.motionReady .flowPanel.motion-scale .flowMotionTarget{transform:scale(.972)}
html.motionReady .flowPanel.isEntered .flowMotionTarget{opacity:1;transform:none;clip-path:inset(0)}

.carouselProgress{position:absolute;left:0;right:0;bottom:-8px;height:2px;background:rgba(63,84,105,.16);overflow:hidden}
.carouselProgress i{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.carouselProgress.isRunning:not(.isPaused) i{animation:carouselProgress 5s linear forwards}
@keyframes carouselProgress{to{transform:scaleX(1)}}

.homeStoryMedia .contentMedia,.aboutPanelMedia .contentMedia{display:block;width:100%;height:100%;object-fit:cover}
.homeStoryMedia .contentMedia{object-position:center}
.aboutPanelMedia{border:1px solid rgba(40,62,82,.14);border-radius:2px;box-shadow:none;background:#e8edf1}
.aboutPanelMedia.hasVideo{height:auto;min-height:0;aspect-ratio:16/9;background:#0e1822}
.aboutPanelMedia.hasVideo .contentMedia{object-fit:contain;background:#0e1822}
.aboutPanelMedia.hasVideo>span{pointer-events:none}
.aboutPanel:nth-child(even) .aboutPanelMedia{border-color:rgba(255,255,255,.16)}
.aboutPanelMedia:after{background:linear-gradient(135deg,transparent 70%,rgba(37,81,232,.08));pointer-events:none}
.aboutPanelMedia video{background:#0e1822}

.timelineSection{background:#edf2f5;position:relative}
.timelineSection>.container{display:grid;grid-template-columns:minmax(220px,.64fr) minmax(0,1.55fr);gap:clamp(42px,6vw,92px);align-items:center}
.timelineIntro h2{font-size:clamp(34px,3.7vw,55px);line-height:1.22;letter-spacing:-.04em;margin:18px 0 24px}
.timelineIntro p{font-size:16px;line-height:1.85;color:#637583;max-width:430px}
.timelineExperience{display:grid;grid-template-columns:minmax(340px,1fr) minmax(170px,.52fr);gap:clamp(24px,3vw,46px);align-items:center}
.projectTimeline{list-style:none;margin:0;padding:0;position:relative}
.projectTimeline:before,.projectTimeline:after{content:"";position:absolute;left:23px;top:23px;bottom:23px;width:1px;background:#cad5dd;transform-origin:top}
.projectTimeline:after{background:var(--accent);transform:scaleY(0);transition:transform 1000ms cubic-bezier(.22,.76,.2,1)}
.timelineActive .projectTimeline:after{transform:scaleY(1)}
.projectTimeline li{min-height:67px;display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;position:relative;opacity:.28;transform:translate3d(18px,0,0);transition:opacity 420ms ease,transform 560ms cubic-bezier(.22,.76,.2,1);transition-delay:calc(var(--step) * 85ms)}
.timelineActive .projectTimeline li{opacity:1;transform:none}
.projectTimeline li>span{position:relative;z-index:1;width:46px;height:46px;display:grid;place-items:center;background:#edf2f5;border:1px solid #b9c8d2;color:#5b7182;font-size:12px;letter-spacing:.08em;transition:background 300ms,border-color 300ms,color 300ms}
.timelineActive .projectTimeline li>span{background:#173149;border-color:#173149;color:#fff}
.projectTimeline h3{font-size:18px;line-height:1.25;margin:1px 0 6px;color:#1b3143}
.projectTimeline p{font-size:14px;line-height:1.55;margin:0;color:#70808d}
.timelineGallery{height:430px;display:grid;grid-template-rows:repeat(3,1fr);gap:10px;transform:rotate(1.2deg)}
.timelineGallery figure{margin:0;position:relative;overflow:hidden;background:#fff;border:1px solid #d3dde4}
.timelineGallery figure:nth-child(2){transform:translateX(-18px)}
.timelineGallery img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.2,.7,.2,1)}
.timelineGallery figure:hover img{transform:scale(1.035)}
.timelineGallery figcaption{position:absolute;left:10px;bottom:9px;background:rgba(15,28,40,.8);color:#fff;padding:5px 8px;font-size:10px;letter-spacing:.06em;backdrop-filter:blur(8px)}

.customFinal{position:relative;background:#132537;color:#fff;overflow:hidden}
.customFinalBackdrop{position:absolute;left:-2vw;bottom:-5vw;font-size:23vw;font-weight:800;line-height:.8;letter-spacing:-.08em;color:rgba(255,255,255,.035);pointer-events:none}
.customFinalGrid{width:min(1240px,calc(100% - 96px));margin:auto;display:grid;grid-template-columns:1fr .92fr;gap:clamp(55px,8vw,120px);align-items:center;position:relative;z-index:1}
.customFinal h2{font-size:clamp(40px,4.5vw,66px);line-height:1.18;letter-spacing:-.045em;margin:18px 0 25px}
.customFinal p{font-size:16px;line-height:1.9;color:#b4c3cf;max-width:620px}
.customFinalActions{display:flex;align-items:center;gap:28px;margin-top:30px}
.customFinal .underLink{color:#d7e1e8}
.projectChecklist{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.2);border-left:1px solid rgba(255,255,255,.2)}
.projectChecklist span{min-height:112px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);font-size:13px;letter-spacing:.06em;color:#d7e0e7}
.projectChecklist b{font-size:12px;font-weight:500;color:#7896b0}

.contactLuxury{background:#eef2f5}
.contactLuxury .contactExperience{padding-top:0;background:#eef2f5}
.contactLuxury .contactHero{min-height:calc(100svh - var(--ruibo-header));align-items:center;gap:clamp(24px,4vw,54px);padding-top:clamp(20px,3vh,34px);padding-bottom:clamp(20px,3vh,34px)}
.contactLuxury .contactIntro{background:#142334;color:#fff;padding:clamp(38px,5vw,72px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;border-radius:2px}
.contactLuxury .contactIntro:after{content:"RUIBO";position:absolute;right:-12px;bottom:-36px;font-size:clamp(80px,10vw,154px);font-weight:760;letter-spacing:-.08em;color:rgba(255,255,255,.035);pointer-events:none}
.contactLuxury .contactIntro .eyebrow{color:#8eacd0}
.contactLuxury .contactIntro h1{color:#fff;max-width:720px}
.contactLuxury .contactIntro>p{color:#b4c0cc;max-width:660px}
.contactSignature{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:auto;padding-top:34px;border-top:1px solid rgba(255,255,255,.16);font-size:12px;letter-spacing:.12em;color:#91a8bf}
.contactLuxury .elevatedForm{padding:clamp(22px,2.5vw,36px);border:0;box-shadow:0 24px 70px rgba(26,48,70,.12);border-radius:2px;gap:10px}
.contactLuxury .elevatedForm .formHeading{margin-bottom:12px}
.contactLuxury .elevatedForm label{margin-bottom:10px}
.contactLuxury .elevatedForm input,.contactLuxury .elevatedForm textarea,.contactLuxury .elevatedForm select{min-height:40px;padding:8px 10px;margin-top:5px}
.contactLuxury .elevatedForm textarea{height:70px;min-height:70px}
.contactLuxury .elevatedForm .privacyHint{margin:2px 0}
.contactLuxury .elevatedForm .button{min-height:44px;padding:11px 18px}
.contactLuxury .elevatedForm .briefEmail{margin-top:4px}
.formEdition{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid #dce3e8;color:#1b334a}
.formEdition span{font-size:18px;font-weight:750;letter-spacing:.08em}
.formEdition small{font-size:11px;letter-spacing:.13em;color:#718293}
.contactLuxury .contactChannels{background:#fff;border:1px solid #dde4e9;box-shadow:0 16px 46px rgba(31,52,71,.06)}
.contactLuxury .contactChannels>*{min-height:178px}
.contactLuxury .contactService{margin-top:clamp(70px,8vw,112px);background:#fff}

.compactFooter.siteFooter{padding:0;background:#17212c;color:#aab6c2}
.footerCompactGrid{display:grid;grid-template-columns:1.08fr .74fr .78fr .72fr 1.5fr;gap:clamp(24px,3.1vw,54px);padding:30px 0 24px}
.footerCompactGrid h3{font-size:15px;font-weight:560;color:#f5f7f9;margin:0 0 18px}
.footerCompactGrid p,.footerCompactGrid a{font-size:13px;line-height:1.55;color:#9caab7;margin:3px 0;display:block}
.footerBrand .footerWord{display:block;font-size:28px;line-height:1;color:#fff;letter-spacing:.02em;margin-bottom:16px}
.footerBrand p{max-width:210px}
.footerProjectLink{display:inline-block!important;margin-top:18px!important;color:#fff!important;border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:4px}
.footerColumn a{width:max-content;max-width:100%;transition:color 180ms ease,transform 180ms ease}
.footerColumn a:hover{color:#fff;transform:translateX(3px)}
.footerContactCompact{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:16px;align-items:start}
.footerContactCompact .footerPhone{font-size:16px;color:#fff;margin-top:-3px;white-space:nowrap}
.footerContactCompact p{max-width:280px}
.compactFooter .footerQr{margin:0;text-align:center}
.compactFooter .footerQr img{width:88px;height:88px;object-fit:contain;background:#fff;padding:6px;border:0;border-radius:2px}
.compactFooter .footerQr figcaption{font-size:10px;letter-spacing:.11em;color:#788795;margin-top:9px;white-space:nowrap}
.compactFooter .copyright{min-height:50px;margin:0;padding:12px 0;border:0;border-top:1px solid rgba(255,255,255,.11);border-radius:0;background:none;display:flex;align-items:center;gap:22px;font-size:12px;color:#778694}
.footerMotto{margin-left:auto;letter-spacing:.11em}
.compactFooter .footerAdmin{position:static;margin-left:0;min-height:34px;padding:7px 12px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#9aa8b5;border-radius:2px;font-size:11px}

@media (max-width:1100px){
  .timelineSection>.container{grid-template-columns:.58fr 1.42fr;gap:35px}.timelineExperience{grid-template-columns:1fr .42fr}.timelineGallery{height:390px}.customFinalGrid{gap:45px}
  .footerCompactGrid{grid-template-columns:1fr 1fr 1fr}.footerContact{grid-column:2/4}.footerBrand{grid-row:span 2}
}

@media (max-height:760px) and (min-width:901px){
  .contactLuxury .contactHero{align-items:start;min-height:calc(100svh - var(--ruibo-header));padding-top:18px;padding-bottom:18px}
  .contactLuxury .contactIntro{padding:30px;min-height:560px}
  .contactLuxury .contactIntro h1{font-size:clamp(38px,4vw,54px);margin:14px 0 20px}
  .contactLuxury .contactIntro>p{font-size:15px;line-height:1.72}
  .contactLuxury .contactPromises{margin-top:24px}.contactSignature{padding-top:22px}
  .contactLuxury .elevatedForm{padding:20px 28px;gap:7px}
  .contactLuxury .elevatedForm label{margin-bottom:6px;font-size:13px}.contactLuxury .elevatedForm input,.contactLuxury .elevatedForm select{min-height:35px;padding:6px 9px}
  .formEdition{padding-bottom:8px;margin-bottom:8px}.contactLuxury .elevatedForm .formHeading{margin-bottom:7px}.contactLuxury .elevatedForm textarea{height:48px;min-height:48px;padding:6px 9px}.contactLuxury .elevatedForm .privacyHint{font-size:11px;line-height:1.4}.contactLuxury .elevatedForm .briefEmail{font-size:11px;line-height:1.4}
}

@media (max-width:900px){
  :root{--ruibo-header:72px}
  html.fullPageMode{scroll-snap-type:none;scroll-padding-top:0}
  html.fullPageMode .snapStage>.flowPanel{height:auto;min-height:0;scroll-snap-align:none;scroll-snap-stop:normal;overflow:visible}
  html.fullPageMode .snapStage>.heroPanel{height:850px!important;min-height:0!important;overflow:hidden}
  html.motionReady .flowPanel .flowMotionTarget{opacity:1;transform:none;clip-path:none;transition:none}
  .timelineSection>.container,.timelineExperience,.customFinalGrid{grid-template-columns:1fr}.timelineGallery{height:480px;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}.timelineGallery figure:nth-child(2){transform:translateY(20px)}.customFinalGrid{width:90%;padding:70px 0}.projectChecklist span{min-height:96px}
  .cmsPositioned{left:0!important;top:0!important}
  html,body{overflow-x:clip}
  .contactLuxury .contactHero{grid-template-columns:1fr;padding-top:0}
  .contactLuxury .contactIntro{min-height:560px}
  .footerCompactGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;padding:42px 0 34px}.footerBrand{grid-column:1/-1;grid-row:auto}.footerContact{grid-column:1/-1}
}

@media (max-width:560px){
  .timelineGallery{height:340px;grid-template-columns:1fr 1fr}.timelineGallery figure:last-child{display:none}.projectTimeline li{grid-template-columns:42px 1fr;gap:13px}.projectTimeline li>span{width:40px;height:40px}.projectTimeline:before,.projectTimeline:after{left:20px}.projectChecklist{grid-template-columns:1fr}.customFinalActions{align-items:flex-start;flex-direction:column;gap:18px}
  .contactLuxury .contactExperience{padding-top:0}.contactLuxury .contactIntro{margin-left:-24px;margin-right:-24px;padding:48px 24px;min-height:510px}.contactSignature{gap:9px 16px}.formEdition{align-items:flex-start;gap:15px}.formEdition small{text-align:right}
  .footerCompactGrid{grid-template-columns:1fr 1fr}.footerBrand,.footerContact{grid-column:1/-1}.footerContactCompact{grid-template-columns:1fr 86px;gap:14px}.compactFooter .footerQr img{width:86px;height:86px}.compactFooter .copyright{align-items:flex-start;flex-direction:column;gap:7px;padding:18px 0}.footerMotto{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}html.motionReady .flowPanel .flowMotionTarget{opacity:1;transform:none;clip-path:none;transition:none}.carouselProgress i{animation:none!important;transform:scaleX(1)}.footerColumn a,.projectTimeline li,.projectTimeline:after,.timelineGallery img{transition:none}.projectTimeline li{opacity:1;transform:none}.projectTimeline:after{transform:scaleY(1)}
}
