:root{
  /* PREMIUM RE-SKIN 2026.3 — off generic transport navy/orange.
     Ink black + one restrained gold. Every pair below is contrast-tested;
     see design-system/shuttle-seattle/MASTER.md for the table. */
  --navy:#1C1917; --navy2:#292524; --steel:#3F3A36;   /* legacy names, new values */
  --ink:#1C1917; --ink2:#57534E; --ink3:#78716C;
  --paper:#ffffff; --wash:#FAFAF9; --line:#E7E5E4;

  /* Interactive = ink. Monochrome reads more expensive than a second hue. */
  --blue:#1C1917; --blue2:#3F3A36;
  /* The ONE accent. Primary action only. White text on it = 4.92:1.
     NEVER place --gold on a dark surface — use --gold-dk (7.55:1 on ink). */
  --orange:#A16207; --gold:#A16207; --gold-hi:#854D0E; --gold-dk:#D4A24C;
  --on-orange:#ffffff;

  --green:#15803D; --star:#9c6100; --danger:#B3241A; --muted-mark:#78716C;
  --on-dark:#D6D3D1; --on-dark2:#AEA8A3;

  /* Selection/icon wash. A neutral stone tint, not a warm cream — cream+serif
     is the current AI "tasteful default"; this stays in the stone/ink family. */
  --tint:#F5F5F4;
  --r:10px; --r-lg:14px; --maxw:1240px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  --sans:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  /* Archivo: a squared grotesque with a signage/wayfinding feel — headings
     should read like transit lettering, not a boutique serif. Deliberate. */
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --e1:0 10px 24px -20px rgba(28,25,23,.55);
  --e2:0 40px 80px -40px rgba(28,25,23,.55);
}
/* Display face carries headings only. Inter carries every number, so the
   fare reads like a printed tariff rather than a settings panel. */
h1,h2,.kicker,.quote b,.bigprice b{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
h1,h2{line-height:1.12}
.quote b,.bigprice b{font-variant-numeric:tabular-nums}

/* Restored — the palette rewrite clobbered these two utility rules.
   Without .visually-hidden the screen-reader-only step headings render on screen. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Every fare, distance, duration and count. Proportional figures make a rate
   table shimmer as the eye scans a column; tabular figures read as published. */
.quote b,.vi .p,td.p,td.num,.stepper output,.hstats b,table,.summary,.ref,.money,
.readout b,.calcout td,.calcout .vs b{
 font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* breadcrumb links get a real touch area */
.crumbs a{display:inline-block;padding:.6rem .1rem;min-height:44px;line-height:1.9}
*{box-sizing:border-box}
/* Any class that sets `display` outbeats the UA stylesheet's [hidden]{display:none}.
   #retWrap carries .row (display:grid), so the return date and time fields rendered
   on a one-way trip. Global, because every conditional field in the flow is at risk. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:800}
a{color:inherit;text-decoration:none}
button,a,label,summary{cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.wrap{width:min(100% - var(--s3),var(--maxw));margin-inline:auto}
.dim{color:var(--ink2)}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;border:2px solid var(--orange);
 background:var(--orange);color:var(--on-orange);font:inherit;font-weight:800;font-size:.95rem;padding:.7rem 1.4rem;border-radius:var(--r);
 transition:background .18s,color .18s,transform .12s,box-shadow .18s;box-shadow:0 6px 16px -8px rgba(161,98,7,.9)}
.btn:hover{background:#854D0E;border-color:#854D0E;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 16px -8px rgba(28,25,23,.9)}
.btn.blue:hover{background:var(--blue2);border-color:var(--blue2)}
.btn.out{background:transparent;color:var(--navy);border-color:var(--line)}
.btn.out:hover{border-color:var(--navy);background:var(--wash)}
.btn.ghostw{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn.ghostw:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn.sm{min-height:40px;padding:.5rem 1rem;font-size:.85rem}

/* top utility bar */
.util{background:var(--navy);color:#D6D3D1;font-size:.9rem}
.util .wrap{display:flex;gap:1.2rem;align-items:center;padding:0;flex-wrap:wrap;min-height:44px}
.util a{color:#fff;font-weight:700;display:inline-flex;align-items:center;
 min-height:44px;padding:0 .15rem}   /* the phone number is a control, not prose */
.util .sep{opacity:.35}
.util .live{color:#8FD3A8;display:inline-flex;align-items:center;gap:.4rem}
.util .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#8FD3A8;animation:pulse 1.9s infinite}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}

header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.stuck{box-shadow:var(--e1)}
nav{display:flex;align-items:center;gap:var(--s3);padding:.6rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:1.42rem;letter-spacing:-.03em;color:var(--navy)}
.logo{min-height:44px}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
/* Brand mark = the SS monogram, drawn with a CSS mask so it recolours per
   surface: brand navy on the light header, white on the dark footer. */
.logo .mk{width:53px;height:44px;background:#0A2550;
 -webkit-mask:url(logo-ss.png) left center/contain no-repeat;
 mask:url(logo-ss.png) left center/contain no-repeat}
.logo small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.logo small.aka{font-size:.8rem;font-weight:900;letter-spacing:0;text-transform:none;color:var(--navy);margin-top:.06rem}
footer .logo small.aka{color:#fff}
.navlinks{margin-left:auto;display:flex;gap:1.7rem;font-size:.99rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.navlinks a:hover{color:var(--blue)}
.phonebtn{display:flex;align-items:center;gap:.5rem;font-weight:900;font-size:1.18rem;letter-spacing:-.01em;color:var(--navy)}
.phonebtn small{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.burger{display:none;margin-left:auto;min-width:44px;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--navy)}

/* hero */
.hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 55%,var(--steel) 100%);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
 background:radial-gradient(60% 70% at 88% 20%,rgba(21,148,232,.35),transparent 60%),
            radial-gradient(50% 60% at 10% 90%,rgba(161,98,7,.18),transparent 65%)}
.heroart{position:absolute;right:0;bottom:0;width:min(58%,760px);opacity:.5;pointer-events:none}
.heroart svg{display:block;width:100%;height:auto}
.hgrid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s4);padding:var(--s5) 0;align-items:start}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem);letter-spacing:-.03em}
.hsub{margin:var(--s2) 0 var(--s3);color:#D6D3D1;font-size:1.06rem;max-width:46ch}
.ticks{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;max-width:46ch}
.ticks li{display:flex;gap:.5rem;align-items:flex-start;font-size:.94rem;color:#E7E5E4}
.ticks svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:#8FD3A8}
.hstats{display:flex;flex-wrap:wrap;gap:0;border:1px solid rgba(255,255,255,.18);border-radius:var(--r);overflow:hidden;max-width:520px}
.hstats div{flex:1 1 120px;padding:.8rem 1rem;border-right:1px solid rgba(255,255,255,.18)}
.hstats div:last-child{border-right:0}
.hstats b{display:block;font-size:1.5rem;letter-spacing:-.03em}
.hstats span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#AEA8A3}

/* quote widget */
/* The only level-2 shadow on the site. That is what makes it the signature element. */
.quotebox{background:#fff;color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--e2);overflow:hidden;scroll-margin-top:84px}
.qhead{background:var(--wash);border-bottom:1px solid var(--line);padding:.9rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.qhead h2{font-size:1.12rem}
.qhead .badge{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:#EAF3EC;border-radius:999px;padding:.25rem .6rem}
.qbody{padding:1.1rem}
.prog{display:flex;gap:.35rem;margin-bottom:.9rem}
.prog i{height:5px;flex:1;border-radius:99px;background:var(--line);transition:background .3s}
.prog i.on{background:var(--blue)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin-bottom:.85rem}
.seg button{min-height:44px;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);font:inherit;font-size:.86rem;font-weight:700;color:var(--ink2);transition:.18s}
.seg button[aria-checked=true]{border-color:var(--blue);background:var(--tint);color:var(--navy);box-shadow:inset 0 0 0 1px var(--blue)}
.field{margin-bottom:.65rem}
.field label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:.3rem}
.inp{width:100%;min-height:46px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:.6rem .8rem;transition:border-color .18s,box-shadow .18s}
.inp:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,25,23,.16)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
 background-position:calc(100% - 18px) 53%,calc(100% - 13px) 53%;background-size:5px 5px;background-repeat:no-repeat}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden}
