/* Danny's Garage premium design upgrade — 2026-11-08.
   Presentation only. No change to API, RBAC, data, booking or tracking logic. */
:root {
  --bg:#020713; --panel:#061329; --panel2:#071e3a; --line:#0aaaff;
  --blue:#0a89ff; --cyan:#1fe3ff; --muted:#a6c6df; --gold:#ffca75; --ink:#f7fbff;
}
[hidden]{display:none!important}
html{scroll-padding-top:20px}
body{
  background:
    radial-gradient(ellipse 64% 32% at 77% 4%,rgba(13,98,189,.27),transparent 78%),
    repeating-linear-gradient(135deg,transparent 0 56px,rgba(17,88,159,.036) 57px 58px,transparent 59px 113px),
    #020713;
  color:var(--ink); line-height:1.5;
}
.topbar{
  max-width:none;
  padding:18px max(22px,calc((100vw - 1390px)/2));
  background:linear-gradient(90deg,#030a19,#06152e 65%,#030b19);
  border-bottom:1px solid #145991;
  box-shadow:0 6px 30px rgba(0,110,255,.12);
}
.brand{gap:17px;letter-spacing:.08em;min-width:0}
.brand img{
  width:96px;height:96px;object-fit:contain;border:0;border-radius:0;
  filter:drop-shadow(0 0 10px rgba(0,170,255,.55));
}
.brand strong{
  font-size:clamp(1.45rem,2.65vw,2.7rem);
  font-style:italic;font-weight:950;letter-spacing:.012em;
  text-shadow:0 3px 0 #1450a4,0 0 19px rgba(28,171,255,.54);
}
.brand small{
  font-size:clamp(.68rem,.95vw,1rem);color:#2edbfc;
  font-weight:850;letter-spacing:.18em;margin-top:7px;
}
.topbar nav{gap:12px;align-items:center}
.topbar nav a{
  font-size:.93rem;font-weight:850;
  color:#f5fbff; min-height:48px;padding:10px 18px;
  border:1px solid #16b8fa;border-radius:10px;
  background:linear-gradient(135deg,#071123,#0c2a51 55%,#050e1f);
  box-shadow:inset 0 0 0 1px #0d456d,0 0 11px #009aff48;
  transition:background .16s ease,box-shadow .16s ease;
}
.topbar nav a:hover,.topbar nav a:focus-visible{
  background:#154a85;box-shadow:0 0 19px #00baff8a;
}
.layout{max-width:1420px;padding:22px}
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:325px;padding:36px 40px;align-items:center;
  border:2px solid #13bbff;border-radius:19px;
  background:
    radial-gradient(circle at 72% 50%,rgba(12,115,238,.46) 0,transparent 35%),
    linear-gradient(110deg,#061022 5%,#061939 53%,#082a55 100%);
  box-shadow:inset 0 0 26px rgba(0,153,255,.17),
             0 0 18px rgba(0,150,255,.5),0 9px 20px rgba(0,0,0,.36);
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(135deg,transparent 0 39px,rgba(9,161,255,.08) 40px 42px,transparent 43px 95px),
    radial-gradient(circle at 64% 46%,#0a2449 2px,transparent 3px) 0 0 / 18px 16px;
  mask-image:linear-gradient(90deg,transparent 26%,#000 72%);
  opacity:.68;
}
.hero:after{
  content:"";position:absolute;top:-30%;bottom:-40%;left:58%;width:8px;
  background:#08c1ff;transform:rotate(29deg);
  box-shadow:0 0 10px #00aeff,24px 0 0 0 #083e99,30px 0 20px #007fff;
  opacity:.88;pointer-events:none;
}
.hero>div:first-child{max-width:690px;position:relative;z-index:2}
.hero .eyebrow{font-size:.91rem;color:#32e9ff;letter-spacing:.17em;margin-bottom:9px}
.hero h1{
  font-size:clamp(2.25rem,4.8vw,4rem);font-weight:1000;line-height:1.13;
  text-transform:uppercase;letter-spacing:-.015em;font-style:italic;
  text-shadow:0 3px 0 #175db9,0 0 21px #129aff88;
  border-bottom:2px solid #07c4ff;padding-bottom:12px;
}
.hero p:not(.eyebrow){font-weight:650;max-width:575px;font-size:clamp(1.05rem,1.45vw,1.31rem)}
.hero-badge{
  flex:none;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:11px;width:320px;font-size:0;
  position:relative;z-index:1;filter:none;
}
.hero-badge span{
  font-size:1.1rem;font-weight:1000;letter-spacing:.12em;
  color:#fff;text-align:center;font-style:italic;
  text-shadow:0 0 13px #14afff;
  border:1px solid #00c9ff;border-radius:9px;background:#071a37c9;
  padding:7px 15px;box-shadow:0 0 13px #00a9ff70;
}
.wheel-visual{
  position:relative;width:240px;height:240px;border-radius:50%;
  background:
    radial-gradient(circle,#09192d 0 8%,#9babbc 9% 12%,#091528 13% 17%,transparent 18%),
    repeating-conic-gradient(from 0deg,#92a5bf 0deg 5deg,#0c2549 6deg 16deg,#7b8aa6 17deg 21deg) center/66% 66% no-repeat,
    radial-gradient(circle,transparent 0 32%,#0a1424 33% 39%,#06aeff 40% 42%,#04142d 43% 48%,#0b1118 49% 56%,#0bc8ff 57% 59%,#0a203c 60% 66%,transparent 67%);
  border:10px solid #070e1a;
  box-shadow:inset 0 0 0 6px #15385f,inset 0 0 20px #12adff,
             0 0 0 3px #08b9ff,0 0 35px #007bffce,0 14px 20px #0008;
}
.wheel-visual:before{
  content:"";position:absolute;z-index:2;
  width:70px;height:70px;top:calc(50% - 35px);left:calc(50% - 35px);
  border-radius:50%;border:9px solid #92a9ba;
  background:radial-gradient(circle,#050b16 0 27%,#8c9db2 28% 50%,#092345 51%);
  box-shadow:0 0 11px #050e1f;
}
.wheel-visual:after{
  content:"";position:absolute;top:-35px;left:54%;width:25px;height:155px;
  border-radius:18px;transform:rotate(14deg);
  background:linear-gradient(90deg,#07101a,#244d79 43%,#849bb6 55%,#0a1425 95%);
  border:2px solid #081321;box-shadow:6px 1px 12px #000b;
}
.stats{gap:15px;margin:22px 0}
.metric{
  position:relative;overflow:hidden;padding:15px 18px 16px 90px;
  min-height:112px;border:1px solid #09b0ff;border-radius:12px;
  background:linear-gradient(140deg,#051124 0%,#082449 69%,#041022);
  box-shadow:inset 0 -3px 0 #0754a2,0 0 11px #068bff44;
}
.metric:before{
  position:absolute;top:22px;left:22px;font-size:2.65rem;line-height:1;
  font-weight:600;color:#c6eaff;text-shadow:0 0 10px #008bff;
}
.metric:nth-child(1):before{content:"▦"}
.metric:nth-child(2):before{content:"⚒"}
.metric:nth-child(3):before{content:"⬡"}
.metric:nth-child(4):before{content:"✓"}
.metric span{font-size:.92rem;font-weight:700;color:#ecf8ff}
.metric strong{font-size:2.6rem;color:#18dcff;text-shadow:0 0 13px #00c5ff8a}
.quick-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 4px 28px}
.quick-nav a{
  position:relative;min-height:74px;display:flex;align-items:center;justify-content:center;
  padding:14px 12px;gap:12px;
  border:2px solid #25d2ff;border-radius:13px;
  background:linear-gradient(180deg,#186bcc,#0a307e 65%,#062153);
  color:white;font-size:1.05rem;font-weight:900;
  box-shadow:inset 0 3px 8px #7cf5ff2e,inset 0 -4px 0 #029bf1,0 0 19px #00aaff67;
  text-shadow:0 1px 2px #00101d;
}
.quick-nav a:before{font-size:1.5rem;line-height:1}
.quick-nav a:nth-child(1):before{content:"▦"}
.quick-nav a:nth-child(2):before{content:"☷"}
.quick-nav a:nth-child(3):before{content:"⚙"}
.quick-nav a:hover,.quick-nav a:focus-visible{background:#1b61c1;box-shadow:0 0 22px #18c5ff}
.panel{
  position:relative;overflow:hidden;isolation:isolate;
  border:1.5px solid #08b9fa;border-radius:20px;
  background:linear-gradient(135deg,#061a35,#061225 72%,#092449);
  box-shadow:inset 0 0 14px #0886cb1a,0 0 11px #009cfa2b;
  padding:27px;margin:24px 0;
}
.panel:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.26;
  background:repeating-linear-gradient(130deg,transparent 0 62px,#0a83d5 63px 64px,transparent 65px 118px);
  mask-image:linear-gradient(90deg,transparent,#000);
}
.panel h2{font-size:clamp(1.45rem,2.7vw,2.15rem);letter-spacing:-.02em;font-weight:900}
.panel .eyebrow{font-size:.8rem;color:#35dbff}
.panel-head{align-items:center}
.pill{border-color:#00c4fa;box-shadow:0 0 9px #078eff66;color:#99f4ff;padding:6px 13px;font-weight:650}
.form-grid input,.form-grid select,.form-grid textarea,.search input,.job-editor input,.job-editor select,.job-editor textarea{
  border:2px solid #44cfff;border-radius:12px;box-shadow:0 0 0 1px #0d4771;
}
.button{border-radius:11px;min-height:49px}
.button.primary{
  background:linear-gradient(135deg,#04bcdf,#26e0ff);color:#02233b;
  box-shadow:0 0 15px #00baff4d;
}
.job-card,.staff-create,.staff-stats>div{
  background:linear-gradient(140deg,#061429,#09274b);
  border-color:#1399db;box-shadow:0 0 10px #0067c832;
}
.staff-stats strong{color:#2ce0ff}
.footer{color:#a7c8dd;line-height:1.6}
@media(max-width:1050px){
  .topbar{padding:12px 16px}.brand img{width:70px;height:70px}
  .hero{min-height:270px;padding:27px}
  .hero-badge{width:230px}.wheel-visual{transform:scale(.75);margin:-24px 0}
  .metric{padding:12px 12px 12px 62px;min-height:107px}
  .metric:before{left:13px;top:23px;font-size:2rem}
  .quick-nav{gap:11px}
}
@media(max-width:680px){
  .topbar{padding:12px 14px;gap:10px}
  .brand{gap:10px}.brand img{width:63px;height:63px}
  .brand strong{font-size:clamp(1.2rem,5vw,1.7rem)}
  .brand small{font-size:.64rem;letter-spacing:.09em}
  .topbar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .topbar nav a{font-size:.81rem;text-align:center;padding:10px 6px;justify-content:center;min-height:44px}
  .layout{padding:12px}
  .hero{min-height:0;padding:20px 19px 16px;display:block}
  .hero:after{left:92%;opacity:.22}
  .hero .eyebrow{font-size:.71rem;letter-spacing:.11em}
  .hero h1{font-size:clamp(1.9rem,9vw,2.7rem)}
  .hero p:not(.eyebrow){font-size:1rem}
  .hero-badge{display:flex;width:100%;margin:12px auto 0;gap:0}
  .wheel-visual{transform:scale(.65);margin:-37px 0}
  .hero-badge span{font-size:.84rem;letter-spacing:.08em;margin-top:-9px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .metric{padding:12px;min-height:106px}
  .metric:before{position:static;display:block;font-size:1.4rem;margin-bottom:4px}
  .metric span{font-size:.78rem;line-height:1.25}
  .metric strong{font-size:2rem}
  .quick-nav{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:17px 0}
  .quick-nav a{min-height:62px;padding:10px 8px;font-size:.86rem;line-height:1.25;gap:5px}
  .quick-nav a:nth-child(3){grid-column:1/-1}
  .quick-nav a:before{font-size:1.25rem}
  .panel{padding:17px;margin:16px 0}
  .panel-head{align-items:flex-start}
  .pill{font-size:.75rem}
}
/* Approved van illustration from Danny's original mobile-front-banner.png.
   Cropped in CSS to show the van, not the unrelated Care Plan pricing strip. */
.hero-badge{width:360px;max-width:39%;gap:6px}
.approved-van-frame{
  display:block;position:relative;flex:none;
  width:305px;max-width:100%;height:130px;margin:0 auto;
  background-image:url('/mobile-front-banner.png');
  background-size:auto 200px;background-position:left top;background-repeat:no-repeat;
  background-color:transparent;
  border-radius:12px;
  -webkit-mask-image:linear-gradient(90deg,#000 0 95%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 95%,transparent 100%);
  filter:drop-shadow(0 0 12px rgba(0,180,255,.5));
}
.hero-badge span{font-size:.86rem;letter-spacing:.10em}
@media(max-width:1050px){
  .hero-badge{width:280px;max-width:40%}
  .approved-van-frame{width:275px;height:118px;background-size:auto 185px}
}
@media(max-width:680px){
  .hero-badge{width:100%;max-width:100%;margin:8px 0 0;gap:0}
  .approved-van-frame{width:265px;height:107px;background-size:auto 170px;margin:0 auto}
  .hero-badge span{font-size:.73rem;letter-spacing:.08em;margin-top:1px}
  .hero h1{overflow-wrap:break-word;hyphens:auto}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* Full approved image: never crop, mask, zoom, or substitute the picture. */
.garage-top-art{
  width:100%;margin:0 0 18px;padding:0;
  background:#020814;border:2px solid #12b9ff;border-radius:18px;
  box-shadow:0 0 18px rgba(0,155,255,.55),inset 0 0 12px #092a4a;
  overflow:hidden;line-height:0;
}
.garage-top-art img{
  display:block;width:100%;height:auto;max-width:100%;
  object-fit:contain;object-position:center;
}
.hero{min-height:178px;padding:22px 30px}
.hero>div:first-child{max-width:100%}
.hero:after{display:none}
.hero .eyebrow{margin-bottom:7px}
.hero h1{margin-bottom:7px}
@media(max-width:680px){
  .garage-top-art{margin-bottom:12px;border-radius:12px}
  .hero{min-height:0;padding:19px}
  .hero h1{font-size:clamp(1.8rem,8.5vw,2.65rem)}
}