/* ============================================================
   CPE Consulting — "Live Circuit" design system
   A blueprint/schematic identity for an electrical engineering
   and building-automation consultancy: deep drafting-table navy,
   copper conductor accent, condensed structural display type,
   and a hand-drawn circuit trace as the page's signature motif.
   ============================================================ */

:root{
  --navy-950:#081a2e;
  --navy-900:#0f2a48;
  --navy-800:#153a5f;
  --navy-700:#1f4d78;
  --blue-mid:#3574a6;
  --paper:#f5f3ec;
  --paper-raised:#ffffff;
  --ink:#141e2b;
  --ink-soft:#4b5868;
  --ink-faint:#7c8896;
  --copper:#c8752f;
  --copper-bright:#e79a4c;
  --copper-soft:rgba(200,117,47,.13);
  --circuit-green:#2fa62c;
  --hairline:rgba(10,30,55,.13);
  --hairline-soft:rgba(10,30,55,.07);
  --radius-sm:3px;
  --radius:6px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(8,26,46,.06), 0 1px 1px rgba(8,26,46,.04);
  --shadow-md:0 6px 16px rgba(8,26,46,.08), 0 2px 6px rgba(8,26,46,.05);
  --shadow-lg:0 20px 48px rgba(8,26,46,.16), 0 6px 18px rgba(8,26,46,.08);
  --shadow-navy:0 22px 50px rgba(4,14,26,.38);
  --font-display:"Big Shoulders Display","Arial Narrow",Arial,sans-serif;
  --font-body:"IBM Plex Sans",Arial,Helvetica,sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
  --maxw:1160px;
  --ease:cubic-bezier(.22,.9,.32,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* subtle drafting-paper grain so flat colour fields don't feel sterile */
body{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(10,30,55,.05) 1px, transparent 0);
  background-size:26px 26px;
  background-attachment:fixed;
}

img{max-width:100%;height:auto;display:block;}
a{color:var(--navy-700);text-decoration:none;transition:color .18s var(--ease);}
a:hover{color:var(--copper);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--copper);outline-offset:3px;border-radius:2px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-950);
  line-height:1.05;
  font-weight:700;
  letter-spacing:.002em;
  margin:0 0 .55em;
}
h1{font-size:3.1rem;letter-spacing:-.005em;}
h2{font-size:2.05rem;}
h3{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.16rem;
  letter-spacing:0;
  margin-top:1.8em;
  color:var(--navy-900);
  padding-bottom:.4em;
  border-bottom:1px solid var(--hairline);
}
p{margin:0 0 1.15em;color:var(--ink-soft);font-size:1rem;}
ul,ol{color:var(--ink-soft);padding-left:1.3em;}
li{margin-bottom:.5em;}
b,strong{color:var(--ink);font-weight:600;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- background grid texture for dark panels ---------- */
.blueprint-bg{
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size:34px 34px;
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--copper);color:#fff;
  padding:10px 16px;z-index:200;font-family:var(--font-mono);font-size:.82rem;
}
.skip-link:focus{left:8px;top:8px;}

/* ---------- top utility bar ---------- */
.topbar{
  background:var(--navy-950);
  color:#aebdcd;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.05em;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 28px;flex-wrap:wrap;gap:6px;
}
.topbar a{color:#dbe4ee;}
.topbar a:hover{color:var(--copper-bright);}
.topbar .tb-sep{opacity:.4;margin:0 10px;}

/* ---------- header / nav ---------- */
header.site-header{
  background:rgba(245,243,236,.86);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:100;
  box-shadow:0 1px 0 rgba(8,26,46,.03);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 28px;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:42px;width:auto;}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.01em;color:var(--navy-950);line-height:1.1;}
.brand-text small{display:block;font-family:var(--font-mono);font-weight:500;font-size:.6rem;letter-spacing:.11em;color:var(--copper);text-transform:uppercase;margin-top:3px;}

