/* ==========================================================================
   Inxcept — inner page styles (Services, Work, Case study, About, Pricing,
   Contact, Blog, 404, Legal)
   ========================================================================== */

/* --------------------------------------------------------------------- */
/* Breadcrumb                                                              */
/* --------------------------------------------------------------------- */

.breadcrumb { margin-bottom: var(--space-5); }
.breadcrumb ol { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.breadcrumb li { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); opacity: 0.5; }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb li[aria-current="page"] { color: var(--color-text); }

/* --------------------------------------------------------------------- */
/* Page header                                                             */
/* --------------------------------------------------------------------- */

.page-header { padding-top: var(--space-12); }
.page-header__heading { font-size: var(--text-4xl); margin-top: var(--space-3); max-width: 40rem; }
.page-header__text { margin-top: var(--space-5); font-size: var(--text-lg); color: var(--color-text-muted); max-width: 38rem; }
.page-header__cta { margin-top: var(--space-8); }

/* --------------------------------------------------------------------- */
/* Rich text page (legal pages)                                            */
/* --------------------------------------------------------------------- */

.rich-text-page__content { max-width: 42rem; }
.rich-text-page__content h2 { font-size: var(--text-xl); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.rich-text-page__content h2:first-child { margin-top: 0; }
.rich-text-page__content p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.rich-text-page__content ul { list-style: disc; padding-left: 1.4em; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.rich-text-page__content a { color: var(--color-accent); text-decoration: underline; }

/* --------------------------------------------------------------------- */
/* Services offer                                                          */
/* --------------------------------------------------------------------- */

.services-offer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (max-width: 749px) { .services-offer__grid { grid-template-columns: 1fr; } }

.services-offer__item { display: flex; gap: var(--space-4); }
.services-offer__item-icon {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
}
.services-offer__item-icon svg { width: 1.3rem; height: 1.3rem; }
.services-offer__item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.services-offer__item p { color: var(--color-text-muted); font-size: var(--text-sm); }

.services-offer__guarantee {
  margin-top: var(--space-10);
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-background-alt);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  max-width: 40rem;
}
.services-offer__guarantee svg { width: 1.5rem; height: 1.5rem; color: var(--color-accent); flex-shrink: 0; margin-top: 0.15em; }
.services-offer__guarantee p { font-size: var(--text-base); }

/* --------------------------------------------------------------------- */
/* Work grid filters                                                       */
/* --------------------------------------------------------------------- */

.work-grid__filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.work-grid__filter {
  padding: 0.55em 1.2em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.work-grid__filter:hover { color: var(--color-text); }
.work-grid__filter.is-active { background: var(--color-accent); color: var(--color-accent-text); border-color: var(--color-accent); }
.work-grid__grid { margin-top: var(--space-8) !important; }

/* --------------------------------------------------------------------- */
/* Case study detail                                                       */
/* --------------------------------------------------------------------- */

.case-study__heading { font-size: var(--text-4xl); margin-top: var(--space-3); }
.case-study__meta { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-8); }
.case-study__meta dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.case-study__meta dd { font-weight: 600; }
.case-study__meta a { color: var(--color-accent); display: inline-flex; align-items: center; gap: var(--space-1); }
.case-study__meta svg { width: 0.9em; height: 0.9em; }

.case-study__hero-image img { width: 100%; border-radius: var(--radius-lg); }

.case-study__result-banner {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.case-study__result-number { font-family: var(--font-heading); font-size: var(--text-3xl); color: var(--color-accent); }
.case-study__result-label { font-size: var(--text-base); color: var(--color-text-muted); }

.case-study__prose { max-width: 42rem; }
.case-study__prose h2 { font-size: var(--text-2xl); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.case-study__prose h2:first-child { margin-top: 0; }
.case-study__prose p { color: var(--color-text-muted); margin-bottom: var(--space-4); font-size: var(--text-base); }
.case-study__prose ul { list-style: disc; padding-left: 1.4em; color: var(--color-text-muted); margin-bottom: var(--space-4); }

.case-study__before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 650px) { .case-study__before-after { grid-template-columns: 1fr; } }
.case-study__before-after img { width: 100%; border-radius: var(--radius-md); }
.case-study__before-after figcaption { text-align: center; margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------------- */
/* About                                                                    */
/* --------------------------------------------------------------------- */

.about-values__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (max-width: 809px) { .about-values__grid { grid-template-columns: 1fr; } }
.about-value { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.about-value h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.about-value p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------------- */
/* Pricing                                                                  */
/* --------------------------------------------------------------------- */

.pricing-table__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
  align-items: stretch;
}
@media (max-width: 989px) { .pricing-table__grid { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } }

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background-alt);
}
.pricing-card--featured { border-color: var(--color-accent); background: var(--color-background); position: relative; box-shadow: 0 0 0 1px var(--color-accent); }
.pricing-card__badge {
  position: absolute; top: -0.9rem; left: var(--space-6);
  background: var(--color-accent); color: var(--color-accent-text);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.3em 0.8em; border-radius: 999px;
}
.pricing-card__name { font-size: var(--text-lg); font-weight: 700; }
.pricing-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.pricing-card__price { font-family: var(--font-heading); font-size: var(--text-3xl); margin-top: var(--space-6); }
.pricing-card__price span { font-size: var(--text-sm); font-family: var(--font-body); color: var(--color-text-muted); font-weight: 400; }
.pricing-card__list { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.pricing-card__list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.pricing-card__list svg { width: 1.1rem; height: 1.1rem; color: var(--color-accent); flex-shrink: 0; margin-top: 0.15em; }
.pricing-card .btn { margin-top: var(--space-8); }

.pricing-disclaimer { text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-8); }

.pricing-care-plan {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 34rem;
  margin: var(--space-8) auto 0;
  padding: var(--space-6);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pricing-care-plan svg { width: 1.5rem; height: 1.5rem; color: var(--color-accent); flex-shrink: 0; margin-top: 0.15em; }
.pricing-care-plan h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.pricing-care-plan p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Pricing details: care plans, add-ons, external costs, payment terms */
.pricing-details__block { margin-bottom: var(--space-12); }
.pricing-details__notes {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
  margin-top: var(--space-4);
}
@media (max-width: 749px) { .pricing-details__notes { grid-template-columns: 1fr; } }
.pricing-note {
  padding: var(--space-6);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pricing-note h3 { font-size: var(--text-base); margin-bottom: var(--space-3); }
.pricing-note__body, .pricing-note__body p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }

.pricing-terms {
  display: flex; align-items: flex-start; gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-background);
}
.pricing-terms svg { width: 1.5rem; height: 1.5rem; color: var(--color-accent); flex-shrink: 0; margin-top: 0.15em; }
.pricing-terms h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.pricing-terms__body, .pricing-terms__body p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
.pricing-terms__body strong { color: var(--color-text); }

/* --------------------------------------------------------------------- */
/* Contact                                                                  */
/* --------------------------------------------------------------------- */

.contact-main__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 909px) { .contact-main__grid { grid-template-columns: 1fr; } }

