/* Design subpages — ABT token bridge and modern page components. */

/* ============================================================
   Design subpages (course / sketchup / challenge / portfolio / shop)
   on the ABT core. Shared tokens keep the warm premium palette and
   the light/dark behaviour consistent across the design branch.
   ============================================================ */

body.design-subpage.abt {
  --design-ink: var(--d-ink);
  --design-text: var(--d-ink);
  --design-muted: var(--d-muted);
  --design-muted-strong: var(--d-ink-soft);
  --design-muted-soft: var(--d-muted);
  --design-line: var(--d-line);
  --design-border-soft: var(--d-line-soft);
  --design-gold: var(--d-gold);
  --design-surface: var(--d-surface);
  --design-surface-soft: var(--d-bg-warm);
  --design-soft: var(--d-surface);
}

/* ============================================================
   Shop page.
   Turns the former materials page into a product-led storefront.
   ============================================================ */

body.design-subpage.abt.shop-page {
  --shop-max: 1200px;
  --shop-radius: 26px;
}

body.design-subpage.abt.shop-page .shop-shell {
  width: min(var(--shop-max), calc(100% - 56px));
  margin: 0 auto;
}

body.design-subpage.abt.shop-page .abt-display {
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: .004em;
  text-align: left;
}

body.design-subpage.abt.shop-page .shop-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 112px) 0 64px;
  border-bottom: 1px solid var(--d-line-soft);
}

body.design-subpage.abt.shop-page .shop-hero::before,
body.design-subpage.abt.shop-page .shop-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(8px);
}

body.design-subpage.abt.shop-page .shop-hero::before {
  width: 460px;
  height: 460px;
  right: -120px;
  top: -140px;
  background: rgba(171, 127, 78, .14);
}

body.design-subpage.abt.shop-page .shop-hero::after {
  width: 520px;
  height: 520px;
  left: -180px;
  bottom: -260px;
  background: rgba(29, 26, 21, .06);
}

body.design-subpage.abt.shop-page .shop-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
}

body.design-subpage.abt.shop-page .shop-hero__copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

body.design-subpage.abt.shop-page .shop-lead {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--d-ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.65;
}

body.design-subpage.abt.shop-page .shop-hero__actions,
body.design-subpage.abt.shop-page .shop-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

body.design-subpage.abt.shop-page .shop-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 30px auto 0;
}

body.design-subpage.abt.shop-page .shop-stats div {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--d-line-soft);
  border-radius: 18px;
  background: rgba(255, 253, 249, .66);
}

body.design-subpage.abt.shop-page .shop-stats dt {
  margin: 0;
  color: var(--d-ink);
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
}

body.design-subpage.abt.shop-page .shop-stats dd {
  margin: 8px 0 0;
  color: var(--d-muted);
  font-size: .88rem;
  line-height: 1.35;
}

body.design-subpage.abt.shop-page .shop-hero__showcase {
  position: relative;
  display: grid;
  gap: 16px;
}

body.design-subpage.abt.shop-page .shop-feature-card,
body.design-subpage.abt.shop-page .shop-mini-card,
body.design-subpage.abt.shop-page .shop-product,
body.design-subpage.abt.shop-page .shop-steps article,
body.design-subpage.abt.shop-page .shop-final__box {
  border: 1px solid var(--d-line-soft) !important;
  background: var(--d-surface) !important;
  box-shadow: var(--d-shadow) !important;
}

body.design-subpage.abt.shop-page .shop-feature-card {
  overflow: hidden;
  border-radius: 30px;
}

body.design-subpage.abt.shop-page .shop-feature-card__media {
  position: relative;
  height: clamp(280px, 36vw, 360px);
}

body.design-subpage.abt.shop-page .shop-feature-card__media img,
body.design-subpage.abt.shop-page .shop-mini-card img,
body.design-subpage.abt.shop-page .shop-product__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.design-subpage.abt.shop-page .shop-feature-card__media span {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--d-ink);
  color: var(--d-surface);
  font-size: .78rem;
  font-weight: 700;
}

body.design-subpage.abt.shop-page .shop-feature-card__body {
  padding: 22px;
}

body.design-subpage.abt.shop-page .shop-feature-card__body p,
body.design-subpage.abt.shop-page .shop-product__topline span,
body.design-subpage.abt.shop-page .shop-product__footer span {
  margin: 0;
  color: var(--d-muted) !important;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.design-subpage.abt.shop-page .shop-feature-card__body h2,
body.design-subpage.abt.shop-page .shop-product h3,
body.design-subpage.abt.shop-page .shop-steps h3 {
  margin: 8px 0 0;
  color: var(--d-ink) !important;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
}

body.design-subpage.abt.shop-page .shop-feature-card__body h2 {
  font-size: 2rem;
  text-align: center;
}

body.design-subpage.abt.shop-page .shop-feature-card__row,
body.design-subpage.abt.shop-page .shop-product__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
  text-align: center;
}

body.design-subpage.abt.shop-page .shop-feature-card__row strong,
body.design-subpage.abt.shop-page .shop-product__footer strong {
  display: block;
  margin-top: 4px;
  color: var(--d-ink);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
}

body.design-subpage.abt.shop-page .shop-feature-card__row a,
body.design-subpage.abt.shop-page .shop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  background: transparent;
  color: var(--d-ink) !important;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

body.design-subpage.abt.shop-page .shop-feature-card__row a:hover,
body.design-subpage.abt.shop-page .shop-button:hover {
  transform: translateY(-2px);
  border-color: var(--d-gold);
  background: var(--d-gold-soft);
  color: var(--d-gold) !important;
}

body.design-subpage.abt.shop-page .shop-button--primary {
  border-color: var(--d-ink);
  background: var(--d-ink);
  color: var(--d-surface) !important;
}

body.design-subpage.abt.shop-page .shop-button--primary:hover {
  background: var(--d-ink-soft);
  color: var(--d-surface) !important;
}

body.design-subpage.abt.shop-page .shop-button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

body.design-subpage.abt.shop-page .shop-button:disabled:hover {
  transform: none;
  border-color: var(--d-line);
  background: transparent;
  color: var(--d-ink) !important;
}

body.design-subpage.abt.shop-page .shop-mini-card {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border-radius: 24px;
}

body.design-subpage.abt.shop-page .shop-mini-card img {
  aspect-ratio: 1;
  border-radius: 18px;
}

body.design-subpage.abt.shop-page .shop-mini-card span {
  color: var(--d-gold);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.design-subpage.abt.shop-page .shop-mini-card strong {
  display: block;
  margin-top: 7px;
  color: var(--d-ink);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.06;
}

body.design-subpage.abt.shop-page .shop-mini-card a {
  display: inline-flex;
  margin-top: 12px;
  color: var(--d-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.design-subpage.abt.shop-page .shop-category-bar {
  position: sticky;
  top: 132px;
  z-index: 50;
  padding: 12px 0;
  border-bottom: 1px solid var(--d-line-soft);
  background: rgba(245, 239, 230, .78);
  backdrop-filter: blur(14px);
}

body.design-subpage.abt.shop-page .shop-category-bar .shop-shell {
  display: flex;
  justify-content: center;
  gap: 10px;
  overflow-x: auto;
}

body.design-subpage.abt.shop-page .shop-category-bar a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  background: var(--d-surface);
  color: var(--d-ink-soft);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

body.design-subpage.abt.shop-page .shop-category-bar a:hover {
  border-color: var(--d-gold);
  color: var(--d-gold);
}

body.design-subpage.abt.shop-page .shop-section {
  padding: clamp(58px, 8vw, 104px) 0;
}

body.design-subpage.abt.shop-page .shop-section__head {
  display: grid;
  justify-items: center;
  gap: 28px;
  margin-bottom: 30px;
  text-align: center;
}

body.design-subpage.abt.shop-page .shop-section__head .abt-display,
body.design-subpage.abt.shop-page .shop-final .abt-display {
  font-size: clamp(2rem, 3.4vw, 3.4rem);
}

body.design-subpage.abt.shop-page .shop-section__head p {
  max-width: 620px;
  margin: 0;
  color: var(--d-ink-soft);
  line-height: 1.6;
}

body.design-subpage.abt.shop-page .shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* No oversized hero tile — an even 2×2 keeps the two photo products on the
   top row and the two "service / coming soon" cards on the bottom row, so the
   cards in each row match instead of a photo card being stretched against the
   icon-only ones. The "Хит" badge carries the emphasis instead of size. */
body.design-subpage.abt.shop-page .shop-product--featured {
  grid-column: auto;
}

body.design-subpage.abt.shop-page .shop-product {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: var(--shop-radius);
}

body.design-subpage.abt.shop-page .shop-product__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

body.design-subpage.abt.shop-page .shop-product__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .34));
}

body.design-subpage.abt.shop-page .shop-product__badges {
  position: absolute;
  z-index: 1;
  left: 16px;
  right: 16px;
  top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

body.design-subpage.abt.shop-page .shop-product__badges span {
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 999px;
  background: rgba(29, 26, 21, .72);
  color: #fff8ee;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

body.design-subpage.abt.shop-page .shop-product--service {
  padding-top: 24px;
}

body.design-subpage.abt.shop-page .shop-product__service-head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0 24px;
}

body.design-subpage.abt.shop-page .shop-product__service-head .shop-product__badges {
  position: static;
  justify-content: center;
}

body.design-subpage.abt.shop-page .shop-product__service-head .shop-product__badges span {
  border-color: var(--d-line);
  background: var(--d-gold-soft);
  color: var(--d-gold);
  backdrop-filter: none;
}

body.design-subpage.abt.shop-page .shop-product__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--d-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(171, 127, 78, .2), transparent 54%),
    var(--d-bg-warm);
  color: var(--d-gold);
  font-size: 1.45rem;
}

body.design-subpage.abt.shop-page .shop-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
  text-align: center;
}

body.design-subpage.abt.shop-page .shop-product__topline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

body.design-subpage.abt.shop-page .shop-product__topline strong {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--d-gold-soft);
  color: var(--d-gold);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.design-subpage.abt.shop-page .shop-product h3 {
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
}

body.design-subpage.abt.shop-page .shop-product p {
  margin: 14px 0 0;
  color: var(--d-ink-soft) !important;
  line-height: 1.62;
}

body.design-subpage.abt.shop-page .shop-product ul {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

body.design-subpage.abt.shop-page .shop-product li {
  position: relative;
  padding-left: 20px;
  color: var(--d-ink-soft) !important;
  font-size: .95rem;
}

body.design-subpage.abt.shop-page .shop-product li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--d-gold);
}

body.design-subpage.abt.shop-page .shop-product__footer {
  margin-top: auto;
  padding-top: 26px;
}

body.design-subpage.abt.shop-page .shop-product--soon {
  opacity: .9;
}

body.design-subpage.abt.shop-page .shop-how {
  padding-top: 20px;
}

body.design-subpage.abt.shop-page .shop-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.design-subpage.abt.shop-page .shop-steps article {
  padding: 26px;
  border-radius: 24px;
  text-align: center;
}

body.design-subpage.abt.shop-page .shop-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--d-gold-soft);
  color: var(--d-gold);
  font-weight: 800;
}

body.design-subpage.abt.shop-page .shop-steps h3 {
  font-size: 1.35rem;
}

body.design-subpage.abt.shop-page .shop-steps p {
  margin: 12px 0 0;
  color: var(--d-ink-soft) !important;
  line-height: 1.6;
}

body.design-subpage.abt.shop-page .shop-final {
  padding: 18px 0 88px;
}

body.design-subpage.abt.shop-page .shop-final__box {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 28px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 30px;
  text-align: center;
}

body.design-subpage.abt.shop-page .shop-final__box > div:first-child {
  max-width: 720px;
}

body.design-subpage.abt.shop-page .shop-final__actions {
  flex: 0 0 auto;
  justify-content: center;
  margin-top: 0;
}

html[data-theme="dark"] body.design-subpage.abt.shop-page .shop-stats div,
html[data-theme="dark"] body.design-subpage.abt.shop-page .shop-category-bar a {
  background: rgba(31, 25, 18, .72);
}

html[data-theme="dark"] body.design-subpage.abt.shop-page .shop-category-bar {
  background: rgba(20, 16, 9, .82);
}

html[data-theme="dark"] body.design-subpage.abt.shop-page .shop-button--primary {
  border-color: rgba(220, 189, 147, .72);
  background: linear-gradient(135deg, #eccea6, #c99b66);
  color: #1a140c !important;
}

@media (max-width: 980px) {
  body.design-subpage.abt.shop-page .shop-hero__grid,
  body.design-subpage.abt.shop-page .shop-grid,
  body.design-subpage.abt.shop-page .shop-steps,
  body.design-subpage.abt.shop-page .shop-section__head,
  body.design-subpage.abt.shop-page .shop-final__box {
    grid-template-columns: 1fr;
  }

  body.design-subpage.abt.shop-page .shop-hero__grid,
  body.design-subpage.abt.shop-page .shop-section__head,
  body.design-subpage.abt.shop-page .shop-final__box {
    display: grid;
  }

  body.design-subpage.abt.shop-page .shop-final__actions {
    justify-content: center;
  }
}

@media (max-width: 720px) {
  body.design-subpage.abt.shop-page .shop-shell {
    width: min(100% - 32px, var(--shop-max));
  }

  body.design-subpage.abt.shop-page .abt-display {
    font-size: clamp(2.25rem, 9vw, 3rem);
    line-height: .98;
  }

  body.design-subpage.abt.shop-page .shop-hero {
    padding: 44px 0 42px;
  }

  body.design-subpage.abt.shop-page .shop-hero__grid {
    gap: 28px;
  }

  body.design-subpage.abt.shop-page .shop-hero__actions,
  body.design-subpage.abt.shop-page .shop-final__actions {
    display: grid;
  }

  body.design-subpage.abt.shop-page .shop-stats {
    grid-template-columns: 1fr;
  }

  body.design-subpage.abt.shop-page .shop-feature-card__media {
    height: 230px;
  }

  body.design-subpage.abt.shop-page .shop-feature-card__body h2,
  body.design-subpage.abt.shop-page .shop-product h3 {
    font-size: 1.65rem;
  }

  body.design-subpage.abt.shop-page .shop-feature-card__row,
  body.design-subpage.abt.shop-page .shop-product__footer {
    align-items: stretch;
    flex-direction: column;
  }

  body.design-subpage.abt.shop-page .shop-mini-card {
    grid-template-columns: 96px 1fr;
  }

  body.design-subpage.abt.shop-page .shop-category-bar {
    top: 112px;
  }

  body.design-subpage.abt.shop-page .shop-section {
    padding: 54px 0;
  }

  body.design-subpage.abt.shop-page .shop-product__body {
    padding: 20px;
  }

  body.design-subpage.abt.shop-page .shop-final {
    padding-bottom: 64px;
  }
}

/* Central light/dark theme bridge. */
body.design-subpage.abt {
  background:
    radial-gradient(1100px 640px at 50% -12%, rgba(171, 127, 78, .1), transparent 62%),
    radial-gradient(900px 600px at 100% 6%, rgba(120, 110, 92, .06), transparent 60%),
    var(--d-bg) !important;
}

html[data-theme="dark"] body.design-subpage.abt {
  background:
    radial-gradient(1100px 640px at 50% -12%, rgba(220, 189, 147, .12), transparent 62%),
    radial-gradient(900px 600px at 100% 6%, rgba(120, 110, 92, .1), transparent 60%),
    var(--d-bg) !important;
}

body.design-subpage.abt h1,
body.design-subpage.abt h2,
body.design-subpage.abt h3,
body.design-subpage.abt .design-context__parent strong {
  color: var(--d-ink) !important;
}

body.design-subpage.abt p,
body.design-subpage.abt li,
body.design-subpage.abt .text-gray-700,
body.design-subpage.abt .text-neutral-700,
body.design-subpage.abt .text-slate-700,
body.design-subpage.abt .text-gray-600,
body.design-subpage.abt .text-neutral-600,
body.design-subpage.abt .text-slate-600 {
  color: var(--d-ink-soft) !important;
}

body.design-subpage.abt .text-gray-500,
body.design-subpage.abt .text-neutral-500,
body.design-subpage.abt .text-slate-500 {
  color: var(--d-muted) !important;
}

body.design-subpage.abt > section[class*="bg-gradient"],
body.design-subpage.abt > section[class*="bg-gradient"] .space-y-4.flex-1 {
  background: var(--d-bg-warm) !important;
  border-color: var(--d-line-soft) !important;
  box-shadow: none !important;
}

body.design-subpage.abt .bg-white,
body.design-subpage.abt .bg-white\/70,
body.design-subpage.abt .bg-white\/80,
body.design-subpage.abt .bg-white\/90,
body.design-subpage.abt .bg-neutral-50,
body.design-subpage.abt .bg-gray-50,
body.design-subpage.abt .bg-slate-50,
body.design-subpage.abt .bg-stone-50,
body.design-subpage.abt .card,
body.design-subpage.abt details,
body.design-subpage.abt article,
body.design-subpage.abt .design-context,
body.design-subpage.abt nav[aria-label="Оглавление"],
body.design-subpage.abt .section-index,
body.design-subpage.abt .design-style-scroll__copy,
body.design-subpage.abt .sketchup-teacher-card {
  color: var(--d-ink) !important;
  background: var(--d-surface) !important;
  border-color: var(--d-line-soft) !important;
  box-shadow: var(--d-shadow) !important;
}

body.design-subpage.abt .design-context__parent {
  border-right-color: var(--d-line);
  color: var(--d-ink);
}

body.design-subpage.abt .design-context__parent span {
  color: var(--d-muted);
}

body.design-subpage.abt .design-context__links a {
  color: var(--d-ink-soft);
}

body.design-subpage.abt .design-context__links a:hover,
body.design-subpage.abt .design-context__links a[aria-current="page"],
body.design-subpage.abt .design-context__links a[aria-current="true"],
body.design-subpage.abt .design-context__links a.is-active,
body.design-subpage.abt nav[aria-label="Оглавление"] a:hover,
body.design-subpage.abt nav[aria-label="Оглавление"] a[aria-current="true"],
body.design-subpage.abt .section-index a:hover,
body.design-subpage.abt .section-index a[aria-current="true"] {
  color: var(--d-gold);
  border-color: var(--d-line) !important;
  background: var(--d-gold-soft) !important;
}

body.design-subpage.abt .bg-emerald-50,
body.design-subpage.abt .bg-amber-50,
body.design-subpage.abt .bg-sky-50,
body.design-subpage.abt .bg-teal-50,
body.design-subpage.abt .bg-neutral-100,
body.design-subpage.abt .bg-gray-100,
body.design-subpage.abt .bg-slate-100 {
  background: var(--d-bg-warm) !important;
}

body.design-subpage.abt .chip,
body.design-subpage.abt .ph-badge,
body.design-subpage.abt [class*="rounded-full"] {
  color: var(--d-gold) !important;
  border-color: var(--d-line) !important;
  background: var(--d-gold-soft) !important;
  box-shadow: none !important;
}

body.design-subpage.abt .btn-buy,
body.design-subpage.abt .btn-buy--featured,
body.design-subpage.abt .btn-primary,
body.design-subpage.abt .design-btn--primary {
  color: var(--d-surface) !important;
  border-color: var(--d-ink) !important;
  background: var(--d-ink) !important;
  box-shadow: var(--d-shadow) !important;
}

body.design-subpage.abt .btn-buy:hover,
body.design-subpage.abt .btn-buy--featured:hover,
body.design-subpage.abt .btn-primary:hover,
body.design-subpage.abt .design-btn--primary:hover {
  color: var(--d-surface) !important;
  background: var(--d-ink-soft) !important;
}

body.design-subpage.abt .design-btn--light,
body.design-subpage.abt .design-btn--ghost,
body.design-subpage.abt a[class*="border"],
body.design-subpage.abt button[class*="border"] {
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
  background: transparent !important;
}

body.design-subpage.abt .design-scroll-shot {
  border-color: var(--d-line) !important;
  box-shadow: var(--d-shadow) !important;
}

body.design-subpage.abt .design-style-scroll {
  border-color: var(--d-line-soft) !important;
}

html[data-theme="dark"] body.design-subpage.abt .btn-buy,
html[data-theme="dark"] body.design-subpage.abt .btn-buy--featured,
html[data-theme="dark"] body.design-subpage.abt .btn-primary,
html[data-theme="dark"] body.design-subpage.abt .design-btn--primary,
html[data-theme="dark"] body.design-subpage.abt .btn-buy:hover,
html[data-theme="dark"] body.design-subpage.abt .btn-buy--featured:hover,
html[data-theme="dark"] body.design-subpage.abt .btn-primary:hover,
html[data-theme="dark"] body.design-subpage.abt .design-btn--primary:hover {
  color: #1a140c !important;
  border-color: rgba(220, 189, 147, .72) !important;
  background: linear-gradient(135deg, #eccea6, #c99b66) !important;
}

body.design-subpage.abt .border-white {
  border-color: var(--d-line) !important;
}

/* Keep the Tailwind page structure intact while markup is being migrated. */
body.design-subpage.abt main > .grid {
  display: grid !important;
}

body.design-subpage.abt main section > h2,
body.design-subpage.abt main section > p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: inherit;
}

body.design-subpage.abt main section > .text-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ============================================================
   Modern course subpage layer.
   Course HTML still uses Tailwind utility classes. This layer makes
   those utilities visually behave like the new ABT design system.
   ============================================================ */

body.design-subpage.abt {
  --course-max: 1200px;
  --course-radius: 24px;
  --course-radius-lg: 32px;
  --course-hero-ink: #fff8ee;
  --course-hero-muted: rgba(255, 248, 238, .72);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

html:has(body.design-subpage.abt) {
  overflow-x: hidden;
}

body.design-subpage.abt .design-context {
  position: sticky;
  top: 82px;
  z-index: 72;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 10px auto -18px;
  padding: 5px;
  border: 1px solid var(--d-line-soft) !important;
  border-radius: 999px;
  background: rgba(255, 253, 249, .78) !important;
  box-shadow: 0 16px 40px -30px rgba(40, 30, 18, .42) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.design-subpage.abt .design-context__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

body.design-subpage.abt .design-context__parent {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--d-ink);
  text-decoration: none;
}

body.design-subpage.abt .design-context__parent span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.design-subpage.abt .design-context__parent strong {
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 800;
  color: var(--d-surface) !important;
}

body.design-subpage.abt .design-context__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

body.design-subpage.abt .design-context__links::-webkit-scrollbar {
  display: none;
}

body.design-subpage.abt .design-context__links a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  font-size: .74rem;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

body.design-subpage.abt .design-context__links a:hover,
body.design-subpage.abt .design-context__links a[aria-current="page"],
body.design-subpage.abt .design-context__links a[aria-current="true"],
body.design-subpage.abt .design-context__links a.is-active {
  color: var(--d-ink) !important;
  border-color: transparent !important;
  background: var(--d-gold-soft) !important;
  box-shadow: none;
}

body.design-subpage.abt #hero {
  isolation: isolate;
  min-height: clamp(600px, 78vh, 760px);
  margin: 0;
  border: 0 !important;
  background:
    radial-gradient(900px 620px at 82% 18%, rgba(171, 127, 78, .26), transparent 62%),
    linear-gradient(135deg, #15110c 0%, #272016 58%, #0b0907 100%) !important;
}

body.design-subpage.abt #hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(16, 13, 9, .9) 0%, rgba(16, 13, 9, .74) 42%, rgba(16, 13, 9, .28) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .46));
  pointer-events: none;
}

body.design-subpage.abt #hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 38%;
  background: linear-gradient(180deg, transparent, var(--d-bg));
  pointer-events: none;
}

