/* ==========================================================================
   ORION CREATIVE — theme-specific sections + personality (dark + line-art).
   Generic components (button, card, folio, section-title, field, tag) come
   from the shared root DS: standards/components/components.css (enqueued as
   orion-components). Only Orion's sections, personality and band overrides
   live here.
   ========================================================================== */

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

/* Accessible skip link: off-screen until keyboard focus. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 999;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-bg);
  transition: top var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-sm);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
}

.site-header__brand {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.site-header__logo {
  display: block;
  width: auto;
  height: 28px;
}

@media (min-width: 768px) {
  .site-header__logo {
    height: 32px;
  }
}

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav__toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--color-text);
}

.site-nav {
  flex-basis: 100%;
}

.site-nav__list {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  list-style: none;
}

.site-header.is-nav-open .site-nav__list {
  display: flex;
}

.site-nav a {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
}

.site-nav a:hover {
  text-decoration: none;
  color: var(--color-accent);
}

/* services dropdown */
.site-nav__sub-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
  cursor: pointer;
}

.site-nav__sub-toggle:hover {
  color: var(--color-accent);
}

.site-nav__caret {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
  border-bottom: 1.5px solid currentcolor;
  border-right: 1.5px solid currentcolor;
}

.site-nav__item--has-sub.is-open .site-nav__caret {
  transform: rotate(-135deg);
}

.site-nav__sub {
  display: none;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  padding-left: var(--space-sm);
  list-style: none;
}

.site-nav__item--has-sub.is-open .site-nav__sub {
  display: flex;
}

@media (min-width: 980px) {
  .nav__toggle {
    display: none;
  }

  .site-nav {
    flex-basis: auto;
  }

  .site-nav__list {
    display: flex;
    flex-direction: row;
    gap: var(--space-md);
    align-items: center;
    padding-top: 0;
  }

  .site-nav__item--has-sub {
    position: relative;
  }

  .site-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    gap: 2px;
    min-width: 220px;
    margin-top: 0;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 24px 48px -28px rgb(0 0 0 / 85%);
  }

  .site-nav__item--has-sub:hover .site-nav__sub,
  .site-nav__item--has-sub:focus-within .site-nav__sub,
  .site-nav__item--has-sub.is-open .site-nav__sub {
    display: flex;
  }

  .site-nav__sub a {
    display: block;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .site-nav__sub a:hover {
    background: var(--color-bg-alt);
  }
}