.stepper button{width:40px;min-height:44px;border:0;background:var(--wash);font:inherit;font-size:1.15rem;font-weight:800;color:var(--navy)}
.stepper button:hover{background:#F0EDE8}
.stepper output{flex:1;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.retline{display:flex;align-items:center;gap:.55rem;min-height:44px;font-size:.9rem;font-weight:600;color:var(--ink2)}
.retline input{width:20px;height:20px;accent-color:var(--blue)}
/* Distance + duration, shown before vehicle selection. The single best trust
   signal in the flow: it proves the fare is computed, not invented. */
.readout{display:flex;gap:0;border:1.5px solid var(--line);border-radius:var(--r);background:var(--wash);margin:.15rem 0 .7rem;overflow:hidden}
.readout div{flex:1;padding:.5rem .8rem;border-right:1px solid var(--line)}
.readout div:last-child{border-right:0}
.readout span{display:block;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.readout b{font-size:1rem;color:var(--navy);letter-spacing:-.01em}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.86rem;color:var(--ink2)}
.perks li{display:flex;gap:.5rem;align-items:flex-start}
.perks svg{width:16px;height:16px;flex:none;margin-top:.2rem;color:var(--green)}
/* was max-height:250px;overflow:auto — a scroll region with no affordance that
   clipped at exactly five classes */
.veh{display:grid;gap:.45rem}
.veh label{position:relative;display:block}
.veh input{position:absolute;opacity:0;pointer-events:none}
.vi{display:flex;gap:.7rem;align-items:center;border:1.5px solid var(--line);border-radius:var(--r);padding:.5rem .65rem;background:#fff;transition:.18s}
.veh label:hover .vi{border-color:#CFC7BC;background:var(--wash)}
.veh input:checked+.vi{border-color:var(--blue);background:var(--tint);box-shadow:inset 0 0 0 1px var(--blue)}
.vi svg.car{width:56px;height:26px;flex:none;color:var(--navy)}
.vi .n{font-weight:800;font-size:.9rem}
.vi .m{font-size:.75rem;color:var(--ink2)}
.vi .p{margin-left:auto;font-weight:800;color:var(--navy)}
/* Vehicles that cannot fit the party are disabled with a stated reason, never hidden.
   Reason text stays at --ink2 (5.46:1) — a disabled control still has to be readable. */
.veh label[aria-disabled=true]{cursor:not-allowed}
.veh label[aria-disabled=true] .vi{background:var(--wash);border-style:dashed;opacity:.85}
.veh label[aria-disabled=true]:hover .vi{border-color:var(--line);background:var(--wash)}
.vi .why{display:block;font-size:.72rem;color:var(--ink2);margin-top:.15rem}
.quote{display:flex;justify-content:space-between;align-items:center;background:var(--navy);color:#fff;border-radius:var(--r);padding:.75rem .95rem;margin:.85rem 0}
.quote small{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#AEA8A3}
/* A printed tariff, not a sale badge. */
.quote b{font-size:clamp(1.6rem,3vw,2rem);letter-spacing:-.03em;transition:none}

/* review & pay */
.bd-line{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;font-size:.9rem}
.bd-line span:first-child{color:var(--ink2)}
.bd-line.tot{border-top:1.5px solid var(--line);margin-top:.4rem;padding-top:.6rem;font-weight:800;font-size:1.05rem;color:var(--navy)}
.bd-line .inc{color:var(--green);font-weight:700;font-size:.82rem}
.tip{border:1.5px solid var(--line);border-radius:var(--r);padding:.8rem .85rem;margin:.85rem 0}
.tip>p:first-child{margin:0 0 .55rem;font-weight:800;font-size:.9rem;color:var(--navy)}
.tipbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.tipbtns button{min-height:48px;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);
 font:inherit;font-size:.82rem;font-weight:700;color:var(--ink2);line-height:1.25;transition:.18s}
.tipbtns button b{display:block;font-size:.92rem;color:var(--navy);font-variant-numeric:tabular-nums}
/* Nothing is pre-selected. A pre-checked tip is a dark pattern and generates chargebacks. */
.tipbtns button[aria-pressed=true]{border-color:var(--blue);background:var(--tint);color:var(--navy);box-shadow:inset 0 0 0 1px var(--blue)}
.tip p.tipnote{margin:.5rem 0 0;font-size:.78rem;font-weight:400;color:var(--ink2)}
.paybox{border:1.5px dashed var(--line);border-radius:var(--r);background:var(--wash);padding:.9rem;margin:.85rem 0}
.paybox p{margin:0;font-size:.85rem;color:var(--ink2)}
.paybox .pm{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.paybox .pm span{border:1px solid var(--line);background:#fff;border-radius:6px;padding:.3rem .6rem;font-size:.75rem;font-weight:700;color:var(--ink2)}
/* Cancellation policy sits inline above the pay button, never behind a link. */
.policy{font-size:.82rem;color:var(--ink2);background:var(--wash);border-left:3px solid var(--blue);
 border-radius:0 6px 6px 0;padding:.55rem .7rem;margin:.6rem 0 0}
.callout{border:1.5px solid #E3D8BF;background:#FBF7EF;border-radius:var(--r);padding:.75rem .85rem;font-size:.88rem;color:var(--ink)}
.callout a{font-weight:800;color:var(--blue);text-decoration:underline}
.act{display:flex;gap:.55rem;margin-top:.8rem}.act .btn{flex:1}
.hint{font-size:.78rem;color:var(--ink2);text-align:center;margin:.6rem 0 0}
.err{font-size:.82rem;color:#B3241A;text-align:center;margin:.5rem 0 0;min-height:1.1em;font-weight:600}
.summary{border:1px solid var(--line);border-radius:var(--r);background:var(--wash);padding:.8rem .9rem;font-size:.88rem}
.summary div{display:flex;justify-content:space-between;gap:1rem;padding:.18rem 0}
.summary div span:first-child{color:var(--ink2)}
.done{text-align:center;padding:.3rem 0}
.tick{width:66px;height:66px;border-radius:50%;background:#EAF3EC;color:var(--green);display:grid;place-items:center;margin:0 auto .8rem;animation:pop .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes pop{from{transform:scale(0);opacity:0}}
.ref{font-family:ui-monospace,Menlo,monospace;font-size:1.25rem;letter-spacing:.14em;font-weight:700;color:var(--navy)}

/* trust strip */
.trust{background:var(--wash);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;padding:1rem 0}
.trust .lbl{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.logos{display:flex;flex-wrap:wrap;gap:.6rem}
.plogo{border:1.5px dashed var(--line);border-radius:8px;padding:.5rem .9rem;font-weight:800;color:var(--muted-mark);font-size:.85rem;letter-spacing:.06em;background:#fff}

section{padding:var(--s5) 0}
.shead{max-width:60ch;margin-bottom:var(--s4)}
.shead h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.6rem 0 .7rem;color:var(--navy)}
.center{margin-inline:auto;text-align:center}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--s2)}
/* Three card families ran the same translateY(-4px). Only .scard keeps the lift —
   it is navigational, so the lift means "clicking this goes somewhere". */
.wcard{border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;background:#fff;transition:border-color .2s}
.wcard:hover{border-color:#CFC7BC}
.wcard .ic{width:46px;height:46px;border-radius:10px;background:var(--tint);color:var(--blue);display:grid;place-items:center;margin-bottom:.8rem}
.wcard h3{font-size:1.05rem;margin-bottom:.35rem;color:var(--navy)}
.wcard p{margin:0;font-size:.93rem;color:var(--ink2)}

.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s2)}
.scard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.scard:hover{transform:translateY(-4px);box-shadow:0 24px 40px -32px rgba(28,25,23,.8)}
.scard .top{background:linear-gradient(150deg,var(--navy),var(--steel));padding:1.1rem;color:#fff}
.scard .top h3{font-size:1.05rem}
.scard .top .price{font-size:.82rem;color:#AEA8A3;margin-top:.2rem}
.scard .bd{padding:1rem 1.1rem 1.2rem;font-size:.92rem;color:var(--ink2);flex:1}
.scard a.more{display:inline-block;margin:0 1.1rem 1.1rem;font-weight:800;color:var(--blue);font-size:.9rem}

.pricegrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s2)}
.bigprice{border-radius:var(--r);padding:var(--s4);background:linear-gradient(150deg,var(--navy),var(--steel));color:#fff;display:flex;flex-direction:column;gap:.7rem}
/* was clamp(3rem,6vw,4.6rem) — a 4.6rem number is a sale. This is a tariff. */
.bigprice b{font-size:clamp(2.2rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bigprice b small{font-size:.95rem;letter-spacing:.06em;color:#AEA8A3;margin-left:.35rem}
.bigprice p{margin:0;color:#D6D3D1;font-size:.95rem;max-width:34ch}
.bigprice .btn{margin-top:auto;align-self:flex-start}
.partytable{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:var(--s3);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{text-align:left;padding:.75rem .7rem;border-bottom:1px solid var(--line)}
th{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);background:var(--wash)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--wash)}
td.p{font-weight:800;color:var(--navy)}
.tablewrap{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow-x:auto}
.tablewrap table{min-width:560px}
.tablewrap th,.tablewrap td{padding:.85rem 1rem}

.fleet{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s2)}
.fc{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:1.1rem;text-align:center;transition:border-color .2s}
.fc:hover{border-color:#CFC7BC}
.fc svg.car{width:100%;height:64px;color:var(--navy)}
.fc h3{font-size:1rem;margin:.5rem 0 .3rem;color:var(--navy)}
.fc .caps{display:flex;justify-content:center;gap:.9rem;font-size:.82rem;color:var(--ink2)}
.fc .caps span{display:inline-flex;align-items:center;gap:.3rem}
.fc .caps svg{width:15px;height:15px;color:var(--blue)}
.fc .pr{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line);font-weight:800;color:var(--navy)}
.fc .pr small{display:block;font-weight:600;font-size:.72rem;color:var(--ink2)}

.areas{background:var(--wash);border-block:1px solid var(--line)}
.arealist{display:flex;flex-wrap:wrap;gap:.5rem}
.arealist a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.45rem .9rem;font-size:.88rem;font-weight:600;color:var(--ink);transition:.18s}
.arealist a:hover{border-color:var(--blue);color:var(--blue);background:var(--tint)}

.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--s2)}
.rev{border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;background:#fff}
.stars{color:var(--star);letter-spacing:.12em;margin-bottom:.5rem}
.rev p{margin:0 0 .8rem;font-size:.96rem}
.rev cite{font-style:normal;font-size:.85rem;color:var(--ink2);font-weight:700}

.qrsec{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;background:linear-gradient(150deg,var(--navy),var(--steel));border-radius:14px;padding:var(--s4);color:#fff}
.qrbox{position:relative;background:#fff;border-radius:12px;padding:14px}
.qrbox img{width:180px;height:180px;display:block}
.qrbox::after{content:"";position:absolute;left:14px;right:14px;height:3px;border-radius:3px;background:var(--blue2);animation:scan 2.8s ease-in-out infinite}
@keyframes scan{0%,100%{top:16px}50%{top:180px}}
.qrsec h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
.qrsec p{color:#D6D3D1;max-width:50ch}

details{border-bottom:1px solid var(--line)}
summary{list-style:none;padding:1.1rem 0;font-weight:800;color:var(--navy);display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;color:var(--blue);font-weight:700}
details[open] summary::after{content:"–"}
details p{margin:0 0 1.1rem;color:var(--ink2);max-width:74ch}

.cta{background:linear-gradient(150deg,var(--navy),var(--steel));color:#fff;text-align:center;padding:var(--s5) 0}
.cta h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:.8rem}
.cta p{color:#D6D3D1;max-width:52ch;margin:0 auto var(--s3)}

footer{background:var(--navy);color:#AEA8A3;padding:var(--s5) 0 5.5rem;font-size:.92rem}
footer .logo{color:#fff}
footer .logo .mk{background:#fff;color:var(--navy)}
footer .logo small{color:#AEA8A3}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s3);margin-bottom:var(--s4)}
.fgrid h3{color:#fff;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .8rem}
.fgrid a{display:flex;align-items:center;padding:.2rem 0;min-height:44px}
.fgrid a:hover{color:#fff}
.froutes{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;margin:0 0 var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;line-height:1.5}
.froutes>span{opacity:.6;font-weight:700}
.froutes a{opacity:.78}
.froutes a:hover{opacity:1;color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.14);padding-top:1.2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.8rem}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.55rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -18px rgba(28,25,23,.9)}
.mbar .btn{flex:1}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1000px){
 .hgrid,.pricegrid,.qrsec{grid-template-columns:1fr}
 .heroart{display:none}
 .qrsec{justify-items:center;text-align:center}
 .navlinks{display:none}.burger{display:grid;place-items:center}
 /* Customer ask 2026-08-06: phone number stays visible and bold on mobile. */
 nav{gap:.5rem;justify-content:space-between}
 nav .phonebtn{font-size:1.04rem;gap:.3rem}
 nav .phonebtn svg{display:none}
 nav .phonebtn small{font-size:.56rem;letter-spacing:.05em}
 .fgrid{grid-template-columns:1fr 1fr}.mbar{display:flex}
 .ticks{grid-template-columns:1fr}
 /* Anything under 16px triggers iOS zoom-on-focus. One hand, an airport, 4am. */
 .inp,.stepper output{font-size:16px}
 .tipbtns{grid-template-columns:repeat(2,1fr)}
 /* clear the mobile action bar */
 main{padding-bottom:4rem}
 /* The wordmark wrapped to two lines, pushing the sticky header to 110px and
    tucking the widget heading underneath it on scrollIntoView. */
 .logo>span:last-child{white-space:nowrap}
 .logo{font-size:1.08rem;gap:.45rem}
 .logo .mk{width:46px;height:38px}
 .logo small{font-size:.56rem}
 .logo small.aka{font-size:.7rem}
 .quotebox{scroll-margin-top:100px}
 /* The header CTA duplicates the fixed bottom bar on mobile. Dropping it keeps
    orange to one job per viewport instead of three competing buttons. */
 nav>a.btn{display:none}
}
@media(max-width:389px){
 /* very narrow phones: number keeps priority, decorations yield */
 nav .phonebtn small{display:none}
 nav .phonebtn{font-size:.98rem}
 .logo{font-size:1.02rem}
 .logo small.aka{font-size:.66rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* ==========================================================================
   PREMIUM LAYER — photography system, fleet plates, motion, hotel program
   ========================================================================== */

/* --- Photography slots -----------------------------------------------------
   Every vehicle image lives in a fixed-ratio plate so swapping an illustration
   for a real photograph never shifts layout (CLS stays at 0). Drop a real shot
   in as assets/fleet/<id>.webp and the <img> takes over from the <svg>. */
.plate{position:relative;aspect-ratio:16/7;border-radius:12px;overflow:hidden;
 background:radial-gradient(120% 90% at 50% 15%,#f7fafd 0%,#e7eef6 55%,#E7E5E4 100%);
 display:grid;place-items:center;isolation:isolate}
.plate::after{content:"";position:absolute;left:8%;right:8%;bottom:9%;height:1px;
 background:linear-gradient(90deg,transparent,rgba(28,25,23,.16),transparent)}
.plate svg,.plate img{width:86%;height:auto;display:block;position:relative;z-index:1}
.plate img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.plate .tagpx{position:absolute;z-index:2;left:10px;top:10px;font-size:.6rem;font-weight:800;
 letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);background:rgba(255,255,255,.82);
 border:1px solid var(--line);border-radius:99px;padding:.2rem .5rem}
.plate.dark{background:radial-gradient(120% 90% at 50% 12%,#1c3e5e 0%,#12314c 55%,#1C1917 100%)}
.plate.dark::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}

/* --- Fleet cards ----------------------------------------------------------- */
.fleet{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:var(--s3)}
.fcard{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;
 display:flex;flex-direction:column;transition:border-color .25s}
.fcard:hover{border-color:#CFC7BC}
.fcard .body{padding:1.05rem 1.15rem 1.25rem}
.fcard h3{font-size:1.08rem;color:var(--navy);margin-bottom:.15rem}
.fcard .eg{font-size:.78rem;color:var(--ink2);margin:0 0 .8rem}
.fcard .caps{display:flex;gap:1.3rem;padding:.7rem 0;border-block:1px solid var(--line)}
.fcard .caps b{display:block;font-size:1.25rem;color:var(--navy);letter-spacing:-.02em;
 font-variant-numeric:tabular-nums;line-height:1.1}
.fcard .caps span{font-size:.65rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.fcard ul{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.3rem;font-size:.85rem;color:var(--ink2)}
.fcard ul li{display:flex;gap:.45rem;align-items:flex-start}
.fcard ul svg{width:14px;height:14px;flex:none;margin-top:.25rem;color:var(--green)}

/* --- Editorial / emotional blocks ------------------------------------------ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s5);align-items:center}
.split.flip>*:first-child{order:2}
.lede{font-size:1.12rem;line-height:1.65;color:var(--ink2);max-width:52ch}
.lede strong{color:var(--navy);font-weight:700}
.kicker{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.25;letter-spacing:-.02em;
 font-weight:800;color:var(--navy);max-width:20ch}
.scene{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;
 background:linear-gradient(165deg,var(--navy) 0%,var(--navy2) 52%,var(--steel) 100%)}
.scene svg{position:absolute;inset:0;width:100%;height:100%}
.scene .cap{position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.2rem;color:#fff;
 background:linear-gradient(transparent,rgba(16,14,13,.82));font-size:.9rem}

/* --- Hotel partner program ------------------------------------------------- */
.hotelband{background:linear-gradient(165deg,#141110 0%,var(--navy) 45%,var(--steel) 100%);color:#fff}
.hotelband .shead h2,.hotelband h3{color:#fff}
.hotelband .dim,.hotelband p{color:#D6D3D1}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:var(--s2)}
.tier{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
 padding:1.15rem;display:flex;flex-direction:column;gap:.5rem}
.tier .ic{width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.12);
 display:grid;place-items:center;color:#fff}
.tier h3{font-size:1rem}
.tier p{margin:0;font-size:.88rem;color:#bed3e6}
.tier .who{margin-top:auto;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.14);
 font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#AEA8A3}
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.7rem 1.6rem;
 margin-top:var(--s3)}
.incl li{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;color:#D6D3D1}
.incl svg{width:16px;height:16px;flex:none;margin-top:.25rem;color:#8FD3A8}
.incl{list-style:none;padding:0}

/* --- Hotel cost calculator -------------------------------------------------- */
.calc{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s3);align-items:start}
.calcform{background:#fff;border-radius:var(--r-lg);padding:1.2rem;box-shadow:var(--e2);color:var(--ink)}
.calcform h3{color:var(--navy);font-size:1.05rem;margin-bottom:.8rem}
.calcout{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
 border-radius:var(--r-lg);padding:1.2rem;overflow-x:auto}
.calcout table{width:100%;font-size:.92rem}
.calcout th,.calcout td{border-bottom:1px solid rgba(255,255,255,.13);color:#D6D3D1;background:none}
.calcout th{color:#AEA8A3}
.calcout td.p{color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.calcout tr.grand td{border-top:2px solid rgba(255,255,255,.3);border-bottom:0;
 font-weight:800;font-size:1.05rem;color:#fff;padding-top:.8rem}
.calcout .vs{margin-top:1rem;background:rgba(143,211,168,.12);border:1px solid rgba(143,211,168,.34);
 border-radius:var(--r);padding:.85rem .95rem;font-size:.92rem;color:#dff5e8}
.calcout .vs b{color:#fff;font-variant-numeric:tabular-nums}

/* --- Motion ----------------------------------------------------------------
   One orchestrated moment stays the fare resolving. Everything here is entrance
   only: it plays once, never on scroll-back, and is fully disabled by
   prefers-reduced-motion below. */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes deskIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-38px,0,0)}}
.hero .eyebrow,.hero h1,.hero .hsub,.hero .ticks,.hero .hstats,.hero .heronote{
 animation:riseIn .72s cubic-bezier(.2,.75,.3,1) both}
.hero h1{animation-delay:.06s}
.hero .hsub{animation-delay:.13s}
.hero .ticks{animation-delay:.2s}
.hero .hstats{animation-delay:.27s}
.hero .heronote{animation-delay:.33s}
.quotebox{animation:deskIn .8s cubic-bezier(.2,.75,.3,1) .1s both}
.heroart{animation:fadeIn 1.4s ease .2s both}
.heroart .skyline{animation:drift 42s linear infinite alternate}
.rise{opacity:0;transform:translateY(20px)}
.rise.in{animation:riseIn .66s cubic-bezier(.2,.8,.3,1) both}

@media(max-width:1000px){
 .split,.calc{grid-template-columns:1fr;gap:var(--s3)}
 .split.flip>*:first-child{order:0}
 .plate{aspect-ratio:16/8}
}
@media(prefers-reduced-motion:reduce){
 .hero .eyebrow,.hero h1,.hero .hsub,.hero .ticks,.hero .hstats,.hero .heronote,
 .quotebox,.heroart,.rise,.rise.in{animation:none!important;opacity:1;transform:none}
 .heroart .skyline{animation:none!important}
}

/* --- Answer-engine "in thirty seconds" block -------------------------------- */
.thirty{list-style:none;counter-reset:t;margin:0;padding:0;
 display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s3) var(--s4)}
.thirty li{counter-increment:t;position:relative;padding-left:2.6rem;font-size:.96rem;color:var(--ink2)}
.thirty li::before{content:counter(t);position:absolute;left:0;top:-.1rem;width:1.85rem;height:1.85rem;
 border-radius:50%;background:var(--wash);border:1px solid var(--line);color:var(--navy);
 font-size:.82rem;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.thirty b{color:var(--navy);display:block;margin-bottom:.15rem}

/* --- Editorial band --------------------------------------------------------- */
.band{background:var(--wash);border-block:1px solid var(--line);padding:var(--s5) 0;margin:var(--s5) 0}

/* --- Popular route cards — destination and drive time, never a price --------- */
.routegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s2)}
.rcard{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:1.1rem 1.15rem;
 display:flex;flex-direction:column;gap:.3rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.rcard:hover{transform:translateY(-4px);box-shadow:0 24px 40px -32px rgba(28,25,23,.8);border-color:#CFC7BC}
.rcard .to{font-weight:800;font-size:1.05rem;color:var(--navy);letter-spacing:-.01em}
.rcard .meta{font-size:.82rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.rcard .go{margin-top:.5rem;display:inline-flex;align-items:center;gap:.35rem;
 font-size:.85rem;font-weight:800;color:var(--blue)}

/* --- Cruise pier cards ------------------------------------------------------ */
.pier h3{font-size:1.1rem;color:var(--navy);margin:.9rem 0 .35rem}
.pier p{margin:0;font-size:.93rem}

/* --- Comparison table ------------------------------------------------------- */
td.yes,td.no{font-weight:700}
td.yes{color:var(--navy)}
td.no{color:var(--ink2)}
td.yes::before{content:"✓";color:var(--green);font-weight:800;margin-right:.45rem}
td.no::before{content:"✕";color:var(--danger);font-weight:800;margin-right:.45rem}

/* --- misc widget bits ------------------------------------------------------- */
.optset{border:1.5px solid var(--line);border-radius:var(--r);padding:.7rem .8rem;margin:0 0 .65rem}
.optset legend{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink2);padding:0 .3rem}
code{font-family:var(--mono);font-size:.86em;background:var(--wash);border:1px solid var(--line);
 border-radius:5px;padding:.1em .35em}

/* --- Interior page header ---------------------------------------------------- */
.pagehead{background:linear-gradient(165deg,var(--navy) 0%,var(--navy2) 55%,var(--steel) 100%);
 color:#fff;padding:var(--s5) 0 calc(var(--s5) + var(--s2))}
.pagehead h1{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.03em;margin:.7rem 0 0}
.pagehead .hsub{margin:var(--s2) 0 0;max-width:60ch}
.pagehead .hsub strong{color:#fff}
.crumbs{font-size:.8rem;color:#AEA8A3;margin-bottom:var(--s2)}
.crumbs a{color:#D6D3D1;font-weight:700}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.6;margin:0 .35rem}

/* provisional figures awaiting client sign-off */
.prov{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:#7a5300;background:#fdf0d5;border:1px solid #f0d9a8;border-radius:99px;padding:.12rem .45rem;
 vertical-align:middle;margin-left:.35rem}

/* tiers on a light background (hotels.html #programs) */
.tiers.dark .tier{background:#fff;border-color:var(--line)}
.tiers.dark .tier h3{color:var(--navy)}
.tiers.dark .tier p{color:var(--ink2)}
.tiers.dark .tier .ic{background:var(--tint);color:var(--blue)}
.tiers.dark .tier .who{color:var(--blue);border-top-color:var(--line)}

/* hotel enquiry form */
.enquire{max-width:660px;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3);background:#fff}

/* ==========================================================================
   ROUND 4 — premium re-skin support, scroll choreography, honest photo slots
   ========================================================================== */

/* --- scroll progress: the page tells you where you are --------------------- */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none;background:transparent}
.scrollbar i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;
 transition:transform .08s linear}

/* --- reveal, with per-child stagger from the JS --------------------------- */
.rise{opacity:0;transform:translateY(22px)}
.rise.in{animation:riseIn .74s cubic-bezier(.2,.78,.28,1) both;animation-delay:var(--d,0ms)}

/* --- field notes: destination resolution feedback ------------------------- */
.fieldnote{margin:.35rem 0 0;font-size:.78rem;font-weight:600;display:flex;gap:.4rem;align-items:flex-start}
.fieldnote.ok{color:var(--green)}
.fieldnote.warn{color:var(--gold-hi)}
.fieldnote::before{content:"";width:6px;height:6px;border-radius:50%;margin-top:.45rem;flex:none;background:currentColor}
.gatenote{margin:0 0 .8rem;font-size:.86rem;color:var(--ink2);border-left:2px solid var(--gold);
 padding-left:.7rem;line-height:1.5}
label .dim{font-weight:600;color:var(--ink3);font-size:.76rem;letter-spacing:.02em;text-transform:none}
label .req{font-weight:800;color:var(--gold-hi);font-size:.76rem;letter-spacing:.02em}

/* --- consent block --------------------------------------------------------
   Two separate boxes. The SMS one is optional and must stay that way: a 10DLC
   reviewer loads this page and fails the campaign if the box is pre-ticked,
   required, or bundled with the terms checkbox. The dense legal sentence is
   set small but never below 13px, and the tap target is the whole row. */
.consents{display:grid;gap:.55rem;margin:.2rem 0 .9rem}
.consent{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .7rem;
 border:1.5px solid var(--line);border-radius:var(--r);background:var(--wash);
 font-size:.8125rem;line-height:1.55;color:var(--ink2);cursor:pointer;
 transition:border-color .18s ease,background .18s ease}
.consent:hover{border-color:var(--ink3)}
.consent:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(161,98,7,.14)}
.consent input{width:20px;height:20px;min-width:20px;margin-top:.12rem;accent-color:var(--gold);flex:none}
.consent:has(input:checked){background:#fff;border-color:var(--gold)}
.consent a{color:var(--gold-hi);font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.consent{padding:.7rem;font-size:.8125rem}}

/* --- photography slots: honest when empty, invisible when filled ----------
   No vehicle is ever drawn. A slot either holds a real photograph or reads as
   a reserved plate. A mediocre illustration is worse than an empty frame. */
.plate{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
 background:linear-gradient(155deg,#F4F2EF 0%,#EAE7E2 60%,#E0DCD6 100%);
 background-size:cover;background-position:center;display:grid;place-items:center;isolation:isolate}
.plate::after{content:"";position:absolute;inset:0;
 background:radial-gradient(75% 60% at 50% 0%,rgba(255,255,255,.85),transparent 70%);pointer-events:none}
.plate.dark{background:linear-gradient(155deg,#2A2522 0%,#1C1917 60%,#141110 100%)}
.plate.dark .slotlabel{color:var(--on-dark2)}
.plate.has-photo::after{background:linear-gradient(transparent 55%,rgba(20,17,16,.42))}
.slotlabel{position:absolute;bottom:.7rem;left:.85rem;z-index:2;font-size:.62rem;font-weight:700;
 letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.plate.has-photo .slotlabel{display:none}
/* capacity set large on the plate — the two numbers that decide fit, as type */

/* --- fleet: one hero card, the rest secondary ----------------------------- */
.fleet{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.fcard.hero{grid-column:1/-1}
.fcard.hero .plate{aspect-ratio:21/8}
.fcard.hero .body{padding:1.3rem 1.4rem 1.5rem}
.fcard.hero h3{font-size:1.5rem}
@media(min-width:1001px){
 .fcard.hero{display:grid;grid-template-columns:1.35fr 1fr;align-items:center}
 .fcard.hero .plate{border-radius:12px 0 0 12px;height:100%}
}

/* --- vehicle rows in the quote: photo thumbnail + recommended flag -------- */
.vi .vpic{flex:none;width:104px;height:52px;border-radius:9px;object-fit:cover;
 background:var(--wash);border:1px solid var(--line)}
.veh input:checked+.vi .vpic{border-color:var(--ink)}
.vi .vrec{display:inline-block;margin-left:.4rem;font-size:.6rem;font-weight:800;
 letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--green);
 padding:.1rem .42rem;border-radius:999px;vertical-align:middle}
.vi .vtext{min-width:0}

/* --- display type is for headings; UI stays in Inter ---------------------- */
.qhead h2,.fcard h3,.tier h3,.rcard .to,.pier h3{font-family:var(--sans);letter-spacing:-.01em}
.pagehead h1,.cta h2,.kicker{font-family:var(--display)}

/* --- restrained hover: one family lifts ---------------------------------- */
.scard:hover,.rcard:hover{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
 .scrollbar i{transition:none}
 .scard:hover,.rcard:hover{transform:none}
 [data-par]{transform:none!important}
}

/* preview-only banner (stripped when this ships for real) */
.prevbar{background:#3F3A36;color:#F5F0E6;font-size:.74rem;font-weight:700;letter-spacing:.02em;
 text-align:center;padding:.45rem .8rem;line-height:1.4}

/* ==========================================================================
   ROUND 5 — seen with real eyes for the first time. Fixes what looked wrong.
   ========================================================================== */

/* The reveal used to set opacity:0 unconditionally. If the observer never
   fired — JS error, no-JS, aggressive extension — content stayed invisible
   forever. Now only a page that has proven JS is running may hide anything. */
.rise{opacity:1;transform:none}
html.js .rise{opacity:0;transform:translateY(22px)}
html.js .rise.in{animation:riseIn .7s cubic-bezier(.2,.78,.28,1) both;animation-delay:var(--d,0ms)}

/* --- fleet card: the vehicle fills the plate, edge to edge ---------------- */
.plate{aspect-ratio:2/1;background:#141110;border-radius:12px 12px 0 0}
.plate>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.plate::after{display:none}
.plate .slotlabel{bottom:.55rem;left:.8rem;color:#7C736C;font-size:.58rem;z-index:3}
.fcard{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.fcard .body{display:flex;flex-direction:column;gap:.55rem;padding:1.05rem 1.15rem 1.15rem}
.fcard .caps2{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);
 background:var(--wash);border-radius:99px;padding:.3rem .65rem;font-size:.78rem;font-weight:700;color:var(--ink)}
.chip b{font-variant-numeric:tabular-nums}
.chip svg{width:13px;height:13px;color:var(--ink2)}
.fcard .book{margin-top:.35rem;display:flex;gap:.5rem;align-items:center}
.fcard .book .btn{flex:1;min-height:46px}
.fcard details{border:0;border-top:1px solid var(--line);margin-top:.35rem}
.fcard details summary{padding:.7rem 0 .35rem;font-size:.84rem;color:var(--ink2);font-weight:700;min-height:40px}
.fcard details summary::after{font-size:1.1rem}
.fcard details ul{margin:.1rem 0 .7rem}

/* hero fleet card keeps the split but the plate now carries the image */
@media(min-width:1001px){
 .fcard.hero .plate{border-radius:12px 0 0 12px;aspect-ratio:auto}
}

/* --- partner strip: names, set as type. Marquee drifts, pauses on hover --- */
.partners{background:var(--wash);border-block:1px solid var(--line);padding:1.4rem 0;overflow:hidden}
.partners .lbl{display:block;text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.18em;
 text-transform:uppercase;color:var(--ink2);margin-bottom:1rem}
.marquee{display:flex;gap:0;width:max-content;animation:slide 46s linear infinite}
.partners:hover .marquee,.marquee:focus-within{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.pname{display:inline-flex;align-items:center;padding:0 1.6rem;font-family:var(--display);
 font-size:1.05rem;color:var(--ink);white-space:nowrap;opacity:.75}
.pname::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);
 margin-left:1.6rem;opacity:.5}
.partners .note{display:block;text-align:center;font-size:.74rem;color:var(--ink3);margin-top:1rem}

/* --- expandable disclosure used across cards ------------------------------ */
.exp{border-top:1px solid var(--line);margin-top:.8rem}
.exp summary{padding:.75rem 0 .5rem;font-size:.85rem;font-weight:700;color:var(--blue);min-height:44px;
 display:flex;justify-content:space-between;align-items:center;gap:1rem}
.exp summary::after{content:"+";font-size:1.25rem;color:var(--gold);font-weight:700}
.exp[open] summary::after{content:"–"}
.exp p,.exp ul{margin:0 0 .8rem;font-size:.88rem;color:var(--ink2)}
.tier .exp summary{color:#fff}
.tier .exp{border-top-color:rgba(255,255,255,.16)}
.tier .exp p{color:var(--on-dark)}

/* --- mobile: 99% of traffic. Everything below is the primary case --------- */
@media(max-width:1000px){
 .plate{aspect-ratio:16/9}
 .fcard.hero .plate{aspect-ratio:16/9}
 .pname{font-size:.95rem;padding:0 1.1rem}
 .thirty{grid-template-columns:1fr;gap:var(--s2)}
 h1{font-size:clamp(1.9rem,7.5vw,2.5rem)}
 .shead h2{font-size:clamp(1.5rem,6.2vw,2rem)}
 .kicker{font-size:clamp(1.35rem,5.6vw,1.8rem)}
 section{padding:var(--s4) 0}
 .band{padding:var(--s4) 0;margin:var(--s4) 0}
 .hstats div{flex:1 1 45%}
 .util .wrap{justify-content:center;font-size:.74rem;gap:.6rem}
 .prevbar{font-size:.66rem}
}
@media(prefers-reduced-motion:reduce){ .marquee{animation:none} }

/* The vehicle must always be whole. `slice` cropped into the door lines on the
   wide hero plate; `meet` fits the art and the stage fills the remainder. */
.plate>svg{object-fit:contain}
.fcard.hero .plate{aspect-ratio:2/1}
@media(min-width:1001px){ .fcard.hero .plate{aspect-ratio:16/9;height:auto} }

/* DECISIVE: an earlier `.plate svg{width:86%;height:auto}` was still winning and
   pushing a 615px-tall SVG inside a 545px plate, cropping the vehicle. The art is
   2:1, so every plate is 2:1 and `meet` fits it exactly with no letterboxing. */
.plate{aspect-ratio:2/1!important;height:auto!important}
.plate>svg{position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;object-fit:unset}
@media(min-width:1001px){
 .fcard.hero{grid-template-columns:1.25fr 1fr;align-items:stretch}
 .fcard.hero .plate{align-self:center}
}

/* Measured 43px on a real 390px viewport — border-box plus a 1.5px border ate
   the minimum. 46px leaves headroom on every device. 99% of traffic is mobile. */
.seg button,.stepper button,.stepper output,.exp summary,details summary{min-height:46px}
.stepper{min-height:46px}

/* ==========================================================================
   ROUND 6 — real photography is in. Everything below serves the image.
   ========================================================================== */

/* Hero photograph sits under the headline. The scrim is not decoration: white
   text over an unmanaged photograph fails contrast at some point in every image. */
.hero.has-hero-photo::before{
 content:"";position:absolute;inset:0;z-index:0;
 background-image:url(fleet/hero.webp);   /* relative to THIS stylesheet, not the document */background-size:cover;background-position:center;
 opacity:.85}
.hero.has-hero-photo::after{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:linear-gradient(100deg,rgba(12,10,9,.93) 0%,rgba(12,10,9,.80) 38%,rgba(12,10,9,.42) 72%,rgba(12,10,9,.30) 100%)}
/* .heroart is absolutely positioned by design — forcing position:relative here
   dropped it into flow and shoved the entire hero content off screen. Raise the
   stacking order only; never touch its positioning. */
.hero.has-hero-photo>.wrap{position:relative;z-index:2}
.hero.has-hero-photo>.heroart{z-index:1;opacity:.22}

/* "Across Washington" showcase band — the iconic scenes get their OWN bright
   section rather than hiding behind the hero form. A large featured frame with a
   place caption, and a strip of all six visible at once as the thumbnails. */
.waband{padding:var(--s5) 0;background:var(--wash);border-block:1px solid var(--line)}
.wa-feat{position:relative;aspect-ratio:16/7;border-radius:16px;overflow:hidden;
 background:#141110 center/cover no-repeat;box-shadow:0 24px 50px -30px rgba(28,25,23,.5)}
.wa-feat::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(transparent 52%,rgba(12,10,9,.72))}
.wa-cap{position:absolute;left:1.2rem;bottom:1rem;z-index:1;color:#fff;
 font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.9rem);letter-spacing:-.01em;
 text-shadow:0 2px 14px rgba(0,0,0,.5)}
.wa-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin-top:.7rem}
@media(max-width:720px){.wa-strip{grid-template-columns:repeat(3,1fr)}}
.wa-thumb{aspect-ratio:16/10;border-radius:10px;cursor:pointer;border:2px solid transparent;
 background:#141110 center/cover no-repeat;transition:border-color .2s,transform .2s;padding:0}
.wa-thumb:hover{transform:translateY(-2px)}
.wa-thumb[aria-current="true"]{border-color:var(--gold-dk)}
.wa-thumb:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* photo slots */
.plate.has-photo{background-color:#141110}
.plate.has-photo>svg{display:none}
.scene.photo{background-size:cover;background-position:center;background-color:#141110}
.scene.photo svg{display:none}
.scene .cap{background:linear-gradient(transparent,rgba(10,8,7,.9));font-weight:600}

/* pier cards read as photography, with the name over the image */
.pier .plate{border-radius:12px}
.pier h3{margin-top:.9rem}

/* The `background:#141110` shorthand on .plate silently reset background-size to
   auto, so JS-applied photos rendered at natural size and cropped hard. Longhand only. */
.plate.has-photo{background-size:cover!important;background-position:center!important;
 background-repeat:no-repeat!important}
.scene.photo{background-size:cover!important;background-position:center!important}

/* ==========================================================================
   ROUND 7 — the four hitech-kit techniques worth keeping, folded in directly.
   Cursor spotlight, beam and bloom are deliberately NOT here: they are
   disabled on touch, and touch is 99% of this audience.
   ========================================================================== */

/* 1 — solid white headline. Gradient-clipped text is a top AI tell and it
   dropped contrast at the low stop; a trust-first transport hero wants the
   headline flat, bright and maximally legible. */
.hero h1{color:#fff}

/* 2 — gold eyebrow on dark. Branded rather than neutral. 8.33:1 on the ground,
   4.85:1 against the lightest gradient stop. */
.hero .eyebrow,.pagehead .eyebrow,.hotelband .eyebrow,.qrsec .eyebrow{color:var(--gold-dk)!important}

/* 3 — machined hairline panel: 1px border, inner top highlight, long soft
   shadow. Lifts the dark hotel band, which was the weakest surface. */
.hotelband .tier{
 background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
 border:1px solid rgba(255,255,255,.10);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 30px 60px -40px rgba(0,0,0,.9)}
.hotelband .tier:hover{border-color:rgba(212,162,76,.34)}
.hotelband .tier .ic{background:rgba(212,162,76,.13);color:var(--gold-dk)}
.hotelband .tier .who{color:var(--gold-dk)}

/* 4 — marquee edge fade. The strip used to hard-cut at both edges. */
.partners{
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}

/* --------------------------------------------------------------------------
   Vehicle glow. One hue family — amber through copper — so the accent still
   reads as a single light source. Temperature varies, hue does not.
   -------------------------------------------------------------------------- */
.fcard{--vg:#D4A24C;position:relative}
.fcard[data-v="sedan"]{--vg:#E8C98A}
.fcard[data-v="suv"]{--vg:#D9A959}
.fcard[data-v="van10"]{--vg:#C98F3E}
.fcard[data-v="van12"]{--vg:#B87A34}
.fcard[data-v="van14"]{--vg:#A9662B}
.fcard::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
 padding:1px;background:linear-gradient(150deg,var(--vg),transparent 42%,transparent 60%,var(--vg));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
         mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
 opacity:0;transition:opacity .35s ease}
.fcard:hover::after,.fcard:focus-within::after{opacity:.85}
.fcard .book .btn{position:relative;isolation:isolate}
/* the blurred clone behind the button — the kit's glow-pill technique */
.fcard .book .btn::before{content:"";position:absolute;inset:-7px;z-index:-1;border-radius:inherit;
 background:radial-gradient(60% 130% at 50% 50%,var(--vg),transparent 72%);
 filter:blur(11px);opacity:0;transition:opacity .3s ease}
.fcard:hover .book .btn::before,.fcard .book .btn:focus-visible::before{opacity:.55}

/* same treatment inside the quote, so choosing a vehicle feels identical */
.veh label{--vg:#D4A24C}
.veh label[data-v="sedan"]{--vg:#E8C98A}
.veh label[data-v="suv"]{--vg:#D9A959}
.veh label[data-v="van10"]{--vg:#C98F3E}
.veh label[data-v="van12"]{--vg:#B87A34}
.veh label[data-v="van14"]{--vg:#A9662B}
.veh input:checked+.vi{box-shadow:inset 0 0 0 1px var(--ink),0 0 0 3px color-mix(in srgb,var(--vg) 34%,transparent)}

/* --------------------------------------------------------------------------
   Booking continuity: the vehicle you picked is carried and shown, not reset.
   -------------------------------------------------------------------------- */
.vlock{display:flex;align-items:center;gap:.6rem;border:1.5px solid var(--line);
 background:var(--wash);border-radius:var(--r);padding:.55rem .7rem;margin-bottom:.7rem}
.vlock .vg{width:34px;height:34px;border-radius:8px;flex:none;
 background:radial-gradient(70% 70% at 50% 40%,var(--vg,#D4A24C),transparent 72%),var(--ink)}
.vlock b{font-size:.9rem;color:var(--ink);display:block;line-height:1.25}
.vlock small{font-size:.76rem;color:var(--ink2)}
.vlock button{margin-left:auto;background:none;border:0;font:inherit;font-size:.8rem;font-weight:800;
 color:var(--blue);text-decoration:underline;min-height:44px;padding:0 .3rem}

/* --------------------------------------------------------------------------
   Scroll-linked text highlight. Words lift from muted to full as the block
   passes through the viewport. Pure opacity — no layout work per frame.
   -------------------------------------------------------------------------- */
.lift w{opacity:.26;transition:opacity .18s linear}
.lift w.on{opacity:1}
@media(prefers-reduced-motion:reduce){ .lift w{opacity:1!important} }

/* Ambient background motion — two very slow, very low-opacity gold drifts behind
   the dark bands. Compositor-only transforms, no per-frame JS. */
.hotelband,.band,.cta{position:relative;overflow:hidden;isolation:isolate}
.hotelband::before,.cta::before{content:"";position:absolute;z-index:0;pointer-events:none;
 width:70vw;height:70vw;max-width:900px;max-height:900px;left:-15%;top:-30%;border-radius:50%;
 background:radial-gradient(50% 50% at 50% 50%,rgba(212,162,76,.10),transparent 70%);
 filter:blur(40px);animation:drift1 34s ease-in-out infinite alternate}
.hotelband::after{content:"";position:absolute;z-index:0;pointer-events:none;
 width:60vw;height:60vw;max-width:760px;max-height:760px;right:-12%;bottom:-25%;border-radius:50%;
 background:radial-gradient(50% 50% at 50% 50%,rgba(232,201,138,.07),transparent 70%);
 filter:blur(50px);animation:drift2 46s ease-in-out infinite alternate}
.hotelband>.wrap,.cta>.wrap,.band>.wrap{position:relative;z-index:1}
@keyframes drift1{to{transform:translate3d(9%,7%,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-8%,-6%,0) scale(1.08)}}
@media(prefers-reduced-motion:reduce){
 .hotelband::before,.hotelband::after,.cta::before{animation:none}}

/* ==========================================================================
   ROUND 8 — book in place, and a stronger lower page
   ========================================================================== */

/* --- Booking dialog -------------------------------------------------------
   The widget is MOVED here, never cloned. Two copies would mean two states and
   the fare would eventually disagree with itself. */
#bookDlg{border:0;padding:0;background:transparent;max-width:min(560px,94vw);width:100%;
 max-height:92dvh;overflow:visible}
#bookDlg::backdrop{background:rgba(12,10,9,.72);backdrop-filter:blur(3px)}
#bookDlg .dlgwrap{position:relative;max-height:92dvh;overflow:auto;border-radius:var(--r-lg);
 box-shadow:0 50px 100px -30px rgba(0,0,0,.7)}
#bookDlg .quotebox{box-shadow:none;border-radius:var(--r-lg)}
.dlgclose{position:absolute;top:.55rem;right:.55rem;z-index:5;width:44px;height:44px;border-radius:50%;
 border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.3rem;line-height:1;
 display:grid;place-items:center;cursor:pointer}
.dlgclose:hover{background:var(--wash)}
#bookDlg[open]{animation:dlgIn .28s cubic-bezier(.2,.8,.3,1)}
@keyframes dlgIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.bookslot{border:1.5px dashed var(--line);border-radius:var(--r-lg);background:var(--wash);
 display:grid;place-items:center;color:var(--ink3);font-size:.85rem;text-align:center;padding:2rem 1rem}
@media(max-width:640px){
 /* bottom sheet on phones — thumb reach matters more than centring */
 #bookDlg{max-width:100vw;width:100vw;margin:0;position:fixed;bottom:0;top:auto;
  max-height:94dvh;border-radius:16px 16px 0 0}
 #bookDlg .dlgwrap,#bookDlg .quotebox{border-radius:16px 16px 0 0}
 @keyframes dlgIn{from{opacity:0;transform:translateY(40px)}}
}
@media(prefers-reduced-motion:reduce){ #bookDlg[open]{animation:none} }

/* --- Service areas, grouped instead of 40 undifferentiated pills ---------- */
.areagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s3) var(--s4)}
.areagroup{border-top:1px solid var(--line);padding-top:.5rem}
.areagroup summary{list-style:none;display:flex;align-items:center;gap:.5rem;cursor:pointer;
 min-height:44px;user-select:none}
.areagroup summary::-webkit-details-marker{display:none}
.areagroup summary .n{margin-left:auto;font-size:.72rem;font-weight:800;color:var(--ink3);
 background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:.1rem .5rem}
.areagroup summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink3);
 border-bottom:2px solid var(--ink3);transform:rotate(45deg);margin-left:.15rem;
 transition:transform .2s ease;flex:none}
.areagroup[open] summary::after{transform:rotate(225deg)}
.areagroup summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
@media(min-width:721px){
 .areagroup{border-top:0;padding-top:0}
 .areagroup summary{pointer-events:none;min-height:0}
 .areagroup summary::after,.areagroup summary .n{display:none}
}
.areagrid h3{font-family:var(--sans);font-size:.7rem;font-weight:800;letter-spacing:.16em;
 text-transform:uppercase;color:var(--ink2);margin:0 0 .7rem;padding-bottom:.55rem;
 border-bottom:1px solid var(--line)}
.areagrid ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.areagrid a{display:block;padding:.4rem 0;font-size:.93rem;color:var(--ink);min-height:44px;
 display:flex;align-items:center;gap:.5rem;transition:color .15s}
.areagrid a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line);
 flex:none;transition:background .15s,transform .15s}
.areagrid a:hover{color:var(--gold-hi)}
.areagrid a:hover::before{background:var(--gold);transform:scale(1.6)}

/* --- FAQ: two columns, panel treatment ------------------------------------ */
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4);align-items:start}
.faqgrid details{border-bottom:1px solid var(--line)}
.faqgrid summary{font-size:.98rem;padding:1.1rem 0}
@media(max-width:900px){ .faqgrid{grid-template-columns:1fr} }

/* --- Closing CTA: a real panel with the driver frame ---------------------- */
.closing{position:relative;overflow:hidden;background:#141110;color:#fff;
 border-radius:var(--r-lg);margin:var(--s5) 0}
.closing .bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;
 opacity:.42;z-index:0}
.closing::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(95deg,rgba(12,10,9,.94),rgba(12,10,9,.72) 55%,rgba(12,10,9,.35))}
.closing .inner{position:relative;z-index:2;padding:clamp(1.8rem,5vw,3.6rem);
 display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s4);align-items:center}
.closing h2{color:#fff;margin-bottom:.7rem}
.closing p{color:var(--on-dark);max-width:46ch;margin:0}
.closing .acts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.closing .facts{display:grid;gap:.55rem}
.closing .facts div{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--on-dark)}
.closing .facts svg{width:16px;height:16px;flex:none;margin-top:.25rem;color:var(--gold-dk)}
@media(max-width:1000px){ .closing .inner{grid-template-columns:1fr} }

/* --- Reviews slot, styled as a real panel rather than a warning box -------- */
.revslot{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
 padding:clamp(1.4rem,4vw,2.4rem);display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
 align-items:center;box-shadow:inset 0 1px 0 #fff,0 24px 50px -44px rgba(28,25,23,.6)}
.revslot .score{text-align:center;padding-right:var(--s3);border-right:1px solid var(--line)}
.revslot .score b{display:block;font-family:var(--display);font-size:3rem;line-height:1;color:var(--ink);
 font-variant-numeric:tabular-nums}
.revslot .score span{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:var(--ink2)}
.revslot .stars{color:var(--star);letter-spacing:.14em;margin:.4rem 0 0;font-size:.95rem}
@media(max-width:640px){
 .revslot{grid-template-columns:1fr}
 .revslot .score{border-right:0;border-bottom:1px solid var(--line);padding:0 0 var(--s2)}
}

/* ==========================================================================
   ROUND 9 — legal pages (terms / privacy / SMS terms)
   Generated by build_legal.py. Two audiences: a customer skimming before they
   hand over a card, and a 10DLC reviewer reading every line. Both are served by
   the same thing — a measured line length, real headings, and no marketing
   voice. Body sits at 17px because these are the longest reads on the site.
   ========================================================================== */
.legalpage main{background:var(--paper)}
.legal-doc{max-width:44rem;padding:var(--s5) var(--s3) var(--s6)}
.legal-doc .crumbs{color:var(--ink3)}
.legal-doc .crumbs a{color:var(--ink2)}
.legal-doc .crumbs a:hover{color:var(--gold-hi)}
.legal-doc h1{font-family:var(--display);font-size:clamp(2rem,5vw,2.9rem);line-height:1.1;
 letter-spacing:-.015em;color:var(--ink);margin:.2rem 0 .7rem}
.legal-doc .lede{font-size:1.125rem;line-height:1.6;color:var(--ink2);margin:0 0 1rem;max-width:36rem}
.legal-doc .updated{font-size:.8rem;color:var(--ink3);font-weight:600;margin:0 0 var(--s4);
 padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.legal-doc h2{font-size:1.14rem;font-weight:800;letter-spacing:-.005em;color:var(--ink);
 margin:var(--s4) 0 .6rem;scroll-margin-top:5rem}
.legal-doc p{font-size:1.0625rem;line-height:1.72;color:var(--ink2);margin:0 0 .85rem}
.legal-doc strong{color:var(--ink);font-weight:700}
.legal-doc a{color:var(--gold-hi);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.legal-doc .callout{font-size:1rem;line-height:1.6;padding:1rem 1.1rem;margin:0 0 var(--s3)}
.legal-list{margin:0 0 .9rem;padding:0;list-style:none;display:grid;gap:.6rem}
.legal-list li{position:relative;padding-left:1.35rem;font-size:1.0625rem;line-height:1.65;color:var(--ink2)}
.legal-list li::before{content:"";position:absolute;left:.35rem;top:.68em;width:6px;height:6px;
 border-radius:50%;background:var(--gold)}
.quoted{margin:0 0 .9rem;padding:.85rem 1rem;border-left:3px solid var(--gold);background:var(--wash);
 border-radius:0 var(--r) var(--r) 0;font-size:.98rem;line-height:1.65;color:var(--ink2);font-style:normal}
.legal-table{width:100%;border-collapse:collapse;margin:0 0 1rem;font-size:.97rem}
.legal-table th{text-align:left;font-size:.72rem;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;color:var(--ink3);padding:.5rem .7rem;border-bottom:1.5px solid var(--line)}
.legal-table td{padding:.7rem;border-bottom:1px solid var(--line);vertical-align:top;
 line-height:1.6;color:var(--ink2)}
.legal-table td:first-child{font-weight:700;color:var(--ink);width:34%}
.legal-table em{color:var(--ink3);font-style:normal;font-weight:600;font-size:.9em}
.legal-contact{margin-top:var(--s5);padding:1.1rem 1.2rem;border:1.5px solid var(--line);
 border-radius:var(--r);background:var(--wash)}
.legal-contact h2{margin-top:0}
.legal-contact p{margin:0;line-height:1.75}
.mk-t{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.legalpage footer .legal a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
 .legal-doc{padding:var(--s4) var(--s3) var(--s5)}
 .legal-table,.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:auto}
 .legal-table thead{display:none}
 .legal-table tr{border-bottom:1px solid var(--line);padding:.6rem 0}
 .legal-table td{border:0;padding:.15rem 0}
 .legal-table td:first-child{width:auto;font-size:.9rem}
}

/* ===========================================================================
   TRADE PROGRAMME (partners.html) — travel agents, trip planners, DMCs
   Reuses the hotel page's shell. Only the components the hotel page does not
   already own are defined here.
   =========================================================================== */
.notecard{align-self:start;background:var(--wash);border:1.5px solid var(--line);
 border-radius:var(--r-lg);padding:var(--s3)}
.notecard h3{font-size:1.05rem;color:var(--ink);margin:0 0 .6rem}
.notecard p{font-size:.94rem;line-height:1.68;color:var(--ink2);margin:0 0 .7rem}
.notecard p:last-child{margin-bottom:0}
/* Anything the owner has not signed off is marked, not quietly published. */
.flagline{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--line);
 font-size:.82rem;font-weight:700;color:var(--gold-hi)}

/* Numbered because these steps genuinely happen in order — the itinerary has
   to arrive before it can be quoted. */
.tradesteps{list-style:none;margin:0;padding:0;counter-reset:ts;
 display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--s2)}
.tradesteps li{counter-increment:ts;position:relative;padding:1.15rem 1.2rem 1.25rem;
 background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.tradesteps li::before{content:counter(ts,decimal-leading-zero);display:block;
 font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;
 color:var(--gold-hi);margin-bottom:.55rem}
.tradesteps h3{font-family:var(--sans);font-size:1rem;letter-spacing:-.01em;color:var(--ink);margin:0 0 .4rem}
.tradesteps p{font-size:.9rem;line-height:1.65;color:var(--ink2);margin:0}

/* .ticks and .incl were both written for the dark hero and the hotel band, so
   their text is near-white (#E7E5E4 / #D6D3D1). Dropped onto a white section
   that is about 1.1:1 and effectively invisible — this modifier repaints them
   for a light ground rather than forking the components. */
.ticks.on-light li,.incl.on-light li{color:var(--ink2)}
.ticks.on-light b,.incl.on-light b{color:var(--ink)}
.ticks.on-light svg,.incl.on-light svg{color:var(--green)}

.fleetstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s2)}
.fstrip h3{font-family:var(--sans);font-size:.98rem;letter-spacing:-.01em;color:var(--ink);
 margin:.7rem 0 .35rem}
.fstrip .caps2{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.fstrip .plate{aspect-ratio:16/9}

/* ===========================================================================
   AURA — the featured card reads as lit, not as a highlighted table row
   A single warm pass travelling the border, at studio-light speed. It is one
   light, not a spectrum: the palette has exactly one accent and this does not
   get to introduce a second.
   =========================================================================== */
@property --aura-ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes auraPass{to{--aura-ang:360deg}}

.aura{position:relative;isolation:isolate;
 box-shadow:0 0 0 1px rgba(212,162,76,.22),0 30px 70px -38px rgba(161,98,7,.6)}
/* Drawn as a masked border ring INSIDE the element, so the card keeps its own
   overflow:hidden and the plate corners stay clipped.
   opacity and transition are restated on purpose: .fcard::after already exists
   as a hover-only rim at opacity:0, and a later rule that only changes the
   background inherits that zero and renders nothing at all. */
.aura::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
 opacity:1;transition:none;
 background:
  conic-gradient(from var(--aura-ang) at 50% 50%,
   rgba(212,162,76,0) 0turn,rgba(212,162,76,0) .42turn,
   rgba(212,162,76,.45) .60turn,rgba(240,224,190,.92) .74turn,#FFF6E3 .80turn,
   rgba(240,224,190,.92) .86turn,rgba(212,162,76,.45) 1turn);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude;
 animation:auraPass 7s linear infinite;pointer-events:none;z-index:3}
/* Without @property the angle cannot interpolate, so the ring would sit frozen
   at one arbitrary position and read as a rendering bug. Show a still, even
   rim instead. */
@supports not (background:conic-gradient(from var(--aura-ang),#000,#fff)){
 .aura::after{background:linear-gradient(120deg,rgba(212,162,76,.5),rgba(240,230,210,.75),rgba(212,162,76,.5));animation:none}
}
/* On the near-white card the pass alone is too quiet; a low warm floor under
   the featured card carries it. */
.fcard.hero.aura{background:linear-gradient(180deg,#FFFDF9 0%,#ffffff 42%)}

/* No sweep on the button inside a lit card. The kit already glows it with a
   blurred clone at .fcard .book .btn::before, and a sheen needs overflow:hidden
   on the button, which clips that clone away — a straight downgrade. */

@media(prefers-reduced-motion:reduce){
 .aura::after{animation:none;
  background:linear-gradient(120deg,rgba(212,162,76,.5),rgba(255,246,227,.9),rgba(212,162,76,.5))}
}

/* ===========================================================================
   360° TURNTABLE
   Frames are real photographs shot on a turntable; there is no way to fake one
   from a single side profile without lying about the vehicle. The viewer stays
   completely invisible until a frame set actually exists on disk — see
   FLEET-360-PHOTO-SPEC.md.
   =========================================================================== */
.plate.spin{cursor:grab;touch-action:pan-y}
.plate.spin.dragging{cursor:grabbing}
/* z-index 0, not 1: ::after carries the plate scrim and is later in tree order,
   so it stays above the frames the way it does above a static photograph. */
.plate .spinframes{position:absolute;inset:0;z-index:0}
.plate .spinframes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 opacity:0;transition:none}
.plate .spinframes img.on{opacity:1}
/* Sits on the plate, so it must clear the .slotlabel in the opposite corner. */
.spinbadge{position:absolute;z-index:4;right:.6rem;bottom:.6rem;display:inline-flex;align-items:center;
 gap:.4rem;height:32px;padding:0 .7rem;border-radius:99px;font-size:.68rem;font-weight:800;
 letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(20,17,16,.62);
 border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);pointer-events:none;
 transition:opacity .25s}
.plate.spin.dragging .spinbadge{opacity:0}
.spinbadge svg{width:14px;height:14px;flex:none}
/* Keyboard is a first-class way to spin this, so the plate takes focus. */
.plate.spin:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.plate .spinframes img{transition:none}}

/* --- address autocomplete (curated quick picks + Photon/OSM geocoding) --- */
.field{position:relative}
.ac-list{position:absolute;top:100%;left:0;right:0;z-index:45;background:#fff;border:1px solid var(--line);
 border-radius:10px;margin-top:4px;box-shadow:var(--e2);max-height:300px;overflow:auto;padding:.3rem}
.ac-h{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:.45rem .6rem .15rem}
.ac-it{display:block;width:100%;text-align:left;background:none;border:0;padding:.55rem .6rem;border-radius:7px;
 font-family:inherit;font-size:.92rem;color:var(--ink);cursor:pointer;line-height:1.35}
.ac-it small{display:block;font-size:.76rem;color:var(--ink2)}
.ac-it.sel,.ac-it:hover{background:var(--wash)}
.ac-cr{font-size:.6rem;color:var(--ink3);padding:.25rem .6rem .35rem;text-align:right}

/* ==========================================================================
   UX + POLISH PASS 2026-08-07 — additive only, no layout restructure.
   ① flow clarity  ② mobile ergonomics  ③ motion  ④ visual refinement
   ========================================================================== */

/* ① visible step label beside the progress bar (sighted parity with the a11y heading) */
.progwrap{margin-bottom:.9rem}
.progwrap .prog{margin-bottom:.5rem}
.proglabel{font-size:.78rem;color:var(--ink2);letter-spacing:.01em}
.proglabel b{color:var(--navy);font-weight:800}
/* ④ active segment carries the gold accent; done segments stay ink */
.prog i{transition:background .35s ease, box-shadow .35s ease}
.prog i.at{background:var(--gold-dk);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-dk) 26%,transparent)}

/* ① persistent trip-context strip on steps 2-4 */
.tripstrip{display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:center;
 background:var(--wash);border:1px solid var(--line);border-radius:var(--r);
 padding:.55rem .7rem;margin-bottom:.85rem;font-size:.82rem}
.tripstrip .leg{display:flex;align-items:center;gap:.35rem;font-weight:700;color:var(--navy);min-width:0}
.tripstrip .leg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}
.tripstrip .arr{color:var(--gold);flex:none}
.tripstrip .meta{color:var(--ink2);font-weight:600}
.tripstrip .sep{color:var(--line)}
.tripstrip .edit{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--gold-hi);
 background:none;border:0;cursor:pointer;padding:.2rem .3rem;border-radius:6px}
.tripstrip .edit:hover{text-decoration:underline}

/* ③ each step fades/rises in when it becomes visible */
@media(prefers-reduced-motion:no-preference){
 [data-step]:not([hidden]){animation:stepIn .34s cubic-bezier(.2,.8,.3,1) both}
 @keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
 /* ③ price settles with a soft scale when it lands */
 .quote b.pulse{animation:pricePop .5s cubic-bezier(.2,.9,.3,1.2)}
 @keyframes pricePop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
}

/* ② + ③ tactile press feedback (touch + mouse) */
.btn:active{transform:translateY(1px) scale(.995)}
.seg button:active,.tipbtns button:active,.veh label:active .vi{transform:scale(.985)}
.seg button,.tipbtns button{transition:transform .12s ease,background .18s,border-color .18s,box-shadow .18s}

/* ② autocomplete must float ABOVE the fixed mobile action bar, never behind it */
.ac-list{z-index:80}

/* ② stronger, consistent focus ring for keyboard + switch users */
a:focus-visible,button:focus-visible,.inp:focus-visible,input:focus-visible,
select:focus-visible,[role=radio]:focus-visible,[tabindex]:focus-visible{
 outline:2px solid var(--gold-dk);outline-offset:2px;border-radius:6px}
.inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}

/* ② mobile: keep the trip strip legible and the primary button comfy */
@media(max-width:1000px){
 .tripstrip{font-size:.8rem}
 .tripstrip .leg span{max-width:11ch}
 .act .btn{min-height:50px}
}

/* ==========================================================================
   BOOKING CHATBOT (assets/chatbot.js) — rule-based, LF-connected
   ========================================================================== */
.cb-launch{position:fixed;right:18px;bottom:18px;z-index:75;display:flex;align-items:center;gap:.5rem;
 background:var(--navy);color:#fff;border:0;border-radius:99px;padding:.7rem 1.1rem;font:inherit;
 font-weight:800;font-size:.92rem;cursor:pointer;box-shadow:0 14px 34px -14px rgba(28,25,23,.7);
 transition:transform .16s,box-shadow .16s}
.cb-launch svg{color:var(--gold-dk)}
.cb-launch:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(28,25,23,.75)}
.cb-launch:active{transform:translateY(0)}
body.cb-open .cb-launch{display:none}
/* clear the mobile action bar so the launcher never sits on top of it */
@media(max-width:1000px){.cb-launch{bottom:calc(64px + env(safe-area-inset-bottom))}}

.cb-panel{position:fixed;right:18px;bottom:18px;z-index:76;width:min(380px,calc(100vw - 24px));
 height:min(620px,calc(100vh - 36px));display:flex;flex-direction:column;background:#fff;
 border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(28,25,23,.6)}
@media(prefers-reduced-motion:no-preference){.cb-panel:not([hidden]){animation:cbIn .28s cubic-bezier(.2,.8,.3,1)}}
@keyframes cbIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){.cb-panel{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0}}

.cb-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem .9rem;
 background:var(--navy);color:#fff}
.cb-id{display:flex;align-items:center;gap:.6rem}
.cb-id b{font-size:.95rem;display:block;line-height:1.1}
.cb-id small{font-size:.72rem;color:#AEA8A3}
.cb-dot{width:9px;height:9px;border-radius:50%;background:#8FD3A8;flex:none;box-shadow:0 0 0 3px rgba(143,211,168,.25)}
.cb-x{background:none;border:0;color:#D6D3D1;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
.cb-x:hover{color:#fff}

.cb-log{flex:1;overflow-y:auto;padding:1rem .9rem;display:flex;flex-direction:column;gap:.5rem;background:var(--wash)}
.cb-msg{max-width:82%;padding:.6rem .8rem;border-radius:14px;font-size:.9rem;line-height:1.45;word-wrap:break-word}
.cb-bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink)}
.cb-bot a{color:var(--gold-hi);font-weight:700}
.cb-me{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.cb-typing{display:flex;gap:4px;align-items:center}
.cb-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:cbBlink 1.2s infinite}
.cb-typing i:nth-child(2){animation-delay:.2s}.cb-typing i:nth-child(3){animation-delay:.4s}
@keyframes cbBlink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.cb-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 .9rem;background:var(--wash)}
.cb-quick:not(:empty){padding-bottom:.7rem}
.cb-chip{background:#fff;border:1.5px solid var(--line);color:var(--navy);border-radius:99px;
 padding:.45rem .8rem;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;transition:.14s;min-height:40px}
.cb-chip:hover{border-color:var(--gold-dk);background:var(--tint)}
.cb-chip:active{transform:scale(.97)}

.cb-input{display:flex;gap:.5rem;padding:.7rem .9rem;border-top:1px solid var(--line);background:#fff}
.cb-field{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:.6rem .75rem;font:inherit;font-size:16px;color:var(--ink)}
.cb-field:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent)}
.cb-send{flex:none;width:44px;border:0;border-radius:10px;background:var(--navy);color:#fff;cursor:pointer;
 display:grid;place-items:center;transition:background .16s}
.cb-send:hover{background:var(--navy2)}