body.design-subpage.abt #hero .hero-deco {
  display: none;
}

body.design-subpage.abt #hero > .mx-auto {
  position: relative;
  z-index: 2;
  width: min(var(--course-max), calc(100% - 48px));
  max-width: none !important;
  min-height: clamp(560px, 72vh, 700px);
  padding: clamp(58px, 8vw, 108px) 0 clamp(74px, 8vw, 118px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1fr);
  gap: clamp(34px, 5vw, 72px);
}

body.design-subpage.abt #hero .order-1 {
  max-width: 680px !important;
  padding: 0 !important;
  text-align: left !important;
}

body.design-subpage.abt #hero .order-2 {
  align-self: center;
  margin: 0 !important;
  padding: 0 !important;
}

body.design-subpage.abt #hero .order-2 > div,
body.design-subpage.abt #hero .order-2 .flex-1 {
  height: 100%;
}

body.design-subpage.abt #hero h1 {
  max-width: 700px;
  color: var(--course-hero-ink) !important;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.6rem) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: .004em !important;
  text-align: left;
  overflow-wrap: normal;
}

body.design-subpage.abt #hero p {
  color: var(--course-hero-muted) !important;
}

body.design-subpage.abt #hero .ph-badge {
  color: #e6c79d !important;
  border-color: rgba(230, 199, 157, .24) !important;
  background: rgba(255, 248, 238, .08) !important;
}

body.design-subpage.abt #hero .btn-buy {
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  color: #1a140c !important;
  border-color: rgba(236, 206, 166, .72) !important;
  background: linear-gradient(135deg, #eccea6, #c99b66) !important;
  box-shadow: 0 22px 46px -20px rgba(236, 206, 166, .7) !important;
}

body.design-subpage.abt #hero a[href="#program"],
body.design-subpage.abt #hero a[href="#outcomes"] {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px !important;
  color: var(--course-hero-ink) !important;
  border-color: rgba(255, 248, 238, .24) !important;
  background: rgba(255, 248, 238, .07) !important;
}

body.design-subpage.abt #hero .trust-row {
  margin-top: 24px;
  gap: 10px 18px;
  color: rgba(255, 248, 238, .72);
  flex-wrap: wrap;
}

body.design-subpage.abt #hero .video-shell {
  padding: 0;
  overflow: hidden;
  border-radius: var(--course-radius-lg);
  background: transparent;
  box-shadow: 0 32px 74px -36px rgba(0, 0, 0, .84);
  animation: courseMediaFloat 8s ease-in-out infinite;
}

body.design-subpage.abt #hero .video-inner {
  min-height: clamp(360px, 46vh, 500px);
  border: 1px solid rgba(255, 248, 238, .2);
  border-radius: var(--course-radius-lg);
}

body.design-subpage.abt #hero .video-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(10, 7, 5, .22)),
    radial-gradient(420px 240px at 80% 10%, rgba(236, 206, 166, .18), transparent 62%);
  pointer-events: none;
}

body.design-subpage.abt #hero .video-inner img,
body.design-subpage.abt #hero .video-inner video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

body.design-subpage.abt #heroVideoPlay .play-pill {
  min-height: 48px;
  padding: 0 18px;
  border-color: rgba(255, 248, 238, .28);
  background: rgba(12, 9, 6, .62);
  backdrop-filter: blur(12px);
}

body.design-subpage.abt .section-index {
  position: relative;
  z-index: 3;
  width: min(760px, calc(100% - 48px));
  margin: clamp(-46px, -4vw, -28px) auto 0 !important;
  padding: 0 !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.design-subpage.abt .section-index a {
  min-height: 38px;
  padding: 0 16px !important;
  color: var(--d-ink-soft) !important;
  border: 1px solid var(--d-line-soft) !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 249, .82) !important;
  box-shadow: none !important;
}

body.design-subpage.abt nav.section-index a,
body.design-subpage.abt nav.section-index a span {
  color: var(--d-ink-soft) !important;
}

body.design-subpage.abt .section-index a > span:first-child {
  display: none !important;
}

body.design-subpage.abt .section-index a:hover,
body.design-subpage.abt .section-index a[aria-current="true"],
body.design-subpage.abt .section-index a.text-white,
body.design-subpage.abt .section-index a.bg-neutral-900,
body.design-subpage.abt .section-index a.border-neutral-900 {
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
  background: var(--d-surface) !important;
}

body.design-subpage.abt .section-index a:hover span,
body.design-subpage.abt .section-index a[aria-current="true"] span,
body.design-subpage.abt .section-index a.text-white span,
body.design-subpage.abt .section-index a.bg-neutral-900 span,
body.design-subpage.abt .section-index a.border-neutral-900 span {
  color: inherit !important;
}

@keyframes courseMediaFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -10px, 0);
  }
}

body.design-subpage.abt [data-parallax-scene] {
  position: relative;
}

body.design-subpage.abt [data-parallax-speed] {
  transform:
    translate3d(0, var(--parallax-y, 0), 0)
    rotate(var(--parallax-rotate, 0deg));
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

body.design-subpage.abt .course-parallax-orbit {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(236, 206, 166, .24);
  border-radius: 999px;
  opacity: .72;
  mix-blend-mode: screen;
}

body.design-subpage.abt .course-parallax-orbit::before,
body.design-subpage.abt .course-parallax-orbit::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

body.design-subpage.abt .course-parallax-orbit::before {
  inset: 16%;
  border: 1px solid rgba(255, 248, 238, .14);
}

body.design-subpage.abt .course-parallax-orbit::after {
  width: 10px;
  height: 10px;
  top: 18%;
  right: 12%;
  background: #eccea6;
  box-shadow: 0 0 26px rgba(236, 206, 166, .76);
}

body.design-subpage.abt .course-parallax-orbit--a {
  width: clamp(220px, 24vw, 390px);
  height: clamp(220px, 24vw, 390px);
  left: -90px;
  top: 25%;
}

body.design-subpage.abt .course-parallax-orbit--b {
  width: clamp(180px, 20vw, 320px);
  height: clamp(180px, 20vw, 320px);
  right: 7%;
  top: 16%;
  transform-origin: 60% 40%;
}

body.design-subpage.abt .course-parallax-bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .84;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

body.design-subpage.abt .course-parallax-bg--hero-photo,
body.design-subpage.abt .course-parallax-bg--outcomes-photo,
body.design-subpage.abt .course-parallax-bg--cases-photo,
body.design-subpage.abt .course-parallax-bg--pricing-photo {
  overflow: hidden;
  border: 1px solid rgba(255, 248, 238, .14);
  background-size: cover;
  background-position: center;
  box-shadow: 0 42px 110px -58px rgba(0, 0, 0, .72);
}

body.design-subpage.abt .course-parallax-bg--hero-photo::after,
body.design-subpage.abt .course-parallax-bg--outcomes-photo::after,
body.design-subpage.abt .course-parallax-bg--cases-photo::after,
body.design-subpage.abt .course-parallax-bg--pricing-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(19, 14, 9, .42), transparent 54%),
    linear-gradient(180deg, transparent, rgba(19, 14, 9, .28));
}

body.design-subpage.abt .course-parallax-bg--hero-photo {
  width: clamp(300px, 32vw, 560px);
  height: clamp(420px, 48vw, 760px);
  left: 44%;
  top: -120px;
  border-radius: 42px;
  opacity: .28;
  background-image: url("/assets/img/work_2.png");
  filter: saturate(.88) contrast(1.08);
}

body.design-subpage.abt .course-parallax-bg--hero-wash {
  width: clamp(520px, 58vw, 980px);
  height: clamp(260px, 34vw, 560px);
  right: -18%;
  top: 2%;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 35% 45%, rgba(236, 206, 166, .32), transparent 58%),
    radial-gradient(ellipse at 76% 52%, rgba(255, 248, 238, .18), transparent 62%);
  filter: blur(12px);
  mix-blend-mode: screen;
}

body.design-subpage.abt .course-parallax-bg--hero-grid {
  width: clamp(420px, 46vw, 760px);
  height: clamp(270px, 30vw, 480px);
  right: 2%;
  bottom: 6%;
  border: 1px solid rgba(255, 248, 238, .16);
  border-radius: 34px;
  background:
    linear-gradient(rgba(255, 248, 238, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 238, .14) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 72%, transparent);
}

body.design-subpage.abt .course-float-note {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 248, 238, .2);
  border-radius: 999px;
  color: rgba(255, 248, 238, .78);
  background: rgba(255, 248, 238, .08);
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

body.design-subpage.abt .course-float-note--plan {
  left: min(52vw, 720px);
  top: 20%;
}

body.design-subpage.abt .course-float-note--light {
  right: 5%;
  top: 72%;
}

body.design-subpage.abt .course-float-note--budget {
  left: 6%;
  bottom: 13%;
}

body.design-subpage.abt #hero > .mx-auto,
body.design-subpage.abt .section-index,
body.design-subpage.abt main .space-y-16 > section > :not(.course-parallax-bg),
body.design-subpage.abt main section h2,
body.design-subpage.abt main section p,
body.design-subpage.abt main section details,
body.design-subpage.abt main section .grid,
body.design-subpage.abt main section ol,
body.design-subpage.abt main section ul {
  position: relative;
  z-index: 8;
}

body.design-subpage.abt #outcomes,
body.design-subpage.abt #pricing,
body.design-subpage.abt #cases,
body.design-subpage.abt #program,
body.design-subpage.abt #faq {
  isolation: isolate;
}

body.design-subpage.abt #outcomes::before,
body.design-subpage.abt #pricing::before,
body.design-subpage.abt #cases::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .68;
}

body.design-subpage.abt #outcomes::before {
  width: 280px;
  height: 280px;
  right: -120px;
  top: 40px;
  background: radial-gradient(circle, rgba(171, 127, 78, .16), transparent 66%);
  transform: translate3d(0, calc(var(--parallax-progress, .5) * -54px), 0);
}

body.design-subpage.abt #cases::before {
  width: 420px;
  height: 180px;
  left: -170px;
  top: 38%;
  background: radial-gradient(ellipse, rgba(120, 110, 92, .16), transparent 64%);
  transform: translate3d(calc(var(--parallax-progress, .5) * 46px), 0, 0) rotate(-8deg);
}

body.design-subpage.abt #pricing::before {
  width: 340px;
  height: 340px;
  right: -150px;
  bottom: 6%;
  background: radial-gradient(circle, rgba(171, 127, 78, .2), transparent 64%);
  transform: translate3d(0, calc(var(--parallax-progress, .5) * 70px), 0);
}

body.design-subpage.abt .course-parallax-bg--outcomes-sheet,
body.design-subpage.abt .course-parallax-bg--outcomes-plan,
body.design-subpage.abt .course-parallax-bg--pricing-arch,
body.design-subpage.abt .course-parallax-bg--pricing-mesh {
  border: 1px solid var(--d-line-soft);
  background: rgba(255, 253, 249, .68);
  box-shadow: 0 36px 92px -52px rgba(40, 30, 18, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.design-subpage.abt .course-parallax-bg--outcomes-photo {
  width: clamp(280px, 32vw, 520px);
  height: clamp(190px, 24vw, 360px);
  right: -14%;
  bottom: -8%;
  border-radius: 34px;
  opacity: .34;
  background-image: url("/assets/img/work_3.png");
}

body.design-subpage.abt .course-parallax-bg--outcomes-sheet {
  width: clamp(320px, 38vw, 620px);
  height: clamp(220px, 28vw, 420px);
  right: -12%;
  top: -38px;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(171, 127, 78, .18), transparent 46%),
    rgba(255, 253, 249, .72);
}

body.design-subpage.abt .course-parallax-bg--outcomes-sheet::before,
body.design-subpage.abt .course-parallax-bg--outcomes-plan::before,
body.design-subpage.abt .course-parallax-bg--pricing-mesh::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: inherit;
  background:
    linear-gradient(rgba(29, 26, 21, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 26, 21, .06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 78%);
}

body.design-subpage.abt .course-parallax-bg--outcomes-plan {
  width: clamp(300px, 34vw, 560px);
  height: clamp(180px, 22vw, 340px);
  left: -16%;
  bottom: 0;
  border-radius: 999px;
  opacity: .72;
}

body.design-subpage.abt .course-parallax-bg--cases-ribbon {
  width: min(1680px, 132vw);
  height: 260px;
  left: 50%;
  top: 43%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(171, 127, 78, .26) 18%, rgba(255, 253, 249, .78) 48%, rgba(171, 127, 78, .18) 78%, transparent);
  filter: blur(.2px);
}

body.design-subpage.abt .course-parallax-bg--cases-photo {
  width: clamp(340px, 38vw, 640px);
  height: clamp(260px, 32vw, 480px);
  left: -12%;
  top: 16%;
  border-radius: 38px;
  opacity: .28;
  background-image: url("/assets/img/work_4.png");
}

body.design-subpage.abt .course-parallax-bg--cases-rail {
  width: min(1120px, 92vw);
  height: 3px;
  left: 50%;
  top: 35%;
  background: linear-gradient(90deg, transparent, rgba(171, 127, 78, .72), transparent);
}

body.design-subpage.abt .course-parallax-bg--cases-rail::before,
body.design-subpage.abt .course-parallax-bg--cases-rail::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--d-gold);
  box-shadow: 0 0 28px rgba(171, 127, 78, .45);
}

body.design-subpage.abt .course-parallax-bg--cases-rail::before {
  left: 18%;
}

body.design-subpage.abt .course-parallax-bg--cases-rail::after {
  right: 24%;
}

body.design-subpage.abt .course-parallax-bg--pricing-arch {
  width: clamp(420px, 48vw, 760px);
  height: clamp(420px, 48vw, 760px);
  right: -20%;
  top: -18%;
  border-radius: 50% 50% 18% 18%;
  opacity: .72;
}

body.design-subpage.abt .course-parallax-bg--pricing-arch::before {
  content: "";
  position: absolute;
  inset: 40px;
  border: 1px solid var(--d-line);
  border-radius: inherit;
}

body.design-subpage.abt .course-parallax-bg--pricing-mesh {
  width: clamp(340px, 38vw, 620px);
  height: clamp(220px, 26vw, 420px);
  left: -16%;
  bottom: -2%;
  border-radius: 28px;
  opacity: .72;
}

body.design-subpage.abt .course-parallax-bg--pricing-photo {
  width: clamp(280px, 34vw, 540px);
  height: clamp(220px, 28vw, 420px);
  right: 4%;
  bottom: -12%;
  border-radius: 38px;
  opacity: .3;
  background-image: url("/assets/img/work_5.png");
}

body.design-subpage.abt .course-float-note--result,
body.design-subpage.abt .course-float-note--price {
  color: var(--d-gold);
  border-color: var(--d-line);
  background: rgba(255, 253, 249, .74);
  box-shadow: var(--d-shadow);
}

body.design-subpage.abt .course-float-note--result {
  right: 4%;
  top: 68px;
}

body.design-subpage.abt .course-float-note--price {
  right: 7%;
  top: 74px;
}

body.design-subpage.abt:not(.shop-page):not(.portfolio-page) main {
  width: min(var(--course-max), calc(100% - 48px));
  max-width: none !important;
  padding: 0 !important;
}

/* Shop & portfolio manage their own width via inner shells — keep <main> full-width and centered */
body.design-subpage.abt.shop-page main,
body.design-subpage.abt.portfolio-page main {
  width: 100%;
  max-width: none !important;
  margin: 0 auto;
  padding: 0 !important;
}

body.design-subpage.abt main > .grid {
  padding: clamp(72px, 9vw, 132px) 0 clamp(96px, 10vw, 148px) !important;
  gap: 0 !important;
}

body.design-subpage.abt main .space-y-16 > section {
  margin: 0 !important;
  padding: clamp(62px, 8vw, 112px) 0;
  border-top: 1px solid var(--d-line-soft);
}

body.design-subpage.abt main .space-y-16 {
  display: flex;
  flex-direction: column;
}

body.design-subpage.abt #outcomes {
  order: 1;
  border-top: 0 !important;
  padding-top: 0 !important;
}

body.design-subpage.abt #cases {
  order: 2;
}

body.design-subpage.abt #pricing {
  order: 3;
}

body.design-subpage.abt #program {
  order: 4;
}

body.design-subpage.abt #faq {
  order: 5;
}

body.design-subpage.abt main .space-y-16 > section:not([id]) {
  order: 6;
}

body.design-subpage.abt main .space-y-16 > section:first-child {
  padding-top: clamp(62px, 8vw, 112px);
}

body.design-subpage.abt main section > h2 {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.7rem) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: .003em !important;
}

body.design-subpage.abt main section > p {
  max-width: 620px;
  margin-top: 18px !important;
  font-size: 1.06rem;
  line-height: 1.65;
}

body.design-subpage.abt main section .bg-white,
body.design-subpage.abt main section .rounded-xl,
body.design-subpage.abt main section .rounded-2xl,
body.design-subpage.abt main section .border,
body.design-subpage.abt #program > .mt-6,
body.design-subpage.abt #faq > .mt-6 {
  border-color: var(--d-line-soft) !important;
  border-radius: var(--course-radius) !important;
}

body.design-subpage.abt main section .bg-white,
body.design-subpage.abt #program > .mt-6,
body.design-subpage.abt #faq > .mt-6 {
  background: var(--d-surface) !important;
  box-shadow: var(--d-shadow) !important;
}

body.design-subpage.abt #program > .mt-6,
body.design-subpage.abt #faq > .mt-6 {
  overflow: hidden;
}

body.design-subpage.abt #program details,
body.design-subpage.abt #faq details {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.design-subpage.abt #program summary,
body.design-subpage.abt #faq summary {
  min-height: 62px;
  padding: 17px 24px !important;
  color: var(--d-ink) !important;
}

body.design-subpage.abt #program summary + div,
body.design-subpage.abt #faq summary + div {
  padding: 0 24px 22px !important;
}

body.design-subpage.abt #outcomes .grid > div,
body.design-subpage.abt #proof .grid > div {
  padding: 28px !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.design-subpage.abt #outcomes .grid > div:hover,
body.design-subpage.abt #proof .grid > div:hover,
body.design-subpage.abt #pricing > .mt-6.grid > div:hover {
  transform: translateY(-4px);
  border-color: var(--d-line) !important;
}

body.design-subpage.abt .stories {
  display: flex;
  gap: clamp(16px, 2.4vw, 28px);
  overflow-x: auto;
  padding: 34px max(24px, calc((100vw - var(--course-max)) / 2)) 46px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body.design-subpage.abt .stories::-webkit-scrollbar {
  display: none;
}

body.design-subpage.abt .story-item {
  flex: 0 0 auto;
  display: grid;
  gap: 12px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--d-ink);
  cursor: pointer;
  scroll-snap-align: center;
}

body.design-subpage.abt .story-bubble {
  width: clamp(138px, 17vw, 230px);
  aspect-ratio: 3 / 4;
  height: auto;
  border: 1px solid var(--d-line-soft);
  border-radius: 30px;
  object-fit: cover;
  box-shadow: var(--d-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

body.design-subpage.abt .story-item:hover .story-bubble {
  transform: translateY(-5px);
  box-shadow: 0 34px 76px -36px rgba(40, 30, 18, .58);
}

body.design-subpage.abt .story-label {
  color: var(--d-muted) !important;
  font-size: .86rem;
  font-weight: 700;
}

body.design-subpage.abt #pricing > .mt-6.grid {
  align-items: stretch;
  gap: 18px !important;
}

body.design-subpage.abt #pricing > .mt-6.grid > div {
  padding: 32px !important;
  border-width: 1px !important;
  background: var(--d-surface) !important;
  box-shadow: var(--d-shadow) !important;
}

