/* Martinez Electric. Colours from the logo; one motif: the logo's slanted stroke. See DESIGN.md. */
:root{
  /* colour */
  --navy:#012B6A;--navy-deep:#011E4A;--bolt:#FFD200;--bolt-hi:#FFE14D;--red:#D7141A;
  --ink:#0E1A33;--steel:#8E9AB0;--bolt-soft:#FFF6C7;--on-navy-muted:#AEBBD3;--open:#1E8E3E;--veil:rgba(1,20,48,.94);--muted:#4A5873;--paper:#fff;--panel:#EEF1F6;--plate:#E6EAF1;--plate-row:#F4F6FA;--on-navy:#DCE4F2;
  /* dark scheme (October 2026): black bands, three gradients that never run blue into red */
  --black:#080B12;--card:#111827;--quiet:#9AA7BF;--line:#DCE2EC;--hot:#F03A40;--spark:#3A6FF0;
  --g-spark:linear-gradient(100deg,#FFE14D 0%,#FFD200 30%,#FF8A00 65%,#F03A40 100%);
  --g-arc:linear-gradient(100deg,#FFD200 0%,#FFE14D 38%,#FFFFFF 52%,#3A6FF0 72%,#2F66E8 100%);
  --g-ember:linear-gradient(100deg,#B26B00 0%,#D9480F 55%,#D7141A 100%);
  --grid:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px;
  --bolt-path:polygon(58% 0,18% 56%,46% 56%,34% 100%,82% 40%,54% 40%,70% 0);
  /* type: five sizes */
  --font:'Archivo','Arial Narrow',Arial,sans-serif;
  --t-xl:clamp(2.25rem,6.8vw,5.4rem);   /* hero headline */
  --t-l:clamp(1.85rem,5vw,4.6rem);      /* section headings, contact rows */
  --t-m:clamp(1.15rem,2vw,1.75rem);     /* questions, service names */
  --t-s:1.0625rem;                     /* text: 17px */
  --t-xs:.9375rem;                     /* notes: 15px */
  /* space */
  --gutter:20px;--sec:clamp(44px,5.5vw,80px);
  /* the motif: the logo's stroke leans this far */
  --lean:28%;
  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.76,0,.24,1);--ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;--t-hover:180ms;--t-ui:240ms;--t-reveal:800ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;font:400 var(--t-s)/1.6 var(--font);color:var(--ink);background:var(--paper)}
img,svg{max-width:100%;display:block}
a{color:var(--navy);text-underline-offset:3px}
a,.btn{touch-action:manipulation;-webkit-tap-highlight-color:rgba(1,43,106,.15)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.hero :focus-visible,.foot :focus-visible{outline-color:var(--bolt)}
[id]{scroll-margin-top:96px}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--bolt);color:var(--navy);font-weight:800;padding:10px 16px}
.skip:focus{top:12px}

/* Display type: the logo's wide, heavy, slanted capitals */
h1,h2{font-family:var(--font);font-stretch:125%;font-weight:900;font-style:italic;letter-spacing:-.02em;line-height:.98;margin:0;color:var(--navy);text-wrap:balance}
h1{font-size:var(--t-xl)}
h2{font-size:var(--t-l)}
h3{font-size:var(--t-m);font-stretch:112%;font-weight:800;line-height:1.15;margin:0;color:var(--navy);text-wrap:balance}

/* Header */
.top{position:sticky;top:0;z-index:5;background:var(--black);border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;gap:18px;min-height:68px;padding-top:8px;padding-bottom:8px}
/* The live wire: a yellow line under the header that fills as you read down the page, led by a red spark.
   CSS scroll timeline where supported; site.js sets --p elsewhere. Hidden without either. */
.wire{position:absolute;left:0;right:0;bottom:-4px;height:4px;pointer-events:none;overflow:hidden}
.wire i{position:absolute;inset:0;background:var(--bolt);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.wire b{position:absolute;top:0;bottom:0;left:0;width:22px;margin-left:-22px;background:var(--red);clip-path:polygon(var(--lean) 0,100% 0,calc(100% - var(--lean)) 100%,0 100%);transform:translateX(calc(var(--p,0) * 100vw))}
.brand img{transition:height var(--t-ui) var(--ease-out)}
.top.is-scrolled .brand img{height:38px}
.brand{display:flex;align-items:center;gap:10px;font-stretch:118%;font-weight:900;font-style:italic;font-size:var(--t-s);color:#fff;text-decoration:none;margin-right:auto}
.brand img{height:46px;width:auto}
/* Menus: each top link goes to its page; the arrow beside it opens a dropdown of icon links and a card.
   Written into every page by scripts/nav.py. Hover opens them too on a desktop with a mouse (site.js). */
.nav{display:flex;align-items:center;gap:14px}
.nav-group{display:inline-flex;align-items:center;gap:2px}
.nav-link{color:var(--on-navy);text-decoration:none;font-weight:600;white-space:nowrap}
.nav-link:hover,.nav-group:hover .nav-link,.nav-group.current .nav-link,.nav-link[aria-current]{color:#fff}
.nav-group.current .nav-link,.nav-link[aria-current]{text-decoration:underline;text-decoration-color:var(--bolt);text-decoration-thickness:3px;text-underline-offset:8px}
.nav-toggle{font:inherit;color:var(--on-navy);background:none;border:0;padding:0;cursor:pointer;display:inline-grid;place-items:center;width:20px;height:32px;border-radius:6px}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"],.nav-group:hover .nav-toggle{color:var(--bolt)}
.nav-toggle::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform var(--t-hover) var(--ease-out)}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.nav-menu{position:absolute;left:0;right:0;top:100%;display:none;z-index:6;padding:30px 0 34px;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px rgba(0,0,0,.4);background:radial-gradient(circle at 96% 0%,rgba(255,210,0,.12),transparent 40%),var(--grid),#0b0f18}
.nav-menu.open{display:block}
.mega-inner{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1.15fr);gap:40px}
.mega-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.mega-label{font-size:.75rem;font-weight:800;font-stretch:110%;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.mega-item{display:flex;gap:14px;align-items:flex-start;padding:10px;margin:0 -10px 4px;border-radius:12px;color:#fff;text-decoration:none;transition:background-color var(--t-hover) ease}
.mega-item:hover,.mega-item[aria-current]{background:rgba(255,255,255,.06)}
.mega-ico{position:relative;flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--bolt);border:1px solid transparent;background:radial-gradient(circle at 30% 20%,rgba(255,210,0,.2),transparent 60%) padding-box,linear-gradient(150deg,#16203a,#0b0f18) padding-box,var(--g-spark) border-box;transition:transform var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),color var(--t-hover) ease}
.mega-ico::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--g-spark);opacity:0;transition:opacity var(--t-ui) ease}
.mega-ico svg{position:relative;z-index:1;width:20px;height:20px;filter:drop-shadow(0 0 5px rgba(255,210,0,.45))}
.mega-item:hover .mega-ico,.mega-item:focus-visible .mega-ico{color:var(--navy);transform:translateY(-2px) rotate(-6deg) scale(1.06);box-shadow:0 10px 24px rgba(255,138,0,.3)}
.mega-item:hover .mega-ico::after,.mega-item:focus-visible .mega-ico::after{opacity:1}
.mega-item:hover .mega-ico svg,.mega-item:focus-visible .mega-ico svg{filter:none}
.mega-item b{display:block;font-weight:800;font-stretch:108%;font-size:.98rem;line-height:1.3}
.mega-item small{display:block;color:var(--quiet);font-size:.86rem;line-height:1.4;margin-top:2px}
.mega-side{border-left:1px solid rgba(255,255,255,.08);padding-left:32px;display:grid;gap:18px;align-content:start}
.mega-promo{border:1px solid rgba(255,210,0,.3);border-radius:16px;padding:22px;background:radial-gradient(circle at 92% 0%,rgba(255,210,0,.22),transparent 55%),radial-gradient(circle at 0% 100%,rgba(240,58,64,.18),transparent 55%),var(--card)}
.mega-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--bolt);border:1px solid rgba(255,210,0,.4);border-radius:6px;padding:3px 8px}
.mega-promo b{display:block;color:#fff;font-size:1.15rem;font-stretch:112%;line-height:1.25;margin:12px 0 6px}
.mega-promo p{color:var(--on-navy);font-size:.9rem;margin:0 0 16px}
.mega-promo .btn.main{min-height:44px;padding:8px 26px;font-size:.92rem}
.mega-all{color:#fff;font-weight:800;text-decoration:none}
.mega-all::after{content:" →";color:var(--bolt)}
.mega-all:hover{color:var(--bolt)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer;order:3}
.menu-btn span{display:block;height:2px;background:#fff;margin:6px 0;transition:transform var(--t-hover) var(--ease-out)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1199px){
  .menu-btn{display:block}
  .bar .call{order:2}
  .nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px var(--gutter) 20px;background:var(--black);border-bottom:1px solid rgba(255,255,255,.12);max-height:calc(100vh - 64px);overflow-y:auto}
  .nav.open{display:flex}
  .nav-group{display:flex;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-link{flex:1;padding:14px 0}
  .nav-toggle{width:48px;height:48px}
  .nav-menu{position:static;flex-basis:100%;box-shadow:none;background:none;border:0;padding:2px 0 12px}
  .mega-inner,.mega-cols{grid-template-columns:1fr;gap:4px}
  .mega-label{margin:10px 0 4px;padding-bottom:6px}
  .mega-item{padding:8px 10px;margin:0 -10px}
  .mega-item small{display:none}
  .mega-side{border:0;padding:0}
  .mega-promo{display:none}
  .mega-all{padding:8px 0}
}

/* Buttons: square, the primary one cut on the motif's slant */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 22px;font-weight:800;font-stretch:110%;text-decoration:none;border:2px solid var(--navy);color:var(--navy);background:var(--paper);transition:background-color .2s ease,transform .12s ease}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.main{background:var(--bolt);border-color:var(--bolt);color:var(--navy);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);padding:10px 30px}
.btn.main:hover{background:var(--bolt-hi);border-color:var(--bolt-hi)}
.btn.call{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.call:hover{background:var(--navy-deep)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Hero: the motif once, at enormous scale, cropped by the viewport */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(40px,5.5vw,80px) 0 clamp(44px,6vw,88px)}
.hero h1{color:#fff;font-stretch:112%}
.hero > .wrap{position:relative}
.hero > .wrap > h1{max-width:min(100%,780px)}
.hero > .wrap > .lead{max-width:60ch}
.hero .lead{font-size:var(--t-s);max-width:42ch;color:var(--on-navy);margin:24px 0 0}
.hero .btn.ghost{color:#fff;border-color:#fff;background:transparent}
.hero .btn.ghost:hover{background:rgba(255,255,255,.12)}
.hero-grid{position:relative;display:grid;gap:40px;align-items:end}
/* The bolt: the logo's lightning bolt, big, in the empty navy left of the hero on wide screens.
   Yellow with a navy edge and white rim like the logo, a red echo behind. It strikes once on load
   (draws in, white flash, a burst of light), then a highlight runs along it and it flickers every few seconds. */
.bolt{display:none}
@media (min-width:1500px){
  .bolt{display:block;position:absolute;z-index:0;top:50%;left:calc((100vw - 1160px) / 4);width:min(420px,calc((100vw - 1160px) / 2 - 30px));height:auto;overflow:visible;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 0 22px rgba(255,210,0,.4))}
  .bolt-main{fill:var(--bolt)}
  .bolt-edge{fill:none;stroke:var(--navy-deep);stroke-width:9;stroke-linejoin:miter;stroke-miterlimit:12}
  .bolt-rim{fill:none;stroke:#fff;stroke-width:22;stroke-linejoin:miter;stroke-miterlimit:12}
  .bolt-echo{fill:var(--red);transform:translate(16px,12px)}
  .bolt-shine{opacity:0}
  .bolt-burst{opacity:0}
}
.motif{position:absolute;top:-8%;bottom:-8%;right:-22vw;width:min(60vw,860px);pointer-events:none}
.motif i{position:absolute;top:0;bottom:0;background:var(--bolt);clip-path:polygon(var(--lean) 0,100% 0,calc(100% - var(--lean)) 100%,0 100%)}
.motif i:first-child{left:0;right:22%}
.motif-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.motif i+i{left:68%;right:0;background:var(--red);clip-path:polygon(70% 0,100% 0,30% 100%,0 100%)}

/* Facts card (home and About heroes): black, a spark rule on top, the live open/closed line, three icon rows */
.plate{position:relative;z-index:1;background:var(--black);color:#fff;padding:24px 26px;max-width:400px;justify-self:end;width:100%;border-top:4px solid transparent;border-image:var(--g-spark) 1;box-shadow:0 30px 80px -30px rgba(255,210,0,.45)}
.plate-now{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-weight:800;font-size:var(--t-xs)}
.plate-now[hidden]{display:none}
.plate-now::before{content:"";flex:none;width:10px;height:10px;background:var(--hot)}
.plate-now.is-open::before{background:#2fbf5a}
.plate-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.plate-list li{display:flex;gap:14px;align-items:center}
.plate-ic{flex:none;width:42px;height:42px;border-radius:10px;background:var(--card);border:1px solid rgba(255,210,0,.35);display:grid;place-items:center;color:var(--bolt)}
.plate-ic svg{width:20px;height:20px}
.plate-list b{display:block;font-size:var(--t-s);font-weight:800}
.plate-list small{display:block;margin-top:2px;color:var(--quiet);font-size:13px}

/* What we do: seven services, each a link to its row on /services, with the stroke as the bullet. */
.list{padding:var(--sec) 0}
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:24px}
.list-more{font-weight:700}
.svc-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.svc-links a{position:relative;display:grid;gap:2px;padding:16px 18px 16px 52px;background:var(--panel);text-decoration:none;transition:background-color var(--t-ui) var(--ease-out)}
.svc-links a::before{content:"";position:absolute;left:18px;top:20px;width:20px;height:14px;background:var(--red);clip-path:polygon(var(--lean) 0,100% 0,calc(100% - var(--lean)) 100%,0 100%);transition:transform var(--t-ui) var(--ease-out)}
.svc-links b{font-stretch:112%;font-weight:800;color:var(--navy);font-size:var(--t-s)}
.svc-links span{color:var(--muted);font-size:var(--t-xs)}
.svc-links a:hover{background:var(--plate)}
.svc-links a:hover::before{transform:translateX(4px)}
.svc-links a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.list-foot{margin-top:clamp(16px,2vw,24px)}

/* Recent work: the owner's own photos. Square corners, one treatment, each keeps its shape. */
.work{padding:clamp(36px,4vw,48px) 0 var(--sec)}
.work-note{margin:12px 0 28px;color:var(--muted);max-width:52ch}
.shots{display:flex;gap:12px;margin-bottom:12px}
.shot{margin:0;flex:.75 1 0;min-width:0}
.shot.land{flex:1.333 1 0}
.shot img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--panel)}
.shot.land img{aspect-ratio:4/3}
.shot figcaption{margin-top:8px;font-size:var(--t-xs);color:var(--muted)}

/* What customers say: Google reviews, word for word. The rating is five yellow stars. */
.reviews{background:var(--panel);padding:var(--sec) 0}
.reviews-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 28px;flex-wrap:wrap;margin-bottom:28px}
.reviews-score{display:flex;align-items:center;gap:12px;margin:0;font-weight:600}
.reviews-score b{font-weight:900;font-stretch:118%;font-style:italic;color:var(--navy)}
.reviews-score a{font-weight:700}
.rate{display:inline-flex;gap:2px;flex:none}
.rate i{width:18px;height:18px;background:var(--bolt);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.reviews-grid{display:grid;gap:12px;align-items:start}
.review{margin:0;background:var(--paper);padding:clamp(24px,3vw,40px);display:grid;gap:18px}
.review blockquote{margin:0;display:grid;gap:14px;max-width:62ch}
.review blockquote p{margin:0}
.review-pull{margin:0;font-size:var(--t-m);font-stretch:112%;font-weight:800;line-height:1.15;color:var(--navy);text-wrap:balance}
.review figcaption{display:grid;gap:4px;padding-top:14px;border-top:3px solid var(--red);font-size:var(--t-xs);color:var(--muted)}
.review-who{color:var(--ink)}
.review-who b{font-size:var(--t-s);font-stretch:112%;font-weight:800;color:var(--navy)}
.reviews-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:clamp(20px,2.4vw,28px)}
.reviews-write{font-weight:800}
@media (min-width:860px){.reviews-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* FAQ: a band per question; the heading band is the motif band that splits the page */
.faq-head{background:var(--bolt);display:flex;align-items:flex-end;padding:clamp(36px,4.5vw,64px) 0 clamp(52px,6vw,80px);clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 36px))}
.faq-head .wrap{width:100%}
.faq-head h2{color:var(--navy)}
.qa{padding:clamp(22px,2.8vw,36px) 0}
.qa:nth-child(odd){background:var(--panel)}
.qa .wrap{display:grid;gap:12px 48px}
.qa p{margin:0;font-size:var(--t-s);max-width:52ch}

/* Contact: a visit card on one of Reggie's job photos */
.visit{position:relative;display:flex;align-items:flex-start;min-height:min(72svh,640px)}
.visit-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;background:var(--panel)}
.visit-wrap{position:relative;width:100%;padding-top:48px;padding-bottom:48px}
.card{background:var(--paper);width:min(100%,400px);padding:32px 32px 0;overflow:hidden}
.card h2{font-size:var(--t-m);font-stretch:118%}
.card-place{margin:14px 0 20px}
.card-place a{font-weight:700}
.hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours th,.hours td{padding:8px 10px;font-size:var(--t-s)}
.hours tr:nth-child(odd){background:var(--panel)}
.hours th{text-align:left;font-weight:600;color:var(--muted)}
.hours td{text-align:right;font-weight:800;color:var(--navy)}
.card-reply{margin:18px 0 0;font-size:var(--t-xs);font-weight:700;color:var(--navy)}
.card-phone{margin:10px 0 0}
.card-phone a{font-size:var(--t-m);font-weight:800;font-stretch:112%;color:var(--navy);text-decoration:none}
.card-phone a:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px}
.btn.card-btn{display:flex;width:calc(100% + 64px);margin:26px -32px 0;min-height:58px;clip-path:none}

