/* Shared SOP the FLOW shell. Loaded after page-specific styles. */
:root{--flow-orange:#f05a28;--flow-paper:#f2efe9;--flow-border:#42382e;--flow-header:88px}
html{scroll-padding-top:calc(var(--flow-header) + 24px)}
.flow-header,.flow-header *{box-sizing:border-box}
.flow-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--flow-header);padding:10px max(3.2vw,20px);background:linear-gradient(110deg,#211c17f5,#171512f5);backdrop-filter:blur(16px);border-bottom:1px solid #594131;box-shadow:0 6px 24px #0003;color:var(--flow-paper)}
.flow-header::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#735039,var(--flow-orange),#735039,transparent)}
.flow-brand{display:flex;align-items:center;flex-shrink:0;line-height:0;text-decoration:none}
.flow-brand img{display:block;width:172px;height:auto;filter:invert(1);transition:filter .2s ease}
.flow-brand:hover img{filter:invert(1) drop-shadow(0 0 9px #f05a2855)}
.flow-navigation{display:flex;align-items:center;gap:clamp(14px,1.5vw,27px)}
.flow-navigation a{position:relative;display:flex;align-items:center;min-height:44px;color:#d5cdc3;font:400 16px/1.2 "Bebas Neue",Impact,sans-serif;letter-spacing:.12em;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.flow-navigation a::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:2px;background:var(--flow-orange);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.flow-navigation a:hover,.flow-navigation a[aria-current]{color:#fff}
.flow-navigation a:hover::after,.flow-navigation a[aria-current]::after{transform:scaleX(1)}
.flow-navigation .flow-youtube{color:#ffad88}
.flow-menu-toggle{display:none}
.flow-scrim[hidden]{display:none!important}
.flow-header :focus-visible{outline:2px solid #ffad88;outline-offset:5px}
body.flow-menu-open{overflow:hidden}
body:has(.rider-hero) .flow-header{position:fixed;left:0;right:0}
:where(.button,.rider-button,.cta,.map-act,.map-chip,.map-more,.map-clear,.view-btn){transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
:is(a.button,button.button,.rider-button,.cta){display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.8rem 1.15rem;border:1px solid #78604c;border-radius:2px;background:transparent;color:var(--flow-paper);font:500 .95rem/1.35 "Outfit",sans-serif;text-decoration:none;cursor:pointer;text-align:center}
:is(a.button.primary,button.button.primary,.rider-button.is-primary,.cta:not(.cta-ghost)){background:var(--flow-orange);border-color:var(--flow-orange);color:#fff}
@media(hover:hover){:is(a.button,button.button,.rider-button,.cta):hover{border-color:#ff986b;background:#f05a281c;color:#fff;transform:translateY(-2px);box-shadow:0 5px 16px #0003}:is(a.button.primary,button.button.primary,.rider-button.is-primary,.cta:not(.cta-ghost)):hover{background:#ff6b38;border-color:#ff6b38;color:#fff}.film-card:hover,.tile:hover,.trail-item:hover{border-color:#a2633e;box-shadow:0 10px 26px #0003}.map-chip:hover,.view-btn:hover,.map-act:hover,.map-more:hover,.map-clear:hover{border-color:#f05a28;color:#fff;background-color:#f05a2822}}
:is(a.button,button.button,.rider-button,.cta):active{transform:translateY(0);box-shadow:none}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid #ffad88;outline-offset:4px}
:where(button:disabled,a[aria-disabled=true]){opacity:.5;pointer-events:none}
:where(input,select,textarea){accent-color:var(--flow-orange)}
:where(input,select,textarea):focus{border-color:var(--flow-orange)}
.film-card,.tile,.trail-item{transition:border-color .2s ease,box-shadow .2s ease}
body:has(> .flow-header) main{padding-top:2.5rem}
body:has(> .flow-header) main>h1{max-width:24ch;font-size:clamp(3rem,6vw,5.4rem);text-wrap:balance}
body:has(> .flow-header) main>section{padding-top:1.8rem;border-top:1px solid var(--flow-border)}
.breadcrumbs a{color:#c6b7a5;text-decoration:none}.breadcrumbs a:hover{color:#ffad88;text-decoration:underline}
body:has(> .flow-header) footer{background:#191511}
.catalog{scroll-margin-top:24px;background:radial-gradient(ellipse at 50% 0,#38251a55,transparent 65%),#12100e}
.flow-catalog-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;max-width:1100px;margin:0 auto 2.4rem;background:#49382b;border:1px solid #49382b;text-align:left}
.flow-catalog-guide a{display:block;padding:1.5rem;background:#1b1713;text-decoration:none;color:#f2efe9;transition:background .2s ease}
.flow-catalog-guide a:hover{background:#292018}.flow-catalog-guide span{display:block;font:500 .7rem/1.4 "Outfit",sans-serif;letter-spacing:.13em;color:#ff9b72;margin-bottom:.8rem}.flow-catalog-guide strong{font:400 1.8rem/1.1 "Bebas Neue",sans-serif}.flow-catalog-guide p{font:400 .95rem/1.6 "Outfit",sans-serif;color:#bdb4a8;margin:.65rem 0 0}
.map-catalog{padding:clamp(16px,3vw,32px);background:#1b1713;border:1px solid #49382b;box-shadow:0 18px 48px #0002}
@media(max-width:1100px){:root{--flow-header:76px}.flow-header{padding:8px 20px}.flow-brand img{width:154px}.flow-menu-toggle{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;background:transparent;border:1px solid #78604c;color:#f2efe9;font:500 14px "Outfit",sans-serif;cursor:pointer}.flow-menu-toggle i,.flow-menu-toggle i::after{display:block;width:18px;height:2px;background:currentColor;transition:transform .2s ease}.flow-menu-toggle i::after{content:"";transform:translateY(6px)}.is-open .flow-menu-toggle i{transform:rotate(45deg)}.is-open .flow-menu-toggle i::after{transform:rotate(-90deg)}.flow-navigation{position:absolute;top:100%;left:0;right:0;display:none;align-items:stretch;gap:0;max-height:calc(100dvh - var(--flow-header));overflow-y:auto;padding:12px 24px 24px;background:#1b1713;border-bottom:1px solid #795135;box-shadow:0 20px 30px #0006}.flow-header.is-open .flow-navigation{display:flex;flex-direction:column}.flow-navigation a{min-height:52px;font-size:20px;border-bottom:1px solid #ffffff12}.flow-navigation a::after{right:auto;width:36px;bottom:0}.flow-scrim{position:fixed;inset:var(--flow-header) 0 0;background:#0009;backdrop-filter:blur(3px);z-index:99}}
@media(max-width:640px){.flow-catalog-guide{grid-template-columns:1fr}.flow-catalog-guide a{padding:1.15rem}.flow-catalog-guide span{margin-bottom:.4rem}.flow-catalog-guide strong{font-size:1.6rem}.flow-catalog-guide p{margin-top:.4rem}.catalog-actions .cta{width:100%}.map-catalog{padding:14px}.flow-brand img{width:140px}.flow-header{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep the full-height editor below the shared website navigation. */
body.flow-tool{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.flow-tool>.flow-header{flex-shrink:0}
.flow-tool>#root{flex:1;min-height:0;height:auto}
.flow-tool>#root>.app{height:100%}