body.design-subpage.abt #pricing > .mt-6.grid > div:nth-child(2) {
  position: relative;
  border-color: rgba(171, 127, 78, .36) !important;
  background:
    linear-gradient(180deg, rgba(171, 127, 78, .12), transparent 44%),
    var(--d-surface) !important;
}

body.design-subpage.abt #pricing h3 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
  font-weight: 600 !important;
}

body.design-subpage.abt #pricing .text-3xl {
  color: var(--d-ink) !important;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem) !important;
  font-weight: 600 !important;
}

body.design-subpage.abt #pricing ul {
  line-height: 1.7;
}

body.design-subpage.abt #program {
  opacity: .92;
}

body.design-subpage.abt #program > h2 {
  font-size: clamp(2.35rem, 4vw, 3.7rem) !important;
}

body.design-subpage.abt #program > p {
  max-width: 520px;
}

body.design-subpage.abt section:last-child > div {
  padding: clamp(34px, 6vw, 64px) !important;
  border-radius: var(--course-radius-lg) !important;
  background:
    linear-gradient(135deg, rgba(171, 127, 78, .16), transparent 48%),
    var(--d-surface) !important;
}

body.design-subpage.abt > .fixed.inset-x-0.bottom-0 > div > div {
  border-color: var(--d-line-soft) !important;
  border-radius: 22px !important;
  background: rgba(255, 253, 249, .92) !important;
  box-shadow: 0 24px 60px -30px rgba(40, 30, 18, .55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.design-subpage.abt > .fixed.inset-x-0.bottom-0 a {
  border-radius: 999px !important;
  background: var(--d-ink) !important;
  color: var(--d-surface) !important;
}

/* SketchUp sales page: scoped replacement for the old Tailwind look. */
body.design-subpage.abt.sketchup-page {
  --sketch-hero-ink: #fff8ee;
  --sketch-hero-muted: rgba(255, 248, 238, .72);
}

body.design-subpage.abt.sketchup-page #sketchup-hero {
  isolation: isolate;
  min-height: clamp(560px, 72vh, 700px);
  padding: 0 !important;
  border: 0 !important;
  color: var(--sketch-hero-ink);
  background:
    radial-gradient(720px 520px at 76% 20%, rgba(236, 206, 166, .18), transparent 64%),
    linear-gradient(135deg, #130f0a 0%, #241d13 54%, #0c0a07 100%) !important;
}

body.design-subpage.abt.sketchup-page #sketchup-hero video {
  z-index: 0;
  opacity: .24;
  filter: saturate(.78) contrast(1.1);
  transform: scale(1.08);
}

body.design-subpage.abt.sketchup-page #sketchup-hero > .absolute.inset-0 {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(13, 10, 7, .9) 0%, rgba(13, 10, 7, .66) 42%, rgba(13, 10, 7, .16) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .34)) !important;
}

body.design-subpage.abt.sketchup-page #sketchup-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 26%;
  background: linear-gradient(180deg, transparent, var(--d-bg));
  pointer-events: none;
}

body.design-subpage.abt.sketchup-page #sketchup-hero > .relative {
  z-index: 8;
  width: min(var(--course-max), calc(100% - 48px));
  min-height: clamp(540px, 70vh, 680px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  text-align: left;
}

body.design-subpage.abt.sketchup-page #sketchup-hero .max-w-4xl {
  max-width: 650px !important;
  margin: 0 !important;
}

body.design-subpage.abt.sketchup-page #sketchup-hero .space-y-4 {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.design-subpage.abt.sketchup-page #sketchup-hero h1 {
  max-width: 650px;
  color: var(--sketch-hero-ink) !important;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.6rem) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: .004em !important;
  text-align: left;
}

body.design-subpage.abt.sketchup-page #sketchup-hero p {
  max-width: 610px;
  color: var(--sketch-hero-muted) !important;
}

body.design-subpage.abt.sketchup-page #sketchup-hero p:first-child {
  color: #e6c79d !important;
}

body.design-subpage.abt.sketchup-page #sketchup-hero a[href="#outcome"] {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px !important;
  color: var(--sketch-hero-ink) !important;
  border-color: rgba(255, 248, 238, .24) !important;
  background: rgba(255, 248, 238, .07) !important;
}

body.design-subpage.abt.sketchup-page #sketchup-hero .rounded-full {
  color: #e6c79d !important;
  border-color: rgba(230, 199, 157, .24) !important;
  background: rgba(255, 248, 238, .08) !important;
}

body.design-subpage.abt.sketchup-page .sketchup-hero-visual {
  position: relative;
  z-index: 8;
  align-self: center;
  overflow: hidden;
  min-height: 0;
  height: clamp(340px, 36vw, 500px);
  border: 1px solid rgba(255, 248, 238, .18);
  border-radius: 32px;
  background: rgba(255, 248, 238, .06);
  box-shadow: 0 36px 86px -42px rgba(0, 0, 0, .82);
  transform: none !important;
}

body.design-subpage.abt.sketchup-page .sketchup-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(1.04);
}

body.design-subpage.abt.sketchup-page .sketchup-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(12, 9, 6, .68)),
    radial-gradient(440px 260px at 70% 14%, rgba(236, 206, 166, .16), transparent 68%);
  pointer-events: none;
}

body.design-subpage.abt.sketchup-page .sketchup-hero-visual__caption {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid rgba(255, 248, 238, .18);
  border-radius: 20px;
  background: rgba(12, 9, 6, .66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.design-subpage.abt.sketchup-page .sketchup-hero-visual__caption span {
  color: #e6c79d;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.design-subpage.abt.sketchup-page .sketchup-hero-visual__caption strong {
  color: var(--sketch-hero-ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
}

body.design-subpage.abt.sketchup-page .sketchup-hero-visual__steps {
  position: absolute;
  z-index: 2;
  left: 22px;
  top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.design-subpage.abt.sketchup-page .sketchup-hero-visual__steps span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 248, 238, .22);
  border-radius: 999px;
  color: rgba(255, 248, 238, .86);
  background: rgba(12, 9, 6, .45);
  font-size: .74rem;
  font-weight: 800;
}

body.design-subpage.abt.sketchup-page nav[aria-label="Оглавление"] {
  position: relative !important;
  top: auto !important;
  z-index: 20;
  margin: clamp(-28px, -3vw, -18px) auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.design-subpage.abt.sketchup-page nav[aria-label="Оглавление"] a {
  min-height: 38px;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 249, .86) !important;
}

body.design-subpage.abt.sketchup-page #outcome {
  order: initial;
  border-top: 0 !important;
  padding-top: 0 !important;
  isolation: isolate;
}

body.design-subpage.abt.sketchup-page main > .grid {
  padding-top: clamp(38px, 5vw, 64px) !important;
}

body.design-subpage.abt.sketchup-page #outcome {
  padding: clamp(38px, 5vw, 72px) 0 !important;
}

body.design-subpage.abt.sketchup-page #outcome .sketchup-parallax-bg--outcome-photo {
  display: none !important;
}

body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid {
  gap: 16px !important;
}

body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid > div {
  min-height: 0;
  padding: 24px !important;
  border-color: rgba(171, 127, 78, .18) !important;
  background:
    linear-gradient(135deg, rgba(171, 127, 78, .12), transparent 52%),
    var(--d-surface) !important;
}

body.design-subpage.abt.sketchup-page #pricing {
  order: initial;
  isolation: isolate;
}

body.design-subpage.abt.sketchup-page #program {
  order: initial;
}

body.design-subpage.abt.sketchup-page #teacher {
  order: initial;
}

body.design-subpage.abt.sketchup-page #forwhom {
  order: initial;
}

body.design-subpage.abt.sketchup-page #reqs {
  order: initial;
}

body.design-subpage.abt.sketchup-page #reviews {
  order: initial;
}

body.design-subpage.abt.sketchup-page #faq {
  order: initial;
}

body.design-subpage.abt.sketchup-page main .space-y-16 > section:not([id]) {
  order: initial;
}

body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid > div:first-child {
  position: relative;
  border-color: rgba(171, 127, 78, .42) !important;
  background:
    linear-gradient(180deg, rgba(171, 127, 78, .14), transparent 44%),
    var(--d-surface) !important;
}

body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid > div:nth-child(2) {
  border-color: var(--d-line-soft) !important;
  background: var(--d-surface) !important;
}

body.design-subpage.abt.sketchup-page #program {
  opacity: 1;
}

body.design-subpage.abt.sketchup-page main .space-y-16 > section {
  padding: clamp(46px, 6vw, 78px) 0;
}

body.design-subpage.abt.sketchup-page #teacher,
body.design-subpage.abt.sketchup-page #forwhom,
body.design-subpage.abt.sketchup-page #reqs,
body.design-subpage.abt.sketchup-page #reviews {
  opacity: .94;
}

body.design-subpage.abt.sketchup-page #teacher,
body.design-subpage.abt.sketchup-page #forwhom,
body.design-subpage.abt.sketchup-page #reqs {
  isolation: isolate;
}

body.design-subpage.abt.sketchup-page #teacher::before,
body.design-subpage.abt.sketchup-page #forwhom::before,
body.design-subpage.abt.sketchup-page #reqs::before {
  content: "";
  display: none !important;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--d-line-soft);
  border-radius: 999px;
  opacity: .32;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(171, 127, 78, .1), transparent 64%),
    rgba(255, 253, 249, .28);
}

body.design-subpage.abt.sketchup-page #teacher::before {
  right: -12%;
  top: 8%;
  width: min(720px, 62vw);
  height: 160px;
  transform: translate3d(0, calc(var(--parallax-progress, .5) * -42px), 0) rotate(-5deg);
}

body.design-subpage.abt.sketchup-page #forwhom::before {
  left: -14%;
  top: 18%;
  width: min(760px, 66vw);
  height: 150px;
  transform: translate3d(calc(var(--parallax-progress, .5) * 44px), 0, 0) rotate(5deg);
}

body.design-subpage.abt.sketchup-page #reqs::before {
  right: -16%;
  bottom: 8%;
  width: min(680px, 60vw);
  height: 150px;
  transform: translate3d(0, calc(var(--parallax-progress, .5) * 38px), 0) rotate(-4deg);
}

body.design-subpage.abt.sketchup-page .sketchup-teacher-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

body.design-subpage.abt.sketchup-page .sketchup-teacher-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--hero-photo {
  z-index: 1;
  right: -6%;
  top: 16%;
  width: clamp(360px, 36vw, 580px);
  height: clamp(360px, 36vw, 580px);
  border: 1px solid rgba(255, 248, 238, .14);
  border-radius: 999px;
  opacity: .18;
  background:
    linear-gradient(135deg, rgba(19, 14, 9, .12), rgba(19, 14, 9, .46)),
    url("/assets/img/work_3.png") center / cover;
  box-shadow: 0 42px 110px -58px rgba(0, 0, 0, .72);
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--hero-grid,
body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--outcome-board,
body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--program-line {
  border: 1px solid rgba(255, 248, 238, .14);
  background:
    linear-gradient(rgba(255, 248, 238, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 238, .14) 1px, transparent 1px);
  background-size: 34px 34px;
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--hero-grid {
  z-index: 1;
  right: -10%;
  bottom: 4%;
  width: clamp(320px, 38vw, 620px);
  height: clamp(220px, 24vw, 380px);
  border-radius: 34px;
  opacity: .38;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 72%, transparent);
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--hero-plane {
  z-index: 1;
  right: 28%;
  top: 18%;
  width: clamp(160px, 17vw, 260px);
  height: clamp(160px, 17vw, 260px);
  border: 1px solid rgba(236, 206, 166, .22);
  border-radius: 999px;
  opacity: .34;
  mix-blend-mode: screen;
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--outcome-photo {
  width: clamp(280px, 34vw, 540px);
  height: clamp(220px, 28vw, 420px);
  border: 1px solid var(--d-line-soft);
  border-radius: 38px;
  opacity: .34;
  background:
    linear-gradient(135deg, rgba(19, 14, 9, .18), transparent 58%),
    url("/assets/img/work_4.png") center / cover;
  box-shadow: var(--d-shadow);
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--outcome-photo {
  right: -12%;
  bottom: -6%;
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--outcome-board {
  display: none !important;
  z-index: 0;
  right: 2%;
  top: -24px;
  width: clamp(280px, 30vw, 480px);
  height: clamp(160px, 20vw, 300px);
  border-color: var(--d-line-soft);
  border-radius: 999px;
  opacity: .34;
  background-color: rgba(255, 253, 249, .5);
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--program-line {
  display: none !important;
  z-index: 0;
  right: -8%;
  top: 18%;
  width: min(760px, 66vw);
  height: 130px;
  border-color: var(--d-line-soft);
  border-radius: 999px;
  opacity: .26;
  background-color: rgba(255, 253, 249, .38);
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--pricing-orbit {
  display: none !important;
  z-index: 0;
  right: -7%;
  top: 2%;
  width: clamp(220px, 26vw, 390px);
  height: clamp(220px, 26vw, 390px);
  border: 1px solid rgba(171, 127, 78, .2);
  border-radius: 999px;
  opacity: .42;
  background:
    radial-gradient(circle at 50% 50%, rgba(171, 127, 78, .14), transparent 64%);
}

body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--pricing-line {
  display: none !important;
  z-index: 0;
  left: -8%;
  bottom: 10%;
  width: min(760px, 66vw);
  height: 120px;
  border: 1px solid var(--d-line-soft);
  border-radius: 999px;
  opacity: .3;
  background:
    linear-gradient(rgba(29, 26, 21, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 26, 21, .05) 1px, transparent 1px);
  background-size: 30px 30px;
}

body.design-subpage.abt.sketchup-page .sketchup-float-note {
  display: none !important;
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 248, 238, .2);
  border-radius: 999px;
  color: rgba(255, 248, 238, .78);
  background: rgba(255, 248, 238, .08);
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

body.design-subpage.abt.sketchup-page .sketchup-float-note--model {
  right: 37%;
  top: 18%;
}

body.design-subpage.abt.sketchup-page .sketchup-float-note--render {
  right: 4%;
  top: 70%;
}

body.design-subpage.abt.sketchup-page .sketchup-float-note--hours {
  left: 7%;
  bottom: 14%;
}

body.design-subpage.abt.sketchup-page .sketchup-float-note--outcome {
  color: var(--d-gold);
  border-color: var(--d-line);
  background: rgba(255, 253, 249, .76);
  box-shadow: var(--d-shadow);
}

body.design-subpage.abt.sketchup-page .sketchup-float-note--outcome {
  right: 5%;
  top: 72px;
}

body.design-subpage.abt.sketchup-page .sketchup-float-note--pricing-safe {
  right: 6%;
  top: 58px;
  color: var(--d-gold);
  border-color: var(--d-line);
  background: rgba(255, 253, 249, .78);
  box-shadow: var(--d-shadow);
}

html[data-theme="dark"] body.design-subpage.abt .design-context,
html[data-theme="dark"] body.design-subpage.abt .section-index,
html[data-theme="dark"] body.design-subpage.abt > .fixed.inset-x-0.bottom-0 > div > div {
  background: rgba(31, 25, 18, .9) !important;
}

html[data-theme="dark"] body.design-subpage.abt .design-context__links a {
  border-color: transparent !important;
  background: transparent !important;
}

html[data-theme="dark"] body.design-subpage.abt .design-context__parent {
  background: linear-gradient(135deg, #eccea6, #c99b66);
}

html[data-theme="dark"] body.design-subpage.abt .design-context__parent strong {
  color: #1a140c !important;
}

html[data-theme="dark"] body.design-subpage.abt .design-context__links a:hover,
html[data-theme="dark"] body.design-subpage.abt .design-context__links a[aria-current="page"],
html[data-theme="dark"] body.design-subpage.abt .design-context__links a[aria-current="true"],
html[data-theme="dark"] body.design-subpage.abt .design-context__links a.is-active {
  color: #1a140c !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #eccea6, #c99b66) !important;
}

html[data-theme="dark"] body.design-subpage.abt #hero {
  background:
    radial-gradient(900px 620px at 82% 18%, rgba(220, 189, 147, .22), transparent 62%),
    linear-gradient(135deg, #090705 0%, #1f1912 58%, #070604 100%) !important;
}

html[data-theme="dark"] body.design-subpage.abt #hero::after {
  background: linear-gradient(180deg, transparent, var(--d-bg));
}

html[data-theme="dark"] body.design-subpage.abt main section .bg-white,
html[data-theme="dark"] body.design-subpage.abt #program > .mt-6,
html[data-theme="dark"] body.design-subpage.abt #faq > .mt-6,
html[data-theme="dark"] body.design-subpage.abt #pricing > .mt-6.grid > div {
  background: var(--d-surface) !important;
}

html[data-theme="dark"] body.design-subpage.abt .story-item:hover .story-bubble {
  box-shadow: 0 34px 76px -34px rgba(0, 0, 0, .88);
}

html[data-theme="dark"] body.design-subpage.abt .course-float-note--result,
html[data-theme="dark"] body.design-subpage.abt .course-float-note--price {
  background: rgba(31, 25, 18, .78);
}

html[data-theme="dark"] body.design-subpage.abt .course-parallax-bg--outcomes-sheet,
html[data-theme="dark"] body.design-subpage.abt .course-parallax-bg--outcomes-plan,
html[data-theme="dark"] body.design-subpage.abt .course-parallax-bg--pricing-arch,
html[data-theme="dark"] body.design-subpage.abt .course-parallax-bg--pricing-mesh {
  background: rgba(31, 25, 18, .5);
}

html[data-theme="dark"] body.design-subpage.abt.sketchup-page #sketchup-hero {
  background:
    radial-gradient(900px 620px at 72% 20%, rgba(220, 189, 147, .2), transparent 64%),
    linear-gradient(135deg, #090705 0%, #1f1912 56%, #070604 100%) !important;
}

html[data-theme="dark"] body.design-subpage.abt.sketchup-page #sketchup-hero::after {
  background: linear-gradient(180deg, transparent, var(--d-bg));
}

html[data-theme="dark"] body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--outcome-board,
html[data-theme="dark"] body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--program-line {
  background-color: rgba(31, 25, 18, .5);
}

html[data-theme="dark"] body.design-subpage.abt.sketchup-page .sketchup-float-note--outcome {
  background: rgba(31, 25, 18, .78);
}

@media (prefers-reduced-motion: reduce) {
  body.design-subpage.abt [data-parallax-speed],
  body.design-subpage.abt .video-shell {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  body.design-subpage.abt .design-context {
    top: 74px;
    max-width: calc(100% - 20px);
    margin-top: 8px;
    padding: 5px;
  }

  body.design-subpage.abt .design-context__links {
    justify-content: flex-start;
  }

  body.design-subpage.abt .design-context__links a {
    min-height: 30px;
    padding: 0 10px;
  }

  body.design-subpage.abt #hero {
    min-height: auto;
  }

  body.design-subpage.abt #hero > .mx-auto {
    width: min(calc(100% - 36px), var(--course-max));
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 64px !important;
    padding-bottom: 96px !important;
  }

  body.design-subpage.abt #hero .order-1 {
    max-width: 100% !important;
    overflow: hidden;
  }

  body.design-subpage.abt #hero h1 {
    max-width: min(100%, 340px) !important;
    font-size: clamp(2.25rem, 9vw, 3rem) !important;
    line-height: .98 !important;
  }

  body.design-subpage.abt #hero .mt-7.flex,
  body.design-subpage.abt.sketchup-page #sketchup-hero .mt-6.flex {
    width: min(100%, 320px);
    margin-left: 0;
    margin-right: auto;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero .mt-6.flex {
    margin-left: auto;
    margin-right: auto;
  }

  body.design-subpage.abt #hero .mt-7.flex a,
  body.design-subpage.abt.sketchup-page #sketchup-hero .mt-6.flex a {
    justify-content: center;
    width: 100%;
  }

  body.design-subpage.abt #hero .trust-row {
    font-size: .78rem;
    gap: 8px 12px;
  }

  body.design-subpage.abt #hero p,
  body.design-subpage.abt.sketchup-page #sketchup-hero p {
    max-width: min(100%, 300px) !important;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero p {
    margin-left: 0;
    margin-right: 0;
  }

  body.design-subpage.abt #hero .video-inner {
    min-height: 320px;
  }

  body.design-subpage.abt .section-index,
  body.design-subpage.abt:not(.shop-page):not(.portfolio-page) main {
    width: min(calc(100% - 32px), var(--course-max));
  }

  body.design-subpage.abt .section-index {
    border-radius: 24px !important;
  }

  body.design-subpage.abt [data-parallax-speed],
  body.design-subpage.abt .video-shell {
    animation: none !important;
    transform: none !important;
  }

  body.design-subpage.abt .course-parallax-orbit,
  body.design-subpage.abt .course-float-note,
  body.design-subpage.abt .course-parallax-bg,
  body.design-subpage.abt.sketchup-page .sketchup-float-note,
  body.design-subpage.abt.sketchup-page .sketchup-parallax-bg {
    display: none;
  }

  body.design-subpage.abt.sketchup-page #teacher::before,
  body.design-subpage.abt.sketchup-page #forwhom::before,
  body.design-subpage.abt.sketchup-page #reqs::before {
    display: none;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero {
    min-height: auto;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero > .relative {
    width: calc(100vw - 36px);
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 18px;
    margin-right: 18px;
    padding-top: 64px;
    padding-bottom: 132px;
    text-align: left;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero .max-w-4xl {
    max-width: 100% !important;
    overflow: hidden;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero h1 {
    max-width: min(100%, 300px) !important;
    margin-left: 0;
    margin-right: 0;
    font-size: clamp(2.25rem, 9vw, 3rem) !important;
    line-height: .98 !important;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero .mt-6.flex.flex-wrap {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero .mt-6.flex {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.design-subpage.abt.sketchup-page #sketchup-hero .mt-6.flex.flex-wrap span {
    justify-content: center;
    width: 100%;
  }

  body.design-subpage.abt.sketchup-page .sketchup-hero-visual {
    width: 100%;
    min-height: 300px;
    margin: 0;
    border-radius: 24px;
  }

  body.design-subpage.abt.sketchup-page .sketchup-hero-visual__caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px;
  }

  body.design-subpage.abt.sketchup-page .sketchup-hero-visual__steps {
    left: 14px;
    right: 14px;
    top: 14px;
  }

  body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid {
    grid-template-columns: 1fr;
  }

  body.design-subpage.abt.sketchup-page #outcome {
    display: block;
    padding-top: 34px !important;
  }

  body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 22px !important;
  }

  body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid > div,
  body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid > div:nth-child(2),
  body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid > div:nth-child(3) {
    min-height: 0;
    transform: none !important;
  }

  body.design-subpage.abt.sketchup-page .sketchup-teacher-card {
    grid-template-columns: 1fr;
  }

  body.design-subpage.abt.sketchup-page .sketchup-teacher-photo {
    max-width: 240px;
  }

  body.design-subpage.abt main section > h2 {
    max-width: min(100%, 340px) !important;
    font-size: clamp(2.05rem, 10vw, 2.75rem) !important;
    line-height: 1 !important;
  }

  body.design-subpage.abt main section > p {
    max-width: min(100%, 340px) !important;
  }
}

/* ============================================================
   SketchUp — bright "sales" theme (emerald + freshness).
   Scoped to .sketchup-page so the rest of the site is untouched.
   ============================================================ */
body.design-subpage.abt.sketchup-page {
  --d-bg: #f1faf5;
  --d-bg-warm: #e7f4ed;
  --d-surface: #ffffff;
  --sk-accent: #10b981;
  --sk-accent-strong: #059669;
  --sk-accent-deep: #047857;
  --sk-accent-soft: rgba(16, 185, 129, .10);
  --sk-accent-glow: 0 18px 38px -14px rgba(16, 185, 129, .55);
  background:
    radial-gradient(1100px 640px at 50% -12%, rgba(16, 185, 129, .12), transparent 60%),
    radial-gradient(900px 620px at 100% 4%, rgba(45, 212, 191, .10), transparent 58%),
    var(--d-bg) !important;
}

/* Theme toggle hidden — this landing is light-only */
body.design-subpage.abt.sketchup-page [data-theme-toggle] {
  display: none !important;
}

/* Primary CTAs — vivid emerald with glow */
body.design-subpage.abt.sketchup-page .btn-buy--featured,
body.design-subpage.abt.sketchup-page .btn-buy--lg,
body.design-subpage.abt.sketchup-page #sketchup-hero .btn-buy--featured {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--sk-accent) 0%, var(--sk-accent-strong) 60%, var(--sk-accent-deep) 100%) !important;
  box-shadow: var(--sk-accent-glow) !important;
  font-weight: 800 !important;
}