/* Services page */
.jump{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:28px 0 0;position:relative}
.jump a{display:inline-block;padding:6px 14px;border:2px solid rgba(255,255,255,.75);color:#fff;text-decoration:none;font-weight:700;background:var(--navy)}
.jump a:hover{background:#fff;color:var(--navy)}
/* Services: one photo-led row per service (photo and text swap sides each row,
   the photo's inner edge cut on the logo's slant), then a yellow call band. */
.svc-row{padding:clamp(40px,6vw,96px) 0;overflow-x:clip}
.svc-row:nth-child(even){background:var(--panel)}
.svc-grid{display:grid;gap:24px 56px;align-items:center}
.svc-photo{margin:0;min-width:0}
.svc-photo a{display:block;overflow:hidden}
.svc-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--panel);transition:transform var(--t-reveal) var(--ease-soft)}
.svc-photo figcaption{margin-top:8px;font-size:var(--t-xs);color:var(--muted)}
@media (hover:hover) and (pointer:fine){.svc-photo a:hover img{transform:scale(1.035)}}
.svc-body{display:grid;gap:14px;max-width:56ch;min-width:0}
.svc-body h2{font-size:clamp(1.7rem,3.2vw,2.8rem)}
.svc-body h2 a{color:inherit;text-decoration:none}
.svc-body h2 a:hover{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:4px;text-underline-offset:6px}
.svc-body p{margin:0}
.svc-key{display:flex;align-items:center;gap:12px;font-weight:800;font-stretch:112%;color:var(--navy)}
.svc-key::before{content:"";flex:none;width:28px;height:15px;background:var(--bolt);clip-path:polygon(var(--lean) 0,100% 0,calc(100% - var(--lean)) 100%,0 100%)}
.svc-incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;font-size:var(--t-xs);font-weight:600}
.svc-incl li{position:relative;padding-left:22px}
.svc-incl li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:9px;background:var(--red);clip-path:polygon(var(--lean) 0,100% 0,calc(100% - var(--lean)) 100%,0 100%)}
.svc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px}
.svc-quote{font-weight:800}
.cta-band{background:var(--bolt);padding:clamp(64px,7vw,104px) 0 clamp(48px,6vw,88px);clip-path:polygon(0 36px,100% 0,100% 100%,0 100%)}
.cta-band h2{color:var(--navy)}
.cta-band p{margin:16px 0 0;max-width:52ch;font-size:var(--t-s)}
.cta-band .btn:not(.call){background:transparent}
.cta-band .btn:not(.call):hover{background:rgba(1,43,106,.08)}

