/* ═══════════════════════════════════════════════════════════════════
   IT INSPECTORS — Page components
   One card system. One rhythm. Restraint over novelty.
   #6D28D9 · #0C0A1D · #ffffff · #F6F5FB
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════ THE CARD (used everywhere) ═══════════ */
.card-x {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.9rem; height: 100%; display: flex; flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card-x:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--red-line); }
.card-x .cx-ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: var(--off); color: var(--red); font-size: 1.15rem; margin-bottom: 1.2rem; transition: background .28s, color .28s; }
.card-x:hover .cx-ico { background: var(--red); color: #fff; }
.card-x h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.card-x h3 a { color: var(--ink); }
.card-x:hover h3 a { color: var(--red); }
.card-x p { color: var(--body); font-size: .93rem; line-height: 1.7; margin: 0 0 1.1rem; flex: 1; }
.cx-link { font-family: var(--font-h); font-weight: 700; font-size: .84rem; color: var(--red); display: inline-flex; align-items: center; gap: .4rem; }
.cx-link:hover { gap: .65rem; }

/* small inline stat, e.g. "10+ years experience" trios inside a card */
.stat-num { color: var(--red); font-family: var(--font-h); font-weight: 800; font-size: 1.7rem; line-height: 1; }
/* on the dark band */
.card-x.on-dark { background: var(--dark-2); border-color: transparent; }
.card-x.on-dark h3 { color: #fff; }
.card-x.on-dark p { color: rgba(255, 255, 255, .62); }
.card-x.on-dark:hover { border-color: var(--red); }

/* ═══════════ PROCESS CARDS ═══════════ */
/* Same dark section, but built with real presence: a raised surface,
   a solid icon disc, and a huge low-opacity numeral in the corner —
   the numeral is texture, not a competing focal point. */
.proc-card {
  position: relative; overflow: hidden; height: 100%;
  background: var(--dark-2); border: 1px solid transparent; border-radius: var(--r-lg);
  padding: 2.1rem 1.8rem; transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.proc-card:hover { transform: translateY(-6px); border-color: var(--red); background: var(--dark-3); }

.proc-ghost {
  position: absolute; top: -.4rem; right: 1rem; font-family: var(--font-h); font-weight: 800;
  font-size: 5.2rem; line-height: 1; color: rgba(255, 255, 255, .05); pointer-events: none;
  transition: color .28s ease;
}
.proc-card:hover .proc-ghost { color: rgba(109, 40, 217, .16); }

.proc-ico {
  position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center; background: var(--red); color: #fff; font-size: 1.2rem;
  margin-bottom: 1.3rem; transition: transform .28s ease;
}
.proc-card:hover .proc-ico { transform: rotate(-6deg) scale(1.05); }

.proc-card h3 { position: relative; z-index: 1; color: #fff; font-size: 1.16rem; font-weight: 700; margin-bottom: .5rem; }
.proc-card p { position: relative; z-index: 1; color: rgba(255, 255, 255, .6); font-size: .92rem; line-height: 1.72; margin: 0; }

/* optional extras for a fuller proc-card (used on About's process section) */
.proc-stage { position: relative; z-index: 1; display: block; font-family: var(--font-h); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .48); margin-bottom: .45rem; }
.proc-get { position: relative; z-index: 1; display: flex; gap: .5rem; align-items: flex-start; padding-top: .95rem; margin-top: .9rem; border-top: 1px dashed rgba(255, 255, 255, .14); font-size: .82rem; line-height: 1.55; color: rgba(255, 255, 255, .62); }
.proc-get i { color: var(--red); margin-top: .15rem; flex: none; }
.proc-get b { font-family: var(--font-h); font-weight: 700; color: #fff; }

/* ═══════════ WORK ═══════════ */
.work-card { border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); height: 100%; transition: transform .28s, box-shadow .28s; }
.work-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.work-thumb { aspect-ratio: 16/11; overflow: hidden; background: var(--off); display: grid; place-items: center; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.work-card:hover .work-thumb img { transform: scale(1.04); }
.work-thumb i { font-size: 2.2rem; color: var(--muted); }
.work-body { padding: 1.4rem 1.5rem 1.6rem; }
.work-cat { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.work-body h3 { font-size: 1.08rem; font-weight: 700; margin: .35rem 0 .7rem; }
.work-result { display: inline-flex; align-items: baseline; gap: .4rem; font-family: var(--font-h); }
.work-result b { font-size: 1.15rem; color: var(--dark); }
.work-result span { font-size: .84rem; color: var(--muted); font-family: var(--font-b); }

/* ═══════════ COMPARISON TABLE ═══════════ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table {
  width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.cmp-table th, .cmp-table td { padding: 1.05rem 1.25rem; text-align: left; font-size: .93rem; border-bottom: 1px solid var(--line); }
.cmp-table thead th {
  background: var(--off); font-family: var(--font-h); font-weight: 700;
  color: var(--ink); font-size: .84rem; white-space: nowrap;
}
/* the column we want them to pick */
.cmp-table thead th.is-us { background: var(--dark); color: #fff; }
.cmp-table td.is-us { background: rgba(109, 40, 217, .04); font-weight: 600; color: var(--ink); }
.cmp-table tbody td { color: var(--body); }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table td b { color: var(--ink); }
.cmp-table .yes { color: #5B21B6; font-weight: 700; }
.cmp-table .no { color: var(--muted); }
.cmp-table .row-label { font-family: var(--font-h); font-weight: 700; color: var(--ink); }

/* ═══════════ RISK / PROBLEM CARDS ═══════════ */
.risk-card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--red);
  border-radius: var(--r-md); padding: 1.5rem 1.6rem; height: 100%;
  transition: transform .28s ease, box-shadow .28s ease;
}
.risk-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.risk-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: .45rem; }
.risk-card h3 i { color: var(--red); margin-right: .5rem; font-size: .9rem; }
.risk-card p { color: var(--body); font-size: .91rem; line-height: 1.7; margin: 0; }

/* ═══════════ PORTFOLIO ═══════════ */
/* Filter pills — the toggle logic already lives in app.js */
.filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 3rem; }
.fpill {
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: .6rem 1.3rem; font-family: var(--font-h); font-weight: 600; font-size: .87rem;
  color: var(--ink); cursor: pointer; transition: all .22s ease;
}
.fpill:hover { border-color: var(--red); color: var(--red); }
.fpill.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--sh-red); }
.work-item { transition: opacity .3s ease; }
.work-item.hide-item { display: none; }

/* Tag sitting on the thumbnail */
.work-thumb { position: relative; }
.work-tag {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  background: rgba(12, 10, 29, .88); color: #fff; backdrop-filter: blur(6px);
  font-family: var(--font-h); font-size: .66rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: .38rem .7rem; border-radius: 99px;
}
.work-card p { color: var(--body); font-size: .9rem; line-height: 1.68; margin: 0 0 1.1rem; }

/* Two metrics side by side, divided */
.work-metrics { display: flex; gap: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.work-metrics div { line-height: 1.2; }
.work-metrics div + div { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.work-metrics b { display: block; font-family: var(--font-h); font-weight: 800; font-size: 1.25rem; color: var(--red); }
.work-metrics small { color: var(--muted); font-size: .75rem; }

/* ── Featured case study ── */
.cs-feature {
  background: var(--dark); border-radius: var(--r-xl); overflow: hidden;
  position: relative; padding: 2.6rem;
}
.cs-feature .row { position: relative; z-index: 2; }
.cs-shot {
  border-radius: var(--r-lg); overflow: hidden; background: var(--dark-2);
  aspect-ratio: 16/11; display: grid; place-items: center;
}
.cs-shot img { width: 100%; height: 100%; object-fit: cover; grid-area: 1/1; }
.cs-shot i { grid-area: 1/1; font-size: 2.8rem; color: rgba(255,255,255,.18); }
.cs-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-h); font-size: .7rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.cs-kicker::before { content: ""; width: 24px; height: 2px; background: var(--red); }
.cs-feature h2 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; margin: .9rem 0 .8rem; }
.cs-feature p { color: rgba(255,255,255,.66); font-size: .98rem; line-height: 1.72; margin-bottom: 1.6rem; }
.cs-metrics { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 1.7rem; }
.cs-metrics b { display: block; font-family: var(--font-h); font-weight: 800; font-size: 1.9rem; color: var(--red); line-height: 1; }
.cs-metrics small { display: block; color: rgba(255,255,255,.55); font-size: .8rem; margin-top: .35rem; }

@media (max-width: 767.98px) {
  .cs-feature { padding: 1.6rem; }
  .cs-metrics { gap: 1.3rem; }
  .work-metrics { gap: 1rem; }
  .work-metrics div + div { padding-left: 1rem; }
}

/* ═══════════ TESTIMONIALS (dark + owl) ═══════════ */
/* Light band on purpose: it sits between the dark work scroll and the
   white FAQ, so the page never runs two same-coloured sections together. */
.tst-sec { background: var(--off); position: relative; overflow: hidden; padding: 120px 0; }

/* faint flowing line texture */
.tst-waves {
  position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-repeat: repeat; background-size: 1100px 380px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='380'%3E%3Cg fill='none' stroke='%2317313b' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 25 C220 -10 440 60 660 25 C825 0 990 45 1100 25'/%3E%3Cpath d='M0 65 C220 30 440 100 660 65 C825 40 990 85 1100 65'/%3E%3Cpath d='M0 105 C220 70 440 140 660 105 C825 80 990 125 1100 105'/%3E%3Cpath d='M0 145 C220 110 440 180 660 145 C825 120 990 165 1100 145'/%3E%3Cpath d='M0 185 C220 150 440 220 660 185 C825 160 990 205 1100 185'/%3E%3Cpath d='M0 225 C220 190 440 260 660 225 C825 200 990 245 1100 225'/%3E%3Cpath d='M0 265 C220 230 440 300 660 265 C825 240 990 285 1100 265'/%3E%3Cpath d='M0 305 C220 270 440 340 660 305 C825 280 990 325 1100 305'/%3E%3Cpath d='M0 345 C220 310 440 380 660 345 C825 320 990 365 1100 345'/%3E%3C/g%3E%3C/svg%3E");
}
.tst-sec .container { position: relative; z-index: 2; }

.tst-sec h2 { color: var(--ink); font-weight: 800; font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.08; margin-bottom: 1.4rem; }
.tst-sec h2 em { font-style: normal; color: var(--red); }
.tst-lead { color: var(--body); font-size: 1.06rem; line-height: 1.75; max-width: 400px; margin-bottom: 2.2rem; }

.tst-badge { display: inline-flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: .85rem 1.2rem; }
.tst-badge .tb-star { color: var(--red); font-size: 1.5rem; line-height: 1; }
.tst-badge .tb-name { font-family: var(--font-h); font-weight: 800; font-size: .82rem; line-height: 1.2; color: var(--dark); }
.tst-badge .tb-div { width: 1px; align-self: stretch; background: var(--line); }
.tst-badge .tb-stars { color: #6D28D9; font-size: .82rem; letter-spacing: 1px; }
.tst-badge .tb-score { font-family: var(--font-h); font-weight: 800; font-size: .95rem; color: var(--dark); }
.tst-badge small { display: block; color: var(--muted); font-size: .77rem; margin-top: .15rem; }

.tst-stage { position: relative; padding: 0 34px; }
.tst-card { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); border-radius: var(--r-xl); padding: 2.8rem; min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.tst-card p { font-size: 1.2rem; line-height: 1.68; color: var(--dark); margin-bottom: 1.9rem; font-weight: 500; }
.tst-who b { display: block; font-family: var(--font-h); font-weight: 800; font-size: 1.16rem; color: var(--dark); }
.tst-who span { color: var(--body); font-size: .95rem; }

.tst-stage .owl-nav { margin: 0; }
.tst-stage .owl-nav button.owl-prev,
.tst-stage .owl-nav button.owl-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%; margin: 0;
  background: var(--red) !important; border: 0 !important;
  color: #fff !important; font-size: 1.1rem !important; display: grid; place-items: center;
  box-shadow: var(--sh-md); transition: background .2s, transform .2s;
}
.tst-stage .owl-nav button.owl-prev { left: -8px; }
.tst-stage .owl-nav button.owl-next { right: -8px; }
.tst-stage .owl-nav button:hover { background: var(--red-dark) !important; transform: translateY(-50%) scale(1.06); }
.tst-stage .owl-nav button.disabled { opacity: .4; }
.tst-stage .owl-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.8rem; }
.tst-stage .owl-dots .owl-dot span { width: 9px; height: 9px; border-radius: 50%; background: #D9D5CC; display: block; transition: background .2s, width .2s; }
.tst-stage .owl-dots .owl-dot.active span { background: var(--red); width: 24px; border-radius: 99px; }

@media (max-width: 991.98px) {
  .tst-lead { max-width: none; }
  .tst-card { padding: 1.9rem; min-height: 0; }
  .tst-card p { font-size: 1.05rem; }
  .tst-stage { padding: 0 6px; }
  .tst-stage .owl-nav button.owl-prev { left: -6px; }
  .tst-stage .owl-nav button.owl-next { right: -6px; }
}
@media (max-width: 575.98px) {
  .tst-badge { flex-wrap: wrap; }
  .tst-stage { padding: 0; }
  .tst-stage .owl-nav { position: static; display: flex; justify-content: center; gap: .7rem; margin-top: 1.5rem; }
  .tst-stage .owl-nav button.owl-prev, .tst-stage .owl-nav button.owl-next { position: static; transform: none; }
}

/* ═══════════ CONTACT / FORMS / MISC (inner pages) ═══════════ */
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; height: 100%; transition: transform .28s, box-shadow .28s, border-color .28s; }
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--red-line); }
.contact-card .cc-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 1.05rem; margin-bottom: .9rem; }
.contact-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .3rem; }
.contact-card p, .contact-card a { color: var(--body); font-size: .92rem; line-height: 1.7; }
.contact-card a:hover { color: var(--red); }

