/* VAV RZD CASE v5
   Exact behavior from the approved Figma principle:
   collapsed -> glass frame grows right + hero flies/shrinks into slot + copy fades in ->
   global wheel/touch locked to horizontal story -> last slide -> animated collapse -> vertical cases continue.
*/

/* Requested polish kept intact. */
.clients-section{position:relative!important;height:auto!important;min-height:150px!important;padding:26px 0 22px!important}
.clients-title{position:relative;z-index:4;display:block;margin:0 auto 14px!important;padding:0!important;font-size:11px;line-height:1;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:rgba(16,16,16,.64)}
.clients-row{min-height:76px!important;height:76px!important;padding:0!important;display:flex!important;align-items:center!important;overflow:hidden!important}
.clients-track,.clients-group{height:76px!important;align-items:center!important}

.contact-list>a,.contact-list>span{position:relative!important;display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:14px!important;row-gap:4px!important;align-items:center!important;min-height:82px!important;padding:15px 0!important;background:transparent!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.16)!important;border-radius:0!important;text-decoration:none!important}
.contact-list .contact-icon{position:static!important;grid-column:1!important;grid-row:1/3!important;align-self:center!important;justify-self:start!important;width:42px!important;height:42px!important;opacity:.76!important}
.contact-list .contact-label{grid-column:2!important;grid-row:1!important;margin:0!important;font-size:10px!important;line-height:1.05!important;color:rgba(255,255,255,.46)!important}
.contact-list strong{grid-column:2!important;grid-row:2!important;margin:0!important;font-size:17px!important;line-height:1.12!important;font-weight:500!important;color:#fff!important;overflow-wrap:anywhere}
.contacts-grid>div:first-child>p:last-child{max-width:460px!important;color:rgba(255,255,255,.54)!important}

/* Page lock while RZD is expanded. JS fixes body to preserve the exact current scroll position. */
html.rzd-case-open{overflow:hidden!important;overscroll-behavior:none!important}
html.rzd-case-open body{overflow:hidden!important;overscroll-behavior:none!important}

/* Kill old overlays only on RZD. */
.case-card-rzd::before,.case-card-rzd::after{
  display:none!important;content:none!important;opacity:0!important;background:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;pointer-events:none!important
}
.case-card-rzd{
  display:block!important;position:sticky!important;overflow:hidden!important;color:#fff!important;background:#17191a!important;
  isolation:isolate!important;transform-origin:left center!important;
  transition:
    width .72s cubic-bezier(.2,.82,.2,1),
    border-radius .72s cubic-bezier(.2,.82,.2,1),
    box-shadow .72s cubic-bezier(.2,.82,.2,1)!important;
  will-change:width,border-radius,box-shadow
}
.case-card-rzd .case-rzd-shell,.case-card-rzd .case-rzd-expanded{position:absolute!important;inset:0!important}

/* Collapsed shell. */
.case-rzd-shell{
  z-index:5!important;display:flex!important;align-items:stretch!important;overflow:hidden!important;background:#eee8df!important;
  opacity:1!important;pointer-events:auto!important
}
.case-rzd-shell::after{
  display:block!important;content:""!important;position:absolute!important;inset:0!important;z-index:2!important;
  background:linear-gradient(90deg,rgba(7,7,7,.48) 0%,rgba(7,7,7,.22) 25%,rgba(7,7,7,.05) 43%,rgba(7,7,7,0) 58%)!important;
  opacity:1;transition:opacity .42s ease!important;pointer-events:none!important
}
.case-rzd-hero{
  position:absolute!important;inset:0!important;z-index:1!important;display:block!important;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:cover!important;object-position:center!important;visibility:visible!important;opacity:1!important;
  filter:none!important;transform:none!important
}
.case-card-rzd .case-copy{
  position:relative!important;z-index:10!important;width:min(37%,520px)!important;min-height:100%!important;
  padding:clamp(34px,4vw,62px)!important;display:flex!important;flex-direction:column!important;color:#fff!important;pointer-events:auto!important;
  opacity:1;transform:none;transition:opacity .18s ease,transform .34s cubic-bezier(.2,.82,.2,1)!important
}
.case-card-rzd .case-copy .eyebrow{color:rgba(255,255,255,.80)!important}
.case-card-rzd .case-copy h3{color:#fff!important;font-size:clamp(66px,6.1vw,104px)!important;margin:28px 0 18px!important}
.case-card-rzd .case-copy>p:not(.eyebrow){display:flex!important;flex-direction:column!important;gap:13px!important;margin:0!important;max-width:370px!important;color:#fff!important}
.case-card-rzd .case-copy>p:not(.eyebrow) strong{font-size:21px!important;line-height:1.08!important;font-weight:620!important;color:#fff!important}
.case-card-rzd .case-copy>p:not(.eyebrow) span{font-size:13px!important;line-height:1.28!important;color:rgba(255,255,255,.64)!important}
.case-rzd-toggle{
  position:relative!important;z-index:30!important;pointer-events:auto!important;margin-top:auto!important;align-self:flex-start!important;
  min-width:220px!important;border:1px solid rgba(255,255,255,.96)!important;cursor:pointer!important;opacity:1!important;filter:none!important;
  background:#fff!important;color:#111!important;box-shadow:0 12px 30px rgba(0,0,0,.12),inset 0 1px #fff!important
}

/* Expanded glass surface exists in layout even while invisible so JS can measure the final hero slot. */
.case-rzd-expanded{
  z-index:20!important;display:block!important;opacity:0;visibility:hidden;pointer-events:none;
  border:1px solid rgba(255,255,255,.22);border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(72,76,78,.90),rgba(29,31,32,.97)),
    rgba(24,26,27,.96);
  -webkit-backdrop-filter:blur(28px) saturate(1.12);backdrop-filter:blur(28px) saturate(1.12);
  box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.24);
  transition:opacity .50s ease .08s,visibility 0s linear .58s!important
}

/* Opening / open state. */
.case-card-rzd.is-expanded{
  z-index:90!important;max-width:none!important;border-radius:34px!important;
  box-shadow:0 34px 100px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.22)!important
}
.case-card-rzd.is-opening .case-rzd-expanded,
.case-card-rzd.is-open .case-rzd-expanded{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition-delay:.08s,0s!important
}
.case-card-rzd.is-expanded .case-copy{
  opacity:0!important;transform:translateX(-24px)!important;pointer-events:none!important
}
.case-card-rzd.is-expanded .case-rzd-shell::after{opacity:0!important}
.case-card-rzd.is-opening .case-rzd-shell,
.case-card-rzd.is-open .case-rzd-shell{
  pointer-events:none!important
}

/* Flight image: same hero visually shrinks and moves into the Figma slot. */
.case-rzd-flight{
  position:fixed!important;
  z-index:2147483000!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  transform-origin:top left!important;
  will-change:transform,border-radius,box-shadow!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  contain:paint!important;
}
.case-rzd-flight img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  border-radius:0!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important;
}
.case-card-rzd.is-opening .case-rzd-hero,
.case-card-rzd.is-open .case-rzd-hero{opacity:0!important}
.case-rzd-slot-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;opacity:0!important;transition:opacity .26s ease!important}
.case-card-rzd.is-open .case-rzd-slot-image{opacity:1!important}
.case-card-rzd.is-opening .case-rzd-slot-image{opacity:0!important}

