/* Empire Electric, the client layer.
   Concept: a crown over a crown black ground. His gold crown logo sets the page
   in one near black and two golds, and the crown itself is cut into the seams,
   the texture and the buttons.
   Colours, all from images/logo.png (sha256 9dffef1171f4d1238bdd78cf900d9a9f62856f7e05db00349833b982347b929e):
     deep gold   #D0B050  sampled, 15 percent of the coloured pixels
     pale gold   #F0D070  sampled, the highlight on the crown and letters
     bronze      #B09030  sampled, the shaded side of the crown
     crown black #181406  derived from #D0B050 walked to lightness 0.06
     ivory       #F6F1E3  derived, a faint tint of the deep gold
   Shape system: the five zigzag crown points become crown teeth rising from the
   top of dark bands; the two curved bands under the crown become a double bar,
   thick over thin, under every heading and along seams; the round finials become
   a row of gold balls strung on a line; the crossing zigzags become a diamond
   lattice behind dark bands and diamond markers.
   Devices: 1 shape system, 3 seams, 4 lattice texture, 7 count over the crown
   band, 8 two gold intents with hard offset shadows.
   References: home-375x740-scroll0.png (photo on top, logo alone in the header),
   1st choice hero.png and m-01.png (one gold accent on a deep ground), forge
   mobile-hero.png (one logo shape on every control). */

:root{
  --ee-gold:#D0B050;
  --ee-pale:#F0D070;
  --ee-bronze:#B09030;
  --ee-black:#181406;
  --ee-ivory:#F6F1E3;
  --ee-lattice:repeating-linear-gradient(60deg,rgba(208,176,80,.07) 0 1px,transparent 1px 30px),
               repeating-linear-gradient(-60deg,rgba(208,176,80,.07) 0 1px,transparent 1px 30px);
  --ee-band:linear-gradient(to bottom,var(--ee-gold) 0 5px,transparent 5px 8px,var(--ee-pale) 8px 10px);
}

/* every band keeps its content above the texture and the seams */
.band:not(.band--hero) > .shell{position:relative;z-index:1}

/* nav: the crown black bar with a thin double gold rule along its foot */
.band--nav{--nav-edge:6px}
.band--nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background-color:transparent;background-image:linear-gradient(to bottom,var(--ee-gold) 0 3px,transparent 3px 4px,var(--ee-pale) 4px 6px);pointer-events:none}

/* the squared face at its 700 weight, the one that spaces his name cleanly */
body{text-rendering:geometricPrecision}
.nav__wordmark,.rbadge text{font-weight:700;text-rendering:geometricPrecision}

/* the crown outline, five points, used as a ghost mark */
:root{--ee-crown:polygon(0% 100%,0% 22%,17% 62%,29% 12%,41% 56%,50% 0%,59% 56%,71% 12%,83% 62%,100% 22%,100% 100%)}

/* hero: the engine's angular slash already cuts the photo panel like a crown
   point, edged in the pale gold */
.band--hero p.hero__count{color:var(--ee-pale)}
/* on a phone the hero pair stacks full width so the number reads whole */
@media (max-width:767px){.band--hero .ctapair .btn{flex:1 1 100%}}
.band--hero p.hero__count::after{content:"";display:block;width:96px;height:10px;margin-top:10px;
  background-color:transparent;background-image:var(--ee-band);pointer-events:none}

/* headings: the crown band, thick over thin, under every band title */
.band__title::after{content:"";display:block;width:84px;height:10px;margin:16px auto 0;
  background-color:transparent;background-image:var(--ee-band);pointer-events:none}
.band__title--left::after,.band__head--left .band__title::after{margin-left:0}

/* buttons: deep gold metal means request, a pale gold outline means call,
   both with a hard offset shadow like a stamped plate */
.btn--primary{background-color:var(--ee-gold);
  background-image:linear-gradient(180deg,var(--ee-pale),var(--ee-gold) 55%,var(--ee-gold));
  box-shadow:4px 4px 0 var(--ee-bronze)}
.band[data-ground="dark"] .btn--ghost{border-color:var(--ee-pale);color:var(--ee-pale);box-shadow:4px 4px 0 rgba(208,176,80,.35)}

/* services: white; the crown band runs along its top seam under the hero */
.band--services[data-ground]::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background-color:transparent;background-image:var(--ee-band);pointer-events:none;z-index:2}
.svc__photo{border-bottom:5px solid var(--ee-gold)}

