/* ============================================================
   ContractorCX — contractorcx.com
   MKT-11 REV_02 · Direction 02 "CX Lock" · NEON/HUD · dark only
   Every colour comes from a custom property. No raw hex below :root.
   ============================================================ */

/* ---------- 1. Fonts (self-hosted, SIL OFL 1.1) ---------- */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/chakra-petch-600.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/chakra-petch-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/jetbrains-mono-500.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/archivo-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/archivo-600.woff2') format('woff2');}

/* ---------- 2. Tokens (from MKT-11 06_code/contractorcx-tokens.css) ---------- */
:root{
  --cx-grad: linear-gradient(102deg, #4490FD 0%, #9E71FD 48%, #E650A8 100%);
  --cx-blue:#4490FD; --cx-violet:#9E71FD; --cx-magenta:#E650A8; --cx-cyan:#60DDE7;

  --cx-void:#010617; --cx-panel:#050E1F; --cx-raised:#0E182A; --cx-inset:#0E182A;
  --cx-hairline:#1D2739; --cx-grid:#162033; --cx-line-active:#60697B;

  --cx-ink:#F1F3F8; --cx-ink-2:#B3BBC9; --cx-ink-3:#969FAF;
  --cx-on-brand:#010617; --cx-focus:#60DDE7;

  --cx-answered:#5FD780; --cx-missed:#CA338F; --cx-voicemail:#AD8DFE; --cx-oncall:#A0ECFF;
  --cx-live:#8BDE9D; --cx-caution:#F7BA6C; --cx-fault:#FEB0A9; --cx-info:#60DDE7;

  /* added for the site — measured in MKT-04_Build_Notes.md §contrast */
  --cx-wash:#0B1830;

  --cx-font-display:'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
  --cx-font-mono:'JetBrains Mono', ui-monospace, monospace;
  --cx-font-text:'Archivo', ui-sans-serif, system-ui, sans-serif;

  --cx-max:1160px;
  --cx-gut:clamp(20px, 5vw, 48px);
  --cx-r:14px;
}

/* ---------- 3. Reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cx-void); color:var(--cx-ink);
  font-family:var(--cx-font-text); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto}
a{color:var(--cx-cyan)}
a:hover{color:var(--cx-ink)}
:focus-visible{outline:2px solid var(--cx-focus); outline-offset:3px; border-radius:4px}

h1,h2,h3,h4{font-family:var(--cx-font-display); font-weight:700; line-height:1.08; margin:0 0 .5em; letter-spacing:-0.01em}
h1{font-size:clamp(2.4rem, 6.2vw, 4.1rem)}
h2{font-size:clamp(1.85rem, 4vw, 2.7rem)}
h3{font-size:clamp(1.25rem, 2.4vw, 1.55rem)}
h4{font-size:1.05rem; font-weight:600}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:600; color:var(--cx-ink)}

.wrap{max-width:var(--cx-max); margin:0 auto; padding:0 var(--cx-gut)}
.narrow{max-width:760px}
.wrap.narrow{max-width:var(--cx-max)}
.wrap.narrow > *{max-width:760px}
.lead{font-size:clamp(1.08rem,2vw,1.28rem); color:var(--cx-ink-2)}
.muted{color:var(--cx-ink-3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* HUD micro-label — cyan, monospace, tracked */
.hud{
  font-family:var(--cx-font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cx-cyan);
  display:block; margin:0 0 .9rem;
}
.hud::after{content:''; display:block; width:44px; height:2px; background:var(--cx-cyan); margin-top:.55rem}

.grad-text{background:var(--cx-grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- 4. Skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--cx-cyan); color:var(--cx-on-brand); padding:.7rem 1.2rem;
  font-family:var(--cx-font-mono); font-size:.8rem; text-decoration:none;
}
.skip:focus{left:0}

/* ---------- 5. Header / nav ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cx-void) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cx-hairline);
}
.site-head .wrap{display:flex; align-items:center; gap:1.4rem; min-height:70px}
.brand{display:flex; align-items:center; text-decoration:none; flex:0 0 auto; padding:.4rem 0}
.brand svg{display:block; width:190px; height:auto}
.nav-toggle{
  margin-left:auto; background:transparent; color:var(--cx-ink);
  border:1px solid var(--cx-line-active); border-radius:9px;
  font-family:var(--cx-font-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.55rem .85rem; cursor:pointer;
}
.site-nav{margin-left:auto; display:flex; align-items:center; gap:1.5rem}
.site-nav a{
  color:var(--cx-ink-2); text-decoration:none; font-size:.95rem; font-weight:600;
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--cx-ink); border-bottom-color:var(--cx-cyan)}
.site-nav .btn{border-bottom:none}
.site-head .btn-primary{color:var(--cx-on-brand); font-size:.95rem; padding:.62rem 1.15rem}
.site-head .btn-primary:hover{color:var(--cx-on-brand)}

@media (max-width:860px){
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cx-panel); border-bottom:1px solid var(--cx-hairline);
    padding:.6rem var(--cx-gut) 1.4rem;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:.85rem 0; border-bottom:1px solid var(--cx-hairline)}
  .site-nav .btn{margin-top:1rem; text-align:center}
  .brand svg{width:158px}
}
@media (min-width:861px){ .nav-toggle{display:none} }

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--cx-font-display); font-weight:700;
  font-size:1rem; letter-spacing:.01em; text-decoration:none;
  padding:.85rem 1.55rem; border-radius:10px; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--cx-grad); color:var(--cx-on-brand)}
.btn-primary:hover{color:var(--cx-on-brand); filter:brightness(1.12)}
.btn-ghost{border-color:var(--cx-line-active); color:var(--cx-ink); background:transparent}
.btn-ghost:hover{border-color:var(--cx-cyan); color:var(--cx-ink)}
.btn-lg{font-size:1.1rem; padding:1rem 2rem}

/* ---------- 7. Sections + panels ---------- */
section{padding:clamp(3.4rem, 7vw, 5.6rem) 0}
.section-tight{padding:clamp(2.2rem,4vw,3.2rem) 0}
.rule{border:0; border-top:1px solid var(--cx-hairline); margin:0}

.panel{
  background:var(--cx-panel); border:1px solid var(--cx-hairline);
  border-radius:var(--cx-r); padding:clamp(1.4rem, 3vw, 2rem);
  position:relative;
}
/* HUD corner brackets — decorative */
.panel::before,.panel::after{
  content:''; position:absolute; width:13px; height:13px; pointer-events:none;
  border-color:var(--cx-cyan); border-style:solid; opacity:.75;
}
.panel::before{top:-1px; left:-1px; border-width:2px 0 0 2px; border-top-left-radius:var(--cx-r)}
.panel::after{bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-bottom-right-radius:var(--cx-r)}

.grid{display:grid; gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .g3{grid-template-columns:1fr} }
@media (max-width:700px){ .g2{grid-template-columns:1fr} }

/* ---------- 8. Hero ---------- */
.hero{position:relative; padding-top:clamp(3rem,7vw,5.5rem); overflow:hidden}
.hero-tight{padding-bottom:clamp(1.6rem,3vw,2.2rem)}
.hero::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--cx-grad);
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--cx-grid) 1px, transparent 1px),
                   linear-gradient(90deg, var(--cx-grid) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 72%);
}
.hero .wrap{position:relative}
.hero h1{max-width:16ch}
.hero .lead{max-width:52ch}
.cta-row{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.9rem; align-items:center}
.cta-note{font-family:var(--cx-font-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cx-ink-3)}

