/* EasyShuttle Redesign — ported 1:1 from the approved design artifact. */
.esr{--esr-forest:#0B3A2C;--esr-forest-900:#06251C;--esr-forest-600:#12513D;--esr-forest-050:#E4F2E9;--esr-orange:#F4740B;--esr-orange-600:#DB6408;--esr-orange-050:#FFF0E3;--esr-amber:#F5B33C;--esr-amber-050:#FDF3DE;--esr-cream:#FFF7EC;--esr-paper:#F7F6F2;--esr-ink:#0C1A15;--esr-muted:#6B7A73;--esr-white:#FFFFFF;
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;color:var(--esr-ink);background:var(--esr-cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.esr *{box-sizing:border-box}
.esr h1,.esr h2,.esr h3,.esr h4{font-family:"Bricolage Grotesque","Trebuchet MS",sans-serif;margin:0}
.esr .mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.esr a{color:var(--esr-forest);text-decoration:none}
.esr a:hover{color:var(--esr-orange)}
.esr button{font-family:inherit;cursor:pointer}

.esr .btn-primary{background:var(--esr-orange);color:#FFFFFF;border:none;border-radius:999px;padding:16px 30px;font-weight:600;font-size:15.5px;transition:background .15s ease,transform .15s ease;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.esr .btn-primary:hover{background:var(--esr-orange-600);transform:translateY(-1px);color:#fff}
.esr .btn-ghost{background:transparent;color:var(--esr-cream);border:1.5px solid rgba(255,247,236,.4);border-radius:999px;padding:15px 28px;font-weight:600;font-size:15.5px;transition:border-color .15s ease,background .15s ease;display:inline-flex;align-items:center;gap:6px}
.esr .btn-ghost:hover{border-color:var(--esr-cream);background:rgba(255,247,236,.08);color:var(--esr-cream)}
.esr .btn-dark{background:var(--esr-forest);color:#FFFFFF;border:none;border-radius:999px;padding:15px 28px;font-weight:600;font-size:15.5px;transition:background .15s ease;display:inline-flex;align-items:center;gap:6px}
.esr .btn-dark:hover{background:var(--esr-forest-900);color:#fff}
.esr .btn-line{background:transparent;color:var(--esr-forest);border:1.5px solid rgba(11,58,44,.25);border-radius:999px;padding:13px 24px;font-weight:600;font-size:15px;transition:border-color .15s ease,background .15s ease;display:inline-flex;align-items:center;gap:6px}
.esr .btn-line:hover{border-color:var(--esr-forest);background:rgba(11,58,44,.05)}

.esr .shadow-sm{box-shadow:0 1px 2px rgba(6,37,28,.06),0 8px 24px -18px rgba(6,37,28,.35)}
.esr .shadow-lg{box-shadow:0 30px 70px -30px rgba(6,37,28,.55)}
.esr .wrap{max-width:1220px;margin:0 auto;padding:0 24px}

.esr .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:168px;grid-auto-flow:dense;gap:16px}
.esr .b-wide{grid-column:span 2}
.esr .b-tall{grid-row:span 2}
.esr .b-big{grid-column:span 2;grid-row:span 2}
.esr .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

@keyframes esr-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.esr .marquee-track{animation:esr-marquee 38s linear infinite;display:flex;align-items:center;flex-shrink:0}
@keyframes esr-dashmove{to{stroke-dashoffset:-300}}
.esr .flight-path{animation:esr-dashmove 14s linear infinite}

/* ---------- Nav ---------- */
.esr-nav{position:sticky;top:0;z-index:40;background:rgba(255,247,236,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(11,58,44,.1)}
.esr-nav__inner{max-width:1220px;margin:0 auto;padding:0 24px;height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.esr-nav__brand{display:flex;align-items:center;gap:10px}
.esr-nav__mark{width:36px;height:36px;border-radius:50%;background:var(--esr-forest);color:var(--esr-amber);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.esr-nav__word{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17.5px;color:var(--esr-forest);letter-spacing:-.01em}
.esr-nav__links{display:flex;align-items:center;gap:30px}
.esr-nav__links a{font-size:14px;font-weight:600;color:#1B2420}

/* ---------- Hero: two columns (content / live search), not stacked ---------- */
.esr-hero{position:relative;background:var(--esr-forest-900);overflow:hidden}
/* !important: see the .esr-tile img note below - the same replaced-element
   auto-height quirk applies here, and the hero's own overflow:hidden was
   quietly masking it (showing a top-anchored crop) rather than it looking
   obviously broken, so it went unnoticed until this photo made it visible. */
.esr-hero__bg{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;object-position:center 68%}
.esr-hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,#06251C 8%,rgba(6,37,28,.78) 35%,rgba(6,37,28,.4) 68%),linear-gradient(180deg,rgba(6,37,28,.1) 0%,rgba(6,37,28,.22) 100%)}
/* Max-width/side-padding come from the theme's own .es-wrap (see header.php)
   so the hero aligns with the nav above it instead of running its own,
   wider measure. */
.esr-hero__inner{position:relative;padding-block:84px}
.esr-hero__grid{display:flex;gap:56px;align-items:center}
.esr-hero__content{flex:1 1 480px;min-width:0}
.esr-hero__searchcol{flex:0 1 420px;min-width:320px;max-width:420px}
.esr-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(245,179,60,.14);border:1px solid rgba(245,179,60,.35);border-radius:999px;padding:7px 16px;margin-bottom:26px}
.esr-hero__eyebrow span{font-size:11.5px;font-weight:600;color:var(--esr-amber);letter-spacing:.03em}
.esr-hero h1{font-size:clamp(32px,2.6vw,44px);line-height:1.1;color:#fff;font-weight:700;letter-spacing:-.02em}
.esr-hero h1 em{color:var(--esr-amber);font-style:italic}
.esr-hero p.lead{font-size:16.5px;line-height:1.55;color:rgba(255,247,236,.78);margin-top:20px;max-width:420px}
.esr-hero__ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.esr-hero__trust{display:flex;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.esr-hero__trust svg{margin-right:-2px}
.esr-hero__trust .mono{font-size:12.5px;color:rgba(255,247,236,.55);margin-left:4px}

.esr-search-card{position:relative;width:100%}

/* Entrance animation, choreographed left-to-right; respects reduced-motion */
@keyframes esr-fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes esr-fadeRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
.esr-hero__eyebrow{animation:esr-fadeUp .7s cubic-bezier(.16,1,.3,1) .05s both}
.esr-hero h1{animation:esr-fadeUp .7s cubic-bezier(.16,1,.3,1) .15s both}
.esr-hero p.lead{animation:esr-fadeUp .7s cubic-bezier(.16,1,.3,1) .25s both}
.esr-hero__ctas{animation:esr-fadeUp .7s cubic-bezier(.16,1,.3,1) .35s both}
.esr-hero__trust{animation:esr-fadeUp .7s cubic-bezier(.16,1,.3,1) .45s both}
.esr-hero__searchcol{animation:esr-fadeRight .8s cubic-bezier(.16,1,.3,1) .3s both}
@media (prefers-reduced-motion: reduce){
  .esr-hero__eyebrow,.esr-hero h1,.esr-hero p.lead,.esr-hero__ctas,.esr-hero__trust,.esr-hero__searchcol{animation:none}
}

@media (max-width: 980px){
  .esr-hero__grid{flex-direction:column;align-items:stretch}
  .esr-hero__searchcol{max-width:420px;min-width:0;margin:0 auto}
}

/* Ticker: pill chips with a soft edge-fade instead of plain scrolling text */
.esr-ticker{width:100%;background:var(--esr-cream);padding:36px 0;overflow:hidden;border-bottom:1px solid rgba(11,58,44,.08);position:relative}
.esr-ticker::before,.esr-ticker::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.esr-ticker::before{left:0;background:linear-gradient(90deg,var(--esr-cream) 20%,rgba(255,247,236,0))}
.esr-ticker::after{right:0;background:linear-gradient(270deg,var(--esr-cream) 20%,rgba(255,247,236,0))}
.esr-ticker__row{display:flex;white-space:nowrap;align-items:center}
.esr-ticker__chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid rgba(11,58,44,.09);border-radius:999px;padding:10px 18px;margin-right:12px;box-shadow:0 1px 2px rgba(6,37,28,.04),0 6px 16px -12px rgba(6,37,28,.3);flex-shrink:0}
.esr-ticker__chip .ic{color:var(--esr-orange);display:flex;flex-shrink:0}
.esr-ticker__chip .mono{font-size:12.5px;color:var(--esr-ink);font-weight:600}
.esr-ticker__chip .price{color:var(--esr-orange);font-weight:700;margin-left:2px}

/* Hero booking demo: a scripted, looping animation, not a real form - see
   esr-booksim in redesign.js for the state machine driving these classes. */
.esr-booksim{background:#fff;border-radius:22px;padding:22px 22px 20px}
.esr-booksim__badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px}
.esr-booksim__badge .dot{width:6px;height:6px;border-radius:999px;background:var(--esr-orange);animation:esr-livepulse-orange 1.8s infinite}
.esr-booksim__badge .mono{font-size:10px;font-weight:700;color:var(--esr-muted);letter-spacing:.04em}
@keyframes esr-livepulse-orange{0%{box-shadow:0 0 0 0 rgba(244,116,11,.45)}70%{box-shadow:0 0 0 7px rgba(244,116,11,0)}100%{box-shadow:0 0 0 0 rgba(244,116,11,0)}}

.esr-booksim__stage{position:relative}
.esr-booksim__form{transition:opacity .35s ease,transform .35s ease}
.esr-booksim__route{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.esr-booksim__swap{color:var(--esr-orange);flex-shrink:0;display:flex}
.esr-booksim__row3{display:flex;gap:8px;margin-bottom:16px}
.esr-booksim__field{flex:1;min-width:0;background:var(--esr-paper);border-radius:12px;padding:10px 13px}
.esr-booksim__field .lbl{display:block;font-size:9.5px;font-weight:700;color:var(--esr-muted);letter-spacing:.05em;margin-bottom:3px}
.esr-booksim__field .val{display:block;font-size:13.5px;font-weight:600;color:var(--esr-ink);min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
.esr-booksim__field .val.is-set{opacity:1;transform:translateY(0)}
.esr-booksim__btn{width:100%;background:var(--esr-orange);color:#fff;border:none;border-radius:12px;padding:14px;font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .2s ease}
.esr-booksim.is-searching .esr-booksim__btn{background:var(--esr-orange-600)}
.esr-booksim__btn .spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;display:none;flex-shrink:0}
.esr-booksim.is-searching .esr-booksim__btn .spin{display:inline-block;animation:esr-spin .7s linear infinite}
@keyframes esr-spin{to{transform:rotate(360deg)}}

.esr-booksim__result{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.esr-booksim.is-result .esr-booksim__form{opacity:0;transform:translateY(-8px);pointer-events:none}
.esr-booksim.is-result .esr-booksim__result{opacity:1;transform:translateY(0);pointer-events:auto}
.esr-booksim__resulttop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.esr-booksim__resulttop .route{font-size:15px;font-weight:700;color:var(--esr-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esr-booksim__resulttop .price{font-size:21px;font-weight:700;color:var(--esr-orange);flex-shrink:0}
.esr-booksim__resultmeta{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--esr-muted);margin-bottom:60px}
.esr-booksim__confirm{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--esr-forest);color:#fff;border-radius:12px;padding:13px;font-weight:700;font-size:14px;position:absolute;left:0;right:0;bottom:0;opacity:0;transform:scale(.94);transition:opacity .3s ease,transform .3s ease}
.esr-booksim.is-confirmed .esr-booksim__confirm{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  .esr-booksim__badge .dot{animation:none}
  .esr-booksim__btn .spin{animation:none}
}

/* ---------- Stats: elevated icon-chip cards, not plain divided columns ---------- */
.esr-stats{padding:60px 0}
.esr-stats__row{display:flex;flex-wrap:wrap;gap:20px}
.esr-stats__col{flex:1 1 0;min-width:230px;display:flex;align-items:center;gap:18px;background:#fff;border-radius:18px;padding:24px 26px;box-shadow:0 1px 2px rgba(6,37,28,.05),0 16px 36px -24px rgba(6,37,28,.3)}
.esr-stats__icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.esr-stats__text{min-width:0}
.esr-stats__num{font-size:30px;color:var(--esr-forest);font-weight:600;line-height:1.1}
.esr-stats__label{font-size:13px;color:var(--esr-muted);margin-top:5px;line-height:1.35}

/* ---------- Use cases / bento ---------- */
.esr-section{padding:70px 0 100px}
.esr-section--tight{padding:70px 0 70px}
.esr-section-head{margin-bottom:40px}
.esr-eyebrow{font-size:13px;font-weight:600;color:var(--esr-orange);letter-spacing:.04em}
.esr-section-head h2{font-size:38px;margin-top:12px;max-width:620px;letter-spacing:-.015em}
.esr-section-head p{font-size:15px;color:var(--esr-muted);line-height:1.55;margin-top:14px}

.esr-tile{position:relative;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
/* !important: for an absolutely positioned *replaced* element (img), inset:0
   does not force a stretch the way it does for ordinary boxes - if height:auto
   wins the cascade (as it does here against Elementor's global img reset),
   the browser sizes the element from the photo's own aspect ratio instead,
   over- or under-filling the box depending on the source photo's shape. */
.esr-tile img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
.esr-tile__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,37,28,.88) 0%,rgba(6,37,28,.08) 60%)}
.esr-tile__body{position:relative;padding:22px}
.esr-tile__body .eyebrow{font-size:11.5px;color:var(--esr-amber);font-weight:600;letter-spacing:.04em}
.esr-tile__body h4{font-size:20px;color:#fff;margin-top:6px}
.esr-tile__body p{font-size:13.5px;color:rgba(255,247,236,.78);margin-top:6px;max-width:360px}
.esr-tile__body .esr-tile-link{color:#fff;font-size:13px;font-weight:600;margin-top:10px;display:inline-flex;align-items:center;gap:4px}
/* White card + colored icon chip, same recipe as .esr-usecard/.esr-stats__col
   elsewhere on this page - a flat solid-colored card was the only place on
   the page breaking that pattern, and with 3 of 5 landing orange-family it
   also read as a mismatched wall of color next to the photo tiles. */
.esr-tile--solid{background:#fff;border:1px solid rgba(11,58,44,.08);box-shadow:0 1px 2px rgba(6,37,28,.05);padding:22px;justify-content:space-between}
.esr-tile--solid .icon-chip{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.esr-tile--solid h4{font-size:15.5px;color:var(--esr-ink)}
.esr-tile--solid .sub{font-family:"IBM Plex Mono",monospace;font-size:11.5px;margin-top:4px;color:var(--esr-muted)}

/* ---------- Suited for (horizontal pill tabs - deliberately distinct from
   the Journey section's vertical rail right above it) ---------- */
.esr-tabswitch{margin-top:44px}
.esr-tabbar{display:flex;gap:8px;flex-wrap:wrap}
.esr-tabbar button{border:1.5px solid rgba(11,58,44,.16);background:#fff;color:var(--esr-muted);border-radius:999px;padding:12px 22px;font-size:14px;font-weight:600;transition:all .15s ease;white-space:nowrap}
.esr-tabbar button:hover{border-color:rgba(11,58,44,.32);color:var(--esr-ink)}
.esr-tabbar button.is-active{background:var(--esr-forest);border-color:var(--esr-forest);color:#fff}
.esr-tabswitch .esr-panel-frame{margin-top:20px}

/* ---------- Suited for / Journey shared panel ---------- */
.esr-suited{display:flex;gap:40px;margin-top:44px;align-items:stretch}
.esr-rail{width:300px;flex-shrink:0;position:relative}
.esr-rail__line{position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:rgba(11,58,44,.14)}
.esr-rail button{position:relative;display:flex;align-items:center;gap:16px;width:100%;background:none;border:none;padding:14px 0;text-align:left}
.esr-rail__dot{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid rgba(11,58,44,.25);flex-shrink:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--esr-muted)}
.esr-rail__label{font-size:15px;font-weight:600;color:var(--esr-muted)}
.esr-rail button.is-active .esr-rail__dot{background:var(--esr-forest);border-color:var(--esr-forest);color:var(--esr-amber)}
.esr-rail button.is-active .esr-rail__label{color:var(--esr-forest)}
.esr-panel-frame{flex:1;background:#fff;border-radius:22px;overflow:hidden}
.esr-panel{display:none;min-height:440px;flex-wrap:wrap}
.esr-panel.is-active{display:flex}
.esr-panel__text{flex:1;min-width:320px;padding:44px;display:flex;flex-direction:column;justify-content:center}
.esr-panel__text h3{font-size:25px;margin-bottom:14px}
.esr-panel__text p{font-size:15.5px;color:var(--esr-muted);line-height:1.6;margin-bottom:22px}
.esr-panel__features{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.esr-panel__features div{display:flex;align-items:flex-start;gap:10px}
.esr-panel__features span.chk{color:var(--esr-orange);flex-shrink:0;margin-top:2px}
.esr-panel__features span.txt{font-size:14.5px;color:#1B2420;line-height:1.5}
.esr-panel__cta{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14.5px;color:var(--esr-forest)}
.esr-panel__media{flex:1;min-width:280px;position:relative;min-height:320px;background:var(--esr-paper)}
.esr-panel__media img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
/* Source photo for this one is portrait with the bus in the lower-right third;
   centered cover would crop straight to empty sky, so bias the crop toward it. */
.esr-tile img.esr-img-charter,.esr-panel__media img.esr-img-charter{object-position:center 100%}
.esr-panel__mock{padding:40px;height:100%;display:flex;flex-direction:column;justify-content:center}
.esr-panel__mock-card{background:#fff;border-radius:14px;padding:22px;border:1px solid rgba(11,58,44,.1)}
.esr-panel__mock-card p.lbl{font-size:12px;font-weight:700;color:var(--esr-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.esr-mockrow{display:flex;align-items:center;gap:12px}
.esr-mockrow .d{width:8px;height:8px;border-radius:999px;background:var(--esr-forest);flex-shrink:0}
.esr-mockrow .d.o{background:var(--esr-orange)}
.esr-mockrow .t{font-size:13.5px;color:#1B2420;flex:1}
.esr-mockrow .m{font-size:12px;color:var(--esr-muted)}
.esr-mockline{width:1.5px;height:18px;background:rgba(11,58,44,.18);margin-left:3.5px}

/* ---------- Journey (rail + media, same interaction as Suited For) ----------
   Markup carries BOTH the generic .esr-rail/.esr-panel-frame/.esr-panel
   classes (what redesign.js targets) and these modifiers (compound
   selectors, placed after the base rules above so they win on specificity
   ties regardless of source order elsewhere). */
.esr-rail.esr-journey-rail{width:460px}
.esr-journey-steps{position:relative}
.esr-journey-rail .esr-rail__line{left:26.5px;width:3px;border-radius:3px;background:linear-gradient(180deg,#F4740B 0%,#F4740B 35%,#F5B33C 55%,#0B3A2C 100%)}
.esr-journey-rail button{gap:20px;align-items:flex-start;padding:24px 10px 24px 0;min-height:76px;border-radius:14px;transition:background .15s ease}
.esr-journey-rail button:hover{background:rgba(11,58,44,.04)}
.esr-journey-rail button.is-active{background:rgba(11,58,44,.045)}
.esr-journey-rail .esr-rail__dot{width:56px;height:56px;border-radius:50%;background:#FFF7EC;border:3px solid rgba(11,58,44,.18);font-size:13px;transition:background .2s ease,border-color .2s ease,color .2s ease}
.esr-journey-rail button.is-active .esr-rail__dot{background:var(--esr-forest);border-color:var(--esr-forest);color:var(--esr-amber)}
.esr-journey-rail__body{flex:1;padding-top:6px}
.esr-journey-rail__body h4{font-size:15.5px;color:var(--esr-muted);transition:color .15s ease}
.esr-journey-rail__body p{font-size:13px;color:#C7CCC6;margin-top:4px;line-height:1.5;transition:color .15s ease}
.esr-journey-rail button.is-active .esr-journey-rail__body h4{color:var(--esr-ink);font-weight:700}
.esr-journey-rail button.is-active .esr-journey-rail__body p{color:var(--esr-muted)}
.esr-journey-section{overflow:visible}
.esr-panel-frame.esr-journey-media{background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;min-height:380px;position:sticky;top:calc(104px + var(--es-sticky-top,0px) + 24px);align-self:flex-start}
/* The sticky panel can only stay pinned for (container height - panel height)
   of scroll distance before it has to start releasing. Without this, that ran
   out before the last rail step even finished activating, so the panel was
   already sliding away - and visibly cut off - while step 6 was still current.
   Needs real layout height, not padding on the flex container - Chromium does
   not extend a flex item's sticky containing block using the container's own
   padding, only its content height. */
.esr-journey-spacer{height:130px}
@media (max-width: 900px){
	.esr-panel-frame.esr-journey-media{position:static}
	.esr-journey-spacer{display:none}
	/* .esr-rail.esr-journey-rail{width:460px} is a compound selector, so it
	   beats the generic .esr-rail{width:100%} mobile rule on specificity
	   regardless of media-query order - the rail stayed 460px wide on every
	   narrow screen and pushed the whole page into horizontal scroll. */
	.esr-rail.esr-journey-rail{width:100%}
}
.esr-journey-mock{display:none;width:100%;max-width:420px}
.esr-journey-mock.is-active{display:block}
.esr-journey-mock .card{background:#fff;border-radius:22px;padding:28px;box-shadow:0 1px 2px rgba(6,37,28,.06),0 8px 24px -18px rgba(6,37,28,.35)}
.esr-journey-mock .lbl{font-size:11.5px;font-weight:700;color:var(--esr-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px}

/* ---------- Catalog frame ---------- */
.esr-frame{background:#1B2420;border-radius:18px;overflow:hidden}
.esr-frame__bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:#0C1A15}
.esr-frame__dot{width:10px;height:10px;border-radius:999px}
.esr-frame__url{margin-left:auto;margin-right:auto;font-size:12px;color:rgba(255,247,236,.5)}
.esr-frame__body{background:#fff;padding:30px}

/* Curated route preview cards (homepage teaser, not the live catalog dump) */
.esr-usecard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.esr-usecard{display:block;background:#fff;border:1px solid rgba(11,58,44,.08);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(6,37,28,.05);transition:transform .15s ease,box-shadow .15s ease}
.esr-usecard:hover{transform:translateY(-3px);box-shadow:0 16px 30px -20px rgba(6,37,28,.35)}
.esr-usecard__img{position:relative;height:130px;overflow:hidden}
/* !important: same replaced-element quirk as the other photo-in-a-box cases
   on this page - inset:0 alone doesn't force height on an <img>. This one
   was overflowing its 130px box by ~25px unnoticed, since overflow:hidden
   on the parent quietly clipped the extra instead of breaking the layout. */
.esr-usecard__img img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block}
.esr-usecard__img .badge{position:absolute;top:10px;right:10px;background:var(--esr-forest);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.esr-usecard__body{padding:14px 16px 16px}
.esr-usecard__body h4{font-size:14.5px;color:var(--esr-ink);line-height:1.3;margin-bottom:8px;min-height:38px}
.esr-usecard__body .link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--esr-orange)}
.esr-usecard-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 860px){.esr-usecard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Module spec list ---------- */
.esr-modules{margin-top:40px}
.esr-modules .row{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid rgba(11,58,44,.1)}
.esr-modules .num{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--esr-orange);font-weight:600;flex-shrink:0;width:24px}
.esr-modules strong{font-size:14.5px}
.esr-modules p{font-size:13px;color:var(--esr-muted);margin:3px 0 0}

/* ---------- Command center (framed app window, not a plain card) ---------- */
.esr-cc{background:var(--esr-forest-900);padding:100px 0}
.esr-cc h2{color:#fff}
.esr-cc p,.esr-cc li{color:rgba(255,247,236,.75)}
.esr-cc__row{display:flex;gap:48px;margin-top:44px;align-items:center;flex-wrap:wrap}
.esr-cc__left{flex:1;min-width:300px}

.esr-cc__dashwrap{flex:1.2;min-width:420px;position:relative}
.esr-cc__glow{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(244,116,11,.4),rgba(244,116,11,0) 70%);top:-70px;right:-50px;pointer-events:none;z-index:0;filter:blur(2px)}
.esr-cc__frame{position:relative;z-index:1}
.esr-cc__live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,247,236,.55)}
.esr-cc__live .dot{width:6px;height:6px;border-radius:999px;background:#39D98A;animation:esr-livepulse 1.8s infinite}
@keyframes esr-livepulse{0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}70%{box-shadow:0 0 0 7px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}

.esr-cc__body-row{display:flex;background:#fff}
.esr-cc__sidebar{width:52px;flex-shrink:0;background:var(--esr-paper);padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:16px}
.esr-cc__sidebar span{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--esr-muted)}
.esr-cc__sidebar span.is-active{background:var(--esr-forest);color:var(--esr-amber)}
.esr-cc__content{flex:1;min-width:0;padding:22px 24px 24px}
.esr-cc__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.esr-cc__head h4{font-size:15px;color:var(--esr-ink)}
.esr-cc__tabs{display:flex;gap:8px}
.esr-cc__tabs span{font-size:12px;padding:6px 13px;border-radius:999px}

.esr-cc__stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.esr-cc__stat .lbl{font-size:10.5px;color:var(--esr-muted);font-weight:600;text-transform:uppercase;letter-spacing:.02em;margin:0}
.esr-cc__stat .val{font-family:"IBM Plex Mono",monospace;font-size:18px;color:var(--esr-forest);font-weight:600;margin:5px 0 7px}
.esr-cc__trend{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px}
.esr-cc__trend--up{background:#E4F2E9;color:#12513D}
.esr-cc__trend--down{background:#E4F2E9;color:#12513D}

.esr-cc__chartcard{background:var(--esr-cream);border-radius:14px;padding:16px 16px 10px}
.esr-cc__chart{display:flex;align-items:flex-end;gap:7px;height:76px}
.esr-cc__bar{flex:1;border-radius:5px 5px 2px 2px}
.esr-cc__chartlabels{display:flex;gap:7px;margin-top:6px}
.esr-cc__chartlabels span{flex:1;text-align:center;font-size:9.5px;color:#A3ACA6;font-family:"IBM Plex Mono",monospace}

/* ---------- Self hosted ---------- */
.esr-selfhosted{padding:100px 0}
.esr-sh__grid{display:flex;align-items:center;gap:72px}
.esr-sh__text{flex:1 1 440px;min-width:320px}
.esr-sh__checklist{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;max-width:460px}
.esr-sh__checklist li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--esr-ink);line-height:1.5}
.esr-sh__check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--esr-forest);display:flex;align-items:center;justify-content:center;margin-top:1px}

.esr-sh__visual{flex:1 1 420px;min-width:320px;position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 0 0}
/* Illustrated panel: pastel card + floating booking card + connected rider
   avatars, in place of the earlier literal wp-admin screenshot. */
.esr-sh__illus{position:relative;width:100%;max-width:420px;height:380px}
.esr-sh__illus-bg{position:absolute;inset:0;border-radius:28px;background:linear-gradient(150deg,#FBE3D1 0%,#FDEFE3 55%,#FFF7EC 100%)}
.esr-sh__illus-blob{position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(11,58,44,.07);top:-50px;right:-40px;pointer-events:none}
.esr-sh__illus-lines{position:absolute;inset:0;width:100%;height:100%}
.esr-sh__illus-avatar{position:absolute;width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 10px 22px -8px rgba(6,37,28,.4)}
.esr-sh__illus-avatar.a1{top:44px;left:40px}
.esr-sh__illus-avatar.a2{bottom:52px;right:46px}
.esr-sh__illus-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:252px;background:#fff;border-radius:16px;padding:18px 18px 16px;box-shadow:0 24px 48px -20px rgba(6,37,28,.35)}
.esr-sh__illus-cardtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.esr-sh__illus-cardtop .mono{font-size:10.5px;color:var(--esr-muted);font-weight:700;letter-spacing:.03em}
.esr-sh__illus-cardtop .badge{font-size:10px;font-weight:700;color:var(--esr-forest);background:var(--esr-amber-050);padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em}
.esr-sh__illus-card h5{font-size:14.5px;font-weight:700;color:var(--esr-ink);margin:0 0 12px}
.esr-sh__illus-rider{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid rgba(11,58,44,.08)}
.esr-sh__illus-rider img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.esr-sh__illus-rider span{font-size:12.5px;color:var(--esr-muted);font-weight:600}
.esr-sh__illus-badge{position:absolute;width:34px;height:34px;border-radius:50%;background:var(--esr-forest);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -6px rgba(6,37,28,.5);top:calc(50% - 95px);left:calc(50% + 95px)}
.esr-sh__hostlabel{margin-top:18px;font-size:12px;color:var(--esr-muted);position:relative;z-index:1}

.esr-sh__ecosystem{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:72px;padding-top:48px;border-top:1px solid rgba(11,58,44,.08)}
.esr-sh__badge{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:11px 20px 11px 12px;font-size:14px;font-weight:600;color:var(--esr-ink);box-shadow:0 1px 2px rgba(6,37,28,.05)}
.esr-sh__badgeicon{width:30px;height:30px;border-radius:50%;background:var(--esr-orange-050);display:flex;align-items:center;justify-content:center;flex-shrink:0}

@media (max-width: 900px){
	.esr-sh__grid{flex-direction:column;text-align:center}
	.esr-sh__text .esr-sh__checklist{margin-left:auto;margin-right:auto;text-align:left}
	.esr-sh__text p{margin-left:auto;margin-right:auto}
	/* The decorative blob intentionally bleeds past .esr-sh__illus on desktop
	   (top:-50px;right:-40px) - on a narrow viewport that bleed reaches past
	   the screen edge and pushes the whole page into horizontal scroll. */
	.esr-sh__illus{overflow:hidden}
}

/* ---------- Pricing ---------- */
.esr-pricing{background:var(--esr-paper);padding:100px 0}
.esr-pricing-toggle{display:inline-flex;background:#fff;border-radius:999px;padding:5px;margin-top:28px;gap:4px}
.esr-pricing-toggle button{border:none;border-radius:999px;padding:10px 22px;font-size:13.5px;font-weight:600;background:transparent;color:var(--esr-muted)}
.esr-pricing-toggle button.is-active{background:var(--esr-forest);color:#fff}
.esr-pricing-cards{margin-top:44px;display:none;flex-wrap:wrap;gap:20px;justify-content:center}
.esr-pricing-cards.is-active{display:flex}
.esr-price-card{background:#fff;border-radius:18px;padding:30px;display:flex;flex-direction:column;width:300px;position:relative}
.esr-price-card--pro{background:var(--esr-forest);color:#fff}
.esr-price-card .plan{font-size:15px;color:var(--esr-muted);font-weight:600}
.esr-price-card--pro .plan{color:rgba(255,247,236,.7)}
.esr-price-card .price{font-size:28px;font-weight:700;margin-top:10px;font-family:"Bricolage Grotesque",sans-serif}
.esr-price-card .price .suffix{font-size:14px;font-weight:500;color:var(--esr-muted)}
.esr-price-card--pro .price .suffix{color:rgba(255,247,236,.6)}
.esr-price-card .desc{font-size:13.5px;color:var(--esr-muted);margin-top:8px;line-height:1.5;flex:1}
.esr-price-card--pro .desc{color:rgba(255,247,236,.72)}
.esr-price-card .badge{position:absolute;top:-13px;left:30px;background:var(--esr-orange);color:#fff;font-size:11px;font-weight:700;padding:5px 14px;border-radius:999px;text-transform:uppercase}
.esr-price-card ul{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:9px}
.esr-price-card ul li{font-size:13.5px;color:#1B2420}
.esr-price-card--pro ul li{color:#fff}

/* ---------- FAQ ---------- */
.esr-faq{padding:100px 0}
.esr-faq-item{border-bottom:1px solid rgba(11,58,44,.12)}
.esr-faq-item button{width:100%;background:none;border:none;padding:22px 0;display:flex;align-items:center;gap:18px;text-align:left}
.esr-faq-item .mono{font-size:12.5px;color:var(--esr-orange);font-weight:600;flex-shrink:0}
.esr-faq-item .q{font-size:15.5px;font-weight:600;color:#1B2420;flex:1}
.esr-faq-item .chev{color:var(--esr-muted);flex-shrink:0;transition:transform .15s ease}
.esr-faq-item.is-open .chev{transform:rotate(180deg)}
.esr-faq-item .a{font-size:14.5px;color:var(--esr-muted);line-height:1.6;padding:0 0 24px 30px;display:none}
.esr-faq-item.is-open .a{display:block}

/* ---------- Final CTA ---------- */
.esr-finalcta{background:var(--esr-forest-900);padding:110px 0;text-align:center;position:relative;overflow:hidden}
.esr-finalcta h2{font-size:40px;color:#fff;letter-spacing:-.015em}
.esr-finalcta p{font-size:16.5px;color:rgba(255,247,236,.72);margin-top:16px;line-height:1.6}
.esr-finalcta__ctas{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* ---------- Page hero (breadcrumb + headline) ---------- */
.esr-pagehero{padding:60px 0 50px;background:var(--esr-cream)}
.esr-pagehero__crumbs{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--esr-muted);margin-bottom:18px}
.esr-pagehero__crumbs a{color:var(--esr-ink);font-weight:600}
.esr-pagehero h1{font-size:clamp(32px,4vw,52px);line-height:1.15;color:var(--esr-ink);font-weight:700;letter-spacing:-.02em}
.esr-pagehero h1 em{font-style:normal;color:var(--esr-orange)}
.esr-pagehero p{font-size:16.5px;color:var(--esr-muted);max-width:560px;margin:20px auto 0;line-height:1.6}
.esr-pagehero__link{display:inline-flex;align-items:center;gap:6px;margin-top:26px;font-weight:600;color:var(--esr-forest);font-size:15px}
.esr-pagehero__link:hover{color:var(--esr-orange)}

/* ---------- Features grid ---------- */
.esr-featgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.esr-featcard{background:var(--esr-cream);border-radius:20px;padding:28px}
.esr-featcard h4{font-size:19px;color:var(--esr-ink);font-weight:700}
.esr-featcard p{font-size:14px;color:var(--esr-muted);margin-top:8px;line-height:1.55;max-width:420px}
.esr-featcard__mock{margin-top:22px}
.esr-featcard__mock .card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 1px 2px rgba(6,37,28,.06),0 16px 30px -20px rgba(6,37,28,.3)}
.esr-featcard__mock .lbl{font-size:11px;font-weight:700;color:var(--esr-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
@media (max-width: 860px){
  .esr-featgrid{grid-template-columns:1fr}
  /* Each card's mock is a different height (dashboard/seats are much shorter
     than the route-plan/checkout ones), and stacked to one column that's
     fine between cards - but after the LAST card, that shorter mock's own
     slack plus this section's full 100px bottom padding (shared with every
     other .esr-section on the page) added up to a big blank gap before the
     next section started. */
  .esr-featuresgrid-section{padding-bottom:40px}
  .esr-featcard{padding:24px 24px 20px}
}

/* ---------- Value props ("what we stand for") ---------- */
.esr-valueprops{padding:70px 0;background:var(--esr-paper)}
.esr-valueprops__row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.esr-valueprops__card{background:#fff;border-radius:16px;padding:26px;border:1px solid rgba(11,58,44,.08);box-shadow:0 1px 2px rgba(6,37,28,.05)}
.esr-valueprops__card .icon-chip{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.esr-valueprops__card h4{font-size:15.5px;color:var(--esr-ink);font-weight:700}
.esr-valueprops__card p{font-size:13.5px;color:var(--esr-muted);margin-top:8px;line-height:1.5}
@media (max-width: 860px){.esr-valueprops__row{grid-template-columns:repeat(2,1fr)}}

@media (max-width: 980px){
  .esr .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .esr .grid-2{grid-template-columns:1fr}
  .esr-stack-md{flex-direction:column !important}
  .esr-hide-md{display:none !important}
  .esr-suited{flex-direction:column}
  .esr-rail{width:100%}
}
@media (max-width: 640px){
  .esr .bento{grid-template-columns:1fr}
  .esr .bento,.esr .b-wide,.esr .b-big{grid-column:span 1 !important;grid-row:span 1 !important;grid-auto-rows:220px}
  .esr .b-tall{grid-row:span 1 !important}
  .esr-hero h1{font-size:42px !important}
  .esr-cc__row,.esr-panel{flex-direction:column}
  /* Stacking to column alone doesn't help when each item still has its own
     min-width (420px/300px) wider than the viewport - that's what was
     actually pushing the page into horizontal scroll here, not the layout
     direction. */
  .esr-cc__left,.esr-cc__dashwrap{min-width:0}
}

/* ---------- Blog: featured post ---------- */
.esr-blogfeatured{display:flex;gap:0;background:#fff;border-radius:22px;border:1px solid rgba(11,58,44,.08);box-shadow:0 1px 2px rgba(6,37,28,.05),0 24px 48px -32px rgba(6,37,28,.3);overflow:hidden;margin:48px 0;transition:box-shadow .2s ease,transform .2s ease}
.esr-blogfeatured:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(6,37,28,.05),0 30px 56px -28px rgba(6,37,28,.38)}
.esr-blogfeatured__media{display:block;flex:1 1 46%;min-width:0;min-height:380px;background:var(--esr-paper);position:relative}
/* !important: wp_get_attachment_image() prints width/height attributes from
   the image's own file, which browsers use to auto-reserve an aspect-ratio
   box - that fights plain width/height:100% inside a flex row. Same fix as
   the other photo-in-a-box cases on this page: absolutely position the img
   so inset:0 defines its box directly, instead of letting it size itself. */
.esr-blogfeatured__media img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block}
.esr-blogfeatured__body{flex:1 1 54%;min-width:0;padding:40px 44px;display:flex;flex-direction:column;justify-content:center}
.esr-blogfeatured__tag{display:inline-block;align-self:flex-start;background:var(--esr-forest-050);color:var(--esr-forest-600);font-size:11.5px;font-weight:700;padding:5px 13px;border-radius:999px;margin-bottom:14px;text-decoration:none}
.esr-blogfeatured__body h2{font-size:28px;line-height:1.2;color:var(--esr-ink);font-weight:700;letter-spacing:-.01em}
.esr-blogfeatured__body h2 a{color:inherit;text-decoration:none}
.esr-blogfeatured__body h2 a:hover{color:var(--esr-orange)}
.esr-blogfeatured__body p{font-size:15px;color:var(--esr-muted);line-height:1.6;margin-top:14px}
.esr-blogfeatured__body .es-postcard__meta{margin-top:16px}
.esr-blogfeatured__body .btn-dark{align-self:flex-start;margin-top:22px;display:inline-flex}
@media (max-width: 860px){
  .esr-blogfeatured{flex-direction:column}
  .esr-blogfeatured__media img{min-height:220px}
  .esr-blogfeatured__body{padding:28px}
}

/* ---------- Use-case hero (per shuttle category page) ---------- */
.esr-usecasehero{padding:50px 0 70px;background:var(--esr-paper)}
.esr-usecasehero .esr-pagehero__crumbs{justify-content:flex-start;margin-bottom:28px}
.esr-usecasehero__grid{display:flex;align-items:center;gap:56px}
.esr-usecasehero__text{flex:1 1 440px;min-width:320px}
.esr-usecasehero__text h1{font-size:clamp(32px,3.6vw,46px);line-height:1.15;color:var(--esr-ink);font-weight:700;letter-spacing:-.02em}
.esr-usecasehero__text h1 em{font-style:normal;color:var(--esr-orange)}
.esr-usecasehero__text p{font-size:16px;color:var(--esr-muted);margin-top:18px;line-height:1.6;max-width:440px}
.esr-usecasehero__card{flex:1 1 440px;min-width:300px;max-width:480px;display:block;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(6,37,28,.06),0 30px 50px -28px rgba(6,37,28,.4);transition:transform .2s ease,box-shadow .2s ease}
.esr-usecasehero__card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(6,37,28,.06),0 36px 56px -24px rgba(6,37,28,.46)}
.esr-usecasehero__media{position:relative;height:260px;background:var(--esr-cream)}
.esr-usecasehero__media img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block}
.esr-usecasehero__badge{position:absolute;left:20px;bottom:-22px;width:44px;height:44px;border-radius:12px;background:var(--esr-forest);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -8px rgba(6,37,28,.5);z-index:1}
.esr-usecasehero__body{padding:36px 24px 24px}
.esr-usecasehero__body h4{font-size:19px;color:var(--esr-ink);font-weight:700}
.esr-usecasehero__body p{font-size:14px;color:var(--esr-muted);margin-top:6px}
.esr-usecasehero__price{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:18px;border-top:1px solid rgba(11,58,44,.08)}
.esr-usecasehero__price span:first-child{font-size:13.5px;color:var(--esr-muted)}
.esr-usecasehero__price strong{color:var(--esr-ink);font-size:17px}
.esr-usecasehero__arrow{width:36px;height:36px;border-radius:50%;background:var(--esr-paper);display:flex;align-items:center;justify-content:center;color:var(--esr-forest);transition:background .2s ease,color .2s ease}
.esr-usecasehero__card:hover .esr-usecasehero__arrow{background:var(--esr-orange);color:#fff}
@media (max-width: 900px){
  .esr-usecasehero__grid{flex-direction:column}
  .esr-usecasehero__card{max-width:100%}
}