/* FiksIT — site-wide stylesheet. Design language ported from the homepage prototype
   (src/fiksit-homepage.html): IBM Plex Sans/Mono, blueprint grid hero, signature
   status badge, restrained motion (max one on-load + one scroll-triggered per page). */

:root{
  --ink:#14212E;
  --paper:#F2F4F3;
  --paper-dim:#E7EAE9;
  --brand:#2B5F75;
  --brand-dim:#1F4657;
  --amber:#E8A33D;
  --green:#3F9C6D;
  --red:#C24A3F;
  --grey:#66707A;        /* darkened from #8B9199 for AA contrast on --paper */
  --grey-soft:#8B9199;   /* only for large/mono labels, not body copy */
  --line:#C7CDCB;
  --radius:2px;
  --maxw:1120px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
ul,ol{list-style:none;}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--ink); padding:12px 18px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; text-decoration:none;
}
.skip-link:focus{left:12px; top:12px;}

/* ---------- blueprint grid backdrop (hero only — signature stays singular) ---------- */
/* Grid lines at 30% opacity (i.e. --line with ~70% transparency) so the pattern reads as a faint backdrop, not a bright grid. */
.blueprint{
  background-image:
    linear-gradient(rgba(199,205,203,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,205,203,.3) 1px, transparent 1px);
  background-size:40px 40px;
  background-position:-1px -1px;
}

/* ---------- status badge (signature element, reused in every header) ---------- */
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px; letter-spacing:.02em; color:var(--brand-dim);
  padding:6px 12px; border:1px solid var(--line); border-radius:100px;
  background:rgba(255,255,255,.6); white-space:nowrap;
}
.status .dot{
  width:8px; height:8px; border-radius:50%; background:var(--green);
  animation:pulse 2.4s infinite;
}
.status.is-offline .dot{background:var(--grey-soft); animation:none; box-shadow:none;}
@media (prefers-reduced-motion: reduce){ .status .dot{animation:none;} }
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(63,156,109,.45);}
  70%{box-shadow:0 0 0 8px rgba(63,156,109,0);}
  100%{box-shadow:0 0 0 0 rgba(63,156,109,0);}
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(242,244,243,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
header .bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px; flex-wrap:wrap; }
.logo{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:19px; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:center; }
.logo span{color:var(--brand);}
.header-left{display:flex; align-items:center; gap:28px;}
.nav-links{display:flex; align-items:center; gap:20px; font-size:14px;}
.nav-links a{text-decoration:none; color:#333D43; padding:4px 0; border-bottom:2px solid transparent;}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--brand); border-bottom-color:var(--brand);}
.header-right{display:flex; align-items:center; gap:14px;}
.langsw{ display:flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; font-family:'IBM Plex Mono', monospace; font-size:12px; }
.langsw a, .langsw span{ display:inline-block; padding:6px 12px; color:var(--grey); text-decoration:none; }
.langsw a:hover{color:var(--ink);}
.langsw [aria-current="true"]{background:var(--ink); color:var(--paper); font-weight:600;}
.hamburger{
  display:none; background:transparent; border:1px solid var(--line); border-radius:var(--radius);
  width:38px; height:38px; font-size:16px; cursor:pointer; color:var(--ink);
}

/* status badge: reflow under header on mobile instead of vanishing */
.status-row{display:none;}
@media (max-width:640px){
  header .status{display:none;}
  .status-row{
    display:flex; justify-content:center; padding:8px 0;
    border-bottom:1px solid var(--line); background:rgba(255,255,255,.5);
  }
}
@media (max-width:900px){
  .nav-links{display:none;}
  .hamburger{display:block;}
}

/* ---------- mobile menu ---------- */
.mobile-menu{
  position:fixed; top:0; right:0; height:100%; width:min(320px, 86vw); z-index:120;
  background:var(--paper); border-left:1px solid var(--line);
  transform:translateX(100%); padding:24px; display:flex; flex-direction:column; gap:4px;
}
@media (prefers-reduced-motion: no-preference){ .mobile-menu{transition:transform .25s ease;} }
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu a{
  display:block; padding:14px 4px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--paper-dim); font-size:16px;
}
.mobile-menu a[aria-current="page"]{color:var(--brand); font-weight:600;}
.mobile-menu-close{
  align-self:flex-end; background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink);
  width:38px; height:38px;
}
.menu-backdrop{
  position:fixed; inset:0; background:rgba(20,33,46,.4); z-index:110;
  opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){ .menu-backdrop{transition:opacity .25s ease;} }
