/* Volta TSP: the public website. One look, Majorelle: the navy shell, peach and white of the product. */
@font-face{font-family:"Jost";src:url(/assets/jost-latin-wght.7726a5cd6f.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --shell:#132546;      /* navy ground: header, poster, money, footer */
  --raised:#1d3459;
  --deep:#0e1c37;
  --rim:#3c5584;
  --ivory:#f2ede4;      /* text on navy */
  --soft:#d9dfe9;
  --shellmute:#a8b6cd;
  --peach:#e38964;
  --peach2:#f3a883;
  --onpeach:#2a1408;
  --navy:#16305e;       /* text on white */
  --mute:#4c6288;
  --bg:#ffffff;
  --tint:#f1f4f9;
  --g:clamp(16px,4.5vw,64px);
  --focus:var(--navy);
  --sans:Jost,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--navy);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
svg{max-width:100%}
.wrap{max-width:1280px;margin-inline:auto;padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.dark{--focus:var(--peach2)}
.skip{position:absolute;left:12px;top:-80px;z-index:10;padding:12px 18px;border-radius:999px;background:var(--peach);color:var(--onpeach);font-weight:500;text-decoration:none}
.skip:focus{top:12px}
.missing{padding:0 6px;border-radius:4px;background:#ffe27a;color:var(--onpeach);font-weight:500}

/* header */
.top{background:var(--shell);color:var(--ivory)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;font:500 22px/1 var(--sans);letter-spacing:.02em;text-decoration:none}
.brand svg{flex:none;width:30px;height:30px}
.brand .tsp{color:var(--shellmute);font-weight:400}
.nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);font-size:16px;line-height:1}
.nav a{padding-block:10px;text-decoration:none}
.nav a:hover{color:var(--peach2)}
@media (max-width:520px){.nav .hide-sm{display:none}}

/* the poster */
.poster{overflow:hidden;background:var(--shell);color:var(--ivory)}
.poster .wrap{display:grid;gap:clamp(48px,6vw,64px);padding-block:clamp(40px,7vw,96px) clamp(64px,8vw,112px)}
@media (min-width:1100px){.poster .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.kicker{margin-bottom:22px;color:var(--shellmute);font-size:17px;line-height:1.4}
.poster h1{font:500 clamp(48px,6.6vw,104px)/.98 var(--sans);letter-spacing:-.02em}
.poster h1 span{color:var(--peach)}
.lead{max-width:30em;margin:26px 0 34px;color:var(--soft);font-size:clamp(18px,1.5vw,20px)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;min-height:54px;padding:0 28px;border-radius:999px;background:var(--peach);color:var(--onpeach);font:500 18px/1 var(--sans);text-decoration:none}
.btn:hover{background:var(--peach2)}
.btn-line{background:none;color:var(--ivory);box-shadow:inset 0 0 0 1.5px var(--rim)}
.btn-line:hover{background:none;box-shadow:inset 0 0 0 1.5px var(--peach)}
/* the detour against the straight line */
.detour{justify-self:center;width:100%;max-width:600px}
.detour svg{display:block;width:100%;height:auto}
.detour .narrow{display:none}
@media (max-width:640px){.detour .wide{display:none}.detour .narrow{display:block}}
.dt-path{fill:none;stroke:var(--shellmute);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.1 10}
.dt-stop{fill:var(--shell);stroke:var(--shellmute);stroke-width:2}
.dt-stop-label{fill:var(--shellmute);font:400 16px var(--sans)}
.dt-today{fill:var(--shellmute);font:500 18px var(--sans)}
.dt-with{fill:var(--peach2);font:500 19px var(--sans)}
.dt-k{fill:var(--ivory)}
.dt-sub{fill:var(--shellmute);font:400 16px var(--sans)}
.dt-line{fill:none;stroke:var(--peach);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.dt-hotel{fill:var(--raised);stroke:var(--rim);stroke-width:1.5}
.dt-agency{fill:var(--peach)}
.dt-on-hotel{fill:var(--ivory);font:500 18px var(--sans)}
.dt-on-agency{fill:var(--onpeach);font:500 18px var(--sans)}
.narrow .dt-today,.narrow .dt-with{font-size:15px}
.narrow .dt-sub{font-size:14px}
.narrow .dt-on-hotel,.narrow .dt-on-agency{font-size:14px}

/* how it works: who acts at each stop */
.how{padding-block:clamp(72px,10vw,140px)}
.how .wrap{display:grid;gap:clamp(40px,6vw,96px)}
@media (min-width:1000px){.how .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start}}
.how-head h2,.money h2{font:500 clamp(38px,4.6vw,64px)/1.04 var(--sans);letter-spacing:-.02em}
.how-head p{max-width:30em;margin-top:20px;color:var(--mute);font-size:20px}
@media (min-width:1000px){.how-head{position:sticky;top:48px}}
.route{position:relative;display:grid;gap:clamp(28px,3.4vw,44px);padding:0 0 0 52px;list-style:none}
.route::before{content:"";position:absolute;left:11px;top:16px;bottom:16px;width:4px;border-radius:2px;background:var(--peach)}
.route li{position:relative}
.route li::before{content:"";position:absolute;left:-52px;top:2px;width:26px;height:26px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 5px var(--peach)}
.route li:last-child::before{background:var(--peach)}
.route .who{display:block;margin-bottom:2px;color:var(--mute);font-size:16px;font-weight:500}
.route h3{margin-bottom:8px;font:500 clamp(24px,2.4vw,30px)/1.2 var(--sans)}
.route p{max-width:34em;color:var(--mute)}

/* where the money goes */
.money{padding-block:clamp(72px,10vw,140px);background:var(--shell);color:var(--ivory)}
.money .wrap{display:grid;gap:clamp(48px,6vw,72px)}
@media (min-width:1000px){.money .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}}
.money h2{margin-bottom:22px}
.money h2 span{color:var(--peach)}
.money .copy p{max-width:32em;color:var(--soft)}
.orbit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding-top:120px}
.planet{display:grid;place-items:center;aspect-ratio:1;padding:12%;border-radius:50%;text-align:center;font:500 clamp(17px,1.6vw,22px)/1.2 var(--sans)}
.planet small{display:block;margin-bottom:6px;font-size:14px;font-weight:400;line-height:1.3;opacity:.8}
.planet.h{background:var(--raised);box-shadow:inset 0 0 0 1.5px var(--rim)}
.planet.a{background:var(--peach);color:var(--onpeach)}
.beam{display:grid;justify-items:center;gap:10px;min-width:120px}
.beam .t{font-size:15px;line-height:1.3;text-align:center}
.beam b{color:var(--peach2);font-weight:500}
.beam .line{position:relative;display:block;width:100%;min-width:110px;height:4px;border-radius:2px;background:var(--peach)}
.beam .line::after{content:"";position:absolute;right:-2px;top:50%;width:12px;height:12px;border-top:4px solid var(--peach);border-right:4px solid var(--peach);transform:translateY(-50%) rotate(45deg)}
.instr{position:absolute;top:0;left:50%;display:grid;justify-items:center;transform:translateX(-50%)}
.instr p{padding:12px 20px;border:1.5px dashed var(--shellmute);border-radius:999px;font-size:15px;line-height:1.25;text-align:center;white-space:nowrap}
.instr b{font-weight:500}
.instr .drop{display:block;height:52px;border-left:1.5px dashed var(--shellmute)}
@media (max-width:640px){
  .orbit{grid-template-columns:minmax(0,1fr);justify-items:center;padding-top:0}
  .planet{width:min(64vw,240px)}
  .instr{position:static;order:-1;transform:none}
  .beam .line{width:4px;min-width:4px;height:70px}
  .beam .line::after{right:auto;left:50%;top:auto;bottom:-2px;transform:translateX(-50%) rotate(135deg)}
}

