/* Ruiz Electric Service: black, white and one live wire of lime. */
:root{
  --ink:#0b0b0b; --paper:#ffffff; --bone:#f1f1ec; --grey:#4a4a4a; --line:#0b0b0b;
  --lime:#c6ff3d; --lime-deep:#a8e01f;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --b:3px; --B:6px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:clamp(4rem,9vw,7.5rem);
  --w:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
h1,h2,h3{font-weight:700;line-height:1.02;letter-spacing:-.025em;margin:0}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h3{font-size:1.25rem;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
.wrap{width:min(var(--w),100% - 2rem);margin-inline:auto}
section[id]{scroll-margin-top:84px}

/* focus + skip */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--ink);padding:.75rem 1rem;font-weight:700;z-index:99}
.skip:focus{left:12px;top:12px}
.reveal-pending{transform:translateY(14px)}.reveal-in{opacity:1;transform:none;transition:opacity .5s,transform .5s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.8rem 1.5rem;
  background:var(--lime);color:var(--ink);border:var(--b) solid var(--ink);font:700 1rem/1 var(--sans);text-decoration:none;
  box-shadow:5px 5px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn-line{background:var(--paper)}
.btn-dark{background:var(--ink);color:var(--lime);box-shadow:5px 5px 0 var(--paper);border-color:var(--ink)}
.text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.tag,.big-tel-label{font:600 .8rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:var(--ink);color:var(--paper);border-bottom:var(--b) solid var(--lime)}
.head-row{display:flex;align-items:center;gap:1.25rem;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;min-height:44px}
.brand-name{font-weight:700;font-size:1.1rem;line-height:1;letter-spacing:-.01em}
.brand-sub{display:block;font:600 .68rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--lime)}
.nav-main{margin-left:auto}
.nav-main ul,.mnav ul{list-style:none;margin:0;padding:0}
.nav-main ul{display:flex;gap:.25rem}
.nav-main a{display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;text-decoration:none;font-weight:500;font-size:.95rem}
.nav-main a:hover{color:var(--lime)}
.head-tel{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;background:var(--lime);color:var(--ink);font:700 .95rem/1 var(--mono);text-decoration:none}
.lang,.mnav{position:relative}
.lang summary,.mnav summary{list-style:none;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;min-width:44px;padding:0 .6rem;cursor:pointer;
  border:2px solid #5a5a5a;font:600 .85rem/1 var(--mono)}
.lang summary::-webkit-details-marker,.mnav summary::-webkit-details-marker{display:none}
.lang svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.lang-panel,.mnav-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--paper);color:var(--ink);border:var(--b) solid var(--ink);box-shadow:6px 6px 0 var(--lime);padding:.75rem;min-width:220px}
.mnav{display:none}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:currentColor;position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-6px}.bars::after{top:6px}
.mnav-panel a{display:flex;align-items:center;min-height:48px;padding:0 .5rem;font-weight:700;text-decoration:none;border-bottom:1px solid #ddd}

/* hero */
.hero{padding:var(--s5) 0 0;border-bottom:var(--B) solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:center}
.hero .tag{display:inline-block;background:var(--ink);color:var(--lime);padding:.35rem .6rem;margin-bottom:var(--s3)}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:.96;letter-spacing:-.04em}
h1 mark{background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 92%,transparent 92%);color:inherit;padding:0 .05em}
.lede{max-width:36rem;margin-top:var(--s3);font-size:1.15rem;color:#222}
.big-tel-label{margin-top:var(--s4);color:var(--grey)}
.big-tel{display:inline-block;font:700 clamp(2.2rem,11vw,6rem)/1 var(--sans);letter-spacing:-.045em;text-decoration:none;
  border-bottom:var(--B) solid var(--lime);padding-bottom:.08em;margin-top:.25rem;white-space:nowrap}
.big-tel:hover{border-bottom-color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:var(--s4)}
.hero-photo{position:relative;margin:0 0 0 1rem}
.hero-photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;background:var(--lime);border:var(--b) solid var(--ink)}
.hero-photo img{position:relative;width:100%;aspect-ratio:1;object-fit:cover;border:var(--B) solid var(--ink);filter:grayscale(1) contrast(1.15)}
.hero-photo figcaption{position:absolute;left:-1.25rem;bottom:2rem;background:var(--paper);border:var(--b) solid var(--ink);padding:.6rem .9rem;
  font:400 .8rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;display:grid}
.hero-photo figcaption strong{font:700 2rem/1.1 var(--sans);letter-spacing:-.03em}
.hero-strip{list-style:none;padding:0;margin-top:var(--s5);display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--b) solid var(--ink)}
.hero-strip li{padding:1.1rem 1rem 1.2rem 0;font:400 .9rem/1.4 var(--mono)}
.hero-strip li+li{padding-left:1.25rem;border-left:var(--b) solid var(--ink)}
.hero-strip b{display:block;font-family:var(--sans);font-size:1.05rem}