/* ---------- 9. Offer cards (equal weight) ---------- */
.offer-card{display:flex; flex-direction:column}
.offer-card h3{margin-bottom:.35rem}
.offer-card .oneline{color:var(--cx-ink-2); flex:1 0 auto}
.offer-card .price{
  font-family:var(--cx-font-mono); font-size:1.02rem; color:var(--cx-ink);
  margin:1.1rem 0 1.2rem; padding-top:1.1rem; border-top:1px solid var(--cx-hairline);
}
.offer-card .price small{display:block; font-size:.82rem; color:var(--cx-ink-3); margin-top:.3rem; letter-spacing:.02em}
.marker{
  display:inline-block; font-family:var(--cx-font-mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cx-cyan); border:1px solid var(--cx-cyan); border-radius:999px;
  padding:.22rem .6rem; margin-bottom:.8rem;
}
.marker-blank{display:block; height:1.72rem; margin-bottom:.8rem}
@media (max-width:900px){ .marker-blank{display:none} }

/* ---------- 10. Numbered list (the "four things") ---------- */
.numlist{list-style:none; margin:0; padding:0; counter-reset:n}
.numlist li{
  counter-increment:n; display:grid; grid-template-columns:2.6rem 1fr; gap:1rem;
  padding:1.15rem 0; border-top:1px solid var(--cx-hairline); color:var(--cx-ink-2);
}
.numlist li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--cx-font-mono); font-size:.95rem; color:var(--cx-cyan);
}
.numlist li:last-child{border-bottom:1px solid var(--cx-hairline)}