/* the two sides */
.sides{display:grid}
@media (min-width:900px){.sides{grid-template-columns:1fr 1fr}}
.side{padding-block:clamp(48px,7vw,96px);padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
.side.a{background:var(--peach);color:var(--onpeach);--focus:var(--onpeach)}
.side-in{max-width:520px;margin-inline:auto}
.side h2{margin-bottom:24px;font:500 clamp(30px,3vw,44px)/1.05 var(--sans);letter-spacing:-.01em}
.side ul{display:grid;gap:18px;padding:0;list-style:none}
.side li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;font-size:19px}
.side li::before{content:"";width:12px;height:12px;margin-top:.55em;border-radius:50%;background:var(--peach)}
.side.a li::before{background:var(--shell)}
.built{background:var(--deep);color:var(--shellmute)}
.built .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;padding-block:22px;font-size:16px;line-height:1.4}
.built b{color:var(--ivory);font-weight:500}

/* contact */
.contact{padding-block:clamp(72px,10vw,140px);text-align:center}
.contact h2{font:500 clamp(48px,7vw,104px)/1 var(--sans);letter-spacing:-.02em}
.contact p{max-width:30em;margin:16px auto 30px;color:var(--mute);font-size:20px}
.mail{display:inline-block;max-width:100%;padding:18px clamp(22px,3vw,34px);border-radius:999px;box-shadow:inset 0 0 0 2px var(--peach);font:400 clamp(24px,3.8vw,48px)/1.1 var(--sans);text-decoration:none;overflow-wrap:anywhere}
.mail:hover{background:var(--peach);color:var(--onpeach)}