/* --------------------------------------- line-art connectors + parallax */
.lineart {
  position: absolute;
  z-index: 0;
  background: url("../img/brand/pattern.png") no-repeat center right / cover;
  opacity: 0.5;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .lineart--parallax {
    animation: lineart-drift linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes lineart-drift {
  from {
    transform: translateY(-7%);
  }

  to {
    transform: translateY(7%);
  }
}

/* section lead (sits under a shared .section-title) */
.section-lead {
  max-width: 60ch;
  margin-top: var(--space-sm);
  color: var(--color-text-dim);
}

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding-block: clamp(64px, 10vw, 132px) 0;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.hero .lineart {
  top: -10%;
  right: -12%;
  width: 62%;
  height: 130%;
}

/* The brand circuit as the hero's "AI engine" — the human words (left)
   meet the machine (right). Masked so it stays clear of the type. */
.hero__engine {
  position: absolute;
  top: -4%;
  right: -2%;
  z-index: 0;
  width: 42%;
  height: 74%;
  background: url("../img/brand/pattern.png") no-repeat right top / contain;
  opacity: 0.55;
  mask-image: linear-gradient(to bottom left, var(--color-bg) 32%, transparent 88%);
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .hero__engine {
    animation: lineart-drift linear both;
    animation-timeline: scroll(root);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__engine {
    animation: none;
  }
}

/* Interactive constellation (JS canvas). Sits behind the hero text; the static
   engine is hidden once the canvas is live (constellation.js adds the class). */
.hero__net {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero--net-live .hero__engine {
  display: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(48px, 6vw, 80px);
}

.hero__kicker {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero__kicker::before {
  width: 28px;
  height: 2px;
  background: var(--color-accent);
  content: "";
}

.hero__title em {
  color: var(--color-accent);
  font-style: normal;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: 0;
}

/* --------------------------------------------------------------- intro */
.intro {
  padding-block: var(--section-y);
}

.intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}

.intro__lead {
  max-width: 42ch;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

@media (min-width: 980px) {
  .intro__inner {
    grid-template-columns: auto 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* ------------------------------------------------------- services (cards) */
.services {
  padding-block: var(--section-y);
  border-top: 1px solid var(--color-border);
}

.services__head {
  margin-bottom: var(--space-xl);
}

.services__grid {
  display: grid;
  gap: var(--space-lg);
  list-style: none;
}

.svc {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
  overflow: hidden;
}

.svc__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-xs);
  color: var(--color-accent);
}

.svc__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.svc__desc {
  color: var(--color-text-dim);
}

.svc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.svc__list li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.svc__list li::before {
  position: absolute;
  left: 0;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  content: "+";
}

@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------- why-us */
.whyus {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.whyus .lineart {
  top: 0;
  right: -14%;
  width: 55%;
  height: 100%;
}

.whyus__inner {
  position: relative;
  z-index: 1;
}

.whyus__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: none;
  list-style: none;
}

.cap {
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-accent);
}

.cap__title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.cap__desc {
  max-width: 40ch;
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

@media (min-width: 768px) {
  .whyus__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    max-width: 60%;
  }
}

/* --------------------------------------------------------------- work */
.work__all {
  margin-left: auto;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.work__bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  overflow: hidden;
}

.work-card__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--color-surface), var(--color-bg));
}

.work-card__label {
  position: relative;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
}

.work-card:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

@media (min-width: 768px) {
  .work__bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-card--1 {
    grid-column: span 2;
    min-height: 320px;
  }
}

@media (min-width: 980px) {
  .work__bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
  }

  .work-card--1 {
    grid-column: span 2;
    grid-row: span 2;
  }

  .work-card--4 {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------- process */
.process {
  padding-block: var(--section-y);
  border-top: 1px solid var(--color-border);
}

.process__head {
  margin-bottom: var(--space-xl);
}

.process__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  list-style: none;
}

.step__title {
  margin-block: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.step__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

@media (min-width: 768px) {
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 980px) {
  .process__steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------- more / social */
.more {
  padding-block: var(--space-2xl);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.more__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.more__lead {
  margin-top: var(--space-xs);
  color: var(--color-text-dim);
}

.more__links {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-md);
  list-style: none;
}

.more__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-accent);
}

.more__links a:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  text-decoration: none;
}

.more__links svg {
  width: 20px;
  height: 20px;
}