body.design-subpage.abt.sketchup-page .btn-buy--featured:hover,
body.design-subpage.abt.sketchup-page .btn-buy--lg:hover,
body.design-subpage.abt.sketchup-page #sketchup-hero .btn-buy--featured:hover {
  color: #fff !important;
  background: linear-gradient(135deg, var(--sk-accent-strong), var(--sk-accent-deep)) !important;
  box-shadow: 0 22px 46px -14px rgba(5, 150, 105, .62) !important;
  transform: translateY(-1px);
}

/* Secondary "Записаться" (without feedback) — emerald outline */
body.design-subpage.abt.sketchup-page .btn-buy:not(.btn-buy--featured):not(.btn-buy--lg) {
  color: var(--sk-accent-deep) !important;
  border: 2px solid var(--sk-accent) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

body.design-subpage.abt.sketchup-page .btn-buy:not(.btn-buy--featured):not(.btn-buy--lg):hover {
  color: var(--sk-accent-deep) !important;
  background: var(--sk-accent-soft) !important;
}

/* Hero eyebrow + "Что получится" pop on the dark hero */
body.design-subpage.abt.sketchup-page #sketchup-hero p:first-child {
  color: #6ee7b7 !important;
}

body.design-subpage.abt.sketchup-page #sketchup-hero a[href="#outcome"] {
  color: #d1fae5 !important;
  border-color: rgba(110, 231, 183, .5) !important;
  background: rgba(16, 185, 129, .14) !important;
}

/* Section eyebrows / emphasis */
body.design-subpage.abt.sketchup-page .text-emerald-700,
body.design-subpage.abt.sketchup-page #pricing .text-emerald-700 {
  color: var(--sk-accent-deep) !important;
}

/* TOC pills — emerald on hover/active */
body.design-subpage.abt.sketchup-page nav[aria-label="Оглавление"] a:hover,
body.design-subpage.abt.sketchup-page nav[aria-label="Оглавление"] a[aria-current="page"] {
  color: var(--sk-accent-deep) !important;
  border-color: var(--sk-accent) !important;
  background: var(--sk-accent-soft) !important;
}

/* Outcome cards — fresh emerald tint + accent stripe */
body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid > div {
  position: relative;
  border-color: rgba(16, 185, 129, .22) !important;
  background:
    linear-gradient(135deg, rgba(16, 185, 129, .10), transparent 54%),
    #fff !important;
  overflow: hidden;
}

body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid > div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--sk-accent), var(--sk-accent-deep));
}

body.design-subpage.abt.sketchup-page #outcome > .mt-6.grid > div h3 {
  color: var(--sk-accent-deep);
}

/* Program modules — recolor amber accents to emerald */
body.design-subpage.abt.sketchup-page #program details {
  border-color: rgba(16, 185, 129, .28) !important;
  background: linear-gradient(180deg, rgba(16, 185, 129, .07), rgba(255, 255, 255, .9)) !important;
}

body.design-subpage.abt.sketchup-page #program details > summary > span:first-child {
  border-color: rgba(16, 185, 129, .4) !important;
  background: linear-gradient(135deg, #d1fae5, #6ee7b7) !important;
  color: var(--sk-accent-deep) !important;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .25);
}

body.design-subpage.abt.sketchup-page #program svg {
  color: var(--sk-accent-strong) !important;
}

/* Pricing — make the recommended plan unmissable */
body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid > div:first-child {
  border: 2px solid var(--sk-accent) !important;
  background:
    linear-gradient(180deg, var(--sk-accent-soft), #fff 46%) !important;
  box-shadow: 0 28px 60px -26px rgba(16, 185, 129, .5) !important;
}

body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid > div:first-child .text-emerald-700,
body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid > div:first-child > div:first-child {
  color: var(--sk-accent-deep) !important;
}

/* Sales badge (used in pricing + hero) */
body.design-subpage.abt.sketchup-page .sk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-deep));
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px -10px rgba(16, 185, 129, .6);
}

body.design-subpage.abt.sketchup-page .sk-ribbon {
  position: absolute;
  top: -13px;
  left: 24px;
  z-index: 3;
}

body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid > div {
  position: relative;
}

/* Price number — bigger, emerald on the recommended plan */
body.design-subpage.abt.sketchup-page #pricing > .mt-6.grid > div:first-child .text-3xl {
  color: var(--sk-accent-deep) !important;
}

/* Final CTA band — fresh emerald wash */
body.design-subpage.abt.sketchup-page main .space-y-16 > section:last-child > div {
  border-color: rgba(16, 185, 129, .25) !important;
  background:
    radial-gradient(620px 300px at 50% 0%, rgba(16, 185, 129, .14), transparent 70%),
    linear-gradient(180deg, #ffffff, #ecfdf5) !important;
}

/* --- SketchUp: hide leftover decorative shapes behind the hero --- */
body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--hero-photo,
body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--hero-grid,
body.design-subpage.abt.sketchup-page .sketchup-parallax-bg--hero-plane {
  display: none !important;
}

/* --- SketchUp: scrolling works gallery background --- */
body.design-subpage.abt.sketchup-page .sk-works-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

body.design-subpage.abt.sketchup-page .sk-works-cols {
  position: absolute;
  inset: -16% -6%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  transform: rotate(-4deg) scale(1.16);
  transform-origin: center;
}

body.design-subpage.abt.sketchup-page .sk-works-col {
  overflow: hidden;
}

body.design-subpage.abt.sketchup-page .sk-works-track {
  display: flex;
  flex-direction: column;
  gap: 22px;
  will-change: transform;
}

/* Static by default; gentle parallax driven only by page scroll (--sk-works-y = scrollY px).
   All columns drift upward at slightly different rates for depth — no perpetual motion. */
body.design-subpage.abt.sketchup-page .sk-works-col--a .sk-works-track {
  transform: translateY(calc(var(--sk-works-y, 0px) * -0.05));
}

body.design-subpage.abt.sketchup-page .sk-works-col--b .sk-works-track {
  transform: translateY(calc(var(--sk-works-y, 0px) * -0.035));
}

body.design-subpage.abt.sketchup-page .sk-works-col--c .sk-works-track {
  transform: translateY(calc(var(--sk-works-y, 0px) * -0.075));
}

body.design-subpage.abt.sketchup-page .sk-works-col--d .sk-works-track {
  transform: translateY(calc(var(--sk-works-y, 0px) * -0.045));
}

body.design-subpage.abt.sketchup-page .sk-works-track img {
  width: 100%;
  display: block;
  border-radius: 18px;
  filter: saturate(.86) contrast(1.02);
  box-shadow: 0 24px 56px -30px rgba(20, 34, 27, .55);
}

/* Wash that fades the gallery into a soft, readable backdrop */
body.design-subpage.abt.sketchup-page .sk-works-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 620px at 78% 12%, rgba(16, 185, 129, .12), transparent 62%),
    linear-gradient(180deg, rgba(243, 250, 246, .84) 0%, rgba(243, 250, 246, .78) 40%, rgba(236, 253, 245, .86) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 1100px) {
  body.design-subpage.abt.sketchup-page .sk-works-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  body.design-subpage.abt.sketchup-page .sk-works-col--d {
    display: none;
  }
}

@media (max-width: 680px) {
  body.design-subpage.abt.sketchup-page .sk-works-cols {
    grid-template-columns: repeat(2, 1fr);
    transform: rotate(-5deg) scale(1.25);
  }
  body.design-subpage.abt.sketchup-page .sk-works-col--c {
    display: none;
  }
  body.design-subpage.abt.sketchup-page .sk-works-wash {
    background:
      radial-gradient(700px 520px at 80% 10%, rgba(16, 185, 129, .16), transparent 60%),
      linear-gradient(180deg, rgba(241, 250, 245, .92), rgba(236, 253, 245, .92));
  }
}

/* --- SketchUp: scroll progress bar --- */
body.design-subpage.abt.sketchup-page .sk-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}

body.design-subpage.abt.sketchup-page .sk-progress > span {
  display: block;
  height: 100%;
  width: var(--sk-progress, 0%);
  background: linear-gradient(90deg, var(--sk-accent), var(--sk-accent-deep));
  box-shadow: 0 0 12px rgba(16, 185, 129, .6);
  transition: width .08s linear;
}

/* --- SketchUp: pricing feature comparison (✓ / ✕) --- */
body.design-subpage.abt.sketchup-page .sk-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
}

body.design-subpage.abt.sketchup-page .sk-feat__i {
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}

body.design-subpage.abt.sketchup-page .sk-feat--yes {
  color: var(--d-ink);
}

body.design-subpage.abt.sketchup-page .sk-feat--yes .sk-feat__i {
  color: #fff;
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-deep));
}

body.design-subpage.abt.sketchup-page .sk-feat--no {
  color: var(--d-muted);
}

body.design-subpage.abt.sketchup-page .sk-feat--no .sk-feat__i {
  color: var(--d-muted);
  background: rgba(29, 26, 21, .07);
}

/* --- SketchUp: teacher stats + quote --- */
body.design-subpage.abt.sketchup-page .sketchup-teacher-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.design-subpage.abt.sketchup-page .sketchup-teacher-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.design-subpage.abt.sketchup-page .sketchup-teacher-name strong {
  font-size: 1.05rem;
  color: var(--d-ink);
}

body.design-subpage.abt.sketchup-page .sketchup-teacher-name span {
  font-size: .85rem;
  color: var(--d-muted);
}

body.design-subpage.abt.sketchup-page .sk-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.design-subpage.abt.sketchup-page .sk-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid rgba(16, 185, 129, .24);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sk-accent-soft), transparent 70%), var(--d-surface);
}

body.design-subpage.abt.sketchup-page .sk-stat b {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--sk-accent-deep);
  line-height: 1;
}

body.design-subpage.abt.sketchup-page .sk-stat span {
  font-size: .78rem;
  color: var(--d-ink-soft);
}

body.design-subpage.abt.sketchup-page .sk-quote {
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 4px solid var(--sk-accent);
  border-radius: 0 12px 12px 0;
  background: var(--sk-accent-soft);
  color: var(--d-ink);
  font-style: italic;
}

/* --- SketchUp: program learning-path stepper --- */
body.design-subpage.abt.sketchup-page .sk-path {
  list-style: none;
  margin: 22px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  counter-reset: none;
}

body.design-subpage.abt.sketchup-page .sk-path li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 16px 16px 18px;
  border: 1px solid rgba(16, 185, 129, .24);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--sk-accent-soft), transparent 60%), var(--d-surface);
}

/* connecting arrows between steps */
body.design-subpage.abt.sketchup-page .sk-path li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: var(--sk-accent);
  font-weight: 800;
}

body.design-subpage.abt.sketchup-page .sk-path__n {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--sk-accent-deep);
}

body.design-subpage.abt.sketchup-page .sk-path li b {
  font-size: 1.02rem;
  color: var(--d-ink);
}

body.design-subpage.abt.sketchup-page .sk-path__d {
  font-size: .8rem;
  color: var(--d-muted);
}

@media (max-width: 900px) {
  body.design-subpage.abt.sketchup-page .sk-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.design-subpage.abt.sketchup-page .sk-path li:nth-child(2n)::after {
    content: none;
  }
}

@media (max-width: 560px) {
  body.design-subpage.abt.sketchup-page .sk-stats {
    grid-template-columns: 1fr;
  }
}

/* --- SketchUp: icon cards (outcome / кому подходит) --- */
body.design-subpage.abt.sketchup-page .sk-icard {
  display: flex;
  flex-direction: column;
  padding: 22px !important;
  border: 1px solid rgba(16, 185, 129, .2) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(150deg, var(--sk-accent-soft), transparent 58%),
    var(--d-surface) !important;
  box-shadow: 0 14px 36px -30px rgba(16, 185, 129, .5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.design-subpage.abt.sketchup-page .sk-icard:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, .45) !important;
  box-shadow: 0 26px 50px -28px rgba(16, 185, 129, .5);
}

body.design-subpage.abt.sketchup-page .sk-icard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

body.design-subpage.abt.sketchup-page .sk-icard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-deep));
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 12px 24px -12px rgba(16, 185, 129, .7);
}

body.design-subpage.abt.sketchup-page .sk-step {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sk-accent-deep);
}

body.design-subpage.abt.sketchup-page #forwhom .sk-icard h3 {
  color: var(--d-ink);
}

/* --- SketchUp: requirement spec cards --- */
body.design-subpage.abt.sketchup-page .sk-spec {
  padding: 24px !important;
  border: 1px solid rgba(16, 185, 129, .2) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, var(--sk-accent-soft), transparent 30%),
    var(--d-surface) !important;
}

body.design-subpage.abt.sketchup-page .sk-spec__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

body.design-subpage.abt.sketchup-page .sk-spec__os {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 1.4rem;
  color: var(--d-ink);
  background: #fff;
  border: 1px solid rgba(16, 185, 129, .3);
  box-shadow: var(--d-shadow);
}

body.design-subpage.abt.sketchup-page .sk-spec h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

body.design-subpage.abt.sketchup-page .sk-spec__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

body.design-subpage.abt.sketchup-page .sk-spec__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: var(--d-ink-soft);
}

body.design-subpage.abt.sketchup-page .sk-spec__list i {
  flex: 0 0 20px;
  width: 20px;
  text-align: center;
  color: var(--sk-accent-strong);
}

/* --- SketchUp: "кому подходит" as light icon pills --- */
body.design-subpage.abt.sketchup-page .sk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.design-subpage.abt.sketchup-page .sk-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid rgba(16, 185, 129, .26);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sk-accent-soft), transparent 70%), var(--d-surface);
  color: var(--d-ink);
  font-weight: 600;
  font-size: .95rem;
}

body.design-subpage.abt.sketchup-page .sk-tag i {
  color: var(--sk-accent-strong);
}

/* --- SketchUp: collapsible PC requirements --- */
body.design-subpage.abt.sketchup-page .sk-reqs {
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 16px;
  background: var(--d-surface);
  overflow: hidden;
}

body.design-subpage.abt.sketchup-page .sk-reqs > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--d-ink);
}

body.design-subpage.abt.sketchup-page .sk-reqs > summary::-webkit-details-marker { display: none; }

body.design-subpage.abt.sketchup-page .sk-reqs > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.design-subpage.abt.sketchup-page .sk-reqs > summary > span i {
  color: var(--sk-accent-strong);
}

body.design-subpage.abt.sketchup-page .sk-reqs__chev {
  color: var(--sk-accent-strong);
  transition: transform .25s ease;
}

body.design-subpage.abt.sketchup-page .sk-reqs[open] .sk-reqs__chev {
  transform: rotate(180deg);
}

body.design-subpage.abt.sketchup-page .sk-reqs > div,
body.design-subpage.abt.sketchup-page .sk-reqs > p {
  padding-left: 20px;
  padding-right: 20px;
}

body.design-subpage.abt.sketchup-page .sk-reqs > p:last-child {
  padding-bottom: 18px;
}

/* Inside the collapsible, drop the heavy card chrome — keep it light */
body.design-subpage.abt.sketchup-page .sk-reqs .sk-spec {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  background: transparent !important;
}

/* ============================================================
   Challenge intensive page
   ============================================================ */
body.design-subpage.abt.challenge-page {
  --challenge-accent: #b87a42;
  --challenge-accent-strong: #8f5529;
  --challenge-accent-soft: rgba(184, 122, 66, .14);
  --challenge-hero-ink: #20150e;
  --challenge-hero-muted: #6f5b48;
  --challenge-hero-line: rgba(32, 21, 14, .12);
  --challenge-ink-dark: #fff8ee;
  --challenge-muted-dark: rgba(255, 248, 238, .72);
  --challenge-line-dark: rgba(255, 248, 238, .18);
}

body.design-subpage.abt.challenge-page #challenge-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(610px, 78vh, 780px);
  overflow: hidden;
  color: var(--challenge-hero-ink);
  background:
    radial-gradient(900px 620px at 82% 16%, rgba(184, 122, 66, .23), transparent 64%),
    radial-gradient(760px 520px at 10% 78%, rgba(220, 189, 147, .34), transparent 62%),
    linear-gradient(132deg, #fff8ee 0%, #f6eadb 52%, #ead9c6 100%) !important;
}

body.design-subpage.abt.challenge-page #challenge-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -18vw;
  top: -24%;
  width: min(70vw, 980px);
  height: 138%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 42%, rgba(255, 248, 238, .48), transparent 28%),
    linear-gradient(150deg, rgba(32, 21, 14, .9), rgba(143, 85, 41, .68));
  opacity: .9;
  transform: rotate(-11deg);
  pointer-events: none;
}

body.design-subpage.abt.challenge-page #challenge-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 190px;
  background: linear-gradient(180deg, transparent, var(--d-bg));
  pointer-events: none;
}

body.design-subpage.abt.challenge-page .challenge-hero__inner {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(330px, .74fr);
  align-items: center;
  gap: clamp(34px, 5vw, 74px);
  width: min(calc(100% - 56px), var(--course-max));
  min-height: inherit;
  margin: 0 auto;
  padding: clamp(74px, 8vw, 118px) 0 clamp(112px, 10vw, 150px);
}

body.design-subpage.abt.challenge-page .challenge-hero__copy {
  max-width: 760px;
  position: relative;
  z-index: 3;
}

body.design-subpage.abt.challenge-page .challenge-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: .78rem;
  color: rgba(32, 21, 14, .58);
}

body.design-subpage.abt.challenge-page .challenge-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

body.design-subpage.abt.challenge-page .challenge-eyebrow,
body.design-subpage.abt.challenge-page .challenge-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 14px;
  color: var(--challenge-accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.design-subpage.abt.challenge-page #challenge-hero .challenge-eyebrow {
  color: var(--challenge-accent-strong);
  padding: 9px 13px;
  border: 1px solid rgba(184, 122, 66, .22);
  border-radius: 999px;
  background: rgba(255, 253, 249, .62);
  box-shadow: 0 18px 42px -34px rgba(143, 85, 41, .6);
}