nav.mainnav{display:flex;}
nav.mainnav > ul{list-style:none;display:flex;gap:2px;margin:0;padding:0;}
nav.mainnav > ul > li{position:relative;}
nav.mainnav > ul > li > a{
  display:block;padding:9px 14px;font-size:.85rem;font-weight:600;
  color:var(--navy-900);border-radius:var(--radius-sm);
  border-bottom:2px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
nav.mainnav > ul > li > a:hover,
nav.mainnav > ul > li.active > a{color:var(--copper);border-bottom-color:var(--copper);}
nav.mainnav .dropdown{
  display:none;position:absolute;top:100%;left:0;background:var(--paper-raised);
  border:1px solid var(--hairline);border-top:3px solid var(--copper);
  min-width:264px;padding:6px 0;box-shadow:var(--shadow-lg);border-radius:0 0 var(--radius) var(--radius);
  animation:dropIn .16s var(--ease);
}
@keyframes dropIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
nav.mainnav li:hover .dropdown,
nav.mainnav li:focus-within .dropdown{display:block;}
nav.mainnav .dropdown a{
  display:block;padding:10px 18px;font-size:.83rem;color:var(--ink-soft);font-weight:500;
  border-left:2px solid transparent;
}
nav.mainnav .dropdown a:hover{background:var(--copper-soft);color:var(--copper);border-left-color:var(--copper);}

.navtoggle{display:none;background:none;border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;}
.navtoggle span,.navtoggle::before,.navtoggle::after{content:"";display:block;width:20px;height:2px;background:var(--navy-950);margin:4px 0;}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(53,116,166,.35), transparent 60%),
    linear-gradient(165deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--navy-800) 100%);
  color:#eef3f8;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:42px 42px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
}
/* drafting corner ticks — a quiet nod to technical drawing title blocks */
.hero .wrap::before,.hero .wrap::after,
.page-head .wrap::before,.page-head .wrap::after{
  content:"";position:absolute;width:18px;height:18px;
  border-top:1.5px solid rgba(231,154,76,.55);border-left:1.5px solid rgba(231,154,76,.55);
  top:14px;left:28px;
}
.hero .wrap::after{left:auto;right:28px;border-left:none;border-right:1.5px solid rgba(231,154,76,.55);}
.page-head .wrap::before,.page-head .wrap::after{top:12px;}
.page-head .wrap::after{left:auto;right:28px;border-left:none;border-right:1.5px solid rgba(231,154,76,.5);}