/* ---------------------------------- contact (orange band; .field is shared) */
.contact__form {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.field--full {
  grid-column: 1 / -1;
}

.contact__submit {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .contact__form {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------- footer */
.site-footer__brand {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--color-text);
}

.site-footer__co {
  margin-top: var(--space-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.site-footer__meta {
  max-width: 52ch;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.site-footer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  list-style: none;
}

.site-footer__contacts a {
  color: var(--color-text-dim);
}

/* -------------------------------------------------- inner page hero */
.page-hero {
  position: relative;
  padding-block: clamp(56px, 9vw, 120px);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.page-hero .lineart {
  top: -20%;
  right: -10%;
  width: 48%;
  height: 150%;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero__title {
  max-width: 18ch;
  margin-top: var(--space-sm);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: 1.14; /* VN stacked diacritics clearance (wraps on narrow) */
  letter-spacing: -0.02em;
}

.page-hero__lead {
  max-width: 52ch;
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  color: var(--color-text-dim);
}

/* -------------------------------------------------- generic page section */
.page-section {
  padding-block: var(--section-y);
}

/* -------------------------------------------------- prose (article body) */
.prose {
  max-width: min(
    var(--container-narrow),
    68ch
  ); /* comfortable reading measure (~65ch), not the full 760px */

  margin-inline: auto;
}

.prose h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.prose h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.prose p {
  margin-bottom: var(--space-md);
  color: var(--color-text-dim);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
  color: var(--color-text-dim);
}

.prose li {
  margin-bottom: var(--space-2xs);
}

.prose a {
  color: var(--color-accent);
}

.prose img {
  margin-block: var(--space-md);
  border-radius: var(--radius-lg);
}

.prose blockquote {
  margin-block: var(--space-md);
  padding-left: var(--space-md);
  color: var(--color-text);
  border-left: 3px solid var(--color-accent);
}

/* -------------------------------------------------- post grid (blog) */
.post-list {
  padding-block: var(--section-y);
}

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  list-style: none;
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  overflow: hidden;
}

.post-card:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

/* Image-less card media carries a brand decoration (Orion constellation +
   circuit), set per-card via an inline background-image (orion_decor_uri). */
.post-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-bg) center / cover no-repeat;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
}

.post-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.post-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

@media (min-width: 768px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------- portfolio grid */
.portfolio {
  padding-block: var(--section-y);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  list-style: none;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  overflow: hidden;
}

.project-card:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

.project-card__media {
  position: absolute;
  inset: 0;
  background: var(--color-bg) center / cover no-repeat;
}

.project-card__title {
  position: relative;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

@media (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------------------------ scroll reveal (native) */
.reveal {
  animation: reveal-up linear both;
  animation-range: entry 0% cover 28%;
  animation-timeline: view();
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .lineart--parallax {
    animation: none;
  }
}

/* ==========================================================================
   FRONT PAGE v3 — agency layout (hero rotator, stats, quote, AI, work +
   marquee, testimonials, pricing, FAQ, dark contact, multi-col footer).
   Extends / overrides the sections above; tokens only.
   ========================================================================== */

/* anchor offset under the sticky header */
:target,
.site-main section[id] {
  scroll-margin-top: 96px;
}

/* ------------------------------------------------------- placeholder media */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, var(--color-surface), var(--color-bg));
  overflow: hidden;
}

.ph::after {
  position: absolute;
  inset: 0;
  background: url("../img/brand/pattern.png") no-repeat center right / cover;
  opacity: 0.5;
  content: "";
  pointer-events: none;
}

.ph__label {
  position: relative;
  z-index: 1;
  font-family: ui-monospace, monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.ph--strip {
  aspect-ratio: 4 / 3;
}

.ph--banner {
  aspect-ratio: 16 / 9;
}

/* Real image in a media slot (fills the slot, crops with cover). */
.media-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.intro__media .media-img,
.whyus__media .media-img {
  height: 100%;
}

.project__media .media-img {
  aspect-ratio: 4 / 3;
}

/* "Illustrative content" markers. */
.illus-note {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  text-align: right;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.illus-inline {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* --------------------------------------------------- shared button motion */
.btn {
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.btn:hover {
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--color-cta) 60%, transparent);
  transform: translateY(-2px);
}

.btn--ghost:hover {
  box-shadow: none;
}

/* two-column section heads (title/lead) shared across sections */
.services__head,
.process__head,
.ai__head,
.testimonials__head,
.pricing__head {
  display: grid;
  gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.services__head .folio,
.process__head .folio,
.ai__head .folio,
.testimonials__head .folio,
.pricing__head .folio,
.work__head .folio,
.whyus__intro .folio,
.faq__head .folio,
.intro__body .folio {
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .services__head,
  .process__head,
  .ai__head,
  .testimonials__head,
  .pricing__head {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

/* --------------------------------------------------------- hero (rebuilt) */
.hero__title {
  max-width: none;
  margin-top: var(--space-lg);
  font-size: clamp(52px, 10vw, 140px);
  font-weight: var(--weight-black);
  line-height: 1.16; /* VN stacked diacritics: dấu-nặng (Ộ) of one line + dấu-mũ/sắc of the next collide below ~1.15 on multi-line display */
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hero__title-static {
  display: block;
  color: var(--color-text);
}

.hero__rotator {
  position: relative;
  display: block;
  height: 0.95em;
  color: var(--color-accent);
}

.hero__word {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: hero-word 6.6s linear infinite;
  white-space: nowrap;
}

.hero__word:nth-child(1) {
  opacity: 1;
  animation-delay: 0s;
}

.hero__word:nth-child(2) {
  animation-delay: -2.2s;
}

.hero__word:nth-child(3) {
  animation-delay: -4.4s;
}

@keyframes hero-word {
  0%,
  26% {
    opacity: 1;
    transform: translateY(0);
  }

  33%,
  93% {
    opacity: 0;
    transform: translateY(-0.32em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--space-lg);
}

.hero__lead {
  max-width: 46ch;
  margin-top: 0;
  font-size: var(--text-lg);
  color: var(--color-text-dim);
}

.hero__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--color-border);
  border-block: 1px solid var(--color-border);
}

.hero__strip .ph {
  transition: filter var(--dur-slow) var(--ease-out);
}

.hero__strip .ph:hover {
  filter: brightness(1.3);
}

/* --------------------------------------------------------------- stats */
.stats {
  background: var(--color-bg-alt);
}

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  padding-block: 0;
  list-style: none;
}

.stat {
  padding: clamp(28px, 4vw, 52px) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.stat:first-child {
  border-top: none;
}

.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: var(--weight-black);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.stat__suffix {
  color: var(--color-accent);
}

.stat__label {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

@media (min-width: 560px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat:nth-child(2) {
    border-top: none;
  }

  .stat:nth-child(odd) {
    border-right: 1px solid var(--color-border);
  }
}

@media (min-width: 980px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat {
    border-top: none;
  }

  .stat:not(:last-child) {
    border-right: 1px solid var(--color-border);
  }
}

/* ------------------------------------------------------- intro (rebuilt) */
.intro__media {
  aspect-ratio: 5 / 4;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 980px) {
  .intro__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(48px, 7vw, 112px);
    align-items: center;
  }
}

/* ---------------------------------------------------- services (rebuilt) */
.svc:hover {
  border-color: var(--color-accent);
  box-shadow: 0 24px 50px -26px rgb(0 0 0 / 85%);
  transform: translateY(-8px);
}

.svc__media {
  display: block;
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.svc__more {
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

/* --------------------------------------------------------------- quote */
.quote {
  padding-block: clamp(80px, 12vw, 160px);
  background: repeating-linear-gradient(
    45deg,
    var(--color-bg-alt),
    var(--color-bg-alt) 13px,
    var(--color-bg) 13px,
    var(--color-bg) 26px
  );
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.quote .container--narrow {
  max-width: 1100px;
}

.quote__mark {
  font-family: var(--font-heading);
  font-size: 120px;
  line-height: 0.5;
  color: var(--color-accent);
}

.quote__text {
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: var(--weight-bold);
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------------------------------------------------- process (rebuilt) */
.step {
  padding-top: var(--space-md);
  transition: border-color var(--dur-base) var(--ease-out);
  border-top: 2px solid var(--color-border);
}

.step:hover {
  border-color: var(--color-accent);
}

.step__no {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.badge--ai {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-accent);
  vertical-align: middle;
}

@media (min-width: 768px) {
  .process__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .process__steps {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ------------------------------------------------------ why-us (rebuilt) */
.whyus__head {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  max-width: none;
  margin-bottom: var(--space-xl);
}

.whyus__media {
  aspect-ratio: 5 / 4;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.whyus__grid .cap__title {
  color: var(--color-text);
}

@media (min-width: 768px) {
  .whyus__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

@media (min-width: 980px) {
  .whyus__head {
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 7vw, 112px);
  }

  .whyus__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------- ai band */
.ai {
  padding-block: var(--section-y);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.ai__title {
  margin-top: var(--space-md);
}

.ai__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  list-style: none;
}

.ai-card {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.ai-card--lead {
  border-color: var(--color-accent);
}

.ai-card__title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.ai-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

@media (min-width: 560px) {
  .ai__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .ai__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------- work + marquee (new) */
.work {
  padding-block: var(--section-y);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.work__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
  margin-bottom: var(--space-xl);
}

.work__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

.project {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
  overflow: hidden;
}

.project:hover {
  border-color: var(--color-accent);
  box-shadow: 0 24px 50px -26px rgb(0 0 0 / 85%);
  transform: translateY(-8px);
}

.project__media {
  border-bottom: 1px solid var(--color-border);
}

.project__media .ph {
  aspect-ratio: 4 / 3;
}

.project__body {
  padding: var(--space-md);
}

.project__tag {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.project__title {
  margin-block: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.project__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.work__trust {
  margin-bottom: var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.marquee {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee__track:hover {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  gap: var(--space-sm);
  padding-right: var(--space-sm);
}

.marquee__item {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 130px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  font-family: ui-monospace, monospace;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  .work__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------- testimonials */
.testimonials {
  position: relative;
  padding-block: var(--section-y);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.testimonials::before {
  position: absolute;
  top: 6%;
  right: -6%;
  width: 52%;
  aspect-ratio: 1000 / 563;
  background: url("../img/brand/pattern.png") no-repeat top right / contain;
  opacity: 0.12;
  content: "";
  pointer-events: none;
}

.testimonials > .container {
  position: relative;
  z-index: 1;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  list-style: none;
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.testimonial__mark {
  font-family: var(--font-heading);
  font-size: 64px;
  line-height: 0.4;
  color: var(--color-accent);
}

.testimonial__quote {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text);
}

.testimonial__author {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-top: auto;
}

.testimonial__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: linear-gradient(140deg, var(--color-surface), var(--color-bg));
}

.testimonial__meta {
  display: flex;
  flex-direction: column;
}

.testimonial__name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.testimonial__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------- pricing */
.pricing {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.pricing::before {
  position: absolute;
  top: 6%;
  left: -6%;
  width: 52%;
  aspect-ratio: 1000 / 563;
  background: url("../img/brand/pattern.png") no-repeat top left / contain;
  opacity: 0.12;
  content: "";
  pointer-events: none;
}

.pricing > .container {
  position: relative;
  z-index: 1;
}

.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: stretch;
  list-style: none;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.plan--featured {
  border-color: var(--color-accent);
  box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.plan__badge {
  position: absolute;
  top: -12px;
  left: var(--space-lg);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-invert);
}

.plan__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.plan__blurb {
  margin-top: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.plan__price {
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
}

.plan__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-md) 0 var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.plan__list li {
  position: relative;
  padding-left: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.plan__list li::before {
  position: absolute;
  left: 0;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  content: "+";
}

.plan__cta {
  width: 100%;
  margin-top: auto;
}

@media (min-width: 768px) {
  .pricing__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------- faq */
.faq {
  padding-block: var(--section-y);
  border-top: 1px solid var(--color-border);
}

.faq__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.faq__head .section-lead a {
  color: var(--color-accent);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item__q {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__plus {
  flex: none;
  font-size: var(--text-xl);
  font-weight: var(--weight-normal);
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq-item[open] .faq-item__plus {
  transform: rotate(45deg);
}

.faq-item__a {
  padding-bottom: var(--space-md);
  color: var(--color-text-dim);
}

@media (min-width: 980px) {
  .faq__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(48px, 7vw, 112px);
  }
}

/* --------------------------------------------------------------- cta band */
.cta {
  background: repeating-linear-gradient(
    45deg,
    var(--color-bg-alt),
    var(--color-bg-alt) 13px,
    var(--color-bg) 13px,
    var(--color-bg) 26px
  );
  border-top: 1px solid var(--color-border);
}

.cta__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(56px, 7vw, 88px);
}

.cta__title {
  max-width: 20ch;
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: var(--weight-black);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cta__btn {
  white-space: nowrap;
}

/* --------------------------------------------- contact (dark, overrides) */
.contact {
  padding-block: var(--section-y);
  background: var(--color-bg-alt);
  color: var(--color-text);
}

.contact__head {
  display: grid;
  gap: var(--space-lg);
  align-items: end;
}

.contact__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.contact__accent {
  color: var(--color-accent);
}

.contact__lead {
  max-width: 46ch;
  margin-top: var(--space-xs);
  color: var(--color-text-dim);
}

.contact .field label {
  color: var(--color-text);
}

.contact .field input,
.contact .field textarea {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.contact__submit .btn {
  border-color: var(--color-cta);
  background: var(--color-cta);
  color: var(--color-text-invert);
}

@media (min-width: 768px) {
  .contact__head {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------- footer (rebuilt) */
.site-footer {
  padding-block: 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}

.site-footer > .container {
  padding-top: clamp(64px, 9vw, 104px);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.site-footer__about {
  max-width: 34ch;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.site-footer__social {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-dim);
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.site-footer__social a:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  text-decoration: none;
  color: var(--color-text-invert);
  transform: translateY(-3px);
}

.site-footer__social svg {
  width: 18px;
  height: 18px;
}

.site-footer__heading {
  margin-bottom: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.site-footer__nav a:hover {
  text-decoration: none;
  color: var(--color-accent);
}

.site-footer__legal {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.site-footer__bar {
  margin-top: clamp(40px, 5vw, 64px);
  padding-block: 0;
  background: var(--color-accent);
  font-size: var(--text-sm);
  text-align: left;
  color: var(--color-text-invert);
}

.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-sm);
}

.site-footer__bar-inner p {
  font-size: var(--text-sm);
  color: var(--color-text-invert);
}

.site-footer__bar-inner ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: 0;
  list-style: none;
}

.site-footer__bar-inner a {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-invert);
}

@media (min-width: 768px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .site-footer__cols {
    grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
    gap: clamp(40px, 5vw, 72px);
  }
}

/* --------------------------------------------- reduced-motion additions */
@media (prefers-reduced-motion: reduce) {
  .hero__word {
    animation: none;
  }

  .hero__word:nth-child(n + 2) {
    opacity: 0;
  }

  .hero__word:first-child {
    opacity: 1;
  }

  .marquee__track {
    animation: none;
  }

  .btn:hover {
    box-shadow: none;
    transform: none;
  }
}

/* ==========================================================================
   SERVICE (PILLAR) PAGES — hero + overview + benefits + deliverables +
   related. Process / FAQ / CTA reuse the homepage section styles above.
   ========================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  list-style: none;
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb a:hover {
  text-decoration: none;
  color: var(--color-accent);
}

.breadcrumb [aria-current] {
  color: var(--color-text);
}

/* -------------------------------------------------------- service hero */
.svc-hero {
  position: relative;
  padding-block: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

.svc-hero__kicker {
  margin-top: var(--space-lg);
}

.svc-hero__title {
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: clamp(44px, 8vw, 108px);
  font-weight: var(--weight-black);
  line-height: 1.16; /* VN stacked diacritics clearance on multi-line display */
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.svc-hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--space-lg);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.svc-hero__lead {
  max-width: 52ch;
  font-size: var(--text-lg);
  color: var(--color-text-dim);
}

/* -------------------------------------------------- generic service band */
.svc-sec {
  padding-block: var(--section-y);
  border-top: 1px solid var(--color-border);
}

.svc-sec--alt {
  background: var(--color-bg-alt);
}

.svc-sec__head {
  display: grid;
  gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.svc-sec__head .folio {
  margin-bottom: var(--space-sm);
}

@media (min-width: 768px) {
  .svc-sec__head {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

/* --------------------------------------------------------------- overview */
.svc-overview__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}

.svc-overview__inner .folio {
  margin-bottom: var(--space-sm);
}

.svc-overview__lead {
  margin-bottom: var(--space-md);
  font-size: var(--text-lg);
  color: var(--color-text);
}

.svc-overview__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.svc-overview__list li {
  position: relative;
  padding-left: 26px;
  color: var(--color-text);
}

.svc-overview__list li::before {
  position: absolute;
  left: 0;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  content: "+";
}

@media (min-width: 980px) {
  .svc-overview__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------- benefits */
.svc-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  list-style: none;
}

.svc-benefit {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.svc-benefit__title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.svc-benefit__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

@media (min-width: 768px) {
  .svc-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .svc-benefits__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------- deliverables */
.svc-deliver__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-border);
  list-style: none;
  overflow: hidden;
}

.svc-deliver {
  padding: var(--space-lg);
  background: var(--color-surface);
}

.svc-deliver__no {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

.svc-deliver__title {
  margin: var(--space-xs) 0 var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.svc-deliver__desc {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

@media (min-width: 768px) {
  .svc-deliver__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .svc-deliver__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------------------------------------------------- related svc */
.svc-related__title {
  margin-bottom: var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.svc-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-related__card {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  transition:
    transform var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out);
}

.svc-related__card:hover {
  border-color: var(--color-accent);
  text-decoration: none;
  transform: translateY(-6px);
}

.svc-related__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.svc-related__desc {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.svc-related__arrow {
  flex: none;
  font-size: var(--text-xl);
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .svc-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   BLOG / ARCHIVE / SINGLE / 404 — pagination, post nav, helpers.
   Grid + card + prose styles are defined above; these fill the gaps.
   ========================================================================== */

.page-back {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  margin-bottom: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}

.page-back:hover {
  text-decoration: none;
  filter: brightness(1.15);
}

.entry-empty {
  padding-block: var(--space-xl);
  color: var(--color-text-dim);
}

/* pagination (the_posts_pagination) */
.pagination {
  margin-top: var(--space-xl);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.pagination .page-numbers:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-accent);
}

.pagination .page-numbers.current {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-invert);
}

.pagination .page-numbers.dots {
  border-color: transparent;
}

/* single post prev/next navigation */
.post-nav {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.post-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  color: var(--color-text);
}

.post-nav a:hover {
  text-decoration: none;
}

.post-nav__label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.post-nav__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  transition: color var(--dur-base) var(--ease-out);
}

.post-nav a:hover .post-nav__title {
  color: var(--color-accent);
}

.post-nav__next {
  text-align: right;
}

@media (min-width: 768px) {
  .post-nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* 404 */
.notfound {
  text-align: center;
}

.notfound .page-hero__title,
.notfound .page-hero__lead {
  margin-inline: auto;
}

.notfound__code {
  font-family: var(--font-heading);
  font-size: clamp(80px, 18vw, 220px);
  font-weight: var(--weight-black);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-accent);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

/* --------------------------------------- Fluent Forms skin (dark contact) */
.fluentform {
  margin-top: var(--space-xl);
}

.fluentform .ff-el-input--label label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fluentform input:not([type="submit"], [type="checkbox"], [type="radio"]),
.fluentform textarea,
.fluentform select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
}

.fluentform textarea {
  min-height: 140px;
  resize: vertical;
}

.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {
  border-color: var(--color-accent);
  outline: none;
}

.fluentform input::placeholder,
.fluentform textarea::placeholder {
  color: var(--color-text-muted);
}

.fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border: 1px solid var(--color-cta);
  border-radius: var(--radius-md);
  background: var(--color-cta);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-text-invert);
  transition:
    background var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.fluentform .ff-btn-submit:hover {
  background: var(--color-cta-hover);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--color-cta) 60%, transparent);
  transform: translateY(-2px);
}

.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea {
  border-color: var(--color-danger);
}

.fluentform .error,
.fluentform .text-danger {
  font-size: var(--text-sm);
  color: var(--color-danger);
}

.fluentform .ff-message-success {
  padding: var(--space-md);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  color: var(--color-text);
}