.menu-backdrop.is-open{opacity:1; pointer-events:auto;}

/* ---------- hero ---------- */
.hero{padding:56px 0 48px; position:relative; overflow:hidden;}
@media (min-width:641px){ .hero{padding:72px 0 64px;} }
.hero .wrap{position:relative; z-index:2;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--brand);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--brand);}
h1{ font-size:clamp(30px, 6vw, 56px); line-height:1.1; font-weight:600; letter-spacing:-.02em; max-width:15ch; margin-bottom:20px; }
h1 em{font-style:normal; color:var(--brand);}
.lede{ font-size:17px; color:#374349; max-width:52ch; margin-bottom:30px; }
.cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:var(--radius);
  font-weight:600; font-size:15px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  font-family:inherit;
}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:transform .15s ease;}
  .btn:hover{transform:translateY(-1px);}
}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--amber); color:var(--ink);}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-sm{padding:9px 16px; font-size:13px;}

/* hero diagram: connector line draws in, nodes fade in staggered — the one on-load animation */
.hero-diagram{
  margin-top:48px; position:relative; padding-top:14px;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-left:1px solid var(--line);
}
.hero-diagram::before{
  content:''; position:absolute; top:0; left:0; height:2px; background:var(--brand); width:0;
}
@media (prefers-reduced-motion: no-preference){
  .hero-diagram::before{animation:drawline .7s ease-out .1s forwards;}
  .hero-diagram .node{opacity:0; transform:translateY(6px); animation:nodeIn .45s ease-out forwards;}
  .hero-diagram .node:nth-child(1){animation-delay:.25s;}
  .hero-diagram .node:nth-child(2){animation-delay:.38s;}
  .hero-diagram .node:nth-child(3){animation-delay:.51s;}
  .hero-diagram .node:nth-child(4){animation-delay:.64s;}
  .hero-diagram .node:nth-child(5){animation-delay:.77s;}
}
@media (prefers-reduced-motion: reduce){
  .hero-diagram::before{width:100%;}
}
@keyframes drawline{to{width:100%;}}
@keyframes nodeIn{to{opacity:1; transform:translateY(0);}}
.hero-diagram .node{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 14px; text-align:center; background:rgba(255,255,255,.5);
}
.hero-diagram svg{width:26px; height:26px; margin:0 auto 8px; stroke:var(--brand);}
.hero-diagram span{font-size:11px; font-family:'IBM Plex Mono',monospace; color:var(--grey-soft);}
@media (max-width:760px){ .hero-diagram{grid-template-columns:repeat(4,1fr);} }
@media (max-width:460px){ .hero-diagram{grid-template-columns:repeat(3,1fr);} }

/* ---------- breadcrumbs ---------- */
.breadcrumbs{padding:14px 24px 0;}
.breadcrumbs ol{display:flex; flex-wrap:wrap; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--grey);}
.breadcrumbs li{display:flex; align-items:center; gap:6px;}
.breadcrumbs li:not(:last-child)::after{content:'/'; color:var(--line); margin-left:6px;}
.breadcrumbs a{text-decoration:none; color:var(--grey);}
.breadcrumbs a:hover{color:var(--brand);}
.breadcrumbs [aria-current="page"]{color:var(--ink);}

/* ---------- page hero (non-home pages) ---------- */
.page-hero{padding:48px 0 40px; border-bottom:1px solid var(--line);}
@media (min-width:641px){ .page-hero{padding:64px 0 48px;} }
.page-hero h1{max-width:24ch;}
.page-hero .lede{margin-bottom:0;}