/* Smooth close. */
.case-card-rzd.is-closing .case-rzd-expanded{opacity:0!important;pointer-events:none!important}
.case-card-rzd.is-closing .case-rzd-shell{opacity:1!important}
.case-card-rzd.is-closing .case-copy{opacity:1!important;transform:none!important}
.case-card-rzd.is-closing .case-rzd-hero{opacity:1!important}
.case-card-rzd.is-closing .case-rzd-shell::after{opacity:1!important}

/* Hide control lives in the dedicated bottom rail, never over text or photography. */
.case-rzd-close{
  position:static!important;
  z-index:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:28px!important;
  height:28px!important;
  padding:0 10px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;
  color:rgba(255,255,255,.68)!important;
  font:inherit!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
  transition:background .16s ease,color .16s ease,border-color .16s ease!important
}
.case-rzd-close:hover,.case-rzd-close:focus-visible{
  background:rgba(255,255,255,.11)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.28)!important;
}
.case-rzd-close span{font-size:13px!important;line-height:1!important;opacity:.72}

/* Horizontal story. No mandatory snap: wheel/trackpad must never spring back and feel static. */
.case-rzd-viewport{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:none!important;scroll-behavior:auto!important;overscroll-behavior:contain;scrollbar-width:none;
  touch-action:pan-x;cursor:grab
}
.case-rzd-viewport.is-dragging{cursor:grabbing}
.case-rzd-viewport::-webkit-scrollbar{display:none}
.case-rzd-track{display:flex;width:100%;min-width:100%;height:100%;align-items:stretch}
.case-rzd-panel{position:relative;flex:0 0 100%;width:100%;height:100%;min-width:0}

