/* ============================================================
   Monopole Consulting, LLC — shared stylesheet
   Palette drawn from the trade: drawing-sheet ink, copper
   conductor, arc-flash safety yellow, blueline paper.
   ============================================================ */
:root{
  --ink:        #06101a;   /* drawing field / energized sections */
  --sheet:      #0d1e2d;   /* raised dark surface */
  --sheet-2:    #12293b;
  --paper:      #f1f4f6;   /* print sections */
  --paper-2:    #e3e9ed;
  --copper:     #c87a3e;   /* conductor — primary accent */
  --copper-lt:  #e09a5d;
  --volt:       #ffc845;   /* safety yellow — live elements only */
  --steel:      #8ba3b4;   /* muted type on dark */
  --ink-soft:   #47606f;   /* muted type on light */
  --hair-dark:  rgba(255,255,255,.13);
  --hair-light: rgba(6,16,26,.14);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:inherit}

:focus-visible{outline:2px solid var(--volt); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--volt); color:var(--ink);
  padding:10px 16px; font-family:var(--mono); font-size:13px}

/* ---------- type roles ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--copper-lt); margin:0 0 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--copper); flex:none}
.eyebrow--ink{color:#9a5f2c}
.eyebrow--ink::before{background:#9a5f2c}

h1,h2,h3,h4{font-family:var(--display); font-variation-settings:"wdth" 112; margin:0; line-height:1.02}
h1{font-weight:800; font-size:clamp(38px,6.2vw,74px); letter-spacing:-.022em}
h2{font-weight:800; font-size:clamp(29px,3.8vw,46px); letter-spacing:-.018em}
h3{font-weight:700; font-size:20px; letter-spacing:-.008em; line-height:1.2}
h4{font-weight:700; font-size:16.5px; letter-spacing:-.004em; line-height:1.25}

.lede{font-size:clamp(17px,1.65vw,20px); line-height:1.62; color:var(--steel); max-width:60ch; margin:22px 0 0}
.lede--ink{color:var(--ink-soft)}

/* ---------- header ---------- */
.masthead{
  position:sticky; top:0; z-index:50; background:rgba(6,16,26,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hair-dark);
}
.masthead__in{display:flex; align-items:center; gap:24px; height:74px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.brand__mark{width:26px; height:32px; flex:none; color:var(--copper)}
.brand__txt{font-family:var(--display); font-variation-settings:"wdth" 108;
  font-weight:800; font-size:15.5px; letter-spacing:.005em; line-height:1.05}
.brand__txt span{display:block; font-family:var(--mono); font-weight:400;
  font-size:9.5px; letter-spacing:.22em; color:var(--steel); margin-top:3px}

.nav{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav a{font-size:14px; text-decoration:none; color:var(--steel); transition:color .18s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--paper)}
.nav__tel{font-family:var(--mono); font-size:13.5px; color:var(--paper)!important}

.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 22px; border:1px solid var(--copper); color:var(--ink);
  background:var(--copper); transition:background .18s, border-color .18s, color .18s;
  cursor:pointer; font-weight:500;
}
.btn:hover{background:var(--copper-lt); border-color:var(--copper-lt)}
.btn--ghost{background:transparent; color:var(--paper); border-color:var(--hair-dark)}
.btn--ghost:hover{background:transparent; border-color:var(--copper); color:var(--copper-lt)}
.btn--ink{color:var(--paper)}

@media (max-width:980px){
  .nav a:not(.nav__tel){display:none}
  .masthead__in{height:66px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(64px,9vw,112px) 0 0; position:relative; overflow:hidden}
.hero--page{padding-bottom:clamp(56px,7vw,88px)}
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--hair-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair-dark) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 60% 0%, #000 15%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 60% 0%, #000 15%, transparent 78%);
}
.hero__in{position:relative}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal; color:var(--copper-lt)}
.hero__cta{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); margin:0 0 20px}
.crumb a{text-decoration:none; color:var(--steel); transition:color .18s}
.crumb a:hover{color:var(--copper-lt)}
.crumb span{margin:0 8px; opacity:.5}

