@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap'); :root { --ink: #10343a; --muted: #60777a; --line: #dce9e8; --paper: #f5fbfc; --white: #fff; --aqua: #007c91; --aqua-dark: #005c6c; --aqua-light: #e2f5f5; --mint: #c7eadb; --yellow: #f8ca63; --coral: #d96250; --shadow: 0 18px 45px rgba(15, 61, 68, .12); --radius: 20px; } * { box-sizing: border-box; } [hidden] { display:none !important; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font: 500 15px/1.55 Manrope, Arial, sans-serif; } button, input, select, textarea { font: inherit; } button, select { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .6; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid #f2af26; outline-offset: 3px; } .skip-link { position: absolute; left: 14px; top: -60px; z-index: 100; padding: 10px 15px; color: #fff; background: var(--aqua-dark); border-radius: 0 0 8px 8px; } .skip-link:focus { top: 0; } .announcement { position: fixed; z-index: 101; top: 12px; right: 14px; max-width: 340px; padding: 11px 15px; color: #fff; background: var(--ink); border-radius: 10px; box-shadow: var(--shadow); transform: translateY(-130%); transition: transform .25s ease; } .announcement.show { transform: translateY(0); } .urban-splash { position:fixed; z-index:120; inset:0; display:grid; place-items:center; overflow:hidden; color:#fff; background:radial-gradient(circle at 82% 13%,#38aeb3 0 6%,transparent 28%),linear-gradient(145deg,#0c414b,#006d7e); }.urban-splash[hidden] { display:none; }.splash-content { position:relative; z-index:2; width:min(92%,510px); padding:24px; text-align:center; }.splash-logo { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 16px; color:var(--aqua-dark); background:#fff; border-radius:22px; box-shadow:0 18px 35px rgba(0,0,0,.2); font:53px/1 Georgia,serif; }.splash-brand { margin:0 0 20px; color:#fff; font-size:20px; font-weight:800; letter-spacing:-.8px; }.splash-brand span { color:#9fe4d5; }.splash-content h1 { margin:0 auto 15px; font-size:clamp(35px,5vw,51px); letter-spacing:-2.2px; }.splash-content h1 em { color:#b9eee4; }.splash-content > p { color:#c4dcde; }.splash-content .button { min-width:160px; margin-top:19px; background:#fff; color:var(--aqua-dark); }.splash-orbit { position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:50%; }.orbit-one { width:510px; height:510px; top:-220px; left:-175px; }.orbit-two { width:480px; height:480px; right:-185px; bottom:-260px; } .site-header { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; height: 82px; padding: 0 28px; margin: auto; } .brand { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 21px; font-weight: 800; letter-spacing: -.9px; text-decoration: none; } .brand span:last-child, .brand > span:not(.brand-mark) span { color: var(--aqua); } .brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 3px; color: #fff; background: var(--aqua); border-radius: 50%; font: 28px/1 Georgia, serif; transform: rotate(-10deg); } .brand-mark.ut-mark { font:800 9px/1 Manrope,sans-serif; letter-spacing:-.4px; transform:none; } .main-nav { display: flex; gap: 27px; color: #446468; font-size: 13px; } .main-nav a { text-decoration: none; } .account-button { min-width: 95px; } .button { display: inline-flex; gap: 9px; align-items: center; justify-content: center; padding: 11px 17px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 10px; font-weight: 800; transition: transform .2s, background .2s, box-shadow .2s; } .button:hover { text-decoration: none; transform: translateY(-1px); } .button-primary { color: #fff; background: var(--aqua); box-shadow: 0 7px 14px rgba(0,124,145,.18); } .button-primary:hover { background: var(--aqua-dark); box-shadow: 0 10px 20px rgba(0,92,108,.24); } .button-quiet { border-color: var(--line); } .button-quiet:hover { background: var(--white); } .button-large { width: 100%; padding: 15px 20px; font-size: 15px; } .full-width { width: 100%; } .text-button { padding: 0; color: var(--aqua); background: none; border: 0; font-weight: 800; text-decoration: underline; } .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; min-height: 465px; max-width: 1240px; padding: 54px 28px 68px; margin: auto; overflow: hidden; } .eyebrow { margin: 0 0 12px; color: var(--aqua); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1 { max-width: 650px; margin-bottom: 18px; font-size: clamp(42px, 5vw, 70px); line-height: 1.04; letter-spacing: -3.5px; } h1 em, h2 em { color: var(--aqua); font-family: Manrope, Arial, sans-serif; font-style:normal; font-weight:800; } .hero-lede { max-width: 590px; color: var(--muted); font-size: 17px; line-height: 1.75; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .hero-primary, .hero-secondary { min-width: 160px; justify-content: center; } .hero-secondary { border-color: var(--line); } .location-chip { display:inline-flex; gap:7px; align-items:center; padding:7px 10px; margin-bottom:26px; color:var(--aqua-dark); background:var(--aqua-light); border-radius:100px; font-size:11px; font-weight:800; }.location-chip span { color:#648187; font-weight:500; }.location-chip button { padding:0; color:var(--aqua); background:transparent; border:0; font-size:14px; } .trust-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 27px; color: var(--muted); font-size: 12px; } .trust-row span { display: inline-flex; gap: 5px; align-items: center; } .trust-row b { color: var(--ink); } .hero-visual { position: relative; min-height: 326px; overflow: hidden; background: linear-gradient(150deg, #d6f2ee 0%, #f7f2dc 100%); border-radius: 30px 30px 30px 90px; } .road-hero { background:#cdebf0; border-radius:30px 30px 30px 90px; } .road-hero > .sun,.road-hero > .cloud,.road-hero > .water-tank,.road-hero > .ground { display:none; } .road-brand { position:absolute; z-index:5; top:18px; right:18px; display:flex; flex-direction:column; gap:2px; padding:10px 12px; color:var(--ink); background:rgba(255,255,255,.76); border:1px solid rgba(255,255,255,.7); border-radius:12px; box-shadow:0 10px 18px rgba(16,52,58,.08); backdrop-filter:blur(8px); animation:floatCard 5s ease-in-out infinite; } .road-brand strong { font-size:15px; letter-spacing:-.4px; } .road-brand span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .road-tanker-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:filter .8s ease; } @keyframes roadDrive { from{transform:translateX(-3%)} to{transform:translateX(0)} } .road-hero.is-night .road-tanker-image { filter:brightness(.42) saturate(.78) hue-rotate(8deg); } .headlight-beam { position:absolute; z-index:3; right:2%; bottom:20%; width:105px; height:45px; opacity:0; background:linear-gradient(90deg,rgba(255,246,174,.82),transparent); filter:blur(6px); clip-path:polygon(0 38%,100% 0,100% 100%,0 62%); transition:opacity .5s; } .road-hero.is-night .headlight-beam { opacity:1; animation:lightPulse 2s ease-in-out infinite alternate; } @keyframes lightPulse { to{opacity:.65;transform:scaleX(1.08)} } @keyframes floatCard { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } } .road-hero .weather-badge { z-index:5; animation:floatCard 4.2s ease-in-out infinite; }.road-hero .card-mini { z-index:5; animation:floatCard 5.4s ease-in-out infinite; } .sun { position: absolute; top: 37px; right: 54px; width: 61px; height: 61px; background: var(--yellow); border-radius: 50%; } .cloud { position: absolute; width: 80px; height: 22px; background: rgba(255,255,255,.64); border-radius: 100px; } .cloud::before, .cloud::after { position: absolute; bottom: 0; background: inherit; border-radius: 50%; content: ""; } .cloud::before { left: 17px; width: 35px; height: 35px; }.cloud::after { right: 9px; width: 28px; height: 28px; } .cloud-one { top: 65px; left: 54px; }.cloud-two { top: 129px; right: 90px; transform: scale(.6); } .ground { position: absolute; right: -40px; bottom: -83px; left: -30px; height: 180px; background: #77bba8; border-radius: 50% 50% 0 0 / 40% 40% 0 0; } .water-tank { position: absolute; bottom: 57px; left: 24%; width: 183px; height: 158px; background: #00758b; border: 7px solid #f4fbf8; border-bottom-width: 16px; border-radius: 28px 28px 12px 12px; box-shadow: 11px 11px 0 rgba(18,89,91,.15); } .water-tank::before { position: absolute; top: -22px; left: 22px; width: 125px; height: 25px; background: #075b70; border: 7px solid #f4fbf8; border-bottom: 0; border-radius: 24px 24px 0 0; content: ""; } .water-tank::after { position: absolute; bottom: -29px; left: 59px; width: 55px; height: 21px; background: #064b5d; border-radius: 0 0 8px 8px; content: ""; } .water-tank span { position: absolute; right: 13px; left: 13px; height: 7px; background: #47acc0; border-radius: 8px; }.water-tank span:nth-child(1){top:32px}.water-tank span:nth-child(2){top:65px}.water-tank span:nth-child(3){top:98px} .card-mini { position: absolute; right: 20px; bottom: 23px; width: 167px; padding: 14px; background: rgba(255,255,255,.94); border-radius: 13px; box-shadow: 0 10px 25px rgba(9,65,68,.14); }.card-mini small { display:block; color:var(--muted); font:9px "DM Mono"; letter-spacing:.09em; }.card-mini strong { display:block; margin-top:5px; font-size:15px; }.card-mini i { display:block; width:55%; height:5px; margin-top:9px; background:var(--mint); border-radius:8px; } .booking-section, .tracking-section, .how-section, .customer-utility { padding: 84px 28px; } .home-actions { position:relative; z-index:2; max-width:1160px; padding:0 28px; margin:-26px auto 0; }.home-actions-inner { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }.primary-service-card { display:flex; align-items:center; gap:13px; min-height:101px; padding:18px; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 25px rgba(20,71,74,.08); transition:transform .2s,box-shadow .2s; background:#fff; border-style:solid; }.primary-service-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.water-action { border-color:#addce0; }.sewage-action { border-color:#c7dfd4; }.emergency-action { position:relative; border-color:#f2c3bc; background:linear-gradient(135deg,#fff7f6,#fff); box-shadow:0 12px 26px rgba(217,98,80,.18); overflow:hidden; }.emergency-action::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.38),transparent); opacity:.8; }.emergency-action::after { content:""; position:absolute; top:18px; left:18px; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.5); animation:pulse-em 1.8s infinite; }.service-action-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; color:var(--aqua); background:var(--aqua-light); border-radius:13px; font:29px/1 Georgia,serif; }.emergency-icon { position:relative; z-index:1; color:#fff; background:linear-gradient(135deg,#d96250,#c44a3a); font:800 18px/1 Manrope,sans-serif; box-shadow:0 8px 18px rgba(217,98,80,.2); }.sewage-action .service-action-icon { color:#317b63; background:#e2f3ea; }.primary-service-card span:not(.service-action-icon) { position:relative; z-index:1; display:flex; flex:1; flex-direction:column; }.primary-service-card b { font-size:14px; }.primary-service-card small { margin-top:2px; color:var(--muted); font-size:10px; font-weight:500; line-height:1.4; } .booking-section { background: var(--white); } .section-intro { max-width: 1240px; margin: 0 auto 31px; }.section-intro h2 { margin-bottom: 8px; font-size: clamp(29px,3.3vw,43px); line-height:1.1; letter-spacing:-2px; }.section-intro > p:not(.eyebrow) { max-width: 600px; color:var(--muted); } .booking-layout { display: grid; grid-template-columns: 1fr 340px; gap: 42px; max-width: 1010px; margin: auto; } .booking-form fieldset, .payment-options { min-width: 0; padding: 0 0 26px; margin: 0 0 24px; border: 0; border-bottom: 1px solid var(--line); } .booking-form legend, .payment-options legend { width: 100%; padding: 0; margin-bottom: 14px; font-size: 16px; font-weight: 800; } .service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .service-option { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 124px; padding: 15px; background: #fbfdfd; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: border .2s, background .2s, transform .2s; }.service-option:hover { transform: translateY(-2px); border-color:#91c5c9; }.service-option.selected { background:var(--aqua-light); border:2px solid var(--aqua); }.service-option input { position:absolute; opacity:0; }.service-option b { font-size:13px; }.service-option small { color:var(--muted); font-size:10px; line-height:1.35; }.service-icon { width:27px; height:27px; margin-bottom:4px; color:var(--aqua); font:25px/1 Georgia,serif; } .field-row { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }.field { display:flex; flex-direction:column; gap:6px; margin:0 0 15px; }.field label { font-size:12px; font-weight:800; }.field label span { color:var(--muted); font-weight:500; } input, select, textarea { width:100%; padding:12px; color:var(--ink); background:#fff; border:1px solid #bcd0d1; border-radius:9px; outline:0; } input:focus,select:focus,textarea:focus { border-color:var(--aqua); box-shadow:0 0 0 3px rgba(0,124,145,.14); } textarea { resize:vertical; }.field-help { color:var(--muted); font-size:10px; }.location-field { display:flex; }.location-field input { border-radius:9px 0 0 9px; }.location-button { width:47px; color:var(--aqua); background:var(--aqua-light); border:1px solid #bcd0d1; border-left:0; border-radius:0 9px 9px 0; font-size:20px; } .choice-pills { display:flex; flex-wrap:wrap; gap:8px; }.choice-pill { position:relative; display:inline-flex; padding:9px 12px; background:#f7fbfb; border:1px solid var(--line); border-radius:9px; cursor:pointer; font-size:11px; font-weight:800; }.choice-pill input,.capacity-option input { position:absolute; opacity:0; }.choice-pill.selected { color:var(--aqua-dark); background:var(--aqua-light); border-color:var(--aqua); }.compact-field { max-width:340px; margin:16px 0 0; }.capacity-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }.capacity-option { position:relative; display:flex; align-items:baseline; justify-content:center; gap:2px; min-height:58px; color:#446468; background:#f7fbfb; border:1px solid var(--line); border-radius:10px; cursor:pointer; }.capacity-option b { color:var(--ink); font-size:18px; }.capacity-option span { font-size:10px; font-weight:800; }.capacity-option.selected { background:var(--aqua-light); border:2px solid var(--aqua); }.capacity-option.selected b,.capacity-option.selected span { color:var(--aqua-dark); } .quote-panel { align-self:start; padding:23px; background:#f0f9f8; border:1px solid #d8ecea; border-radius:18px; }.quote-header { display:flex; gap:12px; align-items:center; padding-bottom:18px; border-bottom:1px solid #cee5e1; }.quote-header p { margin:0 0 1px; color:var(--muted); font-size:11px; }.quote-header h3 { margin:0; font-size:26px; letter-spacing:-1px; }.icon-circle { display:grid; place-items:center; width:39px; height:39px; color:#fff; background:var(--aqua); border-radius:50%; font-weight:800; }.estimate-list { padding:13px 0; margin:0; list-style:none; }.estimate-list li { display:flex; justify-content:space-between; gap:10px; padding:7px 0; font-size:11px; }.estimate-list span { color:var(--muted); }.estimate-list b { max-width:160px; text-align:right; }.quote-note { display:flex; gap:8px; padding:10px; color:#356c63; background:#dff2e9; border-radius:9px; font-size:10px; line-height:1.4; }.quote-note span { font-weight:800; }.availability { display:flex; gap:7px; align-items:center; margin:17px 0 1px; color:#426965; font-size:10px; font-weight:800; }.pulse { width:7px; height:7px; background:#39ae71; border-radius:50%; box-shadow:0 0 0 4px rgba(57,174,113,.14); } .tracking-section { background:var(--ink); }.tracking-section .section-intro { color:#fff; }.tracking-section .section-intro > p:not(.eyebrow) { color:#bbd4d2; }.tracking-card { max-width:1000px; margin:auto; background:#fff; border-radius:19px; overflow:hidden; box-shadow:0 20px 45px rgba(0,0,0,.17); }.empty-tracking { padding:60px 26px; text-align:center; }.empty-tracking h3 { margin-bottom:4px; }.empty-tracking p { margin:0; color:var(--muted); }.empty-icon { display:grid; place-items:center; width:45px; height:45px; margin:0 auto 13px; color:var(--aqua); background:var(--aqua-light); border-radius:50%; font-size:22px; }.active-tracking { padding:23px; }.tracking-top { display:flex; align-items:start; justify-content:space-between; gap:15px; }.tracking-top h3 { margin:8px 0 3px; font:12px "DM Mono",monospace; color:var(--muted); }.tracking-top p { margin:0; font-size:12px; }.status-pill { display:inline-block; padding:4px 9px; color:#216754; background:#dff2e9; border-radius:100px; font-size:10px; font-weight:800; text-transform:uppercase; }.map-placeholder { position:relative; height:190px; margin:22px 0; overflow:hidden; background:#e6f2ec; border-radius:12px; background-image:linear-gradient(25deg, transparent 47%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.85) 52%, transparent 53%),linear-gradient(-38deg, transparent 47%, rgba(255,255,255,.8) 48%, rgba(255,255,255,.8) 52%, transparent 53%),radial-gradient(#95d4bd 1px,transparent 1px); background-size:auto,auto,18px 18px; }.route-line { position:absolute; top:94px; left:18%; width:62%; border-top:4px dashed var(--aqua); transform:rotate(-11deg); }.map-pin,.vehicle-dot { position:absolute; display:grid; place-items:center; width:28px; height:28px; color:#fff; border:3px solid #fff; border-radius:50%; box-shadow:0 3px 8px rgba(0,0,0,.13); font-size:11px; font-weight:800; }.map-pin.start { top:105px; left:16%; background:#566d71; }.map-pin.finish { top:70px; right:15%; background:var(--coral); }.vehicle-dot { top:82px; left:49%; width:36px; height:36px; background:var(--aqua); }.vehicle-dot::after { content:"🚚"; font-size:16px; }.map-label { position:absolute; padding:2px 6px; color:var(--ink); background:rgba(255,255,255,.75); border-radius:4px; font-size:9px; }.start-label { top:136px; left:14%; }.finish-label { top:39px; right:13%; }.order-timeline { display:flex; padding:0; margin:5px 0 0; list-style:none; }.order-timeline li { position:relative; flex:1; padding:20px 7px 0 0; color:#839799; font-size:10px; }.order-timeline li::before { position:absolute; top:3px; left:0; width:11px; height:11px; background:#dbe7e7; border:2px solid #dbe7e7; border-radius:50%; content:""; }.order-timeline li:not(:last-child)::after { position:absolute; top:8px; right:0; left:11px; height:1px; background:#dbe7e7; content:""; }.order-timeline li.complete,.order-timeline li.current { color:var(--ink); font-weight:800; }.order-timeline li.complete::before { background:#42af75; border-color:#42af75; }.order-timeline li.current::before { background:#fff; border-color:var(--aqua); box-shadow:0 0 0 4px var(--aqua-light); } .how-section { background:var(--white); }.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1050px; padding:0; margin:0 auto; list-style:none; }.steps li { padding:5px; }.steps span { color:var(--aqua); font:12px "DM Mono"; }.steps h3 { margin:8px 0 4px; font-size:17px; }.steps p { margin:0; color:var(--muted); font-size:12px; } .site-footer { max-width:1240px; padding:35px 28px 28px; margin:auto; color:var(--muted); font-size:11px; } .footer-brand-wrap { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; } .footer-brand-wrap p { margin:0; color:var(--muted); } .footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr 1.3fr; gap:25px; } .footer-grid h3 { margin:0 0 10px; color:var(--ink); font-size:12px; letter-spacing:.08em; text-transform:uppercase; } .footer-grid ul { padding:0; margin:0; list-style:none; display:grid; gap:7px; } .footer-grid a { color:var(--muted); } .social-card { padding:18px 18px 12px; background:#edf6f5; border:1px solid var(--line); border-radius:16px; } .social-card h3 { margin:0 0 16px; color:var(--ink); font-size:20px; letter-spacing:-.7px; font-weight:800; } .social-links { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; } .social-links a { display:inline-flex; align-items:center; justify-content:center; min-width:92px; min-height:38px; padding:8px 14px; background:#fff; border:1px solid #cfe2e1; border-radius:999px; color:var(--ink); font-size:11px; font-weight:700; text-decoration:none; } .qr-block { display:flex; align-items:center; gap:12px; padding-top:12px; border-top:1px solid rgba(16,52,58,.12); } .mini-qr { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; width:58px; height:58px; padding:7px; background:#fff; border:1px solid var(--line); border-radius:12px; } .mini-qr span { display:block; border-radius:3px; background:#0f2f36; } .mini-qr span:nth-child(odd) { background:#0d7d8e; } .mini-qr span:nth-child(3n) { background:#2ababa; } .qr-block strong { display:block; margin-bottom:2px; color:var(--ink); font-size:14px; } .qr-block small { color:var(--muted); } .footer-bottom { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); } .footer-bottom p { margin:0; } .site-footer .brand { font-size:17px; } .site-footer .brand-mark{ width:24px; height:24px; font-size:22px; } .customer-utility { background:#eef7f6; }.utility-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:1120px; margin:auto; }.utility-grid a { display:flex; gap:10px; align-items:center; min-height:81px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:12px; text-decoration:none; }.utility-grid a:hover { border-color:#98c9cc; text-decoration:none; }.utility-grid a > span { display:grid; place-items:center; flex:0 0 29px; width:29px; height:29px; color:var(--aqua); background:var(--aqua-light); border-radius:8px; font-weight:800; }.utility-grid div { display:flex; flex:1; flex-direction:column; }.utility-grid b { font-size:11px; }.utility-grid small { color:var(--muted); font-size:9px; line-height:1.3; }.utility-grid i { color:var(--aqua); font-style:normal; }.bottom-nav { display:none; } .modal { position:fixed; z-index:90; inset:0; display:grid; place-items:center; padding:18px; }.modal[hidden] { display:none; }.modal-backdrop { position:absolute; inset:0; background:rgba(10,42,47,.6); backdrop-filter:blur(3px); }.modal-card { position:relative; z-index:1; width:min(100%, 430px); max-height:calc(100vh - 36px); padding:30px; overflow:auto; background:#fff; border-radius:19px; box-shadow:var(--shadow); }.modal-card h2 { margin-bottom:8px; font-size:29px; letter-spacing:-1.5px; }.modal-copy { color:var(--muted); font-size:12px; }.close-button { position:absolute; top:13px; right:14px; width:30px; height:30px; color:var(--muted); background:#f0f6f6; border:0; border-radius:50%; font-size:21px; line-height:1; }.google-button { display:flex; gap:10px; align-items:center; justify-content:center; width:100%; padding:12px; color:var(--ink); background:#fff; border:1px solid #cbdadb; border-radius:9px; font-weight:800; }.google-button span { display:grid; place-items:center; width:21px; height:21px; color:#fff; background:#4285f4; border-radius:50%; font-size:12px; }.or-divider { display:flex; align-items:center; gap:10px; margin:17px 0; color:var(--muted); font-size:11px; }.or-divider::before,.or-divider::after { flex:1; height:1px; background:var(--line); content:""; }.phone-input { display:flex; }.phone-input span { padding:11px; background:#f1f6f6; border:1px solid #bcd0d1; border-right:0; border-radius:9px 0 0 9px; font-weight:800; }.phone-input input { border-radius:0 9px 9px 0; }.modal form label { display:block; margin-bottom:6px; font-size:12px; font-weight:800; }.modal form .button { margin-top:13px; }.terms-note { margin:16px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }.live-hint { display:block; margin-top:6px; color:#896721; font-size:10px; }.checkout-summary { padding:13px; margin:17px 0; background:#f1f8f7; border-radius:10px; font-size:12px; }.checkout-summary div { display:flex; justify-content:space-between; gap:15px; padding:5px 0; }.checkout-summary b { text-align:right; }.payment-options { margin:0 0 16px; border-bottom:0; }.payment-options label { display:flex; gap:10px; align-items:center; padding:11px; margin-bottom:8px; background:#fbfdfd; border:1px solid var(--line); border-radius:8px; font-size:12px; }.payment-options input { width:auto; }.payment-options b { padding:3px 6px; margin-left:auto; color:#31785c; background:#def2e8; border-radius:4px; font-size:9px; }.otp-card { text-align:center; }.delivery-code { display:block; padding:14px; margin:18px 0; color:var(--aqua-dark); background:var(--aqua-light); border-radius:10px; font:700 30px/1 "DM Mono",monospace; letter-spacing:9px; } /* Vendor and Admin */ .portal-shell { min-height:100vh; background:#f2f7f7; }.portal-header { display:flex; align-items:center; justify-content:space-between; height:68px; padding:0 24px; background:#fff; border-bottom:1px solid var(--line); }.portal-title { display:flex; gap:11px; align-items:center; }.portal-title p { margin:0; color:var(--muted); font-size:11px; }.portal-title h1 { margin:0; font-size:17px; letter-spacing:-.5px; }.portal-main { max-width:1180px; padding:32px 24px 56px; margin:auto; }.portal-hero { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:26px; }.portal-hero h2 { margin:0; font-size:32px; line-height:1.1; letter-spacing:-1.7px; }.portal-hero p { margin:7px 0 0; color:var(--muted); }.vendor-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:22px; }.stat-card { padding:17px; background:#fff; border:1px solid var(--line); border-radius:13px; }.stat-card small { display:block; color:var(--muted); font-size:10px; }.stat-card strong { display:block; margin-top:3px; font-size:21px; letter-spacing:-1px; }.jobs-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:20px; }.job-card,.information-card,.data-card { padding:21px; background:#fff; border:1px solid var(--line); border-radius:14px; }.job-card-head { display:flex; justify-content:space-between; gap:15px; align-items:start; }.job-card h3,.information-card h3,.data-card h3 { margin:0; font-size:17px; }.job-ref { margin:5px 0 0; color:var(--muted); font:10px "DM Mono"; }.job-address { padding:13px 0; margin:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.job-address p { margin:4px 0 0; color:var(--muted); font-size:12px; }.job-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.job-meta div { padding:8px; background:#f5fafa; border-radius:8px; }.job-meta small { display:block; color:var(--muted); font-size:9px; }.job-meta b { display:block; margin-top:2px; font-size:11px; }.job-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:17px; }.button-danger { color:#b44131; background:#fff4f2; border-color:#f3cbc3; }.button-success { color:#fff; background:#31866c; }.info-list { padding:0; margin:12px 0 0; list-style:none; }.info-list li { display:flex; justify-content:space-between; gap:15px; padding:9px 0; border-bottom:1px solid var(--line); font-size:11px; }.info-list li span { color:var(--muted); }.delivery-form { margin-top:17px; }.delivery-form label { display:block; margin-bottom:6px; font-size:11px; font-weight:800; }.delivery-form div { display:flex; gap:8px; }.delivery-form input { max-width:140px; }.notice { padding:12px; margin-top:15px; color:#496565; background:#eef8f5; border-radius:8px; font-size:10px; }.empty-jobs { padding:48px 20px; color:var(--muted); text-align:center; } .admin-layout { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }.admin-sidebar { padding:20px 13px; color:#d5e8e8; background:var(--ink); }.admin-sidebar .brand { padding:0 10px 22px; color:#fff; }.admin-sidebar .brand .brand-mark { background:#5bb7bd; }.sidebar-nav { display:grid; gap:4px; }.sidebar-nav a { padding:10px; color:#aaccce; border-radius:7px; font-size:12px; text-decoration:none; }.sidebar-nav a.active,.sidebar-nav a:hover { color:#fff; background:rgba(255,255,255,.11); }.sidebar-nav span { display:inline-block; width:21px; }.admin-content { min-width:0; }.admin-topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; background:#fff; border-bottom:1px solid var(--line); }.admin-topbar p { margin:0; color:var(--muted); font-size:11px; }.admin-topbar strong { display:block; font-size:13px; }.admin-main { padding:30px 28px; }.admin-heading { display:flex; justify-content:space-between; gap:15px; align-items:end; margin-bottom:24px; }.admin-heading h1 { margin:0; font-size:30px; letter-spacing:-1.7px; }.admin-heading p { margin:4px 0 0; color:var(--muted); font-size:12px; }.admin-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }.kpi { padding:17px; background:#fff; border:1px solid var(--line); border-radius:13px; }.kpi small { color:var(--muted); font-size:10px; }.kpi strong { display:block; margin:5px 0 3px; font-size:24px; letter-spacing:-1.4px; }.kpi span { color:#477973; font-size:10px; }.kpi .negative { color:#ba5c50; }.dashboard-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:20px; margin-bottom:20px; }.chart-wrap { height:195px; display:flex; align-items:end; gap:15px; padding:20px 4px 0; border-bottom:1px solid var(--line); }.chart-bar { display:flex; flex:1; flex-direction:column; justify-content:end; gap:5px; height:100%; color:var(--muted); text-align:center; font-size:9px; }.chart-bar i { display:block; width:100%; min-height:6px; background:linear-gradient(#54b3b7,#007c91); border-radius:5px 5px 0 0; }.target-line { display:flex; justify-content:space-between; padding-top:13px; color:var(--muted); font-size:10px; }.target-line b { color:var(--ink); }.operations-list { padding:0; margin:12px 0 0; list-style:none; }.operations-list li { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:11px; }.operations-list li:last-child { border:0; }.operations-list span { display:grid; place-items:center; flex:0 0 22px; height:22px; color:var(--aqua); background:var(--aqua-light); border-radius:50%; font-size:11px; }.operations-list p { margin:0; color:var(--muted); font-size:10px; }.table-tools { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:0 0 13px; }.table-tools input { width:230px; padding:8px 10px; font-size:11px; }.data-card { overflow:hidden; }.table-scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th { padding:10px; color:var(--muted); border-bottom:1px solid var(--line); font-size:9px; letter-spacing:.06em; text-transform:uppercase; } td { padding:12px 10px; border-bottom:1px solid #edf2f2; font-size:11px; white-space:nowrap; } tr:last-child td { border-bottom:0; }.table-customer { display:block; color:var(--muted); font-size:9px; }.tag { display:inline-block; padding:3px 7px; border-radius:20px; font-size:9px; font-weight:800; }.tag.assigned,.tag.en-route { color:#146f7c; background:#dff4f4; }.tag.accepted,.tag.delivered { color:#28735a; background:#dff2e9; }.tag.pending { color:#91691e; background:#fff1cc; }.tag.cancelled { color:#a3483d; background:#fff0ed; }.order-action { padding:4px 7px; color:var(--aqua); background:var(--aqua-light); border:0; border-radius:5px; font-size:10px; font-weight:800; }.admin-map { position:relative; height:153px; margin-bottom:16px; overflow:hidden; background:#e9f4ee; border-radius:10px; background-image:radial-gradient(#a9d7c5 1px,transparent 1px); background-size:15px 15px; }.admin-map::after { position:absolute; top:25px; left:15%; width:70%; height:95px; border:2px solid rgba(0,124,145,.4); border-width:0 0 2px 2px; border-radius:50%; transform:rotate(-8deg); content:""; }.map-truck { position:absolute; z-index:1; display:grid; place-items:center; width:30px; height:30px; background:var(--aqua); border:3px solid #fff; border-radius:50%; box-shadow:0 3px 7px #789; font-size:13px; }.map-truck.one{top:36px;left:25%}.map-truck.two{top:79px;left:55%}.map-truck.three{top:28px;right:18%} @media (max-width: 760px) { body[data-page="customer"] { padding-bottom:73px; }.site-header { height:67px; padding:0 17px; }.main-nav { display:none; }.hero { grid-template-columns:1fr; gap:28px; min-height:0; padding:29px 20px 46px; }.hero-visual { display:none; }.hero h1 { max-width:360px; font-size:45px; }.location-chip { margin-bottom:18px; }.home-actions { padding:0 14px; margin:-20px auto 0; }.home-actions-inner { grid-template-columns:1fr 1fr; gap:9px; }.primary-service-card { min-height:120px; align-items:flex-start; flex-direction:column; gap:7px; padding:14px; }.primary-service-card > i { position:absolute; right:14px; bottom:10px; }.primary-service-card { position:relative; }.repeat-card { grid-column:1 / -1; min-height:72px; padding:13px; }.booking-section,.tracking-section,.how-section,.customer-utility { padding:55px 20px; }.booking-layout,.jobs-grid,.dashboard-grid { grid-template-columns:1fr; gap:20px; }.service-grid { grid-template-columns:1fr 1fr; }.service-option { min-height:102px; }.field-row { grid-template-columns:1fr; gap:0; }.capacity-grid { gap:5px; }.capacity-option { min-height:53px; }.capacity-option b { font-size:15px; }.quote-panel { order:-1; }.steps { grid-template-columns:1fr 1fr; gap:25px 12px; }.utility-grid { grid-template-columns:1fr 1fr; gap:8px; }.utility-grid a { min-height:76px; }.site-footer { align-items:flex-start; flex-direction:column; padding:29px 20px; }.tracking-top { flex-direction:column; }.active-tracking { padding:17px; }.order-timeline { overflow-x:auto; }.order-timeline li { min-width:120px; }.bottom-nav { position:fixed; z-index:70; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(5,1fr); padding:6px 3px calc(6px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--line); box-shadow:0 -5px 18px rgba(16,52,58,.08); }.bottom-nav a,.bottom-nav button { display:flex; flex-direction:column; gap:1px; align-items:center; justify-content:center; min-height:49px; padding:3px; color:#748b8d; background:transparent; border:0; font-size:9px; text-decoration:none; }.bottom-nav a span,.bottom-nav button span { font-size:18px; line-height:1; }.bottom-nav a.active,.bottom-nav a:hover,.bottom-nav button:hover { color:var(--aqua); }.portal-header { padding:0 16px; }.portal-main { padding:24px 16px; }.portal-hero { align-items:start; flex-direction:column; }.vendor-stats { grid-template-columns:1fr 1fr; }.job-meta { grid-template-columns:1fr 1fr; }.admin-layout { grid-template-columns:1fr; }.admin-sidebar { display:none; }.admin-topbar { padding:13px 16px; }.admin-main { padding:24px 16px; }.admin-kpis { grid-template-columns:1fr 1fr; }.admin-heading { align-items:start; flex-direction:column; }.table-tools { align-items:stretch; flex-direction:column; }.table-tools input { width:100%; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } } .auth-page-link { display:flex; justify-content:space-between; gap:12px; padding:11px 12px; margin:15px 0 4px; color:var(--aqua-dark); background:var(--aqua-light); border-radius:9px; font-size:11px; font-weight:800; text-decoration:none; }.auth-page-link:hover { text-decoration:none; background:#d4eeee; } .auth-page { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; background:#fff; }.auth-story { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; padding:34px clamp(25px,7vw,100px); overflow:hidden; color:#fff; background:linear-gradient(145deg,#0b424b,#087c87 72%,#53b6a5); }.auth-brand { position:relative; z-index:2; color:#fff; }.auth-brand span:last-child { color:#b6eee1; }.auth-story-copy { position:relative; z-index:2; max-width:520px; padding:80px 0; }.auth-story-copy h1 { margin-bottom:18px; font-size:clamp(40px,5vw,66px); }.auth-story-copy h1 em { color:#b7eee1; }.auth-story-copy > p:not(.eyebrow) { max-width:430px; color:#c7e4e3; font-size:16px; }.auth-proof { display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:center; max-width:260px; padding-top:26px; margin-top:30px; border-top:1px solid rgba(255,255,255,.24); font-size:11px; }.auth-proof span { color:#f8ca63; font:11px "DM Mono",monospace; }.auth-proof b { font-size:12px; }.auth-sun { position:absolute; top:17%; right:10%; width:110px; height:110px; background:#f8ca63; border-radius:50%; opacity:.9; }.auth-wave { position:absolute; right:-15%; bottom:-17%; width:120%; height:44%; background:rgba(184,232,210,.22); border-radius:50% 50% 0 0; transform:rotate(-9deg); }.auth-panel { display:grid; grid-template-rows:auto 1fr; padding:34px clamp(25px,7vw,100px); }.back-link { color:var(--muted); font-size:11px; font-weight:800; }.auth-panel-inner { align-self:center; width:min(100%,410px); padding:38px 0; }.auth-panel-inner h2 { margin-bottom:9px; font-size:34px; line-height:1.1; letter-spacing:-1.7px; }.auth-form .field { margin-bottom:14px; }.auth-form .button { margin-top:6px; }.directory-note { color:var(--muted); font-size:10px; }.customer-directory { margin-top:20px; overflow:hidden; } @media (max-width:760px) { .auth-page { display:block; }.auth-story { min-height:390px; padding:25px 20px; }.auth-story-copy { padding:48px 0 20px; }.auth-story-copy h1 { font-size:42px; }.auth-proof { margin-top:20px; padding-top:16px; }.auth-sun { top:22%; right:-25px; width:80px; height:80px; }.auth-panel { padding:23px 20px 45px; }.auth-panel-inner { padding:45px 0 10px; }.auth-panel-inner h2 { font-size:29px; } } .admin-futuristic { --admin-glow: rgba(66, 207, 194, .2); background:#eef6f6; }.admin-futuristic .admin-sidebar { background:linear-gradient(180deg,#092f36,#103f45); }.admin-futuristic .admin-topbar { box-shadow:0 8px 25px rgba(16,52,58,.05); }.admin-futuristic .admin-main { max-width:1600px; margin:auto; }.admin-futuristic .admin-heading { padding:13px 0 8px; }.admin-futuristic .admin-heading h1 { font-size:38px; }.heading-actions,.topbar-actions { display:flex; gap:9px; align-items:center; }.admin-clock { color:var(--muted); font:10px "DM Mono",monospace; }.live-indicator { display:inline-block; width:7px; height:7px; margin-right:4px; background:#39b87b; border-radius:50%; box-shadow:0 0 0 4px rgba(57,184,123,.15); }.admin-futuristic .kpi { position:relative; overflow:hidden; min-height:132px; border-color:#d5e8e6; box-shadow:0 6px 20px rgba(16,52,58,.04); }.admin-futuristic .kpi-highlight { color:#fff; background:linear-gradient(135deg,#075b68,#068e95); border:0; }.admin-futuristic .kpi-highlight small,.admin-futuristic .kpi-highlight span { color:#b9e8e2; }.kpi-spark { position:absolute; right:17px; bottom:19px; width:90px; height:35px; border-bottom:2px solid #a4eee0; border-radius:50%; transform:rotate(-8deg); opacity:.8; }.admin-command-grid { grid-template-columns:1.28fr .72fr; align-items:stretch; }.card-heading { display:flex; align-items:start; justify-content:space-between; gap:15px; }.card-heading h3 { margin-top:0; }.segmented-control { display:flex; gap:3px; padding:3px; background:#edf5f4; border-radius:8px; }.segmented-control button { padding:6px 9px; color:var(--muted); background:transparent; border:0; border-radius:6px; font-size:10px; font-weight:800; }.segmented-control button.active,.segmented-control button:hover { color:var(--aqua-dark); background:#fff; box-shadow:0 2px 5px rgba(16,52,58,.1); }.revenue-summary { display:flex; gap:13px; align-items:baseline; padding:10px 0 4px; }.revenue-summary strong { font-size:26px; letter-spacing:-1px; }.revenue-summary span { color:var(--muted); font-size:10px; }.revenue-summary b { margin-left:auto; color:#278365; font-size:10px; }.futuristic-chart { height:210px; gap:10px; padding-top:18px; border-bottom:0; }.futuristic-chart .chart-bar { position:relative; gap:4px; color:var(--muted); }.futuristic-chart .chart-bar i { width:100%; min-height:12px; background:linear-gradient(180deg,#25c9b3,#087f8e); border-radius:5px 5px 2px 2px; box-shadow:0 0 16px var(--admin-glow); transition:height .35s ease; }.futuristic-chart .chart-bar b { color:var(--muted); font-size:8px; font-weight:500; }.chart-axis { display:flex; gap:10px; color:#779093; font:9px "DM Mono",monospace; }.chart-axis span { flex:1; text-align:center; }.live-badge { padding:5px 8px; color:#247659; background:#e2f6eb; border-radius:20px; font:800 9px "DM Mono",monospace; text-transform:uppercase; }.radar-map { position:relative; height:210px; margin:16px 0; overflow:hidden; background:radial-gradient(circle at center,rgba(61,196,177,.18),transparent 57%),#e2f3ef; border:1px solid #c5e3df; border-radius:13px; }.radar-ring { position:absolute; top:50%; left:50%; border:1px solid rgba(0,124,145,.2); border-radius:50%; transform:translate(-50%,-50%); }.ring-one { width:90px; height:90px; }.ring-two { width:165px; height:165px; }.radar-sweep { position:absolute; top:50%; left:50%; width:50%; height:1px; background:linear-gradient(90deg,#089294,transparent); transform-origin:left; animation:radar-sweep 4s linear infinite; }.radar-route { position:absolute; height:2px; border-top:2px dashed rgba(0,124,145,.46); transform-origin:left; }.route-a { top:47%; left:18%; width:66%; transform:rotate(-14deg); }.route-b { top:54%; left:29%; width:50%; transform:rotate(23deg); }.radar-truck { position:absolute; display:grid; place-items:center; width:25px; height:25px; color:#fff; background:var(--aqua-dark); border:3px solid #fff; border-radius:50%; box-shadow:0 3px 10px rgba(0,70,80,.3); font-size:10px; }.truck-a { top:29%; left:22%; }.truck-b { top:61%; right:22%; background:#d96250; }.truck-c { top:18%; right:31%; background:#e5a932; }.radar-hub { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:34px; height:34px; color:#fff; background:#087f8e; border:4px solid rgba(255,255,255,.8); border-radius:50%; font:800 9px "DM Mono",monospace; transform:translate(-50%,-50%); }.fleet-activity-list { max-height:128px; overflow:auto; }.vendor-onboarding { grid-column:span 2; }.onboarding-form { margin-top:16px; }.onboarding-form .field-row { gap:10px; }.onboarding-form .field { margin-bottom:10px; }.onboarding-form .field label { font-size:10px; }.onboarding-count { color:var(--muted); font:10px "DM Mono",monospace; }.customer-directory { margin-bottom:28px; } @keyframes radar-sweep { to { transform:rotate(360deg); } } @media (max-width:760px) { .admin-futuristic .admin-heading h1 { font-size:30px; }.heading-actions,.topbar-actions { flex-wrap:wrap; }.admin-clock { display:none; }.admin-command-grid { grid-template-columns:1fr; }.vendor-onboarding { grid-column:auto; }.revenue-summary { flex-wrap:wrap; }.revenue-summary b { margin-left:0; width:100%; }.segmented-control button { padding:6px; } } .admin-locked > .admin-layout { visibility:hidden; }.admin-login-screen { position:fixed; z-index:150; inset:0; display:grid; place-items:center; overflow:hidden; color:#fff; background:radial-gradient(circle at 78% 25%,rgba(54,209,190,.18),transparent 23%),linear-gradient(135deg,#061f28,#0b4b55 58%,#087c87); }.admin-login-screen[hidden] { display:none; }.admin-login-panel { position:relative; z-index:3; display:flex; flex-direction:column; width:min(92%,470px); min-height:650px; padding:38px; background:rgba(7,42,49,.76); border:1px solid rgba(181,239,226,.25); border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.28); backdrop-filter:blur(16px); }.admin-login-panel .brand { color:#fff; }.admin-login-panel .brand span:last-child { color:#a8eadc; }.admin-login-copy { margin:auto 0 25px; }.admin-login-copy h1 { margin-bottom:15px; color:#fff; font-size:clamp(38px,5vw,56px); letter-spacing:-2.5px; }.admin-login-copy h1 em { color:#a8eadc; }.admin-login-copy > p:not(.eyebrow) { max-width:390px; color:#b7d4d5; font-size:14px; }.admin-login-status { display:inline-flex; align-items:center; padding:9px 12px; margin-top:16px; color:#b8eadd; background:rgba(255,255,255,.07); border-radius:8px; font:10px "DM Mono",monospace; }.admin-login-form { display:grid; gap:8px; }.admin-login-form label { color:#d9eeee; font-size:11px; font-weight:800; }.admin-login-form input { color:#fff; background:rgba(255,255,255,.09); border-color:rgba(181,239,226,.28); }.admin-login-form input::placeholder { color:#86afb1; }.admin-login-form .button { margin-top:9px; }.admin-login-form small { color:#86afb1; font-size:9px; text-align:center; }.admin-login-back { align-self:flex-start; margin-top:25px; color:#a8d5d2; font-size:11px; font-weight:800; }.admin-login-orbit { position:absolute; z-index:1; border:1px solid rgba(173,238,222,.16); border-radius:50%; }.admin-login-orbit.orbit-a { width:720px; height:720px; top:-290px; right:-250px; }.admin-login-orbit.orbit-b { width:530px; height:530px; bottom:-300px; left:-220px; }.admin-detail-button { margin-top:20px; font-size:10px; }.table-actions { display:flex; gap:9px; align-items:center; }.table-actions .button { padding:8px 11px; font-size:10px; }.admin-directory-modal { width:min(100%,780px); }.admin-directory-modal .table-scroll { margin-top:20px; }.admin-directory-modal table { min-width:640px; } @media (max-width:760px) { .admin-login-panel { min-height:100vh; width:100%; padding:25px 20px; border:0; border-radius:0; }.admin-login-copy { margin:90px 0 25px; }.admin-login-copy h1 { font-size:42px; }.table-actions { align-items:stretch; flex-direction:column; }.table-actions .button { width:100%; } } .admin-futuristic { --line:#e8edf3; --paper:#f5f8fb; --ink:#17202d; --muted:#7b8797; background:#f5f8fb; color:#17202d; }.admin-futuristic .admin-sidebar { background:#fff; border-right:1px solid #e7ecf2; color:#667284; box-shadow:4px 0 18px rgba(44,62,80,.03); }.admin-futuristic .admin-sidebar .brand { color:#1d2734; }.admin-futuristic .admin-sidebar .brand .brand-mark { color:#fff; background:#27a7a9; }.admin-futuristic .sidebar-caption { color:#99a5b3; }.admin-futuristic .sidebar-nav .nav-label { color:#a3acb8; }.admin-futuristic .sidebar-nav a { color:#697687; }.admin-futuristic .sidebar-nav a.active,.admin-futuristic .sidebar-nav a:hover { color:#138b90; background:#eef8f8; }.admin-futuristic .sidebar-nav a b { color:#168c91; background:#dcf4f2; }.admin-futuristic .admin-content { background:#f7f9fc; }.admin-futuristic .admin-topbar { height:74px; padding:0 32px; background:#fff; border-bottom:1px solid #e7ecf2; box-shadow:none; }.topbar-brandline { display:flex; gap:10px; align-items:center; min-width:205px; }.topbar-brandline strong { font-size:16px; letter-spacing:-.4px; }.city-chip { padding:4px 8px; color:#168b91; background:#e9f8f7; border-radius:6px; font-size:9px; font-weight:800; }.admin-search { display:flex; gap:8px; align-items:center; width:min(360px,32vw); padding:9px 13px; color:#a6b0bd; background:#f7f9fb; border:1px solid #edf0f4; border-radius:9px; }.admin-search input { padding:0; color:var(--ink); background:transparent; border:0; box-shadow:none; font-size:11px; }.admin-search input:focus { box-shadow:none; }.icon-button { position:relative; width:30px; height:30px; color:#768394; background:#f8fafb; border:1px solid #edf0f4; border-radius:50%; font-size:14px; }.icon-button i { position:absolute; top:-4px; right:-3px; display:grid; place-items:center; width:13px; height:13px; color:#fff; background:#e57f6f; border-radius:50%; font:8px Manrope,sans-serif; font-style:normal; }.admin-avatar { display:grid; place-items:center; width:30px; height:30px; color:#fff; background:#1a828d; border-radius:50%; font-size:11px; font-weight:800; }.admin-futuristic .admin-main { max-width:none; padding:34px 34px 60px; }.admin-futuristic .admin-heading { padding:0 0 6px; }.admin-futuristic .admin-heading h1 { color:#1b2634; font-size:30px; letter-spacing:-1.5px; }.admin-futuristic .admin-heading p { color:#8390a0; }.admin-futuristic .eyebrow { color:#159398; }.admin-futuristic .kpi,.admin-futuristic .data-card { background:#fff; border:1px solid #e8edf3; border-radius:10px; box-shadow:0 4px 16px rgba(46,68,90,.035); }.admin-futuristic .kpi { min-height:118px; padding:17px 18px; }.admin-futuristic .kpi strong { color:#1c2836; }.admin-futuristic .kpi-highlight { color:#fff; background:linear-gradient(135deg,#11969a,#36b7ae); border:0; }.admin-futuristic .kpi-highlight strong { color:#fff; }.admin-futuristic .kpi-highlight small,.admin-futuristic .kpi-highlight span { color:#d3f5ef; }.admin-futuristic .data-card { padding:20px; }.admin-futuristic .revenue-card,.admin-futuristic .fleet-card { min-height:370px; }.admin-futuristic .futuristic-chart { height:220px; background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,#edf1f4 44px); border-bottom:1px solid #e8edf3; }.admin-futuristic .futuristic-chart .chart-bar i { background:linear-gradient(180deg,#38b9b0,#7ccfca); box-shadow:none; border-radius:3px 3px 0 0; }.admin-futuristic .radar-map { height:220px; background-color:#f0f7f7; background-image:linear-gradient(30deg,transparent 48%,rgba(102,190,190,.18) 49%,transparent 51%),linear-gradient(-25deg,transparent 48%,rgba(102,190,190,.14) 49%,transparent 51%),radial-gradient(#b7dddd 1px,transparent 1px); background-size:auto,auto,18px 18px; border:1px solid #dbeceb; }.admin-futuristic .admin-intelligence-grid,.admin-futuristic .admin-detail-grid { gap:16px; }.admin-futuristic .table-tools { padding-bottom:5px; }.admin-futuristic table th { color:#99a4b1; font:9px "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; }.admin-futuristic table td { color:#526174; border-top-color:#eef1f4; font-size:11px; }.admin-futuristic table td b { color:#1f2d3d; }.admin-futuristic .tag { border-radius:5px; }.admin-futuristic .quick-actions { background:#fff; }.admin-futuristic .quick-action-grid button { background:#fbfcfd; border-color:#edf0f3; }.admin-futuristic .quick-action-grid button:hover { background:#eef9f8; }.admin-futuristic .admin-login-screen { background:linear-gradient(135deg,#edfafa,#f7fbfc); }.admin-futuristic .admin-login-panel { color:#17202d; background:#fff; border-color:#e3edf0; box-shadow:0 24px 70px rgba(48,93,104,.12); }.admin-futuristic .admin-login-panel .brand { color:#17202d; }.admin-futuristic .admin-login-copy h1 { color:#17202d; }.admin-futuristic .admin-login-copy > p:not(.eyebrow) { color:#718091; }.admin-futuristic .admin-login-form label { color:#526174; }.admin-futuristic .admin-login-form input { color:#17202d; background:#f8fbfc; border-color:#dce8ea; }.admin-futuristic .admin-login-form input::placeholder { color:#a5b0ba; }.admin-futuristic .admin-login-status { color:#187c7e; background:#edf9f7; }.admin-futuristic .admin-login-back { color:#168b91; } @media (max-width:900px) { .admin-futuristic .admin-topbar { padding:0 18px; }.admin-search { width:30vw; }.topbar-brandline { min-width:0; }.city-chip,.admin-clock { display:none; } } @media (max-width:760px) { .admin-futuristic .admin-topbar { height:auto; min-height:68px; padding:12px 16px; flex-wrap:wrap; gap:10px; }.admin-search { order:3; width:100%; }.admin-futuristic .admin-main { padding:24px 16px 50px; } } .sidebar-caption { padding:0 10px 20px; margin:0; color:#6e9da0; font:8px "DM Mono",monospace; letter-spacing:.08em; }.sidebar-nav .nav-label { padding:15px 10px 4px; color:#5f8e91; font:9px "DM Mono",monospace; letter-spacing:.12em; }.sidebar-nav a { display:flex; align-items:center; gap:5px; }.sidebar-nav a b { margin-left:auto; padding:2px 5px; color:#b7eee1; background:rgba(88,211,190,.12); border-radius:5px; font-size:9px; }.date-filter { min-height:40px; padding:0 10px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:9px; font-size:11px; font-weight:800; }.admin-kpis-secondary { margin-top:-5px; }.admin-kpis-secondary .kpi { min-height:112px; }.admin-kpis-secondary .kpi strong { font-size:22px; }.admin-kpis-secondary .kpi span { display:block; color:var(--muted); }.admin-kpis-secondary .kpi span b { color:var(--ink); }.admin-intelligence-grid { grid-template-columns:1fr 1fr; margin-bottom:20px; }.ai-pulse { padding:5px 8px; color:#057d83; background:#e1f6f2; border-radius:8px; font:800 9px "DM Mono",monospace; }.insight-list,.support-list { display:grid; gap:13px; padding:0; margin:18px 0 0; list-style:none; }.insight-list li,.support-list li { display:flex; gap:11px; align-items:start; }.insight-list li > span { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; color:#057d83; background:#e2f5f1; border-radius:7px; font-weight:800; }.insight-list b,.support-list b { display:block; font-size:11px; }.insight-list p,.support-list p { margin:2px 0 0; color:var(--muted); font-size:10px; }.finance-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:20px; }.finance-grid div { padding:11px; background:#f4fafa; border-radius:9px; }.finance-grid small { display:block; color:var(--muted); font-size:9px; }.finance-grid strong { display:block; margin-top:4px; font-size:17px; }.finance-bar { display:flex; height:9px; margin-top:18px; overflow:hidden; background:#e5efee; border-radius:10px; }.finance-bar span { width:68%; background:#55bfaa; }.finance-bar i { width:22%; background:#f2bb55; }.admin-detail-grid { grid-template-columns:1.35fr .65fr; align-items:start; }.fleet-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:15px 0; }.fleet-summary span { padding:9px; color:var(--muted); background:#f4fafa; border-radius:8px; font-size:9px; }.fleet-summary b { display:block; color:var(--ink); font-size:16px; }.priority { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; font-size:10px; font-weight:800; }.priority.critical { color:#a4463d; background:#fae1dd; }.priority.high { color:#9c6a12; background:#fff0c9; }.priority.medium { color:#277569; background:#ddf2e9; }.support-list { margin-bottom:20px; }.quick-actions { margin:20px 0 30px; }.quick-action-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-top:15px; }.quick-action-grid button { display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; min-height:70px; color:var(--aqua-dark); background:#f5fbfa; border:1px solid var(--line); border-radius:10px; font-size:21px; transition:transform .2s, border .2s, background .2s; }.quick-action-grid button:hover { transform:translateY(-2px); border-color:#8acbc4; background:#e9f8f5; }.quick-action-grid span { color:var(--ink); font-size:10px; font-weight:800; } @media (max-width:760px) { .admin-intelligence-grid,.admin-detail-grid { grid-template-columns:1fr; }.fleet-summary { grid-template-columns:1fr 1fr; }.quick-action-grid { grid-template-columns:repeat(3,1fr); }.date-filter { width:100%; }.admin-heading .heading-actions { width:100%; } } .card-subtitle { margin:4px 0 0; color:var(--muted); font-size:10px; }.graph-legend { display:flex; flex-wrap:wrap; gap:15px; padding:15px 0 2px; color:var(--muted); font-size:10px; }.graph-legend span { display:inline-flex; gap:5px; align-items:center; }.graph-legend i { display:inline-block; width:9px; height:9px; border-radius:50%; }.legend-water { background:#159ba0; }.legend-sewage { background:#e18a45; }.legend-up { background:#35a879; }.legend-down { background:#dc6f67; }.order-graph { height:260px; margin-top:4px; }.order-graph svg { display:block; width:100%; height:100%; overflow:visible; }.order-line { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.water-line { stroke:#159ba0; }.sewage-line { stroke:#e18a45; }.graph-grid-line { stroke:#e8eef1; stroke-width:1; }.graph-y-label { fill:#9aa6b3; font:10px "DM Mono",monospace; }.graph-axis { display:flex; gap:4px; padding:5px 0 0 34px; color:#7b8797; font:9px "DM Mono",monospace; }.graph-axis span { flex:1; text-align:center; }.form-section-label { padding-top:10px; margin:0 0 9px; color:#83909d; font:9px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.onboarding-form input,.onboarding-form select { background:#fbfcfd; }.pricing-rules { display:grid; gap:7px; margin-top:18px; }.pricing-rule { display:flex; justify-content:space-between; gap:12px; padding:10px; color:var(--muted); background:#f4fafa; border-radius:8px; font-size:10px; }.pricing-rule b { color:var(--ink); }.empty-pricing { color:var(--muted); font-size:11px; }.admin-futuristic .revenue-card { min-height:370px; } .payment-portal { margin-top:20px; }.payment-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0 20px; }.payment-kpis > div { padding:13px; background:#f7fbfc; border:1px solid #edf1f3; border-radius:9px; }.payment-kpis small { display:block; color:var(--muted); font-size:9px; }.payment-kpis strong { display:block; margin:4px 0 2px; color:var(--ink); font-size:20px; }.payment-kpis span { color:#6d8a8e; font-size:9px; }.payment-portal [data-payment-filter] { min-height:36px; padding:0 10px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; font-size:10px; font-weight:800; }.tag.paid { color:#277b61; background:#dff2e8; }.tag.refunded { color:#8c5a79; background:#f2e5ef; }.tag.due-on-delivery,.tag.pending { color:#9a6d18; background:#fff0c9; } .tanker-live-details { padding:16px; margin:0 0 18px; background:#f2faf9; border:1px solid #d9edeb; border-radius:12px; }.tanker-live-heading { display:flex; justify-content:space-between; gap:12px; align-items:start; padding-bottom:12px; border-bottom:1px solid #d8eae8; }.tanker-live-heading h3 { margin:0; font:800 15px "DM Mono",monospace; letter-spacing:0; }.tanker-live-heading .eyebrow { margin-bottom:5px; }.tanker-live-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:14px; }.tanker-live-grid div { display:flex; flex-direction:column; gap:2px; }.tanker-live-grid small { color:#779093; font-size:9px; }.tanker-live-grid b { color:var(--ink); font-size:11px; }.tanker-live-grid span { color:var(--muted); font-size:9px; }.availability { align-items:flex-start; }.availability > span:last-child { display:inline-flex; gap:4px; flex-wrap:wrap; }.availability b { color:var(--ink); }.tanker-live-details .live-badge { white-space:nowrap; } @media (max-width:760px) { .payment-kpis { grid-template-columns:1fr 1fr; }.payment-portal .card-heading { align-items:stretch; flex-direction:column; }.payment-portal .table-actions { width:100%; } } @media (max-width:760px) { .tanker-live-grid { grid-template-columns:1fr 1fr; }.tanker-live-heading { flex-direction:column; } } .coupon-entry { display:flex; }.coupon-entry input { border-radius:9px 0 0 9px; }.coupon-entry .button { border-radius:0 9px 9px 0; }.available-vendors { display:grid; gap:6px; margin-top:12px; }.available-vendor { display:flex; gap:7px; align-items:center; padding:8px; background:#fff; border:1px solid #dcece9; border-radius:8px; }.available-vendor > div { display:flex; flex:1; flex-direction:column; }.available-vendor b { color:var(--ink); font-size:10px; }.available-vendor small { color:var(--muted); font-size:8px; }.available-vendor strong { color:#2b8669; font:9px "DM Mono",monospace; }.vendor-status-dot { flex:0 0 7px; width:7px; height:7px; background:#35ad76; border-radius:50%; box-shadow:0 0 0 3px rgba(53,173,118,.15); }.wide-modal { width:min(100%,720px); }.order-filter-tabs { display:flex; gap:5px; padding:4px; margin:16px 0; background:#f1f7f7; border-radius:9px; }.order-filter-tabs button { padding:8px 12px; color:var(--muted); background:transparent; border:0; border-radius:7px; font-size:10px; font-weight:800; }.order-filter-tabs button.active { color:var(--aqua-dark); background:#fff; box-shadow:0 2px 6px rgba(16,52,58,.1); }.history-list,.saved-address-list,.coupon-list { display:grid; gap:8px; max-height:450px; overflow:auto; }.history-order,.saved-address,.coupon-card { display:flex; justify-content:space-between; gap:15px; padding:13px; background:#f7fbfb; border:1px solid var(--line); border-radius:9px; }.history-order h3 { margin:5px 0 2px; font:11px "DM Mono",monospace; }.history-order p { margin:0; color:var(--muted); font-size:10px; }.history-order > div:last-child { display:flex; flex-direction:column; align-items:end; gap:4px; }.history-order strong { font-size:13px; }.history-order small,.saved-address small { color:var(--muted); font-size:9px; }.saved-address { justify-content:flex-start; align-items:center; }.saved-address > span { display:grid; place-items:center; width:28px; height:28px; color:var(--aqua); background:var(--aqua-light); border-radius:8px; }.saved-address div { display:flex; flex-direction:column; }.coupon-card { align-items:center; }.coupon-card > div { display:flex; flex:1; flex-direction:column; gap:6px; }.coupon-card b { font-size:11px; }.coupon-code { width:max-content; padding:4px 7px; color:#237465; background:#dff2e9; border-radius:5px; font:9px "DM Mono",monospace; }.empty-history { color:var(--muted); font-size:11px; } .role-switcher { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin:21px 0 17px; background:#eef6f5; border-radius:10px; }.role-switcher button { padding:9px 5px; color:var(--muted); background:transparent; border:0; border-radius:7px; font-size:11px; font-weight:800; }.role-switcher button.active,.role-switcher button:hover { color:var(--aqua-dark); background:#fff; box-shadow:0 2px 6px rgba(16,52,58,.1); }.auth-panel-inner [data-auth-panel][hidden] { display:none; } /* ========== Urban Tanker Complete Platform — new UI ========== */ .hero-compact { min-height: 380px; padding-bottom: 40px; } .quick-bar { max-width: 1160px; margin: -10px auto 28px; padding: 0 28px; } .quick-bar-inner { display: flex; gap: 12px; align-items: center; } .search-field { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 18px rgba(20,71,74,.06); } .search-field input { border: 0; padding: 0; background: transparent; box-shadow: none; font-size: 14px; } .search-field input:focus { box-shadow: none; } .emergency-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; color: #fff; background: linear-gradient(135deg, #d96250, #c44a3a); border: 0; border-radius: 12px; font-weight: 800; font-size: 12px; letter-spacing: .04em; box-shadow: 0 8px 20px rgba(217,98,80,.3); white-space: nowrap; } .emergency-btn:hover { transform: translateY(-1px); } .emergency-pulse { width: 8px; height: 8px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: pulse-em 1.6s infinite; } @keyframes pulse-em { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } .my-water-section { padding: 40px 28px 20px; max-width: 1240px; margin: 0 auto; } .compact-intro { margin-bottom: 18px; } .my-water-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .mw-card { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 18px rgba(20,71,74,.05); } .mw-card small { display: block; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .mw-card strong { display: block; margin: 6px 0 4px; font-size: 18px; letter-spacing: -.4px; } .mw-card span { color: var(--muted); font-size: 11px; } .mw-card.highlight { background: linear-gradient(145deg, #e2f5f5, #f0faf9); border-color: #b8e0e0; } .services-section { padding: 50px 28px; max-width: 1240px; margin: 0 auto; } .service-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .svc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 120px; padding: 18px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 22px rgba(20,71,74,.06); transition: transform .2s, box-shadow .2s, border-color .2s; } .svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #91c5c9; } .svc-card.accent { background: linear-gradient(145deg, #10343a, #0c4a52); color: #fff; border: 0; } .svc-card.accent small { color: #9fe4d5; } .svc-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; color: var(--aqua); background: var(--aqua-light); border-radius: 12px; font: 22px/1 Georgia, serif; } .svc-card.accent .svc-icon { color: #fff; background: rgba(255,255,255,.12); } .svc-card b { font-size: 14px; } .svc-card small { color: var(--muted); font-size: 11px; line-height: 1.35; } .subscriptions-section { padding: 60px 28px; background: #fff; } .sub-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto 28px; } .sub-plan-card { position: relative; padding: 24px; background: #f7fbfb; border: 1px solid var(--line); border-radius: 16px; } .sub-plan-card h3 { margin: 0 0 8px; font-size: 18px; } .sub-plan-card > p { color: var(--muted); font-size: 13px; margin-bottom: 14px; } .sub-plan-card ul { padding: 0 0 0 16px; margin: 0 0 18px; color: var(--muted); font-size: 12px; } .sub-plan-card li { margin-bottom: 4px; } .plan-badge { position: absolute; top: 14px; right: 14px; padding: 4px 8px; color: #fff; background: var(--aqua); border-radius: 6px; font-size: 9px; font-weight: 800; } .active-subs { max-width: 1100px; margin: 0 auto; } .smart-water-section { padding: 50px 28px 70px; max-width: 1240px; margin: 0 auto; } .insight-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .insight-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; } .insight-card > span { font-size: 24px; } .insight-card b { display: block; font-size: 13px; margin-bottom: 4px; } .insight-card p { margin: 0; color: var(--muted); font-size: 12px; } .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .product-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; background: #f7fbfb; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .product-card input { position: absolute; opacity: 0; } .product-card.selected { background: var(--aqua-light); border: 2px solid var(--aqua); } .product-card b { font-size: 13px; } .product-card small { color: var(--muted); font-size: 11px; } .emergency-estimate { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; margin: 12px 0 16px; background: #fff5f3; border-radius: 10px; } .emergency-estimate small { display: block; color: var(--muted); font-size: 10px; } .emergency-estimate strong { font-size: 18px; color: #c44a3a; } @media (max-width: 980px) { .my-water-grid { grid-template-columns: repeat(3, 1fr); } .service-category-grid { grid-template-columns: repeat(2, 1fr); } .sub-plans-grid, .insight-cards { grid-template-columns: 1fr; } .quick-bar-inner { flex-direction: column; } .emergency-btn { width: 100%; justify-content: center; } } @media (max-width: 600px) { .my-water-grid { grid-template-columns: 1fr 1fr; } .service-category-grid { grid-template-columns: 1fr; } .product-grid { grid-template-columns: 1fr; } } /* Subscription pricing models */ .pricing-tabs { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1100px; margin: 0 auto 22px; padding: 5px; background: #eef6f5; border-radius: 12px; } .pricing-tabs button { flex: 1; min-width: 120px; padding: 11px 14px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; font-size: 12px; font-weight: 800; } .pricing-tabs button.active, .pricing-tabs button:hover { color: var(--aqua-dark); background: #fff; box-shadow: 0 2px 8px rgba(16,52,58,.1); } .pricing-grid { max-width: 1100px; margin: 0 auto; grid-template-columns: repeat(4, 1fr); } .pricing-panel[hidden] { display: none !important; } .sub-plan-card .plan-type { margin: 0 0 4px; color: var(--aqua); font: 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; } .plan-price { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 12px; } .plan-price strong { font-size: 28px; letter-spacing: -1px; color: var(--ink); } .plan-price span { color: var(--muted); font-size: 13px; } .sub-plan-card.featured { background: linear-gradient(160deg, #e8f7f6, #f5fbfb); border: 2px solid var(--aqua); } .pricing-notes { max-width: 1100px; margin: 22px auto 0; padding: 14px 16px; background: #f0f9f8; border: 1px solid #d8ecea; border-radius: 12px; color: var(--muted); font-size: 12px; line-height: 1.55; } .pricing-notes strong { color: var(--ink); } @media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-tabs button { min-width: 0; font-size: 11px; padding: 10px 8px; } } /* Customer experience additions — deliberately use the existing Urban Tanker visual system. */ .header-account-actions { display:flex; align-items:center; gap:8px; } .nav-dropdown { position:relative; } .nav-dropdown-toggle { padding:0; color:#446468; background:transparent; border:0; font-size:13px; } .nav-dropdown-menu { position:absolute; z-index:30; top:31px; left:-18px; width:285px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); } .nav-dropdown-menu button { width:100%; padding:11px; text-align:left; background:transparent; border:0; border-radius:9px; } .nav-dropdown-menu a { display:block; width:100%; padding:11px; text-align:left; background:transparent; border-radius:9px; text-decoration:none; } .nav-dropdown-menu a:hover { background:var(--aqua-light); } .nav-dropdown-menu button:hover { background:var(--aqua-light); } .nav-dropdown-menu b,.nav-dropdown-menu small { display:block; }.nav-dropdown-menu small { margin-top:2px; color:var(--muted); font-size:9px; } .weather-badge { position:absolute; z-index:4; top:24px; left:25px; display:flex; gap:10px; align-items:center; min-width:135px; padding:11px 13px; color:var(--ink); background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.8); border-radius:13px; box-shadow:0 9px 24px rgba(16,52,58,.12); backdrop-filter:blur(8px); animation:floatCard 4.2s ease-in-out infinite; } .weather-symbol { font-size:28px; line-height:1; }.weather-badge strong,.weather-badge small { display:block; }.weather-badge strong { font-size:17px; }.weather-badge small { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; } .hero-visual.is-night { background:linear-gradient(150deg,#143c52,#32677b); }.hero-visual.is-night .sun { background:#fff5cc; box-shadow:-14px 5px 0 0 #32677b; }.hero-visual.is-rainy .cloud { background:rgba(103,142,151,.8); }.hero-visual.is-rainy::after { position:absolute; top:105px; right:57px; color:rgba(0,124,145,.55); font:22px/1.4 "DM Mono"; white-space:pre; content:"╱ ╱ ╱\A ╱ ╱"; } .quick-message { display:flex; flex-direction:column; margin:0; }.quick-message span { color:var(--muted); font-size:10px; } .focused-services { grid-template-columns:repeat(2,1fr); max-width:760px; } .estimate-total { padding-top:11px!important; margin-top:5px; border-top:1px solid #cee5e1; }.estimate-total b { font-size:15px; color:var(--aqua-dark); } .partner-section { padding:84px 28px; background:#fff; }.partner-layout { display:grid; grid-template-columns:1fr 320px; gap:35px; max-width:1010px; margin:auto; }.partner-form { padding:25px; background:var(--paper); border:1px solid var(--line); border-radius:18px; }.partner-check { display:flex; gap:9px; align-items:flex-start; margin:4px 0 18px; color:var(--muted); font-size:10px; }.partner-check input { width:auto; margin-top:3px; }.partner-note { align-self:start; padding:25px; color:#fff; background:var(--ink); border-radius:18px; }.partner-note h3 { margin:16px 0 8px; }.partner-note ol { padding-left:18px; color:#c1d7d7; font-size:11px; }.partner-note li { margin:10px 0; }.partner-note p { margin:18px 0 0; color:#9fe4d5; font-size:11px; }.partner-note a { color:#fff; font-weight:800; } @media (max-width: 760px) { .header-account-actions .signup-button { display:none; }.partner-layout,.focused-services { grid-template-columns:1fr; }.partner-section { padding:55px 20px; } } @media (max-width: 780px) { .hero-visual { display:block; min-height:72px; margin-top:-8px; overflow:visible; background:transparent; border-radius:0; } .hero-visual > *:not(.weather-badge) { display:none; } .weather-badge { position:relative; top:auto; left:auto; width:max-content; } } .home-only #subscriptions,.home-only #services,.home-only #book,.home-only #track-order,.home-only #how-it-works,.home-only #offers,.home-only #smart-water,.home-only #partner { display:none!important; } .home-subscription-teaser { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; max-width:1184px; padding:70px 28px; margin:auto; }.home-subscription-teaser h2 { margin:0 0 10px; font-size:clamp(30px,4vw,48px); letter-spacing:-2px; }.home-subscription-teaser>div>p:not(.eyebrow){color:var(--muted)}.teaser-plan{padding:25px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.teaser-plan small{color:var(--aqua);font:10px "DM Mono"}.teaser-plan strong{display:block;margin:8px 0;font-size:25px}.teaser-plan strong span{font-size:12px;color:var(--muted)} .reference-showcase { max-width:1184px; padding:20px 28px 75px; margin:auto; } .reference-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; } .reference-header h2 { margin:0; font-size:clamp(30px,4vw,52px); letter-spacing:-2px; } .reference-header a { color:var(--aqua-dark); font-size:13px; font-weight:800; } .service-showcase-grid { display:grid; grid-template-columns:repeat(5, minmax(180px, 1fr)); gap:14px; padding:18px 0 0; border:1px solid var(--line); border-radius:18px; background:#eef7f7; } .service-showcase-card { display:flex; flex-direction:column; min-height:245px; padding:22px 18px 18px; background:rgba(255,255,255,.72); border-right:1px solid var(--line); } .service-showcase-card:last-child { border-right:0; } .service-step { color:#627a80; font:10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; } .service-showcase-card h3 { margin:12px 0 10px; font-size:16px; letter-spacing:-.5px; } .service-showcase-card p { margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.5; } .mini-truck { position:relative; width:100%; height:74px; margin-bottom:16px; border-radius:12px; background:linear-gradient(180deg,#fff,#edf6f5); border:1px solid rgba(11,91,104,.12); } .mini-truck::before { content:""; position:absolute; left:10%; right:10%; bottom:18px; height:32px; background:linear-gradient(90deg,#dceef0,#f5fbfa,#dceef0); border-radius:14px 14px 8px 8px; box-shadow:inset 0 0 0 1px rgba(16,52,58,.08); } .mini-truck::after { content:""; position:absolute; left:18%; bottom:8px; width:18px; height:18px; background:#1b2d38; border-radius:50%; box-shadow:52px 0 0 #1b2d38, 104px 0 0 #1b2d38; } .service-showcase-card .mini-truck::after { content:none!important; display:none!important; box-shadow:none!important; } .truck-water::before { background:linear-gradient(90deg,#8bd9ec,#f0fbfd,#8bd9ec); } .truck-sewage::before { background:linear-gradient(90deg,#d7e2e1,#f4fbf8,#d7e2e1); } .truck-infra::before { background:linear-gradient(90deg,#f2d9aa,#f9f1d3,#f2d9aa); } .truck-rmc::before { background:linear-gradient(90deg,#96d3d9,#f3f9fa,#96d3d9); } .truck-empty::before { background:linear-gradient(90deg,#d4dfe0,#edf6f7,#d4dfe0); } .inline-btn { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:36px; margin-top:auto; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:10px; font-size:11px; font-weight:800; } .inline-btn:hover { background:#f5fbfb; text-decoration:none; } .service-benefits { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:16px; padding:18px 12px 0; border-top:1px solid var(--line); } .service-benefits > div { display:flex; align-items:center; gap:12px; min-height:70px; padding:10px 6px; } .benefit-icon { display:grid; place-items:center; width:32px; height:32px; color:var(--aqua-dark); background:#e7f3f0; border-radius:50%; font-size:18px; } .service-benefits b { display:block; margin-bottom:2px; font-size:14px; } .service-benefits small { color:var(--muted); font-size:11px; } .about-photo-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.about-photo-grid img{width:100%;height:330px;object-fit:cover;border-radius:18px}.about-photo-grid img:last-child{object-position:top}.client-cloud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.client-chip{padding:16px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;font-weight:800}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.review{padding:22px;background:#fff;border:1px solid var(--line);border-radius:16px}.review p{color:var(--muted);font-size:12px}.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.roadmap article{padding:22px;background:var(--ink);color:#fff;border-radius:16px}.roadmap article p{color:#b6d0d2;font-size:12px} .page-hero{max-width:1184px;padding:55px 28px 35px;margin:auto}.page-hero h1{font-size:clamp(38px,5vw,62px)}.page-shell{max-width:1120px;padding:0 28px 80px;margin:auto}.page-grid{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start}.page-card{padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px}.page-card+.page-card{margin-top:14px}.page-card h2,.page-card h3{margin-bottom:8px}.sticky{position:sticky;top:20px}.wizard-progress{display:flex;gap:7px;margin-bottom:24px}.wizard-progress span{flex:1;height:5px;background:#dce9e8;border-radius:10px}.wizard-progress span.active{background:var(--aqua)}.wizard-step[hidden]{display:none!important}.choice-big{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-big button{min-height:120px;padding:20px;text-align:left;background:#f8fcfc;border:1px solid var(--line);border-radius:15px}.choice-big button:hover,.choice-big button.selected{background:var(--aqua-light);border:2px solid var(--aqua)}.choice-big b,.choice-big small{display:block}.choice-big small{margin-top:5px;color:var(--muted)}.wizard-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}.summary-line{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px}.summary-line span{color:var(--muted)}.summary-total{font-size:18px;font-weight:800}.page-tabs{display:flex;gap:7px;margin-bottom:22px}.page-tabs button{padding:10px 14px;border:0;border-radius:9px;background:#eaf4f4;font-weight:800}.page-tabs button.active{color:#fff;background:var(--aqua)}.account-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.account-card{padding:20px;background:#fff;border:1px solid var(--line);border-radius:15px}.account-card small{color:var(--muted)}.account-card strong{display:block;margin:5px 0;font-size:23px}.usage-chart{display:flex;align-items:end;gap:13px;height:190px;padding:20px 5px 0;border-bottom:1px solid var(--line)}.usage-bar{flex:1;position:relative;background:linear-gradient(var(--aqua),#62bdac);border-radius:7px 7px 0 0}.usage-bar.sewage{background:linear-gradient(#d7975f,#eac49f)}.usage-bar span{position:absolute;bottom:-22px;width:100%;text-align:center;font-size:9px}.track-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}.driver-card{display:flex;gap:13px;align-items:center;padding:16px;color:#fff;background:var(--ink);border-radius:14px}.driver-card div{flex:1}.driver-card small{display:block;color:#a9cdcf}.otp-box{margin-top:12px;padding:16px;text-align:center;background:var(--aqua-light);border-radius:13px}.otp-box b{font:500 27px "DM Mono";letter-spacing:6px}.timeline-vertical{list-style:none;padding:0;margin:20px 0}.timeline-vertical li{position:relative;padding:0 0 22px 34px;color:var(--muted)}.timeline-vertical li:before{position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:#dce7e7;content:""}.timeline-vertical li.done:before{background:#43ae78;box-shadow:inset 0 0 0 5px #fff}.timeline-vertical li.current:before{background:var(--aqua);box-shadow:0 0 0 5px var(--aqua-light)} @media(max-width:780px){.home-subscription-teaser,.page-grid,.track-layout{grid-template-columns:1fr}.account-grid{grid-template-columns:1fr 1fr}.page-shell,.page-hero{padding-left:20px;padding-right:20px}.sticky{position:static}.choice-big{grid-template-columns:1fr}.home-subscription-teaser{padding:50px 20px}.site-footer{align-items:flex-start;flex-direction:column}} @media(max-width:780px){.about-photo-grid,.review-grid,.roadmap{grid-template-columns:1fr}.client-cloud{grid-template-columns:1fr 1fr}.reference-showcase{padding:10px 20px 55px}.road-hero{display:block;min-height:230px!important;background:#cdebf0!important;border-radius:20px!important}.road-hero > *:not(.road-tanker-image):not(.weather-badge):not(.headlight-beam):not(.road-brand):not(.card-mini){display:none!important}.road-tanker-image{display:block!important}.weather-badge{position:absolute!important;top:12px!important;left:12px!important}.road-brand{display:none!important}.card-mini{display:block!important;right:10px;bottom:10px;width:140px;padding:10px}} .emergency-action { min-height:76px!important; align-self:center; color:#fff!important; border:0!important; border-radius:999px!important; background:linear-gradient(135deg,#d96250,#b93d31)!important; box-shadow:0 12px 28px rgba(217,98,80,.28)!important; } .emergency-action { animation:emergency-pop 2.4s ease-in-out infinite; } .emergency-action::after { top:50%!important; left:18px!important; width:8px!important; height:8px!important; transform:translateY(-50%); box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:emergency-dot 1.35s ease-out infinite!important; } @keyframes emergency-pop { 0%,100% { transform:scale(1); } 50% { transform:scale(1.025); } } @keyframes emergency-dot { 0% { box-shadow:0 0 0 0 rgba(255,255,255,.72); opacity:1; } 75%,100% { box-shadow:0 0 0 13px rgba(255,255,255,0); opacity:.8; } } .emergency-action small{color:#ffe3df!important}.emergency-action b{font-size:17px;letter-spacing:.02em}.social-links a span{display:grid;place-items:center;width:20px;height:20px;margin-right:6px;color:#fff;background:var(--aqua);border-radius:50%;font-size:10px;font-weight:900}.store-links{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.store-links span{padding:4px 6px;color:#fff;background:var(--ink);border-radius:5px;font-size:8px;font-weight:800} /* Focused homepage refinements */ .road-hero .weather-badge{color:#fff;background:rgba(5,34,45,.14);border:1px solid rgba(255,255,255,.38);box-shadow:0 10px 30px rgba(2,22,31,.16);backdrop-filter:blur(7px);text-shadow:0 1px 8px rgba(0,0,0,.42)} .road-hero .weather-badge small{color:rgba(255,255,255,.9)} .road-hero .road-tanker-image{filter:none!important} .road-hero .headlight-beam,.road-hero::after{display:none!important} .emergency-action{isolation:isolate;box-shadow:0 10px 30px rgba(210,64,50,.36),0 0 0 0 rgba(255,113,88,.42)!important;animation:emergency-glow 1.7s ease-in-out infinite!important} .emergency-action::before{z-index:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.42) 45%,transparent 70%);transform:translateX(-130%);animation:emergency-shine 2.15s ease-in-out infinite} .emergency-action .service-action-icon,.emergency-action span:not(.service-action-icon){z-index:2} @keyframes emergency-glow{0%,100%{transform:scale(1);box-shadow:0 10px 30px rgba(210,64,50,.32),0 0 0 0 rgba(255,113,88,.4)}50%{transform:scale(1.025);box-shadow:0 15px 38px rgba(210,64,50,.48),0 0 0 10px rgba(255,113,88,0)}} @keyframes emergency-shine{0%,28%{transform:translateX(-130%)}68%,100%{transform:translateX(130%)}} .site-header{max-width:1180px;height:72px;padding:0 22px;gap:18px} .site-header .brand{flex:0 0 auto;font-size:18px;white-space:nowrap} .main-nav{flex:1;justify-content:center;gap:clamp(13px,1.7vw,24px);font-size:12px;white-space:nowrap} .header-account-actions{flex:0 0 auto}.header-account-actions .button{min-width:auto;padding:10px 14px;font-size:11px} .site-footer{max-width:1160px;padding:24px 28px 16px;font-size:10px} .footer-brand-wrap{gap:5px;margin-bottom:13px}.footer-grid{grid-template-columns:1.15fr 1fr 1fr 1.15fr;gap:18px}.footer-grid h3{margin-bottom:7px;font-size:10px}.footer-grid ul{gap:5px} .social-card{padding:12px;border-radius:13px}.social-card h3{margin-bottom:9px;font-size:14px}.social-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:9px}.social-links a{min-width:0;min-height:30px;padding:5px 8px;font-size:9px}.social-links a span{width:17px;height:17px;font-size:8px}.qr-block{gap:8px;padding-top:8px}.mini-qr{width:48px;height:48px;padding:6px}.qr-block strong{font-size:11px}.qr-block small{font-size:8px}.footer-bottom{margin-top:12px;padding-top:10px} @media(max-width:1000px) and (min-width:761px){.site-header{padding:0 18px;gap:12px}.site-header .brand{font-size:16px}.main-nav{gap:12px;font-size:11px}.header-account-actions .button{padding:9px 11px}.footer-grid{grid-template-columns:1fr 1fr 1fr 1.2fr}} .invoice-ready{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 22px;margin-bottom:18px;background:linear-gradient(135deg,#e7f8f5,#f8fcfc);border:1px solid #bfe2dc;border-radius:16px;box-shadow:0 10px 28px rgba(20,91,91,.08)} .invoice-ready>div{display:flex;align-items:center;gap:14px}.invoice-ready h2{margin:2px 0 4px;font-size:20px}.invoice-ready p{margin:0;color:var(--muted);font-size:12px}.invoice-icon{display:grid;place-items:center;width:48px;height:56px;color:#fff;background:#d9534f;border-radius:8px 8px 12px 8px;font:800 11px Manrope,sans-serif;box-shadow:0 8px 18px rgba(217,83,79,.22)} .confirmation-grid{display:grid;grid-template-columns:1fr 360px;gap:20px}.confirmation-check{display:grid;place-items:center;width:58px;height:58px;margin-bottom:16px;color:#fff;background:#38a873;border-radius:50%;font-size:27px;box-shadow:0 10px 25px rgba(56,168,115,.23)} @media(max-width:780px){.invoice-ready{align-items:stretch;flex-direction:column}.invoice-ready .button{width:100%}.confirmation-grid{grid-template-columns:1fr}} /* Subscription catalogue: active customer plan first, then ordered plan choices. */ body:has(#plans) .page-shell{display:flex;flex-direction:column;gap:18px} body:has(#plans) .page-shell>section{margin:0} body:has(#plans) .page-shell>section:nth-child(2){order:-1;background:linear-gradient(135deg,#e7f8f5,#fff);border:2px solid var(--aqua);box-shadow:0 14px 34px rgba(0,124,145,.12)} body:has(#plans) .page-shell>section:nth-child(2) h2{margin:5px 0 14px;font-size:25px} body:has(#plans) .page-shell>section:nth-child(2) .history-order{padding:17px;background:#fff;border-color:#cce7e3;border-radius:13px} body:has(#plans) .pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} body:has(#plans) .sub-plan-card{display:flex;flex-direction:column;min-height:330px} body:has(#plans) .sub-plan-card .button{width:100%;margin-top:auto} body:has(#plans) .sub-plan-card.featured{order:-1} body:has(#plans) .page-tabs{justify-content:center;padding:5px;background:#edf5f5;border-radius:12px} body:has(#plans) .page-tabs button{flex:1;max-width:190px} @media(max-width:850px){body:has(#plans) .pricing-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){body:has(#plans) .pricing-grid{grid-template-columns:1fr}} /* Compact, number-free service catalogue that stays within the existing viewport. */ .reference-showcase{padding-top:12px;padding-bottom:38px;overflow:hidden} .reference-header{margin-bottom:12px} .service-showcase-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding-top:10px;overflow:hidden} .service-showcase-card{min-width:0;min-height:205px;padding:20px 14px 14px} .service-showcase-card .service-step{display:none!important} .service-showcase-card h3{margin:0 0 9px;font-size:15px;line-height:1.25} .service-showcase-card p{margin-bottom:14px;font-size:11px;line-height:1.45} .service-showcase-card .inline-btn{min-height:38px;color:#fff;background:var(--aqua);border-color:var(--aqua);box-shadow:0 7px 16px rgba(0,124,145,.16)} .service-showcase-card .inline-btn:hover{color:#fff;background:var(--aqua-dark)} .service-benefits{gap:10px;margin-top:10px;padding-top:12px} .service-benefits>div{min-width:0;min-height:54px;padding:6px 4px}.service-benefits b{font-size:11px}.service-benefits small{font-size:9px} @media(max-width:900px){.service-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-showcase-card:last-child{grid-column:1/-1}.service-benefits{grid-template-columns:1fr 1fr}} @media(max-width:560px){.service-showcase-grid,.service-benefits{grid-template-columns:1fr}.service-showcase-card:last-child{grid-column:auto}} /* Service explorer: useful details, with native keyboard-accessible disclosures. */ .service-explorer-intro{margin:0 0 24px;color:var(--muted);font-size:14px;max-width:620px} .service-showcase-grid.service-explorer{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px;padding:0;border:0;border-radius:0;background:transparent;overflow:visible} .service-explorer .service-showcase-card{position:relative;min-height:292px;padding:24px;border:1px solid #d8e8e6;border-radius:20px;background:#f3f9f8;overflow:hidden;transition:border-color .2s,box-shadow .2s} .service-explorer .service-showcase-card:hover{border-color:#8fbfb9;box-shadow:0 10px 24px rgba(16,52,58,.06)} .service-explorer .service-water{grid-column:span 2;color:#fff;background:radial-gradient(ellipse at 95% 0%,#267c80 0%,transparent 60%),#103e46;border-color:#103e46} .service-explorer .service-water::before{content:"";position:absolute;pointer-events:none;right:-75px;top:42px;width:250px;height:250px;border:1px solid #ffffff14;border-radius:43% 57% 62% 38%;box-shadow:0 0 0 26px #ffffff08,0 0 0 52px #ffffff06,0 0 0 78px #ffffff04;transform:rotate(-25deg)} .service-explorer .service-borewell{background:#faf7ef;border-color:#e9e1ce} .service-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .service-category{font-size:9px;font-weight:800;letter-spacing:.14em;color:#527572} .service-symbol{width:42px;height:42px;flex-shrink:0;color:#007c83} .service-explorer .service-showcase-card h3{position:relative;margin:0 0 10px;font-size:22px;line-height:1.2;letter-spacing:-.8px} .service-explorer .service-showcase-card>p{position:relative;margin:0 0 18px;max-width:390px;font-size:13px;line-height:1.65} .service-facts{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px} .service-facts span{padding:5px 9px;border:1px solid #d3e4e1;border-radius:6px;font-size:10px;color:#466762;background:#ffffff80} .service-disclosure{position:relative;margin-top:auto;border-top:1px solid #d3e4e1} .service-disclosure summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding-top:10px;color:#006f77;font-size:12px;font-weight:800;cursor:pointer;list-style:none} .service-disclosure summary::-webkit-details-marker{display:none} .service-disclosure summary>span{display:grid;place-items:center;width:27px;height:27px;border:1px solid #bed8d3;border-radius:50%;font-size:20px;font-weight:400;transition:transform .2s} .service-disclosure[open] summary>span{transform:rotate(45deg)} .service-disclosure summary:focus-visible{outline:2px solid #008b94;outline-offset:5px;border-radius:4px} .service-detail-copy{padding-top:10px} .service-detail-copy h4{margin:12px 0 6px;font-size:12px} .service-explorer .service-detail-copy p{margin:0 0 12px;font-size:12px;line-height:1.7} .service-explorer .service-water .service-category,.service-explorer .service-water .service-symbol{color:#a8e8dd} .service-explorer .service-water p{color:#d0e5e6} .service-water .service-facts span{color:#d2efeb;background:#ffffff0b;border-color:#ffffff30} .service-water .service-disclosure{border-color:#ffffff30} .service-water .service-disclosure summary{color:#bcece3} .service-water .service-disclosure summary>span{border-color:#ffffff50} .service-water .service-disclosure summary:focus-visible{outline-color:#bcece3} @media(max-width:900px){.service-showcase-grid.service-explorer{grid-template-columns:repeat(2,minmax(0,1fr))}.service-explorer .service-water{grid-column:1/-1}.service-explorer .service-showcase-card:last-child{grid-column:auto}} @media(max-width:560px){.reference-showcase .reference-header{align-items:flex-start;flex-direction:column;gap:10px}.service-explorer-intro{font-size:13px;margin-bottom:18px}.service-showcase-grid.service-explorer{grid-template-columns:1fr}.service-explorer .service-showcase-card{min-height:0;padding:22px}.service-explorer .service-water{grid-column:auto}.service-card-top{margin-bottom:14px}} @media(prefers-reduced-motion:reduce){.service-explorer .service-showcase-card,.service-disclosure summary>span{transition:none}} /* One calm login screen for every account type. */ .simple-login-page{min-height:100vh;background:radial-gradient(ellipse at 50% 0,#dcefeb,transparent 60%),#f5f9f8} .simple-login-shell{display:flex;flex-direction:column;align-items:center;gap:25px;max-width:500px;margin:auto;padding:40px 20px} .simple-login-shell>.brand{font-size:21px} .simple-login-card{width:100%;padding:32px;background:#fff;border:1px solid #dce9e5;border-radius:22px;box-shadow:0 18px 60px #10343a09} .simple-login-card .eyebrow{margin:0 0 12px;font-size:9px;letter-spacing:.14em} .simple-login-card h1{margin:0 0 9px;font-size:34px;letter-spacing:-1.3px;line-height:1.2} .login-intro{margin:0 0 25px;color:var(--muted);font-size:14px} .simple-login-card .google-button{min-height:48px;font-size:13px;cursor:pointer} .simple-login-card .google-button:hover{background:#f7faf9;border-color:#9dbbb5} .login-provider-note{margin:7px 0 0;color:#687d7b;font-size:10px;text-align:center} .simple-login-card .or-divider{margin:21px 0;font-size:11px} .simple-login-card .field label{display:block;margin-bottom:7px;font-size:12px;font-weight:800} .simple-login-card .field input{min-height:48px;font-size:14px} .login-password-wrap{position:relative} .login-password-wrap input{padding-right:66px} .login-password-wrap button{position:absolute;right:7px;top:5px;min-height:38px;padding:0 10px;background:transparent;border:0;border-radius:6px;color:#006d79;font-size:11px;font-weight:800;cursor:pointer} .simple-login-card :is(button,summary,a):focus-visible{outline:2px solid #007c91;outline-offset:3px} .simple-login-card form>.button{display:flex;justify-content:space-between;width:100%;min-height:48px;margin-top:20px;font-size:14px} .simple-login-card form>.button:disabled{opacity:.7;cursor:wait} .login-error{padding:11px 12px;color:#972e2a;background:#fff1ef;border:1px solid #f2d2ce;border-radius:8px;font-size:12px} .login-error[hidden]{display:none} .login-routing-note{margin:18px 0;color:var(--muted);font-size:11px;text-align:center;line-height:1.7} .registration-details{padding:12px 14px;background:#f3f8f6;border:1px solid #e2ece8;border-radius:10px;font-size:11px} .registration-details summary{cursor:pointer;font-weight:700;color:#46665f} .registration-details dl{display:grid;gap:10px;margin:15px 0} .registration-details dl>div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px} .registration-details dt{font-weight:700}.registration-details dd{margin:0}.registration-details code{font-size:10px} .registration-details p{margin:0;color:var(--muted);font-size:10px} .simple-login-card .terms-note{text-align:center;font-size:10px}.simple-login-card .terms-note a{color:#006d79} @media(max-width:480px){.simple-login-shell{gap:22px;padding:28px 16px}.simple-login-card{padding:26px 22px}.simple-login-card h1{font-size:31px}.simple-login-card .field input{font-size:16px}} /* Small-phone layouts for the simplified public pages. */ @media(max-width:380px){.site-header{height:auto;min-height:72px;flex-wrap:wrap;padding:14px 18px;gap:12px}.site-header .header-account-actions{margin-left:auto}.site-footer .footer-grid{grid-template-columns:1fr}.site-footer .app-qr{max-width:100%}.site-footer .qr-block{flex-wrap:wrap}} @media(max-width:480px){body:has(#plans) .page-tabs{display:grid;grid-template-columns:1fr 1fr}body:has(#plans) .page-tabs button{max-width:none;white-space:normal}}