body.design-subpage.abt.challenge-page #challenge-hero h1 {
  max-width: 780px;
  margin: 0;
  color: var(--challenge-hero-ink);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: .004em;
  text-align: left;
  text-wrap: balance;
}

body.design-subpage.abt.challenge-page #challenge-hero h1 span {
  display: block;
  width: fit-content;
  margin-top: .04em;
  color: #fff8ee;
  padding: .02em .16em .1em;
  border-radius: .24em;
  background: linear-gradient(135deg, #2b1e14, var(--challenge-accent-strong));
  box-shadow: 0 28px 60px -38px rgba(32, 21, 14, .9);
}

body.design-subpage.abt.challenge-page .challenge-lead {
  max-width: 620px;
  margin: 24px 0 0;
  color: var(--challenge-hero-muted);
  font-size: clamp(1.06rem, 1.6vw, 1.32rem);
  line-height: 1.58;
}

body.design-subpage.abt.challenge-page .challenge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

body.design-subpage.abt.challenge-page .challenge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 14px 21px;
  border-radius: 999px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}

body.design-subpage.abt.challenge-page .challenge-btn:hover {
  transform: translateY(-2px);
}

body.design-subpage.abt.challenge-page .challenge-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--challenge-accent), var(--challenge-accent-strong)) !important;
  box-shadow: 0 24px 50px -24px rgba(143, 85, 41, .82);
}

body.design-subpage.abt.challenge-page .challenge-btn--ghost {
  color: var(--challenge-hero-ink);
  border: 1px solid rgba(32, 21, 14, .16);
  background: rgba(255, 253, 249, .58);
  backdrop-filter: blur(16px);
}

body.design-subpage.abt.challenge-page .challenge-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 680px;
  margin-top: 22px;
}

body.design-subpage.abt.challenge-page .challenge-proof-strip span {
  display: grid;
  align-content: center;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid rgba(32, 21, 14, .12);
  border-radius: 18px;
  color: var(--challenge-hero-muted);
  background: rgba(255, 253, 249, .62);
  box-shadow: 0 20px 48px -40px rgba(32, 21, 14, .5);
  backdrop-filter: blur(14px);
}

body.design-subpage.abt.challenge-page .challenge-proof-strip b {
  display: block;
  color: var(--challenge-hero-ink);
  font-size: 1.02rem;
}

body.design-subpage.abt.challenge-page .challenge-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

body.design-subpage.abt.challenge-page .challenge-hero__chips span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(32, 21, 14, .11);
  border-radius: 999px;
  color: var(--challenge-hero-muted);
  background: rgba(255, 253, 249, .72);
  font-size: .88rem;
  backdrop-filter: blur(12px);
}

body.design-subpage.abt.challenge-page .challenge-hero-visual {
  position: relative;
  z-index: 3;
  min-height: clamp(420px, 52vw, 590px);
  overflow: hidden;
  border: 1px solid rgba(255, 248, 238, .42);
  border-radius: 34px;
  background: rgba(255, 248, 238, .28);
  box-shadow: 0 44px 110px -54px rgba(32, 21, 14, .78);
}

body.design-subpage.abt.challenge-page .challenge-hero-visual::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 2;
  border: 1px solid rgba(255, 248, 238, .18);
  border-radius: 26px;
  pointer-events: none;
}

body.design-subpage.abt.challenge-page .challenge-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(16, 11, 7, .08), rgba(16, 11, 7, .5)),
    radial-gradient(520px 340px at 72% 12%, rgba(255, 248, 238, .26), transparent 58%);
  pointer-events: none;
}

body.design-subpage.abt.challenge-page .challenge-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.04);
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 248, 238, .18);
  border-radius: 18px;
  color: var(--challenge-ink-dark);
  background: rgba(16, 11, 7, .72);
  backdrop-filter: blur(18px);
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__caption span {
  color: #e7c28f;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__caption strong {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  font-weight: 500;
  line-height: 1;
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__deal,
body.design-subpage.abt.challenge-page .challenge-hero-visual__bonus {
  position: absolute;
  z-index: 4;
  display: grid;
  border: 1px solid rgba(255, 248, 238, .36);
  color: var(--challenge-ink-dark);
  background: rgba(16, 11, 7, .74);
  box-shadow: 0 24px 58px -36px rgba(0, 0, 0, .8);
  backdrop-filter: blur(18px);
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__deal {
  top: 24px;
  right: 24px;
  gap: 4px;
  min-width: 144px;
  padding: 16px 18px;
  border-radius: 20px;
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__deal span,
body.design-subpage.abt.challenge-page .challenge-hero-visual__bonus span {
  color: #e7c28f;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__deal strong {
  font-family: var(--font-display);
  font-size: 2.05rem;
  font-weight: 500;
  line-height: .9;
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__bonus {
  left: 24px;
  top: 24px;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
}

body.design-subpage.abt.challenge-page .challenge-hero-visual__bonus i {
  color: #e7c28f;
}

body.design-subpage.abt.challenge-page .challenge-parallax-bg,
body.design-subpage.abt.challenge-page .challenge-float-note {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

body.design-subpage.abt.challenge-page .challenge-parallax-bg--hero-panel {
  right: 8%;
  top: 12%;
  width: min(42vw, 620px);
  height: min(34vw, 480px);
  border: 1px solid rgba(32, 21, 14, .12);
  border-radius: 46px;
  background:
    linear-gradient(135deg, rgba(255, 253, 249, .5), rgba(255, 248, 238, .08)),
    repeating-linear-gradient(90deg, rgba(32, 21, 14, .1) 0 1px, transparent 1px 62px);
}

body.design-subpage.abt.challenge-page .challenge-parallax-bg--hero-grid {
  left: -7%;
  bottom: 2%;
  width: min(52vw, 720px);
  height: min(30vw, 410px);
  border-radius: 999px;
  opacity: .62;
  background:
    linear-gradient(rgba(143, 85, 41, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 85, 41, .14) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle, #000 0%, transparent 66%);
}

body.design-subpage.abt.challenge-page .challenge-parallax-bg--hero-orbit {
  right: 34%;
  top: 12%;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(143, 85, 41, .24);
  border-radius: 50%;
  box-shadow: inset 0 0 0 36px rgba(184, 122, 66, .075);
}

body.design-subpage.abt.challenge-page .challenge-float-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(143, 85, 41, .22);
  border-radius: 999px;
  color: var(--challenge-accent-strong);
  background: rgba(255, 253, 249, .72);
  box-shadow: 0 18px 44px -30px rgba(143, 85, 41, .62);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

body.design-subpage.abt.challenge-page .challenge-float-note--days {
  left: 7%;
  top: 30%;
}

body.design-subpage.abt.challenge-page .challenge-float-note--collage {
  right: 6%;
  top: 36%;
}

body.design-subpage.abt.challenge-page .challenge-float-note--shopping {
  right: 25%;
  bottom: 18%;
}

body.design-subpage.abt.challenge-page .challenge-main {
  width: min(calc(100% - 56px), var(--course-max));
  margin: 0 auto;
  padding: 0 0 clamp(70px, 9vw, 118px) !important;
}

body.design-subpage.abt.challenge-page .challenge-index {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: -34px auto 26px;
  padding: 10px;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  background: rgba(255, 253, 249, .86);
  box-shadow: var(--d-shadow);
  backdrop-filter: blur(18px);
}

body.design-subpage.abt.challenge-page .challenge-index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 17px;
  border-radius: 999px;
  color: var(--d-ink);
  font-weight: 650;
  text-decoration: none;
}

body.design-subpage.abt.challenge-page .challenge-index a:hover {
  color: #fff;
  background: var(--d-ink);
}

body.design-subpage.abt.challenge-page .challenge-section {
  position: relative;
  isolation: isolate;
  padding: clamp(62px, 7.5vw, 104px) 0;
  border-top: 1px solid var(--d-line-soft);
}

body.design-subpage.abt.challenge-page .challenge-section:first-of-type {
  border-top: 0;
}

body.design-subpage.abt.challenge-page .challenge-section__head {
  max-width: 720px;
  margin-bottom: clamp(24px, 4vw, 42px);
}

body.design-subpage.abt.challenge-page .challenge-section__head h2,
body.design-subpage.abt.challenge-page .challenge-price-copy h2 {
  max-width: 760px !important;
  margin: 0;
  color: var(--d-ink);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.9vw, 5.7rem);
  font-weight: 500;
  line-height: .9;
}

body.design-subpage.abt.challenge-page .challenge-section__head p,
body.design-subpage.abt.challenge-page .challenge-price-copy p {
  max-width: 640px !important;
  margin: 18px 0 0;
  color: var(--d-muted);
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.62;
}

body.design-subpage.abt.challenge-page .challenge-section--split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
}

body.design-subpage.abt.challenge-page .challenge-result-grid,
body.design-subpage.abt.challenge-page .challenge-format-grid {
  display: grid;
  gap: 18px;
}

body.design-subpage.abt.challenge-page .challenge-result-grid {
  grid-template-columns: 1fr;
}

body.design-subpage.abt.challenge-page .challenge-format-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.design-subpage.abt.challenge-page .challenge-card,
body.design-subpage.abt.challenge-page .challenge-day,
body.design-subpage.abt.challenge-page .challenge-price-card,
body.design-subpage.abt.challenge-page .challenge-faq details {
  border: 1px solid var(--d-line);
  background: var(--d-surface);
  box-shadow: var(--d-shadow);
}

body.design-subpage.abt.challenge-page .challenge-card {
  min-height: 210px;
  padding: 24px;
  border-radius: 24px;
}

body.design-subpage.abt.challenge-page .challenge-card--accent {
  color: #fff;
  background:
    radial-gradient(360px 220px at 82% 8%, rgba(231, 194, 143, .26), transparent 64%),
    linear-gradient(135deg, #2b1e14, #100b07);
}

body.design-subpage.abt.challenge-page .challenge-card--soft {
  background:
    linear-gradient(150deg, var(--challenge-accent-soft), transparent 58%),
    var(--d-surface);
}

body.design-subpage.abt.challenge-page .challenge-card h3,
body.design-subpage.abt.challenge-page .challenge-day h3 {
  margin: 0;
  color: inherit;
  font-size: 1.15rem;
  font-weight: 760;
}

body.design-subpage.abt.challenge-page .challenge-card p,
body.design-subpage.abt.challenge-page .challenge-day p,
body.design-subpage.abt.challenge-page .challenge-price-card p,
body.design-subpage.abt.challenge-page .challenge-faq p {
  margin: 12px 0 0;
  color: var(--d-muted);
  line-height: 1.58;
}

body.design-subpage.abt.challenge-page .challenge-card--accent p,
body.design-subpage.abt.challenge-page .challenge-card--accent li {
  color: rgba(255, 248, 238, .78);
}

body.design-subpage.abt.challenge-page .challenge-card ul,
body.design-subpage.abt.challenge-page .challenge-checks {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

body.design-subpage.abt.challenge-page .challenge-card li,
body.design-subpage.abt.challenge-page .challenge-checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--d-ink-soft);
}

body.design-subpage.abt.challenge-page .challenge-card li i,
body.design-subpage.abt.challenge-page .challenge-checks i,
body.design-subpage.abt.challenge-page .challenge-card > i {
  color: var(--challenge-accent);
}

body.design-subpage.abt.challenge-page .challenge-card--accent li i {
  color: #e7c28f;
}

body.design-subpage.abt.challenge-page .challenge-card > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: var(--challenge-accent-soft);
  font-size: 1.18rem;
}

body.design-subpage.abt.challenge-page .challenge-days {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.design-subpage.abt.challenge-page .challenge-day {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  padding: 24px 20px;
  border-radius: 22px;
}

body.design-subpage.abt.challenge-page .challenge-day::after {
  content: "";
  position: absolute;
  inset: auto -30px -55px auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--challenge-accent-soft);
}

body.design-subpage.abt.challenge-page .challenge-day span {
  display: block;
  margin-bottom: 36px;
  color: var(--challenge-accent);
  font-family: var(--font-display);
  font-size: 2.9rem;
  line-height: .82;
}

body.design-subpage.abt.challenge-page .challenge-parallax-bg--program-ribbon {
  right: 0;
  top: 34px;
  width: 44%;
  height: 210px;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(184, 122, 66, .16) 0 1px, transparent 1px 44px),
    rgba(255, 253, 249, .52);
  opacity: .72;
}

body.design-subpage.abt.challenge-page .challenge-section--pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 420px);
  align-items: center;
  gap: clamp(28px, 6vw, 92px);
}

body.design-subpage.abt.challenge-page .challenge-price-card {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 16px;
  padding: 30px;
  border-radius: 28px;
  background:
    linear-gradient(150deg, rgba(184, 122, 66, .14), transparent 54%),
    var(--d-surface);
}

body.design-subpage.abt.challenge-page .challenge-price-card span {
  color: var(--d-muted);
  font-size: .82rem;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.design-subpage.abt.challenge-page .challenge-price-card strong {
  color: var(--d-ink);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 5.3rem);
  font-weight: 500;
  line-height: .88;
}

body.design-subpage.abt.challenge-page .challenge-price-card .challenge-btn {
  width: 100%;
}

body.design-subpage.abt.challenge-page .challenge-parallax-bg--price-sheet {
  right: 16%;
  top: 18%;
  width: min(36vw, 480px);
  height: 260px;
  border: 1px solid var(--d-line);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 253, 249, .78), rgba(255, 253, 249, .24)),
    repeating-linear-gradient(0deg, rgba(184, 122, 66, .18) 0 1px, transparent 1px 34px);
  opacity: .72;
}

body.design-subpage.abt.challenge-page .challenge-faq {
  display: grid;
  gap: 12px;
}

body.design-subpage.abt.challenge-page .challenge-faq details {
  overflow: hidden;
  border-radius: 18px;
}

body.design-subpage.abt.challenge-page .challenge-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  color: var(--d-ink);
  cursor: pointer;
  list-style: none;
  font-weight: 720;
}

body.design-subpage.abt.challenge-page .challenge-faq summary::-webkit-details-marker {
  display: none;
}

body.design-subpage.abt.challenge-page .challenge-faq summary i {
  color: var(--challenge-accent);
  transition: transform .24s ease;
}

body.design-subpage.abt.challenge-page .challenge-faq details[open] summary i {
  transform: rotate(180deg);
}

body.design-subpage.abt.challenge-page .challenge-faq p {
  padding: 0 22px 22px;
}

body.design-subpage.abt.challenge-page .challenge-sticky {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--d-line);
  border-radius: 18px;
  background: rgba(255, 253, 249, .92);
  box-shadow: var(--d-shadow);
  backdrop-filter: blur(16px);
}

body.design-subpage.abt.challenge-page .sticky-cta {
  display: none;
}

body.design-subpage.abt.challenge-page .sticky-cta .bar {
  padding: 0 16px 16px;
}

body.design-subpage.abt.challenge-page .focus\:not-sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  width: auto;
  height: auto;
  padding: 10px 14px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: 999px;
  color: #fff;
  background: var(--d-ink);
}

body.design-subpage.abt.challenge-page .challenge-sticky p {
  margin: 0;
  color: var(--d-ink);
  font-weight: 760;
}

body.design-subpage.abt.challenge-page .challenge-sticky span {
  display: block;
  margin-top: 2px;
  color: var(--d-muted);
  font-size: .78rem;
}

body.design-subpage.abt.challenge-page .challenge-sticky a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--challenge-accent), var(--challenge-accent-strong));
  font-size: .86rem;
  font-weight: 760;
  text-decoration: none;
}

body.design-subpage.abt.challenge-page .floating-top {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--d-line);
  border-radius: 50%;
  color: var(--d-ink);
  background: rgba(255, 253, 249, .9);
  box-shadow: var(--d-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
}

body.design-subpage.abt.challenge-page .floating-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page #challenge-hero {
  color: var(--challenge-ink-dark);
  background:
    radial-gradient(900px 620px at 76% 18%, rgba(220, 189, 147, .18), transparent 64%),
    radial-gradient(760px 520px at 12% 76%, rgba(184, 122, 66, .16), transparent 62%),
    linear-gradient(132deg, #080604 0%, #1f1710 54%, #060403 100%) !important;
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page #challenge-hero::before {
  background:
    radial-gradient(circle at 34% 42%, rgba(255, 248, 238, .18), transparent 28%),
    linear-gradient(150deg, rgba(255, 248, 238, .08), rgba(143, 85, 41, .3));
  opacity: .82;
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-breadcrumbs {
  color: rgba(255, 248, 238, .58);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page #challenge-hero .challenge-eyebrow {
  color: #e7c28f;
  border-color: rgba(255, 248, 238, .18);
  background: rgba(16, 11, 7, .5);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page #challenge-hero h1 {
  color: var(--challenge-ink-dark);
  text-shadow: 0 18px 46px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page #challenge-hero h1 span {
  color: #2b1e14;
  background: linear-gradient(135deg, #fff8ee, #e7c28f);
  box-shadow: 0 30px 70px -40px rgba(231, 194, 143, .72);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-lead {
  color: var(--challenge-muted-dark);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-btn--ghost {
  color: var(--challenge-ink-dark);
  border-color: var(--challenge-line-dark);
  background: rgba(255, 248, 238, .08);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-proof-strip span,
html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-hero__chips span {
  color: var(--challenge-muted-dark);
  border-color: var(--challenge-line-dark);
  background: rgba(255, 248, 238, .08);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-proof-strip b {
  color: var(--challenge-ink-dark);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-parallax-bg--hero-panel {
  border-color: rgba(255, 248, 238, .18);
  background:
    linear-gradient(135deg, rgba(255, 248, 238, .12), rgba(255, 248, 238, .02)),
    repeating-linear-gradient(90deg, rgba(255, 248, 238, .16) 0 1px, transparent 1px 62px);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-parallax-bg--hero-grid {
  background:
    linear-gradient(rgba(255, 248, 238, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 238, .12) 1px, transparent 1px);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-parallax-bg--hero-orbit {
  border-color: rgba(231, 194, 143, .34);
  box-shadow: inset 0 0 0 36px rgba(231, 194, 143, .055);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-float-note {
  color: #e7c28f;
  border-color: rgba(255, 248, 238, .2);
  background: rgba(16, 11, 7, .56);
  box-shadow: 0 18px 44px -30px rgba(0, 0, 0, .78);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-index,
html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-sticky {
  background: rgba(31, 25, 18, .9);
}

html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-parallax-bg--program-ribbon,
html[data-theme="dark"] body.design-subpage.abt.challenge-page .challenge-parallax-bg--price-sheet {
  background-color: rgba(31, 25, 18, .5);
}

@media (max-width: 1100px) {
  body.design-subpage.abt.challenge-page .challenge-days {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.design-subpage.abt.challenge-page .challenge-parallax-bg,
  body.design-subpage.abt.challenge-page .challenge-float-note {
    display: none;
  }

  body.design-subpage.abt.challenge-page .sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: block;
    pointer-events: none;
  }

  body.design-subpage.abt.challenge-page .sticky-cta .bar {
    pointer-events: auto;
  }

  body.design-subpage.abt.challenge-page #challenge-hero {
    min-height: auto;
  }

  body.design-subpage.abt.challenge-page .challenge-hero__inner {
    width: calc(100vw - 36px);
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 62px 0 120px;
    margin-left: 18px;
    margin-right: 18px;
  }

  body.design-subpage.abt.challenge-page .challenge-hero__copy {
    max-width: 100%;
    overflow: hidden;
  }

  body.design-subpage.abt.challenge-page #challenge-hero h1 {
    max-width: min(100%, 350px) !important;
    font-size: clamp(2.25rem, 9vw, 3rem) !important;
    line-height: .98;
  }

  body.design-subpage.abt.challenge-page .challenge-lead {
    max-width: min(100%, 340px) !important;
    font-size: 1rem;
  }

  body.design-subpage.abt.challenge-page .challenge-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 340px);
  }

  body.design-subpage.abt.challenge-page .challenge-proof-strip {
    grid-template-columns: 1fr;
    width: min(100%, 340px);
  }

  body.design-subpage.abt.challenge-page .challenge-proof-strip span {
    min-height: 0;
  }

  body.design-subpage.abt.challenge-page .challenge-hero__chips {
    width: min(100%, 340px);
  }

  body.design-subpage.abt.challenge-page .challenge-hero__chips span {
    flex: 1 1 calc(50% - 9px);
    justify-content: center;
    min-width: 0;
  }

  body.design-subpage.abt.challenge-page .challenge-hero-visual {
    min-height: 310px;
    border-radius: 24px;
  }

  body.design-subpage.abt.challenge-page .challenge-hero-visual__caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 14px;
  }

  body.design-subpage.abt.challenge-page .challenge-hero-visual__deal {
    top: 14px;
    right: 14px;
    min-width: 118px;
    padding: 12px 14px;
  }

  body.design-subpage.abt.challenge-page .challenge-hero-visual__deal strong {
    font-size: 1.55rem;
  }

  body.design-subpage.abt.challenge-page .challenge-hero-visual__bonus {
    display: none;
  }

  body.design-subpage.abt.challenge-page .challenge-main {
    width: min(calc(100% - 32px), var(--course-max));
  }

  body.design-subpage.abt.challenge-page .challenge-index {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 22px;
  }

  body.design-subpage.abt.challenge-page .challenge-index a {
    flex: 0 0 auto;
  }

  body.design-subpage.abt.challenge-page .challenge-section,
  body.design-subpage.abt.challenge-page .challenge-section--split,
  body.design-subpage.abt.challenge-page .challenge-section--pricing {
    display: block;
    padding: 52px 0;
  }

  body.design-subpage.abt.challenge-page .challenge-section__head h2,
  body.design-subpage.abt.challenge-page .challenge-price-copy h2 {
    max-width: min(100%, 350px) !important;
    font-size: clamp(2.35rem, 10vw, 3.1rem) !important;
    line-height: .96;
  }

  body.design-subpage.abt.challenge-page .challenge-result-grid,
  body.design-subpage.abt.challenge-page .challenge-format-grid,
  body.design-subpage.abt.challenge-page .challenge-days {
    grid-template-columns: 1fr;
  }

  body.design-subpage.abt.challenge-page .challenge-price-card {
    margin-top: 26px;
  }

  body.design-subpage.abt.challenge-page .challenge-day,
  body.design-subpage.abt.challenge-page .challenge-card {
    min-height: 0;
  }

  body.design-subpage.abt.challenge-page .floating-top {
    right: 16px;
    bottom: 92px;
  }
}

/* ============================================================
   Portfolio page
   ============================================================ */
body.design-subpage.abt.portfolio-page {
  --portfolio-max: 1200px;
  --portfolio-accent: #ab7f4e;
  --portfolio-accent-strong: #7a5028;
  --portfolio-hero-ink: #20150e;
  --portfolio-hero-muted: #6f5b48;
  --portfolio-hero-line: rgba(32, 21, 14, .12);
  --portfolio-hero-dark-ink: #fff8ee;
  --portfolio-hero-dark-muted: rgba(255, 248, 238, .72);
}

body.design-subpage.abt.portfolio-page .focus\:not-sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  width: auto;
  height: auto;
  padding: 10px 14px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: 999px;
  color: #fff;
  background: var(--d-ink);
}

body.design-subpage.abt.portfolio-page .portfolio-main {
  padding-bottom: clamp(70px, 9vw, 120px);
}

body.design-subpage.abt.portfolio-page #portfolio-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(600px, 72vh, 740px);
  overflow: hidden;
  color: var(--portfolio-hero-ink);
  background:
    radial-gradient(900px 620px at 82% 18%, rgba(171, 127, 78, .18), transparent 64%),
    radial-gradient(760px 520px at 12% 78%, rgba(220, 189, 147, .32), transparent 62%),
    linear-gradient(132deg, #fff8ee 0%, #f5eadb 52%, #ead9c6 100%) !important;
}

body.design-subpage.abt.portfolio-page #portfolio-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: max(48vw, 720px);
  height: 100%;
  border-radius: 0;
  background:
    radial-gradient(circle at 52% 42%, rgba(255, 248, 238, .22), transparent 28%),
    linear-gradient(150deg, rgba(32, 21, 14, .86), rgba(122, 80, 40, .68));
  clip-path: ellipse(78% 90% at 82% 50%);
  pointer-events: none;
}

body.design-subpage.abt.portfolio-page #portfolio-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 190px;
  background: linear-gradient(180deg, transparent, var(--d-bg));
  pointer-events: none;
}

body.design-subpage.abt.portfolio-page .portfolio-hero__inner {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(34px, 4vw, 64px);
  width: min(calc(100% - 56px), var(--portfolio-max));
  min-height: inherit;
  margin: 0 auto;
  padding: clamp(76px, 8vw, 124px) 0 clamp(112px, 10vw, 156px);
}

body.design-subpage.abt.portfolio-page .portfolio-hero__copy {
  display: grid;
  justify-items: start;
  max-width: 580px;
  text-align: left;
}

body.design-subpage.abt.portfolio-page .portfolio-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 14px;
  color: var(--portfolio-accent-strong);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.design-subpage.abt.portfolio-page #portfolio-hero .portfolio-kicker {
  padding: 9px 13px;
  border: 1px solid rgba(171, 127, 78, .22);
  border-radius: 999px;
  background: rgba(255, 253, 249, .62);
  box-shadow: 0 18px 42px -34px rgba(122, 80, 40, .6);
}

body.design-subpage.abt.portfolio-page #portfolio-hero h1,
body.design-subpage.abt.portfolio-page .portfolio-section__head h2,
body.design-subpage.abt.portfolio-page .portfolio-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
}

body.design-subpage.abt.portfolio-page #portfolio-hero h1 {
  max-width: 560px;
  color: var(--portfolio-hero-ink);
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: .98;
  letter-spacing: .004em;
  text-align: left;
  text-wrap: balance;
}