/* Intro state after click: text left, hero slot right. */
.case-rzd-panel--intro{
  display:grid!important;grid-template-columns:minmax(280px,32%) minmax(0,1fr)!important;gap:22px!important;
  padding:34px 34px 42px!important;align-items:stretch!important
}
.case-rzd-intro-copy{
  min-width:0;padding:18px 10px 4px 8px;display:flex;flex-direction:column;color:#fff;
  opacity:0;transform:translateY(14px);transition:opacity .38s ease .38s,transform .58s cubic-bezier(.2,.82,.2,1) .38s!important
}
.case-card-rzd.is-opening .case-rzd-intro-copy,
.case-card-rzd.is-open .case-rzd-intro-copy{opacity:1!important;transform:none!important}
.case-rzd-intro-copy .eyebrow{margin:0 0 30px!important;color:rgba(255,255,255,.44)!important}
.case-rzd-intro-copy h4{margin:0!important;max-width:430px;font-family:"Actay Wide","Helvetica Neue",Arial,sans-serif;font-size:clamp(35px,3.2vw,54px)!important;line-height:.94!important;letter-spacing:-.05em!important;font-weight:720!important;color:#fff!important}
.case-rzd-intro-copy>p{max-width:420px;margin:22px 0 0!important;font-size:12px!important;line-height:1.42!important;color:rgba(255,255,255,.64)!important}
.case-rzd-facts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;margin-top:auto!important;padding-top:24px!important;border-top:1px solid rgba(255,255,255,.18)!important}
.case-rzd-facts div{min-width:0;padding:0 16px;border-left:1px solid rgba(255,255,255,.18)}
.case-rzd-facts div:first-child{padding-left:0;border-left:0}
.case-rzd-facts strong{display:block!important;margin:0 0 7px!important;font-family:"Actay Wide","Helvetica Neue",Arial,sans-serif!important;font-size:clamp(24px,2.2vw,34px)!important;line-height:1!important;letter-spacing:-.04em!important;color:#fff!important}
.case-rzd-facts span{display:block!important;font-size:8px!important;line-height:1.2!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:rgba(255,255,255,.42)!important}
.case-rzd-media-card{
  position:relative!important;align-self:stretch!important;min-width:0!important;overflow:hidden!important;border-radius:26px!important;
  border:1px solid rgba(255,255,255,.18)!important;background:#ded6cc!important;box-shadow:0 20px 58px rgba(0,0,0,.20)!important
}

/* Detail panels intentionally narrower than viewport so next one peeks from the right, matching Figma. */
.case-rzd-panel--detail{
  flex:0 0 88%!important;width:88%!important;display:grid!important;grid-template-columns:minmax(0,52%) minmax(320px,48%)!important;
  gap:0!important;padding:32px 20px 42px 18px!important
}
.case-rzd-panel--last{margin-right:5vw!important}
.case-rzd-slide-media{position:relative;min-width:0;height:100%;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.18);background:#d9d1c7;box-shadow:0 20px 58px rgba(0,0,0,.20)}
.case-rzd-slide-media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
.case-rzd-slide-count{position:absolute;z-index:3;left:18px;top:15px;padding:7px 9px;border-radius:999px;background:rgba(11,11,11,.26);color:#fff;font-size:8px;letter-spacing:.08em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.case-rzd-slide-copy{min-width:0;padding:18px 34px 12px 38px;display:flex;flex-direction:column;justify-content:center;color:#fff}
.case-rzd-slide-copy h4{margin:0!important;font-family:"Actay Wide","Helvetica Neue",Arial,sans-serif;font-size:clamp(31px,3vw,48px)!important;line-height:.95!important;letter-spacing:-.045em!important;font-weight:720!important;color:#fff!important}
.case-rzd-slide-copy>p{max-width:470px;margin:24px 0 0!important;font-size:13px!important;line-height:1.42!important;color:rgba(255,255,255,.63)!important}
.case-rzd-slide-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.case-rzd-slide-facts div{min-width:0;padding:0 18px;border-left:1px solid rgba(255,255,255,.18)}
.case-rzd-slide-facts div:first-child{padding-left:0;border-left:0}
.case-rzd-slide-facts strong{display:block;font-family:"Actay Wide","Helvetica Neue",Arial,sans-serif;font-size:clamp(22px,2vw,31px);line-height:1;letter-spacing:-.04em}
.case-rzd-slide-facts span{display:block;margin-top:7px;max-width:120px;font-size:8px;line-height:1.18;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.42)}

.case-rzd-progress{position:absolute;z-index:70;left:34px;right:34px;bottom:10px;display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.40);opacity:0;transform:translateY(5px);transition:opacity .35s ease .30s,transform .45s ease .30s}
.case-card-rzd.is-opening .case-rzd-progress,.case-card-rzd.is-open .case-rzd-progress{opacity:1;transform:none}
.case-rzd-progress i{display:block;position:relative;height:2px;overflow:hidden;background:rgba(255,255,255,.14)}
.case-rzd-progress i b{display:block;width:var(--rzd-progress,0%);height:100%;background:rgba(255,255,255,.80);transition:width .08s linear}

@media(max-width:900px){
  .clients-section{min-height:126px!important;padding:20px 0 16px!important}.clients-title{margin-bottom:10px!important;padding-inline:14px!important;font-size:9px}.clients-row,.clients-track,.clients-group{height:62px!important;min-height:62px!important}
  .contact-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0 12px!important}.contact-list>a,.contact-list>span{grid-template-columns:36px minmax(0,1fr)!important;min-height:66px!important;padding:10px 0!important}.contact-list .contact-icon{width:30px!important;height:30px!important}.contact-list .contact-label{font-size:8px!important}.contact-list strong{font-size:11px!important}

  .case-card-rzd .case-copy{width:100%!important;padding:22px!important;justify-content:flex-end!important}.case-card-rzd .case-copy .eyebrow{margin-bottom:auto!important}.case-card-rzd .case-copy h3{font-size:clamp(54px,14vw,76px)!important;margin:0 0 10px!important}
  .case-rzd-shell::after{background:linear-gradient(180deg,rgba(5,5,5,.02) 0%,rgba(5,5,5,.02) 48%,rgba(5,5,5,.56) 100%)!important}.case-rzd-hero{object-position:center 44%!important}.case-rzd-toggle{min-width:190px!important;min-height:46px!important;margin-top:20px!important;font-size:10px!important}

  .case-card-rzd.is-expanded{max-width:none!important;height:78svh!important;min-height:660px!important;border-radius:30px!important}
  .case-rzd-panel--intro{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important;gap:14px!important;padding:20px 14px 34px!important}
  .case-rzd-intro-copy{padding:6px 6px 0!important}.case-rzd-intro-copy .eyebrow{margin-bottom:10px!important}.case-rzd-intro-copy h4{font-size:clamp(25px,7.2vw,38px)!important;line-height:.94!important}.case-rzd-intro-copy>p{margin-top:10px!important;font-size:10px!important;line-height:1.3!important;max-width:92%}
  .case-rzd-facts{margin-top:14px!important;padding-top:12px!important}.case-rzd-facts strong{font-size:20px!important}.case-rzd-facts span{font-size:6.5px!important}.case-rzd-media-card{min-height:0!important;border-radius:18px!important}

  .case-rzd-panel--detail{flex-basis:93%!important;width:93%!important;grid-template-columns:1fr!important;grid-template-rows:minmax(0,58%) minmax(0,42%)!important;padding:14px 10px 34px 14px!important}
  .case-rzd-panel--last{margin-right:7vw!important}.case-rzd-slide-media{border-radius:18px!important}.case-rzd-slide-copy{padding:16px 12px 4px!important;justify-content:flex-start!important}.case-rzd-slide-copy h4{font-size:clamp(24px,7vw,34px)!important}.case-rzd-slide-copy>p{margin-top:10px!important;font-size:10px!important;line-height:1.28!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .case-rzd-slide-facts{margin-top:auto;padding-top:10px}.case-rzd-slide-facts div{padding-inline:9px}.case-rzd-slide-facts strong{font-size:19px}.case-rzd-slide-facts span{font-size:6px}.case-rzd-close{right:12px!important;top:10px!important;min-height:32px!important;font-size:8px!important}.case-rzd-progress{left:16px;right:16px;bottom:10px;font-size:6.5px}
}
@media(max-width:620px){
  .clients-title{padding-inline:10px!important}
  .case-card-rzd.is-expanded{min-height:620px!important}
  .case-rzd-panel--intro{padding-inline:12px!important}.case-rzd-intro-copy h4{font-size:28px!important}
  .case-rzd-panel--detail{flex-basis:95%!important;width:95%!important}.case-rzd-panel--last{margin-right:5vw!important}
}

.case-rzd-progress>span,.case-rzd-progress>i{pointer-events:none}
@media(max-width:900px){
  .case-rzd-progress{grid-template-columns:1fr auto auto;left:16px!important;right:16px!important;bottom:8px!important}
  .case-rzd-progress>span:first-child{display:none}
  .case-rzd-close{min-height:26px!important;height:26px!important;padding:0 9px!important;font-size:7.5px!important}
}

/* v8: target-slot corner treatment follows the shared-element animation. */
.case-rzd-media-card--intro,.case-rzd-slot-image{border-radius:26px!important}
@media(max-width:900px){
  .case-rzd-media-card--intro,.case-rzd-slot-image{border-radius:20px!important}
}

/* v11: when CTA is clicked after the case has partially left its sticky position,
   briefly realign the card before locking the page into horizontal story mode. */
.case-card-rzd.is-aligning .case-rzd-toggle{
  pointer-events:none!important;
  opacity:.72!important;
}

/* v14 — preserve faces/heads in people-led case photography.
   Keep original photos unchanged; only adjust crop inside the approved case frame. */
.case-card-rzd[data-case-key="rzd"] .case-rzd-hero,
.case-card-rzd[data-case-key="rzd"] .case-rzd-media-card--intro .case-rzd-slot-image{
  object-position:center top!important;
}
@media(max-width:900px){
  .case-card-rzd[data-case-key="rzd"] .case-rzd-hero,
  .case-card-rzd[data-case-key="rzd"] .case-rzd-media-card--intro .case-rzd-slot-image{
    object-position:center top!important;
  }
}

/* v15 — case photo fit audit.
   Slide 01 stays cinematic/cover.
   Every gallery image on slides 02–04 is shown in full: no clipped heads, products or limbs. */
.case-card-rzd .case-rzd-slide-media{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#e8e4df!important;
}
.case-card-rzd .case-rzd-slide-media img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* RZD cover: keep the heads visible, but undo the overly aggressive top alignment from v14. */
.case-card-rzd[data-case-key="rzd"] > .case-rzd-shell .case-rzd-hero{
  object-fit:cover!important;
  object-position:center 20%!important;
}

/* Expanded slide 01 keeps the original cover treatment and is not affected by gallery-fit rules. */
.case-card-rzd[data-case-key="rzd"] .case-rzd-media-card--intro .case-rzd-slot-image{
  object-fit:cover!important;
  object-position:center center!important;
}

@media(max-width:900px){
  .case-card-rzd .case-rzd-slide-media img{
    object-fit:contain!important;
    object-position:center center!important;
  }
  .case-card-rzd[data-case-key="rzd"] > .case-rzd-shell .case-rzd-hero{
    object-position:center 18%!important;
  }
}

/* v16 — final case-gallery photo fit.
   01 hero stays unchanged.
   02–04 use preframed masters built from the exact case photos:
   unified studio backdrop, full heads/garments, only a small amount of trousers. */
.case-card-rzd .case-rzd-slide-media{
  background:#d2cfcc!important;
}
.case-card-rzd .case-rzd-slide-media img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}
@media(max-width:900px){
  .case-card-rzd .case-rzd-slide-media img{
    object-fit:cover!important;
    object-position:center center!important;
  }
}

