/* ==========================================================================
   Square Space Webs Builder — Inner page styles (service landing pages)
   Layered on top of css/style.css. Layout register follows the reference
   site: light backgrounds, generous whitespace, oversized editorial headings,
   rounded cards and solid pill CTAs. Tokens come from style.css :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header — solid variant for pages whose hero is light
   -------------------------------------------------------------------------- */
.site-header--solid { background: #000; border-color: var(--color-border-dark); }

.main-nav__link.is-active { opacity: 1; }
.main-nav__link.is-active::after { right: 0; }
.dropdown__item.is-active { background: var(--color-muted-dark); }

@media (max-width: 860px) {
  .dropdown__item.is-active { background: var(--color-muted); }
}

/* --------------------------------------------------------------------------
   Service hero
   -------------------------------------------------------------------------- */
.svc-hero {
  background: var(--color-bg);
  padding-block: clamp(3rem, 7vw, 6rem) var(--space-3xl);
  border-bottom: 1px solid var(--color-border);
}

.svc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.svc-hero__headline {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
  max-width: 16ch;
}

.svc-hero__subtext {
  font-size: 1.125rem;
  color: var(--color-text-soft);
  max-width: 48ch;
  margin-bottom: var(--space-xl);
}

.svc-hero__points { display: grid; gap: 0.65rem; margin-bottom: var(--space-xl); }
.svc-hero__points li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; font-weight: 500; }
.svc-hero__points .icon { color: var(--color-fg); margin-top: 4px; }

.svc-hero__actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.svc-hero__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.9375rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) ease;
}
.svc-hero__phone:hover { border-color: var(--color-fg); }

.svc-hero__microcopy { margin-top: var(--space-md); font-size: 0.8125rem; color: var(--color-text-soft); }

.svc-hero__visual { display: grid; gap: var(--space-xl); }

.svc-hero__figure {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
}
.svc-hero__figure img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }

.svc-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}
.svc-hero__stats li { display: flex; flex-direction: column; gap: 0.2rem; }
.svc-hero__stats strong {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.svc-hero__stats span { font-size: 0.8125rem; color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   Value proposition block
   -------------------------------------------------------------------------- */
.value-prop { padding-block: var(--space-3xl); }
.value-prop__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.value-prop__head .reveal-heading { margin-bottom: 0; max-width: 16ch; }
.value-prop__body p { color: var(--color-text-soft); font-size: 1.0625rem; margin-bottom: var(--space-lg); }
.value-prop__body p:last-of-type { margin-bottom: 0; }

.value-prop__list {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}
.value-prop__list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9375rem; font-weight: 500; }
.value-prop__list .icon { color: var(--color-fg); margin-top: 4px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Generic service sections
   -------------------------------------------------------------------------- */
.svc-section { padding-block: var(--space-3xl); }
.svc-section--muted { background: var(--color-muted); }

.svc-section__head { margin-bottom: var(--space-2xl); max-width: 62ch; }
.svc-section__head--center { margin-inline: auto; text-align: center; }
.svc-section__head--center .section-title,
.svc-section__head--center .section-sub { margin-inline: auto; }
.svc-section__head .section-title { margin-bottom: var(--space-md); max-width: 24ch; }
.svc-section__head .section-sub { margin-bottom: 0; }

/* Cards ------------------------------------------------------------------ */
.card-grid { display: grid; gap: var(--space-xl); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.svc-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: var(--space-xl);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
}
.svc-section--muted .svc-card { background: var(--color-bg); }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.svc-card__icon { display: block; color: var(--color-fg); margin-bottom: var(--space-lg); }
.svc-card h3 { font-size: 1.1875rem; margin-bottom: var(--space-sm); }
.svc-card p { color: var(--color-text-soft); font-size: 0.9375rem; }

.svc-card__points {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.svc-card__points li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.875rem; color: var(--color-text-soft); }
.svc-card__points .icon { color: var(--color-fg); margin-top: 3px; flex-shrink: 0; }

/* Numbered bullet block --------------------------------------------------- */
.bullet-block { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.bullet-block__item {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}
.bullet-block__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-border);
  letter-spacing: -0.02em;
  transition: color var(--dur-base) ease;
}
.bullet-block__item:hover .bullet-block__num { color: var(--color-fg); }
.bullet-block__item h3 { font-size: 1.375rem; margin-bottom: var(--space-sm); }
.bullet-block__item p { color: var(--color-text-soft); max-width: 68ch; }

/* Pitch (two-column text + image) ---------------------------------------- */
.pitch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.pitch--flip .pitch__figure { order: -1; }
.pitch__body p { color: var(--color-text-soft); font-size: 1.0625rem; margin-bottom: var(--space-lg); }
.pitch__list { display: grid; gap: 0.7rem; margin-bottom: var(--space-xl); }
.pitch__list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9375rem; font-weight: 500; }
.pitch__list .icon { color: var(--color-fg); margin-top: 4px; flex-shrink: 0; }