body.design-subpage.abt.portfolio-page #portfolio-hero p {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--portfolio-hero-muted);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.62;
}

body.design-subpage.abt.portfolio-page .portfolio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 14px 21px;
  border-radius: 999px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}

body.design-subpage.abt.portfolio-page .portfolio-btn:hover {
  transform: translateY(-2px);
}

body.design-subpage.abt.portfolio-page .portfolio-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--portfolio-accent), var(--portfolio-accent-strong)) !important;
  box-shadow: 0 24px 50px -24px rgba(122, 80, 40, .8);
}

body.design-subpage.abt.portfolio-page .portfolio-btn--ghost {
  color: var(--portfolio-hero-ink);
  border: 1px solid rgba(32, 21, 14, .16);
  background: rgba(255, 253, 249, .58);
  backdrop-filter: blur(16px);
}

body.design-subpage.abt.portfolio-page .portfolio-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 32px;
}

body.design-subpage.abt.portfolio-page .portfolio-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 24px 0 0;
}

body.design-subpage.abt.portfolio-page .portfolio-hero__stats div {
  padding: 15px 16px;
  border: 1px solid var(--portfolio-hero-line);
  border-radius: 18px;
  background: rgba(255, 253, 249, .62);
  text-align: center;
  box-shadow: 0 20px 48px -40px rgba(32, 21, 14, .5);
  backdrop-filter: blur(14px);
}

body.design-subpage.abt.portfolio-page .portfolio-hero__stats dt {
  color: var(--portfolio-accent-strong);
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: .9;
}

body.design-subpage.abt.portfolio-page .portfolio-hero__stats dd {
  margin: 6px 0 0;
  color: var(--portfolio-hero-muted);
  font-size: .84rem;
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board {
  position: relative;
  z-index: 3;
  min-height: clamp(430px, 45vw, 590px);
  width: min(100%, 720px);
  margin-left: auto;
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 248, 238, .22);
  border-radius: 30px;
  background: rgba(255, 248, 238, .08);
  box-shadow: 0 38px 90px -46px rgba(0, 0, 0, .82);
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--a {
  left: 0;
  top: 8%;
  width: 58%;
  height: 58%;
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--b {
  right: 0;
  top: 0;
  width: 46%;
  height: 47%;
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--c {
  right: 8%;
  bottom: 0;
  width: 62%;
  height: 46%;
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board__label {
  position: absolute;
  left: 7%;
  bottom: 8%;
  z-index: 5;
  display: grid;
  gap: 6px;
  max-width: 310px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 248, 238, .18);
  border-radius: 20px;
  color: var(--portfolio-hero-dark-ink);
  background: rgba(16, 11, 7, .74);
  backdrop-filter: blur(18px);
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board__label span {
  color: #e7c28f;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.design-subpage.abt.portfolio-page .portfolio-hero-board__label strong {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 500;
  line-height: 1;
}

body.design-subpage.abt.portfolio-page .portfolio-parallax-bg,
body.design-subpage.abt.portfolio-page .portfolio-float-note {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--grid {
  left: -6%;
  bottom: 6%;
  width: min(54vw, 760px);
  height: min(32vw, 440px);
  border-radius: 999px;
  opacity: .58;
  background:
    linear-gradient(rgba(122, 80, 40, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 80, 40, .13) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, #000 0%, transparent 66%);
}

body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--halo {
  right: 12%;
  top: 15%;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(122, 80, 40, .24);
  border-radius: 50%;
  box-shadow: inset 0 0 0 42px rgba(171, 127, 78, .075);
}

body.design-subpage.abt.portfolio-page .portfolio-float-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(122, 80, 40, .22);
  border-radius: 999px;
  color: var(--portfolio-accent-strong);
  background: rgba(255, 253, 249, .72);
  box-shadow: 0 18px 44px -30px rgba(122, 80, 40, .62);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

body.design-subpage.abt.portfolio-page .portfolio-float-note--styles {
  right: min(48vw, 720px);
  top: 22%;
}

body.design-subpage.abt.portfolio-page .portfolio-float-note--images {
  right: 7%;
  bottom: 19%;
}

body.design-subpage.abt.portfolio-page .portfolio-index {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: min(calc(100% - 32px), var(--portfolio-max));
  margin: -34px auto 28px;
  padding: 10px;
  border: 1px solid var(--d-line);
  border-radius: 999px;
  background: rgba(255, 253, 249, .86);
  box-shadow: var(--d-shadow);
  backdrop-filter: blur(18px);
}

body.design-subpage.abt.portfolio-page .portfolio-index a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border-radius: 999px;
  color: var(--d-ink);
  font-weight: 650;
  text-decoration: none;
}

body.design-subpage.abt.portfolio-page .portfolio-index a:hover {
  color: #fff;
  background: var(--d-ink);
}

body.design-subpage.abt.portfolio-page .portfolio-section,
body.design-subpage.abt.portfolio-page .portfolio-cta {
  width: min(calc(100% - 56px), var(--portfolio-max));
  margin: 0 auto;
  padding: clamp(64px, 7.5vw, 108px) 0;
}

body.design-subpage.abt.portfolio-page .portfolio-section__head {
  max-width: 760px;
  margin: 0 auto clamp(26px, 4vw, 44px);
  text-align: center;
}

body.design-subpage.abt.portfolio-page .portfolio-section__head .portfolio-kicker {
  margin-left: auto;
  margin-right: auto;
}

body.design-subpage.abt.portfolio-page .portfolio-section__head h2,
body.design-subpage.abt.portfolio-page .portfolio-cta h2 {
  color: var(--d-ink);
  font-size: clamp(2.35rem, 4.4vw, 4.2rem);
  line-height: .96;
}

body.design-subpage.abt.portfolio-page .portfolio-section__head p,
body.design-subpage.abt.portfolio-page .portfolio-cta p {
  max-width: 650px;
  margin: 18px auto 0;
  color: var(--d-muted);
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.62;
}

body.design-subpage.abt.portfolio-page .portfolio-style-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(240px, 22vw);
  grid-auto-flow: dense;
  gap: 16px;
}

body.design-subpage.abt.portfolio-page .portfolio-style-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 240px;
  padding: 22px;
  border: 1px solid var(--d-line);
  border-radius: 28px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--d-shadow);
}

body.design-subpage.abt.portfolio-page .portfolio-style-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 30%, rgba(16, 11, 7, .86)),
    linear-gradient(90deg, rgba(16, 11, 7, .42), transparent 62%);
}

body.design-subpage.abt.portfolio-page .portfolio-style-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

body.design-subpage.abt.portfolio-page .portfolio-style-card:hover img {
  transform: scale(1.06);
}

body.design-subpage.abt.portfolio-page .portfolio-style-card > span,
body.design-subpage.abt.portfolio-page .portfolio-style-card h3,
body.design-subpage.abt.portfolio-page .portfolio-style-card p {
  position: relative;
  z-index: 2;
}

body.design-subpage.abt.portfolio-page .portfolio-style-card > span {
  color: #e7c28f;
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1;
}

body.design-subpage.abt.portfolio-page .portfolio-style-card h3 {
  margin: 10px 0 0;
  color: #fff;
  font-size: 1.12rem;
}

body.design-subpage.abt.portfolio-page .portfolio-style-card p {
  margin: 7px 0 0;
  color: rgba(255, 248, 238, .78);
}

body.design-subpage.abt.portfolio-page .portfolio-style-card--tall {
  grid-row: span 2;
}

