/* NOVA Catering. Explicit UI colours and hard shadows use #1A42A4, white and black only. */
:root{
  --b:#1A42A4;--w:#FFFFFF;--k:#000000;
  --gut:clamp(20px,4vw,64px);
  --sec:clamp(64px,9vw,136px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;font:400 18px/1.5 Fredoka,system-ui,sans-serif;color:var(--k);background:var(--w);overflow-x:clip}
body.sp-locked{overflow:hidden}
h1,h2,h3{font-family:"Lilita One",Fredoka,sans-serif;font-weight:400;margin:0;line-height:1}
h2{font-size:clamp(44px,7.5vw,112px);color:var(--b)}
p{margin:0}
a{color:inherit}
img,svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:40;background:var(--w);color:var(--b);padding:8px 16px;border-radius:999px}
.skip:focus{top:12px}
.skip:focus-visible{outline-color:var(--w)}

/* Icons: drawn once in the sprite, always shown on white */
.ico{width:100%;height:100%;fill:none;stroke:var(--k);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
symbol .a{fill:var(--b)}
symbol .w{fill:var(--w)}
symbol .k{fill:var(--k);stroke:none}
symbol .sw{stroke:var(--w)}
symbol .sa{stroke:var(--b)}
symbol .ka{stroke:var(--k);stroke-width:4.5}

/* Buttons */
.btn{display:inline-block;border:3px solid transparent;border-radius:999px;padding:13px 30px;font:400 22px/1.1 "Lilita One",sans-serif;text-decoration:none;text-align:center;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.btn:hover{transform:rotate(-2deg) scale(1.04)}
.btn:active{transform:scale(.96)}
.btn-w{background:var(--w);color:var(--b)}
.btn-w:focus-visible,.plate:focus-visible{outline-color:var(--w)}
.btn-line{border-color:var(--w);color:var(--w)}
.btn-sm{padding:8px 20px;font-size:18px}

/* Nav */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;padding:6px var(--gut);background:var(--b);color:var(--w)}
.brand{display:block;position:relative;width:92px;height:68px;overflow:hidden;flex:none;margin-right:auto}
.brand img{position:absolute;left:50%;top:50%;width:176px;max-width:none;transform:translate(-50%,-50%)}
.nav nav{display:flex;gap:26px;margin-right:12px}
.nav nav a{font-weight:500;text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.nav nav a:hover{border-color:var(--w)}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:grid;gap:6px;width:44px;height:44px;place-content:center;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:26px;height:3px;border-radius:3px;background:var(--w);transition:transform .2s}
.menu[open] summary span:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu[open] summary span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu div{position:absolute;right:0;top:52px;width:220px;background:var(--w);color:var(--b);border-radius:20px;padding:10px;box-shadow:0 8px 0 var(--k)}
.menu div a{display:block;padding:10px 14px;font-weight:600;text-decoration:none;border-radius:12px}
.menu div a:hover{background:var(--b);color:var(--w)}
.menu div a:focus-visible{outline-color:var(--b)}

/* Hero: the logo's cloche, blown up until it holds the headline */
.hero{--u:min(1vw,1.38vh);position:relative;overflow:hidden;background:var(--b);color:var(--w);padding:calc(var(--u)*2) var(--gut) clamp(32px,4vw,56px);
  background-image:none}
.cloche{position:relative;width:calc(var(--u)*100);max-width:100%;height:calc(var(--u)*50);margin:0 auto}
.dome{position:absolute;left:50%;bottom:calc(var(--u)*3.2);width:calc(var(--u)*62);height:calc(var(--u)*37);margin-left:calc(var(--u)*-31);background:var(--w);color:var(--b);border-radius:50% 50% 0 0/100% 100% 0 0;display:grid;align-items:end;justify-items:center;padding-bottom:calc(var(--u)*3)}
h1{font-size:calc(var(--u)*10.4);line-height:.98;text-align:center}
h1 span{display:block}
.nova{position:absolute;left:50%;bottom:calc(var(--u)*35.5);width:calc(var(--u)*11);height:calc(var(--u)*11);margin-left:calc(var(--u)*-5.5);fill:var(--w);stroke:var(--b);stroke-width:3;paint-order:stroke;overflow:visible;z-index:1;animation:novaIn 1s .1s cubic-bezier(.2,1.4,.4,1) backwards}
.salver{position:absolute;left:50%;bottom:0;width:calc(var(--u)*78);height:calc(var(--u)*2.4);margin-left:calc(var(--u)*-39);background:var(--w);clip-path:polygon(0 0,100% 0,97.5% 100%,2.5% 100%)}
.plate{--s:calc(var(--u)*11);position:absolute;left:calc(50% + var(--x)*var(--u));bottom:calc(var(--y)*var(--u));width:var(--s);height:var(--s);margin:0 0 calc(var(--s)/-2) calc(var(--s)/-2);display:grid;justify-items:center;align-content:center;gap:2px;border-radius:50%;background:var(--w);color:var(--k);text-decoration:none;box-shadow:inset 0 0 0 calc(var(--u)*.35) var(--w),inset 0 0 0 calc(var(--u)*.6) var(--b),0 5px 0 var(--k);transform:rotate(var(--r));transition:transform .25s cubic-bezier(.3,1.7,.5,1);animation:burst .85s calc(.15s + var(--i)*.06s) cubic-bezier(.2,1.25,.4,1) backwards}
.plate:hover{transform:rotate(calc(var(--r)*-1)) scale(1.1)}
.plate .ico{width:calc(var(--s)*.54);height:calc(var(--s)*.54)}
.plate b{font:400 max(12px,calc(var(--u)*1.25))/1 "Lilita One",sans-serif;color:var(--b)}
@keyframes burst{from{transform:translate(calc(var(--x)*var(--u)*-1),calc(var(--y)*var(--u))) scale(.2) rotate(-60deg);opacity:0}}
@keyframes novaIn{from{transform:scale(0) rotate(-180deg)}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 56px;max-width:calc(var(--u)*78);margin:calc(var(--u)*2) auto 0}
.lead{font-size:clamp(18px,1.6vw,23px);line-height:1.4;max-width:34em;font-weight:500}
.hero-act{flex:none;display:grid;justify-items:end;gap:12px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.launch{display:flex;align-items:center;gap:8px;font-weight:500}
.launch svg{width:16px;height:16px;fill:var(--w)}

/* Cuisines: a menu board of giant names, with plates that cross the bands */
#cuisines{background:var(--w)}
.cu-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px;padding:var(--sec) var(--gut) clamp(40px,5vw,72px)}
.cu-head p{max-width:24em;font-size:clamp(19px,1.7vw,24px);line-height:1.35}
.cu{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17em) clamp(150px,16vw,230px);align-items:center;gap:clamp(20px,4vw,64px);padding:clamp(22px,2.6vw,40px) var(--gut);background:var(--w);color:var(--b)}
.cu h3{font-size:clamp(44px,9.4vw,150px);line-height:.95;white-space:nowrap}
.cu p{font-size:clamp(18px,1.6vw,23px);line-height:1.35;color:var(--k)}
.cu:nth-child(odd){background:var(--b);color:var(--w)}
.cu:nth-child(odd) p{color:var(--w)}
.cu:nth-child(even){grid-template-columns:clamp(150px,16vw,230px) minmax(0,17em) minmax(0,1fr)}
.cu:nth-child(even) h3{order:3;text-align:right}
.cu:nth-child(even) p{order:2}
.cu:nth-child(even) .cu-plate{order:1}
.cu-plate{position:relative;z-index:1;aspect-ratio:1;margin:-44px 0;border-radius:50%;background:var(--w);display:grid;place-items:center;box-shadow:inset 0 0 0 7px var(--w),inset 0 0 0 11px var(--b),0 7px 0 var(--k);transform:rotate(-6deg);transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.cu:nth-child(even) .cu-plate{transform:rotate(6deg)}
.cu:hover .cu-plate{transform:rotate(10deg) scale(1.06)}
.cu-plate .ico{width:58%;height:58%}
.cu:last-child .cu-plate{margin-bottom:0}

/* Events: one big sentence */
#events{background:var(--b);padding:var(--sec) var(--gut)}
#events h2{color:var(--w);font-size:clamp(38px,7.2vw,112px);line-height:1.14;max-width:15em}
.ev{white-space:nowrap}
.ev-i{display:inline-block;width:1em;height:1em;padding:.14em;margin-right:.14em;vertical-align:-.12em;border-radius:50%;background:var(--w);transform:rotate(-6deg)}
.ev:nth-child(even) .ev-i{transform:rotate(7deg)}

/* How booking works: order tickets on a kitchen rail */
#how{background:var(--w);padding:var(--sec) var(--gut) calc(var(--sec) + 24px)}
.rail{height:16px;margin:clamp(36px,5vw,64px) calc(var(--gut)*-1) 0;background:var(--k)}
.tickets{list-style:none;margin:-6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.tickets li{background:var(--b);color:var(--w);padding:34px 24px 44px;transform-origin:top center;
  -webkit-mask:conic-gradient(from -45deg at bottom,transparent,black 1deg 89deg,transparent 90deg) bottom/18px 51% repeat-x,linear-gradient(black 0 0) top/100% 51% no-repeat;
  mask:conic-gradient(from -45deg at bottom,transparent,black 1deg 89deg,transparent 90deg) bottom/18px 51% repeat-x,linear-gradient(black 0 0) top/100% 51% no-repeat}
.tickets li:nth-child(1){transform:rotate(-1.5deg)}
.tickets li:nth-child(2){transform:rotate(1deg) translateY(10px)}
.tickets li:nth-child(3){transform:rotate(-.6deg) translateY(2px)}
.tickets li:nth-child(4){transform:rotate(1.6deg) translateY(14px)}
.tickets i{display:block;font:400 clamp(72px,8vw,124px)/1 "Lilita One",sans-serif;margin-bottom:18px}
.tickets h3{font-size:clamp(25px,2.3vw,34px);line-height:1.08;margin-bottom:10px}
.tickets p{font-size:18px;line-height:1.35}

/* Quote form: fill in the blanks */
#book{background:var(--k);color:var(--w);padding:var(--sec) var(--gut)}
.book-in{max-width:1080px;margin:0 auto}
#book h2{color:var(--w)}
.book-sub{font-size:clamp(19px,1.7vw,24px);margin:14px 0 clamp(36px,5vw,64px);max-width:30em;line-height:1.35}
.lib{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,30px);font:500 clamp(25px,3.5vw,46px)/1.55 Fredoka,sans-serif}
.lib>*{min-width:0}
.lib input:not([type=checkbox]),.lib select{font:600 1em/1.2 Fredoka,sans-serif;color:var(--w);background:transparent;border:0;border-bottom:4px solid var(--w);border-radius:0;padding:0 4px;max-width:100%;color-scheme:dark;appearance:none;-webkit-appearance:none}
.lib select{padding-right:1em;cursor:pointer;background:linear-gradient(45deg,transparent 50%,var(--w) 50%) right .42em top 58%/.24em .24em no-repeat,linear-gradient(-45deg,transparent 50%,var(--w) 50%) right .18em top 58%/.24em .24em no-repeat}
.lib option{color:var(--k);background:var(--w);font-size:18px}
.lib input::placeholder{color:var(--w);opacity:1}
.lib input.n{width:5.4em}
.lib input[name=city]{width:16ch}
.lib input[type=email]{width:24ch}
.lib input[type=date]{min-width:5.6em;appearance:auto;-webkit-appearance:auto}
.lib input:focus,.lib select:focus,.lib textarea:focus{outline:3px solid var(--w);outline-offset:4px}
.lib fieldset{border:0;margin:0;padding:0}
.lib legend{padding:0;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips label{position:relative;font:400 clamp(19px,2vw,26px)/1 "Lilita One",sans-serif;cursor:pointer}
.chips input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.chips span{display:block;padding:11px 20px;border:3px solid var(--w);border-radius:999px;transition:transform .18s cubic-bezier(.3,1.7,.5,1)}
.chips input:checked+span{background:var(--w);color:var(--b);transform:rotate(-3deg)}
.chips input:focus-visible+span{outline:3px solid var(--w);outline-offset:3px}
.notes{display:grid;gap:8px}
.notes textarea{font:500 20px/1.4 Fredoka,sans-serif;color:var(--k);background:var(--w);border:0;border-radius:16px;padding:14px 18px;resize:vertical;width:100%}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.ph{font:500 16px/1.35 Fredoka,sans-serif;border:2px dashed currentColor;border-radius:12px;padding:8px 14px;max-width:44em;width:fit-content}
.send-row .ph{flex:1 1 280px}
.inquiry-draft{border:2px solid var(--w);border-radius:16px;padding:18px;min-width:0;font:400 16px/1.45 Fredoka,sans-serif}
.inquiry-draft h3,.inquiry-draft h4{color:var(--w);font:400 26px/1.1 "Lilita One",sans-serif;margin:0 0 12px}
.inquiry-draft p{margin:0 0 14px;overflow-wrap:anywhere}
.inquiry-draft label{display:block;font:600 16px/1.4 Fredoka,sans-serif;margin:0 0 6px}
.inquiry-draft textarea{display:block;width:100%;max-width:100%;min-height:180px;resize:vertical;padding:12px;border:2px solid var(--w);border-radius:8px;background:var(--w);color:var(--k);font:400 16px/1.4 system-ui,sans-serif}
.draft-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.draft-actions button,.draft-actions a{display:inline-flex;align-items:center;border:2px solid var(--w);border-radius:999px;padding:10px 16px;min-height:44px;background:var(--w);color:var(--b);font:600 16px/1.25 Fredoka,sans-serif;text-decoration:none;cursor:pointer}
.draft-actions a:focus-visible,.lib button:focus-visible{outline:3px solid var(--w);outline-offset:3px}
.inquiry-draft [data-draft-status]{margin:0}
.js-init-notice{margin-block:14px}
.inquiry-tools{display:flex;flex-wrap:wrap;gap:10px;font:500 16px/1.3 Fredoka,sans-serif}
.inquiry-tools button{border:2px solid var(--w);border-radius:999px;padding:10px 16px;min-height:44px;background:transparent;color:var(--w);font:600 16px/1.3 Fredoka,sans-serif;cursor:pointer}
.inquiry-tools button:focus-visible{outline-color:var(--w)}
.submit-status{font:600 16px/1.4 Fredoka,sans-serif;overflow-wrap:anywhere}
.submit-status:empty{display:none}
.submit-status[role=alert]{border:2px solid var(--w);padding:12px;border-radius:10px}
.inquiry-confirmation a{font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.inquiry-confirmation [data-confirmation-edits]{border:2px dashed var(--w);padding:10px;border-radius:8px}
.phone-note{display:grid;gap:8px;font:500 20px/1.4 Fredoka,sans-serif;max-width:26em}
.phone-note input{width:100%}

/* Service area */
#area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;padding:var(--sec) var(--gut);background:var(--b);color:var(--w)}
#area h2{color:var(--w)}
.area-copy p{font-size:clamp(23px,2.8vw,38px);line-height:1.2;font-weight:500;margin-top:16px;max-width:15em}
#area .area-note{font-size:16px;font-weight:400;margin-top:14px}
.radar{position:relative;list-style:none;margin:0;padding:0;aspect-ratio:1;width:100%;max-width:640px;justify-self:center;border-radius:50%;border:4px solid var(--w);
  background:var(--b)}
.radar::before{content:"Bay Area";position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:var(--w);color:var(--b);padding:2px 14px;border-radius:999px;font:400 16px/1.5 "Lilita One",sans-serif;white-space:nowrap}
.radar li{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);transform:translateY(-50%);padding-left:16px;font-weight:600;font-size:clamp(13px,1.5vw,18px);line-height:1;white-space:nowrap}
.radar li::before{content:"";position:absolute;left:-5px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--w)}
.radar li.flip{transform:translate(-100%,-50%);padding:0 16px 0 0}
.radar li.flip::before{left:auto;right:-5px}
.radar .hub{transform:translate(-50%,-50%);padding:6px 14px 6px 34px;background:var(--w);color:var(--b);border-radius:999px;font:400 clamp(15px,1.8vw,21px)/1.1 "Lilita One",sans-serif}
.radar .hub::before{display:none}
.radar .hub svg{position:absolute;left:10px;top:50%;width:18px;height:18px;margin-top:-9px;fill:var(--b)}

/* FAQ */
#faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:24px clamp(32px,5vw,80px);padding:var(--sec) var(--gut)}
#faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font:400 clamp(23px,2.6vw,36px)/1.15 "Lilita One",sans-serif;color:var(--b);cursor:pointer;padding:20px 0}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"";flex:none;width:28px;height:28px;background:var(--b);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C52 38 62 48 100 50 62 52 52 62 50 100 48 62 38 52 0 50 38 48 48 38 50 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C52 38 62 48 100 50 62 52 52 62 50 100 48 62 38 52 0 50 38 48 48 38 50 0Z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
#faq details[open] summary::after{transform:rotate(135deg) scale(1.2)}
#faq details{border-top:3px solid var(--b)}
#faq details:last-child{border-bottom:3px solid var(--b)}
#faq details p{padding:0 48px 24px 0;font-size:clamp(18px,1.6vw,22px);max-width:36em}

/* Footer: the real logo bleeds straight into the blue */
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 56px;background:var(--b);color:var(--w);padding:clamp(16px,2vw,28px) var(--gut) clamp(36px,4vw,56px);overflow:hidden}
footer img{width:clamp(280px,40vw,560px);margin:-9% 0 -8% -6%}
.foot-copy{display:grid;gap:14px;justify-items:start}
.foot-line{font:400 clamp(24px,2.6vw,36px)/1.1 "Lilita One",sans-serif}