/* ---------- one-line diagram ---------- */
.oneline{margin-top:clamp(52px,7vw,84px); position:relative}
.oneline__cap{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); border-bottom:1px solid var(--hair-dark); padding-bottom:10px; margin-bottom:6px;
}
.oneline svg{width:100%; height:auto}
.ol-cond{stroke:var(--steel); stroke-width:1.4; fill:none; opacity:.55}
.ol-node{stroke:var(--copper); stroke-width:1.6; fill:var(--ink)}
.ol-lbl{font-family:var(--mono); font-size:11px; fill:var(--paper); letter-spacing:.06em}
.ol-sub{font-family:var(--mono); font-size:8.6px; fill:var(--steel); letter-spacing:.14em}
.ol-tag{font-family:var(--mono); font-size:8.6px; fill:var(--copper-lt); letter-spacing:.14em}
.ol-pulse{
  stroke:var(--volt); stroke-width:1.8; fill:none; stroke-linecap:round;
  stroke-dasharray:26 1100; filter:drop-shadow(0 0 6px rgba(255,200,69,.55));
  animation:flow 5.2s linear infinite;
}
.ol-pulse--b{animation-delay:.35s}
.ol-pulse--c{animation-delay:.7s}
@keyframes flow{from{stroke-dashoffset:1126} to{stroke-dashoffset:0}}

/* ---------- section frames ---------- */
.section{padding:clamp(72px,9vw,116px) 0}
.section--tight{padding:clamp(56px,7vw,88px) 0}
.section--paper{
  background:var(--paper); color:var(--ink);
  background-image:
    linear-gradient(rgba(6,16,26,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,16,26,.045) 1px, transparent 1px);
  background-size:32px 32px;
}
.section__head{max-width:72ch; margin-bottom:clamp(40px,5vw,60px)}

.stitch{height:56px; background:var(--paper); position:relative}
.stitch--dark{background:var(--ink)}
.stitch::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(var(--copper), transparent)}
.stitch--dark::before{background:linear-gradient(transparent, var(--copper))}
.stitch::after{content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
  transform:translate(-50%,-50%) rotate(45deg); border:1.5px solid var(--copper); background:var(--paper)}
.stitch--dark::after{background:var(--ink)}

/* ---------- services grid ---------- */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair-light);
  border:1px solid var(--hair-light)}
.svc__item{background:var(--paper); padding:clamp(26px,3vw,38px); display:flex; flex-direction:column}
.svc__art{color:#0d2233; margin-bottom:26px}
.svc__no{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:#9a5f2c; display:block; margin-bottom:12px}
.svc__item p{color:var(--ink-soft); font-size:15.5px; margin:12px 0 0}
.svc__list{list-style:none; margin:18px 0 0; padding:0; border-top:1px solid var(--hair-light); padding-top:16px}
.svc__list li{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft);
  padding:5px 0 5px 16px; position:relative}
.svc__list li::before{content:""; position:absolute; left:0; top:12px; width:7px; height:1px; background:var(--copper)}
.svc__more{margin-top:auto; padding-top:22px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:#9a5f2c; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:gap .18s}
.svc__more:hover{gap:13px}
@media (max-width:900px){.svc{grid-template-columns:1fr}}

/* ---------- industries ---------- */
.ind{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--hair-dark);
  border:1px solid var(--hair-dark)}
.ind__item{background:var(--ink); padding:30px 24px 32px; transition:background .22s}
.ind__item:hover{background:var(--sheet)}
.ind__art{color:var(--copper); margin-bottom:22px}
.ind__item h3{font-size:17px; margin-bottom:10px}
.ind__item p{font-size:14.5px; line-height:1.55; color:var(--steel); margin:0}
@media (max-width:1000px){.ind{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ind{grid-template-columns:1fr}}

/* ---------- capability strip ---------- */
.strip{border-top:1px solid var(--hair-light); border-bottom:1px solid var(--hair-light);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair-light); margin-top:clamp(48px,6vw,72px)}
.strip div{background:var(--paper); padding:26px 22px}
.strip dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#9a5f2c; margin-bottom:8px}
.strip dd{margin:0; font-size:15px; color:var(--ink-soft); line-height:1.5}
@media (max-width:820px){.strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- prose (service pages) ---------- */
.prose{max-width:68ch}
.prose h2{margin:clamp(44px,5vw,64px) 0 20px; font-size:clamp(25px,3vw,34px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:34px 0 12px}
.prose p{margin:0 0 18px; color:var(--ink-soft)}
.prose strong{color:var(--ink); font-weight:600}
.prose ul{margin:0 0 22px; padding-left:0; list-style:none}
.prose ul li{position:relative; padding:6px 0 6px 22px; color:var(--ink-soft)}
.prose ul li::before{content:""; position:absolute; left:0; top:16px; width:10px; height:1px; background:var(--copper)}
.prose ol{margin:0 0 22px; padding-left:20px; color:var(--ink-soft)}
.prose ol li{padding:6px 0 6px 6px}
.prose a{color:#9a5f2c; text-decoration:underline; text-underline-offset:3px}

/* two-column layout for interior pages */
.layout{display:grid; grid-template-columns:1fr 320px; gap:clamp(36px,5vw,72px); align-items:start}
@media (max-width:940px){.layout{grid-template-columns:1fr}}

.rail{position:sticky; top:100px; border:1px solid var(--hair-light); padding:28px; background:#fff}
.rail h3{font-size:17px; margin-bottom:16px}
.rail p{font-size:14.5px; color:var(--ink-soft); margin:0 0 20px; line-height:1.55}
.rail ul{list-style:none; margin:0 0 22px; padding:0}
.rail ul li{padding:8px 0; border-top:1px solid var(--hair-light); font-size:14.5px}
.rail ul li:first-child{border-top:0}
.rail ul li a{color:var(--ink); text-decoration:none; transition:color .18s}
.rail ul li a:hover{color:#9a5f2c}
@media (max-width:940px){.rail{position:static}}

/* callout */
.note{border-left:2px solid var(--copper); padding:4px 0 4px 20px; margin:0 0 24px}
.note p{margin:0; font-size:16px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hair-light); margin-top:clamp(44px,5vw,60px)}
.faq details{border-bottom:1px solid var(--hair-light)}
.faq summary{cursor:pointer; padding:20px 0; font-family:var(--display); font-variation-settings:"wdth" 112;
  font-weight:700; font-size:17.5px; color:var(--ink); list-style:none; display:flex;
  justify-content:space-between; align-items:center; gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); font-weight:400; color:var(--copper); font-size:20px; flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px; color:var(--ink-soft); font-size:16px; max-width:68ch}

/* ---------- service area ---------- */
.area{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--hair-dark); border:1px solid var(--hair-dark); margin-top:34px}
.area span{background:var(--ink); padding:16px 18px; font-family:var(--mono);
  font-size:12px; letter-spacing:.09em; color:var(--steel)}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

.form{display:grid; gap:18px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:600px){.row{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel)}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:16px; color:var(--paper);
  background:var(--sheet); border:1px solid var(--hair-dark); border-radius:0;
  padding:13px 14px; transition:border-color .18s, background .18s;
}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat}
.field textarea{resize:vertical; min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--copper); background:var(--sheet-2); outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--volt); outline-offset:2px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__note{font-size:13.5px; color:var(--steel); margin:0}
.form__msg{font-family:var(--mono); font-size:13px; padding:14px 16px; border-left:2px solid var(--volt);
  background:var(--sheet); display:none; line-height:1.55}