/* v17 — remove all numeric case/slide sequence counters. */
.case-rzd-progress{
  grid-template-columns:auto 1fr auto!important;
}
.case-rzd-slide-count,
[data-case-progress-label]{
  display:none!important;
}


/* v18 — crop-only pass for the replacement OKKO hero.
   Keep the real photo, preserve the head, and bias the crop upward so the frame reads product-first. */
.case-card-rzd[data-case-key="okko"] > .case-rzd-shell .case-rzd-hero,
.case-card-rzd[data-case-key="okko"] .case-rzd-media-card--intro .case-rzd-slot-image{
  object-fit:cover!important;
  object-position:center 24%!important;
}
@media(max-width:900px){
  .case-card-rzd[data-case-key="okko"] > .case-rzd-shell .case-rzd-hero,
  .case-card-rzd[data-case-key="okko"] .case-rzd-media-card--intro .case-rzd-slot-image{
    object-position:center 30%!important;
  }
}


/* v19 — mobile review pass: header readability, clean footer, case swipe affordance. */
@media(max-width:900px){
  /* Header: kill the centered feather blur and replace it with one continuous top blur. */
  .page-gradual-blur{display:none!important}
  .site-header{
    isolation:isolate!important;
  }
  .site-header::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    left:0!important;
    right:0!important;
    top:-12px!important;
    height:92px!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(235,237,237,.12) 0%,rgba(235,237,237,.055) 56%,rgba(235,237,237,0) 100%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.08)!important;
    backdrop-filter:blur(16px) saturate(1.08)!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.58) 83%,transparent 100%)!important;
    mask-image:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.58) 83%,transparent 100%)!important;
  }
  .site-header .nav-shell{position:relative!important;z-index:1!important}
  .site-header .logo{
    color:#fff!important;
    mix-blend-mode:difference!important;
    opacity:1!important;
    text-shadow:none!important;
    filter:none!important;
  }
  .site-header .mobile-nav-pill{
    background:rgba(239,241,241,.42)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.22)!important;
    backdrop-filter:blur(18px) saturate(1.22)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.72)!important;
  }
  .site-header .mobile-menu-button{
    background:rgba(239,241,241,.42)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.22)!important;
    backdrop-filter:blur(18px) saturate(1.22)!important;
  }

  /* Collapsed case: keep the CTA away from the bottom edge. */
  .case-card-rzd .case-copy{
    padding:24px 24px 36px!important;
  }
  .case-card-rzd .case-rzd-toggle{
    margin-top:18px!important;
    margin-bottom:2px!important;
  }

  /* Keep collapsed/open mobile card geometry stable during the shared-image animation. */
  .case-card-rzd.is-expanded{
    height:70svh!important;
    min-height:560px!important;
    max-height:780px!important;
  }

  /* Expanded story: compact the copy, reserve a real rail for progress/close. */
  .case-rzd-panel--intro{
    padding-bottom:62px!important;
  }
  .case-rzd-panel--detail{
    grid-template-rows:minmax(0,56%) minmax(0,44%)!important;
    padding:14px 10px 64px 14px!important;
  }
  .case-rzd-slide-copy{
    padding:14px 12px 0!important;
    justify-content:flex-start!important;
    align-content:start!important;
  }
  .case-rzd-slide-copy>p{
    margin-top:8px!important;
  }
  .case-rzd-slide-facts{
    margin-top:14px!important;
    padding-top:12px!important;
  }
  .case-rzd-progress{
    left:16px!important;
    right:16px!important;
    bottom:14px!important;
    min-height:30px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
  }
  .case-rzd-progress>i{
    min-width:0!important;
  }
  .case-rzd-close{
    min-height:30px!important;
    height:30px!important;
    padding:0 12px!important;
    font-size:8px!important;
  }

  /* Swipe hint appears only while the user has not interacted with the horizontal story. */
  .case-rzd-swipe-hint{
    position:absolute!important;
    z-index:85!important;
    right:18px!important;
    bottom:54px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    min-height:30px!important;
    padding:0 11px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:999px!important;
    background:rgba(15,16,16,.36)!important;
    color:rgba(255,255,255,.82)!important;
    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.03em!important;
    text-transform:uppercase!important;
    -webkit-backdrop-filter:blur(12px)!important;
    backdrop-filter:blur(12px)!important;
    opacity:0!important;
    transform:translate3d(6px,0,0)!important;
    transition:opacity .28s ease,transform .38s cubic-bezier(.16,1,.3,1)!important;
    pointer-events:none!important;
  }
  .case-rzd-swipe-hint b{
    display:block!important;
    font-size:15px!important;
    line-height:1!important;
    font-weight:400!important;
    animation:rzdSwipeArrow 1.1s ease-in-out infinite!important;
  }
  .case-card-rzd.is-opening:not(.has-swiped) .case-rzd-swipe-hint,
  .case-card-rzd.is-open:not(.has-swiped) .case-rzd-swipe-hint{
    opacity:1!important;
    transform:none!important;
  }
  .case-card-rzd.has-swiped .case-rzd-swipe-hint{
    opacity:0!important;
    transform:translate3d(8px,0,0)!important;
  }
  @keyframes rzdSwipeArrow{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(5px)}
  }

  /* Contacts/footer: pure typography + dividers, no decorative circles/cards. */
  footer .contact-icon,
  footer .footer-social{
    display:none!important;
  }
  footer .contacts-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
    padding:26px 18px 24px!important;
  }
  footer .contacts-grid>div:first-child>p:last-child{
    display:block!important;
    max-width:300px!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1.28!important;
    color:rgba(255,255,255,.48)!important;
  }
  footer .contact-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    width:100%!important;
  }
  footer .contact-list>a,
  footer .contact-list>span{
    position:relative!important;
    display:block!important;
    min-height:0!important;
    padding:14px 0 16px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.15)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  footer .contact-list>a:first-child,
  footer .contact-list>span:first-child{
    border-top:1px solid rgba(255,255,255,.15)!important;
  }
  footer .contact-list .contact-label{
    display:block!important;
    margin:0 0 5px!important;
    font-size:8px!important;
    line-height:1!important;
    color:rgba(255,255,255,.38)!important;
  }
  footer .contact-list strong{
    display:block!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1.12!important;
    font-weight:500!important;
    color:#fff!important;
    overflow-wrap:anywhere!important;
  }
  footer .contact-cta{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:12px!important;
    align-items:center!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
  }
  footer .contact-cta>p{
    margin:0!important;
    font-size:9px!important;
    color:rgba(255,255,255,.48)!important;
  }
  footer .contact-cta .button{
    min-height:42px!important;
    padding:0 15px!important;
    font-size:8px!important;
  }
  footer .contact-cta small{
    grid-column:1/-1!important;
    display:block!important;
    margin:0!important;
    font-size:8px!important;
    line-height:1.4!important;
    color:rgba(255,255,255,.34)!important;
  }
  footer .footer-grid{
    min-height:58px!important;
    grid-template-columns:auto 1fr!important;
    padding:12px 18px 0!important;
    gap:16px!important;
  }
  footer .footer-grid nav{display:none!important}
  footer .footer-grid>div:last-child{
    grid-column:2!important;
    display:flex!important;
    flex-direction:column!important;
    justify-self:end!important;
    align-items:flex-end!important;
    gap:5px!important;
  }
}
@media(max-width:620px){
  footer .contacts-grid{padding-inline:14px!important}
  footer .contact-cta{grid-template-columns:1fr!important}
  footer .contact-cta .button{justify-self:start!important}
  footer .contact-cta small{grid-column:auto!important}
  footer .footer-grid{padding-inline:14px!important}
}


