/* src/styles/runtime-state.css */
/* Runtime-state + CMS-loop content rules — restored after publish pruning.
   The publish pipeline prunes CSS rules whose classes do not appear in the
   static page HTML. These classes are added by JS at runtime or generated by
   instatic-loops (services/FAQ from post types). */

/* --- modal visibility states (classes added by JS on click) --- */
.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .45s var(--ease);
}

.modal.show {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s 0s;
}

.modal.show .modal-card {
  transform: none;
  opacity: 1;
}

/* --- modal inner content (JS-generated on click) --- */
.modal-hero {
  overflow: hidden;
  position: relative;
  background: var(--blue-deep);
  aspect-ratio: 3/2;
  width: 100%;
  height: auto;
}

.modal-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.modal-hero .m-num {
  position: absolute;
  top: 18px;
  left: 22px;
  font-family: var(--mono);
  font-size: 13px;
  color: #fff;
  background: rgba(8, 12, 24, 0.5);
  padding: 6px 14px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(8, 12, 24, 0.5);
  color: #fff;
  font-size: 18px;
  backdrop-filter: blur(6px);
  transition: background .3s, transform .35s var(--ease);
  z-index: 2;
}

.modal-close:hover {
  background: var(--blue);
  transform: rotate(90deg);
}

.modal-body {
  padding: clamp(24px, 4vw, 48px);
}

.modal-body h3 {
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.modal-cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.modal-cta .mail {
  font-family: var(--mono);
  font-size: 12.5px;
  color: rgba(16, 17, 20, 0.62);
  text-decoration: none;
  border-bottom: 1px dotted rgba(16, 17, 20, 0.4);
}

.modal-cta .mail:hover {
  color: var(--blue);
  border-color: var(--blue);
}

@media (max-width: 680px) {
  .modal-card {
    max-width: 520px;
  }
  .modal-hero {
    aspect-ratio: 16/10;
  }
}

/* --- service detail block rendered inside each looped article (cloned into the modal) --- */
.svc-detail {
  display: none;
}

/* --- popup body from CMS markdown (desc + can/req sections) --- */
.m-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}

.m-body > p:first-child {
  grid-column: 1 / -1;
  color: rgba(16, 17, 20, 0.7);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 26px;
}

.m-body .m-sec {
  min-width: 0;
}

.m-body h2 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.m-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-body li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(16, 17, 20, 0.78);
  border-bottom: 1px dashed rgba(16, 17, 20, 0.08);
}

.m-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- arrow glyphs -> SVG masks (consistent across devices) --- */
.btn-wa::after {
  content: '';
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.office .o-link::after {
  content: '';
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 680px) {
  .m-body {
    grid-template-columns: 1fr;
  }
}

/* --- auto numbering for looped services & FAQs (CSS counters) --- */
#svcList {
  counter-reset: svc;
}

.svc {
  counter-increment: svc;
}

.svc .num::before {
  content: counter(svc, decimal-leading-zero);
}

#faqList {
  counter-reset: faq;
}

.faq-item {
  counter-increment: faq;
}

.faq-q .f-num::before {
  content: counter(faq, decimal-leading-zero);
}

/* --- nav solid/hidden runtime states (classes added by JS on scroll) --- */
nav.hidden {
  transform: translateY(-110%);
}

nav.solid {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

nav.solid .brand-logo--dark {
  display: none;
}

nav.solid .brand-logo--light {
  display: block;
}

nav.solid .links a {
  color: var(--ink);
}

nav.solid .links a:hover {
  color: var(--blue);
}

/* --- social proof testimonials grid (loop-generated) --- */
.testimonials .sec-head h2 {
  color: #fff;
}

.testimonials .sec-head .eyebrow {
  color: #C3D4FF;
}

.t-rating {
  text-align: right;
  color: #C3D4FF;
}

.t-rating .t-stars {
  display: block;
  font-size: 20px;
  color: #F5B301;
  letter-spacing: 0.12em;
}

.t-rating .t-note {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}

.t-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 32px);
}

