/* Closing invitation + footer: one surface, ruled rows (homepage only, CSS only).
   Before: a plum card, a cream card, the page ink and a separate footer plum
   stacked four tones in one view. Now the closing and the footer sit on the
   same ink as the sections above, and the two routes are an editorial list —
   full-width rows between hairline rules (title · description · action), the
   way the reference sites list offers. Structure comes from lines only:
   no cards, no numbers, no dots (owner rule).
   - Rules draw in from the left when the list arrives (motion on and
     no-preference only; complete otherwise). Entrances only.
   - On hover devices a gold line draws along the hovered row's base; nothing
     moves (states never move boxes).
   Copy, order, links and the shared card-title / body / pill styles are unchanged. */

.elementor-86 .sv-home.sv-home{--cl-rule:var(--sv-rule-on-dark,rgba(247,241,232,.16));--cl-gap:clamp(16px,1.8vw,32px)}

/* ---------- One surface ---------- */
.elementor-86 .sv-home.sv-home .sv-footer{background:transparent}
/* Same surface, so one band of space between the list and the footer statement, not two. */
.elementor-86 .sv-home.sv-home .sv-closing{padding-bottom:0}
.elementor-86 .sv-home.sv-home .sv-footer{padding-top:clamp(88px,9vw,144px)}

/* ---------- Heading ---------- */
.elementor-86 .sv-home.sv-home .sv-closing-top{margin-bottom:clamp(40px,4.4vw,72px)}

/* ---------- Routes: ruled rows ---------- */
.elementor-86 .sv-home.sv-home .sv-closing-routes{
  display:block;position:relative;max-width:none;margin:0;gap:0}
.elementor-86 .sv-home.sv-home .sv-closing .sv-route,
.elementor-86 .sv-home.sv-home .sv-closing .sv-route:nth-child(2){
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:none;
  column-gap:var(--cl-gap);row-gap:12px;align-items:center;
  padding:clamp(28px,3.2vw,48px) 0;background:none;box-shadow:none;border:0;color:var(--sv-on-dark)}
.elementor-86 .sv-home.sv-home .sv-closing .sv-route>h3{grid-column:1/5;grid-row:1;margin:0;color:var(--sv-on-dark)}
.elementor-86 .sv-home.sv-home .sv-closing .sv-route>p{
  grid-column:5/10;grid-row:1;align-self:center;max-width:30em;margin:0;color:var(--sv-on-dark-muted)}
.elementor-86 .sv-home.sv-home .sv-closing .sv-route>:is(a,.sv-button){
  grid-column:10/13;grid-row:1;justify-self:end;align-self:center;margin:0}

/* Both bookings are the same action on the same surface: one pill style. */
.elementor-86 .sv-home.sv-home .sv-closing .sv-route-light .sv-button{
  background:var(--sv-light);color:var(--sv-ink);box-shadow:none}
@media(hover:hover){
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route-light .sv-button:hover{background:var(--sv-primary-light-hover);color:var(--sv-ink)}
}
.elementor-86 .sv-home.sv-home .sv-closing .sv-route-light .sv-button:active{background:var(--sv-primary-light-press);color:var(--sv-ink)}
.elementor-86 .sv-home.sv-home .sv-closing .sv-route-light :where(a,button,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:var(--sv-focus-on-dark)}

/* Rules: one above each row, one closing the list. */
.elementor-86 .sv-home.sv-home .sv-closing .sv-route::before,
.elementor-86 .sv-home.sv-home .sv-closing-routes::after{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--sv-line,1px);
  background:var(--cl-rule);transform-origin:0 50%;pointer-events:none}
.elementor-86 .sv-home.sv-home .sv-closing-routes::after{top:auto;bottom:0}

/* Hover: a gold line draws over the row's own top rule (each row owns its line,
   so the last row is not clipped at the section edge), and the description
   brightens. Nothing moves. */
.elementor-86 .sv-home.sv-home .sv-closing .sv-route::after{
  content:"";position:absolute;left:0;right:0;top:0;z-index:1;height:var(--sv-line,1px);
  background:var(--sv-gold);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media(hover:hover){
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route::after{transition:transform .6s var(--sv-ease,cubic-bezier(.22,1,.36,1))}
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route:hover::after{transform:scaleX(1)}
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route>p{transition:color .35s var(--sv-ease,ease)}
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route:hover>p{color:var(--sv-on-dark)}
}
@media(prefers-reduced-motion:reduce){
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route::after{transition:none}
}

/* ---------- Tablet and phone: stacked rows ---------- */
@media(max-width:860px){
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route,
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route:nth-child(2){
    grid-template-columns:minmax(0,1fr);align-items:start;row-gap:14px;padding:clamp(24px,5vw,36px) 0}
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route>:is(h3,p,a,.sv-button){grid-column:1;grid-row:auto}
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route>:is(a,.sv-button){justify-self:start;margin-top:6px}
}

/* ---------- Line draw (entrances only) ---------- */
@media(prefers-reduced-motion:no-preference){
  /* Transition only on arrival, so collapsing a pending rule is instant. */
  .elementor-86 .sv-home[data-sv-home-motion=on] .sv-closing-routes[data-sv-enter=entered] .sv-route::before,
  .elementor-86 .sv-home[data-sv-home-motion=on] .sv-closing-routes[data-sv-enter=entered]::after{
    transition:transform 1.1s var(--sv-ease,cubic-bezier(.22,1,.36,1)) calc(var(--sv-enter-delay,0ms) + var(--cl-i,0) * 140ms)}
  .elementor-86 .sv-home.sv-home .sv-closing .sv-route:nth-child(2){--cl-i:1}
  .elementor-86 .sv-home.sv-home .sv-closing-routes::after{--cl-i:2}
  .elementor-86 .sv-home[data-sv-home-motion=on] .sv-closing-routes[data-sv-enter=pending] .sv-route::before,
  .elementor-86 .sv-home[data-sv-home-motion=on] .sv-closing-routes[data-sv-enter=pending]::after{transform:scaleX(0)}
}