/* ---------- 11. Feature lists ---------- */
.feat{list-style:none; margin:0; padding:0}
.feat li{position:relative; padding:.42rem 0 .42rem 1.5rem; color:var(--cx-ink-2)}
.feat li::before{
  content:'—'; position:absolute; left:0; top:.42rem;
  font-family:var(--cx-font-mono); color:var(--cx-cyan);
}
.feat li b{color:var(--cx-ink); font-weight:600}

/* ---------- 12. Tables ---------- */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:.96rem}
caption{text-align:left; color:var(--cx-ink-3); font-size:.9rem; padding-bottom:.8rem}
th,td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--cx-hairline);
  vertical-align:top; color:var(--cx-ink-2)}
thead th{
  font-family:var(--cx-font-mono); font-weight:500; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cx-cyan);
  border-bottom:1px solid var(--cx-line-active);
}
tbody th{color:var(--cx-ink); font-weight:600; font-family:var(--cx-font-text)}
td.num{font-family:var(--cx-font-mono); color:var(--cx-ink)}

/* ---------- 13. Callout ---------- */
.callout{
  border-left:3px solid var(--cx-cyan); background:var(--cx-raised);
  border-radius:0 var(--cx-r) var(--cx-r) 0; padding:1.3rem 1.5rem; margin:1.8rem 0;
}
.callout h3,.callout h4{margin-bottom:.45rem}
.callout p{color:var(--cx-ink-2)}
.callout-brand{border-left-color:var(--cx-magenta)}

/* ---------- 14. Pricing tiers ---------- */
.tier{display:flex; flex-direction:column}
.tier .tier-who{font-family:var(--cx-font-mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cx-cyan); margin-bottom:.6rem}
.tier .amt{font-family:var(--cx-font-display); font-weight:700; font-size:2.5rem; line-height:1;
  margin:.2rem 0 .1rem; color:var(--cx-ink)}
.tier .per{color:var(--cx-ink-3); font-size:.92rem; margin-bottom:1.1rem}
.tier .feat{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--cx-hairline)}

/* ---------- 15. Forms ---------- */
form{margin:0}
.field{margin-bottom:1.35rem}
label{display:block; font-family:var(--cx-font-mono); font-size:.76rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--cx-cyan); margin-bottom:.5rem}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%; font-family:var(--cx-font-text); font-size:1rem; color:var(--cx-ink);
  background:var(--cx-inset); border:1px solid var(--cx-line-active);
  border-radius:9px; padding:.8rem .95rem;
}
textarea{min-height:130px; resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--cx-focus); outline-offset:2px; border-color:var(--cx-cyan)}
.consent{display:grid; grid-template-columns:22px 1fr; gap:.85rem; align-items:start;
  background:var(--cx-raised); border:1px solid var(--cx-hairline); border-radius:var(--cx-r);
  padding:1.1rem 1.2rem; margin-bottom:1.4rem}
.consent input[type=checkbox]{width:20px; height:20px; margin:.18rem 0 0; accent-color:var(--cx-cyan)}
.consent label{text-transform:none; letter-spacing:0; font-family:var(--cx-font-text);
  font-size:.94rem; color:var(--cx-ink-2); margin:0; line-height:1.55}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-note{font-size:.88rem; color:var(--cx-ink-3); margin-top:1rem}