/* One page per service (/services/<name>) and the About page */
.crumbs{position:relative;margin:0 0 18px;font-size:var(--t-xs);color:var(--on-navy)}
.crumbs a{color:#fff;font-weight:700}
.detail{padding:var(--sec) 0}
.detail-grid{display:grid;gap:36px 56px;align-items:start}
.detail-text{display:grid;gap:18px;max-width:64ch}
.detail-text p{margin:0}
.detail-text h3{margin-top:14px}
.points{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.points li{position:relative;padding:14px 18px 14px 52px;background:var(--panel)}
.points li::before{content:"";position:absolute;left:18px;top:20px;width:20px;height:14px;background:var(--red);clip-path:polygon(var(--lean) 0,100% 0,calc(100% - var(--lean)) 100%,0 100%)}
.points b{display:block;font-stretch:112%;font-weight:800;color:var(--navy)}
.detail-side{display:grid;gap:20px;max-width:360px}
@media (min-width:860px){.detail-grid{grid-template-columns:minmax(0,1fr) 360px}.detail-side{position:sticky;top:120px}}

/* Where we work: a short service-area paragraph above the footer (home, #towns) */
.towns{background:var(--panel);padding:clamp(28px,4vw,48px) 0}
.towns h2{font-size:var(--t-m);font-stretch:112%;margin:0 0 10px}
.towns p{margin:0;max-width:70ch}
.reply-note{margin:-6px 0 0;font-weight:700;color:var(--navy);font-size:var(--t-xs)}

/* Quote form: square fields, labels above, the main button to send */
.quote{padding:var(--sec) 0}
.quote-grid{display:grid;gap:48px}
.qform{display:grid;gap:20px;max-width:720px}
.qrow{display:grid;gap:20px}
.qform label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--navy)}
.qform .opt{font-weight:400;color:var(--muted)}
.qform input,.qform select,.qform textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--paper);border:2px solid var(--steel);border-radius:0;padding:12px 14px;min-height:52px;width:100%}
.qform textarea{resize:vertical}
.qform input:focus-visible,.qform select:focus-visible,.qform textarea:focus-visible{border-color:var(--navy);outline:3px solid var(--navy);outline-offset:1px}
.qform fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px}
.qform legend{font-weight:700;color:var(--navy);padding:0;margin-bottom:8px;width:100%}
.qform .pick{flex-direction:row;align-items:center;gap:10px;font-weight:600;color:var(--ink);min-height:44px}
.qform .pick input{width:22px;height:22px;min-height:0;accent-color:var(--navy)}
.qform .btn.main{justify-self:start;min-height:56px;font-size:1.05rem}
.qform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* taste-skill-ignore: hidden spam-trap field, not a divider */
.privacy{margin:0;font-size:var(--t-xs);color:var(--muted);max-width:60ch}
.quote-side{background:var(--panel);padding:28px;align-self:start}
.quote-side h2{font-size:var(--t-m);font-stretch:118%}
.quote-side p{margin:12px 0 0}
@media (min-width:640px){.qrow{grid-template-columns:1fr 1fr}}
@media (min-width:860px){.quote-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}

