:root{--blue:#1167e8;--blue-dark:#092d67;--ink:#10265a;--green:#12b86a;--mint:#eafff3;--bg:#f6faff;--line:#dce8f7;--shadow:0 18px 45px rgba(22,75,150,.12);--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}a{text-decoration:none;color:inherit}button,input,select{font:inherit}button{cursor:pointer;border:0}.top-ribbon{height:34px;background:#eaf4ff;color:#1554a8;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:700}.top-ribbon span{color:var(--green);font-size:16px}.site-header{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #edf2f8}.header-inner{max-width:1240px;margin:auto;min-height:76px;padding:0 24px;display:flex;align-items:center;gap:28px}.logo,.footer-logo{font-family:'Plus Jakarta Sans',sans-serif;font-size:31px;font-weight:800;letter-spacing:-2px;color:var(--blue);line-height:.8;position:relative}.logo span,.footer-logo span{color:var(--green)}.logo small{display:block;font-family:Manrope;font-size:8px;letter-spacing:0;color:var(--ink);font-weight:800;margin-top:8px}.nav{display:flex;align-items:center;gap:24px;margin-left:auto}.nav a{font-size:12px;font-weight:700;white-space:nowrap;padding:28px 0 23px;border-bottom:3px solid transparent}.nav a:hover,.nav a.active{color:var(--blue);border-color:var(--green)}.header-actions{display:flex;gap:10px;align-items:center}.city-pill,.login-pill{border-radius:13px;padding:10px 15px;font-size:12px;font-weight:800;white-space:nowrap}.city-pill{background:#fff;border:1px solid var(--line);color:var(--ink)}.city-pill span{margin-left:18px}.login-pill{background:var(--blue);color:#fff;box-shadow:0 8px 18px rgba(17,103,232,.22)}.mobile-menu-toggle{display:none;background:transparent;color:var(--blue);font-size:25px}.hero{max-width:1240px;margin:0 auto;min-height:450px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;padding:38px 24px 0;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0 0 0 42%;background:linear-gradient(90deg,transparent,#e8f5ff 45%,#dff3ff);z-index:-1;border-radius:0 0 0 100px}.hero-modern-copy{padding:20px 0 45px;z-index:2}.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;background:#e9f4ff;border-radius:30px;padding:8px 14px;font-size:12px;font-weight:800;color:#1d5eaf;margin-bottom:22px}.eyebrow-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #d7f7e7}.hero h1{font-family:'Plus Jakarta Sans';font-size:52px;line-height:1.03;letter-spacing:-2.5px;margin:0 0 18px;color:#0d214e}.hero h1 span{color:var(--blue)}.hero p{max-width:530px;color:#53698f;font-size:16px;margin:0 0 26px}.hero p strong{color:var(--blue)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:13px;padding:13px 20px;font-weight:800;font-size:13px;transition:.2s ease}.btn:hover{transform:translateY(-2px)}.btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 22px rgba(17,103,232,.2)}.btn-outline{background:#fff;color:var(--blue);border:1px solid #bcd4f4}.btn-white{background:#fff;color:var(--blue)}.hero-trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:25px;color:#537096;font-size:11px;font-weight:800}.hero-trust-row span:first-child{color:var(--green)}.hero-modern-visual{height:450px;position:relative;display:flex;align-items:flex-end;justify-content:center}.hero-modern-visual img{width:min(100%,570px);max-height:440px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 30px rgba(20,70,130,.14))}.hero-scribble{position:absolute;top:34px;left:8%;font-family:cursive;font-size:22px;font-weight:700;color:var(--blue-dark);line-height:1.15;transform:rotate(-7deg)}.hero-scribble i{display:block;width:90px;border-bottom:4px solid var(--green);transform:rotate(-8deg);margin:7px auto}.hero-floating-card{position:absolute;right:1%;bottom:45px;background:#fff;border-radius:16px;padding:13px 20px 13px 48px;box-shadow:var(--shadow);font-size:12px;color:#526b92}.hero-floating-card strong{color:var(--ink)}.float-check{position:absolute;left:16px;top:17px;width:24px;height:24px;border-radius:50%;background:#dff9ea;color:var(--green);display:grid;place-items:center;font-weight:900}.search-section{background:#fff;max-width:1160px;margin:-8px auto 0;padding:30px 38px 25px;border-radius:24px;box-shadow:0 12px 40px rgba(20,75,140,.13);position:relative;z-index:4}.search-heading{display:flex;align-items:end;gap:30px;margin-bottom:20px}.section-kicker{display:block;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:1.2px;margin-bottom:7px}.search-heading h2,.section-title-row h2,.section-heading-center h2,.feature-banner h2,.urgency-section h2,.ai-card h2,.contact-section h2{font-family:'Plus Jakarta Sans';letter-spacing:-1.4px;line-height:1.1;margin:0;color:var(--ink)}.search-heading h2{font-size:29px}.search-heading h2 em{font-style:normal;color:var(--blue)}.search-heading p{font-size:12px;color:#6d7f9d;margin:0 0 2px;max-width:350px}.search-box{display:grid;grid-template-columns:1.15fr 1fr auto;gap:10px;background:#f8fbff;border:1px solid var(--line);padding:9px;border-radius:17px}.search-field{background:#fff;border:1px solid #d7e4f5;border-radius:12px;padding:8px 14px}.search-field label{display:block;font-size:10px;font-weight:800;color:#7185a5;margin-bottom:2px}.search-field input,.search-field select{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px;font-weight:700}.search-field select{cursor:pointer}.search-button{border-radius:12px;background:var(--blue);color:#fff;padding:0 27px;font-weight:900;box-shadow:0 8px 18px rgba(17,103,232,.2)}.search-button span{font-size:20px;margin-left:8px}.popular-searches{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:10px}.popular-searches strong{margin-right:5px}.popular-searches button{background:#fff;border:1px solid #d6e4f5;border-radius:20px;padding:7px 13px;color:#234b85;font-size:10px;font-weight:800}.popular-searches button:hover{background:#eaf4ff}.search-result{margin-top:12px}.trust-strip{max-width:1240px;margin:0 auto;padding:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border-bottom:1px solid #e4edf8}.trust-strip>div{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:4px 24px;border-right:1px solid #e3edf8}.trust-strip>div:last-child{border:0}.trust-strip span{grid-row:1/3;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e5f8ed;font-size:20px}.trust-strip strong{font-size:12px}.trust-strip small{font-size:10px;color:#7486a1}.content-section{max-width:1160px;margin:0 auto;padding:64px 24px}.section-title-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.section-title-row h2{font-size:28px}.text-link{color:var(--blue);font-size:12px;font-weight:900;white-space:nowrap}.service-categories{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}.service-card{background:#fff;border:1px solid #e1ebf7;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(20,70,130,.05);transition:.2s}.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.service-photo{height:112px;display:grid;place-items:center;font-size:54px;background:linear-gradient(135deg,#eaf5ff,#d8f4e8)}.photo-cleaning{background:linear-gradient(135deg,#e5f4ff,#f4fbff)}.photo-plumbing{background:linear-gradient(135deg,#dceeff,#eef6ff)}.photo-electric{background:linear-gradient(135deg,#fff2cf,#fffaf0)}.photo-tech{background:linear-gradient(135deg,#e7e4ff,#f4f2ff)}.photo-garden{background:linear-gradient(135deg,#dcf8e7,#f2fff7)}.photo-moving{background:linear-gradient(135deg,#ffe9d8,#fff6ed)}.service-card-body{padding:14px}.service-card h3{font-size:14px;margin:0 0 5px}.service-card p{font-size:10px;color:#71829e;min-height:32px;margin:0 0 9px}.service-button{background:none;color:var(--blue);font-size:11px;font-weight:900;padding:0}.professionals-section{padding-top:15px}.results-count{font-size:12px;color:#7285a1;margin:7px 0 0}.professionals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.professional-card{background:#fff;border:1px solid #e0eaf6;border-radius:20px;padding:18px;box-shadow:0 8px 24px rgba(20,70,130,.06);transition:.2s}.professional-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.professional-top{display:flex;gap:13px;align-items:center}.professional-avatar{width:66px;height:66px;border-radius:18px;background:linear-gradient(135deg,#dbeeff,#e5f8ee);display:grid;place-items:center;font-size:36px}.professional-name{font-size:15px;font-weight:900}.professional-job{font-size:11px;color:#6d7e9b;margin:3px 0}.verified{display:inline-block;background:#e3faed;color:#079653;border-radius:20px;padding:3px 8px;font-size:9px;font-weight:900}.professional-info{display:flex;flex-wrap:wrap;gap:8px 13px;border-top:1px solid #edf2f8;border-bottom:1px solid #edf2f8;margin:16px 0;padding:12px 0;color:#536a8d;font-size:10px}.professional-info .available{color:#079653;font-weight:800}.professional-actions{display:flex;gap:9px}.profile-button,.book-button{flex:1;padding:10px;border-radius:10px;font-size:11px;font-weight:900}.profile-button{background:#f0f6ff;color:var(--blue)}.book-button{background:var(--blue);color:#fff}.feature-banner{max-width:1160px;margin:15px auto 0;border-radius:26px;overflow:hidden;background:linear-gradient(115deg,#0d3e91,#1173ed);color:#fff;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:45px 55px 0;min-height:330px}.feature-banner .section-kicker{color:#a9d4ff}.feature-banner h2{font-size:31px;color:#fff}.feature-banner h2 span{color:#b8ffd9}.feature-banner p{font-size:13px;line-height:1.7;max-width:430px;color:#d9e9ff;margin:18px 0 24px}.feature-banner img{width:100%;max-height:290px;object-fit:contain;object-position:center bottom}.section-heading-center{text-align:center;max-width:600px;margin:0 auto 30px}.section-heading-center h2{font-size:30px}.section-heading-center p{font-size:13px;color:#7385a0}.steps-container{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step-card{background:#fff;border:1px solid #e2ecf7;border-radius:20px;padding:25px 20px;position:relative;box-shadow:0 8px 20px rgba(20,70,130,.04)}.step-number{position:absolute;right:17px;top:14px;color:#d7e6fa;font-size:22px;font-weight:900}.step-icon{width:52px;height:52px;border-radius:50%;background:#e8f3ff;display:grid;place-items:center;font-size:24px;margin-bottom:15px}.step-card h3{font-size:14px;margin:0 0 7px}.step-card p{font-size:11px;color:#71829d;margin:0}.urgency-section{max-width:1160px;margin:0 auto 60px;padding:32px 38px;border-radius:24px;background:#eafff2;border:1px solid #c8f3da;display:flex;align-items:center;justify-content:space-between;gap:30px}.urgency-section h2{font-size:27px}.urgency-section p{font-size:12px;color:#63836f;margin:8px 0 0}.availability{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.availability-btn{background:#fff;border:1px solid #cdebd9;color:#2f6e4d;border-radius:12px;padding:10px 13px;font-size:11px;font-weight:900}.availability-btn.active,.availability-btn:hover{background:var(--green);color:#fff;border-color:var(--green)}.ai-section{max-width:1160px;margin:0 auto 65px}.ai-card{border-radius:26px;background:linear-gradient(120deg,#edf5ff,#fff);border:1px solid #dbe9fa;min-height:260px;padding:42px 50px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.ai-copy{max-width:560px}.ai-badge{display:inline-block;background:#e6f0ff;color:var(--blue);border-radius:20px;padding:7px 12px;font-size:10px;font-weight:900}.ai-card h2{font-size:28px;margin:16px 0 10px}.ai-card p{font-size:13px;color:#6e809e;max-width:500px}.ai-button{background:var(--blue);color:#fff;margin-top:10px}.ai-orb{width:210px;height:210px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff 0,#b7d8ff 20%,#4d93f2 65%,#1665db 100%);display:grid;place-items:center;color:#fff;font-size:55px;box-shadow:0 20px 50px rgba(17,103,232,.22);position:relative}.ai-orb span{position:absolute;bottom:28px;right:20px;background:#fff;color:var(--ink);font-size:10px;line-height:1.4;border-radius:12px;padding:10px 13px;box-shadow:var(--shadow)}.reservations-section{padding-top:0}.reservations-intro{font-size:12px;color:#71829d}.reservation-info{margin-top:12px}.reservation-field{display:flex;gap:8px;margin:8px 0;font-size:12px}.field-label{font-weight:900;min-width:145px}.field-value{overflow-wrap:anywhere}.contact-section{max-width:1160px;margin:0 auto 70px;padding:35px 42px;border-radius:24px;background:#fff;box-shadow:0 10px 30px rgba(20,70,130,.06);display:flex;align-items:center;justify-content:space-between;gap:25px}.contact-section h2{font-size:27px}.contact-section p{font-size:12px;color:#71829d}.contact-buttons{display:flex;gap:10px;flex-wrap:wrap}.site-footer{background:#082b5b;color:#d7e7ff;padding:52px max(24px,calc((100% - 1160px)/2)) 0}.footer-container{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr 1.4fr;gap:35px;padding-bottom:40px}.footer-logo{color:#fff;font-size:30px;display:inline-block;margin-bottom:15px}.footer-brand p,.footer-column p,.footer-newsletter p{font-size:11px;line-height:1.7;color:#abc4e6;margin:0}.footer-column h3,.footer-newsletter h3{font-size:12px;color:#fff;margin:0 0 15px}.footer-column{display:flex;flex-direction:column;gap:8px}.footer-column a{font-size:11px;color:#abc4e6}.footer-column a:hover{color:#fff}.socials{display:flex;gap:8px;margin-top:18px}.socials a{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b3977;font-size:11px;font-weight:900}.newsletter{display:flex;background:#fff;border-radius:9px;overflow:hidden;margin:13px 0 10px}.newsletter input{min-width:0;flex:1;border:0;outline:0;padding:11px;font-size:11px}.newsletter button{width:42px;background:var(--blue);color:#fff;font-size:18px}.footer-newsletter small{font-size:9px;color:#abc4e6}.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding:18px 0;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:10px;color:#9fb9dc}.footer-bottom a:hover{color:#fff}.footer-bottom strong{color:#b9f5d3}.booking-modal,.profile-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:100}.booking-modal.active,.profile-modal.active{display:flex}.booking-overlay{position:absolute;inset:0;background:rgba(3,21,52,.65);backdrop-filter:blur(5px)}.booking-box,.profile-modal-content{position:relative;background:#fff;border-radius:24px;padding:30px;max-width:520px;width:calc(100% - 30px);max-height:90vh;overflow:auto;box-shadow:0 25px 80px rgba(0,0,0,.25)}.booking-close,.close-profile-modal{position:absolute;right:15px;top:12px;background:#eef5ff;color:var(--blue);width:32px;height:32px;border-radius:50%;font-size:22px}.booking-header{display:flex;gap:15px;align-items:center;margin-bottom:20px}.booking-icon{font-size:30px}.booking-header h2{font-size:21px;margin:0}.booking-header p{font-size:11px;color:#71829d;margin:3px 0}.booking-box form{display:grid;gap:7px}.booking-box label{font-size:11px;font-weight:900;margin-top:5px}.booking-box input,.booking-box select{width:100%;padding:12px;border:1px solid #d8e5f4;border-radius:10px;outline:0;background:#fbfdff;color:var(--ink)}.booking-submit{margin-top:12px;background:var(--blue);color:#fff;border-radius:11px;padding:13px;font-weight:900}.booking-success{text-align:center;padding:25px}.success-icon{width:60px;height:60px;margin:auto;border-radius:50%;background:#dcf9e8;color:var(--green);display:grid;place-items:center;font-size:32px;font-weight:900}.no-results,.no-reservations{grid-column:1/-1;background:#fff;border:1px dashed #c9dbee;border-radius:18px;padding:30px;text-align:center;color:#71829d}.no-results h3{color:var(--ink)}
@media(max-width:1050px){.nav{gap:13px}.nav a{font-size:11px}.header-inner{gap:15px}.service-categories{grid-template-columns:repeat(3,1fr)}.footer-container{grid-template-columns:repeat(3,1fr)}.footer-newsletter{grid-column:span 2}}
@media(max-width:760px){.top-ribbon{font-size:10px;padding:0 10px;text-align:center}.header-inner{min-height:68px}.mobile-menu-toggle{display:block;margin-left:auto}.header-actions{display:none}.nav{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;padding:15px 24px;box-shadow:0 15px 25px rgba(0,0,0,.08);flex-direction:column;align-items:stretch;gap:0}.nav.open{display:flex}.nav a{padding:12px 0;border-bottom:1px solid #edf2f8}.hero{display:block;padding-top:30px}.hero:before{inset:42% 0 0;background:#eaf6ff;border-radius:0}.hero h1{font-size:39px}.hero p{font-size:14px}.hero-modern-visual{height:310px}.hero-modern-visual img{max-height:320px}.hero-scribble{top:5px;left:5%;font-size:17px}.hero-floating-card{bottom:20px;right:0}.search-section{margin:0 14px;padding:25px 18px}.search-heading{display:block}.search-heading h2{font-size:25px}.search-heading p{margin-top:12px}.search-box{grid-template-columns:1fr}.search-button{padding:13px}.trust-strip{grid-template-columns:repeat(2,1fr);padding:15px}.trust-strip>div{padding:12px;border-bottom:1px solid #e3edf8}.content-section{padding:45px 18px}.section-title-row{display:block}.section-title-row .text-link{display:inline-block;margin-top:12px}.service-categories{grid-template-columns:repeat(2,1fr)}.professionals{grid-template-columns:1fr}.feature-banner{margin:0 14px;padding:32px 24px 0;display:block}.feature-banner h2{font-size:27px}.feature-banner img{margin-top:20px;max-height:230px}.steps-container{grid-template-columns:1fr 1fr}.urgency-section{margin:0 14px 45px;padding:25px 20px;display:block}.availability{justify-content:flex-start;margin-top:20px}.ai-section{margin:0 14px 45px}.ai-card{padding:30px 22px;display:block}.ai-card h2{font-size:25px}.ai-orb{width:145px;height:145px;margin:25px auto 0}.contact-section{margin:0 14px 45px;padding:28px 22px;display:block}.contact-buttons{margin-top:20px}.footer-container{grid-template-columns:1fr 1fr;gap:28px}.footer-brand,.footer-newsletter{grid-column:span 2}.footer-bottom{display:block}.footer-bottom>*{display:block;margin-top:8px}.reservation-field{display:block}.field-label,.field-value{display:inline}.field-label:after{content:": "}}
@media(max-width:420px){.hero h1{font-size:34px}.service-categories{gap:10px}.service-photo{height:90px}.service-card-body{padding:11px}.steps-container{grid-template-columns:1fr}.footer-container{grid-template-columns:1fr}.footer-brand,.footer-newsletter{grid-column:auto}}

/* =========================================================
   DISPON — Responsive system (mobile, tablet, iPad, laptop,
   desktop) — Supabase-safe: visual CSS only
   ========================================================= */
html { width: 100%; overflow-x: hidden; }
body { width: 100%; min-width: 0; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
button, input, select, textarea { max-width: 100%; }

/* Professional registration and legal pages */
.professional-page,
.legal-page { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.professional-page { padding: 64px 0 0; }
.professional-hero { text-align: center; max-width: 760px; margin: 0 auto 42px; }
.professional-hero h1 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -2px; color: var(--ink); margin: 0 0 18px; }
.professional-hero > p:last-child { color: #6c7f9e; font-size: 15px; margin: 0 auto; max-width: 620px; }
.professional-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 48px; }
.professional-benefits .professional-card { padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(20,70,130,.06); }
.professional-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #eaf4ff; font-size: 24px; margin-bottom: 14px; }
.professional-benefits h2 { font-size: 17px; margin: 0 0 8px; color: var(--ink); }
.professional-benefits p { color: #71829d; font-size: 12px; margin: 0; }
.professional-form-section { max-width: 720px; margin: 0 auto 70px; padding: 34px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 14px 38px rgba(20,70,130,.07); }
.professional-form-section h2 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; margin: 0 0 26px; color: var(--ink); }
.professional-form { display: grid; gap: 9px; }
.professional-form label { color: var(--ink); font-size: 12px; font-weight: 800; margin-top: 7px; }
.professional-form input,
.professional-form select,
.professional-form textarea { width: 100%; min-height: 46px; border: 1px solid #d8e5f4; border-radius: 12px; padding: 12px 14px; outline: none; background: #fbfdff; color: var(--ink); font: inherit; font-size: 13px; }
.professional-form textarea { min-height: 125px; resize: vertical; }
.professional-form input:focus,
.professional-form select:focus,
.professional-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(17,103,232,.10); }
.professional-form button { min-height: 48px; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 900; padding: 13px 18px; margin-top: 14px; }
.professional-success { color: #078b4e; background: #e5faed; border-radius: 10px; padding: 12px; font-size: 12px; }
.legal-page { max-width: 820px; padding: 60px 0; }
.legal-page h1 { font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 35px 0 20px; }
.legal-page h2 { font-size: 21px; margin: 28px 0 8px; }
.legal-page p { color: #5f7394; font-size: 14px; line-height: 1.8; }

/* Large tablets and iPads in landscape */
@media (max-width: 1199px) {
  .header-inner, .hero, .trust-strip { max-width: 100%; }
  .header-inner { padding-left: 20px; padding-right: 20px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero h1 { font-size: clamp(42px, 5vw, 52px); }
  .search-section, .feature-banner, .ai-section, .contact-section, .urgency-section { max-width: calc(100% - 40px); }
  .content-section { max-width: 100%; }
  .service-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .professionals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* iPad portrait / tablets */
@media (max-width: 900px) {
  .nav { gap: 14px; }
  .nav a { font-size: 11px; }
  .hero { padding-top: 30px; }
  .hero-modern-visual { min-width: 0; }
  .hero-modern-visual img { width: 100%; }
  .search-heading { align-items: flex-start; }
  .search-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search-button { min-height: 48px; grid-column: 1 / -1; }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 34px; padding-right: 34px; }
  .steps-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-card { gap: 24px; padding-left: 32px; padding-right: 32px; }
  .ai-orb { flex: 0 0 170px; width: 170px; height: 170px; }
  .contact-section { padding-left: 30px; padding-right: 30px; }
  .professional-page { padding-top: 45px; }
}

/* Phones and narrow tablets */
@media (max-width: 760px) {
  .professional-page, .legal-page { width: min(100% - 32px, 720px); }
  .header-inner { padding-left: 16px; padding-right: 16px; }
  .logo { font-size: 28px; }
  .hero { grid-template-columns: 1fr; padding-left: 18px; padding-right: 18px; }
  .hero-modern-copy { padding-bottom: 20px; }
  .hero-modern-visual { height: auto; min-height: 260px; }
  .hero-modern-visual img { max-height: 300px; }
  .hero-floating-card { right: 2%; bottom: 10px; max-width: 90%; }
  .search-section, .feature-banner, .ai-section, .contact-section, .urgency-section { max-width: none; margin-left: 16px; margin-right: 16px; }
  .search-section { padding-left: 16px; padding-right: 16px; }
  .search-box { grid-template-columns: 1fr; }
  .search-button { grid-column: auto; width: 100%; }
  .trust-strip { grid-template-columns: 1fr 1fr; padding-left: 12px; padding-right: 12px; }
  .trust-strip > div { padding-left: 10px; padding-right: 10px; }
  .content-section { padding-left: 16px; padding-right: 16px; }
  .service-categories, .professionals { grid-template-columns: 1fr 1fr; }
  .professional-benefits { grid-template-columns: 1fr; gap: 14px; }
  .professional-form-section { padding: 24px 18px; border-radius: 20px; }
  .feature-banner { display: block; padding: 30px 22px 0; }
  .feature-banner img { margin-top: 20px; }
  .steps-container { grid-template-columns: 1fr 1fr; }
  .ai-card { display: block; padding: 28px 20px; }
  .ai-orb { margin: 26px auto 0; }
  .contact-section { display: block; padding: 26px 20px; }
  .contact-buttons { margin-top: 18px; }
  .footer-container { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-brand, .footer-newsletter { grid-column: 1 / -1; }
  .booking-box, .profile-modal-content { width: calc(100% - 24px); padding: 23px 18px; border-radius: 18px; }
}

/* Small phones */
@media (max-width: 480px) {
  .top-ribbon { min-height: 32px; height: auto; padding: 7px 10px; }
  .hero h1 { font-size: 34px; letter-spacing: -1.5px; }
  .hero p { font-size: 13px; }
  .hero-actions, .hero-actions .btn { width: 100%; }
  .hero-actions .btn { min-height: 46px; }
  .search-heading h2, .section-title-row h2 { font-size: 24px; }
  .service-categories, .professionals, .steps-container { grid-template-columns: 1fr; }
  .service-photo { height: 110px; }
  .professional-actions { flex-direction: column; }
  .profile-button, .book-button { width: 100%; min-height: 42px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip > div { border-right: 0; }
  .feature-banner h2, .ai-card h2, .contact-section h2 { font-size: 24px; }
  .urgency-section { padding: 24px 18px; }
  .availability { display: grid; grid-template-columns: 1fr 1fr; }
  .availability-btn { width: 100%; }
  .footer-container { grid-template-columns: 1fr; }
  .footer-brand, .footer-newsletter { grid-column: auto; }
  .footer-bottom { text-align: center; }
  .professional-page { padding-top: 32px; }
  .professional-form-section { margin-bottom: 42px; }
  .professional-form input, .professional-form select, .professional-form textarea { font-size: 16px; } /* prevents iOS zoom */
}

/* Very wide desktop: keep content readable and centered */
@media (min-width: 1440px) {
  .header-inner, .hero, .trust-strip { max-width: 1320px; }
  .hero h1 { font-size: 58px; }
  .search-section, .content-section, .feature-banner, .ai-section, .contact-section, .urgency-section { max-width: 1240px; }
}

/* =========================================================
   DISPON FINAL RESPONSIVE POLISH
   Mobile-first safety layer for phones, iPad and desktop
   ========================================================= */
:root {
  --container: 1240px;
  --gutter: clamp(16px, 3vw, 32px);
  --focus: 0 0 0 4px rgba(17,103,232,.16);
}

img, svg, video { max-width: 100%; height: auto; }
body { overflow-x: hidden; }
main, section, header, footer, article, aside { min-width: 0; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(18,184,106,.55);
  outline-offset: 3px;
}

/* Desktop proportions */
@media (min-width: 1200px) {
  .header-inner, .hero, .trust-strip, .content-section { width: min(100% - 48px, var(--container)); }
  .header-inner { padding-left: 0; padding-right: 0; }
  .hero { padding-left: 0; padding-right: 0; }
  .hero-modern-copy { max-width: 620px; }
  .search-section, .feature-banner, .ai-section, .contact-section, .urgency-section { width: min(100% - 64px, 1160px); }
}

/* iPad landscape and medium laptops */
@media (min-width: 901px) and (max-width: 1199px) {
  .header-inner { gap: 16px; }
  .nav { gap: 12px; }
  .nav a { font-size: 11px; }
  .header-actions .city-pill { display: none; }
  .hero h1 { font-size: clamp(40px, 5vw, 50px); }
  .service-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* iPad portrait: use comfortable two-column layouts */
@media (min-width: 601px) and (max-width: 900px) {
  .header-inner { min-height: 68px; }
  .nav { gap: 12px; }
  .nav a { padding-top: 22px; padding-bottom: 19px; }
  .header-actions .city-pill { display: none; }
  .hero { min-height: 0; }
  .hero-modern-visual { min-height: 360px; }
  .hero-modern-visual img { max-height: 360px; }
  .search-section { margin-top: 18px; }
  .service-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .professionals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .professional-card { min-width: 0; }
  .feature-banner img { align-self: end; }
}

/* Phones: eliminate cramped controls and accidental overflow */
@media (max-width: 760px) {
  .top-ribbon { text-align: center; line-height: 1.35; }
  .site-header { position: sticky; }
  .header-inner { min-height: 64px; gap: 12px; }
  .logo { flex: 0 0 auto; }
  .header-actions { margin-left: auto; }
  .header-actions .city-pill { display: none; }
  .login-pill { padding: 9px 11px; font-size: 11px; }
  .mobile-menu-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
  .mobile-menu-toggle:hover { background: #edf5ff; }
  .nav {
    position: absolute;
    top: 100%; left: 12px; right: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(16,38,90,.16);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 14px; border: 0; border-radius: 10px; font-size: 13px; }
  .nav a:hover, .nav a.active { background: #edf5ff; border: 0; }
  .hero { padding-top: 24px; }
  .hero:before { inset: 38% 0 0; border-radius: 30px 30px 0 0; }
  .hero h1 { max-width: 620px; }
  .hero-modern-visual { min-height: 230px; margin-top: 6px; }
  .hero-modern-visual img { max-height: 280px; }
  .hero-scribble { top: 8px; left: 2%; font-size: 17px; }
  .hero-floating-card { font-size: 11px; padding: 11px 13px 11px 42px; }
  .search-section { margin-top: 12px; border-radius: 18px; }
  .search-heading { display: block; }
  .search-heading p { margin-top: 9px; }
  .search-field { min-height: 58px; }
  .search-button { min-height: 52px; }
  .trust-strip { gap: 8px; }
  .trust-strip > div { min-width: 0; }
  .section-title-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .text-link { white-space: normal; }
  .service-card, .professional-card { min-width: 0; }
  .service-card-body { padding: 13px; }
  .professional-top { align-items: flex-start; }
  .professional-name { overflow-wrap: anywhere; }
  .professional-info { line-height: 1.55; }
  .feature-banner { border-radius: 20px; }
  .feature-banner .btn { width: 100%; }
  .contact-buttons, .contact-buttons .btn { width: 100%; }
  .contact-buttons { display: grid; gap: 10px; }
  .booking-box, .profile-modal-content { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .booking-form, #booking-form { min-width: 0; }
  .booking-submit { min-height: 48px; width: 100%; }
  .footer-column a, .footer-column p { overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  .logo { font-size: 25px; }
  .login-pill { display: none; }
  .hero h1 { font-size: 31px; }
  .hero p { font-size: 13px; }
  .service-categories, .professionals, .steps-container { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip > div { padding: 10px 12px; }
  .availability { grid-template-columns: 1fr; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   DISPON CONTACT PAGE — responsive production layout
   Fixes form overflow and default browser styling on mobile.
   ========================================================= */
.contact-page {
  width: min(100% - 40px, 1160px);
  margin: 0 auto;
  padding: clamp(42px, 6vw, 84px) 0 clamp(56px, 8vw, 96px);
}
.contact-page > h1 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', Manrope, Arial, sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: -2px;
}
.contact-intro {
  max-width: 650px;
  margin: 0 0 34px;
  color: #627797;
  font-size: clamp(15px, 2vw, 18px);
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
}
.contact-card,
.contact-form {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.contact-card { padding: clamp(24px, 3vw, 36px); }
.contact-card h2,
.contact-form h2 {
  margin: 0 0 24px;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', Manrope, Arial, sans-serif;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.15;
  letter-spacing: -1px;
}
.contact-card p {
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid #edf2f8;
  color: #294675;
  font-size: clamp(15px, 1.8vw, 18px);
  overflow-wrap: anywhere;
}
.contact-card p:last-child { border-bottom: 0; }
.contact-card .contact-note {
  margin-top: 14px;
  padding: 16px 0 0;
  border-bottom: 0;
  color: #71829d;
  font-size: 14px;
}
.contact-form { padding: clamp(24px, 3vw, 38px); }
.contact-form h2 { margin-bottom: 26px; }
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}
.form-field { min-width: 0; }
.form-field-full { grid-column: 1 / -1; }
.form-field label {
  display: block;
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.form-field label span {
  color: #7b8da8;
  font-weight: 600;
}
.form-field input,
.form-field textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #d6e2f0;
  border-radius: 12px;
  background: #fbfdff;
  color: var(--ink);
  padding: 13px 14px;
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #9aa9bd; }
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: var(--focus);
}
.contact-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 22px;
  padding: 13px 20px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.contact-submit:hover { background: #0d58c9; transform: translateY(-1px); }
.contact-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.contact-success {
  margin: 16px 0 0;
  padding: 13px 15px;
  border-radius: 10px;
  background: #e8f9ef;
  color: #087b45;
  font-size: 14px;
  font-weight: 700;
}
.contact-success.error {
  background: #fff0f0;
  color: #b42318;
}
.header-container {
  width: min(100% - 40px, 1160px);
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-card { order: 1; }
  .contact-form { order: 2; }
}
@media (max-width: 600px) {
  .contact-page { width: min(100% - 32px, 560px); padding-top: 34px; }
  .contact-page > h1 { font-size: clamp(32px, 9vw, 42px); letter-spacing: -1.2px; }
  .contact-intro { font-size: 15px; margin-bottom: 24px; }
  .contact-card, .contact-form { border-radius: 18px; padding: 22px 18px; }
  .contact-form-grid { grid-template-columns: 1fr; gap: 16px; }
  .form-field-full { grid-column: auto; }
  .contact-card h2, .contact-form h2 { font-size: 24px; margin-bottom: 20px; }
  .contact-card p { font-size: 16px; }
  .contact-submit { min-height: 52px; }
  .header-container { width: min(100% - 32px, 560px); min-height: 64px; }
}

/* =========================================================
   DISPON BOOKING MODAL — STRUCTURED RESPONSIVE FORM FIX
   ========================================================= */
.booking-box {
  width: min(100% - 32px, 680px);
  max-width: 680px;
  padding: clamp(22px, 3vw, 34px);
  overflow-x: hidden;
}
.booking-box .booking-header {
  padding-right: 36px;
}
.booking-box .booking-header h2 {
  line-height: 1.2;
}
#booking-form.booking-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
  align-items: start;
}
#booking-form .booking-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
#booking-form .booking-field label {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 900;
  color: var(--ink);
}
#booking-form .booking-field input,
#booking-form .booking-field select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #cfe0f3;
  border-radius: 12px;
  background: #fbfdff;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  appearance: auto;
}
#booking-form .booking-field input:focus,
#booking-form .booking-field select:focus {
  border-color: var(--blue);
  box-shadow: var(--focus);
  outline: none;
  background: #fff;
}
#booking-form .booking-submit {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 50px;
  margin-top: 2px;
}
@media (max-width: 600px) {
  .booking-box {
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
    padding: 22px 16px;
    border-radius: 22px;
  }
  #booking-form.booking-form {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  #booking-form .booking-field label {
    font-size: 13px;
  }
  #booking-form .booking-field input,
  #booking-form .booking-field select {
    min-height: 48px;
    font-size: 16px;
  }
  #booking-form .booking-submit {
    min-height: 50px;
    font-size: 14px;
  }
}
/* DISPON — definitive booking modal layout fix */
#booking-modal .booking-box {
  box-sizing: border-box !important;
  width: min(680px, calc(100vw - 32px)) !important;
  max-width: 680px !important;
  max-height: min(760px, calc(100dvh - 32px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#booking-modal #booking-form,
#booking-modal form#booking-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
#booking-modal #booking-form .booking-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
#booking-modal #booking-form .booking-field label {
  display: block !important;
  width: 100% !important;
  min-height: 18px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#booking-modal #booking-form .booking-field input,
#booking-modal #booking-form .booking-field select {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 11px 13px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  border: 1px solid #cfe0f3 !important;
  border-radius: 12px !important;
  background: #fbfdff !important;
}
#booking-modal #booking-form .booking-submit {
  grid-column: 1 / -1 !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  margin: 2px 0 0 !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}
@media (max-width: 760px) {
  #booking-modal .booking-box {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 22px 16px !important;
    border-radius: 22px !important;
  }
  #booking-modal #booking-form,
  #booking-modal form#booking-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  #booking-modal #booking-form .booking-field label {
    font-size: 14px !important;
  }
  #booking-modal #booking-form .booking-field input,
  #booking-modal #booking-form .booking-field select {
    min-height: 50px !important;
    font-size: 16px !important;
  }
  #booking-modal #booking-form .booking-submit {
    font-size: 15px !important;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  #booking-modal .booking-box {
    width: min(680px, calc(100vw - 40px)) !important;
  }
}

/* DISPON PHASE 1B — mobile stability hardening */
html, body { overflow-x: hidden; }
.contact-form { min-width: 0; }
.contact-form > label { display:block; margin-top:14px; font-size:12px; font-weight:800; color:var(--ink); }
.contact-form > input, .contact-form > textarea { display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.contact-form .contact-submit { width:100%; max-width:100%; }
@media (max-width: 600px) {
  .contact-page { overflow-x:hidden; }
  .contact-form { width:100%; }
  .contact-form > label { margin-top:12px; font-size:13px; }
  .contact-form > input, .contact-form > textarea { min-height:48px; font-size:16px; }
  .contact-form > textarea { min-height:140px; }
  .contact-form .contact-submit { min-height:52px; padding:13px 16px; white-space:normal; }
}

/* DISPON PHASE 1C — responsive typography and readability */
:root {
  --text-base: clamp(15px, 0.25vw + 14px, 17px);
  --text-small: clamp(13px, 0.18vw + 12px, 15px);
  --text-label: clamp(12px, 0.15vw + 11px, 14px);
}

body {
  font-size: var(--text-base);
  line-height: 1.6;
}

.top-ribbon { font-size: clamp(12px, 0.2vw + 11px, 14px); }
.nav a { font-size: clamp(13px, 0.2vw + 12px, 15px); }
.city-pill, .login-pill { font-size: clamp(13px, 0.2vw + 12px, 15px); }
.hero-eyebrow { font-size: clamp(13px, 0.2vw + 12px, 15px); }
.hero p { font-size: clamp(16px, 0.25vw + 14px, 18px); line-height: 1.65; }
.hero-trust-row { font-size: clamp(12px, 0.2vw + 11px, 14px); }
.btn { font-size: clamp(14px, 0.2vw + 13px, 16px); }
.search-heading p { font-size: var(--text-small); line-height: 1.55; }
.section-kicker { font-size: clamp(12px, 0.2vw + 11px, 14px); }
.search-field label { font-size: var(--text-label); }
.search-field input, .search-field select { font-size: clamp(15px, 0.2vw + 14px, 17px); }
.popular-searches { font-size: var(--text-label); }
.popular-searches button { font-size: var(--text-label); }
.trust-strip strong { font-size: clamp(14px, 0.2vw + 13px, 16px); }
.trust-strip small { font-size: var(--text-small); }
.text-link { font-size: clamp(13px, 0.2vw + 12px, 15px); }
.service-card h3 { font-size: clamp(16px, 0.25vw + 14px, 18px); }
.service-card p { font-size: var(--text-small); line-height: 1.5; }
.service-button { font-size: clamp(13px, 0.2vw + 12px, 15px); }
.results-count { font-size: var(--text-small); }
.professional-name { font-size: clamp(17px, 0.25vw + 15px, 19px); }
.professional-job { font-size: var(--text-small); }
.verified { font-size: clamp(11px, 0.15vw + 10px, 13px); }
.professional-info { font-size: var(--text-small); }
.profile-button, .book-button { font-size: clamp(13px, 0.2vw + 12px, 15px); }
.feature-banner p { font-size: clamp(15px, 0.25vw + 14px, 17px); }
.footer-column h3, .footer-newsletter h3 { font-size: clamp(14px, 0.2vw + 13px, 16px); }
.footer-column a { font-size: var(--text-small); }
.footer-newsletter small { font-size: var(--text-label); }
.footer-bottom { font-size: var(--text-label); }
.booking-header h2 { font-size: clamp(22px, 0.5vw + 20px, 28px); }
.booking-header p { font-size: var(--text-small); }
.booking-box label { font-size: var(--text-label); }
.booking-box input, .booking-box select { font-size: clamp(15px, 0.2vw + 14px, 17px); min-height: 46px; }
.booking-submit { font-size: clamp(15px, 0.2vw + 14px, 17px); }

@media (min-width: 761px) and (max-width: 1100px) {
  body { font-size: 16px; }
  .hero h1 { font-size: clamp(42px, 5vw, 52px); }
  .content-section { padding-top: 54px; padding-bottom: 54px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; line-height: 1.6; }
  .nav a { font-size: 15px; }
  .hero h1 { font-size: clamp(34px, 9vw, 42px); line-height: 1.1; }
  .hero p { font-size: 16px; }
  .hero-eyebrow { font-size: 13px; }
  .btn { min-height: 48px; font-size: 15px; }
  .search-heading h2 { font-size: clamp(25px, 7vw, 32px); }
  .search-heading p { font-size: 15px; }
  .search-field label { font-size: 13px; }
  .search-field input, .search-field select { font-size: 16px; min-height: 44px; }
  .search-button { min-height: 50px; font-size: 16px; }
  .popular-searches { font-size: 13px; }
  .popular-searches button { font-size: 13px; min-height: 40px; }
  .section-title-row h2 { font-size: clamp(25px, 7vw, 31px); }
  .service-card h3 { font-size: 16px; }
  .service-card p { font-size: 14px; min-height: auto; }
  .service-button { font-size: 14px; }
  .professional-name { font-size: 18px; }
  .professional-job { font-size: 14px; }
  .professional-info { font-size: 13px; }
  .profile-button, .book-button { font-size: 14px; min-height: 46px; }
  .feature-banner p { font-size: 16px; }
  .footer-column h3, .footer-newsletter h3 { font-size: 15px; }
  .footer-column a { font-size: 14px; }
  .footer-newsletter small { font-size: 12px; }
  .footer-bottom { font-size: 12px; }
  .booking-box { padding: 24px 20px; }
  .booking-header h2 { font-size: 23px; }
  .booking-header p { font-size: 14px; }
  .booking-box label { font-size: 13px; }
  .booking-box input, .booking-box select { font-size: 16px; min-height: 48px; }
  .booking-submit { min-height: 50px; font-size: 16px; }
}

@media (max-width: 420px) {
  .top-ribbon { font-size: 12px; }
  .hero p { font-size: 15px; }
  .service-card-body { padding: 13px; }
  .service-card h3 { font-size: 15px; }
  .service-card p { font-size: 13px; }
  .professional-info { font-size: 12px; }
  .booking-box { width: calc(100% - 20px); padding: 22px 16px; }
}

/* DISPON PHASE 1D — Global readable typography, fully responsive */
:root {
  --text-size-base: clamp(15px, 0.22vw + 14px, 17px);
  --text-size-small: clamp(13px, 0.18vw + 12px, 15px);
  --text-size-label: clamp(13px, 0.16vw + 12px, 14px);
  --text-size-button: clamp(14px, 0.2vw + 13px, 16px);
}

body {
  font-size: var(--text-size-base);
  line-height: 1.6;
}

.top-ribbon {
  font-size: clamp(12px, 0.2vw + 11px, 14px);
  line-height: 1.35;
}

.logo,
.footer-logo {
  font-size: clamp(30px, 2.2vw, 38px);
}

.logo small {
  font-size: clamp(9px, 0.15vw + 8px, 11px);
}

.nav a,
.city-pill,
.login-pill {
  font-size: clamp(13px, 0.18vw + 12px, 15px);
}

.hero-eyebrow,
.section-kicker {
  font-size: clamp(13px, 0.2vw + 12px, 15px);
}

.hero h1 {
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.08;
}

.hero p {
  font-size: clamp(16px, 0.35vw + 14px, 19px);
  line-height: 1.65;
}

.btn,
.search-button,
.service-button,
.profile-button,
.book-button,
.contact-submit,
.professional-form button {
  font-size: var(--text-size-button);
}

.hero-trust-row {
  font-size: clamp(13px, 0.2vw + 12px, 15px);
}

.hero-floating-card {
  font-size: clamp(13px, 0.2vw + 12px, 15px);
}

.search-heading h2,
.section-title-row h2,
.section-heading-center h2,
.feature-banner h2,
.urgency-section h2,
.ai-card h2,
.contact-section h2 {
  font-size: clamp(27px, 2.5vw, 38px);
}

.search-heading p,
.feature-banner p,
.ai-card p,
.contact-section p,
.section-description {
  font-size: clamp(15px, 0.28vw + 14px, 18px);
  line-height: 1.65;
}

.search-field label,
.contact-form label,
.professional-form label,
.booking-form label {
  font-size: var(--text-size-label);
}

.search-field input,
.search-field select,
.search-field textarea,
.contact-form input,
.contact-form select,
.contact-form textarea,
.professional-form input,
.professional-form select,
.professional-form textarea,
.booking-form input,
.booking-form select,
.booking-form textarea {
  font-size: clamp(15px, 0.22vw + 14px, 17px);
}

.popular-searches,
.popular-searches button {
  font-size: clamp(13px, 0.18vw + 12px, 15px);
}

.trust-strip strong {
  font-size: clamp(14px, 0.2vw + 13px, 16px);
}

.trust-strip small {
  font-size: clamp(13px, 0.18vw + 12px, 15px);
}

.service-card h3 {
  font-size: clamp(17px, 0.3vw + 15px, 20px);
}

.service-card p {
  font-size: clamp(14px, 0.2vw + 13px, 16px);
  line-height: 1.55;
}

.professional-name {
  font-size: clamp(17px, 0.3vw + 15px, 20px);
}

.professional-job,
.professional-info,
.results-count {
  font-size: clamp(13px, 0.2vw + 12px, 15px);
}

.verified {
  font-size: clamp(11px, 0.16vw + 10px, 13px);
}

.steps-container h3,
.step-card h3 {
  font-size: clamp(20px, 0.5vw + 17px, 26px);
}

.steps-container p,
.step-card p {
  font-size: clamp(15px, 0.25vw + 14px, 18px);
  line-height: 1.6;
}

.footer-container,
.footer-container p,
.footer-container a,
.footer-container li,
.footer-newsletter input,
.footer-newsletter button {
  font-size: clamp(14px, 0.2vw + 13px, 16px);
}

.footer-container h3,
.footer-container h4 {
  font-size: clamp(18px, 0.35vw + 16px, 22px);
}

.reservation-field,
.reservation-field .field-label,
.reservation-field .field-value,
.no-results,
.no-reservations {
  font-size: clamp(15px, 0.25vw + 14px, 18px);
  line-height: 1.65;
}

.professional-hero > p:last-child,
.professional-benefits p,
.professional-success,
.legal-page p {
  font-size: clamp(15px, 0.22vw + 14px, 17px);
  line-height: 1.7;
}

.professional-benefits h2 {
  font-size: clamp(19px, 0.3vw + 17px, 23px);
}

.legal-page h2 {
  font-size: clamp(22px, 0.4vw + 20px, 28px);
}

@media (max-width: 900px) {
  body {
    font-size: 16px;
  }

  .nav a,
  .city-pill,
  .login-pill {
    font-size: 14px;
  }

  .hero h1 {
    font-size: clamp(40px, 6vw, 54px);
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  .hero h1 {
    font-size: clamp(38px, 10vw, 48px);
    letter-spacing: -1.8px;
  }

  .hero p {
    font-size: 17px;
    line-height: 1.65;
  }

  .hero-eyebrow,
  .section-kicker {
    font-size: 14px;
  }

  .btn,
  .search-button,
  .service-button,
  .profile-button,
  .book-button,
  .contact-submit {
    font-size: 16px;
  }

  .search-heading h2,
  .section-title-row h2,
  .feature-banner h2,
  .ai-card h2,
  .contact-section h2 {
    font-size: clamp(27px, 7vw, 35px);
  }

  .search-heading p,
  .feature-banner p,
  .ai-card p,
  .contact-section p,
  .section-description {
    font-size: 16px;
  }

  .service-card h3 {
    font-size: 19px;
  }

  .service-card p {
    font-size: 15px;
    line-height: 1.55;
  }

  .professional-name {
    font-size: 19px;
  }

  .professional-job,
  .professional-info,
  .results-count {
    font-size: 14px;
  }

  .steps-container h3,
  .step-card h3 {
    font-size: 23px;
  }

  .steps-container p,
  .step-card p {
    font-size: 16px;
  }

  .footer-container,
  .footer-container p,
  .footer-container a,
  .footer-container li {
    font-size: 15px;
  }

  .reservation-field,
  .reservation-field .field-label,
  .reservation-field .field-value {
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: 37px;
  }

  .hero p {
    font-size: 16px;
  }

  .service-card h3 {
    font-size: 18px;
  }

  .service-card p {
    font-size: 15px;
  }

  .popular-searches,
  .popular-searches button {
    font-size: 14px;
  }
}

/* DISPON PHASE 1E — final readable responsive typography */
:root {
  --font-body: clamp(16px, 0.22vw + 15.2px, 17px);
  --font-paragraph: clamp(16px, 0.35vw + 15px, 18px);
  --font-small: clamp(14px, 0.2vw + 13.5px, 16px);
  --font-button: clamp(15px, 0.25vw + 14px, 17px);
}

body {
  font-size: var(--font-body);
  line-height: 1.6;
}

p,
li {
  font-size: var(--font-paragraph);
  line-height: 1.65;
}

small,
.text-small,
.muted,
.meta,
.card-meta,
.service-meta,
.footer-note {
  font-size: var(--font-small);
  line-height: 1.5;
}

h1 {
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 1.08;
}

h2 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
}

h3 {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.25;
}

h4 {
  font-size: clamp(17px, 1vw, 20px);
  line-height: 1.3;
}

button,
.btn,
a.btn,
input,
select,
textarea {
  font-size: var(--font-button);
}

input,
select,
textarea {
  line-height: 1.45;
}

label {
  font-size: clamp(14px, 0.2vw + 13.5px, 16px);
  line-height: 1.4;
}

.nav-links a,
.navbar a,
header a {
  font-size: clamp(14px, 0.25vw + 13.5px, 16px);
}

.service-card h3,
.service-card h4,
.category-card h3,
.category-card h4 {
  font-size: clamp(19px, 1.3vw, 22px);
}

.service-card p,
.category-card p,
.professional-card p {
  font-size: clamp(15px, 0.3vw + 14px, 17px);
}

footer,
footer a {
  font-size: clamp(14px, 0.25vw + 13.5px, 16px);
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  p,
  li {
    font-size: 16px;
    line-height: 1.6;
  }

  h1 {
    font-size: clamp(38px, 10vw, 44px);
  }

  h2 {
    font-size: clamp(28px, 8vw, 34px);
  }

  h3 {
    font-size: clamp(19px, 5vw, 21px);
  }

  button,
  .btn,
  a.btn {
    font-size: 16px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}


/* DISPON Clean Professional V0.2 refinements */
.top-ribbon { display: none !important; }
.site-header { box-shadow: 0 4px 18px rgba(20, 70, 130, .04); }
.logo small { font-size: 9px; letter-spacing: .01em; white-space: nowrap; }
.nav { gap: 20px; }
.nav a { font-size: 11px; }
@media (max-width: 1050px) { .nav { gap: 12px; } .nav a { font-size: 10px; } }
@media (max-width: 760px) {
  .logo { font-size: 30px; }
  .logo small { font-size: 8px; }
  .nav { top: 68px; }
}

/* =========================================================
   DISPON V0.3 — Unified premium UI polish
   Visual-only layer: preserves existing HTML/JS behavior.
   ========================================================= */
:root{
  --blue:#1167e8;
  --blue-dark:#092d67;
  --ink:#10265a;
  --green:#12b86a;
  --mint:#eafff3;
  --bg:#f6faff;
  --line:#dce8f7;
  --radius:20px;
  --shadow-soft:0 12px 34px rgba(22,75,150,.08);
  --shadow-card:0 16px 38px rgba(22,75,150,.10);
}
body{background:linear-gradient(180deg,#f8fbff 0%,#f4f8fd 100%);color:var(--ink);-webkit-font-smoothing:antialiased}
.site-header{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,232,247,.85);box-shadow:0 5px 22px rgba(16,54,110,.045)}
.header-inner{min-height:82px}
.logo{font-size:34px;letter-spacing:-2.4px}
.logo small{font-size:9px;letter-spacing:.02em;margin-top:10px;color:#38547e}
.nav a{font-size:12px;padding:30px 0 26px;transition:color .2s,border-color .2s}
.nav a.active,.nav a:hover{color:var(--blue)}
.city-pill,.login-pill{border-radius:12px;min-height:42px}
.login-pill{box-shadow:0 8px 20px rgba(17,103,232,.18)}
.hero{min-height:540px;padding-top:54px;padding-bottom:18px}
.hero:before{background:radial-gradient(circle at 70% 35%,#e2f2ff 0,#eaf6ff 44%,transparent 72%);inset:0 0 0 36%;border-radius:0 0 0 140px}
.hero-eyebrow{background:#eaf4ff;border:1px solid #d7eaff;padding:10px 15px;font-size:11px;letter-spacing:.02em;box-shadow:0 5px 15px rgba(17,103,232,.05)}
.hero h1{font-size:clamp(42px,4.5vw,61px);letter-spacing:-3px;line-height:1.02;margin-bottom:22px}
.hero p{font-size:16px;line-height:1.75;color:#5d7191;max-width:500px}
.btn,.search-button,.booking-submit,.professional-form button{min-height:48px;border-radius:13px;padding:13px 20px;letter-spacing:-.1px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover,.search-button:hover,.booking-submit:hover,.professional-form button:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(17,103,232,.18)}
.btn-outline{border-color:#c7dbf5;background:#fff}
.hero-trust-row{font-size:11px;gap:22px;color:#607695}
.hero-modern-visual{height:480px}
.hero-modern-visual img{filter:drop-shadow(0 24px 34px rgba(20,70,130,.13))}
.hero-floating-card{border:1px solid #e5eef8;box-shadow:var(--shadow-card);border-radius:18px}
.search-section{margin-top:-22px;padding:36px 40px 30px;border:1px solid #e4edf8;box-shadow:0 18px 48px rgba(20,75,140,.12)}
.search-heading{gap:36px;margin-bottom:24px}
.search-heading h2{font-size:clamp(28px,3vw,36px);letter-spacing:-1.8px}
.search-heading p{font-size:13px;line-height:1.65}
.search-box{gap:12px;padding:10px;border-radius:18px;background:#f4f8fd}
.search-field{border-radius:13px;padding:11px 15px;min-height:64px;display:flex;flex-direction:column;justify-content:center}
.search-field label{font-size:10px;letter-spacing:.02em;color:#6d82a2}
.search-field input,.search-field select{font-size:14px;margin-top:3px}
.search-button{min-width:150px;font-size:13px}
.popular-searches{font-size:11px;margin-top:17px;gap:9px}
.popular-searches button{font-size:11px;padding:8px 14px;border-color:#d5e4f5;transition:.2s}
.popular-searches button:hover{border-color:#a8c9f1;transform:translateY(-1px)}
.trust-strip{max-width:1160px;margin:0 auto;background:transparent;padding:28px 0 22px}
.trust-strip>div{padding:10px 25px}
.trust-strip span{background:#e7f8ee;border:1px solid #d5f2e1}
.trust-strip strong{font-size:13px;line-height:1.35}
.trust-strip small{font-size:11px;margin-top:3px}
.content-section{padding-top:76px;padding-bottom:76px}
.section-kicker{font-size:10px;letter-spacing:1.5px;font-weight:900}
.section-title-row{margin-bottom:28px}
.section-title-row h2,.section-heading-center h2{font-size:clamp(27px,3vw,37px);letter-spacing:-1.8px}
.section-title-row p{color:#7083a0;line-height:1.6}
.text-link{font-size:12px;padding-bottom:5px;border-bottom:2px solid #cfe0f7}
.services-grid{gap:17px}
.service-card{border:1px solid #e0eaf6;border-radius:19px;box-shadow:var(--shadow-soft);transition:transform .25s,box-shadow .25s,border-color .25s}
.service-card:hover{border-color:#bcd6f6;box-shadow:var(--shadow-card)}
.service-photo{height:128px;font-size:51px}
.service-card-body{padding:17px 16px 18px}
.service-card h3{font-size:16px;letter-spacing:-.3px;margin-bottom:7px}
.service-card p{font-size:11px;line-height:1.55;min-height:35px;color:#71829e}
.service-button{font-size:11px;padding:5px 0;border-bottom:1px solid transparent}
.service-button:hover{border-color:#a8c9f1}
.professionals-section{padding-top:18px}
.professionals{gap:18px}
.professional-card{padding:21px;border-radius:20px;border-color:#e0eaf6;box-shadow:var(--shadow-soft)}
.professional-card:hover{border-color:#bdd7f6;box-shadow:var(--shadow-card)}
.professional-avatar{width:70px;height:70px;border-radius:19px}
.professional-name{font-size:16px;letter-spacing:-.3px}
.professional-job{font-size:12px}
.verified{font-size:10px;padding:4px 9px}
.professional-info{font-size:11px;padding:14px 0;margin:18px 0;border-color:#eaf0f7}
.profile-button,.book-button{min-height:43px;border-radius:11px;font-size:12px;transition:.2s}
.profile-button:hover{background:#e5f0ff}
.book-button:hover{background:#0d59ce}
.feature-banner{box-shadow:0 20px 50px rgba(9,45,103,.18);border-radius:27px;padding:54px 60px 0;background:linear-gradient(120deg,#092d67 0%,#1167e8 100%)}
.feature-banner h2{font-size:clamp(29px,3vw,40px);letter-spacing:-1.8px}
.feature-banner p{font-size:14px;line-height:1.8}
.how-it-works{padding-top:80px}
.section-heading-center p{color:#7083a0;font-size:14px}
.steps-container{gap:18px;margin-top:32px}
.step-card{background:#fff;border:1px solid #e2ebf6;border-radius:20px;padding:26px 22px;box-shadow:var(--shadow-soft);transition:.25s}
.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:#bfd8f6}
.step-number{color:#a5c4ec;font-size:12px;font-weight:900;letter-spacing:1px}
.step-icon{width:54px;height:54px;border-radius:17px;background:#eaf4ff;display:grid;place-items:center;font-size:25px;margin:17px 0 18px}
.step-card h3{font-size:17px;letter-spacing:-.4px}
.step-card p{font-size:12px;line-height:1.7;color:#71829e}
.urgency-section{border:1px solid #d8e9fb;box-shadow:var(--shadow-soft);border-radius:23px;padding:32px 38px;background:linear-gradient(110deg,#eef7ff,#fff)}
.urgency-section h2{font-size:clamp(24px,3vw,34px)}
.urgency-section p{color:#6d809e;font-size:13px}
.availability-btn{border:1px solid #d7e5f5;background:#fff;color:#42638e;border-radius:11px;padding:11px 14px;font-size:11px;font-weight:900;transition:.2s}
.availability-btn:hover,.availability-btn.active{background:#eaf4ff;border-color:#a9c9f2;color:var(--blue)}
.ai-section{margin-bottom:70px}
.ai-card{border-radius:25px;box-shadow:var(--shadow-card);background:linear-gradient(120deg,#eaf5ff,#f0fff7);border:1px solid #d9ebf8}
.ai-badge{display:inline-flex;background:#fff;border:1px solid #d6e7f7;color:var(--blue);border-radius:30px;padding:7px 12px;font-size:10px;font-weight:900}
.ai-card h2{font-size:clamp(26px,3vw,37px);letter-spacing:-1.7px}
.ai-card p{font-size:13px;line-height:1.75;color:#657b9b}
.ai-orb{box-shadow:0 18px 38px rgba(17,103,232,.15);border:7px solid rgba(255,255,255,.75)}
.reservations-section{padding-top:10px}
.reservations-intro{color:#7083a0;font-size:13px}
.admin-entry{margin-top:20px}
.contact-section{border-radius:24px;border:1px solid #d9e8f7;box-shadow:var(--shadow-soft);background:#fff;padding:38px 44px;margin-bottom:70px}
.contact-section h2{font-size:clamp(27px,3vw,36px);letter-spacing:-1.7px}
.contact-section p{color:#6d809e;font-size:13px;line-height:1.7}
.contact-buttons{gap:12px}
.site-footer{background:#092d67;color:#dceaff;border-top:5px solid #12b86a}
.footer-container{max-width:1160px;padding-top:60px;padding-bottom:45px;gap:35px}
.footer-logo{color:#fff;font-size:34px}
.footer-brand p,.footer-column p,.footer-column a,.footer-newsletter p{font-size:12px;line-height:1.8;color:#b8d0f0}
.footer-column h3,.footer-newsletter h3{font-size:13px;color:#fff;letter-spacing:.2px;margin-bottom:15px}
.footer-column a:hover{color:#fff}
.socials a{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);transition:.2s}
.socials a:hover{background:#1167e8}
.newsletter{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);border-radius:12px;overflow:hidden}
.newsletter input{background:transparent;color:#fff;padding:12px;border:0;outline:0}
.newsletter button{background:#12b86a;color:#fff;width:44px;font-size:18px}
.footer-bottom{max-width:1160px;border-top:1px solid rgba(255,255,255,.13);padding-top:20px;padding-bottom:24px;color:#a9c4e8;font-size:11px}
.footer-bottom a:hover{color:#fff}

/* Forms, tables, alerts and modal surfaces */
form{accent-color:var(--blue)}
input,select,textarea{border:1px solid #d6e4f4;border-radius:12px;background:#fbfdff;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
input:hover,select:hover,textarea:hover{border-color:#b9d2f1}
input:focus,select:focus,textarea:focus{border-color:var(--blue)!important;box-shadow:0 0 0 4px rgba(17,103,232,.10)!important;background:#fff;outline:0}
::placeholder{color:#9aabc2;opacity:1}
label{color:#28466f;font-weight:800}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #e0eaf6;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft);font-size:13px}
thead th{background:#eef6ff;color:#1c4c8c;text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:14px 16px;border-bottom:1px solid #d9e8f7}
tbody td{padding:14px 16px;border-bottom:1px solid #edf2f8;color:#536b8f}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#f8fbff}
.booking-modal,.profile-modal{backdrop-filter:blur(5px)}
.booking-box,.profile-modal-content{border:1px solid #dce8f7!important;border-radius:22px!important;box-shadow:0 25px 80px rgba(9,45,103,.22)!important}
.booking-close,.close-profile-modal{border-radius:50%;transition:.2s}
.booking-close:hover,.close-profile-modal:hover{background:#eaf4ff;color:var(--blue)}
.booking-field{gap:5px}
.booking-box input,.booking-box select{min-height:46px}
.booking-submit{width:100%}

@media(max-width:900px){
  .hero{min-height:auto;padding-top:38px}
  .hero h1{letter-spacing:-2.2px}
  .search-section{padding:30px 26px 26px}
  .feature-banner{padding:42px 34px 0}
  .trust-strip{padding-left:16px;padding-right:16px}
}
@media(max-width:760px){
  .header-inner{min-height:74px}
  .logo{font-size:30px}
  .logo small{font-size:8px;margin-top:9px}
  .mobile-menu-toggle{font-size:28px}
  .nav{top:74px;border-top:1px solid #e6eef8;padding:10px 18px 16px;border-radius:0 0 16px 16px}
  .nav a{font-size:13px;padding:14px 4px}
  .hero{padding-top:34px}
  .hero h1{font-size:clamp(38px,10vw,48px);letter-spacing:-2px}
  .hero p{font-size:14px;line-height:1.7}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-trust-row{gap:10px 16px;font-size:10px}
  .hero-modern-visual{min-height:285px}
  .search-section{margin-left:12px;margin-right:12px;padding:26px 16px 22px;border-radius:20px}
  .search-heading h2{font-size:29px}
  .search-heading p{font-size:12px}
  .search-box{padding:8px;border-radius:15px}
  .search-field{min-height:60px}
  .search-button{min-height:50px}
  .trust-strip{gap:0;padding-top:18px}
  .trust-strip>div{padding:13px 8px;grid-template-columns:34px 1fr;column-gap:8px}
  .trust-strip span{width:32px;height:32px;font-size:17px}
  .trust-strip strong{font-size:11px}
  .trust-strip small{font-size:10px}
  .content-section{padding-top:56px;padding-bottom:56px}
  .section-title-row h2,.section-heading-center h2{font-size:30px}
  .service-card{border-radius:16px}
  .service-photo{height:100px;font-size:42px}
  .service-card-body{padding:13px 12px 15px}
  .service-card h3{font-size:14px}
  .service-card p{font-size:10px}
  .professional-card{padding:17px}
  .feature-banner{border-radius:21px;margin-left:12px;margin-right:12px;padding:30px 22px 0}
  .feature-banner h2{font-size:29px}
  .feature-banner p{font-size:12px}
  .steps-container{gap:12px}
  .step-card{padding:20px 16px;border-radius:17px}
  .step-icon{width:45px;height:45px;font-size:21px;margin:13px 0}
  .step-card h3{font-size:15px}
  .step-card p{font-size:11px}
  .urgency-section,.contact-section{margin-left:12px;margin-right:12px;border-radius:20px;padding:27px 20px}
  .availability{gap:8px}
  .availability-btn{font-size:10px;padding:10px 11px}
  .ai-section{margin-left:12px;margin-right:12px}
  .ai-card{border-radius:21px}
  .contact-section{margin-bottom:52px}
  .footer-container{padding:45px 22px 32px}
  .footer-bottom{padding-left:22px;padding-right:22px}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

/* =========================================================
   DISPON V0.5 — Unified Professional Design System
   Visual-only layer: preserves existing HTML/JS behavior.
   ========================================================= */
:root{
  --blue:#1167e8;
  --blue-dark:#092d67;
  --ink:#10265a;
  --green:#12b86a;
  --bg:#f5f9ff;
  --line:#dce8f7;
  --radius:20px;
  --shadow-soft:0 8px 24px rgba(9,45,103,.06);
  --shadow-card:0 16px 38px rgba(9,45,103,.11);
}
html{scroll-padding-top:92px}
body{background:linear-gradient(180deg,#f8fbff 0%,#f3f7fd 100%);color:var(--ink);-webkit-font-smoothing:antialiased}
.site-header{background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid #e5edf7;box-shadow:0 5px 24px rgba(9,45,103,.055)}
.header-inner{min-height:82px;max-width:1280px;padding:0 28px}
.logo{font-size:34px;letter-spacing:-2.5px;line-height:.85}
.logo small{font-size:8px;letter-spacing:.25px;margin-top:10px;color:#49658c}
.nav{gap:21px}
.nav a{font-size:12px;padding:31px 0 26px;color:#385477}
.nav a.active,.nav a:hover{color:var(--blue);border-color:var(--green)}
.city-pill,.login-pill{border-radius:12px;min-height:42px}
.city-pill{background:#f7fbff;border-color:#d8e6f6}
.login-pill{box-shadow:0 8px 18px rgba(17,103,232,.18)}
.hero{max-width:1280px;min-height:535px;padding:56px 28px 30px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.hero:before{left:45%;background:radial-gradient(circle at 60% 30%,#e3f3ff 0,#eaf6ff 42%,transparent 72%);border-radius:0 0 0 160px}
.hero-modern-copy{padding:28px 0 52px}
.hero-eyebrow{background:#eaf5ff;border:1px solid #d9eaff;color:#1b5aa9;padding:9px 15px;margin-bottom:25px;letter-spacing:.1px}
.hero h1{font-size:clamp(44px,4.2vw,64px);letter-spacing:-3.4px;line-height:1.01;margin-bottom:22px}
.hero p{font-size:15px;line-height:1.8;color:#5c7192;max-width:510px}
.btn{min-height:46px;border-radius:12px;padding:13px 19px;font-size:12px;letter-spacing:.05px}
.btn-blue,.search-button,.book-button{background:linear-gradient(135deg,#1167e8,#0d56c9);box-shadow:0 10px 24px rgba(17,103,232,.2)}
.btn-outline{border:1px solid #c7dbf3;background:#fff;color:#1559b7}
.btn:hover,.search-button:hover,.book-button:hover{transform:translateY(-2px);filter:brightness(1.02)}
.hero-trust-row{gap:13px 22px;margin-top:28px;color:#5d7598}
.hero-modern-visual{height:500px}
.hero-modern-visual img{max-height:490px;filter:drop-shadow(0 26px 38px rgba(20,70,130,.16))}
.hero-floating-card{border:1px solid #e2edf8;box-shadow:0 18px 42px rgba(9,45,103,.12);border-radius:17px}
.search-section{max-width:1180px;margin:-24px auto 0;padding:35px 42px 28px;border:1px solid #e2ecf7;border-radius:24px;box-shadow:0 20px 55px rgba(9,45,103,.11)}
.search-heading{align-items:center;gap:36px;margin-bottom:23px}
.search-heading h2{font-size:32px;letter-spacing:-1.8px}
.search-heading p{font-size:12px;line-height:1.7;color:#6b809f}
.search-box{gap:12px;padding:10px;border-radius:18px;background:#f5f9fe;border-color:#dce9f7}
.search-field{min-height:64px;border-radius:13px;padding:10px 15px;border-color:#d6e5f5}
.search-field label{font-size:10px;letter-spacing:.15px;color:#6e83a2}
.search-field input,.search-field select{font-size:13px}
.search-button{min-height:64px;border-radius:13px;padding:0 28px}
.popular-searches{margin-top:16px;color:#5d7190}
.popular-searches button{padding:8px 14px;border-color:#d5e4f4;background:#fff;color:#315681;transition:.2s}
.popular-searches button:hover{background:#eaf4ff;border-color:#bcd7f4;color:var(--blue)}
.trust-strip{max-width:1280px;padding:28px 28px;background:transparent;border-bottom:0}
.trust-strip>div{padding:8px 25px;border-right:1px solid #dce7f4}
.trust-strip span{background:#e6f8ee;color:#087d49}
.trust-strip strong{font-size:12px;color:#1d3d69}
.trust-strip small{font-size:10px;color:#7890ae}
.content-section{max-width:1180px;padding:78px 28px}
.section-kicker{font-size:10px;letter-spacing:1.6px;color:#1765d1}
.section-title-row{margin-bottom:28px;align-items:center}
.section-title-row h2,.section-heading-center h2{font-size:32px;letter-spacing:-1.8px}
.text-link{font-size:12px;color:#1765d1}
.service-categories{grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{border-radius:19px;border-color:#e0eaf6;box-shadow:var(--shadow-soft);display:flex;min-height:170px;transition:transform .25s,box-shadow .25s,border-color .25s}
.service-card:hover{transform:translateY(-5px);border-color:#bcd6f6;box-shadow:var(--shadow-card)}
.service-photo{width:112px;height:auto;min-height:170px;flex:0 0 112px;font-size:45px}
.service-card-body{padding:22px 18px 19px;display:flex;flex-direction:column;align-items:flex-start}
.service-card h3{font-size:17px;letter-spacing:-.4px;margin-bottom:7px}
.service-card p{font-size:11px;line-height:1.6;min-height:38px;color:#71829e}
.service-button{margin-top:auto;padding:7px 0;font-size:11px}
.professionals-section{padding-top:20px}
.professionals{grid-template-columns:repeat(3,1fr);gap:18px}
.professional-card{border-radius:20px;border-color:#e0eaf6;padding:21px;box-shadow:var(--shadow-soft);transition:transform .25s,box-shadow .25s,border-color .25s}
.professional-card:hover{transform:translateY(-5px);border-color:#bdd7f6;box-shadow:var(--shadow-card)}
.professional-avatar{border-radius:17px;background:linear-gradient(135deg,#e2f1ff,#e5f9ee)}
.professional-name{font-size:16px;letter-spacing:-.2px}
.professional-info{margin:17px 0;padding:13px 0;border-color:#eaf0f7}
.profile-button,.book-button{min-height:40px;border-radius:11px}
.feature-banner{max-width:1180px;margin:20px auto 0;border-radius:26px;padding:55px 60px 0;min-height:370px;box-shadow:0 20px 50px rgba(9,45,103,.12)}
.feature-banner h2{font-size:36px;letter-spacing:-2px}
.feature-banner p{font-size:13px;line-height:1.8}
.section-heading-center{margin-bottom:35px}
.section-heading-center p{font-size:13px;color:#7085a3}
.steps-container{gap:18px}
.step-card{border-radius:19px;padding:27px 22px;border-color:#e0eaf6;box-shadow:var(--shadow-soft);transition:.2s}
.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:#c3daf4}
.step-icon{background:#e8f3ff;color:var(--blue)}
.step-card h3{font-size:15px}
.step-card p{font-size:11px;line-height:1.65}
.urgency-section{max-width:1180px;margin:0 auto 70px;padding:38px 42px;border-radius:24px;background:linear-gradient(135deg,#e9fff2,#f4fff8);border-color:#cbeedb;box-shadow:var(--shadow-soft)}
.urgency-section h2{font-size:30px;letter-spacing:-1.6px}
.availability-btn{border-radius:11px;padding:11px 14px;transition:.2s}
.ai-section{max-width:1180px;margin:0 auto 75px}
.ai-card{border-radius:26px;padding:48px 58px;border-color:#d9e8f8;box-shadow:var(--shadow-soft)}
.ai-card h2{font-size:31px;letter-spacing:-1.6px}
.reservations-section{padding-top:0}
.contact-section{max-width:1180px;margin:0 auto 78px;padding:42px 48px;border-radius:24px;border:1px solid #e1ebf6;box-shadow:var(--shadow-soft)}
.contact-section h2{font-size:30px;letter-spacing:-1.6px}
.site-footer{background:linear-gradient(145deg,#082b5b,#0a3976);padding-left:max(28px,calc((100% - 1180px)/2));padding-right:max(28px,calc((100% - 1180px)/2))}
.footer-container{max-width:1180px;padding-top:62px;padding-bottom:48px;gap:42px}
.footer-logo{font-size:34px}
.footer-column h3,.footer-newsletter h3{font-size:13px;letter-spacing:.1px}
.footer-column a,.footer-brand p,.footer-column p,.footer-newsletter p{font-size:11px;line-height:1.8}
.footer-bottom{font-size:10px}
.booking-box,.profile-modal-content{border-radius:24px!important;padding:32px!important}
.booking-header h2{font-size:23px;letter-spacing:-.8px}
.booking-box input,.booking-box select,.booking-box textarea{min-height:46px;border-radius:11px!important}
.booking-submit{min-height:48px;border-radius:11px!important}

@media(max-width:1050px){
  .nav{gap:14px}.header-actions{display:none}
  .hero{grid-template-columns:1fr 1fr}.hero h1{font-size:48px}
  .service-categories{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .header-inner{min-height:76px;padding:0 18px}.logo{font-size:31px}.logo small{font-size:7px}
  .mobile-menu-toggle{display:block;margin-left:auto;font-size:28px}
  .nav{top:76px;padding:12px 20px 18px;box-shadow:0 18px 35px rgba(9,45,103,.12)}
  .nav a{padding:13px 0;font-size:13px}
  .hero{display:block;padding:35px 18px 12px;min-height:0}.hero:before{left:0;top:35%;border-radius:0 0 0 80px}
  .hero-modern-copy{padding:12px 0 25px}.hero h1{font-size:clamp(40px,11vw,52px);letter-spacing:-2.5px}
  .hero p{font-size:14px;line-height:1.7}.hero-modern-visual{height:300px;min-height:0}.hero-modern-visual img{max-height:300px}
  .hero-scribble{font-size:17px;top:5px;left:4%}.hero-floating-card{right:0;bottom:12px;font-size:10px;padding:11px 14px 11px 42px}
  .search-section{margin:0 12px;padding:27px 16px 23px;border-radius:21px}.search-heading{display:block;margin-bottom:18px}.search-heading h2{font-size:29px}.search-heading p{margin-top:10px}
  .search-box{display:grid;grid-template-columns:1fr;gap:9px}.search-button{min-height:52px;width:100%}
  .trust-strip{grid-template-columns:repeat(2,1fr);padding:18px 12px;gap:8px}.trust-strip>div{padding:13px 8px;border-right:0}.trust-strip strong{font-size:11px}
  .content-section{padding:58px 18px}.section-title-row{align-items:flex-start;display:block}.section-title-row h2,.section-heading-center h2{font-size:29px}.section-title-row .text-link{display:inline-block;margin-top:12px}
  .service-categories{grid-template-columns:1fr;gap:12px}.service-card{min-height:126px}.service-photo{width:92px;min-height:126px;flex-basis:92px;font-size:38px}.service-card-body{padding:17px 15px}.service-card h3{font-size:16px}.service-card p{min-height:0;margin-bottom:5px}
  .professionals{grid-template-columns:1fr;gap:13px}.professional-card{padding:17px}.professional-actions{gap:8px}
  .feature-banner{display:block;margin:12px 12px 0;padding:34px 23px 0;min-height:0}.feature-banner h2{font-size:30px}.feature-banner img{margin-top:15px;max-height:250px}
  .steps-container{grid-template-columns:1fr 1fr;gap:12px}.step-card{padding:21px 16px}.step-card h3{font-size:14px}
  .urgency-section,.contact-section{margin-left:12px;margin-right:12px;border-radius:21px;padding:29px 20px;display:block}.urgency-section h2,.contact-section h2{font-size:28px}.availability{justify-content:flex-start;margin-top:20px}
  .ai-section{margin:0 12px 55px}.ai-card{padding:31px 22px;display:block;border-radius:21px}.ai-card h2{font-size:28px}.ai-orb{width:155px;height:155px;margin:25px auto 0}
  .contact-section{margin-bottom:58px}.contact-buttons{margin-top:18px}.site-footer{padding-left:22px;padding-right:22px}.footer-container{grid-template-columns:1fr 1fr;gap:30px;padding-top:45px}.footer-brand,.footer-newsletter{grid-column:1/-1}.footer-bottom{padding-left:0;padding-right:0}
  table{font-size:12px}.booking-box,.profile-modal-content{padding:25px!important;width:calc(100% - 24px)!important}
}

/* =========================================================
   Production hardening: password UX + keyboard focus
   ========================================================= */
.password-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#eef8f5,#eef3fb)}
.password-card{width:min(500px,100%);background:#fff;border:1px solid #dbe7e5;border-radius:24px;padding:34px;box-shadow:0 20px 60px rgba(16,42,67,.12)}
.password-card h1{margin:8px 0 10px;font-family:'Plus Jakarta Sans',Manrope,Arial,sans-serif;color:var(--ink)}
.password-card>p:not(.section-kicker){color:#52606d;margin:0 0 20px}
.password-card form{display:grid;gap:10px}
.password-card label{font-weight:800;color:var(--ink);margin-top:8px}
.password-card input{width:100%;padding:13px;border:1px solid #cbd5e1;border-radius:11px;font:inherit;box-sizing:border-box}
.password-card input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(17,103,232,.12)}
.password-card .btn{width:100%;border:0;margin-top:8px}
.password-card #message{min-height:24px;color:#b42318;font-weight:700}
.password-input-wrap{position:relative}.password-input-wrap input{padding-right:52px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:9px;background:#eef5ff;color:var(--blue);font-size:18px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(17,103,232,.32);outline-offset:2px}
@media(max-width:520px){.password-card{padding:25px;border-radius:18px}}
.form-privacy-note{font-size:11px;color:#6d7e9b;line-height:1.6;margin:8px 0}.form-privacy-note a{color:var(--blue);font-weight:800;text-decoration:underline}
button:disabled{cursor:not-allowed;opacity:.65}


/* Admin logout control — added in V5 security audit packaging. */
.logout-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.logout-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.legal-warning{margin:20px 0;padding:16px 18px;border:1px solid #e0a100;border-radius:12px;background:#fff8e1;color:#5b4500;line-height:1.55}.legal-page ul{padding-left:22px;line-height:1.65}.legal-page li{margin:7px 0}