:root{
--sd-page:#f8fafb;
--sd-surface:#ffffff;
--sd-border:#e7edf1;
--sd-ink:#15222b;
--sd-muted:#6b818f; --sd-brand:#FFB618; --sd-brand-600:#cc8f00; --sd-focus:rgba(255,182,24,.25); --sd-btn-primary:#eae4ce; --sd-btn-hover:#FFB618; --sd-btn-text:#15222b; --sd-star:#ffb400;
--sd-r:14px;
--sd-gap:22px;
--sd-pad:18px;
--sd-shadow:0 8px 24px rgba(23,43,77,.06), 0 2px 6px rgba(23,43,77,.04);
--sd-font:system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif; --bp-xl:1400px;
--bp-lg:1200px;
--bp-md:992px;
--bp-sm:768px;
--bp-xs:480px;
} *{box-sizing:border-box}
html,body{height:100%}
body{background:var(--sd-page); color:var(--sd-ink); font-family:var(--sd-font); line-height:1.55}
img{max-width:100%; height:auto}
a{color:var(--sd-brand); text-decoration:none}
a:hover{color:var(--sd-brand-600)} .container{max-width:1280px; margin:0 auto; padding:24px} .sd-card{
background:var(--sd-surface);
border:1px solid var(--sd-border);
border-radius:var(--sd-r);
box-shadow:var(--sd-shadow);
padding:var(--sd-pad);
} .sd-wrap{
display:grid;
grid-template-columns:270px 1fr;
gap:20px;
} .sd-filters .sd-card{position:sticky; top:24px; padding:16px 16px 18px}
.sd-filters h3{margin:0 0 10px; font-size:22px}
.sd-label{display:block; font-weight:700; color:var(--sd-muted); margin:14px 0 6px}
.sd-input,.sd-select select{
width:100%;
padding:10px 12px;
background:#fff;
border:1px solid var(--sd-border);
border-radius:10px;
outline:0;
}
.sd-input:focus,.sd-select select:focus{border-color:var(--sd-brand); box-shadow:0 0 0 3px var(--sd-focus)}
.sd-check{display:flex; align-items:center; gap:10px; margin:10px 0}
.sd-check input{width:18px; height:18px} .sd-results-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 12px}
.sd-results-head h2{margin:0; font-size:28px; font-weight:800}
.sd-sort{display:flex; align-items:center; gap:10px; color:var(--sd-muted); margin-right:8px}
.sd-sort select{padding:9px 36px 9px 14px; border:1px solid var(--sd-border); border-radius:10px; background:#fff}
.sd-sort select:focus{border-color:var(--sd-brand); box-shadow:0 0 0 3px var(--sd-focus)} .sd-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; align-items:stretch} .sd-company{
display:grid;
grid-template-columns:50px 1fr;
grid-template-areas:
"avatar head"
"excerpt excerpt"
"badge badge"
"actions actions";
column-gap:14px;
padding:18px;
border-radius:14px;
border:1px solid var(--sd-border);
background:#fff;
box-shadow:var(--sd-shadow);
align-items:center;
}
.sd-company .sd-avatar{grid-area:avatar; width:50px; height:50px; margin-top:-20px; border-radius:12px; background:var(--sd-brand); color:#fff; display:grid; place-items:center; font-weight:800; letter-spacing:.3px; box-shadow:0 6px 18px rgba(255,182,24,.25)} .sd-title{margin:0 0 6px; font-size:18px; font-weight:800; line-height:1.25}
.sd-title a{color:var(--sd-ink)}
.sd-title a:hover{color:var(--sd-brand)}
.sd-meta{margin:0 0 6px; color:var(--sd-muted); font-size:14px} .sd-stars{display:inline-flex; align-items:center; gap:2px}
.sd-stars .star{color:var(--sd-star); font-size:14px}
.sd-stars .star.half{color:#e0e6eb; position:relative}
.sd-stars .star.half::before{content:'★'; position:absolute; left:0; top:0; width:50%; overflow:hidden; color:var(--sd-star)}
.sd-rating{margin-left:6px}
.sd-reviews{margin-left:4px; color:var(--sd-muted)} .sd-company .sd-excerpt{grid-area:excerpt; margin:12px 0 12px; color:#2d3d48; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .sd-company .sd-badge{grid-area:badge; display:flex; align-items:center; gap:6px; background:#fff3d1; color:#7a5200; border:1px solid #f1e3bf; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:700; margin:2px 0 12px; justify-self:start; width:max-content; white-space:nowrap}
.sd-chip{display:flex; align-items:center; gap:6px; background:#fff3d1; color:#7a5200; border:1px solid #f1e3bf; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:700; margin:2px 0 12px; width:max-content; white-space:nowrap} .sd-company .sd-actions{grid-area:actions; display:flex; gap:12px; flex-wrap:nowrap; margin-top:0}
.sd-btn{display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--sd-border); background:#fff; color:var(--sd-ink); font-weight:700; transition:.18s; white-space:nowrap; flex:0 1 auto}
.sd-btn:hover{transform:translateY(-1px); box-shadow:var(--sd-shadow)}
.sd-btn.sd-primary{background:var(--sd-btn-primary); border-color:var(--sd-btn-primary); color:var(--sd-btn-text)}
.sd-btn.sd-primary:hover,.sd-btn.sd-primary:focus{background:var(--sd-btn-hover); border-color:var(--sd-btn-hover); color:var(--sd-btn-text); box-shadow:0 0 0 3px var(--sd-focus)}
.sd-btn.sd-primary:active{background:var(--sd-btn-primary); border-color:var(--sd-btn-primary)} .sd-pager{margin-top:22px}
.sd-pager ul{list-style:none; display:flex; gap:8px; padding:0; margin:0}
.sd-pager a,.sd-pager span{display:inline-block; padding:9px 12px; border:1px solid var(--sd-border); background:#fff; border-radius:10px; min-width:38px; text-align:center}
.sd-pager .current{background:var(--sd-btn-primary); border-color:var(--sd-btn-primary); color:var(--sd-btn-text)} .sd-single-hero{background:linear-gradient(180deg,#f7f2e5 0%, #efe4c7 100%); border:1px solid var(--sd-border); border-radius:16px; padding:22px; display:flex; gap:16px; align-items:flex-start; margin-bottom:20px}
.sd-avatar.lg{width:66px; height:66px; border-radius:14px; font-size:24px; color:#fff; background:var(--sd-brand); display:grid; place-items:center; font-weight:800; box-shadow:0 6px 18px rgba(255,182,24,.25)}
.sd-hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:#6b818f}
.sd-chip{background:#fff3d1; color:#8a5a00; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700}
.sd-location{margin-left:10px}
.sd-single-grid{display:grid; grid-template-columns:1fr 360px; gap:20px}
.sd-quote{position:sticky; top:24px; height:max-content} .sd-pills{display:flex; gap:10px; flex-wrap:wrap}
.sd-pill{background:var(--sd-btn-hover); color:#15222b; padding:8px 12px; border-radius:999px; font-weight:700}
.sd-pill.hollow{background:#fff6dc; color:#8a5a00; border:1px solid #f1e3bf} .sd-review-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.sd-review-stats>div{background:#fff8e6; border:1px solid #f1e3bf; border-radius:12px; padding:16px; text-align:center; font-weight:700}
.sd-review-stats span{display:block; margin-top:4px; color:#6b818f; font-weight:600} .sd-empty-box{border:2px dashed var(--sd-border); background:#fff; border-radius:12px; padding:18px; text-align:center; color:#6b818f}
.sd-success{background:#fff6dc; color:#7a5200; border:1px solid #f1e3bf; padding:10px 12px; border-radius:10px; margin-bottom:10px; font-weight:700}
.sd-error{background:#ffecec; color:#9b1c1c; border:1px solid #ffd1d1; padding:10px 12px; border-radius:10px; margin-bottom:10px; font-weight:700}
.sd-form-note{font-size:12px; color:#6b818f; margin:8px 0 0} .sd-quote label{color:#000; font-weight:600; margin-bottom:4px; display:block}
.sd-quote input, .sd-quote select, .sd-quote textarea{width:100%; padding:10px 12px; border:1px solid #000; border-radius:10px; background:#fff; transition:border-color .2s; outline:none}
.sd-quote input:focus, .sd-quote select:focus, .sd-quote textarea:focus{border-color:#FFB618}
.sd-quote:has(input:focus), .sd-quote:has(select:focus), .sd-quote:has(textarea:focus){box-shadow:0 0 0 3px var(--sd-focus); border-radius:14px; transition:box-shadow .2s ease}
.sd-quote .sd-btn{width:100%} .sd-reviews .sd-rev-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.sd-reviews .sd-review-form{border:1px solid var(--sd-border); border-radius:12px; padding:14px; background:#fffaf0; margin-bottom:12px}
.sd-reviews .sd-stars-input{display:flex; gap:6px; align-items:center}
.sd-reviews .sd-star{font-size:22px; line-height:1; background:transparent; border:0; cursor:pointer; color:#fff; -webkit-text-stroke:1.25px #cfd8e3; text-shadow:0 1px 0 #cfd8e3, 1px 0 0 #cfd8e3, 0 -1px 0 #cfd8e3, -1px 0 0 #cfd8e3; opacity:1; transition:color .15s ease, transform .08s ease}
.sd-reviews .sd-star:hover{transform:scale(1.03)}
.sd-reviews .sd-star.on{color:var(--sd-star); -webkit-text-stroke:0; text-shadow:none}
.sd-reviews .sd-row{display:flex; gap:10px; margin-top:10px}
.sd-reviews textarea{width:100%; padding:10px 12px; border:1px solid var(--sd-border); border-radius:10px; background:#fff}
.sd-reviews .sd-msg{margin-top:8px; font-weight:600}
.sd-reviews .sd-msg.ok{color:#7a5200}
.sd-reviews .sd-msg.err{color:#b42318}
.sd-reviews .sd-busy{opacity:.6; pointer-events:none} .sd-tabbar{display:flex; gap:8px; background:#f9f4e6; border:1px solid #f1e3bf; border-radius:12px; padding:4px; margin:10px 0}
.sd-tab{flex:1; border:0; background:transparent; padding:8px 10px; border-radius:10px; font-weight:700; color:#765a22; cursor:pointer}
.sd-tab.active{background:#fff; box-shadow:var(--sd-shadow); color:var(--sd-ink)}
.sd-tabpane{display:none}
.sd-tabpane.active{display:block}
.sd-review-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.sd-review{border:1px solid var(--sd-border); border-radius:12px; padding:12px; background:#fff}
.sd-review-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.sd-review-stars .star{color:var(--sd-star); font-size:16px}
.sd-review-meta{color:var(--sd-muted); font-size:13px} .sd-card p > strong{display:inline-block; min-width:120px; font-weight:800; color:#7a5200}
.sd-card p:has(> strong){display:flex; align-items:flex-start; gap:10px; background:#fff8e6; border:1px solid #f1e3bf; border-radius:10px; padding:10px 12px; margin:8px 0} .company-map{margin-top:30px; background:#fff; border:1px solid #eaeaea; border-radius:12px; padding:20px; box-shadow:0 4px 14px rgba(0,0,0,0.08)}
.company-map-title{font-size:28px; font-weight:800; color:#1c1c1c; margin-bottom:14px}  @media (max-width: var(--bp-lg)){
.sd-wrap{grid-template-columns:260px 1fr; gap:18px}
.sd-single-grid{grid-template-columns:1fr 320px}
}
@media (max-width: var(--bp-md)){
.sd-wrap{grid-template-columns:240px 1fr}
.sd-results-head h2{font-size:26px}
}
@media (max-width: var(--bp-sm)){
.container{padding:0 14px !important; margin:0 auto !important;}
.sd-wrap{display:flex; flex-direction:column; align-items:center; gap:20px}
.sd-single-grid{grid-template-columns:1fr; max-width:600px; margin:0 auto; padding:0 14px !important; align-items:center;}
.sd-single-hero{margin:0 auto !important;}
}
.sd-quote{position:sticky}
}
.sd-quote{position:sticky}
}
.sd-quote{position:sticky}
}
.sd-quote{position:sticky}
}
@media (max-width: var(--bp-xs)){
.container{padding:16px}
.sd-results-head{flex-direction:column; align-items:flex-start; gap:8px}
.sd-company{grid-template-columns:44px 1fr; column-gap:10px}
.sd-company .sd-avatar{width:44px; height:44px; border-radius:10px}
.sd-title{font-size:17px}
.sd-company .sd-actions .sd-btn{flex:1 1 100%}
} @media (max-width: 768px){
.sd-wrap{display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:20px !important}
.sd-filters{order:1 !important; width:100% !important}
.sd-results{order:2 !important; width:100% !important}
.sd-filters .sd-card{position:static !important; margin:0 auto !important}
.sd-grid{display:grid !important; grid-template-columns:1fr !important; gap:18px !important}
.sd-company{margin:0 4px !important}
.keydesign-container.e-con{padding-left:0px !important; padding-right:12px !important}
.sd-single-grid{display:flex !important; flex-direction:column !important; gap:20px !important; margin:0 auto !important; align-items:center !important; align-items:static !important; justify-content:center !important; max-width:600px !important}
.sd-avatar.lg{width:40px; height:40px; border-radius:10px}
.sd-single-hero .sd-card{margin:0 auto !important}
.sd-single-grid > *{width:100% !important}
.sd-quote{order:2 !important; position:static !important; margin-top:10px !important}
} .sd-logo-box{width:70px; height:70px; border-radius:50%; overflow:hidden; display:flex; justify-content:center; align-items:center; background:#fff}
.sd-logo-box img.sd-logo{width:100%; height:100%; object-fit:contain}
.sd-single-hero .sd-logo-box{width:110px; height:110px}
.sd-avatar-fallback, .sd-avatar-fallback.lg{display:flex; justify-content:center; align-items:center; background:#ddd; color:#333; font-weight:bold; text-transform:uppercase}
@media (max-width:480px){
.sd-company .sd-logo-box{width:55px; height:55px}
.sd-single-hero .sd-logo-box{width:85px; height:55px}
.sd-avatar-fallback.lg{font-size:28px}
} .sd-company .sd-head{display:flex !important; flex-direction:column !important; gap:6px !important}
.sd-company .sd-avatar{align-self:center !important; margin-bottom:6px !important}
.sd-card p:has(> strong){flex-direction:column !important; background:#fff8e6 !important}
.sd-card p > strong{margin-bottom:6px !important; display:block !important} .sd-card.sd-company:hover{border-color:#FFB618; box-shadow:0 10px 15px -5px rgba(0,0,0,0.3); transform:translateY(-3px)}