/* jobs: printed job ticket */
.jobs{padding:var(--s6) 0;background:var(--bone)}
.jobs-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s5);align-items:start}
.jobs-intro p{margin-top:var(--s3);max-width:30rem}
.jobs-photos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:var(--s4)}
.jobs-photos img{aspect-ratio:1;object-fit:cover;border:var(--b) solid var(--ink);filter:grayscale(1) contrast(1.1)}
.ticket{position:relative;background:var(--paper);border:var(--b) solid var(--ink);padding:0 0 1.5rem;font-family:var(--mono);
  box-shadow:10px 10px 0 var(--ink)}
.ticket::before{content:"";position:absolute;left:-3px;right:-3px;top:-14px;height:14px;
  background:radial-gradient(circle at 7px 14px,var(--bone) 6px,transparent 6.5px) 0 0/14px 14px repeat-x}
.ticket-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1rem 1.25rem;background:var(--ink);color:var(--lime);
  font:700 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.ticket table{width:100%;border-collapse:collapse}
.ticket caption{text-align:left;padding:1rem 1.25rem .5rem;font-size:.8rem;color:var(--grey)}
.ticket thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;text-align:left;padding:.4rem 1.25rem;border-bottom:var(--b) solid var(--ink)}
.ticket thead th:last-child,.ticket td{text-align:right}
.ticket tbody th,.ticket td{padding:.7rem 1.25rem;border-bottom:1.5px dashed #9a9a9a;vertical-align:top}
.ticket tbody th[scope=row]{text-align:left;font:500 .95rem/1.35 var(--sans)}
.ticket tbody th small{display:block;font:400 .78rem/1.4 var(--mono);color:var(--grey);margin-top:.15rem}
.ticket td{font-weight:700;font-size:1rem;white-space:nowrap}
.ticket .t-group th{background:var(--lime);font:700 .74rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;text-align:left;padding:.45rem 1.25rem;border-bottom:var(--b) solid var(--ink);border-top:var(--b) solid var(--ink)}
.ticket .t-group span{font-weight:400}
.ticket-foot{padding:1rem 1.25rem 0;font-size:.8rem;line-height:1.55;color:#222}

/* emergency */
.emergency{background:var(--lime);padding:var(--s6) 0;border-block:var(--B) solid var(--ink)}
.emer-lede{font-size:1.2rem;max-width:40rem;margin-top:var(--s2);font-weight:500}
.emer-grid{display:grid;grid-template-columns:1.1fr .9fr;margin-top:var(--s4);border:var(--B) solid var(--ink)}
.emer-now{background:var(--ink);color:var(--paper);padding:var(--s4)}
.emer-wait{background:var(--paper);padding:var(--s4)}
.emer-grid h3{font-size:1.4rem}
.emer-grid ul{margin:var(--s3) 0;padding:0;list-style:none}
.emer-grid li{padding:.55rem 0 .55rem 1.9rem;position:relative;border-top:1px solid currentColor}
.emer-now li::before{content:"!";position:absolute;left:0;top:.6rem;width:1.25rem;height:1.25rem;background:var(--lime);color:var(--ink);font:700 .85rem/1.25rem var(--mono);text-align:center}
.emer-wait li::before{content:"";position:absolute;left:.2rem;top:1rem;width:.8rem;height:.8rem;border:2.5px solid var(--ink)}
.emer-note{font:400 .88rem/1.5 var(--mono);color:var(--lime);margin-bottom:var(--s3)}

/* visit */
.visit{padding:var(--s6) 0}
.visit-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--s4) var(--s5);align-items:end}
.visit-grid h2{grid-column:1/-1}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:var(--b) solid var(--ink)}
.steps li{padding:var(--s3);border-right:var(--b) solid var(--ink);border-bottom:var(--b) solid var(--ink)}
.steps li:nth-child(2n){border-right:0}
.steps li:nth-child(n+3){border-bottom:0}
.step-n{display:block;font:700 .9rem/1 var(--mono);color:var(--ink);background:var(--lime);width:max-content;padding:.3rem .45rem;margin-bottom:.9rem;border:2px solid var(--ink)}
.steps p{margin-top:.5rem;color:#2a2a2a}
.visit-photo{width:100%;aspect-ratio:1;object-fit:cover;border:var(--B) solid var(--ink);filter:grayscale(1) contrast(1.1);align-self:stretch;height:100%}

/* area */
.area{background:var(--ink);color:var(--paper);padding:var(--s6) 0}
.area-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s5);align-items:start}
.area-grid p{margin-top:var(--s3);color:#d8d8d8;max-width:28rem}
.hoods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.hoods li{font:400 .9rem/1 var(--mono);padding:.7rem .85rem;border:2px solid #6b6b6b}
.hoods li:nth-child(5n+1){border-color:var(--lime)}
.hoods .hood-plus{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:700}

/* refer out */
.refer{padding:var(--s6) 0;border-bottom:var(--B) solid var(--ink)}
.refer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.refer-head p{margin-top:var(--s3);max-width:30rem}
.refer-list{margin:0;display:grid;gap:0}
.refer-list div{display:grid;grid-template-columns:1fr;padding:1.1rem 0;border-top:var(--b) solid var(--ink)}
.refer-list div:last-child{border-bottom:var(--b) solid var(--ink)}
.refer-list dt{font-weight:700;font-size:1.3rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.6rem}
.refer-list dt::before{content:"";width:.9rem;height:.9rem;background:var(--lime);border:2.5px solid var(--ink);flex:none}
.refer-list dd{margin:.2rem 0 0;font:400 .88rem/1.5 var(--mono);color:var(--grey)}

/* book */
.book{padding:var(--s6) 0;background:var(--bone)}
.book-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:var(--s5);align-items:start}
.book-side p{margin-top:var(--s3);max-width:26rem}
.book-photo-tip{border-left:var(--B) solid var(--lime-deep);padding-left:1rem}
.book-urgent{font:400 .9rem/1.5 var(--mono)}
.book-urgent a{font-weight:700}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.25rem;background:var(--paper);border:var(--b) solid var(--ink);padding:var(--s4);box-shadow:10px 10px 0 var(--lime)}
.field{display:grid;gap:.35rem;margin:0;min-width:0}
.field-wide,.form .btn,.form [data-sd-status]{grid-column:1/-1}
fieldset.field{border:0;padding:0}
legend{font-weight:700;padding:0;margin-bottom:.35rem}
label{font-weight:700;font-size:.95rem}
.req{font:400 .75rem var(--mono);color:var(--grey)}
input,select,textarea{width:100%;min-height:48px;padding:.65rem .75rem;border:2.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:400 1rem/1.4 var(--sans)}
textarea{resize:vertical}
.radio{display:flex;align-items:center;gap:.6rem;min-height:44px;font-weight:500}
.radio input{width:22px;min-height:22px;height:22px;accent-color:var(--ink);margin:0}
.form .btn{justify-self:start}