.hero-inner{position:relative;padding:104px 28px 88px;max-width:var(--maxw);margin:0 auto;}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper-bright);display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  border:1px solid rgba(231,154,76,.4);padding:6px 12px;border-radius:20px;background:rgba(231,154,76,.06);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--copper-bright);box-shadow:0 0 0 3px rgba(231,154,76,.25);}
.hero h1{color:#fff;max-width:760px;font-size:3.4rem;}
.hero p.lead{color:#c3d2e3;max-width:600px;font-size:1.14rem;line-height:1.7;}
.hero-schematic{position:absolute;right:-40px;bottom:-30px;opacity:.16;width:340px;}

/* circuit trace: the page's signature line-art element */
.circuit-trace{position:relative;max-width:640px;margin-top:36px;height:64px;}
.circuit-trace svg{width:100%;height:100%;overflow:visible;}
.circuit-trace path{
  fill:none;stroke:var(--copper-bright);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:900;stroke-dashoffset:900;
  animation:draw 2.2s var(--ease) .3s forwards;
}
.circuit-trace circle{
  fill:var(--copper-bright);opacity:0;
  animation:nodeIn .4s ease forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes nodeIn{to{opacity:1;}}
.circuit-trace circle:nth-of-type(1){animation-delay:.5s;}
.circuit-trace circle:nth-of-type(2){animation-delay:1.1s;}
.circuit-trace circle:nth-of-type(3){animation-delay:1.3s;}
.circuit-trace circle:nth-of-type(4){animation-delay:1.7s;}
.circuit-trace circle:nth-of-type(5){animation-delay:2.1s;}

/* ---------- page header (non-home pages) ---------- */
.page-head{
  background:linear-gradient(165deg,var(--navy-950) 0%,var(--navy-800) 100%);
  color:#eef3f8;padding:46px 28px 40px;position:relative;overflow:hidden;
}
.page-head::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:38px 38px;pointer-events:none;
}
.page-head .wrap{position:relative;display:flex;align-items:center;gap:20px;}
.page-head img.section-icon{width:54px;height:54px;object-fit:contain;background:rgba(255,255,255,.08);padding:9px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.1);}
.page-head h1{color:#fff;margin:0;font-size:2.15rem;}
.page-head .crumb{font-family:var(--font-mono);font-size:.72rem;color:var(--copper-bright);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}

/* ---------- layout / content ---------- */
main{display:block;}
.content-section{padding:56px 28px 24px;}
.content-section .wrap{max-width:800px;}
.content-section .wrap.wide{max-width:var(--maxw);}
.content-section h2{position:relative;padding-left:18px;margin-bottom:.85em;}
.content-section h2::before{
  content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;
  background:linear-gradient(180deg,var(--copper),var(--copper-bright));border-radius:2px;
}

/* subnav pills for sections with siblings */
.subnav{padding:20px 28px 0;}
.subnav ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;max-width:var(--maxw);margin:0 auto;}
.subnav a{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.03em;
  border:1px solid var(--hairline);padding:8px 14px;border-radius:20px;color:var(--navy-800);
  background:var(--paper-raised);transition:all .18s var(--ease);box-shadow:var(--shadow-sm);
}
.subnav a:hover{border-color:var(--copper);color:var(--copper);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.subnav a.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}

/* card grid (used on section landing pages) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:30px 0;}
.card{
  background:var(--paper-raised);border:1px solid var(--hairline);
  padding:24px 24px 22px;border-radius:var(--radius);
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--copper),var(--copper-bright));
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent;}
.card:hover::before{transform:scaleX(1);}
.card h3{margin-top:0;font-size:1.05rem;border-bottom:none;padding-bottom:0;}
.card p{font-size:.93rem;margin-bottom:.6em;}
.card a.card-link{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--copper);font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.card a.card-link::after{content:"\2192";transition:transform .18s var(--ease);}
.card a.card-link:hover::after{transform:translateX(3px);}

/* spec/callout box */
.spec-box{
  background:var(--paper-raised);border:1px solid var(--hairline);border-left:4px solid var(--navy-700);
  padding:18px 22px;margin:24px 0;font-size:.94rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:var(--shadow-sm);
}
.spec-box .label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-700);display:block;margin-bottom:6px;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.03em;
  padding:12px 22px;border-radius:var(--radius-sm);font-weight:600;position:relative;overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-primary{background:var(--copper);color:#fff;box-shadow:0 8px 20px rgba(200,117,47,.28);}
.btn-primary:hover{background:var(--copper-bright);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(200,117,47,.36);}
.btn-outline{border:1px solid rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{border-color:var(--copper-bright);color:var(--copper-bright);transform:translateY(-2px);}

/* content area default table-derived elements cleanup */
.content-section table{width:100%;border-collapse:collapse;margin:1.4em 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.content-section table th{background:var(--navy-900);color:#fff;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;text-align:left;}
.content-section table th,.content-section table td{padding:11px 14px;border:1px solid var(--hairline);}
.content-section table tr:nth-child(even) td{background:rgba(10,30,55,.02);}
.content-section img{margin:14px 0;border:1px solid var(--hairline);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);}
.content-section ul.ul_square li{list-style:square;}
.content-section a{border-bottom:1px solid var(--copper-soft);}
.content-section a:hover{border-bottom-color:var(--copper);}

/* accreditation strip */
.accred-strip{background:var(--paper-raised);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:26px 28px;}
.accred-strip .wrap{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;}
.accred-strip img{max-height:50px;width:auto;opacity:.75;filter:grayscale(15%);transition:opacity .2s var(--ease);}
.accred-strip img:hover{opacity:1;}

/* footer */
footer.site-footer{background:var(--navy-950);color:#aebdcd;margin-top:48px;position:relative;}
footer.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--copper),var(--copper-bright),var(--circuit-green));}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding:52px 28px 30px;max-width:var(--maxw);margin:0 auto;}
footer.site-footer h4{color:#fff;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:16px;}
footer.site-footer a{color:#aebdcd;}
footer.site-footer a:hover{color:var(--copper-bright);}
footer.site-footer ul{list-style:none;padding:0;margin:0;}
footer.site-footer li{margin-bottom:9px;font-size:.88rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 28px;text-align:center;font-family:var(--font-mono);font-size:.72rem;color:#7c8ba0;}

/* contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;}
.contact-card{background:var(--paper-raised);border:1px solid var(--hairline);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.contact-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--copper),var(--copper-bright));}
.contact-card h3{margin-top:0;border-bottom:none;}
.contact-card .addr{font-family:var(--font-mono);font-size:.92rem;color:var(--ink-soft);line-height:1.9;}
form.contact-form label{display:block;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy-700);margin:14px 0 6px;}
form.contact-form input,form.contact-form textarea{
  width:100%;border:1px solid var(--hairline);padding:11px 13px;font-family:var(--font-body);font-size:.94rem;
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
form.contact-form input:focus,form.contact-form textarea:focus{border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-soft);outline:none;}
form.contact-form textarea{resize:vertical;min-height:120px;}

/* custom scrollbar (webkit) — quiet, on-brand */
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:#c7cdd6;border-radius:6px;border:3px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{background:var(--copper);}

@media (max-width:880px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  nav.mainnav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper-raised);
    border-bottom:1px solid var(--hairline);flex-direction:column;max-height:80vh;overflow:auto;box-shadow:var(--shadow-lg);
  }
  nav.mainnav.open{display:block;}
  nav.mainnav > ul{flex-direction:column;}
  nav.mainnav .dropdown{display:block;position:static;border:none;box-shadow:none;padding-left:14px;animation:none;}
  .navtoggle{display:block;}
  .hero-inner{padding:70px 24px 56px;}
  .hero h1{font-size:2.3rem;}
  .hero-schematic{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  h1{font-size:2.1rem;}
  .page-head h1{font-size:1.7rem;}
}