/* Silicon Valley Home Repair - responsive rebuild of the original look (blue gradient page, off-white panel) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0354da url(images/bg.gif) repeat-x;font-family:Arial,Helvetica,sans-serif;color:#4a4a4a;font-size:15px;line-height:1.55}
img{max-width:100%;height:auto;border:0}
a{color:#006666}
.wrap{max-width:960px;margin:10px auto;background:#fbf8f8;border-radius:10px;padding:12px 16px 0;overflow:hidden}
.gtext{font-style:italic;font-weight:bold;color:#126967;font-size:19px}
.gtext1{font-style:italic;font-weight:bold;color:#ba131a;font-size:17px}
.title{font-family:Geneva,Arial,Helvetica,sans-serif;font-size:20px;color:#CC0000;font-weight:bold;margin:8px 0 12px;padding-bottom:4px;border-bottom:1px dotted #929ea6}
.title12{font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:16px;color:#006666;font-weight:bold;margin:0}
.title12 a{color:#006666;text-decoration:none}
.title123{font-size:13px;color:#CC0000;font-weight:bold;text-decoration:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* header */
.top{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo tag call" "nav nav nav";align-items:center;gap:8px 16px}
.logo{grid-area:logo}.logo img{width:130px;display:block}
.home .logo img{width:200px}
.tag{grid-area:tag;margin:0;text-align:right}
.callbtn{grid-area:call;background:#CC0000;color:#fff;text-decoration:none;font-weight:bold;padding:10px 14px;border-radius:6px;white-space:nowrap}
.menubtn{display:none}
nav{grid-area:nav}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
nav a{display:block;line-height:0}
nav a img{width:180px;height:auto}
nav a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
nav a[aria-current] img{outline:2px solid #CC0000;outline-offset:-2px}
/* columns */
.cols{display:flex;gap:20px;margin-top:14px}
main{flex:1;min-width:0}
.side{width:200px;flex:none;border-left:1px solid #ddd;padding-left:10px}
.side .quotes{max-height:420px;overflow:auto;font-size:12px;line-height:1.5;color:#333;padding-right:4px}
blockquote{margin:0 0 14px}
blockquote p{margin:0}
cite{display:block;text-align:right;font-style:normal;font-size:12px;color:#06C}
.card{background:#eee;border-radius:8px;padding:14px 16px;margin-bottom:16px}
.card cite{font-size:14px}
/* galleries */
.grid{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.grid li{aspect-ratio:10/7;overflow:hidden;border-radius:4px;background:#ddd}
.grid img{width:100%;height:100%;object-fit:cover;display:block}
.grid a.zoom{display:block;height:100%;cursor:zoom-in;position:relative}
.grid a.zoom::after{content:"\2922";position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:1;padding:3px 4px;border-radius:3px}
.grid li.nofull{cursor:default}
.sechead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dotted #929ea6;margin:18px 0 10px;padding-bottom:3px}
.back{margin:8px 0 20px}
/* services */
.svc{list-style:none;padding:0;margin:0}
.svc li{display:flex;gap:14px;margin:0 0 18px;align-items:flex-start}
.svc img{width:70px;height:70px;object-fit:cover;flex:none;border-radius:4px}
.svc p{margin:4px 0 0}
/* home */
.intro{display:flex;gap:14px;align-items:center;margin:6px 0 18px}
.intro p{margin:0;text-align:justify}
.hdimg{display:block;margin:6px 0}
.cats{list-style:none;padding:0;margin:6px 0 20px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cats img{width:100%;border-radius:4px;display:block}
.homecontact{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:14px;color:#161616;margin-bottom:14px}
.reviews{font-size:14px}
/* contact */
.btn{display:inline-block;background:#126967;color:#fff;text-decoration:none;padding:10px 14px;border-radius:6px;margin:4px 6px 4px 0;font-weight:bold}
.links{padding-left:18px}.links li{margin:6px 0}
/* footer */
.foot{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;border-top:1px solid #ddd;margin-top:16px;padding:14px 0 18px;font-size:14px;color:#161616}
.book{display:inline-block;background:#f39c12;color:#fff;text-decoration:none;padding:10px 14px;border-radius:6px;font-weight:bold}
.home .foot>div:not(:last-child){display:none}
.home .foot{justify-content:flex-end}
/* lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:50;flex-direction:column}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:80vh;object-fit:contain;background:#fff}
.lb .cap{color:#fff;margin-top:10px;font-size:14px;text-align:center}
.lb button{position:absolute;background:rgba(255,255,255,.92);color:#000;border:0;border-radius:50%;width:48px;height:48px;font-size:26px;line-height:48px;padding:0;cursor:pointer}
.lb .x{top:12px;right:12px}.lb .prev{left:10px;top:50%;transform:translateY(-50%)}.lb .next{right:10px;top:50%;transform:translateY(-50%)}
/* phone / tablet */
@media (max-width:760px){
  .wrap{margin:0;border-radius:0;padding:10px 12px 0}
  .top{grid-template-columns:auto 1fr;grid-template-areas:"logo menu" "tag tag" "call call" "nav nav"}
  .logo img,.home .logo img{width:96px}
  .tag{text-align:center;font-size:17px}
  .callbtn{text-align:center;padding:12px}
  .menubtn{display:block;grid-area:menu;justify-self:end;background:#126967;color:#fff;border:0;border-radius:6px;padding:12px 16px;font-size:16px;font-weight:bold}
  nav{display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;align-items:stretch}
  nav a img{display:none}
  nav a span{position:static;width:auto;height:auto;clip:auto;display:block;line-height:48px;text-align:center;color:#fff;font-weight:bold;font-size:18px;border-radius:6px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
  nav li:nth-child(1) a span{background:linear-gradient(#f07a12,#d9480f)}
  nav li:nth-child(2) a span{background:linear-gradient(#4aa3f0,#1f6fd1)}
  nav li:nth-child(3) a span{background:linear-gradient(#f9b233,#e9d24a);color:#fff}
  nav li:nth-child(4) a span{background:linear-gradient(#4cb877,#2f8f5a)}
  nav li:nth-child(5) a span{background:linear-gradient(#1d7d7b,#115e5c)}
  nav a{line-height:normal;text-decoration:none}
  nav a[aria-current] span{outline:3px solid #CC0000;outline-offset:-3px}
  .cols{flex-direction:column}
  .side{width:auto;border-left:0;border-top:1px solid #ddd;padding:10px 0 0;text-align:center}
  .side .quotes{text-align:left;max-height:300px;font-size:14px}
  .grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .cats{grid-template-columns:repeat(3,1fr)}
  .intro{flex-direction:column;align-items:flex-start}
  .hdimg{max-width:100%}
  .homecontact img{display:none}
  .foot{flex-direction:column}
}
@media (max-width:760px) and (scripting:none){nav{display:block}}