.pitch__figure { border-radius: 24px; }
.pitch__figure img { aspect-ratio: 9/7; }

/* Checklist --------------------------------------------------------------- */
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem var(--space-xl);
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  font-weight: 500;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.checklist .icon { color: #16a34a; margin-top: 4px; flex-shrink: 0; }

/* Taxonomy ---------------------------------------------------------------- */
.taxonomy { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.taxonomy__group {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: var(--space-xl);
}
.taxonomy__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: var(--space-md); }
.taxonomy__head h3 { font-size: 1.1875rem; }
.taxonomy__text { color: var(--color-text-soft); font-size: 0.9375rem; margin-bottom: var(--space-lg); }
.taxonomy__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.taxonomy__list li { font-size: 0.875rem; color: var(--color-text-soft); position: relative; padding-left: 0.9rem; }
.taxonomy__list li::before {
  content: '';
  position: absolute; left: 0; top: 0.6em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-fg);
}

/* Services overview grid (cross-links) ------------------------------------ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.services-grid__item {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: var(--space-xl);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease;
}
.services-grid__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.services-grid__icon { color: var(--color-fg); margin-bottom: var(--space-lg); }
.services-grid__item h3 { font-size: 1.0625rem; margin-bottom: var(--space-sm); }
.services-grid__item p { color: var(--color-text-soft); font-size: 0.9375rem; margin-bottom: var(--space-lg); }
.services-grid__link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 600; font-size: 0.875rem;
}
.services-grid__item:hover .services-grid__link { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Pricing — "slab" layout
   All tiers sit on one dark panel; the featured tier inverts to a white card
   that overhangs the slab. Monochrome throughout, per the design system.
   -------------------------------------------------------------------------- */
.pricing { padding-block: var(--space-3xl); background: var(--color-muted); }

.pricing__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.35rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  width: fit-content;
  margin: 0 auto var(--space-2xl);
}
.pricing__tab {
  padding: 0.7rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pricing__tab:hover { color: var(--color-fg); }
.pricing__tab.is-active { background: #000; color: #fff; }

.pricing__panel { display: none; }
.pricing__panel.is-active { display: block; }
.pricing__note { text-align: center; color: var(--color-text-soft); font-size: 0.9375rem; margin-bottom: var(--space-xl); }

/* The slab ---------------------------------------------------------------- */
.pricing-slab {
  background: #0d0d0d;
  border-radius: 28px;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  color: var(--color-fg-on-dark);
}

.pricing-slab__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}
.pricing-slab__grid--1 { grid-template-columns: minmax(0, 460px); justify-content: center; }
.pricing-slab__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-slab__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tier -------------------------------------------------------------------- */
.tier {
  display: flex;
  flex-direction: column;
  min-width: 0;
  --check-mark: #0d0d0d;
}

/* Chip + "Most popular" flag share one row */
.tier__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  min-height: 34px;
}
.tier__flag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft-dark);
}