/* form and about: crown black with the lattice, crown teeth rising from its top
   edge into the services band, the crown band along its foot */
.band--form-about[data-ground]{background-color:var(--ee-black);background-image:var(--ee-lattice)}
.band--form-about[data-ground]::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
  background-color:transparent;background-image:conic-gradient(from 135deg at 50% 0,var(--ee-black) 90deg,transparent 0);
  background-size:36px 18px;background-repeat:repeat-x;pointer-events:none;z-index:2}
/* the contact card: the lattice, then a row of crown points along its foot */
.contact-panel{background-color:rgba(24,20,6,.6);
  background-image:conic-gradient(from 135deg at 50% 0,rgba(208,176,80,.22) 90deg,transparent 0),
                   linear-gradient(to bottom,var(--ee-gold) 0 4px,transparent 4px 7px,var(--ee-pale) 7px 9px),
                   var(--ee-lattice);
  background-size:44px 30px,100% 9px,auto,auto;
  background-position:left bottom 9px,left bottom,0 0,0 0;
  background-repeat:repeat-x,no-repeat,repeat,repeat}
.contact-panel__info{display:flex;gap:10px;align-items:center}
.contact-panel__info svg{width:22px;height:22px;flex:0 0 22px;color:var(--ee-pale)}
.band--form-about[data-ground]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background-color:transparent;background-image:var(--ee-band);pointer-events:none;z-index:2}

/* why: white and flat on purpose, a rest beat; a gold diamond marks each reason */
.why__item{position:relative}

/* gallery: ivory, each photo framed by a thin deep gold line */
.gal__item{outline:2px solid var(--ee-gold);outline-offset:-2px}

/* reviews: crown black with the lattice, the finial row strung along its top
   seam, the crown band along its foot */
.band--reviews[data-ground]{background-color:var(--ee-black);background-image:var(--ee-lattice)}
.band--reviews[data-ground]::before{content:"";position:absolute;left:0;right:0;top:-7px;height:14px;
  background-color:transparent;
  background-image:radial-gradient(circle at 50% 50%,var(--ee-gold) 0 5px,transparent 5.5px),linear-gradient(var(--ee-gold),var(--ee-gold));
  background-size:36px 14px,100% 2px;background-position:0 0,0 6px;background-repeat:repeat-x,no-repeat;pointer-events:none;z-index:2}
.band--reviews[data-ground]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background-color:transparent;background-image:var(--ee-band);pointer-events:none;z-index:2}
.review-card{border:2px solid var(--ee-gold);border-bottom:8px double var(--ee-gold)}
/* a ghost crown behind the reviews heading, a shape and never words */
.band--reviews > .shell::before{content:"";position:absolute;right:2%;top:-6px;width:260px;height:170px;
  background-color:var(--ee-gold);opacity:.07;clip-path:var(--ee-crown);pointer-events:none;z-index:-1}

/* areas: ivory with the stake card */
.chip{border:2px solid var(--ee-gold)}
.areas-base{border:2px solid var(--ee-gold);border-bottom:8px double var(--ee-gold);
  background-image:conic-gradient(from 135deg at 50% 0,rgba(208,176,80,.16) 90deg,transparent 0);
  background-size:36px 22px;background-position:left top;background-repeat:repeat-x}
.map{outline:2px solid var(--ee-gold);outline-offset:-2px}
/* the map box before the live map paints: crown black with the lattice */
.map__open{background-color:var(--ee-black);background-image:var(--ee-lattice);color:var(--ee-pale)}
.map__open .map__cta,.map__open .map__where{color:var(--ee-pale)}

/* footer: crown black, crown teeth rising from its top, a fainter lattice */
.band--footer[data-ground]{background-color:var(--ee-black);
  background-image:repeating-linear-gradient(60deg,rgba(208,176,80,.05) 0 1px,transparent 1px 30px),
                   repeating-linear-gradient(-60deg,rgba(208,176,80,.05) 0 1px,transparent 1px 30px)}
.band--footer[data-ground]::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;
  background-color:transparent;background-image:conic-gradient(from 135deg at 50% 0,var(--ee-black) 90deg,transparent 0);
  background-size:36px 18px;background-repeat:repeat-x;pointer-events:none;z-index:2}

/* call bar: the request cell in deep gold metal, the call cell in crown black */
.callbar__book{background-color:var(--ee-gold);background-image:linear-gradient(180deg,var(--ee-pale),var(--ee-gold) 60%)}