/* footer */
.site-foot{background:var(--ink);color:#e6e6e6;padding:var(--s5) 0 var(--s3);border-top:var(--B) solid var(--lime)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr .7fr;gap:var(--s4)}
.site-foot .brand{color:var(--paper)}
.foot-brand p{margin-top:var(--s2);max-width:22rem;font-size:.95rem}
.site-foot h2{font:700 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--lime);margin-bottom:.6rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{min-height:44px;display:flex;align-items:center;font-size:.95rem}
.foot-base{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid #3a3a3a;font:400 .8rem var(--mono);color:#bdbdbd}

/* inner page (statement) */
.page-hero{padding:var(--s5) 0 var(--s4);border-bottom:var(--B) solid var(--ink)}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
.page-hero .lede{margin-top:var(--s2)}
.section{padding:var(--s5) 0}
.statement>*{max-width:46rem}
.statement h2{font-size:1.6rem;margin:var(--s4) 0 var(--s2)}
.statement h2:first-child{margin-top:0}
.statement li{margin-bottom:.45rem}
.statement a{font-weight:700}
.reviewed{margin-top:var(--s4);font:400 .85rem var(--mono);color:var(--grey)}

/* responsive */
@media (max-width:1080px){
  .nav-main{display:none}
  .mnav{display:block}
  .head-tel{margin-left:auto}
  .head-row{gap:.6rem}
}
@media (max-width:900px){
  .hero-grid,.jobs-grid,.area-grid,.refer-grid,.book-grid,.emer-grid{grid-template-columns:1fr}
  .hero-photo{margin:0 18px 18px 0;max-width:520px}
  .visit-grid{grid-template-columns:1fr}
  .visit-photo{height:auto;max-width:420px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .head-tel{display:none}
  .lang{margin-left:auto}
  .lang-text{display:none}
  .hero{padding-top:var(--s4)}
  .hero-strip{grid-template-columns:1fr}
  .hero-strip li+li{padding-left:0;border-left:0;border-top:var(--b) solid var(--ink)}
  .hero-photo figcaption{left:.75rem;bottom:.75rem}
  .steps{grid-template-columns:1fr}
  .steps li{border-right:0!important;border-bottom:var(--b) solid var(--ink)!important}
  .steps li:last-child{border-bottom:0!important}
  .emer-now,.emer-wait{padding:var(--s3)}
  .ticket{box-shadow:6px 6px 0 var(--ink)}
  .ticket tbody th,.ticket td,.ticket .t-group th,.ticket thead th,.ticket caption,.ticket-foot{padding-left:.8rem;padding-right:.8rem}
  .form{grid-template-columns:1fr;padding:var(--s3);box-shadow:6px 6px 0 var(--lime)}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .text-link{width:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}


/* Button pairs share a row on a phone (owner, 2026-10-16). */
@media (max-width: 480px) {
  .hero-actions:has(> .btn:nth-child(2)):not(:has(> :nth-child(3))) { display: flex; flex-wrap: nowrap; gap: 10px; }
  .hero-actions:has(> .btn:nth-child(2)):not(:has(> :nth-child(3))) > .btn { flex: 1 1 0; min-width: 0; width: auto; justify-content: center; text-align: center; white-space: normal; padding-inline: 12px; }
}