/* v20 — premium mobile case morph + rebuilt contact layout. */
@media(max-width:900px){
  /* Expanded case moves into the correct viewing position itself.
     No page auto-scroll is needed, so the click stays responsive and deterministic. */
  .case-card-rzd{
    transition:
      transform .56s cubic-bezier(.16,1,.3,1),
      border-radius .56s cubic-bezier(.16,1,.3,1),
      box-shadow .56s cubic-bezier(.16,1,.3,1)!important;
    will-change:transform,border-radius,box-shadow!important;
  }
  .case-card-rzd.is-expanded{
    transform:translate3d(0,var(--case-open-shift-y,0px),0)!important;
  }
  .case-card-rzd.is-expanded.is-closing{
    transform:translate3d(0,0,0)!important;
  }

  /* Shared hero overlay: the frame can reformat, but the photo itself only uses
     uniform scale + pan. This removes the squeezed/stretching phase. */
  .case-rzd-flight{
    transform:none!important;
    transform-origin:0 0!important;
    contain:layout paint style!important;
    will-change:left,top,width,height,border-radius,box-shadow!important;
  }
  .case-rzd-flight img{
    left:0!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    object-fit:fill!important;
    max-width:none!important;
    max-height:none!important;
    transform-origin:0 0!important;
    will-change:transform!important;
  }

  /* Slightly calmer opening: expanded UI comes in behind the hero, not before it. */
  .case-rzd-expanded{
    transition:opacity .34s ease .10s,visibility 0s linear .46s!important;
  }
  .case-rzd-intro-copy{
    transition:opacity .32s ease .22s,transform .48s cubic-bezier(.16,1,.3,1) .22s!important;
  }

  /* Mobile contact scene rebuilt as a typographic information sheet. */
  footer{
    padding:38px 0 16px!important;
  }
  footer .contacts-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:26px!important;
    padding:0 18px 30px!important;
  }
  footer .contacts-grid>div:first-child{
    min-width:0!important;
  }
  footer .contacts-grid .eyebrow{
    margin:0 0 16px!important;
  }
  footer .contacts-grid h2{
    max-width:430px!important;
    margin:0 0 14px!important;
    font-size:clamp(44px,11.2vw,54px)!important;
    line-height:.89!important;
    letter-spacing:-.055em!important;
  }
  footer .contacts-grid>div:first-child>p:last-child{
    display:block!important;
    max-width:295px!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1.35!important;
    color:rgba(255,255,255,.46)!important;
  }

  footer .contact-icon,
  footer .footer-social{
    display:none!important;
  }
  footer .contact-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    width:100%!important;
    border-top:1px solid rgba(255,255,255,.18)!important;
  }
  footer .contact-list>a,
  footer .contact-list>span{
    position:relative!important;
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    gap:16px!important;
    align-items:center!important;
    min-height:58px!important;
    padding:0!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.18)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-decoration:none!important;
  }
  footer .contact-list>a::before,
  footer .contact-list>span::before{
    display:none!important;
    content:none!important;
  }
  footer .contact-list .contact-label{
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
    color:rgba(255,255,255,.34)!important;
  }
  footer .contact-list strong{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    min-width:0!important;
    font-size:15px!important;
    line-height:1.15!important;
    font-weight:500!important;
    text-align:right!important;
    color:#fff!important;
    overflow-wrap:anywhere!important;
  }
  footer .contact-list a[href^="mailto:"] strong{
    font-size:13px!important;
  }

  footer .contact-cta{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
  }
  footer .contact-cta>p{
    display:none!important;
  }
  footer .contact-cta .button{
    width:100%!important;
    min-height:50px!important;
    padding:0 18px!important;
    justify-content:space-between!important;
    border-radius:999px!important;
    font-size:10px!important;
  }
  footer .contact-cta small{
    display:block!important;
    margin:0!important;
    padding-top:2px!important;
    font-size:8px!important;
    line-height:1.55!important;
    letter-spacing:.08em!important;
    color:rgba(255,255,255,.34)!important;
  }

  footer .footer-grid{
    min-height:64px!important;
    grid-template-columns:auto 1fr!important;
    align-items:start!important;
    gap:18px!important;
    padding:16px 18px 0!important;
    border-top:1px solid rgba(255,255,255,.16)!important;
  }
  footer .footer-logo{
    font-size:25px!important;
  }
  footer .footer-grid nav{
    display:none!important;
  }
  footer .footer-grid>div:last-child{
    grid-column:2!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    justify-self:end!important;
    gap:7px!important;
    font-size:8px!important;
    text-align:right!important;
  }
  footer .footer-grid>div:last-child>a{
    color:rgba(255,255,255,.78)!important;
  }
  footer .footer-grid small{
    max-width:190px!important;
    color:rgba(255,255,255,.30)!important;
  }
}
@media(max-width:420px){
  footer .contacts-grid{padding-inline:14px!important}
  footer .contact-list>a,
  footer .contact-list>span{grid-template-columns:64px minmax(0,1fr)!important;gap:10px!important}
  footer .contact-list strong{font-size:14px!important}
  footer .contact-list a[href^="mailto:"] strong{font-size:12px!important}
  footer .footer-grid{padding-inline:14px!important}
}