/* Tier name chip — squared label with an offset bracket behind it */
.tier__chip {
  position: relative;
  padding: 0.5rem 1.1rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
}
/* Offset corner brackets, top-left and bottom-right */
.tier__chip::before,
.tier__chip::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  border: 0 solid rgba(255, 255, 255, 0.25);
}
.tier__chip::before {
  top: -5px; left: -5px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.tier__chip::after {
  bottom: -5px; right: -5px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* Price — small "From", oversized figure that fades left to right */
.tier__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.tier__from { font-size: 0.8125rem; color: var(--color-text-soft-dark); font-weight: 500; }
.tier__amount {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(100deg, #ffffff 25%, rgba(255, 255, 255, 0.55) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tier__period { font-size: 0.875rem; color: var(--color-text-soft-dark); }

.tier__desc {
  color: var(--color-text-soft-dark);
  font-size: 0.9375rem;
  margin-bottom: var(--space-xl);
}

.tier__included {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-lg);
}

.tier__features { display: grid; gap: 0.85rem; margin-bottom: var(--space-xl); }
.tier__features li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9375rem; }
.tier__features .icon { color: rgba(255, 255, 255, 0.85); margin-top: 2px; flex-shrink: 0; }
.tier__features span { color: var(--color-fg-on-dark); }

/* CTA — full-width pill at the foot of every card */
.tier__cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 15px 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.tier__cta:hover { background: #fff; border-color: #fff; color: #0d0d0d; transform: translateY(-1px); }

/* Featured tier — inverted white card that overhangs the slab */
.tier--featured {
  background: #fff;
  color: var(--color-fg);
  border-radius: 20px;
  padding: var(--space-xl);
  --check-mark: #ffffff;
}
.tier--featured .tier__flag { color: var(--color-text-soft); }
.tier--featured .tier__chip { background: var(--color-muted); color: var(--color-fg); }
.tier--featured .tier__chip::before,
.tier--featured .tier__chip::after { border-color: rgba(10, 10, 10, 0.22); }
.tier--featured .tier__from,
.tier--featured .tier__period { color: var(--color-text-soft); }
.tier--featured .tier__amount {
  color: var(--color-fg);
  background: linear-gradient(100deg, #0a0a0a 25%, rgba(10, 10, 10, 0.55) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tier--featured .tier__desc { color: var(--color-text-soft); }
.tier--featured .tier__included { color: var(--color-fg); }
.tier--featured .tier__features .icon { color: #0a0a0a; }
.tier--featured .tier__features span { color: var(--color-fg); }
.tier--featured .tier__cta { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.tier--featured .tier__cta:hover { background: #262626; border-color: #262626; color: #fff; }

/* Overhang only on a clean 3-up row, so 6-tier grids stay flush */
@media (min-width: 1025px) {
  .pricing-slab__grid--3[data-count="3"] .tier--featured {
    margin-block: calc(var(--space-xl) * -1);
  }
}

.pricing__footnote { text-align: center; margin-top: var(--space-2xl); color: var(--color-text-soft); font-size: 0.9375rem; }
.pricing__footnote a { font-weight: 600; color: var(--color-fg); border-bottom: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   Portfolio grid + industry filter
   -------------------------------------------------------------------------- */
.portfolio { padding-block: var(--space-3xl); }
.portfolio__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: var(--space-2xl); }
.portfolio__filter {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.portfolio__filter:hover { border-color: var(--color-fg); color: var(--color-fg); }
.portfolio__filter.is-active { background: #000; border-color: #000; color: #fff; }

.portfolio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.portfolio-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-muted);
}
.portfolio-card[hidden] { display: none; }
.portfolio-card img { aspect-ratio: 4/5; object-fit: cover; transition: transform 500ms var(--ease-out); }
.portfolio-card:hover img { transform: scale(1.04); }
.portfolio-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1.25rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}
.portfolio-card figcaption strong { font-family: var(--font-display); font-size: 1.0625rem; }
.portfolio-card figcaption span { font-size: 0.75rem; opacity: 0.85; letter-spacing: 0.04em; text-transform: uppercase; }

.portfolio__more { margin-top: var(--space-2xl); text-align: center; }

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */
.testimonial { padding-block: var(--space-3xl); background: var(--color-muted); }
.testimonial__inner { max-width: 780px; margin-inline: auto; text-align: center; }
.testimonial__mark { display: inline-block; color: var(--color-border); margin-bottom: var(--space-lg); }
.testimonial__mark .icon { margin-inline: auto; }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.testimonial__rating { display: flex; justify-content: center; gap: 0.2rem; margin-top: var(--space-lg); color: #0a0a0a; }
.testimonial__author { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-top: var(--space-xl); }
.testimonial__author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial__author figcaption { text-align: left; display: flex; flex-direction: column; }
.testimonial__author strong { font-size: 0.9375rem; }
.testimonial__author span { font-size: 0.8125rem; color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   Industries strip
   -------------------------------------------------------------------------- */
.industries { padding-block: var(--space-2xl); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.industries__heading {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-xl);
}
.industries__marquee .marquee__track { gap: var(--space-2xl); align-items: center; }
.industry-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--color-text-soft);
  white-space: nowrap;
}
/* Separator dot between entries, so the scrolling list reads as one run. */
.industries__marquee .item + .item .industry-chip::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-border);
  margin-right: var(--space-2xl);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.closing-cta { background: #000; color: var(--color-fg-on-dark); padding-block: var(--space-3xl); }
.closing-cta__inner { text-align: center; max-width: 760px; margin-inline: auto; }
.closing-cta__heading { margin-inline: auto; margin-bottom: var(--space-md); max-width: 20ch; }
.closing-cta__body { color: var(--color-text-soft-dark); font-size: 1.0625rem; margin-bottom: var(--space-2xl); }

.closing-cta__actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }

.closing-cta__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-dark);
  font-size: 0.8125rem;
  color: var(--color-text-soft-dark);
}
.closing-cta__meta li { display: flex; align-items: center; gap: 0.4rem; }
.closing-cta__meta a { border-bottom: 1px solid currentColor; }
.closing-cta__meta a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Footer additions
   -------------------------------------------------------------------------- */
.site-footer__social { display: flex; gap: 0.5rem; margin-top: var(--space-lg); }
.site-footer__social a {
  width: 38px; height: 38px;
  border-radius: 9999px;
  border: 1px solid var(--color-border-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.site-footer__social a:hover { background: #fff; color: #000; opacity: 1; }
.site-footer__meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; color: var(--color-text-soft-dark); }
.site-footer__meta svg { color: var(--color-text-soft-dark); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .svc-hero__inner { grid-template-columns: 1fr; }
  .svc-hero__headline { max-width: 22ch; }
  .value-prop__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-slab__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
  .taxonomy { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .pricing-slab__grid,
  .pricing-slab__grid--1,
  .pricing-slab__grid--2,
  .pricing-slab__grid--3 { grid-template-columns: minmax(0, 1fr); }
  .pricing-slab { padding: var(--space-lg); border-radius: 20px; }
  .portfolio__grid { grid-template-columns: 1fr; }
  .pitch { grid-template-columns: 1fr; }
  .pitch--flip .pitch__figure { order: 0; }
  .bullet-block__item { grid-template-columns: 1fr; gap: var(--space-sm); }
  .taxonomy__list { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .svc-hero__stats { grid-template-columns: 1fr; gap: var(--space-md); }
  .closing-cta__actions { flex-direction: column; align-items: stretch; }
  .closing-cta__actions .btn-primary,
  .closing-cta__actions .btn-secondary { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
body.reduced-motion .svc-card:hover,
body.reduced-motion .tier:hover,
body.reduced-motion .services-grid__item:hover { transform: none; }

/* ==========================================================================
   Contact / Pricing / Portfolio / Legal page styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Simple centred page hero (contact, legal)
   -------------------------------------------------------------------------- */
.contact-hero,
.legal-hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}
.contact-hero__inner,
.legal-hero__inner { max-width: 760px; }

.contact-hero__headline,
.legal-hero__headline {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
}
.contact-hero__subtext,
.legal-hero__intro { font-size: 1.125rem; color: var(--color-text-soft); max-width: 58ch; }
.legal-hero__meta { margin-top: var(--space-lg); font-size: 0.8125rem; color: var(--color-text-soft); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact { padding-block: var(--space-3xl); }
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact__form-title { font-size: 1.5rem; margin-bottom: var(--space-xl); }

.form { display: grid; gap: var(--space-lg); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.form__field { display: grid; gap: 0.4rem; min-width: 0; }
.form__field label { font-size: 0.875rem; font-weight: 600; }
.form__field label span[aria-hidden] { color: var(--color-destructive); }
.form__optional { font-weight: 400; color: var(--color-text-soft); font-size: 0.8125rem; }

.input {
  padding: 14px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  font-size: 16px;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-fg);
  width: 100%;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.input:focus {
  border-color: var(--color-fg);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}
textarea.input { resize: vertical; min-height: 150px; line-height: 1.6; }
select.input { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4b4b' stroke-width='1.6' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
  padding-right: 44px;
}

.form__field.has-error .input { border-color: var(--color-destructive); }
.form__error { font-size: 0.8125rem; color: var(--color-destructive); font-weight: 500; }

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: 0.8125rem; color: var(--color-text-soft); max-width: 52ch; }
.form button[type="submit"] { justify-self: start; }

.form-errors {
  padding: var(--space-md) var(--space-lg);
  border: 1.5px solid var(--color-destructive);
  border-radius: 12px;
  color: var(--color-destructive);
  font-size: 0.9375rem;
  margin-bottom: var(--space-lg);
}

.form-success {
  background: var(--color-muted);
  border-radius: 20px;
  padding: var(--space-2xl);
  display: grid;
  gap: var(--space-md);
  justify-items: start;
}
.form-success .icon--lg { color: #16a34a; }
.form-success h2 { font-size: 1.5rem; }
.form-success p { color: var(--color-text-soft); max-width: 46ch; }
.form-success a { font-weight: 600; border-bottom: 1px solid currentColor; }
.form-success .btn-secondary { border-bottom: 0; margin-top: var(--space-sm); }

.contact__aside { display: grid; gap: var(--space-md); }
.contact-card {
  background: var(--color-muted);
  border-radius: 20px;
  padding: var(--space-xl);
}
.contact-card .icon--lg { color: var(--color-fg); margin-bottom: var(--space-md); }
.contact-card h3 { font-size: 1rem; margin-bottom: var(--space-xs); }
.contact-card p { font-weight: 600; font-size: 1.0625rem; margin-bottom: var(--space-xs); }
.contact-card p a { border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease; }
.contact-card p a:hover { border-color: currentColor; }
.contact-card span { display: block; font-size: 0.8125rem; color: var(--color-text-soft); }
.contact-card span a { border-bottom: 1px solid currentColor; }

.contact-card--dark { background: #0a0a0a; color: var(--color-fg-on-dark); }
.contact-card--dark h3 { color: #fff; margin-bottom: var(--space-lg); }
.contact-steps { display: grid; gap: 0.85rem; counter-reset: step; }
.contact-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.875rem;
  color: var(--color-text-soft-dark);
}
.contact-steps li span {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; color: #fff;
}

/* --------------------------------------------------------------------------
   Pricing page — one block per service
   -------------------------------------------------------------------------- */
.pricing--plain { background: var(--color-bg); }
.pricing--bare  { background: transparent; }

/* The tint belongs to the whole group. Painting it on the inner .pricing block
   instead put the band's edge between a heading and its own tiers, which read
   as a stray grey stripe cutting through the group. */
.pricing-group { background: var(--color-bg); }
.pricing-group--muted { background: var(--color-muted); }
.pricing-group--plain { background: var(--color-bg); }
.pricing-group > .pricing { background: transparent; }

.pricing-group__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  padding-top: var(--space-3xl);
}
.pricing-group__head .section-title { margin-bottom: 0; max-width: 22ch; }
.pricing-group > .pricing { padding-top: var(--space-xl); padding-bottom: var(--space-3xl); }
.pricing-group .pricing .svc-section__head--center { margin-bottom: var(--space-xl); }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal { padding-block: var(--space-3xl); }
.legal__grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.legal__toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.legal__toc-title {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-md);
}
.legal__toc ul { display: grid; gap: 0.55rem; border-left: 1px solid var(--color-border); }
.legal__toc a {
  display: block;
  padding-left: var(--space-md);
  font-size: 0.875rem;
  color: var(--color-text-soft);
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.legal__toc a:hover { color: var(--color-fg); border-left-color: var(--color-fg); }

.legal__body { max-width: 72ch; }
.legal__section + .legal__section { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); }
.legal__section h2 {
  display: flex; align-items: baseline; gap: 0.85rem;
  font-size: 1.375rem;
  margin-bottom: var(--space-md);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.legal__num { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-soft); font-family: var(--font-display); }
.legal__section p { color: var(--color-text-soft); margin-bottom: var(--space-md); }
.legal__section p:last-child { margin-bottom: 0; }

.legal__list { display: grid; gap: 0.6rem; margin-block: var(--space-md); }
.legal__list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--color-text-soft);
  font-size: 0.9375rem;
}
.legal__list li::before {
  content: '';
  position: absolute; left: 0; top: 0.65em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-fg);
}

.legal__contact {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-muted);
  border-radius: 20px;
}
.legal__contact h3 { font-size: 1.0625rem; margin-bottom: var(--space-xs); }
.legal__contact p { color: var(--color-text-soft); }
.legal__contact a { font-weight: 600; color: var(--color-fg); border-bottom: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr; }
  .legal__grid { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
  .legal__toc ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .form__row { grid-template-columns: 1fr; }
  .legal__toc ul { grid-template-columns: 1fr; }
  .pricing-group__head { flex-direction: column; align-items: flex-start; }
}


/* --------------------------------------------------------------------------
   Thank-you page
   -------------------------------------------------------------------------- */
.thankyou { padding-block: var(--space-3xl); background: var(--color-bg); }
.thankyou__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.thankyou__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-muted); color: var(--color-fg);
  margin-bottom: var(--space-xl);
}
.thankyou__heading { font-size: clamp(1.9rem, 3.6vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--space-md); }
.thankyou__body { color: var(--color-text-soft); font-size: 1.0625rem; margin-bottom: var(--space-2xl); }
.thankyou__body a { font-weight: 600; color: var(--color-fg); border-bottom: 1px solid currentColor; }

.thankyou__steps { display: grid; gap: 0.75rem; text-align: left; margin-bottom: var(--space-2xl); }
.thankyou__steps li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; color: var(--color-text-soft); }
.thankyou__steps span {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-fg); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600;
}

.thankyou__redirect { font-size: 0.9375rem; color: var(--color-text-soft); margin-bottom: var(--space-lg); }
.thankyou__redirect strong { color: var(--color-fg); font-variant-numeric: tabular-nums; }
.thankyou__stay {
  margin-left: 0.5rem; font: inherit; color: var(--color-fg); cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.thankyou__actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }

@media (max-width: 520px) {
  .thankyou__actions { flex-direction: column; }
  .thankyou__actions .btn-primary, .thankyou__actions .btn-secondary { width: 100%; }
}