/* Footer: the motif built large, then the details */
.foot{background:var(--navy);color:var(--on-navy);padding:0 0 calc(32px + env(safe-area-inset-bottom,0px));font-size:var(--t-xs)}
.mark{width:100%;height:clamp(48px,8svh,96px);margin-bottom:52px;background:var(--paper)}
.foot a{color:#fff}
.foot p{margin:0;line-height:1.7}
/* Four columns from 1000px: the company and its buttons, services, pages, contact with the hours.
   Written into every page by scripts/nav.py. */
.foot-cols{display:grid;gap:40px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.foot-brand,.foot-contact{grid-column:1/-1}
.foot-logo{display:inline-block}
.foot-logo img{height:68px;width:auto}
.foot-brand p{max-width:40ch;margin-top:14px}
.foot-now{display:inline-flex;align-items:center;gap:9px;margin-top:16px!important;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font-weight:700}
.foot-now[hidden]{display:none}
.foot-now::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 3px rgba(240,58,64,.2)}
.foot-now.is-open::before{background:#2fbf5a;box-shadow:0 0 0 3px rgba(47,191,90,.25),0 0 12px rgba(47,191,90,.7)}
.foot-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.foot .btn{min-height:46px;font-size:.95rem}
.foot .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.foot .btn.ghost:hover{background:rgba(255,255,255,.1)}
.foot-col h2{font-size:.78rem;font-style:normal;font-stretch:110%;font-weight:800;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;color:var(--quiet);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col li a{display:inline-flex;align-items:flex-start;gap:10px;color:var(--on-navy);text-decoration:none;font-weight:600;font-size:var(--t-xs)}
.foot-col li a::before{content:"";flex:none;width:9px;height:12px;margin-top:.32em;background:var(--bolt);clip-path:var(--bolt-path);transition:transform var(--t-hover) var(--ease-out)}
.foot-col li a:hover,.foot-col li a[aria-current]{color:#fff}
.foot-col li a:hover::before{transform:scale(1.25) rotate(-8deg)}
.foot-line{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;margin-bottom:14px;min-width:0}
.foot-line b{display:block;font-weight:800;overflow-wrap:anywhere;line-height:1.3}
.foot-line small{display:block;color:var(--quiet);font-size:.84rem;line-height:1.35}
.foot-line:hover b{color:var(--bolt)}
.foot-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--bolt);border:1px solid transparent;background:radial-gradient(circle at 30% 20%,rgba(255,210,0,.2),transparent 60%) padding-box,linear-gradient(150deg,#16203a,#0b0f18) padding-box,var(--g-spark) border-box;transition:transform var(--t-ui) var(--ease-out)}
.foot-ico svg{width:18px;height:18px}
.foot-line:hover .foot-ico{transform:translateY(-2px) rotate(-6deg)}
.foot .hours{margin-top:6px;border-collapse:separate;border-spacing:0 4px}
.foot .hours tr,.foot .hours tr:nth-child(odd){background:none}
.foot .hours th,.foot .hours td{background:rgba(255,255,255,.04);font-size:var(--t-xs);padding:8px 12px}
.foot .hours th{color:var(--quiet);border-radius:8px 0 0 8px}
.foot .hours td{color:#fff;border-radius:0 8px 8px 0}
.foot .hours tr.today th,.foot .hours tr.today td{background:rgba(255,210,0,.13);color:var(--bolt)}
.foot-end{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.foot small{color:var(--on-navy-muted);font-size:var(--t-xs)}
.foot .credit{color:var(--on-navy-muted);font-size:var(--t-xs);text-underline-offset:3px}
.foot .credit:hover{color:#fff}
@media (max-width:400px){.foot-col li a{font-size:.88rem;gap:8px}.foot-line b{font-size:.9rem}}
@media (min-width:1000px){.foot-cols{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.35fr)}.foot-brand,.foot-contact{grid-column:auto}}

@media (min-width:860px){
  .hero-grid{grid-template-columns:1.5fr 1fr}
  .svc-links{grid-template-columns:1fr 1fr}
  .qa .wrap{grid-template-columns:5fr 1fr 6fr}
  .qa p{grid-column:3}
    .svc-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .svc-row:nth-child(even) .svc-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .svc-row:nth-child(even) .svc-photo{order:2}
  .svc-photo img{aspect-ratio:5/4}
  /* the motif: the photo's inner edge is cut on the logo's slant */
  .svc-photo a{clip-path:polygon(0 0,100% 0,calc(100% - 56px) 100%,0 100%)}
  .svc-row:nth-child(even) .svc-photo a{clip-path:polygon(56px 0,100% 0,100% 100%,0 100%)}
}
@media (max-width:859px){
  .visit{display:block;min-height:0}
  .visit-photo{position:relative;height:52svh}
  .visit-wrap{margin-top:-80px;padding-top:0}
  .card{width:100%}
  /* on narrow screens the stroke becomes its own band under the words, so it never sits behind text */
  .hero{display:flex;flex-direction:column;padding-bottom:0}
  .motif{position:relative;order:2;top:auto;bottom:auto;right:auto;align-self:flex-end;width:118vw;height:min(62vw,340px);margin:40px -24vw 0 0}
}
@media (max-width:640px){
  body{font-size:1rem}
  .bar{gap:10px 12px;min-height:0}
  .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .brand img{height:40px}
  .bar .call{padding:8px 14px;min-height:44px}
  .hero h1{font-stretch:105%}
  .shots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
  .shot.land{grid-column:1/-1}
}

/* Motion. CSS only, so content never waits on a script. */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes slide{from{transform:translateX(18%)}to{transform:none}}
@keyframes shutter{from{clip-path:inset(0 0 0 100%);transform:scale(1.12)}to{clip-path:inset(0);transform:none}}
@keyframes strike{0%{clip-path:polygon(70% 0,100% 0,100% 0,70% 0)}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@keyframes flash{0%,100%{fill:var(--bolt)}8%,26%{fill:#fff}17%{fill:var(--bolt-hi)}}
@keyframes burst{0%{opacity:0;transform:scale(.4)}12%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes shine{0%,62%{transform:translate(0,0);opacity:0}64%{opacity:1}82%{transform:translate(560px,0);opacity:1}84%,100%{transform:translate(560px,0);opacity:0}}
@keyframes live{0%,88%,100%{opacity:1;filter:drop-shadow(0 0 22px rgba(255,210,0,.4))}90%{opacity:.4}91.5%{opacity:1;filter:drop-shadow(0 0 44px rgba(255,225,77,.95))}93%{opacity:.6}95%{opacity:1;filter:drop-shadow(0 0 32px rgba(255,225,77,.8))}}
@media (prefers-reduced-motion:no-preference) and (min-width:1500px){
  .bolt-g{animation:strike .45s .3s cubic-bezier(.7,0,.3,1) both}
  .bolt-main{animation:flash .7s .72s linear both}
  .bolt-burst{transform-box:fill-box;transform-origin:center;animation:burst 1.1s .72s var(--ease-out) both}
  .bolt-shine{transform-box:view-box;animation:shine 5s 2s ease-in-out infinite}
  .bolt{animation:live 7s 2.4s ease-in-out infinite}
}
@media (prefers-reduced-motion:no-preference){
  /* the signature move: the stroke slides in, then the words rise */
  .motif{animation:slide 1.1s cubic-bezier(.2,.7,.2,1) both}
  .hero h1,.hero .lead,.hero .acts,.hero .jump,.plate{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .motif-photo img{animation:shutter 1.3s .2s var(--ease-in-out) both}
  .hero h1{animation-delay:.1s}.hero .lead{animation-delay:.18s}.hero .acts,.hero .jump{animation-delay:.26s}.plate{animation-delay:.38s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:360px){.hero h1{font-stretch:100%;letter-spacing:-.03em}}

/* Reveal once: site.js marks parts that start below the fold, then lets each ease in, in reading order,
   the first time it comes into view. Without the script (or with reduced motion) nothing is hidden. */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:var(--d,0ms)}
.reveal-grow{opacity:0;transform:translateX(var(--from,0)) scale(.9)}
.reveal-grow.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform 1s var(--ease-out)}
.top.is-in .brand img{animation:power .9s steps(1,end) both}
@keyframes power{0%{opacity:.15}12%{opacity:1}20%{opacity:.3}32%{opacity:1}40%{opacity:.55}52%,100%{opacity:1}}
.reveal-img{clip-path:inset(0 0 100% 0)}
.reveal-img img{transform:scale(1.12)}
.reveal-img.is-in{clip-path:inset(0);transition:clip-path 1.1s var(--ease-in-out);transition-delay:var(--d,0ms)}
.reveal-img.is-in img{transform:none;transition:transform 1.5s var(--ease-soft);transition-delay:var(--d,0ms)}

/* Recent work: each photo opens full size */
.shot-link{display:block;overflow:hidden;cursor:zoom-in}
.shot-link img{transition:transform var(--t-reveal) var(--ease-soft)}
@media (hover:hover) and (pointer:fine){.shot-link:hover img{transform:scale(1.035)}}
.viewer{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;color:#fff}
.viewer::backdrop{background:var(--veil)}
.viewer[open]{display:grid;grid-template-rows:1fr auto;place-items:center;animation:fade var(--t-ui) var(--ease-out)}
.viewer-fig{margin:0;display:grid;place-items:center;gap:14px;padding:64px 72px 0;max-width:100%;max-height:100%}
.viewer-fig img{max-width:min(100%,1400px);max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain}
.viewer-fig figcaption{font-size:var(--t-s);color:var(--on-navy);text-align:center;max-width:60ch}
.viewer-bar{display:flex;gap:10px;padding:18px 0 26px}
.viewer button{font:inherit;font-weight:800;min-width:52px;min-height:52px;padding:0 18px;border:0;cursor:pointer;background:var(--paper);color:var(--navy);transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.viewer button:hover{background:var(--bolt)}
.viewer button:active{transform:scale(.97)}
.viewer button:focus-visible{outline:3px solid var(--bolt);outline-offset:3px}
.viewer-close{position:fixed;top:16px;right:16px}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Open now (from the real hours, Derry time) and today's row in the hours */
.hours tr.today th,.hours tr.today td{color:var(--navy);font-weight:800}
.hours tr.today{background:var(--bolt-soft)}

@media (prefers-reduced-motion:reduce){.reveal,.reveal-grow,.reveal-img,.reveal-img img{opacity:1;transform:none;clip-path:none}.top.is-in .brand img{animation:none}.brand img{transition:none}.viewer[open]{animation:none}.shot-link img{transition:none}}

@property --p{syntax:"<number>";inherits:true;initial-value:0}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .wire{animation:wire linear both;animation-timeline:scroll(root)}
    @keyframes wire{from{--p:0}to{--p:1}}
  }
}

/* Dark scheme (October 2026, Reggie's pick): black grid bands with yellow glows and lightning take turns with
   white and grey ones; one word per heading in a gradient (spark or arc on dark, ember on light). */
.grad{-webkit-background-clip:text;background-clip:text;color:transparent!important;padding:0 .08em .06em 0;background-image:var(--g-ember)}
.hero .grad,.faq .grad,.svc-row:nth-child(even) .grad{background-image:var(--g-spark)}
.work .grad{background-image:var(--g-arc)}
@media (forced-colors:active){.grad{background:none;color:CanvasText!important}}
.wire{bottom:-3px;height:3px;overflow:visible}
.wire i{background:var(--g-spark);background-size:100vw 100%}
.wire b{background:#fff;width:14px;margin-left:-14px;clip-path:none;box-shadow:0 0 14px 4px rgba(255,210,0,.8)}
.top :focus-visible,.hero :focus-visible,.work :focus-visible,.faq :focus-visible,.svc-row:nth-child(even) :focus-visible,.foot :focus-visible{outline-color:var(--bolt)}
.top .btn.call{background:var(--bolt);border-color:var(--bolt);color:var(--navy);border-radius:10px}
.top .btn.call:hover{background:var(--bolt-hi);border-color:var(--bolt-hi)}
.top .btn.call{white-space:nowrap}
@media (max-width:400px){.bar{gap:8px}.top .btn.call{font-size:.9rem;padding:8px 10px}.brand img{height:36px}.menu-btn{width:40px;padding:10px 8px}}

/* Lightning: a small yellow bolt before headings on black bands, a large faint one in the corner */
.work h2,.faq-head h2{position:relative;padding-left:.62em}
.work h2::before,.faq-head h2::before{content:"";position:absolute;left:0;top:.08em;width:.48em;height:.86em;background:var(--bolt);clip-path:var(--bolt-path);filter:drop-shadow(0 0 12px rgba(255,210,0,.6))}
.work,.faq{position:relative;overflow:hidden}
.work::after,.faq::after{content:"";position:absolute;top:-40px;right:-60px;width:420px;height:620px;background:linear-gradient(180deg,rgba(255,210,0,.15),rgba(255,210,0,0));clip-path:var(--bolt-path);pointer-events:none}
.work > *,.faq > *{position:relative;z-index:1}

/* Rounded corners like Goldmark; the slanted main button and photo edges keep the logo's cut */
.btn:not(.main):not(.card-btn){border-radius:10px}
.svc-links a,.review,.card,.quote-side,.points li,.shot img,.shot-link,.qa .wrap,.detail-side .shot img{border-radius:14px}
.plate{border-radius:0 0 14px 14px}

/* Hero: navy with a yellow glow and a red one */
.hero{background:radial-gradient(circle at 0% 0%,rgba(255,210,0,.2),transparent 42%),radial-gradient(circle at 100% 100%,rgba(240,58,64,.2),transparent 45%),var(--navy)}
.hero .btn.ghost{border-color:rgba(255,255,255,.7)}

/* What we do / Other services: white; each service gets a yellow bolt on a navy tile */
.svc-links a{background:#fff;border:1px solid var(--line);padding-left:64px}
.svc-links a::before{left:16px;top:16px;width:34px;height:34px;border-radius:9px;background:var(--navy);clip-path:none}
.svc-links a::after{content:"";position:absolute;left:24px;top:21px;width:18px;height:24px;background:var(--bolt);clip-path:var(--bolt-path);transition:transform var(--t-ui) var(--ease-out)}
.svc-links a:hover{background:var(--panel)}
.svc-links a:hover::before{transform:none}
.svc-links a:hover::after{transform:scale(1.15) rotate(-6deg)}
.points li::before{background:var(--g-ember);clip-path:var(--bolt-path);width:14px;height:20px;top:16px;left:22px}

/* Recent work and job photos: black grid, yellow glow top right, red bottom left */
.work{background:radial-gradient(circle at 95% 0%,rgba(255,210,0,.16),transparent 42%),radial-gradient(circle at 0% 100%,rgba(240,58,64,.16),transparent 48%),var(--grid),var(--black);color:var(--on-navy);padding-top:var(--sec)}
.work h2{color:#fff}
.work-note,.work .shot figcaption{color:var(--quiet)}
.work a{color:#fff}

/* Reviews: grey; the rules become the ember gradient */
.review figcaption{border-top:3px solid transparent;border-image:var(--g-ember) 1}

/* Questions: black grid with yellow and blue glows, each question on a dark card.
   Right after a black "jobs" band (service pages) it turns navy, so neighbours never match. */
.faq{background:radial-gradient(circle at 100% 0%,rgba(255,210,0,.14),transparent 40%),radial-gradient(circle at 0% 60%,rgba(58,111,240,.2),transparent 45%),var(--grid),var(--black);padding-bottom:var(--sec)}
.work + .faq{background:radial-gradient(circle at 0% 0%,rgba(255,210,0,.18),transparent 42%),radial-gradient(circle at 100% 100%,rgba(240,58,64,.18),transparent 45%),var(--navy)}
.faq-head{background:transparent;clip-path:none;padding-bottom:clamp(20px,3vw,32px)}
.faq-head h2{color:#fff}
.qa,.qa:nth-child(odd){background:transparent;padding:6px 0}
.qa .wrap{background:var(--card);border:1px solid rgba(255,255,255,.08);padding-top:clamp(18px,2.4vw,28px);padding-bottom:clamp(18px,2.4vw,28px);max-width:1120px}
.qa:nth-child(odd) .wrap{background:#0d1320}
.qa h3{color:#fff}
.qa p{color:var(--on-navy)}
.qa a{color:var(--bolt)}

/* Services page: rows take turns between white and black grid */
.svc-row:nth-child(even){background:radial-gradient(circle at 100% 0%,rgba(255,210,0,.13),transparent 40%),var(--grid),var(--black);color:var(--on-navy)}
.svc-row:nth-child(even) h2,.svc-row:nth-child(even) .svc-key{color:#fff}
.svc-row:nth-child(even) .svc-photo figcaption{color:var(--quiet)}
.svc-row:nth-child(even) .svc-quote{color:var(--bolt)}
.svc-row:nth-child(even) .btn:not(.main){background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.svc-row:nth-child(even) .btn:not(.main):hover{background:rgba(255,255,255,.1)}

/* Call or email: the photo card, on black */
.visit{background:var(--black)}

/* Towns: white, between the photo above and the black footer */
.towns{background:#fff}

/* Footer: black grid, spark rule, the stripes on black */
.foot{position:relative;background:radial-gradient(circle at 100% 100%,rgba(255,210,0,.12),transparent 40%),var(--grid),var(--black);border-top:3px solid transparent;border-image:var(--g-spark) 1}
.mark{background:transparent}
.mark polygon:nth-child(3){fill:#1b2333}
.foot small,.foot .credit{color:var(--quiet)}