/* The DMV journey page. Extends styles.css; never restates its tokens. */
.trip-hero{padding-block:54px 34px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.trip-hero-copy{max-width:640px}
.trip-hero-art{margin:0;position:relative}
.trip-hero-art img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 22px 50px rgba(65,32,60,.22)}
.trip-hero-art figcaption{position:absolute;left:14px;bottom:14px;background:rgba(250,247,241,.93);border-radius:8px;padding:5px 11px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--plum)}
.trip-hero h1{font:600 clamp(40px,7vw,78px)/0.98 var(--serif);color:var(--plum);margin:10px 0 18px}
.trip-hero .lede{font-size:18px;max-width:56ch;color:#4c4350}
.trip-stats{list-style:none;display:flex;flex-wrap:wrap;gap:34px;padding:26px 0 8px;margin:22px 0 0;border-top:1px solid var(--line)}
.trip-stats b{display:block;font:600 30px/1 var(--serif);color:var(--copper)}
.trip-stats span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#7a6f79}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

.journey-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:30px;align-items:start}
.map-frame{position:relative;border-radius:18px;overflow:hidden;background:#27122a;box-shadow:0 24px 60px rgba(39,18,42,.28)}
.map-mount svg{display:block;width:100%;height:auto}
.map-mount.map-failed{min-height:120px;display:grid;place-items:center}
.map-badge{position:absolute;left:18px;top:18px;background:rgba(250,247,241,.94);border-radius:11px;padding:9px 14px;pointer-events:none}
.map-badge b{display:block;font:600 16px/1.1 var(--serif);color:var(--plum)}
.map-badge span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#7a6f79}
.map-replay{position:absolute;right:16px;bottom:16px;background:rgba(250,247,241,.9);border:0;border-radius:99px;padding:8px 15px;font:500 12px var(--sans);letter-spacing:.05em;color:var(--plum);cursor:pointer}
.map-replay:hover{background:#fff}

.pin-card{position:absolute;width:210px;background:rgba(250,247,241,.97);border-radius:13px;overflow:hidden;box-shadow:0 14px 34px rgba(20,8,22,.42);animation:pin-in .22s ease-out}
.pin-card img{width:100%;height:104px;object-fit:cover;display:block}
.pin-card-body{padding:11px 13px 13px}
.pin-card-body span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--copper)}
.pin-card-body h4{font:600 15px/1.2 var(--serif);color:var(--plum);margin:4px 0 2px}
.pin-card-body p{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#7a6f79;margin:0}
.pin-card-x{position:absolute;right:6px;top:6px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(39,18,42,.62);color:#fff;font-size:15px;line-height:1;cursor:pointer}
@keyframes pin-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pin-card.flip{animation:pin-in-up .22s ease-out}
@keyframes pin-in-up{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.journey-map .stars circle{fill:#ffe9cf}

/* map internals. --k is the zoom factor the JS sets: screen size stays put as the viewBox shrinks. */
.journey-map{--k:1}
.journey-map .sky{fill:url(#jm-sky)}
.journey-map .water{fill:url(#jm-water);opacity:.85}
.journey-map .city circle{fill:#f4e7dc;opacity:.5}
.journey-map .city text{font-size:calc(12px * var(--k));fill:#e7d5c6;opacity:.72;transition:opacity .4s;font-family:var(--sans);letter-spacing:.04em}
/* scale about the group's own origin, which is the landmark's true point: transform-box:fill-box
   measured the image instead and sliced the badges in half. */
.journey-map .landmark .badge{transform:scale(var(--k));transform-origin:0 0}
.journey-map .landmark text{font-size:12px;fill:#f4e7dc;text-anchor:middle;font-family:var(--sans);letter-spacing:.05em;opacity:0;transition:opacity .2s;paint-order:stroke;stroke:#27122a;stroke-width:3px;stroke-linejoin:round}
.journey-map .landmark:hover text{opacity:1}
.journey-map .landmark{cursor:default}
.journey-map .landmark .anchor line{stroke:#f0b27a;stroke-width:calc(1.4px * var(--k));opacity:.5}
.journey-map .landmark .anchor circle{fill:#f0b27a;opacity:.75;r:calc(3px * var(--k))}
.journey-map .landmark .badge-disc{fill:#faf7f1}
.journey-map .landmark .badge-ring{fill:none;stroke:#f0b27a;stroke-width:2;opacity:.85}


.journey-map .state{fill:url(#jm-land);stroke:#9a6f8c;stroke-width:1;opacity:.55}
.journey-map .state.focus{opacity:1;stroke:#c98f9f;stroke-width:1.3}
.journey-map .leg{fill:none;stroke:url(#jm-route);stroke-width:calc(3.4px * var(--k));stroke-linecap:round;opacity:0;filter:url(#jm-glow)}
.journey-map .leg.on{opacity:1}
.journey-map .leg.past{opacity:.32;filter:none;stroke-width:calc(2.2px * var(--k))}
.journey-map .leg.return{stroke-dasharray:2 9;stroke-linecap:round}
.journey-map .stop .dot{fill:#41203c;stroke:#f0b27a;stroke-width:calc(2.4px * var(--k));r:calc(13px * var(--k))}
.journey-map .stop .ring{fill:none;stroke:#f0b27a;stroke-width:calc(1.2px * var(--k));opacity:0;r:calc(15px * var(--k))}
.journey-map .stop .pulse{fill:#f0b27a;opacity:0;r:calc(9px * var(--k))}
.journey-map .stop .pin-day{font:600 calc(13px * var(--k)) var(--serif);fill:#faf7f1;text-anchor:middle;pointer-events:none}
.journey-map .stop .pin-label{font:500 calc(13px * var(--k)) var(--sans);fill:#f4e7dc;opacity:0;paint-order:stroke;stroke:#27122a;stroke-width:3.5;stroke-linejoin:round}
.journey-map .stop.airport .dot{fill:#41203c;stroke:#f0b27a;r:calc(8px * var(--k))}
.journey-map .stop.visited .dot{fill:#6b4460;stroke:#a97f92}
.journey-map .stop.active .dot{fill:#e2705a;stroke:#fff3e4;stroke-width:calc(3px * var(--k));r:calc(15px * var(--k))}
.journey-map .stop.active .ring{opacity:.85;animation:jm-ring 2.4s ease-out infinite}
.journey-map .stop.active .pulse{opacity:.35;animation:jm-pulse 2.4s ease-out infinite}
.journey-map .stop.active .pin-label{opacity:1}
.journey-map .stop{cursor:pointer}
.journey-map .stop:hover .pin-label{opacity:1}
.journey-map .coach{opacity:0;transition:opacity .3s}
.journey-map .coach circle{fill:#fff3e4;stroke:#e2705a;stroke-width:2;r:9}
.journey-map .coach .coach-mark{stroke:#41203c;stroke-width:1.6;fill:none}
@keyframes jm-ring{0%{r:calc(15px * var(--k));opacity:.85}100%{r:calc(30px * var(--k));opacity:0}}
@keyframes jm-pulse{0%{r:calc(9px * var(--k));opacity:.35}100%{r:calc(24px * var(--k));opacity:0}}

.day-rail .selector-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#7a6f79;margin:0 0 10px}
.day-buttons{display:grid;gap:8px}
.day-buttons button{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;border:1px solid var(--line);border-radius:11px;padding:11px 14px;font:400 15px var(--sans);color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.day-buttons button b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--plum);font:600 13px var(--sans)}
.day-buttons button:hover{border-color:var(--copper)}
.day-buttons button[aria-selected="true"]{background:var(--plum);border-color:var(--plum);color:#f7ead9}
.day-buttons button[aria-selected="true"] b{background:var(--copper);color:#fff}
.day-buttons button.whole{margin-top:4px;border-style:dashed}
.day-buttons button.whole b{background:transparent;color:var(--copper);font-size:15px}
.day-buttons button.whole[aria-selected="true"] b{background:transparent;color:#f0b27a}
.day-panel{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.day-panel .panel-day{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--copper)}
.day-panel h3{font:600 23px/1.15 var(--serif);color:var(--plum);margin:6px 0 2px}
.day-panel .where{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7a6f79;margin:0 0 12px}
.day-panel ul,.day-card ul{margin:0;padding-left:18px}
.day-panel li,.day-card li{margin-bottom:9px;font-size:14px;line-height:1.55}

.day-cards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:0;margin:0}
.day-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;
  flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.day-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(65,32,60,.16)}
.day-art{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--plum)}
.day-art img{width:100%;height:100%;object-fit:cover;display:block}
.day-art img.plane-art{object-fit:contain;padding:22px;background:#3a1b36}
.day-art figcaption{position:absolute;left:14px;top:14px;background:rgba(250,247,241,.94);border-radius:9px;
  padding:5px 12px;font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.day-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.day-body h3{font:600 23px/1.15 var(--serif);color:var(--plum);margin:0 0 10px}
.day-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.day-tags span{background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:4px 11px;
  font-size:11px;letter-spacing:.04em;color:#6c5f6a}



.included-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:start}
.inc-list{list-style:none;padding:0;margin:0}
.inc-list li{padding:13px 0 13px 28px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;position:relative}
.inc-list li:before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--copper)}
.price-card{background:var(--plum);color:#f4e7dc;border-radius:16px;padding:26px}
.price-card .eyebrow{color:#f0b27a}
.price{font:600 46px/1 var(--serif);margin:10px 0 18px}
.price span{display:block;font:400 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.8;margin-top:8px}
.plan{width:100%;border-collapse:collapse;margin-bottom:16px}
.plan caption{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;padding-bottom:8px}
.plan th,.plan td{text-align:left;padding:9px 0;border-bottom:1px solid rgba(244,231,220,.22);font-size:14px;font-weight:400;color:#f4e7dc}
.plan caption{color:#f4e7dc}
.plan td{text-align:right}
.fineprint{font-size:12px;line-height:1.55;opacity:.8}
.price-card .button{margin-top:6px;background:#f7ead9;color:var(--plum)}
.closing{text-align:center;padding-block:56px 70px}
.closing h2{font:600 clamp(28px,4vw,42px)/1.1 var(--serif);color:var(--plum);margin-bottom:10px}
.closing p{margin-bottom:22px}

@media (max-width:1050px){
  .day-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .trip-hero{grid-template-columns:1fr;gap:28px}
  .journey-grid,.included-grid{grid-template-columns:1fr}
  .day-cards,.campus-grid{grid-template-columns:1fr 1fr}
  .trip-stats{gap:22px}
}
@media (max-width:620px){
  .day-cards,.campus-grid{grid-template-columns:1fr}
  .trip-stats li{flex:1 1 40%}
}
@media (prefers-reduced-motion:reduce){
  .journey-map .stop.active .ring,.journey-map .stop.active .pulse{animation:none}
  .journey-map .leg{transition:none!important}
}

/* ---- The journey ribbon. Replaced the geographic map 2026-09-28; that map is held in
   build/reserve/ and its CSS above is still live in case it comes back. ---- */
.ribbon{margin:6px 0 30px}
.rib-scroll{position:relative;padding:8px 0 4px}
.rib-line{position:absolute;left:6%;right:6%;top:132px;height:2px;
  background:linear-gradient(90deg,transparent,var(--copper) 8%,var(--copper) 92%,transparent)}
.rib-days{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0;padding:0}
.rib-day button{display:block;width:100%;background:none;border:0;padding:0 4px 10px;cursor:pointer;
  font-family:var(--sans);text-align:center;color:var(--ink)}
.rib-art{display:flex;justify-content:center;align-items:flex-end;height:118px}
.rib-thumb{position:relative;width:104px;height:104px;border-radius:50%;overflow:hidden;
  border:3px solid var(--paper);box-shadow:0 10px 22px rgba(65,32,60,.22);background:var(--plum);
  transition:transform .25s ease,box-shadow .25s ease}
.rib-art-2 .rib-thumb{width:88px;height:88px}
.rib-art-2 .rib-thumb+.rib-thumb{margin-left:-24px}
.rib-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rib-thumb em{position:absolute;inset:auto 0 0 0;font:500 9px/1.3 var(--sans);font-style:normal;
  background:rgba(39,18,42,.72);color:#f4e7dc;padding:3px 4px;opacity:0;transition:opacity .2s}
.rib-travel{background:#3a1b36}
.rib-dot{display:block;width:13px;height:13px;margin:8px auto 0;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--copper);position:relative;z-index:2}
.rib-num{display:block;margin-top:9px;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--copper)}
.rib-title{display:block;font:600 17px/1.2 var(--serif);color:var(--plum);margin-top:3px}
.rib-where{display:block;font-size:11px;line-height:1.45;color:#7a6f79;margin-top:4px}
.rib-day button:hover .rib-thumb{transform:translateY(-4px)}
.rib-day button:hover .rib-thumb em{opacity:1}
.rib-day button[aria-selected="true"] .rib-thumb{transform:translateY(-6px) scale(1.06);
  box-shadow:0 16px 30px rgba(65,32,60,.3);border-color:#f0b27a}
.rib-day button[aria-selected="true"] .rib-dot{background:var(--copper);border-color:var(--paper);
  box-shadow:0 0 0 4px rgba(189,113,80,.25)}
.rib-day button[aria-selected="true"] .rib-title{color:var(--copper)}
.rib-day button:focus-visible{outline:2px solid var(--copper);outline-offset:4px;border-radius:12px}

#map .day-panel{border-top:1px solid var(--line);margin-top:6px;padding-top:22px;
  display:grid;grid-template-columns:auto 1fr;gap:6px 40px;align-items:start}
#map .day-panel .panel-day{grid-column:1;color:var(--copper)}
#map .day-panel h3{grid-column:1;margin:4px 0 0;max-width:15ch}
#map .day-panel .where{grid-column:1}
#map .day-panel ul{grid-column:2;grid-row:1 / span 3;columns:2;column-gap:36px;padding-left:18px}
#map .day-panel li{break-inside:avoid;margin-bottom:10px}

@media (max-width:900px){
  .rib-scroll{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .rib-days{grid-template-columns:repeat(6,62vw)}
  .rib-day{scroll-snap-align:center}
  .rib-line{left:0;right:0}
  #map .day-panel{grid-template-columns:1fr}
  #map .day-panel ul{grid-column:1;grid-row:auto;columns:1}
}
.rib-day button{display:grid;grid-template-rows:118px auto auto auto 1fr;justify-items:center}
.rib-title{max-width:14ch}
.rib-where{max-width:18ch}
.rib-title{min-height:2.35em;display:flex;align-items:flex-start;justify-content:center}
.rib-where{min-height:2.7em}

/* ---- Stop stepper ---- */
.stepper{display:grid;grid-template-columns:1.55fr .95fr;gap:34px;align-items:stretch}
.step-stage{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--plum);
  aspect-ratio:3/2;box-shadow:0 26px 60px rgba(65,32,60,.26)}
.step-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.04) translateX(0);transition:opacity .5s ease,transform .8s ease}
.step-img.on{opacity:1;transform:scale(1) translateX(0)}
.step-img.from-right{transform:scale(1.06) translateX(26px)}
.step-img.from-left{transform:scale(1.06) translateX(-26px)}
.step-chip{position:absolute;left:16px;top:16px;background:rgba(250,247,241,.94);border-radius:9px;
  padding:6px 13px;font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
.step-flip{position:absolute;right:16px;top:16px;border:0;border-radius:99px;cursor:pointer;
  background:rgba(250,247,241,.92);color:var(--plum);font:500 11px var(--sans);letter-spacing:.04em;padding:7px 14px}
.step-flip .flip-off{display:none}
.stepper.is-building .step-flip .flip-on{display:none}
.stepper.is-building .step-flip .flip-off{display:inline}
.step-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;
  border-radius:50%;background:rgba(250,247,241,.9);color:var(--plum);font-size:26px;line-height:1;
  cursor:pointer;transition:background .2s,transform .2s}
.step-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.step-nav.prev{left:14px}
.step-nav.next{right:14px}
.step-side{display:flex;flex-direction:column;justify-content:center;padding:6px 0}
.step-count{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin:0}
.step-side h3{font:600 clamp(26px,3vw,36px)/1.1 var(--serif);color:var(--plum);margin:10px 0 6px}
.step-city{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7a6f79;margin:0 0 16px}
.step-note{font-size:16px;line-height:1.6;margin:0 0 16px;max-width:34ch}
.step-day{font-size:13px;color:#6c5f6a;border-top:1px solid var(--line);padding-top:14px;margin:0 0 22px}
.step-side .button{align-self:flex-start}
.step-rail{list-style:none;display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin:26px 0 0;padding:0}
.step-rail button{width:100%;background:none;border:0;cursor:pointer;padding:10px 2px 0;
  border-top:2px solid var(--line);font-family:var(--sans);color:#8a7d88;transition:border-color .25s,color .25s}
.step-rail button b{display:block;font:600 13px var(--serif)}
.step-rail button span{display:block;font-size:10px;letter-spacing:.04em;margin-top:2px}
.step-rail button.done{border-top-color:#d9bfae;color:#6c5f6a}
.step-rail button[aria-current="true"]{border-top-color:var(--copper);color:var(--plum)}
.step-rail button[aria-current="true"] b{color:var(--copper)}
@media (max-width:900px){
  .stepper{grid-template-columns:1fr;gap:20px}
  .step-side{padding:0}
  .step-rail{grid-template-columns:repeat(9,1fr);gap:5px}
  .step-rail button span{display:none}
}
@media (prefers-reduced-motion:reduce){.step-img{transition:opacity .2s ease;transform:none!important}}

.step-rail{margin-bottom:14px}
.campuses{padding-bottom:18px}

/* Client preview visual QA: section breaks and consistent itinerary card grids. */
.trip-hero h1{line-height:1.05}
.trip-stats{display:grid;grid-template-columns:1.2fr .85fr .7fr 1.55fr;gap:24px;padding-bottom:0}
.trip-stats span{display:block;line-height:1.5;margin-top:8px}
.trip-hero-art figcaption{max-width:calc(100% - 28px);line-height:1.4}
.days{padding-block:72px 80px}
.included{padding-top:0}
.day-body{padding:24px}
.day-body h3{min-height:2.3em}
.day-tags{min-height:60px;align-content:flex-start}
.day-tags span{max-width:100%;line-height:1.4}
.day-card li:last-child{margin-bottom:0}
.price-card{padding:32px}
.price{line-height:1.15}
.closing{padding-block:72px 80px}
.closing p{max-width:64ch;margin-inline:auto}
@media(max-width:900px){
  .trip-hero-copy{max-width:none}
}
@media(max-width:760px){
  .trip-hero{padding-block:36px 24px;gap:32px}
  .trip-hero .eyebrow{font-size:9px;letter-spacing:2px;gap:14px}
  .trip-hero h1{font-size:40px;line-height:1.08;margin-top:0;margin-bottom:20px}
  .trip-stats{grid-template-columns:1fr 1fr;gap:24px 20px;padding-top:24px}
  .trip-stats span{font-size:10px;letter-spacing:.06em}
  .hero-actions{display:grid;grid-template-columns:1fr;margin-top:28px;gap:12px}
  .trip-hero-art figcaption{font-size:10px;left:12px;bottom:12px;max-width:calc(100% - 24px)}
  .days{padding-block:56px}
  .day-body{padding:24px 22px}
  .day-body h3{min-height:0;line-height:1.2}
  .day-tags{min-height:0;margin-bottom:20px}
  .included-grid{gap:32px}
  .price-card{padding:28px 24px}
  .closing{padding-block:56px 64px}
}

/* This page's nav has four links, which fit one row on a 375px phone (measured: 304px of links in
   338px). The shared three-column grid in styles.css is sized for the home page's five and left
   "For Families" alone on a second row here. */
@media (max-width:760px){
  .header nav{display:flex;justify-content:space-between;gap:0 8px}
  .header nav a{white-space:nowrap}
}

.closing-actions{justify-content:center}
/* The other departure, under the hero buttons; the Chicago price card's plan note. */
.other-departure{margin:18px 0 0;font-size:14px;color:#5b4e57}
.other-departure a{color:var(--copper);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.other-departure a span{display:inline-block;text-decoration:none;margin-left:2px}
.price-card .plan-note{font-size:14px;line-height:1.55;margin:4px 0 22px}
/* Travel dates never wrap (Dustin, 2026-10-08): figures stay on one line; the first three columns take
   their content's width; on phones the figures scale down to fit half the row. */
.trip-stats b{white-space:nowrap}
.trip-stats{grid-template-columns:max-content max-content max-content minmax(0,1fr)}
@media(max-width:760px){.trip-stats{grid-template-columns:1fr 1fr}.trip-stats b{font-size:clamp(22px,6.6vw,30px)}}
@media(min-width:761px) and (max-width:1200px){.trip-stats{gap:18px}.trip-stats b{font-size:clamp(22px,2.5vw,30px)}}