/* ---------- section shell ---------- */
section{padding:56px 0;}
@media (min-width:641px){ section{padding:64px 0;} }
.section-head{margin-bottom:36px; max-width:60ch;}
.kicker{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--grey); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
h2{font-size:clamp(23px,3.6vw,34px); font-weight:600; letter-spacing:-.01em;}
h3{font-size:18px; font-weight:600;}
.sub{color:#414B52; margin-top:10px; font-size:16px; max-width:56ch;}

/* ---------- problem strip ---------- */
.problem{background:var(--ink); color:var(--paper);}
.problem .wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.problem .num{font-family:'IBM Plex Mono',monospace; color:var(--amber); font-size:14px; margin-bottom:10px;}
.problem p{color:#D3DADC; font-size:16px;}
.problem-cols{display:flex; flex-direction:column; gap:22px;}
@media (max-width:760px){ .problem .wrap{grid-template-columns:1fr;} }

/* ---------- services (stagger reveal on scroll — one scroll-triggered moment) ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service{ background:var(--paper); padding:26px 24px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; }
.service svg{width:28px; height:28px; stroke:var(--brand);}
.service h3{font-size:17px; font-weight:600;}
.service p{font-size:14px; color:#41474D;}
.service .service-link{margin-top:auto; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brand);}
@media (prefers-reduced-motion: no-preference){
  .service{opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease;}
  .services-grid.in-view .service{opacity:1; transform:translateY(0);}
  .services-grid.in-view .service:nth-child(1){transition-delay:0ms;}
  .services-grid.in-view .service:nth-child(2){transition-delay:60ms;}
  .services-grid.in-view .service:nth-child(3){transition-delay:120ms;}
  .services-grid.in-view .service:nth-child(4){transition-delay:180ms;}
  .services-grid.in-view .service:nth-child(5){transition-delay:240ms;}
  .services-grid.in-view .service:nth-child(6){transition-delay:300ms;}
}
@media (max-width:860px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }

/* ---------- SLA block (counts up once on scroll-into-view) ---------- */
.sla{background:var(--brand); color:var(--paper);}
.sla .wrap{display:flex; align-items:center; gap:40px; flex-wrap:wrap;}
.sla .figure{ font-family:'IBM Plex Mono',monospace; font-size:clamp(52px,10vw,92px); font-weight:600; line-height:1; display:flex; align-items:baseline; gap:6px; }
.sla .figure .unit{font-size:.34em; color:var(--amber);}
.sla .text{max-width:46ch;}
.sla .text p{color:#D6E2E6; margin-top:8px;}

/* ---------- pricing ---------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.plan{ border:1px solid var(--line); border-left:3px solid transparent; background:rgba(255,255,255,.6); padding:28px 24px; display:flex; flex-direction:column; gap:16px; position:relative; }
.plan:hover, .plan:focus-within{ border-left-color:var(--brand); background:#fff; }
.plan.featured{border-color:var(--brand); border-left-color:var(--brand); background:#fff;}
.plan-badge{
  position:absolute; top:-11px; left:24px; background:var(--amber); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:10px; padding:3px 8px; letter-spacing:.06em;
}
.plan h3{font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--grey); font-family:'IBM Plex Mono',monospace;}
.plan .price{font-family:'IBM Plex Mono',monospace; font-size:29px; font-weight:600;}
.plan .price small{font-size:13px; font-weight:400; color:var(--grey);}
.plan ul{display:flex; flex-direction:column; gap:8px; font-size:14px; color:#333D43;}
.plan li::before{content:'— '; color:var(--brand);}
@media (max-width:860px) and (min-width:561px){ .pricing-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pricing-grid{grid-template-columns:1fr;} }
.pricing-note{margin-top:20px; font-size:13px; color:var(--grey); font-family:'IBM Plex Mono',monospace;}

/* ---------- comparison table ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line);}
.compare-table{width:100%; border-collapse:collapse; min-width:560px; background:#fff;}
.compare-table th, .compare-table td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--paper-dim); font-size:14px;}
.compare-table thead th{font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--grey); background:var(--paper-dim);}
.compare-table tbody th{font-weight:600; color:var(--ink);}
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th{border-bottom:none;}

/* ---------- calculator ---------- */
.calculator{border:1px solid var(--line); background:#fff; padding:28px; display:flex; flex-direction:column; gap:16px; max-width:520px;}
.calculator-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.calculator-row label{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--grey); flex-shrink:0;}
.calculator input[type="range"]{flex:1; min-width:160px; accent-color:var(--brand);}
.calculator-count{font-family:'IBM Plex Mono',monospace; font-size:20px; min-width:3ch; text-align:right;}
.calculator-result{font-family:'IBM Plex Mono',monospace; font-size:clamp(28px,5vw,40px); font-weight:600; color:var(--brand);}
.calculator-result small{font-size:.4em; font-weight:400; color:var(--grey); margin-left:6px;}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.faq-item{background:var(--paper);}
.faq-item summary{
  padding:18px 20px; cursor:pointer; font-weight:600; list-style:none; display:flex;
  align-items:center; justify-content:space-between; gap:12px; background:#fff;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--brand); flex-shrink:0;}
.faq-item[open] summary::after{content:'−';}
.faq-item .faq-answer{padding:0 20px 18px; font-size:14px; color:#41474D; max-width:70ch;}
.faq-item .faq-answer p{margin-bottom:8px;}
.faq-item .faq-answer a{color:var(--brand); text-decoration:underline;}

/* ---------- why us ---------- */
.why{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start;}
.why-list{display:flex; flex-direction:column; gap:24px;}
.why-item{display:flex; gap:16px;}
.why-item .dot2{width:10px; height:10px; border-radius:50%; background:var(--amber); margin-top:7px; flex-shrink:0;}
.why-item h4{font-size:16px; margin-bottom:4px;}
.why-item p{font-size:14px; color:#41474D;}
.lang-card{border:1px solid var(--line); padding:28px; background:#fff;}
.lang-card .row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--paper-dim); font-family:'IBM Plex Mono',monospace; font-size:13px;}
.lang-card .row:last-child{border-bottom:none;}
@media (max-width:860px){ .why{grid-template-columns:1fr;} }

/* ---------- CTA / contact methods ---------- */
.cta-block{background:var(--ink); color:var(--paper);}
.cta-block .inner{text-align:center; padding:8px 0 8px;}
.cta-block h2{color:var(--paper); max-width:20ch; margin:0 auto 16px;}
.cta-block .sub{color:#AEB8BC; margin:0 auto 30px; max-width:52ch;}
.contact-methods{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px;}
.contact-methods .btn-ghost{border-color:#3D4A52; color:var(--paper);}

/* ---------- light section variant (used on the Contact page) ---------- */
.cta-block.on-light{background:var(--paper); color:var(--ink); border-top:1px solid var(--line);}
.cta-block.on-light h2{color:var(--ink);}
.cta-block.on-light .sub{color:#41474D;}
.cta-block.on-light .contact-methods .btn-ghost{border-color:var(--ink); color:var(--ink);}

/* ---------- map block ---------- */
.map-block{border:1px solid var(--line); background:#fff;}
.map-block iframe{width:100%; height:360px; border:0; display:block;}
.map-placeholder{
  height:280px; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--grey); font-family:'IBM Plex Mono',monospace; font-size:13px; padding:24px; background:var(--paper-dim);
}

/* ---------- generic content cards (about/team, cases, blog) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .card-grid{grid-template-columns:1fr;} }

.team-card{border:1px solid var(--line); background:#fff; padding:22px; display:flex; flex-direction:column; gap:10px;}
.team-card img{width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--paper-dim);}
.team-card .avatar-fallback{
  width:64px; height:64px; border-radius:50%; background:var(--brand); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:20px;
}
.team-card h3{font-size:16px;}
.team-card .role{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brand);}
.team-card .langs{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--grey-soft);}
.team-card p{font-size:14px; color:#41474D;}

.bilingual-examples{display:flex; flex-direction:column; gap:16px; margin-top:24px;}
.bilingual-example{border-left:3px solid var(--amber); padding:4px 0 4px 16px;}
.bilingual-example .lang-label{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brand); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;}
.bilingual-example p{font-size:15px; color:#333D43;}

.case-card{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column;}
.case-card img{width:100%; height:160px; object-fit:cover; background:var(--paper-dim);}
.case-card .case-body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.case-card .company{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--grey); text-transform:uppercase;}
.case-card .metric{font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; color:var(--brand); margin-top:auto;}
.case-card .metric-label{font-size:12px; color:var(--grey);}
.placeholder-block{
  border:1px dashed var(--line); padding:48px 24px; text-align:center; color:var(--grey);
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.placeholder-block h3{color:var(--ink);}

.blog-card{border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; text-decoration:none; color:inherit;}
.blog-card img{width:100%; height:160px; object-fit:cover; background:var(--paper-dim);}
.blog-card .blog-body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.blog-card .date{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--grey);}
.blog-card h3{font-size:16px;}
.blog-card p{font-size:14px; color:#41474D;}
.blog-body-content{max-width:70ch; font-size:16px; line-height:1.7;}
.blog-body-content h2{margin:32px 0 12px;}
.blog-body-content h3{margin:24px 0 10px;}
.blog-body-content p{margin-bottom:14px;}
.blog-body-content ul, .blog-body-content ol{margin:0 0 14px 22px; list-style:revert;}
.blog-body-content a{color:var(--brand); text-decoration:underline;}
.pagination{display:flex; gap:10px; justify-content:center; margin-top:36px; font-family:'IBM Plex Mono',monospace; font-size:13px;}
.pagination a, .pagination span{padding:8px 14px; border:1px solid var(--line);}
.pagination a{text-decoration:none;}
.pagination .current{background:var(--ink); color:var(--paper);}

/* ---------- service detail ---------- */
.service-hero{display:flex; align-items:center; gap:16px; margin-bottom:8px;}
.service-hero .icon-badge{
  width:52px; height:52px; border:1px solid var(--line); background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.service-hero .icon-badge svg{width:26px; height:26px; stroke:var(--brand);}
.service-columns{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:36px;}
@media (max-width:760px){ .service-columns{grid-template-columns:1fr;} }
.check-list li, .cross-list li{display:flex; gap:10px; font-size:15px; padding:8px 0; border-bottom:1px solid var(--paper-dim);}
.check-list li:before{content:'✓'; color:var(--green); font-weight:600; flex-shrink:0;}
.cross-list li:before{content:'✕'; color:var(--red); font-weight:600; flex-shrink:0;}
.process-steps{counter-reset:step; display:flex; flex-direction:column; gap:18px; margin-top:20px;}
.process-step{display:flex; gap:16px;}
.process-step .step-num{
  counter-increment:step; font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--brand);
  flex-shrink:0; width:32px; height:32px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.process-step .step-num::before{content: counter(step, decimal-leading-zero);}
.related-services{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.related-services a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:8px 14px; border:1px solid var(--line);
  text-decoration:none; color:var(--ink);
}
.related-services a:hover{border-color:var(--brand); color:var(--brand);}

footer{background:var(--ink); color:#8A959A; padding:36px 0; border-top:1px solid #2A3740;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:24px;}
.footer-col{font-size:13px; line-height:1.7;}
.footer-col strong{display:block; color:#C3CBCE; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;}
.footer-col a{text-decoration:none;}
.footer-col a:hover{color:var(--paper);}
.footer-bottom{border-top:1px solid #29343D; padding-top:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px;}

/* ---------- 404 / 500 ---------- */
.error-page{padding:96px 0; text-align:center;}
.error-page .code{font-family:'IBM Plex Mono',monospace; font-size:clamp(64px,14vw,140px); color:var(--brand); line-height:1;}
.error-page p{margin:16px auto 24px; max-width:48ch; color:#41474D;}

/* ---------- handyman (home) header/footer — includes/handyman_*.html ---------- */
.hm-header .bar{padding-left:24px; padding-right:24px;}
.hm-header .header-right .btn-sm{white-space:nowrap;}
.hm-header .logo small{font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:13px; color:var(--grey); margin-left:10px; letter-spacing:0;}
@media (max-width:520px){ .hm-header .logo small, .hm-header .header-right .btn-sm{display:none;} }
.hm-footer .footer-col a{color:#C3CBCE;}