/* v22 — contacts-only cleanup. Intentionally scoped to #contacts so no other section can change. */
footer#contacts .contact-icon,
footer#contacts .contact-label,
footer#contacts .footer-social,
footer#contacts .contacts-grid .eyebrow{
  display:none!important;
  content:none!important;
}
footer#contacts .contact-list>a::before,
footer#contacts .contact-list>span::before,
footer#contacts .contact-list>a::after,
footer#contacts .contact-list>span::after{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  footer#contacts{padding-top:34px!important}
  footer#contacts .contacts-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:22px!important;
    padding:0 18px 28px!important;
  }
  footer#contacts .contacts-grid h2{
    margin:0 0 12px!important;
    max-width:440px!important;
    font-size:clamp(44px,11.2vw,54px)!important;
    line-height:.9!important;
    letter-spacing:-.055em!important;
  }
  footer#contacts .contacts-grid>div:first-child>p:last-child{
    margin:0!important;
    max-width:310px!important;
    font-size:11px!important;
    line-height:1.35!important;
    color:rgba(255,255,255,.44)!important;
  }
  footer#contacts .contact-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    width:100%!important;
    border-top:1px solid rgba(255,255,255,.17)!important;
  }
  footer#contacts .contact-list>a,
  footer#contacts .contact-list>span{
    position:relative!important;
    display:block!important;
    min-height:0!important;
    padding:17px 0 18px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.17)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    text-decoration:none!important;
    transform:none!important;
    filter:none!important;
  }
  footer#contacts .contact-list strong{
    display:block!important;
    margin:0!important;
    padding:0!important;
    font-size:18px!important;
    line-height:1.14!important;
    font-weight:500!important;
    text-align:left!important;
    color:#fff!important;
    letter-spacing:-.018em!important;
    overflow-wrap:anywhere!important;
  }
  footer#contacts .contact-list a[href^="mailto:"] strong{font-size:16px!important}
  footer#contacts .contact-cta{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  footer#contacts .contact-cta>p{display:none!important}
  footer#contacts .contact-cta .button{
    width:100%!important;
    min-height:50px!important;
    padding:0 18px!important;
    justify-content:space-between!important;
    font-size:10px!important;
  }
  footer#contacts .contact-cta small{
    margin:0!important;
    padding-top:2px!important;
    font-size:8px!important;
    line-height:1.5!important;
    letter-spacing:.08em!important;
    color:rgba(255,255,255,.30)!important;
  }
}
@media(max-width:420px){
  footer#contacts .contacts-grid{padding-inline:14px!important}
  footer#contacts .contact-list strong{font-size:17px!important}
  footer#contacts .contact-list a[href^="mailto:"] strong{font-size:15px!important}
}