.t-grid > [data-instatic-loop] {
  display: contents;
}

.t-card {
  margin: 0;
  background: #fff;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 18px 40px rgba(5, 10, 24, 0.25);
  animation: tFade .5s var(--ease) both;
}

@keyframes tFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.t-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: clamp(28px, 4vw, 44px);
}

.t-prev, .t-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font-size: 0;
  display: grid;
  place-items: center;
  transition: background .3s, transform .3s var(--ease);
}

.t-prev::before, .t-next::before {
  content: '';
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.t-next::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.t-prev:hover, .t-next:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.t-dots {
  display: flex;
  gap: 8px;
}

.t-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background .3s;
}

.t-dot.active {
  background: #fff;
}

.t-card .t-stars {
  font-size: 15px;
  color: #F5B301;
  letter-spacing: 0.15em;
}

.t-quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(16, 17, 20, 0.8);
}

.t-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.t-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.t-person strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
}

.t-person span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(16, 17, 20, 0.55);
}

@media (max-width: 900px) {
  .t-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .t-grid {
    grid-template-columns: 1fr;
  }
}

/* --- heading semantics + contrast nudges --- */
.value h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.hero-meta div span {
  color: rgba(255, 255, 255, 0.65);
}

/* --- FAQ accordion / reveal runtime states --- */
.faq-item.open .plus::after {
  transform: rotate(90deg);
}

.faq-item.open .plus::before {
  background: var(--blue);
}

body.locked {
  overflow: hidden;
}

body.ev-ready .reveal.in {
  opacity: 1;
  transform: none;
}

.statement p.big .w.on,
.quote .w.on {
  opacity: 1;
  transform: none;
}

/* --- lead capture modal --- */
.lead-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 24, 0.55);
  backdrop-filter: blur(6px);
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s .45s;
}

.lead-backdrop.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .45s var(--ease);
}

.lead-modal {
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s .5s;
}

.lead-modal.show {
  visibility: visible;
  pointer-events: auto;
}

.lead-card {
  background: #fff;
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  max-height: 88svh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 40px);
  position: relative;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .45s var(--ease);
}

.lead-modal.show .lead-card {
  transform: none;
  opacity: 1;
}

.lead-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(8, 12, 24, 0.08);
  color: var(--ink);
  font-size: 15px;
}

.lead-card h3 {
  font-size: clamp(24px, 3vw, 30px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.lead-sub {
  color: rgba(16, 17, 20, 0.6);
  font-size: 14px;
  margin-bottom: 22px;
}

.lead-card label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 14px 0 6px;
}

.lead-card input,
.lead-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}

.lead-card input:focus,
.lead-card textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(19, 80, 201, 0.15);
}

.lead-card textarea {
  min-height: 80px;
  resize: vertical;
}

.lead-card .btn-wa {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
  border: 0;
  cursor: pointer;
}

/* --- "Not sure? Ask us" arrow: SVG via CSS mask (renders consistently) --- */
.services .sec-head .btn-ghost::after {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- service arrow: SVG (renders consistently across devices) --- */
.svc .arrow {
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc .arrow svg {
  width: 24px;
  height: 24px;
}

/* --- hide hero WhatsApp button (already in header nav) --- */
.hero-actions .btn-wa {
  display: none;
}

/* --- mobile: keep hero headline from crowding the fixed nav --- */
@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(32px, 8.5vw, 44px);
    letter-spacing: -0.02em;
  }
  .hero .eyebrow {
    margin-bottom: 16px;
  }
  .hero-sub {
    margin-top: 18px;
    font-size: 15px;
  }
  .hero-actions {
    margin-top: 24px;
  }
  .hero-meta {
    margin-top: 34px;
  }
}

/* neutralize stray agent rules that shrank hero/sec-head at 375px */
@media (max-width: 375px) {
  .hero h1 .line,
  .hero h1 .line:nth-child(n) > span {
    font-size: clamp(32px, 8.5vw, 44px) !important;
  }
  .sec-head h2 {
    font-size: clamp(32px, 4.6vw, 60px) !important;
  }
}