@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* Keep Leaflet panes and controls inside their map, below menus and overlays. */
.leaflet-container{position:relative;isolation:isolate;z-index:0}
:root{
  --navy:#10243f;--navy-2:#17395c;--sky:#eaf7ff;--sky-2:#cfeeff;--pink:#ffeef3;--pink-2:#f7b8c9;
  --bg:#fffdf9;--surface:#ffffff;--muted:#66788c;--line:#dce7ef;--green:#1f8a5b;--orange:#c77920;--red:#c94141;
  --shadow:0 18px 55px rgba(16,36,63,.10);--soft:0 10px 28px rgba(16,36,63,.07);--radius:18px;--radius-sm:12px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--navy);font-size:15px}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(1180px,92%);margin:auto}.narrow{max-width:780px}.section{padding:76px 0}.section.alt{background:#f7fbfd}.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}.section h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:8px 0 0}.lead{color:var(--muted);font-size:17px;line-height:1.7}.caption{font-size:12px;color:var(--muted)}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--sky);color:var(--navy-2);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:var(--navy);color:#fff;padding:13px 20px;font-weight:800;box-shadow:0 10px 24px rgba(16,36,63,.16);transition:.2s}.btn:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(16,36,63,.2)}.btn.alt{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}.btn.small{padding:9px 13px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.product-nav,.nav{position:sticky;top:0;z-index:1000;background:rgba(255,253,249,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(16,36,63,.08)}.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;line-height:1}.brand-logo{display:block;width:auto;height:62px;max-width:210px;object-fit:contain}.nav-links{display:flex;align-items:center;gap:20px;font-weight:750;font-size:14px}.mobile-menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;color:var(--navy);font-weight:800}.premium-hero{padding:76px 0;background:linear-gradient(180deg,#fffdf9 0,#f3fbff 100%);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr .86fr;gap:58px;align-items:center}.hero h1{font-size:clamp(42px,6vw,72px);line-height:1.02;margin:18px 0;color:var(--navy)}.hero p{font-size:18px;line-height:1.75;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.trust-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.trust-strip span,.trust-item{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 12px;color:var(--muted);font-size:13px;font-weight:750}.hero-composition{position:relative;min-height:500px}.hero-logo-card{position:absolute;inset:28px 28px 120px 42px;background:#fff;border:1px solid var(--line);border-radius:32px;display:grid;place-items:center;box-shadow:var(--shadow);padding:40px}.hero-logo-card img{max-width:82%;height:auto}.van-card,.arrival-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--soft)}.van-card{left:0;right:90px;bottom:54px}.arrival-card{right:0;top:82px;max-width:230px}.mini-label,.arrival-card span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}.van-route{display:flex;gap:8px;margin-top:18px}.van-route i{height:8px;flex:1;border-radius:99px;background:var(--sky-2)}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-card,.card,.panel,.mini-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--soft)}.service-card{padding:22px;display:grid;gap:14px}.service-card.recommended{border-color:var(--pink-2);box-shadow:0 18px 55px rgba(247,184,201,.24)}.service-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.service-type{font-size:12px;font-weight:850;color:var(--muted)}.service-card h3{font-size:22px;margin:0}.service-card p{color:var(--muted);line-height:1.65;margin:0}.service-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}.service-facts div{background:#f8fbfd;border-radius:12px;padding:10px}.service-facts dt{font-size:11px;color:var(--muted);font-weight:800}.service-facts dd{margin:3px 0 0;font-weight:850}.service-book{margin-top:4px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}.step-num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--pink);color:var(--navy);font-weight:900}.step h3{margin:18px 0 8px}.step p{color:var(--muted);line-height:1.6}.van-story{display:grid;grid-template-columns:.95fr 1.05fr;gap:24px;align-items:center;background:var(--navy);border-radius:32px;color:#fff;padding:42px}.van-story .lead{color:rgba(255,255,255,.76)}.van-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mini-panel{padding:18px;color:var(--navy)}.mini-panel span{display:block;margin-top:8px;color:var(--muted);line-height:1.5}.booking-flow{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.flow-main,.summary-panel{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:24px}.summary-panel{position:sticky;top:96px}.flow-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0;margin:0 0 24px;list-style:none}.flow-progress li{padding:10px 8px;border-radius:999px;background:#f4f7fa;color:var(--muted);font-size:12px;text-align:center;font-weight:850}.flow-progress li.active{background:var(--navy);color:#fff}.flow-step{display:none;animation:fadeUp .22s ease}.flow-step.active{display:block}.flow-step h3{font-size:26px;margin:0 0 18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}label{font-size:13px;font-weight:850}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:#fff;color:var(--navy);outline:none}textarea{min-height:104px;resize:vertical}input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(158,216,246,.75);outline-offset:2px}.field-error{border-color:var(--red)}.input-error{color:var(--red);font-weight:750}.choice-grid,.slot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.pet-choice input,.slot-choice input,.service-choice input{position:absolute;opacity:0}.pet-choice span,.slot-choice span,.service-choice span{display:flex;gap:9px;border:1px solid var(--line);padding:13px;border-radius:14px;cursor:pointer;font-weight:800;background:#fff}.slot-choice span{justify-content:center}.service-choice span{display:grid}.service-choice small{color:var(--muted);font-weight:650;margin-top:4px}.pet-choice input:checked+span,.slot-choice input:checked+span,.service-choice input:checked+span{background:var(--sky);border-color:var(--navy);color:var(--navy)}.booking-service-picker{display:grid;gap:10px}.capacity-note{background:var(--pink);border-radius:14px;padding:13px;color:var(--navy);font-weight:750}.location-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.location-fields{grid-template-columns:1fr}#map,#adminMap,#trackMap,#routeMap,#dispatchMap{height:430px;border-radius:18px;overflow:hidden;background:#eef6fb}.map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.notice{padding:13px 15px;border-radius:14px;margin:13px 0;font-size:13px;background:#f6f8fb;color:var(--muted)}.notice.ok{background:#e8f7ef;color:var(--green)}.notice.error{background:#fff0f0;color:var(--red)}.hint{background:#fff8e9;border:1px solid #f1dfbd;padding:12px 14px;border-radius:14px;color:#73521d;font-size:12px;line-height:1.55}.flow-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.flow-submit{display:none}.summary-line{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:13px 0}.summary-line span{color:var(--muted)}.summary-line strong{text-align:right}.review-card{display:grid;grid-template-columns:1fr 1fr;gap:12px}.review-card div{background:#f8fbfd;border:1px solid var(--line);border-radius:14px;padding:13px}.review-card span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.faq-wrap{display:grid;grid-template-columns:.7fr 1fr;gap:28px}.faq-list{display:grid;gap:10px}.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.faq-item summary{font-weight:900;cursor:pointer}.faq-item p{color:var(--muted);line-height:1.6}.footer{background:var(--navy);color:rgba(255,255,255,.75);padding:48px 0}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}.footer h4{color:#fff}.footer a{display:block;margin:9px 0}.footer .brand{color:#fff}.footer .brand-mark{height:56px}.footer .brand-word{font-size:22px}.powered{display:inline-block;margin-top:14px;color:rgba(255,255,255,.5)}
.success-panel{text-align:center;padding:42px}.success-panel h1{font-size:clamp(32px,5vw,48px);margin:14px 0}.success-mark{width:78px;height:78px;border-radius:24px;background:#e8f7ef;color:var(--green);display:grid;place-items:center;font-weight:950;margin:0 auto 22px}.center-actions{justify-content:center}.summary-box{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.summary-item{padding:14px;border-radius:14px;background:#f7fbfd}.summary-item small{display:block;color:var(--muted)}.full-span{grid-column:1/-1}.track-search{max-width:660px}.track-head{margin-bottom:20px}.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:24px 0}.timeline-step{text-align:center;border-radius:999px;background:#f4f7fa;color:var(--muted);padding:10px 8px;font-size:11px;font-weight:850}.timeline-step.active{background:var(--navy);color:#fff}.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900}.badge.pending,.badge.upcoming,.badge.assigned{background:#e7f4ff;color:#215174}.badge.confirmed,.badge.available{background:#e8f7ef;color:var(--green)}.badge.travelling,.badge.delayed,.badge.maintenance{background:#fff2df;color:var(--orange)}.badge.grooming{background:#f2e9ff;color:#6d48a3}.badge.completed{background:#e8f7ef;color:var(--green)}.badge.cancelled,.badge.offline{background:#fff0f0;color:var(--red)}
.admin-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--navy);color:#fff;padding:22px 16px;display:flex;flex-direction:column}.side-brand{padding:4px 8px 20px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:16px}.side-brand-logo{display:block;width:100%;max-width:190px;background:#fff;border-radius:18px;padding:8px}.sidebar nav{display:grid;gap:4px}.sidebar nav a{padding:11px 13px;border-radius:14px;color:rgba(255,255,255,.72);font-weight:800;font-size:14px}.sidebar nav a.active,.sidebar nav a:hover{background:rgba(255,255,255,.12);color:#fff}.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:16px 8px;display:grid;gap:3px}.side-foot small{opacity:.58}.admin-main{padding:28px;background:#f5f9fc;min-width:0}.admin-top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.admin-top h1{margin:0;font-size:32px}.admin-top p{color:var(--muted);margin:6px 0 0}.admin-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.admin-search{max-width:260px}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:20px 0}.metric{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--soft)}.metric span{font-size:11px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.06em}.metric strong{display:block;margin-top:6px;font-size:clamp(22px,2.2vw,31px);line-height:1.15;overflow-wrap:anywhere}.dash-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.panel{padding:22px}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.activity-list,.booking-list{display:grid;gap:12px}.activity,.booking-row{display:flex;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff}.activity small,.booking-row small{display:block;color:var(--muted)}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.filters input{min-width:min(360px,100%)}.booking-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--soft)}.booking-card-main{display:flex;justify-content:space-between;gap:24px}.booking-value{text-align:right;min-width:150px}.booking-card details{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}.booking-card summary{cursor:pointer;font-weight:900;color:var(--navy)}.ops-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.table th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:#f8fbfd}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(190px,1fr));gap:12px;overflow:auto}.day-column{background:#fff;border:1px solid var(--line);border-radius:18px;min-height:420px;padding:12px}.calendar-job{display:grid;gap:4px;margin-top:10px;padding:12px;border-radius:14px;background:#f7fbfd;border-left:4px solid var(--sky-2)}.report-row{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.bar{height:12px;background:#eef3f6;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:var(--navy);border-radius:999px}.admin-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.customer-head{display:flex;gap:14px;align-items:center}.avatar{width:48px;height:48px;border-radius:16px;background:var(--sky);display:grid;place-items:center;font-weight:950}.customer-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.customer-stats span{background:#f7fbfd;border-radius:14px;padding:12px}.login-page{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#fffdf9,#eaf7ff)}.login-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow)}.login-brand-logo{display:block;width:min(260px,90%);height:auto;margin:0 auto 22px}.password-wrap{position:relative}.password-wrap button{position:absolute;right:8px;top:8px;border:0;background:#f4f7fa;border-radius:999px;padding:7px 10px;color:var(--navy);font-weight:800}.map-fallback{height:100%;min-height:260px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);font-weight:800}.dispatch-layout{display:grid;grid-template-columns:1fr 360px;gap:18px}.dispatch-side{display:grid;gap:14px}.service-setting{display:grid;grid-template-columns:1fr 120px 100px 90px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.switch{font-size:12px;color:var(--muted)}@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:1080px){.hero-grid,.van-story,.booking-flow,.dash-grid,.dispatch-layout{grid-template-columns:1fr}.summary-panel{position:relative;top:auto}.service-grid,.admin-cards{grid-template-columns:repeat(2,1fr)}.metrics{grid-template-columns:repeat(3,1fr)}.location-layout{grid-template-columns:1fr}.admin-shell{display:block}.sidebar{height:auto;position:relative}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{white-space:nowrap}.side-foot{display:none}}
@media(max-width:720px){.nav-inner{height:auto;min-height:72px}.mobile-menu-btn{display:inline-flex}.nav-links{display:none;position:absolute;left:4%;right:4%;top:74px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow);align-items:stretch}.nav-links.open{display:grid}.brand-logo,.nav-inner .brand-logo{height:52px;max-width:170px}.hero{padding:46px 0}.hero-composition{min-height:380px}.hero-logo-card{inset:20px 0 110px}.van-card{right:20px;left:20px}.arrival-card{display:none}.section{padding:54px 0}.section-head,.booking-card-main,.admin-top{display:grid}.service-grid,.steps,.form-grid,.choice-grid,.slot-grid,.review-card,.summary-box,.footer-grid,.van-story-grid,.admin-cards,.metrics{grid-template-columns:1fr}.flow-progress{grid-template-columns:repeat(3,1fr)}.flow-actions{position:sticky;bottom:0;background:#fff;padding-top:12px}.flow-actions .btn{flex:1}.admin-main{padding:16px}#map,#adminMap,#trackMap,#routeMap,#dispatchMap{height:360px}.timeline{grid-template-columns:1fr 1fr}.service-setting{grid-template-columns:1fr}.report-row{grid-template-columns:1fr}.table th,.table td{padding:10px}.booking-value{text-align:left}.week-grid{grid-template-columns:repeat(7,230px)}}
.slot-choice.disabled span{background:#f1f4f7;color:#8b9aad;border-color:#e4eaf0;cursor:not-allowed;text-decoration:line-through}.slot-choice.disabled{pointer-events:none}
.powered{display:inline-flex;align-items:center;width:max-content;margin-top:14px;font-weight:950;letter-spacing:.02em;background:linear-gradient(90deg,#70d7ff 0%,#ff7cbd 34%,#8fe8ff 68%,#ff9ad0 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 14px rgba(112,215,255,.45),0 0 22px rgba(255,124,189,.35);animation:poweredGlow 4.2s ease-in-out infinite}
.powered:before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:linear-gradient(135deg,#70d7ff,#ff7cbd);box-shadow:0 0 14px rgba(112,215,255,.85),0 0 20px rgba(255,124,189,.7)}
.sidebar .powered{font-size:12px;margin-top:8px}.footer .powered{font-size:13px}.page-powered{display:flex;justify-content:center;margin:28px auto 0}
@keyframes poweredGlow{0%,100%{background-position:0% 50%;filter:saturate(1)}50%{background-position:100% 50%;filter:saturate(1.28)}}
@media(prefers-reduced-motion:reduce){.powered{animation:none}}

/* Premium warmth pass */
body{background:
  radial-gradient(circle at 12% -10%,rgba(207,238,255,.65),transparent 32%),
  radial-gradient(circle at 85% 8%,rgba(255,238,243,.85),transparent 28%),
  linear-gradient(180deg,#fffdf9 0,#f7fbff 48%,#fffdf9 100%);
}
.admin-main{background:
  radial-gradient(circle at 18% -8%,rgba(207,238,255,.75),transparent 30%),
  radial-gradient(circle at 98% 4%,rgba(255,238,243,.9),transparent 24%),
  #f7fbff;
}
.sidebar{background:linear-gradient(180deg,#10243f 0,#17395c 58%,#10243f 100%);box-shadow:18px 0 55px rgba(16,36,63,.12)}
.sidebar:before{content:"";height:5px;border-radius:99px;background:linear-gradient(90deg,#cfeeff,#f7b8c9,#fff8e9);margin:0 8px 18px}
.sidebar nav a{position:relative;transition:.18s ease}
.sidebar nav a.active{background:rgba(255,255,255,.16);box-shadow:inset 3px 0 0 #f7b8c9}
.sidebar nav a:hover{transform:translateX(2px)}
.panel,.metric,.service-card,.booking-card,.day-column,.login-card,.flow-main,.summary-panel{box-shadow:0 16px 44px rgba(16,36,63,.08),0 1px 0 rgba(255,255,255,.75) inset}
.btn{background:linear-gradient(135deg,#10243f,#17395c)}
.btn.alt{background:rgba(255,255,255,.86);backdrop-filter:blur(12px)}
.eyebrow{box-shadow:0 8px 22px rgba(107,174,214,.12)}
.admin-top h1,.calendar-hero h1{letter-spacing:-.03em}
.calendar-main{padding:0;overflow:hidden}
.calendar-main>.calendar-hero,.calendar-main>.calendar-stats,.calendar-main>.calendar-toolbar,.calendar-main>.calendar-board,.calendar-main>.unscheduled-panel{width:min(1500px,calc(100% - 48px));margin-left:auto;margin-right:auto}
.calendar-hero{margin-top:24px;padding:30px;border-radius:30px;background:
  linear-gradient(135deg,rgba(16,36,63,.96),rgba(23,57,92,.92)),
  radial-gradient(circle at 85% 20%,rgba(247,184,201,.35),transparent 28%);
  color:#fff;display:flex;align-items:center;justify-content:space-between;gap:22px;box-shadow:0 24px 70px rgba(16,36,63,.20)
}
.calendar-hero .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.calendar-hero h1{font-size:clamp(34px,4vw,54px);margin:12px 0 8px}
.calendar-hero p{margin:0;color:rgba(255,255,255,.72);max-width:620px;line-height:1.6}
.calendar-switcher{display:flex;gap:8px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px}
.calendar-switcher a{padding:10px 16px;border-radius:999px;color:rgba(255,255,255,.74);font-weight:900}
.calendar-switcher a.active{background:#fff;color:var(--navy);box-shadow:0 12px 28px rgba(0,0,0,.16)}
.calendar-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:18px}
.calendar-stats div{background:rgba(255,255,255,.88);border:1px solid rgba(220,231,239,.9);border-radius:22px;padding:18px;box-shadow:var(--soft);backdrop-filter:blur(16px)}
.calendar-stats span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:950}
.calendar-stats strong{display:block;font-size:clamp(22px,2.4vw,32px);margin-top:7px;letter-spacing:-.03em}
.calendar-stats small{display:block;color:var(--muted);margin-top:5px}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;margin-bottom:16px}
.calendar-legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.calendar-legend span{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:var(--muted);font-size:12px;font-weight:850}
.calendar-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--sky-2)}
.calendar-legend i.confirmed{background:var(--green)}.calendar-legend i.travelling{background:var(--orange)}.calendar-legend i.grooming{background:#7a56b3}.calendar-legend i.completed{background:#2c9b6c}
.calendar-board{display:grid;grid-template-columns:repeat(7,minmax(190px,1fr));gap:14px;padding-bottom:28px}
.view-day .calendar-board{grid-template-columns:minmax(320px,720px)}
.view-week .calendar-board{grid-template-columns:repeat(7,minmax(190px,1fr))}
.day-column{min-height:315px;border-radius:24px;padding:14px;background:rgba(255,255,255,.9);border:1px solid rgba(220,231,239,.95);position:relative;overflow:hidden}
.day-column:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,#cfeeff,#ffeef3);opacity:.9}
.day-column.today{border-color:#9ed8f6;box-shadow:0 22px 55px rgba(107,174,214,.18)}
.day-column.over-capacity{border-color:#f1c38c}
.day-column header{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;padding:6px 4px 12px;margin-bottom:4px}
.day-column header strong{font-size:15px}.day-column header span{display:block;color:var(--muted);font-weight:800;margin-top:2px}.day-column header em{font-style:normal;background:var(--sky);color:var(--navy);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:950}
.calendar-job{position:relative;border:0;border-radius:18px;padding:13px 13px 13px 16px;background:#fff;box-shadow:0 10px 26px rgba(16,36,63,.07);transition:.18s ease;overflow:hidden}
.calendar-job:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#6baed6}
.calendar-job:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(16,36,63,.12)}
.calendar-job .job-time{display:inline-flex;width:max-content;background:#f4f8fb;color:var(--navy);border-radius:999px;padding:5px 8px;font-size:11px;font-weight:950;margin-bottom:7px}
.calendar-job strong{line-height:1.35}.calendar-job small{color:var(--muted);line-height:1.35}
.calendar-job.confirmed:before,.calendar-job.completed:before{background:var(--green)}
.calendar-job.travelling:before,.calendar-job.delayed:before{background:var(--orange)}
.calendar-job.grooming:before{background:#7a56b3}
.calendar-job.cancelled:before{background:var(--red)}
.empty-day{display:grid;place-items:center;text-align:center;min-height:145px;border:1px dashed #cfdde8;border-radius:18px;background:linear-gradient(180deg,#fbfdff,#fff);color:var(--muted);padding:18px}
.empty-day strong{color:var(--navy)}.empty-day span{font-size:12px;margin-top:4px}
.unscheduled-panel{margin-bottom:28px}
.hero-logo-card{box-shadow:0 28px 80px rgba(16,36,63,.13),0 0 0 10px rgba(255,255,255,.35)}
.service-card.recommended{background:linear-gradient(180deg,#fff,#fff7fa);transform:translateY(-3px)}
.service-card:hover,.metric:hover,.panel:hover{transform:translateY(-1px);transition:.18s ease}
@media(max-width:1180px){.calendar-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-board,.view-week .calendar-board{grid-template-columns:repeat(3,minmax(220px,1fr))}}
@media(max-width:760px){.calendar-main>.calendar-hero,.calendar-main>.calendar-stats,.calendar-main>.calendar-toolbar,.calendar-main>.calendar-board,.calendar-main>.unscheduled-panel{width:min(100% - 28px,1500px)}.calendar-hero{display:grid;padding:22px;border-radius:24px}.calendar-switcher{width:100%;justify-content:space-between}.calendar-switcher a{flex:1;text-align:center}.calendar-stats{grid-template-columns:1fr}.calendar-toolbar{display:grid}.calendar-board,.view-week .calendar-board,.view-month .calendar-board{grid-template-columns:1fr}.day-column{min-height:auto}.calendar-legend{gap:6px}}

.nav-links.always-visible{display:flex;position:static;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;align-items:center}
@media(max-width:720px){.nav-links.always-visible{display:flex;position:static;gap:8px}.nav-links.always-visible .btn{padding:10px 13px}.flow-actions{background:var(--surface)}}

/* Dark mode */
html[data-theme="dark"]{
  color-scheme:dark;
  --navy:#eaf7ff;--navy-2:#b9d8ef;--sky:#102b44;--sky-2:#245a7e;--pink:#321827;--pink-2:#ff83bf;
  --bg:#071320;--surface:#101f31;--muted:#9fb3c9;--line:rgba(207,238,255,.16);--green:#69d39c;--orange:#ffbf75;--red:#ff8383;
  --shadow:0 24px 70px rgba(0,0,0,.34);--soft:0 14px 34px rgba(0,0,0,.24);
}
html[data-theme="dark"] body{background:
  radial-gradient(circle at 10% -10%,rgba(36,90,126,.34),transparent 34%),
  radial-gradient(circle at 88% 8%,rgba(255,124,189,.14),transparent 28%),
  linear-gradient(180deg,#071320 0,#0b1b2b 52%,#071320 100%);color:#eaf7ff}
html[data-theme="dark"] .premium-hero{background:linear-gradient(180deg,#071320 0,#0d2134 100%)}
html[data-theme="dark"] .section.alt{background:rgba(16,31,49,.58)}
html[data-theme="dark"] .product-nav,html[data-theme="dark"] .nav{background:rgba(7,19,32,.86);border-bottom-color:rgba(207,238,255,.12)}
html[data-theme="dark"] .admin-main{background:
  radial-gradient(circle at 18% -8%,rgba(36,90,126,.38),transparent 30%),
  radial-gradient(circle at 98% 4%,rgba(255,124,189,.12),transparent 24%),
  #071320}
html[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#06111f 0,#10243f 58%,#071320 100%);box-shadow:18px 0 55px rgba(0,0,0,.28)}
html[data-theme="dark"] .footer,html[data-theme="dark"] .van-story,html[data-theme="dark"] .calendar-hero{background:linear-gradient(135deg,#071320,#10243f 62%,#261527);color:#eaf7ff}
html[data-theme="dark"] .panel,html[data-theme="dark"] .metric,html[data-theme="dark"] .service-card,html[data-theme="dark"] .booking-card,html[data-theme="dark"] .day-column,html[data-theme="dark"] .flow-main,html[data-theme="dark"] .summary-panel,html[data-theme="dark"] .login-card,html[data-theme="dark"] .mini-panel,html[data-theme="dark"] .activity,html[data-theme="dark"] .booking-row,html[data-theme="dark"] .table-wrap,html[data-theme="dark"] .calendar-stats div,html[data-theme="dark"] .faq-item,html[data-theme="dark"] .van-card,html[data-theme="dark"] .arrival-card,html[data-theme="dark"] .hero-logo-card,html[data-theme="dark"] .step{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14);color:#eaf7ff;box-shadow:0 18px 48px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.05) inset}
html[data-theme="dark"] .service-card.recommended{background:linear-gradient(180deg,rgba(16,31,49,.92),rgba(50,24,39,.82));border-color:rgba(255,131,191,.58)}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:rgba(7,19,32,.9);color:#eaf7ff;border-color:rgba(207,238,255,.18)}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:rgba(159,179,201,.72)}
html[data-theme="dark"] .btn{background:linear-gradient(135deg,#70d7ff,#ff83bf);color:#06111f;box-shadow:0 16px 36px rgba(255,131,191,.16)}
html[data-theme="dark"] .btn.alt,html[data-theme="dark"] .mobile-menu-btn{background:rgba(16,31,49,.86);color:#eaf7ff;border-color:rgba(207,238,255,.18);box-shadow:0 12px 30px rgba(0,0,0,.22)}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .trust-strip span,html[data-theme="dark"] .trust-item,html[data-theme="dark"] .calendar-legend span{background:rgba(112,215,255,.12);border-color:rgba(207,238,255,.16);color:#bfe8ff}
html[data-theme="dark"] .service-facts div,html[data-theme="dark"] .summary-item,html[data-theme="dark"] .review-card div,html[data-theme="dark"] .customer-stats span,html[data-theme="dark"] .calendar-job,html[data-theme="dark"] .timeline-step,html[data-theme="dark"] .flow-progress li{background:rgba(7,19,32,.62);border-color:rgba(207,238,255,.12);color:#eaf7ff}
html[data-theme="dark"] .flow-progress li.active,html[data-theme="dark"] .timeline-step.active{background:linear-gradient(135deg,#70d7ff,#ff83bf);color:#06111f}
html[data-theme="dark"] .pet-choice span,html[data-theme="dark"] .slot-choice span,html[data-theme="dark"] .service-choice span{background:rgba(7,19,32,.72);border-color:rgba(207,238,255,.16);color:#eaf7ff}
html[data-theme="dark"] .pet-choice input:checked+span,html[data-theme="dark"] .slot-choice input:checked+span,html[data-theme="dark"] .service-choice input:checked+span{background:rgba(112,215,255,.16);border-color:#70d7ff;color:#eaf7ff}
html[data-theme="dark"] .capacity-note,html[data-theme="dark"] .hint{background:rgba(255,191,117,.12);border-color:rgba(255,191,117,.22);color:#ffd8a7}
html[data-theme="dark"] .notice{background:rgba(112,215,255,.1);color:#b9d8ef}
html[data-theme="dark"] .notice.ok{background:rgba(105,211,156,.12);color:#8de8b9}
html[data-theme="dark"] .notice.error{background:rgba(255,131,131,.12);color:#ffadad}
html[data-theme="dark"] .empty-day{background:linear-gradient(180deg,rgba(7,19,32,.52),rgba(16,31,49,.72));border-color:rgba(207,238,255,.18)}
html[data-theme="dark"] .empty-day strong,html[data-theme="dark"] .booking-card summary{color:#eaf7ff}
html[data-theme="dark"] .table th{background:rgba(7,19,32,.78)}
html[data-theme="dark"] .bar{background:rgba(207,238,255,.12)}
html[data-theme="dark"] .bar i{background:linear-gradient(90deg,#70d7ff,#ff83bf)}
html[data-theme="dark"] .success-mark{background:rgba(105,211,156,.13);color:#8de8b9}
html[data-theme="dark"] #map,html[data-theme="dark"] #adminMap,html[data-theme="dark"] #trackMap,html[data-theme="dark"] #routeMap,html[data-theme="dark"] #dispatchMap{background:#0b1b2b}
html[data-theme="dark"] .side-brand-logo,html[data-theme="dark"] .hero-logo-card img,html[data-theme="dark"] .login-brand-logo{filter:drop-shadow(0 16px 30px rgba(0,0,0,.22))}
html[data-theme="dark"] .powered{text-shadow:0 0 16px rgba(112,215,255,.65),0 0 28px rgba(255,124,189,.55)}

/* Mobile hardening */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:92px}
img{max-width:100%;height:auto}
body{overflow-x:hidden}
.brand-logo,.side-brand-logo,.login-brand-logo,.hero-logo-card img{height:auto}
.brand-logo{height:62px}
.table-wrap,.calendar-board,.week-grid,.sidebar nav{-webkit-overflow-scrolling:touch}
/* Use dynamic viewport units where supported to avoid mobile URL-bar jump */
@supports(min-height:100dvh){.login-page{min-height:100dvh}.admin-shell{min-height:100dvh}}
/* Prevent iOS Safari auto-zoom: form controls must be >=16px on touch screens */
@media(max-width:768px){
  input,select,textarea{font-size:16px}
  .btn,.mobile-menu-btn{min-height:44px}
  .sidebar nav a{padding:12px 14px}
}
@media(max-width:720px){
  .container{width:min(1180px,94%)}
  .filters{display:grid;grid-template-columns:1fr 1fr}
  .filters input,.filters>.btn,.filters>a{grid-column:1/-1}
  .filters input{min-width:0}
  .admin-actions{width:100%}
  .admin-search{max-width:100%;width:100%}
  .flow-actions{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .nav,.product-nav{padding-top:env(safe-area-inset-top)}
  .summary-box,.review-card{grid-template-columns:1fr}
  .ops-actions .btn{flex:1 1 auto}
}
@media(max-width:420px){
  .flow-progress{grid-template-columns:repeat(2,1fr)}
  .choice-grid,.slot-grid{grid-template-columns:1fr}
  .timeline,.calendar-stats{grid-template-columns:1fr}
}

/* =====================================================================
   PET TOUR · DESIGN REFINEMENT LAYER
   Senior pass — typography, rhythm, elevation, motion, components.
   Appended last so it refines the base system without touching markup.
   ===================================================================== */
:root{
  --font-sans:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --accent:#ff7aa8;
  --ease:cubic-bezier(.22,1,.36,1);
  --soft:0 1px 2px rgba(14,33,56,.05),0 10px 30px rgba(14,33,56,.07);
  --shadow:0 6px 18px rgba(14,33,56,.08),0 30px 64px rgba(14,33,56,.13);
  --ring:0 0 0 4px rgba(120,200,245,.42);
  --radius:20px;--radius-sm:14px;
}
*{-webkit-tap-highlight-color:transparent}
body{font-family:var(--font-sans);font-size:15.5px;line-height:1.62;letter-spacing:-.012em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.032em;line-height:1.08}
.hero h1{letter-spacing:-.045em}
.lead{font-weight:450;letter-spacing:-.006em}
.eyebrow{text-transform:uppercase;letter-spacing:.045em;font-weight:700;font-size:11.5px;padding:7px 13px}
::selection{background:rgba(255,122,168,.26);color:var(--navy)}

/* Buttons — modern soft-rect with tactile motion */
.btn{border-radius:14px;padding:14px 22px;font-weight:700;letter-spacing:-.01em;box-shadow:0 6px 16px rgba(14,33,56,.15);transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,33,56,.22)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.alt{box-shadow:var(--soft)}
.btn.small{border-radius:11px;padding:9px 15px}

/* Form controls — calmer borders, brand focus ring */
input,select,textarea{border-radius:14px;border:1.5px solid var(--line);transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:#bcd0e0}
input:focus,select:focus,textarea:focus{border-color:#6ec4f2;box-shadow:var(--ring);outline:none}
label{color:var(--navy);letter-spacing:-.01em}

/* Cards & elevation — unified radius and lift */
.service-card,.card,.panel,.metric,.booking-card,.flow-main,.summary-panel,.login-card,.step,.mini-panel,.faq-item{border-radius:var(--radius);box-shadow:var(--soft);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .2s}
.service-card:hover,.metric:hover,.panel:hover,.step:hover,.faq-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.summary-panel{border-radius:24px}

/* Navigation — animated underline */
.nav,.product-nav{border-bottom:1px solid rgba(14,33,56,.07)}
.nav-links a:not(.btn){position:relative;font-weight:600;color:var(--muted);transition:color .15s}
.nav-links a:not(.btn):hover{color:var(--navy)}
.nav-links a:not(.btn):after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;border-radius:2px;background:var(--navy);transition:right .28s var(--ease)}
.nav-links a:not(.btn):hover:after{right:0}

/* Hero — subtle dot field that fades into the page */
.premium-hero{position:relative}
.premium-hero>.container{position:relative;z-index:1}
.premium-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(14,33,56,.06) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);mask-image:linear-gradient(180deg,#000,transparent 72%);pointer-events:none}

/* Service & wizard detailing */
.service-card h3{font-size:23px;letter-spacing:-.025em}
.flow-progress li{font-weight:700;font-size:11.5px;transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.flow-progress li.active{box-shadow:0 8px 20px rgba(16,36,63,.22)}
.pet-choice span,.slot-choice span,.service-choice span{border:1.5px solid var(--line);transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease)}
.pet-choice span:hover,.slot-choice span:hover,.service-choice span:hover{border-color:#bcd0e0;transform:translateY(-1px)}
.pet-choice input:checked+span,.slot-choice input:checked+span,.service-choice input:checked+span{box-shadow:0 8px 22px rgba(110,196,242,.28)}
.badge{padding:6px 11px;font-weight:700;letter-spacing:.01em}

/* Admin tightening */
.admin-top h1{letter-spacing:-.035em}
.metric strong{letter-spacing:-.03em}
.sidebar nav a{font-weight:700;letter-spacing:-.01em}
.footer a{transition:color .15s}.footer a:hover{color:#fff}

/* Custom scrollbars */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:rgba(14,33,56,.2);background-clip:content-box;border:3px solid transparent;border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:rgba(14,33,56,.34);background-clip:content-box}

/* Keyboard focus consistency */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* Dark-mode patches for the refinement layer */
html[data-theme="dark"] .premium-hero:before{background-image:radial-gradient(rgba(207,238,255,.07) 1px,transparent 1.4px)}
html[data-theme="dark"] input:hover,html[data-theme="dark"] select:hover,html[data-theme="dark"] textarea:hover{border-color:rgba(207,238,255,.32)}
html[data-theme="dark"] .nav-links a:not(.btn):after{background:#70d7ff}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:rgba(207,238,255,.22);background-clip:content-box}
html[data-theme="dark"] ::selection{background:rgba(255,131,191,.32);color:#fff}

/* ---- Booking wizard: clearer stepper & paging ---- */
.flow-head{margin-bottom:18px}
.flow-meta{display:block;font-weight:800;color:var(--navy);font-size:13px;letter-spacing:-.01em;margin-bottom:10px}
.flow-track{height:7px;border-radius:99px;background:#eef3f7;overflow:hidden}
.flow-track span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#70d7ff,#ff7aa8);transition:width .35s var(--ease)}
.flow-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;list-style:none;padding:0;margin:0 0 22px}
.flow-progress li{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;padding:0;color:var(--muted);font-size:11px;font-weight:800;text-align:center}
.flow-progress li .flow-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eef3f7;color:var(--muted);font-size:13px;font-weight:900;border:2px solid transparent;transition:.2s var(--ease)}
.flow-progress li em{font-style:normal;opacity:.9}
.flow-progress li.active{color:var(--navy)}
.flow-progress li.active .flow-num{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(16,36,63,.22)}
.flow-progress li.done .flow-num{background:#e8f7ef;color:transparent;border-color:#bfe8cf;position:relative}
.flow-progress li.done .flow-num:after{content:"";position:absolute;width:7px;height:12px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}
.flow-actions{align-items:center}
.flow-actions .btn[data-next],.flow-actions .flow-submit{min-width:180px}
html[data-theme="dark"] .flow-track{background:rgba(207,238,255,.12)}
html[data-theme="dark"] .flow-progress li .flow-num{background:rgba(7,19,32,.6);color:var(--muted)}
html[data-theme="dark"] .flow-progress li.active .flow-num{background:linear-gradient(135deg,#70d7ff,#ff83bf);color:#06111f}
html[data-theme="dark"] .flow-progress li.done .flow-num{background:rgba(105,211,156,.16);border-color:rgba(105,211,156,.4)}
html[data-theme="dark"] .flow-progress li.done .flow-num:after{border-color:#8de8b9}
@media(max-width:560px){
  .flow-progress{grid-template-columns:repeat(6,1fr);gap:5px}
  .flow-progress li em{display:none}
  .flow-progress li .flow-num{width:27px;height:27px;font-size:12px}
}

/* ---- What We Offer section ---- */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.offer-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--soft);display:flex;flex-direction:column;gap:10px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.offer-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.offer-media,.offer-banner-media{display:grid;place-items:center;font-weight:900;letter-spacing:.05em;text-transform:uppercase;font-size:12px}
.offer-media{aspect-ratio:16/10;border-radius:14px;background:linear-gradient(135deg,var(--sky),var(--pink));color:var(--navy-2);border:1px dashed rgba(16,36,63,.18)}
.offer-card h3{margin:2px 0 0;font-size:19px;letter-spacing:-.02em}
.offer-card p{color:var(--muted);line-height:1.6;margin:0}
.offer-banner{margin-top:18px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;background:var(--navy);color:#fff;border-radius:28px;padding:32px;overflow:hidden}
.offer-banner .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.offer-banner h3{font-size:clamp(22px,2.6vw,32px);margin:12px 0;letter-spacing:-.02em}
.offer-banner p{color:rgba(255,255,255,.78);line-height:1.65;margin:0 0 18px}
.offer-banner-media{aspect-ratio:4/3;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));color:rgba(255,255,255,.72);border:1px dashed rgba(255,255,255,.28)}
.offer-media,.offer-banner-media{border-style:solid;text-transform:none;letter-spacing:0;text-align:center}
.offer-media{background:linear-gradient(135deg,#eaf7ff 0%,#f8fbff 48%,#fff1f7 100%);border-color:rgba(178,209,229,.8);color:#17395c}
.offer-media-van:before,.offer-media-care:before,.offer-media-track:before{content:"";display:block;width:48px;height:48px;border-radius:18px;margin:0 auto 10px;background:linear-gradient(135deg,#70d7ff,#ff83bf);box-shadow:0 14px 34px rgba(112,215,255,.24)}
.offer-banner{background:linear-gradient(135deg,#10243f 0%,#17395c 68%,#281a31 100%);box-shadow:0 22px 70px rgba(16,36,63,.18)}
.offer-banner-media{display:flex;flex-direction:column;justify-content:center;gap:8px;background:linear-gradient(135deg,rgba(112,215,255,.14),rgba(255,131,191,.12));border-color:rgba(207,238,255,.18);color:#eaf7ff}
.offer-banner-media strong{font-size:clamp(22px,3vw,34px);line-height:1}
.offer-banner-media span{max-width:220px;color:rgba(234,247,255,.72);line-height:1.5}

/* ---- Booking: confirm tick + submit hint ---- */
.booking-section-head{align-items:flex-start}
.booking-intro{max-width:520px}
.booking-intro .lead{margin:0}
.booking-intro-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.booking-intro-list span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:var(--muted);font-size:12px;font-weight:800}
.flow-step-intro{max-width:720px;margin:-8px 0 18px;color:var(--muted);line-height:1.65}
.booking-group,.booking-details{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#f9fcff);padding:16px;margin-bottom:14px}
.booking-group.full,.booking-details.full{grid-column:1/-1}
.booking-group-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}
.booking-group-head strong{font-size:15px;color:var(--navy)}
.booking-group-head span{color:var(--muted);font-size:12px;font-weight:800;text-align:right}
.booking-details summary{cursor:pointer;font-weight:900;color:var(--navy);list-style:none}
.booking-details summary::-webkit-details-marker{display:none}
.booking-details summary:after{content:"+";float:right;color:var(--muted);font-weight:900}
.booking-details[open] summary{margin-bottom:14px}
.booking-details[open] summary:after{content:"-"}
.review-notes{margin-top:14px}
.summary-note{margin:8px 0 4px;color:var(--muted);font-size:13px;line-height:1.55}
.summary-checklist{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.summary-checklist span{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 10px;color:var(--muted);font-size:12px;font-weight:850;background:#f8fbfd}
.summary-checklist span:before{content:"";width:8px;height:8px;border-radius:50%;background:#c7d5e0}
.summary-checklist span.done{color:var(--green);border-color:#bfe8cf;background:#eefaf3}
.summary-checklist span.done:before{background:var(--green)}
.flow-progress{grid-template-columns:repeat(5,1fr)}
.confirm-check{display:flex;gap:12px;align-items:flex-start;background:var(--sky);border:1.5px solid var(--sky-2);border-radius:16px;padding:14px 16px;margin-top:16px;cursor:pointer;line-height:1.5}
.confirm-check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--navy)}
.confirm-check span{font-weight:700;color:var(--navy)}
.flow-submit-hint{margin-top:10px}
.flow-submit-hint:empty{display:none}

/* ---- Admin fleet ---- */
.fleet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.van-card-admin .ops-actions{margin-top:14px}

/* dark mode for the above */
html[data-theme="dark"] .offer-card{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .offer-media{background:linear-gradient(135deg,rgba(112,215,255,.16),rgba(255,131,191,.14));color:#bfe8ff;border-color:rgba(207,238,255,.2)}
html[data-theme="dark"] .booking-intro-list span{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .booking-group,html[data-theme="dark"] .booking-details{background:rgba(7,19,32,.42);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .booking-group-head strong,html[data-theme="dark"] .booking-details summary{color:#eaf7ff}
html[data-theme="dark"] .summary-checklist span{background:rgba(7,19,32,.52);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .summary-checklist span.done{background:rgba(105,211,156,.12);border-color:rgba(105,211,156,.35);color:#8de8b9}
html[data-theme="dark"] .confirm-check{background:rgba(112,215,255,.1);border-color:rgba(207,238,255,.18)}
html[data-theme="dark"] .confirm-check span{color:#eaf7ff}

/* ---- Mobile priority ---- */
@media(max-width:980px){
  .offer-grid{grid-template-columns:1fr 1fr}
  .fleet-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .offer-grid{grid-template-columns:1fr}
  .offer-banner{grid-template-columns:1fr;padding:22px}
  .offer-banner-media{order:-1;aspect-ratio:16/9}
  .booking-intro{max-width:none}
  .booking-group-head{display:grid}
  .booking-group-head span{text-align:left}
  .summary-checklist{grid-template-columns:1fr}
  .confirm-check{padding:13px 14px}
}

/* ---- Walking paw-print trail ---- */
.paw-band{position:relative;height:78px;overflow:hidden;pointer-events:none;margin:0}
[data-paw-trail]{pointer-events:none}
[data-paw-trail] .paw{position:absolute;transform:translate(-50%,-50%);color:var(--pink-2)}
[data-paw-trail] .paw:nth-child(3n) .paw,[data-paw-trail] .paw:nth-child(3n){color:var(--sky-2)}
[data-paw-trail] .paw i{display:block;width:100%;height:100%;opacity:0;transform:rotate(var(--paw-rot,0deg)) scale(.5);animation:pawWalk var(--paw-dur,6s) linear infinite;animation-delay:var(--paw-delay,0s);will-change:opacity,transform}
[data-paw-trail] .paw svg{display:block;width:100%;height:100%;fill:currentColor}
@keyframes pawWalk{
  0%{opacity:0;transform:rotate(var(--paw-rot,0deg)) scale(.5)}
  7%{opacity:.55;transform:rotate(var(--paw-rot,0deg)) scale(1)}
  24%{opacity:.55;transform:rotate(var(--paw-rot,0deg)) scale(1)}
  42%{opacity:0;transform:rotate(var(--paw-rot,0deg)) scale(1.05)}
  100%{opacity:0}
}
html[data-theme="dark"] [data-paw-trail] .paw{color:rgba(255,131,191,.5)}
html[data-theme="dark"] [data-paw-trail] .paw:nth-child(3n){color:rgba(112,215,255,.45)}
@media(max-width:720px){.paw-band{height:62px}}

/* Roaming paw trails (random across the page) */
.paw-roam{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.paw-roam .paw{position:absolute;transform:translate(-50%,-50%);color:var(--pink-2)}
.paw-roam .paw:nth-child(2n){color:var(--sky-2)}
.paw-roam .paw i{display:block;width:100%;height:100%;opacity:0;will-change:opacity,transform}
.paw-roam .paw svg{display:block;width:100%;height:100%;fill:currentColor}
@keyframes pawStep{
  0%{opacity:0;transform:rotate(var(--paw-rot,0deg)) scale(.4)}
  18%{opacity:.42;transform:rotate(var(--paw-rot,0deg)) scale(1)}
  55%{opacity:.42;transform:rotate(var(--paw-rot,0deg)) scale(1)}
  100%{opacity:0;transform:rotate(var(--paw-rot,0deg)) scale(1.1)}
}
html[data-theme="dark"] .paw-roam .paw{color:rgba(255,131,191,.5)}
html[data-theme="dark"] .paw-roam .paw:nth-child(2n){color:rgba(112,215,255,.45)}

@media(prefers-reduced-motion:reduce){.paw-band,.paw-roam{display:none}[data-paw-trail] .paw i{animation:none;opacity:0}}

/* ---- Confirmation page polish ---- */
.success-mark{font-size:38px;line-height:1}
.ref-card{background:linear-gradient(135deg,#eef9ff,#fff0f5);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:6px auto 22px;max-width:420px}
.ref-card small{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:900;color:var(--muted);margin-bottom:8px}
.ref-line{display:flex;align-items:center;justify-content:center;gap:12px}
.ref-line strong{font-size:26px;letter-spacing:.04em;font-weight:900;font-variant-numeric:tabular-nums}
.next-steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px;text-align:left}
.next-steps li{display:flex;gap:14px;align-items:flex-start;background:#f8fbfd;border:1px solid var(--line);border-radius:16px;padding:16px}
.next-steps .ns-num{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900;font-size:14px}
.next-steps strong{display:block;margin-bottom:2px}
.next-steps span{color:var(--muted);line-height:1.5}
html[data-theme="dark"] .ref-card{background:linear-gradient(135deg,rgba(112,215,255,.1),rgba(255,131,191,.1))}
html[data-theme="dark"] .next-steps li{background:rgba(7,19,32,.55)}
html[data-theme="dark"] .next-steps .ns-num{background:linear-gradient(135deg,#70d7ff,#ff83bf);color:#06111f}

/* ---- Admin: clearer KPI hierarchy (declutter) ---- */
.metrics-primary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0 12px}
.metrics-primary .metric strong{font-size:clamp(26px,2.6vw,34px)}
.metrics-secondary{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.metrics-secondary .metric{flex:1 1 150px;padding:13px 15px}
.metrics-secondary .metric span{font-size:10.5px}
.metrics-secondary .metric strong{font-size:21px;margin-top:3px}
@media(max-width:900px){.metrics-primary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.metrics-secondary .metric{flex:1 1 calc(50% - 5px)}}

/* ---- Hero visual rebuild: unified, no overlapping right-side cards ---- */
.hero-showcase{min-height:520px;display:grid;place-items:center}
.hero-visual-card{position:relative;width:min(560px,100%);border:1px solid rgba(207,238,255,.18);border-radius:34px;padding:28px;background:
  linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
  radial-gradient(circle at 80% 10%,rgba(255,122,168,.18),transparent 34%),
  rgba(9,24,41,.72);
  box-shadow:0 28px 90px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.hero-visual-card:before{content:"";position:absolute;inset:18px;border:1px solid rgba(207,238,255,.10);border-radius:26px;pointer-events:none}
.hero-showcase .hero-logo-card{position:relative;inset:auto;min-height:330px;border-radius:24px;padding:34px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.18);z-index:1}
.hero-showcase .hero-logo-card img{max-width:min(330px,82%);filter:none}
.hero-visual-status{position:relative;z-index:1;margin:18px 0 0;padding:18px 20px;border-radius:20px;background:rgba(7,19,32,.78);border:1px solid rgba(207,238,255,.14);color:#eaf7ff}
.hero-visual-status span,.hero-visual-points span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:900;color:#9fb3c9}
.hero-visual-status strong{display:block;margin-top:4px;font-size:18px;letter-spacing:-.02em}
.hero-visual-status .van-route{margin-top:14px}
.hero-visual-status .van-route i{background:linear-gradient(90deg,#70d7ff,#ff83bf)}
.hero-visual-points{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.hero-visual-points div{border:1px solid rgba(207,238,255,.12);border-radius:16px;padding:13px;background:rgba(255,255,255,.06);color:#eaf7ff}
.hero-visual-points strong{display:block;margin-top:3px;font-size:13px;letter-spacing:-.02em}
.hero-showcase .van-card,.hero-showcase .arrival-card{display:none}
html[data-theme="dark"] .hero-visual-card{background:
  linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
  radial-gradient(circle at 80% 10%,rgba(255,131,191,.18),transparent 34%),
  rgba(9,24,41,.72)}
html[data-theme="dark"] .hero-showcase .hero-logo-card{background:#fff;border-color:rgba(207,238,255,.1)}
@media(max-width:1080px){.hero-showcase{min-height:auto}.hero-visual-card{width:min(620px,100%)}}
@media(max-width:720px){
  .hero-showcase{min-height:auto}
  .hero-visual-card{padding:18px;border-radius:26px}
  .hero-showcase .hero-logo-card{min-height:230px;padding:24px;border-radius:20px}
  .hero-visual-points{grid-template-columns:1fr}
}

/* ---- Admin booking handoff clarity ---- */
.booking-live-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(234,247,255,.78),rgba(255,238,243,.58))}
.booking-live-row span{display:block;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.booking-live-row strong{display:block;margin-top:3px;line-height:1.45}
.quick-status-form{margin:0}
.mini-hint{margin:0;padding:8px 10px;border-radius:12px;font-size:11px}
html[data-theme="dark"] .booking-live-row{background:linear-gradient(135deg,rgba(112,215,255,.10),rgba(255,131,191,.08));border-color:rgba(207,238,255,.14)}
@media(max-width:720px){.booking-live-row{display:grid}.booking-live-row .ops-actions{width:100%}.booking-live-row .btn,.quick-status-form{width:100%}}

/* ---- We Manage signature: letters only, no badge or shaded box ---- */
.powered{display:inline;background:none!important;background-image:linear-gradient(90deg,#70d7ff 0%,#ff7cbd 34%,#8fe8ff 68%,#ff9ad0 100%)!important;background-size:240% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;text-shadow:none!important;filter:none!important}
.powered:before{display:none!important;content:none!important}
.page-powered{background:transparent!important;border:0!important;box-shadow:none!important}
html[data-theme="dark"] .powered{filter:none!important}

/* Stronger shifting gradient inside the We Manage letters only */
.powered{background-image:linear-gradient(100deg,#69d9ff 0%,#69d9ff 18%,#ffffff 30%,#ff7cc8 43%,#ff7cc8 61%,#ffffff 72%,#78e6ff 84%,#ff8bd6 100%)!important;background-size:360% 100%!important;animation:poweredPinkBlueGlow 2.25s ease-in-out infinite!important;filter:saturate(1.45) brightness(1.18)!important;text-shadow:0 0 5px rgba(105,217,255,.72),0 0 10px rgba(255,124,200,.58),0 0 18px rgba(105,217,255,.28)!important}
@keyframes poweredPinkBlueGlow{0%{background-position:0% 50%;filter:saturate(1.25) brightness(1.08);text-shadow:0 0 4px rgba(105,217,255,.62),0 0 9px rgba(255,124,200,.42),0 0 15px rgba(105,217,255,.22)}42%{background-position:86% 50%;filter:saturate(1.8) brightness(1.34);text-shadow:0 0 7px rgba(105,217,255,.9),0 0 14px rgba(255,124,200,.72),0 0 24px rgba(255,124,200,.34)}68%{background-position:122% 50%;filter:saturate(1.95) brightness(1.42);text-shadow:0 0 8px rgba(255,124,200,.86),0 0 16px rgba(105,217,255,.78),0 0 26px rgba(105,217,255,.36)}100%{background-position:200% 50%;filter:saturate(1.25) brightness(1.08);text-shadow:0 0 4px rgba(105,217,255,.62),0 0 9px rgba(255,124,200,.42),0 0 15px rgba(105,217,255,.22)}}

/* WeRecruit-style signature: calm prefix, glowing We Manage only */
.powered{display:inline!important;width:auto!important;background:none!important;color:rgba(159,179,201,.82)!important;-webkit-background-clip:initial!important;background-clip:initial!important;text-shadow:none!important;filter:none!important;animation:none!important;font-weight:650!important}
.powered-brand{display:inline-block;background:linear-gradient(100deg,#7bdfff 0%,#7bdfff 20%,#ffffff 32%,#ff7cc8 45%,#ff7cc8 62%,#ffffff 74%,#89eaff 86%,#ff94d6 100%);background-size:360% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:950;animation:poweredBrandFlow 7.5s ease-in-out infinite;text-shadow:none!important;filter:none!important}
@keyframes poweredBrandFlow{0%{background-position:0% 50%}42%{background-position:86% 50%}68%{background-position:122% 50%}100%{background-position:200% 50%}}
html[data-theme="dark"] .powered{color:rgba(159,179,201,.74)!important}

/* ---- Multi-pet booking and customer portal ---- */
.extra-pets{display:grid;gap:12px}.extra-pet-card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#f8fbfd,#fff7fb);padding:16px}.extra-pet-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.extra-pet-title strong{font-size:16px}.extra-pet-title span{color:var(--muted);font-size:12px;font-weight:800}.confirm-check{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#f8fbfd;color:var(--navy);line-height:1.5}.confirm-check input{width:auto;margin-top:4px}.customer-login-page .login-card{width:min(520px,100%)}.center-brand{justify-content:center}.customer-portal .admin-top{align-items:flex-start}.customer-metrics{margin:20px 0}.customer-portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.pet-chip-list{display:flex;flex-wrap:wrap;gap:10px}.pet-chip-list span{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:#f7fbfd;padding:9px 12px;font-weight:850;color:var(--navy)}.history-panel{margin-top:18px}.customer-history-card .summary-box{margin-top:14px}.metrics-secondary.customer-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
html[data-theme="dark"] .extra-pet-card,html[data-theme="dark"] .confirm-check,html[data-theme="dark"] .pet-chip-list span{background:rgba(7,19,32,.62);border-color:rgba(207,238,255,.12);color:#eaf7ff}
@media(max-width:980px){.metrics-secondary.customer-metrics{grid-template-columns:repeat(2,1fr)}.customer-portal-grid{grid-template-columns:1fr}}
@media(max-width:720px){.confirm-check{font-size:13px}.extra-pet-title{display:grid}.metrics-secondary.customer-metrics{grid-template-columns:1fr}}

/* ---- Finished login ---- */
.login-page{background:radial-gradient(circle at 18% 12%,rgba(112,215,255,.28),transparent 30%),radial-gradient(circle at 86% 10%,rgba(255,124,189,.22),transparent 28%),linear-gradient(135deg,#f8fcff,#fff7fb)}
.login-stage{width:min(980px,92%);display:grid;place-items:center}.refined-login-card{position:relative;width:min(540px,100%);padding:34px;overflow:hidden}.refined-login-card:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#70d7ff,#ff83bf,#70d7ff);background-size:220% 100%;animation:loginRibbon 5s ease-in-out infinite}.refined-login-card h1{margin:10px 0 8px;font-size:clamp(30px,4vw,44px);line-height:1.05}.login-form{display:grid;gap:14px;margin-top:18px}.login-form .field{gap:8px}.login-assurance{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:18px 0 4px}.login-assurance span{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:#f7fbfd;color:var(--muted);font-size:11px;font-weight:900;padding:8px 10px}.operations-login-page .login-brand-logo,.customer-login-page .login-brand-logo{width:min(230px,82%)}@keyframes loginRibbon{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
html[data-theme="dark"] .login-page{background:radial-gradient(circle at 18% 12%,rgba(112,215,255,.18),transparent 30%),radial-gradient(circle at 86% 10%,rgba(255,124,189,.14),transparent 28%),linear-gradient(135deg,#071320,#10243f)}
html[data-theme="dark"] .login-assurance span{background:rgba(7,19,32,.62);border-color:rgba(207,238,255,.12);color:#bfe8ff}
@media(max-width:720px){.refined-login-card{padding:28px 20px}.login-stage{width:min(100% - 28px,980px)}}

/* ---- Customer access: track + login stay together ---- */
.nav-customer-actions{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:rgba(255,255,255,.72);border-radius:999px;padding:5px}
.nav-customer-actions span{padding:0 7px 0 9px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.nav-customer-actions a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:900;color:var(--navy)}
.nav-customer-actions a:hover,.nav-customer-actions a.active{background:var(--navy);color:#fff}
.customer-access-group{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.82);border-radius:999px;padding:6px;box-shadow:0 12px 30px rgba(16,36,63,.08)}
.customer-access-group>span{padding:0 8px;color:var(--muted);font-size:12px;font-weight:900;white-space:nowrap}
.customer-access-panel{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:stretch}
.customer-access-panel .track-search{max-width:none}
.access-companion{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.login-access-group{justify-content:center;margin:18px auto 0;box-shadow:none}
.footer-grid{grid-template-columns:1.35fr .8fr .8fr 1fr}
html[data-theme="dark"] .nav-customer-actions,html[data-theme="dark"] .customer-access-group{background:rgba(16,31,49,.7);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .nav-customer-actions a:hover,html[data-theme="dark"] .nav-customer-actions a.active{background:#eaf7ff;color:#10243f}
@media(max-width:1080px){.nav-customer-actions{order:3}.customer-access-panel{grid-template-columns:1fr}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.nav-customer-actions,.customer-access-group{display:grid;border-radius:18px;width:100%;align-items:stretch}.nav-customer-actions span,.customer-access-group>span{text-align:center;padding:4px 8px}.nav-customer-actions a,.customer-access-group .btn{width:100%}.hero-actions{align-items:stretch}.footer-grid{grid-template-columns:1fr}}

/* ---- Premium menu bar and themed scrollbar ---- */
html{scrollbar-color:#70d7ff #fff7fb;scrollbar-width:thin}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:linear-gradient(180deg,#f8fcff,#fff7fb);border-left:1px solid rgba(16,36,63,.06)}
::-webkit-scrollbar-thumb{border:3px solid #fff7fb;border-radius:999px;background:linear-gradient(180deg,#69d9ff 0%,#7bdfff 28%,#ff8dcc 72%,#ff7cbd 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),0 0 18px rgba(112,215,255,.28)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#42caff 0%,#70d7ff 30%,#ff7cbd 76%,#ff5eb0 100%)}
html[data-theme="dark"]{scrollbar-color:#ff83bf #071320}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:linear-gradient(180deg,#071320,#10243f);border-left-color:rgba(207,238,255,.08)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{border-color:#071320;background:linear-gradient(180deg,#70d7ff 0%,#245a7e 34%,#ff83bf 100%);box-shadow:inset 0 0 0 1px rgba(207,238,255,.18),0 0 20px rgba(255,131,191,.22)}
.product-nav,.nav{background:rgba(255,253,249,.78)!important;border-bottom:1px solid rgba(207,238,255,.72)!important;box-shadow:0 18px 50px rgba(16,36,63,.08);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}
.product-nav:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#70d7ff 0%,#ffffff 26%,#ff83bf 54%,#70d7ff 100%);opacity:.95}
.nav-inner{height:84px;gap:16px}
.nav-inner .brand{position:relative;border-radius:20px;padding:6px 10px 6px 0}
.nav-inner .brand:after{content:"";position:absolute;right:-6px;top:18px;bottom:18px;width:1px;background:linear-gradient(180deg,transparent,rgba(16,36,63,.14),transparent)}
.nav-inner .brand-logo{height:58px;max-width:196px}
.nav-links{gap:8px;padding:8px;border:1px solid rgba(220,231,239,.86);border-radius:999px;background:rgba(255,255,255,.66);box-shadow:0 14px 36px rgba(16,36,63,.07),inset 0 1px 0 rgba(255,255,255,.82)}
.nav-links>a:not(.btn){display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:999px;color:#52677d;font-size:13px;font-weight:850}
.nav-links>a:not(.btn):hover,.nav-links>a:not(.btn).active{background:linear-gradient(135deg,#eaf7ff,#fff1f7);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(207,238,255,.9)}
.nav-links>a:not(.btn):after{display:none}
.nav-links>.btn{min-height:42px;padding:0 18px;background:linear-gradient(135deg,#10243f 0%,#17395c 58%,#ff83bf 180%);box-shadow:0 14px 30px rgba(16,36,63,.18)}
.nav-customer-actions{min-height:42px;padding:4px;border-color:rgba(207,238,255,.92);background:linear-gradient(135deg,rgba(234,247,255,.92),rgba(255,238,243,.9));box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.nav-customer-actions span{font-size:10px;color:#6c7f92}
.nav-customer-actions a{min-height:32px;padding:0 11px;color:var(--navy);transition:.18s ease}
.nav-customer-actions a:hover,.nav-customer-actions a.active{background:linear-gradient(135deg,#10243f,#17395c);color:#fff;box-shadow:0 8px 18px rgba(16,36,63,.18)}
.mobile-menu-btn{min-height:42px;border-color:rgba(207,238,255,.86);background:linear-gradient(135deg,#fff,#eaf7ff);box-shadow:0 12px 24px rgba(16,36,63,.08)}
html[data-theme="dark"] .product-nav,html[data-theme="dark"] .nav{background:rgba(7,19,32,.82)!important;border-bottom-color:rgba(207,238,255,.12)!important;box-shadow:0 18px 50px rgba(0,0,0,.26)}
html[data-theme="dark"] .nav-links{background:rgba(16,31,49,.68);border-color:rgba(207,238,255,.14);box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme="dark"] .nav-links>a:not(.btn){color:#b9d8ef}
html[data-theme="dark"] .nav-links>a:not(.btn):hover,html[data-theme="dark"] .nav-links>a:not(.btn).active{background:rgba(207,238,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(207,238,255,.14)}
html[data-theme="dark"] .nav-customer-actions{background:linear-gradient(135deg,rgba(112,215,255,.12),rgba(255,131,191,.11));border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .nav-customer-actions span{color:#9fb3c9}
html[data-theme="dark"] .nav-customer-actions a{color:#eaf7ff}
html[data-theme="dark"] .mobile-menu-btn{background:rgba(16,31,49,.78);border-color:rgba(207,238,255,.14)}
@media(max-width:1180px){.nav-links{gap:6px}.nav-links>a:not(.btn){padding:0 10px}.nav-customer-actions span{display:none}}
@media(max-width:720px){
  .product-nav,.nav{background:rgba(255,253,249,.9)!important}
  .nav-inner{min-height:74px;height:auto}
  .nav-inner .brand:after{display:none}
  .nav-links{left:4%;right:4%;top:78px;gap:8px;border-radius:24px;padding:12px;background:rgba(255,255,255,.96);box-shadow:0 26px 70px rgba(16,36,63,.16)}
  .nav-links.open{display:grid}
  .nav-links>a:not(.btn),.nav-links>.btn{width:100%;min-height:46px;justify-content:center}
  .nav-customer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-radius:18px;padding:8px}
  .nav-customer-actions span{display:block;grid-column:1/-1;text-align:center}
  html[data-theme="dark"] .nav-links{background:rgba(7,19,32,.96)}
}

/* ---- Mobile horizontal lock: page stays fixed, dense widgets scroll inside ---- */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
body{position:relative}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
.container,.section,main,header,footer,nav{max-width:100%}
.table-wrap,.week-grid,.calendar-board,.sidebar nav{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
@media(max-width:720px){
  body{width:100%}
  .product-nav,.nav,.premium-hero,.section,.footer,.login-page{overflow-x:clip}
  .container{width:min(100% - 28px,1180px)}
  .nav-inner,.nav-links,.hero-grid,.booking-flow,.flow-main,.summary-panel,.hero-actions,.trust-strip,.section-head,.panel-title,.booking-card-main,.activity,.summary-line,.customer-access-panel,.customer-access-group,.offer-banner,.van-story,.footer-grid{min-width:0;max-width:100%}
  .nav-links{left:14px;right:14px;width:auto;max-width:calc(100vw - 28px);overflow:hidden}
  .nav-links>a:not(.btn),.nav-links>.btn,.mobile-menu-btn,.customer-access-group .btn,.hero-actions .btn{max-width:100%;white-space:normal;text-align:center}
  .brand,.nav-inner .brand-logo{min-width:0}
  .hero-visual-card,.hero-showcase .hero-logo-card,.flow-main,.summary-panel,.panel,.login-card,.refined-login-card,.service-card,.step,.mini-panel,.offer-card{max-width:100%}
  .summary-line strong,.activity strong,.booking-card strong,.panel h3,.service-card h3,.step h3{overflow-wrap:anywhere}
  .table-wrap,.week-grid,.calendar-board,.sidebar nav{overflow-x:auto}
  .paw-roam{max-width:100vw;overflow:hidden}
}

/* ---- Customer CRM readability pass ---- */
.customer-portal{background:
  radial-gradient(circle at 14% -8%,rgba(112,215,255,.24),transparent 32%),
  radial-gradient(circle at 94% 2%,rgba(255,131,191,.18),transparent 28%),
  linear-gradient(180deg,#eef8ff 0,#f7fbff 44%,#fff8fb 100%);
}
.customer-portal .container{position:relative}
.customer-portal .admin-top{background:linear-gradient(135deg,rgba(16,36,63,.96),rgba(23,57,92,.94));color:#fff;border:1px solid rgba(207,238,255,.18);border-radius:28px;padding:26px;box-shadow:0 24px 70px rgba(16,36,63,.16)}
.customer-portal .admin-top h1{color:#fff}
.customer-portal .admin-top p{color:rgba(234,247,255,.76)}
.customer-portal .admin-top .eyebrow{background:rgba(255,255,255,.12);color:#eaf7ff;border:1px solid rgba(207,238,255,.16)}
.customer-portal .admin-top .btn.alt{background:rgba(255,255,255,.1);border-color:rgba(207,238,255,.24);color:#fff}
.customer-portal .metric,.customer-portal .panel,.customer-portal .booking-card{background:rgba(255,255,255,.82);border-color:rgba(178,209,229,.88);box-shadow:0 16px 46px rgba(16,36,63,.09),inset 0 1px 0 rgba(255,255,255,.72);backdrop-filter:blur(12px)}
.customer-portal .metrics-secondary.customer-metrics{align-items:stretch}
.customer-portal .metric{display:flex;flex-direction:column;justify-content:space-between;min-height:102px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,251,255,.88))}
.customer-portal .metric span,.customer-portal .summary-item small{color:#50667b}
.customer-portal .metric strong{color:#10243f;font-size:clamp(20px,2vw,28px);line-height:1.15}
.customer-portal .panel-title strong{font-size:18px}
.customer-portal .summary-box{gap:12px}
.customer-portal .summary-item{background:linear-gradient(135deg,#eef8ff,#fff5fa);border:1px solid rgba(207,238,255,.9);color:#10243f}
.customer-portal .summary-item strong,.customer-portal .activity strong,.customer-portal .booking-card h3{color:#10243f}
.customer-portal .activity{background:#f8fcff;border-color:rgba(207,238,255,.92)}
.customer-portal .hint{background:#fff7df;border-color:#efd89e;color:#60450d}
.customer-history-card{position:relative;overflow:hidden}
.customer-history-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#70d7ff,#ff83bf)}
.customer-history-card .booking-card-main,.customer-history-card .summary-box,.customer-history-card .ops-actions{position:relative}
.pet-chip-list span{background:linear-gradient(135deg,#eaf7ff,#fff1f7);border-color:rgba(178,209,229,.9)}
.latest-requests-panel{border-color:rgba(112,215,255,.45);background:linear-gradient(180deg,#ffffff,#f3fbff)}
.latest-requests-panel .booking-live-row{background:linear-gradient(135deg,rgba(234,247,255,.95),rgba(255,245,250,.88))}
html[data-theme="dark"] .customer-portal{background:linear-gradient(180deg,#071320,#10243f)}
html[data-theme="dark"] .customer-portal .admin-top{background:linear-gradient(135deg,rgba(16,36,63,.96),rgba(50,24,39,.9))}
html[data-theme="dark"] .customer-portal .metric,html[data-theme="dark"] .customer-portal .panel,html[data-theme="dark"] .customer-portal .booking-card{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .customer-portal .metric strong,html[data-theme="dark"] .customer-portal .summary-item strong,html[data-theme="dark"] .customer-portal .activity strong,html[data-theme="dark"] .customer-portal .booking-card h3{color:#eaf7ff}
html[data-theme="dark"] .customer-portal .summary-item,html[data-theme="dark"] .customer-portal .activity{background:rgba(7,19,32,.58);border-color:rgba(207,238,255,.12)}
@media(max-width:720px){
  .customer-portal .admin-top{padding:20px;border-radius:22px}
  .customer-portal .admin-actions{display:grid;width:100%}
  .customer-portal .admin-actions .btn{width:100%}
  .customer-portal .metric{min-height:auto}
  .customer-history-card{padding:18px}
}

/* ---- Admin Customers CRM: dark-mode correction ---- */
.admin-customer-cards{align-items:stretch}
.admin-customer-card{position:relative;overflow:hidden;padding:20px;background:linear-gradient(180deg,#ffffff,#f7fbff);border:1px solid rgba(220,231,239,.95);box-shadow:0 16px 42px rgba(16,36,63,.08)}
.admin-customer-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#70d7ff,#ff83bf)}
.admin-customer-card>*{position:relative}
.admin-customer-card .customer-head{align-items:flex-start}
.admin-customer-card .customer-head h3{margin:0 0 5px;color:#10243f;line-height:1.2}
.admin-customer-card .customer-head a{color:#245a7e;font-weight:850}
.admin-customer-card .avatar{background:linear-gradient(135deg,#eaf7ff,#fff1f7);border:1px solid rgba(207,238,255,.9);color:#10243f;box-shadow:inset 0 1px 0 rgba(255,255,255,.78)}
.admin-customer-card .customer-stats span{background:linear-gradient(135deg,#eef8ff,#fff7fb);border:1px solid rgba(207,238,255,.88);color:#10243f}
.admin-customer-card .customer-stats small{display:block;color:#52677d;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.admin-customer-card .customer-stats strong{display:block;margin-top:3px;color:#10243f;font-size:18px;overflow-wrap:anywhere}
.admin-customer-card p{color:#52677d;line-height:1.55}
.admin-customer-card p>strong{color:#10243f}
html[data-theme="dark"] .admin-customer-card{background:linear-gradient(180deg,rgba(16,31,49,.94),rgba(7,19,32,.86));border-color:rgba(207,238,255,.14);box-shadow:0 18px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);color:#eaf7ff}
html[data-theme="dark"] .admin-customer-card .customer-head h3,html[data-theme="dark"] .admin-customer-card p>strong,html[data-theme="dark"] .admin-customer-card .customer-stats strong{color:#eaf7ff}
html[data-theme="dark"] .admin-customer-card .customer-head a{color:#8fe8ff}
html[data-theme="dark"] .admin-customer-card .avatar{background:linear-gradient(135deg,rgba(112,215,255,.18),rgba(255,131,191,.14));border-color:rgba(207,238,255,.18);color:#eaf7ff}
html[data-theme="dark"] .admin-customer-card .customer-stats span{background:rgba(7,19,32,.62);border:1px solid rgba(207,238,255,.12);color:#eaf7ff}
html[data-theme="dark"] .admin-customer-card .customer-stats small,html[data-theme="dark"] .admin-customer-card p{color:#b9d8ef}
html[data-theme="dark"] .admin-customer-card .hint{background:rgba(255,191,117,.12);border-color:rgba(255,191,117,.22);color:#ffd8a7}
@media(max-width:720px){.admin-customer-card{padding:18px}.admin-customer-card .customer-stats{grid-template-columns:1fr 1fr}}

/* ---- Admin sweep: calendar, reports, services and dense sections ---- */
.admin-main .filters{align-items:center}
.admin-main .filters .btn{white-space:nowrap}
.admin-main .card,.admin-main .service-card,.admin-main .panel,.admin-main .metric{min-width:0}
.admin-main .service-card textarea{min-height:118px}
.admin-main .service-card .switch{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;font-weight:850}
.admin-main .service-card .switch input{width:auto}
.admin-main .report-row{min-width:0}
.admin-main .report-row strong,.admin-main .activity strong,.admin-main .table td,.admin-main .table th{overflow-wrap:anywhere}
.admin-main .bar{min-width:120px}
.calendar-main{min-width:0}
.calendar-board{max-width:100%;overflow-x:auto}
.calendar-board .day-column{min-width:0}
.calendar-job strong,.calendar-job small{overflow-wrap:anywhere}
.calendar-legend span{white-space:nowrap}
.calendar-toolbar{align-items:center}
.table-wrap{max-width:100%;overflow:auto}
.admin-main .notice,.admin-main .hint{max-width:100%}
html[data-theme="dark"] .admin-main .card{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14);color:#eaf7ff;box-shadow:0 18px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .admin-main .card h3,html[data-theme="dark"] .admin-main .card strong,html[data-theme="dark"] .admin-main .panel-title strong,html[data-theme="dark"] .admin-main .report-row strong{color:#eaf7ff}
html[data-theme="dark"] .admin-main .card p,html[data-theme="dark"] .admin-main .activity small,html[data-theme="dark"] .admin-main .caption,html[data-theme="dark"] .admin-main .switch{color:#b9d8ef}
html[data-theme="dark"] .admin-main .service-card .switch input{accent-color:#70d7ff}
html[data-theme="dark"] .calendar-main .calendar-stats div{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14);color:#eaf7ff}
html[data-theme="dark"] .calendar-main .calendar-stats span,html[data-theme="dark"] .calendar-main .calendar-stats small{color:#b9d8ef}
html[data-theme="dark"] .calendar-main .calendar-switcher{background:rgba(7,19,32,.5);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .calendar-main .calendar-switcher a{color:#b9d8ef}
html[data-theme="dark"] .calendar-main .calendar-switcher a.active{background:linear-gradient(135deg,#70d7ff,#ff83bf);color:#06111f}
html[data-theme="dark"] .calendar-main .calendar-toolbar{background:rgba(16,31,49,.68);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .calendar-main .day-column{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14);color:#eaf7ff}
html[data-theme="dark"] .calendar-main .day-column header span,html[data-theme="dark"] .calendar-job small{color:#b9d8ef}
html[data-theme="dark"] .calendar-main .day-column header em{background:rgba(112,215,255,.14);color:#bfe8ff}
html[data-theme="dark"] .calendar-main .calendar-job{background:rgba(7,19,32,.64);border-color:rgba(207,238,255,.12);color:#eaf7ff}
html[data-theme="dark"] .calendar-main .job-time{background:rgba(112,215,255,.12);color:#bfe8ff}
html[data-theme="dark"] .calendar-main .empty-day{background:rgba(7,19,32,.5);border-color:rgba(207,238,255,.12)}
html[data-theme="dark"] .table-wrap{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14)}
html[data-theme="dark"] .table td{border-bottom-color:rgba(207,238,255,.1);color:#eaf7ff}
html[data-theme="dark"] .latest-requests-panel{background:rgba(16,31,49,.88);border-color:rgba(112,215,255,.22)}
@media(max-width:1080px){.admin-main .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-main .dash-grid{grid-template-columns:1fr}.admin-main .service-grid{grid-template-columns:1fr}}
@media(max-width:720px){.admin-main{padding:16px}.admin-main .filters{display:grid;grid-template-columns:1fr;align-items:stretch}.admin-main .filters input,.admin-main .filters .btn{width:100%;min-width:0}.admin-main .metrics,.admin-main .metrics-primary,.admin-main .metrics-secondary{grid-template-columns:1fr;display:grid}.admin-main .admin-cards{grid-template-columns:1fr}.admin-top .badge{width:max-content}.calendar-toolbar{display:grid;gap:12px}.calendar-toolbar .admin-actions{display:grid;grid-template-columns:1fr 1fr 1fr}.calendar-toolbar .admin-actions .btn{padding-left:8px;padding-right:8px}.calendar-legend{display:flex;overflow-x:auto;padding-bottom:4px}.calendar-board{grid-template-columns:1fr!important;overflow-x:visible}.report-row{grid-template-columns:1fr}.admin-main .bar{min-width:0}}

/* ---- Admin request inbox ---- */
.side-count{float:right;min-width:22px;text-align:center;border-radius:999px;padding:2px 7px;background:linear-gradient(135deg,#70d7ff,#ff83bf);color:#06111f;font-size:11px;font-weight:950}
.request-pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.request-stage{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--soft)}
.request-stage span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:950}
.request-stage strong{display:block;margin-top:12px}
.request-stage small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}
.request-list{display:grid;gap:14px}
.request-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--soft)}
.request-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#70d7ff,#ff83bf)}
.request-card>*{position:relative}
.request-main{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.request-main h3{margin:9px 0 8px;font-size:22px}
.request-main p{margin:6px 0;color:var(--muted)}
.request-summary{margin:14px 0}
.request-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:end;border-top:1px solid var(--line);padding-top:14px}
.request-actions .field.full{grid-column:1/-1}
.request-actions textarea{min-height:82px}
.request-actions .ops-actions{grid-column:1/-1;margin-top:0}
.latest-requests-panel{animation:requestPanelGlow 4.8s ease-in-out infinite}
@keyframes requestPanelGlow{0%,100%{box-shadow:var(--soft)}50%{box-shadow:0 18px 55px rgba(112,215,255,.16),0 1px 0 rgba(255,255,255,.75) inset}}
html[data-theme="dark"] .request-stage,html[data-theme="dark"] .request-card{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14);color:#eaf7ff;box-shadow:0 18px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .request-stage span{background:linear-gradient(135deg,#70d7ff,#ff83bf);color:#06111f}
html[data-theme="dark"] .request-stage small,html[data-theme="dark"] .request-main p{color:#b9d8ef}
html[data-theme="dark"] .request-actions{border-top-color:rgba(207,238,255,.12)}
@media(max-width:1080px){.request-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.request-actions{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.request-pipeline,.request-actions{grid-template-columns:1fr}.request-main{display:grid}.request-main .booking-value{text-align:left}.request-card{padding:16px}}

/* ---- Admin overview overflow + request assignment clarity ---- */
.admin-shell{max-width:100vw;overflow-x:hidden}
.admin-main{overflow-x:hidden}
.dash-grid,.dash-grid .panel,.admin-main .panel,#adminMap,#dispatchMap{min-width:0;max-width:100%}
.dash-grid .panel{overflow:hidden}
.assignment-panel{border-color:rgba(31,138,91,.28);background:linear-gradient(180deg,#ffffff,#f4fff8)}
.compact-request-list{gap:10px}
.assignment-card{padding:16px}
.assignment-card:before{background:linear-gradient(180deg,#1f8a5b,#70d7ff)}
.assignment-actions{grid-template-columns:1fr 1fr 1fr auto}
.assignment-actions .ops-actions{grid-column:auto;align-self:end}
.assignment-actions .btn{white-space:nowrap}
html[data-theme="dark"] .assignment-panel{background:rgba(16,31,49,.88);border-color:rgba(105,211,156,.22)}
@media(max-width:1080px){.assignment-actions{grid-template-columns:1fr 1fr}.assignment-actions .ops-actions{grid-column:1/-1}}
@media(max-width:720px){.admin-main{overflow-x:clip}.assignment-actions{grid-template-columns:1fr}.assignment-actions .ops-actions{grid-column:1}.assignment-actions .btn{width:100%}}

/* ---- Dispatch command board ---- */
.dispatch-command-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.dispatch-map-panel{overflow:hidden}
.dispatch-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.dispatch-job-list{display:grid;gap:12px}
.dispatch-job-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--soft)}
.dispatch-job-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#70d7ff,#ff83bf)}
.dispatch-job-card>*{position:relative}
.dispatch-job-main{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.dispatch-job-main h3{margin:8px 0 7px;font-size:19px;line-height:1.25}
.dispatch-job-main p{margin:5px 0;color:var(--muted);line-height:1.45}
.dispatch-action-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;border-top:1px solid var(--line);padding-top:13px;margin-top:13px}
.dispatch-action-form .ops-actions{margin-top:0}
.dispatch-inline-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:13px;margin-top:13px}
.dispatch-inline-actions .btn{white-space:nowrap}
html[data-theme="dark"] .dispatch-job-card{background:rgba(16,31,49,.88);border-color:rgba(207,238,255,.14);color:#eaf7ff;box-shadow:0 18px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .dispatch-job-main p{color:#b9d8ef}
html[data-theme="dark"] .dispatch-action-form,html[data-theme="dark"] .dispatch-inline-actions{border-top-color:rgba(207,238,255,.12)}
@media(max-width:1080px){.dispatch-command-grid,.dispatch-board{grid-template-columns:1fr 1fr}.dispatch-action-form{grid-template-columns:1fr 1fr}.dispatch-action-form .ops-actions{grid-column:1/-1}}
@media(max-width:720px){.dispatch-command-grid,.dispatch-board,.dispatch-action-form{grid-template-columns:1fr}.dispatch-job-main{display:grid}.dispatch-job-main .btn{width:100%}.dispatch-inline-actions .btn,.dispatch-action-form .btn{width:100%}}

/* ---- Admin menu: no horizontal scrollbar ---- */
.sidebar nav{overflow-x:hidden!important}
.sidebar nav a{white-space:normal;overflow-wrap:anywhere}
@media(max-width:1080px){
  .sidebar nav{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));overflow:visible!important;gap:6px}
  .sidebar nav a{display:flex;align-items:center;justify-content:center;min-height:42px;text-align:center;white-space:normal}
  .side-count{float:none;margin-left:6px}
}
@media(max-width:560px){.sidebar nav{grid-template-columns:1fr 1fr}.sidebar nav a{font-size:13px;padding:11px 9px}}

/* ---- Admin sidebar: fixed menu, no internal scroll ---- */
.admin-shell .sidebar{overflow:hidden;gap:10px}
.admin-shell .side-brand{padding-bottom:12px;margin-bottom:4px}
.admin-shell .side-brand-logo{max-width:160px}
.admin-shell .sidebar nav{display:grid!important;grid-template-columns:1fr!important;gap:5px;overflow:visible!important;max-height:none!important;padding:0!important;overscroll-behavior:contain}
.admin-shell .sidebar nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:8px 11px;border-radius:12px;line-height:1.1;white-space:normal}
.admin-shell .sidebar nav a.active,.admin-shell .sidebar nav a[aria-current="page"]{background:linear-gradient(135deg,rgba(112,215,255,.22),rgba(255,131,191,.18));box-shadow:inset 0 0 0 1px rgba(207,238,255,.18);color:#fff}
.admin-shell .side-foot{padding:10px 8px 4px}
@media(max-height:780px) and (min-width:1081px){
  .admin-shell .sidebar{padding:14px 14px 12px}
  .admin-shell .side-brand{padding-bottom:8px}
  .admin-shell .side-brand-logo{max-width:138px;padding:6px;border-radius:14px}
  .admin-shell .sidebar nav{gap:4px}
  .admin-shell .sidebar nav a{min-height:30px;padding:7px 10px;font-size:13px}
  .admin-shell .side-foot{font-size:12px;padding-top:8px}
}
@media(max-width:1080px){
  .admin-shell .sidebar{position:relative;height:auto;overflow:visible}
  .admin-shell .sidebar nav{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .admin-shell .sidebar nav a{justify-content:center;text-align:center}
}
@media(max-width:640px){
  .admin-shell .sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---- Leaflet maps: keep zoom, drag and tiles alive ---- */
.leaflet-container{
  width:100%;
  min-height:360px;
  touch-action:none;
  cursor:grab;
}
.leaflet-container:active{cursor:grabbing}
.leaflet-container img,
.leaflet-container svg,
.leaflet-container canvas,
.leaflet-container video{
  max-width:none!important;
  max-height:none!important;
}
.leaflet-pane,
.leaflet-top,
.leaflet-bottom,
.leaflet-control,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-interactive{
  pointer-events:auto!important;
}
.leaflet-control-zoom a{
  color:#10243f!important;
  display:grid!important;
  place-items:center;
  text-decoration:none!important;
}

/* ---- Public UI cleanup: quieter, cleaner, easier to scan ---- */
:root{
  --clean-bg:#f7fbff;
  --clean-panel:#ffffff;
  --clean-line:rgba(178,209,229,.72);
  --clean-shadow:0 10px 30px rgba(16,36,63,.07);
  --clean-shadow-lg:0 20px 54px rgba(16,36,63,.1);
}
body{
  background:linear-gradient(180deg,#fbfdff 0,#f7fbff 42%,#fffdf9 100%)!important;
}
.premium-hero:before,.paw-band,.paw-band *,.paw-roam,.paw-roam *,[data-paw-trail],[data-paw-trail] *{display:none!important}
.section{padding:70px 0}
.section.alt{background:linear-gradient(180deg,#f7fbff,#f3f9fd)}
.section-head{align-items:flex-start;margin-bottom:26px}
.section-head .lead{max-width:560px;margin:0}
.eyebrow{background:#edf8ff;color:#245a7e;border:1px solid rgba(207,238,255,.92);box-shadow:none}
.product-nav,.nav{
  background:rgba(255,255,255,.9)!important;
  border-bottom:1px solid rgba(220,231,239,.9)!important;
  box-shadow:0 10px 28px rgba(16,36,63,.06)!important;
}
.product-nav:before{display:none}
.nav-inner{height:78px}
.nav-links{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  gap:6px;
}
.nav-links>a:not(.btn){
  min-height:38px;
  padding:0 11px;
  font-weight:800;
  color:#52677d;
}
.nav-links>a:not(.btn):hover,
.nav-links>a:not(.btn).active{
  background:#eef8ff;
  box-shadow:none;
}
.nav-links>.btn,.btn{
  background:#10243f;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(16,36,63,.13);
}
.btn.alt{
  background:#fff;
  color:#10243f;
  border-color:var(--clean-line);
  box-shadow:0 8px 22px rgba(16,36,63,.05);
}
.mobile-menu-btn,.nav-customer-actions,.customer-access-group{
  background:#fff;
  border-color:var(--clean-line);
  box-shadow:0 8px 22px rgba(16,36,63,.05);
}
.premium-hero{
  background:linear-gradient(180deg,#fbfdff 0,#eef8ff 100%);
  padding:66px 0;
}
.hero-grid{gap:42px}
.hero h1{font-size:clamp(38px,5vw,64px);letter-spacing:-.035em}
.hero p{max-width:620px}
.trust-strip span,.trust-item{
  background:rgba(255,255,255,.82);
  border-color:var(--clean-line);
}
.hero-visual-card,.hero-logo-card,.van-card,.arrival-card{
  border-radius:24px;
  box-shadow:var(--clean-shadow);
}
.hero-logo-card{background:#fff}
.hero-visual-status,.hero-visual-points div{
  background:rgba(255,255,255,.92);
  border-color:var(--clean-line);
}
.service-grid,.offer-grid{gap:16px}
.service-card,.offer-card,.step,.flow-main,.summary-panel,.panel,.faq-item,.mini-panel,.booking-card{
  border-color:var(--clean-line);
  box-shadow:var(--clean-shadow);
}
.service-card:hover,.offer-card:hover,.step:hover,.faq-item:hover,.panel:hover{
  transform:none;
  box-shadow:var(--clean-shadow-lg);
}
.service-card.recommended{
  background:#fff;
  border-color:#9ed8f6;
  box-shadow:0 14px 36px rgba(112,215,255,.12);
}
.service-facts div,.review-card div,.summary-item{
  background:#f6fbff;
  border:1px solid rgba(220,231,239,.72);
}
.offer-media{
  background:#f4fbff;
  border-color:var(--clean-line);
}
.offer-media-van:before,.offer-media-care:before,.offer-media-track:before{
  background:#dff4ff;
  box-shadow:none;
}
.offer-banner,.van-story{
  background:#10243f;
  border-radius:24px;
  box-shadow:var(--clean-shadow-lg);
}
.booking-section-head{margin-bottom:24px}
.booking-intro-list span{
  background:#fff;
  border-color:var(--clean-line);
}
.flow-main,.summary-panel{border-radius:22px}
.flow-progress li.active .flow-num{
  background:#10243f;
  box-shadow:none;
}
.flow-track span{background:#10243f}
.booking-group,.booking-details{
  background:#fff;
  border-color:var(--clean-line);
}
.summary-checklist span{
  background:#f8fcff;
  border-color:var(--clean-line);
}
.confirm-check{
  background:#eef8ff;
  border-color:#cfeeff;
}
#map,#adminMap,#trackMap,#routeMap,#dispatchMap{
  border:1px solid var(--clean-line);
}
.footer{
  background:#0e2038;
  padding:42px 0;
}
.footer-grid{gap:24px}
.footer a{color:rgba(255,255,255,.72)}
.footer a:hover{color:#fff}
.powered-brand{animation:none!important}
.success-panel{max-width:860px;margin:auto}
.success-mark{
  position:relative;
  font-size:0;
  background:#e8f7ef;
}
.success-mark:after{
  content:"";
  position:absolute;
  width:20px;
  height:36px;
  border:solid var(--green);
  border-width:0 5px 5px 0;
  transform:rotate(45deg);
  margin-top:-4px;
}
.ref-card{
  background:#f4fbff;
  border-color:var(--clean-line);
}
.next-steps li{
  background:#fff;
  border-color:var(--clean-line);
  box-shadow:var(--clean-shadow);
}
.track-search,.access-companion,.track-head{
  box-shadow:var(--clean-shadow);
}
.timeline-step.active{background:#10243f}
.customer-access-panel{gap:16px}
.narrow>h1{
  font-size:clamp(34px,4.4vw,52px);
  line-height:1.05;
  margin:14px 0 20px;
}
.narrow>.panel{
  border-color:var(--clean-line);
  box-shadow:var(--clean-shadow);
  line-height:1.75;
}
.narrow>.panel p:first-child{margin-top:0}
.narrow>.panel p:last-child{margin-bottom:0}
html[data-theme="dark"] body{
  background:linear-gradient(180deg,#071320,#0d1c31 52%,#071320)!important;
}
html[data-theme="dark"] .product-nav,html[data-theme="dark"] .nav{
  background:rgba(7,19,32,.9)!important;
}
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .offer-card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .flow-main,
html[data-theme="dark"] .summary-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .mini-panel{
  box-shadow:0 14px 38px rgba(0,0,0,.22);
}
@media(max-width:1080px){
  .section-head{display:grid;gap:14px}
  .hero-grid{gap:26px}
}
@media(max-width:720px){
  .section{padding:50px 0}
  .premium-hero{padding:46px 0}
  .hero h1{font-size:clamp(36px,12vw,48px)}
  .hero-actions,.customer-access-group{display:grid;width:100%}
  .flow-main,.summary-panel,.panel,.service-card,.offer-card{border-radius:18px}
  .footer-grid{gap:14px}
}

/* ---- First viewport wow pass ---- */
.premium-hero{
  position:relative;
  min-height:calc(100vh - 78px);
  display:grid;
  align-items:center;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,131,191,.22),transparent 28%),
    radial-gradient(circle at 12% 16%,rgba(112,215,255,.28),transparent 30%),
    linear-gradient(135deg,#fbfdff 0%,#edf8ff 48%,#fff4f8 100%)!important;
}
.premium-hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:120px;
  background:linear-gradient(180deg,transparent,#f7fbff);
  pointer-events:none;
}
.premium-hero>.container{position:relative;z-index:1}
.hero-copy{position:relative;max-width:780px}
.hero-kicker{
  background:rgba(255,255,255,.72);
  color:#17395c;
  border-color:rgba(158,216,246,.9);
  box-shadow:0 12px 30px rgba(112,215,255,.16);
}
.hero h1{
  max-width:780px;
  font-size:clamp(48px,5.45vw,78px);
  line-height:1;
  letter-spacing:-.045em;
  margin:18px 0 20px;
  text-wrap:balance;
}
.hero-title span{
  display:block;
  white-space:nowrap;
}
.hero h1:after{
  content:"";
  display:block;
  width:min(220px,42vw);
  height:5px;
  margin-top:22px;
  border-radius:999px;
  background:linear-gradient(90deg,#70d7ff,#ff83bf);
}
.hero p{
  max-width:610px;
  font-size:18px;
  line-height:1.75;
  color:#63768a;
}
.hero-actions{margin-top:30px}
.hero-actions>.btn:first-child{
  min-height:54px;
  padding:0 26px;
  background:linear-gradient(135deg,#10243f 0%,#17395c 72%,#245a7e 100%);
  box-shadow:0 18px 42px rgba(16,36,63,.2);
  color:#fff!important;
}
.trust-strip{
  max-width:720px;
  margin-top:26px;
}
.trust-strip span{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(12px);
}
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  width:min(640px,100%);
  margin-top:18px;
}
.hero-metrics div{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(207,238,255,.9);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 12px 34px rgba(16,36,63,.07);
  backdrop-filter:blur(14px);
}
.hero-metrics strong{
  display:block;
  color:#10243f;
  font-size:26px;
  line-height:1;
  letter-spacing:-.04em;
}
.hero-metrics span{
  display:block;
  margin-top:6px;
  color:#66788c;
  font-size:12px;
  font-weight:850;
}
.hero-showcase{
  perspective:1000px;
  transform:translateY(-28px);
}
.hero-visual-card{
  isolation:isolate;
  transform:none;
  border:1px solid rgba(255,255,255,.72);
  background:
    linear-gradient(160deg,rgba(16,36,63,.98),rgba(23,57,92,.96) 58%,rgba(19,40,68,.96)),
    #10243f!important;
  box-shadow:0 34px 90px rgba(16,36,63,.28),0 0 0 10px rgba(255,255,255,.38);
  width:min(520px,100%);
}
.hero-visual-card:after{
  content:"";
  position:absolute;
  top:26px;
  right:26px;
  width:92px;
  height:150px;
  background:linear-gradient(180deg,#70d7ff 0%,#ff83bf 100%);
  clip-path:polygon(48% 0,100% 0,64% 42%,92% 42%,28% 100%,42% 55%,0 55%);
  opacity:.72;
  filter:drop-shadow(0 18px 28px rgba(112,215,255,.26));
  pointer-events:none;
  z-index:0;
}
.hero-visual-card:before{
  content:"";
  position:absolute;
  left:22px;
  bottom:140px;
  width:54px;
  height:92px;
  background:linear-gradient(180deg,#ff83bf 0%,#70d7ff 100%);
  clip-path:polygon(50% 0,100% 0,62% 40%,88% 40%,26% 100%,40% 54%,0 54%);
  opacity:.52;
  filter:drop-shadow(0 14px 22px rgba(255,131,191,.22));
  pointer-events:none;
  z-index:0;
}
.hero-showcase .hero-logo-card{
  min-height:315px;
  background:
    linear-gradient(180deg,#ffffff 0%,#f8fcff 100%),
    #fff;
  border:1px solid rgba(207,238,255,.95);
  box-shadow:0 24px 70px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.85);
}
.hero-showcase .hero-logo-card img{
  max-width:min(350px,86%);
  image-rendering:auto;
  filter:drop-shadow(0 16px 24px rgba(16,36,63,.08));
}
.hero-visual-status{
  background:rgba(7,19,32,.7)!important;
  backdrop-filter:blur(12px);
}
.hero-visual-points div{
  background:rgba(255,255,255,.1)!important;
  backdrop-filter:blur(10px);
}
.hero-floating-note{
  position:absolute;
  z-index:3;
  display:grid;
  gap:2px;
  min-width:190px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 20px 48px rgba(16,36,63,.16);
  backdrop-filter:blur(16px);
}
.hero-floating-note span{
  color:#66788c;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.hero-floating-note strong{
  color:#10243f;
  font-size:14px;
}
.hero-floating-note-top{top:42px;right:-28px}
.hero-floating-note-bottom{left:-34px;bottom:120px}
html[data-theme="dark"] .premium-hero{
  background:
    radial-gradient(circle at 78% 18%,rgba(255,131,191,.14),transparent 28%),
    radial-gradient(circle at 12% 16%,rgba(112,215,255,.16),transparent 30%),
    linear-gradient(135deg,#071320 0%,#10243f 100%)!important;
}
html[data-theme="dark"] .premium-hero:after{background:linear-gradient(180deg,transparent,#071320)}
html[data-theme="dark"] .hero h1{color:#eaf7ff}
html[data-theme="dark"] .hero p{color:#91a8bd}
html[data-theme="dark"] .hero-actions>.btn:first-child{color:#fff!important}
@media(max-width:1080px){
  .premium-hero{min-height:auto}
  .hero h1{font-size:clamp(44px,8vw,72px)}
  .hero-title span{white-space:normal}
  .hero-showcase{transform:none}
  .hero-visual-card{transform:none}
  .hero-floating-note-top{right:10px}
  .hero-floating-note-bottom{left:10px}
}
@media(max-width:720px){
  .premium-hero{padding:42px 0 52px}
  .hero h1{font-size:clamp(40px,13vw,58px)}
  .hero-title span{white-space:normal}
  .hero h1:after{height:4px;margin-top:18px}
  .hero p{font-size:17px}
  .hero-metrics{grid-template-columns:1fr}
  .hero-showcase{margin-top:22px}
  .hero-showcase .hero-logo-card{min-height:240px}
  .hero-visual-card:after{width:62px;height:102px;right:18px;top:18px}
  .hero-visual-card:before{width:38px;height:64px;left:16px;bottom:126px}
  .hero-floating-note{position:relative;inset:auto;min-width:0;margin-top:10px}
  .hero-visual-points{grid-template-columns:1fr 1fr 1fr}
}

/* ---- 2026 landing hero: premium editorial + bento glass ---- */
.premium-hero{
  min-height:calc(100svh - 78px);
  padding:54px 0 64px;
  background:
    radial-gradient(circle at 68% 18%,rgba(255,131,191,.22),transparent 26%),
    radial-gradient(circle at 42% 95%,rgba(112,215,255,.16),transparent 28%),
    linear-gradient(135deg,#071320 0%,#10243f 52%,#15192e 100%)!important;
  color:#eaf7ff;
}
.premium-hero:after{
  height:150px;
  background:linear-gradient(180deg,transparent,#f7fbff 92%);
}
.hero-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.82fr);
  gap:42px;
}
.hero-copy{
  align-self:center;
  padding-top:10px;
}
.hero-kicker{
  background:rgba(112,215,255,.12);
  color:#bfe8ff;
  border-color:rgba(207,238,255,.22);
  box-shadow:none;
}
.hero h1{
  max-width:720px;
  color:#f4fbff;
  font-size:clamp(58px,5.9vw,92px);
  line-height:.94;
  letter-spacing:-.06em;
  margin:20px 0 22px;
}
.hero h1:after{
  width:178px;
  height:4px;
  margin-top:24px;
  background:linear-gradient(90deg,#70d7ff 0%,#f5f8ff 42%,#ff83bf 100%);
  box-shadow:0 0 28px rgba(112,215,255,.28);
}
.hero p{
  max-width:590px;
  color:#9fb3c9;
  font-size:18px;
  line-height:1.72;
}
.hero-actions{
  gap:14px;
  margin-top:30px;
}
.hero-actions>.btn:first-child{
  min-height:58px;
  padding:0 28px;
  color:#06111f!important;
  background:linear-gradient(135deg,#8fe8ff 0%,#cfeeff 46%,#ff8fc7 100%);
  box-shadow:0 22px 46px rgba(112,215,255,.18),0 10px 24px rgba(255,131,191,.12);
}
.customer-access-group{
  background:rgba(7,19,32,.42);
  border-color:rgba(207,238,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.16);
}
.customer-access-group>span{color:#9fb3c9}
.customer-access-group .btn.alt{
  background:rgba(255,255,255,.05);
  color:#eaf7ff;
  border-color:rgba(207,238,255,.14);
}
.trust-strip{
  max-width:650px;
  gap:9px;
  margin-top:26px;
}
.trust-strip span{
  background:rgba(255,255,255,.07);
  color:#c6d7e7;
  border-color:rgba(207,238,255,.12);
  backdrop-filter:blur(14px);
}
.hero-metrics{
  width:min(610px,100%);
  margin-top:16px;
}
.hero-metrics div{
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  border-color:rgba(207,238,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 44px rgba(0,0,0,.14);
}
.hero-metrics strong{color:#f4fbff}
.hero-metrics span{color:#9fb3c9}
.hero-showcase{
  transform:translateY(-8px);
  align-self:center;
}
.hero-visual-card{
  width:min(500px,100%);
  padding:20px;
  border-radius:30px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)),
    rgba(7,19,32,.58)!important;
  border:1px solid rgba(207,238,255,.18);
  box-shadow:0 34px 84px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
}
.hero-visual-card:after{
  width:76px;
  height:124px;
  top:20px;
  right:18px;
  opacity:.88;
}
.hero-visual-card:before{
  width:44px;
  height:78px;
  left:18px;
  bottom:122px;
  opacity:.68;
}
.hero-showcase .hero-logo-card{
  min-height:285px;
  border-radius:26px;
  padding:28px;
  background:#fff;
  box-shadow:0 28px 64px rgba(0,0,0,.18);
}
.hero-showcase .hero-logo-card img{
  max-width:min(320px,84%);
  filter:none;
}
.hero-visual-status{
  margin-top:14px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(7,19,32,.64)!important;
  border:1px solid rgba(207,238,255,.14);
}
.hero-visual-status strong{
  font-size:17px;
  color:#f4fbff;
}
.hero-visual-points{
  gap:10px;
  margin-top:10px;
}
.hero-visual-points div{
  min-height:76px;
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(207,238,255,.14);
}
html[data-theme="light"] .premium-hero{
  background:
    radial-gradient(circle at 70% 18%,rgba(255,131,191,.2),transparent 26%),
    radial-gradient(circle at 18% 18%,rgba(112,215,255,.22),transparent 30%),
    linear-gradient(135deg,#f8fcff 0%,#edf8ff 48%,#fff4f8 100%)!important;
  color:#10243f;
}
html[data-theme="light"] .hero h1{color:#10243f}
html[data-theme="light"] .hero p{color:#52677d}
html[data-theme="light"] .hero-kicker{
  background:rgba(255,255,255,.72);
  color:#17395c;
  border-color:rgba(158,216,246,.85);
}
html[data-theme="light"] .trust-strip span,
html[data-theme="light"] .hero-metrics div{
  background:rgba(255,255,255,.72);
  color:#52677d;
  border-color:rgba(207,238,255,.85);
  box-shadow:0 14px 34px rgba(16,36,63,.07);
}
html[data-theme="light"] .hero-metrics strong{color:#10243f}
html[data-theme="light"] .hero-metrics span{color:#66788c}
html[data-theme="light"] .customer-access-group{
  background:rgba(255,255,255,.74);
  border-color:rgba(207,238,255,.9);
  box-shadow:0 14px 34px rgba(16,36,63,.08);
}
html[data-theme="light"] .customer-access-group>span{color:#66788c}
html[data-theme="light"] .customer-access-group .btn.alt{
  background:#fff;
  color:#10243f;
  border-color:rgba(207,238,255,.95);
}
@media(max-width:1180px){
  .hero-grid{grid-template-columns:1fr}
  .hero-showcase{transform:none;width:min(620px,100%);justify-self:center}
}
@media(max-width:720px){
  .premium-hero{padding:38px 0 50px}
  .hero h1{font-size:clamp(40px,12.8vw,58px);line-height:.98}
  .hero-title span{white-space:normal}
  .hero-actions,.customer-access-group{display:grid;width:100%}
  .hero-metrics{grid-template-columns:1fr 1fr}
  .hero-showcase .hero-logo-card{min-height:230px}
  .hero-showcase .hero-logo-card img{max-width:min(280px,86%)}
}

/* ---- Hero proportion correction: right-weighted visual, cleaner balance ---- */
@media(min-width:1181px){
  .premium-hero .hero-grid{
    grid-template-columns:minmax(0,.94fr) minmax(430px,.86fr);
    gap:56px;
  }
  .premium-hero .hero-copy{
    max-width:680px;
  }
  .premium-hero .hero h1{
    max-width:650px;
    font-size:clamp(54px,5.15vw,82px);
  }
  .premium-hero .hero p{
    max-width:560px;
  }
  .premium-hero .hero-showcase{
    justify-self:end;
    width:min(486px,100%);
    transform:translate(34px,-10px);
  }
  .premium-hero .hero-visual-card{
    width:100%;
    padding:18px;
    border-radius:28px;
  }
  .premium-hero .hero-showcase .hero-logo-card{
    min-height:270px;
    padding:24px;
  }
  .premium-hero .hero-showcase .hero-logo-card img{
    max-width:min(305px,84%);
  }
  .premium-hero .hero-visual-status{
    margin-top:12px;
    padding:15px 17px;
  }
  .premium-hero .hero-visual-points div{
    min-height:70px;
    padding:12px;
  }
}
@media(min-width:1181px) and (max-width:1340px){
  .premium-hero .hero-showcase{
    transform:translate(18px,-8px);
  }
}

/* ---- Designer pass: typographic hero and premium booking CTA ---- */
.premium-hero .hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.premium-hero .hero-title{
  display:grid;
  gap:2px;
  margin:18px 0 20px;
  line-height:.93;
  letter-spacing:0;
}
.premium-hero .hero-title-line{
  display:block;
  white-space:nowrap;
  text-wrap:balance;
}
.premium-hero .hero-title-accent{
  width:max-content;
  max-width:100%;
  padding:.02em .16em .09em;
  margin-left:-.16em;
  color:#071320;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-weight:900;
  letter-spacing:0;
  border-radius:.28em;
  background:linear-gradient(100deg,#8fe8ff 0%,#f5f8ff 48%,#ff8fc7 100%);
  box-shadow:0 18px 46px rgba(112,215,255,.18),0 8px 24px rgba(255,131,191,.14);
}
.premium-hero .hero h1:after{
  width:220px;
  height:5px;
  margin-top:20px;
  border-radius:999px;
}
.hero-book-panel{
  display:grid;
  grid-template-columns:minmax(230px,1fr) auto;
  align-items:center;
  gap:10px;
  width:min(610px,100%);
  padding:8px;
  border:1px solid rgba(207,238,255,.18);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 56px rgba(0,0,0,.18);
  backdrop-filter:blur(18px);
}
.hero-book-btn{
  min-height:70px!important;
  display:grid!important;
  align-content:center;
  justify-items:start;
  gap:3px;
  padding:12px 22px!important;
  border-radius:22px!important;
  text-align:left;
}
.hero-book-btn span{
  font-size:17px;
  line-height:1.1;
}
.hero-book-btn small{
  font-size:12px;
  line-height:1.35;
  color:rgba(6,17,31,.68);
  font-weight:850;
}
.hero-book-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  min-width:236px;
}
.hero-book-facts span{
  min-height:54px;
  display:grid;
  align-content:center;
  gap:2px;
  padding:9px 12px;
  border:1px solid rgba(207,238,255,.14);
  border-radius:18px;
  color:#9fb3c9;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  background:rgba(7,19,32,.32);
}
.hero-book-facts strong{
  display:block;
  color:#f4fbff;
  font-size:17px;
  line-height:1;
  text-transform:none;
}
.premium-hero .customer-access-group{
  width:min(610px,100%);
  justify-content:flex-start;
  padding:7px;
  border-radius:22px;
}
.premium-hero .customer-access-group .btn.alt{
  min-height:44px;
  border-radius:16px;
}
.premium-hero .trust-strip{
  margin-top:22px;
}
.premium-hero .hero-metrics{
  margin-top:14px;
}
.booking-section .section-head h2{
  max-width:620px;
  letter-spacing:0;
}
.booking-section .booking-intro{
  padding:18px;
  border:1px solid rgba(178,209,229,.9);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(234,247,255,.72));
  box-shadow:0 18px 44px rgba(16,36,63,.07);
}
.booking-section .flow-main,
.booking-section .summary-panel{
  border-radius:30px;
  box-shadow:0 24px 70px rgba(16,36,63,.1),inset 0 1px 0 rgba(255,255,255,.82);
}
html[data-theme="light"] .hero-book-panel{
  background:rgba(255,255,255,.76);
  border-color:rgba(207,238,255,.92);
  box-shadow:0 18px 46px rgba(16,36,63,.09),inset 0 1px 0 rgba(255,255,255,.78);
}
html[data-theme="light"] .hero-book-facts span{
  background:rgba(248,252,255,.9);
  color:#66788c;
  border-color:rgba(207,238,255,.95);
}
html[data-theme="light"] .hero-book-facts strong{
  color:#10243f;
}
html[data-theme="dark"] .booking-section .booking-intro{
  background:linear-gradient(135deg,rgba(16,31,49,.88),rgba(7,19,32,.72));
  border-color:rgba(207,238,255,.14);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
@media(min-width:1181px){
  .premium-hero .hero-copy{
    transform:translateY(-4px);
  }
  .premium-hero .hero-title{
    font-size:clamp(58px,5.55vw,88px);
    max-width:720px;
  }
  .premium-hero .hero p{
    max-width:610px;
    font-size:19px;
  }
}
@media(max-width:1180px){
  .hero-book-panel{
    grid-template-columns:1fr;
  }
  .hero-book-facts{
    min-width:0;
  }
}
@media(max-width:720px){
  .premium-hero .hero-title{
    gap:0;
  }
  .premium-hero .hero-title-line{
    white-space:normal;
  }
  .premium-hero .hero-title-accent{
    margin-left:0;
  }
  .hero-book-panel{
    width:100%;
    border-radius:24px;
  }
  .hero-book-btn{
    justify-items:center;
    text-align:center;
  }
  .hero-book-facts{
    grid-template-columns:1fr 1fr;
  }
  .premium-hero .customer-access-group{
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px;
  }
  .premium-hero .customer-access-group>span{
    grid-column:1/-1;
    padding:0 4px 2px;
  }
  .premium-hero .customer-access-group .btn.alt{
    min-height:48px;
    width:100%;
  }
  .booking-section .booking-intro{
    padding:14px;
  }
}

/* ---- Hero visual console: sharper brand stage ---- */
.premium-hero .hero-visual-card{
  overflow:hidden;
  isolation:isolate;
}
.premium-hero .hero-visual-card:before{
  inset:14px;
  border-radius:24px;
}
.premium-hero .hero-visual-card:after{
  content:"";
  position:absolute;
  width:142px;
  height:142px;
  right:-42px;
  top:-44px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,143,199,.46),rgba(143,232,255,.14) 52%,transparent 70%);
  filter:blur(2px);
  z-index:0;
}
.hero-visual-topline{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding:11px 13px;
  border:1px solid rgba(207,238,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.06);
  color:#eaf7ff;
}
.hero-visual-topline span{
  color:#9fb3c9;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-visual-topline strong{
  font-size:13px;
  letter-spacing:0;
}
.premium-hero .hero-showcase .hero-logo-card{
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-height:292px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(248,252,255,.98)),
    #fff;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 28px 70px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.95);
}
.premium-hero .hero-showcase .hero-logo-card:before{
  content:"";
  position:absolute;
  inset:17px;
  border-radius:20px;
  background:
    linear-gradient(135deg,rgba(143,232,255,.18),transparent 33%),
    linear-gradient(315deg,rgba(255,143,199,.18),transparent 35%);
  pointer-events:none;
}
.premium-hero .hero-showcase .hero-logo-card:after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:86px;
  height:86px;
  clip-path:polygon(100% 0,0 0,100% 100%);
  background:linear-gradient(135deg,#8fe8ff,#ff8fc7);
  opacity:.9;
}
.logo-glow{
  position:absolute;
  width:76%;
  aspect-ratio:1;
  border-radius:999px;
  background:radial-gradient(circle,rgba(143,232,255,.2),rgba(255,143,199,.12) 48%,transparent 68%);
  filter:blur(10px);
  z-index:0;
}
.premium-hero .hero-showcase .hero-logo-card img{
  position:relative;
  z-index:1;
  max-width:min(330px,82%);
  filter:drop-shadow(0 18px 28px rgba(16,36,63,.16));
}
.premium-hero .hero-visual-status{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
  margin-top:12px;
  padding:17px 18px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(7,19,32,.86),rgba(16,36,63,.66))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.premium-hero .hero-visual-status em{
  display:inline-grid;
  place-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  color:#06111f;
  background:linear-gradient(135deg,#8fe8ff,#ff8fc7);
  font-size:11px;
  font-style:normal;
  font-weight:950;
  text-transform:uppercase;
}
.premium-hero .hero-visual-status .van-route{
  grid-column:1/-1;
}
.premium-hero .hero-visual-status .van-route i{
  position:relative;
  overflow:hidden;
  height:7px;
}
.premium-hero .hero-visual-status .van-route i:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);
  transform:translateX(-100%);
  animation:routeShine 2.8s ease-in-out infinite;
}
.premium-hero .hero-visual-status .van-route i:nth-child(2):after{animation-delay:.25s}
.premium-hero .hero-visual-status .van-route i:nth-child(3):after{animation-delay:.5s}
.premium-hero .hero-visual-points{
  gap:12px;
}
.premium-hero .hero-visual-points div{
  position:relative;
  overflow:hidden;
  min-height:82px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.premium-hero .hero-visual-points div:after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,#8fe8ff,#ff8fc7);
  opacity:.8;
}
.premium-hero .hero-visual-points strong{
  font-size:14px;
}
@keyframes routeShine{
  0%,42%{transform:translateX(-100%)}
  78%,100%{transform:translateX(100%)}
}
html[data-theme="light"] .hero-visual-topline{
  background:rgba(255,255,255,.72);
  border-color:rgba(207,238,255,.9);
  color:#10243f;
  box-shadow:0 12px 30px rgba(16,36,63,.07);
}
html[data-theme="light"] .hero-visual-topline span{color:#66788c}
html[data-theme="light"] .premium-hero .hero-visual-card{
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.48))!important;
}
html[data-theme="light"] .premium-hero .hero-visual-status{
  background:linear-gradient(135deg,#10243f,#17395c)!important;
}
@media(max-width:720px){
  .premium-hero .hero-showcase .hero-logo-card{
    min-height:248px;
  }
  .hero-visual-topline{
    display:grid;
    gap:3px;
  }
  .premium-hero .hero-visual-status{
    grid-template-columns:1fr;
  }
  .premium-hero .hero-visual-status em{
    justify-self:start;
  }
  .premium-hero .hero-visual-points{
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
  }
  .premium-hero .hero-visual-points div{
    min-height:72px;
    padding:11px 9px;
  }
  .premium-hero .hero-visual-points strong{
    font-size:12px;
  }
}

/* ---- Hero entrance motion + desktop lift ---- */
@media(min-width:1181px){
  .premium-hero .hero-showcase{
    transform:translate(34px,-124px);
  }
}
@media(min-width:1181px) and (max-width:1340px){
  .premium-hero .hero-showcase{
    transform:translate(18px,-104px);
  }
}
.premium-hero .hero-kicker,
.premium-hero .hero-title-line,
.premium-hero .hero h1:after,
.premium-hero .hero p,
.premium-hero .hero-book-panel,
.premium-hero .customer-access-group,
.premium-hero .trust-strip span,
.premium-hero .hero-metrics div,
.premium-hero .hero-visual-card{
  animation-fill-mode:both;
}
.premium-hero .hero-kicker{
  animation:heroFadeUp .72s cubic-bezier(.16,1,.3,1) .05s both;
}
.premium-hero .hero-title-line{
  transform-origin:left center;
  animation:heroWordRise .82s cubic-bezier(.16,1,.3,1) both;
}
.premium-hero .hero-title-line:nth-child(1){animation-delay:.16s}
.premium-hero .hero-title-line:nth-child(2){animation-delay:.29s}
.premium-hero .hero-title-line:nth-child(3){animation-delay:.42s}
.premium-hero .hero h1:after{
  transform-origin:left center;
  animation:heroLineLoad .74s cubic-bezier(.16,1,.3,1) .62s both;
}
.premium-hero .hero p{
  animation:heroFadeUp .78s cubic-bezier(.16,1,.3,1) .68s both;
}
.premium-hero .hero-book-panel{
  animation:heroPanelLoad .82s cubic-bezier(.16,1,.3,1) .82s both;
}
.premium-hero .customer-access-group{
  animation:heroFadeUp .72s cubic-bezier(.16,1,.3,1) .96s both;
}
.premium-hero .trust-strip span{
  animation:heroChipLoad .58s cubic-bezier(.16,1,.3,1) both;
}
.premium-hero .trust-strip span:nth-child(1){animation-delay:1.08s}
.premium-hero .trust-strip span:nth-child(2){animation-delay:1.14s}
.premium-hero .trust-strip span:nth-child(3){animation-delay:1.2s}
.premium-hero .trust-strip span:nth-child(4){animation-delay:1.26s}
.premium-hero .trust-strip span:nth-child(5){animation-delay:1.32s}
.premium-hero .hero-metrics div{
  animation:heroChipLoad .64s cubic-bezier(.16,1,.3,1) both;
}
.premium-hero .hero-metrics div:nth-child(1){animation-delay:1.22s}
.premium-hero .hero-metrics div:nth-child(2){animation-delay:1.3s}
.premium-hero .hero-metrics div:nth-child(3){animation-delay:1.38s}
.premium-hero .hero-visual-card{
  transform-origin:center top;
  animation:heroConsoleIn 1s cubic-bezier(.16,1,.3,1) .5s both;
}
.premium-hero .hero-visual-topline,
.premium-hero .hero-logo-card,
.premium-hero .hero-visual-status,
.premium-hero .hero-visual-points div{
  animation-fill-mode:both;
}
.premium-hero .hero-visual-topline{animation:heroFadeUp .68s cubic-bezier(.16,1,.3,1) .78s both}
.premium-hero .hero-logo-card{animation:heroLogoReveal .86s cubic-bezier(.16,1,.3,1) .88s both}
.premium-hero .hero-visual-status{animation:heroFadeUp .68s cubic-bezier(.16,1,.3,1) 1.02s both}
.premium-hero .hero-visual-points div{animation:heroChipLoad .58s cubic-bezier(.16,1,.3,1) both}
.premium-hero .hero-visual-points div:nth-child(1){animation-delay:1.14s}
.premium-hero .hero-visual-points div:nth-child(2){animation-delay:1.22s}
.premium-hero .hero-visual-points div:nth-child(3){animation-delay:1.3s}
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroWordRise{
  from{opacity:0;transform:translateY(34px);filter:blur(10px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes heroLineLoad{
  from{opacity:0;transform:scaleX(0)}
  to{opacity:1;transform:scaleX(1)}
}
@keyframes heroPanelLoad{
  from{opacity:0;transform:translateY(22px) scale(.96);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes heroChipLoad{
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes heroConsoleIn{
  0%{opacity:0;transform:translateY(42px) scale(.94);filter:blur(16px)}
  64%{opacity:1;transform:translateY(-4px) scale(1.01);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes heroLogoReveal{
  from{opacity:0;transform:translateY(16px) scale(.96);filter:brightness(1.12) blur(10px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:brightness(1) blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .premium-hero .hero-kicker,
  .premium-hero .hero-title-line,
  .premium-hero .hero h1:after,
  .premium-hero .hero p,
  .premium-hero .hero-book-panel,
  .premium-hero .customer-access-group,
  .premium-hero .trust-strip span,
  .premium-hero .hero-metrics div,
  .premium-hero .hero-visual-card,
  .premium-hero .hero-visual-topline,
  .premium-hero .hero-logo-card,
  .premium-hero .hero-visual-status,
  .premium-hero .hero-visual-points div{
    animation:none!important;
  }
}

/* ---- Premium service package chooser ---- */
.services-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 6%,rgba(143,232,255,.16),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(255,143,199,.14),transparent 24%),
    linear-gradient(180deg,#f7fbff 0%,#ffffff 72%);
}
.services-section:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(16,36,63,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(16,36,63,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg,transparent,#000 18%,transparent 88%);
  pointer-events:none;
}
.services-section .container{
  position:relative;
  z-index:1;
}
.service-section-head{
  align-items:flex-start;
  margin-bottom:34px;
}
.service-section-head h2{
  max-width:620px;
  letter-spacing:0;
}
.service-head-panel{
  width:min(520px,100%);
  padding:18px;
  border:1px solid rgba(178,209,229,.78);
  border-radius:26px;
  background:rgba(255,255,255,.72);
  box-shadow:0 20px 52px rgba(16,36,63,.08),inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
}
.service-head-panel .lead{
  margin:0;
  font-size:16px;
}
.service-head-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.service-head-pills span{
  padding:8px 10px;
  border:1px solid rgba(178,209,229,.82);
  border-radius:999px;
  color:#52677d;
  background:#fff;
  font-size:12px;
  font-weight:900;
}
.services-section .service-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.services-section .service-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:100%;
  display:grid;
  align-content:start;
  gap:16px;
  padding:18px;
  border:1px solid rgba(178,209,229,.78);
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,252,255,.88));
  box-shadow:0 20px 54px rgba(16,36,63,.08),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s cubic-bezier(.16,1,.3,1),border-color .24s;
  animation:serviceCardIn .72s cubic-bezier(.16,1,.3,1) both;
}
.services-section .service-card:nth-child(1){animation-delay:.04s}
.services-section .service-card:nth-child(2){animation-delay:.1s}
.services-section .service-card:nth-child(3){animation-delay:.16s}
.services-section .service-card:nth-child(4){animation-delay:.22s}
.services-section .service-card:nth-child(5){animation-delay:.28s}
.services-section .service-card:nth-child(6){animation-delay:.34s}
.services-section .service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(143,232,255,.82);
  box-shadow:0 28px 76px rgba(16,36,63,.13),inset 0 1px 0 rgba(255,255,255,.94);
}
.services-section .service-card.recommended{
  transform:translateY(-8px);
  border-color:rgba(255,143,199,.78);
  background:
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,246,250,.92)),
    #fff;
  box-shadow:0 34px 84px rgba(255,143,199,.18),0 20px 60px rgba(16,36,63,.1),inset 0 1px 0 rgba(255,255,255,.94);
}
.services-section .service-card.recommended:hover{
  transform:translateY(-12px);
}
.service-card-glow{
  position:absolute;
  width:190px;
  height:190px;
  right:-70px;
  top:-76px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(143,232,255,.28),rgba(255,143,199,.18) 50%,transparent 70%);
  z-index:-1;
}
.services-section .service-card.recommended .service-card-glow{
  background:radial-gradient(circle,rgba(255,143,199,.36),rgba(143,232,255,.2) 52%,transparent 70%);
}
.service-visual{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
}
.service-number{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:16px;
  color:#06111f;
  background:linear-gradient(135deg,#8fe8ff,#ff8fc7);
  font-size:13px;
  font-weight:950;
  box-shadow:0 14px 30px rgba(143,232,255,.22);
}
.services-section .service-type{
  color:#66788c;
  font-size:11px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.services-section .badge.confirmed{
  white-space:nowrap;
  border:0;
  color:#06111f;
  background:linear-gradient(135deg,#8fe8ff,#ff8fc7);
  box-shadow:none;
}
.service-main-copy h3{
  margin:0;
  color:#10243f;
  font-size:clamp(23px,2vw,30px);
  letter-spacing:0;
}
.service-main-copy p{
  min-height:78px;
  margin:10px 0 0;
  color:#52677d;
  line-height:1.68;
}
.service-price-row{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:10px;
}
.service-price-row div{
  min-height:76px;
  display:grid;
  align-content:center;
  gap:4px;
  padding:14px;
  border:1px solid rgba(178,209,229,.72);
  border-radius:20px;
  background:rgba(255,255,255,.78);
}
.service-price-row span{
  color:#66788c;
  font-size:11px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.service-price-row strong{
  color:#10243f;
  font-size:19px;
  line-height:1.05;
}
.services-section .service-facts{
  grid-template-columns:1fr;
  gap:9px;
}
.services-section .service-facts div{
  padding:13px 14px;
  border:1px solid rgba(178,209,229,.62);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(248,252,255,.96),rgba(255,255,255,.82));
}
.services-section .service-facts dt{
  color:#66788c;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.services-section .service-facts dd{
  color:#10243f;
  line-height:1.35;
}
.services-section .service-book{
  min-height:52px;
  margin-top:2px;
  border:1px solid rgba(16,36,63,.1);
  color:#10243f;
  background:#fff;
}
.services-section .service-card.recommended .service-book{
  color:#06111f;
  background:linear-gradient(135deg,#8fe8ff,#ff8fc7);
  border:0;
  box-shadow:0 18px 38px rgba(255,143,199,.16);
}
@keyframes serviceCardIn{
  from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
html[data-theme="dark"] .services-section{
  background:
    radial-gradient(circle at 18% 6%,rgba(143,232,255,.12),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(255,143,199,.12),transparent 24%),
    linear-gradient(180deg,#071320 0%,#0d2134 72%);
}
html[data-theme="dark"] .service-head-panel,
html[data-theme="dark"] .services-section .service-card{
  background:linear-gradient(180deg,rgba(16,31,49,.9),rgba(7,19,32,.82));
  border-color:rgba(207,238,255,.14);
  box-shadow:0 20px 54px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] .services-section .service-card.recommended{
  background:linear-gradient(180deg,rgba(24,34,53,.96),rgba(50,24,39,.82));
  border-color:rgba(255,143,199,.46);
}
html[data-theme="dark"] .service-main-copy h3,
html[data-theme="dark"] .service-price-row strong,
html[data-theme="dark"] .services-section .service-facts dd{
  color:#eaf7ff;
}
html[data-theme="dark"] .service-main-copy p,
html[data-theme="dark"] .service-head-panel .lead,
html[data-theme="dark"] .services-section .service-type,
html[data-theme="dark"] .service-price-row span,
html[data-theme="dark"] .services-section .service-facts dt{
  color:#9fb3c9;
}
html[data-theme="dark"] .service-head-pills span,
html[data-theme="dark"] .service-price-row div,
html[data-theme="dark"] .services-section .service-facts div,
html[data-theme="dark"] .services-section .service-book{
  background:rgba(7,19,32,.55);
  border-color:rgba(207,238,255,.12);
  color:#eaf7ff;
}
@media(max-width:1080px){
  .services-section .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .service-section-head{
    display:grid;
  }
  .service-head-panel{
    width:100%;
  }
}
@media(max-width:720px){
  .services-section .service-grid{
    grid-template-columns:1fr;
  }
  .services-section .service-card.recommended{
    transform:none;
  }
  .services-section .service-card.recommended:hover{
    transform:translateY(-4px);
  }
  .service-visual{
    grid-template-columns:auto 1fr;
  }
  .services-section .badge.confirmed{
    grid-column:1/-1;
    width:max-content;
  }
  .service-main-copy p{
    min-height:0;
  }
  .service-price-row{
    grid-template-columns:1fr 1fr;
  }
}
@media(prefers-reduced-motion:reduce){
  .services-section .service-card{
    animation:none!important;
  }
}

/* ---- Live service-card UI and mobile refinement ---- */
.services-section .service-card{
  opacity:0;
  transform:translateY(24px) scale(.98);
  filter:blur(8px);
  animation:none;
  transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1),filter .62s cubic-bezier(.16,1,.3,1),box-shadow .24s cubic-bezier(.16,1,.3,1),border-color .24s;
}
.services-section .service-card.recommended{
  transform:translateY(16px) scale(.98);
}
.services-section .service-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.services-section .service-card.recommended.is-visible{
  transform:translateY(-8px) scale(1);
}
.services-section .service-card.is-visible:nth-child(2){transition-delay:.06s}
.services-section .service-card.is-visible:nth-child(3){transition-delay:.12s}
.services-section .service-card.is-visible:nth-child(4){transition-delay:.18s}
.services-section .service-card.is-visible:nth-child(5){transition-delay:.24s}
.services-section .service-card.is-visible:nth-child(6){transition-delay:.3s}
.service-live-ui{
  display:grid;
  gap:9px;
  padding:13px 14px 12px;
  border:1px solid rgba(178,209,229,.66);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(234,247,255,.86),rgba(255,245,250,.8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}
.service-live-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.service-live-head span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#52677d;
  font-size:11px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.service-live-head span i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#36c98e;
  box-shadow:0 0 0 0 rgba(54,201,142,.5);
  animation:serviceLivePulse 1.9s ease-out infinite;
}
.service-live-head strong{
  padding:5px 8px;
  border-radius:999px;
  color:#17395c;
  background:rgba(255,255,255,.74);
  font-size:10px;
  font-weight:950;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.service-live-track{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
}
.service-live-track i{
  position:relative;
  display:block;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(16,36,63,.12);
}
.service-live-track i:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#8fe8ff,#ff8fc7);
}
.service-live-track i:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
  transform:translateX(-120%);
  animation:serviceRouteSweep 2.6s ease-in-out infinite;
}
.service-live-track i:nth-child(2):after{animation-delay:.24s}
.service-live-track i:nth-child(3):after{animation-delay:.48s}
.service-live-labels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.service-live-labels span{
  color:#66788c;
  font-size:10px;
  font-weight:850;
  text-align:center;
}
.services-section .service-card:hover .service-live-ui{
  border-color:rgba(116,133,255,.74);
  box-shadow:0 14px 32px rgba(86,98,211,.14),inset 0 1px 0 rgba(255,255,255,.9);
}
.services-section .service-card:hover .service-live-track i:after{
  animation-duration:1.45s;
}
.services-section .service-card:hover:not(.recommended),
.services-section .service-card.is-selected:not(.recommended){
  border-color:rgba(116,133,255,.72);
  box-shadow:0 26px 68px rgba(81,91,202,.16),inset 0 1px 0 rgba(255,255,255,.94);
}
.services-section .service-card:hover:not(.recommended) .service-card-glow,
.services-section .service-card.is-selected:not(.recommended) .service-card-glow{
  background:radial-gradient(circle,rgba(113,139,255,.34),rgba(143,232,255,.17) 52%,transparent 70%);
}
.services-section .service-card:hover:not(.recommended) .service-book,
.services-section .service-card.is-selected:not(.recommended) .service-book{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(110deg,#477ee9,#7a66df);
  box-shadow:0 12px 26px rgba(72,99,211,.25);
}
.services-section .service-card.is-selected .service-live-ui{
  border-color:rgba(116,133,255,.82);
  background:linear-gradient(135deg,rgba(231,240,255,.94),rgba(240,235,255,.92));
}
.services-section .service-card.is-selected .service-live-track i:before{
  background:linear-gradient(90deg,#55bdf5,#7a66df);
}
.services-section .service-card.is-selected .service-live-head strong{
  color:#3e3a90;
  background:rgba(122,102,223,.12);
}
.services-section .service-card.recommended .service-live-ui{
  background:linear-gradient(135deg,rgba(234,247,255,.9),rgba(255,234,245,.92));
  border-color:rgba(255,143,199,.36);
}
@keyframes serviceLivePulse{
  0%{box-shadow:0 0 0 0 rgba(54,201,142,.46)}
  70%{box-shadow:0 0 0 8px rgba(54,201,142,0)}
  100%{box-shadow:0 0 0 0 rgba(54,201,142,0)}
}
@keyframes serviceRouteSweep{
  0%,36%{transform:translateX(-120%)}
  72%,100%{transform:translateX(120%)}
}
html[data-theme="dark"] .service-live-ui{
  background:linear-gradient(135deg,rgba(10,35,54,.84),rgba(47,24,43,.68));
  border-color:rgba(207,238,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .service-live-head span,
html[data-theme="dark"] .service-live-labels span{
  color:#9fb3c9;
}
html[data-theme="dark"] .service-live-head strong{
  color:#eaf7ff;
  background:rgba(255,255,255,.08);
}
html[data-theme="dark"] .service-live-track i{
  background:rgba(207,238,255,.14);
}
@media(max-width:720px){
  .services-section{
    padding:56px 0;
  }
  .service-section-head{
    margin-bottom:22px;
  }
  .service-head-panel{
    padding:15px;
    border-radius:20px;
  }
  .service-head-pills{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .service-head-pills span{
    padding:8px 9px;
    text-align:center;
    font-size:11px;
  }
  .service-head-pills span:last-child{
    grid-column:1/-1;
  }
  .services-section .service-card{
    gap:14px;
    padding:16px;
    border-radius:24px;
  }
  .services-section .service-card.recommended.is-visible{
    transform:none;
  }
  .services-section .service-card:hover,
  .services-section .service-card.recommended:hover{
    transform:none;
  }
  .service-number{
    width:38px;
    height:38px;
    border-radius:14px;
  }
  .service-main-copy h3{
    font-size:26px;
  }
  .service-price-row div{
    min-height:70px;
    padding:12px;
    border-radius:17px;
  }
  .service-price-row strong{
    font-size:17px;
  }
  .service-live-ui{
    gap:8px;
    padding:12px;
    border-radius:18px;
  }
  .services-section .service-facts{
    gap:8px;
  }
  .services-section .service-facts div{
    padding:12px;
    border-radius:16px;
  }
  .services-section .service-book{
    width:100%;
    min-height:54px;
    border-radius:18px;
  }
}
@media(prefers-reduced-motion:reduce){
  .services-section .service-card,
  .service-live-head span i,
  .service-live-track i:after{
    animation:none!important;
    transition:none!important;
    opacity:1;
    filter:none;
    transform:none;
  }
}
/* Lenis smooth scrolling (assets/js/smooth.js) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ===== Owner Dashboard (Odoo-style) — admin/dashboard.php ===== */
.odoo-dash{--c-card:#ffffff;--c-border:#e9e9f0;--c-ink:#23232b;--c-muted:#78788a;--c-track:#eef0f4;--od-plum:#714B67;--od-plum2:#875A7B;--od-green:#2f9e6b;--od-amber:#d99a34;--od-red:#c65a4c;color:var(--c-ink)}
html[data-theme="dark"] .odoo-dash{--c-card:#102338;--c-border:rgba(207,238,255,.13);--c-ink:#eaf3fb;--c-muted:#8ea6bb;--c-track:rgba(207,238,255,.10);--od-plum:#b487a6;--od-plum2:#c79bbb}
.odoo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.odoo-head h1{margin:2px 0 4px;font-size:26px;letter-spacing:-.02em}
.odoo-head p{margin:0;color:var(--c-muted);font-size:13px}
.odoo-head-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.od-asof{font-size:12px;font-weight:800;color:var(--c-muted);background:var(--c-track);border-radius:999px;padding:6px 12px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:14px}
.kpi-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;padding:16px 18px 10px;box-shadow:0 1px 2px rgba(20,20,45,.04),0 10px 26px rgba(20,20,45,.03);position:relative;overflow:hidden}
.kpi-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--od-plum)}
.kpi-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kpi-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted)}
.kpi-trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:900;padding:3px 8px;border-radius:999px;white-space:nowrap}
.kpi-trend.good{color:#177a4e;background:rgba(47,158,107,.14)}
.kpi-trend.bad{color:#b0402f;background:rgba(198,90,76,.14)}
html[data-theme="dark"] .kpi-trend.good{color:#6fe0a6}html[data-theme="dark"] .kpi-trend.bad{color:#ffa392}
.kpi-value{font-size:29px;font-weight:850;letter-spacing:-.02em;margin:8px 0 2px;line-height:1.05}
.kpi-spark{height:44px;margin:0 -18px -10px}
.kpi-spark .spark{width:100%;height:44px;display:block}
.mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.mini-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;padding:14px 14px;display:flex;flex-direction:column;gap:2px}
.mini-value{font-size:20px;font-weight:850;letter-spacing:-.01em}
.mini-label{font-size:11px;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.03em}
.odoo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:start}
.odoo-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;box-shadow:0 1px 2px rgba(20,20,45,.04),0 10px 26px rgba(20,20,45,.03);display:flex;flex-direction:column;min-width:0}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}
.odoo-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 18px;border-bottom:1px solid var(--c-border)}
.odoo-card-head h3{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.od-tag{font-size:11px;font-weight:800;color:var(--c-muted);background:var(--c-track);border-radius:999px;padding:4px 10px;white-space:nowrap}
.odoo-card-body{padding:16px 18px}
.chart-svg{width:100%;height:auto;display:block}
.chart-empty{color:var(--c-muted);font-size:13px;padding:24px 4px;text-align:center}
.ch-grid{stroke:var(--c-border)}
.ch-axis-y,.ch-axis-x{fill:var(--c-muted);font-size:11px}
.ch-dot{fill:var(--od-plum);stroke:var(--c-card);stroke-width:2}
.ch-pt-label{fill:var(--c-ink);font-size:12px;font-weight:800}
.hbars{display:flex;flex-direction:column;gap:11px}
.hbar-row{display:grid;grid-template-columns:132px 1fr auto;align-items:center;gap:12px}
.hbar-label{font-size:12.5px;font-weight:700;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{height:10px;background:var(--c-track);border-radius:6px;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:6px;min-width:6px}
.hbar-val{font-size:12.5px;font-weight:850;font-variant-numeric:tabular-nums;color:var(--c-ink);white-space:nowrap}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.donut-svg{width:158px;height:158px}
.donut-center{fill:var(--c-ink);font-size:22px;font-weight:850}
.donut-sub{fill:var(--c-muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.donut-legend{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:9px}
.donut-legend li{display:flex;align-items:center;gap:9px;font-size:12.5px}
.lg-chip{width:11px;height:11px;border-radius:3px;flex:none}
.lg-label{font-weight:700;color:var(--c-ink)}
.lg-val{margin-left:auto;color:var(--c-muted);font-weight:700;font-variant-numeric:tabular-nums}
.lg-val em{color:var(--c-ink);font-style:normal;font-weight:850}
.rank-list{display:flex;flex-direction:column;gap:2px}
.rank-row{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--c-border)}
.rank-row:last-child{border-bottom:0}
.rank-no{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:7px;background:var(--c-track);color:var(--c-muted);font-size:12px;font-weight:850}
.rank-main{display:flex;flex-direction:column;min-width:0}
.rank-main strong{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-main small{font-size:11px;color:var(--c-muted)}
.rank-val{margin-left:auto;font-size:13px;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap}
.fleet-row{padding:9px 2px;border-bottom:1px solid var(--c-border)}
.fleet-row:last-child{border-bottom:0}
.fleet-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fleet-top strong{font-size:13px;font-weight:800}
.fleet-bar{height:7px;background:var(--c-track);border-radius:5px;overflow:hidden;margin:7px 0 5px}
.fleet-bar span{display:block;height:100%;background:var(--od-plum2);border-radius:5px}
.fleet-row small{font-size:11px;color:var(--c-muted)}
.od-activity{display:flex;flex-direction:column}
.od-act-row{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--c-border)}
.od-act-row:last-child{border-bottom:0}
.od-act-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--od-plum2)}
.od-act-msg{font-size:12.5px;font-weight:600;color:var(--c-ink)}
.od-act-time{margin-left:auto;font-size:11px;color:var(--c-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:1180px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.mini-grid{grid-template-columns:repeat(3,1fr)}.odoo-grid{grid-template-columns:repeat(2,1fr)}.span-3,.span-4,.span-6{grid-column:span 2}.span-2{grid-column:span 1}}
@media(max-width:680px){.kpi-grid,.mini-grid,.odoo-grid{grid-template-columns:1fr}.span-2,.span-3,.span-4,.span-6{grid-column:span 1}.hbar-row{grid-template-columns:104px 1fr auto}}

/* ---- Login + tracking refinements (2026-08-01) ---------------------------- */
/* The show/hide button used to sit on top of the typed password. Reserve room
   for it and centre it against the real input height. */
.password-wrap input{padding-right:82px}
.password-wrap button{top:50%;right:7px;transform:translateY(-50%);padding:8px 12px;font-size:12px;border:1px solid var(--line);background:#f4f7fa;transition:background .18s ease,color .18s ease}
.password-wrap button:hover{background:var(--sky);color:var(--navy-2)}
html[data-theme="dark"] .password-wrap button{background:rgba(7,19,32,.72);border-color:rgba(207,238,255,.16);color:#eaf7ff}
.btn-block{width:100%}
.btn.is-pending{opacity:.72;pointer-events:none}
.login-form .notice{margin:0 0 2px}
.login-page .login-brand-logo{transition:transform .22s var(--ease)}
.login-page a.brand:hover .login-brand-logo{transform:translateY(-2px)}
.login-foot{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}
.login-foot a{font-weight:850;color:var(--navy-2);border-bottom:1px solid transparent}
.login-foot a:hover{border-bottom-color:currentColor}
html[data-theme="dark"] .login-foot a{color:#bfe8ff}

/* Track lookup: the result notice belongs above the fields, not under the
   submit button, and the form should breathe like the login cards. */
.track-search .form-grid{gap:14px}
.track-search .notice{margin:0}
.track-form-note{margin:14px 0 0}
/* A delayed visit keeps the progress the customer already saw; a cancelled one
   greys the whole track so it never reads as "still coming". */
.timeline.is-delayed .timeline-step.active{background:#fff2df;color:var(--orange)}
.timeline.is-cancelled .timeline-step{opacity:.5;text-decoration:line-through}
html[data-theme="dark"] .timeline.is-delayed .timeline-step.active{background:rgba(255,168,76,.22);color:#ffce9a}
@media(max-width:880px){.timeline{grid-template-columns:repeat(3,1fr)}}

/* ---- Booking flow: sticky step actions on phones (2026-08-01) -------------
   The sticky Continue bar sat directly on top of the last form field with no
   surface of its own, so on a phone it covered the input you were filling. */
@media(max-width:720px){
  .flow-main{padding-bottom:8px}
  .flow-step{padding-bottom:6px}
  .flow-actions{
    position:sticky;bottom:0;z-index:5;margin:16px -24px -24px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -12px 26px rgba(16,36,63,.10);
  }
}
html[data-theme="dark"] .flow-actions{background:#101f31;border-color:rgba(207,238,255,.14);box-shadow:0 -12px 26px rgba(0,0,0,.35)}

/* ---- Tablet navigation (2026-08-01) --------------------------------------
   Between 721px and 980px the full nav (4 section links + track + login +
   theme toggle + Book Now) no longer fits: labels wrapped to three lines and
   the theme toggle overlapped the Book Now button. Tablets get the same
   drop-down menu phones already had. */
@media(min-width:721px) and (max-width:980px){
  .nav-inner{height:auto;min-height:72px;gap:12px}
  .mobile-menu-btn{display:inline-flex}
  .nav-links{
    display:none;position:absolute;left:4%;right:4%;top:78px;z-index:20;
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    padding:16px;box-shadow:var(--shadow);align-items:stretch;gap:10px;
  }
  .nav-links.open{display:grid}
  .nav-links .btn{width:100%;justify-content:center}
  .nav-customer-actions{display:flex;gap:10px}
  .nav-customer-actions a{flex:1;text-align:center}
  .brand-logo,.nav-inner .brand-logo{height:56px;max-width:180px}
}
html[data-theme="dark"] .nav-links{background:#0d1c31;border-color:rgba(207,238,255,.14)}

/* ---- Phone login sheet (2026-08-01) --------------------------------------
   On a phone the login card pushed the actual fields below the fold behind a
   full-size logo, a chip, a two-line headline and a three-line paragraph. On
   small screens it becomes a full-bleed sheet with the form near the top, and
   the inputs step up to 16px so iOS stops zooming the page on focus. */
@media(max-width:560px){
  .login-page{padding:0;place-items:stretch;align-content:stretch}
  .login-stage{width:100%;display:block}
  .refined-login-card{
    width:100%;min-height:100vh;border-radius:0;border:0;box-shadow:none;
    padding:20px 20px calc(26px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;
  }
  @supports(min-height:100dvh){.refined-login-card{min-height:100dvh}}
  .login-brand-logo,.operations-login-page .login-brand-logo,.customer-login-page .login-brand-logo{
    width:min(148px,46%);margin:6px auto 14px;
  }
  .refined-login-card .eyebrow{font-size:10.5px;padding:6px 10px}
  .refined-login-card h1{font-size:25px;line-height:1.12;margin:10px 0 6px}
  .refined-login-card .lead{font-size:14.5px;line-height:1.55}
  .login-form{gap:12px;margin-top:14px}
  /* 16px is the threshold below which iOS Safari zooms into a focused field. */
  .login-form input{font-size:16px;padding:14px 14px;border-radius:13px}
  .password-wrap input{padding-right:84px}
  .password-wrap button{min-height:42px;padding:9px 14px}
  .login-form .btn{min-height:50px;font-size:15px}
  .login-assurance{margin:14px 0 0;gap:6px}
  .login-assurance span{font-size:10px;padding:6px 9px}
  .login-foot{margin-top:auto;padding-top:18px;font-size:12.5px}
  .refined-login-card .page-powered{margin-top:12px}
  .customer-access-group.login-access-group{margin-top:14px}
}
/* Very short phones: trim the decorative block so the fields stay reachable. */
@media(max-width:560px) and (max-height:680px){
  .refined-login-card .lead{display:none}
  .login-brand-logo,.operations-login-page .login-brand-logo,.customer-login-page .login-brand-logo{width:min(118px,38%);margin-bottom:10px}
  .refined-login-card h1{font-size:22px}
  .login-assurance{display:none}
}
/* The card is a flex column on phones, so inline-level children would stretch
   edge to edge — the eyebrow chip must keep its own width. */
@media(max-width:560px){
  .refined-login-card .eyebrow{align-self:flex-start}
  .refined-login-card .notice{align-self:stretch}
}
@media(max-width:560px){
  /* The pill row wraps into a tall stack on a phone — lay it out as a grid. */
  .login-access-group{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-radius:18px;padding:12px}
  .login-access-group>span{grid-column:1/-1;text-align:center;font-size:12.5px}
  .login-access-group .btn{width:100%;min-height:44px}
}

/* ---- Phone login: make room for the on-screen keyboard (2026-08-01) -------
   Two things stopped the keyboard being usable on a real handset:
   1. .refined-login-card carries overflow:hidden. On a full-height sheet that
      blocks the browser from scrolling the focused field above the keyboard, so
      the field you tapped stayed buried underneath it.
   2. The card was pinned to 100dvh. When the keyboard shrinks the viewport the
      sheet kept its full height and fought the browser's scroll-into-view.
   The page owns the height now; the card just fills it and is free to scroll. */
@media(max-width:560px){
  .login-page{min-height:100vh;align-content:start}
  @supports(min-height:100dvh){.login-page{min-height:100dvh}}
  /* min-height (not height) so the sheet still fills an idle screen but the page
     stays scrollable once the keyboard is up. */
  .refined-login-card{overflow:visible}
  /* Keep a tapped field clear of the keyboard when the browser scrolls to it. */
  .login-form .field,.login-form input{scroll-margin-block:90px 150px}
}

/* ==========================================================================
   Auth screens — brand band + sheet (2026-08-01)
   Replaces the stretched card. A navy band carries a compact logo and the
   access label; the form sits on a sheet that rounds over the band, so on a
   phone it reads as a designed app screen rather than a full-bleed box.
   ========================================================================== */
/* .login-card brings 34px of padding — the band and sheet own their own. */
.auth-card{
  position:relative;width:min(460px,100%);overflow:hidden;padding:0;
  border-radius:26px;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 24px 70px rgba(16,36,63,.16);
}
.auth-band{
  display:flex;align-items:center;gap:12px;padding:20px 22px 30px;
  background:linear-gradient(135deg,#12294a 0%,#10243f 55%,#0a1b30 100%);
  position:relative;
}
.auth-band:before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#70d7ff,#ff83bf,#70d7ff);
  background-size:220% 100%;animation:loginRibbon 5s ease-in-out infinite;
}
.auth-band-brand{flex:none;display:block;background:#fff;border-radius:12px;padding:5px 8px;line-height:0;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.auth-band-brand img{display:block;height:34px;width:auto;max-width:112px;object-fit:contain}
.auth-band-id{flex:1;min-width:0;line-height:1.25}
.auth-band-id strong{display:block;color:#fff;font-size:15px;letter-spacing:-.01em}
.auth-band-id span{display:block;color:rgba(255,255,255,.6);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.auth-sheet{
  position:relative;margin-top:-18px;padding:22px 22px 24px;
  background:var(--surface);border-radius:22px 22px 0 0;
}
.auth-sheet h1{margin:0 0 6px;font-size:26px;line-height:1.12;letter-spacing:-.02em}
.auth-sheet .lead{font-size:14.5px;line-height:1.6;margin:0}
.auth-sheet .login-form{margin-top:18px}
html[data-theme="dark"] .auth-card{background:rgba(16,31,49,.92);border-color:rgba(207,238,255,.14);box-shadow:0 26px 70px rgba(0,0,0,.45)}
html[data-theme="dark"] .auth-sheet{background:rgba(16,31,49,.92)}
html[data-theme="dark"] .auth-band{background:linear-gradient(135deg,#0a1626 0%,#071320 60%,#040c16 100%)}

/* Phone: the card fills the screen, but the sheet's rounded shoulders over the
   band keep it from reading as a stretched rectangle. */
@media(max-width:560px){
  .login-page{padding:0;place-items:stretch;align-content:stretch;min-height:100vh}
  @supports(min-height:100dvh){.login-page{min-height:100dvh}}
  .login-stage{width:100%;display:block}
  .auth-card{
    width:100%;min-height:100vh;border:0;border-radius:0;box-shadow:none;
    display:flex;flex-direction:column;overflow:visible;
  }
  @supports(min-height:100dvh){.auth-card{min-height:100dvh}}
  .auth-band{padding:calc(18px + env(safe-area-inset-top)) 20px 34px}
  .auth-sheet{
    flex:1;margin-top:-22px;border-radius:26px 26px 0 0;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;
    box-shadow:0 -8px 24px rgba(16,36,63,.10);
  }
  .auth-sheet h1{font-size:24px}
  .login-form{gap:12px;margin-top:16px}
  .login-form input{font-size:16px;padding:14px;border-radius:13px}
  .password-wrap input{padding-right:84px}
  .password-wrap button{min-height:42px;padding:9px 14px}
  .login-form .btn{min-height:50px;font-size:15px}
  .login-assurance{margin:16px 0 0;gap:6px}
  .login-assurance span{font-size:10px;padding:6px 9px}
  .login-foot{margin-top:auto;padding-top:18px;font-size:12.5px}
  /* Keep a tapped field clear of the on-screen keyboard. */
  .login-form .field,.login-form input{scroll-margin-block:90px 150px}
}
@media(max-width:560px) and (max-height:680px){
  .auth-sheet .lead{display:none}
  .auth-sheet h1{font-size:21px}
  .login-assurance{display:none}
  .auth-band{padding-bottom:30px}
}
/* .powered is styled for the dark site footer; on the light auth sheet it needs
   the muted ink instead of white-on-white. */
.auth-sheet .powered{color:var(--muted);margin-top:0}
.auth-sheet .powered-brand{color:var(--navy-2)}
html[data-theme="dark"] .auth-sheet .powered{color:rgba(207,238,255,.45)}
html[data-theme="dark"] .auth-sheet .powered-brand{color:#bfe8ff}
.auth-sheet .page-powered{margin-top:14px}
@media(max-width:560px){
  /* Pin only the final block to the bottom of the sheet, so both login pages
     end the same way instead of one leaving a void under the last element. */
  .auth-sheet .login-foot{margin-top:20px}
  .auth-sheet > :last-child{margin-top:auto}
}

/* ---- Tracking codes and share links ---- */
/* The code is the credential customers receive on WhatsApp, so it is set in a
   monospaced face with wide tracking — it has to survive being read aloud. */
.ref-card .track-share-url{display:block;margin-top:6px;word-break:break-all;opacity:.72;font-size:12px}
#refCode{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em}
.track-ident{display:grid;justify-items:end;gap:2px;text-align:right}
.track-ident strong{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.1em;font-size:15px}
.track-ident small{color:var(--muted);font-size:11px;font-weight:800}
#trackCode{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;font-size:17px;text-align:center}
.track-recovery{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.track-recovery summary{cursor:pointer;font-weight:850;font-size:13px;color:var(--muted)}
.track-recovery summary:hover{color:var(--navy)}
.track-recovery .form-grid{margin-top:12px}
.track-share{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(112,215,255,.10),rgba(255,131,191,.08))}
.track-share-code{display:grid;gap:2px;min-width:0}
.track-share-code small{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.track-share-code strong{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.12em;font-size:17px}
.track-share-code .caption{word-break:break-all;opacity:.72}
.track-share-actions{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:600px){
  .track-share{flex-direction:column;align-items:stretch}
  .track-share-actions .btn{flex:1;justify-content:center}
  .track-ident{justify-items:start;text-align:left}
}

/* ---- Booking add-ons ---- */
.addon-picker{margin-top:4px}
.addon-choice span{display:grid;gap:3px}
.addon-choice small{font-weight:650;color:var(--muted);line-height:1.4}
/* An add-on the chosen package already covers: visibly out of play, but still
   listed so the customer can see the package is the better value. */
.addon-choice.is-included{opacity:.5}
.addon-choice.is-included span{cursor:not-allowed}
.addon-choice.is-included .addon-included{color:var(--green);font-weight:800}
.demo-login{margin:14px 0 0;display:grid;gap:6px;padding-top:14px;border-top:1px dashed var(--line)}
.demo-login small{font-size:11.5px;color:var(--muted);text-align:center}

/* ===========================================================================
   Right-to-left, for the Kurdish and Arabic site
   ===========================================================================
   Scoped to [dir="rtl"], which site_html_tag() puts on <html>. The admin
   console is not translated and never gets the attribute, so none of this
   reaches it.

   Most of the layout mirrors for free: `direction: rtl` already reverses flex
   rows and grid columns, so the nav, the hero, the card grids and the booking
   flow all come out the right way round without being touched. What follows is
   only what does NOT mirror on its own — physical text-align, float, one-sided
   padding, and the typography that is actively wrong for an Arabic script.
   =========================================================================== */

/* Arabic and Kurdish are cursive: the letters in a word are joined. Latin
   tracking pulls those joins apart, so `letter-spacing` does not merely look
   loose here, it breaks words into disconnected shapes. Reset it everywhere,
   and reset text-transform with it — there is no upper case to transform to,
   and asking for one is a no-op that only ever confuses a reader who then
   wonders why one label looks different. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .powered,
[dir="rtl"] .badge,
[dir="rtl"] .btn,
[dir="rtl"] .lead,
[dir="rtl"] .flow-meta,
[dir="rtl"] .offer-media,
[dir="rtl"] .offer-banner-media,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hero-title,
[dir="rtl"] .hero-title-line { letter-spacing: 0; text-transform: none; }

/* Inter carries no Arabic script, so an untouched stack lands on whatever the
   browser picks last — usually a default serif that sits oddly against the
   rest of the page. These are the faces actually installed on the devices
   customers here use: Segoe UI and Tahoma on Windows, Geeza Pro on iOS and
   macOS, Noto Naskh Arabic on Android. No webfont, so no extra request and no
   flash of unstyled Kurdish on a slow connection. */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
  font-family: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic",
               "Noto Sans Arabic", Arial, sans-serif;
}

/* Arabic script has taller ascenders and deeper descenders than Latin at the
   same size, so the Latin line heights crowd it. */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] .hero-title { line-height: 1.25; }

/* Physical alignment that direction alone does not flip. */
[dir="rtl"] .booking-group-head span { text-align: left; }
[dir="rtl"] .next-steps { text-align: right; }
[dir="rtl"] .track-ident { justify-items: start; text-align: left; }
[dir="rtl"] .booking-details summary:after { float: left; }
[dir="rtl"] .powered:before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .password-wrap input { padding-right: 14px; padding-left: 82px; }
[dir="rtl"] .password-wrap button { right: auto; left: 8px; }
[dir="rtl"] .side-count { float: left; }

/* Numbers, prices, codes and phone numbers stay Latin and stay left-to-right
   inside a right-to-left sentence — otherwise "PT-260807-001" comes out with
   its parts in the wrong order, and a customer reads their own booking
   reference back to us incorrectly. */
[dir="rtl"] .ref-line strong,
[dir="rtl"] .track-share-code strong,
[dir="rtl"] .track-share-url,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[inputmode="tel"],
[dir="rtl"] #trackCode,
[dir="rtl"] #trackId { direction: ltr; text-align: left; unicode-bidi: isolate; }


/* ===========================================================================
   Site header
   ===========================================================================
   Replaces a bar that carried ten equal-weight targets in one row and folded
   all ten into a single stacked card on a phone. The groups here are not
   decoration: exploring the business, returning to a booking you already have,
   and being in the wrong language are three different errands, and Book is the
   one that earns money.

   Everything is scoped to .site-nav so the admin console — which has its own
   shell and is not translated — is untouched.
   =========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7, 19, 32, .72);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid rgba(207, 238, 255, .09);
  padding-top: env(safe-area-inset-top);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
/* Once the page has moved, the bar earns a little more weight so it separates
   from whatever is scrolling under it. nav.js sets the flag. */
.site-nav.is-stuck {
  background: rgba(7, 19, 32, .93);
  border-bottom-color: rgba(207, 238, 255, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.site-nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
}
/* --- The brand lockup: mascot + wordmark set in type ---------------------- */
/* The mascot's pink and blue are the site's accent colours, so on the dark bar
   it reads as part of the design rather than a pasted white card. The wordmark
   is text, so it stays crisp at any size and can carry the gradient. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  flex: none;
}
.brand-mark {
  display: block;
  width: auto;
  height: 44px;
  /* A soft cyan lift so the dark outline of the artwork separates from the
     dark bar without a box doing it. */
  filter: drop-shadow(0 4px 14px rgba(112, 215, 255, .28));
  transition: transform .22s var(--ease);
}
.brand:hover .brand-mark { transform: translateY(-2px); }
.brand-word {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .045em;
  color: #eaf7ff;
  white-space: nowrap;
}
/* "TOUR" takes the gradient — the same blue-to-pink the hero highlight and the
   Book button already speak. */
.brand-word em {
  font-style: normal;
  margin-inline-start: .3em;
  background: linear-gradient(115deg, #8fe8ff 10%, #ff9ed2 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Section links: the middle of the bar, and only on a wide screen ------ */
.nav-sections {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: auto;
}
.nav-section {
  position: relative;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav-section:hover { color: var(--text); background: rgba(207, 238, 255, .07); }
/* The underline grows from the centre rather than sliding in from one side —
   which also means it does not need mirroring for RTL. */
.nav-section::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8fe8ff, #ff9ed2);
  transform: scaleX(0);
  transition: transform .24s var(--ease);
}
.nav-section:hover::after, .nav-section.is-on::after { transform: scaleX(1); }
.nav-section.is-on { color: var(--text); }

/* --- The right-hand cluster ---------------------------------------------- */
.nav-end { display: flex; align-items: center; gap: 8px; flex: none; }

/* Track / Log in. Quieter than Book on purpose: these are for people who have
   already booked, and only one control in a bar should look like the answer. */
.nav-quiet {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav-quiet:hover, .nav-quiet.is-on { color: var(--text); background: rgba(207, 238, 255, .08); }

.site-nav .nav-cta { padding: 11px 20px; font-size: 14px; }

/* --- Language: one control that names the language you are in ------------- */
.lang-menu { position: relative; flex: none; }
.lang-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(207, 238, 255, .14);
  border-radius: 999px;
  background: rgba(16, 31, 49, .6);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
/* Safari and Chrome each need their own line to stop drawing the disclosure
   triangle; without both, the caret below sits next to a stray arrow. */
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ""; }
.lang-menu > summary:hover { border-color: rgba(143, 232, 255, .4); background: rgba(16, 31, 49, .9); }
.lang-menu[open] > summary { border-color: rgba(143, 232, 255, .55); background: rgba(16, 31, 49, .95); }
.lang-globe, .lang-caret, .lang-tick {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.lang-globe { opacity: .8; }
.lang-caret { width: 13px; height: 13px; opacity: .6; transition: transform .2s var(--ease); }
.lang-menu[open] .lang-caret { transform: rotate(180deg); }
.lang-current { font-weight: 750; }

.lang-pop {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 180px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: #0d1c31;
  border: 1px solid rgba(207, 238, 255, .14);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
  z-index: 20;
  animation: langPop .16s var(--ease);
}
@keyframes langPop { from { opacity: 0; transform: translateY(-6px); } }
.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  transition: color .14s var(--ease), background .14s var(--ease);
}
.lang-item:hover { color: var(--text); background: rgba(207, 238, 255, .09); }
.lang-item.is-on { color: var(--text); background: rgba(143, 232, 255, .12); }
.lang-tick { width: 15px; height: 15px; color: #8fe8ff; }

/* --- Hamburger: three bars that become an X ------------------------------ */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(207, 238, 255, .16);
  border-radius: 13px;
  background: rgba(16, 31, 49, .7);
  cursor: pointer;
}
.nav-burger:hover { border-color: rgba(143, 232, 255, .4); }
.nav-burger-bars { position: relative; display: block; width: 18px; height: 12px; }
.nav-burger-bars i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: #eaf7ff;
  transition: transform .26s var(--ease), opacity .16s var(--ease);
}
.nav-burger-bars i:nth-child(1) { top: 0; }
.nav-burger-bars i:nth-child(2) { top: 5px; }
.nav-burger-bars i:nth-child(3) { top: 10px; }
.nav-burger[aria-expanded="true"] .nav-burger-bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bars i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- The full-screen sheet ------------------------------------------------ */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, #071320 0%, #0c1e35 55%, #071320 100%);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
/* [hidden] is how the sheet is closed for a screen reader and for a browser
   with no JavaScript. The animation classes are layered on top of that. */
.nav-sheet[hidden] { display: none; }
.nav-sheet.is-opening { animation: sheetIn .26s var(--ease); }
.nav-sheet.is-closing { animation: sheetOut .2s var(--ease) forwards; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(-10px); } }
@keyframes sheetOut { to { opacity: 0; transform: translateY(-10px); } }

.nav-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 5.5%;
  border-bottom: 1px solid rgba(207, 238, 255, .1);
}
.nav-sheet-head .brand-mark { height: 40px; }
.nav-sheet-head .brand-word { font-size: 17px; }
.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(207, 238, 255, .16);
  border-radius: 13px;
  background: rgba(16, 31, 49, .7);
  color: #eaf7ff;
  cursor: pointer;
}
.nav-close:hover { border-color: rgba(143, 232, 255, .45); }
.nav-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.nav-sheet-body { overflow-y: auto; padding: 18px 5.5% 8px; -webkit-overflow-scrolling: touch; }
.nav-sheet-links { display: grid; gap: 2px; }
.nav-sheet-link {
  display: block;
  padding: 15px 14px;
  border-radius: 14px;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  transition: background .14s var(--ease);
}
.nav-sheet-link:hover, .nav-sheet-link:focus-visible { background: rgba(207, 238, 255, .08); }
.nav-sheet-link.is-on { background: rgba(143, 232, 255, .12); }
.nav-sheet-link.is-quiet { font-size: 16px; font-weight: 700; color: var(--muted); padding: 13px 14px; }
.nav-sheet-link.is-quiet:hover { color: var(--text); }

.nav-group { margin-top: 22px; display: grid; gap: 2px; }
.nav-group-label {
  padding: 0 14px 8px;
  font-size: 11.5px;
  font-weight: 850;
  color: var(--muted);
  opacity: .72;
  border-bottom: 1px solid rgba(207, 238, 255, .09);
  margin-bottom: 8px;
}
/* In the sheet there is room to show all three languages at once, so they stay
   as pills rather than collapsing to the bar's dropdown. */
.nav-sheet-langs { display: flex; gap: 6px; padding: 0 6px; }
.nav-sheet-langs a { flex: 1; text-align: center; padding: 14px 8px; font-size: 14px; }

.nav-sheet-foot {
  padding: 14px 5.5% calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(207, 238, 255, .1);
  background: rgba(7, 19, 32, .6);
}
.nav-sheet-cta { padding: 16px 22px; font-size: 16px; }

/* While the sheet is open the page behind it must not scroll. Lenis is stopped
   in nav.js as well — overflow alone does not hold it. */
body.nav-open { overflow: hidden; }

/* --- Widths --------------------------------------------------------------- */
@media (max-width: 1040px) {
  /* Track and Log in are the first to go: they live in the sheet, and someone
     coming back to a booking usually arrives on a link, not through the nav. */
  .nav-quiet { display: none; }
}
@media (max-width: 900px) {
  .nav-sections { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-end { margin-inline-start: auto; }
  /* The dropdown is redundant once the sheet holds all three languages, and
     the bar is exactly where the room has run out. */
  .lang-menu { display: none; }
}
@media (max-width: 400px) {
  /* Book stays in the bar as long as it fits beside the logo and the burger.
     Below this it would crush both, and it is the first thing in the sheet. */
  .site-nav .nav-cta { display: none; }
}
@media (max-width: 360px) {
  .brand-mark { height: 36px; }
  .brand-word { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-sheet.is-opening, .nav-sheet.is-closing, .lang-pop { animation: none; }
  .nav-section::after, .lang-caret, .nav-burger-bars i { transition: none; }
}

/* --- The plain switcher, still used where there is no nav ----------------- */
/* Deliberately plain: it has to be legible before any script has run, to
   someone who cannot read the page it is sitting on. */
.lang-switch { display: inline-flex; align-items: center; gap: 4px; }
.lang-switch a {
  padding: 9px 12px;
  border: 1px solid rgba(207, 238, 255, .12);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 750;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0;
  transition: color .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.lang-switch a:hover { color: var(--text); background: rgba(207, 238, 255, .08); border-color: rgba(143, 232, 255, .3); }
.lang-switch a.active {
  color: #06111f;
  background: linear-gradient(135deg, #8fe8ff, #cfeeff);
  border-color: transparent;
}
/* The login card and the customer portal have no site nav to hang it off. */
.login-lang-switch { justify-content: center; margin: 14px 0 0; width: 100%; }
.login-lang-switch a { flex: 1; text-align: center; }

/* ===========================================================================
   Home page: rising sections, the pet category picker, and the glow fields
   ===========================================================================
   The hero title block is deliberately untouched — its styling is signed off.
   Everything below the fold rises in as it is scrolled to.
   =========================================================================== */

/* --- Rise on scroll -------------------------------------------------------
   Hidden ONLY when <html> carries js-rise, which an inline script sets before
   first paint and only when IntersectionObserver exists. No JavaScript, no
   hiding: the page renders complete and static, which is the right fallback.
   Groups get their per-child delays from home.js. */
html.js-rise [data-rise],
html.js-rise [data-rise-group] > * {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
html.js-rise [data-rise].is-risen,
html.js-rise [data-rise-group].is-risen > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Reduced motion outranks everything above, whatever classes JS applies. */
@media (prefers-reduced-motion: reduce) {
  html.js-rise [data-rise],
  html.js-rise [data-rise-group] > * { opacity: 1; transform: none; transition: none; }
}
@media print {
  html.js-rise [data-rise],
  html.js-rise [data-rise-group] > * { opacity: 1; transform: none; }
}

/* --- Glow fields -----------------------------------------------------------
   Two soft radial washes in the brand colours behind a section, so the dark
   page has depth without a single extra request. aria-hidden divs, pure paint. */
.glow-host { position: relative; overflow: hidden; }
.glow {
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .16;
  pointer-events: none;
}
.glow.sky { background: radial-gradient(circle, #2f9dd6 0%, transparent 62%); }
.glow.rose { background: radial-gradient(circle, #d65f9e 0%, transparent 62%); }
.glow.tl { top: -180px; inset-inline-start: -140px; }
.glow.br { bottom: -200px; inset-inline-end: -120px; }

/* --- Pet category picker --------------------------------------------------
   One segmented control above the packages. The packages cost different money
   for different animals, and a price that changes when you say who it is for
   deserves a control, not a footnote. */
.pet-cat-picker {
  display: inline-flex;
  gap: 4px;
  margin: 26px 0 22px;
  padding: 5px;
  border: 1px solid rgba(207, 238, 255, .13);
  border-radius: 999px;
  background: rgba(10, 24, 42, .72);
}
.pet-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.pet-cat:hover { color: var(--text); }
.pet-cat.is-on {
  color: #06111f;
  background: linear-gradient(115deg, #8fe8ff, #cfeeff 55%, #ffc7e2);
  box-shadow: 0 8px 22px rgba(112, 215, 255, .25);
}
.pet-cat svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The number acknowledging it changed. */
@keyframes priceFlip {
  0% { opacity: 0; transform: translateY(8px) scale(.94); }
  100% { opacity: 1; transform: none; }
}
.price-flip { display: inline-block; animation: priceFlip .3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .price-flip { animation: none; } }

@media (max-width: 720px) {
  .pet-cat-picker { display: flex; width: 100%; }
  .pet-cat { flex: 1; justify-content: center; padding: 13px 8px; }
  .pet-cat span { font-size: 13px; }
}

/* --- Card lift ------------------------------------------------------------
   The cards already animate in; this is what they do once they are there. */
.services-section .service-card {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              border-color .5s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
}
.services-section .service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(143, 232, 255, .38);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .4);
}
.services-section .service-card.recommended:hover { transform: translateY(-14px); }

/* ===========================================================================
   Hero stage
   ===========================================================================
   Replaces the white logo card inside the hero console. The boxed logo on a
   white tile was the last "squares on squares" left on the page; now the
   mascot floats in a dark viewport with an aurora behind it, a thin gradient
   arc circling a faint halo, and a slower counter-rotating orbit carrying two
   satellites. The old .hero-logo-card / .logo-glow rules are dead markup now
   and left in place — the stylesheet is minified single-line rules and
   excavating them risks the neighbours for no visible gain.

   The hero headline and its gradient are untouched, by instruction.
   =========================================================================== */

.hero-stage {
  position: relative;
  z-index: 1;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(207, 238, 255, .11);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(143, 232, 255, .08), transparent 52%),
    radial-gradient(110% 80% at 50% 108%, rgba(255, 131, 191, .09), transparent 55%),
    rgba(6, 16, 28, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -24px 44px rgba(0, 0, 0, .28);
  /* Takes over the old logo card's slot in the console's entrance sequence. */
  animation: heroLogoReveal .86s cubic-bezier(.16, 1, .3, 1) .88s both;
}

/* The aurora: two soft washes in the brand colours, drifting very slowly so
   the stage feels lit rather than printed. */
.stage-aura {
  position: absolute;
  inset: -18%;
  background:
    radial-gradient(42% 38% at 32% 34%, rgba(112, 215, 255, .17), transparent 70%),
    radial-gradient(40% 36% at 70% 62%, rgba(255, 131, 191, .13), transparent 70%);
  filter: blur(24px);
  animation: auraDrift 16s ease-in-out infinite alternate;
}
@keyframes auraDrift {
  from { transform: translate3d(-2.5%, -2%, 0) scale(1); }
  to { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}

/* The halo: a faint complete circle, and inside it one thin gradient arc that
   travels the circumference. The arc is a conic gradient cut to a 2px ring by
   a radial mask — a line of light, not a disc. */
.stage-halo {
  position: absolute;
  width: min(298px, 74%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(207, 238, 255, .12);
}
.stage-halo i {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0turn, transparent .58turn,
    rgba(143, 232, 255, .95) .74turn, rgba(255, 158, 210, .95) .87turn,
    transparent .99turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  animation: stageSpin 12s linear infinite;
}

/* The orbit: a wider dashed circle turning the other way, much slower, with
   two small gradient satellites riding it. */
.stage-orbit {
  position: absolute;
  width: min(370px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(207, 238, 255, .10);
  animation: stageSpinBack 36s linear infinite;
}
.stage-orbit b {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.stage-orbit b:first-child {
  top: -5px; left: 50%; margin-left: -5px;
  background: radial-gradient(circle at 35% 35%, #d9f6ff, #70d7ff);
  box-shadow: 0 0 12px rgba(112, 215, 255, .8);
}
.stage-orbit b:last-child {
  bottom: -5px; left: 50%; margin-left: -5px;
  width: 7px; height: 7px;
  background: radial-gradient(circle at 35% 35%, #ffe2f0, #ff83bf);
  box-shadow: 0 0 10px rgba(255, 131, 191, .8);
}
@keyframes stageSpin { to { transform: rotate(1turn); } }
@keyframes stageSpinBack { to { transform: rotate(-1turn); } }

/* The mascot, floating. The shadow under it breathes in the opposite phase so
   the drift reads as hovering rather than sliding. */
.stage-mascot {
  position: relative;
  z-index: 2;
  width: min(238px, 60%);
  height: auto;
  filter:
    drop-shadow(0 22px 30px rgba(3, 10, 18, .55))
    drop-shadow(0 0 26px rgba(112, 215, 255, .16));
  animation: mascotFloat 7s ease-in-out infinite;
}
.stage-ground {
  position: absolute;
  z-index: 1;
  bottom: 34px;
  width: 44%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3, 10, 18, .6), transparent 78%);
  filter: blur(5px);
  animation: groundBreathe 7s ease-in-out infinite;
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes groundBreathe {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(.86); opacity: .7; }
}

/* --- The 01 / 02 / 03 chips ----------------------------------------------
   The numbers were plain text in a corner; now each is a circular badge with
   a thin gradient ring — the ring drawn by layering a dark padding-box fill
   under a gradient border-box, so it stays a ring at any DPI. */
.premium-hero .hero-visual-points div {
  display: flex;
  align-items: center;
  gap: 11px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.premium-hero .hero-visual-points div:hover {
  transform: translateY(-3px);
  border-color: rgba(143, 232, 255, .32);
  background: rgba(255, 255, 255, .09);
}
.premium-hero .hero-visual-points span {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  flex: none;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  color: #eaf7ff;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(9, 22, 38, .95), rgba(9, 22, 38, .95)) padding-box,
    linear-gradient(135deg, #8fe8ff, #ff9ed2) border-box;
}
.premium-hero .hero-visual-points strong { margin-top: 0; }

/* --- The route bars -------------------------------------------------------
   Static gradient bars become one continuous current: each bar carries the
   same wide gradient, offset a third along, so the light appears to travel
   the whole track. */
.premium-hero .hero-visual-status .van-route i {
  height: 5px;
  background: linear-gradient(90deg, #70d7ff, #ff83bf, #70d7ff);
  background-size: 300% 100%;
  animation: routeFlow 3.6s linear infinite;
}
.premium-hero .hero-visual-status .van-route i:nth-child(2) { animation-delay: -1.2s; }
.premium-hero .hero-visual-status .van-route i:nth-child(3) { animation-delay: -2.4s; }
@keyframes routeFlow {
  from { background-position: 0% 0; }
  to { background-position: -300% 0; }
}

/* A quiet green pulse inside the "Today" pill, saying the service is live. */
.premium-hero .hero-visual-status em::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: #0d8a4c;
  box-shadow: 0 0 8px rgba(13, 138, 76, .8);
  animation: livePulse 2.4s ease-in-out infinite;
}
.premium-hero .hero-visual-status em {
  display: inline-flex;
  align-items: center;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.8); }
}

@media (max-width: 720px) {
  .hero-stage { min-height: 250px; border-radius: 20px; }
  .stage-mascot { width: min(190px, 62%); }
  .stage-ground { bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage, .stage-aura, .stage-halo i, .stage-orbit,
  .stage-mascot, .stage-ground,
  .premium-hero .hero-visual-status .van-route i,
  .premium-hero .hero-visual-status em::before {
    animation: none !important;
  }
}

/* --- The console around the stage ----------------------------------------
   The card kept a second border floating 18px inside the first: a box drawn
   inside a box. That inner frame becomes a glass sheen falling from the top
   edge, and the outer border becomes a gradient edge - a thin ring of light,
   brightest at the top corners, that turns very slowly. The ring is an
   overlay masked to a 1px band, so the card's own glass stays untouched. */
@property --edge-angle {
  syntax: "<angle>";
  initial-value: 210deg;
  inherits: false;
}
.premium-hero .hero-visual-card { border-color: rgba(207, 238, 255, .08); }
.premium-hero .hero-visual-card::before {
  /* Overrides the old inner frame: no border, no inset box. */
  inset: 0;
  border: 0;
  border-radius: inherit;
  background:
    radial-gradient(62% 44% at 50% -10%, rgba(207, 238, 255, .13), transparent 72%),
    radial-gradient(34% 26% at 12% 0%, rgba(143, 232, 255, .10), transparent 70%);
}
.premium-hero .hero-visual-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--edge-angle, 210deg),
    rgba(143, 232, 255, .6), rgba(207, 238, 255, .05) 28%,
    rgba(255, 158, 210, .55) 52%, rgba(207, 238, 255, .05) 74%,
    rgba(143, 232, 255, .6));
  -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;
  pointer-events: none;
  /* Browsers without @property simply show the ring at its resting angle. */
  animation: edgeTurn 60s linear infinite;
}
@keyframes edgeTurn { to { --edge-angle: 570deg; } }
@media (prefers-reduced-motion: reduce) {
  .premium-hero .hero-visual-card::after { animation: none; }
}

/* --- The hero facts line --------------------------------------------------
   Replaces five marketing pills and three stat boxes: one hairline row of
   three facts, nothing in a bubble. Dividers are border-inline-start so the
   row mirrors itself in RTL without help. The old .trust-strip and
   .hero-metrics rules are dead markup now, left in place like the rest of the
   minified stylesheet's retired rules. */
.hero-facts {
  display: flex;
  align-items: stretch;
  gap: 26px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(207, 238, 255, .13);
  animation: heroFadeUp .68s cubic-bezier(.16, 1, .3, 1) 1.16s both;
}
.hero-facts > div {
  display: grid;
  gap: 4px;
  align-content: start;
}
.hero-facts > div + div {
  border-inline-start: 1px solid rgba(207, 238, 255, .13);
  padding-inline-start: 26px;
}
.hero-facts strong {
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.01em;
  color: var(--text, #eaf7ff);
  line-height: 1.15;
}
.hero-facts span {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
  line-height: 1.45;
}
[dir="rtl"] .hero-facts strong { letter-spacing: 0; }
@media (max-width: 720px) {
  .hero-facts { gap: 18px; margin-top: 26px; }
  .hero-facts > div + div { padding-inline-start: 18px; }
  .hero-facts strong { font-size: 17px; }
  .hero-facts span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-facts { animation: none; }
}

/* --- One frame, one clean card --------------------------------------------
   The hero fills the viewport under the bar and centres, so the whole
   composition - headline, actions, facts, console - is one frame with nothing
   poking in from below. Spacing compresses with viewport height (clamp on vh)
   rather than with width, so a short laptop screen tightens the same layout a
   tall monitor relaxes. Gated to the two-column widths; stacked phone layout
   scrolls, as it should. */
@media (min-width: 1081px) {
  .premium-hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - 73px);
    padding: clamp(14px, 3vh, 44px) 0;
  }
  .premium-hero .hero h1 { margin: clamp(8px, 1.6vh, 18px) 0; }
  .premium-hero .hero p { font-size: clamp(15px, 2.1vh, 18px); line-height: 1.65; }
  .premium-hero .hero-actions { margin-top: clamp(14px, 2.4vh, 26px); }
  .hero-facts { margin-top: clamp(16px, 2.8vh, 30px); padding-top: clamp(12px, 2vh, 20px); }
  .premium-hero .hero-showcase { min-height: 0; }
  .premium-hero .hero-visual-card { padding: clamp(16px, 2.4vh, 28px); }
  .premium-hero .hero-stage { min-height: clamp(220px, 33vh, 330px); }
  .premium-hero .hero-visual-status { margin-top: clamp(8px, 1.5vh, 16px); padding: clamp(12px, 1.8vh, 17px) 18px; }
  .premium-hero .hero-visual-points { margin-top: clamp(8px, 1.4vh, 12px); }
  .premium-hero .hero-visual-points div { padding: clamp(9px, 1.5vh, 13px); }
}

/* The console goes opaque. It was 72% glass with a backdrop blur, and the
   roaming paw prints live on a fixed layer at z-index 3 - so trails drifted
   visibly across the card. Solid deep navy with a soft top light instead, and
   the card lifted above the paw layer so a trail passes behind it, unseen.
   The paws keep roaming everywhere else, which is where they charm. */
.premium-hero .hero-visual-card {
  z-index: 4;
  background: linear-gradient(180deg, rgba(24, 46, 72, .5), rgba(10, 23, 40, 0) 55%), #0a1a2e;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* The dark-theme sheet re-paints .hero-visual-card with html[data-theme]
   specificity, so the opaque clean-up must carry the same prefix to land. */
html[data-theme="dark"] .premium-hero .hero-visual-card {
  background: linear-gradient(180deg, rgba(24, 46, 72, .5), rgba(10, 23, 40, 0) 55%), #0a1a2e;
}
@media (min-width: 1081px) {
  /* The left column pays for the one-frame promise: default 1em paragraph
     margins and roomy panel paddings spend ~90px a 768px screen does not
     have. The headline itself is not touched. */
  .premium-hero .hero p { margin: clamp(6px, 1.2vh, 14px) 0 0; }
  .premium-hero .hero-book-btn { padding: clamp(10px, 1.7vh, 14px) 20px; }
  .premium-hero .hero-book-facts { margin-top: clamp(6px, 1vh, 10px); }
  .hero-facts strong { font-size: clamp(17px, 2.4vh, 21px); }
  .premium-hero .customer-access-group { padding: 4px; }
}
/* Corrections to the two blocks above, discovered by measuring rather than
   reading: (1) .premium-hero IS .hero — the same element — so a descendant
   selector like ".premium-hero .hero p" matches nothing; (2) an older
   .hero-visual-card rule paints its glass with !important, so the opaque
   clean-up must say it louder. */
@media (min-width: 1081px) {
  .premium-hero h1 { margin: clamp(8px, 1.6vh, 18px) 0; }
  .premium-hero .hero-copy p { font-size: clamp(15px, 2.1vh, 18px); line-height: 1.65; margin: clamp(6px, 1.2vh, 14px) 0 0; }
}
html[data-theme="dark"] .premium-hero .hero-visual-card,
.premium-hero .hero-visual-card {
  background: linear-gradient(180deg, rgba(24, 46, 72, .5), rgba(10, 23, 40, 0) 55%), #0a1a2e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (min-width: 1081px) {
  /* The Book panel and the "already booked?" pill were wrapping into two
     stacked rows - 167px where one 90px row does. Compact the pill until both
     sit side by side; the headline block stays exactly as designed. */
  .premium-hero { padding: clamp(10px, 1.8vh, 44px) 0; }
  .premium-hero .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .premium-hero .customer-access-group { padding: 4px; gap: 4px; flex: none; }
  .premium-hero .customer-access-group > span { font-size: 11px; padding: 0 7px; white-space: nowrap; }
  .premium-hero .customer-access-group .btn { padding: 9px 11px; font-size: 12px; white-space: nowrap; }
}
@media (min-width: 1081px) {
  /* Correction: nowrap "fit" by clipping 500px of controls behind the console.
     Wrap comes back; the vertical cost goes instead - the access pill loses
     its bubble and becomes a quiet text row (fitting the de-bubbled hero),
     and the button's own mini-facts strip goes: "6 daily windows" already
     stands one line below in the facts row. */
  .premium-hero .hero-actions { flex-wrap: wrap; }
  .premium-hero .hero-book-facts { display: none; }
  .premium-hero .customer-access-group {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    gap: 2px;
    align-self: center;
  }
  .premium-hero .customer-access-group > span { font-size: 12px; padding: 0 6px; }
  .premium-hero .customer-access-group .btn {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 8px 9px;
    font-size: 13px;
    color: #bfe8ff;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(143, 232, 255, .4);
  }
  .premium-hero .customer-access-group .btn:hover { color: #eaf7ff; transform: none; }
}
@media (min-width: 1081px) {
  /* The dark-theme sheet repaints .customer-access-group with html[data-theme]
     specificity - same lesson as the console card, third time today. */
  html[data-theme="dark"] .premium-hero .customer-access-group {
    background: none;
    border: 0;
    box-shadow: none;
  }
  .hero-facts { margin-top: clamp(10px, 2vh, 30px); padding-top: clamp(8px, 1.6vh, 20px); }
  .premium-hero { padding: clamp(8px, 1.6vh, 44px) 0; }
}
@media (min-width: 1081px) {
  /* RTL body text runs line-height 1.75 for the script's sake, which is right
     in paragraphs of reading text and 6px too generous in a hero that promises
     one frame. Slightly tighter here only. */
  [dir="rtl"] .premium-hero .hero-copy p { line-height: 1.62; }
  [dir="rtl"] .hero-facts span { line-height: 1.35; }
  [dir="rtl"] .premium-hero .hero-actions { margin-top: clamp(10px, 1.8vh, 26px); }
}


/* --- Console top-aligned with the headline --------------------------------
   The card sat vertically centred beside the column, so its top edge floated
   somewhere below "Fresh coat". Now both columns start from the same line: the
   card's top margin mirrors the h1's, so the console's edge and the
   headline's first line sit level. */
@media (min-width: 1081px) {
  .premium-hero .hero-grid { align-items: start; }
  .premium-hero .hero-showcase {
    align-self: start;
    transform: none;
    margin-top: clamp(8px, 1.6vh, 18px);
  }
}
@media (min-width: 1081px) {
  /* Correction, measured: the showcase still centred the card inside its own
     box, and the h1 margin rule above lost to a stronger selector - so the
     card floated 30px low. Pin the card to the showcase top, and give h1 and
     showcase the same top offset from one expression so they cannot drift. */
  .premium-hero h1.hero-title { margin-top: clamp(8px, 1.6vh, 18px); }
  .premium-hero .hero-showcase {
    place-items: start center;
    /* The extra 16px is the h1's own internal leading: a 96px line box
       carries ~16px of air above the visible cap of "Fresh coat", and rects
       align while eyes read glyphs. */
    margin-top: calc(clamp(8px, 1.6vh, 18px) + 16px);
  }
}


/* ===========================================================================
   Package tiers
   ===========================================================================
   Each card owns a colour through --tier-a / --tier-b, set per tier in the
   template, and the three of them run the brand's whole range: Fresh cool,
   Spa Day warm, Full Groom — the one that contains the others — spanning
   both. The row reads as a progression instead of three copies of one card.

   The packages are cumulative (Full Groom is Fresh plus three, Spa Day is
   Full Groom plus five), so what a tier inherits is stated once and set back,
   and only what it adds gets the bright list. Dot count carries the ladder
   even in grayscale.

   Old .service-visual / .service-live-ui / .service-facts rules are dead
   markup, left in place: the stylesheet above is minified single-line rules
   and excavating them risks the neighbours for no visible gain.
   =========================================================================== */

.services-section .pet-cat-picker { display: inline-flex; margin: 0 0 26px; }
/* max-content centres the picker at its natural size; max-width keeps that
   promise from overflowing a narrow phone, where the tabs flex down instead. */
.services-section .container > .pet-cat-picker {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

/* --- The card ------------------------------------------------------------- */
.services-section .service-grid { align-items: stretch; gap: 20px; }

.service-card.tier {
  --tier-a: 143, 232, 255;
  --tier-b: 143, 232, 255;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 32px 28px 28px;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(207, 238, 255, .09);
  background:
    radial-gradient(130% 52% at 50% 0%, rgba(var(--tier-a), .1), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)),
    #091829;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
}

/* A hairline of the tier's own colour across the top edge — the whole card's
   identity in one pixel, brightest at the middle. */
.tier-cap {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(var(--tier-a), .9) 30%, rgba(var(--tier-b), .9) 70%, transparent);
}

/* --- Header --------------------------------------------------------------- */
.tier-head { display: grid; gap: 12px; }
.tier-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tier-dots { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.tier-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(207, 238, 255, .18);
}
.tier-dots i.on {
  background: linear-gradient(120deg, rgb(var(--tier-a)), rgb(var(--tier-b)));
  box-shadow: 0 0 8px rgba(var(--tier-a), .55);
}

.tier-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
[dir="rtl"] .tier-eyebrow { letter-spacing: 0; text-transform: none; }
.tier-eyebrow.is-star {
  background: linear-gradient(100deg, rgb(var(--tier-a)), rgb(var(--tier-b)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The star cannot be clipped text, so it takes the gradient's first colour. */
.tier-eyebrow svg { width: 13px; height: 13px; flex: none; fill: rgb(var(--tier-a)); stroke: none; }

.tier-head h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1.02;
}
[dir="rtl"] .tier-head h3 { letter-spacing: 0; }

.tier-desc {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
  min-height: 68px;
}

/* --- Price ----------------------------------------------------------------
   The loudest thing on the card, in the tier's colour, with the duration as a
   quiet chip on the same baseline. */
.tier-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 22px 0 0;
  padding: 18px 0;
  border-top: 1px solid rgba(207, 238, 255, .08);
  border-bottom: 1px solid rgba(207, 238, 255, .08);
}
.tier-price-label {
  width: 100%;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .75;
}
[dir="rtl"] .tier-price-label { letter-spacing: 0; text-transform: none; }
.tier-price strong {
  font-size: 36px;
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.02;
  background: linear-gradient(100deg, #ffffff 5%, rgb(var(--tier-a)) 55%, rgb(var(--tier-b)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[dir="rtl"] .tier-price strong { letter-spacing: 0; }
.tier-price em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  padding: 5px 11px;
  border: 1px solid rgba(207, 238, 255, .12);
  border-radius: 999px;
  margin-inline-start: auto;
}

/* --- What it inherits, and what it adds ----------------------------------- */
.tier-body { padding: 20px 0 24px; display: grid; gap: 12px; }

/* Set back on purpose: this is the tier below, already covered by the price
   above it. Context, not a feature. */
.tier-inherits {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(var(--tier-a), .07);
  border: 1px solid rgba(var(--tier-a), .16);
  font-size: 13px;
  font-weight: 800;
  color: #d6ecfa;
}
.tier-inherits svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: rgb(var(--tier-a)); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tier-plus {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .7;
}
[dir="rtl"] .tier-plus { letter-spacing: 0; text-transform: none; }

.tier-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tier-includes li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 650;
  color: #cfe3f5;
  line-height: 1.4;
}
/* The tick sits in a tinted disc in the tier's colour rather than floating
   bare — it gives the list a left margin the eye can run down. */
.tier-includes .tick {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: rgba(var(--tier-a), .13);
  border: 1px solid rgba(var(--tier-a), .22);
}
.tier-includes .tick svg {
  width: 11px; height: 11px;
  fill: none; stroke: rgb(var(--tier-a)); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Call to action ------------------------------------------------------- */
.tier-cta { margin-top: auto; width: 100%; padding: 15px 22px; font-size: 14.5px; }
.service-card.tier:not(.recommended) .tier-cta {
  background: rgba(var(--tier-a), .08);
  border: 1px solid rgba(var(--tier-a), .26);
  color: #eaf7ff;
  box-shadow: none;
}
.service-card.tier:not(.recommended) .tier-cta:hover {
  background: rgba(var(--tier-a), .16);
  border-color: rgba(var(--tier-a), .5);
}

/* --- The recommended tier -------------------------------------------------
   Lifted, brighter, edged in its own gradient. Standing slightly proud of its
   neighbours is what makes a pricing row read as a recommendation rather than
   three equal options. */
.service-card.tier.recommended {
  border-color: transparent;
  background:
    radial-gradient(130% 58% at 50% 0%, rgba(var(--tier-a), .17), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018)),
    #0b1e34;
  box-shadow: 0 34px 76px rgba(0, 0, 0, .46);
}
.service-card.tier.recommended::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg, rgba(var(--tier-a), .8), rgba(var(--tier-b), .5) 50%, rgba(207, 238, 255, .08));
  -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;
  pointer-events: none;
}
.service-card.tier.recommended .tier-cta {
  background: linear-gradient(115deg, rgb(var(--tier-a)), #cfeeff 52%, rgb(var(--tier-b)));
  color: #06111f;
  box-shadow: 0 16px 38px rgba(var(--tier-a), .28);
}
@media (min-width: 981px) {
  .service-card.tier.recommended { margin: -16px 0; padding-top: 48px; padding-bottom: 44px; }
}

/* --- Motion --------------------------------------------------------------- */
.services-section .service-card.tier {
  transition: transform .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
}
.services-section .service-card.tier:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--tier-a), .34);
  box-shadow: 0 36px 76px rgba(0, 0, 0, .48);
}
.services-section .service-card.tier.recommended:hover { transform: translateY(-10px); }

@media (max-width: 980px) {
  .service-card.tier { padding: 26px 22px 22px; }
  .tier-desc { min-height: 0; }
  .tier-head h3 { font-size: 27px; }
  .tier-price strong { font-size: 30px; }
  .sec-head { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-section .service-card.tier,
  .services-section .service-card.tier:hover { transition: none; transform: none; }
}
@media (max-width: 430px) {
  /* "Birds & small pets" cannot shrink to a third of a 320px screen, and a
     clipped label is worse than a second row. The tabs wrap instead; min-width
     lets them shrink at all, which flex items refuse to do by default. */
  .services-section .container > .pet-cat-picker { flex-wrap: wrap; }
  .services-section .pet-cat { flex: 1 1 auto; min-width: 0; }
}

/* ===========================================================================
   Shared section heading
   ===========================================================================
   One component for every section head on the home page. Was three different
   treatments, all of them opening with an .eyebrow pill. */
.sec-head { max-width: 660px; margin: 0 auto 34px; text-align: center; }
.sec-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* A short rule instead of a pill: same job, none of the bubble. */
.sec-kicker i { width: 26px; height: 1px; background: linear-gradient(90deg, transparent, #8fe8ff); }
[dir="rtl"] .sec-kicker { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .sec-kicker i { background: linear-gradient(270deg, transparent, #8fe8ff); }
.sec-head h2 { margin: 14px 0 0; }
.sec-lead { margin: 14px auto 0; max-width: 560px; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* ===========================================================================
   How it works — three steps that show themselves
   ===========================================================================
   Four steps became three: "choose pet and service" and "pick date and time"
   were one decision split across two cards, and the booking form has always
   asked for them together.

   Every illustration is CSS shapes plus one inline SVG van — no images, no
   requests. They are aria-hidden; the heading and sentence carry the meaning.
   Animation only runs once the row has scrolled in, and not at all under
   prefers-reduced-motion.
   =========================================================================== */

.hiw-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.hiw-step {
  position: relative;
  padding: 22px 22px 26px;
  border-radius: 24px;
  border: 1px solid rgba(207, 238, 255, .09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)),
    #091829;
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.hiw-step:hover { transform: translateY(-6px); border-color: rgba(143, 232, 255, .28); }
.hiw-num {
  display: inline-block;
  margin: 18px 0 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #8fe8ff;
}
[dir="rtl"] .hiw-num { letter-spacing: .08em; }
.hiw-step h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.01em; }
[dir="rtl"] .hiw-step h3 { letter-spacing: 0; }
.hiw-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* The stage each illustration plays on. */
.hiw-art {
  position: relative;
  /* Tall enough for the phone (158px), which is the tallest thing any panel
     holds - at 168 it cleared by 5px a side and the mobile override clipped
     it outright. */
  height: 184px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(143, 232, 255, .09), transparent 62%),
    #061321;
  border: 1px solid rgba(207, 238, 255, .07);
  display: grid;
  place-items: center;
}

/* --- 1. A phone, and a thumb using it -------------------------------------
   The first version was a rounded rectangle with three grey bars: a wireframe
   of a phone rather than a phone. This one has the hardware (rounded chassis,
   side button, screen inset, dynamic island, home indicator), a status bar
   with signal and battery, and list rows shaped like real ones — tick, two
   lines of text, a price on the right. */
.phone {
  position: relative;
  width: 112px;
  height: 158px;
  border-radius: 17px;
  padding: 3px;
  background: linear-gradient(150deg, #35506e, #16273d 42%, #0d1a2b);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.phone-btn {
  position: absolute;
  top: 42px;
  inset-inline-end: -1.5px;
  width: 1.5px;
  height: 20px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .22);
}
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  padding: 12px 7px 0;
  background: linear-gradient(180deg, #0b1c30, #071523);
}
.ph-island {
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 7px;
  border-radius: 999px;
  background: #05101c;
}
.ph-status {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 2px 7px;
  color: rgba(234, 247, 255, .8);
}
.ph-status b { font-size: 5.5px; font-weight: 800; letter-spacing: 0; margin-inline-end: auto; }
/* Signal bars: four rising ticks. */
.ph-sig { display: inline-flex; align-items: flex-end; gap: 1px; height: 5px; }
.ph-sig i { width: 1.2px; background: currentColor; border-radius: .5px; }
.ph-sig i:nth-child(1) { height: 2px; }
.ph-sig i:nth-child(2) { height: 3px; }
.ph-sig i:nth-child(3) { height: 4px; }
.ph-sig i:nth-child(4) { height: 5px; opacity: .35; }
.ph-bat {
  width: 9px; height: 5px;
  border: .7px solid currentColor;
  border-radius: 1.5px;
  position: relative;
  background: linear-gradient(90deg, currentColor 62%, transparent 62%);
  background-clip: content-box;
  padding: .6px;
}
.ph-bat::after {
  content: "";
  position: absolute;
  inset-inline-end: -2px; top: 1.4px;
  width: 1px; height: 2px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}

.ph-head { display: grid; gap: 3px; margin-bottom: 7px; }
.ph-h1 { display: block; height: 5px; width: 62%; border-radius: 2px; background: rgba(234, 247, 255, .55); }
.ph-h2 { display: block; height: 3px; width: 40%; border-radius: 2px; background: rgba(207, 238, 255, .18); }

/* A list row: tick, two text lines, price. */
.ph-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: rgba(207, 238, 255, .05);
  border: 1px solid transparent;
}
.ph-tick {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  border: 1.2px solid rgba(207, 238, 255, .3);
}
.ph-txt { flex: 1; display: grid; gap: 2.5px; }
.ph-txt i { display: block; height: 2.6px; border-radius: 2px; background: rgba(207, 238, 255, .3); }
.ph-txt i:first-child { width: 74%; background: rgba(234, 247, 255, .45); }
.ph-txt i:last-child { width: 46%; }
.ph-cost { width: 15px; height: 4px; border-radius: 2px; background: rgba(207, 238, 255, .28); flex: none; }
/* The chosen row, filled in by the loop. */
.ph-row.is-pick { background: rgba(143, 232, 255, .14); border-color: rgba(143, 232, 255, .5); }
.ph-row.is-pick .ph-tick { border-color: #8fe8ff; background: radial-gradient(circle, #8fe8ff 42%, transparent 44%); }
.ph-row.is-pick .ph-cost { background: #8fe8ff; }

.ph-label { display: block; height: 3px; width: 32%; border-radius: 2px; background: rgba(207, 238, 255, .18); margin: 8px 0 5px; }
.ph-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5px; }
.ph-slots i { height: 11px; border-radius: 3px; background: rgba(207, 238, 255, .07); border: 1px solid rgba(207, 238, 255, .1); }
.ph-slots i:nth-child(5) { background: linear-gradient(120deg, #8fe8ff, #ff9ed2); border-color: transparent; }
.ph-home {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 2.5px;
  border-radius: 3px;
  background: rgba(234, 247, 255, .35);
}
/* The thumb: a soft pad with a contact ring, not a cursor dot. */
.phone .tap {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95), rgba(190, 224, 245, .5));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 0 0 5px rgba(143, 232, 255, .16);
  top: 62px; inset-inline-start: 66px;
  opacity: 0;
}

/* --- 2 & 3. A street map --------------------------------------------------
   Layered the way a real dark map is: ground darkest, buildings a step
   lighter, roads lighter still, with a centre line on the two main roads and
   a park for relief. */
.map {
  position: relative;
  /* Exactly the SVG viewBox size, and that is load bearing: the route is
     DRAWN in viewBox units but DRIVEN by offset-path, which is raw CSS px.
     At any other size the van follows a path a few pixels off the one the
     customer can see. Same numbers in both systems, no conversion to get
     wrong. */
  width: 160px;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  background: #050f1c;
  box-shadow: inset 0 0 0 1px rgba(207, 238, 255, .07);
}
.map-plan, .map-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-plan .blocks rect { fill: rgba(207, 238, 255, .055); }
.map-plan .park { fill: rgba(111, 215, 172, .12); }
.map-plan .roads path { stroke: rgba(207, 238, 255, .13); stroke-width: 9; stroke-linecap: square; fill: none; }
.map-plan .lanes path { stroke: rgba(207, 238, 255, .22); stroke-width: .8; stroke-dasharray: 4 5; fill: none; }

/* The route: drawn on, not just present. */
.map-route path {
  fill: none;
  stroke: #8fe8ff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  filter: drop-shadow(0 0 4px rgba(143, 232, 255, .5));
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}

/* A proper teardrop pin with a hole, and its shadow on the ground. */
.map .pin {
  position: absolute;
  /* Tip on the route.s end point (124,64) - the same spot the van parks at. */
  left: 116px; top: 44px;
  width: 17px; height: 17px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, #a8eeff, #ff9ed2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .55);
}
.map .pin i { position: absolute; inset: 5px; border-radius: 50%; background: #050f1c; }
.map .ripple {
  position: absolute;
  left: 111px; top: 59px;
  width: 26px; height: 11px;
  border-radius: 50%;
  border: 1.4px solid rgba(143, 232, 255, .75);
  opacity: 0;
}

/* The destination marker the van is driving to. */
.map .dest {
  position: absolute;
  /* On the route.s end point, so the van parks in it, not beside it. */
  left: 124px; top: 64px;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: rgba(255, 158, 210, .25);
  border: 1.6px solid #ff9ed2;
  display: grid;
  place-items: center;
}
.map .dest i { width: 4px; height: 4px; border-radius: 50%; background: #ff9ed2; }

/* The van rides the route itself, so it leans into every corner. */
.map .van { position: absolute; left: 0; top: 0; width: 34px; margin: -9px 0 0 -17px; }
.map .van svg { width: 100%; height: auto; display: block; }
.map .van .v-body { fill: #eaf7ff; }
.map .van .v-roof { fill: #b9d6ea; }
.map .van .v-glass { fill: #2a4a6b; }
.map .van .v-stripe { fill: #8fe8ff; }
.map .van .v-tyre { fill: #16283d; }
.map .van .v-hub { fill: #8aa5bd; }

/* --- Motion ---------------------------------------------------------------
   Held still until the row arrives, so nothing plays to an empty screen. The
   no-JS branch runs immediately: without js-rise nothing is hidden and the row
   is simply there. */
.hiw-steps.is-risen .phone .tap,
html:not(.js-rise) .phone .tap { animation: hiwTap 6.5s var(--ease) infinite; }
.hiw-steps.is-risen .ph-row.is-pick,
html:not(.js-rise) .ph-row.is-pick { animation: hiwPick 6.5s var(--ease) infinite; }
.hiw-steps.is-risen .ph-slots i:nth-child(5),
html:not(.js-rise) .ph-slots i:nth-child(5) { animation: hiwSlot 6.5s var(--ease) infinite; }

.hiw-steps.is-risen .map .pin,
html:not(.js-rise) .map .pin { animation: hiwDrop 5s var(--ease) infinite; }
.hiw-steps.is-risen .map .ripple,
html:not(.js-rise) .map .ripple { animation: hiwRipple 5s var(--ease) infinite; }
.hiw-steps.is-risen .map .r2,
html:not(.js-rise) .map .r2 { animation-delay: .35s; }

.hiw-steps.is-risen .map-route path,
html:not(.js-rise) .map-route path { animation: hiwDraw 6.5s var(--ease) infinite; }
.hiw-steps.is-risen .map .dest,
html:not(.js-rise) .map .dest { animation: hiwArrive 6.5s var(--ease) infinite; }

/* offset-path is what lets the van steer rather than slide. Where it is not
   supported the van simply parks at the destination — still a correct
   picture, just not an animated one. */
@supports (offset-path: path("M0 0")) {
  .map .van { offset-path: path("M6 86 H40 Q52 86 52 74 V57 Q52 45 64 45 H112 Q124 45 124 57 V64"); offset-rotate: auto; offset-distance: 0%; margin: 0; }
  .hiw-steps.is-risen .map .van,
  html:not(.js-rise) .map .van { animation: hiwDrive 6.5s var(--ease) infinite; }
}
@supports not (offset-path: path("M0 0")) {
  .map .van { left: 108px; top: 52px; }
}

@keyframes hiwTap {
  0%, 6% { opacity: 0; top: 62px; transform: scale(.55); }
  11% { opacity: 1; top: 62px; transform: scale(1); }
  18% { opacity: 1; top: 62px; transform: scale(.84); }
  27% { opacity: .85; top: 62px; transform: scale(1); }
  40% { opacity: .85; top: 122px; transform: scale(1); }
  48% { opacity: 1; top: 122px; transform: scale(.84); }
  60% { opacity: 1; top: 122px; transform: scale(1); }
  72%, 100% { opacity: 0; top: 122px; transform: scale(.55); }
}
@keyframes hiwPick {
  0%, 12% { background: rgba(207, 238, 255, .05); border-color: transparent; }
  20%, 100% { background: rgba(143, 232, 255, .14); border-color: rgba(143, 232, 255, .5); }
}
@keyframes hiwSlot {
  0%, 46% { background: rgba(207, 238, 255, .07); border-color: rgba(207, 238, 255, .1); }
  54%, 100% { background: linear-gradient(120deg, #8fe8ff, #ff9ed2); border-color: transparent; }
}
@keyframes hiwDrop {
  0% { transform: rotate(-45deg) translateY(-52px); opacity: 0; }
  15% { transform: rotate(-45deg) translateY(0); opacity: 1; }
  21% { transform: rotate(-45deg) translateY(-8px); }
  27% { transform: rotate(-45deg) translateY(0); }
  31% { transform: rotate(-45deg) translateY(-3px); }
  36%, 100% { transform: rotate(-45deg) translateY(0); opacity: 1; }
}
@keyframes hiwRipple {
  0%, 15% { opacity: 0; transform: scale(.25); }
  22% { opacity: .9; transform: scale(1); }
  46%, 100% { opacity: 0; transform: scale(2.3); }
}
@keyframes hiwDraw {
  0% { stroke-dashoffset: 240; }
  46%, 100% { stroke-dashoffset: 0; }
}
@keyframes hiwDrive {
  0%, 4% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 1; }
  62% { offset-distance: 100%; opacity: 1; }
  100% { offset-distance: 100%; opacity: 1; }
}
@keyframes hiwArrive {
  0%, 58% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 158, 210, .55); }
  70% { transform: scale(1.3); box-shadow: 0 0 0 10px rgba(255, 158, 210, 0); }
  80%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 158, 210, 0); }
}


/* ===========================================================================
   What we offer
   ===========================================================================
   The statement and the three things it rests on, side by side. Deliberately
   not a third 3-column grid: the packages and the steps above are both grids,
   and a page needs a change of rhythm as much as it needs alignment.
   =========================================================================== */

.offer-panel {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 34px;
  align-items: center;
  padding: 38px;
  border-radius: 28px;
  border: 1px solid rgba(207, 238, 255, .1);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(143, 232, 255, .1), transparent 58%),
    radial-gradient(80% 70% at 100% 100%, rgba(255, 131, 191, .09), transparent 58%),
    #0a1a2e;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}
.offer-say h3 { margin: 0; font-size: clamp(24px, 2.6vw, 33px); line-height: 1.14; letter-spacing: -.02em; }
[dir="rtl"] .offer-say h3 { letter-spacing: 0; }
.offer-say p { margin: 16px 0 24px; color: var(--muted); font-size: 15px; line-height: 1.7; }

.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.offer-list li {
  display: flex;
  gap: 15px;
  padding: 17px 0;
  align-items: start;
}
.offer-list li + li { border-top: 1px solid rgba(207, 238, 255, .09); }
.offer-ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 13px;
  background: rgba(143, 232, 255, .1);
  border: 1px solid rgba(143, 232, 255, .2);
}
.offer-ico svg {
  width: 21px; height: 21px;
  fill: none; stroke: #8fe8ff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.offer-list h4 { margin: 0 0 5px; font-size: 16px; font-weight: 850; letter-spacing: -.01em; }
[dir="rtl"] .offer-list h4 { letter-spacing: 0; }
.offer-list p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 980px) {
  .hiw-steps { grid-template-columns: 1fr; }

  .offer-panel { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-step, .hiw-step:hover { transition: none; transform: none; }
  .phone .tap, .ph-row.is-pick, .ph-slots i,
  .map .pin, .map .ripple, .map .van, .map .dest,
  .map-route path { animation: none !important; }
  /* Several of these are drawn mid-flight by their keyframes, so a still frame
     has to put them back: the pin at rest, the route fully drawn, the van
     parked at the destination rather than at the start of its path. */
  .map .pin { transform: rotate(-45deg); opacity: 1; }
  .map .ripple { opacity: 0; }
  .map-route path { stroke-dashoffset: 0; }
  .map .van { offset-distance: 100%; opacity: 1; }
}

/* ===========================================================================
   Inside the visit — the cutaway
   ===========================================================================
   The section promised "a grooming setup" and showed three mini-panels of
   words about a van. Now the van is drawn in section: the water tank, the
   product shelf, the bath and the grooming table are all there, and the three
   claims are numbered against the parts of the van they are actually about.

   The old .van-story / .van-story-grid rules are dead markup, left in place —
   the stylesheet above is minified single-line rules and excavating them
   risks the neighbours for no visible gain.
   =========================================================================== */

.van-cut {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 30px 38px;
  align-items: center;
  padding: 40px;
  border-radius: 30px;
  border: 1px solid rgba(207, 238, 255, .1);
  background:
    radial-gradient(80% 70% at 8% 0%, rgba(143, 232, 255, .1), transparent 58%),
    radial-gradient(70% 70% at 100% 100%, rgba(255, 131, 191, .08), transparent 58%),
    #0a1a2e;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .36);
}
.van-cut-copy h2 { margin: 14px 0 0; font-size: clamp(25px, 2.7vw, 36px); line-height: 1.12; }
.van-cut-lead { margin: 16px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* --- The drawing ---------------------------------------------------------- */
.van-cut-stage {
  position: relative;
  border-radius: 20px;
  padding: 10px;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(143, 232, 255, .07), transparent 62%),
    #061321;
  border: 1px solid rgba(207, 238, 255, .07);
}
.van-cut-stage svg { display: block; width: 100%; height: auto; }

/* The shell is see-through: that is the whole point of a cutaway. */
.vc-shell { fill: rgba(207, 238, 255, .045); stroke: #cfeeff; stroke-width: 2.2; stroke-linejoin: round; }
.vc-vent { fill: rgba(207, 238, 255, .12); stroke: #9fc4dd; stroke-width: 1.4; }
.vc-ground { stroke: rgba(207, 238, 255, .16); stroke-width: 1.5; stroke-dasharray: 5 6; }

.vc-tank { fill: rgba(143, 232, 255, .12); stroke: #8fe8ff; stroke-width: 1.6; }
.vc-water-line { stroke: #8fe8ff; stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.vc-pipe { fill: none; stroke: #8fe8ff; stroke-width: 1.5; stroke-linecap: round; opacity: .6; }

.vc-shelf { stroke: #9fc4dd; stroke-width: 2; stroke-linecap: round; }
.vc-bottle { fill: rgba(143, 232, 255, .2); stroke: #8fe8ff; stroke-width: 1.3; }
.vc-bottle.b3 { fill: rgba(255, 158, 210, .22); stroke: #ff9ed2; }

.vc-tub { fill: rgba(207, 238, 255, .07); stroke: #cfeeff; stroke-width: 1.8; stroke-linejoin: round; }
.vc-tub-water { fill: rgba(143, 232, 255, .3); stroke: none; }

.vc-table { fill: none; stroke: #9fc4dd; stroke-width: 2.2; stroke-linecap: round; }

.vc-dog ellipse, .vc-dog circle { fill: #ff9ed2; }
.vc-dog-ear { fill: #e585ad; }
.vc-dog-legs { stroke: #ff9ed2; stroke-width: 3.4; stroke-linecap: round; fill: none; }
.vc-dog-tail { stroke: #ff9ed2; stroke-width: 3; stroke-linecap: round; fill: none; }

.vc-wheel { fill: #16283d; stroke: #cfeeff; stroke-width: 2; }
.vc-hub { fill: #8aa5bd; }

/* --- The numbered markers -------------------------------------------------
   Each one sits on the part of the van its claim is about, and shares its
   number with the list below. The ping is a second circle expanding out of
   the dot, staggered so the three read as a sequence rather than a flash. */
.vc-dot { fill: #8fe8ff; stroke: #061321; stroke-width: 2; }
.vc-spot text {
  fill: #06111f;
  font-size: 9px;
  font-weight: 900;
  text-anchor: middle;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
.vc-ping { fill: none; stroke: #8fe8ff; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.van-cut.is-risen .vc-ping,
html:not(.js-rise) .vc-ping { animation: vcPing 3.4s var(--ease) infinite; }
.van-cut.is-risen .s2 .vc-ping,
html:not(.js-rise) .s2 .vc-ping { animation-delay: .5s; }
.van-cut.is-risen .s3 .vc-ping,
html:not(.js-rise) .s3 .vc-ping { animation-delay: 1s; }
@keyframes vcPing {
  0% { opacity: .85; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(2.6); }
}

/* --- The three claims, numbered to match ---------------------------------- */
.van-cut-facts {
  grid-column: 1 / -1;
  list-style: none;
  margin: 4px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(207, 238, 255, .09);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.van-cut-facts li { display: flex; gap: 13px; align-items: start; }
.vcf-num {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  color: #06111f;
  background: linear-gradient(125deg, #8fe8ff, #cfeeff);
}
.van-cut-facts strong { display: block; font-size: 15px; font-weight: 850; margin-bottom: 4px; }
.van-cut-facts span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 980px) {
  .van-cut { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .van-cut-facts { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-ping { animation: none !important; opacity: 0; }
}

/* The lookup form is the only thing on the track screen now that the portal
   aside is gone, so it gets a readable measure rather than the full width. */
.track-search-solo { max-width: 620px; margin-inline: auto; }

/* The owner's console is a staff door in a customer footer: present and
   findable, never competing with the customer links above it. */
.footer-owner { opacity: .55; font-size: 13px; }
.footer-owner:hover { opacity: 1; }

/* Shared phone layout: keep controls readable without relying on clipped overflow. */
:where(.field,.form-grid,.choice-grid,.summary-item,.summary-line,.booking-group,.panel-title)>*{min-width:0}
.pet-choice,.slot-choice,.service-choice{position:relative;min-width:0}
.pet-choice input,.slot-choice input,.service-choice input{inset:0;width:100%;height:100%;margin:0;padding:0;pointer-events:none}
.pet-choice input:focus-visible+span,.slot-choice input:focus-visible+span,.service-choice input:focus-visible+span{outline:3px solid #70d7ff;outline-offset:2px}
@media(max-width:760px){
  html{scroll-padding-top:90px;scroll-padding-bottom:100px}
  body{padding-inline:max(0px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-right))}
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-width:0;max-width:100%;font-size:16px!important;scroll-margin-block:100px}
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select{min-height:46px}
  .btn,.btn.small{min-height:44px;white-space:normal;text-align:center;line-height:1.4}
  .form-grid,.choice-grid,.summary-box{min-width:0}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .field,.summary-item,.summary-panel,.booking-group,.booking-details{min-width:0;overflow-wrap:anywhere}
  .panel-title,.booking-group-head,.map-toolbar{flex-wrap:wrap}
  .summary-line{gap:12px;overflow-wrap:anywhere}
  .summary-line>*{flex:1;min-width:0}
  .hero-actions,.ops-actions{flex-wrap:wrap}
  .hero-actions .btn,.ops-actions .btn{flex:1 1 140px}
  .booking-section .flow-main{padding:20px 16px 0}
  .booking-section .flow-actions{margin:16px -16px 0;padding:12px 16px max(12px,env(safe-area-inset-bottom));max-width:none;isolation:isolate}
  .booking-section .flow-actions .btn{min-width:0}
  .booking-section .flow-main:has(input:focus,select:focus,textarea:focus) .flow-actions{position:static}
  #map,#trackMap{height:clamp(250px,48svh,360px)}
  .login-stage{padding-block:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-bottom))}
  .password-wrap input{padding-inline-end:76px}
  .password-wrap button{min-height:44px;top:50%;inset-inline-end:4px}
  .login-card .summary-box,.login-card .booking-card-main{grid-template-columns:minmax(0,1fr)}
  .footer-grid{gap:22px}
}

/* Shared UI icons: no font or OS emoji dependency. */
.ui-icon{display:inline-block;vertical-align:middle;flex-shrink:0;width:18px;height:18px}html[dir=rtl] .ui-icon{transform:scaleX(-1)}

/* Quiet, readable map credits and workspace branding. */
.leaflet-container .leaflet-control-attribution{background:rgba(255,255,255,.28);color:#52616d;border-radius:7px 0 0 0;padding:3px 7px;font-size:10px;line-height:1.5;box-shadow:none}
.leaflet-container .leaflet-control-attribution a{color:#465968;text-decoration:none}

.leaflet-container .leaflet-control-attribution a:hover,.leaflet-container .leaflet-control-attribution a:focus-visible{text-decoration:underline;color:#243c4d}