@media (max-width:1040px){
  .nav nav,.nav>.btn-sm{display:none}
  .menu{display:block}
  .tickets{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;margin-top:36px}
  .rail{display:none}
  .cu,.cu:nth-child(even){grid-template-columns:minmax(0,1fr) 112px;gap:6px 14px;padding-block:28px}
  .cu h3,.cu:nth-child(even) h3{order:0;text-align:left;font-size:clamp(44px,13vw,88px)}
  .cu p,.cu:nth-child(even) p{order:3;grid-column:1/-1;max-width:30em}
  .cu-plate,.cu:nth-child(even) .cu-plate{order:1;margin:-44px 0 0;grid-row:1;grid-column:2}
}
/* The builder pins its box to the top here, so the nav has to scroll away */
@media (max-width:1180px){
  html{scroll-padding-top:0}
  .nav{position:relative}
}
/* Portrait screens: the dome fills the width and plates line up under the salver */
@media (max-aspect-ratio:1/1),(max-width:760px){
  .hero{--u:min(1.45vw,1.1vh);padding:calc(var(--u)*7) 0 40px;background-image:none}
  .cloche{width:calc(var(--u)*62);height:auto;display:flex;flex-direction:column;align-items:center}
  .dome,.salver,.nova{position:relative;left:auto;bottom:auto;margin-left:0}
  .nova{margin-bottom:calc(var(--u)*-5.5)}
  .salver{width:calc(var(--u)*64);margin-top:calc(var(--u)*.7)}
  .dome{bottom:auto}
  .burst{order:3;width:calc(100vw - 24px);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:calc(var(--u)*3)}
  .plate{--s:min(20.5vw,110px);position:relative;left:auto;bottom:auto;margin:0;animation-name:pop}
  .plate b{font-size:clamp(11px,3vw,15px)}
  .hero-foot{display:block;max-width:none;margin:24px 0 0;padding:0 var(--gut)}
  .hero-act{justify-items:start;margin-top:22px}
  #area,#faq{grid-template-columns:minmax(0,1fr)}
  footer img{margin:-8% 0 -6% -8%}
}
@keyframes pop{from{transform:scale(.3) rotate(-40deg);opacity:0}}
@media (max-width:560px){
  #events h2{font-size:9.6vw}
  .tickets{grid-template-columns:minmax(0,1fr)}
  .tickets li,.tickets li:nth-child(n){transform:rotate(-.8deg);padding:26px 22px 40px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px}
  .tickets li:nth-child(even){transform:rotate(.8deg)}
  .tickets i{grid-row:span 2;margin:0;font-size:72px}
  .btn{font-size:20px;padding:12px 24px}
  .ph{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Mobile usability audit, November 2026. Desktop composition is unchanged. */
@media (max-width:760px){
  .plate b{font-size:14px}
  .cu,.cu:nth-child(even){grid-template-columns:minmax(0,1fr) 72px;gap:12px}
  .cu h3,.cu:nth-child(even) h3{font-size:clamp(34px,9.5vw,64px);white-space:normal;overflow-wrap:anywhere}
  .cu-plate,.cu:nth-child(even) .cu-plate{margin:0;align-self:center}
  .lib input:not([type=checkbox]),.lib select{min-width:0;min-height:48px;width:100%!important;display:block;margin-block:8px;font-size:20px}
  .lib p,.lib label,.lib fieldset{overflow-wrap:anywhere}
  .lib{font-size:25px;line-height:1.5}
  .send-row .ph{flex-basis:100%;min-width:0}
  .menu div{max-width:calc(100vw - 40px)}
  .menu div a{min-height:44px}
  .radar{aspect-ratio:auto;border-radius:24px;padding:28px 18px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .radar li,.radar li.flip,.radar .hub{position:relative;left:auto;top:auto;transform:none;white-space:normal;font-size:16px;line-height:1.3;padding:0 0 0 16px;overflow-wrap:anywhere}
  .radar li.flip::before{left:-5px;right:auto}
  .radar .hub{grid-column:1/-1;justify-self:start;padding:10px 14px 10px 36px}
  .ev{white-space:normal}
  footer img{max-width:100%}
}