/* footer */
.foot{background:var(--shell);color:var(--shellmute);font-size:15px;line-height:1.5}
.foot .wrap{display:grid;gap:10px;padding-block:28px 36px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.foot nav a{padding-block:6px;color:var(--ivory);text-decoration:none}
.foot nav a:hover,.foot nav a[aria-current="page"]{color:var(--peach2)}

/* the legal pages */
.band{position:relative;overflow:hidden;background:var(--shell);color:var(--ivory)}
.band::after{content:"";position:absolute;top:-130px;right:-90px;width:clamp(260px,26vw,380px);aspect-ratio:1;border-radius:50%;background:var(--peach)}
.band .wrap{position:relative;z-index:1;padding-block:clamp(40px,6vw,88px) clamp(40px,5vw,64px)}
.band h1{font:500 clamp(40px,5.4vw,80px)/1.02 var(--sans);letter-spacing:-.02em}
.band .updated{margin-top:16px;color:var(--shellmute);font-size:16px}
@media (min-width:760px){.band h1{max-width:62%}}
@media (max-width:759px){.band::after{display:none}}
.doc{padding-block:clamp(48px,6vw,88px) clamp(72px,9vw,128px)}
.col{max-width:42em}
.doc h2{margin:52px 0 14px;font:500 clamp(24px,2.2vw,30px)/1.2 var(--sans);letter-spacing:-.01em}
.doc .col>:first-child{margin-top:0}
.doc p{margin:0 0 16px}
.doc a{text-decoration-color:var(--peach);text-decoration-thickness:2px;text-underline-offset:3px}
.doc a:hover{text-decoration-color:currentColor}
.doc ul{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.doc ul li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px}
.doc ul li::before{content:"";width:8px;height:8px;margin-top:.68em;border-radius:50%;background:var(--peach)}
.doc dl{display:grid;grid-template-columns:minmax(140px,30%) minmax(0,1fr);margin:0 0 16px;padding:4px 24px;border-radius:16px;background:var(--tint)}
.doc dt,.doc dd{padding-block:14px}
.doc dt{padding-right:20px;color:var(--mute);font-size:16px;font-weight:500;line-height:1.55}
.doc dd{overflow-wrap:anywhere}
.doc dl>dd~dt,.doc dl>dd~dt+dd{border-top:2px solid var(--bg)}
.uses{display:grid;gap:16px;margin:8px 0 24px}
.use{padding:22px 24px 8px;border-radius:18px;background:var(--tint)}
.use h3{font:500 21px/1.3 var(--sans)}
.use dl{margin:6px 0 0;padding:0;border-radius:0;background:none}
@media (max-width:640px){
  .doc dl{grid-template-columns:minmax(0,1fr);padding:4px 18px}
  .doc dt{padding:14px 0 2px}
  .doc dd{padding-top:0}
  .doc dl>dd~dt+dd{border-top:0}
  .use{padding:18px 18px 6px}
  .use dl{padding:0}
}