.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-align: center; height: 100%; transition: transform .28s, box-shadow .28s, border-color .28s; }
.team-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--red-line); }
.tc-photo { aspect-ratio: 1/1; background: var(--dark); display: grid; place-items: center; overflow: hidden; }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; }
.tc-initials { font-family: var(--font-h); font-weight: 800; font-size: 2.6rem; color: #fff; }
.tc-body { padding: 1.3rem; }
.tc-body h3 { font-size: 1.04rem; font-weight: 700; margin-bottom: .18rem; }
.tc-role { font-size: .79rem; font-weight: 700; color: var(--red); letter-spacing: .04em; text-transform: uppercase; }
.tc-body p { font-size: .88rem; color: var(--body); line-height: 1.7; margin: .6rem 0 0; }

.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .28s, box-shadow .28s, border-color .28s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--red-line); }
.post-thumb { aspect-ratio: 16/9; background: var(--off); display: grid; place-items: center; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-thumb i { font-size: 1.9rem; color: var(--muted); }
.post-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.post-meta { font-size: .76rem; color: var(--muted); margin-bottom: .5rem; }
.post-body h3 { font-size: 1.06rem; font-weight: 700; line-height: 1.42; margin-bottom: .5rem; }
.post-body h3 a { color: var(--ink); }
.post-card:hover h3 a { color: var(--red); }
.post-body p { font-size: .9rem; color: var(--body); line-height: 1.7; flex: 1; margin-bottom: .9rem; }

.side-nav { background: var(--off); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem; position: sticky; top: 104px; }
.side-nav b { font-family: var(--font-h); font-size: .92rem; color: var(--ink); display: block; margin-bottom: .8rem; }
.side-nav a { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: var(--body); padding: .6rem .75rem; border-radius: 10px; transition: background .2s, color .2s; }
.side-nav a i { font-size: .78rem; color: var(--red); width: 16px; }
.side-nav a:hover { background: #fff; color: var(--red); }
.side-nav a.current { background: var(--red); color: #fff; }
.side-nav a.current i { color: #fff; }

.prose { max-width: 780px; }
.prose h2 { font-size: 1.4rem; font-weight: 700; margin: 2.1rem 0 .8rem; }
.prose p, .prose li { color: var(--body); line-height: 1.86; font-size: .96rem; }
.prose ul { padding-left: 1.2rem; margin-bottom: 1.1rem; }
.prose li { margin-bottom: .45rem; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.err-code { font-family: var(--font-h); font-weight: 800; font-size: clamp(6rem, 20vw, 12rem); line-height: .9; color: var(--red); }

/* ═══════════ MAINTENANCE HERO — live site-health monitor ═══════════ */
/* The right-hand panel is the product itself: the dashboard clients get.
   Everything in it animates on load, so the hero reads as "someone is watching". */
.wmh { padding: calc(92px + var(--hdr-h)) 0 100px; }
.wmh h1 { font-size: clamp(2.05rem, 3.4vw, 2.95rem); }
.wmh p { font-size: 1.02rem; max-width: 520px; }
.hero-trust { list-style: none; padding: 0; margin: 1.9rem 0 0; display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; }
.hero-trust li { font-size: .85rem; color: rgba(255, 255, 255, .62); display: flex; align-items: center; gap: .45rem; }
.hero-trust i { color: var(--red); font-size: .75rem; }

.wmh-stage { position: relative; perspective: 1400px; }

.wmh-panel {
  position: relative; overflow: hidden;
  background: var(--dark-2); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 22px; padding: 1.5rem 1.6rem 1.7rem;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .38);
}
/* a soft scan sweep travels down the panel forever — cheap, but it sells "live" */
.wmh-scan { display: none; }

.wmh-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 1.35rem; }
.wmh-dom { font-family: var(--font-b); font-size: .84rem; color: rgba(255, 255, 255, .78); display: inline-flex; align-items: center; gap: .45rem; }
.wmh-dom i { font-size: .68rem; color: #6D28D9; }
.wmh-pill { font-size: .74rem; font-weight: 600; color: #A78BFA; background: rgba(109, 40, 217, .12); border: 1px solid rgba(109, 40, 217, .3); border-radius: 999px; padding: .3rem .7rem; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.wmh-dot { width: 7px; height: 7px; border-radius: 50%; background: #6D28D9; box-shadow: 0 0 0 0 rgba(109, 40, 217, .6); }

.wmh-block { margin-bottom: 1.35rem; }
.wmh-lbl { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .6rem; }
.wmh-lbl span { font-size: .73rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 600; }
.wmh-lbl b { font-family: var(--font-h); font-size: 1.02rem; color: #fff; font-weight: 800; }
.wmh-up { color: #A78BFA !important; }
.wmh-fast { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem !important; }
.wmh-fast i { color: var(--red); font-size: .82rem; }

/* 40 slim bars = 40 days of uptime. Two amber ones stop it looking fake. */
.wmh-bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.wmh-bars span { flex: 1; height: 100%; border-radius: 3px; background: rgba(110, 231, 168, .5); transform-origin: bottom; }
.wmh-bars span.warn { background: #8B879E; }

.wmh-spark { width: 100%; height: 64px; display: block; overflow: visible; }
.wmh-spark .sp-line { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wmh-spark .sp-dot { fill: #fff; stroke: var(--red); stroke-width: 2.5; }

.wmh-checks { list-style: none; padding: 1.3rem 0 0; margin: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.wmh-checks li { display: flex; align-items: center; gap: .65rem; font-size: .87rem; color: rgba(255, 255, 255, .82); padding: .42rem 0; }
.wmh-checks em { margin-left: auto; font-style: normal; font-size: .76rem; color: rgba(255, 255, 255, .4); white-space: nowrap; }
.wmh-tick { width: 21px; height: 21px; border-radius: 50%; background: rgba(109, 40, 217, .16); color: #6D28D9; display: grid; place-items: center; font-size: .6rem; flex: 0 0 21px; }

/* two chips break the panel's rectangle so it doesn't sit there like a screenshot */
.wmh-chip {
  position: absolute; display: flex; align-items: center; gap: .7rem;
  background: #fff; border-radius: 14px; padding: .72rem .95rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .3); z-index: 3;
}
.wmh-chip i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); font-size: .85rem; }
.wmh-chip b { display: block; font-family: var(--font-h); font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.wmh-chip small { font-size: .7rem; color: var(--muted); }
.wmh-chip-a { top: -26px; left: -34px; }
.wmh-chip-b { bottom: -26px; right: -22px; }

@media (max-width: 1199px) {
  .wmh-chip-a { left: -12px; }
  .wmh-chip-b { right: -6px; }
}
@media (max-width: 991px) {
  .wmh p { max-width: none; }
  .wmh-stage { margin-top: 1.5rem; }
  .wmh-chip-a { top: -20px; left: 0; }
  .wmh-chip-b { bottom: -20px; right: 0; }
}
@media (max-width: 575px) {
  .wmh-chip { display: none; }
  .wmh-panel { padding: 1.25rem 1.15rem 1.4rem; }
  .wmh-checks em { display: none; }
}

/* Case showcase without a before/after chart: the project shot carries the
   panel instead. Charts are only drawn when real series data exists. */
/* With no chart the photo fills the card, so it does not sit in a band of
   empty white where the chart used to be. */
.cs-report--nochart { display: flex; flex-direction: column; gap: 1rem; padding: 14px; }
.cs-shot { margin: 0; flex: 1 1 auto; min-height: 260px; border-radius: 18px; overflow: hidden; background: var(--paper-2); }
.cs-shot img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }

/* ---- affiliate disclosure (prose-doc body on /web-hosting) --------------- */
/* Reads as a notice rather than loose body copy, and sits above the first
   affiliate link so nobody clicks before seeing it. */
.host-disc {
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.1rem);
  border: 1px solid var(--acc-line);
  border-left: 4px solid var(--acc);
  border-radius: 4px var(--r-md) var(--r-md) 4px;
  background: var(--white);
  box-shadow: var(--sh-xs);
}
.host-disc h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .85rem;
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  letter-spacing: -.01em;
  color: var(--acc);
}
.host-disc h2::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--acc);
  color: var(--white);
  font-size: .82rem;
  font-weight: 700;
}
.host-disc p { margin: 0 0 .8rem; font-size: .97rem; line-height: 1.72; color: var(--body); }
.host-disc p:last-child { margin-bottom: 0; }
.host-disc strong { color: var(--ink); font-weight: 600; }

/* Affiliate note under each set of plan cards. */
.pc-note { max-width: 62rem; margin-inline: auto; }

/* .prose caps at 780px and left-aligns, which left the disclosure card
   stranded beside a column of empty space. Centre it when it holds one. */
.prose:has(.host-disc) { max-width: none; }
.prose .host-disc h2 { margin-top: 0; }

/* ==========================================================================
   Tech Stack (.ts) — the element shipped with no CSS in any stylesheet, so it
   rendered as a raw list. Styles live here so it works wherever it is used.
   ========================================================================== */
.ts { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--white); }
.ts-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.ts-title {
  margin: .7rem 0 0;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.028em;
}
.ts-title em { font-style: italic; color: var(--acc); }
.ts-lead { margin: .9rem 0 0; font-size: 1.02rem; line-height: 1.7; color: var(--body); }

.ts-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ts-chip {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color .25s, background .25s, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.ts-chip:hover { border-color: var(--acc-line); background: var(--white); transform: translateY(-3px); }

.ts-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  background: var(--navy);
  color: var(--lime);
  font-size: 1.15rem;
}
.ts-chip:hover .ts-ico { background: var(--acc); }

.ts-txt { min-width: 0; }
.ts-txt b {
  display: block;
  margin-bottom: .18rem;
  font-family: var(--font-h);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ts-txt small { display: block; font-size: .86rem; line-height: 1.5; color: var(--body); }

/* ==========================================================================
   City Map (.cm-*) — shipped with no CSS, so the map and its side panel
   rendered bare on every city page. Styles added here.
   ========================================================================== */
.cm-map {
  height: 100%;
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--sh-xs);
}
.cm-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }

.cm-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-xs);
}
.sec-dark .cm-panel { background: var(--navy-2); border-color: var(--navy-line); }

.cm-panel h3 {
  margin: 0 0 .6rem;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  letter-spacing: -.015em;
  color: var(--ink);
}
.sec-dark .cm-panel h3 { color: var(--white); }

.cm-panel > p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.65; color: var(--body); }
.sec-dark .cm-panel > p { color: var(--on-dark); }

/* The post/zip code list: a tinted block so it reads as data, not prose. */
.cm-codes {
  margin: 0 0 1.1rem !important;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  color: var(--acc) !important;
  font-family: var(--font-h);
  font-size: .92rem !important;
  font-weight: 500;
  line-height: 1.6;
  word-spacing: .12em;
}
.sec-dark .cm-codes { background: rgba(214, 243, 107, .1); border-color: var(--navy-line); color: var(--lime) !important; }

.cm-cta {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.sec-dark .cm-cta { border-top-color: var(--navy-line); }

.cm-cta h4 {
  margin: 0 0 .4rem;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.sec-dark .cm-cta h4 { color: var(--white); }

.cm-cta p { margin: 0 0 1rem; font-size: .92rem; line-height: 1.6; color: var(--body); }
.sec-dark .cm-cta p { color: var(--on-dark); }
.cm-cta .btn { width: 100%; justify-content: center; }

@media (max-width: 991px) { .cm-map { min-height: 280px; margin-bottom: 1rem; } }