.form__msg.is-on{display:block}
.form__msg.is-bad{border-left-color:#e2653f}

.card{border:1px solid var(--hair-dark); padding:clamp(26px,3vw,34px); background:var(--sheet)}
.card h3{margin-bottom:22px}
.detail{display:block; text-decoration:none; padding:15px 0; border-top:1px solid var(--hair-dark)}
.detail:first-of-type{border-top:0; padding-top:0}
.detail span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-bottom:5px}
.detail strong{font-family:var(--mono); font-weight:500; font-size:16px; color:var(--paper); letter-spacing:.01em}
a.detail:hover strong{color:var(--copper-lt)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair-dark); padding:44px 0 32px; font-size:13.5px; color:var(--steel)}
.foot__cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:34px}
@media (max-width:760px){.foot__cols{grid-template-columns:1fr; gap:26px}}
.foot__cols h4{color:var(--paper); margin-bottom:14px; font-size:13px;
  font-family:var(--mono); font-weight:500; letter-spacing:.16em; text-transform:uppercase}
.foot__cols p{margin:0 0 8px; line-height:1.55}
.foot__cols ul{list-style:none; margin:0; padding:0}
.foot__cols li{padding:4px 0}
.foot a{text-decoration:none}
.foot a:hover{color:var(--copper-lt)}
.foot__reg{display:flex; align-items:center; gap:10px; margin:0 0 20px; padding-bottom:20px;
  border-bottom:1px solid var(--hair-dark); font-family:var(--mono); font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--steel)}
.foot__reg svg{width:20px; height:20px; flex:none; color:var(--copper)}
.foot__reg strong{color:var(--paper); font-weight:500; letter-spacing:.13em}
.foot__in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--hair-dark); padding-top:22px}
.foot__in p{margin:0}

/* ---------- motion ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ol-pulse{animation:none; stroke-dasharray:none; opacity:.5}
  .reveal{opacity:1; transform:none; transition:none}
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}