body.design-subpage.abt.portfolio-page .portfolio-style-card--wide {
  grid-column: span 2;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio {
  width: min(calc(100% - 56px), var(--portfolio-max));
  padding-top: clamp(70px, 8vw, 116px);
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .portfolio-section__head {
  margin-left: auto;
  margin-right: auto;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  margin: clamp(40px, 5.4vw, 74px) auto 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll + .design-style-scroll {
  padding-top: clamp(38px, 5vw, 70px);
  border-top: 1px solid rgba(171, 127, 78, .18) !important;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__copy {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__copy .design-card-label {
  display: inline-flex;
  margin: 0 auto 10px;
  color: var(--portfolio-accent);
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: .9;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__copy h3 {
  margin: 0;
  color: var(--d-ink);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.3vw, 3.05rem);
  font-weight: 500;
  line-height: .95;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__copy p {
  margin: 12px auto 0;
  max-width: 460px;
  color: var(--d-muted);
  line-height: 1.58;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage {
  position: relative;
  display: flex;
  gap: 16px;
  width: 100vw;
  min-height: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px max(28px, calc((100vw - var(--portfolio-max)) / 2)) 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(171, 127, 78, .44) rgba(171, 127, 78, .12);
  -webkit-overflow-scrolling: touch;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage::after {
  content: "";
  flex: 0 0 1px;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage::-webkit-scrollbar {
  height: 8px;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(171, 127, 78, .12);
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(171, 127, 78, .44);
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--wide,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--right,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--left,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--small,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--bottom,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--tall,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--center {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 clamp(220px, 24vw, 340px);
  width: auto !important;
  height: clamp(238px, 27vw, 360px) !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid var(--d-line);
  border-radius: 24px;
  background: var(--d-bg-warm);
  scroll-snap-align: center;
  transform: none !important;
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--wide {
  flex-basis: clamp(280px, 32vw, 460px);
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--tall {
  flex-basis: clamp(200px, 21vw, 300px);
}

body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.design-subpage.abt.portfolio-page .portfolio-route {
  text-align: center;
}

body.design-subpage.abt.portfolio-page .portfolio-route__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.design-subpage.abt.portfolio-page .portfolio-route__list li {
  display: grid;
  justify-items: center;
  padding: 26px;
  border: 1px solid var(--d-line);
  border-radius: 24px;
  background: var(--d-surface);
  box-shadow: var(--d-shadow);
  text-align: center;
}

body.design-subpage.abt.portfolio-page .portfolio-route__list span {
  color: var(--portfolio-accent);
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: .9;
}

body.design-subpage.abt.portfolio-page .portfolio-route__list strong {
  display: block;
  margin-top: 22px;
  color: var(--d-ink);
  font-size: 1.1rem;
}

body.design-subpage.abt.portfolio-page .portfolio-route__list p {
  margin: 10px 0 0;
  color: var(--d-muted);
  line-height: 1.58;
}

body.design-subpage.abt.portfolio-page .portfolio-noscript {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: min(calc(100% - 56px), var(--portfolio-max));
  margin: 0 auto;
}

body.design-subpage.abt.portfolio-page .portfolio-noscript img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
}

body.design-subpage.abt.portfolio-page .portfolio-cta {
  position: relative;
  overflow: hidden;
  margin-top: clamp(28px, 4vw, 58px);
  padding: clamp(44px, 6vw, 74px);
  border: 1px solid var(--d-line);
  border-radius: 34px;
  background:
    radial-gradient(620px 340px at 80% 8%, rgba(171, 127, 78, .18), transparent 64%),
    var(--d-surface);
  box-shadow: var(--d-shadow);
  text-align: center;
}

body.design-subpage.abt.portfolio-page .portfolio-cta .portfolio-kicker {
  margin-left: auto;
  margin-right: auto;
}

body.design-subpage.abt.portfolio-page .portfolio-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

body.design-subpage.abt.portfolio-page .portfolio-cta .portfolio-btn--ghost {
  color: var(--d-ink);
  border-color: var(--d-line);
  background: transparent;
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page #portfolio-hero {
  color: var(--portfolio-hero-dark-ink);
  background:
    radial-gradient(900px 620px at 78% 18%, rgba(220, 189, 147, .2), transparent 64%),
    radial-gradient(760px 520px at 12% 78%, rgba(171, 127, 78, .16), transparent 62%),
    linear-gradient(132deg, #0e0a07 0%, #2a2016 55%, #090705 100%) !important;
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page #portfolio-hero::before {
  background:
    radial-gradient(circle at 36% 42%, rgba(255, 248, 238, .16), transparent 28%),
    linear-gradient(150deg, rgba(255, 248, 238, .08), rgba(122, 80, 40, .3));
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page #portfolio-hero .portfolio-kicker {
  color: #e7c28f;
  border-color: rgba(255, 248, 238, .18);
  background: rgba(16, 11, 7, .5);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page #portfolio-hero h1 {
  color: var(--portfolio-hero-dark-ink);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page #portfolio-hero p {
  color: var(--portfolio-hero-dark-muted);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-btn--ghost {
  color: var(--portfolio-hero-dark-ink);
  border-color: rgba(255, 248, 238, .2);
  background: rgba(255, 248, 238, .08);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-hero__stats div {
  border-color: rgba(255, 248, 238, .16);
  background: rgba(255, 248, 238, .075);
  box-shadow: none;
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-hero__stats dt {
  color: #e7c28f;
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-hero__stats dd {
  color: var(--portfolio-hero-dark-muted);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--grid {
  background:
    linear-gradient(rgba(255, 248, 238, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 248, 238, .13) 1px, transparent 1px);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--halo {
  border-color: rgba(231, 194, 143, .32);
  box-shadow: inset 0 0 0 42px rgba(231, 194, 143, .06);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-float-note {
  color: #e7c28f;
  border-color: rgba(255, 248, 238, .2);
  background: rgba(16, 11, 7, .58);
  box-shadow: 0 18px 44px -30px rgba(0, 0, 0, .78);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-index {
  background: rgba(31, 25, 18, .9);
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page .portfolio-cta {
  background:
    radial-gradient(620px 340px at 80% 8%, rgba(220, 189, 147, .16), transparent 64%),
    var(--d-surface);
}

@media (max-width: 1100px) {
  body.design-subpage.abt.shop-page .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.design-subpage.abt.shop-page .shop-product--featured {
    grid-column: span 1;
  }

  body.design-subpage.abt.portfolio-page .portfolio-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.design-subpage.abt.portfolio-page .portfolio-parallax-bg,
  body.design-subpage.abt.portfolio-page .portfolio-float-note {
    display: none;
  }

  body.design-subpage.abt.portfolio-page #portfolio-hero {
    min-height: auto;
  }

  body.design-subpage.abt.portfolio-page .portfolio-hero__inner {
    width: calc(100vw - 36px);
    grid-template-columns: 1fr;
    gap: 28px;
    margin-left: 18px;
    margin-right: 18px;
    padding: 64px 0 122px;
  }

  body.design-subpage.abt.portfolio-page #portfolio-hero h1 {
    max-width: min(100%, 360px);
    font-size: clamp(2.25rem, 9vw, 3rem);
    line-height: .98;
  }

  body.design-subpage.abt.portfolio-page #portfolio-hero p {
    max-width: min(100%, 350px);
    font-size: 1rem;
  }

  body.design-subpage.abt.portfolio-page .portfolio-hero__actions {
    display: grid;
    width: min(100%, 350px);
  }

  body.design-subpage.abt.portfolio-page .portfolio-hero__stats {
    grid-template-columns: 1fr;
    width: min(100%, 350px);
  }

  body.design-subpage.abt.portfolio-page .portfolio-hero-board {
    min-height: 360px;
  }

  body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--a {
    width: 62%;
    height: 55%;
  }

  body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--b {
    width: 48%;
    height: 43%;
  }

  body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--c {
    width: 66%;
    height: 42%;
  }

  body.design-subpage.abt.portfolio-page .portfolio-hero-board__label {
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: none;
  }

  body.design-subpage.abt.portfolio-page .portfolio-index {
    width: min(calc(100% - 32px), var(--portfolio-max));
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 22px;
  }

  body.design-subpage.abt.portfolio-page .portfolio-index a {
    flex: 0 0 auto;
  }

  body.design-subpage.abt.portfolio-page .portfolio-section,
  body.design-subpage.abt.portfolio-page .portfolio-cta {
    width: min(calc(100% - 32px), var(--portfolio-max));
    padding: 52px 0;
  }

  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio {
    width: min(calc(100% - 32px), var(--portfolio-max));
  }

  body.design-subpage.abt.portfolio-page .portfolio-section__head h2,
  body.design-subpage.abt.portfolio-page .portfolio-cta h2 {
    max-width: min(100%, 360px);
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2rem, 8.8vw, 2.65rem);
    line-height: .96;
  }

  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll {
    padding: 0;
    border-radius: 0;
  }

  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage {
    gap: 12px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 2px 16px 18px;
  }

  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot,
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--wide,
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--right,
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--left,
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--small,
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--bottom,
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--tall,
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--center {
    flex-basis: min(76vw, 290px);
    height: min(82vw, 330px) !important;
    border-radius: 18px;
  }

  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--wide {
    flex-basis: min(84vw, 330px);
  }

  body.design-subpage.abt.portfolio-page .portfolio-style-grid,
  body.design-subpage.abt.portfolio-page .portfolio-route__list,
  body.design-subpage.abt.portfolio-page .portfolio-noscript {
    grid-template-columns: 1fr;
  }

  body.design-subpage.abt.portfolio-page .portfolio-style-card--tall,
  body.design-subpage.abt.portfolio-page .portfolio-style-card--wide {
    grid-row: auto;
    grid-column: auto;
  }

  body.design-subpage.abt.portfolio-page .portfolio-cta {
    padding: 34px 22px;
    border-radius: 24px;
  }

  body.design-subpage.abt.portfolio-page .portfolio-cta__actions {
    display: grid;
  }
}

/* ============================================================
   Portfolio — refinement pass (2026-06):
   readability fix + interactive, viewable works (lightbox)
   ============================================================ */

/* Fix: on phones the decorative dark ellipse (#portfolio-hero::before)
   bled the full width behind the hero copy, turning the dark paragraph
   text into dark-on-dark and making it unreadable. Drop it ≤900px so the
   copy always sits on the light gradient. */
@media (max-width: 900px) {
  body.design-subpage.abt.portfolio-page #portfolio-hero::before {
    display: none;
  }
  body.design-subpage.abt.portfolio-page #portfolio-hero h1,
  body.design-subpage.abt.portfolio-page #portfolio-hero p {
    max-width: 100%;
  }
}

html[data-theme="dark"] body.design-subpage.abt.portfolio-page #portfolio-hero::after {
  background: linear-gradient(180deg, transparent, var(--d-bg));
}

/* --- Style-grid cards: clearer "this is a link" affordance + a softer,
   better-graded overlay so the interior photo reads while labels stay crisp. --- */
body.design-subpage.abt.portfolio-page .portfolio-style-card {
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
body.design-subpage.abt.portfolio-page .portfolio-style-card::after {
  background:
    linear-gradient(180deg, rgba(16, 11, 7, 0) 6%, rgba(16, 11, 7, .34) 40%, rgba(16, 11, 7, .74) 70%, rgba(16, 11, 7, .95) 100%),
    linear-gradient(90deg, rgba(16, 11, 7, .3), transparent 62%);
}

/* Guarantee the labels stay legible over any photo (bright interiors too).
   A global heading/text rule was repainting these dark (dark-on-dark) — pin
   them light here, in the last-loaded sheet. */
body.design-subpage.abt.portfolio-page .portfolio-style-card > span {
  color: #f0cd98 !important;
}
body.design-subpage.abt.portfolio-page .portfolio-style-card h3 {
  color: #fff !important;
}
body.design-subpage.abt.portfolio-page .portfolio-style-card p {
  color: rgba(255, 248, 238, .9) !important;
}
body.design-subpage.abt.portfolio-page .portfolio-style-card > span,
body.design-subpage.abt.portfolio-page .portfolio-style-card h3,
body.design-subpage.abt.portfolio-page .portfolio-style-card p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 6px 22px rgba(0, 0, 0, .55);
}
body.design-subpage.abt.portfolio-page .portfolio-style-card:hover,
body.design-subpage.abt.portfolio-page .portfolio-style-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(171, 127, 78, .55);
  box-shadow: 0 34px 60px -34px rgba(32, 21, 14, .62);
}
body.design-subpage.abt.portfolio-page .portfolio-style-card:focus-visible {
  outline: 2px solid var(--portfolio-accent);
  outline-offset: 3px;
}
body.design-subpage.abt.portfolio-page .portfolio-style-card h3::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  margin-left: 9px;
  font-size: .68em;
  transform: translateX(-4px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
body.design-subpage.abt.portfolio-page .portfolio-style-card:hover h3::after,
body.design-subpage.abt.portfolio-page .portfolio-style-card:focus-visible h3::after {
  transform: translateX(0);
  opacity: .92;
}

/* --- Gallery shots become "open full image" targets --- */
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot {
  cursor: zoom-in;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot img {
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:hover,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(171, 127, 78, .5);
  box-shadow: 0 36px 64px -34px rgba(32, 21, 14, .6);
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:hover img {
  transform: scale(1.06);
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:focus-visible {
  outline: 2px solid var(--portfolio-accent);
  outline-offset: 3px;
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot::after {
  content: "\f00e"; /* fa-magnifying-glass-plus */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(16, 11, 7, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .92rem;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:hover::after,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

/* --- Lightbox --- */
.pf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(12, 8, 5, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}
.pf-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.pf-lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(.96);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.pf-lightbox.is-open .pf-lightbox__figure { transform: scale(1); }
.pf-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .85);
}
.pf-lightbox__cap {
  margin: 0;
  color: rgba(255, 248, 238, .86);
  font-size: .92rem;
  letter-spacing: .01em;
  text-align: center;
}
.pf-lightbox__btn,
.pf-lightbox__close {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 238, .22);
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 14, 9, .55);
  cursor: pointer;
  font-size: 1.05rem;
  transition: background .2s ease, transform .2s ease;
}
.pf-lightbox__btn {
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
}
.pf-lightbox__btn:hover { background: rgba(122, 80, 40, .85); }
.pf-lightbox__btn--prev { left: clamp(8px, 2vw, 28px); }
.pf-lightbox__btn--next { right: clamp(8px, 2vw, 28px); }
.pf-lightbox__close {
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 46px;
  height: 46px;
}
.pf-lightbox__close:hover { background: rgba(122, 80, 40, .85); }
body.pf-lightbox-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .pf-lightbox,
  .pf-lightbox__figure { transition: none; }
}
@media (max-width: 640px) {
  .pf-lightbox__btn { width: 44px; height: 44px; }
  .pf-lightbox__img { max-height: calc(100vh - 120px); }
}

/* ============================================================
   Portfolio — layout pass (2026-06):
   "В движении" becomes a tidy grid (no horizontal overflow);
   hero collage is layered cleanly with the label below the photos.
   ============================================================ */

/* --- Gallery: from a horizontal scroll strip to a responsive grid.
   Everything fits on screen, nothing is cut off or scrolls sideways. --- */
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  grid-auto-flow: dense;
  gap: 16px;
  width: auto !important;
  margin: 0 !important;
  padding: 4px 0 6px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage::after {
  display: none !important;
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--wide,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--right,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--left,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--small,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--bottom,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--tall,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--center {
  flex: none !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  scroll-snap-align: none !important;
}
/* A little editorial rhythm: the lead shot of each style spans two columns. */
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}
@media (max-width: 560px) {
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-style-scroll__stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--wide {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
}

/* --- Hero collage: keep the layered look, but the caption now sits in its
   own plate below the photos instead of on top of one. --- */
body.design-subpage.abt.portfolio-page .portfolio-hero-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
body.design-subpage.abt.portfolio-page .portfolio-hero-board__stack {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(330px, 38vw, 470px);
}
/* gentler overlap so the cards read as layers, not a pile */
body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--a {
  left: 0; top: 0; width: 55%; height: 56%;
}
body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--b {
  right: 0; top: 7%; width: 43%; height: 45%;
}
body.design-subpage.abt.portfolio-page .portfolio-hero-board__shot--c {
  right: 5%; bottom: 0; width: 58%; height: 47%;
}
body.design-subpage.abt.portfolio-page .portfolio-hero-board__label {
  position: static;
  max-width: none;
  width: auto;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  body.design-subpage.abt.portfolio-page .portfolio-hero-board__stack {
    min-height: 300px;
  }
  body.design-subpage.abt.portfolio-page .portfolio-hero-board__label {
    left: auto; right: auto; bottom: auto;
  }
}

/* ============================================================
   Compact rhythm tuning for design subpages.
   Reduces oversized section typography and vertical gaps globally.
   ============================================================ */
body.design-subpage.abt:not(.shop-page):not(.portfolio-page) main > .grid {
  padding-top: clamp(46px, 6vw, 78px) !important;
  padding-bottom: clamp(60px, 7vw, 96px) !important;
}

body.design-subpage.abt:not(.shop-page):not(.portfolio-page) main .space-y-16 > section,
body.design-subpage.abt.sketchup-page main .space-y-16 > section,
body.design-subpage.abt.challenge-page .challenge-section,
body.design-subpage.abt.challenge-page .challenge-section--split,
body.design-subpage.abt.challenge-page .challenge-section--pricing,
body.design-subpage.abt.portfolio-page .portfolio-section,
body.design-subpage.abt.portfolio-page .portfolio-cta {
  padding-top: clamp(44px, 5.8vw, 76px) !important;
  padding-bottom: clamp(44px, 5.8vw, 76px) !important;
}

body.design-subpage.abt main section > h2,
body.design-subpage.abt #program > h2,
body.design-subpage.abt.challenge-page .challenge-section__head h2,
body.design-subpage.abt.challenge-page .challenge-price-copy h2,
body.design-subpage.abt.portfolio-page .portfolio-section__head h2,
body.design-subpage.abt.portfolio-page .portfolio-cta h2,
body.design-subpage.abt.shop-page .shop-section__head .abt-display,
body.design-subpage.abt.shop-page .shop-final .abt-display {
  font-size: clamp(1.9rem, 3.4vw, 3.15rem) !important;
  line-height: 1.06 !important;
}

body.design-subpage.abt #hero h1,
body.design-subpage.abt.sketchup-page #sketchup-hero h1,
body.design-subpage.abt.challenge-page #challenge-hero h1,
body.design-subpage.abt.portfolio-page #portfolio-hero h1,
body.design-subpage.abt.shop-page .shop-hero .abt-display {
  font-size: clamp(2.25rem, 5vw, 4.25rem) !important;
  line-height: 1 !important;
}

body.design-subpage.abt main section > p,
body.design-subpage.abt.challenge-page .challenge-section__head p,
body.design-subpage.abt.challenge-page .challenge-price-copy p,
body.design-subpage.abt.portfolio-page .portfolio-section__head p,
body.design-subpage.abt.portfolio-page .portfolio-cta p,
body.design-subpage.abt.shop-page .shop-lead {
  font-size: .98rem !important;
  line-height: 1.58 !important;
}

body.design-subpage.abt main section .bg-white,
body.design-subpage.abt main section .rounded-xl,
body.design-subpage.abt main section .rounded-2xl,
body.design-subpage.abt main section .border,
body.design-subpage.abt.challenge-page .challenge-card,
body.design-subpage.abt.challenge-page .challenge-price-card,
body.design-subpage.abt.portfolio-page .portfolio-style-card,
body.design-subpage.abt.shop-page .shop-product,
body.design-subpage.abt.shop-page .shop-steps article {
  border-radius: 18px !important;
}

body.design-subpage.abt main section .bg-white,
body.design-subpage.abt main section .rounded-xl,
body.design-subpage.abt main section .rounded-2xl,
body.design-subpage.abt.challenge-page .challenge-card,
body.design-subpage.abt.challenge-page .challenge-price-card,
body.design-subpage.abt.shop-page .shop-product__body,
body.design-subpage.abt.shop-page .shop-steps article {
  padding: 22px !important;
}

body.design-subpage.abt.shop-page .shop-section {
  padding-top: clamp(44px, 5.8vw, 76px) !important;
  padding-bottom: clamp(44px, 5.8vw, 76px) !important;
}

body.design-subpage.abt.shop-page .shop-hero {
  padding-top: clamp(46px, 6vw, 84px) !important;
  padding-bottom: 44px !important;
}

body.design-subpage.abt #hero > .mx-auto,
body.design-subpage.abt.sketchup-page #sketchup-hero > .relative,
body.design-subpage.abt.challenge-page .challenge-hero__inner,
body.design-subpage.abt.portfolio-page .portfolio-hero__inner,
body.design-subpage.abt.shop-page .shop-hero__grid {
  width: min(var(--course-max), calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

body.design-subpage.abt #hero .order-1,
body.design-subpage.abt.sketchup-page #sketchup-hero .max-w-4xl,
body.design-subpage.abt.challenge-page .challenge-hero__copy,
body.design-subpage.abt.portfolio-page .portfolio-hero__copy,
body.design-subpage.abt.shop-page .shop-hero__copy {
  max-width: 650px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  justify-items: start;
}

body.design-subpage.abt #hero h1,
body.design-subpage.abt.sketchup-page #sketchup-hero h1,
body.design-subpage.abt.challenge-page #challenge-hero h1,
body.design-subpage.abt.portfolio-page #portfolio-hero h1,
body.design-subpage.abt.shop-page .shop-hero .abt-display {
  max-width: 650px !important;
  margin-left: 0;
  margin-right: 0;
  text-align: left !important;
}

body.design-subpage.abt.shop-page .shop-lead {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.design-subpage.abt.shop-page .shop-hero__actions {
  justify-content: flex-start !important;
}

body.design-subpage.abt.shop-page .shop-stats {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Unified first-screen vertical level across design subpages. */
body.design-subpage.abt #hero,
body.design-subpage.abt.sketchup-page #sketchup-hero,
body.design-subpage.abt.challenge-page #challenge-hero,
body.design-subpage.abt.portfolio-page #portfolio-hero,
body.design-subpage.abt.shop-page .shop-hero {
  min-height: clamp(620px, 74vh, 720px) !important;
}

body.design-subpage.abt.shop-page .shop-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.design-subpage.abt #hero > .mx-auto,
body.design-subpage.abt.sketchup-page #sketchup-hero > .relative,
body.design-subpage.abt.challenge-page .challenge-hero__inner,
body.design-subpage.abt.portfolio-page .portfolio-hero__inner,
body.design-subpage.abt.shop-page .shop-hero__grid {
  min-height: clamp(560px, 68vh, 660px) !important;
  padding-top: clamp(92px, 11vh, 116px) !important;
  padding-bottom: clamp(72px, 9vh, 104px) !important;
  align-items: start !important;
  box-sizing: border-box;
}

body.design-subpage.abt #hero .order-2,
body.design-subpage.abt.sketchup-page .sketchup-hero-visual,
body.design-subpage.abt.challenge-page .challenge-hero-visual,
body.design-subpage.abt.portfolio-page .portfolio-hero-board,
body.design-subpage.abt.shop-page .shop-hero__showcase {
  align-self: center !important;
}

/* Unified first-screen rhythm across design subpages. */
body.design-subpage.abt #hero .order-1,
body.design-subpage.abt.sketchup-page #sketchup-hero .space-y-4,
body.design-subpage.abt.challenge-page .challenge-hero__copy,
body.design-subpage.abt.portfolio-page .portfolio-hero__copy,
body.design-subpage.abt.shop-page .shop-hero__copy {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0 !important;
}

body.design-subpage.abt.challenge-page .challenge-breadcrumbs {
  display: none !important;
}

body.design-subpage.abt #hero .ph-badge,
body.design-subpage.abt.sketchup-page #sketchup-hero p:first-child,
body.design-subpage.abt.challenge-page #challenge-hero .challenge-eyebrow,
body.design-subpage.abt.portfolio-page #portfolio-hero .portfolio-kicker,
body.design-subpage.abt.shop-page .shop-hero .abt-eyebrow {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  margin: 0 0 16px !important;
  padding: 9px 13px !important;
  border: 1px solid rgba(230, 199, 157, .24) !important;
  border-radius: 999px !important;
  color: #e6c79d !important;
  background: rgba(255, 248, 238, .08) !important;
  box-shadow: none !important;
  font-family: var(--font-sans);
  font-size: .74rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}

body.design-subpage.abt.shop-page .shop-hero .abt-eyebrow,
body.design-subpage.abt.challenge-page #challenge-hero .challenge-eyebrow,
body.design-subpage.abt.portfolio-page #portfolio-hero .portfolio-kicker {
  color: var(--d-accent) !important;
  border-color: rgba(171, 127, 78, .22) !important;
  background: rgba(255, 253, 249, .62) !important;
}

body.design-subpage.abt #hero h1,
body.design-subpage.abt.sketchup-page #sketchup-hero h1,
body.design-subpage.abt.challenge-page #challenge-hero h1,
body.design-subpage.abt.portfolio-page #portfolio-hero h1,
body.design-subpage.abt.shop-page .shop-hero .abt-display {
  margin: 0 !important;
}

body.design-subpage.abt #hero h1 + p,
body.design-subpage.abt.sketchup-page #sketchup-hero h1 + p,
body.design-subpage.abt.challenge-page .challenge-lead,
body.design-subpage.abt.portfolio-page #portfolio-hero h1 + p,
body.design-subpage.abt.shop-page .shop-lead {
  max-width: 610px !important;
  margin: 22px 0 0 !important;
  font-size: clamp(1rem, 1.28vw, 1.12rem) !important;
  line-height: 1.58 !important;
}

body.design-subpage.abt #hero h1 + p + .mt-7.flex,
body.design-subpage.abt.sketchup-page #sketchup-hero h1 + p + .mt-6.flex,
body.design-subpage.abt.challenge-page .challenge-actions,
body.design-subpage.abt.portfolio-page .portfolio-hero__actions,
body.design-subpage.abt.shop-page .shop-hero__actions {
  margin-top: 28px !important;
}

body.design-subpage.abt #hero .trust-row,
body.design-subpage.abt.sketchup-page #sketchup-hero h1 + p + .mt-6.flex + .mt-6.flex,
body.design-subpage.abt.challenge-page .challenge-proof-strip,
body.design-subpage.abt.portfolio-page .portfolio-hero__stats,
body.design-subpage.abt.shop-page .shop-stats {
  width: min(100%, 610px) !important;
  max-width: 610px !important;
  margin: 22px 0 0 !important;
}

body.design-subpage.abt #hero .trust-row span,
body.design-subpage.abt.sketchup-page #sketchup-hero h1 + p + .mt-6.flex + .mt-6.flex span,
body.design-subpage.abt.challenge-page .challenge-proof-strip span,
body.design-subpage.abt.portfolio-page .portfolio-hero__stats div,
body.design-subpage.abt.shop-page .shop-stats div {
  min-height: 0 !important;
  padding: 11px 13px !important;
  border-radius: 16px !important;
  font-size: .82rem !important;
  line-height: 1.28 !important;
}

body.design-subpage.abt.challenge-page .challenge-hero__chips {
  display: none !important;
}

@media (max-width: 720px) {
  body.design-subpage.abt #hero,
  body.design-subpage.abt.sketchup-page #sketchup-hero,
  body.design-subpage.abt.challenge-page #challenge-hero,
  body.design-subpage.abt.portfolio-page #portfolio-hero,
  body.design-subpage.abt.shop-page .shop-hero {
    min-height: auto !important;
  }

  body.design-subpage.abt #hero > .mx-auto,
  body.design-subpage.abt.sketchup-page #sketchup-hero > .relative,
  body.design-subpage.abt.challenge-page .challenge-hero__inner,
  body.design-subpage.abt.portfolio-page .portfolio-hero__inner,
  body.design-subpage.abt.shop-page .shop-hero__grid {
    min-height: auto !important;
    padding-top: 56px !important;
    padding-bottom: 86px !important;
    align-items: start !important;
  }

  body.design-subpage.abt main section > h2,
  body.design-subpage.abt #program > h2,
  body.design-subpage.abt.challenge-page .challenge-section__head h2,
  body.design-subpage.abt.challenge-page .challenge-price-copy h2,
  body.design-subpage.abt.portfolio-page .portfolio-section__head h2,
  body.design-subpage.abt.portfolio-page .portfolio-cta h2,
  body.design-subpage.abt.shop-page .shop-section__head .abt-display,
  body.design-subpage.abt.shop-page .shop-final .abt-display {
    font-size: clamp(1.75rem, 8vw, 2.35rem) !important;
  }

  body.design-subpage.abt #hero h1,
  body.design-subpage.abt.sketchup-page #sketchup-hero h1,
  body.design-subpage.abt.challenge-page #challenge-hero h1,
  body.design-subpage.abt.portfolio-page #portfolio-hero h1,
  body.design-subpage.abt.shop-page .shop-hero .abt-display {
    font-size: clamp(2rem, 9vw, 2.85rem) !important;
  }

  body.design-subpage.abt.shop-page .shop-hero__copy {
    max-width: 100% !important;
    overflow: hidden;
  }

  body.design-subpage.abt.shop-page .shop-hero .abt-display {
    max-width: min(100%, 340px) !important;
    margin-left: 0;
    margin-right: 0;
  }

  body.design-subpage.abt.shop-page .shop-lead {
    max-width: min(100%, 320px) !important;
  }

  body.design-subpage.abt.shop-page .shop-hero__actions {
    width: min(100%, 320px);
    margin-left: 0;
    margin-right: auto;
    justify-content: stretch !important;
  }

  body.design-subpage.abt #hero .ph-badge,
  body.design-subpage.abt.sketchup-page #sketchup-hero p:first-child,
  body.design-subpage.abt.challenge-page #challenge-hero .challenge-eyebrow,
  body.design-subpage.abt.portfolio-page #portfolio-hero .portfolio-kicker,
  body.design-subpage.abt.shop-page .shop-hero .abt-eyebrow {
    min-height: 30px;
    margin-bottom: 13px !important;
    padding: 8px 11px !important;
    font-size: .68rem !important;
  }

  body.design-subpage.abt #hero h1 + p,
  body.design-subpage.abt.sketchup-page #sketchup-hero h1 + p,
  body.design-subpage.abt.challenge-page .challenge-lead,
  body.design-subpage.abt.portfolio-page #portfolio-hero h1 + p,
  body.design-subpage.abt.shop-page .shop-lead {
    max-width: min(100%, 320px) !important;
    margin-top: 18px !important;
  }
}

/* ============================================================
   Portfolio — parallax pass (2026-06):
   "В движении" was renamed to a parallax section in the nav, but the
   grid rebuild froze the shots (transform:none!important above), so the
   section called "Параллакс" had no motion at all. Moving the grid CELLS
   broke the layout, so instead we move the IMAGE INSIDE each fixed frame:
   the photo gently drifts within its clipped card as the scene scrolls.
   Layout never shifts, nothing overlaps, and every card reads as a small
   living window. Driven by --parallax-progress (0..1 across the scene),
   which app.js already publishes on each shot. We use the individual
   `translate`/`scale` properties so the scroll drift (translate, instant)
   and the hover zoom (scale, eased) never fight over `transform`.
   ============================================================ */

/* Per-shot drift amount + direction — a big travel so the motion clearly
   reads as parallax, and opposite signs so neighbours move against each
   other (the layered, "alive" feel). Travel range = ±drift/2. */
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot { --drift: 78px; }
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--wide   { --drift: -56px; }
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--right  { --drift: -84px; }
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--left   { --drift: 72px; }
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--small  { --drift: 88px; }
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--bottom { --drift: -64px; }
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--tall   { --drift: 80px; }
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot--center  { --drift: -82px; }

/* The frame stays put; the photo is oversized (scale) so it can travel a
   long way without ever revealing an edge, and it slides on scroll via
   --parallax-progress. scale 1.44 => ~22% overflow each side, comfortably
   covering the ±44px max travel even on the shortest grid frames. */
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot img {
  translate: 0 calc((var(--parallax-progress, .5) - .5) * var(--drift, 78px));
  scale: 1.44;
  transition: scale .55s cubic-bezier(.2, .7, .2, 1);
  will-change: translate;
}

/* Bring the hover lift back (the resting transform:none!important above had
   been suppressing it) and pair it with an eased zoom on the drifting photo. */
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:hover,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:focus-visible {
  transform: translateY(-7px) !important;
}
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:hover img,
body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:focus-visible img {
  transform: none;
  scale: 1.54;
}

/* Respect reduced motion: hold the photo still and un-crop it. */
@media (prefers-reduced-motion: reduce) {
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot img {
    translate: 0 !important;
    scale: 1 !important;
  }
}

/* ============================================================
   Portfolio — "Найдите своё настроение" tidy pass (2026-06):
   the 5-col dense grid with a tall + a wide card left a big empty
   hole (bottom-right) and the per-card parallax tilted/offset every
   card so nothing lined up. This is a quick-pick MENU, not a showcase
   (the real parallax lives in the gallery below), so make it a crisp,
   evenly-aligned row of equal portrait tiles. Parallax attrs were also
   removed from these cards in the HTML.
   ============================================================ */
body.design-subpage.abt.portfolio-page .portfolio-style-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 18px;
}
/* No more row/column spans — every tile is the same size. */
body.design-subpage.abt.portfolio-page .portfolio-style-card--tall,
body.design-subpage.abt.portfolio-page .portfolio-style-card--wide {
  grid-row: auto;
  grid-column: auto;
}
body.design-subpage.abt.portfolio-page .portfolio-style-card {
  min-height: clamp(300px, 26vw, 360px);
  transform: none; /* drop any leftover parallax tilt — keep tiles aligned */
}
/* Tablet: a balanced 3-wide, then 2. */
@media (max-width: 1080px) {
  body.design-subpage.abt.portfolio-page .portfolio-style-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Phone: 2-wide. */
@media (max-width: 640px) {
  body.design-subpage.abt.portfolio-page .portfolio-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.design-subpage.abt.portfolio-page .portfolio-style-card {
    min-height: clamp(220px, 44vw, 300px);
  }
}

/* ============================================================
   Shop — "Витрина товаров" cohesion pass (2026-06):
   the grid is now an even 2×2 (photo products on top, service cards
   below). Give the service / "coming soon" cards a soft cover band so the
   bottom row reads with the same weight as the photo cards above instead
   of a bare icon floating over empty space.
   ============================================================ */
body.design-subpage.abt.shop-page .shop-product--service {
  padding-top: 0;
}
body.design-subpage.abt.shop-page .shop-product__service-head {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 34px 24px 28px;
  background:
    radial-gradient(135% 120% at 50% 0%, var(--d-gold-soft), transparent 72%),
    var(--d-bg-warm);
  border-bottom: 1px solid var(--d-line-soft);
}
body.design-subpage.abt.shop-page .shop-product--service .shop-product__icon {
  width: 72px;
  height: 72px;
  font-size: 1.7rem;
  box-shadow: 0 14px 30px -18px rgba(32, 21, 14, .5);
}

/* Fix the catalog breakpoints. The old `@media(max-width:1100px)` block sits
   LATER in the file than the `@media(max-width:980px)` one, so its 2-col rule
   was beating the 1-col rule on phones — the grid stayed two cramped columns.
   Re-assert the intended ladder here (last in source wins): 2 cols down to
   tablet, a single column on phones. */
@media (max-width: 1100px) {
  body.design-subpage.abt.shop-page .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  body.design-subpage.abt.shop-page .shop-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Shop — hero parallax (2026-06):
   the big "первый слайд" feature photo just sat there like a static
   preview. Give it the same in-frame drift as the portfolio gallery so
   it breathes on scroll. The .shop-hero is the scene (data-parallax-scene)
   and the media box carries data-parallax-speed="0" — it doesn't move the
   box, it just lets app.js publish --parallax-progress (0..1) there, which
   the inner <img> reads. scale 1.28 (~14% overflow each side) keeps the
   ±30px drift from ever revealing an edge, even at the 230px mobile height.
   ============================================================ */
body.design-subpage.abt.shop-page .shop-feature-card__media {
  overflow: hidden;
}
body.design-subpage.abt.shop-page .shop-hero[data-parallax-scene] .shop-feature-card__media img {
  translate: 0 calc((var(--parallax-progress, .5) - .5) * 60px);
  scale: 1.28;
  will-change: translate;
}
@media (prefers-reduced-motion: reduce) {
  body.design-subpage.abt.shop-page .shop-feature-card__media img {
    translate: 0 !important;
    scale: 1 !important;
  }
}

/* ============================================================
   Shop — hero rebalance (2026-06):
   the right showcase column (big feature card + wide mini card) ran ~170px
   PAST the bottom of the copy column, so the first screen looked lopsided,
   and the feature photo (360px) was oversized — reading as a giant preview
   rather than a product. Shrink the photo + tighten the mini card so the
   right column matches the copy height and both columns bottom out together.
   ============================================================ */
body.design-subpage.abt.shop-page .shop-hero__showcase {
  align-content: center;
  gap: 14px;
}
body.design-subpage.abt.shop-page .shop-hero .shop-feature-card__media {
  height: clamp(196px, 20vw, 258px);
}
body.design-subpage.abt.shop-page .shop-hero .shop-feature-card__body {
  padding: 18px 22px 20px;
}
body.design-subpage.abt.shop-page .shop-hero .shop-mini-card {
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 12px;
}
@media (max-width: 980px) {
  /* Stack the hero. The two-column rule earlier in the file lacks !important
     but sits after the @media(980) stacking rule, so it was winning and the
     copy got crushed to a sliver on phones. Re-assert single-column here. */
  body.design-subpage.abt.shop-page .shop-hero__grid {
    grid-template-columns: 1fr !important;
  }
  /* stacked layout — let the photo breathe again */
  body.design-subpage.abt.shop-page .shop-hero .shop-feature-card__media {
    height: clamp(220px, 42vw, 320px);
  }
}

/* ============================================================
   Shop — layered scroll parallax (2026-06), à la interior-course but
   themed for the light/warm premium look: soft washes + a faint drifting
   interior photo + floating word-chips + gentle content drift behind each
   section. Decorative layers are z-0 / pointer-events:none; content is
   lifted to z-1. Motion is driven by app.js (data-parallax-speed); it
   bails under prefers-reduced-motion, so no extra guard needed.
   ============================================================ */
body.design-subpage.abt.shop-page .shop-hero,
body.design-subpage.abt.shop-page #catalog,
body.design-subpage.abt.shop-page #how-to-buy,
body.design-subpage.abt.shop-page .shop-final {
  position: relative;
  overflow: hidden;
}
body.design-subpage.abt.shop-page .shop-hero__grid,
body.design-subpage.abt.shop-page #catalog > .shop-section__head,
body.design-subpage.abt.shop-page #catalog > .shop-grid,
body.design-subpage.abt.shop-page #how-to-buy > .shop-section__head,
body.design-subpage.abt.shop-page #how-to-buy > .shop-steps,
body.design-subpage.abt.shop-page .shop-final > .shop-final__box {
  position: relative;
  z-index: 1;
}

body.design-subpage.abt.shop-page .shop-parallax-bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
body.design-subpage.abt.shop-page .shop-parallax-bg--photo {
  overflow: hidden;
  border-radius: 38px;
  background-size: cover;
  background-position: center;
  opacity: .12;
  filter: saturate(.9) contrast(1.02);
  box-shadow: 0 50px 120px -60px rgba(60, 40, 24, .5);
}
body.design-subpage.abt.shop-page .shop-parallax-bg--wash {
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 42% 44%, rgba(171, 127, 78, .16), transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(120, 110, 92, .08), transparent 64%);
  filter: blur(20px);
}
body.design-subpage.abt.shop-page .shop-parallax-bg--grid {
  border-radius: 30px;
  background:
    linear-gradient(rgba(60, 40, 24, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 40, 24, .05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 38%, transparent 76%);
}

body.design-subpage.abt.shop-page .shop-float-note {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid rgba(171, 127, 78, .24);
  border-radius: 999px;
  background: rgba(255, 253, 249, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--d-accent);
  box-shadow: 0 18px 40px -26px rgba(60, 40, 24, .4);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

/* hero layers */
body.design-subpage.abt.shop-page .shop-parallax-bg--hero-wash {
  width: clamp(420px, 46vw, 760px);
  height: clamp(240px, 30vw, 460px);
  right: -12%;
  top: -10%;
}
body.design-subpage.abt.shop-page .shop-float-note--tex {
  left: min(45vw, 560px);
  top: 14%;
}
body.design-subpage.abt.shop-page .shop-float-note--acc {
  right: 5%;
  bottom: 10%;
}
/* catalog layers */
body.design-subpage.abt.shop-page .shop-parallax-bg--cat-photo {
  width: clamp(220px, 24vw, 400px);
  height: clamp(280px, 32vw, 500px);
  left: -7%;
  top: 12%;
  background-image: url("/assets/img/works/opt/g5.jpg");
}
body.design-subpage.abt.shop-page .shop-parallax-bg--cat-grid {
  width: clamp(340px, 40vw, 640px);
  height: clamp(230px, 28vw, 420px);
  right: -9%;
  bottom: -8%;
}
body.design-subpage.abt.shop-page .shop-float-note--cat {
  right: 3%;
  top: 8%;
}
/* how-to-buy layers */
body.design-subpage.abt.shop-page .shop-parallax-bg--how-wash {
  width: clamp(420px, 50vw, 820px);
  height: clamp(240px, 30vw, 480px);
  left: -14%;
  bottom: -12%;
}
body.design-subpage.abt.shop-page .shop-float-note--how {
  right: 5%;
  top: 6%;
}
/* final layers */
body.design-subpage.abt.shop-page .shop-parallax-bg--final-wash {
  width: clamp(420px, 50vw, 820px);
  height: clamp(240px, 30vw, 480px);
  right: -12%;
  top: -14%;
}
body.design-subpage.abt.shop-page .shop-float-note--final {
  left: 6%;
  bottom: 8%;
}

/* keep the decorative noise off small screens (clutter + perf) */
@media (max-width: 900px) {
  body.design-subpage.abt.shop-page .shop-parallax-bg,
  body.design-subpage.abt.shop-page .shop-float-note {
    display: none;
  }
}

/* ============================================================
   Design subpages — hero mobile-stack fix (2026-06):
   the shared two-column hero rule (`...hero__grid/__inner {
   grid-template-columns: minmax(0,.9fr) minmax(360px,1fr) }`) has no
   !important but sits LATER in the file than the @media(980) stacking rule,
   so it won on phones — the copy column collapsed toward 0px while the
   360px min-width visual overflowed. Verified broken on portfolio, challenge
   AND sketchup heroes. Re-assert single column for the whole shared group
   here (last in source wins). Shop is handled in its own block above.
   ============================================================ */
@media (max-width: 980px) {
  body.design-subpage.abt #hero > .mx-auto,
  body.design-subpage.abt.sketchup-page #sketchup-hero > .relative,
  body.design-subpage.abt.challenge-page .challenge-hero__inner,
  body.design-subpage.abt.portfolio-page .portfolio-hero__inner {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Portfolio — layered scroll parallax (2026-06), à la interior-course.
   Per user: "ярче" — brighter than shop, since this is a gallery page.
   Adds drifting interior photo panels + warm washes + word-chips behind
   the styles / route / CTA sections (the gallery already has its own
   in-frame drift). Reuses the existing .portfolio-parallax-bg / -float-note
   look; new layers sit at z-0 with content lifted to z-1.
   ============================================================ */
body.design-subpage.abt.portfolio-page #portfolio-styles,
body.design-subpage.abt.portfolio-page #portfolio-route,
body.design-subpage.abt.portfolio-page #portfolio-cta {
  position: relative;
  overflow: hidden;
}
body.design-subpage.abt.portfolio-page #portfolio-styles > .portfolio-section__head,
body.design-subpage.abt.portfolio-page #portfolio-styles > .portfolio-style-grid,
body.design-subpage.abt.portfolio-page #portfolio-route > .portfolio-section__head,
body.design-subpage.abt.portfolio-page #portfolio-route > .portfolio-route__list,
body.design-subpage.abt.portfolio-page #portfolio-cta > :not(.portfolio-parallax-bg):not(.portfolio-float-note) {
  position: relative;
  z-index: 1;
}
body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--photo {
  z-index: 0;
  overflow: hidden;
  border-radius: 34px;
  background-size: cover;
  background-position: center;
  opacity: .2;
  filter: saturate(.96);
  box-shadow: 0 50px 120px -58px rgba(122, 80, 40, .5);
}
body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--wash {
  z-index: 0;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 42% 44%, rgba(171, 127, 78, .22), transparent 60%),
    radial-gradient(ellipse at 72% 58%, rgba(122, 80, 40, .12), transparent 64%);
  filter: blur(20px);
}
/* styles section */
body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--styles-photo {
  width: clamp(220px, 25vw, 420px);
  height: clamp(280px, 32vw, 520px);
  right: -6%;
  top: 14%;
  background-image: url("/assets/img/works/3/031.png");
}
body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--styles-wash {
  width: clamp(420px, 48vw, 780px);
  height: clamp(240px, 30vw, 460px);
  left: -14%;
  bottom: -10%;
}
body.design-subpage.abt.portfolio-page .portfolio-float-note--mood {
  left: 5%;
  top: 8%;
}
/* route section */
body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--route-photo {
  width: clamp(220px, 24vw, 400px);
  height: clamp(280px, 30vw, 480px);
  left: -7%;
  top: 16%;
  background-image: url("/assets/img/works/2/021.png");
}
body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--route-wash {
  width: clamp(420px, 48vw, 780px);
  height: clamp(240px, 30vw, 460px);
  right: -14%;
  top: -10%;
}
body.design-subpage.abt.portfolio-page .portfolio-float-note--route {
  right: 5%;
  bottom: 12%;
}
/* CTA section */
body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--cta-wash {
  width: clamp(460px, 54vw, 900px);
  height: clamp(260px, 32vw, 520px);
  left: 50%;
  top: -16%;
  translate: -50% 0;
}
body.design-subpage.abt.portfolio-page .portfolio-float-note--cta {
  left: 6%;
  bottom: 14%;
}
@media (max-width: 900px) {
  body.design-subpage.abt.portfolio-page .portfolio-parallax-bg--photo,
  body.design-subpage.abt.portfolio-page .portfolio-float-note--mood,
  body.design-subpage.abt.portfolio-page .portfolio-float-note--route,
  body.design-subpage.abt.portfolio-page .portfolio-float-note--cta {
    display: none;
  }
}

/* ============================================================
   Challenge (интенсив) — layered scroll parallax (2026-06), à la
   interior-course. Per user: "энергичнее" — more layers + livelier motion
   (the HTML uses bigger speeds/rotates). Adds drifting photo panels +
   terracotta washes + word-chips behind the result / program / join /
   format / FAQ sections (hero already had panels). z-0 layers, content z-1.
   ============================================================ */
body.design-subpage.abt.challenge-page #result,
body.design-subpage.abt.challenge-page #program,
body.design-subpage.abt.challenge-page #join,
body.design-subpage.abt.challenge-page #format,
body.design-subpage.abt.challenge-page #faq {
  overflow: hidden;
}
body.design-subpage.abt.challenge-page #result > :not(.challenge-parallax-bg):not(.challenge-float-note),
body.design-subpage.abt.challenge-page #program > :not(.challenge-parallax-bg):not(.challenge-float-note),
body.design-subpage.abt.challenge-page #join > :not(.challenge-parallax-bg):not(.challenge-float-note),
body.design-subpage.abt.challenge-page #format > :not(.challenge-parallax-bg):not(.challenge-float-note),
body.design-subpage.abt.challenge-page #faq > :not(.challenge-parallax-bg):not(.challenge-float-note) {
  position: relative;
  z-index: 1;
}
body.design-subpage.abt.challenge-page .challenge-parallax-bg--photo {
  z-index: 0;
  overflow: hidden;
  border-radius: 34px;
  background-size: cover;
  background-position: center;
  opacity: .2;
  filter: saturate(.98) contrast(1.03);
  box-shadow: 0 50px 120px -58px rgba(143, 85, 41, .5);
}
body.design-subpage.abt.challenge-page .challenge-parallax-bg--wash {
  z-index: 0;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 42% 44%, rgba(184, 122, 66, .24), transparent 60%),
    radial-gradient(ellipse at 70% 58%, rgba(143, 85, 41, .14), transparent 64%);
  filter: blur(20px);
}
/* result */
body.design-subpage.abt.challenge-page .challenge-parallax-bg--result-photo {
  width: clamp(220px, 25vw, 420px);
  height: clamp(280px, 32vw, 520px);
  right: -6%;
  top: 12%;
  background-image: url("/assets/img/works/4/041.png");
}
body.design-subpage.abt.challenge-page .challenge-parallax-bg--result-wash {
  width: clamp(420px, 50vw, 820px);
  height: clamp(240px, 30vw, 480px);
  left: -14%;
  bottom: -12%;
}
body.design-subpage.abt.challenge-page .challenge-float-note--result {
  left: 5%;
  top: 7%;
}
/* program */
body.design-subpage.abt.challenge-page .challenge-parallax-bg--program-photo {
  width: clamp(220px, 24vw, 400px);
  height: clamp(280px, 30vw, 480px);
  left: -7%;
  top: 14%;
  background-image: url("/assets/img/works/1/013.png");
}
body.design-subpage.abt.challenge-page .challenge-float-note--program {
  right: 5%;
  top: 8%;
}
/* join */
body.design-subpage.abt.challenge-page .challenge-parallax-bg--join-wash {
  width: clamp(460px, 54vw, 900px);
  height: clamp(260px, 32vw, 520px);
  right: -12%;
  top: -14%;
}
body.design-subpage.abt.challenge-page .challenge-float-note--join {
  left: 6%;
  bottom: 10%;
}
/* format */
body.design-subpage.abt.challenge-page .challenge-parallax-bg--format-photo {
  width: clamp(220px, 24vw, 400px);
  height: clamp(280px, 30vw, 480px);
  right: -7%;
  top: 16%;
  background-image: url("/assets/img/works/5/051.jpg");
}
body.design-subpage.abt.challenge-page .challenge-float-note--format {
  left: 5%;
  bottom: 12%;
}
/* faq */
body.design-subpage.abt.challenge-page .challenge-parallax-bg--faq-wash {
  width: clamp(420px, 48vw, 780px);
  height: clamp(240px, 30vw, 460px);
  left: -14%;
  top: -10%;
}
body.design-subpage.abt.challenge-page .challenge-float-note--faq {
  right: 6%;
  bottom: 12%;
}
@media (max-width: 900px) {
  body.design-subpage.abt.challenge-page .challenge-parallax-bg--photo,
  body.design-subpage.abt.challenge-page .challenge-float-note--result,
  body.design-subpage.abt.challenge-page .challenge-float-note--program,
  body.design-subpage.abt.challenge-page .challenge-float-note--join,
  body.design-subpage.abt.challenge-page .challenge-float-note--format,
  body.design-subpage.abt.challenge-page .challenge-float-note--faq {
    display: none;
  }
}

/* ============================================================
   Mobile trim (2026-06): lighter, faster-selling phone scroll.
   - Portfolio gallery: the "Параллакс" section was ~45% of the page on
     mobile (28 photos). Show only 3 per style on phones — still showcases
     each mood, half the scroll.
   - Drop a couple of redundant "meta" intro lines that only restate the
     heading; they add scroll without selling.
   ============================================================ */
@media (max-width: 560px) {
  body.design-subpage.abt.portfolio-page .design-scroll-gallery--portfolio .design-scroll-shot:nth-child(n+4) {
    display: none;
  }
}
@media (max-width: 720px) {
  /* "Каждая карточка ведёт к отдельному визуальному блоку…" — meta filler */
  body.design-subpage.abt.portfolio-page #portfolio-styles > .portfolio-section__head p {
    display: none;
  }
  /* "Активные позиции можно открыть сразу…" — meta filler */
  body.design-subpage.abt.shop-page #catalog > .shop-section__head > p {
    display: none;
  }
}