.form-msg{
  border-radius:var(--cx-r); padding:1rem 1.2rem; margin-bottom:1.4rem;
  border:1px solid var(--cx-hairline); background:var(--cx-raised);
}
.form-msg[hidden]{display:none}
.form-msg.ok{border-color:var(--cx-live); color:var(--cx-live)}
.form-msg.err{border-color:var(--cx-fault); color:var(--cx-fault)}

/* ---------- 16. Legal pages ---------- */
.legal{max-width:760px}
.legal h2{font-size:clamp(1.35rem,2.6vw,1.7rem); margin-top:2.6rem}
.legal h3{font-size:1.1rem; margin-top:1.8rem}
.legal ul{padding-left:1.2rem; color:var(--cx-ink-2)}
.legal li{margin-bottom:.45rem}
.legal .meta{font-family:var(--cx-font-mono); font-size:.8rem; color:var(--cx-ink-3);
  letter-spacing:.06em}
.draft-note{
  border:1px solid var(--cx-caution); border-radius:var(--cx-r);
  padding:1rem 1.2rem; margin:1.6rem 0; color:var(--cx-caution); font-size:.92rem;
}

/* ---------- 17. Footer ---------- */
.site-foot{border-top:1px solid var(--cx-hairline); background:var(--cx-panel);
  padding:3rem 0 2.4rem; margin-top:2rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr} }
.site-foot h4{font-family:var(--cx-font-mono); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cx-cyan); margin-bottom:.9rem}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:.55rem}
.site-foot a{color:var(--cx-ink-2); text-decoration:none; font-size:.94rem}
.site-foot a:hover{color:var(--cx-ink); text-decoration:underline}
.site-foot .brand svg{width:168px; margin-bottom:1rem}
.legal-line{margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--cx-hairline);
  color:var(--cx-ink-3); font-size:.87rem}
.legal-line p{margin-bottom:.4rem}

/* ---------- 18. 404 ---------- */
.big404{font-family:var(--cx-font-mono); font-size:clamp(3.5rem,12vw,7rem); line-height:1;
  color:var(--cx-cyan); margin-bottom:1rem}


/* ---------- 22. Rotating pain list ----------
   Every row is a grid stack: all variants share one cell, so the block never
   changes height and nothing below it jumps. Only .is-on is visible, which
   means with JavaScript off exactly one line per row renders — the original
   four. WCAG 2.2.2: the auto-update has a pause control, and it never starts
   at all under prefers-reduced-motion. */
.rot{display:grid}
.rot-line{
  grid-area:1 / 1;
  opacity:0; visibility:hidden;
  transform:translateY(4px);
  transition:opacity .42s ease, transform .42s ease;
}
.rot-line.is-on{opacity:1; visibility:visible; transform:none}

.rot-controls{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:1.1rem;
}
.rot-toggle{
  display:inline-flex; align-items:center; gap:.55rem;
  background:transparent; color:var(--cx-ink-2);
  border:1px solid var(--cx-hairline); border-radius:999px;
  font-family:var(--cx-font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .85rem; cursor:pointer;
}
.rot-toggle:hover{color:var(--cx-ink); border-color:var(--cx-line-active)}
.rot-toggle[hidden]{display:none}
.rot-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--cx-cyan); flex:0 0 auto;
  animation:rot-pulse 2.4s ease-in-out infinite;
}
.rot-toggle.is-paused .rot-dot{animation:none; background:var(--cx-ink-3)}
@keyframes rot-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.rot-hint{
  font-family:var(--cx-font-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cx-ink-3);
}

@media (prefers-reduced-motion: reduce){
  .rot-line{transition:none}
  .rot-dot{animation:none}
}

/* ---------- 19. Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---------- 20. Print ---------- */
@media print{
  body{background:#fff; color:#000}
  .site-head,.site-foot,.hero-grid-bg{display:none}
}

/* ---------- 21. Small utilities (kept here so no inline style attribute is
   needed anywhere — the Content-Security-Policy forbids inline styles) ---------- */
.mt-0{margin-top:0}
.mt-1{margin-top:1rem}
.mt-2{margin-top:1.4rem}
.mt-3{margin-top:1.8rem}
.mt-4{margin-top:2.2rem}
.pt-hero{padding-top:3rem}
.fs-sm{font-size:.94rem}
.fs-xs{font-size:.9rem}
.fw-n{font-weight:400}
.align-start{align-items:start}