/* v23 — mobile cases: fixed, transform-only overlay with light crossfade. */
@media(max-width:900px){
  .case-card-rzd.is-mobile-overlay{
    position:fixed!important;
    z-index:2147482000!important;
    top:var(--mobile-case-top,72px)!important;
    left:var(--mobile-case-left,12px)!important;
    right:auto!important;
    bottom:auto!important;
    width:var(--mobile-case-width,calc(100vw - 24px))!important;
    max-width:none!important;
    height:var(--mobile-case-height,70svh)!important;
    min-height:0!important;
    margin:0!important;
    transform:translate3d(0,var(--mobile-case-origin-y,0px),0)!important;
    border-radius:28px!important;
    box-shadow:0 28px 80px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.18)!important;
    transition:
      transform .42s cubic-bezier(.16,1,.3,1),
      border-radius .42s cubic-bezier(.16,1,.3,1),
      box-shadow .42s cubic-bezier(.16,1,.3,1)!important;
    will-change:transform!important;
    contain:layout paint!important;
  }

  .case-card-rzd.is-mobile-overlay.is-mobile-settled{
    transform:translate3d(0,0,0)!important;
  }

  .case-card-rzd.is-mobile-overlay.is-closing{
    transform:translate3d(0,var(--mobile-case-origin-y,0px),0)!important;
    box-shadow:0 12px 36px rgba(0,0,0,.22)!important;
  }

  .case-card-rzd.is-mobile-overlay .case-rzd-expanded{
    background:linear-gradient(180deg,rgba(61,65,67,.985),rgba(25,27,28,.995))!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    transition:opacity .28s ease .04s,visibility 0s linear .34s!important;
  }

  .case-card-rzd.is-mobile-overlay .case-rzd-shell{
    transition:opacity .28s ease!important;
  }

  .case-card-rzd.is-mobile-overlay.is-opening .case-rzd-shell{
    opacity:.10!important;
  }

  .case-card-rzd.is-mobile-overlay.is-open .case-rzd-shell{
    opacity:0!important;
  }

  .case-card-rzd.is-mobile-overlay .case-rzd-hero{
    opacity:1!important;
    transition:opacity .26s ease!important;
  }

  .case-card-rzd.is-mobile-overlay.is-opening .case-rzd-hero{
    opacity:.16!important;
  }

  .case-card-rzd.is-mobile-overlay.is-open .case-rzd-hero{
    opacity:0!important;
  }

  .case-card-rzd.is-mobile-overlay .case-rzd-slot-image{
    opacity:0!important;
    transform:scale(1.035)!important;
    transition:
      opacity .30s ease .08s,
      transform .48s cubic-bezier(.16,1,.3,1) .06s!important;
    will-change:transform,opacity!important;
  }

  .case-card-rzd.is-mobile-overlay.is-opening .case-rzd-slot-image,
  .case-card-rzd.is-mobile-overlay.is-open .case-rzd-slot-image{
    opacity:1!important;
    transform:scale(1)!important;
  }

  .case-card-rzd.is-mobile-overlay .case-rzd-media-card--intro{
    transform:translate3d(0,8px,0) scale(.992)!important;
    opacity:.92!important;
    transition:
      transform .48s cubic-bezier(.16,1,.3,1) .04s,
      opacity .28s ease .04s!important;
  }

  .case-card-rzd.is-mobile-overlay.is-mobile-settled .case-rzd-media-card--intro{
    transform:none!important;
    opacity:1!important;
  }

  .case-card-rzd.is-mobile-overlay .case-rzd-flight{
    display:none!important;
  }

  /* Keep the first frame clear under the fixed nav on every case. */
  html.rzd-case-open .site-header{
    z-index:2147483001!important;
  }
}