.contact-form-card {
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 500px) { .field-row { grid-template-columns: 1fr; } }

.contact-side { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-side__block { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.contact-side__block h3 { font-size: var(--text-base); margin-bottom: var(--space-3); }
.contact-side__block p { color: var(--color-text-muted); font-size: var(--text-sm); }
.contact-side__block ul { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.contact-side__block li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.contact-side__block svg { width: 1rem; height: 1rem; color: var(--color-accent); }

.calendar-embed {
  min-height: 20rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------- */
/* Book a call                                                             */
/* --------------------------------------------------------------------- */

.booking-page__subheading { max-width: 38rem; }
.booking-page__subheading p { margin-top: var(--space-5); font-size: var(--text-lg); color: var(--color-text-muted); }

.booking-page__expect {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-8);
}
.booking-page__expect li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.booking-page__expect svg { width: 1.1rem; height: 1.1rem; color: var(--color-accent); flex-shrink: 0; }

.booking-page__body { margin-top: var(--space-10); max-width: 44rem; }
.booking-page__embed { min-height: 650px; }

.booking-page__fallback-note { margin-bottom: var(--space-6); font-size: var(--text-base); }

/* --------------------------------------------------------------------- */
/* Blog / article                                                          */
/* --------------------------------------------------------------------- */

.pagination {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-12);
}
.pagination a,
.pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.pagination a:hover { color: var(--color-text); }
.pagination .page.current { background: var(--color-accent); color: var(--color-accent-text); }

.blog-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-10); }
@media (max-width: 989px) { .blog-list__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 650px) { .blog-list__grid { grid-template-columns: 1fr; } }

.article-card { display: block; }
.article-card__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--color-background-alt); border: 1px solid var(--color-border); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.article-card__body { padding-top: var(--space-4); }
.article-card__meta { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.article-card__body h3 { font-size: var(--text-lg); margin-top: var(--space-2); }
.article-card__excerpt { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); }

.article-main__header { max-width: 42rem; margin-inline: auto; text-align: center; }
.article-main__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-4); }
.article-main__image { margin-top: var(--space-8); border-radius: var(--radius-lg); overflow: hidden; }
.article-main__image img { width: 100%; }
.article-main__body { max-width: 42rem; margin-inline: auto; margin-top: var(--space-10); font-size: var(--text-base); color: var(--color-text-muted); }
.article-main__body h2 { font-size: var(--text-2xl); color: var(--color-text); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article-main__body p { margin-bottom: var(--space-4); }
.article-main__body img { border-radius: var(--radius-md); margin-block: var(--space-6); }
.article-main__body a { color: var(--color-accent); text-decoration: underline; }
.article-main__footer { max-width: 42rem; margin-inline: auto; margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

/* --------------------------------------------------------------------- */
/* 404                                                                      */
/* --------------------------------------------------------------------- */

.error-404 { text-align: center; padding-block: var(--space-20) var(--space-16); }
.error-404__code { font-family: var(--font-heading); font-size: var(--text-5xl); color: var(--color-accent); }
.error-404__heading { font-size: var(--text-3xl); margin-top: var(--space-3); }
.error-404__text { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-lg); }
.error-404__actions { margin-top: var(--space-8); display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }

/* Website checklist (lead-magnet deliverable page) */
.website-checklist__inner { max-width: 52rem; margin-inline: auto; }
.website-checklist__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-5); counter-reset: none; }
.checklist-point {
  display: flex; gap: var(--space-5); align-items: flex-start;
  padding: var(--space-6);
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.checklist-point__num {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--color-accent); color: var(--color-accent-text);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg);
}
.checklist-point__title { font-size: var(--text-lg); font-weight: 700; }
.checklist-point__text { margin-top: var(--space-2); color: var(--color-text-muted); line-height: 1.6; }
.website-checklist__cta { margin-top: var(--space-10); text-align: center; }
@media (max-width: 749px) {
  .checklist-point { gap: var(--space-4); padding: var(--space-5); }
  .checklist-point__num { width: 2.1rem; height: 2.1rem; font-size: var(--text-base); }
}

.page-header__updated { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }